/* Placeholder hand-written styles for Phase 1. Swapped for the Tailwind
   standalone build once the UI has enough real screens to be worth it. */

:root {
  /* light only, deliberately — claiming "light dark" here with no actual
     dark-mode colors defined let browsers apply dark-mode native widget
     styling (e.g. light button text) on top of our light-only CSS, which is
     exactly how a button ended up with white text on a white background */
  color-scheme: light;
  --ink: #131820;
  --paper: #f6f7f9;
  --accent: #1d4f7c;
  --accent-hover: #163f63;
  --rule: #d9dee5;
  /* Amber family: the one color reserved for "this needs your attention" —
     the tag on an outright loss, the callout around an irreversible admin
     action, the warn-styled button that triggers one. */
  --warn: #a8752b;
  --warn-hover: #8c6122;
  --warn-bg: #fdf6e8;
  --warn-border: #e3b769;
  --warn-text: #6b4310;
}

* { box-sizing: border-box; }

/* Visually hidden but still announced by a screen reader — for text that
   backs up a color- or icon-only visual signal (see .reveal-mark) without
   cluttering the sighted layout. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

body {
  margin: 0;
  font-family: system-ui, -apple-system, sans-serif;
  color: var(--ink);
  background: var(--paper);
}

/* Baseline for any link that isn't already given a more specific color
   elsewhere (.button, .back-link a, .site-header a, etc. all still win
   over this) — without it, an unstyled <a> falls back to the browser's
   own visited/unvisited colors, which is exactly how a clicked group or
   week link in a plain list ends up purple. One rule here covers every
   link's clicked and unclicked color identically, everywhere. */
a { color: var(--accent); }

.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px 16px;
  padding: 16px 24px;
  border-bottom: 1px solid var(--rule);
}

.site-header .brand {
  font-weight: 700;
  text-decoration: none;
  color: var(--ink);
}

.site-header nav a {
  color: var(--accent);
  text-decoration: none;
  margin-left: 16px;
}

.site-header nav .user {
  font-weight: 600;
}

.avatar {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  vertical-align: middle;
  margin-right: 6px;
}

main {
  max-width: 640px;
  margin: 0 auto;
  padding: 48px 24px;
}

@media (max-width: 480px) {
  main { padding: 24px 16px; }
  .panel { padding: 16px; }
  .request-card { padding: 12px 16px; }
}

.hero { margin-bottom: 32px; }

.flash {
  background: #e7f3ea;
  border: 1px solid #b9dcc2;
  color: #1f6b3a;
  border-radius: 6px;
  padding: 10px 16px;
  margin-bottom: 24px;
  font-weight: 600;
}

.panel {
  border: 1px solid var(--rule);
  border-radius: 6px;
  padding: 20px 24px;
  margin-bottom: 24px;
  background: white;
}

