/* =====================================================================================
   RJ DTC Admin · Round 4 · brand Support area · su.css   (prefix su-)
   Shared by /support, /support/[id], /support/categories, /support/templates and
   /support/training-pairs. Loads after the _kit mirror (tokens, base, data-table, cards-gallery,
   app-shell, overlays, page-help, status-feedback, data-display, form-controls).
   Turns the kit's specimen pieces into full-viewport pages. Values come from tokens only.
   Two dedicated compositions: .kit-d (desktop /) and .kit-m (phone /m/). No size queries.
   ===================================================================================== */

.su{background:hsl(var(--background))}
.su a.btn{text-decoration:none}
.su [hidden]{display:none!important}

/* ---------- desktop shell: sidebar and top bar stay put while the page scrolls ---------- */
.kit-d .su-app{min-height:100vh;border-radius:0;box-shadow:none;overflow:visible}
.kit-d .su-side{position:sticky;top:0;height:100vh;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none}
.kit-d .su-side::-webkit-scrollbar{display:none}
.kit-d .su-main{overflow:clip}
.su-top{position:sticky;top:0;z-index:calc(var(--z-sticky) * 3)}
.su-top .top-r{gap:var(--s-3)}
.su-page{width:100%;max-width:var(--content-max);padding:var(--s-6) var(--s-6) var(--s-16)}
.su-ph{margin-bottom:var(--s-4)}
.su-ph .page-title{display:flex;align-items:center;gap:var(--s-3)}
.su-ph .cg-count{position:relative;top:1px}
.su-ph .ph-r{margin-left:auto}

/* ---------- Support area tabs (proposed: the four Support pages side by side) ---------- */
.su-tabs{display:flex;gap:var(--s-1);border-bottom:1px solid hsl(var(--border));margin-bottom:var(--s-1)}
.su-tabs a{display:inline-flex;align-items:center;gap:var(--s-2);height:40px;padding:0 var(--s-3);margin-bottom:-1px;border-bottom:2px solid transparent;
  font:var(--w-medium) var(--text-body)/1 var(--font-voice);color:hsl(var(--muted-foreground));text-decoration:none;white-space:nowrap;
  transition:color var(--motion-hover),border-color var(--motion-hover)}
.su-tabs a:hover{color:hsl(var(--foreground))}
.su-tabs a.on{color:hsl(var(--foreground));border-bottom-color:hsl(var(--primary));font-weight:var(--w-semibold)}
.su-tabs a:focus-visible{outline:2px solid hsl(var(--ring));outline-offset:-2px;border-radius:var(--r-control)}
.su-tabs .n{font:var(--w-medium) var(--text-micro)/1 var(--font-ui);font-variant-numeric:tabular-nums;color:hsl(var(--muted-foreground));
  background:hsl(var(--muted));padding:3px 6px;border-radius:var(--r-pill)}
.su-tabs a.on .n{background:hsl(var(--accent));color:hsl(var(--accent-foreground))}

/* ---------- sticky toolbar ---------- */
.su-bar{position:sticky;top:var(--topbar-h);z-index:calc(var(--z-sticky) * 2);display:flex;align-items:center;gap:var(--s-3);
  margin:0 calc(var(--s-6) * -1);padding:var(--s-3) var(--s-6);background:hsl(var(--background));border-bottom:1px solid hsl(var(--border))}
.su-bar .r{margin-left:auto;display:flex;align-items:center;gap:var(--s-2)}
.su-search{width:320px}
.su-search kbd{margin-left:auto}
.su-body{padding-top:var(--s-5)}
.su-card{background:hsl(var(--card));border:1px solid hsl(var(--border));border-radius:var(--r-card)}
.su-wired{margin-top:var(--s-4)}
.su-loadline{display:inline-flex;align-items:center;gap:var(--s-2);font-size:var(--text-small);color:hsl(var(--muted-foreground))}
.su-empty{padding:var(--s-12) var(--s-6)}
.su-empty p b{color:hsl(var(--foreground));font-weight:var(--w-semibold)}
.su-err{padding:var(--s-12) var(--s-6)}

