/* Blog article layout — layered on top of theme.css, never replacing it. */

:root {
    /* Optimizer palette: the site's pastels (c3, c2, c4, c5) + darkened companions
       for strokes, lines and legend text. Yellow (c1) is skipped: too faint for data. */
    --opt-0: 175, 211, 240;   /* Normalized Muon — blue   */
    --opt-1: 242, 198, 223;   /* Decoupled Muon  — pink   */
    --opt-2: 218, 204, 239;   /* Coupled SGD     — purple */
    --opt-3: 201, 228, 223;   /* Coupled Adam    — green  */
    --opt-0-strong: #4a7fb5;
    --opt-1-strong: #b55a92;
    --opt-2-strong: #7c5fa8;
    --opt-3-strong: #3f8a7a;
    --post-ink: #565B60;
    --post-muted: #9a9ea3;
    --post-hairline: #e8e6e3;
    --post-pad: 50px; /* article side padding; folds break out of it to span the paper */
}

/* ---- header ---- */

.post-header {
    padding-left: 50px;
    padding-right: 50px;
    padding-bottom: 24px;
}

.post-header h1 {
    letter-spacing: 1mm;
    font-size: 21px;
    text-wrap: balance;
}

/* Home link: lifted out of the header flow so the title leads the page, and
   rendered the same way at every width — plain left-aligned text, never a button.
   Up to the wide breakpoint it sits in the grey strip above the paper (the card
   gains a top margin to open that strip up); past it, the gutter is wide enough
   to hold it beside the card instead. */
.container {
    margin-top: 52px; /* opens the strip the home link sits in */
}

.post-home {
    position: absolute; /* relative to the A4 card, which is the positioned ancestor */
    top: -34px;
    left: 50px; /* aligns with the header's content edge */
    z-index: 30;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-family: 'Lato', sans-serif;
    font-size: 13px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #9a9ea3;
    transition: color 0.15s ease;
}

.post-home:hover {
    color: var(--post-ink);
    text-decoration: none;
}

.post-home-icon {
    width: 15px;
    height: 15px;
    /* the cap-height sits a touch above the baseline of uppercase Lato */
    margin-top: -1px;
    flex: none;
}

/* Once the gutter can hold the label (A4 card + ~190px a side) it moves out
   beside the card, pinned to the left of the viewport and fixed, so it stays
   reachable the whole way down a long post. */
@media only screen and (min-width: 1180px) {
    .container { margin-top: 0; }

    .post-home {
        position: fixed;
        top: 30px;
        left: 44px;
    }
}

.post-byline {
    font-family: 'Lato', sans-serif;
    font-size: 12px;
    letter-spacing: 0.08em;
    color: #9a9ea3;
}

/* Provenance credit between the title and byline, sharing the title's width. */
.post-note {
    max-width: 80%;
    margin: 5px auto 0;
    font-family: 'Lato', sans-serif;
    font-size: 11px;
    line-height: 1.5;
    letter-spacing: 0.04em;
    color: #b0b4b8;
    text-wrap: balance;
}

.post-note em {
    font-style: italic;
    color: #9a9ea3;
}

.post-note a {
    text-decoration: underline;
    text-decoration-color: #d8dade;
    text-underline-offset: 3px;
}

.post-note a:hover {
    text-decoration-color: #706F6F;
}

/* ---- article ---- */

.post {
    display: block;
    padding: 28px var(--post-pad) 44px;
    font-size: 15.5px;
    line-height: 1.7;
    color: var(--post-ink);
}

/* Text measures ~65ch; figures break out to the full card. */
.post p,
.post h2,
.post ol.references {
    max-width: 620px;
    margin-left: auto;
    margin-right: auto;
}

.post p {
    margin-top: 0;
    margin-bottom: 1.1em;
    text-align: justify;
}

.post h2 {
    margin-top: 2.2em;
    margin-bottom: 0.9em;
    letter-spacing: normal; /* undo theme.css's resume-style 0.289rem tracking */
}

/* ---- math ---- */

.post .katex { font-size: 1.05em; }

