/* ════════════════════════════════════════════════════════════════════
   sammi-ui — the "floating pills" look from sammi-b.com/dash
   Drop-in, framework-free. Light + dark. Mobile-first.
   Fonts: Inter (Google Fonts). Icons: Lucide, stroke 1.75.
   Theme: add data-theme="dark" on <html> (or follow the OS automatically).
   ════════════════════════════════════════════════════════════════════ */

/* ── 1. tokens ─────────────────────────────────────────────────────── */
:root {
  --font: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, monospace;

  /* surfaces + text */
  --bg: #ffffff;              /* page */
  --card: #ffffff;            /* cards, pills, sheets */
  --fg: #0a0a0a;              /* body text */
  --muted: #737373;           /* secondary text */
  --muted2: rgba(115,115,115,.5); /* tertiary text, placeholders */
  --ink: #111110;             /* PRIMARY ACTION color (near-black). Text on ink = var(--bg) */
  --line: rgba(0,0,0,.08);    /* hairlines between rows */
  --bsoft: #e7e5e4;           /* 2px borders on buttons/inputs */
  --field: rgba(245,245,244,.7);
  --field-inset: inset 0 1px 2px rgba(28,25,23,.07);
  --input: rgba(0,0,0,.04);   /* pill tracks (segmented, search, tabs) */
  --soft: rgba(28,25,23,.05); /* icon squares, steppers */
  --hover: rgba(0,0,0,.05);
  --active: rgba(0,0,0,.06);

  /* accents */
  --accent: #4568ff;          /* focus rings, links, floating-label focus — NOT buttons */
  --accent-bg: rgba(69,104,255,.08);
  --brand-a: #ff9966;         /* signature orange→coral gradient (orb, avatars, hero CTA) */
  --brand-b: #ff5e62;
  --brand: linear-gradient(135deg, var(--brand-a), var(--brand-b));

  /* status */
  --green: #16a34a; --green-bg: rgba(34,197,94,.1);  --ok: #22c55e;
  --blue: #2563eb;  --blue-bg: rgba(59,130,246,.1);
  --amber: #d97706; --amber-bg: rgba(245,158,11,.12);
  --violet: #7c3aed; --violet-bg: rgba(139,92,246,.12);
  --red: #dc2626;   --red-bg: rgba(239,68,68,.1);

  /* data palette (dots, rings, project colors) */
  --c-zinc: #71717a; --c-red: #ef4444; --c-orange: #f97316; --c-amber: #f59e0b; --c-green: #22c55e;
  --c-teal: #14b8a6; --c-blue: #3b82f6; --c-violet: #8b5cf6; --c-pink: #ec4899; --c-cyan: #04C7DD;

  /* depth */
  --pill-shadow: 0 10px 30px -12px rgba(28,25,23,.22), 0 2px 6px -2px rgba(28,25,23,.06);
  --tile-shadow: 0 1px 2px rgba(0,0,0,.04), 0 6px 18px -12px rgba(0,0,0,.14);
  --shadow-lg: 0 10px 30px -10px rgba(0,0,0,.25), 0 0 0 1px rgba(0,0,0,.05);
  --focus: 0 0 0 2px var(--bg), 0 0 0 4px #a3a3a3;

  /* shape */
  --r-pill: 999px; --r-card: 20px; --r-tile: 18px; --r-dlg: 24px; --r-sheet: 26px; --r-field: 12px; --r-icon: 11px;

  /* motion */
  --ease: cubic-bezier(.2,.8,.2,1);
}
:root[data-theme="dark"] {
  --bg: #0a0a0a; --card: #0f0f0f; --fg: #fafafa; --muted: #a3a3a3; --muted2: rgba(163,163,163,.5);
  --ink: #fafafa; --line: rgba(255,255,255,.08); --bsoft: rgba(255,255,255,.12);
  --field: rgba(255,255,255,.05); --field-inset: inset 0 1px 2px rgba(0,0,0,.45);
  --input: rgba(255,255,255,.05); --soft: rgba(255,255,255,.06); --hover: rgba(255,255,255,.05); --active: rgba(255,255,255,.1);
  --accent: #7b93ff; --accent-bg: rgba(123,147,255,.12);
  --green: #4ade80; --blue: #60a5fa; --amber: #fbbf24; --violet: #a78bfa; --red: #f87171;
  --pill-shadow: 0 10px 30px -12px rgba(0,0,0,.7), 0 0 0 1px rgba(255,255,255,.06);
  --tile-shadow: 0 0 0 1px rgba(255,255,255,.06);
  --shadow-lg: 0 10px 30px -10px rgba(0,0,0,.7), 0 0 0 1px rgba(255,255,255,.06);
  --focus: 0 0 0 2px var(--bg), 0 0 0 4px #525252;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0a0a0a; --card: #0f0f0f; --fg: #fafafa; --muted: #a3a3a3; --muted2: rgba(163,163,163,.5);
    --ink: #fafafa; --line: rgba(255,255,255,.08); --bsoft: rgba(255,255,255,.12);
    --field: rgba(255,255,255,.05); --field-inset: inset 0 1px 2px rgba(0,0,0,.45);
    --input: rgba(255,255,255,.05); --soft: rgba(255,255,255,.06); --hover: rgba(255,255,255,.05); --active: rgba(255,255,255,.1);
    --accent: #7b93ff; --accent-bg: rgba(123,147,255,.12);
    --green: #4ade80; --blue: #60a5fa; --amber: #fbbf24; --violet: #a78bfa; --red: #f87171;
    --pill-shadow: 0 10px 30px -12px rgba(0,0,0,.7), 0 0 0 1px rgba(255,255,255,.06);
    --tile-shadow: 0 0 0 1px rgba(255,255,255,.06);
    --shadow-lg: 0 10px 30px -10px rgba(0,0,0,.7), 0 0 0 1px rgba(255,255,255,.06);
    --focus: 0 0 0 2px var(--bg), 0 0 0 4px #525252;
  }
}

