/* Tides widget: [canal_tides] and the map's Tide panel */
.cct {
	--navy: #0b2540; --sea: #1c6fa8; --salt: #2f8fc7; --brass: #c8962e; --sand: #f6f1e7;
	--ink: #10263b; --muted: #5b7086; --line: #d6e1eb; --up: #1f7a50; --down: #a3302a;
	color: var(--ink); font-size: 14px; line-height: 1.4;
}
.cct *, .cct *::before, .cct *::after { box-sizing: border-box; }
.cct--card { margin: 24px 0; padding: 18px; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.cct.is-loading { opacity: .6; }
.cct-loading, .cct-error { margin: 0; color: var(--muted); }
.cct-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.cct-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.cct-head h4 { margin: 0; font-size: 18px; color: var(--navy); }
.cct-station { max-width: 100%; height: 32px; margin: 0; padding: 0 8px; border: 1px solid var(--line); border-radius: 7px; background: #fff; color: var(--ink); font: inherit; font-size: 13px; }

.cct-now-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 6px 16px; flex-wrap: wrap; margin-bottom: 6px; }
.cct-big { font-size: 28px; font-weight: 800; color: var(--navy); font-variant-numeric: tabular-nums; line-height: 1.1; display: flex; align-items: baseline; gap: 10px; }
.cct-dir { font-size: 13px; font-weight: 700; }
.cct-dir.up { color: var(--up); }
.cct-dir.down { color: var(--down); }
.cct-next { color: var(--muted); font-size: 13px; }
.cct-next b { color: var(--ink); }

.cct-chart { display: block; width: 100%; height: auto; margin: 4px 0 8px; }
.cct-grid { stroke: #e6edf3; stroke-width: 1; }
.cct-day { stroke: #c9d6e2; stroke-width: 1; stroke-dasharray: 3 4; }
.cct-ylab, .cct-xlab { fill: var(--muted); font-size: 11px; font-variant-numeric: tabular-nums; }
.cct-xlab { font-weight: 700; fill: var(--navy); }
.cct-line { fill: none; stroke: var(--sea); stroke-width: 2.25; }
.cct-mhw { stroke: var(--brass); stroke-width: 1.25; stroke-dasharray: 6 4; }
.cct-mhwlab { fill: #8a6210; font-size: 10.5px; }
.cct-pt { stroke: #fff; stroke-width: 1.5; }
.cct-pt-H { fill: var(--navy); }
.cct-pt-L { fill: var(--salt); }
.cct-ptlab { fill: var(--ink); font-size: 10.5px; font-variant-numeric: tabular-nums; }
.cct-now { stroke: #d2483f; stroke-width: 1.5; }
.cct-pick { fill: var(--brass); stroke: #fff; stroke-width: 2; }
.cct-hit { fill: transparent; cursor: crosshair; }

.cct-calc {
	display: flex; align-items: center; flex-wrap: wrap; gap: 8px 10px;
	padding: 10px 12px; border-radius: 9px; background: var(--sand);
}
.cct-calc label { font-weight: 700; color: var(--navy); font-size: 13px; }
.cct-time { height: 32px; margin: 0; padding: 0 8px; border: 1px solid #e0d4bd; border-radius: 7px; background: #fff; font: inherit; font-size: 13px; color: var(--ink); max-width: 100%; }
.cct-reset { height: 30px; margin: 0; padding: 0 10px; border: 0; border-radius: 7px; background: var(--navy); color: #fff; font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; }
.cct-out { flex: 1 1 100%; font-size: 13.5px; }
.cct-out b { font-size: 16px; color: var(--navy); font-variant-numeric: tabular-nums; }
.cct-mhw-note { display: block; color: var(--muted); font-size: 12.5px; margin-top: 2px; }

.cct-table { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; margin-top: 14px; }
.cct-day-col h5 { margin: 0 0 6px; font-size: 13px; color: var(--navy); text-transform: uppercase; letter-spacing: .05em; }
.cct-day-col ul { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.cct-day-col li { display: grid; grid-template-columns: 48px 1fr auto; align-items: center; gap: 6px; padding: 6px 0; border-bottom: 1px solid var(--line); font-size: 13px; font-variant-numeric: tabular-nums; }
.cct-day-col li.is-past { color: #9aa9b7; }
.cct-tag { justify-self: start; padding: 2px 6px; border-radius: 5px; font-size: 11px; font-weight: 700; }
.cct-tag-H { background: #e3eef8; color: var(--navy); }
.cct-tag-L { background: #eaf5fb; color: var(--sea); }
.cct-foot { margin: 12px 0 0; font-size: 11.5px; color: var(--muted); }
.cct button:focus-visible, .cct select:focus-visible, .cct input:focus-visible { outline: 2px solid var(--brass); outline-offset: 2px; }

/* Compact version inside the map */
.cct--compact { font-size: 13px; }
.cct--compact .cct-head h4 { font-size: 16px; }
.cct--compact .cct-station { font-size: 12px; max-width: 200px; }
.cct--compact .cct-big { font-size: 22px; }
.cct--compact .cct-foot { font-size: 10.5px; margin-top: 8px; }