/* ═══════════════════════════════════════════════════════════════════════════
   StoryFlow

   A tool, not a statement. Light by default, one type family, one accent,
   generous spacing, soft edges. No serif, no glow, no ornament — the interface
   should get out of the way and leave the numbers.
   ═══════════════════════════════════════════════════════════════════════════ */

:root{
  --bg:#F7F8FA;
  --bg-2:#FFFFFF;
  --surface:#FFFFFF;
  --surface-2:#F1F3F6;
  --line:#E3E6EB;
  --line-soft:#EEF0F4;
  --ink:#111827;
  --ink-2:#475467;
  --muted:#8A93A3;

  --accent:#2E6BE6;
  --accent-ink:#FFFFFF;
  --accent-dim:#EAF1FE;
  --accent-line:#C5D8FB;

  --good:#12A150;  --good-dim:#E7F7EE;
  --warn:#B7791F;  --warn-dim:#FDF5E6;
  --bad:#D64545;   --bad-dim:#FDECEC;

  --r:12px;
  --r-sm:8px;
  --shadow:0 1px 2px rgba(16,24,40,.05);
  --shadow-lg:0 4px 6px -2px rgba(16,24,40,.03), 0 12px 16px -4px rgba(16,24,40,.08);
  color-scheme:light;
}

@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#0F1115; --bg-2:#151821; --surface:#151821; --surface-2:#1C202B;
    --line:#262B37; --line-soft:#1E222C;
    --ink:#F0F2F6; --ink-2:#B4BCCA; --muted:#7C8698;
    --accent:#5B8DEF; --accent-ink:#0A1121; --accent-dim:#16233C; --accent-line:#2B4272;
    --good:#3DCB7F; --good-dim:#14291F;
    --warn:#E0A63C; --warn-dim:#2A2214;
    --bad:#F0736B;  --bad-dim:#2C1A1A;
    --shadow:0 1px 2px rgba(0,0,0,.3);
    --shadow-lg:0 10px 30px rgba(0,0,0,.35);
    color-scheme:dark;
  }
}
/* ── touch ────────────────────────────────────────────────────────────────
   Feedback for a tap is part of the design, not something to leave to the
   browser. Android's default is a cyan-blue wash over whatever was touched,
   which belongs to no palette here; text selection is browser-blue for the
   same reason. Both are replaced, and pressing something now moves it.       */
html{ -webkit-tap-highlight-color:transparent; }

::selection{ background:var(--accent-dim); color:var(--ink); }
::-moz-selection{ background:var(--accent-dim); color:var(--ink); }

.btn:active,
.copy-btn:active,
.mini:active,
button:active{ transform:translateY(1px); }

.btn:active{ filter:brightness(.96); }
a:not(.btn):active{ opacity:.7; }

/* Whole-card targets darken instead of moving — shifting a big block under a
   finger reads as the layout breaking rather than as a press. */
.unit:active,
.batch:active{ background:var(--surface-2); }

/* A switch is dragged as much as tapped, so it must not slide under the
   finger, and its label is not a button. */
.switch:active,
.switch input:active{ transform:none; }

:root[data-theme="dark"]{
  --bg:#0F1115; --bg-2:#151821; --surface:#151821; --surface-2:#1C202B;
  --line:#262B37; --line-soft:#1E222C;
  --ink:#F0F2F6; --ink-2:#B4BCCA; --muted:#7C8698;
  --accent:#5B8DEF; --accent-ink:#0A1121; --accent-dim:#16233C; --accent-line:#2B4272;
  --good:#3DCB7F; --good-dim:#14291F;
  --warn:#E0A63C; --warn-dim:#2A2214;
  --bad:#F0736B;  --bad-dim:#2C1A1A;
  --shadow:0 1px 2px rgba(0,0,0,.3);
  --shadow-lg:0 10px 30px rgba(0,0,0,.35);
  color-scheme:dark;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:"Manrope","Segoe UI",system-ui,-apple-system,sans-serif;
  font-size:15px;line-height:1.6;-webkit-font-smoothing:antialiased;
}

/* ───────────────────────────────────────────────────────────── type ─── */
h1,h2,h3,h4{margin:0;letter-spacing:-.02em;line-height:1.2;font-weight:700;text-wrap:balance}
h1{font-size:clamp(1.9rem,4vw,2.85rem);letter-spacing:-.035em}
h2{font-size:clamp(1.35rem,2.6vw,1.85rem);letter-spacing:-.028em}
h3{font-size:1.02rem;letter-spacing:-.012em}
p{margin:0 0 .85rem;max-width:66ch;color:var(--ink-2)}
a{color:var(--accent);text-decoration:none;text-underline-offset:3px}
a:hover{text-decoration:underline}
strong{color:var(--ink);font-weight:650}
code,.mono{font-family:"DM Mono",ui-monospace,"SFMono-Regular",monospace;font-size:.87em}
code{background:var(--surface-2);padding:.12em .4em;border-radius:5px;color:var(--ink-2)}
.muted{color:var(--muted)}
.small{font-size:.87rem}
.num{font-variant-numeric:tabular-nums}

