/* ==========================================================================
   Project Referral 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.

   What changed is the room it happens in. Warm paper instead of a black slab,
   white cards that lift 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 still carries the interface: amber, the colour of a live
   indicator. It comes in two weights — a deep one that is legible as text and
   as a button fill, and a bright one for graphics where contrast is not being
   asked to carry meaning. Green/red/blue appear only as state, never as
   decoration. Staff get a cool accent so the console is never mistaken for a
   client's portal.
   ========================================================================== */

:root {
  /* Surfaces. The ground is a cool blue-grey and cards are plain white, so a
     card reads as "this is the thing" by being lighter than what it sits on
     rather than by carrying a heavy shadow. */
  --navy:     #18394c;
  --ground:   #f3f6fa;
  --panel:    #ffffff;
  --panel-2:  #f2f5f9;
  --panel-3:  #e9eef5;
  --rule:     #e4eaf0;
  --rule-2:   #dce4ed;

  /* Type. Ink is a navy-black, never a pure black, so it belongs to the
     same family as the accent. */
  --text:     #203549;
  --text-2:   #5b6b80;
  /* The reference's --muted is #738395, which is 3.9:1 on white and 3.6:1 on
     the ground — under AA wherever it carries real words, and it carries a lot
     of them here. Darkened to clear 4.5:1 on both surfaces; it still reads as
     the quiet tier beside --text. */
  --text-3:   #5f6e82;

  /* The accent, in weights. #245cf2 on white is 5.9:1, so it carries as text
     and takes white on top when it is a fill. */
  --signal:   #245cf2;
  --signal-b: #4d7bf5;
  --signal-d: #1b46bb;
  --signal-w: #e5edff;
  --signal-e: #cfdcfd;
  --signal-f: #245cf2;
  --signal-fh: #1b46bb;
  --on-accent: #ffffff;

  /* State. Green and red stay themselves — they carry meaning a blue-shifted
     version would lose. */
  --good:     #18775b;
  --good-w:   #ecf7f2;
  --good-e:   #cbe7dd;
  --bad:      #c0392f;
  --bad-w:    #fdeceb;
  --bad-e:    #f5cfcc;
  --info:     #245cf2;
  --info-w:   #e5edff;
  --info-e:   #cfdcfd;

  /* freshness rail */
  --hot:  #245cf2;
  --warm: #4d7bf5;
  --cool: #9fb4d4;
  --cold: #d7dfe9;

  /* Elevation is almost nothing. The border does the work. */
  --shadow-1: 0 1px 2px rgba(33,57,76,.04);
  --shadow-2: 0 3px 6px rgba(33,57,76,.05);
  --shadow-3: 0 25px 90px rgba(24,57,76,.18);

  --r:   12px;
  --r-s: 7px;

  --display: 'Segoe UI', -apple-system, BlinkMacSystemFont, Arial, sans-serif;
  --sans:    'Segoe UI', -apple-system, BlinkMacSystemFont, Arial, sans-serif;
  --mono:    'Segoe UI', -apple-system, BlinkMacSystemFont, Arial, sans-serif;

  --text-dim: var(--text-3);
  --text-mid: var(--text-2);
  --amber:    var(--signal);
  --line-soft: var(--rule);
}

/* Staff console: the accent goes cool so you always know where you are. */
body[data-scope="admin"] {
  --signal:   #0e7490;
  --signal-b: #3ba7c2;
  --signal-d: #0a5871;
  --signal-w: #e7f6fa;
  --signal-e: #bee4ef;
  /* Fills take white now, so they have to be the dark end of the ramp —
     white on #06B6D4 was 2.3:1 and unreadable. */
  --signal-f:  #0e7490;
  --signal-fh: #0a5871;
  --hot:      #0e7490;
  --warm:     #3ba7c2;
}

