/* ============ HUB — shared page/component styles ============ */
/* Extracted from index.html so the dashboard and its sub-pages share one stylesheet. */

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--margin)}

/* ============ BACK LINK (sub-pages) ============ */
.backlink{display:inline-flex;align-items:center;gap:6px;font-family:var(--font-mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft);text-decoration:none;padding:26px 0 14px;transition:color .15s}
.backlink:hover{color:var(--ink)}
.backlink .x{font-size:13px}

/* ============ HEAD ============ */
.head{margin-bottom:56px;display:grid;grid-template-columns:1.4fr 1fr;gap:48px;align-items:end}
.head h1{font-family:var(--font-display);font-weight:500;font-size:clamp(48px,7vw,118px);line-height:.88;letter-spacing:-.045em}
.head h1 em{font-style:normal;color:var(--ink-soft)}
.head .lede{font-size:16px;line-height:1.5;color:var(--ink-muted);max-width:440px}
.head .lede strong{color:var(--ink);font-weight:600}
.head .lede a{border-bottom:1px solid currentColor;color:var(--ink)}
.head .meta{font-family:var(--font-mono);font-size:11px;letter-spacing:.08em;color:var(--ink-soft);text-transform:uppercase;margin-bottom:14px;display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.head .meta .sep{opacity:.4}
@media (max-width:860px){.head{grid-template-columns:1fr;gap:24px}}

/* ============ SUMMARY STATS ============ */
.summary{display:grid;grid-template-columns:repeat(6,1fr);gap:1px;background:var(--hairline);border:1px solid var(--hairline);margin-bottom:64px}
.stat{background:var(--canvas);padding:22px 22px 18px;position:relative;min-width:0}
.stat .n{font-family:var(--font-display);font-weight:500;font-size:42px;line-height:1;letter-spacing:-.025em}
.stat .l{font-family:var(--font-mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-muted);margin-top:10px;display:flex;align-items:center;gap:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stat .l::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--ink-soft);flex:none}
.stat[data-key="current"] .l::before{background:var(--accent-green)}
.stat[data-key="mirror"] .l::before{background:var(--ink-soft)}
.stat[data-key="lab"] .l::before{background:var(--ink-muted)}
.stat[data-key="frozen"] .l::before{background:var(--ink-muted)}
.stat[data-key="wip"] .l::before{background:var(--accent-amber)}
.stat[data-key="total"] .l::before{background:var(--ink-soft)}
@media (max-width:860px){.summary{grid-template-columns:repeat(3,1fr)}}
@media (max-width:480px){.summary{grid-template-columns:repeat(2,1fr)}}

/* ============ DASHBOARD NAV CARDS ============ */
.nav-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--hairline);border:1px solid var(--hairline);margin-bottom:24px}
@media (max-width:860px){.nav-cards{grid-template-columns:1fr 1fr}}
@media (max-width:480px){.nav-cards{grid-template-columns:1fr}}
.nav-card{background:var(--canvas);padding:26px 24px;display:flex;flex-direction:column;gap:10px;text-decoration:none;color:inherit;transition:background .15s;min-width:0;min-height:150px}
.nav-card:hover{background:var(--ghost)}
.nav-card .idx{font-family:var(--font-mono);font-size:11px;letter-spacing:.12em;color:var(--ink-soft)}
.nav-card h3{font-family:var(--font-display);font-weight:500;font-size:26px;letter-spacing:-.02em;color:var(--ink);margin:0}
.nav-card p{font-size:13px;line-height:1.45;color:var(--ink-muted);margin:0}
.nav-card .go{margin-top:auto;font-family:var(--font-mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft);display:flex;align-items:center;gap:6px}
.nav-card:hover .go{color:var(--ink)}

/* ============ VERSION ROWS ============ */
.rows{}
.row{display:grid;grid-template-columns:52px minmax(176px,1.05fr) 76px minmax(200px,2.1fr) minmax(248px,1.2fr);gap:14px 18px;align-items:start;padding:18px 0;border-bottom:1px solid var(--ghost);min-height:64px;color:inherit;text-decoration:none;transition:background .15s}
a.row:hover{background:var(--ghost)}
.row:last-child{border-bottom:none}
.row.heading{padding:10px 0;border-bottom:1px solid var(--hairline);font-family:var(--font-mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft);min-height:0;align-items:center}
.row .v{font-family:var(--font-display);font-weight:500;font-size:18px;letter-spacing:-.01em;padding-top:2px}
.row-label{display:flex;flex-direction:column;align-items:flex-start;gap:8px;min-width:0}
.row-label .pill{max-width:100%}
.row-label .codename{font-family:var(--font-mono);font-size:12px;font-weight:500;color:var(--ink);letter-spacing:.06em;line-height:1.35;white-space:normal}
.row .meta-cell{font-family:var(--font-mono);font-size:11px;color:var(--ink-soft);letter-spacing:.04em;white-space:nowrap;padding-top:4px}
.row .note{font-family:var(--font-body);font-size:13px;color:var(--ink-muted);line-height:1.45;min-width:0;padding-top:2px}
.row.dim{opacity:.72}
.row.dim .v{color:var(--ink-muted)}
.row.primary{background:linear-gradient(90deg,rgba(73,247,165,.11),transparent 58%);box-shadow:inset 3px 0 0 var(--accent-green-ink)}
.row.primary:hover{background:linear-gradient(90deg,rgba(73,247,165,.16),var(--ghost) 58%)}
.row.primary .v{color:var(--ink);font-size:19px}
.row.mirror{background:var(--ghost)}
.row.mirror:hover{background:rgba(0,0,0,.04)}
.row.lab{opacity:.88}
.row.proposed{background:linear-gradient(90deg,rgba(255,179,0,.05),transparent 60%)}
.row.proposed:hover{background:linear-gradient(90deg,rgba(255,179,0,.09),var(--ghost) 60%)}
@media (max-width:980px){
  .row{grid-template-columns:52px 1fr;gap:8px 12px;padding:16px 0}
  .row .v{font-size:16px}
  .row .meta-cell{grid-column:2}
  .row .note,.row .launch-cell{grid-column:1/-1}
  .row.heading{display:none}
}

