/* WinHours landing and privacy pages (mockup A, "One line for your day", owner's pick 2026-09-28).
   Plain CSS, no build step. Light and dark follow the system. Nothing here moves by itself: the only
   transitions answer a hover or a press. The /winhours/* CSP allows no inline style, so every size is a
   class here. */

/* Type (2026-10-13, owner: "whatever Vitals uses, let's use it"): no web fonts, the device's own system
   font, the same stack as vitalsmac.com. Segoe UI on Windows (Chrome renders their headline in Segoe UI
   Semibold), SF Pro on a Mac. Headings stay at 600: Segoe has no 800, which would fall to Black. */

:root {
  color-scheme: light;
  --ground: #f5f6f8;
  --paper: #ffffff;
  --ink: #13161b;
  --muted: #5a6371;
  --faint: #737c8a;
  --rule: #dde2e9;
  --accent: #0a66e8;
  --accent-hover: #0858cc;
  --accent-ink: #ffffff;
  --focus: #0a66e8;
  --shadow: 0 1px 2px rgb(19 22 27 / 0.05), 0 16px 40px rgb(19 22 27 / 0.08);
  /* The app's own category colours (crates/engine/src/categories.rs). */
  --work: #3a6fe0;
  --media: #e0506a;
  --social: #d4861a;
  --ai: #7a5ae0;
  --comms: #1b9a6c;
  --browsing: #0b95ad;
  --away: #e6eaf0;
  /* The room above and below a section and the hero: a share of the screen's height, so a laptop screen
     shows each section whole (WinPulse's rule; owner, 2026-09-28: "about 10% scale down so everything is
     visible on a standard 16 inch screen"). */
  --sec-y: clamp(48px, 7.5svh, 80px);
  --hero-top: clamp(24px, 4.5svh, 56px);
  --hero-bottom: clamp(32px, 5.5svh, 72px);
  --display: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", "Segoe UI", system-ui, sans-serif;
  --body: var(--display);
  --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  /* The hero's width, which grows on a big screen (the hero), and the top bar's row with it. */
  --hero-w: clamp(1040px, (100svh - 64px) * 1.45, 1480px);
}
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --ground: #0f1216;
    --paper: #171b21;
    --ink: #e9ecf1;
    --muted: #a3acb9;
    --faint: #8a93a1;
    --rule: #262c35;
    --accent: #4d94ff;
    --accent-hover: #6aa5ff;
    --accent-ink: #06121f;
    --focus: #6aa5ff;
    --shadow: 0 1px 2px rgb(0 0 0 / 0.4), 0 16px 40px rgb(0 0 0 / 0.35);
    --away: #222831;
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 86px; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body { margin: 0; background: var(--ground); color: var(--ink); font: 400 16px/1.6 var(--body); -webkit-font-smoothing: antialiased; }
h1, h2, h3, p, figure { margin: 0; }
h1, h2 { font-family: var(--display); letter-spacing: -0.03em; text-wrap: balance; }
a { color: inherit; }
img { display: block; max-width: 100%; height: auto; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 4px; }
.defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.skip { position: absolute; left: 16px; top: -48px; padding: 8px 14px; border-radius: 8px; background: var(--paper); color: var(--ink); z-index: 20; }
.skip:focus { top: 12px; }
.wrap { max-width: 1040px; margin-inline: auto; padding-inline: 24px; }
@media (max-width: 599px) { .wrap { padding-inline: 16px; } }

/* ---- the top bar ---- */
/* Part of the page at the top, and a floating bar once the page scrolls, with the page passing under it
   (the owner, 2026-09-29, after emdashcms.com, as on WinPulse's page). app.js sets data-floating from the
   sentinel; the bar eases into place, without movement under reduced motion. */
