* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: 15px;
  -webkit-font-smoothing: antialiased;
}

/* the aged-paper ground: two very soft off-tint washes, no texture image so it
   still works offline over file:// */
body {
  background-image:
    radial-gradient(circle at 12% 8%, rgba(170, 139, 106, 0.10), transparent 42%),
    radial-gradient(circle at 88% 72%, rgba(111, 123, 103, 0.10), transparent 46%);
  background-attachment: fixed;
}

.rig {
  max-width: 1440px;
  margin: 0 auto;
  padding: 22px 22px 64px;
}

/* Section labels, straight from the CV: lowercase mono, casual, slanted, and
   set with a trailing comma. The comma lives in the markup, not in CSS
   `content`, so it is real text. */
.panel-label {
  font-family: var(--label);
  font-variation-settings: "MONO" 1, "CASL" 1, "slnt" -12;
  font-weight: 600;
  font-size: 0.82rem;
  letter-spacing: 0.01em;
  color: var(--sage);
  white-space: nowrap;
}

/* ---------- top rail ---------- */
.rail {
  display: flex;
  align-items: stretch;
  gap: 16px;
  background: var(--paper-hi);
  border-radius: var(--r-lg);
  padding: 12px 16px;
  box-shadow: 0 2px 10px rgba(39, 45, 37, 0.05);
}

.badge {
  flex: none;
  display: flex;
  align-items: center;
  padding: 8px 18px 8px 6px;
  border-right: 1px solid rgba(111, 123, 103, 0.16);
}
.badge img { width: 124px; height: auto; display: block; }

.rail-controls {
  flex: 1;
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(390px, 1fr) auto;
  gap: 10px;
}
.rail-group {
  min-width: 0;
  min-height: 62px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 7px;
  padding: 9px 13px;
  border: 1px solid rgba(111, 123, 103, 0.08);
  border-radius: var(--r-md);
  background: rgba(234, 226, 209, 0.55);
}
.settings-options {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

/* Source choices stay visibly radios, like the original pLannotate flow. The
   custom mark uses the page palette without disguising the control's meaning. */
.source-options {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
}
.source-option,
.example-option {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--ink-soft);
  font-size: 0.88rem;
  cursor: pointer;
  transition: color 0.18s;
}
.source-option:hover,
.example-option:hover { color: var(--ink); }
.source-option {
  padding: 6px 9px;
  border-radius: var(--r-pill);
  transition: color 0.18s, background 0.18s, box-shadow 0.18s;
}
.source-option:has(input:checked) {
  background: var(--paper-hi);
  box-shadow: 0 1px 5px rgba(39, 45, 37, 0.06);
}
.source-option input {
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  margin: 0;
  border: 1.5px solid rgba(111, 123, 103, 0.7);
  border-radius: 50%;
  background: var(--paper-hi);
  display: grid;
  place-content: center;
  cursor: pointer;
}
.source-option input::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--sage);
  transform: scale(0);
  transition: transform 0.14s ease-out;
}
.source-option input:checked {
  border-color: var(--sage);
}
.source-option input:checked::before { transform: scale(1); }
.source-option input:checked + span {
  color: var(--ink);
  font-weight: 700;
}
.source-option input:focus-visible {
  outline: 2px solid var(--bronze);
  outline-offset: 2px;
}

.switch {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  cursor: pointer;
  font-size: 0.88rem;
  color: var(--ink-soft);
}
.switch input { accent-color: var(--sage); margin: 0; }
.switch:hover { color: var(--ink); }
.settings-options .switch {
  padding: 6px 9px;
  border-radius: var(--r-pill);
  background: rgba(248, 244, 235, 0.64);
  transition: color 0.18s, background 0.18s, box-shadow 0.18s, opacity 0.18s;
}
.settings-options .switch:has(input:checked) {
  color: var(--ink);
  background: var(--paper-hi);
  box-shadow: 0 1px 5px rgba(39, 45, 37, 0.05);
}
/* [hidden] alone loses to inline-flex */
.switch[hidden] { display: none; }
/* a switch the current state has taken out of play — greyed rather than
   removed, so it keeps its place and explains itself on hover */
