@import "./vendor/instagram-design-system/styles.css";

:root {
  color-scheme: light;
  /* Keep the product UI in the Instagram light token set regardless of OS theme. */
  --ig-primary-background: 255, 255, 255;
  --ig-secondary-background: 243, 245, 247;
  --ig-elevated-background: 255, 255, 255;
  --ig-secondary-elevated-background: 243, 245, 247;
  --ig-primary-text: 0, 0, 0;
  --ig-secondary-text: 115, 115, 115;
  --ig-tertiary-text: 115, 115, 115;
  --ig-primary-icon: 38, 38, 38;
  --ig-secondary-icon: 142, 142, 142;
  --ig-highlight-background: 239, 239, 239;
  --ig-separator: 219, 219, 219;
  --post-separator: 239, 239, 239;
  --ig-stroke: 219, 219, 219;
  --ig-focus-stroke: 168, 168, 168;
  --ig-hover-overlay-rgb: 0, 0, 0;
  --ig-hover-overlay-alpha: .05;
  --ig-secondary-button: 250, 250, 250;
  --ig-secondary-button-hover: 219, 219, 219;
  --ig-tertiary-button-background: 255, 255, 255;
  --ig-tertiary-button-border: 219, 219, 219;
  --ig-tertiary-button-hover: 245, 245, 245;
  --ig-tertiary-button-text: 38, 38, 38;
  --ig-incoming-message-bubble: 243, 245, 247;
  --bg: rgb(var(--ig-secondary-background));
  --surface: rgb(var(--ig-primary-background));
  --surface-raised: rgb(var(--ig-elevated-background));
  --surface-muted: rgb(var(--ig-highlight-background));
  --border: rgb(var(--ig-separator));
  --text: rgb(var(--ig-primary-text));
  --muted: rgb(var(--ig-secondary-text));
  --accent: rgb(var(--ig-primary-button));
  --accent-hover: rgb(var(--ig-primary-button-hover));
  --ok: rgb(var(--ig-success));
  --err: rgb(var(--ig-error-or-destructive));
  --warning: var(--ig-gradient-stop-orange);
  /* Optical adjustments stay derived from the same 4px spacing scale. */
  --space-optical-nudge: calc(var(--ig-space-1) / 2);
  --space-inline-code-x: calc(var(--ig-space-3) / 2);
  --control-chevron-space: calc(var(--ig-space-4) + var(--space-optical-nudge));
  --selection-check-size: calc(var(--ig-space-3) + var(--space-optical-nudge));
}

* { box-sizing: border-box; }

html {
  min-height: 100%;
  overflow-x: clip;
  background: var(--bg);
}

body {
  min-height: 100%;
  margin: 0;
  font-family: var(--font-family-product);
  font-size: var(--system-16-font-size);
  line-height: var(--system-16-line-height);
  letter-spacing: 0;
  background: var(--bg);
  color: var(--text);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

a {
  color: var(--accent);
  text-decoration: none;
}

a:hover { text-decoration: underline; }

.app {
  width: min(100%, 980px);
  margin: 0 auto;
  padding: var(--ig-space-6) var(--ig-space-6) var(--ig-space-16);
}

header {
  position: relative;
  overflow: hidden;
  margin-bottom: var(--ig-space-8);
  padding: var(--ig-space-10);
  border-radius: var(--ig-radius-xl);
  background: var(--ig-gradient-hero);
  color: rgb(var(--web-always-white));
}

header::after {
  position: absolute;
  inset: auto 0 0;
  height: 42%;
  content: "";
  background: linear-gradient(to top, rgba(0, 0, 0, .26), transparent);
  pointer-events: none;
}

header > * {
  position: relative;
  z-index: 1;
}

/* The compact header row keeps secondary navigation out of the tool body. */
.header-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--ig-space-2);
  margin-bottom: var(--ig-space-8);
}

.header-link {
  display: inline-flex;
  min-height: 32px;
  align-items: center;
  justify-content: center;
  padding: 0 var(--ig-space-4);
  border: 1px solid rgba(255, 255, 255, .32);
  border-radius: var(--ig-radius-pill);
  background: none;
  color: rgb(var(--web-always-white));
  cursor: pointer;
  font-family: inherit;
  font-size: var(--system-12-font-size);
  font-weight: var(--font-weight-system-semibold);
  line-height: var(--system-12-line-height);
  letter-spacing: 0;
  text-decoration: none;
  white-space: nowrap;
}

.header-link:hover {
  background: rgba(255, 255, 255, .12);
  text-decoration: none;
}

header h1 {
  max-width: 720px;
  margin: 0 0 var(--ig-space-4);
  font-family: var(--font-family-brand-headline);
  font-size: 56px;
  font-weight: var(--font-weight-system-bold);
  line-height: 1;
  letter-spacing: 0;
}

.subtitle {
  max-width: 760px;
  margin: 0;
  color: rgba(255, 255, 255, .88);
  font-size: var(--system-16-font-size);
  line-height: var(--system-16-line-height);
}

