/* ═══════════════════════════════════════════════════════════════════════════
   LogHog · lib/help.css — the (i) panel and the tutorial deck.

   Loaded by all ten pages. Reviewed as a mockup first; the rules below are
   lifted from docs/mockups/help.css and the reasoning is in
   docs/plans/HELP_PANELS_PLAN.md.

   SELF-CONTAINED ON PURPOSE. shared.css defines only --accent, --bg, --surface,
   --surface2, --border, --border2 and --text/2/3, and the modules disagree about
   the rest: --bevel-sm exists in three of ten, --green and --green-dim in seven,
   --blue in five. So every token this file needs beyond the shared set is
   declared here on .help-ov, scoped so it cannot leak into a module's own CSS.
   Do NOT reach for a module-local token from this file.
   ═══════════════════════════════════════════════════════════════════════════ */

.help-ov {
  --hp-green: #5a9e72;
  --hp-red:   #c0614a;
  --hp-blue:  #4a90d9;
  --hp-green-dim: rgba(90,158,114,0.12);
  /* The app's own --bevel-sm, which only three modules define, so it is carried
     here. It has to be redefined for light: a white inset highlight over a white
     card is invisible, which is why the app gives light its own values. */
  --hp-bevel: inset 0 1px 0 rgba(255,255,255,0.10), inset 0 0 18px rgba(255,255,255,0.03), 0 4px 12px rgba(0,0,0,0.45);

  position: fixed; inset: 0; z-index: 400;
  display: flex; align-items: center; justify-content: center;
  padding: 20px 16px;
  padding-top: max(20px, env(safe-area-inset-top, 0px));
  padding-bottom: max(20px, env(safe-area-inset-bottom, 0px));
  background: rgba(0,0,0,0.55);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  opacity: 0; pointer-events: none;
  transition: opacity 0.18s ease;
}
html.light .help-ov {
  background: rgba(0,0,0,0.35);
  --hp-bevel: inset 0 1px 0 rgba(255,255,255,0.6), inset 0 0 18px rgba(255,255,255,0.2), 0 4px 12px rgba(0,0,0,0.08);
}
.help-ov.on { opacity: 1; pointer-events: auto; }
.help-ov:empty { display: none; }

/* The page behind must not scroll under the card. */
html.help-open, html.help-open body { overflow: hidden; }

/* The card. Header and footer are flex-shrink:0 and never position:sticky —
   sticky renders transparent in iOS WKWebView (CLAUDE.md, modal layout). */
.hp {
  width: 320px; max-width: 100%;
  max-height: 100%;
  background: var(--surface); border: 1px solid var(--border2);
  border-radius: var(--radius-lg, 14px);
  box-shadow: 0 24px 64px rgba(0,0,0,0.6);
  display: flex; flex-direction: column;
  transform: translateY(10px); transition: transform 0.2s ease;
  overflow: hidden;
}
.help-ov.on .hp { transform: translateY(0); }
.hp.deck { width: 350px; }

.hp-head {
  flex-shrink: 0;
  display: flex; align-items: center; gap: 9px;
  padding: 13px 14px; border-bottom: 1px solid var(--border);
}
.hp-head .em { display: inline-flex; align-items: center; font-size: 15px; line-height: 1; }
.hp-head .em img { width: 17px; height: 17px; border-radius: 4px; object-fit: contain; display: block; }
.hp-head .nm {
  font-family: 'DM Mono', monospace; font-size: 10px;
  letter-spacing: 0.11em; text-transform: uppercase; color: var(--text3);
}
.hp-x {
  margin-left: auto; display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 6px;
  background: none; border: none; color: var(--text3); cursor: pointer;
}

/* The topbar (i). 36px square with an 8px radius, which is .tb-btn's own size
   (min-width/min-height 36px in shared.css) rather than near it — the back
   arrow sits immediately to its left and two squares a few pixels apart read
   as a mistake. .topbar-left has no gap of its own and other modules put other
   things in it, so the 8px between them is this button's margin, not a gap on
   the row. */
.tb-i {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 8px;
  margin-left: 8px;
  border: 1px solid var(--border2); background: none;
  color: var(--text2); cursor: pointer; flex-shrink: 0;
  padding: 0; -webkit-appearance: none;
}
.tb-i.lit { color: var(--accent); border-color: rgba(200,169,110,0.45); background: var(--accent-dim); }
html.light .tb-i.lit { border-color: rgba(4,99,7,0.3); }

