/* ===================================================================
   hostna OS — the desktop, on every page
   -------------------------------------------------------------------
   WHAT THIS IS. The style has three parts and all three are borrowed
   rather than invented: GLASSMORPHISM (translucent layers over a blurred
   backdrop — backdrop-filter, --glass-a/--glass-b, hairline --stroke
   edges), the DESKTOP METAPHOR (a menubar, a floating window with a
   title bar and traffic lights, a dock, wallpaper behind everything),
   and BENTO layout inside the window. In this repository the whole thing
   is called Aurora — CLAUDE.md, "v6 Aurora design system" — and hostna
   OS is Aurora's desktop shell.

   WHY THIS FILE EXISTS. The shell was only ever real on two surfaces:
   the front page, which IS the application, and the Journal, which got
   it back by hand. Every other indexable address — 25 service pages, the
   legal set, the German cluster, the forms, search and 404 — was served
   a flat screen: theme 8.64/8.65 turned the desktop off for documents in
   os-page.css, in its own words "the wallpaper never shows on a
   document", "opaque: the surface is the screen, not a glass over
   scenery", "that window is gone (8.64)".

   The owner has since asked for the desktop on all of them. So this file
   supersedes that block. It is a LATER layer rather than an edit to it,
   for two reasons: os-page.css is edited by more than one session in
   this repository, and a superseding file that says why is easier to
   read — and to revert — than a diff through someone else's reasoning.
   Dropping this one enqueue restores 8.64/8.65 exactly.

   NOTHING HERE IS NEW. Every value is copied from os.css, which is what
   makes a page read as the same machine rather than as a theme that
   resembles it:

     the window     os.css:239   .win
     its inset ring os.css:246   .win::before
     the title bar  os.css:251   .winbar
     the menubar    os.css:171   .menubar
     the stage      os.css       .desk > .stage   (14px 16px 78px)

   LOAD ORDER. Enqueued against `hostna-os-page`, so it prints after
   os-page.css (whose flat-screen block it supersedes) and before
   os-blog.css and os-tablet.css (whose corrections must keep winning
   theirs). Ties are decided by print order; every rule below is
   `body.hostna-os-page …` = (0,2,1), the same shape os-page.css uses.
   No !important anywhere.
   =================================================================== */


/* ── 1. a ground under the wallpaper ────────────────────────────────
   The document surface paints --bg-base; the wall then covers it. Both
   are needed: the wall is fixed and clipped, so on a short page the
   ground is what shows through at the edges of a view transition. */
body.hostna-os-page { background: var(--bg-base); }


/* ── 2. the desk ────────────────────────────────────────────────────
   os-page.css:88 already makes .wall `position:fixed; inset:0;
   overflow:clip` on this surface — fixed rather than absolute because
   a page has no .desk to contain it and the blobs hang past the edges,
   which grew the document 188px wider than the viewport. Only the
   display switch is reversed here. */
body.hostna-os-page .wall { display: block; }


/* ── 3. the stage gives the window its margin ───────────────────────
   So the wallpaper reads as something the window sits ON rather than as
   a border around it. The app's own inset, to the pixel. */
body.hostna-os-page .stage { padding: 14px 16px var(--os-edge, 78px); }


/* ── 4. the window ──────────────────────────────────────────────────*/
body.hostna-os-page .win,
body.hostna-os-page .os-win--doc {
  /* RELATIVE, and it is load-bearing. .win declares no position of its
     own, so its ::before ring (os.css:246, inset:0, radius --r-win) was
     resolving against .stage and drawing a 26px-rounded ring around the
     whole stage — two curved wedges outside the window's top corners,
     which is exactly what was reported on the Journal. Positioned, the
     ring lands on the window it belongs to. */
  position: relative;

  /* Explicit, not height:100%. .stage is position:relative and grows
     with its content, so a percentage resolves against nothing: measured
     at 1440x900 the window came out 1595px tall. This is 8.65's own
     arithmetic — the viewport minus the menubar — minus the margin the
     stage now reserves above and below. */
  height: calc(100dvh - var(--bar-h) - 14px - var(--os-edge, 78px));
  min-height: 0;
  overflow: clip;

  border-radius: var(--r-win);
  border: 1px solid var(--stroke);
  box-shadow: var(--shadow-win);
  background: linear-gradient(155deg, var(--glass-a), var(--glass-b));
  /* perf: no backdrop-filter — the same reason as os.css .win. The document
     pages scroll INSIDE this window, so a page-length backdrop blur was
     re-sampled on every scrolled frame, on every one of ~100 pages. */
}
body.hostna-os-page .win::before,
body.hostna-os-page .os-win--doc::before {
  border-radius: var(--r-win);
  box-shadow: inset 0 1px 0 var(--spec), inset 0 0 0 1px rgba(255, 255, 255, .04);
}


/* ── 5. the title bar ───────────────────────────────────────────────*/
body.hostna-os-page .winbar {
  border-radius: var(--r-win) var(--r-win) 0 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, .06), transparent);
  -webkit-backdrop-filter: blur(var(--blur)) saturate(170%);
          backdrop-filter: blur(var(--blur)) saturate(170%);
}
html[data-theme="light"] body.hostna-os-page .winbar {
  background: linear-gradient(180deg, rgba(255, 255, 255, .5), transparent);
}


