/* surface-home.css
   Scoped styling for the home surface, loaded after css/orco.css so it inherits
   the material defined there: the gold hairline, gold focus, Georgia on his
   names, and the one primary action. Direction and reasoning:
   docs/beta-run/UX-VISUAL-DIRECTION.md

   This file exists so that four surfaces can be worked on at once without
   four seats editing one 4,250 line stylesheet. Everything here is scoped to
   this surface's own classes. Nothing here redefines a token.

   ======================================================================
   WHAT THIS PASS CHANGED, AND WHY. 2026-09-10.
   ======================================================================

   Home was competent and not stunning. Six things were wrong on the first
   screen and all six are answered here or in js/orco-home.js.

   1. COMPOSITION. Three cards sat top-left in a 1440 grid and the remaining
      sixty per cent of the screen was empty navy. Emptiness on one side of a
      screen reads as a mistake; the same emptiness on both sides reads as a
      margin. So Home is now three bands stacked on one measured canvas:

          MASTHEAD   who this is, what you are looking at, and the two verbs
          THE WORK   folders and the presentations themselves
          THE LEDGER where your work is kept, what is published, what was
                     recovered. It never disappears.

      The canvas has a left edge shared by all three bands, and it grows with
      the number of presentations, so one presentation is not shown in a
      layout designed for forty. The band rules run the full width while the
      content sits on the canvas, which is how a masthead has always worked.

   2. THE COVERS. See the long note above .home-face.

   3. THE LEDGER exists because publication state, save state and recovery
      state are durable facts, and a toast is a place a fact goes to die.

   4. THE EMPTY STATE is a composed invitation with one sentence per route.

   5. THE BRAND MARK is brought onto the gold. See .home-mark.

   6. THE GOLD HAIRLINE under the masthead was set at rgba(...,0.16), which is
      invisible against navy on a real display. The defining feature of the
      direction was therefore absent from the first screen. It is drawn here
      deliberately, once, as a lit rule.
*/

/* ======================================================================
   0. LOCAL VARIABLES. New names, never a redefinition of a token.
   ====================================================================== */

html {
  /* The brand mark's gold, as three stops, so the orca reads as struck metal
     rather than as a flat sticker. Declared on html rather than on .homeview
     because the gradient element that consumes them lives in document.body:
     a paint server inside a hidden subtree is not reliably resolvable. */
  --home-mark-1: #f0dda2;
  --home-mark-2: #e3c878;
  --home-mark-3: #9c7620;
}
html[data-theme="light"] {
  /* Light mode remaps --gold to a burnt #b45309 for contrast on paper. The
     mark follows the same reasoning: deep antique gold, not pale gold, which
     would vanish on a near-white ground. */
  --home-mark-1: #d09a2a;
  --home-mark-2: #a8710f;
  --home-mark-3: #6d4606;
}

.homeview {
  /* Both are set per draw from js/orco-home.js, from the number of
     presentations. The fallbacks are the four-presentation case. */
  --home-canvas: 1240px;
  --home-track: 290px;
  --home-gutter: clamp(18px, 3.4vw, 46px);
  --home-band: rgba(227, 200, 120, 0.30);
}
/* Light keeps the rule GOLD rather than swapping it for a neutral hairline.
   It is the defining feature of the direction, and a feature that only exists
   in one theme is not a feature, it is a dark-mode flourish. Light remaps
   --gold to a burnt #b45309 for contrast on paper, and this follows it. */
html[data-theme="light"] .homeview { --home-band: rgba(180, 83, 9, 0.30); }

/* ======================================================================
   1. THE GROUND
   The retired palette left a violet aurora painting the whole surface, which
   is the single most prominent object on a screen whose subject is navy and
   gold slides. It is replaced by a ground with three ingredients and no hue
   that is not in the direction: a navy vignette, one low gold bloom behind
   the masthead, and a 48px instrument grid that fades out before it can be
   noticed. Together they are why the quiet half of the screen reads as
   atmosphere rather than as a region nobody finished.
   ====================================================================== */

.homeview::before {
  background:
    radial-gradient(62% 46% at 50% -6%, rgba(227, 200, 120, 0.075), transparent 68%),
    radial-gradient(78% 60% at 50% 118%, rgba(22, 32, 74, 0.85), transparent 72%),
    radial-gradient(120% 90% at 50% 40%, transparent 42%, rgba(3, 6, 18, 0.55) 100%);
}
html[data-theme="light"] .homeview::before {
  background:
    radial-gradient(62% 46% at 50% -6%, rgba(180, 83, 9, 0.05), transparent 68%),
    radial-gradient(120% 90% at 50% 40%, transparent 46%, rgba(10, 16, 69, 0.07) 100%);
}

