/* Genesis Energy, Brand 4.0. Every colour here is taken from the design
   tokens genesisenergy.co.nz ships (tailwind theme, tokens 20260702):
   primary orange #f58025 (--main-primary-500) with its 600 #cc4600 for text
   and hover, accent #f26526, the pale orange ramp #fef2e9/#fde6d3/#fbcca8/
   #f9b37c, neutral ink #333333 and #464958 with the grey ramp #6b6d79/
   #90929b/#dadbde/#ecedef/#f3f3f5, success #7ac92f/#49771e, error #c00, and
   the two gradients: "logo" (#fcb60b → #f99b18 → #f58025) and "night"
   (#051241 → #2c0539 → #130913), which carries the stage and the cards.
   Type is unchanged from the previous build on purpose. Swap these and the
   app follows. */
:root {
  --font: "Noto Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-head: Merriweather, Georgia, "Times New Roman", serif;

  /* Brand */
  --brand: #f58025;
  --brand-deep: #cc4600;
  --brand-accent: #f26526;
  --brand-line: rgba(245, 128, 37, 0.22);
  --brand-glow: rgba(245, 128, 37, 0.35);
  --logo-gradient: linear-gradient(135deg, #fcb60b 0%, #f99b18 30%, #f58025 70%, #f26526 100%);

  /* Night: the stage behind the phone, and the cards in the chat. */
  --night-1: #051241;
  --night-2: #2c0539;
  --night-3: #130913;
  --night: #1d0a2c;
  --page: radial-gradient(120% 90% at 15% 0%, var(--night-1) 0%, var(--night-2) 55%, var(--night-3) 100%);
  --card-night: linear-gradient(160deg, #0b1450 0%, #2c0539 100%);

  /* Ink and surfaces */
  --heading: #333333;
  --ink: #464958;
  --muted: #6b6d79;
  --hairline: #dadbde;
  --shop-bg: #f3f3f5;
  --surface-2: #ecedef;
  --card: #ffffff;
  --bubble: #ffffff;

  /* Orange tints, palest first */
  --tint: #fef2e9;
  --tint-2: #fde6d3;
  --tint-3: #fbcca8;
  --tint-bright: #f9b37c;

  --white-soft: rgba(255, 255, 255, 0.82);
  --live: #f58025;
  --error: #cc0000;
  --green: #49771e;
  --green-bright: #7ac92f;
  --heart: #f26526;
  --accent: #f58025;
  /* Back arrow, send and call all render at this size. */
  --icon: 22px;
}

* { box-sizing: border-box; }

/* Screens set display, so `hidden` needs to outrank it. */
[hidden] { display: none !important; }

html, body { height: 100%; }

/* Phone sits dead centre of the page, both axes. */
body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: var(--page);
  color: var(--ink);
  font: 15px/1.5 var(--font);
  -webkit-font-smoothing: antialiased;
}

/* Two columns: the copy on the left, the phone on the right. Both are
   centred against each other on the cross axis, and the pair is centred in
   the page by the flex rules on body. */
.stage {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(32px, 6vw, 96px);
  width: 100%;
  max-width: 1180px;
}

.intro .eyebrow {
  align-self: flex-start;
  display: inline-block;
  margin-bottom: 14px;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(245, 128, 37, 0.16);
  border: 1px solid rgba(245, 128, 37, 0.4);
  color: var(--tint-bright);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.intro {
  flex: 1 1 0;
  max-width: 560px;
  min-height: min(900px, calc(100vh - 40px));
  display: flex;
  flex-direction: column;
  justify-content: center;
  color: #fff;
}

.intro h1 {
  margin: 0 0 18px;
  font-family: var(--font-head);
  font-weight: 900;
  font-size: clamp(32px, 4vw, 46px);
  line-height: 1.1;
  letter-spacing: -0.01em;
}

.intro p {
  margin: 0 0 12px;
  color: var(--white-soft);
  font-size: 17px;
}

.intro ol,
.intro ul {
  margin: 0 0 22px;
  padding-left: 22px;
  color: var(--white-soft);
  font-size: 16px;
}

.intro li { margin-bottom: 10px; }
.intro li:last-child { margin-bottom: 0; }
.intro strong { color: var(--tint-bright); }
.intro .fine { margin-top: 6px; font-size: 13px; color: rgba(255, 255, 255, 0.6); }

/* Sits under the copy, and travels with it as the block centres. Opens the
   Spaceman site in a new tab. */
.intro-logo-link {
  display: block;
  width: min(375px, 87.5%);
}

.intro-logo {
  display: block;
  width: 100%;
  height: auto;
}

/* Below this the columns can't both breathe, so stack them and let the
   page scroll instead of squeezing the phone. */
@media (max-width: 900px) {
  body { align-items: flex-start; }

  .stage {
    flex-direction: column;
    gap: 40px;
  }

  .intro {
    min-height: 0;
    max-width: min(430px, 100%);
    align-items: flex-start;
  }
}

.phone {
  flex: none;
  width: min(430px, 100%);
  height: min(900px, calc(100vh - 40px));
  padding: 12px;
  border-radius: 52px;
  background: var(--night-3);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.16), 0 0 80px rgba(245, 128, 37, 0.12), 0 40px 80px rgba(0, 0, 0, 0.5);
}

.app {
  position: relative;
  height: 100%;
  display: grid;
  /* statusbar / header / screen / footer (tabbar, composer or cta bar) */
  grid-template-rows: auto auto 1fr auto;
  border-radius: 42px;
  overflow: hidden;
  background: #fff;
}

/* Every screen fills the middle row and scrolls independently. */
.screen {
  overflow-y: auto;
  background: var(--shop-bg);
  scrollbar-width: none;
}
.screen::-webkit-scrollbar { display: none; }
#screen-chat { background: var(--shop-bg); }

/* ---------------------------------------------------------------- statusbar --- */

.statusbar {
  height: 50px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 0 26px;
  color: var(--heading);
}
.time { font-size: 15px; font-weight: 600; letter-spacing: 0.01em; }

.island {
  width: 106px;
  height: 30px;
  border-radius: 16px;
  background: #000;
}

.indicators {
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 6px;
}
.indicators svg { fill: currentColor; height: 12px; }
.indicators .signal { width: 18px; }
.indicators .wifi { width: 16px; }
.indicators .battery { width: 26px; }

/* ------------------------------------------------------------------ header --- */

header {
  display: grid;
  grid-template-columns: 40px 1fr 40px;
  align-items: center;
  gap: 8px;
  padding: 6px 18px 12px;
}

/* Logo slot: public/logo.svg replaces the wordmark when present. */
.brand {
  display: grid;
  place-items: center;
  text-align: center;
  font-family: var(--font-head);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.15;
  color: var(--heading);
  /* Tapping the wordmark returns to home from anywhere. */
  cursor: pointer;
}
/* Whole artwork, letterboxed rather than cropped. --logo-ratio is the
   width/height of the two-line logo; `contain` keeps it honest. */
.brand-logo {
  --logo-h: 30px;
  --logo-ratio: 4.214;
  height: var(--logo-h);
  width: calc(var(--logo-h) * var(--logo-ratio));
  max-width: 100%;
  background-image: var(--logo-src, url("/logo.svg"));
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}
.brand-logo[hidden] { display: none; }

.icon-btn {
  position: relative;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--heading);
  cursor: pointer;
}
.icon-btn svg { width: var(--icon); height: var(--icon); fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }

