/*
 * academic-quant.css for taggmaiwald.com
 * Purpose: educational components for quantitative academic pages, including
 * accounting, finance, economics, statistics, operations, mathematics,
 * Lean Six Sigma, decision analysis, and worked examples.
 *
 * This stylesheet is original site CSS. It does not import or copy framework CSS.
 * It is inspired by the following openly licensed design references:
 *
 * - Tufte CSS, MIT License, for academic figures, sidenotes, and restrained article layouts.
 *   Source: https://edwardtufte.github.io/tufte-css/
 * - Charts.css, MIT License, for CSS-based chart thinking using semantic tables.
 *   Source: https://chartscss.org/
 * - KaTeX, MIT License, and MathJax, Apache License 2.0, for readable displayed equations.
 *   Sources: https://katex.org/ and https://www.mathjax.org/
 * - Pico CSS, MIT License, for class-light semantic table, form, and button restraint.
 *   Source: https://picocss.com/
 * - Bulma, MIT License, for simple responsive layout and card concepts.
 *   Source: https://bulma.io/
 * - Open Props, MIT License, for token-based custom property discipline.
 *   Source: https://open-props.style/
 *
 * Recommended load order:
 * <link rel="stylesheet" href="/taggm.css">
 * <link rel="stylesheet" href="/academic-quant.css">
 */

