/* =========================================================
   Orderly by Kurvo — Design System
   Tokens + components shared by landing, auth and app.
   Tailwind (CDN) handles layout utilities; this file owns
   the component look so every page stays consistent.
   ========================================================= */

/* ---------- Theme tokens ----------
   Themed colors are RGB triplets so Tailwind opacity modifiers work
   (tw.js maps e.g. text-navy → rgb(var(--c-text) / <alpha>)).
   Light is the default; html.dark (set by theme.js before first paint)
   swaps the triplets. `.keep-light` re-scopes the light palette for
   illustrations that should look like paper/phones in both themes. */
:root, .keep-light {
  --c-text: 15 23 42;        /* Midnight Navy — headings & strong text */
  --c-ink2: 51 65 85;
  --c-muted: 100 116 139;    /* Secondary Text */
  --c-faint: 148 163 184;
  --c-line: 226 232 240;     /* Border Gray */
  --c-line2: 238 242 246;
  --c-line-strong: 203 213 225;
  --c-soft: 248 250 252;     /* Soft Background */
  --c-warm: 255 253 252;     /* Warm White */
  --c-cream: 251 247 242;
  --c-surface: 255 255 255;  /* cards, inputs */
  --c-raised: 241 245 249;   /* hover fills, segmented track */
  --c-track: 238 242 246;    /* progress/chart tracks */
  --c-deep: 15 23 42;        /* brand-navy surfaces: toasts, tooltips, banners */
  --c-inv-bg: 15 23 42;      /* inverted controls: selected chips, dark buttons */
  --c-inv-fg: 255 255 255;
  --c-brand-50: 255 246 235;
  --c-brand-100: 255 233 204;
  --c-brand-ink: 180 83 9;   /* orange for small text (AA) */
  --c-success-50: 236 253 243;
  --c-success-ink: 21 128 61;
  --c-warn-50: 255 251 235;
  --c-warn-ink: 180 83 9;
  --c-danger-50: 254 242 242;
  --c-danger: 220 38 38;
  --c-insight: 109 40 217;   /* Insight Purple */
  --c-insight-50: 245 243 255;
  --c-insight-line: 233 227 253;
  --c-shadow: 15 23 42;
  --shadow-a: .05;

  --text: rgb(var(--c-text));
  --ink-2: rgb(var(--c-ink2));
  --muted: rgb(var(--c-muted));
  --faint: rgb(var(--c-faint));
  --line: rgb(var(--c-line));
  --line-2: rgb(var(--c-line2));
  --line-strong: rgb(var(--c-line-strong));
  --soft: rgb(var(--c-soft));
  --warm: rgb(var(--c-warm));
  --cream: rgb(var(--c-cream));
  --surface: rgb(var(--c-surface));
  --raised: rgb(var(--c-raised));
  --track: rgb(var(--c-track));
  --hover: rgb(var(--c-text) / .04);
  --deep: rgb(var(--c-deep));
  --inv-bg: rgb(var(--c-inv-bg));
  --inv-fg: rgb(var(--c-inv-fg));
  --brand-50: rgb(var(--c-brand-50));
  --brand-100: rgb(var(--c-brand-100));
  --brand-ink: rgb(var(--c-brand-ink));
  --success-50: rgb(var(--c-success-50));
  --success-ink: rgb(var(--c-success-ink));
  --warn-50: rgb(var(--c-warn-50));
  --warn-ink: rgb(var(--c-warn-ink));
  --danger-50: rgb(var(--c-danger-50));
  --danger: rgb(var(--c-danger));
  --insight: rgb(var(--c-insight));
  --insight-50: rgb(var(--c-insight-50));
  --insight-line: rgb(var(--c-insight-line));
  --shadow-xs: 0 1px 2px rgb(var(--c-shadow) / var(--shadow-a));
  --shadow-sm: 0 1px 2px rgb(var(--c-shadow) / calc(var(--shadow-a) * .8)), 0 2px 8px rgb(var(--c-shadow) / calc(var(--shadow-a) * .8));
  --shadow: 0 1px 2px rgb(var(--c-shadow) / calc(var(--shadow-a) * .8)), 0 8px 24px -6px rgb(var(--c-shadow) / calc(var(--shadow-a) * 2));
  --shadow-lg: 0 2px 4px rgb(var(--c-shadow) / calc(var(--shadow-a) * .8)), 0 24px 48px -12px rgb(var(--c-shadow) / calc(var(--shadow-a) * 3.6));
  color-scheme: light;
}
:root {
  /* fixed brand colors (identical in both themes) */
  --brand: #FF8A00;          /* Orderly Orange */
  --brand-600: #F07C00;
  --navy: #0F172A;           /* Midnight Navy — text on orange, brand art */
  --navy-800: #1E293B;
  --success: #22C55E;
  --warn: #F59E0B;
  --radius-sm: 10px;
  --radius: 14px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --ease: cubic-bezier(.2, .8, .2, 1);
  --sidebar-w: 264px;
  --bottom-nav-h: 68px;
  --safe-b: env(safe-area-inset-bottom, 0px);
}
html.dark:not(.keep-light), html.dark .keep-dark {
  --c-text: 229 237 247;
  --c-ink2: 203 213 225;
  --c-muted: 148 163 184;
  --c-faint: 100 116 139;
  --c-line: 36 49 73;
  --c-line2: 28 39 60;
  --c-line-strong: 51 67 96;
  --c-soft: 10 16 30;
  --c-warm: 10 16 30;
  --c-cream: 15 23 41;
  --c-surface: 17 26 44;
  --c-raised: 26 37 59;
  --c-track: 30 42 66;
  --c-deep: 30 41 62;
  --c-inv-bg: 229 237 247;
  --c-inv-fg: 15 23 42;
  --c-brand-50: 52 33 14;
  --c-brand-100: 77 46 13;
  --c-brand-ink: 255 178 87;
  --c-success-50: 13 44 29;
  --c-success-ink: 74 222 128;
  --c-warn-50: 51 38 12;
  --c-warn-ink: 251 191 36;
  --c-danger-50: 56 20 24;
  --c-danger: 248 113 113;
  --c-insight: 167 139 250;
  --c-insight-50: 33 26 58;
  --c-insight-line: 55 44 94;
  --c-shadow: 0 0 0;
  --shadow-a: .28;
  color-scheme: dark;
}

