/*
 * components.css — the shared component sheet.
 *
 * Kevin, 2026-09-10: one sheet of the pieces every screen uses — card, chip, rail, kanban column
 * and card, drawer, metric tile, table, status pill, avatar initials, buttons — and no
 * pane-specific CSS that restyles them. Plya's density: three cards across on a desktop, one on
 * a phone.
 *
 * Seeded by the My work layout (PARITY row 30): a side list beside a main column, and the row
 * item Plya uses for "everything that needs action". The next change moves the remaining
 * component definitions here from portal.css, which keeps the tokens and the shell.
 *
 * Tokens (--card, --line, --t2, --acc …) are defined in portal.css and never redefined here, so
 * the light and dark themes keep working without a second set.
 */

/* ── base components, moved from portal.css (order preserved) ─────────────────────────────── */
.av{width:36px;height:36px;border-radius:50%;background:var(--acc);color:#fff;display:grid;place-items:center;font-weight:600;font-size:13px;flex:none}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:16px 18px}
/* One shrinkable column by default: a bare .grid's implicit column is `auto`, which grows to the
   widest child's min-content (the Pricing table made the Selling pane 744px wide on a 390px phone)
   and stops that child's own overflow-x scroller from ever engaging. .g2-.g5 below still win. */
.grid{display:grid;gap:14px;grid-template-columns:minmax(0,1fr)}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}.g2w{grid-template-columns:minmax(0,1fr) minmax(0,1.6fr)}.g3{grid-template-columns:repeat(3,minmax(0,1fr))}.g4{grid-template-columns:repeat(4,minmax(0,1fr))}.g5{grid-template-columns:repeat(5,minmax(0,1fr))}
.metric .l{color:var(--t2);font-size:14px;display:flex;align-items:center;gap:10px}
.metric .v{font-size:30px;font-weight:600;margin:8px 0 4px;font-variant-numeric:tabular-nums}
.metric .s{color:var(--t3);font-size:13px}
.ico{width:34px;height:34px;border-radius:9px;display:grid;place-items:center;font-size:15px}
.k{font-size:13px;color:var(--t3);letter-spacing:.02em;margin:18px 0 8px}
.row{display:flex;align-items:center;justify-content:space-between;padding:12px 0;border-top:1px solid var(--line);gap:12px}
.row:first-of-type{border-top:0}
.btn{display:inline-flex;align-items:center;gap:8px;padding:9px 14px;border-radius:10px;border:1px solid var(--line2);background:transparent;color:var(--t1);font:500 14px Inter,system-ui,sans-serif;cursor:pointer;white-space:nowrap}
.btn.p{background:var(--acc);border-color:var(--acc);color:#fff}
/* A DISABLED button reads disabled (Batch A3, Kevin 2026-09-26): the pricing screen's Save sat in the
   active accent while it could not be pressed. Grey from the theme tokens, never opacity on the
   accent, so the label keeps its contrast in both themes (scripts/portal-pricing-phone-check.js). */
.btn:disabled,.btn[disabled]{cursor:not-allowed}
.btn.p:disabled,.btn.p[disabled]{background:var(--card2);border-color:var(--line2);color:var(--t2);box-shadow:none}
.btn.sm{padding:6px 10px;font-size:13px}
.strip{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:22px}
.strip .btn{background:var(--card)}
.tag{display:inline-flex;align-items:center;padding:3px 10px;border-radius:999px;font-size:12px;font-weight:500}
.tag.teal{background:var(--teal-bg);color:var(--teal)}.tag.blue{background:var(--acc-bg);color:var(--acc)}.tag.amber{background:var(--amber-bg);color:var(--amber)}.tag.red{background:var(--red-bg);color:var(--red)}.tag.purple{background:var(--purple-bg);color:var(--purple)}.tag.grey{background:var(--card2);color:var(--t2)}
.input{display:flex;align-items:center;gap:10px;background:var(--card);border:1px solid var(--line);border-radius:10px;padding:10px 14px;color:var(--t3);flex:1;min-width:180px}
.sel{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:10px 14px;color:var(--t1);display:flex;justify-content:space-between;gap:20px;min-width:150px}
.bar{display:flex;gap:10px;margin-bottom:18px;flex-wrap:wrap}
.tablewrap{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:14px}
th{text-align:left;color:var(--t2);font-weight:600;font-size:12px;letter-spacing:.03em;padding:12px 12px;border-bottom:1px solid var(--line)}
td{padding:14px 12px;border-bottom:1px solid var(--line);vertical-align:middle}
tr:last-child td{border-bottom:0}
td.r,th.r{text-align:right;font-variant-numeric:tabular-nums}
.mono{font-family:ui-monospace,Menlo,monospace;font-size:12.5px;color:var(--t2)}
.chip{display:inline-flex;padding:4px 10px;border-radius:999px;border:1px solid var(--line2);font-size:12.5px;color:var(--t2);margin:0 6px 6px 0}
.rail{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}
.rail span{border:1px solid var(--line);border-radius:999px;padding:7px 12px;font-size:13px;color:var(--t2);display:flex;gap:8px;align-items:center}
.rail span.on{border-color:var(--line2);color:var(--t1)}
.dot{width:8px;height:8px;border-radius:50%;display:inline-block}
.kan{display:grid;grid-auto-flow:column;grid-auto-columns:280px;gap:14px;overflow-x:auto;padding-bottom:10px}
.col h4{margin:0 0 10px;font-size:14px;font-weight:600;display:flex;gap:8px;align-items:center}
.col h4 em{font-style:normal;color:var(--t3);font-weight:500}.col h4 b{margin-left:auto;font-weight:600}
.lead{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:14px}
.ghost{border:1px dashed var(--line2);border-radius:var(--r);padding:30px;text-align:center;color:var(--t3)}
.hl{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}
.wide{grid-column:1/-1}
.note{border:1px solid var(--line);border-radius:10px;padding:12px 14px;color:var(--t2);font-size:13px;background:var(--card2)}
.alert{border:1px solid var(--red);background:var(--red-bg);border-radius:var(--r);padding:16px 18px;margin-bottom:20px}
.alert b{color:var(--red);display:block;margin-bottom:4px}
.bigcard{background:var(--card);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.bigcard .hd{padding:14px 18px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center}
.bigcard .bd{padding:6px 18px}
.progress{height:6px;border-radius:3px;background:var(--card2);overflow:hidden}.progress i{display:block;height:100%;background:var(--acc)}
.railgrp{display:flex;flex-wrap:wrap;gap:6px}
.rchip{background:var(--card);border:1px solid var(--line);border-radius:999px;padding:8px 14px;color:var(--t2);font:inherit;font-size:13px;cursor:pointer;min-height:38px}
.rchip.on{border-color:var(--acc);background:var(--card2);color:var(--t1);font-weight:600}
.rchip:focus-visible{outline:2px solid var(--acc);outline-offset:1px}
/* THE CARD GRID RULE, v2 (M78, Kevin 2026-09-26: "the card grid misaligns when the left menu is
   open, at every width"). The column count follows the SPACE THE GRID ACTUALLY HAS -- the width of
   .main, the pane beside the menu -- never the viewport. v1 (2026-09-10) switched on the viewport,
   so at 1100-1300px the 236px menu left Discover three columns of ~320px: names and categories
   wrapped, and every card in a row started its tags, notes and buttons at a different height.
   Still a FIXED count per band (minmax(0,1fr), no auto-fill, no pixel minimum), so a zoom or a
   side panel can only move a grid across a line, never drop a column inside one.
     tile grids (.g2-.g5) and pipeline lanes: full from 816px of pane, two from 728px, one below.
       With the menu showing that is exactly v1's 1100px / 760px viewport lines, so nothing moved
       where the menu is; with it folded away (a tablet), the grid gets the room back.
     the Discover card grid (.cgrid): three from 1040px, two from 600px, one below -- a lead card
       carries a name, a category, an address, tags and four buttons, and needs ~340px of card.
   test/riser-card-grid-rule-smoke.js and test/find-leads-a-smoke.js hold both. */
.main{container-type:inline-size;container-name:main}
@container main (max-width:815.98px){
  .g3,.g4,.g5{grid-template-columns:repeat(2,minmax(0,1fr))}
  .kboard{grid-auto-columns:calc((100% - 14px) / 2)}
}
@container main (max-width:727.98px){
  .g2,.g2w,.g3,.g4,.g5{grid-template-columns:minmax(0,1fr)}
  .kboard{grid-auto-columns:85%;scroll-snap-type:x mandatory}
}

/* ── lead drawer ─────────────────────────────────────────────────────────────────────────────
 * A panel over the board, not a new screen: the rep keeps their place in the pipeline while
 * they work one lead. Full width on a phone, because a 420px panel on a 390px viewport is a
 * panel with the close button off the edge.
 *
 * It SCROLLS. Same lesson as the sidebar and the login page — a fixed-height flex column with
 * no overflow-y silently clips everything past the fold, and on a short viewport with the
 * keyboard up that is most of it.
 */
.lead-scrim{position:fixed;inset:0;background:rgba(0,0,0,.5);opacity:0;pointer-events:none;transition:opacity .18s;z-index:60}
.lead-scrim.on{opacity:1;pointer-events:auto}
.lead-drawer{position:fixed;top:0;right:0;bottom:0;width:min(460px,100%);z-index:61;background:var(--bg);border-left:1px solid var(--line);display:flex;flex-direction:column;transform:translateX(100%);transition:transform .2s ease;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
.lead-drawer.on{transform:none}
.lead-open{cursor:pointer}
.lead-open:focus-visible{outline:2px solid var(--acc);outline-offset:2px}

.lead-hd{display:flex;gap:12px;align-items:flex-start;padding:18px 18px 14px;border-bottom:1px solid var(--line);position:sticky;top:0;background:var(--bg);z-index:1}
.lead-av{width:40px;height:40px;flex:0 0 40px;border-radius:10px;background:var(--acc);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:600;font-size:14px}
.lead-id{flex:1;min-width:0}
.lead-id b{display:block;font-size:16px;line-height:1.3}
.lead-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.lead-x{padding:6px 10px;min-height:36px}
.lead-body{padding:16px 18px calc(28px + env(safe-area-inset-bottom))}

.lead-nba{background:var(--card2);border-radius:12px;padding:14px;margin-bottom:14px}
.lead-nba b{display:block;margin:4px 0 6px;font-size:15px}
.lead-nba p{margin:0;font-size:13px}

.lead-acts{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px}
.lead-acts .btn{flex:1 1 auto;min-height:44px;justify-content:center;text-decoration:none}
.lead-acts .btn[disabled]{opacity:.45;cursor:not-allowed}

.lead-card{border:1px solid var(--line);border-radius:12px;padding:14px;margin-bottom:12px}
.lead-card h4{margin:0 0 10px;font-size:13px;color:var(--t2);font-weight:500;letter-spacing:.02em}
.lead-dl{display:grid;grid-template-columns:auto 1fr;gap:8px 14px;margin:0;font-size:14px}
.lead-dl dt{color:var(--t2)}
.lead-dl dd{margin:0;word-break:break-word}
.lead-none{color:var(--t3);font-style:italic}
.lead-note{border-top:1px solid var(--line);padding-top:10px;margin-top:10px}
.lead-note:first-of-type{border-top:0;padding-top:0;margin-top:0}
.lead-note p{margin:0 0 4px;font-size:14px;white-space:pre-wrap}
@media(max-width:560px){
  .lead-drawer{width:100%;border-left:0}
  .lead-acts .btn{flex:1 1 100%}
}

/* ── split: a side list beside a main column ─────────────────────────────────────────────── */
.split{display:grid;grid-template-columns:260px minmax(0,1fr);gap:22px;align-items:start}
.split-h{margin:0 0 14px}
.split-h h2{font-size:18px;font-weight:600}
.split-h .sub{font-size:14px;margin-top:2px}

/* ── side list: a vertical list of filters, each with a dot and a count ──────────────────── */
.side-list{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:12px;display:flex;flex-direction:column;gap:2px;position:sticky;top:14px}
.side-h{font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--t2);padding:6px 10px 10px}
.side-item{all:unset;box-sizing:border-box;display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:10px;color:var(--t1);font-size:14.5px;cursor:pointer;min-height:40px}
.side-item:hover{background:var(--card2)}
.side-item.on{background:var(--card2);font-weight:500}
.side-item:focus-visible{outline:2px solid var(--acc);outline-offset:-2px}
.side-item .side-l{flex:1;min-width:0}
.side-item b{font-weight:600;font-variant-numeric:tabular-nums;color:var(--t2)}

/* ── row item: avatar · identity · status · action ───────────────────────────────────────── */
.row-item{display:flex;align-items:center;gap:14px;background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:14px 16px;margin-bottom:10px}
.row-item .row-id{flex:1;min-width:0}
.row-item .row-id b{font-size:15px}
.row-item .row-id .sub{font-size:13px;margin-top:2px}
.row-item .row-act{flex:none;gap:8px}

/* ── avatar initials ─────────────────────────────────────────────────────────────────────── */
.av.sq{width:40px;height:40px;border-radius:10px;font-size:13px;font-weight:700}
.av.t-red{background:var(--red)}
.av.t-amber{background:var(--amber)}
.av.t-blue{background:var(--acc)}
.av.t-teal{background:var(--teal)}
.av.t-purple{background:var(--purple)}
.av.t-grey{background:var(--t3)}

/* ── chips: a row of toggle chips ────────────────────────────────────────────────────────── */
.chips{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 16px}
.chip-t{all:unset;box-sizing:border-box;display:inline-flex;align-items:center;padding:9px 16px;min-height:40px;border-radius:999px;border:1px solid var(--line2);color:var(--t1);font-size:14.5px;font-weight:500;cursor:pointer}
.chip-t:hover{background:var(--card2)}
.chip-t.on{border-color:var(--teal);color:var(--teal);background:var(--teal-bg)}
.chip-t:focus-visible{outline:2px solid var(--acc);outline-offset:2px}

/* ── filter bar: search, narrowing fields, one primary action ─────────────────────────────── */
.filterbar{display:flex;flex-wrap:wrap;gap:10px;align-items:center;background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:12px;margin:0 0 14px}
.filterbar input,.filterbar select{box-sizing:border-box;background:var(--bg);border:1px solid var(--line2);border-radius:10px;padding:10px 12px;color:var(--t1);font:inherit;font-size:16px;min-height:44px}
.filterbar input:focus-visible,.filterbar select:focus-visible{outline:2px solid var(--acc);outline-offset:1px}
.filterbar .fb-search{flex:1 1 280px;position:relative;display:flex;min-width:0}
.filterbar .fb-search input{flex:1;min-width:0;padding-left:40px}
.filterbar .fb-ico{position:absolute;left:12px;top:50%;transform:translateY(-50%);width:18px;height:18px;color:var(--t3);pointer-events:none}
.filterbar .fb-state{width:76px;text-transform:uppercase}
.filterbar .btn-s{min-height:44px;padding:0 20px}

/* ── info bar and results line ───────────────────────────────────────────────────────────── */
.infobar{display:flex;gap:10px;align-items:flex-start;border:1px solid var(--line);border-radius:var(--r);padding:12px 14px;color:var(--t2);font-size:13.5px;margin:0 0 16px}
.infobar .ib-ico{flex:none;width:18px;height:18px;margin-top:1px;color:var(--t3)}
.results-line{font-size:14px;color:var(--t2);margin:0 0 10px;font-variant-numeric:tabular-nums}
.fit-note{margin:0 0 14px}

/* ── line icons ──────────────────────────────────────────────────────────────────────────── */
.icon-btn svg,.fb-ico svg,.ib-ico svg{display:block;width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.icon-btn{box-sizing:border-box;width:32px;height:32px;padding:7px;border-radius:8px;border:1px solid var(--line2);display:inline-grid;place-items:center;color:var(--t2)}
a.icon-btn:hover{color:var(--t1);background:var(--card2)}
.icon-dot{opacity:.75}
/* The phone number, as text beside the website icon (Kevin, 2026-09-13): a rep working a call
   list reads the number rather than a symbol telling them one exists. Sized to sit on the same
   line as the 32px icon button without stretching the row. */
.dtel{display:inline-flex;align-items:center;height:32px;padding:0 4px;color:var(--t2);
  font-variant-numeric:tabular-nums;font-size:13px;white-space:nowrap}

/* ── card grid: Plya's density — three across, two on a narrow desktop, one on a phone ───── */
.cgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;align-items:stretch}
/* The band is the PANE's width (the card grid rule v2, above). Cards in a row share one height and
   .pcard-f sits at the bottom (margin-top:auto), so a row's buttons line up. */
@container main (max-width:1039.98px){.cgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@container main (max-width:599.98px){.cgrid{grid-template-columns:minmax(0,1fr)}}

/* ── profile card: avatar · identity · score, then tags, figures, chips, actions ─────────── */
.pcard{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:16px;display:flex;flex-direction:column;gap:12px;min-width:0}
.pcard-h{display:flex;gap:12px;align-items:flex-start}
.pcard-id{flex:1;min-width:0}
.pcard-id b{display:block;font-size:15.5px;line-height:1.3;overflow-wrap:anywhere}
.pcard-id .sub{font-size:13px;margin-top:2px}
.pcard-r{font-size:13px;color:var(--t2);margin-top:2px}
.pcard-tags{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.pcard-f{display:flex;flex-wrap:wrap;gap:8px;margin-top:auto;padding-top:2px}
.pcard-f .btn-s{flex:1 1 auto}

/* ── score: the big number on a card; an absence is words, never a zero ─────────────────── */
.score{flex:none;text-align:right;line-height:1;max-width:96px}
.score-v{display:block;font-size:30px;font-weight:700;font-variant-numeric:tabular-nums;color:var(--teal)}
.score-l{display:block;font-size:11px;color:var(--t3);letter-spacing:.04em;text-transform:uppercase;margin-top:4px}
.score-none .score-v{font-size:13px;font-weight:500;font-style:italic;color:var(--t3)}

/* ── buttons: small and primary (the names Discover's handlers toggle) ───────────────────── */
.btn-s{box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:8px 12px;min-height:40px;border-radius:10px;border:1px solid var(--line2);background:transparent;color:var(--t1);font:500 14px Inter,system-ui,sans-serif;cursor:pointer;text-decoration:none;white-space:nowrap}
.btn-s:hover{background:var(--card2)}
.btn-s.btn-p{background:var(--acc);border-color:var(--acc);color:#fff}
.btn-s[disabled]{opacity:.55;cursor:not-allowed}
.btn-s:focus-visible{outline:2px solid var(--acc);outline-offset:2px}

/* ── figures: small measured values; an absence is marked and styled as words ──────────── */
/* One row that shrinks, never wraps: auto-fit with a 110px minimum dropped a figure to a second
   row whenever a card narrowed — the card grid rule's failure, one level down. */
.dfigs{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:8px}
.dfig{background:var(--card2);border-radius:10px;padding:8px 10px;display:flex;flex-direction:column;min-width:0}
.dfig-v{font-weight:600;font-size:15px;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.dfig-l{font-size:11.5px;color:var(--t3)}
.dfig-none .dfig-v{font-weight:500;font-size:13px;font-style:italic;color:var(--t3)}

/* ── chip lists (codes, what a score was built from) and signal chips ───────────────────── */
.dcpt{display:flex;flex-wrap:wrap;gap:6px}
.dchip{display:inline-flex;align-items:center;gap:4px;padding:4px 10px;border-radius:999px;border:1px solid var(--line2);font-size:12.5px;color:var(--t2)}
.dchip i{font-style:normal;color:var(--t3)}
.dcpt-none{display:block;font-size:13px;font-style:italic;color:var(--t3)}
.dsig{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.dsig li{font-size:12.5px;line-height:1.35;padding:5px 10px;border-radius:12px;background:var(--card2);color:var(--t1)}
.dsig li.dsig-stop{background:var(--red-bg);color:var(--red)}
.dsig li.dsig-warn{background:var(--amber-bg);color:var(--amber)}
.dsig li.dsig-good{background:var(--teal-bg);color:var(--teal)}
.tag.tag-good{background:var(--teal-bg);color:var(--teal)}

/* ── inline panel (Discover's practice intel) ────────────────────────────────────────────── */
/* Discover's drawer (run item 9) wears the lead drawer (.lead-scrim/.lead-drawer above); these are
   only what it adds: the header's actions, the FIT badge, the facts chips, and the line that
   separates Plya's half from ours. */
.ddrawer{background:var(--bg)}
.ddrawer .lead-hd{flex-wrap:wrap}
.ddrawer .lead-body{display:flex;flex-direction:column;gap:12px}
.ddrawer .lead-card{margin-bottom:0}
.ddrawer .lead-card p{margin:0 0 6px;font-size:14px}
.ddrawer .lead-card .sub{font-size:12.5px;margin:0 0 6px}
.ddrawer .lead-acts{margin-bottom:0}
.dd-hact{display:flex;gap:8px;align-items:center;flex:none;margin-left:auto}
.dd-meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin-top:6px;font-size:13px;color:var(--t2)}
.tag.fitb{background:var(--teal-bg);color:var(--teal);font-weight:700;letter-spacing:.03em}
.tag.fitb-none{background:var(--card2);color:var(--t3)}
.dd-facts a.dchip{color:var(--acc);text-decoration:none}
.dd-facts a.dchip:hover{border-color:var(--acc)}
.dd-ours{font-size:12.5px;font-weight:600;letter-spacing:.02em;color:var(--t3);padding-top:10px;border-top:1px dashed var(--line2)}
.ddrawer .dfigs + .sub{margin-top:10px}
@media(max-width:560px){
  .ddrawer .dd-hact{flex:1 1 100%;margin-left:0}
  .ddrawer .dd-hact .btn-p{flex:1}
}
.dd-msg{margin:8px 0 0;font-size:13px;color:var(--t2)}
.dd-why{margin:6px 0 0;font-size:12.5px}
.dd-staff{margin:8px 0 0;padding-left:18px;font-size:13.5px;color:var(--t2)}

/* ── kanban board: one column per stage, sideways scroll, cards you can drag ─────────────── */
/* Lanes are sized to the board, not to a 280px minimum: three in view from 1100px, two from 760px,
   one (85%, snapping) below. The rest of the stages scroll sideways. A minimum width made the
   count depend on the sidebar and the zoom — the card grid rule, applied to the pipeline. */
.kboard{display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 28px) / 3);gap:14px;overflow-x:auto;padding-bottom:10px;align-items:start;-webkit-overflow-scrolling:touch}
/* Two lanes / one lane: in the card grid rule's @container blocks above (the pane, not the viewport). */
.kcol{min-width:0;border-radius:var(--r);padding:4px;transition:background .12s}
.kcol.over{background:var(--card2);outline:2px dashed var(--acc);outline-offset:-2px}
.kcol-h{display:flex;align-items:center;gap:8px;padding:6px 6px 10px;font-size:15px}
.kcol-h b{font-weight:600}
.kcol-h em{font-style:normal;color:var(--t3);font-variant-numeric:tabular-nums}
.kcol-v{margin-left:auto;font-weight:600;color:var(--t2);font-variant-numeric:tabular-nums}
.kcol-empty{border:1px dashed var(--line2);border-radius:var(--r);padding:28px 12px;text-align:center;color:var(--t3);font-size:14px}
.kcard{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:14px;display:flex;flex-direction:column;gap:8px;margin-bottom:10px;cursor:grab}
.kcard.dragging{opacity:.5}
.kcard-h{display:flex;justify-content:space-between;align-items:flex-start;gap:8px}
.kcard-h b{font-size:15px;line-height:1.3;overflow-wrap:anywhere}
.kcard-meta{display:flex;justify-content:space-between;gap:8px;font-size:13px;color:var(--t2);font-variant-numeric:tabular-nums}
.kcard-meta a{color:var(--teal)}
.kcard-stage select{box-sizing:border-box;width:100%;background:var(--bg);border:1px solid var(--line2);border-radius:10px;padding:8px 10px;color:var(--t1);font:inherit;font-size:16px;min-height:40px}
.kcard-act{justify-content:flex-start;width:100%}
.kcard-src{font-size:12px;color:var(--t3)}
.pipe-tools{display:flex;justify-content:flex-end;gap:10px;margin:0 0 12px}
.pipe-sum{font-size:18px;margin:4px 0 6px}
.note.good{border-color:var(--teal);color:var(--teal)}
.note.bad{border-color:var(--red);color:var(--red)}

/* ── segmented toggle ────────────────────────────────────────────────────────────────────── */
.seg{display:inline-flex;gap:2px;background:var(--bg);border:1px solid var(--line2);border-radius:10px;padding:3px;margin-left:auto}
.seg button{all:unset;box-sizing:border-box;display:inline-flex;align-items:center;padding:7px 14px;min-height:36px;border-radius:8px;font-size:14px;color:var(--t2);cursor:pointer}
.seg button[aria-pressed="true"]{background:var(--card2);color:var(--t1);font-weight:500}
.seg button:focus-visible{outline:2px solid var(--acc);outline-offset:1px}

/* ── phone: one column, and a side list that scrolls sideways in a single row ────────────── */
/* 759.98, not 720: the card grid rule's one-column line, so every screen changes at one width. */
@media (max-width:759.98px){
  .split{grid-template-columns:minmax(0,1fr);gap:14px}
  .side-list{position:static;flex-direction:row;overflow-x:auto;padding:8px;gap:6px;-webkit-overflow-scrolling:touch}
  .side-h{display:none}
  .side-item{flex:none;white-space:nowrap;border:1px solid var(--line);border-radius:999px;padding:8px 12px}
  .row-item{flex-wrap:wrap;gap:10px 12px}
  .row-item .row-id{flex:1 1 calc(100% - 56px)}
  .row-item .tag{margin-left:52px}
  .row-item .row-act{margin-left:auto}
  .chips{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:4px}
  .chip-t{flex:none}
  .filterbar .fb-search{flex-basis:100%}
  .filterbar select{flex:1 1 auto}
  .filterbar .btn-s{flex:1 1 100%}
  .kcol{scroll-snap-align:start}
  .seg{margin-left:0}
}

/* Plya's chevron on the card's next-step action. CSS only: the button stays text, as the drawer's click handling expects. */
.kcard-act::after{content:'\203A';margin-left:auto;color:var(--t3);font-size:18px;line-height:1}

/* Link rows: a partner's public addresses, each with what to send it for. Selling and Recruiting (PARITY rows 3, 4). */
.linklist{display:flex;flex-direction:column;gap:10px}
.linkrow{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px 16px;border:1px solid var(--line);border-radius:10px;background:var(--card)}
.linkrow .lk{min-width:0;display:flex;flex-direction:column;gap:3px}
.linkrow .lk-l{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--t2);font-weight:600}
.linkrow .lk-h{font-size:13px;color:var(--t2)}
.linkrow .lk-u{font-family:ui-monospace,Menlo,monospace;font-size:13px;color:var(--acc);overflow-wrap:anywhere;text-decoration:none}
.linkrow .lk-b{display:flex;gap:8px;flex-shrink:0;flex-wrap:wrap}
.qrbox{display:flex;align-items:center;gap:16px;padding:14px 16px;border:1px dashed var(--line2);border-radius:10px}
.qrbox svg{width:132px;height:132px;flex-shrink:0;background:#fff;border-radius:6px}
.note.warn{border-color:var(--amber);background:var(--amber-bg);color:var(--t1)}
.note.warn b{color:var(--amber)}
.eyebrow{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--acc);font-weight:600}
@media (max-width:640px){.linkrow{flex-direction:column;align-items:stretch}.qrbox{flex-direction:column;align-items:flex-start}}
/* Plya's card rows #447 left out (Kevin, 2026-09-10): owner initials beside the stage menu, and the next step. */
.kcard-own{display:flex;align-items:center;gap:8px}
.kcard-own .kcard-stage{flex:1;min-width:0}
.av.xs{width:28px;height:28px;border-radius:8px;font-size:11px;font-weight:700}
.kcard-next{display:flex;align-items:center;gap:6px;font-size:12.5px;color:var(--t2)}
.kcard-next b{color:var(--t1);font-weight:600}
.kcard-next svg{width:13px;height:13px;flex:none;stroke:currentColor;fill:none;stroke-width:2}

/* ── Users/reps: Plya's Hierarchy view (run item 1) ─────────────────────────────────────────── */
.dview{display:flex;margin:0 0 12px}
.dview .seg{margin-left:0}
.dtiles{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;margin:0 0 14px}
.dtile{background:var(--card);border:1px solid var(--line2);border-radius:var(--r);padding:14px 16px;min-width:0}
.dtile b{display:block;font-size:22px;line-height:1.2;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.dtile span{font-size:13px;color:var(--t2)}
.htree{display:flex;flex-direction:column;gap:18px;margin-bottom:10px}
.hcard{display:flex;gap:12px;align-items:flex-start;background:var(--card);border:1px solid var(--line2);border-radius:var(--r);padding:12px 14px;min-width:0}
.hcard.hroot{border-color:var(--acc);max-width:460px}
.hid{min-width:0}
.hid b{overflow-wrap:anywhere}
.hmeta{display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:12.5px;color:var(--t3);margin-top:4px}
.hdot{width:8px;height:8px;border-radius:50%;background:var(--t3);flex:none}
.hdot.on{background:var(--teal)}
.hkids{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:10px 0 0 22px;padding-left:16px;border-left:2px solid var(--line2)}
.hloose .hkids{margin-left:0;padding-left:0;border-left:0}
.hnone{margin:8px 0 0 24px;font-size:13px}
@media (max-width:1099.98px){
  .dtiles{grid-template-columns:repeat(3,minmax(0,1fr))}
  .hkids{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:759.98px){
  .dtiles{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hkids{grid-template-columns:minmax(0,1fr);margin-left:10px;padding-left:12px}
}
/* ── Learning center, in Plya's layout (run item 1) ───────────────────────────────────────────
   The alert, "Continue learning", underline tabs, and a card grid on the shared .cgrid rule. */
.lc-alert{border:1px solid var(--red);border-radius:var(--r);padding:14px 16px;margin:0 0 18px;background:var(--card)}
.lc-alert b{display:block;font-size:15px;color:var(--red);margin-bottom:4px}
.lc-alert p{margin:0;font-size:13.5px;color:var(--t2)}
.lc-k{font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--t2);margin:4px 0 10px}
.lc-tabs{display:flex;gap:4px;border-bottom:1px solid var(--line2);margin:18px 0 16px;overflow-x:auto;-webkit-overflow-scrolling:touch}
.lc-tabs button{all:unset;box-sizing:border-box;padding:10px 14px;font-size:14.5px;color:var(--t2);cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px;white-space:nowrap}
.lc-tabs button[aria-selected="true"]{color:var(--t1);border-bottom-color:var(--acc);font-weight:500}
.lc-tabs button:focus-visible{outline:2px solid var(--acc);outline-offset:-2px}
.lc-pane{display:none}
.lc-pane.on{display:block}
.lc-lead{margin:0 0 12px;font-size:13.5px}
.cgrid.lc-grid{align-items:stretch;margin-bottom:14px}
.lc-card{background:var(--card);border:1px solid var(--line2);border-radius:var(--r);padding:16px;display:flex;flex-direction:column;gap:8px;min-width:0}
.lc-top{display:flex;align-items:center;gap:10px}
.lc-top .tag{margin-left:auto}
.lc-ico{width:36px;height:36px;border-radius:9px;background:var(--card2);display:grid;place-items:center;color:var(--acc);flex:none}
.lc-ico svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.lc-type{display:flex;flex-direction:column;font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--t2)}
.lc-req{font-style:normal;text-transform:none;letter-spacing:0;font-size:12.5px;color:var(--red)}
.lc-title{font-size:15.5px;line-height:1.3;overflow-wrap:anywhere}
.lc-desc{margin:0;font-size:13.5px;color:var(--t2);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.lc-meta{font-size:12.5px;color:var(--t3)}
.lc-act{margin-top:auto;color:var(--acc);text-decoration:none;font-weight:500;font-size:14px}
.lc-act:hover{text-decoration:underline}
.lc-none{margin-top:auto;font-size:13px;color:var(--t3);font-style:italic}
.lc-certs{margin-top:4px}

/* ── CRM → Manager, in Plya's layout (run item 1) ───────────────────────────────────────────── */
.mg-head{display:flex;justify-content:flex-end;margin:0 0 10px}
.mg-card{background:var(--card);border:1px solid var(--line2);border-radius:var(--r);padding:16px 18px;min-width:0;margin-bottom:14px}
.mg-card h3{margin:0 0 10px;font-size:16px}
.mg-quota p{margin:0}
.mg-tiles{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px;margin:0 0 14px}
.mg-tile{background:var(--card);border:1px solid var(--line2);border-radius:var(--r);padding:14px 16px;min-width:0}
.mg-l{display:block;font-size:13px;color:var(--t2)}
.mg-v{display:block;font-size:clamp(18px,1.7vw,24px);line-height:1.25;margin:6px 0 4px;font-variant-numeric:tabular-nums;white-space:nowrap}
.mg-v.t-teal{color:var(--teal)}
.mg-v.t-amber{color:var(--amber)}
.mg-tile .s{font-size:12.5px;color:var(--t3)}
.mg-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:14px;align-items:start}
.mg-grid .mg-card{margin-bottom:0}
.mg-stage{margin:0 0 12px}
.mg-sl{display:flex;justify-content:space-between;gap:10px;font-size:14px;margin-bottom:6px}
.mg-sl b{font-variant-numeric:tabular-nums}
.mg-bar{height:6px;border-radius:3px;background:var(--card2);overflow:hidden}
.mg-bar i{display:block;height:100%;background:var(--acc)}
.mg-dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:8px;vertical-align:middle}
.mg-row{display:flex;align-items:center;gap:12px;padding:10px 0;border-top:1px solid var(--line2)}
.mg-row:first-of-type{border-top:0}
.mg-id{flex:1;min-width:0}
.mg-id b{overflow-wrap:anywhere}
.mg-amt{font-variant-numeric:tabular-nums;white-space:nowrap}
@media (max-width:1099.98px){.mg-grid{grid-template-columns:minmax(0,1fr)}.mg-grid .mg-card{margin-bottom:14px}}
@media (max-width:759.98px){.mg-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* ── CRM → Rep success, in Plya's layout (run item 1) ───────────────────────────────────────── */
.rs-top{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:0 0 14px}
.rs-top .seg{margin-left:0}
.rs-pane{display:none}
.rs-pane.on{display:block}
.rs-tiles{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px;margin:0 0 14px}
.rs-tile{background:var(--card);border:1px solid var(--line2);border-radius:var(--r);padding:14px 16px;min-width:0}
.rs-l{display:block;font-size:13px;color:var(--t2)}
.rs-v{display:block;font-size:clamp(18px,1.8vw,26px);white-space:nowrap;line-height:1.25;margin:6px 0 4px;font-variant-numeric:tabular-nums}
.rs-v.t-teal{color:var(--teal)}
.rs-v.t-acc{color:var(--acc)}
.rs-tile .s{font-size:12.5px;color:var(--t3)}
.rs-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);gap:14px;align-items:start}
.rs-card{background:var(--card);border:1px solid var(--line2);border-radius:var(--r);padding:16px 18px;min-width:0}
.rs-card h3{margin:0 0 2px;font-size:16px}
.rs-h{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-bottom:10px}
.rs-dist{display:flex;align-items:center;gap:22px;margin-top:14px;flex-wrap:wrap}
.rs-ring{width:132px;height:132px;border-radius:50%;display:grid;place-items:center;flex:none}
.rs-ring span{width:92px;height:92px;border-radius:50%;background:var(--card);display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:12.5px;color:var(--t2)}
.rs-ring span b{font-size:24px;color:var(--t1)}
.rs-legend{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px;min-width:160px;flex:1}
.rs-legend li{display:flex;align-items:center;gap:8px;font-size:14px}
.rs-legend i{width:10px;height:10px;border-radius:50%;flex:none}
.rs-legend b{margin-left:auto;font-variant-numeric:tabular-nums}
@media (max-width:1099.98px){
  .rs-tiles{grid-template-columns:repeat(3,minmax(0,1fr))}
  .rs-grid{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:759.98px){
  .rs-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
}
/* ── CRM → Customer success, in Plya's layout (run item 1) ──────────────────────────────────── */
.cs-banner{border:1px solid var(--amber);border-radius:var(--r);padding:12px 16px;margin:0 0 14px;font-size:13.5px;color:var(--t2);background:var(--card)}
.cs-banner b{color:var(--amber)}
.cs-top{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:0 0 14px}
.cs-top .seg{margin-left:0}
.cs-pane{display:none}
.cs-pane.on{display:block}
.cs-tiles{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px;margin:0 0 14px}
.cs-tile{background:var(--card);border:1px solid var(--line2);border-radius:var(--r);padding:14px 16px;min-width:0}
.cs-l{display:block;font-size:13px;color:var(--t2)}
.cs-v{display:block;font-size:clamp(18px,1.7vw,24px);line-height:1.25;margin:6px 0 4px;font-variant-numeric:tabular-nums;white-space:nowrap}
.cs-v.t-teal{color:var(--teal)}
.cs-v.t-amber{color:var(--amber)}
.cs-tile .s{font-size:12.5px;color:var(--t3)}
.cs-life{display:flex;align-items:center;gap:8px;flex-wrap:wrap;background:var(--card);border:1px solid var(--line2);border-radius:var(--r);padding:12px 16px;margin:0 0 14px}
.cs-life>b{margin-right:6px}
.cs-chip{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border:1px solid var(--line2);border-radius:9px;font-size:13.5px}
.cs-chip i{width:8px;height:8px;border-radius:50%}
.cs-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);gap:14px;align-items:start;margin-bottom:14px}
.cs-card{background:var(--card);border:1px solid var(--line2);border-radius:var(--r);padding:16px 18px;min-width:0}
.cs-card h3{margin:0 0 2px;font-size:16px}
.cs-h{display:flex;justify-content:space-between;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:8px}
.cs-dist{display:flex;align-items:center;gap:22px;margin-top:14px;flex-wrap:wrap}
.cs-ring{width:132px;height:132px;border-radius:50%;display:grid;place-items:center;flex:none}
.cs-ring span{width:92px;height:92px;border-radius:50%;background:var(--card);display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:12.5px;color:var(--t2)}
.cs-ring span b{font-size:24px;color:var(--t1)}
.cs-legend{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px;min-width:180px;flex:1}
.cs-legend li{display:flex;align-items:center;gap:8px;font-size:14px}
.cs-legend i{width:10px;height:10px;border-radius:50%;flex:none}
.cs-legend b{margin-left:auto;font-variant-numeric:tabular-nums}
.cs-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 0;border-top:1px solid var(--line2)}
.cs-row:first-of-type{border-top:0}
.cs-id{min-width:0}
.cs-id b{overflow-wrap:anywhere}
.cs-dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:6px;vertical-align:middle}
@media (max-width:1099.98px){
  .cs-tiles{grid-template-columns:repeat(3,minmax(0,1fr))}
  .cs-grid{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:759.98px){
  .cs-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
}
/* ── Settings → Booking link, and Kevin's shared links (run item 7) ────────────────────────── */
.bk .linkrow{margin-bottom:0}
.bk-cal{margin-top:12px}
.bk-cal .pr-bar{margin-top:10px}
.bk-hours{display:flex;flex-wrap:wrap;gap:14px 18px;align-items:flex-end;margin-top:12px}
.bk-f{display:flex;flex-direction:column;gap:6px;min-width:0;max-width:100%}
.bk-f input[type=time],.bk-f select,.bk-form input[type=text],.bk-form input[type=email],.bk-form input[type=url]{box-sizing:border-box;min-height:40px;padding:8px 10px;border:1px solid var(--line2);border-radius:10px;background:var(--bg);color:var(--t1);font:14px Inter,system-ui,sans-serif;max-width:100%}
.bk-f input:focus-visible,.bk-f select:focus-visible,.bk-form input:focus-visible{outline:2px solid var(--acc);outline-offset:1px}
/* The days take their own row, so From and To always sit together beneath them. */
.bk-hours>.bk-f:first-child{flex:1 1 100%}
.bk-days{display:flex;flex-wrap:wrap;gap:6px}
.bk-day{display:inline-flex;align-items:center;gap:6px;padding:7px 10px;min-height:36px;box-sizing:border-box;border:1px solid var(--line2);border-radius:9px;font-size:13.5px;cursor:pointer}
.bk-day input{accent-color:var(--acc);margin:0}
.bk-day:has(input:checked){border-color:var(--acc);background:var(--card2)}
.bk-grp{margin-top:12px}
.bk-mem{font-size:13px;color:var(--t2);margin:6px 2px 0;overflow-wrap:anywhere}
.bk-acts{display:flex;gap:8px;margin-top:8px;flex-wrap:wrap}
.bk-form{border:1px solid var(--line);border-radius:var(--r);padding:14px 16px;margin-top:14px;display:flex;flex-direction:column;gap:14px;background:var(--card2)}
.bk-form fieldset{border:0;margin:0;padding:0;min-width:0}
.bk-form legend{padding:0;margin-bottom:6px}
.bk-slug{display:flex;align-items:center;gap:4px;flex-wrap:wrap;font-family:ui-monospace,Menlo,monospace;font-size:13px;color:var(--t2)}
.bk-slug input{font-family:inherit}
.bk-ics{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:8px}
.bk-ics input{flex:1 1 160px;min-width:0}
/* ── Kevin's console (run item 1) ─────────────────────────────────────────────────────────────── */
.k-tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:0 0 10px}
.k-tile{display:flex;flex-direction:column;gap:4px;background:var(--card);border:1px solid var(--line2);border-radius:var(--r);padding:14px 16px;min-width:0;color:var(--t1);text-decoration:none}
.k-tile:hover{background:var(--card2)}
.k-tile:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
.k-tile.hot{border-color:var(--amber)}
.k-l{font-size:13px;color:var(--t2)}
.k-v{font-size:clamp(20px,2vw,26px);line-height:1.2;font-variant-numeric:tabular-nums}
.k-tile.hot .k-v{color:var(--amber)}
.k-s{font-size:12.5px;color:var(--t3)}
.k-total{margin:0 0 14px}
/* View as (Kevin, 2026-09-24: "an orange 'Viewing as <name>' bar"). Solid orange in both themes, so
   it can never be mistaken for a notice the viewed person would see themselves. */