/* --------------------------------------------------------------- transcript --- */

#screen-chat { display: flex; flex-direction: column; overflow: hidden; }

#transcript {
  flex: 1;
  overflow-y: auto;
  padding: 6px 16px 16px;
  display: flex;
  flex-direction: column;
  gap: 7px;
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 0, 0, 0.2) transparent;
}
#transcript::-webkit-scrollbar { width: 6px; }
#transcript::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, 0.18); border-radius: 3px; }

.row {
  display: flex;
  align-items: flex-end;
}
.row.user { justify-content: flex-end; }

.bubble {
  max-width: 88%;
  line-height: 1.3;
  padding: 13px 16px;
  border-radius: 18px;
  background: var(--bubble);
  color: var(--ink);
  border: 1px solid var(--hairline);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}
.bubble p { margin: 0; }

/* The customer's own turns are the orange ones: the pale tint with dark ink,
   as the site sets highlighted panels, so they stay readable. */
.row.user .bubble {
  background: var(--tint-2);
  border-color: var(--tint-3);
  color: var(--heading);
}

.row.system {
  flex-direction: column;
  align-items: center;
  gap: 2px;
  text-align: center;
  font-size: 12.5px;
  color: var(--muted);
  padding: 2px 20px;
}

/* --------------------------------------------------------------------- card --- */

