/* Trip Planner. Layout mirrors the STI Hunt Planner (header + sources box, 7-day outlook,
   verdict banner, stat grid, tide curve + table, field briefing), in Masonboro colors. */

/* ── Header ── */
.plan-head { padding: 2.5rem 0 1.5rem; }
.plan-head .label { color: var(--marsh-500); }
.plan-head h1 { margin: .4rem 0 1rem; font-size: clamp(3rem, 13vw, 5.5rem); font-weight: 800; letter-spacing: -0.04em; line-height: .95; color: var(--marsh-950); }
.plan-head h1 em { font-weight: 300; color: var(--marsh-500); }
.plan-lede { max-width: 40rem; font-size: 1.1875rem; color: var(--ink-mid); margin: 0 0 1.5rem; }
.sources { background: var(--sand-50); border-left: 3px solid var(--marsh-700); padding: 1rem 1.25rem; max-width: 30rem; border-radius: 0 var(--radius) var(--radius) 0; }
.sources .label { font-size: .75rem; color: var(--ink-soft); }
.sources p { margin: .5rem 0 0; font-size: .9375rem; color: var(--ink-mid); line-height: 1.45; }
.sources strong { color: var(--ink); }
@media (min-width: 900px) {
  .plan-head .wrap { display: grid; grid-template-columns: 1fr 22rem; gap: 2rem 3rem; align-items: end; }
  .plan-head .wrap > .label, .plan-head h1, .plan-lede { grid-column: 1; }
  .sources { grid-column: 2; grid-row: 1 / span 3; align-self: end; }
}