/* The same (i) in Settings, beside a module's name — where the panel lives for
   good once the topbar hint has been taken. Smaller, because it answers to a
   10px label rather than to a row of 36px buttons: 24px is the size of .hp-g,
   the glyph box the panels themselves draw a control in. */
.help-i {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; border-radius: 6px;
  border: 1px solid var(--border2); background: none;
  color: var(--text3); cursor: pointer; flex-shrink: 0;
  padding: 0; -webkit-appearance: none;
}
.help-i svg { width: 14px; height: 14px; }
@media (hover: hover) {
  .help-i:hover { color: var(--accent); border-color: rgba(200,169,110,0.45); }
  html.light .help-i:hover { border-color: rgba(4,99,7,0.3); }
}

/* Every page is rendered and stacked in ONE grid cell, so the card is always
   as tall as its tallest page and paging never resizes it under the finger.
   A guessed min-height cannot do this: content overruns it and it grows. */
.hp-body { flex: 1; padding: 15px 16px 14px; display: grid; }
.hp-pg { grid-area: 1 / 1; }
.hp-pg[aria-hidden="true"] { visibility: hidden; }

/* ── Page one: icon, headline, sentence ───────────────────────────────── */
.hp-top { display: flex; align-items: center; gap: 11px; }
.hp-em {
  width: 44px; height: 44px; flex-shrink: 0;
  border-radius: 12px; background: var(--surface2); border: 1px solid var(--border);
  box-shadow: var(--hp-bevel);
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; line-height: 1;
}
html.is-native .hp-em { background: rgba(255,255,255,0.06); }
.hp-h {
  font-family: 'DM Serif Display', serif;
  font-size: 19px; font-weight: 400; letter-spacing: -0.25px; line-height: 1.2;
}
.hp-s { font-size: 12.5px; line-height: 1.55; color: var(--text2); margin-top: 10px; }
.hp-s span { display: block; margin-top: 5px; color: var(--text3); }

/* The drawing of what the module produces. A framed screen, so it reads as
   the app rather than as more of the panel. */
.hp-screen {
  margin-top: 12px;
  border: 1px solid var(--border2); border-radius: 10px;
  background: var(--bg); overflow: hidden;
}
html.is-native .hp-screen { background: rgba(0,0,0,0.22); }
html.is-native.light .hp-screen { background: rgba(255,255,255,0.5); }
.hp-screen-lab {
  font-family: 'DM Mono', monospace; font-size: 9px;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--text3);
  padding: 7px 11px 0;
}
.hp-screen-in { padding: 8px 11px 11px; }


