/* ════════════════════════════════════════════════════════════════════════════
   kit.css — the soft 3a tokens, shared by journal, brain dump and pixels.

   The same look as the public brain dump (SamieVargas/brain-dump, the soft 3a
   handoff): a pale green page, white cards on a 1px hairline, big radii, no
   shadows, Young Serif for headings, Onest for reading and controls and Geist
   Mono for meta. It replaced the old kit (honey paper, Newsreader, the spine)
   and every per-app palette (Field Notebook, honey, lavender, indigo) in the
   stripped handoff of 24 September 2026, so an app should not declare colours
   of its own beyond what is here.

   The palette is light only, so every page pins <html data-theme="light">.
   Mood colours never live here, they come from Twiglet.moodSwatch().
   ════════════════════════════════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Young+Serif&family=Onest:wght@400;500;600&family=Geist+Mono:wght@400;500&display=swap');

:root{
  /* ground */
  --page:#f4f8f4;
  --surface:oklch(0.975 0.006 145);   /* the app surface and inner wells */
  --card:#ffffff;
  --line:oklch(0.92 0.012 145);       /* card hairline */
  --ctrl:oklch(0.9 0.012 145);        /* control border */
  --track:#eeece6;

  /* ink */
  --ink:#161513; --body:#3a3833; --muted:#55534c; --meta:#77746b; --faint:#99968c;

  /* the one accent */
  --green:#1a6b5a; --mint:#8fd6bf; --green-tint:#e6f1ec;

  /* red is only for a write that failed */
  --alert:oklch(0.6 0.16 28); --alert-tint:oklch(0.95 0.03 28);

  /* category hues share L and C, H varies */
  --cat-amber:oklch(0.55 0.1 60);  --cat-amber-tint:oklch(0.965 0.025 60);
  --cat-green:oklch(0.55 0.1 145); --cat-green-tint:oklch(0.965 0.025 145);
  --cat-teal:oklch(0.55 0.1 200);  --cat-teal-tint:oklch(0.965 0.025 200);
  --cat-blue:oklch(0.55 0.1 250);  --cat-blue-tint:oklch(0.965 0.025 250);
  --cat-rose:oklch(0.55 0.1 330);  --cat-rose-tint:oklch(0.965 0.025 330);

  /* type */
  --font-serif:'Young Serif',Georgia,serif;
  --font-sans:'Onest',Helvetica,Arial,sans-serif;
  --font-mono:'Geist Mono',ui-monospace,SFMono-Regular,monospace;
  --type-title:400 30px/1.12 var(--font-serif);
  --type-q:400 28px/1.18 var(--font-serif);
  --type-section:400 19px/1.2 var(--font-serif);
  --type-brand:400 17px/1 var(--font-serif);
  --type-card:400 14.5px/1.55 var(--font-sans);
  --type-small:400 13.5px/1.5 var(--font-sans);
  --type-pill:500 14px/1 var(--font-sans);
  --type-meta:400 11.5px/1.45 var(--font-mono);

  /* radii */
  --r-card:24px; --r-card-lg:28px; --r-box:14px; --r-pill:999px;

  /* motion */
  --ease:cubic-bezier(.2,.7,.2,1);
  --ease-drop:cubic-bezier(.3,1.4,.5,1);
  --rise:16px;

  /* the tab bar reserves this much; twiglet-tabs.js sets it */
  --tw-tabs-top:0px; --tw-tabs-bottom:0px;
  color-scheme:light;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;min-height:100vh;background:var(--page);color:var(--ink);
  font:var(--type-card);-webkit-font-smoothing:antialiased;text-wrap:pretty;
  padding-top:var(--tw-tabs-top);padding-bottom:var(--tw-tabs-bottom);
}
*{text-wrap:pretty}
a{color:var(--green);text-underline-offset:3px}
a:hover{color:var(--ink)}
button{font:inherit;color:inherit}
textarea,input{font:inherit;color:var(--ink)}
:focus-visible{outline:2px solid var(--green);outline-offset:2px}

/* ── layout ──────────────────────────────────────────────────────────────── */
.tw-page{max-width:1040px;margin:0 auto;padding:22px 22px 40px;display:flex;flex-direction:column;gap:22px}
.tw-two{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));gap:22px;align-items:start}
.tw-head{display:flex;justify-content:space-between;align-items:center;gap:12px}
.tw-brand{font:var(--type-brand);color:var(--green)}
.tw-title{font:var(--type-title);margin:0}
.tw-meta{font:var(--type-meta);color:var(--meta)}
.tw-faint{font:var(--type-meta);color:var(--faint)}
.tw-small{font:var(--type-small);color:var(--body)}

