/* =====================================================================================
   RJ DTC Admin · Round 4 · brand shell · Store CRM + off-menu pages · page.css   (prefix cx-)
   One stylesheet shared by: customers, customer-detail, fit-review, fit-review-detail, tailors,
   tailor-detail, appointments. Source: customers/src/page.css, copied into each page folder by
   customers/src/build.py.
   Load order: _kit/tokens.css -> _kit/base.css -> cloth.css -> data-table -> cards-gallery ->
   app-shell -> overlays -> page-help -> status-feedback -> data-display -> form-controls -> page.css.
   Only what turns the kit's specimen pieces into full-viewport pages. Values come from tokens.
   Two dedicated compositions: .kit-d (desktop /) and .kit-m (phone /m/). No size queries.
   ===================================================================================== */

/* ---------- page ground ---------- */
.cx{background:hsl(var(--background))}
.cx a.btn{text-decoration:none}
.cx [hidden]{display:none!important}

/* ---------- desktop shell (same recipe as the Round 3 reference pages) ---------- */
.kit-d .cx-app{min-height:100vh;border-radius:0;box-shadow:none}
.kit-d .cx-side{position:sticky;top:0;height:100vh;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none}
.kit-d .cx-side::-webkit-scrollbar{display:none}
.kit-d .cx-main{overflow:clip}
.cx-top{position:sticky;top:0;z-index:calc(var(--z-sticky) * 3)}
.cx-top .top-r{gap:var(--s-3)}
.cx-top .crumbs a{color:inherit;text-decoration:none}
.cx-top .crumbs a:hover{color:hsl(var(--foreground))}
.cx-page{width:100%;max-width:var(--content-max);padding:var(--s-6) var(--s-6) var(--s-16)}
.cx-page.wide{max-width:none}
.cx-ph{align-items:flex-end}
.cx-ph .page-title{display:flex;align-items:center;gap:var(--s-3);flex-wrap:wrap}
.cx-ph .page-title .chip{position:relative;top:2px}
.cx-ph p{max-width:72ch}
.cx-ph p .code{color:hsl(var(--foreground))}
.cx-back{display:inline-flex;align-items:center;gap:var(--s-1);margin:0 0 var(--s-3) calc(var(--s-3) * -1)}
.cx-eyebrow{display:block;font:var(--w-semibold) var(--text-micro)/1 var(--font-voice);color:hsl(var(--muted-foreground));margin-bottom:var(--s-2)}

/* off-menu marker in the sidebar (proposed): the page you are on, when the menu has no entry for it */
.cx-offmenu{font-style:normal}
.sb-item .cx-hint{margin-left:auto;font:var(--w-regular) var(--text-micro)/1 var(--font-ui);opacity:.6}

/* ---------- toolbar under the page head ---------- */
.cx-bar{display:flex;align-items:center;gap:var(--s-3);margin-bottom:var(--s-4);flex-wrap:wrap}
.cx-bar .r{margin-left:auto;display:flex;align-items:center;gap:var(--s-2)}
.cx-bar .dt-search{width:320px}
.cx-bar .dt-search kbd{margin-left:auto}
.cx-views{margin-bottom:var(--s-4)}
.cx-views .dt-view{text-decoration:none;color:hsl(var(--muted-foreground))}
.cx-views .dt-view.on{color:hsl(var(--foreground))}
.cx-views a.dt-view:hover{color:hsl(var(--foreground))}

