/* NFL Pool archive — one stylesheet for every page.
   Tokens first: the provenance ladder (sourced / inferred / assumed) and the
   chart hues are named here and nowhere else. */
:root {
  --paper: #f4f3ef;
  --surface: #fdfcfa;
  --ink: #1a1a1a;
  --ink-2: #4a4741;
  --muted: #66635c;
  --line: #dedbd3;
  --line-strong: #b4b0a6;
  --link: #164e8a;
  --link-ink: #0f3a67;
  --sourced-bg: #e2f1e6;  --sourced-ink: #145a2b;  --sourced-line: #9fd0ae;
  --inferred-bg: #e5edfa; --inferred-ink: #1e3d7a; --inferred-line: #a9c0ec;
  --assumed-bg: #fbf1d9;  --assumed-ink: #6b4a00;  --assumed-line: #e2b94c;
  --notice-rule: #c8891a;
  --c-weekly: #eb6834; --c-survival: #1baf7a; --c-underdog: #eda100;
  --c-first: #1c5cab; --c-second: #2a78d6; --c-third: #5598e7; --c-second-last: #86b6ef;
  --c-balance: #d6d3ca; --c-field: #2a78d6; --c-ahead: #eb6834;
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia,
           "Times New Roman", serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial,
          sans-serif;
  --radius: 5px;
}
* { box-sizing: border-box }
html { -webkit-text-size-adjust: 100% }
body { margin: 0; font: 16px/1.5 var(--sans); color: var(--ink); background: var(--paper) }
a { color: var(--link) }
a:hover { color: var(--link-ink) }
:focus-visible { outline: 3px solid var(--link); outline-offset: 2px }
.skip { position: absolute; left: -999px; top: .5rem; background: var(--ink); color: #fff;
        padding: .4rem .8rem; border-radius: var(--radius); z-index: 10 }
.skip:focus { left: .5rem }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0);
           white-space: nowrap }

/* masthead */
header.site { background: var(--surface); border-bottom: 1px solid var(--line);
              padding: .85rem 1rem .7rem }
header.site .inner, main, footer.site .inner { max-width: 64rem; margin: 0 auto }
header.site .row { display: flex; flex-wrap: wrap; align-items: baseline; gap: .3rem 1.25rem }
.brand { font-family: var(--serif); font-size: 1.45rem; font-weight: 600; letter-spacing: .01em;
         text-decoration: none; color: var(--ink) }
.brand em { font-style: normal; color: var(--muted); font-weight: 400 }
nav.site { display: flex; gap: 1rem; font-size: .8rem; text-transform: uppercase;
           letter-spacing: .07em }
nav.site a { text-decoration: none; color: var(--ink-2); padding: .2rem 0;
             border-bottom: 2px solid transparent }
nav.site a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--ink) }
nav.site a:hover { color: var(--ink) }
p.standing { margin: .35rem 0 0; color: var(--muted); font-size: .85rem }

/* type */
main { padding: 1rem 1rem 2rem }
h1 { font-family: var(--serif); font-size: 1.9rem; font-weight: 600; line-height: 1.15;
     margin: .4rem 0 .5rem; letter-spacing: -.005em }
h2 { font-size: 1.15rem; margin: 2.2rem 0 .6rem; padding-top: .8rem; border-top: 1px solid var(--line) }
h3 { font-size: 1rem; margin: 1.2rem 0 .4rem }
p { margin: .5rem 0 }
p.lead { font-size: 1.05rem; color: var(--ink-2); margin: 0 0 1rem; max-width: 42rem }
.muted { color: var(--muted) }
.small { font-size: .875rem }

/* the modelled notice: first on the season-ahead page, before any figure */
.banner { background: var(--assumed-bg); color: var(--assumed-ink); border-left: 4px solid var(--notice-rule);
          border-radius: 0 var(--radius) var(--radius) 0; padding: .7rem .9rem; margin: 0 0 1.2rem }
.banner .eyebrow { display: block; font-size: .72rem; text-transform: uppercase; letter-spacing: .1em;
                   font-weight: 700; margin-bottom: .15rem }
.banner a { color: inherit }
.banner.warn { background: #fde9e2; color: #7a2e12; border-left-color: #c8501a }

/* cards */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: .6rem;
         margin: .6rem 0 1rem }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
        padding: .65rem .8rem .55rem }
.card .k { font-size: .78rem; color: var(--muted); text-transform: uppercase; letter-spacing: .05em }
.card .v { font-size: 1.5rem; font-weight: 600; line-height: 1.2; margin: .1rem 0 }
.card .n { font-size: .8rem; color: var(--muted) }

/* tables */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: .5rem 0 1rem;
              border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface) }
table { border-collapse: collapse; width: 100%; font-size: .93rem }
th, td { padding: .45rem .65rem; border-bottom: 1px solid var(--line); text-align: left;
         vertical-align: top }
thead th { font-size: .75rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted);
           font-weight: 600; background: var(--paper); white-space: nowrap }
