@font-face {
  font-family: "Montserrat";
  src: url("./fonts/Montserrat-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Montserrat";
  src: url("./fonts/Montserrat-ExtraBold.ttf") format("truetype");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Montserrat";
  src: url("./fonts/Montserrat-Black.ttf") format("truetype");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "IBM Plex Mono";
  src: url("./fonts/IBMPlexMono-SemiBold.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "IBM Plex Mono";
  src: url("./fonts/IBMPlexMono-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg-canvas);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: 19px;
  line-height: 25px;
}

.top-stack {
  position: sticky;
  top: 0;
  z-index: 3;
}

.app-bar {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  min-height: var(--target-primary);
  padding:
    calc(env(safe-area-inset-top) + var(--space-xs))
    var(--space-md)
    var(--space-xs);
  background: var(--bg-header);
  color: var(--text-on-header);
  border-bottom: 1px solid var(--text-on-header);
}

.mark {
  width: 36px;
  height: 36px;
  flex: 0 0 auto;
  color: var(--text-on-header);
}

.brand-copy { min-width: 0; }

.wordmark {
  margin: 0;
  color: var(--text-on-header);
  font-family: var(--font-ui);
  font-weight: 900;
  font-size: 22px;
  line-height: 26px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}

.bar-caption {
  margin: 0;
  color: var(--text-on-header);
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 600;
  line-height: 20px;
}

button {
  appearance: none;
  margin: 0;
}

.status-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: var(--space-xs);
  overflow: hidden;
  padding: var(--space-xs) var(--space-md);
  background: var(--bg-surface);
  border-bottom: var(--border-control) solid var(--border-strong);
}

/* Chips take their own text width and move to the next line at 320 px.
   A nowrap row clipped the sample count and the backup reason (PA-219).
   The gap count sits beside the sample count and wraps the same way (PA-223). */
.status-strip > .chip {
  flex: 0 0 auto;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.zip-line {
  margin: 0;
  min-height: var(--target-chip);
  padding: var(--space-xs) var(--space-md);
  background: var(--bg-surface);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 700;
  line-height: 20px;
}

.chip {
  flex: 1 1 0;
  min-width: var(--target-min);
  min-height: var(--target-chip);
  overflow: hidden;
  padding: var(--space-xs) var(--space-sm);
  border: var(--border-control) solid var(--border-default);
  border-radius: var(--radius-chip);
  background: var(--bg-raised);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 600;
  line-height: 20px;
  text-align: left;
  touch-action: manipulation;
}

.chip[data-state="ok"] {
  background: var(--status-ok-bg);
  color: var(--status-ok-fg);
  border-color: var(--status-ok-fg);
}

.chip[data-state="warn"] {
  background: var(--status-warn-bg);
  color: var(--status-warn-fg);
  border-color: var(--status-warn-fg);
}

.chip[data-state="danger"] {
  background: var(--status-danger-bg);
  color: var(--status-danger-fg);
  border-color: var(--status-danger-fg);
}

.chip[data-state="info"] {
  background: var(--status-info-bg);
  color: var(--status-info-fg);
  border-color: var(--status-info-fg);
}

.chip[hidden] { display: none; }

.chip.no-gps-chip {
  flex: 0 0 auto;
  min-width: 88px;
  min-height: var(--target-chip);
  font-size: 17px;
  font-weight: 800;
}

#sync-chip {
  flex: 0 0 auto;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.status-strip.rec-lock {
  display: block;
  min-height: var(--target-min);
  background: var(--status-warn-bg);
  color: var(--status-warn-fg);
  border-bottom-color: var(--status-warn-fg);
  font-size: 15px;
  font-weight: 700;
  line-height: 20px;
}

.status-strip.rec-lock[hidden] { display: none; }

#station-chip {
  flex: 0 0 auto;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-family: var(--font-mono);
  font-weight: 600;
}

#sample-chip {
  flex: 0 0 auto;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  font-weight: 700;
}

#gap-chip {
  flex: 0 0 auto;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  font-weight: 700;
}

main {
  width: min(100%, 40rem);
  margin: 0 auto;
  padding: var(--space-md) var(--space-md) calc(296px + env(safe-area-inset-bottom));
}

