/* ==========================================================================
   EngageIQ Client Portal — "Daylight"

   The product is a live tape of companies that just started buying ads, and a
   queue of decisions waiting on the client. Two things matter about anything
   on screen: how strong the signal is, and how fresh. That is unchanged.

   The room it happens in is cool paper — a faint blue-grey ground with white
   cards lifting off it and generous air. A tool you are glad to open on a
   Monday rather than one that looks like a trading terminal at 2am.

   ONE accent carries the interface: a deep, unshowy blue. It is the colour of
   every action, link and primary control, and it fills buttons solidly with
   white on top rather than being a bright wash with dark ink — that is the
   difference between looking considered and looking like a highlighter.

   Amber survives in exactly one job: heat. The freshness rail and anything
   genuinely urgent stay warm, because against a blue page warmth is the
   fastest thing the eye finds — and that is precisely what "this one is hot"
   should be. It is never used as decoration.

   Green and red are state, never decoration. Staff get a teal accent so the
   console is never mistaken for a client's portal.
   ========================================================================== */

:root {
  /* Surfaces — cool paper, not clinical grey and not white-on-white.
     The ground has to be dark enough that a white card means "this is the
     thing" on its own, without leaning entirely on shadow. */
  --ground:   #F2F5FA;
  --panel:    #FFFFFF;
  --panel-2:  #EDF1F7;
  --panel-3:  #DFE6F0;
  --rule:     #DCE3ED;
  --rule-2:   #BFCAD9;

  /* type */
  --text:     #17202E;
  --text-2:   #4A5563;
  --text-3:   #5C6879;   /* the floor: 5.6:1 on white and 5.1:1 on panel-2, so meta stays readable everywhere it lands */

  /* the one accent, in two weights */
  --signal:   #1D4ED8;   /* 6.3:1 on white and 5.9:1 on its own wash: legible as text AND under white */
  --signal-b: #3B82F6;   /* graphics only: rails, bars, the live dot */
  --signal-d: #1739A8;
  --signal-w: #EEF3FE;
  --signal-e: #C9DAFB;   /* the edge that goes with that wash */
  /* Accent FILLS are the deep weight with white on top — 6.3:1. A blue this
     saturated carries white comfortably, which amber never did, so the button
     is a solid blue rather than a bright wash with dark ink on it. */
  --signal-f: #1D4ED8;
  --signal-fh: #1739A8;
  --on-accent: #FFFFFF;

  /* "This wants you" — deep rose. It used to borrow the accent, which worked
     only while the accent was amber; pointing it at blue would have turned
     every careful notice into a calm one.

     Deliberately close to, but not, the error red below: one means act, the
     other means something went wrong. They are told apart by their icon and
     their wording as much as by hue, which is why the pair is safe. */
  --warn:     #BE185D;   /* 6.0:1 on white, 5.4:1 on its own wash */
  --warn-w:   #FDEEF4;
  --warn-e:   #F6CFE0;

  /* state, used sparingly */
  --good:     #157F45;
  --good-w:   #E8F6EE;
  --good-e:   #C2E6D2;
  --bad:      #C62F2F;
  --bad-w:    #FDECEC;
  --bad-e:    #F3CDCD;
  /* Info moved off blue when blue became the accent: an "information" pill
     that is the same colour as every button reads as an action. */
  --info:     #5B46C4;
  --info-w:   #F1EEFC;
  --info-e:   #D8D0F5;

  /* Freshness rail — the one place warmth survives, because on a blue page
     warm is the fastest thing the eye finds, and "hot" is exactly what should
     be found first. */
  --hot:  #BE185D;   /* the same rose, and only here: this one wants you now */
  --warm: #3B82F6;   /* the ordinary live state — most cards, so it takes the accent */
  --cool: #93A2B5;
  --cold: #D3DAE4;

  /* Light interfaces need elevation where dark ones used borders. Tinted with
     the ground's own blue rather than neutral grey, so a card looks lifted off
     this page instead of smudged onto it. */
  --shadow-1: 0 1px 2px rgba(23,37,66,.05), 0 1px 3px rgba(23,37,66,.05);
  --shadow-2: 0 2px 5px rgba(23,37,66,.05), 0 10px 24px -8px rgba(23,37,66,.11);
  --shadow-3: 0 4px 10px rgba(23,37,66,.06), 0 22px 48px -14px rgba(23,37,66,.18);

  --r:   16px;
  --r-s: 10px;

  --display: 'Space Grotesk', ui-sans-serif, system-ui, sans-serif;
  --sans:    'IBM Plex Sans', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --mono:    'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Aliases for names the templates still ask for. Kept so a stray
     var(--text-mid) renders as muted text instead of silently inheriting. */
  --text-dim: var(--text-3);
  --text-mid: var(--text-2);
  --amber:    var(--signal);   /* historical name; the accent is blue now */
  --line-soft: var(--rule);
}

/* Staff console: the accent goes cool so you always know where you are. */
body[data-scope="admin"] {
  --signal:   #0F766E;
  --signal-b: #14B8A6;
  --signal-d: #0B5A54;
  --signal-w: #E6F6F4;
  --signal-e: #BCE3DE;
  /* Deep fill with white on it, matching the client side. The old console
     filled with bright cyan and put near-black on top; inheriting the new
     white ink would have left white on #06B6D4 at 2.3:1. */
  --signal-f: #0F766E;
  --signal-fh: #0B5A54;
  --hot:      #14B8A6;
  --warm:     #5CA9A2;
}

* { box-sizing: border-box; }
/* The hidden attribute has to beat every display rule in this file, or a row
   that script has hidden carries on being drawn. */
[hidden] { display: none !important; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--ground);
  color: var(--text);
  font-family: var(--sans);
  font-size: 14.5px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a { color: var(--signal); text-decoration: none; }
a:hover { color: var(--signal-d); text-decoration: underline; text-underline-offset: 3px; }
h1, h2, h3, h4 { margin: 0; font-family: var(--display); font-weight: 600; letter-spacing: -.02em; color: var(--text); }
.mono, .num, td.num { font-family: var(--mono); font-variant-numeric: tabular-nums; }
::selection { background: #CFE0FC; color: #17202E; }

:focus-visible {
  outline: 2px solid var(--signal);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ---------- frame ---------- */
.app { display: flex; min-height: 100vh; }

.sidebar {
  width: 244px; flex: 0 0 244px;
  background: var(--panel);
  border-right: 1px solid var(--rule);
  display: flex; flex-direction: column;
  position: sticky; top: 0; height: 100vh;
}
.brand { padding: 22px 20px 18px; }
.brand-mark {
  display: flex; align-items: center; gap: 9px;
  font-family: var(--display); font-size: 16px; font-weight: 700;
  color: var(--text); letter-spacing: -.02em;
}
/* A live indicator, not a logo dot: it breathes. */
.brand-dot {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--signal-b); flex: 0 0 9px;
  animation: pulse 2.6s ease-out infinite;
}
@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 rgba(59,130,246,.45); }
  70%  { box-shadow: 0 0 0 8px rgba(59,130,246,0); }
  100% { box-shadow: 0 0 0 0 rgba(59,130,246,0); }
}
body[data-scope="admin"] .brand-dot { animation: pulse-a 2.6s ease-out infinite; }
@keyframes pulse-a {
  0%   { box-shadow: 0 0 0 0 rgba(20,184,166,.45); }
  70%  { box-shadow: 0 0 0 8px rgba(20,184,166,0); }
  100% { box-shadow: 0 0 0 0 rgba(20,184,166,0); }
}
.brand-sub {
  margin-top: 7px; font-family: var(--mono); font-size: 10px;
  letter-spacing: .14em; text-transform: uppercase; color: var(--text-3);
}

.nav { padding: 6px 12px 12px; flex: 1; overflow-y: auto; }
.nav-label {
  padding: 16px 10px 7px; font-family: var(--mono); font-size: 9.5px;
  letter-spacing: .16em; text-transform: uppercase; color: var(--text-3);
}
.nav a {
  display: flex; align-items: center; gap: 11px;
  padding: 9px 11px; margin-bottom: 2px; border-radius: var(--r-s);
  color: var(--text-2); font-size: 14px; position: relative;
  transition: background .13s ease, color .13s ease;
}
.nav a:hover { background: var(--panel-2); color: var(--text); text-decoration: none; }
.nav a.on { background: var(--signal-w); color: var(--signal-d); font-weight: 600; }
.nav a.on::before {
  content: ''; position: absolute; left: -12px; top: 50%; transform: translateY(-50%);
  width: 3px; height: 18px; border-radius: 0 3px 3px 0; background: var(--signal);
}
.nav a .ico { width: 16px; text-align: center; font-size: 12px; opacity: .75; }
.nav a .count {
  margin-left: auto; font-family: var(--mono); font-size: 10.5px;
  background: var(--signal-f); color: var(--on-accent);
  padding: 1px 7px; border-radius: 20px; font-weight: 600;
}

.side-foot { padding: 14px; border-top: 1px solid var(--rule); }
.who { display: flex; align-items: center; gap: 10px; }
.avatar {
  width: 32px; height: 32px; border-radius: 9px; flex: 0 0 32px;
  background: var(--signal-f); color: var(--on-accent);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--display); font-size: 12px; font-weight: 700;
}
.who-name { font-size: 13.5px; color: var(--text); line-height: 1.3; }
.who-sub { font-size: 11.5px; color: var(--text-3); }
.side-foot a.signout { display: block; margin-top: 10px; font-size: 12.5px; color: var(--text-3); }
.side-foot a.signout:hover { color: var(--text); }