body { padding-top: 64px; }
.top-sentinel { position: absolute; top: 0; left: 0; width: 1px; height: 24px; pointer-events: none; }
.top { position: fixed; top: 0; left: 0; right: 0; z-index: 10; pointer-events: none; }
.top-row {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 64px;
  pointer-events: auto; border: 1px solid transparent; border-radius: 0; background-color: transparent;
  transition-property: max-width, padding, transform, border-radius, background-color, border-color, box-shadow, backdrop-filter;
  transition-duration: 250ms; transition-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
}
.top[data-floating] .top-row {
  max-width: min(840px, calc(100% - 24px)); padding-inline: 18px 10px; border-radius: 16px; transform: translateY(10px);
  background-color: color-mix(in srgb, var(--paper) 80%, transparent);
  -webkit-backdrop-filter: blur(16px) saturate(1.6); backdrop-filter: blur(16px) saturate(1.6);
  border-color: var(--rule); box-shadow: 0 12px 32px -20px rgb(0 0 0 / 0.35);
}
@media (max-width: 599px) { .top[data-floating] .top-row { max-width: calc(100% - 16px); padding-inline: 14px 8px; } }
/* Scrolling down puts the bar away, scrolling up brings it back (owner, 2026-10-13); app.js sets data-away, never
   at the top of the page, and a focus inside the bar keeps it. Under reduced motion it fades instead. */
.top { transition: transform 250ms cubic-bezier(0.23, 1, 0.32, 1), opacity 150ms ease; }
.top[data-away]:not(:focus-within) { transform: translateY(calc(-100% - 40px)); }
.top[data-away]:not(:focus-within) .top-row { pointer-events: none; }
@media (prefers-reduced-motion: reduce) {
  .top-row { transition-property: background-color, border-color, box-shadow; transition-duration: 150ms; }
  .top { transition: opacity 150ms ease; }
  .top[data-away]:not(:focus-within) { transform: none; opacity: 0; }
}
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; font: 600 19px var(--display); letter-spacing: -0.01em; min-height: 44px; }
.brand-mark { width: 28px; height: 28px; color: var(--ink); flex: none; }
.top-nav { display: flex; align-items: center; gap: 22px; }
.top-link { color: var(--muted); text-decoration: none; font-size: 15px; padding-block: 10px; }
.top-link:hover { color: var(--ink); }
@media (max-width: 599px) { .top-link { display: none; } }

/* ---- buttons ---- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 22px; border: 0; border-radius: 12px;
  background: var(--accent); color: var(--accent-ink); font: 600 16px var(--body); text-decoration: none; cursor: pointer;
  transition: background-color 0.15s ease, transform 0.12s ease; }
.btn:hover { background: var(--accent-hover); }
.btn:active { transform: scale(0.98); }
.btn-small { min-height: 40px; padding: 0 16px; font-size: 15px; border-radius: 10px; }
/* A Windows PC (or any computer) gets the file; a phone gets the link to send (app.js sets data-os). */
.share { display: none; }
:root[data-os="mobile"] .dl { display: none; }
:root[data-os="mobile"] .share { display: inline-flex; }
:root[data-os="mobile"] .top-get { display: none; }

/* ---- the hero ---- */
/* The first screen is the hero alone (owner, 2026-10-13: "only 1st part should be visible"): it fills the screen
   under the bar, its content centred, so nothing of the next section shows until the page scrolls. */
.hero { padding-block: var(--hero-top) var(--hero-bottom); display: grid; gap: clamp(20px, 2.6svh, 34px); align-content: center; min-height: calc(100svh - 64px); }
/* On a big screen the hero grows with it instead of floating small in the middle (owner, 2026-10-13: "looking
   terrible on bigger screens"): its width follows the screen's height, and its type, button and line grow from
   their laptop sizes, which stay as they were. */
.wrap.hero, :where(body:has(.hero)) .wrap.top-row { max-width: var(--hero-w); }
.eyebrow { font: 600 13px var(--body); letter-spacing: 0.06em; text-transform: uppercase; color: var(--faint); }
.hero h1 { font-size: clamp(42px, min(6.5vw, 9.5svh), 124px); line-height: 1.02; font-weight: 600; max-width: 12ch; }
.lede { font-size: clamp(17.5px, 2svh, 23px); line-height: 1.55; color: var(--muted); max-width: 56ch; }
.hero .eyebrow { font-size: clamp(13px, 1.4svh, 16px); }
.hero .btn { min-height: clamp(48px, 5.4svh, 60px); padding-inline: clamp(22px, 2.6svh, 30px); font-size: clamp(16px, 1.75svh, 19px); }
.hero .fine { font-size: clamp(14px, 1.55svh, 17px); }
.cta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 20px; margin-top: 6px; }
.fine { font-size: 14px; color: var(--faint); }
.fine a { color: var(--muted); }
.dl-status:empty { display: none; }
@media (max-width: 599px) {
  .hero { padding-block: 32px 48px; gap: 18px; }
  .lede { font-size: 17px; }
  .cta .btn { width: 100%; }
}

