/* ============================================================
   Maritime Organizations Database - stylesheet
   ------------------------------------------------------------
   Same design language and the same grid as the Average Shore
   Power Demand Database: white header with a navy rule under it,
   Poppins throughout, a 1300px content column split into a free
   track and a fixed 300px selection column, hairline bordered
   panels, square corners, uppercase 11px section bands. Tokens,
   header, split, panel, control, table and footer declarations are
   lifted from shore-power-database/public/styles.css rather than
   approximated, so the two tools sit next to each other without
   drifting.
   ============================================================ */

/* ===== tokens ===== */
:root {
  --navy: #0A1543;
  --green: #2f9e6f;
  --grey: #aab2c2;
  --line: #e6e9f0;
  --soft: #f6f7fa;
  --bg: #fff;

  --ink: #15151a;
  --ink-soft: #3d3d47;
  --ink-muted: #6b6b75;
  --rule2: rgba(10, 21, 67, .12);
  --rule2-soft: rgba(10, 21, 67, .06);
  /* The structural seam under the header. Deliberately a separate
     token from --rule2, which draws table rows and panel borders:
     those are fine faint, this one has to be seen. One value to
     dial if the header wants more or less presence. */
  --rule-band: rgba(10, 21, 67, .38)
}

* {
  box-sizing: border-box
}

body {
  font-family: 'Poppins', sans-serif;
  color: var(--navy);
  background: var(--bg);
  margin: 0;
  font-size: 14px;
  line-height: 1.55
}

h3 {
  font-weight: 600;
  margin: 0
}

/* Shore power's own width. 1300 - 52 padding - 300 sidebar - 26
   gap leaves 922px for the table, which is what six columns of
   text need once the email addresses are in. */
.wrap {
  max-width: 1300px;
  margin: 0 auto;
  padding: 0 26px
}

a {
  color: var(--green);
  text-decoration: none
}

.hidden {
  display: none !important
}

/* ===== header ===== */
/* The Decarbonizer's header: white, brand left, closed by the band
   rule rather than by a 3px navy border.

   Centred in the same 1300px column as the content below it, with
   the same 26px gutter, so the rule starts at the left edge of the
   organization table and ends at the right edge of the selection
   column. It used to span the whole viewport while the body sat in
   a 1300px column.

   The rule is drawn by ::after, inset to the gutter. NOT a
   border-bottom: a border spans the whole BORDER BOX, which is the
   full 1300px, while the content column is 1300 minus the two 26px
   gutters, so a border would sit 26px proud of the content at each
   end. The box-shadow goes with it for the same reason: it also
   spanned the full box and drew a faint line across the 26px at
   each end that the rule no longer covers. */
.dz-header {
  max-width: 1300px;
  margin: 0 auto;
  background: #fff;
  color: var(--ink);
  padding: 19px 26px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  border-bottom: 0;
  box-shadow: none
}

.dz-header::after {
  content: '';
  position: absolute;
  left: 26px;
  right: 26px;
  bottom: 0;
  border-bottom: 1px solid var(--rule-band)
}

.dz-left {
  display: flex;
  align-items: baseline;
  gap: 16px;
  flex-wrap: wrap
}

.dz-brand {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap
}

.dz-mark {
  font-weight: 600;
  font-size: 1.25rem;
  letter-spacing: -.01em;
  color: var(--navy)
}

.dz-product {
  font-size: .9rem;
  color: var(--ink-soft)
}

.dz-product strong {
  color: var(--navy);
  font-weight: 600
}

/* ===== panels ===== */
/* Air below the header rule, mirroring the space shore power puts
   between its band and the panel headings under it. */
#panelViews {
  padding-top: 26px
}

.split {
  display: grid;
  /* minmax(0, 1fr), not 1fr: a bare 1fr is minmax(auto, 1fr) and
     grows to its content's min-content width, which the six-column
     table exceeds. That would widen the whole page. */
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 26px;
  align-items: start
}

.acc-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 0 12px
}

.acc-head h3 {
  font-size: 16px
}

.acc-body {
  border: 1px solid var(--line);
  padding: 20px
}

.band {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .5px;
  text-transform: uppercase;
  color: var(--grey);
  margin: 0 0 10px
}

.note {
  font-size: 11px;
  color: #8a93a8;
  font-style: italic;
  margin-top: 14px;
  border-top: 1px solid var(--line);
  padding-top: 9px
}

/* ===== controls column ===== */
.controls {
  border: 1px solid var(--line);
  padding: 18px
}