/* ── 2. base ───────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; }
body { background: var(--bg); color: var(--fg); font-family: var(--font); font-size: 14px; line-height: 1.5; -webkit-font-smoothing: antialiased; font-feature-settings: "tnum" 1; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
input, textarea, select { font: inherit; color: inherit; background: none; border: 0; outline: none; }
::placeholder { color: var(--muted2); }
a { color: inherit; }
.s-i, .lucide { width: 16px; height: 16px; flex: none; stroke-width: 1.75; }
@media (max-width: 767px) { input, select, textarea { font-size: 16px; } } /* stops iOS zoom-on-focus */

/* ── 3. type ───────────────────────────────────────────────────────── */
.s-eyebrow { font-size: 12px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.s-hero { font-size: 32px; font-weight: 600; letter-spacing: -.025em; line-height: 1.15; margin: 8px 0 6px; }
.s-h1 { font-size: 24px; font-weight: 600; letter-spacing: -.02em; line-height: 1.25; margin: 0 0 4px; }
.s-h2 { font-size: 17px; font-weight: 600; letter-spacing: -.01em; }
.s-section { display: flex; justify-content: space-between; align-items: center; margin: 26px 4px 10px; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.s-section > button { font-size: 12.5px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--fg); }
.s-label { display: block; margin: 22px 0 10px; font-size: 11.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); line-height: 1; }
.s-muted { color: var(--muted); } .s-xs { font-size: 12px; } .s-strong { font-weight: 600; }
.s-num { font-size: 22px; font-weight: 600; letter-spacing: -.02em; }   /* stat numbers */

