/* ============================================================
   Sustainable Ships Database - stylesheet
   ------------------------------------------------------------
   Same design language as the Average Shore Power Demand
   Database, which in turn follows Decarbonizer v22.9: white
   header with a navy rule under it, Poppins throughout, 1300px
   content column, de-boxed accordion subsections, the filters in
   a 300px column beside the content.

   Declarations are lifted from shore-power-database/public/
   styles.css rather than approximated, so type sizes, box
   heights, borders and spacing match rather than resemble.

   What is deliberately absent, because this page does not have
   it: the band of metric blocks and its dotted spine, the chart
   boxes, the three-up grid, the view select and the methodology
   panel.
   ============================================================ */

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

  --ink: #15151a;
  --ink-soft: #3d3d47;
  --ink-muted: #6b6b75;
  --rule2: rgba(10, 21, 67, .12);
  --rule2-soft: rgba(10, 21, 67, .06);
  /* The seam under the header. Same value as the Decarbonizer's, so the
     two tools draw the same line. */
  --rule-band: rgba(10, 21, 67, .38);

  /* The air at the TOP of every subsection body, so a subsection is
     not lopsided: content sits as far below its own header as the
     body's own bottom padding plus the next header's top padding
     sits above the next one. One number retunes the whole page. */
  --sub-top: 50px
}

* {
  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
}

/* Wider than shore power's 1300px, which was itself widened from
   Decarbonizer's 1180px. Nine columns of vessel text did not fit
   in 1300 and the list scrolled sideways to reach the flag column.
   1560 - 52 padding - 300 sidebar - 26 gap leaves 1182px for the
   panel and 1142px for the list, which holds all nine columns
   with no horizontal scroll. The selection column sits that much
   further right as a result. */
.wrap {
  max-width: 1560px;
  margin: 0 auto;
  padding: 0 26px
}

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

.hidden {
  display: none !important
}

.muted {
  color: var(--grey)
}

/* ===== header ===== */
/* Centred in the same 1560px column as the content, with the same 26px
   gutter, so the header sits over the tool rather than across the page.
   It used to run the full viewport width with a 3px navy rule, which on a
   wide screen drew a heavy line well past both edges of the list below it.
   Same treatment as the Decarbonizer's header, and the same seam tone. */
.dz-header {
  background: #fff;
  color: var(--ink);
  max-width: 1560px;
  margin: 0 auto;
  padding: 19px 26px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  /* The rule is drawn by ::after, inset to the gutter. A border-bottom
     spans the whole border box, which is 1560px, while the content column
     is 1560 minus the two 26px gutters - so a border would still sit 26px
     proud at each end. The shadow went with it: it spanned the same box
     and drew a faint line across exactly that overhang. */
  border-bottom: 0;
  box-shadow: none
}

/* The header rule: one hairline, starting at the left edge of the vessel
   list and ending at the right edge of the upgrade button, at every width
   rather than only at 1560px. */
.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
}

.dz-right {
  display: flex;
  align-items: center;
  gap: 10px
}

.dz-save {
  background: var(--navy);
  color: #fff;
  border: 0;
  padding: 9px 16px;
  border-radius: 0;
  font-family: inherit;
  font-size: .85rem;
  font-weight: 500;
  cursor: pointer
}

.dz-save:hover {
  background: #16224f
}

/* ===== panels ===== */
/* Mirrors the air shore power leaves under its closing rule, so
   the panel headings sit off the header rule rather than against
   it. */
#panelList {
  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 vessel
     list exceeds, widening the whole page. */
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 26px;
  align-items: start
}

/* De-boxed. A subsection is a bare label plus its toggle pills,
   with the content flowing on the page. The frame and the rule
   under the head bar are gone; spacing does the separating. */
.acc {
  border: 0;
  margin-bottom: 30px
}

/* A closed subsection is one line of a list, so consecutive closed
   ones press together. */
.acc.closed {
  margin-bottom: 8px
}

.acc.closed .acc-body {
  display: none
}

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

/* Only a head that carries the pills answers the mouse. The list
   and the filter column are plain headings. */