tbody tr:last-child td, tbody tr:last-child th { border-bottom: 0 }
tbody th { font-weight: 500 }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap }
tr.total th, tr.total td { border-top: 2px solid var(--ink); font-weight: 700 }
tr.sub th, tr.sub td { font-weight: 600; background: var(--paper) }
tr.chosen td, tr.chosen th { background: #eef4fb; font-weight: 600 }
table.rules { font-size: .9rem }
table.rules th { width: 40%; font-weight: 500; color: var(--muted); background: none }
.schedule .detail { display: block; font-size: .78rem; color: var(--muted); white-space: nowrap }
@media (max-width: 39.99rem) {
  .schedule .count, .schedule .each { display: none }
  table.stack thead { display: none }
  table.stack, table.stack tbody, table.stack tr, table.stack td { display: block }
  table.stack tr { padding: .55rem .65rem; border-bottom: 1px solid var(--line) }
  table.stack tr:last-child { border-bottom: 0 }
  table.stack td { padding: .1rem 0; border: 0 }
  table.stack td.label { font-weight: 600 }
}
.short { color: var(--assumed-ink); font-weight: 600 }

/* badges: the provenance ladder */
.badge { display: inline-block; font-size: .72rem; padding: .08rem .5rem; border-radius: 999px;
         border: 1px solid var(--line); background: var(--paper); color: var(--muted);
         white-space: nowrap; vertical-align: middle; line-height: 1.5 }
.badge.sourced { background: var(--sourced-bg); color: var(--sourced-ink); border-color: var(--sourced-line) }
.badge.inferred { background: var(--inferred-bg); color: var(--inferred-ink); border-color: var(--inferred-line) }
.badge.assumed, .badge.assumed_by_user { background: var(--assumed-bg); color: var(--assumed-ink);
                                          border-color: var(--assumed-line) }

/* disclosure */
details { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface);
          margin: .5rem 0; padding: .1rem .8rem }
summary { cursor: pointer; padding: .5rem 0; font-weight: 600 }
details .table-wrap { border: 0; border-top: 1px solid var(--line); border-radius: 0; margin: .25rem -.8rem 0 }
details[open] > summary { border-bottom: 1px solid var(--line) }
ol.unresolved li { margin: .45rem 0 }

/* the controls on the season-ahead page */
form.controls { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
                padding: .9rem 1rem 1rem; margin: 1rem 0 }
