/* Overlook's look: dark surfaces, hairlines, 13 px type and a colour for each
   state. The page sits in a panel beside the sidebar. It is light where the
   owner's system asks for light, from the second set of colours below. Inter
   is served from fonts/ (its licence, the OFL, beside it). An owner's own
   custom.css comes after this file and may change any of it. */
@font-face {
  font-family: "Inter Variable";
  src: url("fonts/InterVariable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
:root {
  color-scheme: dark;
  --m-font:
    "Inter Variable", "Inter", "SF Pro Text", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    sans-serif;
  --m-mono: "Berkeley Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --m-type-large-title: 590 24px / 32px var(--m-font);
  --m-type-title: 590 15px / 22px var(--m-font);
  --m-type-headline: 510 13px / 20px var(--m-font);
  --m-type-body: 400 13px / 20px var(--m-font);
  --m-type-subhead: 400 12px / 18px var(--m-font);
  --m-type-footnote: 400 12px / 16px var(--m-font);
  --m-type-footnote-strong: 510 12px / 16px var(--m-font);
  --m-type-figure-large: 510 30px / 36px var(--m-font);
  --m-radius-card: 12px;
  --m-radius-tile: 6px;
  --m-tile: 24px;
  --m-row-min: 44px;
  --m-content-max: 1160px;
  --m-ease: cubic-bezier(0.2, 0.8, 0.2, 1);

  --m-bg: #08090a;
  --m-panel: #101112;
  --m-card-fill: #141516;
  --m-raised: #1a1b1e;
  --m-label: #f7f8f8;
  --m-label-1: #d0d6e0;
  --m-label-2: #8a8f98;
  /* The faintest words, such as a hint, still 4.5:1 on the raised surface,
     as WCAG's AA asks of text. */
  --m-label-3: #7e838b;
  --m-border: rgba(255, 255, 255, 0.08);
  --m-separator: rgba(255, 255, 255, 0.05);
  --m-fill-gray: rgba(255, 255, 255, 0.06);
  --m-fill-hover: rgba(255, 255, 255, 0.04);
  --m-fill-pressed: rgba(255, 255, 255, 0.08);
  --m-accent-2: #7170ff;
  --m-blue: #4ea7fc;
  --m-blue-text: #4ea7fc;
  --m-green: #4cb782;
  --m-green-text: #4cb782;
  --m-orange: #f2c94c;
  --m-orange-text: #f2c94c;
  --m-red: #eb5757;
  --m-red-text: #f07070;
  --m-gray: #62666d;
  --m-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
  /* What hovers, tracks and the hour under the pointer are shaded with, over
     any surface: white on the dark page, black on the light one. */
  --m-ink: #fff;
  /* A result that passed, before the newest, which is the full green. */
  --m-passed: color-mix(in srgb, var(--m-green) 55%, transparent);
  /* Each area's colour, for its tile and its row in the week. */
  --m-servers: #7170ff;
  --m-network: #4ea7fc;
  --m-storage: #f2994a;
  --m-apps: #f06595;

  /* The colours that tell apart the parts of one thing, such as each
     person's photos, in this order, which a tile may start anywhere in:
     none is green, yellow or red, which say how something is. Checked with
     the dataviz skill's validator against the card: each beside the next,
     the last beside the first too, told apart with every kind of colour
     vision, and each at 3:1 or more. Each two in turn are one cool, one
     warm. */
  --m-series-1: #3987e5;
  --m-series-2: #d37812;
  --m-series-3: #9085e9;
  --m-series-4: #d55181;
  --m-series-5: #1b9fbf;
  --m-series-6: #b07a3a;
  --m-series-7: #c160c9;
  --m-series-8: #199e70;
}
/* The light page, for a viewer whose system asks for one, or who chose it
   in the footer, as theme.js sets data-theme: dark words on light
   surfaces, the card the lightest, as it is on the dark page, and each
   colour a step darker, to keep its contrast. :where() leaves it as
   specific as :root, so that an owner's custom.css still wins over it. Words are 4.5:1 or more
   on every surface they sit on, the sidebar too, and a state's colour or an
   area's 3:1, as WCAG's AA asks; the series pass the same validator on the
   white card unchanged. The logos keep their dark tiles. */
:root:where([data-theme="light"]) {
  color-scheme: light;
  --m-bg: #f4f5f8;
  --m-panel: #fbfbfc;
  --m-card-fill: #fff;
  --m-raised: #fff;
  --m-label: #17181c;
  --m-label-1: #3a3d44;
  --m-label-2: #585c64;
  --m-label-3: #696e78;
  --m-border: rgba(0, 0, 0, 0.09);
  --m-separator: rgba(0, 0, 0, 0.06);
  --m-fill-gray: rgba(0, 0, 0, 0.06);
  --m-fill-hover: rgba(0, 0, 0, 0.035);
  --m-fill-pressed: rgba(0, 0, 0, 0.07);
  --m-accent-2: #5856e8;
  --m-blue: #2383e8;
  --m-blue-text: #0a6bd0;
  --m-green: #33935f;
  --m-green-text: #2a7a53;
  --m-orange: #b8860b;
  --m-orange-text: #876708;
  --m-red: #e5484d;
  --m-red-text: #c62a2f;
  --m-gray: #80858e;
  --m-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
  --m-ink: #000;
  /* Paler would fade into the white card. */
  --m-passed: color-mix(in srgb, var(--m-green) 90%, transparent);
  --m-servers: #605ff5;
  --m-network: #0b74de;
  --m-storage: #bc600e;
  --m-apps: #d6246a;
}

* {
  box-sizing: border-box;
}
[hidden] {
  /* biome-ignore lint/complexity/noImportantStyles: hidden must win over any display a rule gives */
  display: none !important;
}
html {
  background: var(--m-bg);
}
body {
  margin: 0;
  min-height: 100vh;
  display: grid;
  grid-template-columns: 236px minmax(0, 1fr);
  background: var(--m-bg);
  color: var(--m-label);
  font: var(--m-type-body);
  font-feature-settings: "cv01", "ss03";
  -webkit-font-smoothing: antialiased;
}
a {
  color: inherit;
  text-decoration: none;
}
button {
  font: inherit;
  color: inherit;
}
:focus-visible {
  outline: 2px solid var(--m-accent-2);
  outline-offset: 1px;
  border-radius: 6px;
}
/* Words a screen reader says that the page shows another way, such as by a
   glyph's shape or a strip of results: out of sight, never out of the page. */
.spoken {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
kbd {
  display: inline-grid;
  place-items: center;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  border-radius: 4px;
  background: var(--m-fill-gray);
  box-shadow: inset 0 0 0 0.5px var(--m-border);
  font: 510 11px / 1 var(--m-font);
  color: var(--m-label-2);
}
.ic {
  width: 16px;
  height: 16px;
  flex: none;
}
.tone-green {
  --tone: var(--m-green);
  --tone-text: var(--m-green-text);
}
.tone-orange {
  --tone: var(--m-orange);
  --tone-text: var(--m-orange-text);
}
.tone-red {
  --tone: var(--m-red);
  --tone-text: var(--m-red-text);
}
.tone-gray {
  --tone: var(--m-gray);
  --tone-text: var(--m-label-2);
}
.tone-blue {
  --tone: var(--m-blue);
  --tone-text: var(--m-blue-text);
}
span[class^="tone-"] {
  display: inline-grid;
  color: var(--tone-text);
}
.si {
  width: 14px;
  height: 14px;
  flex: none;
  color: var(--tone);
}
.dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex: none;
  background: var(--tone, var(--m-label-3));
}
.tone-red.dot,
.tone-red .dot {
  box-shadow: 0 0 0 0 var(--m-red);
  animation: beat 1.6s var(--m-ease) infinite;
}
@keyframes beat {
  70% {
    box-shadow: 0 0 0 6px transparent;
  }
  100% {
    box-shadow: 0 0 0 0 transparent;
  }
}

/* ── The shell: the sidebar, and the panel beside it ─────────────────────── */

.side {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  scrollbar-width: none;
  display: flex;
  flex-direction: column;
  padding: 10px 8px 12px;
  background: var(--m-bg);
}
.ws {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 2px 4px 10px;
}
.ws-name {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 0;
  padding: 4px;
  border-radius: 6px;
  font: 590 13px / 20px var(--m-font);
}
.ws-name:hover {
  background: var(--m-fill-hover);
}
.logo {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  color: #fff;
  background: linear-gradient(135deg, #8f8eff, #5e6ad2 60%, #3d3fa8);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.25),
    0 2px 8px rgba(94, 106, 210, 0.35);
}
.logo .ic {
  width: 14px;
  height: 14px;
}
.icon-btn {
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  flex: none;
  border: 0;
  border-radius: 6px;
  background: none;
  color: var(--m-label-2);
  cursor: pointer;
  transition:
    background-color 0.15s,
    color 0.15s;
}
.icon-btn:hover {
  background: var(--m-fill-hover);
  color: var(--m-label);
}
.side nav {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.nav {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 28px;
  padding: 0 8px;
  border-radius: 6px;
  font: 510 13px / 1 var(--m-font);
  color: var(--m-label-1);
  transition: background-color 0.12s;
}
.nav > span:not(.app-icon):not(.count) {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.nav > .ic {
  color: var(--m-label-2);
}
.nav:hover {
  background: var(--m-fill-hover);
}
/* The page showing, which a screen reader is told too. */
.nav[aria-current="page"] {
  background: var(--m-fill-pressed);
  color: var(--m-label);
  box-shadow: inset 0 0 0 0.5px var(--m-separator);
}
.nav[aria-current="page"] > .ic {
  color: var(--m-label);
}
.nav .dot {
  width: 6px;
  height: 6px;
}
.nav .count {
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  display: grid;
  place-items: center;
  /* A deeper red than a dot's, for white figures at 4.5:1. */
  background: color-mix(in srgb, var(--m-red) 85%, #000);
  color: #fff;
  font: 590 11px / 1 var(--m-font);
}
.sec {
  margin-top: 14px;
}
.sec summary {
  display: flex;
  align-items: center;
  gap: 4px;
  height: 26px;
  padding: 0 8px;
  list-style: none;
  cursor: pointer;
  border-radius: 6px;
  font: 510 12px / 1 var(--m-font);
  color: var(--m-label-2);
}
.sec summary::-webkit-details-marker {
  display: none;
}
.sec summary:hover {
  color: var(--m-label-1);
}
.caret {
  width: 12px;
  height: 12px;
  transition: transform 0.2s var(--m-ease);
}
.sec:not([open]) .caret {
  transform: rotate(-90deg);
}
.sec[open] > :not(summary) {
  animation: drop 0.25s var(--m-ease) both;
}
.side-foot {
  margin-top: auto;
  padding: 14px 8px 0;
  display: flex;
  align-items: center;
  gap: 8px;
  font: var(--m-type-footnote);
  color: var(--m-label-3);
}
.side-foot span {
  flex: 1;
}
.ring {
  width: 14px;
  height: 14px;
  transform: rotate(-90deg);
}
.ring circle {
  fill: none;
  stroke-width: 2;
  stroke: var(--m-fill-gray);
}
.ring circle:last-child {
  stroke: var(--m-accent-2);
  stroke-dasharray: 37.7;
  stroke-dashoffset: 0;
  animation: countdown 60s linear forwards;
}
@keyframes countdown {
  to {
    stroke-dashoffset: 37.7;
  }
}

.panel {
  min-width: 0;
  min-height: calc(100vh - 16px);
  margin: 8px 8px 8px 0;
  display: flex;
  flex-direction: column;
  background: var(--m-panel);
  border: 1px solid var(--m-border);
  border-radius: 12px;
}
.bar {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 8px;
  height: 44px;
  padding: 0 10px 0 16px;
  background: color-mix(in srgb, var(--m-panel) 82%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--m-separator);
  border-radius: 12px 12px 0 0;
}
.crumb {
  display: flex;
  align-items: center;
  gap: 8px;
  font: 510 13px / 1 var(--m-font);
  color: var(--m-label-1);
}
.crumb .ic {
  color: var(--m-label-2);
}
.bar-end {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 4px;
}
.menu {
  display: none;
  margin-left: -6px;
}
/* Only in the demo: a tag that says so, and the way to the repository. */
.demo-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  margin-right: 4px;
  padding: 0 8px 0 4px;
  border-radius: 8px;
  background: var(--m-fill-hover);
  box-shadow: inset 0 0 0 0.5px var(--m-border);
  color: var(--m-label-2);
  font: 510 12px / 1 var(--m-font);
  text-decoration: none;
  white-space: nowrap;
  transition:
    background-color 0.15s,
    color 0.15s;
}
.demo-link:hover {
  background: var(--m-fill-pressed);
  color: var(--m-label);
}
.demo-tag {
  padding: 4px 6px;
  border-radius: 5px;
  background: color-mix(in srgb, var(--m-accent-2) 18%, transparent);
  /* The accent, a little nearer the words', to read at 4.5:1 on its tint. */
  color: color-mix(in srgb, var(--m-accent-2) 80%, var(--m-label));
}
.demo-short {
  display: none;
}
.kbd-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  padding: 0 6px 0 8px;
  border: 0;
  border-radius: 8px;
  cursor: pointer;
  background: var(--m-fill-hover);
  box-shadow: inset 0 0 0 0.5px var(--m-border);
  color: var(--m-label-2);
  font: 510 12px / 1 var(--m-font);
  transition:
    background-color 0.15s,
    color 0.15s;
}
.kbd-btn:hover {
  background: var(--m-fill-pressed);
  color: var(--m-label);
}
.loading .spin .ic {
  animation: turn 0.8s linear infinite;
}
@keyframes turn {
  to {
    transform: rotate(360deg);
  }
}
.scrim {
  display: none;
}

main {
  width: 100%;
  max-width: var(--m-content-max);
  margin: 0 auto;
  padding: 28px 32px 56px;
}
/* At the panel's foot, however short the page, under a hairline as wide as
   the page's column: which Overlook this is, and the look and the language
   the viewer chose. On a phone the choices go first, and both centre. */
.foot {
  width: calc(100% - 64px);
  max-width: calc(var(--m-content-max) - 64px);
  margin: auto auto 0;
  padding: 14px 0 max(20px, env(safe-area-inset-bottom));
  border-top: 1px solid var(--m-separator);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 12px 16px;
  font: var(--m-type-footnote);
  color: var(--m-label-3);
}
.choices {
  display: flex;
  align-items: center;
  gap: 8px;
}
/* The looks: the page's pills, each an icon, in the middle of a round
   button. .pills.looks outweighs .pills button, which comes later and pads
   its words. */
.pills.looks button {
  width: 28px;
  padding: 0;
  display: grid;
  place-items: center;
}
.looks .ic {
  width: 14px;
  height: 14px;
}
/* The language: a pill like the looks', the language it shows, over the
   browser's own list, unseen, which takes the clicks and the keyboard, and
   which a phone opens as its own picker. Its 16px keeps a phone from zooming
   in on it. */
.language {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  padding: 0 9px 0 10px;
  border-radius: 9999px;
  background: var(--m-fill-hover);
  box-shadow: inset 0 0 0 0.5px var(--m-border);
  font: 510 12px / 1 var(--m-font);
  color: var(--m-label-2);
  transition: color 0.15s;
}
.language:hover {
  color: var(--m-label);
}
.language:focus-within {
  outline: 2px solid var(--m-accent-2);
  outline-offset: 1px;
}
.language .ic {
  width: 14px;
  height: 14px;
}
.language .caret {
  width: 12px;
  height: 12px;
  opacity: 0.7;
}
.language select {
  position: absolute;
  inset: 0;
  width: 100%;
  opacity: 0;
  cursor: pointer;
  font-size: 16px;
}
.foot a {
  font-weight: 510;
  color: var(--m-label-2);
  text-decoration: none;
  transition: color 0.15s;
}
.foot a:hover {
  color: var(--m-label-1);
}

@media (max-width: 860px) {
  body {
    grid-template-columns: minmax(0, 1fr);
  }
  .side {
    position: fixed;
    z-index: 30;
    inset: 0 auto 0 0;
    width: 264px;
    padding-top: max(10px, env(safe-area-inset-top));
    border-right: 1px solid var(--m-border);
    transform: translateX(-102%);
    transition: transform 0.28s var(--m-ease);
  }
  .nav-open .side {
    transform: none;
    box-shadow: var(--m-shadow);
  }
  .nav-open .scrim {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 20;
    background: rgba(0, 0, 0, 0.5);
    animation: fade 0.2s both;
  }
  .panel {
    margin: 0;
    min-height: 100vh;
    border: 0;
    border-radius: 0;
  }
  .bar {
    border-radius: 0;
    padding-top: env(safe-area-inset-top);
    height: calc(44px + env(safe-area-inset-top));
  }
  .menu {
    display: inline-grid;
  }
  .kbd-btn span,
  .kbd-btn kbd,
  .demo-long {
    display: none;
  }
  .demo-short {
    display: inline;
  }
  main {
    padding: 20px max(16px, env(safe-area-inset-left)) 40px max(16px, env(safe-area-inset-right));
  }
  .foot {
    width: calc(100% - 32px);
  }
}
@media (max-width: 600px) {
  .foot {
    flex-direction: column-reverse;
    justify-content: center;
  }
}

/* ── ⌘K ─────────────────────────────────────────────────────────────────── */

.palette {
  width: min(620px, calc(100vw - 32px));
  max-height: min(480px, 70vh);
  margin: 12vh auto auto;
  padding: 0;
  border: 1px solid var(--m-border);
  border-radius: 12px;
  background: color-mix(in srgb, var(--m-raised) 92%, transparent);
  backdrop-filter: blur(20px);
  color: var(--m-label);
  box-shadow:
    0 24px 64px rgba(0, 0, 0, 0.6),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
  overflow: hidden;
  flex-direction: column;
}
.palette[open] {
  display: flex;
  animation: pop 0.18s var(--m-ease) both;
}
.palette::backdrop {
  background: rgba(0, 0, 0, 0.45);
  animation: fade 0.18s both;
}
.pal-in {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 16px;
  border-bottom: 1px solid var(--m-separator);
  color: var(--m-label-2);
}
.pal-in input {
  flex: 1;
  height: 52px;
  border: 0;
  outline: 0;
  background: none;
  color: var(--m-label);
  font: 400 15px / 1 var(--m-font);
}
.pal-in input::placeholder {
  color: var(--m-label-3);
}
.pal-list {
  overflow-y: auto;
  padding: 6px;
}
.pal-group {
  margin: 8px 10px 4px;
  font: var(--m-type-footnote-strong);
  color: var(--m-label-3);
}
.pal-item {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 38px;
  padding: 0 10px;
  border-radius: 8px;
  color: var(--m-label-1);
}
.pal-item .title {
  font: var(--m-type-headline);
}
.pal-item .detail {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font: var(--m-type-subhead);
  color: var(--m-label-3);
}
.pal-item .ic {
  color: var(--m-label-2);
}
.pal-item.on {
  background: var(--m-fill-pressed);
  color: var(--m-label);
}
.pal-hint {
  margin-left: auto;
  display: flex;
  gap: 3px;
  color: var(--m-label-3);
}
.pal-empty {
  padding: 24px;
  text-align: center;
  color: var(--m-label-2);
}
.palette footer {
  display: flex;
  gap: 16px;
  padding: 10px 16px;
  border-top: 1px solid var(--m-separator);
  font: var(--m-type-footnote);
  color: var(--m-label-3);
}
.palette footer span {
  display: flex;
  align-items: center;
  gap: 4px;
}

/* An area's icon on a tile of its colour, lit from the top. */
.badge {
  --size: 22px;
  display: inline-grid;
  place-items: center;
  width: var(--size);
  height: var(--size);
  flex: none;
  border-radius: 6px;
  color: var(--tint);
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--tint) 26%, transparent),
    color-mix(in srgb, var(--tint) 10%, transparent)
  );
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--tint) 22%, transparent),
    inset 0 1px 0 color-mix(in srgb, var(--tint) 30%, transparent);
}
.badge .ic {
  width: calc(var(--size) * 0.62);
  height: calc(var(--size) * 0.62);
}

