/* Journey cards (maiden runs, watch book, pinned goal, stores & safe berth)
   and the journey sheets (naming, rank, dispatch, run, recovery, delivery),
   on glass: the README pane, its title and row type, the three button looks
   and glass fields. The drawings are journey-art.js instruments in the
   accent colour. glass.css loads after this file, so rules that must outrank
   a single-class primitive carry an extra class. */

.journey-graphic { display: block; width: 100%; max-width: 100%; height: auto; color: var(--accent); }

/* ── Cards ─────────────────────────────────────────────────────────────── */
.journey-card {
  box-sizing: border-box; min-width: 0; margin: 0; padding: var(--pad);
  background: var(--glass); -webkit-backdrop-filter: blur(var(--glass-blur)); backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--line); border-radius: 0; box-shadow: var(--hairline-top);
  color: var(--ink); font: 400 13px/1.45 var(--font-ui);
}
.journey-card *, .journey-sheet * { box-sizing: border-box; }
.journey-card > h3 {
  margin: 0 0 10px; padding: 0; border: 0;
  font: 500 11px/1 var(--font-ui); letter-spacing: .18em; text-transform: uppercase; color: var(--accent);
}
.journey-card h4, .journey-sheet h4 { margin: 0; font: 600 16px/1.2 var(--font-head); letter-spacing: 0; text-transform: none; color: var(--ink); }
.journey-card p, .journey-sheet p { margin: 6px 0; font: 400 13px/1.45 var(--font-ui); color: var(--ink-muted); }
.journey-card strong, .journey-sheet strong { font-weight: 500; color: var(--ink); }
.journey-card small, .journey-sheet small { display: block; font: 400 11px/1.4 var(--font-mono); color: var(--ink-muted); }
/* Glass buttons in cards and sheets keep the README size; on phones and
   touch screens they are 44 px and may wrap a long label. */
.journey-card .gl-btn, .journey-sheet .gl-btn { max-width: 100%; }
.journey-card .gl-btn + .gl-btn { margin-left: 0; }
.journey-card > .gl-btn { margin-top: 10px; margin-right: 8px; }
.journey-error:empty { display: none; }
.journey-error { color: var(--bad); }
.journey-card p.journey-error, .journey-sheet p.journey-error { color: var(--bad); }
.journey-error[data-status="refused"]:not(:empty)::before { content: "REFUSED · "; font-weight: 500; }
.journey-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; }
.journey-actions > * { min-width: 0; }
/* Key/value rows (the README row): two columns in a sheet, one on phones;
   an amount never breaks from its unit. */
.journey-stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 0 24px; margin: 10px 0; }
.journey-stat-grid > div { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: var(--row-pad) 0; border-bottom: 1px solid var(--line-soft); }
.journey-stat-grid dt { min-width: 0; font: 400 13px/1.4 var(--font-ui); color: var(--ink-muted); }
.journey-stat-grid dd { flex: none; margin: 0; font: 400 13px/1.4 var(--font-mono); color: var(--ink); text-align: right; white-space: nowrap; }

/* Pinned goal and rank. */
.rank-insignia { width: 32px; flex: none; height: 36px; color: var(--accent); }
.rank-insignia path:first-child { fill: var(--field); }
.goal-rail { margin: 10px 0; color: var(--accent); }
.goal-rail svg { display: block; width: 100%; max-width: 350px; }
.goal-rail figcaption { font: 400 11px/1.4 var(--font-mono); color: var(--ink-muted); }
.journey-rank-title { display: flex; align-items: center; gap: 12px; }
.journey-rank-title .rank-insignia { width: 48px; height: 54px; }
.journey-next-task { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; justify-content: space-between; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line-soft); }
.journey-next-task p { margin: 0; }

