/* =====================================================================================
   RJ DTC Admin · Round 4 · brand-shell pages · page.css   (prefix pg-)
   One stylesheet, copied byte-identical into each page folder: campaigns, campaign-detail,
   campaigns-email, selling, selling-contact-channels, connected-apps. Generated by
   campaigns/src/build.py. Load order: _kit tokens -> base -> families -> page.css.
   Turns the kit's specimen pieces into full-viewport pages: sticky shell, fixed overlay layers,
   page states. Values come from tokens. Two dedicated compositions: .kit-d (/) and .kit-m (/m/).
   No size queries.
   ===================================================================================== */

/* ---------- ground ---------- */
.pg{background:hsl(var(--background))}
.pg a.btn{text-decoration:none}
.pg .q{color:hsl(var(--muted-foreground))}
.pg-h2,.pg-h3,.pg-kv b.t,.pg-card-h h2,.pg-sec-h h2{font-family:var(--font-voice);font-stretch:var(--font-stretch-title);font-variation-settings:normal;letter-spacing:0}
.pg-h2{font-size:var(--text-section);font-weight:var(--w-semibold);line-height:var(--lh-section)}
.pg-h3{font-size:var(--text-card);font-weight:var(--w-semibold)}

/* ---------- desktop shell: sidebar and top bar stay put ---------- */
.kit-d .pg-app{min-height:100vh;border-radius:0;box-shadow:none;overflow:visible}
.kit-d .pg-side{position:sticky;top:0;height:100vh;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none}
.kit-d .pg-side::-webkit-scrollbar{display:none}
.kit-d .pg-main{overflow:clip}
.pg-top{position:sticky;top:0;z-index:calc(var(--z-sticky) * 3)}
.pg-top .top-r{gap:var(--s-3)}
.pg-page{width:100%;max-width:var(--content-max);padding:var(--s-6) var(--s-6) var(--s-16)}
.pg-page.narrow{max-width:960px}
.pg-ph .page-title{display:flex;align-items:center;gap:var(--s-3)}
.pg-ph .cg-count{position:relative;top:1px}
.pg-ph p .code{font-size:var(--text-small)}
.pg-back{display:inline-flex;align-items:center;gap:var(--s-1);font-size:var(--text-small);color:hsl(var(--muted-foreground));text-decoration:none;margin-bottom:var(--s-2)}
.pg-back:hover{color:hsl(var(--foreground))}

/* ---------- page states: page.js sets [hidden] from data-show / data-hide on each state change ---------- */
.pg [hidden]{display:none!important}
.pg-dim{opacity:.5;pointer-events:none}
.pg-dim-btn{opacity:.5;cursor:not-allowed}

.pg-empty{border:1px dashed hsl(var(--secondary-border));border-radius:var(--r-card);background:hsl(var(--card))}
.pg-empty.err{border-style:solid;border-color:hsl(var(--destructive)/.3);background:hsl(var(--destructive)/.03)}
.pg-empty .dt-emp{padding:var(--s-12) var(--s-6);max-width:440px}
.pg-empty .dt-emp p{max-width:52ch}
.pg-errmeta{font-size:var(--text-small);color:hsl(var(--muted-foreground))}
.pg-errmeta code{font-size:var(--text-small)}
.pg-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)}
.pg-notice{margin-bottom:var(--s-5)}
.pg-notice .act{margin-top:var(--s-2);display:flex;gap:var(--s-2)}

/* ---------- toolbar (list pages) ---------- */
.pg-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))}
.pg-bar .r{margin-left:auto;display:flex;align-items:center;gap:var(--s-2)}
.pg-bar .cg-search{width:300px}
.pg-bar .cg-search kbd{margin-left:auto}
.pg-body{padding-top:var(--s-5)}
.pg-count-line{display:flex;align-items:center;gap:var(--s-3);margin-top:var(--s-5);font-size:var(--text-small);color:hsl(var(--muted-foreground));font-variant-numeric:tabular-nums}
.pg-count-line .r{margin-left:auto}