.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.topbar {
  display: flex; align-items: center; gap: 16px;
  padding: 20px 30px; border-bottom: 1px solid var(--rule);
  background: rgba(242,245,250,.86); backdrop-filter: blur(10px);
  position: sticky; top: 0; z-index: 20;
}
.topbar h1 { font-size: 21px; }
.topbar .sub { font-size: 13px; color: var(--text-2); margin-top: 4px; }
.topbar .spacer { margin-left: auto; }
.content { padding: 26px 30px 72px; max-width: 1340px; width: 100%; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 15px; border-radius: var(--r-s);
  border: 1px solid var(--rule-2); background: var(--panel);
  color: var(--text); font-family: inherit; font-size: 13.5px; font-weight: 500;
  cursor: pointer; white-space: nowrap; box-shadow: var(--shadow-1);
  transition: background .13s ease, border-color .13s ease, color .13s ease,
              box-shadow .13s ease, transform .13s ease;
}
.btn:hover { background: var(--panel-2); border-color: var(--rule-2); color: var(--text); text-decoration: none; box-shadow: var(--shadow-2); }
.btn:active { transform: translateY(1px); box-shadow: var(--shadow-1); }
.btn-primary { background: var(--signal-f); border-color: var(--signal-f); color: var(--on-accent); font-weight: 600; }
.btn-primary:hover { background: var(--signal-fh); border-color: var(--signal-fh); color: var(--on-accent); }
.btn-danger { color: var(--bad); border-color: var(--bad-e); background: var(--bad-w); }
.btn-danger:hover { background: #FBDCDC; border-color: var(--bad); color: var(--bad); }
.btn-sm { padding: 6px 10px; font-size: 12.5px; border-radius: 7px; }
.btn[disabled], .btn.is-disabled { opacity: .45; pointer-events: none; box-shadow: none; }
.btn-ghost { background: transparent; border-color: transparent; color: var(--text-2); box-shadow: none; }
.btn-ghost:hover { background: var(--panel-2); color: var(--text); box-shadow: none; }

/* ---------- panels ---------- */
.card {
  background: var(--panel); border: 1px solid var(--rule); border-radius: var(--r);
  box-shadow: var(--shadow-1);
}
.card-head {
  padding: 16px 20px; border-bottom: 1px solid var(--rule);
  display: flex; align-items: center; gap: 12px;
}
.card-head h2 { font-size: 15px; }
.card-head .spacer { margin-left: auto; }
.card-body { padding: 20px; }
.grid { display: grid; gap: 16px; }
/* Grid children default to min-width:auto, so anything wide inside one — a
   table, a long filter row — stretches its track instead of scrolling within
   it. This is what makes .table-wrap actually work in a grid. */
.grid > * { min-width: 0; }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 1100px) { .grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 900px)  { .grid-3, .grid-2 { grid-template-columns: 1fr; } }

/* ---------- THE SIGNATURE: signal strength + freshness ---------- */

/* Six segments, lit in proportion to the score. */
.sig { display: inline-flex; gap: 2px; align-items: flex-end; vertical-align: middle; }
.sig i {
  display: block; width: 4px; border-radius: 1.5px;
  background: var(--panel-3); transition: background .18s ease;
}
.sig i:nth-child(1) { height: 6px; }
.sig i:nth-child(2) { height: 8px; }
.sig i:nth-child(3) { height: 10px; }
.sig i:nth-child(4) { height: 12px; }
.sig i:nth-child(5) { height: 14px; }
.sig i:nth-child(6) { height: 16px; }
.sig i.on { background: var(--signal-b); }
.sig-n {
  font-family: var(--mono); font-size: 12px; font-weight: 500;
  color: var(--text-2); margin-left: 7px; vertical-align: middle;
}

/* The rail: a 3px edge whose colour is the item's age. */
.rail { position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--cold); }
.rail.hot  { background: var(--hot); }
.rail.warm { background: var(--warm); }
.rail.cool { background: var(--cool); }

.age { font-family: var(--mono); font-size: 11.5px; color: var(--text-3); }
.age.hot  { color: var(--signal); }
.age.warm { color: var(--text-2); }

/* ---------- the signal feed (replaces the advertiser table) ---------- */
.feed { display: flex; flex-direction: column; }
.feed-item {
  position: relative; display: grid;
  grid-template-columns: 1fr auto; gap: 22px; align-items: flex-start;
  padding: 18px 20px 17px 24px;
  border-bottom: 1px solid var(--rule);
  transition: background .13s ease;
}
.feed-item:last-child { border-bottom: 0; }
.feed-item:hover { background: var(--panel-2); }
.feed-co {
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  font-family: var(--display); font-size: 17px; font-weight: 600;
  letter-spacing: -.015em; margin-bottom: 6px;
}
.feed-co a { color: var(--text); }
.feed-co a:hover { color: var(--signal); text-decoration: none; }
/* The buying signal is the thing you actually read. */
.feed-line {
  font-size: 14.5px; color: var(--text-2); line-height: 1.55;
  max-width: 68ch; margin-bottom: 10px;
}
.feed-meta {
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  font-family: var(--mono); font-size: 11px; color: var(--text-3);
  letter-spacing: .02em;
}
.feed-meta .dot { opacity: .45; }
.feed-meta a { color: var(--text-3); }
.feed-meta a:hover { color: var(--signal); }
.feed-right {
  display: flex; flex-direction: column; align-items: flex-end; gap: 10px;
  text-align: right; white-space: nowrap;
}
.feed-contacts { font-family: var(--mono); font-size: 12px; color: var(--text-2); }
.feed-contacts b { color: var(--signal); font-weight: 600; }
@media (max-width: 780px) {
  .feed-item { grid-template-columns: 1fr; gap: 12px; }
  .feed-right { flex-direction: row; align-items: center; text-align: left; flex-wrap: wrap; }
}

/* ---------- instruments (stat tiles that read as gauges) ---------- */
.inst { padding: 18px 20px; position: relative; overflow: hidden; }
.inst .k {
  font-family: var(--mono); font-size: 10px; letter-spacing: .13em;
  text-transform: uppercase; color: var(--text-3);
}
.inst .v {
  font-family: var(--display); font-size: 32px; font-weight: 600;
  letter-spacing: -.03em; margin-top: 8px; line-height: 1.05;
}
.inst .v small { font-family: var(--mono); font-size: 14px; font-weight: 400; color: var(--text-3); }
.inst .d { font-size: 12.5px; color: var(--text-2); margin-top: 6px; }
.inst.accent .v { color: var(--signal); }

.meter { height: 6px; border-radius: 3px; background: var(--panel-3); overflow: hidden; margin-top: 12px; }
.meter > i { display: block; height: 100%; background: var(--signal-b); border-radius: 3px;
             transition: width .4s cubic-bezier(.2,.7,.3,1); }
.meter.warn > i { background: var(--warn); }
.meter.bad  > i { background: var(--bad); }

/* The call-to-action tile: the one thing to do next. */
.act {
  display: flex; align-items: center; gap: 20px;
  padding: 20px 22px; border-radius: var(--r);
  background: linear-gradient(96deg, var(--signal-w), var(--panel) 68%);
  border: 1px solid var(--signal-e);
  box-shadow: var(--shadow-1);
}
.act-n {
  font-family: var(--display); font-size: 42px; font-weight: 700;
  letter-spacing: -.04em; color: var(--signal); line-height: 1;
}
.act-t { font-family: var(--display); font-size: 17px; font-weight: 600; }
.act-s { font-size: 13.5px; color: var(--text-2); margin-top: 3px; }
.act .spacer { margin-left: auto; }

/* pipeline funnel */
.funnel { display: flex; gap: 3px; }
.funnel-step { flex: 1; padding: 14px 15px; background: var(--panel-2); position: relative; }
.funnel-step:first-child { border-radius: var(--r-s) 0 0 var(--r-s); }
.funnel-step:last-child  { border-radius: 0 var(--r-s) var(--r-s) 0; }
.funnel-step .n {
  font-family: var(--display); font-size: 23px; font-weight: 600; line-height: 1.1;
}
.funnel-step .l {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--text-3); margin-top: 5px;
}
.funnel-step.is-live { background: var(--signal-w); }
.funnel-step.is-live .n { color: var(--signal); }
.funnel-step.is-won { background: var(--good-w); }
.funnel-step.is-won .n { color: var(--good); }
@media (max-width: 760px) { .funnel { flex-wrap: wrap; } .funnel-step { min-width: 46%; } }

/* ---------- tables (still right for bulk operations) ---------- */
.table-wrap { overflow-x: auto; }
table.tbl { width: 100%; border-collapse: collapse; font-size: 13.5px; }
table.tbl th {
  text-align: left; font-family: var(--mono); font-size: 10px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--text-3); font-weight: 500;
  padding: 11px 16px; border-bottom: 1px solid var(--rule);
  white-space: nowrap; background: var(--panel-2);
}
table.tbl td { padding: 13px 16px; border-bottom: 1px solid var(--rule); vertical-align: top; }
table.tbl tbody tr:last-child td { border-bottom: 0; }
table.tbl tbody tr { transition: background .12s ease; }
table.tbl tbody tr:hover { background: var(--panel-2); }
table.tbl td.tight { white-space: nowrap; }
.t-title { font-weight: 500; color: var(--text); }
.t-title a { color: var(--text); }
.t-title a:hover { color: var(--signal); }
.t-sub { font-size: 12.5px; color: var(--text-3); margin-top: 2px; }

/* ---------- pills ---------- */
.pill {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px; border-radius: 6px;
  font-family: var(--mono); font-size: 10.5px; font-weight: 500;
  letter-spacing: .04em; text-transform: uppercase;
  border: 1px solid transparent; white-space: nowrap;
}
.pill-ok   { background: var(--good-w); color: var(--good); border-color: var(--good-e); }
.pill-info { background: var(--info-w); color: var(--info); border-color: var(--info-e); }
.pill-warn { background: var(--warn-w);   color: var(--warn);   border-color: var(--warn-e); }
.pill-bad  { background: var(--bad-w);  color: var(--bad);  border-color: var(--bad-e); }
.pill-mute { background: var(--panel-2); color: var(--text-3); border-color: var(--rule-2); }

/* ---------- forms ---------- */
.field { margin-bottom: 17px; }
.field label { display: block; font-size: 13px; font-weight: 500; color: var(--text-2); margin-bottom: 6px; }
.field .hint, .hint { font-size: 12.5px; color: var(--text-3); margin-top: 6px; line-height: 1.55; }
input[type=text], input[type=email], input[type=password], input[type=url],
input[type=number], input[type=date], input[type=datetime-local], input[type=search],
input[type=file], select, textarea {
  width: 100%; padding: 10px 12px;
  font-family: inherit; font-size: 14px; color: var(--text);
  background: var(--panel); border: 1px solid var(--rule-2); border-radius: var(--r-s);
  outline: none; transition: border-color .13s ease, box-shadow .13s ease;
}
input::placeholder, textarea::placeholder { color: var(--text-3); opacity: .8; }
input:focus, select:focus, textarea:focus {
  border-color: var(--signal); box-shadow: 0 0 0 3px var(--signal-w);
}
input:disabled, select:disabled, textarea:disabled { background: var(--panel-2); opacity: .75; cursor: not-allowed; }
textarea { min-height: 92px; resize: vertical; line-height: 1.65; }
select {
  appearance: none; padding-right: 32px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23666D75' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center;
}
input[type=checkbox] {
  width: 16px; height: 16px; accent-color: var(--signal); cursor: pointer; vertical-align: middle;
}
.form-row { display: grid; gap: 14px; grid-template-columns: 1fr 1fr; }
@media (max-width: 760px) { .form-row { grid-template-columns: 1fr; } }
fieldset { border: 0; padding: 0; margin: 0 0 8px; }
legend {
  font-family: var(--mono); font-size: 10px; letter-spacing: .13em; text-transform: uppercase;
  color: var(--text-3); padding: 0 0 12px;
}
.checkbox-row { display: flex; align-items: center; gap: 9px; font-size: 13.5px; color: var(--text-2); cursor: pointer; }
.checkbox-row input { width: auto; }

