/* Living Window navigation (site/shared/panes.js). Loaded by header.js on pages with <html data-design="lw">.
   Panes are opaque leaded art (a hand-made leaded SVG) with a scrim for the label: no glass on glass, and the label
   keeps 4.5:1 over any picture. Desktop: a slim rail on the left. Phone and tablet: a 56px row at the bottom. */
.lw-nav { position: fixed; z-index: 55; display: none; margin: 0; font-family: var(--font-ui, var(--font-body)); }
.lw-pane {
  position: relative; isolation: isolate; display: flex; align-items: center; gap: var(--space-2, 8px); min-width: 0; min-height: var(--hit, 44px); box-sizing: border-box;
  padding: 0 var(--space-3, 12px) 0 var(--space-2, 8px); overflow: hidden; border-radius: var(--radius-small, 16px);
  color: #fff; text-decoration: none; font: 600 var(--text-14, 14px)/1.1 var(--font-ui, var(--font-body)); -webkit-tap-highlight-color: transparent;
  transform: scale(var(--lw-press, 1)); transform-origin: center;
  box-shadow: inset 0 0 0 1.5px rgb(14 8 26 / .72), inset 0 0 0 2.5px rgb(255 255 255 / .16), 0 4px 14px rgb(0 0 0 / .3);
}
/* The art: one hand-made leaded SVG per pane (shared/panes/*.svg), tinted by the scene's own accent so every theme and colourway keeps its colours.
   This is the one place that names the five files; the gradient behind them shows if an SVG fails to load. */