.card {
  /* Fixed width, not max-width: while the image is still generating the card
     has little content and would otherwise shrink to a narrow column, then
     jump wider when the picture and the strip arrive. */
  width: 92%;
  max-width: 92%;
  padding: 16px;
  border-radius: 20px;
  background: var(--card-night);
  color: #fff;
  box-shadow: 0 2px 12px rgba(44, 5, 57, 0.3);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.card-head {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tint-bright);
}

/* Direct children only: the offering cards in the strip live inside .card
   too, and must not inherit the picture's crop. */
.card > img,
.card > .holder {
  width: 100%;
  aspect-ratio: 5 / 3;
  border-radius: 14px;
  border: 3px solid rgba(255, 255, 255, 0.9);
}
.card > img { display: block; object-fit: cover; }

.card-text { display: flex; flex-direction: column; gap: 3px; }

.card-name {
  margin: 0 0 2px;
  font-family: var(--font-head);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.2;
  color: #fff;
}

.card-title {
  margin: 0;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--tint-bright);
}
/* Breathing room above a second title, but not above the first. */
.card-title + * { margin-bottom: 4px; }
.card-desc + .card-title,
.details + .card-title,
.costs + .card-title,
.chart-key + .card-title,
.method + .card-title { margin-top: 8px; }

.card-desc { margin: 0; font-size: 14px; line-height: 1.3; color: rgba(255, 255, 255, 0.92); }

.details,
.method {
  margin: 0;
  font-size: 14px;
  line-height: 1.35;
  color: rgba(255, 255, 255, 0.92);
}
.details { padding: 0; list-style: none; }
.method { padding-left: 18px; }
.method li { padding-left: 2px; }
.method li + li { margin-top: 3px; }

.card-footnote {
  margin: 6px 0 0;
  font-size: 11.5px;
  line-height: 1.35;
  color: rgba(255, 255, 255, 0.6);
}

/* Offering strip inside a card. Sits within the card's own padding so it
   insets equally on both sides, matching the text above it. */
.card-shop {
  display: flex;
  gap: 10px;
  margin: 6px 0 0;
  padding: 0 0 4px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
}
.card-shop::-webkit-scrollbar { display: none; }
.card-shop .card-offering {
  flex: none;
  width: 156px;
  scroll-snap-align: start;
  color: var(--ink);
}
.card-shop .card-body { padding: 10px; }
.card-shop .card-body strong { font-size: 14px; }
.card-shop .sub { font-size: 11.5px; }
.card-shop .kpi strong { font-size: 15px; }
.card-shop .thumb { aspect-ratio: 16 / 9; }

.holder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.85);
  background: rgba(245, 128, 37, 0.3);
}
.holder small { color: rgba(255, 255, 255, 0.82); max-width: 85%; text-align: center; line-height: 1.4; }
.holder.error { color: rgba(255, 255, 255, 0.82); }

/* While the image generates, the clip fills the same box the finished photo
   will occupy, so nothing shifts when it swaps in. */
.holder.loading {
  position: relative;
  overflow: hidden;
  justify-content: flex-end;
  padding-bottom: 12px;
}

.holder.loading video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Caption sits over the footage, with a scrim so it stays legible against
   whatever frame is showing. */
.holder.loading span {
  position: relative;
  z-index: 1;
  padding: 4px 12px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(3px);
}

/* No holding footage: centre the caption on the panel, with a soft pulse so
   the wait reads as work rather than a stall. */