/* ---------- list tables ---------- */
.su-tbl .dt{table-layout:fixed}
.su-tbl .dt th{top:calc(var(--topbar-h) + var(--su-bar-h, 58px))}
.su-tbl .dt td{height:auto;padding-top:var(--s-3);padding-bottom:var(--s-3)}
.su-trow{cursor:pointer}
.su-trow:hover td{background:hsl(var(--muted)/.5)}
.su-trow:focus-visible{outline:2px solid hsl(var(--ring));outline-offset:-2px}
.su-c-sev{text-align:center}
.su-sev{width:8px;height:8px}
.su-subj{display:flex;flex-direction:column;gap:3px;min-width:0}
.su-subj .dt-t1{font-weight:var(--w-medium);color:hsl(var(--foreground));text-decoration:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.su-trow.unread .su-subj .dt-t1{font-weight:var(--w-semibold)}
.su-subj a.dt-t1:hover{text-decoration:underline;text-decoration-color:hsl(var(--foreground)/.3)}
.su-prev{font-size:var(--text-small);color:hsl(var(--muted-foreground));overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.su-prev2{font-size:var(--text-small);color:hsl(var(--muted-foreground));display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.su-q2{white-space:normal!important;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.su-key{font-size:var(--text-micro)}
.su-slas{display:flex;flex-wrap:wrap;gap:var(--s-1)}
.su-sla{gap:4px;font-variant-numeric:tabular-nums}
.su-sla svg{flex:none}
.su-sla.ok{color:hsl(var(--muted-foreground));background:hsl(var(--muted))}
.su-tbl .nw{white-space:nowrap}
.su-tbl .dt-pager .r{color:hsl(var(--muted-foreground))}
.su-num{font-variant-numeric:tabular-nums}
.su-tone{display:inline-flex;align-items:center;gap:6px;font-size:var(--text-small);color:hsl(var(--muted-foreground))}
.su-tone.on{color:hsl(var(--foreground))}
.su-skrow td{height:var(--row)}
.su-skrow .skel{display:block}
.su-nores .su-empty{border:1px dashed hsl(var(--secondary-border));border-radius:var(--r-card)}

/* ---------- fixed overlay layers (kit.js stages sized to the viewport) ---------- */
.su-layer{position:fixed;inset:0;z-index:var(--z-scrim);pointer-events:none;overflow:hidden}
.su-layer>.k-sheet,.su-layer>.k-dialog,.su-layer.open>.k-scrim{pointer-events:auto}
.kit-d .su-help-layer{left:var(--sidebar-w)}
.kit-d .su-help-layer>.k-sheet,.kit-d .su-help-layer>.k-scrim{top:var(--topbar-h)}
.su-help-layer .k-sheet{display:flex;flex-direction:column}
.su-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)}
.su-cmd-layer.open>.k-dialog{transform:translate(-50%,0)}
.su-cmd-field{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))}
.su-cmd-field::placeholder{color:hsl(var(--muted-foreground))}
.sh-row.act{background:hsl(var(--accent))}

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

/* preview-state switcher (prototype only, not product UI) */
.su-proto{position:fixed;z-index:var(--z-toast);display:flex;align-items:center;gap:var(--s-2);transition:opacity var(--motion-hover)}
.kit-d .su-proto{right:var(--s-5);bottom:var(--s-5)}
.su-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))}
.su-proto>.k-anchor>button b{font-weight:var(--w-semibold);color:hsl(var(--foreground))}
.su-proto .k-pop{right:0;left:auto}
body:has(.su-layer.open) .su-proto{opacity:0;pointer-events:none}

/* ---------- sheets ---------- */
.su-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}
.su-sheet-h b{flex:1;font:var(--w-semibold) var(--text-section)/1.2 var(--font-voice);letter-spacing:var(--tr-section)}
.su-sheet-b{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain}
.su-layer .ov-sh-b{overflow-y:auto}
.su-tp-lock{display:flex;gap:var(--s-2);align-items:flex-start;padding:var(--s-3);border-left:2px solid hsl(var(--locked));background:hsl(var(--muted));border-radius:0 var(--r-control) var(--r-control) 0;
  font-size:var(--text-body);color:hsl(var(--foreground))}
