/* ══════════════════════════════════════════════════════════
   chrome.css — the site bar, the scrollbars, and the pager.
   The Macintosh window frame lives in window.css; design values
   (the drop shadow) live in tokens.css.

   THE BAR — one component, two orientations.

   The bar is a flex container. Desktop stands it up as a column
   on the right; narrow screens lay it on its side as a top bar.
   Everything visual — type, colour, spacing, the active state —
   is declared ONCE below and shared by both orientations.

   The @media block at the bottom is deliberately small: it only
   changes direction, and hides the panels that have no room when
   the bar is on its side. It never restyles anything. If you find
   yourself re-declaring a colour or a font size in there, the
   change belongs up in the shared section instead.

   Pairs with chrome.js, which builds the markup.
   Never copy these rules into a page's own <style> block — a local
   copy wins the cascade and the pages drift apart again.
   ══════════════════════════════════════════════════════════ */

/* ── Orientation tokens ───────────────────────────────────
   The two orientations differ by these values and nothing else. */
:root {
  --bar-size:      186px;   /* column width when upright */
  --bar-pad:       13px 15px;
  --bar-gap:       1px;
  --bar-link-pad:  5px 8px;
  --bar-link-size: 9.5px;

  /* Desktop icon width. One value, because the label wraps under a
     fixed-width glyph the way a Finder icon's does — a per-icon width
     would make the column ragged. */
  --app-w:         76px;
}

/* ══ SCROLLING ════════════════════════════════════════════
   The page scrollbar goes on the LEFT, the bar keeps its own on
   the RIGHT, so the two never stack up against each other.

   `direction: rtl` on the root is what moves the viewport
   scrollbar to the left edge; flips straight back to ltr
   so nothing in the page is actually laid out right-to-left.
   The bar is ltr too, so its internal scrollbar sits on its right.
   ══════════════════════════════════════════════════════════ */
/* ══ SCROLLING ════════════════════════════════════════════
   Each pane scrolls itself; the viewport never does. That gives
   two independent scrollbars in fixed places —

     main content ....... scrollbar on the LEFT
     the bar ............ scrollbar on the RIGHT

   and it makes the bar genuinely immovable: it is a non-scrolling
   flex sibling, not something merely pinned with `sticky`.

   Both rails land next to each other in the middle-right of the
   window: the content's rail on its right edge, then the bar, then
   the bar's own rail at the far edge. The viewport itself never
   scrolls, so no third scrollbar can appear.
   ══════════════════════════════════════════════════════════ */
html, body {
  height: 100%;
  overflow: hidden;          /* no viewport scrollbar at all */
  /* the pages reserve a gutter for a viewport scrollbar that no longer
     exists — release it, or a dead strip sits at the edge */
  scrollbar-gutter: auto;
  margin: 0;
}

/* ── Page shell ──
   index.html uses .desktop; reviews/photos use .page-shell.
   Both are the same layout so the bar behaves identically. */
.desktop,
.page-shell {
  display: flex;
  align-items: stretch;
  height: 100vh;
  overflow: hidden;
}

/* Bar paints on the right but stays first in the DOM, so it also
   reads first. `order` must be set on BOTH sides — an unordered
   flex sibling defaults to 0 and would jump ahead of the bar. */
.desktop-canvas,
.page-main {
  order: 1;
  flex: 1;
  min-width: 0;
  height: 100vh;
  overflow-y: auto;
  /* Scrollbar sits at this pane's right edge — immediately left of the
     bar, where the two rails read as one seam down the page. */
  /* dot grid must travel with the content, not stay pinned to the frame */
  background-attachment: local;
}

/* ══ THE BAR ══════════════════════════════════════════════ */
.sidebar {
  order: 2;
  display: flex;
  flex-direction: column;
  width: var(--bar-size);
  height: 100vh;
  flex-shrink: 0;
  /* Immovable: pinned to the top of the viewport, full height, and
     scrolling its own overflow rather than moving with the page. */
  direction: ltr;            /* its own scrollbar stays on the right */
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--sidebar);
  border-left: 1px solid var(--sidebar-edge);
}

/* ── Identity ── */
.site-identity {
  padding: 18px 15px 15px;
  border-bottom: 1px solid var(--sidebar-edge);
  flex-shrink: 0;
}

