.live-now { margin: 44px 0 10px; padding: 30px; border: 1px solid var(--line); border-radius: 4px; background: linear-gradient(180deg, #eef3f8, var(--white) 220px); scroll-margin-top: 30px; }
.live-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 18px 30px; }
.live-head h2 { margin: 0; font: 500 clamp(28px, 3.2vw, 38px)/1.15 var(--serif); letter-spacing: -.035em; color: var(--ink); }
.live-head .eyebrow { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; }
.live-where { max-width: 640px; margin: 8px 0 0; color: var(--muted); font-size: 14px; line-height: 1.6; }
.live-dot { width: 8px; height: 8px; flex: none; border-radius: 50%; background: #c0392b; box-shadow: 0 0 0 0 #c0392b66; animation: live-pulse 2.4s ease-out infinite; }
@keyframes live-pulse { 0% { box-shadow: 0 0 0 0 #c0392b66; } 70% { box-shadow: 0 0 0 9px #c0392b00; } 100% { box-shadow: 0 0 0 0 #c0392b00; } }
.live-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.live-units { display: inline-flex; overflow: hidden; border: 1px solid var(--line); border-radius: 3px; background: var(--white); }
.live-units button, .live-refresh { border: 0; background: transparent; padding: 7px 11px; color: var(--lake); font: 600 12px var(--sans); cursor: pointer; }
.live-units button + button { border-left: 1px solid var(--line); }
.live-units button[aria-pressed="true"] { background: var(--lake); color: #fff; }
.live-refresh { border: 1px solid var(--line); border-radius: 3px; background: var(--white); }
.live-refresh:hover:not(:disabled) { border-color: var(--lake); }
.live-refresh:disabled { opacity: .55; cursor: progress; }
.live-status { margin: 16px 0 0; color: var(--muted); font-size: 12px; }

.live-alerts { display: grid; gap: 8px; margin-top: 18px; }
.live-alerts-title { margin: 0 0 2px; font: 700 11px var(--sans); letter-spacing: .14em; text-transform: uppercase; color: #8a2d20; }
.live-alert { border: 1px solid; border-left-width: 5px; border-radius: 3px; padding: 0; background: var(--white); }
.live-alert > summary { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; padding: 11px 14px; cursor: pointer; list-style-position: inside; font-size: 14px; }
.live-alert > summary strong { color: var(--ink); }
.live-alert-area { color: #3f4f63; font-size: 13px; }
.live-alert-until { margin-left: auto; color: var(--muted); font-size: 12px; }
.live-alert[open] > summary { margin-bottom: 0; border-bottom: 1px solid var(--line); }
.live-alert > p { margin: 10px 14px; font-size: 13px; line-height: 1.6; }
.live-alert-headline { font-weight: 600; color: var(--ink); }
.live-alert-text { white-space: pre-line; color: #3f4f63; }
.live-alert-instruction { padding-left: 10px; border-left: 2px solid var(--sand); }
.live-alert-extreme, .live-alert-severe { border-color: #b3261e; background: #fdf0ee; }
.live-alert-moderate { border-color: #c06a12; background: #fdf4e8; }
.live-alert-minor { border-color: #b39424; background: #fbf7e6; }
.live-alert-unknown { border-color: #8796a8; }
.live-alert-none { margin: 0; padding: 10px 14px; border-radius: 3px; background: #e9f3ec; color: #2f5e3b; font-size: 13px; }
.live-alert-none::before { content: "\2713"; margin-right: 8px; font-weight: 700; }
.live-alert-none.live-alert-unknown { background: #f2f4f7; color: var(--muted); }
.live-alert-none.live-alert-unknown::before { content: "!"; }

.live-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 18px; }
.live-card { display: flex; flex-direction: column; min-width: 0; padding: 22px; border: 1px solid var(--line); border-radius: 4px; background: var(--white); }
.live-card h3 { margin: 0 0 12px; color: var(--ink); font: 500 22px/1.2 var(--serif); letter-spacing: -.02em; }
.live-card p { margin: 0 0 8px; font-size: 14px; line-height: 1.55; color: #3f4f63; }
.live-wide { grid-column: span 2; }
.live-card-eyebrow, .live-card p.live-card-eyebrow { margin: 0 0 6px; color: #71623e; font: 700 10px/1.5 var(--sans); letter-spacing: .15em; text-transform: uppercase; }
.live-card p.live-card-eyebrow:not(:first-child) { margin-top: 14px; }
.live-small, .live-card p.live-small { display: block; color: var(--muted); font-size: 12px; line-height: 1.5; }
.live-small a, .live-card a { color: var(--lake); text-underline-offset: 3px; }
.live-small-link { margin-top: auto; padding-top: 6px; font-size: 12px; font-weight: 600; }
.live-empty, .live-card p.live-empty { color: var(--muted); font-size: 13px; }
.live-icon { display: inline-grid; place-items: center; width: 1.3em; font-size: 22px; line-height: 1; }

.live-current { display: flex; align-items: center; gap: 16px; margin-bottom: 10px; }
.live-current .live-icon { width: auto; font-size: 50px; }
.live-card p.live-temp { margin: 0; color: var(--ink); font: 500 46px/1 var(--serif); letter-spacing: -.04em; }
.live-card p.live-condition { margin: 4px 0 0; color: var(--ink); font-size: 15px; }
.live-facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 10px 18px; margin: 4px 0 12px; }
.live-facts dt { color: #71623e; font: 700 10px/1.5 var(--sans); letter-spacing: .12em; text-transform: uppercase; }
.live-facts dd { margin: 0; color: var(--ink); font-size: 14px; }
.live-hourly { display: flex; gap: 6px; margin: 4px 0 12px; padding: 0 0 4px; overflow-x: auto; list-style: none; scrollbar-width: thin; }
.live-hourly li { display: grid; flex: 1 0 64px; justify-items: center; gap: 2px; padding: 8px 4px; border-radius: 3px; background: #eef3f8; font-size: 12px; }
.live-hourly .live-icon { font-size: 20px; }
.live-hourly strong { color: var(--ink); font-size: 14px; }
.live-hour-time { color: var(--muted); }
.live-hour-rain { color: var(--lake); font-weight: 600; }
.live-hour-rain::before { content: "\1F4A7"; margin-right: 1px; font-size: 10px; }

.live-spots { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 4px 22px; margin: 0 0 10px; padding: 0; list-style: none; }
.live-spots li { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.live-spot-name { flex: 1; min-width: 0; font-size: 14px; font-weight: 600; }
.live-spot-name a { color: var(--ink); text-decoration: none; }
.live-spot-name a:hover { color: var(--lake); text-decoration: underline; }
.live-spot-temp { color: var(--ink); font: 500 22px var(--serif); }

.live-buoys, .live-ship-list, .live-headlines, .live-events, .live-list { margin: 0; padding: 0; list-style: none; }
.live-buoys li, .live-ship-list li, .live-events li { padding: 9px 0; border-bottom: 1px solid var(--line); }
.live-buoys li:last-child, .live-ship-list li:last-child, .live-events li:last-child { border-bottom: 0; }
.live-buoy-head { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; font-size: 14px; font-weight: 600; }
.live-buoy-head .live-small { flex: none; font-weight: 400; }
.live-buoys p, .live-card .live-buoys p { margin: 2px 0; color: var(--ink); font-size: 13px; }
.live-ship-list strong { display: block; color: var(--ink); font-size: 13px; }
.live-events a { font-size: 14px; font-weight: 600; }
.live-list li { position: relative; padding-left: 16px; margin-bottom: 7px; color: #3f4f63; font-size: 13px; line-height: 1.5; }
.live-list li::before { position: absolute; top: 8px; left: 2px; width: 6px; height: 6px; border-radius: 50%; background: var(--sand); content: ''; }
.live-cautions li::before { border-radius: 0; background: #c06a12; transform: rotate(45deg); }

.live-card p.live-big { margin: 0; color: var(--ink); font: 500 44px/1 var(--serif); }
.live-card p.live-big-line { color: var(--ink); font: 500 20px/1.3 var(--serif); }
.live-card p.live-tagline { color: var(--ink); font: italic 400 17px/1.45 var(--serif); }
.live-badge, .live-card p.live-badge { align-self: flex-start; margin: 0 0 10px; padding: 3px 9px; border-radius: 20px; background: #e8eef5; color: var(--lake); font: 700 11px var(--sans); letter-spacing: .06em; text-transform: uppercase; }
.live-card p.live-badge-good { background: #e3f1e6; color: #2f6b3c; }
.live-aurora-low .live-badge { background: #e6f4ee; color: #1f6b4e; }
.live-aurora-moderate .live-badge, .live-aurora-high .live-badge { background: #1f6b4e; color: #e9fff4; }
.live-aurora-high { border-color: #2c8a63; box-shadow: 0 0 0 3px #2c8a6326; }
.live-moon { display: flex; align-items: center; gap: 12px; margin-top: auto; padding-top: 12px; border-top: 1px solid var(--line); font-size: 14px; }
.live-moon .live-icon { font-size: 30px; }
.live-moon strong { display: block; color: var(--ink); }
.live-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0; padding: 0; list-style: none; }
.live-chip { padding: 3px 9px; border-radius: 20px; background: #e8eef5; color: var(--ink); font-size: 12px; }
.live-chip::before { display: inline-block; width: 8px; height: 8px; margin-right: 6px; border-radius: 50%; background: var(--ship-color, #7a8796); content: ''; }
.live-link-button { align-self: flex-start; margin-top: auto; padding: 8px 0 0; border: 0; background: transparent; color: var(--lake); font: 600 13px var(--sans); cursor: pointer; }
.live-link-button:hover { text-decoration: underline; text-underline-offset: 4px; }

.live-news { margin-top: 16px; padding: 22px; border: 1px solid var(--line); border-radius: 4px; background: var(--white); }
.live-news-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px; margin-bottom: 12px; }
.live-news-head h3 { margin: 0; color: var(--ink); font: 500 22px/1.2 var(--serif); }
.live-news-columns { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 10px 34px; }
.live-headlines li { padding: 9px 0; border-bottom: 1px solid var(--line); }
.live-headlines li:last-child { border-bottom: 0; }
.live-headlines a { color: var(--ink); font-size: 14px; font-weight: 600; line-height: 1.45; text-decoration: none; }
.live-headlines a:hover { color: var(--lake); text-decoration: underline; text-underline-offset: 3px; }
.live-footer { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); }
.live-footer .source-note { margin-top: 10px; }

.live-skeleton { min-height: 190px; gap: 12px; }
.live-skeleton span { display: block; height: 14px; border-radius: 3px; background: linear-gradient(90deg, #e8eef5, #f5f8fb, #e8eef5); background-size: 200% 100%; animation: live-shimmer 1.4s linear infinite; }
.live-skeleton span:first-child { width: 45%; height: 22px; }
.live-skeleton span:last-child { width: 70%; }
@keyframes live-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }

/* Ship colours shared with the map layer. */
.live-ship-cargo { --ship-color: #2d6a4f; }
.live-ship-tanker { --ship-color: #b23a2e; }
.live-ship-passenger { --ship-color: #2a62c9; }
.live-ship-tug, .live-ship-work, .live-ship-service { --ship-color: #c98a1b; }
.live-ship-fishing { --ship-color: #8a5bb3; }
.live-ship-military { --ship-color: #4b5563; }

@media (max-width: 991px) {
  .live-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  .live-now { padding: 20px 16px; }
  .live-grid { grid-template-columns: minmax(0, 1fr); }
  .live-wide { grid-column: auto; }
  .live-alert-until { margin-left: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .live-dot, .live-skeleton span { animation: none; }
}
@media print {
  .live-controls, .live-skeleton { display: none; }
}