/* An app's or a tool's own logo, on a dark tile, on the light page too,
   since the logos are chosen to show on dark (CONTRIBUTING.md), and so are
   an owner's own. */
.app-icon {
  --size: 22px;
  display: inline-grid;
  place-items: center;
  width: var(--size);
  height: var(--size);
  flex: none;
  border-radius: 6px;
  overflow: hidden;
  /* The glyph a link with no logo gets, light on the dark tile. */
  color: #d0d6e0;
  background: linear-gradient(180deg, #232428, #18191b);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.app-icon img {
  width: 66%;
  height: 66%;
  object-fit: contain;
}
.app-icon.xs {
  --size: 16px;
  border-radius: 4px;
}
/* The smallest, in the sidebar and on the setup page, has the dark page
   itself for its tile, before theme.js has run too. */
:where(:root:not([data-theme="light"])) .app-icon.xs {
  background: none;
  box-shadow: none;
}
:where(:root:not([data-theme="light"])) .app-icon.xs img {
  width: 100%;
  height: 100%;
}
.app-icon.sm {
  --size: 18px;
  border-radius: 5px;
}
.app-icon.lg {
  --size: 36px;
  border-radius: 10px;
}

/* The tooltip every chart, bar and tick shares. */
.tip-pop {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 60;
  pointer-events: none;
  min-width: 140px;
  max-width: 280px;
  padding: 8px 10px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--m-raised) 96%, transparent);
  border: 1px solid var(--m-border);
  box-shadow: var(--m-shadow);
  backdrop-filter: blur(12px);
  font: var(--m-type-footnote);
  color: var(--m-label-1);
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.tip-pop[hidden] {
  display: none;
}
.tip-pop b {
  font-weight: 590;
  color: var(--m-label);
  margin-bottom: 2px;
}
.tip-pop .tr {
  display: grid;
  grid-template-columns: 8px 1fr auto;
  align-items: center;
  gap: 8px;
}
.tip-pop .tr i {
  width: 8px;
  height: 8px;
  border-radius: 2px;
  background: var(--c);
}
.tip-pop .tr span:last-child {
  color: var(--m-label);
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.tip-pop p {
  margin: 3px 0 0;
  color: var(--m-label-2);
  overflow-wrap: anywhere;
}

/* ── The overview ───────────────────────────────────────────────────────── */

.block {
  margin-top: 32px;
  min-width: 0;
}
.block-title {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 0 0 12px;
  font: var(--m-type-title);
}
.block-title .hint,
.block-title .n {
  font: var(--m-type-subhead);
  color: var(--m-label-3);
}
.split {
  display: grid;
  gap: 0 24px;
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 1100px) {
  .split:not(:has(> [hidden])) {
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  }
}

/* How everything is: a card lit in the state's colour, drifting slowly. */
.status {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding: 22px 22px 18px;
  border-radius: 14px;
  background: var(--m-card-fill);
  border: 1px solid var(--m-border);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
.status::before,
.status::after {
  content: "";
  position: absolute;
  z-index: -1;
  border-radius: 50%;
  filter: blur(48px);
  pointer-events: none;
}
.status::before {
  width: 420px;
  height: 260px;
  left: -80px;
  top: -150px;
  background: var(--tone);
  opacity: 0.22;
  animation: drift 14s ease-in-out infinite alternate;
}
.status::after {
  width: 360px;
  height: 220px;
  right: -60px;
  top: -140px;
  background: var(--m-accent-2);
  opacity: 0.14;
  animation: drift 18s ease-in-out infinite alternate-reverse;
}
@keyframes drift {
  to {
    transform: translate(60px, 30px) scale(1.15);
  }
}
.status-row {
  display: flex;
  align-items: center;
  gap: 14px;
}
.status-icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  flex: none;
  border-radius: 12px;
  background: color-mix(in srgb, var(--tone) 14%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tone) 30%, transparent);
}
.status-icon .si {
  width: 22px;
  height: 22px;
}
.status h1 {
  margin: 0;
  font: var(--m-type-large-title);
  letter-spacing: -0.012em;
}
.status p {
  margin: 2px 0 0;
  font: var(--m-type-body);
  color: var(--m-label-2);
}
/* A link in the summary, such as each check engine's where there is none,
   underlined, since it sits among words. */
