/* Terrastead (domain Strategy): classes ts-*, loaded on the pages of the game only (DECISIONS arbitrage 10). */

/* Colours of the game, each named once (v2/CHARTE.md §2: a game writes no colour in its rules, its own palette stays in
   prefixed tokens). The frame of the pages and the states take the site's tokens (--ns-* of neurostim.css). */
:root {
    /* Modules of the grid: the core of the colony, a module cut from it. */
    --ts-core: #ffe9a8;
    --ts-unlinked: #f3d6d6;
    /* The map: its night (frame, legend, holes and outlines), cells and zones, routes, centre. */
    --ts-night: #1d1a24;
    --ts-cell: #2a2633;
    --ts-cell-line: #3b3546;
    --ts-z-sanctuary: #2f3d33;
    --ts-z-near: #2c2a35;
    --ts-z-high: #322b2f;
    --ts-z-far: #382a2b;
    --ts-z-ring: #3f2526;
    --ts-owned: #4a4a6a;
    --ts-route: #8d8499;
    --ts-route-far: #5d5568;
    --ts-canyon: #b08a5a;
    --ts-centre: #ffffff;
    /* Pollution classes (CONCEPTION §13.3), on the map and in its legend. */
    --ts-pol-0: #23262b;
    --ts-pol-1: #3a4130;
    --ts-pol-2: #5a5a2a;
    --ts-pol-3: #7a5222;
    --ts-pol-4: #8f2f1f;
    /* Types of site (partials/symbols). */
    --ts-t-landing: #ffd34d;
    --ts-t-plain: #b9b2c4;
    --ts-t-ore: #c97b4a;
    --ts-t-ice: #8fd3f0;
    --ts-t-vent: #e2643d;
    --ts-t-crater: #c9c1d6;
    --ts-t-highland: #9aa36a;
    --ts-t-crystal: #c38cf0;
    --ts-t-ruin: #7e7a6f;
    --ts-t-spire: #f2f2f2;
    --ts-t-nest: #d23c4b;
    /* Natives (the line of a colony, a nest that fed, a swarm) and the marks of the map at z=1. */
    --ts-natives: #8f2f1f;
    --ts-feeding: #ff5a36;
    --ts-swarm: #c0392b;
    --ts-mark-op: #f5f5f5;
    --ts-mark-col: #ff5a5a;
    /* Colours of the charters, in the order of Labels::COLORS (rouge, vert, jaune, bleu…). */
    --ts-owner-0: #e6194b;
    --ts-owner-1: #3cb44b;
    --ts-owner-2: #ffe119;
    --ts-owner-3: #4363d8;
    --ts-owner-4: #f58231;
    --ts-owner-5: #911eb4;
    --ts-owner-6: #46f0f0;
    --ts-owner-7: #f032e6;
    --ts-owner-8: #bcf60c;
    --ts-owner-9: #fabebe;
    --ts-owner-10: #008080;
    --ts-owner-11: #e6beff;
    --ts-owner-12: #9a6324;
    --ts-owner-13: #fffac8;
    --ts-owner-14: #800000;
    --ts-owner-15: #aaffc3;
}

/* The game's menu in five groups (S4). Over twelve links it folds in a <details> at 640 px and less (v2/CHARTE.md
   §4.3), its summary naming the page in progress, its groups one a line; above, it stays open without its summary
   (::details-content; a browser without it shows the summary, the menu one click away). */