* { 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: #C4C4FF; color: #0F1330; }

: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(245,158,11,.45); }
  70%  { box-shadow: 0 0 0 8px rgba(245,158,11,0); }
  100% { box-shadow: 0 0 0 0 rgba(245,158,11,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(6,182,212,.45); }
  70%  { box-shadow: 0 0 0 8px rgba(6,182,212,0); }
  100% { box-shadow: 0 0 0 0 rgba(6,182,212,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(248,247,244,.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: #3333FF; }
.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(--signal-w); color: var(--signal); border-color: var(--signal-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(--signal-w); border-color: var(--signal-e); color: #7A4408; }
.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(74,56,26,.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-b); border-color: var(--signal-b); 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(245,158,11,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 (bright) only as a fill with --on-accent ink.
   ========================================================================== */

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, #F6F6FF 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;
}
/* Only the stops still ahead get the empty pip — a reached stop keeps its
   filled disc, or its tick is white on white. */
.way-route .node:not(.done) .pip { background: var(--panel); }
.way-route .node::before { background: #C4C4FF; }
.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: #8A6428; }
.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(246,242,234,.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: #E4E4FF; 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;
}

/* A route stop you can use. The track is a control now, not just a picture. */
button.node { background:none; border:0; font:inherit; color:inherit; cursor:pointer;
  padding:0; -webkit-appearance:none; appearance:none; }
button.node:hover .pip { transform:scale(1.09); }
button.node:hover .cap { opacity:1; }
button.node .pip { transition:transform .16s ease-out, box-shadow .16s ease-out; }
button.node:focus-visible { outline:2px solid currentColor; outline-offset:3px; border-radius:8px; }

/* ============================================================
   Partner-invites styling pass.

   The tokens above carry colour and radius everywhere. What is left are the
   places the old sheet baked in a value: display-font sizing, mono eyebrows,
   pill weight, button weight. This block brings those into line rather than
   editing two hundred rules individually.
   ============================================================ */

body { font: 16px/1.5 var(--sans); color: var(--text); background: var(--ground); }

/* Headings: tight tracking, heavy weight, no display face. */
h1, .stop h1 { font-family: var(--sans); font-size: 32px; line-height: 1.18;
  letter-spacing: -1.2px; font-weight: 750; margin: 0 0 10px; }
h2 { font-family: var(--sans); font-size: 18px; letter-spacing: -.3px; font-weight: 700; }
h3 { font-family: var(--sans); font-size: 14px; letter-spacing: -.15px; font-weight: 650; }
@media (max-width: 700px) { h1, .stop h1 { font-size: 26px; letter-spacing: -.8px; } }

/* Eyebrows and captions were monospaced. Same job, done with weight and
   tracking instead, which is what the reference does. */
.stop-k, .ways-k, .eyebrow, .funnel-step .l, .att-label b, .card-head h2 {
  font-family: var(--sans);
}
.stop-k, .ways-k {
  font-size: 11px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase;
  color: var(--text-3);
}
.stop-k {
  display: inline-block; background: var(--signal-w); color: var(--signal-d);
  border: 1px solid var(--signal-e); border-radius: 6px; padding: 5px 9px;
}
.funnel-step .l { font-size: 10px; font-weight: 700; letter-spacing: .9px; }

/* Cards: a hairline and almost no shadow. */
.card, .panel, .deck, .att, .decision {
  border: 1px solid var(--rule); background: var(--panel);
  border-radius: 12px; box-shadow: var(--shadow-2);
}
.card-head { padding: 18px 22px 0; border-bottom: 0; }
.card-head h2 { font-size: 16px; letter-spacing: -.25px; }
.card-body { padding: 16px 22px 20px; }

/* Buttons: small, semibold, 7px radius, white on blue. */
.btn, button.btn {
  border-radius: 7px; font-family: var(--sans); font-size: 13px; font-weight: 650;
  padding: 11px 15px; border: 1px solid var(--rule-2); background: var(--panel);
  color: var(--text); transition: background .15s, box-shadow .15s, border-color .15s;
}
.btn:hover { filter: brightness(.97); }
/* The base rule above is `button.btn`, which is more specific than a bare
   `.btn-primary`. Every variant therefore has to match that weight or the
   fill silently loses and a primary button renders white. */
button.btn-primary, .btn.btn-primary, button.btn.act-primary, .btn.act-primary,
button.btn.act-accept, .btn.act-accept {
  background: var(--signal); border-color: var(--signal); color: #fff;
}
button.btn-primary:hover, .btn.btn-primary:hover, .btn.act-primary:hover {
  background: var(--signal-d); border-color: var(--signal-d); color: #fff;
}
button.btn-ghost, .btn.btn-ghost, .btn.act-ghost, .btn.act-secondary {
  background: none; border-color: var(--rule-2); color: var(--text-2);
}
button.btn-danger, .btn.btn-danger, .btn.act-danger {
  background: none; border-color: var(--rule-2); color: var(--bad);
}
button.btn-danger:hover, .btn.btn-danger:hover, .btn.act-danger:hover {
  background: var(--bad-w); border-color: var(--bad); color: var(--bad);
}
button.btn-sm, .btn.btn-sm { padding: 8px 11px; font-size: 12.5px; }
.btn-sm { padding: 8px 11px; font-size: 12.5px; }

/* Pills read as quiet status, not as decoration. */
.pill {
  font-family: var(--sans); font-size: 11px; font-weight: 600; letter-spacing: 0;
  text-transform: none; border-radius: 4px; padding: 4px 7px;
  /* The reference sets this to #7b8ca0, which is 3.3:1 on its own background.
     A pill is 11px — smaller than body text — so it needs more contrast than
     body text, not less. Darkened to clear 4.5:1 while staying quiet. */
  background: var(--panel-2); color: #55647a; border: 0;
}
.pill-ok   { background: var(--good-w); color: var(--good); }
.pill-bad  { background: var(--bad-w);  color: var(--bad); }
.pill-warn { background: var(--signal-w); color: var(--signal-d); }
.pill-info, .pill-mute { background: var(--panel-2); color: #55647a; }

/* Inputs and the composer. */
input[type=text], input[type=email], input[type=password], input[type=number],
select, textarea, .composer {
  border: 1px solid var(--rule-2); border-radius: 7px; padding: 11px;
  font-family: var(--sans); font-size: 14px; color: var(--text); background: #fff;
}
textarea, .composer { line-height: 1.6; }
input:focus, select:focus, textarea:focus { border-color: var(--signal); }

/* One focus treatment everywhere, and a visible one. */
button:focus-visible, a:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible {
  outline: 3px solid #7fa6ff; outline-offset: 3px;
}

/* The directions rail: a chosen row is a soft blue block, as in the reference. */
.way-pick { border-radius: 11px; border: 1px solid var(--rule); background: var(--panel); }
.way-pick:hover { border-color: var(--rule-2); }
.way-pick.is-primary { background: var(--signal-w); border-color: var(--signal-e); }
.way-pick.is-primary .way-pick-t { color: var(--signal-d); font-weight: 650; }
.way-pick-t { font-family: var(--sans); font-weight: 600; letter-spacing: -.1px; }
.way-pick-s { color: var(--text-3); }

/* The route: filled discs for what is done, a ring for where you are. */
.pip { font-family: var(--sans); font-weight: 650; font-size: 11px; }
.way-route { background: var(--panel); border: 1px solid var(--rule); border-radius: 12px; }
.node .cap { font-family: var(--sans); font-size: 12px; letter-spacing: -.1px; }

/* Numbers stay in the sans face, which the reference uses throughout. */
.stop-facts b, .funnel-step .n, .mono, .copybox {
  font-family: var(--sans); letter-spacing: -.4px;
}
.copybox { background: var(--panel-2); border-radius: 7px; padding: 11px 13px; word-break: break-all; }

/* Tables. */
table.tbl th { font-family: var(--sans); font-size: 11px; font-weight: 700;
  letter-spacing: 1px; text-transform: uppercase; color: var(--text-3);
  background: var(--panel-2); }

/* Notices sit closer to the reference's quiet banners. */
.notice { border-radius: 11px; border: 1px solid var(--rule); background: var(--panel); }
.notice-ok   { background: var(--good-w);   border-color: var(--good-e); }
.notice-bad  { background: var(--bad-w);    border-color: var(--bad-e); }
.notice-warn { background: var(--signal-w); border-color: var(--signal-e); }
.notice-info { background: var(--signal-w); border-color: var(--signal-e); }

/* The brand mark, as a rounded blue tile. */
.brand-mark, .brand { font-family: var(--sans); font-weight: 750; letter-spacing: -.8px; font-size: 21px; }
.brand-dot { width: 26px; height: 26px; border-radius: 8px; background: var(--signal); }
.avatar { border-radius: 50%; font-family: var(--sans); font-weight: 650; }
.avatar.sm { border-radius: 9px; }

/* ============================================================
   The network shell.

   Three columns under a fixed bar: who you are on the left, the work in the
   middle, context on the right. It is the shape every social product uses
   because it answers "where am I", "what is in front of me" and "what does
   that mean" without making you navigate between them.
   ============================================================ */

/* The old chrome made the body a flex container. The shell stacks its own
   bar, header and grid, so it has to take that back or the three of them sit
   side by side as columns. */
body.app { display: block; min-height: 100vh; }
body.app > .layout { width: 100%; }

.app-demo {
  height: 29px; padding: 5px 28px; background: #e7eefb; color: #3f5980;
  font-size: 11px; font-weight: 700; letter-spacing: 1px;
  display: flex; justify-content: space-between; align-items: center;
}
.app-demo span { font-weight: 400; letter-spacing: 0; }

.app-top {
  height: 78px; padding: 0 28px; background: #fff; border-bottom: 1px solid var(--rule);
  display: flex; align-items: center; gap: 28px; position: sticky; top: 0; z-index: 20;
}
.app-word {
  font-size: 21px; font-weight: 750; letter-spacing: -.8px; text-decoration: none;
  color: #16354b; display: flex; align-items: center; white-space: nowrap;
}
.app-word:hover { text-decoration: none; }
.app-mark {
  width: 32px; height: 32px; display: inline-grid; place-items: center;
  background: var(--signal); color: #fff; border-radius: 10px; margin-right: 10px;
  font-size: 17px; font-weight: 700; line-height: 1;
}
.app-word small {
  font-size: 8px; letter-spacing: 1.6px; color: #9aa7b5; font-weight: 500;
  margin-left: 9px; align-self: flex-end; padding-bottom: 4px; text-transform: uppercase;
}
.app-search {
  display: flex; align-items: center; gap: 11px; background: var(--panel-2);
  border-radius: 8px; max-width: 520px; width: 100%; padding: 10px 14px;
  color: #7b8ca0; margin-left: auto; border: 1px solid transparent;
}
.app-search:focus-within { border-color: var(--signal-e); background: #fff; }
.app-search input {
  border: 0; background: none; outline: 0; min-width: 0; width: 100%;
  font-size: 14px; color: var(--text); padding: 0;
}
.app-acts { display: flex; align-items: center; gap: 18px; margin-left: auto; }
.app-lock {
  display: flex; align-items: center; gap: 6px; font-size: 12px;
  white-space: nowrap; color: #62778c;
}
.app-who {
  display: flex; align-items: center; gap: 10px; text-decoration: none; color: inherit;
}
.app-who:hover { text-decoration: none; }
.app-who-t { font-size: 13px; font-weight: 600; line-height: 1.25; }
.app-who-t i { display: block; font-style: normal; font-size: 11.5px; color: var(--text-3); font-weight: 400; }

.layout {
  max-width: 1550px; margin: auto; padding: 28px;
  display: grid; grid-template-columns: 218px minmax(400px, 1fr) 295px;
  gap: 27px; align-items: start;
}
.col-left  { position: sticky; top: 106px; }
.col-right { position: sticky; top: 106px; }

/* ---- the workspace card ---- */
.ws { background: #fff; border: 1px solid var(--rule); border-radius: 11px; overflow: hidden; }
.ws-cover {
  height: 75px; background: var(--navy, #18394c); color: #fff;
  display: flex; align-items: center; gap: 10px; padding: 13px 20px;
}
.ws-cover b { font-size: 22px; font-weight: 750; letter-spacing: -.5px; }
.ws-cover small { font-size: 9px; letter-spacing: 1.5px; opacity: .72; text-transform: uppercase; }
.ws-info { padding: 0 17px 15px; }
.ws-info h2 { font-size: 18px; margin: 12px 0 3px; letter-spacing: -.3px; }
.ws-info p { font-size: 12.5px; color: var(--text-3); margin: 0; }
.ws-stats { display: grid; grid-template-columns: 1fr 1fr; margin-top: 18px; }
.ws-stats div b { display: block; font-size: 20px; font-weight: 750; letter-spacing: -.6px; }
.ws-stats div span { font-size: 11px; color: var(--text-3); }

/* ---- the sidebar nav ---- */
.side-nav { margin: 23px 0; display: grid; gap: 2px; }
.side-nav button {
  width: 100%; border: 0; background: none; padding: 13px 12px; text-align: left;
  display: flex; align-items: center; gap: 12px; font-size: 14px; font-weight: 500;
  border-radius: 8px; color: #5c7089; font-family: var(--sans); cursor: pointer;
}
.side-nav button:hover { background: var(--panel-2); }
.side-nav button.on { background: var(--signal-w); color: var(--signal); font-weight: 650; }
.side-nav .n {
  font-size: 11px; padding: 1px 6px; border-radius: 4px; background: var(--panel-3);
  margin-left: auto; font-weight: 600; color: #55647a;
}
.side-nav button.on .n { background: #fff; color: var(--signal); }

.side-team { border-top: 1px solid var(--rule-2); padding: 20px 10px; }
.side-team h3 {
  font-size: 10px; letter-spacing: 1.5px; color: #7d8b9b; margin: 0 0 14px;
  text-transform: uppercase; font-weight: 700;
}
.side-team a, .side-team div.p {
  display: flex; align-items: center; gap: 10px; padding: 6px 0;
  text-decoration: none; color: inherit; font-size: 13px; font-weight: 600;
}
.side-team small { display: block; font-size: 11px; color: var(--text-3); font-weight: 400; }
.side-foot { color: #7f8fa1; font-size: 11px; line-height: 1.9; padding: 5px 10px; }

/* ---- the middle column ---- */
.hello {
  display: flex; align-items: center; justify-content: space-between;
  gap: 15px; margin: 2px 0 24px;
}
.hello h1 { font-size: 30px; margin: 0 0 6px; }
.hello p { margin: 0; color: var(--text-3); font-size: 14px; max-width: 430px; }
.hello .eyebrow {
  font-size: 10px; letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--signal); font-weight: 700; margin-bottom: 7px;
}

.tabs { display: flex; gap: 22px; border-bottom: 1px solid var(--rule-2); }
.tabs button {
  background: none; border: 0; border-bottom: 3px solid transparent;
  padding: 11px 0 14px; color: #7a8b9e; font-size: 14px; font-weight: 600;
  white-space: nowrap; font-family: var(--sans); cursor: pointer;
}
.tabs button[aria-selected=true] { border-color: var(--signal); color: var(--signal); }

.feed-head {
  display: flex; justify-content: space-between; align-items: center;
  gap: 10px; margin: 21px 0 16px;
}
.feed-head h2 { font-size: 16px; letter-spacing: -.25px; margin: 0 0 4px; }
.feed-head p { font-size: 12.5px; color: var(--text-3); margin: 0; max-width: 340px; }
.feed-end { padding: 24px; text-align: center; color: #93a3b4; font-size: 12px; }

/* ---- a feed card ---- */
.fcard {
  border: 1px solid var(--rule); background: #fff; border-radius: 12px;
  margin-bottom: 19px; overflow: hidden; box-shadow: 0 3px 6px rgba(33,57,76,.02);
}
.fcard-top { display: flex; align-items: center; gap: 12px; padding: 21px 22px 0; }
.fcard-id { flex: 1; min-width: 0; }
.fcard-id b { font-size: 15.5px; font-weight: 700; letter-spacing: -.2px; display: block; }
.fcard-id p { margin: 2px 0 0; font-size: 12.5px; color: var(--text-3); }
.fcard-main { padding: 0 22px; }
.status-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 15px 0 10px; }
.status {
  font-size: 11px; background: var(--panel-2); color: #55647a;
  border-radius: 4px; padding: 4px 7px; font-weight: 600;
}
.status.matched { background: var(--good-w); color: var(--good); }
.status.live    { background: var(--signal-w); color: var(--signal-d); }
.status.warn    { background: #fdf1e4; color: #8a5a1d; }
.fcard-quote { font-size: 16px; line-height: 1.45; margin: 4px 0 8px; letter-spacing: -.2px; }
.signal-note { font-size: 11.5px; color: var(--text-3); margin-bottom: 12px; }
.topic-row { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 15px; }
.topic {
  font-size: 11.5px; background: var(--panel-2); color: #55647a;
  border-radius: 5px; padding: 5px 9px;
}

/* the proposal, embedded in the card */
.pbox { border: 1px solid var(--rule); border-radius: 10px; background: #fbfcfe; margin-bottom: 4px; }
.pbox-head {
  display: flex; align-items: center; gap: 9px; padding: 13px 14px 10px;
  font-size: 13.5px;
}
.pbox-head strong { font-weight: 650; }
.pbox-head small { margin-left: auto; font-size: 11.5px; color: var(--text-3); display: flex; gap: 5px; align-items: center; }
.pbox textarea {
  width: 100%; border: 1px solid var(--rule); border-radius: 8px; background: #fff;
  padding: 13px 14px; font: 14px/1.65 var(--sans); color: var(--text);
  resize: vertical; min-height: 132px; display: block;
}
.pbox-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 9px 14px 13px; font-size: 11.5px; color: var(--text-3);
}
.pbox-foot button {
  border: 0; background: none; color: var(--signal); font-size: 11.5px;
  font-weight: 600; display: inline-flex; gap: 5px; align-items: center;
  font-family: var(--sans); cursor: pointer; padding: 0;
}
.pbox-wrap { padding: 0 14px; }

.rep-row {
  border-top: 1px solid #e8edf5; display: flex; align-items: center;
  gap: 10px; padding: 14px 0 16px; font-size: 12.5px;
}
.rep-row .eyebrow {
  font-size: 10px; letter-spacing: 1.2px; text-transform: uppercase;
  color: var(--text-3); font-weight: 700;
}
.rep-row b { display: block; font-size: 12.5px; font-weight: 500; color: var(--text-2); }

.action-row {
  display: flex; align-items: center; gap: 10px; padding: 14px 22px;
  border-top: 1px solid var(--rule); background: #fcfdff;
}
.quiet-btn {
  border: 0; background: none; color: var(--text-2); font-size: 13px; font-weight: 600;
  display: inline-flex; align-items: center; gap: 7px; font-family: var(--sans);
  cursor: pointer; padding: 8px 4px;
}
.quiet-btn:hover { color: var(--text); }
.action-row .primary, .action-row .btn-primary { margin-left: auto; }
.fcard-bottom {
  display: flex; align-items: center; gap: 8px; padding: 11px 22px;
  border-top: 1px solid var(--rule); font-size: 11.5px; color: var(--text-3);
  background: var(--panel-2);
}

/* ---- the right rail ---- */
.panel {
  border: 1px solid var(--rule); border-radius: 11px; background: #fff;
  padding: 19px 18px; margin-bottom: 17px;
}
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 5px; }
.panel h3 { font-size: 14px; margin: 0; letter-spacing: -.15px; }
.panel .sample { font-size: 10px; letter-spacing: 1px; color: #93a3b4; text-transform: uppercase; font-weight: 700; }
.panel-intro { font-size: 13.5px; color: #6d8299; line-height: 1.7; margin: 13px 0 14px; }
.panel-row { display: flex; align-items: center; gap: 10px; padding: 9px 0; font-size: 13px; }
.panel-row small { display: block; font-size: 11px; color: var(--text-3); }
.panel-note {
  border-top: 1px solid #e6edf7; padding: 13px 0 0; margin-top: 6px;
  font-size: 11px; color: #71889f; line-height: 1.8;
}
.text-link {
  border: 0; background: none; border-top: 1px solid var(--rule); margin-top: 12px;
  padding: 13px 0 0; color: var(--signal); font-size: 12px; width: 100%;
  text-align: left; font-weight: 600; display: flex; justify-content: space-between;
  font-family: var(--sans); cursor: pointer;
}

/* ---- avatars ---- */
.ava {
  width: 45px; height: 45px; border-radius: 50%; display: inline-grid; place-items: center;
  font-weight: 700; font-size: 14px; flex-shrink: 0; background: var(--signal-w);
  color: var(--signal-d); letter-spacing: -.3px;
}
.ava.sq { border-radius: 11px; }
.ava.sm { width: 34px; height: 34px; font-size: 12px; }
.ava.xs { width: 28px; height: 28px; font-size: 10.5px; }

.icon-btn {
  border: 0; background: transparent; padding: 5px; color: #6f8095;
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
}
.icon-btn:hover { color: var(--text); }

.empty-card {
  background: #fff; padding: 38px; border: 1px solid var(--rule); border-radius: 12px;
  color: var(--text-3); text-align: center; font-size: 15px; line-height: 1.8;
}
.empty-card strong { color: var(--text); font-size: 18px; display: block; margin-bottom: 7px; }

/* ---- responsive ---- */
@media (max-width: 1180px) {
  .layout { grid-template-columns: 200px minmax(360px, 1fr); max-width: 1000px; }
  .col-right { display: none; }
}
@media (max-width: 860px) {
  .layout { grid-template-columns: 1fr; padding: 18px; gap: 18px; }
  .col-left { position: static; }
  .app-search { display: none; }
  .app-top { padding: 0 16px; gap: 14px; }
  .side-nav { grid-auto-flow: column; grid-auto-columns: max-content; overflow-x: auto; gap: 6px; }
  .side-team, .side-foot, .ws-cover { display: none; }
}

/* ---------- the network: matches, introductions, conversations ---------- */
.linkish{border:0;background:none;padding:0;font:inherit;color:inherit;cursor:pointer;text-align:left}
.linkish:hover{color:var(--signal)}
.c-back{display:inline-flex;gap:.4rem;align-items:center;background:none;border:0;font:inherit;font-size:13px;color:var(--text-2);cursor:pointer;padding:0;margin:0 0 14px}
.c-back:hover{color:var(--signal)}
.match-signal{display:flex;gap:14px;align-items:flex-start;border:1px solid #cfe9dc;border-left:4px solid var(--good);background:#f2fbf6;border-radius:10px;padding:14px 16px;margin:6px 0 12px}
.match-signal .ms-icon{width:40px;height:40px;border-radius:50%;background:var(--good);color:#fff;display:grid;place-items:center;flex-shrink:0}
.ms-k{font-size:11px;font-weight:800;letter-spacing:1.2px;color:var(--good)}
.ms-tag{font-size:9px;letter-spacing:1px;border:1px solid #e7c96b;background:#fff8dc;color:#7a5d00;border-radius:4px;padding:2px 6px;margin-left:8px}
.ms-badges{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0 6px}
.ms-badges span{font-size:11px;font-weight:700;letter-spacing:.3px;border:1px solid #bfe0cf;background:#fff;color:#1f6b4f;border-radius:5px;padding:4px 8px;text-transform:uppercase}
.ms-note{font-size:11px;color:#4a6a5b}
.review-note{display:flex;gap:8px;align-items:flex-start;font-size:12px;line-height:1.6;color:var(--text-3);background:var(--panel-2);border-radius:8px;padding:10px 12px;margin:10px 0 4px}
.mm-list{border:1px solid var(--rule);border-radius:12px;background:#fff;overflow:hidden;margin-bottom:18px}
.mm-row{display:flex;justify-content:space-between;gap:14px;align-items:center;width:100%;text-align:left;background:#fff;border:0;border-bottom:1px solid var(--rule);padding:14px 18px;font:inherit;color:inherit;cursor:pointer}
.mm-row:last-child{border-bottom:0}
.mm-row:hover{background:var(--panel-2)}
.mm-row small{display:block;color:var(--text-3);font-size:12px;margin-top:3px}
.mm-pair{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.mm-arrow{color:var(--text-3)}
.mm-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:12px 0}
.mm-field label{display:block;font-size:11px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--text-3);margin:0 0 6px}
.mm-field select,.mm-field input,.mm-field textarea{width:100%}
.tmsg{padding:12px 14px;border-radius:10px;margin:0 0 10px;max-width:86%;border:1px solid var(--rule);background:#fff}
.tmsg.mine{margin-left:auto;background:var(--signal-w);border-color:var(--signal-e)}
.tmsg.mine .when{color:#4f5d71}
.tmsg.staff{max-width:100%;background:#fff8e6;border-color:#f1dca4}
.tmsg.system{max-width:100%;background:none;border:0;text-align:center;color:var(--text-3);font-size:12px;padding:4px}
.tmsg .who{font-size:12px;font-weight:700;margin-bottom:4px}
.tmsg .b{white-space:pre-wrap;line-height:1.6;font-size:14px}
.tmsg .when{font-size:11px;color:var(--text-3);margin-top:6px}
.tmsg.system .when{margin-top:2px}
@media (max-width:860px){.mm-grid{grid-template-columns:1fr}.tmsg{max-width:100%}}
/* The filter sits beside the heading, it does not replace it. */
.feed-head select{width:auto;max-width:200px;flex:0 0 auto}

/* ---- v38: funnels, text now / email, coach screen ---- */
.fade{animation:eqfade .24s ease-out}
@keyframes eqfade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.net-funnel{margin:0 0 8px}
.net-funnel .funnel-step{appearance:none;-webkit-appearance:none;border:0;text-align:left;font:inherit;color:inherit;cursor:pointer;transition:background .15s}
.net-funnel .funnel-step:hover{background:var(--signal-w)}
.net-funnel .funnel-step.is-won:hover{background:var(--good-w)}
.net-funnel .funnel-step .p{display:block;font-size:11px;color:var(--text-3);margin-top:5px;white-space:nowrap}
.funnel-note{font-size:11.5px;color:var(--text-3);margin:0 0 18px}
.act-group{margin-left:auto;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.action-row .act-group .btn-primary{margin-left:0}
.act-group .btn.is-on{border-color:var(--signal);color:var(--signal);background:var(--signal-w)}
.compose-fields{display:grid;gap:10px;padding:12px 0 2px}
.compose-fields input[type=text]{width:100%}
.touch-head{font-size:10.5px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--text-3);margin:2px 0 6px}
.touch-list{margin:0 0 14px;padding:0;list-style:none}
.touch-list li{display:flex;gap:8px;align-items:flex-start;font-size:12.5px;color:var(--text-3);padding:6px 0;border-bottom:1px dashed var(--rule)}
.touch-list li:last-child{border-bottom:0}
.touch-list li b{color:var(--text-2);font-weight:600}
.touch-list li.miss b{color:#8a5a1d}
.touch-list svg{width:14px;height:14px;flex:0 0 14px;margin-top:2px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.coach-row{display:flex;gap:12px;align-items:center;min-width:0}
.notice-body{white-space:pre-wrap;color:var(--text-2);font-size:13.5px;line-height:1.55;margin:4px 0 2px}
.fcard-bottom svg{width:14px;height:14px}
.toast-note{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:60;max-width:min(560px,92vw);
  box-shadow:0 10px 30px rgba(20,35,60,.18);animation:eqfade .2s ease-out}
@media (max-width:860px){.net-funnel{flex-wrap:wrap}.net-funnel .funnel-step{flex:1 1 30%}}

/* ---- v39: reports ---- */
.rp-head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap;margin:0 0 18px}
.rp-seg{display:inline-flex;border:1px solid var(--rule-2);border-radius:9px;overflow:hidden;background:#fff;flex:0 0 auto}
.rp-seg button{appearance:none;border:0;border-right:1px solid var(--rule-2);background:none;font:inherit;font-size:12.5px;padding:7px 12px;color:var(--text-2);cursor:pointer}
.rp-seg button:last-child{border-right:0}
.rp-seg button.on{background:var(--signal-w);color:var(--signal);font-weight:650}
.rp-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:0 0 18px}
.rp-kpi{background:#fff;border:1px solid var(--rule);border-radius:12px;padding:15px 16px}
.rp-kpi .l{font-size:10.5px;font-weight:700;letter-spacing:.9px;text-transform:uppercase;color:var(--text-3)}
.rp-kpi .n{font-size:26px;font-weight:750;letter-spacing:-.8px;margin:6px 0 2px;font-variant-numeric:tabular-nums}
.rp-kpi .s{font-size:12px;color:var(--text-3)}
.rp-card{background:#fff;border:1px solid var(--rule);border-radius:12px;padding:18px 18px 14px;margin:0 0 18px;min-width:0}
.rp-card-h{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;flex-wrap:wrap;margin:0 0 14px}
.rp-card-h h3{margin:0;font-size:15px;letter-spacing:-.2px}
.rp-card-h small{display:block;color:var(--text-3);font-size:12px;margin-top:3px}
.rp-tabs{display:flex;gap:4px;flex-wrap:wrap}
.rp-tabs button{appearance:none;border:1px solid var(--rule-2);background:#fff;border-radius:999px;font:inherit;font-size:12px;padding:4px 10px;cursor:pointer;color:var(--text-2)}
.rp-tabs button.on{border-color:var(--signal);color:var(--signal);background:var(--signal-w);font-weight:600}
.rp-chart{display:flex;align-items:flex-end;gap:3px;height:150px;padding:4px 0 0;border-bottom:1px solid var(--rule)}
.rp-col{flex:1;height:100%;display:flex;align-items:flex-end;min-width:0}
.rp-col i{display:block;width:100%;background:var(--signal);opacity:.82;border-radius:3px 3px 0 0;transition:opacity .15s}
.rp-col:hover i{opacity:1}
.rp-axis{display:flex;justify-content:space-between;font-size:11px;color:var(--text-3);margin-top:6px}
.rp-vf,.rp-vf-head{display:grid;gap:6px}
.rp-vf-head,.rp-vf-row{grid-template-columns:110px 1fr 44px 70px;align-items:center;column-gap:12px}
.rp-vf-head{display:grid;padding:0 6px 2px;font-size:10.5px;font-weight:700;letter-spacing:.9px;text-transform:uppercase;color:var(--text-3)}
.rp-vf-row{appearance:none;border:0;background:none;font:inherit;color:inherit;display:grid;padding:5px 6px;border-radius:8px;cursor:pointer;text-align:left}
.rp-vf-row:hover{background:var(--panel-2)}
.rp-vf-l{font-size:13px;color:var(--text-2)}
.rp-vf-bar{height:22px;background:var(--panel-2);border-radius:6px;overflow:hidden}
.rp-vf-bar i{display:block;height:100%;background:linear-gradient(90deg,var(--signal),#7aa2ff);border-radius:6px}
.rp-vf-row:last-child .rp-vf-bar i{background:linear-gradient(90deg,var(--good),#62cf9c)}
.rp-vf-n{font-weight:700;text-align:right;font-variant-numeric:tabular-nums}
.rp-vf-p{font-size:12px;color:var(--text-3);text-align:right}
.rp-tablewrap{overflow-x:auto}
.rp-table{width:100%;border-collapse:collapse;font-size:13px}
.rp-table th{text-align:left;font-size:10.5px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;color:var(--text-3);padding:8px 10px;border-bottom:1px solid var(--rule);white-space:nowrap}
.rp-table td{padding:10px;border-bottom:1px solid var(--rule);vertical-align:middle}
.rp-table tr:last-child td{border-bottom:0}
.rp-table .num{text-align:right;font-variant-numeric:tabular-nums}
.rp-table tr.click{cursor:pointer}
.rp-table tr.click:hover td{background:var(--panel-2)}
.rp-table small{display:block;color:var(--text-3);font-size:11.5px;margin-top:3px}
.rp-dots{display:inline-flex;gap:3px;vertical-align:middle}
.rp-dots i{width:10px;height:10px;border-radius:50%;background:var(--panel-2);border:1px solid var(--rule-2)}
.rp-dots i.on{background:var(--signal);border-color:var(--signal)}
.rp-dots i.side{background:#fff;border-color:var(--signal)}
.rp-bars{display:grid;gap:9px}
.rp-bars > div{display:grid;grid-template-columns:140px 1fr 36px;gap:10px;align-items:center;font-size:13px}
.rp-bars span.b{height:10px;background:var(--panel-2);border-radius:5px;overflow:hidden}
.rp-bars span.b i{display:block;height:100%;background:var(--signal);border-radius:5px}
.rp-bars b{text-align:right;font-variant-numeric:tabular-nums}
.rp-speed > div{grid-template-columns:160px 1fr}
.rp-speed b{text-align:left}
.rp-grid2{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:0 0 18px}
.rp-grid2 > .rp-card{margin:0}
.rp-team{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.rp-person{border:1px solid var(--rule);border-radius:12px;padding:14px 16px;background:#fbfcfe}
.rp-person h4{margin:0 0 2px;font-size:14px;display:flex;gap:8px;align-items:center}
.rp-person p{margin:0 0 12px 36px;font-size:12px;color:var(--text-3)}
.rp-person dl{display:grid;grid-template-columns:repeat(3,1fr);gap:10px 8px;margin:0}
.rp-person dt{font-size:18px;font-weight:750;letter-spacing:-.4px;font-variant-numeric:tabular-nums}
.rp-person dd{margin:0;font-size:11px;color:var(--text-3)}
.rp-chips{display:flex;gap:6px;flex-wrap:wrap;margin:0 0 12px}
.rp-chips button{appearance:none;border:1px solid var(--rule-2);background:#fff;border-radius:999px;font:inherit;font-size:12px;padding:5px 11px;cursor:pointer;color:var(--text-2)}
.rp-chips button.on{border-color:var(--signal);background:var(--signal-w);color:var(--signal);font-weight:600}
.rp-chips button b{font-weight:700;margin-left:5px}
.rp-toolbar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:0 0 12px}
.rp-toolbar input{flex:1;min-width:200px}
.rp-steps{display:grid;grid-template-columns:repeat(8,1fr);gap:4px;margin:0 0 14px}
.rp-step{background:var(--panel-2);border-radius:8px;padding:10px 8px;font-size:11px;color:var(--text-3);min-width:0}
.rp-step b{display:block;font-size:11.5px;color:var(--text-2);margin-bottom:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rp-step.on{background:var(--signal-w)}
.rp-step.on b{color:var(--signal)}
.rp-step.won{background:var(--good-w)}
.rp-step.won b{color:var(--good)}
.rp-facts{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;margin:0 0 18px}
.rp-facts div{background:#fff;border:1px solid var(--rule);border-radius:10px;padding:10px 12px}
.rp-facts b{display:block;font-size:20px;font-weight:750;font-variant-numeric:tabular-nums}
.rp-facts span{font-size:11px;color:var(--text-3)}
.rp-tl{list-style:none;margin:0;padding:0}
.rp-tl li{display:grid;grid-template-columns:12px 1fr auto;gap:10px;padding:9px 0;border-bottom:1px dashed var(--rule);font-size:13px}
.rp-tl li:last-child{border-bottom:0}
.rp-tl li > i{width:9px;height:9px;border-radius:50%;background:var(--signal);margin-top:5px}
.rp-tl li.miss > i{background:#d9a35b}
.rp-tl li.good > i{background:var(--good)}
.rp-tl li small{display:block;color:var(--text-3);font-size:11.5px;margin-top:2px}
.rp-tl time{font-size:11.5px;color:var(--text-3);white-space:nowrap}
.rp-flag{color:#8a5a1d;font-weight:600}
.rp-att{border-top:1px solid var(--rule-2);padding:10px 0 4px}
.rp-att:first-of-type{border-top:0}
.rp-att-h{font-size:11px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:var(--text-3);margin:0 0 2px}
.rp-att-h b{color:#8a5a1d;margin-left:4px}
#colRight a.panel-row{text-decoration:none;color:inherit;border-radius:8px}
#colRight a.panel-row:hover{background:var(--panel-2)}
@media (max-width:1180px){.rp-kpis{grid-template-columns:repeat(2,1fr)}.rp-team,.rp-grid2{grid-template-columns:1fr}
  .rp-facts{grid-template-columns:repeat(3,1fr)}.rp-steps{grid-template-columns:repeat(4,1fr)}}

/* ---- v40: groups by city ---- */
.city-block{margin:0 0 28px}
.city-head{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;flex-wrap:wrap;
  margin:0 0 12px;padding:0 0 9px;border-bottom:1px solid var(--rule-2)}
.city-head h2{margin:0;font-size:19px;letter-spacing:-.3px}
.city-head p{margin:3px 0 0;font-size:12.5px;color:var(--text-3)}
.city-loose{font-size:12.5px;color:var(--text-2);margin:0 0 12px;display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.rp-seatbar{height:6px;background:var(--panel-2);border-radius:3px;overflow:hidden;margin:14px 0 2px}
.rp-seatbar i{display:block;height:100%;background:var(--good);border-radius:3px}
.rp-kpi .n small.of{font-size:14px;color:var(--text-3);font-weight:500;letter-spacing:0}

/* ---- v41: sign out in the top bar ---- */
.app-out{display:inline-flex;align-items:center;gap:6px;margin-left:8px;padding:7px 11px;border:1px solid var(--rule-2);
  border-radius:9px;font-size:12.5px;font-weight:600;color:var(--text-2);text-decoration:none;background:#fff;white-space:nowrap}
.app-out:hover{color:var(--signal);border-color:var(--signal);text-decoration:none}
.app-out svg{width:16px;height:16px}
@media (max-width:860px){.app-out span{display:none}.app-out{padding:7px 9px}}

/* ---- v42: why you match ---- */
.ms-why{font-size:13.5px;line-height:1.55;color:var(--text-2);margin:9px 0 4px}

/* ---- v43: referral cards ---- */
.ref-card .fcard-main{padding-bottom:4px}
.ref-flow{display:grid;gap:8px;margin:16px 0 8px;padding:13px 15px;background:var(--panel-2);border-radius:10px}
.ref-flow > div{display:flex;gap:10px;align-items:baseline;font-size:14px;line-height:1.5;color:var(--text-2)}
.ref-flow b{color:var(--text);font-weight:650;margin-right:3px}
.ref-dir{flex:0 0 16px;font-weight:700;color:var(--signal)}
.ref-dir.in{color:var(--good)}