/* ============================================================================
   WA Signal — design system
   Drop-in replacement for public/site.css and the inline <style> blocks in
   index.html / admin.html / signup.html / invite.html.

   Class names match the existing markup (.btn .card .chip .row .pill .field
   .subnav .itemrow .switch .result .stat .ev .kv .stage-pill .status …), so
   loading this file rebrands the app without changing any JS.

   Fonts: <link href="https://fonts.googleapis.com/css2?family=Instrument+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap" rel="stylesheet">
   ========================================================================= */

:root{
  /* --- brand: ink green ------------------------------------------------- */
  --ink-900:#0A1F19;   /* deepest — top bar, dark bands */
  --ink-800:#0F2E24;   /* brand primary surface */
  --ink-700:#174536;
  --ink-600:#1F5C47;
  --green-500:#2A7D60; /* primary interactive */
  --green-400:#3E9B78;
  --green-200:#B9DFCD;
  --green-100:#DCEFE7;
  --green-50:#F1F9F5;

  /* --- accent: signal lime --------------------------------------------- */
  --lime:#C4F04D;      /* on dark only — live values, active windows */
  --lime-600:#8FB81F;  /* on light */
  --lime-ink:#4E6606;  /* text on lime */
  --lime-50:#F6FCE4;

  /* --- neutrals (warm-green tinted) ------------------------------------ */
  --paper:#FFFFFF;
  --canvas:#F6F8F6;
  --sunk:#EDF1EE;
  --line:#E1E7E3;
  --line-strong:#C7D0CA;
  --text:#14201B;
  --text-2:#4E5A54;
  --text-3:#838F89;
  --on-dark:#FFFFFF;
  --on-dark-2:rgba(255,255,255,.72);
  --on-dark-3:rgba(255,255,255,.48);

  /* --- semantic --------------------------------------------------------- */
  --ok:#2A7D60;      --ok-bg:#DCEFE7;   --ok-line:#B9DFCD;
  --warn:#A96A0B;    --warn-bg:#FDF4E3; --warn-line:#F0DDB4;
  --danger:#B4342A;  --danger-bg:#FCEDEB;--danger-line:#F2CDC8;
  --info:#1F5C47;    --info-bg:#EDF1EE;

  /* --- type ------------------------------------------------------------- */
  --sans:'Instrument Sans',system-ui,-apple-system,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,monospace;

  /* --- shape ------------------------------------------------------------ */
  --r-card:14px; --r-ctl:10px; --r-sm:8px; --r-pill:999px;
  --e1:0 1px 2px rgba(10,31,25,.06);
  --e2:0 2px 4px -1px rgba(10,31,25,.07),0 8px 16px -6px rgba(10,31,25,.10);
  --e3:0 12px 32px -8px rgba(10,31,25,.18);

  /* --- layout ----------------------------------------------------------- */
  --wrap:1120px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font:14px/1.55 var(--sans);color:var(--text);background:var(--canvas);
     -webkit-font-smoothing:antialiased;text-wrap:pretty}
button{font:inherit;cursor:pointer}
input,textarea,select{font:inherit}
img{max-width:100%}
a{color:var(--green-500);text-decoration-thickness:1px;text-underline-offset:2px}
a:hover{color:var(--ink-700)}
.mono,.kv dd.mono,code{font-family:var(--mono);font-size:12px;font-variant-numeric:tabular-nums}
:focus-visible{outline:2px solid var(--green-500);outline-offset:2px;border-radius:4px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto} *{transition:none!important;animation:none!important}}

/* ---------------------------------------------------------------- type --- */
h1{font-size:26px;line-height:1.18;letter-spacing:-.02em;margin:0 0 6px;font-weight:600}
h2{font-size:19px;line-height:1.3;letter-spacing:-.012em;margin:0 0 6px;font-weight:600}
h3{font-size:15px;line-height:1.4;margin:0 0 4px;font-weight:600}
.lead,.sub{color:var(--text-2);margin:0 0 20px}
.eyebrow{font-size:11px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;
         color:var(--text-3);margin:0 0 8px}
.hint{font-size:12px;color:var(--text-3)}

/* -------------------------------------------------------------- buttons --- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;border:1px solid transparent;
     border-radius:var(--r-ctl);padding:9px 15px;font-weight:600;font-size:14px;
     background:var(--ink-800);color:#fff;text-decoration:none;white-space:nowrap;
     transition:background .14s,border-color .14s,box-shadow .14s;box-shadow:var(--e1)}
.btn:hover{background:var(--ink-700);color:#fff}
.btn:active{background:var(--ink-900);box-shadow:none}
.btn.teal,.btn.primary{background:var(--green-500)}
.btn.teal:hover,.btn.primary:hover{background:var(--ink-600)}
.btn.ghost{background:var(--paper);border-color:var(--line-strong);color:var(--text);box-shadow:var(--e1)}
.btn.ghost:hover{background:var(--canvas);border-color:var(--text-3);color:var(--text)}
.btn.quiet{background:transparent;border-color:transparent;color:var(--text-2);box-shadow:none}
.btn.quiet:hover{background:var(--sunk);color:var(--text)}
.btn.danger{background:var(--paper);border-color:var(--danger-line);color:var(--danger)}
.btn.danger:hover{background:var(--danger-bg);border-color:var(--danger);color:var(--danger)}
.btn.lime{background:var(--lime);color:var(--lime-ink)}
.btn.lime:hover{background:#B6E63A;color:var(--lime-ink)}
.btn.sm{padding:6px 11px;font-size:13px;border-radius:var(--r-sm)}
.btn.lg{padding:12px 20px;font-size:15px}
.btn.block{width:100%}
.btn[disabled]{opacity:.5;cursor:default;box-shadow:none}
.linkbtn{background:none;border:0;padding:0;color:var(--green-500);font-size:12px;font-weight:600;
         text-decoration:underline;text-underline-offset:2px}
.linkbtn:hover{color:var(--ink-700)}

/* --------------------------------------------------------------- inputs --- */
.field{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}
.field label{font-size:12px;font-weight:600;color:var(--text-2)}
.field input,.field textarea,.field select,
.filters input,.filters select,.range input,.list .bar input,.order-form input,
.assign select,.numsel select,.itemrow select,.hours input[type=time]{
  border:1px solid var(--line-strong);border-radius:var(--r-ctl);padding:9px 11px;
  background:var(--paper);color:var(--text);transition:border-color .14s,box-shadow .14s}
.field input::placeholder,.field textarea::placeholder{color:var(--text-3)}
.field input:focus,.field textarea:focus,.field select:focus,
.filters input:focus,.range input:focus{
  outline:none;border-color:var(--green-500);box-shadow:0 0 0 3px rgba(42,125,96,.14)}
.field input[readonly]{background:var(--sunk);color:var(--text-2)}
.copy{display:flex;gap:6px}
.copy input{flex:1;font-family:var(--mono);font-size:12px;background:var(--sunk)}

.switch{display:inline-flex;align-items:center;gap:8px;font-size:12px;color:var(--text-2)}
.switch input{width:38px;height:22px;appearance:none;background:var(--line-strong);
              border-radius:var(--r-pill);position:relative;cursor:pointer;transition:background .16s}
.switch input:checked{background:var(--green-500)}
.switch input::after{content:"";position:absolute;top:2px;left:2px;width:18px;height:18px;
                     border-radius:50%;background:#fff;box-shadow:var(--e1);transition:transform .16s}
.switch input:checked::after{transform:translateX(16px)}

/* ---------------------------------------------------------------- chips --- */
.chip{border:1px solid var(--line-strong);background:var(--paper);border-radius:var(--r-pill);
      padding:5px 11px;font-size:12px;font-weight:500;color:var(--text-2);transition:all .14s}
.chip:hover{border-color:var(--text-3);color:var(--text)}
.chip[aria-pressed=true]{background:var(--ink-800);color:#fff;border-color:var(--ink-800)}

/* ---------------------------------------------------- pills & statuses --- */
.pill,.status,.stage-pill{display:inline-block;font-size:10px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;padding:3px 8px;border-radius:6px;background:var(--sunk);
  color:var(--text-2);white-space:nowrap}
.pill.owner{background:var(--ink-800);color:#fff}
.pill.manager{background:var(--green-100);color:var(--ink-600)}
.pill.invited,.pill.susp{background:var(--warn-bg);color:var(--warn)}
.pill.disabled{background:var(--danger-bg);color:var(--danger)}
.pill.active,.status.active{background:var(--green-100);color:var(--ink-600)}
.pill.error,.status.error{background:var(--danger-bg);color:var(--danger)}
.status.pending{background:var(--warn-bg);color:var(--warn)}
.stage-pill.qualified{background:var(--lime-50);color:var(--lime-ink)}
.stage-pill.converted{background:var(--ink-800);color:#fff}
.stage-pill.not_qualified{background:var(--danger-bg);color:var(--danger)}
.badge{min-width:19px;height:19px;border-radius:var(--r-pill);background:var(--green-500);color:#fff;
       font-size:11px;font-weight:700;display:inline-grid;place-items:center;padding:0 6px}
.av{display:grid;place-items:center;border-radius:50%;background:var(--green-500);color:#fff;
    font-weight:700;flex:0 0 auto}

/* ---------------------------------------------------------------- cards --- */
.card{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-card);padding:20px;
      box-shadow:var(--e1)}
.card h2{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.card .desc{color:var(--text-2);font-size:13px;margin:0 0 16px;max-width:64ch}
.cards{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.stats{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin-bottom:20px}
.stat{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-card);padding:14px 16px;
      box-shadow:var(--e1)}
.stat .v{font-family:var(--mono);font-size:23px;font-weight:500;line-height:1.15;color:var(--ink-800);
         font-variant-numeric:tabular-nums}
.stat .l{font-size:12px;color:var(--text-3);margin-top:3px}

.result{font-size:12px;padding:9px 11px;border-radius:var(--r-ctl);background:var(--sunk);
        border:1px solid var(--line);margin-top:10px;white-space:pre-wrap;word-break:break-word}
.result.ok{background:var(--ok-bg);border-color:var(--ok-line);color:var(--ink-600)}
.result.err{background:var(--danger-bg);border-color:var(--danger-line);color:var(--danger)}
.keyline{font-family:var(--mono);font-size:12px;background:var(--paper);border:1px solid var(--line);
         border-radius:var(--r-sm);padding:9px;margin-top:8px;word-break:break-all}
.tip,.callout{border-left:3px solid var(--lime-600);background:var(--lime-50);padding:10px 14px;
              border-radius:0 var(--r-sm) var(--r-sm) 0;margin:10px 0;font-size:13px}
.actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:8px}

/* --------------------------------------------------------------- tables --- */
.tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--line);
           border-radius:var(--r-card);background:var(--paper);box-shadow:var(--e1)}
table{width:100%;border-collapse:collapse}
th,td{text-align:left;padding:11px 14px;border-bottom:1px solid var(--line);font-size:13px;
      vertical-align:top}
th{font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--text-3);
   background:var(--canvas);vertical-align:bottom;line-height:1.3;position:sticky;top:0}
tbody tr:last-child td{border-bottom:0}
tbody tr:hover{background:var(--green-50)}
td.num,th.num{text-align:right}
td.num{font-family:var(--mono);font-size:12px;font-variant-numeric:tabular-nums}
td.num.zero{color:var(--text-3)}
td .sub,td .adid{display:block;font-size:11px;color:var(--text-3);margin-top:2px}
td .adid{font-family:var(--mono)}

