/* Wattsworth Design System — applied to the web build.
   Sources: DS §03 Colour, §04 Type, §05 Foundations, §06 Components ("Working
   parts"), §08 App ("In the hand"). Two colours and a paper: ~60% paper,
   30% green, 10% pink. Pink is a charge, not a surface. */
:root {
  --green:        #234A3B;  /* primary ink, buttons, bands            */
  --green-deep:   #1A382C;  /* hover, footer, app chrome              */
  --pink:         #E7A9C2;  /* the charge — accents, discharge, live  */
  --pink-wash:    #F1CCDC;  /* hover on pink, quiet fills, callouts   */
  --paper:        #F4EDDD;  /* default ground — never pure white      */
  --paper-2:      #EADFC6;  /* chips, tiles, hold state               */
  --paper-card:   #F9F4E7;  /* card ground, one step lighter          */
  --ink-60:       rgba(35, 74, 59, .6);
  --ink-70:       rgba(35, 74, 59, .72);
  --on-green:     #C9D6CB;  /* muted text on a green band              */
  --hair:         rgba(35, 74, 59, .18);  /* hairline rule            */
  --shadow:       10px 12px 0 rgba(35, 74, 59, .14);  /* the only shadow */

  --r-tile:  12px;
  --r-card:  20px;
  --r-panel: 28px;

  --font-display: "Anton", "Work Sans", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-brand:   "Bricolage Grotesque", "Work Sans", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-body:    "Work Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.62;
  color: var(--green);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}
a { color: var(--green); }

/* ── Type — three voices (DS §04) ────────────────────────────── */
h1 {
  margin: 0 0 12px;
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: uppercase;
  font-size: clamp(30px, 6vw, 44px);
  line-height: .92;
  letter-spacing: -0.012em;
  margin-left: -0.05em;  /* optical flush-left */
}
h2 {
  margin: 0 0 8px;
  font-family: var(--font-brand);
  font-weight: 600;
  font-size: 1.2rem;
}
.eyebrow {
  font-weight: 600;
  font-size: 12.8px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-60);
  margin-bottom: 6px;
}
.muted { color: var(--ink-70); }
.row { display: flex; gap: 12px; align-items: center; }
.spread { justify-content: space-between; flex-wrap: wrap; }

/* ── App chrome — green band (DS §08) ────────────────────────── */
.topbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 14px 20px;
  background: var(--green); color: var(--paper);
}
.topbar a { color: var(--paper); text-decoration: none; }
.topbar nav { display: flex; align-items: center; gap: 16px; font-size: 14px; font-weight: 500; }
.brand {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--font-brand); font-weight: 700; font-size: 20px;
  letter-spacing: -0.02em; text-transform: lowercase;
}
.brand svg { width: 26px; height: 22px; display: block; flex: none; }

.wrap { max-width: 760px; margin: 32px auto 48px; padding: 0 20px; }

/* ── Cards, rows & quotes (DS §06) ───────────────────────────── */
.card {
  background: var(--paper-card);
  border: 1px solid var(--hair);
  border-radius: var(--r-card);
  padding: 24px;  /* web card padding */
}
.wrap .card + .card { margin-top: 20px; }
.card.narrow {
  max-width: 400px; margin: 8vh auto;
  border: 1.5px solid var(--green);
  box-shadow: var(--shadow);  /* the hero object gets the one shadow */
}

/* Note from Wattsworth — green card, pink eyebrow (DS §06, shown in context at §08) */
.note {
  background: var(--green);
  color: var(--paper);
  border-radius: var(--r-card);
  padding: 16px 18px;
}
.note .eyebrow { color: var(--pink); }
.note p { margin: 6px 0 0; font-size: 14.5px; line-height: 1.55; color: rgba(244, 237, 221, .85); }

/* Callout / errors — pink wash, never red (DS §03) */
.error {
  background: var(--pink-wash);
  border: 1.5px solid var(--green);
  color: var(--green-deep);
  padding: 10px 14px;
  border-radius: var(--r-tile);
  font-size: 14px;
  font-weight: 500;
}

