/* ==========================================================================
   shop-pages.css: the shop's pages for Buyers and parents (restyle ticket 03): /chinese/thanks, /chinese/my-decks,
   /chinese/mystery (front matter extra_css: [shop-pages]) and the five setup guides under /chinese/setup/
   (templates/setup.html links it). Builds on site.css: ruled sections instead of panels, square .btn buttons,
   red numerals for steps, the visitor's device marked with a red tick.
   ========================================================================== */

.article-content { padding-bottom: 8px; }
/* The first section head sits closer to the hero than the 40 px between sections. */
.article-content .column > :first-child,
.article-content .column > section:first-of-type > h2:first-child { margin-top: 20px; }

/* --------------------------------------------------------------------------
   Message sections (thanks, My decks, Mystery): a section under its ruled h2, no panel round it
   -------------------------------------------------------------------------- */
.fs-done, .fs-about { margin: 0 0 8px; }
.fs-done > p, .fs-offer-what { color: var(--text); }

/* Download links (made by the pages' scripts as a.fs-download.btn): one full-width button per file, stacked, drawn
   as outlines (the .btn-outline look, with the arrow kept) so a list of four or eight files is not a wall of cobalt
   and the offer's solid button below stays the one main action. */
.ty-files, .md-files { margin: 12px 0 16px; }
.ty-files p, .md-files p { margin: 0 0 10px; }
.ty-files .btn, .md-files .btn {
    display: block;
    width: 100%;
    min-width: 0;
    background: transparent;
    color: var(--ink);
    text-align: left;
    overflow-wrap: anywhere;
}
.ty-files .btn:hover, .md-files .btn:hover, .ty-files .btn:focus-visible, .md-files .btn:focus-visible { background: var(--soft); color: var(--ink); border-color: var(--ink); }
.md-level { margin: 22px 0 4px; }

/* My decks: the sign-in form and its quiet "Sign out". */
.md-form { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }
.md-form .btn { align-self: stretch; }
@media (min-width: 600px) { .md-form .btn { align-self: flex-start; } }
#md-turnstile { margin-top: 4px; }
.md-status { min-height: 1.4em; margin: 6px 0 0; color: var(--muted); }
.md-status.is-error { color: var(--red); }
.md-signout, .fs-offer-no {
    margin: 12px 0 0;
    padding: 8px 0;
    border: 0;
    border-radius: 0;
    background: none;
    font: 600 15px/1.3 var(--sans);
    color: var(--red);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    cursor: pointer;
}
.md-signout:hover, .fs-offer-no:hover { text-decoration-thickness: 2px; }

/* --------------------------------------------------------------------------
   Offers (the Bundle offer after a purchase, the Mystery discount): a block under a heavier cobalt rule (the next
   section's h2 rule closes it)
   -------------------------------------------------------------------------- */
.fs-offer {
    margin: 32px 0 8px;
    padding: 16px 0 0;
    border-top: 2px solid var(--ink);
}
.fs-offer h2 { margin: 6px 0 10px; padding: 0; border: 0; font-size: clamp(24px, 4.4vw, 28px); }
.fs-offer-tag { margin: 0; font: 600 12px/1.4 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--red); }
.fs-offer-price { margin: 0 0 4px; font: 400 18px/1.4 var(--sans); color: var(--muted); }
.fs-offer-price s { color: var(--muted); }
.fs-offer-price strong { font: 700 26px/1.2 var(--serif); color: var(--ink); }
.fs-offer-clock { margin: 12px 0 2px; font: 700 34px/1.1 var(--serif); font-variant-numeric: tabular-nums; color: var(--ink); }
.fs-offer-what { margin: 6px 0 0; font-size: 16px; }
.fs-offer .btn { margin-top: 16px; }
.fs-offer-guarantee { margin: 8px 0 0; font-size: 14px; color: var(--muted); }
.fs-offer-status { min-height: 1.4em; margin: 6px 0 0; font-size: 15px; color: var(--text); }
.fs-offer-no { display: block; margin-top: 0; }

/* The Mystery discount: the percentage large, and the Level picker as a 3 × 2 grid of practice boxes (site.css
   .practice-boxes, redrawn here for the script's label > input[type=radio] + span.practice-grid-bg, which
   draws the faint 田字格 lines). */
