/* ============================================================
   styles.css — every visual decision on the site lives here.

   CSS = "Cascading Style Sheets." Each rule has two parts:

       .menubar {  height: 40px;  }
       ^selector   ^property: value

   The SELECTOR says which elements to style (".menubar" means
   'anything with class="menubar"'), and the block says how.
   "Cascading" means later/more-specific rules can override
   earlier ones — that's the whole trick of the language.

   Design source: mockups/Chosen/01-retro-desktop*.png
   Cream paper, ink lines, sage accent. One window at a time.
   ============================================================ */

/* ===== Self-hosted fonts =====================================
   @font-face teaches the browser a font by pointing at a file we
   serve ourselves (fonts/ in this repo) — no Google request, no
   third-party privacy leak, no outage risk. font-display:swap
   means "show text in a fallback font immediately, swap when the
   real one arrives" (never invisible text).
   Pixelify Sans is a VARIABLE font: one file covers every weight
   from 400–700 (that's what the two-number weight range means). */
@font-face {
  font-family: "Pixelify Sans";
  src: url("fonts/pixelify-var.woff2") format("woff2");
  font-weight: 400 700;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("fonts/plexmono-400.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("fonts/plexmono-500.woff2") format("woff2");
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("fonts/plexmono-600.woff2") format("woff2");
  font-weight: 600;
  font-display: swap;
}

/* :root = the whole document. Variables defined here (the names
   starting with --) are readable everywhere below via var(...).
   Change --sage here and every sage thing on the site changes.
   This is the site's entire palette and type system in one place. */
:root {
  --paper: #f1eee3;        /* desktop background            */
  --paper-bright: #fbfaf3; /* window content background     */
  --chrome: #e7e4d6;       /* menubar / toolbars / chrome   */
  --ink: #21201b;          /* text, borders (near-black)    */
  --ink-soft: #6b685c;     /* secondary text (dates, meta)  */
  --sage: #8c9472;         /* decorative accent (underlines, quote bars) */
  /* --sage-deep exists because of an accessibility audit: cream
     text on the lighter sage measured 3.04:1 contrast — the legal
     floor. Anywhere TEXT sits on sage (title bars, active items)
     uses this darker shade (4.6:1). Decoration keeps the light one. */
  --sage-deep: #6e7652;
  --sage-soft: #b9bfa3;    /* light sage (pressed buttons)  */
  --sage-wash: rgba(140, 148, 114, 0.28); /* translucent hover tint */
  --green: #567d3e;        /* the little green square       */
  --greige: #d9d6c6;       /* folder-icon fill              */
  --shadow: rgba(33, 32, 27, 0.28); /* window drop shadow   */

  /* Font stacks: try the first font; fall back rightward if it
     hasn't loaded. --pixel for display text, --mono for body. */
  --pixel: "Pixelify Sans", "IBM Plex Mono", monospace;
  --mono: "IBM Plex Mono", "Courier New", monospace;

  /* The signature 2px ink border used on nearly everything. */
  --line: 2px solid var(--ink);
  --menubar-h: 40px;
}

/* The "universal reset." Browsers ship default margins/paddings
   that differ between browsers; zeroing them makes layout
   predictable. box-sizing:border-box makes width INCLUDE padding
   and border — the sane way to reason about box sizes. */
* { box-sizing: border-box; margin: 0; padding: 0; }

html, body { height: 100%; }

body {
  font-family: var(--mono);
  color: var(--ink);
  background: var(--paper);
  overflow: hidden;  /* the page itself never scrolls — only window panes do */
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent; /* no grey flash on mobile taps */
}

svg { display: block; } /* kills stray gaps under inline SVGs */

/* Subtle paper grain over everything.
   ::after is a PSEUDO-ELEMENT — a phantom box CSS invents so you
   can add decoration without touching the HTML. This one is a
   fixed, click-through (pointer-events:none) sheet of 4px
   checkerboard at 1.5% opacity: just enough texture to feel
   like paper instead of flat digital color. */
body::after {
  content: "";
  position: fixed;
  inset: 0;               /* shorthand: top/right/bottom/left = 0 */
  pointer-events: none;   /* clicks pass straight through it */
  opacity: 0.5;
  background-image: repeating-conic-gradient(rgba(33,32,27,0.015) 0% 25%, transparent 0% 50%);
  background-size: 4px 4px;
}

/* ===== Keyboard focus ========================================
   :focus-visible fires only for keyboard focus (Tab), not mouse
   clicks — so keyboard users get a clear ring and mouse users
   never see it. One rule covers every interactive element. */
.di:focus-visible, .file-row:focus-visible, .side-item:focus-visible,
.tb-btn:focus-visible, .tool-btn:focus-visible, .fg-item:focus-visible {
  outline: 2px solid var(--sage-deep);
  outline-offset: 2px;
}

/* ===== Boot screen ===========================================
   A full-viewport sheet above everything (z-index 200). JS fills
   the segmented progress bar, then adds .done — opacity fades it
   and the transition ends with the element removed. */
.boot {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  background: var(--paper);
  transition: opacity 0.4s ease;
  cursor: pointer;        /* the whole screen is "click to skip" */
}
.boot.done { opacity: 0; pointer-events: none; }
.boot-inner { display: flex; flex-direction: column; align-items: center; gap: 16px; }
.boot-mac { width: 88px; height: 88px; }
.boot-mac svg { width: 100%; height: 100%; shape-rendering: crispEdges; }
.boot-name {
  font-family: var(--pixel);
  font-size: 24px;
  font-weight: 700;
  letter-spacing: 0.04em;
}
.boot-status {
  font-size: 12.5px;
  color: var(--ink-soft);
  min-height: 18px;       /* reserves the line so the layout doesn't jump */
}

/* Segmented retro progress bar — shared by the boot screen and
   the project-loading dialog. JS puts N empty <i> blocks inside
   and switches them .on one at a time. No smooth gradients:
   chunky discrete blocks are the period-correct look. */
.pix-bar {
  display: flex;
  gap: 3px;
  padding: 4px;
  border: var(--line);
  border-radius: 4px;
  background: var(--paper-bright);
  width: 240px;
}
.pix-bar i {
  flex: 1;
  height: 12px;
  background: transparent;
  border-radius: 1px;
}
.pix-bar i.on { background: var(--sage-deep); }

/* ===== Project-loading dialog ================================
   Shown briefly when leaving the desktop for a project's own
   pages (/projects/<name>/) — a little "Opening…" window. */
.load-overlay {
  position: fixed;
  inset: 0;
  z-index: 150;
  display: grid;
  place-items: center;
  background: rgba(33, 32, 27, 0.18);
}
.load-box {
  width: min(340px, calc(100vw - 40px));
  background: var(--paper-bright);
  border: var(--line);
  border-radius: 6px;
  box-shadow: 4px 4px 0 var(--shadow);
  overflow: hidden;
}
.load-title {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: var(--sage-deep);
  color: var(--paper-bright);
  font-family: var(--pixel);
  font-size: 16px;
  border-bottom: var(--line);
}
.load-title svg { width: 16px; height: 16px; }
.load-body { padding: 18px 16px 16px; display: flex; flex-direction: column; gap: 12px; align-items: center; }
.load-name { font-size: 13.5px; text-align: center; }
.load-status { font-size: 12px; color: var(--ink-soft); }

/* ===== Zoom rectangles =======================================
   The classic Mac "zoom rects": when a window opens, outline
   rectangles fly from the clicked icon to the window's final
   frame (and back on close). Pure decoration, so they ignore
   clicks. JS animates their position; this only sets the look. */
.zoomrect {
  position: fixed;
  border: 2px solid var(--ink);
  border-radius: 6px;
  pointer-events: none;
  z-index: 90;
}

/* ===== Menu bar ==============================================
   FLEXBOX debut. display:flex lays children out in a row;
   justify-content:space-between pushes the first child (left
   group) and last child (right group) to opposite ends;
   align-items:center centers them vertically. Flexbox is the
   workhorse layout tool of this whole file. */
.menubar {
  position: relative;
  z-index: 40;            /* stacking order: keeps the bar above the desktop */
  height: var(--menubar-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 14px;
  background: var(--chrome);
  border-bottom: var(--line);
}
.mb-left, .mb-right { display: flex; align-items: center; gap: 16px; }
.mb-glyph { width: 22px; height: 22px; color: var(--ink); }
.mb-glyph svg { width: 100%; height: 100%; }
.mb-clock {
  font-family: var(--pixel);
  font-size: 17px;
  letter-spacing: 0.03em;
}
.mb-date { color: var(--ink-soft); margin-right: 10px; }

/* ===== Desktop ===============================================
   calc() does math in CSS: the desktop is the viewport height
   (100vh = 100% of the window) minus the menubar. */
.desktop {
  position: relative;     /* becomes the anchor for absolutely-positioned children */
  height: calc(100vh - var(--menubar-h));
  /* dvh = "dynamic viewport height" — unlike vh, it accounts for
     mobile browsers' collapsing URL bars. Older browsers skip the
     line they don't understand and keep the vh one above
     ("progressive enhancement"). */
  height: calc(100dvh - var(--menubar-h));
  overflow: hidden;
}

/* ===== Desktop icons =========================================
   position:absolute takes the column OUT of normal page flow and
   pins it at coordinates measured from .desktop (its nearest
   positioned ancestor). Flexbox stacks the icons vertically. */
.icons {
  position: absolute;
  top: 34px;
  left: 34px;
  display: flex;
  flex-direction: column; /* row is the default; column stacks downward */
  gap: 14px;
  z-index: 5;
}

/* Each icon is a real <button> — keyboard-focusable and
   screen-reader-friendly for free — restyled to not look like one. */
.di {
  width: 104px;
  padding: 10px 6px;
  border: none;
  background: transparent;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  cursor: pointer;        /* hand cursor = "you can click this" */
  font-family: var(--pixel);
  font-size: 17px;
  color: var(--ink);
}
/* :hover and :focus-visible are PSEUDO-CLASSES — states, not
   elements. Same highlight for mouse hover and keyboard focus. */
.di:hover, .di:focus-visible { background: var(--sage-wash); outline: none; }
.di.active { background: var(--sage-deep); color: var(--paper-bright); } /* JS adds .active to the open section */
.di-art { width: 56px; height: 56px; }
.di-art svg { width: 100%; height: 100%; shape-rendering: crispEdges; } /* crispEdges = no anti-aliasing blur; keeps pixel art sharp */

/* ===== Window ================================================ */
/* The slot covers the whole desktop but ignores clicks itself
   (pointer-events:none) — only the window inside it is clickable.
   z-index 10 beats the icons' z-index 5, so an overlapping window
   always draws ON TOP of the icons. (This exact line fixed a real
   bug: icons used to bleed through a maximized window.) */
.window-slot { position: absolute; inset: 0; pointer-events: none; z-index: 10; } /* above desktop icons */

.window {
  position: absolute;     /* JS sets .style.left/.style.top when you drag it */
  display: flex;
  flex-direction: column; /* titlebar on top, content stretching below */
  width: min(820px, calc(100vw - 200px)); /* 820px, unless the screen is too narrow */
  max-height: calc(100vh - var(--menubar-h) - 60px);
  background: var(--paper-bright);
  border: var(--line);
  border-radius: 6px;
  box-shadow: 4px 4px 0 var(--shadow); /* hard offset, zero blur = retro shadow */
  overflow: hidden;       /* clips children to the rounded corners */
  pointer-events: auto;   /* re-enable clicks (the slot disabled them) */
}

/* State classes — JS toggles these; CSS defines what they mean.
   .maxed = the Zoom button; !important beats the inline left/top
   that dragging wrote onto the element. */
.window.maxed {
  left: 16px !important;
  top: 16px !important;
  width: calc(100vw - 32px) !important;
  height: calc(100vh - var(--menubar-h) - 32px) !important;
  max-height: none;
}
/* .shaded = classic Mac "window shade": hide the body, keep the
   title bar. One display:none does all the work. */
.window.shaded .win-under { display: none; }
.window.shaded { max-height: none; height: auto !important; }

/* Title bar — the sage strip. Also the drag handle (see script.js). */
.titlebar {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 40px;
  padding: 0 8px 0 12px;
  background: var(--sage-deep);
  border-bottom: var(--line);
  cursor: grab;           /* open-hand cursor hints "draggable" */
  flex-shrink: 0;
  user-select: none;      /* dragging shouldn't highlight the title text */
}
.titlebar:active { cursor: grabbing; }
.tb-icon { width: 20px; height: 20px; color: var(--paper-bright); flex-shrink: 0; }
.tb-icon svg { width: 100%; height: 100%; }
.tb-title {
  font-family: var(--pixel);
  font-size: 19px;
  font-weight: 600;
  color: var(--paper-bright);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis; /* long titles end with … instead of wrapping */
  flex: 1;                 /* take all leftover width, pushing buttons right */
}
.tb-btns { display: flex; gap: 6px; }
.tb-btn {
  width: 24px; height: 24px;
  background: var(--paper-bright);
  border: var(--line);
  border-radius: 3px;
  cursor: pointer;
  display: grid;
  place-items: center;    /* grid's one-liner for perfect centering */
  color: var(--ink);
  padding: 0;
}
.tb-btn svg { width: 14px; height: 14px; }
.tb-btn:hover { background: var(--chrome); }
.tb-btn:active { background: var(--sage-soft); }

/* Everything under the title bar (toolbar + content + status bar).
   min-height:0 is a flexbox gotcha-fix: without it, flex children
   refuse to shrink below their content size, which breaks the
   inner scrolling panes. */
.win-under {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}

/* The resize grip — bottom-right corner, drawn with a tiny
   repeating diagonal-stripe gradient (period-correct). It's a
   REAL control: script.js wires an actual drag-to-resize.
   Hidden when maximized (resizing a maximized window is
   meaningless) and on touch screens. */
.win-grip {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 20px;
  height: 20px;
  cursor: nwse-resize;
  background: repeating-linear-gradient(
    135deg,
    transparent 0 4px,
    rgba(33, 32, 27, 0.45) 4px 6px
  );
  border-top-left-radius: 4px;
}
.window.maxed .win-grip { display: none; }

/* Toolbar (back/forward row in folder views). The background
   stacks TWO layers: a 4px checkerboard dither on top of the
   chrome color — that's the retro "textured strip" look. */
.toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  background:
    repeating-conic-gradient(rgba(33,32,27,0.06) 0% 25%, transparent 0% 50%),
    var(--chrome);
  background-size: 4px 4px, auto;
  border-bottom: var(--line);
  flex-shrink: 0;
}
.tool-btn {
  width: 30px; height: 30px;
  background: var(--paper-bright);
  border: var(--line);
  border-radius: 3px;
  cursor: pointer;
  display: grid;
  place-items: center;
  color: var(--ink);
  padding: 0;
}
.tool-btn svg { width: 16px; height: 16px; }
.tool-btn:hover { background: var(--chrome); }
.tool-btn:active { background: var(--sage-soft); }

/* The scrolling pane. flex:1 = "absorb all leftover height";
   overflow-y:auto = "grow a scrollbar only if content overflows."
   This is why the WINDOW scrolls but the PAGE never does. */
.win-scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  background: var(--paper-bright);
}