.eyebrow{font-size:.76rem;font-weight:700;color:var(--accent);margin:0 0 .55rem}
.lede{font-size:1.05rem;color:var(--ink-2);max-width:56ch;line-height:1.62}

/* ────────────────────────────────────────────────────────── controls ─── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.4rem;
  padding:.55rem 1rem;border:1px solid var(--line);border-radius:var(--r-sm);
  background:var(--surface);color:var(--ink);
  font:inherit;font-size:.9rem;font-weight:600;line-height:1.2;
  cursor:pointer;white-space:nowrap;box-shadow:var(--shadow);
  transition:background .13s,border-color .13s,box-shadow .13s;
}
.btn:hover{background:var(--surface-2);text-decoration:none}
.btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.btn[disabled]{opacity:.5;cursor:not-allowed}
.btn-primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.btn-primary:hover{background:var(--accent);filter:brightness(1.06)}
.btn-danger{color:var(--bad);border-color:var(--line)}
.btn-danger:hover{background:var(--bad-dim);border-color:var(--bad)}
.btn-sm{padding:.35rem .7rem;font-size:.83rem}
.btn-lg{padding:.7rem 1.3rem;font-size:.95rem}
.btn-ghost{background:none;border-color:transparent;box-shadow:none;font-weight:500}
.btn-ghost:hover{background:var(--surface-2)}

label{display:block;font-size:.85rem;font-weight:600;color:var(--ink);margin:0 0 .35rem}
input,select,textarea{
  width:100%;padding:.6rem .75rem;
  border:1px solid var(--line);border-radius:var(--r-sm);
  background:var(--bg-2);color:var(--ink);font:inherit;font-size:.92rem;
  transition:border-color .13s,box-shadow .13s;
}
input:focus,select:focus,textarea:focus{
  outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-dim);
}
input::placeholder,textarea::placeholder{color:var(--muted)}
.field{margin-bottom:1rem}
.field-hint{font-size:.82rem;color:var(--muted);margin-top:.3rem}
.row{display:flex;gap:.8rem;flex-wrap:wrap}
.row>*{flex:1 1 160px}
.switch{display:flex;align-items:center;gap:.5rem;cursor:pointer;font-size:.88rem;color:var(--ink-2);font-weight:500}
.switch input{width:auto;margin:0;accent-color:var(--accent)}

.field.is-dirty > label::after{content:" • edited";color:var(--warn);font-weight:600}
.field.is-dirty input,.field.is-dirty textarea{border-color:var(--warn)}

/* ───────────────────────────────────────────────────────────── pills ─── */
.pill{
  display:inline-flex;align-items:center;gap:.35rem;
  font-size:.74rem;font-weight:650;padding:.22rem .55rem;border-radius:100px;
  border:1px solid transparent;white-space:nowrap;
}
.p-good{color:var(--good);background:var(--good-dim)}
.p-warn{color:var(--warn);background:var(--warn-dim)}
.p-bad{color:var(--bad);background:var(--bad-dim)}
.p-accent{color:var(--accent);background:var(--accent-dim)}
.p-mute{color:var(--muted);background:var(--surface-2)}

.dot{width:7px;height:7px;border-radius:50%;background:var(--good);display:inline-block;flex:none}
.dot-pulse{animation:pulse 1.9s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}

/* ───────────────────────────────────────────────────────────── cards ─── */
.card{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  padding:1.2rem 1.3rem;box-shadow:var(--shadow);
}
.cards{display:grid;gap:1rem;grid-template-columns:repeat(auto-fill,minmax(330px,1fr))}

.stats{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));margin-bottom:1.6rem}
.stat{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:.95rem 1.05rem;box-shadow:var(--shadow)}
.stat-n{display:block;font-size:1.55rem;font-weight:750;line-height:1.1;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.stat-l{display:block;font-size:.8rem;color:var(--muted);margin-top:.2rem}

/* ──────────────────────────────────────────────────────────── tables ─── */
.tw{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r);background:var(--surface);box-shadow:var(--shadow)}
table{border-collapse:collapse;width:100%;min-width:560px;font-size:.89rem}
th{
  text-align:left;font-size:.78rem;font-weight:650;color:var(--muted);
  padding:.7rem .9rem;border-bottom:1px solid var(--line);white-space:nowrap;
  background:var(--surface-2);
}
td{padding:.65rem .9rem;border-bottom:1px solid var(--line-soft);color:var(--ink-2)}
tr:last-child td{border-bottom:0}
td.mono{font-family:"DM Mono",monospace;font-size:.82rem}

