/* ============================================================
   Shore Pass — Shiptionary  ·  app stylesheet
   Red/navy maritime brand. Desktop + mobile. Light/dark.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@500;600;700&family=Manrope:wght@400;500;600;700;800&family=Quicksand:wght@500;600;700&family=JetBrains+Mono:wght@500;700&display=swap');

:root {
  --sp-red:#D32027; --sp-red-deep:#A41820; --sp-red-ink:#6B0F14;
  --sp-red-soft:#FCEAEA; --sp-red-tint:#FFF5F5;
  --sp-navy:#0B2440; --sp-navy-2:#0F2E52; --sp-navy-line:#1B3A60;
  --sp-blue:#1E6FE0; --sp-blue-soft:#E8F0FE;
  --sp-green:#16A34A; --sp-green-soft:#E7F6EC;
  --sp-amber:#E08C1B; --sp-amber-soft:#FFF3DE;
  --sp-ink:#14171C; --sp-ink-2:#2B313B; --sp-slate:#5A6473; --sp-slate-2:#8B95A4;
  --sp-line:#E6EAF0; --sp-line-2:#EFF2F7;
  --sp-surface:#FFFFFF; --sp-bg:#F4F6FA; --sp-bg-2:#FAFBFD;
  --sp-shadow-1:0 1px 2px rgba(15,23,42,.04),0 4px 12px rgba(15,23,42,.05);
  --sp-shadow-2:0 2px 4px rgba(15,23,42,.06),0 10px 28px rgba(15,23,42,.10);
  --sp-shadow-red:0 8px 24px rgba(211,32,39,.25);
  --sp-font-display:'Oswald',system-ui,sans-serif;
  --sp-font-body:'Manrope',system-ui,sans-serif;
  --sp-font-mono:'JetBrains Mono',ui-monospace,monospace;
  --sp-r-sm:6px; --sp-r-md:10px; --sp-r-lg:16px; --sp-r-xl:22px;
  --sp-shell:1160px;
}
[data-theme="dark"]{
  --sp-ink:#F2F5FA; --sp-ink-2:#DCE1EA; --sp-slate:#A0AAB9; --sp-slate-2:#6F7888;
  --sp-line:#222A35; --sp-line-2:#171D26;
  --sp-surface:#111722; --sp-bg:#0A0E15; --sp-bg-2:#0E141D;
  --sp-navy:#0A1828; --sp-navy-2:#0E2138; --sp-navy-line:#1B3A60;
  --sp-red-soft:#2A1214; --sp-red-tint:#1A0C0D;
  --sp-blue-soft:#0E1A2E; --sp-green-soft:#0C1F14; --sp-amber-soft:#211608;
  --sp-shadow-1:0 1px 2px rgba(0,0,0,.4),0 4px 12px rgba(0,0,0,.4);
  --sp-shadow-2:0 2px 4px rgba(0,0,0,.5),0 10px 28px rgba(0,0,0,.5);
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0}
body{
  font-family:var(--sp-font-body); color:var(--sp-ink); background:var(--sp-bg);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; line-height:1.5;
}
a{color:inherit; text-decoration:none}
img{max-width:100%; display:block}
button{font-family:inherit; cursor:pointer}
h1,h2,h3{margin:0; font-family:var(--sp-font-display); font-weight:600; letter-spacing:.01em}

.sp-shell{width:100%; max-width:var(--sp-shell); margin-inline:auto; padding-inline:20px}
.sp-main{min-height:60vh; padding-bottom:48px}
.sp-ico{width:1.1em; height:1.1em; vertical-align:-.18em; flex:0 0 auto}
.sp-ico--sm{width:.95em; height:.95em}
.sp-ico--muted{color:var(--sp-slate-2)}
.sp-muted{color:var(--sp-slate-2)}
.sp-link{color:var(--sp-red); font-weight:700; font-size:14px}
.sp-link:hover{text-decoration:underline}

/* ---------- Buttons ---------- */
.sp-btn{display:inline-flex; align-items:center; justify-content:center; gap:7px;
  padding:11px 18px; border-radius:var(--sp-r-md); font-weight:700; font-size:14px;
  border:1.5px solid transparent; transition:transform .08s ease, background .15s, box-shadow .15s; white-space:nowrap}
.sp-btn:active{transform:scale(.98)}
/* A disabled button that still looks clickable is worse than no button: it is
   clicked, nothing happens, and nothing explains why. Applies to every variant
   — only --google had its own rule before. */
.sp-btn:disabled{opacity:.45; cursor:not-allowed; box-shadow:none}
.sp-btn:disabled:active{transform:none}
/* Hover still fires on a disabled button, so each variant has to hold its own
   colour or it lights up under the cursor as if it were live. */