.holder.loading.no-clip {
  justify-content: center;
  padding-bottom: 0;
  background: linear-gradient(135deg, rgba(245, 128, 37, 0.75), rgba(252, 182, 11, 0.45));
  animation: holder-pulse 2.4s ease-in-out infinite;
}
.holder.loading.no-clip span { background: none; backdrop-filter: none; }
@keyframes holder-pulse {
  0%, 100% { opacity: 0.85; }
  50% { opacity: 1; }
}

/* The finished image rises over the still-playing video rather than snapping
   in. Duration is mirrored by FADE_MS in chat.js. */
.holder.swap {
  position: relative;
  overflow: hidden;
  padding: 0;
  background: var(--night);
}

.holder.swap video,
.holder.swap img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 1300ms ease;
}

.holder.swap img { opacity: 0; }
.holder.swap img.shown { opacity: 1; }
.holder.swap video.gone { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  .holder.swap video,
  .holder.swap img { transition: none; }
  .holder.loading.no-clip { animation: none; }
}

/* ------------------------------------------------------------------ chart --- */

.chart {
  display: block;
  width: 100%;
  height: auto;
  margin-top: 8px;
  overflow: visible;
}
.chart-area { fill: rgba(249, 179, 124, 0.14); }
.chart-line { fill: none; stroke: rgba(255, 255, 255, 0.85); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.chart-line.boosted { stroke: var(--tint-bright); stroke-width: 2.5; }
.chart-label { fill: rgba(255, 255, 255, 0.75); font-size: 10.5px; font-family: var(--font); font-variant-numeric: tabular-nums; }
.chart-label.end { text-anchor: end; }
.chart-label.dim { fill: rgba(255, 255, 255, 0.5); }
.chart-key { display: flex; gap: 14px; font-size: 11.5px; color: rgba(255, 255, 255, 0.75); margin-top: 2px; }
.chart-key span { display: inline-flex; align-items: center; gap: 6px; }
.chart-key .line { display: inline-block; width: 16px; height: 2px; background: rgba(255, 255, 255, 0.85); border-radius: 1px; }
.chart-key .line.boosted { background: var(--tint-bright); height: 3px; }

/* ----------------------------------------------------------------- composer --- */

#composer {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px 20px;
}

.pill {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  height: 52px;
  padding: 0 14px;
  border-radius: 26px;
  background: #fff;
  border: 1px solid var(--hairline);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}
.pill svg { fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.attach {
  display: grid;
  place-items: center;
  flex: none;
  width: var(--icon);
  height: var(--icon);
  color: var(--heading);
  cursor: pointer;
}
.attach svg {
  width: var(--icon);
  height: var(--icon);
  stroke: currentColor;
  stroke-width: 1.9;
}

#text-input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: none;
  font: inherit;
  font-size: 15px;
  color: var(--ink);
  background: transparent;
}
#text-input::placeholder { color: #9a9b9b; }

.send {
  display: grid;
  place-items: center;
  flex: none;
  width: var(--icon);
  height: var(--icon);
  border: 0;
  padding: 0;
  background: transparent;
  color: var(--brand-deep);
  cursor: pointer;
}
.send svg { width: var(--icon); height: var(--icon); stroke: currentColor; }