/* ---------- tables ---------- */
.cx-tbl .dt{table-layout:fixed}
.cx-tbl .dt th{top:var(--topbar-h)}
.cx-tbl .dt-wrap{overflow:clip}
.cx-who{display:flex;align-items:center;gap:var(--s-3);min-width:0}
.cx-who .avatar{flex:none}
.cx-who>span:last-child{min-width:0}
.cx-who .dt-t1{cursor:pointer}
.cx-cell2{display:block;font-size:var(--text-small);color:hsl(var(--muted-foreground));white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cx-dl{display:inline-flex;align-items:center;gap:var(--s-2);white-space:nowrap}
.cx-dl .dot{width:7px;height:7px}
.cx-none{color:hsl(var(--muted-foreground))}
.cx-vip{color:hsl(var(--info));font-weight:var(--w-semibold)}
.cx-rate{display:inline-flex;align-items:center;gap:var(--s-1);white-space:nowrap;font-variant-numeric:tabular-nums}
.cx-rate svg{color:hsl(var(--warning))}
.cx-rate small{color:hsl(var(--muted-foreground));font-size:var(--text-small)}
.cx-rank{display:inline-flex;align-items:center;gap:var(--s-2);font-variant-numeric:tabular-nums;white-space:nowrap}
.cx-rank i{display:block;width:56px;height:4px;border-radius:var(--r-pill);background:hsl(var(--muted));overflow:hidden;position:relative}
.cx-rank i::after{content:"";position:absolute;inset:0 auto 0 0;width:var(--v);background:hsl(var(--primary));border-radius:inherit}
.cx-open{display:inline-flex;align-items:center;gap:var(--s-1);white-space:nowrap}
.cx-foot{display:flex;align-items:center;gap:var(--s-3);margin-top:var(--s-4);font-size:var(--text-small);color:hsl(var(--muted-foreground));font-variant-numeric:tabular-nums}
.cx-foot .r{margin-left:auto}
.cx-tbl tr.is-new td:first-child{box-shadow:inset 2px 0 0 hsl(var(--warning))}
.cx-wait.late{color:hsl(var(--warning));font-weight:var(--w-semibold)}

/* ---------- states: one region per state; page.js shows the one asked for ---------- */
.cx-empty{display:flex;flex-direction:column;align-items:center;text-align:center;gap:var(--s-2);padding:var(--s-12) var(--s-6);
  border:1px dashed hsl(var(--secondary-border));border-radius:var(--r-card);background:hsl(var(--card))}
.cx-empty .ico{display:grid;place-items:center;width:48px;height:48px;border-radius:50%;background:hsl(var(--muted));color:hsl(var(--muted-foreground));margin-bottom:var(--s-1)}
.cx-empty h3{font:var(--w-semibold) var(--text-section)/var(--lh-section) var(--font-voice);letter-spacing:var(--tr-section)}
.cx-empty p{max-width:56ch;color:hsl(var(--muted-foreground))}
.cx-empty .row{display:flex;gap:var(--s-2);justify-content:center;margin-top:var(--s-2);flex-wrap:wrap}
.cx-empty.err{border-style:solid;border-color:hsl(var(--destructive)/.3);background:hsl(var(--destructive)/.03)}
.cx-empty.err .ico{background:hsl(var(--destructive)/.1);color:hsl(var(--destructive))}
.cx-empty.sm{padding:var(--s-8) var(--s-5)}
.cx-errmeta{font-size:var(--text-small);color:hsl(var(--muted-foreground))}
.cx-errmeta code{color:hsl(var(--foreground))}
.cx-loadline{display:flex;align-items:center;gap:var(--s-2);font-size:var(--text-small);color:hsl(var(--muted-foreground));margin-bottom:var(--s-4)}
.cx-skrow{display:flex;align-items:center;gap:var(--s-4);height:var(--row);padding:0 var(--s-4);border-bottom:1px solid hsl(var(--border))}
.cx-skrow:last-child{border-bottom:0}
.cx-skrow .skel{flex:none}
.cx-skbox{border:1px solid hsl(var(--border));border-radius:var(--r-card);background:hsl(var(--card));overflow:hidden}
.cx-skpanel{border:1px solid hsl(var(--border));border-radius:var(--r-card);background:hsl(var(--card));padding:var(--s-5);display:flex;flex-direction:column;gap:var(--s-3)}
.cx-alert{margin-bottom:var(--s-4)}

/* ---------- detail pages: panels, two-column layout ---------- */
.cx-grid{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:var(--s-5);align-items:start}
.cx-grid.even{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.cx-col{display:flex;flex-direction:column;gap:var(--s-5);min-width:0}
.cx-panel{min-width:0}
.cx-panel .dd-panel-h .r{margin-left:auto;display:flex;align-items:center;gap:var(--s-2)}
.cx-panel .dd-panel-b>.dt-wrap{border:0;border-radius:0}
.cx-panel.flush .dd-panel-b{padding:0}
.cx-panel.flush .dt th:first-child,.cx-panel.flush .dt th:last-child{border-radius:0}
.cx-sub{font-size:var(--text-small);color:hsl(var(--muted-foreground))}
.cx-kpis{margin-bottom:var(--s-5)}
.kit-d .cx-kpis{grid-template-columns:repeat(5,minmax(0,1fr))}
.cx-kpis .dd-kpi.bad .dd-kpi-v{color:hsl(var(--destructive))}
.cx-facts{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--s-3) var(--s-5);margin:0;font-size:var(--text-body)}
.cx-facts dt{color:hsl(var(--muted-foreground))}
.cx-facts dd{margin:0;min-width:0;overflow-wrap:anywhere}
.cx-facts dd .code{font-size:var(--text-small)}
.cx-tabs{margin:var(--s-2) 0 var(--s-5)}
.cx-tabs .dt-view{background:transparent;border-top:0;border-left:0;border-right:0;cursor:pointer;font:inherit}
.cx-meta{display:flex;align-items:center;gap:var(--s-2) var(--s-3);flex-wrap:wrap;font-size:var(--text-small);color:hsl(var(--muted-foreground))}
.cx-meta .sep{opacity:.5}
.cx-meta .code{color:hsl(var(--foreground))}
.cx-ident{display:flex;align-items:flex-start;gap:var(--s-4)}
.cx-ident .avatar.xl{width:56px;height:56px;font-size:18px;flex:none}
.cx-ident .chips{display:inline-flex;gap:var(--s-2);align-items:center}

/* notes composer (proposed) */
.cx-note{display:flex;gap:var(--s-3);padding:var(--s-3) 0;border-bottom:1px solid hsl(var(--border))}
.cx-note:last-of-type{border-bottom:0}
.cx-note b{font-weight:var(--w-semibold)}
.cx-note p{margin-top:2px}
.cx-note time{font-size:var(--text-small);color:hsl(var(--muted-foreground));margin-left:var(--s-2)}
.cx-compose{display:flex;flex-direction:column;gap:var(--s-2);margin-top:var(--s-3)}
.cx-compose .r{display:flex;align-items:center;gap:var(--s-2);justify-content:flex-end}
.cx-compose .r .q{margin-right:auto;font-size:var(--text-small)}

/* addresses */
.cx-addrs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-5)}
.cx-addr .dd-panel-h{flex-wrap:wrap;row-gap:var(--s-2)}
.cx-addr .dd-panel-h .chips{display:inline-flex;gap:var(--s-2);flex-wrap:wrap}
.cx-addr .cx-facts{grid-template-columns:150px minmax(0,1fr)}
.cx-addr .cx-unmapped{margin-top:var(--s-4);padding-top:var(--s-3);border-top:1px dashed hsl(var(--border));font-size:var(--text-small);color:hsl(var(--muted-foreground))}
.cx-addr .cx-unmapped .code{color:hsl(var(--foreground))}
.cx-addr-f{display:flex;gap:var(--s-3);padding:var(--s-3) var(--s-5);border-top:1px solid hsl(var(--border));font-size:var(--text-small);color:hsl(var(--muted-foreground));font-variant-numeric:tabular-nums}
.cx-addr.incomplete{border-color:hsl(var(--warning)/.45)}
.cx-miss{color:hsl(var(--warning));font-weight:var(--w-medium)}

