/* The widget pages at /widget/<slug>/ (src/widget-page.njk, built from
   site/widget-pages/). On top of skin.css and site.css: the breadcrumb, the
   form pieces for the "try it" block, the first screen, the board, the spec
   list, the FAQ and the related widgets. Moved from the owner-approved
   mockups in mockups/widget-pages/ (_widget-page.css, _capture-page.css). */

.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

/* ── Breadcrumb and the lines around the H1 ─────────────────────────────── */
.crumbs ol { display: flex; flex-wrap: wrap; gap: 4px 8px; margin: 0; padding: 0; list-style: none; font-size: 13px; font-weight: 700; color: var(--ink-3); }
.crumbs li + li::before { content: "›"; margin-right: 8px; color: var(--page-muted); }
.crumbs a { color: var(--ink-3); text-decoration: none; }
.crumbs a:hover { color: var(--ink); }
.crumbs [aria-current] { color: var(--ink-2); }
.updated { font-size: 13px; color: var(--ink-3); }

/* ── Form pieces in the site's language (the waiting list bar's field) ──── */
.cd-field { display: grid; gap: 6px; min-width: 0; }
.cd-field > span { font-size: 13px; font-weight: 700; color: var(--ink-2); }
.cd-input {
  box-sizing: border-box; width: 100%; height: 44px; padding: 0 12px;
  border: 1px solid var(--page-orbit); border-radius: 10px; background: var(--page-deep);
  color: var(--ink); font: inherit; font-size: 15px; color-scheme: dark;
  transition: border-color 0.15s var(--ease-out), box-shadow 0.15s var(--ease-out);
}
.cd-input::placeholder { color: #7F90B4; }
.cd-input:focus-visible { outline: none; border-color: var(--primary); box-shadow: 0 0 0 1px var(--primary); }

/* A segmented choice: radios or checkboxes styled as one strip, the app's
   .toggle-group. The input stays in the page for the keyboard. */
.cd-seg { display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 3px; border: 1px solid var(--page-orbit); border-radius: 10px; background: var(--page-deep); }
.cd-seg label { position: relative; }
.cd-seg input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.cd-seg span {
  display: grid; place-items: center; height: 32px; padding: 0 12px; border-radius: 7px;
  font-size: 12px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3);
  transition: background-color 0.15s var(--ease-out), color 0.15s var(--ease-out);
}
.cd-seg label:hover span { color: var(--ink); }
.cd-seg input:checked + span { background: color-mix(in srgb, var(--primary) 22%, transparent); color: var(--ink); }
.cd-seg input:focus-visible + span { outline: 2px solid var(--primary); outline-offset: 1px; }
.cd-seg label.is-off span { opacity: 0.4; }
.cd-seg label.is-off input { cursor: not-allowed; }

/* The maker shows the fields that belong to its mode. */
.maker[data-mode="numbers"] .for-dots, .maker[data-mode="dots"] .for-numbers { display: none; }

/* The preview slot: a tile needs a definite box to size its numbers. */
.cd-slot { position: relative; display: grid; min-width: 0; }
.cd-slot > .tile { width: 100%; height: 100%; }
.cd-empty { display: grid; place-items: center; height: 100%; padding: 24px; border: 1px dashed var(--page-orbit); border-radius: 14px; text-align: center; color: var(--ink-3); }
.cd-say { font-size: 14px; color: var(--ink-3); min-height: 1.55em; }

/* Dots mode, as the app draws it: a thin bar with the label and what is left, then the grid. */
.cd-dots-body { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.cd-dots-bar { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 10px; border-bottom: 1px solid rgba(255, 255, 255, 0.05); background: var(--tile-source-bg); font-size: 11px; }
.cd-dots-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; color: var(--foreground); }
.cd-dots-left { flex: 0 0 auto; font-variant-numeric: tabular-nums; color: rgba(255, 255, 255, 0.55); }
.cd-dots-grid { flex: 1; min-height: 0; padding: 6px; }

/* ── Links that are ideas: a date, how far away, and "count down to it" ─── */
.idea { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 4px 16px; padding: 14px 0; border-top: 1px solid var(--rule); }
.idea > .load { grid-column: 3; }
@media (max-width: 479px) { .idea { column-gap: 10px; } .idea > .load { padding: 0 10px; } }
.idea:last-child { border-bottom: 1px solid var(--rule); }
.idea b { display: block; font-size: 16px; color: var(--ink); }
.idea small { display: block; font-size: 13px; color: var(--ink-3); }
.idea [data-days] { font-size: 15px; font-weight: 900; font-variant-numeric: tabular-nums; color: var(--ink); white-space: nowrap; }
.load {
  display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px;
  border: 1px solid var(--page-orbit); border-radius: 8px; background: transparent;
  color: var(--ink-2); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer;
  transition: border-color 0.2s var(--ease-out), color 0.2s var(--ease-out), background-color 0.2s var(--ease-out);
}
.load:hover { border-color: var(--page-help); color: var(--ink); background: rgba(255, 255, 255, 0.03); }
.load .ico { width: 11px; height: 11px; }