.call {
  position: relative;
  flex: none;
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: var(--brand);
  color: #fff;
  cursor: pointer;
  box-shadow: 0 2px 10px var(--brand-glow);
  transition: background 0.15s, color 0.15s, transform 0.15s;
}
.call svg { width: var(--icon); height: var(--icon); fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.call:hover { transform: scale(1.04); background: var(--brand-deep); }
/* Live call turns the button into a hang-up. */
.call[data-on="true"] { background: var(--error); box-shadow: 0 2px 8px rgba(204, 0, 0, 0.3); }
.call[data-on="true"] svg { transform: rotate(135deg); }

/* ============================================================== app screens === */

.section-title {
  margin: 20px 0 12px;
  font-family: var(--font-head);
  font-size: 20px;
  font-weight: 700;
  color: var(--heading);
}

.screen { padding: 0 16px 20px; }
.screen-detail { padding: 0; }

.empty { margin: 24px 4px; color: var(--muted); font-size: 14px; text-align: center; }

/* ------------------------------------------------------------------- hero --- */

/* The night gradient with the Brand 4.0 mark rising out of the corner in the
   logo gradient — the site's own pairing of the two. */
.hero {
  position: relative;
  display: block;
  width: 100%;
  margin-top: 14px;
  padding: 0;
  border: 0;
  border-radius: 18px;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  text-align: left;
  cursor: pointer;
  color: #fff;
  background:
    radial-gradient(90% 120% at 100% 100%, rgba(245, 128, 37, 0.55) 0%, rgba(245, 128, 37, 0) 60%),
    linear-gradient(160deg, var(--night-1) 0%, var(--night-2) 100%);
}
.hero-mark {
  position: absolute;
  right: -12%;
  bottom: -16%;
  width: 56%;
  height: auto;
  z-index: 0;
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(90deg, rgba(5, 18, 65, 0.85) 0%, rgba(5, 18, 65, 0.35) 55%, rgba(5, 18, 65, 0) 80%);
}
.hero-copy { position: absolute; z-index: 2; left: 20px; right: 34%; bottom: 18px; }
.hero-kicker {
  display: block;
  margin-bottom: 6px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tint-bright);
}
.hero-copy h2 { margin: 0 0 4px; font-family: var(--font-head); font-size: 22px; font-weight: 700; line-height: 1.2; }
.hero-copy p { margin: 0; font-size: 13.5px; line-height: 1.3; color: rgba(255, 255, 255, 0.88); }

/* ------------------------------------------------------------- quick asks --- */

.quick { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 12px; }
.quick button {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 12px 4px 10px;
  border: 0;
  border-radius: 14px;
  background: var(--card);
  color: var(--heading);
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}
.quick svg {
  width: 36px;
  height: 36px;
  padding: 8px;
  border-radius: 50%;
  background: var(--tint);
  fill: none;
  stroke: var(--brand-deep);
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.quick button:hover svg { background: var(--tint-2); }

/* --------------------------------------------------------------- snapshot --- */

.snapshot {
  margin-top: 14px;
  padding: 18px 18px 14px;
  background: var(--card);
  border-radius: 18px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
  display: flex;
  flex-direction: column;
}
.snap-label { font-size: 12.5px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); }
.snap-balance {
  font-family: var(--font-head);
  font-size: 36px;
  font-weight: 900;
  line-height: 1.1;
  color: var(--heading);
  letter-spacing: -0.01em;
  margin: 4px 0 2px;
}
.snap-sub { font-size: 14px; color: var(--muted); }
.snap-sub .pill-tag {
  display: inline-block;
  margin-left: 6px;
  padding: 2px 8px;
  border-radius: 999px;
  background: #e4f4d5;
  color: var(--green);
  font-size: 11.5px;
  font-weight: 700;
}
.snap-rows { margin-top: 12px; border-top: 1px solid var(--hairline); }
.snap-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 0;
  font-size: 13.5px;
  border-bottom: 1px solid var(--hairline);
}
.snap-row:last-child { border-bottom: 0; }
.snap-row span:first-child { color: var(--muted); }
.snap-row span:last-child { font-weight: 600; color: var(--heading); text-align: right; }

/* ---------------------------------------------------------------- costs --- */

/* Two columns so the amounts form a straight right edge however long the
   labels are. The note column absorbs the slack. */
.costs { list-style: none; margin: 0 0 4px; padding: 0; }
.costs li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "label amount" "note amount";
  align-items: baseline;
  column-gap: 10px;
  padding: 6px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}