.site-name {
  font-family: var(--ui);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1.25;
  color: var(--text);
}

.site-tagline {
  font-family: var(--ui);
  font-size: 8px;
  color: var(--label-soft);
  letter-spacing: 0.09em;
  margin-top: 7px;
}

/* ── Panels (clock / navigate / currently) ── */
.sb-section {
  padding: var(--bar-pad);
  border-bottom: 1px solid var(--sidebar-edge);
}

.sb-label {
  font-family: var(--ui);
  font-size: 7.5px;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--label);
  margin-bottom: 10px;
}

/* ── Clock ── */
.clock-time {
  font-family: var(--ui);
  font-size: 21px;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.clock-date {
  font-family: var(--ui);
  font-size: 8px;
  color: var(--label-soft);
  letter-spacing: 0.06em;
  margin-top: 6px;
}

/* ── Navigation ── */
.sb-nav {
  display: flex;
  flex-direction: column;
  gap: var(--bar-gap);
}

.sb-link {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: var(--bar-link-pad);
  font-family: var(--ui);
  font-size: var(--bar-link-size);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text);
  text-decoration: none;
  border: 1px solid transparent;
  outline: none;
  white-space: nowrap;
  /* Hand cursor lives here because chrome.css owns .sb-link entirely. */
  cursor: var(--cursor-hand);
}

.sb-link .arr {
  font-size: 7px;
  color: var(--ghost);
  flex-shrink: 0;
  line-height: 1;
}

.sb-link:hover,
.sb-link.active {
  background: var(--text);
  color: var(--win);
  border-color: var(--border);
}

.sb-link:hover .arr,
.sb-link.active .arr { color: var(--win); }

.sb-link:focus-visible {
  outline: 2px solid var(--border);
  outline-offset: 1px;
}

/* ── Utilities (About) ──
   Set off from the places above by a rule, because it is a different
   kind of thing: it opens something here rather than taking you away.
   A real <button>, so it needs the button defaults knocked out to sit
   flush with the .sb-link anchors beside it. */
.sb-utils {
  display: flex;
  flex-direction: column;
  gap: var(--bar-gap);
  margin-top: var(--bar-gap);
  padding-top: var(--bar-gap);
  border-top: 1px solid var(--rule);
}

.sb-util {
  appearance: none;
  -webkit-appearance: none;
  background: none;
  width: 100%;
  text-align: left;
  font: inherit;
  font-family: var(--ui);
  font-size: var(--bar-link-size);
  border-radius: 0;
}

/* ── Currently ── */
.currently-list {
  display: flex;
  flex-direction: column;
  gap: 11px;
}

.c-verb {
  display: block;
  font-family: var(--ui);
  font-size: 7.5px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--label);
  margin-bottom: 2px;
}

.c-value {
  font-family: var(--prose);
  font-size: 11.5px;
  font-style: italic;
  color: var(--text);
  line-height: 1.3;
}

/* ── Extra panels (links / banners under "Currently") ──
   Rendered from SITE_CHROME.panels in chrome.js. */
