/* Final visual layer: canonical species artwork and live map surfaces. */
.target-card {
  display: flex !important;
  align-items: stretch !important;
  gap: 0 !important;
  min-height: 150px !important;
  margin: 17px 0 15px !important;
  padding: 0 !important;
  overflow: hidden !important;
  border: 1px solid #dceae2 !important;
  border-radius: 20px !important;
  background: #f2f7f4 !important;
}

.target-artwork {
  display: grid !important;
  flex: 0 0 54% !important;
  min-width: 0 !important;
  min-height: 148px !important;
  place-items: center !important;
  padding: 15px !important;
  background:
    radial-gradient(circle at 58% 50%, rgba(94, 190, 181, .3), transparent 52%),
    repeating-radial-gradient(ellipse at 20% 20%, transparent 0 13px, rgba(22, 125, 127, .08) 14px 15px, transparent 16px 30px),
    linear-gradient(140deg, #e2f1ed, #cfe7e4) !important;
}

.species-art {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  filter: drop-shadow(0 10px 8px rgba(7, 61, 74, .16)) !important;
}

.species-art--hero {
  max-height: 120px !important;
  animation: species-artwork-in .22s ease-out;
}

.target-info {
  position: relative !important;
  display: block !important;
  flex: 1 1 0 !important;
  min-width: 0 !important;
  padding: 18px 30px 14px 14px !important;
  text-align: left !important;
  color: var(--deep) !important;
  background: transparent !important;
}

.target-info small {
  display: block !important;
  color: var(--muted) !important;
  font-size: 9px !important;
  font-weight: 800 !important;
  letter-spacing: .85px !important;
  text-transform: uppercase !important;
}

.target-info b {
  display: block !important;
  margin: 4px 0 2px !important;
  color: var(--deep) !important;
  font: 700 clamp(18px, 5vw, 25px)/1.02 "Playfair Display", Georgia, serif !important;
}

.target-info i {
  display: block !important;
  color: var(--muted) !important;
  font: italic 12px/1.2 Georgia, serif !important;
}

.target-info span {
  display: block !important;
  margin-top: 9px !important;
  color: var(--aqua) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
}

.target-info em {
  position: absolute !important;
  top: 50% !important;
  right: 12px !important;
  transform: translateY(-50%) !important;
  color: var(--aqua) !important;
  font-size: 27px !important;
  font-style: normal !important;
}

.species-thumb {
  display: grid !important;
  flex: 0 0 46px !important;
  width: 46px !important;
  height: 46px !important;
  place-items: center !important;
  padding: 4px !important;
  border-radius: 13px !important;
  background: #dbece7 !important;
}

.species-thumb .species-art {
  height: 37px !important;
  filter: drop-shadow(0 4px 3px rgba(7, 61, 74, .14)) !important;
}

.result-main > div:nth-of-type(1) {
  min-width: 0;
  flex: 1 1 auto;
}

.analysis-species {
  display: flex;
  align-items: center;
  gap: 10px;
}

.analysis-species .species-thumb {
  width: 54px !important;
  height: 54px !important;
  flex-basis: 54px !important;
}

.analysis-species .species-thumb .species-art { height: 44px !important; }

.species-search {
  width: 100%;
  margin: 15px 0 4px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--card);
  color: var(--ink);
  font-size: 13px;
}

.species-choice-list { margin-top: 5px; }

.species-choice {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 10px;
  padding: 10px 4px;
  border-bottom: 1px solid var(--line);
  background: transparent;
  color: var(--ink);
  text-align: left;
}

.species-choice.selected { background: rgba(22, 125, 127, .1); }
.species-choice > span:nth-of-type(2) { min-width: 0; flex: 1; }
.species-choice b { display: block; font-size: 14px; }
.species-choice i { display: block; margin-top: 2px; color: var(--muted); font: italic 11px Georgia, serif; }
.species-choice em { color: var(--aqua); font-size: 10px; font-style: normal; font-weight: 800; }

.live-map > .map-canvas {
  position: absolute !important;
  z-index: 1;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  background: #b6ddd9;
}

.live-map > .map-overlay {
  position: absolute !important;
  z-index: 2;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  pointer-events: none !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, .13), transparent 28%, transparent 73%, rgba(2, 38, 45, .08));
}

.map-marine, .map-time { z-index: 4 !important; }

.live-map > .map-floating-controls {
  position: absolute !important;
  z-index: 4;
  top: 14px !important;
  right: 14px !important;
  display: grid;
  gap: 8px;
}

.live-map .map-control {
  position: static !important;
  width: 40px;
  height: 40px;
  border-radius: 13px;
  background: rgba(255, 255, 255, .94);
  color: #073d4a;
}

.map-status[hidden] { display: none !important; }
.live-map .leaflet-tile { visibility: visible !important; opacity: 1 !important; }

/* Keep result actions above the interactive map panes in Safari's hit-testing stack. */
.result-footer { position: relative; z-index: 5; }

.seawise-map-styles {
  display: flex;
  max-width: min(255px, calc(100vw - 135px));
  gap: 2px;
  padding: 3px;
  border: 1px solid rgba(7, 61, 74, .16);
  border-radius: 12px;
  background: rgba(255, 255, 255, .94);
  box-shadow: 0 5px 14px rgba(4, 40, 48, .16);
}

.seawise-map-styles button {
  min-height: 29px;
  padding: 0 8px;
  border-radius: 8px;
  color: #305861;
  font: 700 10px/1 "DM Sans", sans-serif;
  white-space: nowrap;
}

