/* base.css: styles shared by every page. Starts with tables; colors, fonts, buttons, and dialogs move here from home.css later. */

/* Data tables, drawn by fillTable() in js/tables.js.
   Markup: <table class="data"><thead></thead><tbody></tbody></table>, inside a scrolling container. */
table.data { width: 100%; border-collapse: collapse; font: 16px var(--display); font-variant-numeric: tabular-nums; }   /* tabular-nums: digits all one width, so number columns line up */
table.data th {
    position: sticky; top: 0; background: var(--board);
    text-align: left; text-transform: uppercase; letter-spacing: 0.04em;
    font: 600 14px var(--display); color: var(--dust);
}
table.data th, table.data td { padding: 6px 10px; border-bottom: 1px solid var(--rule); white-space: nowrap; }
table.data .num { text-align: right; }
table.data td.empty { color: var(--dust); }

@media (max-width: 700px) {
    table.data th, table.data td { padding: 6px 8px; }
}

/* Game Controls, drawn by showSettings() in js/settings.js.
   Markup: <div class="scroll settings" id="..."></div>; one <details> per settings group. */
.settings .control { margin: 0; padding: 10px 14px; font: 14px var(--display); border-bottom: 1px solid var(--rule); }
.settings summary {
    padding: 8px 14px; cursor: pointer; border-bottom: 1px solid var(--rule);
    font: 600 16px var(--display); text-transform: uppercase; letter-spacing: 0.04em;
}
.settings table.data td:nth-child(2) { white-space: normal; min-width: 12em; }   /* long values wrap */
.settings h4 { margin: 10px 14px 4px; font: 600 13px var(--display); color: var(--dust, #999); text-transform: uppercase; letter-spacing: 0.05em; }   /* a section within a group */

/* Page header, drawn by showHeader() in js/header.js: context left, brand · module centered, coach menu right.
   Markup: <header class="page-header" id="..."></header>; 32px tall. */
.page-header {
    flex: 0 0 32px; height: 32px; box-sizing: border-box;
    display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px;
    padding: 0 12px; border-bottom: 1px solid var(--rule);
    font: 600 18px/1 var(--display);
}
.page-header .context { color: var(--dust); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.page-header .brand { font-size: 20px; font-weight: 700; white-space: nowrap; }
.page-header .brand .chalk { color: var(--marker); }
.page-header .brand .module { color: var(--dust); font-weight: 600; }
.page-header .menu-wrap { justify-self: end; position: relative; }
.page-header .coach-menu { font: inherit; color: var(--chalk); background: none; border: none; padding: 4px 0; cursor: pointer; white-space: nowrap; }
.page-header .menu {
    position: absolute; right: 0; top: 100%; z-index: 10;
    margin: 4px 0 0; padding: 4px 0; list-style: none; min-width: 140px;
    background: var(--board); border: 1px solid var(--rule); border-radius: 4px;
}
.page-header .menu button {
    display: block; width: 100%; padding: 6px 14px; text-align: left;
    font: 600 16px var(--display); color: var(--chalk); background: none; border: none; cursor: pointer;
}
.page-header .coach-menu:hover, .page-header .coach-menu:focus-visible,
.page-header .menu button:hover, .page-header .menu button:focus-visible { color: var(--marker); outline: none; }