.sb-links {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.sb-links a {
  font-family: var(--ui);
  font-size: 9px;
  letter-spacing: 0.06em;
  color: var(--text);
  text-decoration: none;
  border-bottom: 1px solid var(--sidebar-edge);
  padding-bottom: 3px;
  cursor: var(--cursor-hand);
}
.sb-links a:last-child { border-bottom: none; }
.sb-links a:hover { color: var(--muted); }

/* Banners sit at their natural size — an 88x31 button fits as-is —
   and shrink only if the bar is narrower than they are. */
.sb-banners {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.sb-banners img {
  display: block;
  max-width: 100%;
  height: auto;
  image-rendering: pixelated;   /* these are usually tiny GIFs */
  border: 1px solid var(--sidebar-edge);
}
.sb-banners a { cursor: var(--cursor-hand); }

/* ── Footer ── */
.sb-spacer { flex: 1; }

.sb-footer {
  padding: 11px 15px;
  border-top: 1px solid var(--sidebar-edge);
}

.sb-footer p {
  font-family: var(--ui);
  font-size: 7.5px;
  color: var(--ghost);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1.8;
}

/* ══════════════════════════════════════════════════════════
   LAID ON ITS SIDE — the same bar, rotated to a top strip.
   Direction and what's hidden. No restyling.
   ══════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  :root {
    --bar-size:      100%;
    --bar-pad:       0 8px;
    --bar-gap:       2px;
    --bar-link-pad:  5px 9px;
    --bar-link-size: 8.5px;
  }

  /* One ordinary page scroll on a phone — no split panes. */
  html, body { height: auto; overflow: visible; }

  .desktop,
  .page-shell { height: auto; overflow: visible; }

  .desktop-canvas,
  .page-main {
    height: auto;
    overflow: visible;
  }

  .desktop,
  .page-shell { flex-direction: column; }

  .sidebar { height: auto; overflow: visible; position: sticky; top: 0; }

  /* Bar goes above the content once stacked */
  .sidebar { order: 1; }
  .desktop-canvas,
  .page-main { order: 2; }

  .sidebar {
    flex-direction: row;
    align-items: stretch;
    width: var(--bar-size);
    height: auto;
    z-index: var(--z-bar);
    border-left: none;
    border-bottom: 2px solid var(--border);
  }

  .site-identity {
    display: flex;
    align-items: center;
    padding: 8px 13px;
    border-bottom: none;
    border-right: 1px solid var(--sidebar-edge);
  }

  .site-name { font-size: 10.5px; }

  /* No room on a strip: tagline, clock, currently, footer step aside.
     The nav is the only panel that has to survive. */
  .site-tagline,
  .sb-clock,
  .sb-currently,
  .sb-panel,
  .sb-spacer,
  .sb-footer { display: none; }

  .sb-nav-section {
    flex: 1;
    display: flex;
    align-items: center;
    border-bottom: none;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .sb-nav-section::-webkit-scrollbar { display: none; }

  .sb-nav-section .sb-label { display: none; }

  .sb-nav {
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
  }

  /* The strip runs left to right here, so the rule that separates the
     utilities from the places has to turn with it. */
  .sb-utils {
    flex-direction: row;
    margin-top: 0;
    padding-top: 0;
    margin-left: var(--bar-gap);
    padding-left: var(--bar-gap);
    border-top: none;
    border-left: 1px solid var(--rule);
  }
  .sb-util { width: auto; }
}


/* ══════════════════════════════════════════════════════════
   SCROLLBARS — the chunky platinum rail, shared by every pane.
   Lived in three pages with three different looks before; it is
   defined once here so every scrollbar on the site matches.
   ══════════════════════════════════════════════════════════ */
::-webkit-scrollbar {
  width: 15px;
  height: 15px;
}

::-webkit-scrollbar-track {
  background: var(--metal-track);
  background-image: repeating-linear-gradient(
    45deg,
    rgba(0,0,0,0.07) 0px, rgba(0,0,0,0.07) 1px,
    transparent 1px, transparent 4px
  );
  border-left: 1px solid var(--metal-edge);
}

::-webkit-scrollbar-thumb {
  background: var(--metal-thumb);
  border: 1px solid var(--metal-line);
  border-top-color: var(--metal-mid);
  border-left-color: var(--metal-mid);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--hover-thumb);
}

::-webkit-scrollbar-button {
  background: var(--metal-face);
  border: 1px solid var(--metal-line);
  border-top-color: var(--metal-light);
  border-left-color: var(--metal-light);
  height: 15px;
  width: 15px;
  display: block;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 8px 5px;
}

::-webkit-scrollbar-button:vertical:decrement {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5' viewBox='0 0 8 5'%3E%3Cpath d='M4 0L0 5h8Z' fill='%23333'/%3E%3C/svg%3E");
}

::-webkit-scrollbar-button:vertical:increment {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5' viewBox='0 0 8 5'%3E%3Cpath d='M4 5L0 0h8Z' fill='%23333'/%3E%3C/svg%3E");
}

/* Both arrows sit together at the bottom of the rail, the way a
   Macintosh scrollbar pairs them, rather than one at each end.
   WebKit renders the `end` pair in source order: up, then down. */
::-webkit-scrollbar-button:vertical:start:decrement,
::-webkit-scrollbar-button:vertical:start:increment { display: none; }
::-webkit-scrollbar-button:vertical:end:decrement,
::-webkit-scrollbar-button:vertical:end:increment { display: block; }

/* Same pairing for horizontal rails, at the right-hand end. */
::-webkit-scrollbar-button:horizontal:start:decrement,
::-webkit-scrollbar-button:horizontal:start:increment { display: none; }
::-webkit-scrollbar-button:horizontal:end:decrement,
::-webkit-scrollbar-button:horizontal:end:increment { display: block; }

::-webkit-scrollbar-button:horizontal:decrement {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='5' height='8' viewBox='0 0 5 8'%3E%3Cpath d='M0 4L5 0v8Z' fill='%23333'/%3E%3C/svg%3E");
  background-size: 5px 8px;
}
::-webkit-scrollbar-button:horizontal:increment {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='5' height='8' viewBox='0 0 5 8'%3E%3Cpath d='M5 4L0 0v8Z' fill='%23333'/%3E%3C/svg%3E");
  background-size: 5px 8px;
}

::-webkit-scrollbar-button:active { background: var(--hover-press); }
::-webkit-scrollbar-corner { background: var(--metal-track); }

/* ══════════════════════════════════════════════════════════
   PAGER — numbered pagination, shared by blog / reviews / photos.
   Rendered by paginate.js; hidden automatically while there is
   only one page of content.
   ══════════════════════════════════════════════════════════ */
.pager {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  padding: 14px 12px 16px;
  border-top: 1px solid var(--rule);
}

.pg-row { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; justify-content: center; }

.pg-btn {
  font-family: var(--ui);
  font-size: 9.5px;
  letter-spacing: 0.06em;
  min-width: 21px;
  height: 21px;
  padding: 0 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text);
  text-decoration: none;
  background: var(--win);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  cursor: var(--cursor-hand);
  font-variant-numeric: tabular-nums;
}
.pg-btn:hover { background: var(--hover-light); }
.pg-btn:active { box-shadow: none; transform: var(--shadow-press); }