/* The day as one line: a made-up Monday, midnight to midnight, in the app's category colours. Pointing at a
   block (a tap, or the arrow keys once the line has the focus) grows it, dims the rest and names it in the label
   above (app.js). It moves only while someone points; never under reduced motion. The blocks never reach the
   line's rounded ends, so it does not need to clip them. */
.day { margin-top: clamp(24px, 3svh, 40px); }
.ribbon { position: relative; height: clamp(50px, 6.2svh, 80px); border-radius: 12px; background: var(--away); }
.ribbon svg { display: block; width: 100%; height: 100%; overflow: visible; }
.ribbon rect { transform-box: fill-box; transform-origin: center; transition: transform 160ms cubic-bezier(0.23, 1, 0.32, 1), opacity 160ms ease; }
.ribbon .gap { fill: transparent; }
.ribbon[data-pointing] rect:not(.on) { opacity: 0.4; }
.ribbon rect.on { transform: scaleY(1.32); }
.ribbon .gap.on { transform: none; }
/* A stretch away shades the line itself (app.js places it and rounds the end it touches). */
.ribbon .hl { position: absolute; top: 0; bottom: 0; background: color-mix(in srgb, var(--ink) 10%, transparent); pointer-events: none; }
.ribbon .hl[hidden] { display: none; }
.ribbon:focus-visible { outline-offset: 5px; border-radius: 12px; }
.tip { position: absolute; bottom: calc(100% + 16px); left: 0; transform: translateX(-50%); z-index: 2; padding: 7px 11px; border-radius: 9px;
  background: var(--ink); color: var(--ground); font-size: 13.5px; line-height: 1.3; white-space: nowrap; pointer-events: none; box-shadow: var(--shadow); }