/* ── Buttons — pills only, 1.5px border, 44px min (DS §06) ────── */
button.primary {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; margin-top: 20px;
  font: inherit; font-weight: 600; font-size: 16px;
  padding: 13px 24px; min-height: 44px;
  border-radius: 999px; cursor: pointer;
  background: var(--green); color: var(--paper);
  border: 1.5px solid var(--green);
}
button.primary:hover { background: var(--green-deep); border-color: var(--green-deep); }
button.primary:active { transform: translateY(1px); }  /* press */

button.link {
  font: inherit; font-weight: 600; cursor: pointer;
  background: none; border: 0; padding: 0;
  color: var(--paper); text-decoration: underline;
}

:where(button, a, input, [tabindex]):focus-visible {
  outline: 3px solid var(--pink);  /* focus ring: 3px pink, 2px offset */
  outline-offset: 2px;
}

/* ── Fields & controls (DS §06) ──────────────────────────────── */
label { display: block; margin: 16px 0 6px; font-size: 13px; font-weight: 600; }
input {
  width: 100%; font: inherit; font-size: 15px;
  padding: 13px 16px;
  border: 1.5px solid rgba(35, 74, 59, .35);
  border-radius: var(--r-tile);
  background: var(--paper);
  color: var(--green);
}
input::placeholder { color: rgba(35, 74, 59, .5); }
input:focus-visible { border-color: var(--green); }

/* House rules: the base `input` rule above assumes a text field — range/checkbox need
   their own shape rather than a full-width bordered box. */
input[type="range"] {
  width: 100%; padding: 0; border: 0; background: transparent; accent-color: var(--green);
}
label.checkbox {
  display: flex; align-items: center; gap: 10px; margin-top: 20px; font-weight: 500;
}
label.checkbox input[type="checkbox"] {
  width: auto; padding: 0; accent-color: var(--green);
}

/* ── Chips & tags (DS §06) ───────────────────────────────────── */
.pill {
  padding: 5px 12px; border-radius: 999px;
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.05em; text-transform: uppercase;
}
.pill.sim  { background: var(--paper-2); color: var(--green); border: 1px solid var(--hair); }
.pill.live { background: var(--green); color: var(--pink); }

.checklist { list-style: none; padding: 0; margin: 16px 0 0; }
.checklist li { padding: 6px 0; border-bottom: 1px dashed var(--hair); }
.checklist .done { color: var(--green); font-weight: 600; float: right; }

/* ── Footer — deep-green band ────────────────────────────────── */
.foot {
  text-align: center;
  color: rgba(244, 237, 221, .7);
  font-size: 12.5px;
  padding: 26px 20px;
  background: var(--green-deep);
}

/* ── Today — wide app header (DS §08 "In the hand") ──────────── */
.card.hero { padding: 0; overflow: hidden; }
.hero-band {
  background: var(--green); color: var(--paper);
  padding: 22px 24px 24px;
}
.hero-status {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 12px; font-weight: 600;
  color: rgba(244, 237, 221, .8);
  font-variant-numeric: tabular-nums;
}
.hero-mode { text-transform: uppercase; letter-spacing: 0.08em; }
.hero-mode.is-live { color: var(--pink); }
.hero-mode.is-sim  { color: var(--on-green); }
.hero-brand { color: var(--paper); font-size: 20px; margin-top: 14px; }
.hero-band h1 { margin: 14px 0 0; color: var(--paper); }
.hero-sub  { margin: 8px 0 0; font-size: 14.5px; line-height: 1.5; color: var(--on-green); max-width: 44ch; }
.hero-fine { margin: 8px 0 0; font-size: 12px; line-height: 1.5; color: rgba(201, 214, 203, .7); }
.hero-body { padding: 20px 24px 24px; }

