/* ==========================================================================
   Blog article design: Standings.

   Loaded after blog.css and aero.css, and written against the markup those
   pages already use, so all of the posts pick it up from one link rather
   than being rewritten one at a time.

   What it changes, and why, measured against the template it replaces:

     measure      84 characters at 17.3px, down to about 66. Long lines with
                  a loose line height is the pairing that loses the reader
                  mid-line.
     boxes        a white card holding six more white boxes, each padded and
                  bordered. Separation now comes from rules and spacing.
     contents     a 406px block that pushed the first heading to 909px. Now
                  a compact strip.
     markers      numbered gradient circles borrowed from the lesson pages,
                  where they meant "day". Removed.
     tables       measurement results were ASCII inside dark code blocks, so
                  data looked exactly like source. Now typeset, with rank
                  encoding the loser rather than colour alone.

   Losing is never carried by colour on its own anywhere below: rank,
   hatching, a hollow square and words in full contrast all say it too, so a
   grayscale screenshot or a colourblind reader loses nothing.
   ========================================================================== */

:root {
    --stc-ink: #12212b;
    --stc-body: #26333d;
    --stc-soft: #5b6a76;
    --stc-rule: #d7e0e6;
    --stc-hair: #eef3f6;
    --stc-brand: #1a5f7a;
    --stc-teal: #0e7370;
    --stc-accent: #57c5b6;
    --stc-win: #0d6e58;
}

/* ------------------------------------------------------------ surface --- */

/* The approved mockup was one white sheet running from under the navigation
   to the end of the article. The live template is not: the title sits in a
   separate band with no background of its own, so the dark page showed
   through it while only the body below turned white.

   That band is why the page read as darker than the design, and it carried a
   real defect with it. modern.css sets the article title to var(--on-dark),
   correctly, because it was written for a dark band. This file then overrode
   it with the design's near-black ink, which on the dark page came out at
   1.14:1 against its own background. WCAG asks 3:1 for large text. The title
   was effectively invisible on all 27 articles, and the subtitle and byline
   sat at 3.35:1 where 4.5:1 is the floor.

   Painting the whole section instead of just the body fixes both at once:
   the sheet matches the mockup, and the ink the design specifies is back on
   the white it was chosen for, at 16.43:1.

   The 27 articles are built two different ways and the nesting is inverted
   between them, which is a trap worth naming because a selector that looks
   right reads as working on half the site:

     11 newer   section.blog-container  >  div.blog-content
     16 older   section.blog-content    >  div.blog-container

   So .blog-container .blog-content matches only the newer set, and every
   surface rule written that way silently did nothing on the older sixteen
   while their typography rules, which are not scoped that way, applied
   normally. Matching on the element as well as the class picks out the
   outer section in both layouts, and the inner column in both.

   Full bleed, as the mockup was. blog.css caps the section at 900px, which
   would leave the sheet floating as a panel on the dark page. */
section.blog-container,
section.blog-content {
    max-width: none;
    background: #fff;
    color: var(--stc-body);
    padding: 0 20px 8px;
}

section.blog-container > .blog-content,
section.blog-content > .blog-container {
    max-width: 44rem;
    margin: 0 auto;
    padding: 30px 22px 40px;
    background: #fff;
    border-radius: 0;
    box-shadow: none;
    font-size: 1.0625rem;
    line-height: 1.62;
    color: var(--stc-body);
}

/* The header is a scene host on 11 of the articles. A canvas is a child, so
   it paints over the sheet rather than behind it, and the aero vignette
   fades to the page background that is no longer there. Both are switched
   off here rather than in the markup, so the article template keeps working
   unchanged and the scenes stay on every other page of the site. */
.blog-container .blog-header > canvas[data-scene],
.blog-container .blog-header.scene-host::after,
.blog-container .blog-header.scene-host::before,
section.blog-content > canvas[data-scene],
section.blog-content.scene-host::after,
section.blog-content.scene-host::before {
    display: none;
}

/* ------------------------------- components written for the dark theme --- */

/* modern.css gives the older articles a dark surface and light text on it.
   Everything below is one of those, repainted for the sheet. Each was found
   by listing every rule inside an article that sets light text or a dark
   panel, rather than by looking at a page and spotting what stood out. */

.blog-content h4,
.blog-content .highlight-box h4,
.blog-content .series-nav h4 {
    color: var(--stc-ink);
}

.blog-content .highlight-box,
.blog-content .key-takeaway {
    color: var(--stc-body);
}

.blog-content .series-nav,
.blog-content .formula-box,
.blog-content .hypothesis-box,
.blog-content .math-block,
.blog-content .progress-tracker {
    background: #f6f8fa;
    border: 0;
    border-left: 3px solid var(--stc-accent);
    border-radius: 0;
    box-shadow: none;
    color: var(--stc-body);
}

