/* Harbor ledger on wide screens, the toast lane, hit markers (js/ledger-nav.js, js/notices.js, js/bounty-rec.js).
   Same night-sea + parchment theme as css/style.css. */

/* ---- ledger: one column on phones and narrow windows (the wrappers vanish), two on a desktop ---- */
.lcol { display: contents; }
@media (min-width: 1100px) {
  /* left: ship stats and the bounty; right: the shop, so it starts at the top instead of below the poster */
  #port .sheet { width: min(100%, max(calc(1100px * var(--ts) + 40px), 1140px)); grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); column-gap: 32px; }
  #port .sheet > header, #port .sheet > .msg, #port .sheet > #coach, #port .sheet > footer { grid-column: 1 / -1; }
  #port .lcol { display: grid; gap: 18px; align-content: start; min-width: 0; }
  #port .lcol-r { grid-column: 2; }
  /* the Hulk Outpost has no shop: back to the single sheet */
  #port .lcol-r:not(:has(> section:not([hidden]))) { display: none; }
  #port .sheet:not(:has(.lcol-r > section:not([hidden]))) { width: min(100%, max(calc(560px * var(--ts) + 40px), 600px)); grid-template-columns: minmax(0, 1fr); }
  #port .sheet:not(:has(.lcol-r > section:not([hidden]))) .lcol-l { grid-column: 1; }
}
/* pad: Y jumps to Set sail, so say so on the button */
body.pad-nav #sail::before { content: "Y"; display: inline-grid; place-items: center; width: 1.25em; height: 1.25em; margin-right: .45em; border-radius: 50%;
  background: var(--foam); color: var(--blood); font: 700 .6em/1 var(--f-ui); vertical-align: .2em; }