.switch.off { opacity: 0.42; cursor: not-allowed; }
.switch.off:hover { color: var(--ink-soft); }

.btn {
  font-family: var(--label);
  font-variation-settings: "MONO" 1, "CASL" 1, "slnt" -12;
  font-weight: 700;
  font-size: 0.9rem;
  padding: 10px 24px;
  border: none;
  border-radius: var(--r-pill);
  background: var(--sage);
  color: var(--paper-hi);
  cursor: pointer;
  transition: background 0.18s, transform 0.18s;
}
.btn:hover:not(:disabled) { background: #63705c; transform: translateY(-1px); }
.btn:disabled { background: #b9bdb2; cursor: progress; }
.btn:focus-visible { outline: 2px solid var(--bronze); outline-offset: 3px; }

/* ---------- input bay ---------- */
.bay {
  margin-top: 12px;
  background: var(--paper-hi);
  border-radius: var(--r-lg);
  padding: 16px 22px;
  box-shadow: 0 2px 10px rgba(39, 45, 37, 0.05);
}
/* Manual inputs read better as focused work surfaces than as full-bleed bars.
   The example picker still uses the full chassis because its radio-card grid
   benefits from the extra columns. */
.bay:has(> .ann-body[data-mode="upload"]:not([hidden])) {
  width: 100%;
  max-width: 820px;
  margin: 12px auto 0;
  padding: 20px;
}
.bay:has(> .enter-body:not([hidden])) {
  width: 100%;
  max-width: 920px;
  margin: 12px auto 0;
  padding: 20px;
}
.ann-body[hidden] { display: none; }
.ann-body { display: flex; align-items: center; gap: 14px; }

.enter-body {
  flex-direction: column;
  align-items: stretch;
}
.enter-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}
.enter-actions .shortcut-hint { margin-left: auto; }
.shortcut-hint {
  font-family: var(--mono);
  font-variation-settings: "MONO" 1, "CASL" 0.4;
  font-size: 0.76rem;
  color: var(--ink-soft);
}

.example-body { align-items: flex-start; }
.example-body > .panel-label { padding-top: 11px; }
.example-options {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 8px;
}
.example-option {
  position: relative;
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid rgba(111, 123, 103, 0.13);
  border-radius: var(--r-md);
  background: var(--paper-mid);
  box-shadow: 0 1px 3px rgba(39, 45, 37, 0.025);
  transition: color 0.18s, background 0.18s, border-color 0.18s,
    box-shadow 0.18s, transform 0.18s;
}
.example-option:hover {
  background: var(--paper);
  border-color: rgba(111, 123, 103, 0.48);
  box-shadow: 0 4px 10px rgba(39, 45, 37, 0.055);
  transform: translateY(-1px);
}
.example-option:has(input:checked) {
  background: rgba(111, 123, 103, 0.15);
  border-color: var(--sage);
  box-shadow: inset 0 0 0 1px rgba(111, 123, 103, 0.12),
    0 2px 7px rgba(39, 45, 37, 0.045);
}
.example-option:focus-within {
  outline: 2px solid var(--bronze);
  outline-offset: 2px;
}
/* The label itself is the selection control. Preserve the real radio for
   keyboard and screen-reader behavior without drawing its circular glyph. */
.example-option input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  border: 0;
  white-space: nowrap;
}
.example-option input:focus-visible { outline: none; }
.example-option:active { transform: translateY(0); }
.example-option:has(input:checked) span {
  color: var(--ink);
  font-weight: 700;
}
.example-option span {
  min-width: 0;
  line-height: 1.3;
}

