/* The Court's Ledger: King's Court's look (public/shared/theme.css) for a page of figures. No outlines, no shadows,
   no emoji; the theme's faces and pigments. Chart colours: two series checked for colour-blind separation and
   contrast on each surface (lapis and vermilion, lightened for dark), plus a gold-leaf wash for target bands. */

:root {
  --s-live: #3456ad;   /* lapis, lifted into the readable band on vellum */
  --s-sim: #b8402f;    /* vermilion */
  --s-other: #a3844f;  /* sepia: "neither", never an identity */
  --band: rgba(201, 162, 60, 0.32);
  --grid: rgba(109, 86, 56, 0.28);
  --surface: var(--vellum-light);
  --tip-bg: var(--iron-gall);
  --tip-ink: var(--bone);
}
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --page: #1a130c;
    --page-raised: #22190f;
    --surface: #22190f;
    --text: var(--bone);
    --muted: #b9ab8b;
    --rule: #5a4630;
    --rubric: var(--gold-leaf-hi);
    --s-live: #6d86d6;
    --s-sim: #d8654c;
    --s-other: #8a7556;
    --band: rgba(201, 162, 60, 0.26);
    --grid: rgba(236, 227, 207, 0.16);
    --tip-bg: var(--bone);
    --tip-ink: var(--iron-gall);
  }
  body { background: var(--page); }
  .leaf, .card { background: var(--page-raised); }
  .btn { background: #3a2c1c; color: var(--bone); }
  input[type='date'], select { color-scheme: dark; }
}

body { font-size: 17px; }
.top, .filters, main { max-width: 1180px; margin: 0 auto; padding-left: 16px; padding-right: 16px; }
.top { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 0.6rem 1.5rem; padding-top: 1.2rem; }
.top h1 { font-size: clamp(2rem, 6vw, 2.9rem); color: var(--rubric); }
.top p { margin: 0.2rem 0 0; font-size: 0.92rem; }

.tabs { display: flex; flex-wrap: wrap; gap: 0.2rem 1.1rem; font-family: var(--font-rubric); letter-spacing: 0.05em; }
.tabs a { color: var(--muted); text-decoration: none; padding: 0.2rem 0; background: linear-gradient(var(--vermilion), var(--vermilion)) bottom / 0 2px no-repeat; transition: background-size 0.2s ease; }
.tabs a:hover { color: var(--text); }
.tabs a[aria-current] { color: var(--text); background-size: 100% 2px; }
.tabs a:focus-visible { outline: none; background-color: var(--gold-leaf-hi); color: var(--iron-gall); }

.filters { display: flex; flex-wrap: wrap; gap: 0.6rem 1rem; align-items: end; margin-top: 0.9rem; padding-bottom: 0.9rem;
  background: linear-gradient(var(--vermilion), var(--vermilion)) bottom / 100% 2px no-repeat; }
.filters label { display: flex; flex-direction: column; gap: 0.15rem; font-family: var(--font-rubric); font-size: 0.82rem; letter-spacing: 0.05em; color: var(--muted); }
.filters input, .filters select { width: auto; min-width: 7.5rem; font-family: var(--font-body); font-size: max(16px, 0.98rem); color: var(--text);
  background: linear-gradient(var(--sepia-line), var(--sepia-line)) bottom / 100% 1px no-repeat, rgba(255, 250, 235, 0.45); border: none; padding: 0.3em 0.25em; }
.filters .pair { display: flex; gap: 0.4rem; align-items: center; }
.filters .pair select { min-width: 3.6rem; }
.filters .btn { font-size: 0.9rem; padding: 0.4em 0.9em; }

main { padding-top: 1rem; padding-bottom: 3rem; }
.panel { margin: 0 0 1rem; }
.panel h2 { font-family: var(--font-rubric); font-size: 1.15rem; letter-spacing: 0.06em; color: var(--rubric); }
.panel .sub { margin: 0.2rem 0 0.6rem; font-size: 0.92rem; }
.grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 480px), 1fr)); gap: 0 1rem; }
.small { font-size: 0.88rem; }
.note { margin: 0 0 1rem; font-size: 0.95rem; }
.note.error, .error { color: var(--vermilion); }
.loading, .empty { color: var(--muted); font-style: italic; }

