/* What both pages (index.html, the watch page, and play.html) draw with: the colours, light and dark, and how a
   scene is drawn, the town, a floor's map of its cells and the inside of a unit (site/town.js draws them). */
/* The colours, light and, following the viewer's setting, dark. The categorical slots are eight hues, then the same
   eight a step darker or lighter (9-16), so a chart of more than eight things, the firms by type, gives each its
   own; each set is checked, pair by neighbouring pair, for colour-blind readers against its own card. */
:root {
  color-scheme: light;
  --plane: #faf8f5; --card: #ffffff; --line: #e6e1da; --ink: #222222; --ink-2: #52514e; --muted: #776f66;
  --accent: #a0522d; --accent-ink: #ffffff; --wash: #f6f2ec; --field: #d8d1c7; --disabled: #c9c2b8;
  --disabled-ink: #ffffff; --error: #aa3333; --node: #898781; --baseline: #c3c2b7;
  --good: #2e7d32; --warn: #b07800;   /* status, beside --error: a sector's health, each with its word */
  --g1: #2a78d6; --g2: #eb6834; --g3: #1baf7a; --g4: #eda100; --g5: #e87ba4; --g6: #008300; --g7: #4a3aa7;
  --g8: #e34948; --g9: #0054a9; --g10: #bf4404; --g11: #06865c; --g12: #bd7f03; --g13: #bf5680; --g14: #3da938;
  --g15: #695fcf; --g16: #b81824;
  /* The Real Estate tab's town: each use of space, in the real estate table's order (homes, shops, bays, fields), past
     the last a categorical colour; the city's land, a building's plot, roads and their lanes, the ground's sides;
     windows lit and dark; and what a building's top is lightened towards and its far side darkened towards. And what
     a field's look is drawn in (FIELD_LOOKS): a coop's walls and roof, its yard, fence and hens; a pit's rock; a
     tree's leaves and trunk; a solar panel; a pump house's walls and its tank; a barn's, as a coop's, and its
     pasture's grass and cows. And what the inside of a unit is drawn
     in (THINGS, GROUNDS): its floor, walls and a field's land; and the things standing in it, their steel, iron, an
     oven's glow, glass, wood, crates, paint, a tractor's green, white, and a person's skin, legs and hair. */
  --use-1: #2671cc; --use-2: #eda100; --use-3: #9a9188; --use-4: #98b35f;
  --land: #ece6dc; --lot: #ddd6cb; --road: #6f6a64; --lane: #efe9df; --base-left: #cfc6b9; --base-right: #b9b0a3;
  --lit: #fff3c8; --unlit: #2b2926; --sky: #ffffff; --shade: #000000;
  --barn: #b4533c; --roof: #6e4a3c; --yard: #d6c08f; --fence: #7d5f3f; --hen: #fbf7ef; --rock: #a7a29b;
  --leaf: #3f8a3a; --trunk: #7a5434; --panel: #24467f; --house: #cdbda6; --tank: #8fa5b8;
  --floor: #ebe4d8; --wall: #e3dcd0; --soil: #9a7752; --moss: #b9c98e; --grass: #c5d49a;
  --steel: #8d99a6; --iron: #565e68; --glow: #ff9a3c; --glass: #bfdcec; --wood: #a87447; --crate: #c49a64;
  --paint: #e5a01a; --green: #3f8a4a; --white: #eeebe6; --skin: #e2b48e; --legs: #34495e; --hair: #3a2a20;
  --cloth: #7d6a9c;
  /* The widest what's unfolded under a table's row is (a good's market, a founding's detail), kept in view as its box
     scrolls sideways on a phone: the window less the page's sides, the box's border and the cell's padding. */
  --unfolded: calc(100vw - 42px);
}
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --plane: #0d0d0d; --card: #1a1a19; --line: #2c2c2a; --ink: #ffffff; --ink-2: #c3c2b7; --muted: #898781;
    --accent: #e08a5c; --accent-ink: #0d0d0d; --wash: #242422; --field: #3a3936; --disabled: #383835;
    --disabled-ink: #898781; --error: #f08070; --baseline: #383835;
    --good: #5cb860; --warn: #e0a830;
    --g1: #3987e5; --g2: #d95926; --g3: #199e70; --g4: #c98500; --g5: #d55181; --g6: #008300; --g7: #9085e9;
    --g8: #e66767; --g9: #186bc7; --g10: #b73e00; --g11: #018059; --g12: #966201; --g13: #b63367; --g14: #329f2e;
    --g15: #7669cb; --g16: #c64b4d;
    --use-1: #3987e5; --use-2: #c98500; --use-3: #807870; --use-4: #6f8f3d;
    --land: #2a2926; --lot: #34322e; --road: #56534e; --lane: #8f8a82; --base-left: #1f1e1c; --base-right: #161514;
    --lit: #f2d27a; --unlit: #0d0d0d; --sky: #e8e4dc; --shade: #000000;
    --barn: #9c4733; --roof: #5c3e32; --yard: #6b5c3e; --fence: #a3825e; --hen: #e8e2d6; --rock: #78736c;
    --leaf: #367a30; --trunk: #6a4a2e; --panel: #3b65b3; --house: #9a8c78; --tank: #6f8597;
    --floor: #34322e; --wall: #66615a; --soil: #5e4833; --moss: #4f5f38; --grass: #5d6b45;
    --steel: #6f7a86; --iron: #474e57; --glow: #f08a2c; --glass: #6f93a8; --wood: #8a5e38; --crate: #9c7a4e;
    --paint: #c48a14; --green: #357a40; --white: #bdb9b2; --skin: #c4987a; --legs: #2a3a4a; --hair: #2a1e17;
    --cloth: #5e4f78;
  }
}

