/* The helm HUD: the engine telegraph, rudder, task checklist and fast-forward drawn over the
   harbour canvas. Like the globe's labels it sits on the 3D scene, so it keeps the scene's dark
   palette (the frozen --pc-globe-* values in fleet.css); restored from master when the fleet.css
   restyle dropped most of it, which left overlapping controls and full-size icons.
   Loaded after shell.css. The stage is the helm's container (fleet-entry moves the canvas into it). */
.pc-room--bridge .pc-stage { container: stage / inline-size; }
.pc-app.is-helm .pc-stage-head,
.pc-app.is-helm .pc-stage-tools,
.pc-app.is-helm .pc-stage-foot { visibility: hidden; }
.pc-helm {
  position: absolute; inset: 0; z-index: 3;
  container: helm / inline-size;
  display: grid; gap: 10px; padding: 2px 4px 4px; pointer-events: none;
  grid-template-columns: minmax(0, 340px) minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr) auto;
  grid-template-areas: "task clear" "console console";
}
/* the part of the chart the HUD leaves open: the helm camera centres the ship here */
.pc-helm-clear { grid-area: clear; min-height: 0; pointer-events: none; }
.pc-helm[hidden] { display: none; }
.pc-helm-task, .pc-helm-console { pointer-events: auto; }
.pc-helm-task, .pc-helm-console {
  background: rgba(9, 23, 29, 0.86); border: 1px solid rgba(148, 226, 208, 0.13); border-radius: 14px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.45), 0 2px 0 rgba(255, 255, 255, 0.02) inset;
  backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%);
}
.pc-helm-task { grid-area: task; align-self: start; max-height: 100%; overflow: auto; padding: 12px 14px 12px; display: grid; gap: 8px; align-content: start; }
.pc-helm-task-head { display: grid; gap: 8px; }
.pc-helm-tasks { width: 100%; }
.pc-helm-tasks button { flex: 1; justify-content: center; padding: 6px 8px; font-size: 12.5px; }
/* The chosen harbour task is the bright tab; the other remains a quiet chart-room blue. */
.pc-helm-tasks button:not([aria-pressed="true"]) { background: rgb(32, 59, 71); color: var(--pc-globe-text-2); }
.pc-helm-tasks button[aria-pressed="true"] { background: var(--pc-globe-text); color: #062019; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .28); }
.pc-helm-title { font-size: 19px; font-weight: 700; letter-spacing: .01em; }
.pc-helm-brief { font-size: 12.5px; color: var(--pc-globe-text-2); line-height: 1.45; }
.pc-helm-checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.pc-helm-checks li {
  display: grid; grid-template-columns: 16px 1fr auto; gap: 8px; align-items: center;
  padding: 6px 9px; border-radius: 9px; border: 1px solid rgba(148, 226, 208, 0.13);
  background: rgba(0, 0, 0, .2); font-size: 12.5px; color: var(--pc-globe-text-2);
  transition: border-color .2s, background .2s, color .2s;
}
.pc-helm-checks li svg { width: 15px; height: 15px; color: var(--pc-globe-amber); }
.pc-helm-checks li b { font: 600 11px var(--pc-globe-mono); color: var(--pc-globe-muted); font-variant-numeric: tabular-nums; }
.pc-helm-checks li.is-met { color: var(--pc-globe-text); border-color: rgba(95, 232, 196, .35); background: rgba(95, 232, 196, .08); }
.pc-helm-checks li.is-met svg { color: var(--pc-globe-accent); }
.pc-helm-meta { display: flex; gap: 14px; flex-wrap: wrap; font: 600 11px var(--pc-globe-mono); color: var(--pc-globe-muted); letter-spacing: .04em; }
.pc-helm-meta span:first-child { color: var(--pc-globe-amber); }
.pc-helm-note { font-size: 11px; color: var(--pc-globe-muted); }
.pc-helm-result[hidden] { display: none; }
.pc-helm-result { display: grid; gap: 8px; padding: 10px 12px; border-radius: 9px; border: 1px solid rgba(95, 232, 196, .4); background: rgba(95, 232, 196, .1); }
.pc-helm[data-status="failed"] .pc-helm-result { border-color: rgba(255, 138, 92, .45); background: rgba(255, 138, 92, .1); }
.pc-helm-result-title { font-weight: 700; color: var(--pc-globe-accent-soft); }
.pc-helm[data-status="failed"] .pc-helm-result-title { color: #ffc3a8; }
.pc-helm-result-text { font-size: 12.5px; color: var(--pc-globe-text); }
.pc-helm-result-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.pc-helm-result-actions .pc-btn { min-height: 44px; padding: 6px 12px; font-size: 13px; }
.pc-helm-result-actions .pc-btn--primary, .pc-helm-start.pc-btn--primary { background: linear-gradient(180deg, #b8ffe4, #5fe8c4); color: #062019; border: 1px solid transparent; font-weight: 700; } /* ruling 69: the one filled action */

.pc-helm-console {
  grid-area: console; display: grid; align-items: center; gap: 12px 18px; padding: 10px 14px;
  grid-template-columns: auto minmax(330px, 1.5fr) minmax(0, 1fr) auto;
}
.pc-helm-readouts { display: grid; grid-template-columns: repeat(2, auto); gap: 4px 18px; }
.pc-helm-readouts div { display: grid; gap: 2px; }
.pc-helm-readouts output { font: 680 22px var(--pc-globe-mono); font-variant-numeric: tabular-nums; letter-spacing: -.01em; white-space: nowrap; }
.pc-helm-block { display: grid; gap: 6px; min-width: 0; }
.pc-helm-block .pc-eyebrow output { color: var(--pc-globe-text); letter-spacing: .06em; }
.pc-helm-steps { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 3px; }
.pc-helm-step {
  min-height: 34px; padding: 3px 2px; border-radius: 7px; border: 1px solid rgba(148, 226, 208, 0.13);
  background: rgba(0, 0, 0, .25); color: var(--pc-globe-text-2); font: 600 10.5px/1.1 var(--pc-text); text-align: center;
}
.pc-helm-step:hover:not(:disabled) { border-color: rgba(148, 226, 208, 0.26); color: var(--pc-globe-text); }
.pc-helm-step.is-astern { color: #ffc3a8; }
.pc-helm-step[aria-pressed="true"] { background: linear-gradient(180deg, #b8ffe4, #5fe8c4); color: #062019; border-color: transparent; box-shadow: 0 0 18px rgba(95, 232, 196, .35); }
.pc-helm-step.is-astern[aria-pressed="true"] { background: linear-gradient(180deg, #ffd2bf, #ff8a5c); box-shadow: 0 0 18px rgba(255, 138, 92, .35); }
.pc-helm-step.is-stop[aria-pressed="true"] { background: linear-gradient(180deg, #f2f7f6, #b4c9c6); box-shadow: none; }
.pc-helm-step:disabled { opacity: .4; }
.pc-helm-rudder-row { display: grid; grid-template-columns: auto minmax(40px, 1fr) auto; gap: 6px; align-items: center; }
.pc-helm-rudder-row + .pc-helm-rudder-row { grid-template-columns: 1fr 1fr; }
.pc-helm-rudder-row .pc-btn { min-height: 32px; padding: 4px 10px; font-size: 12.5px; }
.pc-helm-rudder-gauge {
  position: relative; height: 14px; border-radius: 7px;
  background: linear-gradient(90deg, rgba(255, 90, 79, .35), rgba(255, 255, 255, .05) 45% 55%, rgba(57, 217, 138, .35));
  border: 1px solid rgba(148, 226, 208, 0.13);
}
.pc-helm-rudder-gauge::after { content: ""; position: absolute; left: 50%; top: 2px; bottom: 2px; width: 1px; background: rgba(255, 255, 255, .35); }
.pc-helm-rudder-gauge i {
  --rudder: 0; position: absolute; top: -3px; bottom: -3px; width: 4px; border-radius: 2px;
  left: calc(50% - 2px + var(--rudder) * (50% - 4px)); background: var(--pc-globe-text); box-shadow: 0 0 10px rgba(228, 241, 238, .6);
  transition: left .15s var(--pc-globe-ease);
}
.pc-helm-actions { display: grid; gap: 6px; }
.pc-helm-actions .pc-btn { min-height: 34px; padding: 6px 12px; font-size: 13px; justify-content: flex-start; }
.pc-helm-actions .pc-btn[aria-pressed="true"] { border-color: var(--pc-globe-accent); color: var(--pc-globe-accent-soft); }
.pc-helm-ff { display: grid; gap: 4px; grid-column: 1 / -1; }
.pc-helm-ff-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 3px; }
.pc-helm-ff-steps button {
  min-height: 28px; padding: 2px 4px; border-radius: 7px; border: 1px solid rgba(148, 226, 208, 0.13);
  background: rgba(0, 0, 0, .25); color: var(--pc-globe-text-2); font: 650 12px var(--pc-globe-mono);
}
.pc-helm-ff-steps button:hover { border-color: rgba(148, 226, 208, 0.26); color: var(--pc-globe-text); }
.pc-helm-ff-steps button[aria-pressed="true"] { background: linear-gradient(180deg, #b8ffe4, #5fe8c4); color: #062019; border-color: transparent; }
.pc-helm kbd {
  display: inline-block; min-width: 16px; padding: 0 4px; margin-left: 2px; border-radius: 4px;
  border: 1px solid rgba(148, 226, 208, 0.26); background: rgba(255, 255, 255, .05);
  font: 600 9.5px/15px var(--pc-globe-mono); color: var(--pc-globe-text-2); text-align: center; letter-spacing: 0; text-transform: none;
}
/* short stages: the checklist carries the goal, so the prose brief can go */
@media (max-height: 820px) {
  .pc-helm-brief, .pc-helm-note { display: none; }
  .pc-helm-task { gap: 6px; padding: 10px 12px; }
  .pc-helm-checks li { padding: 4px 8px; }
}
/* the stage, not the window, decides how much room the controls get */
@container helm (max-width: 980px) {
  .pc-helm-console { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 10px 14px; }
  .pc-helm-actions { grid-template-columns: 1fr; }
  .pc-helm-readouts output { font-size: 19px; }
}
/* a container query can't restyle its own container, so the helm's grid answers to the stage around it */
@container stage (max-width: 640px) {
  .pc-helm { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(110px, 1fr) auto; grid-template-areas: "task" "clear" "console"; }
  .pc-helm-brief, .pc-helm-note { display: none; }
  .pc-helm-checks { grid-template-columns: 1fr 1fr; }
}
.pc-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
@media (max-width: 900px) {
  .pc-app.is-helm .pc-stage { height: min(94svh, 880px); min-height: 700px; }
  .pc-helm { padding: 8px; gap: 8px; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(120px, 1fr) auto; grid-template-areas: "task" "clear" "console"; }
  .pc-helm-task { padding: 10px 12px; gap: 6px; }
  .pc-helm-brief, .pc-helm-note { display: none; }
  .pc-helm-title { font-size: 16px; }
  .pc-helm-checks { grid-template-columns: 1fr 1fr; }
  .pc-helm-checks li { padding: 5px 7px; font-size: 11.5px; grid-template-columns: 14px 1fr; }
  .pc-helm-checks li b { display: none; }
  .pc-helm-console { grid-template-columns: 1fr; gap: 8px; padding: 10px; }
  .pc-helm-readouts { grid-template-columns: 1fr 1fr; }
  .pc-helm-readouts output { font-size: 19px; }
  .pc-helm-steps { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .pc-helm-step { min-height: 40px; font-size: 11px; }
  .pc-helm-rudder-row .pc-btn, .pc-helm-actions .pc-btn, .pc-helm-tasks button { min-height: 44px; }
  /* phones: the fast-forward steps keep their group's name for screen readers but drop the visible label */
  .pc-helm-ff > .pc-eyebrow { display: none; }
  .pc-helm-ff-steps button { min-height: 40px; }
  .pc-helm-actions { grid-template-columns: 1fr 1fr; }
  .pc-helm kbd { display: none; }
  body.pc-fleet:has(.pc-app.is-helm) { overflow: hidden; }
  .pc-app.is-helm .pc-stage {
    position: fixed; inset: 0; z-index: 60; height: 100svh; min-height: 0;
    border-radius: 0; border: 0; margin: 0;
  }
  .pc-app.is-helm .pc-helm { padding: max(6px, env(safe-area-inset-top)) 6px max(6px, env(safe-area-inset-bottom)); gap: 6px;
    grid-template-rows: auto minmax(0, 1fr) auto; }
  /* the goal: a title line and a row of small chips, no task switcher, no prose */
  .pc-app.is-helm .pc-helm-task { padding: 7px 9px; gap: 5px; background: rgba(4, 16, 20, .72); }
  .pc-app.is-helm .pc-helm-tasks, .pc-app.is-helm .pc-helm-brief, .pc-app.is-helm .pc-helm-note { display: none; }
  .pc-app.is-helm .pc-helm-task-head .pc-eyebrow { font-size: 9.5px; }
  .pc-app.is-helm .pc-helm-title { font-size: 13.5px; }
  .pc-app.is-helm .pc-helm-checks { display: flex; flex-wrap: wrap; gap: 4px; grid-template-columns: none; }  /* wraps: no chip is ever scrolled off the edge */
  .pc-app.is-helm .pc-helm-checks li { flex: 0 0 auto; max-width: 100%; padding: 3px 7px; font-size: 10.5px; min-height: 0; gap: 4px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .pc-app.is-helm .pc-helm-checks li svg { width: 12px; height: 12px; }
  .pc-app.is-helm .pc-helm-meta { font-size: 10px; gap: 10px; }
  /* the console: readouts on one line, the telegraph on one row, the rudder, and Leave */
  .pc-app.is-helm .pc-helm-console { grid-template-columns: 1fr; gap: 6px; padding: 7px 8px; background: rgba(4, 16, 20, .78); }
  .pc-app.is-helm .pc-helm-readouts { grid-template-columns: repeat(2, auto); justify-content: start; gap: 2px 18px; }
  .pc-app.is-helm .pc-helm-readouts .pc-eyebrow { font-size: 9px; }
  .pc-app.is-helm .pc-helm-readouts output { font-size: 16px; }
  .pc-app.is-helm .pc-helm-block { gap: 4px; }
  .pc-app.is-helm .pc-helm-block > .pc-eyebrow { font-size: 9.5px; }
  .pc-app.is-helm .pc-helm-steps { grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 2px; }
  .pc-app.is-helm .pc-helm-step { min-height: 40px; padding: 2px 1px; font-size: 9.5px; line-height: 1.15; white-space: normal; }
  .pc-app.is-helm .pc-helm-rudder-row .pc-btn { min-height: 40px; padding: 2px 10px; font-size: 12px; }
  .pc-app.is-helm .pc-helm-rudder-row + .pc-helm-rudder-row { display: none; }   /* centre / neutral: the gauge and Port/Stbd suffice */
  .pc-app.is-helm .pc-helm-actions { grid-template-columns: 1fr 1fr; gap: 4px; }
  .pc-app.is-helm .pc-helm-actions .pc-btn { min-height: 36px; font-size: 12px; justify-content: center; }
  .pc-app.is-helm .pc-helm-ff { display: none; }
}

/* ---- P3: wind and current, the approach panel, the touch lever, tugs and thruster, the score ---- */
.pc-helm-overlay { grid-area: clear; position: relative; min-height: 0; pointer-events: none; }
.pc-helm-env, .pc-helm-approach {
  position: absolute; background: rgba(9, 23, 29, 0.78); border: 1px solid rgba(148, 226, 208, 0.13); border-radius: 12px;
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
}
.pc-helm-env[hidden], .pc-helm-approach[hidden] { display: none; }
.pc-helm-env { top: 2px; right: 2px; display: grid; grid-template-columns: 76px auto; gap: 8px; align-items: center; padding: 6px 10px 6px 6px; }
.pc-helm-rose { width: 76px; height: 76px; }
.pc-rose-ring { fill: rgba(0, 0, 0, .25); stroke: rgba(148, 226, 208, .26); stroke-width: 1; }
.pc-rose-ticks line { stroke: rgba(148, 226, 208, .35); stroke-width: 1.2; }
.pc-rose-ship { fill: rgba(228, 241, 238, .55); stroke: var(--pc-globe-text); stroke-width: 1; stroke-linejoin: round; }
.pc-rose-wind, .pc-rose-current { transform-origin: 0 0; transform-box: view-box; transition: transform .25s var(--pc-globe-ease); }
.pc-rose-wind { --wind: 0; }
.pc-rose-shaft { stroke: var(--pc-globe-info); stroke-width: calc(1.5px + var(--wind) * 2.5px); stroke-linecap: round; fill: none; }
.pc-rose-head { fill: var(--pc-globe-info); }
.pc-rose-gust { fill: var(--pc-globe-warn); stroke: #fff4ec; stroke-width: 1; }
.pc-rose-current path { stroke: var(--pc-globe-accent); stroke-width: 2.4; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.pc-helm-env[data-gust="true"] .pc-rose-ring { stroke: var(--pc-globe-warn); }
.pc-helm-env-text { margin: 0; display: grid; gap: 4px; font-size: 11px; color: var(--pc-globe-text-2); }
.pc-helm-env-text > div { display: grid; gap: 1px; }
.pc-helm-env-text dt { font: 600 9.5px var(--pc-globe-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--pc-globe-muted); }
.pc-helm-env-text dd { margin: 0; display: grid; }
.pc-helm-env-text output { font: 680 15px var(--pc-globe-mono); color: var(--pc-globe-text); font-variant-numeric: tabular-nums; }
.pc-helm-env-text #helm-current-row output { color: var(--pc-globe-accent-soft); }
.pc-helm-env-text small { font-size: 10.5px; color: var(--pc-globe-muted); }
.pc-helm-env[data-gust="true"] #helm-wind-text { color: var(--pc-globe-warn); }

.pc-helm-approach { left: 2px; bottom: 2px; display: grid; grid-template-columns: repeat(4, auto); gap: 2px 14px; padding: 8px 12px; }
.pc-helm-approach div { display: grid; gap: 1px; --tone: var(--pc-globe-accent); }
.pc-helm-approach div[data-state="warn"] { --tone: var(--pc-globe-amber); }
.pc-helm-approach div[data-state="bad"] { --tone: var(--pc-globe-warn); }
.pc-helm-approach span { font: 600 9.5px var(--pc-globe-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--pc-globe-muted); }
.pc-helm-approach output { font: 680 17px var(--pc-globe-mono); font-variant-numeric: tabular-nums; color: var(--tone); white-space: nowrap; }

/* the rudder track is draggable; its hit area is taller than the gauge */
.pc-helm-rudder-hit { display: grid; align-items: center; min-height: 30px; cursor: ew-resize; touch-action: none; user-select: none; -webkit-user-select: none; }
.pc-helm-rudder-hit.is-dragging .pc-helm-rudder-gauge i { box-shadow: 0 0 14px rgba(95, 232, 196, .8); }

/* the throttle lever: touch only, so the telegraph stays the desk's control */
.pc-helm-lever { display: none; position: absolute; right: 0; bottom: 4px; width: 56px; height: clamp(150px, 34%, 240px); pointer-events: auto; touch-action: none;
  user-select: none; -webkit-user-select: none; border-radius: 28px; background: rgba(9, 23, 29, .74); border: 1px solid rgba(148, 226, 208, 0.18); backdrop-filter: blur(10px); }
.pc-helm-lever-track { position: absolute; left: 50%; top: 20px; bottom: 20px; width: 6px; margin-left: -3px; border-radius: 3px;
  background: linear-gradient(180deg, rgba(95, 232, 196, .55), rgba(255, 255, 255, .08) 60%, rgba(255, 138, 92, .5)); }
.pc-helm-lever-zero { position: absolute; left: 10px; right: 10px; height: 1px; background: rgba(255, 255, 255, .35); top: calc(20px + (100% - 40px) * 0.3333); }
.pc-helm-lever-knob { --lever: 0.333; position: absolute; left: 6px; right: 6px; height: 44px; border-radius: 14px; margin-top: -22px;
  top: calc(20px + (100% - 40px) * (1 - var(--lever))); background: linear-gradient(180deg, #b8ffe4, #5fe8c4); box-shadow: 0 4px 14px rgba(0, 0, 0, .5), 0 0 16px rgba(95, 232, 196, .35);
  border: 0; transition: top .12s linear; }
.pc-helm-lever-knob::after { content: ""; position: absolute; left: 12px; right: 12px; top: 50%; height: 2px; margin-top: -1px; background: rgba(6, 32, 25, .55); box-shadow: 0 -6px 0 rgba(6, 32, 25, .35), 0 6px 0 rgba(6, 32, 25, .35); }
.pc-helm-lever[data-astern="true"] .pc-helm-lever-knob { background: linear-gradient(180deg, #ffd2bf, #ff8a5c); box-shadow: 0 4px 14px rgba(0, 0, 0, .5), 0 0 16px rgba(255, 138, 92, .35); }
.pc-helm-lever.is-dragging .pc-helm-lever-knob { transition: none; }
@media (max-width: 900px), (pointer: coarse) { .pc-helm-lever { display: block; } .pc-helm-rudder-hit { min-height: 44px; } }

/* thruster and tugs, only when the helm has them: a row of the console itself (below the telegraph and rudder), so they
   sit inside the HUD's reserved area and never cover the clear area the ship is framed in or the drags that reach the harbour */
.pc-helm-aux { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: end; gap: 8px 18px; padding: 8px 0 0;
  border-top: 1px solid rgba(148, 226, 208, 0.13); pointer-events: auto; }
.pc-helm-aux[hidden], .pc-helm-thruster[hidden], .pc-helm-tugs[hidden] { display: none; }
.pc-helm-thruster, .pc-helm-tugs { display: grid; gap: 5px; min-width: 0; }
.pc-helm-thruster { flex: 0 0 auto; }
.pc-helm-tugs { flex: 1 1 340px; }
.pc-helm-aux-row { display: grid; grid-template-columns: repeat(2, minmax(96px, 1fr)); gap: 5px; }
.pc-helm-aux-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 5px; }
.pc-helm-aux .pc-btn { min-height: 44px; padding: 3px 8px; font-size: 12px; justify-content: space-between; gap: 8px; touch-action: none; color: var(--pc-globe-text);
  background: rgba(0, 0, 0, .3); border: 1px solid rgba(148, 226, 208, 0.2); }
.pc-helm-aux .pc-btn:disabled { opacity: .4; }
.pc-helm-aux .pc-btn em { font: 600 11px var(--pc-globe-mono); font-style: normal; color: var(--pc-globe-amber); }
.pc-helm-aux .pc-btn[aria-pressed="true"] { border-color: var(--pc-globe-accent); color: var(--pc-globe-accent-soft); background: rgba(95, 232, 196, .14); }
.pc-helm-aux .pc-eyebrow { color: var(--pc-globe-muted); }
.pc-helm-tugs .pc-eyebrow output { color: var(--pc-globe-amber); letter-spacing: .04em; }

/* the result: score, medal and its breakdown */
.pc-helm-score[hidden] { display: none; }
.pc-helm-score { display: grid; gap: 6px; }
.pc-helm-score-head { display: flex; align-items: baseline; gap: 8px; }
.pc-helm-score-num { font: 700 34px/1 var(--pc-globe-mono); color: var(--pc-globe-accent-soft); font-variant-numeric: tabular-nums; }
.pc-helm-score-of { font: 600 12px var(--pc-globe-mono); color: var(--pc-globe-muted); }
.pc-helm-medal { margin-left: auto; padding: 3px 10px; border-radius: 999px; font: 700 11px var(--pc-globe-mono); letter-spacing: .1em; text-transform: uppercase;
  border: 1px solid rgba(148, 226, 208, 0.26); color: var(--pc-globe-text-2); }
.pc-helm-medal[data-medal="gold"] { color: #2a1c00; background: linear-gradient(180deg, #ffe39a, #f3c05b); border-color: transparent; }
.pc-helm-medal[data-medal="silver"] { color: #0f1a1c; background: linear-gradient(180deg, #f2f7f6, #b4c9c6); border-color: transparent; }
.pc-helm-medal[data-medal="bronze"] { color: #2a1204; background: linear-gradient(180deg, #ffc9a2, #d98a5a); border-color: transparent; }
.pc-helm-score-rows { margin: 0; display: grid; gap: 2px; }
.pc-helm-score-rows div { display: flex; justify-content: space-between; gap: 10px; font-size: 12px; padding: 2px 0; border-bottom: 1px solid rgba(148, 226, 208, 0.1); }
.pc-helm-score-rows dt { color: var(--pc-globe-muted); }
.pc-helm-score-rows dd { margin: 0; font: 600 12px var(--pc-globe-mono); color: var(--pc-globe-text); }
.pc-helm-score-best { margin: 0; font-size: 11.5px; color: var(--pc-globe-text-2); }
.pc-helm-score-best[data-best="true"] { color: var(--pc-globe-amber); }

@container helm (max-width: 980px) {
  .pc-helm-approach { grid-template-columns: repeat(2, auto); }
}
@media (max-width: 900px) {
  .pc-helm-env { grid-template-columns: 56px auto; gap: 6px; padding: 4px 8px 4px 4px; }
  .pc-helm-rose { width: 56px; height: 56px; }
  .pc-helm-env-text small { display: none; }
  .pc-helm-env-text output { font-size: 13px; }
  .pc-helm-approach { grid-template-columns: repeat(2, auto); gap: 1px 12px; padding: 5px 9px; }
  .pc-helm-approach output { font-size: 14px; }
  /* phones: two short rows in the console; the buttons stack their label over the fee and keep 44 px targets */
  .pc-helm-aux { gap: 6px; padding-top: 6px; }
  .pc-helm-thruster, .pc-helm-tugs { flex: 1 1 100%; }
  .pc-helm-thruster > .pc-eyebrow { display: none; }  /* the buttons carry their own names */
  .pc-helm-aux .pc-btn { flex-direction: column; justify-content: center; text-align: center; line-height: 1.1; font-size: 10.5px; padding: 2px 2px; gap: 0; }
  .pc-helm-score-num { font-size: 28px; }
}
@media (prefers-reduced-motion: reduce) { .pc-rose-wind, .pc-rose-current, .pc-helm-lever-knob { transition: none; } }


/* ================= Round 2 (Q1): coach, guide, edge arrow, result that teaches, phone thumbs ================= */
/* the bottom-left stack: the approach numbers, and the coach line under them */
.pc-helm-bl { position: absolute; left: 2px; bottom: 2px; display: grid; gap: 6px; justify-items: start; max-width: min(100%, 520px); pointer-events: none; }
.pc-helm-bl .pc-helm-approach { position: static; }
.pc-helm-coach[hidden], .pc-helm-edge[hidden], .pc-helm-tutor[hidden], .pc-helm-tug-arm[hidden], .pc-helm-tier[hidden], .pc-helm-lost[hidden], .pc-helm-score-gold[hidden], .pc-helm-score-more[hidden], .pc-helm-drawer-tab[hidden], .pc-helm-ff-steps button[hidden] { display: none; }
.pc-helm-coach { margin: 0; display: flex; align-items: center; gap: 7px; padding: 6px 11px; border-radius: 10px; font-size: 13px; font-weight: 600; line-height: 1.3; color: var(--pc-globe-text);
  background: rgba(9, 23, 29, 0.84); border: 1px solid rgba(243, 192, 91, .42); box-shadow: 0 8px 22px rgba(0, 0, 0, .3); }
.pc-helm-coach svg { flex: 0 0 auto; width: 14px; height: 14px; color: var(--pc-globe-amber); }

/* an arrow on the clear area's edge toward a berth that is off screen */
.pc-helm-edge { position: absolute; left: 0; top: 0; width: 0; height: 0; pointer-events: none; z-index: 2; }
.pc-helm-edge svg { position: absolute; left: -17px; top: -17px; width: 34px; height: 34px; fill: var(--pc-globe-amber); stroke: rgba(9, 23, 29, .9); stroke-width: 1.4; stroke-linejoin: round; filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .55)); }
.pc-helm-edge span { position: absolute; left: 0; top: 20px; white-space: nowrap; padding: 1px 7px; border-radius: 8px; font: 650 11px var(--pc-globe-mono);
  color: var(--pc-globe-text); background: rgba(9, 23, 29, .82); }

/* the first-run guide: top left of the clear area, clear of the wind rose on the right */
.pc-helm-tutor { position: absolute; left: 2px; top: 2px; width: min(300px, calc(100% - 200px)); min-width: 200px; display: grid; gap: 6px; padding: 9px 11px; border-radius: 12px; pointer-events: none; z-index: 3; /* drags pass through its text; only its buttons catch the pointer */
  background: rgba(9, 23, 29, 0.92); border: 1px solid rgba(243, 192, 91, .5); box-shadow: 0 12px 34px rgba(0, 0, 0, .45); }
.pc-helm-tutor .pc-eyebrow { margin: 0; }
.pc-helm-tutor-text { margin: 0; font-size: 13px; line-height: 1.4; color: var(--pc-globe-text); }
.pc-helm-tutor button { pointer-events: auto; }
.pc-helm-tutor-actions { display: flex; gap: 6px; justify-content: flex-end; }
.pc-helm-tutor-actions .pc-btn { min-height: 36px; padding: 4px 12px; font-size: 12.5px; }
/* what the guide is pointing at: a steady outline, nothing moves */
.pc-helm[data-tutor-mark="env"] .pc-helm-env,
.pc-helm[data-tutor-mark="lever"] :is(.pc-helm-telegraph, .pc-helm-lever),
.pc-helm[data-tutor-mark="rudder"] :is(.pc-helm-rudder, .pc-helm-arc),
.pc-helm[data-tutor-mark="tugs"] :is(.pc-helm-aux, .pc-helm-drawer-tab) { outline: 2px solid var(--pc-globe-amber); outline-offset: 3px; border-radius: 12px; }

/* fast forward: the cap the helm holds it to, and the Auto step */
.pc-helm-ff-steps { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
.pc-helm-ff-steps button:disabled { opacity: .4; cursor: not-allowed; }
.pc-helm-ff .pc-eyebrow output { color: var(--pc-globe-amber); letter-spacing: .04em; }
.pc-helm-arc, .pc-helm-drawer-tab, .pc-helm-ff-cycle, .pc-helm-tug-arm { display: none; }

/* the arc itself (shown on phones) */
.pc-helm-arc { position: relative; width: 140px; height: 84px; touch-action: none; user-select: none; -webkit-user-select: none; pointer-events: auto; cursor: grab; }
.pc-helm-arc svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.pc-arc-track, .pc-arc-port, .pc-arc-stbd { fill: none; stroke-width: 9; stroke-linecap: round; }
.pc-arc-track { stroke: rgba(255, 255, 255, .09); }
.pc-arc-port { stroke: rgba(255, 90, 79, .42); }
.pc-arc-stbd { stroke: rgba(57, 217, 138, .42); }
.pc-arc-tick { stroke: rgba(255, 255, 255, .55); stroke-width: 1.5; }
.pc-arc-needle { stroke: rgba(228, 241, 238, .5); stroke-width: 2; stroke-linecap: round; }
.pc-arc-knob { fill: #5fe8c4; stroke: #062019; stroke-width: 2; filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .5)); }
.pc-helm-arc.is-dragging .pc-arc-knob { fill: #b8ffe4; }
.pc-arc-text { position: absolute; left: 50%; bottom: -1px; transform: translateX(-50%); font: 650 12px var(--pc-globe-mono); color: var(--pc-globe-text); white-space: nowrap; }

/* the result: a collapsible card that teaches. It never clips: the panel scrolls and Try again stays in reach. */
.pc-helm-result-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.pc-helm-result-toggle { min-height: 32px; padding: 2px 10px; border-radius: 8px; border: 1px solid rgba(148, 226, 208, .26); background: rgba(0, 0, 0, .25); color: var(--pc-globe-text-2); font: 600 11.5px var(--pc-globe-mono); }
.pc-helm-result[data-collapsed="true"] .pc-helm-result-more { display: none; }
.pc-helm-tier { padding: 3px 9px; border-radius: 999px; font: 700 10.5px var(--pc-globe-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--pc-globe-text); border: 1px solid rgba(148, 226, 208, .35); background: rgba(0, 0, 0, .25); }
.pc-helm-tier[data-tier="fresh"] { border-color: rgba(95, 232, 196, .6); }
.pc-helm-tier[data-tier="strong"] { border-color: rgba(243, 192, 91, .7); color: var(--pc-globe-amber); }
.pc-helm-tier[data-tier="gale"] { border-color: rgba(255, 138, 92, .8); color: #ffc3a8; }
.pc-helm-score-head { flex-wrap: wrap; }
.pc-helm-score-head .pc-helm-tier { margin-left: auto; }
.pc-helm-score-head .pc-helm-tier + .pc-helm-medal { margin-left: 0; }
.pc-helm-score-more { display: grid; gap: 6px; }
.pc-helm-lost { display: grid; gap: 3px; }
.pc-helm-lost .pc-eyebrow { margin: 0; color: var(--pc-globe-muted); }
.pc-helm-lost ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 2px 14px; }
.pc-helm-lost li { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; color: var(--pc-globe-text-2); }
.pc-helm-lost li b { font: 650 12px var(--pc-globe-mono); color: #ffc3a8; }
.pc-helm-score-gold { margin: 0; font-size: 12.5px; font-weight: 600; color: var(--pc-globe-amber); }
.pc-helm-score-rows { grid-template-columns: 1fr 1fr; gap: 2px 14px; }
.pc-helm-score-rows div { min-width: 0; }
.pc-helm-result-actions { position: sticky; bottom: -8px; padding-top: 6px; background: linear-gradient(180deg, transparent, rgba(9, 23, 29, .92) 30%); }
/* once the run is over the prose, the switcher and the practice note make way for the result */
.pc-helm:not([data-status="running"]) :is(.pc-helm-brief, .pc-helm-note, .pc-helm-tasks) { display: none; }

/* toasts sit over the water at the top, never over the controls at the foot of the HUD */
body[data-helm] .pc-toast { top: 76px; bottom: auto; left: calc(50% + 170px); z-index: 90; pointer-events: none; max-width: min(420px, calc(100vw - 24px)); }
html body[data-helm] #chartroom .cr-toast { top: 76px; bottom: auto; left: calc(50% + 170px); right: auto; transform: translateX(-50%); z-index: 90; pointer-events: none; max-width: min(420px, calc(100vw - 24px)); }
@media (max-width: 900px) {
  body[data-helm] .pc-toast { top: 8px; left: 50%; }
  html body[data-helm] #chartroom .cr-toast { top: 8px; left: 50%; }
}

/* ---- phones: the thumbs' controls, at most ~190 px tall ---- */
@media (max-width: 480px) {
  html body[data-ui][data-helm] #helm-hud { padding: max(6px, env(safe-area-inset-top)) 6px max(16px, env(safe-area-inset-bottom)); gap: 6px; grid-template-rows: auto minmax(0, 1fr) auto; }
  html body[data-ui][data-helm] #helm-hud .pc-helm-console { position: relative; box-sizing: border-box; height: 184px; padding: 8px; gap: 4px 8px; align-content: stretch;
    grid-template-columns: 140px minmax(0, 1fr) 56px; grid-template-rows: auto auto minmax(0, 1fr);
    grid-template-areas: "arc readouts lever" "arc telegraph lever" "arc actions lever"; }
  /* speed and heading on one small line; the engine's name under it; no seven-step telegraph, no rudder track */
  html body[data-ui][data-helm] #helm-hud .pc-helm-readouts { grid-area: readouts; display: flex; flex-wrap: wrap; min-width: 0; gap: 0 16px; white-space: nowrap; align-items: baseline; clip-path: inset(-3px -3px -3px 0); } /* "−0.8 kn astern" is long: the heading wraps under it rather than under the lever */
  html body[data-ui][data-helm] #helm-hud .pc-helm-readouts div { display: inline-flex; gap: 0; }
  /* the dot between speed and heading hangs in the gap before the heading (ruling 86g): when the heading wraps under the speed
     the dot is outside the box's left edge, clipped, and never sits alone at the start of the second line */
  html body[data-ui][data-helm] #helm-hud .pc-helm-readouts div + div { position: relative; }
  html body[data-ui][data-helm] #helm-hud .pc-helm-readouts div + div::before { content: "·"; position: absolute; left: -16px; width: 16px; text-align: center; color: var(--pc-globe-muted); }
  html body[data-ui][data-helm] #helm-hud .pc-helm-readouts .pc-eyebrow { display: none; }
  html body[data-ui][data-helm] #helm-hud .pc-helm-readouts output { font-size: 14.5px; }
  html body[data-ui][data-helm] #helm-hud .pc-helm-telegraph { grid-area: telegraph; gap: 0; }
  html body[data-ui][data-helm] #helm-hud .pc-helm-telegraph .pc-helm-steps, html body[data-ui][data-helm] #helm-hud .pc-helm-rudder { display: none; }
  html body[data-ui][data-helm] #helm-hud .pc-helm-telegraph > .pc-eyebrow { font-size: 10px; white-space: nowrap; }
  html body[data-ui][data-helm] #helm-hud .pc-helm-actions { grid-area: actions; align-self: end; display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
  html body[data-ui][data-helm] #helm-hud .pc-helm-actions .pc-btn { min-height: 44px; padding: 2px 4px; font-size: 11.5px; line-height: 1.1; justify-content: center; text-align: center; white-space: normal; gap: 0; }
  html body[data-ui][data-helm] #helm-hud .pc-helm-actions .pc-btn svg { display: none; }
  html body[data-ui][data-helm] #helm-hud .pc-helm-ff { display: none; }
  html body[data-ui][data-helm] #helm-hud .pc-helm-ff-cycle { display: inline-flex; }
  html body[data-ui][data-helm] #helm-hud .pc-helm-drawer-tab:not([hidden]) { display: inline-flex; }
  html body[data-ui][data-helm] #helm-hud .pc-helm-arc { display: block; grid-area: arc; align-self: end; }
  html body[data-ui][data-helm] #helm-hud .pc-helm-lever { display: block; position: relative; grid-area: lever; right: auto; bottom: auto; width: 56px; height: 100%; align-self: stretch; }
  /* thruster and tugs: a drawer above the console, opened by its tab; a tug takes two taps (arm, then send) */
  html body[data-ui][data-helm] #helm-hud .pc-helm-aux { display: none; position: absolute; left: 0; right: 0; bottom: calc(100% + 6px); z-index: 6; flex-direction: column; flex-wrap: nowrap; gap: 8px; padding: 10px;
    border: 1px solid rgba(148, 226, 208, .26); border-radius: 14px; background: rgba(9, 23, 29, .95); box-shadow: 0 14px 40px rgba(0, 0, 0, .55); }
  html body[data-ui][data-helm] #helm-hud[data-drawer="open"] .pc-helm-aux:not([hidden]) { display: flex; }
  html body[data-ui][data-helm] #helm-hud .pc-helm-aux-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  html body[data-ui][data-helm] #helm-hud .pc-helm-tugs { flex: 0 0 auto; }
  html body[data-ui][data-helm] #helm-hud .pc-helm-aux .pc-btn { flex-direction: row; justify-content: space-between; font-size: 12px; padding: 3px 9px; }
  html body[data-ui][data-helm] #helm-hud .pc-helm-aux .pc-btn[data-armed="true"] { border-color: var(--pc-globe-amber); background: rgba(243, 192, 91, .16); color: var(--pc-globe-text); }
  html body[data-ui][data-helm] #helm-hud .pc-helm-tug-arm { display: block; margin: 0; font-size: 12.5px; font-weight: 600; color: var(--pc-globe-amber); }
  html body[data-ui][data-helm] #helm-hud .pc-helm-tug-arm[hidden] { display: none; }
  /* the guide and the coach stay narrow beside the wind rose */
  html body[data-ui][data-helm] #helm-hud .pc-helm-tutor { width: calc(100% - 164px); min-width: 0; max-width: 232px; }
  html body[data-ui][data-helm] #helm-hud .pc-helm-env-tier { grid-column: 1 / -1; justify-self: start; }
  html body[data-ui][data-helm] #helm-hud .pc-helm-coach { font-size: 12.5px; }
  /* the OSM credit is a tiny line in the bottom gutter, below the controls, never over them */
  body[data-helm] .pc-harbour-credit { left: auto !important; top: auto !important; right: 8px; bottom: 2px; transform: none !important; z-index: 80; max-width: none; white-space: nowrap;
    padding: 0 5px; font-size: 8.5px; line-height: 12px; border-radius: 4px; background: rgba(7, 18, 23, .55); }
  /* a toast is one or two short lines across the very top, over the place line, never over the result card or the controls */
  body[data-helm] .pc-toast, html body[data-helm] #chartroom .cr-toast { top: max(4px, env(safe-area-inset-top)); left: 6px; right: 6px; width: auto; max-width: none; transform: none; padding: 5px 10px; font-size: 12px; line-height: 1.25; }
  /* the result card: title, score and buttons, with the rest behind Details */
  html body[data-ui][data-helm] #helm-hud .pc-helm-result { padding: 8px 10px; gap: 6px; }
  html body[data-ui][data-helm] #helm-hud .pc-helm-score-num { font-size: 26px; }
  html body[data-ui][data-helm] #helm-hud .pc-helm-lost ul { grid-template-columns: 1fr; }
  html body[data-ui][data-helm] #helm-hud .pc-helm-score-rows { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { .pc-helm-arc .pc-arc-knob { transition: none; } }

/* ghost plates on the dark HUD need their own ink: the Sjøfart ghost button is dark-on-paper */
.pc-helm .pc-btn--ghost, .pc-helm-result-toggle { color: var(--pc-globe-text); background: rgba(0, 0, 0, .3); border: 1px solid rgba(148, 226, 208, .26); }
.pc-helm .pc-btn--ghost:disabled { color: var(--pc-globe-text-2); opacity: .5; }
.pc-helm .pc-btn--ghost:hover:not(:disabled) { border-color: rgba(148, 226, 208, .5); }
/* Round 2 lead fix: the desk result card's last lines ("For gold: …") were clipped behind Try again; the score body
   scrolls inside the card and the gold line wraps, so the actions stay put and nothing is cut */
.pc-helm-result .pc-helm-score { max-height: min(46vh, 340px); overflow-y: auto; overscroll-behavior: contain; }
.pc-helm-score-gold { white-space: normal; overflow-wrap: anywhere; font-size: 14px; }

/* ================= Round 3 (S2): result and Conditions sheets, phone first frame ================= */
/* a sheet over the water: head/body scroll only if they must, the For gold line and the buttons always show */
.pc-helm-sheet { position: absolute; left: 2px; top: 2px; z-index: 5; box-sizing: border-box; width: min(450px, calc(100% - 4px)); max-height: calc(100% - 4px);
  display: flex; flex-direction: column; padding: 0; gap: 0; overflow: hidden; pointer-events: auto;
  background: rgba(9, 23, 29, .95); border: 1px solid rgba(95, 232, 196, .4); border-radius: 14px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, .5); backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%); }
.pc-helm-sheet[hidden] { display: none; }
.pc-helm[data-status="failed"] .pc-helm-sheet.pc-helm-result { border-color: rgba(255, 138, 92, .55); }
.pc-helm-sheet-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; display: grid; gap: 8px; align-content: start; padding: 12px 14px 8px; }
.pc-helm-sheet-foot { flex: 0 0 auto; display: grid; gap: 6px; padding: 8px 14px 12px; border-top: 1px solid rgba(148, 226, 208, .16); background: rgba(4, 16, 20, .55); }
.pc-helm-sheet .pc-helm-score { max-height: none; overflow: visible; }
.pc-helm-sheet .pc-helm-score-gold { margin: 0; font-size: 14px; line-height: 1.35; }
.pc-helm-sheet .pc-helm-score-best { margin: 0; }
.pc-helm-sheet .pc-helm-result-actions { position: static; padding: 0; background: none; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.pc-helm-sheet .pc-helm-result-actions .pc-btn { min-height: 44px; justify-content: center; }
.pc-helm-sheet-leave { grid-column: 1 / -1; display: none; }
.pc-helm-result-head { justify-content: flex-start; gap: 10px; }
.pc-helm-result-title { margin: 0; }
.pc-helm-perfect { padding: 3px 10px; border-radius: 999px; font: 700 10.5px var(--pc-globe-mono); letter-spacing: .1em; text-transform: uppercase; color: #2a1c00;
  background: linear-gradient(180deg, #fff1c2, #f3c05b); box-shadow: 0 0 14px rgba(243, 192, 91, .45); }
.pc-helm-perfect[hidden] { display: none; }
.pc-helm-maths { margin: 0; font: 600 14px/1.35 var(--pc-globe-mono); color: var(--pc-globe-text); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.pc-helm-maths[hidden] { display: none; }
.pc-helm-result-toggle { min-height: 44px; justify-self: start; padding: 2px 14px; }
.pc-helm-result-text { margin: 0; }

/* the Conditions card */
.pc-helm-setup { padding: 12px 14px 14px; gap: 10px; border-color: rgba(243, 192, 91, .5); }
.pc-helm-setup .pc-eyebrow { margin: 0; }
.pc-helm-presets { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.pc-helm-presets button { min-height: 52px; padding: 5px 6px; display: grid; gap: 2px; align-content: center; justify-items: center; text-align: center; border-radius: 10px;
  border: 1px solid rgba(148, 226, 208, .26); background: rgba(0, 0, 0, .3); color: var(--pc-globe-text-2); font: 650 12.5px/1.15 var(--pc-text); }
.pc-helm-presets button small { font: 600 10px var(--pc-globe-mono); color: var(--pc-globe-muted); }
.pc-helm-presets button[aria-pressed="true"] { background: linear-gradient(180deg, #b8ffe4, #5fe8c4); color: #062019; border-color: transparent; }
.pc-helm-presets button[aria-pressed="true"] small { color: rgba(6, 32, 25, .75); }
.pc-helm-setup-note { margin: 0; font-size: 12.5px; color: var(--pc-globe-text-2); line-height: 1.4; }
.pc-helm-toggles { display: flex; flex-wrap: wrap; gap: 8px; }
.pc-helm-toggles button { min-height: 44px; display: inline-flex; align-items: center; gap: 9px; padding: 4px 12px 4px 8px; border-radius: 22px; border: 1px solid rgba(148, 226, 208, .26);
  background: rgba(0, 0, 0, .3); color: var(--pc-globe-text); font: 650 12.5px var(--pc-text); }
.pc-helm-toggles button i { position: relative; width: 34px; height: 20px; border-radius: 10px; background: rgba(255, 255, 255, .14); flex: 0 0 auto; }
.pc-helm-toggles button i::after { content: ""; position: absolute; left: 2px; top: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--pc-globe-text-2); }
.pc-helm-toggles button[aria-checked="true"] { border-color: rgba(95, 232, 196, .6); }
.pc-helm-toggles button[aria-checked="true"] i { background: rgba(95, 232, 196, .5); }
.pc-helm-toggles button[aria-checked="true"] i::after { left: 16px; background: #b8ffe4; }
.pc-helm-start { min-height: 48px; justify-content: center; font-size: 15px; }
/* no tutorial or coach under the card */
.pc-helm[data-briefing="true"] :is(.pc-helm-tutor, .pc-helm-coach) { display: none; }

.pc-helm-envline { display: none; }
.pc-arc-tick--15 { stroke-width: 1.2; opacity: .75; }
.pc-arc-tick-label { font: 600 7.5px var(--pc-globe-mono); fill: rgba(255, 255, 255, .55); }
.pc-helm-tutor-chip { cursor: default; }

@media (max-width: 480px) {
  /* the result and the Conditions card: a bottom sheet over the console, never clipped */
  html body[data-ui][data-helm] #helm-hud .pc-helm-sheet { left: 6px; right: 6px; top: auto; bottom: max(16px, env(safe-area-inset-bottom)); width: auto; z-index: 8; border-radius: 16px; padding: 0; gap: 0; }
  html body[data-ui][data-helm] #helm-hud .pc-helm-sheet-body { padding: 10px 12px 6px; gap: 6px; }
  html body[data-ui][data-helm] #helm-hud .pc-helm-sheet-foot { padding: 8px 12px 10px; }
  html body[data-ui][data-helm] #helm-hud .pc-helm-score-num { font-size: 30px; }
  html body[data-ui][data-helm] #helm-hud .pc-helm-maths { font-size: 13px; }
  html body[data-ui][data-helm] #helm-hud .pc-helm-sheet .pc-helm-result-actions { grid-template-columns: 1fr 1fr; gap: 6px; }
  html body[data-ui][data-helm] #helm-hud .pc-helm-sheet-leave { display: inline-flex; min-height: 44px; }
  html body[data-ui][data-helm] #helm-hud .pc-helm-result-toggle { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 88px; font-size: 13px; }
  html body[data-ui][data-helm] #helm-hud .pc-helm-presets { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* wind and current fold into the header line */
  html body[data-ui][data-helm] #helm-hud .pc-helm-env { display: none; }
  html body[data-ui][data-helm] #helm-hud .pc-helm-envline:not([hidden]) { display: block; flex: 1 0 100%; color: var(--pc-globe-info); }
  html body[data-ui][data-helm] #helm-hud[data-tutor-mark="env"] .pc-helm-envline { outline: 2px solid var(--pc-globe-amber); outline-offset: 2px; border-radius: 6px; }
  /* the guide: a one-line chip; a tap opens it */
  html body[data-ui][data-helm] #helm-hud .pc-helm-tutor { width: auto; max-width: calc(100% - 4px); min-width: 0; gap: 4px; padding: 0; border-radius: 22px; }
  html body[data-ui][data-helm] #helm-hud .pc-helm-tutor-chip { pointer-events: auto; cursor: pointer; display: flex; align-items: center; gap: 4px; min-height: 40px; padding: 0 12px; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  html body[data-ui][data-helm] #helm-hud .pc-helm-tutor-chip::after { content: "▾"; margin-left: auto; padding-left: 8px; color: var(--pc-globe-amber); }
  html body[data-ui][data-helm] #helm-hud[data-tutor-open="true"] .pc-helm-tutor-chip::after { content: "▴"; }
  html body[data-ui][data-helm] #helm-hud:not([data-tutor-open="true"]) :is(.pc-helm-tutor-text, .pc-helm-tutor-actions) { display: none; }
  html body[data-ui][data-helm] #helm-hud[data-tutor-open="true"] .pc-helm-tutor { border-radius: 14px; width: calc(100% - 4px); }
  html body[data-ui][data-helm] #helm-hud[data-tutor-open="true"] :is(.pc-helm-tutor-text, .pc-helm-tutor-actions) { margin: 0 12px; }
  html body[data-ui][data-helm] #helm-hud[data-tutor-open="true"] .pc-helm-tutor-actions { margin-bottom: 10px; }
  /* a clear gap between Leave helm and the lever */
  html body[data-ui][data-helm] #helm-hud .pc-helm-console { gap: 4px 16px; }
}
/* the sheets take the clear area's corner: the wind rose makes way (the Conditions card names the weather itself) */
.pc-helm-overlay:has(.pc-helm-sheet:not([hidden])) .pc-helm-env { display: none; }
/* the sheets' own ground beats the older result tints; the result sits at the foot of the clear area so a toast over the
   water at the top never covers it, and the Conditions card sits at the top, clear of the ship below */
.pc-helm .pc-helm-sheet { background: rgba(9, 23, 29, .95); }
.pc-helm-sheet.pc-helm-result { top: auto; bottom: 34px; } /* above the map credit */
.pc-helm-result-toggle { display: none; } /* a desk shows the figures; the phone's Details opens them */
@media (max-width: 480px) {
  html body[data-ui][data-helm] #helm-hud .pc-helm-sheet.pc-helm-setup { padding: 12px 12px 12px; gap: 10px; }
}
.pc-helm-ghostlabel { position: absolute; left: 0; top: 0; margin: -26px 0 0 -26px; padding: 1px 8px; border-radius: 8px; pointer-events: none; z-index: 2; white-space: nowrap;
  font: 650 11px var(--pc-globe-mono); color: #1d1238; background: rgba(226, 214, 255, .92); box-shadow: 0 2px 8px rgba(0, 0, 0, .4); }
.pc-helm-ghostlabel[hidden] { display: none; }

/* ================= Round 4 (U2): labels, medal bands, one-row Conditions, phone HUD, tug preview, gust cue ================= */
.pc-helm-summary { margin: 2px 0 0; font: 600 11.5px var(--pc-globe-mono); color: var(--pc-globe-text-2); }
.pc-helm-summary:empty { display: none; }
.pc-helm-task-head .pc-helm-env-tier { align-self: flex-start; }
.pc-helm-title[data-helm="objective"] { cursor: default; }
.pc-helm-result-conditions { margin: 0; font: 600 11.5px/1.35 var(--pc-globe-mono); color: var(--pc-globe-text-2); }
.pc-helm-result-conditions:empty { display: none; }
.pc-helm-fail-hint { margin: 0; font-size: 14px; font-weight: 650; line-height: 1.4; color: var(--pc-globe-amber); }
.pc-helm-fail-hint[hidden] { display: none; }
.pc-helm-bands { margin: 0; font: 600 12px/1.4 var(--pc-globe-mono); color: var(--pc-globe-text-2); overflow-wrap: anywhere; }
.pc-helm-bands[hidden] { display: none; }
.pc-helm-score-rows dd { font-variant-numeric: tabular-nums; }
/* the penalties sit on the facts' rows on a desk, so the separate "Points lost" list is the phone's short view only */
.pc-helm-lost { display: none; }
.pc-helm-peekbar, .pc-helm-sheet-peek, .pc-helm-setup-row { display: none; }
.pc-helm-start-go { display: none; }
.pc-helm-coach[data-gust="true"] { border-color: rgba(243, 192, 91, .7); }
.pc-helm-coach[data-gust="true"] svg { color: var(--pc-globe-amber); }

@media (max-width: 480px) {
  /* the penalty list stays on the phone's card body; the rows hide behind Details */
  html body[data-ui][data-helm] #helm-hud .pc-helm-lost:not([hidden]) { display: grid; }

  /* objective header: one line (the place and the goal); a tap opens the brief and checklist */
  html body[data-ui][data-helm] #helm-hud .pc-helm-task { padding-block: 6px; gap: 2px; }
  html body[data-ui][data-helm] #helm-hud .pc-helm-title { display: flex; align-items: center; margin: 0; min-height: 36px; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; }
  html body[data-ui][data-helm] #helm-hud .pc-helm-title::after { content: "▾"; margin-left: auto; padding-left: 10px; color: var(--pc-globe-amber); }
  html body[data-ui][data-helm] #helm-hud[data-objective="open"] .pc-helm-title::after { content: "▴"; }
  html body[data-ui][data-helm] #helm-hud:not([data-objective="open"]) :is(.pc-helm-brief, .pc-helm-checks, .pc-helm-note, .pc-helm-best, .pc-helm-summary, .pc-helm-tasks) { display: none; }
  html body[data-ui][data-helm] #helm-hud .pc-helm-task-head { gap: 6px; flex-wrap: nowrap; align-items: center; }
  html body[data-ui][data-helm] #helm-hud .pc-helm-task-head .pc-eyebrow { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
  html body[data-ui][data-helm] #helm-hud .pc-helm-env-tier { flex: 0 0 auto; max-width: 62%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  html body[data-ui][data-helm] #helm-hud .pc-helm-meta { gap: 2px 10px; }
  html body[data-ui][data-helm] #helm-hud:not([data-objective="open"]) .pc-helm-envline { display: none; }

  /* the guide: a one-line chip stacked above the coach pill, at the foot of the water, just above the lever and rudder */
  html body[data-ui][data-helm] #helm-hud .pc-helm-bl .pc-helm-tutor { position: static; pointer-events: auto; }

  /* Conditions folds to one row once this port has a score: "Today · Assist on · Start ›" */
  html body[data-ui][data-helm] #helm-hud .pc-helm-setup[data-compact="true"] { flex-direction: row; flex-wrap: wrap; align-items: center; padding: 8px 12px; gap: 6px 10px; }
  html body[data-ui][data-helm] #helm-hud .pc-helm-setup[data-compact="true"] :is(.pc-eyebrow, .pc-helm-presets, .pc-helm-setup-note, .pc-helm-toggles) { display: none; }
  html body[data-ui][data-helm] #helm-hud .pc-helm-setup[data-compact="true"] .pc-helm-setup-row { display: flex; flex: 1 1 auto; align-items: center; gap: 10px; margin: 0; font: 650 13px var(--pc-text); color: var(--pc-globe-text); min-width: 0; }
  html body[data-ui][data-helm] #helm-hud .pc-helm-setup-change { min-height: 44px; padding: 0 10px; background: none; border: 0; color: var(--pc-globe-info); font: 650 12.5px var(--pc-text); text-decoration: underline; }
  html body[data-ui][data-helm] #helm-hud .pc-helm-setup[data-compact="true"] .pc-helm-start { flex: 0 0 auto; min-width: 104px; }
  html body[data-ui][data-helm] #helm-hud .pc-helm-setup[data-compact="true"] .pc-helm-start-go { display: inline; }

  /* the engine's name is never clipped by the lever: the key hints go, the label may shrink with an ellipsis */
  html body[data-ui][data-helm] #helm-hud .pc-helm-telegraph { min-width: 0; overflow: hidden; }
  html body[data-ui][data-helm] #helm-hud .pc-helm-telegraph kbd { display: none; }
  html body[data-ui][data-helm] #helm-hud .pc-helm-telegraph > .pc-eyebrow { display: flex; gap: 4px; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  html body[data-ui][data-helm] #helm-hud .pc-helm-telegraph output { min-width: 0; overflow: hidden; text-overflow: ellipsis; color: var(--pc-globe-text); font-weight: 700; }

  /* Leave helm and Tugs sit at opposite corners of the 2x2: Tugs top-left, Frame top-right, speed bottom-left, Leave bottom-right */
  html body[data-ui][data-helm] #helm-hud .pc-helm-drawer-tab { order: 1; }
  html body[data-ui][data-helm] #helm-hud .pc-helm-actions [data-helm="frame"] { order: 2; }
  html body[data-ui][data-helm] #helm-hud .pc-helm-ff-cycle { order: 3; }
  html body[data-ui][data-helm] #helm-hud .pc-helm-actions [data-helm="leave"] { order: 4; border-color: rgba(255, 138, 92, .45); color: #ffc9b4; }

  /* the result sheet: Peek drops it to a one-line bar so the berth shows */
  html body[data-ui][data-helm] #helm-hud .pc-helm-sheet-peek { display: inline-flex; min-height: 44px; justify-content: center; }
  html body[data-ui][data-helm] #helm-hud .pc-helm-result[data-peek="true"] { max-height: none !important; }
  html body[data-ui][data-helm] #helm-hud .pc-helm-result[data-peek="true"] :is(.pc-helm-sheet-body, .pc-helm-sheet-foot) { display: none; }
  html body[data-ui][data-helm] #helm-hud .pc-helm-result[data-peek="true"] .pc-helm-peekbar { display: flex; }
  html body[data-ui][data-helm] #helm-hud .pc-helm-peekbar { align-items: center; justify-content: space-between; gap: 10px; padding: 4px 6px 4px 14px; font: 700 13.5px var(--pc-text); color: var(--pc-globe-text); }
  html body[data-ui][data-helm] #helm-hud .pc-helm-peekbar .pc-btn { min-height: 44px; }

  /* the last 150 m: secondary panels fold away, the engine and rudder readouts grow */
  html body[data-ui][data-helm] #helm-hud[data-final="true"] :is(.pc-helm-tutor, .pc-helm-ghostlabel, .pc-helm-best, .pc-helm-brief, .pc-helm-checks, .pc-helm-note, .pc-helm-envline, .pc-helm-env-tier, .pc-helm-meta) { display: none; }
  html body[data-ui][data-helm] #helm-hud[data-final="true"] #helm-engine-now { font-size: 17px; }
  html body[data-ui][data-helm] #helm-hud[data-final="true"] .pc-helm-telegraph > .pc-eyebrow { font-size: 12px; }
  html body[data-ui][data-helm] #helm-hud[data-final="true"] .pc-arc-text { font-size: 17px; font-weight: 800; }
  html body[data-ui][data-helm] #helm-hud[data-final="true"] .pc-helm-readouts output { font-size: 17px; }
}

/* ================= Round 5 (V2): a result that teaches, pace, urgency, phone buttons ================= */
/* penalties: one column, one row each: the fact, then the points it cost, never wrapping */
.pc-helm-score-rows, html body[data-ui][data-helm] #helm-hud .pc-helm-score-rows { grid-template-columns: 1fr; gap: 1px; }
.pc-helm-score-rows div { flex-wrap: nowrap; align-items: baseline; white-space: nowrap; }
.pc-helm-score-rows dt { flex: 0 0 auto; }
.pc-helm-score-rows dd { display: flex; gap: 10px; justify-content: flex-end; align-items: baseline; min-width: 0; margin: 0; }
.pc-helm-score-rows dd span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.pc-helm-score-rows dd b { flex: 0 0 3.2ch; text-align: right; font: 700 12px var(--pc-globe-mono); color: #ffc3a8; }
/* the bands: three chips, the earned one lit, the just-missed one outlined */
.pc-helm-bands { display: flex; flex-wrap: wrap; gap: 6px; font: 600 12px var(--pc-globe-mono); }
.pc-helm-band { display: inline-flex; align-items: baseline; gap: 5px; padding: 3px 9px; border-radius: 999px; border: 1px solid rgba(148, 226, 208, .2); color: var(--pc-globe-text-2); white-space: nowrap; }
.pc-helm-band b { font-weight: 700; } .pc-helm-band i { font-style: normal; font-variant-numeric: tabular-nums; } .pc-helm-band small { font-size: 11px; opacity: .85; }
.pc-helm-band[data-state="reached"] { background: var(--pc-globe-accent); border-color: transparent; color: #062019; }
.pc-helm-band[data-state="next"] { border-color: var(--pc-globe-amber); color: var(--pc-globe-amber); border-style: dashed; }
/* the next medal: the one line that says what to do about it */
.pc-helm-next { margin: 0; font-size: 14px; font-weight: 650; line-height: 1.35; color: var(--pc-globe-amber); }
.pc-helm-next[hidden] { display: none; }
.pc-helm-fail-hint { font-size: 17px; line-height: 1.35; font-weight: 700; }
.pc-helm-result-title { overflow-wrap: anywhere; }
.pc-helm-setup-score { margin: 0; font: 600 12.5px/1.35 var(--pc-globe-mono); color: var(--pc-globe-amber); }
.pc-helm-leave-top { display: none; }
/* briefing: the chip would say the preset a second time; the card already names it */
.pc-helm[data-briefing="true"] .pc-helm-env-tier { display: none; }

/* pace chip and first-use cue ride in the bottom-left stack */
.pc-helm-pace { margin: 0; align-self: flex-start; padding: 3px 10px; border-radius: 999px; font: 700 12px var(--pc-globe-mono); color: var(--pc-globe-text); background: rgba(9, 23, 29, .82); border: 1px solid rgba(148, 226, 208, .28); pointer-events: none; }
.pc-helm-pace[hidden], .pc-helm-cue[hidden] { display: none; }
.pc-helm-pace[data-medal="gold"] { border-color: #f3c05b; color: #ffe3a0; }
.pc-helm-pace[data-medal="silver"] { border-color: #c9d6dc; }
.pc-helm-pace[data-medal="bronze"] { border-color: #d49a6a; color: #f1c7a2; }
.pc-helm-pace[data-medal="none"] { border-color: rgba(255, 138, 92, .6); color: #ffc3a8; }
.pc-helm-cue { margin: 0; padding: 6px 12px; border-radius: 10px; font-size: 13px; font-weight: 650; line-height: 1.35; color: var(--pc-globe-text); background: rgba(9, 23, 29, .92); border: 1px solid var(--pc-globe-amber); pointer-events: none; }

/* the coach pill by urgency: calm (as is), warn (amber), urgent (coral, heavier) */
.pc-helm-coach[data-urgency="warn"] { border-color: rgba(243, 192, 91, .75); background: rgba(58, 42, 12, .9); }
.pc-helm-coach[data-urgency="urgent"] { border-color: #ff8a5c; border-width: 2px; background: rgba(70, 24, 12, .94); font-weight: 750; }
.pc-helm-coach[data-urgency="urgent"] svg { color: #ff8a5c; }
/* the control it asks for pulses a few times, then rests (a static ring under reduced motion) */
@keyframes pc-ask { 0%, 100% { box-shadow: 0 0 0 0 rgba(243, 192, 91, 0); } 50% { box-shadow: 0 0 0 5px rgba(243, 192, 91, .6); } }
.pc-helm[data-ask="engine"] :is(.pc-helm-lever, .pc-helm-steps),
.pc-helm[data-ask="rudder"] :is(.pc-helm-arc, .pc-helm-rudder-hit),
.pc-helm[data-ask="centre"] :is(.pc-arc-centre, [data-helm="centre"]) { animation: pc-ask .75s ease-in-out 3; border-radius: 12px; }
@media (prefers-reduced-motion: reduce) {
  .pc-helm[data-ask] :is(.pc-helm-lever, .pc-helm-steps, .pc-helm-arc, .pc-helm-rudder-hit, .pc-arc-centre, [data-helm="centre"]) { animation: none; outline: 2px solid var(--pc-globe-amber); outline-offset: 2px; }
}

/* the rudder arc's centre: a bold mark and a button over it (a tap centres the rudder) */
.pc-arc-tick--centre { stroke: var(--pc-globe-accent-soft, #94e2d0); stroke-width: 3; opacity: 1; }
.pc-arc-centre-mark { fill: var(--pc-globe-amber); }
.pc-arc-centre { display: none; position: absolute; left: 50%; top: -16px; width: 52px; height: 46px; transform: translateX(-50%); padding: 0; background: transparent; border: 0; cursor: pointer; }
@media (max-width: 900px), (pointer: coarse) { .pc-arc-centre { display: block; } }

@media (max-width: 480px) {
  /* Leave helm moves to the top bar, away from the thumbs' controls; the console keeps Tugs, Frame and the speed */
  html body[data-ui][data-helm] #helm-hud .pc-helm-leave-top { display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; min-height: 44px; padding: 0 10px; font-size: 12.5px; margin-left: auto; border-color: rgba(255, 138, 92, .45); color: #ffc9b4; }
  html body[data-ui][data-helm] #helm-hud .pc-helm-actions [data-helm="leave"] { display: none; }
  /* one row that wraps: the place name shrinks (ellipsis) so Leave helm never leaves the screen */
  html body[data-ui][data-helm] #helm-hud .pc-helm-task-head { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; min-width: 0; }
  html body[data-ui][data-helm] #helm-hud .pc-helm-task-head #helm-place { flex: 1 1 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  html body[data-ui][data-helm] #helm-hud .pc-helm-tasks { order: 5; flex: 1 0 100%; }
  html body[data-ui][data-helm] #helm-hud .pc-helm-actions .pc-btn { min-height: 48px; font-size: 12px; }
  html body[data-ui][data-helm] #helm-hud .pc-helm-actions [data-helm="frame"] { grid-column: 1 / -1; order: 3; }
  html body[data-ui][data-helm] #helm-hud .pc-helm-ff-cycle { order: 2; }
  html body[data-ui][data-helm] #helm-hud .pc-helm-aux .pc-btn { min-height: 48px; font-size: 12px; }
  html body[data-ui][data-helm] #helm-hud .pc-helm-actions { grid-template-rows: 48px 48px; }
  /* "DEAD SLOW" is never cut: the word stays whole, the "Engine" prefix goes (the telegraph's own box shrinks, not the label) */
  html body[data-ui][data-helm] #helm-hud .pc-helm-telegraph { overflow: visible; }
  html body[data-ui][data-helm] #helm-hud .pc-helm-telegraph > .pc-eyebrow { font-size: 0; overflow: visible; text-overflow: clip; white-space: nowrap; }
  html body[data-ui][data-helm] #helm-hud .pc-helm-telegraph output { overflow: visible; text-overflow: clip; white-space: nowrap; font-size: 14px; letter-spacing: .02em; }
  html body[data-ui][data-helm] #helm-hud[data-final="true"] .pc-helm-telegraph > .pc-eyebrow { font-size: 0; }
  html body[data-ui][data-helm] #helm-hud[data-final="true"] #helm-engine-now { font-size: 16px; }
  /* the pace chip sits tight above the coach pill */
  html body[data-ui][data-helm] #helm-hud .pc-helm-pace { font-size: 12px; }
  /* the Conditions row: Today's weather · Pilot assist on · Start (Change opens the rest) */
  html body[data-ui][data-helm] #helm-hud .pc-helm-setup[data-compact="true"] :is(.pc-helm-setup-score) { display: none; }
  html body[data-ui][data-helm] #helm-hud .pc-helm-setup[data-compact="true"] .pc-helm-setup-row { flex-wrap: wrap; font-size: 13px; }
  /* result: the bands are Details on a phone, hidden with it */
  html body[data-ui][data-helm] #helm-hud .pc-helm-result[data-collapsed="true"] .pc-helm-bands { display: none; }
  html body[data-ui][data-helm] #helm-hud .pc-helm-next { font-size: 14px; }
  html body[data-ui][data-helm] #helm-hud .pc-helm-fail-hint { font-size: 16px; }
}

/* ================= Round 6 (W2): the target marker from the first frame ================= */
.pc-helm-edge[data-on="true"] svg { display: none; }
.pc-helm-edge[data-on="true"]::before { content: ""; position: absolute; left: -9px; top: -9px; width: 18px; height: 18px; border-radius: 50%; border: 2.5px solid var(--pc-globe-amber); background: rgba(243, 192, 91, .22); box-shadow: 0 0 0 2px rgba(9, 23, 29, .7), 0 2px 8px rgba(0, 0, 0, .5); }
.pc-helm-edge[data-on="true"] span { top: 14px; font-size: 12px; color: var(--pc-globe-amber); }

/* ================= Round 6 (W2): one-row Conditions, the result as the only layer, one penalty list ================= */
/* ruling 86h: the base score on the card's face ("100 / 100 base 82"): plain muted text beside the score, never a second chip */
.pc-helm-score-base { font: 650 12.5px var(--pc-globe-mono); color: var(--pc-globe-text-2, #b9cdd2); white-space: nowrap; letter-spacing: .01em; }
.pc-helm-score-base[hidden] { display: none; }
.pc-helm-captain { background: linear-gradient(180deg, #d9f3ff, #7cc7ee); color: #06202e; box-shadow: 0 0 14px rgba(124, 199, 238, .45); }
.pc-helm-captain[hidden] { display: none; }
.pc-helm-change-top { display: none; }
.pc-helm-history { display: grid; gap: 3px; }
.pc-helm-history .pc-eyebrow { margin: 0; }
.pc-helm-history ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; font: 600 12px var(--pc-globe-mono); color: var(--pc-globe-text-2); }
.pc-helm-history li { display: grid; grid-template-columns: 34px 1fr auto; gap: 8px; align-items: baseline; }
.pc-helm-history li b { color: var(--pc-globe-text); font-variant-numeric: tabular-nums; }
.pc-helm-history li[data-pb="true"] b { color: var(--pc-globe-amber); }
.pc-helm-history li i { font-style: normal; }
.pc-helm-history[hidden] { display: none; }
.pc-helm-more-actions { display: none; }
/* a failure: the title is red, in the same weight as a result's score */
.pc-helm[data-status="failed"] .pc-helm-result-title { color: #ff8f75; font-size: 20px; font-weight: 800; }
.pc-helm[data-status="failed"] .pc-helm-result-text { color: var(--pc-globe-text); font-weight: 650; }

@media (max-width: 480px) {
  /* the result is the only layer: the objective strip, controls, coach, chips, guide and arrow all go under it */
  html body[data-ui][data-helm] #helm-hud:is([data-status="success"], [data-status="failed"]):has(.pc-helm-result:not([hidden])) :is(.pc-helm-task, .pc-helm-console, .pc-helm-env, .pc-helm-bl, .pc-helm-tutor, .pc-helm-edge, .pc-helm-ghostlabel, .pc-helm-tug-arm) { display: none; }
  /* one penalty list: the short one closed, the rows (each with its penalty) once Details is open */
  html body[data-ui][data-helm] #helm-hud .pc-helm-result[data-collapsed="false"] .pc-helm-lost { display: none; }
  /* Try again and Leave helm on one row; Peek and Other task live inside Details */
  html body[data-ui][data-helm] #helm-hud .pc-helm-sheet .pc-helm-result-actions { grid-template-columns: 1fr 1fr; }
  html body[data-ui][data-helm] #helm-hud .pc-helm-result-actions :is([data-helm="other"], .pc-helm-sheet-peek) { display: none; }
  html body[data-ui][data-helm] #helm-hud .pc-helm-sheet-leave { grid-column: auto; }
  html body[data-ui][data-helm] #helm-hud .pc-helm-more-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
  html body[data-ui][data-helm] #helm-hud .pc-helm-more-actions .pc-btn { min-height: 44px; justify-content: center; font-size: 13px; }

  /* the weather chip on its own line under the place, never over the title; Change beside it while the card is one row */
  html body[data-ui][data-helm] #helm-hud .pc-helm-task-head { row-gap: 4px; }
  html body[data-ui][data-helm] #helm-hud .pc-helm-task-head #helm-place { order: 1; }
  html body[data-ui][data-helm] #helm-hud .pc-helm-leave-top { order: 2; }
  html body[data-ui][data-helm] #helm-hud .pc-helm-env-tier { order: 3; flex: 0 1 auto; max-width: 100%; margin-right: auto; }
  html body[data-ui][data-helm] #helm-hud[data-briefing="true"] .pc-helm-env-tier { display: block; white-space: normal; border-radius: 14px; }
  html body[data-ui][data-helm] #helm-hud[data-briefing="true"][data-setup="compact"] .pc-helm-change-top { display: inline-flex; order: 4; align-items: center; min-height: 36px; padding: 0 6px; background: none; border: 0; color: var(--pc-globe-info); font: 650 12.5px var(--pc-text); text-decoration: underline; margin-left: auto; }
  html body[data-ui][data-helm] #helm-hud .pc-helm-tasks { order: 5; }
  /* the goal line is the coach pill's first words: no separate row of numbers unless the objective is open */
  html body[data-ui][data-helm] #helm-hud:not([data-objective="open"]) .pc-helm-meta { display: none; }

  /* Conditions folded: one ~56 px row, a full-width Start. The console waits under it, so the first screen is the ship, the target and Start */
  html body[data-ui][data-helm] #helm-hud[data-briefing="true"][data-setup="compact"] { padding-bottom: 66px; }
  html body[data-ui][data-helm] #helm-hud[data-briefing="true"]:is([data-setup="compact"], [data-setup="open"]) .pc-helm-console { display: none; } /* ruling 69: no console sliver or overlap under the Conditions sheet */
  html body[data-ui][data-helm] #helm-hud .pc-helm-setup[data-compact="true"] { display: block; padding: 4px; gap: 0; border-radius: 16px; }
  html body[data-ui][data-helm] #helm-hud .pc-helm-setup[data-compact="true"] .pc-helm-setup-row { display: none; }
  html body[data-ui][data-helm] #helm-hud .pc-helm-setup[data-compact="true"] .pc-helm-start { display: flex; width: 100%; min-height: 48px; font-size: 16px; }
  html body[data-ui][data-helm] #helm-hud .pc-helm-setup[data-compact="true"] .pc-helm-start-go { display: inline; }
}

/* ================= X1 (rulings 47, 48, 50): practice, the medal payoff, the phone's lead line and one-block result ================= */
.pc-helm-lead { position: absolute; left: 0; top: 0; width: 1px; height: 1px; pointer-events: none; z-index: 1; overflow: visible; } /* a point: the dots are drawn in the clear area's own pixels */
.pc-helm-lead[hidden] { display: none; }
.pc-helm-lead line { stroke: var(--pc-globe-amber); stroke-width: 6; stroke-linecap: round; stroke-dasharray: 0.1 13; filter: drop-shadow(0 0 2px rgba(9, 23, 29, .95)) drop-shadow(0 1px 4px rgba(0, 0, 0, .7)); }
.pc-helm-tutor-actions [hidden] { display: none; }
.pc-helm-ctx { display: none; }
.pc-helm-ctx-means { margin: 0; font-size: 13px; line-height: 1.4; color: var(--pc-globe-text); }
.pc-helm-ctx-means[hidden] { display: none; }
.pc-helm-result[data-practice="true"] .pc-helm-score-gold { display: none; }

/* the medal stamp and the count-up (JS runs the number; the stamp is this): about 1.4 s, a tap skips it, reduced motion is static */
@keyframes pc-stamp { 0% { opacity: 0; transform: scale(2.1) rotate(-9deg); } 70% { opacity: 1; transform: scale(.94) rotate(2deg); } 100% { opacity: 1; transform: scale(1) rotate(0); } }
.pc-helm-result[data-celebrate="on"] .pc-helm-medal { animation: pc-stamp .42s cubic-bezier(.2, .8, .3, 1) .95s both; }
.pc-helm-result[data-celebrate="on"] .pc-helm-perfect { animation: pc-stamp .42s cubic-bezier(.2, .8, .3, 1) 1s both; }
@media (prefers-reduced-motion: reduce) {
  .pc-helm-result[data-celebrate] .pc-helm-medal, .pc-helm-result[data-celebrate] .pc-helm-perfect { animation: none; }
}

@media (max-width: 480px) {
  /* the in-run eyebrow ("Helm · Northstar · Rotterdam") is dropped once the run starts: it only ever showed as "H." */
  html body[data-ui][data-helm] #helm-hud[data-briefing="false"][data-status="running"] .pc-helm-task-head #helm-place { display: none; }
  /* the tug sheet is the one thing on the water while it is open, except during a held Wing glance: the approach and coach stay readable there */
  html body[data-ui][data-helm] #helm-hud[data-drawer="open"]:not([data-glance]) :is(.pc-helm-pace, .pc-helm-coach, .pc-helm-cue) { display: none; }
  /* the result is one block: score, maths, the next medal, ONE context line of taps, the points lost, the buttons */
  html body[data-ui][data-helm] #helm-hud .pc-helm-result[data-ok="true"]:not([data-practice="true"]) .pc-helm-result-text { display: none; }
  html body[data-ui][data-helm] #helm-hud .pc-helm-result-conditions { display: none; }
  /* the maths line lives under Details on a phone; the Points lost list stays on the card */
  html body[data-ui][data-helm] #helm-hud .pc-helm-score .pc-helm-maths { display: none; }
  html body[data-ui][data-helm] #helm-hud .pc-helm-maths-more:not([hidden]) { display: block; }
  html body[data-ui][data-helm] #helm-hud .pc-helm-ctx-hint:not([hidden]) { display: block; }
  html body[data-ui][data-helm] #helm-hud .pc-helm-ctx-q { display: inline-grid; place-items: center; width: 15px; height: 15px; margin-left: 6px; border-radius: 50%; border: 1px solid currentColor; font: 700 10px/1 var(--pc-globe-mono); opacity: .8; }
  html body[data-ui][data-helm] #helm-hud .pc-helm-ctx:not([hidden]) { display: flex; flex-wrap: nowrap; gap: 6px; }
  html body[data-ui][data-helm] #helm-hud .pc-helm-ctx-chip { min-height: 36px; padding: 0 11px; border-radius: 999px; border: 1px solid rgba(148, 226, 208, .3); background: rgba(148, 226, 208, .08); color: var(--pc-globe-text); font: 650 12px var(--pc-globe-mono); cursor: pointer; }
  html body[data-ui][data-helm] #helm-hud .pc-helm-ctx-chip[aria-expanded="true"] { border-color: var(--pc-globe-amber); color: var(--pc-globe-amber); }
}

/* the desktop card drops the context line: the left rail and the top pill already say it */
.pc-helm-result-conditions { display: none; }
.pc-helm-maths-more, .pc-helm-ctx-hint { display: none; }
.pc-helm-maths-more { margin-top: 4px; }
.pc-helm-ctx-hint { margin: 0; font: 600 11px/1.3 var(--pc-globe-mono); letter-spacing: .04em; color: var(--pc-globe-amber); }
/* the current, drawn as a small arrow on the approach panel (up = flowing ahead) */
.pc-helm-approach .pc-helm-ap-current { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; --tone: var(--pc-globe-muted); }
.pc-helm-approach .pc-helm-ap-current[hidden] { display: none; }
.pc-helm-ap-current svg { width: 20px; height: 20px; flex: none; transition: none; }
.pc-helm-ap-current svg path { fill: none; stroke: var(--pc-globe-accent); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.pc-helm-approach .pc-helm-ap-current output { font-size: 12.5px; font-weight: 600; color: var(--pc-globe-text-2); }

/* ================= Round 9 (Z1): a casual-first result, one dominant cue, a stamp that stays inside the card ================= */
/* the card leads with the score and ONE plain sentence; the formula, tier maths, medal bands and rows wait behind Details on a desk too */
.pc-helm-try { margin: 0; font-size: 15px; font-weight: 650; line-height: 1.38; color: var(--pc-globe-amber); }
.pc-helm-try[hidden] { display: none; }
.pc-helm-result-toggle { display: inline-flex; align-items: center; justify-content: center; min-height: 36px; justify-self: start; }
.pc-helm-result-text[data-quiet="true"] { display: none; }
.pc-helm-result[data-ok="true"]:not([data-practice="true"]) .pc-helm-result-text { display: none; }
.pc-helm-score .pc-helm-maths { display: none; }
.pc-helm-maths-more:not([hidden]) { display: block; }
.pc-helm-result .pc-helm-next:not([hidden]) { display: block; }
/* the stamp lands inside the card: a short, small settle that never grows over the Gale chip */
.pc-helm-result { overflow: hidden; }
.pc-helm-score-head { gap: 6px 8px; align-items: center; }
.pc-helm-score-head .pc-helm-tier { position: relative; z-index: 2; margin-left: auto; }
.pc-helm-score-head .pc-helm-medal { position: relative; z-index: 1; margin-left: 4px; transform-origin: 70% 50%; }
@keyframes pc-stamp { 0% { opacity: 0; transform: scale(1.35) rotate(-4deg); } 70% { opacity: 1; transform: scale(.97) rotate(1deg); } 100% { opacity: 1; transform: scale(1) rotate(0); } }
/* the coach pill: the action first and bold, the numbers dimmed after it */
.pc-helm-coach-num { font-weight: 500; opacity: .66; }
.pc-helm-coach b { font-weight: 750; }
/* a slightly wider throttle thumb on a phone */
@media (max-width: 900px), (pointer: coarse) { .pc-helm-lever { width: 64px; } .pc-helm-lever-knob { left: 5px; right: 5px; } }

/* ================= Round 10 (A1): one next thing, uncapped chip, the way out of a stall ================= */
/* the practice footnote is a before-Start line only */
.pc-helm[data-briefing="false"] .pc-helm-note, #helm-hud[data-briefing="false"] .pc-helm-note { display: none; }
/* "Details" / "Hide details" is a text link beside the maths, not a button */
.pc-helm-result-toggle, html body[data-ui][data-helm] #helm-hud .pc-helm-result-toggle { border: 0; background: none; padding: 2px 2px; min-width: 0; min-height: 36px; font: 600 12.5px var(--pc-globe-mono); color: var(--pc-globe-info, var(--pc-globe-text-2)); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
@media (max-width: 480px) { html body[data-ui][data-helm] #helm-hud .pc-helm-result-toggle { min-height: 44px; } }
/* the three chips live inside Details on a phone */
.pc-helm-result[data-collapsed="true"] .pc-helm-ctx, .pc-helm-result[data-collapsed="true"] .pc-helm-ctx-hint, .pc-helm-result[data-collapsed="true"] .pc-helm-ctx-means { display: none !important; }
.pc-helm-result-more .pc-helm-ctx:not([hidden]) { margin-top: 6px; }
/* a capped 100 with a higher uncapped score */
.pc-helm-uncapped { display: inline-flex; align-items: center; padding: 1px 8px; border-radius: 999px; border: 1px solid rgba(243, 192, 91, .6); color: var(--pc-globe-amber); font: 700 11px var(--pc-globe-mono); white-space: nowrap; }
.pc-helm-uncapped[hidden] { display: none; }
/* the way out of a stalled or set-off run */
.pc-helm-restart { pointer-events: auto; min-height: 44px; padding: 0 16px; }
.pc-helm-restart[hidden] { display: none; }
.pc-helm-restart svg { width: 16px; height: 16px; }
html body[data-ui][data-helm] #helm-hud .pc-helm-restart { border: 2px solid var(--pc-globe-amber); box-shadow: 0 0 0 2px rgba(243, 192, 91, .28); }
@media (max-width: 480px) { html body[data-ui][data-helm] #helm-hud .pc-helm-restart { width: 100%; justify-content: center; } }
.pc-helm-result-actions [data-helm="real"][hidden] { display: none; }
/* a stall shows only the berth distance: the quay readout beside it would say two different numbers */
#helm-hud:is([data-stall="stalled"], [data-stall="set"]) .pc-helm-approach [data-ap="gap"] { display: none; }
/* while the coach is urgent or a stall is shown the pace chip and the secondary approach readouts keep quiet */
#helm-hud:is([data-stall="stalled"], [data-stall="set"], [data-urgent="true"]) .pc-helm-pace { display: none; }
/* ruling 75: the numbers that matter (distance, closing, heading) stay; only the current text goes */
#helm-hud:is([data-stall="stalled"], [data-stall="set"], [data-urgent="true"]) .pc-helm-approach .pc-helm-ap-current { display: none; }
#helm-hud:is([data-stall="stalled"], [data-stall="set"]) .pc-helm-cue { display: none; }

/* rulings 72, 75: the coach says call a tug: the one button that counters the set wears the accent outline (or, with
   no clear set, the TUGS group label), plus the phone's TUGS button, until one is called. Never all four. */
.pc-helm[data-tug-ask="pick"] .pc-helm-tugs button[data-tug-ask="true"],
.pc-helm[data-tug-ask] .pc-helm-drawer-tab { outline: 2px solid var(--pc-globe-amber); outline-offset: 2px; }
.pc-helm[data-tug-ask="group"] .pc-helm-tugs > .pc-eyebrow { outline: 2px solid var(--pc-globe-amber); outline-offset: 2px; border-radius: 4px; }
.pc-helm-checks li[data-neutral="true"], #helm-checks li[data-neutral="true"] { color: var(--pc-globe-text-2); }
/* the phone result's Details link: padding gives a 44 px hit area, the text stays 12.5 px */
/* ruling 75: Details is a secondary button, not a bare link */
html body[data-ui][data-helm] #helm-hud .pc-helm-result-toggle { min-height: 44px; padding: 0 18px; box-sizing: border-box; border: 1px solid rgba(148, 226, 208, .5); border-radius: 10px; background: rgba(0, 0, 0, .3); color: var(--pc-globe-text); text-decoration: none; }

/* ---- Ruling 79 (lane J2): desktop control size. At >= 1024 px the engine telegraph steps and the rudder / midships / stop-engine
   buttons are >= 40 px tall with >= 6 px between neighbours. The console pays for it with tighter padding and row gaps, so the
   console grows by <= 16 px at 1440x900 and the 3D view does not shrink. Phones (<= 480 px) and the <= 900 px layouts never match. ---- */
@media (min-width: 1024px) {
  .pc-helm .pc-helm-console { padding-block: 6px; row-gap: 8px; }
  .pc-helm .pc-helm-steps { gap: 6px; }
  .pc-helm .pc-helm-step { min-height: 40px; }
  .pc-helm .pc-helm-block { gap: 6px; }
  .pc-helm .pc-helm-rudder-row { gap: 6px; }
  .pc-helm .pc-helm-rudder-row .pc-btn { min-height: 40px; }
}

/* ===== J1 / ruling 78: the Wheelhouse view (window frame, Wheelhouse and Wing buttons). Own block; J2's engine/rudder sizing lives above. ===== */
.pc-helm-clear { position: relative; }
.pc-helm-window { position: absolute; inset: 0; display: none; pointer-events: none; overflow: hidden; border-radius: 6px; }
.pc-helm[data-camera="wheelhouse"] .pc-helm-window { display: block; }
.pc-helm-window::before { /* the frame: head, posts and two mullions; the centre stays open so the berth is never behind a bar */
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(8, 12, 15, .94) 0 7px, transparent 7px calc(100% - 7px), rgba(8, 12, 15, .94) calc(100% - 7px)),
    linear-gradient(180deg, rgba(8, 12, 15, .94) 0 9px, transparent 9px),
    linear-gradient(90deg, transparent 0 calc(24% - 3px), rgba(8, 12, 15, .9) calc(24% - 3px) calc(24% + 3px), transparent calc(24% + 3px) calc(76% - 3px), rgba(8, 12, 15, .9) calc(76% - 3px) calc(76% + 3px), transparent calc(76% + 3px));
  box-shadow: inset 0 0 0 1px rgba(148, 226, 208, .14), inset 0 0 40px rgba(0, 0, 0, .35);
}
.pc-helm-window-glass { position: absolute; inset: 0; background: linear-gradient(158deg, rgba(190, 235, 255, .07) 0, rgba(190, 235, 255, 0) 38%, rgba(190, 235, 255, .03) 74%, rgba(190, 235, 255, 0) 100%); }
.pc-helm-window-sill { position: absolute; left: 0; right: 0; bottom: 0; height: 16px;
  background: linear-gradient(180deg, rgba(34, 40, 44, .96), rgba(10, 14, 17, .98)); border-top: 1px solid rgba(190, 235, 255, .22); box-shadow: 0 -6px 14px rgba(0, 0, 0, .3); }
/* ===== L1 / ruling 82 (c): a bridge-wing glance. helm-scene.js sets --wing on the HUD root (the camera's wing blend: 0 at the
   window .. 1 out on the wing) and the caption ("Stbd wing · looking forward") in the clear area's data-caption. The window
   frame, glass and sill fade out as the glance passes half way (opaque to 0.35, gone by 0.65). The caption is the clear area's
   own ::after, not the window's, so a fade on the window can never take it with it; it comes in as the frame goes, top left,
   clear of the bow and the gap. A bottom stack that has been moved to the top for the glance ([data-glance], ruling 83) sits
   below it. ===== */
.pc-helm-window::before, .pc-helm-window-glass, .pc-helm-window-sill { opacity: clamp(0, calc((0.65 - var(--wing, 0)) * 3.34), 1); }
.pc-helm-clear[data-caption]::after { content: attr(data-caption); position: absolute; top: 12px; left: 14px; padding: 3px 10px; border-radius: 999px;
  background: rgba(8, 12, 15, .78); border: 1px solid rgba(148, 226, 208, .28); color: #e9f2ef; font: 600 12px/1.35 system-ui, sans-serif; letter-spacing: .02em; white-space: nowrap;
  pointer-events: none; opacity: clamp(0, calc((var(--wing, 0) - 0.35) * 3.34), 1); }
.pc-helm[data-glance] .pc-helm-bl { margin-top: 28px; }
/* the window sits behind the HUD's panels (they are later in the grid and pointer-events auto) */
.pc-helm-wheelhouse-btn, .pc-helm-wing-btn { display: inline-flex; }
.pc-helm-wing-btn[hidden], .pc-helm-viewrow [hidden] { display: none; }
.pc-helm-viewrow { display: none; flex: 1 1 100%; }
.pc-helm[data-phone="true"] .pc-helm-viewrow { display: block; }
.pc-helm[data-phone="true"] .pc-helm-actions .pc-helm-wheelhouse-btn, .pc-helm[data-phone="true"] .pc-helm-actions .pc-helm-wing-btn { display: none; }
@media (max-width: 480px) {
  .pc-helm-window::before { background:
    linear-gradient(90deg, rgba(8, 12, 15, .94) 0 4px, transparent 4px calc(100% - 4px), rgba(8, 12, 15, .94) calc(100% - 4px)),
    linear-gradient(180deg, rgba(8, 12, 15, .94) 0 6px, transparent 6px); }
  .pc-helm-window-sill { height: 10px; }
}
html body[data-ui][data-helm] #helm-hud .pc-helm-viewrow .pc-helm-aux-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* the View sheet (ruling 83): Wheelhouse and Frame target side by side, Port wing and Stbd wing under them (ruling 80) */
html body[data-ui][data-helm] #helm-hud .pc-helm-viewrow .pc-btn { min-height: 48px; justify-content: center; }
html body[data-ui][data-helm] #helm-hud .pc-helm-viewrow .pc-btn[aria-pressed="true"] { border-color: var(--pc-globe-accent); color: var(--pc-globe-accent-soft); background: rgba(95, 232, 196, .14); }
/* every pressed view control is the dark plate with mint ink (ruling 83: Frame target's pressed state was pale mint on cream, 1.09:1) */
html body[data-ui][data-helm] #helm-hud .pc-helm-actions :is([data-helm="frame"], [data-helm="view"], [data-wing], .pc-helm-glance)[aria-pressed="true"] { background: #0e3a33; border-color: var(--pc-globe-accent); color: #b8ffe4; }
html body[data-ui][data-helm] #helm-hud .pc-helm-actions :is([data-helm="frame"], [data-helm="view"], [data-wing], .pc-helm-glance)[aria-pressed="true"] kbd { color: #b8ffe4; }

/* ===== L2 / ruling 83: the Wheelhouse HUD. Own block (the J1 window frame and J2 control sizes live above). ===== */
/* (c) desktop: the actions are two columns. Frame target | Wheelhouse, then Port wing | Stbd wing side by side, then Leave helm
   and Fast forward across both. The wings' row stays outside the Wheelhouse (disabled), so pressing V never changes the console's
   height: it grew 80 px when the wings stacked (260 -> 340 px at 1440x900); now it is 260 px in every state. */
.pc-helm .pc-helm-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 6px; }
.pc-helm .pc-helm-actions > :is([data-helm="leave"], .pc-helm-ff) { grid-column: 1 / -1; }
.pc-helm .pc-helm-actions .pc-btn { gap: 6px; padding-inline: 10px; white-space: nowrap; }
.pc-helm .pc-helm-actions .pc-helm-wing-btn:disabled { opacity: .5; cursor: default; }
/* a desk (the console in one row): two fixed 128 px columns. The console's `auto` track takes the grid's max-content, so
   fractions would grow the column to the labels' one-line width and squeeze the telegraph and rudder into two-line labels.
   128 px holds "FRAME TARGET" and "STBD WING" with their key hints on one line (124 px clips Frame target); the labels
   keep to one line, so the buttons stay at the console's 34 px and the column is as tall as it was before the wings. */
@container helm (min-width: 981px) {
  .pc-helm .pc-helm-actions { grid-template-columns: repeat(2, 128px); }
  .pc-helm .pc-helm-actions > .pc-btn { padding: 3px 7px; font-size: 11.5px; letter-spacing: .02em; line-height: 1.15; }
  .pc-helm .pc-helm-actions > .pc-btn > svg { display: none; }
}
/* the telegraph needs ~62 px a step for "Half astern" on one line: from ~1255 px up it has it; below, a 10 px label and a
   tighter console gap give it back what the second action column took */
@container helm (min-width: 981px) and (max-width: 1299.98px) {
  .pc-helm .pc-helm-step { font-size: 10px; letter-spacing: 0; }
  .pc-helm .pc-helm-console { column-gap: 14px; }
}
@container helm (max-width: 980px) { .pc-helm .pc-helm-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* key hints take their button's own ink: dark on the cream plates, cream on a hovered plate, mint on a pressed one (they
   were pale on cream, ~1.45:1), at the right edge of the plate. The wings say which side: "‹ ," and "› ." */
.pc-helm .pc-btn kbd { color: inherit; background: rgba(18, 48, 62, .08); border-color: currentColor; border-color: color-mix(in srgb, currentColor 45%, transparent);
  font-size: 10.5px; line-height: 16px; white-space: nowrap; flex: none; }
.pc-helm .pc-btn kbd i { font-style: normal; font-weight: 800; }
.pc-helm .pc-helm-actions > .pc-btn > kbd { margin-left: auto; }
/* the phone's own buttons (View tab, hold-to-glance Wing) are not on a desk */
.pc-helm-view-tab, .pc-helm-glance { display: none; }

/* (a) phones: the console's four places are Tugs | speed, then Frame target | View. In the Wheelhouse the Wing (held: a
   glance from the quay-side wing) takes Frame target's place, which moves into the View sheet. View opens its own sheet of
   the drawer (Wheelhouse, Frame target, Port wing, Stbd wing); Tugs opens the tugs. */
@media (max-width: 480px) {
  html body[data-ui][data-helm] #helm-hud .pc-helm-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: 48px 48px; grid-template-areas: "tugs ff" "frame view"; }
  html body[data-ui][data-helm] #helm-hud[data-tugs="false"] .pc-helm-actions { grid-template-areas: "ff ff" "frame view"; }
  html body[data-ui][data-helm] #helm-hud .pc-helm-actions > .pc-helm-drawer-tab { grid-area: tugs; }
  html body[data-ui][data-helm] #helm-hud .pc-helm-actions > .pc-helm-ff-cycle { grid-area: ff; }
  html body[data-ui][data-helm] #helm-hud .pc-helm-actions > [data-helm="frame"] { grid-area: frame; }
  html body[data-ui][data-helm] #helm-hud .pc-helm-actions > .pc-helm-view-tab { grid-area: view; display: inline-flex; }
  html body[data-ui][data-helm] #helm-hud[data-camera="wheelhouse"] .pc-helm-actions > [data-helm="frame"] { display: none; }
  html body[data-ui][data-helm] #helm-hud .pc-helm-actions > .pc-helm-glance:not([hidden]) { grid-area: frame; display: inline-flex; }
  html body[data-ui][data-helm] #helm-hud .pc-helm-glance { flex-direction: column; justify-content: center; align-items: center; gap: 3px; padding: 2px 4px;
    touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
  html body[data-ui][data-helm] #helm-hud .pc-helm-glance b { font: 750 13px/1 var(--pc-text); letter-spacing: .06em; text-transform: uppercase; }
  html body[data-ui][data-helm] #helm-hud .pc-helm-glance small { font: 600 10px/1 var(--pc-globe-mono); letter-spacing: 0; text-transform: none; }
  /* "Back to ship" (while framing) is longer than "Frame target": a little smaller, it takes two lines in the 64 px cell, not three */
  html body[data-ui][data-helm] #helm-hud .pc-helm-actions > [data-helm="frame"][aria-pressed="true"] { font-size: 10.5px; letter-spacing: 0; padding-inline: 2px; }
  /* the drawer shows the sheet its tab opened */
  html body[data-ui][data-helm] #helm-hud[data-sheet="view"] .pc-helm-aux > :not(.pc-helm-viewrow) { display: none; }
  html body[data-ui][data-helm] #helm-hud[data-sheet="tugs"] .pc-helm-aux > .pc-helm-viewrow { display: none; }
  html body[data-ui][data-helm] #helm-hud[data-sheet="view"] .pc-helm-aux .pc-helm-viewrow { display: grid; gap: 5px; align-self: stretch; width: 100%; }
}

/* (b, d) a wing glance looks down her side, and the near gap lies at the foot of the picture. While it lasts the bottom stack
   (approach numbers, coach, pace, Come round again) moves to the top of the water, centred on a wide desk where the wind rose
   leaves room. The berth marker steps aside (helm-ui, and here on a phone). The glance caption in the top-left corner (lane L1,
   ruling 82c) is cleared by that lane's own margin-top on this rule; the window frame's fade is theirs too. */
.pc-helm[data-glance] .pc-helm-bl { top: 14px; bottom: auto; }
@container helm (min-width: 1400px) { .pc-helm[data-glance] .pc-helm-bl { left: 0; right: 0; margin-inline: auto; width: fit-content; justify-items: center; } }
@media (max-width: 480px) {
  html body[data-ui][data-helm] #helm-hud[data-glance] .pc-helm-bl { top: 14px; bottom: auto; left: 2px; justify-items: start; }
  html body[data-ui][data-helm] #helm-hud[data-glance] .pc-helm-edge { display: none; }
}

/* ================= Round 18 (M2): the Wing says how it works; a Wing press leaves an open sheet and an armed tug alone ================= */
@media (max-width: 480px) {
  /* "Hold to look" is longer than the 56 px the button has inside: it takes two small lines under the label */
  html body[data-ui][data-helm] #helm-hud .pc-helm-glance small { white-space: normal; text-align: center; line-height: 1.05; max-width: 100%; }
  /* a glance a View-sheet toggle left on ("Wing on" · "tap to end"): a smaller label so it stays on one line */
  html body[data-ui][data-helm] #helm-hud .pc-helm-glance[data-latched="true"] b { font-size: 11px; letter-spacing: 0; white-space: nowrap; }
  /* ruling 86d: a Wing press does not close the Tugs sheet or disarm a tug (helm-ui no longer does either). The sheet would cover
     the near gap the glance is for, so while a finger holds the Wing it fades back and the water shows through it; it stays
     where it is and works (a second finger can send the armed tug), and it is solid again once the Wing is let go */
  html body[data-ui][data-helm] #helm-hud[data-wing-held="true"] .pc-helm-aux { opacity: .34; }
}