.field {
  margin-bottom: 13px
}

.field:last-child {
  margin-bottom: 0
}

label {
  display: block;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .06em;
  color: var(--ink-muted);
  margin-bottom: 5px;
  text-transform: uppercase
}

input[type=search] {
  width: 100%;
  font-family: inherit;
  font-size: 13px;
  padding: 7px 8px;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--navy);
  border-radius: 0
}

input:focus {
  outline: 1px solid var(--navy);
  border-color: var(--navy)
}

/* The chart and the search each close with a rule, so the column
   reads as three jobs rather than one long strip. */
.chartfield,
.searchfield {
  padding-bottom: 15px;
  margin-bottom: 15px;
  border-bottom: 1px solid var(--line)
}

.chart-count {
  font-size: 11px;
  color: var(--ink-muted);
  font-variant-numeric: tabular-nums;
  margin: -6px 0 6px
}

.chartbox {
  position: relative;
  /* a Chart.js canvas will not shrink below its own width without
     this, which re-breaks the grid track it sits in */
  min-width: 0;
  /* Six slices with the legend below them. Shorter and the legend
     squeezes the pie to nothing in a 264px box. */
  height: 250px
}

/* ===== filter groups ===== */
.filtergroup {
  margin-bottom: 15px
}

.filtergroup:last-child {
  margin-bottom: 0
}

.checks {
  border: 1px solid var(--line)
}

/* Clipped to the first five options plus Select all, so three
   filter lists fit one screen. The showall button lifts it. */
.checks.clipped .check:nth-child(n+7) {
  display: none
}

/* House check pattern, as the vessel database uses it: the box
   leads, the label follows, and .off quiets the whole row while it
   is cleared. The row is the control, so the whole strip is the hit
   area rather than the 14px box.

   A check row IS a <label>, so it inherits the controls column's
   field-label rule above (uppercase, 10.5px, muted, block). Every
   one of those is undone here; without this the option names read
   as field labels rather than as values. */
.check {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0;
  padding: 6px 9px;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: normal;
  text-transform: none;
  color: var(--navy);
  border-bottom: 1px solid var(--line);
  cursor: pointer;
  transition: background .14s, color .14s
}

.check:last-child {
  border-bottom: 0
}

.check:hover {
  background: var(--soft)
}

.check.all {
  font-weight: 500;
  border-bottom: 1.5px solid var(--navy)
}

/* A cleared filter stays legible but stops competing with the ones
   still doing work. */
.check.off {
  color: var(--grey)
}

.check.off:hover {
  color: var(--ink-soft)
}

/* An option no organization sits behind. Struck through rather than
   hidden, so the empty category stays visible as a gap in the data
   and is not mistaken for a filter that is simply switched off. */
.check.empty span {
  color: var(--grey);
  text-decoration: line-through;
  text-decoration-color: var(--rule2)
}

.check input {
  width: 14px;
  height: 14px;
  margin: 0;
  accent-color: var(--navy);
  cursor: pointer;
  flex: none
}

.check input:focus-visible {
  outline: 1px solid var(--navy);
  outline-offset: 2px
}

/* Sits under its list as a continuation of it, not as a second
   control: one hairline box, no gap, top border shared. */
.showall {
  width: 100%;
  display: block;
  border: 1px solid var(--line);
  border-top: 0;
  background: var(--soft);
  color: var(--ink-muted);
  font-family: inherit;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 6px 9px;
  cursor: pointer;
  border-radius: 0
}

.showall:hover {
  color: var(--navy);
  border-color: var(--rule2)
}

.showall:focus-visible {
  outline: 1px solid var(--navy);
  outline-offset: -1px
}

/* A list short enough to show whole needs no button. */
.showall.hidden {
  display: none !important
}

/* ===== table ===== */
table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px
}

.orgtable {
  table-layout: fixed
}

.orgtable th,
.orgtable td {
  text-align: left;
  padding: 7px 9px;
  font-size: 11.5px;
  vertical-align: top;
  white-space: normal;
  word-break: break-word;
  border-bottom: 1px solid var(--line)
}

.orgtable thead th {
  font-weight: 600;
  color: #41506f;
  font-size: 10.5px;
  line-height: 1.3;
  vertical-align: bottom;
  border-bottom: 1.5px solid var(--navy);
  position: sticky;
  top: 0;
  background: #fff;
  z-index: 1;
  padding: 0
}