/* Saved this month — the one pink hero tile (DS §08) */
.tile-hero { background: var(--pink); border-radius: 16px; padding: 16px; }
.tile-hero .stat-label { color: var(--green-deep); }
.tile-hero-value {
  display: block; margin-top: 4px;
  font-family: var(--font-display); font-size: 38px; line-height: 1;
  color: var(--green-deep); font-variant-numeric: tabular-nums;
}
.tile-hero-note {
  display: block; margin-top: 6px;
  font-size: 11px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase;
  color: rgba(26, 56, 44, .6);
}

/* Chart legends — colour codes, styled like §06 "Data tiles & plan bars" */
.legend {
  display: flex; flex-wrap: wrap; gap: 8px 18px;
  margin-top: 12px; font-size: 13px; font-weight: 500; color: var(--green);
}
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.legend i { width: 12px; height: 12px; border-radius: 3px; display: inline-block; flex: none; }
.legend i.line { width: 16px; height: 3px; border-radius: 2px; }
.legend i.dash { width: 16px; height: 0; border-radius: 0; border-top: 2px dashed var(--pink); }
.legend .legend-note { color: var(--ink-70); font-weight: 400; }
.sw-price  { background: var(--green); opacity: .55; }
.sw-now    { background: var(--pink); }
.sw-export { background: var(--green-deep); }
.sw-p50    { background: var(--green); }
.sw-carbon { background: var(--green-deep); }
.sw-soc    { background: var(--pink); }
.sw-soh    { background: var(--green-deep); }
.sw-actual { background: var(--green-deep); }

/* Chart key — swatch + a line on what each mark means */
.chart-key { margin-top: 14px; display: grid; gap: 10px 20px; font-size: 13px; }
@media (min-width: 560px) { .chart-key { grid-template-columns: 1fr 1fr; } }
.chart-key > div { display: grid; grid-template-columns: auto 1fr; column-gap: 8px; row-gap: 2px; align-items: start; }
.chart-key dt { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--green); }
.chart-key dd { grid-column: 2; margin: 0; color: var(--ink-70); font-weight: 400; line-height: 1.4; }
.chart-key i { flex: none; display: inline-block; width: 12px; height: 12px; border-radius: 3px; }
.chart-key i.bar { width: 16px; height: 4px; border-radius: 1px; }
.chart-key i.glyph { width: auto; height: auto; font-style: normal; font-weight: 700; color: var(--green); }

/* ── Today — data tiles & plan bars (DS §06 / §08) ───────────── */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px; margin-top: 16px;
}
.stat {
  display: flex; flex-direction: column; gap: 2px;
  background: var(--paper-2);
  border-radius: var(--r-tile);
  padding: 12px;
}
.stat-label {
  font-size: 10.8px; font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--ink-60);
}
.stat-value {
  font-family: var(--font-display);
  font-size: 24px; line-height: 1;
  font-variant-numeric: tabular-nums;
  margin-top: 3px;
}
.stat-value.small { font-family: var(--font-brand); font-size: 14px; font-weight: 600; }
.stat-sub {
  margin-top: 3px; font-size: 11px; font-weight: 500;
  color: var(--ink-70); font-variant-numeric: tabular-nums;
}
@media (min-width: 460px) { .stat.wide { grid-column: span 2; } }

/* ── Charts — two colours and a paper ────────────────────────── */
.chart { width: 100%; height: auto; display: block; margin-top: 10px; overflow: visible; }
.chart.empty {
  border: 1px dashed var(--hair);
  border-radius: var(--r-tile);
  background: var(--paper-2);
  min-height: 90px;
}
.chart-empty-label { font-size: 12px; fill: var(--ink-60); }
.chart-zero { stroke: var(--hair); stroke-width: 1; }
.chart-axis { font-size: 10px; font-weight: 600; fill: rgba(35, 74, 59, .55); font-variant-numeric: tabular-nums; }
.chart-daybreak { stroke: var(--green); stroke-width: 1; stroke-dasharray: 2 3; opacity: .45; }
.chart-day-label { font-size: 9px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; fill: var(--ink-60); }

