/* ==========================================================================
   Subsidy Calculator — First Citizens Bank
   Palette and type carried over from the previous build (creative brief),
   layout matched to subsidy_wok_calculator_final.pdf.
   Built to fill an iframe at 100vw / 100vh with no scrolling on desktop.
   ========================================================================== */

:root {
  --navy: #153145;          /* Template color — panels, headers, type   */
  --navy-deep: #003a61;     /* Third color — floor, chips, arrow badges */
  --ice: #d7e5eb;           /* Fourth color — card fill                 */
  --line: #b5bbc4;          /* Fifth color — hairlines                  */
  --paper: #ffffff;

  --frame: clamp(8px, 1.3vh, 22px);
  --gutter: clamp(8px, 1.1vw, 26px);
  --radius: 0px;
}

* { box-sizing: border-box; }

html {
  /* Every size below is expressed in rem, so this one line scales the whole
     composition to whatever the iframe gives us. */
  font-size: clamp(10px, min(1.02vw, 1.58vh), 19px);
}

body {
  margin: 0;
  min-height: 100vh;
  overflow: hidden;
  color: var(--navy);
  background: var(--paper);
  font-family: "Open Sans", Arial, Helvetica, sans-serif;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; }
button { font: inherit; color: inherit; }

:focus-visible { outline: 3px solid var(--navy-deep); outline-offset: 2px; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* --------------------------------------------------------------------------
   Backdrop — white upper field, blue floor, cooktop shadow, scenery props
   -------------------------------------------------------------------------- */
.backdrop { position: fixed; inset: 0; z-index: 0; pointer-events: none; }

.floor {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 25%;
  background: var(--navy-deep);
}

.floor-shadow {
  position: absolute;
  left: 27.3%; top: 0;
  width: 7.2%; height: 100%;
  background: var(--navy);
  clip-path: polygon(100% 0, 100% 100%, 0 100%);
}

.prop { position: absolute; bottom: 18%; width: 3.6%; min-width: 34px; }
.prop-lime { left: 28.6%; }
.prop-beef { left: 69.6%; width: 4.4%; }

/* --------------------------------------------------------------------------
   Stage — three columns
   -------------------------------------------------------------------------- */
.stage {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 24.6% 1fr 24.6%;
  gap: var(--gutter);
  height: 100vh;
  padding: var(--frame) clamp(6px, 0.8vw, 20px);
}

.panel {
  display: flex;
  flex-direction: column;
  gap: clamp(10px, 2.1vh, 30px);
  min-height: 0;
  padding: clamp(8px, 1.4vh, 22px) clamp(8px, 0.9vw, 20px) clamp(10px, 1.6vh, 24px);
  border: 2px solid var(--navy);
  background: var(--paper);
  overflow: auto;            /* safety valve on very short viewports */
  scrollbar-width: thin;
}

/* --------------------------------------------------------------------------
   Group headings — 01 Population
   -------------------------------------------------------------------------- */
.group { display: flex; flex-direction: column; }

.group-head {
  display: flex;
  align-items: flex-end;
  gap: .55em;
  margin-bottom: clamp(6px, 1.1vh, 16px);
  border-bottom: 4px solid var(--navy);
}

.group-num {
  display: grid;
  place-items: center;
  flex: none;
  width: 2.85em;
  padding: .82em 0 .92em;
  margin-bottom: -4px;
  color: var(--paper);
  background: var(--navy);
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: -.01em;
  line-height: 1;
}

.group-head h2 {
  margin: 0 0 .06em;
  font-size: 2.3rem;
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1.02;
}

.group-cards { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(6px, .7vw, 14px); }
.group-cards.is-single { grid-template-columns: 1fr; }

/* --------------------------------------------------------------------------
   Ingredient cards
   -------------------------------------------------------------------------- */
.card {
  position: relative;
  display: grid;
  grid-template-rows: 1fr auto;
  gap: .3em;
  padding: clamp(5px, .75vh, 12px) clamp(6px, .6vw, 12px);
  border: 1px solid var(--line);
  background: var(--ice);
  cursor: grab;
  transition: transform .16s ease, box-shadow .16s ease, opacity .16s ease;
}

.card:hover:not(.is-selected) { transform: translateY(-2px); box-shadow: 4px 4px 0 rgba(21, 49, 69, .16); }
.card.is-dragging { opacity: .35; transform: scale(.95); }

.card.is-selected { opacity: .43; cursor: default; box-shadow: none; }
.card.is-selected .card-arrow { opacity: .5; }

/* Locked — this card's category already has a selection. */
.card.is-locked { opacity: .5; cursor: not-allowed; box-shadow: none; }
.card.is-locked .card-arrow { opacity: .45; }

.card-arrow {
  position: absolute;
  top: .5em;
  display: grid;
  place-items: center;
  width: 1.85em; height: 1.85em;
  border-radius: 50%;
  color: var(--paper);
  background: var(--navy);
  font-size: .95rem;
  font-weight: 700;
  line-height: 1;
}
.panel-left .card-arrow { right: .5em; }
.panel-right .card-arrow { left: .5em; }

/* Holds the art, the copy and the hover note, so the note can cover them
   without ever covering the ADD+ button. */
.card-body { position: relative; display: flex; flex-direction: column; min-height: 0; }

.card-art { display: grid; place-items: center; flex: 0 0 auto; min-height: 0; padding: .15em 0 .1em; }
.card-art img { width: 100%; height: clamp(46px, 9.2vh, 128px); object-fit: contain; }

.card-copy { min-width: 0; }
.card-copy h3 {
  margin: 0;
  font-size: 1.06rem;
  font-weight: 800;
  letter-spacing: -.012em;
  line-height: 1.12;
}
.card-effect {
  margin: .18em 0 0;
  font-size: .84rem;
  font-stretch: 75%;
  font-weight: 800;
  letter-spacing: .005em;
}

/* The spreadsheet's "why" for each scenario. Overlays the card on hover and
   on keyboard focus; the touch layouts below print it inline instead. */
.card-note {
  position: absolute;
  z-index: 5;
  inset: 0;
  display: flex;
  align-items: center;
  margin: 0;
  padding: .6em .7em;
  overflow: auto;
  color: var(--paper);
  background: var(--navy);
  font-size: .82rem;
  font-weight: 600;
  line-height: 1.32;
  opacity: 0;
  pointer-events: none;
  transition: opacity .16s ease;
}
.card:hover .card-note,
.card:focus-within .card-note { opacity: 1; }
.card.is-selected .card-note, .card.is-locked .card-note { display: none; }

.add-btn {
  width: 100%;
  padding: .52em .4em;
  border: 1px solid var(--navy);
  background: var(--paper);
  cursor: pointer;
  font-size: 1.02rem;
  font-weight: 800;
  letter-spacing: .01em;
  transition: background .15s ease, color .15s ease;
}
.add-btn:hover:not(:disabled) { color: var(--paper); background: var(--navy); }
.add-btn:disabled { cursor: default; }

/* Catering Spend — copy left, tall bottle right (per the comp) */
.card--side .card-body { display: grid; grid-template-columns: 1fr auto; align-items: center; }
.card--side .card-copy { grid-column: 1; grid-row: 1; }
.card--side .card-art { grid-column: 2; grid-row: 1; width: 3.6em; }
.card--side .card-art img { height: clamp(60px, 11vh, 150px); }
.card--side .card-copy h3 { font-size: 1.04rem; }

/* --------------------------------------------------------------------------
   Center column — results panel, wok, reset
   -------------------------------------------------------------------------- */
.center { position: relative; display: flex; flex-direction: column; min-height: 0; }

.results {
  flex: none;
  width: 90%;
  margin: 0 auto;
  border: 1px solid var(--line);
  background: var(--paper);
}

.results-head { padding: clamp(10px, 1.7vh, 26px) clamp(12px, 1.5vw, 30px) clamp(10px, 1.6vh, 24px); background: var(--navy); }
.results-head h1 {
  margin: 0;
  color: var(--paper);
  font-size: 2.5rem;
  font-weight: 800;
  letter-spacing: -.022em;
  line-height: 1.02;
}
.results-sub {
  max-width: 26em;
  margin: .35em 0 0;
  color: var(--paper);
  font-size: .95rem;
  font-stretch: 75%;
  font-weight: 700;
  line-height: 1.28;
}
.cue-tap { display: none; }

.results-body {
  display: grid;
  align-items: center;
  min-height: clamp(64px, 15.5vh, 210px);
  padding: clamp(8px, 1.4vh, 20px) clamp(12px, 1.5vw, 30px);
}
.results-headline {
  margin: 0;
  font-size: 2.05rem;
  font-weight: 800;
  letter-spacing: -.018em;
  line-height: 1.08;
}
.results-headline.is-empty { color: rgba(21, 49, 69, .45); }
.results-headline.value-pop { animation: value-pop .34s cubic-bezier(.2, .8, .3, 1.25) both; }
@keyframes value-pop { from { opacity: 0; transform: translateY(6px) scale(.985); } to { opacity: 1; } }

.results-base { height: clamp(14px, 4.4vh, 50px); background: var(--ice); }

/* Wok scene ---------------------------------------------------------------- */
.wok-scene { position: relative; flex: 1 1 auto; min-height: 0; }

/* Plinth beneath the cooktop — a flat block in the comp, not part of the art */
.plinth {
  position: absolute;
  left: 50%; bottom: calc(var(--frame) * -1);
  width: 67.8%; height: calc(17% + var(--frame));
  background: #130e0a;
  transform: translateX(-50%);
}

.cooktop-art {
  position: absolute;
  left: 50%; bottom: 17%;
  width: 67.8%; height: auto;
  transform: translateX(-50%);
}

/* The wok and its drop target move together, so a breakpoint only has to
   resize the rig — the bowl geometry below stays correct. */
.wok-rig {
  position: absolute;
  z-index: 3;
  left: 50%; bottom: 38.6%;
  width: 70%;
  transform: translateX(-50%);
}

.wok-art { display: block; width: 100%; pointer-events: none; }

.wok-dropzone {
  position: absolute;
  z-index: 4;
  left: 24%; right: 0;
  top: 54%;
  height: 33.5%;
  border: 3px dashed transparent;
  border-radius: 50%;
  transition: transform .18s ease, background .18s ease, border-color .18s ease;
}
.wok-dropzone.is-over {
  border-color: var(--ice);
  background: rgba(215, 229, 235, .3);
  transform: scale(1.04);
}

.cooked-ingredients { position: absolute; inset: 4% 4% 8% 4%; }

.cooked-item {
  position: absolute;
  z-index: 6;
  width: 38%; height: 62%;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  filter: drop-shadow(0 4px 2px rgba(0, 0, 0, .28));
  animation: toss-in .42s cubic-bezier(.2, .8, .3, 1.2) both;
}
.cooked-item img { width: 100%; height: 100%; object-fit: contain; }
.cooked-item:hover { transform: scale(1.09) rotate(3deg); filter: drop-shadow(0 5px 3px rgba(0, 0, 0, .38)); }

.position-0 { left: 1%;  top: 20%; }
.position-1 { left: 22%; top: 2%;  transform: rotate(-8deg); }
.position-2 { left: 43%; top: 22%; transform: rotate(9deg); }
.position-3 { left: 60%; top: 5%;  }
.position-4 { left: 11%; top: 36%; transform: rotate(8deg); }
.position-5 { left: 34%; top: 38%; transform: rotate(-7deg); }
.position-6 { left: 57%; top: 33%; }
.position-7 { left: 29%; top: 17%; transform: rotate(4deg); }
.position-8 { left: 46%; top: 0%;  transform: rotate(-4deg); }

@keyframes toss-in {
  from { opacity: 0; transform: translateY(-160px) rotate(80deg) scale(.4); }
  to { opacity: 1; }
}

/* Flame burst on add ------------------------------------------------------- */
.fire-burst {
  position: absolute;
  z-index: 2;
  left: 50%; bottom: 30%;
  width: 42%; height: 22%;
  opacity: 0;
  transform: translateX(-50%);
  pointer-events: none;
}
.fire-burst i {
  position: absolute;
  bottom: 0;
  width: 22%; height: 90%;
  border-radius: 58% 42% 64% 36% / 72% 72% 28% 28%;
  background: linear-gradient(to top, #003a61 0 5%, #15395e 6% 18%, #f6a51c 19% 52%, #ffd866 53% 78%, #fff4cb 79% 100%);
  box-shadow: 0 0 22px rgba(246, 165, 28, .7);
  transform: scaleY(.08) rotate(45deg);
  transform-origin: 50% 100%;
}
.fire-burst i:nth-child(1) { left: 2%;  height: 62%; }
.fire-burst i:nth-child(2) { left: 21%; height: 84%; }
.fire-burst i:nth-child(3) { left: 40%; width: 25%; height: 100%; }
.fire-burst i:nth-child(4) { right: 18%; height: 80%; }
.fire-burst i:nth-child(5) { right: 1%; height: 60%; }
.fire-burst.ignite { animation: fire-burst .9s ease-out both; }
.fire-burst.ignite i { animation: flame-flare .9s cubic-bezier(.17, .82, .38, 1) both; }
.fire-burst.ignite i:nth-child(2), .fire-burst.ignite i:nth-child(4) { animation-delay: .04s; }
.fire-burst.ignite i:nth-child(1), .fire-burst.ignite i:nth-child(5) { animation-delay: .08s; }
@keyframes fire-burst { 0% { opacity: 0; } 12% { opacity: 1; } 68% { opacity: 1; } 100% { opacity: 0; } }
@keyframes flame-flare {
  0%   { transform: scaleY(.08) scaleX(.7) rotate(45deg); }
  22%  { transform: scaleY(1.12) scaleX(1) rotate(45deg); }
  48%  { transform: scaleY(.72) scaleX(.86) rotate(41deg); }
  70%  { transform: scaleY(.95) scaleX(.9) rotate(48deg); }
  100% { transform: scaleY(.1) scaleX(.7) rotate(45deg); }
}

/* Steam — only while something is cooking ---------------------------------- */
.steam { position: absolute; z-index: 2; left: 50%; bottom: 46%; width: 26%; height: 20%; opacity: 0; transform: translateX(-50%); transition: opacity .4s ease; }
.steam.is-on { opacity: .55; }
.steam span {
  position: absolute;
  bottom: 0;
  width: 26%; height: 100%;
  border-left: 5px solid var(--ice);
  border-radius: 50%;
}
.steam span:first-child { left: 24%; transform: rotate(7deg); animation: drift 3.4s ease-in-out infinite; }
.steam span:last-child { left: 58%; transform: scale(.74) rotate(-8deg); animation: drift 4.1s ease-in-out infinite .6s; }
@keyframes drift { 0%, 100% { transform: translateY(0) rotate(6deg); } 50% { transform: translateY(-14%) rotate(-6deg); } }

/* Reset -------------------------------------------------------------------- */
.reset-btn {
  position: absolute;
  z-index: 7;
  left: 50%; bottom: clamp(8px, 1.6vh, 26px);
  min-width: 9em;
  padding: .55em 2em;
  border: 2px solid var(--navy);
  background: var(--paper);
  cursor: pointer;
  font-size: 1.02rem;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  transform: translateX(-50%);
  transition: background .15s ease, color .15s ease, opacity .15s ease;
}
.reset-btn:hover:not(:disabled) { color: var(--paper); background: var(--navy); }
.reset-btn:disabled { opacity: .38; cursor: default; }

/* ==========================================================================
   Responsive — the comp is a fixed desktop artboard, so everything below is
   our own. Desktop keeps the 100vh no-scroll composition; narrower or
   shorter viewports stack and scroll.
   ========================================================================== */

/* Short-but-wide (laptop with browser chrome, landscape tablet) */
@media (min-width: 900px) and (max-height: 620px) {
  .results { width: 96%; }
  .results-body { min-height: 46px; }
  .card-art img { height: clamp(38px, 7vh, 70px); }
  .wok-rig { width: 54%; bottom: 34%; }
  .cooktop-art, .plinth { width: 52%; }
}

@media (max-width: 900px), (max-height: 480px) {
  /* Panels are half-width once stacked, so the root step scales off width
     more aggressively than it does in the three-column composition. */
  html { font-size: clamp(12px, min(1.9vw, 1.7vh), 17px); }

  body { overflow: auto; }

  .backdrop { position: absolute; height: 100%; }
  .floor { height: 34%; }
  .prop { display: none; }

  .stage {
    grid-template-columns: 1fr 1fr;
    height: auto;
    min-height: 100vh;
    padding: var(--frame) clamp(10px, 2.4vw, 24px) clamp(24px, 5vh, 48px);
  }

  .center { grid-column: 1 / -1; order: -1; }
  .results { width: 100%; }
  .wok-scene { min-height: 46vh; padding-bottom: clamp(52px, 8vh, 78px); }
  .plinth { bottom: 0; height: 17%; }
  .reset-btn { bottom: 0; }

  .panel { overflow: visible; }

  /* No hover on touch, so the note becomes part of the card. */
  .card-note {
    position: static;
    grid-column: 1 / -1;
    display: block;
    padding: .45em 0 0;
    overflow: visible;
    color: var(--navy);
    background: none;
    font-size: .8rem;
    font-weight: 600;
    opacity: 1;
  }
  .card.is-selected .card-note, .card.is-locked .card-note { display: block; }
  /* The wok sits above the panels now, so a left/right cue would misdirect. */
  .card-arrow { display: none; }
}

@media (max-width: 640px) {
  html { font-size: clamp(13px, 3.6vw, 17px); }

  .stage { grid-template-columns: 1fr; }
  .panel { gap: clamp(14px, 3vh, 26px); }

  .cue-drag { display: none; }
  .cue-tap { display: inline; }

  .card { cursor: default; }   /* no drag affordance on touch — ADD+ is the path */
  .card-art img { height: clamp(56px, 15vw, 96px); }

  .group-head h2 { font-size: 1.62rem; }
  .group-num { font-size: 1.02rem; }
  .results-head h1 { font-size: 1.72rem; }
  .results-sub { font-size: .84rem; }
  .results-headline { font-size: 1.5rem; }
  .card-copy h3, .card--side .card-copy h3 { font-size: 1rem; }
  .card-effect { font-size: .78rem; }

  .results-body { min-height: clamp(52px, 9vh, 96px); }
  .results-base { height: clamp(12px, 2.4vh, 24px); }

  .wok-scene { min-height: 40vh; }
  .wok-rig { width: 92%; }
  .cooktop-art, .plinth { width: 86%; }
}

@media (max-width: 340px) {
  .group-cards { grid-template-columns: 1fr; }
  .card--side .card-art { width: 3em; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .fire-burst, .steam { display: none; }
}