/* ==========================================================================
   AKWA STREAM 2027 — water-only components
   ==========================================================================
   Loaded AFTER components.css and deliberately separate from it.

   components.css and shell.css are shared lineage with zuva-energy-2027: we
   forked them and we do not edit them, so that either side can diff its copy
   against the other and see only intended drift. Everything water needs that
   solar does not lives here instead.

   One of these also patches a real gap in the forked sheets rather than adding
   anything new: `.note--warning` is referenced by the shared note pattern but
   never defined. Reported back to the Zuva session, where it turned out to be
   referenced nowhere — so it is a gap on this side only.
   ========================================================================== */

/* -- gaps in the forked sheets ------------------------------------------- */
.note--warning {
    border-left-color: var(--color-warning-500);
    background: var(--color-warning-50);
}

/* -- map panel -----------------------------------------------------------
   The backdrop the Zimbabwe map is drawn against. Background ONLY: no border,
   radius, padding or shadow, because every caller already wraps the map in
   `.box > .box__body--flush`, and the box owns that chrome and clips to it
   via `overflow:hidden`.

   This replaces a `.card` / `.card--pad` pair that came across in the forked
   component. Those classes were undefined in the shell, so the nested card was
   invisible; defining them here made it VISIBLE rather than fixing it — a
   second border and a reinstated gutter inside a body that had been set flush
   to remove exactly that. Nothing else on the site used them, so they are gone
   rather than corrected. Credit to the Zuva session for catching it.

   The dark surface stays. The land and labels are drawn light-on-dark, so it
   is what the map is legible against, not decoration.                       */
.zmap { background: var(--color-surface-900); }

/* -- header overrides removed -------------------------------------------
   Three blocks lived here: a 32rem rule hiding the pill labels, a 64rem
   rule making .header-list a horizontal scroller, and a 32-40rem band
   hiding the help chip. All three were answers to a one-bar header that
   no longer exists.

   shell.css now carries the matched two-bar header, and its own 64rem
   block hides both wordmarks, visually-hides the labels and leaves both
   rows absolutely centred — so there is nothing to scroll and no help
   chip to make room for. Keeping these would have fought it.

   The ticker label fix below stays: that bug is unrelated and still real.
   ---------------------------------------------------------------------- */

/* -- the ticker label was being painted over by its own marquee ----------
   `.ticker__label` is `position:static` with no stacking context, and
   `.ticker__track` translates left past it on a 60s loop. Same stacking
   context, track later in the DOM, so the scrolling items render straight
   through the label and its background.

   Present at every width and easy to miss, because it only shows while the
   animation carries an item across that strip — and the marquee pauses on
   hover, which is exactly when someone would look closely at it.

   Also found by the Zuva session, on its copy, at 390px.                   */
.ticker__label {
    position: relative;
    z-index: 1;
}

/* -- quality badge -------------------------------------------------------
   THE ONLY THING ON THIS SITE PERMITTED TO ASSERT WATER SAFETY.
   It takes a stored, published test record or it renders `unverified`.
   An overdue test uses the WARNING ramp, never the DANGER ramp: a scheme
   whose test has gone stale has not failed a test, and colouring them the
   same would be a design decision with a liability attached.             */
.qbadge {
    display: inline-flex; align-items: center; gap: var(--s-2);
    font-size: var(--fs-2xs); font-weight: 600; letter-spacing: .04em;
    padding: var(--s-1) var(--s-3); border-radius: var(--radius-pill);
    text-transform: uppercase; white-space: nowrap;
}
.qbadge::before {
    content: ''; width: .4rem; height: .4rem; border-radius: 50%;
    background: currentColor; flex: none;
}
.qbadge--pass       { background: var(--color-moss-100);    color: var(--color-moss-700); }
.qbadge--unverified { background: var(--color-warning-100); color: var(--color-warning-700); }
.qbadge--fail       { background: var(--color-danger-100);  color: var(--color-danger-700); }
.qbadge--na         { background: var(--color-surface-100); color: var(--color-surface-500); }

/* -- resource chart: static water level or gauged flow -------------------
   No solar analogue. A taller bar is a healthier source.                 */
.res__chart { display: flex; align-items: flex-end; gap: .1875rem; height: 5.5rem; }
.res__bar {
    flex: 1; background: var(--color-brand-100);
    border-radius: var(--radius-sm) var(--radius-sm) 0 0; position: relative;
}
.res__bar span {
    position: absolute; left: 0; right: 0; bottom: 0;
    background: var(--color-brand-500);
    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
}
.res__bar--watch span { background: var(--color-warning-500); }
.res__axis {
    display: flex; justify-content: space-between;
    font-size: var(--fs-2xs); color: var(--color-surface-500); margin-top: var(--s-2);
}

/* -- two-part tariff: shown as two parts, never blended into one rate --- */
.tariff { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3); }
.tariff__part {
    background: var(--color-surface-50); border: var(--border-soft);
    border-radius: var(--radius); padding: var(--s-4);
}
.tariff__k {
    font-size: var(--fs-2xs); text-transform: uppercase; letter-spacing: .08em;
    color: var(--color-surface-500); font-weight: 600;
}
.tariff__v { font-size: var(--fs-xl); font-weight: 600; letter-spacing: -.02em; }
.tariff__note { font-size: var(--fs-2xs); color: var(--color-surface-500); }

/* -- value stack: the commonest misreading of this business is that it
      sells water. The commodity is about a ninth of the delivered price. */
.vstack {
    display: flex; height: 2rem; border-radius: var(--radius-sm); overflow: hidden;
    font-size: var(--fs-2xs); font-weight: 600;
}
.vstack__seg { display: flex; align-items: center; justify-content: center; color: var(--color-white); }
.vstack__seg--commodity { background: var(--color-accent-500); }
.vstack__seg--service   { background: var(--color-brand-500); }
.vstack__legend {
    display: flex; gap: var(--s-4); flex-wrap: wrap;
    font-size: var(--fs-2xs); color: var(--color-surface-500); margin-top: var(--s-2);
}
.vstack__dot { display: inline-block; width: .5rem; height: .5rem; border-radius: 50%; margin-right: var(--s-1); }

/* -- permit: who actually holds the right to take the water ------------- */
.permit { border: var(--border); border-radius: var(--radius); padding: var(--s-4); background: var(--color-white); }
.permit--foreign { border-left: .1875rem solid var(--color-warning-500); }
.permit__ref { font-family: var(--font-mono); font-size: var(--fs-sm); font-weight: 600; }
.permit__warn { font-size: var(--fs-2xs); color: var(--color-warning-700); font-weight: 600; margin-top: var(--s-2); }

/* -- a pill state solar does not need ----------------------------------- */
.pill--watch { background: var(--color-warning-100); color: var(--color-warning-700); }

@media (max-width: 44rem) {
    .tariff { grid-template-columns: minmax(0, 1fr); }
}