/* The look of the water, shared by the player and the contact sheet. It lives in one file
   because the review sheet exists to tell you what a child will see, and a sheet with its
   own private copy of the palette stops being able to do that. */

:root {
  --water: #e9f1f6;   --ink: #16232c;    --faint: #6c8291;
  --hull: #16394f;    --wake: #4d7d9c;   --mark: #e2700c;
  --band: #e2700c;    --live: #2f8f52;   --ghost: #16394f;
  --panel: #f6fafc;   --edge: #cfdde5;
}
@media (prefers-color-scheme: dark) {
  :root {
    --water: #0d1c26; --ink: #e6eef3;    --faint: #7d95a3;
    --hull: #dce8f0;  --wake: #6f9db9;   --mark: #ff8b26;
    --band: #ff8b26;  --live: #4dc077;   --ghost: #dce8f0;
    --panel: #10222e; --edge: #23404f;
  }
}

.water { fill: var(--water); }
.ripple { stroke: var(--wake); stroke-width: 1; opacity: .16; fill: none; stroke-linecap: round; }
/* A gust is darker water. Kept very light: it is a thing in the scene, not a thing being
   measured, and it must never read as loudly as the shapes that answer the item. */
.gust { fill: url(#gustfade); }
.gust-in { stop-color: var(--wake); stop-opacity: .17; }
.gust-out { stop-color: var(--wake); stop-opacity: 0; }
.wake { fill: none; stroke: var(--wake); stroke-width: 1.6; stroke-linecap: round; }
.pointing { fill: none; stroke: var(--hull); stroke-width: 1.3; stroke-dasharray: 2 4; opacity: .5; }
.was-pointing { fill: none; stroke: var(--wake); stroke-width: 1; stroke-dasharray: 1 5; opacity: .38; }
.yours { fill: none; stroke: var(--hull); stroke-width: 2.2; stroke-linecap: round; }
.ghost { fill: none; stroke: var(--ghost); stroke-width: 2; stroke-dasharray: 5 4; opacity: .42; }
.ghost-dot { fill: none; stroke: var(--ghost); stroke-width: 1.6; opacity: .55; }
.tack-dot { fill: var(--hull); }
.you-hull { fill: var(--hull); }
/* Separates the rig from the solid hull it lies over, and from the water beyond it. */
.rig-halo { stroke: var(--water); stroke-width: 4.5; stroke-linecap: round; }
.you-rig { stroke: var(--hull); stroke-width: 1.8; stroke-linecap: round; }
.you-vane { stroke: var(--hull); stroke-width: 1.2; opacity: .6; }
.mark { fill: var(--mark); }
.band { fill: var(--band); opacity: .15; stroke: var(--band); stroke-width: 1; stroke-opacity: .5; }
.layline { fill: none; stroke: var(--mark); stroke-width: 1.4; stroke-dasharray: 7 5; }
.live-strip { fill: none; stroke: var(--live); stroke-width: 9; stroke-linecap: round; opacity: .3; }
.gap { fill: none; stroke: var(--mark); stroke-width: 2.4; stroke-linecap: round; }
.waste { fill: url(#hatch); stroke: none; }
.hatch { stroke: var(--mark); stroke-width: 1.6; }

/* THE CROSS. Her hull is an outline and yours is filled, so which one is you never needs
   a label. */
.her-hull { fill: none; stroke: var(--hull); stroke-width: 1.6; }
.her-rig { stroke: var(--hull); stroke-width: 1.4; stroke-linecap: round; opacity: .8; }
.her-vane { stroke: var(--hull); stroke-width: 1; opacity: .5; }
.tap-dot { fill: none; stroke: var(--faint); stroke-width: 1.8; }
.tap-pip { fill: var(--faint); }

.unsafe { fill: var(--mark); opacity: .13; stroke: var(--mark); stroke-width: 1; stroke-opacity: .45; }
/* The half a boat length either side of the fan that grades as "too close". Fainter than the fan
   and with no outline, so it reads as a fringe on it rather than as a second shape. */
.too-close { fill: var(--mark); opacity: .07; stroke: none; }
/* The fan as it would have been with no patch on the water. Outline only: it is a counterfactual,
   not a second answer, and a filled one competes with the fan that actually graded the tap. */
.without-puff { fill: none; stroke: var(--faint); stroke-width: 1.4; stroke-dasharray: 2 5; opacity: .8; }
.nogo { fill: none; stroke: var(--faint); stroke-width: 1.2; stroke-dasharray: 3 4; opacity: .7; }
.asked { fill: none; stroke: var(--mark); stroke-width: 1.8; stroke-dasharray: 6 4; }
.penalty { fill: none; stroke: var(--mark); stroke-width: 2; stroke-linecap: round; }
.bang { fill: none; stroke: var(--mark); stroke-width: 3; }

/* WHICH END */
.startline { fill: none; stroke: var(--faint); stroke-width: 1.4; stroke-dasharray: 4 4; }
.pin { fill: var(--mark); }
.committee { fill: var(--faint); opacity: .55; }
.legray { fill: none; stroke: var(--wake); stroke-width: 1.1; stroke-dasharray: 2 4; opacity: .55; }
.bisector { fill: none; stroke: var(--band); stroke-width: 1.8; }
.rung { fill: none; stroke: var(--band); stroke-width: 1.2; stroke-dasharray: 7 5; opacity: .75; }
.gain { stroke: var(--live); stroke-width: 2.4; stroke-linecap: round; }
.favoured { fill: none; stroke: var(--live); stroke-width: 2.2; opacity: .85; }
.endlabel { fill: var(--faint); font: 11px -apple-system, sans-serif; text-anchor: middle; }

.twd { stroke: var(--faint); stroke-width: 2.8; stroke-linecap: round; }
.twd-head { fill: var(--faint); }

.ruler { fill: none; stroke: var(--faint); stroke-width: 1.2; }
.ruler-tick { stroke: var(--faint); stroke-width: 1; }
.ruler-label { fill: var(--faint); font: 11px -apple-system, sans-serif; }