/* KPI row */
.pg-kpis{margin-bottom:var(--s-6)}
.pg-kpis .dd-kpi{cursor:default}
.pg-kpis .dd-kpi-foot{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}
.pg-kpis .dd-kpi-k svg{color:hsl(var(--muted-foreground))}

/* table */
.pg-tbl .dt{table-layout:fixed}
.pg-tbl .dt th{top:calc(var(--topbar-h) + var(--pg-bar-h, 58px))}
.pg-tbl tbody tr[data-href]{cursor:pointer}
.pg-tbl .dt-t1{color:inherit;text-decoration:none;font-weight:var(--w-medium)}
.pg-tbl tr:hover .dt-t1{text-decoration:underline;text-decoration-color:hsl(var(--foreground)/.3)}
.pg-tbl td{overflow:hidden}
.pg-sub{display:block;margin-top:2px;font-size:var(--text-small);color:hsl(var(--muted-foreground));white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pg-type{display:inline-flex;align-items:center;gap:var(--s-2);color:hsl(var(--foreground))}
.pg-type svg{color:hsl(var(--muted-foreground))}
.pg-hook{font-size:var(--text-small);color:hsl(var(--muted-foreground))}
.pg-used{display:flex;flex-direction:column;gap:5px;font-variant-numeric:tabular-nums}
.pg-used .of{color:hsl(var(--muted-foreground))}
.pg-meter{display:block;height:4px;border-radius:var(--r-pill);background:hsl(var(--muted));overflow:hidden;width:100%;max-width:120px}
.pg-meter i{display:block;height:100%;border-radius:inherit;background:hsl(var(--primary)/.75)}
.pg-meter.full i{background:hsl(var(--warning))}
.pg-win{font-variant-numeric:tabular-nums;white-space:nowrap}
.pg-win small{display:block;font-size:var(--text-small);color:hsl(var(--muted-foreground))}
.pg-none{color:hsl(var(--muted-foreground))}
.pg-tbl .num b{font-weight:var(--w-semibold);font-variant-numeric:tabular-nums}

/* ---------- cards and settings rows ---------- */
.pg-card{background:hsl(var(--card));border:1px solid hsl(var(--border));border-radius:var(--r-card);box-shadow:var(--e-1)}
.pg-card-h{display:flex;align-items:flex-start;gap:var(--s-3);padding:var(--s-5) var(--s-6) 0}
.pg-card-h h2{font-size:var(--text-section);font-weight:var(--w-semibold);line-height:var(--lh-section)}
.pg-card-h p{font-size:var(--text-small);color:hsl(var(--muted-foreground));margin-top:2px}
.pg-card-h .r{margin-left:auto;display:flex;gap:var(--s-2);align-items:center}
.pg-card-b{padding:var(--s-5) var(--s-6) var(--s-6)}
.pg-card-b .fc-hz:first-child{padding-top:0}
.pg-card+.pg-card{margin-top:var(--s-5)}
.pg-apps>.pg-card+.pg-card,.pg-detail>.pg-card+.pg-card{margin-top:0}
.pg-web{display:inline-flex;align-items:center;gap:6px;font-size:var(--text-small);color:hsl(var(--success));white-space:nowrap}
.pg-web svg{width:13px;height:13px}
.pg-savebar{position:sticky;bottom:0;z-index:calc(var(--z-sticky) * 2);margin-top:var(--s-6);border:1px solid hsl(var(--border));border-radius:var(--r-card);box-shadow:var(--e-pop)}
.pg-savebar .pg-saved{font-size:var(--text-small);color:hsl(var(--muted-foreground));display:inline-flex;align-items:center;gap:var(--s-2)}
[data-pg-savebar] .fc-dirty{display:none}
[data-pg-savebar].is-dirty .fc-dirty{display:inline-flex}
.kit-m [data-pg-savebar].is-dirty .fc-dirty{display:block}
[data-pg-savebar].is-dirty .pg-saved,[data-state=save-error] [data-pg-savebar] .fc-dirty,[data-state=save-error] [data-pg-savebar] .pg-saved{display:none}
.pg-savebar .pg-err{font-size:var(--text-small);color:hsl(var(--destructive));display:inline-flex;align-items:center;gap:var(--s-2)}

/* ---------- campaign detail ---------- */
.pg-detail{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:var(--s-6);align-items:start}
.pg-dhead{display:flex;align-items:flex-start;gap:var(--s-4);margin-bottom:var(--s-6)}
.pg-dhead .page-title{display:flex;align-items:center;gap:var(--s-3);flex-wrap:wrap}
.pg-dmeta{display:flex;align-items:center;gap:var(--s-2);margin-top:var(--s-2);font-size:var(--text-small);color:hsl(var(--muted-foreground));flex-wrap:wrap}
.pg-dhead .r{margin-left:auto;display:flex;gap:var(--s-2);align-items:center;flex:none}
.pg-fsec{padding:var(--s-5) var(--s-6);border-top:1px solid hsl(var(--border))}
.pg-fsec:first-child{border-top:0}
.pg-sec-h{display:flex;align-items:baseline;gap:var(--s-3);margin-bottom:var(--s-4)}
.pg-sec-h h2{font-size:var(--text-card);font-weight:var(--w-semibold)}
.pg-sec-h p{font-size:var(--text-small);color:hsl(var(--muted-foreground))}
.pg-sec-h .r{margin-left:auto}
.pg-fgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-4) var(--s-5)}
.pg-fgrid.c3{grid-template-columns:repeat(3,minmax(0,1fr))}
.pg-fgrid .full{grid-column:1/-1}
.pg-fgrid .fc-f{min-width:0}
.pg-fgrid .seg{width:max-content;max-width:100%}
.pg-suffix{color:hsl(var(--muted-foreground));font-family:var(--font-code)}
.pg-aside{display:flex;flex-direction:column;gap:var(--s-5);position:sticky;top:calc(var(--topbar-h) + var(--s-6))}
.pg-kv{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--s-3) var(--s-4);font-size:var(--text-body);margin:0}
.pg-kv dt{color:hsl(var(--muted-foreground))}
.pg-kv dd{margin:0;text-align:right;font-variant-numeric:tabular-nums;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pg-kv dd.code{font-size:var(--text-small)}
.pg-perf{display:flex;flex-direction:column;gap:var(--s-4)}
.pg-perf .big{font:var(--w-semibold) var(--text-kpi)/1.05 var(--font-ui);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.pg-perf .big small{font-size:var(--text-body);font-weight:var(--w-medium);color:hsl(var(--muted-foreground));letter-spacing:0;margin-left:var(--s-1)}
.pg-perf .pg-meter{max-width:none;height:6px;margin-top:var(--s-2)}
.pg-perf .k{font-size:var(--text-small);color:hsl(var(--muted-foreground));margin-bottom:var(--s-1)}
.pg-perf .row{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-4)}
.pg-perf .row .v{font:var(--w-semibold) var(--text-section)/1.2 var(--font-ui);font-variant-numeric:tabular-nums}
.pg-ro .input,.pg-ro .field{background:hsl(var(--muted)/.5);pointer-events:none}
.pg-ro .seg{pointer-events:none;opacity:.7}
[data-state=not-wired] .pg-form .input,[data-state=not-wired] .pg-form .field{background:hsl(var(--muted)/.5);pointer-events:none;color:hsl(var(--muted-foreground))}
[data-state=not-wired] .pg-form .seg,[data-state=not-wired] .pg-form .switch,[data-state=not-wired] .pg-form .cb{pointer-events:none;opacity:.6}
[data-state=not-wired] [data-inert]{opacity:.5;pointer-events:none}
.pg-skel-form{display:flex;flex-direction:column;gap:var(--s-4);padding:var(--s-6)}
.pg-skel-form .skel{height:40px;border-radius:var(--r-control)}
.pg-skel-form .skel.s{height:14px;width:30%}

/* ---------- email broadcasts: two panes ---------- */
.pg-two{display:grid;grid-template-columns:360px minmax(0,1fr);min-height:640px;overflow:hidden}
.pg-list{border-right:1px solid hsl(var(--border));display:flex;flex-direction:column;min-width:0}
.pg-list-h{padding:var(--s-3);border-bottom:1px solid hsl(var(--border))}
.pg-list-h .cg-search{width:100%}
.pg-bl{list-style:none;margin:0;padding:0;overflow-y:auto;flex:1}
.pg-bi{display:flex;gap:var(--s-3);width:100%;text-align:left;padding:var(--s-3) var(--s-4);border:0;border-bottom:1px solid hsl(var(--border));background:transparent;color:inherit;cursor:pointer;
  font:inherit;transition:background var(--motion-hover)}
.pg-bi:hover{background:hsl(var(--muted)/.5)}
.pg-bi.on{background:hsl(var(--accent));box-shadow:inset 3px 0 0 hsl(var(--primary))}
.pg-bi .t{flex:1;min-width:0}
.pg-bi b{display:block;font-weight:var(--w-medium);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pg-bi .a{display:block;font-size:var(--text-small);color:hsl(var(--muted-foreground));white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px}
.pg-bi .s{display:flex;align-items:center;gap:var(--s-2);margin-top:var(--s-2)}
.pg-bi .w{font-size:var(--text-small);color:hsl(var(--muted-foreground));white-space:nowrap;font-variant-numeric:tabular-nums}
.pg-comp{display:flex;flex-direction:column;min-width:0}
.pg-comp-h{padding:var(--s-5) var(--s-6) var(--s-4);border-bottom:1px solid hsl(var(--border))}
.pg-comp-h .top{display:flex;align-items:flex-start;gap:var(--s-4)}
.pg-comp-h .top .r{margin-left:auto;display:flex;gap:var(--s-2);flex:none}
.pg-comp-h .kick{display:flex;align-items:center;gap:var(--s-2);font-size:var(--text-small);color:hsl(var(--muted-foreground));margin-bottom:var(--s-1)}
.pg-comp-f{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-4);margin-top:var(--s-5)}
.pg-comp-f .full{grid-column:1/-1}
.pg-recip{display:flex;align-items:center;gap:var(--s-3);min-height:var(--control-h);padding:0 var(--s-3);border:1px solid hsl(var(--border));border-radius:var(--r-control);background:hsl(var(--muted)/.4)}
.pg-recip b{font-variant-numeric:tabular-nums;font-size:var(--text-card)}
.pg-recip span{font-size:var(--text-small);color:hsl(var(--muted-foreground))}
.pg-comp .sf-alert{margin-top:var(--s-4)}
.pg-prev{flex:1;background:hsl(var(--muted)/.45);padding:var(--s-6);overflow-y:auto}
.pg-prev-l{font-size:var(--text-small);color:hsl(var(--muted-foreground));text-align:center;margin-bottom:var(--s-3)}
.pg-mail{max-width:520px;margin:0 auto;background:hsl(var(--card));border:1px solid hsl(var(--border));border-radius:var(--r-card);box-shadow:var(--e-1);overflow:hidden}
.pg-mail-w{padding:var(--s-5) var(--s-6);border-bottom:1px solid hsl(var(--border));font:var(--w-semibold) 15px/1 var(--font-voice);letter-spacing:0;text-align:center}
.pg-mail-hero{position:relative;aspect-ratio:16/10;background:var(--studio);overflow:hidden}
.pg-mail-hero .cg-garment{position:absolute;inset:8% 30% 0}
.pg-mail-b{padding:var(--s-6);text-align:center}
.pg-mail-b h3{font:var(--w-semibold) 20px/1.25 var(--font-voice);letter-spacing:-.01em}
.pg-mail-b p{font-size:var(--text-body);color:hsl(var(--muted-foreground));margin:var(--s-2) auto 0;max-width:40ch}
.pg-mail-b .cta{display:inline-flex;align-items:center;height:var(--control-h);padding:0 var(--s-6);margin-top:var(--s-5);border-radius:var(--r-control);background:hsl(var(--primary));color:hsl(var(--primary-foreground));font:var(--w-semibold) var(--text-btn)/1 var(--font-voice)}
.pg-mail-f{padding:var(--s-4) var(--s-6);border-top:1px solid hsl(var(--border));font-size:var(--text-micro);color:hsl(var(--muted-foreground));text-align:center}

/* ---------- contact channels ---------- */
.pg-ch{display:flex;flex-direction:column;gap:var(--s-3);list-style:none;margin:0;padding:0;counter-reset:ch}
.pg-chi{display:grid;grid-template-columns:32px minmax(0,1fr) auto;gap:var(--s-4);padding:var(--s-4) var(--s-4) var(--s-4) var(--s-3);border:1px solid hsl(var(--border));border-radius:var(--r-card);background:hsl(var(--background));transition:border-color var(--motion-hover),box-shadow var(--motion-hover)}
.pg-chi.bad{border-color:hsl(var(--destructive)/.45)}
.pg-chi.moved{box-shadow:0 0 0 2px hsl(var(--ring)/.35)}
.pg-chi .n{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:hsl(var(--muted));font:var(--w-semibold) var(--text-small)/1 var(--font-ui);color:hsl(var(--muted-foreground));font-variant-numeric:tabular-nums}
.pg-chi .body{display:grid;grid-template-columns:200px minmax(0,1fr) 220px;gap:var(--s-4);min-width:0;align-items:start}
.pg-chi .ord{display:flex;flex-direction:column;gap:var(--s-1)}
.pg-chi .foot{grid-column:2/-1;display:flex;align-items:center;gap:var(--s-3);margin-top:calc(var(--s-1) * -1)}
.pg-qr{display:flex;align-items:center;gap:var(--s-3);min-height:var(--control-h)}
.pg-qr img{width:52px;height:52px;border-radius:var(--r-media);border:1px solid hsl(var(--border));background:hsl(var(--background));padding:3px;flex:none}
.pg-qr .ns{display:grid;place-items:center;width:52px;height:52px;border-radius:var(--r-media);border:1px dashed hsl(var(--secondary-border));color:hsl(var(--muted-foreground));flex:none}
.pg-qr .acts{display:flex;flex-direction:column;align-items:flex-start;gap:var(--s-1);min-width:0}
.pg-qr .btns{display:flex;gap:var(--s-1);flex-wrap:wrap}
.pg-qr .acts small{font-size:var(--text-small);color:hsl(var(--muted-foreground))}
.pg-qr .acts .btn{height:var(--control-h-xs);padding:0 var(--s-2)}
.pg-chi .help{margin-top:6px}
.pg-chi [data-ch-err]:empty{display:none}
.pg-addrow{display:flex;align-items:center;gap:var(--s-3);margin-top:var(--s-4)}
.pg-addrow small{font-size:var(--text-small);color:hsl(var(--muted-foreground))}
.pg-chi[hidden]{display:none}

/* ---------- selling ---------- */
.pg-modes{display:flex;flex-direction:column;gap:var(--s-2)}
.pg-mode{display:flex;gap:var(--s-3);align-items:center;padding:var(--s-3) var(--s-4);border:1px solid hsl(var(--border));border-radius:var(--r-card);cursor:pointer;transition:border-color var(--motion-hover),background var(--motion-hover)}
.pg-mode:hover{border-color:hsl(var(--input-hover))}
.pg-mode:has(.cb:checked){border-color:hsl(var(--primary)/.55);background:hsl(var(--accent)/.6)}
.pg-mode.dis{cursor:not-allowed;color:hsl(var(--muted-foreground));background:hsl(var(--muted)/.35)}
.pg-mode.dis:hover{border-color:hsl(var(--border))}
.pg-mode .ic{display:grid;place-items:center;width:36px;height:36px;border-radius:var(--r-control);background:hsl(var(--muted));color:hsl(var(--foreground));flex:none}
.pg-mode .t{flex:1;min-width:0}
.pg-mode .t b{display:block;font:var(--w-semibold) var(--text-card)/1.3 var(--font-voice)}
.pg-mode .t small{display:block;font-size:var(--text-small);color:hsl(var(--muted-foreground));margin-top:2px}
.pg-mode .cb{margin:0}
.pg-chans{display:flex;align-items:center;gap:var(--s-2);flex-wrap:wrap}
.pg-chans .chip{height:26px}
.pg-sw{display:flex;align-items:center;gap:var(--s-3)}

/* ---------- connected apps ---------- */
.pg-apps{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:var(--s-5);align-items:start}
.pg-app-ic{display:grid;place-items:center;width:40px;height:40px;border-radius:var(--r-control);background:hsl(var(--muted));color:hsl(var(--foreground));flex:none}
.pg-facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border-top:1px solid hsl(var(--border));margin-top:var(--s-5)}
.pg-fact{display:flex;gap:var(--s-3);padding:var(--s-4) var(--s-6);border-bottom:1px solid hsl(var(--border))}
.pg-fact:nth-child(odd){border-right:1px solid hsl(var(--border))}
.pg-fact:nth-last-child(-n+2){border-bottom:0}
.pg-fact svg{color:hsl(var(--muted-foreground));margin-top:2px;flex:none}
.pg-fact .k{font-size:var(--text-small);color:hsl(var(--muted-foreground))}
.pg-fact .v{margin-top:var(--s-1)}
.pg-fact .v small{display:block;font-size:var(--text-small);color:hsl(var(--muted-foreground));margin-top:var(--s-1)}
.pg-statusline{display:flex;align-items:center;gap:var(--s-2);flex-wrap:wrap}