/* The instrument grid. 48px, and masked so it exists only in the middle of
   the screen, where it gives the empty navy a measure without ever competing
   with a card. Its own layer so it composites under everything. */
.home-sky {
  position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background-image:
    linear-gradient(to right, rgba(227, 200, 120, 0.055) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(227, 200, 120, 0.055) 1px, transparent 1px);
  background-size: 48px 48px;
  -webkit-mask-image: radial-gradient(58% 52% at 50% 52%, #000 0%, transparent 78%);
          mask-image: radial-gradient(58% 52% at 50% 52%, #000 0%, transparent 78%);
}
html[data-theme="light"] .home-sky {
  background-image:
    linear-gradient(to right, rgba(30, 29, 76, 0.045) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(30, 29, 76, 0.045) 1px, transparent 1px);
}

/* ======================================================================
   2. THE MASTHEAD
   Two rows. The top row is identity and return: who this is, and the way
   back to the presentation you left. The second row is the subject and the
   verbs. Splitting them is what stops "Return to Food for Thought: AI a la
   Carte" sitting in the same run as the primary action and out-measuring it.
   ====================================================================== */

.home-head {
  /* .show-head is a flex row ending its children at the baseline, which is
     right for the running order and wrong for a two-row masthead. */
  display: block;
  padding: 0;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom: 0;
  box-shadow: none;
}
/* The rainbow hairline .show-head wears on its top edge belongs to the
   retired palette. There is one accent now, and it is drawn below, once. */
.home-head::before { content: none; }

.home-mast {
  position: relative; z-index: 1;
  width: 100%;
  max-width: var(--home-canvas);
  margin-inline: auto;
  padding: clamp(14px, 2vh, 20px) var(--home-gutter) clamp(12px, 1.6vh, 16px);
}

.home-mast-a {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  min-height: 34px;
}
.home-mast-b {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: clamp(16px, 3vw, 40px);
  margin-top: clamp(10px, 1.5vh, 15px);
}

/* THE LIT RULE. The defining feature of the direction, drawn once, full
   width, under the masthead. Solid at the accent's awake alpha through the
   middle and fading at both ends, so it reads as a machined edge catching
   light rather than as a border somebody forgot to remove. */
.home-rule {
  position: relative; z-index: 1;
  height: 1px; flex: none;
  background: linear-gradient(90deg,
    transparent 0%,
    var(--home-band) 14%,
    var(--home-band) 86%,
    transparent 100%);
}
.home-rule::after {
  content: ""; position: absolute; left: 22%; right: 22%; top: 0; height: 7px;
  background: linear-gradient(180deg, rgba(227, 200, 120, 0.055), transparent);
  pointer-events: none;
}
html[data-theme="light"] .home-rule::after { background: none; }

/* ---- the brand lockup, brought onto the gold ------------------------
   THE DECISION, stated because it was asked for. The orca is the one place
   the direction permits a warm hue other than gold, so it was a real choice
   and not a default. It goes ONTO the gold.

   Keeping a single considered brand hue was the alternative and it loses.
   The magenta is not a chosen brand hue, it is the residue of the five-hue
   palette this direction retired, and every candidate replacement warm hue
   would be the second accent the direction exists to remove. A gold mark
   costs nothing and buys the thing the direction is actually after: the
   frame and the picture made of one material.

   It is not flat gold. Three stops from lit through gold to deep make the
   creature read as an emblem struck in metal, which is what a precision
   instrument wears. The letterforms beside it stay cream, so the lockup is
   one gold object and one word rather than a gold slab. That is one of the
   three gold appearances on this screen; the lit rule is the second and the
   primary action is the third. */
.home-brand { margin: 0; line-height: 0; }
.homeview .brand--surface { display: inline-flex; }
.homeview .brand-mark use,
.homeview .brand-rco use { fill: url(#homeMarkGold); }
.homeview .brand-rco use { fill: var(--ink); }
.homeview .brand-lockup { opacity: 0.96; }
/* The wordmark is collapsed to zero width elsewhere and dives open on hover,
   which is right for a toolbar and wrong here: this is the one screen that is
   the product rather than a tool inside it, and a product screen shows its
   name. The dive still runs on the mark itself. */
.homeview .brand--surface .brand-rco { width: 76.9px; }
.home-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ---- return, and the subject ---------------------------------------- */

.home-mast-nav { display: flex; align-items: center; gap: 10px; }
.home-back { max-width: min(42vw, 340px); }
.home-back-l { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.home-back .home-back-arrow { color: var(--ink-4); flex: none; }
.home-back:hover .home-back-arrow { color: var(--gold); }

.home-id { min-width: 0; flex: 1 1 auto; }
.home-acts { flex-wrap: nowrap; }
.home-h {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(25px, 2.5vw, 32px);
  font-weight: 400;
  letter-spacing: -0.022em;
  line-height: 1.05;
  color: var(--ink);
}
.home-sub {
  margin: 7px 0 0;
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.02em;
  color: var(--ink-3);
}

.home-acts {
  flex: 0 1 auto;
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  justify-content: flex-end;
}

/* The field and the segmented control are the two controls a person touches
   most on this screen, so they get the same 36px height as .tool and the same
   hairline, and they stop looking like three unrelated widgets in a row. */
.home-find {
  height: 36px; width: 13rem; max-width: 34vw;
  padding: 0 12px;
  border-radius: var(--radius-sm, 10px);
  border: 1px solid var(--hair);
  background: var(--field);
}
.home-seg { height: 36px; align-items: center; border-radius: var(--radius-sm, 10px); }
.home-segb { height: 30px; display: inline-flex; align-items: center; }
.home-segb.is-on {
  background: color-mix(in srgb, var(--gold) 13%, transparent);
  color: var(--gold);
  box-shadow: inset 0 0 0 1px var(--hair);
}

/* ======================================================================
   3. THE WORK
   Rail and grid are one canvas so they share the masthead's left edge, and
   the canvas is centred, which is what turns the leftover navy into a margin.
   ====================================================================== */

.home-body {
  width: 100%;
  max-width: var(--home-canvas);
  margin-inline: auto;
  grid-template-columns: 214px minmax(0, 1fr);
  column-gap: clamp(14px, 1.8vw, 26px);
  padding-inline: var(--home-gutter);
}

.homeview[data-rail="off"] .home-body { grid-template-columns: minmax(0, 1fr); }

.home-rail {
  border-right: 0;
  padding: clamp(18px, 2.6vh, 28px) 0 30px;
  align-content: start;
}
.home-rail-head {
  font-size: 10px; letter-spacing: 0.2em; padding: 0 10px 10px;
  color: var(--ink-4);
}
.home-rail-row { border-radius: 8px; }
.home-rail-row.is-on {
  background: color-mix(in srgb, var(--gold) 10%, transparent);
  border-color: var(--hair);
  color: var(--ink);
}
/* The underline of the currently selected destination is the fourth place the
   direction spends its hairline. Drawn as a left tick rather than a bottom
   rule, because these destinations stack vertically. */
.home-rail-row.is-on::before {
  content: ""; position: absolute; left: -1px; top: 8px; bottom: 8px; width: 2px;
  background: var(--gold); border-radius: 2px;
}
.home-rail-row { position: relative; }
.home-rail-row.is-on .home-rail-count { color: var(--gold); }
.home-rail-add { border-radius: 8px; }
.home-rail-add:hover { border-color: var(--hair-2); color: var(--gold); }

.home-grid {
  padding: clamp(18px, 2.6vh, 28px) 0 clamp(24px, 4vh, 44px);
}
.home-grid.is-matrix {
  /* The count comes from js/orco-home.js, not from auto-fill. See measure(). */
  grid-template-columns: repeat(var(--home-cols, 3), minmax(0, 1fr));
  gap: 22px;
  /* Cards in a row match height. A one-line name beside a two-line name was
     leaving the row with two different bottom edges, which is the kind of
     small raggedness that reads as "unfinished" without anybody being able to
     say why. */
  align-items: stretch;
}
/* Applied by settle() in js/orco-home.js, and ONLY when the grid has nothing
   to scroll. See the comment there for why that condition is load-bearing. */
.home-grid.is-matrix.is-settled { align-content: center; }
.home-grid.is-matrix .home-cell > .home-card { height: 100%; }
/* Reserved for two lines in the matrix, so every card in a row is the same
   height whether its name wraps or not. The list view has no such problem and
   pays no such cost. */
.home-grid.is-matrix .home-name { min-height: 2.44em; }

/* The grid passes UNDER the ledger's rule rather than being chopped off at
   it. Twenty-four pixels, which is enough to read as depth and not enough to
   hide a line of text. */
.home-grid {
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 24px), transparent 100%);
          mask-image: linear-gradient(to bottom, #000 calc(100% - 24px), transparent 100%);
}

/* ======================================================================
   4. THE CARD
   ====================================================================== */

.home-card {
  gap: 13px;
  padding: 12px;
  border-radius: var(--radius, 14px);
  border-color: var(--hair);
  background:
    linear-gradient(180deg, rgba(242, 239, 230, 0.035), rgba(242, 239, 230, 0) 44%),
    var(--panel-2);
  box-shadow: inset 0 1px 0 rgba(242, 239, 230, 0.05);
  transition: transform var(--t-surface, 200ms) var(--ease, cubic-bezier(0.2,0.8,0.2,1)),
              border-color var(--t-state, 140ms) var(--ease, cubic-bezier(0.2,0.8,0.2,1)),
              box-shadow var(--t-surface, 200ms) var(--ease, cubic-bezier(0.2,0.8,0.2,1));
}
.home-card:hover .home-face {
  box-shadow:
    inset 0 0 0 1px rgba(227, 200, 120, 0.42),
    inset 0 1px 0 rgba(242, 239, 230, 0.20),
    inset 0 -40px 60px -34px rgba(0, 0, 0, 0.85);
}
.home-face { transition: box-shadow var(--t-surface, 200ms) var(--ease, ease); }
.home-card:hover {
  transform: translateY(-3px);
  border-color: var(--hair-2);
  box-shadow: 0 18px 44px -18px rgba(0, 0, 0, 0.7),
              inset 0 1px 0 rgba(242, 239, 230, 0.09);
}
.home-card:focus-visible { border-color: var(--hair-2); box-shadow: none; }

/* ---- the cover ------------------------------------------------------
   THE COVERS WERE MUDDY, and the reason was measurable rather than a matter
   of taste. They were built at 34% saturation and 26% lightness, which is the
   exact middle of the value range: too dark to be luminous, too light to be
   deep, and identical in feel to the card behind them. Three cards read as
   three grey-green rectangles. His own palette is DEEP navy with LUMINOUS
   gold, and the middle is the one place it never goes.

   So the cover is now built the way a jewel is lit rather than the way a
   swatch is filled: a deep, saturated ground at 7-15% lightness, and a single
   off-centre light source at 34% lightness and high chroma sitting in it. The
   contrast between those two, not the hue, is what makes it read as a
   material. The light's position is part of the hash, so two presentations
   that land near each other on the arc still do not look alike.

   Everything that made it honest is kept and none of it is loosened: the hue
   stays on the navy-to-gold arc, the whole thing stays DETERMINISTIC from the
   presentation's own name and id, and it still says out loud that it is a
   generated cover rather than a picture of slide one. A cover that changed
   between reloads would destroy the recognition it exists to create.

   The cover stays dark in light mode. That is deliberate: a cover is the
   cloth binding of the presentation, and a bookshelf does not repaint its
   spines when you turn the room light on. */
.home-face {
  border-radius: 9px;
  border: 0;
  background:
    /* THE SHEEN. One band of light across a lacquered surface, which is what
       gives the cover an edge to catch rather than only a glow to sit in. */
    linear-gradient(112deg, transparent 26%, rgba(242, 239, 230, 0.06) 44%, transparent 62%),
    /* THE CORE. Small and bright: the point the light is actually coming from. */
    radial-gradient(26% 30% at var(--cover-x, 32%) var(--cover-y, 22%),
                    var(--cover-core, #37589c) 0%, transparent 80%),
    /* THE WASH. Wide and low, reaching every edge, so the whole face is one
       graded field rather than a blob sitting on a flat ground. A jewel is
       read from the gradient across it, not from a highlight on it. */
    radial-gradient(var(--cover-reach, 92%) calc(var(--cover-reach, 92%) + 4%)
                    at var(--cover-x, 32%) var(--cover-y, 22%),
                    var(--cover-lit, #24407a) 0%, transparent 92%),
    radial-gradient(122% 116% at 50% 46%, transparent 40%, rgba(2, 4, 12, 0.44) 100%),
    linear-gradient(157deg, var(--cover-a, #16224a), var(--cover-b, #070b1c));
  box-shadow:
    inset 0 0 0 1px rgba(227, 200, 120, 0.22),
    inset 0 1px 0 rgba(242, 239, 230, 0.16),
    inset 0 -40px 60px -34px rgba(0, 0, 0, 0.85);
}
.home-face[data-cover="generated"] {
  background:
    /* THE SHEEN. One band of light across a lacquered surface, which is what
       gives the cover an edge to catch rather than only a glow to sit in. */
    linear-gradient(112deg, transparent 26%, rgba(242, 239, 230, 0.06) 44%, transparent 62%),
    /* THE CORE. Small and bright: the point the light is actually coming from. */
    radial-gradient(26% 30% at var(--cover-x, 32%) var(--cover-y, 22%),
                    var(--cover-core, #37589c) 0%, transparent 80%),
    /* THE WASH. Wide and low, reaching every edge, so the whole face is one
       graded field rather than a blob sitting on a flat ground. A jewel is
       read from the gradient across it, not from a highlight on it. */
    radial-gradient(var(--cover-reach, 92%) calc(var(--cover-reach, 92%) + 4%)
                    at var(--cover-x, 32%) var(--cover-y, 22%),
                    var(--cover-lit, #24407a) 0%, transparent 92%),
    radial-gradient(122% 116% at 50% 46%, transparent 40%, rgba(2, 4, 12, 0.44) 100%),
    linear-gradient(157deg, var(--cover-a, #16224a), var(--cover-b, #070b1c));
}

/* The stack of screens, as hairline outlines rather than as filled blocks.
   Filled blocks were near-black rectangles sitting on the cover, which is
   what made a generated cover look like a thumbnail that had failed to load. */
/* THE SHEET STACK IS GONE, and this rule is what stops a stale build from
   painting it. It was three nested hairline rectangles floating on the cover,
   and rendered at card size it read as an empty wireframe rather than as a
   stack of screens: a frame around nothing, on a cover whose whole job is to
   be a recognisable object. The cover now carries ONE idea, the bookplate,
   and "how many screens" is said in words directly under it, where a number
   belongs. Restraint here is choosing the stronger idea, not removing until
   nothing is left. */
.home-sheet { display: none; }

/* The initial, set in his own display face and used as a bookplate rather
   than as a label. Large, low, and cropped by the cover, so it is a texture a
   person recognises across a shelf rather than a badge they read. */
.home-glyph {
  position: absolute;
  left: -0.05em; bottom: -0.17em;
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(56px, 9vw, 92px);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.04em;
  color: rgba(242, 239, 230, 0.19);
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
  pointer-events: none;
  user-select: none;
}
.home-grid.is-list .home-glyph { font-size: 26px; bottom: -0.14em; left: 0.02em; }
/* In the list the invitation is a row like every other row, not a panel the
   height of a card. Same verb, same words, the shape of its neighbours. */
.home-grid.is-list .home-ghost {
  flex-direction: row; align-items: center; justify-content: flex-start;
  gap: 13px; padding: 12px 14px; text-align: left;
}
.home-grid.is-list .home-ghost-plus { width: 32px; height: 32px; font-size: 17px; }
.home-grid.is-list .home-ghost-q { max-width: none; }

/* The old top-right monospace initials are replaced by the bookplate. Kept in
   the DOM for nothing; removed in js/orco-home.js. This rule is the guard
   against a stale build painting both. */
.home-initials { display: none; }

.home-ext {
  right: 8px; bottom: 7px;
  background: rgba(6, 10, 26, 0.72);
  border-color: rgba(227, 200, 120, 0.22);
  color: rgba(227, 200, 120, 0.82);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}

.home-meta { gap: 4px; padding: 0 3px 3px; }
.home-name {
  font-size: 15.5px;
  font-weight: 400;
  line-height: 1.22;
  color: var(--ink);
  /* The long name is real content: "Food for Thought: AI a la Carte" and its
     duplicates. One line ellipsised it into a riddle, so it gets two. */
  white-space: normal;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.home-line {
  font-size: 11px; color: var(--ink-4); letter-spacing: 0.01em;
  /* One line, always. At five columns "197 screens · 71 slide sets" wrapped
     to two and took the card's bottom edge with it. */
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Publication, on the card, read from the ledger this browser keeps rather
   than from the network, so it is there before any request returns and is
   still there when there is no network at all. */
.home-live {
  font-family: var(--font-mono); font-size: 10.5px;
  color: var(--ok, #6fce9f); letter-spacing: 0;
}
.home-dot { width: 5px; height: 5px; box-shadow: 0 0 0 3px color-mix(in srgb, var(--ok, #6fce9f) 18%, transparent); }

/* The three dots sit ON the cover, and the cover is dark in both themes, so
   this control is dark in both themes too. Inheriting the surface's own
   panel colour made it a white pill floating on a navy cover in light mode. */
.homeview .home-more {
  border-radius: 7px;
  min-width: 32px; min-height: 32px;
  background: rgba(6, 10, 26, 0.55);
  border: 1px solid rgba(242, 239, 230, 0.14);
  color: rgba(242, 239, 230, 0.72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 1;
}
.homeview .home-more:hover { color: #f0dda2; border-color: rgba(227, 200, 120, 0.55); }
.home-grid.is-list .homeview .home-more,
.homeview .home-grid.is-list .home-more { background: transparent; border-color: transparent; color: var(--ink-4); }

/* ---- the ghost card -------------------------------------------------
   The create verb, in the work area, as the last cell. Every document
   application puts one here and it does three things at once: it names the
   next step where the eye already is, it fills the row so a short library
   does not look like an abandoned one, and it gives the grid a reason to be
   the width it is. It is withdrawn once the library is big enough that
   density matters more than invitation. */
.home-ghost {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; align-self: stretch;
  padding: 22px 16px;
  border: 1px dashed var(--hair-2);
  border-radius: var(--radius, 14px);
  background: transparent;
  color: var(--ink-3);
  font: inherit; cursor: pointer; text-align: center;
  transition: border-color var(--t-state, 140ms) var(--ease, cubic-bezier(0.2,0.8,0.2,1)), color var(--t-state, 140ms) var(--ease, cubic-bezier(0.2,0.8,0.2,1)),
              background var(--t-state, 140ms) var(--ease, cubic-bezier(0.2,0.8,0.2,1));
}
.home-ghost:hover {
  border-color: var(--gold);
  color: var(--ink);
  background: color-mix(in srgb, var(--gold) 6%, transparent);
}
.home-ghost-plus {
  width: 38px; height: 38px; border-radius: 50%;
  display: grid; place-items: center;
  border: 1px solid var(--hair-2);
  color: var(--gold);
  font-size: 19px; line-height: 1;
}
.home-ghost:hover .home-ghost-plus { border-color: var(--gold); }
.home-ghost-l { font-size: 13px; font-weight: 560; }
.home-ghost-q { font-size: 11.5px; color: var(--ink-4); max-width: 22ch; line-height: 1.4; }

/* ======================================================================
   5. THE EMPTY STATE
   A person with no presentations should meet something that makes them want
   to start, and should be told in one sentence each what the two routes are
   for. What was here before was two grey lines of prose in the top-left
   corner of an otherwise blank screen.
   ====================================================================== */

.home-empty {
  grid-column: 1 / -1;
  justify-items: center; text-align: center;
  padding: clamp(28px, 7vh, 76px) 20px;
  gap: 0;
  color: var(--ink-3);
}
.home-empty-mark {
  width: 74px; height: 74px; margin-bottom: 22px;
  border-radius: 16px;
  display: grid; place-items: center;
  border: 1px solid var(--hair);
  background:
    radial-gradient(74% 74% at 32% 20%, #24407a 0%, transparent 66%),
    linear-gradient(157deg, #16224a, #070b1c);
  box-shadow: inset 0 1px 0 rgba(242, 239, 230, 0.12),
              0 18px 40px -22px rgba(0, 0, 0, 0.8);
}
.home-empty-mark .home-ext { position: static; }
.home-empty-h {
  margin: 0;
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(21px, 2.4vw, 28px); letter-spacing: -0.02em;
  color: var(--ink);
}
.home-empty p { margin: 10px 0 0; font-size: 13.5px; color: var(--ink-3); max-width: 46ch; line-height: 1.5; }
.home-empty .q { font-size: 13px; }

/* The two routes, side by side, each with the one sentence that says what it
   is for. Side by side rather than stacked because the whole point is that
   they are a choice between two things, not a queue. */
.home-routes {
  display: grid; gap: 14px; margin-top: 28px;
  grid-template-columns: repeat(auto-fit, minmax(238px, 1fr));
  width: 100%; max-width: 620px;
}
.home-route {
  display: grid; gap: 7px; justify-items: start; text-align: left;
  padding: 17px 18px;
  border: 1px solid var(--hair);
  border-radius: var(--radius, 14px);
  background: var(--panel);
  color: var(--ink-2); font: inherit; cursor: pointer;
  transition: border-color var(--t-state, 140ms) var(--ease, cubic-bezier(0.2,0.8,0.2,1)), transform var(--t-surface, 200ms) var(--ease, cubic-bezier(0.2,0.8,0.2,1)),
              box-shadow var(--t-surface, 200ms) var(--ease, cubic-bezier(0.2,0.8,0.2,1));
}
.home-route:hover { transform: translateY(-2px); border-color: var(--hair-2);
  box-shadow: 0 16px 36px -20px rgba(0, 0, 0, 0.7); }
.home-route-h { font-size: 14px; font-weight: 620; color: var(--ink); }
.home-route-q { font-size: 12px; color: var(--ink-4); line-height: 1.45; }
.home-route--primary { border-color: color-mix(in srgb, var(--gold) 42%, var(--hair)); }
.home-route--primary .home-route-h { color: var(--gold); }

.home-empty-clear { margin-top: 20px; }

/* ======================================================================
   6. THE LEDGER
   Publication state, save state and recovery state are durable facts about a
   person's work. A toast is a place a fact goes to die: it says the thing
   once, to whoever happened to be looking, and then removes it. These three
   get a permanent home instead, at the foot of the surface, where a status
   strip belongs on an instrument.

   It is also the answer to the composition problem. A band of readouts under
   a lit rule is what turns the bottom of the screen from leftover space into
   the base of a machined panel.
   ====================================================================== */

.home-ledger {
  position: relative; z-index: 1; flex: none;
  display: flex; align-items: stretch;
  width: 100%; max-width: var(--home-canvas);
  margin-inline: auto;
  padding: 11px var(--home-gutter) 13px;
  gap: 0;
}
.home-led {
  display: grid; gap: 3px; align-content: center;
  padding: 2px 22px;
  border-left: 1px solid var(--hair);
  min-width: 0;
}
.home-led:first-child { border-left: 0; padding-left: 0; }
.home-led-k {
  font-size: 9.5px; font-weight: 700; letter-spacing: 0.19em; text-transform: uppercase;
  color: var(--ink-4);
}
.home-led-v {
  font-family: var(--font-mono); font-size: 11.5px; color: var(--ink-2);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.home-led--warn .home-led-v { color: var(--warn); }
.home-led--warn .home-led-k { color: var(--warn); }
.home-led--on .home-led-v { color: var(--ok, #6fce9f); }
.home-led--push { margin-left: auto; text-align: right; }
.home-led--push { border-left: 1px solid var(--hair); }

/* ======================================================================
   7. SMALLER SCREENS
   Nothing here is a phone layout bolted on. The three bands survive; the
   canvas simply stops being narrower than the screen, the rail turns into one
   scrolling row of destinations, and the ledger stacks.
   ====================================================================== */

@media (max-width: 1080px) {
  .homeview { --home-canvas: 100%; }
  .home-body { grid-template-columns: 190px minmax(0, 1fr); }
}

@media (max-width: 860px) {
  .home-mast-b { display: block; }
  .home-acts { margin-top: 16px; justify-content: flex-start; }
  .home-find { flex: 1 1 12rem; max-width: none; }
  .home-body { grid-template-columns: minmax(0, 1fr); }
  .home-rail {
    display: flex; gap: 8px; overflow-x: auto; padding: 12px 0 10px;
    border-bottom: 1px solid var(--hair);
    scrollbar-width: none;
  }
  .home-rail::-webkit-scrollbar { display: none; }
  .home-rail-row { flex: none; }
  .home-rail-row.is-on::before { display: none; }
  .home-rail-row.is-on { box-shadow: inset 0 -2px 0 var(--gold); }
  .home-grid { padding-top: 18px; }
  .home-ledger { flex-wrap: wrap; gap: 4px 0; }
  .home-led--push { margin-left: 0; text-align: left; }
}

@media (max-width: 560px) {
  .homeview { --home-gutter: 16px; }
  .home-mast-a { min-height: 34px; }
  .home-h { font-size: 26px; }
  /* TWO ROWS, NOT THREE. The filter and the view toggle share the first row
     and the two verbs share the second, which gives the work about a hundred
     more pixels on a screen that has none to spare. */
  .home-acts { flex-wrap: wrap; gap: 8px; }
  .home-acts .tool { flex: 1 1 46%; justify-content: center; min-height: 44px; height: 44px; }
  .home-find { height: 44px; flex: 1 1 8rem; width: auto; max-width: none; }
  .home-seg { height: 44px; flex: 0 0 auto; }
  .home-segb { justify-content: center; height: 38px; }
  .home-led-v { white-space: normal; }
  .home-back { max-width: 62vw; height: 40px; }
  .home-more { min-width: 44px; min-height: 44px; }
  /* ONE COLUMN ON A PHONE. Two columns at 390 gave a 165px card, which is a
     cover too small to recognise, a name that wraps to two lines and then
     truncates, and a 44px menu control covering a quarter of the cover. One
     column makes the cover the object it is meant to be and gives every
     control room. Fewer things, bigger, is the correct answer on a phone. */
  .home-grid.is-matrix { grid-template-columns: minmax(0, 1fr) !important; }
  .home-grid.is-matrix .home-name { min-height: 0; }
  /* Past half a dozen, one column is a long scroll and the trade flips: two
     smaller covers beat one large one when the job is finding, not admiring.
     The attribute is set by measure() in js/orco-home.js. */
  .homeview[data-many="yes"] .home-grid.is-matrix { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .homeview[data-many="yes"] .home-glyph { font-size: 46px; }
  .homeview[data-many="yes"] .home-more { min-width: 38px; min-height: 38px; }
  /* The ledger keeps all three readouts on a phone and takes a third less
     room to do it. It was eating 150px of an 844px screen. */
  .home-led { padding: 4px 0; border-left: 0; gap: 1px; }
  .home-led--push { border-left: 0; }
  .home-led-k { font-size: 9px; letter-spacing: 0.16em; }
  .home-led-v { font-size: 11px; }
  .home-ledger { display: grid; grid-template-columns: 1fr 1fr; gap: 5px 18px; padding-block: 8px 10px; }
  .home-glyph { font-size: 64px; }
}

/* ======================================================================
   8. MOTION
   Every movement on this surface is a state change of 140ms or a surface
   growing over 200ms, and all of it is off when the machine says so.
   ====================================================================== */

@media (prefers-reduced-motion: reduce) {
  .homeview,
  .home-head,
  .home-grid { animation: none !important; }
  .home-card,
  .home-route,
  .home-ghost,
  .home-sheet { transition: none !important; }
  .home-card:hover,
  .home-route:hover { transform: none; }
}

/* ======================================================================
   9. A LOCAL REPAIR, and the reason it is here rather than upstream.

   Measured in the browser during this pass: in DARK mode, css/orco.css
   defines --radius, --radius-sm, --blur, --t-fast, --t-med, --good,
   --accent-soft, --glow-ring and --shadow-1/2/glow/btn nowhere. They exist
   only inside html[data-theme="light"] and inside the .stage/.thumb block.
   The palette rewrite moved the token table and those names did not travel.

   The visible result is not subtle: every var(--radius-sm) resolves to
   nothing, so the declaration is invalid and every .tool button, field and
   sheet on the default theme has square corners. It is an app-wide defect
   and css/orco.css belongs to another seat, so the real fix is reported
   rather than made here. What is here is scoped to this surface only, so
   Home is right today and the moment the tokens come back these rules
   resolve to the same values and can be deleted.
   ====================================================================== */

.homeview .tool,
.homeview .home-find,
.homeview .home-seg,
.homeview .home-ask-in { border-radius: var(--radius-sm, 10px); }
.homeview .home-ask-box,
.homeview .home-menu { border-radius: var(--radius, 14px); }
.homeview .tool {
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.homeview .tool:hover:not(:disabled) {
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.30), 0 10px 26px -16px rgba(0, 0, 0, 0.8);
}
.homeview .home-dot { background: var(--ok, #6fce9f); }
/* The menu was see-through: --panel is a 0.62-alpha navy and --blur, which
   was meant to frost what is behind it, is one of the tokens that went
   missing from the dark theme. A menu you can read the card through is not a
   menu. */
.homeview .home-menu {
  background: rgba(9, 14, 34, 0.97);
  border: 1px solid var(--hair-2);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  box-shadow: 0 22px 54px -20px rgba(0, 0, 0, 0.8);
}
html[data-theme="light"] .homeview .home-menu {
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 22px 54px -22px rgba(10, 16, 69, 0.35);
}
.homeview .home-ask-box { background: rgba(9, 14, 34, 0.98); }
html[data-theme="light"] .homeview .home-ask-box { background: rgba(255, 255, 255, 0.99); }
.homeview .home-ask-box { box-shadow: 0 34px 80px -28px rgba(0, 0, 0, 0.85); }
.homeview .home-segb:hover { background: color-mix(in srgb, var(--gold) 9%, transparent); color: var(--ink); }
.homeview .home-rail-row:hover { background: color-mix(in srgb, var(--gold) 8%, transparent); color: var(--ink); }
.homeview .home-mi:hover,
.homeview .home-mi:focus-visible { background: color-mix(in srgb, var(--gold) 10%, transparent); color: var(--ink); }
.homeview .home-move-row:hover { background: color-mix(in srgb, var(--gold) 9%, transparent); color: var(--ink); }

/* The corner ticks are the one ornament in the product, and on a card whose
   whole top half is an opaque cover only the bottom one was visible. Both, or
   it is not a pair. */
.homeview .home-card.tick-corners::before,
.homeview .home-card.tick-corners::after { z-index: 2; }

/* =====================================================================
   THE MAP. Added 2026-09-10.
   Three root destinations above the folders, because folders belong to
   whichever destination you are in. The selected one carries the gold
   underline, which is the fourth and last of the hairline's four uses in
   the visual direction. ================================================ */
.home-nav-host { margin: 0 0 22px; }

.nav-rail { display: block; }
.nav-list { list-style: none; margin: 0; padding: 0; display: block; }
.nav-li { margin: 0 0 2px; }

.nav-dest {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 0 12px;
  border: 0;
  border-left: 2px solid transparent;
  border-radius: var(--radius-sm);
  background: none;
  color: var(--ink-2);
  font-family: var(--font);
  font-size: 14px;
  font-weight: 560;
  text-align: left;
  cursor: pointer;
  transition: background var(--t-fast) var(--ease),
              color var(--t-fast) var(--ease),
              border-color var(--t-fast) var(--ease);
}
.nav-dest:hover { background: var(--surface); color: var(--ink); }
.nav-dest:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

/* Where you are. The gold bar on the leading edge rather than a filled
   background, so the selected row reads at a glance without becoming the
   loudest object on a screen whose subject is his work. */
.nav-dest.is-here {
  color: var(--ink);
  background: var(--surface);
  border-left-color: var(--gold);
  font-weight: 650;
}

.nav-label { flex: 1; }

/* A count is a fact, so it is set in the face used for facts. */
.nav-count {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}
.nav-dest.is-here .nav-count { color: var(--gold); }

@media (prefers-reduced-motion: reduce) {
  .nav-dest { transition-duration: 0s; }
}

/* The same map, in the slide sets. One component, two hosts, so the two
   surfaces cannot drift into two navigations. */
.lib-nav-host { margin: 0 0 18px; padding: 0 4px; }