.ts-nav { margin: 0 0 var(--ns-space-4); padding: var(--ns-space-2) var(--ns-space-3); background: var(--ns-tint); border: 1px solid var(--ns-border); border-radius: var(--ns-radius); }
.ts-nav-groups { display: flex; flex-wrap: wrap; gap: .3em 1.4em; }
.ts-nav-group { display: flex; flex-wrap: wrap; align-items: baseline; gap: .2em .7em; }
.ts-nav-title { font-weight: 700; color: var(--ns-title); }
.ts-nav-fold > summary { font-weight: 700; }
.ts-nav-here { font-weight: 400; }
@supports selector(::details-content) {
    @media (min-width: 641px) {
        .ts-nav-fold > summary { display: none; }
        .ts-nav-fold::details-content { content-visibility: visible; }
    }
}
@media (max-width: 640px) {
    .ts-nav { padding-block: 0; }
    .ts-nav-groups { flex-direction: column; gap: 0; padding: 0 0 var(--ns-space-2); }
    .ts-nav-group { gap: 0 .9em; }
    /* Its own marker, silent for a screen reader (the <details> says open or closed). */
    .ts-nav-fold > summary { list-style: none; }
    .ts-nav-fold > summary::-webkit-details-marker { display: none; }
    .ts-nav-fold > summary::before { content: "▸" / ""; margin-right: .5em; }
    .ts-nav-fold[open] > summary::before { content: "▾" / ""; }
}
.ts-skip { position: absolute; left: -10000px; }
.ts-skip:focus { position: static; display: inline-block; margin: 0 0 .4em; padding: .2em .5em; background: var(--ns-accent-dark); color: var(--ns-on-accent); }
#ts-page:focus { outline: none; }
.ts-nav a { text-decoration: none; }
.ts-nav a.ts-current { color: var(--ns-accent-dark); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .3em; }

.ts-facts th { text-align: left; width: 14em; }
.ts-tools, .ts-moves { margin: .5em 0; }
.ts-moves a { margin-right: .6em; }

.ts-map-frame { border: 1px solid var(--ns-border); background: var(--ts-night); max-width: 720px; }
.ts-map { display: block; width: 100%; height: auto; }

.ts-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

/* Cells: zones in faint tones, owned cells brighter. The default of a cell weighs no more than one class (:where), so
   the zone, the charter and the pollution class written after it colour the cell (they lost to .ts-cells path). */
.ts-cells :where(path) { stroke: var(--ts-cell-line); stroke-width: 1.5; fill: var(--ts-cell); }
.ts-zoom-2 .ts-cells path { stroke-width: 3; }
.ts-zoom-3 .ts-cells path { stroke-width: 5; }
.ts-z-sanctuary { fill: var(--ts-z-sanctuary); }
.ts-z-near { fill: var(--ts-z-near); }
.ts-z-high { fill: var(--ts-z-high); }
.ts-z-far { fill: var(--ts-z-far); }
.ts-z-ring { fill: var(--ts-z-ring); }
.ts-owned { fill: var(--ts-owned); }

/* Pollution layer (CONCEPTION §13.3): 0, 1-14, 15-99, 100-499, 500 and more; a fill on the map, a background in the legend. */
.ts-pol-0 { --ts-pol: var(--ts-pol-0); fill: var(--ts-pol); }
.ts-pol-1 { --ts-pol: var(--ts-pol-1); fill: var(--ts-pol); }
.ts-pol-2 { --ts-pol: var(--ts-pol-2); fill: var(--ts-pol); }
.ts-pol-3 { --ts-pol: var(--ts-pol-3); fill: var(--ts-pol); }
.ts-pol-4 { --ts-pol: var(--ts-pol-4); fill: var(--ts-pol); }

.ts-route { stroke: var(--ts-route); stroke-width: 2; fill: none; }
.ts-zoom-2 .ts-route { stroke-width: 4; }
.ts-zoom-3 .ts-route { stroke-width: 5; stroke: var(--ts-route-far); }
.ts-route.ts-canyon { stroke-dasharray: 6 4; stroke: var(--ts-canyon); }
.ts-zoom-2 .ts-route.ts-canyon { stroke-dasharray: 12 8; }

.ts-center { fill: none; stroke: var(--ts-centre); stroke-width: 2; stroke-dasharray: 4 3; }

