/* Battle Signals — blood, steel and charcoal.
   Charcoal ground, blue as the interactive workhorse, blood red reserved for
   urgency. The two reds are deliberate and load-bearing: --blood is the
   structural urgency colour (High priority, overdue, destructive actions),
   while --crimson is brighter and hotter and belongs to the Critical tier
   alone, where it arrives with a glow and the hook-strike animation. Flattening
   them into one red would make an unhandled Critical alert look identical to
   a routine High card, which is the one thing section 6 exists to prevent.

   The charcoals carry a faint red bias rather than being neutral grey, so the
   ground relates to the accent instead of sitting under it.

   The hue tokens below (--cyan, --teal, --green, --amber, --orange, --violet)
   are unchanged on purpose: the signal-type, source and event tags are a
   colour-coded vocabulary Brian already reads at a glance, and recolouring
   them would cost him that. They stay exactly as they were. */

:root {
  --bg:            #0E0F11;
  --bg-2:          #131417;
  --panel:         #17191D;
  --panel-2:       #1C1F24;
  --panel-3:       #23262C;
  --line:          #2B2F36;
  --line-hot:      #3C424B;

  /* Interactive accent — everything clickable, focusable or countable. */
  --accent:        #5A9BFF;
  --accent-rgb:    90, 155, 255;
  --accent-soft:   #A8C8FF;

  /* Urgency. Deep and structural. */
  --blood:         #A5121F;
  --blood-rgb:     165, 18, 31;
  --blood-lit:     #E8515F;

  /* Critical only. Hotter than --blood so it separates from it under glow. */
  --crimson:       #FF2D46;
  --crimson-rgb:   255, 45, 70;

  /* Unchanged — the tag vocabulary depends on these. */
  --cyan:          #22D3EE;
  --teal:          #5EEAD4;
  --green:         #34D399;
  --blue:          #3B82F6;
  --violet:        #8B5CF6;
  --amber:         #FBBF24;
  --orange:        #FB923C;
  --red:           #F87171;

  --text:          #ECEDF0;
  --text-dim:      #A2A8B2;
  --text-faint:    #6E757F;

  --glow-cyan:     0 0 20px rgba(90, 155, 255, .30);
  --glow-crimson:  0 0 22px rgba(255, 45, 70, .45);
  --radius:        14px;
  --radius-sm:     9px;
  --rail:          228px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0; min-height: 100%;
  /* This page scrolls vertically only. A single overflowing control used to
     make the whole document draggable sideways, which feels broken on a phone.
     Layout still has to fit -- this is the guarantee, not the fix. */
  overflow-x: hidden;
  max-width: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: ui-sans-serif, -apple-system, "SF Pro Text", "Inter", "Segoe UI", sans-serif;
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
}