/* ── surfaces ────────────────────────────────────────────────────────────── */
.tw-card{background:var(--card);border:1px solid var(--line);border-radius:var(--r-card);padding:20px 22px}
.tw-card.lg{border-radius:var(--r-card-lg);padding:26px 22px 24px}
.tw-well{background:var(--surface);border-radius:18px}

/* a collapsible section card: tinted, a serif name, a count and a +/− disc */
.tw-sec{border-radius:var(--r-card);padding:16px 18px;border:1px solid transparent}
.tw-sec.white{background:var(--card);border-color:var(--line)}
.tw-sec-head{width:100%;display:flex;align-items:center;gap:10px;background:none;border:0;padding:0;cursor:pointer;color:var(--ink);text-align:left}
.tw-sec-name{font:var(--type-section)}
.tw-sign{margin-left:auto;width:28px;height:28px;flex:none;border-radius:999px;background:rgba(255,255,255,.8);display:flex;align-items:center;justify-content:center;font:500 12.5px/1 var(--font-mono);color:var(--green)}
.tw-sec-body{display:flex;flex-direction:column;gap:6px;padding-top:12px}
.tw-row{display:flex;align-items:center;gap:10px;width:100%;text-align:left;border:0;cursor:pointer;border-radius:12px;padding:11px 12px;background:rgba(255,255,255,.72);font:var(--type-small);color:var(--ink);outline:1px solid transparent;transition:background .3s,outline-color .3s}
.tw-sec.white .tw-row{background:var(--surface)}
.tw-row.busy{background:#fff;outline-color:var(--green)}

/* ── controls ────────────────────────────────────────────────────────────── */
.tw-pill{font:var(--type-pill);padding:10px 16px;border-radius:var(--r-pill);cursor:pointer;white-space:nowrap;border:1px solid var(--ctrl);background:#fff;color:var(--body);display:inline-flex;align-items:center;gap:8px;transition:background .2s,border-color .2s,color .2s}
.tw-pill[aria-pressed="true"],.tw-pill.on{border-color:var(--green);background:var(--green-tint);color:var(--green)}
.tw-pill.soft{font:400 13px/1 var(--font-sans);padding:9px 14px;border-color:transparent;background:var(--green-tint);color:var(--green)}
.tw-pill.soft[aria-pressed="true"],.tw-pill.soft.on{border-color:var(--green)}
.tw-pill.sm{font:400 13px/1 var(--font-sans);padding:8px 12px}
.tw-dot{width:10px;height:10px;border-radius:999px;flex:none;display:inline-block}
.tw-btn{height:54px;border:0;border-radius:var(--r-pill);background:var(--green);color:#fff;font:500 16px/1 var(--font-sans);cursor:pointer;padding:0 24px}
.tw-btn:disabled{opacity:.55;cursor:default}
.tw-btn.sm{height:50px;font-size:15px}
.tw-ghost{font:400 14px/1 var(--font-sans);background:#fff;border:1px solid var(--line);border-radius:var(--r-pill);padding:9px 14px;color:var(--green);cursor:pointer;white-space:nowrap}
.tw-link{font:400 14px/1 var(--font-sans);background:none;border:0;padding:0;color:var(--green);cursor:pointer}
.tw-link.meta{font:var(--type-meta)}
.tw-bar{height:6px;background:var(--track);border-radius:999px;overflow:hidden}
.tw-bar>i{display:block;height:100%;background:var(--green);border-radius:999px;width:0}

/* a note that a write landed, rising in after the real response */
.tw-toast{background:var(--green-tint);border-radius:18px;padding:12px 16px;display:flex;align-items:center;gap:10px;flex-wrap:wrap;font:var(--type-small);color:var(--green)}
.tw-toast.fail{background:var(--alert-tint);color:var(--alert)}
.tw-toast a{margin-left:auto;font:500 13px/1 var(--font-sans);white-space:nowrap}

/* the ▍ cursor and the pulse are the only loops */
.tw-cursor{color:var(--green);animation:tw-blink 1s steps(1) infinite}
@keyframes tw-blink{50%{opacity:0}}
@keyframes tw-rise{from{opacity:0;transform:translateY(var(--rise))}to{opacity:1;transform:none}}
@keyframes tw-drop{from{opacity:0;transform:translateY(-14px) scale(.96)}to{opacity:1;transform:none}}
@keyframes tw-pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.22)}}
@keyframes tw-breathe{0%,100%{opacity:.45}50%{opacity:1}}
.tw-rise{animation:tw-rise .6s var(--ease) both}
.tw-drop{animation:tw-drop .5s var(--ease-drop) both}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  .tw-cursor{animation:none}
}