/* What Carbon does not cover: this app's page rhythm and its three grids.
 *
 * Everything else — colour, type, spacing, controls, tables, tiles — comes
 * from carbon.css. Nothing here should restate a Carbon value: reach for a
 * --cds-* token, and if one does not exist, that is a sign the thing being
 * built is not a Carbon pattern.
 */

/* Carbon's header is position:fixed, so it sits over the document rather than
   above it. Two consequences to handle: the page needs room at the top, and
   anything scrolled to — by a click, an anchor, or a browser restoring a
   position — has to stop below the header instead of under it. */
html { scroll-padding-top: 3rem; }

/* The `hidden` attribute is how this app's JS shows and hides a block, but the
   browser's own `[hidden] { display: none }` lives in the user-agent sheet, and
   *any* author rule beats it — so every `.thing { display: flex }` below
   silently un-hid its own element. Stated here, in the author sheet, where it
   wins. Three blocks were already leaking when this was added, the LiteLLM
   refresh button among them: it rendered on projects that had no proxy. */
[hidden] { display: none !important; }

body {
  padding-top: 3rem;
  background: var(--cds-background);
  color: var(--cds-text-primary);
}

/* ── Block: page ──────────────────────────────────────────────────────────
   The header is fixed and 3rem tall, so every page starts below it. */

.page {
  max-width: 66rem;
  margin: 0 auto;
  padding: 2rem 2rem 5rem;
}

.page--narrow {
  max-width: 26rem;
  padding-top: 5rem;
}

/* ── Block: page-head ─────────────────────────────────────────────────────── */

.page-head {
  padding: 2.5rem 0 2rem;
  border-bottom: 1px solid var(--cds-border-subtle);
  margin-bottom: 2.5rem;
}

.page-head__meta { color: var(--cds-text-secondary); margin-top: 0.25rem; }
.page-head__badge { color: var(--cds-text-helper); margin-top: 0.25rem; }

/* ── Block: app-header ────────────────────────────────────────────────────
   Two additions to Carbon's shell: the person's name, and the icon sizing
   Carbon expects you to supply with your own SVGs. */

.app-header__user {
  display: flex;
  align-items: center;
  padding: 0 1rem;
  color: var(--cds-text-secondary);
  font-size: var(--cds-body-compact-01-font-size, 0.875rem);
  text-decoration: none;
}

.app-header__user:hover { color: var(--cds-text-primary); }

/* Carbon's header action sizes itself but does not centre a plain <svg>; its
   own components ship an icon that centres itself. Ours does not. */
.cds--header__action {
  align-items: center;
  justify-content: center;
}

.app-icon { width: 1rem; height: 1rem; fill: currentColor; }
.app-icon--lg { width: 1.25rem; height: 1.25rem; }

/* ── Block: section ───────────────────────────────────────────────────────
   A heading, optionally with controls on the same line, then its content. */

.section { margin-top: 3rem; }
.section--flush { margin-top: 0; }

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

.section__actions { display: flex; align-items: center; gap: 0.5rem; }

/* The tabs have to claim the leftover width. Without this they are a flex item
   sized to their smallest child, and Carbon collapses them into its overflow
   carousel — the tabs render but sit outside their own box, unclickable. */
.section__tabs { flex: 1 1 auto; min-width: 0; }

/* Carbon's content switcher fills its container by default, which in a flex
   header means it swallows the whole row. It is a two-state control, so give
   it the width of its labels and let the heading keep the rest. */
.section__head cds-content-switcher {
  flex: 0 0 auto;
  width: auto;
  min-width: 16rem;
}

.section__lead {
  color: var(--cds-text-secondary);
  max-width: 42rem;
  margin-bottom: 1.5rem;
}

/* ── Block: card-grid ─────────────────────────────────────────────────────
   Tiles that should stay readable rather than stretch across the page. */

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
  gap: 1rem;
}