.dropzone {
  flex: 1;
  min-height: 190px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 28px 24px;
  text-align: center;
  background:
    radial-gradient(circle at 50% 20%, rgba(255, 255, 255, 0.5), transparent 48%),
    var(--paper-mid);
  border: 2px dashed rgba(111, 123, 103, 0.45);
  border-radius: var(--r-lg);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35);
  cursor: pointer;
  transition: border-color 0.18s, background 0.18s, box-shadow 0.18s, transform 0.18s;
}
.dz-icon {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(111, 123, 103, 0.12);
  color: var(--sage);
  transition: background 0.18s, color 0.18s, transform 0.18s;
}
.dz-icon svg {
  width: 25px;
  height: 25px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.dz-copy {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 7px;
  flex-wrap: wrap;
}
.dropzone .dz-main {
  color: var(--ink);
  font-size: 1.05rem;
  font-weight: 700;
}
.dropzone .dz-browse {
  color: var(--sage);
  font-weight: 700;
}
.dropzone .dz-hint {
  color: var(--ink-soft);
  font-size: 0.8rem;
}
.dropzone:hover,
.dropzone:focus-visible {
  border-color: var(--sage);
  background:
    radial-gradient(circle at 50% 20%, rgba(255, 255, 255, 0.7), transparent 52%),
    var(--paper);
  box-shadow: inset 0 0 0 1px rgba(111, 123, 103, 0.12), 0 7px 20px rgba(39, 45, 37, 0.06);
  outline: none;
}
.dropzone:hover .dz-icon,
.dropzone:focus-visible .dz-icon {
  background: var(--sage);
  color: var(--paper-hi);
  transform: translateY(-2px);
}
.dropzone.dragover {
  border-color: var(--bronze);
  border-style: solid;
  background: rgba(170, 139, 106, 0.14);
  box-shadow: inset 0 0 0 2px rgba(170, 139, 106, 0.13);
  transform: scale(1.003);
}
.dropzone.dragover .dz-icon {
  background: var(--bronze);
  color: var(--paper-hi);
  transform: translateY(-3px);
}

#annSeq {
  flex: 1;
  min-height: 132px;
  font: 0.86rem/1.6 var(--mono);
  font-variation-settings: "MONO" 1, "CASL" 0.4;
  padding: 12px 16px;
  border: none;
  border-radius: var(--r-md);
  background: var(--paper-mid);
  color: var(--ink);
  resize: vertical;
}
#annSeq::placeholder { color: #9aa093; }
#annSeq:focus { outline: 2px solid var(--sage); outline-offset: -2px; }
.hint {
  font-family: var(--mono);
  font-variation-settings: "MONO" 1, "CASL" 0.4;
  font-size: 0.78rem;
  color: var(--ink-soft);
  flex: none;
}

select {
  font: inherit;
  font-size: 0.9rem;
  padding: 9px 16px;
  border: none;
  border-radius: var(--r-pill);
  background: var(--paper-mid);
  color: var(--ink);
  cursor: pointer;
}
select:focus-visible { outline: 2px solid var(--sage); outline-offset: 1px; }