body::before {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background:
    radial-gradient(900px 500px at 12% -5%, rgba(var(--blood-rgb),.20), transparent 62%),
    radial-gradient(800px 500px at 88% 0%, rgba(var(--accent-rgb),.09), transparent 60%),
    radial-gradient(700px 600px at 60% 110%, rgba(var(--blood-rgb),.09), transparent 60%);
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3, h4 { margin: 0; font-weight: 600; }

/* ------------------------------------------------------------------ layout */

.app { display: flex; min-height: 100vh; position: relative; z-index: 1; }

.rail {
  width: var(--rail); flex: 0 0 var(--rail);
  background: linear-gradient(180deg, var(--bg-2), #0A0B0D);
  border-right: 1px solid var(--line);
  display: flex; flex-direction: column;
  position: sticky; top: 0; height: 100vh;
}

.brand {
  display: flex; align-items: center; gap: 10px;
  padding: 20px 18px 16px; border-bottom: 1px solid var(--line);
}
.brand-mark {
  /* The mark is 2.15:1, so width follows from height. Transparent PNG, so no
     tile rounding -- the artwork is the silhouette. */
  width: 56px; height: 26px; flex: 0 0 56px; display: block;
  filter: drop-shadow(0 0 8px rgba(var(--blood-rgb),.45));
}
.brand-name {
  font-family: ui-serif, "Iowan Old Style", Georgia, serif;
  font-size: 17px; letter-spacing: .15em; font-weight: 600; line-height: 1.1;
  background: linear-gradient(96deg, var(--blood-lit), var(--accent) 70%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.brand-sub { font-size: 10px; letter-spacing: .18em; color: var(--text-faint); text-transform: uppercase; }

.nav { padding: 14px 10px; display: flex; flex-direction: column; gap: 2px; flex: 1; overflow-y: auto; }
.nav-item {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px; border-radius: var(--radius-sm);
  color: var(--text-dim); cursor: pointer; border: 1px solid transparent;
  background: none; text-align: left; width: 100%;
}
.nav-item:hover { background: var(--panel); color: var(--text); }
.nav-item.active {
  background: linear-gradient(90deg, rgba(var(--accent-rgb),.14), rgba(var(--accent-rgb),.03));
  color: var(--text); border-color: var(--line-hot);
}
/* Fixed box, centred glyph. Without this each icon's own line box sets the row
   height, so the nav rows came out at 37/40/40/41px purely from glyph metrics.
   Pinning the box means font-size changes below cannot leak into layout. */
.nav-icon {
  flex: 0 0 17px; width: 17px; height: 17px;
  display: inline-flex; align-items: center; justify-content: center;
  line-height: 1; opacity: .9;
}
/* U+2699 GEAR draws a much smaller glyph than the geometric shapes beside it:
   8.4px of ink against the 11.8px circle of U+25D1, at the same font size.
   Scaling by 1.4 matches its outer diameter to that circle. */
.nav-icon-gear { font-size: 1.4em; }

/* Drawn icons (shark teeth, minnows, scroll).
   Colour is never set on the shapes themselves — it flows in from the parent
   through `currentColor`, so an icon picks up the same dim/bright/accent
   states as the text beside it and stays on-palette automatically. That
   inheritance is also the only way to style through a <use> shadow tree. */
.ic {
  width: 17px; height: 17px; display: block;
  fill: currentColor;
  color: inherit;
  transition: filter .15s ease;
}
/* The scroll reads better as line work than as a solid. */
.ic-outline {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Active nav item: the icon takes the brand cyan and the same soft glow the
   wordmark and the "hot" badges use, so the accent reads as one system. */
.nav-item.active .ic {
  color: var(--accent);
  filter: drop-shadow(0 0 6px rgba(var(--accent-rgb), .45));
}
.nav-item:hover .ic { color: var(--text); }
.nav-item.active:hover .ic { color: var(--accent); }

/* Inline in body copy and buttons — sits on the text baseline. */
.ic-inline {
  width: 15px; height: 15px; display: inline-block;
  vertical-align: -3px; margin-right: 7px;
  fill: currentColor;
}
.ic-inline.ic-outline { fill: none; stroke: currentColor; }

@media (prefers-reduced-motion: reduce) {
  .ic { transition: none; }
}
.nav-badge {
  margin-left: auto; font-size: 11px; padding: 1px 7px; border-radius: 99px;
  background: var(--panel-3); color: var(--text-dim); font-variant-numeric: tabular-nums;
}
.nav-badge.hot { background: rgba(var(--accent-rgb),.18); color: var(--accent); box-shadow: var(--glow-cyan); }

/* --------------------------------------------------------- critical tier (v2.1 §6) */

.nav-item.critical-nav { color: var(--crimson); }
.nav-item.critical-nav:hover { background: rgba(var(--crimson-rgb),.10); }
.nav-item.critical-nav.active { background: rgba(var(--crimson-rgb),.16); color: var(--crimson); }
.nav-item.critical-nav .ic-critical { color: var(--crimson); }
.nav-badge.hot.critical-badge {
  background: rgba(var(--crimson-rgb),.22); color: var(--crimson);
  box-shadow: var(--glow-crimson);
}

.sword-btn {
  position: relative; display: flex; align-items: center; gap: 6px;
  background: none; border: 1px solid var(--line); border-radius: 99px;
  padding: 6px 12px; color: var(--text-faint); cursor: pointer;
  transition: color .15s, border-color .15s, box-shadow .15s;
}
.sword-btn .ic-critical { width: 17px; height: 17px; }
.sword-btn:hover { border-color: var(--line-hot); }
.sword-btn.lit {
  color: var(--crimson); border-color: rgba(var(--crimson-rgb),.5);
  box-shadow: var(--glow-crimson);
}
.sword-btn.lit .ic-critical {
  /* Rotating around the eye rather than the icon's centre -- a hook hangs
     from its eye, so a strike reads as the whole shank swinging on that
     point, not spinning in place. */
  animation: hook-strike 1.7s ease-in-out infinite;
  transform-origin: 60% 15%;
}
.sword-count {
  font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 11px;
  font-variant-numeric: tabular-nums;
}
.sword-btn:not(.lit) .sword-count { display: none; }

/* A sharp tug followed by a damped swing, like a hook that just set. */
@keyframes hook-strike {
  0%, 100% { transform: rotate(0deg); }
  15%      { transform: rotate(-28deg); }
  32%      { transform: rotate(16deg); }
  50%      { transform: rotate(-9deg); }
  68%      { transform: rotate(4deg); }
  85%      { transform: rotate(-2deg); }
}
@media (prefers-reduced-motion: reduce) {
  .sword-btn.lit .ic-critical { animation: none; }
}

.critical-notice {
  display: flex; align-items: center; gap: 10px; padding: 12px 16px;
  border-radius: var(--radius-sm); margin-bottom: 15px; font-size: 13.5px;
  background: rgba(var(--crimson-rgb),.10); border: 1px solid rgba(var(--crimson-rgb),.32); color: #FFDDE1;
}
.critical-notice .ic-critical { color: var(--crimson); flex: 0 0 auto; }
.bcard.critical { border-left: 3px solid var(--crimson); box-shadow: 0 0 0 1px rgba(var(--crimson-rgb),.22); }
.bcard.critical .pri { background: rgba(var(--crimson-rgb),.20); color: var(--crimson); border-color: rgba(var(--crimson-rgb),.45); }

.nav-sep {
  font-size: 9.5px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--text-faint); padding: 14px 12px 5px; opacity: .75;
}

.rail-foot { padding: 12px 14px; border-top: 1px solid var(--line); font-size: 11px; color: var(--text-faint); }

.user-badge {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 12px 14px; border-top: 1px solid var(--line); font-size: 12.5px;
}
.user-badge .user-name { color: var(--text); font-weight: 600; }
.user-badge .user-switch {
  background: none; border: 1px solid var(--line-hot); color: var(--text-faint);
  border-radius: var(--radius-sm); padding: 3px 9px; font-size: 11px; cursor: pointer;
}
.user-badge .user-switch:hover { color: var(--text); border-color: var(--accent); }

.acct-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 13px;
}
.acct-row:last-child { border-bottom: none; }

/* ------------------------------------------------------------- auth screen */

#auth-screen {
  position: fixed; inset: 0; z-index: 500;
  background: radial-gradient(1100px 650px at 20% -10%, rgba(var(--blood-rgb),.22), transparent 62%),
              radial-gradient(900px 600px at 85% 100%, rgba(var(--accent-rgb),.08), transparent 60%),
              var(--bg);
  align-items: center; justify-content: center; padding: 24px;
}
.auth-card {
  width: 100%; max-width: 360px; background: var(--panel);
  border: 1px solid var(--line-hot); border-radius: var(--radius);
  padding: 30px 28px 26px; box-shadow: 0 30px 80px rgba(0,0,0,.55);
}
.auth-brand { display: flex; align-items: center; gap: 11px; margin-bottom: 22px; }
.auth-brand .brand-mark { width: 65px; height: 30px; flex: 0 0 65px; }
.auth-word {
  font-family: ui-serif, "Iowan Old Style", Georgia, serif;
  font-size: 17px; letter-spacing: .15em; font-weight: 600; line-height: 1.1;
  background: linear-gradient(96deg, var(--blood), var(--accent) 70%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.auth-sub { font-size: 10px; letter-spacing: .18em; color: var(--text-faint); text-transform: uppercase; }
.auth-card h1 { font-size: 18px; margin-bottom: 14px; }
.auth-notice {
  font-size: 12.5px; line-height: 1.55; color: var(--text-dim);
  background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 10px 12px; margin-bottom: 16px;
}
.auth-error {
  font-size: 12.5px; color: var(--red); min-height: 18px; margin: 2px 0 12px;
}

/* ------------------------------------------------------ congrats banner */

.congrats {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 13px 16px; margin-bottom: 16px; border-radius: var(--radius);
  background: linear-gradient(96deg, rgba(52,211,153,.13), rgba(var(--accent-rgb),.05));
  border: 1px solid rgba(52,211,153,.32);
}
.congrats-mark { color: var(--green); font-size: 15px; line-height: 1.4; }
.congrats-body { flex: 1; font-size: 13.5px; line-height: 1.55; color: #D6F5E8; }
.congrats-body b { color: #EAFDF5; }
.congrats-due { margin-top: 5px; font-size: 12.5px; color: var(--text-dim); }

/* --------------------------------------------------------- batch cards */

.batch-head {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin-bottom: 15px; font-size: 13px; color: var(--text-dim);
}
.batch-count {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 12px; color: var(--accent);
  border: 1px solid rgba(var(--accent-rgb),.3); border-radius: 99px; padding: 3px 10px;
}

/* --------------------------------------------------------- filter bar (v2.1 §4) */

.filter-bar {
  display: flex; align-items: center; gap: 10px; margin-bottom: 15px;
}
.chip-row { display: flex; flex-wrap: wrap; gap: 7px; }
.filter-group { margin-top: 10px; }
.filter-group-label {
  font-size: 11px; text-transform: uppercase; letter-spacing: .05em;
  color: var(--text-faint); margin-bottom: 6px;
}
.filter-check-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 6px 12px;
}
.filter-check {
  display: flex; align-items: center; gap: 7px; font-size: 13px;
  color: var(--text-dim); cursor: pointer;
}
.filter-check input { accent-color: var(--accent); cursor: pointer; }
.filter-check:hover { color: var(--text); }

/* --------------------------------------------------------- lanes (v2.1 §5) */

.lane-bar {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: -6px 0 15px;
}
.lane-bar-label {
  font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--text-faint);
}
.lane-chip {
  display: flex; align-items: stretch; border: 1px solid var(--line);
  border-radius: 99px; overflow: hidden; background: var(--panel-3);
}
.lane-run {
  background: none; border: none; color: var(--text-dim); font-size: 12.5px;
  padding: 5px 12px; cursor: pointer; display: flex; align-items: center; gap: 6px;
}
.lane-run:hover { color: var(--accent); }
.lane-shared { color: var(--teal); font-size: 11px; }
.lane-runs {
  font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 10.5px;
  color: var(--text-faint); background: var(--bg-2); border-radius: 99px; padding: 1px 6px;
}
.lane-edit, .lane-del {
  background: none; border: none; border-left: 1px solid var(--line);
  color: var(--text-faint); font-size: 12px; padding: 5px 9px; cursor: pointer;
}
.lane-edit:hover { color: var(--accent); }
.lane-del:hover { color: var(--blood-lit); }

/* Built for a fast sequential pass with Hoovers open in the next tab, so the
   four disambiguation fields (name, HQ, revenue, contact) lead and everything
   else is tucked behind the expander. */
.bcard {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius); margin-bottom: 14px; overflow: hidden;
  transition: border-color .12s, opacity .2s;
}
.bcard:hover { border-color: var(--line-hot); }
.bcard.done { opacity: .5; }
.bcard.high { border-left: 3px solid var(--blood); }

.bcard-top { display: flex; align-items: flex-start; gap: 12px; padding: 16px 18px 12px; }
.bcard-name {
  font-size: 17px; font-weight: 650; line-height: 1.25;
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.copy-btn {
  border: 1px solid var(--line-hot); background: var(--bg-2); color: var(--text-dim);
  border-radius: 6px; font-size: 10.5px; padding: 2px 7px; cursor: pointer;
  letter-spacing: .04em; text-transform: uppercase;
}
.copy-btn:hover { color: var(--accent); border-color: var(--accent); }
.copy-btn.copied { color: var(--green); border-color: var(--green); }

.pri {
  font-size: 11px; padding: 3px 10px; border-radius: 99px; white-space: nowrap;
  font-weight: 600; letter-spacing: .03em;
}
.pri.High { background: rgba(var(--blood-rgb),.28); color: var(--blood-lit); border: 1px solid rgba(var(--blood-rgb),.65); }
.pri.Normal { background: var(--panel-3); color: var(--text-dim); border: 1px solid var(--line); }

.bcard-facts {
  display: flex; flex-wrap: wrap; gap: 6px 24px;
  padding: 0 18px 12px; font-size: 13px; color: var(--text-dim);
}
.bcard-facts .k {
  display: block; font-size: 10px; letter-spacing: .09em; text-transform: uppercase;
  color: var(--text-faint); margin-bottom: 1px;
}
.bcard-facts .v { color: var(--text); }
.bcard-facts .v.missing { color: var(--text-faint); font-style: italic; }
.est { font-size: 10px; color: var(--amber); margin-left: 4px; }

.bcard-signal { padding: 0 18px 14px; }
.bcard-headline {
  font-size: 15px; font-weight: 600; color: var(--teal); margin-bottom: 6px;
}
.bcard-desc { font-size: 13.5px; line-height: 1.62; color: #D3E2F5; }
.bcard-taxonomy { margin-top: 9px; display: flex; gap: 6px; flex-wrap: wrap; }
.bcard-links { margin-top: 9px; display: flex; gap: 14px; flex-wrap: wrap; font-size: 12.5px; }

.bcard-contact {
  margin: 0 18px 14px; padding: 11px 13px; border-radius: var(--radius-sm);
  background: var(--bg-2); border: 1px solid var(--line);
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 13px;
}
.bcard-contact.empty { color: var(--text-faint); font-style: italic; justify-content: center; }

.bcard-actions {
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  padding: 12px 18px; background: var(--bg-2); border-top: 1px solid var(--line);
}
.btn-contacted {
  background: linear-gradient(92deg, rgba(52,211,153,.24), rgba(var(--accent-rgb),.16));
  border: 1px solid rgba(52,211,153,.5); color: #DFFCEF; font-weight: 600;
}
.btn-contacted:hover:not(:disabled) { box-shadow: 0 0 18px rgba(52,211,153,.28); }

.crm-select { width: auto; min-width: 158px; font-size: 12.5px; padding: 6px 9px; }
.note-input { flex: 1; min-width: 190px; font-size: 12.5px; padding: 6px 10px; }

.bcard-more { padding: 0 18px 14px; }
.bcard-more summary {
  cursor: pointer; font-size: 12px; color: var(--text-faint);
  padding: 4px 0; list-style: none;
}
.bcard-more summary::-webkit-details-marker { display: none; }
.bcard-more summary:hover { color: var(--accent); }
.bcard-more summary::before { content: "▸ "; }
.bcard-more[open] summary::before { content: "▾ "; }
.warehouse { margin-top: 9px; font-size: 12px; color: var(--text-dim); line-height: 1.75; }
.warehouse .k { color: var(--text-faint); }

.attempt-chip {
  font-size: 11px; padding: 2px 8px; border-radius: 99px;
  background: var(--panel-3); color: var(--text-dim); border: 1px solid var(--line);
}
.overdue { color: var(--blood-lit); font-weight: 600; }

.crm-link {
  font-size: 11px; padding: 2px 9px; border-radius: 99px;
  background: rgba(var(--accent-rgb),.10); color: var(--accent); border: 1px solid rgba(var(--accent-rgb),.28);
  text-decoration: none; white-space: nowrap;
}
.crm-link:hover { background: rgba(var(--accent-rgb),.18); border-color: rgba(var(--accent-rgb),.45); }

/* --------------------------------------------------------- custom export */

.col-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(215px, 1fr));
  gap: 5px 14px; max-height: 320px; overflow-y: auto;
  padding: 12px; background: var(--bg-2); border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}
.col-opt { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--text-dim); }
.col-opt input { accent-color: var(--accent); }
.col-opt:hover { color: var(--text); }
.filter-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; margin-bottom: 14px; }
.filter-row > div { flex: 1; min-width: 155px; }
.dot { display: inline-block; width: 7px; height: 7px; border-radius: 99px; margin-right: 6px; }
.dot.on { background: var(--green); box-shadow: 0 0 8px rgba(52,211,153,.7); }
.dot.off { background: var(--text-faint); }

.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.topbar {
  display: flex; align-items: center; gap: 14px;
  padding: 16px 26px; border-bottom: 1px solid var(--line);
  background: rgba(7,13,23,.72); backdrop-filter: blur(10px);
  position: sticky; top: 0; z-index: 20;
}
.topbar h1 { font-size: 17px; letter-spacing: .01em; }
.topbar .sub { color: var(--text-faint); font-size: 12px; }
.spacer { flex: 1; }

.content { padding: 22px 26px 60px; }

/* ------------------------------------------------------------------ controls */

.btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 14px; border-radius: var(--radius-sm);
  background: var(--panel-2); border: 1px solid var(--line-hot);
  color: var(--text); cursor: pointer; white-space: nowrap;
  transition: background .12s, border-color .12s, transform .06s;
}
.btn:hover:not(:disabled) { background: var(--panel-3); border-color: var(--accent); }
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn:disabled { opacity: .42; cursor: not-allowed; }
.btn.primary {
  background: linear-gradient(92deg, rgba(var(--accent-rgb),.26), rgba(var(--accent-rgb),.14));
  border-color: rgba(var(--accent-rgb),.55); color: #EAF2FF;
}
.btn.primary:hover:not(:disabled) { box-shadow: var(--glow-cyan); }
.btn.ghost { background: transparent; border-color: var(--line); color: var(--text-dim); }
.btn.ghost:hover:not(:disabled) { color: var(--text); }
.btn.sm { padding: 5px 10px; font-size: 12px; }
.btn.danger { border-color: rgba(var(--blood-rgb),.7); color: var(--blood-lit); }

