/* Tokens, logo, chips and flaps from brand/skeleton.md. Every owner dashboard page uses this file. */
@font-face{font-family:"Big Shoulders Display";font-weight:700;font-display:swap;src:url(/fonts/bs-700.woff2) format("woff2")}
@font-face{font-family:"Big Shoulders Display";font-weight:800;font-display:swap;src:url(/fonts/bs-800.woff2) format("woff2")}
@font-face{font-family:"Big Shoulders Display";font-weight:900;font-display:swap;src:url(/fonts/bs-900.woff2) format("woff2")}
@font-face{font-family:"Azeret Mono";font-weight:400;font-display:swap;src:url(/fonts/am-400.woff2) format("woff2")}
@font-face{font-family:"Azeret Mono";font-weight:600;font-display:swap;src:url(/fonts/am-600.woff2) format("woff2")}
:root{--night:#0d0f0e;--flap:#1b1d1c;--flap-low:#151716;--line:#2a2d2b;--cream:#eee7d5;--dim:#948f82;--body:#c4bdab;--accent:#73f13f;--accent-ink:#0d1a06;--sh-grey:#a6a6a6;--rule:#1f1f1f;--blue:#5b8ee6;--lav:#d9d2e9;--transit:#e8f15c;--upcoming:#f5b83d;--sleep:#3c3c3c;--prebook:#fde6a8;--prebook-ink:#6e5a22;--red:#e05a4e;--display:"Big Shoulders Display",sans-serif;--text:"Azeret Mono",monospace;--cell:Arial,Helvetica,sans-serif}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{background:var(--night);color:var(--body);font:400 13px/1.55 var(--text);-webkit-font-smoothing:antialiased;font-variant-ligatures:none;position:relative;overflow-x:hidden}
body::before{content:"";position:fixed;inset:0;pointer-events:none;background:radial-gradient(700px 420px at 100% 0,rgba(115,241,63,.13),transparent 70%),repeating-linear-gradient(0deg,rgba(255,255,255,.016) 0 1px,transparent 1px 3px)}
button,input,textarea{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* the logo: same CSS as .mark in apps/website/site.css */
.mark{--s:.9;display:inline-flex;align-items:center;font-family:var(--display);line-height:1;flex:none}
.mark .n,.mark .w{display:inline-flex;align-items:center;height:calc(34px*var(--s));border:calc(2.5px*var(--s)) solid #1f1f1f;font-size:calc(24px*var(--s))}
.mark .n{position:relative;background:#73f13f;color:#0d1a06;font-weight:900;padding:0 calc(15.9px*var(--s)) 0 calc(9px*var(--s));border-radius:calc(6px*var(--s)) 0 0 calc(6px*var(--s))}
.mark .n::after{content:"";position:absolute;right:calc(7px*var(--s));top:50%;margin-top:calc(-.55px*var(--s));border:calc(3.75px*var(--s)) solid transparent;border-top:calc(4.4px*var(--s)) solid currentColor;opacity:.6}
.mark .w{background:#a6a6a6;color:#111;font-weight:800;padding:0 calc(11px*var(--s)) 0 calc(10px*var(--s));border-left:0;border-radius:0 calc(6px*var(--s)) calc(6px*var(--s)) 0}

/* chips: board colours, each keeps its board meaning */
.chip{display:inline-flex;align-items:center;gap:5px;font:700 12px/1 var(--cell);padding:5px 8px;border:1.5px solid var(--rule);border-radius:4px;white-space:nowrap}
.chip.drop::after{content:"▾";opacity:.6;font-size:10px}
.idea{background:var(--prebook);color:var(--prebook-ink)}
.ask{background:var(--upcoming);color:#111}
.building{background:var(--transit);color:#111}
.done{background:var(--accent);color:var(--accent-ink)}
.later{background:var(--sleep);color:#fff}
.stuck{background:var(--red);color:#111}

/* flap tile: a number on the departure board */
.flaps{display:inline-flex;gap:2px}
.flaps b{display:inline-grid;place-items:center;min-width:17px;height:25px;padding:0 2px;font:900 18px/1 var(--display);color:var(--cream);border-radius:3px;background:linear-gradient(var(--flap) 0 49%,#000 49% 51%,var(--flap-low) 51%)}
.meter{display:inline-flex;align-items:center;gap:7px;color:var(--dim);font-size:11.5px;white-space:nowrap}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;background:var(--accent);color:var(--accent-ink);border:0;border-radius:5px;font-weight:600;font-size:12.5px;padding:8px 13px;white-space:nowrap}
.btn.ghost{background:transparent;color:var(--cream);box-shadow:inset 0 0 0 1.5px var(--line)}
.model{display:inline-flex;align-items:center;gap:6px;background:transparent;border:0;box-shadow:inset 0 0 0 1.5px var(--line);border-radius:5px;padding:6px 10px;font-size:12px;color:var(--cream);white-space:nowrap}
.model::after{content:"▾";opacity:.6;font-size:10px}

/* the capture line */
.capture{display:flex;gap:8px}
.capture input{flex:1;min-width:0;background:var(--flap-low);border:1.5px solid var(--line);border-radius:5px;padding:10px 12px;color:var(--cream)}
.capture input::placeholder{color:var(--dim)}

/* chat */
.chat{display:flex;flex-direction:column;gap:14px}
.me{align-self:flex-end;max-width:84%;background:var(--flap);border:1px solid var(--line);border-radius:7px;padding:9px 12px;color:var(--cream)}
.cl{max-width:92%}
.steps{display:flex;flex-direction:column;gap:3px;color:var(--dim);font-size:12px;border-left:2px solid var(--line);padding-left:11px}
.steps .ok{color:var(--accent)}
.approve{border:1.5px solid var(--upcoming);border-radius:7px;padding:12px 13px;display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between;color:var(--cream)}
.approve div{display:flex;gap:8px}
.composer{display:flex;gap:8px;align-items:flex-end}
.composer textarea{flex:1;min-width:0;height:44px;resize:none;background:var(--flap-low);border:1.5px solid var(--line);border-radius:6px;padding:11px 12px;color:var(--cream)}
.composer textarea::placeholder{color:var(--dim)}
.composer .btn{height:44px}
.ttl{font:800 22px/1.05 var(--display);color:var(--cream);margin:0}
.sub{color:var(--dim);font-size:12px;margin:0}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* the login and setup pages */
.gate{position:relative;min-height:100vh;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:22px;max-width:560px;margin:auto;padding:24px 16px}
.gate h1{font:900 clamp(44px,12vw,72px)/.88 var(--display);text-transform:uppercase;color:var(--cream);margin:0}
.gate .btn{font-size:14px;padding:13px 20px}
.gate .btn[disabled]{opacity:.5}
.say{margin:0;min-height:1.5em;color:var(--body)}
.say.bad{color:var(--red)}