/* Ollee face page styles; WebTUI supplies the base theme. */

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
/* WebTUI sets word-break: break-all on body; prose must wrap on word boundaries. */
body { margin: 0; padding: 1rem; font-family: monospace; min-height: 100vh; word-break: normal; overflow-wrap: break-word; }
main { max-width: 40rem; margin: 0 auto; }
/* The face page: the watch leads on phones; from 900 px it sits in a sticky left column beside the builder and guide. */
.face-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2rem; }
.face-side, .face-main { min-width: 0; }
/* break-word, not anywhere: anywhere shrinks a column's minimum to one letter, so tables split short labels
   mid-word. A table too wide for a phone scrolls in its .guide-table region instead. */
#guide table { width: 100%; border-collapse: collapse; }
#guide th, #guide td { overflow-wrap: break-word; vertical-align: top; }
/* Guide text uses the main foreground; the muted list colour falls under 4.5:1 in light. Code chips sit on the page background, not the darker tint, so the text stays above 4.5:1. */
#guide, #guide li { color: var(--foreground0); }
#guide code { background-color: var(--background0); }
/* WebTUI zeroes block margins; the guide is long-form prose, so it gets back a reading rhythm. */
#guide { margin-top: 2.5rem; }
#guide p, #guide ul, #guide ol, #guide .guide-table { margin: 0 0 1rem; }
.guide-table { overflow-x: auto; max-width: 100%; }
#guide li + li { margin-top: 0.35rem; }
#guide h3 { font-size: 1rem; margin: 2rem 0 0.6rem; }
#guide h4 { font-size: 0.95rem; margin: 1.5rem 0 0.5rem; }
@media (min-width: 900px) {
  main { max-width: 72rem; }
  .face-layout { grid-template-columns: minmax(300px, 2fr) 3fr; align-items: start; }
  .face-side { position: sticky; top: 1rem; max-height: calc(100dvh - 2rem); overflow-y: auto; }
}
body[data-mode="workout"] .face-layout { display: block; }
h1 { font-size: 1.2rem; margin: 0 0 0.25rem; }
.title p { margin: 0 0 1rem; font-size: 0.9rem; }

a:focus-visible, button:focus-visible, input:focus-visible, [role="tab"]:focus-visible, #slot-panel:focus-visible, .ladder-scroll:focus-visible, .guide-table:focus-visible {
  outline: 3px solid var(--foreground0);
  outline-offset: 2px;
}