.tip b { font-weight: 600; }
.tip i { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 7px; vertical-align: 1px; }
.tip[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) {
  .ribbon rect { transition: opacity 120ms ease; }
  .ribbon rect.on { transform: none; }
}
.c-work { fill: var(--work); background: var(--work); }
.c-media { fill: var(--media); background: var(--media); }
.c-social { fill: var(--social); background: var(--social); }
.c-ai { fill: var(--ai); background: var(--ai); }
.c-comms { fill: var(--comms); background: var(--comms); }
.c-browsing { fill: var(--browsing); background: var(--browsing); }
.c-away { background: var(--away); box-shadow: inset 0 0 0 1px var(--rule); }
.axis { position: relative; height: 1.5em; margin-top: 10px; font: 400 clamp(12px, 1.35svh, 16px) var(--body); color: var(--faint); font-variant-numeric: tabular-nums; }
.axis span { position: absolute; top: 0; white-space: nowrap; }
.axis .t0 { left: 0; }
.axis .t25 { left: 25%; transform: translateX(-50%); }
.axis .t50 { left: 50%; transform: translateX(-50%); }
.axis .t75 { left: 75%; transform: translateX(-50%); }
.axis .t100 { right: 0; }
.legend { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 14px; font-size: clamp(14px, 1.6svh, 18px); color: var(--muted); font-variant-numeric: tabular-nums; }
.legend span { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.sw { display: inline-block; width: 10px; height: 10px; border-radius: 3px; flex: none; }
@media (max-width: 599px) {
  .ribbon { height: 44px; border-radius: 10px; }
  .axis .t25, .axis .t75 { display: none; }
  .legend { gap: 8px 16px; }
}

/* ---- the bands ---- */
.band { padding-block: var(--sec-y); border-top: 1px solid var(--rule); }
.band h2 { font-size: clamp(28px, 3.2vw, 40px); line-height: 1.1; font-weight: 600; }
.band h3 { font: 600 17px/1.4 var(--body); margin-bottom: 4px; }
@media (max-width: 599px) { .band { padding-block: 52px; } }

.split { display: grid; grid-template-columns: minmax(0, 1fr) 332px; gap: 56px; align-items: center; }
.facts { display: grid; gap: 28px; max-width: 520px; }
.fact p { color: var(--muted); }
.shot img { border-radius: 16px; box-shadow: var(--shadow); }
/* The panel, never taller than a laptop screen leaves under the bar (its picture is 368 by 743). */
.panel-shot { justify-self: end; width: min(332px, calc((100svh - 120px) * 368 / 743)); }
@media (max-width: 859px) {
  .split { grid-template-columns: 1fr; gap: 40px; }
  .panel-shot { justify-self: center; width: min(368px, 100%); }
}

.center { display: grid; justify-items: center; text-align: center; gap: 18px; }
.center-h { text-align: center; }
.sub { font-size: 16.5px; color: var(--muted); max-width: 56ch; }
/* The window as big as the screen under the bar allows, up to its own 1200 by 783 (owner, 2026-10-13: "why
   this interactive screen is so small?"; it used to share one screen with its heading), in a wider column
   than the text. Its own
   Day, Week, Month, Year and All are buttons laid over the screenshot where it draws them (app.js swaps the
   page); on a phone or any touch screen they are too small to tap, so a switch of their own stands above the window instead. */
.wrap-wide { max-width: 1248px; }
.live { position: relative; width: 100%; max-width: min(1200px, max(640px, calc((100svh - 120px) * 1200 / 783))); }
.window-shot { display: block; }
.window-shot img { width: 100%; }
/* Where the window draws its switch, measured on the 2400 by 1566 shots (each view's own highlighted pill). */
.hotspots { position: absolute; inset: 0; pointer-events: none; --hs-top: 1.92%; --hs-h: 4.34%; }
.hs-day { left: 35.71%; width: 5.17%; }
.hs-week { left: 41.04%; width: 6.17%; }
.hs-month { left: 47.38%; width: 6.58%; }
.hs-year { left: 54.17%; width: 5.5%; }
.hs-all { left: 59.88%; width: 4.42%; }
.hs { position: absolute; top: var(--hs-top); height: var(--hs-h); padding: 0; border: 0; border-radius: 999px; background: transparent;
  pointer-events: auto; cursor: pointer; transition: box-shadow 150ms ease; }
.hs:hover { box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 75%, transparent); }
.hs[aria-pressed="true"] { cursor: default; }
.hs[aria-pressed="true"]:hover { box-shadow: none; }
.hs:focus-visible { outline-offset: 2px; border-radius: 999px; }
.views { display: none; }
.view-note { color: var(--muted); font-size: 15px; min-height: 1.6em; }
/* A narrow screen, or any touch screen (a phone held sideways is wider, the pills no bigger to a finger). */
@media (max-width: 699px), (pointer: coarse) {
  .hotspots { display: none; }
  .views { display: inline-flex; gap: 4px; padding: 4px; border: 1px solid var(--rule); border-radius: 12px; background: var(--paper); }
  .view { min-height: 44px; padding: 0 13px; border: 0; border-radius: 9px; background: transparent; color: var(--muted); font: 500 15px var(--body); cursor: pointer; }
  .view[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); }
}
@media (max-width: 599px) { .sub { font-size: 16px; } .shot img { border-radius: 10px; } }

/* Privacy as two lists side by side: what stays on the PC and what leaves it. Green only where it means "kept
   here"; the one thing that never leaves is said in the ink colour, not in a warning red. */
