/* =========================================================================
   Moment — the inner pages (FF-1194). The timer page is the design: timer.css
   brings the tokens, the Menu and its panel, the badge's rules; this file
   adds a header row, a column of text and the footer. The page is the
   theme's --base with nothing on it — no art, no grey, and one card: the
   download section that ends some pages (FF-1209). Dark by
   prefers-color-scheme only, as the timer.
   ========================================================================= */

/* An anchor jump or a keyboard focus never lands under the floating header
   (20 + 44 + 20). */
html { scroll-padding-top: 84px; }

/* ---- The column: 640px of text, centred, the timer's gutters ------------ */
.page-column {
  --gutter: 16px;
  width: 100%; max-width: calc(640px + 2 * var(--gutter));
  margin: 0 auto;
  padding-left: var(--gutter); padding-right: var(--gutter);
}
@media (min-width: 480px) { .page-column { --gutter: 20px; } }

/* ---- The header: the brand link and the Menu in a 44px row --------------
   In flow, 16px from the top and the sides under 640, 20px from it — the
   Menu's own numbers, so it doesn't move between the timer and a page.
   page.js makes it sticky and hides it on scroll down, shows it on any
   upward scroll of 4px (header-scroll.js); while it floats over text it is
   a bar with a hairline, bare at the top. Without scripts it scrolls away. */
.site-header {
  --inset: 16px;
  position: relative; z-index: 3;
  display: flex; align-items: center; justify-content: space-between;
  padding: calc(var(--inset) + env(safe-area-inset-top, 0px)) calc(var(--inset) + env(safe-area-inset-right, 0px)) var(--inset) calc(var(--inset) + env(safe-area-inset-left, 0px));
  background: var(--base);
}
@media (min-width: 640px) { .site-header { --inset: 20px; } }
.site-header.is-sticky { position: sticky; top: 0; transition: transform .2s ease; }
.site-header.is-hidden { transform: translateY(-100%); }
.site-header.is-floating { box-shadow: 0 1px 0 rgb(var(--ink-rgb) / .12); }
.brand {
  display: inline-flex; align-items: center; gap: 10px;
  height: 44px; border-radius: 4px;
  color: var(--ink); text-decoration: none;
}
.brand img { width: 32px; height: 32px; border-radius: 8px; }
.brand span { font-family: var(--font-display); font-weight: 600; font-size: 17px; line-height: 1.3; }
.brand:focus-visible { outline: 2px solid var(--lit-accent); outline-offset: 2px; }
/* The Menu rides in the row rather than fixed to the corner, and is never
   quiet here (timer.css halves it in every state but idle, keyed on the
   body's phase class; a page has none). */
.site-header .menu-button { position: relative; z-index: auto; top: auto; right: auto; }
body .site-header .menu-button { opacity: 1; }

/* ---- The text ---------------------------------------------------------- */
.page-main {
  flex: 1 0 auto;
  padding-top: 36px;
  font-size: 17px; line-height: 1.6;
  color: rgb(var(--ink-rgb) / .8);
}
@media (min-width: 640px) { .page-main { padding-top: 48px; } }
.page-main h1 {
  margin: 0 0 .5em;
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(1.75rem, 4vw, 2.4rem); line-height: 1.15; letter-spacing: -.02em;
  color: var(--ink);
  text-wrap: balance;
  overflow-wrap: break-word;
}
.page-main h2 {
  margin: 2em 0 .5em;
  font-family: var(--font-display); font-weight: 600;
  font-size: 1.35rem; line-height: 1.25;
  color: var(--ink);
  overflow-wrap: break-word;
}
.page-main h3 { margin: 1.5em 0 .35em; font-size: 17px; font-weight: 600; line-height: 1.4; color: var(--ink); }
.page-main p { margin: 0 0 1em; }
.page-main ul, .page-main ol { margin: 0 0 1.2em; padding-left: 1.25em; }
.page-main li { margin: 0 0 .4em; }
/* A bullet that opens with a short bold name (README → Voice; FF-1210): the
   name at full ink, the sentence after it at the prose's .8. */