/* Sites. */
.ts-t-landing { fill: var(--ts-t-landing); }
.ts-t-plain { fill: var(--ts-t-plain); }
.ts-t-ore { fill: var(--ts-t-ore); }
.ts-t-ice { fill: var(--ts-t-ice); }
.ts-t-vent { fill: var(--ts-t-vent); }
.ts-t-crater circle { fill: none; stroke: var(--ts-t-crater); stroke-width: 2; }
.ts-t-highland { fill: var(--ts-t-highland); }
.ts-t-crystal { fill: var(--ts-t-crystal); }
.ts-t-ruin { fill: var(--ts-t-ruin); }
.ts-t-spire { fill: var(--ts-t-spire); }
.ts-t-nest { fill: var(--ts-t-nest); }
.ts-inner { fill: var(--ts-night); }

.ts-legend { list-style: none; padding: 0; columns: 2; }
.ts-legend-icon { width: 1.1em; height: 1.1em; vertical-align: middle; background: var(--ts-night); }

/* Colours of the charters (16, in the order of Labels::COLORS): a fill on the map, a background on the swatches and chips. */
.ts-owner-0 { --ts-owner: var(--ts-owner-0); } .ts-owner-1 { --ts-owner: var(--ts-owner-1); } .ts-owner-2 { --ts-owner: var(--ts-owner-2); } .ts-owner-3 { --ts-owner: var(--ts-owner-3); }
.ts-owner-4 { --ts-owner: var(--ts-owner-4); } .ts-owner-5 { --ts-owner: var(--ts-owner-5); } .ts-owner-6 { --ts-owner: var(--ts-owner-6); } .ts-owner-7 { --ts-owner: var(--ts-owner-7); }
.ts-owner-8 { --ts-owner: var(--ts-owner-8); } .ts-owner-9 { --ts-owner: var(--ts-owner-9); } .ts-owner-10 { --ts-owner: var(--ts-owner-10); } .ts-owner-11 { --ts-owner: var(--ts-owner-11); }
.ts-owner-12 { --ts-owner: var(--ts-owner-12); } .ts-owner-13 { --ts-owner: var(--ts-owner-13); } .ts-owner-14 { --ts-owner: var(--ts-owner-14); } .ts-owner-15 { --ts-owner: var(--ts-owner-15); }
[class*="ts-owner-"] { fill: var(--ts-owner); }

/* Lot 1: colony pages. */
.ts-columns { display: flex; flex-wrap: wrap; gap: 1.5em; align-items: flex-start; }
.ts-stocks td, .ts-stocks th { padding: .15em .6em; }
.ts-short td { color: var(--ns-error); font-weight: bold; }
.ts-alert { color: var(--ns-error); font-weight: bold; }
.ts-warn { color: var(--ns-warn); }
.ts-steps li.ts-done { color: var(--ns-muted); text-decoration: line-through; }
.ts-unread td { font-weight: bold; }
.ts-form .field { margin: .4em 0; }
.ts-colors { display: flex; flex-wrap: wrap; gap: .4em .8em; }
.ts-swatch span { display: inline-block; width: 1em; height: 1em; vertical-align: middle; border: 1px solid var(--ns-border-strong); }
.ts-swatch [class*="ts-owner-"] { background: var(--ts-owner); }
.ts-grid { border-collapse: collapse; margin: .6em 0; }
.ts-grid td { border: 1px solid var(--ns-border-strong); padding: 0; width: 6.5em; height: 3.6em; text-align: center; }
.ts-grid form { margin: 0; height: 100%; }
.ts-cell-button { width: 100%; height: 100%; min-height: 3.6em; padding: var(--ns-space-1); font-size: var(--ns-size-sm); font-weight: 400; color: var(--ns-text-strong); background: var(--ns-tint); border: 0; border-radius: 0; cursor: pointer; }
.ts-cell-selected .ts-cell-button { outline: 2px solid var(--ns-accent-dark); }
.ts-m-core { background: var(--ts-core); } .ts-m-empty { background: var(--ns-page); }
.ts-unlinked { background: var(--ts-unlinked); }
/* Natives (lot 6): the line of a colony, a calm threat, one's own row of the swarms, the pollution of the map. */
.ts-natives-line { border-left: 3px solid var(--ts-natives); padding-left: .5em; }
.ts-threat-calm { color: var(--ns-ok); }
.ts-swarms tr.ts-mine td { font-weight: bold; }
.ts-pol-legend { display: inline-block; width: 1em; height: 1em; vertical-align: middle; border: 1px solid var(--ns-border-strong); }
.ts-legend .ts-pol-legend { background: var(--ts-pol); }
.ts-nest-feeding { fill: none; stroke: var(--ts-feeding); stroke-width: 3; }
.ts-swarm { fill: var(--ts-swarm); fill-opacity: .6; stroke: var(--ts-feeding); stroke-width: 2; }