.pg-btn.active {
  background: var(--titlebar);
  color: var(--win);
  font-weight: 700;
}

.pg-btn.disabled {
  opacity: 0.3;
  box-shadow: var(--shadow);
  cursor: default;
}

.pg-gap {
  font-family: var(--ui);
  font-size: 9.5px;
  color: var(--ghost);
  padding: 0 2px;
}

.pg-count {
  font-family: var(--ui);
  font-size: 8px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}

/* Tag filters are links now (the choice lives in the URL), so they
   need the button look explicitly rather than inheriting it. */
a.tag-btn {
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  cursor: var(--cursor-hand);
}



/* ══════════════════════════════════════════════════════════
   ABOUT THIS BLOG — a utility window, on every page.

   Lives here rather than in index.html because About is site chrome
   now: same reasoning as the nav bar. One definition, every page.

   Fixed to the viewport, not placed on a canvas — Reviews and Photos
   have no canvas, and About has to work there too.
   ══════════════════════════════════════════════════════════ */
.about-win {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(600px, calc(100vw - 32px));
  max-width: calc(100vw - 32px);
  display: none;
  z-index: var(--z-popup);
}
.about-win.open { display: block; }

/* No grow box on purpose: a fixed-size panel, not a workspace. The
   body scrolls if the viewport is short rather than the window growing
   past the bottom of the screen. */
.about-win .window-body { max-height: min(70vh, 460px); }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   ABOUT THIS BLOG — laid out like About This Macintosh:
   identity on the left, blurb on the right, a totals rule, then
   one bar per category. Memory becomes content.
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.atm { padding: 14px 16px 16px; }

.atm-head { display: flex; gap: 16px; align-items: flex-start; }

.atm-id {
  flex-shrink: 0;
  width: 92px;
  text-align: center;
  padding-top: 2px;
}
.atm-icon { width: 42px; height: 42px; }
.atm-name {
  font-family: var(--ui);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.04em;
  margin-top: 6px;
  line-height: 1.3;
}

.atm-intro { flex: 1; min-width: 0; }
.atm-intro p {
  font-family: var(--prose);
  font-size: 12px;
  line-height: 1.55;
  margin-bottom: 7px;
}
.atm-est {
  font-family: var(--ui) !important;
  font-size: 8px !important;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ghost);
  margin-bottom: 0 !important;
}

