/* DataPortuaria Clima — brand: dataportuaria.com (blue #025AA6). Light and clean like the site
   it is embedded in: white surfaces, thin dividers, the blue for accents; only the map keeps a
   blue background. Type as in the site's journalistic version: Inter, with Inter Tight for
   headings and figures. */
:root {
  --brand: #025aa6;
  --brand-dark: #024a8e;
  --brand-light: #0378d4;
  --brand-glow: #3fa2ff;
  --brand-50: #f0f4fa;
  --brand-100: #dbe5f0;
  --green: #22a663;

  /* Navy derived from the brand blue: tooltips and dark details */
  --navy-900: #04192f;
  --navy-800: #062440;
  --navy-700: #0a3156;
  /* Map background, a lighter blue */
  --map-sea: #2a6496;

  /* Panels (app bar, panels over the map, today's summary, section bar): white. The "on-dark"
     names stay from the earlier dark panels; they are the panel text tones. */
  --glass: rgba(255, 255, 255, 0.95);
  --glass-border: rgba(2, 48, 92, 0.12);
  --on-dark: #1a1a1a;
  --on-dark-2: #34404d;
  --on-dark-3: #5d6874;
  --panel-shadow: 0 6px 20px rgba(2, 48, 92, 0.12);

  /* Content (light, like dataportuaria.com) */
  --page: #ffffff;
  --card: #ffffff;
  --text: #1a1a1a;
  --text-2: #2b2b2b;
  --text-3: #555b62;
  --divider: #e5e5e5;

  --radius: 14px;
  --font: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-head: "Inter Tight", "Inter", system-ui, sans-serif;
  --ink: #0b0b0b;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.45;
  color: var(--text);
  background: var(--page);
  -webkit-font-smoothing: antialiased;
}
img { display: block; }

/* ---------------------------------------------------------------- app bar */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.appbar {
  position: sticky; top: 0; z-index: 1200;
  display: flex; align-items: center; gap: 12px 24px;
  padding: 10px 24px;
  background: #fff;
  border-bottom: 1px solid var(--divider);
  color: var(--on-dark);
}
.brand { display: flex; align-items: center; gap: 10px; flex: none; }
.brand-link { display: block; border-radius: 4px; }
.brand-link:focus-visible { outline: 2px solid var(--brand-glow); outline-offset: 4px; }
.brand-logo { height: 22px; width: auto; }
.brand-tag {
  padding: 2px 9px; border-radius: 999px;
  background: var(--brand-50); color: var(--brand);
  font-weight: 700; font-size: 12px; letter-spacing: 0.04em;
  cursor: default; user-select: none;
}