.post .katex-display {
    max-width: 620px;
    margin: 1.4em auto;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 2px 0;
    /* the A4 card is shrink-to-fit (position:absolute); without this, wide content's
       intrinsic width inflates the whole card on narrow screens instead of scrolling */
    contain: inline-size;
}

/* ---- citations & references ---- */

.post a.cite {
    color: inherit;
    font-size: 0.85em;
    font-family: 'Lato', sans-serif;
}

.post a.cite:hover { text-decoration: underline; }

.post .cite-group { color: var(--post-muted); }

.post ol.references {
    padding-left: 1.4em;
    font-size: 0.88em;
    color: var(--post-muted);
}

.post ol.references li {
    margin-bottom: 0.5em;
    text-align: left;
}

.post ol.references li:target { color: var(--post-ink); }

/* ---- figures ---- */

.post figure.breakout {
    margin: 2em 0;
    width: 100%;
}

.post figcaption {
    max-width: 620px;
    margin: 0.8em auto 0;
    font-size: 0.85em;
    line-height: 1.55;
    color: var(--post-muted);
    text-align: justify;
}

.post .fig-label {
    font-family: 'Lato', sans-serif;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--post-ink);
}

.post .fig-mount svg {
    display: block;
    width: 100%;
    height: auto;
}

/* ---- figure control panel (built by figure.js via Fig.panel) ---- */

.fig-ctl-panel {
    position: relative;
    max-width: 640px;
    margin: 10px auto 0;
    padding: 13px 16px;
    background: transparent; /* same ground as the page; proximity alone groups it */
    display: flex;
    flex-direction: column;
    gap: 9px;
    font-family: 'Lato', sans-serif;
    font-size: 11.5px;
    letter-spacing: 0.04em;
    color: var(--post-ink);
    user-select: none;
}

.ctl-row {
    display: flex;
    align-items: center;
    gap: 6px 12px;
    flex-wrap: wrap;
}


/* aligned small-caps label column */
.ctl-label {
    flex: 0 0 100px;
    text-align: right;
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--post-muted);
}

.ctl-content {
    flex: 1;
    min-width: 0;
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 10px;
}

.fig-ctl-panel button {
    font: inherit;
    letter-spacing: inherit;
    color: inherit;
    background: none;
    border: 1px solid var(--post-hairline);
    border-radius: 999px;
    padding: 3px 12px;
    cursor: pointer;
}

.fig-ctl-panel button:hover { border-color: var(--post-muted); }

.fig-ctl-panel .seg { display: inline-flex; gap: 4px; }

.fig-ctl-panel .seg button.active {
    background: #efece7;
    border-color: #efece7;
    font-weight: 500;
}

.fig-ctl-panel .reset {
    position: absolute;
    bottom: 12px;
    right: 12px;
    font-size: 10.5px;
    padding: 2px 10px;
    color: var(--post-muted);
}

.fig-ctl-panel .reset:hover { color: var(--post-ink); }

/* ---- slim discrete slider with per-step ticks ---- */

.ctl-slider { display: inline-flex; align-items: center; gap: 10px; }

.fig-ctl-panel .play {
    font-size: 9px;
    padding: 3px 9px;
    line-height: 1.4;
    border: 0;
}

.fig-ctl-panel .play:is(:hover, :active) {
    box-shadow: 0 0 0 1px var(--post-muted);
}

.slider-track {
    position: relative;
    display: inline-flex;
    align-items: center;
    width: 200px;
    height: 22px;
}

.fig-ctl-panel input[type="range"] {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 3px;
    margin: 0;
    border-radius: 2px;
    background: #ddd9d3;
    cursor: pointer;
}

.fig-ctl-panel input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #706F6F;
    border: 0;
    cursor: pointer;
}

.fig-ctl-panel input[type="range"]::-moz-range-thumb {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #706F6F;
    border: 0;
    cursor: pointer;
}

.fig-ctl-panel input[type="range"]:is(:hover, :active)::-webkit-slider-thumb {
    box-shadow: 0 0 0 2px #FBFAF7, 0 0 0 3px #b9b6b1;
}