.filters {
  display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-end;
  padding: 16px 20px; border-bottom: 1px solid var(--rule);
  background: var(--panel-2); border-radius: var(--r) var(--r) 0 0;
}
.filters .f { min-width: 152px; }
.filters .f.grow { flex: 1; min-width: 210px; }
.filters label {
  display: block; font-family: var(--mono); font-size: 9.5px; letter-spacing: .13em;
  text-transform: uppercase; color: var(--text-3); margin-bottom: 6px;
}

/* segmented control */
.seg { display: inline-flex; border: 1px solid var(--rule-2); border-radius: var(--r-s);
       overflow: hidden; background: var(--panel); }
.seg a {
  padding: 9px 14px; font-size: 13px; color: var(--text-2);
  border-right: 1px solid var(--rule-2); background: var(--panel);
  transition: background .13s ease, color .13s ease;
}
.seg a:last-child { border-right: 0; }
.seg a:hover { background: var(--panel-2); color: var(--text); text-decoration: none; }
.seg a.on { background: var(--signal-f); color: var(--on-accent); font-weight: 600; }

/* ---------- notices ---------- */
.notice {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 14px 17px; border-radius: var(--r);
  border: 1px solid var(--rule); background: var(--panel);
  margin-bottom: 16px; font-size: 14px; color: var(--text-2);
}
.notice-ok   { background: var(--good-w);   border-color: var(--good-e);   color: #1A5C36; }
.notice-info { background: #EEF2FA;         border-color: #D9E2F3;         color: #23407C; }
.notice-warn { background: var(--warn-w);   border-color: var(--warn-e);   color: #8E1049; }
.notice-bad  { background: var(--bad-w);    border-color: var(--bad-e);    color: #9B2626; }
.notice .n-ico { font-family: var(--mono); font-size: 13px; line-height: 1.55; opacity: .9; }
.notice strong { color: inherit; }

/* An empty screen is an invitation to act. */
.empty { padding: 56px 24px; text-align: center; }
.empty .big { font-family: var(--display); font-size: 17px; font-weight: 600; color: var(--text); margin-bottom: 7px; }
.empty div:not(.big) { color: var(--text-3); font-size: 14px; max-width: 46ch; margin: 0 auto; }

.pager {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 20px; border-top: 1px solid var(--rule);
  font-family: var(--mono); font-size: 11.5px; color: var(--text-3);
}
.pager-links { margin-left: auto; display: flex; gap: 8px; }
.pager-links a {
  padding: 5px 11px; border: 1px solid var(--rule-2); border-radius: 7px;
  background: var(--panel); color: var(--text-2); font-family: var(--sans); font-size: 12.5px;
}
.pager-links a:hover { background: var(--panel-2); color: var(--text); text-decoration: none; }

/* ---------- locked / reveal ---------- */
.locked { filter: blur(4.5px); user-select: none; pointer-events: none; color: var(--text-3); }
.reveal-box {
  border: 1px dashed var(--rule-2); border-radius: var(--r);
  padding: 24px; text-align: center; background: var(--panel-2);
}

.bulkbar {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 13px 20px; background: var(--signal-w);
  border-bottom: 1px solid var(--signal-e); font-size: 13.5px; color: var(--text-2);
  position: sticky; top: 69px; z-index: 10;
}
.bulkbar .n { font-family: var(--mono); color: var(--signal); font-weight: 600; }
.bulkbar select { width: auto; min-width: 190px; }

.dl { display: grid; grid-template-columns: 148px 1fr; gap: 10px 16px; font-size: 14px; }
.dl dt { color: var(--text-3); }
.dl dd { margin: 0; color: var(--text); }
@media (max-width: 640px) { .dl { grid-template-columns: 1fr; gap: 2px 0; } .dl dd { margin-bottom: 12px; } }

details > summary { cursor: pointer; }
details > summary::-webkit-details-marker { display: none; }
hr { border: 0; border-top: 1px solid var(--rule); }

/* ---------- sign-in ---------- */
.auth-wrap { min-height: 100vh; display: grid; grid-template-columns: 1.08fr .92fr; }
@media (max-width: 940px) { .auth-wrap { grid-template-columns: 1fr; } .auth-aside { display: none; } }
.auth-aside {
  background: linear-gradient(165deg, var(--signal-w), var(--ground) 62%);
  padding: 52px 48px;
  display: flex; flex-direction: column; justify-content: space-between;
  border-right: 1px solid var(--rule); position: relative; overflow: hidden;
}
.auth-aside h2 { font-size: 34px; line-height: 1.16; letter-spacing: -.035em; max-width: 13em; }
.auth-aside h2 em { font-style: normal; color: var(--signal); }
.auth-aside p { color: var(--text-2); font-size: 14.5px; max-width: 36em; line-height: 1.65; }

/* A live sample of the tape, so the sign-in page shows the product. */
.tape { margin-top: 34px; border: 1px solid var(--rule); border-radius: var(--r);
        overflow: hidden; box-shadow: var(--shadow-2); }
.tape-head {
  display: flex; align-items: center; gap: 8px; padding: 11px 15px;
  background: var(--panel-2); border-bottom: 1px solid var(--rule);
  font-family: var(--mono); font-size: 10px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--text-3);
}
.tape-row {
  position: relative; padding: 13px 16px 13px 19px;
  border-bottom: 1px solid var(--rule); background: var(--panel);
}
.tape-row:last-child { border-bottom: 0; }
.tape-co {
  font-family: var(--display); font-size: 13.5px; font-weight: 600;
  display: flex; align-items: center; gap: 8px;
}
.tape-co .spacer { margin-left: auto; }
.tape-line { font-size: 13px; color: var(--text-2); margin-top: 4px; }
.tape-meta { font-family: var(--mono); font-size: 10px; color: var(--text-3); margin-top: 6px; letter-spacing: .04em; }

.auth-main { display: flex; align-items: center; justify-content: center; padding: 44px 28px; }
.auth-card {
  width: 100%; max-width: 386px;
  background: var(--panel); border: 1px solid var(--rule); border-radius: var(--r);
  padding: 34px 32px; box-shadow: var(--shadow-2);
}
.auth-card form { margin: 0; }
.auth-card h1 { font-size: 27px; margin-bottom: 8px; letter-spacing: -.03em; }
.auth-card .lede { color: var(--text-2); margin: 0 0 28px; font-size: 14px; }
.auth-card .btn { width: 100%; justify-content: center; padding: 12px; font-size: 14.5px; }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* ---------- narrow screens ----------
   The rail-and-sidebar frame only works while there is room for it. Below
   860px the sidebar becomes a scrolling strip across the top and everything
   else collapses to one column. */
@media (max-width: 860px) {
  .app { flex-direction: column; }
  .sidebar {
    width: 100%; flex: none; height: auto; position: static;
    border-right: 0; border-bottom: 1px solid var(--rule);
  }
  .brand { padding: 14px 16px 11px; }
  .nav {
    display: flex; gap: 4px; padding: 8px 12px; overflow-x: auto;
    -webkit-overflow-scrolling: touch; scrollbar-width: none;
  }
  .nav::-webkit-scrollbar { display: none; }
  .nav-label { display: none; }
  .nav a { white-space: nowrap; margin-bottom: 0; }
  .nav a.on::before { display: none; }
  .side-foot { display: flex; align-items: center; gap: 14px; padding: 11px 16px; }
  .side-foot a.signout { margin-top: 0; margin-left: auto; }

  .topbar { padding: 15px 16px; flex-wrap: wrap; position: static; }
  .topbar .spacer { margin-left: 0; width: 100%; }
  .topbar h1 { font-size: 18px; }
  .content { padding: 18px 16px 52px; }

  .bulkbar { position: static; }
  .filters { padding: 13px 15px; }
  .filters .f, .filters .f.grow { min-width: 100%; }
  .card-body, .card-head { padding-left: 16px; padding-right: 16px; }
}

@media (max-width: 620px) {
  .grid-4, .grid-3, .grid-2 { grid-template-columns: 1fr; }
  .act { flex-wrap: wrap; gap: 12px; }
  .act .spacer { display: none; }
  .act .btn { width: 100%; justify-content: center; }
  .act-n { font-size: 36px; }
  .funnel-step { min-width: 30%; }
  .seg { width: 100%; }
  .seg a { flex: 1; text-align: center; }
  .feed-item { padding: 15px 15px 14px 18px; }
  .feed-co { font-size: 16px; }
}

/* ==========================================================================
   THE PARTNERSHIP WORKSPACE

   The rest of the portal is a tape you scan. This is the opposite: one
   decision, full width, nothing competing with it. Same paper, same accent,
   same rail — but the card is the page, not a row in a list.
   ========================================================================== */

/* the monthly plan, stated in the topbar rather than as navigation */
.plan-strip { font-family: var(--mono); font-size: 12px; color: var(--text-3); letter-spacing: .02em; }
.plan-strip b { color: var(--text); font-weight: 600; }
.plan-strip i { font-style: normal; opacity: .45; margin: 0 4px; }

/* ---------- the lede above the card ---------- */
.queue-lede { max-width: 74ch; margin-bottom: 18px; }
.chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 5px 12px 5px 10px; border-radius: 20px;
  background: var(--signal-w); border: 1px solid var(--signal-e);
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--signal-d);
}
.chip-dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--signal-b);
  animation: pulse 2.6s ease-out infinite;
}
.queue-title {
  font-family: var(--display); font-size: 30px; font-weight: 600; letter-spacing: -.035em;
  margin: 15px 0 7px; line-height: 1.16;
}
.queue-sub { margin: 0; color: var(--text-2); font-size: 15.5px; }
.queue-why {
  margin: 11px 0 0; font-family: var(--mono); font-size: 11.5px; color: var(--text-3);
  padding-left: 12px; border-left: 3px solid var(--signal-e);
}
.queue-foot {
  margin-top: 16px; text-align: center;
  font-family: var(--mono); font-size: 11px; color: var(--text-3); letter-spacing: .03em;
}
.queue-foot b { color: var(--signal); font-weight: 600; }

/* ---------- the attention card ---------- */
.att { position: relative; box-shadow: var(--shadow-3); }
/* Inset rather than clipped: `overflow: hidden` here would stop the action
   row below from ever sticking, because it would become the scroll container. */
.att > .rail { top: 12px; bottom: 12px; border-radius: 3px; }
/* The decision is the point of this screen, so its buttons never leave the
   view — they pin to the bottom of whatever is doing the scrolling. The soft
   lift says the message carries on underneath rather than ending there. */
.att-actions {
  position: sticky; bottom: 0; z-index: 10;
  border-radius: 0 0 var(--r) var(--r);
  box-shadow: 0 -6px 16px -10px rgba(23,37,66,.28);
}
.att-top {
  display: grid; grid-template-columns: auto minmax(0,1fr) auto; gap: 16px; align-items: center;
  padding: 20px 24px 20px 26px; border-bottom: 1px solid var(--rule);
}
.att-top h2 { font-size: 22px; letter-spacing: -.025em; }
.att-context { font-size: 13px; color: var(--text-3); margin-top: 3px; }
.att-top-right { text-align: right; }
.att-deadline { font-size: 11px; color: var(--signal); margin-top: 7px; }

