/* The 40 HPW board: two boards, the week picker in the first one's title, and
   the rows. Linked by index.html (the Members tab) and by the edge-rendered
   /hpw/<week> pages, which is why it is a file rather than the inline block it
   was until 2026-08-29: the rows are painted by one two-sided module
   (assets/js/hpw-board.js) and one stylesheet has to dress them on both sides.

   Reads --cream, --cream-d, --white, --border, --ink, --muted, --brand,
   --accent-d, --accent-dd and --tint. index.html supplies the accent family
   off body[data-active-feed]; a page linking this on its own supplies them the
   way show-page.css does on .show-main. The picker's menu is .pcast-sort-menu
   from feed-cards.css. */

/* Two boards side by side where there is room, stacked where there is not.
   This Week is first in the source and so is first on a phone — it is the
   board with a live race in it. */
.hpw-boards { display: grid; gap: 1.1rem; grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr)); }
/* Same radius and fill as `.mb-shell`; a board IS a shell, it just holds a
   list rather than a lid. */
.hpw-board {
  background: var(--cream);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 0.9rem 1rem 1rem;
}
/* ⚠️ THE TITLE IS CENTRED AND ITS SUB-LINE IS NOT. Reed's call,
   2026-08-23. "This Week" and "Proof of #40HPW" name the board the way a
   scoreboard's own header does; the line under it is a caption, and a
   centred caption over a left-aligned list of rows reads as a second
   heading rather than as a note. `small` is inside the `h3`, so it has to
   opt out of the alignment explicitly. */
.hpw-title {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.02rem; font-weight: 700; color: var(--ink); margin: 0 0 0.6rem;
  text-align: center;
}
.hpw-title small {
  display: block; margin-top: 0.15rem; text-align: left;
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: 0.72rem; font-weight: 400; color: var(--muted);
}
/* ══ THE WEEK PICKER ══
   ⚠️ IT IS THE BOARD'S TITLE, NOT A CONTROL ROW. Reed's call, 2026-08-24.
   A scoreboard is navigated by its own header, and this tab already carries
   a lookup, a range, a sort and a rules dialog — a fourth control strip
   above the boards would be chrome for a thing most readers press twice. */
/* ⚠️ ONE BORDERED GROUP, NOT THREE LOOSE PIECES. Reed's call, 2026-08-24,
   after seeing the first version: the arrows were transparent until hover
   and the label wore the title's own type, so nothing on screen had an edge
   and a phone never sees a hover state at all. The control was invisible at
   rest. A segmented stepper is the shape a calendar app and a dashboard both
   use to walk a date range, so the two ends explain themselves; the
   hairlines are what say the middle is a third control rather than a label
   between two buttons. It still sits where the title sat and still carries
   the title's type, which is what keeps it a header rather than a toolbar. */
.hpw-nav {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 0; max-width: 100%;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 999px;
}
/* ⚠️ BOTH ARROWS RENDER WHEN DISABLED, AND THE SIZE IS A TOUCH TARGET.
   A control that vanishes at the end of the range moves the two beside it,
   so the header shifts under the reader's thumb as they walk back through
   the weeks. 2rem here and 2.5rem on a phone, where this is pressed with a
   finger rather than clicked; the group's own border is part of the target
   either way, which is what lets these be smaller than the loose circles
   they replaced. */
.hpw-arrow {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2rem; height: 2rem; flex: none;
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: 1.15rem; line-height: 1;
  color: var(--accent-d); background: none;
  border: 0; border-radius: 999px;
  cursor: pointer; padding: 0;
  transition: background 0.12s, color 0.12s;
}
.hpw-arrow:hover:not(:disabled) { color: var(--accent-dd); background: var(--tint); }
.hpw-arrow:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.hpw-arrow:disabled { opacity: 0.28; cursor: default; }
/* On /hpw/<week> the arrows are links to the neighbouring weeks' pages and the
   end of the range is a span rather than a disabled button; the two shapes
   have to look the same as the tab's. */
a.hpw-arrow { text-decoration: none; }
.hpw-arrow[aria-disabled="true"] { opacity: 0.28; cursor: default; pointer-events: none; }
/* The dividers, and the only thing that makes this a SEGMENTED control
   rather than a pill with two glyphs in it. */
.hpw-pick-wrap {
  position: relative; min-width: 0;
  border-left: 1px solid var(--border); border-right: 1px solid var(--border);
}
/* Wears the title's own type, because it IS the title. The group's border
   says the three pieces are a control; the caret says this middle one opens
   something rather than pressing. */
/* ⚠️ `align-items: center`, NOT `baseline`. The caret is a drawn box rather
   than a glyph now (see below), and a box has no baseline to sit on — under
   `baseline` it aligns on its own bottom edge and rides low. */
