/* Bloomward — HUD over the world (js/ui/hud.js) and the margin line (js/ui/margin.js).
   Ivory on the world with a soft shadow; thin 1.3px strokes; nothing loud. */

svg.ico { width: 16px; height: 16px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; vertical-align: -3px; }
svg.ico.moon circle:first-child { stroke-opacity: .55; }
svg.ico.moon .lit { fill: currentColor; stroke: none; opacity: .92; }

#hud { position: fixed; inset: 0; z-index: 10; }
#hud [hidden], #side [hidden], #screens [hidden] { display: none !important; }
/* bloomward.css makes children of .passthrough clickable; these must never catch the pointer. */
#ui #hud > :is(.hud-read, .photo-grid, .photo-flash, .hud-toast, .rest-hint) { pointer-events: none; }
#hud.hud { transition: opacity var(--t-slow) var(--ease); }
#hud.faded { opacity: 0; }
#hud.faded:hover { opacity: 1; transition-duration: var(--t-fast); }

/* ---------- readout (top-left) ---------- */
.hud-read { position: absolute; left: 26px; top: 20px; max-width: min(460px, 42vw); pointer-events: none; }
/* an even shade behind the text, its edges blurred away (no visible box) */
.hud-read::before, .hud-speed::before, #margin::before { content: ""; position: absolute; z-index: -1; pointer-events: none; background: var(--hud-shade); border-radius: 40px; filter: blur(22px); transition: opacity var(--t-med); }
.hud-read::before { inset: -8px -24px -10px -14px; }
.hud-speed::before { inset: -6px -12px -8px -12px; }
#margin::before { inset: -8px -24px -8px -14px; }
#margin:not(:has(.mg-line.in))::before { opacity: 0; }
html.hc-hud .hud-read::before, html.hc-hud .hud-speed::before, html.hc-hud #margin::before { display: none; }
.hud-read .hud-kicker { letter-spacing: .12em; }
.hr-time { font-family: var(--serif); font-size: var(--fs-xxl); line-height: 1.12; letter-spacing: .005em; margin: 1px 0 5px; font-variant-numeric: lining-nums; }
.hr-line { display: flex; align-items: flex-start; flex-wrap: nowrap; gap: 0 8px; font-size: var(--fs-s); color: var(--hud-ink-2); line-height: 1.6; }
.hr-line .ico { width: 15px; height: 15px; opacity: .9; margin-top: calc((1.6em - 15px) / 2); }
.hr-line > .t { min-width: 0; }
.hr-line .ico.moon { width: 16px; height: 16px; margin-top: calc((1.6em - 16px) / 2); }
.hr-line .num { color: var(--hud-ink); font-variant-numeric: tabular-nums; }
.hr-line .sep { color: var(--hud-ink-3); }
.hr-line .dim, .hr-line .lbl { color: var(--hud-ink-3); }
.hr-wx .big { font-size: var(--fs-m); }
.hr-note { margin-top: 4px; font-family: var(--serif); font-style: italic; font-size: var(--fs-m); color: var(--hud-ink); }

/* ---------- speed (top-right) ---------- */
.hud-speed { position: absolute; right: 22px; top: 18px; display: flex; align-items: center; gap: 10px; transition: right var(--t-med) var(--ease); }
.hs-steps { display: flex; align-items: flex-end; gap: 1px; height: 24px; }
.hs-step { appearance: none; background: none; border: 0; padding: 0 3px; height: 24px; display: flex; align-items: flex-end; cursor: pointer; }
.hs-step i { display: block; width: 3px; border-radius: 1px; background: var(--hud-ink-3); box-shadow: 0 0 0 1px rgba(0, 0, 0, .25), 0 0 6px rgba(0, 0, 0, .45); transition: background var(--t-fast); }
.hs-step:hover i { background: var(--hud-ink-2); }
.hs-step.on i { background: var(--hud-ink); }
.hs-label { min-width: 5.6em; font-size: var(--fs-s); letter-spacing: .02em; font-variant-numeric: tabular-nums; }
.hs-lag { position: absolute; top: calc(100% + 4px); right: 0; white-space: nowrap; font-family: var(--serif); font-style: italic; font-size: var(--fs-xs); color: var(--hud-ink-2); }
html.side-open .hud-speed { right: calc(var(--side-w, 384px) + 40px); }

