/* PropLine shared stylesheet: colour tokens, base page styles and the nav bar, for every page.
   Served at /static/app.css to home and bets; inlined into the props page by build_props_page.py
   (that page is also the published artifact, which must stay one file). Page-specific styles
   stay in each page until that page is reworked (see TWEAKS.md, site redo). */
:root {
  --bg: #F2F4F0; --panel: #FFFFFF; --panel-2: #E8ECE5; --fg: #151C17; --fg-muted: #56635A;
  --line: #D3D9D0; --accent: #1D6B47; --accent-ink: #FFFFFF; --over: #1D6B47; --under: #B05E16;
  --warn-bg: #FAEDCF; --warn-fg: #5E3C00;
  --font-display: "Barlow Condensed", "Arial Narrow", "Helvetica Neue", sans-serif;
  --font-body: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  /* Brand (logo) colours: lime + ink from the logo. In light mode the lime is too pale to read
     on the page, so the word uses a darker lime and the ball gets an ink outline. */
  --brand-lime: #C6F432; --brand-ink: #0B0E13; --brand-word: #4D7C0F; --brand-outline: #0B0E13;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0F1511; --panel: #161E19; --panel-2: #1E2822; --fg: #E6ECE6; --fg-muted: #9AA99F;
    --line: #2A362E; --accent: #5BC48D; --accent-ink: #0B1A12; --over: #5BC48D; --under: #E39A52;
    --warn-bg: #3A2D12; --warn-fg: #F0CF8A; color-scheme: dark;
    --brand-word: #C6F432; --brand-outline: transparent;
  }
}
:root[data-theme="dark"] {
  --bg: #0F1511; --panel: #161E19; --panel-2: #1E2822; --fg: #E6ECE6; --fg-muted: #9AA99F;
  --line: #2A362E; --accent: #5BC48D; --accent-ink: #0B1A12; --over: #5BC48D; --under: #E39A52;
  --warn-bg: #3A2D12; --warn-fg: #F0CF8A; color-scheme: dark;
  --brand-word: #C6F432; --brand-outline: transparent;
}
[hidden] { display: none !important; }

/* Nav bar (drawn by nav.js; only shown when the page is opened through the app). */
.topnav {
  position: sticky; top: 0; z-index: 50; margin: 0 -16px 18px; padding: 0 16px;
  background: color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--line);
}
.topnav .in { max-width: 1800px; margin-inline: auto; display: flex; align-items: center; gap: 6px; min-height: 52px; flex-wrap: wrap; }
.topnav .brand { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-display); font-weight: 700; font-size: 1.3rem;
  text-transform: uppercase; letter-spacing: 0.02em; color: var(--fg); text-decoration: none; margin-right: 14px; white-space: pre; }
.topnav .brand-word span { color: var(--brand-word); }
/* On a phone the six sections need the room: the football alone links home. */
@media (max-width: 560px) { .topnav .brand-word { display: none; } .topnav .brand { margin-right: 6px; } }
.brand-mark { width: 40px; height: 21px; flex: none; overflow: visible; }
.brand-mark .bm-ball { fill: var(--brand-lime); stroke: var(--brand-outline); stroke-width: 12; }
.brand-mark .bm-ink { fill: var(--brand-ink); }
.brand-mark .bm-lace { fill: none; stroke: var(--brand-ink); stroke-width: 14; stroke-linecap: round; }
.topnav a.item {
  font-family: var(--font-display); font-weight: 600; font-size: 1.1rem; color: var(--fg-muted); text-decoration: none;
  padding: 13px 12px 11px; border-bottom: 3px solid transparent;
}
.topnav a.item:hover { color: var(--fg); }
.topnav a.item[aria-current="page"] { color: var(--accent); border-bottom-color: var(--accent); }
/* Account, top right: name (or "Admin") and bankroll, opening a small menu (My bets, Account, Log out). */
.topnav .tn-acct { margin-left: auto; position: relative; }
.topnav .tn-acct summary { list-style: none; cursor: pointer; display: flex; align-items: baseline; gap: 6px; padding: 6px 10px; border-radius: 8px;
  font-size: 0.9rem; color: var(--fg-muted); font-variant-numeric: tabular-nums; }
.topnav .tn-acct summary::-webkit-details-marker { display: none; }
.topnav .tn-acct summary::after { content: "\25BE"; font-size: 0.8rem; }
.topnav .tn-acct summary:hover, .topnav .tn-acct[open] summary { background: var(--panel-2); color: var(--fg); }
.topnav .tn-acct summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.topnav .tn-who { font-weight: 600; color: var(--fg); }
.topnav .tn-acct b { font-family: var(--font-display); font-size: 1.15rem; color: var(--fg); }
.topnav .tn-acct b.tn-up { color: var(--over); } .topnav .tn-acct b.tn-down { color: var(--under); }
.topnav .tn-menu { position: absolute; right: 0; top: calc(100% + 4px); min-width: 160px; z-index: 60; display: flex; flex-direction: column;
  background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 6px; box-shadow: 0 8px 24px rgb(0 0 0 / 0.16); }
.topnav .tn-menu a, .topnav .tn-menu button { font: inherit; font-size: 0.92rem; text-align: left; color: var(--fg); text-decoration: none;
  background: none; border: 0; border-radius: 6px; padding: 7px 10px; cursor: pointer; }
.topnav .tn-menu a:hover, .topnav .tn-menu button:hover { background: var(--panel-2); }
.topnav a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* With the nav showing, it sits flush at the top; the page's own top padding would leave a gap above it. */
body:has(> nav.topnav:not([hidden])) { margin: 0; padding-top: 0; }

/* Filter chips (the props table's Position / Show / View rows): one row per group; on a phone
   each row scrolls sideways instead of wrapping into a tall block. Shared so other pages can use
   them: <div class="filters"><div class="fgroup"><span class="flabel">…</span><button class="fchip">… */
.filters { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.fgroup { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; min-width: 0; }
.flabel { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--fg-muted); min-width: 64px; }
.fchip { font: inherit; font-size: 0.9rem; padding: 4px 12px; border-radius: 99px; border: 1px solid var(--line); background: var(--panel); color: var(--fg); cursor: pointer; white-space: nowrap; }
.fchip:hover { border-color: var(--fg-muted); }
.fchip[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.fchip .n { margin-left: 5px; color: var(--fg-muted); font-variant-numeric: tabular-nums; font-size: 0.82rem; }
.fchip[aria-pressed="true"] .n { color: inherit; opacity: 0.8; }
.fchip.empty0:not([aria-pressed="true"]) { opacity: 0.5; }
.fchip.tog[aria-pressed="true"]::before { content: "\2713\00a0"; }
.fgroup select { font: inherit; font-size: 0.9rem; color: var(--fg); background: var(--panel); border: 1px solid var(--line); border-radius: 99px; padding: 4px 10px; max-width: 100%; }
.fchip:focus-visible, .fgroup select:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (max-width: 700px) {
  .fgroup { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
  .fgroup::-webkit-scrollbar { display: none; }
  .flabel { min-width: 0; flex: none; }
  .fgroup select { max-width: 200px; flex: none; }
}

/* Tooltip box: one per page, fixed to the viewport so scroll areas can't clip it (the props page's
   tipShow() places it under or above the element it describes). */
.tip { position: fixed; z-index: 100; max-width: min(320px, calc(100vw - 16px)); background: var(--fg); color: var(--bg);
       font-size: 0.8rem; line-height: 1.4; padding: 7px 10px; border-radius: 6px; pointer-events: none; box-shadow: 0 4px 14px rgb(0 0 0 / 0.25); }