/* shell.css — the components all four tabs share.
 *
 * WHY THIS FILE EXISTS. Measured on main 7099b9d, 2026-09-09: Home, Us, Play and You ran four
 * stylesheet stacks that had only base.css in common, and each had re-derived the same six
 * objects. home.css carried 2 colour literals, hub.css 46, app.css 30, landing.css 53 — which is
 * not a styling difference, it is four palettes. Evan resized his window, saw tiles hanging out of
 * place, and said the four tabs are not one system. He was right.
 *
 * WHAT IS IN IT. Six things and nothing else (they are tabulated in docs/STYLE-GUIDE.md §05): the page header, the section label, the card, the
 * card row, the chip row and the number card. The seventh shared component — the tinted icon well
 * (`.iwell`, four colours) — already lives in base.css, which every tab loads first, so it is NOT
 * restated here; see docs/STYLE-GUIDE.md §05.
 *
 * WHERE IT CAME FROM. Nothing here is new. Every rule is lifted from `client/couple/home.css` —
 * the couple's home, which shipped in R5, which Evan approved, and which is the target the other
 * three tabs are being moved onto. This is that page's vocabulary with the page-specific names
 * taken off it. No redesign happened in this file and none should.
 *
 * LOAD ORDER. `base.css` first (tokens, type, buttons, the three layout primitives), `shell.css`
 * second, then whatever a page alone needs. A page's own stylesheet must be the short one.
 *
 * TOKENS. This file declares none and defines no theme block on purpose — every colour below is a
 * token declared in base.css's bare `:root` before any theme block touches it, so dark mode and
 * the warm register are already answered and there is nothing here to keep in sync.
 *
 * MEASURED PAIRINGS (docs/STYLE-GUIDE.md §02). Light / dark, every one read off getComputedStyle
 * on a live page at 900px on 2026-09-09 — not estimated. AA asks 4.5; the thinnest is 4.61.
 *   --ink           on --paper-raised   17.74 / 13.72   a card's first line, a number, a chip label
 *   --ink-soft      on --paper-raised    6.47 /  7.11   every sub-line on paper, the chip's icon
 *   --ink-faint     on --paper-raised    4.81 /  5.30   the eyebrow and the quiet furniture
 *   --ink-faint     on --paper           4.57 /  5.98   the same, standing on the page ground
 *   --teal-deep     on --paper-raised    5.90 / 10.26   the section label, the row's "Open"
 *   --teal-deep     on --paper           5.60 / 11.58   the same label on the page ground
 *   --on-pink-tint  on --pink-tint       4.61 /  9.79   a tinted card, the lit chip (--me is pink)
 *   --on-blue-tint  on --blue-tint       5.04 / 10.34
 *   --on-green-tint on --green-tint      5.83 / 10.08
 *   --on-lav-tint   on --lav-tint        6.00 /  9.78
 * --pink-tint is the tightest ground in the product at 4.61 and has nothing to spare: do not dim
 * anything that sits on it, do not tint it further, and do not set 11px on it. That is not a
 * hypothetical — see the sub-line correction in this file's own §03, the card.
 * Nothing here puts white on pink, on blue or on a gradient — the failure §08 is named after.
 *
 * NO LAYOUT MEDIA QUERY LIVES IN THIS FILE. Anything that needs to reflow does it with
 * `.cards` (base.css) or with flex-wrap. If a component here ever needs `@media (max-width: …)`
 * to look right, the component is wrong, not the width.
 */

/* ── 01 · the page header ───────────────────────────────────────────────────────────────────────
 * What every tab opens with: a quiet eyebrow, the thing this page is, one sentence about it, and
 * an optional object on the right (the couple's tree, a count, a control). It wraps rather than
 * breaking at a breakpoint: the aside sits beside the words while there is room for both and drops
 * under them when there is not, at whatever width that happens to be on that device.
 */
.sh-head {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 18px 28px;
  padding: 4px 0 2px;
}
.sh-head__text {
  display: flex; flex-direction: column; gap: 10px;
  flex: 1 1 320px; min-width: 0;
}
/* Sentence case, no mono, no letter-spacing. The mono uppercase kicker is the single most
   template-looking thing the shell had and R5 removed it from the home; it does not come back
   here. */
.sh-head__eyebrow {
  margin: 0; font-size: 13px; font-weight: 600; color: var(--ink-faint);
  letter-spacing: 0; text-transform: none;
}
/* The title. `.sh-head__title--serif` is the home's treatment — the two people's names set in the
   serif, because the couple is the kept thing and the serif is the only voice on the page that is
   not the software talking. A tab that is not about them uses the plain one. */
