/* ============================================================================
   WINDOWS 98, AFTER DARK — page layouts
   ----------------------------------------------------------------------------
   Depends on theme.css. Two pages live here:

     A. LANDING   one Explorer window — about pane, detail list, footer
     B. ARTICLE   article window, prose, code, callouts, figures, tables, nav
     C. MEDIA QUERIES  (shared, at the bottom — one place to reason about)

   Both pages use the same .reader shell and a single .win, so they share
   every breakpoint below.
   ========================================================================== */


/* ==========================================================================
   A. LANDING PAGE
   ========================================================================== */

/* ---- explorer window ---- */
.explorer-body{
  display:grid; grid-template-columns:minmax(0,.92fr) 2px minmax(0,1.55fr);
  background:var(--well); min-height:300px;
}
.split{ border-left:1px solid var(--bev-dark); border-right:1px solid var(--bev-light) }

/* the about blurb, living in Explorer's "web view" info pane */
.about{
  padding:26px 24px 28px;
  background:linear-gradient(158deg, rgba(46,199,187,.115), transparent 58%);
  display:flex; flex-direction:column; gap:18px;
}
.ab-top{ display:flex; align-items:center; gap:14px }
.ab-icon{
  flex:0 0 auto; width:44px; height:44px; display:block;
  filter:drop-shadow(0 3px 5px rgba(0,0,0,.6));
}
.ab-name{
  margin-top:5px;
  font:700 var(--t-7)/1.1 var(--font-read); letter-spacing:-.02em; color:#f4f8fd;
}
.ab-lead{ font:var(--t-5)/1.74 var(--font-read); color:var(--ink-2); max-width:46ch }
.ab-lead strong{ color:var(--ink); font-weight:700 }
.ab-lead em{ color:var(--link); font-style:normal; font-weight:700 }

/* the detail list — Explorer's column view */
.filepane{ display:flex; flex-direction:column; min-width:0 }
/* The header and the rows MUST share one grid definition, and all spacing has
   to come from cell padding rather than grid-gap. A 10px gap plus 10px of
   container padding on .row that .listhead did not have was eating 64px out of
   the flexible Name column, which shifted Type / Read / Modified left of their
   own labels. If you touch these columns, change them in one place only. */
