/* tracker-sea.css — Ship (crew), Quests, courses and grounds, the traces, the layer strip, a finger and a phone, and the smaller blocks that followed.
   One of nine sheets that were one file, cut at its section marks and
   linked in the same order (tracker-base, tracker-shell, tracker-yard, tracker-widgets, tracker-map, tracker-sea, tracker-extras, tracker-barter, tracker-recent), so the cascade is what it was: a
   rule here still loses to the same rule in a later sheet. When moving a
   rule between sheets, check nothing later relies on beating it. */

/* ---- Crew ------------------------------------------------------------ */
/* The Manage Sailors board: a hull drawn in a 900-wide box, seats placed
   where the game places them, scaled by the container's width. */
.crew-ship { display: flex; align-items: center; gap: 12px; padding: 6px 4px 14px; flex-wrap: wrap; }
.crew-ship > div { min-width: 0; flex: 1 1 240px; }
.crew-ship .row-sub { white-space: normal; }
.crew-ship-name { font-family: var(--font-display); font-size: 18px; font-weight: 600; color: var(--ink-hi); }
.crew-pick { display: flex; align-items: center; gap: 8px; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-mute); }
.crew-stats { margin-bottom: 14px; }
.crew-stats .stat { flex: 1 1 130px; padding: 10px 14px; }
.crew-stats .stat-v { font-size: 17px; }
.crew-grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 14px; align-items: start; }
.crew-main, .crew-side { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.crew-side { position: sticky; top: 14px; }
.crew-panel { margin: 0; }
.crew-head { flex-wrap: wrap; gap: 8px; }
.crew-two { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px; }
.act.small { padding: 5px 11px; font-size: 12px; }
.act.danger { color: var(--red); border-color: rgba(255, 120, 110, 0.3); }

.crew-board {
  position: relative;
  container-type: inline-size;
  aspect-ratio: 900 / 470;
  margin: 0 14px;
  background: radial-gradient(70% 60% at 50% 55%, rgba(30, 80, 120, 0.18), transparent 75%);
}
.crew-hull { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0.5; }
.crew-counter { position: absolute; left: 1.2cqw; top: 1cqw; font-size: max(10px, 1.35cqw); font-weight: 600; color: var(--ink-mute); z-index: 3; }
.seat-bar {
  position: absolute; z-index: 2; transform: translateX(-50%); text-align: center; white-space: nowrap;
  font-size: max(9px, 1.25cqw); font-weight: 600; color: var(--ink-dim);
  background: var(--glass-strong); border: 1px solid var(--line-btn); border-radius: 4px; padding: 0.2cqw 0;
}
.seat-bar.static { position: static; transform: none; width: 154px; margin: 0 auto 6px; font-size: 11.5px; padding: 2px 0; }
.seat-wrap { position: absolute; z-index: 2; transform: translateX(-50%); display: flex; gap: 0.7cqw; }
.seat {
  position: relative; width: 5.1cqw; height: 5.1cqw; min-width: 34px; min-height: 34px;
  border-radius: 9px; display: grid; place-items: center; cursor: pointer; padding: 0;
  background: rgba(var(--deep-rgb), 0.85); border: 1.5px dashed rgba(var(--line-rgb), 0.3); color: inherit;
}
.seat.taken { background: var(--well); border: 1px solid rgba(var(--line-rgb), 0.35); }
.seat.picked { border: 1.5px solid var(--teal); }
.seat.armed { border: 1.5px dashed rgba(70, 224, 200, 0.9); animation: seatPulse 1.4s ease-in-out infinite; }
.seat-plus { font-size: max(16px, 2.1cqw); color: #3d5c80; }
.seat-mono { width: 70%; height: 70%; border-radius: 7px; display: grid; place-items: center; font-size: max(10px, 1.3cqw); font-weight: 800; color: #08131f; }
.seat-lv {
  position: absolute; right: -4px; top: -4px; min-width: 15px; height: 15px; border-radius: 8px; padding: 0 3px;
  background: var(--well-deep); border: 1px solid rgba(var(--line-rgb), 0.4); font-size: 9px; font-weight: 700; color: var(--ink-dim); display: grid; place-items: center;
}
.seat-cond { position: absolute; left: 4px; right: 4px; bottom: 3px; height: 2.5px; border-radius: 2px; background: var(--track-solid); overflow: hidden; }
.seat-cond i { display: block; height: 100%; }
.cabin-row { padding: 12px 14px 14px; }
.cabin-seats { display: flex; flex-wrap: wrap; gap: 6px; }
.cabin-seats .seat { width: 46px; height: 46px; }
.cabin-note { font-size: 10.5px; color: var(--ink-faint); margin-top: 6px; }
@keyframes seatPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(70, 224, 200, 0.25); }
  50% { box-shadow: 0 0 0 6px rgba(70, 224, 200, 0); }
}

.roster-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; padding: 12px 14px 4px; }
.roster-card {
  display: flex; gap: 9px; align-items: center; padding: 8px 10px; border-radius: 10px; cursor: pointer; text-align: left;
  background: rgba(var(--deep-rgb), 0.8); border: 1px solid rgba(var(--line-rgb), 0.12); color: inherit; font: inherit;
}
.roster-card.seated { opacity: 0.8; }
.roster-card.picked { background: var(--picked); border-color: rgba(70, 224, 200, 0.5); opacity: 1; }
.roster-tile { position: relative; flex: none; width: 38px; height: 38px; border-radius: 9px; display: grid; place-items: center; font-size: 13px; font-weight: 800; color: #08131f; }
.roster-tile.big { width: 52px; height: 52px; border-radius: 12px; font-size: 18px; }
.roster-cond { position: absolute; left: 2px; bottom: -3px; height: 3px; border-radius: 2px; max-width: calc(100% - 4px); }
.roster-main { min-width: 0; display: flex; flex-direction: column; }
.roster-name { font-size: 12.5px; font-weight: 700; color: var(--ink-hi); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.roster-sub { font-size: 10.5px; color: var(--ink-mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.roster-pos { font-size: 10px; color: var(--ink-faint); }
.roster-pos.on { color: var(--teal); }
.crew-race { font-size: 9px; letter-spacing: 0.08em; text-transform: uppercase; margin-left: 4px; opacity: 0.85; }
.crew-actions { display: flex; gap: 8px; flex-wrap: wrap; padding: 10px 14px 14px; }

.crew-sel { min-height: 200px; }
.crew-nosel { text-align: center; line-height: 1.6; padding: 40px 14px; }
.sel-top { display: flex; gap: 12px; align-items: center; padding: 4px 14px 0; }
.sel-name { font-weight: 700; padding: 4px 8px; margin-bottom: 4px; width: 100%; }
.sel-cond, .sel-stat { padding: 0 14px; margin-top: 10px; }
.sel-cond > span, .sel-stat > span { display: flex; justify-content: space-between; font-size: 10.5px; color: var(--ink-mute); letter-spacing: 0.08em; text-transform: uppercase; }
.sel-cond > i, .sel-stat > i { display: block; height: 4px; border-radius: 2px; background: var(--track-solid); margin-top: 3px; overflow: hidden; }
.sel-cond > i > b, .sel-stat > i > b { display: block; height: 100%; background: linear-gradient(90deg, #2c9a7a, var(--teal)); }
.sel-stat b { color: var(--teal); }
.sel-stats { padding-bottom: 4px; }
.sel-facts { padding: 12px 20px 14px; font-size: 11.5px; color: var(--ink-mute); }
.panel > .kv + .sel-facts { padding-top: 0; }
.sel-facts b { color: var(--ink-hi); }
.sel-skill { margin: 10px 14px 0; font-size: 11.5px; color: var(--amber); background: rgba(231, 181, 77, 0.08); border: 1px solid rgba(231, 181, 77, 0.25); border-radius: 9px; padding: 8px 11px; }
.sel-skill.quiet { color: var(--ink-mute); background: none; border-color: var(--line-btn); }
.preset-row { display: flex; gap: 8px; padding: 0 14px 14px; }
.preset { flex: 1; text-align: left; padding: 9px 11px; border-radius: 10px; font: inherit; font-size: 12px; font-weight: 700; color: var(--ink-faint); background: rgba(var(--deep-rgb), 0.5); border: 1px dashed var(--line-btn); cursor: default; }
.preset.has { color: var(--ink-hi); background: var(--well-deep); border-style: solid; cursor: pointer; }
.preset-sub { display: block; font-size: 10px; color: var(--ink-faint); font-weight: 400; }
.dialog-field { display: flex; flex-direction: column; gap: 4px; margin: 10px 0; font-size: 12px; color: var(--ink-mute); }
/* .field's flex basis is a width in a row; stacked in a column it would become a height. */
.dialog-field .field { flex: none; }

@media (max-width: 900px) {
  .crew-grid { grid-template-columns: 1fr; }
  .crew-side { position: static; }
}
.build-stats { color: var(--ink-faint); }
.enh-log { font-size: 11.5px; color: var(--ink-faint); white-space: nowrap; }
.enh-gain { display: block; font-size: 11px; color: var(--teal); font-weight: 400; white-space: normal; max-width: 220px; }
.quest-row.on { background: rgba(88, 196, 196, 0.06); }
.quest-rewards { color: var(--ink-dim); }

/* On a phone the drawn hull has no room for seats you can tap; the same
   seats lay out as labelled rows instead, and the drawing steps aside. */
@media (max-width: 720px), ((max-height: 520px) and (pointer: coarse)) {
  .crew-board { aspect-ratio: auto; display: flex; flex-wrap: wrap; gap: 6px 8px; padding: 10px 12px 4px; margin: 0; background: none; }
  .crew-hull { display: none; }
  .crew-counter { position: static; flex: 1 1 100%; margin-bottom: 4px; font-size: 11px; }
  .seat-bar { position: static !important; transform: none !important; width: auto !important; flex: 1 1 100%; text-align: left; padding: 3px 8px; font-size: 11px; margin-top: 4px; }
  .seat-wrap { position: static !important; transform: none !important; flex-wrap: wrap; gap: 6px; }
  .seat { width: 46px; height: 46px; }
  .seat-mono { font-size: 12px; }
  .cabin-row { padding-top: 6px; }
  .seat-bar.static { width: auto; margin: 4px 0 6px; text-align: left; padding: 3px 8px; }
  .crew-stats .stat { flex: 1 1 45%; }
}
.enh-fs { display: inline-flex; align-items: center; gap: 5px; margin-left: 10px; font-size: 11px; color: var(--ink-mute); white-space: nowrap; }
.enh-fs .purse-inline.narrow { width: 52px; }
.enh-fs-note { color: var(--ink-faint); }

/* ---- Quests ---------------------------------------------------------- */
.quest { display: flex; gap: 14px; align-items: flex-start; padding: 12px 22px; border-top: 1px solid rgba(var(--line-rgb), 0.08); }
.quest.wanted { background: rgba(88, 196, 196, 0.05); }
.quest-main { flex: 1; min-width: 0; }
.quest-name { font-weight: 600; color: var(--ink-hi); }
.quest-tag { margin-left: 8px; font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--teal); }
.quest-where { font-size: 12px; color: var(--ink-mute); margin: 2px 0 8px; }
.quest-rewards { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.reward { display: inline-flex; align-items: center; gap: 5px; padding: 3px 8px 3px 4px; border-radius: 999px; background: rgba(var(--deep-rgb), 0.7); border: 1px solid var(--line-btn); font-size: 12px; color: var(--ink-dim); }
.reward.wanted { border-color: rgba(88, 196, 196, 0.5); color: var(--ink-hi); }
.reward b { color: var(--ink-hi); font-weight: 600; }
.reward-icon { width: 20px; height: 20px; border-radius: 4px; }
.quest-or { font-size: 11px; color: var(--ink-faint); font-style: italic; }
.quest-actions { display: flex; flex-direction: column; gap: 6px; align-items: flex-end; flex: none; }
.quest-check { flex: none; width: 16px; height: 16px; margin-top: 3px; accent-color: var(--teal); cursor: pointer; }
.quest-star { flex: none; border: 0; background: none; color: rgba(255, 215, 122, 0.35); font-size: 16px; line-height: 1; cursor: pointer; padding: 0 2px; margin-top: 1px; }
.quest-star.on { color: var(--star); text-shadow: 0 0 6px rgba(255, 215, 122, 0.5); }
.quest-codex { color: inherit; text-decoration: none; border-bottom: 1px dotted rgba(var(--line-rgb), 0.35); }
.quest-codex:hover { color: var(--teal); border-bottom-color: var(--teal); }
.quest-recall { font-size: 11px; color: var(--ink-mute); margin-top: 4px; }
.quest-bulk { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 8px 12px; margin: 0 0 12px; border-radius: var(--r-btn); background: rgba(88, 196, 196, 0.08); border: 1px solid rgba(88, 196, 196, 0.25); font-size: 12.5px; }
.quest-groups { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 8px; }
.quest-group { display: inline-flex; align-items: center; gap: 6px; }
.quest-group .map-x { margin-left: 0; }
.quest.selected { background: rgba(255, 215, 122, 0.06); }
.crew-setups { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: 8px 0 0; width: 100%; }
.crew-mastery { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 8px 0 0; width: 100%; }
.crew-mastery .field { width: 90px; }
.quest-total { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: 12px 22px 16px; border-top: 1px solid rgba(var(--line-rgb), 0.08); font-size: 12px; color: var(--ink-mute); }
.get-quests { margin: 0 0 14px; font-size: 12.5px; color: var(--ink-mute); }
@media (max-width: 720px), ((max-height: 520px) and (pointer: coarse)) {
  /* The row holds: tick, star and name share the first line, and only
     the buttons drop to a line of their own. Stacked as a column, one
     day's list ran eleven thousand pixels. */
  .quest { flex-wrap: wrap; gap: 8px 10px; padding: 10px 14px; }
  .quest-actions { flex: 1 0 100%; flex-direction: row; flex-wrap: wrap; justify-content: flex-end; align-items: center; }
}
/* A yellow row has three verdicts; they wrap inside their column rather
   than shoving the column under the row. */
.enh-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; max-width: 250px; }

/* ---- Courses: community loops drawn beneath the route ---------------- */
.map-courses { margin-top: 14px; padding-top: 12px; border-top: 1px solid rgba(var(--line-rgb), 0.12); }
.map-courses-head { font-family: var(--font-display); font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 8px; }
.map-course { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; padding: 8px 10px; border-radius: var(--r-btn); border: 1px solid var(--line-btn); background: rgba(var(--deep-rgb), 0.5); color: var(--ink); font: inherit; cursor: pointer; }
.map-course:hover { border-color: rgba(240, 130, 190, 0.5); }
.map-course.on { border-color: rgba(240, 130, 190, 0.7); background: rgba(240, 130, 190, 0.1); }
.map-course-dot { flex: none; width: 10px; height: 10px; border-radius: 50%; border: 2px solid rgba(240, 130, 190, 0.8); background: none; }
.map-course.on .map-course-dot { background: #f082be; box-shadow: 0 0 8px rgba(240, 130, 190, 0.7); }
.map-course-note { margin: 6px 2px 0; font-size: 11.5px; line-height: 1.45; color: var(--ink-mute); }

.map-course-line { z-index: 1; }
.map-course-glow { fill: none; stroke: #f082be; stroke-width: 8; stroke-linecap: round; stroke-linejoin: round; opacity: 0.14; }
.map-course-path { fill: none; stroke: #f082be; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; opacity: 0.8; }
.map-waypoint { position: absolute; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: 2px; pointer-events: none; z-index: 2; color: rgba(255, 200, 230, 0.8); font-family: var(--font-display); font-size: 9px; white-space: nowrap; }
.map-waypoint-dot { width: 7px; height: 7px; border-radius: 50%; background: #f082be; border: 1.5px solid rgba(255, 240, 248, 0.8); box-shadow: 0 0 6px rgba(0, 0, 0, 0.6); }
.map-waypoint.stop .map-waypoint-dot { width: 10px; height: 10px; }
.map-waypoint-name { text-shadow: 0 1px 4px #000; }
.map-waypoint:not(.stop) .map-waypoint-name { display: none; }

/* A sailor's portrait fills the tile; the race colour shows as its rim. */
.sailor-face { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; display: block; }
.seat-mono, .roster-tile { overflow: hidden; }
.roster-tile .roster-cond { z-index: 1; }

/* A link that acts, inside running text. */
.link-btn { background: none; border: 0; padding: 0; font: inherit; color: #6db9e8; cursor: pointer; }
.link-btn:hover { color: #a5d5f2; text-decoration: underline; }

/* ---- Hunt: monster grounds and the courses through them ------------ */
.map-courses-credit { font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--ink-faint); margin-left: 6px; }
.map-hunt-kind { font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-faint); margin: 10px 0 4px; }
.map-hunt { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; padding: 6px 10px; margin-bottom: 4px; border-radius: var(--r-btn); border: 1px solid var(--line-btn); background: rgba(var(--deep-rgb), 0.5); color: var(--ink); font: inherit; cursor: pointer; }
.map-hunt:hover { border-color: var(--hunt); }
.map-hunt.on { border-color: var(--hunt); background: color-mix(in srgb, var(--hunt) 12%, transparent); }
.map-hunt-dot { flex: none; width: 10px; height: 10px; border: 2px solid var(--hunt); background: none; opacity: 0.7; }
.map-hunt-dot.adult { border-radius: 50%; }
.map-hunt-dot.young { border-radius: 2px; }
.map-hunt-dot.ship { transform: rotate(45deg); border-radius: 1px; }
.map-hunt-dot.boss { border-radius: 50%; box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.5), 0 0 0 4px var(--hunt); width: 6px; height: 6px; margin: 2px; }
.map-hunt-dot.pirate { border-radius: 50%; background: var(--hunt); border-color: transparent; }
.map-hunt.on .map-hunt-dot { background: var(--hunt); opacity: 1; box-shadow: 0 0 8px var(--hunt); }
.map-hunt .map-row-sub { white-space: normal; }
.map-hunt-layer { position: absolute; left: 0; top: 0; z-index: 1; pointer-events: none; will-change: transform; transform-origin: 0 0; }
.map-course-layer { position: absolute; inset: 0; pointer-events: none; z-index: 1; }
.map-waypoint[hidden] { display: none; }

/* Anything on the chart that is hidden is hidden: these set their own
   display, which would otherwise outrank the attribute and leave a
   culled pin standing where it last was. */
.map-port[hidden], .map-pin[hidden], .map-steps[hidden], .map-tip[hidden], .map-wharf[hidden], .map-stash[hidden], .map-habitat[hidden], .map-label[hidden] { display: none; }
.map-label { position: absolute; left: 0; top: 0; transform: translate(-50%, -50%); pointer-events: none; z-index: 1; font-family: var(--font-display); font-size: 10px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(214, 232, 246, 0.5); text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9), 0 0 6px rgba(0, 0, 0, 0.6); white-space: nowrap; }
.map-side-head-btns { display: flex; gap: 2px; }
.map.side-right .map-side, .map.side-right .map-side-pill { left: auto; right: 12px; }
.map.tracing { cursor: crosshair; }
.map.tool-pen { cursor: cell; }
.map.tool-text { cursor: text; }
/* The trace tab hands the sea to the pen: the chart's own markers stay
   in view as landmarks, but a stroke drawn across one goes through it
   instead of opening its card. */
.map.free-hand .map-pin, .map.free-hand .map-port, .map.free-hand .map-habitat, .map.free-hand .map-wharf, .map.free-hand .map-stash { pointer-events: none; }
/* A stop or a word already on the sea is picked up and carried. */
.map.free-hand .map-trace-dot, .map.free-hand .map-trace-word { pointer-events: auto; cursor: grab; user-select: none; touch-action: none; }
.map.moving-mark, .map.moving-mark .map-trace-dot, .map.moving-mark .map-trace-word { cursor: grabbing; }
.map-trace-layer { position: absolute;
  left: 0;
  top: 0; inset: 0; pointer-events: none; z-index: 2; }
.map-trace-art { position: absolute; inset: 0; }
.map-trace-glow { fill: none; stroke: #7ef0d4; stroke-width: 8; stroke-linecap: round; stroke-linejoin: round; opacity: 0.14; }
.map-trace-path { fill: none; stroke: #7ef0d4; stroke-width: 2; stroke-dasharray: 7 5; stroke-linecap: round; stroke-linejoin: round; opacity: 0.9; }
.map-trace-stroke { fill: none; stroke: #ffd77a; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; opacity: 0.9; }
.map-trace-dot { position: absolute; transform: translate(-50%, -50%); width: 20px; height: 20px; border-radius: 50%; background: #0b1622; border: 2px solid #7ef0d4; color: #7ef0d4; font: 700 10.5px var(--font-display); display: flex; align-items: center; justify-content: center; pointer-events: auto; box-shadow: 0 1px 4px #000; }
.map-trace-dot.noted { border-color: #ffd77a; color: #ffd77a; }
.map-trace-note { position: absolute; left: 24px; top: 50%; transform: translateY(-50%); white-space: nowrap; font: 500 10.5px var(--font-body, inherit); color: #f3e9c8; text-shadow: 0 1px 3px #000, 0 0 6px rgba(0, 0, 0, 0.7); pointer-events: none; }
.map-trace-stops { display: flex; flex-direction: column; gap: 4px; margin: 8px 0; }
.map-trace-stop { display: flex; align-items: center; gap: 6px; }
.map-trace-stop .field { flex: 1; min-width: 0; }
.map-trace-n { flex: none; width: 20px; height: 20px; border-radius: 50%; border: 1px solid #7ef0d4; color: #7ef0d4; font-size: 10.5px; display: flex; align-items: center; justify-content: center; }
.map-trace-notes { resize: vertical; min-height: 44px; margin-top: 6px; }
.map-trace-word { position: absolute; transform: translate(-50%, -50%); white-space: nowrap; max-width: 260px; overflow: hidden; text-overflow: ellipsis; font-family: var(--font-display); font-weight: 600; letter-spacing: 0.04em; line-height: 1.2; text-shadow: 0 1px 3px #000, 0 0 6px rgba(0, 0, 0, 0.75); pointer-events: none; z-index: 2; }
.map-trace-word.plate { padding: 2px 7px; border-radius: 5px; background: rgba(6, 14, 22, 0.72); border: 1px solid rgba(255, 255, 255, 0.1); text-shadow: 0 1px 2px #000; }
.map-trace-write { position: absolute; transform: translate(-50%, -50%); width: 150px; padding: 3px 7px; border-radius: 5px; background: rgba(6, 14, 22, 0.9); border: 1px dashed currentColor; font-family: var(--font-display); font-weight: 600; letter-spacing: 0.04em; pointer-events: auto; z-index: 3; }
.map-trace-write:focus { outline: none; box-shadow: 0 0 0 2px rgba(126, 240, 212, 0.35); }
.map-trace-n.word { cursor: pointer; background: none; }
.map-inks { display: flex; flex-wrap: wrap; gap: 5px; margin: 8px 0 6px; }
.map-ink { width: 20px; height: 20px; border-radius: 50%; background: var(--ink); border: 2px solid transparent; box-shadow: 0 1px 3px #000; cursor: pointer; padding: 0; }
.map-ink.on { border-color: var(--ink-hi); transform: scale(1.12); }
.map-style-row { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.map-style-label { font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted, #8ea6bb); }
.map-pens { display: flex; gap: 3px; }
.map-pen { min-width: 26px; height: 24px; display: flex; align-items: center; justify-content: center; padding: 0 5px; border-radius: 5px; border: 1px solid rgba(255, 255, 255, 0.16); background: rgba(255, 255, 255, 0.04); color: inherit; cursor: pointer; }
.map-pen.wide { padding: 0 8px; font-size: 10.5px; letter-spacing: 0.08em; }
.map-pen.on { border-color: #7ef0d4; background: rgba(126, 240, 212, 0.14); }
.map-pen-bar { display: block; width: 16px; border-radius: 3px; }
/* A kept trace laid over the chart is a memory of a route, not the one
   in hand: quieter, and it does not answer the pointer. */
.map-trace-ghost { position: absolute; inset: 0; opacity: 0.55; }
.map-trace-ghost .map-trace-dot { width: 15px; height: 15px; font-size: 9px; pointer-events: none; }
.map-trace-ghost .map-trace-word { opacity: 0.9; }

/* ---- the shelf of kept traces -------------------------------------- */
.trace-shelf { display: flex; flex-direction: column; gap: 6px; margin: 6px 0 4px; }
.trace-card {
  display: grid;
  grid-template-columns: auto auto 1fr;
  align-items: center;
  gap: 8px;
  padding: 7px 8px;
  border: 1px solid rgba(var(--line-rgb), 0.16);
  border-radius: var(--r-tile, 8px);
  background: rgba(255, 255, 255, 0.02);
}
.trace-card.shown { border-color: rgba(255, 215, 122, 0.5); background: rgba(255, 215, 122, 0.07); }
.trace-card.open { box-shadow: inset 2px 0 0 var(--blue-bar, #7ef0d4); }
.trace-eye { width: 24px; height: 24px; border-radius: 50%; border: 1px solid rgba(var(--line-rgb), 0.3); background: none; color: var(--ink-off); font-size: 12px; cursor: pointer; padding: 0; }
.trace-card.shown .trace-eye { color: var(--star); border-color: rgba(255, 215, 122, 0.6); }
.trace-thumb-box { width: 52px; height: 34px; border-radius: 5px; background: rgba(var(--deep-rgb), 0.6); border: 1px solid rgba(var(--line-rgb), 0.12); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.trace-thumb { width: 52px; height: 34px; fill: none; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.trace-card-main { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.trace-card-name { font-family: var(--font-display); font-weight: 600; font-size: 12.5px; letter-spacing: 0.03em; color: var(--ink-hi, #e8f2fb); display: flex; align-items: center; gap: 6px; }
.trace-card-tag { font-size: 9px; letter-spacing: 0.12em; text-transform: uppercase; color: #7ef0d4; border: 1px solid rgba(126, 240, 212, 0.4); border-radius: 3px; padding: 0 4px; }
.trace-card-tag.lane { color: var(--star); border-color: rgba(255, 215, 122, 0.45); }
.trace-card-sub { font-size: 10.5px; color: var(--ink-off); }
.trace-card-note { font-size: 10.5px; color: var(--ink-off); opacity: 0.8; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.trace-card-btns { grid-column: 1 / -1; display: flex; gap: 4px; justify-content: flex-end; }
.ghost-btn.tiny { padding: 3px 9px; font-size: 11px; }

/* ---- what the chart draws, above every tab -------------------------- */
.map-layers { border-bottom: 1px solid rgba(var(--line-rgb), 0.12); padding: 0 10px 0; flex: none; }
.map-layers-head {
  display: flex; align-items: center; gap: 6px; width: 100%;
  padding: 7px 2px; background: none; border: none; cursor: pointer;
  font-family: var(--font-display); font-size: 10px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-mute);
}
.map-layers-head:hover { color: var(--ink-hi); }
.map-layers-caret { font-size: 9px; opacity: 0.7; }
.map-layers-head .map-courses-credit { margin-left: auto; }
.map-chips { display: flex; flex-wrap: wrap; gap: 4px; padding: 0 0 8px; }
.map-chip {
  display: flex; align-items: center; gap: 5px;
  padding: 4px 9px 4px 6px;
  border: 1px solid rgba(var(--line-rgb), 0.18); border-radius: 14px;
  background: rgba(255, 255, 255, 0.02); color: var(--ink-off);
  font-size: 11px; font-weight: 600; letter-spacing: 0.02em; cursor: pointer;
}
.map-chip-dot { width: 7px; height: 7px; border-radius: 50%; opacity: 0.45; }
.map-chip.on { color: var(--ink-hi); border-color: rgba(var(--line-rgb), 0.45); background: rgba(var(--line-rgb), 0.1); }
.map-chip.on .map-chip-dot { opacity: 1; box-shadow: 0 0 6px currentColor; }

/* ---- the traces library -------------------------------------------- */
.dialog-box.wide { max-width: 900px; }
.lib-bar { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; }
.lib-bar .field { flex: 1 1 100%; }
.lib-label { font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-off); margin-left: 6px; }
.lib-label:first-child { margin-left: 0; }
.trace-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)); gap: 8px; max-height: 52vh; overflow-y: auto; padding: 2px; }
.trace-grid .trace-card { grid-template-columns: auto auto 1fr; }
.trace-grid .trace-thumb-box, .trace-grid .trace-thumb { width: 64px; height: 42px; }
@media (max-width: 720px), ((max-height: 520px) and (pointer: coarse)) { .trace-grid { grid-template-columns: 1fr; max-height: 46vh; } }

/* ---- a finger, not a pointer ---------------------------------------- */
/* The small crosses remove saved routes, traces, profiles, quest groups,
   fleet setups and storage rows. Drawn at 10 by 15 pixels they are a
   guess to hit with a thumb; the glyph stays small, the target does not. */
@media (pointer: coarse) {
  .map-x, .map-side-close {
    min-width: 32px;
    min-height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  /* iOS Safari zooms the page into any field set under 16px the moment
     it is focused, purse included. Sixteen it is, and the narrow fields
     grow enough to still hold their digits. */
  .field, .qty-val, .craft-n, .own-input, .purse-inline, .stat-in,
  input[type="text"], input[type="number"], input[type="search"], select, textarea {
    font-size: 16px;
  }
  .purse-inline { width: 108px; }
  .purse-inline.narrow, .enh-fs .purse-inline.narrow { width: 64px; }
  .stat-in { width: 64px; }

  /* Forty pixels under a finger, whatever the glyph measures. The small
     buttons keep their drawn size -- a 40px fold caret would push every
     tree row apart -- and grow an invisible halo that takes the tap
     instead; the ones with room to grow simply grow. */
  .tcaret:not(.empty):not(.open), .info-dot, .detail-close, .chip, .seg, .map-x, .map-side-close { position: relative; }
  .tcaret:not(.empty):not(.open)::after, .info-dot::before, .detail-close::before,
  .chip::before, .seg::before {
    content: '';
    position: absolute;
    inset: -5px;
  }
  .tcaret:not(.empty):not(.open)::after { inset: -10px; }
  .info-dot::before { inset: -13px; }
  .detail-close::before { inset: -7px; }
  .seg::before { inset: -7px 0; }
  .map-x, .map-side-close { min-width: 40px; min-height: 40px; }
  .sq-btn { width: 40px; height: 40px; }
  .stepper button { width: 40px; height: 40px; }
  .stepper .val { height: 40px; }
  .tabbar-btn { min-height: 40px; }
}

/* ---- a phone on its side ------------------------------------------- */
/* Nothing here was sized for 400 pixels of height. The section bar
   drops its labels to a single row of icons, the sheets and dialogs
   take what height there is, and the chart keeps its full width. */
@media (max-height: 520px) and (pointer: coarse) {
  .tabbar-label { display: none; }
  .tabbar-btn { padding: 5px 2px 4px; }
  .dialog-box { max-height: calc(100dvh - 16px); overflow-y: auto; }
  .map { height: calc(100dvh - 120px); min-height: 220px; }
}

/* ---- the phone's section bar --------------------------------------- */
/* Nine sections do not fit a thumb, and a row that scrolls sideways
   hides what is past its edge. Four sit here; "All" opens the rest. */
.tabbar { display: none; }
.sheet-head { font-family: var(--font-display); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-off); margin: 14px 0 8px; }
.sheet-head:first-of-type { margin-top: 4px; }
.sheet-note { text-transform: none; letter-spacing: 0.02em; opacity: 0.7; }
.sheet-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.sheet-tab {
  position: relative;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 14px 6px 12px;
  border: 1px solid var(--line); border-radius: var(--r-tile, 8px);
  background: rgba(255, 255, 255, 0.03); color: var(--ink);
  font-family: var(--font-display); font-size: 12px; font-weight: 600; letter-spacing: 0.04em;
  cursor: pointer;
}
.sheet-tab.active { border-color: var(--blue-bar, #7ef0d4); color: var(--blue-hi); background: rgba(126, 240, 212, 0.08); }
.sheet-icon { font-size: 18px; opacity: 0.85; }
.sheet-count { position: absolute; top: 6px; right: 8px; font-family: var(--font-body); font-size: 10px; font-weight: 700; background: var(--blue-glow); color: var(--blue); border-radius: 9px; padding: 1px 6px; }

/* The rest of the menu: a list, one line each, the icon at the left
   and what it does in small type under the name. */
.sheet-list { display: flex; flex-direction: column; gap: 2px; }
.sheet-item {
  display: flex; align-items: center; gap: 12px;
  width: 100%; padding: 8px 10px;
  border: 1px solid transparent; border-radius: var(--r-btn);
  background: none; color: var(--ink); text-align: left; font: inherit; cursor: pointer;
}
.sheet-item:hover:not(:disabled) { background: rgba(var(--blue-rgb), 0.1); border-color: rgba(var(--blue-rgb), 0.3); }
.sheet-item:disabled { opacity: 0.45; cursor: default; }
.sheet-item.danger:hover:not(:disabled) { background: rgba(232, 122, 109, 0.12); border-color: var(--red-edge); }
.sheet-item.danger .sheet-item-text > span { color: var(--red-soft); }
.sheet-item-icon { flex: none; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 7px; background: rgba(var(--line-rgb), 0.1); font-size: 14px; color: var(--ink-mid); }
.sheet-item-text { display: flex; flex-direction: column; min-width: 0; }
.sheet-item-text > span { font-size: 13px; font-weight: 600; color: var(--ink-hi); }
.sheet-item-text > small { font-size: 11px; color: var(--ink-faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* On a wide screen the menu is a drawer at the right edge, the full
   height of the window, in from the edge rather than up from the
   bottom; the veil is the same. */
@media (min-width: 721px) {
  .dialog:has(> .menu-sheet) { justify-content: flex-end; align-items: stretch; padding: 0; }
  .dialog-box.menu-sheet {
    max-width: 380px; width: 380px; max-height: none; height: 100%;
    border-radius: 0; border-width: 0 0 0 1px;
    padding: 20px 18px 24px;
    animation: drawerIn 0.2s ease;
  }
  @keyframes drawerIn { from { transform: translateX(24px); opacity: 0; } to { transform: none; opacity: 1; } }
  .menu-sheet .sheet-grid { grid-template-columns: repeat(3, 1fr); }
  .menu-sheet .sheet-tab { padding: 10px 4px 9px; font-size: 11.5px; }
  /* The dock already shows the sections, so the drawer leads with
     the verbs and keeps the sections for the end. */
  .dialog-box.menu-sheet { display: flex; flex-direction: column; }
  .menu-sheet > h2 { order: 0; }
  .menu-sheet .sheet-rest { order: 1; }
  .menu-sheet .sheet-sections { order: 2; margin-top: 8px; }
  .menu-sheet .dialog-actions { order: 3; }
}
@media (prefers-reduced-motion: reduce) { .dialog-box.menu-sheet { animation: none; } }

@media (max-width: 720px), ((max-height: 520px) and (pointer: coarse)) {
  .tabs { display: none; }
  .shell { padding-bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }
  /* The pouch is pulled up by the height of the tab row's margin so it
     sits tight beneath it. With the row gone there is nothing above it
     to tuck under but the title itself, which it was covering. */
  .pouch { margin-top: 0; }
  .tabbar {
    display: flex;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 40;
    padding: 4px 4px calc(4px + env(safe-area-inset-bottom, 0px));
    background: rgba(var(--deep-rgb), 0.96);
    border-top: 1px solid rgba(var(--line-rgb), 0.18);
    backdrop-filter: blur(10px);
  }
  .tabbar-btn {
    position: relative;
    flex: 1 1 0;
    min-width: 0;
    display: flex; flex-direction: column; align-items: center; gap: 3px;
    padding: 7px 2px 6px;
    background: none; border: none; border-radius: 8px;
    color: var(--ink-off);
    font-family: var(--font-display); font-size: 10.5px; font-weight: 600; letter-spacing: 0.04em;
  }
  .tabbar-btn.active { color: var(--blue-hi); background: rgba(126, 240, 212, 0.08); }
  .tabbar-icon { font-size: 16px; line-height: 1; }
  .tabbar-label { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .tabbar-count {
    position: absolute; top: 2px; right: 50%; margin-right: -22px;
    font-family: var(--font-body); font-size: 9.5px; font-weight: 700;
    background: var(--blue-glow); color: var(--blue);
    border-radius: 9px; padding: 0 5px;
  }
  /* The toast rides above the bar rather than behind it. */
  .toast { bottom: calc(78px + env(safe-area-inset-bottom, 0px)); }
}

/* the game's-map export: the block to paste, and its small options */
.map-xml {
  width: 100%;
  box-sizing: border-box;
  margin: 8px 0;
  padding: 8px 10px;
  font: 11.5px/1.45 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  color: var(--ink-mid);
  background: var(--bg-deep, rgba(var(--shade-rgb), 0.25));
  border: 1px solid var(--line-btn);
  border-radius: 6px;
  resize: vertical;
  white-space: pre;
  tab-size: 2;
  overflow: auto;
}
.map-game-fit { color: var(--ink-hi); }
.map-game-opt { margin: 0 0 4px; font-size: 12.5px; }
.map-game-btns { display: flex; gap: 8px; margin: 0 0 10px; }
.map-game-btns .ghost-btn { flex: 1; }
.map-game-how { margin: 0 0 12px; font-size: 12.5px; color: var(--ink-dim); }
.map-game-how summary { cursor: pointer; color: var(--ink-mid); }
.map-game-how ol { margin: 8px 0 8px 18px; padding: 0; }
.map-game-how li { margin: 0 0 6px; line-height: 1.5; }
.map-game-how code { font-size: 11px; word-break: break-all; }
.map-game-direct { margin: 4px 0 12px; padding: 10px 12px; border: 1px solid var(--line-btn); border-radius: 8px; }
.map-game-direct-head { font-family: var(--font-display); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-hi); margin: 0 0 6px; }
.map-game-direct p { margin: 0 0 8px; }
.map-game-direct .map-game-btns { margin: 0; flex-wrap: wrap; }
.map-game-btns .ghost-btn:disabled { opacity: 0.5; cursor: default; }
.map-game-nodirect { font-size: 12px; color: var(--ink-dim); margin: 0 0 12px; }
.map-game-loop { margin: 0 0 10px; }
.map-game-loop label { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--ink-mid); }
.map-game-loopnote { margin: 6px 0 0; font-size: 11.5px; color: var(--ink-dim); }

/* ---- Quests: done ticks, the clocks, a lit reward ---- */
.quest.done { opacity: 0.62; }
.quest.done .quest-name { text-decoration: line-through; text-decoration-color: rgba(var(--line-rgb), 0.45); }
.quest-done-tag { font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--teal); white-space: nowrap; }
.quest-chain { padding: 8px 22px 0; font-size: 12px; color: var(--amber); }
.quest-clocks { display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: baseline; margin: 0 0 12px; font-size: 12.5px; color: var(--ink-mute); }
.quest-clocks b { color: var(--ink-hi); font-family: var(--font-display); font-weight: 600; }
.quest-clocks-note { font-size: 11px; color: var(--ink-faint); }
.reward.lit { border-color: rgba(var(--blue-rgb), 0.7); box-shadow: 0 0 0 1px rgba(var(--blue-rgb), 0.25); }
.ready-chip.more { color: var(--ink-mute); }

/* ---- Today, on the Plan ---- */
.today { display: flex; gap: 14px; align-items: flex-start; margin: 0 0 16px; padding: 12px 16px; background: var(--panel-inset, rgba(var(--deep-rgb), 0.55)); border: 1px solid rgba(var(--line-rgb), 0.12); border-radius: var(--r-btn, 10px); }
.today-k { font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--teal); padding-top: 3px; white-space: nowrap; }
.today-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 8px 22px; flex: 1; min-width: 0; }
.today-tile { min-width: 0; }
.today-v { font-family: var(--font-display); font-size: 15px; font-weight: 600; color: var(--ink-hi); margin-top: 2px; overflow-wrap: anywhere; }
.today-v.faint { color: var(--ink-faint); font-weight: 500; }
.today-v b { color: var(--ink-hi); }
.today-in { font-size: 12px; font-weight: 500; color: var(--ink-mute); margin-left: 4px; }
.today-sub { font-size: 11px; color: var(--ink-faint); margin-top: 3px; }
.today-sub b { color: var(--ink-dim); }
.build-pace { color: var(--teal); }
.vell-row { display: flex; gap: 8px; margin: 8px 0; }
.vell-row .field { flex: 1; }
@media (max-width: 720px), ((max-height: 520px) and (pointer: coarse)) { .today { flex-direction: column; gap: 8px; } }

/* ---- Map: legs, cargo, saved routes, the ruler ---- */
.map-leg { margin-left: 8px; font-size: 10.5px; font-weight: 500; color: var(--teal); white-space: nowrap; flex: none; }
/* The leg's length and minutes keep their place beside the name: the
   name gives way with an ellipsis, the figures never do -- a "3…" is no
   distance. What a stop hands over may take a second line. */
.map-stop-row .map-row-name { display: flex; align-items: baseline; min-width: 0; }
.map-stop-row .map-row-name-t { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.map-stop-row .map-row-sub { white-space: normal; }
.map-row-sub.ok { color: var(--teal); }
.map-row-sub.warn { color: var(--amber); }
.map-stop-row.over { border-color: rgba(240, 180, 90, 0.35); }
.map-stop-row.over .map-stop-n { background: rgba(240, 180, 90, 0.18); color: var(--amber); }
.map-stats .chips { margin-top: 5px; }
.chip.tiny { padding: 2px 8px; font-size: 10.5px; }
.map-saved { margin-top: 12px; display: flex; flex-direction: column; gap: 5px; }
.map-saved-row { display: flex; gap: 6px; align-items: center; }
.map-saved-row .map-row { flex: 1; }
.map-coords { position: absolute; left: 10px; bottom: 10px; z-index: 4; padding: 3px 8px; border-radius: var(--r-btn); background: rgba(var(--deep-rgb), 0.78); border: 1px solid rgba(var(--line-rgb), 0.18); font-family: var(--font-display); font-size: 11px; color: var(--ink-mute); pointer-events: none; }
.map.measuring { cursor: crosshair; }
.map-measure-line { fill: none; stroke: #ffd77a; stroke-width: 2; stroke-dasharray: 6 5; }
.map-measure svg, .map-measure { pointer-events: none; }
.map-measure-label { position: absolute; transform: translate(-50%, -140%); padding: 3px 8px; border-radius: 999px; background: rgba(var(--deep-rgb), 0.88); border: 1px solid rgba(255, 215, 122, 0.5); color: #ffd77a; font-family: var(--font-display); font-size: 11.5px; white-space: nowrap; pointer-events: none; z-index: 5; }
.map-zoom .ghost-btn[aria-pressed="true"] { color: var(--amber); border-color: rgba(240, 180, 90, 0.5); }
.dialog-label { display: flex; align-items: center; gap: 8px; margin: 8px 0; font-size: 13px; color: var(--ink-dim); }
.dialog-label .field { flex: 1; }

/* ---- Find, the trip log, where it is ---- */
.jump { display: flex; flex-direction: column; gap: 10px; min-width: min(520px, 100%); }
.jump-in { font-size: 15px; padding: 10px 12px; }
.jump-list { display: flex; flex-direction: column; gap: 3px; max-height: 50vh; overflow-y: auto; }
.jump-row { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: var(--r-btn); border: 1px solid transparent; background: none; color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.jump-row:hover, .jump-row.on { background: rgba(var(--blue-rgb), 0.12); border-color: rgba(var(--blue-rgb), 0.35); }
.jump-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jump-own { font-size: 11px; color: var(--teal); white-space: nowrap; }
.jump-kind { font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-faint); white-space: nowrap; }
.jump-kinds { gap: 5px; }
.inv-kinds { margin-top: -2px; }
.jump-tab { font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-mute); width: 28px; }
.jump-hint { font-size: 11px; color: var(--ink-faint); }
.trip-rows { display: flex; flex-direction: column; gap: 6px; margin: 10px 0; max-height: 50vh; overflow-y: auto; }
.trip-row { display: flex; gap: 6px; }
.trip-row .trip-item { flex: 1; min-width: 0; }
.trip-row .trip-qty { width: 120px; }
.where-line { align-items: center; }
.where-edit { display: inline-flex; align-items: center; gap: 6px; }
.where-val { width: 72px; text-align: right; }
.where-add { margin-top: 6px; font-size: 12px; }
.detail-note { font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--ink-faint); }

/* ---- Profiles, Help extras ---- */
.profile-list { display: flex; flex-direction: column; gap: 6px; margin: 10px 0; }
.profile-row { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-radius: var(--r-btn); border: 1px solid rgba(var(--line-rgb), 0.12); background: var(--panel-inset, rgba(var(--deep-rgb), 0.55)); }
.profile-row.on { border-color: rgba(88, 196, 196, 0.45); }
.profile-name { flex: 1; font-weight: 600; color: var(--ink-hi); }
.profile-tag { margin-left: 6px; font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--teal); font-weight: 500; }
.profile-new { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 10px 0; }
.profile-new .field { flex: 1; min-width: 160px; }
.map-x.sure { color: var(--red-soft); width: auto; padding: 0 6px; font-size: 11px; }
.account-chip.off { font-size: 11px; color: var(--ink-mute); }
.help-more { margin: 12px 0 0; font-size: 13px; color: var(--ink-dim); }
.help-more summary { cursor: pointer; color: var(--ink); font-weight: 600; margin-bottom: 6px; }
.help-change { margin: 6px 0 10px; }
.help-change ul { margin: 4px 0 0 18px; padding: 0; }
.help-change li { margin: 2px 0; }
.help-data { display: flex; flex-direction: column; gap: 5px; margin: 6px 0; }

/* ---- What's new ---- */

/* Each headline is a picture and the paragraph it belongs to, in a card
   of its own -- eleven sections of running prose would read as a wall,
   and the pictures are the point. */
.news-rel { margin: -6px 0 10px; font-size: 12.5px; color: var(--ink-dim); }
.news-rel b { color: var(--teal); font-family: var(--font-display); letter-spacing: 0.4px; }
.news { display: flex; flex-direction: column; gap: 14px; margin: 14px 0 4px; }
.news-item {
  padding: 12px 14px;
  border-radius: var(--r-panel);
  border: 1px solid var(--line);
  background: rgba(var(--deep-rgb), 0.55);
}
.news-item.plain { padding: 0; border: 0; background: none; margin-bottom: 12px; }
.news-item h3 {
  margin: 0 0 8px;
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 600;
  color: var(--teal-hi, var(--teal));
  letter-spacing: 0.2px;
}
.news-item p { margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--ink); }
.news-shot {
  display: block;
  width: 100%;
  height: auto;
  margin: 0 0 10px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: rgba(var(--deep-rgb), 0.5);
}
.news-points { margin: 8px 0 0 18px; padding: 0; font-size: 12.5px; line-height: 1.5; color: var(--ink-dim); }
.news-points li { margin: 4px 0; }
.news-points b { color: var(--ink); }

/* ---- Shared plan, typed sailor stats ---- */
.shared-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 900; display: flex; gap: 10px; align-items: center; justify-content: center; flex-wrap: wrap; padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px)); background: rgba(var(--deep-rgb), 0.94); border-top: 1px solid rgba(240, 180, 90, 0.5); color: var(--amber); font-size: 13px; }
.shared-bar[hidden] { display: none; }
/* On a phone the section bar owns the bottom edge and already pads for
   the home indicator; this one stands on top of it rather than over it,
   so every section stays reachable while looking around a shared plan. */
@media (max-width: 720px), ((max-height: 520px) and (pointer: coarse)) {
  .shared-bar { bottom: var(--tabbar-h, 0px); padding-bottom: 10px; }
  .shell.shared { padding-bottom: calc(84px + 64px + env(safe-area-inset-bottom, 0px)); }
}
.stat-in { width: 52px; text-align: right; }
.sel-stat.typed b > .stat-in { color: var(--teal); }
.sel-note { font-size: 11px; color: var(--ink-faint); margin: 6px 0 2px; }
.field.select.inline { display: inline-block; width: auto; padding: 2px 6px; font-size: 12px; }

/* ---- Wharves ---- */
.map-wharf { position: absolute; left: 0; top: 0; width: 14px; height: 14px; margin: -7px 0 0 -7px; pointer-events: none; z-index: 2; font-size: 10.5px; color: #cfe3f5; text-shadow: 0 1px 4px #000; white-space: nowrap; }
.map-wharf-name { position: absolute; left: calc(100% + 4px); top: 50%; transform: translateY(-50%); }
.map-wharf-dot { display: flex; width: 100%; height: 100%; align-items: center; justify-content: center; font-size: 13px; line-height: 1; filter: drop-shadow(0 1px 2px #000); }
.map-wharf.guild { color: #d9c4ff; }
.map-course-dot.wharf { background: #cfe3f5; }

/* ---- Fitted out: editable ---- */
.fit-row { align-items: center; flex-wrap: wrap; }
.fit-row > span:first-child { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.fit-tag { font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-faint); }
.fit-tag.warn { color: var(--amber); }
.fit-edit { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.fit-stats { font-size: 11.5px; color: var(--ink-dim); }
.fit-sel { font-size: 12px; padding: 3px 6px; max-width: 220px; }
.fit-hint { font-size: 12px; color: var(--ink-faint); margin: 0 22px 8px; }
.map-as { color: var(--ink-dim); }
.map-as b { color: var(--ink-hi); }

/* ---- The picker ---- */
.picker { display: flex; flex-direction: column; gap: 10px; min-width: min(560px, 100%); }
.picker h2 { margin: 0; }
.picker-in { font-size: 14px; padding: 9px 12px; }
.picker-list { display: flex; flex-direction: column; gap: 2px; max-height: 52vh; overflow-y: auto; padding-right: 2px; }
.picker-group { font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-mute); padding: 8px 6px 3px; position: sticky; top: 0; background: var(--panel, #0a1728); z-index: 1; }
.picker-row { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: var(--r-btn); border: 1px solid transparent; background: none; color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.picker-row:hover, .picker-row.on { background: rgba(var(--blue-rgb), 0.12); border-color: rgba(var(--blue-rgb), 0.35); }
.picker-row.picked { background: rgba(78, 201, 174, 0.1); border-color: rgba(78, 201, 174, 0.4); }
.picker-row.off { opacity: 0.45; cursor: default; }
.picker-tick { width: 18px; height: 18px; border-radius: 4px; border: 1px solid var(--line-btn); display: inline-flex; align-items: center; justify-content: center; font-size: 12px; color: var(--teal); flex: none; }
.picker-row.picked .picker-tick { border-color: var(--teal); background: rgba(78, 201, 174, 0.15); }
.picker-icon { flex: none; display: inline-flex; }
.picker-icon img, .picker-icon .sailor-face { width: 30px; height: 30px; border-radius: 6px; object-fit: cover; }
.picker-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.picker-label { color: var(--ink-hi); font-weight: 600; }
.picker-sub { font-size: 11.5px; color: var(--ink-mute); }
.picker-meta { font-family: var(--font-display); font-size: 12px; color: var(--teal); white-space: nowrap; }
.picker-actions { align-items: center; }
.picker-count { flex: 1; font-size: 12px; color: var(--ink-mute); }

/* ---- Masthead and the dock: the section cells' icons and gaps ---- */
.tab-icon { opacity: 0.8; font-size: 16px; line-height: 1; }
.tab.active .tab-icon { opacity: 1; }
.tab-gap { width: 1px; align-self: stretch; margin: 6px 4px; background: rgba(var(--line-rgb), 0.25); }
.status-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; margin: 10px 0 12px; padding: 7px 14px; border-radius: var(--r-btn, 10px); background: rgba(var(--deep-rgb), 0.7); border: 1px solid rgba(var(--line-rgb), 0.16); font-size: 12.5px; color: var(--ink-dim); }
.status-bar[hidden] { display: none; }
.status-bit { background: none; border: 0; padding: 2px 4px; font: inherit; color: var(--ink-mute); border-radius: 6px; }
.status-bit b { color: var(--ink-hi); font-family: var(--font-display); font-weight: 600; }
button.status-bit { cursor: pointer; }
button.status-bit:hover { background: rgba(var(--blue-rgb), 0.12); color: var(--ink-hi); }
.status-sep { color: var(--ink-faint); }

/* ---- Crew: the ship card, slot cards, ticks ---- */
.ship-card { display: flex; flex-wrap: wrap; gap: 16px 28px; align-items: center; padding: 16px 22px; }
.ship-card-main { display: flex; align-items: center; gap: 14px; flex: 1 1 320px; min-width: 0; }
.ship-card-icon { width: 64px; height: 64px; border-radius: 12px; flex: none; }
.ship-card-text { min-width: 0; }
.ship-card-facts { display: flex; gap: 26px; flex-wrap: wrap; }
.ship-card-btns { display: flex; gap: 8px; flex-wrap: wrap; }
.slot-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 10px; padding: 0 14px 12px; }
.slot-card { display: flex; flex-direction: column; gap: 8px; padding: 10px 12px; border-radius: var(--r-btn); background: var(--panel-inset, rgba(var(--deep-rgb), 0.55)); border: 1px solid rgba(var(--line-rgb), 0.12); }
.slot-card.unowned { border-color: rgba(240, 180, 90, 0.4); }
.slot-card.empty { border-style: dashed; }
.slot-head { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.slot-glyph { color: var(--teal); font-size: 13px; }
.slot-name { font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-mute); }
.slot-head .fit-tag { margin-left: auto; }
.slot-body { display: flex; align-items: center; gap: 10px; }
.slot-icon { width: 44px; height: 44px; border-radius: 8px; flex: none; }
.slot-icon.blank { display: inline-flex; align-items: center; justify-content: center; border: 1px dashed rgba(var(--line-rgb), 0.3); color: var(--ink-faint); font-size: 20px; }
.slot-text { min-width: 0; }
.slot-part { color: var(--ink-hi); font-weight: 600; font-size: 13px; overflow-wrap: anywhere; }
.slot-part b { color: var(--teal); }
.slot-stats { font-size: 11px; color: var(--ink-dim); margin-top: 2px; }
.slot-btns { display: flex; gap: 6px; flex-wrap: wrap; }
.roster-card { position: relative; }
.roster-card.ticked { border-color: rgba(78, 201, 174, 0.55); }
.roster-hit { position: absolute; inset: 0; background: none; border: 0; cursor: pointer; border-radius: inherit; }
.roster-check { position: absolute; top: 6px; right: 6px; z-index: 2; width: 20px; height: 20px; border-radius: 5px; border: 1px solid var(--line-btn); background: rgba(var(--deep-rgb), 0.7); color: var(--teal); font-size: 12px; cursor: pointer; padding: 0; }
.roster-check.on { border-color: var(--teal); background: rgba(78, 201, 174, 0.2); }
.crew-bulk { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 10px 14px 0; padding: 8px 12px; border-radius: var(--r-btn); background: rgba(78, 201, 174, 0.08); border: 1px solid rgba(78, 201, 174, 0.3); font-size: 12.5px; color: var(--ink-dim); }
.crew-bulk b { color: var(--teal); }
.hire-type { display: flex; align-items: center; gap: 12px; margin: 6px 0 12px; }
.hire-type b { color: var(--ink-hi); }

/* ---- Quests: the reward chips ---- */
.pay-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; width: 100%; }
.pay-chip { padding-right: 4px; }
.pay-chip .map-x { width: 18px; height: 18px; font-size: 12px; }

/* ---- Trip log rows ---- */
.trip-pick { flex: 1; min-width: 0; display: inline-flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: var(--r-btn); border: 1px solid var(--line-btn); background: var(--panel-inset, rgba(var(--deep-rgb), 0.55)); color: var(--ink-hi); font: inherit; text-align: left; cursor: pointer; }
.trip-pick.empty { color: var(--ink-faint); border-style: dashed; }
.trip-pick span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.trip-plus { font-size: 16px; color: var(--teal); }
.trip-row .map-x { flex: none; }

/* ---- Where it is: the same inputs as everywhere else ---- */
.where-line { padding: 4px 0; }
.where-val { width: 76px; text-align: right; padding: 4px 8px; border-radius: var(--r-btn); border: 1px solid var(--line-btn); background: var(--panel-inset, rgba(var(--deep-rgb), 0.7)); color: var(--ink-hi); font-family: var(--font-display); font-size: 13px; }
.where-val:focus { border-color: var(--blue-edge); outline: none; }
.tile-qty.short { color: var(--red-soft); font-size: 13px; }

/* ---- Audit fixes: folds, odds, tree search, peek link, ways, seat list ---- */
.row-fold { display: block; width: 100%; padding: 10px 22px; border: 0; background: rgba(var(--deep-rgb), 0.35); color: var(--ink-mute); font: inherit; font-size: 12.5px; text-align: left; cursor: pointer; }
.row-fold:hover { color: var(--ink-hi); }
.enh-odds.sure { color: var(--teal); }
.tsearch { max-width: 260px; }
.peek-open { display: block; margin-top: 8px; padding: 5px 8px; width: 100%; border-radius: 6px; border: 1px solid var(--line-btn); background: rgba(var(--blue-rgb), 0.1); color: var(--blue-hi); font: inherit; font-size: 12px; cursor: pointer; text-align: left; }
.row-ways { margin-top: 3px; font-size: 12px; }
.row-ways summary { cursor: pointer; color: var(--ink-mute); font-size: 11.5px; list-style: none; }
.row-ways summary::before { content: '▸ '; }
.row-ways[open] summary::before { content: '▾ '; }
.row-ways summary::-webkit-details-marker { display: none; }
.tcaret { min-width: 26px; min-height: 26px; font-size: 14px; }
.seat-list { display: none; flex-direction: column; gap: 10px; padding: 8px 14px 14px; }
.seat-list-group { display: flex; flex-direction: column; gap: 6px; }
.seat-list-seats { display: flex; flex-direction: column; gap: 4px; }
.seat-line { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: var(--r-btn); border: 1px solid rgba(var(--line-rgb), 0.14); background: var(--panel-inset, rgba(var(--deep-rgb), 0.55)); color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.seat-line.armed { border-color: rgba(78, 201, 174, 0.55); border-style: dashed; }
.seat-line.picked { border-color: rgba(70, 224, 200, 0.6); background: var(--picked); }
.seat-line-text small { display: block; color: var(--ink-mute); font-size: 11px; }
.seat-line .seat-mono { width: 34px; height: 34px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; overflow: hidden; }
.seat-line .seat-plus { width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; color: var(--ink-faint); border: 1px dashed rgba(var(--line-rgb), 0.3); border-radius: 8px; }
.seat-line .seat-lv, .seat-line .seat-cond { display: none; }

/* ---- The phone: denser rows, a compact pouch, a map that shows the sea ---- */
.pouch-list::after { content: ''; flex: none; width: 1px; }
@media (max-width: 720px), ((max-height: 520px) and (pointer: coarse)) {
	.crew-board { display: none; }
	.cabin-row { display: none; }
	.seat-list { display: flex; }
	.pouch { padding: 8px 10px; }
	.pouch-title { display: none; }
	.pouch-list { gap: 6px; }
	.pouch-item { padding: 6px 10px; min-width: 0; }
	.pouch-item .pouch-sub, .pouch-item .pouch-state { font-size: 10px; }
	.row { padding: 8px 12px; gap: 8px; }
	.row .row-meter { order: 3; flex: 1 1 100%; }
	.row .row-tail { gap: 6px; }
	.row .bar-legend { font-size: 10.5px; }
	.readybar-list { flex-wrap: nowrap; overflow-x: auto; }
	.summary { padding: 12px 14px; }
	.summary-stats { gap: 12px 18px; }
	.map-side { width: min(300px, 82vw); }
	.map-panel .map { min-height: 60vh; }
	.status-bar { font-size: 11.5px; padding: 6px 10px; }
	.status-bit { padding: 1px 3px; }
}

/* ---- Minimap: a grip to move it, a × to hide it ---- */
.map-mini { touch-action: none; }
.mini-grip { position: absolute; left: 4px; top: 2px; z-index: 3; font-size: 11px; letter-spacing: -2px; color: rgba(207, 227, 245, 0.7); cursor: grab; padding: 0 4px; user-select: none; }
.mini-grip:active { cursor: grabbing; }
.mini-hide { position: absolute; right: 2px; top: 2px; z-index: 3; width: 18px; height: 18px; border-radius: 4px; border: 0; background: rgba(var(--deep-rgb), 0.6); color: rgba(207, 227, 245, 0.8); font-size: 12px; line-height: 1; cursor: pointer; padding: 0; }
.mini-hide:hover { color: #fff; background: rgba(232, 122, 109, 0.4); }

/* ---- The map's header, on a phone ---- */
@media (max-width: 720px), ((max-height: 520px) and (pointer: coarse)) {
	.map-panel + .panel, .summary-title { font-size: 14px; }
	#screen .summary { gap: 10px 14px; }
	#screen .summary .summary-title { flex: 1 1 100%; }
	#screen .summary .summary-stats { gap: 8px 16px; }
	#screen .summary .summary-sub { display: none; }
	.map-zoom { margin-left: auto; }
}

/* A field in a column stays a field: the flex-grow that fills a
   toolbar row would fill a dialog's height instead. */
.dialog-box .field, .picker .field, .jump .field { flex: 0 0 auto; width: 100%; }
.trip-row .field, .vell-row .field, .profile-new .field, .dialog-label .field { width: auto; flex: 1 1 auto; }
.picker, .jump { min-width: 0; width: 100%; }
.picker-list, .jump-list { padding: 2px 2px 6px; }
.dialog-box { overflow-x: hidden; }

/* ---- The chart: habitat markers and the currents ---- */
.map-habitat { position: absolute; left: 0; top: 0; width: 44px; height: 44px; margin: -22px 0 0 -22px; z-index: 3; padding: 0; border: 0; background: none; color: #f3e35a; font: inherit; cursor: pointer; text-shadow: 0 1px 4px #000, 0 0 8px rgba(0, 0, 0, 0.8); }
.map-habitat.young { width: 34px; height: 34px; margin: -17px 0 0 -17px; }
.map-habitat-name { position: absolute; top: 100%; left: 50%; transform: translateX(-50%); margin-top: 1px; }
.map-habitat-sub { position: absolute; top: calc(100% + 15px); left: 50%; transform: translateX(-50%); }
.map-habitat-pic { width: 44px; height: 44px; object-fit: contain; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.8)); transition: transform 0.15s; }
.map-habitat:hover .map-habitat-pic, .map-habitat.on .map-habitat-pic { transform: scale(1.12); }
.map-habitat.on .map-habitat-name { color: #7ef0d4; }
.map-habitat-glyph { width: 34px; height: 34px; border-radius: 50%; border: 2px solid; display: inline-flex; align-items: center; justify-content: center; font-size: 16px; background: rgba(var(--deep-rgb), 0.6); }
.map-habitat .map-habitat-name { font-size: 11px; font-weight: 600; white-space: nowrap; }
.map-habitat-sub { font-size: 9.5px; color: #cfe3f5; white-space: nowrap; }
.map-habitat.young .map-habitat-pic { width: 34px; height: 34px; }
.map-habitat-art { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.map-habitat-count { position: absolute; right: -6px; top: -4px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 9px; background: #ffd77a; color: #14202c; font-size: 10.5px; font-weight: 700; line-height: 17px; text-align: center; text-shadow: none; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.6); }
.picker-icon img { background: rgba(var(--deep-rgb), 0.5); }
@media (max-width: 720px), ((max-height: 520px) and (pointer: coarse)) { .map-habitat { width: 34px; height: 34px; margin: -17px 0 0 -17px; } .map-habitat-pic { width: 34px; height: 34px; } .map-habitat-sub { display: none; } }
.map-hunt-pic { width: 26px; height: 26px; object-fit: contain; flex: none; filter: drop-shadow(0 1px 2px #000); }
.map-hunt[disabled] { opacity: 0.55; cursor: default; }
.map-row-sub.note { white-space: normal; color: var(--amber); }