.subtitle a {
  color: rgb(var(--web-always-white));
  font-weight: var(--font-weight-system-semibold);
  text-decoration: underline;
  text-decoration-color: rgba(255, 255, 255, .5);
}

.subtitle em { font-style: normal; font-weight: var(--font-weight-system-semibold); }

/* One source of truth for the user's file. It sits before the tool tabs so a
   file chosen here follows the user through Merge, Convert, Edit Marks,
   Marker Sets, and Extract Own without being picked again. */
.workspace-source {
  margin-bottom: var(--ig-space-8);
  padding: var(--ig-space-6);
  border: 1px solid var(--border);
  border-radius: var(--ig-radius-lg);
  background: var(--surface-raised);
  box-shadow: var(--ig-shadow-card);
}

.workspace-source-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--ig-space-5);
  margin-bottom: var(--ig-space-4);
}

.workspace-source-head h2 {
  margin: var(--space-optical-nudge) 0 var(--ig-space-1);
  font-family: var(--font-family-brand);
  font-size: var(--system-20-font-size, 20px);
  line-height: 1.2;
}

.workspace-source-head p {
  margin: 0;
  color: var(--muted);
  font-size: var(--system-14-font-size);
  line-height: var(--system-14-line-height);
}

.workspace-source-head .secondary-btn {
  flex: 0 0 auto;
  margin: 0;
}

.workspace-eyebrow {
  display: block;
  color: var(--accent);
  font-size: var(--system-12-font-size);
  font-weight: var(--font-weight-system-semibold);
  line-height: var(--system-12-line-height);
  text-transform: uppercase;
}

.workspace-picker { min-height: 56px; }

.workspace-source .status-line { min-height: 0; margin-top: var(--ig-space-3); }
.workspace-source .status-line:empty { display: none; }

.hint,
.micro-hint {
  color: var(--muted);
  letter-spacing: 0;
}

.hint {
  max-width: 760px;
  margin: 0 0 var(--ig-space-6);
  font-size: var(--system-14-font-size);
  line-height: var(--system-14-line-height);
}

.micro-hint {
  margin: var(--ig-space-2) 0 0;
  font-size: var(--system-12-font-size);
  line-height: var(--system-12-line-height);
}

/* Stays put while a panel scrolls: Edit Marks runs well past a screen, and
   changing mode should not mean scrolling back to the top to do it. */
.mode-tabs {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  contain: inline-size;
  gap: var(--ig-space-2);
  margin-bottom: var(--ig-space-6);
  padding-top: var(--ig-space-2);
  overflow-x: auto;
  border-bottom: 1px solid var(--border);
  background: var(--bg);
  scrollbar-width: none;
}

.mode-tabs::-webkit-scrollbar { display: none; }

.mode-tab-button {
  position: relative;
  flex: 0 0 auto;
  min-height: 44px;
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font: inherit;
  font-size: var(--system-14-font-size);
  font-weight: var(--font-weight-system-semibold);
  line-height: var(--system-14-line-height);
  letter-spacing: 0;
  padding: 0 var(--ig-space-4);
  transition:
    color var(--ig-duration-micro) var(--ig-ease-standard),
    background var(--ig-duration-micro) var(--ig-ease-standard);
}

.mode-tab-button::after {
  position: absolute;
  right: var(--ig-space-4);
  bottom: -1px;
  left: var(--ig-space-4);
  height: 3px;
  border-radius: var(--ig-radius-pill);
  content: "";
  background: var(--ig-gradient-warm);
  opacity: 0;
}

.mode-tab-button:hover {
  background: rgba(var(--ig-hover-overlay-rgb), var(--ig-hover-overlay-alpha));
  color: var(--text);
}

.mode-tab-button.active {
  color: var(--text);
}

.mode-tab-button.active::after { opacity: 1; }

.mode-panel {
  display: none;
  margin-bottom: var(--ig-space-8);
}

.mode-panel.active { display: block; }

.hidden { display: none !important; }

.field { margin-bottom: var(--ig-space-6); }

.field label,
.field .field-label {
  display: block;
  margin-bottom: var(--ig-space-2);
  color: var(--text);
  font-size: var(--system-14-font-size);
  font-weight: var(--font-weight-system-semibold);
  line-height: var(--system-14-line-height);
}

code {
  padding: var(--space-optical-nudge) var(--space-inline-code-x);
  border-radius: var(--ig-radius-sm);
  background: var(--surface-muted);
  color: var(--text);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: .92em;
}

input[type="text"],
select,
textarea {
  width: 100%;
  min-height: 42px;
  padding: 0 var(--ig-space-3);
  /* Safari otherwise keeps the native control bezel and ignores most of the
     styling below, so the same markup renders differently there than in
     Chromium/Firefox. */
  appearance: none;
  -webkit-appearance: none;
  border: 1px solid var(--border);
  border-radius: var(--input-border-radius);
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: var(--system-14-font-size);
  line-height: var(--system-14-line-height);
  letter-spacing: 0;
}

