/*
 * A present, empty --show-night enables the optional night tokens below.
 * When the switch is unset, a token containing var(--show-night) is invalid
 * and the component's existing light value is used. This needs only CSS
 * custom properties, including for visitors who disable JavaScript.
 */
@media screen {
  :root {
    --show-night: initial;
    --night-canvas: var(--show-night) #101923;
    --night-footer: var(--show-night) #0c1725;
    --night-surface: var(--show-night) #182638;
    --night-ink: var(--show-night) #edf3fa;
    --night-secondary: var(--show-night) #c2d0df;
    --night-quiet: var(--show-night) #adbed0;
    --night-rule: var(--show-night) #384c61;
    --night-control: var(--show-night) #829bb6;
    --night-link: var(--show-night) #9bc6ff;
    --night-hover: var(--show-night) #c6ddff;
    --night-soft: var(--show-night) #213850;
    --night-mid: var(--show-night) #526d8c;
    --night-navy: var(--show-night) #c5defd;
    --night-banner: var(--show-night) #183b60;
    --night-on-action: var(--show-night) #10253c;
    --night-chart: var(--show-night) #98afca;
    --night-track: var(--show-night) #394c61;
    --night-attention: var(--show-night) #ffd2a1;
    --night-attention-soft: var(--show-night) #3a2b20;
    --night-attention-rule: var(--show-night) #d9a36a;
    --night-chart-amber: var(--show-night) #6f4c25;
    --night-error: var(--show-night) #ffb1b9;
  }
  :root[data-theme="dark"] { --show-night: ; color-scheme: dark; }
  :root[data-theme="light"] { color-scheme: light; }
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) { --show-night: ; color-scheme: dark; }
  }
}
@media print {
  :root { color-scheme: light; }
  /* WebKit can retain the last screen picture when print preview opens. */
  .site-head .identity picture { display: none; }
  .site-head .identity::before {
    content: url("/assets/insurance-calculator.svg");
    display: block;
    width: 40px;
    height: 40px;
  }
}

/* Change the inks of inline diagrams while retaining each series' original
   light color, hatching, dimensions and text alternative. */
@media screen {
  figure svg [stroke="#1949a1"] { stroke: var(--blue); }
  figure svg [fill="#1949a1"] { fill: var(--blue); }
  figure svg [stroke="#ad5b22"] { stroke: var(--night-attention, #ad5b22); }
  figure svg [fill="#ad5b22"] { fill: var(--night-attention, #ad5b22); }
  figure svg [stroke="#865123"] { stroke: var(--night-attention, #865123); }
  figure svg [stroke="#885025"] { stroke: var(--night-attention, #885025); }
  figure svg [fill="#885025"] { fill: var(--night-attention, #885025); }
  figure svg [fill="#17385e"] { fill: var(--night-navy, #17385e); }
  figure svg [stroke="#a2b8d1"] { stroke: var(--night-chart, #a2b8d1); }
  figure svg [stroke="#bfcee3"] { stroke: var(--night-chart, #bfcee3); }
  :is(.mi-ticket,.term-map,.property-figure) svg :is([fill="#fff"],[fill="white"]) { fill: var(--surface); }
  .property-figure svg [stroke="#163965"] { stroke: var(--navy); }
  .property-figure svg [fill="#163965"] { fill: var(--navy); }
  .property-figure svg [stroke="#b9ceed"] { stroke: var(--blue-mid); }
  .property-figure svg [stroke="#5a708c"] { stroke: var(--chart-secondary); }
  .property-figure svg [fill="#edf4ff"] { fill: var(--blue-soft); }
  .property-figure svg [fill="#dce9fa"] { fill: var(--night-soft, #dce9fa); }
  .property-figure svg [stroke="#8f470e"] { stroke: var(--attention); }
  .property-figure svg [fill="#fff3e6"] { fill: var(--night-attention-soft, #fff3e6); }
  .property-figure svg [fill="#713c12"] { fill: var(--night-attention, #713c12); }
}