/* The Mez Ledger — shared site stylesheet.
   Every page (home, tools, company, money) includes this so the newspaper
   look and the navigation are identical across the site. */

:root {
    --ink: #17201d;
    --muted: #68716d;
    --paper: #f5f1e8;
    --card: #fffdf8;
    --line: #c9c4b8;
    --accent: #b43426;
    --green: #176a4a;
    --soft: rgba(23, 32, 29, .06);
    --serif: "Libre Caslon Text", Georgia, serif;
    --sans: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    color-scheme: light;
}

:root[data-theme="dark"] {
    --ink: #edf2ef; --muted: #aab5b0; --paper: #111714; --card: #19211d;
    --line: #3a4741; --accent: #ef7b6d; --green: #6bc79c;
    --soft: rgba(237, 242, 239, .08); color-scheme: dark;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font-family: var(--sans);
}

a { color: inherit; }

.shell { width: min(1440px, calc(100% - 32px)); margin: auto; }

/* ---------- Masthead ---------- */

.utility {
    display: flex; justify-content: space-between; gap: 16px;
    padding: 12px 0; border-bottom: 1px solid var(--ink);
    font-size: 12px; letter-spacing: .08em; text-transform: uppercase;
}

.masthead {
    display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
    padding: 22px 0 18px; border-bottom: 4px double var(--ink);
}

.brand {
    margin: 0; font: 700 clamp(34px, 6vw, 74px)/.9 var(--serif);
    letter-spacing: -.055em; text-align: center; text-decoration: none;
}

.edition { color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .12em; }
.edition:last-child { text-align: right; }

/* ---------- Navigation ---------- */

.mainnav {
    display: flex; align-items: center; justify-content: center; flex-wrap: wrap;
    gap: 2px; border-bottom: 1px solid var(--ink); position: relative;
}

.mainnav a {
    padding: 12px 18px; text-decoration: none;
    font: 600 12px var(--sans); letter-spacing: .1em; text-transform: uppercase;
    border-bottom: 3px solid transparent;
}

.mainnav a:hover { background: var(--soft); }
.mainnav a[aria-current="page"] { border-bottom-color: var(--accent); color: var(--accent); }

/* ---------- Dropdown nav groups ----------
   Keeps the masthead to a fixed set of top-level items as tools accumulate. */

.navgroup { position: relative; }

.navgroup-toggle {
    display: flex; align-items: center; gap: 6px;
    padding: 12px 18px; background: transparent; border: 0;
    border-bottom: 3px solid transparent; cursor: pointer; color: inherit;
    font: 600 12px var(--sans); letter-spacing: .1em; text-transform: uppercase;
}
.navgroup-toggle:hover { background: var(--soft); }
.navgroup-toggle[aria-current="page"] { border-bottom-color: var(--accent); color: var(--accent); }
.navgroup-toggle .caret { font-size: 9px; transition: transform .15s; }
.navgroup.is-open .navgroup-toggle .caret { transform: rotate(180deg); }