/* -------------------------------------------------------------- shell ---- */
.top{display:flex;align-items:center;gap:16px;padding:0 18px;height:54px;
     background:var(--ink-900);color:#fff}
.brand{display:flex;align-items:center;gap:10px;font-weight:700;letter-spacing:-.01em;
       color:inherit;text-decoration:none}
.brand .dot{width:9px;height:9px;border-radius:2px;background:var(--lime);transform:rotate(45deg);
            box-shadow:0 0 0 4px rgba(196,240,77,.16)}
/* Sized by their contents. Left to grow they each take the whole bar and push
   the other one off the edge of a phone. */
.tabs{display:flex;gap:2px;flex:none;min-width:0}
.tabs button{display:inline-flex;align-items:center;gap:8px;
             background:transparent;border:0;color:var(--on-dark-2);padding:7px 13px;
             border-radius:var(--r-sm);font-weight:500;transition:background .14s,color .14s}
.tabs button:hover{color:#fff;background:rgba(255,255,255,.07)}
.tabs button[aria-selected=true]{background:rgba(255,255,255,.13);color:#fff;font-weight:600}
/* Settings sits at the far end, past the spacer, with a hairline between it
   and the identity — near the account, not among the working views. */
.tabs.acct{padding-right:14px;margin-right:2px;border-right:1px solid rgba(255,255,255,.14)}
.top .tag{font-size:10px;text-transform:uppercase;letter-spacing:.1em;color:var(--lime);font-weight:700}
.userchip{display:flex;align-items:center;gap:9px;font-size:12px;color:var(--on-dark-2)}
.userchip .av{width:27px;height:27px;font-size:12px}
.userchip b{color:#fff;font-weight:600;display:block}
.userchip .role{font-size:10px;text-transform:uppercase;letter-spacing:.07em;color:var(--lime)}
.page{max-width:var(--wrap);margin:0 auto;padding:26px 20px 60px}

.subnav{display:flex;gap:2px;flex-wrap:wrap;margin-bottom:20px;border-bottom:1px solid var(--line)}
.subnav button{background:transparent;border:0;border-bottom:2px solid transparent;padding:9px 13px;
               color:var(--text-2);font-weight:500;margin-bottom:-1px}
.subnav button:hover{color:var(--text)}
.subnav button[aria-selected=true]{color:var(--ink-800);border-bottom-color:var(--lime-600);font-weight:600}

.itemrow{display:flex;align-items:center;gap:12px;padding:13px 0;border-bottom:1px solid var(--line)}
.itemrow:last-of-type{border-bottom:0}
.itemrow .av{width:34px;height:34px;font-size:13px;background:var(--ink-700)}
.itemrow .grow{flex:1;min-width:0}
.itemrow .grow>b{display:flex;align-items:center;gap:7px;flex-wrap:wrap;font-size:14px}
.itemrow .grow>span{display:block;font-size:12px;color:var(--text-2)}
.addblock{margin-top:18px;padding-top:18px;border-top:1px solid var(--line)}
/* Which numbers a team member is kept to: a row of ticks under their name. */
.numsrow{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-top:6px;font-size:12px}
.numsrow .numlbl{color:var(--text-2);text-transform:uppercase;letter-spacing:.04em;font-size:10px;font-weight:600}
.numsrow .numtext{color:var(--text-2)}
.numchk{display:inline-flex;flex-wrap:wrap;gap:4px 14px;font-size:12px}
.numchk label{display:inline-flex;align-items:center;gap:5px;cursor:pointer;font-weight:500}
.numchk input{margin:0;accent-color:var(--teal-ink)}
.field .numchk{display:flex;padding:4px 0 2px}

/* ---------------------------------------------------------------- inbox --- */
.inbox{display:grid;grid-template-columns:344px minmax(0,1fr) 324px;height:100%;min-height:0}
.list{border-right:1px solid var(--line);background:var(--paper);display:flex;flex-direction:column;
      min-height:0}
.list .bar{padding:12px;border-bottom:1px solid var(--line);display:flex;gap:8px}
.list .bar input{flex:1;min-width:120px}
/* The two rows filter on different things — who owns the chat, and what stage
   it is at — so they are one block with one rhythm, closed off from the list
   below. index.html's own copy pads them the other way round (bottom, not
   top), which is why the spacing above and below them did not match. */
.chips{display:flex;gap:6px;flex-wrap:wrap;padding:9px 12px 0}
.chips+.chips{padding-top:8px;padding-bottom:9px}
/* Two rows of identical pills filtering different things read as one long
   list of options. The label is what separates them. */
.clabel{flex:0 0 100%;font-size:10.5px;font-weight:600;letter-spacing:.09em;
  text-transform:uppercase;color:var(--text-3);margin-bottom:1px}
/* The line under the filters belongs to the list, not to the last chip row:
   `.chips:last-of-type` matches the last *div* among the siblings, which is
   .rows itself, so it never applied to a chip row at all. */
.rows{border-top:1px solid var(--line)}
.rows{overflow:auto;flex:1}
/* border:0 first. This is a <button>, and only bottom and left were being set,
   so the browser's own 2px black button border survived on the top and right
   edges — a dark line down the side of every conversation. */
.row{display:grid;grid-template-columns:1fr auto;gap:4px 10px;padding:12px 14px;
     border:0;border-bottom:1px solid var(--line);border-left:3px solid transparent;
     cursor:pointer;width:100%;text-align:left;background:var(--paper)}
.row:hover{background:var(--canvas)}
.row[aria-current=true]{background:var(--green-50);border-left-color:var(--green-500)}
.row .n{font-weight:600;display:flex;align-items:center;gap:8px;min-width:0}
.row .n .nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.row .t{font-size:11px;color:var(--text-3);font-family:var(--mono)}
.row .m{grid-column:1/3;color:var(--text-2);white-space:nowrap;overflow:hidden;
        text-overflow:ellipsis;font-size:13px}
.row .ad,.row .who{font-size:11px;grid-column:1/3;display:flex;gap:6px;align-items:center;min-width:0}
.row .ad{color:var(--lime-ink)}
.row .ad .txt{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:var(--sans)}
.row .ad::before{content:"";width:6px;height:6px;border-radius:1px;background:var(--lime-600);
                 transform:rotate(45deg);flex:0 0 auto}
.row .who{color:var(--text-3)}

.thread{display:flex;flex-direction:column;min-height:0;background:var(--canvas);position:relative}
.thread .head{background:var(--paper);border-bottom:1px solid var(--line);padding:11px 16px;
              display:flex;align-items:center;gap:12px}
.thread .head h2{margin:0;font-size:15px;display:flex;align-items:center;gap:8px}
.thread .head .sub{color:var(--text-3);font-size:12px;font-family:var(--mono);margin:0}
.thread .head .sp{flex:1}
.navbtn{display:none;border:1px solid var(--line-strong);background:var(--paper);
        border-radius:var(--r-sm);padding:7px 11px;font-weight:600;font-size:13px;color:var(--text-2)}
.ribbon{display:flex;align-items:center;gap:14px;white-space:nowrap;overflow:hidden;padding:9px 16px;
        background:var(--ink-800);color:#fff;font-size:12px}
.ribbon .h{font-weight:600;overflow:hidden;text-overflow:ellipsis}
.ribbon .k{color:var(--on-dark-3)}
.ribbon .win{margin-left:auto;display:flex;gap:16px}
.ribbon .win b{font-family:var(--mono);font-weight:500}
.ribbon .win .free b{color:var(--lime)}
.ribbon .win .capi b{color:var(--green-400)}
/* The ad ribbon is white on ink, and its muted and live colours are built for
   that. This one sits on the page's own light ground, so every one of them has
   to be restated — inherited, --on-dark-3 is white at 48% and --lime is a colour
   the palette itself marks "on dark only". Both come out all but invisible. */
.ribbon.organic{background:var(--sunk);color:var(--text-2);border-bottom:1px solid var(--line)}
.ribbon.organic .h{color:var(--text)}
.ribbon.organic .k{color:var(--text-3)}
.ribbon.organic .win b{color:var(--text)}
.ribbon.organic .win b.shut{color:var(--warn)}
/* Not a step: nothing about it is ever finished, and it is a choice rather than
   a thing to get done. Set apart from the checklist above it for that reason. */
.orgcapi{margin:14px 0 0;padding:13px 15px;background:var(--sunk);border-radius:var(--r-sm)}
.orgcapi .hint{margin:6px 0 0 26px;font-size:12px;line-height:1.5;color:var(--text-3)}
/* Said back to them, because a decision that carries a duty should not be
   something anybody has to remember taking. */
.orgcapi .hint.decided{margin-top:8px;color:var(--text-2)}

/* The one thing in the side panel that cannot be undone, so it does not sit
   among the things that can. */
.erase{border-top:1px solid var(--line);padding-top:14px}
.erase .hint{font-size:12px;line-height:1.5;color:var(--text-3);margin:0 0 9px}
.btn.danger{color:var(--danger);border-color:var(--danger-line, var(--line))}
.btn.danger:hover{background:var(--danger-bg)}

.msgs{flex:1;overflow:auto;padding:18px 16px;display:flex;flex-direction:column;gap:6px}
.msg{max-width:66%;padding:9px 13px;border-radius:14px;background:var(--paper);box-shadow:var(--e1);
     white-space:pre-wrap;word-break:break-word;font-size:13.5px;line-height:1.5}
.msg.in{border-bottom-left-radius:4px}
.msg.out{align-self:flex-end;background:var(--green-100);border-bottom-right-radius:4px}
.msg.auto{background:var(--lime-50)}
.msg .who{display:block;font-size:10px;color:var(--text-3);margin-bottom:2px;font-weight:700;
          text-transform:uppercase;letter-spacing:.06em}
/* Why Meta would not deliver it, in Meta's words. A message marked failed with
   nothing beside it is the one state a seller can do nothing about. */
.msg .why{display:block;font-size:11px;line-height:1.35;color:var(--danger);margin-top:4px;white-space:normal}
/* Which of the store's own numbers this conversation is on. With every number in
   the list at once, the header is the only place that can say. */
.thread .head .sub .onnum{color:var(--text-3)}
.msg .meta{display:block;font-size:10px;color:var(--text-3);margin-top:4px;text-align:right;
           font-family:var(--mono)}
.msg img{max-width:260px;border-radius:var(--r-sm);display:block;margin-bottom:4px}
.compose{display:flex;gap:8px;padding:12px 16px;background:var(--paper);border-top:1px solid var(--line)}
.compose textarea{flex:1;resize:none;height:42px}
.qr{position:absolute;bottom:66px;left:16px;right:16px;max-height:230px;overflow:auto;
    background:var(--paper);border:1px solid var(--line-strong);border-radius:var(--r-card);
    box-shadow:var(--e3);z-index:20}
.qr button{display:block;width:100%;text-align:left;background:var(--paper);border:0;
           border-bottom:1px solid var(--line);padding:10px 13px}
.qr button:hover,.qr button.sel{background:var(--green-50)}
.qr .k,.qr .p{display:block}
.qr .k{font-weight:600;font-size:13px}
.qr .k span{font-family:var(--mono);color:var(--green-500);font-size:11px;margin-left:6px}
.qr .p{font-size:12px;color:var(--text-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.side{background:var(--paper);border-left:1px solid var(--line);overflow:auto;padding:16px;
      display:flex;flex-direction:column;gap:20px}
.side h3{margin:0 0 8px;font-size:11px;letter-spacing:.09em;text-transform:uppercase;
         color:var(--text-3);font-weight:600}
.pipe{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.pipe button{border:1px solid var(--line-strong);background:var(--paper);border-radius:var(--r-ctl);
             padding:9px 6px;font-weight:600;font-size:12px;color:var(--text-2)}
.pipe button:hover{border-color:var(--text-3);color:var(--text)}
.pipe button[aria-pressed=true]{border-color:var(--text-2);background:var(--text-2);color:#fff}
.pipe button.q[aria-pressed=true]{background:var(--lime);border-color:var(--lime);color:var(--lime-ink)}
.pipe button.cv[aria-pressed=true]{background:var(--ink-800);border-color:var(--ink-800);color:#fff}
.pipe button.nq[aria-pressed=true]{background:var(--danger);border-color:var(--danger);color:#fff}
.pipe .note{grid-column:1/3;font-size:11px;color:var(--text-3);line-height:1.5}
.kv{display:grid;grid-template-columns:auto 1fr;gap:5px 12px;font-size:12px;margin:0}
.kv dt{color:var(--text-3)} .kv dd{margin:0}
.ev{display:flex;justify-content:space-between;gap:8px;font-size:12px;padding:7px 0;
    border-bottom:1px solid var(--line)}
.ev:last-child{border-bottom:0}
.ev .s{font-family:var(--mono);font-size:11px;padding:2px 7px;border-radius:5px;background:var(--sunk)}
.ev .s.sent{background:var(--ok-bg);color:var(--ink-600)}
.ev .s.failed,.ev .s.expired{background:var(--danger-bg);color:var(--danger)}
.ev .s.queued{background:var(--warn-bg);color:var(--warn)}
.order-form{display:grid;grid-template-columns:1fr 84px;gap:6px}
.order-form .btn{grid-column:1/3}
.assign{display:flex;align-items:center;gap:8px;font-size:12px}
.assign select{flex:1}
.numsel{padding:10px 12px 0}
.numsel select{width:100%;font-size:12px}

/* --------------------------------------------------------------- states --- */
.empty{padding:48px 24px;text-align:center;color:var(--text-3);display:flex;flex-direction:column;
       gap:6px;align-items:center;justify-content:center;height:100%}
.empty b{color:var(--text-2);font-size:14px}
.empty span{font-size:13px;max-width:280px;line-height:1.55}
.loading{padding:36px;text-align:center;color:var(--text-3);font-size:13px}
.skel{padding:14px}
.skel div{height:12px;border-radius:6px;margin-bottom:9px;
          background:linear-gradient(90deg,var(--sunk) 25%,var(--canvas) 37%,var(--sunk) 63%);
          background-size:400% 100%;animation:sh 1.3s ease infinite}
.skel div:nth-child(3n){width:60%} .skel div:nth-child(3n+2){width:85%}
@keyframes sh{0%{background-position:100% 0}100%{background-position:0 0}}
/* A question the app asks itself, in place of the browser's confirm(). It sits
   above everything, dims what it is asking about rather than hiding it, and
   comes up from the bottom on a phone where a centred box would sit under the
   thumb. */
.askwrap{position:fixed;inset:0;z-index:80;background:rgba(10,31,25,.42);
  display:grid;place-items:center;padding:20px;animation:askin .12s ease-out}
.askbox{background:var(--paper);border-radius:var(--r-card);box-shadow:var(--e3, 0 18px 48px rgba(10,31,25,.24));
  padding:22px 24px;max-width:44ch;width:100%}
.askbox h2{margin:0 0 8px;font-size:16px;line-height:1.4}
.askbox p{margin:0;font-size:13px;line-height:1.65;color:var(--text-2)}
.askact{display:flex;gap:10px;margin-top:20px;flex-wrap:wrap}
.askact .btn{flex:none}
@keyframes askin{from{opacity:0}to{opacity:1}}
/* Nothing behind it scrolls while it is up. */
body.asking{overflow:hidden}
@media (max-width:560px){
  .askwrap{align-items:end;padding:0}
  .askbox{max-width:none;border-radius:var(--r-card) var(--r-card) 0 0;padding:20px 18px 24px}
  .askact{flex-direction:column-reverse}
  .askact .btn{width:100%}
}

.toast{position:fixed;bottom:22px;left:50%;transform:translateX(-50%);background:var(--ink-900);
       color:#fff;padding:11px 17px;border-radius:var(--r-ctl);font-size:13px;opacity:0;
       transition:opacity .2s;pointer-events:none;box-shadow:var(--e3);z-index:60}
.toast.on{opacity:1}

/* --------------------------------------------------------- auth screens --- */
.loginwrap{min-height:100dvh;display:grid;place-items:center;padding:24px;background:var(--canvas)}
.login{width:100%;max-width:420px;background:var(--paper);border:1px solid var(--line);
       border-radius:18px;padding:30px;box-shadow:var(--e2)}
.login h1{display:flex;align-items:center;gap:10px;font-size:20px;margin:0 0 6px}
.login .dot{width:9px;height:9px;border-radius:2px;background:var(--lime-600);transform:rotate(45deg);
            flex:0 0 auto}
.signup-line{text-align:center;margin:16px 0 0;font-size:13px;color:var(--text-2)}

/* --------------------------------------------------------- setup guide --- */
.guide details{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-card);
               margin-bottom:8px;box-shadow:var(--e1)}
.guide summary{padding:14px 17px;font-weight:600;cursor:pointer;list-style:none;display:flex;
               align-items:center;gap:10px}
.guide summary::-webkit-details-marker{display:none}
.guide summary::before{content:'+';color:var(--lime-600);font-weight:700;width:12px;font-size:16px}
.guide details[open] summary::before{content:'–'}
.guide details[open] summary{border-bottom:1px solid var(--line)}
.guide .body{padding:14px 17px;color:var(--text-2);font-size:13px}
.guide ol,.guide ul{padding-left:20px;margin:6px 0}
.guide li{margin:5px 0}

/* ------------------------------------------------------------ marketing --- */
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}
.site-head{position:sticky;top:0;z-index:20;background:rgba(255,255,255,.9);
           backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.site-head .wrap{display:flex;align-items:center;gap:20px;height:66px}
.site-head .brand{color:var(--ink-800);font-size:17px}
.site-head .brand .dot{background:var(--lime-600);box-shadow:0 0 0 4px rgba(143,184,31,.15)}
.site-head nav{margin-left:auto;display:flex;align-items:center;gap:22px}
.site-head nav a{color:var(--text-2);text-decoration:none;font-size:14px;font-weight:500}
.site-head nav a:hover{color:var(--text)}
.hero{background:var(--ink-900);color:#fff;padding:92px 0 100px;
      background-image:radial-gradient(760px 320px at 84% -14%,rgba(196,240,77,.16),transparent 66%)}
.hero h1{font-size:clamp(32px,4.8vw,52px);line-height:1.08;letter-spacing:-.03em;
         margin:0 0 20px;max-width:18ch}
.hero .lede{font-size:clamp(16px,1.9vw,19px);color:var(--on-dark-2);max-width:56ch;margin:0 0 32px}
.hero .cta{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.hero .btn{background:var(--lime);color:var(--lime-ink)}
.hero .btn:hover{background:#B6E63A;color:var(--lime-ink)}
.hero .btn.ghost{background:transparent;border-color:rgba(255,255,255,.3);color:#fff}
.hero .btn.ghost:hover{background:rgba(255,255,255,.09)}
.hero .note{margin:22px 0 0;font-size:13px;color:var(--on-dark-3)}
section{padding:80px 0}
section.alt{background:var(--canvas);border-block:1px solid var(--line)}
section h2{font-size:clamp(24px,3vw,33px);line-height:1.2;letter-spacing:-.022em;margin:0 0 16px}
section .eyebrow{color:var(--lime-600)}
section .sub{max-width:62ch;font-size:17px;margin:0 0 40px}
.grid{display:grid;gap:20px}
.g2{grid-template-columns:repeat(2,1fr)} .g3{grid-template-columns:repeat(3,1fr)}
.steps{counter-reset:s;display:grid;border:1px solid var(--line);border-radius:var(--r-card);
       overflow:hidden;background:var(--paper);box-shadow:var(--e1)}
.step{display:grid;grid-template-columns:44px 1fr;gap:18px;padding:24px 26px;
      border-bottom:1px solid var(--line)}
.step:last-child{border-bottom:0}
.step::before{counter-increment:s;content:counter(s);width:32px;height:32px;border-radius:9px;
              background:var(--ink-800);color:var(--lime);display:grid;place-items:center;
              font-size:14px;font-weight:700;font-family:var(--mono)}
.step h3{margin:4px 0 6px;font-size:17px}
.step p{margin:0;color:var(--text-2);font-size:15px}
.checks{list-style:none;padding:0;margin:0;display:grid;gap:13px}
.checks li{position:relative;padding-left:22px;color:var(--text-2);font-size:15px}
.checks li::before{content:"";position:absolute;left:2px;top:10px;width:8px;height:8px;border-radius:1px;
                   background:var(--lime-600);transform:rotate(45deg)}
.checks b{color:var(--text);font-weight:600}
.cta-band{background:var(--ink-900);color:#fff;padding:72px 0;text-align:center}
.cta-band h2{margin:0 0 12px}
.cta-band p{color:var(--on-dark-2);max-width:52ch;margin:0 auto 28px}
.cta-band .btn{background:var(--lime);color:var(--lime-ink)}
.site-foot{background:var(--canvas);border-top:1px solid var(--line);padding:48px 0;font-size:14px;
           color:var(--text-2)}
.site-foot .cols{display:flex;gap:40px;flex-wrap:wrap;justify-content:space-between;margin-bottom:30px}
.site-foot h4{font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--text-3);
              margin:0 0 12px}
.site-foot ul{list-style:none;padding:0;margin:0;display:grid;gap:9px}
.site-foot a{color:var(--text-2);text-decoration:none}
.site-foot a:hover{color:var(--green-500);text-decoration:underline}
.site-foot .legal{border-top:1px solid var(--line);padding-top:22px;color:var(--text-3);font-size:13px;
                  display:flex;gap:14px;flex-wrap:wrap;justify-content:space-between}

/* --------------------------------------------------------------- legal --- */
.doc{max-width:760px;margin:0 auto;padding:56px 24px 88px;background:var(--paper)}
.doc h1{font-size:clamp(27px,4vw,36px);margin:0 0 8px}
.doc .meta{color:var(--text-3);font-size:14px;margin:0 0 12px}
.doc h2{font-size:20px;margin:44px 0 12px;padding-top:22px;border-top:1px solid var(--line)}
.doc p,.doc li{color:var(--text-2)}
.toc{background:var(--canvas);border:1px solid var(--line);border-radius:var(--r-card);
     padding:20px 24px;margin:28px 0 8px}

/* ------------------------------------------------------------ responsive -- */
@media (max-width:1180px){
  .inbox{grid-template-columns:300px minmax(0,1fr) 292px}
  .stats{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:900px){
  .g2,.g3{grid-template-columns:1fr}
  .cards{grid-template-columns:1fr}
  /* One row on a phone, and only what is needed to move: the mark, where you
     can go, and the account. The wordmark, the name and the role were three
     more things to read and none of them were a destination.
     The reset of wrap/order/width is undoing index.html's own older copy of
     these rules, which still stacks the bar into three lines. */
  /* The mark carries a 4px glow ring that its layout box does not account for,
     so the padding has to cover the ink, not the box. At 10px it sat 4px off
     the screen edge and touched the first tab. */
  .top{height:52px;padding:0 16px;gap:16px;flex-wrap:nowrap}
  .top .sp{display:block;flex:1}
  .tabs{order:0;width:auto;margin-left:0}
  .brand .wordmark{display:none}
  .tabs{gap:0}
  .tabs button{padding:8px 10px}
  .tabs.acct{padding-right:0;margin-right:0;border-right:0}
  .tabs.acct .nm{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  /* The whole chip goes: who you are and which store now live at the foot of
     the settings rail, one tap away, instead of on every screen forever. */
  /* Just the avatar, not gone: the account is reachable from a phone too. */
  .userchip{display:flex} .userchip .who{display:none}
  .inbox{grid-template-columns:minmax(0,1fr)}
  .list,.side{border:0}
  .inbox[data-pane=list] .thread,.inbox[data-pane=list] .side{display:none}
  .inbox[data-pane=thread] .list,.inbox[data-pane=thread] .side{display:none}
  .inbox[data-pane=side] .list,.inbox[data-pane=side] .thread{display:none}
  .navbtn{display:inline-flex;align-items:center;gap:6px}
  .msg{max-width:85%}
  .chip,.pipe button{min-height:40px}
  /* Wrap, do not scroll sideways. Scrolling left "Not qualified" and "From ads"
     sliced off at the edge with only a fade to hint they were there — on the
     one screen where the filters most need to be countable at a glance.
     The overrides undo index.html's own copy of this rule. */
  .chips{flex-wrap:wrap;overflow-x:visible;-webkit-mask-image:none;mask-image:none}
  .ribbon{flex-wrap:wrap;white-space:normal;row-gap:6px}
  .ribbon .win{margin-left:0;width:100%;gap:16px}
  .page{padding:20px 14px 48px}
  section{padding:56px 0}
}
@media (max-width:700px){
  .itemrow{flex-wrap:wrap;align-items:flex-start;row-gap:8px}
  .itemrow .grow{flex:1 1 55%}
  .stats{grid-template-columns:repeat(2,1fr)}
  .compose textarea{font-size:16px}
  .login{padding:24px;border-radius:14px}
}
@media (max-width:420px){
  .stats{grid-template-columns:1fr 1fr;gap:8px}
  .stat .v{font-size:20px}
}

/* ------------------------------------------------- legacy token aliases --- */
/* The app pages keep a trimmed inline <style> for the handful of classes this
   file does not define (.shell .view .pitch .box .teamrow …). Those rules still
   reference the old token names, so point them at the new palette rather than
   rewriting every declaration. This file loads after the inline block, so these
   win. */
:root{
  --navy:var(--ink-900);
  --teal:var(--green-500);
  --teal-ink:var(--ink-600);
  --gold:var(--lime-600);
  --red:var(--danger);
  --ink:var(--text);
  --ink-2:var(--text-2);
  --ink-3:var(--text-3);
  --bg:var(--canvas);
  --line-2:var(--line-strong);
  --r:var(--r-card);
}

/* ------------------------------------------------------- app/marketing --- */
/* The marketing block above styles bare `section`, but the app renders its tab
   panes as <section class="view">. Keep the marketing padding and type off
   them. */
section.view{padding:0}
section.view h2{font-size:19px;line-height:1.3;letter-spacing:-.012em;margin:0 0 6px}
section.view .sub{max-width:none;font-size:inherit}
section.view .eyebrow{color:var(--text-3)}

/* ------------------------------------------------- product screenshots --- */
/* Static equivalents of the browser and phone frames the design canvas draws
   with its starter components, so the landing page can ship them as plain
   markup. Both wrap hand-built mock UI, not real screenshots. */
.browserframe{border-radius:10px;overflow:hidden;display:flex;flex-direction:column;background:#35363a;
              box-shadow:0 24px 80px rgba(0,0,0,.35),0 0 0 1px rgba(0,0,0,.1)}
.browserframe .bar{display:flex;align-items:center;height:44px;background:#202124;padding-right:8px}
.browserframe .lights{display:flex;gap:8px;padding:0 14px}
.browserframe .lights i{width:12px;height:12px;border-radius:50%}
.browserframe .lights i:nth-child(1){background:#ff5f57}
.browserframe .lights i:nth-child(2){background:#febc2e}
.browserframe .lights i:nth-child(3){background:#28c840}
.browserframe .tabs2{display:flex;align-items:flex-end;height:100%;padding-left:4px;flex:1}
.browserframe .tab{height:34px;align-self:flex-end;padding:0 12px;display:flex;align-items:center;gap:8px;
                   border-radius:8px 8px 0 0;min-width:120px;max-width:220px;font-size:12px;color:#9aa0a6;
                   font-family:system-ui,sans-serif}
.browserframe .tab.on{background:#35363a;color:#e8eaed}
.browserframe .tab::before{content:"";width:14px;height:14px;border-radius:50%;background:#5f6368;flex:0 0 auto}
.browserframe .tab span{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.browserframe .toolbar{height:40px;background:#35363a;display:flex;align-items:center;gap:4px;padding:0 8px}
.browserframe .toolbar .dot2{width:28px;height:28px;display:grid;place-items:center;flex:0 0 auto}
.browserframe .toolbar .dot2::before{content:"";width:16px;height:16px;border-radius:50%;background:#9aa0a6;opacity:.4}
.browserframe .url{flex:1;height:30px;border-radius:15px;background:#282a2d;display:flex;align-items:center;
                   gap:8px;padding:0 14px;margin:0 6px;color:#e8eaed;font-size:13px;font-family:system-ui,sans-serif}
.browserframe .url::before{content:"";width:12px;height:12px;border-radius:50%;background:#9aa0a6;opacity:.4;flex:0 0 auto}
.browserframe .screen{flex:1;background:#fff;overflow:hidden}

.phone{width:352px;height:720px;border-radius:48px;overflow:hidden;position:relative;background:#000;
       box-shadow:0 40px 80px rgba(0,0,0,.18),0 0 0 1px rgba(0,0,0,.12)}
.phone .island{position:absolute;top:11px;left:50%;transform:translateX(-50%);width:126px;height:37px;
               border-radius:24px;background:#000;z-index:50}
.phone .statusbar{position:absolute;top:0;left:0;right:0;z-index:10;display:flex;align-items:center;
                  justify-content:space-between;padding:19px 30px 0;color:#fff;
                  font:590 17px/22px -apple-system,'SF Pro',system-ui}
.phone .statusbar .sig{display:flex;align-items:flex-end;gap:2px;height:12px}
.phone .statusbar .sig i{width:3px;background:#fff;border-radius:1px}
.phone .statusbar .sig i:nth-child(1){height:4.5px}
.phone .statusbar .sig i:nth-child(2){height:7px}
.phone .statusbar .sig i:nth-child(3){height:9.5px}
.phone .statusbar .sig i:nth-child(4){height:12px}
.phone .statusbar .batt{width:24px;height:12px;border:1px solid rgba(255,255,255,.5);border-radius:3px;padding:1.5px}
.phone .statusbar .batt i{display:block;width:100%;height:100%;background:#fff;border-radius:1px}
.phone .screen{height:100%;overflow:hidden}
.phone .home{position:absolute;bottom:8px;left:50%;transform:translateX(-50%);width:139px;height:5px;
             border-radius:100px;background:rgba(255,255,255,.7);z-index:60}

/* the hero shot is lifted over the dark band and scales down on smaller screens */
.shot{max-width:1168px;margin:-160px auto 0;padding:0 24px;position:relative;z-index:5}
.shot .inner,.reportshot .inner{transform-origin:top center}
.reportshot{max-width:1168px;margin:0 auto;padding:0 24px}
@media (max-width:1180px){
  .shot .inner,.reportshot .inner{transform:scale(.82)}
  .shot{height:596px;overflow:hidden} .reportshot{height:520px;overflow:hidden}
}
@media (max-width:1000px){
  .shot .inner,.reportshot .inner{transform:scale(.60)}
  .shot{height:452px;margin-top:-130px} .reportshot{height:388px}
  .proof{grid-template-columns:1fr 1fr!important}
  .compare{grid-template-columns:1fr!important}
  .inboxsplit{grid-template-columns:1fr!important;gap:36px!important}
}
@media (max-width:720px){
  .shot .inner,.reportshot .inner{transform:scale(.40)}
  .shot{height:308px;margin-top:-108px} .reportshot{height:262px}
  .proof{grid-template-columns:1fr!important}
}
@media (max-width:900px){ .hide-sm{display:none!important} }
/* the phone is a fixed 352px; on the narrowest screens scale it and let the
   split clip, so it cannot push the page wider than the viewport */
@media (max-width:440px){
  .inboxsplit{overflow:hidden}
  .inboxsplit .phone{transform:scale(.85);transform-origin:top center;margin-bottom:-108px}
}

/* Filling a template's placeholder values without leaving the composer popover.
   .qr button is display:block/width:100%, so the action buttons need resetting. */
.qr .qrfill{padding:12px 14px;display:flex;flex-direction:column;gap:8px}
.qr .qrfill .p{white-space:normal;overflow:visible;font-size:12px;line-height:1.45}
.qr .qrfill input{width:100%;border:1px solid var(--line-2);border-radius:8px;
  padding:8px 10px;font:inherit;font-size:13px;background:var(--paper)}
.qr .qrfill .actions{display:flex;gap:8px;margin-top:2px}
.qr .qrfill .actions button{display:inline-block;width:auto}


/* ---- Setup checklist -------------------------------------------------------
   A step is ticked because the thing it describes actually happened, so the
   list has to read as evidence, not as a form. Done steps recede; the first
   unfinished one is the only thing asking for attention. */
.setup{margin-bottom:14px}
/* Inside a number's own card the checklist brings no chrome of its own —
   the card is the boundary, and a box inside a box reads as two things. */
.setup.bare{margin:0;background:none;border:0;box-shadow:none;padding:0}
.setup .sum{display:flex;align-items:center;gap:12px;margin-bottom:4px}
.setup .sum h2{margin:0;font-size:16px}
.setup .bar{flex:1;height:6px;border-radius:3px;background:var(--sunk);overflow:hidden;max-width:180px}
.setup .bar i{display:block;height:100%;background:var(--green-500);transition:width .3s}
.setup .count{font-family:var(--mono);font-size:12px;color:var(--text-3)}
/* How many numbers are on a connection. Not `.count`: that is the step
   counter, and two of them in one header is one too many to read. */
.setup .oncount{font-size:12px;color:var(--text-2)}

.steps{list-style:none;margin:10px 0 0;padding:0;border:1px solid var(--line);border-radius:var(--r-sm);overflow:hidden}
.steps>li{border-top:1px solid var(--line)}
.steps>li:first-child{border-top:0}
.steps .row{display:flex;gap:11px;align-items:flex-start;padding:12px 14px;width:100%;
  background:none;border:0;text-align:left;font:inherit;color:inherit;cursor:pointer}
.steps .row:hover{background:var(--canvas)}
.steps .tick{flex:none;width:19px;height:19px;border-radius:50%;margin-top:1px;
  display:grid;place-items:center;font-size:11px;font-weight:700;
  border:1.5px solid var(--line-strong);color:transparent}
.steps li.done .tick{background:var(--green-500);border-color:var(--green-500);color:#fff}
.steps li.next .tick{border-color:var(--green-500);border-style:dashed}
.steps .txt{flex:1;min-width:0}
.steps .t{display:block;font-family:var(--sans);font-size:13.5px;line-height:1.4;color:var(--text)}
.steps li.done .t{color:var(--text-3)}
.steps li.next .t{font-weight:600}
/* Its own line: the detail is evidence for the step above it, not part of the
   sentence — run together they read as one broken phrase. */
.steps .d{display:block;font-size:12px;color:var(--text-3);font-family:var(--mono);margin-top:3px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.steps .chev{flex:none;color:var(--text-3);font-size:11px;margin-top:3px}
.steps .help{padding:0 14px 14px 44px;font-size:12.5px;line-height:1.6;color:var(--text-2)}
.steps .help.hide{display:none}
.steps .help p{margin:0 0 10px}
/* The step's own work, in the step. A link out to the exact Meta page, the box
   the value comes back into, and one button — so nobody has to find the matching
   field in a long form further down the page. */
.steps .help .out{display:inline-flex;align-items:center;gap:6px;margin-bottom:12px;text-decoration:none}
.steps .fl{display:block;margin-bottom:10px;max-width:460px}
.steps .fl>span{display:block;font-size:12px;font-weight:600;color:var(--text-2);margin-bottom:4px}
.steps .fl input{width:100%;padding:8px 10px;font-size:13px;font-family:var(--mono);
  border:1px solid var(--line-strong);border-radius:var(--r-sm);background:var(--surface);color:var(--text)}
.steps .fl input:focus{outline:2px solid var(--green-500);outline-offset:-1px;border-color:var(--green-500)}
.steps .fl input[readonly]{background:var(--sunk);color:var(--text-2)}
.steps .fl .copy{display:flex;gap:7px;align-items:center}
.steps .act{display:flex;gap:11px;align-items:center;flex-wrap:wrap;margin-top:12px}
.steps .act .res{font-size:12.5px;line-height:1.5}
.steps .act .res.err{color:var(--red)}
.steps .act .res.ok{color:var(--teal-ink)}
/* One line per WhatsApp Business Account under the dataset step: who, and what Meta said. */
.steps .wabas{list-style:none;margin:6px 0 10px;padding:0;display:flex;flex-direction:column;gap:4px}
.steps .wabas li{display:flex;gap:10px;align-items:baseline;font-size:12.5px;flex-wrap:wrap}
.steps .wabas .who{font-weight:600}
.steps .wabas .ds{font-family:var(--mono);font-size:12px}
.steps .wabas .ds.dim{color:var(--text-2);font-family:inherit}
.steps .wabas .ds.err{color:var(--red);font-family:inherit}
.steps .wabas .ds.warn{color:var(--warn);font-family:inherit;flex-basis:100%}
.steps .wabas .ds.err{flex-basis:100%}
.steps .wabas .adds{font-size:12px;color:var(--text-2);display:inline-flex;gap:6px;align-items:center}
.steps .wabas .adds select{font:inherit;font-size:12px;padding:2px 6px;border:1px solid var(--line);border-radius:6px;background:#fff}
.steps details.manual{margin-top:12px;border-top:1px solid var(--line);padding-top:8px}
.steps details.manual summary{cursor:pointer;font-size:12.5px;color:var(--text-2)}
.steps details.manual .hint{font-size:12px;color:var(--text-2);margin:6px 0 8px}
.steps li.done .help .act .btn{opacity:.75}
/* Once everything is ticked the list stays, but quiet and closed: a seller
   still has to be able to reopen a step to change a value. */
.setup .allset + .steps{margin-top:10px}
.setup .allset{display:flex;gap:9px;align-items:center;padding:11px 14px;font-size:13px;
  background:var(--green-50);border:1px solid var(--green-200);border-radius:var(--r-sm);color:var(--green-700, var(--teal-ink))}

/* Which of the three situations the seller's number is in — asked first,
   because the third one costs them their chat history and they should know
   before step one, not after step nine. */
.wherebox{border:1px solid var(--line);border-radius:var(--r-sm);padding:13px 14px;margin:10px 0 0}
.wherebox .q{font-size:13px;font-weight:600;margin-bottom:9px}
.wherebox label{display:flex;gap:9px;align-items:flex-start;padding:7px 0;font-size:13px;cursor:pointer}
.wherebox input{margin-top:2px;flex:none}
.wherebox .ans{margin-top:9px;padding:11px 12px;border-radius:var(--r-sm);font-size:12.5px;line-height:1.6}
.wherebox .ans.ok{background:var(--green-50);border:1px solid var(--green-200)}
.wherebox .ans.careful{background:#FFF6DE;border:1px solid #F0DFAE}


/* ---- Settings rail ---------------------------------------------------------
   Sections down the left, the chosen one's contents on the right. The point of
   the rail is the count beside each name: where the setup is stuck reads from
   the page you land on, without opening anything. */
.settings{display:grid;grid-template-columns:246px minmax(0,1fr);gap:26px;align-items:start}

.setnav{display:flex;flex-direction:column;gap:1px;position:sticky;top:18px}
.setnav button{display:flex;align-items:center;gap:9px;width:100%;text-align:left;
  background:none;border:0;border-radius:var(--r-sm);padding:9px 11px;
  color:var(--text-2);font-weight:500;font-size:13.5px;line-height:1.35}
.setnav button:hover{background:var(--sunk);color:var(--text)}
.setnav button[aria-selected=true]{background:var(--green-50);color:var(--ink-800);font-weight:600;
  box-shadow:inset 2px 0 0 var(--green-500)}
.setnav button:focus-visible{outline:2px solid var(--green-500);outline-offset:1px}
.setnav .nm{flex:1;min-width:0}
/* Only sections that can actually finish carry one of these. */
.setnav .n{flex:none;font-family:var(--mono);font-size:11px;color:var(--text-3);
  font-variant-numeric:tabular-nums}
.setnav button[aria-selected=true] .n{color:var(--green-500)}
.setnav .n.ok{color:var(--green-500)}
.setnav .grp{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--text-3);
  padding:14px 11px 5px;font-weight:600}
.setnav .grp:first-child{padding-top:0}

.setpane{min-width:0}
.setpane .back{display:none}

/* Below the breakpoint there is no room for two columns, so it becomes one
   pane at a time — the same move the inbox already makes. */
@media (max-width:820px){
  .settings{grid-template-columns:minmax(0,1fr);gap:0}
  .settings[data-pane=nav] .setpane{display:none}
  .settings[data-pane=body] .setnav{display:none}
  .setnav{position:static}
  .settings[data-pane=body] .setpane .back{display:inline-flex;align-items:center;gap:6px;
    background:none;border:0;color:var(--text-2);font-weight:500;padding:0 0 12px;font-size:13px}
  .settings[data-pane=body] .setpane .back:hover{color:var(--text)}
}

/* One card per number: what is left to do, then everything about it folded
   underneath. Kept apart, the same number appeared twice on the page with
   other numbers in between, which read as four sections instead of two. */
.numcard{margin-bottom:14px}

/* A reporting card still stands on its own, so it keeps card padding. */

/* A finished section proves itself with one line. The six ticks are still
   there for anyone who wants to check or change a value, just not unfolded
   over half a screen every time the page opens. */
.donesteps>summary{display:flex;align-items:center;gap:12px;cursor:pointer;list-style:none}
.donesteps>summary::-webkit-details-marker{display:none}
.donesteps>summary .allset{flex:1}
.donesteps>summary .more{flex:none;font-size:12px;color:var(--text-3)}
.donesteps>summary:hover .more{color:var(--text)}
.donesteps[open]>summary .more::after{content:' ▴'}
.donesteps>summary .more::after{content:' ▾'}
.donesteps[open]>summary{margin-bottom:2px}

/* Connecting through Facebook. It sits above the steps it replaces, so it is
   given the weight of the thing to do and they are given the weight of the
   fallback — a panel rather than a button in a row of buttons. */
.fbconn{background:var(--green-50);border:1px solid var(--green-200);border-radius:var(--r-sm);
  padding:14px 16px;margin:12px 0 10px}
.fbconn p{margin:0 0 12px;font-size:12.5px;line-height:1.6;color:var(--text-2)}
.fbconn .act{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
/* The coexistence offer, under the button that assumes the number is free. */
.fbconn .also{margin:12px 0 0;font-size:12.5px;line-height:1.6;color:var(--text-2)}
.fbconn .act .res{font-size:12.5px;line-height:1.5;color:var(--text-2)}
.fbconn .act .res.err{color:var(--red)}
/* Facebook's own blue, because the button opens Facebook. Everything else on
   this page is ink green, and a seller should be able to tell at a glance that
   this one leaves for somewhere else. */
.btn.fb{background:#1877F2;border-color:#1877F2;color:#fff}
.btn.fb:hover:not(:disabled){background:#166FE5;border-color:#166FE5}
.btn.fb:disabled{opacity:.6}

/* A connection made through Facebook: a state and two buttons, not a
   checklist of things nobody did. */
.connpanel{background:var(--canvas);border:1px solid var(--line);border-radius:var(--r-sm);
  padding:14px 16px;margin:0 0 14px}
.connpanel .state{margin:0 0 4px;font-weight:600;color:var(--green-500);font-size:13px}
.connpanel .hint{font-size:12.5px;line-height:1.6;color:var(--text-2);margin:0 0 6px}
.connpanel .act{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:10px 0 8px}
.connpanel .act .res{font-size:12.5px;line-height:1.5;color:var(--text-2)}
.connpanel .act .res.err{color:var(--red)}
/* The ⋯ that opens it: square, so it reads as a handle rather than a third action. */
.listhead .iconly{padding:9px 11px;line-height:1}

/* The manual steps while the Facebook button is offered: still there, still
   complete, just not the first thing read. */
.donesteps.byhand>summary .allset{font-size:12.5px;color:var(--text-2)}

/* The registration PIN, kept on screen after the redraw that follows it. Meta
   asks for this PIN if the number is ever moved or re-registered, and it is
   the one value on this page that cannot be looked up again. */
.steps .help .keep{background:#FFF6DE;border:1px solid #F0DFAE;border-radius:var(--r-sm);
  padding:10px 12px;margin:0 0 10px;color:var(--ink-800, var(--text))}

/* What no step covers: the team's name for this number, how new chats are
   shared, and the two actions that apply to the whole number. */
.numfoot{margin-top:16px;padding-top:15px;border-top:1px solid var(--line)}
.numfoot .actions{align-items:center}
.numfoot .actions .hint{font-size:12px;color:var(--text-3)}
/* Releasing a number reaches outside this product, so it is a sentence that
   explains itself rather than a third button beside Remove. */
.numfoot .takeback{font-size:12px;line-height:1.65;color:var(--text-3);margin:12px 0 0;max-width:70ch}

/* Several numbers: which one is broken, in one screen. A card per number
   answers "what is wrong with this one" but buries "which one". */
.listhead{display:flex;align-items:center;gap:12px;margin-bottom:4px}
.listhead h2{margin:0;flex:1}
.numlist{margin-top:10px;border:1px solid var(--line);border-radius:var(--r-sm);overflow:hidden}
.numrow{display:flex;align-items:center;gap:14px;width:100%;padding:13px 15px;
  background:none;border:0;border-top:1px solid var(--line);text-align:left;font:inherit;color:inherit;cursor:pointer}
.numrow:first-child{border-top:0}
.numrow:hover{background:var(--canvas)}
.numrow .numwho{flex:1;min-width:0}
.numrow .numwho b{display:block;font-size:13.5px;font-weight:600}
/* Not `.sub`: that is the global page-subtitle class, and `section .sub`
   carries a 40px bottom margin that made every row three times too tall. */
.numrow .numsub{display:block;font-size:12px;color:var(--text-3);min-height:15px;
  margin:2px 0 0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.numrow .state{flex:none;display:flex;align-items:center;gap:10px}
.numrow .prog{font-size:12px;color:var(--text-3);font-variant-numeric:tabular-nums}
.numrow .prog.ok{color:var(--green-700, var(--teal-ink))}

/* The number belongs with the name — together they say which line this is —
   so it shares the top line, in the lighter, monospaced treatment it had below.
   Meta's verdict on the name takes the line under them: it is a sentence rather
   than an identifier, and a number sends perfectly well while its name is still
   being looked at, so it is a note and never a state of the number. */
.numrow .numwho b .nmph{font-weight:400;font-size:12.5px;color:var(--text-3);font-family:var(--mono)}
.numrow .numwho b .nmph i{font-style:normal;color:var(--line-strong, var(--line));padding:0 1px}
.numrow .numsub.warn,.setup .oncount.warn{color:var(--warn)}
.numrow .numsub.bad,.setup .oncount.bad{color:var(--danger)}

/* Connected, Pending and Error are read, not shouted: these are Meta's words
   for the most part, and Meta writes them the way anyone would. */
.numrow .status{text-transform:none;letter-spacing:0;font-size:11px;font-weight:600}
.numrow .go{flex:none;font-size:12.5px;color:var(--text-3)}
.numrow:hover .go{color:var(--text)}
/* Back out of one number to the list. Not `.back`: that name already belongs
   to the settings pane's mobile-only button, which is hidden on desktop. */
.backlink{display:inline-block;margin-bottom:12px;font-size:12.5px}
@media (max-width:640px){
  .numrow{flex-wrap:wrap;gap:8px}
  .numrow .numwho{flex:1 0 100%}
  .numrow .go{margin-left:auto}
}

/* Nothing connected yet. Says what a number is for before asking for one.
   Not `.empty`: that one paints its contents grey for empty lists. */
.numempty{text-align:center;padding:40px 24px}
/* `.card h2` is a flex row, which text-align cannot centre. */
.numempty h2{margin:0 0 8px;display:block}
.numempty p{max-width:52ch;margin:0 auto 20px;color:var(--text-2);font-size:13.5px;line-height:1.65}
/* The connect panel when it stands in for the button: the card is already
   centred, and a left-aligned block of prose inside it reads as a mistake. */
.numempty .fbconn{max-width:52ch;margin:0 auto;text-align:left}
.numempty .reconnect{max-width:52ch;margin:14px auto 0;font-size:12px;line-height:1.65;color:var(--text-3)}

/* ---------------------------------------------------------------- icons --- */
/* One sprite in the page, used as <svg class="i"><use href="#i-name"></use></svg>.
   Icons take the colour and size of the text they sit beside, so a button does
   not need its own icon rules — set font-size and colour as usual. */
.sprite{display:none}
.i{width:1.15em;height:1.15em;flex:none;fill:none;stroke:currentColor;
   stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;vertical-align:-.18em}
.i.sm{stroke-width:1.9}

/* Who is signed in, and the way out — at the foot of the settings rail, the
   last thing in the list, the way an account menu ends. It left the top bar
   because signing out is not a thing to be one stray click from all day. */
.railfoot{margin-top:auto;padding-top:14px}
.setnav .railfoot{border-top:1px solid var(--line);margin-top:18px}
.whoami{display:flex;align-items:center;gap:9px;padding:10px 12px 4px}
.whoami .av{width:28px;height:28px;font-size:12px;flex:none}
.whoami b{display:block;font-size:13px;color:var(--text)}
.whoami span span{font-size:11px;color:var(--text-3);text-transform:uppercase;letter-spacing:.06em}
/* `.setnav button` out-specifies a bare `.signout`, so this has to match the
   rail too or the one red thing in the list comes out the colour of the rest. */
.setnav .signout,.signout{display:flex;align-items:center;gap:10px;width:100%;padding:9px 12px;
  background:none;border:0;border-radius:var(--r-sm);text-align:left;box-shadow:none;
  font-size:13.5px;font-weight:500;color:var(--danger)}
.setnav .signout:hover,.signout:hover{background:var(--danger-bg);color:var(--danger)}

/* One line of context above a checklist, for the thing people ask before they
   start. Not a hint under the last field, where it is read too late. */
.setup .lede{margin:8px 0 0;font-size:13px;line-height:1.6;color:var(--text-2);
  background:var(--green-50);border:1px solid var(--green-200);
  border-radius:var(--r-sm);padding:10px 12px}

/* ------------------------------------------------------------ combobox --- */
/* Type to narrow, arrows to move, Enter to take. Used for currency; written to
   be used again — pass it rows of [value, label, extra search text]. */
.pickbox{position:relative;flex:none}
/* The chip: what is chosen, in one line, until it is being changed. */
.curchip{display:inline-flex;align-items:center;gap:7px;padding:5px 9px;
  background:var(--paper);border:1px solid var(--line-strong);border-radius:var(--r-pill);
  font-size:12.5px;font-weight:600;color:var(--text);white-space:nowrap}
.curchip:hover{border-color:var(--text-3);background:var(--canvas)}
.curchip .v{font-family:var(--mono);letter-spacing:.02em}
.curchip .cv{transform:rotate(90deg);color:var(--text-3)}
.pickbox.open .curchip{border-color:var(--green-500);box-shadow:0 0 0 3px rgba(42,125,96,.14)}
.pickpanel{display:none;position:absolute;z-index:40;right:0;top:calc(100% + 5px);width:320px;
  padding:6px;background:var(--paper);border:1px solid var(--line-strong);
  border-radius:var(--r-ctl);box-shadow:var(--e2)}
.pickbox.open .pickpanel{display:block}
/* What the setting is, above the search. The chip has room for a value and
   nothing else, so this is the only place the reason can live. */
.picknote{margin:2px 4px 8px;font-size:12px;line-height:1.55;color:var(--text-2)}
.picksearch{width:100%;padding:7px 9px;font-size:13px;margin-bottom:4px;
  border:1px solid var(--line);border-radius:var(--r-sm);background:var(--sunk);color:var(--text)}
.picksearch:focus{outline:none;border-color:var(--green-500);background:var(--paper)}
.pickmenu{margin:0;padding:0;list-style:none;max-height:232px;overflow:auto}
.pickmenu li{display:flex;gap:10px;align-items:baseline;padding:7px 9px;border-radius:var(--r-sm);
  font-size:13px;cursor:pointer}
.pickmenu li b{font-family:var(--mono);font-size:12px;flex:none;width:3.4em;color:var(--text)}
.pickmenu li span{color:var(--text-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pickmenu li[aria-selected=true]{background:var(--green-50)}
@media (max-width:640px){ .pickpanel{width:min(320px,84vw)} }
.pickmenu li.none{color:var(--text-3);cursor:default}

/* What went wrong, then what to do about it. The second line is the one that
   gets somebody unstuck; Meta's own wording rarely does. */
.steps .act .res b{display:block;font-weight:600}
.steps .act .res .tip{display:block;margin-top:3px;font-weight:400;color:var(--text-2);line-height:1.55}
.steps .act{align-items:flex-start}
.steps .act .res{flex:1;min-width:0}

/* How many of the account's numbers are in use, beside the button that adds
   one. A limit nobody can see is a limit that arrives as a surprise. */
.listhead .used{font-size:12px;color:var(--text-3);font-variant-numeric:tabular-nums}
.card .foot{font-size:12px;color:var(--text-3);line-height:1.6;margin:12px 0 0}
.card .foot.warn{color:var(--warn);background:var(--warn-bg);border:1px solid var(--warn-line);
  border-radius:var(--r-sm);padding:9px 11px}

/* The header's right-hand slot, for a setting that belongs to the card rather
   than to any one of its steps. */
.setup .sum{flex-wrap:wrap}
.setup .sum .pickbox{margin-left:auto}

/* --- Choosing a number ----------------------------------------------------
   Meta knows which numbers are on the account, so the step shows them rather
   than asking anyone to find a Phone Number ID and copy it correctly. */
.numpick{margin:12px 0 4px}
.numroom{margin:0 0 10px;font-size:13px;line-height:1.6;color:var(--text-2)}
.numroom b{color:var(--text);font-weight:600}
.numroom .hint{display:block;font-size:12.5px;color:var(--text-2)}

.numopt{display:grid;grid-template-columns:auto 1fr;gap:2px 10px;align-items:baseline;
  padding:10px 12px;border:1px solid var(--line);border-radius:10px;margin-bottom:8px;
  background:var(--paper);cursor:pointer}
.numopt:hover{border-color:var(--line-strong)}
.numopt input{grid-row:1 / span 2;align-self:center;margin:0}
.numopt-t{font-weight:600;font-size:14px}
.numopt-d{font-size:12.5px;color:var(--text-2)}
/* A number already connected here stays visible — knowing it is taken, and by
   what, is the answer to "why can I not pick it" — but cannot be chosen. */
.numopt.off{opacity:.6;cursor:default}
.numopt.off:hover{border-color:var(--line)}
.numopt:has(input:checked){border-color:var(--ok);box-shadow:0 0 0 3px var(--ok-bg)}

.numopt-d .ok{color:var(--ok)}
.numopt-d .warn{color:var(--warn)}
.numopt-d .bad{color:var(--danger)}

.numadd{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:10px 0 2px}
.numadd .warn{flex:1 0 100%;margin:0;font-size:12.5px;color:var(--warn)}

/* Adding or verifying a number, under the option it belongs to: what the step
   asks for depends on which option is chosen, and showing it there is easier
   than explaining it. */
.numopt.numnew{border-style:dashed}
.numform{margin:2px 0 10px;padding:14px;border:1px solid var(--line);border-radius:10px;background:var(--canvas)}
.numform .fl{display:block;margin-bottom:10px}
.numform .fl span{display:block;font-size:12px;font-weight:600;color:var(--text-2);margin-bottom:4px}
.numform .fl input{width:100%}
.numform .hint{margin:-4px 0 10px;font-size:12.5px;line-height:1.55;color:var(--text-2)}
.numphone{display:flex;gap:10px;align-items:flex-start}
.numsent{margin:0 0 12px;font-size:13.5px;line-height:1.6;color:var(--text)}
.numbtns{display:flex;align-items:center;gap:14px;flex-wrap:wrap}

/* The red only exists as `.steps .act .res.err`, and this result line sits in
   the form rather than in a step's action row — so a failure read as ordinary
   text until it was given the same colour. */
.numform .res{display:block;margin-top:10px;font-size:12.5px;line-height:1.5}
.numform .res.err{color:var(--danger)}
.numform .res.ok{color:var(--ok)}

/* `.tip` is a gold callout box in index.html's own stylesheet. Inside a step's
   result line it is the second sentence of a failure, not a box — the same
   shape the checklist's own errors use. */
.numform .res .tip{display:block;margin-top:3px;font-weight:400;font-size:12.5px;
  color:var(--text-2);line-height:1.55;background:none;border:0;padding:0;border-radius:0}

/* ------------------------------------------------------- the mark (Orbit) ---
   The open ring is the loop — a chat leaves the ad, comes to you, the event
   goes back — and the point is the lime signal that exits through the gap.
   Ring colour follows `color`; the point is lime on ink, lime-600 on white
   (set --ws-point), and never lime on white. Set data-state from JS: "in"
   draws it once, "load" draws then works, "working" breathes with a signal
   travelling the loop, "done" pops once, "incoming" pings. Remove to stop. */
.ws-mark{display:block;flex:0 0 auto;width:24px;height:24px;color:#fff;--ws-point:var(--lime)}
.ws-mark .ring{stroke-dasharray:100 100}
.ws-mark .trav{stroke-dasharray:12 88;opacity:0}
.ws-mark .point{fill:var(--ws-point);transform-box:fill-box;transform-origin:center;transform:rotate(45deg)}
.ws-mark.light{color:var(--ink-800);--ws-point:var(--lime-600)}
@keyframes ws-draw{from{stroke-dashoffset:100}to{stroke-dashoffset:0}}
@keyframes ws-dim{to{opacity:.4}}
@keyframes ws-appear{from{opacity:0}to{opacity:1}}
@keyframes ws-travel{from{stroke-dashoffset:100}to{stroke-dashoffset:0}}
@keyframes ws-land{0%{transform:rotate(45deg) scale(0)}60%{transform:rotate(45deg) scale(1.18)}80%{transform:rotate(45deg) scale(.94)}100%{transform:rotate(45deg) scale(1)}}
@keyframes ws-breathe{0%,100%{transform:rotate(45deg) scale(1)}50%{transform:rotate(45deg) scale(.78)}}
@keyframes ws-pop{0%{transform:rotate(45deg) scale(1)}40%{transform:rotate(45deg) scale(1.32)}100%{transform:rotate(45deg) scale(1)}}
@keyframes ws-ping{0%,100%{transform:rotate(45deg) scale(1)}50%{transform:rotate(45deg) scale(1.3)}}
@keyframes ws-fadeup{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:no-preference){
  .ws-mark[data-state="in"] .ring{animation:ws-draw .7s cubic-bezier(.2,.7,.2,1) both}
  .ws-mark[data-state="in"] .point{animation:ws-land .55s cubic-bezier(.34,1.56,.64,1) .45s both}
  .ws-mark[data-state="load"] .ring{animation:ws-draw .7s cubic-bezier(.2,.7,.2,1) both,ws-dim .4s ease 1.1s both}
  .ws-mark[data-state="load"] .trav{animation:ws-travel 1.6s linear 1.1s infinite,ws-appear .3s ease 1.1s both}
  .ws-mark[data-state="load"] .point{animation:ws-land .55s cubic-bezier(.34,1.56,.64,1) .45s both,ws-breathe 1.6s ease-in-out 1.1s infinite}
  .ws-mark[data-state="working"] .ring{opacity:.4}
  .ws-mark[data-state="working"] .trav{animation:ws-travel 1.6s linear infinite,ws-appear .3s ease both}
  .ws-mark[data-state="working"] .point{animation:ws-breathe 1.6s ease-in-out infinite}
  .ws-mark[data-state="done"] .point{animation:ws-pop .5s cubic-bezier(.34,1.56,.64,1)}
  .ws-mark[data-state="incoming"] .point{animation:ws-ping 1s ease-in-out infinite}
}
@media (prefers-reduced-motion:reduce){.ws-mark[data-state="load"] .ring,.ws-mark[data-state="working"] .ring{opacity:.4}}
/* Where the lockup sits. */
.brand .ws-mark{width:22px;height:22px}
.top .brand .ws-mark{color:#fff;--ws-point:var(--lime)}
.login h1 .ws-mark{width:24px;height:24px;color:var(--ink-800);--ws-point:var(--lime-600)}
.site-head .brand .ws-mark{width:26px;height:26px;color:var(--ink-800);--ws-point:var(--lime-600)}
/* First open of the app: the mark draws in on ink, the wordmark follows, and
   the inbox is underneath by the time it has landed. */
.splash{position:fixed;inset:0;z-index:50;display:grid;place-items:center;background:var(--ink-900);color:#fff}
.splash .in{display:flex;flex-direction:column;align-items:center;gap:16px}
.splash .ws-mark{width:72px;height:72px}
.splash .word{font-size:20px;font-weight:700;letter-spacing:-.02em;animation:ws-fadeup .5s ease .7s both}
.splash.out{transition:opacity .25s;opacity:0;pointer-events:none}
/* The Send button carries the mark: it works while the message is on its way
   and pops when it has gone. */
#send .ws-mark{width:16px;height:16px;color:rgba(255,255,255,.9);--ws-point:var(--lime)}

/* ============================================================== AI Agent ===
   The add-on's screens: Settings → AI Agent, the knowledge base drawer, the
   Generate modal, the AI pieces in the inbox and the pack card in billing.
   Lime marks what the AI did; amber marks what needs a person. Amber is its
   own set of tokens because --gold is already an alias for lime-600 above. */
:root{
  --amber:#C99A1A; --amber-ink:#73560A; --amber-bg:#FBF4DD; --amber-line:#EBD58E;
}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* The AI mark: a small lime diamond, always beside the letters "AI" so the tag
   never depends on colour alone. */
.dia{display:inline-block;width:7px;height:7px;border-radius:1px;background:var(--lime-600);
     transform:rotate(45deg);flex:none}
.aitag{display:inline-flex;align-items:center;gap:5px;font-size:10px;font-weight:700;letter-spacing:.05em;
       text-transform:uppercase;padding:1px 6px;border-radius:5px;border:1px solid var(--lime-600);
       background:var(--lime-50);color:var(--lime-ink);white-space:nowrap;line-height:1.5}
.aitag .dia{width:5px;height:5px}
.needtag{display:inline-flex;align-items:center;font-size:10px;font-weight:700;padding:1px 6px;border-radius:5px;
         border:1px solid var(--amber-line);background:var(--amber-bg);color:var(--amber-ink);white-space:nowrap;line-height:1.5}
.pill.ok{background:var(--green-100);color:var(--ink-600)}
.pill.warn{background:var(--amber-bg);color:var(--amber-ink)}
.pill.err{background:var(--danger-bg);color:var(--danger)}
.btn.aib .dia{background:var(--lime)}
.btn.ghost.aib .dia,.btn.quiet.aib .dia{background:var(--lime-600)}

/* rail count for Unanswered */
.setnav .n.cnt{min-width:19px;height:19px;border-radius:var(--r-pill);background:var(--ink-800);color:#fff;
  display:inline-grid;place-items:center;padding:0 6px;font-family:var(--sans);font-weight:700;font-size:11px}

/* page head inside a settings pane */
.aihead{display:flex;align-items:flex-start;gap:14px;flex-wrap:wrap;margin-bottom:14px}
.aihead>div:first-child{flex:1 1 320px;min-width:0}
.aihead h2{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:22px;margin:0 0 4px}
.aihead .desc{margin:0;color:var(--text-2);max-width:62ch}
.aihead .actions{margin-top:0}

/* Agent page: settings on the left, Try it on the right; stacked below 1180. */
.aipage{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:18px;align-items:start}
.aimain{display:flex;flex-direction:column;gap:14px;min-width:0}
.aimain .card h3,.aicard h3{font-size:15px;margin:0 0 12px}
.aicard .top3{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;justify-content:space-between}
.aicard .top3 h3{margin-bottom:10px}
.aicard .aside{font-size:12px;color:var(--text-3)}
.aicard .help{font-size:12.5px;color:var(--text-2);margin:10px 0 0}
.aicard.warn{border-color:var(--amber-line)}
.aicard.err{border-color:var(--danger-line)}
.aigrid2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.aigrid2>.card{margin:0}

/* a segmented control: a sunk track with the chosen one lifted out of it */
.segtrack{display:flex;gap:3px;padding:3px;border-radius:var(--r-ctl);background:var(--sunk);max-width:540px}
.segtrack button{flex:1 1 0;min-height:40px;border:0;border-radius:8px;background:none;color:var(--text-2);
  font-weight:500;font-size:13px;padding:6px 10px;line-height:1.25;display:flex;flex-direction:column;
  align-items:center;justify-content:center;transition:background .14s,color .14s}
.segtrack button:hover{color:var(--text)}
.segtrack button[aria-checked=true]{background:var(--paper);color:var(--text);font-weight:600;box-shadow:var(--e1)}
.segtrack button small{font-size:10.5px;font-weight:600;color:var(--lime-ink)}
.segtrack.sm button{min-height:32px;font-size:12px;padding:4px 10px}
.segtrack[aria-disabled=true]{opacity:.55;pointer-events:none}

/* the meter: green, amber at 80%, red when it is used up */
.meter{height:7px;border-radius:4px;background:var(--sunk);overflow:hidden;margin:4px 0 8px}
.meter i{display:block;height:100%;border-radius:4px;background:var(--green-500);transition:width .3s}
.meter.warning i{background:var(--amber)}
.meter.exhausted i{background:var(--danger)}
.meterline{font-size:13px;color:var(--text-2);margin:0}
.meterline b{font-family:var(--mono);font-weight:500;color:var(--text)}
.aistats{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-top:14px}
.aistats>div{background:var(--canvas);border-radius:var(--r-sm);padding:11px 12px}
.aistats b{display:block;white-space:nowrap;font-family:var(--mono);font-size:18px;font-weight:500;color:var(--ink-800)}
.aistats span{font-size:12px;color:var(--text-3);line-height:1.35;display:block;margin-top:2px}
.aibanner{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:10px 13px;border-radius:var(--r-sm);
  font-size:13px;margin-top:12px;border:1px solid}
.aibanner span{flex:1 1 240px}
.aibanner.warn{background:var(--amber-bg);border-color:var(--amber-line);color:var(--amber-ink)}
.aibanner.err{background:var(--danger-bg);border-color:var(--danger-line);color:var(--danger)}
.btn.redb{background:var(--danger);color:#fff}
.btn.redb:hover{background:#97291F;color:#fff}

/* checkbox and radio rows */
.optrow{display:flex;align-items:center;gap:11px;min-height:42px;padding:6px 0;font-size:14px;cursor:pointer}
.optrow+.optrow{border-top:1px solid var(--line)}
.optlist.radios .optrow{border:0}
.optrow input{width:18px;height:18px;margin:0;accent-color:var(--green-500);flex:none}
.optrow .k{color:var(--text-3)}
.optrow input:disabled+span{color:var(--text-3)}

/* a switch row: a sentence and its switch */
.swrow{display:flex;align-items:center;gap:12px;min-height:44px;padding:6px 0;border-top:1px solid var(--line);font-size:14px}
.swrow:first-of-type{border-top:0}
.swrow .grow{flex:1;min-width:0}
.swrow .grow small{display:block;font-size:12.5px;color:var(--text-2)}
.swrow .lock{display:inline-flex;align-items:center;gap:4px;font-size:11.5px;color:var(--text-3);white-space:nowrap}
.swrow .lock .i{width:12px;height:12px}
.switch input:disabled{opacity:.55;cursor:default}
.switch input:focus-visible{outline:2px solid var(--green-500);outline-offset:2px}

/* chips typed into a box: keywords, other phrasings */
.chipin{display:flex;flex-wrap:wrap;gap:6px;align-items:center;padding:6px 8px;min-height:44px;
  border:1px solid var(--line-strong);border-radius:var(--r-ctl);background:var(--paper);cursor:text}
.chipin:focus-within{border-color:var(--green-500);box-shadow:0 0 0 3px rgba(42,125,96,.14)}
.chipin .tok{display:inline-flex;align-items:center;gap:4px;background:var(--sunk);border-radius:var(--r-pill);
  padding:3px 4px 3px 10px;font-size:13px}
.chipin .tok button{border:0;background:none;color:var(--text-3);width:22px;height:22px;border-radius:50%;
  display:grid;place-items:center;font-size:14px;line-height:1;padding:0}
.chipin .tok button:hover{background:var(--line);color:var(--text)}
.chipin input{flex:1 1 140px;min-width:120px;border:0!important;outline:none;box-shadow:none!important;padding:5px 4px!important;background:none}

.sample{background:var(--lime-50);border:1px solid #E3EFC2;border-radius:var(--r-ctl);padding:10px 13px;
  font-size:14px;max-width:520px;margin:4px 0 0}
.fieldlbl{display:block;font-size:13px;font-weight:600;margin-bottom:6px}
.fieldlbl span{font-weight:400;color:var(--text-3)}
.aimain input[type=text],.aimain select,.aidr input[type=text],.aidr select,.aidr textarea,.genm input[type=text],
.genm input[type=url],.genm textarea,.tryform input{width:100%;border:1px solid var(--line-strong);border-radius:var(--r-ctl);
  padding:10px 12px;background:var(--paper);color:var(--text);font-size:14px;min-height:42px}
.aimain input[type=text],.aimain select{max-width:420px}
.aimain input:focus,.aimain select:focus,.aidr input:focus,.aidr select:focus,.aidr textarea:focus,.genm input:focus,
.genm textarea:focus,.tryform input:focus{outline:none;border-color:var(--green-500);box-shadow:0 0 0 3px rgba(42,125,96,.14)}
[aria-invalid=true]{border-color:var(--danger)!important}
.ferr{display:block;font-size:12px;color:var(--danger);margin-top:5px}
.ferr[hidden],.aidr [hidden],.genm [hidden]{display:none}

/* first-time checklist */
.aisetup{background:var(--green-50);border-color:var(--green-200)}
.aisetup ol{list-style:none;margin:12px 0 0;padding:0}
.aisetup li{display:flex;gap:12px;align-items:center;padding:12px 0;border-top:1px solid var(--green-200);flex-wrap:wrap}
.aisetup .num{width:26px;height:26px;border-radius:50%;border:1px solid var(--line-strong);background:var(--paper);
  display:grid;place-items:center;font-size:12px;font-weight:600;flex:none}
.aisetup li.done .num{background:var(--green-500);border-color:var(--green-500);color:#fff}
.aisetup .grow{flex:1 1 220px;min-width:0}
.aisetup .grow b{display:block}
.aisetup .grow span{font-size:13px;color:var(--text-2)}
.aisetup li.done .grow b{color:var(--text-3)}

/* Try it */
.trycard{padding:0;display:flex;flex-direction:column;position:sticky;top:18px;max-height:calc(100dvh - 36px)}
.trycard .tryhead{padding:16px;border-bottom:1px solid var(--line)}
.trycard .tryhead h3{margin:0 0 3px}
.trycard .tryhead p{margin:0;font-size:12.5px;color:var(--text-2)}
.trybody{flex:1;overflow:auto;padding:14px 16px;display:flex;flex-direction:column;gap:8px;min-height:180px;background:var(--canvas)}
.trybody .k{font-size:12px;color:var(--text-3)}
.trybody .sugg{display:flex;flex-direction:column;align-items:flex-start;gap:7px}
.trybody .sugg .chip{text-align:left;min-height:34px}
.tb{max-width:88%;padding:8px 11px;border-radius:12px;font-size:13.5px;white-space:pre-wrap;word-break:break-word;box-shadow:var(--e1)}
.tb.cust{background:var(--paper);border-bottom-left-radius:4px;align-self:flex-start}
.tb.agent{background:var(--lime-50);border:1px solid #E3EFC2;border-bottom-right-radius:4px;align-self:flex-end}
.tb .srcs{margin-top:6px}
.tb.pend{color:var(--text-3)}
.hand{align-self:stretch;background:var(--amber-bg);border:1px solid var(--amber-line);color:var(--amber-ink);
  border-radius:var(--r-sm);padding:9px 11px;font-size:13px}
.hand .btn{margin-top:8px}
.whynot{font-size:12px;color:var(--text-3);align-self:flex-end;text-align:right;max-width:88%}
.tryform{display:flex;gap:8px;padding:12px 12px 0;border-top:1px solid var(--line)}
.tryform input{flex:1;min-width:0}
.trynote{font-size:12px;color:var(--text-2);margin:8px 14px 14px}
.srcs{display:flex;gap:6px;flex-wrap:wrap;align-items:center;font-size:12px;color:var(--text-3)}
.src{display:inline-flex;align-items:center;border:1px solid var(--green-200);background:var(--paper);color:var(--ink-600);
  border-radius:var(--r-pill);padding:2px 9px;font-size:12px;font-weight:500}

/* view only / failed to load */
.aimsg{max-width:560px;margin:24px auto;text-align:center;display:flex;flex-direction:column;align-items:center;gap:8px}
.aimsg p{margin:0;color:var(--text-2);font-size:14px}
.aimsg .mark{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;font-weight:700;font-size:18px;
  background:var(--danger-bg);color:var(--danger)}

/* Knowledge base */
.health{display:block;line-height:1.7;padding:11px 14px;border-radius:var(--r-ctl);
  border:1px solid var(--green-200);background:var(--green-50);font-size:13px;margin-bottom:12px}
.health.gap{border-color:var(--amber-line);background:var(--amber-bg);color:var(--amber-ink)}
.health b{font-family:var(--mono);font-weight:500}
.health .linkbtn{font-size:13px}
.kbbar{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:10px}
.kbbar .sbox2{flex:1 1 260px;position:relative}
.kbbar input,.kbbar select{width:100%;min-height:42px;border:1px solid var(--line-strong);border-radius:var(--r-ctl);
  padding:9px 12px;background:var(--paper);font-size:14px}
.kbbar select{flex:0 0 150px;width:150px}
.kbbar input:focus,.kbbar select:focus{outline:none;border-color:var(--green-500);box-shadow:0 0 0 3px rgba(42,125,96,.14)}
.catchips{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:12px}
.catchips .chip{display:inline-flex;align-items:center;gap:6px;min-height:34px;padding:5px 12px}
.catchips .chip .mono{font-size:11px;opacity:.8}
.kblist{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-card);box-shadow:var(--e1);overflow:hidden}
.kbrow{display:flex;gap:12px;align-items:center;padding:14px 16px;border-top:1px solid var(--line)}
.kbrow:first-child{border-top:0}
.kbrow .kbic{width:30px;height:30px;border-radius:8px;background:var(--canvas);display:grid;place-items:center;flex:none;
  align-self:flex-start;color:var(--ink-700)}
.kbrow .kbic .i{width:16px;height:16px}
.kbrow .grow{flex:1;min-width:0}
.kbq{display:block;border:0;background:none;padding:0;text-align:left;font-weight:600;font-size:14px;color:var(--text);
  max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
button.kbq:hover{text-decoration:underline;text-underline-offset:2px}
.kbrow .ans{display:block;font-size:13px;color:var(--text-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kbmeta{display:flex;gap:9px;align-items:center;flex-wrap:wrap;margin-top:5px;font-size:12px;color:var(--text-3)}
.catchip{background:var(--sunk);color:var(--text-2);border-radius:5px;padding:1px 7px;font-weight:600;font-size:11.5px}
.kbrow.off .grow{opacity:.6}
.kbrow .switch{flex:none}
.kbmore{flex:none;width:40px;height:40px;border:0;border-radius:8px;background:none;color:var(--text-2);font-size:18px;line-height:1}
.kbmore:hover{background:var(--sunk)}
.skrow{display:flex;gap:12px;padding:16px}
.skrow .skel{padding:0;flex:1}
.menupop{position:fixed;z-index:85;min-width:170px;background:var(--paper);border:1px solid var(--line);border-radius:12px;
  box-shadow:var(--e3);padding:5px;display:flex;flex-direction:column}
.menupop button{border:0;background:none;text-align:left;padding:9px 12px;border-radius:8px;font-size:13.5px;min-height:40px;color:var(--text)}
.menupop button:hover,.menupop button:focus-visible{background:var(--sunk)}
.menupop button.danger{color:var(--danger)}
.menupop button:disabled{color:var(--text-3)}
.aiempty{text-align:center;padding:40px 24px}
.aiempty h3{font-size:17px;margin:0 0 6px}
.aiempty p{color:var(--text-2);max-width:52ch;margin:0 auto 16px;font-size:14px}
.aiempty .actions{justify-content:center}

/* Drawer (add / edit an entry) and the modals: one shell, ask()'s backdrop. */
.ovl{position:fixed;inset:0;z-index:70;background:rgba(10,31,25,.42);animation:askin .12s ease-out}
.aidr{position:absolute;top:0;right:0;bottom:0;width:min(540px,100%);background:var(--paper);box-shadow:var(--e3);
  display:flex;flex-direction:column}
.mhead{display:flex;align-items:center;gap:10px;padding:14px 18px;border-bottom:1px solid var(--line)}
.mhead h2{margin:0;font-size:17px;flex:1;display:flex;align-items:center;gap:8px;min-width:0}
.mx{flex:none;width:40px;height:40px;border:0;border-radius:8px;background:none;color:var(--text-2);display:grid;place-items:center}
.mx:hover{background:var(--sunk);color:var(--text)}
.mbody{flex:1;overflow:auto;padding:18px}
.mfoot{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:12px 18px;border-top:1px solid var(--line)}
.mfoot .note{flex:1 1 200px;font-size:12.5px;color:var(--text-2)}
.mfoot .result{flex:1 1 100%;margin:0}
.aidr .fld{margin-bottom:16px}
.aidr .fld small{display:block;font-size:12.5px;color:var(--text-3);margin:-3px 0 6px}
.aidr textarea{min-height:110px;resize:vertical;line-height:1.55}
.catrow{display:flex;gap:12px;align-items:center}
.catrow select{flex:1}
.catrow .switch{font-size:13.5px;font-weight:600;color:var(--text)}
.diff{border:1px solid var(--line);border-radius:var(--r-ctl);overflow:hidden;margin-top:10px}
.diff>div{padding:10px 12px;font-size:13.5px}
.diff .bf{background:var(--danger-bg)}
.diff .bf p{text-decoration:line-through;color:var(--text-2);margin:0}
.diff .af{background:var(--green-50);border-top:1px solid var(--line)}
.diff .af p{margin:0}
.diff .lbl{display:block;font-size:10.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;margin-bottom:3px}
.diff .bf .lbl{color:var(--danger)} .diff .af .lbl{color:var(--ink-600)}
.diff .dact{display:flex;justify-content:flex-end;gap:8px;background:var(--paper);border-top:1px solid var(--line)}
.preview{background:var(--canvas);border:1px solid var(--line);border-radius:var(--r-ctl);padding:12px 14px;
  display:flex;flex-direction:column;gap:8px}
.preview .k{font-size:12.5px;font-weight:600;color:var(--text-2)}
.preview .tb.ph{color:var(--text-3);font-style:italic}

.genwrap{display:grid;place-items:center;padding:24px;height:100%}
.genm{background:var(--paper);border-radius:var(--r-card);box-shadow:var(--e3);width:min(900px,100%);
  max-height:calc(100dvh - 48px);display:flex;flex-direction:column}
.genm.small{width:min(460px,100%)}
.genm .mhead{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:10px}
.genm.small .mhead{grid-template-columns:minmax(0,1fr) auto}
.stepper{display:flex;gap:4px;list-style:none;margin:0;padding:0;font-size:12.5px;flex-wrap:wrap}
.stepper li{padding:4px 9px;border-radius:var(--r-pill);color:var(--text-3)}
.stepper li.past{color:var(--ink-600)}
.stepper li[aria-current=step]{background:var(--green-100);color:var(--ink-600);font-weight:600}
.srccards{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:14px 0 18px}
.srccard{text-align:left;border:1px solid var(--line-strong);border-radius:var(--r-ctl);background:var(--paper);padding:13px 15px;min-height:44px}
.srccard b{display:block;font-size:14px;margin-bottom:3px}
.srccard span{font-size:12.5px;color:var(--text-2)}
.srccard[aria-checked=true]{border-color:var(--green-500);box-shadow:0 0 0 1px var(--green-500) inset;background:var(--green-50)}
.gfields{display:grid;grid-template-columns:1fr 1fr;gap:12px 16px}
.docrows{list-style:none;margin:0 0 10px;padding:0;display:grid;gap:6px}
.docrows li{display:grid;grid-template-columns:auto 1fr auto auto;align-items:center;gap:6px 10px;border:1px solid var(--line);border-radius:var(--r-ctl);padding:8px 12px;font-size:13px;background:var(--paper)}
.docrows li .i{width:16px;height:16px;color:var(--text-2)}
.docrows li.ready .i{color:var(--green-500)}
.docrows li.bad .i,.docrows li.bad .ds{color:var(--red)}
.docrows li.uploading .ds,.docrows li.reading .ds{color:var(--text-2);font-style:italic}
.docbar{grid-column:1/-1;display:block;height:4px;border-radius:2px;background:var(--line);overflow:hidden}
.docbar i{display:block;height:100%;background:var(--green-500);transition:width .2s}
.docrows li.reading .docbar i{animation:docpulse 1.2s ease-in-out infinite}
@keyframes docpulse{0%,100%{opacity:1}50%{opacity:.35}}
.docready{display:flex;align-items:center;gap:8px;margin:0 0 10px;font-size:13px;color:var(--green-700,var(--green-500))}
.docready .i{width:16px;height:16px;color:var(--green-500);flex:none}
.dropzone{display:flex;flex-direction:column;align-items:center;gap:8px;padding:22px 16px;border:1.5px dashed var(--line-strong);border-radius:var(--r-card);text-align:center;font-size:13px;color:var(--text-2);background:var(--paper);transition:border-color .14s,background .14s}
.dropzone .i{width:24px;height:24px;color:var(--text-3)}
.dropzone.over{border-color:var(--green-500);background:var(--green-50)}
.docrows .dn{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.docrows .ds{color:var(--text-2);white-space:nowrap}
.gfields label>span,.genm .lbl2{display:block;font-size:13px;font-weight:600;margin-bottom:5px}
.genm textarea{resize:vertical;line-height:1.55;font-size:13.5px}
.gfields textarea{height:64px}
.ghint{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:space-between;font-size:13px;color:var(--text-2);margin-bottom:10px}
.genm .muted{font-size:12.5px;color:var(--text-2)}
.genm h3{font-size:17px;margin:0 0 4px}
.prog{max-width:480px;margin:28px auto}
.prog ol{list-style:none;padding:0;margin:18px 0}
.prog li{display:flex;align-items:center;gap:10px;padding:6px 0;color:var(--text-3)}
.prog li .dot{width:20px;height:20px;border-radius:50%;border:1.5px solid var(--line-strong);display:grid;place-items:center;
  font-size:11px;flex:none}
.prog li.cur{color:var(--text)} .prog li.cur .dot{border-color:var(--green-500)}
.prog li.done{color:var(--text)} .prog li.done .dot{background:var(--green-500);border-color:var(--green-500);color:#fff}
.prog li .k{font-size:12px;color:var(--text-3)}
.revbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:10px 18px;border-bottom:1px solid var(--line);font-size:13px}
.revbar .cnt{flex:1 1 220px}
.revbar .cnt .w{color:var(--amber-ink)} .revbar .cnt .c{color:var(--danger)}
.revgrp h4{display:flex;gap:8px;font-size:11.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--text-2);
  margin:16px 0 0;padding-bottom:7px;border-bottom:1px solid var(--line)}
.revgrp:first-child h4{margin-top:0}
.revit{display:grid;grid-template-columns:28px minmax(0,1fr);gap:4px 8px;padding:12px 0;border-bottom:1px solid var(--line)}
.revit>input{width:18px;height:18px;margin:11px 0 0;accent-color:var(--green-500)}
.revit.skip .rq,.revit.skip textarea{opacity:.5}
.revit .rq{font-weight:600;border-color:transparent!important;padding-left:6px!important;min-height:36px!important}
.revit .rq:hover{border-color:var(--line-strong)!important}
.revit textarea{min-height:60px;border-color:transparent;padding:6px}
.revit textarea:hover{border-color:var(--line-strong)}
.revit .tags{display:flex;gap:8px;align-items:center;font-size:12px;color:var(--text-3);padding-left:6px}
.cpill{font-size:11px;font-weight:600;border-radius:var(--r-pill);padding:2px 9px;border:1px solid}
.cpill.based{background:var(--green-50);border-color:var(--green-200);color:var(--ink-600)}
.cpill.guessed{background:var(--amber-bg);border-color:var(--amber-line);color:var(--amber-ink)}
.conflict{grid-column:2;background:var(--danger-bg);border:1px solid var(--danger-line);border-radius:var(--r-sm);
  padding:10px 12px;font-size:13px;color:var(--danger);margin-top:4px}
.conflict b{font-weight:700}
.conflict .segtrack{background:var(--paper);margin-top:8px;max-width:330px}
.conflict .segtrack button[aria-checked=true]{background:var(--ink-800);color:#fff}
.gdone{text-align:center;padding:24px 8px}
.gdone .big{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;margin:0 auto 12px;font-size:22px;
  font-weight:700;background:var(--green-500);color:#fff}
.gdone.bad .big{background:var(--danger-bg);color:var(--danger)}
.gdone p{color:var(--text-2);max-width:52ch;margin:0 auto 14px}
.gdone .catchips{justify-content:center}
.gdone .catchips>span{border:1px solid var(--line);border-radius:var(--r-pill);padding:4px 11px;font-size:12.5px}
.dl3{display:grid;grid-template-columns:auto 1fr;gap:8px 16px;margin:0 0 14px;padding:14px;border:1px solid var(--line);
  border-radius:var(--r-ctl);font-size:14px}
.dl3 dt{color:var(--text-3)} .dl3 dd{margin:0;font-weight:600}

/* Unanswered */
.uq{display:flex;flex-direction:column;gap:12px}
.uqtop{display:flex;gap:14px;align-items:flex-start;flex-wrap:wrap}
.uqtop>div:first-child{flex:1 1 280px;min-width:0}
.uqtop h3{display:flex;gap:8px;align-items:center;flex-wrap:wrap;font-size:15.5px;margin:0 0 6px}
.xcount{font-family:var(--mono);font-size:11.5px;background:var(--sunk);border-radius:var(--r-pill);padding:1px 8px;font-weight:500;color:var(--text-2)}
.uqtop q{display:block;font-size:13px;color:var(--text-2);quotes:'"' '"'}
.uqtop .last{font-size:12.5px;color:var(--text-3);margin-top:6px}
.uqtop .last .linkbtn{font-size:12.5px}
.uqtop .actions{margin-top:0}
.aisugg{margin-top:12px;background:var(--lime-50);border:1px solid #DDEBB4;border-radius:var(--r-ctl);padding:12px 14px}
.aisugg .tags{display:flex;gap:6px;margin-bottom:6px}
.aisugg p{margin:0 0 8px;font-size:14px;white-space:pre-wrap}
.aisugg .actions{justify-content:flex-end}
.aisugg.none{background:var(--canvas);border-color:var(--line)}

/* Billing add-on */
.aibill .kvline{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:11px 0;border-top:1px solid var(--line);font-size:13.5px}
.aibill .kvline span:last-child{color:var(--text-2)}
.aibill .plancard .price{font-family:var(--mono);font-weight:500}
.aibill .plancard.here{background:var(--green-50)}
.aibill.warn{border-color:var(--amber-line)}
.aibill.err{border-color:var(--danger-line)}
.soon{opacity:.85}
.soon h2 .pill{font-size:10px}

/* Inbox: badges on a row, the AI line in the thread, the draft over the composer */
.row .aiw{grid-column:1/3;display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.msg.ai{background:var(--lime-50);border:1px solid #E3EFC2}
.msg .who .aitag{margin-left:4px;vertical-align:1px}
.sysline{align-self:center;max-width:min(560px,92%);text-align:center;font-size:12px;color:var(--text-2);
  border-top:1px dashed var(--line-strong);border-bottom:1px dashed var(--line-strong);padding:8px 10px;margin:6px 0}
.sysline .mono{font-size:11px;color:var(--text-3)}
.aidraft{margin:0 16px 10px;background:var(--lime-50);border:1px solid #D6E8A6;border-radius:var(--r-card);padding:11px 14px}
.aidraft .aidh{display:flex;align-items:center;gap:9px;font-size:12.5px;color:var(--text-2);flex-wrap:wrap}
.aidraft .aidbody{margin:8px 0;font-size:14px;white-space:pre-wrap;word-break:break-word;max-height:30vh;overflow:auto}
.aidraft .srcs{margin-bottom:8px}
.aidraft .actions{justify-content:flex-end;margin-top:0}
.aidraft.writing .skel{padding:8px 0 0}
.aidraft.writing .skel div{background:linear-gradient(90deg,#E8F2CB 25%,#F6FCE4 37%,#E8F2CB 63%);background-size:400% 100%}
.aistrip{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:8px 16px;border-top:1px solid var(--line);
  background:var(--paper);font-size:12.5px;color:var(--text-2)}
.aistrip>span:not(.pill):not(.aitag){flex:1 1 200px}
.aistrip .pill{flex:none}
.aiblock{border:1px solid var(--line);border-radius:var(--r-card);padding:12px 14px;display:flex;flex-direction:column;gap:8px}
.aiblock h3{display:flex;align-items:center;gap:7px;margin:0;color:var(--text);letter-spacing:.04em}
.aiblock .swrow{border:0;padding:0;min-height:40px;font-size:13px}
.aiblock .swrow .st{font-size:12px;color:var(--text-2)}
.aiblock p{margin:0;font-size:12.5px;color:var(--text-2)}
.ainote{background:var(--amber-bg);border:1px solid var(--amber-line);color:var(--amber-ink);border-radius:var(--r-sm);
  padding:9px 11px;font-size:12.5px;line-height:1.5}
#v-inbox.on{display:flex;flex-direction:column}
#v-inbox>.inbox{flex:1 1 0;height:auto;min-height:0}
.aibar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:7px 16px;background:var(--danger-bg);
  border-bottom:1px solid var(--danger-line);color:var(--danger);font-size:13px}
.aibar[hidden]{display:none}
.aibar>span:not(.pill){flex:1 1 220px}
.aibar .pill{background:var(--danger);color:#fff}
.aibar .linkbtn{color:var(--danger);font-size:13px}

@media (max-width:1180px){
  .aipage{grid-template-columns:minmax(0,1fr)}
  .trycard{position:static;max-height:none}
  .aistats{grid-template-columns:repeat(4,1fr)}
}
@media (max-width:700px){
  .aigrid2{grid-template-columns:1fr}
  .aistats{grid-template-columns:1fr 1fr}
  .srccards,.gfields{grid-template-columns:1fr}
  .kbbar select{flex:1 1 140px;width:auto}
  .kbrow{flex-wrap:wrap;align-items:flex-start}
  .kbrow .grow{flex:1 1 calc(100% - 46px)}
  .kbrow .switch{margin-left:42px}
  .kbrow .kbmore{margin-left:auto}
  .genwrap{padding:0}
  .genm{width:100%;max-height:none;height:100dvh;border-radius:0}
  /* The title and × share the first line; the steps take a line of their own. */
  .genm .mhead{grid-template-columns:minmax(0,1fr) auto}
  .genm .mhead .stepper{grid-column:1/-1;grid-row:2}
  .genm.small{height:auto;align-self:end;border-radius:var(--r-card) var(--r-card) 0 0}
  .genwrap.sm{place-items:end stretch}
  .mfoot .btn{flex:1 1 auto;min-height:44px}
  .mfoot .note{flex-basis:100%}
  .aidraft{margin:0 10px 8px}
  .aidraft .actions .btn,.uqtop .actions .btn{min-height:40px}
  .segtrack button{min-height:44px}
  .tryform .btn{min-height:42px}
  .menupop button{min-height:44px}
}
/* `section` carries the marketing pages' padding; these are sections inside the app. */
.revgrp,.aimain section{padding-block:0}
.aimain section.card{padding:20px}
.revbar .segtrack{flex:none}
.revbar .segtrack button{white-space:nowrap}
.stepper .sn{font-family:var(--mono);margin-right:4px}
.revbar .selset{display:inline-flex;gap:2px}
@media (max-width:700px){
  .revbar{padding:10px 14px}
  .revbar .cnt{flex-basis:100%}
  .revbar .segtrack{flex:1 1 auto}
}
.mfoot{justify-content:flex-end}
.mfoot .note:empty{display:none}
.dl3 dd.mono{font-size:14px}

/* Suggested from the team's replies, above the unanswered questions. */
.sghead{display:flex;align-items:center;gap:6px;font-size:15px;margin:4px 0 2px}
.sgdesc{margin:0 0 10px}
.sgans{margin:6px 0 8px;color:var(--text);white-space:pre-wrap}
#sg-list .uq{margin-bottom:22px}

/* ---- comments ------------------------------------------------------------ */
.cmwrap{display:grid;grid-template-columns:320px 1fr;height:100%;min-height:0;background:var(--paper)}
.cmposts{border-right:1px solid var(--line);overflow:auto;display:flex;flex-direction:column;min-height:0}
.cmhead{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:16px 16px 10px}
.cmhead h2{margin:0;font-size:17px}
.cmhead .seg{display:flex;gap:2px;padding:2px;border-radius:var(--r-ctl);background:var(--sunk)}
.cmhead .seg button{border:0;background:none;border-radius:8px;padding:4px 10px;font-size:12px;color:var(--text-2)}
.cmhead .seg button[aria-pressed=true]{background:var(--paper);color:var(--text);font-weight:600;box-shadow:var(--e1)}
.cmhead .seg b{color:var(--green-500)}
.cmplist{list-style:none;margin:0;padding:0 8px 12px}
.cmpost{width:100%;display:flex;align-items:center;gap:10px;padding:8px;border:0;border-radius:var(--r-sm);background:none;text-align:left;color:var(--text)}
.cmpost:hover{background:var(--sunk)}
.cmpost.on{background:var(--green-50);box-shadow:inset 3px 0 0 var(--green-500)}
.cmthumb{flex:none;width:44px;height:44px;border-radius:8px;object-fit:cover;background:var(--sunk);display:grid;place-items:center;color:var(--text-3)}
.cmpt{flex:1;min-width:0;display:flex;flex-direction:column}
.cmpt b{font-weight:600;font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cmpt small{color:var(--text-3);font-size:11.5px}
.cmai{margin-left:4px;font-weight:600;color:var(--text-3)}
.cmai.on{color:var(--green-500)}
.cmnone{padding:0 16px}
.cmmain{overflow:auto;min-height:0;display:flex;flex-direction:column}
.cmpostbar{display:flex;align-items:center;gap:12px;padding:12px 20px;border-bottom:1px solid var(--line);background:var(--canvas);position:sticky;top:0;z-index:1}
.cmpostbar .grow{flex:1;min-width:0}
.cmpostbar a{font-size:12px;margin-left:6px;color:var(--green-500)}
.cmaisw{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--text-2)}
.cmlist{padding:12px 20px 40px;display:flex;flex-direction:column;gap:12px}
.cmthread{border:1px solid var(--line);border-radius:var(--r-card);padding:10px 14px;background:var(--paper)}
.cmon{font-size:11.5px;color:var(--text-3);margin-bottom:4px}
.cmc{padding:8px 0}
.cmc + .cmc{border-top:1px dashed var(--line)}
.cmc.d1{margin-left:24px}
.cmc.d2{margin-left:44px}
.cmc.page .cmbody{background:var(--green-50);border-radius:10px;padding:6px 10px;display:inline-block}
.cmc.hidden .cmbody{opacity:.55}
.cmmeta{display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:12.5px}
.cmmeta .t{color:var(--text-3);font-size:11.5px}
.cmmeta .pill{font-size:10.5px}
.cmmeta .k-negative,.cmmeta .k-abusive{background:var(--danger-bg);color:var(--danger)}
.cmmeta .k-spam{background:var(--sunk);color:var(--text-2)}
.cmmeta .k-question{background:var(--info-bg);color:var(--info)}
.cmmeta .k-praise{background:var(--ok-bg);color:var(--ok)}
.cmmeta .s-needs_person{background:var(--warn-bg);color:var(--warn)}
.cmmeta .s-hidden{background:var(--sunk);color:var(--text-2)}
.cmbody{margin:4px 0;white-space:pre-wrap;word-break:break-word}
.cmpriv{font-size:12px;color:var(--text-2);background:var(--sunk);border-radius:8px;padding:6px 10px;margin:4px 0}
.cmacts{display:flex;gap:14px;flex-wrap:wrap}
.cmbox{margin-top:8px}
.cmbox textarea{width:100%;border:1px solid var(--line-strong);border-radius:var(--r-sm);padding:8px 10px;resize:vertical}
.cmbox .act{display:flex;justify-content:flex-end;gap:8px;margin-top:6px}
@media (max-width:760px){
  .cmwrap{grid-template-columns:1fr;height:auto}
  .cmposts{border-right:0;border-bottom:1px solid var(--line);max-height:38vh}
  .cmlist{padding:12px 14px 40px}
}
.cmhead{flex-wrap:wrap}
.cmhead h2{flex:1}
.cmsettings{padding:16px 20px 0}
.cmsettings .aicard{margin:0}
.cmnone p{margin:0 0 10px}
.cmwhy{margin:2px 0 4px;font-size:12px;color:var(--text-2)}

/* ---- workspaces: the picker after sign-in, and the switcher in the menu ---- */
.wspick h2{font-size:15px;margin:18px 0 8px}
.wslist{display:grid;gap:8px;margin-bottom:14px}
.wsrow{display:flex;align-items:center;gap:12px;width:100%;text-align:left;border:1px solid var(--line-strong);border-radius:var(--r-ctl);background:var(--paper);padding:10px 12px;cursor:pointer;font:inherit;color:var(--text)}
.wsrow:hover{border-color:var(--green-500);background:var(--green-50)}
.wsrow[aria-current=true]{border-color:var(--green-500)}
.wsrow .av{width:34px;height:34px;font-size:14px;background:var(--navy,var(--ink-800))}
.wsrow .wsname{flex:1;min-width:0}
.wsrow .wsname b{display:block;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wsrow .wsname span{font-size:12px;color:var(--text-2);text-transform:capitalize}
.wsrow .i{width:16px;height:16px;color:var(--text-3)}
.wspick .signup-line{display:block;margin-top:14px}
.acctpop .wsmenu{display:grid;gap:4px;margin-top:6px}
.acctpop .wsitem{display:flex;align-items:center;gap:10px;width:100%;text-align:left;border:0;background:none;padding:6px;border-radius:8px;cursor:pointer;font:inherit;color:var(--text)}
.acctpop .wsitem:hover{background:var(--green-50)}
.acctpop .wsitem .av{width:28px;height:28px;font-size:12px;background:var(--navy,var(--ink-800))}
.acctpop .wsitem span:last-child{font-size:11px;color:var(--text-2);text-transform:capitalize}
.acctpop .wsitem b{display:block;font-size:13px;color:var(--ink)}