.card__title { margin-bottom: 0.5rem; }

.card__meta {
  color: var(--cds-text-secondary);
  word-break: break-all;
  margin-bottom: 0.75rem;
}

.card__list {
  list-style: none;
  color: var(--cds-text-secondary);
  margin-bottom: 1.5rem;
}

.card__action { margin-top: auto; }

/* Tiles in a grid should share a height and push their action to the foot. */
.card-grid .cds--tile {
  display: flex;
  flex-direction: column;
}

/* ── Block: metrics ───────────────────────────────────────────────────────
   The four impact figures, and the three equivalents under them. */

.metrics { display: grid; gap: 1rem; }
.metrics--4 { grid-template-columns: repeat(4, 1fr); }
.metrics--3 { grid-template-columns: repeat(3, 1fr); }

@media (max-width: 50rem) { .metrics--4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 42rem) { .metrics--3 { grid-template-columns: 1fr; } }

.metric__head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--cds-text-secondary);
  margin-bottom: 0.75rem;
}

.metric__value { display: block; }
.metric__unit { color: var(--cds-text-secondary); margin-left: 0.25rem; }
.metric__range { color: var(--cds-text-helper); margin-top: 0.25rem; }

/* The metric colours are the chart's, not Carbon's — a dot here and a line
   in the chart have to read as the same quantity. */
