/* Report components on top of the oversight tokens. No colour is redefined here. */
.page{padding-top:120px;padding-bottom:80px;position:relative;z-index:2}
.nav-in{display:flex;align-items:center;height:72px}
.logo{display:flex;align-items:center;gap:11px;text-decoration:none;color:var(--text);margin-right:auto}
.logo .word{font-family:var(--mono);font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;font-weight:500;white-space:nowrap}
.logo .word b{color:var(--lime);font-weight:500}
.logo .word .sep{color:var(--dim)}
.logo .brand-logo-img{height:34px;width:auto;object-fit:contain;display:block}
.foot-logo{height:24px;width:auto;object-fit:contain;display:block;opacity:.9}
.leaflet-container svg{width:inherit;height:inherit}
/* the light-background variant exists in the brand assets; wired so a theme toggle would
   pick it up rather than showing dark artwork on a light page */
:root[data-theme="light"] .brand-logo-img{content:url("assets/logo-full-light.png")}

.hero{padding:34px 0 10px;max-width:900px;min-height:auto;display:block}
.hero-inner{display:block}
/* tokens.css centres a full-viewport hero for the marketing pages; the report pages are
   content-first, so the viewport-height flex centring is neutralised here. */
.hero .glow,.hero .radar,.hero .grid-bg,.hero .sea{display:none}
.page-head{padding:26px 0 4px;max-width:880px}
.coord{font-family:var(--mono);font-size:.64rem;letter-spacing:.16em;color:var(--dim);text-transform:uppercase;
  margin-bottom:20px;display:flex;gap:10px;flex-wrap:wrap}
.coord b{color:var(--lime);font-weight:500}
.coord-sep{opacity:.5}
.hero .sub,.page-head .sub{font-size:1.05rem;color:var(--mut);max-width:760px;margin:20px 0 30px;line-height:1.8}
.cta-row{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:22px}
.btn{display:inline-flex;align-items:center;gap:9px;font-weight:600;font-size:.95rem;padding:14px 26px;
  border-radius:12px;text-decoration:none;transition:.2s}
.btn.primary{background:var(--lime);color:var(--void);box-shadow:0 0 26px rgba(168,213,6,.28)}
.btn.primary:hover{background:var(--lime2)}
.btn.ghost{border:1px solid rgba(255,255,255,.18);color:var(--text)}
.btn.ghost:hover{border-color:var(--lime);color:var(--lime)}

.sec-title{font-family:var(--serif);font-weight:400;font-size:clamp(1.6rem,3vw,2.2rem);letter-spacing:-.01em;
  margin:56px 0 18px;padding-bottom:12px;border-bottom:1px solid var(--line)}
h1{font-family:var(--serif);font-weight:400;font-size:clamp(2.4rem,5vw,3.7rem);line-height:1.03;letter-spacing:-.01em}
h1 em{font-style:italic;color:var(--lime)}
h3{font-family:var(--serif);font-weight:500}

.metrics{display:grid;grid-template-columns:repeat(auto-fit,minmax(158px,1fr));gap:0;border:1px solid var(--line);
  border-radius:18px;overflow:hidden;background:var(--panel);margin-top:26px}
.met{padding:26px 22px;border-right:1px solid var(--line)}
.met:last-child{border-right:none}
.met .num{font-family:var(--serif);font-size:2.6rem;color:var(--lime);line-height:1;font-weight:400}
.met .lbl{font-family:var(--mono);font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);margin:9px 0 5px}
.met .desc{font-size:.8rem;color:var(--mut);line-height:1.55}

.grid-3{display:grid;grid-template-columns:repeat(auto-fit,minmax(258px,1fr));gap:14px}
.card{background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:22px 24px;margin:14px 0}
.card h3{font-size:1.25rem;margin-bottom:8px;line-height:1.2}
.card p{color:var(--mut);font-size:.9rem;line-height:1.7}
.card.link{text-decoration:none;display:block;transition:border-color .2s,box-shadow .2s;
  /* tokens.css has no global anchor rule, so an <a> card falls back to the browser default link
     colour and the title inherits it. Set it explicitly rather than leaving it to the UA. */
  color:inherit}
.card.link h3{transition:color .18s}
.card.link:hover h3{color:var(--lime)}
.card.link:hover{border-color:var(--lime-dim);box-shadow:0 0 24px rgba(168,213,6,.12)}
.chip{display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:.6rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--lime);margin-top:12px}
.chip::after{content:'\2192'}
ul.tight{padding-left:20px}
ul.tight li{color:var(--mut);font-size:.92rem;line-height:1.75;margin-bottom:9px}
ul.tight li b{color:var(--text)}

