/* ---------------------------------------------------------------------
   trivia_menu.css — the Trivia menu (/pages/trivia_menu.php): a player's
   own settings for every trivia board. Same room as trivia.css (loaded
   after it): one column, cards and chips, nothing that is a table.
   Rows of buttons never touch (gap on every row). 2026-10-27.
   --------------------------------------------------------------------- */

.tmenu-form { display: flex; flex-direction: column; gap: var(--space-lg); }

.tmenu-block {
    border: 1px solid var(--border);
    border-radius: 0.75rem;
    padding: var(--space-md) var(--space-lg);
    margin: 0;
    background: var(--bg-1);
}
.tmenu-block legend { font-weight: 700; padding: 0 var(--space-sm); color: var(--text); }
.tmenu-help { color: var(--text-soft); font-size: 0.95rem; line-height: 1.5; margin: 0 0 var(--space-md); }

/* level cards */
.tmenu-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: var(--space-md); }
.tmenu-card {
    text-align: left; cursor: pointer; font: inherit; color: var(--text);
    background: var(--bg-3); border: 2px solid var(--border); border-radius: 0.75rem;
    padding: var(--space-md); min-height: 4.5rem; display: flex; flex-direction: column; gap: 0.25rem;
}
.tmenu-card:hover, .tmenu-card:focus-visible { border-color: var(--accent); outline: none; }
.tmenu-card.is-on { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.tmenu-card-t { font-weight: 700; font-size: 1.05rem; }
.tmenu-card-d { font-size: 0.85rem; color: var(--text-muted); line-height: 1.4; }

/* subject chips: neutral / preferred / omitted */
.tmenu-grid { display: flex; flex-wrap: wrap; gap: var(--space-sm) var(--space-md); }
.tmenu-chip {
    font: inherit; cursor: pointer; color: var(--text);
    background: var(--bg-3); border: 1px solid var(--border); border-radius: 999px;
    padding: 0.4rem 0.9rem; min-height: 2.25rem;
}
.tmenu-chip:hover, .tmenu-chip:focus-visible { border-color: var(--accent); outline: none; }
.tmenu-chip.is-on  { border-color: var(--success); color: var(--success); font-weight: 700; }
.tmenu-chip.is-off { border-color: var(--danger);  color: var(--danger);  text-decoration: line-through; }

/* humor / facts */
.tmenu-slider { display: flex; align-items: center; gap: var(--space-md); flex-wrap: wrap; }
.tmenu-slider input[type=range] { flex: 1 1 12rem; min-width: 8rem; }
.tmenu-slider span { color: var(--text-muted); font-size: 0.9rem; }
.tmenu-natural { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.9rem; color: var(--text-soft); }
.tmenu-readout { margin: var(--space-sm) 0 0; color: var(--text-soft); font-size: 0.9rem; }

/* pill rows (rating, room, tricks) */
.tmenu-pills { display: flex; flex-wrap: wrap; gap: var(--space-sm) var(--space-md); }
.tmenu-pill {
    font: inherit; cursor: pointer; color: var(--text);
    background: var(--bg-3); border: 1px solid var(--border); border-radius: 999px;
    padding: 0.4rem 1rem; min-height: 2.25rem;
}
.tmenu-pill.is-on { border-color: var(--accent); color: var(--accent); font-weight: 700; }
.tmenu-pill:hover, .tmenu-pill:focus-visible { border-color: var(--accent); outline: none; }

/* the save line */
.tmenu-status { min-height: 1.5rem; text-align: center; font-size: 0.95rem; margin: 0 0 var(--space-md); }
.tmenu-status.is-ok  { color: var(--success); }
.tmenu-status.is-bad { color: var(--danger); }

.tmenu-actions { display: flex; flex-wrap: wrap; gap: var(--space-md); justify-content: center; }

/* ==== THE MENU COMPONENT - js/trivia_menu.js (2026-10-29) ====
---------------------------------------------------------------------
   trivia_menu.css - the Trivia menu, one look in two places (js/trivia_menu.js):
   the full page (/pages/trivia_menu.php) and the ☰ dropdown on the other
   trivia pages. Standard pills, small; a description is a tooltip, never
   text across a button's edge (Leslie, 2026-10-29). Loaded after trivia.css.
   --------------------------------------------------------------------- */

.tmenu { display: flex; flex-direction: column; gap: var(--space-sm, .5rem); }
.tmenu .tmenu-body { display: flex; flex-direction: column; gap: var(--space-md, .9rem); }

.tmenu .tmenu-group { margin: 0; }
.tmenu .tmenu-label { margin: 0 0 .4rem; font-size: .8rem; font-weight: 700; letter-spacing: .04em; color: var(--text-soft); }
.tmenu .tmenu-help { margin: 0 0 .5rem; font-size: .85rem; line-height: 1.45; color: var(--text-muted); }
.tmenu .tmenu-readout { margin: .4rem 0 0; font-size: .82rem; line-height: 1.4; color: var(--text-muted); font-style: italic; }

/* the one pill: every choice in the menu */
.tmenu .tmenu-pills { display: flex; flex-wrap: wrap; gap: .4rem; justify-content: center; }   /* centred, like the page */
.tmenu .tmenu-pill {
    font: inherit; font-size: .85rem; line-height: 1.2; cursor: pointer; color: var(--text);
    background: var(--bg-3); border: 1px solid var(--border); border-radius: 999px;
    padding: .3rem .75rem; min-height: 1.9rem; white-space: nowrap;
}
.tmenu .tmenu-pill:hover, .tmenu .tmenu-pill:focus-visible { border-color: var(--accent); outline: none; }
.tmenu .tmenu-pill.is-on { border-color: var(--accent); color: var(--accent); font-weight: 700; }
.tmenu .tmenu-subjects .tmenu-pill.is-on { border-color: var(--success); color: var(--success); }   /* subjects: preferred */
.tmenu .tmenu-pill.is-off { border-color: var(--danger); color: var(--danger); text-decoration: line-through; }

/* humour / facts */
.tmenu .tmenu-slider { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; justify-content: center; }
.tmenu .tmenu-slider input[type=range] { flex: 1 1 8rem; min-width: 6rem; }
.tmenu .tmenu-slider span { color: var(--text-muted); font-size: .85rem; }
.tmenu .tmenu-natural { display: inline-flex; align-items: center; gap: .35rem; font-size: .85rem; color: var(--text-soft); }

/* the save line */
.tmenu .tmenu-status { text-align: center; font-size: .85rem; }
.tmenu .tmenu-status:empty { display: none; }
.tmenu .tmenu-status.is-ok { color: var(--success); }
.tmenu .tmenu-status.is-bad { color: var(--danger); }

.tmenu .tmenu-actions { display: flex; flex-wrap: wrap; gap: .6rem; justify-content: center; margin-top: .25rem; }

/* ---- the full page: one card, one column ---- */
.tmenu-full {
    border: 1px solid var(--border); border-radius: .75rem; background: var(--bg-1);
    padding: var(--space-md, .9rem) var(--space-lg, 1.2rem);
    max-width: 700px; width: 90%; margin: 0 auto; box-sizing: border-box;   /* the standard form card (.container), 2026-10-30 */
}
.tmenu .tmenu-status.is-note { color: var(--text-muted); font-style: italic; }
.tmenu-full .tmenu-slider input[type=range] { min-width: 0; }   /* the slider row stays inside the card on a phone */
.tmenu-full .tmenu-body { gap: var(--space-lg, 1.2rem); }

/* ---- the ☰ and its dropdown (trivia.php, trivia_play.php) ---- */
.tmenu-burger {
    position: fixed; top: 1rem; right: 1rem; z-index: 40;
    width: 2.375rem; height: 2.375rem; padding: 0; display: grid; place-items: center;
    font-size: 1.0625rem; line-height: 1; cursor: pointer;
    color: var(--text); background: var(--bg-1); border: 1px solid var(--border); border-radius: .4rem;
}
.tmenu-burger:hover, .tmenu-burger[aria-expanded="true"] { border-color: var(--accent); color: var(--accent); }
.tmenu-drop {
    position: fixed; top: 3.75rem; right: 1rem; z-index: 40;
    width: min(23rem, calc(100vw - 2rem)); max-height: calc(100vh - 4.75rem); overflow-y: auto; overscroll-behavior: contain;
    box-sizing: border-box; padding: .9rem 1rem 1rem;
    background: var(--bg-1); border: 1px solid var(--border); border-radius: .875rem;
    box-shadow: 0 1.125rem 2.75rem rgba(0, 0, 0, .55);
}
.tmenu-drop[hidden] { display: none; }
.tmenu-drop-title { margin: 0 0 .25rem; font-size: 1rem; text-align: center; color: var(--text); }