/* wallhelm's base: fonts, the page, and what every board shares
   (doc/spec.md §4). Tokens come from tokens.css. */

@font-face { font-family: 'Geist'; src: url('fonts/geist.woff2') format('woff2'); font-weight: 100 900; font-display: swap; }
@font-face { font-family: 'Geist Mono'; src: url('fonts/geist-mono.woff2') format('woff2'); font-weight: 100 900; font-display: swap; }
@font-face { font-family: 'Instrument Serif'; src: url('fonts/instrument-serif.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Instrument Serif'; src: url('fonts/instrument-serif-italic.woff2') format('woff2'); font-weight: 400; font-style: italic; font-display: swap; }

/* No box-sizing reset: the boards are drawn with the browser's own, and
   a 1280px section with 28px sides is 1336 wide on them too. */
html { -webkit-text-size-adjust: 100%; }
/* A board's inline display must not show what is hidden (its menus). */
[hidden] { display: none !important; }
/* A headline's italic words: the ink by day, lilac by night (board Dark). */
h1 > span[style*="italic"], h2 > span[style*="italic"] { color: var(--accent); }
body { margin: 0; background: var(--ground); color: var(--ink); font-family: var(--sans); -webkit-font-smoothing: antialiased; }
a { color: var(--ink); }
a:hover { color: var(--ink); }
pre { margin: 0; }
img, svg { max-width: 100%; }
summary { cursor: pointer; list-style: none; }
summary::-webkit-details-marker { display: none; }
button, input, select, textarea { font: inherit; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; border-radius: 6px; }
/* A time field's focus is on its inner parts: ring the field. */
input[type="time"]:focus-within { outline: 2px solid var(--ink); outline-offset: 2px; }
::selection { background: var(--lilac); color: #17161A; }

/* The boards draw in light hexes; these follow the theme. A CSS rule wins
   over an SVG presentation attribute. */
[fill="#17161A"] { fill: var(--ink); }
[stroke="#17161A"] { stroke: var(--ink); }
[fill="#E2DBD0"] { fill: var(--off); }
[stroke="#57534E"] { stroke: var(--ink2); }
[fill="#F4F0EA"] { fill: var(--ground); }
[fill="#FBFAF7"] { fill: var(--surface); }
[stroke="#F4F0EA"] { stroke: var(--primary-ink); }

/* Motion (board Motion): one ease, a few durations. */
@keyframes wh-rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes wh-rise-lg { from { opacity: 0; transform: translateY(60px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes wh-blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
@keyframes wh-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes wh-fill { 0% { width: 28%; } 100% { width: 72%; } }
@keyframes wh-eq { 0% { transform: scaleY(.45); } 100% { transform: scaleY(1); } }
@keyframes wh-toast { 0%, 8% { opacity: 0; transform: translateY(-12px); } 14%, 70% { opacity: 1; transform: none; } 78%, 100% { opacity: 0; transform: translateY(-12px); } }
@keyframes wh-ring { 0%, 100% { box-shadow: 0 0 0 2px var(--ink), 0 0 0 5px var(--apricot); } 50% { box-shadow: 0 0 0 2px var(--ink), 0 0 0 9px rgba(237, 205, 184, .55); } }
@keyframes wh-slide { 0%, 10% { opacity: 0; transform: translateX(30px); } 22%, 80% { opacity: 1; transform: none; } 92%, 100% { opacity: 0; transform: translateX(30px); } }
@keyframes wh-dot { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }
@keyframes wh-drop { 0%, 10% { opacity: 0; transform: translateY(-24px) scale(.96); } 18%, 75% { opacity: 1; transform: none; } 85%, 100% { opacity: 0; transform: translateY(-24px) scale(.96); } }
@keyframes wh-twinkle { 0%, 62% { opacity: 0; } 68%, 86% { opacity: 1; } 94%, 100% { opacity: 0; } }
@keyframes wh-breathe { 0%, 100% { opacity: .72; } 50% { opacity: 1; } }
@keyframes wh-on { from { opacity: 0; } to { opacity: 1; } }
@keyframes wh-seq { 0% { opacity: 0; } 12%, 70% { opacity: 1; } 85%, 100% { opacity: 0; } }
@keyframes wh-flicker { 0%, 90%, 100% { opacity: 1; } 91% { opacity: .15; } 92% { opacity: 1; } 94% { opacity: .25; } 95% { opacity: 1; } }
@keyframes wh-drift { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(28px, 20px); } }
@keyframes wh-type { from { max-width: 0; } to { max-width: 22ch; } }

/* Settings › Appearance › Motion: "Always calm", and the system's own ask. */
:root[data-motion="calm"] *, :root[data-motion="calm"] *::before, :root[data-motion="calm"] *::after { animation: none !important; transition: none !important; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; scroll-behavior: auto !important; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* A visually hidden label, as the boards' screen-reader labels are. */
.wh-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (max-width: 760px) { .wh-wide-only { display: none !important; } }
@media (max-width: 1100px) { .wh-toc, .wh-rail { display: none !important; } }

/* The theme switch in the footer follows what was picked. */
[data-on^="theme:"][aria-pressed="true"] { background: var(--surface) !important; box-shadow: 0 1px 2px rgba(var(--hair), 0.12) !important; color: var(--ink) !important; }
[data-on^="theme:"][aria-pressed="false"] { background: transparent !important; box-shadow: none !important; color: var(--ink2) !important; }

/* Terminals: xterm.js inside the boards' dark frames. */
.wh-term .xterm { padding: 18px 20px; height: 100%; }
.wh-term .xterm-viewport { background: transparent !important; }

/* The toast for answers and refusals in the app. */
.wh-toast-live { position: fixed; z-index: 50; right: 20px; bottom: 20px; max-width: 360px; padding: 12px 16px; border-radius: 14px; background: var(--surface); color: var(--ink); box-shadow: 0 0 0 1px rgba(var(--hair), 0.08), 0 20px 40px -18px rgba(40, 30, 20, 0.45); font-size: 14px; animation: wh-rise 240ms var(--ease) both; }

/* A page's frame takes its board's clicks and is no box of its own. */
.wh-page { display: contents; }

/* What a page says briefly (pages::say), in the toast's look. */
#wh-said:not(:empty) { position: fixed; z-index: 50; left: 50%; bottom: 20px; transform: translateX(-50%); max-width: min(420px, calc(100vw - 32px)); padding: 12px 16px; border-radius: 14px; background: var(--surface); color: var(--ink); box-shadow: 0 0 0 1px rgba(var(--hair), 0.08), 0 20px 40px -18px rgba(40, 30, 20, 0.45); font-size: 14px; animation: wh-rise 240ms var(--ease) both; }

/* The phone (boards Header 5 and AppNav). Wide, the desk header and the
   sidebar in its place; narrow, the phone header and the drawer. */
@media (min-width: 761px) { .wh-narrow-only { display: none !important; } }
.wh-phone-head { display: flex; justify-content: space-between; align-items: center; padding: 14px 16px; border-bottom: 1px solid rgba(var(--hair), 0.07); background: var(--ground); }
.wh-phone-menu > summary { list-style: none; width: 44px; height: 44px; border-radius: 50%; background: var(--chip); color: var(--ink); display: flex; align-items: center; justify-content: center; cursor: pointer; position: relative; z-index: 61; }
.wh-phone-menu > summary::-webkit-details-marker { display: none; }
.wh-phone-menu[open] > summary { background: var(--primary-bg); color: var(--primary-ink); }
.wh-phone-sheet { position: fixed; inset: 0; z-index: 60; display: flex; flex-direction: column; background: var(--ground); }
.wh-drawer-toggle { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.wh-drawer-button, .wh-drawer-shade { display: none; }
.wh-side, .wh-drawer, .wh-drawer-nav { display: contents; }
@media (max-width: 760px) {
  .wh-drawer-button { display: flex; position: fixed; left: 16px; bottom: 16px; z-index: 46; width: 48px; height: 48px; border-radius: 50%; align-items: center; justify-content: center; background: var(--surface); box-shadow: 0 0 0 1px rgba(var(--hair), 0.08), 0 12px 28px -12px rgba(40, 30, 20, 0.45); cursor: pointer; }
  .wh-drawer:has(.wh-drawer-toggle:focus-visible) .wh-drawer-button { outline: 2px solid var(--ink); outline-offset: 2px; }
  .wh-side { display: block; position: fixed; inset: 0 auto 0 0; z-index: 45; width: min(300px, 86vw); overflow-y: auto; transform: translateX(-102%); transition: transform 240ms var(--ease); }
  .wh-side > aside { width: 100% !important; min-height: 100%; }
  .wh-drawer:has(.wh-drawer-toggle:checked) .wh-side { transform: none; }
  .wh-drawer:has(.wh-drawer-toggle:checked) .wh-drawer-shade { display: block; position: fixed; inset: 0; z-index: 44; background: rgba(18, 17, 21, 0.32); }
}
/* A window on a phone at its own size, scrolled sideways (behave.rs). */
.wh-term-wide { overflow-x: auto !important; -webkit-overflow-scrolling: touch; }
@media (max-width: 760px) {
  /* The app's pages leave the drawer's button room at their foot. */
  .wh-drawer ~ * { padding-bottom: 80px; }
}
/* Board Header 2: scrolled, the header floats as a frosted pill. */
.wh-desk-head { position: sticky; top: 0; z-index: 30; }
.wh-desk-head > header { transition: transform 240ms var(--ease), border-radius 240ms var(--ease), box-shadow 240ms var(--ease), max-width 240ms var(--ease); }
.wh-desk-head.wh-scrolled > header { max-width: 960px; margin: 0 auto; transform: translateY(18px); border-radius: 999px; background: rgba(var(--surface-rgb), 0.78) !important; backdrop-filter: blur(16px); border-bottom: 0 !important; box-shadow: 0 0 0 1px rgba(var(--hair), 0.07), 0 12px 32px -12px rgba(40, 30, 20, 0.28); }