/* psbl-ui v3.0 (generated base: v1 components.css + v2 layer, demo chrome removed). Load fonts.css first. */

/* ==== from components/components.css ==== */
/* Possible app components — live demo page (Opus, 2026-11-01). v0.1 proposal.
   Values follow page4/agent-contract.json (appAppearances, appType, geometry). */
/* ---------- tokens ---------- */
:root{
  --accent:#FFB400;--accent-ink:#191B1E;--accent-hover:#E6A200;--accent-active:#CC9000;
  --gutter:clamp(20px,4.5vw,72px);--gap:30px;--control:44px;
  --t-page:500 40px/48px 'Whyte Inktrap',Whyte,sans-serif;
  --t-section:500 24px/32px 'Whyte Inktrap',Whyte,sans-serif;
  --t-body:400 16px/24px Whyte,Arial,sans-serif;
  --t-label:500 14px/20px Whyte,Arial,sans-serif;
  --t-meta:400 12px/18px Whyte,Arial,sans-serif;
  --ease:cubic-bezier(.2,.7,.2,1);--fast:160ms;
}
[data-mode=light]{--canvas:#F7F7F7;--surface:#FFFFFF;--field:#FFFFFF;--ink:#191B1E;--muted:#6B6766;--line:#CFCFCF;--line-strong:#191B1E;--hover-row:#F0EFEC;
  --success:#006B58;--warning:#805500;--error:#A72020;--info:#065C7C;--success-bg:#E3F2EE;--warning-bg:#FBF0DA;--error-bg:#F8E3E3;--info-bg:#E1EFF5;color-scheme:light}
[data-mode=neutral]{--canvas:#E7E7E7;--surface:#F7F7F7;--field:#FFFFFF;--ink:#191B1E;--muted:#575452;--line:#B8B8B8;--line-strong:#191B1E;--hover-row:#ECEBE8;
  --success:#005A4A;--warning:#6E4900;--error:#931B1B;--info:#054F6B;--success-bg:#D9EAE5;--warning-bg:#F1E6CF;--error-bg:#EED8D8;--info-bg:#D5E6EE;color-scheme:light}
[data-mode=dark]{--canvas:#000000;--surface:#191B1E;--field:#292B2E;--ink:#FFFFFF;--muted:#B8B8B8;--line:#3A3C40;--line-strong:#FFFFFF;--hover-row:#222427;
  --success:#72D7BD;--warning:#FFD166;--error:#FFB4B4;--info:#7AC9E8;--success-bg:#12302A;--warning-bg:#33290F;--error-bg:#3A1C1C;--info-bg:#10303C;color-scheme:dark}
*{box-sizing:border-box}
body{margin:0;background:var(--canvas);color:var(--ink);font:var(--t-body);-webkit-font-smoothing:antialiased;transition:background var(--fast),color var(--fast)}
a{color:inherit;text-underline-offset:4px;text-decoration-thickness:1px}
h1,h2,h3,h4,p{margin:0}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.meta{font:var(--t-meta);color:var(--muted)}
.label{font:var(--t-label)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important;scroll-behavior:auto!important}}
/* ---------- guide chrome ---------- */
.row{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.stack{display:flex;flex-direction:column;gap:12px}
/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:var(--control);padding:0 20px;border:1px solid var(--line-strong);background:var(--surface);color:var(--ink);font:var(--t-label);cursor:pointer;text-decoration:none;white-space:nowrap;transition:background var(--fast),color var(--fast),border-color var(--fast)}
.btn:hover:not(:disabled){background:var(--ink);color:var(--surface)}
.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink);font-weight:700}
.btn.primary:hover:not(:disabled){background:var(--accent-hover);border-color:var(--accent-hover);color:var(--accent-ink)}
.btn.primary:active:not(:disabled){background:var(--accent-active)}
.btn.ghost{border-color:transparent;background:transparent}
.btn.ghost:hover:not(:disabled){background:var(--hover-row);color:var(--ink)}
.btn.danger{border-color:var(--error);color:var(--error);background:transparent}
.btn.danger:hover:not(:disabled){background:var(--error);color:var(--surface)}
.btn.danger.solid{background:var(--error);color:var(--surface)}
.btn.sm{min-height:36px;padding:0 14px}
.btn.block{width:100%}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn.loading{pointer-events:none}
.btn.loading::before{content:'';width:14px;height:14px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.iconbtn{width:var(--control);height:var(--control);display:inline-grid;place-items:center;border:1px solid var(--line);background:var(--surface);cursor:pointer;color:var(--ink)}
.iconbtn:hover{border-color:var(--ink)}
.iconbtn svg,.btn svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.6}
.link{font:var(--t-label);color:var(--ink);text-decoration:underline;text-underline-offset:4px;background:none;border:0;padding:0;cursor:pointer}
/* ---------- badges, avatars ---------- */
.badge{display:inline-flex;align-items:center;gap:6px;font:500 12px/18px Whyte;padding:2px 8px;border:1px solid var(--line);color:var(--ink);white-space:nowrap}
.badge.solid{background:var(--ink);color:var(--surface);border-color:var(--ink)}
.badge.spark{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.status{display:inline-flex;align-items:center;gap:8px;font:var(--t-label);white-space:nowrap}
.status::before{content:'';width:8px;height:8px;background:var(--muted);flex:none}
.status[data-s=success]::before{background:var(--success)}
.status[data-s=warning]::before{background:var(--warning)}
.status[data-s=error]::before{background:var(--error)}
.status[data-s=info]::before{background:var(--info)}
.avatar{width:36px;height:36px;display:inline-grid;place-items:center;background:var(--ink);color:var(--surface);font:500 13px/1 Whyte;flex:none}
.avatar.lg{width:48px;height:48px;font-size:16px}
.avatar.sm{width:28px;height:28px;font-size:11px}
.avatars{display:flex}
.avatars .avatar{border:2px solid var(--surface);margin-left:-8px}
.avatars .avatar:first-child{margin-left:0}
.chip{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line);padding:4px 10px 4px 4px;font:var(--t-label);background:var(--surface)}
.chip .x{border:0;background:none;cursor:pointer;color:var(--muted);padding:0 0 0 4px;font-size:16px;line-height:1}
.tip{position:relative;display:inline-flex}
.tip>[role=tooltip]{position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%);background:var(--ink);color:var(--surface);font:var(--t-meta);padding:6px 10px;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity var(--fast)}
.tip:hover>[role=tooltip],.tip:focus-within>[role=tooltip]{opacity:1}
details.disclose{border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
details.disclose>summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;padding:14px 0;font:var(--t-label)}
details.disclose>summary::after{content:'+';font-size:20px;line-height:20px}
details.disclose[open]>summary::after{content:'−'}
details.disclose>div{padding:0 0 16px;color:var(--muted)}
/* ---------- forms ---------- */
.field{display:flex;flex-direction:column;gap:6px;min-width:0}
.field>label,.field>.lbl{font:500 14px/20px 'Whyte Inktrap',Whyte;display:flex;justify-content:space-between;gap:8px}
.field>label .opt,.field>.lbl .opt{font:var(--t-meta);color:var(--muted)}
.input,.select,.textarea{width:100%;min-height:var(--control);padding:10px 14px;background:var(--field);border:1px solid var(--muted);border-radius:0;font:var(--t-body);color:var(--ink);transition:border-color var(--fast)}
.input:hover,.select:hover,.textarea:hover{border-color:var(--ink)}
.input:focus,.select:focus,.textarea:focus{outline:2px solid var(--ink);outline-offset:0;border-color:var(--ink)}
.input::placeholder,.textarea::placeholder{color:var(--muted)}
.textarea{min-height:120px;resize:vertical}
.select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--ink) 50%),linear-gradient(135deg,var(--ink) 50%,transparent 50%);background-position:calc(100% - 20px) 50%,calc(100% - 14px) 50%;background-size:6px 6px;background-repeat:no-repeat;padding-right:40px}
.input:disabled,.select:disabled,.textarea:disabled{opacity:.5;cursor:not-allowed}
.field.invalid .input,.field.invalid .select,.field.invalid .textarea{border-color:var(--error);border-width:2px}
.err{font:var(--t-meta);color:var(--error);display:flex;gap:6px}
.err::before{content:'';width:8px;height:8px;background:var(--error);margin-top:5px;flex:none}
.help{font:var(--t-meta);color:var(--muted)}
.check{display:flex;gap:12px;align-items:flex-start;font:var(--t-body);cursor:pointer}
.check input{appearance:none;width:22px;height:22px;border:1px solid var(--ink);background:var(--field);margin:1px 0 0;flex:none;display:grid;place-items:center;cursor:pointer}
.check input[type=radio]{border-radius:50%}
.check input:checked{background:var(--ink)}
.check input[type=checkbox]:checked::after{content:'';width:10px;height:5px;border-left:2px solid var(--surface);border-bottom:2px solid var(--surface);transform:rotate(-45deg) translate(1px,-1px)}
.check input[type=radio]:checked::after{content:'';width:8px;height:8px;border-radius:50%;background:var(--surface)}
.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.card-choice{display:flex;gap:12px;padding:16px;border:1px solid var(--line);background:var(--field);cursor:pointer}
.card-choice:has(input:checked){border:2px solid var(--ink);padding:15px}
.card-choice input{appearance:none;width:20px;height:20px;border:1px solid var(--ink);border-radius:50%;flex:none;margin:2px 0 0;display:grid;place-items:center}
.card-choice input:checked::after{content:'';width:10px;height:10px;border-radius:50%;background:var(--ink)}
.card-choice b{display:block;font:var(--t-label)}
.card-choice span{font:var(--t-meta);color:var(--muted)}
.toggle{display:flex;gap:12px;align-items:center;cursor:pointer;font:var(--t-body)}
.toggle input{appearance:none;width:44px;height:24px;border:1px solid var(--ink);background:var(--field);position:relative;cursor:pointer;flex:none;transition:background var(--fast)}
.toggle input::after{content:'';position:absolute;top:3px;left:3px;width:16px;height:16px;background:var(--ink);transition:transform var(--fast) var(--ease)}
.toggle input:checked{background:var(--accent);border-color:var(--accent-ink)}
.toggle input:checked::after{transform:translateX(20px);background:var(--accent-ink)}
.combo{position:relative}
.combo .list{position:absolute;left:0;right:0;top:calc(100% + 4px);background:var(--surface);border:1px solid var(--ink);z-index:5;max-height:220px;overflow:auto;display:none}
.combo.open .list{display:block}
.combo .opt-i{padding:10px 14px;cursor:pointer;display:flex;justify-content:space-between}
.combo .opt-i[aria-selected=true],.combo .opt-i:hover{background:var(--hover-row)}
.multi{display:flex;flex-wrap:wrap;gap:6px;align-items:center;min-height:var(--control);padding:6px 8px;border:1px solid var(--muted);background:var(--field)}
.multi input{border:0;outline:0;background:none;flex:1;min-width:120px;padding:4px}
.multi .chip{padding:2px 6px 2px 10px}
.filepick{display:flex;align-items:center;gap:12px;border:1px dashed var(--muted);padding:10px 12px;background:var(--field)}
.repeat-row{display:grid;grid-template-columns:1fr 1fr auto;gap:12px;align-items:end}
.stepper{display:flex;gap:0;counter-reset:step;margin-bottom:20px}
.stepper li{list-style:none;flex:1;border-top:3px solid var(--line);padding-top:10px;font:var(--t-label);color:var(--muted)}
.stepper li.done{border-color:var(--ink);color:var(--ink)}
.stepper li.now{border-color:var(--accent);color:var(--ink)}
.savebar{position:sticky;bottom:0;display:flex;justify-content:space-between;align-items:center;gap:16px;background:var(--ink);color:var(--surface);padding:12px 16px;transform:translateY(120%);opacity:0;transition:transform var(--fast) var(--ease),opacity var(--fast)}
.savebar.show{transform:none;opacity:1}
.savebar .btn{border-color:var(--surface);color:var(--surface);background:transparent}
.savebar .btn.primary{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.otp{display:flex;gap:8px}
.otp input{width:48px;height:56px;text-align:center;font:500 22px/1 Whyte;border:1px solid var(--muted);background:var(--field);color:var(--ink)}
.otp input:focus{outline:2px solid var(--ink);outline-offset:0}
/* ---------- screen tiles (system pages) ---------- */
.screen{aspect-ratio:16/10;position:relative;overflow:hidden;display:flex;flex-direction:column;background:var(--canvas)}
.screen.ed{background:#000 url(paper-black.webp) center/cover;color:#fff}
.screen .sbar{height:40px;display:flex;align-items:center;justify-content:space-between;padding:0 20px;background:#191B1E;color:#fff;flex:none}
.screen .sbar img{height:11px}
.screen .sbody{flex:1;display:flex;flex-direction:column;justify-content:center;padding:24px 28px;gap:12px}
.screen .big{font-family:'Possible Regular';text-transform:uppercase;font-size:clamp(34px,4.2vw,64px);line-height:.88;letter-spacing:-.03em}
.screen .big .ln{font-family:'Possible Line'}
.screen.ed p{color:#B8B8B8;font:var(--t-label);max-width:360px}
.screen .x{position:absolute;font:300 16px/1 Whyte;color:#fff}
.screen .x.tl{top:8px;left:10px}
.screen .x.tr{top:8px;right:10px}
.screen .x.bl{bottom:8px;left:10px}
.screen .x.br{bottom:8px;right:10px}
.screen .foot{display:flex;justify-content:space-between;padding:10px 28px;font:var(--t-meta);color:#B8B8B8;border-top:1px solid #333;flex:none}
.screen .center{align-items:center;text-align:center}
.screen h3{font:var(--t-section)}
/* ---------- sign-in ---------- */
.signin{display:grid;grid-template-columns:1fr 1fr;min-height:520px;border:1px solid var(--line)}
.signin .art{background:#000 var(--signin-art,none) center/cover;position:relative;color:#fff;display:flex;flex-direction:column;justify-content:space-between;padding:28px}
.signin .art::after{content:'';position:absolute;inset:0;background:linear-gradient(to top,#000 0%,rgba(0,0,0,.4) 45%,transparent 70%);z-index:0}
.signin .art>*{position:relative;z-index:1}
.signin .art img{height:16px;align-self:flex-start;filter:invert(1)}
.signin .art .cap{font:var(--t-meta);color:#D9D9D9}
.signin .form{background:var(--surface);padding:48px 44px;display:flex;flex-direction:column;justify-content:center;gap:18px}
.signin .form h3{font:var(--t-page)}
.tabs-seg{display:flex;border:1px solid var(--line-strong)}
.tabs-seg button{flex:1;background:none;border:0;min-height:40px;font:var(--t-label);cursor:pointer;color:var(--ink)}
.tabs-seg button[aria-selected=true]{background:var(--ink);color:var(--surface)}
.gbtn{display:flex;align-items:center;justify-content:center;gap:12px}
.gbtn svg{width:18px;height:18px;stroke:none!important}
.divider{display:flex;align-items:center;gap:12px;font:var(--t-meta);color:var(--muted)}
.divider::before,.divider::after{content:'';flex:1;height:1px;background:var(--line)}
.appgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.apptile{border:1px solid var(--line);background:var(--field);padding:16px;display:flex;flex-direction:column;gap:24px;text-decoration:none;min-height:120px;transition:border-color var(--fast)}
.apptile:hover{border-color:var(--ink)}
.apptile b{font:500 18px/24px 'Whyte Inktrap'}
.apptile span{font:var(--t-meta);color:var(--muted)}
.apptile.locked{opacity:.55;cursor:not-allowed}
/* ---------- nav ---------- */
.appbar{display:flex;align-items:center;gap:16px;background:#191B1E;color:#fff;height:56px;padding:0 20px}
.appbar img{height:13px}
.appbar .name{font:var(--t-label);color:#fff}
.appbar .sp{flex:1}
.appbar .navlinks{display:flex;gap:4px}
.appbar .navlinks a{font:var(--t-label);color:#B8B8B8;text-decoration:none;padding:8px 10px}
.appbar .navlinks a[aria-current]{color:#fff;box-shadow:inset 0 -2px var(--accent)}
.menu{position:relative}
.menu>summary{list-style:none;cursor:pointer}
.menu>summary::-webkit-details-marker{display:none}
.menu .pop{position:absolute;right:0;top:calc(100% + 6px);min-width:240px;background:var(--surface);color:var(--ink);border:1px solid var(--ink);z-index:20;padding:6px 0;box-shadow:0 12px 28px rgba(0,0,0,.18)}
.menu .pop.left{right:auto;left:0}
.menu .pop a,.menu .pop button{display:flex;justify-content:space-between;gap:16px;width:100%;padding:10px 16px;background:none;border:0;text-align:left;font:var(--t-label);color:var(--ink);text-decoration:none;cursor:pointer}
.menu .pop a:hover,.menu .pop button:hover{background:var(--hover-row)}
.menu .pop hr{border:0;border-top:1px solid var(--line);margin:6px 0}
.menu .pop .who{padding:10px 16px 12px;display:flex;gap:12px;align-items:center}
.menu .pop .danger{color:var(--error)}
.menu .pop kbd{font:var(--t-meta);color:var(--muted)}
.sidebar-demo{display:grid;grid-template-columns:220px 1fr;border:1px solid var(--line);min-height:320px}
.sidebar-demo nav{background:var(--surface);border-right:1px solid var(--line);padding:16px 0}
.sidebar-demo nav .grp{font:var(--t-meta);color:var(--muted);text-transform:uppercase;letter-spacing:.06em;padding:12px 20px 6px}
.sidebar-demo nav a{display:flex;justify-content:space-between;padding:9px 20px;font:var(--t-label);text-decoration:none;border-left:3px solid transparent}
.sidebar-demo nav a:hover{background:var(--hover-row)}
.sidebar-demo nav a[aria-current]{border-left-color:var(--accent);background:var(--hover-row)}
.sidebar-demo .content{padding:24px;background:var(--canvas)}
.tabs{display:flex;gap:24px;border-bottom:1px solid var(--line);overflow-x:auto}
.tabs button{background:none;border:0;padding:12px 0;font:var(--t-label);color:var(--muted);cursor:pointer;box-shadow:inset 0 0 transparent;white-space:nowrap}
.tabs button[aria-selected=true]{color:var(--ink);box-shadow:inset 0 -3px var(--ink)}
.crumbs{display:flex;gap:8px;font:var(--t-label);color:var(--muted);flex-wrap:wrap}
.crumbs a{color:var(--muted);text-decoration:none}
.crumbs a:hover{color:var(--ink);text-decoration:underline}
.crumbs span[aria-current]{color:var(--ink)}
.pager{display:flex;gap:4px;align-items:center}
.pager button{min-width:40px;height:40px;border:1px solid var(--line);background:var(--surface);cursor:pointer;font:var(--t-label);color:var(--ink)}
.pager button[aria-current]{background:var(--ink);color:var(--surface);border-color:var(--ink)}
.phone{width:300px;height:600px;border:10px solid #191B1E;border-radius:36px;overflow:hidden;position:relative;background:var(--canvas);margin:0 auto;display:flex;flex-direction:column}
.phone .appbar{height:52px;padding:0 14px}
.phone .sheet{position:absolute;inset:52px 0 0;background:var(--surface);transform:translateX(100%);transition:transform 240ms var(--ease);display:flex;flex-direction:column;padding:8px 0;z-index:3}
.phone .sheet.open{transform:none}
.phone .sheet a{padding:14px 20px;font:500 20px/28px 'Whyte Inktrap';text-decoration:none;border-bottom:1px solid var(--line);display:flex;justify-content:space-between}
.phone .sheet a[aria-current]{box-shadow:inset 3px 0 var(--accent)}
.phone .pbody{padding:16px;display:flex;flex-direction:column;gap:12px;overflow:auto}
/* ---------- files ---------- */
.drop{border:1px dashed var(--ink);background:var(--field);padding:40px 24px;text-align:center;display:flex;flex-direction:column;gap:12px;align-items:center;transition:background var(--fast)}
.drop.over{background:var(--hover-row);border-style:solid}
.drop b{font:500 20px/28px 'Whyte Inktrap'}
.uprow{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:12px;align-items:center;padding:12px 0;border-bottom:1px solid var(--line)}
.uprow .nm{font:var(--t-label);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bar{height:4px;background:var(--line);margin-top:8px;position:relative;overflow:hidden}
.bar>i{position:absolute;inset:0 auto 0 0;background:var(--ink);transition:width 200ms linear}
.bar.done>i{background:var(--success)}
.bar.indet>i{width:30%!important;animation:indet 1.2s var(--ease) infinite}
@keyframes indet{from{left:-30%}to{left:100%}}
.ftype{width:40px;height:40px;display:grid;place-items:center;border:1px solid var(--line);font:500 10px/1 Whyte;letter-spacing:.04em}
.thumbs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.thumbs figure{margin:0;position:relative;cursor:pointer}
.thumbs img{width:100%;aspect-ratio:16/10;object-fit:cover;display:block}
.thumbs figure.sel{outline:3px solid var(--accent);outline-offset:-3px}
.thumbs figcaption{font:var(--t-meta);color:var(--muted);padding-top:4px;display:flex;justify-content:space-between}
.player{position:relative;background:#000;aspect-ratio:16/9;overflow:hidden}
.player img{width:100%;height:100%;object-fit:cover;opacity:.85}
.player .play{position:absolute;inset:0;margin:auto;width:72px;height:72px;border:0;background:var(--accent);display:grid;place-items:center;cursor:pointer}
.player .play svg{width:24px;height:24px;fill:var(--accent-ink);stroke:none}
.player .ctl{position:absolute;inset:auto 0 0;display:flex;gap:12px;align-items:center;padding:12px 16px;color:#fff;font:var(--t-meta);background:linear-gradient(to top,rgba(0,0,0,.8),transparent)}
.player .ctl .track{flex:1;height:3px;background:rgba(255,255,255,.3);position:relative}
.player .ctl .track i{position:absolute;inset:0 auto 0 0;width:34%;background:var(--accent)}
.share{display:flex}
.share .input{border-right:0;font:var(--t-label)}
.access{display:flex;flex-direction:column;gap:8px}
/* ---------- data ---------- */
.toolbar{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-bottom:12px}
.toolbar .search{flex:1;min-width:200px;position:relative}
.toolbar .search svg{position:absolute;left:14px;top:13px;width:18px;height:18px;stroke:var(--muted);fill:none;stroke-width:1.6}
.toolbar .search .input{padding-left:42px}
.bulk{display:none;align-items:center;gap:12px;background:var(--ink);color:var(--surface);padding:8px 12px;margin-bottom:12px}
.bulk.show{display:flex}
.bulk .btn{border-color:var(--surface);color:var(--surface);background:transparent;min-height:36px}
.tablewrap{overflow:auto;border:1px solid var(--line);background:var(--surface)}
table.data{width:100%;border-collapse:collapse;min-width:720px}
table.data th{font:500 12px/18px Whyte;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);text-align:left;padding:12px 16px;border-bottom:1px solid var(--line-strong);white-space:nowrap}
table.data th button{background:none;border:0;padding:0;font:inherit;color:inherit;letter-spacing:inherit;text-transform:inherit;cursor:pointer;display:inline-flex;gap:6px}
table.data th[aria-sort] button{color:var(--ink)}
table.data th[aria-sort=ascending] button::after{content:'↑'}
table.data th[aria-sort=descending] button::after{content:'↓'}
table.data td{padding:14px 16px;border-bottom:1px solid var(--line);font:var(--t-body);font-size:14px;vertical-align:middle}
table.data tr:hover td{background:var(--hover-row)}
table.data tr.sel td{background:var(--hover-row)}
table.data td.num,table.data th.num{text-align:right;font-variant-numeric:tabular-nums}
table.data .check input{margin:0}
.kv{display:grid;grid-template-columns:140px 1fr;border-top:1px solid var(--line)}
.kv dt,.kv dd{margin:0;padding:12px 0;border-bottom:1px solid var(--line)}
.kv dt{font:var(--t-meta);color:var(--muted);text-transform:uppercase;letter-spacing:.06em;padding-top:15px}
.kv dd{font:var(--t-body)}
.stat{background:var(--surface);border:1px solid var(--line);padding:20px;display:flex;flex-direction:column;gap:8px}
.stat .v{font:500 36px/40px 'Whyte Inktrap';font-variant-numeric:tabular-nums}
.stat .d{font:var(--t-meta)}
.stat .d.up{color:var(--success)}
.stat .d.down{color:var(--error)}
.spark-line{height:36px;width:100%}
.spark-line path{fill:none;stroke:var(--ink);stroke-width:1.5}
.empty{border:1px dashed var(--line);padding:48px 24px;text-align:center;display:flex;flex-direction:column;gap:12px;align-items:center;background:var(--surface)}
.empty h3{font:var(--t-section)}
/* ---------- feedback ---------- */
.banner{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:start;padding:14px 16px;border-left:4px solid var(--info);background:var(--info-bg)}
.banner[data-s=success]{border-color:var(--success);background:var(--success-bg)}
.banner[data-s=warning]{border-color:var(--warning);background:var(--warning-bg)}
.banner[data-s=error]{border-color:var(--error);background:var(--error-bg)}
.banner b{font:var(--t-label);display:block}
.banner p{font:var(--t-label);font-weight:400;color:var(--ink)}
.banner .ic{width:10px;height:10px;background:var(--info);margin-top:5px}
.banner[data-s=success] .ic{background:var(--success)}
.banner[data-s=warning] .ic{background:var(--warning)}
.banner[data-s=error] .ic{background:var(--error)}
.banner .close{background:none;border:0;cursor:pointer;font-size:18px;line-height:1;color:var(--ink)}
.toasts{position:fixed;right:24px;bottom:24px;display:flex;flex-direction:column;gap:8px;z-index:90}
.toast{background:var(--ink);color:var(--surface);padding:14px 16px;min-width:300px;max-width:420px;display:flex;gap:12px;align-items:center;font:var(--t-label);box-shadow:0 12px 32px rgba(0,0,0,.25);animation:tin 240ms var(--ease)}
.toast .sq{width:8px;height:8px;background:var(--accent);flex:none}
.toast .link{color:var(--surface);margin-left:auto}
@keyframes tin{from{transform:translateY(12px);opacity:0}}
.skel{background:linear-gradient(90deg,var(--line) 0,var(--hover-row) 50%,var(--line) 100%);background-size:200% 100%;animation:sh 1.4s linear infinite;height:14px}
@keyframes sh{to{background-position:-200% 0}}
.spinner{width:24px;height:24px;border:2px solid var(--line);border-top-color:var(--ink);border-radius:50%;animation:spin .8s linear infinite}
/* ---------- overlays ---------- */
dialog{border:1px solid var(--ink);padding:0;background:var(--surface);color:var(--ink);max-width:min(560px,calc(100vw - 32px));width:100%}
dialog::backdrop{background:rgba(0,0,0,.55)}
dialog .dh{display:flex;justify-content:space-between;align-items:center;padding:20px 24px;border-bottom:1px solid var(--line)}
dialog .dh h3{font:var(--t-section)}
dialog .db{padding:24px;display:flex;flex-direction:column;gap:16px}
dialog .df{display:flex;justify-content:flex-end;gap:12px;padding:16px 24px;border-top:1px solid var(--line)}
dialog.drawer{margin:0 0 0 auto;height:100vh;max-height:100vh;max-width:min(480px,100vw);border:0;border-left:1px solid var(--ink)}
dialog.drawer[open]{animation:din 240ms var(--ease)}
@keyframes din{from{transform:translateX(40px);opacity:0}}
dialog.palette{margin-top:12vh;max-width:min(640px,calc(100vw - 32px))}
.palette .input{border:0;border-bottom:1px solid var(--line);min-height:56px;font-size:18px;padding:0 20px}
.palette .input:focus{outline:0}
.palette ul{list-style:none;margin:0;padding:8px 0;max-height:320px;overflow:auto}
.palette li{padding:10px 20px;display:flex;justify-content:space-between;cursor:pointer;font:var(--t-label)}
.palette li[aria-selected=true]{background:var(--hover-row);box-shadow:inset 3px 0 var(--accent)}
.palette li span{font:var(--t-meta);color:var(--muted)}
.pop-anchor{position:relative;display:inline-block}
[popover]{border:1px solid var(--ink);background:var(--surface);color:var(--ink);padding:16px;width:280px;margin:0;inset:auto}
/* ---------- time ---------- */
.timeline{list-style:none;margin:0;padding:0;position:relative}
.timeline::before{content:'';position:absolute;left:4px;top:8px;bottom:8px;width:1px;background:var(--line)}
.timeline li{position:relative;padding:0 0 22px 28px}
.timeline li::before{content:'';position:absolute;left:0;top:6px;width:9px;height:9px;background:var(--muted)}
.timeline li[data-s=success]::before{background:var(--success)}
.timeline li[data-s=info]::before{background:var(--info)}
.timeline li[data-s=warning]::before{background:var(--warning)}
.timeline li[data-s=now]::before{background:var(--accent)}
.timeline .when{font:var(--t-meta);color:var(--muted)}
.timeline b{font:var(--t-label)}
.timeline .day{font:var(--t-meta);text-transform:uppercase;letter-spacing:.06em;color:var(--muted);padding:6px 0 12px 28px}
.gantt{display:grid;grid-template-columns:180px repeat(10,minmax(0,1fr));font:var(--t-meta);border:1px solid var(--line);background:var(--surface);position:relative;min-width:720px}
.gantt>div{border-bottom:1px solid var(--line);padding:10px 8px;min-height:44px;display:flex;align-items:center}
.gantt .hd{color:var(--muted);text-transform:uppercase;letter-spacing:.06em;border-bottom-color:var(--line-strong)}
.gantt .task{font:var(--t-label);padding-left:16px}
.gantt .b{background:var(--ink);color:var(--surface);height:24px;padding:0 8px;display:flex;align-items:center;font:500 12px/1 Whyte;white-space:nowrap;overflow:hidden}
.gantt .b.mile{background:transparent;color:var(--ink);padding:0;gap:6px}
.gantt .b.mile::before{content:'';width:12px;height:12px;background:var(--ink);transform:rotate(45deg)}
.gantt .b.sel{background:var(--accent);color:var(--accent-ink)}
.gantt .b.risk{background:transparent;border:1px dashed var(--ink);color:var(--ink)}
.gantt .today{position:absolute;top:0;bottom:0;width:2px;background:var(--accent)}
.cal{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));border-top:1px solid var(--line);border-left:1px solid var(--line);background:var(--surface)}
.cal>div{border-right:1px solid var(--line);border-bottom:1px solid var(--line);min-height:84px;padding:6px;font:var(--t-meta);display:flex;flex-direction:column;gap:4px}
.cal .dow{min-height:auto;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.cal .out{color:var(--muted);background:var(--canvas)}
.cal .today .d{background:var(--accent);color:var(--accent-ink);width:22px;text-align:center}
.cal .ev{background:var(--ink);color:var(--surface);padding:2px 6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cal .ev.alt{background:transparent;color:var(--ink);border:1px solid var(--ink)}
.versions{list-style:none;margin:0;padding:0}
.versions li{display:grid;grid-template-columns:56px 1fr auto;gap:12px;padding:14px 0;border-bottom:1px solid var(--line);align-items:center}
.versions .v{font:500 18px/1 'Whyte Inktrap'}
/* ---------- responsive ---------- */
@media(max-width:760px){:root{--gap:16px;--t-page:500 28px/36px 'Whyte Inktrap',Whyte,sans-serif;--t-section:500 22px/30px 'Whyte Inktrap',Whyte,sans-serif}.signin{grid-template-columns:1fr}.signin .art{min-height:200px}.signin .form{padding:28px 20px}.sidebar-demo{grid-template-columns:1fr}.sidebar-demo nav{display:none}.cards,.appgrid{grid-template-columns:1fr}.thumbs{grid-template-columns:repeat(2,minmax(0,1fr))}.appbar .navlinks{display:none}.repeat-row{grid-template-columns:1fr}.kv{grid-template-columns:1fr}.kv dt{border-bottom:0;padding-bottom:0}.toasts{left:16px;right:16px}.toast{min-width:0}.screen{aspect-ratio:auto;min-height:320px}.otp input{width:40px;height:52px}}
/* ---- fixes after first render (Opus 11/01) ---- */
[hidden]{display:none!important}
/* screen tiles fill their card instead of floating in white bands; content sets the height, not a fixed ratio */
.screen{aspect-ratio:auto;flex:1;min-height:clamp(260px,20vw,320px)}
.screen.ed .sbody{padding-top:36px;padding-bottom:36px}
.stage:has(>.sidebar-demo)>.sidebar-demo{flex:1}
.timeline li.day::before{display:none}
.gantt .b{position:relative;z-index:1}
.gantt{min-width:0}
@media(max-width:760px){.gantt{min-width:720px}}
.thumbs figcaption{padding:4px 4px 0}
/* static overlay previews: same anatomy as the live dialogs */
.dlg{border:1px solid var(--ink);background:var(--surface);color:var(--ink);box-shadow:0 18px 48px rgba(0,0,0,.18)}
.dlg .dh{display:flex;justify-content:space-between;align-items:center;padding:16px 20px;border-bottom:1px solid var(--line)}
.dlg .dh h3{font:var(--t-section);font-size:20px;line-height:28px}
.dlg .db{padding:20px;display:flex;flex-direction:column;gap:14px}
.dlg .df{display:flex;justify-content:flex-end;gap:12px;padding:14px 20px;border-top:1px solid var(--line)}
.backdrop{background:rgba(0,0,0,.55);padding:28px;display:flex;justify-content:center;align-items:center;flex:1}
.backdrop.right{justify-content:flex-end;align-items:stretch;padding:0 0 0 30%}
.backdrop.right .dlg{border:0;border-left:1px solid var(--ink);flex:1}
.pal-static ul{list-style:none;margin:0;padding:6px 0}
.pal-static li{padding:9px 20px;display:flex;justify-content:space-between;font:var(--t-label)}
.pal-static li span{font:var(--t-meta);color:var(--muted)}
.pal-static li.on{background:var(--hover-row);box-shadow:inset 3px 0 var(--accent)}
.pal-static .q{min-height:52px;display:flex;align-items:center;padding:0 20px;border-bottom:1px solid var(--line);font:400 18px/24px Whyte}
.pop-static{border:1px solid var(--ink);background:var(--surface);padding:14px 16px;width:260px;position:relative;margin-top:12px}
.pop-static::before{content:'';position:absolute;top:-7px;left:24px;width:12px;height:12px;background:var(--surface);border-left:1px solid var(--ink);border-top:1px solid var(--ink);transform:rotate(45deg)}
.tz{font-variant-numeric:tabular-nums}
.gantt .b.risk{background:var(--surface)}
@media(max-width:760px){.cal>div{min-height:56px}.cal .ev{font-size:0;height:6px;padding:0}}

/* ==== from components/v2/v2.css ==== */
/* Possible app components v2 (Opus, 2026-11-01). Layered on ../components.css (v1).
   Applies the 11/01 design review:
   1 Spark = the one action that matters now, or where you are. Selection, toggles, badges go ink.
   2 Status = a heavy left rule + square marker on the plain surface. Only error gets a tint.
   3 Flat print: no blurred shadows. Overlays = 1px ink border + hard 6px ink offset.
   4 Numbers are the type moment (Inktrap 56, tight, tabular). Metadata = one caps style.
   5 Two densities: comfortable (44) for forms, compact (32) for production tools.
   6 Brackets mark sections (slim bar), not individual components. One Anatomy section is drawn
     like a shop drawing; the rest stays clean. */
:root{
  --t-caps:500 11px/16px Whyte,Arial,sans-serif;--caps-track:.08em;
  --t-num:500 56px/52px 'Whyte Inktrap',Whyte,sans-serif;--num-track:-.03em;
  --offset:6px 6px 0 var(--shadow-ink);
  --row-pad:14px;
}
[data-mode=light]{--warning:#B54300;--warning-bg:#FBE9DF;--shadow-ink:#191B1E;--line:#DADADA;--panel:#FFFFFF}
[data-mode=neutral]{--warning:#9E3A00;--warning-bg:#F2DDD0;--shadow-ink:#191B1E;--line:#C4C4C4;--panel:#F7F7F7}
[data-mode=dark]{--warning:#FF9B66;--warning-bg:#3A2316;--shadow-ink:#000;--line:#2E3034;--panel:#191B1E}
[data-density=compact]{--control:34px;--row-pad:7px}
[data-density=compact] table.data td{font-size:13px}
[data-density=compact] .uprow{padding:7px 0}
[data-density=compact] .kv dt,[data-density=compact] .kv dd{padding-top:7px;padding-bottom:7px}
/* icons: one stroke language, square caps, 1.5 */
svg use,.iconbtn svg,.btn svg{stroke-linecap:square;stroke-linejoin:miter}
.iconbtn svg,.btn svg{stroke-width:1.5}
/* ---------- guide chrome ---------- */
/* sections: slim bracket bar instead of a rule, big Inktrap number */
/* plates: one box only (the stage). The caption is a title block on the canvas. */
/* ---------- Spark discipline ---------- */
.badge.spark{background:transparent;color:var(--ink);border-color:var(--line-strong)}
.badge.spark::before{content:'';width:6px;height:6px;background:var(--accent);flex:none}
.toggle input:checked{background:var(--ink);border-color:var(--ink)}
.toggle input:checked::after{background:var(--surface)}
.thumbs figure.sel{outline:3px solid var(--ink);outline-offset:-3px}
.thumbs figure.sel::after{content:'';position:absolute;top:8px;right:8px;width:20px;height:20px;background:var(--ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 10l3.5 3.5L15 7' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='square'/%3E%3C/svg%3E") center/16px no-repeat}
[data-mode=dark] .thumbs figure.sel::after{background-color:#fff;filter:invert(1)}
.palette li[aria-selected=true],.pal-static li.on{box-shadow:inset 3px 0 var(--ink)}
.gantt .b{background:transparent;color:var(--ink);border:1.5px solid var(--ink)}
.gantt .b.sel{background:var(--ink);color:var(--surface)}
.gantt .b.risk{border-style:dashed;border-color:var(--warning);color:var(--ink)}
.gantt .hd{font:var(--t-caps);letter-spacing:var(--caps-track)}
.gantt .today::before{content:'Today';position:absolute;top:-1px;left:4px;font:var(--t-caps);letter-spacing:var(--caps-track);text-transform:uppercase;color:var(--accent-ink);background:var(--accent);padding:2px 5px;white-space:nowrap}
/* ---------- status: rule + marker, no pastel ---------- */
.banner{background:var(--surface);border:1px solid var(--line);border-left:4px solid var(--s,var(--info));--s:var(--info)}
.banner[data-s=success]{--s:var(--success);border-left-color:var(--success);background:var(--surface)}
.banner[data-s=warning]{--s:var(--warning);border-left-color:var(--warning);background:var(--surface)}
.banner[data-s=error]{border-left-color:var(--error);background:var(--error-bg);border-color:var(--error)}
.banner[data-s=error]{border-left-width:4px}
.banner .ic{width:8px;height:8px}
.banner .kind{font:var(--t-caps);letter-spacing:var(--caps-track);text-transform:uppercase;color:var(--s);display:block;margin-bottom:2px}
.banner[data-s=error] .kind{color:var(--error)}
/* ---------- flat print: overlays ---------- */
.menu .pop,[popover],.pop-static,.combo .list{box-shadow:var(--offset)}
dialog,.dlg{box-shadow:var(--offset);border-color:var(--line-strong)}
dialog.drawer{box-shadow:none}
.toast{box-shadow:var(--offset);--shadow-ink:var(--accent)}
[data-mode=dark] dialog,[data-mode=dark] .dlg,[data-mode=dark] .menu .pop,[data-mode=dark] [popover],[data-mode=dark] .pop-static{box-shadow:6px 6px 0 #3A3C40}
/* ---------- numbers are the moment ---------- */
.stat{gap:6px;padding:20px 20px 16px;background:var(--panel)}
.stat .meta{font:var(--t-caps);letter-spacing:var(--caps-track);text-transform:uppercase}
.stat .v{font:var(--t-num);letter-spacing:var(--num-track);font-variant-numeric:tabular-nums}
.stat .v small{font:500 20px/1 'Whyte Inktrap';letter-spacing:0;margin-left:4px;color:var(--muted)}
.kv dt,table.data th,.timeline .day,.sidebar-demo nav .grp,.toc .meta{font:var(--t-caps);letter-spacing:var(--caps-track);text-transform:uppercase}
table.data td{padding:var(--row-pad) 16px}
table.data th{padding:10px 16px}
.versions .v{font:500 28px/1 'Whyte Inktrap';letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.countdown{display:flex;gap:20px;align-items:flex-end}
.countdown div{display:flex;flex-direction:column;gap:4px}
.countdown b{font:var(--t-num);letter-spacing:var(--num-track);font-variant-numeric:tabular-nums}
.countdown span{font:var(--t-caps);letter-spacing:var(--caps-track);text-transform:uppercase;color:var(--muted)}
/* ---------- sign-in: picture first, form overlapping ---------- */
.signin2{position:relative;min-height:600px;background:#000 var(--signin-art,none) center/cover;display:flex;align-items:center;justify-content:flex-end;padding:48px}
.signin2::before{content:'';position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.65) 0%,rgba(0,0,0,.15) 55%,rgba(0,0,0,.35) 100%)}
.signin2 .brand{position:absolute;left:40px;top:36px;right:40px;display:flex;justify-content:space-between;color:#fff;font:var(--t-caps);letter-spacing:var(--caps-track);text-transform:uppercase}
.signin2 .brand img{height:16px}
.signin2 .cap{position:absolute;left:40px;bottom:32px;color:#fff;max-width:420px}
.signin2 .cap .w{font-family:'Possible Regular';text-transform:uppercase;font-size:64px;line-height:.86;letter-spacing:-.03em;display:block}
.signin2 .cap .w i{font-family:'Possible Line';font-style:normal;display:block}
.signin2 .cap .meta{color:#D9D9D9;margin-top:14px;display:block}
.signin2 .panel{position:relative;width:min(420px,100%);background:var(--surface);color:var(--ink);padding:36px;display:flex;flex-direction:column;gap:18px;box-shadow:8px 8px 0 #000}
.signin2 .panel h3{font:500 32px/40px 'Whyte Inktrap';letter-spacing:-.01em}
.codefield{font:500 28px/1 Whyte;letter-spacing:.5em;text-align:center;font-variant-numeric:tabular-nums;height:60px;padding-left:.5em}
@media(max-width:760px){.signin2{padding:0;flex-direction:column;justify-content:flex-end;min-height:0;background-position:30% center}.signin2 .brand{left:20px;right:20px;top:20px}.signin2 .cap{position:relative;left:auto;bottom:auto;padding:180px 20px 24px;align-self:stretch}.signin2 .cap .w{font-size:44px}.signin2 .panel{width:100%;box-shadow:none;padding:24px 20px}}
/* ---------- system pages: numerals cropped off the frame ---------- */
.screen .giant{position:absolute;right:-.06em;bottom:-.2em;font-family:'Possible Line';font-size:clamp(150px,17vw,260px);line-height:.8;letter-spacing:-.04em;color:#fff;opacity:.9;pointer-events:none}
.screen.ed .sbody{position:relative;z-index:1}
/* ---------- app bar with tick row ---------- */
.ticks{height:10px;background:#191B1E;position:relative;border-top:1px solid #2E3034}
.ticks i{position:absolute;top:0;width:1px;height:6px;background:#6B6766}
.ticks i:nth-child(1){left:20px}
.ticks i:nth-child(2){left:25%}
.ticks i:nth-child(3){left:50%}
.ticks i:nth-child(4){left:75%}
.ticks i:nth-child(5){right:20px}
.appbar .acct{background:#3A3C40;color:#fff}
/* ---------- media first ---------- */
.sendhero{position:relative;aspect-ratio:21/9;background:#000 center/cover;color:#fff;display:flex;flex-direction:column;justify-content:flex-end;padding:24px}
.sendhero::before{content:'';position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.85),rgba(0,0,0,0) 60%)}
.sendhero>*{position:relative}
.sendhero .t{font:500 32px/36px 'Whyte Inktrap';letter-spacing:-.01em}
.sendhero .m{font:var(--t-caps);letter-spacing:var(--caps-track);text-transform:uppercase;color:#D9D9D9;margin-top:8px;display:flex;gap:16px;flex-wrap:wrap}
.sendhero .act{position:absolute;right:24px;bottom:24px;display:flex;gap:8px}
.sendhero .act .btn:not(.primary){background:transparent;color:#fff;border-color:#fff}
.thumbs.big{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.thumbs.big img{aspect-ratio:16/9}
@media(max-width:760px){.sendhero{aspect-ratio:4/5}.sendhero .act{position:relative;right:auto;bottom:auto;margin-top:16px}.thumbs.big{grid-template-columns:1fr 1fr}}
/* ---------- empty + success moments (L2.5) ---------- */
.moment{display:flex;flex-direction:column;gap:14px;align-items:flex-start;padding:28px 0}
.moment .w{font-family:'Possible Line';text-transform:uppercase;font-size:clamp(44px,5vw,72px);line-height:.86;letter-spacing:-.03em}
.moment .w b{font-family:'Possible Regular';font-weight:400;display:block}
.empty{border:0;background:transparent;align-items:flex-start;text-align:left;padding:8px 0}
/* ---------- anatomy (shop drawing) ---------- */
[data-mode=dark] .anat{background-image:linear-gradient(#232528 1px,transparent 1px),linear-gradient(90deg,#232528 1px,transparent 1px)}
/* ---------- composed screen ---------- */
/* ---------- people + permissions ---------- */
.perm{width:100%;border-collapse:collapse}
.perm th{font:var(--t-caps);letter-spacing:var(--caps-track);text-transform:uppercase;color:var(--muted);text-align:center;padding:8px;border-bottom:1px solid var(--line-strong)}
.perm th:first-child{text-align:left}
.perm td{padding:var(--row-pad) 8px;border-bottom:1px solid var(--line);text-align:center}
.perm td:first-child{text-align:left}
.perm .y{display:inline-block;width:10px;height:10px;background:var(--ink)}
.perm .n{display:inline-block;width:10px;height:1px;background:var(--muted);vertical-align:middle}
.perm .lock{font:var(--t-caps);letter-spacing:var(--caps-track);color:var(--muted)}
.setrow{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:16px;align-items:center;padding:16px 0;border-bottom:1px solid var(--line)}
.setrow p{font:var(--t-meta);color:var(--muted);margin-top:2px}
.dangerzone{border:1px solid var(--error);padding:16px;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:16px;align-items:center}
.dangerzone b{color:var(--error)}
@media(max-width:760px){.perm th,.perm td{padding-left:4px;padding-right:4px}}
.banner[data-s]{border-color:var(--line);border-left-color:var(--s)}
.banner[data-s=error]{border-color:var(--error)}
/* review pass 2 */
.ticks{background:transparent;border-top:0;height:7px}
.ticks i{background:var(--ink);height:7px;width:1px}
.gantt .b.mile{border:0;background:transparent}
.gantt .b.mile::before{background:var(--ink)}
.gantt .today::before{top:auto;bottom:0}
.sendhero{max-height:440px}

/* ==== default appearance (no data-mode set) ==== */
:root:not([data-mode]){--canvas:#F7F7F7;--surface:#FFFFFF;--field:#FFFFFF;--ink:#191B1E;--muted:#6B6766;--line:#CFCFCF;--line-strong:#191B1E;--hover-row:#F0EFEC;
  --success:#006B58;--warning:#805500;--error:#A72020;--info:#065C7C;--success-bg:#E3F2EE;--warning-bg:#FBF0DA;--error-bg:#F8E3E3;--info-bg:#E1EFF5;color-scheme:light;--warning:#B54300;--warning-bg:#FBE9DF;--shadow-ink:#191B1E;--line:#DADADA;--panel:#FFFFFF;}
@media(prefers-color-scheme:dark){:root:not([data-mode]){--canvas:#000000;--surface:#191B1E;--field:#292B2E;--ink:#FFFFFF;--muted:#B8B8B8;--line:#3A3C40;--line-strong:#FFFFFF;--hover-row:#222427;
  --success:#72D7BD;--warning:#FFD166;--error:#FFB4B4;--info:#7AC9E8;--success-bg:#12302A;--warning-bg:#33290F;--error-bg:#3A1C1C;--info-bg:#10303C;color-scheme:dark;--warning:#FF9B66;--warning-bg:#3A2316;--shadow-ink:#000;--line:#2E3034;--panel:#191B1E;}}
/* ==== v3 additions (Opus 2026-11-01) ==== */
/* Appearance switch: three plain buttons, the current one is ink. Lives in the app bar or a settings row. */
.modeswitch{display:inline-flex;border:1px solid var(--modeswitch-line,#6B6766)}
.modeswitch button{background:none;border:0;color:inherit;opacity:.72;font:var(--t-caps);letter-spacing:var(--caps-track);text-transform:uppercase;min-height:32px;padding:0 10px;cursor:pointer}
.modeswitch button[aria-pressed=true]{background:#fff;color:#191B1E;opacity:1}
.surface .modeswitch,.setrow .modeswitch{--modeswitch-line:var(--line-strong)}
.surface .modeswitch button[aria-pressed=true],.setrow .modeswitch button[aria-pressed=true]{background:var(--ink);color:var(--surface)}
/* App shell: dark bar + tick row, content on the canvas, max 1200 wide. */
.app-shell{min-height:100vh;display:flex;flex-direction:column}
.app-shell>main{flex:1;width:100%;max-width:1200px;margin:0 auto;padding:32px clamp(16px,4vw,40px) 80px}
.app-shell>footer.app-foot{border-top:1px solid var(--line);padding:16px clamp(16px,4vw,40px);display:flex;justify-content:space-between;gap:16px;font:var(--t-meta);color:var(--muted)}
.appbar a.name{text-decoration:none}
.appbar .navlinks a:hover{color:#fff}
.appbar .iconbtn{background:transparent;border-color:#3A3C40;color:#fff}
@media(max-width:760px){.appbar .navlinks{display:none}.appbar .modeswitch{display:none}}
/* Page head: title + one line + actions on the right. */
.pagehead{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap;margin-bottom:24px}
.pagehead h1{font:var(--t-page);letter-spacing:-.01em}
.pagehead p{color:var(--muted);margin-top:6px}
.pagehead .actions{display:flex;gap:8px;flex-wrap:wrap}
/* Section inside a page: caps label + rule, the quiet way to group. */
.section{margin-top:40px}
.section>h2{font:var(--t-caps);letter-spacing:var(--caps-track);text-transform:uppercase;color:var(--muted);padding-bottom:10px;border-bottom:1px solid var(--line-strong);margin-bottom:16px;display:flex;justify-content:space-between;gap:12px}
.panel{background:var(--surface);border:1px solid var(--line);padding:24px}
@media(max-width:760px){.panel{padding:16px}}
/* Recipient (client-facing) page: editorial opening on black paper, then a quiet file list on the canvas. */
.recipient-open{background:#000 url(paper-black.webp) center/cover;color:#fff;padding:56px clamp(16px,4vw,40px) 40px}
.recipient-open .eyebrow{font:var(--t-caps);letter-spacing:var(--caps-track);text-transform:uppercase;color:#B8B8B8}
.recipient-open h1{font-family:'Possible Regular';font-weight:400;text-transform:uppercase;font-size:clamp(40px,7vw,96px);line-height:.9;letter-spacing:-.03em;margin:16px 0 20px;max-width:16ch;overflow-wrap:anywhere}
.recipient-open .facts{display:flex;gap:20px;flex-wrap:wrap;font:var(--t-caps);letter-spacing:var(--caps-track);text-transform:uppercase;color:#D9D9D9}
.recipient-open .note{max-width:640px;margin-top:20px;color:#D9D9D9}
.recipient-open .act{margin-top:28px;display:flex;gap:8px;flex-wrap:wrap}
@media(max-width:760px){.recipient-open{padding-top:32px}.recipient-open h1{font-size:40px}}
/* File list rows: type tag, name (middle-truncation is the app's job, keep extensions), size, one action. */
.files{border-top:1px solid var(--line-strong)}
.files .uprow{grid-template-columns:auto minmax(0,1fr) auto auto}
.files .uprow .meta{white-space:nowrap}
.ftype{font:var(--t-caps);letter-spacing:.06em;border:1px solid var(--line-strong);padding:2px 6px;min-width:44px;text-align:center}
/* Gate: one narrow card for password, email code, sign-in prompts. */
.gate{max-width:440px;margin:8vh auto;display:flex;flex-direction:column;gap:16px}
.gate h1{font:var(--t-page)}
/* Progress bar (v1 .bar): ink on a line, warning while paused, error on failure. Never promise ETA unless the app measures it. */
.bar[data-s=warning]>i{background:var(--warning)}.bar[data-s=error]>i{background:var(--error)}
/* Empty state inside lists: plain, the moment is for whole empty pages. */
.empty-row{padding:32px 0;color:var(--muted)}
/* Server-rendered apps: bare controls inside .field get the input look (no class needed). Low specificity via :where. */
:where(.field) :where(input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=hidden]),select,textarea){width:100%;min-height:var(--control);padding:10px 14px;background:var(--field);border:1px solid var(--muted);border-radius:0;font:var(--t-body);color:var(--ink)}
:where(.field) :where(input,select,textarea):hover{border-color:var(--ink)}
:where(.field) :where(input,select,textarea):focus{outline:2px solid var(--ink);outline-offset:0;border-color:var(--ink)}
:where(.field) :where(input,textarea)::placeholder{color:var(--muted)}
:where(.field) select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--ink) 50%),linear-gradient(135deg,var(--ink) 50%,transparent 50%);background-position:calc(100% - 20px) 50%,calc(100% - 14px) 50%;background-size:6px 6px;background-repeat:no-repeat;padding-right:40px}
:where(.field) textarea{min-height:96px;resize:vertical}
label.field>.lbl{font:500 14px/20px 'Whyte Inktrap',Whyte;display:flex;justify-content:space-between;gap:8px}
label.field>.lbl .opt{font:var(--t-meta);color:var(--muted)}
fieldset.field{border:0;padding:0;margin:0}
fieldset.field>legend{padding:0;margin-bottom:6px;font:500 14px/20px 'Whyte Inktrap',Whyte}
/* Tabs as links (server routes): same look as button tabs. */
.tabs a{padding:12px 0;font:var(--t-label);color:var(--muted);text-decoration:none;white-space:nowrap}
.tabs a[aria-current]{color:var(--ink);box-shadow:inset 0 -3px var(--ink)}
.tabs a:hover{color:var(--ink)}