/* Retro Build — clean reference stylesheet
   Quiet, readable, document-like. No decoration for its own sake. */

:root{
  --bg:#fbfbfa;
  --surface:#ffffff;
  --ink:#23262b;
  --soft:#5a616b;
  --faint:#8a909a;
  --line:#e4e6e9;
  --line-strong:#d2d5da;
  --accent:#3a6ea5;
  --accent-soft:#eef3f8;
  --ok:#2f7d4f;
  --wait:#9a6b16;
  --code-bg:#f4f5f6;
}

*{box-sizing:border-box}

html{scroll-behavior:smooth}

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:18.5px;
  line-height:1.72;
  -webkit-font-smoothing:antialiased;
}

/* ---------- top bar ---------- */
.bar{
  border-bottom:1px solid var(--line);
  background:var(--surface);
  position:sticky;top:0;z-index:10;
}
.bar .inner{
  max-width:820px;margin:0 auto;padding:13px 24px;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
}
.bar a.home{color:var(--accent);text-decoration:none;font-weight:600;font-size:.95rem}
.bar a.home:hover{text-decoration:underline}
.bar .crumbs{color:var(--faint);font-size:.9rem}
.bar .crumbs b{color:var(--soft);font-weight:600}

/* ---------- layout ---------- */
.wrap{max-width:820px;margin:0 auto;padding:8px 24px 80px}

/* ---------- page header ---------- */
.page-head{padding:40px 0 8px;border-bottom:1px solid var(--line);margin-bottom:8px}
.page-head .eyebrow{
  text-transform:uppercase;letter-spacing:.08em;font-size:.75rem;
  color:var(--accent);font-weight:600;margin:0 0 8px;
}
.page-head h1{font-size:2rem;line-height:1.2;margin:0;font-weight:700;letter-spacing:-.01em}
.page-head .sub{color:var(--soft);font-size:1.05rem;margin:10px 0 0}
.page-head .meta{color:var(--faint);font-size:.95rem;margin:6px 0 0}

/* ---------- sections ---------- */
section.block{margin:36px 0 0}
section.block > h2{
  font-size:1.15rem;font-weight:700;margin:0 0 4px;letter-spacing:-.01em;
  padding-bottom:8px;border-bottom:1px solid var(--line);
}
section.block > .lead{color:var(--soft);font-size:.98rem;margin:10px 0 16px}

/* ---------- prose ---------- */
.prose p{margin:0 0 16px}
.prose p:last-child{margin-bottom:0}
.prose strong{font-weight:650;color:var(--ink)}
.prose a{color:var(--accent);text-decoration:none}
.prose a:hover{text-decoration:underline}

/* ---------- definition rows (specs) ---------- */
.specs{width:100%;border-collapse:collapse;margin-top:4px}
.specs tr{border-bottom:1px solid var(--line)}
.specs tr:last-child{border-bottom:0}
.specs th{
  text-align:left;vertical-align:top;width:170px;
  padding:11px 16px 11px 0;font-weight:600;color:var(--soft);font-size:.92rem;
}
.specs td{padding:11px 0;vertical-align:top}
.specs td small{color:var(--faint);display:block;margin-top:2px;font-size:.88rem}

/* ---------- nav list (OS / apps) ---------- */
.nav-list{list-style:none;margin:0;padding:0;border:1px solid var(--line);border-radius:8px;overflow:hidden;background:var(--surface)}
.nav-list li{border-bottom:1px solid var(--line)}
.nav-list li:last-child{border-bottom:0}
.nav-list a{
  display:flex;align-items:center;gap:14px;
  padding:15px 18px;text-decoration:none;color:var(--ink);
}
.nav-list a:hover{background:var(--accent-soft)}
.nav-list .t{flex:1}
.nav-list .t b{display:block;font-weight:650;font-size:1.02rem}
.nav-list .t span{color:var(--soft);font-size:.9rem}
.nav-list .arrow{color:var(--faint)}

/* status pills */
.pill{
  font-size:.72rem;font-weight:600;letter-spacing:.03em;text-transform:uppercase;
  padding:3px 9px;border-radius:20px;white-space:nowrap;border:1px solid currentColor;
}
.pill.ok{color:var(--ok)}
.pill.wait{color:var(--wait)}
.pill.dec{color:var(--accent)}

/* ---------- bulleted notes ---------- */
ul.notes{list-style:none;margin:0;padding:0}
ul.notes li{padding:12px 0 12px 22px;position:relative;border-bottom:1px solid var(--line)}
ul.notes li:last-child{border-bottom:0}
ul.notes li::before{content:"";position:absolute;left:4px;top:20px;width:6px;height:6px;border-radius:50%;background:var(--accent)}
ul.notes b{font-weight:650}

/* ---------- callout ---------- */
.callout{
  background:var(--accent-soft);border:1px solid #d8e3ef;border-left:3px solid var(--accent);
  border-radius:0 6px 6px 0;padding:14px 18px;margin:18px 0;
}
.callout .label{font-weight:700;font-size:.78rem;text-transform:uppercase;letter-spacing:.05em;color:var(--accent);margin:0 0 4px}
.callout p{margin:0;color:var(--ink)}

/* ---------- code ---------- */
code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;background:var(--code-bg);padding:1px 6px;border-radius:4px;font-size:.9em;color:#37474f}
pre{background:var(--code-bg);border:1px solid var(--line);border-radius:6px;padding:14px 16px;overflow-x:auto;margin:14px 0}
pre code{background:none;padding:0;font-size:.88rem;line-height:1.55;color:#2b3137}

/* ---------- footer ---------- */
.foot{margin-top:54px;padding-top:20px;border-top:1px solid var(--line);color:var(--faint);font-size:.9rem}
.foot a{color:var(--accent);text-decoration:none}
.foot a:hover{text-decoration:underline}

/* ---------- cards (apps) ---------- */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;margin-top:4px}
.card{display:block;text-decoration:none;color:var(--ink);border:1px solid var(--line);border-radius:8px;padding:18px;background:var(--surface)}
.card:hover{border-color:var(--line-strong);background:var(--accent-soft)}
.card b{display:block;font-weight:650;font-size:1.02rem;margin-bottom:4px}
.card span{color:var(--soft);font-size:.9rem}

@media(max-width:560px){
  body{font-size:16px}
  .specs th{width:auto;display:block;padding-bottom:2px}
  .specs td{display:block;padding-top:2px;padding-bottom:12px}
  .page-head h1{font-size:1.6rem}
}