* { -webkit-tap-highlight-color: transparent; }
html { scroll-behavior: smooth; }
body {
  font-family: "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: var(--text);
  background: var(--warm);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
.num, .tabular { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }
:focus-visible { outline: 2.5px solid var(--brand); outline-offset: 2px; border-radius: 6px; }
::selection { background: var(--brand-100); color: var(--text); }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* ---------- Brand lockup ---------- */
.logo { display: inline-flex; align-items: center; gap: .55em; color: var(--text); text-decoration: none; line-height: 1; }
.logo-mark { flex: none; display: block; }
.logo-text { display: flex; flex-direction: column; }
.logo-word { font-weight: 800; letter-spacing: -.045em; font-size: 1.5em; line-height: .9; }
.logo-sub { font-size: .62em; font-weight: 500; color: var(--muted); margin-top: .28em; padding-left: .1em; letter-spacing: -.01em; }
.logo-sub b { color: var(--text); font-weight: 700; }
.logo.is-dark { color: #fff; }
.logo.is-dark .logo-sub { color: var(--line-strong); }
.logo.is-dark .logo-sub b { color: #fff; }

/* ---------- Buttons ---------- */
.btn {
  --bh: 44px;
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  height: var(--bh); padding: 0 1.1rem; border-radius: 12px;
  font-weight: 700; font-size: .925rem; letter-spacing: -.01em; white-space: nowrap;
  border: 1px solid transparent; cursor: pointer; user-select: none;
  transition: background .18s var(--ease), border-color .18s var(--ease), color .18s, box-shadow .18s, transform .12s;
  text-decoration: none;
}
.btn:active { transform: translateY(1px) scale(.99); }
.btn svg { width: 18px; height: 18px; flex: none; }
.btn[disabled], .btn.is-disabled { opacity: .5; pointer-events: none; }
.btn-primary { background: var(--brand); color: var(--navy); box-shadow: 0 1px 0 rgba(255,255,255,.35) inset, 0 6px 16px -6px rgba(255, 138, 0, .55); }
.btn-primary:hover { background: var(--brand-600); }
.btn-dark { background: var(--inv-bg); color: var(--inv-fg); }
.btn-dark:hover { background: var(--navy-800); }
.btn-secondary { background: var(--surface); color: var(--text); border-color: var(--line); box-shadow: var(--shadow-xs); }
.btn-secondary:hover { border-color: var(--line-strong); background: var(--soft); }
.btn-ghost { background: transparent; color: var(--ink-2); }
.btn-ghost:hover { background: var(--raised); color: var(--text); }
.btn-danger { background: var(--danger); color: #fff; }
.btn-danger:hover { background: #B91C1C; }
.btn-danger-ghost { background: transparent; color: var(--danger); }
.btn-danger-ghost:hover { background: var(--danger-50); }
.btn-insight { background: var(--insight); color: #fff; }
.btn-insight:hover { background: #5B21B6; }
.btn-sm { --bh: 36px; padding: 0 .8rem; font-size: .85rem; border-radius: 10px; }
.btn-sm svg { width: 16px; height: 16px; }
.btn-lg { --bh: 52px; padding: 0 1.4rem; font-size: 1rem; border-radius: 14px; }
.btn-icon { width: var(--bh); padding: 0; }
.btn-block { width: 100%; }
.btn .spinner { width: 18px; height: 18px; }

.spinner { display: inline-block; width: 20px; height: 20px; border-radius: 50%; border: 2.5px solid currentColor; border-right-color: transparent; animation: spin .7s linear infinite; opacity: .8; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- Cards ---------- */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
.card-pad { padding: 1.25rem; }
@media (min-width: 640px) { .card-pad { padding: 1.5rem; } }
.card-hover { transition: box-shadow .2s var(--ease), border-color .2s, transform .2s var(--ease); }
.card-hover:hover { box-shadow: var(--shadow); border-color: #D5DEE8; transform: translateY(-1px); }
.card-title { font-weight: 700; font-size: 1rem; letter-spacing: -.015em; color: var(--text); }
.card-sub { font-size: .8125rem; color: var(--muted); }
.eyebrow { font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }

/* ---------- Forms ---------- */
.label { display: block; font-size: .8125rem; font-weight: 600; color: var(--ink-2); margin-bottom: .4rem; }
.label .opt { font-weight: 500; color: var(--faint); }
.input, .select, .textarea {
  width: 100%; height: 46px; padding: 0 .9rem; border-radius: 12px;
  background: var(--surface); border: 1px solid var(--line); color: var(--text);
  font: inherit; font-size: .95rem; transition: border-color .15s, box-shadow .15s;
  -webkit-appearance: none; appearance: none;
}
.textarea { height: auto; min-height: 96px; padding: .75rem .9rem; resize: vertical; line-height: 1.5; }
.select { padding-right: 2.4rem; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%2364748B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right .8rem center; cursor: pointer; }
.input::placeholder, .textarea::placeholder { color: #A0AEC0; }
.input:hover, .select:hover, .textarea:hover { border-color: var(--line-strong); }
.input:focus, .select:focus, .textarea:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 4px rgba(255, 138, 0, .16); }
.input.is-invalid, .select.is-invalid, .textarea.is-invalid { border-color: var(--danger); box-shadow: 0 0 0 4px rgba(220, 38, 38, .10); }
.input.is-flagged { border-color: var(--warn); background: var(--warn-50); }
.input-sm { height: 38px; font-size: .875rem; border-radius: 10px; padding: 0 .7rem; }
.field-error { font-size: .78rem; color: var(--danger); margin-top: .35rem; display: flex; gap: .3rem; align-items: center; }
.field-hint { font-size: .78rem; color: var(--muted); margin-top: .35rem; }
.input-group { position: relative; }
.input-group .input { padding-left: 2.6rem; }
.input-group > .ig-icon { position: absolute; left: .85rem; top: 50%; transform: translateY(-50%); color: var(--faint); width: 18px; height: 18px; pointer-events: none; }
.input-group > .ig-right { position: absolute; right: .35rem; top: 50%; transform: translateY(-50%); }
.input-prefix { position: relative; }
.input-prefix > span { position: absolute; left: .85rem; top: 50%; transform: translateY(-50%); color: var(--muted); font-weight: 600; font-size: .9rem; pointer-events: none; }
.input-prefix > .input { padding-left: 1.8rem; }
input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
input[type=number] { -moz-appearance: textfield; }
input[type=date].input, input[type=time].input { min-width: 0; }

.check { display: inline-flex; align-items: flex-start; gap: .6rem; cursor: pointer; font-size: .875rem; color: var(--ink-2); }
.check input { appearance: none; -webkit-appearance: none; flex: none; width: 20px; height: 20px; margin-top: 1px; border-radius: 6px; border: 1.5px solid var(--line-strong); background: var(--surface); display: grid; place-items: center; cursor: pointer; transition: all .15s; }
.check input:checked { background: var(--inv-bg); border-color: var(--inv-bg); }
.check input:checked::after { content: ""; width: 10px; height: 6px; border: 2px solid #fff; border-top: 0; border-right: 0; transform: rotate(-45deg) translate(1px, -1px); }
.check input:focus-visible { outline: 2.5px solid var(--brand); outline-offset: 2px; }

.switch { position: relative; display: inline-flex; flex: none; width: 44px; height: 26px; }
.switch input { opacity: 0; width: 0; height: 0; position: absolute; }
.switch span { position: absolute; inset: 0; border-radius: 99px; background: var(--line-strong); transition: background .2s; cursor: pointer; }
.switch span::after { content: ""; position: absolute; left: 3px; top: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--surface); box-shadow: 0 1px 3px rgba(0,0,0,.2); transition: transform .2s var(--ease); }
.switch input:checked + span { background: var(--success); }
.switch input:checked + span::after { transform: translateX(18px); }
.switch input:focus-visible + span { outline: 2.5px solid var(--brand); outline-offset: 2px; }

/* Segmented control */
.seg { display: inline-flex; padding: 4px; gap: 2px; background: var(--raised); border-radius: 12px; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.seg::-webkit-scrollbar { display: none; }
.seg button { height: 34px; padding: 0 .85rem; border-radius: 9px; font-weight: 600; font-size: .85rem; color: var(--muted); white-space: nowrap; transition: all .15s; display: inline-flex; align-items: center; gap: .4rem; }
.seg button svg { width: 16px; height: 16px; }
.seg button:hover { color: var(--text); }
.seg button[aria-pressed="true"], .seg button.is-active { background: var(--surface); color: var(--text); box-shadow: var(--shadow-xs), 0 0 0 1px var(--hover); }

/* Chips */
.chip { display: inline-flex; align-items: center; gap: .4rem; height: 36px; padding: 0 .85rem; border-radius: 99px; border: 1px solid var(--line); background: var(--surface); font-size: .85rem; font-weight: 600; color: var(--ink-2); cursor: pointer; transition: all .15s; white-space: nowrap; }
.chip svg { width: 15px; height: 15px; }
.chip:hover { border-color: var(--line-strong); }
.chip[aria-pressed="true"], .chip.is-active { background: var(--inv-bg); border-color: var(--inv-bg); color: var(--inv-fg); }
.chip-row { display: flex; gap: .5rem; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.chip-row::-webkit-scrollbar { display: none; }

/* Badges */
.badge { display: inline-flex; align-items: center; gap: .3rem; height: 24px; padding: 0 .55rem; border-radius: 99px; font-size: .72rem; font-weight: 700; letter-spacing: .005em; white-space: nowrap; }
.badge svg { width: 13px; height: 13px; }
.badge-neutral { background: var(--raised); color: var(--ink-2); }
.badge-brand { background: var(--brand-50); color: var(--brand-ink); }
.badge-success { background: var(--success-50); color: var(--success-ink); }
.badge-warn { background: var(--warn-50); color: var(--warn-ink); }
.badge-danger { background: var(--danger-50); color: var(--danger); }
.badge-insight { background: var(--insight-50); color: var(--insight); }
.badge-navy { background: var(--inv-bg); color: var(--inv-fg); }

/* Progress */
.progress { height: 10px; border-radius: 99px; background: var(--track); overflow: hidden; }
.progress > span { display: block; height: 100%; border-radius: 99px; background: var(--success); transition: width .6s var(--ease); }
.progress.is-warn > span { background: var(--warn); }
.progress.is-over > span { background: var(--danger); }

/* Stepper */
.stepper { display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); height: 40px; overflow: hidden; }
.stepper button { width: 38px; height: 100%; display: grid; place-items: center; color: var(--ink-2); transition: background .15s; }
.stepper button:hover { background: var(--soft); }
.stepper button svg { width: 16px; height: 16px; }
.stepper input { width: 40px; text-align: center; border: 0; font-weight: 700; font-size: .95rem; color: var(--text); background: transparent; height: 100%; padding: 0; }
.stepper input:focus { outline: none; background: var(--brand-50); }

/* Avatars */
.avatar { display: inline-grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 50%; font-weight: 700; font-size: .8rem; color: #fff; background: var(--deep); letter-spacing: -.02em; }
.avatar-sm { width: 28px; height: 28px; font-size: .7rem; }
.avatar-lg { width: 56px; height: 56px; font-size: 1.1rem; }

/* Thumbnails & image fallback */
.thumb { flex: none; object-fit: cover; background: linear-gradient(135deg, #FFE9CC, #FFF6EB); border-radius: 12px; }
.img-fallback { display: grid; place-items: center; background: linear-gradient(135deg, #FFE9CC 0%, #FFF6EB 60%, #F8FAFC 100%); color: var(--brand-ink); }
.img-fallback svg { width: 40%; height: 40%; max-width: 40px; max-height: 40px; opacity: .8; }

/* Divider list */
.divide > * + * { border-top: 1px solid var(--line-2); }

/* Tooltip for charts */
.viz-tip { position: fixed; z-index: 80; pointer-events: none; background: var(--deep); color: #fff; font-size: .78rem; line-height: 1.35; padding: .5rem .65rem; border-radius: 10px; box-shadow: var(--shadow-lg); opacity: 0; transform: translateY(4px); transition: opacity .12s, transform .12s; max-width: 220px; }
.viz-tip.is-on { opacity: 1; transform: none; }
.viz-tip b { font-weight: 700; }
.viz-tip .t-muted { color: var(--line-strong); }

/* ---------- Toasts ---------- */
.toast-wrap { position: fixed; z-index: 100; left: 50%; transform: translateX(-50%); bottom: calc(1.25rem + var(--safe-b)); display: flex; flex-direction: column; gap: .5rem; width: min(420px, calc(100vw - 2rem)); pointer-events: none; }
.has-bottom-nav .toast-wrap { bottom: calc(var(--bottom-nav-h) + 1rem + var(--safe-b)); }
@media (min-width: 1024px) { .toast-wrap, .has-bottom-nav .toast-wrap { left: auto; right: 1.5rem; transform: none; bottom: 1.5rem; } }
.toast { pointer-events: auto; display: flex; align-items: flex-start; gap: .7rem; padding: .85rem 1rem; border-radius: 14px; background: var(--deep); color: #fff; box-shadow: var(--shadow-lg); font-size: .875rem; font-weight: 500; animation: toastIn .3s var(--ease); }
.toast svg { width: 20px; height: 20px; flex: none; margin-top: 1px; }
.toast .t-icon-success { color: #4ADE80; }
.toast .t-icon-error { color: #F87171; }
.toast .t-icon-info { color: var(--brand); }
.toast .t-action { margin-left: auto; font-weight: 700; color: var(--brand); white-space: nowrap; }
.toast.is-leaving { animation: toastOut .25s var(--ease) forwards; }
@keyframes toastIn { from { opacity: 0; transform: translateY(10px) scale(.98); } }
@keyframes toastOut { to { opacity: 0; transform: translateY(8px) scale(.98); } }

/* ---------- Modal / bottom sheet ---------- */
.modal-root { position: fixed; inset: 0; z-index: 90; display: flex; align-items: flex-end; justify-content: center; }
.modal-backdrop { position: absolute; inset: 0; background: rgba(15, 23, 42, .45); animation: fadeIn .2s ease; }
.modal-panel { position: relative; width: 100%; max-height: calc(100dvh - 2.5rem); display: flex; flex-direction: column; background: var(--surface); border-radius: 24px 24px 0 0; box-shadow: var(--shadow-lg); animation: sheetIn .32s var(--ease); padding-bottom: var(--safe-b); }
.modal-panel::before { content: ""; position: absolute; top: 8px; left: 50%; width: 40px; height: 4px; border-radius: 9px; background: var(--line-strong); transform: translateX(-50%); }
.modal-head { display: flex; align-items: flex-start; gap: 1rem; padding: 1.4rem 1.25rem .75rem; }
.modal-head h2 { font-size: 1.125rem; font-weight: 800; letter-spacing: -.02em; }
.modal-head p { font-size: .875rem; color: var(--muted); margin-top: .2rem; }
.modal-body { padding: .25rem 1.25rem 1.25rem; overflow-y: auto; overscroll-behavior: contain; }
.modal-foot { display: flex; gap: .6rem; justify-content: flex-end; padding: .9rem 1.25rem 1.1rem; border-top: 1px solid var(--line-2); background: var(--surface); border-radius: 0 0 24px 24px; }
.modal-foot { flex-wrap: wrap; }
.modal-foot .btn { flex: 1 1 auto; min-width: 0; }
@media (min-width: 640px) {
  .modal-root { align-items: center; padding: 1.5rem; }
  .modal-panel { width: min(var(--mw, 520px), 100%); border-radius: 24px; animation: modalIn .26s var(--ease); padding-bottom: 0; max-height: calc(100dvh - 3rem); }
  .modal-panel::before { display: none; }
  .modal-head { padding: 1.5rem 1.5rem .75rem; }
  .modal-body { padding: .25rem 1.5rem 1.5rem; }
  .modal-foot { padding: 1rem 1.5rem; }
  .modal-foot .btn { flex: none; }
}
.modal-root.is-leaving .modal-backdrop { animation: fadeOut .2s ease forwards; }
.modal-root.is-leaving .modal-panel { animation: sheetOut .22s var(--ease) forwards; }
@keyframes fadeIn { from { opacity: 0; } }
@keyframes fadeOut { to { opacity: 0; } }
@keyframes sheetIn { from { transform: translateY(100%); } }
@keyframes sheetOut { to { transform: translateY(100%); } }
@keyframes modalIn { from { opacity: 0; transform: translateY(12px) scale(.98); } }
@media (min-width: 640px) { @keyframes sheetOut { to { opacity: 0; transform: translateY(10px) scale(.98); } } }
body.modal-open { overflow: hidden; }

/* ---------- Motion helpers ---------- */
.fade-up { animation: fadeUp .45s var(--ease) both; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(8px); } }
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.is-in { opacity: 1; transform: none; }
.skeleton { background: linear-gradient(90deg, var(--raised) 25%, #E9EEF4 37%, var(--raised) 63%); background-size: 400% 100%; animation: shimmer 1.4s ease infinite; border-radius: 10px; }
@keyframes shimmer { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  .reveal { opacity: 1; transform: none; }
}

/* Success check animation */
.success-burst { width: 76px; height: 76px; border-radius: 50%; background: var(--success-50); display: grid; place-items: center; margin: 0 auto; position: relative; }
.success-burst::before { content: ""; position: absolute; inset: -8px; border-radius: 50%; border: 2px solid rgba(34, 197, 94, .25); animation: ring 1.2s var(--ease) both; }
.success-burst svg path { stroke-dasharray: 40; stroke-dashoffset: 40; animation: draw .5s .15s var(--ease) forwards; }
@keyframes ring { from { transform: scale(.6); opacity: 0; } 60% { opacity: 1; } to { transform: scale(1.15); opacity: 0; } }
@keyframes draw { to { stroke-dashoffset: 0; } }

/* Scrollbars (desktop) */
@media (min-width: 1024px) {
  .thin-scroll::-webkit-scrollbar { width: 8px; height: 8px; }
  .thin-scroll::-webkit-scrollbar-thumb { background: #E2E8F0; border-radius: 9px; }
  .thin-scroll::-webkit-scrollbar-thumb:hover { background: var(--line-strong); }
}

/* ===== Dark mode layer =====
   Most colors follow the tokens above automatically. This layer only
   covers Tailwind's fixed palette classes used in markup, plus a few
   things tokens can't express (map tiles, gradients). */
html.dark .bg-white { background-color: var(--surface); }
html.dark .hover\:bg-white:hover { background-color: var(--raised); }
html.dark .bg-white\/90, html.dark .bg-white\/95 { background-color: rgb(17 26 44 / .92); }
html.dark .bg-white\/70 { background-color: rgb(17 26 44 / .72); }
html.dark .bg-red-50, html.dark .bg-red-50\/50 { background-color: var(--danger-50); }
html.dark .text-red-600, html.dark .text-red-700 { color: #F87171; }
html.dark .border-red-200 { border-color: rgb(248 113 113 / .35); }
html.dark .bg-amber-50 { background-color: var(--warn-50); }
html.dark .\!bg-amber-50\/40 { background-color: rgb(251 191 36 / .07) !important; }
html.dark .text-amber-600, html.dark .text-amber-700, html.dark .text-amber-800 { color: #FBBF24; }
html.dark .border-amber-200, html.dark .border-amber-300, html.dark .\!border-amber-200, html.dark .\!border-amber-300 { border-color: rgb(251 191 36 / .35) !important; }
html.dark .\!border-green-200 { border-color: rgb(74 222 128 / .3) !important; }
html.dark .text-rose-600, html.dark .heart-toggle[aria-pressed="true"], html.dark .fav-btn[aria-pressed="true"] { color: #FB7185; }
html.dark .bg-insight, html.dark .btn-insight { background-color: #7C3AED; }
html.dark .btn-insight:hover { background-color: #6D28D9; }
html.dark .btn-dark:hover { background-color: #FFFFFF; }
html.dark .btn-danger-ghost:hover { background-color: var(--danger-50); }
html.dark .modal-backdrop { background: rgb(2 6 15 / .66); }
html.dark .img-fallback { background: linear-gradient(135deg, #3A2510 0%, #1A2235 70%); }
html.dark .skeleton { background: linear-gradient(90deg, var(--raised) 25%, var(--track) 37%, var(--raised) 63%); background-size: 400% 100%; }
html.dark .avatar { box-shadow: 0 0 0 1.5px rgb(255 255 255 / .12); }
html.dark .badge-brand { background: var(--brand-50); color: var(--brand-ink); }
html.dark .progress { background: var(--track); }
html.dark .stepper input:focus { background: var(--brand-50); }
html.dark .input:hover, html.dark .select:hover, html.dark .textarea:hover { border-color: var(--line-strong); }
html.dark .input::placeholder, html.dark .textarea::placeholder { color: #5B6B84; }
html.dark ::-webkit-scrollbar-thumb { background: #243149; }
/* maps: darken OSM tiles, keep markers and controls crisp */
html.dark .leaflet-tile-pane { filter: invert(1) hue-rotate(180deg) brightness(.92) contrast(.88) saturate(.55); }
html.dark .leaflet-container { background: #0E1626; }
html.dark .leaflet-bar a, html.dark .leaflet-control-attribution { background: var(--surface) !important; color: var(--ink-2) !important; border-color: var(--line) !important; }
html.dark .leaflet-control-attribution a { color: var(--brand-ink); }
html.dark .leaflet-tooltip { background: var(--surface); color: var(--text); }
html.dark .leaflet-tooltip-top:before { border-top-color: var(--surface); }

/* Theme switch: circular reveal (theme.js drives the clip-path) */
::view-transition-old(root), ::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
html.theme-switching ::view-transition-old(root) { z-index: 1; }
html.theme-switching ::view-transition-new(root) { z-index: 2; }

/* Theme picker (Settings / account menu) */
.theme-seg { display: inline-grid; grid-template-columns: repeat(3, 1fr); gap: 2px; padding: 4px; border-radius: 12px; background: var(--raised); }
.theme-seg button { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; height: 34px; padding: 0 .75rem; border-radius: 9px; font-size: .82rem; font-weight: 600; color: var(--muted); }
.theme-seg button svg { width: 16px; height: 16px; }
.theme-seg button[aria-pressed="true"] { background: var(--surface); color: var(--text); box-shadow: var(--shadow-xs); }
/* text on Orderly Orange is always navy, in both themes */
html.dark .bg-brand.text-navy, html.dark .bg-brand .text-navy { color: #0F172A; }
/* light-scoped islands also reset inherited text color */
.keep-light { color: rgb(var(--c-text)); }

/* ===== Opening / closing ceremony (ceremony.js) ===== */
html.oc-lock, html.oc-lock body { overflow: hidden; }
.oc { position: fixed; inset: 0; z-index: 120; display: grid; place-items: center; background: var(--warm); color: var(--text); overflow-y: auto; padding: 2rem 0; }
.oc-glow { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(600px 420px at 50% 32%, rgb(255 138 0 / .16), transparent 70%), radial-gradient(500px 400px at 85% 100%, rgb(255 138 0 / .07), transparent 70%); }
.oc-stage { position: relative; width: 100%; max-width: 380px; padding: 0 1.5rem; text-align: center; }
.oc-plate { position: relative; width: 136px; height: 136px; margin: 0 auto; filter: drop-shadow(0 18px 30px rgb(var(--c-shadow) / calc(var(--shadow-a) * 3))); }
.oc-plate > svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.oc-mark svg { display: block; }
.oc-rim { fill: var(--surface); stroke: var(--line); stroke-width: 1; }
.oc-track { fill: none; stroke: var(--track); stroke-width: 6; }
.oc-ring { fill: none; stroke: url(#ocGrad); stroke-width: 6; stroke-linecap: round; }
.oc.is-run .oc-ring { animation: ocRing linear forwards; }
@keyframes ocRing { to { stroke-dashoffset: 0; } }
.oc-well { fill: var(--soft); stroke: var(--line-2); stroke-width: 1; }
.oc-tile { position: absolute; inset: 26px; display: grid; place-items: center; border-radius: 50%; }
.oc-mark, .oc-end { position: absolute; display: grid; place-items: center; transition: transform .45s cubic-bezier(.34,1.56,.64,1), opacity .3s; }
.oc-end { width: 62px; height: 62px; border-radius: 50%; background: var(--brand); color: #0F172A; opacity: 0; transform: scale(.4) rotate(-20deg); box-shadow: 0 10px 22px -8px rgb(255 138 0 / .8); }
.oc-end svg { width: 30px; height: 30px; }
.oc.is-done .oc-mark { opacity: 0; transform: scale(.5); }
.oc.is-done .oc-end { opacity: 1; transform: none; }
.oc.is-run .oc-mark { animation: ocBob 1.6s ease-in-out infinite; }
@keyframes ocBob { 0%, 100% { transform: translateY(0) } 50% { transform: translateY(-3px) } }
.oc-title { margin-top: 1.6rem; font-size: 1.6rem; font-weight: 800; letter-spacing: -.03em; line-height: 1.15; }
.oc-dots::after { content: ''; display: inline-block; width: 1.2em; text-align: left; animation: ocDots 1.2s steps(4) infinite; }
@keyframes ocDots { 0% { content: ''; } 25% { content: '.'; } 50% { content: '..'; } 75%, 100% { content: '...'; } }
.oc.is-done .oc-dots { display: none; }
.oc-sub { margin-top: .4rem; min-height: 1.3rem; font-size: .9rem; color: var(--muted); transition: opacity .16s; }
.oc-sub.swap { opacity: 0; }
/* the checklist prints like a receipt */
.oc-receipt { position: relative; margin: 1.6rem auto 0; width: 300px; max-width: 100%; background: #fff; color: #334155; text-align: left; font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 11.5px; padding: 12px 14px 16px; border-radius: 4px 4px 0 0; box-shadow: 0 14px 28px -14px rgb(2 6 15 / .35);
  -webkit-mask: linear-gradient(#000 0 0) top/100% calc(100% - 7px) no-repeat, radial-gradient(circle 4.5px at 50% 100%, transparent 98%, #000) bottom/9px 7px repeat-x;
  mask: linear-gradient(#000 0 0) top/100% calc(100% - 7px) no-repeat, radial-gradient(circle 4.5px at 50% 100%, transparent 98%, #000) bottom/9px 7px repeat-x;
  animation: ocPrint .5s .25s cubic-bezier(.2,.8,.2,1) both; transform-origin: top; }
@keyframes ocPrint { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }
.oc-r-head, .oc-r-foot { text-align: center; font-size: 10px; letter-spacing: .14em; color: #94A3B8; }
.oc-r-head { padding-bottom: 8px; border-bottom: 1px dashed #CBD5E1; margin-bottom: 6px; }
.oc-r-foot { padding-top: 8px; border-top: 1px dashed #CBD5E1; margin-top: 6px; letter-spacing: .06em; }
.oc-receipt li { display: flex; align-items: center; gap: 8px; padding: 5px 0; opacity: .32; transform: translateY(-3px); transition: opacity .3s, transform .3s; }
.oc-receipt li.is-on { opacity: 1; transform: none; color: #0F172A; }
.oc-ic { width: 22px; height: 22px; flex: none; display: grid; place-items: center; border-radius: 6px; background: #F1F5F9; color: #64748B; transition: background .3s, color .3s; }
.oc-ic svg { width: 13px; height: 13px; }
.oc-receipt li.is-on .oc-ic { background: #FFF6EB; color: #B45309; }
.oc-txt { font-family: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif; font-size: 12.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.oc-dots-fill { flex: 1; min-width: 10px; border-bottom: 1.5px dotted #CBD5E1; transform: translateY(-3px); }
.oc-ok { width: 16px; height: 16px; flex: none; color: #16A34A; opacity: 0; transform: scale(.4); transition: opacity .25s .1s, transform .3s .1s cubic-bezier(.34,1.56,.64,1); }
.oc-ok svg { width: 16px; height: 16px; }
.oc-receipt li.is-on .oc-ok { opacity: 1; transform: none; }
.oc.is-exit { animation: ocOut .26s ease forwards; }
@keyframes ocOut { to { opacity: 0; transform: scale(1.03); } }
@media (prefers-reduced-motion: reduce) { .oc *, .oc { animation: none !important; transition: none !important; } .oc-receipt li { opacity: 1; transform: none; } }
.spinner-lg { width: 40px; height: 40px; border-width: 3px; color: rgb(var(--c-brand-ink)); }

/* Kurvo family app tiles and lists */
.kapp-tile { display: inline-grid; place-items: center; flex: none; border-radius: 10px; color: #fff; font-weight: 800; line-height: 1; box-shadow: 0 1px 2px rgb(15 23 42 / .12); }
.kapp-add { background: transparent !important; box-shadow: none; border: 1.5px dashed rgb(var(--c-brand-ink) / .6); color: rgb(var(--c-brand-ink)); }
.kapp-row { display: flex; align-items: center; gap: .7rem; }
.kapp-list { display: grid; gap: .65rem; }
.kapp-family { display: flex; align-items: center; }
.kapp-logo { object-fit: contain; background: none; box-shadow: none; border-radius: 24%; }
.kapp-family .kapp-tile { border: 2px solid rgb(var(--c-surface)); }
.kapp-family .kapp-tile + .kapp-tile { margin-left: -6px; }

/* Terms & Privacy reader (sign-up and join) */
.consent-box { border: 1.5px solid rgb(var(--c-line)); border-radius: 1rem; padding: 1rem; transition: border-color .2s, background .2s; }
.consent-box.is-ready { border-color: rgb(34 197 94 / .45); background: rgb(34 197 94 / .05); }
.consent-row { display: flex; align-items: center; gap: .75rem; width: 100%; border: 1px solid rgb(var(--c-line)); border-radius: .85rem; padding: .6rem .75rem; background: rgb(var(--c-surface)); transition: border-color .15s, background .15s; }
.consent-row:hover { border-color: rgb(var(--c-brand-ink) / .45); }
.consent-ic { width: 2rem; height: 2rem; border-radius: .6rem; display: grid; place-items: center; flex: none; background: rgb(var(--c-brand-50)); color: rgb(var(--c-brand-ink)); }
.consent-ic svg, .consent-cta svg { width: 1rem; height: 1rem; }
.consent-cta { display: inline-flex; align-items: center; gap: .25rem; font-size: .75rem; font-weight: 700; color: rgb(var(--c-brand-ink)); white-space: nowrap; }
.consent-row.is-done { border-color: rgb(34 197 94 / .4); }
.consent-row.is-done .consent-ic { background: rgb(34 197 94 / .12); color: #16A34A; }
.consent-row.is-done .consent-cta { color: #16A34A; }
.legal-progress { height: 6px; border-radius: 999px; background: rgb(var(--c-line)); overflow: hidden; }
.legal-progress span { display: block; height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, #FF8A00, #22C55E); transition: width .2s; }
.legal-frame { display: block; width: 100%; height: min(62vh, 620px); margin-top: .75rem; border: 1px solid rgb(var(--c-line)); border-radius: .85rem; background: rgb(var(--c-surface)); }