input[type=text], input[type=search], input[type=number], input[type=password],
input[type=date], select, textarea {
  background: var(--bg-2); border: 1px solid var(--line);
  border-radius: var(--radius-sm); padding: 8px 11px; color: var(--text);
  outline: none; width: 100%;
}
input:focus, select:focus, textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(var(--accent-rgb),.10); }
textarea { resize: vertical; min-height: 84px; line-height: 1.5; }
label { display: block; font-size: 12px; color: var(--text-dim); margin-bottom: 5px; }
.field { margin-bottom: 15px; }
.hint { font-size: 11px; color: var(--text-faint); margin-top: 5px; line-height: 1.5; }

/* ------------------------------------------------------------------ filters */

.filters {
  display: flex; flex-wrap: wrap; gap: 9px; align-items: center;
  padding: 13px 16px; background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius); margin-bottom: 16px;
}
.filters .grow { flex: 1; min-width: 190px; }
.filters select, .filters input { width: auto; min-width: 128px; }
.chip {
  padding: 5px 11px; border-radius: 99px; border: 1px solid var(--line);
  background: var(--bg-2); color: var(--text-dim); cursor: pointer; font-size: 12px;
}
.chip:hover { color: var(--text); border-color: var(--line-hot); }
.chip.on { background: rgba(var(--accent-rgb),.15); border-color: rgba(var(--accent-rgb),.45); color: var(--accent); }

