/* ==========================================================================================
   THE DECK BOARD: a deck rail, the deck beside it, and Ducks on Board taking the rest.

   These rules were written for the sailing's Ships & Decks page and lived in its journey.css.
   The duck's own Deck Journey now shows the same three areas around its real deck, so they
   belong to neither page and are shared from here. They are moved VERBATIM - same rules, same
   order, same colours - so the pages that already use them render exactly as before; the only
   edit is that the rail's host selector is now a class instead of that one page's element id,
   because two pages cannot share one id.

   The colours are deliberately not tokenised. Retoning a hundred lines by hand to suit a
   second page is how two surfaces drift apart; the duck page gives the column its own dark
   backdrop instead and uses the component as it is.
   ========================================================================================== */

/* ONE CONTINUOUS COMPOSITION, NOT THREE BOXES.
   A narrow rail of deck icons on the far left, the real deck immediately beside it, and Ducks
   on Board taking everything that is left. The Dream's decks are tall and narrow, so the rail
   and the deck are given only the width they actually need and the collections get the rest -
   which is what keeps all three inside a 390px phone without a horizontal scrollbar.
   min-width:0 on the grid children is load-bearing: a grid track's default min-width is auto,
   so one wide child (a deck image, a long duck name) would otherwise push the whole page
   sideways rather than shrink. That is the overflow fix - not overflow:hidden over the top. */
.jcompose{display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px;margin-top:14px;
  align-items:start}
.jcompose > *{min-width:0}
@media(min-width:900px){
  .jcompose{grid-template-columns:auto minmax(0,0.9fr) minmax(0,1.1fr);gap:14px}
}
.jdeckarea{display:grid;grid-template-columns:auto minmax(0,1fr);gap:8px;min-width:0}
@media(min-width:900px){.jdeckarea{display:contents}}

/* ---- DUCKS ON BOARD: six full-row controls, no box around them ----
   The separate bordered inventory panel is gone; these rows ARE the collection control. Each
   carries its approved artwork small, a readable label beside it (the lettering inside the
   picture is not meant to be legible at this size - the text is the label), and the count hard
   right. The open row's cards appear directly beneath it, across the full width. */