.status p a,
.head p a {
  color: var(--m-label-1);
  text-decoration: underline;
  text-decoration-color: var(--m-label-3);
  text-underline-offset: 3px;
  transition: text-decoration-color 0.15s;
}
.status p a:hover,
.head p a:hover {
  text-decoration-color: currentColor;
}
.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 18px;
}
.action {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 30px;
  padding: 0 11px 0 7px;
  border: 0;
  border-radius: 8px;
  cursor: pointer;
  background: color-mix(in srgb, var(--m-ink) 5%, transparent);
  box-shadow: inset 0 0 0 0.5px var(--m-border);
  font: 510 12px / 1 var(--m-font);
  color: var(--m-label-1);
  transition:
    background-color 0.15s,
    color 0.15s;
}
.action > .ic {
  color: var(--m-label-2);
}
.action:hover {
  background: color-mix(in srgb, var(--m-ink) 9%, transparent);
  color: var(--m-label);
}
.action.strong {
  background: color-mix(in srgb, var(--m-green) 14%, transparent);
  box-shadow: inset 0 0 0 0.5px color-mix(in srgb, var(--m-green) 35%, transparent);
  color: var(--m-label);
  padding-left: 9px;
}
.action kbd {
  margin-left: 2px;
}

/* Problems: an inbox, one row each. */
.inbox {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.inbox-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 4px 12px;
  padding: 12px 14px;
  border-radius: 10px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--m-red) 10%, var(--m-card-fill)), var(--m-card-fill) 60%);
  border: 1px solid color-mix(in srgb, var(--m-red) 22%, transparent);
  transition: border-color 0.15s;
}
.inbox-row:hover {
  border-color: color-mix(in srgb, var(--m-red) 45%, transparent);
}
.inbox-row .si {
  color: var(--m-red);
}
.inbox-row .why {
  grid-column: 2 / -1;
  font: 400 12px / 18px var(--m-mono);
  color: var(--m-label-2);
  overflow-wrap: anywhere;
}
.go {
  grid-row: 1;
  grid-column: 3;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font: var(--m-type-footnote-strong);
  color: var(--m-label-2);
}
.go .ic {
  width: 12px;
  height: 12px;
}