.fig-ctl-panel input[type="range"]:is(:hover, :active)::-moz-range-thumb {
    box-shadow: 0 0 0 2px #FBFAF7, 0 0 0 3px #b9b6b1;
}

.slider-ticks {
    position: absolute;
    left: 6px;
    right: 6px;
    top: calc(50% + 6px);
    display: flex;
    justify-content: space-between;
    pointer-events: none;
}

.slider-ticks .tick {
    width: 1px;
    height: 4px;
    background: #ccc8c2;
}

.slider-value {
    min-width: 44px;
    font-variant-numeric: tabular-nums;
}

/* ---- legend chips (inside the panel's Optimizers row) ---- */

.fig-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 2px 6px;
}

.fig-legend .chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-family: 'Lato', sans-serif;
    font-size: 11.5px;
    border: none !important;
    background: none;
    color: var(--post-ink);
    cursor: pointer;
    padding: 2px 4px;
    white-space: nowrap;
    transition: background-color 150ms ease, opacity 150ms ease;
}

.fig-legend .chip .dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: inline-block;
    transition: transform 150ms ease;
}

.fig-legend .chip:is(:hover, :focus-visible) .dot {
    transform: scale(1.15);
}

.fig-legend .chip .r-val {
    color: var(--post-muted);
    font-variant-numeric: tabular-nums;
}

.fig-legend .chip .r-val:empty { display: none; }

.fig-legend .chip.off { opacity: 0.35; }
.fig-legend .chip.off:is(:hover, :focus-visible) { opacity: 0.65; }
.fig-legend .chip.off .dot { background: transparent !important; box-shadow: inset 0 0 0 1.5px var(--post-muted); }

@media (prefers-reduced-motion: reduce) {
    .fig-legend .chip,
    .fig-legend .chip .dot { transition: none; }
}

.fig-tooltip {
    position: absolute;
    pointer-events: none;
    background: #ffffff;
    border: 1px solid var(--post-hairline);
    border-radius: 6px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
    padding: 6px 9px;
    font-family: 'Lato', sans-serif;
    font-size: 11px;
    line-height: 1.5;
    color: var(--post-ink);
    z-index: 10;
    white-space: nowrap;
}

/* ---- results table ---- */

.post .table-scroll {
    overflow-x: auto;
    contain: inline-size; /* see .katex-display note */
}

.post table.results {
    border-collapse: collapse;
    margin: 0 auto;
    font-family: 'Lato', sans-serif;
    font-size: 12px;
    font-variant-numeric: tabular-nums;
    color: var(--post-ink);
}

.post table.results th {
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-size: 10.5px;
    color: var(--post-muted);
    padding: 6px 12px;
    border-bottom: 1px solid var(--post-muted);
    text-align: left;
    white-space: nowrap;
}

.post table.results td {
    padding: 5px 12px;
    white-space: nowrap;
}

.post table.results tr.block-start td { border-top: 1px solid var(--post-hairline); }

/* ---- mobile (mirrors theme.css breakpoint) ---- */

@media only screen and (max-width: 210mm) {
    :root { --post-pad: 25px; }
    .post-header { padding-left: 25px; padding-right: 25px; }
    .post-home { left: 25px; } /* follows the narrower header padding */
    .post { padding: 20px var(--post-pad) 32px; font-size: 14px; }
    .post-header h1 { font-size: 18px; }

    /* control panel: labels stack above their row content */
    .ctl-label { flex-basis: 100%; text-align: left; }
    .fig-ctl-panel { padding: 11px 12px; }
}

/* ---- print ---- */

@media print {
    /* Controls are dead ink on paper — all but the legend, which the plot still
       needs to be readable. Its row keeps the aligned label; the panel collapses
       around it, and a panel without a legend goes away entirely. */
    .fig-ctl-panel { padding: 2px 16px 0; }
    .fig-ctl-panel:not(:has(.fig-legend)) { display: none; }
    .fig-ctl-panel .ctl-row:not(:has(.fig-legend)) { display: none; }
    .fig-ctl-panel .reset { display: none; }
    .fig-legend .chip { cursor: default; }
    .fig-legend .chip .dot { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    .post-home { display: none; }
}