/* OpenWith wireframe system: tokens + components (ui-system.md). Shared by index.html and mvp.html. */
/* ---------- Tokens: neverpost family (Tailwind slate + one sky accent), 4pt spacing ---------- */
:root {
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px;
  --r-control: 999px; /* buttons, inputs, badges, toggles (neverpost: rounded-full) */
  --r: 12px;          /* cards, tiles, art, toasts (rounded-xl) */
  --r-sheet: 16px;    /* bottom-sheet top corners (rounded-t-2xl) */
  --font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;

  --bg: #ffffff; --surface: #f8fafc; --surface-2: #f1f5f9; --fg: #0f172a; --muted: #64748b;
  --line: #e2e8f0; --line-strong: #cbd5e1;
  --accent: #0284c7; --accent-soft: #f0f9ff; --accent-line: #bae6fd; --ring: rgba(56, 189, 248, .6);
  --primary-bg: #0f172a; --primary-fg: #ffffff;
  --ok: #15803d; --ok-soft: #f0fdf4; --warn: #b45309; --warn-soft: #fffbeb; --bad: #b91c1c; --bad-soft: #fef2f2;
  --dim: rgba(15, 23, 42, .32);
  --wash: linear-gradient(180deg, rgba(56, 189, 248, .08) 0%, rgba(56, 189, 248, 0) 100%);
  --shadow: 0 1px 2px rgba(15, 23, 42, .06), 0 8px 24px rgba(15, 23, 42, .08);
  --a0: #e0f2fe; --a1: #e2e8f0; --a2: #bae6fd; --a3: #cbd5e1; --a4: #7dd3fc; --a5: #f1f5f9;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #020617; --surface: #0f172a; --surface-2: rgba(30, 41, 59, .6); --fg: #f1f5f9; --muted: #94a3b8;
    --line: #1e293b; --line-strong: #334155;
    --accent: #38bdf8; --accent-soft: rgba(56, 189, 248, .06); --accent-line: rgba(56, 189, 248, .3);
    --primary-bg: #f1f5f9; --primary-fg: #0f172a;
    --ok: #4ade80; --ok-soft: rgba(74, 222, 128, .08); --warn: #fbbf24; --warn-soft: rgba(251, 191, 36, .08); --bad: #f87171; --bad-soft: rgba(248, 113, 113, .08);
    --dim: rgba(0, 0, 0, .56);
    --wash: linear-gradient(180deg, rgba(56, 189, 248, .07) 0%, rgba(56, 189, 248, 0) 100%);
    --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px rgba(0, 0, 0, .4);
    --a0: #0c4a6e; --a1: #1e293b; --a2: #075985; --a3: #334155; --a4: #082f49; --a5: #475569;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #020617; --surface: #0f172a; --surface-2: rgba(30, 41, 59, .6); --fg: #f1f5f9; --muted: #94a3b8;
  --line: #1e293b; --line-strong: #334155;
  --accent: #38bdf8; --accent-soft: rgba(56, 189, 248, .06); --accent-line: rgba(56, 189, 248, .3);
  --primary-bg: #f1f5f9; --primary-fg: #0f172a;
  --ok: #4ade80; --ok-soft: rgba(74, 222, 128, .08); --warn: #fbbf24; --warn-soft: rgba(251, 191, 36, .08); --bad: #f87171; --bad-soft: rgba(248, 113, 113, .08);
  --dim: rgba(0, 0, 0, .56);
  --wash: linear-gradient(180deg, rgba(56, 189, 248, .07) 0%, rgba(56, 189, 248, 0) 100%);
  --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px rgba(0, 0, 0, .4);
  --a0: #0c4a6e; --a1: #1e293b; --a2: #075985; --a3: #334155; --a4: #082f49; --a5: #475569;
  color-scheme: dark;
}