.section-label {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  margin: var(--space-md) 0 var(--space-xs);
  color: var(--text-secondary);
  font-family: var(--font-ui);
  font-size: 15px;
  font-weight: 700;
  line-height: 20px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}

.tick {
  width: 10px;
  height: 10px;
  background: var(--icon-accent);
  flex: 0 0 auto;
}

.lede,
.boundary,
.note {
  margin: var(--space-xs) 0;
  color: var(--text-primary);
}

.note { color: var(--text-secondary); }

.readout-panel {
  margin-top: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  background: var(--bg-surface);
  border: var(--border-control) solid var(--border-default);
  border-radius: var(--radius-card);
}

.readout {
  margin: 0;
  color: var(--text-primary);
  font-family: var(--font-mono);
  font-size: 32px;
  font-weight: 700;
  line-height: 36px;
  overflow-wrap: anywhere;
}

.coord {
  margin: var(--space-xs) 0 0;
  color: var(--text-primary);
  font-family: var(--font-mono);
  font-size: 18px;
  font-weight: 600;
  line-height: 22px;
  overflow-wrap: anywhere;
}

.caption {
  margin: var(--space-xs) 0 0;
  color: var(--text-secondary);
  font-size: 15px;
  font-weight: 600;
  line-height: 20px;
}

input.day-field {
  display: block;
  width: 100%;
  box-sizing: border-box;
  min-height: var(--target-chip);
  min-width: var(--target-min);
  margin-top: var(--space-xxs);
  padding: var(--space-xs) var(--space-sm);
  border: var(--border-control) solid var(--border-default);
  border-radius: var(--radius-control);
  background: var(--bg-raised);
  color: var(--text-primary);
  font-family: var(--font-mono);
  font-size: 22px;
  font-weight: 600;
  line-height: 26px;
  touch-action: manipulation;
}

.banner {
  margin: var(--space-sm) 0 0;
  padding: var(--space-sm) var(--space-md);
  border: var(--border-control) solid var(--border-strong);
  border-radius: var(--radius-control);
  font-size: 18px;
  font-weight: 600;
  line-height: 22px;
}

.banner[data-state="offline"] {
  background: var(--status-warn-bg);
  color: var(--status-warn-fg);
  border-color: var(--status-warn-fg);
}

.banner[data-state="online"] {
  background: var(--status-info-bg);
  color: var(--status-info-fg);
  border-color: var(--status-info-fg);
}

.banner[data-state="ok"] {
  background: var(--status-ok-bg);
  color: var(--status-ok-fg);
  border-color: var(--status-ok-fg);
}

.banner[data-state="danger"] {
  background: var(--status-danger-bg);
  color: var(--status-danger-fg);
  border-color: var(--status-danger-fg);
}

#status:empty { display: none; }

.field-chip {
  min-height: var(--target-chip);
  min-width: var(--target-chip);
  margin-top: var(--space-sm);
  padding: var(--space-xs) var(--space-md);
  border: var(--border-control) solid var(--border-default);
  border-radius: var(--radius-chip);
  background: var(--bg-raised);
  color: var(--text-primary);
  font-family: var(--font-ui);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 1.2px;
  line-height: 22px;
  text-transform: uppercase;
  touch-action: manipulation;
}

.station-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.station {
  margin-top: var(--space-sm);
  padding: var(--space-sm);
  background: var(--bg-raised);
  border: var(--border-control) solid var(--border-default);
  border-radius: var(--radius-card);
}

.station h3 {
  margin: 0;
  font-family: var(--font-body);
  font-size: 18px;
  font-weight: 600;
  line-height: 22px;
}

.capture-row {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  margin-top: var(--space-xs);
}

.capture-row img,
.station img {
  display: block;
  width: 42%;
  max-height: 180px;
  flex: 0 0 auto;
  margin-top: 0;
  object-fit: cover;
  border-radius: var(--radius-chip);
  background: var(--bg-scrim);
}

