* { box-sizing:border-box; }
  body { margin:0; background:var(--cream); color:var(--ink);
         font-family:var(--font-sans); font-size:15px; line-height:1.6; }
  /* Grid and flex children default to min-width:auto, which lets a wide table
     push the whole page sideways. This is the rule the signed-in mockup was
     missing on all seventeen routes. */
  .l-wrap > *, .l-sec > * { min-width:0; }
  .l-wrap { max-width:var(--wrap); margin:0 auto; padding:0 16px; }
  .l-sec { padding:38px 0; }
  .l-alt { background:var(--surface-2); border-block:1px solid var(--line-soft); }
  .l-sub { font-size:var(--text-base); line-height:1.62; color:var(--ink-2);
           margin:0; max-width:66ch; }
  /* A link in a lede had no colour and came out in the browser's own
     -webkit-link — rgb(158,158,255) in dark, #0000EE in light. .l-sub is on
     every page, so this was one page today and any page that adds a link to a
     lede tomorrow. Set here rather than on the page that happened to have
     one. */
  .l-sub a { color:var(--gold-dk); text-underline-offset:2px; }
  /* A CENTRED SECTION, for pages whose head is centred too. Lives here rather
     than in a page's stylesheet because two clusters use it now — it was
     .ai-c in ai_astrologer.py, and pages/dasha.py picked up the class without
     the rule, so its ledes rendered left under centred heads and looked like
     an oversight. margin-inline is not optional: .l-sub caps at 66ch, so
     centring the text without centring the box leaves a centred column
     sitting on the left of the wrap.
     Only the lede. Lists, tables and cards inside a .l-ctr stay left —
     centred body copy is ragged on both edges and a centred bulleted list
     stops forming a column to scan. */
  .l-ctr .l-sub { text-align:center; margin-inline:auto; }
  /* TWO LEDES GO SIDE BY SIDE. One is fine stacked: 66ch keeps a line
     readable and the grid or panel under it carries the width. Two of them
     stacked is not — they fill the left half of the band, the right half is
     empty, and under a full-width heading with a full-width panel below it
     the pair reads as a column that has been cut off rather than as air.
     Measured at 1280: 582px of a 1180px section, 49% of it, twice over.

     A track each, so both keep the SAME measure they had — this is a layout
     fix, not a wider line. Stretching one paragraph across 1180px would give
     150 characters to a line that is already at 74.

     auto-fit rather than two fixed columns, because the home page has a pair
     inside a half-width column; there they stack again rather than becoming
     two forty-character ribbons.

     .l-sub KEEPS ITS 66ch. Each track comes out at 552px against a 582px
     cap, so the track is what governs in two columns and the cap is what
     governs when it falls back to one — which is the width it has today.
     Overriding the cap to none looked tidier and gave a 736px tablet a
     93-character line, which is the fault this rule exists to avoid.

     min(400px, 100%), NOT 400px. A minimum track wider than the container
     does not shrink — it overflows it, and at 320px the whole page scrolled
     sideways by 26px. min() caps the floor at whatever room there is. */
  .l-lede { display:grid; gap:10px 44px; margin-bottom:20px;
            grid-template-columns:repeat(auto-fit, minmax(min(400px, 100%), 1fr)); }
  .l-mb { margin-bottom:20px; }
  .l-mt { margin-top:22px; }
  .l-signin, .l-signup { text-decoration:none; white-space:nowrap; }
  .l-act-u, .l-act-a { display:flex; align-items:center; gap:8px; }
  /* The drawer carries Sign in and Sign up and nothing else now — the theme
     toggle moved to top_nav's `bar`, which is the header at every width. Its
     own display and gap belong to the component, in ui.py, so the breakpoint
     that hides it there is not overruled from here. */
  .c-drawer-a .l-signin, .c-drawer-a .l-signup {
      flex:1; min-height:44px; padding:0 15px; justify-content:center; }
  /* Date and time are one question, asked once. Both values are short enough
     to sit side by side even at 360px, and pairing them stops the form
     reading as five separate chores. */
  /* Date and time side by side, and STACKED on the narrowest phones. The two
     were always a 1fr 1fr grid; what changed is that the time trigger now
     reads 09:15 PM as four flex spans rather than one string, so its
     min-content is wider than half of a 288px card and the card grew to 311 —
     7px of sideways scroll on the page the whole site links to. minmax(0,1fr)
     alone would have kept the row and clipped the readout instead. */
  .l-dt { display:grid; grid-template-columns:1fr; gap:10px; }
  @media (min-width:360px) {
    .l-dt { grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
  }
  /* Part of the hero's left column, not a band of its own. It anchors the
     bottom of that column so it finishes level with the form card. */
  /* Inside the form card the list sits under the button, separated by a rule
     rather than by more whitespace — it is what pressing the button gets you,
     so it should read as part of the button's promise. */
  .l-cardsub { margin:2px 0 14px; }
  .l-cardinc { margin-top:14px; padding-top:14px;
               border-top:1px solid var(--line-soft); }
  .l-inc { list-style:none; margin:0; padding:0; display:grid; gap:9px; }
  .l-inc li { display:flex; align-items:flex-start; gap:9px; }
  .l-inc svg { flex:none; margin-top:2px; color:var(--gold-dk); }
  .l-inc span { font-size:14px; line-height:1.45; color:var(--ink-2); }

  .l-samp { display:flex; align-items:center; gap:13px; padding:14px 16px;
            text-decoration:none; color:var(--ink); border:1px solid var(--line);
            border-radius:var(--r-card); background:var(--surface); }
  .l-samp:hover { border-color:var(--gold); background:var(--gold-bg); }
  /* Between the two-column breakpoint and 1024 the left column runs 9px past
     the card, because the headline takes an extra line before the columns are
     wide enough. Four pixels off the padding and four off the stack gap close
     it without anyone being able to tell the difference. */

  .l-samp > svg:first-child { flex:none; color:var(--gold-dk); }
  .l-samp > svg:last-child { flex:none; color:var(--ink-3); margin-left:auto; }
  .l-samp span { min-width:0; }
  .l-samp b { display:block; font-size:14.5px; font-weight:700; }
  .l-samp i { display:block; font-style:normal; font-size:12.5px;
              color:var(--ink-3); margin-top:2px; line-height:1.45; }
  .l-dt .c-pf { margin-bottom:0; }
  .l-dth { margin:6px 0 var(--space-3); }
  .l-mb2 { margin-bottom:16px; }

  .l-mark { display:block; width:34px; height:34px; flex:none; }
  .l-mark img { display:block; width:100%; height:100%; border-radius:19%; }

  /* proof row */
  .l-proof { background:var(--gold-bg); border-block:1px solid var(--line); }
  .l-pfr { display:grid; grid-template-columns:repeat(2,1fr); gap:0;
           padding:4px 0; }
  .l-pf { padding:18px 4px 18px 18px; }
  /* Hairlines, not a colour change, do the separating — and only between
     cells that are actually side by side, which changes at each breakpoint. */
  .l-pf:nth-child(2n) { border-left:1px solid var(--line); }
  .l-pf:nth-child(n+3) { border-top:1px solid var(--line); }
  .l-pf:first-child { padding-left:0; }
  .l-pf b { display:block; font-family:var(--font-serif); font-size:29px;
            line-height:1.05; font-weight:600; color:var(--gold-dk);
            letter-spacing:-.015em; }
  .l-pf span { display:block; font-size:13.5px; font-weight:650; margin-top:5px;
               color:var(--ink); }
  .l-pf i { display:block; font-style:normal; font-size:12.5px; color:var(--ink-3);
            margin-top:2px; }
  @media (min-width:760px) {
    .l-pfr { grid-template-columns:repeat(4,1fr); }
    .l-pf:nth-child(n+3) { border-top:0; }
    .l-pf:nth-child(n+2) { border-left:1px solid var(--line); }
  }

  /* panchang */
  .l-panch { display:grid; gap:8px; grid-template-columns:repeat(2,1fr); }
  .l-pc { padding:13px 14px; border:1px solid var(--line); border-radius:var(--r-in);
          background:var(--surface); }
  .l-pc span { display:block; font-family:var(--font-mono); font-size:9px;
               letter-spacing:.13em; color:var(--ink-3); }
  .l-pc b { display:block; font-size:15px; margin-top:5px; }
  .l-pc i { display:block; font-style:normal; font-size:12px; color:var(--ink-3); }
  .l-pc.c-t-good b { color:var(--good); } .l-pc.c-t-bad b { color:var(--bad); }
  @media (min-width:700px) { .l-panch { grid-template-columns:repeat(3,1fr); } }
  @media (min-width:1000px) { .l-panch { grid-template-columns:repeat(6,1fr); } }

  /* rashifal */
  .l-rsg { display:grid; gap:7px; grid-template-columns:repeat(3,1fr); }
  .l-rs { display:flex; flex-direction:column; align-items:center; gap:1px;
          min-height:98px; justify-content:center; padding:12px 5px;
          border:1px solid var(--line); border-radius:var(--r-in);
          background:var(--surface); text-decoration:none; color:var(--ink);
          text-align:center; }
  .l-rs:hover { border-color:var(--gold); background:var(--gold-bg); }
  .l-rs .c-sym { color:var(--gold-dk); margin-bottom:4px; }
  .l-rs b { font-size:12.5px; font-weight:650; }
  .l-rs i { font-style:normal; font-size:10.5px; color:var(--ink-3); }
  .l-rs u { text-decoration:none; font-size:12px; color:var(--gold-dk); }
  @media (min-width:560px) { .l-rsg { grid-template-columns:repeat(4,1fr); } }
  @media (min-width:900px) { .l-rsg { grid-template-columns:repeat(6,1fr); } }

  /* tools */
  .l-tools { display:grid; gap:12px; }
  .l-ti { display:grid; place-items:center; width:40px; height:40px;
          border-radius:11px; color:var(--gold-dk); background:var(--gold-bg);
          margin-bottom:11px; }
  .l-tl { display:flex; flex-wrap:wrap; gap:6px; margin-top:13px; }
  .l-tl a { display:inline-flex; align-items:center; min-height:44px;
            font-size:12.5px; font-weight:600; padding:0 14px;
            border-radius:var(--r-pill); color:var(--ink-2);
            border:1px solid var(--line); background:var(--surface);
            text-decoration:none; }
  .l-tl a:hover { color:var(--gold-dk); border-color:var(--gold);
                  background:var(--gold-bg); }
  @media (min-width:720px) { .l-tools { grid-template-columns:repeat(2,1fr); } }

  /* astrologers */
  /* .h-astro in home.py sets display on top of this and is the only caller,
     so anything layout-ish added here is dead. The phone rail lives there. */
  .l-astro { display:grid; gap:11px; grid-template-columns:repeat(1,1fr); }
  .l-ah { display:flex; align-items:center; gap:11px; }
  .l-an { display:block; font-size:15px; font-weight:700; }
  .l-as { display:block; font-size:12.5px; color:var(--ink-3); }
  .l-am { display:flex; gap:5px; margin-top:12px; }
  @media (min-width:600px) { .l-astro { grid-template-columns:repeat(2,1fr); } }
  @media (min-width:1000px) { .l-astro { grid-template-columns:repeat(4,1fr); } }

  /* The unknown-birth-time escape hatch belongs inside the time picker, where
     someone reaches it at the exact moment they realise they cannot answer. */
  .l-unk { margin-top:14px; padding-top:12px; border-top:1px solid var(--line-soft); }
  .l-faq { margin-top:16px; }


/* ── page head ────────────────────────────────────────── */
.s-crumb { padding-top:16px; }
.s-top { padding:22px 0 6px; }
.s-head { max-width:64ch; }
/* With a form beside it the header is the full width and the two columns
   share it, so the reading underneath is not squeezed into a rail. */
.s-head-2 { max-width:none; display:grid; gap:26px;
            grid-template-columns:minmax(0,1fr); align-items:start; }
.s-head-2 > * { min-width:0; }
@media (min-width:960px) {
  .s-head-2 { grid-template-columns:minmax(0,1fr) minmax(0,380px); }
}
.s-head-t { max-width:64ch; }
.s-eyebrow { display:inline-block; font-family:var(--font-mono); font-size:10px;
             letter-spacing:.14em; text-transform:uppercase; color:var(--gold-dk);
             padding:5px 10px; border-radius:var(--r-pill);
             background:var(--gold-bg); margin-bottom:14px; }
.s-h1 { font-family:var(--font-serif); font-size:clamp(27px,5.2vw,42px);
        line-height:1.08; letter-spacing:-.021em; font-weight:600;
        margin:0 0 13px; text-wrap:balance; }
.s-h1 em { font-style:normal; color:var(--gold-dk); }
.s-dek { font-size:var(--text-md); line-height:1.62; color:var(--ink-2);
         margin:0; max-width:58ch; }
/* What the page gives back, named. See page_head() for why it is only on the
   fourteen with a full birth-details form. */
.s-ret { margin-top:18px; max-width:58ch; }
.s-ret ul { margin:8px 0 0; padding:0; list-style:none; display:grid;
            gap:5px; }
.s-ret li { position:relative; padding-left:18px; font-size:14px;
            line-height:1.55; color:var(--ink-2); }
.s-ret li::before { content:''; position:absolute; left:2px; top:9px;
                    width:5px; height:5px; border-radius:50%;
                    background:var(--gold-solid); }
@media (min-width:960px) {
  .s-head-fill { align-items:stretch; }
  .s-head-fill > .s-head-t { display:flex; flex-direction:column; }
  .s-head-fill .s-meta { margin-top:auto; padding-top:16px; }
}
/* The facts a dek would otherwise carry as adjectives. Mono, so they read as
   data rather than as more sentence. */
/* THE CENTRED HEAD, for pages that are not asking for a birth time. The
   default sits beside a form card and runs to 64ch down the left; a page
   whose top is a choice rather than a form leaves that whole right-hand
   column empty, and the text reads as the caption of something that failed
   to load. Two pages want this — the tarot hub, whose top half is six
   readings, and the astrologer pages, whose top half is a roster — so it
   lives here rather than being written twice. */
.s-head-c { max-width:700px; margin-inline:auto; text-align:center; }
.s-head-c .s-eyebrow { font-size:11.5px; letter-spacing:.09em; font-weight:700;
          border:1px solid var(--gold-lt); padding:5px 13px; margin-bottom:16px; }
.s-head-c .s-h1 { font-size:clamp(30px,5.6vw,46px); }
.s-head-c .s-dek { margin-inline:auto; max-width:62ch; }
.s-head-c .s-meta { justify-content:center; }

.s-meta { display:flex; flex-wrap:wrap; gap:8px 18px; margin-top:16px;
          font-family:var(--font-mono); font-size:11px; letter-spacing:.04em;
          color:var(--ink-3); }
.s-meta span { display:flex; align-items:center; gap:7px; }
.s-meta span + span::before { content:''; width:3px; height:3px; flex:none;
          border-radius:50%; background:var(--line); margin-left:-11px; }

/* ── related ──────────────────────────────────────────── */
.s-rel { display:grid; gap:10px; grid-template-columns:1fr; }
@media (min-width:620px) { .s-rel { grid-template-columns:repeat(2,1fr); } }
@media (min-width:960px) { .s-rel { grid-template-columns:repeat(3,1fr); } }
.s-rel > * { min-width:0; }
.s-rel-i { display:flex; align-items:flex-start; gap:12px; padding:14px 16px;
           min-height:44px; text-decoration:none; color:var(--ink);
           background:var(--surface); border:1px solid var(--line);
           border-radius:var(--r-card); }
.s-rel-i:hover { border-color:var(--gold); background:var(--gold-bg); }
.s-rel-k { flex:none; display:grid; place-items:center; width:32px; height:32px;
           border-radius:9px; background:var(--gold-bg); color:var(--gold-dk); }
.s-rel-x { min-width:0; display:flex; flex-direction:column; line-height:1.4; }
.s-rel-x b { font-size:14px; font-weight:650; }
.s-rel-x i { font-style:normal; font-size:12.5px; color:var(--ink-3);
             margin-top:2px; }

/* ── closing CTA ──────────────────────────────────────── */
.s-cta { display:grid; gap:20px; align-items:center; padding:28px;
         border-radius:var(--r-card); border:1px solid var(--gold-lt);
         background:
           radial-gradient(120% 140% at 88% 0%, var(--gold-bg) 0%, transparent 64%),
           var(--surface); }
@media (min-width:820px) {
  .s-cta { grid-template-columns:1fr auto; gap:34px; padding:32px 36px; } }
.s-cta > * { min-width:0; }
.s-cta h2 { font-family:var(--font-serif); font-size:clamp(21px,3.4vw,28px);
            line-height:1.16; letter-spacing:-.018em; font-weight:600;
            margin:0 0 9px; text-wrap:balance; }
.s-cta p { font-size:var(--text-base); line-height:1.6; color:var(--ink-2);
           margin:0; max-width:52ch; }
.s-cta-b { display:flex; flex-wrap:wrap; gap:10px; }
.s-cta-b > * { flex:1 1 auto; }
.s-cta-alt { display:inline-flex; align-items:center; justify-content:center;
             gap:8px; text-decoration:none; white-space:nowrap; }
.s-cta-alt svg { color:var(--gold-dk); }


  .w-top { display:grid; gap:24px; grid-template-columns:1fr; align-items:start; }
  @media (min-width:960px) { .w-top { grid-template-columns:minmax(0,360px) 1fr; } }
  .w-top > div { min-width:0; }

  .w-big { padding:20px 22px; border:1px solid var(--gold-lt);
           border-radius:var(--r-card); background:var(--gold-bg);
           text-align:center; margin-bottom:14px; }
  .w-big b[data-v] { display:block; font-family:var(--font-serif);
                     font-size:42px; font-weight:600; line-height:1.1;
                     color:var(--gold-dk); margin:6px 0 4px; }
  .w-big i { display:block; font-style:normal; font-size:14px;
             color:var(--ink-2); }

  .w-chart { display:flex; justify-content:center; margin-bottom:14px; }

  .w-kvs { display:grid; gap:12px; grid-template-columns:repeat(2,1fr);
           padding:16px 18px; border:1px solid var(--line);
           border-radius:var(--r-card); background:var(--surface);
           margin-bottom:12px; }
  @media (min-width:700px) { .w-kvs { grid-template-columns:repeat(4,1fr); } }
  .w-kv b { display:block; font-size:14.5px; color:var(--ink); margin-top:4px; }

  /* Twelve houses, as columns. A table of bindus is a table; the shape of the
     chart is the thing you actually read off it. */
  .w-bars { display:grid; grid-template-columns:repeat(12,1fr); gap:4px;
            align-items:end; padding:16px 14px; border:1px solid var(--line);
            border-radius:var(--r-card); background:var(--surface);
            margin-bottom:12px; height:190px; }
  .w-bar { display:flex; flex-direction:column; align-items:center; gap:4px;
           height:100%; justify-content:flex-end; min-width:0; }
  .w-bar-t { width:100%; height:100%; display:flex; align-items:flex-end; }
  .w-bar-t i { display:block; width:100%; border-radius:4px 4px 2px 2px;
               background:var(--gold-lt); }
  .w-bar b { font-family:var(--font-mono); font-size:11px; color:var(--ink-2); }

  .w-hi { background:var(--gold-bg); color:var(--gold-dk); font-weight:650; }
  .w-tot td { background:var(--surface-2); }
  .w-tot td b { color:var(--ink); }

  /* ── the 120-year bar ───────────────────────────────────────── */
  .w-dl { margin:18px 0; }
  .w-dl-t { font-family:var(--font-mono); font-size:11px; color:var(--ink-3);
    margin-bottom:7px; }
  .w-dl-b { position:relative; height:52px; border:1px solid var(--line);
    border-radius:10px; background:var(--surface-2); overflow:hidden; }
  .w-dl-s { position:absolute; top:0; bottom:0; display:flex;
    flex-direction:column; align-items:center; justify-content:center;
    gap:1px; border-right:1px solid var(--line); overflow:hidden; }
  .w-dl-s b { font-size:11px; font-weight:600; line-height:1;
    white-space:nowrap; }
  .w-dl-s i { font-style:normal; font-family:var(--font-mono); font-size:9px;
    color:var(--ink-3); }
  .w-dl-on { background:var(--gold-solid); }
  .w-dl-on b { color:var(--gold-solid-text); }
  .w-dl-on i { color:var(--gold-solid-text); opacity:.85; }
  .w-dl-now { position:absolute; top:0; bottom:0; width:2px;
    background:var(--ink); }
  .w-dl-now span { position:absolute; top:2px; left:3px; padding:1px 4px;
    border-radius:4px; background:var(--ink); color:var(--surface);
    font-family:var(--font-mono); font-size:9px; line-height:1.3; }

  /* ── four levels of the same minute ─────────────────────────── */
  .w-dn { margin:22px 0; }
  .w-dn-r { margin-bottom:12px; }
  .w-dn-l { display:flex; align-items:baseline; gap:8px; flex-wrap:wrap;
    margin-bottom:4px; }
  .w-dn-l b { font-family:var(--font-serif); font-size:15px; }
  .w-dn-l i { font-style:normal; font-family:var(--font-mono); font-size:11px;
    color:var(--ink-3); }
  .w-dn-b { position:relative; height:26px; border:1px solid var(--line);
    border-radius:7px; background:var(--surface-2); overflow:hidden; }
  .w-dn-s { position:absolute; top:0; bottom:0; display:grid;
    place-items:center; border-right:1px solid var(--line); overflow:hidden; }
  .w-dn-s b { font-size:10px; font-weight:500; color:var(--ink-3);
    white-space:nowrap; }
  .w-dn-on { background:var(--gold-solid); }
  .w-dn-on b { color:var(--gold-solid-text); font-weight:700; }
  .w-dn-n { margin:12px 0 0; font-size:13px; line-height:1.62;
    color:var(--ink-2); }

  /* ── what the period is about ───────────────────────────────── */
  .w-sg { margin:20px 0; padding:16px 18px; border:1px solid var(--gold-lt);
    border-radius:var(--r-card); background:var(--gold-bg); }
  .w-sg-h b { display:block; font-family:var(--font-serif); font-size:19px;
    color:var(--gold-dk); margin-top:2px; }
  .w-sg-cs { display:flex; flex-wrap:wrap; gap:6px; margin:11px 0 14px; }
  .w-sg-c { padding:3px 10px; border-radius:999px; background:var(--surface);
    border:1px solid var(--line); font-size:12px; }
  .w-sg-r { margin-bottom:10px; }
  .w-sg-r p { margin:2px 0 0; font-size:13.5px; line-height:1.6; }

  /* ── the balance at birth ───────────────────────────────────── */
  .w-bb { margin:20px 0; }
  .w-bb-t b { display:block; font-size:14.5px; font-weight:600; margin-top:2px; }
  .w-bb-b { display:flex; height:12px; margin:9px 0; border-radius:6px;
    overflow:hidden; border:1px solid var(--line); }
  .w-bb-b i { background:var(--rail); }
  .w-bb-b em { background:var(--gold-solid); }
  .w-bb-n { margin:0; font-size:13px; line-height:1.62; color:var(--ink-2); }
  .w-sigs { font-size:12px; color:var(--ink-3); }

  /* ── the reference toggle ───────────────────────────────────── */
  .w-tr-t { display:flex; gap:7px; margin:16px 0 18px; flex-wrap:wrap; }
  .w-tr-o { display:inline-flex; align-items:center; gap:7px;
    padding:0 17px; min-height:44px; border-radius:999px;
    border:1px solid var(--line); background:var(--surface);
    font-size:13.5px; font-weight:650; color:var(--ink-2); cursor:pointer; }
  .w-tr-o:hover { color:var(--ink); border-color:var(--gold-lt); }
  .w-tr-o i { font-style:normal; font-family:var(--font-mono); font-size:11px;
    color:var(--ink-3); font-weight:400; }
  #tref-moon:checked ~ .w-tr-t .w-tr-o[for="tref-moon"],
  #tref-lagna:checked ~ .w-tr-t .w-tr-o[for="tref-lagna"] {
    background:var(--gold-solid); border-color:var(--gold-solid);
    color:var(--gold-solid-text); }
  #tref-moon:checked ~ .w-tr-t .w-tr-o[for="tref-moon"] i,
  #tref-lagna:checked ~ .w-tr-t .w-tr-o[for="tref-lagna"] i {
    color:var(--gold-solid-text); opacity:.8; }
  .w-tr-p { display:none; }
  #tref-moon:checked ~ .w-tr .w-tr-moon,
  #tref-lagna:checked ~ .w-tr .w-tr-lagna { display:block; }
  .w-tr-l { margin:12px 0 14px; font-size:13px; color:var(--ink-3); }
  /* ── section rules inside the result column ─────────────────── */
  /* the score and what it measures, side by side as the design has them */
  .w-pair { display:grid; gap:18px; grid-template-columns:1fr;
    align-items:stretch; margin-bottom:18px; }
  @media (min-width:900px) {
    .w-pair { grid-template-columns:minmax(0,330px) minmax(0,1fr); }
  }
  /* Both cards the same height. align-items:start left the right-hand card
     pinned to the top and 60px short of the left one on dasha and 62px on
     ashtakvarga — two cards side by side with a ragged bottom edge. Each
     cell is a grid so its single card fills it, and the card's own bottom
     margin goes, because the pair's gap is what should space them. */
  /* Both the cell and whatever it wraps: dasha puts the card straight into
     the grid and ashtakvarga wraps it in a div, so the margin to cancel is
     on a different element on each of the two pages. */
  .w-pair > *, .w-pair > * > * { min-width:0; margin-bottom:0; }
  .w-pair > * { display:grid; }
  /* Filling the cell only helps if the contents then sit in the middle of it
     rather than at the top of a taller box. */
  .w-pair .w-big { display:flex; flex-direction:column;
                   justify-content:center; }
  .w-pair .w-kvs { align-content:center; }

  .w-two { display:grid; gap:14px; grid-template-columns:1fr;
    margin-bottom:4px; }
  @media (min-width:900px) { .w-two { grid-template-columns:1.5fr 1fr; } }
  .w-two > * { min-width:0; padding:18px 20px; border:1px solid var(--line);
    border-radius:var(--r-card); background:var(--surface); }
  .w-meas p { margin:7px 0 0; font-size:13.5px; line-height:1.62;
    color:var(--ink-2); }
  /* Scoped, not a bare `.w-do { margin-bottom:0 }`. That is what was here,
     and .w-do is declared again 30 lines below WITH margin-bottom:18px — so
     the later rule won and this one had never applied. Inside .w-two the
     grid stretches both cards to the row height and the margin then eats
     into the donut's box, leaving it 18px shorter than the card beside it. */
  .w-two > .w-do { margin-bottom:0; }

  /* the seven-column transits table */
  .w-t7 table { min-width:660px; }
  .w-t7 .w-num { font-variant-numeric:tabular-nums; text-align:right;
    font-family:var(--font-mono); font-size:12.5px; }
  .w-rt { font-style:normal; font-family:var(--font-mono); font-size:10px;
    color:var(--gold-dk); vertical-align:super; }
  .w-q { display:inline-block; padding:2px 8px; border-radius:999px;
    font-size:11.5px; font-weight:650; }
  .w-q-good { background:var(--gold-solid); color:var(--gold-solid-text); }
  .w-q-mid { background:var(--gold-bg); color:var(--gold-dk); }
  .w-q-bad { background:var(--rail); color:var(--ink-2); }

  .w-when { display:flex; flex-direction:column; gap:2px; margin-bottom:6px; }
  .w-when b { font-family:var(--font-serif); font-size:26px; font-weight:650; }
  .w-when i { font-style:normal; font-size:13px; color:var(--ink-2); }

  .w-sec { display:flex; align-items:baseline; gap:8px; flex-wrap:wrap;
    margin:26px 0 12px; padding-top:16px; border-top:1px solid var(--line); }
  .w-sec span { font-family:var(--font-mono); font-size:11.5px;
    color:var(--gold-dk); font-weight:700; }
  .w-sec b { font-family:var(--font-mono); font-size:11.5px; letter-spacing:.13em;
    text-transform:uppercase; font-weight:700; }
  .w-sec i { font-style:italic; font-family:var(--font-serif); font-size:13px;
    color:var(--ink-3); }

  /* ── the score, as a ring ───────────────────────────────────── */
  .w-do { display:flex; align-items:center; gap:20px; flex-wrap:wrap;
    justify-content:space-between;
    margin-bottom:18px; }
  /* One segment per transit. See ring_svg() in views/transit_chart.py for
     why the three kinds differ by stroke weight and not by colour. */
  .w-do-r { flex:none; position:relative; width:132px; height:132px;
    display:grid; place-items:center; }
  .w-ring { position:absolute; inset:0; width:100%; height:100%; }
  .w-ring path { fill:none; stroke-linecap:round; }
  /* The track was --rail alone, which is 1.14:1 on this card in light and
     1.03:1 in dark — the circle simply was not there, and the arc looked
     like it floated. --ink-3 at a hairline draws it without competing. */
  .w-ring-t { fill:none; stroke:var(--ink-3); stroke-width:1; opacity:.5; }
  .w-ring-f { stroke:var(--gold-solid); stroke-width:13; }
  .w-ring-m { stroke:var(--gold-solid); stroke-width:6; }
  .w-ring-c { stroke:var(--ink-3); stroke-width:2; }
  .w-do-c { position:relative; text-align:center; line-height:1.05; }
  .w-do-c b { display:block; font-family:var(--font-serif); font-size:31px;
    font-weight:650; color:var(--gold-dk); }
  .w-do-c em { display:block; margin-top:3px; font-style:normal;
    font-family:var(--font-mono); font-size:9.5px; letter-spacing:.08em;
    text-transform:uppercase; color:var(--ink-3); }
  /* The legend carries the same three weights as the ring, so the line under
     the score and the drawing beside it are read as one thing. */
  .w-do-s { display:inline-flex; align-items:center; gap:6px; }
  .w-ks { display:inline-block; width:14px; border-radius:2px;
    background:var(--gold-solid); }
  .w-ks-f { height:9px; }
  .w-ks-m { height:5px; }
  .w-ks-c { height:2px; background:var(--ink-3); }
  .w-do-x { flex:1; min-width:200px; }
  .w-do-x b { display:block; font-family:var(--font-serif); font-size:30px;
    font-weight:650; line-height:1.1; margin-top:2px; }
  .w-do-x b em { font-style:normal; font-size:15px; color:var(--ink-3); }
  .w-do-x i { font-style:normal; font-size:15px; font-weight:650;
    color:var(--gold-dk); }
  /* The rating used to fall onto its own line because the score sat above it
     in a display:block <b>. The score is inside the ring now, so the label
     and the rating ran together as one string — "FROM THE MOONMixed but
     Workable". Both are blocks in their own right. */
  .w-do-x > .h-f-l { display:block; }
  .w-do-x > i { display:block; margin-top:3px; font-size:17px; }
  .w-do-k { display:flex; flex-wrap:wrap; gap:5px 18px; margin-top:7px;
    font-family:var(--font-mono); font-size:11px; color:var(--ink-3); }
  .w-do-x p { margin:8px 0 0; font-size:13.5px; line-height:1.6;
    color:var(--ink-2); }

  /* ── vedha ──────────────────────────────────────────────────── */
  .w-vd-i { padding:13px 15px; margin-bottom:9px; border:1px solid var(--line);
    border-left:3px solid var(--gold); border-radius:10px;
    background:var(--surface); }
  .w-vd-h { display:flex; align-items:center; gap:9px; flex-wrap:wrap;
    margin-bottom:5px; }
  .w-vd-h b { font-size:14px; }
  .w-vd-i p { margin:0; font-size:13px; line-height:1.6; color:var(--ink-2); }
  .w-vd-none { margin:0; font-size:13.5px; line-height:1.62;
    color:var(--ink-2); }

  /* ── sade sati phases ───────────────────────────────────────── */
  .w-phs { display:grid; gap:10px; grid-template-columns:1fr; }
  @media (min-width:760px) { .w-phs { grid-template-columns:repeat(3,1fr); } }
  .w-ph { padding:14px 15px; border:1px solid var(--line);
    border-radius:var(--r-card); background:var(--surface-2); }
  .w-ph b { display:block; margin:3px 0 1px; font-family:var(--font-serif);
    font-size:17px; }
  .w-ph i { font-style:normal; font-size:12px; color:var(--ink-3); }
  .w-ph-on { border-color:var(--gold); background:var(--gold-bg); }
  .w-ph-on b, .w-ph-on i { color:var(--gold-dk); }
  .w-ph-n { margin:14px 0 0; font-size:13.5px; line-height:1.62; }
  .w-ph-c { margin:8px 0 0; font-size:12.5px; line-height:1.6;
    color:var(--ink-3); }
  .w-cm-n { margin:12px 0 0; font-size:13px; line-height:1.62;
    color:var(--ink-2); }

  /* stretch, not start. These two are a chart and its reading — a pair, and
     they were 103px apart at the foot. The lopsided case align-items:start
     exists for elsewhere on this engine is a small card beside a long TABLE;
     this is neither. */
  .w-two2 { display:grid; gap:20px; grid-template-columns:1fr;
    align-items:stretch; }
  @media (min-width:900px) {
    .w-two2 { grid-template-columns:minmax(0,400px) minmax(0,1fr); }
  }
  .w-two2 > * { min-width:0; }
  .w-read { padding:18px 20px; border:1px solid var(--line);
    border-radius:var(--r-card); background:var(--surface); }
  .w-read p { margin:8px 0 0; font-size:14.5px; line-height:1.65; }
  .w-read-n { font-size:12.5px !important; color:var(--ink-3);
    border-top:1px solid var(--line-soft); padding-top:11px; margin-top:14px !important; }

  /* The chart was the one thing in this layout with no card: a bare diamond
     on the section ground, beside a bordered reading. Two boxes cannot read
     as a pair when only one of them has an edge. Same card as .w-read, and
     the chart centres inside it. */
  .w-tc { display:flex; flex-direction:column; justify-content:center;
    padding:18px 20px; border:1px solid var(--line);
    border-radius:var(--r-card); background:var(--surface); }
  .w-tc svg { display:block; margin:0 auto; max-width:340px; width:100%; }
  .w-tc-n { margin:12px auto 0; max-width:52ch; font-size:13px;
    line-height:1.62; color:var(--ink-2); text-align:center; }
  .w-tc-n a { color:var(--gold-dk); }

  /* ── the period score ───────────────────────────────────────── */
  .w-sc { margin-bottom:18px; }
  .w-sc-h { display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; }
  .w-sc-h b { font-family:var(--font-serif); font-size:20px; }
  .w-sc-h em { font-style:normal; font-family:var(--font-mono);
    font-size:13px; color:var(--gold-dk); }
  .w-sc-h .h-f-l { flex-basis:100%; }
  .w-sc-b { display:flex; height:16px; margin:10px 0 7px; border-radius:8px;
    overflow:hidden; border:1px solid var(--line); }
  .w-sc-b i { display:grid; place-items:center; font-style:normal;
    font-family:var(--font-mono); font-size:10px; font-weight:700; }
  .w-sc-f { background:var(--gold-solid); color:var(--gold-solid-text); }
  .w-sc-m { background:var(--gold-lt); color:var(--gold-dk); }
  .w-sc-c { background:var(--rail); color:var(--ink-2); }
  .w-sc-k { display:flex; gap:14px; align-items:center;
    font-family:var(--font-mono); font-size:11px; color:var(--ink-3);
    flex-wrap:wrap; }
  .w-sc-k span { display:inline-flex; align-items:center; gap:5px; }
  .w-sc-k b { width:10px; height:10px; border-radius:3px;
    border:1px solid var(--line); }
  .w-sc-a { margin:10px 0 0; font-size:14px; line-height:1.6; }

  /* ── the nine graha cards ───────────────────────────────────── */
  .w-pcs { display:grid; gap:10px;
    grid-template-columns:repeat(auto-fit,minmax(215px,1fr)); }
  .w-pc { display:flex; flex-direction:column; padding:13px 15px;
    border:1px solid var(--line); border-left-width:3px;
    border-radius:10px; background:var(--surface); }
  .w-pc-good { border-left-color:var(--gold-solid); }
  .w-pc-mid { border-left-color:var(--gold-lt); }
  .w-pc-bad { border-left-color:var(--ink-3); }
  .w-pc-h { display:flex; align-items:baseline; justify-content:space-between;
    gap:8px; }
  .w-pc-h b { font-family:var(--font-serif); font-size:16px; }
  .w-pc-s { font-family:var(--font-mono); font-size:11px; color:var(--ink-3); }
  .w-pc-n { display:flex; align-items:baseline; gap:6px; margin:6px 0 4px; }
  .w-pc-n em { font-style:normal; font-family:var(--font-serif);
    font-size:22px; font-weight:650; color:var(--gold-dk); }
  .w-pc-q { margin:0; font-size:12.5px; font-weight:650; }
  .w-pc-e { margin:3px 0 8px; font-size:12.5px; line-height:1.5;
    color:var(--ink-2); }
  .w-pc-f { display:flex; align-items:center; gap:6px; flex-wrap:wrap;
    margin-top:auto; }
  .w-pc-b { padding:1px 7px; border-radius:999px; background:var(--rail);
    font-family:var(--font-mono); font-size:9.5px; color:var(--ink-2); }
  .w-pc-v { background:var(--gold-bg); color:var(--gold-dk); font-weight:700; }
  .w-pc > i { font-style:normal; margin-top:5px; font-family:var(--font-mono);
    font-size:10.5px; color:var(--ink-3); }

  /* ── sade sati / dhaiyya ────────────────────────────────────── */
  .w-al { margin-top:16px; padding:15px 17px; border:1px solid var(--gold-lt);
    border-radius:var(--r-card); background:var(--gold-bg); }
  .w-al-h { display:flex; align-items:baseline; gap:9px; flex-wrap:wrap;
    margin-bottom:7px; }
  .w-al-h b { font-family:var(--font-serif); font-size:17px;
    color:var(--gold-dk); }
  .w-al-p { padding:1px 8px; border-radius:999px; background:var(--surface);
    font-family:var(--font-mono); font-size:10.5px; font-weight:700; }
  .w-al-h i { font-style:normal; font-family:var(--font-mono); font-size:11px;
    color:var(--ink-3); flex-basis:100%; }
  .w-al p { margin:0; font-size:13.5px; line-height:1.62; }
  .w-al-none { border-style:dashed; background:var(--surface-2); }
  .w-al-none b { font-family:var(--font-serif); font-size:15px; }

  .w-tbl { border:1px solid var(--line); border-radius:var(--r-card);
           background:var(--surface); overflow:auto; max-height:520px; }
  .w-tbl table { width:100%; border-collapse:collapse; font-size:13px;
                 min-width:460px; }
  .w-tbl th { position:sticky; top:0; background:var(--surface); text-align:left;
              font-family:var(--font-mono); font-size:9.5px; letter-spacing:.11em;
              text-transform:uppercase; color:var(--ink-3); font-weight:400;
              padding:11px 14px; border-bottom:1px solid var(--line); }
  .w-tbl td { padding:10px 14px; border-bottom:1px solid var(--line);
              color:var(--ink-2); font-variant-numeric:tabular-nums; }
  .w-tbl td b { color:var(--ink); }
  .w-tbl tr:last-child td { border-bottom:0; }

  .w-asat { font-family:var(--font-mono); font-size:10px; letter-spacing:.1em;
            text-transform:uppercase; color:var(--ink-3); margin:12px 0 0; }
  .w-note { font-size:14px; line-height:1.65; color:var(--ink-2);
            max-width:74ch; margin:0 0 18px; }
  .w-err { margin-top:12px; padding:12px 14px; border-radius:11px;
           background:var(--bad-bg); color:var(--bad); font-size:13.5px; }
  .w-busy { margin-top:12px; font-family:var(--font-mono); font-size:11px;
            letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); }


