/* VPP Economics — Residential VPP Calculator layout */
.rc { padding: var(--space-8, 3rem) 0 var(--space-10, 4rem); }
.rc [hidden] { display: none !important; }
.rc-bar-top { display: grid; grid-template-columns: minmax(160px, 220px) minmax(220px, 1fr) minmax(140px, 180px); gap: var(--space-4); align-items: start; background: #0B1116; color: #E8EEEC; padding: var(--space-5); margin-bottom: var(--space-5); }
.rc-bar-top .calc-label { color: rgba(232,238,236,0.72); }
.rc-bar-top .calc-input, .rc-bar-top .calc-select { background: #0E161D; color: #E8EEEC; border-color: rgba(232,238,236,0.22); }
.rc-bar-top .calc-select:disabled { opacity: .55; }
.rc-bar-top .calc-field { margin: 0; }
.rc-bar-top .calc-zip-hint { grid-column: 1 / -1; margin: 0; font-size: .875rem; color: rgba(232,238,236,0.72); }
.rc-bar-top .calc-zip-hint.is-ok { color: #3DDC97; }
.rc-bar-top .calc-zip-hint.is-error { color: #F5A524; }

.rc-step { font-family: var(--font-mono); font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; color: var(--mute); margin: 0 0 var(--space-2); }
.rc-chips { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: var(--space-5); }
.rc-chip { display: inline-flex; align-items: center; gap: .5rem; font: 600 .9375rem/1 var(--font-sans, inherit); padding: .7rem 1rem; background: var(--card, #fff); border: 1px solid var(--line-strong, #C9D1D3); color: var(--ink); cursor: pointer; transition: background .15s, border-color .15s; }
.rc-chip i { width: 10px; height: 10px; display: inline-block; }
.rc-chip:hover { border-color: var(--ink); }
.rc-chip.is-on { background: var(--ink); color: #fff; border-color: var(--ink); }
.rc-chip.is-on::after { content: '✓'; font-size: .8rem; margin-left: .15rem; }
.rc-chip.is-soon { cursor: default; color: var(--mute); background: transparent; border-style: dashed; }
.rc-chip.is-soon em { font-style: normal; font-family: var(--font-mono); font-size: .625rem; letter-spacing: .08em; text-transform: uppercase; border: 1px solid currentColor; padding: .1rem .3rem; }

.rc-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 380px); gap: var(--space-6); align-items: start; }
.rc-layout > * { min-width: 0; }
.rc-panel { background: var(--card, #fff); border: 1px solid var(--line); margin-bottom: var(--space-3); }
.rc-panel.is-open { border-color: var(--ink); box-shadow: 0 6px 24px rgba(11,17,22,0.06); }
.rc-panel-head { width: 100%; display: grid; grid-template-columns: 12px minmax(0, 1fr) auto 14px; gap: var(--space-3); align-items: center; padding: var(--space-4) var(--space-5); background: none; border: 0; text-align: left; cursor: pointer; color: var(--ink); font: inherit; }
.rc-dot { width: 12px; height: 12px; display: block; }
.rc-ptext { display: flex; flex-direction: column; gap: .2rem; min-width: 0; }
.rc-ptitle { font-weight: 600; font-size: 1.0625rem; }
.rc-psum { font-size: .875rem; color: var(--mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rc-pamt { font-family: var(--font-mono); font-weight: 600; font-size: 1.125rem; }
.rc-nc { font-size: .75rem; color: var(--peak-ink, #A15F00); text-transform: uppercase; letter-spacing: .06em; }
.rc-caret { width: 10px; height: 10px; border-right: 2px solid var(--ink); border-bottom: 2px solid var(--ink); transform: rotate(45deg); margin-top: -4px; transition: transform .15s; }
.rc-panel.is-open .rc-caret { transform: rotate(-135deg); margin-top: 4px; }
.rc-panel-body { padding: 0 var(--space-5) var(--space-5); border-top: 1px solid var(--line); padding-top: var(--space-5); }
.rc-panel-body .calc-field { margin-bottom: var(--space-4); }
.rc-two { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
.rc-three { display: grid; grid-template-columns: 0.6fr 1fr 1fr; gap: var(--space-3); }
.rc-check { margin: -.25rem 0 var(--space-4); }
.rc-connect { margin: .55rem 0 0; font-size: .9375rem; }
.rc-elig { display: grid; grid-template-columns: 22px 1fr; gap: .6rem; align-items: start; font-size: .875rem; padding: .7rem .8rem; margin: -.5rem 0 .6rem; background: #F3F6F6; border-left: 3px solid var(--line-strong, #C9D1D3); }
.rc-elig.is-ok { border-left-color: #0B7F55; background: #EDF8F2; }
.rc-elig.is-check { border-left-color: #B86E00; background: #FBF4E8; }
.rc-elig.is-no { border-left-color: #B42318; background: #FCEFEE; }
.rc-ic { width: 20px; height: 20px; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: .75rem; color: #fff; background: var(--mute); }
.rc-ic.is-ok { background: #0B7F55; } .rc-ic.is-check { background: #B86E00; } .rc-ic.is-no { background: #B42318; }
.rc-pmeta { font-size: .8125rem; color: var(--mute); margin: 0 0 var(--space-3); }
.rc-pmeta .vpp-badge { margin-left: 0; margin-right: .35rem; }
.rc-adv { border-top: 1px dashed var(--line); padding-top: var(--space-3); margin-top: var(--space-3); }
.rc-adv summary { cursor: pointer; font-weight: 600; font-size: .9375rem; color: var(--signal-ink, #0B7F55); }
.rc-adv-body { padding-top: var(--space-4); }
.rc-adv .calc-hint a, .rc-elig a { color: var(--signal-ink, #0B7F55); }
.rc-panel-foot { display: flex; justify-content: space-between; align-items: center; margin-top: var(--space-4); padding-top: var(--space-3); border-top: 1px solid var(--line); }
.rc-link { background: none; border: 0; padding: 0; color: var(--mute); font: inherit; font-size: .875rem; text-decoration: underline; cursor: pointer; }
.rc-done { background: var(--ink); color: #fff; border: 0; padding: .55rem 1.1rem; font: 600 .875rem/1 inherit; cursor: pointer; }
.rc-empty { padding: var(--space-6); text-align: center; color: var(--mute); border: 1px dashed var(--line-strong, #C9D1D3); }

.rc-results { position: sticky; top: 84px; }
.rc-res { background: #0B1116; color: #E8EEEC; padding: var(--space-5); }
.rc-k { font-family: var(--font-mono); font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; color: rgba(232,238,236,0.7); margin: 0; }
.rc-total { font-family: var(--font-mono); font-size: clamp(2rem, 3.4vw, 2.75rem); font-weight: 600; color: #3DDC97; margin: .25rem 0 0; line-height: 1.1; }
.rc-sub { margin: .25rem 0 var(--space-4); font-size: .875rem; color: rgba(232,238,236,0.7); }
.rc-trio { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-2); border-top: 1px solid rgba(232,238,236,0.15); border-bottom: 1px solid rgba(232,238,236,0.15); padding: var(--space-3) 0; margin-bottom: var(--space-4); }
.rc-trio .k { display: block; font-size: .6875rem; text-transform: uppercase; letter-spacing: .06em; color: rgba(232,238,236,0.62); font-family: var(--font-mono); }
.rc-trio .v { display: block; font-family: var(--font-mono); font-weight: 600; font-size: 1.0625rem; margin-top: .2rem; }
.rc-bar { display: flex; height: 12px; background: rgba(232,238,236,0.1); margin-bottom: var(--space-3); }
.rc-bar span { display: block; height: 100%; }
.rc-devlist { list-style: none; margin: 0 0 var(--space-3); padding: 0; }
.rc-devlist li { display: grid; grid-template-columns: 10px 1fr auto; gap: .6rem; align-items: start; padding: .5rem 0; border-bottom: 1px dashed rgba(232,238,236,0.14); }
.rc-devlist i { width: 10px; height: 10px; margin-top: .35rem; }
.rc-devlist .n { font-weight: 600; font-size: .9375rem; }
.rc-devlist small { display: block; font-weight: 400; font-size: .75rem; color: rgba(232,238,236,0.62); }
.rc-devlist .v { font-family: var(--font-mono); font-weight: 600; }
.rc-note { font-size: .875rem; margin: 0 0 var(--space-3); color: #E8EEEC; }
.rc-foot { font-size: .75rem; color: rgba(232,238,236,0.6); margin: 0; }
.rc-foot a { color: #3DDC97; }

.rc-detail { margin-top: var(--space-8, 3rem); }
.rc-detail .vpp-card h2 { font-size: 1.1875rem; }
.rc-rules { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--space-4); margin-bottom: var(--space-5); }
.rc-rule { background: var(--card, #fff); border: 1px solid var(--line); padding: var(--space-5); }
.rc-rule-dev { display: flex; align-items: center; gap: .5rem; font-family: var(--font-mono); font-size: .6875rem; letter-spacing: .08em; text-transform: uppercase; color: var(--mute); margin: 0 0 .4rem; }
.rc-rule-dev i { width: 9px; height: 9px; display: inline-block; }
.rc-rule h3 { font-size: 1.0625rem; margin: 0 0 .2rem; }
.rc-rule-admin { font-size: .8125rem; color: var(--mute); margin: 0 0 var(--space-3); }
.rc-rule .vpp-rules li { grid-template-columns: 120px 1fr; }
.rc-rule .vpp-sources a { color: var(--signal-ink, #0B7F55); }
.rc-batall { background: var(--card, #fff); border: 1px solid var(--line); padding: var(--space-4) var(--space-5); margin-bottom: var(--space-5); }
.rc-batall summary { cursor: pointer; font-weight: 600; }
.rc-batall .vpp-chart { margin-top: var(--space-4); }

.rc-dock { display: none; }
@media (max-width: 980px) {
  .rc-layout { grid-template-columns: minmax(0, 1fr); }
  .rc-results { position: static; }
  .rc-bar-top { grid-template-columns: 1fr 1fr; }
  .rc-bar-top .rc-util-field { grid-column: 1 / -1; order: 3; }
  .rc-bar-top .calc-zip-hint { order: 4; }
  .rc-dock { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; background: #0B1116; color: #E8EEEC; padding: .7rem 1rem; align-items: center; justify-content: space-between; gap: 1rem; box-shadow: 0 -4px 18px rgba(0,0,0,0.25); }
  .rc-dock .k { font-family: var(--font-mono); font-size: .6875rem; text-transform: uppercase; letter-spacing: .08em; color: rgba(232,238,236,0.7); display: block; }
  .rc-dock .v { font-family: var(--font-mono); font-weight: 600; font-size: 1.25rem; color: #3DDC97; }
  .rc-dock button { background: #3DDC97; color: #0B1116; border: 0; padding: .6rem 1rem; font-weight: 600; cursor: pointer; }
  body.has-rc-dock { padding-bottom: 64px; }
}
@media (max-width: 600px) {
  .rc-two, .rc-three { grid-template-columns: 1fr; }
  .rc-three { grid-template-columns: 1fr 1fr; }
  .rc-three .calc-field:first-child { grid-column: 1 / -1; }
  .rc-panel-head { padding: var(--space-4); }
  .rc-panel-body { padding-left: var(--space-4); padding-right: var(--space-4); }
  .rc-psum { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  .rc-chip { padding: .55rem .75rem; font-size: .875rem; }
  .rc-bar-top .rc-util-field { order: 0; }
  .rc-bar-top { grid-template-columns: 1fr; }
  .rc-trio .v { font-size: .9375rem; }
}
.rc-h2 { font-size: 1.375rem; margin: var(--space-6) 0 var(--space-4); }
.rc-detail .vpp-card { margin-bottom: var(--space-5); }

/* Phase 2: EV and solar */
.rc-elig.is-info { border-left-color: #B08A00; background: #FBF7E6; }
.rc-ic.is-info { background: #B08A00; font-style: italic; font-family: Georgia, serif; }
.rc-unlock { font-size: .8125rem; color: #7A6000; background: #FBF2CC; padding: .2rem .55rem; border-radius: 999px; white-space: nowrap; }
.rc-check-inline { margin: .55rem 0 0; }
.rc-solar-progs { margin-top: var(--space-2); }
.rc-solar-progs .rc-k2 { font-family: var(--font-mono); font-size: .6875rem; letter-spacing: .08em; text-transform: uppercase; color: var(--mute); margin: 0 0 .4rem; }
.rc-solar-progs ul { list-style: none; margin: 0 0 .4rem; padding: 0; }
.rc-solar-progs li { font-size: .875rem; padding: .45rem 0; border-bottom: 1px dashed var(--line); }
.rc-solar-progs li span { display: block; color: var(--mute); font-size: .8125rem; }

/* Rounded, modern surfaces */
.rc-bar-top { border-radius: 16px; }
.rc-chip { border-radius: 999px; }
.rc-chip i, .rc-dot, .rc-devlist i, .rc-rule-dev i { border-radius: 50%; }
.rc-panel { border-radius: 14px; overflow: hidden; }
.rc-panel-head:focus-visible { outline-offset: -3px; }
.rc-elig { border-radius: 10px; }
.rc-ic { border-radius: 50%; }
.rc-done { border-radius: 999px; padding: .6rem 1.25rem; }
.rc-empty { border-radius: 14px; }
.rc-res { border-radius: 16px; }
.rc-bar { border-radius: 999px; overflow: hidden; }
.rc-rule, .rc-batall { border-radius: 14px; }
.rc-detail .vpp-card { border-radius: 16px; }
.rc-dock button { border-radius: 999px; }
@media (max-width: 980px) { .rc-dock { border-radius: 16px 16px 0 0; } }
.vpp-check input[type=checkbox] { accent-color: #0B7F55; width: 18px; height: 18px; border-radius: 4px; }
.rc-req-k { margin-top: var(--space-2); }
.rc-req .calc-field { margin-bottom: var(--space-2); }
.rc-req-hint { margin: 0 0 var(--space-4); }
.rc-reqlist { list-style: none; margin: 0 0 var(--space-3); padding: 0; display: grid; gap: .4rem; }
.rc-reqlist li { display: grid; grid-template-columns: 22px 1fr; gap: .6rem; align-items: start; font-size: .875rem; padding: .55rem .7rem; border-radius: 10px; background: #F3F6F6; }
.rc-reqlist li.is-ok { background: #EDF8F2; } .rc-reqlist li.is-check { background: #FBF4E8; } .rc-reqlist li.is-no { background: #FCEFEE; }
.rc-reqlist .rc-ic { width: 20px; height: 20px; }
@media (max-width: 600px) { .rc-req { grid-template-columns: 1fr; } .rc-req .calc-field:first-child { grid-column: auto; } }
.rc-three.rc-req { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.rc-req-hint a { color: var(--signal-ink, #0B7F55); }

/* Inverter dispatch (Phase 2b) */
.rc-spec { margin: -.25rem 0 var(--space-3); }
.rc-capnote { margin: .25rem 0 .5rem; color: #7A6000; }
.rc-disp { margin: var(--space-3) 0; padding: var(--space-3); border: 1px solid var(--line, #E1E6E8); border-radius: 14px; background: #FFFDF5; }
.rc-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .5rem; margin: .4rem 0 .75rem; }
.rc-tile { background: #fff; border: 1px solid var(--line, #E1E6E8); border-radius: 10px; padding: .55rem .65rem; display: grid; gap: .15rem; }
.rc-tile .k { font-size: .75rem; color: var(--ink-muted, #5E6870); text-transform: uppercase; letter-spacing: .04em; }
.rc-tile .v { font-family: 'IBM Plex Mono', monospace; font-size: 1.05rem; font-weight: 600; color: var(--ink, #0B1116); }
.rc-tile .s { font-size: .75rem; color: var(--ink-muted, #5E6870); line-height: 1.35; }
.rc-daychart { margin: .25rem 0 .5rem; }
.rc-daychart svg { display: block; max-width: 100%; height: auto; }
.rc-gv { list-style: none; margin: .25rem 0 .5rem; padding: 0; display: grid; gap: .45rem; }
.rc-gv li { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) auto; gap: .6rem; align-items: center; font-size: .8125rem; }
.rc-gv .n small { display: block; color: var(--ink-muted, #5E6870); font-size: .75rem; }
.rc-gv .b { height: 12px; background: #F1EEDF; border-radius: 6px; overflow: hidden; }
.rc-gv .b i { display: block; height: 100%; background: #B08A00; border-radius: 6px; }
.rc-gv .b i.is-none { width: 0; }
.rc-gv .v { font-family: 'IBM Plex Mono', monospace; font-weight: 600; white-space: nowrap; min-width: 5.5em; text-align: right; }
@media (max-width: 640px) { .rc-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } .rc-gv li { grid-template-columns: 1fr auto; } .rc-gv .b { grid-column: 1 / -1; grid-row: 2; } }
@media (max-width: 640px) { .rc-three.rc-req { grid-template-columns: 1fr; } }