.metric__icon--energy { fill: #e8c840; }
.metric__icon--carbon { fill: #3a7bdf; }
.metric__icon--water  { fill: #4ab8c8; }
.metric__icon--metals { fill: #e07828; }

/* ── Block: summary ───────────────────────────────────────────────────────── */

.summary { margin: 1.5rem 0; }
.summary__label { color: var(--cds-text-secondary); }
.summary__split { color: var(--cds-text-helper); margin-top: 0.5rem; }

/* ── Block: chart ─────────────────────────────────────────────────────────
   Chart.js draws into a canvas that needs a sized box to fill. */

.chart { position: relative; height: 15rem; margin-bottom: 2rem; }

/* ── Block: totals, filing, breakdown ─────────────────────────────────────── */

.totals {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: 1rem;
}

.total__label { color: var(--cds-text-secondary); margin-bottom: 0.5rem; }
.total__unit  { color: var(--cds-text-secondary); }
.total__sub   { color: var(--cds-text-secondary); margin-top: 0.5rem; }
.total__note  { color: var(--cds-text-helper); margin-top: 0.25rem; }

.filing {
  display: flex;
  align-items: flex-end;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-top: 1rem;
}

.filing__note { color: var(--cds-text-helper); padding-bottom: 0.5rem; }

/* Carbon's select fills its container. This one names one space, so it only
   needs the width of a space name. */
.filing cds-select { flex: 0 0 auto; width: 18rem; max-width: 100%; }

.columns { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; }
@media (max-width: 45rem) { .columns { grid-template-columns: 1fr; } }

/* ── Block: install ───────────────────────────────────────────────────────── */

/* Carbon's reset strips list markers. These are numbered steps performed in
   order, so the numbers carry meaning and have to come back. */
.install {
  list-style: decimal;
  padding-left: 1.25rem;
  color: var(--cds-text-secondary);
}
.install li { margin-bottom: 1rem; }
.install__version { color: var(--cds-text-helper); margin-left: 0.75rem; }

.code-box {
  display: block;
  padding: 1rem;
  margin: 0.5rem 0;
  background: var(--cds-layer);
  color: var(--cds-text-primary);
  font-family: var(--cds-code-01-font-family, 'IBM Plex Mono', monospace);
  font-size: 0.75rem;
  white-space: pre-wrap;
  word-break: break-all;
}

/* ── Block: command ───────────────────────────────────────────────────────
   A line somebody has to paste. It is on screen rather than behind a button,
   because a command you cannot see is one you cannot check before running. */

.command { display: flex; align-items: stretch; gap: 0.5rem; }
.command__line { flex: 1; margin: 0; cursor: pointer; }
.command__copy { flex: none; }

@media (max-width: 42rem) {
  .command { flex-direction: column; align-items: stretch; }
}

/* ── Block: danger ────────────────────────────────────────────────────────
   Deleting an account is irreversible, so it is set apart rather than sitting
   in the same visual flow as a download button. */

.danger {
  border-left: 3px solid var(--cds-support-error);
  background: var(--cds-layer);
  padding: 1.5rem;
}

.danger__row {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  align-items: flex-end;
  margin-top: 1rem;
}

.danger__row .cds--form-item { flex: 1 1 14rem; }

/* ── Utilities, deliberately few ──────────────────────────────────────────── */

.u-muted { color: var(--cds-text-secondary); }
.u-faint { color: var(--cds-text-helper); }
.u-empty { color: var(--cds-text-helper); font-style: italic; }
.u-mt    { margin-top: 1rem; }
.u-mb    { margin-bottom: 1rem; }
/* Numeric columns use Carbon's own align="right" attribute rather than a
   class: .cds--data-table td sets text-align on an element+class selector,
   which outranks any single class of ours. */

/* The two token types, in the chart's colours. */
.swatch {
  display: inline-block;
  width: 0.5rem;
  height: 0.5rem;
  margin-right: 0.375rem;
  vertical-align: middle;
}
.swatch--measured { background: #3b82f6; }
.swatch--cache    { background: #f59e0b; }

/* ── Block: google-signin ─────────────────────────────────────────────────
   Google renders its own button into #google-button and owns how it looks;
   all that is left is separating it from the text above it. */

.google-signin { margin-top: 1.5rem; }

/* ── Block: source ────────────────────────────────────────────────────────
   A pulled source can be failing while everything around it looks normal —
   the graph simply stops growing. These two say so where the source is
   listed and where its numbers are read. */

.source-error { color: var(--cds-text-error); }

/* The marker on a source whose key the proxy has stopped accepting. */
.source-warning {
  position: relative;
  display: inline-flex;
  color: var(--cds-support-warning, #f1c21b);
  vertical-align: -0.15rem;
  margin-right: 0.375rem;
  /* A 16px icon is a poor hover target; the padding is the hit area, the
     negative margin keeps the row looking the same. */
  padding: 0.375rem;
  margin: -0.375rem 0 -0.375rem -0.375rem;
}

.source-warning::after {
  content: attr(data-tip);
  position: absolute;
  bottom: calc(100% - 0.125rem);
  left: 0;
  z-index: 2;
  padding: 0.25rem 0.5rem;
  background: var(--cds-background-inverse, #393939);
  color: var(--cds-text-inverse, #ffffff);
  font-size: 0.75rem;
  line-height: 1.34;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 70ms linear;
}

.source-warning:hover::after,
.source-warning:focus-visible::after { opacity: 1; }

/* Two buttons on one row, right-aligned, rather than stacked by wrapping. */
.source-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.25rem;
  white-space: nowrap;
}

/* Sits above everything on the page it interrupts, and lines up with it.
   Carbon caps an inline notification at 38rem, which is right inside a modal
   and wrong for something spanning the page. */
.key-alert { margin-bottom: 1.5rem; }
.key-alert .cds--inline-notification { max-width: none; }

.source-refresh {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: 0.5rem;
}

.source-refresh__status { color: var(--cds-text-helper); }

/* The electricity mix, editable in place on a contributor line. Kept narrow so
   it reads as an assumption to check rather than the most important column in
   the table — but wide enough for "CHE (39.22gr CO₂e)", since the intensity is
   the whole reason the choice means anything. */

.zone-select { max-width: 13rem; }

/* The month the one-month view is showing, next to the tabs that chose it. Its
   own width, so the heading keeps the rest of the row. */
.month-select { flex: 0 0 auto; width: auto; min-width: 9rem; }