.listhead,
.row{
  display:grid;
  grid-template-columns:26px minmax(0,1fr) 92px 72px 104px;
}
.hcell{
  -webkit-appearance:none; appearance:none;
  display:flex; align-items:center; gap:5px; min-height:28px; padding:6px 9px;
  font:700 var(--t-2)/1 var(--font-ui); color:var(--ink-2); text-align:left; cursor:pointer;
  background:linear-gradient(180deg,var(--face-hi),var(--face-lo));
  border:1px solid;
  border-color:var(--bev-hilite) var(--bev-dark) var(--bev-dark) var(--bev-hilite);
  transition:background .14s ease, color .14s ease;
}
.hcell:hover{ background:linear-gradient(180deg,#3f454f,#2b2f36); color:#fff }
.hcell:active{
  border-color:var(--bev-shadow) var(--bev-hilite) var(--bev-hilite) var(--bev-shadow);
  padding:7px 8px 5px 10px;
}
.hcell .arrow{ margin-left:auto; font-size:9px; color:var(--accent); opacity:0 }
.hcell.sort-asc .arrow,.hcell.sort-desc .arrow{ opacity:1 }
.hcell.sort-desc .arrow{ transform:rotate(180deg) }
.hspacer{
  background:linear-gradient(180deg,var(--face-hi),var(--face-lo));
  border:1px solid;
  border-color:var(--bev-hilite) var(--bev-dark) var(--bev-dark) var(--bev-hilite);
}

.filelist{ display:flex; flex-direction:column }
.row{
  align-items:center; min-height:56px;
  text-decoration:none; color:var(--ink);
  transition:background .13s ease, color .13s ease;
}
/* 9px matches .hcell's own padding, so values sit under their labels */
.row .c-name,
.row .c-type,
.row .c-read,
.row .c-date{ padding:10px 9px }
.row:nth-child(even){ background:rgba(255,255,255,.024) }
.row:hover{ background:var(--sel); color:var(--sel-ink) }
.row:hover .c-type,.row:hover .c-read,.row:hover .c-date{ color:#cfeff5 }
.row:hover .rt{ text-decoration:underline; text-underline-offset:3px }
.row:focus-visible{ background:var(--sel); color:var(--sel-ink); outline-offset:-3px }
.row:focus-visible .c-type,.row:focus-visible .c-read,.row:focus-visible .c-date{ color:#cfeff5 }

.c-icon{ width:22px; height:22px; display:block; margin:0 auto }
.c-name{ min-width:0 }
.rt{ font:700 var(--t-4)/1.3 var(--font-read); letter-spacing:-.006em; overflow-wrap:anywhere }
.c-meta{ display:contents }
/* left-aligned to sit under the left-aligned column headers */
.c-type{ font:var(--t-3)/1.2 var(--font-mono); color:var(--ink-3) }
.c-read{ font:var(--t-3)/1.2 var(--font-mono); color:var(--ink-3) }
.c-date{ font:var(--t-3)/1.2 var(--font-mono); color:var(--ink-3); white-space:nowrap }

/* sits under the window, matched to its width */
.deskfoot{
  position:relative; z-index:1; max-width:1080px; margin:26px auto 0;
  padding:0 4px; display:flex; flex-wrap:wrap; gap:10px; justify-content:center;
  font:var(--t-2)/1.6 var(--font-mono); color:var(--ink-dim); letter-spacing:.02em;
}
.deskfoot .sep{ color:#4b525d }


/* ==========================================================================
   B. ARTICLE PAGE
   ========================================================================== */

/* transparent — .wallpaper (theme.css) paints the background behind it */
.reader{
  position:relative; z-index:1;
  padding:26px 34px 30px;
  min-height:calc(100vh - var(--tb) - 10px);
}
/* windows open at a comfortable reading width; maximize goes full-bleed.
   The .reader prefix is load-bearing — without it this loses to
   `.reader .win` on source order and the maximize button does nothing. */
.reader .win{ max-width:1080px }
.reader .win.is-max{ max-width:none }

/* ---- article header block ---- */
.doc{ background:var(--well); padding:0 }
.doc-head{
  padding:38px 44px 30px;
  background:
    linear-gradient(152deg, rgba(46,199,187,.10), transparent 54%),
    linear-gradient(180deg, var(--well), var(--well-2));
  border-bottom:1px solid var(--bev-dark);
  box-shadow:0 1px 0 var(--bev-light);
}
.doc-head h1{
  font:700 clamp(26px,3.4vw,42px)/1.14 var(--font-read);
  letter-spacing:-.026em; color:#f2f5fa; max-width:22ch;
  text-shadow:0 2px 0 rgba(0,0,0,.5);
}
/* ---- prose ---- */
.prose{
  padding:36px 44px 44px;
  max-width:none;
  font:var(--t-5)/1.85 var(--font-read);
  color:var(--ink-2);
}
.prose > *{ max-width:68ch }
.prose > p{ margin-bottom:1.35em }
.prose strong{ color:var(--ink); font-weight:700 }
.prose em{ font-style:italic }

.prose a{
  color:var(--link); text-decoration:underline;
  text-decoration-thickness:1px; text-underline-offset:3px;
  transition:color .14s ease, background .14s ease;
}
.prose a:hover{ background:var(--sel); color:var(--sel-ink); text-decoration-color:transparent }
.prose a:visited{ color:var(--link-visited) }

.prose h2{
  margin:2.4em 0 .1em;
  font:700 clamp(20px,2.1vw,26px)/1.25 var(--font-read);
  letter-spacing:-.02em; color:#eef2f8;
}
.prose h2 + .h-rule{
  height:2px; max-width:68ch; margin:0 0 1.1em;
  border-top:1px solid var(--bev-dark); border-bottom:1px solid var(--bev-light);
}
.prose h3{
  margin:2em 0 .55em;
  font:700 var(--t-6)/1.3 var(--font-read); letter-spacing:-.012em; color:#e4e9f1;
}
.prose h2:first-child,.prose h3:first-child{ margin-top:0 }

.prose ul,.prose ol{ margin:0 0 1.35em; padding-left:0; list-style:none }
.prose ul > li,.prose ol > li{ position:relative; padding-left:30px; margin-bottom:.6em }
.prose ul > li::before{
  content:""; position:absolute; left:8px; top:.72em;
  width:7px; height:7px; background:var(--accent);
  box-shadow:0 0 0 1px var(--bev-dark);
}
/* numbered steps get a beveled chip, like a toolbar button */
.prose ol{ counter-reset:step }
.prose ol > li{ counter-increment:step; padding-left:42px; margin-bottom:.85em }
.prose ol > li::before{
  content:counter(step); position:absolute; left:0; top:.18em;
  display:grid; place-items:center; width:26px; height:22px;
  font:700 var(--t-2)/1 var(--font-ui); color:var(--accent);
  background:linear-gradient(180deg,var(--face-hi),var(--face-lo));
  border:1px solid;
  border-color:var(--bev-light) var(--bev-dark) var(--bev-dark) var(--bev-light);
  box-shadow:var(--sh-out);
}

/* ---- inline code ---- */
.prose code{
  font:.86em/1.5 var(--font-mono);
  padding:2px 5px; color:var(--link);
  background:var(--well-2);
  border:1px solid;
  border-color:var(--bev-shadow) var(--bev-light) var(--bev-light) var(--bev-shadow);
  overflow-wrap:anywhere;
}

/* ---- code block: a sunken well with its own mini title bar ---- */
.code{
  max-width:none; margin:0 0 1.6em;
  background:var(--face);
  border:1px solid;
  border-color:var(--bev-light) var(--bev-dark) var(--bev-dark) var(--bev-light);
  box-shadow:var(--sh-out);
}
.code-bar{
  display:flex; align-items:center; gap:8px;
  padding:4px 8px; margin:2px;
  background:linear-gradient(90deg,#1a1d24,#2b313a);
  font:700 var(--t-2)/1.3 var(--font-ui); color:#dbe2ea;
}
.code-bar svg{ flex:0 0 auto; width:14px; height:14px }
.code-bar .fname{ flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.code-bar .lang{
  flex:0 0 auto; font:700 var(--t-1)/1 var(--font-ui);
  text-transform:uppercase; letter-spacing:.14em; color:var(--accent);
}
.code pre{
  margin:0 2px 2px; padding:16px 18px;
  background:var(--well-2);
  border:1px solid;
  border-color:var(--bev-shadow) var(--bev-hilite) var(--bev-hilite) var(--bev-shadow);
  overflow-x:auto;                 /* the block scrolls, never the page */
  -webkit-overflow-scrolling:touch;
}
.code pre code{
  display:block; padding:0; border:0; background:none;
  font:13px/1.75 var(--font-mono); color:#dbe2ea;
  white-space:pre; overflow-wrap:normal;
}

/* syntax spans — hand-rolled, no highlighter */
.k{ color:var(--syn-kw) }            /* keyword          */
.s{ color:var(--syn-str) }           /* string           */
.n{ color:var(--syn-num) }           /* number           */
.c{ color:var(--syn-com); font-style:italic }  /* comment */
.f{ color:var(--syn-fn) }            /* function         */
.t{ color:var(--syn-cls) }           /* class / type     */
.o{ color:var(--syn-op) }            /* operator         */

/* ---- callout: a Win98 message box, inline ---- */
.callout{
  max-width:68ch; margin:0 0 1.6em;
  background:var(--face);
  border:1px solid;
  border-color:var(--bev-light) var(--bev-dark) var(--bev-dark) var(--bev-light);
  box-shadow:var(--sh-out);
}
.callout .titlebar{ padding:4px 4px 4px 7px }
.callout-body{ display:flex; gap:16px; padding:18px 18px 20px; align-items:flex-start }
.callout-icon{
  flex:0 0 32px; width:32px; height:32px; display:grid; place-items:center;
  border-radius:50%; background:linear-gradient(180deg,#12707d,#062229);
  box-shadow:0 0 0 1px var(--bev-dark), inset 0 1px 0 rgba(255,255,255,.22);
  font:700 20px/1 var(--font-read); color:#eafcff;
}
.callout-body p{ font:var(--t-4)/1.72 var(--font-read); color:var(--ink-2) }
.callout-body p + p{ margin-top:.8em }
.callout--warn .callout-icon{ background:linear-gradient(180deg,#a8791a,#3a2a06); color:#fff5dd }

/* ---- figure ---- */
.fig{ max-width:68ch; margin:0 0 1.7em }
.fig-frame{
  padding:20px; background:var(--well-2);
  border:1px solid;
  border-color:var(--bev-shadow) var(--bev-hilite) var(--bev-hilite) var(--bev-shadow);
}
.fig-frame svg{ display:block; width:100%; height:auto }
.fig figcaption{
  margin-top:9px; padding-left:2px;
  font:var(--t-2)/1.6 var(--font-mono); color:var(--ink-dim); letter-spacing:.02em;
}
.fig figcaption b{ color:var(--ink-3); font-weight:400 }

/* ---- table: Explorer's detail view ---- */
.table-wrap{
  max-width:68ch; margin:0 0 1.7em;
  overflow-x:auto;                 /* wide tables scroll inside themselves */
  -webkit-overflow-scrolling:touch;
  background:var(--well-2);
  border:1px solid;
  border-color:var(--bev-shadow) var(--bev-hilite) var(--bev-hilite) var(--bev-shadow);
}
.prose table{ width:100%; border-collapse:collapse; min-width:420px }
.prose th{
  position:sticky; top:0;
  padding:8px 12px; text-align:left; white-space:nowrap;
  font:700 var(--t-2)/1.3 var(--font-ui); color:var(--ink-2);
  background:linear-gradient(180deg,var(--face-hi),var(--face-lo));
  border:1px solid;
  border-color:var(--bev-hilite) var(--bev-dark) var(--bev-dark) var(--bev-hilite);
}
.prose td{
  padding:10px 12px; vertical-align:top;
  font:var(--t-3)/1.6 var(--font-read); color:var(--ink-2);
  border-bottom:1px solid #23272d;
}
.prose tbody tr:nth-child(even){ background:rgba(255,255,255,.022) }
.prose td code{ font-size:.9em }

/* ---- prev / next nav ---- */
.docnav{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px;
  padding:0 44px 40px;
}
.docnav a{
  display:flex; flex-direction:column; gap:7px; min-width:0;
  padding:16px 18px; text-decoration:none;
  background:var(--well); color:var(--ink);
  border:1px solid;
  border-color:var(--bev-light) var(--bev-dark) var(--bev-dark) var(--bev-light);
  box-shadow:var(--sh-out);
  transition:background .14s ease;
}
.docnav a:hover{ background:var(--sel) }
.docnav a:hover .dn-t{ color:var(--sel-ink); text-decoration:underline; text-underline-offset:3px }
.docnav a:active{
  border-color:var(--bev-shadow) var(--bev-hilite) var(--bev-hilite) var(--bev-shadow);
  box-shadow:var(--sh-in);
}
.dn-l{
  font:700 var(--t-1)/1 var(--font-ui);
  text-transform:uppercase; letter-spacing:.16em; color:var(--accent);
}
.dn-t{ font:700 var(--t-4)/1.35 var(--font-read); color:#e9eef5; overflow-wrap:anywhere }
.docnav .is-next{ text-align:right; align-items:flex-end }
.docnav .is-empty{
  background:transparent; box-shadow:none; border-color:transparent;
  pointer-events:none;
}


/* ==========================================================================
   C. MEDIA QUERIES
   Desktop-first. Each step states what it is solving.
   ========================================================================== */

/* the about pane stops fitting beside the list — stack it above */
@media (max-width:1080px){
  .explorer-body{ grid-template-columns:minmax(0,1fr) }
  .split{ display:none }
  .about{ border-bottom:1px solid var(--bev-dark); box-shadow:0 1px 0 var(--bev-light) }
  .ab-lead{ max-width:64ch }
  .doc-head,.prose,.docnav{ padding-left:34px; padding-right:34px }
}

/* tablet: pull the page gutter in so the window keeps its width */
@media (max-width:900px){
  .reader{ padding:20px 18px 22px }
}

/* the 5-column detail list collapses to title-over-wrapped-meta */
@media (max-width:860px){
  .listhead{ display:block }
  .hcell{ min-height:44px; justify-content:space-between }
  .hcell:not([data-sort="title"]){ display:none }
  .hcell[data-sort="title"]{ width:100% }
  .hspacer{ display:none }
  /* two columns, meta wrapping under the title — cell padding goes back to
     the container so the wrapped meta line stays tight */
  .row{
    grid-template-columns:24px minmax(0,1fr); gap:6px 10px;
    padding:12px 10px; min-height:64px; align-items:start;
  }
  .row .c-name,.row .c-type,.row .c-read,.row .c-date{ padding:0 }
  .c-icon{ margin:3px 0 0 }
  .c-meta{ display:flex; grid-column:2; flex-wrap:wrap; gap:6px 14px; align-items:baseline }
  .toolbar .btn-tool,
  .dlg .btn,
  .shutdown .btn{ min-height:44px }       /* touch targets outside the taskbar */
  .sm-item{ min-height:46px }
}

/* phone: windows go full-bleed, taskbar grows, chrome shrinks so content wins */
@media (max-width:720px){
  .reader{ padding:12px 0 18px; min-height:calc(100vh - var(--tb) - 40px) }
  .win{ box-shadow:var(--sh-out), 0 14px 30px -12px rgba(0,0,0,.8) }
  .deskfoot{ padding:0 14px; font-size:11px; gap:6px }
  .about{ padding:20px 16px 22px }
  .winbody{ padding:6px 5px 8px }

  .doc-head{ padding:26px 18px 22px }
  .prose{ padding:26px 18px 32px; font-size:14.5px; line-height:1.8 }
  .code pre{ padding:14px }
  .code pre code{ font-size:12px }
  .callout-body{ padding:16px 14px 18px; gap:12px }
  .docnav{ grid-template-columns:minmax(0,1fr); padding:0 18px 32px }
  .docnav .is-next{ text-align:left; align-items:flex-start }
  .docnav .is-empty{ display:none }

  .taskbar{ gap:4px; padding:3px 4px calc(3px + env(safe-area-inset-bottom)) }
  .ql{ display:none }
  .start{ min-height:32px; padding:6px 12px }
  .taskbtn{ flex:1 1 0; min-height:32px }
  .tray{ padding:5px 8px }
  .tray svg{ display:none }
  .clock{ min-width:58px }
  .titlebar{ padding:5px 5px 5px 8px }
  .tb-btn{ width:38px; height:32px }        /* 44px with the ::before slop */
  .tb-btn::before{ inset:-6px -3px }
  .tb-btns{ gap:14px }
  .win .tb-btn[data-act="max"]{ display:none }
  .sb-panel:nth-child(3){ display:none }
}

@media (max-width:430px){
  :root{ --t-4:14px }
  .reader{ padding:10px 0 16px }
  .row{ padding:12px 8px }
  .taskbtn .tl{ font-size:11px }
  .sb-panel:nth-child(2){ display:none }
  .startmenu{ width:min(266px, calc(100vw - 12px)) }
  .doc-head{ padding:22px 14px 18px }
  .prose{ padding:22px 14px 28px }
  .prose > ul > li,.prose > ol > li{ padding-left:26px }
  .prose ol > li{ padding-left:38px }
  .docnav{ padding:0 14px 28px }
}

@media (max-width:375px){
  .toolbar{ gap:4px }
  .btn-tool{ padding:6px 8px }
  .deskfoot{ flex-direction:column; align-items:center; gap:2px }
  .deskfoot .sep{ display:none }
}