.costs li.best .cost-label::after {
  content: "Best";
  margin-left: 8px;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--brand);
  color: #fff;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  vertical-align: 2px;
}
.cost-label  { grid-area: label; font-size: 14px; }
.cost-note   { grid-area: note; font-size: 12px; color: rgba(255, 255, 255, 0.62); }
.cost-amount {
  grid-area: amount;
  align-self: center;
  font-size: 15px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.costs .cost-total {
  border-bottom: 0;
  border-top: 2px solid rgba(255, 255, 255, 0.6);
  margin-top: 2px;
  padding-top: 8px;
}
.cost-total .cost-label { font-weight: 700; }
.cost-total .cost-amount { font-size: 17px; color: var(--tint-bright); }

/* -------------------------------------------------------------- offerings --- */

.grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

.card-offering {
  background: var(--card);
  border-radius: 16px;
  overflow: hidden;
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

.card-media { position: relative; }
.card-body { padding: 12px; display: flex; flex-direction: column; gap: 2px; }
.card-body strong { font-size: 15px; font-weight: 700; line-height: 1.25; color: var(--heading); }
.sub { color: var(--muted); font-size: 12.5px; line-height: 1.25; }

.thumb {
  display: grid;
  place-items: center;
  aspect-ratio: 3 / 2;
  padding: 14px;
}
.thumb img { max-width: 100%; max-height: 100%; object-fit: cover; }
/* Real artwork replaces the tint and the glyph. */
.thumb.has-photo { background: #fff !important; padding: 0; }
.thumb img + .glyph { display: none; }
.glyph { width: 38%; height: auto; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.thumb.big { aspect-ratio: 16 / 9; border-radius: 18px; }
.thumb.big .glyph { width: 24%; }

.tile-badge {
  position: absolute;
  left: 10px;
  top: 10px;
  padding: 4px 9px;
  border-radius: 999px;
  background: var(--brand-deep);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.03em;
}

.kpi-row { display: flex; gap: 14px; margin-top: 6px; }
.kpi { display: flex; flex-direction: column; min-width: 0; }
.kpi strong { font-family: var(--font-head); font-size: 17px; font-weight: 700; color: var(--heading); line-height: 1.1; }
.kpi small { font-size: 11px; color: var(--muted); margin-top: 2px; }
.kpi.small strong { font-family: var(--font); font-size: 13px; line-height: 1.25; }
.kpi-row.big { margin: 14px 0 4px; gap: 24px; }
.kpi-row.big .kpi strong { font-size: 30px; }
.kpi-row.big .kpi small { font-size: 12.5px; }
.kpi-row.big .kpi.small strong { font-size: 16px; }

.heart {
  position: absolute;
  top: 10px;
  right: 10px;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #fff;
  color: var(--heart);
  cursor: pointer;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
}
/* Outline by default, solid once saved — same glyph as the tab bar. */
.heart svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.heart.on svg { fill: currentColor; }
.heart.inline { position: static; box-shadow: none; background: transparent; width: 26px; height: 26px; flex: none; }
.heart.inline svg { width: 24px; height: 24px; }
.heart.floating { top: 16px; right: 16px; }

/* ----------------------------------------------------------- explore rows --- */

.search-field {
  width: 100%;
  margin-top: 14px;
  padding: 16px 18px;
  font: inherit;
  font-size: 16px;
  color: var(--ink);
  background: var(--card);
  border: 1px solid var(--hairline);
  border-radius: 14px;
  outline: none;
}
.search-field:focus { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-line); }
.search-field::placeholder { color: #9a9b9b; }

.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 16px; }
.chip {
  padding: 9px 14px;
  font: inherit;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--heading);
  background: var(--card);
  border: 1px solid var(--hairline);
  border-radius: 999px;
  cursor: pointer;
}
.chip.on { background: var(--brand); border-color: var(--brand); color: #fff; }

.rows { display: flex; flex-direction: column; gap: 10px; }

.row-offering {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px 10px 10px;
  background: var(--card);
  border-radius: 14px;
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}
.row-offering .thumb { width: 64px; aspect-ratio: 1; padding: 0; border-radius: 10px; flex: none; }
.row-offering .glyph { width: 46%; }
.row-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.row-body strong { font-size: 15.5px; font-weight: 700; color: var(--heading); line-height: 1.25; }
.row-kpi { font-size: 14px; font-weight: 700; color: var(--heading); margin-top: 2px; }
.row-kpi small { font-weight: 400; color: var(--muted); font-size: 12px; }

/* --------------------------------------------------------------- activity --- */

.month {
  margin: 14px 2px 4px;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}
.month:first-child { margin-top: 0; }
.txn {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: var(--card);
  border-radius: 14px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}
.txn-icon {
  flex: none;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-size: 18px;
  font-weight: 700;
}
.txn-icon.in { background: #e4f4d5; color: var(--green); }
.txn-icon.out { background: var(--surface-2); color: var(--muted); }
.txn-icon.note { background: var(--tint); color: var(--brand-deep); font-size: 15px; }
.txn-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.txn-body strong { font-size: 14px; font-weight: 600; color: var(--heading); line-height: 1.25; }
.txn-body span { font-size: 12.5px; color: var(--muted); }
.txn-amount { flex: none; font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--heading); }
.txn-amount.in { color: var(--green); }

/* ---------------------------------------------------------------- account --- */

.account-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px;
  background: var(--card);
  border-radius: 16px;
}
.account-card strong { display: block; font-size: 17px; color: var(--heading); }
.account-card span { color: var(--muted); font-size: 14px; }
.avatar-lg {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--tint);
}
.avatar-lg svg { width: 26px; height: 26px; fill: none; stroke: var(--brand-deep); stroke-width: 1.7; stroke-linecap: round; }

.card-block {
  margin-top: 12px;
  padding: 4px 16px;
  background: var(--card);
  border-radius: 16px;
}

/* Label/value rows, on the account screen and the detail screen. */
.facts { display: flex; flex-direction: column; }
.fact {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 0;
  border-bottom: 1px solid var(--hairline);
}
.fact:last-child { border-bottom: 0; }
.fact span { font-size: 12.5px; color: var(--muted); }
.fact strong { font-size: 14.5px; font-weight: 600; color: var(--heading); line-height: 1.3; }

/* ------------------------------------------------------------------ detail --- */

.screen-detail { padding: 14px 16px 20px; }
.detail-hero { position: relative; }
.detail-info { padding: 18px 2px 0; }
.tag {
  display: inline-block;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--tint);
  color: var(--brand-deep);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.detail-info h2 { margin: 14px 0 2px; font-family: var(--font-head); font-size: 26px; font-weight: 700; line-height: 1.2; color: var(--heading); }
.detail-info .sub { font-size: 15px; }
.detail-info .summary { margin: 12px 0 8px; font-size: 15px; line-height: 1.5; color: var(--ink); }
.detail-info .facts { margin-top: 8px; padding: 2px 16px; background: var(--card); border-radius: 16px; }
.fine { margin: 12px 0 0; font-size: 12px; line-height: 1.4; color: var(--muted); }

.cta-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px 20px;
  background: var(--shop-bg);
  border-top: 1px solid var(--hairline);
}
.cta {
  flex: 1;
  height: 54px;
  border: 0;
  border-radius: 999px;
  background: var(--brand);
  color: #fff;
  font: inherit;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
}
.cta:hover { background: var(--brand-accent); }

