/* Solarlify Solar Calculator - Plugin CSS - v1.0.0 */
/* Scoped inside .slfy-calc-scope to avoid theme conflicts */

/* ═══════════════════════════════════════════
   BRAND TOKENS — Solarlify #20AF24 + #F9D71C
═══════════════════════════════════════════ */
:root {
  /* Solarlify Green */
  --green:       #20AF24;
  --green-dark:  #178A1B;
  --green-deep:  #0E5C10;
  --green-pale:  #EDFAED;
  --green-glow:  rgba(32,175,36,.16);
  --green-mid:   rgba(32,175,36,.35);

  /* Solarlify Yellow */
  --yellow:      #F9D71C;
  --yellow-dark: #D4B608;
  --yellow-deep: #8A7400;
  --yellow-pale: #FFFDE7;
  --yellow-glow: rgba(249,215,28,.2);

  /* Neutrals */
  --ink:    #080D0E;
  --ink2:   #111A1C;
  --ink3:   #192022;
  --slate:  #4D6163;
  --muted:  #7A9295;
  --border: #E0EAEB;
  --surface:#F4F8F4;
  --white:  #FFFFFF;

  /* Utility */
  --danger:      #DC2626;
  --danger-pale: #FEF2F2;
  --info:        #2563EB;
  --info-pale:   #EFF6FF;

  --r:    18px;
  --r-md: 12px;
  --r-sm:  8px;
  --sh:    0 1px 3px rgba(8,13,14,.06), 0 4px 16px rgba(8,13,14,.08);
  --sh-lg: 0 8px 32px rgba(8,13,14,.14), 0 2px 8px rgba(8,13,14,.06);
  --ease:  cubic-bezier(.4,0,.2,1);
}

/* ═══════════════════════════════════════════
   RESET
═══════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
/* body styles scoped so they don't override WordPress theme */
.slfy-calc-scope {
  font-family: 'DM Sans', sans-serif;
  color: var(--ink);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
button  { font-family: inherit; cursor: pointer; border: none; background: none; }
input, select { font-family: inherit; }
select  { -webkit-appearance: none; appearance: none; }
a       { color: inherit; text-decoration: none; }
::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: var(--surface); }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 99px; }

/* ═══════════════════════════════════════════
   HERO
═══════════════════════════════════════════ */
.hero {
  background: var(--ink);
  position: relative; overflow: hidden; padding: 0 20px;
}
.hero-bg {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 100% 70% at 50% -5%, rgba(32,175,36,.14) 0%, transparent 60%),
    radial-gradient(ellipse 60% 40% at 90% 60%,  rgba(249,215,28,.06) 0%, transparent 70%);
}
.hero-rays {
  position: absolute; inset: 0; pointer-events: none;
  background-image: repeating-conic-gradient(
    from 0deg at 50% -40%,
    rgba(32,175,36,.045) 0deg 6deg,
    transparent 6deg 18deg
  );
  animation: rayRotate 50s linear infinite;
}
@keyframes rayRotate { to { transform: rotate(20deg); } }

.hero-inner {
  position: relative; z-index: 2;
  max-width: 680px; margin: 0 auto;
  padding: 52px 0 0; text-align: center;
}
.hero-chip {
  display: inline-flex; align-items: center; gap: 7px;
  background: rgba(32,175,36,.12);
  border: 1px solid rgba(32,175,36,.3);
  border-radius: 99px;
  padding: 5px 14px 5px 9px;
  font-size: .72rem; font-weight: 600; letter-spacing: .09em;
  text-transform: uppercase; color: #4CD84F;
  margin-bottom: 22px;
  animation: riseIn .6s var(--ease) both;
}
.hero-chip-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 7px var(--green);
  animation: pulse 2s ease-in-out infinite;
}
@keyframes pulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.55;transform:scale(.8)} }

.hero h1 {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-weight: 800; font-size: clamp(2rem, 5.5vw, 3.1rem);
  color: var(--white); line-height: 1.1; margin-bottom: 14px;
  animation: riseIn .6s .1s var(--ease) both;
}
.hero h1 .accent { color: var(--yellow); }
.hero-sub {
  font-size: .93rem; color: #7A9295; font-weight: 300;
  max-width: 440px; margin: 0 auto 36px;
  animation: riseIn .6s .2s var(--ease) both;
}