/* Today's figures: a label, a figure, a line, and a small drawing pinned
   to the foot, so tiles side by side line up. */
.figures {
  display: grid;
  gap: 10px;
  /* --cols tiles to a row where they fit, so rows come out even; fewer,
     each 168 px or more, where they don't. */
  grid-template-columns: repeat(
      auto-fill,
      minmax(max(168px, calc((100% - (var(--cols, 6) - 1) * 10px) / var(--cols, 6))), 1fr)
    );
  /* A wide tile that doesn't fit a row's end leaves no hole there. */
  grid-auto-flow: dense;
}
.figure-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 150px;
  padding: 14px 14px 12px;
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.025), transparent 40%), var(--m-card-fill);
  border: 1px solid var(--m-border);
  transition:
    border-color 0.2s,
    background-color 0.2s;
}
.figure-tile:hover {
  border-color: color-mix(in srgb, var(--m-ink) 14%, transparent);
}
.figure-tile .label {
  display: flex;
  align-items: center;
  gap: 6px;
  font: var(--m-type-footnote-strong);
  color: var(--tone-text, var(--m-label-2));
}
.figure-tile .label .ic {
  width: 14px;
  height: 14px;
}
.figure-tile .figure {
  margin-top: 10px;
  font: var(--m-type-figure-large);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.figure-tile .figure small {
  font: 510 13px / 1 var(--m-font);
  letter-spacing: 0;
  color: var(--m-label-2);
}
.figure-tile .sub {
  font: var(--m-type-footnote);
  color: var(--m-label-2);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.figure-tile .viz {
  margin-top: auto;
  padding-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-height: 38px;
  justify-content: flex-end;
}
/* A tile three or more figures share is two columns wide, each one named
   under the bar beside its colour. */
.figure-tile.wide {
  grid-column: span 2;
}
.figure-tile .parts {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 14px;
  font: var(--m-type-footnote);
  color: var(--m-label-2);
}
.figure-tile .parts span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.figure-tile .parts i {
  width: 8px;
  height: 8px;
  border-radius: 2px;
  background: var(--c);
}
/* A figure's meters, such as a battery's charge: a label, the bar, how full. */
.figure-meter {
  display: grid;
  grid-template-columns: minmax(44px, auto) 1fr minmax(32px, auto);
  align-items: center;
  gap: 8px;
  font: var(--m-type-footnote);
  color: var(--m-label-3);
  white-space: nowrap;
}
.figure-meter .meter {
  grid-column: auto;
  margin-top: 0;
}
.figure-meter > :last-child {
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: var(--m-label-2);
}
.figure-tile.tone-red {
  border-color: color-mix(in srgb, var(--m-red) 35%, transparent);
}
.spark {
  display: block;
  width: 100%;
  height: 28px;
  overflow: visible;
}
.spark .line {
  fill: none;
  stroke-width: 1.5;
  vector-effect: non-scaling-stroke;
  stroke-linejoin: round;
}
.hit {
  fill: transparent;
  transition: fill 0.1s;
}
.spark .hit:hover {
  fill: color-mix(in srgb, var(--m-ink) 9%, transparent);
}
/* A figure's shares: one bar, each part as wide as its share, in its colour.
   With many, such as a backup's guests, they sit closer. */
.shares {
  display: flex;
  gap: 3px;
  height: 6px;
  /* However many, the bar never runs past its tile. */
  overflow-x: clip;
}
.shares.many {
  gap: 1px;
}
.shares.many i {
  min-width: 1px;
}
.shares i {
  min-width: 3px;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--c), color-mix(in srgb, var(--c) 60%, transparent));
  transition:
    filter 0.15s,
    transform 0.15s var(--m-ease);
}
.shares i.tone-gray {
  background: var(--m-fill-gray);
}
.shares i:hover {
  filter: brightness(1.35);
  transform: scaleY(1.5);
}
/* A chart by the hour, in a card: a head with its title and what its range
   sums to, or its figure, then the chart, then its legend. */