/* ---- Wanted poster: the ship level to be ready at, a goal rather than a warning (js/bounty-rec.js) ---- */
.poster .p-rec .goal { font-weight: 700; color: #6b4a12; }
.poster .p-rec .goal.ok { color: #3f6b2a; }
.poster .p-rec .goal.ok::before { content: "\2713\00a0"; }
.poster .p-rec .you { color: var(--ink-soft); }
/* under the asked level: red text (5:1 on the poster) plus a "!" mark and the sentence, so it never rests on colour alone */
.poster .p-rec.low dt, .poster .p-rec.low .goal, .poster .p-rec.low .you { color: #9c2218; }
.poster .p-rec .warn { display: block; margin-top: 2px; font-weight: 700; color: #9c2218; }
.poster .p-rec .warn::before { content: "!"; display: inline-grid; place-items: center; width: 1.15em; height: 1.15em; margin-right: .4em; border: 1.5px solid currentColor; border-radius: 50%;
  font-size: .85em; line-height: 1; }
/* the captain's ship under the flag: a sea-dark plate so the gold trim reads */
.poster .p-ship { display: block; width: 100%; max-width: 300px; height: auto; margin: 10px auto 0; border-radius: 3px; border: 1px solid rgba(42,29,16,.45);
  background: radial-gradient(ellipse at 50% 55%, #2a6a78 0%, #174553 60%, #0f3340 100%); }

/* ---- toasts: a plated lane under every sheet and menu (never over the ledger: js/notices.js holds them while docked) ---- */
#toast { z-index: 9; background: rgba(8,34,45,.82); border: 1px solid rgba(240,199,102,.35); border-radius: 3px; padding: 3px 14px 5px; }
/* the toast lane and the sea banner share a band: toasts wait for the banner instead (js/notices.js, js/onboard.js) */

/* ---- hit markers: who just hit you. Over the shooter when it is on screen, at the screen edge (pointing at it) when not ---- */
#hitDirs { position: fixed; inset: 0; z-index: 4; pointer-events: none; }
#hitDirs .hd { position: absolute; left: 0; top: 0; width: 0; height: 0; transition: opacity .3s; }
#hitDirs .hd b { position: absolute; left: -13px; top: -13px; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center;
  background: #c8321f; color: #fff6ea; border: 2px solid #ffd0c4; font: 800 17px/1 var(--f-ui); box-shadow: 0 1px 4px rgba(0,0,0,.7); }
#hitDirs .hd i { position: absolute; left: -24px; top: -24px; width: 48px; height: 48px; }
#hitDirs .hd i::after { content: ""; position: absolute; right: -9px; top: 50%; margin-top: -9px;
  border-left: 14px solid #ff5a3c; border-block: 9px solid transparent; filter: drop-shadow(0 1px 2px rgba(0,0,0,.8)); }
#hitDirs .hd.near i { display: none; }
#hitDirs .hd.fade { opacity: 0; }
#hitDirs .hd.pop b { animation: hdPop .35s ease-out; }
@keyframes hdPop { 0% { transform: scale(1.55); } 100% { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { #hitDirs .hd.pop b { animation: none; } #hitDirs .hd { transition: none; } }

/* ---- the fleet: a tab per ship, the picked ship's gun deck, one context panel (js/ledger-tabs.js, js/ledger-panel.js) ---- */
#fleet { min-width: 0; }
/* the tabs stay under the sticky header while the sheet scrolls (#107): tapping a gun port scrolls its panel into view, and the ship tabs must not leave with the deck */
.tabs { display: flex; gap: 6px; overflow-x: auto; min-width: 0; padding: 2px 2px 0; scrollbar-width: thin; -webkit-overflow-scrolling: touch;
  position: sticky; top: calc(min(70px * var(--ts), 18vw) - 20px); z-index: 3; background: var(--parch); }
.tabs[hidden] { display: none; }
/* which ship a panel edits, in its title */
.cpanel h3 .rtag { display: inline-block; margin-right: 8px; padding: 0 8px; border-radius: 9px; background: var(--brass); color: #1b1410; font: 700 calc(12px * var(--ts))/1.6 var(--f-ui); letter-spacing: .04em; vertical-align: .15em; }
.cpanel .emptyfirst { color: #8a5d0c; font-weight: 700; }
.bills { display: block; margin-top: 2px; color: #9c2218; font-weight: 600; }
.tab { flex: 1 0 calc(108px * var(--ts)); min-width: calc(108px * var(--ts)); display: flex; align-items: center; gap: 8px; position: relative; font: inherit; color: var(--ink); text-align: left; cursor: pointer;
  background: var(--parch-2); border: 2px solid rgba(42,29,16,.5); border-bottom: 0; border-radius: 10px 10px 0 0; padding: 6px 8px; opacity: .85; }
.tab:hover { opacity: 1; }
.tab.sel { background: var(--parch); opacity: 1; border-color: var(--brass); box-shadow: 0 -3px 0 var(--brass) inset; }
.tab .mini { width: 20px; height: 30px; flex: none; fill: var(--ink-soft); stroke: var(--ink); stroke-width: 1.2; }
.tab.empty .mini { fill: none; stroke-dasharray: 3 2; }
.tab.lock { opacity: .55; }
.tab .tl { display: block; font-size: calc(11px * var(--ts)); color: var(--ink-soft); line-height: 1.1; }
.tab .tn { display: block; font-weight: 700; font-size: calc(14px * var(--ts)); line-height: 1.2; white-space: nowrap; }
.tab .dot { position: absolute; top: 6px; right: 7px; width: 10px; height: 10px; border-radius: 50%; background: #9a9078; border: 1px solid var(--ink); }
.tab .dot.on { background: #4f9a4a; }
.stage { background: rgba(224,204,156,.3); border: 2px solid var(--brass); border-radius: 0 0 8px 8px; padding: 10px 12px 12px; }
#tabs[hidden] + .stage { border-radius: 8px; }
.shead { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; border-bottom: 1px dashed var(--ink-soft); padding-bottom: 8px; margin-bottom: 10px; }
.shead .role, .berth .role { font-size: calc(12px * var(--ts)); letter-spacing: .1em; color: var(--ink-soft); font-weight: 700; margin: 0; }
.shead .sname { font-family: var(--f-display); font-size: calc(22px * var(--ts)); line-height: 1.15; }
.shead .sname small { font-family: var(--f-ui); font-size: calc(13px * var(--ts)); font-weight: 600; color: var(--ink-soft); margin-left: 8px; }
.shead .ctl { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.shead .estatus { flex: 1 0 100%; margin: 0; font-size: calc(13px * var(--ts)); color: var(--ink-soft); }
.shead .estatus .lock { color: var(--blood); font-weight: 700; }
.shead .ctl .btn { grid-row: auto; grid-column: auto; min-width: 0; padding: 5px 11px; font-size: calc(13px * var(--ts)); }
.seg { display: inline-flex; border: 2px solid var(--ink-soft); border-radius: 8px; overflow: hidden; }
.seg button { font: inherit; font-weight: 600; font-size: calc(13px * var(--ts)); color: var(--ink); background: var(--parch-2); border: 0; padding: 5px 11px; cursor: pointer; }
.seg button + button { border-left: 1px solid var(--ink-soft); }
.seg button.on { background: var(--ink); color: var(--parch); }
.seg button.on.go { background: #3f6b2a; }
.sfoot { justify-content: center; margin-top: 8px; }
.stage .dk-ship { appearance: none; background: none; border: 0; padding: 0; margin: 0; cursor: pointer; border-radius: 40% / 12%; }
.stage .dk-ship:hover { background: rgba(240,199,102,.18); }
.stage .dk-ship.sel { box-shadow: 0 0 0 3px var(--brass); background: rgba(240,199,102,.22); }
/* the empty or unbought slot: choices instead of a deck */
.berth { border: 3px dashed var(--ink-soft); border-radius: 12px; padding: 12px; background: rgba(224,204,156,.35); }
.berth .lock { color: var(--blood); font-weight: 700; margin: 6px 0 0; }
.berth .cols { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 8px; }
.berth .card { background: var(--parch); border: 2px solid rgba(42,29,16,.45); border-radius: 10px; padding: 10px; min-width: 0; }
.berth .card h3 { margin: 0 0 2px; font-family: var(--f-display); font-weight: 400; font-size: calc(18px * var(--ts)); }
.berth .card .sub, .cpanel .sub { margin: 0 0 6px; font-size: calc(12px * var(--ts)); color: var(--ink-soft); }
.berth .card > .btn { grid-row: auto; grid-column: auto; margin-top: 4px; }
/* the context panel */
.ctx:empty { display: none; }
.ctx { margin-top: 12px; }
.chint { margin: 0; padding: 8px 12px; text-align: center; color: var(--ink-soft); border: 2px dashed rgba(42,29,16,.35); border-radius: 10px; font-size: calc(14px * var(--ts)); }
.cpanel { position: relative; padding: 10px 14px 12px; border: 2px solid var(--ink-soft); border-radius: 12px; background: var(--parch); box-shadow: 0 4px 14px rgba(42,29,16,.25); }
.cpanel h3 { margin: 0 28px 2px 0; font-family: var(--f-display); font-weight: 400; font-size: calc(19px * var(--ts)); }
.cpanel h4 { margin: 12px 0 4px; font-size: calc(13px * var(--ts)); letter-spacing: .08em; color: var(--ink-soft); }
.cpanel .x { position: absolute; top: 4px; right: 8px; width: 32px; height: 32px; border: 0; background: none; font-size: 24px; line-height: 1; color: var(--ink-soft); cursor: pointer; }
.cpanel .gcard { margin-top: 8px; }
.cpanel .gnote { margin-top: 8px; }
.cpanel .evict { grid-column: auto; margin-top: 10px; width: 100%; }
.cgrp { margin: 4px 0 8px; }
.cgrp .sub { margin-bottom: 4px; font-weight: 700; }
.cgrp .slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(calc(92px * var(--ts)), 1fr)); gap: 6px; }
@media (max-width: 700px) { .berth .cols { grid-template-columns: 1fr; } }
@media (max-width: 600px) {
  /* a phone: the panel is a bottom sheet over the page, above the Set sail bar; the sheet gets room under it so nothing is hidden */
  .ctx.open { position: sticky; bottom: calc(44px + 30px * var(--ts));   /* the Set sail bar's height */ z-index: 2; max-height: 52vh; overflow-y: auto; margin-inline: -4px; }
  .ctx.open .cpanel { border-radius: 16px 16px 0 0; border-width: 3px 2px 0; border-color: var(--brass); box-shadow: 0 -6px 18px rgba(42,29,16,.35); }
  .tab { flex-basis: calc(112px * var(--ts)); min-width: calc(112px * var(--ts)); }
}
.poster .p-rec .speed { display: block; margin-top: 2px; color: var(--ink-soft); font-style: italic; }

/* ---- the purse stays in view: the ledger's header sticks to the top of the scrolling sheet (js/ledger-gold.js, #73) ---- */
#port .sheet { scroll-padding-top: calc(min(70px * var(--ts), 18vw) + 20px); }   /* focus moves never land behind the bar */
#port .sheet > header { position: sticky; top: -20px; z-index: 4;   /* the sheet pads 20px: sticky measures from inside it */ margin: -20px -20px 0; padding: 14px 20px 10px; background: var(--parch); align-items: center;
  box-shadow: 0 8px 8px -8px rgba(60,40,10,.4); }
#port .gold-big { display: flex; align-items: baseline; gap: 8px; white-space: nowrap; flex: none; }   /* label beside the figure, on every width */
#port .gold-big b { transition: color .25s; }
#port .gold-big b.spent { color: #a3281b; }
#port .gold-big b.gained { color: #3f6b2a; }
@media (max-width: 600px) {
  /* one slim row on a phone: no eyebrow over the title, the gold's label beside its figure; sizes capped so a big UI scale cannot fill the screen */
  #port .sheet > header { flex-wrap: nowrap; gap: 8px; padding: 10px 16px 8px; }
  #port .sheet > header > div:first-child { min-width: 0; }
  #port .sheet > header > div:first-child .eyebrow { display: none; }
  #port .sheet > header h1 { font-size: min(calc(26px * var(--ts)), 7vw); margin: 0; }
  #port .gold-big b { font-size: min(calc(24px * var(--ts)), 7vw); }
}
/* a replace-list candidate: the tile mounts it, the small (i) opens its card (js/ledger-panel.js) */
.cand { position: relative; min-width: 0; }
.cand .slot { width: 100%; }
.cand .cinfo { position: absolute; top: 2px; right: 2px; min-width: 22px; height: 22px; padding: 0 7px; border-radius: 11px; border: 1.5px solid var(--ink-soft); background: var(--parch); color: var(--ink); font: 700 11px/1 var(--f-ui); cursor: pointer; }
.cand .cinfo[aria-pressed="true"], .cand.prev .slot { box-shadow: 0 0 0 3px var(--brass); }
.candcard { margin: 6px 0 4px; }
.candcard .gcard { margin-top: 0; }

/* ---- Wanted poster folded to its head, the goal and the reward; the toggle opens the story, the ship and the long reasons (js/campaign-ui.js) ---- */
.poster .p-rec .calc { color: var(--ink-soft); font-size: .92em; }
.poster .p-rec .how { display: block; margin-top: 2px; color: var(--ink-soft); font-size: .92em; }
.poster .p-rec .why { display: block; margin-top: 3px; color: var(--ink-soft); font-size: .92em; }
.poster .p-toggle { display: block; margin: 8px auto 0; font: inherit; font-size: calc(13px * var(--ts)); font-weight: 700; color: var(--ink); background: transparent; border: 1.5px solid rgba(42,29,16,.45); border-radius: 3px; padding: 3px 12px; cursor: pointer; }
.poster.min .p-ship, .poster.min .p-story, .poster.min .p-tgt, .poster.min .p-rec .why, .poster.min .p-rec .speed { display: none; }
.poster.min .p-head { grid-template-columns: 72px 1fr; margin-top: 4px; }
.poster.min .p-flag { width: 72px; height: 51px; }
.poster.min .p-wanted { font-size: 20px; } .poster.min .p-name { font-size: 24px; }

/* ---- ship rows: the owned/locked note on its own line, locked models folded away, a gain line under an upgrade button (js/ledger-panel.js) ---- */
.item .ds .own, .item .ds .lock { display: block; margin-top: 2px; }
.btn .gain { display: block; margin-top: 1px; font-size: .78em; font-weight: 600; opacity: .85; white-space: normal; }
.lockedships { margin: 6px 0 0; }
.lockedships > summary { cursor: pointer; font-weight: 700; color: var(--ink-soft); padding: 4px 0; font-size: calc(13px * var(--ts)); }
.lockedships .item { opacity: .75; }
.tab.lock { filter: grayscale(1); }
.tab .tw { display: block; font-size: calc(11px * var(--ts)); color: var(--ink-soft); line-height: 1.15; white-space: normal; }
.tab .lockic { margin-right: 4px; }
.berth .cols { grid-template-columns: 1fr; }   /* each card takes the stage's full width: the ship rows and their buttons keep their lines apart */
.gcard .lockhint { grid-column: 1 / -1; margin: 4px 0 0; font-size: calc(13px * var(--ts)); color: var(--ink-soft); }
/* ---- first screen of the ledger (#100): the fleet and its gun deck lead; the poster and the flag fold; the left column holds still ---- */
.cpanel h3 .n { font-family: var(--f-ui); font-weight: 700; }   /* the display face draws a 1 like a small-cap I */
.deck .lbl .lbl-tip { display: block; margin-top: 1px; font-size: .85em; font-weight: 600; letter-spacing: 0; text-transform: none; }
@media (min-width: 1100px) {
  /* a gun port picked opens its panel under the deck, so the right column scrolls: the left one stays put instead of sliding down to the flag */
  #port .lcol-l:not(:has(.poster:not(.min):not(.done))):not(:has(#flagbox.open)) { position: sticky; top: calc(min(70px * var(--ts), 18vw) + 20px); align-self: start; max-height: calc(100vh / var(--pz, 1) - min(70px * var(--ts), 18vw) - 140px); overflow-y: auto; overflow-x: hidden; padding-inline: 6px; margin-inline: -6px; }   /* taller than the screen: it scrolls inside itself, so the flag below is never stuck under the Set sail bar. --pz: #port's big-screen zoom scales vh too, so it is divided out. The side padding (cancelled by the margin) holds the tilted poster's corners, which would count as sideways overflow */
  #port .lcol-l > * { min-width: 0; }
}
@media (max-width: 1099px) {
  /* one column: the fleet and its deck come right after the ledger's header; the poster, the flag and the gear follow */
  #port .sheet > header { order: -5; }
  #port .sheet > #coach, #port .sheet > .msg { order: -4; }
  #port #pStats, #port #wanted { order: -3; }   /* the Wanted poster (folded) comes right after the stats, above the fleet (#124) */
  #port #fleet { order: -2; }
  #port #fleet + section, #port #crewSec { order: -1; }   /* the crew page follows the gear */
  #port .sheet > footer { order: 99; }
}
/* a purchase waiting for its second tap (js/escort-ui.js armAttrs): it does not expire, so the button just stays marked until it is bought or put down */
.btn[data-armed] { background: #e8b84a; color: #1b1410; outline: 3px solid var(--blood, #a32c1f); outline-offset: 1px; font-weight: 800; }
#port { --pz: 1; }   /* the zoom css/style.css gives #port on big screens, for the sticky column's height */
@media (min-width: 1500px) and (min-height: 900px) { #port { --pz: 1.25; } }
@media (min-width: 2400px) and (min-height: 1300px) { #port { --pz: 1.5; } }

/* ---- the edge box of a shooter that just hit you (js/edge-marks.js, #119): red border and a quick flash ---- */
#edgeMarks .em.atk { border-color: #ff5a3c; color: #fff6ea; opacity: 1; animation: emAtk .5s ease-in-out 3; }
#edgeMarks .em.atk .ptr { border-left-color: #ff5a3c; }
@keyframes emAtk { 50% { background: rgba(200,50,31,.9); } }
@media (prefers-reduced-motion: reduce) { #edgeMarks .em.atk { animation: none; } }

/* ---- the Crew page (js/crew-ui.js): the seats line, a row per member, today's recruits ---- */
#crew .lbl { margin-top: 12px; font-size: calc(12px * var(--ts)); text-transform: uppercase; letter-spacing: .08em; font-weight: 700; color: var(--ink-soft); }
#crew .crew-seats { margin: 0; font-weight: 700; }
#crew .crew-now { margin: 2px 0 0; color: var(--ink-soft); font-size: calc(13px * var(--ts)); }
#crew .crew-note { margin-top: 8px; }
#crew .lbl + .hint-s { margin: 2px 0 0; }
#crew .item { padding: 8px 0; }
#crew .item .nm { overflow-wrap: anywhere; min-width: 0; }
#crew .item .ds { overflow-wrap: anywhere; min-width: 0; }
#crew .item .btn { min-width: 0; min-height: 40px; padding: 7px 12px; font-size: calc(14px * var(--ts)); }   /* a finger-sized target on a phone, whatever the face */
#crew .crew-m.on { border-left: 4px solid #3f6b2a; padding-left: 8px; }   /* who sails; the status text says it too, never colour alone */
#crew .crew-m.vet .nm small { color: #6b4a12; font-weight: 700; }