.page-main li strong { color: var(--ink); font-weight: 600; }
.page-main a { color: var(--link); text-decoration: underline; text-underline-offset: 2px; }
.page-main a:hover { color: var(--ink); }
.page-main a:focus-visible { outline: 2px solid var(--lit-accent); outline-offset: 2px; border-radius: 2px; }
/* A date, a note, an OS requirement: the panel's group-label style. */
.small { font-size: 13px; line-height: 1.5; color: rgb(var(--ink-rgb) / .6); }
.page-main p.small { margin-bottom: .75em; }
.page-main h1 + .small { margin-top: -.25em; margin-bottom: 2em; }

/* What's new: one entry per release on the column's edge, the meta line over
   the heading, the items' bullets as a top-level list's (not a nested one's). */
.page-main .releases { list-style: none; padding: 0; margin: 0; }
.page-main .release { margin: 0 0 2.5em; }
.release ul { list-style: disc; }

/* The last block ends flush, so the footer's gap below is its own: no
   trailing margin of a paragraph, a list, a list's last item or the last
   release stacks under it. */
.page-main li:last-child, .page-main > :last-child, .page-main .release:last-child, .release article > :last-child { margin-bottom: 0; }
.release .release-meta { margin: 0; }
.release h2 { margin-top: .25em; }

/* Platforms (FF-1211): under each device's h2 its OS line (the .small style),
   its bullets, .75em, then its links — the store's text link and the guide —
   one per line without bullets, .25em apart, ending flush. */
.page-main .platform ul { margin-bottom: .75em; }
.page-main .platform .platform-links { list-style: none; padding: 0; margin: 0; }
.page-main .platform-links li { margin: 0; }
.page-main .platform-links li + li { margin-top: .25em; }

/* ---- The figures on the guides (FF-1195 §1) ------------------------------
   A <figure> per image, no caption (the h2 above it is), full column width,
   12px radius, no device frame, 24px above and 8px below. The Watch's three
   captures share one figure as a three-column grid — 16px gaps, 200px each on
   the column, 100px on a phone, shrinking below that so nothing scrolls at
   320 — with the screen's corner radius as a mask (24% of its width).
   FF-1258 — the Mac guide's docked window is shown at the window's own size
   (376pt wide; Figma's 813px window layer is about 2×), centred, not
   stretched to the column; the file's corners are transparent. */
.page-main figure { margin: 24px 0 8px; }
.page-main figure img { width: 100%; height: auto; border-radius: 12px; }
.page-main .window-figure img { display: block; width: min(100%, 376px); margin: 0 auto; }
.page-main .watch-row { display: grid; grid-template-columns: repeat(3, minmax(0, 200px)); gap: 16px; }
.page-main .watch-row img { border-radius: 24% / 20.1%; }
@media (max-width: 479px) { .page-main .watch-row { grid-template-columns: repeat(3, minmax(0, 100px)); } }

/* ---- What's in Pro's figure (FF-1210 §5) ----------------------------------
   Two Stats frames side by side at every width, under the h2 Moment Pro and
   before its list: each column's fr is its image's aspect ratio × 100
   (540 / 1002, 740 / 974), so the two share one height — 259 and 365 wide on
   the 640 column, 142 and 200 at 390 — 16px apart, the figures' 12px radius
   and margins from the rules above. */
.page-main .pro-shots { display: grid; grid-template-columns: minmax(0, 53.89fr) minmax(0, 75.98fr); gap: 16px; }

/* ---- The Notion guide (FF-1197) -------------------------------------------
   The four links as code the reader selects whole with one tap or click
   (user-select: all; no Copy button, no script), wrapping on a phone — the
   press page's two review-mode URLs too (FF-1214); the nested list inside
   step 1 sits close to its line; the example embed is the timer page's own
   frame, full width at the figures' 12px radius, the base behind it while it
   loads. */
.copy-link {
  user-select: all; -webkit-user-select: all;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 15px;
  overflow-wrap: anywhere;
}
.page-main li > ul { margin: .4em 0 .6em; }
.embed-example { display: block; width: 100%; border: 0; border-radius: 12px; margin: 24px 0 8px; background: var(--base); }

/* ---- A comparison table (FF-1195 §2) ------------------------------------
   A real table, six columns, on the column's edge: up to 880px wide, centred
   on the 640 column by negative margins, so from 920px nothing scrolls; under
   that a scroll box — a 1px hairline, 12px radius, one Tab stop named by the
   caption (role="region", tabindex="0") with the page's focus ring — the row
   header (and the App header over it) sticky on the base, a hairline on its
   right while content slides under it. Cells 15px / 1.4, 10px 12px, hairline
   dividers; headers 13px at .6 ink; the app's name 15px 600, its maker a 13px
   line under it. The caption rides sticky too, exactly the box's own width
   (the box is a size container; 100cqw), so the dated line wraps inside it
   at every width. */