form.controls fieldset { border: 0; padding: 0; margin: 0 0 1rem; min-width: 0 }
form.controls legend { font-weight: 600; padding: 0; margin-bottom: .5rem }
.fields { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem }
.shares { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem }
.field { display: grid; gap: .2rem; min-width: 0 }
.field label { font-size: .85rem; color: var(--ink-2) }
.field .hint { font-size: .78rem; color: var(--muted) }
.field .box { display: flex; align-items: center; border: 1px solid var(--line-strong);
              border-radius: 4px; background: #fff; min-height: 2.6rem }
.field .box:focus-within { outline: 3px solid var(--link); outline-offset: 1px }
.field input { font: inherit; font-size: 1.05rem; font-variant-numeric: tabular-nums;
               border: 0; background: transparent; padding: .4rem .55rem; width: 100%; min-width: 0 }
.field input:focus { outline: 0 }
.field .unit { padding: 0 .55rem 0 0; color: var(--muted); font-size: .9rem }
.field .unit.pre { padding: 0 0 0 .55rem }
.field input:invalid { color: #9b1c1c }
.pot-line { display: flex; flex-wrap: wrap; gap: .3rem 1rem; align-items: baseline;
            margin: .3rem 0 0; font-size: .95rem; grid-column: 1 / -1 }
.pot-line .big { font-size: 1.35rem; font-weight: 600 }
.sum { display: flex; flex-wrap: wrap; gap: .3rem 1rem; align-items: center; margin-top: .4rem;
       font-size: .9rem; color: var(--ink-2) }
.over { color: #9b1c1c; font-weight: 600 }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; margin-top: .4rem }
button { font: inherit; font-weight: 600; padding: .55rem 1rem; border-radius: 4px;
         border: 1px solid var(--link-ink); background: var(--link); color: #fff; cursor: pointer }
button:hover { background: var(--link-ink) }
#status { font-size: .85rem; color: var(--muted); min-height: 1.2em }
.results.busy { opacity: .55 }
@media (prefers-reduced-motion: no-preference) { .results { transition: opacity .15s } }

/* charts, drawn from geometry in web/charts.py */
figure.chart { margin: .8rem 0 1rem; background: var(--surface); border: 1px solid var(--line);
               border-radius: var(--radius); padding: .8rem .9rem .6rem }
figure.chart figcaption { font-size: .82rem; color: var(--muted); margin-top: .5rem }
.columns .plot { position: relative; height: 170px; margin: .4rem 0 0; padding-left: 3.2rem }
.columns .tick { position: absolute; left: 0; right: 0; bottom: var(--y); height: 0;
                 border-top: 1px solid var(--line) }
.columns .tick span { position: absolute; left: 0; bottom: -.55em; font-size: .72rem;
                      color: var(--muted); font-variant-numeric: tabular-nums; line-height: 1 }
.columns .tick.base { border-top-color: var(--line-strong) }
.columns .cols { position: absolute; left: 3.2rem; right: .2rem; top: 0; bottom: 0; display: flex;
                 align-items: flex-end; gap: 4px }
.columns .col { flex: 1 1 0; position: relative; height: 100%; display: flex; flex-direction: column;
                justify-content: flex-end; align-items: center; min-width: 0 }
.columns .bar { width: 100%; max-width: 24px; height: var(--h); background: var(--c-field);
                border-radius: 4px 4px 0 0; min-height: 0 }
.columns .col.ahead .bar { background: var(--c-ahead) }
.columns .col:hover .bar, .columns .col:focus-visible .bar { filter: brightness(1.12) }
.columns .v { position: absolute; z-index: 1; bottom: calc(var(--h) + 3px); font-size: .72rem;
              line-height: 1; color: var(--ink-2); font-variant-numeric: tabular-nums;
              white-space: nowrap; background: var(--surface); padding: 0 2px; border-radius: 2px }
.columns .col.ahead .v { font-weight: 700; color: var(--ink) }
.columns .ref { position: absolute; left: 0; right: 0; bottom: var(--y); height: 0;
                border-top: 2px solid var(--ink) }
.columns .ref span { position: absolute; right: 0; bottom: 3px; font-size: .72rem; line-height: 1;
                     background: var(--surface); padding: 0 .25rem; color: var(--ink) }
.columns .xlabels { display: flex; gap: 4px; padding-left: 3.2rem; padding-right: .2rem; margin-top: .35rem }
.columns .xlabels span { flex: 1 1 0; text-align: center; font-size: .7rem; color: var(--muted);
                         font-variant-numeric: tabular-nums; min-width: 0; overflow: hidden;
                         text-overflow: clip; white-space: nowrap }
.columns .xlabels span.ahead { color: var(--ink); font-weight: 700 }
.columns .xlabels .full { display: none }
.columns .xlabels .abbr { display: inline }
.potbar { display: flex; gap: 2px; height: 30px; margin: .5rem 0 .6rem }
.potbar .seg { flex: 0 0 var(--w); min-width: 0; display: flex; align-items: center;
               justify-content: center; font-size: .75rem; font-weight: 600; overflow: hidden;
               border-radius: 2px }
.potbar .seg:first-child { border-radius: 4px 2px 2px 4px }
.potbar .seg:last-child { border-radius: 2px 4px 4px 2px }
.seg.weekly, .sw.weekly { background: var(--c-weekly); color: #fff }
.seg.survival, .sw.survival { background: var(--c-survival); color: var(--ink) }
.seg.underdog, .sw.underdog { background: var(--c-underdog); color: var(--ink) }
.seg.first, .sw.first { background: var(--c-first); color: #fff }
.seg.second, .sw.second { background: var(--c-second); color: #fff }
.seg.third, .sw.third { background: var(--c-third); color: #fff }
.seg.second_last, .sw.second_last { background: var(--c-second-last); color: var(--ink) }
.seg.balance, .sw.balance { background: var(--c-balance); color: var(--ink) }
.legend { display: grid; grid-template-columns: 1fr; gap: .25rem .9rem; font-size: .84rem;
          list-style: none; padding: 0; margin: 0 }
.legend li { display: flex; align-items: baseline; gap: .4rem; min-width: 0 }
.legend .sw { flex: 0 0 .75rem; width: .75rem; height: .75rem; border-radius: 2px; position: relative; top: 1px }
.legend .amt { margin-left: auto; font-variant-numeric: tabular-nums; white-space: nowrap }
.legend .pct { color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap }

footer.site { padding: 1rem; color: var(--muted); font-size: .85rem; border-top: 1px solid var(--line);
              margin-top: 2rem }

@media (min-width: 40rem) {
  body { font-size: 17px }
  h1 { font-size: 2.3rem }
  .shares { grid-template-columns: repeat(4, 1fr) }
  .fields { grid-template-columns: repeat(3, 1fr); align-items: start }
  .legend { grid-template-columns: repeat(2, 1fr) }
  .schedule .detail { display: none }
  .columns .plot { height: 210px }
  .columns .xlabels .full { display: inline }
  .columns .xlabels .abbr { display: none }
}
@media (min-width: 56rem) {
  .legend { grid-template-columns: repeat(4, 1fr) }
  form.controls { padding: 1.1rem 1.3rem 1.2rem }
  header.site .row { gap: .3rem 2rem }
}
@media print {
  header.site, footer.site, form.controls button, #status { display: none }
  .table-wrap { border: 0 }
}