@import url('/fonts/fonts.css');
/* Writeroom design tokens: warm paper neutrals, ink blue accent, editorial type. */
:root{
  --font-ui:'Inter',system-ui,-apple-system,sans-serif;
  --font-display:'Newsreader',Georgia,serif;
  --font-mono:'JetBrains Mono',ui-monospace,monospace;
  --bg:#f4f2ee;            /* app canvas (warm paper) */
  --bg-2:#ebe8e2;          /* sunken areas */
  --panel:#ffffff;
  --panel-2:#faf9f7;
  --line:#e3dfd7;
  --line-2:#cfc9bf;
  --ink:#1b1a17;
  --ink-2:#514d45;
  --ink-3:#6b6458;        /* secondary text: at least 4.5:1 on every background here (audit S32, was #8a8478) */
  --accent:#1f4ed8;        /* ink blue */
  --accent-2:#e7edff;
  --accent-ink:#163aa6;
  --ok:#1b7f4b; --ok-2:#e3f4ea;
  --warn:#a15c00; --warn-2:#fff1dc;   /* status text at 4.5:1 or more on its own tint, as in the app (audit S32) */
  --bad:#b93434; --bad-2:#fde7e7;
  --violet:#6b4de6; --violet-2:#efeafd;
  --shadow-1:0 1px 2px rgba(27,26,23,.06),0 1px 1px rgba(27,26,23,.04);
  --shadow-2:0 4px 16px rgba(27,26,23,.10),0 1px 3px rgba(27,26,23,.06);
  --shadow-3:0 16px 40px rgba(27,26,23,.16),0 2px 6px rgba(27,26,23,.08);
  --r-1:6px; --r-2:10px; --r-3:14px; --r-4:20px; --r-pill:999px;
  --ease:cubic-bezier(.2,.7,.2,1);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:var(--font-ui);font-size:14px;color:var(--ink);background:var(--bg);-webkit-font-smoothing:antialiased;line-height:1.45}