:root {
    --tm-aq-bg: #ffffff;
    --tm-aq-surface: #f9faf7;
    --tm-aq-surface-2: #f3f5ef;
    --tm-aq-border: #c9c2a3;
    --tm-aq-border-strong: #8e8356;
    --tm-aq-text: #1f241f;
    --tm-aq-muted: #5d6259;
    --tm-aq-gold: #b08d2f;
    --tm-aq-jade: #286b55;
    --tm-aq-cinnabar: #9b3a2f;
    --tm-aq-blue: #315f86;
    --tm-aq-green: #2f6f4e;
    --tm-aq-red: #9b3a2f;
    --tm-aq-yellow: #f4e8ba;
    --tm-aq-shadow: 0 0.35rem 1.2rem rgba(34, 30, 18, 0.08);
    --tm-aq-radius: 0.45rem;
    --tm-aq-radius-sm: 0.25rem;
    --tm-aq-gap: 1rem;
    --tm-aq-gap-sm: 0.5rem;
    --tm-aq-measure: 78ch;
    --tm-aq-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
    --tm-aq-sans: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/*
 * Dark-mode tokens are opt-in instead of automatic.
 * The site pages are presently light themed. Using prefers-color-scheme here made
 * academic components dark inside otherwise light pages when the browser/OS was
 * set to dark mode. Add class="tm-aq-dark" to a container when a page is
 * intentionally designed for this palette.
 */
.tm-aq-dark {
    --tm-aq-bg: #171a17;
    --tm-aq-surface: #20251f;
    --tm-aq-surface-2: #272d26;
    --tm-aq-border: #5f5a3e;
    --tm-aq-border-strong: #a59451;
    --tm-aq-text: #f0f1ec;
    --tm-aq-muted: #c2c5b9;
    --tm-aq-yellow: #4b421f;
    --tm-aq-shadow: none;
}

.tm-edu,
.tm-accounting {
    color: var(--tm-aq-text);
}

.tm-edu * {
    box-sizing: border-box;
}

.tm-edu :where(table, figure, aside, section, article, details, .tm-card) {
    max-width: 100%;
}

.tm-edu :where(code, kbd, samp, pre) {
    font-family: var(--tm-aq-mono);
}

.tm-edu :where(figcaption, caption, .tm-caption, .tm-note) {
    color: var(--tm-aq-muted);
    font-size: 0.92rem;
    line-height: 1.45;
}

.tm-edu :where(table) {
    border-collapse: collapse;
    width: 100%;
    margin: 1rem 0;
}

.tm-edu :where(th, td) {
    border: 1px solid var(--tm-aq-border);
    padding: 0.5rem 0.65rem;
    vertical-align: top;
}

.tm-edu :where(th) {
    background: var(--tm-aq-surface-2);
    font-weight: 700;
    text-align: left;
}

.tm-edu :where(tfoot th, tfoot td, .tm-total-row th, .tm-total-row td) {
    border-top: 2px solid var(--tm-aq-border-strong);
    font-weight: 700;
}

.tm-edu .tm-num,
.tm-edu .tm-money,
.tm-edu .tm-percent,
.tm-edu .tm-qty {
    font-variant-numeric: tabular-nums;
    text-align: right;
    white-space: nowrap;
}

.tm-card,
.tm-variance-card,
.tm-decision-summary,
.tm-learning-map,
.tm-cost-flow,
.tm-show-work,
.tm-equation,
.tm-process-flow,
.tm-financial-statement,
.tm-journal-entry,
.tm-t-account {
    background: var(--tm-aq-bg);
    color: var(--tm-aq-text);
    border: 1px solid var(--tm-aq-border);
    border-radius: var(--tm-aq-radius);
    box-shadow: var(--tm-aq-shadow);
    margin: 1rem 0;
}

.tm-card-header,
.tm-component-title,
.tm-statement-title,
.tm-account-title,
.tm-journal-title,
.tm-flow-title {
    background: var(--tm-aq-surface-2);
    border-bottom: 1px solid var(--tm-aq-border);
    border-radius: var(--tm-aq-radius) var(--tm-aq-radius) 0 0;
    font-weight: 700;
    padding: 0.55rem 0.75rem;
}

.tm-card-body,
.tm-component-body,
.tm-flow-body {
    padding: 0.75rem;
}

.tm-callout {
    background: var(--tm-aq-surface);
    border-left: 0.35rem solid var(--tm-aq-gold);
    border-radius: var(--tm-aq-radius-sm);
    margin: 1rem 0;
    padding: 0.75rem 0.9rem;
}

.tm-callout[data-kind="risk"],
.tm-callout.tm-risk {
    border-left-color: var(--tm-aq-cinnabar);
}

.tm-callout[data-kind="decision"],
.tm-callout.tm-decision {
    border-left-color: var(--tm-aq-jade);
}

.tm-callout[data-kind="math"],
.tm-callout.tm-math {
    border-left-color: var(--tm-aq-blue);
}

.tm-grid-2,
.tm-grid-3,
.tm-grid-auto {
    display: grid;
    gap: var(--tm-aq-gap);
}

.tm-grid-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.tm-grid-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.tm-grid-auto {
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.tm-t-account {
    color: var(--tm-aq-text);
    max-width: 100%;
    min-width: 0;
    overflow: hidden;
}

.tm-account-title,
.tm-t-account > .tm-title,
.tm-t-account .t-title {
    text-align: center;
}

.tm-account-cols,
.tm-t-account > .tm-cols,
.tm-t-account .t-cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.tm-account-cols > div,
.tm-t-account > .tm-cols > div,
.tm-t-account .t-cols > div {
    min-height: 3rem;
    overflow-wrap: anywhere;
    padding: 0.45rem 0.6rem;
}

.tm-account-cols > div:first-child,
.tm-t-account > .tm-cols > div:first-child,
.tm-t-account .t-cols > div:first-child {
    border-right: 1px solid var(--tm-aq-border);
}

.tm-account-side-title {
    color: var(--tm-aq-muted);
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.tm-ledger-line {
    display: grid;
    gap: 0.35rem;
    grid-template-columns: minmax(0, 1fr) auto;
    padding: 0.2rem 0;
}

.tm-journal-entry {
    overflow-x: auto;
}

.tm-journal-entry table {
    margin: 0;
}

.tm-journal-entry .tm-account-name {
    min-width: 15rem;
}

.tm-journal-entry .tm-credit-account {
    padding-left: 2rem;
}

.tm-journal-entry .tm-explanation td {
    color: var(--tm-aq-muted);
    font-size: 0.92rem;
    font-style: italic;
}

.tm-financial-statement {
    padding: 0;
}

.tm-statement-subtitle {
    color: var(--tm-aq-muted);
    font-size: 0.95rem;
    font-weight: 400;
    margin-top: 0.15rem;
}

.tm-financial-statement table {
    margin: 0;
}

.tm-statement-section th,
.tm-statement-section td {
    background: var(--tm-aq-surface);
    font-weight: 700;
}

.tm-subtotal td,
.tm-subtotal th {
    border-top: 1.5px solid var(--tm-aq-border-strong);
    font-weight: 700;
}

.tm-grand-total td,
.tm-grand-total th {
    border-top: 3px double var(--tm-aq-border-strong);
    font-weight: 800;
}

.tm-equation,
.tm-show-work {
    background: var(--tm-aq-surface);
    padding: 0.9rem 1rem;
}

.tm-equation {
    font-size: 1.05rem;
    overflow-x: auto;
}

.tm-equation .katex-display,
.tm-equation .MathJax_Display,
.tm-equation mjx-container[display="true"] {
    margin: 0.5rem 0;
    overflow-x: auto;
    overflow-y: hidden;
}

.tm-formula-line {
    align-items: baseline;
    display: grid;
    gap: 0.5rem;
    grid-template-columns: minmax(9rem, 1fr) auto minmax(8rem, 1fr);
    margin: 0.35rem 0;
}

.tm-formula-name {
    font-weight: 700;
}

.tm-formula-value {
    font-family: var(--tm-aq-mono);
    font-variant-numeric: tabular-nums;
}

.tm-show-work ol,
.tm-show-work ul {
    margin-bottom: 0;
}

.tm-work-step {
    border-left: 0.25rem solid var(--tm-aq-border);
    margin: 0.65rem 0;
    padding-left: 0.75rem;
}

.tm-work-step[data-step]::before {
    color: var(--tm-aq-muted);
    content: "Step " attr(data-step) ": ";
    font-weight: 700;
}

.tm-decision-summary {
    border-top: 0.25rem solid var(--tm-aq-jade);
}

.tm-decision-summary dl {
    display: grid;
    gap: 0.35rem 0.75rem;
    grid-template-columns: max-content minmax(0, 1fr);
    margin: 0;
    padding: 0.75rem;
}

.tm-decision-summary dt {
    color: var(--tm-aq-muted);
    font-weight: 700;
}

.tm-decision-summary dd {
    margin: 0;
}

.tm-variance-card {
    border-top: 0.25rem solid var(--tm-aq-blue);
    padding: 0.75rem;
}

.tm-variance-value {
    font-size: 1.35rem;
    font-variant-numeric: tabular-nums;
    font-weight: 800;
}

.tm-favorable,
.tm-good,
.tm-pass {
    color: var(--tm-aq-green);
}

.tm-unfavorable,
.tm-warning,
.tm-fail {
    color: var(--tm-aq-red);
}

.tm-neutral {
    color: var(--tm-aq-muted);
}

.tm-learning-map {
    padding: 0.75rem;
}

.tm-learning-map ol,
.tm-learning-map ul {
    margin-bottom: 0;
}

.tm-lo {
    background: var(--tm-aq-surface);
    border: 1px solid var(--tm-aq-border);
    border-radius: var(--tm-aq-radius-sm);
    margin: 0.5rem 0;
    padding: 0.55rem 0.7rem;
}

.tm-lo-code {
    color: var(--tm-aq-jade);
    font-family: var(--tm-aq-mono);
    font-weight: 800;
}

.tm-process-flow {
    overflow-x: auto;
    padding: 0.75rem;
}

.tm-process-steps {
    align-items: stretch;
    display: flex;
    gap: 0.65rem;
    min-width: min-content;
}

.tm-process-step {
    background: var(--tm-aq-surface);
    border: 1px solid var(--tm-aq-border);
    border-radius: var(--tm-aq-radius-sm);
    min-width: 10rem;
    padding: 0.65rem 0.75rem;
    position: relative;
}

.tm-process-step:not(:last-child)::after {
    color: var(--tm-aq-border-strong);
    content: "→";
    font-weight: 800;
    position: absolute;
    right: -0.55rem;
    top: 50%;
    transform: translate(50%, -50%);
}

.tm-process-step[data-kind="decision"] {
    border-color: var(--tm-aq-jade);
}

.tm-process-step[data-kind="risk"] {
    border-color: var(--tm-aq-cinnabar);
}

.tm-cost-flow {
    overflow-x: auto;
}

.tm-cost-flow-grid {
    display: grid;
    gap: var(--tm-aq-gap);
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    padding: 0.75rem;
}

.tm-cost-bucket {
    background: var(--tm-aq-surface);
    border: 1px solid var(--tm-aq-border);
    border-radius: var(--tm-aq-radius-sm);
    padding: 0.65rem 0.75rem;
}

.tm-cost-bucket-title {
    font-weight: 800;
    margin-bottom: 0.35rem;
}

.tm-mini-chart {
    --tm-chart-max: 100;
    display: grid;
    gap: 0.4rem;
    margin: 1rem 0;
}

.tm-bar-row {
    align-items: center;
    display: grid;
    gap: 0.5rem;
    grid-template-columns: minmax(7rem, 1fr) minmax(10rem, 3fr) auto;
}

.tm-bar-label,
.tm-bar-value {
    font-variant-numeric: tabular-nums;
}

.tm-bar-track {
    background: var(--tm-aq-surface-2);
    border: 1px solid var(--tm-aq-border);
    border-radius: 999px;
    min-height: 0.85rem;
    overflow: hidden;
}

.tm-bar-fill {
    background: var(--tm-aq-jade);
    display: block;
    height: 100%;
    min-height: 0.85rem;
    width: calc((var(--tm-value, 0) / var(--tm-chart-max, 100)) * 100%);
}

.tm-bar-fill[data-kind="cost"],
.tm-bar-fill.tm-cost {
    background: var(--tm-aq-cinnabar);
}

.tm-bar-fill[data-kind="revenue"],
.tm-bar-fill.tm-revenue {
    background: var(--tm-aq-jade);
}

.tm-bar-fill[data-kind="margin"],
.tm-bar-fill.tm-margin {
    background: var(--tm-aq-gold);
}

.tm-spark-table {
    font-size: 0.92rem;
}

.tm-spark-table td[data-bar] {
    background-image: linear-gradient(
        90deg,
        color-mix(in srgb, var(--tm-aq-jade) 30%, transparent) 0,
        color-mix(in srgb, var(--tm-aq-jade) 30%, transparent) var(--tm-value, 0%),
        transparent var(--tm-value, 0%)
    );
    font-variant-numeric: tabular-nums;
}

.tm-ratio,
.tm-kpi {
    background: var(--tm-aq-surface);
    border: 1px solid var(--tm-aq-border);
    border-radius: var(--tm-aq-radius-sm);
    padding: 0.65rem 0.75rem;
}

.tm-kpi-label {
    color: var(--tm-aq-muted);
    font-size: 0.86rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.tm-kpi-value {
    font-size: 1.45rem;
    font-variant-numeric: tabular-nums;
    font-weight: 800;
}

.tm-sidenote,
.tm-margin-note {
    background: var(--tm-aq-surface);
    border-left: 0.25rem solid var(--tm-aq-border-strong);
    color: var(--tm-aq-muted);
    font-size: 0.9rem;
    line-height: 1.45;
    margin: 0.75rem 0;
    padding: 0.55rem 0.75rem;
}

.tm-figure {
    margin: 1.25rem 0;
}

.tm-figure img,
.tm-figure svg,
.tm-figure canvas {
    border: 1px solid var(--tm-aq-border);
    border-radius: var(--tm-aq-radius-sm);
    max-width: 100%;
}

.tm-tag {
    background: var(--tm-aq-surface-2);
    border: 1px solid var(--tm-aq-border);
    border-radius: 999px;
    color: var(--tm-aq-muted);
    display: inline-block;
    font-size: 0.82rem;
    font-weight: 700;
    line-height: 1;
    padding: 0.25rem 0.45rem;
}

.tm-pill-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin: 0.5rem 0;
}

.tm-input-row {
    display: grid;
    gap: 0.5rem;
    grid-template-columns: minmax(10rem, 1fr) minmax(12rem, 2fr);
    margin: 0.65rem 0;
}

.tm-input-row label {
    font-weight: 700;
}

.tm-edu input,
.tm-edu select,
.tm-edu textarea,
.tm-edu button,
.tm-edu .tm-button {
    border: 1px solid var(--tm-aq-border);
    border-radius: var(--tm-aq-radius-sm);
    font: inherit;
    padding: 0.45rem 0.6rem;
}

.tm-edu button,
.tm-edu .tm-button {
    background: var(--tm-aq-surface-2);
    color: var(--tm-aq-text);
    cursor: pointer;
    font-weight: 700;
    text-decoration: none;
}

.tm-edu button:hover,
.tm-edu .tm-button:hover {
    border-color: var(--tm-aq-border-strong);
}

.tm-scroll-table {
    overflow-x: auto;
}

.tm-scroll-table table {
    min-width: 42rem;
}

.tm-screen-reader-text {
    height: 1px;
    left: -9999px;
    overflow: hidden;
    position: absolute;
    top: auto;
    width: 1px;
}

@media (min-width: 980px) {
    .tm-article-with-notes {
        display: grid;
        gap: 2rem;
        grid-template-columns: minmax(0, var(--tm-aq-measure)) minmax(14rem, 20rem);
    }

    .tm-article-notes {
        border-left: 1px solid var(--tm-aq-border);
        padding-left: 1rem;
    }
}

@media (max-width: 760px) {
    .tm-grid-2,
    .tm-grid-3,
    .tm-formula-line,
    .tm-input-row {
        grid-template-columns: 1fr;
    }

    .tm-process-steps {
        flex-direction: column;
    }

    .tm-process-step:not(:last-child)::after {
        bottom: -0.85rem;
        content: "↓";
        left: 50%;
        right: auto;
        top: auto;
        transform: translateX(-50%);
    }

    .tm-bar-row {
        grid-template-columns: 1fr;
    }
}

@media print {
    .tm-card,
    .tm-variance-card,
    .tm-decision-summary,
    .tm-learning-map,
    .tm-cost-flow,
    .tm-show-work,
    .tm-equation,
    .tm-process-flow,
    .tm-financial-statement,
    .tm-journal-entry,
    .tm-t-account {
        box-shadow: none;
        break-inside: avoid;
    }

    .tm-edu button,
    .tm-edu .tm-button {
        display: none;
    }

    .tm-scroll-table,
    .tm-process-flow,
    .tm-cost-flow,
    .tm-equation {
        overflow: visible;
    }
}


/* Activity-Based Costing visual components
   --------------------------------------------------------- */
.abc-svg-card {
    overflow-x: auto;
}

.abc-svg-card svg {
    display: block;
    height: auto;
    min-width: 720px;
    width: 100%;
}

.abc-svg-note {
    color: var(--color-text-muted, var(--tm-aq-muted));
    font-size: 0.9rem;
    margin-top: 0.5rem;
}

.abc-hierarchy {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.abc-hierarchy h3,
.abc-flow h3 {
    margin-top: 0;
    text-align: center;
}

.abc-level-card {
    background: var(--color-surface, var(--tm-aq-bg));
    border: 1px solid var(--color-border, var(--tm-aq-border));
    border-radius: var(--radius-large, var(--tm-aq-radius));
    box-shadow: var(--shadow-subtle, var(--tm-aq-shadow));
    padding: 1rem 1.25rem;
}

.abc-level-card h4 {
    margin: 0 0 0.35rem 0;
}

.abc-level-card p {
    margin: 0.25rem 0;
}

.abc-level-facility {
    border-left: 0.5rem solid var(--color-rosewood, var(--tm-aq-cinnabar));
}

.abc-level-product {
    border-left: 0.5rem solid var(--color-olive, var(--tm-aq-green));
}

.abc-level-batch {
    border-left: 0.5rem solid var(--color-indigo, var(--tm-aq-blue));
}

.abc-level-unit {
    border-left: 0.5rem solid var(--color-accent, var(--tm-aq-jade));
}

.abc-flow {
    overflow-x: auto;
}

.abc-flow-stage {
    align-items: center;
    display: grid;
    gap: 0.75rem;
    grid-template-columns: 12rem repeat(3, minmax(11rem, 1fr));
    min-width: 760px;
}

.abc-flow-label {
    color: var(--color-text-muted, var(--tm-aq-muted));
    font-weight: 700;
}

.abc-flow-node {
    background: var(--color-surface, var(--tm-aq-bg));
    border: 1px solid var(--color-border-strong, var(--tm-aq-border-strong));
    border-radius: var(--radius-large, var(--tm-aq-radius));
    box-shadow: var(--shadow-subtle, var(--tm-aq-shadow));
    padding: 0.75rem 1rem;
    text-align: center;
}

.abc-flow-node h4 {
    margin: 0 0 0.25rem 0;
}

.abc-flow-node p {
    margin: 0.15rem 0;
}

.abc-flow-overhead {
    background: var(--color-surface-muted, var(--tm-aq-surface-2));
    grid-column: 2 / 5;
}

.abc-flow-pool {
    background: var(--color-accent-soft, var(--tm-aq-surface-2));
    border-color: var(--color-accent, var(--tm-aq-jade));
}

.abc-flow-driver {
    background: var(--color-manila-bg, var(--tm-aq-yellow));
    border-color: var(--color-manila-border, var(--tm-aq-gold));
}

.abc-flow-product {
    background: var(--color-powder-bg, var(--tm-aq-surface));
    border-color: var(--color-powder-border, var(--tm-aq-blue));
}

.abc-flow-arrows {
    height: 4.5rem;
    min-width: 760px;
    position: relative;
}

.abc-flow-arrows svg {
    display: block;
    height: 100%;
    width: 100%;
}

@media (max-width: 760px) {
    .abc-flow-stage,
    .abc-flow-arrows {
        min-width: 700px;
    }
}