.stamp-lines {
  margin: 0;
  padding: 0;
  min-width: 0;
  list-style: none;
  color: var(--text-primary);
  font-family: var(--font-mono);
  font-size: 15px;
  font-weight: 600;
  line-height: 20px;
}

.gap-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.cell-lines,
#compass-notice {
  color: var(--text-secondary);
  background: var(--bg-surface);
}

/* The notice stays in the station panel. It does not paint over the shutter. */
#compass-notice {
  position: static;
  z-index: 0;
  pointer-events: none;
  scroll-margin-bottom: calc(320px + env(safe-area-inset-bottom));
}

.cell-lines {
  white-space: pre-line;
}

.gap-list li {
  margin-top: var(--space-xs);
  color: var(--text-primary);
  font-size: 18px;
  font-weight: 600;
  line-height: 22px;
}

.sample-row {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  margin-top: var(--space-sm);
}

.sample-row label {
  display: flex;
  flex-direction: column;
  gap: var(--space-xxs);
  color: var(--text-secondary);
  font-size: 15px;
  font-weight: 600;
  line-height: 20px;
}

input.station-field,
select.station-field {
  display: block;
  width: 100%;
  margin-top: var(--space-xxs);
}

.kind-set {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  margin: var(--space-xs) 0 0;
  padding: 0;
  border: 0;
}

.kind-set legend {
  padding: 0;
}

label.kind-choice {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  box-sizing: border-box;
  width: 100%;
  min-height: var(--target-min);
  min-width: var(--target-min);
  padding: var(--space-xs) var(--space-sm);
  border: var(--border-control) solid var(--border-strong);
  border-radius: var(--radius-control);
  background: var(--bg-raised);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: 18px;
  font-weight: 700;
  line-height: 22px;
  touch-action: manipulation;
}

label.kind-choice:has(input:checked) {
  background: var(--fill-accent);
  color: var(--text-on-accent);
}

input.kind-box {
  flex: 0 0 auto;
  width: var(--target-min);
  height: var(--target-min);
  min-width: var(--target-min);
  min-height: var(--target-min);
  margin: 0;
  accent-color: var(--fill-accent);
}

input.station-field,
select.station-field,
.lab-name,
.sample-description,
.bag-tag-photo,
input.bag-photo,
.mark-sample {
  min-height: var(--target-min);
  min-width: var(--target-min);
  padding: var(--space-xs) var(--space-sm);
  border: var(--border-control) solid var(--border-default);
  border-radius: var(--radius-control);
  background: var(--bg-raised);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: 18px;
  font-weight: 600;
  line-height: 22px;
}

.action-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 4;
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  padding:
    var(--space-sm)
    var(--space-md)
    calc(var(--space-sm) + env(safe-area-inset-bottom));
  background: var(--bg-canvas);
  border-top: var(--border-control) solid var(--border-strong);
}

.shutter,
.primary {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  width: 100%;
  border: var(--border-control) solid var(--border-strong);
  border-radius: var(--radius-control);
  background: var(--fill-accent);
  color: var(--text-on-accent);
  font-family: var(--font-ui);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 1.2px;
  line-height: 22px;
  text-transform: uppercase;
  touch-action: manipulation;
}

.shutter {
  position: relative;
  z-index: 1;
  min-height: var(--target-shutter);
  pointer-events: auto;
}

.shutter[data-fix="none"] {
  min-height: var(--target-shutter);
  background: var(--status-warn-bg);
  color: var(--status-warn-fg);
  border-color: var(--status-warn-fg);
}

.primary { min-height: var(--target-primary); }

.primary.rec {
  flex-direction: column;
  gap: 0;
  min-width: var(--target-shutter);
  min-height: var(--target-shutter);
  padding: 4px 2px;
}

.rec-name {
  letter-spacing: 1.2px;
}

.rec-metres {
  color: inherit;
  font-family: var(--font-mono);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 18px;
  text-align: center;
  text-transform: none;
  white-space: pre-line;
}

.rec-metres[hidden] {
  display: none;
}

.rec-live {
  display: flex;
  align-items: stretch;
  gap: var(--space-xs);
  width: 100%;
}

.rec-live > .primary {
  width: auto;
}

.rec-live > .primary.rec {
  flex: 1 1 auto;
}

