/* Course articles — long-form on the console sheet. Loads after /home.css and uses its
   tokens, .panel, .sheet and .colophon; this file adds only what an article needs.
   The body is a two-column ledger on the homepage's column lines: section labels sit
   in column A, prose in column B. */

/* language: EN / MN spans live side by side in the markup */
[data-lang="en"] .mn { display: none !important; }
[data-lang="mn"] .en { display: none !important; }
[data-lang="mn"] .bi:has(.mn[data-pending]) .en { display: revert !important; }
[data-lang="mn"] .mn[data-pending] { display: none !important; }

html {
    scroll-behavior: smooth;
}

.readbar {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 90;
    width: 0;
    height: 2px;
    background: var(--ink);
}

.langpill {
    position: fixed;
    top: 62px;
    right: 18px;
    z-index: 80;
    display: flex;
    border: 1px solid var(--line);
    background: var(--bg);
}

.langpill button {
    padding: 8px 14px;
    border: 0;
    background: transparent;
    font: inherit;
    font-size: calc((11px) * var(--text-scale, 1));
    letter-spacing: .15em;
    color: var(--dim);
    cursor: pointer;
}

.langpill button.on {
    background: var(--ink);
    color: var(--bg);
}

/* the emphasised words of a title read as a terminal selection */
h1 em,
h2 em {
    font-style: normal;
    padding: 0 .18em;
    background: var(--ink);
    color: var(--bg);
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
}

.byline b {
    font-weight: 400;
    color: var(--ink);
}

/* Media sheets: the video lecture, then the deck */
.media-frame {
    border-right: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}

.media-frame iframe {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    border: 0;
    background: var(--bg);
}

.sheet-row.cap {
    font-size: calc((13px) * var(--text-scale, 1));
    color: var(--dim);
}

.log-head a {
    text-decoration: none;
}

.log-head a:hover {
    color: var(--ink);
}

.video-slot {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 18px;
    aspect-ratio: 16 / 9;
    border-right: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}

.video-slot .bar {
    width: min(320px, 60%);
    margin-top: 0;
}

.video-slot .bar-fill {
    width: 38%;
}

/* Ledger */
article {
    display: grid;
    grid-template-columns: var(--col-a) minmax(0, 1fr);
    margin-top: 56px;
    padding-bottom: 36px;
    border: 1px solid var(--line);
    border-top: 0;
    background: linear-gradient(var(--line), var(--line)) var(--col-a) 0 / 1px 100% no-repeat;
    animation: cell-in .7s cubic-bezier(.2, .7, .2, 1) .42s both;
}

article > * {
    grid-column: 2;
    margin: 0 24px;
}

/* a section opens a new row: label in column A, heading in column B */
article > .secnum,
article > .secnum + h2 {
    margin: 36px 0 0;
    padding: 20px 24px 0;
    border-top: 1px solid var(--line);
}

article > .secnum {
    grid-column: 1;
    font-size: calc((11.5px) * var(--text-scale, 1));
    letter-spacing: .08em;
    line-height: 1.7;
    text-transform: uppercase;
    color: var(--ink);
}

article h2 {
    font-size: calc((21px) * var(--text-scale, 1));
    font-weight: 400;
    letter-spacing: -.01em;
    line-height: 1.3;
    color: var(--ink);
}

article h3 {
    margin-top: 34px;
    font-size: calc((12px) * var(--text-scale, 1));
    font-weight: 400;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--ink);
}

article > p,
article > ul,
article > ol {
    max-width: 70ch;
}

article p {
    margin-top: 18px;
    font-size: calc((15px) * var(--text-scale, 1));
    line-height: 1.8;
}

article strong {
    font-weight: 500;
    color: var(--ink);
}

article p a,
article li a {
    color: var(--ink);
    text-underline-offset: 4px;
}

article code {
    padding: 1px 6px;
    border: 1px solid var(--line);
    font-family: inherit;
    font-size: .9em;
    white-space: nowrap;
    color: var(--ink);
}

blockquote {
    margin-top: 28px;
    margin-bottom: 10px;
    padding: 2px 0 2px 22px;
    border-left: 1px solid var(--ink);
    font-size: calc((18px) * var(--text-scale, 1));
    line-height: 1.55;
    color: var(--ink);
}