/* Stores, lay-up and recovery instruments (Engineering's stores card). */
.supply-gauge { margin: 0; display: grid; grid-template-columns: 96px minmax(100px, 1fr); gap: 12px; align-items: center; color: var(--accent); }
.supply-gauge figcaption { display: flex; flex-direction: column; gap: 3px; color: var(--ink); }
.supply-gauge figcaption strong { font: 500 11px/1 var(--font-ui); letter-spacing: .18em; text-transform: uppercase; color: var(--ink-muted); }
.supply-gauge figcaption span { font: 400 13px/1.3 var(--font-mono); font-variant-numeric: tabular-nums; }
.journey-supply-pair { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 12px 16px; }
.voyage-track { margin: 10px 0; color: var(--accent); }
.voyage-track svg { max-height: 90px; }
.voyage-track figcaption { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 6px 16px; font: 400 11px/1.4 var(--font-mono); color: var(--ink-muted); }
.voyage-track figcaption span { flex: 1 1 100px; min-width: 0; }
.voyage-track figcaption span:last-child { text-align: right; }
.money-waterfall { margin: 12px 0; max-width: 480px; color: var(--accent); }
.money-waterfall svg { max-height: 96px; }
.money-waterfall figcaption { display: grid; grid-template-columns: repeat(4, minmax(55px, 1fr)); gap: 8px; text-align: center; font: 400 11px/1.3 var(--font-mono); color: var(--ink-muted); }
.money-waterfall figcaption strong { display: block; margin-top: 4px; font: 400 13px/1.2 var(--font-mono); color: var(--ink); }
.credit-chits { margin: 12px 0; color: var(--accent); }
.credit-chits svg { width: 168px; }
.credit-chits figcaption { font: 400 12px/1.4 var(--font-mono); color: var(--ink-muted); }
/* Every instrument of the stores card is the same two columns: a fixed art
   column and the copy. The gauge captions, each heading, paragraph and
   button row, and the RECOVERY RECORDED row start at one x, with or without
   a drawing (no tug drawing without a recovery offer or a tow). Below 640 px
   each drawing stacks over its copy. */
#journey-engineering { --journey-art: 138px; --journey-art-gap: 14px; }
#journey-engineering .supply-gauge { grid-template-columns: var(--journey-art) minmax(0, 1fr); column-gap: var(--journey-art-gap); }
#journey-engineering .supply-gauge > svg { width: 96px; }
.layup-instrument, .recovery-instrument, .recovery-cooldown {
  display: grid; grid-template-columns: var(--journey-art, 138px) minmax(0, 1fr); gap: 6px var(--journey-art-gap, 14px);
  align-items: center; color: var(--accent);
}
:is(.layup-instrument, .recovery-instrument, .recovery-cooldown) > svg { grid-column: 1; justify-self: start; }
:is(.layup-instrument, .recovery-instrument, .recovery-cooldown) > div { grid-column: 2; min-width: 0; }
.journey-card > :is(.layup-instrument, .recovery-instrument, .recovery-cooldown) { margin-top: 10px; }
.recovery-instrument strong { font: 600 16px/1.2 var(--font-head); color: var(--ink); }
.recovery-cooldown > svg { width: 54px; height: 54px; }

/* Maiden runs. */
.journey-opportunities { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: var(--gap); }
.journey-route { min-width: 0; padding: 12px; border: 1px solid var(--line); border-radius: 0; background: rgba(255, 255, 255, .03); }
.journey-route-title { display: flex; align-items: center; gap: 10px; }
.journey-route .goods-chip { white-space: normal; }
.journey-route > .gl-btn { display: flex; width: 100%; margin-top: 10px; }
.first-run-costs { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 8px 0; font: 400 12px/1.4 var(--font-mono); color: var(--ink-muted); }
.first-run-costs strong { font: 400 13px/1.4 var(--font-mono); color: var(--accent); }
/* Contrasting runs sit side by side. A single maiden run fills the card as
   one wide instrument: route, hold and tanks, and margin in a row. */
.maiden-run .journey-opportunities { grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); }
#journey-maiden { container: maiden / inline-size; }
.maiden-run .journey-opportunities[data-runs="1"] { grid-template-columns: minmax(0, 1fr); }
@container maiden (min-width: 720px) {
  .journey-opportunities[data-runs="1"] .first-run-visual { grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr) minmax(0, .7fr); align-items: center; column-gap: 24px; }
  .journey-opportunities[data-runs="1"] .journey-route > .gl-btn { width: auto; margin-left: auto; }
}
/* Ops exchange › Trade Routes: the exchange pane already frames the runs,
   so the opportunities block is a pane title over the run cards. */
.journey-card.journey-opportunities-card {
  padding: 0; border: 0; background: none; -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none;
}
.journey-opportunities-card > .gl-head { margin-bottom: 4px; }
.journey-opportunities-card > .gl-btn { margin-top: 12px; }
.maiden-run .journey-route { padding: 10px; }
.maiden-run .voyage-track { margin: 4px 0; }
.maiden-run .voyage-track svg { max-height: 48px; }
.maiden-run p { margin: 4px 0; }
.maiden-run .journey-route-title h4 { margin: 0; }