.callout{padding:15px 18px;border-radius:0 12px 12px 0;margin:14px 0;font-size:.93rem;line-height:1.7}
.callout.alert{border-left:3px solid var(--alert-red);background:rgba(232,140,122,.07);color:var(--text)}
.callout.warn{border-left:3px solid #ebb432;background:rgba(235,180,50,.06);color:var(--text)}
/* the paragraph that has to land: same shape as the other callouts, in the brand lime */
.callout.key{border-left:3px solid var(--lime);background:rgba(168,213,6,.07);color:var(--lime);
  font-size:.98rem;line-height:1.8}
.hero .sub b,.page-head .sub b{color:var(--lime);font-weight:600}
.callout.key b,.callout.key strong{color:var(--lime);font-weight:600}

.dim{color:var(--mut)}
.mono{font-family:var(--mono);font-size:.78rem}

.controls{display:flex;gap:9px;flex-wrap:wrap;align-items:center;margin:20px 0 12px}
input[type=search],select{background:var(--void);border:1px solid var(--line);border-radius:11px;padding:11px 14px;
  color:var(--text);font-size:.9rem;font-family:var(--sans);min-width:180px}
/* tokens.css sets width:100% on inputs and selects for the site's contact forms, which
   stacks every filter onto its own row here. Scope the layout back for the filter row. */
.controls input[type=search],.controls select{width:auto}
.controls input[type=search]{flex:1 1 320px;min-width:240px}
.controls select{flex:0 1 auto;min-width:168px}
.controls #count{flex:0 0 auto;margin-left:auto}
.table-wrap{border:1px solid var(--line);border-radius:16px;overflow:auto;max-height:620px;background:var(--panel)}
table{width:100%;border-collapse:collapse;font-size:.86rem}
th,td{text-align:left;padding:11px 14px;border-bottom:1px solid var(--line);vertical-align:top}
th{position:sticky;top:0;background:var(--panel2);color:var(--dim);font-family:var(--mono);font-size:.6rem;
  letter-spacing:.14em;text-transform:uppercase;z-index:1}
tbody tr:hover{background:var(--panel2)}
.tag{display:inline-block;font-family:var(--mono);font-size:.56rem;letter-spacing:.08em;padding:3px 8px;
  border-radius:999px;border:1px solid var(--line);margin:1px 4px 1px 0;white-space:nowrap;text-transform:uppercase}
.tA{border-color:var(--alert-red);color:var(--alert-red);background:rgba(232,140,122,.1)}
.tB{border-color:#ebb432;color:#ebb432;background:rgba(235,180,50,.1)}
.tC{border-color:var(--dim);color:var(--mut)}
.tN{color:var(--dim)}
code{font-family:var(--mono);font-size:.76rem;background:var(--void);border:1px solid var(--line);border-radius:5px;
  padding:2px 6px;color:var(--lime);word-break:break-all}

.map-card{padding:18px 18px 12px}
.map-head{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:12px}
.eyebrow{font-family:var(--mono);font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;color:var(--dim)}
.legend{display:flex;gap:14px;flex-wrap:wrap;font-size:.76rem;color:var(--mut)}
.legend span{display:inline-flex;align-items:center;gap:6px}
.dot{width:9px;height:9px;border-radius:50%;display:inline-block}
.route#vmap{width:100%;height:min(72vh,660px);border-radius:14px;overflow:hidden;background:#0b0d0b;z-index:1}
.map-fallback{padding:24px;color:var(--mut);font-size:.9rem;line-height:1.7}
/* deliberately no global svg sizing rule: Leaflet's marker pane is an <svg> with explicit
   dimensions, and forcing width/height on it makes every vessel marker disappear. */
.map-card{position:relative}
/* The vessel record sits below the map, not over it: the full per-vessel field set is too
   much for an overlay, and covering the geography defeats the point of showing it. */
.detail-card{margin:16px 0 14px;scroll-margin-top:88px}
.detail-head{display:flex;justify-content:space-between;align-items:center;gap:14px;margin-bottom:6px}
#detail-close{background:none;border:1px solid var(--line);color:var(--dim);font-size:1rem;line-height:1;
  cursor:pointer;padding:5px 10px;border-radius:8px;transition:.2s}
#detail-close:hover{color:var(--lime);border-color:var(--lime-dim)}
.detail-card.empty #detail-close{display:none}
.detail-card h4{font-family:var(--serif);font-size:1.6rem;font-weight:500;margin:6px 0 4px}
.detail-sub{color:var(--dim);font-family:var(--mono);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase}
.detail-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(330px,1fr));gap:26px 30px;margin-top:20px}
.detail-block{min-width:0}
.detail-block h5{font-family:var(--mono);font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--lime);margin-bottom:10px}
.kv{display:grid;grid-template-columns:148px 1fr;gap:3px 14px;font-size:.88rem}
.detail-block .kv{grid-template-columns:126px 1fr}
.kv div:nth-child(odd){color:var(--dim)}
.kv div:nth-child(even){overflow-wrap:anywhere}
.kv div{line-height:1.6}
.kv .sec{margin-top:8px}
.ev{border-top:1px solid var(--line);padding-top:14px;margin-top:14px}
.ev:first-of-type{border-top:none;padding-top:0;margin-top:0}
.ev-h{font-family:var(--mono);font-size:.74rem;color:var(--text);letter-spacing:.04em;margin-bottom:9px}
.ev-h b{color:var(--lime);font-weight:500}
code{font-family:var(--mono);font-size:.74rem;background:rgba(255,255,255,.045);border:1px solid var(--line);
  border-radius:6px;padding:2px 6px;display:inline-block;margin:0 4px 5px 0;overflow-wrap:anywhere}