/* the company square: a mark, not a logo */
.mark {
  width: 48px; height: 48px; flex: 0 0 48px; border-radius: var(--r-s);
  background: var(--panel-2); border: 1px solid var(--rule);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--display); font-size: 20px; font-weight: 700; color: var(--text);
}
.mark.light { background: var(--panel); color: var(--text-2); }
.mark.sm { width: 32px; height: 32px; flex: 0 0 32px; font-size: 13px; border-radius: 8px; }
.mark.done {
  margin: 0 auto 16px; background: var(--good-w); border-color: var(--good-e); color: var(--good);
}
/* A person reads as a person: the mark goes round, the way an avatar does. */
.mark.person-mark { border-radius: 50%; background: var(--panel-2); color: var(--text-2); font-size: 11.5px; }

.att-body { padding: 22px 24px 6px 26px; }
.att-clear .empty { padding: 60px 24px; }

.recipient { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.person {
  width: 36px; height: 36px; flex: 0 0 36px; border-radius: 50%;
  background: var(--panel-2); border: 1px solid var(--rule);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--mono); font-size: 11px; color: var(--text-2);
}
.recipient strong { color: var(--text); font-weight: 600; }

.att-label { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.att-label b { font-family: var(--display); font-size: 15px; }
.att-label .spacer { margin-left: auto; }

/* ---------- the conversation ---------- */
.thread {
  border: 1px solid var(--rule); border-radius: var(--r);
  background: var(--ground); padding: 15px;
}
.msg {
  padding: 13px 15px; border-radius: var(--r-s); margin-bottom: 10px;
  font-size: 14px; line-height: 1.62; max-width: 88%; color: var(--text-2);
}
.msg:last-child { margin-bottom: 0; }
.msg b {
  display: block; margin-bottom: 5px;
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .13em;
  text-transform: uppercase; color: var(--text-3); font-weight: 500;
}
.msg.them { background: var(--panel-2); border: 1px solid var(--rule); }
.msg.us   { background: var(--panel); border: 1px solid var(--rule-2); margin-left: auto;
            box-shadow: var(--shadow-1); }
/* what we recommend saying next — the only message that is not yet real */
.msg.draft {
  background: var(--signal-w); border: 1px dashed var(--signal); margin-left: auto;
  color: var(--text);
}
.msg.draft b { color: var(--signal); }

/* ---------- the composer: prepared work, not a blank box ---------- */
.composer {
  width: 100%; min-height: 260px; padding: 17px 18px;
  font-family: var(--sans); font-size: 14px; line-height: 1.7; color: var(--text);
  background: var(--panel); border: 1px solid var(--rule-2); border-radius: var(--r);
  resize: vertical;
}
.composer-foot {
  display: flex; gap: 12px; flex-wrap: wrap; margin-top: 9px;
  font-family: var(--mono); font-size: 10.5px; color: var(--text-3); letter-spacing: .03em;
}
.composer-foot .claim { color: var(--good); margin-right: auto; }

.thesis { margin-top: 16px; }
.thesis > summary {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .11em;
  text-transform: uppercase; color: var(--text-3);
}
.thesis > summary:hover { color: var(--signal); }
.thesis p { margin: 10px 0 0; color: var(--text-2); font-size: 14px; max-width: 76ch; }

/* ---------- evidence: confidence support, not a research dashboard ---------- */
.evidence { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 18px; }
.reason {
  border: 1px solid var(--rule); border-radius: var(--r-s);
  background: var(--panel-2); padding: 14px 15px;
}
.reason b { display: block; font-size: 13px; color: var(--text); margin-bottom: 5px; }
.reason p { margin: 0; font-size: 13px; color: var(--text-2); line-height: 1.55; }
.reason-src { margin-top: 8px; font-family: var(--mono); font-size: 10.5px; color: var(--text-3); }
@media (max-width: 820px) { .evidence { grid-template-columns: 1fr; } }

/* ---------- the actions ---------- */
.att-actions {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 18px 24px 18px 26px; margin-top: 20px;
  border-top: 1px solid var(--rule); background: var(--panel-2);
}
.att-actions .spacer { margin-left: auto; }
.att-note { font-family: var(--mono); font-size: 10.5px; color: var(--text-3); letter-spacing: .03em; }

.btn.act-primary, .btn.act-accept {
  background: var(--signal-f); border-color: var(--signal-f); color: var(--on-accent); font-weight: 600;
}
.btn.act-primary:hover, .btn.act-accept:hover { background: var(--signal-fh); border-color: var(--signal-fh); color: var(--on-accent); }
.btn.act-counter, .btn.act-meeting { background: var(--panel); border-color: var(--rule-2); }
.btn.act-ghost { background: transparent; border-color: transparent; color: var(--text-3); box-shadow: none; }
.btn.act-ghost:hover { background: var(--panel-3); color: var(--text); box-shadow: none; }
.btn.act-danger { color: var(--bad); border-color: var(--bad-e); background: var(--bad-w); }
.btn.act-danger:hover { background: #FBDCDC; border-color: var(--bad); color: var(--bad); }

/* ---------- the work trail: proof of work that asks for nothing ---------- */
.handled { margin-bottom: 16px; border-color: var(--good-e); background: var(--panel); }
.handled-when { font-size: 11px; color: var(--text-3); }
.trail { display: grid; }
.trail-step {
  display: grid; grid-template-columns: 18px 1fr; gap: 13px;
  position: relative; padding-bottom: 16px;
}
.trail-step:last-child { padding-bottom: 0; }
.trail-step:not(:last-child)::before {
  content: ''; position: absolute; left: 8px; top: 16px; bottom: 0;
  border-left: 2px solid var(--rule);
}
.trail-dot {
  width: 10px; height: 10px; margin: 5px 0 0 4px; border-radius: 50%;
  background: var(--good); z-index: 1; box-shadow: 0 0 0 3px var(--good-w);
}
.trail-step.next .trail-dot { background: var(--panel); border: 2px solid var(--signal); box-shadow: 0 0 0 3px var(--signal-w); }
.trail-step b { font-size: 13.5px; color: var(--text); font-weight: 600; }
.trail-step p { margin: 3px 0 0; font-size: 13px; color: var(--text-3); }

/* ---------- My Network: the secondary browse mode ---------- */
.net { display: grid; grid-template-columns: 300px minmax(0,1fr); min-height: 420px; }
.net-list { border-right: 1px solid var(--rule); max-height: 74vh; overflow-y: auto; background: var(--panel-2); }
.net-row {
  display: grid; grid-template-columns: auto minmax(0,1fr) auto; gap: 11px; align-items: center;
  padding: 12px 16px; border-bottom: 1px solid var(--rule); color: var(--text-2);
}
.net-row:hover { background: var(--panel); color: var(--text); text-decoration: none; }
.net-row.on { background: var(--panel); box-shadow: inset 3px 0 0 var(--signal); }
.net-row.on b { color: var(--signal-d); }
.net-row b { display: block; font-size: 13.5px; color: var(--text); font-weight: 600; }
.net-line {
  font-size: 12px; color: var(--text-3);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.net-badge {
  min-width: 20px; padding: 0 7px; border-radius: 10px;
  background: var(--signal-f); color: var(--on-accent);
  font-family: var(--mono); font-size: 10.5px; font-weight: 600; text-align: center; line-height: 20px;
}
/* "new" on an untouched lead is a marker, not an alarm — only a queue decision
   earns the solid accent badge. */
.net-badge.quiet {
  background: var(--panel); border: 1px solid var(--rule-2); color: var(--text-3);
  font-size: 9.5px; letter-spacing: .08em; text-transform: uppercase; padding: 0 7px;
}
.net-detail { padding: 22px 24px; max-height: 74vh; overflow-y: auto; }
.net-head { display: flex; align-items: flex-start; gap: 12px; }
.net-head h3 { font-size: 21px; }
.net-head .spacer { margin-left: auto; }

/* ---------- history: one trail, whoever did the work ---------- */
.history { display: grid; gap: 2px; }
.hist {
  display: grid; grid-template-columns: 112px minmax(0,1fr); gap: 16px;
  padding: 14px 0; border-bottom: 1px solid var(--rule);
}
.hist:last-child { border-bottom: 0; }
.hist-when { font-size: 10.5px; color: var(--text-3); line-height: 1.7; }
.hist-when span { display: block; text-transform: uppercase; letter-spacing: .12em; opacity: .75; }
.hist-body b { font-size: 13.5px; color: var(--text); font-weight: 600; }
.hist-body p { margin: 4px 0 0; font-size: 13px; color: var(--text-3); }
.hist-body .pill { margin-left: 8px; vertical-align: 1px; }
.hist.inbound  .hist-body b { color: var(--signal); }
.hist.decision .hist-body b { color: var(--good); }
.hist.next     .hist-body b { color: var(--info); }
.hist.call     .hist-body b { color: var(--signal); }
.hist.email    .hist-body b { color: var(--info); }
.hist.status   .hist-body b { color: var(--text-2); }
@media (max-width: 900px) {
  .net { grid-template-columns: 1fr; }
  .net-list { border-right: 0; border-bottom: 1px solid var(--rule); max-height: 260px; }
  .net-detail { max-height: none; }
  .hist { grid-template-columns: 1fr; gap: 4px; }
  .hist-when span { display: inline; margin-left: 8px; }
}

/* ---------- staff bench ---------- */
.item-block { border-bottom: 1px solid var(--rule); }
.item-block:last-child { border-bottom: 0; }
.row-line { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; font-size: 13px; color: var(--text-2); }
.action-edit {
  margin-top: 14px; padding: 14px; border: 1px solid var(--rule);
  border-radius: var(--r-s); background: var(--panel-2);
}
.filters .seg { margin-top: 1px; }

@media (max-width: 620px) {
  .att-top { grid-template-columns: auto minmax(0,1fr); }
  .att-top-right { grid-column: 1 / -1; text-align: left; }
  .queue-title { font-size: 24px; }
  .msg { max-width: 100%; }
  .att-actions .btn { flex: 1; justify-content: center; }
  .att-note { display: none; }
}

/* ==========================================================================
   THE GUEST THREAD

   The advertiser's page. They did not sign up, they may never come back, and
   they are reading it on a phone between meetings. So: no sidebar, no nav, no
   product furniture — one column, the conversation, and a reply box.
   ========================================================================== */
.guest { max-width: 680px; margin: 0 auto; padding: 40px 20px 72px; }
.guest-head { margin-bottom: 22px; }
.guest-eyebrow {
  font-family: var(--mono); font-size: 10px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--text-3); margin-bottom: 8px;
}
.guest-head h1 { font-size: 30px; letter-spacing: -.03em; }
.guest-sub { color: var(--text-2); font-size: 14.5px; margin: 9px 0 0; }
.guest-card {
  background: var(--panel); border: 1px solid var(--rule); border-radius: var(--r);
  padding: 34px 32px; box-shadow: var(--shadow-2); margin-top: 60px;
}
.guest-card h1 { font-size: 24px; margin-bottom: 10px; }
.guest-card .lede { color: var(--text-2); margin: 0; }
.guest-foot {
  margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--rule);
  font-size: 12.5px; color: var(--text-3);
}
.guest-foot form { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.guest-foot p { margin: 12px 0 0; line-height: 1.6; }

/* who can read a thread, on the client's side */
.party {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 11px 0; border-bottom: 1px solid var(--rule);
}
.party:first-of-type { padding-top: 0; }
.party b { font-size: 13.5px; }
.party .spacer { margin-left: auto; }

/* a link the client has to copy out by hand, because we could not send it */
.copybox {
  margin: 10px 0 4px; padding: 11px 13px; border-radius: var(--r-s);
  background: var(--panel); border: 1px solid var(--rule-2);
  font-size: 12px; word-break: break-all; user-select: all; color: var(--text);
}

/* ==========================================================================
   THE PATH

   A relationship is a route, not a status field. The track shows the ground
   already covered, the node you are standing on, and what is still ahead —
   and because every node is derived from something that actually happened,
   it cannot flatter you.
   ========================================================================== */

.path { margin-bottom: 16px; }
.path-head { display: flex; align-items: flex-end; gap: 14px; margin-bottom: 16px; }
.path-head h2 { font-size: 20px; letter-spacing: -.025em; }
.path-head .spacer { margin-left: auto; }
.path-k {
  font-family: var(--mono); font-size: 10px; letter-spacing: .15em;
  text-transform: uppercase; color: var(--text-3); margin-bottom: 5px;
}
.path-score { font-family: var(--mono); font-size: 12px; color: var(--text-3); white-space: nowrap; }
.path-score b { color: var(--signal); font-size: 15px; font-weight: 600; }

.track-wrap { padding: 18px 22px 4px; }
.track-wrap.in-card { border-bottom: 1px solid var(--rule); padding-bottom: 18px; }

/* The route itself. The connector behind a node is filled when that node is
   reached, so the covered ground reads as one continuous run. */
.track { display: flex; align-items: flex-start; }
.node {
  flex: 1; min-width: 0; position: relative;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  text-align: center;
}
.node::before {
  content: ''; position: absolute; top: 13px; right: 50%; left: -50%;
  height: 3px; border-radius: 2px; background: var(--rule);
}
.node:first-child::before { display: none; }
.node.done::before, .node.now::before { background: var(--signal-b); }

.pip {
  position: relative; z-index: 1;
  width: 28px; height: 28px; border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--mono); font-size: 11px; font-weight: 500;
  background: var(--panel); border: 2px solid var(--rule-2); color: var(--text-3);
}
.node.done .pip { background: var(--signal); border-color: var(--signal); color: var(--on-accent); }
/* The one you are standing on: a ring, so it reads as a position not a score. */
.node.now .pip {
  background: var(--panel); border-color: var(--signal); color: var(--signal);
  font-weight: 600; box-shadow: 0 0 0 4px var(--signal-w);
  animation: here 2.4s ease-out infinite;
}
@keyframes here {
  0%   { box-shadow: 0 0 0 3px var(--signal-w); }
  60%  { box-shadow: 0 0 0 7px rgba(59,130,246,0); }
  100% { box-shadow: 0 0 0 3px var(--signal-w); }
}
.cap {
  font-size: 11px; line-height: 1.35; color: var(--text-3);
  max-width: 12ch; hyphens: auto;
}
.node.done .cap { color: var(--text-2); }
.node.now .cap { color: var(--signal-d); font-weight: 600; }
.track.is-paused .node.done .pip { background: var(--rule-2); border-color: var(--rule-2); color: var(--panel); }
.track.is-paused .node.done::before { background: var(--rule-2); }

/* the same route at row scale */
.dots { display: inline-flex; gap: 3px; align-items: center; margin-top: 6px; }
.dots i { width: 12px; height: 4px; border-radius: 2px; background: var(--rule-2); display: block; }
.dots i.done { background: var(--signal-b); }
.dots i.now  { background: var(--signal); }
.dots.is-paused i.done { background: var(--rule-2); }

/* ---------- the one move to make ---------- */
.move {
  display: block; padding: 20px 22px; margin-bottom: 16px;
  border-radius: var(--r); border: 1px solid var(--signal-e);
  background: linear-gradient(96deg, var(--signal-w), var(--panel) 70%);
  box-shadow: var(--shadow-1);
}
.move-k {
  font-family: var(--mono); font-size: 10px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--signal-d);
}
.move h3 { font-family: var(--display); font-size: 19px; margin: 8px 0 5px; letter-spacing: -.02em; }
.move p { margin: 0; color: var(--text-2); font-size: 14.5px; max-width: 70ch; }
.move-cta { margin-top: 14px; }
.move.is-paused { background: var(--panel-2); border-color: var(--rule-2); }
.move.is-paused .move-k { color: var(--text-3); }
.move.is-done { background: var(--good-w); border-color: var(--good-e); }
.move.is-done .move-k { color: var(--good); }