.blog-content .series-nav a,
.blog-content .series-nav .current {
    color: var(--stc-brand);
}

.blog-content .progress-bar {
    background: #e4eaee;
}

/* The older articles' data tables were a dark panel on a dark page. On the
   sheet they become the same typeset treatment the new tables use. */
.blog-content table {
    background: none;
    color: var(--stc-ink);
    border-collapse: collapse;
}

.blog-content th {
    background: none;
    color: var(--stc-soft);
    border-bottom: 2px solid var(--stc-ink);
}

.blog-content td {
    background: none;
    color: var(--stc-ink);
    border-bottom: 1px solid var(--stc-hair);
}

/* modern.css also paints anything whose class merely contains "table", which
   catches wrappers a plain table selector misses. It set light text at
   1.27:1 against the sheet. */
.blog-content [class*="-table"],
.blog-content [class*="table-"] {
    background: none;
    color: var(--stc-ink);
}

/* The header sat in its own band with a rule under it. Keep it quiet and let
   the score block below carry the weight. blog.css also adds 40px of margin
   under it and a rule that modern.css repaints dark; both were written for
   the band this design removes, so both are cleared. */
.blog-container .blog-header {
    max-width: 44rem;
    margin: 0 auto;
    padding: 40px 22px 4px;
    text-align: left;
    border-bottom: 0;
}

/* The older layout has no header wrapper: the title sits loose at the top of
   the inner column, so it is given the same treatment there. */
section.blog-content > .blog-container > h1,
.blog-container .blog-header h1 {
    font-size: clamp(28px, 4.6vw, 42px);
    line-height: 1.1;
    letter-spacing: -0.026em;
    font-weight: 750;
    color: var(--stc-ink);
    margin: 0 0 10px;
}

.blog-container .blog-header .subtitle {
    font-size: 1.06rem;
    color: var(--stc-soft);
    margin: 0 0 14px;
    font-style: normal;
}

.blog-container .blog-meta {
    font-size: 0.86rem;
    color: var(--stc-soft);
    justify-content: flex-start;
    border-top: 0;
    padding-top: 0;
}

/* ---------------------------------------------------------- typography --- */

.blog-content h2,
.blog-content .day-header h2 {
    font-size: 1.34rem;
    letter-spacing: -0.015em;
    color: var(--stc-ink);
    font-weight: 700;
    margin: 2.2rem 0 0.6rem;
}

.blog-content h3 {
    font-size: 1.1rem;
    letter-spacing: -0.01em;
    color: var(--stc-ink);
    font-weight: 700;
    margin: 1.7rem 0 0.5rem;
}

.blog-content p {
    margin: 0 0 1.05rem;
}

/* Body copy justified to both margins, which is the house setting.
   Restated here rather than left to aero.css alone, because this file
   changes the measure and justification is only safe at this width with
   hyphenation on. Paragraphs only: headings, list items and cells are too
   short to distribute slack across, and preformatted text must never be
   justified because the alignment is the reason for showing it. */
.blog-content p,
.blog-content li {
    text-align: justify;
    -webkit-hyphens: auto;
    hyphens: auto;
    hyphenate-limit-chars: 7 3 3;
}

.blog-content pre,
.blog-content code,
.blog-content .code-block,
.blog-content .code-block p,
.blog-content table,
.blog-content th,
.blog-content td,
.blog-content .st-score,
.blog-content .st-venue {
    text-align: left;
    -webkit-hyphens: none;
    hyphens: none;
}

/* Numbers right align so the digits stack. Scoped to the typeset tables this
   design introduces: the older articles' tables are mostly words, and right
   aligning those would be a change for the worse. */
.blog-content .st-tbl th,
.blog-content .st-tbl td {
    text-align: right;
}

/* Under about 45 characters a line has too few word spaces to absorb the
   slack, so it goes ragged however well it is hyphenated. */
@media (max-width: 640px) {
    .blog-content p,
    .blog-content li {
        text-align: left;
        -webkit-hyphens: none;
        hyphens: none;
    }
}

/* ------------------------------------------------- boxes that were not --- */

/* The section wrapper was a white box on a white card: padding and a border
   that only indented. The heading and the space around it do the work. */
.blog-content .day-section {
    background: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    padding: 0;
    margin: 0 0 0.5rem;
}

.blog-content .day-header {
    display: block;
    background: none;
    border: 0;
    padding: 0;
    margin: 0;
    gap: 0;
}

/* Numbered circles meant "day" on the lesson pages. In an article they
   number nothing. */
.blog-content .day-number {
    display: none;
}

/* Contents was 406px of navigation before a word of argument. */
.blog-content .toc {
    background: none;
    border: 0;
    border-left: 2px solid var(--stc-rule);
    border-radius: 0;
    padding: 2px 0 2px 16px;
    margin: 0 0 26px;
    font-size: 0.93rem;
}

