/* NicklausOS CMS. Tokens follow the NicklausOS system (os.nicklaus.com): forest green, gold, cream, Instrument Serif. */
:root{
  --ink:#0C2A19; --deep:#113A23; --field:#144128; --green:#16502F; --lift:#1B5C37;
  --gold:#E3BE53; --gold-hi:#F0D488; --cream:#F9F8F3; --mute:#CBD3C4; --dim:#8BA391;
  --line:rgba(227,190,83,.18); --line-hi:rgba(227,190,83,.42); --err:#F0A48B; --ok:#6FD598;
  --serif:"Instrument Serif",Georgia,"Times New Roman",serif;
  --sans:"DM Sans","Helvetica Neue",system-ui,sans-serif;
  --mono:"DM Mono","SF Mono",Menlo,Consolas,monospace;
}
*{box-sizing:border-box}
html{color-scheme:dark}
body{margin:0;background:var(--deep);color:var(--cream);font:15px/1.5 var(--sans);-webkit-font-smoothing:antialiased}
a{color:var(--gold);text-underline-offset:3px}
h1,h2,h3{margin:0;font-weight:500}
p{margin:0}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.boot{padding:3rem;color:var(--dim)}
/* NicklausOS type: the serif is a single weight, labels are tracked mono caps. */
.eyebrow{font-family:var(--mono);font-size:.68rem;font-weight:400;letter-spacing:.26em;text-transform:uppercase;color:rgba(249,248,243,.62)}
.wordmark{font-family:var(--serif);font-weight:400;letter-spacing:-.01em;line-height:.9;white-space:nowrap}
.wordmark .cream{color:var(--cream)} .wordmark .gold{color:var(--gold)}
[hidden]{display:none!important}

