/*
 * Missing Piece's pages, in the app's own dress. Every value comes from the app (missing-piece-ios App/Design):
 * the palettes (MPPalette.swift: Cream, and Dark when dark is picked), the type ramp (MPTextStyle.swift, MPFont.swift),
 * and the parts: BackHeader, CountPill, Settings' rows in their soft containers (MPSettingRow under mpRowCards),
 * Credits' table rows (MPTableRow, stacked), HairlineRule, MPButton. No dotted rules: the app dropped them
 * (2026-10-14). Sizes are the app's points, which are CSS pixels on a phone.
 */

/* The titles' face, Wanted Sans ExtraBlack (one weight), cut to Latin for the web. */
@font-face { font-family: "Wanted Sans"; src: url("fonts/WantedSans-ExtraBlack.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Open Sans"; src: url("fonts/OpenSans-VF.woff2") format("woff2"); font-weight: 300 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Open Sans"; src: url("fonts/OpenSans-Italic-VF.woff2") format("woff2"); font-weight: 300 800; font-style: italic; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("fonts/IBMPlexMono-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("fonts/IBMPlexMono-Medium.woff2") format("woff2"); font-weight: 500; font-display: swap; }

/* MPPalette.light, named Cream */
:root {
  --wall: #F3EAC3;
  --ink: #1F1B14;
  --muted: #7D735F;
  --hairline: #DCD3AC;
  --control: #D9D3AF;
  --on-control: #9B957C;
  --accent: #1F1B14;                     /* the highlighted button */
  --on-accent: #F3EAC3;
  --strong: #5A4A34;                     /* darkAccent: the muted brown, deepened (Settings' names and icons) */
  --card: rgb(0 0 0 / 0.05);             /* a row's container on the Settings pages */
  --description: rgb(31 27 20 / 0.72);   /* ink at 72 % */
  --faint: rgb(125 115 95 / 0.5);        /* muted at 50 % */
  --moon: block;                         /* the toggle offers the other theme */
  --sun: none;
  color-scheme: light;
}

/* MPPalette.afterHours, named Dark: only when dark is picked (theme.js); every page starts in Cream, whatever the device. */
:root[data-theme="dark"] {
  --wall: #1A1917;
  --ink: #E8E4DC;
  --muted: #948F86;
  --hairline: #363430;
  --control: #2B2925;
  --on-control: #A9A49A;
  --accent: #E8E4DC;
  --on-accent: #1A1917;
  --strong: #E8E4DC;                     /* Dark's strong accent is its off-white ink */
  --card: rgb(255 255 255 / 0.07);
  --description: rgb(232 228 220 / 0.72);
  --faint: rgb(148 143 134 / 0.5);
  --moon: none;
  --sun: block;
  color-scheme: dark;
}

/* The gallery light (GallerySpot in the app's PhraseShare.swift): a warm spot, 10 % at its heart (the app's 18 %, quieter on the web) and gone at its edge,
 * that follows the cursor over the dark wall. After hours on the web only: not in light, not in the app's own screen,
 * not where there is no pointer to follow. Behind the words (z-index -1, under body's content, over the wall); theme.js
 * moves it and lights it on the first move. */
@media (hover: hover) and (pointer: fine) {
  :root[data-theme="dark"]:not([data-app]) body::before {
    content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
    background: radial-gradient(circle min(72vw, 420px) at var(--light-x, 50%) var(--light-y, 30%),
                                rgb(255 214 150 / 0.1), rgb(255 214 150 / 0));
    opacity: var(--light-on, 0); transition: opacity 0.6s ease;
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--wall); color: var(--ink); -webkit-font-smoothing: antialiased; }
a { color: inherit; }

/* The column: a phone's width, the app's 24 pt margins; at least the window's height, so on a short page the links and
 * the footer sit at the bottom of the window. Its children set only top margins, so none collapse as a column. */
.page {
  max-width: 480px; margin: 0 auto; padding: 24px 24px 40px;
  min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column;
}

/* ——— The type ramp (MPTextStyle) ——— */
/* Wanted Sans ExtraBlack, as the app draws its titles. */
.title28, .title22, .title17 {
  font-family: "Wanted Sans", sans-serif; font-weight: 900; letter-spacing: 0;
  margin: 0;
}
.title28 { font-size: 28px; line-height: 1.15; }
.title22 { font-size: 22px; line-height: 1.2; }
.title17 { font-size: 17px; line-height: 1.3; }
/* Open Sans with the app's extra leading (Figma's 150 %). */
.body17, .body17i { font: 400 17px/27px "Open Sans", sans-serif; margin: 0; }
.body17i { font-style: italic; }
.body16, .body16i, .body16s { font: 400 16px/25px "Open Sans", sans-serif; margin: 0; }
.body16i { font-style: italic; }
.body16s { font-weight: 600; }
.body13 { font: 400 13px/20px "Open Sans", sans-serif; margin: 0; }
.button15 { font: 600 15px/1 "Open Sans", sans-serif; }
/* Mono labels: upper case, 5 % tracking, muted. */
.label10 { font: 500 10.5px/1.3 "IBM Plex Mono", monospace; letter-spacing: 0.525px; text-transform: uppercase; color: var(--muted); margin: 0; }
.meta12 { font: 400 12.5px/1.45 "IBM Plex Mono", monospace; color: var(--muted); margin: 0; }

.muted { color: var(--muted); }
.description { color: var(--description); }
.ink { color: var(--ink); }

/* ——— Parts ——— */

/* The header: the app icon at the left and the theme toggle at the right on one row, the title on its own row below. */
.header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; min-height: 44px; }
.header > .title28 { order: 1; flex-basis: 100%; min-width: 0; }