.rec-live:has(#rec-pause:not([hidden])) > .primary.rec {
  flex: 0 0 var(--target-shutter);
}

.shutter-row {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  width: 100%;
}

.shutter-row > .shutter {
  flex: 1 1 auto;
}

.shutter-row:has(.sp-primary) > .shutter {
  flex: 0 0 var(--target-shutter);
  width: var(--target-shutter);
  min-width: var(--target-shutter);
}

.shutter-row > .sp-primary,
.shutter-row > .sp-mag-stack {
  flex: 1 1 auto;
  width: auto;
}

.primary#rec-pause {
  flex: 1 1 0;
  min-width: var(--target-primary);
  min-height: var(--target-primary);
  padding-left: var(--space-xs);
  padding-right: var(--space-xs);
  font-size: 15px;
  letter-spacing: 0.4px;
}

.primary#rec-pause[aria-pressed="true"] {
  background: var(--status-warn-bg);
  color: var(--status-warn-fg);
  border-color: var(--status-warn-fg);
}

.rec-crossing {
  display: flex;
  flex: 1.6 1 0;
  min-width: var(--target-primary);
}

.rec-crossing select {
  width: 100%;
  min-width: var(--target-primary);
  min-height: var(--target-primary);
  padding: 0 28px 0 var(--space-xs);
  border: var(--border-control) solid var(--border-strong);
  border-radius: var(--radius-control);
  background-color: var(--fill-accent);
  background-image:
    linear-gradient(45deg, transparent 50%, var(--text-on-accent) 50%),
    linear-gradient(135deg, var(--text-on-accent) 50%, transparent 50%);
  background-position: calc(100% - 18px) 50%, calc(100% - 12px) 50%;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  color: var(--text-on-accent);
  font-family: var(--font-ui);
  font-size: 15px;
  font-weight: 700;
  line-height: 20px;
  appearance: none;
  touch-action: manipulation;
}

.rec-crossing select:active {
  background-color: var(--fill-accent-pressed);
  color: var(--text-on-accent-pressed);
}

.rec-live > [hidden],
.rec-crossing[hidden] {
  display: none;
}

.shutter:active,
.primary:active,
.primary#rec-pause:active {
  background: var(--fill-accent-pressed);
  color: var(--text-on-accent-pressed);
}

.shutter:disabled,
.primary:disabled,
.chip:disabled,
.field-chip:disabled {
  background: var(--fill-disabled);
  color: var(--text-primary);
  border-style: dashed;
  border-color: var(--border-default);
}

.shutter:focus-visible,
.primary:focus-visible,
.chip:focus-visible,
.field-chip:focus-visible,
.rec-crossing select:focus-visible,
input.day-field:focus-visible {
  outline: 3px solid var(--text-accent);
  outline-offset: 3px;
}

.glyph { width: 28px; height: 28px; }

.ai-draft {
  margin-top: var(--space-sm);
  padding: var(--space-sm);
  background: var(--ai-bg);
  color: var(--ai-fg);
  border: var(--border-control) solid var(--ai-fg);
  border-radius: var(--radius-card);
}

.ai-pill,
.ai-prose {
  margin: 0 0 var(--space-xs);
  background: var(--ai-bg);
  color: var(--ai-fg);
  font-size: 18px;
  font-weight: 700;
  line-height: 24px;
}

.ai-pill {
  display: inline-block;
  min-height: var(--target-min);
  padding: var(--space-xs) var(--space-sm);
  border: var(--border-control) solid var(--ai-fg);
  border-radius: var(--radius-chip);
  font-family: var(--font-ui);
  letter-spacing: 0.6px;
}

.ai-draft .banner {
  margin-top: 0;
}

.plan-file,
#plan-file {
  display: flex;
  align-items: center;
  box-sizing: border-box;
  width: 100%;
  min-height: var(--target-chip);
  margin-top: var(--space-sm);
  padding: var(--space-xs) var(--space-md);
  border: var(--border-control) solid var(--border-strong);
  border-radius: var(--radius-control);
  background: var(--bg-raised);
  color: var(--text-primary);
  font-family: var(--font-ui);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 1.2px;
  line-height: 22px;
  text-transform: uppercase;
}

