/* The game of code blindfront (shown under its configured name): map, list view, orders, reports. Classes bf- only,
   loaded on the pages of the game (DECISIONS arbitrage 10). Flags in blue (you) and orange (the other side), a pair
   safe for colour-blind players, and always a letter too (V, A). No inline style: the SVG takes its colours here.
   The charte (v2/CHARTE.md): the site's tokens and components (table.list, nav.tabs, .flash, .lead, .inline,
   .visually-hidden) first, the classes of the game for what is its own. */

/* Colours of the game, on :root (its pages have no common wrapper): the flags (blue: you, orange: the other side,
   grey: neutral), the ink and the notes of the map. */
:root {
    --bf-mine: #1f6fb2; --bf-mine-bg: #e3eef8; --bf-theirs: #d16a00; --bf-theirs-bg: #fbeadb; --bf-theirs-badge: #b35900;
    --bf-neutral: #8a8a99; --bf-neutral-bg: #f2f2f5; --bf-neutral-badge: #6e6e7d; --bf-edge: #8a8a99; --bf-on-badge: #fff;
    --bf-map-ink: #10243a; --bf-map-text: #222; --bf-note-line: #333; --bf-note: #fff4c2; --bf-note-old-line: #999; --bf-note-old: #ececec;
}

.bf-actions li { margin: .35em 0; }
.bf-opponent { margin-top: 0; }
.bf-status { font-weight: bold; }
.bf-alert { color: var(--ns-warn); font-weight: bold; }
.bf-waiting, .bf-room { background: var(--ns-tint); padding: .4em .6em; border-radius: var(--ns-radius-sm); }
.bf-sent { margin: .3em 0 .3em 1.2em; }
.bf-room { margin: .8em 0; }
/* A line of links out of a sentence: the site's .links (p for one link, ul for several, 44 px to the finger); the game
   keeps the space above it (stronger than the margin of ul.links). */
.links.bf-links { margin-top: 1.2em; }

/* The doctrine editor (CONCEPTION 7.4): one fieldset per rule, its lines « si », « et », « alors » wrap on a phone. */
.bf-rule { margin: .8em 0; }
.bf-rule-line { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .3em .6em; margin: .3em 0; }
.bf-rule-word { font-weight: bold; min-width: 3em; }
/* A field never wider than its line: its select shrinks (390 px). */
.bf-rule-field { display: inline-flex; flex-direction: column; min-width: 0; max-width: 100%; }
.bf-rule-field label { font-size: var(--ns-size-xs); color: var(--ns-muted); }
.bf-rule-field select { max-width: 100%; }
.bf-phrase { font-style: italic; margin: .4em 0 0; }
.bf-warning { color: var(--ns-warn); }
.bf-phrases li { margin: .3em 0; }

/* The tables of the game are the site's table.list; their cells read from the top. A long login in the name of a base
   wraps instead of pushing the table out of a phone screen, but the column keeps the width of a short word (anywhere
   alone let it shrink to one letter a line at 390 px). */
.bf-table th, .bf-table td { vertical-align: top; }
.bf-table tr > :first-child { min-width: 6em; overflow-wrap: anywhere; }

.bf-board { max-width: 420px; margin: .6em auto; }
.bf-map { display: block; width: 100%; height: auto; }
.bf-legend { font-size: var(--ns-size-sm); text-align: center; margin: .2em 0 0; }
.bf-missed { font-weight: 600; }
.bf-edge { stroke: var(--bf-edge); stroke-width: 3; }
.bf-node { stroke-width: 4; }
.bf-node.bf-flag-mine { stroke: var(--bf-mine); fill: var(--bf-mine-bg); }
.bf-node.bf-flag-theirs { stroke: var(--bf-theirs); fill: var(--bf-theirs-bg); }
.bf-node.bf-flag-neutral { stroke: var(--bf-neutral); fill: var(--bf-neutral-bg); }
.bf-node-link:hover .bf-node, .bf-node-link:focus .bf-node { stroke-width: 6; }
/* The texts of the map count at their size as shown (v2/CHARTE.md, mobile 5): 13 units at least, 13.5 px on a phone of
   390 px where the map is 332 px wide, 17 px at its 420 px; the rectangles and offsets of partials/map and Board follow. */
.bf-units { font-size: 22px; font-weight: bold; text-anchor: middle; fill: var(--bf-map-ink); }
.bf-decoys { font-size: 13px; text-anchor: middle; fill: var(--bf-map-ink); }
.bf-name { font-size: 13px; fill: var(--bf-map-text); }
.bf-anchor-middle { text-anchor: middle; }
.bf-anchor-start { text-anchor: start; }
.bf-badge { stroke: none; }
.bf-badge.bf-flag-mine { fill: var(--bf-mine); }
.bf-badge.bf-flag-theirs { fill: var(--bf-theirs-badge); }
.bf-badge.bf-flag-neutral { fill: var(--bf-neutral-badge); }
.bf-badge-text { font-size: 13px; font-weight: bold; fill: var(--bf-on-badge); text-anchor: middle; }
.bf-info { stroke: var(--bf-note-line); stroke-width: 1; fill: var(--bf-note); }
.bf-info-old { stroke: var(--bf-note-old-line); fill: var(--bf-note-old); }
.bf-info-text { font-size: 13px; font-weight: bold; text-anchor: middle; fill: var(--bf-map-text); }
.bf-info-text-old { font-weight: normal; fill: var(--ns-muted); }

.bf-orders details, .bf-details { margin: .5em 0; padding: var(--ns-space-2) var(--ns-space-3); border: 1px solid var(--ns-border); border-radius: var(--ns-radius-sm); }
.bf-pair { display: flex; flex-wrap: wrap; gap: .3em .6em; align-items: center; }
.bf-pair input[type="number"] { width: 4em; }
.bf-pair-name { min-width: 10em; }
.bf-move { border: none; padding: 0; margin: .4em 0; }
.bf-group { border: none; padding: 0; margin: 0; min-width: 0; }
.bf-buttons button { margin-right: .6em; }

.bf-report dt { float: left; clear: left; width: 9em; font-weight: bold; }
.bf-report dd { margin: 0 0 .25em 9.5em; }
.bf-next { font-weight: bold; }
.bf-result { font-size: var(--ns-size-lg); font-weight: bold; }
.bf-sentences li { margin: .2em 0; }
.bf-turns a, .bf-turns strong { margin-right: .6em; }

@media (max-width: 520px) {
    .bf-report dt { float: none; width: auto; }
    .bf-report dd { margin-left: 1em; }
    .bf-list th:nth-child(6), .bf-list td:nth-child(6) { display: none; }
}

/* To the finger (v2/CHARTE.md, mobile 2): the links of the actions of the home page, the jump to the orders, the turns of
   a replay at 44 px (the lines of links by the site's .links), a short link (the previous days) as wide as a target; each
   choice of the orders on its own line, its label the target. */
@media (max-width: 640px), (pointer: coarse) {
    .bf-actions a, .bf-skip, .bf-turns a { display: inline-flex; align-items: center; min-height: var(--ns-target); }
    .bf-links a, .bf-actions a, .bf-skip, .bf-turns a { justify-content: center; min-width: var(--ns-target); }
    .bf-group .field { display: flex; align-items: center; margin: 0; }
    .bf-group label.inline { flex: 1; }
}

/* Front du jour (lot 6): the reader's own row of a ranking. */
.bf-me td { font-weight: bold; background: var(--ns-accent-soft); }

/* The cost of the orders, filled by blindfront-game.js (lot 6b); empty without it. */
.bf-cost:empty { display: none; }