.su-tp-lock svg{margin-top:3px;color:hsl(var(--locked));flex:none}
.su-tp-lock b{display:block;font:var(--w-semibold) var(--text-small)/1.3 var(--font-voice);color:hsl(var(--muted-foreground));margin-bottom:var(--s-1)}
.su-tp-lock p{line-height:var(--lh-body)}
.su-cnt{display:flex;justify-content:flex-end;margin-top:6px}
.su-facts{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--s-2) var(--s-4);margin:0;font-size:var(--text-body)}
.su-facts dt{color:hsl(var(--muted-foreground))}
.su-facts dd{margin:0;text-align:right;font-variant-numeric:tabular-nums}
.su-facts .dd-conf{justify-content:flex-end}
.su-sug{padding:var(--s-3);border:1px solid hsl(var(--info)/.3);background:hsl(var(--info)/.04);border-radius:var(--r-control)}
.su-sug .lbl{display:flex;align-items:center;gap:6px;color:hsl(var(--info))}
.su-sug p{font-size:var(--text-body);line-height:var(--lh-body)}
.su-tsh-chips{display:flex;gap:var(--s-2);flex-wrap:wrap}
.su-tsh-subj{font-size:var(--text-body)}
.su-catmenu{max-height:280px;overflow-y:auto}
.su-selbtn{height:var(--control-h)}

/* =============================================== THREAD (/support/[id]) =============================================== */
.su-thread-app .su-main{overflow:visible}
.kit-d .su-ticket{grid-template-columns:minmax(0,1fr) 372px;min-height:calc(100vh - var(--topbar-h));align-items:stretch}
.kit-d .su-tmain{min-height:calc(100vh - var(--topbar-h))}
.su-th-t{font:var(--w-semibold) 22px/1.25 var(--font-voice);font-stretch:var(--font-stretch-title);letter-spacing:-.01em}
.kit-d .su-th{padding:var(--s-5) var(--s-6) var(--s-4)}
.kit-d .su-thread{padding:var(--s-6);max-width:880px;width:100%;gap:var(--s-5)}
.su-ai-src{margin-top:var(--s-3);font-size:var(--text-small);color:hsl(var(--muted-foreground))}
.su-ai-src .code{font-size:var(--text-micro)}
.dd-ai.dismissed{display:none}
.kit-d .su-compose{position:sticky;bottom:0;z-index:var(--z-sticky);padding:var(--s-3) var(--s-6) var(--s-4)}
.su-compose .dd-compose-box{background:hsl(var(--background))}
.su-compose .su-manage{margin-left:var(--s-1)}
.su-compose .dd-compose-f .r{margin-left:auto;display:flex;align-items:center;gap:var(--s-3)}
.su-tripwire{margin-bottom:var(--s-3)}
.su-sendnw{margin-top:var(--s-2)}
.dd-msg.su-new .dd-bub{animation:su-in var(--motion-toast-in)}
@keyframes su-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.dd-msg.su-new .dd-bub{animation:none}}
.su-tload{padding:var(--s-6);display:flex;flex-direction:column;gap:var(--s-5);flex:1}
.su-skmsg{display:grid;grid-template-columns:28px minmax(0,1fr);gap:var(--s-3);max-width:640px}
.su-skmsg.me{margin-left:auto;width:60%}
.su-skmsg .skel{display:block}
.su-terr{flex:1}
.su-nwrap{padding:var(--s-4) var(--s-6) 0}
.su-nwrap .su-wired{margin-top:0}

/* case rail */
.kit-d .su-rail{position:sticky;top:var(--topbar-h);height:calc(100vh - var(--topbar-h));overflow-y:auto;overscroll-behavior:contain;padding:0 0 var(--s-16);
  background:hsl(var(--muted)/.35);border-left:0;display:block}
.su-rs{padding:var(--s-5);border-bottom:1px solid hsl(var(--border));display:flex;flex-direction:column;gap:var(--s-3)}
.su-rs:last-child{border-bottom:0}
.su-rs-h{display:flex;align-items:baseline;justify-content:space-between}
.su-rs-h h4{font:var(--w-semibold) var(--text-card)/1.2 var(--font-voice);letter-spacing:-.005em}
.su-rs-h [data-su-saved]{display:inline-flex;align-items:center;gap:4px}
.su-sel .lbl{margin-bottom:6px}
.su-sel .k-anchor,.su-pay .k-anchor,.su-psheet .k-anchor{display:block;width:100%}
.su-selbtn{width:100%}
.su-sel .k-pop{left:0;right:0}
.su-dl{margin-top:var(--s-1)}
.su-sub-h{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s-2);flex-wrap:wrap}
.su-sub-h b{font:var(--w-semibold) var(--text-body)/1.3 var(--font-voice)}
.su-sub-h .q{font-size:var(--text-small)}
.su-tlh{margin-top:var(--s-2)}
.su-ladder{list-style:none;display:flex;flex-direction:column;gap:6px;margin:0;padding:0}
.su-ladder li{display:grid;grid-template-columns:24px minmax(0,1fr) auto;gap:var(--s-2);align-items:center;padding:var(--s-2) var(--s-3);border:1px solid hsl(var(--border));
  border-radius:var(--r-control);background:hsl(var(--card))}