/* fitquiz */
.cx-kv{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-5)}
.cx-kv h4{font:var(--w-semibold) var(--text-label)/1.2 var(--font-voice);margin-bottom:var(--s-3);color:hsl(var(--muted-foreground))}
.cx-kv .cx-facts{grid-template-columns:auto minmax(0,1fr)}
.cx-kv .cx-facts dd{text-align:right;font-variant-numeric:tabular-nums}
.cx-reco{background:hsl(var(--accent)/.5);border-radius:var(--r-card-inner);padding:var(--s-4)}
.cx-subs{list-style:none;display:flex;flex-direction:column}
.cx-subs li{display:grid;grid-template-columns:48px 96px minmax(0,1fr);gap:var(--s-3);padding:var(--s-3) 0;border-bottom:1px solid hsl(var(--border));align-items:baseline}
.cx-subs li:last-child{border-bottom:0}
.cx-subs .code{font-weight:var(--w-semibold)}
.cx-raw summary{cursor:pointer;display:flex;align-items:center;gap:var(--s-2);font-weight:var(--w-medium);list-style:none}
.cx-raw summary::-webkit-details-marker{display:none}
.cx-raw[open] summary svg{transform:rotate(90deg)}
.cx-raw summary svg{transition:transform var(--motion-hover)}
.cx-raw pre{margin-top:var(--s-3);padding:var(--s-4);background:hsl(var(--muted)/.6);border-radius:var(--r-card-inner);font:var(--text-small)/1.55 var(--font-code);overflow:auto;max-height:280px}

