/* ============================================================================
   Educated Opinions — foundation theme
   Loaded AFTER Pico, BEFORE the component rules in style.css.

   Everything here is token overrides plus a thin layer of element styling.
   No template changes are required for this file to take effect.
   ========================================================================= */

/* ---------------------------------------------------------------- fonts
   Self-hosted (open-licensed): Public Sans (public domain / USWDS),
   Newsreader + IBM Plex Mono (SIL OFL). Served from our own box — no Google
   Fonts, no external request, no visitor data leaving the site. */
@font-face { font-family:"Public Sans"; font-style:normal; font-weight:400; font-display:swap; src:url("/static/css/fonts/public-sans-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family:"Public Sans"; font-style:normal; font-weight:500; font-display:swap; src:url("/static/css/fonts/public-sans-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family:"Public Sans"; font-style:normal; font-weight:600; font-display:swap; src:url("/static/css/fonts/public-sans-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family:"Public Sans"; font-style:normal; font-weight:700; font-display:swap; src:url("/static/css/fonts/public-sans-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family:"Newsreader"; font-style:normal; font-weight:400; font-display:swap; src:url("/static/css/fonts/newsreader-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family:"Newsreader"; font-style:normal; font-weight:500; font-display:swap; src:url("/static/css/fonts/newsreader-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family:"Newsreader"; font-style:normal; font-weight:600; font-display:swap; src:url("/static/css/fonts/newsreader-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family:"Newsreader"; font-style:italic; font-weight:400; font-display:swap; src:url("/static/css/fonts/newsreader-latin-400-italic.woff2") format("woff2"); }
@font-face { font-family:"IBM Plex Mono"; font-style:normal; font-weight:400; font-display:swap; src:url("/static/css/fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family:"IBM Plex Mono"; font-style:normal; font-weight:500; font-display:swap; src:url("/static/css/fonts/ibm-plex-mono-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family:"IBM Plex Mono"; font-style:normal; font-weight:600; font-display:swap; src:url("/static/css/fonts/ibm-plex-mono-latin-600-normal.woff2") format("woff2"); }

/* ---------------------------------------------------------------- palette */

:root {
    --eo-ink: #1a1a17;
    --eo-ink-2: #55514a;
    --eo-muted: #7a756c;
    --eo-faint: #b4aea2;

    --eo-paper: #f7f5f0;
    --eo-card: #fdfcfa;
    --eo-sunk: #efece4;

    --eo-rule: #d9d5cb;
    --eo-hairline: #eae6dd;

    --eo-accent: #9c4a2f;
    --eo-accent-hover: #7d3823;
    --eo-navy: #2b3a5c;
    --eo-navy-hover: #1f2b45;

    /* verdict scale — the dot carries the colour, so no rating shouts */
    --eo-high: #5d7a45;
    --eo-high-bg: #eef1e9;
    --eo-high-edge: #c2ccb4;
    --eo-mid: #a8801f;
    --eo-mid-bg: #f3ecdf;
    --eo-mid-edge: #d3bf99;
    --eo-low: #a33a2a;
    --eo-low-bg: #f6e9e5;
    --eo-low-edge: #e0bfb6;

    --eo-sans: "Public Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
    --eo-serif: "Newsreader", Georgia, "Times New Roman", serif;
    --eo-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
}

/* -------------------------------------------------------- Pico overrides */

:root:not([data-theme="dark"]),
[data-theme="light"] {
    --pico-font-family: var(--eo-sans);
    --pico-font-family-sans-serif: var(--eo-sans);
    --pico-font-family-monospace: var(--eo-mono);
    --pico-font-size: 100%;
    --pico-line-height: 1.55;
    --pico-border-radius: 0;
    --pico-spacing: 1rem;
    --pico-typography-spacing-vertical: 1.1rem;
    --pico-block-spacing-vertical: 1.5rem;

    --pico-background-color: var(--eo-paper);
    --pico-color: var(--eo-ink-2);
    --pico-h1-color: var(--eo-ink);
    --pico-h2-color: var(--eo-ink);
    --pico-h3-color: var(--eo-ink);
    --pico-h4-color: var(--eo-ink);
    --pico-h5-color: var(--eo-ink);
    --pico-h6-color: var(--eo-ink);
    --pico-muted-color: var(--eo-muted);
    --pico-muted-border-color: var(--eo-rule);

    --pico-primary: var(--eo-accent);
    --pico-primary-hover: var(--eo-accent-hover);
    --pico-primary-underline: rgba(156, 74, 47, 0.4);
    --pico-primary-background: var(--eo-ink);
    --pico-primary-hover-background: var(--eo-accent);
    --pico-primary-border: var(--eo-ink);
    --pico-primary-hover-border: var(--eo-accent);
    --pico-primary-inverse: var(--eo-paper);
    --pico-primary-focus: rgba(156, 74, 47, 0.25);

    --pico-secondary: var(--eo-ink-2);
    --pico-secondary-background: var(--eo-ink-2);
    --pico-secondary-hover-background: var(--eo-ink);
    --pico-secondary-inverse: var(--eo-paper);

    --pico-card-background-color: var(--eo-card);
    --pico-card-border-color: var(--eo-rule);
    --pico-card-sectioning-background-color: var(--eo-sunk);
    --pico-card-box-shadow: none;

    --pico-form-element-background-color: var(--eo-card);
    --pico-form-element-border-color: #c9c4b8;
    --pico-form-element-color: var(--eo-ink);
    --pico-form-element-placeholder-color: var(--eo-faint);
    --pico-form-element-active-border-color: var(--eo-accent);
    --pico-form-element-focus-color: var(--eo-accent);

    --pico-table-border-color: var(--eo-hairline);
    --pico-table-row-stripped-background-color: rgba(26, 26, 23, 0.02);

    --pico-code-background-color: var(--eo-sunk);
    --pico-code-color: var(--eo-ink-2);
    --pico-blockquote-border-color: var(--eo-rule);
    --pico-mark-background-color: var(--eo-mid-bg);
    --pico-del-color: var(--eo-low);
    --pico-ins-color: var(--eo-high);
}

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

h1, h2, h3 {
    font-family: var(--eo-serif);
    font-weight: 500;
    letter-spacing: -0.015em;
    line-height: 1.2;
}

h1 { font-size: 2.4rem; margin-bottom: 0.6rem; }
h2 { font-size: 1.6rem; }
h3 { font-size: 1.25rem; }

h4, h5, h6 {
    font-family: var(--eo-sans);
    font-weight: 600;
    letter-spacing: -0.005em;
}
h4 { font-size: 1.05rem; }

/* Section eyebrows: any small-caps mono label above a block. */
.eo-eyebrow {
    display: block;
    font-family: var(--eo-mono);
    font-size: 0.66rem;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--eo-muted);
}

blockquote,
.eo-quote {
    font-family: var(--eo-serif);
    font-size: 1.3rem;
    line-height: 1.45;
    color: var(--eo-ink);
    text-wrap: pretty;
}

main.container > p,
.article-body {
    text-wrap: pretty;
}

/* ------------------------------------------------------------------- nav */

body > nav.container {
    padding-block: 0.65rem;
    border-bottom: 1px solid var(--eo-rule);
    margin-bottom: 1.6rem;
}

body > nav.container > ul:last-child a {
    padding: 0.45rem 0.7rem;
    font-size: 0.92rem;
    color: var(--eo-ink-2);
    text-decoration: none;
    border-bottom: 2px solid transparent;
}

body > nav.container > ul:last-child a:hover {
    color: var(--eo-ink);
    background: var(--eo-sunk);
}

/* Mark the current section server-side with aria-current="page". */
body > nav.container > ul:last-child a[aria-current="page"] {
    color: var(--eo-ink);
    border-bottom-color: var(--eo-navy);
}

/* ----------------------------------------------------- masthead: canton */
/* Markup for .brand lives in base.html — see HANDOFF.md step 3. */

.brand-canton {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 1px;
    width: 2.9rem;
    flex: none;
    padding: 0.25rem 0.3rem;
    background: var(--eo-navy);
}

.brand-canton span {
    font-size: 0.44rem;
    line-height: 1;
    text-align: center;
    color: var(--eo-paper);
}

.brand-lockup {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.brand-tagline {
    font-family: var(--eo-mono);
    font-size: 0.56rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--eo-muted);
}

/* A stripe band used as a section divider. Two forms:
   <div class="eo-stripes"></div>                      full-width band
   <div class="eo-stripe-rule"><span>Label</span></div> band split by a label */

.eo-stripes,
.eo-stripe-rule > i {
    display: block;
    height: 2rem;
    background: repeating-linear-gradient(180deg,
        var(--eo-accent) 0 4px, var(--eo-paper) 4px 8px);
}

.eo-stripe-rule {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    margin: 1.75rem 0;
}

.eo-stripe-rule > i { flex: 1; }

.eo-stripe-rule > span {
    font-family: var(--eo-mono);
    font-size: 0.66rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--eo-muted);
    white-space: nowrap;
}

.brand-seal { color: var(--eo-ink); }

.brand-word {
    font-family: var(--eo-serif);
    font-variant: normal;
    letter-spacing: -0.01em;
    font-weight: 500;
    font-size: 1.2rem;
    color: var(--eo-ink);
    white-space: nowrap;
}

.brand:hover .brand-seal { transform: none; }

footer.container {
    margin-top: 3rem;
    color: var(--eo-muted);
}

/* --------------------------------------------------------------- buttons */

button,
[role="button"],
[type="submit"],
[type="button"],
[type="reset"],
input[type="submit"] {
    font-family: var(--eo-sans);
    font-weight: 500;
    font-size: 0.92rem;
    line-height: 1.4;
    padding: 0.62rem 1.05rem;
    margin-bottom: 0;
    border-radius: 0;
    white-space: nowrap;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

button.outline,
[role="button"].outline,
button.secondary.outline {
    background: transparent;
    color: var(--eo-ink);
    border-color: var(--eo-ink);
}

button.outline:hover,
[role="button"].outline:hover {
    background: var(--eo-sunk);
    color: var(--eo-ink);
    border-color: var(--eo-ink);
}

button:disabled,
[role="button"][aria-disabled="true"] {
    background: var(--eo-sunk);
    border-color: var(--eo-hairline);
    color: var(--eo-faint);
    opacity: 1;
    cursor: not-allowed;
}

/* ------------------------------------------------------------------ forms */

label {
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--eo-ink);
    margin-bottom: 0.35rem;
}

input, select, textarea {
    border-radius: 0;
    font-size: 0.95rem;
}

input:focus, select:focus, textarea:focus {
    outline: 2px solid var(--eo-accent);
    outline-offset: -2px;
    box-shadow: none;
}

/* Help text under a control: <small> immediately after the input. */
input + small,
select + small,
textarea + small {
    display: block;
    margin-top: 0.3rem;
    font-family: var(--eo-mono);
    font-size: 0.72rem;
    color: var(--eo-muted);
}

fieldset {
    border: 1px solid var(--eo-rule);
    padding: 0.9rem 1rem;
    margin-bottom: 0.6rem;
    background: var(--eo-card);
}

fieldset label { font-weight: 500; }

/* ----------------------------------------------------------------- tables */

table {
    font-size: 0.94rem;
    border: 1px solid var(--eo-rule);
}

thead th {
    font-family: var(--eo-mono);
    font-size: 0.66rem;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--eo-muted);
    background: var(--eo-paper);
    border-bottom: 1px solid var(--eo-rule);
    padding: 0.55rem 0.85rem;
    white-space: nowrap;
}

tbody td {
    padding: 0.7rem 0.85rem;
    background: var(--eo-card);
    border-bottom: 1px solid var(--eo-hairline);
    vertical-align: top;
}

/* Pico paints an opaque background on cells, so row hover must be set on the
   cells themselves or it is painted behind them and never seen. */
tbody tr:hover td { background: #f4f1e9; }
tbody tr:last-child td { border-bottom: 0; }

/* Digits line up down a column and compare at a glance. */
th.th-num,
td.td-num,
td.td-date {
    font-family: var(--eo-mono);
    font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------------------ cards */

article {
    border: 1px solid var(--eo-rule);
    border-radius: 0;
    box-shadow: none;
    padding: 1.1rem 1.25rem;
}

article > header {
    border-radius: 0;
    padding: 0.75rem 1.25rem;
    margin: -1.1rem -1.25rem 1rem;
    border-bottom: 1px solid var(--eo-rule);
}

article > header h3 {
    margin: 0;
    font-family: var(--eo-sans);
    font-size: 1rem;
    font-weight: 600;
}

/* -------------------------------------------- verdict badges & rating bar */

.rating-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
    padding: 0.25em 0.6em;
    border-radius: 0;
    border: 1px solid var(--eo-rule);
    background: var(--eo-card);
    font-family: var(--eo-mono);
    font-size: 0.68rem;
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--eo-ink);
    margin-left: 0.4em;
}

.rating-badge::before {
    content: "";
    width: 0.5em;
    height: 0.5em;
    border-radius: 50%;
    background: currentColor;
}

.rating-badge.rating-high { background: var(--eo-high-bg); border-color: var(--eo-high-edge); color: #3f5430; }
.rating-badge.rating-mid  { background: var(--eo-mid-bg);  border-color: var(--eo-mid-edge);  color: #6d5312; }
.rating-badge.rating-low  { background: var(--eo-low-bg);  border-color: var(--eo-low-edge);  color: #7d2a1d; }

.rating-bar {
    height: 0.5rem;
    border-radius: 0;
    background: var(--eo-hairline);
}

.rating-fill { border-radius: 0; }
.rating-fill.rating-high { background: var(--eo-high); }
.rating-fill.rating-mid  { background: var(--eo-mid); }
.rating-fill.rating-low  { background: var(--eo-low); }

/* ------------------------------------------------- loop chips (home/money) */

.loop-chip {
    border-radius: 0;
    padding: 0.55em 1em;
    background: var(--eo-ink);
    color: var(--eo-paper);
    font-family: var(--eo-sans);
    font-weight: 500;
    font-size: 0.95rem;
}

a.loop-chip:hover,
a.loop-chip:focus {
    background: var(--eo-accent);
    color: var(--eo-paper);
    transform: none;
    box-shadow: none;
}

.loop-chip-claim { background: var(--eo-accent); }
.loop-arrow { color: var(--eo-faint); }
.loop-verdict { font-style: normal; font-family: var(--eo-mono); font-size: 0.75rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--eo-muted); }

/* --------------------------------------------------- home stats + entries */

.stats-strip {
    border-radius: 0;
    background: transparent;
    border-top: 1px solid var(--eo-rule);
    border-bottom: 1px solid var(--eo-rule);
    padding: 1.25rem 0;
}

.stat { text-align: left; }

.stat-num {
    font-family: var(--eo-serif);
    font-size: 1.9rem;
    font-weight: 500;
    letter-spacing: -0.01em;
    color: var(--eo-ink);
}

.stat-label {
    font-family: var(--eo-mono);
    font-size: 0.64rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--eo-muted);
}

.entry-paths .entry-card { border-radius: 0; background: var(--eo-card); }

/* -------------------------------------------------------------- tab bar */

.tab-bar { gap: 0; border-bottom: 1px solid var(--eo-rule); }

.tab-btn {
    border-radius: 0;
    padding: 0.55rem 1rem;
    font-size: 0.92rem;
    color: var(--eo-ink-2);
    background: transparent;
    border: 0;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
}

.tab-btn--active {
    background: transparent;
    border: 0;
    border-bottom: 2px solid var(--eo-accent);
    color: var(--eo-ink);
    font-weight: 600;
}

.tab-btn:hover:not(.tab-btn--active) { color: var(--eo-ink); }

/* ------------------------------------------------------------- timeline */

.tl-bar { background: var(--eo-ink); border-radius: 0; }
.tl-bar-value { font-family: var(--eo-mono); color: var(--eo-ink); }
.tl-tick { font-family: var(--eo-mono); color: var(--eo-muted); }
.tl-step-label { font-family: var(--eo-mono); font-size: 0.66rem; letter-spacing: 0.04em; }
.tl-step-done .tl-step-dot, .tl-step-done::before { background: var(--eo-high); }
.tl-step-done .tl-step-dot { box-shadow: 0 0 0 1px var(--eo-high); }
.tl-step-current .tl-step-dot { background: var(--eo-accent); box-shadow: 0 0 0 3px rgba(156, 74, 47, 0.25); }
.tl-step-failed .tl-step-dot { background: var(--eo-low); box-shadow: 0 0 0 3px rgba(163, 58, 42, 0.25); }
.tl-step-failed .tl-step-label { color: var(--eo-low); }

/* --------------------------------------------------- measure three-column */

.measure-col { border-top: 2px solid var(--eo-ink); }
.measure-col > h2 { font-family: var(--eo-sans); font-size: 1rem; font-weight: 600; letter-spacing: 0; }
.measure-col-meta { font-family: var(--eo-mono); font-size: 0.74rem; }
.measure-empty { font-style: normal; color: var(--eo-muted); }

/* ------------------------------------------------------------ pagination */

nav.pagination { border-top: 1px solid var(--eo-hairline); padding-top: 0.5rem; }
nav.pagination a { font-size: 0.88rem; }
.page-jump small { font-family: var(--eo-mono); font-size: 0.75rem; color: var(--eo-muted); }

/* ------------------------------------------------------------ misc bits */

.timestamp { border-radius: 0; background: var(--eo-ink); color: var(--eo-paper); font-family: var(--eo-mono); }
.pol-photo { border-radius: 0; border-color: var(--eo-rule); }
.back-link { font-family: var(--eo-mono); font-size: 0.78rem; letter-spacing: 0.04em; }
abbr.acronym { text-decoration-color: var(--eo-faint); }
hr { border: 0; border-top: 1px solid var(--eo-rule); margin: 1.6rem 0; }