/* ---------- Type ramp: 12/16 · 14/20 · 16/24 · 20/28 · 28/34 ---------- */
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--fg); font: 400 16px/24px var(--font); -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4, p { margin: 0; }
.h-xl { font: 600 28px/34px var(--font); letter-spacing: -0.01em; }
.h-lg { font: 600 20px/28px var(--font); }
.h-md { font: 600 16px/24px var(--font); }
.t-sm { font-size: 14px; line-height: 20px; }
.t-xs { font-size: 12px; line-height: 16px; }
.strong { font-weight: 500; }
.muted { color: var(--muted); }
.center { text-align: center; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
a { color: var(--accent); }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }

/* ---------- Canvas ---------- */
.canvas-head { background: var(--wash); }
.wrap { max-width: 1680px; margin: 0 auto; padding: var(--s7) var(--s5) var(--s6); }
.canvas-head .stack { max-width: 640px; }
.grid { max-width: 1680px; margin: 0 auto; padding: 0 var(--s5) var(--s8); display: grid; gap: var(--s7) var(--s6); grid-template-columns: repeat(auto-fill, minmax(min(375px, 100%), 1fr)); }
.frame { display: flex; flex-direction: column; gap: var(--s4); scroll-margin-top: var(--s5); }
.cap { display: flex; flex-direction: column; gap: var(--s1); min-height: 96px; max-width: 375px; }
.frame.flash .phone { outline: 2px solid var(--accent); outline-offset: 4px; transition: outline-color 1.6s; }
.seg { align-self: flex-start; display: inline-flex; gap: var(--s1); padding: var(--s1); border: 1px solid var(--line); border-radius: var(--r-control); background: var(--bg); }
.seg button { border: 0; background: none; padding: var(--s1) var(--s3); border-radius: var(--r-control); font-size: 14px; line-height: 20px; cursor: pointer; color: var(--muted); }
.seg button[aria-pressed="true"] { background: var(--surface-2); color: var(--fg); font-weight: 500; }

/* Device chrome (not a component; radius is the device's) */
.phone { position: relative; width: 100%; max-width: 375px; height: 780px; border: 1px solid var(--line); border-radius: 40px; overflow: hidden; background: var(--bg); box-shadow: var(--shadow); }
.screen { position: absolute; inset: 0; display: flex; flex-direction: column; }
.status { flex: none; height: 44px; display: flex; align-items: center; justify-content: space-between; padding: 0 var(--s6); font: 500 14px/20px var(--font); }
.scroll { flex: 1; overflow-y: auto; overscroll-behavior: contain; }
.wash { background: var(--wash); }
.pad { padding: 0 var(--s4); }
.stack { display: flex; flex-direction: column; gap: var(--s3); }
.stack-lg { display: flex; flex-direction: column; gap: var(--s5); }
.appbar { display: flex; align-items: center; justify-content: space-between; gap: var(--s2); min-height: 56px; padding: var(--s2) var(--s4); }
.divider { height: 1px; background: var(--line); }

