/* vee's admin app, on Vesper: flat bands, one seam, no radius, no shadows. Colours come from the band tokens only. */
@font-face{font-family:"Exo 2";font-weight:100 900;font-style:normal;font-display:block;src:url(/vesper/fonts/Exo2-Variable.ttf) format("truetype-variations")}
@font-face{font-family:"Exo 2";font-weight:100 900;font-style:italic;font-display:block;src:url(/vesper/fonts/Exo2-Variable-Italic.ttf) format("truetype-variations")}
@font-face{font-family:"Audiowide";font-weight:400;font-style:normal;font-display:block;src:url(/vesper/fonts/Audiowide-Regular.ttf) format("truetype")}

*{box-sizing:border-box;border-radius:0}
html,body{margin:0;height:100%;background:var(--band-1-bg);overscroll-behavior:none}
body{font-family:var(--font-body);font-size:var(--text-body-size);font-weight:var(--text-body-weight);line-height:var(--text-body-leading);text-transform:lowercase;-webkit-text-size-adjust:100%}
button,input,textarea{font:inherit;color:inherit;background:none;border:0;padding:0;margin:0;text-transform:inherit}
button{cursor:pointer}
:focus-visible{outline:1px solid currentColor;outline-offset:3px}
[hidden]{display:none !important}

/* The seam: --s1 is the one number, set by the script every frame while it travels. Nothing below transitions on it. */
#app{position:fixed;left:0;right:0;top:0;height:var(--vh,100dvh);overflow:hidden;--s1:88;--title:clamp(46px,13vw,104px)}
.band{position:absolute;left:0;right:0;overflow:hidden}
.band1{top:0;height:calc(var(--s1) * 1%);background:var(--band-1-bg);color:var(--band-1-fg);--quiet:var(--band-1-quiet)}
.band2{top:calc(var(--s1) * 1%);bottom:0;background:var(--band-2-bg);color:var(--band-2-fg);--quiet:var(--band-2-quiet)}
.quiet{color:var(--quiet);margin:0}

/* One word in two inks: the same title drawn twice, each copy cut at the seam, .6em down. */
.ttl{position:absolute;left:calc(var(--space-gutter) - .06em);top:calc(var(--s1) * 1% - .6em);margin:0;white-space:nowrap;font-family:var(--font-display);font-weight:400;font-size:var(--title);letter-spacing:var(--display-tracking);line-height:1}
.ttl-top{color:var(--band-1-fg);clip-path:inset(0 0 calc(100% - .6em) 0);pointer-events:none}
.ttl-bottom{color:var(--band-2-fg);clip-path:inset(.6em 0 0 0);pointer-events:none}
.ttl-bottom button{pointer-events:auto;font:inherit;letter-spacing:inherit;line-height:inherit}
#app[data-level="section"]{--title:clamp(34px,10vw,88px)}

/* band one */
.pane1{position:absolute;left:var(--space-gutter);right:var(--space-gutter);top:calc(env(safe-area-inset-top) + var(--space-bar-y));bottom:calc(var(--title) * .7)}
.menu{list-style:none;margin:0;padding:0}
.menu li + li{border-top:1px solid currentColor}
.menu button{display:block;width:100%;text-align:left;padding:var(--space-opt-y) 0;font-size:clamp(20px,5.4vw,30px);font-family:var(--font-display);letter-spacing:var(--display-tracking);transition:padding-left var(--dur-hover) var(--ease-out)}
.menu button:hover{padding-left:var(--space-hover-shift)}
.rail{position:absolute;left:0;right:0;top:calc(env(safe-area-inset-top) + 14px);display:flex;justify-content:center;gap:clamp(14px,4vw,28px)}
.rail button{font-family:var(--font-display);letter-spacing:var(--display-tracking);font-size:var(--space-bar-size);line-height:1;padding:8px 0;border-bottom:2px solid transparent}
.rail button[aria-current="page"]{border-bottom-color:currentColor}
.readouts{position:absolute;left:var(--space-gutter);right:var(--space-gutter);top:calc(env(safe-area-inset-top) + 58px);display:flex;gap:var(--space-stack-gap)}
.readouts b{display:block;font-family:var(--font-display);font-weight:400;font-size:clamp(18px,5vw,26px);letter-spacing:var(--display-tracking);line-height:1.1}
.readouts span{font-size:var(--text-label-size);font-weight:var(--text-label-weight);letter-spacing:var(--text-label-tracking);color:var(--quiet)}