.sh-head__title {
  margin: 0;
  font-size: clamp(26px, 6.4vw, 42px);
  font-weight: 700; letter-spacing: -0.02em; line-height: 1.08;
  text-wrap: balance;
}
.sh-head__title--serif {
  font-family: var(--serif, Georgia, serif);
  font-size: clamp(30px, 7.5vw, 52px);
  font-weight: 400; letter-spacing: -0.01em; line-height: 1.08;
}
.sh-head__lead { margin: 0; color: var(--ink-soft); font-size: 16px; line-height: 1.5; max-width: 40ch; }
.sh-head__aside { flex: 0 0 auto; margin-inline: auto; }
/* There is no breakpoint here, and there was one. The first cut added
   `@media (min-width: 1024px) { .sh-head { flex-wrap: nowrap } … }` on the theory that the aside
   should stop centring once there is room beside the words. Measured at 900 / 1024 / 1180 / 1280 /
   1440, with a short title, a long one, and a 420px aside, it changed the geometry by 4px once and
   by nothing at all in every other cell — because with `flex: 1 1 320px` the text already fills
   the line, so `margin-inline: auto` has no free space to centre in and `nowrap` has nothing to
   stop wrapping. What it did add was a failure mode the approved home does not have: `nowrap` with
   a `flex: 0 0 auto` aside cannot fall to a second line, so a wide aside squeezes the words instead
   of dropping under them.
   That is the whole argument of this block in miniature — a breakpoint that was guessed rather than
   measured, buying nothing and costing a way to be wrong at a width nobody tried. */

/* ── 02 · the section label ─────────────────────────────────────────────────────────────────────
 * A small bold sentence in the product's one accent — the same thing a person writes at the top of
 * a list. It replaced `01 · KNOW EACH OTHER` in 12px letter-spaced mono, which was five separate
 * signals that this is software stacked on one line.
 *
 * `.slabel` in base.css is the same object in the quiet ink; use that inside a card, and this on
 * the page ground where the label is the section's voice. Both are 13/700, sentence case.
 */
.sh-label, p.sh-label {
  display: block; margin: 0 0 4px;
  font-size: 13px; font-weight: 700; letter-spacing: 0; text-transform: none;
  color: var(--teal-deep);
}

/* ── 03 · the card ──────────────────────────────────────────────────────────────────────────────
 * A surface that lifts, not a box that is drawn (STYLE-GUIDE §05). Ground, one radius, one shadow,
 * no border. The outline plus the shadow was saying the same thing twice.
 *
 * base.css already has a bare `.card`, which is the games' — ground + radius + shadow and no
 * padding, so a game can put a canvas in it. `.sh-card` is the room's: it is padded, it is a
 * column, and it knows what to do when it is a link.
 */
.sh-card {
  display: flex; flex-direction: column; gap: 2px;
  padding: 16px 18px;
  background: var(--paper-raised);
  border: 0;
  border-radius: var(--r-card);
  box-shadow: var(--shadow-card);
  color: inherit; text-decoration: none;
  min-width: 0;
}
/* Only a card you can press lifts on hover. A card that is merely a card must not pretend. */
a.sh-card:hover, button.sh-card:hover, .sh-card--press:hover { box-shadow: var(--shadow-lift); }
button.sh-card { text-align: left; font: inherit; cursor: pointer; width: 100%; }
/* The quiet variant: a hairline and no lift, for a card that is an offer rather than a thing —
   the sign-in ask, an empty state. A card with neither lift NOR edge is not quiet, it is
   invisible, so this one keeps its boundary. */
.sh-card--flat { box-shadow: none; border: 1px solid var(--line); }
a.sh-card--flat:hover, button.sh-card--flat:hover { box-shadow: none; border-color: var(--line-strong); }
/* Roomier, for a card that owns the main column. Its prose gets a measure, because this is the one
   card `.cards` deliberately lets run the full width: a lone card fills its row rather than sitting
   half-width beside a hole, and at 1180px that put the letter card's body at about 130 characters
   a line. A cap is the fix; a narrower card is not, because the narrower card is the bug. */
.sh-card--lg { padding: 22px 20px 24px; gap: 6px; }
.sh-card--lg .sh-card__s { max-width: 62ch; }
/* The tinted card: "your person is over here". The tint carries the ink of its own family, so the
   text on it is at least 4.5:1 in both themes without the page choosing a colour. */
.sh-card--pink { background: var(--pink-tint); color: var(--on-pink-tint); box-shadow: var(--shadow-card); }
.sh-card--blue { background: var(--blue-tint); color: var(--on-blue-tint); box-shadow: var(--shadow-card); }
.sh-card--green { background: var(--green-tint); color: var(--on-green-tint); box-shadow: var(--shadow-card); }
.sh-card--lav { background: var(--lav-tint); color: var(--on-lav-tint); box-shadow: var(--shadow-card); }
/* The viewer's own colour, for a card that means "you" rather than "this kind of thing". */
.sh-card--me { background: var(--me-tint); color: var(--on-me-tint); box-shadow: var(--shadow-card); }
/* A tinted card's sub-line stays in the tint's OWN ink rather than dropping to --ink-soft, which is
   a cool grey and reads as a different card's text sitting on a colour.
   It does so at full strength, and that is a correction. This rule shipped in the first cut as
   `opacity: .9`, which is the kind of nicety nobody measures — and measured, it put the pink sub-line
   at 4.05:1 and the blue at 4.21:1 in light, under the floor, in the file all four tabs were about
   to load. --pink-tint is the palest ground in the product, so it has the least to give away.
   Hierarchy between the two lines is carried by size and weight (17/650 against 13/400), which is
   how the rest of the shell already does it and costs no contrast at all. §00: nothing ships that a
   person cannot read. */