/* Sailing orders (the dispatch sheet). */
.sailing-sequence { display: flex; align-items: stretch; gap: 8px; margin: 12px 0; }
.sailing-sequence > span { flex: 1; min-width: 0; padding: 10px; border: 1px solid var(--line); text-align: center; font: 400 12px/1.4 var(--font-ui); color: var(--ink-muted); }
.sailing-sequence b { display: block; margin-bottom: 5px; font: 400 14px/1 var(--font-mono); color: var(--accent); }
.sailing-sequence .wait { border-style: dashed; }
.sailing-outcome { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 8px 0; border-top: 1px solid var(--line-soft); }
.sailing-floor { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; }
.sailing-floor input[type=range] { width: 100%; min-width: 0; padding: 0; }
.floor-instrument { position: relative; padding-bottom: 6px; }
.floor-estimate { display: block; position: relative; font: 400 11px/1.4 var(--font-mono); color: var(--accent); text-align: center; overflow-wrap: normal; }
.floor-estimate::before { content: '\25B4'; display: block; position: relative; left: var(--estimate-position, 50%); width: 1ch; transform: translateX(-50%); font-size: 15px; line-height: 15px; }
.journey-sale { padding: 10px 0; border-top: 1px solid var(--line-soft); }
.journey-sale-heading { display: flex; gap: 10px; align-items: center; }
.journey-sale-heading label { flex: 1; min-width: 140px; min-height: 44px; display: flex; align-items: center; cursor: pointer; }
.journey-sale-fields { display: grid; grid-template-columns: repeat(2, minmax(120px, 1fr)); gap: 12px; }
.journey-sale-fields input { width: 100%; }

/* Naming. */
.scout-silhouette { width: 100%; height: 65px; color: var(--accent); opacity: .7; }
.scout-nameplate {
  margin: 12px 0; padding: 10px 12px; border: 1px solid var(--accent-60); background: var(--accent-08); text-align: center;
  font: 600 22px/1.1 var(--font-head); letter-spacing: .08em; color: var(--ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.journey-name-input { width: 100%; }
.journey-start-port { margin: 0 0 12px; border: 1px solid var(--line); background: rgba(255, 255, 255, .03); }
.journey-start-port img { display: block; width: 100%; height: 90px; object-fit: cover; object-position: center 35%; }
.journey-start-port figcaption { padding: 8px 10px; display: grid; gap: 4px; font: 400 13px/1.4 var(--font-ui); color: var(--ink-muted); overflow-wrap: normal; }

/* Watch book entries (also used inside the handover sheet). */
.handover-group { border-top: 1px solid var(--line-soft); }
.handover-group > summary::before { content: ''; display: inline-block; width: 8px; height: 8px; margin-right: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 8px var(--accent); }
.handover-group[data-count="0"] > summary::before { background: var(--off); box-shadow: none; }
.handover-entry { padding: 10px 0; border-top: 1px solid var(--line-soft); }
.handover-run { padding: 12px 0; border-top: 1px solid var(--line-soft); }

/* Status stamps read as mono status tags on glass. */
:is(.journey-card, .journey-sheet) .stamp {
  display: inline-flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 3px 6px;
  border: 1px solid currentColor; transform: none; isolation: auto;
  font: 400 11px/1.2 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--accent);
}
:is(.journey-card, .journey-sheet) .stamp::before { content: none; }
:is(.journey-card, .journey-sheet) .stamp[data-status="held"] { color: var(--bad); }
:is(.journey-card, .journey-sheet) .stamp small { font: 400 11px/1.4 var(--font-mono); letter-spacing: 0; text-transform: none; color: var(--ink-muted); }

/* ── Sheets: one glass dialog over a dim scrim ─────────────────────────── */
.journey-sheet-scrim {
  position: fixed; inset: 0; z-index: 260; display: grid; grid-template-columns: minmax(0, 1fr); place-items: center;
  padding: 20px; overflow: auto; background: rgba(10, 14, 11, .72);
}
.journey-sheet-scrim[hidden] { display: none; }
.journey-sheet {
  width: min(700px, calc(100vw - 40px)); min-width: 0; max-width: 100%; max-height: calc(100dvh - 40px);
  overflow: auto; overscroll-behavior: contain; scrollbar-gutter: stable; padding: 16px 18px 18px;
  background: rgb(8 12 9 / .92); -webkit-backdrop-filter: blur(var(--glass-blur)); backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--line); border-radius: 0; box-shadow: var(--hairline-top);
  color: var(--ink); font: 400 14px/1.45 var(--font-ui);
}
.journey-sheet > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin: 0 0 14px; padding-bottom: 12px; border-bottom: 1px solid var(--line-soft); }
.journey-sheet > header h2 { margin: 6px 0 0; font: 600 22px/1.1 var(--font-head); letter-spacing: 0; text-transform: none; color: var(--ink); overflow-wrap: normal; word-break: normal; hyphens: none; }
.journey-sheet > header .gl-btn { flex: none; }
.journey-sheet h3 { margin: 16px 0 8px; font: 500 11px/1 var(--font-ui); letter-spacing: .18em; text-transform: uppercase; color: var(--accent); }
.journey-sheet .journey-route-title h3 { margin: 0; font: 600 16px/1.2 var(--font-head); letter-spacing: 0; text-transform: none; color: var(--ink); }
.journey-sheet label, .journey-card label {
  display: block; margin: 12px 0 6px; font: 500 11px/1.3 var(--font-ui); letter-spacing: .18em; text-transform: uppercase; color: var(--ink-muted);
}
.journey-sheet .journey-sale-fields label, .journey-sheet .journey-sale-heading label { letter-spacing: .08em; }
.journey-card input, .journey-sheet input:not([type=checkbox], [type=range]), .journey-sheet select, .journey-sheet textarea {
  display: block; width: 100%; min-height: 40px; max-width: 100%; margin-top: 6px; padding: 8px 12px;
  border: 1px solid var(--line); border-radius: 0; background: var(--field); color: var(--ink);
  font: 400 14px/1.3 var(--font-ui); letter-spacing: 0; text-transform: none;
}
.journey-sheet input[type=number] { font-family: var(--font-mono); }
.journey-sheet textarea { min-height: 64px; resize: vertical; }
.journey-sheet input[type=checkbox] { flex: none; width: 24px; height: 24px; min-height: 24px; margin: 8px; accent-color: var(--accent); }
.journey-sheet summary {
  display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 10px 0; cursor: pointer; line-height: 1.4;
  font: 500 11px/1.3 var(--font-ui); letter-spacing: .18em; text-transform: uppercase; color: var(--accent);
}
.journey-sheet :focus-visible, .journey-card :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