/* controls */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:.6rem 1.05rem;border-radius:6px;border:1px solid var(--line-hi);background:transparent;color:var(--cream);font-weight:500;cursor:pointer;text-decoration:none;white-space:nowrap}
.btn:hover{background:rgba(227,190,83,.09)}
.btn.primary{background:var(--gold);border-color:var(--gold);color:var(--deep);font-family:var(--mono);font-size:.78rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase}
.btn.primary:hover{background:var(--gold-hi)}
.btn.link{border:0;border-bottom:1px solid rgba(249,248,243,.22);border-radius:0;padding:0 0 .2rem;font-family:var(--mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:rgba(249,248,243,.6);min-height:0}
.btn.link:hover{background:none;color:var(--gold);border-bottom-color:var(--gold)}
.btn.quiet{border-color:transparent;color:var(--mute);padding-inline:.6rem}
.btn.danger{color:var(--err);border-color:rgba(240,164,139,.4)}
.btn[disabled]{opacity:.5;cursor:default}
.btn.small{padding:.35rem .7rem;font-size:.87rem}
input[type=text],input[type=email],input[type=password],input[type=url],select,textarea{width:100%;padding:.62rem .75rem;background:var(--ink);border:1px solid var(--line);border-radius:6px}
input::placeholder,textarea::placeholder{color:var(--dim)}
textarea{resize:vertical;line-height:1.55}
label.field{display:grid;gap:.35rem;font-size:.9rem;color:var(--mute)}
label.field small{color:var(--dim)}
.note{color:var(--dim);font-size:.9rem}
.mono{font-family:var(--mono);font-size:.86rem}
.stack{display:grid;gap:1rem}
.row{display:flex;gap:.6rem;align-items:center;flex-wrap:wrap}
.spread{display:flex;gap:1rem;align-items:center;justify-content:space-between;flex-wrap:wrap}
.banner{padding:.8rem 1rem;border:1px solid var(--line-hi);border-left:3px solid var(--gold);border-radius:0 6px 6px 0;background:var(--field);display:flex;gap:1rem;align-items:center;justify-content:space-between;flex-wrap:wrap}
.banner.err{border-color:rgba(240,164,139,.5);border-left-color:var(--err);color:#F8D2C4}

/* sign in: the NicklausOS stage (os.nicklaus.com/login) */
.auth{position:relative;min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;background:radial-gradient(ellipse at 22% 32%,rgba(227,190,83,.12) 0%,transparent 55%),radial-gradient(ellipse at 78% 72%,rgba(22,80,47,.9) 0%,transparent 60%),linear-gradient(180deg,#113A23 0%,#0C2A19 100%)}
.auth__bg{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.auth__bg svg{position:absolute;inset:0;width:100%;height:100%;opacity:.75}
.auth__mark{position:absolute;top:32px;left:40px;z-index:2;display:flex}
.auth__mark img{height:72px;width:auto;display:block}
.auth__stage{position:relative;z-index:1;flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:130px 20px 48px}
.auth__wordmark{font-size:64px;text-shadow:0 4px 60px rgba(227,190,83,.18);margin-bottom:12px}
.auth__eyebrow{font-size:11px;letter-spacing:.32em;margin-bottom:36px}
.auth__box{width:100%;max-width:420px;display:grid;gap:.9rem;padding:32px 32px 28px;background:rgba(249,248,243,.04);border:1px solid rgba(227,190,83,.28);border-radius:14px;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);box-shadow:0 24px 80px rgba(0,0,0,.35)}
.auth__box h1{font-family:var(--serif);font-weight:400;font-size:30px;line-height:1.1}
.auth__lede{font-size:13px;color:rgba(249,248,243,.68);line-height:1.5;margin-top:-.5rem}
.auth__box form{margin-top:.5rem}
.auth__box label.field{font-family:var(--mono);font-size:.64rem;letter-spacing:.2em;text-transform:uppercase;color:rgba(227,190,83,.85)}
.auth__box label.field small{font-family:var(--sans);font-size:.8rem;letter-spacing:0;text-transform:none}
.auth__box input{background:rgba(249,248,243,.06);border-color:rgba(249,248,243,.18);border-radius:8px}
.auth__box input:focus{border-color:var(--gold);background:rgba(249,248,243,.09);outline:none}
.auth__box .btn.primary{width:100%;padding:13px 16px}
.auth__box .note{font-size:.82rem}
.auth__foot{position:relative;z-index:1;text-align:center;padding:0 20px 28px;font-family:var(--mono);font-size:10px;letter-spacing:.26em;text-transform:uppercase;color:rgba(249,248,243,.4)}
.auth__foot .sep{color:var(--gold);margin:0 8px}

/* shell */
.shell{display:grid;grid-template-columns:15.5rem minmax(0,1fr);min-height:100vh}
.rail{background:var(--ink);border-right:1px solid var(--line);display:flex;flex-direction:column;position:sticky;top:0;height:100vh}
.rail__brand{display:flex;align-items:center;gap:.75rem;padding:1.1rem 1rem;border-bottom:1px solid var(--line);color:inherit;text-decoration:none}
.rail__brand img{height:46px;width:auto;flex:none}
.rail__brand .wordmark{display:block;font-size:1.5rem}
.rail__brand .eyebrow{display:block;margin-top:.3rem;color:var(--gold);font-size:.62rem}
.rail nav{flex:1;overflow:auto;padding:.8rem .6rem;display:grid;gap:2px;align-content:start}
.rail h2{font-family:var(--mono);font-size:.64rem;font-weight:400;letter-spacing:.24em;text-transform:uppercase;color:var(--dim);padding:.7rem .6rem .3rem}
.rail a.item{display:block;padding:.5rem .6rem;border-radius:5px;color:var(--mute);text-decoration:none;border-left:2px solid transparent}
.rail a.item:hover{background:rgba(227,190,83,.07);color:var(--cream)}
.rail a.item[aria-current=page]{background:rgba(227,190,83,.12);border-left-color:var(--gold);color:var(--gold);font-weight:500}
.rail__foot{border-top:1px solid var(--line);padding:.8rem 1.1rem;display:grid;gap:.4rem;font-size:.88rem;color:var(--dim)}
.rail__foot b{color:var(--cream);font-weight:500;overflow:hidden;text-overflow:ellipsis}
.main{padding:2rem clamp(1rem,3.5vw,3rem) 5rem;max-width:74rem;width:100%}
.head{display:grid;gap:.4rem;margin-bottom:1.4rem}
.head h1{font-family:var(--serif);font-size:clamp(2.1rem,3.6vw,3.1rem);line-height:1.02;font-weight:400;letter-spacing:-.01em}
.head .sub{color:var(--dim);display:flex;gap:1.2rem;flex-wrap:wrap}
.head .sub a{color:var(--mute)}
.tabs{display:flex;gap:1.6rem;border-bottom:1px solid var(--line);margin-bottom:1.6rem}
.tabs a{padding:.6rem 0;color:var(--mute);text-decoration:none;border-bottom:2px solid transparent;margin-bottom:-1px}
.tabs a[aria-current=page]{color:var(--gold);border-bottom-color:var(--gold);font-weight:500}
.section{display:grid;gap:.8rem;margin-top:2rem}
.section>h2{font-family:var(--serif);font-size:1.6rem;font-weight:400}

/* ledger rows */
.ledger{border-top:1px solid var(--line)}
.ledger>*{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:1rem;align-items:center;padding:.85rem .2rem;border-bottom:1px solid var(--line);color:inherit;text-decoration:none}
a.ledger__row:hover{background:rgba(227,190,83,.05)}
.ledger__title{font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ledger__meta{color:var(--dim);font-size:.88rem;display:flex;gap:1rem;flex-wrap:wrap}
.pill{display:inline-flex;align-items:center;gap:.4rem;padding:.12rem .6rem;border-radius:99px;border:1px solid var(--line-hi);font-size:.82rem;color:var(--gold)}
.pill.ok{color:var(--ok);border-color:rgba(111,213,152,.4)}
.pill.warn{color:var(--err);border-color:rgba(240,164,139,.4)}
.empty{padding:2.2rem 1rem;border:1px dashed var(--line-hi);border-radius:8px;color:var(--mute);text-align:center}

/* change set */
.stages{display:grid;grid-template-columns:repeat(3,1fr);margin:.4rem 0 1.6rem;counter-reset:s}
.stages li{list-style:none;padding-top:.8rem;border-top:3px solid var(--line);color:var(--dim);font-size:.92rem;counter-increment:s}
.stages li::before{content:counter(s) ". "}
.stages li.done{border-top-color:var(--gold);color:var(--cream)}
.stages li.now{border-top-color:var(--gold);color:var(--gold);font-weight:500}
ol.stages{padding:0}
.cols{display:grid;grid-template-columns:minmax(0,1fr) 19rem;gap:2.4rem;align-items:start}
.actions{display:grid;gap:.6rem;position:sticky;top:1.5rem}
.actions .btn{width:100%}
.comment{display:grid;gap:.3rem}
.comment .who{font-size:.88rem;color:var(--dim)}
.comment .who b{color:var(--cream);font-weight:500}
.comment .text{white-space:pre-wrap;overflow-wrap:anywhere}
.sugg{border-left:3px solid var(--gold);padding:.35rem .7rem;background:var(--ink);font-size:.92rem;display:grid;gap:.15rem}
.sugg del{color:var(--err)} .sugg ins{color:var(--ok);text-decoration:none}

/* files */
.files{display:grid;grid-template-columns:17rem minmax(0,1fr);gap:1.6rem;align-items:start}
.tree{border:1px solid var(--line);border-radius:8px;overflow:hidden;max-height:70vh;overflow-y:auto}
.tree .crumbs{padding:.6rem .8rem;border-bottom:1px solid var(--line);background:var(--field);font-size:.86rem;overflow-wrap:anywhere}
.tree button{display:flex;gap:.5rem;width:100%;text-align:left;padding:.42rem .8rem;background:none;border:0;border-bottom:1px solid rgba(227,190,83,.07);cursor:pointer;color:var(--mute);font-size:.9rem}
.tree button:hover{background:rgba(227,190,83,.07);color:var(--cream)}
.tree button[disabled]{opacity:.4;cursor:default}
.tree button.dir{color:var(--cream)}
.tree button[aria-current=true]{color:var(--gold);background:rgba(227,190,83,.1)}
.editor textarea.code{font-family:var(--mono);font-size:.84rem;min-height:56vh;white-space:pre;overflow:auto;tab-size:2}
.ai{border:1px solid var(--line);border-radius:8px;padding:1rem;background:var(--field);display:grid;gap:.7rem}

/* tables and forms */
table{width:100%;border-collapse:collapse}
th,td{text-align:left;padding:.6rem .5rem;border-bottom:1px solid var(--line);vertical-align:middle}
th{font-weight:500;color:var(--dim);font-size:.88rem}
td select{width:auto}
.grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));gap:.9rem}
details.site{border:1px solid var(--line);border-radius:8px;padding:.2rem 1rem}
details.site summary{cursor:pointer;padding:.7rem 0;font-weight:500}
details.site[open]{padding-bottom:1rem}
.check{display:grid;grid-template-columns:1.6rem 1fr;gap:.2rem .5rem;align-items:start}
.check .mark{font-weight:600}
.check .mark.ok{color:var(--ok)} .check .mark.no{color:var(--err)}

.toast{position:fixed;left:50%;bottom:1.5rem;transform:translateX(-50%);background:var(--ink);border:1px solid var(--line-hi);border-radius:8px;padding:.7rem 1rem;max-width:min(36rem,calc(100vw - 2rem));box-shadow:0 10px 30px rgba(4,20,11,.5);z-index:10}
.toast.err{border-color:var(--err);color:#F8D2C4}
dialog{background:var(--field);color:var(--cream);border:1px solid var(--line-hi);border-radius:10px;padding:1.5rem;width:min(30rem,calc(100vw - 2rem))}
dialog::backdrop{background:rgba(7,26,15,.75)}
dialog h2{font-family:var(--serif);font-size:1.6rem;font-weight:400;margin-bottom:.6rem}

@media (max-width:900px){
  .shell{grid-template-columns:1fr}
  .rail{position:static;height:auto}
  .rail nav{display:flex;flex-wrap:wrap;gap:.2rem}
  .rail h2{display:none}
  .cols,.files{grid-template-columns:1fr}
  .actions{position:static}
}
@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}
.section h2{font-family:var(--serif);font-size:1.6rem;font-weight:400}
.banner{margin-bottom:1.1rem}

/* ---------- sheets (centered dialog on desktop, bottom sheet on phones) ---------- */
dialog.sheet{display:grid;gap:.9rem}
dialog.sheet:not([open]){display:none}
.sheet__grip{display:none}
.sheet__actions{display:flex;gap:.6rem;justify-content:flex-end;margin-top:.5rem}
.sheet__item{display:flex;flex-direction:column;gap:.1rem;width:100%;text-align:left;padding:.85rem .2rem;background:none;border:0;border-top:1px solid var(--line);color:var(--cream);text-decoration:none;cursor:pointer;font-size:1.02rem}
.sheet__item small{color:var(--dim);font-size:.85rem}
.sheet__item[aria-current=page] span{color:var(--gold);font-weight:500}
.sheet__item[disabled]{opacity:.5;cursor:default}
.sheet__item.danger span{color:var(--err)}
.sheet--list{gap:0}
.sheet--list h2{margin-bottom:.4rem}
.sheet--list .note{margin-bottom:.8rem}

/* ---------- phone layout: behaves like an app ---------- */
.appbar,.tabbar,.dock{display:none}
@media (max-width:820px){
  :root{--top:calc(54px + env(safe-area-inset-top,0px));--tabs:calc(60px + env(safe-area-inset-bottom,0px))}
  html{-webkit-text-size-adjust:100%}
  body{overscroll-behavior-y:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
  .shell{display:block;min-height:100dvh}
  .rail,.head,.tabs,.actions{display:none}
  .main{padding:calc(var(--top) + 18px) 16px calc(var(--tabs) + 28px);max-width:none}
  body.has-dock .main{padding-bottom:calc(var(--tabs) + 104px)}

  .appbar{display:grid;grid-template-columns:44px minmax(0,1fr) 44px;align-items:center;gap:4px;position:fixed;z-index:20;top:0;left:0;right:0;height:var(--top);padding:env(safe-area-inset-top,0px) 8px 0;background:rgba(12,42,25,.94);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
  .appbar__logo{width:30px;height:30px;border-radius:8px;justify-self:center}
  .appbar__btn{display:grid;place-items:center;width:44px;height:44px;color:var(--gold);border-radius:50%}
  .appbar__title{display:flex;align-items:center;justify-content:center;gap:.25rem;min-width:0;height:44px;background:none;border:0;padding:0 .2rem;font-family:var(--serif);font-size:1.45rem;font-weight:400;color:var(--cream)}
  .appbar__title>span:first-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .appbar__chev{display:inline-flex;color:var(--gold);flex:none}
  .appbar__chev svg{width:18px;height:18px}
  .appbar__me{justify-self:center;width:40px;height:40px;border-radius:50%;border:1px solid var(--line-hi);background:var(--green);color:var(--gold);font-size:.78rem;font-weight:600;letter-spacing:.02em}

  .tabbar{display:grid;grid-template-columns:repeat(4,1fr);position:fixed;z-index:20;left:0;right:0;bottom:0;height:var(--tabs);padding-bottom:env(safe-area-inset-bottom,0px);background:rgba(12,42,25,.96);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-top:1px solid var(--line)}
  .tabbar>*{display:grid;justify-items:center;align-content:center;gap:3px;background:none;border:0;padding:0;color:var(--dim);text-decoration:none;font-size:.7rem;font-weight:500}
  .tabbar>*>span:first-child{display:inline-flex}
  .tabbar [aria-current=page]{color:var(--gold)}
  .tabbar>*:active,.appbar__btn:active,.appbar__me:active,.sheet__item:active,.ledger>a:active,.tree button:active{opacity:.6}

  .dock{display:flex;gap:.6rem;position:fixed;z-index:19;left:0;right:0;bottom:var(--tabs);padding:22px 16px 12px;background:linear-gradient(to bottom,rgba(17,58,35,0),var(--deep) 34%)}
  .dock .btn{flex:1;min-height:50px;font-size:1rem;border-radius:12px}
  .dock .btn.primary{font-size:.8rem}
  .dock .dock__more{flex:0 0 54px;padding:0;background:var(--field)}

  /* touch-sized controls; 16px text stops iOS zooming on focus */
  .btn{min-height:46px;border-radius:10px}
  .btn.small{min-height:38px;padding:.4rem .85rem}
  .btn:active{transform:scale(.98)}
  input[type=text],input[type=email],input[type=password],input[type=url],select,textarea{font-size:16px;min-height:48px;border-radius:10px}
  .main form.row{flex-wrap:wrap!important}
  .main form.row>.btn{width:100%}
  .row>div[style*="min-width"]{min-width:0!important;flex:1}
  .section{margin-top:1.7rem}
  .section h2{font-size:1.4rem}
  .banner{flex-direction:column;align-items:stretch;border-radius:12px;border-left-width:1px;border-top:3px solid var(--gold)}
  .banner.err{border-top-color:var(--err)}
  .empty{border-radius:14px;padding:1.8rem 1rem}

  .ledger>*{grid-template-columns:minmax(0,1fr);gap:.55rem;padding:.95rem 0}
  .ledger>a{grid-template-columns:minmax(0,1fr) auto;position:relative;padding-right:1.4rem}
  .ledger>a::after{content:"";position:absolute;right:.3rem;top:50%;width:8px;height:8px;border-right:2px solid var(--dim);border-top:2px solid var(--dim);transform:translateY(-50%) rotate(45deg)}
  .ledger__title{white-space:normal}
  .stages{margin-bottom:1.2rem}
  .stages li{font-size:.82rem;padding-top:.6rem}
  .cols,.files,.grid2{grid-template-columns:minmax(0,1fr)}
  .cols{gap:0}
  .spread>h2[style]{font-size:1.6rem!important}

  .files.has-file .tree{display:none}
  .files:not(.has-file)>:not(.tree){display:none}
  .tree{max-height:none;border-radius:14px}
  .tree button{padding:.9rem 1rem;font-size:1rem}
  .editor__bar .btn{display:none}
  .editor__bar,.editor__bar .row{display:grid;gap:.5rem;justify-content:stretch}
  .editor textarea.code{min-height:46vh;font-size:14px;line-height:1.5;border-radius:12px}
  .ai{border-radius:14px}
  .ai .spread{display:grid;gap:.6rem}
  .ai select{width:100%!important}

  table,tbody,tr,td{display:block}
  thead{display:none}
  tr{padding:.8rem 0;border-bottom:1px solid var(--line)}
  td{border:0;padding:.15rem 0}
  td select{width:100%;margin-top:.4rem}
  .check{grid-template-columns:2.2rem 1fr}
  div[style*="grid-template-columns:minmax(0,14rem)"]{grid-template-columns:minmax(0,1fr)!important;padding-bottom:.9rem;border-bottom:1px solid var(--line)}

  .toast{top:calc(var(--top) + 10px);bottom:auto;width:max-content;border-radius:12px;text-align:center}
  .only-wide{display:none}

  dialog.sheet{margin:auto 0 0;width:100%;max-width:100%;max-height:86dvh;overflow:auto;border-radius:20px 20px 0 0;border-width:1px 0 0;padding:.6rem 1.2rem calc(1.2rem + env(safe-area-inset-bottom,0px));animation:sheet-up .22s cubic-bezier(.2,.8,.2,1)}
  .sheet__grip{display:block;width:40px;height:4px;border-radius:2px;background:var(--line-hi);margin:0 auto .5rem}
  .sheet__actions{display:grid;grid-template-columns:1fr 1fr}
  .sheet__actions:has(>:only-child){grid-template-columns:1fr}
  .sheet__item{padding:1rem .2rem}
  .auth__mark{top:calc(20px + env(safe-area-inset-top,0px));left:20px}
  .auth__mark img{height:52px}
  .auth__stage{padding:calc(100px + env(safe-area-inset-top,0px)) 16px 32px}
  .auth__wordmark{font-size:48px}
  .auth__box{padding:26px 22px 22px}
  .auth__foot{font-size:9px;letter-spacing:.16em;padding-bottom:calc(20px + env(safe-area-inset-bottom,0px))}
}
@keyframes sheet-up{from{transform:translateY(100%)}}
@media (prefers-reduced-motion:reduce){dialog.sheet{animation:none}}
/* Installed to the home screen: no browser chrome, so respect the notch. */
@media (display-mode:standalone){body{user-select:none;-webkit-user-select:none}input,textarea,.mono,.text,.body{user-select:text;-webkit-user-select:text}}

/* ---------- visual editor ---------- */
.main.main--wide{max-width:none;height:100vh;height:100dvh;display:flex;flex-direction:column;padding:1.2rem 1.4rem 1rem;overflow:hidden}
.main--wide .head{margin-bottom:.6rem;flex:none}
.main--wide .head h1{font-size:1.7rem}
.main--wide .head .sub{display:none}
.main--wide .tabs{margin-bottom:.8rem;flex:none}
.vbar{display:grid;gap:.6rem;margin-bottom:.8rem;flex:none}
.vbar__row{display:flex;gap:.7rem;align-items:center;flex-wrap:wrap}
.vbar__pick{flex:0 1 18rem;min-width:11rem}
.vaddr{display:flex;gap:.4rem;flex:1 1 16rem;min-width:12rem}
.vaddr input{font-family:var(--mono);font-size:.86rem}
.seg{display:inline-flex;border:1px solid var(--line-hi);border-radius:8px;overflow:hidden;flex:none}
.seg button{padding:.45rem .85rem;background:none;border:0;border-left:1px solid var(--line);color:var(--mute);cursor:pointer;font-weight:500;white-space:nowrap}
.seg button:first-child{border-left:0}
.seg button:hover{background:rgba(227,190,83,.08);color:var(--cream)}
.seg button[aria-pressed=true]{background:var(--gold);color:var(--ink);font-weight:600}
.vhint{color:var(--dim);font-size:.9rem;flex:1 1 12rem;min-width:0}
.vstatus{font-size:.88rem;color:var(--dim);white-space:nowrap}
.vstatus[data-kind=ok]{color:var(--ok)} .vstatus[data-kind=err]{color:var(--err)} .vstatus[data-kind=busy]{color:var(--gold)}
.vnote{margin-bottom:.6rem;flex:none}
.vframe{position:relative;flex:1 1 auto;min-height:0;border:1px solid var(--line-hi);border-radius:10px;background:var(--ink);overflow:hidden;display:flex;justify-content:center}
.vframe[data-framed=true]{background:repeating-linear-gradient(135deg,#0C2A19 0 14px,#0F3120 14px 28px)}
.vframe__fit{position:relative;overflow:hidden;background:#fff;flex:none}
.vframe[data-framed=true] .vframe__fit{box-shadow:0 0 0 1px var(--line-hi),0 10px 40px rgba(4,20,11,.5)}
.vframe__page{display:block;border:0;background:#fff;transform-origin:0 0}
.vframe__loading{position:absolute;inset:0;display:grid;place-items:center;background:var(--field);color:var(--mute)}
.vframe[data-ready=true] .vframe__loading{display:none}
@media (max-width:820px){
  .tabbar{grid-template-columns:repeat(5,1fr)}
  .main.main--wide{padding:calc(var(--top) + 8px) 0 var(--tabs)}
  .vbar{padding:0 12px;gap:.5rem;margin-bottom:.5rem}
  .vbar__row{gap:.5rem}
  .vbar__row:first-child{flex-wrap:nowrap}
  .vbar__pick{flex:1 1 55%;min-width:0}
  .vaddr{flex:1 1 45%;min-width:0}
  .vaddr .btn{display:none}
  .vbar__widths,.vhint,.vbar__cs{display:none}
  .vbar .seg{flex:1}
  .vbar .seg button{flex:1;padding:.6rem .3rem;font-size:.92rem}
  .vstatus{flex:1 1 100%;text-align:center;font-size:.8rem}
  .vstatus:empty{display:none}
  .vnote{padding:0 12px}
  .vframe{border-radius:0;border-width:1px 0 0}
}