/* The phone, last in the file — a media query adds no specificity, so this
   follows the rules it overrides. Four captions on the dasha and transit
   tools: the running-period marker, the percentage on a bar, the aligned
   note, and the sub-period name under each segment. All between 9 and 10.5. */
@media (max-width:640px) {
  .w-rt, .w-pc-b, .w-al-p, .w-dn-s b, .w-dl-s i, .w-dl-now span,
  .w-do-c em
    { font-size:11px; }
}

.c-seo { display:grid; gap:16px; grid-template-columns:1fr; max-width:78ch; }
@media (min-width:900px) { .c-seo { grid-template-columns:repeat(2,1fr);
                                    max-width:none; } }
.c-seo-s h3 { font-family:var(--font-serif); font-size:18px; font-weight:600;
              color:var(--ink); margin:0 0 7px; }
.c-seo-s p { font-size:13.5px; line-height:1.7; color:var(--ink-2); margin:0;
             max-width:72ch; }
#b-tob-h-1:checked ~ * label[for="b-tob-h-1"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); }
#b-tob-h-1:focus-visible ~ * label[for="b-tob-h-1"] { outline:2px solid var(--gold); outline-offset:2px; }
#b-tob-h-1:checked ~ * .c-tp-oh::after { content:"01"; }
#b-tob-h-2:checked ~ * label[for="b-tob-h-2"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); }
#b-tob-h-2:focus-visible ~ * label[for="b-tob-h-2"] { outline:2px solid var(--gold); outline-offset:2px; }
#b-tob-h-2:checked ~ * .c-tp-oh::after { content:"02"; }
#b-tob-h-3:checked ~ * label[for="b-tob-h-3"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); }
#b-tob-h-3:focus-visible ~ * label[for="b-tob-h-3"] { outline:2px solid var(--gold); outline-offset:2px; }
#b-tob-h-3:checked ~ * .c-tp-oh::after { content:"03"; }
#b-tob-h-4:checked ~ * label[for="b-tob-h-4"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); }
#b-tob-h-4:focus-visible ~ * label[for="b-tob-h-4"] { outline:2px solid var(--gold); outline-offset:2px; }
#b-tob-h-4:checked ~ * .c-tp-oh::after { content:"04"; }
#b-tob-h-5:checked ~ * label[for="b-tob-h-5"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); }
#b-tob-h-5:focus-visible ~ * label[for="b-tob-h-5"] { outline:2px solid var(--gold); outline-offset:2px; }
#b-tob-h-5:checked ~ * .c-tp-oh::after { content:"05"; }
#b-tob-h-6:checked ~ * label[for="b-tob-h-6"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); }
#b-tob-h-6:focus-visible ~ * label[for="b-tob-h-6"] { outline:2px solid var(--gold); outline-offset:2px; }
#b-tob-h-6:checked ~ * .c-tp-oh::after { content:"06"; }
#b-tob-h-7:checked ~ * label[for="b-tob-h-7"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); }
#b-tob-h-7:focus-visible ~ * label[for="b-tob-h-7"] { outline:2px solid var(--gold); outline-offset:2px; }
#b-tob-h-7:checked ~ * .c-tp-oh::after { content:"07"; }
#b-tob-h-8:checked ~ * label[for="b-tob-h-8"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); }
#b-tob-h-8:focus-visible ~ * label[for="b-tob-h-8"] { outline:2px solid var(--gold); outline-offset:2px; }
#b-tob-h-8:checked ~ * .c-tp-oh::after { content:"08"; }
#b-tob-h-9:checked ~ * label[for="b-tob-h-9"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); }
#b-tob-h-9:focus-visible ~ * label[for="b-tob-h-9"] { outline:2px solid var(--gold); outline-offset:2px; }
#b-tob-h-9:checked ~ * .c-tp-oh::after { content:"09"; }
#b-tob-h-10:checked ~ * label[for="b-tob-h-10"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); }
#b-tob-h-10:focus-visible ~ * label[for="b-tob-h-10"] { outline:2px solid var(--gold); outline-offset:2px; }
#b-tob-h-10:checked ~ * .c-tp-oh::after { content:"10"; }
#b-tob-h-11:checked ~ * label[for="b-tob-h-11"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); }
#b-tob-h-11:focus-visible ~ * label[for="b-tob-h-11"] { outline:2px solid var(--gold); outline-offset:2px; }
#b-tob-h-11:checked ~ * .c-tp-oh::after { content:"11"; }
#b-tob-h-12:checked ~ * label[for="b-tob-h-12"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); }
#b-tob-h-12:focus-visible ~ * label[for="b-tob-h-12"] { outline:2px solid var(--gold); outline-offset:2px; }
#b-tob-h-12:checked ~ * .c-tp-oh::after { content:"12"; }
#b-tob-t-0:checked ~ * label[for="b-tob-t-0"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); }
#b-tob-t-0:focus-visible ~ * label[for="b-tob-t-0"] { outline:2px solid var(--gold); outline-offset:2px; }
#b-tob-t-0:checked ~ * .c-tp-ot::after { content:"00"; }
#b-tob-t-1:checked ~ * label[for="b-tob-t-1"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); }
#b-tob-t-1:focus-visible ~ * label[for="b-tob-t-1"] { outline:2px solid var(--gold); outline-offset:2px; }
#b-tob-t-1:checked ~ * .c-tp-ot::after { content:"01"; }
#b-tob-t-2:checked ~ * label[for="b-tob-t-2"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); }
#b-tob-t-2:focus-visible ~ * label[for="b-tob-t-2"] { outline:2px solid var(--gold); outline-offset:2px; }
#b-tob-t-2:checked ~ * .c-tp-ot::after { content:"02"; }
#b-tob-t-3:checked ~ * label[for="b-tob-t-3"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); }
#b-tob-t-3:focus-visible ~ * label[for="b-tob-t-3"] { outline:2px solid var(--gold); outline-offset:2px; }
#b-tob-t-3:checked ~ * .c-tp-ot::after { content:"03"; }
#b-tob-t-4:checked ~ * label[for="b-tob-t-4"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); }
#b-tob-t-4:focus-visible ~ * label[for="b-tob-t-4"] { outline:2px solid var(--gold); outline-offset:2px; }
#b-tob-t-4:checked ~ * .c-tp-ot::after { content:"04"; }
#b-tob-t-5:checked ~ * label[for="b-tob-t-5"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); }
#b-tob-t-5:focus-visible ~ * label[for="b-tob-t-5"] { outline:2px solid var(--gold); outline-offset:2px; }
#b-tob-t-5:checked ~ * .c-tp-ot::after { content:"05"; }
#b-tob-t-6:checked ~ * label[for="b-tob-t-6"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); }
#b-tob-t-6:focus-visible ~ * label[for="b-tob-t-6"] { outline:2px solid var(--gold); outline-offset:2px; }
#b-tob-t-6:checked ~ * .c-tp-ot::after { content:"06"; }
#b-tob-t-7:checked ~ * label[for="b-tob-t-7"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); }
#b-tob-t-7:focus-visible ~ * label[for="b-tob-t-7"] { outline:2px solid var(--gold); outline-offset:2px; }
#b-tob-t-7:checked ~ * .c-tp-ot::after { content:"07"; }
#b-tob-t-8:checked ~ * label[for="b-tob-t-8"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); }
#b-tob-t-8:focus-visible ~ * label[for="b-tob-t-8"] { outline:2px solid var(--gold); outline-offset:2px; }
#b-tob-t-8:checked ~ * .c-tp-ot::after { content:"08"; }
#b-tob-t-9:checked ~ * label[for="b-tob-t-9"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); }
#b-tob-t-9:focus-visible ~ * label[for="b-tob-t-9"] { outline:2px solid var(--gold); outline-offset:2px; }
#b-tob-t-9:checked ~ * .c-tp-ot::after { content:"09"; }
#b-tob-t-10:checked ~ * label[for="b-tob-t-10"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); }
#b-tob-t-10:focus-visible ~ * label[for="b-tob-t-10"] { outline:2px solid var(--gold); outline-offset:2px; }
#b-tob-t-10:checked ~ * .c-tp-ot::after { content:"10"; }
#b-tob-t-11:checked ~ * label[for="b-tob-t-11"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); }
#b-tob-t-11:focus-visible ~ * label[for="b-tob-t-11"] { outline:2px solid var(--gold); outline-offset:2px; }
#b-tob-t-11:checked ~ * .c-tp-ot::after { content:"11"; }
#b-tob-t-12:checked ~ * label[for="b-tob-t-12"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); }
#b-tob-t-12:focus-visible ~ * label[for="b-tob-t-12"] { outline:2px solid var(--gold); outline-offset:2px; }
#b-tob-t-12:checked ~ * .c-tp-ot::after { content:"12"; }
#b-tob-t-13:checked ~ * label[for="b-tob-t-13"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); }
#b-tob-t-13:focus-visible ~ * label[for="b-tob-t-13"] { outline:2px solid var(--gold); outline-offset:2px; }
#b-tob-t-13:checked ~ * .c-tp-ot::after { content:"13"; }
#b-tob-t-14:checked ~ * label[for="b-tob-t-14"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); }
#b-tob-t-14:focus-visible ~ * label[for="b-tob-t-14"] { outline:2px solid var(--gold); outline-offset:2px; }
#b-tob-t-14:checked ~ * .c-tp-ot::after { content:"14"; }
#b-tob-t-15:checked ~ * label[for="b-tob-t-15"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); }
#b-tob-t-15:focus-visible ~ * label[for="b-tob-t-15"] { outline:2px solid var(--gold); outline-offset:2px; }
#b-tob-t-15:checked ~ * .c-tp-ot::after { content:"15"; }
#b-tob-t-16:checked ~ * label[for="b-tob-t-16"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); }
#b-tob-t-16:focus-visible ~ * label[for="b-tob-t-16"] { outline:2px solid var(--gold); outline-offset:2px; }
#b-tob-t-16:checked ~ * .c-tp-ot::after { content:"16"; }
#b-tob-t-17:checked ~ * label[for="b-tob-t-17"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); }
#b-tob-t-17:focus-visible ~ * label[for="b-tob-t-17"] { outline:2px solid var(--gold); outline-offset:2px; }
#b-tob-t-17:checked ~ * .c-tp-ot::after { content:"17"; }
#b-tob-t-18:checked ~ * label[for="b-tob-t-18"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); }
#b-tob-t-18:focus-visible ~ * label[for="b-tob-t-18"] { outline:2px solid var(--gold); outline-offset:2px; }
#b-tob-t-18:checked ~ * .c-tp-ot::after { content:"18"; }
#b-tob-t-19:checked ~ * label[for="b-tob-t-19"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); }
#b-tob-t-19:focus-visible ~ * label[for="b-tob-t-19"] { outline:2px solid var(--gold); outline-offset:2px; }
#b-tob-t-19:checked ~ * .c-tp-ot::after { content:"19"; }
#b-tob-t-20:checked ~ * label[for="b-tob-t-20"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); }
#b-tob-t-20:focus-visible ~ * label[for="b-tob-t-20"] { outline:2px solid var(--gold); outline-offset:2px; }
#b-tob-t-20:checked ~ * .c-tp-ot::after { content:"20"; }
#b-tob-t-21:checked ~ * label[for="b-tob-t-21"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); }
#b-tob-t-21:focus-visible ~ * label[for="b-tob-t-21"] { outline:2px solid var(--gold); outline-offset:2px; }
#b-tob-t-21:checked ~ * .c-tp-ot::after { content:"21"; }
#b-tob-t-22:checked ~ * label[for="b-tob-t-22"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); }
#b-tob-t-22:focus-visible ~ * label[for="b-tob-t-22"] { outline:2px solid var(--gold); outline-offset:2px; }
#b-tob-t-22:checked ~ * .c-tp-ot::after { content:"22"; }
#b-tob-t-23:checked ~ * label[for="b-tob-t-23"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); }
#b-tob-t-23:focus-visible ~ * label[for="b-tob-t-23"] { outline:2px solid var(--gold); outline-offset:2px; }
#b-tob-t-23:checked ~ * .c-tp-ot::after { content:"23"; }
#b-tob-t-24:checked ~ * label[for="b-tob-t-24"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); }
#b-tob-t-24:focus-visible ~ * label[for="b-tob-t-24"] { outline:2px solid var(--gold); outline-offset:2px; }
#b-tob-t-24:checked ~ * .c-tp-ot::after { content:"24"; }
#b-tob-t-25:checked ~ * label[for="b-tob-t-25"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); }
#b-tob-t-25:focus-visible ~ * label[for="b-tob-t-25"] { outline:2px solid var(--gold); outline-offset:2px; }
#b-tob-t-25:checked ~ * .c-tp-ot::after { content:"25"; }
#b-tob-t-26:checked ~ * label[for="b-tob-t-26"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); }
#b-tob-t-26:focus-visible ~ * label[for="b-tob-t-26"] { outline:2px solid var(--gold); outline-offset:2px; }
#b-tob-t-26:checked ~ * .c-tp-ot::after { content:"26"; }
#b-tob-t-27:checked ~ * label[for="b-tob-t-27"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); }
#b-tob-t-27:focus-visible ~ * label[for="b-tob-t-27"] { outline:2px solid var(--gold); outline-offset:2px; }
#b-tob-t-27:checked ~ * .c-tp-ot::after { content:"27"; }
#b-tob-t-28:checked ~ * label[for="b-tob-t-28"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); }
#b-tob-t-28:focus-visible ~ * label[for="b-tob-t-28"] { outline:2px solid var(--gold); outline-offset:2px; }
#b-tob-t-28:checked ~ * .c-tp-ot::after { content:"28"; }
#b-tob-t-29:checked ~ * label[for="b-tob-t-29"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); }
#b-tob-t-29:focus-visible ~ * label[for="b-tob-t-29"] { outline:2px solid var(--gold); outline-offset:2px; }
#b-tob-t-29:checked ~ * .c-tp-ot::after { content:"29"; }
#b-tob-t-30:checked ~ * label[for="b-tob-t-30"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); }
#b-tob-t-30:focus-visible ~ * label[for="b-tob-t-30"] { outline:2px solid var(--gold); outline-offset:2px; }
#b-tob-t-30:checked ~ * .c-tp-ot::after { content:"30"; }
#b-tob-t-31:checked ~ * label[for="b-tob-t-31"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); }
#b-tob-t-31:focus-visible ~ * label[for="b-tob-t-31"] { outline:2px solid var(--gold); outline-offset:2px; }
#b-tob-t-31:checked ~ * .c-tp-ot::after { content:"31"; }
#b-tob-t-32:checked ~ * label[for="b-tob-t-32"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); }
#b-tob-t-32:focus-visible ~ * label[for="b-tob-t-32"] { outline:2px solid var(--gold); outline-offset:2px; }
#b-tob-t-32:checked ~ * .c-tp-ot::after { content:"32"; }
#b-tob-t-33:checked ~ * label[for="b-tob-t-33"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); }
#b-tob-t-33:focus-visible ~ * label[for="b-tob-t-33"] { outline:2px solid var(--gold); outline-offset:2px; }
#b-tob-t-33:checked ~ * .c-tp-ot::after { content:"33"; }
#b-tob-t-34:checked ~ * label[for="b-tob-t-34"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); }
#b-tob-t-34:focus-visible ~ * label[for="b-tob-t-34"] { outline:2px solid var(--gold); outline-offset:2px; }
#b-tob-t-34:checked ~ * .c-tp-ot::after { content:"34"; }
#b-tob-t-35:checked ~ * label[for="b-tob-t-35"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); }
#b-tob-t-35:focus-visible ~ * label[for="b-tob-t-35"] { outline:2px solid var(--gold); outline-offset:2px; }
#b-tob-t-35:checked ~ * .c-tp-ot::after { content:"35"; }
#b-tob-t-36:checked ~ * label[for="b-tob-t-36"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); }
#b-tob-t-36:focus-visible ~ * label[for="b-tob-t-36"] { outline:2px solid var(--gold); outline-offset:2px; }
#b-tob-t-36:checked ~ * .c-tp-ot::after { content:"36"; }
#b-tob-t-37:checked ~ * label[for="b-tob-t-37"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); }
#b-tob-t-37:focus-visible ~ * label[for="b-tob-t-37"] { outline:2px solid var(--gold); outline-offset:2px; }
#b-tob-t-37:checked ~ * .c-tp-ot::after { content:"37"; }
#b-tob-t-38:checked ~ * label[for="b-tob-t-38"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); }
#b-tob-t-38:focus-visible ~ * label[for="b-tob-t-38"] { outline:2px solid var(--gold); outline-offset:2px; }
#b-tob-t-38:checked ~ * .c-tp-ot::after { content:"38"; }
#b-tob-t-39:checked ~ * label[for="b-tob-t-39"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); }
#b-tob-t-39:focus-visible ~ * label[for="b-tob-t-39"] { outline:2px solid var(--gold); outline-offset:2px; }
#b-tob-t-39:checked ~ * .c-tp-ot::after { content:"39"; }
#b-tob-t-40:checked ~ * label[for="b-tob-t-40"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); }
#b-tob-t-40:focus-visible ~ * label[for="b-tob-t-40"] { outline:2px solid var(--gold); outline-offset:2px; }
#b-tob-t-40:checked ~ * .c-tp-ot::after { content:"40"; }
#b-tob-t-41:checked ~ * label[for="b-tob-t-41"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); }
#b-tob-t-41:focus-visible ~ * label[for="b-tob-t-41"] { outline:2px solid var(--gold); outline-offset:2px; }
#b-tob-t-41:checked ~ * .c-tp-ot::after { content:"41"; }
#b-tob-t-42:checked ~ * label[for="b-tob-t-42"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); }
#b-tob-t-42:focus-visible ~ * label[for="b-tob-t-42"] { outline:2px solid var(--gold); outline-offset:2px; }
#b-tob-t-42:checked ~ * .c-tp-ot::after { content:"42"; }
#b-tob-t-43:checked ~ * label[for="b-tob-t-43"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); }
#b-tob-t-43:focus-visible ~ * label[for="b-tob-t-43"] { outline:2px solid var(--gold); outline-offset:2px; }
#b-tob-t-43:checked ~ * .c-tp-ot::after { content:"43"; }
#b-tob-t-44:checked ~ * label[for="b-tob-t-44"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); }
#b-tob-t-44:focus-visible ~ * label[for="b-tob-t-44"] { outline:2px solid var(--gold); outline-offset:2px; }
#b-tob-t-44:checked ~ * .c-tp-ot::after { content:"44"; }
#b-tob-t-45:checked ~ * label[for="b-tob-t-45"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); }
#b-tob-t-45:focus-visible ~ * label[for="b-tob-t-45"] { outline:2px solid var(--gold); outline-offset:2px; }
#b-tob-t-45:checked ~ * .c-tp-ot::after { content:"45"; }
#b-tob-t-46:checked ~ * label[for="b-tob-t-46"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); }
#b-tob-t-46:focus-visible ~ * label[for="b-tob-t-46"] { outline:2px solid var(--gold); outline-offset:2px; }
#b-tob-t-46:checked ~ * .c-tp-ot::after { content:"46"; }
#b-tob-t-47:checked ~ * label[for="b-tob-t-47"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); }
#b-tob-t-47:focus-visible ~ * label[for="b-tob-t-47"] { outline:2px solid var(--gold); outline-offset:2px; }
#b-tob-t-47:checked ~ * .c-tp-ot::after { content:"47"; }
#b-tob-t-48:checked ~ * label[for="b-tob-t-48"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); }
#b-tob-t-48:focus-visible ~ * label[for="b-tob-t-48"] { outline:2px solid var(--gold); outline-offset:2px; }
#b-tob-t-48:checked ~ * .c-tp-ot::after { content:"48"; }
#b-tob-t-49:checked ~ * label[for="b-tob-t-49"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); }
#b-tob-t-49:focus-visible ~ * label[for="b-tob-t-49"] { outline:2px solid var(--gold); outline-offset:2px; }
#b-tob-t-49:checked ~ * .c-tp-ot::after { content:"49"; }
#b-tob-t-50:checked ~ * label[for="b-tob-t-50"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); }
#b-tob-t-50:focus-visible ~ * label[for="b-tob-t-50"] { outline:2px solid var(--gold); outline-offset:2px; }
#b-tob-t-50:checked ~ * .c-tp-ot::after { content:"50"; }
#b-tob-t-51:checked ~ * label[for="b-tob-t-51"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); }
#b-tob-t-51:focus-visible ~ * label[for="b-tob-t-51"] { outline:2px solid var(--gold); outline-offset:2px; }
#b-tob-t-51:checked ~ * .c-tp-ot::after { content:"51"; }
#b-tob-t-52:checked ~ * label[for="b-tob-t-52"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); }
#b-tob-t-52:focus-visible ~ * label[for="b-tob-t-52"] { outline:2px solid var(--gold); outline-offset:2px; }
#b-tob-t-52:checked ~ * .c-tp-ot::after { content:"52"; }
#b-tob-t-53:checked ~ * label[for="b-tob-t-53"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); }
#b-tob-t-53:focus-visible ~ * label[for="b-tob-t-53"] { outline:2px solid var(--gold); outline-offset:2px; }
#b-tob-t-53:checked ~ * .c-tp-ot::after { content:"53"; }
#b-tob-t-54:checked ~ * label[for="b-tob-t-54"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); }
#b-tob-t-54:focus-visible ~ * label[for="b-tob-t-54"] { outline:2px solid var(--gold); outline-offset:2px; }
#b-tob-t-54:checked ~ * .c-tp-ot::after { content:"54"; }
#b-tob-t-55:checked ~ * label[for="b-tob-t-55"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); }
#b-tob-t-55:focus-visible ~ * label[for="b-tob-t-55"] { outline:2px solid var(--gold); outline-offset:2px; }
#b-tob-t-55:checked ~ * .c-tp-ot::after { content:"55"; }
#b-tob-t-56:checked ~ * label[for="b-tob-t-56"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); }
#b-tob-t-56:focus-visible ~ * label[for="b-tob-t-56"] { outline:2px solid var(--gold); outline-offset:2px; }
#b-tob-t-56:checked ~ * .c-tp-ot::after { content:"56"; }
#b-tob-t-57:checked ~ * label[for="b-tob-t-57"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); }
#b-tob-t-57:focus-visible ~ * label[for="b-tob-t-57"] { outline:2px solid var(--gold); outline-offset:2px; }
#b-tob-t-57:checked ~ * .c-tp-ot::after { content:"57"; }
#b-tob-t-58:checked ~ * label[for="b-tob-t-58"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); }
#b-tob-t-58:focus-visible ~ * label[for="b-tob-t-58"] { outline:2px solid var(--gold); outline-offset:2px; }
#b-tob-t-58:checked ~ * .c-tp-ot::after { content:"58"; }
#b-tob-t-59:checked ~ * label[for="b-tob-t-59"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); }
#b-tob-t-59:focus-visible ~ * label[for="b-tob-t-59"] { outline:2px solid var(--gold); outline-offset:2px; }
#b-tob-t-59:checked ~ * .c-tp-ot::after { content:"59"; }
#b-tob-t-0:checked ~ * .c-ck-fr[data-blk="0"] { display:grid; }
#b-tob-t-1:checked ~ * .c-ck-fr[data-blk="0"] { display:grid; }
#b-tob-t-2:checked ~ * .c-ck-fr[data-blk="0"] { display:grid; }
#b-tob-t-3:checked ~ * .c-ck-fr[data-blk="0"] { display:grid; }
#b-tob-t-4:checked ~ * .c-ck-fr[data-blk="0"] { display:grid; }
#b-tob-t-5:checked ~ * .c-ck-fr[data-blk="1"] { display:grid; }
#b-tob-t-6:checked ~ * .c-ck-fr[data-blk="1"] { display:grid; }
#b-tob-t-7:checked ~ * .c-ck-fr[data-blk="1"] { display:grid; }
#b-tob-t-8:checked ~ * .c-ck-fr[data-blk="1"] { display:grid; }
#b-tob-t-9:checked ~ * .c-ck-fr[data-blk="1"] { display:grid; }
#b-tob-t-10:checked ~ * .c-ck-fr[data-blk="2"] { display:grid; }
#b-tob-t-11:checked ~ * .c-ck-fr[data-blk="2"] { display:grid; }
#b-tob-t-12:checked ~ * .c-ck-fr[data-blk="2"] { display:grid; }
#b-tob-t-13:checked ~ * .c-ck-fr[data-blk="2"] { display:grid; }
#b-tob-t-14:checked ~ * .c-ck-fr[data-blk="2"] { display:grid; }
#b-tob-t-15:checked ~ * .c-ck-fr[data-blk="3"] { display:grid; }
#b-tob-t-16:checked ~ * .c-ck-fr[data-blk="3"] { display:grid; }
#b-tob-t-17:checked ~ * .c-ck-fr[data-blk="3"] { display:grid; }
#b-tob-t-18:checked ~ * .c-ck-fr[data-blk="3"] { display:grid; }
#b-tob-t-19:checked ~ * .c-ck-fr[data-blk="3"] { display:grid; }
#b-tob-t-20:checked ~ * .c-ck-fr[data-blk="4"] { display:grid; }
#b-tob-t-21:checked ~ * .c-ck-fr[data-blk="4"] { display:grid; }
#b-tob-t-22:checked ~ * .c-ck-fr[data-blk="4"] { display:grid; }
#b-tob-t-23:checked ~ * .c-ck-fr[data-blk="4"] { display:grid; }
#b-tob-t-24:checked ~ * .c-ck-fr[data-blk="4"] { display:grid; }
#b-tob-t-25:checked ~ * .c-ck-fr[data-blk="5"] { display:grid; }
#b-tob-t-26:checked ~ * .c-ck-fr[data-blk="5"] { display:grid; }
#b-tob-t-27:checked ~ * .c-ck-fr[data-blk="5"] { display:grid; }
#b-tob-t-28:checked ~ * .c-ck-fr[data-blk="5"] { display:grid; }
#b-tob-t-29:checked ~ * .c-ck-fr[data-blk="5"] { display:grid; }
#b-tob-t-30:checked ~ * .c-ck-fr[data-blk="6"] { display:grid; }
#b-tob-t-31:checked ~ * .c-ck-fr[data-blk="6"] { display:grid; }
#b-tob-t-32:checked ~ * .c-ck-fr[data-blk="6"] { display:grid; }
#b-tob-t-33:checked ~ * .c-ck-fr[data-blk="6"] { display:grid; }
#b-tob-t-34:checked ~ * .c-ck-fr[data-blk="6"] { display:grid; }
#b-tob-t-35:checked ~ * .c-ck-fr[data-blk="7"] { display:grid; }
#b-tob-t-36:checked ~ * .c-ck-fr[data-blk="7"] { display:grid; }
#b-tob-t-37:checked ~ * .c-ck-fr[data-blk="7"] { display:grid; }
#b-tob-t-38:checked ~ * .c-ck-fr[data-blk="7"] { display:grid; }
#b-tob-t-39:checked ~ * .c-ck-fr[data-blk="7"] { display:grid; }
#b-tob-t-40:checked ~ * .c-ck-fr[data-blk="8"] { display:grid; }
#b-tob-t-41:checked ~ * .c-ck-fr[data-blk="8"] { display:grid; }
#b-tob-t-42:checked ~ * .c-ck-fr[data-blk="8"] { display:grid; }
#b-tob-t-43:checked ~ * .c-ck-fr[data-blk="8"] { display:grid; }
#b-tob-t-44:checked ~ * .c-ck-fr[data-blk="8"] { display:grid; }
#b-tob-t-45:checked ~ * .c-ck-fr[data-blk="9"] { display:grid; }
#b-tob-t-46:checked ~ * .c-ck-fr[data-blk="9"] { display:grid; }
#b-tob-t-47:checked ~ * .c-ck-fr[data-blk="9"] { display:grid; }
#b-tob-t-48:checked ~ * .c-ck-fr[data-blk="9"] { display:grid; }
#b-tob-t-49:checked ~ * .c-ck-fr[data-blk="9"] { display:grid; }
#b-tob-t-50:checked ~ * .c-ck-fr[data-blk="10"] { display:grid; }
#b-tob-t-51:checked ~ * .c-ck-fr[data-blk="10"] { display:grid; }
#b-tob-t-52:checked ~ * .c-ck-fr[data-blk="10"] { display:grid; }
#b-tob-t-53:checked ~ * .c-ck-fr[data-blk="10"] { display:grid; }
#b-tob-t-54:checked ~ * .c-ck-fr[data-blk="10"] { display:grid; }
#b-tob-t-55:checked ~ * .c-ck-fr[data-blk="11"] { display:grid; }
#b-tob-t-56:checked ~ * .c-ck-fr[data-blk="11"] { display:grid; }
#b-tob-t-57:checked ~ * .c-ck-fr[data-blk="11"] { display:grid; }
#b-tob-t-58:checked ~ * .c-ck-fr[data-blk="11"] { display:grid; }
#b-tob-t-59:checked ~ * .c-ck-fr[data-blk="11"] { display:grid; }
#b-tob-t-1:checked ~ * .c-ck-m[for="b-tob-t-0"] { background:var(--gold-bg); border-color:var(--gold-lt); color:var(--gold-dk); }
#b-tob-t-2:checked ~ * .c-ck-m[for="b-tob-t-0"] { background:var(--gold-bg); border-color:var(--gold-lt); color:var(--gold-dk); }
#b-tob-t-3:checked ~ * .c-ck-m[for="b-tob-t-0"] { background:var(--gold-bg); border-color:var(--gold-lt); color:var(--gold-dk); }
#b-tob-t-4:checked ~ * .c-ck-m[for="b-tob-t-0"] { background:var(--gold-bg); border-color:var(--gold-lt); color:var(--gold-dk); }
#b-tob-t-6:checked ~ * .c-ck-m[for="b-tob-t-5"] { background:var(--gold-bg); border-color:var(--gold-lt); color:var(--gold-dk); }
#b-tob-t-7:checked ~ * .c-ck-m[for="b-tob-t-5"] { background:var(--gold-bg); border-color:var(--gold-lt); color:var(--gold-dk); }
#b-tob-t-8:checked ~ * .c-ck-m[for="b-tob-t-5"] { background:var(--gold-bg); border-color:var(--gold-lt); color:var(--gold-dk); }
#b-tob-t-9:checked ~ * .c-ck-m[for="b-tob-t-5"] { background:var(--gold-bg); border-color:var(--gold-lt); color:var(--gold-dk); }
#b-tob-t-11:checked ~ * .c-ck-m[for="b-tob-t-10"] { background:var(--gold-bg); border-color:var(--gold-lt); color:var(--gold-dk); }
#b-tob-t-12:checked ~ * .c-ck-m[for="b-tob-t-10"] { background:var(--gold-bg); border-color:var(--gold-lt); color:var(--gold-dk); }
#b-tob-t-13:checked ~ * .c-ck-m[for="b-tob-t-10"] { background:var(--gold-bg); border-color:var(--gold-lt); color:var(--gold-dk); }
#b-tob-t-14:checked ~ * .c-ck-m[for="b-tob-t-10"] { background:var(--gold-bg); border-color:var(--gold-lt); color:var(--gold-dk); }
#b-tob-t-16:checked ~ * .c-ck-m[for="b-tob-t-15"] { background:var(--gold-bg); border-color:var(--gold-lt); color:var(--gold-dk); }
#b-tob-t-17:checked ~ * .c-ck-m[for="b-tob-t-15"] { background:var(--gold-bg); border-color:var(--gold-lt); color:var(--gold-dk); }
#b-tob-t-18:checked ~ * .c-ck-m[for="b-tob-t-15"] { background:var(--gold-bg); border-color:var(--gold-lt); color:var(--gold-dk); }
#b-tob-t-19:checked ~ * .c-ck-m[for="b-tob-t-15"] { background:var(--gold-bg); border-color:var(--gold-lt); color:var(--gold-dk); }
#b-tob-t-21:checked ~ * .c-ck-m[for="b-tob-t-20"] { background:var(--gold-bg); border-color:var(--gold-lt); color:var(--gold-dk); }
#b-tob-t-22:checked ~ * .c-ck-m[for="b-tob-t-20"] { background:var(--gold-bg); border-color:var(--gold-lt); color:var(--gold-dk); }
#b-tob-t-23:checked ~ * .c-ck-m[for="b-tob-t-20"] { background:var(--gold-bg); border-color:var(--gold-lt); color:var(--gold-dk); }
#b-tob-t-24:checked ~ * .c-ck-m[for="b-tob-t-20"] { background:var(--gold-bg); border-color:var(--gold-lt); color:var(--gold-dk); }
#b-tob-t-26:checked ~ * .c-ck-m[for="b-tob-t-25"] { background:var(--gold-bg); border-color:var(--gold-lt); color:var(--gold-dk); }
#b-tob-t-27:checked ~ * .c-ck-m[for="b-tob-t-25"] { background:var(--gold-bg); border-color:var(--gold-lt); color:var(--gold-dk); }
#b-tob-t-28:checked ~ * .c-ck-m[for="b-tob-t-25"] { background:var(--gold-bg); border-color:var(--gold-lt); color:var(--gold-dk); }
#b-tob-t-29:checked ~ * .c-ck-m[for="b-tob-t-25"] { background:var(--gold-bg); border-color:var(--gold-lt); color:var(--gold-dk); }
#b-tob-t-31:checked ~ * .c-ck-m[for="b-tob-t-30"] { background:var(--gold-bg); border-color:var(--gold-lt); color:var(--gold-dk); }
#b-tob-t-32:checked ~ * .c-ck-m[for="b-tob-t-30"] { background:var(--gold-bg); border-color:var(--gold-lt); color:var(--gold-dk); }
#b-tob-t-33:checked ~ * .c-ck-m[for="b-tob-t-30"] { background:var(--gold-bg); border-color:var(--gold-lt); color:var(--gold-dk); }
#b-tob-t-34:checked ~ * .c-ck-m[for="b-tob-t-30"] { background:var(--gold-bg); border-color:var(--gold-lt); color:var(--gold-dk); }
#b-tob-t-36:checked ~ * .c-ck-m[for="b-tob-t-35"] { background:var(--gold-bg); border-color:var(--gold-lt); color:var(--gold-dk); }
#b-tob-t-37:checked ~ * .c-ck-m[for="b-tob-t-35"] { background:var(--gold-bg); border-color:var(--gold-lt); color:var(--gold-dk); }
#b-tob-t-38:checked ~ * .c-ck-m[for="b-tob-t-35"] { background:var(--gold-bg); border-color:var(--gold-lt); color:var(--gold-dk); }
#b-tob-t-39:checked ~ * .c-ck-m[for="b-tob-t-35"] { background:var(--gold-bg); border-color:var(--gold-lt); color:var(--gold-dk); }
#b-tob-t-41:checked ~ * .c-ck-m[for="b-tob-t-40"] { background:var(--gold-bg); border-color:var(--gold-lt); color:var(--gold-dk); }
#b-tob-t-42:checked ~ * .c-ck-m[for="b-tob-t-40"] { background:var(--gold-bg); border-color:var(--gold-lt); color:var(--gold-dk); }
#b-tob-t-43:checked ~ * .c-ck-m[for="b-tob-t-40"] { background:var(--gold-bg); border-color:var(--gold-lt); color:var(--gold-dk); }
#b-tob-t-44:checked ~ * .c-ck-m[for="b-tob-t-40"] { background:var(--gold-bg); border-color:var(--gold-lt); color:var(--gold-dk); }
#b-tob-t-46:checked ~ * .c-ck-m[for="b-tob-t-45"] { background:var(--gold-bg); border-color:var(--gold-lt); color:var(--gold-dk); }
#b-tob-t-47:checked ~ * .c-ck-m[for="b-tob-t-45"] { background:var(--gold-bg); border-color:var(--gold-lt); color:var(--gold-dk); }
#b-tob-t-48:checked ~ * .c-ck-m[for="b-tob-t-45"] { background:var(--gold-bg); border-color:var(--gold-lt); color:var(--gold-dk); }
#b-tob-t-49:checked ~ * .c-ck-m[for="b-tob-t-45"] { background:var(--gold-bg); border-color:var(--gold-lt); color:var(--gold-dk); }
#b-tob-t-51:checked ~ * .c-ck-m[for="b-tob-t-50"] { background:var(--gold-bg); border-color:var(--gold-lt); color:var(--gold-dk); }
#b-tob-t-52:checked ~ * .c-ck-m[for="b-tob-t-50"] { background:var(--gold-bg); border-color:var(--gold-lt); color:var(--gold-dk); }
#b-tob-t-53:checked ~ * .c-ck-m[for="b-tob-t-50"] { background:var(--gold-bg); border-color:var(--gold-lt); color:var(--gold-dk); }
#b-tob-t-54:checked ~ * .c-ck-m[for="b-tob-t-50"] { background:var(--gold-bg); border-color:var(--gold-lt); color:var(--gold-dk); }
#b-tob-t-56:checked ~ * .c-ck-m[for="b-tob-t-55"] { background:var(--gold-bg); border-color:var(--gold-lt); color:var(--gold-dk); }
#b-tob-t-57:checked ~ * .c-ck-m[for="b-tob-t-55"] { background:var(--gold-bg); border-color:var(--gold-lt); color:var(--gold-dk); }
#b-tob-t-58:checked ~ * .c-ck-m[for="b-tob-t-55"] { background:var(--gold-bg); border-color:var(--gold-lt); color:var(--gold-dk); }
#b-tob-t-59:checked ~ * .c-ck-m[for="b-tob-t-55"] { background:var(--gold-bg); border-color:var(--gold-lt); color:var(--gold-dk); }
#b-tob-m-am:checked ~ * label[for="b-tob-m-am"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); }
#b-tob-m-am:focus-visible ~ * label[for="b-tob-m-am"] { outline:2px solid var(--gold); outline-offset:2px; }
#b-tob-m-am:checked ~ * .c-tp-om::after { content:"AM"; }
#b-tob-m-pm:checked ~ * label[for="b-tob-m-pm"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); }
#b-tob-m-pm:focus-visible ~ * label[for="b-tob-m-pm"] { outline:2px solid var(--gold); outline-offset:2px; }
#b-tob-m-pm:checked ~ * .c-tp-om::after { content:"PM"; }
  /* The clock's face is spans the component's :checked rules write into, so
     it cannot simply be replaced with a word — it is covered instead, and the
     hint drawn in its place. */
  .b-clock .c-pf-t[data-empty] .c-pf-face { display:none; }
  .b-clock .c-pf-t[data-empty]::before { content:'Choose a time'; flex:1;
           min-width:0; font-size:var(--text-md); color:var(--ph); }

  /* ── the clock in two turns ──
     One dial carrying twelve hours on the outside and twelve five-minute
     marks inside it is two questions asked at once, and the inner ring is
     the smaller target of the two. So it asks one at a time: hours, and the
     moment one is chosen the same dial turns over to minutes. The readout
     above is the way back — tap the hour to change the hour, the minutes to
     return to them, which is the pattern every phone clock uses.

     Nothing is removed, only hidden: all sixty minute radios and all twelve
     hour radios are still in the group, so a keyboard arrows through the
     whole range whichever face is showing. */
  .b-clock[data-step="hour"] .c-ck-m,
  .b-clock[data-step="hour"] .c-ck-fr { display:none; }
  .b-clock[data-step="min"] .c-ck-h { display:none; }
  /* THE MINUTES MOVE OUT TO THE RING THE HOURS LEFT. They are drawn at
     radius 88 because they used to share the face with the hours at 134 —
     one face at a time, that leaves the numbers huddled in the middle of a
     320px circle with a wide dead band round them. `--r` is set inline per
     label, so this has to shout; the component's own responsive rules
     override it the same way. */
  /* A SMALLER FACE. 320px was sized for two rings — hours outside, minutes
     inside. Showing one at a time leaves a lot of circle around a dozen
     numbers, so the whole dial comes in: the ring keeps the same margin from
     the edge it always had (chip half-width plus four), and the marks stay
     55px apart, which is well clear of a fingertip. `--r` is inline per
     label and the component's own small-screen rules shout, so these do too. */
  .b-clock .c-ck-face { width:264px; height:264px; }
  .b-clock .c-ck-h { --r:106px !important; }
  .b-clock[data-step="min"] .c-ck-m { --r:106px !important; }
  .b-clock .c-ck-face { --hand-r:106px; }
  /* A HAND, because the marks are every fifth minute and the answer is any
     of sixty. Pick 13 and the nearest label lights up — 10 — which says the
     wrong number unless something points at where 13 actually is. */
  .b-clock .c-ck-face::before { content:''; position:absolute; left:50%;
           top:50%; width:2px; margin-left:-1px;
           background:var(--gold-solid); border-radius:2px; opacity:.85;
           transform-origin:50% 0;
           transform:rotate(calc(var(--hand,0deg) + 180deg));
           height:var(--hand-r,106px);
           pointer-events:none; }
  .b-clock:not([data-hand]) .c-ck-face::before { display:none; }

  .b-clock .c-ck-face { transition:transform .2s ease, opacity .2s ease; }
  .b-clock[data-turn] .c-ck-face { transform:translateX(-18px); opacity:0; }
  @media (prefers-reduced-motion:reduce) {
    .b-clock .c-ck-face { transition:none; }
    .b-clock[data-turn] .c-ck-face { transform:none; opacity:1; }
  }
  /* The readout is the tab bar, so it has to look like one. */
  .b-clock .c-tp-out .c-tp-oh, .b-clock .c-tp-out .c-tp-ot { cursor:pointer;
           border-radius:8px; padding:0 4px; }
  .b-clock .c-tp-out .c-tp-oh:focus-visible,
  .b-clock .c-tp-out .c-tp-ot:focus-visible { outline:2px solid var(--gold);
           outline-offset:2px; }
  .b-clock[data-step="hour"] .c-tp-out .c-tp-ot,
  .b-clock[data-step="min"] .c-tp-out .c-tp-oh { opacity:.45; }