/* Tallyworks (classes tw-): square grids, palette, traces. Loaded on the pages of the game only (DECISIONS arbitrage 10).
   Mobile first, 360 px wide: a 6 x 3 grid fits the content column with cells of about 44 px; an 8 x 4 grid scrolls
   inside its own box (.scroll-x of the site), lane letters kept in view, the page itself never scrolls sideways. The
   site's components come first (v2/CHARTE.md §3): .visually-hidden, .scroll-x, nav.pager, .flash; a target of 44 px
   under a finger for the game's own controls (palette, breadcrumbs, sorting links). */

.tw {
    --tw-line: #d9c4cf;
    --tw-station: #fff0f6;
    --tw-partner: #f4f4f4;
    --tw-ink: #222;
    --tw-faint: #b8b8b8;
    --tw-house: #888;
}

.tw-crumbs { margin: 0; font-size: 0.9em; color: var(--ns-muted); }
.tw-ok { color: var(--ns-ok); }
.tw-ko { color: var(--ns-error); }
.tw-warn { color: var(--ns-warn); }

/* Fiche of a workshop: inputs and expected outputs */
.tw-fiche { margin: 0.4em 0 0.8em; border-collapse: collapse; }
.tw-fiche th, .tw-fiche td { padding: 0.25em 0.8em 0.25em 0; text-align: left; vertical-align: top; }
.tw-fiche thead th { font-weight: normal; color: var(--ns-title); border-bottom: 2px solid var(--ns-line); }

/* Grid: one row per lane, square cells */
.tw-grid, .tw-mini { width: 100%; max-width: 26rem; margin: 0.4em 0; table-layout: fixed; border-collapse: collapse; }
.tw-grid th, .tw-mini th { font-weight: normal; color: var(--ns-title); font-size: 0.9em; }
.tw-grid thead th:first-child, .tw-mini thead th:first-child { width: 1.6rem; }
.tw-grid thead th:last-child, .tw-mini thead th:last-child { width: 1.9rem; }
.tw-cell { height: 2.75rem; padding: 0; text-align: center; vertical-align: middle; border: 1px solid var(--tw-line); }
.tw-grid .tw-cell { font-size: 1rem; font-weight: bold; }
.tw-station { color: var(--ns-accent-dark); background: var(--tw-station); }
.tw-partner { color: var(--ns-muted); background: var(--tw-partner); }
.tw-empty { color: var(--tw-faint); }
.tw-out { padding-left: 0.3em; text-align: left; color: var(--ns-title); }
.tw-lane { text-align: center; }

/* The 8 x 4 grid of the week: 36 px cells, scrolled in its box */
.tw-w8 { min-width: 21.75rem; max-width: 30rem; }
.tw-w8 .tw-cell { height: 2.25rem; }
.tw-w8 .tw-lane { position: sticky; left: 0; background: var(--ns-page); }

/* Trace: one cycle per details, a mini grid in each; 13 px at least (v2/CHARTE.md §4) */
.tw-trace { margin: 0.4em 0; }
.tw-cycle { border-bottom: 1px solid var(--ns-border); }
.tw-mini td { height: 2.5rem; padding: 0; font-size: 0.85rem; line-height: 1.1; text-align: center; vertical-align: middle; border: 1px solid var(--tw-line); }
.tw-mini td.tw-out { border: 0; text-align: left; }
.tw-mini small { display: block; font-size: var(--ns-size-xs); color: var(--ns-accent-dark); }
.tw-mini b { display: block; color: var(--tw-ink); }
.tw-mini i { display: block; font-size: var(--ns-size-xs); font-style: normal; }
.tw-mini em { display: block; font-style: normal; font-weight: bold; color: var(--ns-error); }
.tw-blocked { outline: 3px solid var(--ns-error); outline-offset: -3px; }

/* Rules page */
.tw-catalog .tw-signcol { font-size: 1.1em; font-weight: bold; color: var(--ns-accent-dark); white-space: nowrap; }
@media (max-width: 600px) {
    /* Stacked stations: the sign and the name on one line, then each value with its label. */
    table.tw-catalog thead { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); }
    table.tw-catalog, table.tw-catalog tbody, table.tw-catalog tr, table.tw-catalog td { display: block; }
    table.tw-catalog tr { padding: 0.4em 0; border-bottom: 1px solid var(--ns-border); }
    table.tw-catalog td { padding: 0.1em 0; border: 0; }
    table.tw-catalog td.tw-signcol, table.tw-catalog td.tw-namecol { display: inline; margin-right: 0.4em; font-weight: bold; }
    table.tw-catalog td[data-label]::before { content: attr(data-label) " : "; color: var(--ns-title); }
}
.tw-steps li { margin-bottom: 0.4em; }
.tw-facts { display: grid; grid-template-columns: auto 1fr; gap: 0.2em 0.8em; margin: 0 0 0.8em; }
.tw-facts dt { font-weight: bold; }
.tw-facts dd { margin: 0; }
.tw-example { margin: 1em 0 1.6em; }
.tw-example h4 { margin: 1em 0 0.2em; color: var(--ns-title); }
.tw-measures { font-weight: bold; }

