/* =============================================================================
   hyyryn-hiw-card.css                                         21 Oct 2026 (rp178)
   How it works, on the site's card grammar, and on a phone.

   Sir, 21 Oct 2026: "most links in the footer take you to pages that need
   improving. After improving a page in the footer push to live then move to
   the next page." How it works is the first footer link. Measured
   (Mason tools/cards.mjs): 41 surfaces, every one square, in a site whose
   dashboards, plans page, homepage search and Saved jobs are now rounded
   cards with an edge all round (Sir's choice for the dashboards, rp165: "a
   clear edge all round"). So the page's cards take that grammar: a 22px
   corner (18px on a phone), an inner ring and a near and long shadow; boxes
   inside a card 14 to 16px; what is pressed a pill. The evidence stays square
   where it is evidence (the table's rows, the chart's line).
   Also: the section bar's buttons as pills, the active one filled, sticking
   under the masthead at the masthead's own height (it left a 10px gap on a
   phone, where the masthead is 64px, not 74px); the three under the title
   readable (they were 9.5px capitals and 14px grey); the strength of each
   check rule drawn as dots, not as hatching; the two doors at the foot as
   two cards, as the plans page has them.
   Loaded last, after the page's own sheets; specificity by repetition, never
   !important (Mason 05).
   ============================================================================= */
:root {
  --hc-ring: inset 0 0 0 1px rgba(10,22,40,.12), inset 0 1px 0 #FFFFFF;
  --hc-drop: 0 1px 2px rgba(10,22,40,.07), 0 10px 22px -14px rgba(10,22,40,.24), 0 34px 60px -36px rgba(10,22,40,.42);
  --hc-r: 22px;
}
@media (max-width: 768px) { :root { --bar: 64px; } }
@media (max-width: 600px) { :root { --hc-r: 18px; } }