/* the card holding the current move gets the accent edge; the one that is
   waiting on it goes quiet, so there is never a question which to use */
.card.is-now { border-color: var(--signal-e); box-shadow: 0 0 0 3px var(--signal-w), var(--shadow-1); }
.card.is-waiting { opacity: .82; }

.next-line { margin: 12px 0 0; font-size: 13.5px; color: var(--text-2); }
.next-line b { color: var(--text); }

@media (max-width: 860px) {
  .track { overflow-x: auto; padding-bottom: 6px; scrollbar-width: none; }
  .track::-webkit-scrollbar { display: none; }
  .node { flex: 0 0 96px; }
  .track-wrap { padding-left: 16px; padding-right: 16px; }
  .path-head { flex-wrap: wrap; }
}

/* A main column beside a narrower one. It lives here rather than in an inline
   style because an inline grid-template always beats a media query — which is
   exactly how every one of these pages came to overflow on a phone. */
.split { grid-template-columns: 1.5fr 1fr; }
.split-start { align-items: start; }
@media (max-width: 900px) { .split { grid-template-columns: 1fr; } }

/* ==========================================================================
   The guided shell — "the way"

   A client never sees the sidebar. They get one column: where they are on the
   route, the stop they are standing on, and the directions off it. Everything
   here is sized so that a stop reads as a single statement rather than as a
   page of controls — one column, a lot of air, and never more than a handful
   of things that can be clicked.

   The accent rules are unchanged: --signal (deep) wherever colour has to carry
   contrast itself, --signal-f as a solid fill with --on-accent (white) on it.
   ========================================================================== */

body.in-path { background: var(--ground); }

.way { max-width: 1140px; margin: 0 auto; padding: 0 24px 64px; }
.way.way-narrow { max-width: 560px; }

.way-top {
  display: flex; align-items: center; gap: 12px;
  padding: 22px 0 20px;
}
.way-top .brand-mark { color: var(--text); }
.way-top .brand-mark:hover { text-decoration: none; color: var(--signal-d); }
.way-top .spacer { margin-left: auto; }

.way-who {
  display: flex; align-items: center; gap: 9px;
  font-size: 13px; color: var(--text-2); text-align: right;
}
.way-who:hover { text-decoration: none; color: var(--text); }
.way-who i { display: block; font-style: normal; font-size: 11.5px; color: var(--text-3); }
.avatar.sm { width: 30px; height: 30px; flex: 0 0 30px; font-size: 11.5px; }

/* The account route. Scrolls sideways on a phone rather than squeezing the
   captions into two-letter stumps. */
/* The route is the product, so it is the one coloured surface on the page.
   Everything else is white on paper; this is warm, and the eye finds it. */