/* Lot 2: owned cells in the colour of their charter, research, chips. */
.ts-cells path.ts-owned { fill-opacity: .55; }
.ts-chip { display: inline-block; width: .9em; height: .9em; vertical-align: middle; border: 1px solid var(--ns-border-strong); }
.ts-chip[class*="ts-owner-"] { background: var(--ts-owner); }
.ts-research tr.ts-done td { color: var(--ns-muted); }

/* Lot 3: trade post of the Landing (book, quartermaster, contracts, ships). */
.ts-market td, .ts-market th { vertical-align: top; }
.ts-market input[type=number] { width: 5em; }
.ts-form .field label { margin-right: .3em; }
.ts-form .field input, .ts-form .field select { margin-right: .8em; }

/* Marks of the map at z=1 (CONCEPTION §3.3): outposts and columns seen. */
.ts-mark-op { fill: var(--ts-mark-op); stroke: var(--ts-night); stroke-width: 1; }
.ts-mark-col { fill: var(--ts-mark-col); stroke: var(--ts-night); stroke-width: 1; }

/* Lot 4: battles (report, list), defense of a colony. */
.ts-battle-won { color: var(--ns-ok); }
.ts-battle-lost { color: var(--ns-error); }
.ts-battle-rounds td, .ts-battle-forces td { font-variant-numeric: tabular-nums; }
.ts-battle-seed { font-size: var(--ns-size-xs); word-break: break-all; }
.ts-defense li form { margin-left: .4em; }

/* Lot 8: ranking, badges of the member page. */
.ts-ranking tr.ts-me td { font-weight: bold; }
.ts-badges { display: flex; flex-wrap: wrap; gap: .3em .5em; }

/* Narrow screens (relecture de Cofferwit, S7): an empty column of a table goes, the numbers of a form stay short. */
.ts-crew input[type=number] { width: 4.5em; }
@media (max-width: 640px) {
    .ts-optional { display: none; }
    /* A table as a list: a row a block, each figure after its name (data-label), the first cell in bold. */
    .ts-stack, .ts-stack tbody, .ts-stack tr { display: block; }
    .ts-stack tr:first-child { display: none; }
    .ts-stack tr { padding: .35em 0; border-bottom: 1px solid var(--ns-border); }
    table.list.ts-stack td { display: inline-block; border: 0; padding: 0 .7em 0 0; }
    table.list.ts-stack td:first-child { display: block; font-weight: bold; }
    .ts-stack td[data-label]::before { content: attr(data-label) " : "; color: var(--ns-muted); }
}

/* Touch targets (v2/CHARTE.md §4.2, audit mobile du 24/10): 44 px at 640 px and less, and under a coarse pointer. A site
   of the map is reached by its transparent disc (partials/svg: half the minimal distance between two sites); a radio or
   a box counts by its label, as label.inline does in the site's base. */
.ts-hit { fill: transparent; }
@media (max-width: 640px), (pointer: coarse) {
    .ts-nav a, .ts-tools a, .ts-moves a, .ts-toc a { display: inline-flex; align-items: center; min-height: var(--ns-target); }
    .ts-moves a { justify-content: center; min-width: var(--ns-target); }
    .ts-swatch { display: inline-flex; align-items: center; gap: .3em; min-height: var(--ns-target); }
    .ts-form label:not(.ts-swatch):has(> input[type=radio], > input[type=checkbox]) { display: flex; align-items: center; gap: .3em; min-height: var(--ns-target); }
}