/* With the native pull-down indicator suppressed, draw our own so every
   engine shows the same control. Inline data URI -- no external asset. */
select {
  padding-right: calc(var(--ig-space-3) + var(--control-chevron-space));
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 4.5l4 4 4-4' fill='none' stroke='%238e8e8e' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--ig-space-3) center;
  background-size: 12px 12px;
  cursor: pointer;
}

textarea {
  padding: var(--ig-space-3);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  line-height: 1.6;
  resize: vertical;
}

input[type="text"]:focus,
select:focus,
textarea:focus {
  border-color: rgb(var(--ig-focus-stroke));
  outline: none;
}

/* One standalone setting, on or off -- a switch, not a checkbox. Checkboxes
   are for a hierarchy of settings; this has no children and no siblings. The
   label leads and the control trails, per the macOS and iOS convention. */
.switch-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ig-space-5);
  min-height: 44px;
  margin-bottom: var(--ig-space-5);
  color: var(--text);
  cursor: pointer;
  font-size: var(--system-14-font-size);
  line-height: var(--system-14-line-height);
}

.switch-row > span {
  min-width: 0;
}

.switch-row code {
  white-space: normal;
  overflow-wrap: anywhere;
}

/* A checkbox underneath with role="switch", so it is announced as a switch and
   keeps every keyboard and label behaviour for free. The track is a real
   element rather than a pseudo-element on the input: inputs are replaced
   elements, and ::after on one is not reliably rendered. */
.switch {
  position: relative;
  flex: 0 0 auto;
  width: 44px;
  height: 26px;
  border-radius: var(--ig-radius-pill);
  background: rgb(var(--ig-separator));
  transition: background var(--ig-duration-micro) var(--ig-ease-standard);
}

.switch::after {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  content: "";
  background: rgb(var(--web-always-white));
  box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
  transition: transform var(--ig-duration-micro) var(--ig-ease-standard);
}

.switch-row:has(input:checked) .switch { background: var(--accent); }

.switch-row:has(input:checked) .switch::after { transform: translateX(18px); }

.switch-row:has(input:focus-visible) .switch {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.file-picker {
  display: flex;
  min-height: 64px;
  align-items: center;
  gap: var(--ig-space-3);
  padding: var(--ig-space-4);
  border: 1px dashed var(--border);
  border-radius: var(--input-border-radius);
  background: var(--surface);
  cursor: pointer;
  color: var(--muted);
  font-size: var(--system-14-font-size);
  line-height: var(--system-14-line-height);
  transition:
    background var(--ig-duration-micro) var(--ig-ease-standard),
    border-color var(--ig-duration-micro) var(--ig-ease-standard);
}

.file-picker:hover {
  border-color: var(--accent);
  background: rgba(var(--ig-hover-overlay-rgb), var(--ig-hover-overlay-alpha));
}

.file-picker input[type="file"] {
  position: absolute;
  max-width: 1px;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
}

.file-picker-label {
  min-width: 0;
  overflow-wrap: anywhere;
  color: var(--muted);
}

.file-picker-label.chosen {
  color: var(--text);
  font-weight: var(--font-weight-system-semibold);
}

button { font-family: inherit; }

.primary-btn,
.secondary-btn,
.tertiary-btn,
.destructive-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  appearance: none;
  -webkit-appearance: none;
  border-radius: var(--input-border-radius);
  cursor: pointer;
  font-weight: var(--font-weight-system-semibold);
  letter-spacing: 0;
  white-space: nowrap;
  transition:
    background var(--ig-duration-micro) var(--ig-ease-standard),
    opacity var(--ig-duration-micro) var(--ig-ease-standard);
}

.primary-btn {
  min-height: 44px;
  padding: 0 var(--ig-space-6);
  border: 1px solid transparent;
  background: var(--accent);
  color: rgb(var(--web-always-white));
  font-size: var(--system-15-font-size, 15px);
  line-height: 20px;
}

.primary-btn:hover { background: var(--accent-hover); }

.primary-btn:disabled {
  cursor: default;
  opacity: .3;
}

.secondary-btn {
  min-height: 32px;
  margin-left: var(--ig-space-3);
  padding: 0 var(--ig-space-3);
  border: 1px solid transparent;
  background: rgb(var(--ig-secondary-button));
  color: var(--text);
  font-size: var(--system-12-font-size);
  line-height: var(--system-12-line-height);
}

.secondary-btn:hover { background: rgb(var(--ig-secondary-button-hover)); }

/* The action ladder, in the order a view is read:
   .primary-btn     one per panel, filled -- the action the whole view is for
   .tertiary-btn    a real action inside a step; outlined, never filled
     .emphasized    the one that completes its step, ranked above its neighbours
   .secondary-btn   a small utility on a step head, subordinate to both
   .destructive-btn filled red, only ever the confirming action of a sheet
   Destructive intent is a colour, not a rank: .destructive on a secondary or
   row button keeps that button's size and weight and only recolours it. */
