/* Game "overquota" (DECISIONS arbitrage 10): loaded on its pages only, every class prefixed oq-. Mobile first: one
   column at 320 px, no horizontal scroll. The charte (v2/CHARTE.md): the site's tokens and components (nav.tabs,
   table.list, .flash, .card, .lead, .visually-hidden, .button-primary, buttons of 44 px to the finger) first, the
   classes of the game for what is its own; the game's own colours (--oq-*) declared where they serve. */

.oq-page { max-width: 640px; }
.oq-page h1 { margin-bottom: var(--ns-space-2); }
.oq-skip { position: absolute; left: -10000px; }
.oq-skip:focus { position: static; display: inline-block; margin: 0 0 0.4em; padding: 0.2em 0.5em; color: var(--ns-on-accent); background: var(--ns-accent-dark); }
#oq-after-nav:focus { outline: none; }

.oq-ok { color: var(--ns-ok); }
.oq-warn { color: var(--ns-warn); font-weight: bold; }
.oq-danger { color: var(--ns-error); font-weight: bold; }
.oq-result { font-size: var(--ns-size-lg); font-weight: bold; }
.oq-norefresh { font-size: var(--ns-size-sm); }

/* Crew and run */
.oq-quota p { margin: 0.2em 0; }
.oq-meter { width: 100%; max-width: 360px; height: 14px; }
.oq-depart { margin: 1em 0 0.5em; padding-top: 0.6em; border-top: 1px solid var(--ns-border); }
.oq-inline { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4em; margin: 0.4em 0; }
.oq-code { font-family: var(--ns-font-mono); font-size: 1.2rem; letter-spacing: 0.15em; }
.oq-link { width: 100%; max-width: 420px; }
.oq-company { font-style: italic; color: var(--ns-title); }

/* Workshop: one card per upgrade */
.oq-upgrades { margin: 0.5em 0; padding: 0; list-style: none; }
.oq-upgrades li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.3em 1em; padding: 0.5em 0; border-bottom: 1px solid var(--ns-border); }
.oq-upgrades p { flex: 1 1 14em; margin: 0; }

/* Rankings */
.oq-records dt { margin-top: 0.4em; font-weight: bold; color: var(--ns-title); }
.oq-records dd { margin: 0 0 0 1em; }

/* Gauges of a dive */
.oq-gauges { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0 1em; margin: 0 0 0.3em; }
.oq-gauges p { margin: 0.2em 0; }
.oq-where, .oq-trialhead, .oq-itemtime { margin: 0.2em 0 0.6em; }
.oq-moves { margin: 0 0 1em; padding: 0; list-style: none; }
.oq-moves li { margin: 0 0 0.4em; }
.oq-moves button { width: 100%; text-align: left; font-weight: normal; }
/* To the finger (v2/CHARTE.md, mobile 2): the link that drops the cargo, alone under the moves. */
@media (max-width: 640px), (pointer: coarse) { .oq-drop a { display: inline-flex; align-items: center; min-height: var(--ns-target); } }