/* ───────────────────────────────────────────────────────────── notes ─── */
.note{
  border:1px solid var(--line);background:var(--surface);
  padding:.8rem 1rem;border-radius:var(--r-sm);
  font-size:.89rem;color:var(--ink-2);margin-bottom:1rem;
}
.note-bad{background:var(--bad-dim);border-color:var(--bad);color:var(--bad)}
.note-good{background:var(--good-dim);border-color:var(--good);color:var(--good)}
.empty{text-align:center;padding:3rem 1.5rem;color:var(--muted);border:1px dashed var(--line);border-radius:var(--r);background:var(--surface)}
.skel{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:1.2rem 1.3rem}
.skel-line{height:10px;border-radius:100px;background:var(--surface-2);margin-bottom:.7rem;animation:breathe 1.5s ease-in-out infinite}
.skel-line:nth-child(2){width:64%}
.skel-line:nth-child(3){width:38%}
@keyframes breathe{0%,100%{opacity:1}50%{opacity:.45}}
.copy-btn{border:0;background:none;color:var(--accent);cursor:pointer;font:inherit;font-size:.82rem;padding:0 0 0 .4rem;font-weight:600}
.copy-btn:hover{text-decoration:underline}

/* ───────────────────────────────────────────────────────────── modal ─── */
.modal-bg{position:fixed;inset:0;background:rgba(16,24,40,.45);backdrop-filter:blur(2px);display:grid;place-items:center;padding:1rem;z-index:60}
.modal{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);max-width:540px;width:100%;max-height:90vh;overflow-y:auto;box-shadow:var(--shadow-lg)}
.modal-head{display:flex;align-items:center;justify-content:space-between;padding:1.1rem 1.3rem;border-bottom:1px solid var(--line)}
.modal-head h2{font-size:1.1rem}
.modal-body{padding:1.3rem}
.modal-foot{display:flex;gap:.6rem;justify-content:flex-end;padding:0 1.3rem 1.3rem}

.toast{
  position:fixed;bottom:1.3rem;right:1.3rem;z-index:90;
  background:var(--ink);color:var(--bg);
  padding:.7rem 1rem;border-radius:var(--r-sm);font-size:.88rem;font-weight:500;
  box-shadow:var(--shadow-lg);max-width:min(90vw,380px);
  animation:rise .16s ease-out;
}
@keyframes rise{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}

/* ───────────────────────────────────────────────────────────── brand ─── */
.brand{
  display:inline-flex;align-items:center;gap:.55rem;
  font-weight:750;font-size:1.02rem;letter-spacing:-.025em;
  text-decoration:none;color:var(--ink);
}
.brand:hover{text-decoration:none}
.brand-mark{width:26px;height:26px;border-radius:6px;display:block;flex:none}

/* ═══════════════════════════════════════════════════════════ mobile ═══ */
html,body{max-width:100%;overflow-x:hidden}

@media (max-width:640px){
  input,select,textarea{font-size:16px;padding:.7rem .8rem}
  .btn{min-height:44px;padding:.6rem 1rem}
  .btn-sm{min-height:38px;padding:.45rem .75rem}
  .btn-lg{width:100%}
  .switch{min-height:38px}
  .switch input[type=checkbox]{width:20px;height:20px}
  .brand{min-height:44px}
  .copy-btn{min-height:32px;padding:.25rem .4rem}

  .tw{max-width:100%}
  table{min-width:520px}

  .modal-bg{padding:0;align-items:flex-end}
  .modal{max-width:100%;max-height:92vh;border-radius:16px 16px 0 0;border-bottom:0}
  .modal-head{position:sticky;top:0;background:var(--surface);z-index:2}
  .modal-foot{position:sticky;bottom:0;background:var(--surface);padding-top:.9rem;border-top:1px solid var(--line)}
  .modal-foot .btn{flex:1}

  .toast{left:.8rem;right:.8rem;bottom:.8rem;max-width:none}
  .row{flex-direction:column}
  .row>*{flex:1 1 auto}

  .card{padding:1.05rem 1.1rem}
  .stats{grid-template-columns:1fr 1fr;gap:.7rem}
  .stat{padding:.8rem .85rem}
  .stat-n{font-size:1.35rem}
}

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