.tertiary-btn {
  min-height: 40px;
  padding: 0 var(--ig-space-5);
  border: 1px solid rgb(var(--ig-tertiary-button-border));
  background: rgb(var(--ig-tertiary-button-background));
  color: rgb(var(--ig-tertiary-button-text));
  font-size: var(--system-14-font-size);
  line-height: var(--system-14-line-height);
}

.tertiary-btn:hover { background: rgb(var(--ig-tertiary-button-hover)); }

/* Completing a step is not the same as completing the view, so this reads
   above the plain outlines beside it without taking the primary's fill. */
.tertiary-btn.emphasized {
  border-color: var(--accent);
  color: var(--accent);
}

.tertiary-btn.emphasized:hover { background: rgba(var(--ig-primary-button), .08); }

/* The emphasized action of a destructive confirmation. */
.destructive-btn {
  min-height: 40px;
  padding: 0 var(--ig-space-5);
  border: 1px solid transparent;
  background: var(--err);
  color: rgb(var(--web-always-white));
  font-size: var(--system-14-font-size);
  line-height: var(--system-14-line-height);
}

.destructive-btn:hover { background: rgba(var(--ig-error-or-destructive), .85); }

.secondary-btn.destructive { color: var(--err); }

.secondary-btn.destructive:hover { background: rgba(var(--ig-error-or-destructive), .12); }

.status-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ig-space-2);
  min-height: 42px;
  color: var(--muted);
  font-size: var(--system-14-font-size);
  line-height: var(--system-14-line-height);
}

.status-line.error { color: var(--err); }

/* ---------- Add Marks ---------- */

.marker-form {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--ig-space-4);
  margin-bottom: var(--ig-space-5);
}

.marker-form .field {
  grid-column: span 2;
  margin-bottom: 0;
}

.marker-form .field-wide { grid-column: span 3; }
.marker-form .field-full { grid-column: 1 / -1; }
/* Coordinates take the left of a row; the icon palette sits beside them. */
.marker-form .field-main { grid-column: span 4; }
.marker-form .field-side { grid-column: span 2; }

/* The action that completes the form sits trailing, after any message. */
.form-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: var(--ig-space-3);
  margin-bottom: var(--ig-space-6);
}

.form-row .form-message { margin-right: auto; }

.form-message {
  min-width: 0;
  color: var(--muted);
  font-size: var(--system-12-font-size);
  line-height: var(--system-12-line-height);
}

.form-message.error { color: var(--err); }

/* The icon picker: every marker type laid out at once, picked in one click.
   Radio inputs are visually hidden inside each choice, so the group keeps
   native single-selection and arrow-key behaviour. */
.icon-field {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--ig-space-1);
  align-items: center;
  justify-items: center;
}

.icon-field .icon-choice {
  display: inline-flex;
  width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent;
  border-radius: var(--input-border-radius);
  cursor: pointer;
  transition:
    background var(--ig-duration-micro) var(--ig-ease-standard),
    border-color var(--ig-duration-micro) var(--ig-ease-standard);
}

.icon-field .icon-choice:hover { background: rgba(var(--ig-hover-overlay-rgb), var(--ig-hover-overlay-alpha)); }

.icon-field .icon-choice:has(input:checked) {
  border-color: var(--accent);
  background: rgba(var(--ig-primary-button), .12);
}

.icon-field .icon-choice:has(input:focus-visible) {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.icon-field .icon-choice-glyph { display: inline-flex; }

/* Icon-name reference: only shown to people typing icons into a line. */
.icon-names {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: var(--ig-space-2);
  margin-top: var(--ig-space-5);
}

.icon-name {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr) max-content;
  gap: var(--ig-space-3);
  align-items: center;
  min-height: 42px;
  padding: 0 var(--ig-space-4);
  border: 1px solid var(--border);
  border-radius: var(--input-border-radius);
  background: var(--surface);
}

.icon-name code {
  min-width: 0;
  background: none;
  overflow-wrap: anywhere;
  padding: 0;
}

.sheet-note { margin-top: var(--ig-space-3) !important; }

.assistant-list {
  display: grid;
  gap: var(--ig-space-2);
  margin-top: var(--ig-space-5);
}

.assistant {
  display: grid;
  grid-template-columns: minmax(0, 1fr) max-content;
  gap: var(--ig-space-3);
  align-items: center;
  min-height: 46px;
  padding: 0 var(--ig-space-4);
  appearance: none;
  -webkit-appearance: none;
  border: 1px solid var(--border);
  border-radius: var(--input-border-radius);
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  font: inherit;
  font-size: var(--system-14-font-size);
  text-align: left;
}

.assistant:hover {
  border-color: var(--accent);
  background: rgba(var(--ig-hover-overlay-rgb), var(--ig-hover-overlay-alpha));
}

.assistant-name { font-weight: var(--font-weight-system-semibold); }

.assistant-note {
  color: var(--muted);
  font-size: var(--system-12-font-size);
  text-align: right;
}