/* gdpr */
.cx-rights{display:flex;flex-direction:column}
.cx-right{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--s-4);align-items:center;padding:var(--s-4) 0;border-bottom:1px solid hsl(var(--border))}
.cx-right:first-child{padding-top:0}
.cx-right:last-child{border-bottom:0;padding-bottom:0}
.cx-right b{display:block;font-weight:var(--w-semibold)}
.cx-right .art{font:var(--w-medium) var(--text-small)/1 var(--font-code);color:hsl(var(--muted-foreground));display:block;margin-bottom:var(--s-1)}
.cx-right p{color:hsl(var(--muted-foreground));font-size:var(--text-small);margin-top:2px;max-width:60ch}
.cx-right.danger b{color:hsl(var(--destructive))}
.cx-right .r{display:flex;gap:var(--s-2);align-items:center}
.cx-rows{display:flex;flex-direction:column}
.cx-rowline{display:flex;align-items:center;gap:var(--s-3);padding:var(--s-3) 0;border-bottom:1px solid hsl(var(--border));font-size:var(--text-body)}
.cx-rowline:last-child{border-bottom:0}
.cx-rowline .r{margin-left:auto;font-variant-numeric:tabular-nums;text-align:right}
.cx-rowline svg{color:hsl(var(--muted-foreground));flex:none}
.cx-rowline .cx-sub{display:block}

/* fit review: photos, deltas, sign-off, decision */
.cx-photos{display:flex;flex-direction:column;gap:var(--s-4)}
.cx-pgroup h4{display:flex;align-items:center;gap:var(--s-2);font:var(--w-semibold) var(--text-label)/1.2 var(--font-voice);margin-bottom:var(--s-2)}
.cx-pgroup h4 small{font:var(--w-regular) var(--text-small)/1 var(--font-ui);color:hsl(var(--muted-foreground))}
.cx-pgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s-3)}
.cx-photo{position:relative;display:block;width:100%;aspect-ratio:3/4;border-radius:var(--r-media);background:var(--studio);overflow:hidden;border:1px solid hsl(var(--border));cursor:zoom-in;padding:0}
.cx-photo .cg-garment{inset:8% 14% 6%}
.cx-photo .cx-plbl{position:absolute;left:var(--s-2);bottom:var(--s-2);z-index:2;height:20px;padding:0 var(--s-2);display:inline-flex;align-items:center;border-radius:var(--r-chip);
  background:hsl(var(--background)/.92);font:var(--w-medium) var(--text-micro)/1 var(--font-ui);color:hsl(var(--foreground))}
.cx-photo:hover{box-shadow:var(--e-card-hover)}
.cx-photo:focus-visible{outline:2px solid hsl(var(--ring));outline-offset:2px}
.cx-photo.slot{cursor:default;background:hsl(var(--muted)/.5);border-style:dashed;display:grid;place-items:center;color:hsl(var(--muted-foreground));font-size:var(--text-small);text-align:center;padding:var(--s-3)}
.cx-photo.slot:hover{box-shadow:none}
.cx-delta .dt td:nth-child(n+2),.cx-delta .dt th:nth-child(n+2){text-align:right}
.cx-delta .dt th:nth-child(n+2) .dt-sort{flex-direction:row-reverse}
.cx-dv{font-variant-numeric:tabular-nums;white-space:nowrap}
.cx-dv.up{color:hsl(var(--info));font-weight:var(--w-semibold)}
.cx-dv.dn{color:hsl(var(--warning));font-weight:var(--w-semibold)}
.cx-dv.same{color:hsl(var(--muted-foreground))}
.cx-quote{border-left:2px solid hsl(var(--border));padding:var(--s-1) 0 var(--s-1) var(--s-4);font-size:var(--text-read);line-height:var(--lh-read)}
.cx-quote+.cx-sub{margin-top:var(--s-2)}
.cx-sign{display:flex;gap:var(--s-3);align-items:flex-start;padding:var(--s-4);border-radius:var(--r-card-inner);background:hsl(var(--success)/.07)}
.cx-sign svg{color:hsl(var(--success));flex:none;margin-top:2px}
.cx-sign.miss{background:hsl(var(--destructive)/.06)}
.cx-sign.miss svg{color:hsl(var(--destructive))}
.cx-sign p{margin-top:2px;color:hsl(var(--muted-foreground));font-size:var(--text-small)}
.cx-sign .code{color:hsl(var(--foreground))}
.cx-decide{position:sticky;top:calc(var(--topbar-h) + var(--s-5))}
.cx-decide .dd-panel-b{display:flex;flex-direction:column;gap:var(--s-4)}
.cx-decide .btns{display:flex;flex-direction:column;gap:var(--s-2)}
.cx-decide .btns .btn{width:100%}
.cx-recorded{display:flex;gap:var(--s-3);align-items:flex-start;padding:var(--s-3) var(--s-4);border-radius:var(--r-card-inner);background:hsl(var(--muted)/.6);font-size:var(--text-small)}
.cx-recorded svg{flex:none;margin-top:1px;color:hsl(var(--success))}
.cx-recorded.warn svg{color:hsl(var(--warning))}
.cx-recorded b{display:block;font-size:var(--text-body)}
.cx-steps{list-style:none;display:flex;flex-direction:column;gap:var(--s-2);font-size:var(--text-small)}
.cx-steps li{display:flex;align-items:center;gap:var(--s-2);color:hsl(var(--muted-foreground))}
.cx-steps li.done{color:hsl(var(--foreground))}
.cx-steps li.done svg{color:hsl(var(--success))}
.cx-steps li.now{color:hsl(var(--foreground));font-weight:var(--w-medium)}
.cx-steps li.now svg{color:hsl(var(--info))}