.hours {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
#charts .chart {
  margin-top: 16px;
}
.card.chart {
  padding: 16px 16px 12px;
}
.chart-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px 16px;
  margin-bottom: 12px;
}
.chart-head .card-title {
  margin: 0;
}
.chart-head .label {
  display: flex;
  align-items: center;
  gap: 6px;
  font: var(--m-type-footnote-strong);
  color: var(--m-label-2);
}
.chart-head .detail {
  margin-top: 2px;
  font: var(--m-type-footnote);
  color: var(--m-label-2);
}
.chart-head .detail b {
  font-weight: 510;
  color: var(--m-label-1);
  font-variant-numeric: tabular-nums;
}
.chart-top {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 10px;
  margin: -4px 0 12px;
}
.chart-top .figure {
  font: 510 22px / 28px var(--m-font);
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}
.chart-top .detail {
  font: var(--m-type-footnote);
  color: var(--m-label-2);
}
.legend {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  font: var(--m-type-footnote);
  color: var(--m-label-2);
}
.legend i {
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 6px;
  border-radius: 2px;
  background: var(--c);
}
.card.chart > .legend {
  margin-top: 8px;
}
.pills {
  display: inline-flex;
  gap: 2px;
  padding: 2px;
  border-radius: 9999px;
  background: var(--m-fill-hover);
  box-shadow: inset 0 0 0 0.5px var(--m-border);
}
.pills button {
  height: 24px;
  padding: 0 10px;
  border: 0;
  border-radius: 9999px;
  cursor: pointer;
  background: none;
  font: 510 12px / 1 var(--m-font);
  color: var(--m-label-2);
  transition:
    background-color 0.15s,
    color 0.15s;
}
.pills button:hover {
  color: var(--m-label);
}
.pills button[aria-pressed="true"] {
  background: color-mix(in srgb, var(--m-ink) 8%, transparent);
  box-shadow: inset 0 0 0 0.5px var(--m-border);
  color: var(--m-label);
}
/* The chart itself: dashed lines at its scale's steps, their numbers on the
   right, the hours or days underneath, and the bars or areas between. */
.hour-chart .plot {
  position: relative;
  height: 150px;
  margin-right: 46px;
}
.hour-chart.areas .plot {
  height: 240px;
}
@media (max-width: 860px) {
  .hour-chart.areas .plot {
    height: 180px;
  }
}
.hour-chart .line {
  position: absolute;
  left: 0;
  right: 0;
  border-top: 1px dashed var(--m-separator);
}
.hour-chart .scale {
  position: absolute;
  left: calc(100% + 8px);
  transform: translateY(50%);
  font: 510 11px / 1 var(--m-font);
  color: var(--m-label-3);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.hour-chart .axis {
  position: relative;
  height: 14px;
  margin: 6px 46px 0 0;
}
.hour-chart .axis span {
  position: absolute;
  transform: translateX(-50%);
  font: 510 11px / 1 var(--m-font);
  color: var(--m-label-3);
  white-space: nowrap;
}
/* Bars: each hour's whole fading down, each part within it solid from its
   foot. The one under the pointer stands out. */
.hour-chart .cols {
  position: absolute;
  inset: 0;
  display: flex;
  gap: 3px;
}
.hour-chart .hour {
  position: relative;
  flex: 1;
  min-width: 0;
  transition: opacity 0.15s;
}
.hour-chart .hour i {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 2px 2px 0 0;
  background: var(--c);
}
.hour-chart .hour .whole {
  background: linear-gradient(180deg, var(--c), color-mix(in srgb, var(--c) 45%, transparent));
}
.hour-chart .cols:hover .hour {
  opacity: 0.55;
}
.hour-chart .cols .hour:hover {
  opacity: 1;
}
/* Areas: every other day shaded, each series filled and lined, and a line
   across the hour under the pointer. */
.hour-chart svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  touch-action: pan-y;
}
.hour-chart .band {
  fill: color-mix(in srgb, var(--m-ink) 2%, transparent);
}
.hour-chart .stroke {
  fill: none;
  stroke-width: 1.5;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
/* A level's line among many that isn't one of the highest. */
.hour-chart .stroke.quiet {
  stroke-width: 1;
  opacity: 0.6;
}
.hour-chart .cur {
  stroke: color-mix(in srgb, var(--m-ink) 28%, transparent);
  vector-effect: non-scaling-stroke;
  opacity: 0;
}
.hour-chart .col:hover .cur {
  opacity: 1;
}
.hour-chart .col:hover .hit {
  fill: color-mix(in srgb, var(--m-ink) 3%, transparent);
}
/* The areas: rows that unfold into their checks. */
.table {
  border: 1px solid var(--m-border);
  border-radius: 12px;
  background: var(--m-card-fill);
  overflow: hidden;
}
.trow {
  display: grid;
  grid-template-columns: minmax(150px, 1.4fr) 110px 100px 70px minmax(120px, 1fr);
  align-items: center;
  gap: 12px;
  min-height: 46px;
  padding: 0 16px;
  font: var(--m-type-body);
  list-style: none;
}
.trow::-webkit-details-marker {
  display: none;
}
.thead {
  min-height: 34px;
  font: var(--m-type-footnote-strong);
  color: var(--m-label-3);
  border-bottom: 1px solid var(--m-separator);
}
.area + .area {
  border-top: 1px solid var(--m-separator);
}
.area > summary {
  cursor: pointer;
  transition: background-color 0.12s;
}
.area > summary:hover,
.kid:hover {
  background: var(--m-fill-hover);
}
.tname {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  font: var(--m-type-headline);
}
.tname a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--m-label-3);
}
.tname > span:last-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.twist {
  width: 12px;
  height: 12px;
  margin-left: -4px;
  color: var(--m-label-3);
  transition: transform 0.2s var(--m-ease);
}
.area[open] .twist {
  transform: rotate(90deg);
}
.health {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font: var(--m-type-headline);
  color: var(--tone-text);
}
.tcount {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--m-label-1);
  font-variant-numeric: tabular-nums;
  min-width: 0;
}
.tcount.detail {
  font: var(--m-type-footnote);
  color: var(--m-label-3);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  display: block;
}
.tms {
  color: var(--m-label-2);
  font-variant-numeric: tabular-nums;
}
.pie {
  width: 14px;
  height: 14px;
  transform: rotate(-90deg);
}
.pie circle {
  fill: none;
  stroke-width: 2.5;
  stroke: var(--m-fill-gray);
}
.pie circle + circle {
  stroke: var(--m-green);
  stroke-linecap: round;
}
.tkids {
  position: relative;
  padding: 2px 0 8px;
}
.area[open] .tkids {
  animation: drop 0.25s var(--m-ease) both;
}
.kid {
  min-height: 36px;
}
.kid .tname {
  padding-left: 28px;
  position: relative;
  font: var(--m-type-body);
  color: var(--m-label-1);
}
.kid .tname::before {
  content: "";
  position: absolute;
  left: 10px;
  top: -18px;
  bottom: 50%;
  width: 10px;
  border-left: 1px solid var(--m-border);
  border-bottom: 1px solid var(--m-border);
  border-bottom-left-radius: 6px;
}
.kid .health {
  font: var(--m-type-body);
}