.lw-pane, .lw-opening {
  --lw-tint: color-mix(in srgb, var(--accent, #c7a8ff) 34%, transparent);
  --lw-gradient: linear-gradient(160deg, color-mix(in srgb, var(--light, #ffe7a3) 30%, transparent), color-mix(in srgb, var(--accent, #c7a8ff) 40%, transparent) 55%, color-mix(in srgb, var(--horizon, #41286e) 80%, black));
}
.lw-pane[data-key="armory"] { --lw-art: url("https://seppo.app/shared/panes/armory.svg?v=1"); }
.lw-pane[data-key="whisperglass"] { --lw-art: url("https://seppo.app/shared/panes/whisperglass.svg?v=1"); }
.lw-pane[data-key="almanack"] { --lw-art: url("https://seppo.app/shared/panes/almanack.svg?v=1"); }
.lw-pane[data-key="board"] { --lw-art: url("https://seppo.app/shared/panes/board.svg?v=1"); }
.lw-pane[data-key="account"] { --lw-art: url("https://seppo.app/shared/panes/account.svg?v=1"); }
.lw-pane-art {
  position: absolute; inset: 0; z-index: -2; filter: saturate(1.1) brightness(.85);
  background: linear-gradient(var(--lw-tint), var(--lw-tint)), var(--lw-art, none) center / cover no-repeat, var(--lw-gradient);
  background-blend-mode: soft-light, normal, normal;
  transition: filter var(--spring-time-smooth, 300ms) var(--spring-smooth, ease);
}
html[data-time="day"] .lw-pane-art { filter: saturate(1.15) brightness(1.02); }
.lw-pane::before { content: ""; position: absolute; inset: 0; z-index: -1; background: rgb(12 8 28 / .58); transition: background var(--spring-time-smooth, 300ms) var(--spring-smooth, ease); }
.lw-pane-icon { flex: none; display: grid; place-items: center; width: 28px; height: 28px; }
.lw-pane-icon svg { width: 28px; height: 28px; }
.lw-pane-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lw-pane:hover .lw-pane-art, .lw-pane:focus-visible .lw-pane-art { filter: saturate(1.25) brightness(.9); }
@media (hover: hover) { .lw-pane:hover::before { background: rgb(12 8 28 / .46); } }
.lw-pane:focus-visible { outline: none; box-shadow: var(--focus-ring), inset 0 0 0 1.5px rgb(14 8 26 / .72); }
/* The open section: lit from behind, like light through that pane, with a gold sill under the name */
.lw-pane[aria-current="page"] { box-shadow: inset 0 0 0 1.5px rgb(14 8 26 / .72), 0 0 0 2px var(--ui-label, #e9b84f), 0 0 18px color-mix(in srgb, var(--ui-label, #e9b84f) 45%, transparent); }
.lw-pane[aria-current="page"]::before { background: rgb(12 8 28 / .5); }
.lw-pane[aria-current="page"] .lw-pane-art { filter: saturate(1.2) brightness(.9); }
.lw-pane[aria-current="page"] .lw-pane-name { box-shadow: 0 3px 0 -1px var(--ui-label, #e9b84f); }

/* The shared-element copy that grows from the pane to the screen before the page changes */
.lw-opening { position: fixed; z-index: 80; margin: 0; transform-origin: 0 0; will-change: transform, opacity; border-radius: var(--radius-small, 16px); pointer-events: none; background: linear-gradient(var(--lw-tint), var(--lw-tint)), var(--lw-art, none) center / cover no-repeat, var(--lw-gradient); background-blend-mode: soft-light, normal, normal; filter: brightness(.9); }

/* Desktop rail (900px wide and 440px tall or more, every page except the home; under 620px tall the tiles are 56px so five fit even in a 500px window): the five panes in a slim column at the left edge, the
   ONE section switcher at that size. --rail-width (rail + 14px gap) is the only thing the pages need to know: it moves the body (app shell
   and page frames), the corner bar and the tool head, so no tool CSS changes. header.js sets html.lw-rail (not on the home, not classic,
   seppo.app only) before the first paint, so the room is reserved before the rail itself arrives; panes.js removes it again if it cannot mount. */
@media (min-width: 900px) and (min-height: 440px) {
  html.lw-rail { --rail-width: 90px; }
  html.lw-rail body { padding-left: calc(14px + var(--rail-width)); }
  html.lw-rail .seppo-bar { left: calc(14px + var(--rail-width)); }
  html.lw-rail .seppo-tool-head { left: calc(20px + var(--rail-width) + var(--seppo-bar-width, 110px) + 10px); }
  .lw-nav[data-rail] { display: flex; flex-direction: column; gap: var(--space-2, 8px); top: 20px; left: 14px; width: 76px; }
  .lw-nav[data-rail] .lw-pane { flex-direction: column; justify-content: center; gap: 2px; width: 100%; height: 68px; padding: 4px 3px; border-radius: 18px; font-size: 11.5px; text-align: center; }
  .lw-nav[data-rail] .lw-pane-icon, .lw-nav[data-rail] .lw-pane-icon svg { width: 24px; height: 24px; }
  /* Long names (German, French, Spanish) wrap onto a second line instead of being cut */
  .lw-nav[data-rail] .lw-pane-name { max-width: 100%; white-space: normal; overflow-wrap: anywhere; hyphens: auto; line-height: 1.05; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; }
}
/* Wide windows: the rail opens up to icon and name side by side */
@media (min-width: 900px) and (min-height: 440px) and (max-height: 619px) {
  .lw-nav[data-rail] { top: 12px; gap: 6px; }
  .lw-nav[data-rail] .lw-pane { height: 56px; padding: 3px; font-size: 11px; }
  .lw-nav[data-rail] .lw-pane-icon, .lw-nav[data-rail] .lw-pane-icon svg { width: 22px; height: 22px; }
}
@media (min-width: 1500px) and (min-height: 440px) {
  html.lw-rail { --rail-width: 182px; }
  .lw-nav[data-rail] { width: 168px; }
  .lw-nav[data-rail] .lw-pane { flex-direction: row; justify-content: flex-start; gap: var(--space-2, 8px); height: 52px; padding: 0 var(--space-3, 12px) 0 var(--space-2, 8px); border-radius: var(--radius-small, 16px); font-size: var(--text-14, 14px); text-align: left; }
  .lw-nav[data-rail] .lw-pane-icon, .lw-nav[data-rail] .lw-pane-icon svg { width: 28px; height: 28px; }
  .lw-nav[data-rail] .lw-pane-name { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}
/* Phone, tablet and short windows (no room for the rail): the bottom row on pages without a bar, folded away while scrolling down */
@media (max-width: 899px) {
  .lw-nav:not([data-phone="off"]) {
    display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; left: 10px; right: 10px; bottom: calc(8px + var(--safe-bottom, 0px)); height: 56px;
    transition: transform var(--spring-time-smooth, 300ms) var(--spring-smooth, ease);
  }
  .lw-nav.folded:not(:has(:focus-visible)) { transform: translateY(calc(100% + 24px + var(--safe-bottom, 0px))); }
  .lw-nav .lw-pane { flex-direction: column; justify-content: center; gap: 2px; padding: 3px 2px; border-radius: 14px; font-size: 11px; text-align: center; }
  .lw-nav .lw-pane-icon, .lw-nav .lw-pane-icon svg { width: 22px; height: 22px; }
  /* Long names (German, French, Spanish) wrap onto a second line instead of being cut */
  .lw-nav .lw-pane-name { max-width: 100%; white-space: normal; overflow-wrap: anywhere; hyphens: auto; line-height: 1.05; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; }
  html.lw-dock:not(.kb-open) body { padding-bottom: calc(72px + var(--safe-bottom, 0px)); }
}
@media (max-width: 400px) { .lw-nav .lw-pane { font-size: 10px; } }
/* Hidden while the keyboard is open and on short screens; the page then needs no room for it */
html.kb-open .lw-nav { display: none !important; }
@media (max-width: 899px) and (max-height: 500px), (max-height: 439px) {
  .lw-nav { display: none !important; }
  html.lw-dock body { padding-bottom: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .lw-pane, .lw-pane-art, .lw-pane::before, .lw-nav { transition: none !important; }
  .lw-pane { transform: none; }
}

/* ---- Every page (Living Window as the default look; <html data-design="classic"> leaves all of this out) ---- */
:root:not([data-design="classic"]) { -webkit-tap-highlight-color: transparent; }
:root:not([data-design="classic"]) body { touch-action: manipulation; }
/* Page titles are the one place Pirata One appears (with the logo); headings are Cormorant, everything else Alegreya Sans */
:root:not([data-design="classic"]) h1 { font-family: var(--font-page-title); font-weight: 400; }
/* Controls answer the finger at once with a spring (CSS linear() from tokens.css, so a second touch retargets from where it is) */
:root:not([data-design="classic"]) :is(button, a.button, .btn, summary, select, [role="button"]):not(.lw-pane) {
  transition: scale var(--spring-time-snappy) var(--spring-snappy), background-color .12s, border-color .12s, box-shadow .12s, color .12s, opacity .12s, filter .12s;
}
:root:not([data-design="classic"]) :is(button, a.button, .btn, summary, [role="button"]):not(.lw-pane, :disabled):active { scale: .96; }
/* Labels were drawn for letter-spaced capitals; in the text font they read as plain words */
:root:not([data-design="classic"]) :is(button, a.button, .btn, summary, select) { letter-spacing: .01em; }
/* Touch screens: 44px minimum targets, 16px fields (no zoom on focus), header controls at full size.
   Everything that only sets a default sits in :where(), so any page rule (almanack's min-height: 0 on .ev, a round 26px button)
   wins without a fight. Small round or narrow controls keep their look and get a 44px invisible touch layer on ::before
   (::after is used by some of them for their own marks). */
@media (pointer: coarse) {
  :where(:root:not([data-design="classic"]) :is(button, a.button, .btn, summary, select, [role="button"], a.place):not(.lw-pane, .tick, .info, .prop-reset, .group-reset, .swatch, .chip-remove, .ai-help-button, .pin-toggle, .sf-row-action, .sf-run-dot-button, .icon-button, .tg-daybtn, .pdf-color-menu > button, .section-head button, .menu-swatches button, [class*="-more"], [class*="-rename"], [class*="-delete"])) { min-height: var(--hit, 44px); }
  :where(:root:not([data-design="classic"]) :is(input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"], [type="color"]), textarea, select)) { font-size: max(16px, 1em); }
  :where(:root:not([data-design="classic"]) :is(input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"], [type="color"], [type="hidden"]), select)) { min-height: var(--hit, 44px); }
  /* Small controls keep their look and get an invisible touch layer on ::before (::before because mirrorgate .tick and pages.css
     .ai-help-button already draw their own ::after layer). Real controls only (button, a, summary), never containers, popovers or
     display:contents boxes. Three kinds, by how much room the control has around it:
     - spread: both ways to 44px (alone in its row);
     - tall: 44px upward and downward only, never sideways (icon buttons that sit side by side with a gap under 12px, so one layer can
       never cover the next button: Fableknot row tools, Hollowkeep tile actions, Worldquill tool buttons, Sketchmere side rows);
     - none: wrapping swatch grids and chip removers are 24px or more already and stay as drawn. */
  :where(:root:not([data-design="classic"]) :is(button, a, summary, [role="button"]):is(.pin-toggle, .sf-row-action, .sf-run-dot-button, .pdf-color-menu > button, .section-head button, .menu-swatches button, [class*="-more"], [class*="-rename"], [class*="-delete"]):not([popover])) { position: relative; }
  :where(:root:not([data-design="classic"]) :is(button, a, summary, [role="button"]):is(.pin-toggle, .sf-row-action, .sf-run-dot-button, .pdf-color-menu > button, .section-head button, .menu-swatches button, [class*="-more"], [class*="-rename"], [class*="-delete"]):not([popover]))::before { content: ""; position: absolute; left: 50%; top: 50%; width: max(100%, var(--hit, 44px)); height: max(100%, var(--hit, 44px)); transform: translate(-50%, -50%); }
  :where(:root:not([data-design="classic"]) :is(button, a):is(.icon-button, .button-like, .info, .prop-reset, .group-reset)) { position: relative; }
  :where(:root:not([data-design="classic"]) :is(button, a):is(.icon-button, .button-like, .info, .prop-reset, .group-reset))::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: max(100%, var(--hit, 44px)); transform: translateY(-50%); }
  /* Grid cells (calendar days) sit edge to edge: their layer is exactly the cell, so a tap near an edge never reaches a neighbour */
  :where(:root:not([data-design="classic"]) :is(button, a):is(.mini-day, .day .num, .tg-daybtn)) { position: relative; }
  :where(:root:not([data-design="classic"]) :is(button, a):is(.mini-day, .day .num, .tg-daybtn))::before { content: ""; position: absolute; inset: 0; }
  :root:not([data-design="classic"]) .seppo-bar .bar-search, :root:not([data-design="classic"]) .more-toggle { width: var(--hit, 44px); height: var(--hit, 44px); min-height: 0; }
  :root:not([data-design="classic"]) .bar-capsule { height: var(--hit, 44px); min-height: 0; }
}
/* Page changes slide with the same spring as everything else */
:root:not([data-design="classic"]):active-view-transition-type(slide)::view-transition-new(page-content) { animation: slide-in var(--spring-time-smooth, .42s) var(--spring-smooth, ease) .04s both; }
@media (prefers-reduced-motion: reduce) {
  :root:not([data-design="classic"]) :is(button, a.button, .btn, summary, select, [role="button"]) { transition: none; }
  :root:not([data-design="classic"]) :is(button, a.button, .btn, summary, [role="button"]):active { scale: 1; }
}


/* Tool and card names are headings, not page titles: Pirata One stays with the logo and the page title */
:root:not([data-design="classic"]) :is(.landing-menu:not(.folded) .tool strong, .seppo-sheet .sheet-group .sheet-row strong, .seppo-sheet .sheet-row strong, .card strong, .tool strong) { font-family: var(--font-heading); font-weight: 600; letter-spacing: 0; }

/* Night: white capsule text over the bright moon read 4.2:1; a dark veil behind the header capsule lifts it */
html:not([data-design="classic"])[data-time="night"] .bar-capsule { background-color: rgb(12 8 28 / .38); }

/* Narrow phones: the page title (Pirata One is wide) must not push the AI-PC light under the header capsule: the small tool plate steps aside so the name stays whole */
@media (max-width: 400px) { :root:not([data-design="classic"]) .pc-light { margin-inline: 0; } :root:not([data-design="classic"]) .chat-head .brand-tile { display: none; } :root:not([data-design="classic"]) .chat-head h1 .app-name { letter-spacing: -.01em; } }

/* ---- Tool frame (docs/project/tool-redesign-plan.md): one-row header on phones, Sections sheet, ---- */
/* Header on phones: logo, tool name, search, picture. Language and theme live in the settings sheet (tap the picture); the landing keeps its own capsule. */
@media (max-width: 520px) {
  /* Only once the picture or initials are there (signed in): signed out, or before /api/access answers, the capsule keeps its language code and theme icon so it is never an empty pill */
  :root:not([data-design="classic"]):not([data-page="home"]) .bar-capsule:has(.cap-me:not([hidden]) :is(img, .bar-avatar:not(:empty))) :is(.cap-language, .cap-theme) { display: none; }
  :root:not([data-design="classic"]):not([data-page="home"]) .bar-capsule:has(.cap-me:not([hidden]) :is(img, .bar-avatar:not(:empty))) { padding: 0 3px; gap: 0; min-width: var(--hit, 44px); justify-content: center; }
  :root:not([data-design="classic"]) .seppo-tool-head .tool-description { display: none; }
}
/* The Sections sheet: a bottom sheet (native popover) with the painted panes as 56px rows, Home, and the tool's own actions */
.lw-sections {
  position: fixed; inset: auto 0 0 0; margin: 0 auto; width: min(560px, 100%); max-height: min(86dvh, 640px); overflow-y: auto; overscroll-behavior: contain; box-sizing: border-box;
  padding: var(--space-2, 8px) var(--space-4, 16px) calc(var(--space-4, 16px) + var(--safe-bottom, 0px)); border: 0; border-radius: var(--radius-panel, 28px) var(--radius-panel, 28px) 0 0;
  overflow-x: hidden; background: rgb(var(--lg-ink, 16 16 20) / .94); color: var(--ui-text, #fff); font-family: var(--font-ui, var(--font-body)); box-shadow: var(--lg-shadow); display: none;
}
.lw-sections:popover-open { display: grid; gap: var(--space-3, 12px); }
.lw-sections::backdrop { background: rgb(0 0 0 / .45); }
.lw-sections h2 { margin: 0; font: 600 var(--text-20, 20px)/1.1 var(--font-heading, serif); color: var(--ui-title, #f6e7bd); }
.lw-sections h2, .lw-sections h3 { text-transform: none; letter-spacing: 0; }
.lw-sections h3 { margin: 0; font: 600 var(--text-14, 14px)/1.2 var(--font-ui, sans-serif) !important; color: var(--ui-text-soft, #ddd); }
.lw-sections button.lw-sections-handle { justify-self: center; display: grid; place-items: center; width: 100%; min-height: var(--hit, 44px); margin: -4px 0 -12px; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; cursor: grab; touch-action: none; }
.lw-sections-handle span { width: 44px; height: 5px; border-radius: 3px; background: rgb(255 255 255 / .45); }
.lw-sections-panes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.lw-sections-panes .lw-pane:last-child:nth-child(odd) { grid-column: 1 / -1; }
.lw-sections .lw-pane { flex-direction: column; justify-content: center; gap: 4px; min-height: 84px; padding: var(--space-2, 8px); text-align: center; font-size: var(--text-16, 16px); }
.lw-sections .lw-pane:last-child:nth-child(odd) { min-height: 64px; }
.lw-sections .lw-pane::before { background: rgb(12 8 28 / .4); }
.lw-sections .lw-pane-icon, .lw-sections .lw-pane-icon svg { width: 30px; height: 30px; }
.lw-sections-home, .lw-sections-action {
  display: flex; align-items: center; justify-content: flex-start; min-height: var(--hit, 44px); box-sizing: border-box; padding: 0 var(--space-4, 16px); border: 0; border-radius: 999px; width: 100%; text-align: left;
  background: var(--lg-control); box-shadow: var(--lg-control-rim); color: inherit; text-decoration: none; font: 500 var(--text-16, 16px)/1.2 var(--font-ui, var(--font-body)); cursor: pointer; min-width: 0; overflow: hidden; overflow-wrap: anywhere; white-space: normal;
}
.lw-sections-tool { display: grid; gap: 8px; }
.lw-sections-tool[hidden] { display: none; }
.lw-sections-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.lw-sections-actions .lw-sections-action:only-child { grid-column: 1 / -1; }
.lw-sections :focus-visible { outline: none; box-shadow: var(--focus-ring); }
@media (min-width: 521px) { .lw-sections:popover-open { margin-bottom: 24px; border-radius: var(--radius-panel, 28px); } }
@media (prefers-reduced-motion: reduce) { .lw-sections, .lw-sections * { transition: none !important; } }

/* No duplicate information: a page that gets the injected tool head (logo, tool name, picture) must not also draw its own title under it
   (Armoryhall and Reelhearth printed the name twice, once as a ghost under the logo, and their page header was a second glass strip with a second language switcher behind it). The head is the one place the tool name and the preferences show. */
:root:not([data-design="classic"]):has(.seppo-tool-head) header.glass { visibility: hidden; } /* not display:none: the strip keeps the room that holds the page below the fixed head */

/* Where no top row of sections exists (tool pages with a bottom bar or a tool head, 521px and wider) the Command Sheet is the only
   way to the other sections: Account and What is new (the You group) come first in it. */
@media (min-width: 521px) and (max-width: 899px), (min-width: 521px) and (max-height: 439px) {
  :root:not([data-design="classic"]):has(.seppo-tabbar, .seppo-tool-head) .seppo-sheet .sheet-group[data-group="you"] { order: -1; }
}

/* Grounds: by day the phone header let the page that scrolls under it show through (the glass is 84% milk white and has no blur of its own:
   the Download button ghosted through the header on the item page; Almanack measured 0.206, see redesign-plan.md "Grounds"). 97% milk white keeps the glass look and hides the page. */
@media (max-width: 520px) {
  /* shell.css sets the 84% milk white with an id-level selector, and only where document scroll is on and the scene is not the workspace:
     the same conditions here, for the page-mode tool head (Armoryhall, Mirrorgate, Scrollforge, admin, docs) and the app-mode header (Almanack, Hollowkeep) */
  html[data-time="day"]:not([data-design="classic"]):not([data-scene="workspace"]):not(.no-doc-scroll) :is(.seppo-tool-head, [data-seppo-bar="app"] #main > header) { background-color: rgb(252 249 242 / .97) !important; }
}