@media (max-width: 760px), (max-height: 500px) {
  .journey-sheet-scrim { padding: 8px; }
  .journey-sheet { width: min(700px, calc(100vw - 16px)); padding: 14px; max-height: calc(100dvh - 16px); scrollbar-gutter: auto; }
  .journey-card .gl-btn, .journey-sheet .gl-btn { height: auto; min-height: 44px; }
  .journey-card input, .journey-sheet input:not([type=checkbox], [type=range]), .journey-sheet select, .journey-sheet textarea { min-height: 44px; font-size: 16px; }
  .journey-sale-fields { grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); }
}
@media (pointer: coarse) { .journey-card .gl-btn, .journey-sheet .gl-btn { height: auto; min-height: 44px; } }
/* At 640 px and below a long label may wrap (README: mobile), and a sheet
   is the flush bottom sheet every glass dialog becomes (.gl-modal). */
@media (max-width: 640px) {
  .journey-card .gl-btn, .journey-sheet .gl-btn { padding-block: 8px; white-space: normal; line-height: 1.15; }
  /* One column: each drawing over its copy, every copy block at the card's
     edge; the gauges keep their drawing beside the caption. */
  :is(.layup-instrument, .recovery-instrument, .recovery-cooldown) { grid-template-columns: minmax(0, 1fr); }
  :is(.layup-instrument, .recovery-instrument, .recovery-cooldown) > :is(svg, div) { grid-column: 1; }
  .layup-instrument > svg { width: 138px; }
  .recovery-instrument > svg { width: 160px; }
  #journey-engineering .supply-gauge { grid-template-columns: 96px minmax(0, 1fr); column-gap: 12px; }
  .journey-sheet-scrim { align-items: end; justify-items: stretch; padding: 0; }
  .journey-sheet { width: 100%; max-height: 92dvh; border-bottom: 0; padding-bottom: max(18px, env(safe-area-inset-bottom)); }
}
@media (max-width: 400px) {
  .journey-sheet > header { flex-wrap: wrap; }
  .journey-sheet > header h2 { flex: 1 1 170px; }
  .journey-sheet > header .gl-btn { margin-left: auto; }
  .sailing-sequence { gap: 4px; }
  .sailing-sequence > span { padding: 8px 3px; }
  .money-waterfall figcaption { gap: 4px; }
}
@media (prefers-reduced-motion: reduce) { .journey-card *, .journey-sheet * { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }
@media (forced-colors: active) {
  .journey-card, .journey-sheet { background: Canvas; color: CanvasText; border-color: CanvasText; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .journey-sheet-scrim { background: Canvas; }
  .journey-card > h3, .journey-sheet h3, .journey-card p, .journey-sheet p, .journey-sheet label, .journey-card label, .journey-sheet summary { color: CanvasText; }
  .journey-graphic, .voyage-track, .goal-rail, .supply-gauge, .credit-chits { color: CanvasText; }
  :is(.journey-card, .journey-sheet) .stamp { color: CanvasText; }
}