/* ONE LINE, FIXED HEIGHT (punch list #9, 2026-09-26): the bar wrapped to 178px at 390 and sat over
   the top bar, so the menu button could not be tapped. It is now --viewas-h tall at every width, never
   wraps, and the top bar, the sidebar/drawer and the page are all offset by that same height. */
:root{--viewas-h:44px}
.viewas{position:fixed;left:0;right:0;top:0;z-index:80;display:flex;align-items:center;gap:10px;flex-wrap:nowrap;
  box-sizing:border-box;height:var(--viewas-h);overflow:hidden;
  padding:0 12px 0 16px;background:#ea580c;border-bottom:2px solid #9a3412;color:#fff}
.viewas b{color:#fff;flex:0 1 auto;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:14px}
.viewas .sub{flex:1 1 0;min-width:0;font-size:13px;color:#fff7ed;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.viewas .btn{flex:none;background:#fff;color:#9a3412;border-color:#fff;font-weight:600;padding:5px 12px;min-height:32px;box-sizing:border-box}
.viewas-toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:90;max-width:min(560px,calc(100vw - 32px));
  padding:12px 16px;border-radius:10px;background:#9a3412;color:#fff;font-size:14px;box-shadow:0 6px 24px rgba(0,0,0,.35)}
.viewas-toast[hidden]{display:none}
.va-meta{font-size:12.5px;color:var(--t3)}
/* The browser's own [hidden] loses to the display above it -- see #559. */
.viewas[hidden]{display:none}
/* The banner is fixed, so the page, the sticky top bar and the sidebar/drawer all start below it. */
body.is-viewas{padding-top:var(--viewas-h)}
body.is-viewas .topbar{top:var(--viewas-h)}
body.is-viewas .side{top:var(--viewas-h);height:calc(100vh - var(--viewas-h));height:calc(100dvh - var(--viewas-h))}
/* A phone says the short version: who, "look only", Exit. The code and audience stay on wider screens. */
@media (max-width:560px){
  .viewas .sub{display:none}
  .viewas b::after{content:' \00b7  look only';font-weight:400;color:#fff7ed}
}
.k-cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;align-items:start}
.k-cols>div:empty{display:none}
.k-cols .card{margin:0}
.k-h{font-size:16px;margin:0 0 2px}
.k-p{font-size:13px;margin:0 0 8px}
.k-row{flex-wrap:wrap;gap:8px;align-items:flex-start}
.k-id{flex:1 1 240px;min-width:0;overflow-wrap:anywhere}
.k-meta{font-size:13px}
.k-note{font-size:13px}
.k-err{width:100%;margin:0}
.k-acts{display:flex;flex-wrap:wrap;gap:6px;align-items:center;max-width:100%}
.k-link{box-sizing:border-box;width:100%;margin:6px 0;padding:8px 10px;border:1px solid var(--line2);border-radius:10px;background:var(--bg);color:var(--t1);font:13px ui-monospace,Menlo,monospace}
/* Console › Invites: the full width, a two-column form that folds to one on a phone. */
.k-cols>#k-invites,.k-cols>#k-signups{grid-column:1/-1}
.k-inv-toggles{margin:6px 0 2px}
.k-inv-lines{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 12px;margin:2px 0}
.k-inv-check .sub{font-size:12px}
.k-inv-form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 14px;margin:6px 0 4px}
.k-inv-form label{display:block;font-size:13px;color:var(--t2);margin:6px 0 0}
.k-inv-form .k-link{font:14px Inter,system-ui,sans-serif;margin:4px 0}
.k-inv-form .k-inv-wide{grid-column:1/-1}
.k-inv-check{display:flex;gap:8px;align-items:center;font-size:13px;color:var(--t1);margin:2px 0}
.k-inv-created{border:1px solid var(--acc);border-radius:12px;padding:12px;margin:10px 0}
.k-inv-switch{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center;justify-content:space-between;border:1px solid var(--line2);border-radius:12px;padding:10px 12px;margin:8px 0 12px}
@media (max-width:759.98px){.k-inv-form,.k-inv-lines{grid-template-columns:minmax(0,1fr)}}
.k-chips{display:flex;flex-wrap:wrap;gap:6px;margin:4px 0 0}
.k-chip{display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border:1px solid var(--line2);border-radius:9px;font-size:13px}
.k-pointer{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;border-color:var(--amber)}
@media (max-width:1099.98px){
  .k-cols{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:759.98px){
  .k-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
}
/* CONSOLE REDESIGN (Kevin, 2026-09-25): "Needs you now" on top (only cards with something waiting),
   then five tabs. Phone first: one column under 760px, the tab strip scrolls sideways (portal.css). */
.k-needs-h{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 12px;margin:0 0 6px}
body:not([data-surface="practice"]) .main .k-needs-h .k-h{font-size:17px!important}
.k-need-chips{margin:0 0 10px}
.k-need-chip{color:var(--t1);text-decoration:none;border-color:var(--amber)}
.k-need-chip b{color:var(--amber)}
.k-needs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;align-items:start;margin:0 0 12px}
.k-needs>.k-slot[hidden]{display:none!important}
.k-needs>.k-slot-wide{grid-column:1/-1}
.k-needs .card,.k-home .card{margin:0}
.k-tabs{margin:2px 0 12px}
.k-home:empty{display:none}
.k-moved{margin:0;padding:10px 12px;border:1px dashed var(--line2);border-radius:12px}
.k-appr .k-acts{align-self:flex-start}
.k-appr-note{color:var(--t3)}
.k-type{border-top:1px dashed var(--line2);margin:8px 0 2px;padding-top:6px}
.k-type[hidden]{display:none}
.k-focus{outline:2px solid var(--amber);outline-offset:3px;border-radius:10px}
@media (max-width:759.98px){
  .k-needs{grid-template-columns:minmax(0,1fr)}
  .k-appr .k-acts .btn-s{flex:1 1 calc(33% - 6px);justify-content:center;text-align:center}
}

/* ── MARKETING (Kevin, 2026-09-13) ──────────────────────────────────────────────────────────
   Two whole screens embedded in portal chrome. The frame gets a real height rather than a
   percentage: a percentage of an auto-height parent collapses to zero, which is how an embedded
   page renders as a 0px strip and reads as broken rather than empty. */
.mkt-tabs{display:flex;gap:8px;margin:0 0 12px;flex-wrap:wrap}
.mkt-tab{background:var(--card);border:1px solid var(--line);color:var(--t2);border-radius:9px;
  padding:8px 14px;font:inherit;font-size:13.5px;cursor:pointer}
.mkt-tab:hover{background:var(--card2);color:var(--t1)}
.mkt-tab.on{border-color:var(--acc);color:var(--t1);background:var(--card2)}
.mkt-tab:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
.mkt-frames{border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--card)}
.mkt-frame{display:block;width:100%;height:calc(100vh - 230px);min-height:520px;border:0}
#mkt-hold{margin:0 0 12px}
@media (max-width:759.98px){
  .mkt-frame{height:calc(100vh - 270px);min-height:420px}
}

/* ── CHARLIE: hero + ask panel (Phase 2, flag `charlie_home`) ─────────────────────────────────
 *
 * MOBILE FIRST. The base rules are the phone; the media query widens for desktop. Kevin and the
 * reps work from phones, so the narrow case is the one written first and the one that cannot be
 * an afterthought of a desktop layout.
 *
 * Every selector is prefixed `ch-` and nothing here overrides an existing class, so with the
 * flag off — when none of this markup is rendered — the stylesheet is inert. It is appended
 * rather than woven in for the same reason: a diff that only adds lines cannot change a screen
 * it does not mention.
 */
.ch-hero{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:16px;margin-bottom:16px}
.ch-hero:empty{display:none}          /* flag off, or not yet loaded: no empty box */
.ch-hero-top{display:flex;flex-direction:column;gap:2px;margin-bottom:8px}
.ch-hero h2{margin:0;font-size:20px;line-height:1.25}
.ch-date{color:var(--t3);font-size:13px}
.ch-what{margin:0 0 12px;color:var(--t2);font-size:14px;line-height:1.45}

/* Chips wrap onto as many rows as they need. They are never a horizontal scroller: a chip that
 * has to be swiped to is a chip nobody presses, and there are only four. */
.ch-chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px}
.ch-chip{background:var(--card2);border:1px solid var(--line2);color:var(--t1);border-radius:999px;
  padding:9px 14px;font:inherit;font-size:13px;cursor:pointer;min-height:40px;text-align:left}