.su-ladder li b{display:block;font:var(--w-semibold) var(--text-small)/1.3 var(--font-voice)}
.su-ladder li small{display:block;font-size:var(--text-micro);color:hsl(var(--muted-foreground));margin-top:1px}
.su-lad-n{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font:var(--w-semibold) var(--text-micro)/1 var(--font-ui);
  border:1px solid hsl(var(--border));color:hsl(var(--muted-foreground));background:hsl(var(--background))}
.su-ladder li.done .su-lad-n{border-color:hsl(var(--success)/.45);color:hsl(var(--success));background:hsl(var(--success)/var(--status-soft-alpha))}
.su-ladder li.cur{border-color:hsl(var(--primary)/.45);box-shadow:0 0 0 1px hsl(var(--primary)/.25);background:hsl(var(--accent))}
.su-ladder li.cur .su-lad-n{background:hsl(var(--primary));border-color:hsl(var(--primary));color:hsl(var(--primary-foreground))}
.su-ladder li.next{border-style:dashed;background:transparent}
.su-clocks{display:flex;flex-direction:column;gap:6px;padding:var(--s-1) 0}
.su-clocks>div{display:flex;align-items:center;justify-content:space-between;gap:var(--s-2);font-size:var(--text-small);color:hsl(var(--muted-foreground))}
.su-ev,.su-pay{display:flex;flex-direction:column;gap:var(--s-2);padding:var(--s-3);border:1px solid hsl(var(--border));border-radius:var(--r-card);background:hsl(var(--card))}
.su-evrow{display:flex;align-items:center;justify-content:space-between;gap:var(--s-3);font-size:var(--text-body)}
.su-num{display:inline-flex}
.su-evrow .field{width:112px;height:var(--control-h-sm)}
.su-evrow input{width:48px;border:0;outline:0;background:transparent;font-variant-numeric:tabular-nums;text-align:right}
.su-ck{display:flex;align-items:flex-start;gap:var(--s-2);font-size:var(--text-body);line-height:1.35;cursor:pointer}
.su-ck .cb{margin-top:2px;flex:none}
.su-adv{align-self:flex-start}
.su-adv.ready{background:hsl(var(--primary));color:hsl(var(--primary-foreground));border-color:hsl(var(--primary))}
.su-plain{border:0;outline:0;background:transparent;font:var(--w-regular) var(--text-code)/1 var(--font-code);min-width:0}
.su-payf{display:flex;gap:var(--s-2);align-items:center}
.su-deny{color:hsl(var(--destructive))}
.su-lock{margin:0}
.su-refund{display:flex;flex-direction:column;gap:2px}
.su-refund .btn{align-self:flex-start}
.su-nocase{display:flex;flex-direction:column;gap:var(--s-2);font-size:var(--text-body)}
.su-nocase .btn{align-self:flex-start}
.su-rail .dd-tl{margin:0}

/* ---------- template picker ---------- */
.su-tp{display:grid;grid-template-columns:280px minmax(0,1fr);gap:var(--s-4);min-height:0}
.su-tpl-b{padding:0!important}
.kit-d .su-tpl .su-tp{height:100%}
.su-tp-list{display:flex;flex-direction:column;padding:var(--s-2);border-right:1px solid hsl(var(--border));overflow-y:auto}
.su-tp-list .mi{height:auto;padding:var(--s-2);align-items:flex-start;gap:var(--s-2)}
.su-tp-list .mi .grow{display:flex;flex-direction:column;gap:2px;min-width:0}
.su-tp-list .mi small{font-size:var(--text-micro);color:hsl(var(--muted-foreground));overflow:hidden;text-overflow:ellipsis}
.su-tp-list .mi[aria-disabled=true]{color:hsl(var(--muted-foreground))}
.su-tp-list .mi.on{background:hsl(var(--accent));color:hsl(var(--accent-foreground))}
.su-tp-prev{padding:var(--s-4) var(--s-5) var(--s-4) 0;overflow-y:auto}
.su-tp-prev [data-su-tpbody]{display:flex;flex-direction:column;gap:var(--s-3)}
.su-tp-prev h3{font:var(--w-semibold) var(--text-section)/1.2 var(--font-voice);letter-spacing:var(--tr-section)}
.su-tp-empty{padding:var(--s-8) 0}