.acc > .acc-head {
  cursor: pointer;
  user-select: none
}

.acc-head h3 {
  font-weight: 500;
  font-size: 1.05rem;
  color: var(--navy)
}

.acc-head-r {
  display: flex;
  align-items: center;
  gap: 16px
}

.acc-toggle {
  display: flex;
  gap: 6px
}

/* Pills: a deliberate exception to the square-corner house rule.
   Up is always left and always closes, down is always right and
   always opens; the lit one is the action available. */
.acc-toggle button {
  width: 42px;
  height: 26px;
  border: 1px solid var(--rule2);
  background: #fff;
  color: var(--ink-muted);
  font-family: inherit;
  font-size: 10px;
  line-height: 1;
  cursor: pointer;
  border-radius: 999px
}

.acc-toggle button.on {
  background: var(--navy);
  color: #fff;
  border-color: var(--navy)
}

.acc-toggle button:disabled {
  cursor: default
}

.acc-body {
  border: 0;
  padding: var(--sub-top) 0 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;
  white-space: pre-line
}

/* ===== controls column ===== */
.field {
  margin-bottom: 13px
}

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

/* Not shouted. Uppercase, letter-spaced labels were the only
   capitalised type on the page; a parameter label reads at the same
   size as the value beside it. */
label {
  display: block;
  font-size: 12px;
  font-weight: 400;
  color: var(--ink-soft);
  margin-bottom: 6px
}

input[type=text],
input[type=search],
select {
  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,
select:focus {
  outline: 1px solid var(--navy);
  border-color: var(--navy)
}

/* The three capability checkboxes. They filter on presence of a
   record, so they sit together as one field rather than three,
   closed off by the same hairline the view select uses in shore
   power. */
.checks {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  padding-bottom: 15px;
  margin-bottom: 15px;
  border-bottom: 1px solid var(--line)
}

.check {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--navy);
  cursor: pointer;
  margin: 0
}

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

.check.off {
  color: var(--grey)
}

/* ===== the vessel list ===== */
table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
  font-variant-numeric: tabular-nums
}

th,
td {
  text-align: left;
  padding: 6px 9px;
  border-bottom: 1px solid var(--line)
}

thead th {
  font-weight: 600;
  color: #41506f;
  border-bottom: 1.5px solid var(--navy);
  position: sticky;
  top: 0;
  background: #fff;
  z-index: 1;
  padding: 0
}

/* 11.5px and wrapping rather than one nowrap line per cell: nine
   columns of vessel text cannot hold a 61-character operator name
   on one line, and clipping to an ellipsis loses the identifying
   part of the string.
   overflow-wrap, not word-break: word-break splits inside a word
   that would have fitted on the next line, which turned Panamax
   into 'Panama x'. overflow-wrap only breaks a word with no line
   of its own to go to. */
.shiptable td {
  padding: 7px 9px;
  font-size: 11.5px;
  vertical-align: top;
  white-space: normal;
  word-break: normal;
  overflow-wrap: break-word;
  cursor: pointer
}

/* Owner, manager and operator run to 60-odd characters and would
   set a four-line row each, which drops the list from nine
   vessels on screen to six. Clamped to two lines, with the full
   string on the row's tooltip. Same device as the shore power
   table's aux engine column. */
.shiptable .clamp {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.35
}

.shiptable td:first-child {
  text-align: right;
  white-space: nowrap
}

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

.shiptable tbody tr.sel {
  background: var(--sel-row)
}

.shiptable tbody tr.sel td {
  font-weight: 500
}

/* Sort control. A button rather than a click handler on the th, so
   the column headers are reachable from the keyboard. */
.sortbtn {
  width: 100%;
  background: none;
  border: 0;
  font: inherit;
  font-size: 10.5px;
  font-weight: 600;
  line-height: 1.3;
  color: inherit;
  text-align: left;
  padding: 7px 9px;
  cursor: pointer;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 4px
}

.sortbtn:hover {
  color: var(--navy)
}

.sortbtn .mark {
  color: var(--grey);
  font-size: 9px;
  flex: none
}

.sortbtn[data-on] .mark {
  color: var(--navy)
}