.icon-name-byte {
  color: var(--muted);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: var(--system-12-font-size);
}

/* A button that reads as a link -- used inside running hint text. */
.link-btn {
  padding: 0;
  border: 0;
  background: none;
  color: var(--accent);
  cursor: pointer;
  font: inherit;
  text-decoration: none;
}

.link-btn:hover { text-decoration: underline; }

.micro-hint .link-btn { font-size: inherit; }

.marker-icon {
  display: inline-block;
  flex: 0 0 auto;
  width: var(--icon-size, 22px);
  height: var(--icon-size, 22px);
  background-image: url("assets/minimap-symbols.png");
  background-repeat: no-repeat;
  background-size: calc(var(--icon-size, 22px) * 11) calc(var(--icon-size, 22px) * 2);
  background-position:
    calc(var(--icon-col, 0) * var(--icon-size, 22px) * -1)
    calc(var(--icon-row, 0) * var(--icon-size, 22px) * -1);
  image-rendering: pixelated;
}

/* Sheets -- temporary, cancellable contexts (edit, confirm, icon picker).
   A centred modal on desktop, a bottom sheet on small screens. This is the
   only place a Cancel button belongs; the mode panels themselves are
   workspaces, where each section just has its own primary action. */
.sheet {
  width: min(100%, 560px);
  max-width: none;
  max-height: min(80vh, 680px);
  margin: auto;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--ig-radius-lg);
  background: var(--surface-raised);
  color: var(--text);
  box-shadow: var(--ig-shadow-card);
}

/* Never on the bare element -- a dialog is display:none until it's open. */
.sheet[open],
.sheet[open] > form {
  display: flex;
  min-height: 0;
  flex-direction: column;
}

.sheet::backdrop { background: rgba(0, 0, 0, .5); }

.sheet-head {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: var(--ig-space-3);
  padding: var(--ig-space-5) var(--ig-space-6);
  border-bottom: 1px solid var(--border);
}

.sheet-head h3 {
  margin: 0;
  margin-right: auto;
  font-family: var(--font-family-brand);
  font-size: var(--system-16-font-size);
  font-weight: var(--font-weight-system-bold);
  line-height: var(--system-16-line-height);
}

.sheet-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: var(--ig-space-6);
}

.sheet-body p {
  margin: 0;
  color: var(--muted);
  font-size: var(--system-14-font-size);
  line-height: var(--system-16-line-height);
}

.sheet-body dl {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: var(--ig-space-2) var(--ig-space-4);
  align-items: baseline;
  margin: 0 0 var(--ig-space-4);
  font-size: var(--system-14-font-size);
  line-height: var(--system-16-line-height);
}

.sheet-body dt {
  color: var(--muted);
  font-weight: var(--font-weight-system-semibold);
}

.sheet-body dd {
  min-width: 0;
  margin: 0;
  overflow-wrap: anywhere;
}

/* The "How it works" steps -- the only ordered list that renders in a sheet. */
.sheet-body ol {
  margin: 0;
  padding-left: var(--ig-space-5);
  color: var(--text);
  font-size: var(--system-14-font-size);
  line-height: var(--system-16-line-height);
}

.sheet-body li { margin-bottom: var(--ig-space-3); }
.sheet-body li:last-child { margin-bottom: 0; }

.sheet-body ol + .micro-hint { margin-top: var(--ig-space-4); }

.sheet-body .marker-form { margin-bottom: 0; }

.sheet-body .form-message { margin-top: var(--ig-space-4); }

/* Cancel first, the action that completes the task trailing (macOS order). */
.sheet-actions {
  display: flex;
  flex: 0 0 auto;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--ig-space-2);
  padding: var(--ig-space-5) var(--ig-space-6);
  border-top: 1px solid var(--border);
}

.sheet-confirm .sheet-head { border-bottom: 0; padding-bottom: 0; }

/* Marker Sets: the collection picker and the add/remove choice. */
.set-choices {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--ig-space-2);
}

.set-choice,
.direction {
  display: grid;
  grid-template-columns: minmax(0, 1fr) max-content;
  gap: 0 var(--ig-space-2);
  align-items: center;
  align-content: center;
  min-height: 46px;
  padding: var(--ig-space-3) var(--ig-space-4);
  border: 1px solid var(--border);
  border-radius: var(--input-border-radius);
  background: var(--surface);
  cursor: pointer;
  font-size: var(--system-14-font-size);
}

.set-choice:hover,
.direction:hover { background: rgba(var(--ig-hover-overlay-rgb), var(--ig-hover-overlay-alpha)); }

.set-choice:has(input:checked),
.direction:has(input:checked) {
  border-color: var(--accent);
  background: rgba(var(--ig-primary-button), .12);
}