/* ── 4. surfaces ───────────────────────────────────────────────────── */
.s-card { background: var(--card); border-radius: var(--r-card); box-shadow: var(--pill-shadow); }
.s-card-pad { padding: 16px 18px; }
.s-tile { background: var(--card); border-radius: var(--r-tile); padding: 14px; box-shadow: var(--tile-shadow); }
.s-empty { display: flex; align-items: center; gap: 14px; padding: 18px; border-radius: var(--r-card); border: 1.5px dashed var(--bsoft); color: var(--muted); }
.s-list { background: var(--card); border-radius: var(--r-card); box-shadow: var(--pill-shadow); padding: 2px 16px; }
.s-row { display: flex; align-items: center; gap: 12px; padding: 13px 0; }
.s-row + .s-row { border-top: 1px solid var(--line); }
.s-row-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.s-row-t b { font-size: 14.5px; font-weight: 600; }
.s-row-t small { font-size: 12px; color: var(--muted); }
.s-ico { width: 36px; height: 36px; flex: none; border-radius: var(--r-icon); display: grid; place-items: center; background: var(--soft); }
.s-ico svg { width: 17px; height: 17px; }
.s-ico-brand { background: var(--brand); color: #fff; }

/* ── 5. buttons ────────────────────────────────────────────────────── */
.s-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 40px; padding: 0 16px; border-radius: var(--r-pill); border: 2px solid var(--bsoft); background: var(--card); color: var(--fg); font-size: 14px; font-weight: 600; white-space: nowrap; transition: background .15s, color .15s, box-shadow .15s, border-color .15s, opacity .15s; }
.s-btn:hover { background: var(--hover); }
.s-btn:focus-visible { outline: none; box-shadow: var(--focus); }
.s-btn-primary { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.s-btn-primary:hover { background: var(--ink); opacity: .88; }
.s-btn-ghost { border-color: transparent; background: transparent; color: var(--muted); }
.s-btn-ghost:hover { color: var(--fg); }
.s-btn-danger { border-color: transparent; background: transparent; color: var(--red); }
.s-btn-brand { border: 0; background: var(--brand); color: #fff; box-shadow: 0 14px 30px -14px rgba(255,94,98,.8); }
.s-btn-sm { height: 34px; padding: 0 12px; font-size: 13px; }
.s-btn-block { width: 100%; height: 48px; }
.s-btn[disabled] { opacity: .4; pointer-events: none; }
.s-iconbtn { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: var(--r-pill); color: var(--muted); transition: background .15s, color .15s; }
.s-iconbtn:hover { background: var(--hover); color: var(--fg); }
.s-circle-btn { display: grid; place-items: center; width: 42px; height: 42px; border-radius: var(--r-pill); background: var(--ink); color: var(--bg); }
.s-step { display: inline-flex; gap: 4px; }
.s-step button { width: 32px; height: 32px; display: grid; place-items: center; border-radius: var(--r-pill); background: var(--soft); font-size: 17px; line-height: 1; }
.s-fab { position: fixed; right: 16px; bottom: calc(86px + env(safe-area-inset-bottom)); z-index: 20; width: 54px; height: 54px; display: grid; place-items: center; border-radius: var(--r-pill); background: var(--ink); color: var(--bg); box-shadow: 0 8px 24px -6px rgba(0,0,0,.35); }
.s-fab:active { transform: scale(.96); }

/* ── 6. form fields (floating label style) ─────────────────────────── */
.s-input, .s-textarea { width: 100%; height: 48px; padding: 0 14px; border-radius: var(--r-field); border: 2px solid var(--bsoft); background: var(--field); box-shadow: var(--field-inset); font-size: 15px; transition: border-color .15s, background .15s; }
.s-textarea { height: auto; min-height: 96px; padding: 12px 14px; line-height: 1.5; resize: none; display: block; }
.s-input:focus, .s-textarea:focus { border-color: var(--accent); background: var(--card); }
.s-fl { position: relative; margin-top: 14px; min-width: 0; }
.s-fl > .s-input { height: 56px; padding-top: 22px; padding-bottom: 8px; }
.s-fl > .s-textarea { padding-top: 26px; }
.s-fl > label { position: absolute; left: 16px; top: 9px; font-size: 11.5px; font-weight: 500; letter-spacing: .01em; color: var(--muted); pointer-events: none; transition: color .15s; }
.s-fl:focus-within > label { color: var(--accent); }
.s-fl > .s-input::placeholder, .s-fl > .s-textarea::placeholder { color: transparent; }
select.s-input { appearance: none; -webkit-appearance: none; padding-right: 36px; cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23737373' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; }
.s-fl > select.s-input { padding-top: 20px; }
.s-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.s-search { display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px; border-radius: var(--r-pill); background: var(--input); color: var(--muted); }
.s-search input { flex: 1; min-width: 0; font-size: 14px; color: var(--fg); }
/* hidden file inputs MUST stay inside their button */
.s-file-btn { position: relative; overflow: hidden; }
.s-file-btn input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }

/* checkbox (square, accent) */
.s-check { appearance: none; -webkit-appearance: none; width: 18px; height: 18px; margin: 0; flex: none; border: 2px solid var(--bsoft); border-radius: 6px; background: var(--card); position: relative; cursor: pointer; transition: background .15s, border-color .15s; }
.s-check:checked { background: var(--accent); border-color: var(--accent); }
.s-check:checked::after { content: ''; position: absolute; left: 4.5px; top: 1px; width: 5px; height: 8px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
/* round "complete" check (habits) */
.s-done-circle { width: 32px; height: 32px; flex: none; display: grid; place-items: center; border-radius: var(--r-pill); border: 1.5px solid rgba(128,128,128,.35); color: transparent; transition: background .15s, border-color .15s, transform .1s; }
.s-done-circle:active { transform: scale(.92); }
.s-done-circle svg { width: 16px; height: 16px; stroke-width: 2.5; }
.is-done .s-done-circle, .s-done-circle.is-done { background: var(--ok); border-color: var(--ok); color: #fff; }
.is-rest .s-done-circle { border-style: dashed; color: var(--muted); }
/* switch */
.s-switch { -webkit-appearance: none; appearance: none; flex: none; width: 46px; height: 28px; margin: 0; border-radius: var(--r-pill); background: rgba(128,128,128,.3); position: relative; cursor: pointer; transition: background .2s; }
.s-switch::after { content: ''; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: var(--r-pill); background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: transform .2s; }
.s-switch:checked { background: var(--ok); }
.s-switch:checked::after { transform: translateX(18px); }
.s-switch-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 12px; padding: 12px 14px; border-radius: 14px; background: var(--input); cursor: pointer; }
.s-switch-row b { display: block; font-size: 14px; font-weight: 600; }
.s-switch-row small { font-size: 12px; color: var(--muted); }

/* ── 7. pills, chips, segmented, tabs ──────────────────────────────── */
.s-seg { display: inline-flex; gap: 2px; padding: 3px; border-radius: var(--r-pill); background: var(--input); }
.s-seg > button { height: 34px; padding: 0 14px; border-radius: var(--r-pill); font-size: 13px; font-weight: 500; color: var(--muted); transition: background .15s, color .15s, box-shadow .15s; }
.s-seg > button.is-on { background: var(--card); color: var(--fg); box-shadow: 0 1px 3px rgba(28,25,23,.12); }
.s-seg-full { display: flex; width: 100%; } .s-seg-full > button { flex: 1; }
.s-switcher { display: inline-flex; gap: 2px; padding: 4px; border-radius: var(--r-pill); background: var(--card); box-shadow: var(--pill-shadow); }   /* big view switcher (Check-in / Workouts / Map) */
.s-switcher > button { height: 32px; padding: 0 16px; border-radius: var(--r-pill); font-size: 13px; font-weight: 500; color: var(--muted); }
.s-switcher > button.is-on { background: var(--ink); color: var(--bg); }   /* text on ink is ALWAYS var(--bg) so dark mode works */
.s-chips { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; }
.s-chips::-webkit-scrollbar { display: none; }
.s-chip { flex: none; display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 14px; border-radius: var(--r-pill); border: 1px solid var(--line); background: var(--card); font-size: 13px; font-weight: 500; color: var(--muted); }
.s-chip.is-on { background: var(--ink); border-color: transparent; color: var(--bg); }
.s-tag { display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 8px; border-radius: 6px; background: var(--input); font-size: 11.5px; font-weight: 500; color: var(--muted); white-space: nowrap; }
.s-badge { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px; border-radius: var(--r-pill); border: 1px solid var(--line); font-size: 12px; font-weight: 500; color: var(--muted); white-space: nowrap; }
.s-badge::before { content: ''; width: 6px; height: 6px; border-radius: 99px; background: var(--dot, currentColor); }
.s-badge-green { --dot: var(--c-green); } .s-badge-blue { --dot: var(--c-blue); } .s-badge-amber { --dot: var(--c-amber); } .s-badge-violet { --dot: var(--c-violet); } .s-badge-red { --dot: var(--c-red); }
.s-streak { display: inline-flex; align-items: center; gap: 3px; height: 20px; padding: 0 7px; border-radius: var(--r-pill); background: #fff4ec; color: #ea580c; font-size: 11px; font-weight: 700; }
.s-streak svg { width: 12px; height: 12px; }
.s-prio-high { background: var(--red-bg); color: var(--red); } .s-prio-med { background: var(--amber-bg); color: var(--amber); } .s-prio-low { background: var(--blue-bg); color: var(--blue); }
.s-quick { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }   /* quick-pick buttons (Now / 15 min ago / 4h / 8h…) */
.s-quick > button { height: 34px; padding: 0 8px; border-radius: var(--r-pill); border: 1px solid var(--line); background: var(--card); font-size: 12.5px; font-weight: 500; white-space: nowrap; }
.s-quick > button.is-on { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.s-dot { width: 8px; height: 8px; border-radius: 99px; background: var(--c, var(--c-blue)); flex: none; }

/* ── 8. stats, progress, rings ─────────────────────────────────────── */
.s-meta { display: flex; flex-wrap: nowrap; gap: 14px; overflow-x: auto; scrollbar-width: none; white-space: nowrap; font-size: 13px; color: var(--muted); }
.s-meta::-webkit-scrollbar { display: none; }
.s-meta > * { flex: none; display: inline-flex; align-items: center; gap: 6px; }
.s-meta b { color: var(--fg); font-weight: 600; }
.s-meta svg { width: 15px; height: 15px; color: var(--muted2); }
.s-meta-ring { width: 15px; height: 15px; border-radius: 99px; position: relative; background: conic-gradient(var(--c-green) calc(var(--p, 0) * 1%), var(--bsoft) 0); }
.s-meta-ring::after { content: ''; position: absolute; inset: 3px; border-radius: 99px; background: var(--bg); }
.s-bar { height: 5px; border-radius: 99px; background: var(--active); overflow: hidden; }
.s-bar > i { display: block; height: 100%; border-radius: 99px; background: var(--c, var(--ink)); transition: width .3s; }
.s-stats { display: flex; gap: 26px; }
.s-stats > div { display: flex; flex-direction: column; gap: 1px; }
.s-stats b { font-size: 22px; font-weight: 600; letter-spacing: -.02em; }
.s-stats span { font-size: 12px; color: var(--muted); }

/* ── 9. overlays: dialog, sheet, menu, toast ───────────────────────── */
.s-overlay { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: 16px; }
.s-scrim { position: absolute; inset: 0; background: rgba(0,0,0,.55); animation: s-fade .15s ease; }
.s-dialog { position: relative; width: 100%; max-width: 440px; max-height: 92vh; overflow-y: auto; padding: 26px 24px 22px; border-radius: var(--r-dlg); background: var(--card); box-shadow: 0 20px 50px -30px rgba(28,25,23,.35); animation: s-pop .2s var(--ease); }
.s-dialog-t { font-size: 20px; font-weight: 600; letter-spacing: -.02em; line-height: 1.2; margin: 0 0 4px; padding-right: 28px; }
.s-dialog-sub { font-size: 14px; color: var(--muted); margin: 0 0 4px; }
.s-dialog-close { position: absolute; top: 16px; right: 16px; width: 28px; height: 28px; display: grid; place-items: center; border-radius: var(--r-pill); color: var(--muted); }
.s-dialog-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 24px; }
.s-dialog-sum { display: flex; align-items: center; gap: 8px; margin-top: 14px; padding: 12px 14px; border-radius: 14px; background: var(--input); font-size: 14px; }
.s-dialog-sum b { margin-left: auto; font-size: 16px; font-weight: 600; }
.s-overlay.is-sheet { place-items: end center; padding: 0; }
.s-sheet { position: relative; width: 100%; max-width: 560px; max-height: 88vh; overflow-y: auto; padding: 10px 18px max(20px, env(safe-area-inset-bottom)); border-radius: var(--r-sheet) var(--r-sheet) 0 0; background: var(--card); animation: s-up .28s cubic-bezier(.3,.8,.3,1); }
.s-sheet-grab { width: 38px; height: 5px; margin: 0 auto 14px; border-radius: 99px; background: var(--bsoft); }
.s-menu { position: fixed; z-index: 60; min-width: 190px; padding: 6px; border-radius: 16px; background: var(--card); box-shadow: var(--pill-shadow); animation: s-pop .12s ease; }
.s-menu > button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px; border-radius: 10px; font-size: 13.5px; text-align: left; }
.s-menu > button:hover { background: var(--hover); }
.s-menu > .is-danger { color: var(--red); }
.s-toast { position: fixed; left: 50%; bottom: calc(96px + env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 90; display: flex; align-items: center; gap: 14px; padding: 10px 10px 10px 18px; border-radius: var(--r-pill); background: #1c1917; color: #fff; font-size: 14px; font-weight: 500; white-space: nowrap; box-shadow: 0 14px 34px -10px rgba(0,0,0,.45); animation: s-rise .25s ease both; }
.s-toast button { height: 32px; padding: 0 14px; border-radius: var(--r-pill); background: rgba(255,255,255,.14); color: #fff; font-size: 13px; font-weight: 700; }
@media (min-width: 768px) { .s-toast { bottom: 28px; } }

/* ── 10. app shell: floating top bar, sidebar, phone tab dock ─────── */
.s-orb { width: 30px; height: 30px; flex: none; border-radius: 99px; background: var(--brand); box-shadow: inset 0 -2px 6px rgba(0,0,0,.12), 0 4px 12px -4px rgba(255,94,98,.6); }
.s-topbar { position: sticky; top: calc(10px + env(safe-area-inset-top)); z-index: 10; display: flex; align-items: center; gap: 12px; height: 58px; margin: 12px 12px 0; padding: 0 10px 0 14px; border-radius: var(--r-pill); background: color-mix(in srgb, var(--card) 88%, transparent); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); box-shadow: var(--pill-shadow); }
.s-topbar-title { flex: 1; min-width: 0; font-size: 15px; font-weight: 600; }
.s-sidebar { width: 248px; margin: 12px 0 12px 12px; padding: 12px; border-radius: 22px; background: var(--card); box-shadow: var(--pill-shadow); }
.s-nav { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 12px; border-radius: var(--r-pill); color: var(--muted); font-size: 13px; transition: background .2s, color .2s, transform .2s; }
.s-nav:not(.is-on):hover { transform: translateX(2px); background: var(--hover); }
.s-nav.is-on { background: var(--ink); color: var(--bg); }
.s-nav-heading { padding: 0 12px; margin: 14px 0 4px; font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted2); }
.s-dock { position: fixed; left: 12px; right: 12px; bottom: calc(10px + env(safe-area-inset-bottom)); z-index: 20; display: flex; gap: 2px; padding: 6px; border-radius: var(--r-pill); background: color-mix(in srgb, var(--card) 90%, transparent); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); box-shadow: var(--pill-shadow); }
.s-dock > button { flex: 1; height: 52px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; border-radius: var(--r-pill); font-size: 10.5px; font-weight: 500; color: var(--muted); transition: background .2s, color .2s; }
.s-dock > button svg { width: 19px; height: 19px; }
.s-dock > button.is-on { background: var(--ink); color: var(--bg); }
.s-page { max-width: 1120px; margin: 0 auto; padding: 28px 16px calc(120px + env(safe-area-inset-bottom)); }
@media (min-width: 768px) { .s-page { padding: 32px 32px 48px; } .s-dock, .s-fab { display: none; } }

/* ── 11. motion ────────────────────────────────────────────────────── */
.s-rise { animation: s-rise .45s var(--ease) both; }
@keyframes s-rise { from { opacity: 0; transform: translateY(10px); } }
@keyframes s-pop { from { opacity: 0; transform: scale(.97); } }
@keyframes s-fade { from { opacity: 0; } }
@keyframes s-up { from { transform: translateY(100%); } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }