/* =====================================================================
   The design template: every colour, font, size and shape the interface
   uses, as CSS custom properties. Components read these and nothing else.
   ui/DESIGN.md states the template -- Ensō: warm paper, ink in four steps,
   square corners, colour only where it carries meaning, and a figure never
   set in mono -- and why it was chosen.

   Themes: the default follows the operating system. <html data-theme="dark">
   or data-theme="light" (set by the theme switch) wins over the system.
   ===================================================================== */
/* The three faces, from ui/fonts/ and from nowhere else: nothing is fetched at
   runtime, because the product is self-hosted and runs on a LAN that may never
   reach the internet. ui/fonts/README.md says where each file came from and
   under which licence. font-display: swap on every face, so text is readable
   while the file loads.

   Source Serif 4 and IBM Plex Sans are one variable file each: asking Google
   Fonts for weight 400 and for weight 600 returns the same bytes. IBM Plex Mono
   has no variable build, so its two weights are two files. */
@font-face {
  font-family: 'Source Serif 4';
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
  src: url('../fonts/SourceSerif4-latin-var.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 100 700;
  font-stretch: 100%;
  font-display: swap;
  src: url('../fonts/IBMPlexSans-latin-var.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/IBMPlexMono-400-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/IBMPlexMono-600-latin.woff2') format('woff2');
}

:root {
  color-scheme: light;
  /* type: three self-hosted faces. --font-ui is the UI face and sets every figure,
     with tabular-nums wherever numbers align; --font-display is for headings, the
     report cover and scenario names in the rail; --font-mono is for labels only --
     column heads, eyebrows, badges, identifiers, file paths, token names -- and
     never for a figure at any size. The fallbacks are what a machine missing
     ui/fonts/ falls back to, not a second choice. */
  --font-ui: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  --font-display: 'Source Serif 4', Georgia, 'Times New Roman', serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  /* five steps and no sixth (1.18.2 item 3, #585). --fs-tiny is the floor for anything a
     reader reads: nothing outside a chart's frame is set below it. The names are the ones
     every rule already used, so the scale moved and no selector had to. What retired into
     what is in ui/DESIGN.md section 3. */
  --fs-tiny: 13px; --fs: 15px; --fs-h2: 17px; --fs-h1: 21px; --fs-value: 24px;
  --fs-small: var(--fs-tiny);   /* the two smallest steps were 11 and 12 and are one step now: a label and a quiet sentence are the same size and differ by colour */
  --lh: 1.45;
  /* space and shape: a 4px grid, and no radius at all. Ensō squares every
     corner: the page is paper and paper has edges. */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px;
  --radius: 0;
  --row-h: 32px; --cell-pad: 6px 12px; --head-pad: 9px 12px; --panel-pad: 12px 16px;
  --control-h: 32px; --control-h-sm: 28px;
  --rail-w: 300px; --header-h: 48px;
  --cat-ribbon-opacity: 0.85;
  /* motion: short, and the same everywhere. A reskin is not an animation. */
  --ease: cubic-bezier(0.2, 0, 0, 1); --dur-state: 90ms; --dur-enter: 160ms;
  /* paper: the desk, the sheet on it, and two steps into the sheet. Warm,
     because --paper-stripe is warm and a stripe cannot be warmer than its page. */
  --paper: #EFEBE3; --paper-raised: #FDFCF9; --paper-sunken: #F3EFE8; --paper-sunken-2: #E5DFD4; --paper-stripe: #F8F6F2;
  /* ink, four steps. --ink-faint is the one colour below the contrast floor and
     is reserved for the grey italics of a value nobody typed. */
  --ink: #1A1816; --ink-2: #494540; --ink-3: #655F58; --ink-faint: #867D72;
  --rule: #DED7CB; --rule-strong: #B0A899; --rule-soft: #E8E2D8;
  --mark: #2C4C8F; --mark-hover: #1F3A72; --mark-ink: #FFFFFF; --mark-wash: rgba(44,76,143,0.10); --mark-edge: #2C4C8F;
  --mark-image: url('../img/enso-mark-128.png');
  --shadow: 0 6px 20px rgba(26,24,22,0.16); --backdrop: rgba(26,24,22,0.45);
  /* where a value comes from. Ensō gives each a different mark as well as a
     different hue, so the three are told apart with the colour turned off:
     own a corner tick, inherited a left edge, explicit a left edge and no wash. */
  --own-wash: rgba(44,76,143,0.10); --own-edge: #2C4C8F;
  --inherited: #1E7A78; --inherited-wash: rgba(30,122,120,0.10); --inherited-edge: #1E7A78;
  --explicit-wash: transparent; --explicit-edge: #5C7A3F;
  --frozen-wash: rgba(44,76,143,0.14); --frozen-edge: #2C4C8F;   /* a frozen draw: an underline inside the provenance tint, so it composes */
  /* status: fixed, never a series, always beside a word. --stale leans violet
     deliberately, away from the red-orange of --shortfall: the two meet in one table. */
  --settled: #3E7D4E; --settled-wash: rgba(62,125,78,0.10); --settled-edge: #3E7D4E;
  --limit: #7F5A11; --limit-wash: rgba(127,90,17,0.12); --limit-edge: #7F5A11;
  --serious: #A85320; --serious-wash: rgba(168,83,32,0.12); --serious-edge: #A85320;
  --shortfall: #A42C2C; --shortfall-wash: rgba(164,44,44,0.10); --shortfall-edge: #A42C2C;
  --stale: #6A4A9C; --stale-wash: rgba(106,74,156,0.12); --stale-edge: #6A4A9C;
  --status-off: #B0A899;
  /* ranked series: slot 1 is the total, and the slots never cycle. */
  --series-1: #2C4C8F; --series-2: #1E7A78; --series-3: #A85320; --series-4: #6A4A9C; --series-5: #5C7A3F;
  /* unranked kinds: a colour per kind, in a fixed order, more folding into other. */
  --cat-1: #2C4C8F; --cat-2: #A42C2C; --cat-3: #1E7A78; --cat-4: #A85320;
  --cat-5: #6A4A9C; --cat-6: #5C7A3F; --cat-7: #8A6212; --cat-8: #7A5C8C; --cat-other: #67615A;
  --cat-9: #A2386F; --cat-10: #6E6B1B; --cat-11: #7B4A2F; --cat-12: #2F6E93;   /* the Sankey's slots 9 to 12 (docs/PLAN_1.18.0.md §17.3) */
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    /* paper: the desk, the sheet on it, and two steps into the sheet. Warm,
       because --paper-stripe is warm and a stripe cannot be warmer than its page. */
    --paper: #100F13; --paper-raised: #17161B; --paper-sunken: #201E25; --paper-sunken-2: #2B2933; --paper-stripe: #1B1A1F;
    /* ink, four steps. --ink-faint is the one colour below the contrast floor and
       is reserved for the grey italics of a value nobody typed. */
    --ink: #ECE8E1; --ink-2: #C3BDB4; --ink-3: #97928A; --ink-faint: #79736B;
    --rule: #2D2B33; --rule-strong: #4C4954; --rule-soft: #262430;
    --mark: #5B93E8; --mark-hover: #82AFEF; --mark-ink: #0E0D11; --mark-wash: rgba(91,147,232,0.14); --mark-edge: #5B93E8;
    --mark-image: url('../img/enso-mark-dark-128.png');
    --shadow: 0 6px 20px rgba(0,0,0,0.60); --backdrop: rgba(0,0,0,0.60);
    /* where a value comes from. Ensō gives each a different mark as well as a
       different hue, so the three are told apart with the colour turned off:
       own a corner tick, inherited a left edge, explicit a left edge and no wash. */
    --own-wash: rgba(91,147,232,0.14); --own-edge: #5B93E8;
    --inherited: #4DB5B2; --inherited-wash: rgba(77,181,178,0.14); --inherited-edge: #4DB5B2;
    --explicit-wash: transparent; --explicit-edge: #8FAE68;
    --frozen-wash: rgba(91,147,232,0.22); --frozen-edge: #5B93E8;   /* a frozen draw: an underline inside the provenance tint, so it composes */
    /* status: fixed, never a series, always beside a word. --stale leans violet
       deliberately, away from the red-orange of --shortfall: the two meet in one table. */
    --settled: #6FB585; --settled-wash: rgba(111,181,133,0.16); --settled-edge: #6FB585;
    --limit: #D9A441; --limit-wash: rgba(217,164,65,0.16); --limit-edge: #D9A441;
    --serious: #E08A57; --serious-wash: rgba(224,138,87,0.16); --serious-edge: #E08A57;
    --shortfall: #E4726F; --shortfall-wash: rgba(228,114,111,0.16); --shortfall-edge: #E4726F;
    --stale: #A98BE0; --stale-wash: rgba(169,139,224,0.16); --stale-edge: #A98BE0;
    --status-off: #4C4954;
    /* ranked series: slot 1 is the total, and the slots never cycle. */
    --series-1: #5B93E8; --series-2: #4DB5B2; --series-3: #E08A57; --series-4: #A98BE0; --series-5: #8FAE68;
    /* unranked kinds: a colour per kind, in a fixed order, more folding into other. */
    --cat-1: #5B93E8; --cat-2: #E4726F; --cat-3: #4DB5B2; --cat-4: #E08A57;
    --cat-5: #A98BE0; --cat-6: #8FAE68; --cat-7: #D9A441; --cat-8: #B98FC9; --cat-other: #97928A;
  --cat-9: #D97FAC; --cat-10: #B9B551; --cat-11: #C58C66; --cat-12: #6FB4DA;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  /* paper: the desk, the sheet on it, and two steps into the sheet. Warm,
     because --paper-stripe is warm and a stripe cannot be warmer than its page. */
  --paper: #100F13; --paper-raised: #17161B; --paper-sunken: #201E25; --paper-sunken-2: #2B2933; --paper-stripe: #1B1A1F;
  /* ink, four steps. --ink-faint is the one colour below the contrast floor and
     is reserved for the grey italics of a value nobody typed. */
  --ink: #ECE8E1; --ink-2: #C3BDB4; --ink-3: #97928A; --ink-faint: #79736B;
  --rule: #2D2B33; --rule-strong: #4C4954; --rule-soft: #262430;
  --mark: #5B93E8; --mark-hover: #82AFEF; --mark-ink: #0E0D11; --mark-wash: rgba(91,147,232,0.14); --mark-edge: #5B93E8;
  --mark-image: url('../img/enso-mark-dark-128.png');
  --shadow: 0 6px 20px rgba(0,0,0,0.60); --backdrop: rgba(0,0,0,0.60);
  /* where a value comes from. Ensō gives each a different mark as well as a
     different hue, so the three are told apart with the colour turned off:
     own a corner tick, inherited a left edge, explicit a left edge and no wash. */
  --own-wash: rgba(91,147,232,0.14); --own-edge: #5B93E8;
  --inherited: #4DB5B2; --inherited-wash: rgba(77,181,178,0.14); --inherited-edge: #4DB5B2;
  --explicit-wash: transparent; --explicit-edge: #8FAE68;
  --frozen-wash: rgba(91,147,232,0.22); --frozen-edge: #5B93E8;   /* a frozen draw: an underline inside the provenance tint, so it composes */
  /* status: fixed, never a series, always beside a word. --stale leans violet
     deliberately, away from the red-orange of --shortfall: the two meet in one table. */
  --settled: #6FB585; --settled-wash: rgba(111,181,133,0.16); --settled-edge: #6FB585;
  --limit: #D9A441; --limit-wash: rgba(217,164,65,0.16); --limit-edge: #D9A441;
  --serious: #E08A57; --serious-wash: rgba(224,138,87,0.16); --serious-edge: #E08A57;
  --shortfall: #E4726F; --shortfall-wash: rgba(228,114,111,0.16); --shortfall-edge: #E4726F;
  --stale: #A98BE0; --stale-wash: rgba(169,139,224,0.16); --stale-edge: #A98BE0;
  --status-off: #4C4954;
  /* ranked series: slot 1 is the total, and the slots never cycle. */
  --series-1: #5B93E8; --series-2: #4DB5B2; --series-3: #E08A57; --series-4: #A98BE0; --series-5: #8FAE68;
  /* unranked kinds: a colour per kind, in a fixed order, more folding into other. */
  --cat-1: #5B93E8; --cat-2: #E4726F; --cat-3: #4DB5B2; --cat-4: #E08A57;
  --cat-5: #A98BE0; --cat-6: #8FAE68; --cat-7: #D9A441; --cat-8: #B98FC9; --cat-other: #97928A;
  --cat-9: #D97FAC; --cat-10: #B9B551; --cat-11: #C58C66; --cat-12: #6FB4DA;
}

/* Printing (the scenario report is the browser's print): always the light
   palette, whatever the mode switch or the system says. Every token the dark
   blocks set is reset here -- all of them, not most: before 1.10.0 the two
   frozen tokens were missing and a report printed from dark mode carried the
   dark blue into the frozen cells. */
@media print {
  :root, :root:not([data-theme="light"]), :root[data-theme="dark"] {
    color-scheme: light;
    /* paper: on a sheet the desk and the sheet are the same thing, so --paper and
       --paper-raised are both the page's own white -- app.css also pins body to
       #fff, which is what actually decides the ground, and this makes the token
       agree with it instead of contradicting it. --paper-stripe stays: it is
       meaning-adjacent and pale enough to print. --paper-sunken is td.locked's
       only signal and it has to separate from the stripe running through the
       same row; at #F3EFE8 that is 5.4% ink against the stripe's 3.1%, so it
       takes one step down the same ramp, to the value --paper-sunken-2 holds,
       and the two steps into the sheet become one. Measured as 100 - L*, on a
       PDF saved from Chrome and rasterised at 110dpi -- not on a sheet of
       paper, which nothing here can do. */
    --paper: #FFFFFF; --paper-raised: #FFFFFF; --paper-sunken: #E5DFD4; --paper-sunken-2: #E5DFD4; --paper-stripe: #F8F6F2;
    /* ink, four steps. --ink-faint is the one colour below the contrast floor and
       is reserved for the grey italics of a value nobody typed. */
    --ink: #1A1816; --ink-2: #494540; --ink-3: #655F58; --ink-faint: #867D72;
    --rule: #DED7CB; --rule-strong: #B0A899; --rule-soft: #E8E2D8;
    --mark: #2C4C8F; --mark-hover: #1F3A72; --mark-ink: #FFFFFF; --mark-wash: rgba(44,76,143,0.10); --mark-edge: #2C4C8F;
    --mark-image: url('../img/enso-mark-ink.png');   /* print is black ink on paper, not the blue */
    --shadow: 0 6px 20px rgba(26,24,22,0.16); --backdrop: rgba(26,24,22,0.45);
    /* where a value comes from. Ensō gives each a different mark as well as a
       different hue, so the three are told apart with the colour turned off:
       own a corner tick, inherited a left edge, explicit a left edge and no wash. */
    --own-wash: rgba(44,76,143,0.10); --own-edge: #2C4C8F;
    --inherited: #1E7A78; --inherited-wash: rgba(30,122,120,0.10); --inherited-edge: #1E7A78;
    --explicit-wash: transparent; --explicit-edge: #5C7A3F;
    --frozen-wash: rgba(44,76,143,0.14); --frozen-edge: #2C4C8F;   /* a frozen draw: an underline inside the provenance tint, so it composes */
    /* status: fixed, never a series, always beside a word. --stale leans violet
       deliberately, away from the red-orange of --shortfall: the two meet in one table. */
    --settled: #3E7D4E; --settled-wash: rgba(62,125,78,0.10); --settled-edge: #3E7D4E;
    --limit: #7F5A11; --limit-wash: rgba(127,90,17,0.12); --limit-edge: #7F5A11;
    --serious: #A85320; --serious-wash: rgba(168,83,32,0.12); --serious-edge: #A85320;
    --shortfall: #A42C2C; --shortfall-wash: rgba(164,44,44,0.10); --shortfall-edge: #A42C2C;
    --stale: #6A4A9C; --stale-wash: rgba(106,74,156,0.12); --stale-edge: #6A4A9C;
    --status-off: #B0A899;
    /* ranked series: slot 1 is the total, and the slots never cycle. */
    --series-1: #2C4C8F; --series-2: #1E7A78; --series-3: #A85320; --series-4: #6A4A9C; --series-5: #5C7A3F;
    /* unranked kinds: a colour per kind, in a fixed order, more folding into other. */
    --cat-1: #2C4C8F; --cat-2: #A42C2C; --cat-3: #1E7A78; --cat-4: #A85320;
    --cat-5: #6A4A9C; --cat-6: #5C7A3F; --cat-7: #8A6212; --cat-8: #7A5C8C; --cat-other: #67615A;
  --cat-9: #A2386F; --cat-10: #6E6B1B; --cat-11: #7B4A2F; --cat-12: #2F6E93;   /* the Sankey's slots 9 to 12 (docs/PLAN_1.18.0.md §17.3) */
  }
}