/* lightbox (overlays dialog, photo size) */
.cx-lb>.k-dialog{width:min(560px,92%)}
.cx-lb .cx-photo{cursor:default;border:0;border-radius:0;aspect-ratio:3/4}
.cx-lb .cx-photo:hover{box-shadow:none}
.cx-lbbar{display:flex;align-items:center;gap:var(--s-2);padding:var(--s-3) var(--s-3) var(--s-3) var(--s-4)}
.cx-lbbar b{flex:1;font:var(--w-semibold) var(--text-card)/1.2 var(--font-voice)}

/* tailor detail */
.cx-steplist{display:flex;flex-direction:column;gap:var(--s-5)}
.cx-step .dd-panel-h{gap:var(--s-3)}
.cx-num{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;flex:none;background:hsl(var(--muted));color:hsl(var(--muted-foreground));
  font:var(--w-semibold) var(--text-micro)/1 var(--font-ui)}
.cx-step.now .cx-num{background:hsl(var(--primary));color:hsl(var(--primary-foreground))}
.cx-step.done .cx-num{background:hsl(var(--success)/.14);color:hsl(var(--success))}
.cx-step.later{opacity:.72}
.cx-step.later .dd-panel-b{display:none}
.cx-formgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-4) var(--s-5)}
.cx-formgrid .full{grid-column:1 / -1}
.cx-svc{display:flex;flex-direction:column;gap:var(--s-2)}
.cx-svcrow{display:grid;grid-template-columns:minmax(0,1fr) 140px 90px 36px;gap:var(--s-2);align-items:center}
.cx-svcrow .cx-usd{font-size:var(--text-small);color:hsl(var(--muted-foreground));font-variant-numeric:tabular-nums;text-align:right}
.cx-svchead{display:grid;grid-template-columns:minmax(0,1fr) 140px 90px 36px;gap:var(--s-2);font-size:var(--text-small);color:hsl(var(--muted-foreground))}
.cx-ckrow{display:flex;align-items:center;gap:var(--s-3);font-size:var(--text-body)}
.cx-stepfoot{display:flex;align-items:center;gap:var(--s-2);justify-content:flex-end;padding-top:var(--s-4);margin-top:var(--s-4);border-top:1px solid hsl(var(--border))}
.cx-stepfoot .q{margin-right:auto;font-size:var(--text-small)}
.cx-link{display:flex;align-items:center;gap:var(--s-2);padding:var(--s-2) var(--s-3);border:1px solid hsl(var(--border));border-radius:var(--r-control);background:hsl(var(--muted)/.5);
  font:var(--text-small)/1.3 var(--font-code);min-width:0}
.cx-link span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cx-score{display:flex;align-items:baseline;gap:var(--s-2)}
.cx-score b{font:var(--w-semibold) var(--text-kpi)/1 var(--font-voice);font-variant-numeric:tabular-nums;letter-spacing:-.01em}

/* appointments cockpit */
.cx-fact{display:grid;grid-template-columns:200px minmax(0,1fr) auto;gap:var(--s-4);align-items:center;padding:var(--s-4) 0;border-bottom:1px solid hsl(var(--border))}
.cx-fact:first-child{padding-top:0}
.cx-fact:last-child{border-bottom:0;padding-bottom:0}
.cx-fact .k{color:hsl(var(--muted-foreground))}
.cx-fact .v{min-width:0}
.cx-fact .v small{display:block;font-size:var(--text-small);color:hsl(var(--muted-foreground));margin-top:2px}
.cx-ready{list-style:none;display:flex;flex-direction:column;gap:var(--s-2);margin-top:var(--s-2);font-size:var(--text-small)}
.cx-ready li{display:flex;align-items:center;gap:var(--s-2)}
.cx-ready li svg{color:hsl(var(--success))}
.cx-ready li.no svg{color:hsl(var(--muted-foreground))}