/* ============ LAUNCH BUTTONS ============ */
.launch-cell{display:flex;flex-direction:column;gap:8px;align-items:stretch;min-width:0;width:100%}
.launch-btn{display:flex;align-items:center;gap:10px;font-family:var(--font-mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;padding:9px 14px;border:1px solid var(--hairline-strong);border-radius:12px;color:var(--ink);background:var(--canvas);cursor:pointer;transition:background .15s, color .15s, border-color .15s;text-decoration:none;width:100%;justify-content:space-between;min-height:40px;line-height:1.3}
.launch-btn .label{flex:1;min-width:0;text-align:left}
.launch-btn:hover{background:var(--ink);color:var(--canvas);border-color:var(--ink)}
.launch-btn .icon{opacity:.7;font-size:11px;flex-shrink:0}
.launch-btn .arrow{margin-left:8px;opacity:.55;flex-shrink:0}
.launch-btn:hover .arrow{opacity:1}
.launch-btn.frozen{color:var(--ink-muted);border-color:var(--hairline)}
.launch-btn.store{border-color:var(--accent-green-ink);color:var(--accent-green-ink)}
.launch-btn.store:hover{background:var(--accent-green-ink);color:var(--inverse-ink);border-color:var(--accent-green-ink)}
.launch-btn-primary{background:rgba(73,247,165,.08);border-color:var(--accent-green-ink);font-weight:600}
.launch-btn.copy-cmd.copy-ok{background:rgba(73,247,165,.22);color:var(--accent-green-ink);border-color:var(--accent-green-ink)}
.launch-btn.disabled{opacity:.45;pointer-events:none;border-style:dashed}

/* ============ iOS QUICK START ============ */
.ios-quick{margin-bottom:24px;border:1px solid var(--accent-green-ink);background:linear-gradient(135deg,rgba(73,247,165,.09),transparent 55%);padding:24px 28px;display:grid;grid-template-columns:1fr auto;gap:20px 28px;align-items:center}
.ios-quick .copy{margin:0}
@media (max-width:760px){.ios-quick{grid-template-columns:1fr}}
.ios-quick h4{font-family:var(--font-display);font-size:22px;margin:0 0 6px;letter-spacing:-.02em}
.ios-quick p{font-size:13px;color:var(--ink-muted);margin:0 0 12px;line-height:1.5;max-width:520px}
.ios-quick .cap{font-family:var(--font-mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-green-ink);margin-bottom:8px}

/* ============ FEATURE MATRIX ============ */
.matrix-wrap{overflow-x:auto;margin-top:24px;max-width:100%}
.matrix{width:100%;border-collapse:collapse;font-family:var(--font-body);font-size:12.5px;min-width:760px;table-layout:auto}
.matrix th,.matrix td{padding:10px 12px;text-align:left;border-bottom:1px solid var(--ghost);vertical-align:middle}
.matrix thead th{font-family:var(--font-mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft);font-weight:500;border-bottom:1px solid var(--hairline);background:var(--canvas)}
.matrix tbody th{font-weight:500;color:var(--ink);text-align:left;width:34%;background:var(--canvas)}
.matrix td{text-align:center;font-family:var(--font-mono);font-size:11px;letter-spacing:.04em;color:var(--ink-soft);width:11%}
.matrix td.y{color:var(--ink)}
.matrix td.p{color:#a98300}
.matrix td.x{color:var(--ink-soft);opacity:.45}
.matrix td.wip{color:#a98300}
.matrix tr.group td,.matrix tr.group th{background:var(--canvas-warm);color:var(--ink);font-family:var(--font-mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;border-bottom:1px solid var(--hairline)}
.matrix tbody tr:hover td,.matrix tbody tr:hover th{background:var(--ghost)}
.matrix .col-current{background:rgba(73,247,165,.08)}
.matrix .col-mirror{background:rgba(0,0,0,.025)}
.matrix .col-proposed{background:rgba(255,59,48,.04)}

/* ============ TRACKS (product cards) ============ */
.tracks{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--hairline);border:1px solid var(--hairline);margin-top:24px}
.tracks.two{grid-template-columns:1fr 1fr}
@media (max-width:1100px){.tracks{grid-template-columns:1fr 1fr}}
@media (max-width:860px){.tracks,.tracks.two{grid-template-columns:1fr}}
.track{background:var(--surface-1);padding:36px;min-height:340px;display:flex;flex-direction:column;gap:18px;position:relative;transition:background .2s;min-width:0;overflow:hidden}
.track:hover{background:var(--surface-2)}
.track.dark{background:var(--surface-dark);color:var(--inverse-ink)}
.track.dark:hover{background:#1f1f1f}
.track .cap{font-family:var(--font-mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft)}
.track.dark .cap{color:#9a9a9a}
.track h3{font-family:var(--font-display);font-weight:500;font-size:42px;line-height:.95;letter-spacing:-.025em}
.track .desc{font-size:14.5px;line-height:1.5;color:var(--ink-muted);max-width:420px}
.track.dark .desc{color:#bdbdbd}
.track .specs{margin-top:auto;display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--hairline)}
.track.dark .specs{background:rgba(255,255,255,.08)}
.track .specs > div{background:var(--surface-1);padding:12px 14px;font-family:var(--font-mono);font-size:11px;letter-spacing:.04em;color:var(--ink-muted);min-width:0;overflow:hidden}
.track.dark .specs > div{background:var(--surface-dark);color:#9a9a9a}
.track .specs > div b{display:block;color:var(--ink);font-weight:500;margin-top:4px;letter-spacing:0;font-family:var(--font-body);font-size:13px;text-transform:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.track.dark .specs > div b{color:var(--inverse-ink)}
.track .links{display:flex;flex-wrap:wrap;gap:8px}
.track .links a, .track .links span{font-family:var(--font-mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;padding:6px 12px;border:1px solid var(--hairline-strong);border-radius:999px;color:var(--ink);transition:background .15s, color .15s}
.track .links a:hover{background:var(--ink);color:var(--canvas)}
.track.dark .links a, .track.dark .links span{color:var(--inverse-ink);border-color:rgba(255,255,255,.24)}
.track.dark .links a:hover{background:var(--inverse-ink);color:var(--inverse-canvas)}
.track .apple-badge{position:absolute;top:20px;right:20px;display:inline-flex;align-items:center;gap:6px;font-family:var(--font-mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;padding:5px 10px;border-radius:999px;background:rgba(73,247,165,.18);color:var(--accent-green-ink);border:1px solid rgba(73,247,165,.4)}
.track.dark .apple-badge{background:rgba(73,247,165,.18);color:var(--accent-green);border-color:rgba(73,247,165,.4)}

/* ============ LINK GRID (docs) ============ */
.link-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--hairline);border:1px solid var(--hairline);margin-top:24px}
@media (max-width:860px){.link-grid{grid-template-columns:repeat(2,1fr)}}
.link-grid a{background:var(--canvas);padding:24px;display:flex;flex-direction:column;gap:8px;transition:background .15s, color .15s;min-width:0}
.link-grid a:hover{background:var(--ghost)}
.link-grid a .cap{font-family:var(--font-mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft)}
.link-grid a .label{font-family:var(--font-display);font-weight:500;font-size:22px;letter-spacing:-.015em;color:var(--ink)}
.link-grid a .sub{font-family:var(--font-body);font-size:12.5px;color:var(--ink-muted);line-height:1.4}

/* ============ RUN COMMANDS ============ */
.run{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--hairline);border:1px solid var(--hairline);margin-top:24px}
@media (max-width:860px){.run{grid-template-columns:1fr}}
.run-block{background:var(--canvas);padding:28px;min-width:0;overflow:hidden}
.run-block .cap{font-family:var(--font-mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:8px}
.run-block h4{font-family:var(--font-display);font-weight:500;font-size:24px;letter-spacing:-.015em;margin-bottom:6px}
.run-block p{font-size:13px;color:var(--ink-muted);line-height:1.5;margin-bottom:14px}
.run-block p code{font-family:var(--font-mono);font-size:11.5px;padding:1px 5px;background:var(--surface-1);color:var(--ink);border-radius:3px}
.cmd{display:flex;align-items:stretch;min-width:0}
.cmd pre{flex:1 1 0;min-width:0;margin:0;padding:11px 14px;border:1px solid var(--hairline-strong);border-right:none;background:var(--surface-1);font-family:var(--font-mono);font-size:11.5px;color:var(--ink);overflow-x:auto;white-space:pre}
.cmd button{flex:none;padding:0 14px;border:1px solid var(--hairline-strong);border-left:none;background:var(--surface-1);color:var(--ink);font-family:var(--font-mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;cursor:pointer;transition:background .15s, color .15s}
.cmd button:hover{background:var(--ink);color:var(--canvas)}
.cmd button.ok{background:rgba(73,247,165,.25);color:var(--accent-green-ink);border-color:var(--accent-green-ink)}
.cmd + .cmd{margin-top:8px}