/* =============================================== CATEGORIES =============================================== */
.su-cat-grid{display:grid;grid-template-columns:minmax(0,1fr) 400px;gap:var(--s-5);align-items:start;padding-top:var(--s-5)}
.su-treecard .dd-panel-h .r{margin-left:auto}
.su-tree{list-style:none;margin:0;padding:var(--s-2) 0}
.su-tr-p details>summary{list-style:none;display:flex;align-items:center;gap:var(--s-2);height:48px;padding:0 var(--s-4);cursor:pointer;border-radius:var(--r-control);
  transition:background-color var(--motion-hover)}
.su-tr-p details>summary::-webkit-details-marker{display:none}
.su-tr-p details>summary:hover{background:hsl(var(--muted)/.6)}
.su-tr-p details>summary:focus-visible{outline:2px solid hsl(var(--ring));outline-offset:-2px}
.su-tr-p summary b{font:var(--w-semibold) var(--text-card)/1.2 var(--font-voice)}
.su-tr-p summary .code{font-size:var(--text-micro)}
.su-tr-cv{color:hsl(var(--muted-foreground));transition:transform var(--motion-hover);flex:none}
.su-tr-p details[open]>summary .su-tr-cv{transform:rotate(90deg)}
.su-tr-ic{display:grid;place-items:center;width:28px;height:28px;border-radius:var(--r-control);background:hsl(var(--accent));color:hsl(var(--accent-foreground));flex:none}
.su-tr-n{margin-left:auto;font-size:var(--text-small);color:hsl(var(--muted-foreground));font-variant-numeric:tabular-nums}
.su-tr-c{list-style:none;margin:0 0 var(--s-2) calc(var(--s-4) + 52px);padding:0 var(--s-4) 0 0;border-left:1px solid hsl(var(--border))}
.su-tr-c li{display:flex;align-items:center;gap:var(--s-3);height:38px;padding-left:var(--s-4);font-size:var(--text-body);position:relative}
.su-tr-dot{position:absolute;left:-1px;width:10px;height:1px;background:hsl(var(--border))}
.su-tr-ord{margin-left:auto;font-size:var(--text-micro);font-variant-numeric:tabular-nums}
.su-tr-none{margin:0 0 var(--s-3) calc(var(--s-4) + 52px);font-size:var(--text-small);color:hsl(var(--muted-foreground))}
.su-trskw{padding:var(--s-3) var(--s-4)}
.su-trsk{display:flex;align-items:center;gap:var(--s-3);height:44px}
.su-pol{position:sticky;top:calc(var(--topbar-h) + var(--s-5))}
.su-poltbl{width:100%;font-size:var(--text-body);border-collapse:collapse}
.su-poltbl th{text-align:left;font:var(--w-semibold) var(--text-small)/1.2 var(--font-voice);color:hsl(var(--muted-foreground));padding:var(--s-2) var(--s-4);border-bottom:1px solid hsl(var(--border))}
.su-poltbl td{padding:var(--s-2) var(--s-4);border-bottom:1px solid hsl(var(--border));vertical-align:top}
.su-poltbl b{font-weight:var(--w-semibold)}
.su-polnote{padding:var(--s-3) var(--s-4);margin:0}