.way-route {
  background: linear-gradient(180deg, #F8FAFF 0%, var(--signal-w) 100%);
  border: 1px solid var(--signal-e); border-radius: var(--r);
  padding: 16px 18px 6px; margin-bottom: 26px;
  overflow-x: auto;
}
.way-route .node .pip { background: var(--panel); }
.way-route .node.done .pip { color: var(--signal); }
.way-route .node::before { background: #C9DAFB; }
.way-route .track { min-width: 480px; }

.way-back {
  display: inline-block; font-size: 12.5px; color: var(--text-3); margin-bottom: 16px;
}
.way-back:hover { color: var(--signal); text-decoration: none; }

/* ---- the stop itself ---- */

.stop { margin-bottom: 26px; }
.stop-k {
  display: inline-block; margin-bottom: 12px;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .11em;
  text-transform: uppercase; color: var(--signal-d);
  background: var(--signal-w); border: 1px solid var(--signal-e);
  border-radius: 999px; padding: 5px 11px;
}
.stop h1 {
  font-family: var(--display); font-size: 34px; line-height: 1.14;
  letter-spacing: -.035em; margin: 0; max-width: 22ch;
}
.stop p {
  margin: 13px 0 0; font-size: 16px; line-height: 1.62;
  color: var(--text-2); max-width: 60ch;
}

/* A few numbers under the stop, when they are the evidence for it. Never a
   dashboard: no meters, no cards, no interpretation asked of anyone. */
.stop-facts {
  display: flex; flex-wrap: wrap; gap: 10px 30px;
  padding: 14px 0 18px; border-bottom: 1px solid var(--rule); margin-bottom: 22px;
}
.stop-facts > div { display: flex; flex-direction: column; gap: 2px; }
.stop-facts b {
  font-family: var(--mono); font-size: 20px; font-weight: 600; color: var(--text);
  font-variant-numeric: tabular-nums; line-height: 1.1;
}
.stop-facts b small { font-size: 13px; font-weight: 400; color: var(--text-3); }
.stop-facts span { font-size: 11.5px; color: var(--text-3); }

/* ---- the directions ---- */

/* ---- the stage: what you are doing, and where you can go ----
   Options on the left, the activity on the right. They are side by side
   because a direction you have to scroll past is not really on offer. */

.stage {
  display: grid; grid-template-columns: 300px minmax(0, 1fr);
  gap: 26px; align-items: start;
}
.doing  { grid-column: 2; grid-row: 1; min-width: 0; }
.stage > .ways {
  grid-column: 1; grid-row: 1; margin: 0;
  position: sticky; top: 22px;
}
@media (max-width: 940px) {
  .stage { grid-template-columns: 1fr; gap: 20px; }
  .doing, .stage > .ways { grid-column: 1; grid-row: auto; position: static; }
}

.ways { display: grid; gap: 9px; margin: 24px 0 0; }
.ways-k {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .13em;
  text-transform: uppercase; color: var(--text-3); padding: 0 2px 3px;
}
.way-form { margin: 0; display: contents; }

.way-pick {
  display: grid; grid-template-columns: 1fr auto; align-items: center;
  gap: 2px 16px; width: 100%; text-align: left;
  background: var(--panel); border: 1px solid var(--rule); border-radius: var(--r);
  box-shadow: var(--shadow-1);
  padding: 15px 18px; color: var(--text); cursor: pointer;
  font: inherit;
  transition: border-color .12s ease, box-shadow .12s ease, transform .06s ease;
}
.way-pick:hover {
  text-decoration: none; color: var(--text);
  border-color: var(--rule-2); box-shadow: var(--shadow-2);
}
.way-pick:active { transform: translateY(1px); box-shadow: var(--shadow-1); }
.way-pick-t {
  grid-column: 1; font-family: var(--display); font-size: 15.5px; font-weight: 600;
  letter-spacing: -.01em;
}
.way-pick-s { grid-column: 1; font-size: 13px; color: var(--text-3); line-height: 1.5; }
.way-pick-go {
  grid-column: 2; grid-row: 1 / span 2;
  width: 30px; height: 30px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--panel-2); color: var(--text-3); font-size: 14px;
}
.way-pick:hover .way-pick-go { background: var(--panel-3); color: var(--text); }

/* The recommended one. The wash carries it rather than a solid fill, so a
   column of three choices does not read as three shouts. */
.way-pick.is-primary {
  position: relative; overflow: hidden;
  background: var(--signal-w); border-color: var(--signal-e);
}
.way-pick.is-primary::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  background: var(--signal-f);
}
.way-pick.is-primary .way-pick-t { color: var(--signal-d); }
.way-pick.is-primary .way-pick-s { color: #3A5EA8; }
.way-pick.is-primary .way-pick-go { background: var(--signal-f); color: var(--on-accent); }
.way-pick.is-primary:hover { border-color: var(--signal); }

.way-pick.is-off, .way-pick[disabled] {
  opacity: .5; cursor: default; box-shadow: none; pointer-events: none;
}

/* In the rail the cards are narrower, so they tighten up rather than wrap. */
.stage > .ways .way-pick { padding: 13px 14px; gap: 2px 10px; }
.stage > .ways .way-pick-t { font-size: 14.5px; line-height: 1.3; }
.stage > .ways .way-pick-s { font-size: 12px; }
.stage > .ways .way-pick-go { width: 26px; height: 26px; font-size: 13px; }

.way-note {
  margin: 20px 0 0; font-size: 12.5px; line-height: 1.6;
  color: var(--text-3); max-width: 68ch;
}
.way-note b { color: var(--signal); font-weight: 600; }

.way-foot {
  display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center;
  margin-top: 44px; padding-top: 16px; border-top: 1px solid var(--rule);
  font-size: 12px; color: var(--text-3);
}
.way-foot a { color: var(--text-3); }
.way-foot a:hover { color: var(--signal); }

/* ---- a list where every row is a way forward ---- */

.picks { display: grid; gap: 8px; margin-bottom: 4px; }
.pick {
  position: relative; overflow: hidden;
  display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: 13px;
  background: var(--panel); border: 1px solid var(--rule); border-radius: var(--r);
  box-shadow: var(--shadow-1); padding: 13px 16px 13px 18px; color: var(--text);
}
.pick > * { min-width: 0; }
.pick:hover { text-decoration: none; color: var(--text); border-color: var(--rule-2); box-shadow: var(--shadow-2); }
.pick.is-urgent { border-color: var(--signal-e); background: var(--signal-w); }
.pick-main { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.pick-main b { font-size: 14.5px; font-weight: 600; }
.pick-line, .pick-meta {
  font-size: 12.5px; color: var(--text-3);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pick-meta { font-family: var(--mono); font-size: 11px; }
.pick-side { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; text-align: right; }
.pick-note { font-size: 11.5px; color: var(--text-2); }
.pick.is-urgent .pick-note { color: var(--signal-d); font-weight: 600; }
.pick-step { font-family: var(--mono); font-size: 11px; color: var(--text-3); }
@media (max-width: 560px) {
  .pick { grid-template-columns: auto minmax(0,1fr); }
  .pick-side { grid-column: 2; align-items: flex-start; text-align: left; }
}

/* ---- choosing which slice of a list to read ---- */

.slice {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  margin-bottom: 14px;
}
.slice-find { display: flex; gap: 8px; margin: 0 0 0 auto; }
.slice-find input[type="search"] { width: 200px; padding: 7px 11px; font-size: 13px; }
@media (max-width: 620px) { .slice-find { margin-left: 0; } .slice-find input[type="search"] { width: 100%; } }

/* ---- odds and ends the stops need ---- */

.split-line { height: 1px; background: var(--rule); margin: 18px 0; }
.path-sub { font-size: 13px; color: var(--text-3); margin-top: 4px; }
.trail-more { margin-top: 18px; }
.trail-more > summary {
  cursor: pointer; font-size: 13px; color: var(--text-2);
  padding: 11px 14px; background: var(--panel); border: 1px solid var(--rule);
  border-radius: var(--r-s);
}
.trail-more > summary:hover { color: var(--signal); border-color: var(--rule-2); }
.trail-more[open] > summary { margin-bottom: 10px; }
.trail-more .history {
  background: var(--panel); border: 1px solid var(--rule); border-radius: var(--r);
  padding: 6px 16px;
}

/* A stop reached out of order does not get to claim the run behind it. */
.track .node.gap::before { background: var(--rule-2); }

/* A stop with nothing to do on it still needs a shape. */
.empty-stage {
  display: flex; align-items: center; gap: 14px;
  background: var(--panel); border: 1px solid var(--rule); border-radius: var(--r);
  box-shadow: var(--shadow-1); padding: 22px 24px;
}
.empty-stage p { margin: 0; color: var(--text-2); font-size: 14px; line-height: 1.6; }

/* A single column of cards inside the activity side of a stage. */
.stack { display: grid; gap: 16px; }
.stack > section { margin-bottom: 0; }

/* The page follows the path: with nobody invited, the invite panel is the
   first thing in the column and the empty thread waits its turn. */
.stack.invite-first #invite { order: -1; }
.stack .empty { padding: 34px 24px; }

/* At full width the route would stretch its seven stops across the whole
   page and read as seven unrelated labels. Keep it a track. */
.way-route .track { max-width: 920px; margin: 0 auto; }

/* ==========================================================================
   The route at small size
   --------------------------------------------------------------------------
   Seven captioned stops do not fit across a phone, and a track that scrolls
   sideways is a track most people never reach the end of. Below 720px the
   track is swapped for the one thing it is there to say.
   ========================================================================== */

.route-mini { display: none; }
.route-mini-head {
  display: flex; align-items: baseline; gap: 10px; margin-bottom: 9px;
}
.route-mini-head b {
  font-family: var(--display); font-size: 15px; font-weight: 600;
  color: var(--signal-d); letter-spacing: -.015em;
}
.route-mini-head span {
  margin-left: auto; font-family: var(--mono); font-size: 11px; color: var(--text-3);
  white-space: nowrap;
}
.route-bar { display: flex; gap: 4px; }
.route-bar i {
  flex: 1; height: 6px; border-radius: 3px; background: var(--rule-2); display: block;
}
.route-bar i.done { background: var(--signal-f); }
.route-bar i.now  { background: var(--signal); }
.route-bar.is-paused i.done { background: var(--rule-2); }

@media (max-width: 720px) {
  .track { display: none; }
  .route-mini { display: block; }
  .way-route { padding: 14px 16px; overflow: visible; }
  .track-wrap, .track-wrap.in-card { padding: 15px 16px; }
}

/* ==========================================================================
   Phones
   --------------------------------------------------------------------------
   The portal is opened on a phone from an email, so this is not a fallback —
   it is where a lot of the work actually happens.
   ========================================================================== */

@media (max-width: 640px) {
  .way { padding: 0 15px 52px; }
  .way-top { padding: 16px 0 14px; }
  .way-top .brand-mark { font-size: 15px; }

  /* The seat name is usually "Accounts — Company", which is the company said
     twice at the width where there is least room for it. The avatar stays —
     it is the only way back to your own settings from up here. */
  .way-who-t { display: none; }
  .way-who { gap: 0; }
  .avatar.sm { width: 34px; height: 34px; flex: 0 0 34px; }

  .stop { margin-bottom: 20px; }
  .stop h1 { font-size: 25px; letter-spacing: -.03em; max-width: none; }
  .stop p  { font-size: 15px; }
  .stop-k  { font-size: 10px; padding: 4px 9px; margin-bottom: 10px; }

  .stop-facts { gap: 12px 22px; }
  .stop-facts b { font-size: 18px; }

  /* Thumbs, not cursors: nothing tappable smaller than a fingertip. */
  .btn { min-height: 42px; padding: 10px 15px; }
  .btn-sm { min-height: 34px; }
  .way-pick { padding: 15px 15px; min-height: 62px; }
  .pick { padding: 14px 14px 14px 16px; }
  .seg a { padding: 11px 15px; }

  /* 16px or iOS zooms the whole page in the moment a field is focused. */
  input[type=text], input[type=email], input[type=password], input[type=url],
  input[type=number], input[type=date], input[type=datetime-local], input[type=search],
  input[type=file], select, textarea { font-size: 16px; padding: 11px 13px; }
  .field { margin-bottom: 15px; }

  .card-head { padding: 14px 16px; }
  .card-body { padding: 16px; }
  .att-top   { padding: 16px; gap: 12px; }
  .att-top h2 { font-size: 19px; }
  .att-body  { padding: 16px 16px 2px; }
  .att-actions { padding: 14px 16px; gap: 8px; }
  /* A row of buttons that wraps into a ragged block is worse than a column. */
  .att-actions .btn { flex: 1 1 100%; justify-content: center; }
  .att-actions .spacer { display: none; }
  .att-note { flex: 1 1 100%; text-align: center; }

  .composer { min-height: 200px; }
  .guest { padding: 26px 16px 56px; }
  .guest-head h1 { font-size: 24px; }
  .msg.us, .msg.them { max-width: 100%; }
  .empty { padding: 30px 16px; }
  .stack .empty { padding: 26px 16px; }
  .way-foot { margin-top: 30px; }

  /* Two columns of evidence at 390px is two columns of nothing. */
  .evidence { grid-template-columns: 1fr; }
  .form-row { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   Tables that become cards
   A five-column table cannot be read at 390px, and a horizontal scrollbar
   inside a card is a thing people do not find. Mark the table `stacked` and
   give every cell a data-label; below 640px each row becomes its own card.
   -------------------------------------------------------------------------- */

@media (max-width: 640px) {
  .tbl.stacked thead { display: none; }
  .tbl.stacked, .tbl.stacked tbody, .tbl.stacked tr, .tbl.stacked td { display: block; width: 100%; }
  .tbl.stacked tr {
    border: 1px solid var(--rule); border-radius: var(--r-s);
    margin: 0 0 10px; padding: 6px 0; background: var(--panel);
  }
  .tbl.stacked tr:last-child { margin-bottom: 0; }
  .tbl.stacked td {
    border: 0; padding: 6px 14px;
    display: grid; grid-template-columns: 82px minmax(0, 1fr); gap: 12px; align-items: baseline;
  }
  .tbl.stacked td::before {
    content: attr(data-label);
    font-family: var(--mono); font-size: 10px; letter-spacing: .1em;
    text-transform: uppercase; color: var(--text-3);
  }
  .tbl.stacked td:empty { display: none; }
  .table-wrap { overflow-x: visible; }
}

/* ==========================================================================
   The stop as a frame, not a page
   --------------------------------------------------------------------------
   A guided tool should not make you go looking. On a screen with the room for
   it, the stop is pinned to the viewport: the header, the route, the statement
   and the directions never move, and only the activity scrolls — and only when
   it genuinely cannot fit, which in practice means a list or a long thread.

   The frame is off below 941px wide or 700px tall. That second limit is not
   arbitrary: browser zoom shrinks the CSS viewport, so someone reading at 200%
   gets an ordinary scrolling document rather than a crushed one.
   ========================================================================== */

@media (min-width: 941px) and (min-height: 700px) {
  body.in-path.framed { height: 100vh; height: 100dvh; overflow: hidden; }

  .framed .way { height: 100%; display: flex; flex-direction: column; padding-bottom: 0; }
  .framed .way-top   { flex: 0 0 auto; }
  .framed .way-route { flex: 0 0 auto; margin-bottom: 16px; }
  .framed .way-body  { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
  .framed .way-back, .framed .way-body > .notice, .framed .stop { flex: 0 0 auto; }
  .framed .stop { margin-bottom: 18px; }
  .framed .stop h1 { font-size: 30px; }
  .framed .stop p  { font-size: 15px; margin-top: 11px; }
  .framed .way-back { margin-bottom: 12px; }

  .framed .stage { flex: 1 1 auto; min-height: 0; }
  .framed .doing {
    min-height: 0; max-height: 100%; overflow-y: auto;
    /* Reserve the gutter always. Without this the scrollbar appears the
       moment content grows — opening a details, moving to a longer stop —
       and everything in the pane jumps 10px sideways to make room. */
    scrollbar-gutter: stable;
    padding-right: 6px; padding-bottom: 4px;
  }
  /* The rail holds at most a handful of directions and must never be the
     thing that scrolls — a scrollbar on the menu is what makes an app feel
     broken. If it ever cannot fit, the frame is the wrong mode anyway. */
  .framed .stage > .ways { position: static; min-height: 0; }
  .framed .way-foot { flex: 0 0 auto; margin-top: 14px; padding-bottom: 14px; }

  /* A pane that scrolls should look like one, quietly. */
  .framed .doing::-webkit-scrollbar, .framed .stage > .ways::-webkit-scrollbar { width: 8px; }
  .framed .doing::-webkit-scrollbar-thumb, .framed .stage > .ways::-webkit-scrollbar-thumb {
    background: var(--rule-2); border-radius: 4px;
  }
  .framed .doing { scrollbar-width: thin; scrollbar-color: var(--rule-2) transparent; }

  /* Inside a frame the tallest thing on the page is usually a draft message.
     It gets a sensible share of the pane rather than 12 rows of its own. */
  .framed .composer { min-height: 190px; }
}

/* ==========================================================================
   Phones: pin where you are, and pin what to do
   ========================================================================== */

@media (max-width: 940px) {
  /* Where you are, always. */
  .way-route {
    position: sticky; top: 0; z-index: 20;
    margin-left: -15px; margin-right: -15px; border-radius: 0;
    border-left: 0; border-right: 0; border-top: 0;
    padding-left: 15px; padding-right: 15px;
  }

}

/* What to do, always.
   The bar carries the recommended direction and appears wherever the frame
   does not — a phone, a short window, or a browser zoomed to 200%. A stop
   whose activity has its own primary control (the decision queue) suppresses
   it and pins that instead. */
.way-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  margin: 0; padding: 10px 15px calc(10px + env(safe-area-inset-bottom));
  background: rgba(242,245,250,.94);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border-top: 1px solid var(--rule);
  display: flex; justify-content: center;
}
.way-bar .btn {
  width: 100%; max-width: 420px; justify-content: space-between;
  min-height: 48px; font-size: 15px; font-weight: 600;
}
.way-bar .btn i { font-style: normal; }
/* Only make room for the bar on a page that actually has one — the door
   pages and the decision queue do not. */
body.in-path:has(.way-bar) { padding-bottom: 76px; }

@media (min-width: 941px) and (min-height: 700px) {
  .framed .way-bar { display: none; }
  body.in-path.framed:has(.way-bar) { padding-bottom: 0; }
}

/* A window too short for the frame — or a browser zoomed to 200% — scrolls
   like an ordinary page, so the route pins itself the way it does on a phone. */
@media (min-width: 941px) and (max-height: 699px) {
  .way-route {
    position: sticky; top: 0; z-index: 20;
    margin-left: -24px; margin-right: -24px; border-radius: 0;
    border-left: 0; border-right: 0; border-top: 0;
    padding-left: 24px; padding-right: 24px;
  }
}


/* The slice controls belong to the list, so they stay put while it pages. */
.framed .doing > .slice {
  position: sticky; top: 0; z-index: 6;
  background: var(--ground); padding-top: 2px; margin-bottom: 12px;
}

/* ---- a stop whose statement lives in the rail ----
   Choosers hand the whole height of the frame to the list; what the screen is
   asking is one short sentence and belongs beside the directions, not above
   the thing it is describing. */
.stage.brief-left { grid-template-rows: auto 1fr; }
.stage.brief-left > .brief { grid-column: 1; grid-row: 1; min-width: 0; }
.stage.brief-left > .ways  { grid-column: 1; grid-row: 2; align-self: start; }
.stage.brief-left > .doing { grid-column: 2; grid-row: 1 / span 2; }

.brief .stop { margin-bottom: 20px; }
.brief .stop h1 { font-size: 21px; line-height: 1.2; letter-spacing: -.02em; max-width: none; }
.brief .stop p  { font-size: 13.5px; line-height: 1.55; margin-top: 9px; max-width: none; }
.brief .stop-k  { font-size: 9.5px; padding: 4px 9px; margin-bottom: 9px; }
.brief .notice  { font-size: 13px; padding: 12px 14px; }

@media (max-width: 940px) {
  .stage.brief-left { grid-template-columns: 1fr; }
  .stage.brief-left > .brief, .stage.brief-left > .ways, .stage.brief-left > .doing {
    grid-column: 1; grid-row: auto;
  }
  .brief .stop h1 { font-size: 25px; }
  .brief .stop p  { font-size: 15px; }
  .brief .stop-k  { font-size: 10px; }
}


/* Inside the frame the tape is a list to skim, so its rows give back the air
   they can spare — one more company per screenful is one less step. */
.framed .feed-item { padding-top: 13px; padding-bottom: 13px; }
.framed .feed-meta { margin-top: 5px; }

/* ==========================================================================
   The deck — one company, one decision
   ========================================================================== */

.deck {
  position: relative;
  background: var(--panel); border: 1px solid var(--rule); border-radius: var(--r);
  box-shadow: var(--shadow-3);
}
.deck > .rail { top: 14px; bottom: 14px; border-radius: 3px; }

.deck-head {
  display: flex; align-items: center; gap: 14px;
  padding: 20px 24px 16px 26px; border-bottom: 1px solid var(--rule);
}
.deck-head h2 { font-size: 24px; letter-spacing: -.025em; }
.deck-head .spacer { margin-left: auto; }
.deck-meta {
  display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
  font-size: 12.5px; color: var(--text-3); margin-top: 4px;
}
.deck-meta .dot { opacity: .45; }

.deck-body { padding: 20px 24px 22px 26px; }
.deck-k {
  font-family: var(--mono); font-size: 10px; letter-spacing: .13em;
  text-transform: uppercase; color: var(--text-3); margin-bottom: 8px;
}
.deck-signal {
  margin: 0; font-size: 16.5px; line-height: 1.55; color: var(--text);
  max-width: 62ch; letter-spacing: -.005em;
}
.deck-src { margin: 10px 0 0; font-family: var(--mono); font-size: 11.5px; color: var(--text-3); }
.deck-src a { color: var(--text-3); }
.deck-src a:hover { color: var(--signal); }
.deck .recipient { margin-bottom: 10px; }
.deck .recipient .spacer { margin-left: auto; }

@media (max-width: 640px) {
  .deck-head { padding: 16px; gap: 12px; }
  .deck-head h2 { font-size: 20px; }
  .deck-body { padding: 16px; }
  .deck-signal { font-size: 15.5px; }
  .deck .recipient { flex-wrap: wrap; }
}

/* Where a stepper card stops describing and starts asking. */
.deck-do {
  margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--rule);
}
.deck-do .party:first-of-type { padding-top: 0; }
.deck-do textarea { min-height: 116px; }

/* "Somebody is ready" — the client's whole view of a contact. */
.deck-ready {
  display: flex; align-items: flex-start; gap: 11px;
  margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--text-2); max-width: 66ch;
}
.deck-ready .mark.done { flex: 0 0 26px; width: 26px; height: 26px; font-size: 13px; }

/* ---- the decision, folded away on a card that has other things on it ---- */

.decision {
  background: var(--signal-w); border: 1px solid var(--signal-e); border-radius: var(--r);
  margin-bottom: 4px;
}
.decision > summary {
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px;
  padding: 14px 16px; cursor: pointer; list-style: none;
}
.decision > summary::-webkit-details-marker { display: none; }
.decision > summary::after {
  content: '▸'; margin-left: auto; color: var(--signal); font-size: 12px;
  transition: transform .15s ease;
}
.decision[open] > summary::after { transform: rotate(90deg); }
.decision:hover > summary { background: #E4EDFD; border-radius: var(--r) var(--r) 0 0; }
.decision[open] > summary { border-bottom: 1px solid var(--signal-e); }
.decision-k {
  flex: 0 0 100%; font-family: var(--mono); font-size: 9.5px; letter-spacing: .13em;
  text-transform: uppercase; color: var(--signal-d);
}
.decision-h {
  font-family: var(--display); font-size: 15.5px; font-weight: 600;
  letter-spacing: -.015em; color: var(--text); max-width: 62ch;
}
.decision-body { padding: 16px 16px 0; }
.decision-body > .att-actions {
  margin: 16px -16px 0; border-radius: 0 0 var(--r) var(--r);
}
@media (max-width: 640px) {
  .decision > summary { padding: 13px 14px; }
  .decision-body { padding: 14px 14px 0; }
  .decision-body > .att-actions { margin: 14px -14px 0; }
}

.mail-does { margin: 0 0 12px; padding-left: 18px; font-size: 13.5px; color: var(--text-2); line-height: 1.65; }
.mail-does li { margin-bottom: 6px; }
.mail-does b { color: var(--text); font-weight: 600; }

/* The invite email, shown as the advertiser gets it. */
.mail-preview {
  border: 1px solid var(--rule); border-radius: var(--r-s);
  overflow: hidden; background: var(--panel-2); margin-bottom: 12px;
}
.mail-preview iframe { display: block; width: 100%; height: 420px; border: 0; }

/* ---- stepping through a stack ----
   The chevrons flank the card so moving between companies is a gesture, not a
   menu item competing with the decisions in the rail. */
.stepper {
  display: grid; grid-template-columns: 46px minmax(0, 1fr) 46px;
  gap: 12px; align-items: start;
}
.step-arrow {
  position: sticky; top: 42%;
  display: flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; border-radius: 50%;
  background: var(--panel); border: 1px solid var(--rule); box-shadow: var(--shadow-1);
  color: var(--text-2); font-size: 22px; line-height: 1;
  transition: border-color .12s ease, color .12s ease, box-shadow .12s ease;
}
.step-arrow:hover {
  text-decoration: none; color: var(--signal-d);
  border-color: var(--signal-e); background: var(--signal-w); box-shadow: var(--shadow-2);
}
.step-arrow.is-off { opacity: .3; box-shadow: none; }
.step-arrow .cap { display: none; }

@media (max-width: 940px) {
  .stepper { grid-template-columns: 1fr 1fr; gap: 10px; }
  .stepper > .deck { grid-column: 1 / -1; grid-row: 1; }
  .step-arrow {
    position: static; width: 100%; height: 46px; border-radius: var(--r-s);
    gap: 8px; font-size: 18px; grid-row: 2; padding: 0 12px;
  }
  .step-arrow.prev { grid-column: 1; }
  .step-arrow.next { grid-column: 2; flex-direction: row-reverse; }
  .step-arrow .cap {
    display: block; font-size: 12.5px; font-family: var(--sans);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
}

/* A draft the client did not write themselves says so. */
.hint.drafted { color: var(--signal-d); }

/* Renaming an account in the admin table.
   The link stays quiet until the row is hovered, so a table of forty accounts
   does not read as forty invitations to edit. */
.t-edit {
  display: inline-block;
  margin-top: 3px;
  font-size: 12px;
  color: var(--text-3);
  text-decoration: none;
  border-bottom: 1px dotted var(--rule);
  opacity: .55;
  transition: opacity .12s ease, color .12s ease;
}
tr:hover .t-edit, .t-edit:focus-visible { opacity: 1; color: var(--signal); }

.rename-form {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}
.rename-form input[type="text"] {
  flex: 1;
  min-width: 150px;
  padding: 5px 8px;
  font-size: 13.5px;
}

/* ==========================================================================
   The network carousel

   Every company is in the track; the browser does the sliding. Snapping is
   CSS, so swipe and trackpad work with no script running — the script only
   keeps the heading, arrows, dots and URL in step with where you landed.
   ========================================================================== */

.car {
  position: relative;
  display: grid; grid-template-columns: minmax(0, 1fr);
  align-items: start;
  /* How much of the company either side stays on screen. Enough to show its
     signal rail, its initial and the start of its name — at 76px with a heavy
     fade over it, the neighbours were technically present and practically
     invisible, which is the same as not having them. */
  --peek: 104px;
}

.car-rail {
  display: flex;
  align-items: start;
  gap: 0;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  overscroll-behavior-x: contain;
  padding-inline: var(--peek);
  /* The dots are the position indicator; a scrollbar under the card as well
     just reads as an accident. */
  scrollbar-width: none;
  /* Soften both edges. The company on the right peeks as the start of a card —
     its mark and its name — which reads fine. The one on the left peeks as the
     *tail* of a card, which is mid-sentence text and reads as damage. The fade
     sits entirely inside the peek, so the card being worked is untouched. */
  -webkit-mask-image: linear-gradient(to right, transparent 0,
      #000 calc(var(--peek) * .5), #000 calc(100% - var(--peek) * .5), transparent 100%);
          mask-image: linear-gradient(to right, transparent 0,
      #000 calc(var(--peek) * .5), #000 calc(100% - var(--peek) * .5), transparent 100%);
}
.car-rail::-webkit-scrollbar { display: none; }
.car-rail:focus-visible { outline: 2px solid var(--signal); outline-offset: 4px; border-radius: var(--r); }

.car-slide {
  /* The peek comes from the rail's own padding, not from narrowing the slide.
     Narrowing it meant the first and last companies could not reach the centre
     — the scroll simply ran out — so they sat flush against the edge and the
     fade below ate into them. With the padding there, card one centres at
     scrollLeft 0 and the last at the exact end. */
  flex: 0 0 100%;
  max-width: 100%;
  scroll-snap-align: center;
  /* Without this a fast flick crosses several companies at once, which is
     disorienting when each one is a piece of work rather than a photo. */
  scroll-snap-stop: always;
}

/* The neighbours are context, not competition: they are legible as cards and
   plainly not the one being worked.

   Only dimmed once the script is running. With no script the active card
   never moves, so dimming would leave whatever you swiped to greyed out. */
.car.is-live .car-slide { opacity: .62; transition: opacity .22s ease; }
.car.is-live .car-slide.is-active { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .car.is-live .car-slide { transition: none; }
}

/* On a wide screen the arrows float over the peeked neighbours rather than
   taking two columns of their own — the width is worth more to the card. */
@media (min-width: 941px) {
  .car > .step-arrow {
    position: absolute; top: 50%; transform: translateY(-50%);
    z-index: 3; margin: 0;
  }
  .car > .step-arrow.prev { left: 2px; }
  .car > .step-arrow.next { right: 2px; }

  /* Name the company under the chevron.

     The peek shows a neighbour is there but cannot say which: the name sits
     after the 44px mark on the card, so reading it would need ~160px of peek
     and cost the card twice that in width. The arrow is already floating over
     exactly the right place and already knows the name, so it says it.

     Anchored to the arrow's inner edge and grown inward over the peek — a
     centred label would hang off the rail and over the menu beside it. */
  .car > .step-arrow .cap {
    display: block; position: absolute; top: calc(100% + 9px);
    width: max-content; max-width: 164px;
    padding: 5px 12px; border-radius: 999px;
    background: var(--signal-w); border: 1px solid var(--signal-e);
    box-shadow: var(--shadow-2);
    font-family: var(--sans); font-size: 13.5px; font-weight: 600;
    letter-spacing: -.005em; line-height: 1.45;
    color: var(--signal-d); white-space: nowrap;
    overflow: hidden; text-overflow: ellipsis;
  }
  .car > .step-arrow:hover .cap {
    background: var(--signal-f); border-color: var(--signal-f); color: var(--on-accent);
  }
  .car > .step-arrow.prev .cap { left: 0;  text-align: left; }
  .car > .step-arrow.next .cap { right: 0; text-align: right; }
  /* At either end there is no company to name. */
  .car > .step-arrow.is-off .cap { display: none; }
}

/* Who is either side, in words. The peek shows that something is there; this
   says what it is, which is the part a company name actually answers. */
.car-side {
  /* Do not shrink. With thirty dots between them the row was squeezing these
     to nothing and ellipsising "KS&R" down to "KS…" — a label that has to be
     truncated to four characters is not telling anybody what is next. */
  flex: 0 0 auto; min-width: 0; max-width: 22%;
  font-size: 13px; font-weight: 500; color: var(--text-2);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.car-side:empty { visibility: hidden; }
.car-side.prev { text-align: right; }
.car-side.next { text-align: left; }

/* Dots: one per company, and the ones waiting on a decision say so before you
   reach them, so the shape of the whole stack is readable at a glance. */
.car-dots {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
  gap: 3px; margin: 14px 0 0;
}
.car-nav {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  margin-top: 14px;
}
.car-nav .car-dots { margin: 0; flex: 1 1 auto; min-width: 0; }
.car-dot {
  display: flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; border-radius: 50%;
}
.car-dot span {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--rule-2);
  transition: background .14s ease, transform .14s ease, box-shadow .14s ease;
}
.car-dot:hover span { background: var(--text-3); transform: scale(1.25); }
.car-dot.is-waiting span { background: var(--signal-b); }
.car-dot.is-at span {
  background: var(--signal); transform: scale(1.5);
  box-shadow: 0 0 0 3px var(--signal-w);
}
.car-dot:focus-visible { outline: 2px solid var(--signal); outline-offset: 1px; }

@media (prefers-reduced-motion: reduce) {
  .car-rail { scroll-behavior: auto; }
  .car-dot span { transition: none; }
}

/* Phones and tablets: the arrows drop under the card, as the stepper's did.
   Swiping is the real control here; the arrows are for anyone who would rather
   tap.

   940px, not 640px, because that is where .step-arrow itself switches to
   grid-row 2 — and it does so for every arrow on the site, not only the ones
   in a .stepper. Guessing a different number here left a 300px-wide band where
   the arrows had moved to the second row and the rail auto-placed into the
   46px column they had left behind. */
@media (max-width: 940px) {
  .car { grid-template-columns: 1fr 1fr; gap: 10px; --peek: 34px; }
  .car > .car-rail { grid-column: 1 / -1; grid-row: 1; }
  .car > .step-arrow.prev { grid-column: 1; grid-row: 2; }
  .car > .step-arrow.next { grid-column: 2; grid-row: 2; }
}

/* Inside the fixed frame the pane must not scroll: the card does. Otherwise
   the rail is as tall as the tallest company in the whole account and every
   short one sits above a page of white. */
@media (min-width: 941px) and (min-height: 700px) {
  .framed .doing:has(.car) {
    overflow-y: hidden; padding-right: 0;
    display: flex; flex-direction: column;
  }
  .framed .doing:has(.car) > .car { flex: 1 1 auto; min-height: 0; }
  .framed .doing:has(.car) > .car-dots,
  .framed .doing:has(.car) > .way-note { flex: 0 0 auto; }

  .framed .car-rail { height: 100%; align-items: stretch; }
  .framed .car-slide {
    overflow-y: auto; max-height: 100%;
    scrollbar-gutter: stable;
  }
  .framed .car-slide::-webkit-scrollbar { width: 8px; }
  .framed .car-slide::-webkit-scrollbar-thumb { background: var(--rule-2); border-radius: 4px; }
  .framed .car-slide { scrollbar-width: thin; scrollbar-color: var(--rule-2) transparent; }
}

/* The answers on a deck or shortlist card. They wrap rather than shrink: a
   button whose label is the company name is as wide as the company name. */
.answers {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
}
.answers .btn { flex: 0 0 auto; }
@media (max-width: 640px) {
  .answers { flex-direction: column; align-items: stretch; }
  .answers .btn { width: 100%; }
}