/* The last results, one tick each: the newest at the right, breathing. */
.strip {
  display: flex;
  gap: 2px;
  align-items: center;
  height: 18px;
  min-width: 0;
}
.strip i {
  flex: 1;
  max-width: 5px;
  min-width: 2px;
  height: 14px;
  border-radius: 2px;
  background: var(--m-fill-gray);
  transition: transform 0.15s var(--m-ease);
}
.strip i.ok {
  background: var(--m-passed);
}
.strip i.bad {
  background: var(--m-red);
}
/* An area's moment when only some of its checks failed: red as tall as
   their share, and never so little that it can't be seen. */
.strip i.part {
  background: linear-gradient(to top, var(--m-passed) calc(100% - max(4px, var(--bad) * 100%)), var(--m-red) 0);
}
.strip i:last-child.ok {
  background: var(--m-green);
  animation: breathe 2.4s ease-in-out infinite;
}
.strip i:hover {
  transform: scaleY(1.3);
}
@keyframes breathe {
  50% {
    opacity: 0.55;
  }
}

/* This week's events, newest first. */
.feed {
  margin: 0;
  padding: 8px 16px;
  list-style: none;
}
.feed li {
  position: relative;
  display: flex;
  gap: 12px;
  padding: 9px 0;
  font: var(--m-type-body);
  color: var(--m-label-1);
}
.feed li:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 7.5px;
  top: 30px;
  bottom: -6px;
  width: 1px;
  background: var(--m-separator);
}
.feed .mark {
  display: grid;
  place-items: center;
  width: 16px;
  height: 20px;
  flex: none;
}
.feed .mark .ic {
  width: 15px;
  height: 15px;
}
.feed b {
  font-weight: 510;
  color: var(--m-label);
}
.feed .meta {
  color: var(--m-label-3);
  white-space: nowrap;
}
.feed .empty {
  color: var(--m-label-2);
}

/* The week: a bar per area, its problems in red, its events as diamonds. */
.timeline {
  --label: 84px;
  position: relative;
  padding: 0 16px 14px;
  overflow: hidden;
}
.tl-row {
  display: grid;
  grid-template-columns: max(var(--label), var(--fit, 0px)) minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  height: 30px;
  margin-top: 8px;
}
.tl-track {
  position: relative;
  height: 100%;
}
.tl-head {
  height: 34px;
  margin: 0 -16px 2px;
  padding: 0 16px;
  border-bottom: 1px solid var(--m-separator);
  font: var(--m-type-footnote);
  color: var(--m-label-3);
}
.tl-head .tl-track > span {
  position: absolute;
  top: 10px;
  transform: translateX(6px);
  white-space: nowrap;
}
.tl-head b {
  font-weight: 510;
  color: var(--m-label-2);
}
.tl-head .today,
.tl-head .today b {
  color: var(--m-accent-2);
}
.tl-grid {
  position: absolute;
  top: 34px;
  bottom: 0;
  left: calc(28px + max(var(--label), var(--fit, 0px)));
  right: 16px;
  pointer-events: none;
}
.tl-grid i {
  position: absolute;
  top: 0;
  bottom: 0;
  border-left: 1px dashed var(--m-separator);
}
.tl-label {
  display: flex;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
  font: var(--m-type-footnote-strong);
  color: var(--m-label-1);
}
.tl-label .ic {
  width: 13px;
  height: 13px;
  color: var(--tint);
}
.tl-bar {
  position: absolute;
  inset: 5px 0;
  border-radius: 5px;
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--m-ink) 3%, transparent) 0%,
    color-mix(in srgb, var(--tint) 14%, color-mix(in srgb, var(--m-ink) 3%, transparent)) 65%,
    color-mix(in srgb, var(--tint) 38%, transparent) 100%
  );
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--m-ink) 5%, transparent);
  transform-origin: left;
}
@media (max-width: 600px) {
  .timeline {
    --label: 70px;
  }
  .tl-head .wd {
    display: none;
  }
}
.tl-out {
  position: absolute;
  top: 5px;
  bottom: 5px;
  min-width: 4px;
  border-radius: 4px;
  background: var(--m-red);
  opacity: 0.9;
  box-shadow: 0 0 12px color-mix(in srgb, var(--m-red) 50%, transparent);
}
.tl-out.now {
  background: repeating-linear-gradient(
    -45deg,
    var(--m-red) 0 4px,
    color-mix(in srgb, var(--m-red) 45%, transparent) 4px 8px
  );
  animation: beat 1.6s var(--m-ease) infinite;
}
.tl-ms {
  position: absolute;
  top: 50%;
  width: 9px;
  height: 9px;
  margin: -4.5px 0 0 -4.5px;
  transform: rotate(45deg);
  border-radius: 2px;
  background: var(--m-panel);
  box-shadow: inset 0 0 0 1.5px var(--m-blue);
}
/* Several events in the same hour, one diamond a little larger. */
.tl-ms.many {
  width: 11px;
  height: 11px;
  margin: -5.5px 0 0 -5.5px;
  box-shadow: inset 0 0 0 2.5px var(--m-blue);
}
.tl-ms.bad {
  box-shadow: inset 0 0 0 1.5px var(--m-red);
  background: color-mix(in srgb, var(--m-red) 30%, var(--m-panel));
}