.muted { color: #666; }

.list { list-style: none; margin: 0; padding: 0; }
.list li { padding: 6px 0; border-bottom: 1px solid var(--rule); }
.list li:last-child { border-bottom: none; }

.button {
  display: inline-block;
  background: var(--accent);
  color: white;
  padding: 8px 16px;
  border-radius: 4px;
  text-decoration: none;
  border: none;
  font: inherit;
  cursor: pointer;
  transition: background-color .1s ease-in-out;
}
.button:hover:not(:disabled) { background: var(--accent-hover); }
.button:disabled, .button[disabled] {
  background: var(--rule);
  color: #8a95a3;
  cursor: not-allowed;
}
.button-secondary {
  background: transparent;
  color: var(--accent);
  border: 1px solid var(--accent);
}
.button-secondary:hover:not(:disabled) { background: rgba(29, 79, 124, 0.08); }

/* Reserved for actions that are consequential and irreversible (Finalize,
   Close week) — same amber family as .tag-warn, so "this needs care" reads
   consistently everywhere in the app, not a scary red reserved for actual
   destructive/delete actions elsewhere. */
.button-warn { background: var(--warn); }
.button-warn:hover:not(:disabled) { background: var(--warn-hover); }

.back-link { margin-bottom: 16px; }
.back-link a { color: var(--accent); text-decoration: none; font-size: 14px; }
.back-link a:hover { text-decoration: underline; }

.form { display: flex; flex-direction: column; gap: 4px; max-width: 420px; }
.form label { font-weight: 600; margin-top: 12px; }
.form label.checkbox { display: flex; align-items: center; gap: 8px; font-weight: 400; }
.form input[type="text"],
.form input[type="number"],
.form select,
.form textarea {
  padding: 8px;
  border: 1px solid var(--rule);
  border-radius: 4px;
  font: inherit;
  background: white;
}
.form button { margin-top: 16px; align-self: flex-start; }
.form-error { color: #a8432b; font-weight: 600; }

.facts { display: grid; grid-template-columns: max-content 1fr; gap: 4px 16px; margin: 12px 0; }
.facts dt { color: #666; }
.facts dd { margin: 0; }

.status { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; }
.status-pending { color: #a8752b; }
.status-approved { color: #2f6b46; }
.status-rejected { color: #a8432b; }

/* One shared shape for every small inline status/role badge in the app —
   previously each of these (tag-admin, tag-manual, tag-warn, tag-good,
   tag-progress) hand-rolled its own box model with slightly different
   sizing, so they didn't quite read as one family. Only the color (and,
   for the outline/solid variants, weight and fill) should ever differ. */
.tag {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  padding: 1px 6px;
  border-radius: 3px;
}
.tag-solid { text-transform: uppercase; background: var(--accent); color: white; }
.tag-outline {
  font-weight: 400;
  color: #666;
  border: 1px solid var(--rule);
  background: transparent;
  margin-left: 6px;
}

/* A panel's h2 paired with a primary action for that section — used to put
   "Make your picks" right next to the Slate heading instead of buried
   after the whole table, so it doesn't need scrolling past to find. */
.section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.section-head h2 { margin: 0; }

.request-card {
  border: 1px solid var(--rule);
  border-radius: 6px;
  padding: 16px 20px;
  margin-bottom: 16px;
}
.inline-form { display: inline-block; margin-right: 8px; }

.status-open, .status-locked { color: var(--accent); }
.status-graded, .status-closed { color: #2f6b46; }

.slate-table { width: 100%; border-collapse: collapse; margin: 12px 0; }
.slate-table th { text-align: left; font-size: 12px; color: #666; padding: 4px 8px; }
.slate-table td {
  padding: 8px;
  border-top: 1px solid var(--rule);
  vertical-align: middle;
  /* Digits in a record/rank/score column should line up vertically from
     one row to the next — proportional figures let a "1" sit narrower
     than a "8" and stagger the column. */
  font-variant-numeric: tabular-nums;
}
.spread-input { width: 80px; }

/* One game per card — used for both the slate builder and the picks form.
   A table put a checkbox, a matchup, a warning tag, and a spread editor all
   in one cramped cell; stacking each piece vertically in its own card gives
   every part room and reads the same at any width, phone included. */
.game-list { display: flex; flex-direction: column; gap: 12px; margin: 12px 0; }
.game-card {
  border: 1px solid var(--rule);
  border-radius: 6px;
  padding: 12px 14px;
  background: white;
}
.game-card-warn { background: #fdf3ea; border-color: var(--warn-border); }
.game-card-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}
.game-card-checkbox { cursor: pointer; display: flex; align-items: baseline; gap: 8px; }
.game-card-checkbox input { margin: 0; }
/* min-width: 0 lets this flex item actually shrink and wrap its text
   instead of forcing the card wider (or overlapping the clear button) for
   an unusually long matchup name. */
.game-card-teams { font-weight: 600; min-width: 0; }
.game-card-line { margin: 3px 0 10px; color: #666; font-size: 13px; }
.game-card p.tag-warn { display: block; width: fit-content; margin-bottom: 10px; }

.line-editor { display: flex; flex-wrap: wrap; gap: 14px; }
.line-editor-field { display: flex; flex-direction: column; gap: 3px; }
.line-editor-label { font-size: 11px; color: #666; text-transform: uppercase; letter-spacing: .03em; }
/* Match the bordered, rounded look every other input/select in the app
   gets (see .form) — these were left on bare browser-default styling,
   which read as a half-finished control sitting right next to a
   fully-styled one in the same card. */
.line-editor-field select,
.line-editor-field input {
  font: inherit;
  color: var(--ink);
  padding: 6px 8px;
  border: 1px solid var(--rule);
  border-radius: 4px;
  background: white;
}

/* The two pick buttons always split the card evenly, regardless of how
   long either team's name is — the table version let a long name stretch
   one button far past the other in the same row. */
.pick-toggle { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 4px; }
.pick-toggle .pick-btn { width: 100%; margin-right: 0; white-space: normal; }

.no-line-row { background: #fdf3ea; }
.tag-warn { color: var(--warn-text); background: #fbe8d0; }

/* A panel around an action that's consequential and hard to reverse
   (Finalize, Close week) — visually distinct from an ordinary white panel
   so it doesn't blend in with routine, low-stakes actions like "Save
   selections". */
.callout {
  background: var(--warn-bg);
  border-color: var(--warn-border);
}

/* "Who's picked" status tags — good/progress pair with .tag-warn's amber
   to read as a clear three-state progression (not started -> in progress
   -> submitted) at a glance. */
.tag-good { color: #1f6b3a; background: #e3f3e8; }
.tag-progress { color: var(--accent); background: #e8eef3; }

.pick-btn {
  font: inherit;
  padding: 6px 12px;
  border: 1px solid var(--rule);
  background: white;
  color: var(--ink);
  border-radius: 4px;
  cursor: pointer;
  margin-right: 4px;
}
.pick-btn-selected { background: var(--accent); color: white; border-color: var(--accent); }
.pick-btn-clear {
  border: none;
  background: none;
  /* #999 on white was ~2.85:1 — under WCAG AA's 4.5:1 minimum for normal
     text. #666 (already used everywhere else as .muted) clears it at
     ~5.7:1 and keeps this reading as the same quiet, secondary control. */
  color: #666;
  cursor: pointer;
  font-size: 16px;
  padding: 0 4px;
}
.pick-btn-clear:hover { color: var(--ink); }

.scroll-x { overflow-x: auto; }
.reveal-table th, .reveal-table td { white-space: nowrap; text-align: center; }
.reveal-table td:first-child, .reveal-table th:first-child { text-align: left; }

/* Once a week is graded, every pick in the reveal grid is colored by
   whether it actually covered — the single most-expected feature of a
   pick'em "who picked what" screen, and previously missing entirely. Color
   is backed up by a letter mark (see the reveal template's sr-only text
   and .reveal-mark) rather than standing alone — green vs. red is exactly
   the pair a lot of colorblind viewers can't reliably tell apart. */
.reveal-win { background: #e3f3e8; color: #1f6b3a; font-weight: 700; }
.reveal-loss { background: #fbe9e6; color: #a8432b; }
.reveal-push { background: #f3f0e6; color: var(--warn-text); }
.reveal-mark { margin-right: 3px; }

/* htmx tags whatever's mid-request with this class on both the element
   that triggered it and the swap target — previously unstyled, so a pick
   click or a sync gave no visual acknowledgement until the response
   landed. The dimmed, inert state also happens to block a double-click
   from firing a second request while the first is still in flight. */
.htmx-request { opacity: .6; pointer-events: none; transition: opacity .1s ease-in-out; }

/* The group page's "Group settings & members" disclosure: static config
   and the member/invite list, deliberately the lowest-priority thing on
   the page, so it recedes behind Weeks/Standings/Punishments rather than
   competing with them for space. */
.details-panel summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--accent);
  list-style: none;
}
.details-panel summary::-webkit-details-marker { display: none; }
.details-panel summary::before {
  content: "▸";
  display: inline-block;
  margin-right: 6px;
  transition: transform .1s ease-in-out;
}
.details-panel[open] summary::before { transform: rotate(90deg); }
.details-panel[open] summary { margin-bottom: 12px; }
.details-panel h3 { margin: 20px 0 4px; font-size: 15px; }
.details-panel h3:first-of-type { margin-top: 0; }

.copy-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.copy-row code { word-break: break-all; }
.copy-btn { flex-shrink: 0; }