/* Tripdo design system.
   Concept: a traveller's planner — warm paper ground, deep ink, a saffron
   route line as the one accent. Times are set in mono like a departures board. */
:root{
  --bg:#F4F2EE; --surface:#FFFFFF; --raised:#FFFFFF; --sunk:#EAE7E1; --line:#DDD8CF; --line-soft:#ECE8E1;
  --fg:#171B26; --muted:#5E6472; --faint:#8D929D;
  --ink:#141A2B; --ink-fg:#F4F2EE;
  --accent:#D9661F; --accent-ink:#FFFFFF; --accent-soft:#F8E6D7; --trip:#F7EADC;
  --ok:#1F7A4D; --danger:#B4233C; --warn:#9A6A00;
  /* trip colours */
  --c-saffron:#D9661F; --c-ocean:#2563A8; --c-jade:#1C7C6B; --c-plum:#7A3E8F; --c-coral:#C8423F; --c-slate:#4A5568;
  /* entry types */
  --t-note:#B0336A; --t-meeting:#2F62B5; --t-work:#1E7A73; --t-family:#D9661F; --t-activity:#3D8B37; --t-travel:#5B53B8; --t-stay:#8A5A2B; --t-food:#C8423F; --t-prep:#9A7410; --t-personal:#6A7083;
  --shadow-sm:0 1px 2px rgba(20,26,43,.06);
  --shadow:0 1px 2px rgba(20,26,43,.05),0 12px 32px -8px rgba(20,26,43,.16);
  --radius:14px;
  --display:"Bricolage Grotesque","Segoe UI",system-ui,sans-serif;
  --body:"IBM Plex Sans","Segoe UI",system-ui,-apple-system,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){:root{
  --bg:#0E1118; --surface:#161A23; --raised:#1C212C; --sunk:#222835; --line:#2C3341; --line-soft:#232A36;
  --fg:#ECEEF2; --muted:#A3AAB8; --faint:#757D8C;
  --ink:#0A0D14; --ink-fg:#ECEEF2;
  --accent:#F2944E; --accent-ink:#1B1006; --accent-soft:#3A2617; --trip:#2A1F16;
  --ok:#5DD39B; --danger:#F27C8F; --warn:#E8C06A;
  --c-saffron:#F2944E; --c-ocean:#6FA4E8; --c-jade:#4CC2A9; --c-plum:#C38BD6; --c-coral:#F08A86; --c-slate:#A0AEC0;
  --t-note:#F08BB6; --t-meeting:#7FA6EE; --t-work:#4FBCB1; --t-family:#F2944E; --t-activity:#7FCF76; --t-travel:#A49CF0; --t-stay:#D7A574; --t-food:#F08A86; --t-prep:#E0C268; --t-personal:#A3AAB8;
  --shadow-sm:0 1px 2px rgba(0,0,0,.3); --shadow:0 1px 2px rgba(0,0,0,.3),0 16px 40px -10px rgba(0,0,0,.55);
  color-scheme:dark}}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}
body{margin:0;background:var(--bg);color:var(--fg);font:15px/1.55 var(--body);-webkit-font-smoothing:antialiased;
  padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
[hidden]{display:none!important}
img,svg{max-width:100%}
h1,h2,h3,h4{font-family:var(--display);margin:0;letter-spacing:-.02em;text-wrap:balance;line-height:1.15}
p{margin:0}
a{color:inherit}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:6px}
.gutter{padding-left:max(20px,env(safe-area-inset-left,0px));padding-right:max(20px,env(safe-area-inset-right,0px))}
.eyebrow{font:500 11px/1.3 var(--mono);text-transform:uppercase;letter-spacing:.12em;color:var(--muted)}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
.muted{color:var(--muted)}

/* brand */
.brand{display:inline-flex;align-items:center;gap:10px;text-decoration:none;color:inherit}
.brand .mark{width:32px;height:32px;flex:none}
.brand b{font:700 18px/1 var(--display);letter-spacing:-.02em;white-space:nowrap}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:42px;padding:0 16px;border-radius:11px;border:1px solid var(--line);background:var(--surface);color:var(--fg);font-weight:500;font-size:15px;text-decoration:none;white-space:nowrap;transition:background .15s,border-color .15s,transform .05s}
.btn:hover{background:var(--sunk)}
.btn:active{transform:translateY(1px)}
.btn.primary{background:var(--ink);border-color:var(--ink);color:var(--ink-fg)}
@media (prefers-color-scheme:dark){.btn.primary{background:var(--fg);border-color:var(--fg);color:var(--bg)}}
.btn.primary:hover{opacity:.92}
.btn.accent{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.btn.accent:hover{filter:brightness(1.05)}
.btn.ghost{background:none;border-color:transparent}
.btn.ghost:hover{background:var(--sunk)}
.btn.danger{color:var(--danger)}
.btn.sm{min-height:34px;padding:0 12px;font-size:14px;border-radius:9px}
.btn.lg{min-height:52px;padding:0 22px;font-size:16px;border-radius:13px}
.btn.icon{width:40px;padding:0}
.btn[disabled]{opacity:.55;cursor:not-allowed}
.btn svg{width:18px;height:18px;flex:none}

/* fields */
.field{display:flex;flex-direction:column;gap:6px;min-width:0}
.field > span{font:500 13px/1.2 var(--body);color:var(--muted)}
.field small{font-size:12.5px;color:var(--muted)}
input[type=text],input[type=email],input[type=password],input[type=date],input[type=time],input[type=search],select,textarea{
  width:100%;min-width:0;min-height:44px;background:var(--surface);border:1px solid var(--line);border-radius:11px;padding:10px 12px;font-size:16px;transition:border-color .15s,box-shadow .15s}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 20%,transparent)}
input::placeholder,textarea::placeholder{color:var(--faint)}
textarea{resize:vertical;min-height:84px}
.check{display:flex;align-items:center;gap:10px;font-size:14.5px;cursor:pointer}
.check input{width:20px;height:20px;accent-color:var(--accent);flex:none}
.err{color:var(--danger);font-size:14px;min-height:1.2em}

.seg{display:inline-flex;background:var(--sunk);border-radius:11px;padding:3px;gap:2px}
.seg button{border:0;background:none;border-radius:8px;padding:6px 12px;font-size:14px;color:var(--muted);min-height:34px}
.seg button[aria-pressed=true]{background:var(--surface);color:var(--fg);font-weight:600;box-shadow:var(--shadow-sm)}

.card{background:var(--surface);border:1px solid var(--line-soft);border-radius:var(--radius)}
.kbd{font:500 12px var(--mono);background:var(--sunk);border-radius:5px;padding:2px 6px}
code.key{display:block;font:600 17px/1.5 var(--mono);letter-spacing:.06em;background:var(--sunk);border-radius:11px;padding:12px 14px;word-break:break-all;user-select:all}