/* Shared presentation layer. Controllers, scoring and data contracts stay in
   their existing modules. Load last on every page. */
:root {
  --board: #11171d;
  --board-raised: #1b242d;
  --sunken: #151e26;
  --chalk: #edf1f5;
  --chalk-dim: #a7b4c1;
  --rule: #34424f;
  --hairline: #26333f;
  --t-nav: 600 .9rem/1.3 system-ui, sans-serif;
  --t-chip: 600 .8rem/1.3 system-ui, sans-serif;
}
body { font-family: system-ui, -apple-system, "Segoe UI", sans-serif; }
.masthead { padding: 1rem max(1.25rem, calc((100vw - 1320px) / 2)); gap: .7rem 2rem; background: var(--sunken); align-items: center; }
.wordmark { font: 700 1.15rem/1.3 system-ui, sans-serif; letter-spacing: -.035em; text-transform: none; }
.wordmark .logo { width: 1.5rem; height: 1.5rem; margin-right: .5rem; vertical-align: -.3em; }
.masthead nav { gap: .25rem; }
.masthead nav a { padding: .6rem .85rem; border: 1px solid transparent; border-radius: .5rem; letter-spacing: 0; text-transform: none; }
.masthead nav a:hover { color: var(--chalk); background: var(--board-raised); }
.masthead nav a[aria-current="page"] { background: #2c3540; color: #fff; border-color: var(--rule); }
.stamp { margin: 0; font: .75rem/1.5 system-ui, sans-serif; letter-spacing: 0; overflow-wrap: anywhere; }
main, #waiver-app { max-width: 1360px; padding: 1.75rem 1.25rem 3rem; }
h1, h2, h3 { font-family: inherit; letter-spacing: -.025em; }
main h1 { font-size: clamp(1.75rem, 3vw, 2.5rem); line-height: 1.15; margin-bottom: .85rem; }
h2 { font-size: 1.2rem; line-height: 1.4; }
.eyebrow { font: 600 .72rem/1.5 system-ui, sans-serif; letter-spacing: .11em; color: var(--te); margin-bottom: .5rem; }
.page-intro, .waiver-intro { max-width: 76ch; color: var(--chalk-dim); margin: 0 0 1.5rem; }
main p { line-height: 1.6; }
main label { font-size: .88rem; }
input, select, textarea, button { font-family: inherit; }
input:not([type="checkbox"]):not([type="radio"]), select, textarea { color: var(--chalk); background: var(--board); border: 1px solid var(--rule); border-radius: .45rem; padding: .6rem .75rem; max-width: 100%; }
button { cursor: pointer; }
button, .session-controls button, .session-form button, #waiver-app button { min-height: 2.5rem; border-radius: .45rem; font-family: inherit; text-transform: none; letter-spacing: 0; }
button:hover:not(:disabled) { border-color: var(--chalk-dim); }
button:disabled { cursor: not-allowed; }
#league-context { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; padding: 1rem 1.2rem; margin-bottom: 2rem; border-radius: .75rem; background: var(--sunken); gap: .7rem 1.5rem; }
main #league-context > label { grid-column: 1; grid-row: 1; flex-direction: row; align-items: center; gap: .75rem; font-size: .75rem; color: var(--chalk-dim); font-weight: 600; }
#league-context select { min-height: 2.5rem; font-size: .875rem; background: var(--board); border-radius: .4rem; }
#league-context > p { grid-column: 1 / -1; grid-row: 3; border-top: 1px solid var(--hairline); padding-top: .65rem; font-size: .75rem; }
#league-context > a { grid-column: 2; grid-row: 1; font: 500 .8rem/1.4 system-ui, sans-serif; border: none; text-decoration: underline; text-underline-offset: .2em; padding: .35rem 0; }
.session-chip { grid-column: 1 / -1; grid-row: 2; padding-top: .15rem; gap: .4rem 1rem; }
.session-text { font-size: .85rem; }
.session-settings { font-size: .75rem; }
.session-form input[type="text"] { background: var(--board); }
.session-form button { background: var(--chalk); color: var(--board); border-color: var(--chalk); padding-inline: 1rem; }
.session-controls label, #waiver-app .session-controls label { flex-direction: row; flex-wrap: wrap; align-items: center; }
#waiver-app .session-form button { background: var(--chalk); color: var(--board); border-color: var(--chalk); }
.tool-card, #start-sit { background: var(--sunken); border: 1px solid var(--rule); border-radius: .75rem; padding: 1.25rem; margin: 1.5rem 0; }
.tool-card > h2:first-child, #start-sit > h2:first-child { margin-top: 0; }
.connect-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.connect-options .tool-card { margin: 0; }
.connect-options form { display: flex; flex-direction: column; align-items: start; gap: .7rem; }
.connect-options input { width: 100%; }
.connect-options button { background: var(--chalk); color: var(--board); border: 1px solid var(--chalk); padding: .6rem 1rem; }
main > .connection-account { margin: 0 0 2rem; }
.connection-account #league-context { padding: 1rem 0 0; margin: 0; border: 0; background: none; }
details, #waiver-app details { border: 1px solid var(--rule); border-radius: .6rem; padding: .85rem 1rem; margin: 1rem 0; background: var(--sunken); }
summary { cursor: pointer; font-size: .875rem; font-weight: 600; }
details[open] > summary { margin-bottom: .85rem; }
details p, details li { font-size: .875rem; }
.filters { gap: .35rem; }
.filters button { border-radius: .4rem; padding: .5rem .85rem; text-transform: none; letter-spacing: 0; }
.filters button[aria-pressed="true"] { color: var(--board); background: var(--chalk); border-color: var(--chalk); }
.table-wrap { border: 1px solid var(--rule); border-radius: .6rem; margin: 1rem 0; background: var(--sunken); }
.table-wrap:empty { display: none; }
thead { background: var(--board-raised); }
thead th { font-family: inherit; font-size: .72rem; letter-spacing: .025em; text-transform: none; padding: .85rem .75rem; }
td { padding: .75rem; font-size: .9rem; }
caption { padding: .7rem !important; font-size: .8rem; text-align: left; color: var(--chalk-dim); }
#waiver-status, #ss-status, #trade-status { font-size: .9rem; overflow-wrap: anywhere; }
#waiver-status, .waiver-warnings { border-radius: .35rem; }
.waiver-controls { padding: 1rem; background: var(--sunken); border: 1px solid var(--rule); border-radius: .6rem; }
.field-hint { font-size: .75rem; color: var(--chalk-dim); font-weight: 400; }
.waiver-method { max-width: none; }
.waiver-method li { max-width: 90ch; }
#ss-evidence, #expert-status, #lens-status, .waiver-source { font-size: .85rem; }
.draft-note, .draft-status, .trade-col-note { font-family: inherit; line-height: 1.6; }
.season-steps { display: flex; flex-wrap: wrap; gap: .75rem 2rem; padding: 1rem 1rem 1rem 2.5rem; border: 1px solid var(--rule); border-radius: .6rem; background: var(--sunken); }
.season-steps li { padding-left: .25rem; }
footer { max-width: 1320px; margin: 0 auto; padding: 1.25rem; font: .8rem/1.65 system-ui, sans-serif; color: var(--chalk-dim); border-top: 1px solid var(--rule); }
.skip-link { position: absolute; top: -5rem; left: 1rem; padding: .7rem 1rem; background: var(--chalk); color: var(--board); z-index: 100; border-radius: .4rem; }
.skip-link:focus { top: .5rem; }
@media (max-width: 700px) {
  .masthead { padding: 1rem; gap: .75rem; }
  .masthead nav { width: 100%; margin: 0; gap: .2rem; }
  .masthead nav a { flex: 1 1 auto; text-align: center; font-size: .8rem; padding: .6rem .5rem; }
  main, #waiver-app { padding: 1.25rem 1rem 2rem; }
  #league-context { margin-bottom: 1.5rem; padding: .85rem; }
  .session-chip { flex-basis: 100%; }
  .session-form, .session-form label { width: 100%; }
  .session-form input[type="text"] { width: 100%; min-width: 0; }
  .connect-options { grid-template-columns: 1fr; }
  .tool-card, #start-sit { padding: 1rem; }
  #waiver-app .waiver-controls label:first-child { width: auto; }
}
@media (max-width: 420px) {
  #league-context { grid-template-columns: minmax(0, 1fr); }
  #league-context > a { grid-column: 1; grid-row: 2; margin-left: 0; }
  #league-context .session-chip { grid-row: 3; }
  #league-context > p { grid-row: 4; }
}