.rain-garden-page { color: #20352d; background: #f1f0ea; }
.rain-garden-page .page-shell { width: min(1120px, calc(100% - 28px)); }
.rg-main { padding-top: 4px; }
.rg-crumb { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; color: #52665a; font-size: .86rem; }
.rg-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(190px, 240px); align-items: end; gap: 20px; border-top: 4px solid #20352d; padding: 17px 0 19px; }
.rg-eyebrow, .rg-result-kicker { margin: 0 0 7px; color: #98502f; font-size: .68rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
.rg-hero h1 { max-width: 23ch; margin: 0 0 9px; font-size: clamp(1.95rem, 4vw, 3.05rem); line-height: 1.08; letter-spacing: -.035em; text-wrap: balance; }
.rg-lead { max-width: 68ch; margin: 0; color: #496352; font-size: 1rem; line-height: 1.55; }
.rg-local-note { display: grid; gap: 5px; margin: 0; border-left: 2px solid #b55132; padding: 8px 0 8px 12px; color: #496352; font-size: .78rem; line-height: 1.4; }
.rg-local-note strong { color: #20352d; font-size: .86rem; }
.rg-example-banner { margin: 0 0 15px; border-left: 3px solid #af6e2f; padding: 10px 13px; background: #f4e9d7; color: #493a28; font-size: .86rem; line-height: 1.45; }
.rg-workspace { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); align-items: start; gap: 18px; scroll-margin-top: 20px; }
.rg-result, #rg-form { min-width: 0; padding: clamp(16px, 2vw, 22px); }
.rg-result { position: sticky; top: 18px; border: 1px solid #b4c7b5; border-top: 5px solid #315f42; background: #e8eee5; }
#rg-form { border: 1px solid #cbd5cb; background: #fffefa; }
.rg-result h2, #rg-form h2 { margin: 0 0 7px; color: #20352d; font: 400 1.45rem/1.2 Georgia, 'Times New Roman', serif; letter-spacing: -.02em; }
.rg-status, .rg-copy-status, .rg-boundary { color: #52665a; font-size: .79rem; line-height: 1.45; }
.rg-status { min-height: 2.2em; margin: 7px 0 10px; }
.rg-total { padding: 11px 0; border-top: 1px solid #aec5af; border-bottom: 1px solid #aec5af; }
.rg-total span, .rg-total small { display: block; color: #49604d; line-height: 1.4; }
.rg-total span { font-size: .75rem; }
.rg-total strong { display: block; margin: 4px 0; color: #20352d; font-size: clamp(1.65rem, 3vw, 2.15rem); line-height: 1.1; letter-spacing: -.03em; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.rg-total small { font-size: .72rem; }
.rg-results { display: grid; gap: 7px; margin: 11px 0 13px; }
.rg-result-line { min-width: 0; padding: 9px 10px; border-left: 2px solid #315f42; background: #f5f7f1; }
.rg-result-line h3 { margin: 0 0 3px; color: #20352d; font-size: .89rem; line-height: 1.3; overflow-wrap: anywhere; }
.rg-result-meta { margin: 0 0 5px; color: #596d60; font-size: .69rem; line-height: 1.4; }
.rg-result-volume { color: #20352d; font-size: .82rem; font-weight: 750; font-variant-numeric: tabular-nums; }
.rg-order-items { display: grid; gap: 4px; margin: 7px 0 0; padding: 0; list-style: none; }
.rg-order-items li { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 6px; border-top: 1px dotted #c3cec2; padding-top: 5px; color: #43584a; font-size: .7rem; line-height: 1.4; }
.rg-order-items span:last-child { font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }
.rg-button { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 9px 13px; border: 1px solid #728e78; border-radius: 3px; background: #fffefa; color: #20352d; font: inherit; font-size: .85rem; font-weight: 700; text-align: center; cursor: pointer; touch-action: manipulation; }
.rg-button:hover { background: #dae4d5; }
.rg-primary { width: 100%; border-color: #20352d; background: #20352d; color: #fffefa; text-align: left; }
.rg-primary:hover { background: #315f42; }
.rg-primary:disabled { cursor: not-allowed; opacity: .58; }
.rg-copy-status { min-height: 1em; margin: 5px 0 0; }
#rg-copy-fallback { width: 100%; margin-top: 6px; border: 1px solid #92ac9a; padding: 8px; background: #fff; color: #20352d; font: .8rem/1.45 'Segoe UI', Arial, sans-serif; }
.rg-boundary { margin: 10px 0 0; font-size: .68rem; }
.rg-form-heading { display: flex; align-items: start; justify-content: space-between; gap: 12px; }
.rg-form-heading p { margin: 0; color: #596d60; font-size: .78rem; line-height: 1.4; }
.rg-unit-field { display: grid; gap: 3px; min-width: 118px; color: #20352d; font-size: .72rem; font-weight: 750; }
.rain-garden-page :is(input, select) { width: 100%; min-width: 0; min-height: 43px; margin-top: 5px; padding: 7px 9px; border: 1px solid #92ac9a; border-radius: 3px; background: #fff; color: #20352d; font: inherit; font-size: .85rem; font-variant-numeric: tabular-nums; }
.rg-form-note { margin: 10px 0 13px; color: #596d60; font-size: .75rem; line-height: 1.45; }
.rg-rows { display: grid; gap: 9px; }
.rg-row { min-width: 0; border: 1px solid #cbd5cb; padding: 11px; background: #fbfcf8; }
.rg-row-head { display: flex; align-items: center; justify-content: space-between; gap: 9px; margin-bottom: 8px; }
.rg-row-head strong { color: #20352d; font-size: .86rem; }
.rg-remove { min-height: 36px; padding: 5px 9px; font-size: .75rem; }
.rg-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .8fr); gap: 8px; }
.rg-grid label, .rg-component label { display: flex; flex-direction: column; min-width: 0; color: #20352d; font-size: .75rem; font-weight: 700; }
.rg-grid small, .rg-component small { margin-top: 3px; color: #596d60; font-size: .67rem; font-weight: 450; line-height: 1.35; }
.rg-component-toggle { display: flex; align-items: start; gap: 7px; margin-top: 9px; border-top: 1px solid #d5ddd4; padding-top: 9px; color: #20352d; font-size: .75rem; font-weight: 700; line-height: 1.4; }
.rg-component-toggle input { flex: 0 0 18px; width: 18px; min-height: 18px; margin: 1px 0 0; accent-color: #315f42; }
.rg-components { margin-top: 6px; border: 0; border-left: 2px solid #af6e2f; padding: 7px 0 0 9px; }
.rg-components > p { margin: 0 0 6px; color: #596d60; font-size: .68rem; line-height: 1.4; }
.rg-component-list { display: grid; gap: 7px; }
.rg-component { min-width: 0; padding: 8px; background: #f2eee4; }
.rg-component-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(58px, .65fr) minmax(74px, .8fr); gap: 7px; }
.rg-component-head { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-bottom: 5px; color: #49604d; font-size: .68rem; font-weight: 750; }
.rg-mini-remove { min-height: 32px; padding: 3px 7px; font-size: .68rem; }
.rg-component-actions { margin-top: 7px; }
.rg-component-actions .rg-button { min-height: 38px; font-size: .74rem; }
.rg-form-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.rg-secondary { border-color: #c1c9bc; background: #f1eee4; }
.rg-formula { display: grid; gap: 3px; margin: 13px 0 0; border-top: 1px solid #cad5cc; padding-top: 10px; color: #52665a; font-size: .72rem; line-height: 1.45; }
.rg-error { margin: 11px 0 0; border-left: 3px solid #963d27; padding: 9px 11px; background: #fff2ed; color: #752e1d; font-size: .78rem; line-height: 1.4; }
.rg-figure { max-width: 1000px; margin: 26px auto 30px; }
.rg-figure img { display: block; width: 100%; height: auto; border: 1px solid #c5d1c5; background: #fffefa; }
.rg-figure figcaption { margin-top: 7px; color: #52665a; font-size: .75rem; line-height: 1.45; text-align: center; }
.rg-section { max-width: 80ch; margin: 28px auto; }
.rg-section h2 { margin: 0 0 9px; color: #20352d; font: 400 clamp(1.35rem, 3vw, 1.8rem)/1.2 Georgia, 'Times New Roman', serif; }
.rg-section p { margin: 9px 0; color: #49604d; font-size: .88rem; line-height: 1.65; }
.rg-sources { border-top: 1px solid #cbd5cb; padding-top: 10px; font-size: .78rem !important; }
.rg-faq details { border-top: 1px solid #c1d0c0; padding: 11px 0; }
.rg-faq details:last-child { border-bottom: 1px solid #c1d0c0; }
.rg-faq summary { color: #194d39; font-size: .86rem; font-weight: 750; line-height: 1.4; cursor: pointer; }
.rg-faq details p { margin: 6px 0 0; font-size: .82rem; }
.rg-related { display: flex; flex-wrap: wrap; gap: 10px 20px; border-top: 1px solid #b9cbbd; padding: 17px 0; }
.rg-related a { color: #194d39; font-size: .84rem; font-weight: 700; text-underline-offset: 3px; }
.rg-skip { position: absolute; z-index: 1000; top: -80px; left: 12px; min-height: 44px; padding: 12px 16px; background: #20352d; color: #fff; text-decoration: none; }
.rg-skip:focus { top: 12px; }
.rain-garden-page :is(a, button, input, select, summary, textarea):focus-visible { outline: 3px solid #af6e2f; outline-offset: 3px; }
.rain-garden-page [hidden] { display: none !important; }
@media (max-width: 760px) {
  .rg-workspace { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .rg-result { position: static; grid-row: 1; }
  #rg-form { grid-row: 2; }
  .rg-hero { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .rg-local-note { max-width: 100%; }
}
@media (max-width: 560px) {
  .rain-garden-page .site-header { padding: 14px 10px 8px; }
  .rain-garden-page .site-nav { display: grid; width: 100%; min-width: 0; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 3px; }
  .rain-garden-page .site-nav a { min-width: 0; min-height: 40px; padding: 5px 1px; font-size: 11px; line-height: 1.15; text-align: center; white-space: normal; overflow-wrap: anywhere; }
  .rg-main { padding-top: 2px; }
  .rg-hero { padding: 13px 0 15px; }
  .rg-lead { font-size: .91rem; }
  .rg-result, #rg-form { padding: 14px; }
  .rg-form-heading { flex-direction: column; align-items: stretch; }
  .rg-unit-field { width: 100%; }
  .rg-form-actions { flex-direction: column; align-items: stretch; }
  .rg-form-actions .rg-button { width: 100%; }
  .rg-figure { margin: 21px auto 25px; }
  .rg-section { margin: 24px 0; }
  .rg-result h2, #rg-form h2 { font-size: 1.28rem; }
}
@media (max-width: 390px) {
  .rain-garden-page .page-shell { width: calc(100% - 20px); }
  .rg-component-grid { grid-template-columns: minmax(0, 1fr) minmax(64px, .7fr); }
  .rg-component-grid label:last-child { grid-column: 1 / -1; }
  .rg-component { padding: 7px; }
  .rg-order-items li { grid-template-columns: minmax(0, 1fr) minmax(90px, .8fr); }
}
@media print {
  .rain-garden-page .site-header, .rain-garden-page .site-footer, .rg-hero, #rg-form, .rg-figure, .rg-section, .rg-related, #rg-copy, .rg-example-banner { display: none; }
  .rg-workspace { display: block; }
  .rg-result { position: static; background: #fff; border: 0; }
}