/* Status bar — "2 items", "Ready", the little green square. */
.statusbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 12px;
  background: var(--chrome);
  border-top: var(--line);
  font-size: 13px;
  flex-shrink: 0;
}
.status-kb { display: flex; align-items: center; gap: 8px; }
.status-sq { width: 11px; height: 11px; background: var(--green); border: 1px solid var(--ink); }

/* ===== List view (Writing) =================================== */
/* Column header row. position:sticky = scrolls WITH the list
   until it hits the top of the pane, then stays pinned there. */
.col-head {
  display: flex;
  padding: 8px 16px;
  background: var(--chrome);
  border-bottom: var(--line);
  font-family: var(--pixel);
  font-size: 15px;
  position: sticky;
  top: 0;
}
.col-head .c-title { flex: 1; }               /* Title column: stretches   */
.col-head .c-date { width: 140px; text-align: right; } /* Date: fixed width */

/* One row per post. Also a <button>, restyled. The date column
   width (140px) matches .c-date above so the columns line up. */
.file-row {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 14px 16px;
  background: transparent;
  border: none;
  border-bottom: 2px dotted rgba(33,32,27,0.25); /* the dotted separators from the mockup */
  cursor: pointer;
  font-family: var(--mono);
  font-size: 14.5px;
  color: var(--ink);
  text-align: left;
}
.file-row:hover { background: var(--sage-wash); }
.file-row .fr-icon { width: 20px; height: 20px; flex-shrink: 0; }
.file-row .fr-icon svg { width: 100%; height: 100%; }
.file-row .fr-title { flex: 1; }
.file-row .fr-date { width: 140px; text-align: right; color: var(--ink-soft); font-size: 13px; }