/* Map of the deck (SVG 320 x 420) and its table; the colours of the plan on its SVG. */
.oq-plan { margin: 0.5em 0; }
.oq-map {
    --oq-map-bg: #f6f8f8; --oq-map-edge: #d5dede; --oq-map-ink: #34494a; --oq-map-corridor: #8a9a9a; --oq-map-airlock: #dfe8e8;
    --oq-map-done: #e3f1e4; --oq-map-crate: #b26a00; --oq-map-relay: #1e6fa8; --oq-map-relay-bg: #e3f1fb; --oq-map-wreck: #7a4a1e;
    --oq-map-wreck-bg: #f3e1d0;
    display: block; width: 100%; max-width: 320px; height: auto; background: var(--oq-map-bg); border: 1px solid var(--oq-map-edge); border-radius: var(--ns-radius-sm);
}
.oq-map text { font-family: var(--ns-font); text-anchor: middle; fill: var(--oq-map-ink); }
.oq-corridor { stroke: var(--oq-map-corridor); stroke-width: 2; }
.oq-corridor.oq-damaged { stroke-dasharray: 5 4; }
.oq-corridor.oq-open { stroke: var(--ns-accent-dark); stroke-width: 4; }
/* Texts of 13 px at least at scale 1 (CHARTE 4.5); the seconds sit on their corridor, outlined in the colour of the plan. */
.oq-cost { font-size: 13px; paint-order: stroke; stroke: var(--oq-map-bg); stroke-width: 3px; stroke-linejoin: round; }
.oq-airlock rect { fill: var(--oq-map-airlock); stroke: var(--ns-title); stroke-width: 2; }
.oq-airlock text { font-size: 13px; font-weight: bold; }
.oq-room circle { fill: var(--ns-page); stroke: var(--ns-title); stroke-width: 2; }
.oq-room.oq-done circle { fill: var(--oq-map-done); }
.oq-room.oq-reachable circle { stroke: var(--ns-accent-dark); }
.oq-here circle, .oq-airlock.oq-here rect { stroke: var(--ns-accent); stroke-width: 5; }
.oq-glyph { fill: none; stroke: var(--oq-map-ink); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.oq-unknown { font-size: 15px; font-weight: bold; }
.oq-no { font-size: 13px; }
.oq-crate { fill: var(--oq-map-crate); }
.oq-relay { fill: var(--oq-map-relay-bg); stroke: var(--oq-map-relay); stroke-width: 1.4; }
.oq-wreck { fill: var(--oq-map-wreck-bg); stroke: var(--oq-map-wreck); stroke-width: 1.2; stroke-linejoin: round; }
/* The tables of the game are the site's table.list; their cells read from the top, the reader's row in pink. */
.oq-table th, .oq-table td { vertical-align: top; }
.oq-table tr.oq-here { background: var(--ns-accent-soft); }

/* Items of the trials */
.oq-question { font-size: 1.15rem; font-weight: bold; color: var(--ns-box-text); }
.oq-keys { display: flex; flex-wrap: wrap; gap: 6px; max-width: 360px; }
.oq-keys button { min-width: var(--ns-target); min-height: var(--ns-target); font-size: var(--ns-size-lg); }
.oq-keys-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.oq-keys-10 { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 2px; max-width: 520px; }
/* Ten keys on one line: 32 px high on a phone, the game's own size (stronger than the 44 px of the base). */
.oq-keys-10 button { min-width: 0; min-height: 32px; padding: 0.3em 0; font-size: var(--ns-size-sm); font-weight: normal; }
.oq-tape { display: flex; gap: 0.4em; font-family: var(--ns-font-mono); font-size: 2rem; font-weight: bold; color: var(--oq-tape-ink); }
.oq-tape span { min-width: 1.2em; text-align: center; border-bottom: 2px solid var(--ns-border-strong); }
.oq-pattern .mp-patrons figure { margin: 0 0 0.5em; }
.oq-pattern .mp-patrons figure svg { width: 180px; height: auto; }
.oq-pattern .mp-patrons [role="group"] { display: flex; flex-wrap: wrap; gap: 6px; }
.oq-pattern .mp-patrons button { display: flex; flex-direction: column; align-items: center; padding: 4px; background: var(--ns-page); }
.oq-pattern .mp-patrons button svg { width: 64px; height: 64px; }
.oq-previous { margin-top: 1em; }
/* A display hidden at the end of its time, delayed by the time already shown (a reload never shows it longer). */
.oq-expose { animation: oq-hide 1000ms steps(1, end) forwards; }
@keyframes oq-hide { to { visibility: hidden; } }
/* Baie de relais: the four machines. */
.oq-machines { display: grid; gap: 6px; max-width: 360px; }
.oq-machines button { min-height: var(--ns-target); text-align: left; }
.oq-machine-no { display: inline-block; min-width: 1.4em; font-weight: bold; }
/* Baie de câblage: tints of Mnemosaic, each with its pattern (the colour is never the only cue); the copy painted with
   a brush: the label of the brush covers each cell (:has()), three small swatches without it. The inks of the boards
   (wiring, brush, panel of Tamper, tape) on the page of a trial. */
.oq-trial {
    --oq-t0: #f3efe6; --oq-t1: repeating-linear-gradient(45deg, rgba(0, 0, 0, 0.35) 0 2px, transparent 2px 8px), #d55e00; --oq-t2: radial-gradient(circle, rgba(0, 0, 0, 0.45) 2px, transparent 2.5px) 0 0 / 8px 8px, #56b4e9;
    --oq-ink: #26282b; --oq-tape-ink: #222; --oq-cell-line: #d6cfbf; --oq-cell-edge: #b9b0a0; --oq-brush-line: #c9c2b4; --oq-panel-hover: rgba(38, 40, 43, 0.08);
}
.oq-t0 { background: var(--oq-t0); }
.oq-t1 { background: var(--oq-t1); }
.oq-t2 { background: var(--oq-t2); }
.oq-wiring { border-collapse: separate; border-spacing: 3px; }
.oq-wiring td { width: 48px; height: 48px; padding: 0; border: 1px solid var(--oq-cell-line); border-radius: 3px; }
.oq-wiring-input td { width: auto; height: auto; border: 0; }
.oq-wire { position: relative; display: block; width: 56px; height: 56px; }
.oq-wire input { position: absolute; opacity: 0; pointer-events: none; }
.oq-face { position: absolute; inset: 0; background: var(--oq-t0); border: 1px solid var(--oq-cell-edge); border-radius: 3px; }
.oq-wire input.oq-k1:checked ~ .oq-face { background: var(--oq-t1); }
.oq-wire input.oq-k2:checked ~ .oq-face { background: var(--oq-t2); }
.oq-wire input:focus-visible ~ .oq-face { outline: 3px solid var(--ns-accent); }
.oq-wire label { position: absolute; bottom: 3px; width: 15px; height: 15px; border: 1px solid var(--oq-ink); border-radius: 2px; cursor: pointer; }
.oq-wire label.oq-k0 { left: 3px; background: var(--oq-t0); }
.oq-wire label.oq-k1 { left: 20px; background: var(--oq-t1); }
.oq-wire label.oq-k2 { left: 37px; background: var(--oq-t2); }
.oq-brush { display: flex; flex-wrap: wrap; gap: 6px; margin: 0.3em 0 0.6em; padding: 0; border: 0; }
.oq-brush input { position: absolute; opacity: 0; }
.oq-brush label { display: inline-flex; align-items: center; gap: 0.3em; min-height: var(--ns-target); margin: 0; padding: 0 0.7em; border: 2px solid var(--oq-brush-line); border-radius: var(--ns-radius-sm); cursor: pointer; }
.oq-brush input:checked + label { border-color: var(--oq-ink); box-shadow: inset 0 0 0 1px var(--oq-ink); font-weight: bold; }
.oq-brush input:focus-visible + label { outline: 3px solid var(--ns-accent); }
.oq-swatch { display: inline-block; width: 1.1em; height: 1.1em; vertical-align: middle; border: 1px solid var(--oq-cell-edge); border-radius: 2px; }
@supports selector(:has(*)) {
    .oq-wire label { display: none; }
    .oq-answer:has(#oq-brush-0:checked) .oq-wire label.oq-k0,
    .oq-answer:has(#oq-brush-1:checked) .oq-wire label.oq-k1,
    .oq-answer:has(#oq-brush-2:checked) .oq-wire label.oq-k2 { display: block; inset: 0; width: auto; height: auto; border: 0; background: transparent; }
}
/* Panneau trafiqué: the board of Tamper (640 x 480, 8 x 6 cells) and its buttons laid on it, at the size of their cell
   (min-height: 0 against the 44 px of the base, v2/CHARTE.md mobile 2). */
.oq-panel { position: relative; max-width: 640px; aspect-ratio: 4 / 3; }
.oq-panel-img { display: block; width: 100%; max-width: 640px; height: auto; }
.oq-panel-grid { position: absolute; inset: 0; display: grid; grid-template: repeat(6, 1fr) / repeat(8, 1fr); }
.oq-panel-grid button { min-width: 0; min-height: 0; margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; cursor: crosshair; }
.oq-panel-grid button:hover { background: var(--oq-panel-hover); }
.oq-panel-grid button:focus-visible { outline: 3px solid var(--oq-ink); outline-offset: -3px; }
.oq-panel-before { display: none; }
.oq-panel-still { margin-bottom: 0.5em; }
@media (prefers-reduced-motion: reduce) {
    .oq-panel-before { display: block; margin-bottom: 0.5em; }
}
/* A new item or display comes with the reload at the end of the previous one: its buttons answer only after half a
   second, so that a click meant for the item before does not land on it (relecture of Cofferwit 23/10, S1). Not a
   motion: kept when fewer animations are asked. */
.oq-armed button { animation: oq-arm 0.5s; }
@keyframes oq-arm { from, 99% { pointer-events: none; } to { pointer-events: auto; } }
/* Débris: the dot cloud of the socle. */
.oq-debris { display: block; max-width: 100%; height: auto; }

@media (min-width: 641px) {
    .oq-keys-10 button { min-height: 36px; font-size: var(--ns-size-md); }
}
/* The deck table and the day's dives on a phone: seven or eight columns do not fit 390 px. The rooms become a list,
   the day's dives lose their secondary columns (rooms, oxygen, bottle: on the trace of each dive). */
.oq-rooms-list, .oq-narrow-only { display: none; }
.oq-rooms-list ul { margin: 0.3em 0; padding-left: 1.1em; }
.oq-rooms-list li { margin: 0 0 0.5em; }
.oq-rooms-list li.oq-here { background: var(--ns-accent-soft); }
.oq-rooms-title { margin: 0.5em 0 0; color: var(--ns-title); font-weight: bold; }
@media (max-width: 640px) {
    .oq-rooms-table { display: none; }
    .oq-rooms-list, .oq-narrow-only { display: block; }
    .oq-narrow-hide { display: none; }
}