.mo-pct { margin: 4px 0 0; font: 700 clamp(48px, 12vw, 64px)/1 var(--serif); color: var(--ink); }
.mo-levels {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    margin: 18px 0 12px;
    padding: 1.5px 0 0 1.5px;   /* the boxes overlap by their border, so the grid draws single lines */
    border: 0;
    min-width: 0;
    max-width: 420px;   /* on a laptop the six boxes would otherwise be 226 px wide each */
}
.mo-levels legend { padding: 0; margin: 0 0 8px; font: 700 15px/1.4 var(--sans); color: var(--ink); }
.mo-levels label { display: block; margin: -1.5px 0 0 -1.5px; position: relative; }
.mo-levels input { position: absolute; opacity: 0; pointer-events: none; }
.mo-levels span {
    position: relative;
    display: grid;
    place-items: center;
    aspect-ratio: 1.6;
    min-height: 56px;
    border: 1.5px solid var(--ink);
    font: 600 22px/1 var(--serif);
    color: var(--ink);
    cursor: pointer;
}
.mo-levels span:hover { background-color: var(--soft); }
.mo-levels input:checked + span { background: var(--ink); color: var(--paper); }
.mo-levels input:checked + span::after {
    content: "\2713";
    position: absolute;
    top: 4px;
    right: 8px;
    font: 700 18px/1 var(--glyph);
    color: var(--tick);
}
.mo-levels input:focus-visible + span { outline: 2px solid var(--red); outline-offset: 2px; z-index: 1; }

/* --------------------------------------------------------------------------
   Setup guides: numbered steps with red numerals, the videos, the device picker, next links
   -------------------------------------------------------------------------- */
.article-content ol { margin: 0 0 20px; padding: 0; list-style: none; counter-reset: step; border-top: 1px solid var(--soft); }
.article-content ol > li { counter-increment: step; position: relative; margin: 0; padding: 10px 0 10px 40px; border-bottom: 1px solid var(--soft); }
.article-content ol > li::before {
    content: counter(step);
    position: absolute;
    left: 2px;
    top: 9px;
    font: 700 21px/1.4 var(--serif);
    font-variant-numeric: tabular-nums;
    color: var(--red);
}
.article-content ol > li ul { margin: 8px 0 0; }
.article-content code {
    font: 400 .9em ui-monospace, Menlo, Consolas, monospace;
    background: var(--soft);
    padding: 1px 5px;
    overflow-wrap: anywhere;
}
strong.ui { font-weight: 700; color: var(--ink); white-space: nowrap; }

/* The screen recording at the top of a setup guide (the notes beside the steps are site.css .side-note). */
.setup-video { display: block; width: 100%; margin: 4px 0 32px; border: 1.5px solid var(--ink); background: #000; }
.setup-video.portrait { max-width: 320px; }

/* The device picker: one ruled row per device; the visitor's likely device (is-yours, set by the page's script)
   gets a red tick and its "Looks like your device" label. */
.device-grid { margin: 8px 0 28px; border-top: 2px solid var(--ink); }
.device-card {
    position: relative;
    display: block;
    padding: 14px 32px 14px 34px;
    border-bottom: 1px solid var(--ink);
    color: var(--text);
    text-decoration: none;
}
.device-card::after {
    content: "\2192";
    position: absolute;
    right: 4px;
    top: 50%;
    transform: translateY(-50%);
    font: 700 20px/1 var(--sans);
    color: var(--ink);
}
.device-card:hover { background: var(--soft); }
.device-card:hover .device-name { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.device-name { display: block; font: 700 20px/1.3 var(--serif); color: var(--ink); }
.device-desc { display: block; margin-top: 2px; font-size: 15px; line-height: 1.45; color: var(--muted); }
.device-yours { display: none; margin-top: 6px; font: 600 12px/1.4 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--red); }
.device-card.is-yours .device-yours { display: block; }
.device-card.is-yours::before {
    content: "\2713";
    position: absolute;
    left: 4px;
    top: 14px;
    font: 700 21px/1.3 var(--glyph);
    color: var(--red);
}

.next-links { display: flex; flex-wrap: wrap; gap: 8px 24px; margin: 36px 0 0; padding-top: 14px; border-top: 2px solid var(--ink); }
.next-links a { font-weight: 600; }