/* Shared presentation for the three calculators. Keep source formulas in their scripts. */
.native-tool.forecast-tool { padding: 2.25rem 0 3rem; background: #f2f6f6; color: #183d49; font-size: 1rem; line-height: 1.5; }
.forecast-tool *, .forecast-tool *::before, .forecast-tool *::after { box-sizing: border-box; }
.native-tool.forecast-tool :is(.native-tool__content,.forecast-nav,.forecast-footer) { width: min(1100px, calc(100% - 2rem)); margin-inline: auto; }
.native-tool.forecast-tool .forecast-nav { display: flex; gap: .4rem; flex-wrap: wrap; padding: 0 0 1.5rem; }
.native-tool.forecast-tool .forecast-nav a { padding: .65rem 1rem; min-height: 44px; border: 1px solid #c9d8dd; border-radius: 8px; text-decoration: none; font: 600 1rem var(--kh-font-body,sans-serif); background: #fff; }
.native-tool.forecast-tool .forecast-nav a[aria-current] { background: #075c70; border-color: #075c70; color: #fff; }
.native-tool.forecast-tool :is(.wrap,.kh-uy) { width: 100%; margin: 0; }
.native-tool.forecast-tool :is(.hero,.forecast-intro) { padding: 0 0 1.5rem; background: none; color: inherit; }
:root body main .native-tool.forecast-tool :is(h1,h1[id]) { font-size: clamp(2rem,4vw,3rem); line-height: 1.12; margin: .35rem 0 .75rem; letter-spacing: 0; }
:root body main .native-tool.forecast-tool :is(h2,h2[id],h3) { font: 700 1.2rem/1.3 var(--kh-font-body,sans-serif); margin: 0 0 .6rem; letter-spacing: 0; }
.native-tool.forecast-tool p { margin: .5rem 0; }
.native-tool.forecast-tool :is(.subtitle,.sub) { max-width: 70ch; font-size: 1.1rem; color: #435f69; }
.native-tool.forecast-tool .eyebrow { font: 700 .8rem/1.4 var(--kh-font-body,sans-serif); letter-spacing: .09em; text-transform: uppercase; color: #086778; }
.native-tool.forecast-tool .unit-guide { color: #435f69; font-size: .95rem; margin-top: .8rem; }
.native-tool.forecast-tool :is(.grid,.two,.calc-result) { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 1rem; }
.native-tool.forecast-tool .summary-grid { grid-template-columns: repeat(4,minmax(0,1fr)); margin-top: 1.25rem; }
.native-tool.forecast-tool :is(.card,.summary,.result-box) { min-width: 0; padding: 1.35rem; border: 1px solid #ccdade; border-radius: 12px; background: #fff; box-shadow: none; }
.native-tool.forecast-tool :is(.card.wide,.wide) { grid-column: 1 / -1; }
.native-tool.forecast-tool :is(.forecast-result,.result-box) { background: #eaf5f6; border-color: #9bc4cc; }
.native-tool.forecast-tool .forecast-result { border-top: 4px solid #08758a; }
.native-tool.forecast-tool .summary { padding: 1rem; }
.native-tool.forecast-tool :is(.label,.reading-label) { font-size: .9rem; font-weight: 600; color: #435f69; }
.native-tool.forecast-tool :is(.big,.metric,.summary .value) { display: flex; align-items: baseline; gap: .45rem; flex-wrap: wrap; font-size: clamp(1.8rem,3vw,2.5rem); font-weight: 750; line-height: 1.15; font-variant-numeric: tabular-nums; margin: .5rem 0 .9rem; }
.native-tool.forecast-tool .summary .value { font-size: 1.55rem; }
.native-tool.forecast-tool .metric b { font: inherit; }
.native-tool.forecast-tool :is(.units,.metric > span) { font-size: 1rem; font-weight: 600; color: #435f69; }
.native-tool.forecast-tool :is(.row,.data-row) { display: flex; align-items: baseline; gap: .4rem 1rem; flex-wrap: wrap; margin-top: .6rem; font-size: .95rem; }
.native-tool.forecast-tool :is(.k,.muted,.meta,.small,.note,.footer-note) { color: #435f69; }
.native-tool.forecast-tool :is(.small,.meta,.note,.footer-note) { font-size: .95rem; line-height: 1.5; }
.native-tool.forecast-tool .note { margin-top: .8rem; }
.native-tool.forecast-tool :is(.val,.v) { min-width: 0; overflow-wrap: anywhere; }
.native-tool.forecast-tool :is(.toolbar,.hero-actions,.actions,.inline-actions) { display: flex; flex-wrap: wrap; gap: .65rem; margin-top: 1rem; }
.native-tool.forecast-tool button { border: 1px solid #075c70; border-radius: 8px; min-height: 44px; padding: .65rem 1rem; background: #075c70; color: #fff; font: 600 1rem/1.35 var(--kh-font-body,sans-serif); cursor: pointer; }
.native-tool.forecast-tool :is(button.secondary,button.ghost) { background: #fff; color: #075c70; border-color: #a8c2ca; }
.native-tool.forecast-tool button:hover { filter: brightness(.92); }
.native-tool.forecast-tool button:disabled { opacity: .65; cursor: wait; }
.native-tool.forecast-tool :is(a,button,input,summary):focus-visible { outline: 3px solid #ba6400; outline-offset: 3px; }
.native-tool.forecast-tool .card-head { display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: .75rem; margin-bottom: 1rem; }
.native-tool.forecast-tool .card-head > div:first-child { flex: 1 1 220px; }
.native-tool.forecast-tool .card-head .inline-actions { margin: 0; }
.native-tool.forecast-tool :is(.notice,.summary-alert,.hero-warning,.status-line) { padding: .85rem 1rem; border-radius: 8px; background: #edf3f7; border: 1px solid #bfced8; color: #294f65; line-height: 1.45; }
.native-tool.forecast-tool :is(.notice.good,.badge.good) { background: #edf8f0; border-color: #b7d8c2; color: #245a39; }
.native-tool.forecast-tool :is(.notice.warn,.summary-alert,.hero-warning,.badge.warn) { background: #fff6e7; border-color: #e5c88f; color: #795019; }
.native-tool.forecast-tool :is(.notice.bad,.summary-alert.bad,.hero-warning.bad,.badge.bad) { background: #fff0ef; border-color: #e8b5b0; color: #87392f; }
.native-tool.forecast-tool :is(.hero-warning-deck,.rows,.schedule-list) { display: grid; gap: .75rem; margin-top: 1rem; }
.native-tool.forecast-tool .summary-alert { margin-top: .75rem; }
.native-tool.forecast-tool :is(.pill,.badge) { display: inline-block; border-radius: 6px; padding: .3rem .55rem; font-size: .85rem; background: #e6eff2; color: #355661; }
.native-tool.forecast-tool #sourceBadge { margin-top: .75rem; }
.native-tool.forecast-tool .chart { width: 100%; height: 230px; margin-top: 1rem; background: #fff; border: 1px solid #d7e1e4; border-radius: 8px; overflow: hidden; }
.native-tool.forecast-tool .chart svg { display: block; width: 100%; height: 100%; }
.native-tool.forecast-tool .chart:empty::before { content: 'Loading recent readings…'; display: block; padding: 1rem; color: #435f69; }
.native-tool.forecast-tool .chart-empty { padding: 1rem; color: #435f69; }
.native-tool.forecast-tool .event { padding: 1rem; border: 1px solid #c9d8dd; border-radius: 8px; }
.native-tool.forecast-tool .event.is-next { border-color: #79adb9; background: #edf7f7; }
.native-tool.forecast-tool .event-title { font-weight: 700; }
.native-tool.forecast-tool .event-meta { font-size: .95rem; margin: .4rem 0; }
.native-tool.forecast-tool label { display: block; margin-bottom: .4rem; font-size: 1rem; font-weight: 600; }
.native-tool.forecast-tool input:not([type=checkbox]) { width: 100%; min-height: 46px; padding: .65rem; border: 1px solid #9fb7bf; border-radius: 6px; background: #fff; color: #183d49; font: inherit; }
.native-tool.forecast-tool input[readonly] { background: #f3f6f7; }
.native-tool.forecast-tool input[type=checkbox] { width: 1.25rem; height: 1.25rem; flex: 0 0 auto; }
.native-tool.forecast-tool .calc-result { margin-top: 1rem; }
.native-tool.forecast-tool details { border-top: 1px solid #c9d8dd; margin-top: 1rem; padding-top: .75rem; }
.native-tool.forecast-tool summary { cursor: pointer; font-weight: 600; min-height: 44px; padding-block: .4rem; }
.native-tool.forecast-tool .reference-links { padding-left: 1.25rem; }
.native-tool.forecast-tool .reference-links li { margin: .5rem 0; }
.native-tool.forecast-tool .forecast-footer { padding-top: 1.5rem; }
.native-tool.forecast-tool .hidden { display: none !important; }
.native-tool.forecast-tool .loading-inline { display: flex; align-items: center; gap: .5rem; }
@media (max-width: 760px) {
  .native-tool.forecast-tool .forecast-nav { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); }
  .native-tool.forecast-tool .forecast-nav a { text-align: center; padding-inline: .5rem; font-size: .95rem; }
  .native-tool.forecast-tool :is(.grid,.two,.calc-result) { grid-template-columns: 1fr; }
  .native-tool.forecast-tool .summary-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .native-tool.forecast-tool :is(.card,.summary) { padding: 1rem; }
  .native-tool.forecast-tool .card.soft { padding: .9rem; }
}
@media (max-width: 380px) {
  .native-tool.forecast-tool .summary-grid { grid-template-columns: 1fr; }
  .native-tool.forecast-tool .forecast-nav a { flex: 1; text-align: center; padding-inline: .5rem; }
}