/* ---------- fixed overlay layers (kit.js stages, sized to the viewport) ---------- */
.cx-layer{position:fixed;inset:0;z-index:var(--z-scrim);pointer-events:none;overflow:hidden}
.cx-layer>.k-sheet,.cx-layer>.k-dialog,.cx-layer.open>.k-scrim{pointer-events:auto}
.kit-d .cx-help-layer{left:var(--sidebar-w)}
.kit-d .cx-help-layer>.k-sheet{top:var(--topbar-h)}
.kit-d .cx-help-layer>.k-scrim{top:var(--topbar-h)}
.cx-help-layer .k-sheet{display:flex;flex-direction:column}
.cx-cmd-layer>.k-dialog{top:14vh;width:auto;background:transparent;box-shadow:none;border-radius:var(--r-frame);overflow:visible;transform:translate(-50%,var(--pop-shift)) scale(.985)}
.cx-cmd-layer.open>.k-dialog{transform:translate(-50%,0)}
.cx-cmd-in{flex:1;min-width:0;border:0;outline:0;background:transparent;font:var(--w-regular) var(--text-read)/1 var(--font-ui);color:hsl(var(--foreground))}
.cx-cmd-in::placeholder{color:hsl(var(--muted-foreground))}
.cx-dlg .ov-dg-b{display:flex;flex-direction:column;gap:var(--s-3)}
.cx-dlg .ov-dg-b p{color:hsl(var(--muted-foreground))}
.cx-dlg .ov-dg-b p b{color:hsl(var(--foreground))}
.cx-typed{display:flex;flex-direction:column;gap:var(--s-1)}

/* toasts */
.cx-toasts{position:fixed;z-index:var(--z-toast);display:flex;flex-direction:column;gap:var(--toast-gap);pointer-events:none}
.kit-d .cx-toasts{left:calc(var(--sidebar-w) + var(--s-6));bottom:var(--s-6);width:360px}
.cx-toasts .toast{pointer-events:auto}

/* preview-state switcher (prototype only, not product UI) */
.cx-proto{position:fixed;z-index:var(--z-toast);display:flex;align-items:center;gap:var(--s-2);transition:opacity var(--motion-hover)}
.kit-d .cx-proto{right:var(--s-5);bottom:var(--s-5)}
.cx-proto>.k-anchor>button{display:inline-flex;align-items:center;gap:var(--s-2);height:var(--control-h-sm);padding:0 var(--s-3);border-radius:var(--r-pill);
  border:1px dashed hsl(var(--input));background:hsl(var(--background)/.94);backdrop-filter:blur(6px);box-shadow:var(--e-pop);font-size:var(--text-small);color:hsl(var(--muted-foreground))}
.cx-proto>.k-anchor>button b{font-weight:var(--w-semibold);color:hsl(var(--foreground))}
body:has(.cx-layer.open) .cx-proto{opacity:0;pointer-events:none}