/* The theme toggle: a moon in light, a sun in dark, at the header's right, a 44 pt target. */
.theme-toggle {
  flex: none; width: 44px; height: 44px; margin-right: -10px; padding: 0; border: 0; border-radius: 11px;
  display: grid; place-items: center; background: none; color: var(--muted); cursor: pointer;
}
.theme-toggle:hover { color: var(--ink); }
.theme-toggle:focus-visible { outline: 2px solid var(--ink); outline-offset: -2px; }
.theme-toggle svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.theme-toggle .moon { display: var(--moon); }
.theme-toggle .sun { display: var(--sun); }
.tile {
  flex: none; width: 44px; height: 44px; border-radius: 11px;
  display: grid; place-items: center; background: var(--control); color: var(--on-control);
}
.tile svg { width: 16px; height: 16px; }
/* The app icon, its iPhone corners drawn into the image (assets/app-icon.png, 192 px, 3x). */
.icon-tile { flex: none; width: 64px; height: 64px; display: block; }
/* The icon leads to Help, the site's main page. */
.home { flex: none; display: block; border-radius: 14px; }
.home:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

/* CountPill: a small fact on the control fill. */
.pill-tag {
  display: inline-block; padding: 3px 6px; border-radius: 5px; background: var(--control); color: var(--on-control);
}

/* HairlineRule: a 1 pt line in the hairline colour. */
.rule { height: 1px; border: 0; margin: 0; background: var(--hairline); }

/* A group's name in the title face and the strong accent, as Settings' names and icons; 32 pt between groups. */
.group { margin-top: 32px; }
.group > .title17 { color: var(--strong); margin-bottom: 4px; }
/* Each section's name follows a puzzle piece (assets/puzzle.png as a mask), in the name's own colour, its middle on
 * the capitals' middle: sat on the baseline, then lowered by half of what it stands taller than a capital. From the
 * font's own cap height, so it holds whatever the browser makes of the title face's line box. */
h2.title17 { display: flex; align-items: baseline; gap: 8px; font-size: 19px; }
h2.title17::before {
  content: ""; flex: none; width: 20px; height: 20px; background: currentColor;
  transform: translateY(calc((20px - 1cap) / 2));
  margin-top: calc(1cap - 20px);  /* no taller than a capital to the line, so the title keeps its height */
  -webkit-mask: url("puzzle.png") center / contain no-repeat; mask: url("puzzle.png") center / contain no-repeat;
}

/* MPSettingRow: title, an optional detail under it, the value and an arrow at the right. */
.row {
  display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 12px 0;
  text-decoration: none; color: var(--ink);
}
.row.tall { min-height: 56px; padding: 16px 0; }
.row .text { flex: 1; min-width: 0; }
.row .text > span { display: block; }
.row .text > * + * { margin-top: 2px; }
.row .value { color: var(--muted); text-align: right; }
/* A link to another page: a north-east arrow, drawn as the theme toggle's icons are. */
.row .go {
  flex: none; width: 16px; height: 16px; fill: none; stroke: var(--muted);
  stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round;
}
a.row:hover .text > :first-child { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }

/* Rows as the Settings pages draw them (mpRowCards): each in its own rounded container, a veil over the wall, 68 pt
 * high at least, 8 pt apart, no rule between; the name semibold in the strong accent. The links to the other pages and
 * Help's questions. */