ul.plain,
ol.steps {
    margin-top: 18px;
    list-style: none;
}

ul.plain li,
ol.steps li {
    position: relative;
    padding: 7px 0 7px 30px;
    font-size: calc((15px) * var(--text-scale, 1));
    line-height: 1.75;
}

ul.plain li::before {
    content: "";
    position: absolute;
    left: 2px;
    top: 17px;
    width: 7px;
    height: 7px;
    border: 1px solid var(--dim);
}

ol.steps {
    counter-reset: stp;
}

ol.steps li {
    counter-increment: stp;
}

ol.steps li::before {
    content: counter(stp, decimal-leading-zero);
    position: absolute;
    left: 0;
    top: 9px;
    font-size: calc((11.5px) * var(--text-scale, 1));
    letter-spacing: .08em;
    color: var(--ink);
}

/* Thesis: a sheet inside the ledger — the claim, then numbered outcomes on the column lines */
.thesis {
    grid-column: 1 / -1;
    margin: 0;
    background: var(--bg);
    border-bottom: 1px solid var(--line);
}

.thesis + .secnum,
.thesis + .secnum + h2 {
    margin-top: 0;
    border-top: 0;
}

.thesis .t-kick {
    padding: 16px 24px;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    font-size: calc((12px) * var(--text-scale, 1));
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--ink);
}

.thesis .t-line {
    padding: 22px 24px 24px;
    border-bottom: 1px solid var(--line);
    font-size: calc((16px) * var(--text-scale, 1));
    line-height: 1.7;
    color: var(--ink);
}

.thesis ol {
    list-style: none;
    counter-reset: learn;
}

.thesis li {
    counter-increment: learn;
    display: grid;
    grid-template-columns: var(--col-a) minmax(0, 1fr);
    border-bottom: 1px solid var(--line);
}

.thesis li:last-child {
    border-bottom: 0;
}

.thesis li::before {
    content: counter(learn, decimal-leading-zero);
    padding: 16px 24px;
    border-right: 1px solid var(--line);
    font-size: calc((11.5px) * var(--text-scale, 1));
    letter-spacing: .08em;
    line-height: 1.9;
    color: var(--ink);
}

.thesis li > * {
    padding: 16px 24px 18px;
}

/* Callouts: a hairline box; the kind is a glyph in a tag, never a colour */
.callout {
    margin-top: 26px;
    margin-bottom: 8px;
    padding: 18px 22px 20px;
    border: 1px solid var(--line);
}

.callout .c-title {
    display: flex;
    align-items: baseline;
    gap: 12px;
    font-size: calc((12px) * var(--text-scale, 1));
    letter-spacing: .1em;
    line-height: 1.7;
    text-transform: uppercase;
    color: var(--ink);
}

.callout .c-title::before {
    content: "i";
    flex: none;
    width: 19px;
    border: 1px solid var(--dim);
    font-size: calc((11px) * var(--text-scale, 1));
    line-height: 17px;
    text-align: center;
}

.callout.green .c-title::before { content: "+"; }
.callout.amber .c-title::before { content: "!"; }

.callout.red .c-title::before {
    content: "\00d7";
    border-color: var(--ink);
    background: var(--ink);
    color: var(--bg);
}

.callout.amber {
    border-left-color: var(--dim);
}

.callout.red {
    border-left-color: var(--ink);
}

.callout p {
    margin-top: 10px;
}

.callout ul.plain {
    margin-top: 8px;
}

/* Tables */
.table-scroll {
    margin-top: 26px;
    margin-bottom: 8px;
    overflow-x: auto;
    border: 1px solid var(--line);
}

table {
    width: 100%;
    min-width: 520px;
    border-collapse: collapse;
    font-size: calc((14px) * var(--text-scale, 1));
}

th {
    padding: 12px 18px;
    border-bottom: 1px solid var(--line);
    font-size: calc((11px) * var(--text-scale, 1));
    font-weight: 400;
    letter-spacing: .1em;
    text-align: left;
    text-transform: uppercase;
    color: var(--dim);
}

td {
    padding: 13px 18px;
    border-bottom: 1px solid var(--line);
    vertical-align: top;
}

