/* Weather UK Live (tools/weather-uk-live). Theme-aware via the site tokens. */
.ukw-strip { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; margin-top: 8px; }
.ukw-sx { display: flex; flex-direction: column; gap: 2px; padding: 11px 13px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface); min-width: 0; }
.ukw-sx-l { font-size: .78rem; color: var(--muted); }
.ukw-sx-v { font-size: 1.45rem; font-weight: 800; line-height: 1.2; font-variant-numeric: tabular-nums; }
.ukw-sx-p { font-size: .82rem; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.ukw-mapgrid { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 12px; margin-top: 14px; align-items: start; }
@media (max-width: 1020px) { .ukw-mapgrid { grid-template-columns: 1fr; } }
.ukw-bar { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.ukw-layers { display: flex; flex-wrap: wrap; gap: 6px; }
.ukw-chip { padding: 5px 11px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); color: var(--muted); font-size: .84rem; cursor: pointer; }
.ukw-chip[aria-pressed="true"] { background: var(--link); border-color: var(--link); color: #fff; }
.ukw-mapwrap { position: relative; border-radius: 14px; overflow: hidden; border: 1px solid var(--border); background: #0f172a; }
.ukw-map { height: 74vh; min-height: 460px; }
.ukw-mapwrap.ukw-full { position: fixed; inset: 0; z-index: 1000; border-radius: 0; }
.ukw-mapwrap.ukw-full .ukw-map { height: 100dvh; }
.ukw-mapbtns { position: absolute; top: 10px; right: 10px; display: flex; gap: 6px; z-index: 5; }
.ukw-mb { padding: 6px 10px; border-radius: 8px; border: 1px solid rgba(255, 255, 255, .25); background: rgba(15, 23, 42, .82); color: #f8fafc; font-size: .85rem; cursor: pointer; }
.ukw-when { position: absolute; top: 10px; left: 50%; transform: translateX(-50%); z-index: 5; padding: 5px 12px; border-radius: 999px; background: rgba(15, 23, 42, .85); color: #f8fafc; font: 600 .86rem/1.3 system-ui, sans-serif; pointer-events: none; white-space: nowrap; }
.ukw-time { display: flex; align-items: center; gap: 10px; margin-top: 8px; padding: 8px 12px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); flex-wrap: wrap; }
.ukw-time input[type=range] { flex: 1 1 200px; accent-color: var(--link); }
.ukw-time-l { min-width: 92px; color: var(--muted); }
.ukw-play { padding: 6px 12px; border-radius: 9px; border: 1px solid var(--border); background: var(--bg-2); color: var(--text); cursor: pointer; font-size: .9rem; }
.ukw-play.on { background: var(--link); color: #fff; border-color: var(--link); }

/* place badges on the map */
.ukw-pl-bg { fill: rgba(10, 18, 34, .84); stroke: rgba(255, 255, 255, .22); stroke-width: 1; }
.ukw-pl-sel .ukw-pl-bg { stroke: #fff; stroke-width: 2; }
.ukw-pl-i { font: 15px/1 "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", system-ui, sans-serif; }
.ukw-pl-t { font: 800 14px/1 system-ui, sans-serif; }
.ukw-pl-s { fill: #cbd5e1; font: 600 10px/1 system-ui, sans-serif; }
.ukw-pl-n { fill: #fff; font: 600 10px/1 system-ui, sans-serif; paint-order: stroke; stroke: rgba(10, 18, 34, .9); stroke-width: 3px; stroke-linejoin: round; }
.ukw-pl-ar { fill: #93c5fd; }
.ukw-dot { fill: #fff; stroke: #2563eb; stroke-width: 3; }
.ukw-tm-bg { fill: rgba(8, 47, 73, .88); stroke: #38bdf8; stroke-width: 1.5; }
.ukw-tm-i { fill: #7dd3fc; font: 700 10px/1 system-ui, sans-serif; }
.ukw-tm-l { fill: #e0f2fe; font: 600 10px/1 system-ui, sans-serif; paint-order: stroke; stroke: rgba(8, 47, 73, .95); stroke-width: 3px; }

/* side card */
.ukw-side { display: flex; flex-direction: column; gap: 10px; }
.ukw-search { display: flex; gap: 6px; }
.ukw-search input { flex: 1; min-width: 0; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--border); background: var(--surface); color: var(--text); font-size: 1rem; }
.ukw-card { padding: 14px 16px; border-radius: 14px; border: 1px solid var(--border); background: var(--surface); min-height: 120px; }
.ukw-c-h { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.ukw-c-h h3 { margin: 0; font-size: 1.2rem; }
.ukw-c-now { display: flex; align-items: center; gap: 12px; margin: 10px 0; }
.ukw-c-i { font-size: 2.4rem; line-height: 1; }
.ukw-c-t { font-size: 2.1rem; font-weight: 800; }
.ukw-c-d { display: flex; flex-direction: column; gap: 2px; }
.ukw-c-chart { margin: 6px 0; }
.ukw-svg { display: block; width: 100%; height: auto; }
.ukw-temp { fill: none; stroke: #f97316; stroke-width: 2.2; }
.ukw-gust { fill: none; stroke: #64748b; stroke-width: 1.4; stroke-dasharray: 4 3; }
.ukw-rain { fill: #38bdf8; fill-opacity: .7; }
.ukw-mid { stroke: var(--border); stroke-dasharray: 2 3; }
.ukw-ax { fill: var(--muted); font: 10px/1 system-ui, sans-serif; }
.ukw-ax-g { fill: #64748b; }
.ukw-cross { stroke: var(--text); stroke-opacity: .45; }
.ukw-tip { color: var(--muted); min-height: 1.3em; }
.ukw-c-sun { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 10px 0 6px; font-size: .9rem; }
.ukw-c-tide { margin-top: 6px; font-size: .9rem; cursor: pointer; }
.ukw-c-warn { margin-top: 8px; padding: 7px 10px; border-radius: 8px; font-size: .88rem; border-left: 5px solid var(--wc, #facc15); background: var(--bg-2); }

/* tables */
.ukw-table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.ukw-table th, .ukw-table td { padding: 6px 8px; border-bottom: 1px solid var(--border); text-align: left; }
.ukw-table th { color: var(--muted); font-size: .8rem; font-weight: 600; }
.ukw-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.ukw-5d td:nth-child(2) { font-size: 1.1rem; }
.ukw-tablewrap { overflow: auto; max-height: 70vh; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); }
.ukw-all th { position: sticky; top: 0; background: var(--bg-2); cursor: pointer; white-space: nowrap; }
.ukw-all th[aria-sort="ascending"]::after { content: ' ▲'; } .ukw-all th[aria-sort="descending"]::after { content: ' ▼'; }

.ukw-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 14px; margin: 28px 0 10px; }
.ukw-head h2 { margin: 0; font-size: 1.2rem; }
.ukw-head select { padding: 5px 8px; border-radius: 8px; border: 1px solid var(--border); background: var(--surface); color: var(--text); }
.ukw-tide { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 12px; }
@media (max-width: 860px) { .ukw-tide { grid-template-columns: 1fr; } }
.ukw-tide-chart, .ukw-tide-list { padding: 12px 14px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); }
.ukw-tide-list h3 { margin: 0 0 6px; font-size: 1.05rem; }
.ukw-sea { fill: #0ea5e9; fill-opacity: .14; }
.ukw-tline { fill: none; stroke: #0284c7; stroke-width: 2.2; }
.ukw-hw { fill: #0284c7; } .ukw-lw { fill: #94a3b8; }
.ukw-tl { font-weight: 700; }
.ukw-now { stroke: #ef4444; stroke-width: 1.5; }
.ukw-grid { stroke: var(--border); }
.ukw-ports { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; margin-top: 10px; }
.ukw-port { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--border); background: var(--surface); color: var(--text); text-align: left; cursor: pointer; }
.ukw-port.on { border-color: #0284c7; box-shadow: inset 4px 0 0 #0284c7; }
.ukw-port span { color: var(--muted); white-space: pre; }

.ukw-warns { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 8px; }
.ukw-warn { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--border); border-left: 6px solid var(--wc, #facc15); background: var(--surface); }
.ukw-warn-yellow { --wc: #facc15; } .ukw-warn-amber { --wc: #f59e0b; } .ukw-warn-red { --wc: #dc2626; }
.ukw-snowbar { fill: #e0f2fe; stroke: #7dd3fc; stroke-width: .6; }
.ukw-c-wh { margin-top: 6px; font-size: .88rem; }
.ukw-two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
@media (max-width: 860px) { .ukw-two { grid-template-columns: 1fr; } }
.ukw-box { padding: 12px 16px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); overflow-x: auto; }
.ukw-box h3 { margin: 0 0 6px; font-size: 1.02rem; }
.ukw-box ul { margin: 0; padding-left: 18px; }
.ukw-enso-s { font-size: 1.1rem; margin: 0 0 6px; }
/* jet stream + long range */
.ukw-jetgrid { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 12px; }
@media (max-width: 1020px) { .ukw-jetgrid { grid-template-columns: 1fr; } }
.ukw-jetmap { height: 420px; }
.ukw-jetcore { stroke: #dc2626; stroke-opacity: .28; stroke-linecap: round; }
.ukw-jet-now { font-size: 1.02rem; margin: 0 0 8px; }
.ukw-lrf-h { margin: 10px 0 2px; }
.ukw-lr-top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.ukw-lr-tablewrap { overflow-x: auto; max-height: 420px; margin-top: 6px; }
.ukw-lr td, .ukw-lr th { white-space: nowrap; }
.ukw-lrline { fill: none; stroke-width: 2; }
.ukw-lr-lg { display: flex; flex-wrap: wrap; gap: 4px 12px; color: var(--muted); }
.ukw-lr-lg i { display: inline-block; width: 12px; height: 4px; border-radius: 2px; margin-right: 5px; vertical-align: 2px; }
.ukw-lr-lg i.ukw-lr-rain { height: 10px; width: 8px; background: #38bdf8; opacity: .7; vertical-align: -1px; }
.ukw-c-high { color: #15803d; font-weight: 600; } .ukw-c-med { color: #b45309; } .ukw-c-low { color: var(--muted); }
[data-theme="dark"] .ukw-c-high { color: #4ade80; } [data-theme="dark"] .ukw-c-med { color: #fbbf24; }