/* ---------- fixed overlay layers (kit.js stages, sized to the viewport) ---------- */
.pg-layer{position:fixed;inset:0;z-index:var(--z-scrim);pointer-events:none;overflow:hidden}
.pg-layer>.k-sheet,.pg-layer>.k-dialog,.pg-layer.open>.k-scrim{pointer-events:auto}
.kit-d .pg-help-layer{left:var(--sidebar-w)}
.kit-d .pg-help-layer>.k-sheet{top:var(--topbar-h)}
.kit-d .pg-help-layer>.k-scrim{top:var(--topbar-h)}
.pg-help-layer .k-sheet{display:flex;flex-direction:column}
.pg-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)}
.pg-cmd-layer.open>.k-dialog{transform:translate(-50%,0)}
.pg-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))}
.pg-cmd-in::placeholder{color:hsl(var(--muted-foreground))}
.sh-row[hidden],.sh-grp[hidden]{display:none}
.pg-dlg .k-dialog{width:440px}
.kit-m .pg-dlg .k-dialog{width:calc(100% - var(--s-8))}

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

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

/* ======================================== PHONE ======================================== */
.kit-m .pg-phone{min-height:100vh;display:flex;flex-direction:column;background:hsl(var(--background))}
.kit-m .pg-phone>.p-bar{position:sticky;top:0;z-index:calc(var(--z-sticky) * 3)}
.pg-pcrumb{display:flex;align-items:center;gap:var(--s-2);white-space:nowrap}
.pg-pcrumb .cr{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis}
.pg-pcrumb .pg-proto{position:static;margin-left:auto}
.pg-pcrumb .pg-proto>.k-anchor>button{box-shadow:none;height:28px;padding:0 10px;font-size:var(--text-micro)}
.kit-m .p-head .page-title{display:flex;align-items:center;gap:var(--s-2);flex-wrap:wrap}
.kit-m .p-head .page-title .chip{font-size:var(--text-micro)}
.kit-m .pg-pbody{padding:0 var(--s-4) var(--s-6);flex:1;display:flex;flex-direction:column;gap:var(--s-4)}
.kit-m .pg-ptools{background:hsl(var(--background));border-bottom:1px solid hsl(var(--border));padding:0 0 var(--s-3);display:flex;flex-direction:column;gap:var(--s-2)}
.kit-m .pg-ptools .cg-search{margin:0 var(--s-4);width:auto}
.kit-m .pg-kpis{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-3);margin:0}
.kit-m .pg-kpis .dd-kpi{padding:var(--s-3)}
.kit-m .pg-kpis .dd-kpi-v{font-size:22px}
.kit-m .pg-mlist{margin:0 calc(var(--s-4) * -1);border-top:1px solid hsl(var(--border))}
.kit-m .pg-mli{display:flex;gap:var(--s-3);align-items:flex-start;width:100%;padding:var(--s-3) var(--s-4);border:0;border-bottom:1px solid hsl(var(--border));background:transparent;color:inherit;text-align:left;text-decoration:none;font:inherit;min-height:72px}
.kit-m .pg-mli .t{flex:1;min-width:0}
.kit-m .pg-mli b{display:block;font:var(--w-semibold) 15px/1.3 var(--font-voice);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kit-m .pg-mli .m{display:block;font-size:var(--text-small);color:hsl(var(--muted-foreground));margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kit-m .pg-mli .s{display:flex;align-items:center;gap:var(--s-2);margin-top:var(--s-2);flex-wrap:wrap}
.kit-m .pg-mli .r{display:flex;flex-direction:column;align-items:flex-end;gap:var(--s-1);text-align:right;flex:none;font-variant-numeric:tabular-nums}
.kit-m .pg-mli .r b{font:var(--w-semibold) var(--text-body)/1.2 var(--font-ui)}
.kit-m .pg-mli .r span{font-size:var(--text-small);color:hsl(var(--muted-foreground))}
.kit-m .pg-mli>svg{color:hsl(var(--muted-foreground));margin-top:var(--s-3);flex:none}
.kit-m .pg-mli.on{background:hsl(var(--accent))}
.kit-m .pg-count-line{justify-content:center;margin-top:0}
.kit-m .pg-card-h{padding:var(--s-4) var(--s-4) 0}
.kit-m .pg-card-b{padding:var(--s-4)}
.kit-m .pg-card+.pg-card{margin-top:0}
.kit-m .pg-fsec{padding:var(--s-4)}
.kit-m .pg-fgrid,.kit-m .pg-fgrid.c3{grid-template-columns:minmax(0,1fr);gap:var(--s-4)}
.kit-m .pg-fgrid .seg{width:100%}
.kit-m .pg-fgrid .seg>button{flex:1}
.kit-m .pg-empty .dt-emp{padding:var(--s-10) var(--s-4)}
.kit-m .pg-notice{margin:0}

/* phone: the one primary action sits at the bottom, in thumb reach */
.kit-m .pg-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 .pg-actbar .btn{flex:1;height:var(--control-h-m-lg);font-size:var(--text-btn-lg)}
.kit-m .pg-actbar .btn.fit{flex:none}
.kit-m .pg-actbar .msg{flex:1;min-width:0;font-size:var(--text-small);color:hsl(var(--muted-foreground))}
.kit-m .pg-actbar .msg b{display:block;color:hsl(var(--foreground));font:var(--w-semibold) var(--text-body)/1.2 var(--font-ui)}
.kit-m .pg-actbar.col{flex-direction:column;align-items:stretch}
.kit-m .pg-actbar .row{display:flex;gap:var(--s-2)}
.kit-m .tabbar{bottom:0}

/* phone sheets */
.kit-m .pg-layer>.k-sheet.k-bottom{display:flex;flex-direction:column}
.kit-m .pg-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 .pg-sheet-h b{flex:1;min-width:0;font:var(--w-semibold) var(--text-section)/1.2 var(--font-voice);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kit-m .pg-sheet-b{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain}
.kit-m .pg-sheet-f{flex:none;padding:var(--s-3) var(--s-4) var(--s-5);border-top:1px solid hsl(var(--border));display:flex;flex-direction:column;gap:var(--s-2)}
.kit-m .pg-sheet-f .row{display:flex;gap:var(--s-2)}
.kit-m .pg-sheet-f .btn{flex:none;height:var(--control-h-m-lg)}
.kit-m .pg-sheet-f .row .btn{flex:1}
.kit-m .pg-opts{display:flex;flex-direction:column;padding:var(--s-2)}
.kit-m .pg-opts .mi{height:var(--control-h-m-lg)}
.kit-m .pg-cmd-sheet .sh-cmd{width:100%;border:0;border-radius:0;box-shadow:none;display:flex;flex-direction:column;height:100%}
.kit-m .pg-cmd-sheet .sh-pop-l{max-height:none;flex:1}
.kit-m .pg-toasts{left:var(--s-3);right:var(--s-3);bottom:calc(var(--tabbar-h) + var(--control-h-m-lg) + var(--s-8))}
.kit-m .pg-help-layer .ph-d-body{padding:0 var(--s-4) var(--s-5)}
.kit-m .pg-help-layer .ph-d-head{padding:var(--s-2) var(--s-2) var(--s-3) var(--s-4)}

/* phone: detail, email composer, channels */
.kit-m .pg-dmeta{margin-top:var(--s-1)}
.kit-m .pg-pfacts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-3)}
.kit-m .pg-pfacts .pg-card{padding:var(--s-3)}
.kit-m .pg-pfacts .k{font-size:var(--text-small);color:hsl(var(--muted-foreground))}
.kit-m .pg-pfacts .v{font:var(--w-semibold) var(--text-section)/1.2 var(--font-ui);font-variant-numeric:tabular-nums;margin-top:var(--s-1)}
.kit-m .pg-pfacts .pg-meter{max-width:none;margin-top:var(--s-2)}
.kit-m .pg-comp-sheet .pg-comp-f{grid-template-columns:minmax(0,1fr);margin-top:var(--s-4)}
.kit-m .pg-comp-sheet .pg-sheet-b{padding:var(--s-4)}
.kit-m .pg-comp-sheet .pg-prev{margin:var(--s-4) calc(var(--s-4) * -1) 0;padding:var(--s-4)}
.kit-m .pg-recip{flex-wrap:wrap;padding:var(--s-2) var(--s-3);row-gap:2px}
.kit-m .pg-chi{grid-template-columns:minmax(0,1fr);padding:var(--s-4);gap:var(--s-3)}
.kit-m .pg-chi .top{display:flex;align-items:center;gap:var(--s-2)}
.kit-m .pg-chi .top b{flex:1;font:var(--w-semibold) var(--text-card)/1.2 var(--font-voice)}
.kit-m .pg-chi .top .icon-btn{width:var(--control-h-m);height:var(--control-h-m)}
.kit-m .pg-chi .body{grid-template-columns:minmax(0,1fr);gap:var(--s-3)}
.kit-m .pg-chi .foot{grid-column:auto;margin-top:0}
.kit-m .pg-qr .acts .btn{height:var(--control-h-m)}
.kit-m .pg-qr .acts{gap:var(--s-1)}
.kit-m .pg-mode{padding:var(--s-3)}
.kit-m .pg-mode .ic{width:32px;height:32px}
.kit-m .pg-facts{grid-template-columns:minmax(0,1fr)}
.kit-m .pg-fact{padding:var(--s-3) var(--s-4)}
.kit-m .pg-fact:nth-child(odd){border-right:0}
.kit-m .pg-fact:nth-last-child(2){border-bottom:1px solid hsl(var(--border))}
.kit-m .pg-apps{grid-template-columns:minmax(0,1fr);gap:var(--s-4)}
.kit-m .fc-hz{padding:var(--s-4) 0}