.ch-chip:hover{border-color:var(--acc)}
.ch-chip:focus-visible{outline:2px solid var(--acc);outline-offset:2px}

.ch-hero-actions{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.ch-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;background:var(--card2);
  border:1px solid var(--line2);color:var(--t1);border-radius:10px;padding:10px 16px;font:inherit;
  font-size:14px;cursor:pointer;text-decoration:none;min-height:44px}   /* 44px: a real tap target */
.ch-btn:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
.ch-btn-primary{background:var(--acc);border-color:var(--acc);color:#fff}
.ch-count{font-size:13px;color:var(--t2);text-decoration:none;border-bottom:1px dotted var(--line2)}
.ch-count:hover{color:var(--t1)}
.ch-muted{color:var(--t3)}
.ch-warn{color:var(--t2);font-size:13px;border-left:2px solid var(--line2);padding-left:8px;margin:8px 0 0}

/* The top-bar button is injected only when the flag is on. `.topbar` itself is display:none
 * above 900px, so this rides the existing rule rather than adding a second one. */
.ch-ask-btn{all:unset;cursor:pointer;font-size:13px;color:var(--t1);background:var(--card2);
  border:1px solid var(--line2);border-radius:999px;padding:7px 12px;min-height:36px;
  display:inline-flex;align-items:center}
.ch-ask-btn:focus-visible{outline:2px solid var(--acc);outline-offset:2px}

/* ── the drawer ──────────────────────────────────────────────────────────────────────────────
 * On a phone it is the whole screen: a 380px-tall drawer with a keyboard open leaves about four
 * lines of answer visible, which is not enough to read a queue in. `100dvh` rather than `100vh`
 * so the mobile browser chrome does not push the input off the bottom.
 */
.ch-panel{position:fixed;inset:0;z-index:80;background:var(--bg);display:flex;flex-direction:column;
  height:100dvh;padding-bottom:env(safe-area-inset-bottom)}
.ch-panel[hidden]{display:none}       /* [hidden] loses to display:flex without this */
.ch-panel-hd{display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid var(--line)}
.ch-ro{font-size:12px;border:1px solid var(--line2);border-radius:999px;padding:2px 8px}
.ch-close{all:unset;margin-left:auto;cursor:pointer;font-size:24px;line-height:1;color:var(--t2);
  padding:4px 10px;min-height:44px;display:inline-flex;align-items:center}
.ch-close:focus-visible{outline:2px solid var(--acc);outline-offset:2px}

.ch-log{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;
  padding:14px 16px;display:flex;flex-direction:column;gap:10px}
.ch-msg{max-width:92%;border-radius:12px;padding:11px 13px;font-size:14px;line-height:1.5}
.ch-msg p{margin:0 0 8px}
.ch-msg p:last-child{margin-bottom:0}
.ch-me{align-self:flex-end;background:var(--acc);color:#fff}
.ch-them{align-self:flex-start;background:var(--card);border:1px solid var(--line);color:var(--t1)}
.ch-rows,.ch-can{margin:6px 0 0;padding-left:18px}
.ch-rows li,.ch-can li{margin-bottom:4px}
.ch-figs{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:10px 0 0}
.ch-figs dt{color:var(--t3);font-size:12px}
.ch-figs dd{margin:0;font-size:16px;font-weight:600}

/* A draft is visibly a draft. The heading is part of the block, not a caption near it, so it
 * cannot be scrolled away from the text it qualifies. There is no send control anywhere. */
.ch-draft{margin-top:10px;border:1px solid var(--line2);border-radius:10px;overflow:hidden}
.ch-draft-h{background:var(--card2);padding:7px 11px;font-size:12px;color:var(--t2);
  border-bottom:1px solid var(--line2)}
.ch-draft pre{margin:0;padding:11px;white-space:pre-wrap;word-break:break-word;font:inherit;font-size:13px}
.ch-draft .ch-btn{margin:0 11px 11px;min-height:40px}

.ch-form{display:flex;gap:8px;padding:12px 16px;border-top:1px solid var(--line)}
.ch-form input{flex:1;background:var(--card);border:1px solid var(--line2);border-radius:10px;
  padding:12px;color:var(--t1);font:inherit;font-size:16px}   /* 16px: anything smaller zooms iOS */
.ch-form input:focus-visible{outline:2px solid var(--acc);outline-offset:-1px}

@media (min-width:901px){
  /* Desktop: a right-hand drawer, not a takeover. The portal stays readable behind it, which is
     the whole reason to ask a question from a page you are already looking at. */
  .ch-panel{left:auto;width:min(420px,40vw);border-left:1px solid var(--line);box-shadow:-8px 0 40px rgba(0,0,0,.35)}
  .ch-hero h2{font-size:24px}
}
@media (prefers-reduced-motion:reduce){
  .ch-panel{transition:none}
}
/* Suggestions inside the drawer. At phone width the drawer covers the hero, so without these
 * the chips are unreachable the moment Charlie is open — see renderPanelChips(). */
.ch-panel-chips{margin:0 0 4px}
/* Order book: an unpaid order carries a red edge as well as its tag, so it is seen before it is read. */
.tablewrap tr.row-unpaid td:first-child{box-shadow:inset 3px 0 0 var(--red)}

/* ── Wound care database cards — Plya's density (Kevin, 2026-09-23) ──
   Two columns at laptop width, one on a phone. One identity row, one code row, one footer, one row
   of actions; tighter padding than the Discover cards, and every card the same row heights so the
   columns line up. */
.cgrid.wgrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
/* One column below 600px of pane, as .cgrid (the card grid rule v2). After the base rule on purpose:
   equal specificity, so source order decides. */
@container main (max-width:599.98px){.cgrid.wgrid{grid-template-columns:minmax(0,1fr)}}
.wcard{padding:10px 12px;gap:7px;border-radius:10px}
.wc-top{display:grid;grid-template-columns:26px minmax(0,1fr) auto;gap:10px;align-items:start}
.wc-rank{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:7px;
  background:var(--chip,rgba(127,127,127,.12));font-size:12px;font-weight:700;color:var(--t2);font-variant-numeric:tabular-nums}
.wc-id{min-width:0}
.wc-name{display:flex;align-items:center;gap:6px;min-width:0;flex-wrap:wrap}
.wc-name b{font-size:14.5px;line-height:1.25;overflow-wrap:anywhere}
.wc-spec{font-size:11px;padding:1px 7px;border-radius:999px;border:1px solid var(--line2);color:var(--t2);white-space:nowrap}
.wcard .sub{font-size:12.5px;margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wc-money{text-align:right;display:flex;flex-direction:column;align-items:flex-end;gap:2px;min-width:0}
.wc-usd{font-size:16px;font-weight:700;white-space:nowrap;font-variant-numeric:tabular-nums}
.wc-usd i{font-style:normal;font-weight:500;font-size:12px;color:var(--t3)}
.wc-usd.wc-none{font-size:13px;font-weight:500;font-style:italic;color:var(--t3)}
.wc-l{font-size:11px;color:var(--t3);white-space:nowrap}
.wc-outlier{font-size:10.5px;padding:0 6px;line-height:16px;border-color:#d97706;color:#d97706}
.wc-nograft{font-size:10.5px;padding:0 6px;line-height:16px;border-color:#2563eb;color:#2563eb}
.wc-tag{border-color:#7c3aed;color:#7c3aed}
.wcard .dcpt{gap:5px}
.wcard .dchip{padding:2px 8px;font-size:12px}
.wc-foot{font-size:12.5px;color:var(--t2);font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wc-acts{display:flex;gap:6px;align-items:center;margin-top:auto}
.wc-acts>.btn-s{flex:1 1 0;padding-top:6px;padding-bottom:6px}
.wc-more{position:relative;flex:0 0 auto}
.wc-more>summary{list-style:none;cursor:pointer;padding:6px 10px;line-height:1}
.wc-more>summary::-webkit-details-marker{display:none}
.wc-menu{position:absolute;right:0;bottom:calc(100% + 4px);z-index:5;background:var(--card);border:1px solid var(--line);
  border-radius:8px;padding:6px;box-shadow:0 6px 18px rgba(0,0,0,.18);white-space:nowrap}
.wc-more-row{display:flex;justify-content:center;margin:12px 0 4px}

/* THE MENU'S ITEMS (menu.js, 2026-09-24): the open section's list sits under its button. A
   RepOS ↗ item opens the /rep/ screen (same session) while the portal is not at parity.
   [hidden] is restated because display:flex/block outranks the browser's own rule. */
.nav-sub{display:flex;flex-direction:column;gap:1px;margin:1px 0 4px 18px;padding-left:10px;border-left:1px solid var(--line)}
.nav-sub[hidden]{display:none}
.nav-item{display:flex;align-items:center;gap:8px;padding:5px 10px;border-radius:7px;font-size:13px;line-height:18px;color:var(--t2);text-decoration:none}
.nav-item:hover,.nav-item:focus-visible{background:var(--card2);color:var(--t1)}
.nav-item:focus-visible{outline:2px solid var(--acc);outline-offset:1px}
.nav-item.on{color:var(--t1);background:var(--card2);font-weight:500}
.nav-item .ext{margin-left:auto;font-size:10.5px;font-weight:600;letter-spacing:.02em;color:var(--t3);white-space:nowrap}
@media (max-width:900px){ .nav-item{padding:10px 12px;font-size:14.5px} }
/* The old "RepOS" link list is retired (D1): hidden, never rendered, kept only as markup.
   .nav's display:flex outranks the browser's own [hidden], so the empty list still drew its
   top border and padding (15px, offsetHeight-measured) for every account; restate it. */
.nav[hidden]{display:none}
/* RepOS links in the nav (rep audience only). Quieter than the main nav: they open the RepOS app. */
.nav-repos{padding-top:6px;border-top:1px solid var(--line);margin-top:8px}
.nav-repos-h{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--t2);font-weight:600;padding:6px 12px 4px}
.nav-repos-a{display:block;padding:6px 12px;border-radius:8px;font-size:13px;color:var(--t1);text-decoration:none}
.nav-repos-a:hover,.nav-repos-a:focus-visible{background:var(--card2)}
/* ── payout prompt + My business dot ("drive the car first", 2026-09-24) ─────────────────────
   Drawn only when the server says money is waiting on paperwork. [hidden] is restated because
   display:flex below would otherwise outrank the browser's own rule -- see #559. */
.pp-wrap{position:fixed;inset:0;z-index:90;display:flex;align-items:center;justify-content:center;
  padding:16px;background:rgba(5,9,15,.55)}
.pp-wrap[hidden]{display:none}
.pp-box{max-width:420px;width:100%;background:var(--card);border:1px solid var(--line2);border-radius:14px;
  padding:20px 20px 16px;box-shadow:0 18px 48px rgba(0,0,0,.35)}
.pp-msg{margin:0 0 6px;font-size:16px;font-weight:600;line-height:1.4;color:var(--t1)}
.pp-sub{margin:0 0 14px;font-size:13.5px}
.pp-actions{display:flex;gap:8px;flex-wrap:wrap}
.pay-dot{margin-left:auto;width:9px;height:9px;flex:0 0 9px;border-radius:50%;background:var(--red)}

/* Launch readiness (2026-09-25): gates, then the screen x user-type grid. The grid scrolls inside
   its own box on a phone; the page never scrolls sideways. */
.lr-gates{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:0 0 12px}
@media (max-width:1099.98px){.lr-gates{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:759.98px){.lr-gates{grid-template-columns:minmax(0,1fr)}}
.lr-gate{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:10px 12px}
.lr-gate.open{border-color:var(--teal)}
.lr-gate.shut{border-color:var(--red)}
.lr-gate-h{font-weight:600;color:var(--t1);font-size:14px}
.lr-gate-s{color:var(--t2);font-size:12.5px;margin-top:3px}
.lr-meta{margin:0 0 10px}
.lr-wrap{max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--line);border-radius:var(--r);background:var(--card)}
.lr-grid,.lr-items{border-collapse:collapse;width:100%;font-size:12.5px}
.lr-grid th,.lr-grid td,.lr-items th,.lr-items td{border-bottom:1px solid var(--line);padding:5px 6px;text-align:left;vertical-align:top}
.lr-grid thead th{position:sticky;top:0;background:var(--card2);color:var(--t2);font-weight:600;white-space:nowrap}
.lr-grid .lr-sc{min-width:170px;color:var(--t1);font-weight:500}
.lr-grid .lr-grp th{background:var(--card2);color:var(--t3);font-size:11px;text-transform:uppercase;letter-spacing:.04em}
.lr-cell{all:unset;cursor:pointer;display:flex;flex-direction:column;gap:1px;min-width:92px;max-width:170px}
.lr-cell:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
.lr-w{color:var(--t1);font-weight:500}
.lr-t{color:var(--t3);font-size:11px}
.lr-f{color:var(--t2);font-size:11px;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.lr-red{background:var(--red-bg)}
.lr-yellow{background:var(--amber-bg)}
.lr-green{background:var(--teal-bg)}
.lr-stale{opacity:.6}
.lr-detail{margin-top:12px}
.lr-detail h3{margin:0 0 6px;font-size:15px}
.lr-notes{margin:0 0 8px 18px;color:var(--t2);font-size:12.5px}
.lr-i-broken td{color:var(--red)}
.lr-i-placeholder td,.lr-i-empty td,.lr-i-not_exercised td{color:var(--amber)}

/* ── a /rep/ screen inside the portal (M74, 2026-09-26) ─────────────────────────────────────
   #rep/<tab> frames /rep/?embed=1#<tab> (its own chrome hidden). The frame fills the pane down to
   the bottom of the window; the /rep/ screen scrolls inside it. portal.js sets the height. */
#s-rep .hdr{margin-bottom:10px}
.rep-frame{display:block;width:100%;min-height:480px;height:calc(100vh - 140px);border:1px solid var(--line);border-radius:var(--r);background:#0a0f1a}
@media (max-width:900px){ .rep-frame{height:calc(100dvh - 150px)} }

/* Partner first-login tour + Help > How your store works (tour.js, Batch A2 2026-09-26). */
.ptour{position:fixed;inset:0;z-index:1200;background:rgba(6,10,18,.55);display:flex;align-items:center;justify-content:center;padding:16px;box-sizing:border-box}
.ptour-card{position:relative;background:var(--card);color:inherit;border:1px solid var(--line);border-radius:14px;max-width:440px;width:100%;padding:22px 20px 18px;box-sizing:border-box;box-shadow:0 12px 40px rgba(0,0,0,.35)}
.ptour-card h2{font-size:19px;margin:4px 0 8px}
.ptour-card p{font-size:14.5px;line-height:1.5;margin:0 0 14px}
.ptour-k{font-size:12px;letter-spacing:.04em;text-transform:uppercase;opacity:.7}
.ptour-x{position:absolute;top:8px;right:10px;background:none;border:0;color:inherit;font-size:22px;line-height:1;cursor:pointer;padding:6px}
.ptour-dots{display:flex;gap:6px;margin:0 0 14px}
.ptour-dots i{width:7px;height:7px;border-radius:50%;background:var(--line2)}
.ptour-dots i.on{background:var(--accent,#2e7df6)}
.ptour-b{display:flex;justify-content:space-between;gap:10px}
.ptour-links{list-style:none;margin:-4px 0 14px;padding:0;display:flex;flex-direction:column;gap:6px}
.ptour-links li{display:flex;flex-direction:column;gap:1px;min-width:0}
.ptour-ll{font-size:12px;opacity:.75}
.ptour-links a{font-size:14px;font-weight:600;overflow-wrap:anywhere}
.ptour-help .ptour-sec{margin:0 0 10px}
.ptour-help .ptour-sec p{margin:3px 0 0;font-size:14px;line-height:1.45}
/* Send affiliate link panel on a console person card (2026-09-27). */
.k-afl{width:100%;margin:8px 0 0;padding:10px 12px;border:1px solid var(--line,#e6e9ee);border-radius:10px}
.k-afl-msg{white-space:pre-wrap;word-break:break-word;font:13px/1.45 inherit;margin:4px 0 10px;padding:8px 10px;background:var(--card2,#f5f7fa);border-radius:8px}
.k-afl-st{display:block;width:100%}