/*
 * Rhyy-Gestaltungsgrammatik
 *
 * Visual implementation for the Browser-App. Domain Modules keep ownership of
 * content and state; this module owns typography, colour, spatial rhythm and
 * responsive hierarchy. Homepage rules are deliberately scoped to .homePage.
 */

@font-face{
  font-family:"Archivo Rhyy";
  src:url("/assets/fonts/archivo-latin-variable.woff2") format("woff2");
  font-style:normal;
  font-weight:100 900;
  font-stretch:75% 125%;
  font-display:swap;
}

:root{
  --rhyy-font:"Archivo Rhyy", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --rhyy-paper:#d6e2dc;
  --rhyy-paper-strong:#f0f5f1;
  --rhyy-ink:#182e32;
  --rhyy-ink-soft:#36564f;
  --rhyy-line:#a8beb4;
  --rhyy-rhine:#087d82;
  --rhyy-rhine-light:#c6dfd2;
  --rhyy-rhine-dark:#163438;
  --rhyy-basel:#bd4038;
  --rhyy-sun:#e9be46;
  --rhyy-green:#147852;
  --rhyy-mint:#91d6b6;
}

/* Shared Browser Shell */
.subPage .notFoundCard{ overflow:hidden; }
.notFoundRiver{ width:min(100%,520px); height:auto; color:var(--accent); margin:16px 0; }
.notFoundCard .primaryButton{ align-self:flex-start; }

.topbar{
  position:relative;
  min-height:66px;
  margin-bottom:22px;
  font-family:var(--rhyy-font);
}

.brand{
  gap:14px;
  color:var(--text);
}

.logo,
.logo img{
  width:54px;
  height:54px;
}

.logo{
  border:0;
  border-radius:0;
  box-shadow:none;
  background:transparent;
}

.brandTitle{
  font-family:var(--rhyy-font);
  font-size:29px;
  font-stretch:88%;
  font-weight:850;
  letter-spacing:-.035em;
}

.brandTitleSuffix{
  font-family:var(--rhyy-font);
  font-size:.82em;
  font-stretch:100%;
  font-weight:720;
  letter-spacing:-.04em;
}

.brandTag{
  margin-top:2px;
  font-size:12px;
  font-weight:620;
  letter-spacing:.01em;
}

.langSwitch{
  gap:0;
  padding:0;
  border:1px solid var(--text);
  border-radius:0;
  box-shadow:none;
  background:var(--surface);
  backdrop-filter:none;
}

.langSwitch button,
.langSwitch a{
  min-height:38px;
  padding:7px 11px;
  border-radius:0;
  font-family:var(--rhyy-font);
  font-size:11px;
  font-weight:650;
}

.langSwitch button.is-active,
.langSwitch a.is-active,
body.theme-dark .langSwitch button.is-active,
body.theme-dark .langSwitch a.is-active{
  background:var(--text);
  color:var(--bg);
  box-shadow:none;
}

.themeToggle{
  width:40px;
  min-height:40px;
  padding:0;
  border:1px solid var(--text);
  border-radius:0;
  box-shadow:none;
  background:var(--surface);
  font-family:var(--rhyy-font);
}

.themeToggle:hover{
  transform:none;
  background:var(--text);
  color:var(--bg);
}

/* Shared theme tokens for every browser page. */
:root, body{
  --bg:var(--rhyy-paper);
  --bg-2:var(--rhyy-paper-strong);
  --card:var(--rhyy-paper-strong);
  --surface:var(--rhyy-paper-strong);
  --surface-muted:#dde9e1;
  --surface-tint:var(--rhyy-rhine-light);
  --text:var(--rhyy-ink);
  --muted:var(--rhyy-ink-soft);
  --border:var(--rhyy-line);
  --accent:var(--rhyy-rhine);
  --accent-2:var(--rhyy-rhine);
  --accent-3:var(--rhyy-sun);
  --ok:var(--rhyy-green);
  --warn:#886017;
  --bad:var(--rhyy-basel);
  --shadow:none;
  --shadow-sm:none;
  --shadow-md:0 8px 24px rgba(24,46,50,.06);
  --shadow-lg:var(--shadow-md);
  /* Surface 16px, nested panels 10px, controls 8px, status labels 4px. */
  --radius:16px;
  --radius-xs:4px;
  --radius-sm:8px;
  --radius-md:10px;
  --radius-lg:12px;
  --radius-xl:16px;
  --radius-2xl:16px;
  --control-bg:#e7efe9;
  --control-border:#87a49a;
  --control-hover:var(--surface-muted);
  --font-body:var(--rhyy-font);
  --font-display:var(--rhyy-font);
  background:var(--bg);
  font-family:var(--rhyy-font);
  font-variant-numeric:tabular-nums;
}

html.theme-dark, html.theme-dark body, body.theme-dark{
  --bg:#101c20;
  --bg-2:#19292d;
  --card:#19292d;
  --surface:#19292d;
  --surface-muted:#21363a;
  --surface-tint:#203e40;
  --text:#eaf3f1;
  --muted:#adbfbd;
  --border:#354b4e;
  --accent:#7dceca;
  --accent-2:#7dceca;
  --accent-3:#e9be46;
  --ok:#91d6b6;
  --warn:#efca76;
  --bad:#f3a19a;
  --control-bg:var(--surface);
  --control-border:var(--border);
  --control-hover:var(--surface-muted);
}

.homePage .app{
  max-width:1280px;
  padding:24px 40px 40px;
  position:relative;
}

.homePage #main-content{
  gap:24px;
}

.homePage .card{
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:none;
  background:var(--surface);
  backdrop-filter:none;
}

.homePage .badge,
.homePage .hydroStatus,
.homePage .uvIndexBadge,
.homePage .statusPill,
.homePage .forecastSwimBadge,
.homePage .crew-slot-chip{
  border-radius:4px;
  box-shadow:none;
  text-transform:none;
  letter-spacing:0;
}

.homePage .primaryButton,
.homePage .primaryLink,
.homePage .primaryCtaLink,
.homePage .secondaryCtaLink,
.homePage .secondaryButton,
.homePage .swimIntentButton,
.homePage .settingsActions button,
.homePage .settingsStatus .ghost,
.homePage .webcamRetryButton{
  border-radius:8px;
  box-shadow:none;
  font-family:var(--rhyy-font);
  font-weight:650;
  transform:none;
}

.homePage .primaryButton:hover,
.homePage .primaryLink:hover,
.homePage .primaryCtaLink:hover,
.homePage .secondaryCtaLink:hover,
.homePage .secondaryButton:hover,
.homePage .swimIntentButton:hover{
  transform:none;
  filter:contrast(1.12);
}

/* Rhein Check: measurements and decisions retain their domain-owned columns. */
.homePage .hero{
  grid-template-columns:minmax(0, 1.06fr) minmax(0, .94fr);
  gap:24px;
  width:100%;
  max-width:100%;
  min-width:0;
  padding:0;
  overflow:visible;
  border:0;
  border-radius:0;
  box-shadow:none;
  background:transparent;
}

.homePage.theme-dark .hero{
  border-color:var(--text);
}

.homePage .hero::before{
  display:none;
}

.homePage .heroMain,
.homePage .heroSide{
  min-width:0;
  max-width:100%;
  padding:24px;
  border:1px solid var(--border);
  border-radius:16px;
  background:var(--surface);
}

.homePage .heroColumnContinuation{
  min-width:0;
  padding:0;
}

.homePage .heroMain > *,
.homePage .heroSide > *,
.homePage .hero > *{
  min-width:0;
  max-width:100%;
}

.homePage .heroMain{
  gap:20px;
  align-self:start;
}

.homePage .heroMainContinuation{
  border:0;
}

.homePage .heroSide{
  gap:20px;
  grid-template-rows:none;
  align-content:start;
  align-self:start;
}

.homePage .heroEyebrow{
  max-width:22ch;
  margin:0;
  font-family:var(--rhyy-font);
  font-size:clamp(30px, 3.6vw, 48px);
  font-stretch:100%;
  font-weight:650;
  letter-spacing:-.055em;
  line-height:1.1;
  text-wrap:balance;
}

.homePage .sectionHeading,
.homePage .cardTitle,
.homePage .statLabel,
.homePage .settingsLabel,
.homePage .historyTileTitle,
.homePage .swimActivityTitle,
.homePage .rhineSituationMetricTitle{
  font-family:var(--rhyy-font);
  font-stretch:100%;
  font-weight:600;
  letter-spacing:0;
  text-transform:none;
}

.homePage .sectionHeading{
  margin:0;
  color:var(--muted);
  font-size:14px;
}

.homePage .heroTemp{
  position:relative;
  min-height:236px;
  margin-top:-4px;
  padding:24px;
  align-content:center;
  overflow:hidden;
  isolation:isolate;
  border-radius:10px;
  background:var(--surface-tint);
}

.homePage .heroTempContent{
  position:relative;
  z-index:1;
}

.homePage .temperatureTrace{
  position:absolute;
  z-index:0;
  inset:40% 0 0;
  width:100%;
  height:60%;
  color:var(--accent);
  opacity:.22;
  pointer-events:none;
}

.homePage.theme-dark .temperatureTrace{
  color:#6cc7df;
  opacity:.24;
}

.homePage .temperatureTrace .traceArea{
  fill:currentColor;
  opacity:.24;
}

.homePage .temperatureTrace .traceLine{
  fill:none;
  stroke:currentColor;
  stroke-width:5;
  vector-effect:non-scaling-stroke;
}

.homePage .temperatureTrace .traceCurrent{
  fill:var(--accent);
  stroke:var(--surface);
  stroke-width:3;
  vector-effect:non-scaling-stroke;
}

.homePage .tempValue{
  color:var(--text);
  font-size:clamp(76px, 7.8vw, 108px);
  font-stretch:100%;
  font-weight:550;
  letter-spacing:-.075em;
  line-height:1;
}

.homePage .tempSub{
  margin-top:8px;
  color:var(--text);
  font-size:16px;
  font-weight:500;
}

.homePage .tempTrend{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:6px;
  width:fit-content;
  max-width:100%;
  margin-top:20px;
  padding:0;
  border:0;
  background:transparent;
  font-size:12px;
}

.homePage .tempTrend .statLabel{
  margin:0 3px 0 0;
  font-size:10px;
}

.homePage .tempTrend .trendIcon{
  font-size:17px;
}

.homePage .tempTrend strong{
  font-size:12px;
}

.homePage .tempTrend > span:last-child{
  color:var(--muted);
}

.homePage .tempMeta{
  position:relative;
  z-index:1;
  margin-top:8px;
  font-size:11px;
  color:var(--muted);
}

.homePage .heroStats{
  gap:20px;
  border:0;
}

.homePage .stat{
  min-height:112px;
  padding:0;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
}

.homePage .hydroStat{
  min-height:154px;
}

.homePage .flowRecorder{
  --flow-recorder-height:116px;
  grid-column:1 / -1;
  grid-template-rows:auto minmax(var(--flow-recorder-height), 1fr);
  min-height:236px;
  padding:0;
  background:transparent;
  color:var(--text);
}

.homePage.theme-dark .flowRecorder{
  background:transparent;
  color:var(--text);
  border-color:var(--border);
}

.homePage .flowRecorder .statLabel,
.homePage .flowRecorder .statUnit,
.homePage .flowRecorder .hydroGaugeScale{
  color:var(--muted);
}

.homePage .flowRecorder .statValue{
  margin-top:2px;
  font-size:38px;
  font-stretch:100%;
  letter-spacing:-.025em;
  line-height:.95;
}

.homePage .flowRecorder .statUnit{
  font-size:10px;
  font-stretch:100%;
  font-weight:700;
  letter-spacing:0;
}

.homePage .flowRecorder .hydroStatus{
  border-color:rgba(16,21,17,.45);
}

.homePage .flowRecorderInstrument{
  display:grid;
  grid-template-columns:minmax(0, 1fr) 58px;
  width:100%;
  max-width:100%;
  min-width:0;
  height:var(--flow-recorder-height);
  margin:10px 0 0;
}