.bar-price          { fill: var(--green); opacity: .5; }   /* charge / hold */
.bar-price.bar-now  { fill: var(--pink);  opacity: 1; }    /* the live slot */
.bar-export         { fill: var(--green-deep); }           /* exporting to grid */
.line-solar         { stroke: var(--green);      stroke-width: 2; }
.line-solar-p10     { stroke: var(--pink);       stroke-width: 1.5; stroke-dasharray: 3 3; }
.line-carbon        { stroke: var(--green-deep); stroke-width: 2; }
.line-soc           { stroke: var(--pink);       stroke-width: 2; }
.line-soh           { stroke: var(--green-deep); stroke-width: 2; }
.line-predicted      { stroke: var(--pink);       stroke-width: 1.5; stroke-dasharray: 3 3; }
.line-actual         { stroke: var(--green-deep); stroke-width: 2; }

/* ── Tariff card — Timeline / Breakdown toggle (DS §08) ──────── */
.tariff-card .view-state { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.card-head .eyebrow { margin-bottom: 0; }
.view-toggle { display: inline-flex; flex: none; gap: 2px; padding: 3px; border-radius: 999px; background: var(--paper-2); }
.view-toggle label {
  font-size: 12px; font-weight: 600; color: var(--ink-70);
  padding: 5px 12px; border-radius: 999px; cursor: pointer; user-select: none;
  white-space: nowrap;
}
#tv-timeline:checked  ~ .card-head label[for="tv-timeline"],
#tv-breakdown:checked ~ .card-head label[for="tv-breakdown"] {
  background: var(--paper-card); color: var(--green);
  box-shadow: 0 1px 2px rgba(35, 74, 59, .14);
}
.view-toggle:focus-within { outline: 2px solid var(--green); outline-offset: 2px; border-radius: 999px; }
.view-pane { margin-top: 12px; }
.pane-breakdown { display: none; }
#tv-breakdown:checked ~ .pane-timeline  { display: none; }
#tv-breakdown:checked ~ .pane-breakdown { display: block; }

/* Breakdown view — one row per plan block, mirrors the design-system mockup */
.plan-slots { list-style: none; margin: 12px 0 0; padding: 0; }
.plan-slot {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px 4px; border-bottom: 1px solid rgba(35, 74, 59, .12);
}
.plan-slot:first-child { border-top: 1px solid rgba(35, 74, 59, .12); }
.plan-slot.is-now {
  background: var(--pink-wash); border-bottom-color: transparent;
  border-radius: var(--r-tile); padding-left: 12px; padding-right: 12px;
}
.plan-slot-time { font-family: var(--font-brand); font-weight: 600; font-size: 15px; }
.plan-slot-detail { margin-top: 2px; font-size: 12.5px; color: var(--ink-70); }
.plan-slot.is-now .plan-slot-detail { color: var(--green-deep); }
.plan-slot-bar { flex: none; width: 12px; height: 34px; border-radius: 3px; }
.plan-slot-bar.kind-charge    { background: var(--green); }
.plan-slot-bar.kind-hold      { background: var(--paper-2); border: 1px solid var(--hair); }
.plan-slot-bar.kind-discharge { background: var(--pink); border: 1px solid var(--green); }
.plan-note { margin-top: 16px; padding: 14px 16px; border-radius: 16px; background: var(--green); color: var(--paper); }
.plan-note-label {
  font-size: 10.8px; font-weight: 600; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--pink);
}
.plan-note p { margin: 6px 0 0; font-family: var(--font-brand); font-weight: 500; font-size: 15px; line-height: 1.35; }
.plan-empty { margin-top: 10px; }

/* ── Freshness row — chips (DS §06) ──────────────────────────── */
.freshness { display: flex; flex-wrap: wrap; gap: 8px; }
.fresh-item {
  font-size: 11.5px; font-weight: 600; letter-spacing: 0.04em;
  padding: 5px 12px; border-radius: 999px;
  background: var(--paper-2); color: var(--green);
  border: 1px solid var(--hair);
  font-variant-numeric: tabular-nums;
}
.fresh-item.stale { background: var(--pink-wash); color: var(--green-deep); border-color: var(--green); }