.sp-btn--primary:disabled:hover{background:var(--sp-red)}
.sp-btn--ghost:disabled:hover{background:transparent}
.sp-btn--primary{background:var(--sp-red); color:#fff; box-shadow:var(--sp-shadow-red)}
.sp-btn--primary:hover{background:var(--sp-red-deep)}
.sp-btn--ghost{background:transparent; border-color:var(--sp-red); color:var(--sp-red)}
.sp-btn--ghost:hover{background:var(--sp-red-tint)}
.sp-btn--sm{padding:8px 13px; font-size:13px}
.sp-btn--lg{padding:14px 26px; font-size:15px}
.sp-btn--block{width:100%}

/* ---------- Tags / chips / pills ---------- */
.sp-tag{display:inline-flex; align-items:center; gap:4px; font-size:11px; font-weight:800;
  padding:4px 10px; border-radius:999px; letter-spacing:.03em; text-transform:uppercase}
.sp-tag--avail{background:var(--sp-green-soft); color:var(--sp-green)}
.sp-tag--limited{background:var(--sp-amber-soft); color:var(--sp-amber)}
.sp-chip{display:inline-flex; align-items:center; gap:5px; font-size:12px; font-weight:700;
  padding:4px 10px; border-radius:999px; background:var(--sp-line-2); color:var(--sp-slate)}
.sp-chip--green{background:var(--sp-green-soft); color:var(--sp-green)}
.sp-chip--red{background:var(--sp-red-soft); color:var(--sp-red)}
.sp-pill{display:inline-flex; flex-direction:column; align-items:flex-end; gap:1px; font-weight:700;
  font-size:13px; color:var(--sp-ink-2); white-space:nowrap}
.sp-pill__k{font-size:10px; font-weight:600; color:var(--sp-slate-2); text-transform:uppercase; letter-spacing:.05em}

/* ---------- Flash ---------- */
.sp-flash{display:flex; align-items:center; gap:8px; padding:12px 16px; border-radius:var(--sp-r-md);
  font-weight:600; margin-bottom:18px}
.sp-flash--success{background:var(--sp-green-soft); color:var(--sp-green); border:1px solid #b9e6c8}
.sp-flash--error{background:var(--sp-red-soft); color:var(--sp-red); border:1px solid #f3c9cb}

/* ============================================================
   Permit-stamp logo
   ============================================================ */
.sp-stamp{--s:1; background:#fff; color:var(--sp-red); border:calc(2.5px*var(--s)) solid var(--sp-red);
  border-radius:calc(10px*var(--s));
  box-shadow:inset 0 0 0 calc(2px*var(--s)) #fff, inset 0 0 0 calc(3.5px*var(--s)) var(--sp-red);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  font-family:var(--sp-font-display); text-transform:uppercase; line-height:.92; text-align:center;
  position:relative; padding:calc(7px*var(--s)) calc(6px*var(--s)) calc(9px*var(--s)); flex:0 0 auto;
  text-decoration:none; transition:transform .12s ease, box-shadow .18s ease}
a.sp-stamp{cursor:pointer}
a.sp-stamp:hover{transform:translateY(-2px); box-shadow:inset 0 0 0 calc(2px*var(--s)) #fff, inset 0 0 0 calc(3.5px*var(--s)) var(--sp-red), var(--sp-shadow-red)}
a.sp-stamp:active{transform:translateY(0)}
.sp-stamp__star{font-size:calc(7px*var(--s)); letter-spacing:.18em}
.sp-stamp__shore,.sp-stamp__pass{font-size:calc(17px*var(--s)); font-weight:700; letter-spacing:.02em}
.sp-stamp__sub{font-size:calc(5px*var(--s)); letter-spacing:.2em; border-top:1px solid var(--sp-red);
  border-bottom:1px solid var(--sp-red); padding:calc(1px*var(--s)) 0; margin:calc(2px*var(--s)) 0; width:100%}
.sp-stamp__granted{font-size:calc(6px*var(--s)); font-weight:700; letter-spacing:.04em}
.sp-stamp__check{position:absolute; bottom:calc(-6px*var(--s)); left:50%; transform:translateX(-50%);
  width:calc(15px*var(--s)); height:calc(15px*var(--s)); border-radius:50%; background:var(--sp-red); color:#fff;
  display:grid; place-items:center; font-size:calc(9px*var(--s)); border:calc(2px*var(--s)) solid #fff}
.sp-stamp--sm{--s:.85; width:48px; height:58px}
.sp-stamp--md{--s:1.1; width:64px; height:80px}
.sp-stamp--lg{--s:1.6; width:96px; height:122px}

/* ============================================================
   Top bar
   ============================================================ */
.sp-topbar{position:sticky; top:0; z-index:40; background:var(--sp-navy); color:#fff;
  border-bottom:1px solid var(--sp-navy-line)}
.sp-topbar__inner{display:flex; align-items:center; gap:18px; height:62px}
.sp-brand{display:flex; align-items:center; gap:10px; color:#fff; text-decoration:none}
.sp-brand__logo{width:32px; height:32px; color:#fff; flex:0 0 auto; transition:transform .15s ease}
.sp-brand:hover .sp-brand__logo{transform:translateY(-1px) scale(1.03)}
.sp-brand__word{font-family:'Quicksand', var(--sp-font-display); font-weight:600; font-size:23px;
  color:#fff; letter-spacing:.005em; line-height:1; white-space:nowrap}
.sp-brand__tld{font-size:.46em; font-weight:600; opacity:.85; letter-spacing:.02em}
@media (max-width:560px){
  .sp-brand__word{font-size:19px}
  .sp-brand__logo{width:28px; height:28px}
}
.sp-topnav{display:flex; gap:6px; margin-left:14px}
.sp-topnav a{padding:8px 12px; border-radius:8px; font-weight:600; font-size:14px; color:#cdd9e9}
.sp-topnav a:hover{background:rgba(255,255,255,.08); color:#fff}
.sp-topnav a.is-active{color:#fff; background:rgba(255,255,255,.12)}
.sp-topbar__actions{margin-left:auto; display:flex; align-items:center; gap:10px}
.sp-icon-btn{width:38px; height:38px; border-radius:10px; border:1px solid var(--sp-navy-line);
  background:rgba(255,255,255,.06); color:#fff; display:grid; place-items:center}
.sp-icon-btn:hover{background:rgba(255,255,255,.14)}
.sp-icon-btn svg{width:18px; height:18px}
.sp-icon-moon{display:none}
[data-theme="dark"] .sp-icon-sun{display:none}
[data-theme="dark"] .sp-icon-moon{display:block}

/* ============================================================
   Hero
   ============================================================ */
.sp-hero{background:linear-gradient(160deg,var(--sp-navy) 0%, var(--sp-navy-2) 100%); color:#fff;
  padding:34px 0 30px; position:relative}
/* Glow painted as a full-size, naturally-clipped background layer so the hero
   itself doesn't need overflow:hidden (which would clip the finder dropdowns). */
.sp-hero::after{content:''; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:radial-gradient(circle 140px at calc(100% - 80px) calc(100% - 80px), rgba(211,32,39,.30), transparent 70%)}
.sp-hero__inner{position:relative; z-index:1}
.sp-hero__brand{display:flex; align-items:center; gap:22px; margin-bottom:24px}
.sp-hero__eyebrow{margin:0 0 2px; text-transform:uppercase; letter-spacing:.16em; font-size:12px; font-weight:700; color:#9fb6d4}
.sp-hero__copy h1{font-size:34px; line-height:1.05}
.sp-hero__sub{margin:8px 0 0; max-width:640px; color:#c7d4e6; font-size:15px}

.sp-finder{display:grid; grid-template-columns:1fr 1fr auto; gap:14px; align-items:end;
  background:var(--sp-surface); color:var(--sp-ink); border-radius:var(--sp-r-lg); padding:18px; box-shadow:var(--sp-shadow-2)}
.sp-finder__field{display:flex; flex-direction:column; gap:6px}
.sp-finder__field label{display:flex; align-items:center; gap:6px; font-size:12px; font-weight:700;
  text-transform:uppercase; letter-spacing:.04em; color:var(--sp-slate)}
.sp-finder__actions{display:flex; gap:10px}

/* Inputs (shared) */
.sp-input{width:100%; padding:11px 13px; border:1.5px solid var(--sp-line); border-radius:var(--sp-r-md);
  background:var(--sp-bg-2); color:var(--sp-ink); font:inherit; font-size:14px; transition:border .15s, box-shadow .15s}
.sp-input:focus{outline:none; border-color:var(--sp-red); box-shadow:0 0 0 3px var(--sp-red-soft); background:var(--sp-surface)}
.sp-input:disabled{opacity:.6; cursor:not-allowed}
select.sp-input{appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='%238B95A4'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 12px center; padding-right:34px}

/* ============================================================
   Sections / headings
   ============================================================ */
.sp-section{padding-top:34px}
.sp-section__lead{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:16px}
.sp-h2{display:flex; align-items:center; gap:9px; font-size:20px; color:var(--sp-ink)}
.sp-h2 .sp-ico{color:var(--sp-red)}
.sp-h2 small{font-weight:500; color:var(--sp-slate-2); font-family:var(--sp-font-body); font-size:13px}
.sp-crumbs{font-size:13px; color:var(--sp-slate); margin-bottom:14px}
.sp-crumbs a{color:var(--sp-red); font-weight:600}
.sp-crumbs span{margin:0 6px; color:var(--sp-slate-2)}

/* ---------- Cards ---------- */
.sp-card{background:var(--sp-surface); border:1px solid var(--sp-line); border-radius:var(--sp-r-lg); box-shadow:var(--sp-shadow-1)}

/* ============================================================
   Port guide — 2-column layout
   ============================================================ */
.sp-portbar{display:flex; align-items:center; justify-content:space-between; gap:14px;
  background:var(--sp-navy); color:#fff; border-radius:var(--sp-r-lg); padding:16px 20px; margin-bottom:18px}
.sp-portbar__id{display:flex; align-items:center; gap:14px; min-width:0}
.sp-portbar__txt{display:flex; flex-direction:column; min-width:0}
.sp-portbar__txt strong{font-family:var(--sp-font-display); font-size:20px; letter-spacing:.02em}
.sp-portbar__txt span{font-size:13px; color:#bcd0e8; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.sp-portbar__edit{display:inline-flex; align-items:center; gap:6px; background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.22); color:#fff; padding:8px 14px; border-radius:9px; font-weight:700; font-size:13px; flex:0 0 auto}
.sp-portbar__edit:hover{background:rgba(255,255,255,.2)}
.sp-flag{font-size:30px; line-height:1}
.sp-flag--sm{font-size:20px}

.sp-guide{display:grid; grid-template-columns:minmax(0,1fr) 330px; gap:20px; align-items:start}
.sp-guide__main{display:flex; flex-direction:column; gap:18px; min-width:0}
.sp-guide__aside{display:flex; flex-direction:column; gap:16px; position:sticky; top:78px}

/* ---------- Block (section card) ---------- */
.sp-block{padding:18px 20px}
.sp-block__head{display:flex; align-items:center; gap:10px; padding-bottom:14px; margin-bottom:14px;
  border-bottom:1px solid var(--sp-line)}
.sp-block__head h2{font-size:16px; text-transform:uppercase; letter-spacing:.05em; color:var(--sp-red); display:flex; align-items:baseline; gap:8px}
.sp-block__head h2 small{font-family:var(--sp-font-body); text-transform:none; letter-spacing:0; color:var(--sp-slate-2); font-size:12px; font-weight:500}
.sp-block__ico{width:22px; height:22px; color:var(--sp-red); flex:0 0 auto}
.sp-block__aside{margin-left:auto; opacity:.5}

/* ---------- Definition list (Terminal) ---------- */
.sp-deflist{margin:0; display:flex; flex-direction:column; gap:14px}
.sp-deflist__row{display:grid; grid-template-columns:200px 1fr; gap:14px}
.sp-deflist dt{font-weight:700; color:var(--sp-ink-2); font-size:14px}
.sp-deflist dd{margin:0; color:var(--sp-slate); font-size:14px}

/* ---------- Facilities ---------- */
.sp-facility,.sp-attractions{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:14px}
.sp-facility>li{display:flex; gap:14px}
.sp-facility__ic{width:38px; height:38px; border-radius:10px; background:var(--sp-blue-soft); color:var(--sp-blue);
  display:grid; place-items:center; flex:0 0 auto}
.sp-facility__ic svg{width:20px; height:20px}
.sp-facility__body strong{display:block; font-size:14px}
.sp-facility__body p{margin:2px 0 0; color:var(--sp-slate); font-size:14px}
.sp-facility__meta{display:flex; flex-wrap:wrap; gap:8px 14px; margin-top:6px}
.sp-facility__meta span{display:inline-flex; align-items:center; gap:5px; font-size:12px; font-weight:600; color:var(--sp-ink-2)}
.sp-facility__meta .sp-ico{color:var(--sp-slate-2)}

/* ---------- Attractions ---------- */
.sp-attractions>li{display:flex; align-items:flex-start; gap:14px}
.sp-attractions__ic{width:42px; height:42px; border-radius:10px; background:var(--sp-red-soft); color:var(--sp-red);
  display:grid; place-items:center; flex:0 0 auto}
.sp-attractions__ic svg{width:22px; height:22px}
.sp-attractions__body{flex:1 1 auto; min-width:0}
.sp-attractions__body strong{display:block; font-size:14px}
.sp-attractions__body p{margin:2px 0 0; color:var(--sp-slate); font-size:14px}

/* ---------- Note ---------- */
.sp-note{display:flex; align-items:center; gap:12px; background:var(--sp-amber-soft);
  border:1px solid #f4dca6; border-radius:var(--sp-r-md); padding:12px 16px}
.sp-note__ico{width:22px; height:22px; color:var(--sp-amber); flex:0 0 auto}
.sp-note p{margin:0; font-size:13px; color:#8a6011; font-weight:600}

/* ---------- Photos grid ---------- */
.sp-photogrid{display:grid; grid-template-columns:repeat(auto-fill,minmax(120px,1fr)); gap:10px}
.sp-photogrid__item{margin:0; position:relative; border-radius:var(--sp-r-md); overflow:hidden; aspect-ratio:4/3; background:var(--sp-line-2)}
.sp-photogrid__item img{width:100%; height:100%; object-fit:cover}
.sp-photogrid__item figcaption{position:absolute; left:0; bottom:0; right:0; padding:4px 8px; font-size:11px;
  font-weight:700; color:#fff; background:linear-gradient(transparent, rgba(0,0,0,.7))}

/* ---------- Top ports ---------- */
.sp-topports{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:8px 22px}
.sp-topports>li{display:flex; align-items:center; gap:10px; font-size:14px; padding:5px 0}
.sp-topports__rank{width:24px; height:24px; border-radius:50%; background:var(--sp-red); color:#fff;
  display:grid; place-items:center; font-weight:800; font-size:12px; flex:0 0 auto; font-family:var(--sp-font-mono)}
.sp-topports>li>a{display:flex; align-items:center; gap:8px; font-weight:600; min-width:0}
.sp-topports>li>a:hover{color:var(--sp-red)}
.sp-topports__count{margin-left:auto; font-size:11px; font-weight:800; color:var(--sp-slate-2);
  background:var(--sp-line-2); border-radius:999px; padding:2px 8px}

/* ============================================================
   Sidebar widgets
   ============================================================ */
.sp-widget{overflow:hidden}
.sp-widget__head{display:flex; align-items:center; gap:9px; padding:13px 16px; font-weight:800; font-size:13px;
  text-transform:uppercase; letter-spacing:.05em; color:var(--sp-ink); border-bottom:1px solid var(--sp-line); background:var(--sp-bg-2)}
.sp-widget__ico{width:20px; height:20px; color:var(--sp-red)}
.sp-widget__body{padding:14px 16px}
.sp-widget__hint{margin:0 0 10px; font-size:13px; color:var(--sp-slate)}
.sp-widget__note{margin:8px 0 0; font-size:11px; color:var(--sp-slate-2)}
.sp-widget--link .sp-widget__hint{margin:0}

.sp-timer{display:flex; gap:8px}
.sp-timer .sp-input{flex:1 1 auto}
.sp-timer__readout{margin:10px 0 0; font-weight:700; font-size:13px; color:var(--sp-green);
  display:flex; align-items:center; gap:6px; font-variant-numeric:tabular-nums}
.sp-timer__readout.is-due{color:var(--sp-red); animation:sp-pulse 1s ease-in-out infinite}
@keyframes sp-pulse{0%,100%{opacity:1}50%{opacity:.45}}
.sp-timer__clear{margin:6px 0 0; padding:0; background:none; border:none; color:var(--sp-slate);
  font-size:12px; font-weight:600; text-decoration:underline; cursor:pointer}
.sp-timer__clear:hover{color:var(--sp-red)}

.sp-fx{display:grid; grid-template-columns:1fr auto 1fr; gap:8px; align-items:center}
.sp-fx__row{display:flex; flex-direction:column; gap:6px}
.sp-fx__amt{font-family:var(--sp-font-mono); font-weight:700}
.sp-fx__swap{width:34px; height:34px; border-radius:50%; border:1.5px solid var(--sp-line);
  background:var(--sp-surface); color:var(--sp-red); font-size:16px; font-weight:700; align-self:center}
.sp-fx__swap:hover{background:var(--sp-red-tint)}
.sp-fxtable{width:100%; border-collapse:collapse; font-size:13px}
.sp-fxtable th{text-align:left; font-size:11px; text-transform:uppercase; letter-spacing:.04em; color:var(--sp-slate-2);
  padding:4px 6px; border-bottom:1px solid var(--sp-line)}
.sp-fxtable td{padding:8px 6px; border-bottom:1px solid var(--sp-line-2); font-weight:600}

/* ============================================================
   Carousel (live photos)
   ============================================================ */
.sp-carousel{display:flex; gap:14px; overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:8px}
.sp-no-scrollbar::-webkit-scrollbar{display:none}
.sp-no-scrollbar{scrollbar-width:none}
.sp-shot{position:relative; margin:0; flex:0 0 84%; max-width:460px; scroll-snap-align:start; border-radius:var(--sp-r-lg);
  overflow:hidden; aspect-ratio:16/10; background:var(--sp-line-2); box-shadow:var(--sp-shadow-1); display:block}
.sp-shot img{width:100%; height:100%; object-fit:cover}
.sp-shot__cap{position:absolute; left:0; right:0; bottom:0; padding:14px 16px; color:#fff;
  background:linear-gradient(transparent, rgba(0,0,0,.78))}
.sp-shot__cap strong{display:block; font-size:14px}
.sp-shot__cap span{display:block; font-size:12px; color:#d8e2ef}
.sp-credit{display:block; margin-top:3px; font-size:10px; color:#aab8cc; letter-spacing:.01em;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.sp-photogrid__credit{position:absolute; top:5px; right:6px; width:16px; height:16px; border-radius:50%;
  background:rgba(0,0,0,.5); color:#fff; font-size:10px; line-height:16px; text-align:center; cursor:help}

/* ============================================================
   Feed
   ============================================================ */
.sp-feed{display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:16px}
.sp-feedcard{padding:16px; display:flex; flex-direction:column; gap:10px; transition:transform .12s, box-shadow .12s}
a.sp-feedcard:hover{transform:translateY(-2px); box-shadow:var(--sp-shadow-2)}
.sp-feedcard__top{display:flex; align-items:center; gap:10px}
.sp-feedcard__top strong{display:block; font-size:14px}
.sp-feedcard__top small{color:var(--sp-slate-2); font-size:12px}
.sp-avatar{width:38px; height:38px; border-radius:50%; background:var(--sp-red-soft); color:var(--sp-red);
  display:grid; place-items:center; font-weight:800; font-size:13px; flex:0 0 auto}
.sp-feedcard__body{margin:0; color:var(--sp-slate); font-size:14px; flex:1 1 auto}
.sp-feedcard__foot{display:flex; flex-wrap:wrap; gap:8px}

/* ============================================================
   Empty states
   ============================================================ */
.sp-empty{text-align:center; padding:46px 24px; background:var(--sp-surface); border:1px dashed var(--sp-line);
  border-radius:var(--sp-r-lg)}
.sp-empty--page{padding:80px 24px}
.sp-empty__ico{width:54px; height:54px; color:var(--sp-slate-2); margin-bottom:10px}
.sp-empty h3{font-size:20px; margin-bottom:6px}
.sp-empty p{margin:0 0 18px; color:var(--sp-slate)}

/* ============================================================
   Form
   ============================================================ */
.sp-formwrap{max-width:860px}
.sp-formhead{display:flex; align-items:center; gap:18px; margin-bottom:22px}
.sp-formhead h1{font-size:26px}
.sp-formhead p{margin:6px 0 0; color:var(--sp-slate); font-size:14px}
.sp-form{display:flex; flex-direction:column; gap:18px}
.sp-fieldset{border:1px solid var(--sp-line); padding:18px 20px; margin:0}
.sp-fieldset legend{display:flex; align-items:center; gap:9px; font-family:var(--sp-font-display);
  text-transform:uppercase; letter-spacing:.05em; color:var(--sp-red); font-size:15px; font-weight:600; padding:0 8px}
.sp-grid{display:grid; gap:14px}
.sp-grid--2{grid-template-columns:1fr 1fr}
.sp-grid--3{grid-template-columns:1fr 1fr 1fr}
.sp-grid--3to1{grid-template-columns:3fr 1fr}
.sp-field{display:flex; flex-direction:column; gap:6px; margin-bottom:14px}
.sp-field:last-child{margin-bottom:0}
.sp-field__label{font-size:13px; font-weight:700; color:var(--sp-ink-2)}
.sp-field__label em{color:var(--sp-red); font-style:normal}
.sp-field__label small{font-weight:500; color:var(--sp-slate-2)}
.sp-field.is-invalid .sp-input{border-color:var(--sp-red); background:var(--sp-red-tint)}
.sp-err{font-size:12px; color:var(--sp-red); font-weight:600}
textarea.sp-input{resize:vertical; min-height:46px}

.sp-radioset{display:flex; gap:10px; flex-wrap:wrap}
.sp-radio{position:relative; flex:1 1 auto; min-width:120px}
.sp-radio input{position:absolute; opacity:0}
.sp-radio span{display:block; text-align:center; padding:11px; border:1.5px solid var(--sp-line); border-radius:var(--sp-r-md);
  font-weight:700; font-size:14px; color:var(--sp-slate); background:var(--sp-bg-2); transition:.15s}
.sp-radio input:checked + span{border-color:var(--sp-red); background:var(--sp-red); color:#fff; box-shadow:var(--sp-shadow-red)}
.sp-radio input:focus-visible + span{box-shadow:0 0 0 3px var(--sp-red-soft)}

.sp-more{margin-top:6px; border-top:1px dashed var(--sp-line); padding-top:12px}
.sp-more>summary{cursor:pointer; font-weight:700; color:var(--sp-red); font-size:14px; list-style:none; user-select:none}
.sp-more>summary::-webkit-details-marker{display:none}
.sp-more>summary:hover{text-decoration:underline}
.sp-more__body{margin-top:14px}
.sp-more[open]>summary{margin-bottom:4px}

.sp-uploader{display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px;
  padding:26px; border:2px dashed var(--sp-line); border-radius:var(--sp-r-lg); cursor:pointer;
  background:var(--sp-bg-2); transition:.15s; text-align:center}
.sp-uploader:hover,.sp-uploader.is-drag{border-color:var(--sp-red); background:var(--sp-red-tint)}
.sp-uploader__ico{width:34px; height:34px; color:var(--sp-red)}
.sp-uploader__title{font-weight:800}
.sp-uploader__hint{font-size:12px; color:var(--sp-slate-2)}
.sp-thumbs{display:flex; flex-wrap:wrap; gap:10px; margin-top:14px}
.sp-thumbs figure{margin:0; width:84px; height:84px; border-radius:var(--sp-r-md); overflow:hidden; background:var(--sp-line-2)}
.sp-thumbs img{width:100%; height:100%; object-fit:cover}

.sp-form__actions{display:flex; justify-content:flex-end; gap:12px; position:sticky; bottom:0;
  background:linear-gradient(transparent, var(--sp-bg) 40%); padding:16px 0 8px}

/* ============================================================
   Footer + FAB
   ============================================================ */
.sp-footer{background:var(--sp-navy); color:#c7d4e6; margin-top:40px; padding:30px 0}
.sp-footer__inner{display:grid; grid-template-columns:1fr auto; gap:18px; align-items:center}
.sp-footer__brand{display:flex; align-items:center; gap:14px}
.sp-footer__brand strong{color:#fff; font-family:var(--sp-font-display); letter-spacing:.03em}
.sp-footer__brandlink{color:#fff; text-decoration:underline; text-underline-offset:2px; text-decoration-color:var(--sp-red)}
.sp-footer__brandlink:hover{color:var(--sp-red)}
.sp-footer__brand p{margin:2px 0 0; font-size:13px; color:#9fb6d4}
.sp-footer__links{display:flex; gap:18px; font-weight:600; font-size:14px}
.sp-footer__links a:hover{color:#fff}
.sp-footer__note{grid-column:1/-1; margin:8px 0 0; font-size:12px; color:#7e93b0; border-top:1px solid var(--sp-navy-line); padding-top:14px}

.sp-fab{position:fixed; right:16px; bottom:16px; z-index:30; display:none; align-items:center; gap:8px;
  background:var(--sp-red); color:#fff; padding:14px 20px; border-radius:999px; font-weight:800; box-shadow:var(--sp-shadow-red)}

/* ============================================================
   Header auth state + hero CTAs
   ============================================================ */
.sp-topbar__login{color:#cdd9e9; font-weight:700; font-size:14px; padding:8px 6px}
.sp-topbar__login:hover{color:#fff}
.sp-usermenu{display:flex; align-items:center; gap:8px}
.sp-useravatar{width:30px; height:30px; border-radius:50%; background:var(--sp-red); color:#fff;
  display:grid; place-items:center; font-weight:800; font-size:13px}
.sp-username{color:#fff; font-weight:700; font-size:14px}
.sp-logout{color:#9fb6d4; font-weight:700; font-size:13px; padding:6px 10px; border:1px solid var(--sp-navy-line); border-radius:8px}
.sp-logout:hover{color:#fff; background:rgba(255,255,255,.08)}

.sp-hero__cta{display:flex; align-items:center; gap:12px; margin-top:18px; flex-wrap:wrap}
.sp-hero__welcome{color:#dbe6f3; font-size:15px}
.sp-btn--light{background:#fff; color:var(--sp-red)}
.sp-btn--light:hover{background:#f3f5f9}
.sp-btn--onnavy{background:transparent; border-color:rgba(255,255,255,.55); color:#fff}
.sp-btn--onnavy:hover{background:rgba(255,255,255,.12)}

/* ============================================================
   Auth pages (login / register)
   ============================================================ */
.sp-authbody{min-height:100vh; background:linear-gradient(160deg,var(--sp-bg) 0%, var(--sp-red-tint) 100%);
  display:flex; flex-direction:column}
.sp-authback{position:absolute; top:18px; left:20px; font-weight:700; color:var(--sp-red); font-size:14px}
.sp-authback:hover{text-decoration:underline}
.sp-authmain{flex:1; display:grid; place-items:center; padding:64px 18px 40px}
.sp-authcard{width:100%; max-width:420px; background:var(--sp-surface); border:1px solid var(--sp-line);
  border-radius:var(--sp-r-xl); box-shadow:var(--sp-shadow-2); padding:30px 28px}
.sp-authcard--wide{max-width:560px}
.sp-authcard__brand{display:flex; flex-direction:column; align-items:center; gap:16px; margin-bottom:14px}
.sp-authcard__brand--center{margin-bottom:6px}
.sp-authbanner{border:2.5px solid var(--sp-red); color:var(--sp-red); border-radius:var(--sp-r-md);
  font-family:var(--sp-font-display); font-weight:700; text-align:center; padding:10px 18px;
  text-transform:uppercase; letter-spacing:.03em; font-size:17px; line-height:1.15}
.sp-authcard__title{text-align:center; font-size:26px; color:var(--sp-ink)}
.sp-authcard__sub{text-align:center; color:var(--sp-slate); margin:4px 0 20px; font-size:14px}
.sp-authform{display:flex; flex-direction:column; gap:14px}
.sp-authrow{display:flex; justify-content:flex-end; margin-top:-4px}
.sp-authcard__foot{text-align:center; margin:16px 0 0; font-size:14px; color:var(--sp-slate)}
.sp-authcard__foot a{color:var(--sp-red); font-weight:700}

.sp-inwrap{position:relative; display:block}
.sp-inwrap__ico{position:absolute; left:12px; top:50%; transform:translateY(-50%); width:18px; height:18px; color:var(--sp-slate-2)}
.sp-input--icon{padding-left:38px}
.sp-inwrap__eye{position:absolute; right:8px; top:50%; transform:translateY(-50%); background:none; border:none;
  font-size:16px; opacity:.55; padding:4px}
.sp-inwrap__eye:hover{opacity:1}
.sp-inwrap__eye.is-on{opacity:1}

.sp-or{display:flex; align-items:center; gap:12px; color:var(--sp-slate-2); font-size:13px; margin:4px 0}
.sp-or::before,.sp-or::after{content:''; flex:1; height:1px; background:var(--sp-line)}
.sp-btn--google{background:var(--sp-surface); border:1.5px solid var(--sp-line); color:var(--sp-ink-2)}
.sp-btn--google:not(:disabled):hover{background:var(--sp-bg-2)}
.sp-btn--google:disabled{opacity:.7; cursor:not-allowed}
.sp-g{font-family:var(--sp-font-display); font-weight:700; color:var(--sp-blue)}

.sp-check{display:flex; align-items:flex-start; gap:9px; font-size:13.5px; color:var(--sp-slate); cursor:pointer}
.sp-check input{margin-top:3px; width:16px; height:16px; accent-color:var(--sp-red)}
.sp-check a{color:var(--sp-red); font-weight:600}
.sp-check.is-invalid span{color:var(--sp-red)}

.sp-postingas{display:flex; align-items:center; gap:12px}
.sp-postingas strong{display:block; font-size:14px}
.sp-postingas small{color:var(--sp-slate-2); font-size:12px}
.sp-postingas__note{display:flex; align-items:center; gap:6px; font-size:13px; color:var(--sp-slate); margin:0 0 14px}
.sp-postingas__note .sp-ico{color:var(--sp-blue)}

/* Searchable combobox (country / port finder) */
.sp-combo{position:relative}
.sp-combo__input{width:100%; padding-right:34px; cursor:pointer}
.sp-combo__input:disabled{cursor:not-allowed; opacity:.65}
.sp-combo::after{content:''; position:absolute; right:15px; top:50%; width:8px; height:8px;
  border-right:2px solid var(--sp-slate-2); border-bottom:2px solid var(--sp-slate-2);
  transform:translateY(-70%) rotate(45deg); transition:transform .15s ease; pointer-events:none}
.sp-combo.is-open::after{transform:translateY(-30%) rotate(-135deg)}
.sp-combo__panel{position:absolute; z-index:60; left:0; right:0; top:calc(100% + 4px);
  background:var(--sp-surface); border:1px solid var(--sp-line); border-radius:var(--sp-r-md);
  box-shadow:var(--sp-shadow-2); overflow:hidden}
.sp-combo__list{list-style:none; margin:0; padding:4px; max-height:300px; overflow-y:auto; overscroll-behavior:contain}
.sp-combo__opt{padding:9px 12px; border-radius:8px; font-size:14px; line-height:1.2;
  color:var(--sp-ink-2); cursor:pointer}
.sp-combo__opt:hover,.sp-combo__opt.is-active{background:var(--sp-red-tint); color:var(--sp-red-deep)}
.sp-combo__empty{padding:14px 12px; font-size:13px; color:var(--sp-slate-2); text-align:center}

/* First-contribution invite (shown on review-less ports) */
.sp-firstcta{display:flex; align-items:center; gap:14px; padding:14px 16px;
  background:var(--sp-blue-soft); border-color:var(--sp-blue); margin-bottom:16px}
.sp-firstcta__ico{width:26px; height:26px; color:var(--sp-blue); flex:0 0 auto}
.sp-firstcta__txt{display:flex; flex-direction:column; gap:2px; flex:1; min-width:0}
.sp-firstcta__txt strong{font-size:15px}
.sp-firstcta__txt span{font-size:13px; color:var(--sp-slate)}

/* Neutral tag (e.g. shore leave "Not reported") */
.sp-tag--muted{background:var(--sp-line-2); color:var(--sp-slate)}

/* ============================================================
   Responsive
   ============================================================ */
.sp-show-mobile{display:none !important}

@media (max-width:920px){
  .sp-guide{grid-template-columns:1fr}
  .sp-guide__aside{position:static}
  .sp-deflist__row{grid-template-columns:1fr}
  .sp-deflist__row dt{margin-bottom:-8px}
}
@media (max-width:760px){
  .sp-hero{padding:24px 0}
  .sp-hero__brand{gap:16px; margin-bottom:18px}
  .sp-hero__copy h1{font-size:26px}
  .sp-finder{grid-template-columns:1fr}
  .sp-finder__actions{flex-direction:column}
  .sp-finder__actions .sp-btn{width:100%}
  .sp-topnav{display:none}
  .sp-hide-mobile{display:none !important}
  .sp-show-mobile{display:flex !important}
  .sp-fab{display:flex}
  .sp-main{padding-bottom:90px}
  .sp-topports{grid-template-columns:1fr}
  .sp-grid--2,.sp-grid--3,.sp-grid--3to1{grid-template-columns:1fr}
  .sp-footer__inner{grid-template-columns:1fr}
  .sp-shot{flex-basis:88%}
  .sp-form__actions{flex-direction:column-reverse}
  .sp-form__actions .sp-btn{width:100%}
  .sp-formhead{gap:14px}
  .sp-formhead h1{font-size:22px}
}
@media (max-width:420px){
  .sp-shell{padding-inline:14px}
  .sp-portbar{flex-direction:column; align-items:flex-start; gap:12px}
  .sp-portbar__edit{align-self:stretch; justify-content:center}
}

/* Honeypot anti-spam field — visually + interaction hidden, but not display:none
   (some bots skip display:none inputs; off-screen still gets auto-filled). */
.hp-field{position:absolute !important; left:-9999px !important; top:auto; width:1px; height:1px;
  opacity:0; pointer-events:none; z-index:-1}

/* ──────────────── PORT AUTO-SUGGEST — shared by the admin and contribute forms ──────────────── */
.portpick { position: relative; }
.portpick__hint {
    display: block;
    margin-top: 4px;
    font-size: 11.5px;
    color: var(--sp-slate-2);
}
.portpick__list {
    position: absolute;
    left: 0; right: 0;
    top: 100%;
    z-index: 40;
    max-height: 260px;
    overflow-y: auto;
    margin-top: 4px;
    background: var(--sp-surface);
    border: 1px solid var(--sp-line);
    border-radius: 10px;
    box-shadow: 0 12px 28px rgba(15, 23, 42, .16);
}
.portpick__item {
    display: flex;
    flex-direction: column;
    gap: 2px;
    width: 100%;
    padding: 9px 12px;
    border: 0;
    border-top: 1px solid var(--sp-line-2);
    background: none;
    text-align: left;
    cursor: pointer;
    font-family: inherit;
}
.portpick__item:first-child { border-top: 0; }
.portpick__item:hover,
.portpick__item.is-active { background: var(--sp-red-soft); }
.portpick__name { font-size: 13.5px; font-weight: 700; color: var(--sp-ink); }
.portpick__meta { font-size: 11.5px; color: var(--sp-slate); }
.portpick__empty { padding: 11px 12px; font-size: 12.5px; color: var(--sp-slate-2); }

/* ---------- Screen-reader-only text ----------
   The app had no such utility, so a visible <label> was the only way to give an
   input an accessible name — which meant fields that were visually labelled by
   their placeholder alone had no name at all. Placeholders are not labels: they
   vanish on focus and many screen readers ignore them. */
.sp-sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
  clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0}

/* ---------- Port search picker (partials/port-search.php) ----------
   A <details> so it opens with no JavaScript at all; the autocomplete is
   enhancement on top. */
.psearch{margin-top:10px}
.psearch__toggle{display:inline-flex; align-items:center; gap:6px; cursor:pointer;
  list-style:none; user-select:none}
.psearch__toggle::-webkit-details-marker{display:none}   /* Safari's default triangle */
.psearch__toggle svg{width:13px; height:13px}
/* The panel is the interesting bit, so give the open state a clear anchor. */
.psearch[open] > .psearch__toggle{margin-bottom:10px}
.psearch__panel{text-align:left}
.psearch__form{position:relative; display:flex; align-items:center; gap:9px;
  padding:11px 14px; border-radius:var(--sp-r-md);
  background:var(--sp-surface); border:1px solid var(--sp-line)}
.psearch__form:focus-within{border-color:var(--sp-red); box-shadow:0 0 0 3px var(--sp-red-tint)}
.psearch__ico{width:18px; height:18px; color:var(--sp-slate); flex:0 0 auto}
.psearch__input{flex:1 1 auto; min-width:0; border:0; outline:none; background:transparent;
  font-size:15px; color:var(--sp-ink); font-family:inherit}
.psearch__input::placeholder{color:var(--sp-slate)}
.psearch__hint{margin:8px 2px 0; font-size:12px; color:var(--sp-slate)}
.psearch__hint a{color:var(--sp-red); font-weight:600}

/* In "select" mode the suggestions are <button>s, which do not inherit the
   anchor styling the list was written for. */
button.msearch-ac__item{width:100%; border:0; background:none; font:inherit; cursor:pointer;
  text-align:left}