/* H Hardware Gas Companion — brand tokens lifted from hh-app/src/theme.ts so this standalone
   app looks like it belongs to the same family as the full members app. */

:root {
  --yellow: #FFC20E;
  --yellow-dark: #E5A800;
  --charcoal: #1C1C1C;
  --charcoal-soft: #2A2A2A;
  --warm-white: #F8F6F2;
  --white: #FFFFFF;
  --green: #6E8B3D;
  --forest: #2E7D32;
  --orange: #F47A20;
  --orange-dark: #C2540F;
  --success: #4CAF50;
  --error: #D9534F;

  --ink: #1C1C1C;
  --ink-soft: #5A5A5A;
  --ink-faint: #8A8A8A;

  --line: #ECE8E1;
  --line-soft: #F1EEE8;

  --r-card: 20px;
  --r-btn: 16px;
  --shadow-card: 0 4px 12px rgba(0, 0, 0, 0.08);

  /* One spacing scale for the whole app (mirrors hh-app/src/theme.ts) so gaps
     stay consistent instead of every block inventing its own number. */
  --s-xs: 4px;
  --s-sm: 8px;
  --s-md: 12px;
  --s-lg: 16px;
  --s-xl: 20px;
  --s-xxl: 28px;

  /* Fixed sizes, named so they can't drift apart. */
  --btn-h: 54px;        /* every button is this tall, one line or two */
  --icon-sm: 40px;      /* inline icons (spare bottle) */
  --icon-md: 44px;      /* header + shop card avatars */
  --mascot: 76px;
  --gauge: 200px;       /* the single-bottle hero image */

  --font-heading: 'Montserrat', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-body: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--warm-white);
  color: var(--ink);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  overscroll-behavior-y: contain;
}

body {
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}

.wrap {
  max-width: 480px;
  margin: 0 auto;
  padding: 20px 20px 56px;
}

/* ---- type ---- */
h1, h2, h3 { font-family: var(--font-heading); font-weight: 800; margin: 0; letter-spacing: -0.01em; }
h1 { font-size: 26px; }
h2 { font-size: 20px; }
.muted { color: var(--ink-soft); font-size: 14px; line-height: 1.45; }
.label { font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-soft); }
.tiny { font-size: 12px; }
.center { text-align: center; }

/* ---- header ---- */
.appbar { display: flex; align-items: center; gap: var(--s-md); margin-bottom: var(--s-xl); }
.appbar img { width: var(--icon-md); height: var(--icon-md); border-radius: 12px; object-fit: cover; flex: none; }
.appbar .sub { color: var(--ink-soft); font-size: 13px; }

/* ---- card ---- */
.card {
  background: var(--white);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-card);
  padding: var(--s-xl);
  margin-bottom: var(--s-lg);
}
.card.flush { padding: var(--s-xxl) var(--s-xl); }
/* A 2px border would shift the contents by 2px, so keep the box the same size. */
.card.alarm { box-shadow: 0 0 0 2px var(--error), var(--shadow-card); }