/* A warning in a panel's words, both pages: a firm heading for default on its contracts (contractWarning). */
p.warning { color: var(--error); font-weight: 600; }

/* The town drawn as a model (townDrawing, buildingShapes): its ground, roads, buildings and fields, lit on top and
   shaded on their far sides; a plot tinted by a page's overlay (--c); the plot picked outlined. */
svg.town, svg.interior { display: block; width: 100%; height: auto; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
svg.town.zoomed, svg.interior.zoomed { touch-action: none; cursor: grab; }   /* the town, and a unit's inside */
svg.town [data-plot] { cursor: pointer; }
/* The plots' edges and the picked one's outline as thick zoomed in as out; the town's own lines grow with it. */
.estate .land, .estate .lot, .estate .field, .estate .halo, .estate .outline { vector-effect: non-scaling-stroke; }
.estate .land { fill: var(--land); stroke: var(--plane); stroke-width: 0.8; }
.estate .lot { fill: var(--lot); stroke: var(--plane); stroke-width: 0.8; }
.estate .road { fill: var(--road); }
.estate .lane { fill: none; stroke: var(--lane); stroke-width: 1; stroke-dasharray: 3.5 3.5; }
.estate .base-left { fill: var(--base-left); }
.estate .base-right { fill: var(--base-right); }
.estate .left, .estate .flat { fill: var(--c); }   /* --c: its use's colour, or a field's part's */
.estate .right { fill: color-mix(in srgb, var(--c), var(--shade) 30%); }
.estate .top { fill: color-mix(in srgb, var(--c), var(--sky) 50%); }
.estate .field { fill: color-mix(in srgb, var(--c), var(--sky) 55%); stroke: var(--plane); stroke-width: 0.8; }
.estate .rows { fill: none; stroke: color-mix(in srgb, var(--c), var(--shade) 15%); stroke-width: 1.6; stroke-linecap: round; }
.estate .rows.fallow { stroke-dasharray: 1 3.5; opacity: 0.55; }
.estate .fence { fill: none; stroke: var(--fence); stroke-width: 0.7; stroke-linecap: round; }   /* a field's lines */
.estate .glint { fill: none; stroke: color-mix(in srgb, var(--panel), var(--sky) 45%); stroke-width: 0.5; }
.estate .seam { fill: none; stroke: color-mix(in srgb, var(--c), var(--shade) 45%); stroke-width: 0.5; }   /* between units */
.estate .lit { fill: var(--lit); }
.estate .unlit { fill: var(--unlit); }
.estate .scaffold { fill: color-mix(in srgb, var(--card) 55%, transparent); stroke: var(--ink-2); stroke-width: 1; stroke-dasharray: 2.5 2; }
.estate .crane { fill: none; stroke: var(--ink-2); stroke-width: 1.6; stroke-linecap: round; }
.estate .halo, .estate .outline { fill: none; stroke-linejoin: round; }
.estate .halo { stroke: var(--card); stroke-width: 5; }
.estate .outline { stroke: var(--ink); stroke-width: 2; }
.estate .post { fill: none; stroke: var(--ink-2); stroke-width: 1.2; }
.estate .sign { fill: var(--accent); }   /* a building up for sale at its auction */
.estate .tint { fill: var(--c); fill-opacity: 0.6; }
/* A floor's map of its parcel's cells (cellMap), in cells: each unit a block of them, let in its use's colour. */
.cellmap { display: block; width: 100%; max-width: calc(var(--across) * 7px); height: auto; }
.cellmap .ground { fill: var(--lot); }
.cellmap .plotline { fill: none; stroke: var(--plane); stroke-width: 0.4; }
.cellmap .unit { fill: var(--c); stroke: var(--card); stroke-width: 0.25; }
.cellmap .unit.vacant { fill: var(--card); stroke: var(--muted); }
.cellmap .being { fill: color-mix(in srgb, var(--c) 30%, transparent); stroke: var(--ink-2); stroke-width: 0.25; stroke-dasharray: 0.6 0.5; }
.cellmap [data-unit] { cursor: pointer; }   /* a unit, opening its space */
.cellmap [data-unit]:hover { stroke: var(--ink); stroke-width: 0.5; }
/* Inside a unit (spaceDrawing): drawn as the town is (the .estate faces), its floor's cells' lines, the floor each
   thing serves tinted, its edge dashed on a field's land, a thing with no room inside on a dashed pad, and what's under
   the pointer outlined. */
svg.interior { max-height: 60vh; }
.interior .cellline { fill: none; stroke: color-mix(in srgb, var(--floor), var(--shade) 12%); stroke-width: 0.5; }
.interior .served { fill: color-mix(in srgb, var(--c) 24%, transparent); }
.interior .served.edge { fill: none; stroke: color-mix(in srgb, var(--c) 70%, transparent); stroke-width: 0.8; stroke-dasharray: 3 2; }
.interior .pad { fill: none; stroke: var(--accent); stroke-width: 1.2; stroke-dasharray: 3 2; }
.interior .rows { stroke: var(--c); stroke-width: 1.2; }
.interior.flat .left, .interior.flat .right, .interior.flat .top { stroke: color-mix(in srgb, var(--c), var(--shade) 45%); stroke-width: 0.4; }
.interior .hover .left, .interior .hover .right, .interior .hover .top, .interior .hover .flat { stroke: var(--ink); stroke-width: 1; }
.interior .hover .served { fill: color-mix(in srgb, var(--c) 45%, transparent); }