/* The supply example: the app's own Supply card, its low-supply warning, and a refill. */
.supply-demo {
  --supply-blue: #2f6887;
  --supply-track: #e2eaf0;
  --supply-warn: #ec8633;
  --supply-warn-track: #fcebdc;
  /* The warning orange, darkened for text so it reads at 4.5:1 on the white card. */
  --supply-warn-ink: #a4520f;
  --supply-ink: #182127;
  --supply-muted: #78838b;
  margin-top: clamp(40px, 6vw, 72px);
  padding: clamp(40px, 6vw, 88px) clamp(20px, 4vw, 56px) clamp(28px, 4vw, 48px);
  border-radius: var(--radius-tile);
  background: radial-gradient(80% 60% at 50% 0%, #fff, transparent 72%), linear-gradient(#e6eef2, #f1f5f7);
}
.supply-demo[hidden] { display: none; }

/* The banner stays in the flow while hidden, so its space is always its own height at any width. */
.supply-phone { display: grid; gap: 12px; width: min(100%, 400px); margin-inline: auto; }

.supply-banner {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px 12px 12px;
  border-radius: 24px;
  background: rgb(255 255 255 / .8);
  -webkit-backdrop-filter: blur(20px) saturate(1.6);
  backdrop-filter: blur(20px) saturate(1.6);
  box-shadow: 0 12px 32px -10px rgb(24 52 72 / .28);
  opacity: 0; translate: 0 -28px; scale: .94;
  transition: opacity .3s ease, translate .7s var(--spring), scale .7s var(--spring);
}
.supply-demo.is-low .supply-banner { opacity: 1; translate: 0 0; scale: 1; }
.banner-icon { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; background: linear-gradient(#3f7d9c, #285a75); }
.banner-icon svg { width: 22px; height: 22px; fill: none; stroke: #fff; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.banner-text { display: grid; flex: 1; min-width: 0; font-size: .875rem; line-height: 1.3; letter-spacing: -.01em; color: var(--supply-ink); }
.banner-meta { display: flex; justify-content: space-between; gap: 8px; font-size: .75rem; color: var(--supply-muted); }
.banner-text strong { font-weight: 600; }

.supply-card {
  display: flex; align-items: center; gap: 16px;
  padding: 18px 18px 18px 20px;
  border-radius: 26px;
  background: #fff;
  box-shadow: 0 1px 2px rgb(24 52 72 / .05), 0 14px 34px -14px rgb(24 52 72 / .2);
  transition: box-shadow .5s ease;
}
.supply-demo.is-low .supply-card { box-shadow: 0 1px 2px rgb(24 52 72 / .05), 0 16px 38px -14px rgb(236 134 51 / .42); }
.supply-ring { position: relative; flex: none; display: grid; place-items: center; width: 72px; height: 72px; color: var(--supply-ink); font-size: 1.125rem; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.supply-ring svg { position: absolute; inset: 0; width: 100%; height: 100%; rotate: -90deg; overflow: visible; }
.supply-ring circle { fill: none; stroke-width: 6; }
.supply-ring-track { stroke: var(--supply-track); transition: stroke .4s ease; }
.supply-ring-fill {
  stroke: var(--supply-blue); stroke-linecap: round;
  stroke-dasharray: var(--fill, 47) 100;
  stroke-opacity: min(1, calc(var(--fill, 47) * 10));
  transition: stroke-dasharray .45s var(--ease-out), stroke .4s ease;
}
.supply-demo.is-low .supply-ring-track { stroke: var(--supply-warn-track); }
.supply-demo.is-low .supply-ring-fill { stroke: var(--supply-warn); }
.supply-details { flex: 1; min-width: 0; }
.supply-name { color: var(--supply-ink); font-size: 1.125rem; font-weight: 600; line-height: 1.3; letter-spacing: -.02em; }
/* Inline, so the badge stays beside the last word if the name ever wraps. */
.supply-alert { display: inline-grid; place-items: center; width: 20px; height: 20px; margin-left: 8px; vertical-align: -3px; border-radius: 50%; background: var(--supply-warn); color: #fff; font-size: .75rem; font-weight: 800; line-height: 1; scale: 0; transition: scale .5s var(--spring); }
.supply-demo.is-low .supply-alert { scale: 1; }
.supply-forecast { margin-top: 2px; color: var(--supply-muted); font-size: 1rem; letter-spacing: -.01em; transition: color .3s ease; }
.supply-demo.is-low .supply-forecast { color: var(--supply-warn-ink); }
.supply-count { color: #a4acb2; font-size: .875rem; font-variant-numeric: tabular-nums; }
.supply-chevron { flex: none; width: 10px; height: 16px; fill: none; stroke: #bcc3c8; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* "Why this date?", as the app's sheet lays it out: the amount first, so the column adds up by eye. */
.supply-why { padding: 16px 20px 18px; border-radius: 26px; background: rgb(255 255 255 / .72); }
.supply-why-title { color: var(--supply-muted); font-size: .8125rem; font-weight: 600; letter-spacing: -.005em; }
/* Room for the refill line, so adding one never moves the slider under a finger. */
.supply-why-lines { display: grid; align-content: start; gap: 2px; min-height: calc(5 * 1.45em + 8px); margin-top: 6px; padding: 0; list-style: none; color: var(--supply-ink); font-size: .9375rem; line-height: 1.45; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.supply-why-lines .is-total, .supply-why-lines .is-end { font-weight: 600; }
.supply-why-lines .is-warn { color: var(--supply-warn-ink); }

.supply-controls { display: flex; align-items: center; gap: 14px; width: min(100%, 400px); margin: 36px auto 0; }
.supply-glyph { flex: none; width: 22px; height: 22px; fill: none; stroke: #7f8d96; stroke-width: 1.6; }
.supply-range { flex: 1; min-width: 0; height: 44px; margin: 0; background: none; cursor: pointer; -webkit-appearance: none; appearance: none; --range-fill: 47%; }
.supply-range::-webkit-slider-runnable-track { height: 6px; border-radius: 3px; background: linear-gradient(90deg, var(--supply-blue) var(--range-fill), #d3dde4 var(--range-fill)); }
.supply-range::-webkit-slider-thumb { -webkit-appearance: none; width: 28px; height: 28px; margin-top: -11px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgb(0 0 0 / .12), 0 4px 14px rgb(24 52 72 / .22); transition: scale .2s ease; }
.supply-range:active::-webkit-slider-thumb { scale: 1.1; }
.supply-range::-moz-range-track { height: 6px; border-radius: 3px; background: #d3dde4; }
.supply-range::-moz-range-progress { height: 6px; border-radius: 3px; background: var(--supply-blue); }
.supply-range::-moz-range-thumb { width: 28px; height: 28px; border: 0; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgb(0 0 0 / .12), 0 4px 14px rgb(24 52 72 / .22); }
.supply-demo.is-low .supply-range::-webkit-slider-runnable-track { background: linear-gradient(90deg, var(--supply-warn) var(--range-fill), #d3dde4 var(--range-fill)); }
.supply-demo.is-low .supply-range::-moz-range-progress { background: var(--supply-warn); }
.supply-range:focus-visible { outline: 3px solid var(--supply-blue); outline-offset: 2px; border-radius: 22px; }

.supply-actions { display: flex; justify-content: center; min-height: 48px; margin-top: 16px; }
.supply-refill {
  min-height: 48px; padding: 12px 24px;
  border-radius: 999px;
  /* Darker than the ring's orange, so the white label reads at 4.5:1. */
  background: #b45a15; color: #fff;
  font-size: 1rem; font-weight: 600; letter-spacing: -.01em;
  opacity: 0; scale: .9; visibility: hidden;
  transition: opacity .25s ease, scale .5s var(--spring), visibility 0s linear .25s, background-color .2s ease;
}
.supply-demo.is-low .supply-refill { opacity: 1; scale: 1; visibility: visible; transition-delay: 0s; }
.supply-refill:hover { background: var(--supply-warn-ink); }
.supply-refill:active { scale: .96; }
.supply-refill:focus-visible { outline: 3px solid var(--supply-warn); outline-offset: 3px; }

@media (max-width: 640px) {
  .supply-demo { padding-inline: 14px; }
  .supply-card { gap: 12px; padding: 14px 14px 14px 16px; border-radius: 24px; }
  .supply-ring { width: 60px; height: 60px; font-size: 1rem; }
  .supply-name { font-size: 1rem; }
  .supply-alert { width: 18px; height: 18px; margin-left: 6px; font-size: .6875rem; }
  .supply-forecast { font-size: .9375rem; }
  .supply-count { font-size: .8125rem; }
  .supply-why { padding: 14px 16px 16px; border-radius: 24px; }
  .supply-why-lines { font-size: .875rem; }
}