/* ---------- mode bar (bottom-centre) ---------- */
.hud-modes { position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%); display: flex; align-items: center; gap: 6px; white-space: nowrap; transition: left var(--t-med) var(--ease); }
html.side-open .hud-modes { left: calc((100vw - var(--side-w, 384px) - 28px) / 2); }
.hud-modes .mb { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px 5px 9px; }
.hud-modes .mb svg { width: 17px; height: 17px; }
.hud-modes .mb.dead { color: var(--hud-ink-3); }
.mb-group { display: inline-flex; gap: 6px; padding: 0 8px; margin: 0 2px; position: relative; }
.mb-group::before, .mb-group::after { content: ""; position: absolute; top: 7px; bottom: 7px; width: 1px; background: var(--hud-rule); }
.mb-group::before { left: 0; } .mb-group::after { right: 0; }
.hud-modes.compact .mb:not(.col):not([data-mode="dashboard"]) span, .hud-modes.tight .mb span { display: none; }
.hud-modes.compact .mb:not(.col):not([data-mode="dashboard"]), .hud-modes.tight .mb { padding: 5px 8px; }

/* ---------- lens popover ---------- */
.hud-lens { position: fixed; width: 360px; padding: 6px; border-radius: 10px; background: rgba(22, 21, 16, .74); border: 1px solid var(--hud-rule); backdrop-filter: blur(10px) saturate(1.1); -webkit-backdrop-filter: blur(10px) saturate(1.1); box-shadow: 0 14px 40px rgba(0,0,0,.35); text-shadow: none; }
.hud-lens[hidden] { display: none; }
.lens-item { appearance: none; display: grid; grid-template-columns: 26px 1fr; grid-template-rows: auto auto; column-gap: 8px; width: 100%; text-align: left; background: none; border: 0; border-radius: 6px; padding: 7px 10px 7px 8px; cursor: pointer; color: var(--hud-ink); }
.lens-item svg { grid-row: 1 / 3; width: 20px; height: 20px; margin-top: 2px; opacity: .85; }
.lens-item .ln { font-family: var(--serif); font-size: var(--fs-m); }
.lens-item .ld { grid-column: 2; font-size: var(--fs-xs); color: var(--hud-ink-2); line-height: 1.4; }
.lens-item:hover, .lens-item:focus-visible { background: rgba(244, 238, 223, .09); }
.lens-item[aria-checked="true"] { background: rgba(244, 238, 223, .14); box-shadow: inset 2px 0 0 var(--hud-ink); }
.lens-item.none { grid-template-columns: 26px 1fr; border-top: 1px solid var(--hud-rule); border-radius: 0 0 6px 6px; margin-top: 4px; padding-top: 9px; }
.lens-item.none .ln { grid-column: 2; font-size: var(--fs-s); font-family: var(--sans); color: var(--hud-ink-2); }

/* ---------- shortcuts sheet ---------- */
.hud-keys { position: fixed; left: 50%; bottom: 70px; transform: translateX(-50%); width: 340px; padding: 16px 20px 12px; }
.hud-keys[hidden] { display: none; }
.hud-keys dl, .keylist { display: grid; grid-template-columns: auto 1fr; gap: 5px 14px; margin: 10px 0; align-items: baseline; font-size: var(--fs-s); }
.hud-keys dd, .keylist dd { margin: 0; color: var(--ink-2); }
kbd { font-family: var(--sans); font-size: var(--fs-xs); display: inline-block; min-width: 1.9em; text-align: center; padding: 1px 6px; border: 1px solid var(--rule); border-bottom-width: 2px; border-radius: 4px; color: var(--ink); background: var(--paper-2); }