/* ---------- Components ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--s2); height: 48px; padding: 0 var(--s5); border-radius: var(--r-control); border: 1px solid transparent; font: 500 16px/24px var(--font); cursor: pointer; text-decoration: none; white-space: nowrap; transition: background-color .15s, border-color .15s, opacity .15s; }
.btn:disabled { opacity: .48; cursor: default; }
.btn-primary { background: var(--primary-bg); color: var(--primary-fg); }
.btn-primary:not(:disabled):hover { opacity: .92; }
.btn-secondary { background: var(--surface-2); color: var(--fg); border-color: var(--line-strong); }
.btn-secondary:not(:disabled):hover { background: var(--line); }
.btn-ghost { background: none; color: var(--accent); }
.btn-ghost:hover { background: var(--accent-soft); }
.btn-sm { height: 32px; padding: 0 var(--s3); font-size: 14px; line-height: 20px; }
.btn-block { width: 100%; }
.icon-btn { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: 0; border-radius: var(--r-control); background: none; cursor: pointer; color: var(--fg); }
.icon-btn:hover { background: var(--surface); }
.link-btn { border: 0; background: none; padding: 0; color: var(--accent); cursor: pointer; font-size: 14px; line-height: 20px; }
.spinner { width: 16px; height: 16px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: spin .7s linear infinite; flex: none; }
@keyframes spin { to { transform: rotate(360deg); } }

.card { border: 1px solid var(--line); border-radius: var(--r); background: var(--bg); overflow: hidden; }
.field { width: 100%; height: 48px; padding: 0 var(--s4); border: 1px solid var(--line); border-radius: var(--r-control); background: var(--bg); color: var(--fg); font: 400 16px/24px var(--font); }
.field:focus { outline: none; border-color: var(--ring); box-shadow: 0 0 0 1px var(--ring); }
.field-row { display: flex; gap: var(--s2); align-items: center; }
.field-row .btn { height: 48px; }
.error { color: var(--bad); }

.badge { display: inline-flex; align-items: center; gap: var(--s1); height: 20px; padding: 0 var(--s2); border-radius: var(--r-control); background: var(--surface-2); color: var(--muted); font: 500 12px/16px var(--font); white-space: nowrap; flex: none; }
.badge.ok { background: var(--ok-soft); color: var(--ok); }
.badge.warn { background: var(--warn-soft); color: var(--warn); }
.badge.bad { background: var(--bad-soft); color: var(--bad); }
.badge.accent { background: var(--accent-soft); color: var(--accent); }

.art { flex: none; border-radius: var(--r); background: var(--art, var(--surface)); }
.mosaic { flex: none; display: grid; grid-template-columns: 1fr 1fr; border-radius: var(--r); overflow: hidden; background: var(--surface); }
.mosaic i { background: var(--art); }
.mosaic.wide { grid-template-columns: repeat(4, 1fr); border-radius: 0; }

.skeleton { background: var(--surface); border-radius: var(--r); animation: pulse 1.2s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .55; } }
.progress { height: 4px; border-radius: var(--r-control); background: var(--surface); overflow: hidden; }
.progress > div { height: 100%; background: var(--accent); transition: width .15s; }

/* Rows */
.row { display: flex; align-items: center; gap: var(--s3); width: 100%; min-height: 64px; padding: var(--s2) var(--s4); border: 0; background: var(--bg); text-align: left; cursor: pointer; }
.row:hover { background: var(--surface); }
.row.static { cursor: default; }
.row.static:hover { background: var(--bg); }
.meta { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.meta .t { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.meta .a { display: flex; align-items: center; gap: var(--s2); font-size: 14px; line-height: 20px; color: var(--muted); white-space: nowrap; overflow: hidden; }
.meta .a span:first-child { overflow: hidden; text-overflow: ellipsis; }
.row.playing .t { color: var(--accent); }
.row.dim .t, .row.dim .art { opacity: .48; }
.row.dragging { box-shadow: var(--shadow); position: relative; z-index: 1; }
.handle { touch-action: none; cursor: grab; color: var(--muted); }
.num { width: 24px; flex: none; color: var(--muted); font-size: 14px; line-height: 20px; text-align: right; }
.dur { flex: none; color: var(--muted); font-size: 14px; line-height: 20px; font-variant-numeric: tabular-nums; }
.choice { display: flex; align-items: center; gap: var(--s4); width: 100%; padding: var(--s4); border: 1px solid var(--line); border-radius: var(--r); background: var(--bg); text-align: left; cursor: pointer; transition: background-color .15s; }
.choice:not(:disabled):hover { background: var(--surface); }
.choice:disabled { cursor: default; }
.tile { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: var(--r); background: var(--accent-soft); border: 1px solid var(--accent-line); color: var(--accent); }
.opt { display: flex; align-items: center; gap: var(--s3); width: 100%; padding: var(--s3) var(--s4); border: 0; border-top: 1px solid var(--line); background: var(--bg); text-align: left; cursor: pointer; }
.opt:first-child { border-top: 0; }
.opt:hover { background: var(--surface); }
.opt .end { color: var(--muted); display: inline-flex; }
.opt[aria-pressed="true"] .end { color: var(--accent); }
.mark { flex: none; display: block; }
.wordmark { font: 600 16px/24px var(--font); }
.wordmark b { font-weight: 600; color: var(--accent); }
.check-circle { width: 56px; height: 56px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--ok-soft); color: var(--ok); }

/* Bottom sheets — ui-system "Bottom sheets & layering" */
.sheet-overlay { position: absolute; inset: 0; z-index: 30; display: flex; align-items: flex-end; background: var(--dim); animation: fade .2s ease-out; }
.sheet { width: 100%; max-height: 88%; display: flex; flex-direction: column; background: var(--bg); border-top: 1px solid var(--line); border-radius: var(--r-sheet) var(--r-sheet) 0 0; padding: 0 var(--s4) calc(var(--s4) + env(safe-area-inset-bottom)); animation: up .24s cubic-bezier(.2, .8, .2, 1); }
.grab { width: 36px; height: 4px; border-radius: var(--r-control); background: var(--line); margin: var(--s2) auto var(--s1); flex: none; }
.sheet-head { display: flex; align-items: center; justify-content: space-between; min-height: 48px; flex: none; }
.sheet-body { overflow-y: auto; padding-bottom: var(--s1); }
.sheet .row { padding-left: 0; padding-right: 0; }
.sheet-foot { flex: none; padding-top: var(--s3); border-top: 1px solid var(--line); margin-top: var(--s3); display: flex; flex-direction: column; gap: var(--s2); }
@keyframes fade { from { opacity: 0; } }
@keyframes up { from { transform: translateY(24px); opacity: 0; } }

.toast { position: absolute; left: var(--s4); right: var(--s4); bottom: var(--s4); z-index: 40; padding: var(--s3) var(--s4); border-radius: var(--r); background: var(--fg); color: var(--bg); font-size: 14px; line-height: 20px; box-shadow: var(--shadow); animation: up .2s ease-out; }
.mini { flex: none; display: flex; align-items: center; gap: var(--s3); padding: var(--s2) var(--s4) var(--s5); border-top: 1px solid var(--line); background: var(--bg); }
.mini[hidden], [hidden] { display: none !important; }
.urlbar { flex: none; display: flex; align-items: center; justify-content: center; gap: var(--s1); margin: 0 var(--s4) var(--s2); height: 36px; border-radius: var(--r-control); background: var(--surface); font-size: 14px; line-height: 20px; color: var(--muted); }
.banner { display: flex; align-items: center; gap: var(--s3); padding: var(--s3) var(--s4); border-bottom: 1px solid var(--line); }
.acc { display: flex; align-items: center; justify-content: space-between; width: 100%; height: 48px; padding: 0; border: 0; background: none; cursor: pointer; font-weight: 500; }
.acc svg { transition: transform .2s; color: var(--muted); }
.acc[aria-expanded="true"] svg { transform: rotate(180deg); }
.actions { display: flex; gap: var(--s2); }
.actions .btn { flex: 1; }

.avatar { flex: none; width: 40px; height: 40px; border-radius: var(--r-control); background: var(--surface-2); border: 1px solid var(--line); display: inline-flex; align-items: center; justify-content: center; font-weight: 500; font-size: 14px; color: var(--fg); }
.avatar.icon { color: var(--accent); background: var(--accent-soft); border-color: var(--accent-line); }
.cap .seg { margin-top: var(--s2); }
.source { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--s4); padding: var(--s5); background: var(--surface); }
.app-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s3); padding: var(--s2) 0 var(--s3); }
.app-grid button { display: flex; flex-direction: column; align-items: center; gap: var(--s2); border: 0; background: none; cursor: pointer; font-size: 12px; line-height: 16px; color: var(--fg); }
.app-grid .ico { width: 56px; height: 56px; border-radius: var(--r); display: inline-flex; align-items: center; justify-content: center; background: var(--surface-2); border: 1px solid var(--line); }
.bubble { max-width: 80%; padding: var(--s2) var(--s3); border-radius: var(--r); background: var(--surface-2); font-size: 14px; line-height: 20px; }
.linkcard { max-width: 80%; border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; background: var(--bg); text-align: left; cursor: pointer; padding: 0; }
.linkchip { display: flex; align-items: center; gap: var(--s2); padding: var(--s3); border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); font-size: 14px; line-height: 20px; color: var(--muted); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.notice { padding: var(--s3); border-radius: var(--r); font-size: 14px; line-height: 20px; }
.notice.warn { background: var(--warn-soft); color: var(--warn); }
.notice.info { background: var(--accent-soft); display: flex; gap: var(--s2); align-items: flex-start; }
.notice.info > svg { flex: none; color: var(--accent); }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }
@media (max-width: 420px) { .wrap, .grid { padding-left: var(--s4); padding-right: var(--s4); } .phone { height: 720px; } }