/* Steps */
.steps-track {
  display: flex; align-items: center; justify-content: center;
  animation: riseIn .6s .3s var(--ease) both;
}
.step-item { display: flex; flex-direction: column; align-items: center; gap: 7px; }
.step-circle {
  width: 36px; height: 36px; border-radius: 50%;
  border: 2px solid #1E2E30;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Bricolage Grotesque', sans-serif;
  font-weight: 700; font-size: .78rem; color: #4A6063;
  background: var(--ink2); z-index: 1;
  transition: all .35s var(--ease);
}
.step-label {
  font-size: .62rem; font-weight: 500; color: #4A6063;
  letter-spacing: .04em; text-transform: uppercase;
  transition: color .35s var(--ease);
}
.step-line {
  width: 44px; height: 2px; background: #1E2E30;
  margin-bottom: 20px; flex-shrink: 0;
  transition: background .4s var(--ease);
}
/* Active = yellow */
.step-item.is-active .step-circle {
  background: var(--yellow); border-color: var(--yellow); color: var(--ink);
  box-shadow: 0 0 0 5px var(--yellow-glow);
}
.step-item.is-active .step-label { color: var(--yellow); }
/* Done = green */
.step-item.is-done .step-circle { background: var(--green); border-color: var(--green); color: white; }
.step-item.is-done .step-label  { color: #5CD85F; }
.step-line.is-done { background: var(--green); }

.progress-bar-wrap { height: 3px; background: var(--ink2); margin-top: 26px; }
.progress-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--green-dark), var(--green), var(--yellow));
  transition: width .5s var(--ease); width: 0%;
}

/* ═══════════════════════════════════════════
   LAYOUT
═══════════════════════════════════════════ */
.main-wrap { max-width: 700px; margin: 0 auto; padding: 28px 16px 90px; }

/* ═══════════════════════════════════════════
   CARD
═══════════════════════════════════════════ */
.card {
  background: var(--white);
  border-radius: var(--r);
  box-shadow: var(--sh);
  border: 1px solid var(--border);
  overflow: hidden; display: none;
}
.card.show { display: block; animation: cardIn .3s var(--ease) both; }
@keyframes cardIn { from{opacity:0;transform:translateY(14px)} to{opacity:1;transform:translateY(0)} }

.card-head {
  display: flex; align-items: center; gap: 14px;
  padding: 22px 24px 18px; border-bottom: 1px solid var(--border);
}
.card-icon {
  width: 44px; height: 44px; flex-shrink: 0;
  border-radius: 12px; background: var(--green-pale);
  display: flex; align-items: center; justify-content: center; font-size: 1.15rem;
}
.card-title { font-family: 'Bricolage Grotesque', sans-serif; font-weight: 700; font-size: 1.05rem; color: var(--ink); }
.card-desc  { font-size: .78rem; color: var(--slate); margin-top: 2px; }
.card-body  { padding: 22px 24px 26px; }

/* ═══════════════════════════════════════════
   APPLIANCE STEP
═══════════════════════════════════════════ */
.picker-row { display: flex; gap: 9px; margin-bottom: 16px; flex-wrap: wrap; }
.sel-wrap { position: relative; flex: 1; min-width: 180px; }
.sel-wrap select {
  width: 100%; padding: 10px 36px 10px 13px;
  border: 1.5px solid var(--border); border-radius: var(--r-md);
  background: var(--white); font-size: .87rem; color: var(--ink);
  transition: border-color .2s, box-shadow .2s; cursor: pointer;
}
.sel-wrap select:focus { border-color: var(--green); box-shadow: 0 0 0 3px var(--green-glow); outline: none; }
.sel-wrap::after {
  content: '▾'; position: absolute; right: 12px; top: 50%;
  transform: translateY(-50%); color: var(--muted); font-size: .72rem; pointer-events: none;
}
.btn-add-app {
  display: flex; align-items: center; gap: 6px;
  background: var(--green); color: white;
  padding: 10px 18px; border-radius: var(--r-md);
  font-weight: 600; font-size: .84rem;
  transition: background .2s, transform .15s, box-shadow .15s; white-space: nowrap;
}
.btn-add-app:hover { background: var(--green-dark); transform: translateY(-1px); box-shadow: 0 4px 14px var(--green-glow); }

.app-grid-labels {
  display: grid;
  grid-template-columns: minmax(140px,1fr) 76px 52px 68px 80px 32px;
  gap: 7px; padding: 5px 11px;
  font-size: .67rem; font-weight: 600; color: var(--muted);
  text-transform: uppercase; letter-spacing: .07em; margin-bottom: 5px;
}
.app-rows { display: flex; flex-direction: column; gap: 7px; margin-bottom: 14px; }