/* ======================================================== PHONE ======================================================== */
.kit-m .su-phone{min-height:100vh;display:flex;flex-direction:column;background:hsl(var(--background))}
.kit-m .su-phone .p-bar{position:sticky;top:0;z-index:calc(var(--z-sticky) * 3)}
.su-pbar-t{font:var(--w-semibold) 15px/1 var(--font-voice)}
.su-pcrumb{display:flex;align-items:center;gap:var(--s-2)}
.su-pcrumb .su-proto{position:static;margin-left:auto}
.su-pcrumb .su-proto>.k-anchor>button{box-shadow:none;height:28px;padding:0 10px;font-size:var(--text-micro)}
.kit-m .p-head .cg-count{position:relative;top:-2px}
.kit-m .p-head .page-title{display:flex;align-items:center;gap:var(--s-2)}
.kit-m .su-tabs{overflow-x:auto;scrollbar-width:none;padding:0 var(--s-4);gap:0;margin:0}
.kit-m .su-tabs::-webkit-scrollbar{display:none}
.kit-m .su-tabs a{height:44px;flex:none;font-size:var(--text-body)}
.kit-m .su-ptools{position:sticky;top:52px;z-index:calc(var(--z-sticky) * 2);background:hsl(var(--background));border-bottom:1px solid hsl(var(--border));padding:var(--s-3) 0;display:flex;flex-direction:column;gap:var(--s-3)}
.su-psearch{padding:0 var(--s-4)}
.su-psearch .cg-search{width:100%;height:var(--control-h-m)}
.kit-m .su-pbody{padding:0 var(--s-4) var(--s-4);flex:1;display:flex;flex-direction:column;gap:var(--s-3)}
.kit-m .su-pbody .su-wired{margin-top:var(--s-4)}
.kit-m .su-pbody>.su-pcard,.kit-m .su-pbody>div>.su-loadline,.kit-m .su-pbody>.su-err,.kit-m .su-pbody>div>.su-err{margin-top:var(--s-4)}
.su-tlist{display:flex;flex-direction:column;margin:0 calc(var(--s-4) * -1)}
.su-tli{display:flex;flex-direction:column;gap:6px;padding:var(--s-3) var(--s-4);border-bottom:1px solid hsl(var(--border));color:inherit;text-decoration:none;text-align:left;width:100%;background:hsl(var(--background));min-height:72px}
.su-tli:active{background:hsl(var(--muted))}
.su-tli:focus-visible{outline:2px solid hsl(var(--ring));outline-offset:-2px}
.su-tli-h{display:flex;align-items:center;gap:var(--s-2);min-width:0}
.su-tli-h b{flex:1;min-width:0;font:var(--w-medium) var(--text-body)/1.3 var(--font-voice);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.su-pli .su-tli-h b{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.su-tli.unread .su-tli-h b{font-weight:var(--w-semibold)}
.su-tli-h time{font-size:var(--text-small);color:hsl(var(--muted-foreground));font-variant-numeric:tabular-nums;flex:none}
.su-tli-p{font-size:var(--text-small);color:hsl(var(--muted-foreground));display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.su-tli-m{display:flex;align-items:center;gap:var(--s-2);flex-wrap:wrap}
.su-tli-m .r{margin-left:auto;font-size:var(--text-micro);color:hsl(var(--muted-foreground))}
.su-tli .skel{display:block}
.su-no{font-size:var(--text-micro);flex:none;width:30px}
.su-countline{text-align:center;font-size:var(--text-small);color:hsl(var(--muted-foreground));margin-top:var(--s-2)}
.su-more{display:flex;flex-direction:column;align-items:center;gap:var(--s-2);padding:var(--s-2) 0 var(--s-4);font-size:var(--text-small)}
.su-more .btn{width:100%}
.kit-m .su-empty{padding:var(--s-10) var(--s-4)}
.kit-m .su-err{padding:var(--s-8) var(--s-2)}
.kit-m .su-err .act{flex-direction:column;align-items:stretch;width:100%}
.kit-m .su-err .act .btn{width:100%}
.kit-m .su-loadline{margin-bottom:var(--s-2)}
.su-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))}
.su-actbar .btn{flex:1;height:var(--control-h-m-lg);font-size:var(--text-btn-lg)}
.kit-m .su-layer>.k-sheet.k-bottom{display:flex;flex-direction:column}
.kit-m .su-mfoot{flex-direction:column;align-items:stretch;gap:var(--s-2);flex:none}
.kit-m .su-mfoot .r{margin-left:0;display:grid;grid-template-columns:1fr 1fr;gap:var(--s-2)}
.kit-m .su-mfoot .r .btn{width:100%}
.kit-m .su-mfoot>.btn-tertiary{align-self:center}
.kit-m .su-toasts{left:var(--s-3);right:var(--s-3);bottom:calc(var(--tabbar-h) + var(--control-h-m-lg) + var(--s-8))}
.kit-m .su-thread-phone~.su-toasts{bottom:180px}
.kit-m .su-help-layer .ph-d-body{padding:0 var(--s-4) var(--s-5)}
.kit-m .su-help-layer .ph-d-head{padding:var(--s-2) var(--s-2) var(--s-3) var(--s-4)}
.kit-m .su-cmd-sheet .sh-cmd{width:100%;border:0;border-radius:0;box-shadow:none;display:flex;flex-direction:column;flex:1;min-height:0}
.kit-m .su-cmd-sheet .sh-pop-l{max-height:none;flex:1;overflow-y:auto}
.kit-m .su-cmd-sheet .sh-row{min-height:48px}