.empty-note {
  padding: 48px 24px;
  text-align: center;
  color: var(--ink-soft);
  font-size: 14px;
}

/* ===== Folder grid (Projects) ================================
   CSS GRID (flexbox's 2D sibling). auto-fill + minmax means:
   "make as many 118px-minimum columns as fit, stretch to fill" —
   responsive with zero media queries. */
.folder-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(118px, 1fr));
  gap: 10px;
  padding: 22px 18px;
}
/* Project tiles are <a> links (they lead to real URLs, so they're
   anchors, not buttons — that's the semantic rule of thumb:
   navigation = <a>, action = <button>). */
.fg-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 12px 6px;
  background: transparent;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-family: var(--mono);
  font-size: 13.5px;
  color: var(--ink);
  text-decoration: none;  /* links underline by default; not wanted on a tile */
  text-align: center;
  word-break: break-word;
}
.fg-item:hover { background: var(--sage-wash); }
.fg-item .fg-art { width: 54px; height: 54px; }
.fg-item .fg-art svg { width: 100%; height: 100%; shape-rendering: crispEdges; }
.fg-note { font-size: 12px; color: var(--ink-soft); }
.fg-lock { display: inline-flex; align-items: center; gap: 4px; }
.fg-lock svg { width: 11px; height: 11px; }