/* The IMO column's cells are right-aligned, so its header hugs
   the same edge rather than sitting left with the text columns. */
.shiptable thead th:first-child .sortbtn {
  justify-content: flex-end
}

.tablescroll {
  max-height: 520px;
  overflow: auto
}

/* Fixed layout with a colgroup so a long operator name truncates
   to its column instead of setting the table's minimum width. */
/* Inside the 1142px the widened column gives it, so nothing
   scrolls sideways. The floor is what the nine columns need before
   size classes and flags start wrapping to two lines. */
.shiptable {
  table-layout: fixed;
  min-width: 1040px
}

.shiptable col.c-imo { width: 8% }
.shiptable col.c-name { width: 13% }
.shiptable col.c-category { width: 10% }
.shiptable col.c-type { width: 12% }
.shiptable col.c-size { width: 9% }
.shiptable col.c-owner { width: 13% }
.shiptable col.c-manager { width: 12% }
.shiptable col.c-operator { width: 12% }
.shiptable col.c-flag { width: 11% }

/* ===== ship card ===== */
/* No rule between the list and the card. The two panels are one
   selection read two ways, not two sections, and the navy rule
   read as a page break. Air alone separates them. */
#panelShip {
  margin-top: 30px;
  padding-top: 0
}

.card2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 26px;
  align-items: start
}

/* No rules between rows. Forty-one hairlines down two columns
   read as a grid to decode rather than a list to scan. The label
   column carries the alignment on its own, and the row gap does
   the separating. */
.cardrow {
  display: grid;
  grid-template-columns: 176px minmax(0, 1fr);
  gap: 16px;
  padding: 5px 0;
  font-size: 12px;
  align-items: baseline
}

.cardlab {
  color: var(--ink-soft)
}

.cardval {
  color: var(--navy);
  font-variant-numeric: tabular-nums;
  word-break: break-word
}

.cardval.multi {
  white-space: pre-line
}

.cardval.blank {
  color: var(--grey)
}

/* A dotted spine between the two columns, as shore power runs
   between its selection and estimate blocks. One line rather than
   forty-one. */
.card2 {
  position: relative
}

.card2::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(50% - 1px);
  border-left: 1px dotted var(--rule2)
}

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

/* ===== the freemium version ===== */
/* One treatment for every gated control, because two would read
   as broken software rather than as a product tier. Greyed, at
   its default value, padlocked, and still in the layout: nothing
   is removed, so the user can see what exists before deciding
   whether they want it.

   The caption borrows the .band vocabulary rather than inventing
   a badge, and squares off like everything else on the page. */
.dz-tier {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .5px;
  text-transform: uppercase;
  color: var(--ink-muted);
  border: 1px solid var(--rule2);
  padding: 2px 7px
}

.field.locked label,
.check.locked {
  color: var(--grey)
}

/* A locked row: still in the list, still searchable, still
   readable by IMO, name and category, but it does not answer the
   mouse. No hover lift and no pointer, because a row that looks
   clickable and does nothing reads as a broken table rather than
   as a tier. */
.shiptable tbody tr.locked td {
  cursor: default
}

.shiptable tbody tr.locked:hover {
  background: transparent
}

/* The withheld cell. One word, the same word everywhere, set in
   the grey the en dash uses so it reads as an absence rather than
   as a value, and lettered small so a column of them does not
   shout down the columns that do carry data. */
.shiptable td.prem {
  color: var(--grey);
  font-size: 10.5px;
  letter-spacing: .3px
}

.locked input[type=search],
.locked select {
  background: var(--soft);
  color: var(--grey);
  cursor: not-allowed
}

.check.locked input {
  cursor: not-allowed
}

/* Beside the label, not in front of the control: the padlock says
   what the field is, and the greying already says the control
   cannot be reached. */
.lock {
  width: 9px;
  height: 9px;
  margin-left: 5px;
  color: var(--grey);
  flex: none
}

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

  .card2 {
    grid-template-columns: 1fr
  }

  .card2::after {
    display: none
  }

  .cardrow {
    grid-template-columns: 140px minmax(0, 1fr)
  }

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