.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr)); gap: 0.8rem; margin-bottom: 1rem; }
.tile { background: var(--vellum-texture), var(--page-raised); padding: 0.75rem 0.9rem; }
@media (prefers-color-scheme: dark) { .tile { background: var(--page-raised); } }
.tile-label { font-family: var(--font-rubric); font-size: 0.82rem; letter-spacing: 0.05em; color: var(--muted); }
.tile-value { font-size: 2rem; line-height: 1.1; font-variant-numeric: lining-nums tabular-nums; }
.tile-sub { font-size: 0.84rem; }

/* charts */
.chart-box { min-height: 60px; }
.chart { display: block; overflow: visible; }
.chart text, .axis-row text, .f-svg text { font-family: var(--font-body); font-variant-numeric: lining-nums tabular-nums; }
.axis { font-size: 11px; fill: var(--muted); }
.label { font-size: 13px; fill: var(--text); }
.value { font-size: 12px; fill: var(--text); }
.value.muted { fill: var(--muted); }
.grid { stroke: var(--grid); stroke-width: 1; }
.grid.faint { stroke-dasharray: 2 3; }
.fair { stroke: var(--muted); stroke-width: 1; stroke-dasharray: 3 2; }
.band { fill: var(--band); }
.mark.s-live { fill: var(--s-live); }
.mark.s-sim { fill: var(--s-sim); stroke: var(--surface); stroke-width: 1.5; }
.mark.s-other { fill: var(--s-other); }
.mark.dotted { stroke: var(--surface); stroke-width: 1.5; fill-opacity: 0.85; }
.whisker { stroke-width: 2; stroke-linecap: round; }
.whisker.s-live { stroke: var(--s-live); }
.few { opacity: 0.4; }
.hitbox { fill: transparent; }
.hit:hover .mark, .hit:hover .whisker { filter: brightness(1.15); }
.legend { display: flex; flex-wrap: wrap; gap: 0.3rem 1.1rem; margin-top: 0.5rem; font-size: 0.86rem; color: var(--muted); }
.legend .key { display: inline-flex; align-items: center; gap: 0.35rem; }

.tip { position: fixed; z-index: 10; pointer-events: none; opacity: 0; transition: opacity 0.1s ease; background: var(--tip-bg); color: var(--tip-ink);
  padding: 0.4rem 0.6rem; font-size: 0.85rem; line-height: 1.3; max-width: 280px; border-radius: 2px; }
.tip.on { opacity: 1; }
.tip .tip-head { font-family: var(--font-rubric); letter-spacing: 0.04em; margin-bottom: 0.15rem; }

/* the rows of figures against their targets */
.forest { display: grid; gap: 0; }
.f-row { display: grid; grid-template-columns: 220px minmax(0, 1fr) 100px; gap: 5px; align-items: center; padding: 0.25rem 0;
  background: linear-gradient(var(--grid), var(--grid)) bottom / 100% 1px no-repeat; }
.f-row.f-axis { background: none; padding-bottom: 0; }
.f-label { font-size: 0.95rem; line-height: 1.2; }
.f-label small { display: block; color: var(--muted); font-size: 0.78rem; margin-top: 0.1rem; }
.f-plot { min-width: 0; }
.f-plot svg { display: block; width: 100%; height: auto; }
.f-num { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.15; text-align: right; }
.f-num .big { font-size: 1.15rem; font-variant-numeric: lining-nums tabular-nums; }
.f-num .n { font-size: 0.78rem; color: var(--muted); }
.verdict { font-family: var(--font-rubric); font-size: 0.72rem; letter-spacing: 0.04em; color: var(--muted); }
.v-above, .v-below { color: var(--vermilion); }
.v-within { color: var(--verdigris); }
@media (prefers-color-scheme: dark) { .v-above, .v-below { color: #e0866c; } .v-within { color: #8cc4a2; } }
.f-empty .f-label { color: var(--muted); }
.forest.narrow .f-row { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: 'label num' 'plot plot'; }
.forest.narrow .f-label { grid-area: label; }
.forest.narrow .f-num { grid-area: num; }
.forest.narrow .f-plot { grid-area: plot; }
.forest.narrow .f-row.f-axis .f-label, .forest.narrow .f-row.f-axis .f-num { display: none; }

/* the games */
.table-wrap { overflow-x: auto; }
table.games { width: 100%; border-collapse: collapse; font-size: 0.93rem; }
table.games th { font-family: var(--font-rubric); font-weight: 400; letter-spacing: 0.05em; color: var(--muted); text-align: left; padding: 0.3rem 0.5rem; }
table.games td { padding: 0.35rem 0.5rem; background: linear-gradient(var(--grid), var(--grid)) bottom / 100% 1px no-repeat; vertical-align: top; }
table.games td:first-child, table.games td:nth-child(2) { white-space: nowrap; }
table.games .num { white-space: nowrap; text-align: right; font-variant-numeric: lining-nums tabular-nums; }
table.games tbody tr[tabindex] { cursor: pointer; }
table.games tbody tr[tabindex]:hover td, table.games tbody tr[tabindex]:focus-visible td { background-color: rgba(242, 215, 126, 0.3); outline: none; }
table.games tr.won td:first-child { color: var(--rubric); }
@media (max-width: 639px) { table.games .wide { display: none; } }
.status { font-family: var(--font-rubric); font-size: 0.8rem; letter-spacing: 0.04em; }
.st-abandoned { color: var(--vermilion); }
.st-playing { color: var(--lapis); }

.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr)); gap: 0.4rem 1rem; margin: 0; }
.fact dt { font-family: var(--font-rubric); font-size: 0.78rem; letter-spacing: 0.05em; color: var(--muted); }
.fact dd { margin: 0; }
dl.record { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 0.3rem 1rem; margin: 0.3rem 0 0 0.8rem; }
details summary { cursor: pointer; color: var(--muted); font-size: 0.9rem; }