/* ===== Document view (posts / About / Contact) ===============
   Two-pane layout: fixed-width sidebar + flexible reading pane.
   Classic flexbox pattern — sidebar keeps its width (flex-shrink:0),
   the main pane takes whatever remains (flex:1). */
.doc-layout { display: flex; flex: 1; min-height: 0; }
.doc-side {
  width: 178px;
  flex-shrink: 0;
  border-right: var(--line);
  background: var(--paper-bright);
  padding: 14px 10px;
  overflow-y: auto;
}
.side-item {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  padding: 8px 10px;
  background: transparent;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-family: var(--mono);
  font-size: 14px;
  color: var(--ink);
  text-align: left;
  margin-bottom: 2px;
}
.side-item svg { width: 17px; height: 17px; flex-shrink: 0; }
.side-item:hover { background: var(--sage-wash); }
.side-item.active { background: var(--sage-deep); color: var(--paper-bright); }

.doc-main { flex: 1; min-width: 0; overflow-y: auto; }
/* max-width caps the text column: lines longer than ~75 characters
   get hard to read. Core typography principle, one property. */
.doc-pad { padding: 30px 38px 44px; max-width: 640px; }

.doc-pad h1 {
  font-family: var(--pixel);
  font-size: 33px;
  font-weight: 700;
  line-height: 1.15;
  margin-bottom: 8px;
}
.doc-meta { font-size: 13px; color: var(--ink-soft); margin-bottom: 14px; }
.doc-rule {
  border: none;
  border-top: 2px dotted rgba(33,32,27,0.4); /* the dotted divider under titles */
  margin: 0 0 22px;
}
/* line-height 1.8 = generous breathing room between lines —
   monospace fonts need it more than proportional fonts do. */