.caveat{font-size:.78rem;color:var(--dim);line-height:1.65;border-left:2px solid var(--line);
  padding-left:11px;margin-top:10px;max-width:640px}
.tag-row{margin:10px 0 2px}
#tbl tbody tr{cursor:pointer}
#tbl tbody tr:hover{background:rgba(168,213,6,.055)}
#tbl tbody tr.sel{background:rgba(168,213,6,.1);box-shadow:inset 3px 0 0 var(--lime)}
.row-hint{font-size:.8rem;color:var(--dim);margin-top:9px}
.idchip{font-family:var(--mono);font-size:.58rem;letter-spacing:.08em;text-transform:uppercase;
  padding:3px 7px;border-radius:6px;border:1px solid var(--line);color:var(--dim);white-space:nowrap}
.idchip.i-registry{color:var(--lime);border-color:var(--lime-dim)}
.idchip.i-geolocated{color:#9fd4c2;border-color:rgba(159,212,194,.35)}
.idchip.i-match_withheld{color:#ebb432;border-color:rgba(235,180,50,.35)}
.kv div:nth-child(odd){color:var(--dim);font-family:var(--mono);font-size:.72rem;text-transform:uppercase;letter-spacing:.08em}
.detail-card h4{font-family:var(--serif);font-size:1.25rem;font-weight:500;margin-bottom:8px}

footer{border-top:1px solid var(--line);margin-top:60px;padding:34px 0;position:relative;z-index:2}
.foot-in{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;align-items:center}
.foot-note{display:flex;align-items:center;gap:10px;color:var(--dim);font-size:.8rem}
.foot-tags{display:flex;gap:16px;flex-wrap:wrap;font-family:var(--mono);font-size:.62rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--dim)}
.section-head{font-family:var(--mono);font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;color:var(--lime);
  margin:30px 0 10px}

.tier{display:inline-block;font-family:var(--mono);font-size:.54rem;letter-spacing:.08em;
  text-transform:uppercase;padding:2px 7px;border-radius:999px;border:1px solid var(--line);
  margin-left:7px;vertical-align:middle;color:var(--dim)}
.tier-owner{color:#a8d506;border-color:rgba(168,213,6,.45)}
.tier-yard{opacity:.7}
.surf{display:flex;gap:9px;align-items:baseline;margin:5px 0;flex-wrap:wrap}
.surf .h{font-family:var(--mono);font-size:.76rem}
.surf .dead{opacity:.45;text-decoration:line-through}

/* The red team chain: a sequence, not a grid of features. Class names are prefixed rt- because
   tokens.css already styles .step, .step h3 and .step p for the brand's centred marketing stepper,
   which the first version of this silently inherited: it centred the text and fought the type
   scale. Anything shared with the theme's own components must be renamed, not overridden. */
/* The red team accent. It marks the page whose subject is the attacker, and nothing else: the
   lime stays reserved for controls that exist, so red never means "verified" and green never means
   "safe". Defined for both themes in case a toggle is ever added to these pages. */
:root{--rt-red:var(--alert-red);--rt-red-hot:var(--alert-red);
  --rt-red-subtle:rgba(232,140,122,.12);--rt-red-dim:rgba(232,140,122,.38)}
:root[data-theme="light"]{--rt-red:var(--alert-red);--rt-red-hot:var(--alert-red);
  --rt-red-subtle:rgba(179,56,46,.10);--rt-red-dim:rgba(179,56,46,.30)}
.nav-links a.rt{color:var(--rt-red)}
.nav-links a.rt:hover{color:var(--rt-red-hot);background:var(--rt-red-subtle)}
.nav-links a.rt.active{color:var(--rt-red-hot);background:var(--rt-red-subtle)}
.rt-accent,.coord .rt-accent,h1 .rt-accent,h1 em.rt-accent{color:var(--rt-red)}
/* report.css already colours .coord b and h1 em lime; a bare class cannot beat those selectors,
   which is why the two page accents stayed lime until they were given equal-or-higher weight. */

/* firm rows on the entities page: collapsed by default so 50-odd firms read as an index */
h3.grp{font-family:var(--serif);font-weight:400;font-size:1.35rem;margin:34px 0 2px;
  padding-bottom:8px;border-bottom:1px solid var(--line)}
h3.grp .dim{font-family:var(--mono);font-size:.8rem;margin-left:8px}
p.grp-note{margin:6px 0 12px;font-size:.84rem;line-height:1.6;max-width:820px}
details.firm{background:var(--panel);border:1px solid var(--line);border-radius:14px;margin:8px 0;
  padding:0 18px}
details.firm>summary{cursor:pointer;padding:14px 0;display:grid;
  grid-template-columns:10px minmax(150px,240px) 1fr auto;gap:12px;align-items:baseline;list-style:none}
details.firm>summary::-webkit-details-marker{display:none}
/* The caret is drawn with borders and is its own grid cell. A generated content glyph was tried
   first and rendered as a missing-glyph box sitting on the domain text, because the marker font
   does not carry it and absolute positioning put it over the first column. */
.caret{width:0;height:0;border-left:6px solid var(--dim);border-top:5px solid transparent;
  border-bottom:5px solid transparent;align-self:center;transition:transform .15s}
details.firm[open] .caret{transform:rotate(90deg)}
details.firm>summary:hover .firm-dom{color:var(--lime)}
.firm-dom{font-family:var(--mono);font-size:.84rem;color:var(--text)}
.firm-who{font-size:.9rem;color:var(--mut)}
.firm-counts{font-family:var(--mono);font-size:.68rem;color:var(--dim);text-align:right;white-space:nowrap}
.firm-body{padding:2px 0 16px;border-top:1px solid var(--line)}
.firm-body .tag{display:inline-block;font-family:var(--mono);font-size:.62rem;letter-spacing:.04em;
  padding:3px 8px;border:1px solid var(--line);border-radius:999px;color:var(--mut);margin:0 6px 6px 0}
.firm-body code{font-size:.76rem;color:var(--mut);margin-right:8px;word-break:break-all}
@media(max-width:900px){
  details.firm>summary{grid-template-columns:10px 1fr;gap:2px 10px}
  .firm-who,.firm-counts{grid-column:2}
  .firm-counts{text-align:left}
}

.rt-chain{position:relative;margin:28px auto 6px;max-width:1000px;text-align:left}
.rt-chain::before{content:'';position:absolute;left:25px;top:32px;bottom:32px;width:1px;background:var(--line)}
.rt-step{position:relative;display:grid;grid-template-columns:52px 1fr;gap:24px;padding:0 0 30px;text-align:left}
.rt-step:last-child{padding-bottom:0}
.rt-num{position:relative;z-index:1;width:52px;height:52px;border:1px solid var(--rt-red-dim);
  border-radius:50%;background:var(--void);display:flex;align-items:center;justify-content:center;
  font-family:var(--mono);font-size:.92rem;letter-spacing:.08em;color:var(--rt-red)}
.rt-num.blank{border-style:dashed;color:var(--dim);border-color:var(--line)}
.rt-body{padding-top:2px;text-align:left}
.rt-body h3,.rt-body h4{font-family:var(--serif);font-weight:500;font-size:1.6rem;margin:0 0 14px;
  line-height:1.2;text-align:left}
.rt-line{display:grid;grid-template-columns:96px 1fr;gap:18px;padding:9px 0;text-align:left}
.rt-line + .rt-line{border-top:1px solid rgba(255,255,255,.05)}
.rt-label{font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--dim);padding-top:5px;text-align:left}
.rt-line p{margin:0;color:var(--mut);font-size:1.05rem;line-height:1.75;text-align:left}
.rt-line.control .rt-label{color:var(--lime)}
.rt-line.open .rt-label{color:var(--dim);opacity:.75}
.rt-line.control p b{color:var(--text)}

@media(max-width:900px){
  .page{padding-top:96px}
  .nav-links{display:none}
  .met{border-right:none;border-bottom:1px solid var(--line)}
  .rt-chain::before{left:17px}
  .rt-step{grid-template-columns:40px 1fr;gap:14px}
  .rt-num{width:40px;height:40px;font-size:.72rem}
  .rt-line{grid-template-columns:1fr;gap:3px}
  .rt-label{padding-top:0}
  .rt-body h3,.rt-body h4{font-size:1.3rem}
}