/* The whole heading is the sort control, so it is a button rather
   than a click handler on the cell: it reaches by keyboard and
   announces itself. */
.orgtable thead th button {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 7px 9px;
  border: 0;
  background: none;
  font: inherit;
  font-weight: 600;
  color: inherit;
  text-align: left;
  cursor: pointer
}

.orgtable thead th button:hover {
  color: var(--navy)
}

.orgtable thead th button:focus-visible {
  outline: 1px solid var(--navy);
  outline-offset: -1px
}

.sortmark {
  font-size: 7px;
  line-height: 1;
  color: var(--grey)
}

.sortmark::after {
  content: '\25B2\FE0E'
}

.orgtable th[data-dir] .sortmark {
  color: var(--navy)
}

.orgtable th[data-dir="desc"] .sortmark::after {
  content: '\25BC\FE0E'
}

.orgtable tbody tr:hover {
  background: var(--soft)
}

.orgtable tbody td:first-child a {
  color: var(--navy);
  text-decoration: underline;
  text-underline-offset: 2px
}

.orgtable tbody td:first-child a:hover {
  color: var(--green)
}

.orgtable td.blank {
  color: var(--grey)
}

/* ===== withheld columns (free tier) ===== */
/* Show everything, gate the use. The column keeps its place and its
   name so the reader can see what is recorded and what premium
   would give them; only the value is withheld.

   Quieter than a dash, and deliberately different from one: a dash
   means the database does not hold the value, "Premium" means it
   holds it and does not hand it over. Two facts, two treatments. */
.orgtable td.gated {
  color: var(--grey);
  font-style: italic;
  letter-spacing: .01em
}

/* The locked heading. No button, because there is no sort: a column
   of one repeated word has no order, and ordering rows by a value
   the reader cannot see is exactly what the Worker refuses. */
.orgtable thead th.gated-col {
  color: var(--ink-muted);
  cursor: help
}

.orgtable thead th.gated-col .colhead {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 7px 9px
}

/* Drawn as a mask so it takes currentColor and needs no image. */
.lock {
  display: inline-block;
  width: 10px;
  height: 10px;
  flex: none;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,<svg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='2.2'%20stroke-linecap='round'%20stroke-linejoin='round'><rect%20x='4'%20y='10.5'%20width='16'%20height='10.5'/><path%20d='M8%2010.5V7a4%204%200%200%201%208%200v3.5'/></svg>") center / 10px 10px no-repeat;
  mask: url("data:image/svg+xml,<svg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='2.2'%20stroke-linecap='round'%20stroke-linejoin='round'><rect%20x='4'%20y='10.5'%20width='16'%20height='10.5'/><path%20d='M8%2010.5V7a4%204%200%200%201%208%200v3.5'/></svg>") center / 10px 10px no-repeat
}

/* ===== upgrade route (free tier) ===== */
/* One route, in the slot the header's space-between already leaves
   empty. Not a nag on every gated cell. */
.dz-right {
  display: flex;
  align-items: center;
  gap: 10px
}

.dz-upgrade {
  font-size: 12.5px;
  font-weight: 500;
  color: var(--navy);
  border: 1px solid var(--rule2);
  background: #fff;
  padding: 8px 14px;
  border-radius: 0;
  white-space: nowrap;
  transition: border-color .15s, background .15s
}

.dz-upgrade:hover {
  border-color: var(--navy);
  background: var(--soft)
}

.dz-upgrade:focus-visible {
  outline: 2px solid var(--navy);
  outline-offset: 2px
}

/* Taller than shore power's 520. The selection column now carries
   the chart, the search and three filter lists and runs to roughly
   900px; at 520 the list panel ended a third of the way up it and
   the page read as one long column with a stub beside it. */
.tablescroll {
  max-height: 780px;
  overflow: auto
}

.orgtable col.c-org { width: 19% }
.orgtable col.c-type { width: 19% }
.orgtable col.c-meas { width: 14% }
.orgtable col.c-scale { width: 11% }
.orgtable col.c-email { width: 24% }
.orgtable col.c-phone { width: 13% }

.foot {
  color: var(--ink-muted);
  font-size: 11.5px;
  text-align: center;
  padding: 26px 0 34px
}

/* ===== responsive ===== */
@media (max-width: 860px) {
  .split {
    grid-template-columns: 1fr
  }

  .orgtable {
    min-width: 640px
  }

  .dz-header {
    flex-wrap: wrap;
    gap: 12px
  }
}

@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important
  }
}