.doc-pad p { font-size: 14px; line-height: 1.8; margin-bottom: 18px; }
/* display:table is a trick: it shrink-wraps the heading so the
   sage underline is only as wide as the words, not the page. */
.doc-pad h2 {
  font-family: var(--pixel);
  font-size: 20px;
  font-weight: 600;
  margin: 28px 0 12px;
  display: table;
  border-bottom: 3px solid var(--sage);
  padding-bottom: 2px;
}
.doc-pad blockquote {
  border-left: 6px solid var(--sage); /* the sage quote bar from the mockup */
  padding: 4px 0 4px 16px;
  margin: 0 0 18px;
}
.doc-pad blockquote p { margin-bottom: 4px; }
/* Custom bullets: hide the browser's, position our own "•" with
   ::before. More control over spacing and color. */
.doc-pad ul { margin: 0 0 18px 4px; list-style: none; }
.doc-pad li { font-size: 14px; line-height: 1.8; padding-left: 18px; position: relative; }
.doc-pad li::before { content: "•"; position: absolute; left: 4px; }
.doc-pad img {
  max-width: 100%;        /* never overflow the text column */
  border: var(--line);
  margin: 4px 0 18px;
  image-rendering: auto;
}
.doc-pad a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--sage); text-underline-offset: 3px; text-decoration-thickness: 2px; }
.doc-pad a:hover { background: var(--sage-wash); }