/* Album grid + album screen (MVP M3/M4; used by wireframes/mvp.html and the /l page) */
.albums { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s4); padding: 0 var(--s4) var(--s4); }
.album { min-width: 0; position: relative; display: flex; flex-direction: column; gap: var(--s2); border: 0; padding: 0; background: none; text-align: left; cursor: pointer; color: inherit; }
.cover { position: relative; aspect-ratio: 1; border-radius: var(--r); background: var(--art); display: flex; align-items: center; justify-content: center; color: var(--muted); }
.albums > .cover { align-self: start; }
.album .t { font-weight: 500; font-size: 14px; line-height: 20px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.album .a { font-size: 12px; line-height: 16px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tile-play { position: absolute; right: var(--s2); bottom: var(--s2); width: 44px; height: 44px; border-radius: var(--r-control); border: 0; background: var(--primary-bg); color: var(--primary-fg); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: var(--shadow); }
.cover.placeholder { background: var(--art, var(--a1)); }
.cover img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; display: block; }
.cover[style*="width"] { aspect-ratio: auto; flex: none; }
.media-head { display: flex; gap: var(--s4); align-items: center; } /* album screen + full player: cover left, names right */
.media-head .stack { gap: var(--s1); min-width: 0; }
.clamp-2, .clamp-3 { display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.clamp-2 { -webkit-line-clamp: 2; }
.clamp-3 { -webkit-line-clamp: 3; }

/* Player (MVP M5) */
.transport { display: flex; align-items: center; justify-content: center; gap: var(--s5); }
.transport .icon-btn { width: 64px; height: 64px; }
.transport .big { width: 80px; height: 80px; background: var(--primary-bg); color: var(--primary-fg); }
.transport .big:hover { background: var(--primary-bg); opacity: .92; }
.transport .icon-btn { font-size: 28px; }
.transport .big { font-size: 24px; }
.player { gap: var(--s4); }
/* Art shrinks with the screen height so title, slider and controls fit without scrolling (owner: iPhone + desktop). */
.player .appbar { min-height: 48px; padding: 0; }
.transport .icon-btn svg, .tile-play svg { display: block; }
.tile-play svg { margin-left: 2px; } /* optical centre of the play triangle */
.btn.back { padding-left: var(--s1); gap: var(--s1); max-width: 70%; } /* a long album name truncates, like iOS back titles */
.btn.back span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.btn.back svg { flex: none; }
.tile-play { box-shadow: 0 0 0 2px rgba(255, 255, 255, .85), var(--shadow); } /* stays visible on dark covers */
.scrub { display: flex; flex-direction: column; gap: var(--s1); }
.scrub .times { display: flex; justify-content: space-between; font-size: 12px; line-height: 16px; color: var(--muted); font-variant-numeric: tabular-nums; }
.scrub input[type="range"] { width: 100%; height: 44px; margin: 0; accent-color: var(--accent); cursor: pointer; } /* 44 pt touch target */
.scrub input[type="range"]:disabled { cursor: default; opacity: .48; }

/* Library: count line with the list/tiles switch */
.count-bar { display: flex; align-items: center; justify-content: space-between; }
.cover-skel { width: 48px; height: 48px; flex: none; }
.line-skel { height: 12px; width: 60%; }
.line-skel.short { width: 40%; }