.hpw-pick {
  display: inline-flex; align-items: center; gap: 0.35rem; max-width: 100%;
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.02rem; font-weight: 700; color: var(--ink);
  background: none; border: 0; border-radius: 0;
  padding: 0.3rem 0.75rem; cursor: pointer; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
/* ⚠️ A `Week:` TAG SHIPPED IN FRONT OF THE LABEL AND WAS REVERTED THE SAME
   DAY (2026-08-24). Reed: "I don't like the font and alignment clashes
   between `Week:` and the week printed." The idea was right and the type
   was not. `.pcast-sort-tag` gets away with `Sort: Most boosts` because
   both halves are ONE family at ONE size, differing only in colour and
   weight; this label is 1.02rem Playfair bold, so any tag beside it varies
   family AND size AND weight at once, and three axes of difference across
   two words reads as a collision rather than as an axis and its value.
   ⚠️ A future tag has to solve the TYPE first, not the wording. */
.hpw-pick:hover { color: var(--accent-dd); background: var(--tint); }
.hpw-pick:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
/* The no-menu form: `first_week` is allowed to fail quietly, and without it
   there is nothing to enumerate. The arrows still step. */
.hpw-pick--static { cursor: default; }
.hpw-pick--static:hover { color: var(--ink); background: none; }
/* Nothing to open, so nothing to point at: the group keeps its dividers and
   loses only the caret. */
/* ⚠️ THE CARET IS DRAWN, NOT TYPED, WHICH IS WHY IT CAN BE SIZED AT ALL.
   It was `▾` (U+25BE) inside a Playfair element, and Playfair has no such
   glyph — so it was already falling through to whatever face the platform
   happened to substitute, at whatever size that face draws it. Its apparent
   size was not ours to set, on any platform, which is exactly why it read as
   small. Two borders and a rotation is the same call `.drawer-hint`'s
   chevron and the `(i)` badge both make, and for the same reason.

   ⚠️ 0.4rem AT 1.5px, AND BOTH NUMBERS WERE ARRIVED AT BY MEASUREMENT
   RATHER THAN BY EYE. It shipped at 0.5rem/2px for a few minutes and Reed
   called it — "it went from whispering to you to shouting at you" — which
   the arithmetic agrees with: the old `▾` glyph draws about 7px of visible
   triangle, where a 0.5rem box rotated 45° is 8 × √2 ≈ 11.3px across, so
   the mark had roughly doubled. 0.4rem is 6.4 × √2 ≈ 9px, which is the
   midpoint of those two, and it is the whole reason for drawing this rather
   than typing it: a glyph has no midpoint to ask for.

   The stroke drops with it. 2px on a 6.4px box is a quarter of the shape
   and reads as a heavy outline; 1.5px holds the corner crisp without
   sub-pixel mush, which a flat 1px gets on a non-retina screen.

   `translateY` is optical centering — the visible shape is a corner, so its
   mass sits below the box's own centre. */
.hpw-pick-caret {
  flex: none; width: 0.4rem; height: 0.4rem;
  border-right: 1.5px solid var(--accent-d);
  border-bottom: 1.5px solid var(--accent-d);
  transform: translateY(-1.5px) rotate(45deg);
  transition: border-color 0.12s;
}
.hpw-pick:hover .hpw-pick-caret { border-color: var(--accent-dd); }
/* ⚠️ THE MENU IS `.pcast-sort-menu` AND MUST UNDO THE TITLE'S FONT. Its
   items are declared `font: inherit`, and they are inheriting from an <h3>
   in Playfair bold — the same shorthand trap `.show-stat dd` documents,
   arriving here through the ancestor rather than through a later rule.
   Its LENGTH IS DATA (99 weeks today, one more every Monday), so it scrolls
   for exactly the reason the language menu does. */
.hpw-weeks {
  left: 50%; right: auto; transform: translateX(-50%);
  min-width: 12rem; text-align: left;
  max-height: min(60vh, 21rem); overflow-y: auto; overscroll-behavior: contain;
}
.hpw-weeks .pcast-sort-item {
  font-family: 'Source Serif 4', Georgia, serif;
  font-weight: 600; font-size: 0.82rem;
  font-variant-numeric: tabular-nums;
}
.hpw-list { list-style: none; margin: 0; padding: 0; }
.hpw-empty { font-size: 0.82rem; color: var(--muted); margin: 0; }
.hpw-row {
  display: flex; align-items: center; gap: 0.55rem;
  padding: 0.32rem 0.4rem;
  border-top: 1px solid var(--border);
  font-variant-numeric: tabular-nums;
  border-radius: 6px;
}
.hpw-row:first-child { border-top: 0; }
/* ⚠️ GOLD IS THE ONLY DECORATION ON THESE BOARDS, and it marks a week that
   cleared forty hours. On a WEEKLY board it is still the rare thing it was
   built to be, and if it ever marks a third of one the fix is the goal rather
   than the styling. On Proof of #40HPW every row is gold by construction,
   because clearing forty is that board's entry test — the marker did not stop
   meaning anything there, the board became the set of rows it marks. The tint
   is a wash rather than a fill so the row still reads as a row. */
.hpw-row--gold {
  background: linear-gradient(90deg, rgba(198,150,32,0.16), rgba(198,150,32,0.02));
  box-shadow: inset 3px 0 0 #c69620;
}
.hpw-pos { width: 1.4rem; text-align: right; font-size: 0.78rem; color: var(--muted); flex: none; }
.hpw-face {
  width: 26px; height: 26px; border-radius: 50%; flex: none;
  object-fit: cover; background: var(--cream-d);
}
.hpw-face--none {
  display: flex; align-items: center; justify-content: center;
  font-size: 0.7rem; font-weight: 700; color: var(--muted);
}
.hpw-who { min-width: 0; flex: 1; display: flex; flex-direction: column; line-height: 1.2; }
.hpw-name {
  font-weight: 700; font-size: 0.86rem; color: var(--ink); text-decoration: none;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
a.hpw-name:hover { color: var(--accent-d); text-decoration: underline; }
.hpw-week { font-size: 0.68rem; color: var(--muted); }
/* ⚠️ ON HIGH SCORES THE WEEK IS A BUTTON AND IT IS THE PICKER'S WAY IN. A
   menu of ninety-nine dates can only be scrolled; this board already names
   the weeks worth seeing. `align-self` because `.hpw-who` is a column flex
   container, in which a button would otherwise stretch the row's width. */
.hpw-week-jump {
  align-self: flex-start; max-width: 100%;
  font: inherit; font-size: 0.68rem; color: var(--muted);
  background: none; border: 0; padding: 0; margin: 0;
  text-align: left; cursor: pointer;
  text-decoration: underline; text-decoration-style: dotted;
  text-decoration-color: var(--border); text-underline-offset: 2px;
}
.hpw-week-jump:hover { color: var(--accent-d); text-decoration-color: currentColor; }
.hpw-week-jump:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 3px; }
.hpw-hours { font-weight: 700; font-size: 0.92rem; color: var(--accent-d); flex: none; }
.hpw-unit { font-weight: 400; font-size: 0.72rem; color: var(--muted); }
.hpw-eps { font-size: 0.7rem; color: var(--muted); width: 3.6rem; text-align: right; flex: none; }
/* Proof of #40HPW spends this slot on the best week's hours instead of an
   episode count, and "best 58.4 hpw" does not fit a column sized for "12 eps".
   ⚠️ WIDTH ONLY — the card's vertical budget is measured at ten rows in a
   560px box (see the note in functions/hpw/[[path]].js) and a wider column
   does not touch it, where a taller row would silently lose row ten. */
.hpw-best { width: 5.2rem; }

@media (max-width: 640px) {
  /* ⚠️ THE ARROWS GROW ON A PHONE RATHER THAN SHRINKING WITH EVERYTHING
     ELSE. They are pressed with a thumb here, where on desktop they are
     clicked. 2.5rem inside the group rather than the 2.6rem they took when
     they were loose circles: the group's own border is now part of the
     target, and the three segments have to hold one line at 375px. The
     title between them does NOT grow with them. */
  .hpw-arrow { width: 2.5rem; height: 2.5rem; font-size: 1.3rem; }
  .hpw-pick-caret { width: 0.45rem; height: 0.45rem; }
  /* The menu is centred on the pick, which on a narrow screen puts its
     edges past the board's padding. Cap it to the viewport instead. */
  .hpw-weeks { min-width: 11rem; max-width: min(86vw, 20rem); }
}

/* ── The share control ──
   An icon button in the board's top-right corner (Reed's call, 2026-08-29)
   that opens the share modal. The button is the feeds' own `.pcast-sort-btn`
   made round (feed-cards.css), so it is the same kind of control as Sort
   rather than a new shape. The weekly title is the centred picker, and at
   the board's 19rem minimum the two clear each other by a few px; a wider
   button here would not. */
.hpw-board { position: relative; }
.hpw-share { position: absolute; top: 0.55rem; right: 0.6rem; margin: 0; }
.hpw-share-btn {
  width: 1.9rem; height: 1.9rem; padding: 0; justify-content: center;
  border-radius: 50%; color: var(--muted);
}
.hpw-share-btn:hover { color: var(--accent-d); }
.hpw-share-btn svg { display: block; }

/* ── The share modal ──
   The Rules dialog's chrome (below) with a body of its own: the card's
   preview on the left, the status line, the message box, what gets added,
   and the two actions. Publish is the filled brand button (--brand-dd under
   white, never --brand; see CLAUDE.md, Theming); Download is the outline. */
.hpw-share-box { width: min(38rem, 100%); }
.hpw-share-body { display: flex; gap: 1rem; align-items: flex-start; }
.hpw-share-preview {
  flex: none; width: 7.2rem; aspect-ratio: 4 / 5;
  border: 1px solid var(--modal-line); border-radius: 8px; overflow: hidden;
  background: var(--modal-inset);
}
.hpw-share-preview img { display: block; width: 100%; height: 100%; object-fit: cover; }
.hpw-share-preview-empty { display: block; width: 100%; height: 100%; }
.hpw-share-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.55rem; }
.hpw-share-status { margin: 0; font-size: 0.82rem; color: var(--muted); line-height: 1.35; }
.hpw-share-status.is-busy { animation: hpw-share-pulse 1.1s ease-in-out infinite; }
.hpw-share-status.is-ok { color: #1f7a3a; }
.hpw-share-status.is-ok::before { content: '✓ '; font-weight: 700; }
.hpw-share-status.is-error { color: var(--danger); }
:root[data-theme="dark"] .hpw-share-status.is-ok { color: #6fd18f; }
@keyframes hpw-share-pulse { 50% { opacity: 0.45; } }
@media (prefers-reduced-motion: reduce) { .hpw-share-status.is-busy { animation: none; } }
.hpw-share-retry {
  font: inherit; font-size: 0.8rem; font-weight: 700; color: var(--brand-dd);
  background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline;
}
.hpw-share-text {
  width: 100%; box-sizing: border-box; resize: vertical; min-height: 5.5rem;
  font: inherit; font-size: 0.92rem; line-height: 1.4; color: var(--ink);
  background: var(--modal-field); border: 1px solid var(--modal-line); border-radius: 8px;
  padding: 0.55rem 0.7rem;
}
.hpw-share-text:focus { outline: 2px solid var(--brand); outline-offset: 1px; }
.hpw-share-hint { margin: 0; font-size: 0.76rem; color: var(--muted); }
.hpw-share-actions { display: flex; gap: 0.5rem; justify-content: flex-end; flex-wrap: wrap; margin-top: 0.2rem; }
.hpw-share-publish, .hpw-share-dl {
  font: inherit; font-size: 0.86rem; font-weight: 700; line-height: 1;
  padding: 0.6rem 1rem; border-radius: 999px; cursor: pointer;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.hpw-share-publish { color: #fff; background: var(--brand-dd); border: 1px solid var(--brand-dd); }
.hpw-share-publish:hover:not(:disabled) { background: var(--brand-ddd); border-color: var(--brand-ddd); }
.hpw-share-dl { color: var(--brand-dd); background: transparent; border: 1px solid var(--border); }
.hpw-share-dl:hover:not(:disabled) { border-color: var(--brand); background: var(--tint); }
.hpw-share-publish:disabled, .hpw-share-dl:disabled { opacity: 0.45; cursor: default; }
.hpw-share-publish[hidden] { display: none; }
@media (max-width: 480px) {
  .hpw-share-body { flex-direction: column; }
  .hpw-share-preview { width: 5.6rem; }
}

/* ── The modal chrome ──
   The Rules dialog on the tab and the share modal on both surfaces. Moved
   out of index.html on 2026-08-30 so /hpw/<week> can open the share modal
   without a second copy. */
.hpw-modal { position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center; padding: 1rem; }
.hpw-modal[hidden] { display: none; }
.hpw-modal-scrim { position: absolute; inset: 0; background: var(--scrim); }
.hpw-modal-box {
  position: relative; z-index: 1;
  background: var(--modal-bg); color: var(--ink);
  border: 1px solid var(--modal-line); border-radius: 14px;
  box-shadow: 0 18px 50px rgba(11,58,82,0.28);
  padding: 1.1rem 1.3rem 1.3rem;
  width: min(34rem, 100%); max-height: min(80vh, 40rem); overflow-y: auto;
}
.hpw-modal-head { display: flex; align-items: flex-start; gap: 1rem; margin-bottom: 0.7rem; }
.hpw-modal-head h3 {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.15rem; font-weight: 700; margin: 0; flex: 1;
}
.hpw-modal-x {
  font: inherit; font-size: 1.4rem; line-height: 1;
  background: none; border: 0; color: var(--muted); cursor: pointer; padding: 0 0.2rem;
}
.hpw-modal-x:hover { color: var(--ink); }