/* The apps, each a door lit in its colour on hover. */
.launch {
  display: grid;
  gap: 10px;
  /* As Today's: --cols to a row where they fit, fewer where they don't. */
  grid-template-columns: repeat(
      auto-fill,
      minmax(max(150px, calc((100% - (var(--cols, 3) - 1) * 10px) / var(--cols, 3))), 1fr)
    );
}
/* Past twelve, each app is its logo, its name, its dot and its time. */
.launch.compact .app {
  padding: 10px;
}
.launch.compact .app-top {
  margin-bottom: 6px;
}
.launch.compact .app-foot {
  margin-top: 4px;
}
.app {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 12px;
  border-radius: 12px;
  background: var(--m-card-fill);
  border: 1px solid var(--m-border);
  transition: border-color 0.2s;
}
.app::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 80% at 0% 0%, color-mix(in srgb, var(--tint) 16%, transparent), transparent 60%);
  opacity: 0;
  transition: opacity 0.25s;
  pointer-events: none;
}
.app:hover {
  border-color: color-mix(in srgb, var(--tint) 35%, transparent);
}
.app:hover::before {
  opacity: 1;
}
.app:hover .app-icon {
  transform: rotate(-6deg) scale(1.06);
}
.app .app-icon {
  transition: transform 0.25s var(--m-ease);
}
.app-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 10px;
}
.app .title {
  font: var(--m-type-headline);
}
.app .detail {
  font: var(--m-type-footnote);
  color: var(--m-label-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.app-foot {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  margin-top: 10px;
  font: var(--m-type-footnote);
  color: var(--m-label-3);
  font-variant-numeric: tabular-nums;
}
.app-foot > span {
  white-space: nowrap;
}
.app-foot .spark {
  height: 16px;
  flex: 1;
  /* It gives way to a long word such as Degraded, inside its tile. */
  min-width: 0;
  opacity: 0.8;
}

/* The chores, in groups. */
.chores {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.group {
  border: 1px solid var(--m-border);
  border-radius: 12px;
  background: var(--m-card-fill);
  overflow: hidden;
}
/* Each group's title is a heading, for a screen reader to move between. */
.group-head {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 36px;
  margin: 0;
  padding: 0 14px;
  background: color-mix(in srgb, var(--m-ink) 2%, transparent);
  font: var(--m-type-headline);
  color: var(--m-label-1);
}
.group-head .n {
  color: var(--m-label-3);
  font-weight: 400;
}
.group-head .ic,
.chore > span:first-child .ic {
  width: 14px;
  height: 14px;
}
.chore {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 9px 14px;
  border-top: 1px solid var(--m-separator);
  transition: background-color 0.12s;
}
a.chore:hover {
  background: var(--m-fill-hover);
}
.chore .title {
  font: var(--m-type-headline);
  color: var(--m-label);
}
.chore .detail {
  font: var(--m-type-footnote);
  color: var(--m-label-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.chore .meta {
  font: var(--m-type-footnote);
  color: var(--m-label-2);
  white-space: nowrap;
}
.copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
}

@media (max-width: 760px) {
  /* A state as long as German's "30-mal in Folge fehlgeschlagen" wraps
     rather than cut off the name beside it. */
  .trow {
    grid-template-columns: minmax(0, 1fr) fit-content(50%);
  }
  .trow > .health {
    justify-content: flex-end;
    text-align: right;
  }
  .trow > :nth-child(3),
  .trow > :nth-child(4),
  .thead > :nth-child(5) {
    display: none;
  }
  .trow > .strip {
    grid-column: 1 / -1;
    margin: -8px 0 10px;
  }
  /* An area's row leaves as much above its name as under its strip; a
     check's row has the strip of the one before it for that. */
  .area > summary {
    padding-top: 12px;
  }
  .kid .strip {
    margin-left: 28px;
  }
  .inbox-row {
    grid-template-columns: auto minmax(0, 1fr);
  }
  .go {
    grid-column: 2;
    grid-row: auto;
  }
}

/* ── The area pages: their head, cards, rows and meters, in the panel ───── */

.head {
  margin: 0 0 4px;
}
.head h1 {
  margin: 0;
  font: var(--m-type-large-title);
  letter-spacing: -0.012em;
}
.head p {
  margin: 4px 0 0;
  font: var(--m-type-body);
  color: var(--m-label-2);
}
/* The state's box takes its baseline from the icon, which has none, so it
   would sit above the words after it. Set by its top instead, its words land
   on the line's own baseline, the box being one line high. */
.head p .state {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  vertical-align: top;
}
.section-title {
  margin: 32px 0 12px;
  font: var(--m-type-title);
}
/* The source a part came from, after its title, where another of its kind
   is read. */
.by {
  color: var(--m-label-2);
  font-weight: 400;
}
.card {
  min-width: 0;
  background: var(--m-card-fill);
  border: 1px solid var(--m-border);
  border-radius: var(--m-radius-card);
}
.card-title {
  margin: 0 0 8px;
  font: var(--m-type-headline);
}
/* An area page's sections flow down two columns of about the same height,
   in the snapshot's order, so each source's stay together; a section never
   breaks across them. */
@media (min-width: 1000px) {
  .columns {
    columns: 2;
    column-gap: 24px;
  }
}
.columns section {
  break-inside: avoid;
}
/* Both columns start level, a section title's height under what's above. */
.columns {
  margin-top: 32px;
}
.columns section:first-child .section-title {
  margin-top: 0;
}
.list {
  display: block;
  overflow: hidden;
}
.row {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 12px;
  min-height: var(--m-row-min);
  padding: 9px 14px;
}
.row:not(:has(.tile)) {
  grid-template-columns: minmax(0, 1fr) auto;
}
.row + .row {
  border-top: 1px solid var(--m-separator);
}
.title {
  font: var(--m-type-body);
  overflow-wrap: anywhere;
}
.title.strong {
  font: var(--m-type-headline);
}
.detail {
  font: var(--m-type-footnote);
  color: var(--m-label-2);
  overflow-wrap: anywhere;
}
.value {
  max-width: 40vw;
  font: var(--m-type-body);
  font-variant-numeric: tabular-nums;
  color: var(--m-label-2);
  text-align: right;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.chevron {
  width: 14px;
  height: 14px;
  flex: none;
  color: var(--m-label-3);
}
.empty {
  padding: 16px;
  font: var(--m-type-body);
  color: var(--m-label-2);
}
.tile {
  width: var(--m-tile);
  height: var(--m-tile);
  border-radius: var(--m-radius-tile);
  display: grid;
  place-items: center;
  color: var(--tone-text);
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--tone) 24%, transparent),
    color-mix(in srgb, var(--tone) 8%, transparent)
  );
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tone) 22%, transparent);
}
.tile svg {
  width: 15px;
  height: 15px;
}
.state {
  font: var(--m-type-body);
  color: var(--tone-text);
}

/* An area page's checks, titled like the sections, in the card under its
   head. */
#checks {
  margin-top: 32px;
}
#checks .checks {
  padding: 4px 0;
}
.check {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) minmax(90px, 160px) 64px;
  align-items: center;
  column-gap: 12px;
  min-height: 38px;
  padding: 6px 14px;
  transition: background-color 0.12s;
}
.check:hover {
  background: var(--m-fill-hover);
}
.check .detail {
  font: var(--m-type-footnote);
  color: var(--m-red-text);
}
.check .value {
  justify-content: flex-end;
  font: var(--m-type-footnote);
}
@media (max-width: 600px) {
  .check {
    grid-template-columns: auto minmax(0, 1fr) 56px;
  }
  /* Their words are still spoken. */
  .check .strip {
    display: contents;
  }
  .check .strip i {
    display: none;
  }
  /* At this width the checks draw no results, so their title doesn't name
     them. */
  #checks .hint {
    display: none;
  }
}

.meter {
  display: block;
  grid-column: 1 / -1;
  height: 4px;
  margin-top: 8px;
  border-radius: 2px;
  background: var(--m-fill-gray);
  overflow: hidden;
}
.meter > span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, color-mix(in srgb, var(--tone) 55%, transparent), var(--tone));
}
.row > .under {
  grid-column: 1 / -1;
  margin-top: 6px;
}
.row > .meters {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 2px 24px;
}

/* ── Motion: the page arrives once, then only what's live moves ─────────── */

@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
}
@keyframes drop {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
}
@keyframes fade {
  from {
    opacity: 0;
  }
}
@keyframes pop {
  from {
    opacity: 0;
    transform: scale(0.97) translateY(-6px);
  }
}
@keyframes widen {
  from {
    transform: scaleX(0);
  }
}
@keyframes draw {
  from {
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
  }
  to {
    stroke-dasharray: 1;
    stroke-dashoffset: 0;
  }
}
main > *,
.columns > * > * {
  animation: rise 0.5s var(--m-ease) both;
}
main > :nth-child(2) {
  animation-delay: 50ms;
}
main > :nth-child(3) {
  animation-delay: 100ms;
}
main > :nth-child(4) {
  animation-delay: 150ms;
}
main > :nth-child(5) {
  animation-delay: 200ms;
}
main > :nth-child(n + 6) {
  animation-delay: 250ms;
}
.boot .figure-tile,
.boot .app,
.boot .area,
.boot .feed li,
.boot .tl-row {
  animation: rise 0.5s var(--m-ease) both;
  animation-delay: calc(var(--i) * 45ms + 120ms);
}
.boot .tl-bar {
  animation: widen 0.8s var(--m-ease) both;
  animation-delay: calc(var(--i) * 70ms + 250ms);
}
.boot .spark .line {
  animation: draw 1.1s var(--m-ease) both 0.3s;
}
/* In forced colours the page's colours give way to the few the owner picked,
   which leave a background unpainted. What says how a check, an area or a
   week went by colour alone is painted in theirs, a failure in their
   highlight and in a shape of its own: a tall tick, a square dot, a filled
   diamond. Charts and shares keep their own colours, as many as they need
   to tell their parts apart. */
