/* The app's one stylesheet: the shell (the column and the brand lockup) and
   the report visual language — the tools' tiles, meters, and bars — expressed
   in the Spillway Ops design tokens (tokens.css). Every colour is a token; the
   only literals are the fallbacks inside var(). */

body {
  background: var(--md-sys-color-surface);
  color: var(--md-sys-color-on-surface);
}

a {
  color: var(--md-sys-color-primary);
}

/* --- Shell ----------------------------------------------------------------
   One column for the header and the page. These measurements moved here from
   the layout's inline style unchanged, so that the header and the content
   share one column; the body typeface is deliberately not changed by the
   shell. */

.shell {
  max-width: 42rem;
  margin: 2rem auto;
  padding: 0 1rem;
  font-family: system-ui, sans-serif;
}

.shell-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1rem;
  margin-bottom: 1.5rem;
}

/* A signed-in viewer's way around, beside the lockup: links in the label
   type role, sign-out an outlined button (app-shell: the shell carries a
   signed-in viewer's way around). */
.shell-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1rem;
  font: var(--md-sys-typescale-label-large);
}

.shell-actions form {
  margin: 0;
}

/* The lockup sits on the surface and takes its on- colour, not the link
   colour, with no underline: it is the identity, not a link among links. The
   hover and pressed grounds are the tokens' state layers over that colour. */
.lockup {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  color: var(--md-sys-color-on-surface);
  text-decoration: none;
  border-radius: var(--md-sys-shape-corner-small);
  padding: 0.25rem 0.5rem;
  margin-inline-start: -0.5rem;
}

.lockup:hover {
  color: var(--md-sys-color-on-surface);
  text-decoration: none;
  background-color: color-mix(in srgb, var(--md-sys-color-on-surface) calc(var(--md-sys-state-hover-opacity) * 100%), transparent);
}

.lockup:active {
  background-color: color-mix(in srgb, var(--md-sys-color-on-surface) calc(var(--md-sys-state-pressed-opacity) * 100%), transparent);
}

.lockup:focus-visible {
  outline: 2px solid var(--md-sys-color-primary);
  outline-offset: 2px;
}

/* The mark is the packaged favicon.svg, placed as an image (see MainLayout),
   so no colour is declared here: the brand's two colours live inside the file,
   fixed in both schemes. Sized in em so it scales with the wordmark's type
   role.

   The mark's white figure runs to its own edges — the channel reaches the top,
   the apron the bottom and both sides — so on a pale ground the square
   dissolves into two floating blue bars. The silhouette is therefore drawn: a
   hairline in the outline role, the token for an edge that has to be seen,
   measured against surface in both schemes (about 3.9:1 light, 5.7:1 dark).
   The border is inside the box, so the drawing scales to fit rather than
   being clipped by it. */
.brand-mark {
  display: block;
  width: 1.75em;
  height: 1.75em;
  box-sizing: border-box;
  border: 1px solid var(--md-sys-color-outline);
  border-radius: var(--md-sys-shape-corner-extra-small);
  flex: none;
}

.wordmark {
  font: var(--md-sys-typescale-title-medium);
  letter-spacing: var(--md-sys-typescale-title-medium-tracking);
  white-space: nowrap;
}

/* --- Controls -------------------------------------------------------------
   Buttons take the design system's treatment in both schemes: outlined by
   default, filled for the one primary action a panel offers, with the
   tokens' state layers and a focus ring a keyboard user can see (design D8).
   A link that is a page's way forward wears the same treatment, by a class
   no more specific than .button-filled, so filled wins by order. */

button,
.button {
  font: var(--md-sys-typescale-label-large);
  letter-spacing: var(--md-sys-typescale-label-large-tracking);
  color: var(--md-sys-color-primary);
  background: transparent;
  border: 1px solid var(--md-sys-color-outline);
  border-radius: var(--md-sys-shape-corner-full);
  padding: 0.5rem 1.25rem;
  min-height: 2.5rem;
  cursor: pointer;
}

a.button {
  display: inline-flex;
  align-items: center;
  box-sizing: border-box;
  text-decoration: none;
}

button:hover,
.button:hover {
  background-color: color-mix(in srgb, var(--md-sys-color-primary) calc(var(--md-sys-state-hover-opacity) * 100%), transparent);
}