.bulkbar {
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  padding: 11px 16px; margin-bottom: 14px; border-radius: var(--radius);
  background: linear-gradient(92deg, rgba(var(--accent-rgb),.13), rgba(var(--accent-rgb),.03));
  border: 1px solid rgba(var(--accent-rgb),.35);
}

/* ------------------------------------------------------------------ cards */

.card {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius); margin-bottom: 13px; overflow: hidden;
  transition: border-color .12s;
}
.card:hover { border-color: var(--line-hot); }
.card.unread { border-left: 3px solid var(--accent); }
.card.selected { border-color: var(--accent); box-shadow: 0 0 0 1px rgba(var(--accent-rgb),.28); }

.card-head {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 14px 16px; border-bottom: 1px solid var(--line);
}
.card-title { font-size: 15px; font-weight: 600; line-height: 1.3; }
.card-title .ticker { color: var(--text-faint); font-weight: 400; font-size: 12px; margin-left: 7px; }
.card-meta { display: flex; flex-wrap: wrap; gap: 7px; align-items: center; margin-top: 6px; }
.card-body { padding: 14px 16px; }
.card-foot {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 11px 16px; background: var(--bg-2); border-top: 1px solid var(--line);
}

.tag {
  font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase;
  padding: 3px 8px; border-radius: 5px; border: 1px solid transparent; white-space: nowrap;
}
.tag.src-edgar { background: rgba(59,130,246,.16); color: #9DC4FF; border-color: rgba(59,130,246,.3); }
.tag.src-businesswire { background: rgba(139,92,246,.16); color: #C9B6FF; border-color: rgba(139,92,246,.3); }
.tag.form { background: var(--panel-3); color: var(--text-dim); }
.tag.demo { background: rgba(251,191,36,.16); color: var(--amber); border-color: rgba(251,191,36,.35); }
.tag.ev-capex_equipment { background: rgba(52,211,153,.15); color: var(--green); border-color: rgba(52,211,153,.3); }
.tag.ev-expansion_facility { background: rgba(94,234,212,.14); color: var(--teal); border-color: rgba(94,234,212,.3); }
.tag.ev-financing { background: rgba(34,211,238,.14); color: var(--cyan); border-color: rgba(34,211,238,.3); }
.tag.ev-m_and_a { background: rgba(139,92,246,.15); color: #C9B6FF; border-color: rgba(139,92,246,.3); }
.tag.ev-exec_change { background: rgba(251,146,60,.14); color: var(--orange); border-color: rgba(251,146,60,.3); }
.tag.ev-layoffs { background: rgba(248,113,113,.14); color: var(--red); border-color: rgba(248,113,113,.3); }
.tag.ev-other { background: var(--panel-3); color: var(--text-faint); }
.tag.taxonomy { background: rgba(94,234,212,.10); color: var(--teal); border-color: rgba(94,234,212,.25); }
.tag.region { background: rgba(59,130,246,.12); color: #9DC4FF; border-color: rgba(59,130,246,.25); }

.status {
  font-size: 11px; padding: 3px 9px; border-radius: 99px; white-space: nowrap;
  border: 1px solid transparent;
}
.status.new { background: rgba(var(--accent-rgb),.15); color: var(--accent); border-color: rgba(var(--accent-rgb),.35); }
.status.strong_fit { background: rgba(52,211,153,.16); color: var(--green); border-color: rgba(52,211,153,.35); }
.status.deprioritized { background: rgba(251,146,60,.14); color: var(--orange); border-color: rgba(251,146,60,.3); }
.status.open_unclear { background: rgba(251,191,36,.14); color: var(--amber); border-color: rgba(251,191,36,.3); }
.status.noise { background: var(--panel-3); color: var(--text-faint); border-color: var(--line); }

.urgency { font-size: 11px; padding: 3px 9px; border-radius: 99px; border: 1px solid var(--line); color: var(--text-dim); }
.urgency.high { color: var(--red); border-color: rgba(248,113,113,.4); background: rgba(248,113,113,.10); }
.urgency.normal { color: var(--text-dim); }
.urgency.muted { color: var(--text-faint); font-style: italic; }

.snapshot {
  display: flex; flex-wrap: wrap; gap: 5px 20px; padding: 10px 0 0;
  font-size: 12px; color: var(--text-dim);
}
.snapshot .k { color: var(--text-faint); margin-right: 5px; }
.snapshot .empty { color: var(--text-faint); font-style: italic; }

.summary { line-height: 1.62; color: #D3E2F5; }
.summary.pending { color: var(--text-faint); font-style: italic; }

.suggestion {
  display: flex; gap: 9px; align-items: flex-start;
  margin-top: 12px; padding: 10px 12px; border-radius: var(--radius-sm);
  background: var(--bg-2); border: 1px solid var(--line);
  font-size: 12.5px; color: var(--text-dim); line-height: 1.55;
}
.suggestion b { color: var(--text); font-weight: 600; }

.contact-panel {
  margin-top: 12px; padding: 12px; border-radius: var(--radius-sm);
  background: var(--bg-2); border: 1px solid var(--line);
}
.contact-panel.empty { color: var(--text-faint); font-style: italic; font-size: 12.5px; text-align: center; padding: 16px; }
.contact-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.contact-row + .contact-row { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); }
.contact-name { font-weight: 600; }
.contact-title { color: var(--text-dim); font-size: 12.5px; }
.conf {
  font-size: 10px; padding: 2px 7px; border-radius: 4px; text-transform: uppercase; letter-spacing: .05em;
}
.conf.verified { background: rgba(52,211,153,.16); color: var(--green); }
.conf.likely { background: rgba(251,191,36,.15); color: var(--amber); }
.conf.unverified, .conf.sample { background: var(--panel-3); color: var(--text-faint); }
.fallback-flag { font-size: 10.5px; color: var(--orange); border: 1px solid rgba(251,146,60,.35); padding: 2px 7px; border-radius: 4px; }

.triage-btns { display: flex; gap: 6px; flex-wrap: wrap; }
.tbtn {
  padding: 6px 12px; border-radius: var(--radius-sm); font-size: 12.5px;
  border: 1px solid var(--line); background: var(--bg-2); color: var(--text-dim); cursor: pointer;
}
.tbtn:hover { border-color: var(--line-hot); color: var(--text); }
.tbtn.on.strong_fit { background: rgba(52,211,153,.18); border-color: var(--green); color: var(--green); }
.tbtn.on.deprioritized { background: rgba(251,146,60,.16); border-color: var(--orange); color: var(--orange); }
.tbtn.on.open_unclear { background: rgba(251,191,36,.16); border-color: var(--amber); color: var(--amber); }
.tbtn.on.noise { background: var(--panel-3); border-color: var(--text-faint); color: var(--text); }

.checkbox { width: 17px; height: 17px; accent-color: var(--accent); cursor: pointer; flex: 0 0 auto; margin-top: 3px; }

/* ------------------------------------------------------------------ panels */

.grid { display: grid; gap: 14px; }
.grid.two { grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); }
.grid.three { grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); }

.panel {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 17px;
}
.panel h3 { font-size: 14px; margin-bottom: 4px; }
.panel .purpose { font-size: 11.5px; color: var(--text-faint); margin-bottom: 14px; }
.panel.disconnected { opacity: .95; border-style: dashed; }

.stat-row { display: flex; gap: 22px; flex-wrap: wrap; margin-bottom: 14px; }
.stat .v { font-size: 23px; font-variant-numeric: tabular-nums; line-height: 1.15; }
.stat .l { font-size: 11px; color: var(--text-faint); text-transform: uppercase; letter-spacing: .06em; }
.stat.cyan .v { color: var(--accent); }
.stat.green .v { color: var(--green); }
.stat.amber .v { color: var(--amber); }

.spark { width: 100%; height: 46px; display: block; }

.meter { height: 6px; border-radius: 99px; background: var(--panel-3); overflow: hidden; margin: 9px 0 5px; }
.meter > i { display: block; height: 100%; background: linear-gradient(90deg, var(--accent), var(--blue)); }
.meter.warn > i { background: linear-gradient(90deg, var(--amber), var(--orange)); }
.meter.over > i { background: linear-gradient(90deg, var(--orange), var(--red)); }

table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
th, td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--line); }
th { color: var(--text-faint); font-weight: 500; font-size: 11px; text-transform: uppercase; letter-spacing: .05em; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
.table-wrap { overflow-x: auto; }

/* ------------------------------------------------------------------ modal */

.modal-bg {
  position: fixed; inset: 0; background: rgba(3,6,12,.76); backdrop-filter: blur(4px);
  z-index: 100; display: flex; align-items: flex-start; justify-content: center;
  padding: 42px 20px; overflow-y: auto;
}
.modal {
  background: var(--panel); border: 1px solid var(--line-hot);
  border-radius: var(--radius); width: 100%; max-width: 860px;
  box-shadow: 0 26px 70px rgba(0,0,0,.62);
}
.modal-head {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 17px 20px; border-bottom: 1px solid var(--line);
  position: sticky; top: 0; background: var(--panel); border-radius: var(--radius) var(--radius) 0 0;
}
.modal-body { padding: 20px; }
.modal-foot { padding: 15px 20px; border-top: 1px solid var(--line); display: flex; gap: 9px; flex-wrap: wrap; }
.x { background: none; border: none; color: var(--text-faint); font-size: 21px; cursor: pointer; line-height: 1; padding: 0 4px; }
.x:hover { color: var(--text); }

.doc {
  max-height: 340px; overflow-y: auto; padding: 13px;
  background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius-sm);
  font-size: 12.5px; line-height: 1.68; white-space: pre-wrap; color: #C6D8EE;
}
.exhibit-list { display: flex; flex-direction: column; gap: 6px; }
.exhibit {
  display: flex; align-items: center; gap: 10px; padding: 9px 11px;
  background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius-sm);
  cursor: pointer;
}
.exhibit:hover { border-color: var(--accent); }
.exhibit .type { font-size: 11px; color: var(--accent); font-weight: 600; min-width: 62px; }
.exhibit .desc { color: var(--text-dim); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.section-label {
  font-size: 11px; text-transform: uppercase; letter-spacing: .09em;
  color: var(--text-faint); margin: 20px 0 9px;
}
.section-label:first-child { margin-top: 0; }

.history-item {
  display: flex; gap: 11px; align-items: baseline; padding: 8px 0;
  border-bottom: 1px solid var(--line); font-size: 12.5px;
}
.history-item .date { color: var(--text-faint); min-width: 82px; font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------------ misc */

.empty-state { text-align: center; padding: 60px 20px; color: var(--text-faint); }
.empty-state h3 { color: var(--text-dim); margin-bottom: 8px; font-weight: 500; }
.empty-state p { margin: 0 0 18px; line-height: 1.6; }

.toast-wrap { position: fixed; bottom: 20px; right: 20px; z-index: 300; display: flex; flex-direction: column; gap: 9px; }
.toast {
  padding: 12px 15px; border-radius: var(--radius-sm); min-width: 250px; max-width: 400px;
  background: var(--panel-2); border: 1px solid var(--line-hot);
  box-shadow: 0 12px 34px rgba(0,0,0,.5); font-size: 13px; line-height: 1.5;
  animation: slide-in .18s ease-out;
}
.toast.ok { border-color: rgba(52,211,153,.5); }
.toast.err { border-color: rgba(248,113,113,.55); }
.toast.warn { border-color: rgba(251,191,36,.5); }
@keyframes slide-in { from { opacity: 0; transform: translateX(18px); } to { opacity: 1; transform: none; } }

.job-bar {
  display: flex; align-items: center; gap: 11px; padding: 9px 15px;
  background: linear-gradient(92deg, rgba(var(--accent-rgb),.13), transparent);
  border: 1px solid rgba(var(--accent-rgb),.3); border-radius: var(--radius); margin-bottom: 14px;
  font-size: 12.5px;
}
.spin {
  width: 13px; height: 13px; border-radius: 99px; flex: 0 0 13px;
  border: 2px solid rgba(var(--accent-rgb),.25); border-top-color: var(--accent);
  animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.notice {
  padding: 11px 14px; border-radius: var(--radius-sm); font-size: 12.5px; line-height: 1.55;
  background: rgba(251,191,36,.09); border: 1px solid rgba(251,191,36,.3); color: #F6E3B4;
  margin-bottom: 14px;
}
.notice.info { background: rgba(var(--accent-rgb),.08); border-color: rgba(var(--accent-rgb),.28); color: #C4ECF6; }

.pager { display: flex; gap: 9px; align-items: center; justify-content: center; padding: 18px 0; color: var(--text-faint); font-size: 12.5px; }

/* ------------------------------------------------------------------ mobile */

.rail-toggle { display: none; }

@media (max-width: 860px) {
  .app { flex-direction: column; }
  .rail {
    position: fixed; left: 0; top: 0; bottom: 0; z-index: 60;
    transform: translateX(-100%); transition: transform .2s ease;
    height: 100vh; box-shadow: 0 0 44px rgba(0,0,0,.6);
  }
  .rail.open { transform: none; }
  .rail-toggle { display: inline-flex; }
  /* The header carries a title plus up to two actions. On a 375px screen that
     needs ~460px in one row, so "Find 10 good signals" was cut off at the edge
     and dragged the whole page into sideways scrolling. Wrapping puts the
     title on one line and the actions on the next, each taking half the width. */
  .topbar {
    padding: 12px 14px;
    gap: 10px;
    flex-wrap: wrap;
    row-gap: 10px;
  }
  /* The subtitle turns the title into a 4-line column on a 375px screen. */
  .topbar .sub { display: none; }
  .topbar h1 { font-size: 16px; white-space: nowrap; }
  /* Fills the first row so the buttons are pushed onto the second. */
  .topbar .spacer { flex: 1 1 auto; }
  .topbar .btn:not(.rail-toggle) {
    flex: 1 1 calc(50% - 5px);
    justify-content: center;
    padding: 10px 12px;
    font-size: 13px;
    white-space: nowrap;
    min-width: 0;
  }
  .rail-toggle { flex: 0 0 auto; }
  /* Loading demo data is a desk task; it stays available from the empty state. */
  #btn-samples { display: none !important; }

  .content { padding: 15px 14px 80px; }
  .filters { padding: 11px; gap: 8px; }
  .filters .grow { flex: 1 0 100%; }
  /* Selects need a real width or they collapse to a bare chevron. */
  .filters select { flex: 1 1 46%; min-width: 140px; }
  .card-head, .card-body, .card-foot { padding: 12px 13px; }
  .modal-bg { padding: 0; }
  .modal { max-width: none; border-radius: 0; min-height: 100vh; }
  .stat-row { gap: 16px; }
  /* Invisible rather than absent: this still has to catch the tap that closes
     the menu. It used to carry rgba(0,0,0,.55), which dimmed the whole page
     behind the open rail -- on a phone that reads as the screen going dark,
     not as focus. Transparent keeps the tap target and drops the dimming. */
  .scrim { position: fixed; inset: 0; background: transparent; z-index: 55; }
  /* Comfortable tap targets on a phone. Apple's guidance is 44pt; anything
     under ~32px gets mis-tapped, and the copy button is the single most-used
     control here — it's what puts a company name into Hoovers. */
  .tbtn, .btn { padding: 9px 14px; min-height: 40px; }
  .btn.sm { padding: 9px 13px; min-height: 40px; font-size: 13.5px; }
  .checkbox { width: 22px; height: 22px; }

  .copy-btn {
    min-height: 38px; padding: 8px 14px; font-size: 12px;
    border-radius: var(--radius-sm);
  }
  /* 16px is a hard floor, not a style choice: iOS Safari zooms the viewport
     in whenever a focused input is smaller than that, so tapping the note
     field or the Salesforce dropdown on a card used to yank the whole page.
     Anything the user can type into or open on a card has to stay >= 16px. */
  .crm-select, .note-input { min-height: 42px; font-size: 16px; }
  .filters select, .filters input, .filter-row select, .filter-row input,
  input[type=text], input[type=search], input[type=number], input[type=password],
  select, textarea { font-size: 16px; }
  .x { min-width: 40px; min-height: 40px; font-size: 24px; }

  /* The column picker: one per row with a large hit area, rather than a
     dense two-column grid of 16px checkboxes. */
  .col-grid { grid-template-columns: 1fr; max-height: 260px; gap: 0; padding: 6px 10px; }
  .col-opt { min-height: 42px; gap: 12px; }
  .col-opt input { width: 22px; height: 22px; flex: 0 0 22px; }

  /* Multi-selects are cramped at four rows on a phone. */
  .filter-row select[multiple] { min-height: 132px; font-size: 16px; }

  /* Kills the double-tap-to-zoom gesture on cards without touching pinch.
     Double-tap was the easiest zoom to trigger by accident while triaging,
     since every card is covered in tap targets. */
  .card, .bcard, .card-foot, .bcard-actions, .filters, .topbar, .rail {
    touch-action: manipulation;
  }
  .filter-row > div { min-width: 100%; }

  /* Card action rows wrap rather than squeezing controls together. */
  .bcard-actions { gap: 10px; }
  .bcard-actions .btn { flex: 1 1 auto; justify-content: center; }
  .push-bar { flex-direction: column; align-items: stretch; }
  .push-bar .btn { width: 100%; }
}

@media (display-mode: standalone) {
  /* Home-screen launch: clear the iPhone status bar / notch. */
  .topbar { padding-top: max(16px, env(safe-area-inset-top)); }
  .rail { padding-top: env(safe-area-inset-top); }
  .content { padding-bottom: max(60px, env(safe-area-inset-bottom)); }
}

/* ------------------------------------------------------------ push to CRM */

.push-bar {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 15px 18px; margin: 18px 0 8px; border-radius: var(--radius);
  background: linear-gradient(96deg, rgba(139,92,246,.13), rgba(var(--accent-rgb),.05));
  border: 1px solid rgba(139,92,246,.35);
}
.push-note {
  font-size: 12px; color: var(--text-dim); margin-top: 4px;
  max-width: 46ch; line-height: 1.5;
}

.attempt-chip.pushed {
  background: rgba(52,211,153,.16); color: var(--green);
  border-color: rgba(52,211,153,.4);
}