.timeline { list-style: none; margin: 0; padding: 0; }
.timeline li { display: grid; grid-template-columns: 4.6rem 8.5rem 1fr; gap: 0.6rem; padding: 0.3rem 0; background: linear-gradient(var(--grid), var(--grid)) bottom / 100% 1px no-repeat; font-size: 0.93rem; }
.timeline .at { font-variant-numeric: lining-nums tabular-nums; color: var(--muted); }
.timeline .ev { font-family: var(--font-rubric); font-size: 0.8rem; letter-spacing: 0.04em; color: var(--rubric); }
@media (max-width: 639px) { .timeline li { grid-template-columns: 4rem 1fr; } .timeline li > :last-child { grid-column: 1 / -1; } }

.quotes { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.8rem; }
.quotes blockquote { margin: 0; font-family: var(--font-fell); font-style: italic; font-size: 1.08rem; }

/* the sign-in page */
.signin-page main.signin { max-width: 30rem; margin: 12vh auto 0; padding: 0 16px; text-align: center; }
.signin h1 { font-size: clamp(2.2rem, 9vw, 3.2rem); color: var(--rubric); margin-bottom: 0.8rem; }
.signin .btn { display: inline-block; text-decoration: none; }

/* live courts: the confirm step opens as a row under its court */
table.games tr.confirm td { background: var(--vellum-texture), var(--page-raised); padding: 0.6rem 0.7rem 0.8rem; }
@media (prefers-color-scheme: dark) { table.games tr.confirm td { background: var(--page-raised); } }
.confirm p { margin: 0 0 0.5rem; }
.confirm-row { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.confirm-row input { flex: 1 1 16rem; min-width: 0; font-family: var(--font-body); font-size: max(16px, 0.98rem); color: var(--text);
  background: linear-gradient(var(--sepia-line), var(--sepia-line)) bottom / 100% 1px no-repeat, rgba(255, 250, 235, 0.45); border: none; padding: 0.35em 0.3em; }
.courts .btn { font-size: 0.88rem; padding: 0.35em 0.8em; white-space: nowrap; }
@media (prefers-color-scheme: dark) {
  .confirm-row input { background: linear-gradient(var(--rule), var(--rule)) bottom / 100% 1px no-repeat, rgba(236, 227, 207, 0.08); }
  .courts .btn-danger { background: var(--vermilion-deep); color: var(--bone); }
}
.filters[hidden] { display: none; }
/* On a phone each court is a small card, so "End this court" is never off to the side. */
@media (max-width: 639px) {
  .courts table.games thead { display: none; }
  .courts table.games, .courts table.games tbody, .courts table.games tr, .courts table.games td { display: block; width: auto; }
  .courts table.games tr { padding: 0.4rem 0 0.6rem; background: linear-gradient(var(--grid), var(--grid)) bottom / 100% 1px no-repeat; }
  .courts table.games td { background: none; padding: 0.1rem 0; text-align: left; white-space: normal; }
  .courts table.games td[data-label]::before { content: attr(data-label) ": "; color: var(--muted); font-size: 0.85rem; }
  .courts table.games td[data-label] .small { display: inline; margin-left: 0.4em; }
  .courts table.games td:last-child { padding-top: 0.4rem; }
}