/* Presentation only. Calculator state, formulas, SVG coordinates and PNG exports
   stay in the original components. Keep this stylesheet after tools-components. */
#tool-root { min-width: 0; scroll-margin-top: 24px; }
#tool-root * { min-width: 0; }
#tool-root input, #tool-root select { font-size: 16px; max-width: 100%; accent-color: var(--teal); }
#tool-root button { font-size: 14px; min-height: 44px; line-height: 1.5; }
#tool-root :is(button, a, input, select):focus-visible { outline: 3px solid #b87a24; outline-offset: 3px; }
#tool-root :is(button, input, select):disabled { cursor: not-allowed; }
#tool-root .button { min-height: 46px; padding: 10px 18px; font-size: 14px; border-radius: 9px; text-decoration: none; box-shadow: none; font-weight: 600; }
#tool-root .button--primary { background: var(--teal); color: #fff; border: 1px solid var(--teal); }
#tool-root .button--primary:hover { transform: none; background: var(--teal-hover); }
#tool-root .button--ghost { background: white; color: var(--ink); border: 1px solid var(--border); }
#tool-root .button--ghost:hover { background: var(--bg); border-color: var(--teal); }
#tool-root .special-workspace { border-radius: 12px; border-color: var(--border); box-shadow: 0 3px 15px #173e3905; background: white; overflow: hidden; }
#tool-root .special-workspace__header { padding: 22px 26px; gap: 14px 20px; background: white; border-bottom: 1px solid var(--border); flex-wrap: wrap; }
#tool-root .special-workspace__header strong { font-size: 16px; color: var(--ink); }
#tool-root .special-workspace__header span { font-size: 13px; color: var(--muted); line-height: 1.7; }
#tool-root .special-workspace__header > div:first-child { flex: 1 1 240px; }
#tool-root .special-workspace__header .choice-row { flex: 0 1 auto; }
#tool-root .special-workspace__footer { padding: 18px 26px; border-top: 1px solid var(--border); background: var(--bg); }
#tool-root .aqua-related-link { display: inline-flex; align-items: center; min-height: 44px; font-size: 13px !important; border: 1px solid var(--border); border-radius: 9px; padding: 9px 12px; text-decoration: none; color: var(--teal) !important; }
#tool-root .eyebrow { font-size: 14px; letter-spacing: 0; color: var(--teal); margin: 0 0 12px; font-weight: 600; }
#tool-root .choice-row { gap: 7px; }
#tool-root .choice-row button { border-color: var(--border); color: var(--muted); border-radius: 9px; }
#tool-root :is(.choice-row button, .layout-segmented button).active { background: var(--teal); color: white; border-color: var(--teal); box-shadow: none; }
#tool-root .finance-input { height: 50px; border: 1px solid var(--border); border-radius: 9px; background: white; }
#tool-root .finance-input:focus-within { border-color: var(--teal); box-shadow: 0 0 0 3px #12736814; }
#tool-root .finance-input input { color: var(--ink); background: transparent; font-size: 16px; font-variant-numeric: tabular-nums; }
#tool-root .finance-input b { font-size: 13px; color: var(--muted); }
#tool-root .finance-input select { background: var(--bg); color: var(--ink); border-color: var(--border); }
#tool-root .finance-field > span { font-size: 14px; font-weight: 500; color: var(--ink); }
#tool-root .aquarium-section-heading { align-items: flex-start; flex-wrap: wrap; gap: 7px 12px; }
#tool-root .aquarium-section-heading strong { font-size: 16px; color: var(--ink); }
#tool-root .aquarium-section-heading span { font-size: 12px; text-align: left; color: var(--muted); }
#tool-root .aquarium-select { font-size: 16px !important; }
#tool-root :is(.aquarium-body, .aqua-tool-body, .aqua-electric-body) { grid-template-columns: minmax(0,1.1fr) minmax(0,1fr); min-height: 0; }
#tool-root :is(.aquarium-controls, .aqua-tool-controls, .aqua-electric-controls, .creative-aqua-controls, .layout-controls) { padding: 26px; border-color: var(--border); background: white; }
#tool-root :is(.aquarium-result, .aqua-tool-result, .creative-aqua-result, .layout-stage-wrap) { background: #f0f5ed; padding: 26px; }
#tool-root :is(.aquarium-main-result, .aqua-main-result, .nitrate-main-result, .guppy-main-result) { background: var(--pale); border: 1px solid #d3e1d0; border-radius: 12px; color: var(--ink); padding: 24px; }
#tool-root :is(.aquarium-main-result, .aqua-main-result, .guppy-main-result) span { font-size: 14px; color: var(--teal); }
#tool-root :is(.aquarium-main-result, .aqua-main-result, .guppy-main-result) strong { color: var(--ink); font-size: clamp(30px,4vw,44px); letter-spacing: -1px; line-height: 1.3; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
#tool-root :is(.aquarium-main-result, .aqua-main-result, .guppy-main-result) small { color: #526952; font-size: 13px; line-height: 1.7; }
#tool-root :is(.aquarium-stats, .aqua-stat-grid) { gap: 12px; }
#tool-root :is(.aquarium-stats, .aqua-stat-grid) > div { min-height: 96px; padding: 16px; border-color: var(--border); border-radius: 10px; }
#tool-root :is(.aquarium-stats, .aqua-stat-grid, .aquarium-equipment-cards) span { color: var(--muted); font-size: 13px; }
#tool-root :is(.aquarium-stats, .aqua-stat-grid) strong { color: var(--ink); font-size: 19px; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
#tool-root :is(.finance-note, .aquarium-disclaimer, .creative-disclaimer) { font-size: 13px; line-height: 1.85; color: var(--muted); }
#tool-root :is(.aquarium-note, .nitrate-formula-note) { background: var(--pale); border-radius: 10px; }
#tool-root :is(.aquarium-note, .nitrate-formula-note) strong { color: var(--teal); font-size: 14px; }
#tool-root :is(.aquarium-note, .nitrate-formula-note) p { color: var(--muted); line-height: 1.85; font-size: 13px; }
#tool-root .aquarium-recommendations { border-color: var(--border); }
#tool-root .aquarium-recommendations__controls { border-color: var(--border); padding: 26px; }
#tool-root .aquarium-equipment-cards { padding: 26px; background: #f0f5ed; gap: 12px; }
#tool-root .aquarium-equipment-cards > div { border-color: var(--border); border-radius: 10px; }
#tool-root .aquarium-equipment-cards strong { color: var(--ink); }
#tool-root .aquarium-equipment-cards p { color: var(--muted); font-size: 13px; }
#tool-root .aquarium-disclaimer { background: var(--bg); border-color: var(--border); padding: 18px 26px; }
#tool-root .aquarium-method { border-color: var(--border); padding: 18px 26px; }
#tool-root .aquarium-method p { color: var(--muted); }
#tool-root .aquarium-method dl > div { border-color: var(--border); }
#tool-root .aqua-dose-row { grid-template-columns: 1fr auto 1fr; }
#tool-root .aqua-dose-row > span { color: var(--muted); font-size: 13px; }
#tool-root .aqua-result-heading { flex-wrap: wrap; align-items: center; }
#tool-root :is(.aqua-result-heading button, .creative-result-heading > button) { border-color: var(--border); border-radius: 9px; color: var(--teal); background: white; padding: 9px 12px; }
#tool-root :is(.aqua-mix-card, .aqua-bag-result) { background: white; border-color: var(--border); border-radius: 10px; }
#tool-root :is(.aqua-mix-card, .aqua-bag-result) span { color: var(--teal); }
#tool-root :is(.aqua-mix-card, .aqua-bag-result) strong { color: var(--ink); }
#tool-root :is(.aqua-mix-card, .aqua-bag-result) p { color: var(--muted); font-size: 13px; }
/* Cautions keep a distinct warm surface rather than looking like a result. */
#tool-root .aqua-caution { background: #fff8e9; color: #78613d; font-size: 13px; line-height: 1.85; border-radius: 10px; }
#tool-root .nitrate-caution--strong { background: #fff0ed; color: #8a4f44; }
#tool-root .nitrate-header { border-top: 0; }
#tool-root .nitrate-series { border-color: var(--border); border-radius: 10px; }
#tool-root .nitrate-series__heading { flex-wrap: wrap; }
#tool-root .nitrate-series__heading strong { color: var(--ink); }
#tool-root .nitrate-series__heading span { color: var(--muted); font-size: 12px; }
#tool-root .nitrate-series__row { grid-template-columns: 42px minmax(0,1fr) 80px; }
#tool-root .nitrate-series__row > span, #tool-root .nitrate-series__row > strong { font-size: 13px; color: var(--muted); }
#tool-root .nitrate-series__row i { background: var(--pale); }
#tool-root .nitrate-series__row i b { background: var(--teal); }
#tool-root .nitrate-series__row i b.is-target { background: #4a8155; }
#tool-root .aqua-slope-guide { border-color: var(--border); background: var(--bg); border-radius: 10px; }
#tool-root .aqua-slope-guide > div { border-color: #b7c9b5; background: linear-gradient(var(--bg) 92%, var(--pale) 92%); }
#tool-root .aqua-slope-guide p { color: var(--muted); font-size: 13px; }
#tool-root .aqua-electric-settings { grid-template-columns: 1fr 1fr; border-color: var(--border); }
#tool-root .aqua-electric-settings > .button { grid-column: 1/-1; justify-self: start; }
#tool-root .aqua-equipment-table { border-color: var(--border); border-radius: 10px; overflow-x: auto; }
#tool-root .aqua-equipment-row { grid-template-columns: minmax(90px,1fr) 60px 68px 44px 44px; gap: 6px; border-color: #e9efe5; }
#tool-root .aqua-equipment-row input { padding: 7px 5px; font-size: 14px; height: 44px; background: white; color: var(--ink); border-color: var(--border); }
#tool-root .aqua-equipment-row input:focus { border-color: var(--teal); box-shadow: 0 0 0 3px #12736814; }
#tool-root .aqua-equipment-row > button { width: 44px; height: 44px; border-radius: 8px; background: var(--bg); color: #8a4f44; }
#tool-root .aqua-equipment-row--head { font-size: 12px; background: var(--bg); color: var(--muted); }
#tool-root .aqua-equipment-heading { align-items: flex-start; }
#tool-root .aqua-equipment-heading > div { flex: 1; }
#tool-root .aqua-equipment-heading span { font-size: 13px; color: var(--muted); }
#tool-root .aqua-equipment-heading button { flex-shrink: 0; font-size: 13px; color: var(--teal); border-color: var(--border); }
#tool-root .aqua-cost-breakdown { border-color: var(--border); border-radius: 10px; }
#tool-root .aqua-cost-breakdown > div { font-size: 13px; color: var(--muted); grid-template-columns: minmax(65px,1fr) minmax(30px,1fr) auto; }
#tool-root .aqua-cost-breakdown i { background: var(--pale); }
#tool-root .aqua-cost-breakdown em { color: var(--ink); }
#tool-root .aqua-header-badge, #tool-root .creative-aqua-badge { background: var(--pale); color: var(--teal) !important; font-size: 11px !important; border: 0; border-radius: 6px; padding: 6px 9px; white-space: nowrap; }
#tool-root .creative-field { font-size: 14px; font-weight: 500; color: var(--ink); }
#tool-root .creative-field > div, #tool-root .creative-field input, #tool-root .creative-field select { border-color: var(--border); border-radius: 9px; color: var(--ink); }
#tool-root .creative-field > div b { font-size: 13px; color: var(--muted); }
#tool-root .creative-field input:focus, #tool-root .creative-field select:focus, #tool-root .creative-field > div:focus-within { border-color: var(--teal); box-shadow: 0 0 0 3px #12736814; }
#tool-root .creative-field > div input:focus { box-shadow: none; }
#tool-root .creative-field-grid--3, #tool-root .creative-field-grid--4 { grid-template-columns: repeat(2,minmax(0,1fr)); }
#tool-root .creative-photo-input { border-color: #acbfa7; border-radius: 9px; background: var(--bg); }
#tool-root .creative-photo-input span { color: var(--muted); }
#tool-root .creative-photo-input b { color: var(--teal); }
#tool-root .creative-photo-input:focus-within { outline: 3px solid #b87a24; outline-offset: 3px; }
#tool-root .creative-result-heading { flex-wrap: wrap; }
#tool-root .creative-result-heading strong { font-size: 16px; color: var(--ink); }
#tool-root .creative-result-heading span { font-size: 12px; color: var(--muted); }
#tool-root .creative-formula-note, #tool-root .creative-insight { border-color: var(--border); border-radius: 10px; }
#tool-root .creative-formula-note strong, #tool-root .creative-insight strong { color: var(--ink); }
#tool-root .creative-formula-note p, #tool-root .creative-insight p { font-size: 13px; line-height: 1.85; color: var(--muted); }
#tool-root .creative-actions { flex-wrap: wrap; }
#tool-root .tank-profile-card { aspect-ratio: auto; min-height: 340px; grid-template-columns: 34% minmax(0,1fr); border-color: var(--border); border-radius: 10px; }
#tool-root .tank-profile-card__body { padding: 18px; }
#tool-root .tank-profile-card__body h2 { font-size: 23px; line-height: 1.5; }
#tool-root .tank-profile-card__body > small { font-size: 11px; }
#tool-root .tank-profile-card__body > p { font-size: 13px; }
#tool-root .tank-profile-card__body dl div { grid-template-columns: 66px minmax(0,1fr); gap: 6px; }
#tool-root .tank-profile-card__body dt, #tool-root .tank-profile-card__body dd { font-size: 13px; }
#tool-root .tank-profile-card__body footer { font-size: 11px; gap: 8px; flex-wrap: wrap; }
/* Preserve the blue/orange plan colors: they correspond to inline SVG series. */
#tool-root .water-plan-editor { border-color: var(--border); border-left-color: #236f86; border-radius: 10px; background: var(--bg); }
#tool-root .water-plan-editor--b { border-left-color: #d27a52; }
#tool-root .water-plan-editor > strong { color: var(--ink); }
#tool-root .water-chart-legend { color: var(--muted); font-size: 13px; flex-wrap: wrap; }
#tool-root .water-timeline-chart { border-color: var(--border); border-radius: 10px; }
#tool-root .water-plan-results article { border-color: var(--border); border-radius: 10px; }
#tool-root .water-plan-results strong { color: var(--ink); font-size: 20px; }
#tool-root .water-plan-results span, #tool-root .water-plan-results small { color: var(--muted); font-size: 13px; }
#tool-root .layout-body { grid-template-columns: minmax(300px,.72fr) minmax(0,1.28fr); }
#tool-root .layout-segmented { background: var(--bg); border-color: var(--border); border-radius: 9px; gap: 3px; }
#tool-root .layout-segmented button { color: var(--muted); border-radius: 7px; }
#tool-root .layout-view-note { background: var(--pale); border-color: var(--teal); border-radius: 0 8px 8px 0; color: var(--muted); }
#tool-root .layout-view-note strong { color: var(--ink); }
#tool-root .layout-add > strong, #tool-root .layout-item-list > strong { color: var(--ink); }
#tool-root .layout-add button { border-color: var(--border); color: var(--teal); border-radius: 8px; }
#tool-root .layout-item-list > button { border-color: var(--border); border-radius: 9px; color: var(--ink); }
#tool-root .layout-item-list > button.active { background: var(--pale); border-color: var(--teal); }
#tool-root .layout-item-list span { font-size: 14px; }
#tool-root .layout-item-list small { font-size: 12px; color: var(--muted); }
#tool-root .layout-selected { border-color: var(--border); }
#tool-root .layout-selected > div:first-child strong { color: var(--ink); }
#tool-root .layout-stage { border-color: var(--border); border-radius: 10px; }
#tool-root .layout-scale { color: var(--muted); }
#tool-root .layout-scale i { background: var(--border); }
#tool-root .guppy-timeline > div { grid-template-columns: 45px minmax(0,1fr) 80px 65px; }
#tool-root .guppy-timeline span, #tool-root .guppy-timeline small, #tool-root .guppy-timeline strong { font-size: 13px; color: var(--muted); }
#tool-root .guppy-timeline strong { color: var(--ink); }
#tool-root .guppy-timeline i { background: var(--pale); }
#tool-root .guppy-timeline i b { background: var(--teal); }
@media (max-width: 1050px) {
  #tool-root :is(.aquarium-body, .aqua-tool-body, .aqua-electric-body, .creative-aqua-split, .creative-aqua-split--timeline, .layout-body) { grid-template-columns: 1fr; }
  #tool-root :is(.aquarium-controls, .aqua-tool-controls, .aqua-electric-controls, .creative-aqua-controls, .layout-controls) { border-right: 0; border-bottom: 1px solid var(--border); }
  #tool-root .aquarium-recommendations { grid-template-columns: 1fr; }
  #tool-root .aquarium-recommendations__controls { border-right: 0; border-bottom: 1px solid var(--border); }
  #tool-root .aquarium-guide-fields { grid-template-columns: 1fr 1fr; }
  #tool-root .aqua-equipment-row { grid-template-columns: minmax(100px,1fr) 80px 90px 65px 44px; }
  #tool-root .aqua-equipment-row input { font-size: 16px; }
  #tool-root .tank-profile-card { max-width: 680px; width: 100%; margin: auto; }
}
@media (max-width: 600px) {
  #tool-root :is(.aquarium-controls, .aquarium-result, .aqua-tool-controls, .aqua-tool-result, .aqua-electric-controls, .creative-aqua-controls, .creative-aqua-result, .layout-controls, .layout-stage-wrap, .aquarium-recommendations__controls, .aquarium-equipment-cards) { padding: 20px; }
  #tool-root .special-workspace__header { padding: 18px 20px; gap: 12px; }
  #tool-root .special-workspace__header > div:first-child { flex-basis: 100%; }
  #tool-root .special-workspace__footer, #tool-root .aquarium-disclaimer, #tool-root .aquarium-method { padding: 16px 20px; }
  #tool-root :is(.aquarium-dimensions, .aqua-field-grid, .aqua-field-grid--three, .creative-field-grid, .creative-field-grid--2, .creative-field-grid--3, .creative-field-grid--4, .aquarium-guide-fields, .aqua-electric-settings, .water-plan-results) { grid-template-columns: 1fr; }
  #tool-root .finance-input, #tool-root .creative-field input, #tool-root .creative-field select, #tool-root .creative-field > div { height: 50px; }
  #tool-root .creative-field > div input { height: auto; }
  #tool-root .aquarium-equipment-cards { grid-template-columns: 1fr; }
  #tool-root .aqua-dose-row { grid-template-columns: 1fr; gap: 8px; }
  #tool-root .aqua-dose-row > span { padding: 0; }
  #tool-root .aqua-equipment-row { min-width: 440px; }
  #tool-root .aqua-equipment-heading { flex-wrap: wrap; }
  #tool-root .aqua-equipment-heading > div { flex-basis: 100%; }
  #tool-root .aqua-cost-breakdown > div { grid-template-columns: minmax(60px,1fr) minmax(25px,.7fr) auto; gap: 7px; }
  #tool-root .tank-profile-card { grid-template-columns: 1fr; }
  #tool-root .tank-profile-card__photo { min-height: 190px; }
  #tool-root .tank-profile-card__body { padding: 20px; min-height: 320px; }
  #tool-root .tank-profile-card__body dl div { grid-template-columns: 75px minmax(0,1fr); }
  #tool-root .water-timeline-chart { margin-inline: 0; overflow-x: auto; }
  #tool-root .water-timeline-chart svg { min-width: 560px; }
  #tool-root .guppy-timeline > div { grid-template-columns: 40px minmax(0,1fr) 75px; gap: 6px; }
  #tool-root .guppy-timeline small { display: none; }
  #tool-root .creative-actions { display: flex; }
  #tool-root .creative-actions .button { flex: 1 1 140px; }
  #tool-root :is(.aqua-main-result, .aquarium-main-result, .guppy-main-result) { padding: 20px; }
  #tool-root :is(.aqua-stat-grid, .aquarium-stats) { gap: 9px; }
  #tool-root :is(.aqua-stat-grid, .aquarium-stats) > div { padding: 13px; }
  #tool-root :is(.aqua-stat-grid, .aquarium-stats) strong { font-size: 18px; }
  #tool-root .layout-stage { padding: 8px; }
}
@media (max-width: 380px) {
  #tool-root .aqua-stat-grid, #tool-root .aquarium-stats { grid-template-columns: 1fr; }
  #tool-root :is(.aquarium-controls, .aquarium-result, .aqua-tool-controls, .aqua-tool-result, .aqua-electric-controls, .creative-aqua-controls, .creative-aqua-result, .layout-controls, .layout-stage-wrap) { padding: 16px; }
  #tool-root .nitrate-series { padding: 13px; }
  #tool-root .nitrate-series__row { grid-template-columns: 32px minmax(0,1fr) 70px; gap: 6px; }
}