/* ===== Now view ==============================================
   CSS MULTI-COLUMN layout (the third layout tool in this file,
   after flexbox and grid). "columns: 200px" = flow content into
   as many 200px columns as fit — newspaper-style, and how the
   Now page matches the mockup without hand-placing anything.
   break-inside:avoid keeps a section from splitting mid-list.
   The mockup shows the sections in two banks split by a dotted
   rule — so the view renders two .now-cols blocks with an
   <hr class="now-rule"> between them. */
.now-wrap { padding: 30px 36px 40px; }
.now-cols { columns: 200px; column-gap: 44px; }
.now-rule {
  border: none;
  border-top: 2px dotted rgba(33,32,27,0.35);
  margin: 4px 0 30px;
}
.now-sec { break-inside: avoid; margin-bottom: 30px; }
.now-sec h3 {
  font-family: var(--pixel);
  font-size: 18px;
  font-weight: 600;
  display: table;
  border-bottom: 3px solid var(--sage);
  padding-bottom: 2px;
  margin-bottom: 12px;
}
.now-sec ul { list-style: none; }
.now-sec li {
  font-size: 13.5px;
  line-height: 1.55;
  padding-left: 16px;
  position: relative;
  margin-bottom: 8px;
}
.now-sec li::before { content: "•"; position: absolute; left: 2px; }

/* ===== Scrollbars ============================================
   ::-webkit-scrollbar lets Chromium/Safari browsers restyle the
   scrollbar — here into a chunky dithered retro one. Firefox
   ignores these and shows its own; that's an accepted tradeoff
   ("progressive enhancement": extra polish where supported).

   The whole block is wrapped in a media query that reads "only
   on devices with a mouse" (hover + fine pointer). Phones get
   their native overlay scrollbars instead — a 16px retro bar
   would eat a tenth of a phone screen. */