.blog-content .toc h3 {
    font-size: 0.7rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--stc-soft);
    margin: 0 0 6px;
    font-weight: 700;
}

.blog-content .toc ul {
    margin: 0;
    padding: 0;
    list-style: none;
    columns: 2;
    column-gap: 26px;
}

.blog-content .toc li {
    margin: 0.18rem 0;
    text-align: left;
    -webkit-hyphens: none;
    hyphens: none;
    break-inside: avoid;
}

@media (max-width: 620px) {
    .blog-content .toc ul { columns: 1; }
}

.blog-content .key-takeaway,
.blog-content .highlight-box {
    background: none;
    border: 0;
    border-left: 3px solid var(--stc-accent);
    border-radius: 0;
    box-shadow: none;
    padding: 12px 0 12px 16px;
    margin: 22px 0;
}

.blog-content .highlight-box {
    border-left-color: var(--stc-brand);
}

/* --------------------------------------------------- the score, on top --- */

.blog-content .st-score {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(14px, 5vw, 44px);
    flex-wrap: wrap;
    border-top: 1px solid var(--stc-rule);
    border-bottom: 1px solid var(--stc-rule);
    padding: 22px 0;
    margin: 4px 0 8px;
    text-align: center;
}

.blog-content .st-score .side { min-width: 108px; }

.blog-content .st-score .nm {
    display: block;
    font-size: 0.72rem;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--stc-soft);
    font-weight: 700;
}

.blog-content .st-score .fig {
    display: block;
    font-size: clamp(32px, 8vw, 58px);
    line-height: 1;
    font-weight: 800;
    letter-spacing: -0.03em;
    color: var(--stc-ink);
    font-variant-numeric: tabular-nums;
    margin-top: 6px;
}

.blog-content .st-score .side.win .fig { color: var(--stc-win); }

.blog-content .st-score .side.win .nm {
    color: var(--stc-win);
    text-decoration: underline;
    text-decoration-thickness: 3px;
    text-underline-offset: 4px;
}

.blog-content .st-score .vs {
    font-size: 0.72rem;
    letter-spacing: 0.14em;
    color: var(--stc-soft);
    text-transform: uppercase;
}

.blog-content .st-venue {
    text-align: center;
    font-size: 0.72rem;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--stc-soft);
    margin: 0 0 28px;
}

/* ------------------------------------------------------- the standings --- */

.blog-content .st-tbl { margin: 24px 0; }

.blog-content .st-cap {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--stc-soft);
    margin-bottom: 8px;
}

.blog-content .st-tbl table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.94rem;
    margin: 0;
}

.blog-content .st-tbl th {
    font-size: 0.64rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--stc-soft);
    font-weight: 700;
    padding: 7px 10px;
    border-bottom: 2px solid var(--stc-ink);
    background: none;
}

.blog-content .st-tbl th.l,
.blog-content .st-tbl td.l {
    text-align: left;
}

.blog-content .st-tbl td {
    padding: 9px 10px;
    border-bottom: 1px solid var(--stc-hair);
    font-family: ui-monospace, "Cascadia Mono", Consolas, "SF Mono", Menlo, monospace;
    font-variant-numeric: tabular-nums;
    color: var(--stc-ink);
    background: none;
}

.blog-content .st-tbl td.l {
    font-family: inherit;
}

/* Rank is the loser encoding that survives greyscale and colourblindness. */
.blog-content .st-tbl td.pos {
    width: 34px;
    text-align: center;
    font-weight: 800;
    color: var(--stc-soft);
}

.blog-content .st-tbl tr.p1 td.pos {
    background: var(--stc-teal);
    color: #fff;
}

.blog-content .st-tbl tr.last td {
    background: repeating-linear-gradient(45deg, #fafbfc 0 6px, #f2f4f6 6px 12px);
}

.blog-content .st-tbl tr.last td:first-child {
    box-shadow: inset 4px 0 0 0 #8b97a1;
}

/* One square per run, filled for a win and hollow for a loss, so "lost ten
   of ten" is a row of empty boxes rather than a mean. */
.blog-content .st-rec {
    display: inline-flex;
    gap: 3px;
}

.blog-content .st-rec b {
    width: 9px;
    height: 9px;
    border: 1px solid var(--stc-ink);
    border-radius: 1px;
    display: block;
}

.blog-content .st-rec b.on { background: var(--stc-ink); }

.blog-content .st-note {
    font-size: 0.84rem;
    color: var(--stc-soft);
    font-style: italic;
    text-align: left;
    font-family: inherit;
    padding: 4px 10px 12px;
}

@media (max-width: 560px) {
    .blog-content .st-tbl td,
    .blog-content .st-tbl th { padding: 7px 6px; font-size: 0.86rem; }
    .blog-container .blog-content { padding: 24px 18px 34px; }
}