.sh-card--pink .sh-card__s, .sh-card--blue .sh-card__s, .sh-card--green .sh-card__s,
.sh-card--lav .sh-card__s, .sh-card--me .sh-card__s { color: inherit; }

.sh-card__t { font-size: 17px; font-weight: 650; letter-spacing: -0.01em; }
.sh-card__s { font-size: 13px; color: var(--ink-soft); line-height: 1.4; }

/* ── 04 · the card row ──────────────────────────────────────────────────────────────────────────
 * The shape a card takes when it is a thing plus a line about it: a tinted well (`.iwell`,
 * base.css), two lines of text, and something small on the end. Tonight's activity, the last thing
 * they did, an entry in a list. `min-width: 0` on the text so a long title truncates instead of
 * pushing the row wider than its column.
 */
.sh-row { display: flex; align-items: center; gap: 12px; min-width: 0; }
.sh-row__text { display: flex; flex-direction: column; gap: 1px; flex: 1; min-width: 0; }
.sh-row__t { font-size: 17px; font-weight: 650; letter-spacing: -0.01em; }
.sh-row__s { font-size: 13px; color: var(--ink-soft); }
.sh-row__go { flex: 0 0 auto; font-size: 13px; font-weight: 600; color: var(--teal-deep); white-space: nowrap; }
.sh-row__ic { display: inline-flex; flex: 0 0 auto; color: var(--ink-faint); }

/* ── 05 · the chip row ──────────────────────────────────────────────────────────────────────────
 * One row of things a couple can DO, every one an icon and a word, every one 44px tall because
 * that is the floor for anything a finger presses (§05) and it does not move. It wraps; it has no
 * breakpoint. `.sh-chips > * { display: contents }` is not assumed — a composer that owns three
 * chips sets `display: contents` on itself so this row lays them out rather than a box of its own.
 *
 * base.css's `.chip` is the 28px LABEL chip — a tag, not a control. These two are different
 * objects and it matters: a 28px thing you can press is a bug.
 */
.sh-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.sh-chip {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: var(--tap); padding: 0 16px;
  border-radius: var(--r-pill);
  background: var(--paper-raised); color: var(--ink);
  box-shadow: var(--shadow-card);
  border: 0;
  font: inherit; font-size: 14px; font-weight: 600;
  text-decoration: none; white-space: nowrap; cursor: pointer;
}
.sh-chip:hover { box-shadow: var(--shadow-lift); }
.sh-chip:disabled, .sh-chip[aria-disabled="true"] { opacity: .55; cursor: default; box-shadow: var(--shadow-card); }
.sh-chip__ic { display: inline-flex; flex: 0 0 auto; color: var(--ink-soft); }
/* The one lit chip in a row — the thing this tab most wants pressed. */
.sh-chip--me { background: var(--me-tint); color: var(--on-me-tint); }
.sh-chip--me .sh-chip__ic { color: inherit; }
/* Six chips and a picker is a lot for a 390px phone. They stay 44px tall — that is the floor —
   and buy the room back sideways, which costs a phone one wrapped row instead of two. This is a
   TYPE query, not a layout one: nothing here changes how many chips fit on a line. */
@media (max-width: 559px) {
  .sh-chips { gap: 6px; }
  .sh-chip { padding: 0 12px; gap: 6px; font-size: 13px; }
}

/* ── 06 · the number card ───────────────────────────────────────────────────────────────────────
 * A count the page has not already said, with the words it belongs to under it. Tabular figures so
 * a number that ticks over does not shuffle the line beside it. It is a `.sh-card`, so put both
 * classes on the element; `--cards-min: 200px` on the `.cards` around it is the usual pairing,
 * which puts two on a phone and four on a laptop with no breakpoint anywhere.
 */
.sh-num__n {
  font-size: 32px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.sh-num__s { font-size: 13px; color: var(--ink-soft); }
/* A number card that is also a link keeps the card's lift and nothing else. */
a.sh-num, a.sh-num:hover { text-decoration: none; }

/* ── 07 · the tinted well ───────────────────────────────────────────────────────────────────────
 * Deliberately absent. `.iwell` / `--blue` / `--green` / `--lav` / `--me` is the shared tinted
 * icon well and it already lives in base.css, which loads before this file on every tab. Restating
 * it here would give the shell two of them, which is the exact disease this file is the cure for.
 */