.navmenu {
    /* Right-align to the toggle: Tools is the last (rightmost) item in the
       centered nav row, so anchoring the dropdown's left edge there let it
       run 280px further right than the button and spill past the row's
       available space on anything narrower than a wide desktop, clipping
       or forcing horizontal scroll. Anchoring the right edge instead keeps
       the panel growing leftward, inside the row, at any width. */
    display: none; position: absolute; top: 100%; right: 0; left: auto;
    z-index: 30; min-width: 280px; max-width: calc(100vw - 32px); padding: 6px 0;
    background: var(--paper, #fff); border: 1px solid var(--ink);
    box-shadow: 0 12px 28px rgba(23, 32, 29, .16);
    margin-top: 2px;
}
.navgroup.is-open .navmenu { display: block; }

.navmenu a {
    display: block; padding: 9px 16px; border-bottom: 0;
    font: 500 13px var(--sans); letter-spacing: 0; text-transform: none;
}
.navmenu a:hover { background: var(--soft); }

.navmenu-heading {
    display: block; padding: 10px 16px 4px;
    font: 700 9px var(--sans); letter-spacing: .14em; text-transform: uppercase;
    color: var(--muted);
}
.navmenu-heading:not(:first-child) { margin-top: 4px; border-top: 1px solid var(--line); padding-top: 10px; }

.visually-hidden {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Account links in the utility bar — rendered on every page, so they live here
   rather than in the calculators-only stylesheet. */
.utility-account { display: flex; align-items: center; gap: 16px; }
.utility-account a { text-decoration: none; }
.utility-account a:hover { color: var(--accent); }
.utility-account .login-cta { display: inline-flex; align-items: center; min-height: 34px; padding: 0 16px; border: 1px solid var(--ink); background: var(--ink); color: var(--paper); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.utility-account .login-cta:hover { background: var(--accent); border-color: var(--accent); color: #fff; }
.theme-toggle { display: inline-flex; align-items: center; gap: 6px; border: 0; padding: 5px; background: transparent; color: var(--ink); cursor: pointer; font: inherit; }
.theme-toggle:hover { color: var(--accent); }

.navtoggle {
    display: none; margin: 10px auto; padding: 9px 14px;
    background: transparent; border: 1px solid var(--line);
    font: 600 12px var(--sans); letter-spacing: .1em; text-transform: uppercase; cursor: pointer;
}

/* ---------- Date bar ---------- */

.datebar {
    display: flex; align-items: center; justify-content: center; gap: 12px;
    padding: 13px 0; border-bottom: 1px solid var(--line);
}

.datebar a, .datebar button {
    border: 1px solid var(--line); background: transparent; padding: 8px 11px;
    text-decoration: none; font: 600 12px var(--sans); cursor: pointer;
}

.datebar a:hover, .datebar button:hover { background: var(--ink); color: var(--paper); }
.datebar input { border: 1px solid var(--line); background: var(--card); padding: 7px 9px; font: 600 13px var(--sans); }
.market-links { display: flex; gap: 8px; align-items: center; overflow-x: auto; padding: 10px 0; border-bottom: 1px solid var(--line); }
.market-links span { flex: 0 0 auto; color: var(--accent); font: 700 10px var(--sans); letter-spacing: .12em; text-transform: uppercase; }
.market-links a { flex: 0 0 auto; padding: 6px 9px; border: 1px solid var(--line); background: var(--card); text-decoration: none; font: 600 11px var(--sans); }
.market-links a:hover { border-color: var(--ink); background: var(--ink); color: var(--paper); }

/* ---------- Market ticker ---------- */

.ticker { display: grid; grid-template-columns: repeat(6, minmax(120px, 1fr)); border-bottom: 1px solid var(--ink); overflow: auto; }
.quote { padding: 14px 16px; border-right: 1px solid var(--line); min-width: 135px; }
.quote:last-child { border-right: 0; }
.quote-label { display: block; color: var(--muted); font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.quote-value { display: block; margin-top: 4px; font: 700 19px var(--serif); }
.quote-meta { color: var(--muted); font-size: 10px; }
.up { color: var(--green); }
.down { color: var(--accent); }

.live-market { padding: 18px 0 8px; border-bottom: 1px solid var(--ink); }
.live-market-label { display: flex; justify-content: space-between; margin-bottom: 10px; color: var(--muted); font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.live-widgets { display: grid; grid-template-columns: repeat(4, minmax(180px, 1fr)); gap: 8px; overflow: auto; }
.tradingview-widget-container { min-width: 180px; min-height: 126px; overflow: hidden; }

/* ---------- Sections & stories ---------- */

.section { padding: 28px 0; border-bottom: 3px double var(--ink); }
.section-head { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin-bottom: 18px; }
.section-title { margin: 0; font: 700 clamp(24px, 3vw, 38px) var(--serif); }
.section-kicker { color: var(--accent); font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.section-link { color: var(--muted); font-size: 12px; font-weight: 700; text-decoration: none; text-transform: uppercase; }

.lead-grid { display: grid; grid-template-columns: 1.55fr .8fr .8fr; }
.story { padding: 0 20px 20px; border-right: 1px solid var(--line); }
.story:first-child { padding-left: 0; }
.story:last-child { border-right: 0; }
.story h3 { margin: 4px 0 10px; font: 700 clamp(20px, 2.2vw, 34px)/1.08 var(--serif); letter-spacing: -.025em; }
.story:not(:first-child) h3 { font-size: 21px; }
.story h3 a { text-decoration: none; }
.story h3 a:hover { color: var(--accent); }
.story p { margin: 0 0 13px; color: var(--muted); font: 400 15px/1.55 var(--serif); }
.byline { color: var(--accent); font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.related { display: block; padding: 8px 0; border-top: 1px solid var(--line); font: 600 13px/1.35 var(--sans); text-decoration: none; }
.related:hover { color: var(--accent); }
/* A related line is another outlet on the same story: masthead first, then its
   own headline, so the stack reads as corroboration rather than repetition. */
.related-source {
    display: block; color: var(--muted);
    font: 700 9px var(--sans); letter-spacing: .08em; text-transform: uppercase;
    margin-bottom: 2px;
}
.related-source:empty { display: none; }
.related-title { display: block; }
.byline .source-count {
    color: var(--muted); font-weight: 400;
}
.byline .source-count::before { content: "· "; }

/* ---------- Scoreboard ---------- */

.scoreboard { display: grid; grid-template-columns: repeat(4, minmax(220px, 1fr)); gap: 12px; overflow: auto; }
.league { min-width: 220px; background: var(--card); border: 1px solid var(--line); }
.league-name { display: flex; justify-content: space-between; padding: 10px 12px; background: var(--ink); color: #fff; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.game { padding: 12px; border-top: 1px solid var(--line); }
.team { display: grid; grid-template-columns: 1fr auto; gap: 12px; padding: 3px 0; font-weight: 700; }
.team .score { font: 700 18px var(--serif); }
.game-status { margin-top: 7px; color: var(--muted); font-size: 10px; font-weight: 700; text-transform: uppercase; }

/* Compact scoreboard: one line per game, leagues in columns.
   (Replaces a card grid whose 280px-min cards and 24px scores made a normal
   slate of fixtures taller than the entire news section.) */
.scores { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 18px; align-items: start; }
.score-league { border: 1px solid var(--line); background: var(--card); }
.score-league-name {
    display: flex; justify-content: space-between; align-items: center;
    padding: 7px 10px; background: var(--ink); color: #fff;
    font: 700 10px var(--sans); letter-spacing: .12em; text-transform: uppercase;
}
.score-league-name .game-count { font-weight: 400; opacity: .75; }
.score-row {
    display: grid; grid-template-columns: 1fr auto 12px 1fr auto; gap: 6px;
    align-items: baseline; padding: 5px 10px; border-top: 1px solid var(--line);
    font: 400 12px var(--sans);
}
.score-team { display: flex; align-items: center; gap: 5px; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.score-team a { min-width: 0; overflow: hidden; text-overflow: ellipsis; text-decoration: none; }
.score-team a:hover { color: var(--accent); }
.score-team small { color: var(--muted); font-size: 9px; font-weight: 500; }
.score-logo { width: 18px; height: 18px; flex: 0 0 18px; object-fit: contain; }
.score-num { font: 700 13px var(--serif); font-variant-numeric: tabular-nums; }
.score-team.won, .score-num.won { font-weight: 700; color: var(--ink); }
.score-at { color: var(--muted); font-size: 10px; text-align: center; }
.score-state {
    grid-column: 1 / -2; color: var(--muted);
    font: 700 9px var(--sans); letter-spacing: .08em; text-transform: uppercase;
}
.score-row:not(:hover) .score-state:empty { display: none; }
.score-link {
    grid-column: -2 / -1; align-self: center; text-decoration: none; color: var(--muted);
    font: 700 9px var(--sans); letter-spacing: .08em; text-transform: uppercase;
}
.score-link:hover { color: var(--accent); }
/* Venue/broadcast is secondary to the result — it sits under the score line. */
.score-meta {
    padding: 0 10px 5px; color: var(--muted);
    font: 400 10px var(--sans);
}

/* ---------- Shared blocks ---------- */

.empty { padding: 24px; border: 1px dashed var(--line); color: var(--muted); background: rgba(255, 255, 255, .25); }
.notice { padding: 12px 16px; margin: 16px 0; border-left: 3px solid var(--accent); background: var(--card); color: var(--muted); font-size: 13px; }

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.panel { background: var(--card); border: 1px solid var(--line); padding: 20px; }
.panel h3 { margin: 0 0 16px; font: 700 18px var(--serif); }

.datatable { width: 100%; border-collapse: collapse; font-size: 13px; }
.datatable th { text-align: left; padding: 9px 10px; background: var(--ink); color: #fff; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; }
.datatable td { padding: 8px 10px; border-bottom: 1px solid var(--line); }
.datatable tbody tr:hover { background: var(--soft); }
.datatable .num { text-align: right; font-variant-numeric: tabular-nums; }

/* ---------- Forms (calculators) ---------- */

.field { margin-bottom: 14px; }
.field label { display: block; margin-bottom: 5px; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.field input, .field select {
    width: 100%; padding: 10px 12px; border: 1px solid var(--line);
    background: var(--card); font: 400 15px var(--sans); color: var(--ink);
}
.field input:focus, .field select:focus { outline: 2px solid var(--accent); outline-offset: -2px; }
.field .hint { margin-top: 4px; font-size: 11px; color: var(--muted); }

.btn {
    display: inline-block; padding: 12px 24px; border: 1px solid var(--ink);
    background: var(--ink); color: var(--paper); cursor: pointer;
    font: 600 12px var(--sans); letter-spacing: .1em; text-transform: uppercase; text-decoration: none;
}
.btn:hover { background: var(--accent); border-color: var(--accent); }
.btn-secondary { background: transparent; color: var(--ink); }
.btn-secondary:hover { background: var(--ink); color: var(--paper); }

.result-figure { font: 700 clamp(28px, 4vw, 44px) var(--serif); margin: 0; }
.result-label { color: var(--muted); font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }

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

.tool-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 18px; }
.tool-card { display: block; padding: 24px; background: var(--card); border: 1px solid var(--line); text-decoration: none; transition: transform .15s, box-shadow .15s; }
.tool-card:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(23, 32, 29, .12); border-color: var(--ink); }
.tool-icon { font-size: 30px; }
.tool-title { margin: 12px 0 8px; font: 700 20px var(--serif); }
.tool-description { color: var(--muted); font-size: 14px; line-height: 1.55; }

footer.shell { display: flex; justify-content: space-between; gap: 20px; padding: 28px 0 45px; color: var(--muted); font-size: 12px; }

/* ---------- Responsive ---------- */

@media (max-width: 900px) {
    .masthead { grid-template-columns: 1fr; gap: 8px; }
    .edition { text-align: center !important; }
    .lead-grid { grid-template-columns: 1fr 1fr; }
    .story:first-child { grid-column: 1 / -1; border-right: 0; border-bottom: 1px solid var(--line); margin-bottom: 20px; }
    .ticker { grid-template-columns: repeat(6, 150px); }
    .live-widgets { grid-template-columns: repeat(4, 220px); }
    .grid-2 { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
    .shell { width: min(100% - 20px, 1440px); }
    .utility span:last-child { display: none; }
    .lead-grid { display: block; }
    .story { padding: 18px 0; border-right: 0; border-bottom: 1px solid var(--line); }
    .datebar { flex-wrap: wrap; }
    footer.shell { display: block; }

    .navtoggle { display: block; }
    .mainnav { display: none; flex-direction: column; align-items: stretch; }
    .mainnav.is-open { display: flex; }
    .mainnav a { text-align: center; border-bottom: 1px solid var(--line); }

    /* In the stacked mobile nav a floating panel has nothing to float over,
       so groups expand inline instead. */
    .navgroup-toggle { width: 100%; justify-content: center; border-bottom: 1px solid var(--line); }
    .navmenu {
        position: static; transform: none; min-width: 0; width: 100%;
        border: 0; box-shadow: none; background: rgba(23, 32, 29, .04);
    }
    .navmenu a { text-align: center; }
    .navmenu-heading { text-align: center; }
}