/* Shared black-and-white wireframe kit for the mobile-skeletons demo.
   Greyscale only, on purpose — structure & navigation, not visual design. */
:root {
  --ink: #111; --line: #c9c9c9; --line-2: #e2e2e2; --fill: #ededed;
  --fill-2: #f6f6f6; --muted: #8a8a8a; --bg: #fafafa;
}
* { box-sizing: border-box; }
body { margin: 0; font-family: system-ui, -apple-system, sans-serif; color: var(--ink); background: var(--bg); }
a { color: inherit; }

/* ---- Page chrome ---- */
.topbar { max-width: 1200px; margin: 0 auto; padding: 22px 24px 6px; }
.topbar .back { font-size: .8rem; color: var(--muted); text-decoration: none; }
.topbar .back:hover { color: var(--ink); }
h1 { margin: 8px 0 4px; font-size: 1.4rem; }
h2 { font-size: 1.05rem; margin: 0 0 2px; }
.sub { color: var(--muted); font-size: .9rem; max-width: 74ch; }
.nav-summary { font-size:.72rem; color:var(--ink); margin:6px 0 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.draft { display:inline-block; margin-top:10px; padding:4px 10px; font-size:.72rem;
  border:1px solid var(--line); border-radius:6px; color:var(--muted); }
.signature { max-width:1200px; margin:14px auto 0; padding:0 24px; }
.signature .tag { display:inline-block; font-size:.66rem; text-transform:uppercase; letter-spacing:.06em;
  color:var(--muted); border:1px solid var(--line); border-radius:999px; padding:3px 9px; margin-bottom:6px; }
.signature p { margin:0; font-size:.86rem; color:var(--ink); max-width:74ch; }

/* ---- Feature legend (landing) ---- */
.legend { max-width: 1200px; margin: 18px auto 0; padding: 0 24px;
  display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.bucket { border: 1px solid var(--line-2); border-radius: 10px; padding: 12px 14px; background: #fff; }
.bucket h3 { margin: 0 0 2px; font-size: .8rem; text-transform: uppercase; letter-spacing: .05em; }
.bucket .model { font-size:.7rem; color:var(--muted); font-style:italic; display:block; margin-bottom:7px; }
.bucket .chip { display:inline-block; font-size:.71rem; color:var(--ink); background:var(--fill);
  border-radius: 6px; padding: 3px 7px; margin: 0 4px 4px 0; }
.bucket.util { background: var(--fill-2); }

/* ---- Approach cards (landing) ---- */
.approaches { max-width: 1200px; margin: 22px auto 0; padding: 0 24px 64px;
  display: grid; gap: 22px; grid-template-columns: repeat(auto-fit, minmax(334px, 1fr)); justify-items: center; }
/* width = 300px phone + 16px padding + 1px border on each side (border-box) so the
   preview phone fits with symmetric padding instead of overflowing the right edge. */
.acard { width: 334px; display:block; text-decoration:none; color:inherit;
  border:1px solid var(--line-2); border-radius:16px; padding:16px; background:#fff;
  transition: border-color .15s, transform .15s, box-shadow .15s; }
.acard:hover { border-color: var(--ink); transform: translateY(-3px); box-shadow:0 12px 28px rgba(0,0,0,.08); }
.acard .explore { display:flex; align-items:center; justify-content:space-between;
  margin-top:12px; font-size:.82rem; font-weight:600; }
.acard .explore .arrow { font-size:1.05rem; }

/* ---- Flow filmstrip (approach pages) ---- */
.film { max-width: 1200px; margin: 6px auto 0; padding: 16px 24px 72px;
  display: flex; flex-wrap: wrap; gap: 30px; align-items: flex-start; }
.step { width: 300px; }
.cap { display:flex; align-items:baseline; gap:8px; margin: 0 0 10px; }
.cap .num { font-size:.66rem; font-family: ui-monospace, Menlo, monospace; color:#fff;
  background:var(--ink); border-radius:999px; padding:2px 8px; }
.cap .name { font-weight:600; font-size:.9rem; }
.cap .note { display:block; font-size:.74rem; color:var(--muted); margin-top:2px; }
.step .cap-wrap { min-height: 3.4em; }

/* ---- Phone frame ---- */
.phone { width: 300px; height: 600px; border: 2px solid var(--ink); border-radius: 34px;
  background: #fff; padding: 11px; position: relative; box-shadow: 0 10px 30px rgba(0,0,0,.06); }
.phone::before { content:""; position:absolute; top:11px; left:50%; transform:translateX(-50%);
  width: 96px; height: 17px; background: var(--ink); border-radius: 0 0 12px 12px; z-index: 4; }
.screen { height: 100%; border: 1px solid var(--line-2); border-radius: 24px; overflow: hidden;
  display: flex; flex-direction: column; position: relative; }

/* ---- Wireframe primitives ---- */
.box { background: var(--fill); border-radius: 6px; }
.box-2 { background: var(--fill-2); border: 1px solid var(--line-2); border-radius: 10px; }
.circle { background: var(--fill); border-radius: 50%; }
.pill { background: var(--fill); border-radius: 999px; }
.t { font-size: .78rem; line-height: 1.25; }
.t-sm { font-size: .66rem; color: var(--muted); }
.t-bold { font-weight: 600; }
.label { font-size: .62rem; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.stat { font-size:.62rem; font-family: ui-monospace, Menlo, monospace; color: var(--ink);
  background: var(--fill); border-radius: 5px; padding: 2px 6px; white-space:nowrap; }

.pad { padding: 13px; }
.row { display: flex; align-items: center; gap: 10px; }
.col { display: flex; flex-direction: column; gap: 8px; }
.grow { flex: 1; }
.scroll { overflow: hidden; }
.statusbar { height: 22px; flex: none; }
.sec-h { display:flex; align-items:center; justify-content:space-between; margin: 4px 0 2px; }
.title { font-size:1.02rem; font-weight:600; }

/* Tab bar */
.tabbar { margin-top: auto; border-top: 1px solid var(--line-2); display: flex; padding: 8px 4px 7px; gap:2px; flex:none; }
.tab { flex:1; display:flex; flex-direction:column; align-items:center; gap:5px; }
.tab .ico { width: 21px; height: 21px; border-radius: 6px; background: var(--fill); }
.tab.active .ico { background: var(--ink); }
.tab .lbl { font-size:.56rem; color: var(--muted); }
.tab.active .lbl { color: var(--ink); font-weight:600; }
.tab.start { justify-content:flex-start; }
.tab.start .ico { width:44px; height:44px; border-radius:50%; background:var(--ink); margin-top:-15px;
  display:flex; align-items:center; justify-content:center; box-shadow:0 4px 10px rgba(0,0,0,.18); }
.tab.start .ico::after { content:"+"; color:#fff; font-size:23px; line-height:1; }

/* Lists & tiles */
.list { display: flex; flex-direction: column; gap: 10px; }
.listcard { display:flex; gap:10px; align-items:center; padding:11px; }
.listcard .thumb { width: 42px; height: 42px; flex:none; }
.tiles { display:grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.tile { display:flex; flex-direction:column; gap:6px; padding:11px; }
.tile .thumb { width: 100%; aspect-ratio: 1/1; }

/* Controls */
.segs { display:flex; gap:6px; background: var(--fill-2); border:1px solid var(--line-2);
  border-radius: 999px; padding: 3px; }
.seg { flex:1; text-align:center; padding: 8px 0; border-radius: 999px; font-size:.76rem; color: var(--muted); }
.seg.active { background: var(--ink); color: #fff; font-weight:600; }
.filter { display:flex; gap:6px; overflow:hidden; }
.fpill { font-size:.68rem; padding:5px 11px; border-radius:999px; background:var(--fill-2);
  border:1px solid var(--line-2); color:var(--muted); white-space:nowrap; }
.fpill.active { background:var(--fill); border-color:var(--line); color:var(--ink); }

/* Hero / CTA / buttons */
.hero { padding:14px; display:flex; flex-direction:column; gap:8px; border-radius:14px; }
.btn { align-self:flex-start; font-size:.74rem; padding:8px 16px; border-radius:8px; background: var(--ink); color:#fff; }
.btn-ghost { background:#fff; color:var(--ink); border:1px solid var(--line); }
.btn-wide { align-self:stretch; text-align:center; }

/* Stat cards + trend bars */
.stats { display:flex; gap:8px; }
.statcard { flex:1; border:1px solid var(--line-2); border-radius:10px; padding:10px 9px;
  display:flex; flex-direction:column; gap:3px; background:#fff; }
.statcard .big { font-size:1.15rem; font-weight:700; font-family: ui-monospace, Menlo, monospace; }
.bars { display:flex; align-items:flex-end; gap:6px; height:62px; padding-top:4px; }
.bar { flex:1; background:var(--fill); border-radius:4px 4px 0 0; }

/* Video / media placeholder */
.videobox { width:100%; aspect-ratio:16/9; background:var(--fill); border-radius:10px;
  display:flex; align-items:center; justify-content:center; }
.videobox::after { content:""; border-style:solid; border-width:11px 0 11px 18px;
  border-color:transparent transparent transparent var(--muted); }

/* Score entry counters */
.counters { display:grid; grid-template-columns: repeat(3,1fr); gap:8px; }
.counter { border:1px solid var(--line-2); border-radius:10px; padding:9px 6px; text-align:center; background:#fff; }
.counter .z { font-size:.66rem; color:var(--muted); }
.counter .v { font-size:1.25rem; font-weight:700; font-family: ui-monospace, Menlo, monospace; }
.bigtimer { font-size:2.1rem; font-weight:700; font-family: ui-monospace, Menlo, monospace; text-align:center; }

/* Bottom sheet (action-hub) */
.dim { position:absolute; inset:0; background:rgba(0,0,0,.28); z-index:5; border-radius:24px; }
.sheet { position:absolute; left:0; right:0; bottom:0; z-index:6; background:#fff;
  border-radius:18px 18px 24px 24px; border-top:1px solid var(--line-2); padding:12px 14px 18px;
  display:flex; flex-direction:column; gap:10px; box-shadow:0 -8px 24px rgba(0,0,0,.12); }
.sheet .handle { width:40px; height:4px; border-radius:999px; background:var(--line); align-self:center; margin-bottom:4px; }
.sheet .opt { display:flex; align-items:center; gap:11px; padding:11px; border:1px solid var(--line-2); border-radius:12px; }
.sheet .opt .ico { width:34px; height:34px; border-radius:9px; background:var(--fill); flex:none; }

/* Key-value rows (detail screens) */
.kv { display:flex; justify-content:space-between; font-size:.74rem; padding:6px 0; border-bottom:1px solid var(--line-2); }
.kv:last-child { border-bottom:0; }
.kv .k { color:var(--muted); }