/* Workshop page: palette, grid of buttons, actions. A tool and its link « apprendre » stay together on a line. */
.tw-allowed { line-height: 1.6; }
.tw-chip { display: inline-block; margin-right: 0.4em; padding: 0 0.4em; white-space: nowrap; border: 1px solid var(--tw-line); border-radius: var(--ns-radius-sm); }
.tw-constraint { font-weight: bold; color: var(--ns-title); }
.tw-palette { margin: 0.6em 0; }
.tw-tools { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ns-space-1) 1em; }
.tw-tools label, .tw-tool-item { margin: 0; white-space: nowrap; }
.tw-tool-item { display: flex; align-items: center; }
.tw-tool b { color: var(--ns-accent-dark); }
.tw-learn { padding: 0 0.3em; font-size: 0.85em; font-weight: normal; }
.tw-expected { margin: 0.2em 0 0.4em; }
.tw-settings { margin-top: 0.3em; }
.tw-settings label { margin: 0.3em 0; }
.tw-side label { display: inline-block; margin: 0 0.5em 0 0; }
.tw-play button {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 2.75rem;
    padding: 0;
    font: inherit;
    font-size: 1rem;
    font-weight: bold;
    color: inherit;
    background: transparent;
    border: 0;
    border-radius: 0;
}
.tw-play button:hover, .tw-play button:focus { color: var(--ns-on-accent); background: var(--ns-accent-dark); outline: none; }
.tw-play button:focus-visible { outline: 3px solid var(--ns-hover); outline-offset: -3px; }
.tw-w8.tw-play .tw-cell, .tw-w8.tw-play button { height: 2.25rem; min-height: 2.25rem; }
.tw-draft { margin: 0.4em 0; }
.tw-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6em 1em; margin: 0.6em 0; }
.tw-actions form, .tw-actions p { margin: 0; }
/* The error of a checkbox in a row of actions, on its own line under it (x-form-error of the socle). */
.tw-actions .form-error { flex-basis: 100%; }
.tw-run { font-size: 1rem; }
.tw-hint { padding-left: 0.6em; border-left: 3px solid var(--ns-accent); }
.tw-solution { margin-top: 1.2em; }
.tw-verdict { font-size: 1rem; font-weight: bold; }
.tw-outputs { max-width: 20rem; margin-bottom: 0.8em; }
.tw-outputs caption { text-align: left; font-weight: bold; color: var(--ns-title); }
.tw-diff td { color: var(--ns-error); }
.tw-card { margin: 0.8em 0; }
.tw-guest { margin-top: 1em; }

/* Calendar workshops: stars, records, share text, histograms */
.tw-meta { color: var(--ns-title); }
.tw-stars { color: var(--ns-accent-dark); letter-spacing: 0.05em; }
.tw-share { display: block; width: 100%; max-width: 30rem; font: inherit; resize: vertical; }
.tw-records { margin: 0.6em 0; }
.tw-hist { display: block; width: 100%; max-width: 20rem; height: auto; }
.tw-hist .tw-bar { fill: var(--ns-accent); }
.tw-hist .tw-mark { stroke-width: 2; }
.tw-hist .tw-mark-vous { stroke: var(--ns-title); }
.tw-hist .tw-mark-par { stroke: var(--ns-accent-dark); stroke-dasharray: 4 3; }
.tw-hist .tw-mark-maison { stroke: var(--tw-house); stroke-dasharray: 1 3; }
.tw-hist text { font-size: 13px; fill: var(--ns-text); }
.tw-histos { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 0.8em 1.2em; }
.tw-histos figure { margin: 0; }
.tw-histos figcaption { font-weight: bold; color: var(--ns-title); }
.tw-tabs { margin: 0.6em 0; }
.tw-tabs a.active { color: var(--ns-accent-dark); text-decoration: underline; }
.tw-me td { font-weight: bold; background: var(--ns-accent-soft); }
.tw-solutions { display: grid; grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr)); gap: 0.6em 1.2em; }
.tw-solution-card h3 { margin-top: 0.4em; }
.tw-confirm { margin-right: 0.6em; }
/* The box of a long label.inline (a flex box under a finger) keeps its size. */
.tw-confirm input { flex: none; }

/* Members' workshops: list, editor, review */
.tw-note { font-style: italic; white-space: pre-line; }
.tw-box { margin: 0.8em 0; padding: 0.4em 0.6em; border: 1px solid var(--ns-border); border-radius: var(--ns-radius-sm); }
.tw-box summary { color: var(--ns-title); }
.tw-editor fieldset { margin: 0.6em 0; }
.tw-input-row { margin: 0.3em 0; }
.tw-input-row input { width: 9rem; }
.tw-number { width: 4.5rem; }
.tw-wide { width: 100%; max-width: 30rem; font: inherit; }

/* Admin: reports */
.tw-signals td { vertical-align: top; }
.tw-invalidate input { width: 8rem; }
.tw-player { display: block; margin: 0.4em 0; }

/* Under a finger, or at 640 px and less: the game's own small controls are targets of 44 px, as the site's (the base
   gives them to buttons, fields, summaries and label.inline). A tool keeps a padding, not a flex box: the space between
   its sign and its name stays. */
@media (max-width: 640px), (pointer: coarse) {
    .tw-crumbs a, .tw-tabs a, .tw-learn { display: inline-flex; align-items: center; min-height: var(--ns-target); }
    .tw-tool, .tw-side label { padding-block: 0.625rem; }
}