@media (hover: hover) and (pointer: fine) {
  .win-scroll::-webkit-scrollbar, .doc-main::-webkit-scrollbar, .doc-side::-webkit-scrollbar { width: 16px; }
  .win-scroll::-webkit-scrollbar-track, .doc-main::-webkit-scrollbar-track {
    background:
      repeating-conic-gradient(rgba(33,32,27,0.07) 0% 25%, transparent 0% 50%),
      var(--chrome);
    background-size: 4px 4px, auto;
    border-left: var(--line);
  }
  .win-scroll::-webkit-scrollbar-thumb, .doc-main::-webkit-scrollbar-thumb {
    background: var(--paper-bright);
    border: 2px solid var(--ink);
    border-radius: 2px;
  }
}

/* ===== Reduced motion ========================================
   Users can ask their OS for less animation (vestibular issues,
   or just preference). Honoring it: JS skips the boot screen,
   zoom rects and loading dialogs; this kills the CSS fades too. */
@media (prefers-reduced-motion: reduce) {
  .boot { transition: none; }
}

/* ===== Small screens =========================================
   A MEDIA QUERY: everything inside applies only when the
   viewport is 760px or narrower (phones, narrow windows).
   This is "responsive design" — same HTML, different layout.

   The mobile model: icons form a home grid; tapping one opens
   the window as a FULL SHEET over the desktop (like a mobile
   app screen), and the document sidebar turns into a horizontal
   tab strip so you can switch sections without closing anything.
   Drag is off (script.js checks the same 760px breakpoint). */
@media (max-width: 760px) {
  .icons {
    position: static;     /* back into normal flow (not pinned) */
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: 4px;
    padding: 12px 8px;
  }
  .di { width: 86px; font-size: 15px; }
  .di-art { width: 46px; height: 46px; }

  /* The window becomes a sheet: anchored to all four edges
     (top/right/bottom/left) with width/height on auto, it
     stretches to fill. env(safe-area-inset-bottom) adds room
     for iPhone home bars ("the notch API"). The !importants
     out-shout the inline left/top that desktop drag writes. */
  .window, .window.maxed {
    left: 8px !important;
    right: 8px;
    top: 8px !important;
    bottom: calc(8px + env(safe-area-inset-bottom, 0px));
    width: auto !important;
    height: auto !important;
    max-height: none;
  }
  /* Shade still collapses the sheet to just its title bar. */
  .window.shaded { bottom: auto; }

  /* Bigger touch targets — fingers are ~40px, mice are 1px. */
  .titlebar { cursor: default; height: 44px; }
  .tb-btn { width: 34px; height: 34px; }
  .tb-btn svg { width: 16px; height: 16px; }
  .tool-btn { width: 38px; height: 38px; }
  /* Zoom is meaningless when the sheet already fills the screen,
     and finger-resizing a sheet likewise — so both controls
     disappear entirely (the no-fake-controls rule). */
  #btnZoom { display: none; }
  .win-grip { display: none; }
  /* The date in the menubar goes too — space is precious. */
  .mb-date { display: none; }

  /* Sidebar → horizontal tab strip along the top of doc views. */
  .doc-layout { flex-direction: column; }
  .doc-side {
    width: auto;
    display: flex;
    gap: 2px;
    border-right: none;
    border-bottom: var(--line);
    padding: 8px;
    overflow-x: auto;    /* strip scrolls sideways if it must */
    overflow-y: hidden;
    flex-shrink: 0;
  }
  .side-item { width: auto; flex-shrink: 0; margin-bottom: 0; padding: 7px 12px; }

  .file-row .fr-date { width: 96px; font-size: 12px; }
  .doc-pad, .now-wrap { padding: 22px 20px 32px; }
  .doc-pad h1 { font-size: 26px; }
  .mb-right { display: none; }
}