/* === Consolidated, variable-driven CSS (same visuals) === */
/* === Consolidated, variable-driven CSS (same visuals) === */
:root{
  --ow-green:#007A53;
  --ow-navy:#0f3d3e;
  --ow-sea:#e6f5f0;
  --ow-foam:#f6fffb;
  --ow-red:#D32F2F;
  --radius-card:16px;
  --radius-pill:999px;
  --border:2px;
  --gap:12px;
  --pill-h:30px;
  --pill-pad-x:14px;
}
*,
*::before,
*::after{ box-sizing:border-box; }
html,body{ min-height:100%; margin:0; }
body{ font-family: system-ui,-apple-system,Segoe UI,Arial,sans-serif; color:var(--ow-navy); background:#fff; }

/* Header aligned with content width */
.regatta{ color: var(--ow-green); padding:0; }
.regatta-inner{ position:relative; max-width:1200px; margin:0 auto; padding:16px 20px; border-bottom:3px solid currentColor; overflow:hidden; }
.header-waves{ position:absolute; inset:0; z-index:1; pointer-events:none; overflow:hidden; }
.header-waves .wave{ position:absolute; left:0; top:0; width:200%; height:160%; will-change:transform; -webkit-backface-visibility:hidden; backface-visibility:hidden; }
.header-waves .wave path{ fill:currentColor; opacity:.75; }
.wave-back{ transform:translateY(40%); animation:waveShiftBack 28s linear infinite; }
.wave-front{ transform:translateY(30%); animation:waveShiftFront 16s cubic-bezier(.4,0,.2,1) infinite; }
@keyframes waveShiftBack{ 0%{ transform:translateY(40%) translateX(0) } 100%{ transform:translateY(40%) translateX(-50%) } }
@keyframes waveShiftFront{ 0%{ transform:translateY(30%) translateX(0) } 100%{ transform:translateY(30%) translateX(-50%) } }
.brand{ position:relative; z-index:2; }
.brand h1{ margin:0; font-size:1.6rem; letter-spacing:.6px; text-transform:uppercase; color:var(--ow-navy); }

/* Layout */
.container{ max-width:1200px; margin:12px auto; padding:0 12px; }
.layout-two{ display:grid; grid-template-columns:1fr 1fr; gap:var(--gap); align-items:start; }
@media (max-width: 980px){ .layout-two{ grid-template-columns:1fr; } }
.layout-two .status{ display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: var(--gap); margin-bottom:0; }

/* Cards */
.card{ background:var(--ow-foam); border:var(--border) solid var(--ow-green); border-radius:var(--radius-card); padding:14px; }
.card-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:4px; }
.round-label{
  display:inline-flex; align-items:center; justify-content:center;
  height:var(--pill-h); padding:0 var(--pill-pad-x);
  border:var(--border) solid currentColor; border-radius:var(--radius-pill);
  background:#fff; font-weight:800; letter-spacing:.3px; text-transform:uppercase;
  font-size:clamp(.72rem,1.4vw,.9rem); line-height:1; margin-left:6px; margin-bottom:8px;
}
.card.next .round-label{ color:var(--ow-green); }
.card.done .round-label{ color:var(--ow-red); border-color:var(--ow-red); }
.route{ margin:4px 0 6px; font-size:clamp(1.0rem,1.6vw,1.15rem); }
.meta{ margin:0; color:#2a5b4b; font-size:clamp(.9rem,1.3vw,1rem); }
.card.next{ background:var(--ow-sea); }
.card.next :is(.card-title,.route){ color:var(--ow-green); }
.card.done{ background:var(--ow-sea); border-color:var(--ow-green); }
.card.done :is(.card-title,.route){ color:var(--ow-green); }

/* Panel (map) */
section.panel{ border:var(--border) solid var(--ow-green); border-radius:var(--radius-card); overflow:hidden; background:#fff; }
.panel-head{ display:flex; align-items:center; gap:8px; padding:10px 12px; background:var(--ow-sea); color:var(--ow-navy); border-bottom:var(--border) solid var(--ow-green); }
.panel-head .dot{ width:10px; height:10px; background:#1DB954; border-radius:999px; box-shadow:0 0 0 4px rgba(29,185,84,.15); }
.map-wrap{ position:relative; line-height:0; }
.map-wrap iframe{ width:100%; height:400px; display:block; border:0; }
.embed-fallback{ margin:6px 0 0; font-size:.85rem; color:var(--ow-navy); opacity:.8; }
.embed-fallback a{ color:var(--ow-green); text-underline-offset:2px; }

/* Keep enough height on small screens while staying usable */
@media (max-width: 980px){
  .map-full iframe{ height: 65vh; }
}
@media (max-width: 540px){
  .map-full iframe{ height: 60vh; }
}


/* === Responsive framed map at bottom === */
.map-full{
  margin-top: var(--gap);
  border: var(--border) solid var(--ow-green);
  border-radius: 0;
  overflow: hidden;
  background: #fff;
}
.map-full iframe{
  display: block;
  width: 100%;
  /* Responsive height: at least 360px, scales with viewport, caps at 900px */
  height: clamp(360px, 70vh, 900px);
  border: 0;
}
@media (max-width: 980px){
  .map-full iframe{ height: clamp(320px, 65vh, 800px); }
}
@media (max-width: 540px){
  .map-full iframe{ height: clamp(280px, 60vh, 700px); }
}


/* === Cards container framed like the map for identical total width === */
.cards-full{
  display:block;
  border: var(--border) solid var(--ow-green);
  border-radius: var(--radius-card);
  background: #fff;
  overflow: hidden;
  padding: 12px;
  margin-bottom: var(--gap);
}

/* keep two columns in the status grid */



/* === Remove outer frame for cards container; keep alignment === */
.cards-full{
  display:block;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  padding: 0 !important;
  overflow: visible !important;
  margin-bottom: var(--gap);
}


/* === Compact text in top boxes + stacked meta lines === */
.route{ margin: 2px 0 4px; font-size: clamp(0.92rem, 1.2vw, 1.04rem); line-height: 1.22; }
.meta{ font-size: clamp(0.84rem, 1.05vw, 0.94rem); line-height: 1.25; margin: 0; }
.meta span{ display: block; }


/* === Smart/resilient additions: keep visuals, prevent overlaps === */
/* Ensure grid items can shrink properly and text never overflows their rounded borders */
.layout-two .status .card{ min-width: 0; }
.route, .meta{ overflow-wrap: anywhere; word-break: break-word; }
.round-label{ white-space: nowrap; } /* keep pill on one line */

/* Tiny screens safeguard: keep 2-column layout readable without changing larger viewports */
@media (max-width: 360px){
  .round-label{ font-size: .74rem; padding: 0 10px; }
  .route{ font-size: .92rem; line-height: 1.18; }
  .meta{ font-size: .82rem; line-height: 1.2; }
}


/* === Ensure no extra outer frame above the two boxes (only each card has a frame) === */
.cards-full,
.layout-two { 
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  padding: 0 !important;
}
.status { border: 0 !important; background: transparent !important; }
/* Keep individual card frames intact */


/* === Flex fix: keep title pills inside cards, no overlap === */
.card-head{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:12px;
  flex-wrap: wrap;            /* allow wrapping on small widths */
}
.round-label{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  max-width:100%;             /* never exceed card width */
  box-sizing:border-box;
  height:auto;                /* allow multi-line when needed */
  white-space:normal;         /* may wrap instead of overflowing */
  line-height:1.1;
  padding:.35rem .9rem;
}
/* Slightly reduce pill text on very narrow screens */
@media (max-width: 420px){
  .round-label{ font-size:.86rem; }
}


/* Small hint below the map */
.map-hint{
  margin: 8px 10px 8px 10px;
  font-size: .74rem;
  color: var(--ow-navy);
  opacity: .85;
}
@media (max-width:540px){ .map-hint{ font-size:.72rem; }
}


/* Smaller route and stacked into two lines */
.route{
  font-size: clamp(0.90rem, 1.05vw, 1.02rem);
  line-height: 1.22;
  margin: 2px 0 4px;
}
.route span{ display: block; }

/* Square bottom corners for the map frame */
.map-full{
  
  border-radius: 0;
}


/* === Keep map fully interactive === */
.map-full{ position: relative; isolation: isolate; } /* isolate stacking context to avoid outside overlays */
.map-full iframe{
  pointer-events: auto;       /* ensure clicks/gestures go through */
  touch-action: auto;         /* allow panning/zooming gestures inside the iframe */
  z-index: 0;
}


/* Map hint inherits the same font as the boxes */
.map-hint{ font-family: inherit; }


/* One-line, smaller hint under the map */
.map-hint{
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: .74rem;
  line-height: 1.2;
  margin: 8px 10px 8px 10px;
}
@media (max-width:540px){ .map-hint{ font-size:.72rem; }
}


/* Align top two-box section to the same overall width as the framed map, without adding a frame */
.cards-full{
  display:block;
  /* No border/frame here, just adjust horizontal inset so inner content aligns with map content (inside the map's border) */
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent;
  margin-bottom: var(--gap);
}
/* Keep the two columns inside */



/* Ensure the two-box section matches the map's overall width at all sizes */
.cards-full{
  margin-left: 0;
  margin-right: 0;
}


/* same outer width as map */
.cards-full .layout-two .status{
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap);
  margin: 0;
}
.cards-full .layout-two .status .card{
  flex: 0 1 calc((100% - var(--gap)) / 2); /* two equal columns */
  min-width: 0; /* allow content to shrink without overflow */
}


/* === Smart grid: top cards always two equal columns, aligned to map width === */
.cards-full{
  /* No extra frame here. We inset the content by the same width as the map border,
     so the inner content of cards lines up with the inner content of the framed map. */
  border: 0;
  padding-left: var(--border);
  padding-right: var(--border);
  margin: 0 0 var(--gap) 0;
  box-sizing: border-box;
}
.cards-full .layout-two{ display:block; }
.cards-full .layout-two .status{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--gap);
  row-gap: var(--gap);
  margin: 0;
}
.cards-full .layout-two .status .card{
  min-width: 0;   /* allow content to shrink without overflow */
}

/* Safety on ultra-narrow screens: slight type scaling to avoid overflow while keeping 2 cols */
@media (max-width: 360px){
  .round-label{ font-size: .82rem; padding: .30rem .70rem; }
  .route{ font-size: .90rem; line-height: 1.18; }
  .meta{ font-size: .82rem; line-height: 1.2; }
}