.set-choice:has(input:focus-visible),
.direction:has(input:focus-visible) {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Every card has the same two-line shape: the name across the top, then one
   meta line -- when it last changed on the left, any caveat on the right.
   The longest name wraps rather than squeezing the note into a column. */
.set-name {
  display: flex;
  align-items: center;
  gap: var(--ig-space-2);
  grid-row: 1;
  grid-column: 1 / -1;
  font-weight: var(--font-weight-system-semibold);
}

/* Several collections can be picked at once, so each card says whether it is
   one of them. Border and tint alone read as "current" rather than "chosen",
   which is the difference that matters once more than one can be. */
.set-check {
  flex: 0 0 auto;
  width: var(--selection-check-size);
  height: var(--selection-check-size);
  color: var(--accent);
  opacity: 0;
  transition: opacity var(--ig-duration-micro) var(--ig-ease-standard);
}

.set-choice:has(input:checked) .set-check { opacity: 1; }

.set-title {
  min-width: 0;
  overflow-wrap: anywhere;
}

.set-note,
.set-date {
  color: var(--muted);
  font-size: var(--system-12-font-size);
  line-height: var(--system-12-line-height);
}

/* The check occupies the name row, so the meta line keeps its own indent. */
.set-date,
.set-note { padding-left: calc(var(--selection-check-size) + var(--ig-space-2)); }

.set-note { padding-left: 0; }

/* Both pinned to row two explicitly. Left to auto-placement they stack, since
   sparse packing will not step back to column one after filling column two. */
.set-date {
  grid-row: 2;
  grid-column: 1;
}

.set-note {
  grid-row: 2;
  grid-column: 2;
  text-align: right;
}

/* These are published files, and how long ago one last moved is the difference
   between current and abandoned. Blank until the dates arrive, and it stays
   blank if they never do -- no row, no gap. */
.set-choice:has(.set-date:not(:empty)) .set-date,
.set-choice:has(.set-note:not(:empty)) .set-note { margin-top: var(--space-optical-nudge); }

.direction-choices {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--ig-space-2);
}

/* A collection card hides its radio and shows selection through the card
   itself; a direction shows a real radio, so it needs a column of its own --
   without one it lands in the single column and stretches across the row. */
.direction { grid-template-columns: max-content minmax(0, 1fr); }
.direction input { width: 16px; height: 16px; margin: 0; accent-color: var(--accent); }

.review-conflicts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ig-space-3) var(--ig-space-5);
  margin-bottom: var(--ig-space-4);
  padding: var(--ig-space-4);
  border: 1px solid color-mix(in srgb, var(--warning) 45%, transparent);
  border-radius: var(--card-border-radius);
  background: color-mix(in srgb, var(--warning) 8%, transparent);
}

.review-conflicts-copy {
  flex: 1 1 320px;
}

.review-conflicts-copy strong {
  margin-right: var(--ig-space-2);
  color: var(--text);
  font-size: var(--system-14-font-size);
}

.review-conflicts-copy p {
  margin: var(--ig-space-1) 0 0;
  color: var(--muted);
  font-size: var(--system-12-font-size);
  line-height: var(--system-14-line-height);
}

.review-conflict-progress {
  display: inline-block;
  padding: var(--space-optical-nudge) var(--ig-space-2);
  border-radius: var(--ig-radius-circle);
  background: var(--surface);
  color: var(--muted);
  font-size: var(--system-12-font-size);
  font-weight: var(--font-weight-system-semibold);
}

.review-conflict-actions {
  display: flex;
  flex: 0 1 auto;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: var(--ig-space-2);
}

.review-conflict-actions .secondary-btn {
  min-height: 44px;
  margin-left: 0;
}

.marker-conflict-detail td {
  padding: 0 var(--ig-space-4) var(--ig-space-4);
  background: var(--surface-muted);
  white-space: normal;
}

.marker-conflict-detail .cell-map {
  padding-right: 0;
  vertical-align: top;
}

.marker-conflict-detail .conflict-decision-cell {
  padding-left: var(--ig-space-2);
}

.coordinate-conflict {
  min-width: 0;
  margin: 0;
  padding: var(--ig-space-3);
  border: 1px solid color-mix(in srgb, var(--warning) 40%, transparent);
  border-radius: var(--ig-radius-md);
  background: var(--surface-raised);
}

.coordinate-conflict legend {
  padding: 0 var(--ig-space-2);
  color: var(--warning);
  font-size: var(--system-12-font-size);
  font-weight: var(--font-weight-system-semibold);
}

.conflict-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(240px, 1fr));
  gap: var(--ig-space-3);
}

.conflict-option {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: var(--ig-space-3);
  align-items: start;
  padding: var(--ig-space-3);
  border: 1px solid var(--border);
  border-radius: var(--ig-radius-md);
  background: var(--surface);
  cursor: pointer;
}

.conflict-option:hover { border-color: var(--accent); }

.conflict-option:has(input:checked) {
  border-color: var(--accent);
  background: rgba(var(--ig-primary-button), .08);
  box-shadow: 0 0 0 1px var(--accent);
}

.conflict-option input {
  width: 16px;
  height: 16px;
  margin: var(--space-optical-nudge) 0 0;
  accent-color: var(--accent);
}

.conflict-option-body {
  display: grid;
  gap: var(--ig-space-2);
  min-width: 0;
}