button:active,
.button:active {
  background-color: color-mix(in srgb, var(--md-sys-color-primary) calc(var(--md-sys-state-pressed-opacity) * 100%), transparent);
}

button:focus-visible,
.button:focus-visible {
  outline: 2px solid var(--md-sys-color-primary);
  outline-offset: 2px;
}

.button-filled {
  color: var(--md-sys-color-on-primary);
  background: var(--md-sys-color-primary);
  border-color: transparent;
}

.button-filled:hover {
  background-color: color-mix(in srgb, var(--md-sys-color-on-primary) calc(var(--md-sys-state-hover-opacity) * 100%), var(--md-sys-color-primary));
}

.button-filled:active {
  background-color: color-mix(in srgb, var(--md-sys-color-on-primary) calc(var(--md-sys-state-pressed-opacity) * 100%), var(--md-sys-color-primary));
}

/* --- Home -------------------------------------------------------------------
   The signed-out page's doors in one row: install (filled), sign-in
   (outlined) and the samples (a link). */

.home-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1rem;
  margin: 1.5rem 0 0.5rem;
}

/* --- Installation selection -------------------------------------------------
   Each organization a row on the container surface, its login in the title
   role (design D8). */

.org-list {
  list-style: none;
  display: grid;
  gap: 0.5rem;
  margin: 1rem 0;
  padding: 0;
}

.org-list li {
  background: var(--md-sys-color-surface-container);
  border-radius: var(--md-sys-shape-corner-medium);
  padding: 0.75rem 1rem;
}

.org-list a {
  font: var(--md-sys-typescale-title-medium);
  letter-spacing: var(--md-sys-typescale-title-medium-tracking);
}

.org-list small {
  color: var(--md-sys-color-on-surface-variant, inherit);
}

/* --- Sample reports -------------------------------------------------------
   Each sample a row on the container surface, as an organization is in
   installation selection: its login, its story, and its two views. */

.sample-list {
  list-style: none;
  display: grid;
  gap: 0.75rem;
  margin: 1rem 0;
  padding: 0;
}

.sample-list li {
  background: var(--md-sys-color-surface-container);
  border-radius: var(--md-sys-shape-corner-medium);
  padding: 0.75rem 1rem;
}

.sample-list h2 {
  font: var(--md-sys-typescale-title-medium);
  letter-spacing: var(--md-sys-typescale-title-medium-tracking);
  margin: 0;
}

.sample-list p {
  margin: 0.25rem 0 0;
}

.sample-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1rem;
}

/* --- Report ---------------------------------------------------------------- */

/* The estimate's marker, kept whole, and the one statement it leads to,
   outlined when a marker is followed (design D4). */
.est {
  white-space: nowrap;
}

.est abbr {
  text-decoration: none;
}

#estimate:target {
  outline: 2px solid var(--md-sys-color-primary);
  outline-offset: 4px;
  border-radius: 2px;
}

/* The findings beneath the meter: each its figures, then the link to where
   the decision they bear on is made (design D7). */
.findings {
  margin: 0.75rem 0;
  padding-inline-start: 1.25rem;
}

.findings li {
  margin: 0.35rem 0;
}

/* The period beneath the organization's name: the month, the day of it, the
   reset, the plan and seats, and the moment of the reads (design D6). */
h1:has(+ .period) {
  margin-bottom: 0.25rem;
}

.period {
  margin: 0 0 1rem;
  font-size: 0.9rem;
  color: var(--md-sys-color-on-surface-variant, inherit);
}

section.panel {
  margin: 1.5rem 0;
}

.tiles {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin: 0.75rem 0;
}

.tile {
  box-sizing: border-box;
  background: var(--md-sys-color-surface-container);
  border-radius: 12px;
  padding: 0.75rem 1rem;
  /* The basis includes the padding (border-box): 9rem of content, as
     before, so desktop rows keep three tiles and values stay on one line. */
  flex: 1 1 11rem;
  min-width: 11rem;
}

.tile-label {
  font-size: 0.8rem;
  color: var(--md-sys-color-on-surface-variant, inherit);
}

.tile-value {
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.3;
  font-variant-numeric: tabular-nums;
}