/* ── 6. the menubar ─────────────────────────────────────────────────*/
body.hostna-os-page .menubar {
  background: linear-gradient(180deg, var(--glass-a), var(--glass-b));
  -webkit-backdrop-filter: blur(12px) saturate(170%);
          backdrop-filter: blur(12px) saturate(170%);
}


/* ── 7. the scroller ────────────────────────────────────────────────
   The page scrolls INSIDE the window — 8.65's law, kept. Only the floor
   changes: os-page.css had the scroller reserve the dock's room
   (`padding-bottom: calc(30px + var(--os-edge))`) because the stage no
   longer did. The stage does again, so reserving it twice would leave a
   dead band under every page. */
body.hostna-os-page .scroll,
body.hostna-os-page .os-scroll--doc { padding-bottom: 30px; }

/* Except while the cookie bar is up. --os-edge is exactly the dock's
   footprint (os.css:3111 — bottom + height + gap), so at rest the window ends
   10px clear of the dock and 30px is enough. The bar then LIFTS the dock out
   of its own way (os-chrome.css:110/123) and nothing lifts the window, so the
   dock moves 100px (132 on phones) up INTO it. Measured at 1440x900 that put
   the last 59px of every page behind the dock, and the last thing on a page
   is .os-foot — the Impressum and cancellation links, which § 5 DDG and
   § 312k BGB require to be reachable rather than three-quarters covered.

   Reserving the lift restores the same 10px clearance. The bar removes itself
   once a choice is stored, :has() stops matching, and the reserve goes with
   it. */
body.hostna-os-page:has(.consent-bar) .scroll,
body.hostna-os-page:has(.consent-bar) .os-scroll--doc { padding-bottom: 130px; }

/* Anchor offsets resolve against the window's scroller now, and the
   menubar is outside it — so the 76px that kept a heading clear of the
   menubar is a gap with nothing in it. .sv-sec is the service pages'
   section anchor (os-page.css:930). */
body.hostna-os-page .sv-sec,
body.hostna-os-page .os-doc :where(h2, h3) { scroll-margin-top: 16px; }


/* ── 8. phones ──────────────────────────────────────────────────────
   The ONE WINDOW BOX (os-chrome.css:265) already owns the geometry
   below 700px — 6px margin, 20px corner, the window IS the screen. Only
   the surface is restored; the insets stay where that file puts them. */
@media (max-width: 700px) {
  body.hostna-os-page .stage { padding: var(--os-gap) var(--os-gap) var(--os-edge); }
  body.hostna-os-page .win,
  body.hostna-os-page .os-win--doc {
    border-radius: var(--r-win);
    /* NO --bar-h. The menubar is display:none below 700
       (os-chrome.css:268), so subtracting its 38px reserves room for a
       bar that is not on screen — measured at 390x844 the window came
       out 732px where 770px fits, and the missing 38px read as a gap
       between the window and the dock. */
    height: calc(100dvh - var(--os-gap) - var(--os-edge));
  }
  /* the phone lift is 132px rather than 100 (os-chrome.css:123) */
  body.hostna-os-page:has(.consent-bar) .scroll,
  body.hostna-os-page:has(.consent-bar) .os-scroll--doc { padding-bottom: 162px; }
}


/* ── 9. PRINT — the window must not become the page ─────────────────
   This is the one place a windowed document is genuinely worse than a
   flowing one, and it matters most for the surfaces that are most often
   printed: the AGB, the Widerrufsbelehrung, the DPA, an invoice-adjacent
   policy. A fixed-height box with overflow:clip prints ONE screenful and
   silently drops the rest — a customer printing the terms would get page
   one and nothing else, which for a document incorporated under
   § 305 (2) BGB is not a cosmetic problem.

   So printing unwinds the desktop completely: no wallpaper, no glass, no
   window, no dock — just the text, flowing across as many sheets as it
   needs. */
@media print {
  body.hostna-os-page {
    height: auto;
    overflow: visible;
    background: #fff;
  }
  body.hostna-os-page .wall,
  body.hostna-os-page .menubar,
  body.hostna-os-page .winbar,
  body.hostna-os-page .os-pagedock,
  body.hostna-os-page .consent-bar { display: none; }

  body.hostna-os-page .stage { padding: 0; position: static; }
  body.hostna-os-page .win,
  body.hostna-os-page .os-win--doc {
    height: auto;
    min-height: 0;
    overflow: visible;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background: none;
    -webkit-backdrop-filter: none;
            backdrop-filter: none;
  }
  body.hostna-os-page .win::before,
  body.hostna-os-page .os-win--doc::before { display: none; }
  body.hostna-os-page .scroll,
  body.hostna-os-page .os-scroll--doc {
    height: auto;
    max-height: none;
    overflow: visible;
    padding: 0;
  }
  /* a sticky rail inside a printed document repeats on every sheet */
  body.hostna-os-page .bl-toc,
  body.hostna-os-page .order-sum { position: static; }
}


/* ── 10. reduced motion ─────────────────────────────────────────────
   os-page.css already disables the window's entrance animation on this
   surface; nothing here reintroduces motion. Listed so the next reader
   does not go looking. */