.plan-layer {
  min-height: var(--target-chip);
  margin-top: var(--space-xs);
  padding: var(--space-sm);
  border: var(--border-control) solid var(--border-strong);
  border-radius: var(--radius-card);
  background: var(--bg-raised);
  color: var(--text-primary);
}

.plan-layer[data-state="warn"] {
  background: var(--status-warn-bg);
  color: var(--status-warn-fg);
}

.plan-layer[data-state="danger"] {
  background: var(--status-danger-bg);
  color: var(--status-danger-fg);
}

.banner[data-state="warn"] {
  background: var(--status-warn-bg);
  color: var(--status-warn-fg);
  border-color: var(--status-warn-fg);
}

@media (prefers-reduced-motion: reduce) {
  .shutter:active,
  .primary:active { transform: none; }
}

@media (prefers-reduced-motion: no-preference) {
  .shutter:active,
  .primary:active {
    transform: scale(0.96);
    transition: transform 100ms ease-out, background 100ms ease-out, color 100ms ease-out;
  }
}

.station-pass {
  margin: 0 0 var(--space-md);
}

.station-pass-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  color: var(--text-primary);
  background: var(--bg-canvas);
}

.sp-heading {
  margin: var(--space-xs) 0 0;
  font-family: var(--font-ui);
  font-weight: 800;
  font-size: 22px;
  line-height: 28px;
  letter-spacing: 0.4px;
}

.sp-sub,
.sp-caption,
.sp-field-label {
  margin: 0;
  color: var(--text-secondary);
  font-size: 15px;
  line-height: 20px;
  font-weight: 600;
}

.sp-section {
  margin: var(--space-sm) 0 0;
  font-family: var(--font-ui);
  font-size: 15px;
  line-height: 20px;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.sp-label,
.sp-title {
  margin: 0;
  color: var(--text-primary);
  font-weight: 700;
  font-size: 17px;
  line-height: 22px;
}

.sp-readout {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 28px;
  line-height: 34px;
  color: var(--text-primary);
}

.sp-strip,
.sp-bar,
.sp-split,
.sp-kinds,
.sp-live,
.sp-flags,
.sp-units {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  align-items: center;
}

.sp-chip,
.sp-flag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: var(--target-min);
  padding: 4px 8px;
  border-radius: var(--radius-chip);
  border: var(--border-control) solid var(--border-strong);
  font-family: var(--font-ui);
  font-size: 15px;
  font-weight: 700;
  line-height: 18px;
}

.sp-ok { background: var(--status-ok-bg); color: var(--status-ok-fg); border-color: var(--status-ok-fg); }
.sp-warn { background: var(--status-warn-bg); color: var(--status-warn-fg); border-color: var(--border-strong); }
.sp-danger { background: var(--status-danger-bg); color: var(--status-danger-fg); border-color: var(--status-danger-fg); }
.sp-info { background: var(--status-info-bg); color: var(--status-info-fg); border-color: var(--status-info-fg); }
.sp-neutral { background: var(--bg-surface); color: var(--text-primary); }

.sp-icon { width: 18px; height: 18px; flex: 0 0 auto; }

