/* ============================================================================
   korren — pages.css
   The shared shell for SUBPAGES (everything that isn't index.html).
   Reuses the tokens in colors_and_type.css; reproduces the window chrome
   (fixed titlebar + status bar) so every page still reads as a korren
   window, and adds the article furniture the homepage doesn't need:
   prose rhythm, comparison tables, FAQ accordion, breadcrumbs.

   A subpage links colors_and_type.css THEN pages.css, preloads the two
   woff2s, and needs zero inline CSS and zero JS.
   ============================================================================ */

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0; background:var(--rail); color:var(--text);
  font-family:var(--font-mono); font-size:14px; letter-spacing:var(--ls-body);
  line-height:var(--lh-body); -webkit-font-smoothing:antialiased;
}
a{color:inherit; text-decoration:none;}
::selection{background:var(--jade-wash); color:var(--paper);}
:focus-visible{outline:2px solid var(--jade); outline-offset:2px; border-radius:var(--r-xs);}

.skip{
  position:fixed; left:16px; top:-48px; z-index:200;
  padding:8px 14px; background:var(--ink-2); border:1px solid var(--jade-lo);
  border-radius:var(--r-md); color:var(--paper); font-size:12px;
  transition:top var(--dur) var(--ease);
}
.skip:focus{top:44px;}

.cur{display:inline-block; width:.62em; height:1.05em; background:var(--jade); border-radius:2px; vertical-align:-0.16em;}