/* Ducks on Board has no box of its own any more - the rows are the control. */
.dob-pane{min-width:0}
.dob-pane h2{margin:0 0 9px;font-size:15px;color:#ffd35d}
/* THE SIX ROWS SPAN THE DECK, TOP TO BOTTOM. --deck-h is the selected deck's own rendered
   height, measured by the page and re-measured whenever the deck changes or is expanded, so
   the column beside it is exactly as tall as the thing it sits next to - no more, no less.
   Without a measured height this is guesswork: the deck is an image whose height depends on
   the deck chosen and the width available. */
.dob{min-width:0;display:flex;flex-direction:column;gap:7px;overflow-y:auto;overflow-x:hidden;
  height:var(--deck-h,auto);max-height:var(--deck-h,none)}
/* NO FLOOR ON THE ROW HEIGHT. A 44px minimum is taller than a sixth of a short deck - in
   landscape the deck is 257px, so six rows plus five 7px gaps demanded 299px and the last
   row finished 32px below the bottom of the deck. The rows divide whatever the deck is;
   if that is ever too little for the content, the column scrolls inside its own bounds
   rather than growing past them. */
.dob .dob-row{flex:1 1 0;min-height:0;margin-bottom:0}
/* open: one row at the top, its cards taking the remaining height and scrolling inside it */
.dob.open{display:flex}
.dob.open .dob-row{flex:0 0 auto}
.dob.open .dob-open{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;margin:0}
.dob.open .dob-cards{flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;
  align-content:start;padding-right:3px}
.dob.open .dob-note{flex:0 0 auto}
.dob-row{display:flex;align-items:center;gap:10px;width:100%;text-align:left;
  font:inherit;cursor:pointer;color:#e8edf8;
  background:linear-gradient(120deg,#1a2340,#141d33);border:1.5px solid #333f6e;
  border-radius:14px;padding:7px 11px 7px 7px;margin-bottom:7px;
  transition:border-color .15s ease,background .15s ease}
.dob-row:hover{border-color:#6f7fd0}
.dob-row.on{border-color:#ffd35d;background:linear-gradient(120deg,#3a2550,#1f2746);
  box-shadow:0 0 12px rgba(255,211,93,.28)}
/* the artwork takes whatever height the row was given, within sensible bounds */
.dob-art{width:auto;height:100%;max-height:52px;min-height:0;flex:none;
  aspect-ratio:3/2;object-fit:contain}
/* TWO LINES RATHER THAN AN ELLIPSIS. "Coming Aboard" does not fit one line in this column at
   phone width, and a label that reads "Coming Abo..." is not a label. */
.dob-label{flex:1;min-width:0;font-size:13.5px;font-weight:700;color:#ffd35d;
  line-height:1.2;white-space:normal;overflow-wrap:anywhere}
.dob-row.on .dob-label{color:#fff}
.dob-x{flex:none;font-size:19px;line-height:1;color:#e3d7e8;padding:0 2px}
.dob-row.on .dob-x{color:#fff}
.dob-count{flex:none;font-size:13px;font-weight:800;color:#b9c6da;
  min-width:26px;text-align:right;font-variant-numeric:tabular-nums}
.dob-open{margin:0 0 12px;padding:0 2px 2px}
/* min(150px,100%) rather than 150px: a bare minmax keeps a 150px track even when the
   column it lives in is narrower than that, and on a phone - where the rail and the deck have
   already taken their share - that is exactly how a grid pushes the page sideways. */
.dob-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(150px,100%),1fr));gap:7px}
.dob-empty{padding:12px 8px;text-align:center;font-size:12.5px;color:#9fb0cb;grid-column:1/-1}
.dob-note{font-size:11px;color:#8fa0bb;margin:8px 2px 0;line-height:1.4}
.dob-off{font-size:12.5px;color:#9fb0cb;margin:0 0 9px}

/* AT PHONE WIDTH THE LABEL MUST STILL READ. The row only has ~199px once the rail and the
   deck have taken theirs, and at the desktop proportions "Coming Aboard" came out as
   "Coming Abo...". The artwork gives up a few pixels so the words do not have to: the picture
   is recognisable at 34px and the text is the label.
   IT HAS TO SIT AFTER THE RULES IT OVERRIDES: a media query contributes no specificity, so
   placed earlier in the sheet it simply loses to the base rule and nothing changes. */
@media(max-width:470px){
  .dob-row{gap:7px;padding:6px 7px 6px 5px}
  .dob-art{max-height:40px;min-height:0;max-width:52px}
  .dob-label{font-size:12.5px}
  .dob-count{font-size:12px;min-width:16px}
}
/* TWO CLEAN LINES ARE THE ANSWER AT PHONE WIDTH, AND THAT IS A DECISION, NOT A SHRUG.
   Measured at 360px: the label gets 48 pixels once the glitter artwork and the count have
   taken theirs, and "Coming Aboard" needs about eighty at a size anybody would call readable.
   The options were a smaller picture - at which point it stops reading as artwork, which is
   the whole point of these rows - or truncation, which hides the word. So the label wraps at
   its space onto a second line and the row is tall enough to hold it. What must NEVER happen
   is breaking inside a word, which is what the two-column rail used to force; word-break is
   pinned to normal here so a future narrower pane cannot start doing that again. */
.dob-label{word-break:normal;overflow-wrap:normal;hyphens:none}


/* a card, and the quiet menu that sits on it without becoming part of it */
.dob-cardwrap{position:relative;min-width:0}
.dob-card{display:flex;align-items:center;gap:9px;width:100%;text-align:left;font:inherit;
  cursor:pointer;color:#fff;background:#141d33;border:1px solid #38344f;border-radius:12px;
  padding:7px 8px}
.dob-card:hover{border-color:#85488c}
.dob-card.on{border-color:#ffd35d;box-shadow:0 0 10px rgba(255,211,93,.3)}
.dob-card img,.dob-noart{width:40px;height:40px;flex:none;border-radius:9px;object-fit:cover;background:#0b1526}
.dob-noart{display:flex;align-items:center;justify-content:center;font-size:20px}
.dob-cardmeta{min-width:0}
.dob-cardmeta strong{display:block;font-size:12.5px;color:#ffd35d;line-height:1.2;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dob-cardmeta small{display:block;font-size:10.5px;color:#b9c6da;margin-top:1px}
.dob-menu{position:absolute;top:4px;right:4px;width:24px;height:24px;line-height:1;
  font-size:15px;font-weight:800;cursor:pointer;color:#c6d2e5;
  background:rgba(10,18,36,.78);border:1px solid #3b4780;border-radius:8px;padding:0}
.dob-menu:hover{color:#fff;border-color:#85488c}
.dob-menu:focus-visible,.dob-card:focus-visible,.dob-row:focus-visible{outline:2px solid #ffd35d;outline-offset:2px}
.dob-sheet{position:absolute;top:30px;right:4px;z-index:5;min-width:188px;
  background:#16203a;border:1px solid #4a5894;border-radius:11px;padding:5px;
  box-shadow:0 8px 22px #0008}
.dob-sheet button{display:block;width:100%;text-align:left;font:inherit;font-size:12.5px;
  cursor:pointer;color:#ffd0c4;background:none;border:0;border-radius:8px;padding:8px 10px}
.dob-sheet button:hover{background:#2a2036}
.dob-sheet button[disabled]{opacity:.6;cursor:default}

.dob-add{margin:0 0 10px}
.dob-addlabel{display:block;font-size:12.5px;color:#c6d2e5;margin-bottom:6px}
.dob-field{display:flex;gap:7px}
.dob-field input{flex:1;min-width:0;font:inherit;font-size:13.5px;color:#fff;
  background:#111b31;border:1.5px solid #3b4780;border-radius:11px;padding:9px 11px}
.dob-field button{font:inherit;font-size:13px;font-weight:700;cursor:pointer;color:#0a1628;
  background:#ffd35d;border:0;border-radius:11px;padding:9px 15px}
.dob-said{min-height:16px;font-size:12px;margin-top:6px;color:#9fb0cb}
.dob-said.good{color:#7ee0a8}
.dob-said.bad{color:#ffab9a}

/* THESE RULES CARRY .dpk FOR WEIGHT, AND THAT IS NOT DECORATION.

   deck-picker.js injects its own stylesheet into <head> when it mounts, which is always AFTER
   this file's <link> has been parsed. Its rule is ".dpk .dpk-deckgrid{display:grid;
   grid-template-columns:1fr 1fr}" - specificity (0,2,0). These overrides were written as
   "#viewer .dpk-deckgrid", which is (1,1,0) and beat it on specificity no matter the order.
   Moving them here renamed that id to a class, giving (0,2,0): an exact tie, decided by source
   order, which the later-injected <style> wins.

   MEASURED on live North, asked of the engine rather than inferred: both rules present, this
   file first and "INLINE <style>" second, and getComputedStyle reporting display:grid with
   grid-template-columns:60px 60px - two columns of thumbnails at 360, 377, 400 AND 1280px.
   The rail that was meant to be a narrow single column was a two-column wall the whole time,
   which squeezed the centre deck to 83px and wrapped every Ducks on Board label.

   Naming .dpk - the module's own root class, which really is in the chain - restores a
   specificity win that does not depend on which stylesheet loaded last. */

/* THE DECK SELECTOR IS A VERTICAL RAIL ON THE FAR LEFT.
   A horizontal strip of deck icons was the principal source of the mobile overflow: fourteen
   thumbnails in a row have to go somewhere, and they went off the side of the phone. Stood on
   end they cost one narrow column and scroll by themselves.
   THE ICONS THEMSELVES ARE UNTOUCHED - same elements, same artwork, same markup from the
   shared picker. Only the direction they are stacked in changes. */
.deckrail{display:contents}
.deckrail .dpk{display:contents}
.deckrail .dpk .dpk-decks-head{display:none}
/* 76vh, not 66. The hull is 604x3914, so this deck's WIDTH is decided by its height: at 66vh
   on a 900px viewport it came out 92px across, which reads as a sliver however correct the
   proportion is. The one-column rail gave back about seventy pixels and the deck can spend
   them on being taller, which is the only way it gets wider. The rail matches it so the two
   still start and end together. */
.deckrail .dpk .dpk-deckscroll{max-height:76vh;overflow-y:auto;overflow-x:hidden;
  margin:0;padding-right:2px;scrollbar-width:thin}
.deckrail .dpk .dpk-deckgrid{display:flex;flex-direction:column;grid-template-columns:none;gap:7px;padding:0}
.deckrail .dpk .dpk-deckcard{flex:0 0 auto;width:60px}
.deckrail .dpk .dpk-deckthumb{height:42px;overflow:hidden}
.deckrail .dpk .dpk-deckthumb img{width:100%;height:100%;object-fit:cover;object-position:center top}
/* "Deck 1 - Ri..." is not a deck name. Two short lines fit where one long one could not;
   the thumbnail artwork above it is untouched. */
.deckrail .dpk .dpk-decklabel{padding:3px 2px;font-size:8.5px;line-height:1.12;white-space:normal;
  overflow-wrap:anywhere;hyphens:auto}
@media(min-width:900px){
  .deckrail .dpk .dpk-deckcard{width:74px}
  .deckrail .dpk .dpk-deckthumb{height:52px}
  .deckrail .dpk .dpk-decklabel{font-size:9.5px}
}
/* THE REAL DECK, SCALED UNIFORMLY AND NEVER DISTORTED. width:auto with a height ceiling means
   the browser keeps the file's own aspect ratio; nothing is stretched or cropped. */
/* NO TOP MARGIN HERE. The shared module gives .dpk-browse-stage a 10px margin, which pushed
   the deck image 10px below the top of its grid row while the collections beside it started
   at the row top - so the two columns could never line up, top or bottom. */
.deckrail .dpk .dpk-browse-stage{min-width:0;margin-top:0}
.deckrail .dpk .dpk-browse-stage img.dpk-deck{max-height:76vh;width:auto;max-width:100%;cursor:zoom-in}
/* ...and the module's OWN enlarged state, which it already had for the hide flow, is what
   click-to-expand turns on. Nothing new was built to make a deck bigger. */
.deckrail .dpk .dpk-stage.dpk-big img.dpk-deck{cursor:zoom-out}

.jfoot{text-align:center;margin-top:24px;font-size:11px;color:#b5c1d5}
.jfoot a{color:#ffd45c}