/* ======================================== PHONE ======================================== */
.kit-m .cx-phone{min-height:100vh;display:flex;flex-direction:column;background:hsl(var(--background))}
.kit-m .cx-phone .p-bar{position:sticky;top:0;z-index:calc(var(--z-sticky) * 3)}
.cx-pcrumb{display:flex;align-items:center;gap:var(--s-2)}
.cx-pcrumb .cx-proto{position:static;margin-left:auto}
.cx-pcrumb .cx-proto>.k-anchor>button{box-shadow:none;height:28px;padding:0 10px;font-size:var(--text-micro)}
.kit-m .p-head{flex-wrap:wrap}
.kit-m .p-head .page-title{display:flex;align-items:center;gap:var(--s-2);flex-wrap:wrap}
.kit-m .p-head>div{min-width:0;flex:1}
.kit-m .cx-pback{display:inline-flex;align-items:center;gap:var(--s-1);height:var(--control-h-m);padding:0 var(--s-4);font-size:var(--text-body);color:hsl(var(--muted-foreground));text-decoration:none}
.kit-m .cx-body{flex:1;display:flex;flex-direction:column;gap:var(--s-4);padding:0 0 var(--s-6)}
.kit-m .cx-body>.cx-pad,.kit-m .cx-pad{padding-left:var(--s-4);padding-right:var(--s-4)}
.kit-m .cx-ptools{display:flex;flex-direction:column;gap:var(--s-2);padding:0 var(--s-4) var(--s-3);border-bottom:1px solid hsl(var(--border))}
.kit-m .cx-ptools .dt-search{width:100%}
.kit-m .cx-pscroll{display:flex;gap:var(--s-2);overflow-x:auto;scrollbar-width:none;margin:0 calc(var(--s-4) * -1);padding:0 var(--s-4)}
.kit-m .cx-pscroll::-webkit-scrollbar{display:none}
.kit-m .cx-pscroll .dt-fchip{flex:none;height:var(--control-h-m)}
.kit-m .cx-ptabs{display:flex;gap:var(--s-5);overflow-x:auto;scrollbar-width:none;padding:0 var(--s-4);border-bottom:1px solid hsl(var(--border))}
.kit-m .cx-ptabs::-webkit-scrollbar{display:none}
.kit-m .cx-ptabs .dt-view{flex:none;height:var(--control-h-m);background:transparent;border-top:0;border-left:0;border-right:0;font:inherit;cursor:pointer;text-decoration:none;color:hsl(var(--muted-foreground))}
.kit-m .cx-ptabs .dt-view.on{color:hsl(var(--foreground))}
.kit-m .cx-plist{border-top:1px solid hsl(var(--border));border-bottom:1px solid hsl(var(--border))}
.kit-m .cx-plist .dt-li{grid-template-columns:auto minmax(0,1fr) auto;padding:var(--s-3) var(--s-4);text-decoration:none;color:inherit}
.kit-m .cx-plist .dt-li .avatar{margin-top:2px}
.kit-m .cx-plist .dt-li-m{font-family:var(--font-ui)}
.kit-m .cx-plist .dt-li-r{font-variant-numeric:tabular-nums;font-size:var(--text-small);color:hsl(var(--muted-foreground))}
.kit-m .cx-plist .dt-li-r b{color:hsl(var(--foreground));font-size:14px;font-weight:var(--w-semibold)}
.kit-m .cx-plist .dt-li-r svg{color:hsl(var(--muted-foreground))}
.kit-m .cx-pfoot{text-align:center;font-size:var(--text-small);color:hsl(var(--muted-foreground));font-variant-numeric:tabular-nums}
.kit-m .cx-psec{display:flex;flex-direction:column;gap:var(--s-3);padding:0 var(--s-4)}
.kit-m .cx-psec>h2,.kit-m .cx-psec-h{display:flex;align-items:center;gap:var(--s-2);font:var(--w-semibold) var(--text-section)/var(--lh-section) var(--font-voice);letter-spacing:var(--tr-section)}
.kit-m .cx-psec-h .r{margin-left:auto;font:var(--w-regular) var(--text-small)/1 var(--font-ui);color:hsl(var(--muted-foreground))}
.kit-m .cx-pcard{border:1px solid hsl(var(--border));border-radius:var(--r-card);background:hsl(var(--card));padding:var(--s-4);display:flex;flex-direction:column;gap:var(--s-3)}
.kit-m .cx-pcard.flush{padding:0;overflow:hidden}
.kit-m .cx-pcard .cx-facts{grid-template-columns:auto minmax(0,1fr)}
.kit-m .cx-pcard .cx-facts dd{text-align:right}
.kit-m .cx-kpis{margin:0;grid-template-columns:repeat(2,minmax(0,1fr))}
.kit-m .cx-kpis .dd-kpi:last-child{grid-column:1 / -1}
.kit-m .cx-ident .avatar.xl{width:48px;height:48px;font-size:16px}
.kit-m .cx-pgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
.kit-m .cx-kv{grid-template-columns:minmax(0,1fr)}
.kit-m .cx-addrs{grid-template-columns:minmax(0,1fr)}
.kit-m .cx-addr .cx-facts{grid-template-columns:120px minmax(0,1fr)}
.kit-m .cx-addr .cx-facts dd{text-align:left}
.kit-m .cx-right{grid-template-columns:minmax(0,1fr);gap:var(--s-3)}
.kit-m .cx-right .r .btn{flex:1}
.kit-m .cx-fact{grid-template-columns:minmax(0,1fr) auto;gap:var(--s-1) var(--s-3)}
.kit-m .cx-fact .k{grid-column:1 / -1}
.kit-m .cx-formgrid{grid-template-columns:minmax(0,1fr)}
.kit-m .cx-svcrow,.kit-m .cx-svchead{grid-template-columns:minmax(0,1fr) 92px var(--control-h-m)}
.kit-m .cx-svcrow .cx-usd{display:none}
.kit-m .cx-svchead span:nth-child(3){display:none}
.kit-m .cx-step .dd-panel-b{padding:var(--s-4)}
.kit-m .cx-subs li{grid-template-columns:40px minmax(0,1fr)}
.kit-m .cx-subs li .cx-sub{grid-column:2}
.kit-m .cx-empty{margin:0 var(--s-4);padding:var(--s-8) var(--s-5)}
.kit-m .cx-loadline{padding:0 var(--s-4);margin:0}
.kit-m .cx-skbox{margin:0 var(--s-4)}
.kit-m .cx-alert{margin:0 var(--s-4)}
.kit-m .sf-alert .act .btn{height:var(--control-h-m)}
.kit-m .cx-mrow{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--s-1) var(--s-3);padding:var(--s-3) var(--s-4);border-bottom:1px solid hsl(var(--border))}
.kit-m .cx-mrow:last-child{border-bottom:0}
.kit-m .cx-mrow .t{font-weight:var(--w-semibold)}
.kit-m .cx-mrow .s{grid-column:1 / -1;font-size:var(--text-small);color:hsl(var(--muted-foreground))}
.kit-m .cx-mrow .r{text-align:right;font-variant-numeric:tabular-nums}