.ann-status {
  margin-top: 12px;
  font-size: 0.88rem;
  color: var(--ink-soft);
  background: var(--paper-mid);
  border-radius: var(--r-md);
  padding: 10px 16px;
}
.ann-status[hidden] { display: none; }
.ann-status.ok { color: #46543f; background: rgba(111, 123, 103, 0.16); }
.ann-status.bad { color: var(--danger); background: rgba(164, 83, 63, 0.11); }

.error {
  margin-top: 12px;
  font-size: 0.88rem;
  color: var(--danger);
  background: rgba(164, 83, 63, 0.11);
  border-radius: var(--r-md);
  padding: 10px 16px;
}

#turnstileWidget:not(:empty) { margin-top: 12px; }

/* ---------- progress ---------- */
.ann-progress[hidden] { display: none; }
.ann-progress { margin-top: 12px; }
.ann-bar {
  height: 8px;
  border-radius: var(--r-pill);
  background: var(--paper);
  overflow: hidden;
}
.ann-bar-fill {
  height: 100%;
  width: 0%;
  border-radius: var(--r-pill);
  background: var(--sage);
  /* eased so the jump to a newly-reported stage reads as motion, not a snap */
  transition: width 0.45s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.ann-stage {
  font-family: var(--mono);
  font-variation-settings: "MONO" 1, "CASL" 0.4;
  font-size: 0.8rem;
  color: var(--ink-soft);
  padding-top: 8px;
}

/* ---------- results ---------- */
.results { display: none; }
.results.visible { display: block; }

/* ---------- the sequence-index ruler (signature) ---------- */
.ruler-wrap {
  margin-top: 12px;
  background: var(--paper-hi);
  border-radius: var(--r-lg);
  padding: 16px 22px 18px;
  box-shadow: 0 2px 10px rgba(39, 45, 37, 0.05);
}
.ruler-label { margin-bottom: 8px; }

/* ---------- stage: plate + readout ---------- */
.stage {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 272px;
  gap: 12px;
  /* Room for the tabs, which straddle the plate's top edge and so need the gap
     above it to be theirs -- at the ruler strip's own 12px they landed on it. */
  margin-top: 34px;
  align-items: start;
}

.plot-wrap {
  position: relative;
  background: var(--paper-hi);
  border-radius: var(--r-lg);
  padding: 22px 24px 16px;
  min-width: 0;
  box-shadow: 0 2px 14px rgba(39, 45, 37, 0.06);
  animation: plate-up 0.5s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}
.plot-wrap:not(.linear-mode) {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
/* the circular map grows with the page but stops short of a wall-sized circle */
.plot-wrap:not(.linear-mode) #plot {
  width: 100%;
  max-width: 920px;
  margin: 0 auto;
}
/* Centred, with no min-height: forcing a fixed height only splits the linear
   plate's empty space above and below the tracks instead of removing it. */
.plot-wrap.linear-mode {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 14px;
}
.plot-wrap.linear-mode #plotArea,
.plot-wrap.linear-mode #focus { width: 100%; }
.plot-wrap.linear-mode #focus { margin-top: 0; }

/* The schematic sizes itself: its viewBox is as wide as the plasmid needs
   slots, so it takes the plate's width and whatever height that implies.
   It also starts below the plate's own controls rather than under them: the
   other two views put tall, centred maps on the plate, so the download box and
   the Fragments switch sit over empty corners, but the schematic is short, wide,
   and carries a band of labels along its top edge — which landed straight
   behind the switches. */
.plot-wrap.stylized-mode #plot { max-width: none; width: 100%; margin-top: 44px; }

@keyframes plate-up {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}

#plotArea { position: relative; }

/* ---------- plate tabs: which drawing is on the plate ----------
   They sit *on* the plate's top edge rather than above it, which is the whole
   point: a tab that clears the edge is a control pointing at the plate, and a
   tab that straddles it is part of the plate. Same rule as everything else in
   this skin — things merge rather than butt up against a rule.

   The strip is taken out of flow (`.plot-wrap` is the positioned ancestor) so
   it cannot push the drawing down, and `align-items: flex-end` lands every
   tab's baseline on the edge whatever its height. */
.plate-tabs {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -100%);
  display: flex;
  align-items: flex-end;
  gap: 16px;
  z-index: 6;
}

.plate-tab {
  position: relative;
  font-family: var(--label);
  font-variation-settings: "MONO" 1, "CASL" 1, "slnt" -12;
  font-weight: 600;
  font-size: 0.84rem;
  line-height: 1;
  /* Both tabs keep the same horizontal padding so selecting one does not
     re-flow the strip sideways under the pointer; only the height changes. */
  padding: 7px 22px 8px;
  border: none;
  border-radius: var(--r-pill) var(--r-pill) 0 0;
  background: var(--paper-mid);
  color: var(--ink-soft);
  cursor: pointer;
  transition: background 0.18s, color 0.18s;
}
.plate-tab:hover { background: #efe6d0; color: var(--ink); }
.plate-tab:focus-visible { outline: 2px solid var(--bronze); outline-offset: 2px; }

/* The selected tab is the one piece of ink on the plate, and it *dips below the
   edge* — the negative margin is what makes it read as fastened to the plate
   rather than resting on it. Rounded all round, since both ends are visible. */
.plate-tab[aria-selected="true"] {
  background: var(--ink);
  color: var(--paper-hi);
  font-weight: 700;
  border-radius: var(--r-pill);
  padding: 11px 22px 12px;
  margin-bottom: -14px;
  cursor: default;
}
.plate-tab[aria-selected="true"]:hover { background: var(--ink); color: var(--paper-hi); }

/* The plate's surface flaring up into the selected tab's sides, the way the
   rounded corner of a folder tab meets the folder. Drawn as two quarter-circle
   fillets in the plate colour: the gradient is transparent inside the radius,
   so what survives is the corner *outside* it — a concave curve. They sit at
   the plate's own edge, which is `margin-bottom` above this tab's bottom, and
   only ever appear on the selected tab: an unselected one does not touch the
   plate, so it has nothing to flare into. */
.plate-tab[aria-selected="true"]::before,
.plate-tab[aria-selected="true"]::after {
  content: "";
  position: absolute;
  bottom: 14px;
  width: 11px;
  height: 11px;
  pointer-events: none;
}
.plate-tab[aria-selected="true"]::before {
  left: -11px;
  background: radial-gradient(circle at 0 0, transparent 11px, var(--paper-hi) 11.5px);
}
.plate-tab[aria-selected="true"]::after {
  right: -11px;
  background: radial-gradient(circle at 100% 0, transparent 11px, var(--paper-hi) 11.5px);
}

/* The view options that belong to the map rather than to the annotation: the
   opposite corner from the download box, quiet enough that the map stays the
   thing you look at. */
.plate-opts {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 14px;
}
.plate-opts .switch { gap: 6px; font-size: 0.8rem; }
.plate-opts input { width: 13px; height: 13px; }

/* ---------- the eye: a switch drawn as what it does ----------
   The checkbox itself stays in the markup and stays focusable — it is the state
   and `app.js` reads it unchanged — but it is taken out of sight so the eye can
   be the control. Same trick the segmented source picker uses. */
.eye-switch input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
/* Deliberately much larger than the rail's switches: it is the only control on
   the plate that changes what the drawing contains, it has no checkbox left to
   read, and an eye small enough to be a checkbox glyph reads as decoration. */
.plate-opts .eye-switch { gap: 10px; font-size: 1.45rem; }
.eye-ic {
  display: block;
  width: 36px;
  height: 36px;
  overflow: visible;
  fill: none;
  stroke: currentColor;
  /* 1.6 on a 24 viewBox is the reference drawing's own 30-on-512, which is what
     keeps it reading as a line rather than a shape at this size. */
  stroke-width: 1.6;
  stroke-linecap: round;
}
/* Open is the resting state, so the shut lid is the one that is normally away.
   Both are always in the DOM: swapping `display` would relayout the svg, and
   the two states have to sit on exactly the same centre line. */
.eye-shut { opacity: 0; }
.eye-switch input:not(:checked) ~ .eye-ic .eye-open { opacity: 0; }
.eye-switch input:not(:checked) ~ .eye-ic .eye-shut { opacity: 1; }
.eye-ic path, .eye-ic circle { transition: opacity 0.16s; }
/* Shut, the whole control steps back — the label is describing something that
   is not on the plate, and saying so quietly is the point. */
.eye-switch input:not(:checked) ~ span { opacity: 0.55; }
.eye-switch input:focus-visible ~ .eye-ic {
  outline: 2px solid var(--bronze);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}

/* ---------- download: a quiet box in the plate's top-left corner ---------- */
.export { position: absolute; top: 0; left: 0; z-index: 5; }
.export-btn {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 1px solid rgba(111, 123, 103, 0.32);
  border-radius: var(--r-sm);
  background: var(--paper-hi);
  color: var(--sage);
  cursor: pointer;
  transition: color 0.12s, background 0.12s, border-color 0.12s;
}
.export-btn:hover,
.export-btn[aria-expanded="true"] {
  color: var(--paper-hi);
  background: var(--sage);
  border-color: var(--sage);
}
.export-ic { display: block; width: 15px; height: 15px; }

.export-menu {
  position: absolute;
  top: 36px;
  left: 0;
  display: grid;
  gap: 2px;
  min-width: 158px;
  padding: 5px;
  background: var(--paper-hi);
  border: 1px solid rgba(111, 123, 103, 0.26);
  border-radius: var(--r-sm);
  box-shadow: 0 8px 22px rgba(39, 45, 37, 0.16);
}
.export-menu[hidden] { display: none; }
.export-menu button {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding: 7px 9px;
  border: 0;
  border-radius: 9px;
  background: none;
  color: var(--ink);
  font-family: inherit;
  font-size: 0.86rem;
  text-align: left;
  cursor: pointer;
}
.export-menu button:hover,
.export-menu button:focus-visible { background: var(--paper-mid); }
.export-menu button span {
  font-family: var(--mono);
  font-variation-settings: "MONO" 1, "CASL" 0.4;
  font-size: 0.7rem;
  color: var(--ink-soft);
}

/* ---------- readout: the CV's sage sidebar ---------- */
.readout {
  background: var(--sage);
  border-radius: var(--r-lg);
  padding: 22px 22px 24px;
  min-width: 0;
  color: var(--paper-hi);
  box-shadow: 0 2px 14px rgba(39, 45, 37, 0.08);
}
.readout .panel-label { color: rgba(248, 244, 235, 0.72); }

.ro-summary-label { margin-bottom: 4px; }
.ro-name {
  font-family: var(--label);
  font-variation-settings: "MONO" 1, "CASL" 1, "slnt" -12;
  font-weight: 800;
  font-size: 1.3rem;
  color: var(--paper-hi);
  line-height: 1.25;
  word-break: break-word;
}
.ro-stats { margin: 14px 0 22px; }
.ro-stat {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  padding: 7px 0;
  border-bottom: 1px solid rgba(248, 244, 235, 0.18);
}
.ro-stat dt { font-size: 0.82rem; color: rgba(248, 244, 235, 0.75); }
.ro-stat dd {
  margin: 0;
  font-family: var(--mono);
  font-variation-settings: "MONO" 1, "CASL" 0.4;
  font-size: 0.86rem;
  color: var(--paper-hi);
}

/* the selection bubble — a soft light pod inside the sage panel */
.ro-sel,
.ro-idle {
  background: var(--sage-hi);
  border-radius: var(--r-md);
  padding: 14px 16px 16px;
  margin: 0 0 20px;
}
.ro-sel[hidden], .ro-idle[hidden] { display: none; }

.ro-sel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.ro-sel-clear {
  border: none;
  background: rgba(248, 244, 235, 0.16);
  color: var(--paper-hi);
  font: 400 1rem/1 var(--body);
  width: 22px;
  height: 22px;
  border-radius: var(--r-pill);
  padding: 0;
  cursor: pointer;
  transition: background 0.16s;
}
.ro-sel-clear:hover { background: rgba(248, 244, 235, 0.32); }
.ro-sel-clear:focus-visible { outline: 2px solid var(--paper-hi); outline-offset: 2px; }

.ro-sel-title {
  display: flex;
  align-items: baseline;
  gap: 9px;
  margin-top: 9px;
}
.ro-sel-swatch {
  width: 11px;
  height: 11px;
  flex: none;
  border-radius: var(--r-pill);
  box-shadow: 0 0 0 1.5px rgba(248, 244, 235, 0.5);
}
.ro-sel-name {
  font-family: var(--label);
  font-variation-settings: "MONO" 1, "CASL" 1, "slnt" -12;
  font-size: 1rem;
  font-weight: 700;
  color: var(--paper-hi);
  word-break: break-word;
  line-height: 1.3;
}
.ro-sel-type {
  margin-top: 3px;
  padding-left: 20px;
  font-size: 0.8rem;
  color: rgba(248, 244, 235, 0.75);
}

.ro-sel-stats { margin: 12px 0 0; }
.ro-sel-stats .ro-stat {
  padding: 5px 0;
  border-bottom-color: rgba(248, 244, 235, 0.16);
}
.ro-sel-stats .ro-stat:last-child { border-bottom: none; }
.ro-sel-stats dt { font-size: 0.78rem; }
.ro-sel-stats dd { font-size: 0.82rem; }
.ro-sel-stats .ro-stat[hidden] { display: none; }
/* :last-child still matches a display:none row, so a hidden identity/match pair
   would leave a hairline dangling under the last visible one */
.ro-sel-stats .ro-stat:has(~ .ro-stat:not([hidden])) { border-bottom: 1px solid rgba(248, 244, 235, 0.16); }
.ro-sel-stats .ro-stat:not(:has(~ .ro-stat:not([hidden]))) { border-bottom: none; }

.ro-sel-blurb {
  margin: 10px 0 0;
  font-size: 0.82rem;
  line-height: 1.55;
  color: rgba(248, 244, 235, 0.8);
}
.ro-sel-blurb:empty { display: none; }

.ro-idle p {
  margin: 8px 0 0;
  font-size: 0.82rem;
  line-height: 1.55;
  color: rgba(248, 244, 235, 0.8);
}

/* Deliberately NOT bottom-anchored (`margin-top: auto`): pushing this to the
   foot of the column opens a dead gap under the selection panel. */
.ro-legend-label { margin-bottom: 8px; }

.help {
  margin: 20px 0 0;
  padding-top: 16px;
  border-top: 1px solid rgba(248, 244, 235, 0.18);
  font-size: 0.8rem;
  line-height: 1.6;
  color: rgba(248, 244, 235, 0.72);
}

/* ---------- footer ---------- */
.foot {
  text-align: center;
  color: var(--ink-soft);
  font-size: 0.8rem;
  padding: 26px 22px 0;
}
.foot a { color: var(--sage); }

/* ---------- responsive ---------- */
@media (max-width: 1050px) {
  .rail-controls { grid-template-columns: minmax(0, 1fr); }
  .rail-group { min-height: 0; }
}

@media (max-width: 900px) {
  .stage { grid-template-columns: minmax(0, 1fr); }
  /* The eye is sized for a plate the map does not fill. Once the plate narrows
     the circle reaches its own top-right corner, and a control that size lands
     on the map — so it comes back down to something nearer the rail's. */
  .plate-opts .eye-switch { gap: 8px; font-size: 1.05rem; }
  .eye-ic { width: 26px; height: 26px; }
  .plot-wrap.stylized-mode #plot { margin-top: 38px; }
  .readout {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 0 26px;
    align-items: start;
  }
  .ro-name { grid-column: 1 / -1; }
  .ro-stats { margin-bottom: 18px; }
  .ro-sel, .ro-idle { margin-bottom: 18px; }
  .help { grid-column: 1 / -1; margin-top: 4px; }
}

@media (max-width: 620px) {
  .rig { padding: 12px 12px 48px; }
  .rail {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    padding: 14px 16px;
  }
  .badge {
    align-self: stretch;
    padding: 0 0 12px;
    border-right: 0;
    border-bottom: 1px solid rgba(111, 123, 103, 0.16);
  }
  .rail-controls { gap: 8px; }
  .rail-group { padding: 10px 12px; }
  .bay, .ruler-wrap { padding-left: 16px; padding-right: 16px; }
  .plot-wrap { padding: 14px 14px 10px; }
  .readout { padding: 18px 16px; }
  .ann-body { flex-wrap: wrap; }
  .dropzone { flex-basis: 100%; }
  .source-options { flex-basis: 100%; }
  .source-option { font-size: 0.82rem; }
  .enter-actions { flex-wrap: wrap; }
  .enter-actions .shortcut-hint { margin-left: auto; }
  .enter-actions .btn { margin-left: auto; }
  .example-body > .panel-label { padding-top: 0; }
  .example-options { flex-basis: 100%; grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}