.table-scroll {
  margin: 24px 0 8px;
  overflow-x: auto;
  border: 1px solid rgb(var(--ink-rgb) / .12);
  border-radius: 12px;
  container-type: inline-size;
}
.table-scroll:focus-visible { outline: 2px solid var(--lit-accent); outline-offset: 2px; }
.compare-table {
  width: 100%; min-width: 760px;
  border-collapse: separate; border-spacing: 0;
  font-size: 15px; line-height: 1.4;
  color: rgb(var(--ink-rgb) / .8);
}
.compare-table caption {
  caption-side: top; text-align: left;
  position: sticky; left: 0;
  width: 100cqw;
  padding: 10px 12px 8px;
  font-size: 13px; line-height: 1.5; color: rgb(var(--ink-rgb) / .6);
}
.compare-table th, .compare-table td {
  padding: 10px 12px;
  text-align: left; vertical-align: top;
  border-bottom: 1px solid rgb(var(--ink-rgb) / .12);
}
.compare-table thead th { font-size: 13px; line-height: 1.5; font-weight: 400; color: rgb(var(--ink-rgb) / .6); }
.compare-table tbody tr:last-child th, .compare-table tbody tr:last-child td { border-bottom: 0; }
.compare-table th[scope="row"] { font-weight: 600; color: var(--ink); }
.compare-table th[scope="row"] .small { display: block; margin-top: 2px; font-weight: 400; }
.compare-table th[scope="row"] a { color: var(--link); }
.compare-table th[scope="row"], .compare-table thead th:first-child {
  position: sticky; left: 0; z-index: 1;
  background: var(--base);
  box-shadow: 1px 0 0 rgb(var(--ink-rgb) / .12);
}
.compare-table td:nth-child(5) { white-space: nowrap; }
.compare-table td:last-child { min-width: 200px; }
@media (min-width: 920px) {
  .table-scroll { width: 880px; margin-left: -120px; margin-right: -120px; border: 0; border-radius: 0; overflow: visible; }
  .compare-table caption { padding-left: 0; padding-right: 0; width: auto; }
  .compare-table th[scope="row"], .compare-table thead th:first-child { box-shadow: none; }
}

/* ---- The press page (FF-1196) ---------------------------------------------
   Facts: a <dl> in two columns from 480 (max-content 1fr), the labels in the
   panel's 13px group-label style, the values at the prose size; stacked
   below 480 with 12px under each value. FF-1214: the values are short, one or
   two lines on a phone; text-wrap: pretty keeps a lone word off the last. */
.facts { display: grid; grid-template-columns: 1fr; gap: 0 24px; margin: 0 0 1em; }
.facts dt { font-size: 13px; line-height: 1.5; color: rgb(var(--ink-rgb) / .6); }
.facts dd { margin: 0 0 12px; text-wrap: pretty; }
@media (min-width: 480px) {
  .facts { grid-template-columns: max-content 1fr; row-gap: 8px; }
  .facts dt { padding-top: 4px; }
  .facts dd { margin-bottom: 0; }
}

/* The figures (FF-1196 §2): a link that saves the original (download) with
   the preview and its meta line inside it, the caption outside; the meta
   line is the affordance — no hover change. The iPhone, iPad and Mac
   screens carry their own device frame or window, transparent around it
   (FF-1259 revision 1), so the page's base shows through and the 12px
   radius only trims transparent corners. Icons: two
   rows of four at 96px, the name under each, two-by-two on a phone, no
   radius (the file carries its own). iPhone: three across at every width.
   iPad, Mac and Vision Pro: two across from 640, stacked below (the Mac's
   one portrait window in the first column, at the iPad's width). Watch:
   three across at 200px (life size), the screen's corner radius as a mask
   — a fifth of the width — while the file stays rectangular. */