@media (forced-colors: active) {
  .strip i,
  .dot,
  .meter,
  .tl-track,
  .hour-chart,
  .legend,
  .shares,
  .parts {
    forced-color-adjust: none;
  }
  .strip i {
    background: transparent;
  }
  .strip i.ok,
  .strip i:last-child.ok {
    background: CanvasText;
  }
  .strip i.bad,
  .strip i.part {
    height: 18px;
    background: Highlight;
  }
  /* A dot takes its state glyph's shape: filled for up, half filled, a
     square for down, or, unknown or with no check, a faint ring. */
  .dot {
    background: transparent;
    box-shadow: inset 0 0 0 1px GrayText;
  }
  .dot.tone-green {
    background: CanvasText;
    box-shadow: none;
  }
  .dot.tone-orange {
    background: linear-gradient(90deg, CanvasText 50%, transparent 0);
    box-shadow: inset 0 0 0 1.5px CanvasText;
  }
  .dot.tone-red {
    border-radius: 1px;
    background: Highlight;
    box-shadow: none;
  }
  .meter {
    background: Canvas;
    box-shadow: inset 0 0 0 1px GrayText;
  }
  .meter > span {
    background: CanvasText;
  }
  .meter.tone-orange > span,
  .meter.tone-red > span {
    background: Highlight;
  }
  .tl-bar {
    background: transparent;
    box-shadow: inset 0 0 0 1px GrayText;
  }
  .tl-out,
  .tl-out.now {
    background: Highlight;
    box-shadow: none;
  }
  .tl-ms {
    background: Canvas;
    box-shadow: inset 0 0 0 1.5px CanvasText;
  }
  .tl-ms.bad {
    background: Highlight;
    box-shadow: inset 0 0 0 1.5px Highlight;
  }
  /* What is picked, the page showing or a chart's hours, is outlined, as
     its shade is gone. */
  .nav[aria-current="page"]:not(:focus-visible),
  .pills button[aria-pressed="true"]:not(:focus-visible) {
    outline: 1px solid CanvasText;
    outline-offset: -1px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    /* biome-ignore lint/complexity/noImportantStyles: reduced motion must win over every animation */
    animation: none !important;
    /* biome-ignore lint/complexity/noImportantStyles: and over every transition */
    transition: none !important;
  }
}

/* The rows past a list's first ones, behind "Show N more", shown in place. */
.more > summary {
  list-style: none;
  padding: 10px 14px;
  border-top: 1px solid var(--m-separator);
  font: var(--m-type-footnote-strong);
  color: var(--m-label-2);
  cursor: pointer;
}
.more > summary::-webkit-details-marker {
  display: none;
}
.more > summary:hover {
  color: var(--m-label);
  background: var(--m-fill-hover);
}
.more > summary > :last-child,
.more[open] > summary > :first-child {
  display: none;
}
.more[open] > summary > :last-child {
  display: inline;
}
.more > .row,
.more > .chore {
  border-top: 1px solid var(--m-separator);
}

/* ── The setup page (ADR 0014) ──────────────────────────────────────────
   In place of the page while there is no config: one column, and no
   sidebar, since there are no areas yet. Each adapter opens to its fields. */
body.setup {
  display: block;
}
body.setup main {
  max-width: 760px;
}
body.setup .foot {
  max-width: calc(760px - 64px);
  justify-content: flex-end;
}
/* The files' hint goes under their title where both don't fit. */
.setup .block-title {
  flex-wrap: wrap;
}
/* What the check engines' group asks first, and why, under its title. */
.block-ask {
  margin: -4px 0 12px;
  color: var(--m-label-2);
}
/* The setup code's form is a card of its own, with nothing above it. */
.asks.code {
  border-top: 0;
}
.adapters {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.adapter > summary {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: var(--m-row-min);
  padding: 0 14px 0 10px;
  list-style: none;
  cursor: pointer;
  font: var(--m-type-headline);
}
.adapter > summary::-webkit-details-marker {
  display: none;
}
.adapter > summary:hover {
  background: var(--m-fill-hover);
  border-radius: var(--m-radius-card);
}
.adapter > summary .caret {
  color: var(--m-label-3);
  transform: rotate(-90deg);
  transition: transform 0.15s;
}
.adapter[open] > summary .caret {
  transform: none;
}
.adapter > summary .n {
  margin-left: auto;
  font: var(--m-type-subhead);
  color: var(--m-green-text);
}
.added {
  margin: 0;
  padding: 0 14px;
  list-style: none;
}
.added li {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  border-top: 1px solid var(--m-separator);
}
.added .where {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--m-label-2);
}
.added .icon-btn {
  margin-left: auto;
}
.asks {
  display: grid;
  gap: 10px;
  padding: 12px 14px 14px;
  border-top: 1px solid var(--m-separator);
}
.ask {
  display: grid;
  gap: 4px;
}
.ask > span {
  font: var(--m-type-footnote-strong);
  color: var(--m-label-2);
}
.ask i {
  margin-left: 6px;
  font-style: normal;
  font-weight: 400;
  color: var(--m-label-3);
}
.ask input {
  height: 32px;
  min-width: 0;
  padding: 0 10px;
  border: 0;
  border-radius: 8px;
  background: var(--m-fill-gray);
  box-shadow: inset 0 0 0 0.5px var(--m-border);
  color: var(--m-label);
  font: var(--m-type-body);
}
.ask input::placeholder {
  color: var(--m-label-3);
}
.asks-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  margin-top: 2px;
}
.asks-foot .action {
  padding: 0 14px;
}
.action:disabled {
  opacity: 0.5;
  cursor: default;
}
.readme {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font: var(--m-type-footnote);
  color: var(--m-label-2);
  transition: color 0.15s;
}
.readme:hover {
  color: var(--m-label);
}
.readme .ic {
  width: 12px;
  height: 12px;
}
.answer {
  flex-basis: 100%;
  margin: 0;
  font: var(--m-type-footnote);
  color: var(--m-label-2);
  overflow-wrap: anywhere;
}
.answer:empty {
  display: none;
}
.answer.good {
  color: var(--m-green-text);
}
.answer.bad {
  color: var(--m-red-text);
}
/* The error as Overlook got it, under what to do about it. */
.answer .detail {
  display: block;
  margin-top: 2px;
  color: var(--m-label-3);
}
.adapter > summary .app-icon {
  margin-right: 2px;
}
.file {
  margin-top: 8px;
  overflow: hidden;
}
.file-head {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 8px 8px 14px;
  border-bottom: 1px solid var(--m-separator);
}
.file-head code {
  margin-right: auto;
  font: 510 12px / 1 var(--m-mono);
}
.file-head .action {
  height: 26px;
  padding: 0 10px;
}
.file-note {
  margin: 10px 14px 0;
  font: var(--m-type-footnote);
  color: var(--m-label-2);
}
.file pre {
  margin: 0;
  padding: 12px 14px;
  overflow-x: auto;
  font: 400 12px / 18px var(--m-mono);
  color: var(--m-label-1);
}
.restart {
  margin: 14px 0 0;
  color: var(--m-label-2);
}
.restart.away {
  color: var(--m-orange-text);
}
.restart code,
.block-ask code,
.file-note code {
  font: 12px var(--m-mono);
  color: var(--m-label-1);
}