/* ------------------------------------------------------------------- toast --- */

.toast {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 104px;
  z-index: 7;
  padding: 12px 16px;
  border-radius: 14px;
  background: var(--night);
  color: #fff;
  font-size: 13.5px;
  line-height: 1.35;
  text-align: center;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.2s, transform 0.2s;
}
.toast.show { opacity: 1; transform: translateY(0); }

/* ----------------------------------------------------------------- tabbar --- */

#tabbar {
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 12px 14px 20px;
  background: #fff;
  border-top: 1px solid var(--hairline);
}
#tabbar button {
  position: relative;
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border: 0;
  border-radius: 50%;
  background: var(--shop-bg);
  color: var(--heading);
  cursor: pointer;
}
#tabbar svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
#tabbar button.active { background: var(--brand); color: #fff; }

/* ----------------------------------------------------------------- drawer --- */

.drawer-scrim { position: absolute; inset: 0; background: rgba(19, 9, 19, 0.5); z-index: 5; }

.drawer {
  position: absolute;
  inset: 0 auto 0 0;
  z-index: 6;
  width: 78%;
  display: flex;
  flex-direction: column;
  background: #fff;
  transform: translateX(-100%);
  transition: transform 0.22s ease;
}
.drawer.open { transform: translateX(0); }