/* ---- buttons ---- */
.btn {
  display: flex; align-items: center; justify-content: center; gap: var(--s-sm);
  width: 100%; box-sizing: border-box;
  min-height: var(--btn-h); padding: 0 18px; margin-top: 10px;
  border: none; border-radius: var(--r-btn);
  background: var(--yellow); color: var(--charcoal);
  font-family: var(--font-body); font-size: 15px; font-weight: 700; line-height: 1.25;
  cursor: pointer; text-decoration: none; text-align: center;
  transition: transform 0.06s ease, filter 0.15s ease;
}
.btn:active { transform: translateY(1px); }
.btn:hover { filter: brightness(0.96); }
.btn:disabled { opacity: 0.5; cursor: default; }
.btn.forest { background: var(--forest); color: #fff; }
.btn.warning { background: var(--orange-dark); color: #fff; }
.btn.dark { background: var(--charcoal); color: #fff; }
.btn.ghost { background: transparent; color: var(--ink-soft); border: 1.5px solid var(--line); }
/* Small buttons sit inline next to inputs, so they opt out of the full-width/height rules. */
.btn.small { width: auto; min-height: 44px; padding: 0 14px; font-size: 13px; margin-top: 0; }

/* ---- segmented choices ----
   A grid, not flex-wrap: equal-width cells that never leave one button stranded
   on its own row. 4 options wrap to 2x2 on a narrow phone, 3 options sit in a row. */
.seg { display: grid; grid-template-columns: repeat(auto-fit, minmax(84px, 1fr)); gap: var(--s-sm); }
.seg button {
  min-height: 46px; padding: 0 var(--s-sm);
  border-radius: 12px; border: 1px solid var(--line);
  background: var(--white); color: var(--ink-soft);
  font-family: var(--font-body); font-size: 13px; font-weight: 700; cursor: pointer;
  white-space: nowrap;
}
.seg button[aria-pressed="true"] { background: var(--charcoal); color: #fff; border-color: var(--charcoal); }

/* ---- inputs ---- */
input[type="number"], input[type="date"], input[type="email"], input[type="text"] {
  width: 100%; padding: 12px; border-radius: 12px;
  border: 1px solid var(--line); background: var(--white);
  font-family: var(--font-body); font-size: 15px; color: var(--ink);
}
input:focus { outline: 2px solid var(--yellow); outline-offset: 1px; }

.check { display: flex; align-items: center; gap: 10px; cursor: pointer; margin: 14px 0; }
.check .box {
  width: 26px; height: 26px; border-radius: 8px; flex: none;
  border: 2px solid var(--charcoal); background: transparent;
  display: flex; align-items: center; justify-content: center;
  font-size: 15px; color: #fff; line-height: 1;
}
.check input { display: none; }
.check input:checked + .box { background: var(--charcoal); }

/* ---- gauge ---- */
.gauge { display: flex; flex-direction: column; align-items: center; width: 100%; }
/* Scoped to the two hero images only — NOT .slot img, which JS sizes per slot. */
#bottle, #changeover img { width: var(--gauge); height: var(--gauge); object-fit: contain; }
.pct { font-family: var(--font-heading); font-weight: 800; font-size: 46px; line-height: 1.1; margin-top: var(--s-md); }
.band { font-size: 17px; font-weight: 700; }
.health { display: inline-flex; align-items: center; gap: 6px; margin-top: var(--s-md); font-size: 13px; font-weight: 700; }
.health .dot { width: 9px; height: 9px; border-radius: 999px; flex: none; }

/* twin slots — both slots reserve the same box so the row never jumps when one
   is the larger in-use bottle; JS only varies the image size inside it. */
.slots { display: flex; align-items: flex-end; justify-content: center; gap: var(--s-lg); width: 100%; }
.slot { display: flex; flex-direction: column; align-items: center; text-align: center; width: 150px; }
.slot.calm { opacity: 0.45; }
.slot img { width: 120px; height: 120px; object-fit: contain; }
.slot .cap { font-size: 11px; font-weight: 700; margin-top: 2px; line-height: 1.3; min-height: 15px; }
.slot .status { min-height: 15px; }

/* nudge row */
.nudge { display: flex; gap: var(--s-sm); margin-top: var(--s-lg); width: 100%; }
.nudge button {
  flex: 1; min-height: 44px; padding: 0 var(--s-sm);
  border-radius: 12px; border: 1px solid var(--line);
  background: var(--white); color: var(--ink-soft);
  font-family: var(--font-body); font-size: 13px; font-weight: 700; cursor: pointer;
}

/* ---- spare bottle card (twin only) ---- */
.spare-card { display: flex; gap: var(--s-md); align-items: center; margin-top: var(--s-lg); }
.spare-card img { width: var(--icon-sm); height: var(--icon-sm); object-fit: contain; flex: none; }
.spare-card .spare-body { flex: 1; min-width: 0; }

/* ---- disclosure ---- */
.disclose {
  display: flex; align-items: center; gap: 8px; width: 100%;
  background: none; border: none; padding: 14px 0 6px; cursor: pointer;
  font-family: var(--font-body); font-size: 14px; font-weight: 700; color: var(--charcoal);
}
.disclose .chev { margin-left: auto; color: var(--ink-faint); }

/* ---- history ---- */
.hist-row { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line-soft); }
.hist-row:last-child { border-bottom: none; }
.hist-ico { width: 38px; height: 38px; border-radius: 999px; background: var(--line-soft); display: flex; align-items: center; justify-content: center; flex: none; }

/* ---- banner (low gas prompt) ---- */
.banner {
  display: flex; gap: 12px; align-items: flex-start;
  border-radius: var(--r-card); padding: 16px; margin-bottom: 16px;
  background: #FFF3D1; border: 1px solid var(--yellow);
}
.banner.urgent { background: #FDECEA; border-color: var(--error); }
.banner strong { display: block; margin-bottom: 2px; }

/* ---- install prompt ---- */
.install { background: var(--charcoal); color: #F4F2EE; }
.install h2 { color: #fff; }
.install .muted { color: #C9C6C0; }
.install ol { margin: 10px 0 0; padding-left: 20px; font-size: 14px; line-height: 1.6; color: #C9C6C0; }

/* ---- modal sheet ---- */
.sheet-bg {
  position: fixed; inset: 0; background: rgba(28,28,28,0.5);
  display: flex; align-items: flex-end; justify-content: center; z-index: 50;
}
.sheet-bg[hidden] { display: none; }
.sheet {
  background: var(--warm-white); width: 100%; max-width: 480px;
  border-radius: 24px 24px 0 0; padding: 20px;
  max-height: 85vh; overflow-y: auto;
  animation: rise 0.22s ease;
  padding-bottom: calc(20px + env(safe-area-inset-bottom));
}
@keyframes rise { from { transform: translateY(18px); opacity: 0.6; } to { transform: translateY(0); opacity: 1; } }
.sheet-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.x { background: none; border: none; font-size: 24px; line-height: 1; color: var(--ink-soft); cursor: pointer; padding: 0 4px; }

/* ---- welcome (setup screen) ---- */
.welcome { display: flex; align-items: center; gap: var(--s-md); }
.welcome .mascot { width: var(--mascot); height: var(--mascot); object-fit: contain; flex: none; }
.welcome h2 { font-size: 21px; line-height: 1.15; }

/* Two-line buttons keep the SAME height as one-line ones — only the label stacks. */
.btn.stacked { flex-direction: column; gap: 1px; }
.btn.stacked .order-main { font-size: 15px; font-weight: 700; }
.btn.stacked .order-sub { font-size: 12px; font-weight: 600; opacity: 0.72; }
/* The order CTA is the money button — give it a little more presence. */
.btn.order { box-shadow: 0 2px 8px rgba(255, 194, 14, 0.45); }

/* ---- specials (live from the Shopify feed) ---- */
#specials h2 { font-size: 19px; }

/* Swipeable strip — thumb-scrolls left/right.
   The earlier version hid the scrollbar completely, which left desktop users with no way to move it
   and no hint it moved at all. Here the scrollbar is SLIM BUT VISIBLE, and the strip bleeds to the
   card edges so a part-shown product signals there is more to the right. */
.specials-strip {
  display: flex;
  gap: var(--s-md);
  overflow-x: auto;
  scroll-snap-type: x proximity;
  /* Bleed out to the card's edges, then pad back in, so items scroll under the rounded corners. */
  margin: 0 calc(-1 * var(--s-xl));
  padding: 0 var(--s-xl) var(--s-md);
  -webkit-overflow-scrolling: touch;
  /* Stop a sideways swipe from triggering the browser's back gesture. */
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--line) transparent;
}
.specials-strip::-webkit-scrollbar { height: 6px; }
.specials-strip::-webkit-scrollbar-track { background: transparent; }
.specials-strip::-webkit-scrollbar-thumb { background: var(--line); border-radius: 999px; }
.specials-strip::-webkit-scrollbar-thumb:hover { background: var(--ink-faint); }

.special {
  flex: none; width: 124px;
  scroll-snap-align: start;
  text-decoration: none; color: inherit;
}
.special img {
  width: 124px; height: 124px; object-fit: cover;
  border-radius: 12px; background: var(--line-soft); display: block;
}
.special .t { font-size: 12px; font-weight: 600; line-height: 1.3; margin-top: 6px; color: var(--ink);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.special .p { font-size: 13px; font-weight: 700; margin-top: 2px; }
.special .was { font-size: 11px; font-weight: 600; color: var(--ink-faint); text-decoration: line-through; margin-left: 4px; }
.special .badge {
  display: inline-block; margin-top: 4px; padding: 2px 6px; border-radius: 999px;
  background: var(--orange); color: #fff; font-size: 10px; font-weight: 700;
}

/* ---- contact row ---- */
.contact {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s-sm);
  margin-top: var(--s-sm);
}
.contact a {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 5px; padding: var(--s-md) 4px;
  background: var(--white); border-radius: var(--r-btn);
  box-shadow: var(--shadow-card);
  color: var(--charcoal); text-decoration: none;
  transition: transform 0.06s ease, filter 0.15s ease;
}
.contact a:active { transform: translateY(1px); }
.contact a:hover { filter: brightness(0.97); }
.contact svg { width: 24px; height: 24px; fill: currentColor; display: block; }
.contact span { font-size: 11px; font-weight: 700; line-height: 1; }

/* ---- footer ---- */
.foot { text-align: center; padding-top: 8px; }
.foot a { color: var(--ink-soft); font-size: 13px; }
.err { color: var(--error); font-size: 13px; margin-top: 8px; }
.ok { color: var(--forest); font-size: 14px; font-weight: 700; }
.stack { display: flex; flex-direction: column; gap: var(--s-lg); }
.row { display: flex; gap: var(--s-sm); align-items: flex-start; }
.row > *:first-child { flex: 1; }
.grow { flex: 1; min-width: 0; }
[hidden] { display: none !important; }

/* ---- spacing utilities ----
   Everything vertical uses these instead of ad-hoc inline margins, so the rhythm
   is consistent and there is one place to change it. */
.mt-0 { margin-top: 0; }
.mt-xs { margin-top: var(--s-xs); }
.mt-sm { margin-top: var(--s-sm); }
.mt-md { margin-top: var(--s-md); }
.mt-lg { margin-top: var(--s-lg); }
.mb-0 { margin-bottom: 0; }
.mb-xs { margin-bottom: var(--s-xs); }
.mb-sm { margin-bottom: var(--s-sm); }
.mb-md { margin-bottom: var(--s-md); }
.mb-lg { margin-bottom: var(--s-lg); }
.my-0 { margin-top: 0; margin-bottom: 0; }
/* Paragraphs inside cards shouldn't carry the browser's default 1em margins. */
.card p { margin: 0; }
.card p + p { margin-top: var(--s-md); }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}