/* ── the hero: the picture and its card rounded; the three under the title readable ── */
main#main .hn-room.hn-room { border-radius: calc(var(--hc-r) + 6px); overflow: hidden; }
main#main .hn-short.hn-short { border-radius: var(--hc-r); box-shadow: inset 0 0 0 1px rgba(226,190,106,.22), 0 24px 50px -24px rgba(0,0,0,.6); }
.hn-trio.hn-trio li { font-size: 15px; line-height: 1.55; color: #4A5262; }
.hn-trio.hn-trio b { font-size: 11px; letter-spacing: .16em; color: var(--navy, #0A1628); }
.hn-trio.hn-trio .is-gold b { color: #83632C; }

/* ── the section bar: pills, the one you are in filled, under the masthead at its height ── */
.tabs.tabs { background: rgba(250,248,243,.97); }
.tabs.tabs .tabs-inner { gap: 6px; padding-top: 10px; padding-bottom: 10px; scroll-snap-type: x proximity; }
main#main .tabs.tabs .tab { padding: 10px 16px 9px; border: 0; border-radius: 999px; scroll-snap-align: start;
  font-size: 11px; letter-spacing: .14em; color: #4A5262; transition: background-color 160ms ease, color 160ms ease, box-shadow 160ms ease; }
main#main .tabs.tabs .tab:hover { color: var(--navy, #0A1628); box-shadow: inset 0 0 0 1px rgba(10,22,40,.18); }
main#main .tabs.tabs .tab:is(.on, .is-on), main#main .tabs.tabs .tab:is(.on, .is-on):hover { background: var(--navy, #0A1628); color: #FAF8F3; box-shadow: none; }
main#main .tabs.tabs .tab .n { display: inline-grid; place-items: center; min-width: 20px; height: 20px; margin-left: 8px; padding: 0 6px; border-radius: 999px;
  background: rgba(10,22,40,.08); color: inherit; font-size: 10.5px; letter-spacing: 0; }
main#main .tabs.tabs .tab:is(.on, .is-on) .n { background: rgba(250,248,243,.18); }
main#main .tabs.tabs .tab:focus-visible { outline: 2px solid var(--navy, #0A1628); outline-offset: 2px; }
@media (max-width: 600px) {
  /* the last pill fades at the edge, so it reads as more to the side, not cut off */
  .tabs.tabs .tabs-inner { -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent); }
}

/* ── part one: the player ── */
main#main .pl-screen.pl-screen { border-radius: var(--hc-r); overflow: hidden; }
main#main .pl-rec.pl-rec { border-radius: var(--hc-r); box-shadow: var(--hc-ring), var(--hc-drop); }
main#main .pl-after.pl-after,
main#main .hiw-soon.hiw-soon { border-radius: 16px; box-shadow: inset 0 0 0 1px rgba(212,169,67,.32); }
main#main .pl-all.pl-all { border-radius: 999px; padding-left: 22px; padding-right: 22px; }

/* ── parts two to four: each table a card ── */
main#main .hiw-check.hiw-check { border-radius: var(--hc-r); overflow: hidden; box-shadow: var(--hc-ring), var(--hc-drop); }
main#main .hw-calc.hw-calc { border-radius: var(--hc-r); box-shadow: var(--hc-ring), var(--hc-drop); }
main#main table.fee-tbl.fee-tbl { border-collapse: separate; border-spacing: 0; border-radius: var(--hc-r); overflow: hidden; box-shadow: var(--hc-ring), var(--hc-drop); }
main#main .src.src { border-radius: var(--hc-r); box-shadow: var(--hc-ring), var(--hc-drop); }
main#main .src.src li { border-radius: 14px; }

/* the strength of each rule as dots: three set by law, two the default, one yours to change */
main#main .chk-rail.chk-rail::before { width: 38px; height: 8px; margin: 2px 0 12px; border: 0; border-radius: 0;
  background: radial-gradient(circle, #B08A3E 3.5px, transparent 4px) 0 50% / 13px 8px repeat-x; }
main#main .chk-def .chk-rail.chk-rail::before { width: 38px;
  background: radial-gradient(circle, #B08A3E 3.5px, transparent 4px) 0 50% / 13px 8px no-repeat,
              radial-gradient(circle, #B08A3E 3.5px, transparent 4px) 13px 50% / 13px 8px no-repeat,
              radial-gradient(circle, transparent 2.6px, rgba(176,138,62,.55) 3px, rgba(176,138,62,.55) 3.6px, transparent 4px) 26px 50% / 13px 8px no-repeat; }
main#main .chk-you .chk-rail.chk-rail::before { width: 38px;
  background: radial-gradient(circle, #B08A3E 3.5px, transparent 4px) 0 50% / 13px 8px no-repeat,
              radial-gradient(circle, transparent 2.6px, rgba(176,138,62,.55) 3px, rgba(176,138,62,.55) 3.6px, transparent 4px) 13px 50% / 13px 8px no-repeat,
              radial-gradient(circle, transparent 2.6px, rgba(176,138,62,.55) 3px, rgba(176,138,62,.55) 3.6px, transparent 4px) 26px 50% / 13px 8px no-repeat; }

/* ── the two doors at the foot: two cards, as the plans page has them ── */
.hw-doors.hw-doors { gap: clamp(14px, 1.6vw, 24px); padding: 0 var(--edge, 24px) clamp(40px, 5vw, 72px); background: transparent; }
.hw-doors.hw-doors::after { display: none; }
.hw-doors .hw-half.hw-half { border-radius: calc(var(--hc-r) + 4px); box-shadow: 0 2px 4px rgba(10,22,40,.1), 0 28px 60px -30px rgba(10,22,40,.55); }
.hw-doors .hw-half .go:focus-visible, .hw-doors .hw-half:focus-visible { outline: 2px solid var(--gold-soft, #D4A943); outline-offset: 3px; }
html:has(.hw-doors) footer.footer.footer { margin-top: 0; }

@media (prefers-reduced-motion: reduce) { main#main .tabs.tabs .tab { transition: none; } }
@media (forced-colors: active) { main#main .chk-rail.chk-rail::before { display: none; } }

/* ── on a phone, the three under the title as a short list: the arches go (they repeat the logo three times and took
   a screen between them), the words stay ── */
@media (max-width: 600px) {
  .hn-trio.hn-trio { gap: 0; padding-top: 28px; }
  .hn-trio.hn-trio .hn-arch { display: none; }
  .hn-trio.hn-trio li { padding: 14px 0; border-top: 1px solid rgba(10,22,40,.12); }
  .hn-trio.hn-trio b { padding-top: 0; border-top: 0; margin-bottom: 4px; }
  .hn-trio.hn-trio .is-gold b { border-top: 0; padding-top: 0; }
}