/* phone thread */
.kit-m .su-th{padding:var(--s-3) var(--s-4)}
.kit-m .su-th-t{font-size:19px}
.su-pcase{padding:var(--s-3) var(--s-4) 0}
.su-pcase .btn{width:100%;justify-content:flex-start;gap:var(--s-2)}
.su-pcase .btn .q{margin-left:auto;font-weight:var(--w-regular)}
.su-pnw{padding:var(--s-3) var(--s-4) 0}
.su-pnw .su-wired{margin-top:0}
.kit-m .su-thread{padding:var(--s-4);flex:1}
.kit-m .su-thread .dd-msg{max-width:none}
.kit-m .su-thread .dd-msg.me{margin-left:var(--s-6)}
.kit-m .su-thread .dd-att{flex-wrap:wrap}
.kit-m .su-thread .dd-ai-f .r{margin-left:0;width:100%;display:grid;grid-template-columns:1fr 1.6fr}
.kit-m .su-thread .dd-ai-f .r .btn{width:100%}
.kit-m .su-compose{position:sticky;bottom:0;z-index:calc(var(--z-sticky) * 2);padding:var(--s-2) var(--s-3) var(--s-3);box-shadow:0 -6px 16px -12px hsl(var(--foreground)/.25)}
.kit-m .su-compose textarea{min-height:48px;height:48px}
.kit-m .su-compose .dd-compose-f .r{gap:var(--s-2)}
.kit-m .su-compose .btn-primary{height:var(--control-h-m)}
.kit-m .su-mrail .su-rs{padding:var(--s-4)}
.kit-m .su-mrail .su-ev,.kit-m .su-mrail .su-pay{padding:var(--s-3)}
.kit-m .su-payf{flex-wrap:wrap}
.kit-m .su-tp{grid-template-columns:1fr;gap:0}
.kit-m .su-tp-list{border-right:0;border-bottom:1px solid hsl(var(--border));max-height:240px}
.kit-m .su-tp-list .mi{min-height:48px}
.kit-m .su-tp-prev{padding:var(--s-4)}
.kit-m .su-tload{padding:var(--s-4)}

/* phone categories */
.su-pcard{border:1px solid hsl(var(--border));border-radius:var(--r-card);background:hsl(var(--card))}
.kit-m .su-tree{padding:var(--s-1) 0}
.kit-m .su-tr-p details>summary{height:56px;padding:0 var(--s-3)}
.kit-m .su-tr-p summary .code{display:none}
.kit-m .su-tr-c{margin-left:calc(var(--s-3) + 48px)}
.kit-m .su-tr-c li{height:44px}
.kit-m .su-tr-none{margin-left:calc(var(--s-3) + 48px)}
.su-ppol>summary{list-style:none;display:flex;align-items:center;gap:var(--s-2);height:52px;padding:0 var(--s-3);cursor:pointer}
.su-ppol>summary::-webkit-details-marker{display:none}
.su-ppol>summary b{flex:1;font:var(--w-semibold) var(--text-body)/1.2 var(--font-voice)}
.su-ppol-r{display:flex;flex-direction:column;gap:2px;padding:var(--s-2) var(--s-3);border-top:1px solid hsl(var(--border));font-size:var(--text-body)}
.su-ppol-r .q{font-size:var(--text-small)}
.su-rs>div[data-show]{display:flex;flex-direction:column;gap:var(--s-3)}
.su-tp-list .mi{white-space:normal}
.su-tp-list .mi .chip{flex:none}
.kit-d .su-thread-app~.su-toasts{bottom:calc(var(--s-16) * 2 + var(--s-6))}