.press-grid { display: grid; gap: 20px 16px; margin: 24px 0 8px; }
.page-main .press-grid figure { margin: 0; }
.page-main .press-grid a { display: block; color: inherit; text-decoration: none; }
.page-main .press-grid a:focus-visible { outline: 2px solid var(--lit-accent); outline-offset: 4px; border-radius: 12px; }
.page-main .press-grid img { display: block; width: 100%; height: auto; border-radius: 12px; }
.press-grid .meta { display: block; margin-top: 6px; font-size: 13px; line-height: 1.5; color: rgb(var(--ink-rgb) / .6); }
.press-grid figcaption { margin-top: 2px; font-size: 15px; line-height: 1.4; color: var(--ink); }
.press-icons { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.page-main .press-icons img { width: 96px; height: 96px; border-radius: 0; }
.page-main .press-icons a:focus-visible { border-radius: 4px; }
.page-main p.press-row-label { margin: 16px 0 0; }
.press-phones { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.press-wide { grid-template-columns: 1fr; }
@media (min-width: 640px) { .press-wide { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.press-watch { grid-template-columns: repeat(3, minmax(0, 200px)); }
.page-main .press-watch img { border-radius: 20% / 16.8%; }
@media (max-width: 479px) {
  .press-icons { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .press-watch { grid-template-columns: repeat(3, minmax(0, 100px)); }
}

/* ---- The download section (FF-1209) ---------------------------------------
   <main>'s last child on What's in Pro, the device guides and the
   comparisons: the timer's lit surface (HomeSurface .lit), centred, the
   column's full width — the lit fill with a soft theme glow by day, a 1px
   hairline inside its edge by night; the timer's 28px radius; 40 / 24 / 36
   inside. Stacked: the icon at 80 (the file carries its mask), 20, the title
   in the h2 style, balanced, 8, the sentence (max 28em), 24, the badge — at
   least 24px of clear space round it. 48px under the last paragraph, 64 from
   640 (the paragraph's own margin collapses into it). Nothing moves. */
.download {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  margin-top: 48px;
  padding: 40px 24px 36px;
  border-radius: 28px;
  background: var(--lit-fill);
  box-shadow: 0 6px 24px color-mix(in srgb, var(--primary) 18%, transparent);
}
@media (min-width: 640px) { .download { margin-top: 64px; } }
@media (prefers-color-scheme: dark) { .download { box-shadow: inset 0 0 0 1px rgb(255 255 255 / .1); } }
.download-icon { display: block; width: 80px; height: 80px; margin: 0 0 20px; }
.page-main .download h2 { margin: 0 0 8px; max-width: 100%; text-wrap: balance; }
.page-main .download p { margin: 0; max-width: 28em; text-wrap: pretty; }
.download .badge-link { margin-top: 24px; width: fit-content; }
/* The badge's focus ring as the footer's (timer.css): 10px out, round its
   corners — not the text links' 2px ring, which .page-main a would give it. */
.page-main .download .badge-link:focus-visible { outline-offset: 10px; border-radius: 7px; }

/* ---- The footer: on the column's left edge -----------------------------
   A hairline 48px under the last line (64 from 640), 32px, the badge, 16,
   the links line, 8, the © line, Apple's credit, 32 and the safe area.
   FF-1209 — on a page with the download section the footer has no badge
   (data-badge="off"): the links line sits 32px under the hairline. */
.site-footer {
  margin-top: 48px;
  padding-bottom: calc(32px + env(safe-area-inset-bottom, 0px));
}
@media (min-width: 640px) { .site-footer { margin-top: 64px; } }
.site-footer::before { content: ""; display: block; height: 1px; margin-bottom: 32px; background: rgb(var(--ink-rgb) / .12); }
.site-footer .badge-link { width: fit-content; }
.footer-links, .footer-small { font-size: 13px; line-height: 1.5; color: rgb(var(--ink-rgb) / .6); }
.footer-links { margin: 16px 0 0; }
.site-footer[data-badge="off"] .footer-links { margin-top: 0; }
.footer-small { margin: 8px 0 0; }
.footer-small + .footer-small { margin-top: 4px; }
.footer-links a { color: inherit; text-decoration: underline; text-underline-offset: 2px; text-decoration-color: rgb(var(--ink-rgb) / .35); border-radius: 2px; }
.footer-links a:hover { color: var(--ink); }
.footer-links a:focus-visible { outline: 2px solid var(--lit-accent); outline-offset: 2px; }

/* ---- Reduced motion: the header's slide instant; the panel's rides along
   from timer.css. Nothing else on a page moves. */
@media (prefers-reduced-motion: reduce) {
  .site-header.is-sticky { transition: none; }
}