.drawer-head { padding: 46px 22px 18px; background: var(--tint); color: var(--heading); }
.drawer-head strong { display: block; font-family: var(--font-head); font-size: 17px; font-weight: 700; line-height: 1.2; }
.drawer-head span { font-size: 13.5px; color: var(--muted); }
.drawer-logo { --logo-h: 40px; margin-bottom: 6px; }

.drawer-links { flex: 1; display: flex; flex-direction: column; padding: 12px 0; }
.drawer-links button {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 14px 22px;
  border: 0;
  background: transparent;
  font: inherit;
  font-size: 17px;
  color: var(--heading);
  text-align: left;
  cursor: pointer;
}
.drawer-links svg {
  flex: none;
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  color: var(--brand-deep);
}
.drawer-links button:hover { background: var(--shop-bg); }

.drawer-foot { padding: 18px 22px 26px; border-top: 1px solid var(--hairline); }
.drawer-foot strong { display: block; color: var(--brand-deep); font-size: 16px; font-weight: 700; }
.drawer-foot span { font-size: 13.5px; color: var(--muted); }

/* Home rails: horizontal scrollers that bleed to the screen edges, so a
   partially visible card signals there is more to swipe. Saved keeps the
   two-column .grid. */
.rail {
  display: flex;
  gap: 12px;
  margin: 0 -16px;
  padding: 0 16px 4px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scroll-padding-left: 16px;
  scrollbar-width: none;
}
.rail::-webkit-scrollbar { display: none; }
.rail .card-offering {
  flex: none;
  width: 176px;
  scroll-snap-align: start;
}

/* ------------------------------------------------------- card extras (chat) --- */

/* A banner at the top of a support card: red for safety, orange for a known
   outage, green when nothing is wrong on the network. */
.card-alert {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 14px;
  border-radius: 14px;
  font-size: 14px;
  line-height: 1.35;
}
.card-alert strong { font-size: 13px; letter-spacing: 0.05em; text-transform: uppercase; }
.card-alert ul { margin: 0; padding-left: 18px; }
.card-alert.danger { background: #cc0000; color: #fff; }
.card-alert.known { background: rgba(245, 128, 37, 0.2); border: 1px solid rgba(249, 179, 124, 0.55); color: #fff; }
.card-alert.known strong { color: var(--tint-bright); }
.card-alert.clear { background: rgba(122, 201, 47, 0.16); border: 1px solid rgba(122, 201, 47, 0.45); color: #fff; }
.card-alert.clear strong { color: #b4e384; }
.card-alert .big { font-family: var(--font-head); font-size: 22px; font-weight: 700; text-transform: none; letter-spacing: 0; color: #fff; }

.card-ref {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.08);
  font-size: 13px;
  color: rgba(255, 255, 255, 0.8);
}
.card-ref strong { font-variant-numeric: tabular-nums; font-size: 15px; letter-spacing: 0.04em; color: #fff; }

/* Bars: a year of kWh, the bill in question in orange, estimates hatched. */
.bars { display: block; width: 100%; height: auto; margin-top: 6px; overflow: visible; }
.bars .bar { fill: rgba(255, 255, 255, 0.28); }
.bars .bar.current { fill: var(--brand); }
.bars .bar.estimated { fill: url(#hatch); stroke: rgba(249, 179, 124, 0.8); stroke-width: 1; }
.bars .bar-label { fill: rgba(255, 255, 255, 0.62); font-size: 9.5px; font-family: var(--font); text-anchor: middle; }
.bars .bar-label.current { fill: #fff; font-weight: 700; }
.bars .bar-value { fill: #fff; font-size: 10px; font-family: var(--font); text-anchor: middle; font-weight: 700; }
.chart-key .swatch { display: inline-block; width: 10px; height: 10px; border-radius: 2px; background: rgba(255, 255, 255, 0.28); }
.chart-key .swatch.current { background: var(--brand); }
.chart-key .swatch.estimated { background: repeating-linear-gradient(45deg, rgba(249, 179, 124, 0.9) 0 2px, transparent 2px 4px); outline: 1px solid rgba(249, 179, 124, 0.8); }

.cost-amount.down { color: #b4e384; }
.cost-amount.up { color: var(--tint-bright); }