a{color:var(--accent);text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;padding:0}
input,textarea,select{font:inherit;color:inherit}
h1,h2,h3{margin:0;font-weight:600}
.serif{font-family:var(--font-display)}
.mono{font-family:var(--font-mono)}
.muted{color:var(--ink-3)}
.ms{font-family:'Material Symbols Rounded';font-weight:normal;font-style:normal;font-size:22px;line-height:1;display:inline-block;white-space:nowrap;direction:ltr;-webkit-font-smoothing:antialiased;font-variation-settings:'FILL' 0,'wght' 400,'GRAD' 0,'opsz' 24;user-select:none;vertical-align:middle;flex:none}
.ms.f{font-variation-settings:'FILL' 1,'wght' 400,'GRAD' 0,'opsz' 24}
.ms.s16{font-size:16px}.ms.s18{font-size:18px}.ms.s20{font-size:20px}
[hidden]{display:none!important}
/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:36px;padding:0 14px;border-radius:var(--r-2);font-weight:500;font-size:13.5px;white-space:nowrap;transition:background .15s var(--ease),box-shadow .15s,transform .05s;border:1px solid transparent}
.btn:active{transform:translateY(1px)}
.btn .ms{font-size:18px;margin-left:-2px}
.btn-primary{background:var(--accent);color:#fff}
.btn-primary:hover{background:var(--accent-ink)}
.btn-secondary{background:var(--panel);border-color:var(--line-2);color:var(--ink)}
.btn-secondary:hover{background:var(--panel-2);border-color:var(--ink-3)}
.btn-ghost{color:var(--ink-2)}
.btn-ghost:hover{background:rgba(27,26,23,.06)}
.btn-danger{background:var(--bad);color:#fff}
.btn-sm{height:30px;padding:0 10px;font-size:12.5px;border-radius:8px}
.btn:disabled{opacity:.45;cursor:default;transform:none}
.ib{width:34px;height:34px;border-radius:8px;display:inline-flex;align-items:center;justify-content:center;color:var(--ink-2);flex:none}
.ib:hover{background:rgba(27,26,23,.07)}
.ib.on{background:var(--accent-2);color:var(--accent-ink)}
.ib .ms{font-size:20px}
/* fields */
.field{display:flex;flex-direction:column;gap:6px;margin:10px 0}
.field label{font-size:12.5px;font-weight:500;color:var(--ink-2)}
.field input,.field textarea,.field select{height:38px;padding:0 12px;border:1px solid var(--line-2);border-radius:var(--r-2);background:var(--panel);outline:none;font-size:14px}
.field textarea{height:auto;min-height:90px;padding:10px 12px;resize:vertical}
.field input:focus,.field textarea:focus,.field select:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-2)}
.switch{position:relative;width:40px;height:24px;flex:none;display:inline-block}
.switch input{opacity:0;width:0;height:0}
.switch span{position:absolute;inset:0;background:var(--line-2);border-radius:12px;transition:.2s;cursor:pointer}
.switch span::before{content:'';position:absolute;width:18px;height:18px;left:3px;top:3px;border-radius:50%;background:#fff;transition:.2s;box-shadow:var(--shadow-1)}
.switch input:checked+span{background:var(--accent)}
.switch input:checked+span::before{left:19px}
.seg{display:inline-flex;background:var(--bg-2);border-radius:var(--r-2);padding:3px;gap:2px}
.seg button{height:30px;padding:0 12px;border-radius:7px;font-size:13px;font-weight:500;color:var(--ink-2);display:inline-flex;align-items:center;gap:6px}
.seg button.on{background:var(--panel);color:var(--ink);box-shadow:var(--shadow-1)}
/* chips, pills, avatar */
.pill{display:inline-flex;align-items:center;gap:5px;height:24px;padding:0 9px;border-radius:var(--r-pill);font-size:12px;font-weight:500;background:var(--bg-2);color:var(--ink-2);white-space:nowrap}
.pill.ok{background:var(--ok-2);color:var(--ok)}.pill.warn{background:var(--warn-2);color:var(--warn)}.pill.bad{background:var(--bad-2);color:var(--bad)}.pill.accent{background:var(--accent-2);color:var(--accent-ink)}.pill.violet{background:var(--violet-2);color:var(--violet)}
.avatar{border-radius:50%;display:inline-flex;align-items:center;justify-content:center;color:#fff;font-weight:600;flex:none;overflow:hidden;user-select:none;font-family:var(--font-ui)}
.avatar img{width:100%;height:100%;object-fit:cover}
.dot{width:8px;height:8px;border-radius:50%;display:inline-block;flex:none}
.dot.live{background:var(--ok);box-shadow:0 0 0 0 rgba(27,127,75,.5);animation:pulse 1.6s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(27,127,75,.45)}70%{box-shadow:0 0 0 8px rgba(27,127,75,0)}100%{box-shadow:0 0 0 0 rgba(27,127,75,0)}}
/* cards, menus, dialogs */
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-3);box-shadow:var(--shadow-1)}
.menu{position:fixed;z-index:1000;background:var(--panel);border:1px solid var(--line);border-radius:var(--r-2);box-shadow:var(--shadow-2);padding:6px;min-width:180px;max-width:360px;max-height:calc(100vh - 16px);overflow:auto;font-size:13.5px}
.menu-item{display:flex;align-items:center;gap:10px;height:34px;padding:0 10px;border-radius:7px;cursor:pointer;white-space:nowrap;color:var(--ink);user-select:none}
.menu-item.tall{height:46px}
.menu-item:hover,.menu-item.active{background:var(--bg-2)}
.menu-item.disabled{color:var(--ink-3);cursor:default}.menu-item.disabled:hover{background:none}
.menu-item .ms{font-size:19px;color:var(--ink-2);width:20px}
.menu-item .kbd{margin-left:auto;padding-left:28px;color:var(--ink-3);font-size:12px;font-family:var(--font-mono)}
.menu-item .sub{margin-left:auto;padding-left:20px;color:var(--ink-3);font-size:18px}
.menu-item .desc{display:block;font-size:11.5px;color:var(--ink-3)}
.menu-sep{height:1px;background:var(--line);margin:6px 4px}
.menu-label{padding:8px 10px 4px;font-size:11px;letter-spacing:.6px;color:var(--ink-3);text-transform:uppercase;font-weight:600}
.scrim{position:fixed;inset:0;background:rgba(27,26,23,.38);z-index:900;display:flex;align-items:center;justify-content:center;animation:fade .15s;backdrop-filter:blur(2px)}
.dialog{background:var(--panel);border-radius:var(--r-4);box-shadow:var(--shadow-3);min-width:340px;max-width:min(600px,calc(100vw - 40px));max-height:calc(100vh - 40px);display:flex;flex-direction:column;animation:pop .18s var(--ease)}
.dialog.wide{max-width:min(960px,calc(100vw - 40px));width:960px}
.dialog-head{padding:22px 24px 10px;font-size:19px;font-weight:600;display:flex;align-items:center;gap:10px}
.dialog-body{padding:4px 24px;overflow:auto;color:var(--ink-2);line-height:1.5}
.dialog-actions{display:flex;justify-content:flex-end;gap:8px;padding:18px 24px 22px}
@keyframes fade{from{opacity:0}}
@keyframes pop{from{transform:translateY(8px) scale(.98);opacity:0}}
.snackbar{position:fixed;left:50%;transform:translateX(-50%);bottom:24px;z-index:1100;background:var(--ink);color:#fff;border-radius:var(--r-2);padding:12px 16px;min-width:260px;max-width:560px;box-shadow:var(--shadow-3);display:flex;align-items:center;gap:16px;font-size:13.5px;animation:snack .2s}
.snackbar button{color:#9db4ff;font-weight:600;margin-left:auto}
@keyframes snack{from{transform:translate(-50%,16px);opacity:0}}
.tooltip{position:fixed;z-index:1200;background:var(--ink);color:#fff;font-size:12px;padding:5px 8px;border-radius:6px;pointer-events:none;white-space:nowrap;animation:fade .1s;line-height:1.3}
.spinner{width:24px;height:24px;border:3px solid var(--accent-2);border-top-color:var(--accent);border-radius:50%;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.progress-line{height:3px;background:var(--accent-2);overflow:hidden;position:relative}
.progress-line::after{content:'';position:absolute;height:100%;width:40%;background:var(--accent);animation:pline 1.2s infinite ease-in-out}
@keyframes pline{from{left:-40%}to{left:100%}}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:var(--line-2);border:3px solid transparent;background-clip:padding-box;border-radius:8px}
::-webkit-scrollbar-track{background:transparent}
.empty{display:flex;flex-direction:column;align-items:center;gap:10px;padding:48px 16px;color:var(--ink-3);text-align:center}
.empty .ms{font-size:40px;color:var(--line-2)}
/* Added 2026-10-17 (additive): focus rings, text buttons, loading skeletons */
.btn:focus-visible,.ib:focus-visible,.chip:focus-visible,.seg button:focus-visible,.menu-item:focus-visible,.pill[tabindex]:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.btn-text{color:var(--accent-ink);font-weight:500}.btn-text:hover{background:var(--accent-2)}
.btn.busy{pointer-events:none;opacity:.7}
.skeleton{background:var(--bg-2);border-radius:6px;color:transparent!important;animation:skpulse 1.4s ease-in-out infinite;user-select:none}
@keyframes skpulse{50%{opacity:.55}}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.menu-item:focus{outline:none}.menu-item:focus-visible{background:var(--bg-2,#eef0f3)}
.dialog:focus{outline:none}
.who-line{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:4px 10px;font-size:12.5px;color:var(--ink-2);margin-top:14px}
.who-line b{font-weight:600;color:var(--ink)}