/* Tokens from DESIGN.md. One paper surface everywhere; pen blue is the only accent. */
:root {
  --paper: #e3e3e1;    --ink: #18181b;      --ink-2: #474645;    --ink-3: #a1a1aa;
  --pen: #2724d1;      --error: #d12724;    --success: #188a42;
  --line: rgba(24, 24, 27, .14);
  --warn: #c98a1b;
  --radius: 14px;      --radius-sm: 8px;
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 48px;
  --ease: cubic-bezier(0.2, 0, 0, 1);
  --font-body: "Inter", -apple-system, Helvetica, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, Menlo, monospace;
  --font-wordmark: "Drawably Pen", var(--font-body);
  color-scheme: light;
  --drawably-stroke: var(--pen);
  --drawably-fill: var(--pen);
  --drawably-paper: var(--paper);
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; padding: 0; }
body { font: 15px/1.5 var(--font-body); background: var(--paper); color: var(--ink); min-height: 100vh; min-height: 100dvh; }
h1, h2, h3 { font-family: var(--font-body); font-weight: 600; line-height: 1.15; margin: 0 0 var(--sp-2); }
h1 { font-size: 28px; } h2 { font-size: 17px; } h3 { font-size: 15px; }
p { margin: 0 0 var(--sp-3); }
a { color: inherit; }
.tabular { font-variant-numeric: tabular-nums; font-family: var(--font-mono); }
.wordmark { font-family: var(--font-wordmark); font-size: 40px; font-weight: 400; margin-bottom: var(--sp-2); }
.wordmark .drawably-host { font-family: inherit; }

/* skip link */
.skip-link { position: absolute; left: -9999px; top: 0; background: var(--pen); color: #fff; padding: var(--sp-2) var(--sp-3); z-index: 100; border-radius: 0 0 var(--radius-sm) 0; }
.skip-link:focus { left: 0; }

/* focus ring */
:focus-visible { outline: 2px solid var(--pen); outline-offset: 2px; border-radius: var(--radius-sm); }
button, input, textarea, a { font: inherit; }

/* layout */
/* iOS reports 100vh as the URL-bar-hidden height, so the page overflows until the bar scrolls away. */
.app-shell { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
/* black-translucent puts the page under the iPhone status bar, so the first heading needs the inset. */
main { flex: 1; padding: var(--sp-4); padding-top: calc(var(--sp-4) + env(safe-area-inset-top)); padding-bottom: calc(80px + env(safe-area-inset-bottom)); max-width: 680px; margin: 0 auto; width: 100%; }
main:focus-visible, h1[tabindex="-1"]:focus-visible { outline: none; }
.measure { max-width: 68ch; }
main.no-nav { padding-bottom: var(--sp-4); }

/* bottom bar / rail nav */
nav.tabbar { position: fixed; left: 0; right: 0; bottom: 0; display: flex; background: var(--paper); border-top: 1px solid var(--line); padding: var(--sp-2) var(--sp-2) calc(var(--sp-2) + env(safe-area-inset-bottom)); z-index: 20; }
nav.tabbar a { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: var(--sp-2); min-height: 44px; text-decoration: none; color: var(--ink-3); font-size: 12px; border-radius: var(--radius-sm); }
nav.tabbar a.active { color: var(--pen); font-weight: 500; }
nav.tabbar { display: none; }
body.has-nav nav.tabbar { display: flex; }

/* motion */
.reveal { animation: reveal .16s ease-out both; }
@keyframes reveal { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
@keyframes pulse { 50% { opacity: .3; } }
@keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .reveal { animation: none !important; } }

/* responsive: centred column + left rail from 720px */
@media (min-width: 720px) {
  main { padding: var(--sp-6) var(--sp-4); }
  main.record-main { max-width: none; }
  body.has-nav nav.tabbar { top: 0; bottom: 0; right: auto; width: 200px; flex-direction: column; justify-content: flex-start; padding-top: var(--sp-6); border-top: 0; border-right: 1px solid var(--line); }
  body.has-nav nav.tabbar a { flex: none; flex-direction: row; justify-content: flex-start; gap: var(--sp-2); width: 100%; padding: var(--sp-3) var(--sp-4); }
  body.has-nav main { margin-left: 200px; margin-right: 0; max-width: 680px; }
}