.center-sub { margin: 14px auto 0; text-align: center; }
.ledger { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-top: 36px; }
.ledger-card { padding: 24px 26px 26px; border: 1px solid var(--rule); border-radius: 16px; background: var(--paper); }
.ledger-card.stays { background: color-mix(in srgb, var(--comms) 6%, var(--paper)); border-color: color-mix(in srgb, var(--comms) 28%, var(--rule)); }
.ledger-card h3 { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 18px; }
.ledger-ico { width: 22px; height: 22px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.stays .ledger-ico { color: var(--comms); }
.leaves .ledger-ico { color: var(--faint); }
.ledger-card ul { list-style: none; margin: 16px 0 0; padding: 0; }
.ledger-card li { position: relative; padding-left: 26px; color: var(--muted); font-size: 15.5px; line-height: 1.5; }
.ledger-card li + li { margin-top: 10px; }
/* A tick for what stays, a small arrow out for what leaves, a cross for what never does. */
.ledger-card li::before { content: ""; position: absolute; left: 3px; top: 0.42em; width: 10px; height: 5px;
  border: solid var(--comms); border-width: 0 0 2px 2px; transform: rotate(-45deg); }
.leaves li::before { top: 0.6em; left: 2px; width: 7px; height: 7px; border: solid var(--faint); border-width: 2px 2px 0 0; transform: rotate(45deg); }
.leaves li.never { color: var(--ink); font-weight: 500; }
.leaves li.never::before { top: 0.75em; left: 1px; width: 13px; height: 2px; border: 0; background: var(--ink); transform: rotate(45deg); }
.leaves li.never::after { content: ""; position: absolute; top: 0.75em; left: 1px; width: 13px; height: 2px; background: var(--ink); transform: rotate(-45deg); }
.ledger-card code { font: 500 14px var(--mono); color: var(--ink); }
.promises { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 28px; margin: 26px 0 0; padding: 0; list-style: none; color: var(--muted); font-size: 15px; }
.promises li { display: inline-flex; align-items: center; gap: 8px; min-height: 32px; }
.promises li:not(:last-child)::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--comms); }
.promises a { display: inline-flex; align-items: center; min-height: 44px; color: var(--accent); font-weight: 500; text-underline-offset: 3px; }
@media (max-width: 759px) {
  .ledger { grid-template-columns: 1fr; gap: 14px; margin-top: 28px; }
  .ledger-card { padding: 20px 20px 22px; }
  .promises { justify-content: flex-start; flex-direction: column; gap: 0; margin-top: 18px; }
}

#download .btn { margin-top: 6px; }
@media (max-width: 599px) { #download .btn { width: 100%; } }

/* ---- the footer ---- */
.foot { border-top: 1px solid var(--rule); padding-block: 28px 40px; color: var(--faint); font-size: 14px; }
.foot-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; }
.foot-brand { display: inline-flex; align-items: center; gap: 8px; }
.foot-mark { width: 18px; height: 18px; color: var(--faint); }
.foot-nav { display: flex; flex-wrap: wrap; gap: 4px 20px; }
.foot-nav a { color: var(--muted); text-decoration: none; display: inline-flex; align-items: center; min-height: 44px; }
.foot-nav a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
/* Slint's royalty-free licence asks for its badge where the app is offered. */
.slint { display: inline-flex; min-height: 44px; align-items: center; }
.slint img { width: 106px; height: 48px; }
.doc .updated { margin-top: 40px; font-size: 14px; color: var(--faint); }

/* ---- the privacy page ---- */
.doc { padding-block: 48px 80px; }
.doc-wrap { max-width: 760px; }
.doc h1 { font-size: clamp(40px, 5vw, 60px); line-height: 1.05; font-weight: 600; }
.doc .summary { font-size: 19px; color: var(--muted); margin-top: 14px; }
.doc h2 { font-size: 26px; line-height: 1.2; font-weight: 600; margin-top: 48px; }
.doc p, .doc li { color: var(--muted); }
.doc p { margin-top: 12px; }
.doc strong { color: var(--ink); font-weight: 600; }
.doc ul { margin: 12px 0 0; padding-left: 22px; }
.doc li + li { margin-top: 6px; }
.doc a { color: var(--accent); text-underline-offset: 3px; }
.doc code { font: 500 14px var(--mono); color: var(--ink); overflow-wrap: anywhere; }
.fields { width: 100%; border-collapse: collapse; margin-top: 16px; font-size: 15px; }
.fields th, .fields td { text-align: left; vertical-align: top; padding: 10px 12px 10px 0; border-bottom: 1px solid var(--rule); }
.fields th { font: 600 12px var(--body); letter-spacing: 0.06em; text-transform: uppercase; color: var(--faint); }
.fields td:first-child { white-space: nowrap; color: var(--ink); font-weight: 500; }
.fields td { color: var(--muted); }
@media (max-width: 599px) {
  .doc { padding-block: 32px 56px; }
  .fields thead { display: none; }
  .fields tr { display: block; padding: 10px 0; border-bottom: 1px solid var(--rule); }
  .fields td { display: block; padding: 0; border: 0; }
  .fields td:first-child { margin-bottom: 2px; }
}