.tile-detail {
  font-size: 0.75rem;
  color: var(--md-sys-color-on-surface-variant, inherit);
}

.tone-caution {
  background: var(--md-sys-color-caution-container);
  color: var(--md-sys-color-on-caution-container);
}

.tone-expired {
  background: var(--md-sys-color-expired-container);
  color: var(--md-sys-color-on-expired-container);
}

.tone-positive {
  background: var(--md-sys-color-tertiary-container);
  color: var(--md-sys-color-on-tertiary-container);
}

.verdict {
  border-radius: 12px;
  padding: 1rem 1.25rem;
  margin: 1rem 0;
  font-size: 1.05rem;
}

/* The headline names the outcome and its size; the body beneath it states
   the pace and any price (design D1). */
.verdict-headline {
  margin: 0;
  font-weight: 600;
}

.verdict-body {
  margin: 0.4rem 0 0;
  font-size: 0.95rem;
}

.verdict.tone-forfeit {
  background: var(--md-sys-color-expired-container);
  color: var(--md-sys-color-on-expired-container);
}

.verdict.tone-overage {
  background: var(--md-sys-color-caution-container);
  color: var(--md-sys-color-on-caution-container);
}

/* A withheld verdict states measured figures and projects nothing, so it
   takes the outline treatment of a statement about missing figures rather
   than a forecast's tone. */
.verdict.tone-withheld {
  background: var(--md-sys-color-surface-container-low, var(--md-sys-color-surface-container));
  border-left: 3px solid var(--md-sys-color-outline, #888);
}

/* The burn bar and the legend that states its figures in words (design
   D3). Consumption is solid and the projection hatched; the segment
   projected to expire is outlined in the expired tone, and the one beyond the
   estimate filled in the caution tone; the estimate's mark stands across the
   track. Each legend swatch is drawn as its segment is. */
.meter-figure {
  margin: 0.75rem 0;
}

.meter {
  position: relative;
  margin: 0.6rem 0;
}

.meter-track {
  position: relative;
  height: 0.9rem;
  border-radius: 6px;
  overflow: hidden;
  background: var(--md-sys-color-surface-container-high, var(--md-sys-color-surface-container));
}

.meter-segment {
  position: absolute;
  top: 0;
  bottom: 0;
}

.meter-used,
.swatch-used {
  background: var(--md-sys-color-primary);
}

.meter-used-over {
  background: var(--md-sys-color-caution);
}

.meter-projected,
.swatch-projected {
  background: repeating-linear-gradient(
    135deg, var(--md-sys-color-primary) 0 2px, transparent 2px 6px);
}

.meter-projected-over,
.swatch-over {
  background: repeating-linear-gradient(
    135deg, var(--md-sys-color-caution) 0 2px, var(--md-sys-color-caution-container) 2px 6px);
}

.meter-forfeit,
.swatch-forfeit {
  box-shadow: inset 0 0 0 2px var(--md-sys-color-expired);
}

.meter-mark {
  position: absolute;
  top: -0.25rem;
  bottom: -0.25rem;
  width: 2px;
  margin-left: -1px;
  background: var(--md-sys-color-on-surface);
}

.meter-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.85rem;
  color: var(--md-sys-color-on-surface-variant, inherit);
}

.meter-legend li {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.swatch {
  display: inline-block;
  width: 1rem;
  height: 0.7rem;
  border-radius: 2px;
}

.swatch-projected {
  box-shadow: inset 0 0 0 1px var(--md-sys-color-primary);
}

.swatch-mark {
  width: 2px;
  height: 1rem;
  border-radius: 0;
  background: var(--md-sys-color-on-surface);
}

/* A table scrolls inside its own container, so the page never scrolls
   sideways at phone width; the container takes focus so a keyboard can
   scroll it too (pool-report: phone width). */
.table-scroll {
  overflow-x: auto;
  max-width: 100%;
  margin: 0.5rem 0;
}

.table-scroll:focus-visible {
  outline: 2px solid var(--md-sys-color-primary);
  outline-offset: 2px;
}

.report-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}

/* The caption carries what the table lists, in the weight of the heading
   it replaced (pool-report: tables named). */