.conflict-option-marker {
  display: flex;
  align-items: center;
  gap: var(--ig-space-3);
  min-width: 0;
}

.conflict-option-marker > span:last-child {
  display: grid;
  min-width: 0;
}

.conflict-option-marker strong {
  overflow: hidden;
  color: var(--text);
  font-size: var(--system-14-font-size);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.conflict-option-marker small {
  color: var(--muted);
  font-size: var(--system-12-font-size);
}

.conflict-option-action {
  color: var(--text);
  font-size: var(--system-14-font-size);
  font-weight: var(--font-weight-system-semibold);
}

.conflict-option[data-resolution="replace"] .conflict-option-action { color: var(--accent); }

.choice-group-label {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--ig-space-2);
  margin: var(--ig-space-6) 0 var(--ig-space-3);
  color: var(--text);
  font-size: var(--system-14-font-size);
  font-weight: var(--font-weight-system-semibold);
  line-height: var(--system-14-line-height);
}

/* Shown only for the one collection that needs explaining before you take it. */
.set-explainer {
  margin: var(--ig-space-3) 0 0;
  padding: var(--ig-space-3) var(--ig-space-4);
  border-left: 3px solid var(--accent);
  border-radius: 0 var(--input-border-radius) var(--input-border-radius) 0;
  background: rgba(var(--ig-primary-button), .06);
  color: var(--muted);
  font-size: var(--system-12-font-size);
  line-height: 1.5;
}

/* The task reads top to bottom: marker file -> define marks -> review, with
   one prominent action (the download) at the end. */
.steps {
  margin: 0 0 var(--ig-space-6);
  padding: 0;
  list-style: none;
}

.step {
  padding-bottom: var(--ig-space-6);
  margin-bottom: var(--ig-space-6);
  border-bottom: 1px solid var(--border);
}

.step-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ig-space-2) var(--ig-space-3);
  margin-bottom: var(--ig-space-4);
}

.step-head h3 {
  display: flex;
  align-items: center;
  gap: var(--ig-space-3);
  margin: 0;
  margin-right: auto;
  font-family: var(--font-family-brand);
  font-size: var(--system-16-font-size);
  font-weight: var(--font-weight-system-bold);
  line-height: var(--system-16-line-height);
}

.step-number {
  display: inline-flex;
  width: 24px;
  height: 24px;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  border-radius: var(--ig-radius-circle);
  background: var(--surface-muted);
  color: var(--muted);
  font-family: var(--font-family-product);
  font-size: var(--system-12-font-size);
  font-weight: var(--font-weight-system-semibold);
}

.step-note {
  color: var(--muted);
  font-size: var(--system-12-font-size);
  line-height: var(--system-12-line-height);
}

.step-head .secondary-btn { margin-left: 0; }

.step .status-line:empty { display: none; }

.step-feedback:empty { display: none; }

.import-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ig-space-2);
  align-items: center;
}

/* The URL takes the room left over; the actions keep their natural width and
   wrap underneath it when there isn't enough. */
.import-row input[type="text"] { flex: 1 1 240px; width: auto; }

.import-row .tertiary-btn { flex: 0 0 auto; }


.table-wrap {
  max-width: 100%;
  contain: inline-size;
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: var(--ig-radius-md);
  background: var(--surface-raised);
}

.marker-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--system-14-font-size);
  line-height: var(--system-14-line-height);
}

.marker-table th,
.marker-table td {
  padding: var(--ig-space-3) var(--ig-space-4);
  border-bottom: 1px solid var(--border);
  text-align: left;
  white-space: nowrap;
}

.marker-table tbody tr:last-child td { border-bottom: 0; }

.marker-table th {
  color: var(--muted);
  font-size: var(--system-12-font-size);
  font-weight: var(--font-weight-system-semibold);
  line-height: var(--system-12-line-height);
}

