/* HormuzLive Tracker Core – component styles (theme-agnostic, inherits theme tokens when present). */
:root{--hlt-navy:#071B33;--hlt-ocean:#0077B6;--hlt-teal:#00C9A7;--hlt-amber:#F59E0B;--hlt-red:#EF4444;--hlt-card:var(--hl-card,#fff);--hlt-text:var(--hl-text,#0f172a);--hlt-muted:var(--hl-muted,#64748b);--hlt-border:var(--hl-border,rgba(7,27,51,.1));--hlt-radius:var(--hl-radius,14px)}
:root[data-theme="dark"],.hlt-dark{--hlt-card:var(--hl-card,#0d2340);--hlt-text:var(--hl-text,#e2e8f0);--hlt-muted:var(--hl-muted,#94a3b8);--hlt-border:var(--hl-border,rgba(255,255,255,.1))}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--hlt-card:var(--hl-card,#0d2340);--hlt-text:var(--hl-text,#e2e8f0);--hlt-muted:var(--hl-muted,#94a3b8);--hlt-border:var(--hl-border,rgba(255,255,255,.1))}}

/* Notices */
.hlt-notice{margin:0 0 1rem;padding:.65rem .9rem;border-radius:10px;font-size:.9rem;background:rgba(0,119,182,.1);color:var(--hlt-text);border:1px solid rgba(0,119,182,.25)}
.hlt-notice--warn{background:rgba(245,158,11,.12);border-color:rgba(245,158,11,.4)}
.hlt-notice--demo{background:rgba(245,158,11,.12);border-color:rgba(245,158,11,.5);font-weight:500}
.hlt-notice--demo::before{content:"SAMPLE DATA";display:inline-block;font-size:.7rem;letter-spacing:.08em;font-weight:700;background:var(--hlt-amber);color:#071B33;padding:.1rem .45rem;border-radius:6px;margin-right:.5rem}

/* Status badge */
.hlt-badge{display:inline-flex;align-items:center;gap:.45rem;padding:.3rem .7rem;border-radius:999px;font-size:.8rem;font-weight:600;background:var(--hlt-card);border:1px solid var(--hlt-border);color:var(--hlt-text);line-height:1.2}
.hlt-badge__dot{width:.55rem;height:.55rem;border-radius:50%;background:#9CA3AF;box-shadow:0 0 0 0 rgba(0,201,167,.5)}
.hlt-badge--connected .hlt-badge__dot{background:var(--hlt-teal);animation:hltPulse 2s infinite}
.hlt-badge--delayed .hlt-badge__dot{background:var(--hlt-amber)}
.hlt-badge--unavailable .hlt-badge__dot,.hlt-badge--disabled .hlt-badge__dot{background:var(--hlt-red)}
.hlt-badge--demo .hlt-badge__dot{background:var(--hlt-amber)}
.hlt-badge__time{color:var(--hlt-muted);font-weight:400}
@keyframes hltPulse{0%{box-shadow:0 0 0 0 rgba(0,201,167,.55)}70%{box-shadow:0 0 0 8px rgba(0,201,167,0)}100%{box-shadow:0 0 0 0 rgba(0,201,167,0)}}
@media (prefers-reduced-motion:reduce){.hlt-badge--connected .hlt-badge__dot{animation:none}}

/* Stats */
.hlt-stats__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1rem}
.hlt-stat{background:var(--hlt-card);border:1px solid var(--hlt-border);border-radius:var(--hlt-radius);padding:1.1rem 1.2rem;min-height:150px;display:flex;flex-direction:column;box-shadow:0 8px 24px -16px rgba(7,27,51,.35);transition:transform .2s}
.hlt-stat:hover{transform:translateY(-2px)}
.hlt-stat__label{margin:0 0 .4rem;font-size:.78rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--hlt-muted)}
.hlt-stat__value{margin:0 0 .5rem;font-size:2rem;font-weight:700;line-height:1.1;color:var(--hlt-text);font-variant-numeric:tabular-nums}
.hlt-stat__value.is-unavailable,.hlt-stat__value[data-state="unavailable"]{font-size:1.1rem;color:var(--hlt-muted)}
.hlt-stat__value[data-format="status"]{font-size:1.15rem}
.hlt-stat__value[data-state="connected"]{color:var(--hlt-teal)}.hlt-stat__value[data-state="delayed"],.hlt-stat__value[data-state="demo"]{color:var(--hlt-amber)}.hlt-stat__value[data-state="unavailable"],.hlt-stat__value[data-state="disabled"]{color:var(--hlt-red)}
.hlt-stat__method{margin-top:auto;font-size:.8rem;color:var(--hlt-muted)}
.hlt-stat__method summary{cursor:pointer;color:var(--hlt-ocean);font-weight:500}
.hlt-stat__method p{margin:.4rem 0 0;line-height:1.45}

/* Map */
.hlt-map-wrap{position:relative;background:var(--hlt-card);border:1px solid var(--hlt-border);border-radius:var(--hlt-radius);overflow:hidden;box-shadow:0 12px 40px -20px rgba(7,27,51,.5)}
.hlt-map-wrap.is-fullscreen{position:fixed;inset:0;z-index:9999;border-radius:0}
.hlt-map-wrap.is-fullscreen .hlt-map__canvas,.hlt-map-wrap:fullscreen .hlt-map__canvas{height:calc(100vh - 110px)!important}
.hlt-map__toolbar{display:flex;flex-wrap:wrap;gap:.6rem;align-items:center;padding:.7rem .9rem;border-bottom:1px solid var(--hlt-border)}
.hlt-map__search{flex:1 1 220px}
.hlt-map__search input{width:100%;padding:.5rem .75rem;border:1px solid var(--hlt-border);border-radius:8px;background:transparent;color:var(--hlt-text);font:inherit}
.hlt-map__filters{display:flex;flex-wrap:wrap;gap:.35rem .8rem;font-size:.82rem;color:var(--hlt-text)}
.hlt-map__filters label{display:inline-flex;align-items:center;gap:.3rem;cursor:pointer}
.hlt-map__fullscreen{border:1px solid var(--hlt-border);background:transparent;color:var(--hlt-text);border-radius:8px;padding:.35rem .6rem;cursor:pointer;font-size:1rem}
.hlt-map__notice{margin:.6rem .9rem 0}
.hlt-map__canvas{width:100%;background:#0b2a4a;position:relative;z-index:0}
.hlt-map__placeholder{position:absolute;inset:0;display:grid;place-items:center;margin:0;color:#cbd5e1}
.hlt-map__panel{position:absolute;top:70px;right:12px;z-index:800;width:min(320px,calc(100% - 24px));max-height:calc(100% - 140px);overflow:auto;background:var(--hlt-card);color:var(--hlt-text);border:1px solid var(--hlt-border);border-radius:12px;padding:1rem;box-shadow:0 16px 40px -16px rgba(0,0,0,.5)}
.hlt-panel__close{position:absolute;top:.4rem;right:.5rem;border:0;background:transparent;font-size:1.4rem;cursor:pointer;color:var(--hlt-muted)}
.hlt-panel__title{margin:0 1.5rem .6rem 0;font-size:1.05rem}
.hlt-panel__list{margin:0;font-size:.85rem}
.hlt-panel__row{display:flex;justify-content:space-between;gap:.6rem;padding:.3rem 0;border-top:1px solid var(--hlt-border)}
.hlt-panel__row dt{color:var(--hlt-muted);flex:0 0 42%}.hlt-panel__row dd{margin:0;text-align:right;word-break:break-word}
.hlt-panel__row .is-muted{color:var(--hlt-muted);font-style:italic}
.hlt-map__meta{display:flex;flex-wrap:wrap;gap:.6rem 1rem;align-items:center;padding:.7rem .9rem;margin:0;font-size:.8rem;color:var(--hlt-muted);border-top:1px solid var(--hlt-border)}
.hlt-map__coverage{flex-basis:100%}
.hlt-ship-icon{background:none;border:0}
.hlt-ship-icon.is-selected svg{filter:drop-shadow(0 0 4px #fff)}
.leaflet-container{font:inherit}
.leaflet-tooltip{font-size:.8rem}

/* Charts */
.hlt-charts__controls{display:flex;gap:.4rem;flex-wrap:wrap;margin-bottom:1rem}
.hlt-charts__controls button{border:1px solid var(--hlt-border);background:var(--hlt-card);color:var(--hlt-text);padding:.4rem .8rem;border-radius:999px;cursor:pointer;font:inherit;font-size:.85rem}
.hlt-charts__controls button.is-active{background:var(--hlt-ocean);border-color:var(--hlt-ocean);color:#fff}
.hlt-charts__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1rem}
.hlt-chart{margin:0;background:var(--hlt-card);border:1px solid var(--hlt-border);border-radius:var(--hlt-radius);padding:1rem}
.hlt-chart figcaption{font-weight:600;font-size:.9rem;margin-bottom:.6rem;color:var(--hlt-text)}
.hlt-chart__box{position:relative;height:260px}
.hlt-charts__empty{margin:1rem 0 0;color:var(--hlt-muted);font-style:italic}
.hlt-methodology{margin-top:1rem;font-size:.9rem;color:var(--hlt-muted)}
.hlt-methodology summary{cursor:pointer;color:var(--hlt-ocean);font-weight:600}

/* Table */
.hlt-table-wrap{overflow-x:auto}
.hlt-table{width:100%;border-collapse:collapse;font-size:.88rem}
.hlt-table th,.hlt-table td{padding:.6rem .7rem;border-bottom:1px solid var(--hlt-border);text-align:left;vertical-align:top}
.hlt-table th{font-size:.75rem;text-transform:uppercase;letter-spacing:.05em;color:var(--hlt-muted)}

/* Ads */
.hlt-ad{position:relative;display:block;margin:1.5rem auto;text-align:center;overflow:hidden;contain:layout;background:rgba(127,127,127,.05);border-radius:8px}
.hlt-ad__label{display:block;font-size:.65rem;letter-spacing:.1em;text-transform:uppercase;color:var(--hlt-muted);padding:.25rem 0}
@media (max-width:767px){.hlt-ad--desktop-only{display:none}}

/* Breadcrumbs & sources */
.hlt-breadcrumbs ol{list-style:none;display:flex;flex-wrap:wrap;gap:.3rem;margin:0 0 1rem;padding:0;font-size:.82rem;color:var(--hlt-muted)}
.hlt-breadcrumbs li+li::before{content:"›";margin:0 .3rem}
.hlt-breadcrumbs a{color:var(--hlt-ocean);text-decoration:none}
.hlt-sources{margin-top:2rem;padding-top:1rem;border-top:1px solid var(--hlt-border);font-size:.9rem}
.hlt-sources h2{font-size:1rem;margin:0 0 .5rem}
.hlt-review--approved{color:#15803d;font-weight:600}.hlt-review--in_review{color:#b45309;font-weight:600}

/* Strait status banner (editorial) */
.hlt-strait{display:flex;align-items:center;gap:1rem;padding:1rem 1.25rem;border-radius:16px;background:var(--hlt-card);border:1px solid var(--hlt-border);box-shadow:0 10px 30px -22px rgba(7,27,51,.5);color:var(--hlt-text)}
.hlt-strait__icon{font-size:1.9rem;line-height:1;flex:0 0 auto}
.hlt-strait__body{min-width:0}
.hlt-strait__title{margin:0 0 .15rem;display:inline-flex;align-items:center;gap:.5rem;font-size:1.15rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase}
.hlt-strait__dot{width:.75rem;height:.75rem;border-radius:50%;background:currentColor;box-shadow:0 0 0 4px rgba(127,127,127,.18)}
.hlt-strait--open .hlt-strait__title{color:var(--hlt-teal)}
.hlt-strait--open .hlt-strait__dot{animation:hltPulse 2s infinite}
.hlt-strait--restricted .hlt-strait__title{color:var(--hlt-amber)}
.hlt-strait--restricted{border-color:rgba(245,158,11,.6);box-shadow:inset 5px 0 0 var(--hlt-amber),0 10px 30px -22px rgba(7,27,51,.5)}
.hlt-strait--closed .hlt-strait__title{color:var(--hlt-red)}
.hlt-strait--closed{border-color:rgba(239,68,68,.6);box-shadow:inset 5px 0 0 var(--hlt-red),0 10px 30px -22px rgba(7,27,51,.5)}
.hlt-strait__text{margin:0;font-size:1rem;line-height:1.45}
.hlt-strait__sep{margin:0 .3rem;color:var(--hlt-muted)}
.hlt-strait__updated{color:var(--hlt-muted);display:inline-block}
@media (max-width:640px){.hlt-strait{gap:.75rem;padding:.85rem 1rem}.hlt-strait__icon{font-size:1.5rem}.hlt-strait__title{font-size:1rem}.hlt-strait__text{font-size:.92rem}.hlt-strait__sep{display:none}.hlt-strait__updated{display:block;margin-top:.15rem}}

/* Weather overlay controls + conditions */
.hlt-map__weather{display:inline-flex;align-items:center;flex-wrap:wrap;gap:.25rem;padding:.2rem .35rem;border:1px solid var(--hlt-border);border-radius:999px;font-size:.78rem}
.hlt-map__weather-label{padding:0 .35rem;color:var(--hlt-muted);font-weight:600;text-transform:uppercase;letter-spacing:.05em;font-size:.68rem}
.hlt-map__weather button{border:0;background:transparent;color:var(--hlt-text);padding:.3rem .6rem;border-radius:999px;cursor:pointer;font:inherit;font-size:.78rem}
.hlt-map__weather button:hover{background:rgba(0,119,182,.1)}
.hlt-map__weather button.is-active{background:var(--hlt-ocean);color:#fff}
.hlt-weather{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem 1rem;padding:.6rem .9rem;border-top:1px solid var(--hlt-border);font-size:.85rem;color:var(--hlt-text)}
.hlt-weather__title{font-size:.7rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--hlt-muted)}
.hlt-weather__item{display:inline-flex;align-items:center;gap:.3rem}
.hlt-weather__item strong{color:var(--hlt-muted);font-weight:600}
.hlt-weather__item.is-muted{color:var(--hlt-muted);font-size:.75rem;flex-basis:100%}
.hlt-weather__item img{width:28px;height:28px;margin:-6px 0}