.seawise-map-styles button.active { background: #073d4a; color: #fff; }

.map-surface-toggle {
  position: absolute;
  z-index: 5;
  top: 13px;
  left: 13px;
  display: flex;
  max-width: calc(100% - 84px);
  gap: 2px;
  padding: 3px;
  border: 1px solid rgba(7, 61, 74, .16);
  border-radius: 12px;
  background: rgba(255, 255, 255, .94);
  box-shadow: 0 5px 14px rgba(4, 40, 48, .16);
}
.map-surface-toggle button {
  min-height: 29px;
  padding: 0 8px;
  border-radius: 8px;
  color: #305861;
  font: 700 10px/1 "DM Sans", sans-serif;
  white-space: nowrap;
}
.map-surface-toggle button.active { background: #073d4a; color: #fff; }

.live-map > .map-style-selector {
  position: absolute;
  z-index: 4;
  top: 47px;
  left: 13px;
}

.map-depth-legend {
  position: absolute;
  z-index: 4;
  left: 13px;
  bottom: 13px;
  display: grid;
  gap: 3px;
  max-width: 150px;
  padding: 8px 9px;
  border: 1px solid rgba(7, 61, 74, .15);
  border-radius: 11px;
  background: rgba(255, 255, 255, .91);
  color: #073d4a;
  box-shadow: 0 4px 12px rgba(4, 40, 48, .14);
  font: 600 9px/1.2 "DM Sans", sans-serif;
}

.map-depth-legend b { font-size: 10px; }
.map-depth-legend span { display: flex; align-items: center; gap: 5px; }
.map-depth-legend i { width: 9px; height: 9px; border-radius: 50%; background: #72d2dd; }
.map-depth-legend .depth-mid i { background: #3eaac3; }
.map-depth-legend .depth-deep i { background: #267caa; }
.map-depth-legend .map-category { display: inline-flex; margin-right: 6px; }
.map-depth-legend .map-category i { background: currentColor; }
.map-depth-legend .map-category.best { color: #1d907f; }
.map-depth-legend .map-category.good { color: #6e9d45; }
.map-depth-legend .map-category.fair { color: #c78a26; }
.map-depth-legend .map-category.low { color: #c6544d; }
.map-depth-legend .map-category.warning { color: #9b3048; }
.map-depth-legend small { margin-top: 2px; color: #53747a; font-size: 8px; line-height: 1.25; }

.marine-result-card .result-main { grid-template-columns: minmax(0, 1fr) minmax(88px, .8fr); }
.marine-result-card .result-score b { color: #0a6268; font-size: 12px; }

.map-layer-tray {
  position: absolute;
  z-index: 4;
  top: 89px;
  left: 13px;
  display: flex;
  max-width: min(300px, calc(100vw - 86px));
  flex-wrap: wrap;
  gap: 4px;
  padding: 6px;
  border: 1px solid rgba(7, 61, 74, .15);
  border-radius: 11px;
  background: rgba(255,255,255,.92);
  box-shadow: 0 4px 12px rgba(4,40,48,.12);
  color: #164e57;
  font: 700 9px/1.1 "DM Sans", sans-serif;
}
.map-layer-tray b { display: grid; place-items: center; padding: 0 3px; }
.map-layer-tray button, .catalog-filters button {
  min-height: 25px;
  padding: 0 7px;
  border: 1px solid #cde1dd;
  border-radius: 7px;
  background: #fff;
  color: #2b5d65;
  font: 700 9px/1 "DM Sans", sans-serif;
}
.map-layer-tray button.active, .catalog-filters button.active { border-color: #0e7176; background: #0e7176; color: #fff; }
.map-layer-tray button:disabled { opacity: .45; text-decoration: line-through; }
.map-layer-tray small { width: 100%; color: #627f84; font: 500 8px/1.2 "DM Sans", sans-serif; }
.map-layer-unavailable { width: 100%; border-top: 1px solid rgba(7, 61, 74, .12); padding-top: 4px; }
.map-layer-unavailable summary { cursor: pointer; color: #52737a; font: 700 8px/1.25 "DM Sans", sans-serif; }
.map-layer-unavailable ul { display: grid; gap: 4px; margin: 5px 0 0; padding: 0; list-style: none; }
.map-layer-unavailable li { display: grid; grid-template-columns: minmax(64px, auto) minmax(0, 1fr); gap: 5px; color: #6a7276; font: 500 8px/1.2 "DM Sans", sans-serif; }
.map-layer-unavailable li b { display: block; padding: 0; color: #455d63; font-size: 8px; }
.map-layer-unavailable li span { overflow-wrap: anywhere; }

.catalog-filters { display: flex; gap: 6px; overflow-x: auto; margin: 9px -3px 8px; padding: 2px 3px 5px; scrollbar-width: thin; }
.catalog-filters button { flex: 0 0 auto; min-height: 28px; font-size: 10px; }
.species-choice { position: relative; padding-right: 37px; }
.species-choice-main { display: flex; width: 100%; align-items: center; gap: 10px; background: transparent; color: var(--ink); text-align: left; }
.species-choice small { display: block; margin-top: 3px; color: var(--aqua); font: 700 9px/1.2 "DM Sans", sans-serif; }
.favorite-toggle { position: absolute; top: 50%; right: 3px; width: 30px; height: 30px; transform: translateY(-50%); color: #557980; font-size: 16px; }
.favorite-toggle.active { color: #c65b68; }

.factor-audit {
  border: 1px solid rgba(7, 61, 74, .13);
  border-radius: 12px;
  background: #f5fbfa;
  padding: 11px 12px;
}

.factor-audit summary { cursor: pointer; color: #144e58; font: 700 12px/1.25 "DM Sans", sans-serif; }
.factor-audit > div { display: grid; gap: 8px; margin-top: 10px; }
.factor-audit p { display: grid; gap: 2px; margin: 0; color: #527279; font: 11px/1.3 "DM Sans", sans-serif; }
.factor-audit p b { color: #0d4853; }
.factor-audit p small { color: #6e8b90; font-size: 10px; }

.seawise-map-marker-shell { border: 0 !important; background: transparent !important; }
.seawise-current-vector-shell { border: 0 !important; background: transparent !important; }
.seawise-current-vector { display: grid; width: 22px; height: 22px; place-items: center; border: 1px solid rgba(7,61,74,.55); border-radius: 50%; background: rgba(236,251,249,.88); color: #096e86; font: 900 17px/1 "DM Sans", sans-serif; box-shadow: 0 1px 5px rgba(4,40,48,.22); }

.seawise-depth-label-shell { border: 0 !important; background: transparent !important; }
.seawise-depth-label {
  display: block;
  min-width: 52px;
  padding: 4px 5px;
  border: 1px solid rgba(7, 61, 74, .22);
  border-radius: 8px;
  background: rgba(255,255,255,.9);
  color: #073d4a;
  box-shadow: 0 2px 8px rgba(4,40,48,.15);
  font: 800 9px/1 "DM Mono", monospace;
  letter-spacing: -.25px;
  text-align: center;
}
.seawise-depth-label small { color: #467078; font: 700 7px/1.1 "DM Sans", sans-serif; letter-spacing: .3px; }

.seawise-map-marker {
  display: grid;
  width: 46px;
  height: 46px;
  place-content: center;
  border: 3px solid #fff;
  border-radius: 50% 50% 50% 7px;
  background: var(--tone);
  color: #fff;
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--tone) 26%, transparent), 0 5px 12px rgba(4, 40, 48, .28);
  text-align: center;
  transform: rotate(-45deg);
}

.seawise-map-marker > * { display: block; transform: rotate(45deg); }
.seawise-map-marker b { font: 700 14px/.9 "DM Mono", monospace; }
.seawise-map-marker small { margin-top: 2px; font: 700 7px "DM Sans", sans-serif; letter-spacing: .5px; }
.seawise-map-marker.inshore { border-radius: 15px; }
.seawise-map-marker.selected { width: 52px; height: 52px; margin: -3px; box-shadow: 0 0 0 8px color-mix(in srgb, var(--tone) 31%, transparent), 0 7px 15px rgba(4, 40, 48, .33); }

body[data-theme="dark"] .target-card { background: #174650 !important; border-color: #28565d !important; }
body[data-theme="dark"] .target-artwork { background: linear-gradient(140deg, #144751, #0d3944) !important; }
body[data-theme="dark"] .species-thumb { background: #174650 !important; }
body[data-theme="dark"] .live-map .map-control { background: rgba(15, 59, 68, .94); color: #d4eeea; }
body[data-theme="dark"] .seawise-map-styles, body[data-theme="dark"] .map-depth-legend { border-color: #28565d; background: rgba(15, 59, 68, .94); color: #d4eeea; }
body[data-theme="dark"] .map-layer-tray { border-color: #28565d; background: rgba(15, 59, 68, .94); color: #d4eeea; }
body[data-theme="dark"] .map-layer-tray button, body[data-theme="dark"] .catalog-filters button { border-color: #28565d; background: #174650; color: #d4eeea; }
body[data-theme="dark"] .map-layer-tray button.active, body[data-theme="dark"] .catalog-filters button.active { background: #7bc3b7; color: #073d4a; }
body[data-theme="dark"] .map-layer-unavailable { border-color: rgba(171, 219, 211, .18); }
body[data-theme="dark"] .map-layer-unavailable summary, body[data-theme="dark"] .map-layer-unavailable li { color: #a8cbc5; }
body[data-theme="dark"] .map-layer-unavailable li b { color: #d4eeea; }
body[data-theme="dark"] .seawise-map-styles button { color: #b9ded8; }
body[data-theme="dark"] .seawise-map-styles button.active { background: #7bc3b7; color: #073d4a; }
body[data-theme="dark"] .map-surface-toggle { border-color: #28565d; background: rgba(15, 59, 68, .94); }
body[data-theme="dark"] .map-surface-toggle button { color: #b9ded8; }
body[data-theme="dark"] .map-surface-toggle button.active { background: #7bc3b7; color: #073d4a; }
body[data-theme="dark"] .map-depth-legend small { color: #a8cbc5; }
body[data-theme="dark"] .seawise-depth-label { border-color: #28565d; background: rgba(15,59,68,.95); color: #d4eeea; }
body[data-theme="dark"] .seawise-depth-label small { color: #a8cbc5; }
body[data-theme="dark"] .factor-audit { border-color: #28565d; background: #103d47; }
body[data-theme="dark"] .factor-audit summary, body[data-theme="dark"] .factor-audit p b { color: #d4eeea; }
body[data-theme="dark"] .factor-audit p, body[data-theme="dark"] .factor-audit p small { color: #a8cbc5; }

@keyframes species-artwork-in {
  from { opacity: 0; transform: translateX(-5px) scale(.97); }
  to { opacity: 1; transform: none; }
}

@media (max-width: 365px) {
  .target-card { min-height: 134px !important; }
  .target-artwork { flex-basis: 47% !important; min-height: 132px !important; padding: 10px !important; }
  .species-art--hero { max-height: 102px !important; }
  .target-info { padding: 15px 28px 12px 10px !important; }
  .target-info b { font-size: 18px !important; }
  .target-info span { display: none !important; }
  .seawise-map-styles { max-width: 210px; }
  .seawise-map-styles button { padding: 0 6px; font-size: 9px; }
  .map-surface-toggle button { padding: 0 6px; font-size: 9px; }
  .map-depth-legend { max-width: 132px; font-size: 8px; }
  .map-layer-tray { top: 85px; max-width: 205px; }
  .map-layer-tray small { display: none; }
  .map-layer-unavailable li { grid-template-columns: 1fr; gap: 1px; }
}

@media (min-width: 720px) {
  .target-card { min-height: 190px !important; }
  .target-artwork { min-height: 188px !important; padding: 20px !important; }
  .species-art--hero { max-height: 155px !important; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-delay: 0ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
  }
  .species-art--hero { animation: none; }
  /* Leaflet's panes otherwise retain CSS transform/fade animation even after
     the shared UI has reduced its motion. The map still pans and updates; it
     simply reaches the requested state immediately. */
  .leaflet-container .leaflet-map-pane,
  .leaflet-container .leaflet-marker-pane,
  .leaflet-container .leaflet-popup-pane,
  .leaflet-container .leaflet-tile {
    transition: none !important;
  }
}

/* Today is the mobile-first water overview. It deliberately keeps fishing
   opportunity, bait context, and marine practicality as separate surfaces. */
.today-shell { width: min(100%, 960px); margin: 0 auto; padding-bottom: 32px; }
.today-topbar { display: flex; align-items: center; justify-content: space-between; padding: 15px 18px; }
.seawise-wordmark { display: inline-flex; align-items: center; gap: 8px; padding: 0; background: transparent; color: var(--deep); }
.seawise-wordmark span { display: grid; width: 31px; height: 31px; place-items: center; border-radius: 10px 10px 10px 3px; background: var(--deep); color: var(--sun); font-weight: 900; }
.seawise-wordmark b { font: 700 22px/1 "Playfair Display", Georgia, serif; letter-spacing: -.7px; }
.today-topbar > div { display: flex; align-items: center; gap: 7px; }
.today-location { max-width: 164px; overflow: hidden; padding: 8px; border-radius: 11px; background: #e3efeb; color: var(--deep); font-size: 11px; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.today-hero { display: flex; justify-content: space-between; gap: 18px; padding: 24px 19px 32px; color: #effaf7; background: radial-gradient(circle at 100% 0, rgba(105, 208, 195, .38), transparent 40%), linear-gradient(135deg, #073d4a, #0d6871); }
.today-hero h1 { margin: 7px 0 9px; font: 700 clamp(34px, 9vw, 54px)/.94 "Playfair Display", Georgia, serif; letter-spacing: -1.7px; }
.today-hero p { max-width: 430px; margin: 0; color: #c5dfda; font-size: 12px; line-height: 1.45; }
.today-hero .eyebrow { color: #a9e0d6; }
.today-hero-status { display: grid; align-content: end; justify-items: end; gap: 7px; flex: 0 0 125px; }
.today-hero-status small { color: #b8d7d2; font: 9px/1.2 "DM Mono", monospace; text-align: right; }
.today-decision-strip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; margin: -18px 14px 0; position: relative; z-index: 1; }
.today-decision-strip button { min-width: 0; min-height: 100px; padding: 10px; border: 1px solid rgba(7, 61, 74, .14); border-radius: 14px; background: var(--card); color: var(--ink); box-shadow: 0 6px 19px rgba(6,52,61,.1); text-align: left; }
.today-decision-strip small,.today-decision-strip b,.today-decision-strip span { display: block; }
.today-decision-strip small { color: var(--aqua); font: 800 8px/1.2 "DM Sans", sans-serif; letter-spacing: .55px; text-transform: uppercase; }
.today-decision-strip b { overflow: hidden; margin-top: 7px; color: var(--deep); font: 700 13px/1.08 "Playfair Display", Georgia, serif; text-overflow: ellipsis; }
.today-decision-strip span { margin-top: 5px; color: var(--muted); font: 8px/1.28 "DM Mono", monospace; }
.today-conditions,.today-forecast,.today-map-card,.today-charts,.fishing-window { margin: 15px 14px; padding: 17px; border: 1px solid var(--line); border-radius: 20px; background: var(--card); box-shadow: 0 7px 23px rgba(6, 52, 61, .06); }
.section-heading { display: flex; align-items: start; justify-content: space-between; gap: 9px; }
.section-heading h2,.today-conditions h2,.today-forecast h2 { margin: 4px 0 0; color: var(--deep); font: 700 22px/1.05 "Playfair Display", Georgia, serif; }
.text-button { padding: 4px 0; background: transparent; color: var(--aqua); font: 800 11px/1.2 "DM Sans", sans-serif; white-space: nowrap; }
.condition-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-top: 16px; }
.condition-grid article { min-height: 83px; padding: 10px; border-radius: 12px; background: #f1f7f5; }
.condition-grid small { display: block; color: var(--muted); font: 800 9px/1 "DM Sans", sans-serif; letter-spacing: .7px; text-transform: uppercase; }
.condition-grid b { display: block; margin: 7px 0 4px; color: var(--deep); font: 700 21px/.9 "Playfair Display", Georgia, serif; }
.condition-grid span { display: block; color: var(--muted); font: 9px/1.25 "DM Mono", monospace; }
.tide-strip { display: flex; align-items: center; gap: 9px; margin-top: 11px; padding: 10px; border-radius: 12px; background: #e5f1ed; color: #164e57; }
.tide-strip > span { font-size: 22px; color: var(--aqua); }
.tide-strip div { flex: 1; min-width: 0; }
.tide-strip b,.tide-strip small { display: block; }
.tide-strip b { font-size: 11px; }
.tide-strip small { margin-top: 2px; color: #58777a; font-size: 9px; line-height: 1.25; }
.tide-strip button { padding: 4px 0; background: transparent; color: var(--aqua); font-size: 10px; font-weight: 800; white-space: nowrap; }
.conditions-missing { margin: 10px 0 0; color: #8a5b14; font-size: 10px; line-height: 1.35; }
.today-primary-conditions article { min-height: 100px; }
.today-tide-card { background: #e5f1ed !important; }
.condition-secondary { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin-top: 10px; }
.condition-secondary article { min-width: 0; padding: 8px; border: 1px solid #e0ebe6; border-radius: 10px; background: #f8fbfa; }
.condition-secondary small,.condition-secondary b,.condition-secondary span { display: block; }
.condition-secondary small { color: var(--muted); font: 800 8px/1 "DM Sans", sans-serif; letter-spacing: .55px; text-transform: uppercase; }
.condition-secondary b { overflow: hidden; margin: 5px 0 3px; color: var(--deep); font: 700 10px/1.2 "DM Mono", monospace; text-overflow: ellipsis; white-space: nowrap; }
.condition-secondary span { color: var(--muted); font: 8px/1.3 "DM Mono", monospace; }
.tide-reference-note { margin: 9px 0 0; color: #58777a; font-size: 9px; line-height: 1.35; }
.condition-details-link { display: block; margin-top: 9px; }
.today-spot { display: flex; width: 100%; align-items: center; gap: 10px; margin-top: 15px; padding: 11px; border: 1px solid #d7e7e1; border-radius: 15px; background: #f5faf8; color: var(--ink); text-align: left; }
.today-spot > div { flex: 1; min-width: 0; }
.today-spot small { color: var(--aqua); font: 800 9px/1.2 "DM Sans", sans-serif; letter-spacing: .55px; text-transform: uppercase; }
.today-spot h3 { margin: 3px 0; color: var(--deep); font: 700 21px/1 "Playfair Display", Georgia, serif; }
.today-spot p,.today-spot span { display: block; margin: 0; color: var(--muted); font-size: 10px; line-height: 1.3; }
.today-spot span { margin-top: 6px; color: #427277; }
.today-spot strong { display: grid; min-width: 47px; place-items: center; color: var(--tone); font: 700 31px/.85 "Playfair Display", Georgia, serif; text-align: center; }
.today-spot strong i { margin-top: 4px; color: var(--muted); font: 800 8px/1 "DM Sans", sans-serif; font-style: normal; letter-spacing: .3px; text-transform: uppercase; }
.today-result-tabs { display: flex; gap: 5px; overflow: auto; margin-top: 10px; padding-bottom: 2px; scrollbar-width: none; }
.today-result-tabs button,.condition-switcher button { flex: 0 0 auto; padding: 7px 8px; border-radius: 8px; background: #eef4f1; color: #54767b; font: 700 9px/1.1 "DM Sans", sans-serif; white-space: nowrap; }
.today-result-tabs button.active,.condition-switcher button.active { background: var(--deep); color: #fff; }
.bait-summary { display: flex; width: 100%; align-items: center; gap: 9px; margin-top: 12px; padding: 8px 0 0; border-top: 1px solid var(--line); background: transparent; color: var(--ink); text-align: left; }
.bait-summary > span { display: grid; width: 28px; height: 28px; place-items: center; border-radius: 9px; background: #e1efeb; color: var(--aqua); font-size: 18px; }
.bait-summary div { flex: 1; }
.bait-summary b { font-size: 11px; color: var(--deep); }
.bait-summary p { margin: 2px 0 0; color: var(--muted); font-size: 9px; line-height: 1.25; }
.bait-summary i { color: var(--aqua); font: 700 9px/1.2 "DM Sans", sans-serif; font-style: normal; white-space: nowrap; }
.today-map { position: relative; height: 285px; margin-top: 13px; overflow: hidden; border-radius: 15px; background: #b6ddd9; }
.today-map .map-canvas { position: absolute; inset: 0; }
.today-map .seawise-map-styles { position: absolute; z-index: 4; top: 10px; left: 10px; }
.today-map-caption { position: absolute; z-index: 4; right: 9px; bottom: 9px; max-width: 180px; padding: 6px 8px; border-radius: 8px; background: rgba(255,255,255,.9); color: #174e58; font: 700 9px/1.25 "DM Sans", sans-serif; }
.today-charts { padding-bottom: 13px; }
.chart-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-top: 14px; }
.condition-chart { min-width: 0; padding: 9px; border: 1px solid #e0ebe6; border-radius: 11px; background: #f8fbfa; }
.condition-chart > div { display: flex; justify-content: space-between; gap: 4px; }
.condition-chart b { color: var(--deep); font-size: 10px; }
.condition-chart span,.condition-chart small { color: var(--muted); font: 8px/1.2 "DM Mono", monospace; }
.condition-chart svg { display: block; width: 100%; height: 38px; margin: 7px 0 3px; overflow: visible; }
.condition-chart polyline { fill: none; stroke: var(--aqua); stroke-width: 2.5; vector-effect: non-scaling-stroke; }
.condition-chart circle { fill: var(--sun); stroke: var(--deep); stroke-width: 1.2; vector-effect: non-scaling-stroke; }
.condition-chart.empty { display: grid; min-height: 90px; align-content: center; gap: 5px; }
.fishing-window > p { margin: 8px 0 11px; color: var(--muted); font-size: 10px; line-height: 1.35; }
.fishing-window .section-heading > span { color: var(--aqua); font: 700 9px/1.2 "DM Mono", monospace; text-align: right; }
.window-bars { display: grid; grid-template-columns: repeat(25, minmax(9px, 1fr)); align-items: end; gap: 3px; min-height: 114px; overflow-x: auto; padding: 4px 1px 0; }
.window-bars button { display: grid; grid-template-rows: 78px 17px; align-items: end; min-width: 9px; padding: 0; border-radius: 5px; background: transparent; color: var(--muted); }
.window-bars button.active { outline: 2px solid var(--deep); outline-offset: 2px; }
.window-bars i { display: block; height: var(--value); min-height: 3px; border-radius: 2px 2px 0 0; }
.window-bars i:nth-child(1) { background: #4d9e7e; }
.window-bars i:nth-child(2) { background: #e1a348; }
.window-bars i:nth-child(3) { background: var(--aqua); }
.window-bars small { display: block; height: 14px; overflow: visible; margin-top: 4px; font: 7px/1.1 "DM Mono", monospace; white-space: nowrap; transform: rotate(-42deg); transform-origin: left top; }
.window-key { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 9px; color: var(--muted); font: 700 8px/1.2 "DM Sans", sans-serif; }
.window-key span { display: inline-flex; align-items: center; gap: 3px; }
.window-key i { width: 7px; height: 7px; border-radius: 2px; background: #4d9e7e; }
.window-key span:nth-child(2) i { background: #e1a348; }.window-key span:nth-child(3) i { background: var(--aqua); }
.window-key b { margin-left: auto; color: var(--deep); }
.feature-metrics { display: grid; grid-template-columns: repeat(2, 1fr); gap: 7px; margin: 13px 0; }
.feature-metrics span { padding: 8px; border: 1px solid var(--line); border-radius: 9px; background: #f5faf8; }
.feature-metrics small,.feature-metrics b { display: block; }.feature-metrics small { color: var(--muted); font-size: 8px; text-transform: uppercase; }.feature-metrics b { margin-top: 4px; color: var(--deep); font: 700 15px/1 "DM Mono", monospace; }
.feature-current-context { display: grid; gap: 5px; margin-top: 10px; padding: 10px; border: 1px solid #d6e7e2; border-radius: 10px; background: #f5faf8; }
.feature-current-context b { color: var(--deep); font-size: 10px; }
.feature-current-context span { color: #315f67; font: 700 10px/1.35 "DM Sans", sans-serif; }
.feature-current-context small { color: var(--muted); font: 8px/1.35 "DM Mono", monospace; }
.feature-cross-section-button { width: 100%; margin: 11px 0 0; }
.feature-cross-section { margin-top: 12px; padding: 10px; border: 1px solid var(--line); border-radius: 12px; background: #f5faf8; }.feature-cross-section .split-title h3 { margin: 0; }.feature-cross-section .split-title span { color: var(--muted); font-size: 8px; text-align: right; }
.feature-cross-section svg { display: block; width: 100%; height: 105px; margin: 9px 0 5px; overflow: visible; border-bottom: 1px solid #b8d4d0; }.feature-cross-section polyline { fill: none; stroke: var(--aqua); stroke-width: 2.4; vector-effect: non-scaling-stroke; }.feature-cross-section circle { fill: var(--sun); stroke: var(--deep); stroke-width: 1.1; vector-effect: non-scaling-stroke; }
.feature-cross-section > div:last-of-type { display: flex; justify-content: space-between; gap: 10px; color: var(--muted); font: 8px/1.25 "DM Mono", monospace; }.feature-cross-section > div:last-of-type span:last-child { text-align: right; }.feature-cross-section > small { display: block; margin-top: 8px; color: var(--muted); font-size: 8px; line-height: 1.25; }
.today-actions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; margin: 15px 14px; }
.today-actions button { min-height: 108px; padding: 10px; border: 1px solid var(--line); border-radius: 14px; background: var(--card); color: var(--ink); text-align: left; box-shadow: 0 5px 14px rgba(6,52,61,.05); }
.today-actions span { display: grid; width: 27px; height: 27px; place-items: center; border-radius: 8px; background: #dceeea; color: var(--aqua); font-size: 16px; }
.today-actions b,.today-actions small { display: block; }
.today-actions b { margin-top: 9px; color: var(--deep); font-size: 10px; }
.today-actions small { margin-top: 3px; color: var(--muted); font-size: 8px; line-height: 1.25; }
.today-footer { display: flex; justify-content: space-between; gap: 8px; align-items: center; margin: 19px 18px 0; color: var(--muted); font: 9px/1.3 "DM Mono", monospace; }
.today-footer button { padding: 7px 9px; border: 1px solid var(--line); border-radius: 8px; background: var(--card); color: var(--aqua); font-weight: 800; }
.guest-bottom-nav { position: sticky; z-index: 20; bottom: 8px; display: grid; grid-template-columns: repeat(5, 1fr); gap: 2px; width: calc(100% - 20px); max-width: 600px; margin: 17px auto 0; padding: 5px; border: 1px solid rgba(7, 61, 74, .16); border-radius: 17px; background: rgba(255,255,255,.94); box-shadow: 0 8px 25px rgba(4, 40, 48, .17); backdrop-filter: blur(12px); }
.guest-bottom-nav button { position: relative; display: grid; min-height: 44px; place-items: center; gap: 2px; border-radius: 11px; background: transparent; color: #5a797d; font: 700 8px/1 "DM Sans", sans-serif; }
.guest-bottom-nav button span { font-size: 17px; line-height: 1; }
.guest-bottom-nav button.active { background: #e1efeb; color: var(--aqua); }
.guest-bottom-nav i { position: absolute; top: 1px; right: 6px; min-width: 13px; padding: 2px; border-radius: 99px; background: var(--aqua); color: #fff; font: 700 7px/1 "DM Mono", monospace; font-style: normal; }
.onboarding-steps { display: grid; gap: 7px; margin: 16px 0; }
.onboarding-steps span { padding: 9px 10px; border-radius: 10px; background: #edf5f2; color: #315f67; font-size: 10px; font-weight: 700; }
.onboarding-skip { display: block; width: 100%; margin-top: 10px; text-align: center; }
.observation-form { display: grid; gap: 12px; margin-top: 15px; }
.observation-form label { display: grid; gap: 5px; color: var(--muted); font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .45px; }
.observation-form input,.observation-form select { width: 100%; padding: 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--card); color: var(--ink); font-size: 12px; text-transform: none; letter-spacing: 0; }
.observation-form .primary { margin: 3px 0 0; }
.journal-sheet { max-height: 91vh; }
.journal-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; margin: 16px 0; }
.journal-summary article { min-width: 0; padding: 10px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); }
.journal-summary small,.journal-summary b,.journal-summary span { display: block; }
.journal-summary small { color: var(--muted); font-size: 8px; font-weight: 800; letter-spacing: .5px; text-transform: uppercase; }
.journal-summary b { margin: 4px 0 2px; overflow: hidden; color: var(--deep); font: 700 20px/1 "Playfair Display", Georgia, serif; text-overflow: ellipsis; }
.journal-summary span { overflow: hidden; color: var(--muted); font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.journal-highlights { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; margin: -7px 0 13px; }
.journal-highlights article { min-width: 0; padding: 9px 10px; border: 1px solid #d4e8e3; border-radius: 11px; background: #f2f9f6; }
.journal-highlights small,.journal-highlights b,.journal-highlights span { display: block; }
.journal-highlights small { color: var(--muted); font-size: 8px; font-weight: 800; letter-spacing: .45px; text-transform: uppercase; }
.journal-highlights b { margin-top: 3px; overflow: hidden; color: var(--deep); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.journal-highlights span { margin-top: 2px; color: var(--muted); font-size: 8px; line-height: 1.25; }
.journal-quick-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; margin: 13px 0 18px; }
.journal-quick-actions button { min-height: 44px; margin: 0; padding: 9px; font-size: 10px; line-height: 1.15; }
.journal-quick-actions .primary { grid-column: 1 / -1; }
.journal-card-list,.journal-session-list,.journal-trip-list { display: grid; gap: 8px; }
.journal-catch-card { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 10px; align-items: stretch; overflow: hidden; border: 1px solid var(--line); border-radius: 14px; background: var(--card); }
.journal-photo,.journal-art { width: 76px; min-height: 102px; height: 100%; object-fit: cover; background: linear-gradient(145deg, #dceeea, #bddbd5); }
.journal-art { display: grid; place-items: center; padding: 8px; }
.journal-art .species-art { max-height: 86px; }
.journal-catch-card>div:last-child { min-width: 0; padding: 10px 10px 10px 0; }
.journal-card-title span,.journal-card-title b { display: block; }
.journal-card-title span { color: var(--aqua); font-size: 8px; font-weight: 800; letter-spacing: .55px; text-transform: uppercase; }
.journal-card-title b { margin-top: 2px; overflow: hidden; color: var(--deep); font: 700 16px/1.05 "Playfair Display", Georgia, serif; text-overflow: ellipsis; white-space: nowrap; }
.journal-catch-card p,.journal-catch-card small { display: block; margin: 4px 0 0; color: var(--muted); font-size: 9px; line-height: 1.3; }
.journal-catch-card strong { display: block; margin-top: 6px; color: var(--deep); font-size: 10px; }
.journal-session-card { display: flex; justify-content: space-between; gap: 9px; padding: 11px; border: 1px solid var(--line); border-left: 4px solid var(--aqua); border-radius: 12px; background: var(--card); }
.journal-session-card>div { min-width: 0; }
.journal-session-card span,.journal-session-card b,.journal-session-card strong,.journal-session-card small { display: block; }
.journal-session-card span { color: var(--aqua); font-size: 8px; font-weight: 800; letter-spacing: .5px; text-transform: uppercase; }
.journal-session-card b { margin: 3px 0; color: var(--deep); font-size: 13px; }
.journal-session-card p,.journal-session-card small { margin: 3px 0; color: var(--muted); font-size: 9px; line-height: 1.35; }
.journal-session-card strong { margin-top: 6px; color: var(--deep); font-size: 10px; }
.journal-session-card .secondary { align-self: center; flex: none; padding: 8px; font-size: 9px; }
.journal-trip-list article { padding: 10px; border-radius: 11px; background: var(--card); border: 1px solid var(--line); }
.journal-trip-list b,.journal-trip-list span,.journal-trip-list small { display: block; }
.journal-trip-list b { color: var(--deep); font-size: 12px; }
.journal-trip-list span,.journal-trip-list small { margin-top: 3px; color: var(--muted); font-size: 9px; line-height: 1.35; }
.capture-sheet { max-height: 88vh; }
body[data-theme="dark"] .journal-photo,body[data-theme="dark"] .journal-art { background: #174650; }
body[data-theme="dark"] .journal-summary article,body[data-theme="dark"] .journal-highlights article,body[data-theme="dark"] .journal-catch-card,body[data-theme="dark"] .journal-session-card,body[data-theme="dark"] .journal-trip-list article { border-color: #28565d; background: #103d47; }
@media (min-width: 520px) { .journal-quick-actions { grid-template-columns: repeat(3, minmax(0, 1fr)); } .journal-quick-actions .primary { grid-column: auto; } }
@media (max-width: 360px) { .journal-summary,.journal-highlights { grid-template-columns: 1fr; } .journal-quick-actions { grid-template-columns: 1fr; } .journal-quick-actions .primary { grid-column: auto; } .journal-catch-card { grid-template-columns: 62px minmax(0,1fr); } .journal-photo,.journal-art { width: 62px; } }
.loading-card { min-height: 145px; display: grid; align-content: center; gap: 5px; }
.loading-card h2 { margin: 0; }
.loading-card p { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.4; }
.loading-card button { width: max-content; margin-top: 5px; padding: 8px 10px; border-radius: 8px; background: var(--deep); color: #fff; font-size: 10px; font-weight: 800; }
.condition-switcher { display: flex; gap: 6px; margin-top: 12px; overflow: auto; }
.condition-detail-grid b { font-size: 20px; }
.condition-detail-grid span { font-size: 9px; line-height: 1.25; }
.tide-detail { padding: 12px; border-radius: 12px; background: #e7f3ef; color: #164e57; }
.tide-detail p { margin: 5px 0; font-size: 11px; }
.tide-detail small { color: #58777a; font-size: 9px; line-height: 1.25; }
.daylight-row { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin-top: 8px; }
.daylight-row span { padding: 9px; border-radius: 10px; background: var(--card); color: var(--muted); font-size: 10px; }
.daylight-row b { display: block; margin-top: 3px; color: var(--deep); }
.sheet-charts { grid-template-columns: repeat(2, 1fr); }
.map-context-sheet .analysis-section { margin: 16px 0; }
.map-source-row { padding: 9px 0; border-bottom: 1px solid var(--line); }
.map-source-row summary { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; cursor: pointer; color: var(--deep); font-size: 11px; }
.map-source-row summary span { flex: none; color: var(--aqua); font-size: 9px; font-weight: 800; text-align: right; }
.map-source-row p { margin: 7px 0 3px; color: var(--muted); font-size: 10px; line-height: 1.35; }
.map-source-row small { color: var(--muted); font-size: 9px; line-height: 1.35; }

body[data-theme="dark"] .today-hero { background: radial-gradient(circle at 100% 0, rgba(105, 208, 195, .22), transparent 40%), linear-gradient(135deg, #062c35, #0d5056); }
body[data-theme="dark"] .today-location,body[data-theme="dark"] .condition-grid article,body[data-theme="dark"] .condition-secondary article,body[data-theme="dark"] .today-spot,body[data-theme="dark"] .condition-chart,body[data-theme="dark"] .today-result-tabs button,body[data-theme="dark"] .condition-switcher button { background: #174650; border-color: #28565d; }
body[data-theme="dark"] .today-decision-strip button { border-color: #28565d; background: #174650; }
body[data-theme="dark"] .today-tide-card { background: #103d47 !important; }
body[data-theme="dark"] .feature-current-context { border-color: #28565d; background: #174650; }
body[data-theme="dark"] .feature-current-context b { color: #d4eeea; }
body[data-theme="dark"] .feature-current-context span,body[data-theme="dark"] .feature-current-context small { color: #a8cbc5; }
body[data-theme="dark"] .tide-strip,body[data-theme="dark"] .tide-detail { background: #103d47; color: #d4eeea; }
body[data-theme="dark"] .tide-strip small,body[data-theme="dark"] .tide-detail small { color: #a8cbc5; }
body[data-theme="dark"] .today-map-caption { background: rgba(15,59,68,.94); color: #d4eeea; }
body[data-theme="dark"] .today-result-tabs button.active,body[data-theme="dark"] .condition-switcher button.active { background: #7bc3b7; color: #073d4a; }
body[data-theme="dark"] .guest-bottom-nav { border-color: #28565d; background: rgba(15,59,68,.94); }
body[data-theme="dark"] .guest-bottom-nav button.active,body[data-theme="dark"] .onboarding-steps span { background: #174650; color: #b9ded8; }
body[data-theme="high"] .today-hero { background: #000; color: #fff; }
body[data-theme="high"] .today-hero p,body[data-theme="high"] .today-hero .eyebrow,body[data-theme="high"] .today-hero-status small { color: #fff; }
body[data-theme="high"] .today-conditions,body[data-theme="high"] .today-forecast,body[data-theme="high"] .today-map-card,body[data-theme="high"] .today-charts,body[data-theme="high"] .today-actions button { border: 2px solid #000; box-shadow: none; }
body[data-theme="high"] .today-decision-strip button { border: 2px solid #000; box-shadow: none; }
body[data-theme="high"] .today-primary-conditions article,body[data-theme="high"] .condition-secondary article { border: 2px solid #000; background: #fff !important; color: #000; }
body[data-theme="high"] .today-primary-conditions small,body[data-theme="high"] .today-primary-conditions b,body[data-theme="high"] .today-primary-conditions span,body[data-theme="high"] .condition-secondary small,body[data-theme="high"] .condition-secondary b,body[data-theme="high"] .condition-secondary span,body[data-theme="high"] .tide-reference-note { color: #000; }

@media (min-width: 720px) {
  .today-topbar { padding: 20px 30px; }
  .today-hero { padding: 40px 42px; border-radius: 0 0 30px 30px; }
  .today-decision-strip { margin: -20px 28px 0; gap: 10px; }
  .today-decision-strip button { min-height: 91px; padding: 12px; }
  .today-decision-strip b { font-size: 15px; }
  .today-conditions,.today-forecast,.today-map-card,.today-charts { margin: 20px 28px; padding: 22px; }
  .condition-grid { grid-template-columns: repeat(4, 1fr); }
  .condition-secondary { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .today-map { height: 390px; }
  .chart-grid { grid-template-columns: repeat(4, 1fr); }
  .today-actions { margin: 20px 28px; }
  .today-actions b { font-size: 12px; }
  .today-actions small { font-size: 9px; }
  .guest-bottom-nav { bottom: 16px; }
}

/* Every data graph names both axes and keeps numeric/time ticks visible. */
.chart-axis-title { display: block; margin: 10px 0 4px; color: var(--deep); font: 800 9px/1.2 "DM Sans", sans-serif; letter-spacing: .35px; }
.chart-axis-title-y { margin-bottom: 5px; }
.chart-axis-title-x { margin-top: 4px; color: var(--muted); }

.focused-chart-row { display: grid; grid-template-columns: 45px minmax(0, 1fr); gap: 5px; align-items: stretch; }
.focused-chart-row .focused-plot { min-width: 0; margin-top: 0; }
.plot-y-ticks,.compact-y-ticks,.window-y-ticks,.analysis-y-ticks,.cross-section-y-ticks { display: flex; flex-direction: column; justify-content: space-between; color: var(--muted); font: 8px/1 "DM Mono", monospace; text-align: right; }
.plot-y-ticks { height: 154px; padding: 10px 0 8px; }
.plot-x-ticks,.compact-x-ticks,.window-x-ticks,.analysis-x-ticks,.cross-section-x-ticks { display: flex; justify-content: space-between; gap: 4px; color: var(--muted); font: 8px/1.2 "DM Mono", monospace; }
.plot-x-ticks { margin: 3px 0 0 50px; }
.plot-x-ticks span { min-width: 0; overflow: hidden; text-align: center; white-space: nowrap; }

.condition-chart > .chart-axis-title { margin-top: 8px; font-size: 8px; }
.condition-chart > .chart-axis-title-x { margin-top: 3px; }
.compact-chart-row { display: grid !important; grid-template-columns: 32px minmax(0, 1fr); gap: 4px; align-items: stretch; }
.compact-y-ticks { height: 58px; padding: 1px 0; font-size: 7px; }
.condition-chart .compact-chart-row svg { height: 58px; margin: 0; min-width: 0; }
.compact-x-ticks { margin: 3px 0 0 36px; font-size: 7px; }
.compact-x-ticks span { min-width: 0; flex: 1; overflow: hidden; text-align: center; white-space: nowrap; }

.window-chart-row { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 6px; align-items: stretch; }
.window-y-ticks { height: 98px; padding: 2px 0 14px; }
.window-bars { min-height: 98px; padding: 2px 1px 0; background: linear-gradient(to bottom, transparent 0 49%, color-mix(in srgb, var(--line) 65%, transparent) 50%, transparent 51%); }
.window-bars button { grid-template-rows: 82px; align-items: end; }
.window-bar-stack { display: flex; width: 100%; height: 82px; align-items: end; gap: 1px; }
.window-bars .window-bar-stack i { flex: 1 1 0; min-width: 2px; }
.window-x-ticks { margin: 3px 0 0 38px; }
.window-x-ticks span { flex: 1; min-width: 0; overflow: hidden; text-align: center; white-space: nowrap; }

.analysis-chart-row { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 6px; align-items: stretch; }
.analysis-y-ticks { height: 103px; padding: 8px 0 13px; }
.analysis-chart-row .timeline-chart { min-width: 0; margin: 0; background: linear-gradient(to bottom, transparent 0 49%, color-mix(in srgb, var(--line) 65%, transparent) 50%, transparent 51%); }
.analysis-x-ticks { margin: 3px 0 0 38px; }
.analysis-x-ticks span { flex: 1; min-width: 0; overflow: hidden; text-align: center; white-space: nowrap; }

.cross-section-chart-row { display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: 5px; align-items: stretch; }
.cross-section-y-ticks { height: 105px; padding: 4px 0 6px; }
.cross-section-chart-row svg { min-width: 0; margin: 0; }
.cross-section-x-ticks { margin: 4px 0 0 43px; }

@media (max-width: 390px) {
  .focused-chart-row { grid-template-columns: 39px minmax(0, 1fr); }
  .plot-y-ticks { height: 138px; font-size: 7px; }
  .plot-x-ticks { margin-left: 44px; font-size: 7px; }
  .chart-axis-title { font-size: 8px; }
  .window-chart-row,.analysis-chart-row { grid-template-columns: 27px minmax(0, 1fr); gap: 4px; }
  .window-x-ticks,.analysis-x-ticks { margin-left: 31px; font-size: 7px; }
}

/* Bait stops always begin from an independently calculated bait forecast. */
.bait-stop-options { display: grid; gap: 8px; margin: 15px 0; }
.bait-stop-choice { display: grid; gap: 2px; }
.bait-stop-preview-button { justify-self: end; min-height: 34px; padding: 5px 8px; font-size: 11px; }
.bait-stop-option { display: flex; align-items: center; gap: 10px; width: 100%; padding: 11px; text-align: left; border: 1px solid var(--line); border-radius: 13px; background: var(--card); color: var(--ink); }
.bait-stop-option:hover { border-color: var(--aqua); }
.bait-stop-option > span { display: grid; place-items: center; flex: none; width: 31px; height: 31px; border-radius: 10px; background: #dceeea; color: var(--aqua); font-size: 18px; }
.bait-stop-option > div { display: grid; min-width: 0; flex: 1; gap: 3px; }
.bait-stop-option b { color: var(--deep); font-size: 12px; }
.bait-stop-option small,.bait-stop-option em { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); font-size: 9px; font-style: normal; line-height: 1.35; }
.bait-stop-option em { color: var(--ink); }
.bait-stop-option > i { color: var(--aqua); font-size: 20px; font-style: normal; }
.bait-stop-sheet .secondary { width: 100%; margin-top: 12px; }
.bait-stop-sheet .primary { margin-top: 8px; }
body[data-theme="dark"] .bait-stop-option { background: #174650; }
body[data-theme="high"] .bait-stop-option { border: 2px solid #000; }
.bait-detour-grid { margin-top: 12px; }

/* Keep the 72-hour selector available after a forecast map has loaded. */
.result-time-control { margin-top: 12px; }
.result-time-control .filter-label { margin: 0 0 6px; }
.result-time-pills { padding-bottom: 2px; }
.result-time-pills button { padding: 7px 11px; }

/* Community keeps the SeaWise visual language while making privacy choices easy to read. */
.community-shell { width: min(100%, 860px); min-height: 100vh; margin: auto; padding-bottom: 28px; background: var(--paper); }
.community-shell .today-topbar { background: var(--paper); }
.community-notice { width: 35px; height: 35px; margin-right: 7px; border-radius: 50%; background: var(--card); color: var(--aqua); box-shadow: 0 3px 12px rgba(6,47,56,.08); font-size: 18px; }
.community-composer { margin: 5px 14px 13px; padding: 20px; overflow: hidden; border: 1px solid #b9dfd6; border-radius: 23px; background: radial-gradient(circle at 100% 0, rgba(132,211,200,.34), transparent 42%), linear-gradient(135deg, #eef8f4, #fff); box-shadow: 0 7px 20px rgba(6,52,61,.07); }
.community-composer h1 { max-width: 390px; margin: 5px 0 6px; color: var(--deep); font: 700 clamp(26px, 7vw, 37px)/.98 "Playfair Display", Georgia, serif; letter-spacing: -.7px; }
.community-composer p { max-width: 460px; margin: 0; color: var(--muted); font-size: 11px; line-height: 1.42; }
.community-compose-actions { display: flex; gap: 6px; margin-top: 15px; overflow-x: auto; padding-bottom: 2px; scrollbar-width: none; }
.community-compose-actions::-webkit-scrollbar { display: none; }
.community-compose-actions button { flex: none; min-height: 34px; padding: 8px 10px; border: 1px solid #c6e2da; border-radius: 10px; background: rgba(255,255,255,.9); color: var(--deep); font-size: 9px; font-weight: 800; white-space: nowrap; }
.community-compose-actions button:first-child { border-color: var(--deep); background: var(--deep); color: #fff; }
.community-compose-actions .community-draft-button { border-color: #e6c67c; background: #fff8e7; color: #6b4d0d; }
.community-tabs { display: flex; gap: 5px; overflow-x: auto; margin: 0 14px 14px; padding: 4px; border-radius: 13px; background: #dfece7; scrollbar-width: none; }
.community-tabs::-webkit-scrollbar { display: none; }
.community-tabs button { flex: 1 0 auto; min-height: 34px; padding: 7px 11px; border-radius: 9px; background: transparent; color: var(--muted); font-size: 10px; font-weight: 800; white-space: nowrap; }
.community-tabs button.active { background: #fff; color: var(--deep); box-shadow: 0 2px 7px rgba(6,52,61,.11); }
.community-feed,.community-local-reports,.community-groups-panel { display: grid; gap: 10px; margin: 0 14px; }
.community-post-card { overflow: hidden; border: 1px solid var(--line); border-radius: 18px; background: var(--card); box-shadow: 0 5px 16px rgba(6,52,61,.06); }
.community-post-card>header { display: flex; align-items: center; justify-content: space-between; gap: 9px; padding: 12px 12px 0; }
.community-author { display: flex; min-width: 0; align-items: center; gap: 8px; padding: 0; background: transparent; color: var(--ink); text-align: left; }
.community-author>span,.community-profile-head>span { display: grid; flex: none; width: 33px; height: 33px; place-items: center; border-radius: 50%; background: #dceeea; color: var(--aqua); font-size: 17px; }
.community-author div { min-width: 0; }.community-author b,.community-author small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.community-author b { max-width: 190px; color: var(--deep); font-size: 10px; }.community-author small { max-width: 220px; margin-top: 2px; color: var(--muted); font-size: 8px; }
.community-visibility { flex: none; padding: 4px 6px; border-radius: 99px; background: #edf6f2; color: var(--aqua); font-size: 8px; font-weight: 900; text-transform: uppercase; letter-spacing: .35px; }
.community-post-main { display: grid; grid-template-columns: 48px minmax(0,1fr); gap: 10px; align-items: start; padding: 13px 12px 0; }
.community-post-main>img { width: 48px; height: 48px; border-radius: 13px; object-fit: cover; }.community-post-icon { display: grid; width: 48px; height: 48px; place-items: center; border-radius: 13px; background: #e3f1ed; color: var(--aqua); font-size: 25px; }
.community-post-main .eyebrow { font-size: 8px; }.community-post-main h2 { margin: 3px 0 3px; color: var(--deep); font: 700 19px/1.02 "Playfair Display", Georgia, serif; }.community-post-main p { margin: 0; color: var(--muted); font-size: 10px; line-height: 1.38; }
.community-post-main .community-note { margin-top: 6px; color: var(--ink); }.community-location,.community-score { display: inline-block; margin: 7px 5px 0 0; padding: 4px 6px; border-radius: 7px; background: #f0f6f3; color: #44666b; font-size: 8px; line-height: 1.25; }.community-score { background: #edf7f3; color: #257064; font-weight: 800; }
.community-condition-strip { display: flex; flex-wrap: wrap; gap: 5px; padding: 11px 12px 0; }.community-condition-strip span { padding: 4px 6px; border-radius: 7px; background: #edf4f2; color: #44666b; font: 8px/1.2 "DM Mono", monospace; }
.community-privacy-line { margin: 10px 12px 0; padding: 8px 9px; border-left: 3px solid var(--aqua); border-radius: 0 8px 8px 0; background: #eff8f4; color: #45676a; font-size: 9px; line-height: 1.35; }
.community-post-card footer { display: flex; gap: 2px; overflow-x: auto; margin-top: 10px; padding: 7px 7px 8px; border-top: 1px solid var(--line); scrollbar-width: none; }.community-post-card footer::-webkit-scrollbar { display: none; }.community-post-card footer button { flex: none; padding: 7px 7px; border-radius: 8px; background: transparent; color: var(--muted); font-size: 9px; font-weight: 800; }.community-post-card footer button:hover { background: #edf5f2; color: var(--deep); }
.community-activity-map { padding: 14px; border: 1px solid #c9e1da; border-radius: 17px; background: linear-gradient(135deg, #eaf7f2, #fff); }.community-activity-map .section-heading { margin: 0; }.community-activity-map .section-heading>span { color: var(--aqua); font-size: 8px; font-weight: 800; }.community-activity-map>p { margin: 6px 0 11px; color: var(--muted); font-size: 10px; line-height: 1.4; }
.community-area-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 7px; }.community-area-grid article { min-width: 0; padding: 9px; border: 1px solid #cfe3dc; border-radius: 11px; background: rgba(255,255,255,.86); }.community-area-grid b,.community-area-grid span,.community-area-grid small { display: block; }.community-area-grid b { overflow: hidden; color: var(--deep); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }.community-area-grid span { margin: 4px 0 3px; color: var(--aqua); font: 700 13px/1 "Playfair Display", Georgia, serif; }.community-area-grid small { color: var(--muted); font-size: 8px; line-height: 1.3; }.community-area-grid .activity-moderate { border-color: #e1ca87; background: #fff8e9; }.community-area-grid .activity-high { border-color: #e1a781; background: #fff0e8; color: #9a4535; }.community-threshold { display: block; margin-top: 10px; color: var(--muted); font-size: 8px; line-height: 1.35; }
.community-local-list,.community-group-list,.community-draft-list,.community-notification-list,.community-comment-list { display: grid; gap: 7px; }.community-local-list article,.community-group-list button { display: flex; width: 100%; align-items: center; gap: 10px; padding: 11px; border: 1px solid var(--line); border-radius: 13px; background: var(--card); color: var(--ink); text-align: left; }.community-local-list article>span,.community-group-list button>span { display: grid; flex: none; width: 32px; height: 32px; place-items: center; border-radius: 10px; background: #e1efeb; color: var(--aqua); font-size: 18px; }.community-local-list article>div,.community-group-list button>div { min-width: 0; flex: 1; }.community-local-list b,.community-group-list b { display: block; color: var(--deep); font-size: 11px; }.community-local-list p { margin: 3px 0; color: var(--ink); font-size: 9px; }.community-local-list small,.community-group-list small { display: block; color: var(--muted); font-size: 8px; line-height: 1.35; }.community-group-list button>i { color: var(--aqua); font-size: 20px; font-style: normal; }
.community-loading { display: grid; min-height: 245px; align-content: center; justify-items: center; gap: 7px; margin: 0 14px; padding: 25px; border: 1px dashed #b8d8d0; border-radius: 18px; color: var(--muted); text-align: center; }.community-loading>span { color: var(--aqua); font-size: 28px; }.community-loading h2 { margin: 0; color: var(--deep); font: 700 23px/1.05 "Playfair Display", Georgia, serif; }.community-loading p { max-width: 280px; margin: 0; font-size: 10px; line-height: 1.4; }
.community-compose-sheet .trip-form,.community-group-sheet .trip-form { margin-top: 15px; }.community-privacy-picker,.community-preview { display: grid; gap: 8px; margin-top: 14px; padding: 12px; border: 1px solid #c9e1da; border-radius: 14px; background: #edf8f4; }.community-privacy-picker h3,.community-preview b { margin: 0; color: var(--deep); font-size: 13px; }.community-privacy-picker small,.community-preview p,.community-preview small { color: var(--muted); font-size: 9px; line-height: 1.4; }.community-preview p { margin: 0; color: var(--ink); }.community-comment-list article { padding: 9px 0; border-bottom: 1px solid var(--line); }.community-comment-list b,.community-comment-list span,.community-comment-list small { display: block; }.community-comment-list b { color: var(--deep); font-size: 10px; }.community-comment-list span { margin-top: 3px; color: var(--ink); font-size: 10px; line-height: 1.35; }.community-comment-list small { margin-top: 4px; color: var(--muted); font-size: 8px; }
.community-profile-head { display: flex; align-items: center; gap: 10px; }.community-profile-head>span { width: 48px; height: 48px; font-size: 24px; }.community-profile-head h2 { margin-bottom: 2px; }.community-profile-head p { margin: 0; color: var(--muted); font-size: 10px; }.community-draft-list article,.community-notification-list article { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; padding: 10px; border: 1px solid var(--line); border-radius: 11px; background: var(--card); }.community-draft-list article>div:first-child { min-width: 0; flex: 1; }.community-draft-list b,.community-draft-list small,.community-notification-list b,.community-notification-list span { display: block; }.community-draft-list b,.community-notification-list b { color: var(--deep); font-size: 10px; }.community-draft-list small,.community-notification-list span { margin-top: 3px; color: var(--muted); font-size: 8px; line-height: 1.35; }.community-draft-list article>div:last-child { display: grid; gap: 5px; flex: none; }.community-draft-list .secondary,.community-draft-list .text-button { margin: 0; padding: 7px 8px; font-size: 8px; }.community-notification-list { margin-top: 14px; }.community-notification-list article { display: grid; }.community-notification-list .secondary { width: max-content; margin: 4px 0 0; padding: 7px 8px; font-size: 9px; }
.guest-bottom-nav { grid-template-columns: repeat(6, minmax(0,1fr)); }.guest-bottom-nav button { min-width: 0; padding: 3px 1px; font-size: 7px; }.guest-bottom-nav button span { font-size: 15px; }.guest-bottom-nav i { right: 2px; }
body[data-theme="dark"] .community-shell,body[data-theme="dark"] .community-shell .today-topbar { background: #0c3540; }body[data-theme="dark"] .community-composer { border-color: #2b7570; background: radial-gradient(circle at 100% 0, rgba(87,177,166,.24), transparent 42%), #123f49; }body[data-theme="dark"] .community-composer h1,body[data-theme="dark"] .community-post-card h2,body[data-theme="dark"] .community-post-card b,body[data-theme="dark"] .community-loading h2,body[data-theme="dark"] .community-activity-map h2 { color: #e2f5f0; }body[data-theme="dark"] .community-post-card,body[data-theme="dark"] .community-local-list article,body[data-theme="dark"] .community-group-list button,body[data-theme="dark"] .community-draft-list article,body[data-theme="dark"] .community-notification-list article { border-color: #28565d; background: #103d47; }body[data-theme="dark"] .community-tabs { background: #174650; }body[data-theme="dark"] .community-tabs button.active,body[data-theme="dark"] .community-compose-actions button { background: #174650; color: #d8f0eb; }body[data-theme="dark"] .community-compose-actions button:first-child { background: #7bc3b7; color: #073d4a; }body[data-theme="dark"] .community-post-icon,body[data-theme="dark"] .community-author>span,body[data-theme="dark"] .community-profile-head>span,body[data-theme="dark"] .community-local-list article>span,body[data-theme="dark"] .community-group-list button>span { background: #174f56; }body[data-theme="dark"] .community-location,body[data-theme="dark"] .community-condition-strip span,body[data-theme="dark"] .community-privacy-line,body[data-theme="dark"] .community-privacy-picker,body[data-theme="dark"] .community-preview,body[data-theme="dark"] .community-activity-map { border-color: #2c706c; background: #174650; color: #cfe8e2; }body[data-theme="dark"] .community-area-grid article { border-color: #2c706c; background: #103d47; }body[data-theme="dark"] .community-post-card footer { border-color: #28565d; }
body[data-theme="high"] .community-composer,body[data-theme="high"] .community-post-card,body[data-theme="high"] .community-activity-map,body[data-theme="high"] .community-local-list article,body[data-theme="high"] .community-group-list button,body[data-theme="high"] .community-loading,body[data-theme="high"] .community-privacy-picker,body[data-theme="high"] .community-preview,body[data-theme="high"] .community-draft-list article,body[data-theme="high"] .community-notification-list article { border: 2px solid #000; background: #fff; box-shadow: none; }body[data-theme="high"] .community-composer h1,body[data-theme="high"] .community-post-card h2,body[data-theme="high"] .community-author b,body[data-theme="high"] .community-area-grid b,body[data-theme="high"] .community-loading h2 { color: #000; }body[data-theme="high"] .community-tabs { border: 2px solid #000; background: #fff; }body[data-theme="high"] .community-tabs button.active,body[data-theme="high"] .community-compose-actions button:first-child { background: #000; color: #fff; }

/* Native-safe mobile shell. These rules also benefit the installed PWA. */
html { background: var(--paper); }
body { min-height: 100dvh; padding: env(safe-area-inset-top) env(safe-area-inset-right) 0 env(safe-area-inset-left); }
.today-shell,.finder-shell,.results-shell,.community-shell { min-height: calc(100dvh - env(safe-area-inset-top)); padding-bottom: calc(86px + env(safe-area-inset-bottom)); }
.guest-bottom-nav--mobile { position: fixed; z-index: 35; right: 10px; bottom: max(8px, env(safe-area-inset-bottom)); left: 10px; width: auto; margin: 0; grid-template-columns: repeat(5, minmax(0, 1fr)); }
.mobile-quick-add { position: fixed; z-index: 37; right: max(22px, calc(env(safe-area-inset-right) + 14px)); bottom: calc(60px + env(safe-area-inset-bottom)); display: grid; width: 48px; height: 48px; place-items: center; border: 3px solid var(--paper); border-radius: 50%; background: var(--aqua); color: #fff; box-shadow: 0 8px 20px rgba(4,40,48,.28); font-size: 28px; line-height: 1; }
.mobile-quick-add:active { transform: scale(.94); }
.mobile-status-strip { display: flex; align-items: center; gap: 7px; min-height: 32px; padding: 5px 14px; overflow: hidden; border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--paper) 93%, transparent); color: var(--muted); font: 700 8px/1.25 "DM Mono", monospace; }
.mobile-cache-status { min-width: 0; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mobile-status-strip button { flex: none; padding: 5px 7px; border-radius: 7px; background: #e4f1ed; color: var(--aqua); font: 800 8px/1 "DM Sans", sans-serif; }
.mobile-connection { padding: 4px 6px; border-radius: 99px; background: #e4f1ed; color: #1b746b; text-transform: uppercase; }
.mobile-connection--offline { background: #fde8e6; color: #a1423c; }.mobile-connection--weak { background: #fff4d8; color: #816116; }
.sync-center-sheet .score-grid { margin-top: 14px; }.sync-inventory { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 7px; margin: 11px 0; }.sync-inventory span { display: flex; justify-content: space-between; gap: 8px; padding: 8px 9px; border: 1px solid var(--line); border-radius: 9px; background: var(--paper); color: var(--muted); font-size: 9px; }.sync-inventory b { color: var(--deep); font: 800 12px/1 "DM Mono",monospace; }.sync-queue { display: grid; gap: 7px; }.sync-queue article { display: grid; gap: 5px; padding: 10px; border: 1px solid var(--line); border-radius: 11px; background: var(--card); }.sync-queue b { color: var(--deep); font-size: 11px; text-transform: capitalize; }.sync-queue span { color: var(--muted); font-size: 9px; }.sync-queue div { display: flex; align-items: center; gap: 8px; }.sync-queue .secondary,.sync-queue .text-button { margin: 0; padding: 7px 8px; font-size: 9px; }
.native-photo-control { display: grid; gap: 5px; padding: 9px; border: 1px dashed #9fcfc3; border-radius: 10px; background: #eff8f5; }.native-photo-control .secondary { width: max-content; margin: 0; }.native-photo-control small { color: var(--muted); font-size: 8px; line-height: 1.35; }
.small-sheet,.analysis-sheet { max-height: calc(100dvh - env(safe-area-inset-top) - 12px); padding-bottom: max(20px, env(safe-area-inset-bottom)); overscroll-behavior: contain; }
body[data-theme="dark"] .mobile-status-strip { border-color: #28565d; background: #0c3540; }.mobile-status-strip button { background: #e4f1ed; }body[data-theme="dark"] .mobile-status-strip button { background: #174650; color: #b9ded8; }body[data-theme="dark"] .sync-queue article,body[data-theme="dark"] .native-photo-control { border-color: #28565d; background: #103d47; }
body[data-theme="high"] .mobile-status-strip,body[data-theme="high"] .sync-inventory span,body[data-theme="high"] .sync-queue article,body[data-theme="high"] .native-photo-control { border: 2px solid #000; background: #fff; color: #000; }body[data-theme="high"] .mobile-quick-add { border-color: #000; background: #fff500; color: #000; }
@media (min-width: 720px) { .guest-bottom-nav--mobile { right: max(24px, calc((100vw - 720px) / 2)); left: max(24px, calc((100vw - 720px) / 2)); } .mobile-quick-add { right: max(36px, calc((100vw - 720px) / 2 + 12px)); } }
@media (max-width: 360px) { .community-composer { padding: 17px; }.community-composer h1 { font-size: 27px; }.community-area-grid { grid-template-columns: 1fr; }.community-post-card footer button { padding-left: 5px; padding-right: 5px; font-size: 8px; }.guest-bottom-nav { width: calc(100% - 10px); padding: 4px; }.guest-bottom-nav button { font-size: 6px; }.guest-bottom-nav button span { font-size: 14px; } }
@media (min-width: 720px) { .community-composer,.community-tabs,.community-feed,.community-local-reports,.community-groups-panel { margin-left: 28px; margin-right: 28px; }.community-post-main { grid-template-columns: 62px minmax(0,1fr); }.community-post-main>img,.community-post-icon { width: 62px; height: 62px; }.community-area-grid { grid-template-columns: repeat(3, minmax(0,1fr)); } }