.marker-table tr:not(.marker-conflict-detail) td:nth-child(n+2):nth-child(-n+4) {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

.cell-label {
  max-width: 260px;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* The icon column is the icon alone -- its name is a tooltip and is read by
   screen readers, but repeating it as text made every row noisy. */
.cell-icon { line-height: 0; }

.col-map,
.cell-map {
  width: 1%;
  white-space: nowrap;
}

.map-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: var(--input-border-radius);
  color: var(--muted);
}

.map-link:hover {
  background: rgba(var(--ig-hover-overlay-rgb), var(--ig-hover-overlay-alpha));
  color: var(--accent);
  text-decoration: none;
}

.visually-hidden {
  position: absolute;
  inset: 0 auto auto 0;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  border: 0;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.cell-actions {
  display: flex;
  gap: var(--ig-space-2);
}

.row-btn {
  min-height: 30px;
  appearance: none;
  -webkit-appearance: none;
  padding: 0 var(--ig-space-3);
  border: 1px solid var(--border);
  border-radius: var(--input-border-radius);
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  font: inherit;
  font-size: var(--system-12-font-size);
  line-height: var(--system-12-line-height);
}

.row-btn:hover { background: rgba(var(--ig-hover-overlay-rgb), var(--ig-hover-overlay-alpha)); }

.row-btn.destructive { color: var(--err); }

.row-btn.destructive:hover {
  border-color: rgba(var(--ig-error-or-destructive), .4);
  background: rgba(var(--ig-error-or-destructive), .1);
}

.result { margin-top: var(--ig-space-6); }

.result-card {
  padding: var(--ig-space-4);
  border: 1px solid var(--border);
  border-radius: var(--ig-radius-md);
  background: var(--surface-raised);
  color: var(--text);
  font-size: var(--system-14-font-size);
  line-height: var(--system-16-line-height);
}

.result-card.ok {
  border-color: rgba(var(--ig-success), .35);
  background: rgba(var(--ig-success), .1);
}

.result-card.err {
  border-color: rgba(var(--ig-error-or-destructive), .35);
  background: rgba(var(--ig-error-or-destructive), .1);
}

.result-card dl {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: var(--ig-space-1) var(--ig-space-4);
  margin: var(--ig-space-3) 0 0;
}

.result-card dt { color: var(--muted); }

.result-card dd {
  min-width: 0;
  margin: 0;
  overflow-wrap: anywhere;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

.warn-list {
  margin: var(--ig-space-3) 0 0;
  padding-left: var(--ig-space-5);
  color: var(--warning);
  font-size: var(--system-12-font-size);
  line-height: var(--system-12-line-height);
}

.disclaimer {
  margin-top: var(--ig-space-10);
  padding-top: var(--ig-space-5);
  border-top: 1px solid var(--border);
}

.disclaimer p {
  margin: 0;
  color: var(--muted);
  font-size: var(--system-12-font-size);
  line-height: var(--system-12-line-height);
}

footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--ig-space-2);
  margin-top: var(--ig-space-8);
  color: var(--muted);
  font-size: var(--system-12-font-size);
  line-height: var(--system-12-line-height);
  text-align: center;
}

footer a {
  color: var(--muted);
  font-size: inherit;
  text-decoration: none;
}

footer a:hover,
footer .link-btn:hover { color: var(--accent); }

footer .link-btn {
  color: var(--muted);
  font-size: inherit;
  line-height: inherit;
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

@media (max-width: 760px) {
  .app {
    padding: var(--ig-space-4) var(--ig-space-4) var(--ig-space-12);
  }

  header {
    padding: var(--ig-space-6);
    border-radius: var(--ig-radius-lg);
  }

  .lang-switch {
    justify-content: flex-start;
    margin-bottom: var(--ig-space-6);
  }

  header h1 {
    font-size: 38px;
    line-height: 1.05;
  }

  .subtitle {
    font-size: var(--system-14-font-size);
    line-height: var(--system-16-line-height);
  }

  .sheet-body dl,
  .result-card dl {
    grid-template-columns: 1fr;
  }

  .mode-tabs {
    gap: 0;
  }

  .mode-tab-button {
    padding: 0 var(--ig-space-3);
  }

  .primary-btn {
    width: 100%;
  }

  .secondary-btn {
    margin: var(--ig-space-2) 0 0;
  }

  .workspace-source { padding: var(--ig-space-5); }

  .workspace-source-head { align-items: center; }

  .workspace-source-head .secondary-btn {
    width: auto;
    margin: 0;
  }

  .marker-form {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .marker-form .field {
    grid-column: span 3;
  }

  .marker-form .field-coord {
    grid-column: span 1;
  }

  .marker-form .field-main,
  .marker-form .field-side {
    grid-column: span 3;
  }

  .sheet {
    width: 100%;
    max-height: 86vh;
    margin: auto auto 0;
    border-right: 0;
    border-bottom: 0;
    border-left: 0;
    border-radius: var(--ig-radius-xl) var(--ig-radius-xl) 0 0;
  }

  .sheet-actions > .tertiary-btn,
  .sheet-actions > .primary-btn,
  .sheet-actions > .destructive-btn {
    flex: 1 1 0;
  }

  .form-row .tertiary-btn,
  .form-row .secondary-btn {
    flex: 1 0 auto;
    margin: 0;
  }

  .review-conflict-actions { width: 100%; }

  .review-conflict-actions .secondary-btn,
  .review-conflict-actions .primary-btn {
    flex: 1 1 180px;
    margin: 0;
  }

  .marker-conflict-detail .cell-map {
    position: sticky;
    left: 0;
    z-index: 1;
    width: 44px;
    max-width: 44px;
  }

  .marker-conflict-detail .conflict-decision-cell {
    position: sticky;
    left: 44px;
    width: calc(100vw - 78px);
    max-width: calc(100vw - 78px);
  }

  .coordinate-conflict {
    width: calc(100vw - 110px);
    max-width: calc(100vw - 110px);
  }

  .conflict-options { grid-template-columns: minmax(0, 1fr); }

  .cell-label { max-width: 180px; }
}