/* The "Total Memory / Largest Unused Block" rule */
.atm-totals {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  font-family: var(--ui);
  font-size: 9.5px;
  padding: 9px 0 8px;
  margin-top: 12px;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.atm-totals b { letter-spacing: 0.04em; }
.atm-totals span span { font-variant-numeric: tabular-nums; }

/* One row per category: glyph, label, count, bar */
.atm-row {
  display: grid;
  grid-template-columns: 18px 1fr auto 1fr;
  align-items: center;
  gap: 9px;
  padding: 7px 0;
  border-bottom: 1px solid var(--rule);
}
.atm-row:last-child { border-bottom: none; }

.atm-glyph {
  font-family: var(--ui);
  font-size: 12px;
  text-align: center;
  color: var(--text);
}
.atm-label {
  font-family: var(--ui);
  font-size: 9.5px;
  letter-spacing: 0.05em;
  white-space: nowrap;
}
.atm-count {
  font-family: var(--ui);
  font-size: 9.5px;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

/* The bar. Filled portion is this category's share of the largest
   category, so the longest bar is always full — the same way the
   memory bars read against the biggest allocation. */
.atm-bar {
  height: 11px;
  border: 1px solid var(--border);
  background: var(--win);
  position: relative;
  overflow: hidden;
}
.atm-bar i {
  display: block;
  height: 100%;
  background: var(--text);
}

@media (max-width: 900px) {
  .atm-head { flex-direction: column; align-items: flex-start; gap: 10px; }
  .atm-id { width: auto; display: flex; align-items: center; gap: 10px; text-align: left; }
  .atm-name { margin-top: 0; }
  .atm-row { grid-template-columns: 18px 1fr auto; }
  .atm-bar { grid-column: 1 / -1; }
}


/* ══════════════════════════════════════════════════════════
   DESKTOP ICONS — the things that live ON the desktop.

   The nav bar holds places. These hold objects: Blog, What's New, and
   whatever comes next. An icon shows whether the thing it opens is
   open, which is the state the nav used to try to show and couldn't
   without overloading the "you are here" highlight.

   Behaviour is apps.js. Icons only render where there is a #canvas,
   which is index — the only page with a desktop.
   ══════════════════════════════════════════════════════════ */
.app-icon {
  position: absolute;
  width: var(--app-w);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 5px 3px;
  background: none;
  border: 1px solid transparent;
  appearance: none;
  -webkit-appearance: none;
  cursor: var(--cursor-hand);
  /* Above the dotted canvas, below every window: an icon is what you
     reach for when the windows are out of the way, never something
     that covers them. */
  z-index: 1;
}

.app-glyph {
  width: 32px;
  height: 32px;
  display: block;
}
.app-glyph svg { width: 100%; height: 100%; display: block; }

.app-label {
  font-family: var(--ui);
  font-size: 8px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: center;
  line-height: 1.3;
  color: var(--text);
  /* The label sits on the canvas, so it needs its own ground to stay
     readable over the dot grid. */
  background: var(--canvas);
  padding: 1px 3px;
}

.app-icon:hover .app-label { background: var(--hover-light); }

/* Selected: the label inverts, the way a Finder icon's name does.
   The glyph is left alone — inverting a 32x32 bitmap turns it to mud. */
.app-icon.selected .app-label {
  background: var(--text);
  color: var(--win);
}

/* Open: the icon is dimmed, because the thing it opens is already on
   screen. Same convention as an open document's icon in the Finder. */
.app-icon.open .app-glyph { opacity: 0.45; }

.app-icon:focus-visible {
  outline: 2px solid var(--border);
  outline-offset: 1px;
}

.app-icon.dragging { opacity: 0.6; }

@media (max-width: 900px) {
  /* No desktop, so no free placement. The icons become a strip at the
     top of the page — still the way in to Blog and What's New, just
     laid out by the document instead of by hand. */
  .app-layer {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 14px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--rule);
  }
  .app-icon {
    position: static !important;
    left: auto !important;
    top: auto !important;
    flex-direction: row;
    width: auto;
    gap: 7px;
  }
  .app-glyph { width: 22px; height: 22px; }
  .app-label { background: none; }
}