/* ── window chrome: titlebar (mirrors index.html) ─────────────────── */
.titlebar{
  position:fixed; top:0; left:0; right:0; z-index:60;
  height:34px; display:flex; align-items:center; gap:16px;
  background:var(--rail); border-bottom:1px solid var(--hair);
  padding:0 14px; font-size:12px; white-space:nowrap;
}
.traffic{display:flex; gap:8px; flex:0 0 auto;}
.traffic i{width:11px; height:11px; border-radius:50%; display:block;}
.traffic .r{background:#e0604a;} .traffic .y{background:#d8a13a;} .traffic .g{background:#54b06a;}
.tb-brand{display:flex; align-items:center; gap:8px; color:var(--paper); font-weight:600; font-size:13px; flex:0 0 auto;}
.tb-brand .cur{width:7px; height:14px;}
.tb-title{
  position:absolute; left:50%; transform:translateX(-50%);
  color:var(--mute); font-size:12px; overflow:hidden; max-width:40vw;
  text-overflow:ellipsis;
}
.tb-title b{color:var(--text); font-weight:500;}
.tb-right{margin-left:auto; display:flex; align-items:center; gap:10px; flex:0 0 auto;}
@media(max-width:960px){ .tb-title{display:none;} }

.btn{
  font-family:var(--font-mono); font-size:12px; letter-spacing:var(--ls-body); white-space:nowrap;
  display:inline-flex; align-items:center; gap:8px; cursor:pointer;
  padding:4px 11px; border-radius:var(--r-md); border:1px solid transparent;
  background:transparent; color:var(--text);
  transition:background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.btn-primary{background:var(--jade); color:var(--ink); font-weight:600;}
.btn-primary:hover{background:var(--jade-hi);}
.btn-ghost{border-color:var(--hair);}
.btn-ghost:hover{border-color:var(--jade-lo); color:var(--paper); background:var(--jade-wash-2);}

/* ── window chrome: status bar (mirrors index.html) ───────────────── */
.statusbar{
  position:fixed; bottom:0; left:0; right:0; z-index:60;
  height:28px; display:flex; align-items:center;
  background:var(--rail); border-top:1px solid var(--hair);
  padding:0 12px; font-size:11px; color:var(--mute-lo); letter-spacing:.3px;
  white-space:nowrap;
}
.statusbar .seg{padding:0 9px;}
.statusbar .seg.jade{color:var(--jade);}
.statusbar .right{margin-left:auto; display:flex; align-items:center;}
.statusbar .branch{color:var(--jade);}
@media(max-width:760px){ .statusbar .seg.opt{display:none;} }

/* ── the page body: one long command block ────────────────────────── */
.page{
  background:var(--ink); min-height:100vh;
  padding:34px 0 28px; /* clear the fixed chrome */
}
.wrap{max-width:860px; margin:0 auto; padding:0 22px;}

/* breadcrumb = the prompt line that "ran" this page */
.crumb{
  padding:34px 0 6px; font-size:12px; color:var(--mute-lo);
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
}
.crumb .ps1{color:var(--jade); font-weight:600;}
.crumb a{color:var(--mute);}
.crumb a:hover{color:var(--paper);}
.crumb .sep{color:var(--mute-lo);}

article h1{
  font-size:clamp(24px, 4.2vw, 34px); line-height:1.25; color:var(--paper);
  letter-spacing:-0.5px; font-weight:600; margin:10px 0 14px;
}
article .lede{font-size:15px; line-height:var(--lh-loose); color:var(--mute); max-width:64ch; margin:0 0 34px;}
article h2{
  font-size:19px; color:var(--paper); font-weight:600; letter-spacing:-0.2px;
  margin:44px 0 12px; padding-top:22px; border-top:1px solid var(--hair-2);
}
article h2 .hash{color:var(--jade); margin-right:8px; font-weight:600;}
article h3{font-size:14px; color:var(--paper); font-weight:600; margin:26px 0 8px;}
article p{max-width:70ch; margin:0 0 14px;}
article ul, article ol{max-width:70ch; padding-left:22px; margin:0 0 14px;}
article li{margin:0 0 7px;}
article li::marker{color:var(--jade);}
article strong{color:var(--paper); font-weight:600;}
article code{
  background:var(--ink-3); border:1px solid var(--hair-2); border-radius:var(--r-xs);
  padding:1px 6px; font-size:0.92em; color:var(--paper);
}
article .aside{
  border-left:2px solid var(--jade-lo); background:var(--jade-wash-2);
  padding:12px 16px; border-radius:0 var(--r-sm) var(--r-sm) 0;
  margin:0 0 14px; max-width:70ch; color:var(--mute); font-size:13px;
}
article .aside strong{color:var(--paper);}

/* keycap pills, e.g. ctrl+shift+enter */
.kbd{
  display:inline-block; padding:1px 7px; border-radius:var(--r-xs);
  background:var(--ink-3); border:1px solid var(--hair); border-bottom-width:2px;
  font-size:11px; color:var(--paper);
}

/* ── comparison table ─────────────────────────────────────────────── */
.tablewrap{overflow-x:auto; margin:0 0 14px; border:1px solid var(--hair); border-radius:var(--r-lg);}
table.cmp{border-collapse:collapse; width:100%; font-size:12.5px; min-width:640px;}
table.cmp caption{
  text-align:left; padding:12px 16px; font-size:11px; letter-spacing:var(--ls-label);
  text-transform:uppercase; color:var(--mute-lo); background:var(--ink-2);
}
table.cmp th, table.cmp td{
  text-align:left; padding:9px 14px; border-top:1px solid var(--hair-2);
  vertical-align:top;
}
table.cmp thead th{
  background:var(--ink-2); color:var(--mute); font-weight:500; font-size:11px;
  letter-spacing:var(--ls-label); text-transform:uppercase; border-top:none;
}
table.cmp tbody th{color:var(--paper); font-weight:600; white-space:nowrap;}
table.cmp .ok{color:var(--status-ok);}
table.cmp .no{color:var(--status-fail);}
table.cmp .part{color:var(--status-warn);}
table.cmp tr.hl{background:var(--jade-wash-2);}
table.cmp tr.hl tbody th{color:var(--jade-hi);}

/* ── FAQ accordion (native details, mirrors homepage) ─────────────── */
.faq{border:1px solid var(--hair); border-radius:var(--r-lg); overflow:hidden; margin:0 0 14px;}
.faq details{border-top:1px solid var(--hair-2);}
.faq details:first-child{border-top:none;}
.faq summary{
  cursor:pointer; list-style:none; display:flex; align-items:baseline; gap:10px;
  padding:13px 16px; color:var(--paper); font-size:13px; font-weight:500;
  transition:background var(--dur-fast) var(--ease);
}
.faq summary:hover{background:var(--jade-wash-2);}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::before{content:"▸"; color:var(--jade); transition:transform var(--dur-fast) var(--ease);}
.faq details[open] summary::before{transform:rotate(90deg);}
.faq .a{padding:0 16px 14px 34px; color:var(--mute); font-size:13px; max-width:70ch;}
.faq .a p{margin:0 0 8px;}

/* ── cta block + footer strip ─────────────────────────────────────── */
.cta{
  margin:44px 0 0; padding:22px; border:1px solid var(--jade-lo);
  border-radius:var(--r-lg); background:var(--jade-wash-2);
  display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
}
.cta p{margin:0; color:var(--paper); font-size:13px;}
.cta .sub{color:var(--mute); font-size:12px; margin-top:3px;}
.pagefoot{
  margin-top:44px; padding:22px 0 34px; border-top:1px solid var(--hair-2);
  display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap;
  font-size:11px; color:var(--mute-lo); letter-spacing:.3px;
}
.pagefoot a{color:var(--mute);}
.pagefoot a:hover{color:var(--paper);}