/*
 * 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:20px 22px}
/* 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}
.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 (Kevin, 2026-09-10): three columns from 1100px up, two from 760px, one below.
   The count follows the viewport, never a card's minimum width, so the portal's own sidebar, a
   browser side panel or 110% zoom can only move a screen across one of these two lines — it can
   never drop a column inside them. Cards shrink to fit (minmax(0,1fr)). Every multi-column grid
   in the portal switches at the same two widths; test/riser-card-grid-rule-smoke.js holds them. */
@media (max-width:1099.98px){
  .g3,.g4,.g5{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:759.98px){
  .g2,.g2w,.g3,.g4,.g5{grid-template-columns:minmax(0,1fr)}
}

/* ── 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}

/* ── 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:start}
@media (max-width:1099.98px){.cgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* One column below 760px lives in the phone block at the end of this file. */

/* ── 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}
@media (max-width:1099.98px){.kboard{grid-auto-columns:calc((100% - 14px) / 2)}}
.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}
  .cgrid{grid-template-columns:minmax(0,1fr)}
  .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%}
  .kboard{grid-auto-columns:85%;scroll-snap-type:x mandatory}
  .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}
.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}
.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))}
}