.sp-steps {
  display: flex;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.sp-steps li {
  flex: 1;
  min-height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px dashed var(--border-default);
  border-radius: 4px;
  color: var(--text-secondary);
  font-weight: 700;
  font-size: 15px;
}

.sp-steps li.on { border-style: solid; border-color: var(--border-strong); color: var(--text-primary); background: var(--bg-raised); }
.sp-steps li.done { border-style: solid; border-color: var(--status-ok-fg); color: var(--status-ok-fg); background: var(--status-ok-bg); }

.sp-input {
  width: 100%;
  min-height: var(--target-chip);
  margin-top: 4px;
  padding: 0 14px;
  border: var(--border-control) solid var(--border-strong);
  border-radius: var(--radius-control);
  background: var(--bg-raised);
  color: var(--text-primary);
  font: 400 19px/25px var(--font-body);
}

.sp-kind-row {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  min-width: 0;
}

.sp-kind-scroll {
  display: flex;
  flex: 1 1 auto;
  flex-wrap: nowrap;
  gap: var(--space-xs);
  min-width: 0;
  overflow-x: auto;
}

.sp-kind-row .sp-more {
  flex: 0 0 auto;
  border-style: dashed;
}

.sp-kind,
.sp-field,
.sp-more,
.sp-unit,
.sp-edit,
.sp-nudge-btn,
.sp-save-mag {
  min-height: var(--target-chip);
  min-width: var(--target-min);
}

.sp-kind {
  flex: 0 0 auto;
}

.sp-mag-stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.sp-save-mag {
  width: 100%;
  min-height: var(--target-chip);
}

.sp-set-decl {
  width: 100%;
  min-height: var(--target-primary);
}

.sp-nudge {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
}

.sp-nudge-btn {
  min-width: var(--target-chip);
  min-height: var(--target-chip);
}

.sp-resume-row {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}

.sp-pass-shutter {
  flex: 0 0 var(--target-shutter);
  width: var(--target-shutter);
  min-width: var(--target-shutter);
  min-height: var(--target-shutter);
}

.sp-kind.on,
.sp-unit.on {
  background: var(--fill-inverse);
  color: var(--text-on-inverse);
  border-color: var(--border-strong);
}

.sp-more {
  min-height: 48px;
  border: none;
  background: transparent;
  color: var(--text-primary);
  font-weight: 700;
  text-decoration: underline;
  cursor: pointer;
}

.sp-units { border: var(--border-control) solid var(--border-strong); border-radius: var(--radius-control); overflow: hidden; }
.sp-unit { flex: 1; border: none; border-radius: 0; background: var(--bg-raised); color: var(--text-primary); }
.sp-unit + .sp-unit { border-left: var(--border-control) solid var(--border-strong); }

.sp-card,
.sp-option,
.sp-decl,
.sp-pick,
.sp-sum,
.sp-banner {
  border: var(--border-control) solid var(--border-default);
  border-radius: var(--radius-control);
  background: var(--bg-raised);
  padding: 10px 14px;
}

.sp-banner { display: flex; gap: 10px; align-items: flex-start; }
.sp-option { display: flex; flex-direction: column; width: 100%; text-align: left; min-height: 64px; color: var(--text-primary); }
.sp-option.sp-disabled {
  background: var(--fill-disabled);
  border-style: dashed;
  color: var(--text-primary);
}
.sp-vrow, .sp-decl, .sp-pick { display: flex; align-items: center; gap: 10px; min-height: 72px; }
.sp-vtext, .sp-pick span { flex: 1; min-width: 0; }
.sp-segments { display: flex; gap: 8px; margin: 8px 0; }
.sp-segments i { flex: 1; height: 20px; border: 2px dashed var(--border-default); border-radius: 4px; }
.sp-segments i.on { background: var(--fill-inverse); border-style: solid; border-color: var(--border-strong); }
.sp-stepper { display: flex; align-items: center; gap: 8px; }
.sp-stepper .field-chip { min-width: 56px; min-height: 56px; }
.sp-bar { display: flex; gap: 8px; }
.sp-bar .primary, .sp-bar .field-chip { flex: 1; margin-top: 0; }
.sp-sum > div { display: flex; flex-direction: column; gap: 2px; padding: 8px 0; }
.sp-sum > div + div { border-top: 1px solid var(--border-hairline); }
.sp-sum b { color: var(--text-primary); font-size: 18px; }
.sp-pick { width: 100%; text-align: left; color: var(--text-primary); }
.sp-pick.on { border-width: 3px; border-color: var(--border-strong); background: var(--bg-surface); }
.sp-radio { width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--border-strong); flex: 0 0 auto; }
.sp-pick.on .sp-radio { border-width: 8px; }
.sp-edit { min-height: 48px; width: 88px; }
.sp-edit:disabled { color: var(--text-disabled); }

.sp-stage {
  position: relative;
  min-height: 220px;
  margin-top: var(--space-xs);
  background: var(--bg-canvas);
  border: var(--border-control) solid var(--border-strong);
  border-radius: var(--radius-control);
  touch-action: none;
}