/* ---------- toast, rest hint ---------- */
.hud-toast { position: absolute; left: 50%; bottom: 66px; transform: translate(-50%, 4px); font-family: var(--serif); font-style: italic; font-size: var(--fs-m); opacity: 0; transition: opacity var(--t-med), transform var(--t-med); pointer-events: none; white-space: nowrap; }
.hud-toast.on { opacity: 1; transform: translate(-50%, 0); }
.rest-hint { position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%); font-family: var(--serif); font-style: italic; font-size: var(--fs-s); color: var(--hud-ink-2); opacity: 0; transition: opacity var(--t-slow); pointer-events: none; }
.hud.resting > :not(.rest-hint) { opacity: 0 !important; pointer-events: none !important; transition: opacity var(--t-slow); }
.hud.resting .rest-hint.on { opacity: 1; }
html.rest-mode #side, html.photo-mode #side { opacity: 0; pointer-events: none; }
html.rest-mode #margin .mg-concept { display: none; }

/* ---------- photo mode ---------- */
.hud.photographing > :not(.hud-photo, .photo-grid, .photo-flash, .hud-toast) { display: none !important; }
html.photo-mode #margin { opacity: 0; pointer-events: none; }
.hud-photo { position: absolute; left: 50%; bottom: 20px; transform: translateX(-50%); display: flex; align-items: center; gap: 26px; padding: 10px 14px 10px 22px; border-radius: 999px; background: rgba(20, 19, 15, .42); border: 1px solid var(--hud-rule); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.hud-photo[hidden] { display: none; }
.ph-controls { display: flex; gap: 22px; }
.ph-ctl { display: grid; grid-template-columns: auto auto; grid-template-rows: auto auto; column-gap: 8px; width: 150px; font-size: var(--fs-xs); }
.ph-k { color: var(--hud-ink-2); letter-spacing: .12em; text-transform: uppercase; }
.ph-k { grid-column: 1; grid-row: 1; }
.ph-v { grid-column: 2; grid-row: 1; justify-self: end; font-variant-numeric: tabular-nums; color: var(--hud-ink); }
.ph-ctl input[type="range"] { grid-column: 1 / -1; grid-row: 2; height: 16px; }
.ph-actions { display: flex; align-items: center; gap: 12px; }
.ph-shutter { appearance: none; width: 50px; height: 50px; border-radius: 50%; border: 1.5px solid var(--hud-ink); background: rgba(244, 238, 223, .1); color: var(--hud-ink); display: grid; place-items: center; cursor: pointer; transition: background var(--t-fast), transform var(--t-fast); }
.ph-shutter:hover { background: rgba(244, 238, 223, .22); }
.ph-shutter:active { transform: scale(.95); }
.ph-shutter svg { width: 40px; height: 40px; stroke-width: 1; }
.ph-note { position: absolute; left: 22px; right: 22px; bottom: calc(100% + 8px); text-align: center; font-family: var(--serif); font-style: italic; font-size: var(--fs-xs); color: var(--hud-ink-2); }
.photo-grid { position: fixed; inset: 0; pointer-events: none; opacity: 0; transition: opacity var(--t-med); }
.photo-grid.on { opacity: 1; }
.photo-grid i { position: absolute; background: rgba(244, 238, 223, .38); box-shadow: 0 0 1px rgba(0,0,0,.4); }
.photo-grid i:nth-child(1) { left: 33.333%; top: 0; bottom: 0; width: 1px; }
.photo-grid i:nth-child(2) { left: 66.667%; top: 0; bottom: 0; width: 1px; }
.photo-grid i:nth-child(3) { top: 33.333%; left: 0; right: 0; height: 1px; }
.photo-grid i:nth-child(4) { top: 66.667%; left: 0; right: 0; height: 1px; }
.photo-flash { position: fixed; inset: 0; background: #fffdf6; opacity: 0; pointer-events: none; }
.photo-flash.go { animation: bw-flash 420ms var(--ease); }
@keyframes bw-flash { 0% { opacity: .55; } 100% { opacity: 0; } }

/* HUD sliders (ivory on the world) */
.hud input[type="range"]::-webkit-slider-runnable-track { background: var(--hud-ink-2); }
.hud input[type="range"]::-moz-range-track { background: var(--hud-ink-2); }
.hud input[type="range"]::-webkit-slider-thumb { background: rgba(30, 28, 22, .6); border-color: var(--hud-ink); }
.hud input[type="range"]::-moz-range-thumb { background: rgba(30, 28, 22, .6); border-color: var(--hud-ink); }

/* ---------- high-contrast HUD ---------- */
html.hc-hud { --hud-ink-2: rgba(250, 246, 236, .92); --hud-ink-3: rgba(250, 246, 236, .74); --hud-rule: rgba(250, 246, 236, .6); }
html.hc-hud .hud-read, html.hc-hud .hud-speed { background: rgba(14, 13, 10, .74); padding: 10px 14px; border-radius: 8px; }
html.hc-hud .hud-read { left: 16px; top: 14px; }
html.hc-hud .hbtn { background-color: rgba(14, 13, 10, .72); }
html.hc-hud #margin .mg-line { background: rgba(14, 13, 10, .74); padding: 8px 12px; border-radius: 6px; }

/* ---------- screens cover the HUD ---------- */
html.screen-open #hud, html.screen-open #margin, html.screen-open #side { opacity: 0 !important; pointer-events: none !important; }

/* ---------- the margin (lower left) ---------- */
#margin { position: fixed; left: 26px; bottom: 76px; width: min(500px, 40vw); z-index: 9; color: var(--hud-ink); text-shadow: var(--hud-shadow); transition: opacity var(--t-med); }
.mg-line { margin: 0; opacity: 0; transform: translateY(6px); transition: opacity var(--t-slow) var(--ease), transform var(--t-slow) var(--ease); }
.mg-line.in { opacity: 1; transform: none; }
.mg-line.out { opacity: 0; transform: translateY(-3px); }
.mg-obs { font-family: var(--serif); font-size: var(--fs-m); line-height: 1.5; color: var(--hud-ink); }
.mg-when { display: block; font-family: var(--sans); font-size: var(--fs-xs); letter-spacing: .12em; text-transform: uppercase; color: var(--hud-ink-3); margin-bottom: 2px; }
.mg-concept { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; font-size: var(--fs-s); }
.mg-concept .mg-k { color: var(--hud-ink-2); letter-spacing: .02em; }
.mg-concept .mg-k::after { content: ":"; }
.mg-concept .mg-title { font-family: var(--serif); font-size: var(--fs-l); }
.mg-open, .mg-x { appearance: none; background: none; border: 0; color: var(--hud-ink); cursor: pointer; padding: 0; font-size: var(--fs-s); text-shadow: var(--hud-shadow); }
.mg-open { border-bottom: 1px solid var(--hud-ink-2); }
.mg-open::before { content: "— "; color: var(--hud-ink-3); border: 0; }
.mg-open:hover { border-bottom-color: var(--hud-ink); }
.mg-x { color: var(--hud-ink-3); font-size: var(--fs-m); line-height: 1; }
.mg-marg blockquote { margin: 0; font-family: var(--serif); font-style: italic; font-size: var(--fs-l); line-height: 1.5; }
.mg-marg figcaption { margin-top: 6px; font-size: var(--fs-xs); letter-spacing: .06em; color: var(--hud-ink); }
.mg-marg figcaption::before { content: "— "; }
.mg-marg cite { font-style: italic; font-family: var(--serif); letter-spacing: 0; font-size: var(--fs-s); }
.mg-date { color: var(--hud-ink-2); }
html.side-open #margin { width: min(460px, calc(100vw - var(--side-w, 384px) - 80px)); }