/* ── FAQ ─────────────────────────────────────────────────────────────────── */
.faq { max-width: 52rem; }
.faq details { border-top: 1px solid var(--rule); }
.faq details:last-child { border-bottom: 1px solid var(--rule); }
.faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 18px 0; cursor: pointer; list-style: none;
  font-size: 17px; font-weight: 700; line-height: 1.35; color: var(--ink);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; flex: 0 0 auto; font-size: 22px; font-weight: 500; line-height: 1; color: var(--ink-3); transition: transform 0.2s var(--ease-out); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq summary:hover { color: var(--lime); }
.faq .a { padding: 0 0 20px; max-width: 68ch; font-size: 16px; line-height: 1.65; color: var(--ink-2); }
.faq .a p + p { margin-top: 10px; }
.faq h3 { display: contents; font: inherit; color: inherit; }

/* ── Related widgets: names, not cards ──────────────────────────────────── */
.related ul { display: grid; gap: 0 40px; margin: 0; padding: 0; list-style: none; }
@media (min-width: 720px) { .related ul { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .related ul { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.related li { border-top: 1px solid var(--rule); }
.related a { display: grid; gap: 2px; padding: 14px 0; text-decoration: none; }
.related a b { font-size: 16px; color: var(--ink); transition: color 0.2s var(--ease-out); }
.related a span { font-size: 14px; color: var(--ink-3); }
.related a:hover b { color: var(--lime); }

/* ── First screen ─────────────────────────────────────────────────────── */
.hero {
  padding: clamp(28px, 2vw + 16px, 48px) 0 clamp(48px, 3vw + 28px, 88px);
  background-color: var(--page-deep); background-image: var(--stars); background-size: 40px 40px;
  border-bottom: 1px solid var(--rule);
}
.hero::before { content: ""; display: block; height: 2px; margin-top: calc(-1 * clamp(28px, 2vw + 16px, 48px)); margin-bottom: clamp(28px, 2vw + 16px, 48px); background: var(--lime); }
/* Desktop: the words on the left, the widget on the right. A phone: the
   widget straight after the answer line, so it is on the first screen, and
   the actions and facts after it. */
.hero-grid { display: grid; gap: 28px; grid-template-areas: "intro" "shot" "rest"; }
.hero-intro { grid-area: intro; } .hero-rest { grid-area: rest; } .hero-grid > .shot { grid-area: shot; }
@media (min-width: 1024px) {
  .hero-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); grid-template-areas: "intro shot" "rest shot"; grid-template-rows: auto 1fr; column-gap: 64px; row-gap: 0; align-items: start; }
  .hero-grid > .shot { align-self: center; }
}
.hero h1 { margin-top: 18px; font-size: clamp(36px, 2.4vw + 18px, 58px); line-height: 1.03; letter-spacing: -0.035em; }
.hero .answer { margin-top: 16px; max-width: 46ch; font-size: 18px; line-height: 1.55; color: var(--ink-2); }
.hero-act { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 20px; }
@media (min-width: 1024px) { .hero-act { margin-top: 26px; } }
.hero-act .btn { height: 48px; padding: 0 22px; border-radius: 11px; font-size: 15px; }
.hero-act .more { font-size: 15px; font-weight: 700; color: var(--ink-2); text-decoration: none; }
.hero-act .more:hover { color: var(--ink); }

/* Three facts a visitor weighs first: what it needs, where it reads from, when it updates. */
.facts3 { display: grid; gap: 10px 24px; margin: 28px 0 0; padding: 18px 0 0; border-top: 1px solid var(--rule); }
@media (min-width: 560px) { .facts3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.facts3 dt { font-size: 12px; font-weight: 800; color: var(--ink-3); }
.facts3 dd { margin: 2px 0 0; font-size: 14px; line-height: 1.45; color: var(--ink); }

/* The widget, as the app draws it. The theme buttons swap between four real
   captures; the image keeps its box so nothing below moves. */
.shot { margin: 0; display: grid; gap: 12px; }
.shot-frame { display: grid; place-items: center; }
.shot-frame img { width: auto; max-width: 100%; height: auto; max-height: 480px; filter: drop-shadow(0 28px 48px rgba(0, 0, 0, 0.55)); }
.shot-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; }
.shot figcaption { font-size: 13px; line-height: 1.5; color: var(--ink-3); }
.shot figcaption b { color: var(--ink-2); }

/* Connect first: the three steps, for a widget whose numbers are the person's own. */
.steps3 { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; counter-reset: s; }
@media (min-width: 640px) { .steps3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.steps3 li { position: relative; padding: 12px 14px 12px 46px; border: 1px solid var(--rule); border-radius: 12px; background: var(--page-panel); counter-increment: s; font-size: 14px; line-height: 1.4; color: var(--ink-2); }
.steps3 li::before { content: counter(s); position: absolute; left: 12px; top: 11px; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--lime); color: #07090F; font-size: 13px; font-weight: 900; }
.steps3 b { display: block; color: var(--ink); }

/* ── Rows ─────────────────────────────────────────────────────────────── */
.row.panel { background: var(--page-panel); }
.row .row-head { margin-bottom: 32px; }
.row-head p { max-width: 62ch; }

/* The board: three columns, each a stack, so real captures of different
   shapes sit together the way they would on a board. Live tiles fill the
   room left under the shorter captures. */
.cboard { display: grid; gap: 14px; }
@media (min-width: 900px) { .cboard { grid-template-columns: 4fr 3fr 3fr; align-items: stretch; } }
.cboard-col { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.cboard img { width: 100%; height: auto; display: block; }
.cboard .tile { flex: 1 1 auto; min-height: 112px; }
.cboard .is-this { outline: 2px solid var(--lime); outline-offset: 4px; border-radius: 14px; }
.cboard-cap { margin-top: 16px; font-size: 14px; color: var(--ink-3); max-width: 80ch; }

/* What it shows: terms on the left, plain facts on the right. */
.spec { display: grid; margin: 0; }
.spec > div { display: grid; gap: 4px 32px; padding: 16px 0; border-top: 1px solid var(--rule); }
.spec > div:last-child { border-bottom: 1px solid var(--rule); }
@media (min-width: 760px) { .spec > div { grid-template-columns: 220px minmax(0, 1fr); } }
.spec dt { font-weight: 800; color: var(--ink); }
.spec dd { margin: 0; max-width: 66ch; color: var(--ink-2); }

.prose { max-width: 68ch; }
.prose p { font-size: 17px; line-height: 1.7; }
.prose p + p { margin-top: 14px; }
.prose ul { margin: 14px 0 0; padding-left: 1.2em; }
.prose li { font-size: 17px; line-height: 1.6; color: var(--ink-2); }
.prose li + li { margin-top: 8px; }
.prose a { color: var(--ink); text-decoration: underline; text-decoration-color: rgba(143, 160, 196, 0.5); text-underline-offset: 3px; }
.split2 { display: grid; gap: 32px; }
@media (min-width: 1000px) { .split2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 64px; } }
.split2 h3 { font-size: 20px; margin-bottom: 10px; }

/* ── Live pages (_pages-live.mjs): the real widget, and its settings to try ── */
.live-shot { gap: 14px; }
.live-slot > .tile { width: 100%; height: 100%; }
.live-shot .cd-say { margin: 0; }
.live-maker .maker-form { display: grid; gap: 16px; }
.live-maker .opts { display: flex; flex-wrap: wrap; gap: 16px 24px; }
.cd-seg.cd-wrap { display: flex; flex-wrap: wrap; }
.cd-narrow { max-width: 180px; }
.cboard .tile.is-this { outline: 2px solid var(--lime); outline-offset: 4px; }

/* ── /widgets/: every widget by group ───────────────────────────────────── */
.hero-list { padding-bottom: clamp(32px, 2vw + 20px, 56px); }
.hero-list h1 { margin-top: 18px; font-size: clamp(36px, 2.4vw + 18px, 58px); line-height: 1.03; letter-spacing: -0.035em; }
.hero-list .answer { margin-top: 16px; max-width: 58ch; font-size: 18px; line-height: 1.55; color: var(--ink-2); }
.related .plain { display: grid; gap: 2px; padding: 14px 0; }
.related .plain b { font-size: 16px; color: var(--ink-2); }
.related .plain span { font-size: 14px; color: var(--ink-3); }
.list-live { margin-top: 32px; }
@media (min-width: 900px) { .list-live { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* Two fields side by side in a "try it" form (Count Up's start and label). */
.live-maker .pair { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 12px; }
@media (max-width: 479px) { .live-maker .pair { grid-template-columns: minmax(0, 1fr); } }
/* A field that only applies to one choice: the Clock's face, for Analog. */
.live-maker:has(input[name="format"][value="analog"]:not(:checked)) .for-analog { display: none; }
.cd-select { appearance: auto; }
/* Moon Phase's shape switch: the three layouts the widget takes by size. */
.live-slot[data-shape] { margin-inline: auto; max-width: 100%; }
.live-slot[data-shape="tall"] { width: 300px; height: 380px !important; }
.live-slot[data-shape="wide"] { width: 100%; height: 230px !important; }
.live-slot[data-shape="short"] { width: 250px; height: 220px !important; }
.live-slot[data-shape="small"] { width: 232px; height: 232px !important; }
.live-slot[data-shape="medium"] { width: 355px; height: 355px !important; }
.live-slot[data-shape="large"] { width: 100%; height: 360px !important; }