.sp-stage img {
  display: block;
  width: 100%;
  height: 220px;
  object-fit: contain;
  background: var(--bg-canvas);
}

.sp-overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.sp-ref-line {
  stroke: var(--text-primary);
  stroke-width: 1.6;
}

.sp-struct-line {
  stroke: var(--status-danger-fg);
  stroke-width: 1.6;
}

.sp-handle {
  position: absolute;
  z-index: 1;
  width: var(--target-chip);
  height: var(--target-chip);
  min-width: var(--target-chip);
  min-height: var(--target-chip);
  padding: 0;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  touch-action: none;
}

.sp-handle-selected {
  outline: 3px solid var(--text-on-inverse);
  outline-offset: 2px;
}

.sp-loupe {
  position: absolute;
  z-index: 2;
  width: 88px;
  height: 88px;
  margin: -96px 0 0 -44px;
  overflow: hidden;
  border: 3px solid var(--border-strong);
  border-radius: 50%;
  background: var(--bg-canvas);
  pointer-events: none;
}

.sp-loupe-view {
  display: block;
  width: 88px;
  height: 88px;
  border-radius: 50%;
}

.sp-draft-list {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.sp-draft-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: var(--target-chip);
}

.sp-loupe[hidden] {
  display: none;
}

.sp-handle-ref {
  background: var(--fill-inverse);
  color: var(--text-on-inverse);
  border: 3px solid var(--text-on-inverse);
}

.sp-handle-struct {
  background: var(--status-danger-fg);
  color: var(--status-danger-bg);
  border: 3px solid var(--status-danger-bg);
}

.sp-key {
  display: inline-flex;
  align-items: center;
  min-height: var(--target-min);
  padding: 0 10px;
  border-radius: var(--radius-chip);
  font-weight: 700;
}

.sp-key-ref {
  background: var(--fill-inverse);
  color: var(--text-on-inverse);
}

.sp-key-struct {
  background: var(--status-danger-fg);
  color: var(--status-danger-bg);
}

.sp-file,
.sp-file-label {
  display: flex;
  align-items: center;
  min-height: var(--target-min);
  margin-top: var(--space-xs);
  color: var(--text-primary);
  font-weight: 700;
}

/* PA-366 map. Length 236px is the field map height in DESIGN-SPEC. Phone tokens have no map height. */
.plan-map-frame {
  width: 100%;
  height: 236px;
  margin-top: var(--space-sm);
  background: var(--bg-canvas);
  touch-action: none;
}

.plan-map-svg {
  display: block;
  width: 100%;
  height: 100%;
}

.plan-map-controls,
.plan-map-layers {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
}

.plan-map-action {
  min-width: var(--target-primary);
  min-height: var(--target-primary);
}

.plan-map-toggle {
  min-height: var(--target-chip);
}

.plan-map-hit {
  fill: transparent;
}

.plan-map-claim,
.plan-map-footprint,
.plan-map-route,
.plan-map-trench,
.plan-map-track {
  fill: none;
}

.plan-map-claim {
  stroke: var(--border-strong);
  stroke-width: var(--border-control);
}

.plan-map-footprint {
  stroke: var(--border-default);
  stroke-width: var(--border-control);
  stroke-dasharray: 6 4;
}

.plan-map-route {
  stroke: var(--olive);
  stroke-width: var(--border-control);
  stroke-dasharray: 8 5;
}

.plan-map-trench {
  stroke: var(--text-secondary);
  stroke-width: var(--border-control);
}

.plan-map-track {
  stroke: var(--text-accent);
  stroke-width: var(--border-control);
}

.plan-map-accuracy {
  fill: var(--status-info-bg);
  stroke: var(--status-info-fg);
  stroke-width: var(--border-control);
  stroke-dasharray: 4 3;
  fill-opacity: 0.14;
}

.plan-map-wedge {
  fill: var(--status-info-fg);
  stroke: none;
  fill-opacity: 0.35;
}

.plan-map-position {
  fill: var(--status-info-fg);
  stroke: var(--bg-raised);
  stroke-width: var(--border-control);
}