/* The controls keep their size; the status text gives way when the bar is short of room. */
.controls { display: flex; align-items: center; gap: 8px; flex: none; }
.coords { display: flex; align-items: center; gap: 8px; }
.field { position: relative; display: flex; align-items: center; }
.field input, .field select {
  height: 36px; padding: 0 12px; border-radius: 10px;
  border: 1px solid var(--divider); background: #fff;
  color: var(--on-dark); font: 500 14px var(--font);
}
/* "Lat"/"Lon" sit inside the input as a prefix. */
.field-coord span {
  position: absolute; left: 11px; pointer-events: none;
  font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--on-dark-3);
}
.field-coord input { width: 140px; padding-left: 44px; font-variant-numeric: tabular-nums; }
.field-country select { width: 140px; font-weight: 600; }
.field-port select { width: 250px; font-weight: 600; }
.field select option { color: #1a1a1a; }
.field input:focus, .field select:focus, .btn-go:focus-visible, .btn-coords:focus-visible, .layer-btn:focus-visible, .play:focus-visible {
  outline: 2px solid var(--brand-light); outline-offset: 2px;
}
.btn-go {
  height: 36px; padding: 0 14px; border: 0; border-radius: 10px; cursor: pointer;
  background: var(--brand); color: #fff; font: 600 14px var(--font); white-space: nowrap;
}
.btn-go:hover { background: var(--brand-dark); }
/* Only on phones: shows/hides the coordinates row. */
.btn-coords {
  display: none; width: 40px; height: 40px; flex: none; place-items: center; cursor: pointer;
  border: 1px solid var(--divider); border-radius: 10px; background: #fff; color: var(--on-dark);
}
.btn-coords svg { width: 20px; height: 20px; }
.btn-coords[aria-expanded="true"] { background: var(--brand); border-color: transparent; color: #fff; }

/* The language selector above the update time, both to the right: the time and its age fit
   without taking the controls' width. */
.status { margin-left: auto; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; min-width: 0; font-size: 13px; color: var(--on-dark-2); white-space: nowrap; }
#run-updated { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.status .live-dot, .status .pill-warn { flex: none; }
.live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 0 rgba(34, 166, 99, 0.7); animation: pulse 2.4s infinite; }
@keyframes pulse { 70% { box-shadow: 0 0 0 8px rgba(34, 166, 99, 0); } 100% { box-shadow: 0 0 0 0 rgba(34, 166, 99, 0); } }
.pill-warn { padding: 2px 8px; border-radius: 999px; border: 1px solid rgba(200, 130, 0, 0.5); color: #9a6200; background: #fff8e6; font-size: 12px; font-weight: 600; }
.status-live { display: flex; align-items: center; gap: 8px; min-width: 0; }

/* Language selector, as on the company site: "ES | EN | PT", the current one in the brand color. */
.lang-switch {
  display: flex; align-items: center; gap: 6px; flex: none;
  font-size: 13px; font-weight: 700; letter-spacing: 0.04em; line-height: 1;
}
.status .lang-switch { order: -1; }
.lang-sep { color: #c8c8c8; font-weight: 400; }
.lang-current { color: var(--brand); }
.lang-link { color: var(--on-dark-2); text-decoration: none; border-radius: 3px; padding: 4px 2px; margin: -4px -2px; }
.lang-link:hover { color: var(--brand); }
.lang-link:focus-visible { outline: 2px solid var(--brand-light); outline-offset: 2px; }

.error-banner {
  position: relative; z-index: 1100;
  margin: 0; padding: 12px 24px;
  background: #fdecea; color: #8a1c13; border-bottom: 1px solid #f5c2bd; font-weight: 500;
}

/* ---------------------------------------------------------------- hero */
/* First screen: the port's heading, current conditions and today's report in a column on the
   left, the map on the right. The map stays in view while the column scrolls, and leaves a strip
   below (the start of the forecast, under the floating section bar) even on short windows, so the
   bar never covers the timeline. --appbar-h is measured in app.js. */
.hero {
  --gap: 16px;
  --side-w: 400px;
  --legend-w: 260px;
  --timeline-h: 84px;
  display: grid; grid-template-columns: var(--side-w) minmax(0, 1fr); align-items: start;
  background: var(--page);
}
.hero-side { display: flex; flex-direction: column; gap: var(--gap); min-width: 0; padding: var(--gap) 0 var(--gap) var(--gap); }
.map-area {
  position: sticky; top: var(--appbar-h, 57px); overflow: hidden;
  height: clamp(400px, calc(100svh - var(--appbar-h, 57px) - 64px), 860px);
}
#map { position: absolute; inset: 0; background: var(--map-sea); }
/* Tint the grey basemap towards a lighter brand blue; the sea stays darker than land. */
.hero .base-tiles { filter: sepia(1) hue-rotate(175deg) saturate(2.6) brightness(0.98) contrast(1.05); }
.hero .leaflet-container { background: var(--map-sea); font-family: var(--font); }
.hero .leaflet-control-attribution { background: rgba(255, 255, 255, 0.75); color: var(--text-3); font-size: 10px; }
.hero .leaflet-control-attribution a { color: var(--text-2); }
.wind-canvas { pointer-events: none; }

/* Gesture hint shown when a plain wheel/one-finger gesture scrolls the page instead of the map */
.map-hint {
  position: absolute; z-index: 900; left: 50%; top: 50%; transform: translate(-50%, -50%) scale(0.96);
  max-width: calc(100% - 32px); padding: 12px 20px; border-radius: 999px;
  background: rgba(4, 25, 47, 0.88); border: 1px solid var(--glass-border); color: #fff;
  font: 600 16px var(--font); text-align: center; box-shadow: 0 12px 32px rgba(0, 10, 25, 0.5);
  opacity: 0; pointer-events: none; transition: opacity 0.2s, transform 0.2s;
}
.map-hint.is-visible { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.map-hint:empty { display: none; }

.glass {
  background: var(--glass);
  backdrop-filter: blur(14px) saturate(1.3);
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  box-shadow: var(--panel-shadow);
  color: var(--on-dark);
}

/* Now panel (top left): sky summary, then the wind block and the rain, storm and visibility
   tiles that matter most in a port, then the secondary values. */
.now-panel { padding: 14px 16px 12px; }
/* The panel fits the map; if a very short window still clips it, it scrolls without a bar. */
.now-panel::-webkit-scrollbar { display: none; }
/* Breadcrumb: Inicio › Argentina › Clima › port. */
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; margin: 0 0 8px; font-size: 12px; color: var(--on-dark-3); }
.crumbs a { color: var(--on-dark-2); text-decoration: none; }
.crumbs a:hover { color: var(--on-dark); text-decoration: underline; }
.crumbs [aria-current] { color: var(--on-dark); }
.now-title { font-weight: 600; color: var(--on-dark); }
.now-eyebrow { margin: 0; font-weight: 400; display: flex; gap: 8px; align-items: center; font-size: 12px; color: var(--on-dark-2); }
.now-mode {
  padding: 2px 8px; border-radius: 999px; background: var(--green); color: #fff;
  font-weight: 700; font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase;
}
.now-mode.is-forecast { background: var(--brand-light); }
#now-when { white-space: nowrap; }
.now-port { margin: 8px 0 0; font-size: 26px; line-height: 1.1; font-weight: 700; }
/* "Clima en" leads the page's main heading in a smaller line above the port's name. */
.now-port-pre { display: block; margin-bottom: 2px; font-size: 15px; font-weight: 600; color: var(--on-dark-2); }
.now-province { margin: 2px 0 12px; color: var(--on-dark-3); font-size: 12px; }
.now-sky { display: flex; align-items: center; gap: 10px; margin: 8px 0 10px; }
/* The sky icons have generous inner margins: drawn larger, with negative margins to keep the layout. */
.now-icon { width: 62px; height: 62px; margin: -8px -8px -8px -6px; flex: none; }
.now-temp { font-size: 38px; font-weight: 700; line-height: 1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.now-temp small { font-size: 15px; font-weight: 500; color: var(--on-dark-2); margin-left: 2px; vertical-align: top; }
.now-sky-text { min-width: 0; padding-left: 10px; border-left: 1px solid var(--glass-border); }
.now-condition { font-size: 14px; font-weight: 600; line-height: 1.2; }
.now-feels { margin-top: 2px; font-size: 12px; color: var(--on-dark-3); }
.now-feels b { color: var(--on-dark-2); font-weight: 600; }

/* Sections are open, separated by hairlines (no boxes): wind first, then rain, storm and
   visibility in three columns. */
.now-wind {
  --wind: var(--brand-light);
  --gust: var(--brand-light);
  padding: 10px 0 10px; border-top: 1px solid var(--glass-border);
}
.now-section-title { margin: 0 0 4px; font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--on-dark-2); }
.now-wind-body { display: flex; align-items: center; gap: 14px; }
.compass { width: 88px; height: 88px; flex: none; overflow: visible; }
.compass-glow { fill: color-mix(in srgb, var(--wind) 16%, transparent); transition: fill 0.4s; }
.compass-ring { fill: none; stroke: var(--wind); stroke-width: 3; filter: drop-shadow(0 0 6px var(--wind)); transition: stroke 0.4s; }
/* Tick every 30° drawn with a dash pattern on a circle of pathLength 360. */
.compass-ticks { fill: none; stroke: rgba(2, 48, 92, 0.22); stroke-width: 4; stroke-dasharray: 1 29; stroke-dashoffset: 0.5; }
.compass text { fill: var(--on-dark-2); font: 700 11px var(--font); text-anchor: middle; }
.compass-from { transform-origin: 60px 60px; transition: transform 0.6s cubic-bezier(0.3, 1.3, 0.5, 1); }
.compass-from path { fill: var(--wind); stroke: #fff; stroke-width: 2; stroke-linejoin: round; filter: drop-shadow(0 0 4px var(--wind)); }
.compass-needle { transform-origin: 60px 60px; transition: transform 0.6s cubic-bezier(0.3, 1.3, 0.5, 1); }
.needle-head { fill: var(--navy-800); filter: drop-shadow(0 0 3px var(--wind)); }
.needle-tail { stroke: rgba(2, 48, 92, 0.35); stroke-width: 3; stroke-linecap: round; }
.compass-hub { fill: #fff; stroke: var(--navy-800); stroke-width: 2; }
.now-wind-info { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.now-wind-speed { display: flex; align-items: baseline; gap: 4px; white-space: nowrap; }
/* km/h and knots side by side, same size, with a thin divider. */
.speed-sep { align-self: center; width: 1px; height: 26px; margin: 0 6px; background: var(--glass-border); }
.now-wind-speed b { font-size: 32px; line-height: 1.05; font-weight: 700; color: var(--on-dark); font-variant-numeric: tabular-nums; }
.now-wind-speed.is-long b { font-size: 26px; }
.now-wind-speed small { font-size: 14px; color: var(--on-dark-2); font-weight: 500; }
.now-knots { font-size: 13px; font-weight: 600; color: var(--on-dark-2); font-variant-numeric: tabular-nums; }
.now-wind-dir { margin-top: 4px; font-size: 13px; color: var(--on-dark-2); }
.now-gust-row { margin: 8px 0 0; display: flex; align-items: baseline; justify-content: space-between; gap: 8px; font-size: 13px; color: var(--on-dark-2); }
.now-gust-label { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }
.now-gust-row b { font-size: 17px; color: var(--on-dark); font-variant-numeric: tabular-nums; }

/* The panel's own wind scale: the wind (filled dot) and gusts (ring) placed on the color bar. */
/* Wind is a circle and gusts a diamond, each filled with its own speed color and outlined in
   white, on the bar and as keys in the text. */
.mark-wind, .mark-gust {
  display: inline-block; flex: none; box-sizing: border-box; width: 11px; height: 11px;
  border: 2px solid #fff; box-shadow: 0 0 0 1px rgba(2, 48, 92, 0.45);
}
.mark-wind { border-radius: 50%; background: var(--wind); }
.mark-gust { border-radius: 2px; background: var(--gust); transform: rotate(45deg) scale(0.9); }
.now-scale { margin-top: 9px; }
.now-scale-bar { position: relative; height: 6px; border-radius: 999px; margin: 0 2px; }
.now-scale-bar .mark-wind, .now-scale-bar .mark-gust {
  position: absolute; top: 50%; width: 16px; height: 16px; border-width: 3px;
  box-shadow: 0 0 0 1px rgba(2, 48, 92, 0.4), 0 2px 6px rgba(2, 48, 92, 0.3); transition: left 0.4s;
}
.now-scale-bar .mark-wind { transform: translate(-50%, -50%); z-index: 1; }
.now-scale-bar .mark-gust { width: 15px; height: 15px; transform: translate(-50%, -50%) rotate(45deg); }
.now-scale-bar [hidden] { display: none; }
.now-scale-ranges { position: relative; height: 15px; margin: 3px 2px 0; font-size: 10.5px; color: var(--on-dark-3); }
.now-scale-ranges span { position: absolute; top: 0; transform: translateX(-50%); white-space: nowrap; }
.now-wind-read { margin: 4px 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px; font-size: 12px; color: var(--on-dark-2); }
.now-wind-read b { color: var(--on-dark); }
.now-wind-read .mark-gust { margin: 0 1px 0 3px; }

.now-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 6px 0 0; border-top: 1px solid var(--glass-border); }
.now-col { display: flex; flex-direction: column; gap: 1px; min-width: 0; padding: 0 8px; border-left: 1px solid var(--glass-border); }
.now-col:first-child { padding-left: 0; border-left: 0; }
.col-label { display: flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 600; color: var(--on-dark-2); white-space: nowrap; }
.col-label svg { width: 13px; height: 13px; flex: none; }
.col-value { font-size: 21px; font-weight: 700; line-height: 1.2; font-variant-numeric: tabular-nums; white-space: nowrap; }
.col-sub { font-size: 11px; color: var(--on-dark-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Values that open the table on their rows: a hover tint and a small table icon. */
[data-table-rows] { cursor: pointer; border-radius: 10px; transition: background 0.15s; }
[data-table-rows]:hover { background: var(--brand-50); }
[data-table-rows]:focus-visible { outline: 2px solid var(--brand-light); outline-offset: 2px; }
.to-table { width: 12px; height: 12px; flex: none; margin-left: auto; color: var(--on-dark-3); transition: color 0.15s; }
[data-table-rows]:hover .to-table { color: var(--brand-light); }
.now-section-title { display: flex; align-items: center; }
.to-table-text { display: inline-flex; align-items: center; gap: 5px; margin-left: auto; font-size: 10.5px; font-weight: 600; letter-spacing: 0.02em; text-transform: none; color: var(--on-dark-3); }
.to-table-text .to-table { margin: 0; }
[data-table-rows]:hover .to-table-text { color: var(--brand-light); }
.now-sky[data-table-rows] { margin: 4px -6px 6px; padding: 4px 6px; }
.now-wind[data-table-rows] { margin: 0 -6px; padding-left: 6px; padding-right: 6px; border-radius: 0; }
.now-wind[data-table-rows]:hover { border-radius: 10px; }
.now-cols .now-col[data-table-rows] { padding-top: 4px; padding-bottom: 4px; }


/* Wind alerts: a bar at the top of the map (the most severe one) that unfolds the list and
   the criteria. Colors: SMN levels yellow, orange, red; blue for the strong-wind notice. */
.wind-alert {
  position: absolute; z-index: 850; top: var(--gap);
  left: var(--gap); right: 350px;
  display: flex; flex-direction: column; align-items: center; pointer-events: none;
}
.wind-alert[hidden] { display: none; }
.wind-alert > * { pointer-events: auto; }
.wa-main {
  display: flex; align-items: center; gap: 10px; max-width: 100%; padding: 8px 12px 8px 10px; cursor: pointer;
  font: inherit; text-align: left; border-left: 4px solid var(--alert);
}
.wa-main:hover { border-color: var(--glass-border); border-left-color: var(--alert); background: #fff; }
.wa-main:focus-visible { outline: 2px solid var(--brand-glow); outline-offset: 2px; }
.alert-icon { width: 22px; height: 22px; flex: none; }
.wa-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.wa-text b { font-size: 14px; color: var(--on-dark); }
.wa-where { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; font-size: 12.5px; color: var(--on-dark-2); }
.wa-port { display: inline-flex; align-items: center; gap: 4px; font-weight: 700; color: var(--on-dark); }
.wa-port::before {
  content: ""; width: 12px; height: 12px; flex: none; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a7 7 0 0 0-7 7c0 5 7 13 7 13s7-8 7-13a7 7 0 0 0-7-7Zm0 9.5A2.5 2.5 0 1 1 12 6.5a2.5 2.5 0 0 1 0 5Z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a7 7 0 0 0-7 7c0 5 7 13 7 13s7-8 7-13a7 7 0 0 0-7-7Zm0 9.5A2.5 2.5 0 1 1 12 6.5a2.5 2.5 0 0 1 0 5Z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.wa-where > span + span::before { content: "· "; color: var(--on-dark-3); }
.wa-more { padding: 1px 7px; border-radius: 999px; background: var(--brand-50); font-size: 12px; font-weight: 700; color: var(--on-dark); }
.wa-more[hidden] { display: none; }
.wa-chevron { width: 18px; height: 18px; flex: none; color: var(--on-dark-2); transition: transform 0.2s; }
.wa-main[aria-expanded="true"] .wa-chevron { transform: rotate(180deg); }
.wa-details { width: min(400px, 100%); margin-top: 8px; padding: 12px 14px; max-height: 70vh; overflow-y: auto; }
.wa-details[hidden] { display: none; }
.wa-heading { margin: 0 0 6px; font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--on-dark-2); }
.wa-heading small { text-transform: none; letter-spacing: 0; font-weight: 500; color: var(--on-dark-3); }
.wa-list { list-style: none; margin: 0 0 12px; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.wa-item {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; cursor: pointer; text-align: left;
  border: 1px solid var(--glass-border); border-left: 4px solid var(--alert); border-radius: 10px;
  background: #fff; color: var(--on-dark); font: inherit;
}
.wa-item:hover { background: var(--brand-50); }
.wa-item:focus-visible { outline: 2px solid var(--brand-glow); outline-offset: 2px; }
.wa-item > span:nth-of-type(1) { display: flex; flex-direction: column; flex: 1; min-width: 0; line-height: 1.3; }
.wa-item b { font-size: 13.5px; }
.wa-item span span { font-size: 12.5px; color: var(--on-dark); }
.wa-item small { font-size: 11.5px; color: var(--on-dark-2); }
.wa-go { display: inline-flex; align-items: center; gap: 2px; font-size: 12px; font-weight: 600; color: var(--brand-light); white-space: nowrap; }
.wa-go svg { width: 14px; height: 14px; }
.wa-criteria table { width: 100%; border-collapse: collapse; font-size: 12.5px; font-variant-numeric: tabular-nums; }
.wa-criteria th, .wa-criteria td { padding: 4px 6px; text-align: right; border-bottom: 1px solid var(--glass-border); }
.wa-criteria thead th { font-size: 11px; font-weight: 600; color: var(--on-dark-3); }
.wa-criteria th:first-child { text-align: left; }
.wa-criteria tbody th { display: flex; align-items: center; gap: 7px; font-weight: 600; color: var(--on-dark); }
.wa-criteria tbody th i { width: 10px; height: 10px; border-radius: 3px; background: var(--alert); }
.wa-criteria td { color: var(--on-dark); }
.wa-criteria td::before { content: "≥ "; color: var(--on-dark-3); }
.wa-note { margin: 10px 0 0; font-size: 11.5px; line-height: 1.45; color: var(--on-dark-2); }
.wa-note a { color: var(--brand-light); }

/* Level at the selected hour, next to the panel's "Viento" title */
.wind-level {
  margin-left: 8px; padding: 1px 7px; border-radius: 999px; background: var(--alert); color: #04192f;
  font-size: 10px; font-weight: 700; letter-spacing: 0.04em;
}
.wind-level[hidden] { display: none; }
.wind-level[data-level="red"], .wind-level[data-level="orange"] { color: #fff; }
.wind-level[data-level="notice"] { color: #fff; background: color-mix(in srgb, var(--alert) 70%, #04192f); }

/* SMN-level alert on a port's pin */
.pin-alert { display: grid; place-items: center; padding: 0 5px 0 0; }
.pin-alert .alert-icon { width: 17px; height: 17px; }

/* Alert hours on the timeline rail */
.rail-alert { position: absolute; top: 0; height: 4px; border-radius: 2px; background: var(--alert); z-index: 1; }

/* Layer switch (top right, horizontal) */
.layer-switch { position: absolute; z-index: 800; right: var(--gap); top: var(--gap); display: flex; padding: 4px; gap: 2px; }
.layer-btn {
  display: flex; align-items: center; gap: 7px; padding: 7px 12px 7px 9px;
  border: 0; border-radius: 10px; background: transparent; color: var(--on-dark-2);
  font: 600 13px var(--font); cursor: pointer;
}
.layer-btn svg { width: 18px; height: 18px; }
.layer-btn:hover { background: var(--brand-50); color: var(--on-dark); }
.layer-btn[aria-pressed="true"] { background: var(--brand-light); color: #fff; }

/* Map controls (right, under the layer switch): zoom in/out and "all ports" */
.hero .leaflet-top.leaflet-right { top: calc(var(--gap) + 48px); right: calc(var(--gap) - 10px); }
.hero .leaflet-bar { border: 1px solid var(--glass-border); border-radius: 10px; overflow: hidden; box-shadow: var(--panel-shadow); }
.hero .leaflet-bar a, .hero .leaflet-bar button {
  display: grid; place-items: center; width: 36px; height: 36px; line-height: 36px; padding: 0;
  background: var(--glass); color: var(--on-dark); border: 0; border-bottom: 1px solid var(--glass-border);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); font: 600 18px var(--font); cursor: pointer;
}
.hero .leaflet-bar a:last-child, .hero .leaflet-bar button:last-child { border-bottom: 0; }
.hero .leaflet-bar a:hover, .hero .leaflet-bar button:hover { background: var(--brand-light); color: #fff; }
.hero .leaflet-bar svg { width: 18px; height: 18px; }
.hero .leaflet-bar a.leaflet-disabled { color: var(--on-dark-3); background: var(--glass); }

/* Legend (bottom right, above the timeline): what the colors mean, with named ranges. */
.legend {
  position: absolute; z-index: 800; right: var(--gap); bottom: calc(var(--gap) + var(--timeline-h) + 12px); width: var(--legend-w);
  padding: 9px 12px 6px;
}
.legend-title { font-size: 12px; color: var(--on-dark); }
.legend-title small { color: var(--on-dark-3); font-size: 11px; }
.legend-text { margin: 2px 0 7px; font-size: 11px; line-height: 1.35; color: var(--on-dark-2); }
.legend .mg-scale-ticks, .legend .mg-scale-ranges { color: var(--on-dark-3); font-size: 10px; height: 14px; }
.legend .mg-scale-ranges span { color: var(--on-dark); font-size: 10.5px; }

/* Timeline (bottom, right of the panel): a title and the selected hour, then day buttons, the
   rail with night hours shaded, and hour marks. */
.timeline {
  position: absolute; z-index: 800; left: var(--gap); right: var(--gap); bottom: var(--gap);
  height: var(--timeline-h); padding: 5px 14px 3px 10px;
  display: flex; flex-direction: column; gap: 2px;
}
.timeline-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 26px; }
.timeline-hint { margin: 0; display: flex; align-items: center; gap: 6px; min-width: 0; font-size: 12px; color: var(--on-dark-2); white-space: nowrap; }
.timeline-hint svg { width: 16px; height: 16px; flex: none; color: var(--brand-light); }
.timeline-hint b { color: var(--on-dark); font-weight: 600; }
.timeline-hint-more { overflow: hidden; text-overflow: ellipsis; }
.timeline-pick { display: flex; align-items: center; gap: 6px; flex: none; }
.step-hour {
  width: 26px; height: 26px; display: grid; place-items: center; padding: 0; border-radius: 50%; cursor: pointer;
  border: 1px solid var(--glass-border); background: #fff; color: var(--on-dark);
}
.step-hour svg { width: 16px; height: 16px; }
.step-hour:hover:not(:disabled) { background: var(--brand-light); border-color: transparent; color: #fff; }
.step-hour:disabled { opacity: 0.35; cursor: default; }
.step-hour:focus-visible { outline: 2px solid var(--brand-glow); outline-offset: 2px; }
.timeline-label { min-width: 104px; text-align: center; font-weight: 700; font-size: 14px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.timeline-row { display: flex; align-items: center; gap: 12px; flex: 1; }
.play {
  width: 34px; height: 34px; flex: none; border-radius: 50%; border: 0; cursor: pointer;
  background: var(--brand-light); color: #fff; display: grid; place-items: center;
}
.play svg { width: 18px; height: 18px; }
.play:hover { background: var(--brand); }
.timeline-track { position: relative; flex: 1; min-width: 0; height: 48px; }
.timeline-days, .timeline-rail, .timeline-hours { position: absolute; left: 9px; right: 9px; }
.timeline-days { top: 0; height: 16px; z-index: 1; }
.timeline-day {
  position: absolute; top: 0; padding: 0 0 0 5px; border: 0; border-left: 1px solid var(--glass-border); background: none;
  font: 600 11px/16px var(--font); color: var(--on-dark-2); white-space: nowrap; cursor: pointer;
}
.timeline-day:first-child { border-left: 0; padding-left: 0; }
.timeline-day:hover { color: var(--on-dark); text-decoration: underline; }
.timeline-day.is-active { color: var(--brand); font-weight: 700; }
.timeline-day:focus-visible { outline: 2px solid var(--brand-glow); outline-offset: 2px; border-radius: 3px; }
.timeline-rail { top: 21px; height: 10px; border-radius: 999px; overflow: hidden; background: #e6edf5; }
.rail-night { position: absolute; top: 0; bottom: 0; background: rgba(2, 48, 92, 0.13); }
.rail-midnight { position: absolute; top: 0; bottom: 0; width: 1px; background: rgba(2, 48, 92, 0.3); }
.rail-fill { position: absolute; left: 0; top: 0; bottom: 0; width: var(--fill, 0%); background: linear-gradient(90deg, rgba(3, 120, 212, 0.55), rgba(63, 162, 255, 0.85)); }
#timeline {
  position: absolute; left: 0; right: 0; top: 14px; width: 100%; height: 24px; margin: 0;
  background: transparent; -webkit-appearance: none; appearance: none; cursor: pointer;
}
#timeline::-webkit-slider-runnable-track { height: 24px; background: transparent; }
#timeline::-moz-range-track { height: 24px; background: transparent; }
#timeline::-webkit-slider-thumb {
  -webkit-appearance: none; box-sizing: border-box; width: 18px; height: 18px; margin-top: 3px; border-radius: 50%;
  background: #fff; border: 4px solid var(--brand-light); box-shadow: 0 0 0 4px rgba(3, 120, 212, 0.18), 0 2px 6px rgba(2, 48, 92, 0.3);
}
#timeline::-moz-range-thumb {
  box-sizing: border-box; width: 18px; height: 18px; border-radius: 50%;
  background: #fff; border: 4px solid var(--brand-light); box-shadow: 0 0 0 4px rgba(3, 120, 212, 0.18), 0 2px 6px rgba(2, 48, 92, 0.3);
}
#timeline:focus-visible { outline: 2px solid var(--brand-glow); outline-offset: 2px; border-radius: 6px; }
.timeline-hours { top: 34px; height: 14px; pointer-events: none; }
.timeline-hours span {
  position: absolute; top: 0; transform: translateX(-50%); font-size: 10px; line-height: 14px; color: var(--on-dark-3); font-variant-numeric: tabular-nums;
}
.timeline-hours span::before { content: ""; position: absolute; left: 50%; top: -2px; width: 1px; height: 3px; background: rgba(2, 48, 92, 0.25); }
.timeline-tip {
  position: absolute; bottom: calc(100% - 10px); transform: translateX(-50%); z-index: 2; pointer-events: none;
  display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 5px 10px; border-radius: 9px;
  background: #fff; color: var(--navy-900); font-size: 12px; white-space: nowrap; border: 1px solid var(--divider); box-shadow: var(--panel-shadow);
}
.timeline-tip[hidden] { display: none; }
.timeline-tip b { font-size: 12px; }
.timeline-tip span { display: flex; align-items: center; gap: 5px; color: #33475c; font-weight: 600; }
.timeline-tip i { width: 9px; height: 9px; border-radius: 50%; }

/* "Ver clima ahora": shown only while a forecast hour is selected. */
.back-now {
  flex: none; display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px 0 10px; margin-left: 4px;
  border: 1px solid var(--glass-border); border-radius: 999px; cursor: pointer;
  background: var(--green); color: #fff; font: inherit; font-size: 13px; font-weight: 600; white-space: nowrap;
}
.back-now:hover { filter: brightness(1.1); }
.back-now:focus-visible { outline: 2px solid var(--brand-glow); outline-offset: 2px; }
.back-now[hidden] { display: none; }
.back-now svg { width: 15px; height: 15px; }
.back-now-panel {
  margin-left: auto; height: 24px; padding: 0 9px 0 7px; gap: 4px; font-size: 11px;
  background: transparent; color: var(--on-dark); border-color: var(--glass-border);
}
.back-now-panel:hover { background: var(--brand-50); filter: none; }
.back-now-panel svg { width: 13px; height: 13px; }

/* Port pins on the map: a dot at the port and a label (value + name) placed around it by
   app.js, detached with a leader line when nearby ports leave no room. */
.pin-icon { width: 0; height: 0; }
.port-pin { position: relative; width: 0; height: 0; cursor: pointer; }
.port-pin .pin-dot {
  position: absolute; left: 0; top: 0; transform: translate(-50%, -50%); z-index: 1;
  width: 12px; height: 12px; border-radius: 50%; background: #fff; border: 3px solid var(--brand-light);
  box-shadow: 0 0 0 2px rgba(4, 25, 47, 0.6);
}
.port-pin .pin-leader { position: absolute; left: 0; top: 0; overflow: visible; pointer-events: none; }
.port-pin .pin-leader line { stroke: #fff; stroke-width: 1.6; filter: drop-shadow(0 0 1.5px rgba(4, 25, 47, 0.95)) drop-shadow(0 0 1px rgba(4, 25, 47, 0.95)); }
.port-pin .pin-label {
  position: absolute; z-index: 2; display: flex; align-items: stretch; white-space: nowrap;
  border-radius: 999px; overflow: hidden; border: 2px solid rgba(255, 255, 255, 0.9);
  box-shadow: 0 4px 12px rgba(2, 30, 60, 0.3);
}
.port-pin .pin-chip {
  display: flex; align-items: center; gap: 5px; padding: 3px 8px 3px 9px;
  background: var(--chip, var(--brand-light)); color: var(--chip-ink, #fff);
  font: 700 13px/18px var(--font); font-variant-numeric: tabular-nums;
}
.port-pin .pin-chip svg { width: 11px; height: 11px; }
.port-pin .pin-arrow { display: inline-block; font-size: 10px; }
.port-pin .pin-name {
  display: flex; align-items: center; padding: 3px 11px 3px 8px;
  background: rgba(255, 255, 255, 0.96); color: var(--navy-900); font: 600 12px/18px var(--font);
}
.port-pin:hover .pin-label { border-color: #fff; box-shadow: 0 0 0 3px rgba(63, 162, 255, 0.45), 0 6px 16px rgba(0, 10, 25, 0.45); }
/* Zoomed out: smaller labels so all ports fit. */
.port-pin.is-small .pin-chip { padding: 1px 6px 1px 7px; font-size: 11px; line-height: 15px; gap: 4px; }
.port-pin.is-small .pin-name { padding: 1px 8px 1px 6px; font-size: 10.5px; line-height: 15px; }
.port-pin.is-small .pin-dot { width: 10px; height: 10px; border-width: 2.5px; }
/* Selected port: larger, with the brand blue on its name. */
.port-pin.is-selected .pin-label { border-color: #fff; box-shadow: 0 0 0 3px rgba(63, 162, 255, 0.55), 0 8px 20px rgba(0, 10, 25, 0.5); }
.port-pin.is-selected .pin-chip { padding: 4px 9px 4px 11px; font-size: 15px; line-height: 20px; }
.port-pin.is-selected .pin-name { padding: 4px 12px 4px 9px; background: var(--brand-light); color: #fff; font-size: 13px; line-height: 20px; }
.port-pin.is-selected.is-small .pin-chip { padding: 2px 7px 2px 9px; font-size: 13px; line-height: 17px; }
.port-pin.is-selected.is-small .pin-name { padding: 2px 10px 2px 7px; font-size: 11.5px; line-height: 17px; }
.pin-probe { position: absolute; left: 0; top: 0; visibility: hidden; pointer-events: none; }
.point-marker { width: 18px; height: 18px; border-radius: 50%; border: 3px solid #fff; background: var(--brand-glow); box-shadow: 0 0 0 6px rgba(63, 162, 255, 0.35); transform: translate(-50%, -50%); }

/* ---------------------------------------------------------------- content */
.content { max-width: 1440px; margin: 0 auto; padding: 22px 24px 24px; }
.section { margin-bottom: 40px; }
.section-head { margin-bottom: 16px; }
/* Today's summary opens the forecast section, above the 10-day heading. */
.today-summary:not([hidden]) + .section-head { margin-top: 32px; }
#forecast { scroll-margin-top: calc(var(--appbar-h, 82px) + 16px); }
.eyebrow { margin: 0 0 4px; color: var(--brand); font-weight: 700; font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; }
.section-title { margin: 0; font-size: 30px; line-height: 1.15; font-weight: 700; color: var(--text); }
.section-port { color: var(--brand); }
.section-sub { margin: 6px 0 0; color: var(--text-3); }
.section-hint { margin: 4px 0 0; font-size: 13px; color: var(--text-3); }
/* Under the day summary: how to use the day cards, and the whole 10-day table. */
.days-head { display: flex; align-items: center; justify-content: flex-end; gap: 16px; margin-bottom: 12px; }
/* 10-day outlook above the day cards (generated text). */
.outlook { margin: 4px 0 14px; max-width: 920px; font-size: 16px; line-height: 1.55; color: var(--text-2); }
.days-head .section-sub { margin: 0; }
/* What the daily cards show: a note next to the "all hours" button, set apart from the outlook above. */
.days-head { justify-content: space-between; align-items: flex-end; padding-top: 14px; border-top: 1px solid var(--divider); }
.days-head .all-hours { flex-shrink: 0; }
.days-note { margin: 0; max-width: 720px; font-size: 13px; line-height: 1.5; color: var(--text-3); }

/* Meteogram: hourly table with intensity colors */
.meteogram-wrap { overflow-x: auto; background: var(--card); border: 1px solid var(--divider); border-radius: var(--radius); }
.meteogram { border-collapse: separate; border-spacing: 0; font-size: 13px; font-variant-numeric: tabular-nums; }
.meteogram th, .meteogram td { text-align: center; padding: 0; height: 34px; min-width: 40px; border-bottom: 1px solid #f0f0f0; }
.meteogram th.row-label {
  position: sticky; left: 0; z-index: 2; min-width: 156px; padding: 0 12px; text-align: left;
  background: var(--card); color: var(--text-2); font-weight: 600; font-size: 13px; border-right: 1px solid var(--divider);
  white-space: nowrap;
}
.meteogram th.row-label small { color: var(--text-3); font-weight: 400; }
.meteogram thead th { background: var(--brand-50); color: var(--text-2); font-weight: 600; }
.meteogram thead tr.day-row th { height: 30px; background: var(--brand); color: #fff; font-size: 12px; letter-spacing: 0.04em; text-transform: uppercase; border-left: 2px solid #fff; }
.meteogram thead tr.day-row th.row-label { background: var(--brand); color: #fff; border-left: 0; }
.meteogram td.day-start, .meteogram th.day-start { border-left: 2px solid var(--brand-100); }
.meteogram td { cursor: pointer; color: var(--text); }
.meteogram td.cell-color { color: var(--ink, #1a1a1a); background: var(--bg, transparent); font-weight: 600; }
.meteogram td img { display: block; width: 40px; height: 40px; margin: -3px auto; }
.meteogram .is-sel { box-shadow: inset 2px 0 0 var(--brand-light), inset -2px 0 0 var(--brand-light); }
.meteogram thead th.is-sel { background: var(--brand-light); color: #fff; }
.meteogram .mg-arrow { display: inline-block; color: var(--brand); font-size: 12px; }
.meteogram tbody tr:hover th.row-label { color: var(--brand); }

/* Cards */
.cards-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.card { background: var(--card); border: 1px solid var(--divider); border-radius: var(--radius); padding: 18px 20px 12px; min-width: 0; }
.card-full { grid-column: 1 / -1; }
.card-head { margin-bottom: 6px; }
/* What the chart shows for this port, generated from the forecast: above the chart's title. */
.card-reading { margin: 0 0 6px; font-size: 14px; line-height: 1.45; color: var(--text-2); }
.card-reading:empty { display: none; }
.card-title { margin: 0; font-size: 17px; font-weight: 700; color: var(--text); }
.card-title span { color: var(--text-3); font-weight: 400; font-size: 13px; margin-left: 4px; }
.card-note { margin: 3px 0 0; font-size: 13px; color: var(--text-3); line-height: 1.4; }
.chart { width: 100%; height: 220px; cursor: pointer; }
.chart-tall { height: 300px; }

/* "Resumen del resto de la jornada": a headline and its text beside the key figures */
.today-summary {
  position: relative; margin-bottom: 16px; padding: 18px 22px 20px; border-radius: var(--radius);
  background: #fff; border: 1px solid var(--divider); color: var(--on-dark);
}
.ts-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin-bottom: 10px; }
.ts-badge {
  margin: 0; padding: 3px 10px; border-radius: 999px; background: var(--brand-light); color: #fff;
  font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
}
.ts-place { font-size: 13px; color: var(--on-dark-2); white-space: nowrap; }
.ts-body { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 20px 36px; align-items: start; }
/* The headline as in a newspaper, then the report as one paragraph at a reading width. */
.ts-lead { margin: 0 0 12px; font-size: 20px; line-height: 1.25; font-weight: 700; color: var(--on-dark); text-wrap: balance; }
.ts-copy { margin: 0; max-width: 64ch; font-size: 16px; line-height: 1.65; color: var(--text-2); }
.ts-chips { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.ts-chip {
  display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: 12px;
  background: var(--brand-50); border: 1px solid var(--glass-border); border-top: 3px solid var(--c);
}
.ts-chip-label { font-size: 11px; color: var(--on-dark-3); text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600; }
.ts-chip-value { display: flex; align-items: baseline; gap: 5px; font-size: 26px; font-weight: 700; color: var(--on-dark); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ts-chip-value small { font-size: 13px; font-weight: 500; color: var(--on-dark-2); }
.ts-chip-detail { margin-top: 2px; font-size: 12px; color: var(--text-3); font-variant-numeric: tabular-nums; }
.ts-arrow { display: inline-block; font-size: 14px; color: var(--c); align-self: center; }
.ts-to { margin: 0 2px; color: var(--on-dark-3); font-weight: 500; }
/* The six figures in three columns and two rows. */
.ts-chips { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* 10-day strip: large cards at first; once a day is opened they shrink and its hourly table
   unfolds under them. The selected hour's day is highlighted. */
.step-switch { display: flex; padding: 3px; gap: 2px; border-radius: 10px; background: var(--brand-50); border: 1px solid var(--brand-100); }
.step-btn { white-space: nowrap; padding: 6px 14px; border: 0; border-radius: 8px; background: transparent; color: var(--text-2); font: 600 13px var(--font); cursor: pointer; }
.step-btn[aria-pressed="true"] { background: var(--brand); color: #fff; }
.step-btn:focus-visible, .day-card:focus-visible, .day-close:focus-visible { outline: 2px solid var(--brand-light); outline-offset: 2px; }

.days { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(var(--days, 10), minmax(0, 1fr)); gap: 12px; }
.day-card {
  position: relative; width: 100%; height: 100%; display: flex; flex-direction: column; align-items: flex-start; gap: 9px;
  padding: 16px 14px 14px; border-radius: var(--radius); cursor: pointer; text-align: left;
  background: var(--card); border: 1px solid var(--divider); color: var(--text-3); font: 400 13px var(--font);
  transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s, padding 0.25s, gap 0.25s;
}
.day-card:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(2, 74, 142, 0.12); border-color: var(--brand-100); }
.day-card:disabled { cursor: default; opacity: 0.7; transform: none; }
.day-card.is-active { border-color: var(--brand-100); }
.day-card.is-open { border-color: var(--brand-light); box-shadow: 0 0 0 2px var(--brand-light), 0 12px 28px rgba(3, 120, 212, 0.18); }
.day-card.is-long { background: repeating-linear-gradient(135deg, #f4f6f8 0 10px, #eaeef3 10px 20px); }
.dc-head { display: flex; flex-direction: column; gap: 1px; width: 100%; }
.dc-name { font-size: 18px; font-weight: 700; color: var(--text); white-space: nowrap; }
.dc-date { font-size: 13px; color: var(--text-3); font-variant-numeric: tabular-nums; }
.day-card.is-today .dc-name { color: var(--brand); }
.dc-icon { width: 64px; height: 64px; transition: width 0.25s, height 0.25s; }
.dc-cond { min-height: 34px; line-height: 1.3; color: var(--text-2); font-size: 13px; }
/* Max/min on one line, then the day's range as a bar on the 10-day scale (full card width). */
.dc-temps { display: flex; flex-direction: column; gap: 6px; width: 100%; font-variant-numeric: tabular-nums; }
.dc-values { display: flex; align-items: baseline; gap: 8px; }
.dc-max { color: var(--text); font-weight: 700; font-size: 24px; line-height: 1; }
.dc-min { color: var(--text-3); font-weight: 600; font-size: 16px; }
.dc-range { position: relative; height: 8px; border-radius: 999px; background: #e3e9f1; box-shadow: inset 0 1px 2px rgba(2, 74, 142, 0.1); }
.dc-range span { position: absolute; top: 0; bottom: 0; border-radius: 999px; min-width: 10px; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15); }
.dc-wind, .dc-rain { display: flex; align-items: center; gap: 4px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.dc-wind { flex-wrap: wrap; row-gap: 2px; }
.dc-wind b, .dc-rain b { color: var(--text); font-size: 15px; }
.dc-arrow { display: inline-block; color: var(--w); font-size: 12px; filter: saturate(1.3); }
.dc-gust { flex-basis: 100%; color: var(--text-3); font-size: 12px; }
.dc-gust b { font-size: 12px; color: var(--text-2); }
.dc-short { display: none; }
.dc-rain svg { width: 10px; height: 13px; color: #7fb8e8; }
.dc-rain span { color: var(--text-3); margin-left: 2px; }
.dc-tag {
  position: absolute; top: -8px; right: 10px; padding: 1px 7px; border-radius: 999px;
  background: #fff; border: 1px solid var(--divider); color: var(--text-3); font-size: 10px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase;
}

.dc-alert { display: inline-flex; align-items: center; gap: 3px; left: 10px; right: auto; padding: 1px 7px 1px 4px; border-color: var(--alert); color: var(--text); background: color-mix(in srgb, var(--alert) 18%, #fff); }
.dc-alert .alert-icon { width: 13px; height: 13px; }

/* A day is open: compact cards */
#forecast.is-open .days { gap: 8px; }
#forecast.is-open .day-card { gap: 4px; padding: 9px 10px 8px; font-size: 12px; }
#forecast.is-open .dc-head { flex-direction: row; align-items: baseline; justify-content: space-between; gap: 4px; }
#forecast.is-open .dc-name { font-size: 14px; }
#forecast.is-open .dc-date { font-size: 11px; }
#forecast.is-open .dc-icon { width: 40px; height: 40px; margin: -4px; }
#forecast.is-open .dc-cond { display: none; }
#forecast.is-open .dc-temps { gap: 4px; }
#forecast.is-open .dc-min { font-size: 12px; }
#forecast.is-open .dc-max { font-size: 16px; }
#forecast.is-open .dc-range { height: 6px; }
#forecast.is-open .dc-wind b, #forecast.is-open .dc-rain b { font-size: 12px; }
#forecast.is-open .dc-gust, #forecast.is-open .dc-rain span { display: none; }

/* The open day's hourly table */
.day-detail { margin-top: 14px; animation: unfold 0.3s ease-out; }
@keyframes unfold { from { opacity: 0; transform: translateY(-8px); } }
.day-detail-head { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.day-detail-title { margin: 0 auto 0 0; font-size: 20px; font-weight: 700; color: var(--text); }
.day-close {
  display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; cursor: pointer;
  border: 1px solid var(--divider); background: var(--card); color: var(--text-2);
}
.day-close:hover { border-color: var(--brand-light); color: var(--brand); }
.day-close svg { width: 18px; height: 18px; }
.days > li { min-width: 0; } /* lets the open day's table scroll instead of widening the list */
#day-detail-slot { grid-column: 1 / -1; }
#forecast.no-anim .day-card, #forecast.no-anim .dc-icon, #forecast.no-anim .day-detail { transition: none; animation: none; }

/* "Ver los 10 días hora por hora" toggle */
.all-hours {
  display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 10px; cursor: pointer;
  border: 1px solid var(--brand-100); background: var(--card); color: var(--brand); font: 600 14px var(--font);
}
.all-hours svg { width: 18px; height: 18px; }
.all-hours:hover { border-color: var(--brand-light); }
.all-hours[aria-pressed="true"] { background: var(--brand); border-color: var(--brand); color: #fff; }
.all-hours:focus-visible { outline: 2px solid var(--brand-light); outline-offset: 2px; }

/* One-day table: fills the width; hours of the next day are dimmed; last column goes to it. */
.meteogram.is-day { width: 100%; }
.meteogram td.is-next, .meteogram thead th.is-next { opacity: 0.6; }
.meteogram thead tr.day-row th.next-col { background: var(--brand-50); border-left: 1px solid var(--divider); }
.meteogram td.next-col { padding: 0 5px; vertical-align: middle; background: var(--brand-50); border-left: 1px solid var(--divider); cursor: default; }
.next-day {
  display: flex; flex-direction: column; align-items: center; gap: 4px; width: 100%; min-width: 84px; padding: 14px 6px;
  border: 1px solid var(--brand-100); border-radius: 12px; background: var(--card); color: var(--brand); cursor: pointer;
  font: 600 13px var(--font); box-shadow: 0 6px 16px rgba(2, 74, 142, 0.08);
}
.next-day small { font-size: 11px; color: var(--text-3); font-weight: 500; }
.next-day b { font-size: 15px; white-space: nowrap; }
.next-day svg { width: 22px; height: 22px; }
.next-day:hover { border-color: var(--brand-light); background: var(--brand-light); color: #fff; }
.next-day:hover small { color: rgba(255, 255, 255, 0.85); }
.next-day:focus-visible { outline: 2px solid var(--brand-light); outline-offset: 2px; }
/* Laptops: a narrower button (day name over the number) so a full day of 1 h columns fits
   without scrolling sideways. */
@media (max-width: 1440px) {
  .next-day { min-width: 66px; padding: 12px 4px; }
  .next-day b { white-space: normal; font-size: 14px; line-height: 1.15; text-align: center; }
}

/* Rows chosen from the Now panel: a short flash, then a marked row label. */
.meteogram tr.is-focus th.row-label { color: var(--brand); box-shadow: inset 4px 0 0 var(--brand-light); background: var(--brand-50); }
.meteogram tr.is-focus td { animation: row-flash 2.4s ease-out; }
.meteogram tr.is-focus td.is-sel { box-shadow: inset 2px 0 0 var(--brand-light), inset -2px 0 0 var(--brand-light), inset 0 2px 0 var(--brand-light), inset 0 -2px 0 var(--brand-light); }
@keyframes row-flash { 0%, 35% { background-color: rgba(3, 120, 212, 0.18); } }
.day-detail { scroll-margin-top: calc(var(--appbar-h, 82px) + 12px); }
#trends { scroll-margin-top: calc(var(--appbar-h, 82px) + 16px); }

/* Quick navigation: a floating bar at the bottom, always at hand. */
.jump-nav {
  position: fixed; z-index: 1150; left: 50%; bottom: 12px; transform: translateX(-50%);
  display: flex; gap: 2px; padding: 4px; border-radius: 14px;
  background: var(--glass); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--glass-border); box-shadow: var(--panel-shadow);
}
.jump-btn {
  display: flex; align-items: center; gap: 7px; padding: 8px 14px; border: 0; border-radius: 10px;
  background: transparent; color: var(--on-dark-2); font: 600 13px var(--font); white-space: nowrap; cursor: pointer;
}
.jump-btn svg { width: 17px; height: 17px; flex: none; }
.jump-btn:hover { color: var(--brand); background: var(--brand-50); }
.jump-btn[aria-current] { background: var(--brand); color: #fff; }
.jump-btn:focus-visible { outline: 2px solid var(--brand-light); outline-offset: 2px; }
.jump-short { display: none; }
body { padding-bottom: 64px; }

/* Chart click: the chosen hour with a button to see it on the map */
.card { position: relative; }
.chart-pick {
  position: absolute; z-index: 5; transform: translate(-50%, calc(-100% - 8px));
  display: flex; align-items: center; gap: 8px; padding: 5px 5px 5px 12px; border-radius: 12px;
  background: var(--navy-900); color: #fff; font-size: 13px; white-space: nowrap;
  box-shadow: 0 8px 22px rgba(2, 40, 80, 0.3); animation: pick-in 0.15s ease-out;
}
.chart-pick[hidden] { display: none; }
.chart-pick::after {
  content: ""; position: absolute; left: calc(50% + var(--tip, 0px)); bottom: -5px; width: 10px; height: 10px;
  background: var(--navy-900); transform: translateX(-50%) rotate(45deg);
}
@keyframes pick-in { from { opacity: 0; } }
.chart-pick-when { font-weight: 700; font-variant-numeric: tabular-nums; }
.chart-pick-go {
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border: 0; border-radius: 8px; cursor: pointer;
  background: var(--brand-light); color: #fff; font: 600 13px var(--font);
}
.chart-pick-go svg { width: 15px; height: 15px; }
.chart-pick-go:hover { background: var(--brand-glow); }
.chart-pick-close { display: grid; place-items: center; width: 26px; height: 26px; padding: 0; border: 0; border-radius: 8px; cursor: pointer; background: transparent; color: var(--on-dark-2); }
.chart-pick-close:hover { color: #fff; background: rgba(255, 255, 255, 0.1); }
.chart-pick-close svg { width: 14px; height: 14px; }
.chart-pick button:focus-visible { outline: 2px solid var(--brand-glow); outline-offset: 2px; }

/* What the colors mean */
.mg-legend { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 28px; margin-top: 12px; padding: 12px 16px 10px; border: 1px solid var(--divider); border-radius: var(--radius); background: var(--card); }
.mg-scale-title { font-size: 13px; font-weight: 700; color: var(--text); margin-bottom: 6px; }
.mg-scale-title small { color: var(--text-3); font-weight: 400; }
.mg-scale-bar { height: 8px; border-radius: 999px; }
.mg-scale-ticks, .mg-scale-ranges { position: relative; height: 15px; font-size: 11px; color: var(--text-3); font-variant-numeric: tabular-nums; }
.mg-scale-ticks span, .mg-scale-ranges span { position: absolute; top: 2px; transform: translateX(-50%); white-space: nowrap; }
.mg-scale-ticks span:first-child { transform: none; }
.mg-scale-ticks span:last-child { transform: translateX(-100%); }
.mg-scale-ranges span { color: var(--text-2); font-weight: 600; }
.mg-scale-note { margin: 6px 0 0; font-size: 11px; color: var(--text-3); line-height: 1.35; }
.long-range-note[hidden] { display: none; }

/* Long-range columns in the table and the note under it */
.meteogram th.is-long, .meteogram td.is-long:not(.cell-color) { background-image: repeating-linear-gradient(135deg, transparent 0 8px, rgba(2, 90, 166, 0.04) 8px 16px); }
.meteogram thead tr.day-row th.is-long { background: repeating-linear-gradient(135deg, var(--brand) 0 8px, var(--brand-dark) 8px 16px); }
.long-range-note { display: flex; align-items: center; gap: 8px; margin: 10px 0 0; color: var(--text-3); font-size: 13px; }
.long-swatch { width: 22px; height: 12px; border-radius: 3px; border: 1px solid var(--divider); background: repeating-linear-gradient(135deg, #fff 0 4px, #e8eef6 4px 8px); }

/* Footer */
/* Footer: light grey band like dataportuaria.com's, with one column per country and each port's
   position as on a nautical chart. */
.site-footer { margin-top: 24px; background: #f0f0f0; border-top: 1px solid var(--divider); color: var(--text-3); font-size: 13px; }
.footer-inner { max-width: 1440px; margin: 0 auto; padding: 36px 24px 96px; }
.site-footer p { margin: 6px 0; }
.footer-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 28px; }
.footer-logo { height: 22px; width: auto; }
.footer-ports { margin-bottom: 28px; }
.footer-title { margin: 0 0 16px; color: var(--text); font-size: 20px; font-weight: 700; }
/* Eight countries: four columns, or two on narrower screens, so the rows are always full. */
.fc-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; align-items: start; }
@media (max-width: 1200px) {
  .fc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* One white card per country, with its flag; its ports are buttons. */
.footer-country {
  padding: 12px 14px 14px; border: 1px solid var(--divider); border-radius: var(--radius); background: #fff;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.footer-country:hover { box-shadow: 0 8px 24px rgba(2, 90, 166, 0.07); }
.footer-country.is-current { border-color: var(--brand-100); box-shadow: inset 0 3px 0 var(--brand); }
/* The country's row is the summary of a <details>: folding only on phones (see _footer.html). */
.footer-ports .fc-head { display: flex; align-items: center; gap: 10px; margin: 0; list-style: none; cursor: pointer; }
.footer-ports .fc-head::-webkit-details-marker { display: none; }
.footer-country[open] .fc-head { margin-bottom: 10px; }
.fc-chevron {
  display: grid; place-items: center; width: 24px; height: 24px; flex: none; padding: 3px; border-radius: 50%;
  background: var(--brand-50); color: var(--brand); transition: transform 0.2s, background 0.2s, color 0.2s;
}
.footer-country[open] .fc-chevron { transform: rotate(180deg); }
.footer-country:hover { border-color: var(--brand-100); }
.footer-country:hover .fc-chevron { background: var(--brand); color: #fff; }
.fc-head:focus-visible { outline: 2px solid var(--brand-light); outline-offset: 4px; border-radius: 4px; }
.fc-flag { flex: none; width: 28px; height: 21px; border-radius: 4px; object-fit: cover; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08); }
.fc-name { color: var(--text); font-size: 13px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }
.fc-count { margin-left: auto; color: var(--text-3); font-size: 12px; }
/* Ports side by side: small buttons, two or three to a row depending on the names. */
.fc-ports { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.fc-ports a {
  display: inline-flex; align-items: center; padding: 5px 10px;
  border: 1px solid var(--brand-100); border-radius: 999px; background: var(--brand-50);
  color: var(--brand); font-size: 12px; font-weight: 500; line-height: 1.2; text-decoration: none;
  transition: background 0.15s, color 0.15s, border-color 0.15s, transform 0.15s, box-shadow 0.15s;
}
.fc-ports a:hover { background: var(--brand); border-color: var(--brand); color: #fff; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(2, 90, 166, 0.25); }
.fc-ports a[aria-current="page"] { background: var(--brand); border-color: var(--brand); color: #fff; font-weight: 600; }
@media (prefers-reduced-motion: reduce) {
  .fc-ports a { transition: none; }
}
.footer-notes { padding-top: 18px; border-top: 1px solid #dcdcdc; }

/* ---------------------------------------------------------------- responsive */
@media (max-width: 1500px) {
  /* Room for the update time and the language selector next to the controls. */
  .appbar { gap: 12px 16px; }
  .field-country select { width: 128px; }
  .field-port select { width: 200px; }
  .field-coord input { width: 134px; }
}
@media (max-width: 1360px) {
  .appbar { gap: 12px 12px; }
  .field-country select { width: 120px; }
  .field-port select { width: 186px; }
  .field-coord input { width: 126px; padding-left: 38px; }
  .btn-go { padding: 0 12px; }
  /* The update time keeps its room; the development pill gives way first. */
  #run-updated { flex: none; }
  .status .pill-warn { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; padding: 1px 6px; font-size: 11px; }
}
@media (max-width: 1240px) {
  .appbar { flex-wrap: wrap; }
}
/* The development-data pill (synthetic data only, never in production) needs the room of a row. */
@media (max-width: 1500px) {
  .appbar:has(#source-pill:not([hidden])) { flex-wrap: wrap; }
}
/* Ten cards need ~132 px each; below that they go in two rows of five. */
@media (max-width: 1420px) {
  .days { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
@media (max-width: 1100px) {
  .cards-grid { grid-template-columns: minmax(0, 1fr); }
}
/* Phones and small tablets: the bar scrolls away, coordinates fold behind a button, and the
   map is followed by the timeline and the Now panel instead of having them on top. */
@media (max-width: 900px) {
  .appbar { position: relative; flex-wrap: wrap; padding: 10px 12px; gap: 10px; }
  /* In a row of its own: the update time and the language selector fit side by side. */
  .status { margin-left: auto; font-size: 12px; flex-direction: row; align-items: center; gap: 12px; }
  .status .lang-switch { order: 0; padding-left: 12px; border-left: 1px solid var(--divider); }
  /* The update time keeps its room; the development pill gives way first. */
  #run-updated { flex: none; }
  .status .pill-warn { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; padding: 1px 6px; font-size: 11px; }
  .controls { order: 3; width: 100%; flex-wrap: wrap; }
  .field-country { flex: 0 0 34%; }
  .field-country select { width: 100%; height: 40px; }
  .field-port { flex: 1; min-width: 0; }
  .field-port select { width: 100%; height: 40px; }
  .btn-coords { display: grid; }
  .coords { display: none; width: 100%; }
  .appbar.coords-open .coords { display: flex; }
  .coords .field-coord { flex: 1; }
  .field-coord input { width: 100%; height: 40px; }
  .btn-go { height: 40px; }

  .hero { --gap: 10px; display: flex; flex-direction: column; align-items: stretch; }
  .hero-side { padding: var(--gap); }
  .map-area { position: relative; top: auto; height: auto; overflow: visible; display: flex; flex-direction: column; padding-bottom: var(--gap); }
  #map { position: relative; height: 58svh; min-height: 340px; max-height: 560px; }
  .layer-switch { left: var(--gap); justify-content: stretch; }
  .layer-btn { flex: 1; justify-content: center; }
  .legend {
    right: auto; left: var(--gap); width: 250px; bottom: auto;
    top: calc(clamp(340px, 58svh, 560px) - var(--gap)); transform: translateY(-100%); padding: 7px 10px 4px;
  }
  .legend-text { display: none; }
  .legend-title { margin-bottom: 5px; }
  .timeline { order: 2; position: relative; left: auto; right: auto; bottom: auto; height: auto; margin: var(--gap) var(--gap) 0; padding: 8px 12px 6px 8px; }
  .timeline-hint-more { display: none; }
  .timeline-label { min-width: 0; font-size: 14px; }
  .wind-alert { order: -1; position: relative; top: auto; left: auto; right: auto; margin: var(--gap) var(--gap) 0; align-items: stretch; }
  .wa-main { width: 100%; }
  .wa-where { flex-direction: column; align-items: flex-start; }
  .wa-where > span + span::before { content: none; }
  .wa-details { width: 100%; max-height: none; }

  .map-hint { top: max(29svh, 170px); font-size: 15px; }
  .content { padding: 20px 16px 16px; }
  .days, #forecast.is-open .days { grid-template-columns: 1fr; gap: 6px; }
  .today-summary { padding: 16px 16px 16px; }
  .ts-body { grid-template-columns: 1fr; }
  .ts-lead { font-size: 18px; }
  .ts-chips { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #forecast.is-open .day-card { padding: 9px 12px; }
  #forecast.is-open .dc-head { flex-direction: column; align-items: flex-start; gap: 0; }
  #forecast.is-open .dc-icon { width: 42px; height: 42px; margin: -4px; }
  .dc-name, #forecast.is-open .dc-name { font-size: 16px; }
  .dc-max, #forecast.is-open .dc-max { font-size: 18px; }
  .dc-min, #forecast.is-open .dc-min { font-size: 14px; }
  #forecast.is-open .dc-gust { display: inline; }
  #forecast.is-open .dc-rain span { display: block; }
  .day-detail { margin: 2px 0 8px; }
  .mg-legend { grid-template-columns: 1fr; gap: 12px; }
  .days-head { flex-direction: column; align-items: stretch; gap: 10px; }
  .days-head .all-hours { width: 100%; justify-content: center; }
  .next-day { min-width: 76px; padding: 12px 4px; }
  .day-detail-head { gap: 8px; }
  .day-detail-title { font-size: 15px; min-width: 0; }
  .step-btn { padding: 6px 10px; }
  .meteogram th.row-label { min-width: 0; width: 112px; max-width: 112px; padding: 0 8px; font-size: 12px; white-space: normal; line-height: 1.15; }
  .meteogram th.row-label small { display: block; font-size: 10px; }
  .meteogram th, .meteogram td { min-width: 40px; }
  .day-card {
    display: grid; grid-template-columns: 88px 34px minmax(0, 1fr) 64px; grid-template-areas: "head icon temps rain" "head icon wind rain";
    align-items: center; gap: 2px 10px; padding: 9px 12px;
  }
  .day-card:hover { transform: none; }
  .dc-head { grid-area: head; flex-direction: column; align-items: flex-start; gap: 0; }
  .dc-icon { grid-area: icon; width: 42px; height: 42px; margin: -4px; }
  .dc-cond { display: none; }
  .dc-temps { grid-area: temps; }
  .dc-wind { grid-area: wind; font-size: 11px; flex-wrap: nowrap; }
  .dc-gust, #forecast.is-open .dc-gust { flex-basis: auto; margin-left: 4px; font-size: 11px; display: inline; }
  .dc-gust b { font-size: 11px; }
  .dc-long { display: none; }
  .dc-short { display: inline; }
  .dc-rain { grid-area: rain; flex-direction: column; align-items: flex-end; gap: 0; }
  .dc-rain span { margin: 0; font-size: 11px; }
  .dc-tag { top: 50%; right: auto; left: 12px; transform: translateY(14px); display: none; }
  .section-title { font-size: 24px; }
  .footer-inner { padding: 28px 16px 96px; }
  .fc-grid { grid-template-columns: 1fr; gap: 8px; }
  .day-detail, #trends, #forecast { scroll-margin-top: 12px; }
  .jump-nav { left: 8px; right: 8px; bottom: 8px; transform: none; }
  .jump-btn { flex: 1; flex-direction: column; gap: 2px; padding: 6px 2px; font-size: 11px; }
  .jump-btn svg { width: 19px; height: 19px; }
  .jump-long { display: none; }
  .jump-short { display: inline; }

}
@media (max-width: 420px) {
  /* Short title so it does not run into the hour arrows. */
  .timeline-hint-word { display: none; }
  .timeline-hint b::first-letter { text-transform: uppercase; }
  .layer-btn { padding: 7px 6px; gap: 5px; }
  .brand-logo { height: 19px; }
}
@media (prefers-reduced-motion: reduce) {
  .live-dot { animation: none; }
  html { scroll-behavior: auto; }
}

/* ---------------------------------------------------------------- port content and plain pages */
/* Below the charts: links to the nearest ports. */
.port-content { max-width: 860px; }
.port-content .section-title { font-size: 24px; margin: 28px 0 8px; }
/* Nearby ports: one card each, with a compass whose needle points from this port to that one. */
.nearby-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.nearby-card {
  position: relative; display: grid; grid-template-columns: 52px 1fr; grid-template-rows: auto auto 1fr; column-gap: 14px;
  padding: 16px 16px 14px; border: 1px solid var(--divider); border-radius: var(--radius); background: var(--card);
  transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
}
.nearby-card:hover { border-color: var(--brand-100); box-shadow: 0 8px 24px rgba(2, 90, 166, 0.08); transform: translateY(-2px); }
.nb-compass { grid-row: 1 / 4; width: 52px; height: 52px; }
.nb-compass svg { display: block; width: 100%; height: 100%; }
.nb-ring { fill: var(--brand-50); stroke: var(--brand-100); stroke-width: 1.5; }
.nb-ticks { stroke: var(--brand-100); stroke-width: 1.5; stroke-linecap: round; }
.nb-n { fill: var(--text-3); font: 700 6.5px var(--font); text-anchor: middle; }
.nb-needle { transform: rotate(var(--course, 0deg)); transform-origin: 24px 24px; transition: transform 0.6s cubic-bezier(0.3, 1.4, 0.5, 1); }
.nb-head { fill: var(--brand); }
.nb-tail { fill: var(--brand-100); }
.nb-hub { fill: #fff; stroke: var(--brand); stroke-width: 1.2; }
.nearby-card:hover .nb-needle { transform: rotate(calc(var(--course, 0deg) + 8deg)); }
.nearby-route { color: var(--text-3); font-size: 12px; letter-spacing: 0.04em; }
.nearby-route b { color: var(--brand); font-size: 13px; }
.nearby-link { margin: 2px 22px 2px 0; color: var(--text); font-weight: 600; font-size: 15px; line-height: 1.3; text-decoration: none; }
/* The whole card opens the port. */
.nearby-link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.nearby-card:hover .nearby-link { color: var(--brand); }
.nearby-link:focus-visible { outline: none; }
.nearby-card:has(.nearby-link:focus-visible) { outline: 2px solid var(--brand); outline-offset: 2px; }
.nearby-place { color: var(--text-3); font-size: 12px; font-variant-numeric: tabular-nums; }
.nb-coords { white-space: nowrap; }
.nearby-go { position: absolute; top: 16px; right: 14px; width: 18px; height: 18px; color: var(--brand-100); transition: color 0.2s, transform 0.2s; }
.nearby-card:hover .nearby-go { color: var(--brand); transform: translateX(3px); }
@media (max-width: 760px) {
  .nearby-list { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .nearby-card, .nb-needle, .nearby-go { transition: none; }
}

/* The 404 page: a plain page. */
.content.plain { max-width: 960px; }
.page-title { margin: 0; font-size: 34px; line-height: 1.15; color: var(--text); }
.page-lead { margin: 10px 0 24px; font-size: 17px; line-height: 1.55; color: var(--text-2); max-width: 760px; }
@media (max-width: 900px) {
  .page-title { font-size: 28px; }
  .port-content .section-title { font-size: 21px; }
}

/* ---------------------------------------------------------------- headings and figures */
/* Inter Tight, heavy and tight, near-black, like the site's headlines. */
.now-port, .section-title, .card-title, .day-detail-title, .dc-name, .footer-title, .ts-lead,
.page-title, .nearby-link, .now-wind-speed b, .now-temp, .col-value,
.ts-chip-value, .dc-max, .timeline-label {
  font-family: var(--font-head); letter-spacing: -0.018em;
}
.now-port, .section-title, .card-title, .day-detail-title, .ts-lead, .page-title { color: var(--ink); }
.now-port { font-size: 30px; font-weight: 900; line-height: 1.04; }
.now-port-pre { font-family: var(--font); letter-spacing: 0; color: var(--brand); }
.section-title { font-size: 36px; font-weight: 900; line-height: 1.04; }
.ts-lead { font-size: 28px; font-weight: 800; line-height: 1.12; }
.card-title { font-size: 19px; font-weight: 800; }
.dc-name { font-weight: 800; }
.page-title { font-weight: 900; }
@media (max-width: 900px) {
  .section-title { font-size: 28px; }
  .ts-lead { font-size: 22px; }
}

/* ---------------------------------------------------------------- sections */
/* Sections are set apart by a black rule, like the site's blocks: today's summary, the 10 days
   (its label over the rule, with a blue accent), the charts and the port's information. */
/* The port's information keeps a reading width; its rule spans the page like the others. */
.port-content { max-width: none; }
.port-content > * { max-width: 860px; }
.today-summary {
  padding: 18px 0 22px; border: 0; border-radius: 0; background: none;
  border-top: 2px solid var(--ink); border-bottom: 1px solid var(--divider);
}
.ts-badge { padding: 0; background: none; color: var(--brand); font-size: 12px; letter-spacing: 0.08em; border-radius: 0; }
.section-head .eyebrow {
  position: relative; margin: 0 0 16px; padding-bottom: 8px; border-bottom: 2px solid var(--ink);
  font: 900 17px var(--font-head); letter-spacing: 0.04em; color: var(--ink);
}
.section-head .eyebrow::after { content: ""; position: absolute; left: 0; bottom: -2px; width: 64px; height: 4px; background: var(--brand); }
#trends, .port-content { padding-top: 18px; border-top: 2px solid var(--ink); }

/* Today's figures: square tiles in one grid, each topped by its color, with a square marker. */
.ts-chips { gap: 0; border-left: 1px solid var(--divider); }
.ts-chip {
  border-radius: 0; background: #fff; border: 1px solid var(--divider); border-width: 0 1px 1px 0;
  border-top: 3px solid var(--c);
}
.ts-chip-label { display: flex; align-items: center; gap: 7px; color: var(--text-3); font-weight: 800; letter-spacing: 0.08em; }
.ts-chip-label::before { content: ""; width: 8px; height: 8px; flex: none; background: var(--c, var(--brand)); }
.ts-chip-value { color: var(--ink); }

/* Panel blocks (sky, wind, rain/storm/visibility) separated by blue rules. */
.now-wind { border-top: 2px solid rgba(3, 90, 166, 0.5); }
.now-cols { border-top: 2px solid rgba(3, 90, 166, 0.5); }
.now-col { border-left: 2px solid rgba(3, 90, 166, 0.45); }
.now-col:first-child { border-left: 0; }
.now-sky-text { border-left: 2px solid rgba(3, 90, 166, 0.45); }

/* A soft blue-grey shadow traces the sky icon, so light clouds stand out from the white panel. */
.now-icon { filter: drop-shadow(0 1px 1.5px rgba(2, 48, 92, 0.35)) drop-shadow(0 0 4px rgba(3, 90, 166, 0.18)); }

/* The floating bar on a light grey, so it stands apart from the white page. */
.jump-nav { background: rgba(225, 230, 236, 0.96); border-color: rgba(2, 48, 92, 0.2); }
.jump-btn:not([aria-current]):hover { background: #fff; }

/* Today's figures on a light grey, so the tiles stand apart from the page. */
.ts-chip { background: #f4f6f8; }

/* Day cards on a light grey, so they stand apart from the white page and white clouds show. */
.day-card { background: #f4f6f8; }
.day-card:hover { background: #eef2f6; }
/* The columns' blue dividers run straight: no rounded corners on their hover tint. */
.now-cols .now-col[data-table-rows], .now-cols .now-col[data-table-rows]:hover { border-radius: 0; }