.report-table caption {
  caption-side: top;
  text-align: left;
  font: var(--md-sys-typescale-title-medium);
  letter-spacing: var(--md-sys-typescale-title-medium-tracking);
  padding-bottom: 0.5rem;
}

/* A login split across two lines misreads; the container scrolls instead. */
.report-table td.login {
  white-space: nowrap;
}

/* Rows beyond those shown first, and the seat holders absent from the
   per-user report, one step away on the same page (design D4). */
details.more-rows,
details.absent {
  margin: 0.5rem 0;
}

details.more-rows > summary,
details.absent > summary {
  cursor: pointer;
  color: var(--md-sys-color-primary);
}

.login-list {
  columns: 12rem auto;
  margin: 0.5rem 0;
  padding-inline-start: 1.25rem;
}

.report-table th,
.report-table td {
  text-align: left;
  padding: 0.35rem 0.5rem;
  border-bottom: 1px solid var(--md-sys-color-outline-variant, #8884);
}

.report-table td.num,
.report-table th.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* A moment may break between its date and its time, never inside the date
   at its hyphens. */
.report-table td.moment span {
  white-space: nowrap;
}

.source {
  color: var(--md-sys-color-on-surface-variant, inherit);
}

/* A panel's provenance: one line, and its reads and caveats one step away
   in small print (design D5). */
.panel-sources {
  margin-top: 1rem;
}

.panel-sources .source {
  margin: 0;
}

details.sources {
  font-size: 0.85rem;
  color: var(--md-sys-color-on-surface-variant, inherit);
}

details.sources > summary {
  cursor: pointer;
  width: fit-content;
  color: var(--md-sys-color-primary);
}

details.sources ul {
  margin: 0.35rem 0 0;
  padding-inline-start: 1.25rem;
}

details.sources li {
  margin: 0.25rem 0;
}

details.sources code {
  overflow-wrap: anywhere;
}

/* An endpoint path has no spaces; it breaks anywhere rather than widen
   the page. */
.source code {
  overflow-wrap: anywhere;
}

.degraded {
  background: var(--md-sys-color-surface-container-low, var(--md-sys-color-surface-container));
  border-left: 3px solid var(--md-sys-color-outline, #888);
  padding: 0.5rem 0.75rem;
  border-radius: 6px;
}

/* The synthetic-data marker, once per sample page: a heads-up in caution,
   where .degraded's outline border stays reserved for missing data. */
.sample-notice {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1rem;
  background: var(--md-sys-color-surface-container-high, var(--md-sys-color-surface-container));
  border-left: 4px solid var(--md-sys-color-caution);
  border-radius: 8px;
  padding: 0.5rem 0.75rem;
  margin: 1rem 0;
}

.sample-notice p {
  flex: 1 1 auto;
  margin: 0;
}

/* The notice's calls to action: install and sign-in for a visitor, the way
   back for a signed-in viewer. */
.sample-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1rem;
}

/* The brief's ways off the page, above the text they carry. */
.brief-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1rem;
}

.copy-status {
  color: var(--md-sys-color-on-surface-variant, inherit);
}

.brief {
  box-sizing: border-box;
  width: 100%;
  min-height: 16rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.8rem;
  background: var(--md-sys-color-surface-container-lowest, #fff);
  color: inherit;
  border: 1px solid var(--md-sys-color-outline-variant, #8884);
  border-radius: 8px;
  padding: 0.6rem;
}

/* The short brief needs less room; the full one opens beneath it (design
   D9). */
.brief-short {
  min-height: 10rem;
}

details.full-brief {
  margin: 0.75rem 0 0;
}

details.full-brief > summary {
  cursor: pointer;
  width: fit-content;
  color: var(--md-sys-color-primary);
  margin-bottom: 0.5rem;
}

/* --- Phone width ----------------------------------------------------------
   Two tiles to a row instead of one, which halves the pool panel's height,
   with a value that wraps rather than widen its tile (pool-report: phone
   width). */

@media (max-width: 600px) {
  .tile {
    flex-basis: calc(50% - 0.375rem);
    min-width: 0;
    padding: 0.6rem 0.75rem;
  }

  .tile-value {
    font-size: 1.25rem;
    overflow-wrap: anywhere;
  }
}