.page > nav { display: flex; flex-direction: column; gap: 8px; }
.page > nav .row, .fold {
  min-height: 68px; padding: 20px 16px; border-radius: 15px; background: var(--card);
}
.page > nav .row .body16 { font-weight: 600; color: var(--strong); }
.fold { padding-top: 0; padding-bottom: 0; }
.group > .fold + .fold { margin-top: 8px; }
.fold > summary.row { min-height: 68px; padding: 20px 0; }
.fold .body16s { color: var(--strong); }

/* Help's questions: folded at first, the question a row with its chevron pointing down; a tap opens the answer under it
 * and turns the chevron up. */
.fold > summary { list-style: none; cursor: pointer; }
.fold > summary::-webkit-details-marker { display: none; }
.fold > summary:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; border-radius: 4px; }
.fold > summary:hover .body16s { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
/* The chevron drawn as a box's two edges, so it turns on its own middle: down folded, up open. */
.fold-mark {
  flex: none; width: 7px; height: 7px; margin: 0 3px 3px 0;
  border: solid var(--muted); border-width: 0 2px 2px 0; opacity: 0.7;  /* the app's bold chevron, at 70 % of muted */
  transform: rotate(45deg); transition: transform 0.2s ease, margin 0.2s ease;
}
.fold[open] .fold-mark { transform: rotate(-135deg); margin: 3px 3px 0 0; }
.fold > p { margin: -8px 0 0; padding-bottom: 20px; }

/* MPTableRow, stacked (Credits): the mono label in a 73 pt cell, the value, mono meta under it; a hairline between. */
.table-row {
  display: grid; grid-template-columns: 73px 1fr; column-gap: 0; padding: 9px 0;
  border-bottom: 1px solid var(--hairline);
}
.table-row > .label10 { padding-top: 4px; padding-right: 8px; }
.table-row .value > * + * { margin-top: 4px; }

/* MPButton: flat, rounded a quarter of its height, 48 pt (56 tall); the main action in the accent, or soft on the
 * control fill. */
.button {
  display: inline-flex; align-items: center; justify-content: center;
  height: 48px; padding: 0 20px; border-radius: 12px; text-decoration: none;
  background: var(--accent); color: var(--on-accent);
}
.button.tall { height: 56px; border-radius: 14px; }
.button.full { display: flex; width: 100%; }
.button.soft { background: var(--control); color: var(--on-control); }
.button:hover { opacity: 0.88; }

/* A path to follow in the app, "Me › Settings", in the text's own size. */
.path { font-weight: 600; }


/* The roadmap's board (roadmap.html): Just shipped and Now across the top, Next and Later below, each column a soft
 * container of cards on the wall. On a phone the columns sit in one row that scrolls sideways, a column to a swipe, the
 * next one peeking in at the edge. */
.page.wide { max-width: 1040px; }
.board { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-top: 32px; align-items: start; }
.column { border-radius: 18px; padding: 16px; background: var(--card); }
.column > .title17 { color: var(--strong); margin-bottom: 12px; }
.cards { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.card { border-radius: 12px; padding: 14px 14px 16px; background: var(--wall); }
.card > h3 { margin: 0; color: var(--strong); }
.card > * + * { margin-top: 2px; }
.card > .meta12 { margin-top: 8px; }
@media (max-width: 820px) {
  .board {
    display: flex; gap: 12px; margin: 32px -24px 0; padding: 0 24px 4px;
    overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 24px; scrollbar-width: none;
  }
  .board::-webkit-scrollbar { display: none; }
  .column { flex: 0 0 82%; scroll-snap-align: start; }
}

/* Spacing, in the app's steps. */
.stack-4 > * + * { margin-top: 4px; }
.stack-8 > * + * { margin-top: 8px; }
.stack-12 > * + * { margin-top: 12px; }
.stack-16 > * + * { margin-top: 16px; }
.stack-20 > * + * { margin-top: 20px; }
.gap-24 { margin-top: 24px; }
.gap-32 { margin-top: 32px; }

/* The links take the room a short page leaves; their 32 pt from the content above becomes padding. */
.page > nav { margin-top: auto; padding-top: 32px; }
/* The name at the foot of the page in the titles' Wanted Sans, as the app writes its name, muted and in its own case;
 * the year at the right. */
.footer-note {
  display: flex; justify-content: space-between; gap: 12px;
  margin-top: 24px; font: 900 15px/1.3 "Wanted Sans", sans-serif; letter-spacing: 0; text-transform: none;
}

/* In the app (?app=light|dark, theme.js): the app draws the title and back button, so the page starts at its date and
   leaves out the header, the links to the other pages and the footer. */
[data-app] .page { padding-top: 0; }
[data-app] .header, [data-app] nav, [data-app] .footer-note { display: none; }
[data-app] .header + .gap-24 { margin-top: 0; }