.app-row {
  display: grid;
  grid-template-columns: minmax(140px,1fr) 76px 52px 68px 80px 32px;
  gap: 7px; align-items: center;
  background: var(--surface); border: 1.5px solid var(--border);
  border-radius: var(--r-md); padding: 9px 11px;
  transition: border-color .2s, background .2s;
  animation: rowIn .22s var(--ease) both;
}
@keyframes rowIn { from{opacity:0;transform:scale(.97)} to{opacity:1;transform:scale(1)} }
.app-row:hover { border-color: var(--green); background: var(--green-pale); }

/* On desktop, hide the label inside app-input-wrap (labels shown in .app-grid-labels header) */
.app-input-label { display: none; }
.app-input-wrap  { display: contents; } /* unwraps on desktop — child input flows into grid */

.app-row-name { font-size: .83rem; font-weight: 500; color: var(--ink2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.app-row input[type="number"] {
  width: 100%; padding: 6px 7px;
  border: 1.5px solid var(--border); border-radius: var(--r-sm);
  background: var(--white); font-size: .83rem; color: var(--ink); text-align: center;
  transition: border-color .2s, box-shadow .2s;
}
.app-row input[type="number"]:focus { border-color: var(--green); box-shadow: 0 0 0 3px var(--green-glow); outline: none; }
.app-row-wday { font-size: .81rem; font-weight: 600; color: var(--green-deep); text-align: right; }
.btn-remove {
  width: 30px; height: 30px; border-radius: var(--r-sm);
  display: flex; align-items: center; justify-content: center;
  color: var(--muted); transition: background .2s, color .2s;
}
.btn-remove:hover { background: var(--danger-pale); color: var(--danger); }

.total-strip {
  display: flex; align-items: center; justify-content: space-between;
  background: linear-gradient(120deg, var(--ink2), var(--ink3));
  border-radius: var(--r-md); padding: 14px 18px;
}
.total-strip-label { font-size: .8rem; color: #5A7A7C; font-weight: 500; }
.total-strip-value {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-weight: 800; font-size: 1.2rem; color: var(--yellow);
}

/* ═══════════════════════════════════════════
   FORM FIELDS
═══════════════════════════════════════════ */
.f-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; }
.f-full { grid-column: 1 / -1; }
@media (max-width: 480px) { .f-grid { grid-template-columns: 1fr; } }
.f-field { display: flex; flex-direction: column; gap: 5px; }
.f-label { font-size: .73rem; font-weight: 600; color: var(--slate); letter-spacing: .05em; text-transform: uppercase; }
.f-input, .f-select-wrap select {
  padding: 11px 14px;
  border: 1.5px solid var(--border); border-radius: var(--r-md);
  background: var(--white); font-size: .9rem; color: var(--ink);
  transition: border-color .2s, box-shadow .2s; width: 100%;
}
.f-input:focus, .f-select-wrap select:focus { border-color: var(--green); box-shadow: 0 0 0 3px var(--green-glow); outline: none; }
.f-select-wrap { position: relative; }
.f-select-wrap select { padding-right: 36px; cursor: pointer; }
.f-select-wrap::after {
  content: '▾'; position: absolute; right: 13px; top: 50%;
  transform: translateY(-50%); color: var(--muted); font-size: .72rem; pointer-events: none;
}

/* ═══════════════════════════════════════════
   TOGGLES
═══════════════════════════════════════════ */
.toggle-group { display: flex; flex-direction: column; gap: 9px; }
.toggle-card {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px 16px;
  background: var(--surface); border: 1.5px solid var(--border);
  border-radius: var(--r-md); cursor: pointer; transition: border-color .2s, background .2s;
}
.toggle-card:has(input:checked) { border-color: var(--green); background: var(--green-pale); }
.toggle-info strong { font-size: .88rem; font-weight: 600; color: var(--ink); display: block; }
.toggle-info span   { font-size: .74rem; color: var(--slate); display: block; margin-top: 1px; }
.toggle-sw {
  width: 44px; height: 24px; border-radius: 99px; background: #CBD5E1;
  cursor: pointer; flex-shrink: 0;
  -webkit-appearance: none; appearance: none; position: relative; transition: background .25s;
}
.toggle-sw::after {
  content: ''; position: absolute; left: 3px; top: 3px;
  width: 18px; height: 18px; border-radius: 50%;
  background: white; box-shadow: 0 1px 4px rgba(0,0,0,.2); transition: left .25s;
}
.toggle-sw:checked { background: var(--green); }
.toggle-sw:checked::after { left: 23px; }

/* ═══════════════════════════════════════════
   SAVINGS MODE TABS
═══════════════════════════════════════════ */
.mode-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 20px; }
.mode-btn {
  padding: 15px 14px; text-align: left;
  border: 2px solid var(--border); border-radius: var(--r-md);
  background: var(--white); cursor: pointer; transition: border-color .2s, background .2s, transform .15s;
}
.mode-btn:hover { border-color: var(--green); background: var(--green-pale); transform: translateY(-1px); }
.mode-btn.active { border-color: var(--green); background: var(--green-pale); }
.mode-btn-icon  { font-size: 1.3rem; margin-bottom: 7px; display: block; }
.mode-btn-title { font-size: .86rem; font-weight: 600; color: var(--ink); display: block; }
.mode-btn-sub   { font-size: .72rem; color: var(--slate); margin-top: 2px; display: block; }
.savings-section { display: none; }
.savings-section.show { display: block; animation: cardIn .25s var(--ease) both; }
.hint-box {
  background: var(--yellow-pale); border: 1px solid #F3D030;
  border-radius: var(--r-sm); padding: 11px 14px;
  font-size: .78rem; color: #5A4A00; margin-top: 13px; display: flex; gap: 8px;
}

/* ═══════════════════════════════════════════
   CONTACT
═══════════════════════════════════════════ */
.privacy-note {
  display: flex; gap: 10px; align-items: flex-start;
  background: var(--info-pale); border: 1px solid #BFDBFE;
  border-radius: var(--r-sm); padding: 12px 14px;
  font-size: .78rem; color: #1E40AF; margin-bottom: 18px; line-height: 1.5;
}

/* ═══════════════════════════════════════════
   NAV BUTTONS
═══════════════════════════════════════════ */
.nav-row { display: flex; gap: 10px; margin-top: 22px; }
.btn-next {
  flex: 1; padding: 13px 22px;
  background: linear-gradient(120deg, var(--green-dark), var(--green));
  color: white; font-weight: 700; font-size: .9rem;
  border-radius: var(--r-md); letter-spacing: .01em;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  box-shadow: 0 4px 18px var(--green-glow);
  transition: transform .18s, box-shadow .18s;
}
.btn-next:hover { transform: translateY(-2px); box-shadow: 0 8px 28px rgba(32,175,36,.35); }
.btn-next svg { width: 16px; height: 16px; flex-shrink: 0; }
.btn-back {
  padding: 13px 19px; border: 1.5px solid var(--border); border-radius: var(--r-md);
  color: var(--slate); font-size: .88rem; font-weight: 500;
  background: var(--white); transition: border-color .2s, color .2s;
}
.btn-back:hover { border-color: var(--slate); color: var(--ink); }

/* ═══════════════════════════════════════════
   RESULTS
═══════════════════════════════════════════ */
#results-section { display: none; }
#results-section.show { display: block; animation: cardIn .4s var(--ease) both; }

.res-hero-strip {
  background: linear-gradient(135deg, var(--ink), var(--ink3));
  border-radius: var(--r); padding: 24px; margin-bottom: 14px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 1px;
  overflow: hidden; border: 1px solid #1A2B2D;
}
.res-metric { padding: 18px 20px; position: relative; }
.res-metric::after {
  content: ''; position: absolute; right: 0; top: 15%; bottom: 15%;
  width: 1px; background: rgba(255,255,255,.07);
}
.res-metric:nth-child(2n)::after { display: none; }
.res-metric-label { font-size: .68rem; font-weight: 600; color: #456264; text-transform: uppercase; letter-spacing: .08em; margin-bottom: 7px; }
.res-metric-value {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-weight: 800; font-size: clamp(1.5rem, 4vw, 2rem); line-height: 1.1; color: var(--white);
}
.res-metric-value.yellow { color: var(--yellow); }
.res-metric-value.green  { color: #3DD640; }
.res-metric-unit { font-size: .74rem; color: #456264; margin-top: 4px; }

/* Components table */
.comp-card {
  background: var(--white); border: 1px solid var(--border);
  border-radius: var(--r); overflow: hidden; margin-bottom: 14px;
}
.comp-card-head {
  padding: 15px 20px; border-bottom: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between;
}
.comp-card-head-title {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-weight: 700; font-size: .95rem;
  display: flex; align-items: center; gap: 8px;
}
.comp-card-state-badge {
  background: var(--green-pale); color: var(--green-deep);
  padding: 2px 10px; border-radius: 99px; font-size: .72rem; font-weight: 600;
}
.comp-row {
  display: grid;
  grid-template-columns: minmax(0,1fr) 60px 60px 90px;
  gap: 8px; align-items: center;
  padding: 12px 20px; border-bottom: 1px solid var(--border);
  transition: background .18s;
}
.comp-row:last-child { border-bottom: none; }
.comp-row:hover { background: var(--surface); }
.comp-row-name { font-size: .88rem; font-weight: 500; color: var(--ink2); }
.comp-row-spec { font-size: .73rem; color: var(--slate); margin-top: 1px; }
.comp-row-qty, .comp-row-unit, .comp-row-cost {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-weight: 700; font-size: .82rem; color: var(--ink); text-align: right;
}
.comp-row-qty  { color: var(--slate); text-align: center; }
.comp-row-unit { color: var(--slate); font-size: .77rem; }
.comp-col-head {
  font-size: .65rem; font-weight: 600; color: var(--muted);
  text-transform: uppercase; letter-spacing: .06em;
  display: grid;
  grid-template-columns: minmax(0,1fr) 60px 60px 90px;
  gap: 8px; padding: 8px 20px 6px;
  border-bottom: 1px solid var(--border); background: var(--surface);
}
.comp-col-head span { text-align: right; }
.comp-col-head span:first-child { text-align: left; }
.comp-col-head span:nth-child(2) { text-align: center; }
.comp-row.total-row { background: var(--green-pale); }
.comp-row.total-row .comp-row-name { font-weight: 700; color: var(--ink); font-size: .9rem; }
.comp-row.total-row .comp-row-cost { color: var(--green-deep); font-size: 1rem; }

/* Payback visual */
.payback-card {
  background: var(--white); border: 1px solid var(--border);
  border-radius: var(--r); padding: 20px; margin-bottom: 14px;
}
.payback-card-title {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-weight: 700; font-size: .92rem; margin-bottom: 14px;
  display: flex; align-items: center; gap: 8px;
}
.payback-track {
  height: 14px; background: var(--surface); border-radius: 99px;
  overflow: hidden; margin-bottom: 10px; border: 1px solid var(--border);
}
.payback-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--green-deep), var(--green), var(--yellow));
  border-radius: 99px;
  transition: width 1.4s cubic-bezier(.22,.61,.36,1); width: 0%;
}
.payback-row { display: flex; justify-content: space-between; font-size: .72rem; color: var(--muted); }

/* Actions */
.action-row { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.btn-pdf {
  flex: 1; padding: 13px 20px; background: var(--ink); color: white;
  border-radius: var(--r-md); font-weight: 600; font-size: .88rem;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  transition: background .2s, transform .15s;
}
.btn-pdf:hover { background: var(--ink2); transform: translateY(-1px); }
.btn-pdf svg { width: 15px; height: 15px; flex-shrink: 0; }
.btn-redo {
  padding: 13px 18px; border: 1.5px solid var(--border); border-radius: var(--r-md);
  color: var(--slate); font-size: .88rem; font-weight: 500;
  background: var(--white); transition: border-color .2s, color .2s;
}
.btn-redo:hover { border-color: var(--slate); color: var(--ink); }

/* CTA */
.cta-card {
  background: linear-gradient(130deg, var(--ink2) 0%, var(--ink3) 100%);
  border-radius: var(--r); padding: 22px 24px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  border: 1px solid #1A2B2D;
}
.cta-text h3 { font-family: 'Bricolage Grotesque', sans-serif; font-weight: 700; font-size: .98rem; color: var(--white); }
.cta-text p  { font-size: .78rem; color: #5A7A7C; margin-top: 3px; }
.btn-cta {
  padding: 11px 22px; background: var(--yellow); color: var(--ink);
  border-radius: var(--r-md); font-weight: 700; font-size: .85rem;
  white-space: nowrap; transition: background .2s, transform .15s;
}
.btn-cta:hover { background: #FFE030; transform: translateY(-1px); }

/* ═══════════════════════════════════════════
   TOAST
═══════════════════════════════════════════ */
#toast {
  position: fixed; bottom: 24px; right: 24px; z-index: 9999;
  background: var(--ink); color: white;
  padding: 12px 18px; border-radius: var(--r-md); font-size: .84rem; font-weight: 500;
  box-shadow: var(--sh-lg);
  transform: translateY(70px); opacity: 0;
  transition: transform .3s var(--ease), opacity .3s var(--ease);
  max-width: 300px; pointer-events: none;
  border-left: 3px solid var(--green);
}
#toast.show { transform: translateY(0); opacity: 1; }

/* ═══════════════════════════════════════════
   RESPONSIVE — MOBILE FIRST
═══════════════════════════════════════════ */

/* ── Tablet tweaks (≤640px) ── */
@media(max-width:640px) {
  .main-wrap { padding: 16px 10px 100px; }
  .card-body  { padding: 14px 14px 20px; }
  .card-head  { padding: 14px 14px 12px; gap: 10px; }
  .card-icon  { width: 38px; height: 38px; font-size: 1rem; }
  .card-title { font-size: .95rem; }
  .card-desc  { font-size: .73rem; }

  /* Steps track — shrink connector lines and circles */
  .step-circle { width: 30px; height: 30px; font-size: .72rem; }
  .step-label  { font-size: .56rem; }
  .step-line   { width: 20px; }
  .hero-inner  { padding: 36px 0 0; }
  .hero-sub    { font-size: .82rem; margin-bottom: 26px; }

  .cta-card { flex-direction: column; }
  .action-row { flex-direction: column; }
  .btn-pdf, .btn-redo { width: 100%; justify-content: center; }

  /* Results 2-col metrics keep on tablet */
  .res-hero-strip { padding: 16px; }
  .res-metric { padding: 14px 14px; }

  /* Component table: hide unit price col, keep qty + total */
  .comp-col-head { grid-template-columns: 1fr 40px 80px; padding: 7px 14px 5px; }
  .comp-row      { grid-template-columns: 1fr 40px 80px; padding: 10px 14px; }
  /* hide unit price column (3rd span/div) */
  .comp-col-head span:nth-child(3),
  .comp-row .comp-row-unit { display: none; }

  .mode-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
  .mode-btn  { padding: 12px 10px; }
  .mode-btn-icon { font-size: 1.1rem; margin-bottom: 4px; }
  .mode-btn-title { font-size: .78rem; }
  .mode-btn-sub   { font-size: .66rem; }
}

/* ── Phone (≤480px) ── */
@media(max-width:480px) {
  /* Steps: hide labels on very small screens */
  .step-label { display: none; }
  .step-line  { width: 14px; }
  .hero h1    { font-size: 1.65rem; }

  /* Results: 1-col metrics */
  .res-hero-strip { grid-template-columns: 1fr 1fr; }

  .f-grid { grid-template-columns: 1fr; }
}

/* ── Appliance rows — MOBILE CARD LAYOUT (≤600px) ── */
@media(max-width:600px) {
  /* Hide the old desktop column label bar entirely */
  .app-grid-labels { display: none; }

  /* Each appliance becomes a mini-card with name on top */
  .app-row {
    display: grid;
    /* Name full width top row, then 3 labelled inputs + kWh + delete */
    grid-template-columns: 1fr 1fr 1fr auto auto;
    grid-template-rows: auto auto;
    gap: 6px 8px;
    padding: 11px 12px;
  }

  /* Name spans full width on row 1 */
  .app-row-name {
    grid-column: 1 / -1;
    grid-row: 1;
    font-size: .86rem;
    font-weight: 600;
    color: var(--ink);
    white-space: normal;       /* allow wrapping — no more truncation */
    overflow: visible;
    text-overflow: unset;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--border);
  }

  /* Inputs sit on row 2 */
  .app-row input[type="number"] {
    grid-row: 2;
    padding: 7px 4px;
    font-size: .8rem;
  }

  /* kWh value on row 2 */
  .app-row-wday {
    grid-row: 2;
    text-align: right;
    font-size: .78rem;
    align-self: center;
  }

  /* Delete button row 2 */
  .btn-remove {
    grid-row: 2;
    width: 28px; height: 28px;
    align-self: center;
  }

  /* Labelled input wrappers — each input gets its own label above it */
  /* We inject label wrappers via JS on mobile */
  .app-input-wrap {
    display: flex; flex-direction: column; gap: 3px; grid-row: 2;
  }
  .app-input-label {
    font-size: .6rem; font-weight: 700; color: var(--muted);
    text-transform: uppercase; letter-spacing: .06em;
    display: block;
  }
  .app-input-wrap input { width: 100%; }
}

@keyframes riseIn {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}