/* A list row, as bookings and recipes draw one */
.hpr {
  display: flex; align-items: center; gap: 9px;
  padding: 7px 9px; margin-top: 5px;
  background: var(--surface2); border: 1px solid var(--border);
  border-radius: 7px; box-shadow: var(--hp-bevel);
}
.hpr:first-child { margin-top: 0; }
html.is-native .hpr { background: rgba(255,255,255,0.05); }
.hpr-b { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.hpr-b b { font-size: 12px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hpr-b i { font-style: normal; font-family: 'DM Mono', monospace; font-size: 9.5px; color: var(--text3); }
.hpr-r {
  flex-shrink: 0; font-family: 'DM Mono', monospace; font-size: 9px;
  letter-spacing: 0.04em; color: var(--text3);
  border: 1px solid var(--border2); border-radius: 20px; padding: 2px 7px;
}
.hpr-r.warn { color: var(--accent); border-color: rgba(200,169,110,0.35); background: var(--accent-dim); }
.hpr-r.ok   { color: var(--hp-green); border-color: rgba(90,158,114,0.35); background: var(--hp-green-dim); }

/* The figure over a sparkline, as trackers leads with */
.hpr-fig { display: flex; align-items: baseline; gap: 7px; margin-bottom: 4px; }
.hpr-fig b { font-family: 'DM Serif Display', serif; font-size: 21px; font-weight: 400; }
.hpr-fig i { font-style: normal; font-family: 'DM Mono', monospace; font-size: 9.5px; color: var(--text3); }

/* Checklist items, as checklists.html draws them */
.hpc { display: flex; flex-direction: column; gap: 5px; }
.hpc-i {
  display: flex; align-items: center; gap: 9px;
  padding: 7px 9px; font-size: 12px;
  background: var(--surface2); border: 1px solid var(--border);
  border-radius: 7px; box-shadow: var(--hp-bevel);
}
html.is-native .hpc-i { background: rgba(255,255,255,0.05); }
.hpc-i .bx {
  width: 15px; height: 15px; flex-shrink: 0; border-radius: 4px;
  border: 1.5px solid var(--border2);
  display: flex; align-items: center; justify-content: center;
}
.hpc-i .bx.on { background: var(--accent); border-color: var(--accent); color: #0f0f0f; }
html.light .hpc-i .bx.on { color: #fff; }
.hpc-i .bx svg { width: 11px; height: 11px; }
.hpc-i s { color: var(--text3); }
.hpc-i em {
  margin-left: auto; font-style: normal;
  font-family: 'DM Mono', monospace; font-size: 9.5px; color: var(--text3);
}
/* A ticked row is faded and flat, as in the app */
.hpc-i:has(.bx.on) { opacity: 0.55; box-shadow: none; }


/* ── Bookings: a booking row's action icons ───────────────────────────── */
.hpr-when {
  flex-shrink: 0; font-family: 'DM Mono', monospace; font-size: 9px;
  color: var(--text3); white-space: nowrap;
}
.hpr-ic { display: flex; gap: 5px; flex-shrink: 0; }
.hpr-ic i { width: 13px; height: 13px; color: var(--text3); display: block; }
.hpr-ic i svg { width: 100%; height: 100%; display: block; }

/* The collapsible trip group, as bookings.html draws one */
.hp-trip {
  background: var(--surface2); border: 1px solid var(--border);
  border-radius: 9px; overflow: hidden; box-shadow: var(--hp-bevel);
}
html.is-native .hp-trip { background: rgba(255,255,255,0.05); }
.hp-trip-h {
  display: flex; align-items: center; gap: 6px;
  padding: 7px 9px; border-bottom: 1px solid var(--border);
}
.hp-trip-h .cv { width: 11px; height: 11px; color: var(--text3); flex-shrink: 0; }
.hp-trip-h .cv svg { width: 100%; height: 100%; display: block; }
.hp-trip-h b { font-size: 11.5px; font-weight: 500; color: var(--accent); }
.hp-trip-h i, .hp-trip-h em {
  font-style: normal; font-family: 'DM Mono', monospace;
  font-size: 8.5px; color: var(--text3); white-space: nowrap;
}
.hp-trip-h em { margin-left: auto; }
.hp-trip-b { padding: 6px; display: flex; flex-direction: column; gap: 5px; }
.hp-trip-b .hpr { margin-top: 0; background: var(--surface); }
html.is-native .hp-trip-b .hpr { background: rgba(255,255,255,0.04); }

/* Two rows of a month. .cal is mock.css's, so the cells match every other
   calendar in the mockups; only the month caption and dot row are added. */
.hp-cal .mo {
  font-family: 'DM Mono', monospace; font-size: 9px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--text2);
  text-align: center; margin-bottom: 5px;
}
.hp-cal .cal .d { font-size: 9px; }
.hp-cal .dts { display: flex; gap: 2px; }

/* ── Balances ─────────────────────────────────────────────────────────── */
.hpr-amt {
  flex-shrink: 0; font-family: 'DM Mono', monospace; font-size: 11px;
  color: var(--accent); white-space: nowrap;
}
.hpr-pay {
  width: 17px; height: 17px; flex-shrink: 0; border-radius: 50%;
  background: var(--accent-dim); border: 1px solid rgba(200,169,110,0.35);
  color: var(--accent); display: flex; align-items: center; justify-content: center;
}
html.light .hpr-pay { border-color: rgba(4,99,7,0.25); }
.hpr-pay svg { width: 10px; height: 10px; display: block; }

/* ── Habits: the two dot grids and a habit row ────────────────────────── */
.hp-hg {
  display: grid; grid-template-columns: 20px repeat(var(--n), minmax(0, 1fr));
  gap: 3px 2px; align-items: center;
}
.hp-hg .cn, .hp-hg .hd {
  font-family: 'DM Mono', monospace; font-size: 8px; color: var(--text3);
  text-align: center; line-height: 1;
}
.hp-hg .cn { text-align: left; letter-spacing: 0.06em; text-transform: uppercase; }
/* The weekly grid rotates its date labels, as habits.html does (-38deg) */
.hp-hg .hd { height: 15px; display: flex; align-items: flex-end; justify-content: center; }
.hp-hg .hd.rot i { font-style: normal; display: block; transform: rotate(-38deg); transform-origin: center bottom; }
.hp-hg .hd i { font-style: normal; }
.hp-hg .em { font-size: 11px; line-height: 1; }
.hp-hg .dc { display: flex; justify-content: center; }
/* habits.html's own dot colours, deliberately NOT redefined for light: a dot
   built on var(--accent) draws partial and done as two greens in light mode.

   `height: auto` is load-bearing and must not be tidied away. The dot is fluid
   (width 100% up to 9px) and takes its height from aspect-ratio, which only
   applies while height is auto — and habits.html declares a BARE `.dot` rule of
   its own setting `height: var(--dot-size, 12px)`. This selector outranks it on
   width, but a property it never mentions is not a contest: the module's height
   simply applied, and the panel drew 9 x 12 ovals on habits.html while looking
   right everywhere else. Every un-namespaced class this file borrows carries the
   same risk; tests/help.mjs now fails on any module declaring a property on one
   of them that the panel does not also set. */
.hp-hg .dot {
  width: 100%; max-width: 9px; height: auto; aspect-ratio: 1; border-radius: 50%;
  background: var(--border); display: block;
}
.hp-hg .dot.partial { background: #c8a96e; }
.hp-hg .dot.done    { background: #5a9e72; }

.hp-hrow .hem { font-size: 14px; line-height: 1; flex-shrink: 0; }
.hp-prog {
  flex-shrink: 0; font-family: 'DM Mono', monospace; font-size: 10.5px; color: var(--text3);
}
.hp-prog.partial { color: #c8a96e; }
.hp-prog.done    { color: #5a9e72; }
.hp-log {
  width: 20px; height: 20px; flex-shrink: 0; border-radius: 50%;
  border: 1px solid rgba(200,169,110,0.35); background: var(--accent-dim);
  color: var(--accent); display: flex; align-items: center; justify-content: center;
}
html.light .hp-log { border-color: rgba(4,99,7,0.25); }
.hp-log svg { width: 9px; height: 9px; display: block; }

/* ── Trackers: a real chart, both axes ────────────────────────────────── */
.hp-chart { display: block; width: 100%; height: 108px; overflow: visible; }

/* ── Checklists: deadline and link marks on a row ─────────────────────── */
.hpc-i .due, .hpc-i .lk {
  margin-left: auto; flex-shrink: 0; font-weight: 400;
  font-family: 'DM Mono', monospace; font-size: 8.5px;
  color: var(--text3); border: 1px solid var(--border2);
  border-radius: 20px; padding: 2px 6px;
}
.hpc-i .due.late { color: var(--hp-red); border-color: rgba(192,97,74,0.4); background: transparent; }
.hpc-i .lk { padding: 2px 4px; display: flex; }
.hpc-i .lk svg { width: 11px; height: 11px; display: block; }
.hpc-i .due ~ em, .hpc-i .lk ~ em { margin-left: 6px; }

/* ── Recipes: one recipe, open ────────────────────────────────────────── */
.hp-rec-h { display: flex; align-items: baseline; gap: 5px; margin-bottom: 9px; }
.hp-rec-h b { font-size: 12.5px; font-weight: 500; }
.hp-rec-h i { font-style: normal; font-family: 'DM Mono', monospace; font-size: 9px; color: var(--text3); }
.hp-rec-l {
  font-family: 'DM Mono', monospace; font-size: 8.5px; letter-spacing: 0.07em;
  text-transform: uppercase; color: var(--text3); margin: 0 0 5px;
}
.hp-rec-l ~ .hp-rec-l { margin-top: 10px; }
.hp-ing {
  display: flex; align-items: center; gap: 8px;
  font-size: 11.5px; padding: 3px 0;
  border-bottom: 1px solid var(--border);
}
.hp-ing:last-of-type { border-bottom: none; }
.hp-ing span { flex: 1; min-width: 0; }
.hp-ing i { font-style: normal; font-family: 'DM Mono', monospace; font-size: 10px; color: var(--text3); }
/* The method shows ONE step with a navigator, which is what the module does */
.hp-step {
  background: var(--surface2); border: 1px solid var(--border);
  border-radius: 7px; padding: 9px 10px; font-size: 11.5px; line-height: 1.45;
}
html.is-native .hp-step { background: rgba(255,255,255,0.05); }
.hp-nav { display: flex; align-items: center; justify-content: center; gap: 13px; margin-top: 7px; }
.hp-nav em {
  font-style: normal; font-family: 'DM Mono', monospace; font-size: 9.5px; color: var(--text3);
}
.hp-nav .a { width: 12px; height: 12px; color: var(--text2); display: block; }
.hp-nav .a svg { width: 100%; height: 100%; display: block; }
.hp-nav .a:last-child svg { transform: rotate(180deg); }
.hp-nav .a.off { opacity: 0.3; }

/* ── Intake: the headline figure and its goal line ────────────────────── */
.hp-fig .n { display: flex; align-items: baseline; gap: 5px; }
.hp-fig .n b { font-family: 'DM Serif Display', serif; font-size: 30px; font-weight: 400; line-height: 1; }
.hp-fig .n i { font-style: normal; font-family: 'DM Mono', monospace; font-size: 12px; color: var(--text3); }
.hp-fig .g { margin-top: 5px; font-size: 11px; color: var(--text3); }

/* ── Watchlist and Reading: three rows, real pictures ─────────────────── */
.hp-shelf { display: flex; flex-direction: column; gap: 6px; }
.hp-srow {
  display: flex; align-items: stretch; gap: 9px;
  padding: 6px 8px; border-radius: 7px;
  background: var(--surface2); border: 1px solid var(--border);
  box-shadow: var(--hp-bevel);
}
html.is-native .hp-srow { background: rgba(255,255,255,0.05); }
/* HEIGHT IS EXPLICIT, and min-height would not do. A cover is hotlinked and
   arrives late, so with an auto height the loaded picture's own proportions
   decide the box: 27px against Open Library's 180x278 is 41.7px where the
   empty box was 38, and a reading list of three rows grew 11px under the
   finger a second after the panel opened. The picture is the tallest thing in
   a row (52px = 38 + 12 padding + 2 border), so it is the row's height and the
   panel's. object-fit: cover crops whatever ratio turns up into this box. */
.hp-srow .pic {
  width: 27px; height: 38px; flex-shrink: 0;
  object-fit: cover; border-radius: 3px; display: block;
  background: var(--border);
}
/* The app's own placeholder, and the fallback when a hotlinked picture is gone */
.hp-srow .pic.ph {
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; background: var(--surface); border: 1px solid var(--border2);
}
.hp-srow .tx { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 3px; }
.hp-srow .tx b { font-size: 11.5px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hp-srow .mt { display: flex; align-items: center; gap: 6px; }
.hp-srow .mt i {
  font-style: normal; font-family: 'DM Mono', monospace; font-size: 8.5px;
  color: var(--text3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.hp-srow .rt { margin-left: auto; font-family: 'DM Mono', monospace; font-size: 9px; color: var(--accent); flex-shrink: 0; }
.hp-srow .chip {
  flex-shrink: 0; font-family: 'DM Mono', monospace; font-size: 8px;
  letter-spacing: 0.04em; border-radius: 20px; padding: 2px 6px;
  border: 1px solid var(--border2); color: var(--text3);
}
.hp-srow .chip-watching { color: var(--accent); border-color: rgba(200,169,110,0.35); background: var(--accent-dim); }
.hp-srow .chip-watched  { color: var(--hp-green); border-color: rgba(90,158,114,0.35); background: var(--hp-green-dim); }

/* ── Page two: four feature tiles ─────────────────────────────────────── */
.hp-sec {
  font-family: 'DM Mono', monospace; font-size: 9.5px;
  letter-spacing: 0.11em; text-transform: uppercase; color: var(--text3);
  padding-bottom: 8px; margin-bottom: 12px;
  border-bottom: 1px solid var(--border);
}
.hp-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }

/* The title sits BESIDE the icon, and the subhead runs the full width under
   both. Stacking the title under the icon cost a line of height on every tile,
   and at six tiles that is three lines of card. The panel must never scroll. */
.hp-tile {
  background: var(--surface2); border: 1px solid var(--border);
  border-radius: 9px; padding: 8px 9px 9px;
  box-shadow: var(--hp-bevel);
  display: grid; grid-template-columns: auto 1fr;
  column-gap: 7px; row-gap: 3px; align-items: center;
}
html.is-native .hp-tile { background: rgba(255,255,255,0.05); }
/* The real control, in the accent, in a box the size the button is */
.hp-g {
  width: 24px; height: 24px; flex-shrink: 0;
  border-radius: 6px; border: 1px solid rgba(200,169,110,0.28);
  background: var(--accent-dim); color: var(--accent);
  display: flex; align-items: center; justify-content: center;
}
html.light .hp-g { border-color: rgba(4,99,7,0.25); }
.hp-g svg { width: 13px; height: 13px; }
.hp-tile .k { font-size: 12px; font-weight: 500; line-height: 1.2; min-width: 0; }
.hp-tile .d {
  grid-column: 1 / -1;
  font-size: 10px; line-height: 1.35; color: var(--text3);
}

/* ── Page three: the AI, as a chat ────────────────────────────────────── */
.hp-lead { font-size: 12.5px; line-height: 1.5; color: var(--text2); margin-bottom: 11px; }
.hp-chat { display: flex; flex-direction: column; gap: 7px; }
.hp-s + .hp-chat { margin-top: 15px; }
.hp-bub {
  font-size: 11.5px; line-height: 1.45;
  border-radius: 10px; padding: 8px 10px; max-width: 92%;
}
.hp-bub.me {
  align-self: flex-end; background: var(--accent-dim);
  border: 1px solid rgba(200,169,110,0.28); color: var(--text);
  border-bottom-right-radius: 3px;
}
html.light .hp-bub.me { border-color: rgba(4,99,7,0.25); }
.hp-bub.ai {
  align-self: flex-start; background: var(--surface2);
  border: 1px solid var(--border); color: var(--text2);
  border-bottom-left-radius: 3px;
}
html.is-native .hp-bub.ai { background: rgba(255,255,255,0.05); }
.hp-bub.ai .sp { margin-right: 5px; }

/* The picture an example was asked about, sitting above the question inside the
   user's own bubble. Its own surface rather than the bubble's, so it reads as a
   thing carried by the message instead of more of the message. */
.hp-att {
  display: flex; align-items: center; gap: 5px; width: fit-content;
  margin-bottom: 6px; padding: 4px 7px;
  border: 1px solid var(--border2); border-radius: 6px; background: var(--surface);
  font-family: 'DM Mono', monospace; font-size: 8.5px;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--text3);
}
html.is-native .hp-att { background: rgba(255,255,255,0.07); }
.hp-att svg { width: 11px; height: 11px; display: block; flex-shrink: 0; }

/* More things you could type, as chips rather than sentences */
.hp-asks { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 10px; }
.hp-ask {
  font-size: 10.5px; line-height: 1.35; color: var(--text3);
  border: 1px solid var(--border); border-radius: 20px; padding: 4px 9px;
}
.hp-ask::before { content: '“'; }
.hp-ask::after  { content: '”'; }

/* ── The Premium block ────────────────────────────────────────────────── */
/* A one-line note between the conversation and the Premium block — the only
   place "where to watch" is named anywhere in the app. Quieter than .hp-prem,
   which is a pitch with a button: this is a fact, and it is shown to
   subscribers too, for whom it says where the feature is rather than selling
   it. Aligned to the first line, not centred, so a wrapped second line does
   not sit under the star. */
.hp-tip {
  display: flex; align-items: flex-start; gap: 7px;
  margin-top: 11px; padding: 8px 10px;
  border: 1px solid var(--border); border-radius: 8px; background: var(--surface2);
  font-size: 11px; line-height: 1.45; color: var(--text2);
}
html.is-native .hp-tip { background: rgba(255,255,255,0.05); }
.hp-tip svg { width: 12px; height: 12px; flex-shrink: 0; margin-top: 2px; color: var(--accent); }

.hp-prem {
  margin-top: 12px; padding: 11px 12px;
  border: 1px solid rgba(200,169,110,0.28);
  background: var(--accent-dim); border-radius: 9px;
}
html.light .hp-prem { border-color: rgba(4,99,7,0.25); }
.hp-prem .lab {
  font-family: 'DM Mono', monospace; font-size: 9px;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent);
  margin-bottom: 5px;
}
.hp-prem .cp { font-size: 11.5px; line-height: 1.45; color: var(--text2); }
.hp-cta {
  display: block; width: 100%; margin-top: 9px;
  padding: 8px 14px; border-radius: 6px; border: none;
  background: var(--accent); color: #0f0f0f;
  font-family: 'DM Sans', sans-serif; font-size: 12.5px; font-weight: 500;
  text-align: center; cursor: pointer; -webkit-appearance: none;
}
html.light .hp-cta { color: #ffffff; }
.hp-note {
  margin-top: 6px; text-align: center;
  font-family: 'DM Mono', monospace; font-size: 9px;
  letter-spacing: 0.05em; color: var(--text3);
}

/* ── Footer ───────────────────────────────────────────────────────────── */
.hp-foot {
  flex-shrink: 0;
  display: flex; align-items: center; gap: 8px;
  padding: 11px 14px; border-top: 1px solid var(--border);
}
.hp-dots { display: flex; gap: 5px; margin-right: auto; padding-left: 2px; }
.hp-dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--border2); display: block; }
.hp-dots i.on { background: var(--accent); }
.hp-btn {
  font-family: 'DM Sans', sans-serif; font-size: 12.5px;
  padding: 7px 15px; border-radius: 6px; cursor: pointer;
  border: 1px solid var(--border2); background: transparent; color: var(--text2);
  -webkit-appearance: none;
}
.hp-btn.pri { background: var(--accent); border-color: var(--accent); color: #0f0f0f; font-weight: 500; }
html.light .hp-btn.pri { color: #ffffff; }
.hp-btn.gh { border-color: transparent; color: var(--text3); padding-left: 6px; padding-right: 6px; }

/* A tap on the card is answered by lighting the button that moves it on, so a
   reader who taps the picture is not left wondering what they did wrong. The
   ring is a box-shadow rather than an outline so it can fade out at any width. */
@keyframes hp-nudge {
  0%   { transform: scale(1);    box-shadow: 0 0 0 0 rgba(200,169,110,0.55); }
  35%  { transform: scale(1.07); box-shadow: 0 0 0 5px rgba(200,169,110,0.30); }
  100% { transform: scale(1);    box-shadow: 0 0 0 9px rgba(200,169,110,0); }
}
.hp-btn.pri.nudge { animation: hp-nudge 0.6s ease-out; }
@media (prefers-reduced-motion: reduce) { .hp-btn.pri.nudge { animation: none; } }

/* The page a swipe brings in. An ANIMATION, not a transform this code parks the
   page at and later clears: the resting state is then the element's own, so a
   page whose animation never runs is still in the right place. */
/* The page being swiped towards, revealed and parked one card width to the side
   so it follows the finger into view. Parked, it is beyond .hp's overflow and
   invisible, which is why a peek left behind by a gesture that never ended is
   tidying rather than a bug. The attribute is in the selector only to outrank
   the aria-hidden rule above, which is otherwise the same specificity. */
.hp-pg[aria-hidden="true"].sw-peek { visibility: visible; }

/* The arriving page carrying on from where the finger left it: --sw-from is the
   distance it still had to travel at the moment of release. Transform only,
   deliberately — an animation that has not started yet reports its 0% frame,
   and a page held at opacity 0 is a blank card, where a page held to one side
   is merely a page to one side. The worse failure is the one to design out. */
@keyframes hp-sw-settle { from { transform: translateX(var(--sw-from, 0px)); } to { transform: none; } }
.hp-body.sw-settle { animation: hp-sw-settle 0.2s ease-out; }
@media (prefers-reduced-motion: reduce) {
  .hp-body.sw-settle { animation: none; }
}


/* ── Intake's progress bar, ported from the mockups' MK.pbarRow ───────── */
.hp-pb + .hp-pb { margin-top: 9px; }
.hp-pb-h { display: flex; align-items: baseline; gap: 8px; margin-bottom: 5px; }
.hp-pb-h span { font-size: 11.5px; }
.hp-pb-h i {
  margin-left: auto; font-style: normal;
  font-family: 'DM Mono', monospace; font-size: 9.5px; color: var(--text3);
}
.hp-pb-t {
  display: block; height: 7px; border-radius: 20px;
  background: var(--border); overflow: hidden;
}
.hp-pb-f { display: block; height: 100%; border-radius: 20px; }

/* ── The calendar cells, ported from the mockups' mock.css .cal ───────── */
.hp-cal .cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.hp-cal .cal .wd {
  font-family: 'DM Mono', monospace; font-size: 7px; color: var(--text3);
  text-align: center; letter-spacing: 0.04em; text-transform: uppercase; padding-bottom: 1px;
}
.hp-cal .cal .d {
  aspect-ratio: 1; border-radius: 3px; background: var(--surface2);
  border: 1px solid var(--border); display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 1px;
  font-family: 'DM Mono', monospace; font-size: 9px; color: var(--text2); line-height: 1;
}
html.is-native .hp-cal .cal .d { background: rgba(255,255,255,0.05); }
.hp-cal .cal .d.today { border-color: var(--accent); background: var(--accent-dim); }
.hp-cal .cal .d em {
  width: 3px; height: 3px; border-radius: 50%;
  background: var(--accent); display: block; font-style: normal;
}
.hp-cal .cal .d em.nat { background: var(--hp-blue); }
/* ── Tutorial deck ────────────────────────────────────────────────────── */
.hp.deck { width: 350px; }
.hp.deck .hp-body { padding-top: 19px; }
.hp-logo {
  display: flex; align-items: center; gap: 9px; margin-bottom: 12px;
}
.hp-logo img { width: 34px; height: 34px; border-radius: 8px; object-fit: cover; }
.hp-logo span { font-family: 'DM Serif Display', serif; font-size: 21px; letter-spacing: -0.3px; }

.hp-kicker {
  font-family: 'DM Mono', monospace; font-size: 9.5px;
  letter-spacing: 0.11em; text-transform: uppercase; color: var(--accent);
  margin-bottom: 8px;
}

/* Screen i: every module's emoji, as a wall */
/* Three by three, not one row of nine: at panel width a row of nine is a strip
   of small marks, and square fills the art box. */
.hp-wall {
  margin-top: 13px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px;
}
.hp-wall span {
  aspect-ratio: 1; border-radius: 9px;
  background: var(--surface2); border: 1px solid var(--border);
  box-shadow: var(--hp-bevel);
  display: flex; align-items: center; justify-content: center; font-size: 30px;
}
html.is-native .hp-wall span { background: rgba(255,255,255,0.05); }

/* Screen ii: the live module list, from ALL_MODULES */
.hp-mods { margin-top: 11px; display: flex; flex-direction: column; gap: 4px; }
.hp-mod {
  display: flex; align-items: center; gap: 8px;
  padding: 5px 9px; border-radius: 7px;
  background: var(--surface2); border: 1px solid var(--border);
  box-shadow: var(--hp-bevel);
}
html.is-native .hp-mod { background: rgba(255,255,255,0.05); }
.hp-mod .em { font-size: 12px; line-height: 1; flex-shrink: 0; }
.hp-mod .nm { font-size: 11.5px; font-weight: 500; flex-shrink: 0; }
.hp-mod .ds { font-size: 10px; color: var(--text3); margin-left: auto; text-align: right; }

/* Screen ii artwork: the two pages and the swipe between them */
.hp-draw { margin-top: 12px; display: flex; align-items: stretch; gap: 8px; }
.hp-pane {
  flex: 1; border: 1px solid var(--border2); border-radius: 8px;
  background: var(--surface2); padding: 8px; min-height: 70px;
}
.hp-pane.on { border-color: rgba(200,169,110,0.4); background: var(--accent-dim); }
html.is-native .hp-pane { background: rgba(255,255,255,0.05); }
.hp-pane .cap {
  font-family: 'DM Mono', monospace; font-size: 8.5px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--text3); margin-bottom: 6px;
}
.hp-pane .tgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.hp-pane .tgrid i { display: block; height: 16px; border-radius: 3px; background: var(--border); }
.hp-pane .tgrid i.a { background: var(--accent-dim); border: 1px solid rgba(200,169,110,0.3); }
.hp-pane .lrow { display: block; height: 8px; border-radius: 3px; background: var(--border); margin-bottom: 4px; }
.hp-swipe { display: flex; align-items: center; justify-content: center; color: var(--accent); width: 16px; flex-shrink: 0; }
.hp-swipe svg { display: block; }

/* Screen iii artwork: the wall in edit mode, leaning as it does */
.hp-editwall {
  margin: 12px 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px;
}
.hp-editwall i {
  display: flex; align-items: center; justify-content: center;
  height: 42px; border-radius: 8px;
  background: var(--surface2); border: 1px solid var(--border);
  box-shadow: var(--hp-bevel);
}
html.is-native .hp-editwall i { background: rgba(255,255,255,0.05); }
.hp-editwall i.jig:nth-child(odd)  { transform: rotate(-0.5deg); }
.hp-editwall i.jig:nth-child(even) { transform: rotate(0.5deg); }
.hp-editwall i.add {
  border-style: dashed; border-color: rgba(200,169,110,0.45);
  background: transparent; color: var(--accent); font-style: normal; font-size: 15px;
}

/* Screen iv artwork: the sync state, as Settings puts it */
.hp-sync {
  margin-top: 13px; display: flex; align-items: center; gap: 8px;
  padding: 11px 12px; border-radius: 9px;
  border: 1px solid var(--border2); background: var(--surface2);
  font-family: 'DM Mono', monospace; font-size: 10.5px;
  letter-spacing: 0.05em; text-transform: uppercase;
}
html.is-native .hp-sync { background: rgba(255,255,255,0.05); }
.hp-sync .d { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.hp-sync em {
  margin-left: auto; font-style: normal; text-transform: none;
  letter-spacing: 0; font-family: 'DM Sans', sans-serif; font-size: 11px; color: var(--text3);
}
.hp-sync.off { color: var(--accent); border-color: rgba(200,169,110,0.35); }
.hp-sync.off .d { background: var(--accent); }
.hp-sync.on { color: var(--hp-green); border-color: rgba(90,158,114,0.35); }
.hp-sync.on .d { background: var(--hp-green); }