.homePage .flowRecorderPaper{
  position:relative;
  width:100%;
  max-width:100%;
  min-width:0;
  height:var(--flow-recorder-height);
  overflow:hidden;
  border:1px solid var(--border);
  border-right:0;
  background-color:var(--surface-muted);
  background-image:
    linear-gradient(rgba(16,21,17,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(16,21,17,.035) 1px, transparent 1px);
  background-size:20px 20px;
}

.homePage .flowRecorderPaper svg{
  display:block;
  width:100%;
  max-width:100%;
  min-width:0;
  height:100%;
  color:var(--rhyy-rhine);
}

.homePage .flowRecorderPaper .traceGrid line{
  stroke:rgba(16,21,17,.11);
  stroke-width:1;
  stroke-dasharray:none;
  vector-effect:non-scaling-stroke;
}

.homePage .flowRecorderPaper .traceLine{
  fill:none;
  stroke:currentColor;
  stroke-width:2.25;
  vector-effect:non-scaling-stroke;
}

.homePage .flowRecorderDuration{
  position:absolute;
  left:7px;
  top:5px;
  right:auto;
  bottom:auto;
  padding:2px 4px;
  background:var(--surface-muted);
  color:var(--muted);
  font-size:9px;
  font-weight:650;
  letter-spacing:.06em;
  text-transform:uppercase;
}

.homePage .flowRecorderGauge{
  position:relative;
  display:grid;
  grid-template-columns:36px 12px;
  gap:4px;
  width:58px;
  height:var(--flow-recorder-height);
  margin:0;
  padding:0 6px 0 0;
  border-block:1px solid var(--border);
  border-right:1px solid var(--border);
  background:var(--surface-muted);
}

.homePage .flowRecorderGauge .hydroGaugeTrack{
  grid-column:2;
  grid-row:1;
  align-self:stretch;
  display:grid;
  grid-template-columns:1fr;
  grid-template-rows:var(--hydro-red, 25fr) var(--hydro-yellow, 20fr) var(--hydro-green, 55fr);
  width:12px;
  height:100%;
  border:0;
  overflow:visible;
  background:transparent;
}

.homePage .flowRecorderGauge .hydroGaugeSegment{
  width:100%;
  height:auto;
  border-radius:0;
}

.homePage .flowRecorderGauge .hydroGaugeSegment.is-red{ grid-row:1; background:#cf4a3a; }
.homePage .flowRecorderGauge .hydroGaugeSegment.is-yellow{ grid-row:2; background:#d8ac24; }
.homePage .flowRecorderGauge .hydroGaugeSegment.is-green{ grid-row:3; background:#3d9d76; }

.homePage .flowRecorderGauge .hydroGaugeMarker{
  top:auto;
  bottom:clamp(0%, var(--hydro-marker, 0%), 100%);
  left:auto;
  right:50%;
  width:46px;
  height:10px;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
  clip-path:none;
  transform:translateY(50%);
  transition:bottom 220ms ease;
}

.homePage .flowRecorderGauge .hydroGaugeMarker::before{
  content:"";
  position:absolute;
  left:2px;
  right:0;
  top:4px;
  height:2px;
  background:var(--rhyy-rhine-dark);
}

.homePage .flowRecorderGauge .hydroGaugeMarker::after{
  content:"";
  position:absolute;
  left:-2px;
  top:1px;
  width:7px;
  height:7px;
  border:1px solid #f7f3e5;
  background:var(--rhyy-rhine);
  transform:rotate(45deg);
}

.homePage .flowRecorderGauge .hydroGaugeScale{
  grid-column:1;
  grid-row:1;
  position:relative;
  display:block;
  width:36px;
  height:100%;
  padding-right:4px;
  color:var(--muted);
  font-size:8px;
  font-weight:680;
  line-height:1;
  text-align:right;
}

.homePage .flowRecorderGauge .hydroGaugeScale span{
  left:auto;
  right:4px;
  top:auto;
  transform:translateY(50%);
}

.homePage .flowRecorderGauge .hydroGaugeScale span:nth-child(1){
  bottom:0;
  transform:none;
}

.homePage .flowRecorderGauge .hydroGaugeScale span:nth-child(2){
  bottom:var(--hydro-green-stop, 33%);
}

.homePage .flowRecorderGauge .hydroGaugeScale span:nth-child(3){
  bottom:var(--hydro-yellow-stop, 47%);
}

.homePage .flowRecorderGauge .hydroGaugeScale span:nth-child(4){
  top:0;
  bottom:auto;
  transform:none;
  text-align:right;
}

.homePage .flowRecorderContext{
  display:grid;
  grid-template-columns:auto auto auto minmax(0, 1fr);
  align-items:baseline;
  gap:5px 8px;
  margin-top:9px;
  padding-top:8px;
  border-top:1px solid var(--border);
  color:var(--muted);
  font-size:10px;
  line-height:1.25;
}

.homePage .flowRecorderContextLabel{
  font-weight:740;
  letter-spacing:.055em;
  text-transform:uppercase;
}

.homePage .flowRecorderContext strong{
  color:var(--text);
  font-size:11px;
}

.homePage .flowRecorderContext strong[data-level-state="high"]{
  color:#9a6b00;
}

.homePage .flowRecorderContextFreshness{
  color:#9a6b00;
  font-weight:700;
}

.homePage .flowRecorderContext strong[data-level-state="very-high"]{
  color:#b7372c;
}

.homePage .flowRecorderContextNote{
  justify-self:end;
  text-align:right;
}

.homePage .weatherStat{
  grid-column:1 / -1;
  min-height:0;
  padding:18px;
  border-radius:10px;
  background:var(--surface-muted);
  color:var(--text);
}

.homePage .weatherStat .statLabel,
.homePage .weatherStat .weatherSecondary,
.homePage .weatherMomentLabel,
.homePage .weatherMomentMeta{
  color:var(--muted);
}

.homePage .weatherMoments{
  display:grid;
  grid-template-columns:1.15fr 1fr 1fr;
  align-items:stretch;
  margin-top:8px;
  border:0;
}

.homePage .weatherMoment{
  min-width:0;
  padding:12px 12px 11px 0;
}

.homePage .weatherMoment + .weatherMoment{
  padding-right:10px;
  padding-left:12px;
  border-left:1px solid var(--border);
}

.homePage .weatherMoment:last-child{
  padding-right:0;
}

.homePage .weatherMomentLabel{
  margin-bottom:7px;
  font-size:9px;
  font-weight:650;
  letter-spacing:.065em;
  text-transform:uppercase;
}

.homePage .weatherMomentBody{
  display:flex;
  align-items:center;
  gap:7px;
  min-width:0;
}

.homePage .weatherOverview .weatherIconWrap{
  width:42px;
  height:42px;
  border:0;
  background:transparent;
}

.homePage .weatherOverview .weatherMain{
  font-family:var(--rhyy-font);
  font-size:25px;
  font-stretch:100%;
  font-weight:650;
  letter-spacing:-.02em;
  line-height:1;
}

.homePage .weatherMoment.is-current .weatherMain{
  font-size:30px;
}

.homePage .weatherOverview .weatherSecondary{
  margin-top:4px;
  font-size:11px;
  font-weight:550;
  line-height:1.15;
}

.homePage .weatherMomentMeta{
  min-height:1.2em;
  margin-top:9px;
  font-size:10px;
  font-weight:620;
  line-height:1.2;
}

.homePage.theme-dark .weatherStat{
  background:var(--surface-muted);
  color:var(--text);
}

.homePage.theme-dark .weatherStat .statLabel,
.homePage.theme-dark .weatherStat .weatherSecondary,
.homePage.theme-dark .weatherMomentLabel,
.homePage.theme-dark .weatherMomentMeta{
  color:#b9cbc7;
}

.homePage.theme-dark .weatherMoments,
.homePage.theme-dark .weatherMoment + .weatherMoment{
  border-color:rgba(255,255,255,.2);
}

.homePage .trendStat .trendMain{
  margin-top:8px;
}

.homePage .statValue{
  font-family:var(--rhyy-font);
  font-stretch:100%;
  font-size:28px;
  font-weight:650;
}

.homePage .hydroGaugeTrack,
.homePage .indexUvMeter,
.homePage .waterQualityMetricScaleTrack{
  border-radius:0;
  box-shadow:none;
}

.homePage .hydroGaugeSegment:first-child,
.homePage .hydroGaugeSegment:nth-child(3),
.homePage .hydroGaugeMarker{
  border-radius:0;
}

.homePage .heroSwimTime{
  padding:16px 0 0;
  border:0;
  border-top:1px solid var(--border);
  border-radius:0;
  background:transparent;
  box-shadow:none;
}

.homePage .heroSwimTimeValue{
  font-stretch:100%;
  font-size:27px;
}

.homePage .heroIndex{
  --decision-color:var(--accent);
  grid-template-columns:minmax(0, 1fr) 52px;
  grid-template-areas:"badge signal" "title signal" "meta meta";
  align-content:start;
  gap:12px 16px;
  min-height:180px;
  padding:24px;
  border:1px solid color-mix(in srgb, var(--decision-color) 20%, var(--border));
  border-radius:10px;
  box-shadow:none;
  background:color-mix(in srgb, var(--decision-color) 9%, var(--surface));
  color:var(--text);
}

.homePage .heroIndex[data-status="green"]{
  --decision-color:var(--ok);
}
.homePage .heroIndex[data-status="yellow"]{
  --decision-color:var(--warn);
}
.homePage .heroIndex[data-status="red"]{
  --decision-color:var(--bad);
}

.homePage .heroIndex .indexMeta,
.homePage .heroIndex .indexPhraseText{
  color:inherit;
  opacity:.88;
}

.homePage .indexBadge{
  display:inline-block;
  align-self:baseline;
  padding:0;
  border:0;
  border-radius:4px;
  background:transparent !important;
  color:var(--decision-color) !important;
  font-size:11px;
  font-weight:700;
  letter-spacing:.04em;
}
.homePage .indexBadge::before{ content:""; display:inline-block; width:6px; height:6px; margin-right:6px; border-radius:50%; background:currentColor; vertical-align:.08em; }
.homePage .indexSignal{ grid-area:signal; display:grid; place-items:center; align-self:center; width:52px; height:52px; border:1px solid color-mix(in srgb,var(--decision-color) 42%,var(--border)); border-radius:50%; color:var(--decision-color); background:color-mix(in srgb,var(--decision-color) 8%,var(--surface)); }
.homePage .indexSignal svg{ width:36px; height:36px; }
.homePage .indexSignal path{ display:none; }
.homePage .heroIndex[data-status="green"] .indexSignalCheck,
.homePage .heroIndex[data-status="yellow"] .indexSignalWarning,
.homePage .heroIndex[data-status="red"] .indexSignalStop,
.homePage .heroIndex[data-status="unknown"] .indexSignalUnknown,
.homePage .heroIndex[data-comfort="excellent"] .indexSignalExtra{ display:block; }

.homePage .indexTitle{
  margin:0;
  max-width:20ch;
  font-size:clamp(28px, 2.6vw, 36px);
  font-stretch:100%;
  font-weight:650;
  letter-spacing:-.04em;
  line-height:1.08;
  text-wrap:balance;
}

.homePage .todayBestTime,
.homePage .indexUv,
.homePage .waterQuality,
.homePage .safetyHint{
  border-radius:0;
  box-shadow:none;
  background:transparent;
}

.homePage .todayBestTime{
  padding:0;
  border:0;
}

.homePage .bestTimeChart,
.homePage .swimTimeline{
  border-radius:0;
  background:transparent;
  box-shadow:none;
}

.homePage .todayBestTimeLegend{
  justify-content:flex-start;
  gap:6px 12px;
  margin-top:10px;
  color:var(--muted);
  font-size:11px;
  font-weight:550;
}

.homePage .todayBestTimeLegend > span{
  gap:5px;
}

.homePage .todayBestTimeLegend i{
  display:inline-flex;
  width:16px;
  height:16px;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  background:var(--muted);
  color:var(--rhyy-ink);
  font-size:9px;
  font-style:normal;
  line-height:1;
}

.homePage .todayBestTimeLegend .is-best{
  width:22px;
  height:22px;
  border:3px solid var(--rhyy-green);
  background:var(--rhyy-mint);
  font-size:11px;
}

.homePage .todayBestTimeLegend .is-green{
  background:var(--rhyy-mint);
}

.homePage .todayBestTimeLegend .is-yellow{
  background:var(--rhyy-sun);
}

.homePage .todayBestTimeLegend .is-red{
  background:var(--rhyy-basel);
  color:#fffdf2;
}

.homePage .bestTimeAirPeak{
  display:flex;
  align-items:center;
  gap:8px;
  margin-top:12px;
  color:var(--muted);
  font-size:12px;
  font-weight:550;
}

.homePage .bestTimeAirPeak[hidden]{
  display:none;
}

.homePage .bestTimeAirPeak i{
  width:24px;
  height:5px;
  background:var(--rhyy-sun);
}

.homePage .bestTimeChart{
  grid-template-columns:repeat(var(--best-time-count, 8), minmax(48px, 1fr));
  height:88px;
  gap:4px;
  padding:8px 4px;
  border:0;
  border-radius:8px;
  background:var(--surface-muted);
  overflow-x:auto;
  overscroll-behavior-x:contain;
  scroll-snap-type:x proximity;
  scroll-padding-inline:4px;
  scrollbar-width:thin;
}

.homePage .bestTimeHour{
  display:grid;
  grid-template-rows:32px 20px;
  align-content:center;
  justify-items:center;
  gap:4px;
  min-width:48px;
  min-height:64px;
  padding:4px;
  border:0;
  border-radius:6px;
  background:transparent;
  color:inherit;
  font:inherit;
  cursor:pointer;
  scroll-snap-align:start;
  transition:background 160ms ease;
}

.homePage .bestTimeHour.starts-new-day::before{
  display:none;
}

.homePage .bestTimeHour.is-air-peak::after{
  content:"";
  position:absolute;
  top:3px;
  right:0;
  left:0;
  height:5px;
  background:var(--rhyy-sun);
}

.homePage .bestTimeHour.is-air-peak-start::after{
  left:50%;
}

.homePage .bestTimeHour.is-air-peak-end::after{
  right:50%;
}

.homePage .bestTimeBar{
  position:static;
  transform:none;
  z-index:1;
  display:flex;
  width:18px;
  height:18px;
  align-items:center;
  justify-content:center;
  border:2px solid var(--surface);
  color:var(--rhyy-ink);
  font-family:var(--rhyy-font);
  font-size:10px;
  font-weight:820;
  line-height:1;
  box-shadow:none !important;
}

.homePage .bestTimeHour[data-status="green"] .bestTimeBar{
  width:16px;
  height:16px;
  background:var(--rhyy-mint);
  font-size:9px;
}

.homePage .bestTimeHour.is-best-window .bestTimeBar{
  width:26px;
  height:26px;
  border:3px solid var(--rhyy-green);
  background:var(--rhyy-mint);
  font-size:13px;
}

.homePage .bestTimeHour[data-status="yellow"] .bestTimeBar{
  background:var(--rhyy-sun);
}

.homePage .bestTimeHour[data-status="red"] .bestTimeBar{
  background:var(--rhyy-basel);
  color:#fffdf2;
  opacity:1;
}

.homePage .bestTimeHour[data-status="unknown"] .bestTimeBar{
  border:1px solid var(--border);
  background:var(--surface);
  color:var(--muted);
}

.homePage .bestTimeHour[aria-pressed="true"]{
  background:color-mix(in srgb, var(--rhyy-rhine) 12%, transparent);
}

.homePage .bestTimeHour[aria-pressed="true"] .bestTimeTick{
  color:var(--text);
  font-weight:820;
  text-decoration:underline;
  text-decoration-thickness:2px;
  text-underline-offset:3px;
}

.homePage .bestTimeHour:focus-visible{
  outline:2px solid currentColor;
  outline-offset:-1px;
}

.homePage .bestTimeTick{
  position:static;
  transform:none;
  font-size:13px;
  line-height:20px;
}

.homePage .bestTimeHourDetail{
  margin-top:12px;
  border:1px solid var(--border);
  border-radius:8px;
  overflow:hidden;
  background:var(--surface);
}

.homePage .bestTimeHourDetailHead{
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:8px;
  padding:16px 16px 8px;
  font-size:15px;
}

.homePage .bestTimeHourDetailHead > span{
  padding:4px 6px;
  border:1px solid currentColor;
  font-size:12px;
  font-weight:600;
  line-height:1.3;
}

.homePage .bestTimeHourDetailHead > span[data-status="green"]{
  color:var(--rhyy-green);
}

.homePage.theme-dark .bestTimeHourDetailHead > span[data-status="green"]{
  color:var(--rhyy-mint);
}

.homePage .bestTimeHourDetailHead > span[data-status="yellow"]{
  color:var(--rhyy-sun);
}

.homePage .bestTimeHourDetailHead > span[data-status="red"]{
  color:var(--rhyy-basel);
}

.homePage .bestTimeHourTemperatures{
  display:flex;
  flex-wrap:wrap;
  gap:8px 20px;
  padding:0 16px 16px;
  color:var(--muted);
  font-size:13px;
}

.homePage .bestTimeHourTemperatures b{
  color:var(--text);
  font-size:18px;
  font-weight:650;
}

.homePage .bestTimeFactors{
  display:grid;
  grid-template-columns:minmax(0, 1fr);
}

.homePage .bestTimeFactor{
  display:grid;
  grid-template-columns:32px minmax(0, 1fr) auto;
  min-width:0;
  min-height:56px;
  padding:12px 16px;
  gap:12px;
  align-items:center;
  border-top:1px solid var(--border);
  text-align:left;
}

.homePage .bestTimeFactor:last-child{
  border-right:0;
}

.homePage .bestTimeUvAdvice{
  padding:12px 16px;
  border-top:1px solid var(--border);
  color:var(--muted);
  font-size:12px;
  font-weight:550;
  line-height:1.5;
}

.homePage .bestTimeUvAdvice::before{
  content:"☀ ";
  color:var(--rhyy-sun);
}

.homePage .bestTimeUvAdvice[data-status="low"]::before{
  color:var(--rhyy-mint);
}

.homePage .bestTimeUvAdvice[data-status="very-high"],
.homePage .bestTimeUvAdvice[data-status="extreme"]{
  color:var(--text);
  background:color-mix(in srgb, var(--rhyy-basel) 9%, transparent);
}

.homePage .bestTimeFactorState{
  display:inline-flex;
  flex:none;
  width:18px;
  height:18px;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  background:var(--surface-muted);
  color:var(--text);
  font-size:12px;
  font-weight:750;
}

.homePage .bestTimeFactor[data-status="green"] .bestTimeFactorState{
  background:var(--rhyy-mint);
}

.homePage .bestTimeFactor[data-status="yellow"] .bestTimeFactorState,
.homePage .bestTimeFactor[data-status="stale"] .bestTimeFactorState{
  background:var(--rhyy-sun);
}

.homePage .bestTimeFactor[data-status="red"] .bestTimeFactorState{
  background:var(--rhyy-basel);
  color:#fffdf2;
}

.homePage .bestTimeFactorVisual{
  display:flex;
  height:28px;
  align-items:center;
  justify-content:center;
  font-family:var(--rhyy-font);
  font-size:23px;
  font-weight:650;
  line-height:1;
}

.homePage .bestTimeFactorVisual img{
  width:30px;
  height:30px;
  object-fit:contain;
}

.homePage .bestTimeFactor strong{
  display:block;
  font-size:13px;
  font-weight:550;
  line-height:1.5;
  overflow-wrap:anywhere;
}

.homePage .bestTimeFactor strong:empty{
  display:none;
}

.homePage .bestTimeFactor small{
  display:block;
  color:var(--muted);
  font-size:13px;
  line-height:1.5;
}

.homePage .bestTimeReasons:empty{
  display:none;
}

.homePage .indexUv{
  padding:20px 0 0;
  border:0;
  border-top:1px solid var(--border);
}

.homePage .uvSwimHeader .cardTitle{
  font-size:16px;
  font-stretch:100%;
  font-weight:600;
}

.homePage .uvSwimDecision h3{
  color:var(--text);
  font-size:22px;
  font-stretch:100%;
  font-weight:600;
  letter-spacing:-.025em;
}

.homePage .uvIndexBadge,
.homePage .uvSwimSteps li{
  border-radius:0;
  box-shadow:none;
}

.homePage .waterQuality{
  padding:14px 0;
  border:0;
  border-bottom:1px solid var(--border);
}

.homePage .waterQuality[data-status="yellow"]{
  padding:16px;
  border:1px solid var(--border);
  border-radius:10px;
  background:color-mix(in srgb, var(--rhyy-sun) 8%, var(--surface));
}

.homePage .waterQualityLead > strong{
  font-family:var(--rhyy-font);
  font-stretch:100%;
  font-size:17px;
  font-weight:600;
}

.homePage .waterQualityStatus,
.homePage .waterQualityHygieneSteps li{
  border-radius:0;
  box-shadow:none;
}

.homePage .heroSafetyHint{
  padding:0;
  border:0;
  font-size:12px;
}

.homePage .safetyMark,
.homePage .weatherIconWrap,
.homePage .indexUvIcon{
  border-radius:0;
  box-shadow:none;
}

.homePage .heroColumnFeature,
.homePage .webcamFrameWrap,
.homePage .swimIntentBox--hero,
.homePage .swimActivity{
  border-radius:0;
  box-shadow:none;
}

.homePage .swimIntentBox--hero{
  border:0;
  background:transparent;
}

.homePage .swimIntentMetric{
  border-radius:0;
  background:transparent;
}

.homePage .swimIntentCounter,
.homePage .swimIntentVisitorsCount{
  font-stretch:100%;
  font-weight:650;
}

.homePage .swimIntentButton{
  background:var(--rhyy-rhine);
  border-color:var(--rhyy-rhine);
}

/* Forecast and secondary tools use the same surfaces and spacing scale. */
.homePage > .app .forecast{
  padding:28px;
  background:var(--surface);
  color:var(--text);
}

.homePage .forecast .cardTitle,
.homePage .forecast .cardHint{
  color:var(--text);
}

.homePage.theme-dark > .app .forecast{
  background:var(--surface);
  color:var(--text);
}

.homePage.theme-dark .forecast .cardTitle,
.homePage.theme-dark .forecast .cardHint{
  color:var(--muted);
}

.homePage .cardHeader > .cardTitle,
.homePage .cardHeader > div > .cardTitle{
  color:inherit;
  font-size:22px;
  letter-spacing:-.015em;
  text-transform:none;
}

.homePage .forecast > .cardHeader > .badge{
  display:none;
}

.homePage .forecastGrid{
  gap:0;
  margin-top:24px;
  border:1px solid var(--border);
  border-radius:10px;
  overflow:hidden;
}

.homePage .forecastGrid:not(.forecastInstrument){
  grid-template-columns:repeat(3, minmax(0, 1fr));
}

.homePage .forecastGrid.forecastInstrument{
  display:grid;
  grid-template-columns:64px repeat(var(--forecast-days, 5), minmax(0, 1fr));
  align-items:start;
}

.homePage .forecastAxis,
.homePage .forecastReadout{
  display:grid;
  grid-template-rows:45px 44px 58px 38px 38px 34px;
  min-width:0;
}

.homePage .forecastAxis{
  grid-column:1;
  grid-row:1;
  padding-inline:10px 6px;
  color:var(--muted);
  font-size:10px;
  font-weight:720;
  line-height:1.05;
}

.homePage .forecastAxis > span,
.homePage .forecastReadout > span{
  display:flex;
  width:100%;
  height:100%;
  align-items:center;
  justify-content:center;
  border-bottom:1px solid rgba(16,21,17,.18);
}

.homePage .forecastAxis > span{
  align-items:flex-start;
  justify-content:center;
  flex-direction:column;
}

.homePage .forecastAxis > span:last-child,
.homePage .forecastReadout > span:last-child{
  border-bottom:0;
}

.homePage .forecastAxis small{
  margin-top:2px;
  font-size:8px;
  font-weight:560;
}

.homePage .forecastReadout{
  padding:0 7px;
  border:0;
  border-left:1px solid var(--border);
  border-radius:0;
  background:transparent;
  color:inherit;
  font:inherit;
  cursor:pointer;
}

.homePage .forecastReadout:hover,
.homePage .forecastReadout[aria-expanded="true"]{
  background:var(--surface-muted);
}

.homePage .forecastReadout[aria-expanded="true"]{
  box-shadow:inset 0 -4px var(--rhyy-rhine);
}

.homePage .forecastReadout:focus-visible{
  outline:2px solid currentColor;
  outline-offset:-3px;
}

.homePage .forecastDate{
  flex-direction:column;
  gap:1px;
  line-height:1;
}

.homePage .forecastDate b{
  font-size:15px;
  font-stretch:100%;
  font-weight:650;
}

.homePage .forecastDate small{
  color:var(--muted);
  font-size:10px;
  font-weight:600;
}

.homePage .forecastWeather img{
  width:40px;
  height:40px;
  object-fit:contain;
}

.homePage .forecastRiver{
  font-family:var(--rhyy-font);
  font-size:36px;
  font-stretch:100%;
  font-weight:650;
  letter-spacing:-.045em;
  line-height:1;
}

.homePage .forecastRiver b,
.homePage .forecastAirMax b{
  font:inherit;
}

.homePage .forecastRiver small,
.homePage .forecastAirMax small{
  display:none;
}

.homePage .forecastFlow{
  flex-direction:column;
  color:var(--text);
  font-size:13px;
  font-weight:650;
  font-variant-numeric:tabular-nums;
  line-height:1;
}

.homePage .forecastFlow b{
  font:inherit;
}

.homePage .forecastFlow small{
  margin-top:3px;
  color:var(--muted);
  font-size:8px;
  font-weight:600;
}

.homePage .forecastFlow[data-hydro-kind="current"] b{
  font-size:10px;
  font-weight:650;
}

.homePage .forecastAirMax{
  color:var(--muted);
  font-size:20px;
  font-weight:680;
  font-variant-numeric:tabular-nums;
}

.homePage .forecastSignal{
  justify-self:center;
  width:22px !important;
  height:22px !important;
  align-self:center;
  border:1px solid currentColor;
  border-radius:50%;
  font-size:13px;
  font-weight:820;
  line-height:1;
}

.homePage .forecastReadout[data-status="green"] .forecastSignal{
  border-color:var(--rhyy-mint);
  background:var(--rhyy-mint);
  color:var(--rhyy-ink);
}

.homePage .forecastReadout[data-status="yellow"] .forecastSignal{
  border-color:var(--rhyy-sun);
  background:var(--rhyy-sun);
  color:var(--rhyy-ink);
}

.homePage .forecastReadout[data-status="red"] .forecastSignal{
  border-color:var(--rhyy-basel);
  background:var(--rhyy-basel);
  color:#fffdf2;
}

.homePage .forecastReadout[data-status="unknown"] .forecastSignal{
  color:var(--muted);
}

.homePage .forecastDayDetail{
  grid-column:1 / -1;
  grid-row:2;
  padding:12px 14px;
  border-top:1px solid var(--border);
  font-size:12px;
  line-height:1.4;
}

.homePage .forecastDayDetail strong,
.homePage .forecastDayDetail span{
  display:block;
}

.homePage .forecastDayDetail span{
  margin-top:2px;
  color:var(--muted);
}

.homePage .forecastDayDetail p{
  margin:6px 0 0;
  font-weight:680;
}

.homePage.theme-dark .forecastAxis,
.homePage.theme-dark .forecastDate small,
.homePage.theme-dark .forecastFlow,
.homePage.theme-dark .forecastFlow small,
.homePage.theme-dark .forecastAirMax,
.homePage.theme-dark .forecastDayDetail span,
.homePage.theme-dark .forecastReadout[data-status="unknown"] .forecastSignal{
  color:var(--muted);
}

.homePage.theme-dark .forecastReadout:hover,
.homePage.theme-dark .forecastReadout[aria-expanded="true"]{
  background:var(--surface-muted);
}

.homePage.theme-dark .forecastAxis > span,
.homePage.theme-dark .forecastReadout > span{
  border-bottom-color:rgba(255,255,255,.12);
}

.homePage .forecastItem{
  min-height:112px;
  border:0;
  border-right:1px solid var(--border);
  border-radius:0;
  background:transparent !important;
}

.homePage .forecastItem:last-child{
  border-right:0;
}

.homePage .forecastDetails span,
.homePage .bestTimeReasons span{
  padding:2px 0;
  border:0;
  border-radius:0;
  background:transparent;
}

.homePage .todayRhyy,
.homePage .rhyminderCard,
.homePage .rhineDevelopment,
.homePage .swimLogCard,
.homePage .settings,
.homePage .feedbackCard{
  padding:24px;
  background:var(--surface);
}

.homePage .todayPanel,
.homePage .historyTile,
.homePage .rhineSituationMetric,
.homePage .rhineSituationOfficial,
.homePage .swimLogStat,
.homePage .swimLogEntry,
.homePage .settingsGroup,
.homePage .settingsStatus,
.homePage .locationSafetyHint,
.homePage .feedbackSummary,
.homePage .swimLogComposer{
  border-radius:0;
  box-shadow:none;
  background:transparent;
}

.homePage .todayRhyy--strip .swimIntentMetrics,
.homePage .swimLogStats,
.homePage .historyTiles,
.homePage .rhineSituationGrid{
  gap:0;
}

.homePage .todayRhyy--strip .swimIntentMetric,
.homePage .swimLogStat,
.homePage .historyTile,
.homePage .rhineSituationMetric{
  border-color:var(--border);
}

.homePage .historyTile + .historyTile,
.homePage .rhineSituationMetric + .rhineSituationMetric,
.homePage .swimLogStat + .swimLogStat{
  border-left:0;
}

.homePage .developmentModeSwitch,
.homePage .toggleRow button,
.homePage .developmentModeSwitch button,
.homePage .timeSlotOptions button,
.homePage .aktuellTypeOptions span{
  border-radius:0;
  box-shadow:none;
}

.homePage .developmentModeSwitch{
  gap:0;
  padding:0;
}

.homePage .developmentModeSwitch button + button{
  border-left:1px solid var(--border);
}

.homePage .developmentModeSwitch button.is-active{
  background:var(--rhyy-rhine);
  color:#fff;
  box-shadow:none;
}

.homePage .rhyminderCard{
  border-left:1px solid var(--border);
  background:var(--surface-tint);
}

.homePage .rhyminderBullet{
  padding:9px 0;
  border:0;
  border-bottom:1px solid var(--border);
  border-radius:0;
  background:transparent;
}

.homePage .feedbackSummary::before,
.homePage .aktuellComposeSummary::before{
  border-radius:0;
}

.homePage .footer{
  margin-top:40px;
  padding:28px 0 8px;
  border-top:1px solid var(--border);
  text-align:left;
}

.homePage .footerLocation,
.homePage .footerApps,
.homePage .footerCredit{
  justify-content:flex-start;
}

/* Homepage navigation is intentionally separate from the live readings. */
.topbar{
  min-height:64px;
  margin-bottom:0;
  padding-bottom:20px;
  border-bottom:1px solid var(--border);
}
.logo,
.logo img{ width:44px; height:44px; }
.brandTitle{ font-size:30px; font-weight:750; font-stretch:100%; }
.brandTag{ font-size:11px; font-weight:450; color:var(--muted); }
.langSwitch{ border:0; border-radius:8px; padding:3px; background:var(--surface-muted); }
.langSwitch :is(button, a){ min-height:36px; border:0; border-radius:6px; font-weight:550; }
.langSwitch :is(button, a).is-active{ color:var(--text); background:var(--surface); box-shadow:0 1px 4px rgba(24,46,50,.08); }
.themeToggle{ border:1px solid var(--border); border-radius:8px; color:var(--text); font-size:18px; }
.homePage .homeIntro{ padding:24px 0 4px; }
.homePage .homeIntroTop{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:16px; margin-bottom:24px; }
.homePage .sectionNav{ display:flex; gap:24px; flex-wrap:wrap; }
.homePage .sectionNav a{ padding:8px 0; color:var(--muted); font-size:13px; font-weight:550; text-decoration:none; border-bottom:2px solid transparent; }
.homePage .sectionNav a:hover{ color:var(--accent); border-bottom-color:var(--accent); }
.homePage .locationSwitch{ display:flex; align-items:center; gap:2px; padding:3px; border:1px solid var(--border); border-radius:8px; }
.homePage .locationSwitch a{ padding:7px 12px; border-radius:5px; color:var(--muted); text-decoration:none; font-size:12px; }
.homePage .locationSwitch a[aria-current="page"]{ background:var(--surface); color:var(--text); font-weight:650; }
.homePage .locationSwitch a:hover{ color:var(--accent); }
.homePage :is(section, [id]){ scroll-margin-top:24px; }
.homePage :is(a, button, input, select, textarea, summary):focus-visible{ outline:3px solid var(--accent); outline-offset:3px; }
.homePage :is(button, a, summary){ transition:background-color 180ms ease, color 180ms ease, border-color 180ms ease; }
.homePage button:active{ transform:translateY(1px); }
:is(.homePage,.subPage) .skipLink{ position:absolute; top:12px; left:16px; z-index:10; padding:12px 18px; border-radius:8px; background:var(--text); color:var(--bg); transform:translateY(-180%); }
:is(.homePage,.subPage) .skipLink:focus{ transform:translateY(0); }
.homePage .tempUnit{ font-size:.42em; vertical-align:top; position:relative; top:.18em; margin-left:.15em; letter-spacing:-.04em; }
.homePage .flowRecorder .statValue{ font-size:36px; font-weight:550; }
.homePage .flowRecorder .statUnit{ font-size:13px; font-weight:500; }
.homePage .flowRecorderContext{ line-height:1.45; }
.homePage .flowRecorderContextNote{ max-width:26ch; }
.homePage .weatherOverview .weatherMain{ font-size:24px; font-weight:600; }
.homePage .weatherMoment.is-current .weatherMain{ font-size:28px; }
.homePage .heroSwimTimeValue{ font-size:24px; font-weight:600; }
.homePage .heroIndex .indexPhraseText{ font-size:13px; line-height:1.55; opacity:1; }
.homePage .heroIndex .indexMeta{ opacity:1; }
.homePage .todayBestTimePeak{ margin-top:8px; font-size:16px; font-weight:600; }
.homePage .heroColumnFeature{ border:1px solid var(--border); border-radius:16px; background:var(--surface); }
.homePage .heroFeatureHeader{ min-height:60px; padding:16px 20px; }
.homePage .heroFeatureHeader .cardTitle{ font-size:18px; font-weight:600; }
.homePage .heroHut .swimIntentBox{ padding:20px; }
.homePage .swimIntentMetric{ border:0; padding:8px 0; }
.homePage .swimIntentMetrics{ gap:20px; }
.homePage .swimIntentCounter,
.homePage .swimIntentVisitorsCount{ font-size:32px; font-weight:600; }
.homePage .swimIntentButton{ min-height:48px; background:var(--rhyy-rhine); border-color:var(--rhyy-rhine); color:#fff; }
.homePage .swimActivity{ border:0; border-radius:8px; background:var(--surface-muted); }
.homePage .uvIndexBadge,
.homePage .uvSwimSteps li,
.homePage .waterQualityStatus,
.homePage .waterQualityHygieneSteps li{ border-radius:4px; }
.homePage .uvSwimSteps li{ font-size:11px; }
.homePage .uvSwimEyebrow{ color:var(--muted); font-weight:500; letter-spacing:0; text-transform:none; }
.homePage .uvSwimDisclaimer{ font-size:11px; line-height:1.5; }
.homePage .cardHeader > .cardTitle,
.homePage .cardHeader > div > .cardTitle{ font-weight:600; font-stretch:100%; }
.homePage .cardHint{ font-size:12px; line-height:1.6; }
.homePage .swimLogStats,
.homePage .historyTiles,
.homePage .rhineSituationGrid{ gap:12px; }
.homePage .historyTile,
.homePage .rhineSituationMetric,
.homePage .swimLogStat{ border:0; border-radius:10px; background:var(--surface-muted); }
.homePage .developmentModeSwitch{ gap:4px; padding:4px; border:0; border-radius:8px; background:var(--surface-muted); }
.homePage .developmentModeSwitch button{ border:0; border-radius:5px; }
.homePage .developmentModeSwitch button + button{ border:0; }
.homePage .toggleRow button{ border-radius:6px; }
.homePage .settingsGroup,
.homePage .settingsStatus,
.homePage .swimLogComposer{ border-radius:10px; }
.homePage .swimLogFormActions .ghost,
.homePage .swimLogEntryActions .ghost{
  min-height:40px;
  padding:8px 14px;
  border:1px solid var(--border);
  border-radius:8px;
  background:var(--surface);
  color:var(--text);
  font:inherit;
  font-size:13px;
  cursor:pointer;
}
.homePage .swimLogFormActions .ghost:hover,
.homePage .swimLogEntryActions .ghost:hover{ background:var(--surface-muted); }
.homePage [data-swim-log-save],
.homePage .primaryButton,
.homePage .primaryLink,
.homePage .primaryCtaLink{ background:var(--rhyy-rhine); border-color:var(--rhyy-rhine); color:#fff; }
.homePage .rhyminderBullets{ grid-template-columns:repeat(3, minmax(0, 1fr)); gap:20px; }
.homePage .rhyminderBullet{ border:0; font-size:13px; line-height:1.5; }
.homePage.theme-dark .flowRecorderPaper{ background-image:linear-gradient(rgba(234,243,241,.04) 1px, transparent 1px), linear-gradient(90deg, rgba(234,243,241,.04) 1px, transparent 1px); }
.homePage.theme-dark .flowRecorderPaper .traceGrid line{ stroke:var(--border); }
.homePage.theme-dark .flowRecorderPaper svg{ color:var(--accent); }
.homePage.theme-dark .flowRecorderGauge .hydroGaugeMarker::before{ background:var(--text); }
.homePage.theme-dark .forecastReadout[aria-expanded="true"]{ box-shadow:inset 0 -4px var(--accent); }
.homePage .bestTimeHourDetailHead > span[data-status="yellow"]{ color:var(--warn); }
.homePage .bestTimeHourDetailHead > span[data-status="red"]{ color:var(--bad); }

@media (max-width:960px){
  .homePage .hero{
    grid-template-columns:minmax(0, 1fr);
    gap:20px;
    padding:24px;
    border:1px solid var(--border);
    border-radius:16px;
    background:var(--surface);
  }

  .homePage .heroMain,
  .homePage .heroSide,
  .homePage .heroColumnContinuation{
    padding:0;
    border:0;
  }

  .homePage .heroMain,
  .homePage .heroMainContinuation{
    border-right:0;
  }

  .homePage .heroIndex{
    margin:0;
  }

  .homePage .forecastGrid{
    grid-template-columns:repeat(3, minmax(0, 1fr));
  }

  .homePage .forecastItem:nth-child(3n){
    border-right:0;
  }

  .homePage .forecastItem:nth-child(n+4){
    border-top:1px solid var(--border);
  }
}

@media (max-width:640px){
  .topbar{
    gap:10px;
  }

  .topbarControls{
    display:flex;
    width:100%;
    justify-content:space-between;
    gap:8px;
  }

  .langSwitch{
    width:auto;
    min-width:0;
  }

  .langSwitch button,
  .langSwitch a{
    flex:0 0 42px;
    width:42px;
    min-width:0;
    padding-inline:4px;
    overflow:hidden;
    font-size:0;
    text-align:center;
  }

  .langSwitch button::after,
  .langSwitch a::after{
    font-size:11px;
    letter-spacing:.03em;
  }

  .langSwitch [data-lang="rhyy"]::after{ content:"BS"; }
  .langSwitch [data-lang="de"]::after{ content:"DE"; }
  .langSwitch [data-lang="fr"]::after{ content:"FR"; }
  .langSwitch [data-lang="en"]::after{ content:"EN"; }

  .brandTitle{
    font-size:26px;
  }

  .brandTag{
    font-size:11px;
  }

  .homePage .app{
    padding:12px 12px 28px;
  }

  .homePage #main-content{
    gap:14px;
  }

  .homePage .hero{
    gap:12px;
    padding:14px;
    border-width:1px;
  }

  .homePage .heroEyebrow{
    max-width:22ch;
    margin-bottom:0;
    font-size:32px;
    white-space:normal;
    overflow-wrap:normal;
  }

  .homePage .heroIndex{
    grid-template-columns:minmax(0, 1fr) 44px;
    grid-template-areas:
      "badge signal"
      "title signal"
      "meta meta";
    margin-inline:0;
    min-height:0;
    padding:18px;
  }
  .homePage .indexSignal{ width:44px; height:44px; }

  .homePage .heroStats{ order:6; }
  .homePage .heroBestTime{ order:5; }

  .homePage .indexTitle{
    font-size:28px;
  }

  .homePage .heroTemp{
    min-height:220px;
    padding:20px;
  }

  .homePage .tempValue{
    font-size:clamp(64px, 20vw, 86px);
  }

  .homePage .heroStats{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }

  .homePage .stat{
    min-height:0;
    padding:0;
  }

  .homePage .hydroStat{
    min-height:144px;
  }

  .homePage .flowRecorder{
    --flow-recorder-height:120px;
    min-height:236px;
    padding:0;
  }

  .homePage .flowRecorder .statValue{
    font-size:38px;
  }

  .homePage .flowRecorderInstrument{
    grid-template-columns:minmax(0, 1fr) 56px;
  }

  .homePage .flowRecorderGauge{
    grid-template-columns:34px 12px;
    width:56px;
    padding-right:6px;
  }

  .homePage .flowRecorderGauge .hydroGaugeScale{
    width:34px;
    font-size:7px;
  }

  .homePage .flowRecorderGauge .hydroGaugeMarker{
    width:44px;
  }

  .homePage .flowRecorderContext{
    grid-template-columns:auto auto minmax(0, 1fr);
  }

  .homePage .flowRecorderContextNote{
    grid-column:1 / -1;
    justify-self:start;
    text-align:left;
  }

  .homePage .weatherStat{
    min-height:0;
    padding:16px;
  }

  .homePage .weatherMoments{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }

  .homePage .weatherMoment{
    padding-right:9px;
  }

  .homePage .weatherMoment + .weatherMoment{
    padding-left:10px;
  }

  .homePage .weatherMoment.is-tomorrow{
    grid-column:1 / -1;
    display:grid;
    grid-template-columns:minmax(0, 1fr) auto;
    align-items:end;
    gap:0 12px;
    padding:10px 0;
    border-top:1px solid rgba(16,21,17,.28);
    border-left:0;
  }

  .homePage.theme-dark .weatherMoment.is-tomorrow{
    border-top-color:rgba(255,255,255,.2);
  }

  .homePage .weatherMoment.is-tomorrow .weatherMomentLabel{
    grid-column:1 / -1;
  }

  .homePage .weatherMoment.is-tomorrow .weatherMomentMeta{
    align-self:center;
    margin:0;
    text-align:right;
  }

  .homePage .weatherOverview .weatherIconWrap{
    width:38px;
    height:38px;
  }

  .homePage .weatherOverview .weatherMain{
    font-size:22px;
  }

  .homePage .weatherMoment.is-current .weatherMain{
    font-size:25px;
  }

  .homePage .weatherOverview .weatherSecondary{
    font-size:10px;
  }

  .homePage .statValue{
    font-size:25px;
  }

  .homePage .hydroGaugeScale{
    font-size:8px;
  }

  .homePage .heroSwimTimeValue{
    font-size:23px;
  }

  .homePage > .app .forecast,
  .homePage .todayRhyy,
  .homePage .rhyminderCard,
  .homePage .rhineDevelopment,
  .homePage .swimLogCard,
  .homePage .settings,
  .homePage .feedbackCard{
    padding:16px 14px;
  }

  .homePage .forecastGrid:not(.forecastInstrument){
    grid-template-columns:1fr;
  }

  .homePage .forecastGrid.forecastInstrument{
    display:flex;
    flex-direction:column;
  }

  .homePage .forecastAxis{
    display:none;
  }

  .homePage .forecastReadout{
    display:grid;
    grid-template-columns:52px 36px minmax(0, 1fr) 52px 24px;
    grid-template-rows:58px 28px;
    gap:0 6px;
    width:100%;
    padding:0 8px;
    border-left:0;
    border-bottom:1px solid rgba(16,21,17,.28);
    text-align:left;
  }

  .homePage.theme-dark .forecastReadout{
    border-bottom-color:rgba(255,255,255,.2);
  }

  .homePage .forecastReadout > span,
  .homePage.theme-dark .forecastReadout > span{
    width:auto;
    border-bottom:0;
  }

  .homePage .forecastDate{
    grid-column:1;
    grid-row:1;
    align-items:flex-start;
  }

  .homePage .forecastWeather{ grid-column:2; grid-row:1; }
  .homePage .forecastRiver{ grid-column:3; grid-row:1; }
  .homePage .forecastAirMax{ grid-column:4; grid-row:1; }
  .homePage .forecastSignal{ grid-column:5; grid-row:1; }

  .homePage .forecastFlow{
    grid-column:3 / 5;
    grid-row:2;
    align-items:center;
    justify-content:flex-start !important;
    flex-direction:row;
    gap:5px;
    font-size:11px;
  }

  .homePage .forecastFlow small{
    margin-top:0;
  }

  .homePage .forecastDate b{
    font-size:13px;
  }

  .homePage .forecastDate small{
    margin-top:3px;
    font-size:9px;
  }

  .homePage .forecastWeather img{
    width:36px;
    height:36px;
  }

  .homePage .forecastRiver,
  .homePage .forecastAirMax{
    align-items:flex-start;
    flex-direction:column;
    line-height:1;
  }

  .homePage .forecastRiver{
    font-size:27px;
    letter-spacing:-.04em;
  }

  .homePage .forecastAirMax{
    font-size:18px;
  }

  .homePage .forecastRiver small,
  .homePage .forecastAirMax small{
    display:block;
    margin-top:4px;
    color:var(--muted);
    font-family:var(--rhyy-font);
    font-size:8px;
    font-stretch:100%;
    font-weight:650;
    letter-spacing:0;
    line-height:1;
  }

  .homePage.theme-dark .forecastRiver small,
  .homePage.theme-dark .forecastAirMax small{
    color:var(--muted);
  }

  .homePage .forecastSignal{
    width:22px !important;
    height:22px !important;
    font-size:12px;
  }

  .homePage .forecastDayDetail{
    width:100%;
    padding:11px 10px 13px;
    border-top:0;
    border-bottom:1px solid var(--border);
    background:rgba(255,255,255,.2);
    font-size:11px;
  }

  .homePage.theme-dark .forecastDayDetail{
    background:rgba(255,255,255,.045);
  }

  .homePage .forecastItem,
  .homePage .forecastItem:nth-child(3n){
    min-height:90px;
    border-right:0;
    border-bottom:1px solid var(--border);
  }

  .homePage .forecastItem:last-child{
    border-bottom:0;
  }

  .homePage .historyTiles,
  .homePage .rhineSituationGrid,
  .homePage .swimLogStats{
    grid-template-columns:1fr;
  }

  .homePage .historyTile + .historyTile,
  .homePage .rhineSituationMetric + .rhineSituationMetric,
  .homePage .swimLogStat + .swimLogStat{
    border-top:0;
    border-left:1px solid var(--border);
  }
}

@media (max-width:960px){
  .homePage .heroMain,
  .homePage .heroSide{ display:contents; }
  .homePage .heroColumnFeature{ border-radius:10px; }
  .homePage .homeIntroTop{ margin-bottom:20px; }
  .homePage .heroTemp{ padding:24px; }
  .homePage .heroStats{ order:6; }
  .homePage .heroBestTime{ order:5; }
}

@media (max-width:640px){
  .homePage .app{ padding:16px 16px 28px; }
  .homePage .topbar{ gap:16px; padding-bottom:16px; }
  .homePage .topbarControls{ justify-content:flex-start; }
  .homePage .homeIntro{ padding-top:4px; }
  .homePage .homeIntroTop{ gap:12px; }
  .homePage .sectionNav{ gap:20px; }
  .homePage .sectionNav a{ font-size:12px; }
  .homePage .locationSwitch{ margin-left:auto; }
  .homePage .locationSwitch a{ padding:6px 10px; }
  .homePage .hero{ gap:20px; padding:16px; }
  .homePage .heroTemp{ padding:20px; }
  .homePage .heroEyebrow{ font-size:32px; }
  .homePage .flowRecorderContextNote{ max-width:none; }
  .homePage .heroFeatureHeader{ padding:14px; }
  .homePage .heroHut .swimIntentBox{ padding:14px; }
  .homePage .historyTile + .historyTile,
  .homePage .rhineSituationMetric + .rhineSituationMetric,
  .homePage .swimLogStat + .swimLogStat{ border:0; }
  .homePage .rhyminderBullets{ grid-template-columns:1fr; gap:4px; }
  .homePage .swimLogStats{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
}

/* Decision first; its evidence stays close and readable. */
.homePage .indexStatusLine{
  grid-area:badge;
  display:flex;
  align-items:baseline;
  gap:12px;
}
.homePage .indexNow{ font-size:13px; font-weight:600; }
.homePage .heroBestTime{ min-width:0; gap:12px; }
.homePage .heroBestTime > .bestTimeAirPeak{ margin:0; }
.homePage .todayBestTimeHead > div{ min-width:0; width:100%; }
.homePage .todayBestTimePeak{ font-size:22px; font-weight:650; line-height:1.25; text-wrap:balance; }
.homePage .bestTimeScope{ margin:8px 0 0; color:var(--muted); font-size:12px; line-height:1.6; max-width:60ch; }
.homePage .heroBestTime .waterQuality{ order:0; min-height:0; margin:0; padding:12px; border:1px solid var(--border); border-radius:8px; }
.homePage .heroBestTime .waterQuality summary{ min-height:44px; }
.homePage .heroBestTime .waterQualityLead > strong{ font-size:15px; line-height:1.4; }
.homePage .heroBestTime .waterQualityLead > small{ font-size:12px; line-height:1.5; }
.homePage .heroBestTime .waterQualityKicker{ display:none; }
.homePage .bestTimeToolbar{ display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:44px; font-size:13px; font-weight:600; }
.homePage .bestTimeNavigation{ display:flex; gap:8px; }
.homePage .bestTimeNavigation[hidden]{ display:none; }
.homePage .bestTimeNavigation button{ width:44px; min-height:44px; padding:0; border:1px solid var(--border); border-radius:6px; background:var(--surface); color:var(--text); font-size:20px; cursor:pointer; transition:background 160ms ease; }
.homePage .bestTimeNavigation button:hover:not(:disabled),
.homePage .bestTimeHour:hover{ background:var(--surface-tint); }
.homePage .bestTimeNavigation button:disabled{ opacity:.35; cursor:default; }
.homePage .bestTimeGuide{ color:var(--muted); font-size:12px; }
.homePage .bestTimeGuide summary,
.homePage .bestTimeChecks summary{ min-height:44px; padding:12px 0; cursor:pointer; font-size:13px; font-weight:550; }
.homePage .bestTimeGuide .todayBestTimeLegend{ margin:0 0 8px; font-size:12px; gap:12px; }
.homePage .bestTimeChecks{ border-top:1px solid var(--border); }
.homePage .bestTimeChecks summary{ padding:12px 16px; color:var(--text); }
.homePage .bestTimeFactorResult{ display:flex; align-items:center; gap:6px; font-size:12px; white-space:nowrap; }
.homePage .bestTimeFactorCopy small:empty{ display:none; }
.homePage .bestTimeNavigation button:focus-visible,
.homePage .bestTimeGuide summary:focus-visible,
.homePage .bestTimeChecks summary:focus-visible{ outline:3px solid var(--accent); outline-offset:3px; }

/* Lower-page rhythm: invitation, river instruments, personal logbook. */
.homePage .rhyminderCard{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  padding:36px 280px 32px 32px;
  background:#d7efea;
  color:#123e40;
  border-color:transparent;
}
.homePage.theme-dark .rhyminderCard{ background:#25484a; color:#e5f5ef; }
.homePage .rhyminderCard .cardHeader{ display:block; margin-bottom:16px; }
.homePage .rhyminderCard .cardTitle{ max-width:24ch; font-size:clamp(26px,3vw,36px); line-height:1.12; letter-spacing:-.035em; color:inherit; text-wrap:balance; }
.homePage .rhyminderCard .badge{ display:none; }
.homePage .rhyminderLead{ max-width:48ch; color:inherit; font-size:16px; line-height:1.55; }
.homePage .rhyminderIllustration{ position:absolute; z-index:-1; width:220px; height:200px; right:32px; top:50%; transform:translateY(-50%); color:inherit; }
.homePage .rhyminderBullets{ display:flex; flex-wrap:wrap; gap:8px 20px; margin:20px 0 24px; }
.homePage .rhyminderBullet{ display:flex; gap:8px; padding:0; color:inherit; font-size:12px; }
.homePage .rhyminderBullet::before{ content:""; width:4px; height:4px; margin-top:7px; flex-shrink:0; background:currentColor; border-radius:50%; }
.homePage .rhyminderCard .secondaryCtaLink{ min-height:48px; padding:12px 18px; background:#123e40; color:#fff; border:0; gap:24px; }
.homePage .rhyminderCard .secondaryCtaLink::after{ content:"↗"; font-size:20px; }
.homePage .rhyminderCard .secondaryCtaLink:hover{ background:#205b5c; }
.homePage .rhineDevelopment,
.homePage .swimLogCard{ padding:32px; }
.homePage .rhineDevelopment .cardTitle,
.homePage .swimLogCard .cardTitle{ font-size:26px; letter-spacing:-.025em; line-height:1.2; }
.homePage .rhineSituationLead,
.homePage .swimLogLead{ max-width:65ch; margin-top:8px; line-height:1.6; }
.homePage .developmentModeSwitch{ display:flex; width:fit-content; max-width:100%; margin-top:10px; background:transparent; padding:0; border-radius:0; border-bottom:1px solid var(--border); gap:24px; }
.homePage .developmentModeSwitch button{ flex:0 1 auto; min-height:48px; padding:10px 0; border-radius:0; border-bottom:3px solid transparent; background:transparent; color:var(--muted); }
.homePage .developmentModeSwitch button.is-active{ background:transparent; color:var(--text); border-bottom-color:var(--accent-2); }
.homePage .rhineDevelopment .toggleRow{ margin-top:8px; }
.homePage .rhineDevelopment .toggleRow button{ min-height:40px; min-width:48px; }
.homePage .rhineSituationGrid{ gap:0; margin:8px 0 12px; }
.homePage .rhineSituationMetric{ padding:8px 24px 8px 0; background:transparent; border:0; border-radius:0; gap:10px; }
.homePage .rhineSituationMetric + .rhineSituationMetric{ padding-left:24px; border-left:1px solid var(--border); }
.homePage .rhineSituationMetricTitle{ font-size:12px; letter-spacing:.04em; }
.homePage .rhineSituationMetricMain{ flex-wrap:wrap; align-items:center; justify-content:flex-start; gap:8px 12px; }
.homePage .rhineSituationMetricMain strong{ font-size:clamp(26px,3vw,40px); font-weight:600; letter-spacing:-.04em; line-height:1.2; }
.homePage .rhineSituationDirection{ font-size:12px; background:var(--surface-muted); }
.homePage .rhineSituationRecent{ padding-top:12px; margin-top:4px; }
.homePage .rhineSituationOfficial{ padding:16px; border:0; border-left:3px solid var(--border); background:var(--surface-muted); border-radius:0 6px 6px 0; }
.homePage .historyTile{ padding:18px; }
.homePage .swimLogCard{ border-top:3px solid var(--accent-2); }
.homePage .swimLogStats{ gap:0; padding:8px 0 20px; border-bottom:1px solid var(--border); }
.homePage .swimLogStat{ padding:8px 20px; background:transparent; border-radius:0; border:0; border-left:1px solid var(--border); gap:8px; }
.homePage .swimLogStat:first-child{ padding-left:0; border-left:0; }
.homePage .swimLogStat span{ font-size:12px; font-weight:500; }
.homePage .swimLogStat strong{ font-size:32px; font-weight:600; letter-spacing:-.035em; }
.homePage .swimLogComposer{ border:0; border-radius:6px; background:var(--surface-muted); }
.homePage .swimLogComposer > summary{ min-height:52px; padding:14px 18px; background:#087d82; color:#fff; font-size:15px; font-weight:600; }
.homePage .swimLogComposer > summary:hover{ background:#076b70; }
.homePage .swimLogComposer > summary:focus-visible{ outline:3px solid var(--text); outline-offset:-4px; box-shadow:none; }
.homePage .swimLogEmpty{ position:relative; min-height:132px; align-content:center; padding:24px 24px 24px 88px; border:0; border-radius:0; background:transparent; gap:8px; }
.homePage .swimLogEmpty::before{ content:"≈"; position:absolute; left:12px; top:50%; transform:translateY(-50%); color:var(--accent-2); font-size:64px; line-height:1; font-weight:400; }
.homePage .swimLogEmpty strong{ font-size:18px; font-weight:600; }
.homePage .swimLogEmpty span{ max-width:52ch; font-size:14px; line-height:1.6; }
.homePage .feedbackCard{ padding:8px 12px; background:transparent; border:0; border-top:1px solid var(--border); border-bottom:1px solid var(--border); border-radius:0; }
.homePage .feedbackSummary{ min-height:64px; }
.homePage .feedbackBody{ padding:12px; }
@media (max-width:800px){
  .homePage .rhyminderCard{ padding:28px 180px 28px 24px; }
  .homePage .rhyminderIllustration{ width:150px; right:16px; }
  .homePage .rhineDevelopment,.homePage .swimLogCard{ padding:24px; }
  .homePage .rhineSituationGrid{ grid-template-columns:repeat(3,minmax(0,1fr)); }
  .homePage .rhineSituationMetric + .rhineSituationMetric{ padding-left:16px; }
  .homePage .rhineSituationMetric{ padding-right:16px; }
}
@media (max-width:600px){
  .homePage .rhyminderCard{ padding:24px 20px; }
  .homePage .rhyminderIllustration{ position:static; display:block; width:104px; height:86px; transform:none; margin:0 0 16px -8px; }
  .homePage .rhyminderCard .cardTitle{ font-size:28px; }
  .homePage .rhyminderBullets{ display:grid; gap:10px; }
  .homePage .rhineDevelopment,.homePage .swimLogCard{ padding:24px 20px; }
  .homePage .rhineDevelopment .cardHeader,.homePage .swimLogCard .cardHeader{ align-items:flex-start; flex-direction:column; gap:12px; }
  .homePage .rhineSituationGrid{ grid-template-columns:1fr; }
  .homePage .rhineSituationMetric,.homePage .rhineSituationMetric + .rhineSituationMetric{ padding:20px 0; border:0; border-bottom:1px solid var(--border); }
  .homePage .rhineSituationMetricMain{ justify-content:space-between; }
  .homePage .rhineSituationMetricMain strong{ font-size:36px; }
  .homePage .rhineSituationOfficial{ align-items:flex-start; flex-direction:column; }
  .homePage .swimLogStats{ grid-template-columns:repeat(2,minmax(0,1fr)); row-gap:20px; }
  .homePage .swimLogStat:nth-child(3){ border-left:0; padding-left:0; }
  .homePage .swimLogEmpty{ padding:24px 0 24px 52px; }
  .homePage .swimLogEmpty::before{ left:0; font-size:44px; }
}

@media (prefers-reduced-motion:reduce){
  .homePage *,
  .homePage *::before,
  .homePage *::after{
    scroll-behavior:auto !important;
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
}

/* Shared secondary pages and footer inherit the global theme above. */
.subPage .app{ max-width:1120px; padding:24px 40px 40px; }
.subPage .app-narrow{ max-width:920px; }
.subPage .topbar{ margin-bottom:32px; }
.subPage .card{ background:var(--surface); border:1px solid var(--border); box-shadow:none; backdrop-filter:none; }
.subPage .pageCard{ width:100%; max-width:none; padding:40px; gap:20px; }
.subPage .pageTitle{ max-width:22ch; font-size:clamp(32px,5vw,48px); line-height:1.1; letter-spacing:-.035em; font-weight:650; text-wrap:balance; }
.subPage .pageEyebrow{ color:var(--accent-2); text-transform:none; letter-spacing:0; font-weight:600; }
.subPage .pageLead{ max-width:62ch; font-size:18px; line-height:1.6; }
.subPage .sectionTitle{ font-size:22px; font-weight:600; letter-spacing:-.015em; margin-top:20px; }
.subPage .pageCard .cardHint{ font-size:14px; line-height:1.75; max-width:70ch; margin:0; }
.subPage .inlineBackLink{ width:fit-content; min-height:44px; display:inline-flex; align-items:center; }
.subPage :is(.primaryButton,.primaryLink,.primaryCtaLink){ background:#087d82; color:#fff; border-radius:8px; font-weight:600; }
.subPage :is(.primaryButton,.primaryLink,.primaryCtaLink):hover{ background:#076b70; }
.subPage .pageForm :is(input,select,textarea){ background:var(--control-bg); border-color:var(--control-border); color:var(--text); border-radius:8px; }
.subPage .rhyminderSnapshot{ padding:16px 20px; background:var(--surface-tint); border:0; border-left:3px solid var(--accent-2); border-radius:0 8px 8px 0; }
.subPage .rhyminderTimeOption span{ box-shadow:none; }
.siteFooter, .homePage .siteFooter{ margin-top:48px; padding:32px 0 8px; border-top:1px solid var(--border); text-align:left; }
.siteFooter .footerMain{ display:flex; justify-content:space-between; align-items:flex-start; gap:32px; padding-bottom:28px; }
.siteFooter .footerBrand{ display:inline-flex; align-items:center; gap:10px; color:var(--text); font-size:28px; font-weight:650; letter-spacing:-.035em; text-decoration:none; }
.siteFooter .footerIdentity p{ margin:10px 0 12px; font-size:13px; }
.siteFooter .footerLocation{ justify-content:flex-start; gap:10px; margin:0; }
.siteFooter .footerLocation a{ font-weight:550; }
.siteFooter .footerNav{ display:flex; align-items:center; justify-content:flex-end; gap:8px 24px; flex-wrap:wrap; max-width:370px; }
.siteFooter .footerNav > a{ display:inline-flex; align-items:center; min-height:44px; color:var(--text); font-size:14px; font-weight:550; text-decoration:none; }
.siteFooter .footerNav a:hover{ color:var(--accent-2); text-decoration:underline; text-underline-offset:4px; }
.siteFooter .footerApps{ width:100%; justify-content:flex-end; gap:10px; margin:8px 0 0; }
 .siteFooter .footerApps a{ min-height:56px; display:inline-flex; align-items:center; gap:10px; padding:9px 16px; border:1px solid var(--border); border-radius:9px; background:var(--surface); color:var(--text); text-decoration:none; transition:background 140ms ease, border-color 140ms ease; }
.siteFooter .footerApps svg{ width:24px; height:24px; flex-shrink:0; }
.siteFooter .footerApps span{ display:grid; gap:1px; }
.siteFooter .footerApps small{ font-size:10px; line-height:1.2; font-weight:450; color:var(--muted); }
.siteFooter .footerApps strong{ font-size:15px; line-height:1.3; font-weight:600; letter-spacing:-.02em; white-space:nowrap; }
.siteFooter .footerApps a:hover{ background:var(--surface-tint); border-color:var(--accent-2); color:var(--text); text-decoration:none; }
@media(max-width:380px){
  .siteFooter .footerApps a{ padding:9px 10px; gap:8px; }
  .siteFooter .footerApps strong{ font-size:14px; }
}
.siteFooter .footerBottom{ display:flex; justify-content:space-between; gap:12px 32px; flex-wrap:wrap; border-top:1px solid var(--border); padding-top:20px; }
.siteFooter .footerMeta{ margin:0; line-height:1.6; }
.siteFooter .footerCredit{ justify-content:flex-start; color:var(--muted); line-height:1.6; }
.siteFooter a:focus-visible, .subPage a:focus-visible{ outline:3px solid var(--accent-2); outline-offset:4px; border-radius:3px; }
@media (max-width:640px){
  .subPage .app{ padding:20px 16px 28px; }
  .subPage .pageCard{ padding:24px 20px; }
  .subPage .topbar{ align-items:flex-start; gap:20px; margin-bottom:24px; }
  .subPage .topbarControls{ justify-content:space-between; width:100%; }
  .subPage .pageLead{ font-size:16px; }
  .siteFooter .footerMain{ flex-direction:column; gap:16px; }
  .siteFooter .footerNav{ justify-content:flex-start; max-width:none; gap:4px 24px; }
  .siteFooter .footerApps{ justify-content:flex-start; }
  .siteFooter .footerBottom{ flex-direction:column; }
}

body.theme-dark .langSwitch :is(button, a).is-active{ color:var(--text); background:var(--surface); }
.langSwitch a + a{ border-left:0; }

.homePage .bestTimeAirComfort{ margin:10px 0 0; padding-left:12px; border-left:3px solid var(--accent-2); color:var(--text); font-size:13px; line-height:1.6; font-weight:500; }

.homePage .forecastReadout.is-cool-air[data-status="green"] .forecastSignal{ display:flex; flex-direction:column; align-items:center; justify-content:center; width:auto !important; height:auto !important; min-height:30px; border:0; background:transparent; color:var(--ok); font-size:14px; gap:2px; }
.homePage .forecastSignal small{ font-size:11px; font-weight:500; }
.homePage .forecastAirComfort{ color:var(--text); font-weight:500; }
@media(max-width:760px){
  .homePage .forecastReadout.is-cool-air[data-status="green"] .forecastSignal{ flex-direction:column; gap:0; }
  .homePage .forecastSignal small{ font-size:10px; }
}

/* Fill the desktop gap only while hourly checks are expanded. Keep the same
   DOM nodes so the webcam stream and community controls retain their state. */
.homePage .heroMeasurementColumn{ display:contents; }
@media(max-width:960px){
  .homePage .heroMeasurementColumn > .heroColumnContinuation{ grid-column:1 / -1; }
}
@media(min-width:961px){
  .homePage .hero:has(.bestTimeChecks[open]) .heroMeasurementColumn{ display:grid; grid-column:1; grid-row:1; align-self:start; align-content:start; gap:24px; min-width:0; }
  .homePage .hero:has(.bestTimeChecks[open]) .heroMeasurementColumn > :is(.heroMain,.heroColumnContinuation){ grid-column:1; grid-row:auto; }
}

/* Private logbook: the same Rhyy surfaces, type and controls as the river panels. */
.homePage #swim-log{ gap:20px; }
#swim-log .swimLogHeader{ align-items:center; flex-direction:row; gap:16px; margin:0; }
#swim-log .swimLogLead{ margin-top:6px; font-size:14px; }
#swim-log .swimLogAdd{ flex-shrink:0; gap:8px; min-height:44px; padding:10px 16px; }
#swim-log .secondaryCtaLink{ background:var(--rhyy-rhine); color:#fff; border:1px solid transparent; font-size:14px; font-weight:600; }
#swim-log .secondaryCtaLink:hover{ background:color-mix(in srgb,var(--rhyy-rhine) 85%,var(--rhyy-ink)); }
#swim-log .swimLogStats{ grid-template-columns:repeat(3,minmax(0,1fr)); padding:4px 0 20px; gap:0; }
#swim-log .swimLogStat{ border:0; border-left:1px solid var(--border); padding:4px 24px; background:transparent; gap:6px; }
#swim-log .swimLogStat:first-child{ border-left:0; padding-left:0; }
#swim-log .swimLogStat strong{ font-size:28px; font-weight:600; letter-spacing:-.03em; }
#swim-log .swimLogStat span{ font-size:12px; font-weight:450; overflow-wrap:normal; }
#swim-log .swimLogEmpty{ min-height:100px; padding:20px 20px 20px 64px; gap:6px; }
#swim-log .swimLogEmpty::before{ left:0; font-size:48px; }
#swim-log .swimLogEmpty strong{ font-size:17px; }
#swim-log .swimLogPlans:empty,#swim-log .swimLogEntries:empty{ display:none; }
#swim-log .swimLogEntries{ display:block; }
#swim-log .swimLogEntry{ position:relative; display:grid; grid-template-columns:minmax(0,1fr) auto; gap:10px 20px; padding:20px 0; border:0; border-top:1px solid var(--border); border-radius:0; background:transparent; }
#swim-log .swimLogEntry:first-child{ border-top:0; padding-top:4px; }
#swim-log .swimLogEntry:last-child{ padding-bottom:0; }
#swim-log .swimLogEntryHead{ grid-column:1; padding-right:44px; align-items:center; }
#swim-log .swimLogEntryHead strong{ font-size:16px; font-weight:600; }
#swim-log .swimLogEntryEyebrow{ font-size:11px; font-weight:500; letter-spacing:0; color:var(--muted); }
#swim-log .swimLogEntryFacts{ display:flex; align-items:baseline; gap:12px; grid-column:2; grid-row:1; margin-right:52px; }
#swim-log .swimLogTemperature{ font-size:26px; font-weight:600; letter-spacing:-.035em; color:var(--accent); white-space:nowrap; }
#swim-log .swimLogCondition{ font-size:12px; color:var(--muted); }
#swim-log .swimLogCondition[data-status="green"]{ color:var(--ok); }
#swim-log .swimLogCondition[data-status="yellow"]{ color:var(--warn); }
#swim-log .swimLogCondition[data-status="red"]{ color:var(--bad); }
#swim-log .swimLogChips{ display:flex; flex-wrap:wrap; gap:6px; grid-column:1 / -1; }
#swim-log .swimLogChips span{ padding:4px 9px; border-radius:4px; background:var(--surface-muted); color:var(--muted); font-size:12px; }
#swim-log .swimLogEntryNote{ grid-column:1 / -1; padding:0; background:transparent; font-size:14px; line-height:1.6; }
#swim-log .swimLogEntryDetails{ grid-column:1 / -1; color:var(--muted); font-size:12px; }
#swim-log .swimLogEntryDetails > summary{ width:fit-content; min-height:36px; display:flex; align-items:center; gap:8px; list-style:none; cursor:pointer; }
#swim-log .swimLogEntryDetails > summary::after{ content:'＋'; }
#swim-log .swimLogEntryDetails[open] > summary::after{ content:'−'; }
#swim-log summary::-webkit-details-marker{ display:none; }
#swim-log .swimLogConditionsGrid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; margin:8px 0 0; padding:16px; background:var(--surface-muted); border-radius:var(--radius-md); }
#swim-log .swimLogConditionsGrid dt{ font-size:11px; margin-bottom:3px; }
#swim-log .swimLogConditionsGrid dd{ margin:0; color:var(--text); font-weight:500; overflow-wrap:anywhere; }
#swim-log .swimLogEntryMenu{ position:absolute; top:16px; right:0; z-index:1; }
#swim-log .swimLogEntry:first-child .swimLogEntryMenu{ top:0; }
#swim-log .swimLogEntryMenu > summary{ list-style:none; cursor:pointer; display:grid; place-items:center; width:44px; height:44px; font-size:24px; line-height:1; border-radius:var(--radius-sm); color:var(--muted); }
#swim-log .swimLogEntryMenu > summary:hover{ background:var(--surface-muted); }
#swim-log .swimLogEntryMenuItems{ position:absolute; right:0; top:44px; width:160px; display:grid; padding:4px; border:1px solid var(--border); border-radius:var(--radius-sm); background:var(--surface); box-shadow:var(--shadow-md); }
#swim-log .swimLogEntryMenuItems button{ border:0; padding:10px 12px; text-align:left; }
#swim-log .swimLogMore{ padding:12px; border:1px solid var(--border); border-radius:var(--radius-sm); background:transparent; color:var(--accent); font:inherit; font-size:14px; cursor:pointer; }
#swim-log .swimLogMore:hover{ background:var(--surface-muted); }
#swim-log .swimLogEntryPlanned,#swim-log .swimLogEntryPlanned:first-child{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding:16px; border:1px solid color-mix(in srgb,var(--accent) 22%,var(--border)); border-radius:var(--radius-md); background:var(--surface-tint); }
#swim-log .swimLogEntryPlanned > div:first-child{ display:grid; gap:3px; }
#swim-log .swimLogEntryPlanned strong{ font-size:17px; font-weight:600; }
#swim-log .swimLogPlannedMeta{ font-size:12px; color:var(--muted); font-weight:400; }
#swim-log .swimLogPlans{ display:grid; gap:8px; }
#swim-log .swimLogAnalytics{ padding:0; border-bottom:1px solid var(--border); }
#swim-log .swimLogAnalytics > summary{ min-height:44px; display:flex; align-items:center; justify-content:space-between; padding-bottom:12px; font-size:14px; color:var(--muted); cursor:pointer; list-style:none; }
#swim-log .swimLogAnalytics[open] > summary > span:last-child{ transform:rotate(180deg); }
#swim-log .swimLogAnalyticsBody{ display:grid; gap:16px; padding:4px 0 20px; }
#swim-log .swimLogChartHead,#swim-log .swimLogChartDates{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; font-size:12px; color:var(--muted); }
#swim-log [data-swim-log-chart] svg{ display:block; width:100%; height:90px; overflow:visible; }
#swim-log [data-swim-log-chart] path{ fill:none; stroke:var(--accent); stroke-width:2.5; vector-effect:non-scaling-stroke; stroke-linecap:round; stroke-linejoin:round; }
#swim-log [data-swim-log-chart] circle{ fill:var(--accent); }
#swim-log .swimLogChartDates{ font-size:11px; padding-top:8px; }
#swim-log .swimLogExtraStats{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); }
#swim-log .swimLogExtraStats .swimLogStat{ padding:4px 12px; }
#swim-log .swimLogExtraStats .swimLogStat:first-child{ padding-left:0; }
#swim-log .swimLogExtraStats strong{ font-size:20px; }
#swim-log .swimLogSyncLauncher{ display:flex; align-items:center; justify-content:space-between; gap:12px; width:100%; min-height:48px; padding:16px 0 0; border:0; border-top:1px solid var(--border); background:transparent; color:var(--muted); font:inherit; font-size:13px; font-weight:500; cursor:pointer; text-align:left; }
#swim-log .swimLogSyncLauncher::after{ content:'↗'; color:var(--accent); font-size:18px; }
#swim-log .swimLogSyncLauncher:hover{ color:var(--accent); }
#swim-log .swimLogDialog{ width:min(560px,calc(100% - 32px)); max-height:calc(100dvh - 48px); padding:0; border:1px solid var(--border); border-radius:var(--radius-xl); background:var(--surface); color:var(--text); font:inherit; box-shadow:0 24px 80px #0003; }
#swim-log .swimLogDialog::backdrop{ background:rgba(9,28,30,.56); }
#swim-log .swimLogDialogHeader{ position:sticky; top:0; z-index:2; display:flex; align-items:center; justify-content:space-between; gap:16px; padding:16px 24px; background:var(--surface); border-bottom:1px solid var(--border); }
#swim-log .swimLogDialogHeader h3{ margin:0; font-size:19px; font-weight:600; letter-spacing:-.015em; }
#swim-log .swimLogClose{ flex:0 0 44px; display:grid; place-items:center; padding:0; min-height:44px; width:44px; border:0; background:var(--surface-muted); color:var(--muted); font:inherit; font-size:26px; border-radius:var(--radius-sm); cursor:pointer; }
#swim-log .swimLogClose:hover{ color:var(--text); }
#swim-log .swimLogForm{ padding:24px; border:0; gap:20px; }
#swim-log .swimLogFormGrid{ padding:0; gap:16px; grid-template-columns:repeat(2,minmax(0,1fr)); }
#swim-log .swimLogForm label{ font-weight:500; font-size:13px; gap:8px; }
#swim-log .swimLogForm input,#swim-log .swimLogForm textarea{ font-size:16px; background:var(--surface-muted); border:1px solid transparent; }
#swim-log .swimLogForm textarea{ min-height:96px; }
#swim-log .swimLogFeelings{ border:0; padding:0; margin:0; min-width:0; }
#swim-log .swimLogFeelings legend{ padding:0; margin-bottom:8px; color:var(--muted); font-size:13px; }
#swim-log .swimLogFeelingChoices{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; }
#swim-log .swimLogFeelingChoices button{ min-height:44px; padding:8px; border:1px solid var(--border); border-radius:var(--radius-sm); background:var(--surface); color:var(--muted); font:inherit; font-size:14px; cursor:pointer; }
#swim-log .swimLogFeelingChoices button[aria-pressed="true"]{ background:var(--surface-tint); border-color:var(--accent); color:var(--accent); }
#swim-log .swimLogFormActions{ justify-content:flex-end; border-top:1px solid var(--border); padding-top:16px; }
#swim-log .ghost{ min-height:44px; padding:10px 14px; border:1px solid var(--border); border-radius:var(--radius-sm); color:var(--text); background:transparent; font:inherit; font-size:13px; font-weight:500; cursor:pointer; }
#swim-log .ghost:hover{ background:var(--surface-muted); }
#swim-log .is-destructive{ color:var(--danger); }
#swim-log button:disabled{ opacity:.5; cursor:default; }
#swim-log .swimLogFormError{ margin:0; color:var(--danger); font-size:14px; }
#swim-log .swimLogFormPlan{ margin:0; font-size:13px; color:var(--muted); }
#swim-log .logbookSyncBody{ padding:20px 24px 24px; gap:16px; }
#swim-log .logbookSyncBody p{ font-size:13px; line-height:1.55; }
#swim-log .logbookSyncNavigation{ display:grid; grid-template-columns:1fr 1fr; gap:4px; padding:4px; border-radius:var(--radius-sm); background:var(--surface-muted); }
#swim-log .logbookSyncNavigation button{ text-align:center; border:0; border-radius:6px; }
#swim-log .logbookSyncNavigation button[aria-pressed="true"]{ color:var(--text); background:var(--surface); box-shadow:0 1px 3px #0001; }
#swim-log .logbookSyncPane{ display:grid; gap:16px; }
#swim-log .logbookSyncGroup{ padding:0; border:0; gap:14px; }
#swim-log .logbookSyncDisclosure{ border-top:1px solid var(--border); padding-top:4px; }
#swim-log .logbookSyncDisclosure > summary{ display:flex; align-items:center; justify-content:space-between; min-height:44px; color:var(--text); cursor:pointer; font-size:14px; font-weight:500; list-style:none; }
#swim-log .logbookSyncDisclosure > summary::after{ content:'＋'; color:var(--muted); }
#swim-log .logbookSyncDisclosure[open] > summary::after{ content:'−'; }
#swim-log .logbookSyncDisclosureBody{ display:grid; gap:12px; padding:8px 0 16px; }
#swim-log .logbookSync input,#swim-log .logbookSync textarea{ font-size:16px; background:var(--surface-muted); }
#swim-log .logbookSync label{ font-weight:500; color:var(--muted); }
#swim-log .logbookSync textarea[readonly]{ min-height:70px; font-family:ui-monospace,monospace; font-size:12px; line-height:1.5; }
#swim-log .logbookSync h4{ margin:0; font-size:15px; font-weight:600; }
#swim-log .logbookSyncKey{ padding:16px; border-radius:var(--radius-md); background:var(--surface-tint); }
#swim-log .logbookSyncCheck{ display:flex; flex-direction:row; align-items:center; gap:10px; min-height:44px; color:var(--text); }
#swim-log .logbookSyncCheck input{ flex:0 0 18px; width:18px; min-height:18px; accent-color:var(--rhyy-rhine); }
#swim-log .logbookSyncStatus{ font-size:12px; color:var(--muted); font-weight:450; }
#swim-log .logbookSyncStatus[data-error="true"]{ color:var(--danger); }
#swim-log .logbookSyncQR{ margin:auto; border:12px solid #fff; border-radius:8px; }
#swim-log .logbookSyncDevices li{ font-size:13px; }
#swim-log .logbookSyncVerify{ font-size:20px; letter-spacing:.03em; }

/* One light palette across the dashboard, forms and information pages. */
html:not(.theme-dark),body:not(.theme-dark){
  --rhyy-rhine:#096b70;
  --surface-emphasis:#bcd9cb;
  --border-strong:#87a49a;
}
body:not(.theme-dark) :is(.langSwitch,.locationSwitch){ background:var(--surface-muted); border-color:var(--border-strong); }
body:not(.theme-dark) :is(.langSwitch :is(button,a).is-active,.locationSwitch a[aria-current="page"]){ background:var(--accent); color:#fff; box-shadow:none; }
body:not(.theme-dark) .themeToggle{ background:var(--surface); border-color:var(--border-strong); }
body:not(.theme-dark) .themeToggle:hover{ background:var(--accent); color:#fff; }
body:not(.theme-dark) :is(.primaryButton,.primaryLink,.primaryCtaLink){ background:var(--rhyy-rhine); border-color:var(--rhyy-rhine); }
body:not(.theme-dark) :is(.primaryButton,.primaryLink,.primaryCtaLink):hover{ background:#07575b; border-color:#07575b; }
body:not(.theme-dark) :is(input,select,textarea):not([type="checkbox"]):not([type="radio"]):not([type="hidden"]){ background:var(--control-bg); border-color:var(--control-border); }
body:not(.theme-dark) :is(a,button,input,select,textarea,summary):focus-visible{ outline:3px solid var(--accent); outline-offset:3px; }
body.homePage:not(.theme-dark) .sectionNav a{ color:var(--text); font-weight:600; }
body.homePage:not(.theme-dark) .sectionNav a:hover{ color:var(--accent); }
body.homePage:not(.theme-dark) .sectionHeading{ color:var(--accent); }
body.homePage:not(.theme-dark) .heroTemp{ background:var(--surface-emphasis); }
body.homePage:not(.theme-dark) .tempValue{ color:#16483e; font-weight:600; }
body.homePage:not(.theme-dark) .temperatureTrace{ opacity:.34; }
body.homePage:not(.theme-dark) .heroIndex{
  background:color-mix(in srgb,var(--decision-color) 17%,var(--surface));
  border-color:color-mix(in srgb,var(--decision-color) 50%,var(--border));
}
body.homePage .heroIndex[data-comfort="excellent"]{ --decision-color:#d6edc4; background:#214f43; border-color:#214f43; color:#f1f7ee; }
body.homePage .heroIndex[data-comfort="excellent"] .indexSignal{ color:#214f43; background:#d6edc4; border-color:#d6edc4; }
body.homePage.theme-dark .heroIndex[data-comfort="excellent"]{ background:#254d43; border-color:#668f78; }
body.homePage:not(.theme-dark) .heroFeatureHeader{ background:var(--surface-muted); border-bottom:1px solid var(--border); border-radius:15px 15px 0 0; }
body.homePage:not(.theme-dark) .bestTimeHour[aria-pressed="true"]{ background:var(--accent); color:#fff; }
body.homePage:not(.theme-dark) .bestTimeHour[aria-pressed="true"] .bestTimeTick{ color:#fff; }
body.homePage:not(.theme-dark) .bestTimeHourDetail{ border-color:var(--border-strong); }
body.homePage:not(.theme-dark) .bestTimeHourDetailHead{ background:var(--surface-muted); }
body.homePage:not(.theme-dark) .forecastAxis{ background:var(--surface-muted); }
body.homePage:not(.theme-dark) .forecastReadout:hover{ background:var(--surface-muted); }
body.homePage:not(.theme-dark) .forecastReadout[aria-expanded="true"],
body.homePage:not(.theme-dark) .forecastDayDetail{ background:var(--surface-tint); }
body.homePage:not(.theme-dark) .developmentModeSwitch button.is-active{ color:var(--accent); font-weight:650; }
body.homePage:not(.theme-dark) .toggleRow button.is-active{ background:var(--accent); border-color:var(--accent); color:#fff; }
body.homePage:not(.theme-dark) .rhineSituationGrid{ padding:16px; border:1px solid var(--border); border-radius:var(--radius-md); background:var(--surface-muted); }
body.homePage:not(.theme-dark) .historyTile{ background:var(--surface-tint); }
body.homePage:not(.theme-dark) .rhyminderCard{ background:var(--surface-emphasis); }
body.subPage:not(.theme-dark) .pageCard{ border-top:3px solid var(--accent); }
body.subPage:not(.theme-dark) .rhyminderTimeOption input:checked + span{ background:var(--accent); border-color:var(--accent); color:#fff; }
body.subPage:not(.theme-dark) .rhyminderTimeOption input:checked + span :is(strong,small){ color:inherit; }
body:not(.theme-dark) .siteFooter .footerApps a{ border-color:var(--border-strong); }

/* The personal summary uses the same emphasis as the river instruments. */
body:not(.theme-dark) #swim-log .swimLogStats{
  padding:18px 20px;
  border:1px solid #a9c8bc;
  border-radius:var(--radius-md);
  background:var(--surface-tint);
}
body:not(.theme-dark) #swim-log .swimLogStats .swimLogStat{ border-left-color:#a9c8bc; }
body:not(.theme-dark) #swim-log .swimLogStats .swimLogStat:last-child{ padding-right:0; }
body:not(.theme-dark) #swim-log .swimLogStats strong{ color:#124e49; }
body:not(.theme-dark) #swim-log .swimLogStat span{ font-weight:550; }
body:not(.theme-dark) #swim-log .swimLogChips span{ background:#dcebe4; color:#28534b; font-weight:500; }
body:not(.theme-dark) #swim-log :is(.swimLogAnalytics > summary,.swimLogSyncLauncher){ color:var(--accent); font-weight:600; }
body:not(.theme-dark) #swim-log .swimLogMore{ background:var(--surface-muted); border-color:#91b2a7; font-weight:600; }
body:not(.theme-dark) #swim-log .swimLogMore:hover{ background:var(--surface-tint); }
body:not(.theme-dark) #swim-log :is(.swimLogDialogHeader,.logbookSyncNavigation){ background:var(--surface-muted); }
body:not(.theme-dark) #swim-log :is(.swimLogForm input,.swimLogForm textarea){ border-color:var(--control-border); }
body:not(.theme-dark) #swim-log .swimLogFeelingChoices button[aria-pressed="true"]{ background:var(--accent); color:#fff; }
@media(max-width:680px){
  .homePage #swim-log{ padding:24px 20px; gap:16px; }
  #swim-log .swimLogHeader{ align-items:flex-start; flex-wrap:wrap; }
  #swim-log .swimLogHeader .cardTitle{ font-size:24px; }
  #swim-log .swimLogAdd{ padding:10px 12px; }
  #swim-log .swimLogStat{ padding:4px 10px; border-left:1px solid var(--border); }
  #swim-log .swimLogStat:nth-child(3){ padding-left:10px; border-left:1px solid var(--border); }
  #swim-log .swimLogStat strong{ font-size:23px; }
  #swim-log .swimLogStat span{ font-size:11px; }
  #swim-log .swimLogEntry{ grid-template-columns:minmax(0,1fr); gap:10px; }
  #swim-log .swimLogEntryFacts{ grid-column:1; grid-row:auto; margin:0; }
  #swim-log .swimLogEntryPlanned{ align-items:stretch; flex-direction:column; }
  #swim-log .swimLogEntryActions button{ flex:1; }
  #swim-log .swimLogConditionsGrid{ grid-template-columns:repeat(2,minmax(0,1fr)); padding:12px; }
  #swim-log .swimLogExtraStats{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px 0; }
  #swim-log .swimLogExtraStats .swimLogStat:nth-child(3){ padding-left:0; border-left:0; }
  #swim-log .swimLogChartHead{ flex-wrap:wrap; gap:4px; }
  #swim-log .swimLogDialog{ width:calc(100% - 16px); max-height:calc(100dvh - 24px); }
  #swim-log .swimLogDialogHeader{ padding:12px 16px; }
  #swim-log .swimLogForm,#swim-log .logbookSyncBody{ padding:20px 16px; }
  #swim-log .swimLogFeelingChoices{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  body:not(.theme-dark) #swim-log .swimLogStats{ padding:14px 12px; }
}
@media(max-width:400px){
  #swim-log .swimLogStats{ grid-template-columns:.85fr 1fr 1.25fr; }
  #swim-log .swimLogStats .swimLogStat{ padding-right:8px; padding-left:8px; }
  #swim-log .swimLogStats .swimLogStat:first-child{ padding-left:0; }
  #swim-log .swimLogStats .swimLogStat span{ min-height:2.6em; line-height:1.3; }
  #swim-log .swimLogStats .swimLogStat strong{ font-size:20px; white-space:nowrap; }
  body:not(.theme-dark) #swim-log .swimLogStats{ grid-template-columns:1fr .95fr 1.35fr; padding:12px 8px; }
}