/* phone: the one primary action sits at the bottom, in thumb reach */
.kit-m .cx-actbar{position:sticky;bottom:var(--tabbar-h);z-index:calc(var(--z-sticky) * 2);display:flex;gap:var(--s-2);align-items:center;
  padding:var(--s-3) var(--s-4);background:hsl(var(--background)/.96);backdrop-filter:blur(8px);border-top:1px solid hsl(var(--border))}
.kit-m .cx-actbar .btn{flex:1;height:var(--control-h-m-lg);font-size:var(--text-btn-lg);min-width:0}
.kit-m .cx-actbar .btn.fit{flex:none}
.kit-m .cx-actbar .msg{flex:1;font-size:var(--text-small);color:hsl(var(--muted-foreground));min-width:0}
.kit-m .tabbar{bottom:0}

/* phone sheets */
.kit-m .cx-layer>.k-sheet.k-bottom{display:flex;flex-direction:column}
.kit-m .cx-sheet-h{display:flex;align-items:center;gap:var(--s-2);min-height:52px;padding:0 var(--s-2) 0 var(--s-4);border-bottom:1px solid hsl(var(--border));flex:none}
.kit-m .cx-sheet-h b{flex:1;font:var(--w-semibold) var(--text-section)/1.2 var(--font-voice);letter-spacing:var(--tr-section)}
.kit-m .cx-sheet-b{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:var(--s-4);display:flex;flex-direction:column;gap:var(--s-3)}
.kit-m .cx-sheet-f{display:flex;flex-direction:column;gap:var(--s-2);padding:var(--s-3) var(--s-4) var(--s-5);border-top:1px solid hsl(var(--border))}
.kit-m .cx-sheet-f .btn{width:100%;height:var(--control-h-m-lg)}
.kit-m .cx-cmd-sheet .sh-cmd{width:100%;border:0;border-radius:0;box-shadow:none;display:flex;flex-direction:column;height:100%}
.kit-m .cx-cmd-sheet .sh-pop-l{max-height:none;flex:1}
.kit-m .cx-cmd-sheet .sh-cmd-f{display:none}
.kit-m .cx-toasts{left:var(--s-3);right:var(--s-3);bottom:calc(var(--tabbar-h) + var(--control-h-m-lg) + var(--s-8))}
.kit-m .cx-help-layer .ph-d-body{padding:0 var(--s-4) var(--s-5)}
.kit-m .cx-help-layer .ph-d-head{padding:var(--s-2) var(--s-2) var(--s-3) var(--s-4)}
.kit-m .cx-lb>.k-sheet .cx-photo{border-radius:0}
.kit-m .cx-menu .sh-bs-body{overflow-y:auto}

/* round-4 look fixes */
.cx-rowline a{text-decoration:none;color:hsl(var(--foreground))}
.cx-rowline a:hover{text-decoration:underline}
.cx-ph .cx-meta+.cx-meta{margin-top:var(--s-1)}
.cx-score{margin-bottom:var(--s-4)}
.cx-step.later .dd-panel-h{border-bottom:0}
.cx-views .r .dt-search{margin-bottom:var(--s-1)}
.kit-m .cx-kpis{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-2)}
.kit-m .cx-kpis .dd-kpi{padding:var(--s-3)}
.kit-m .cx-kpis .dd-kpi:last-child{grid-column:auto}
.kit-m .cx-kpis .dd-kpi-v{font-size:20px}
.kit-m .cx-kpis .dd-kpi-k{font-size:var(--text-micro)}
.kit-m .cx-plist .dt-li-s{flex-wrap:wrap;row-gap:var(--s-1)}
.cx-vip{white-space:nowrap}
.kit-m .cx-meta+.cx-meta{margin-top:var(--s-1)}