.slot-bar { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; margin: 0 0 1rem; }
.build { display: grid; gap: 0.5rem; min-width: 0; margin: 0 0 1rem; }
.build-status { margin: 0; font-size: 0.85rem; overflow-wrap: anywhere; }
.build-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
/* The attribute selector outranks WebTUI's 3lh button rules, so the label and the buttons measure the same. */
[data-webtui-theme] .build-actions :is(button, .file-button) {
  font: inherit; line-height: 1; box-sizing: border-box; height: 24px; min-height: 24px; margin: 0; padding: 0 0.6em;
  display: inline-flex; align-items: center; position: relative; cursor: pointer; color: inherit; background: transparent;
  border: 1px solid var(--foreground0);
}
[data-webtui-theme] .build-actions button:disabled { cursor: not-allowed; opacity: 0.5; }
.file-button:focus-within { outline: 3px solid var(--foreground0); outline-offset: 2px; }
#slot-tabs { display: flex; flex-wrap: wrap; gap: 0.5rem; min-width: 0; }
[role="tab"] {
  cursor: pointer; background: transparent; color: inherit;
  border: 1px solid var(--foreground3, #555);
  font: inherit; padding: 0.15em 0.6em;
}
[role="tab"][aria-selected="true"] { background: var(--foreground0); color: var(--background0); }

#slot-panel { border: 1px solid var(--foreground3, #555); padding: 0.75rem; }

.slot-form { display: grid; gap: 0.9rem; min-width: 0; }
.field { display: flex; flex-direction: column; gap: 0.25rem; margin: 0; padding: 0; border: 0; min-width: 0; }
.field legend, .field > label { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.06em; padding: 0; }
.field legend { margin-bottom: 0.25rem; }
input[type="text"], input[type="number"] { width: 100%; max-width: 12rem; min-width: 0; font: inherit; }
.pair { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.pair label { display: flex; flex-direction: column; gap: 0.2rem; font-size: 0.9rem; }
.pair input { width: 6rem; max-width: 100%; }
.inline { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; font-size: 0.9rem; }
/* WebTUI draws radios as zero-height boxes with a "( )" marker; give each one a line box so it centres with its label. */
.inline label:has(input[type="radio"]) { display: inline-flex; align-items: center; gap: 0.35rem; }
.inline input[type="radio"] { height: 1lh; vertical-align: top; }

.msg { margin: 0; font-size: 0.85rem; font-weight: bold; overflow-wrap: anywhere; }
.msg:not(:empty)::before { content: "! "; }
.note { margin: 0; font-size: 0.85rem; }
.note:empty { display: none; }
.actions { display: flex; justify-content: flex-start; }
.status { font-size: 0.85rem; min-height: 1.2em; margin: 0.75rem 0 0; }
.alert { font-weight: bold; }
.foot { font-size: 0.8rem; margin-top: 1.5rem; overflow-wrap: anywhere; }
/* Attribute prefix ties WebTUI's "p a" rule and comes later, so it wins; foreground0 passes 4.5:1 in both themes. */
[data-webtui-theme] main a, [data-webtui-theme] main a:hover { color: var(--foreground0); text-decoration: underline; }
/* WebTUI sets paragraphs to foreground1 (2.77:1 in light) and fields to background1 (4.37:1); use foreground0 and background0. */
[data-webtui-theme] main p { color: var(--foreground0); }
[data-webtui-theme] main input:not([type="checkbox"]):not([type="radio"]) { background: var(--background0); }

.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.ladder { display: grid; gap: 0.6rem; min-width: 0; margin-top: 1.25rem; }
.ladder p { margin: 0; font-size: 0.9rem; }
/* WebTUI's button is 3lh tall; the ladder's buttons are 24px squares. */
.ladder > button, .ladder th button { font: inherit; line-height: 1; cursor: pointer; background: transparent; color: inherit; border: 1px solid var(--foreground3, #555); background-image: none; }
.ladder > button { justify-self: start; height: auto; min-height: 24px; padding: 0 0.6ch; }
.ladder th button { height: 24px; min-width: 24px; padding: 0 0.4ch; }
.ladder-scroll { overflow-x: auto; max-width: 100%; }
/* divide="none" turns off WebTUI's column rules and per-row padding; the rule below is the only one. */
.ladder table { border-collapse: collapse; width: 100%; font-size: 0.85rem; }
.ladder caption { text-align: left; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.06em; padding-bottom: 0.25rem; }
.ladder th, .ladder td { padding: 0 0.5ch; text-align: right; white-space: nowrap; }
/* Rows are at least 24px so neighbouring 24px level buttons never overlap (WCAG 2.5.8). */
.ladder tbody tr { height: 24px; border-bottom: 1px solid var(--foreground3, #555); }
.ladder th, .ladder td { vertical-align: middle; }
.ladder th[scope="col"] { font-weight: bold; }
.ladder th[scope="row"] { text-align: left; }
.ladder tr[aria-current="true"] { background: var(--foreground0); color: var(--background0); font-weight: bold; }
.ladder tr[aria-current="true"] button:focus-visible { outline-color: var(--background0); }
/* Charts (charts.js): two series, work and rest, in the dataviz reference palette's slots 1 and 2,
   validated per theme (CVD, normal-vision floor, 3:1 vs surface). Text wears text tokens, never series colour. */
.chart { margin: 1rem 0 0; max-width: 40rem; --work: #3987e5; --rest: #d95926; --chart-muted: var(--foreground1); }
/* The light theme's muted gray is 2.77:1 on its surface; chart text needs 4.5:1, so it uses the darker grey. */
[data-webtui-theme|=everforest-light] .chart { --work: #2a78d6; --rest: #cc5220; --chart-muted: #5c6a72; }
/* Fasting zones, zone 1 to zone 5 (Everforest for now). */
.chart-zones { --zone-1: #a7c080; --zone-2: #dbbc7f; --zone-3: #e69875; --zone-4: #e67e80; --zone-5: #d699b6; }
[data-webtui-theme|=everforest-light] .chart-zones { --zone-1: #8da101; --zone-2: #dfa000; --zone-3: #f57d26; --zone-4: #f85552; --zone-5: #df69ba; }
.chart figcaption { display: grid; gap: .25rem; margin-bottom: .4rem; }
.chart figcaption span { font-size: .85rem; color: var(--chart-muted); overflow-wrap: break-word; }
.chart-legend { display: flex; gap: 1rem; margin: 0 0 .3rem; font-size: .85rem; color: var(--chart-muted); }
.chart-legend span { display: inline-flex; align-items: center; gap: .35rem; }
.chart-legend .sw { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }
.sw-work, .chart-tip .key.work { background: var(--work); } .sw-rest, .chart-tip .key.rest { background: var(--rest); }
.chart-focus { border-radius: 4px; }
.chart-focus:focus-visible { outline: 3px solid var(--foreground0); outline-offset: 3px; }
.chart-plot { position: relative; touch-action: pan-y; }
.chart-svg { display: block; width: 100%; height: auto; overflow: visible; font-family: inherit; }
.chart-svg .band { fill: var(--foreground0); fill-opacity: .05; }
.chart-svg .band-label, .chart-svg .tick { fill: var(--chart-muted); font-size: 10px; }
.chart-svg .axis-title { fill: var(--chart-muted); font-size: 10px; font-weight: 600; }
.chart-svg .grid { stroke: var(--foreground2); stroke-opacity: .35; stroke-width: 1; vector-effect: non-scaling-stroke; }
.chart-svg .area.work { fill: var(--work); fill-opacity: .35; } .chart-svg .area.rest { fill: var(--rest); fill-opacity: .22; }
.chart-svg .edge { fill: none; stroke-width: 2; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.chart-svg .edge.work { stroke: var(--work); } .chart-svg .edge.rest { stroke: var(--rest); }
.chart-svg .blk.work { fill: var(--work); } .chart-svg .blk.rest { fill: var(--rest); fill-opacity: .55; }
.chart-svg .blk.on { stroke: var(--foreground0); stroke-width: 2; vector-effect: non-scaling-stroke; }
.chart-svg .blk-label { fill: var(--foreground0); font-size: 10.5px; font-weight: 600; pointer-events: none; }
.chart-svg .blk-label.rest { fill: var(--chart-muted); font-weight: 500; }
.chart-svg .zone.zone-1 { fill: var(--zone-1); } .chart-svg .zone.zone-2 { fill: var(--zone-2); } .chart-svg .zone.zone-3 { fill: var(--zone-3); }
.chart-svg .zone.zone-4 { fill: var(--zone-4); } .chart-svg .zone.zone-5 { fill: var(--zone-5); }
.chart-svg .zone-label { fill: var(--chart-muted); font-size: 10px; font-weight: 600; }
.chart-svg .goal { stroke: var(--foreground0); stroke-width: 2; vector-effect: non-scaling-stroke; }
.chart-svg .goal-label { fill: var(--foreground0); font-size: 10.5px; font-weight: 600; }
.chart-svg .you-rule { stroke: var(--foreground1); stroke-width: 1; vector-effect: non-scaling-stroke; }
.chart-svg .you-label { fill: var(--foreground0); font-size: 11px; font-weight: 600; }
.chart-svg .cross line { stroke: var(--foreground0); stroke-width: 1; vector-effect: non-scaling-stroke; }
.chart-svg .dot { stroke: var(--background0); stroke-width: 2; } .chart-svg .dot.work { fill: var(--work); } .chart-svg .dot.rest { fill: var(--rest); }
.chart-tip { position: absolute; top: -.25rem; pointer-events: none; white-space: nowrap; font-size: .8rem; line-height: 1.35;
  padding: .3rem .5rem; background: var(--background0); color: var(--foreground0); border: 1px solid var(--foreground2); border-radius: 4px; display: grid;
  box-shadow: 0 2px 8px rgba(0,0,0,.18); }
.chart-tip strong { font-size: .95rem; } .chart-tip .tip-row { display: flex; align-items: center; gap: .35rem; }
.chart-tip .key { width: 10px; height: 3px; border-radius: 2px; display: inline-block; } .chart-tip .tip-sub { color: var(--chart-muted); }

/* Mini watch: the LCD is two SVGs; unlit segments stay faint, lit ones use the theme foreground. */
.mw { display: grid; gap: 0.6rem; min-width: 0; margin-top: 1.25rem; }
.mw h2 { font-size: 0.9rem; text-transform: uppercase; letter-spacing: 0.06em; margin: 0; }
.mw-body { display: grid; gap: 0.6rem; min-width: 0; }
.mw-face { display: grid; gap: 0.3rem; min-width: 0; border: 1px solid var(--foreground3, #555); padding: 0.5rem; }
.mw-watch { --reach: 24px; --hit: 24px; min-width: 0; padding: 1.25rem var(--reach) 2rem; }
/* A neutral studio backdrop in both site themes, so the watch reads as an object, not as page styling. */
.mw-watch {
  background: radial-gradient(ellipse 80% 70% at 50% 32%, #fbfbfb 0%, #e3e4e5 60%, #cdcecf 100%);
  border-radius: 14px; box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}
/* The case box has the viewBox's aspect; the overlay buttons are percentages of it. */
.mw-case { position: relative; width: 100%; max-width: 440px; aspect-ratio: 750 / 700; margin: 0 auto;
  transform: perspective(1400px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); }
/* Hit areas grow outward from the pusher, to at least --hit; the padding above keeps them on the page. */
.mw .mw-hit { position: absolute; transform: translateY(-50%); min-width: var(--hit); min-height: var(--hit); margin: 0; padding: 0; border: 0; background: transparent; color: inherit; font: inherit; line-height: 1; cursor: pointer; touch-action: none; }
.mw-marks { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; margin: 0; font-size: 0.8rem; }
.mw-mark { padding: 0 0.3em; border: 1px solid var(--foreground3, #555); }
.mw-mark.on { background: var(--foreground0); color: var(--background0); }
.mw-dot { display: inline-block; width: 0.75rem; height: 0.75rem; border: 1px solid var(--foreground3, #555); border-radius: 50%; }
.mw-dot.on { background: var(--foreground0); }
.mw-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.mw button { font: inherit; line-height: 1; height: auto; min-width: 24px; min-height: 24px; cursor: pointer; color: inherit; background: transparent; border: 1px solid var(--foreground3, #555); padding: 0 0.6em; }
.mw-speed { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; align-items: center; margin: 0; padding: 0; border: 0; font-size: 0.9rem; min-width: 0; }
.mw-speed legend { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.06em; margin-right: 0.5rem; }
.mw-speed label, .mw-beeps { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.9rem; min-height: 24px; }
.mw-note, .mw-link { margin: 0; font-size: 0.85rem; overflow-wrap: anywhere; }
.mw input[type="radio"], .mw input[type="checkbox"] { width: 24px; height: 24px; margin: 0; }
/* WebTUI's checkbox has no border and a muted X; give it a foreground0 frame and a filled box when checked. */
.mw input[type="checkbox"] { color: var(--foreground0); }
.mw input[type="checkbox"]:before { width: 100%; height: 100%; box-sizing: border-box; border: 2px solid var(--foreground0); background: var(--background0); }
.mw input[type="checkbox"]:checked:before { background: var(--foreground0); color: var(--background0); }
.mw input:focus-visible { outline: 3px solid var(--foreground0); outline-offset: 2px; }

/* Workout mode: only the watch shows, scaled to fit the viewport height; each hit area is at least 44 px. */
.mw-head { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.mw-head h2 { margin-right: auto; }
#workout-toggle, #workout-exit { font: inherit; cursor: pointer; min-height: 24px; color: inherit; background: transparent; border: 1px solid var(--foreground3, #555); padding: 0 0.6em; }
body[data-mode="workout"] main { max-width: 30rem; }
body[data-mode="workout"] main > nav, body[data-mode="workout"] main > h1, body[data-mode="workout"] .face-main,
body[data-mode="workout"] footer, body[data-mode="workout"] #mw-title,
body[data-mode="workout"] .mw-speed, body[data-mode="workout"] .mw-beeps,
body[data-mode="workout"] .mw-actions, body[data-mode="workout"] .mw-link { display: none; }
body[data-mode="workout"] .mw { margin-top: 0; }
body[data-mode="workout"] .mw-watch { --reach: 44px; --hit: 44px; padding-top: 0.5rem; padding-bottom: 0.5rem; }
body[data-mode="workout"] .mw-case { max-width: calc((100vh - 7rem) * 750 / 700); max-width: calc((100dvh - 7rem) * 750 / 700); }

.mw .mw-hit:focus-visible { outline: 3px solid var(--foreground0); outline-offset: 2px; border-radius: 10px; }

/* The watch (watch-art.js): an unbranded F-91W traced from a photo, 750 px wide in its own space.
   --u is one photo pixel; every part is placed in those units, so the art scales exactly. */
.wa { --u: calc(100cqw / 750); position: absolute; inset: 0; container-type: inline-size; }
.wa > * { position: absolute; }
.wa-full, .wa-facets > * { inset: 0; }
.wa-facets > * { position: absolute; }
.wa-under { left: calc(140 * var(--u)); top: calc(80 * var(--u)); width: calc(480 * var(--u)); height: calc(560 * var(--u)); border-radius: 28%;
  background: rgba(0,0,0,.42); filter: blur(calc(28 * var(--u))); transform: translate(calc(12 * var(--u)), calc(26 * var(--u))); }
.wa-contact { left: calc(150 * var(--u)); top: calc(190 * var(--u)); width: calc(460 * var(--u)); height: calc(400 * var(--u)); border-radius: 22%;
  background: rgba(0,0,0,.55); filter: blur(calc(8 * var(--u))); transform: translate(calc(4 * var(--u)), calc(9 * var(--u))); }
.wa-strap { left: calc(216 * var(--u)); width: calc(318 * var(--u)); background:
  linear-gradient(90deg, rgba(255,255,255,.06), transparent 6%, transparent 94%, rgba(0,0,0,.4)),
  repeating-linear-gradient(180deg, #232427 0 calc(40 * var(--u)), #0d0e0f calc(40 * var(--u)) calc(43 * var(--u)), #34363a calc(43 * var(--u)) calc(45 * var(--u)), #232427 calc(45 * var(--u)) calc(56 * var(--u))); }
.wa-top { top: 0; height: calc(70 * var(--u)); -webkit-mask: linear-gradient(to top, #000 45%, transparent); mask: linear-gradient(to top, #000 45%, transparent); }
.wa-bot { top: calc(566 * var(--u)); bottom: 0; -webkit-mask: linear-gradient(to bottom, #000 55%, transparent); mask: linear-gradient(to bottom, #000 55%, transparent); }
.wa-tex-strap { position: absolute; inset: 0; background-image: var(--t-fine); background-size: calc(40 * var(--u)); mix-blend-mode: soft-light; opacity: .45; }
.wa-pusher { border-radius: calc(2 * var(--u)) calc(9 * var(--u)) calc(9 * var(--u)) calc(2 * var(--u)) / calc(2 * var(--u)) calc(13 * var(--u)) calc(13 * var(--u)) calc(2 * var(--u));
  background: linear-gradient(180deg, #5e6064 0%, #f6f7f8 20%, #cfd1d4 42%, #8c8f93 60%, #e9eaeb 78%, #6f7175 100%);
  box-shadow: 0 calc(3 * var(--u)) calc(4 * var(--u)) rgba(0,0,0,.35); transition: transform 80ms ease-out; }
.wa-pusher::before { content: ""; position: absolute; top: -8%; bottom: -8%; right: calc(-3 * var(--u)); width: calc(5 * var(--u)); background: #151617; border-radius: 2px; }
.wa-p-a { transform: scaleX(-1); }
.wa-p-l.pressed, .wa-p-m.pressed { transform: translateX(calc(5 * var(--u))); }
.wa-p-a.pressed { transform: scaleX(-1) translateX(calc(5 * var(--u))); }
/* Resin: lit facets come from watch-art.js; this base sits under them. */
.wa-sil { background: linear-gradient(160deg, #34363a 0%, #222326 35%, #18191b 70%, #101113 100%); }
.wa-lug { left: calc(200 * var(--u)); width: calc(360 * var(--u)); top: calc(52 * var(--u)); height: calc(50 * var(--u)); mix-blend-mode: soft-light;
  background-image: repeating-linear-gradient(180deg, rgba(255,255,255,.045) 0 calc(1.2 * var(--u)), rgba(0,0,0,.2) calc(1.2 * var(--u)) calc(2.6 * var(--u))), var(--t-fine);
  background-size: auto, calc(50 * var(--u)); }
/* Procedural texture (canvas noise made once): fine stipple, orange-peel mottle and flow streaks of moulded resin. */
.wa-tex-resin { background-image: var(--t-flow), var(--t-mottle), var(--t-fine);
  background-size: calc(300 * var(--u)), calc(220 * var(--u)), calc(70 * var(--u)); mix-blend-mode: soft-light; opacity: .85; }
.wa-plate { background: radial-gradient(ellipse 90% 70% at 48% 30%, #151617, #08090a 65%, #020202); }
.wa-blue { background: linear-gradient(180deg, #3a82cc, #2a6db5 50%, #225d9d); }
.wa-bluein, .wa-whitein { background: #050505; }
.wa-white { background: #c8ccd0; }
.wa-rule { left: calc(206 * var(--u)); width: calc(350 * var(--u)); height: calc(4 * var(--u)); background: linear-gradient(180deg, #3a82cc, #225d9d); }
.wa-r1 { top: calc(222 * var(--u)); } .wa-r2 { top: calc(452 * var(--u)); }
.wa-label { font: 500 calc(12.5 * var(--u))/1 "Helvetica Neue", Arial, sans-serif; letter-spacing: .08em; color: #f0f0f0; display: flex; align-items: center; gap: calc(7 * var(--u)); }
.wa-label i { width: 0; height: 0; border-top: calc(4.5 * var(--u)) solid transparent; border-bottom: calc(4.5 * var(--u)) solid transparent; }
.wa-tl { border-right: calc(15 * var(--u)) solid #c4553a; } .wa-tr { border-left: calc(15 * var(--u)) solid #c4553a; }
.wa-lb-l { left: calc(216 * var(--u)); top: calc(236 * var(--u)); }
.wa-lb-m { left: calc(216 * var(--u)); top: calc(426 * var(--u)); }
.wa-lb-a { right: calc(210 * var(--u)); top: calc(426 * var(--u)); }
.wa-lcd-frame { left: calc(218 * var(--u)); top: calc(258 * var(--u)); width: calc(320 * var(--u)); height: calc(164 * var(--u)); border-radius: calc(9 * var(--u)); box-shadow: 0 0 0 calc(1.8 * var(--u)) #cfd2d6; }
.wa-lcd { left: calc(227 * var(--u)); top: calc(266 * var(--u)); width: calc(302 * var(--u)); height: calc(148 * var(--u)); border-radius: calc(5 * var(--u)); overflow: hidden;
  background: radial-gradient(ellipse 85% 75% at 50% 35%, #e5e7e4, #d4d7d3 55%, #bec1bc);
  box-shadow: inset 0 calc(3 * var(--u)) calc(5 * var(--u)) rgba(0,0,0,.45), inset 0 0 0 calc(1 * var(--u)) rgba(0,0,0,.6); }
.wa-lcd::after { content: ""; position: absolute; inset: 0; background-image: var(--t-fine); background-size: calc(60 * var(--u)); mix-blend-mode: multiply; opacity: .06; pointer-events: none; }
.wa-segs { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
/* Ambient occlusion where the plate meets the bezel wall; then the acrylic crystal. */
.wa-ao { box-shadow: inset 0 calc(10 * var(--u)) calc(14 * var(--u)) rgba(0,0,0,.85), inset calc(6 * var(--u)) 0 calc(10 * var(--u)) rgba(0,0,0,.55), inset calc(-4 * var(--u)) calc(-4 * var(--u)) calc(10 * var(--u)) rgba(0,0,0,.6); }
.wa-crystal { background: linear-gradient(158deg, rgba(255,255,255,.17) 0%, rgba(255,255,255,.05) 24%, transparent 40%, transparent 76%, rgba(255,255,255,.05) 100%); }
.wa-softbox { mix-blend-mode: screen; opacity: .9; background:
  linear-gradient(118deg, transparent calc(16% + var(--sx, 0%)), rgba(255,255,255,.13) calc(17% + var(--sx, 0%)), rgba(255,255,255,.07) calc(31% + var(--sx, 0%)), transparent calc(32% + var(--sx, 0%))),
  linear-gradient(118deg, transparent calc(35% + var(--sx, 0%)), rgba(255,255,255,.05) calc(35.5% + var(--sx, 0%)), transparent calc(39% + var(--sx, 0%))); }
.wa-rimlight { box-shadow: inset calc(1.5 * var(--u)) calc(2 * var(--u)) 0 rgba(255,255,255,.22), inset calc(-1 * var(--u)) calc(-1.5 * var(--u)) 0 rgba(255,255,255,.06); }
.wa-glint { mix-blend-mode: screen; background: radial-gradient(ellipse 30% 20% at var(--gx, 30%) var(--gy, 16%), rgba(255,255,255,.24), rgba(255,255,255,.05) 50%, transparent 75%); }
.mw-hit { z-index: 1; }
/* A press nudges the whole watch as a thumb on that pusher would: a push toward the far side, the pushed
   edge tipping away, and a slight turn from the off-centre force; release springs back with a little overshoot. */
.wa { transform-origin: 50% 55%; transition: transform 320ms cubic-bezier(.34, 1.56, .64, 1); }
.mw-case[data-push] .wa { transition: transform 70ms ease-out; }
.mw-case[data-push="L"] .wa { transform: perspective(900px) translateX(0.8%) rotateY(-3deg) rotateZ(0.9deg); }
.mw-case[data-push="M"] .wa { transform: perspective(900px) translateX(0.8%) rotateY(-3deg) rotateZ(-0.9deg); }
.mw-case[data-push="A"] .wa { transform: perspective(900px) translateX(-0.8%) rotateY(3deg) rotateZ(0.9deg); }
@media (prefers-reduced-transparency: reduce) { .wa-crystal, .wa-softbox, .wa-glint { display: none; } }
@media (prefers-reduced-motion: reduce) { .mw-case, .mw-case[data-push] .wa { transform: none; } .wa { transition: none; } }
/* A quiet note under the slot actions; main text colour, since the muted grey is under 4.5:1 in light. */
.hint { margin: .25rem 0 0; font-size: .85rem; color: var(--foreground0); }

/* The watch leads the page; the slot editor follows under its own heading, styled like the watch's. */
#mini-watch { margin-bottom: 2.25rem; }
.section-title { font-size: 0.9rem; text-transform: uppercase; letter-spacing: 0.06em; margin: 0 0 0.6rem; }
body[data-mode="workout"] #mini-watch { margin-bottom: 0; }

/* Multitimer presets: one column on phones, two from 600 px; the dashed style marks presets after the first zero. */
.preset-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.75rem; margin: 0 0 1rem; min-width: 0; --chart-muted: var(--foreground1); }
[data-webtui-theme|=everforest-light] .preset-grid { --chart-muted: #5c6a72; }
@media (min-width: 600px) { .preset-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.preset { margin: 0; min-width: 0; padding: 0.4rem 0.6rem 0.6rem; border: 1px solid var(--foreground1); display: grid; gap: 0.35rem; }
.preset.after-stop { border-style: dashed; }
.preset.after-stop legend { color: var(--chart-muted); }
.preset legend { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.06em; padding: 0 0.25rem; }
/* Each field reads like the time it sets, "0 h 1 m 0 s": the value, then its unit letter. */
.hms { display: flex; flex-wrap: wrap; gap: 0.25rem 1rem; }
.hms-field { display: inline-flex; flex-direction: row-reverse; align-items: baseline; gap: 0.35rem; min-width: 0; }
.hms-field input { width: 5ch; min-width: 0; padding-inline: 0.3rem; text-align: right; -moz-appearance: textfield; appearance: textfield; }
/* Spinners would eat a two-digit field; the keyboard arrows still step the value. */
.hms-field input::-webkit-inner-spin-button, .hms-field input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
#interval { margin: 0 0 1.5rem; }
.chart-summary { margin: 0.4rem 0 0; font-size: 0.85rem; }
.beep-choice { display: grid; gap: 0.15rem; margin: 0 0 0.5rem; }
.beep-choice label:has(input[type="radio"]) { display: inline-flex; align-items: center; gap: 0.35rem; }
.beep-choice input[type="radio"] { height: 1lh; vertical-align: top; }