/* ── Panels ── */
.panel { background: #fff; border: 1px solid var(--rule); border-radius: var(--radius); padding: 1.25rem; margin-bottom: 1.25rem; }
.panel-title { margin: 0 0 1rem; font-size: 1.25rem; font-weight: 800; color: var(--marsh-950); display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.panel-sub { font-family: var(--font-label); font-size: .75rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); margin-left: auto; }
@media (min-width: 768px) { .panel { padding: 1.75rem; } }

/* ── Setup ── */
.plan-setup { padding-bottom: 1rem; }
.field { border: 0; padding: 0; margin: 0 0 1.25rem; min-width: 0; }
.field legend, .field > .label { display: block; color: var(--ink-soft); font-size: .75rem; margin-bottom: .6rem; padding: 0; }
.field-note { display: block; margin: .5rem 0 0; font-size: .9375rem; color: var(--warn); min-height: 0; }
.field-row { display: grid; gap: 0 2rem; }
@media (min-width: 768px) { .field-row { grid-template-columns: 1.4fr 1fr; } }

.launches { display: grid; gap: .6rem; grid-template-columns: 1fr; }
@media (min-width: 640px) { .launches { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { .launches { grid-template-columns: repeat(4, 1fr); } }
.launch {
  text-align: left; font: inherit; color: inherit; cursor: pointer;
  background: var(--sand-50); border: 2px solid var(--rule); border-radius: var(--radius);
  padding: .8rem .9rem; display: flex; flex-direction: column; gap: .3rem;
}
.launch:hover { border-color: var(--marsh-500); }
.launch[aria-pressed="true"] { border-color: var(--marsh-900); background: var(--marsh-100); }
.launch-top { display: flex; align-items: center; gap: .5rem; }
.launch-top .material-symbols-outlined { color: var(--marsh-500); }
.launch-name { font-weight: 800; font-size: 1.0625rem; }
.launch-dist { margin-left: auto; font-family: var(--font-label); font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); white-space: nowrap; }
.launch-blurb { font-size: .9375rem; color: var(--ink-mid); line-height: 1.4; }

.seg { display: flex; flex-wrap: wrap; border: 2px solid var(--marsh-900); border-radius: var(--radius); overflow: hidden; width: fit-content; max-width: 100%; }
.seg button {
  font: inherit; font-weight: 700; font-size: 1rem; padding: .65rem 1rem; border: 0; cursor: pointer;
  background: #fff; color: var(--marsh-900); border-right: 1px solid var(--rule);
}
.seg button:last-child { border-right: 0; }
.seg button[aria-pressed="true"] { background: var(--marsh-900); color: var(--sand-50); }
.seg button:disabled { color: #a3a89f; cursor: not-allowed; background: var(--sand-100); }

/* ── Outlook ── */
.plan-outlook { padding: 1.5rem 0 1rem; }
.plan-outlook > .wrap > .label { color: var(--marsh-500); }
.plan-outlook h2 { margin: .3rem 0 1rem; font-size: 1.75rem; font-weight: 800; letter-spacing: -0.02em; color: var(--marsh-950); }
.outlook { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: .4rem; }
.outlook .loading { grid-column: 1 / -1; color: var(--ink-mid); margin: 0; }
.day {
  font: inherit; color: var(--ink); cursor: pointer; text-align: center;
  border: 2px solid transparent; border-radius: var(--radius); padding: .55rem .15rem .6rem;
  display: flex; flex-direction: column; align-items: center; gap: .1rem; min-width: 0;
}
.day-wd { font-family: var(--font-label); font-size: .75rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.day-num { font-size: 1.5rem; font-weight: 800; line-height: 1.1; }
.day-call { font-family: var(--font-label); font-size: .6875rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.day-wind { font-size: .75rem; color: var(--ink-mid); white-space: nowrap; }
.day-good { background: var(--call-go-bg); }
.day-warn { background: var(--call-caution-bg); }
.day-bad  { background: var(--call-nogo-bg); }
.day-king { display: inline-flex; align-items: center; gap: .15rem; font-family: var(--font-label); font-size: .625rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; background: var(--king); color: #fff; border-radius: 3px; padding: .05rem .3rem; margin-top: .15rem; white-space: nowrap; }
.day-king .material-symbols-outlined { font-size: .8rem; vertical-align: 0; }
.day-nws { font-family: var(--font-label); font-size: .625rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; background: var(--ink); color: #fff; border-radius: 3px; padding: 0 .3rem; margin-top: .15rem; white-space: nowrap; }
.day-off  { background: var(--sand-200); color: var(--ink-soft); cursor: default; }
.day[aria-pressed="true"] { border-color: var(--marsh-950); box-shadow: 0 4px 12px rgba(20,34,25,.18); }
/* Phones: seven tiles don't fit legibly, so the strip scrolls sideways instead of shrinking the text */
@media (max-width: 559px) {
  .outlook { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 4.25rem; overflow-x: auto; padding-bottom: .4rem; scroll-snap-type: x mandatory; }
  .day { scroll-snap-align: start; }
}

.pick-date { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; margin: 1.25rem 0; }
.pick-date .label { color: var(--ink-soft); font-size: .75rem; width: 100%; }
.pick-date input { font: inherit; font-size: 1.0625rem; padding: .6rem .8rem; border: 2px solid var(--rule); border-radius: var(--radius); background: #fff; color: var(--ink); }
.pick-date input:focus { outline: none; border-color: var(--accent); }
.pick-date .field-note { margin: 0; color: var(--ink-soft); }
.before { background: var(--sand-50); border-left: 3px solid var(--accent); padding: .9rem 1.1rem; font-size: 1rem; color: var(--ink-mid); border-radius: 0 var(--radius) var(--radius) 0; }
.before strong { color: var(--ink); }

/* ── Briefing ── */
.plan-briefing { padding: 1.5rem 0 3.5rem; scroll-margin-top: 4rem; }
.verdict { border-radius: var(--radius); padding: 1.25rem 1.25rem 1.4rem; margin-bottom: 1.25rem; border-left: 6px solid; }
.verdict-good { background: var(--call-go-bg); border-color: var(--call-go); }
.verdict-warn { background: var(--call-caution-bg); border-color: var(--call-caution); }
.verdict-bad  { background: var(--call-nogo-bg); border-color: var(--call-nogo); }
.verdict-badge {
  display: inline-flex; align-items: center; gap: .35rem; color: #fff; border-radius: 999px; padding: .3rem .85rem;
  font-family: var(--font-label); font-weight: 700; font-size: .9375rem; letter-spacing: .1em; text-transform: uppercase;
}
.verdict-good .verdict-badge { background: var(--call-go); }
.verdict-warn .verdict-badge { background: var(--call-caution); color: var(--ink); }   /* dark text: white on yellow fails contrast */
.verdict-bad  .verdict-badge { background: var(--call-nogo); }
.verdict-when { margin: .75rem 0 .2rem; font-weight: 600; color: var(--ink-mid); }
.verdict-headline { margin: 0 0 .75rem; font-size: clamp(1.75rem, 6vw, 2.5rem); font-weight: 800; letter-spacing: -0.025em; line-height: 1.1; color: var(--marsh-950); }
.verdict-why { color: var(--ink); font-size: 1.0625rem; }
.verdict-why p { margin: 0; }
.verdict-captain { display: flex; gap: .5rem; align-items: flex-start; margin: 1rem 0 0; padding-top: .75rem; border-top: 1px solid var(--rule); font-size: .9375rem; color: var(--ink-mid); }
.verdict-captain .material-symbols-outlined { font-size: 1.15rem; margin-top: .1rem; flex-shrink: 0; }
.verdict-how { display: inline-block; margin-top: .75rem; font-family: var(--font-label); font-weight: 700; font-size: .8125rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-mid); }

/* Green → yellow → red bar. Each call owns a third; the marker shows where the day sits inside it. */
.scale { margin: 0 0 1rem; max-width: 34rem; }
.scale-bar {
  position: relative; height: 12px; border-radius: 999px;
  background: linear-gradient(90deg, var(--call-go) 0%, #7fb04a 22%, var(--call-caution) 40%, var(--call-caution) 60%, #e07b2c 78%, var(--call-nogo) 100%);
}
.scale-bar::before, .scale-bar::after { content: ""; position: absolute; top: -3px; bottom: -3px; width: 2px; background: rgba(255,255,255,.85); }
.scale-bar::before { left: 33.33%; }
.scale-bar::after { left: 66.66%; }
.scale-marker {
  position: absolute; top: 50%; width: 22px; height: 22px; margin: -11px 0 0 -11px; border-radius: 50%;
  background: #fff; border: 4px solid var(--ink); box-shadow: 0 1px 4px rgba(0,0,0,.3); transition: left .3s ease;
}
.scale-labels { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: .4rem; font-family: var(--font-label); font-size: .75rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-mid); }
.scale-labels span:nth-child(2) { text-align: center; }
.scale-labels span:nth-child(3) { text-align: right; }

.reasons { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; }
.reason { display: flex; align-items: baseline; gap: .5rem; line-height: 1.4; }
.reason::before { content: ""; flex-shrink: 0; width: .6rem; height: .6rem; border-radius: 50%; transform: translateY(-.05rem); }
.reason-nogo::before { background: var(--call-nogo); }
.reason-caution::before { background: var(--call-caution); }
.reason-note::before { background: var(--call-go); }
.reason-king::before { background: var(--king); }
.reason-king { color: var(--king); font-weight: 600; }

/* King tide accents (badge in the table, text in stats, band on the chart) */
.tag-king { display: inline-block; font-family: var(--font-label); font-size: .6875rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; background: var(--king); color: #fff; border-radius: 3px; padding: .05rem .4rem; margin-right: .25rem; }
.row-king td { background: var(--king-bg); }
.king-text, .king-text strong { color: var(--king); }
.tide-plot .area-king { fill: var(--king); fill-opacity: .45; }
.tide-plot .king-line { stroke: var(--king); stroke-width: 1.5; stroke-dasharray: 5 4; }
.tide-plot .dot-king { fill: var(--king); }
.bl-king .material-symbols-outlined { color: var(--king); }

/* Source tags: who's making this call */
.src { display: inline-block; flex-shrink: 0; font-family: var(--font-label); font-size: .6875rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; border-radius: 3px; padding: .05rem .4rem; vertical-align: .1em; white-space: nowrap; }
.src-nws { background: #1d3f73; color: #fff; }
.src-ours { background: var(--sand-200); color: var(--ink-mid); border: 1px solid var(--rule); }

/* How we make the call */
.method p { margin: 0 0 1rem; color: var(--ink-mid); }
.tiers { display: grid; gap: .75rem; margin-bottom: 1.25rem; }
@media (min-width: 900px) { .tiers { grid-template-columns: 1.2fr 1.1fr .8fr; } }
.tier { border-radius: var(--radius); padding: 1rem; border-top: 5px solid; }
.tier-bad  { background: var(--call-nogo-bg); border-color: var(--call-nogo); }
.tier-warn { background: var(--call-caution-bg); border-color: var(--call-caution); }
.tier-good { background: var(--call-go-bg); border-color: var(--call-go); }
.tier-king { background: var(--king-bg); border-color: var(--king); margin-bottom: 1.25rem; }
.tier-king .tier-name { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.tier-king p { margin: 0; color: var(--ink); font-size: .9375rem; }
.tier-name { display: block; font-weight: 800; font-size: 1.125rem; margin-bottom: .5rem; }
.tier ul { margin: 0; padding: 0; list-style: none; display: grid; gap: .55rem; }
.tier li { font-size: .9375rem; line-height: 1.45; }
.method-why strong { color: var(--ink); }
.method-links { font-size: .9375rem; margin-bottom: 0 !important; }

.stats { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--rule); border: 1px solid var(--rule); border-radius: var(--radius); overflow: hidden; margin-bottom: 1.25rem; }
@media (min-width: 900px) { .stats { grid-template-columns: repeat(3, 1fr); } }
.stat { background: #fff; padding: 1rem; }
.stat .label { color: var(--ink-soft); font-size: .6875rem; }
.stat-big { margin: .35rem 0 .15rem; font-size: 1.375rem; font-weight: 800; line-height: 1.15; color: var(--marsh-950); }
.stat-sub { margin: 0; font-size: .9375rem; color: var(--ink-mid); line-height: 1.4; }

.tide-plot { display: block; width: 100%; height: auto; }
.tide-plot .daylight { fill: #f5efe2; }
.tide-plot .window { fill: #a7b98c; fill-opacity: .38; }
.tide-plot .grid { stroke: var(--rule); stroke-width: 1; }
.tide-plot .axis { font: 600 11px var(--font-label); fill: var(--ink-soft); }
.tide-plot .area { fill: var(--marsh-500); fill-opacity: .14; }
.tide-plot .curve { fill: none; stroke: var(--marsh-700); stroke-width: 2.5; }
.tide-plot .dot { fill: var(--marsh-900); stroke: #fff; stroke-width: 2; }
.tide-plot .dot-label { font: 700 12px var(--font-body); fill: var(--marsh-950); }
.tide-plot .now { stroke: var(--accent); stroke-width: 2; stroke-dasharray: 4 3; }
.tide-plot .now-label { fill: var(--accent); }
.chart-key { display: flex; align-items: center; gap: .4rem 1rem; flex-wrap: wrap; margin: .5rem 0 1rem; font-size: .9375rem; color: var(--ink-mid); }
.key-item { display: inline-flex; align-items: center; gap: .4rem; white-space: nowrap; }
.key-item[hidden] { display: none; }
.key { display: inline-block; width: 14px; height: 14px; border-radius: 3px; border: 1px solid var(--rule); flex-shrink: 0; }
.key-day { background: #f5efe2; }
.key-win { background: rgba(167,185,140,.6); }
.key-king { background: var(--king); opacity: .6; }
.chart-note { margin: 1rem 0 0; font-size: .9375rem; color: var(--ink-mid); }

.table-wrap { overflow-x: auto; }
.tide-table { width: 100%; border-collapse: collapse; font-size: 1rem; }
.tide-table th { text-align: left; font-family: var(--font-label); font-size: .75rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); padding: .5rem .5rem .5rem 0; border-bottom: 2px solid var(--rule); }
.tide-table td { padding: .6rem .5rem .6rem 0; border-bottom: 1px solid var(--rule); white-space: nowrap; }
.tide-table td:first-child { font-weight: 700; }
.tide-table td:last-child { white-space: normal; }

.briefing-list { list-style: none; margin: 0; padding: 0; }
.bl { display: flex; gap: .75rem; padding: .85rem 0; border-bottom: 1px solid var(--rule); line-height: 1.5; }
.bl:last-child { border-bottom: 0; padding-bottom: 0; }
.bl:first-child { padding-top: 0; }
.bl .material-symbols-outlined { color: var(--marsh-500); flex-shrink: 0; margin-top: .1rem; }
.bl-bad .material-symbols-outlined { color: var(--call-nogo); }
.bl-warn .material-symbols-outlined { color: #9a7400; }
.bl-good .material-symbols-outlined { color: var(--call-go); }
.bl .src { margin-right: .15rem; }

.checklist { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
@media (min-width: 900px) { .checklist { grid-template-columns: 1fr 1fr; gap: .55rem 2rem; } }
.checklist li { position: relative; padding-left: 1.85rem; line-height: 1.45; }
.checklist li::before {
  content: ""; position: absolute; left: 0; top: .15rem; width: 1.1rem; height: 1.1rem;
  border: 2px solid var(--marsh-500); border-radius: 3px;
}
.checklist li.critical { font-weight: 700; }
.checklist li.critical::before { border-color: var(--accent); }

.panel-night { background: var(--marsh-950); border-color: var(--marsh-950); color: var(--sand-50); }
.panel-night .panel-title { color: #fff; }
.panel-night .label { color: var(--marsh-300); font-size: .75rem; }
.panel-night .stat-big { color: #fff; }
.panel-night .stat-sub { color: #dbe2d4; margin-top: .4rem; }
.panel-night a { color: #eef2e8; }
.night-grid { display: grid; gap: 1rem; margin-bottom: 1rem; }
@media (min-width: 768px) { .night-grid { grid-template-columns: 1fr 1fr; } }

.share-row { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1rem; margin: 1.5rem 0; }
.share-row .field-note { margin: 0; color: var(--good); }
.footnotes { font-family: var(--font-label); font-size: .75rem; letter-spacing: .06em; text-transform: uppercase; line-height: 1.7; color: var(--ink-soft); margin: 0; }