/* ZenMode OS · brand book (Parts I and II)
   Fonts: Clash Display (brand), Geist (system, via Google Fonts), Departure Mono (numbers).
   Every colour, size, space and curve below is a token from /assets/v2/v2.css (src/v2/tokens.json). */

@font-face{font-family:"Departure Mono";src:url("../assets/fonts/DepartureMono-Regular.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Clash Display";src:url("../assets/fonts/ClashDisplay-Medium.otf") format("opentype");font-weight:500;font-display:swap}
@font-face{font-family:"Clash Display";src:url("../assets/fonts/ClashDisplay-Semibold.otf") format("opentype");font-weight:600;font-display:swap}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--f-sys);-webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:var(--f-brand);font-weight:500;margin:0;letter-spacing:-0.03em}
p{margin:0}
img{max-width:100%}
a{color:var(--brand);text-decoration:none;transition:color var(--t-1) var(--ease-calm)}
a:hover{color:var(--text)}
section{scroll-margin-top:84px}
button{font:inherit}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

@keyframes zm-pulse{0%,100%{opacity:.3;transform:scale(1)}50%{opacity:1;transform:scale(1.4)}}

/* ---------- section shells: one column, one gutter, one rhythm ---------- */
.book-sec{max-width:var(--l-column);margin:0 auto;padding:var(--l-section) var(--l-gutter) 0}
.book-sec-sm{padding-top:var(--l-section-sm)}
.book-band{margin-top:var(--l-section);background:var(--night);color:var(--night-text);padding:var(--l-section) var(--l-gutter)}
.book-band-deep{background:var(--night-2)}
.book-in{max-width:var(--l-column);margin:0 auto}
.book-foot{background:var(--night);color:var(--night-text);padding:var(--l-section-sm) var(--l-gutter) var(--l-section)}
.book-foot-links{display:flex;flex-wrap:wrap;gap:var(--s-3) var(--s-6);margin:var(--s-6) 0 0}
.book-foot-links a{color:var(--night-text-2)}
.book-foot-links a:hover{color:var(--night-brand)}

/* ---------- header ---------- */
.book-nav{max-width:var(--l-column);margin:0 auto;padding:var(--s-4) var(--l-gutter);display:flex;align-items:center;flex-wrap:wrap;gap:var(--s-3) var(--s-6)}
.book-brand{display:flex;align-items:center;gap:var(--s-3);color:var(--text);flex:none}
.book-brand .bk-mark{width:24px;height:24px;display:block}
.book-wordmark{font-family:var(--f-brand);font-weight:500;font-size:1rem;letter-spacing:-0.02em;white-space:nowrap}
.book-ver{color:var(--brand-on);background:var(--brand);padding:var(--s-1) var(--s-2);border-radius:var(--r-sm)}
.nav-links-group{display:flex;align-items:center;gap:var(--s-2) var(--s-6);color:var(--muted)}
.nav-link{color:var(--muted);white-space:nowrap;transition:color var(--t-1) var(--ease-calm)}
.nav-link:hover{color:var(--text)}
.nav-link-accent:hover{color:var(--brand)}

/* ---------- pill buttons ---------- */
.btn-primary{display:inline-block;color:var(--bg);background:var(--text);border-radius:var(--r-full);text-decoration:none;transition:transform var(--t-1) var(--ease-calm),background-color var(--t-1) var(--ease-calm),color var(--t-1) var(--ease-calm)}
.btn-primary:hover{background:var(--brand);color:var(--brand-on)}
.btn-primary:active{transform:scale(0.96)}
.btn-outline{display:inline-block;color:var(--text);border-radius:var(--r-full);box-shadow:inset 0 0 0 1px var(--outline);text-decoration:none;transition:box-shadow var(--t-1) var(--ease-calm),color var(--t-1) var(--ease-calm),transform var(--t-1) var(--ease-calm)}
.btn-outline:hover{box-shadow:inset 0 0 0 1px var(--brand);color:var(--brand)}
.btn-outline:active{transform:scale(0.96)}
.nav-cta{font-size:var(--fs-caption);font-weight:500;padding:var(--s-2) var(--s-4);white-space:nowrap;flex:none}
.btn-md{font-size:var(--fs-body-sm);font-weight:500;padding:var(--s-4) var(--s-6);white-space:nowrap}
.btn-lg{font-size:var(--fs-body);font-weight:500;padding:var(--s-4) var(--s-8)}

/* ---------- the left rail ---------- */
.zm-rail{display:none;position:fixed;left:14px;top:50%;transform:translateY(-50%);z-index:40;width:120px;padding:var(--s-3) var(--s-3);border-radius:var(--r-lg);background:rgba(250,249,245,0.97);background:color-mix(in oklch, var(--surface) 97%, transparent);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:inset 0 0 0 1px var(--hair),var(--sh-ink)}
@media (min-width:1520px) and (min-height:560px){.zm-rail{display:block}}
.rail-link{display:flex;gap:7px;font-family:var(--f-num);font-variant-numeric:tabular-nums;font-size:10px;letter-spacing:0.02em;color:var(--text-2);padding:var(--s-1) 6px;border-radius:var(--r-sm);text-decoration:none;transition:background-color var(--t-1) var(--ease-calm),color var(--t-1) var(--ease-calm)}
.rail-link:hover{background:var(--sunk);color:var(--text)}
.rail-link .num{color:var(--brand)}
.rail-link.is-active{color:var(--brand-strong);font-weight:700;background:var(--brand-tint)}

/* ---------- grids: columns live here, so the phone needs no override ---------- */
.g2,.g2b,.g2c,.g2d,.g2e,.g3,.g4,.g5,.sidebar,.icon-grid{grid-template-columns:var(--cols,1fr)}
.sidebar>.sidebar-aside{position:sticky;top:var(--s-24)}
.logo-panel{min-height:100%}
.book-badge{display:grid;place-items:center;width:22px;height:22px;border-radius:var(--r-full);line-height:1;flex:none}
.next-card{border-radius:var(--r-2xl);padding:var(--s-16);background:linear-gradient(var(--surface),var(--sunk));box-shadow:var(--sh-panel);text-align:center}

/* ---------- the Android scale table (documents the app's sp scale, so its specimen sizes are literal) ---------- */
.scale-row{display:grid;grid-template-columns:1.5fr .9fr .62fr .62fr .8fr 1.3fr;gap:var(--s-4);padding:var(--s-5) var(--s-6);border-top:1px solid var(--hair-2);align-items:baseline}
.scale-head{padding:var(--s-4) var(--s-6);background:var(--sunk);color:var(--text-3);border-top:0}
.scale-row .num{font-size:.8125rem}
.scale-fam{font-size:.875rem;color:var(--text-2)}
.scale-use{font-size:.875rem;color:var(--text-3)}
.scale-table>div{min-width:640px}

/* ---------- phones and small tablets ---------- */
@media (max-width:860px){
  .book-nav{gap:var(--s-3) var(--s-3);padding-top:var(--s-3);padding-bottom:var(--s-3)}
  .nav-links-group{display:none}
  .nav-cta{font-size:.75rem;padding:var(--s-2) var(--s-4)}
  .next-card{padding:var(--s-10) var(--s-6)}
  .g2,.g2b,.g2c,.g2d,.g2e,.g3,.sidebar{grid-template-columns:1fr}
  .sidebar>.sidebar-aside{position:static}
  .logo-panel{min-height:auto}
  .g4,.g5{grid-template-columns:repeat(2,1fr)}
  .icon-grid{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:420px){
  .g4,.g5{grid-template-columns:1fr 1fr}
  .icon-grid{grid-template-columns:repeat(3,1fr)}
}