/* Every page on paper (templates/base.html links this with media="print",
   after each page's own stylesheets, so it has the last word): black on white
   whatever the reader's scheme, the page's words, figures, charts and tables
   kept, and the chrome that only works on a screen dropped, the top bar's
   links, the foot, the switches, the date picker's arrows, the sign-up
   forms and the buttons among it. */
@page { margin: 14mm 12mm }

/* Light, whatever the scheme the reader's screen is in, and in print's own
   inks: the ink black, the greys a shade darker than a screen's so they
   hold on paper, the bars a dark blue that greys well on a black-and-white
   printer. */
:root {
  color-scheme: light;
  --paper: #ffffff;
  --ink: #000000;
  --highlighter: #8fd3ff;
  --wash: #eef7ff;
  --biro: #1b3a8a;
  --graphite: #4d4d4d;
  --rule: #d4d4d4;
  --ink-soft: #222222;
  --pencil: #6b6b6b;
  --paper-dim: #b5b5b5;
  --rule-strong: #b5b5b5;
  --rule-faint: #e6e6e6;
  --shadow: transparent;
  --bar: var(--biro);
  --good: #0e7a4a;
  --good-bg: #e2f3e9;
  --ni: #9a5b00;
  --ni-bg: #fcefd6;
  --ni-bar: #e0a43a;
  --poor: #bf3328;
  --poor-bg: #fbe4e1;
  --client-error: #a86400;
  --server-error: #c43329;
}

/* A browser leaves out backgrounds on paper unless told otherwise, and the
   charts' bars, the hours' cells, the speed bars and links' underlines are
   all drawn as backgrounds. */
html { print-color-adjust: exact; -webkit-print-color-adjust: exact }
body { background: #fff; color: var(--ink); font-size: 11pt }
.wrap { max-width: none; padding: 0 }
*, ::before, ::after { box-shadow: none; text-shadow: none }

/* --- What only works on a screen ----------------------------------------- */

.skip, .top-nav, .foot, .toc, .toc-bar,
button, .button, input[type="submit"], .join, .checker, .snippet > .copy,
.pages-switch, .site-settings, .cog, .period-step, .picker-caret, .site-menu-caret, .picker-pop,
.site-menu-pop, .out, .more, .see-all, .chips, .tip, .settings-nav, .find, .find-icon, .site-sort,
.tablist label, .back-arrow, .as-markdown, .currency, video, audio, iframe { display: none !important }

/* The date picker and the site's menu keep only what they name: the site,
   the range and its dates. */
.picker, .site-menu { pointer-events: none }
.picker-trigger, .site-menu > summary { list-style: none; border: 0; padding: 0; background: none }
.picker-trigger::-webkit-details-marker, .site-menu > summary::-webkit-details-marker { display: none }

/* The top bar is the brand alone, a line under it. */
.topbar { margin-bottom: 1rem; padding-bottom: .5rem }

/* A link reads as text; in the docs and the long pages, one to elsewhere
   says where, as paper cannot follow it. */
a { color: inherit }
.prose a[href^="http"]:not(:has(img))::after { content: " (" attr(href) ")"; font-size: .85em; color: var(--graphite);
                                             overflow-wrap: anywhere }

/* --- Breaks ---------------------------------------------------------------- */

h1, h2, h3, h4, .head, .tablist, .section { break-after: avoid; break-inside: avoid }
.tile, .totals, .chart, .card, .heat, .plot, .pane, figure, li, tr, pre, .snippet, img, svg,
.grid > *, .speed > * { break-inside: avoid }
p { orphans: 3; widows: 3 }

/* The home page's cards one under another, each whole on its page, as
   cards side by side split across a page's foot at different heights. */
.bento { display: block !important }
.bento > * { margin-bottom: 1rem }

/* A part of Settings takes the page's width, its nav gone. */
.settings-layout { display: block }

/* --- The dashboard --------------------------------------------------------- */

/* Of tabs drawn as links, Speed's metrics and a view's, the one shown alone. */
.view-tabs a:not([aria-current]) { display: none }
/* The bars at rest, none dimmed as if another were hovered. */
.bars .col i { opacity: 1 !important }
.col::before { display: none }
/* The panes a screen sets side by side stay so on A4, the narrowest a page
   reaches, rather than falling to one column at a phone's width. */
.grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)) !important }
.grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)) !important }
.totals.five { grid-template-columns: repeat(5, 1fr) !important }
.totals.five .tile { grid-column: auto !important }
.heat .cells, .heat-axis { gap: 2px }
.heat-axis .minor { visibility: visible }