/* controls: the only borders in the system */
.action{position:relative;border:1px solid currentColor;padding:11px 24px;min-height:44px;font-weight:600;font-size:14px;letter-spacing:.03em;transition:background var(--dur-opacity) var(--ease-out),color var(--dur-opacity) var(--ease-out)}
.action::after{content:"";position:absolute;right:-1px;bottom:-1px;width:9px;height:9px;border-right:1px solid currentColor;border-bottom:1px solid currentColor;opacity:.6}
.band1 .action:hover,.band1 .action:active{background:var(--band-1-fg);color:var(--band-1-bg)}
.band2 .action:hover,.band2 .action:active{background:var(--band-2-fg);color:var(--band-2-bg)}
.field{display:block;margin:0 0 22px}
.label{display:block;font-size:var(--text-label-size);font-weight:var(--text-label-weight);letter-spacing:var(--text-label-tracking);color:var(--quiet)}
.field input,.say textarea{display:block;width:100%;border-bottom:1px solid currentColor;padding:8px 0;font-size:16px;text-transform:none;outline:0}
.signin{margin-top:8px}
.signin .quiet{margin-top:14px;min-height:1.5em}

/* the global switch on the menu's bottom band: armed first, then it fires */
.global{position:absolute;right:var(--space-gutter);bottom:calc(env(safe-area-inset-bottom) + 12px);font-size:var(--text-label-size);font-weight:var(--text-label-weight);letter-spacing:var(--text-label-tracking);padding:12px 0 12px 24px}
.global u{text-underline-offset:4px}
/* armed is a word, not a look: only the label changes. pressed while armed, it inverts to band three's pair. */
.global[data-armed]:active{background:var(--band-3-fg);color:var(--band-3-bg)}

/* band two panes sit below the lower half of the title */
.pane{position:absolute;left:var(--space-gutter);right:var(--space-gutter);max-width:720px;top:calc(var(--title) * .62);bottom:calc(env(safe-area-inset-bottom) + 12px);display:flex;flex-direction:column;animation:settle var(--dur-opacity) var(--ease-out)}
@keyframes settle{from{opacity:0}}

/* chat: flat square bubbles, hers left, her admin's right. the one place a plane is named. */
.thread{flex:1;min-height:0;overflow-y:auto;display:flex;flex-direction:column;gap:6px;padding-bottom:8px;scrollbar-width:none;text-transform:none}
.thread::-webkit-scrollbar{display:none}
.bub{max-width:82%;padding:8px 12px;margin:0;white-space:pre-wrap;overflow-wrap:anywhere}
.bub.vee{align-self:flex-start;background:var(--band-1-bg);color:var(--band-1-fg)}
.bub.me{align-self:flex-end;background:var(--band-3-bg);color:var(--band-3-fg)}
.bub + .bub.turn{margin-top:8px}
/* a short conversation sits at the bottom, next to where you type */
.thread > :first-child{margin-top:auto}
.pending{min-height:1.5em}
.pending[data-writing]{font-style:italic}
.pending:empty{min-height:0}
.say{display:flex;gap:12px;align-items:flex-end}
.say textarea{flex:1;resize:none;max-height:30vh;line-height:1.4}
.say[data-off] textarea,.say[data-off] button{display:none}

/* control rows: hairlines between, never before the first */
.rows{overflow-y:auto}
.row{display:flex;justify-content:space-between;align-items:baseline;gap:var(--space-row-gap);padding:var(--space-row-y) 0}
.row + .row{border-top:1px solid currentColor}
.row > :last-child{color:var(--quiet);text-align:right}
.tri{display:flex;gap:14px;font-size:var(--text-label-size);font-weight:var(--text-label-weight);letter-spacing:var(--text-label-tracking)}
.tri button{padding:10px 0;border-bottom:2px solid transparent;color:var(--quiet)}
.tri button[aria-pressed="true"]{border-bottom-color:currentColor;color:var(--band-2-fg)}
.row .link{color:var(--band-2-fg);text-decoration:underline;text-underline-offset:4px}

@media (prefers-reduced-motion:reduce){*{animation:none !important;transition:none !important}}