td + td,
th + th {
    border-left: 1px solid var(--line);
}

tr:last-child td {
    border-bottom: 0;
}

td.num {
    white-space: nowrap;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
}

tr.hl td {
    background: var(--palette-surface-rgba-255-255-255-05);
    color: var(--ink);
}

td em {
    font-style: normal;
    color: var(--dim);
}

.tbl-note {
    font-size: calc((11px) * var(--text-scale, 1));
    letter-spacing: .06em;
    color: var(--dim);
}

/* Module 4 — discovery questions and the capture card */
.qblock {
    margin-top: 24px;
    margin-bottom: 8px;
    border: 1px solid var(--line);
}

.qblock .q {
    display: flex;
    gap: 14px;
    padding: 15px 20px 16px;
    border-bottom: 1px solid var(--line);
}

.qblock .q:last-child {
    border-bottom: 0;
}

.qblock .q::before {
    content: "?";
    flex: none;
    width: 19px;
    height: 19px;
    margin-top: 3px;
    border: 1px solid var(--dim);
    font-size: calc((11px) * var(--text-scale, 1));
    line-height: 17px;
    text-align: center;
    color: var(--ink);
}

.qblock .q em {
    font-style: normal;
    font-size: calc((15px) * var(--text-scale, 1));
    color: var(--ink);
}

.qblock .q .note {
    display: block;
    margin-top: 4px;
    font-size: calc((13.5px) * var(--text-scale, 1));
    color: var(--dim);
}

.capture-card {
    margin-top: 30px;
    border: 1px solid var(--dim);
}

.capture-card .cc-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 14px;
    padding: 16px 22px;
    border-bottom: 1px solid var(--dim);
}

.capture-card .cc-kick,
.capture-card .cc-row .f {
    font-size: calc((11.5px) * var(--text-scale, 1));
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--ink);
}

.capture-card .cc-row .f {
    color: var(--dim);
}

.capture-card .cc-blank {
    flex: 1;
    min-width: 160px;
    height: 1.4em;
    border-bottom: 1px solid var(--dim);
}

.capture-card .cc-row {
    display: grid;
    grid-template-columns: minmax(160px, 220px) 1fr;
    align-items: end;
    gap: 18px;
    padding: 15px 22px;
    border-bottom: 1px solid var(--line);
}

.capture-card .cc-row:last-child {
    border-bottom: 0;
}

.capture-card .cc-row .blank {
    height: 1.5em;
    border-bottom: 1px solid var(--ghost);
}

/* Foot */
.colophon a {
    margin-left: 0;
}

.colophon .next {
    text-align: right;
}

.colophon .next b {
    font-weight: 400;
    color: var(--ink);
}

@media (max-width: 720px) {
    .langpill {
        top: 58px;
        right: 12px;
    }

    article {
        display: block;
        margin-top: 36px;
        padding-bottom: 24px;
        background: none;
    }

    article > * {
        margin-left: 16px;
        margin-right: 16px;
    }

    article > .secnum {
        margin-top: 30px;
        padding: 16px 16px 0;
    }

    article > .secnum + h2 {
        margin-top: 6px;
        padding: 0 16px;
        border-top: 0;
    }

    article h2 {
        font-size: calc((19px) * var(--text-scale, 1));
    }

    blockquote {
        font-size: calc((16.5px) * var(--text-scale, 1));
    }

    .thesis .t-kick,
    .thesis .t-line {
        padding: 14px 16px;
    }

    .thesis .t-line {
        font-size: calc((15px) * var(--text-scale, 1));
    }

    .thesis li {
        grid-template-columns: 44px minmax(0, 1fr);
    }

    .thesis li::before,
    .thesis li > * {
        padding: 14px 16px;
    }

    .thesis li::before {
        padding-right: 0;
        border-right: 0;
    }

    .thesis li > * {
        padding-left: 0;
    }

    .deck-only {
        display: none;
    }

    .callout {
        padding: 16px;
    }

    .capture-card .cc-row {
        grid-template-columns: 1fr;
        gap: 6px;
    }

    .capture-card .cc-row .blank {
        height: 2.4em;
    }

    .colophon {
        flex-direction: column;
    }

    .colophon a {
        margin-left: 0;
    }
}