/* =========================================================================
   Field Describer — tablet-first base styles
   ========================================================================= */

* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

/* The `hidden` attribute must ALWAYS win. Any class that sets `display:`
   (fd-btn, fd-kind-option, …) silently overrides the UA's [hidden] rule, which
   has produced a string of "hidden but still visible" bugs (the per-selector
   `X[hidden]{display:none}` patches in overlays.css are earlier moles). */
[hidden] {
  display: none !important;
}

html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  font-family: var(--graiph-font);
  color: var(--graiph-text-primary);
  background: var(--graiph-bg-primary);
  -webkit-font-smoothing: antialiased;
  user-select: none;
  touch-action: manipulation;
}

/* ============ THEMED SCROLLBARS ============
   Subtle and ON-theme. Firefox uses the standard scrollbar-* props; WebKit
   gets the legacy ::-webkit-scrollbar pseudo-elements. Both target every
   scrollable container in the field UI — no per-component overrides needed. */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--graiph-border-hover) transparent;
}
*::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
*::-webkit-scrollbar-track {
  background: transparent;
}
*::-webkit-scrollbar-thumb {
  background: var(--graiph-border);
  border: 2px solid transparent;
  background-clip: padding-box;
  border-radius: 999px;
}
*::-webkit-scrollbar-thumb:hover {
  background: var(--graiph-border-hover);
  background-clip: padding-box;
}
*::-webkit-scrollbar-corner {
  background: transparent;
}

input, textarea {
  user-select: text;
}

/* ============ LOGIN OVERLAY ============ */
.fd-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: var(--graiph-bg-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.fd-overlay[hidden] { display: none; }

.fd-login-card {
  width: 100%;
  max-width: 420px;
  background: var(--graiph-bg-surface);
  border: var(--graiph-border-default);
  border-radius: var(--graiph-radius-lg);
  padding: 32px;
  box-shadow: var(--graiph-shadow-lg);
}

.fd-login-header {
  text-align: center;
  margin-bottom: 24px;
}
.fd-login-header svg[data-lucide] {
  width: 40px; height: 40px;
  color: var(--graiph-accent-text);
  margin-bottom: 12px;
}
.fd-login-header h2 {
  margin: 0 0 6px;
  font-size: 22px;
  font-weight: 700;
}
.fd-login-header p {
  margin: 0;
  font-size: 14px;
  color: var(--graiph-text-secondary);
}

.fd-login-form { display: flex; flex-direction: column; gap: 16px; }

.fd-input-group {
  position: relative;
  display: flex;
  align-items: center;
}
.fd-input-group svg[data-lucide] {
  position: absolute;
  left: 14px;
  width: 18px; height: 18px;
  color: var(--graiph-text-muted);
  pointer-events: none;
}
.fd-input-group input {
  width: 100%;
  height: 52px;
  padding: 0 14px 0 44px;
  background: var(--graiph-bg-tertiary);
  border: 1px solid var(--graiph-border);
  border-radius: var(--graiph-radius-md);
  color: var(--graiph-text-primary);
  font-size: 16px;
  font-family: inherit;
  outline: none;
}
.fd-input-group input:focus {
  border-color: var(--graiph-border-focus);
}

.fd-error {
  color: var(--graiph-alert-error);
  font-size: 13px;
  min-height: 18px;
}

/* ============ BUTTONS ============ */
.fd-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 56px;
  padding: 0 20px;
  border-radius: var(--graiph-radius-md);
  font-family: inherit;
  font-size: 16px;
  font-weight: 600;
  border: 1px solid transparent;
  cursor: pointer;
  background: var(--graiph-bg-elevated);
  color: var(--graiph-text-primary);
}
.fd-btn:active { transform: translateY(1px); }
.fd-btn svg { pointer-events: none; }
.fd-pill svg { pointer-events: none; }
.fd-class-picker-btn svg { pointer-events: none; }
.fd-header-back svg { pointer-events: none; }
button svg { pointer-events: none; }

.fd-btn-primary {
  background: var(--graiph-accent);
  color: #0b1a10;
}
.fd-btn-primary:hover { background: var(--graiph-accent-hover); }

.fd-btn-ghost {
  background: transparent;
  border-color: var(--graiph-border);
  color: var(--graiph-text-secondary);
}

.fd-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  border-radius: var(--graiph-radius-md);
  background: transparent;
  border: 1px solid var(--graiph-border);
  color: var(--graiph-text-primary);
  cursor: pointer;
  padding: 0;
}
/* The base `display: inline-flex` above out-ranks the UA `[hidden]{display:none}`,
   so without this an icon button with the `hidden` attribute (set via JS `.hidden`
   or authored) still renders — that's why hidden fracture tools/chevrons leaked
   through. Restore attribute-hidden semantics for every icon button. */
.fd-icon-btn[hidden] { display: none !important; }
.fd-icon-btn svg { pointer-events: none; width: 20px; height: 20px; }
.fd-hd-toggle { font-weight: 700; font-size: 13px; letter-spacing: 0.03em; }
.fd-icon-btn:active { background: var(--graiph-bg-hover); }
.fd-icon-btn:disabled { opacity: 0.35; pointer-events: none; cursor: default; }

/* Active state for the pressable view-mode / HD toggles (green accent). */
.fd-icon-btn[aria-pressed="true"] {
  background: var(--graiph-accent);
  border-color: var(--graiph-accent);
  color: #00001E;
}

/* Pan tool active (state.panMode → .fd-pan-mode on #trayStack): drag pans the
   view, so signal it with a grab cursor instead of the annotation crosshair. */
.fd-pan-mode .fd-tray-canvas-wrap canvas { cursor: grab; }
.fd-pan-mode .fd-tray-canvas-wrap canvas:active { cursor: grabbing; }

.fd-icon-btn.fd-save-status[data-status="saving"] { color: var(--graiph-alert-warning); }
.fd-icon-btn.fd-save-status[data-status="error"] { color: var(--graiph-alert-error); }
.fd-icon-btn.fd-save-status[data-status="saved"] { color: var(--graiph-accent-text); }

body[data-fd-mode="similarity"] .fd-tray-canvas-wrap {
  outline: 2px solid var(--graiph-accent);
  outline-offset: -2px;
}

/* 3D / Stats mode shells (T2.1 / T3.1). Containers occupy the tray-stack slot
   when active; visibility is driven by main.js (hidden attribute) keyed off
   body[data-fd-mode]. */
.fd-mode-container {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 16px;
  background: var(--graiph-bg-primary);
  display: flex;
  align-items: center;
  justify-content: center;
}
.fd-mode-container[hidden],
.fd-mode-container.fd-mode-container-stack[hidden] {
  display: none;
}
.fd-mode-placeholder {
  color: var(--graiph-text-muted);
  font-size: 14px;
  padding: 32px;
  text-align: center;
}

/* ── T2.2: 3D mode host ───────────────────────────────────────────────── */
/* DESIGN-TOKEN EXCEPTION: 3D mode intentionally uses explicit hex colors
   (#000000 plot canvas, #0d0d12 / #16161d toolbar surfaces) rather than the
   Graiph design tokens used by the rest of the field UI. The black industrial
   canvas is a deliberate UX cue that this mode is a separate analytical
   surface from the per-tray description / similarity views. */
/* The 3D container is full-bleed inside fd-mode-container — override the
   centering so the plot can use the whole flex slot. */
#fdPlot3DContainer.fd-3d-host,
#fdPlot3DContainer.fd-mode-container {
  padding: 0;
  align-items: stretch;
  justify-content: stretch;
  flex-direction: column;
}
.fd-3d-host {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  background: #000000;
}
/* Toolbar is always dark so it sits naturally over the black plot canvas,
   regardless of the rest of the field UI's theme. Explicit colors —
   relying on Graiph CSS vars here produced dark text on dark backgrounds
   inside the native <select> dropdown. */
.fd-3d-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  background: #0d0d12;
  border-bottom: 1px solid #2a2a33;
  color: #E6E6E6;
  font-size: 13px;
}
.fd-3d-control {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #B8BCC4;
}
.fd-3d-control select {
  padding: 4px 8px;
  border-radius: 4px;
  border: 1px solid #3a3a45;
  background: #16161d;
  color: #F0F0F2;
  font: inherit;
}
/* Native dropdown options inherit from the <select> in most browsers;
   force the dark scheme so the popup is readable too. */
.fd-3d-control select option {
  background: #16161d;
  color: #F0F0F2;
}
.fd-3d-refresh {
  border: 1px solid #3a3a45;
  background: #16161d;
  color: #F0F0F2;
  width: 28px; height: 28px;
  border-radius: 4px;
  cursor: pointer;
}
.fd-3d-refresh:hover { background: #1f1f29; }
.fd-3d-compute {
  padding: 4px 14px;
  border-radius: 4px;
  border: 1px solid #2a8a4a;
  background: var(--graiph-accent-primary, #33CC66);
  color: #00131c;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.fd-3d-compute:hover { filter: brightness(1.08); }
.fd-3d-status {
  margin-left: auto;
  color: #8C909A;
  font-size: 12px;
}
.fd-3d-plot-wrap {
  flex: 1;
  min-height: 0;
  position: relative;
  background: #000000;
}
.fd-3d-plot {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background: #000000;
}
/* Empty state — covers the plot area (NOT the toolbar) until first Compute.
   Sits inside .fd-3d-plot-wrap which is sized to the remaining flex area. */
.fd-3d-empty-state {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  color: #C0C0C5;
  text-align: center;
  pointer-events: none;
  z-index: 1;
}
.fd-3d-empty-state[hidden] { display: none; }
.fd-3d-empty-title { font-size: 14px; font-weight: 600; color: #F0F0F2; }
.fd-3d-empty-sub { font-size: 12px; color: #8C909A; }

/* ── Filter toggle button + badge ─────────────────────────────────────── */
.fd-3d-filter-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 4px;
  border: 1px solid #3a3a45;
  background: #16161d;
  color: #F0F0F2;
  font: inherit;
  cursor: pointer;
}
.fd-3d-filter-toggle:hover { background: #1f1f29; }
.fd-3d-filter-badge {
  display: inline-block;
  min-width: 18px;
  padding: 0 4px;
  border-radius: 9px;
  background: var(--graiph-accent-primary, #33CC66);
  color: #000;
  font-size: 11px;
  font-weight: 600;
  text-align: center;
  line-height: 18px;
}
.fd-3d-filter-badge[hidden] { display: none; }

/* ── Filter panel ─────────────────────────────────────────────────────── */
.fd-3d-filter-panel {
  background: #0d0d12;
  border-bottom: 1px solid #2a2a33;
  padding: 10px 12px;
  max-height: 40vh;
  overflow-y: auto;
  color: #E6E6E6;
}
.fd-3d-filter-panel[hidden] { display: none; }
.fd-3d-filter-section { margin-bottom: 10px; }
.fd-3d-filter-section:last-child { margin-bottom: 0; }
.fd-3d-filter-header {
  font-size: 11px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #8C909A;
  margin-bottom: 6px;
}
.fd-3d-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.fd-3d-chip {
  --chip-color: #607D8B;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: 14px;
  border: 1px solid var(--chip-color);
  background: color-mix(in srgb, var(--chip-color) 22%, #16161d);
  color: #F0F0F2;
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
  font: inherit;
}
.fd-3d-chip:hover { filter: brightness(1.15); }
.fd-3d-chip.is-hidden {
  background: transparent;
  color: #6E6E78;
  border-color: #3a3a45;
  text-decoration: line-through;
}
.fd-3d-chip-count {
  font-size: 10px;
  color: #B8BCC4;
  font-weight: 400;
}
.fd-3d-chip.is-hidden .fd-3d-chip-count { color: #4F4F58; }

.fd-3d-depth-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
}
.fd-3d-depth-row input[type="number"] {
  width: 90px;
  padding: 4px 6px;
  border-radius: 4px;
  border: 1px solid #3a3a45;
  background: #16161d;
  color: #F0F0F2;
  font: inherit;
}
.fd-3d-depth-row button {
  padding: 3px 8px;
  border-radius: 4px;
  border: 1px solid #3a3a45;
  background: #16161d;
  color: #F0F0F2;
  cursor: pointer;
  font-size: 11px;
}
.fd-3d-depth-row button:hover { background: #1f1f29; }

/* ── T2.3 / T2.5: 3D side panel (single point detail OR area stats) ───── */
.fd-3d-side-panel {
  position: fixed;
  top: 70px;
  right: 12px;
  width: 340px;
  max-height: calc(100vh - 100px);
  overflow-y: auto;
  background: var(--graiph-bg-primary, #fff);
  border: 1px solid var(--graiph-gray-light, #ccc);
  border-radius: 8px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.18);
  z-index: 40;
  padding: 0;
}
.fd-3d-side-panel[hidden] { display: none; }
.fd-3d-side-panel.fd-3d-area-stats { width: 480px; }
.fd-3d-panel-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--graiph-gray-light, #ccc);
}
.fd-3d-panel-title { flex: 1; }
.fd-3d-panel-classes {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 6px;
}
.fd-3d-class-chip {
  font-size: 11px;
  padding: 2px 6px;
  border-radius: 10px;
  color: #fff;
  font-weight: 500;
}
.fd-3d-panel-close {
  background: none;
  border: none;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  color: var(--graiph-text-muted, #666);
  padding: 0 4px;
}
.fd-3d-panel-rows {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 4px 12px;
  padding: 10px 12px;
  font-size: 13px;
  margin: 0;
}
.fd-3d-panel-rows dt { color: var(--graiph-text-muted, #666); }
.fd-3d-panel-rows dd { margin: 0; }
.fd-3d-panel-thumb {
  display: block;
  max-width: 100%;
  margin: 8px 12px;
  border-radius: 4px;
}
.fd-3d-panel-thumb-loading,
.fd-3d-panel-thumb-missing {
  /* Reuse the .fd-3d-panel-thumb box but render a placeholder. Background
     uses an explicit dark hex (matches the rest of the 3D black canvas
     exception documented above this block in index.js's repaint()). */
  min-height: 80px;
  background: #16161d;
  color: #888;
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px dashed rgba(255, 255, 255, 0.15);
}

/* Area stats: thumbnail grid above per-class charts.
   Touch target = 64px square — tablet-friendly. */
.fd-3d-thumbs-section { margin-bottom: 14px; }
.fd-3d-thumb-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(64px, 1fr));
  gap: 6px;
}
.fd-3d-thumb-cell {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  padding: 0;
  background: #16161d;
  border: 1px solid var(--thumb-color, rgba(255, 255, 255, 0.15));
  border-radius: 4px;
  overflow: hidden;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  outline-offset: 1px;
}
.fd-3d-thumb-cell:focus-visible {
  outline: 2px solid var(--thumb-color, #33CC66);
}
.fd-3d-thumb-cell img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.fd-3d-thumb-spinner {
  width: 14px;
  height: 14px;
  border: 2px solid rgba(255, 255, 255, 0.18);
  border-top-color: rgba(255, 255, 255, 0.65);
  border-radius: 50%;
  animation: fd3dThumbSpin 0.8s linear infinite;
}
@keyframes fd3dThumbSpin {
  to { transform: rotate(360deg); }
}
.fd-3d-thumb-missing .fd-3d-thumb-fallback {
  font-size: 12px;
  font-weight: 600;
  color: #888;
  letter-spacing: 0.5px;
}
.fd-3d-thumb-more {
  grid-column: 1 / -1;
  text-align: center;
  font-size: 12px;
  color: #888;
  padding: 6px 0 0;
}
.fd-3d-panel-actions {
  padding: 10px 12px;
  border-top: 1px solid var(--graiph-gray-light, #ccc);
  display: flex;
  justify-content: flex-end;
}

/* Area stats: per-class section + chart grid */
.fd-3d-area-body { padding: 8px 12px 14px; }
.fd-3d-area-section { margin-bottom: 14px; }
.fd-3d-area-section h4 {
  font-size: 13px;
  padding-left: 8px;
  margin: 4px 0 8px;
  color: var(--graiph-text-primary, #111);
}
.fd-3d-area-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.fd-3d-chart-cell {
  background: var(--graiph-bg-secondary, #fafafa);
  border: 1px solid var(--graiph-gray-light, #eee);
  border-radius: 4px;
  padding: 6px;
  min-height: 120px;
  position: relative;
}
.fd-3d-chart-cell canvas { width: 100% !important; height: 110px !important; }
.fd-3d-chart-empty {
  font-size: 11px;
  color: var(--graiph-text-muted, #888);
  padding: 24px 8px;
  text-align: center;
}

/* T2.3 — Back-to-3D return pill (header-mounted, only visible while
   modeReturnTarget === "3d"). */
.fd-return-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 14px;
  background: var(--graiph-accent-primary, #33CC66);
  color: var(--graiph-accent-ink);
  border: none;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  margin-right: 8px;
}
.fd-return-pill[hidden] { display: none; }
.fd-return-pill svg { width: 14px; height: 14px; }

/* Stats mode container is top-aligned (filter bar at top, body below) rather
   than centered like 3D's placeholder. */
.fd-mode-container.fd-mode-container-stack {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 16px;
}

/* T3.2 — Stats mode filter bar. */
.fd-stats-filter {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
  background: var(--graiph-bg-surface);
  border: 1px solid var(--graiph-border);
  border-radius: var(--graiph-radius-md);
}
.fd-stats-filter-row {
  display: grid;
  grid-template-columns: 120px 1fr auto;
  align-items: center;
  gap: 12px;
}
.fd-stats-filter-row[data-key="classes"],
.fd-stats-filter-row[data-key="params"] {
  grid-template-columns: 120px 1fr;
}
.fd-stats-filter-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--graiph-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.fd-stats-depth-readout {
  font-size: 13px;
  color: var(--graiph-text-primary);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  min-width: 140px;
  text-align: right;
}

/* Dual-handle depth slider. Two native <input type="range"> are stacked on
   top of each other (pointer-events disabled on the track, re-enabled on the
   thumb only) so each handle is independently draggable. A static track and
   a "range fill" between the handles sit underneath. */
.fd-stats-depth-slider {
  position: relative;
  height: 32px;
  display: flex;
  align-items: center;
}
.fd-stats-depth-slider[data-disabled="true"] { opacity: 0.5; }
.fd-stats-depth-track {
  position: absolute;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--graiph-bg-tertiary);
  border-radius: 2px;
}
.fd-stats-depth-range {
  position: absolute;
  height: 4px;
  background: var(--graiph-accent);
  border-radius: 2px;
  pointer-events: none;
}
.fd-stats-depth-slider input[type="range"] {
  position: absolute;
  left: 0;
  right: 0;
  width: 100%;
  height: 32px;
  background: transparent;
  -webkit-appearance: none;
  appearance: none;
  pointer-events: none;
  margin: 0;
}
.fd-stats-depth-slider input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--graiph-accent);
  border: 2px solid var(--graiph-bg-primary);
  cursor: pointer;
  pointer-events: auto;
}
.fd-stats-depth-slider input[type="range"]::-moz-range-thumb {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--graiph-accent);
  border: 2px solid var(--graiph-bg-primary);
  cursor: pointer;
  pointer-events: auto;
}
.fd-stats-depth-slider input[type="range"]::-webkit-slider-runnable-track {
  background: transparent;
}
.fd-stats-depth-slider input[type="range"]::-moz-range-track {
  background: transparent;
}

/* Filter chips (classes + "has parameter"). */
.fd-stats-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.fd-stats-chip {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 0 14px;
  border-radius: 18px;
  background: var(--graiph-bg-tertiary);
  border: 1px solid var(--graiph-border);
  color: var(--graiph-text-primary);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
}
.fd-stats-chip[data-active="true"] {
  background: var(--graiph-accent-muted);
  border-color: var(--graiph-accent);
  color: var(--graiph-accent-text);
}
.fd-stats-chip:active { transform: scale(0.97); }

/* T3.3 — Stats mode chart grid lives below the filter bar. The body becomes
   a vertical, scrollable column once charts arrive; the empty-state message
   keeps the placeholder feel before the first aggregation lands. */
.fd-stats-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 12px;
  min-height: 200px;
  overflow-y: auto;
}
.fd-stats-summary {
  font-size: 13px;
  color: var(--graiph-text-secondary);
  background: var(--graiph-bg-surface);
  border: 1px solid var(--graiph-border);
  border-radius: var(--graiph-radius-md);
  padding: 12px 16px;
}
.fd-stats-summary strong {
  color: var(--graiph-text-primary);
  font-variant-numeric: tabular-nums;
}
.fd-stats-charts {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.fd-stats-class-section {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.fd-stats-class-heading {
  margin: 0;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--graiph-text-primary);
}
.fd-stats-class-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
/* Pack more charts per row as the viewport widens (denser = more compact). */
@media (min-width: 1200px) {
  .fd-stats-class-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1700px) {
  .fd-stats-class-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .fd-stats-class-grid {
    grid-template-columns: 1fr;
  }
}
.fd-stats-chart-count {
  margin-left: 6px;
  font-size: 11px;
  font-weight: 500;
  color: var(--graiph-text-secondary);
  font-variant-numeric: tabular-nums;
}
.fd-stats-empty {
  margin: 16px auto;
  font-size: 13px;
  color: var(--graiph-text-secondary);
}
.fd-stats-prompt {
  margin: 16px auto;
  font-size: 13px;
  color: var(--graiph-text-secondary);
  text-align: center;
}
.fd-stats-prompt strong {
  color: var(--graiph-accent-text);
  font-weight: 600;
}
.fd-stats-run-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 36px;
  padding: 0 18px;
  background: var(--graiph-accent);
  color: var(--graiph-bg-primary);
  border: 0;
  border-radius: var(--graiph-radius-md);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 120ms ease;
}
.fd-stats-run-btn:hover { background: var(--graiph-accent-hover); }
.fd-stats-run-btn:disabled {
  background: var(--graiph-bg-elevated);
  color: var(--graiph-text-secondary);
  cursor: wait;
}
.fd-stats-run-btn[data-state="stale"] {
  background: var(--graiph-alert-warning);
  color: var(--graiph-bg-primary);
}

/* T3.4 — active sub-filter chip. Sits between the summary block and the
   chart grid; only visible while a bar-click filter is in effect. */
.fd-stats-active-filter {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background: var(--graiph-bg-surface);
  border: 1px solid var(--graiph-accent);
  border-radius: var(--graiph-radius-md);
  font-size: 12px;
  color: var(--graiph-text-primary);
}
.fd-stats-active-filter[hidden] { display: none; }
.fd-stats-active-filter-text { flex: 1; }
.fd-stats-active-filter-text strong {
  color: var(--graiph-accent-text);
  font-weight: 600;
}
.fd-stats-active-filter-clear {
  background: transparent;
  border: 1px solid var(--graiph-border);
  color: var(--graiph-text-secondary);
  padding: 4px 10px;
  border-radius: var(--graiph-radius-sm);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: background 120ms ease, color 120ms ease;
}
.fd-stats-active-filter-clear:hover {
  background: var(--graiph-bg-elevated);
  color: var(--graiph-text-primary);
}

/* T3.4 — cuts depth strip. Histogram canvas showing where the filtered
   subset lives in the drillhole. Sits below the chart grid. */
.fd-stats-cuts {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 14px;
  background: var(--graiph-bg-surface);
  border: 1px solid var(--graiph-border);
  border-radius: var(--graiph-radius-md);
}
.fd-stats-cuts[hidden] { display: none; }
.fd-stats-cuts-header {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 12px;
}
.fd-stats-cuts-title {
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--graiph-text-primary);
}
.fd-stats-cuts-meta {
  color: var(--graiph-text-secondary);
  font-variant-numeric: tabular-nums;
}
.fd-stats-cuts-canvas-wrap {
  position: relative;
  height: 84px;
  padding-left: 28px;
}
.fd-stats-cuts-y-label {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%) rotate(-90deg);
  transform-origin: left center;
  font-size: 10px;
  color: var(--graiph-text-secondary);
  letter-spacing: 0.03em;
}
.fd-stats-cuts-canvas {
  width: 100%;
  height: 100%;
  display: block;
}
.fd-stats-cuts-axis {
  display: flex;
  justify-content: space-between;
  font-size: 10px;
  color: var(--graiph-text-secondary);
  font-variant-numeric: tabular-nums;
  padding-left: 28px;
}
.fd-stats-cuts-axis-mid { text-align: center; }
.fd-stats-cuts-axis-end { text-align: right; }

/* Mode dropdown (replaces the old segmented control). Leading icon + native
   select + chevron, styled to match the data-selection comboboxes. */
.fd-mode-select-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  margin: 0 auto;
}
.fd-mode-select-icon {
  position: absolute;
  left: 10px;
  width: 18px;
  height: 18px;
  pointer-events: none;
  color: var(--graiph-accent-text);
}
.fd-mode-select {
  appearance: none;
  -webkit-appearance: none;
  min-height: 40px;
  padding: 6px 34px 6px 36px;
  background: var(--graiph-bg-primary);
  border: 1px solid var(--graiph-border);
  border-radius: var(--graiph-radius-md);
  color: var(--graiph-text-primary);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
.fd-mode-select:focus {
  outline: none;
  border-color: var(--graiph-accent);
}
.fd-mode-select-arrow {
  position: absolute;
  right: 12px;
  pointer-events: none;
  color: var(--graiph-text-secondary);
}

/* ============ APP LAYOUT ============ */
.fd-app {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
}

.fd-header {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 64px;
  padding: 0 12px;
  background: var(--graiph-bg-secondary);
  border-bottom: var(--graiph-border-default);
  flex-shrink: 0;
  position: relative;
  z-index: 200;
}

.fd-header-back {
  display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px;
  border-radius: var(--graiph-radius-md);
  color: var(--graiph-text-primary);
  text-decoration: none;
  border: 1px solid var(--graiph-border);
}
.fd-header-back svg { pointer-events: none; width: 20px; height: 20px; }

.fd-header-title {
  flex: 0 1 auto;
  min-width: 0;
  max-width: 240px;
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}
.fd-header-title h1 {
  margin: 0;
  font-size: 17px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.fd-header-context {
  font-size: 13px;
  color: var(--graiph-text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.fd-header-actions {
  display: flex;
  gap: 8px;
}

/* ============ DATA SELECTION (inside fd-header) ============ */
.fd-data-select {
  justify-content: flex-start;
}
/* Tray trigger inherits gh-btn sizing; match the compact combobox height */
.fd-data-select .gh-tray-multi-panel {
  z-index: 300;
  min-width: 260px;
  max-width: 300px;
}

/* Stable trigger width so it never resizes when the selection changes */
.fd-data-select #fdTrayDropdownTrigger {
  min-width: 150px;
  max-width: 150px;
  justify-content: space-between;
}
.fd-data-select #fdTrayDropdownLabel {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---- Tray option rows ---- */
.fd-data-select .gh-tray-multi-list {
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.fd-tray-opt {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 8px;
  border-radius: var(--graiph-radius-sm);
  cursor: pointer;
  border: 1px solid transparent;
  transition: background 120ms ease, border-color 120ms ease;
}
.fd-tray-opt:hover {
  background: var(--graiph-bg-tertiary);
}
.fd-tray-opt.is-selected {
  background: var(--graiph-accent-muted);
  border-color: rgba(51, 204, 102, 0.35);
}
.fd-tray-opt-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.25;
}
.fd-tray-opt-depth {
  font-size: 12px;
  font-weight: 600;
  color: var(--graiph-text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.fd-tray-opt-name {
  font-size: 10.5px;
  color: var(--graiph-text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-variant-numeric: tabular-nums;
}

/* ---- Custom checkbox ---- */
.fd-tray-cb {
  appearance: none;
  -webkit-appearance: none;
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  margin: 0;
  border: 1.5px solid var(--graiph-border-hover);
  border-radius: var(--graiph-radius-sm);
  background: var(--graiph-bg-secondary);
  cursor: pointer;
  position: relative;
  transition: background 120ms ease, border-color 120ms ease;
}
.fd-tray-cb:hover {
  border-color: var(--graiph-accent);
}
.fd-tray-cb:checked {
  background: var(--graiph-accent);
  border-color: var(--graiph-accent);
}
.fd-tray-cb:checked::after {
  content: "";
  position: absolute;
  left: 4.5px;
  top: 1px;
  width: 4px;
  height: 8px;
  border: solid var(--graiph-bg-primary);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.fd-tray-cb:focus-visible {
  outline: 2px solid var(--graiph-border-focus);
  outline-offset: 1px;
}

/* ============ TRAY STACK ============ */
.fd-tray-stack {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 16px;
  background: var(--graiph-bg-primary);
  -webkit-overflow-scrolling: touch;
}

.fd-tray-card {
  background: var(--graiph-bg-surface);
  border: var(--graiph-border-default);
  border-radius: var(--graiph-radius-lg);
  margin-bottom: 16px;
  overflow: hidden;
}

/* Overview rail: thin small-res thumbnail column on the left edge. Absolutely
   positioned inside .fd-app; its `top` is synced to the tray stack in JS. */
.fd-overview-rail {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 84px;
  z-index: 120;
  display: flex;
  flex-direction: column;
  /* No gap between trays: the gutters within a tray and consecutive trays butt
     together so the whole drillhole reads as one continuous core column. */
  gap: 0;
  padding: 8px 6px;
  overflow-y: auto;
  overflow-x: hidden;
  background: var(--graiph-bg-secondary);
  border-right: var(--graiph-border-default);
  -webkit-overflow-scrolling: touch;
}
.fd-overview-rail[hidden] { display: none; }

.fd-ov-item {
  display: block;
  padding: 0;
  /* Outline (not border/padding) for the active highlight so a selection never
     shifts the continuous column. */
  outline: 2px solid transparent;
  outline-offset: -2px;
  border-radius: var(--graiph-radius-sm);
  background: transparent;
  cursor: pointer;
}
.fd-ov-item.is-active { outline-color: var(--graiph-accent); }

.fd-ov-thumb {
  width: 100%;
  height: auto;
  display: block;
  background: #000;
  pointer-events: none;
}

.fd-ov-empty {
  color: var(--graiph-text-secondary);
  font-size: 11px;
  text-align: center;
  margin: 8px 0;
}

/* When the overview rail is open, inset the tray stack so its content (the core
   image) sits to the RIGHT of the rail instead of under it — the image layout
   adapts (canvas is width:100% of the content box, so it reflows narrower). */
body.fd-overview-open .fd-tray-stack {
  padding-left: 100px; /* rail width (84) + breathing room */
}

/* Image-loading performance panel — tablet-readable, dense, bottom-right. */
.fd-perf-panel {
  position: absolute;
  right: 12px;
  bottom: 12px;
  width: min(420px, calc(100vw - 24px));
  max-height: 60vh;
  z-index: 180;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--graiph-bg-secondary);
  border: var(--graiph-border-default);
  border-radius: var(--graiph-radius-md);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.45);
  font-variant-numeric: tabular-nums;
}
.fd-perf-panel[hidden] { display: none; }

.fd-perf-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 10px;
  background: var(--graiph-bg-tertiary);
  border-bottom: var(--graiph-border-default);
}
.fd-perf-title { font-weight: 700; font-size: 13px; }
.fd-perf-actions { display: flex; gap: 6px; }
.fd-perf-btn {
  font-size: 12px;
  padding: 4px 8px;
  border-radius: var(--graiph-radius-sm);
  border: 1px solid var(--graiph-border-default);
  background: var(--graiph-bg-surface);
  color: var(--graiph-text-primary);
  cursor: pointer;
}
.fd-perf-close { padding: 4px 8px; }

.fd-perf-stackline {
  padding: 6px 10px;
  font-size: 12px;
  color: var(--graiph-text-secondary);
  border-bottom: var(--graiph-border-default);
}
.fd-perf-stack { color: var(--graiph-accent-text); font-weight: 600; }

.fd-perf-tables { overflow-y: auto; padding: 8px 10px; }
.fd-perf-section h4 {
  margin: 8px 0 4px;
  font-size: 12px;
  color: var(--graiph-text-secondary);
  font-weight: 600;
}
.fd-perf-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.fd-perf-table th, .fd-perf-table td {
  padding: 3px 6px;
  text-align: right;
  border-bottom: 1px solid var(--graiph-border-default);
}
.fd-perf-table th:first-child, .fd-perf-table td:first-child { text-align: left; }
.fd-perf-k { font-weight: 600; }
.fd-perf-empty { color: var(--graiph-text-secondary); text-align: center; }

/* Description table panel — right side, closable, dense scannable table. */
.fd-table-panel {
  position: absolute;
  top: 0; /* JS aligns top with the tray stack when opened */
  right: 0;
  bottom: 0;
  width: min(440px, 46vw);
  min-width: 300px;
  z-index: 170;
  display: flex;
  flex-direction: column;
  background: var(--graiph-bg-secondary);
  border-left: var(--graiph-border-default);
  box-shadow: -8px 0 28px rgba(0, 0, 0, 0.4);
}
.fd-table-panel[hidden] { display: none; }

.fd-table-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: var(--graiph-bg-tertiary);
  border-bottom: var(--graiph-border-default);
  flex-shrink: 0;
}
.fd-table-title { font-weight: 700; font-size: 15px; }
.fd-table-scope { color: var(--graiph-text-secondary); font-size: 12px; flex: 1; }
.fd-table-close { margin-left: auto; }

.fd-table-tabs {
  display: flex;
  gap: 4px;
  padding: 8px 10px;
  overflow-x: auto;
  border-bottom: var(--graiph-border-default);
  flex-shrink: 0;
}
.fd-table-tab {
  white-space: nowrap;
  font-size: 13px;
  padding: 5px 10px;
  border-radius: var(--graiph-radius-sm);
  border: 1px solid var(--graiph-border-default);
  background: var(--graiph-bg-surface);
  color: var(--graiph-text-primary);
  cursor: pointer;
}
.fd-table-tab.is-active {
  border-color: var(--graiph-accent);
  color: var(--graiph-accent-text);
}
.fd-table-count {
  font-size: 11px;
  color: var(--graiph-text-secondary);
  margin-left: 4px;
}

.fd-table-body { flex: 1; overflow: auto; }
.fd-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.fd-table thead th {
  position: sticky;
  top: 0;
  background: var(--graiph-bg-tertiary);
  text-align: left;
  font-weight: 600;
  padding: 8px 10px;
  border-bottom: var(--graiph-border-default);
  z-index: 1;
}
.fd-table td {
  padding: 6px 10px;
  border-bottom: 1px solid var(--graiph-border-default);
  vertical-align: top;
}
.fd-table-depth {
  font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--graiph-text-secondary);
}
/* Clickable From/To/Depth — jumps the stack to that depth. */
button.fd-table-nav {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  color: var(--graiph-accent-text);
  font: inherit;
  font-variant-numeric: tabular-nums;
}
button.fd-table-nav:hover { text-decoration: underline; }
.fd-table-empty {
  color: var(--graiph-text-secondary);
  text-align: center;
  padding: 16px;
}

.fd-tray-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: var(--graiph-bg-tertiary);
  font-size: 14px;
  font-weight: 600;
}
.fd-tray-card-header .fd-tray-meta {
  color: var(--graiph-text-secondary);
  font-weight: 400;
  font-size: 12px;
}

.fd-tray-canvas-wrap {
  position: relative;
  width: 100%;
  background: #000;
  touch-action: pan-y;
  transform-origin: 0 0;
  will-change: transform;
  backface-visibility: hidden;
}
.fd-tray-canvas-wrap canvas {
  display: block;
  width: 100%;
  height: auto;
  touch-action: pan-y;
  /* Same "comes into focus" reveal as the finding thumbnails. paintTray()
     adds `.is-loaded` after renderTray completes, transitioning from
     blurred-and-transparent to crisp. */
  opacity: 0;
  filter: blur(12px);
  transform: scale(1.02);
  transform-origin: center center;
  will-change: opacity, filter, transform;
  transition:
    opacity 420ms ease,
    filter 480ms cubic-bezier(.22, 1, .36, 1),
    transform 480ms cubic-bezier(.22, 1, .36, 1);
}
.fd-tray-canvas-wrap canvas.is-loaded {
  opacity: 1;
  filter: blur(0);
  transform: scale(1);
}
/* Skeleton state — drawn until paintTray() resolves and strips .is-loading.
   The aspect-ratio is set inline on the wrap (image_width/image_height) so
   the card reserves its final size up front; the stack can't shove around
   as each tray paints. */
.fd-tray-canvas-wrap.is-loading {
  background:
    linear-gradient(
      90deg,
      rgba(255,255,255,0.03) 0%,
      rgba(255,255,255,0.08) 50%,
      rgba(255,255,255,0.03) 100%
    ),
    #000;
  background-size: 200% 100%, 100% 100%;
  animation: fd-skeleton-shimmer 1.4s linear infinite;
}
.fd-tray-canvas-wrap.is-loading canvas {
  opacity: 0;
}

.fd-loading-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 80px 20px;
  color: var(--graiph-text-secondary);
  text-align: center;
}
.fd-loading-state svg[data-lucide] {
  width: 40px; height: 40px;
  margin-bottom: 12px;
  animation: fd-spin 1.2s linear infinite;
}
@keyframes fd-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* ============ DESCRIPTION PANEL ============
   Bottom sheet on portrait / narrow viewports.
   Right-docked drawer on tablet landscape (≥900px landscape).
   Class name kept as .fd-bottom-sheet for HTML stability. */
.fd-bottom-sheet {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 800;
  background: var(--graiph-bg-surface);
  border-top: 1px solid var(--graiph-border);
  border-top-left-radius: 16px;
  border-top-right-radius: 16px;
  box-shadow: var(--graiph-shadow-lg);
  max-height: 50vh;
  display: flex;
  flex-direction: column;
  transform: translateY(0);
  transition: transform 0.34s cubic-bezier(0.4, 0, 0.2, 1), max-height 0.34s cubic-bezier(0.4, 0, 0.2, 1);
}
.fd-bottom-sheet[hidden] {
  display: flex;
  transform: translateY(100%);
  pointer-events: none;
}
/* Section form: no header row (depth title + ✕) — it duplicated the stepper
   readout and covered its buttons. The stepper readout toggles the sheet. */
.fd-bottom-sheet.fd-sheet--headerless .fd-sheet-header { display: none; }
/* Body clears the floating ✕ (top-right) that replaces the hidden header. */
.fd-bottom-sheet.fd-sheet--headerless .fd-sheet-body { padding-top: 34px; }

/* Floating ✕ for the headerless (Tramos) sheet — top-right of the panel. Hidden
   whenever the normal header (with its own ✕) is shown. */
.fd-sheet-close-floating { display: none; }
.fd-bottom-sheet.fd-sheet--headerless .fd-sheet-close-floating {
  display: inline-flex;
  position: absolute;
  top: 6px;
  right: 8px;
  z-index: 3;
}

/* Right-docked drawer in tablet landscape — starts below the 64px header */
@media (min-width: 900px) and (orientation: landscape) {
  .fd-bottom-sheet {
    left: auto;
    right: 0;
    top: 64px;
    bottom: 0;
    /* Width is user-resizable via the left-edge handle; --fd-sheet-w persists
       the dragged size. */
    width: var(--fd-sheet-w, 340px);
    min-width: 320px;
    max-width: 80vw;
    max-height: none;
    border-top: none;
    border-left: 1px solid var(--graiph-border);
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    transform: translateX(0);
    transition: transform 0.34s cubic-bezier(0.4, 0, 0.2, 1);
  }
  .fd-bottom-sheet[hidden] {
    transform: translateX(100%);
  }
  /* Shrink the image zone so the right-docked panel doesn't cover it. The
     margin eases in sync with the panel slide for a soft open/close. */
  .fd-tray-stack {
    transition: margin-right 0.34s cubic-bezier(0.4, 0, 0.2, 1);
  }
  body[data-sheet-open] .fd-tray-stack {
    margin-right: var(--fd-sheet-w, 340px);
  }
  .fd-sheet-handle { display: none; }
  /* Left-edge drag handle to widen/narrow the panel. */
  .fd-sheet-resizer {
    display: block;
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 18px;
    margin-left: -9px;
    cursor: ew-resize;
    z-index: 3;
    touch-action: none;
  }
  /* Grip chip straddling the panel edge — the visible "drag me" affordance. */
  .fd-sheet-resizer-grip {
    position: absolute;
    left: 2px; top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 16px; height: 46px;
    border: 1px solid var(--graiph-border);
    border-radius: 8px;
    background: var(--graiph-bg-surface);
    color: var(--graiph-text-muted);
    box-shadow: var(--graiph-shadow-sm);
    pointer-events: none;
    transition: color 0.12s ease, border-color 0.12s ease;
  }
  .fd-sheet-resizer-grip svg { width: 12px; height: 16px; }
  .fd-sheet-resizer:hover .fd-sheet-resizer-grip,
  .fd-bottom-sheet[data-resizing="true"] .fd-sheet-resizer-grip {
    color: var(--graiph-accent-text);
    border-color: var(--graiph-accent);
  }
  .fd-bottom-sheet[data-resizing="true"] { transition: none; user-select: none; }
}

/* Hidden unless the right-docked landscape layout is active. */
.fd-sheet-resizer { display: none; }

/* Keyboard-aware shrink (any layout) */
.fd-bottom-sheet[data-keyboard="true"] {
  max-height: 35vh;
}

.fd-sheet-handle {
  width: 40px; height: 4px;
  background: var(--graiph-border-hover);
  border-radius: 2px;
  margin: 10px auto 0;
}

.fd-sheet-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: var(--graiph-border-subtle);
}
.fd-sheet-header h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
}

.fd-sheet-body {
  flex: 1;
  overflow-y: auto;
  /* No top padding: a sticky tab nav pins at top:0, and container top padding
     would leave a gap where scrolled content peeks above it. Top spacing is
     restored via .fd-form-readout instead. */
  padding: 0 16px 16px;
  -webkit-overflow-scrolling: touch;
}

.fd-sheet-footer {
  display: flex;
  /* Round-2 H: three buttons don't fit one row at sheet width — "Tramo listo"
     wraps to its own full-width second row (see .fd-section-done). */
  flex-wrap: wrap;
  gap: 12px;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  border-top: var(--graiph-border-subtle);
}
.fd-sheet-footer .fd-btn { flex: 1; height: 44px; } /* 44px = minimum touch target */
.fd-sheet-footer .fd-btn-ghost { flex: 0 0 auto; }

/* ============ SELECTION THUMBNAIL ============ */
.fd-form-thumb {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 12px auto 16px;
  border-radius: var(--graiph-radius-md);
  border: 1px solid var(--graiph-border);
  background: #000;
  box-shadow: var(--graiph-shadow-sm);
}

/* Sheet body shouldn't allow horizontal overflow from anything inside */
.fd-sheet-body {
  overflow-x: hidden;
}
.fd-form-readout {
  word-break: break-word;
  padding-top: 16px;   /* restores the sheet-body top spacing (see padding note) */
}

/* ============ EXCEL-SHEET TABS (El Pimentón) ============ */
/* Horizontally scrollable tab bar pinned to the top of the sheet body.
   Editable input sheets render as `data` tabs; read-only glossary sheets use
   the green `glossary` accent (mirrors the data-structure spec's pills). */
/* Sticky nav row: prev/next arrows flank a horizontally-scrollable tab track.
   The row spans the full sheet width (negative side margins cancel the body's
   side padding) and is opaque, so form content scrolls cleanly underneath. */
.fd-sheet-tabnav {
  display: flex;
  align-items: center;
  gap: 4px;
  position: sticky;
  top: 0;
  z-index: 10;
  margin: 0 -16px 14px;
  padding: 12px 12px 10px;
  background: var(--graiph-bg-surface);
  border-bottom: var(--graiph-border-subtle);
}
.fd-sheet-tabbar {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1;
  min-width: 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;          /* Firefox: hide scrollbar */
  -ms-overflow-style: none;       /* legacy Edge */
}
.fd-sheet-tabbar::-webkit-scrollbar { display: none; }

.fd-tabnav-arrow {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 32px;
  border: 1px solid var(--graiph-border);
  border-radius: var(--graiph-radius-sm);
  background: var(--graiph-bg-tertiary);
  color: var(--graiph-text-secondary);
  cursor: pointer;
}
.fd-tabnav-arrow[hidden] { display: none; }
.fd-tabnav-arrow:hover { color: var(--graiph-text-primary); border-color: var(--graiph-border-hover); }
.fd-tabnav-arrow svg { width: 16px; height: 16px; pointer-events: none; }

/* Vertical rule separating editable (data) tabs from read-only glossaries. */
.fd-sheet-tab-divider {
  flex: 0 0 auto;
  width: 1px;
  align-self: stretch;
  margin: 3px 4px;
  background: var(--graiph-border);
}

.fd-sheet-tab {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  white-space: nowrap;
  padding: 8px 14px;
  border: 1px solid var(--graiph-border);
  border-radius: 999px;
  background: var(--graiph-bg-tertiary);
  color: var(--graiph-text-secondary);
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}
.fd-sheet-tab:hover { color: var(--graiph-text-primary); }
.fd-sheet-tab .fd-sheet-tab-icon { display: block; width: 13px; height: 13px; flex: 0 0 auto; pointer-events: none; opacity: 0.8; }

/* Active editable tab → accent green (design-system active state). Dark ink
   on green keeps contrast in both light and dark themes. */
.fd-sheet-tab.active {
  background: var(--graiph-accent, #33CC66);
  color: #00001E;
  border-color: var(--graiph-accent, #33CC66);
  font-weight: 700;
}

/* Glossary tabs read as reference (info), not data entry — ghost at rest,
   info-blue when active, with a book glyph. */
.fd-sheet-tab[data-role="glossary"] {
  background: transparent;
  color: var(--graiph-text-muted);
  border-style: dashed;
}
.fd-sheet-tab[data-role="glossary"].active {
  background: var(--alert-info, #2196F3);
  color: #fff;
  border-color: var(--alert-info, #2196F3);
  border-style: solid;
}
.fd-sheet-tab[data-role="glossary"].active .fd-sheet-tab-icon { opacity: 1; }

.fd-sheet-pane { display: none; }
.fd-sheet-pane.active { display: block; }

/* ---- Read-only glossary panes ---- */
.fd-gloss-group { margin-bottom: 20px; }
.fd-gloss-title {
  margin: 0 0 8px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--graiph-text-primary);
  border-bottom: 1px solid var(--graiph-border);
  padding-bottom: 5px;
}
.fd-gloss-list { list-style: none; padding: 0; margin: 0; }
.fd-gloss-item { padding: 5px 0; border-bottom: 1px solid var(--graiph-bg-tertiary); }
.fd-gloss-row { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.fd-gloss-code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  font-weight: 700;
  background: var(--graiph-bg-tertiary);
  padding: 1px 7px;
  border-radius: 3px;
  color: var(--graiph-text-primary);
}
.fd-gloss-name { font-size: 13px; color: var(--graiph-text-secondary); }
.fd-gloss-stage {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--graiph-text-muted);
}
.fd-gloss-desc {
  margin: 5px 0 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--graiph-text-secondary);
}

/* ============ FORM FIELDS (PILL SELECTORS) ============ */
.fd-form-section-header {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--graiph-text-primary);
  background: var(--graiph-bg-tertiary);
  padding: 6px 10px;
  border-radius: var(--graiph-radius-sm);
  margin: 8px 0 14px;
}
.fd-form-field {
  margin-bottom: 20px;
}
/* Clickable field title (T1.6). Tap to paint per-region color bands on the
   ROI strip thumbnail keyed to this field. Only one field is in viz state
   at a time — see openDescriptionSheet's onFieldVizClick handler. */
.fd-form-field-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--graiph-text-secondary);
  margin: 0 0 8px;
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
}
.fd-form-field-label:hover {
  color: var(--graiph-text-primary);
  text-decoration: underline dashed currentColor;
  text-underline-offset: 3px;
}
.fd-form-field-label.is-viz {
  color: var(--graiph-accent-text);
  text-decoration: underline dashed currentColor;
  text-underline-offset: 3px;
}
.fd-form-field-label.is-viz::after {
  content: "•";
  color: var(--graiph-accent-text);
  font-size: 16px;
  line-height: 1;
}

.fd-pill-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.fd-pill {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 16px;
  border-radius: 22px;
  background: var(--graiph-bg-tertiary);
  border: 1px solid var(--graiph-border);
  color: var(--graiph-text-primary);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
}
.fd-pill[data-selected="true"] {
  background: var(--graiph-accent-muted);
  border-color: var(--graiph-accent);
  color: var(--graiph-accent-text);
}
.fd-pill:active { transform: scale(0.97); }

/* Options past the per-field cap are hidden until "+N más" is tapped. */
.fd-pill-hidden { display: none; }
.fd-pill-expand {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 16px;
  border-radius: 22px;
  background: transparent;
  border: 1px dashed var(--graiph-border-hover);
  color: var(--graiph-text-secondary);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.fd-pill-expand:hover { color: var(--graiph-text-primary); border-color: var(--graiph-accent); }

/* ---- Repeatable field group (add-on-demand, e.g. Alteración) ---- */
.fd-repeat-group { margin-bottom: 20px; }
.fd-repeat-entry {
  border: 1px solid var(--graiph-border);
  border-radius: var(--graiph-radius-md);
  padding: 12px;
  margin-bottom: 10px;
}
.fd-repeat-entry[hidden] { display: none; }
.fd-repeat-entry .fd-form-field { margin-bottom: 14px; }
.fd-repeat-entry .fd-form-field:last-child { margin-bottom: 0; }
.fd-repeat-dependent[hidden] { display: none; }
.fd-repeat-entry-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.fd-repeat-entry-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--graiph-text-secondary);
}

/* Mineralization matrix (renderMatrix): a dense rows × cols grid of number
   cells (e.g. El Pimentón's Sulf Cu + Py / Ox Fe). The group caption is the
   preceding .fd-form-section-header. Horizontally scrollable so a wide grid
   never forces the sheet body to scroll sideways on a tablet. */
.fd-matrix { margin-bottom: 20px; }
.fd-matrix-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.fd-matrix-table {
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
}
.fd-matrix-table th {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--graiph-text-secondary);
  padding: 4px 6px;
  text-align: center;
  white-space: nowrap;
}
.fd-matrix-table th[scope="row"] {
  text-align: right;
  position: sticky;
  left: 0;
  background: var(--graiph-bg-secondary, #fafafa);
  z-index: 1;
}
.fd-matrix-table td {
  padding: 2px;
}
/* Bare number cell: no per-cell label header (row/col headers carry meaning),
   so it stays dense. Still a .fd-form-field so readForm reads it by key. */
.fd-matrix-cell { margin-bottom: 0; }
.fd-matrix-cell .fd-text-input {
  height: 40px;
  min-width: 56px;
  padding: 8px 6px;
  text-align: center;
  font-size: 15px;
}
.fd-repeat-remove {
  display: inline-flex;
  padding: 6px;
  border: none;
  border-radius: 8px;
  background: none;
  color: var(--graiph-text-muted);
  cursor: pointer;
}
.fd-repeat-remove:hover { color: var(--alert-error, #E53935); background: var(--graiph-bg-tertiary); }
.fd-repeat-remove svg { width: 16px; height: 16px; pointer-events: none; }
.fd-repeat-add {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 18px;
  border-radius: 22px;
  border: 1px dashed var(--graiph-accent);
  background: transparent;
  color: var(--graiph-accent-text);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
.fd-repeat-add:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  border-color: var(--graiph-border);
  color: var(--graiph-text-muted);
}

.fd-text-input,
.fd-textarea {
  width: 100%;
  background: var(--graiph-bg-tertiary);
  border: 1px solid var(--graiph-border);
  border-radius: var(--graiph-radius-md);
  color: var(--graiph-text-primary);
  font-family: inherit;
  font-size: 16px;
  padding: 12px 14px;
  outline: none;
}
.fd-text-input { height: 48px; }
.fd-textarea {
  resize: vertical;
  min-height: 96px;
}
.fd-text-input:focus,
.fd-textarea:focus { border-color: var(--graiph-border-focus); }

/* Enum parameter control: a native <select> styled to match the text inputs.
   appearance:none + an inline chevron (neutral gray, legible on both themes)
   keeps the control identical light/dark. */
.fd-select {
  width: 100%;
  height: 48px;
  background: var(--graiph-bg-tertiary);
  border: 1px solid var(--graiph-border);
  border-radius: var(--graiph-radius-md);
  color: var(--graiph-text-primary);
  font-family: inherit;
  font-size: 16px;
  padding: 12px 40px 12px 14px;
  outline: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23888888' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
}
.fd-select:focus { border-color: var(--graiph-border-focus); }
.fd-select:disabled,
.fd-select.fd-input-readonly {
  opacity: 0.55;
  cursor: not-allowed;
}

/* Hide the native number spinners: they get bumped by an accidental scroll or
   tap. The value is typed or picked from the quick-pick chips instead (the JS
   also blurs the input on wheel). */
.fd-no-spin {
  -moz-appearance: textfield;
  appearance: textfield;
}
.fd-no-spin::-webkit-outer-spin-button,
.fd-no-spin::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* ── Styled combobox (client vocabulary + numeric suggestions) ──────────────
   A free-text input + a custom, fully-styled dropdown menu (the native
   <datalist> dropdown can't be themed). Focus keeps + selects the value and
   opens the full list; typing filters. A chevron marks it as a dropdown. */
.fd-combo { position: relative; }
.fd-combo-input {
  padding-right: 40px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23888888' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
}
.fd-combo-menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 60;
  max-height: 260px;
  overflow-y: auto;
  padding: 4px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: var(--graiph-bg-surface);
  border: 1px solid var(--graiph-border);
  border-radius: var(--graiph-radius-md);
  box-shadow: var(--graiph-shadow-lg);
  -webkit-overflow-scrolling: touch;
}
.fd-combo-menu[hidden] { display: none; }
.fd-combo-option {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  width: 100%;
  text-align: left;
  padding: 11px 12px;
  border: none;
  border-radius: var(--graiph-radius-sm);
  background: transparent;
  color: var(--graiph-text-primary);
  font-family: inherit;
  font-size: 15px;
  cursor: pointer;
}
.fd-combo-option[hidden] { display: none; }
.fd-combo-option:hover,
.fd-combo-option.is-active {
  background: var(--graiph-bg-tertiary);
}
.fd-combo-opt-val { font-weight: 600; }
.fd-combo-opt-desc {
  font-size: 12px;
  line-height: 1.35;
  color: var(--graiph-text-secondary);
}

.fd-form-readout {
  background: var(--graiph-bg-tertiary);
  border-radius: var(--graiph-radius-md);
  padding: 10px 14px;
  margin-bottom: 16px;
  font-size: 13px;
  color: var(--graiph-text-secondary);
}
.fd-form-readout strong { color: var(--graiph-text-primary); }

/* ============ CLASS PICKER ============ */
.fd-class-picker {
  position: fixed;
  inset: 0;
  z-index: 850;
  background: var(--graiph-overlay);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 1;
  transition: opacity 160ms ease, visibility 160ms ease;
}
.fd-class-picker[hidden] {
  display: flex;
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
}
.fd-class-picker-card {
  background: var(--graiph-bg-surface);
  border-radius: var(--graiph-radius-lg);
  padding: 20px;
  width: 100%;
  max-width: 480px;
  box-shadow: var(--graiph-shadow-lg);
  transform: scale(1);
  transition: transform 200ms cubic-bezier(.16, 1, .3, 1);
}
.fd-class-picker[hidden] .fd-class-picker-card {
  transform: scale(0.96);
}
.fd-class-picker-card h3 {
  margin: 0 0 16px;
  font-size: 16px;
  font-weight: 700;
}
.fd-class-picker-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 16px;
}
.fd-class-picker-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 60px;
  padding: 10px 14px;
  border-radius: var(--graiph-radius-md);
  background: var(--graiph-bg-tertiary);
  border: 1px solid var(--graiph-border);
  color: var(--graiph-text-primary);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  text-align: left;
}
.fd-class-picker-btn svg { width: 22px; height: 22px; color: var(--graiph-accent-text); flex-shrink: 0; }
.fd-class-picker-btn .fd-class-btn-sub {
  display: block;
  font-size: 12px;
  font-weight: 400;
  color: var(--graiph-text-secondary);
}
.fd-class-picker-card .fd-btn { width: 100%; }

/* ============ MODAL (SIMILARITY) ============ */
/* The UA stylesheet hides closed <dialog> via `dialog:not([open]) { display: none }`.
   When we set `display: flex` on `.fd-modal`, our author rule beat that and
   the dialog stayed in the layout when closed — invisible but still
   intercepting every click on the page. Restore the hide-when-closed
   behavior explicitly so the flex layout only applies while open. */
.fd-modal:not([open]) {
  display: none;
}
.fd-modal {
  border: none;
  padding: 0;
  background: var(--graiph-bg-surface);
  color: var(--graiph-text-primary);
  width: 96vw;
  max-width: 1800px;
  height: 94vh;
  border-radius: var(--graiph-radius-lg);
  box-shadow: var(--graiph-shadow-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  /* Smooth open / close. `display` in the transition list keeps the dialog
     in the layout during the fade-out frame; `@starting-style` defines the
     pre-open state so showModal() animates IN, not just out. */
  opacity: 1;
  transform: scale(1);
  transition:
    opacity 180ms ease,
    transform 180ms cubic-bezier(.16, 1, .3, 1),
    overlay 180ms ease allow-discrete,
    display 180ms ease allow-discrete;
}
.fd-modal:not([open]) {
  opacity: 0;
  transform: scale(0.97);
}
@starting-style {
  .fd-modal[open] {
    opacity: 0;
    transform: scale(0.97);
  }
}
.fd-modal::backdrop {
  background: var(--graiph-overlay);
  opacity: 1;
  transition:
    opacity 180ms ease,
    overlay 180ms ease allow-discrete,
    display 180ms ease allow-discrete;
}
.fd-modal:not([open])::backdrop {
  opacity: 0;
}
@starting-style {
  .fd-modal[open]::backdrop {
    opacity: 0;
  }
}
.fd-modal-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  border-bottom: var(--graiph-border-default);
  background: var(--graiph-bg-tertiary);
}
.fd-modal-header h2 {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  display: flex; align-items: center; gap: 8px;
  flex: 0 0 auto;
}
.fd-modal-header h2 svg { width: 18px; height: 18px; }
.fd-modal-header > .fd-icon-btn { margin-left: auto; flex: 0 0 auto; }
.fd-modal-header-thumb {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  padding: 2px;
  background: #000;
  border: 1px solid var(--graiph-border);
  border-radius: var(--graiph-radius-sm);
  cursor: pointer;
  flex: 0 0 auto;
  overflow: hidden;
}
.fd-modal-header-thumb:active { transform: scale(0.97); }
.fd-modal-header-thumb canvas {
  display: block;
  height: 100%;
  width: auto;
  max-width: 200px;
}
.fd-modal-header-thumb[hidden] { display: none; }

/* ============================================================
   T4.9 — Similarity modal target preview strip
   Sits between .fd-modal-header and .fd-modal-body. Shows the
   ~80 px tall target image on the left, metadata chips on the
   right, and a collapse toggle anchored top-right. Collapsing
   slides the body to max-height 0 while keeping the toggle row
   visible so the user can re-open the strip.
   ============================================================ */
.fd-modal-target-strip {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 10px 16px 10px 16px;
  background: var(--graiph-bg-secondary);
  border-bottom: 1px solid var(--graiph-border);
  flex: 0 0 auto;
}
.fd-modal-target-strip[hidden] { display: none; }
.fd-modal-target-strip-thumb {
  flex: 0 0 auto;
  background: #000;
  border: 1px solid var(--graiph-accent);
  border-radius: var(--graiph-radius-sm);
  padding: 2px;
  max-width: 50%;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.fd-modal-target-strip-thumb canvas {
  display: block;
  height: 80px;
  width: auto;
  max-width: 100%;
}
.fd-modal-target-strip-meta {
  flex: 1 1 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-content: flex-start;
  padding-right: 28px;
  min-width: 0;
}
.fd-modal-target-strip-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  background: var(--graiph-bg-primary);
  border: 1px solid var(--graiph-border);
  border-radius: 999px;
  font-size: 11px;
  line-height: 1.2;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.fd-modal-target-strip-chip[data-tone="accent"] {
  border-color: var(--graiph-accent);
}
.fd-modal-target-strip-chip[data-tone="muted"] {
  color: var(--graiph-text-secondary);
}
.fd-modal-target-strip-chip-key {
  color: var(--graiph-text-secondary);
  text-transform: uppercase;
  font-size: 10px;
  letter-spacing: 0.04em;
}
.fd-modal-target-strip-chip-value {
  color: var(--graiph-text-primary);
  font-weight: 600;
}
.fd-modal-target-strip-toggle {
  position: absolute;
  top: 6px;
  right: 8px;
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--graiph-border);
  border-radius: var(--graiph-radius-sm);
  color: var(--graiph-text-secondary);
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  padding: 0;
}
.fd-modal-target-strip-toggle:hover { color: var(--graiph-text-primary); }
.fd-modal-target-strip-toggle:active { transform: scale(0.95); }
/* Collapsed: hide image + metadata, keep the toggle row visible (parent
   padding shrinks so the strip collapses to a thin bar). */
.fd-modal-target-strip[data-collapsed="true"] .fd-modal-target-strip-thumb,
.fd-modal-target-strip[data-collapsed="true"] .fd-modal-target-strip-meta {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  pointer-events: none;
  margin: 0;
  padding: 0;
  border: 0;
}
.fd-modal-target-strip[data-collapsed="true"] {
  padding-top: 4px;
  padding-bottom: 4px;
  min-height: 26px;
  transition: padding 180ms ease;
}
.fd-modal-target-strip-thumb,
.fd-modal-target-strip-meta {
  transition: max-height 200ms ease, opacity 180ms ease;
  max-height: 240px;
  opacity: 1;
}

/* "All features / Color only / Reduced" selector — sits next to the target
   thumb in the modal header. Compact so it doesn't crowd the summary. */
.fd-modal-field-select {
  flex: 0 0 auto;
  height: 32px;
  padding: 0 28px 0 10px;
  background: var(--graiph-bg-tertiary);
  border: 1px solid var(--graiph-border);
  border-radius: var(--graiph-radius-sm);
  color: var(--graiph-text-primary);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--graiph-text-secondary) 50%),
                    linear-gradient(135deg, var(--graiph-text-secondary) 50%, transparent 50%);
  background-position: calc(100% - 14px) 13px, calc(100% - 9px) 13px;
  background-size: 5px 5px;
  background-repeat: no-repeat;
}
.fd-modal-field-select:focus { outline: 1px solid var(--graiph-border-focus); }
.fd-modal-body {
  position: relative;
  padding: 16px;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.fd-modal-split {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 16px;
}
.fd-modal-findings {
  min-width: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding-right: 6px;
  /* Establish a positioning context so sticky children stick to THIS panel,
     not the modal viewport. Keep the panel scrollable internally. */
  position: relative;
}
.fd-modal-side {
  min-width: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  border-left: 1px solid var(--graiph-border);
  padding-left: 16px;
  position: relative;
}
@media (max-width: 700px) {
  .fd-modal-split {
    grid-template-columns: 1fr;
  }
  .fd-modal-side {
    border-left: none;
    border-top: 1px solid var(--graiph-border);
    padding-left: 0;
    padding-top: 12px;
  }
}
/* Summary line now lives inline in the modal header — between the target
   thumb and the close button. Truncates if it gets long instead of pushing
   the close button off-screen. */
.fd-modal-summary {
  flex: 1 1 auto;
  font-size: 13px;
  color: var(--graiph-text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.fd-modal-summary strong { color: var(--graiph-text-primary); }
.fd-modal-thumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: flex-start;
  min-height: 240px;
  position: relative;
}
/* Centered spinner + message rendered into #fdModalThumbs while results
   are loading (see openSimilarityModalLoading in results-modal.js). */
.fd-modal-thumbs-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  min-height: 240px;
  padding: 40px 16px;
  color: var(--graiph-text-secondary);
  text-align: center;
  font-size: 13px;
}
.fd-modal-thumbs-loading .fd-modal-spinner {
  width: 22px;
  height: 22px;
  vertical-align: middle;
  margin: 0;
}
.fd-finding-card {
  position: relative;
  /* Always black behind the thumbnail so the fade-in shows black, not the
     theme background (which is light gray in the light theme). */
  background: #000;
  border: 1px solid var(--graiph-border);
  border-radius: var(--graiph-radius-md);
  overflow: hidden;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  min-width: 90px;
  /* Smooth transitions on every visual property that can change after the
     card mounts — width grows when the image's aspect-ratio resolves,
     opacity changes when a filter is applied. */
  transition:
    border-color 160ms ease,
    box-shadow 160ms ease,
    opacity 220ms ease,
    transform 160ms ease;
}
.fd-finding-card:hover {
  border-color: var(--graiph-accent);
}
.fd-finding-card.dimmed {
  opacity: 0.25;
}
.fd-finding-card.matched {
  border-color: var(--graiph-accent);
  box-shadow: 0 0 0 2px var(--graiph-accent);
}

.fd-findings-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  /* Pin header to top while the cards scroll underneath. The surface
     background covers the scrolling content so labels stay readable. */
  position: sticky;
  top: 0;
  z-index: 5;
  background: var(--graiph-bg-surface);
  padding: 8px 4px 10px;
  margin: 0 -4px 6px;
  border-bottom: 1px solid var(--graiph-border);
  backdrop-filter: blur(6px);
}
.fd-sort-control {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--graiph-text-secondary);
}
.fd-sort-select {
  background: var(--graiph-bg-tertiary);
  color: var(--graiph-text-primary);
  border: 1px solid var(--graiph-border);
  border-radius: var(--graiph-radius-sm);
  padding: 4px 8px;
  font-size: 12px;
  cursor: pointer;
}
.fd-sort-select:focus {
  outline: none;
  border-color: var(--graiph-accent);
}
.fd-filter-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 10px;
  background: var(--graiph-bg-tertiary);
  border: 1px solid var(--graiph-accent);
  border-radius: var(--graiph-radius-md);
  font-size: 12px;
  margin-bottom: 8px;
}
.fd-filter-banner[hidden] {
  display: none;
}
.fd-filter-clear {
  margin-left: auto;
  padding: 3px 10px;
  background: transparent;
  border: 1px solid var(--graiph-border);
  border-radius: var(--graiph-radius-sm);
  color: var(--graiph-text-primary);
  cursor: pointer;
  font-size: 11px;
}
.fd-filter-clear:hover {
  border-color: var(--graiph-accent);
}
.fd-finding-card-thumb {
  height: 90px;
  background: #000;
  overflow: hidden;
  display: block;
  position: relative;
  /* Aspect-ratio is set via inline style by renderObjectThumb once the
     natural image dims are known. Transitioning it makes the width grow
     smoothly from the 1:1 skeleton to the final shape. */
  transition: aspect-ratio 220ms cubic-bezier(.16, 1, .3, 1);
}
.fd-modal-spinner {
  display: inline-block;
  width: 14px;
  height: 14px;
  vertical-align: -3px;
  margin-right: 6px;
  border: 2px solid rgba(255,255,255,0.18);
  border-top-color: var(--graiph-accent);
  border-radius: 50%;
  animation: fd-modal-spin 0.7s linear infinite;
}
@keyframes fd-modal-spin {
  to { transform: rotate(360deg); }
}
.fd-finding-card-thumb-skeleton {
  aspect-ratio: 1 / 1;
  background:
    linear-gradient(
      90deg,
      rgba(255,255,255,0.04) 0%,
      rgba(255,255,255,0.10) 50%,
      rgba(255,255,255,0.04) 100%
    ),
    #000;
  background-size: 200% 100%, 100% 100%;
  animation: fd-skeleton-shimmer 1.2s linear infinite;
}
@keyframes fd-skeleton-shimmer {
  0%   { background-position: 100% 0, 0 0; }
  100% { background-position: -100% 0, 0 0; }
}
.fd-finding-card-thumb canvas,
.fd-finding-card-thumb img {
  height: 100%;
  width: 100%;
  object-fit: cover;
  display: block;
  /* Smooth "comes into focus" reveal: image starts blurred + scaled +
     transparent; once it decodes, `.is-loaded` sharpens, scales back, and
     fades to 1 over 380ms. Feels much less abrupt than a pure opacity flip.
     `will-change` keeps the GPU layer warm so the transition is fluid. */
  opacity: 0;
  filter: blur(10px);
  transform: scale(1.04);
  transform-origin: center center;
  will-change: opacity, filter, transform;
  transition:
    opacity 380ms ease,
    filter 380ms cubic-bezier(.22, 1, .36, 1),
    transform 420ms cubic-bezier(.22, 1, .36, 1);
}
.fd-finding-card-thumb img.is-loaded,
.fd-finding-card-thumb canvas.is-loaded {
  opacity: 1;
  filter: blur(0);
  transform: scale(1);
}
.fd-object-thumb-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 90px;
  height: 100%;
  background: repeating-linear-gradient(
    45deg,
    rgba(255,255,255,0.02),
    rgba(255,255,255,0.02) 8px,
    rgba(255,255,255,0.05) 8px,
    rgba(255,255,255,0.05) 16px
  );
}
.fd-finding-card-thumb.fd-object-thumb-placeholder {
  aspect-ratio: 1 / 1;
}
.fd-object-thumb-placeholder-inner {
  font-size: 10px;
  color: var(--graiph-text-secondary);
  text-align: center;
  padding: 4px 8px;
  word-break: break-all;
}
.fd-finding-card-meta {
  padding: 4px 6px;
  font-size: 10px;
  line-height: 1.3;
  color: var(--graiph-text-secondary);
  background: var(--graiph-bg-tertiary);
  border-top: 1px solid var(--graiph-border);
}
.fd-finding-card-meta strong {
  color: var(--graiph-text-primary);
  display: block;
  font-size: 11px;
}

.fd-modal-section-title {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--graiph-text-secondary);
  margin: 0 0 10px;
}
/* Stats/detail panel: section titles stay visible while the inner content
   (charts, lithology chips, composition strip) scrolls underneath. */
.fd-modal-side .fd-modal-section-title,
.fd-modal-side .fd-detail-header {
  position: sticky;
  top: 0;
  z-index: 4;
  background: var(--graiph-bg-surface);
  margin: 0;
  padding: 10px 0 8px;
  backdrop-filter: blur(6px);
}
.fd-modal-side .fd-modal-section-title + * {
  margin-top: 4px;
}

.fd-modal-charts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
}
.fd-chart-card {
  background: var(--graiph-bg-tertiary);
  border-radius: var(--graiph-radius-md);
  padding: 8px 10px;
  border: 1px solid var(--graiph-border);
}
.fd-chart-card h4 {
  margin: 0 0 4px;
  font-size: 12px;
  font-weight: 600;
}
.fd-chart-title-btn {
  cursor: pointer;
  user-select: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding-bottom: 2px;
  border-bottom: 1px dashed transparent;
}
.fd-chart-title-btn:hover {
  border-bottom-color: var(--graiph-text-secondary);
}
.fd-chart-title-btn.is-active-sort {
  color: var(--graiph-accent-text);
  border-bottom-color: var(--graiph-accent);
}
.fd-chart-title-btn.is-active-sort::after {
  content: "↕";
  font-size: 11px;
  margin-left: 2px;
}
.fd-chart-card canvas {
  width: 100% !important;
  height: 112px !important;
}

/* ----- Detail panel header actions (Compare / Swap / Exit compare) ----- */
.fd-detail-header-actions {
  display: flex;
  gap: 6px;
  margin-left: auto;
}
.fd-detail-header-actions .fd-btn {
  padding: 4px 10px;
  min-height: 30px;
  font-size: 12px;
  gap: 4px;
}
.fd-detail-header-actions .fd-btn svg {
  width: 14px;
  height: 14px;
  pointer-events: none;
}

/* "TARGET" pill displayed in the context line when rendering the query
   target inside the detail/compare body. */
.fd-detail-target-chip {
  display: inline-block;
  padding: 1px 6px;
  margin-right: 6px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  background: var(--graiph-accent);
  color: var(--graiph-bg-primary);
  border-radius: 9px;
}

/* Side-by-side compare grid. Stacks vertically on narrow viewports. */
.fd-compare-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.fd-compare-side {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  border: 1px solid var(--graiph-border);
  border-radius: var(--graiph-radius-md);
  padding: 10px;
  background: var(--graiph-bg-secondary);
}
.fd-compare-side[data-side="target"] {
  border-color: var(--graiph-accent);
}
@media (max-width: 900px) {
  .fd-compare-grid {
    grid-template-columns: 1fr;
  }
}

/* ----- Detail panel ----- */
.fd-modal-detail {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.fd-modal-detail[hidden] {
  display: none !important;
}
.fd-modal-stats[hidden] {
  display: none !important;
}
.fd-detail-header {
  display: flex;
  align-items: center;
  gap: 10px;
  border-bottom: var(--graiph-border-default);
  padding-bottom: 10px;
}
.fd-detail-header h3 {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
}
.fd-detail-body {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.fd-detail-thumb {
  /* Bound the detail thumbnail so it never dominates the panel. The image
     scales inside the box with object-fit: contain so aspect-ratio is
     preserved (no stretching, no cropping). */
  width: 100%;
  max-width: 480px;
  max-height: 50vh;
  align-self: center;
  background: #000;
  border-radius: var(--graiph-radius-md);
  overflow: hidden;
  border: 1px solid var(--graiph-border);
  display: flex;
  align-items: center;
  justify-content: center;
}
.fd-detail-thumb canvas,
.fd-detail-thumb img {
  max-width: 100%;
  max-height: 50vh;
  width: auto;
  height: auto;
  display: block;
  object-fit: contain;
}
.fd-detail-context {
  font-size: 12px;
  color: var(--graiph-text-secondary);
}
.fd-detail-context strong {
  color: var(--graiph-text-primary);
}
.fd-detail-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.fd-detail-link-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  background: var(--graiph-bg-tertiary);
  border: 1px solid var(--graiph-border);
  border-radius: var(--graiph-radius-md);
  color: var(--graiph-text-primary);
  text-decoration: none;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 120ms ease, background 120ms ease;
}
.fd-detail-link-btn:hover {
  border-color: var(--graiph-accent);
  background: var(--graiph-bg-primary);
}
.fd-detail-link-btn svg {
  width: 14px; height: 14px;
  pointer-events: none;
}
.fd-detail-labels {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 6px 14px;
  font-size: 12px;
  background: var(--graiph-bg-tertiary);
  border-radius: var(--graiph-radius-md);
  padding: 10px 12px;
}
.fd-detail-labels dt {
  color: var(--graiph-text-secondary);
  font-weight: 600;
}
.fd-detail-labels dd {
  margin: 0;
  color: var(--graiph-text-primary);
  word-break: break-word;
}
.fd-detail-section {
  border-top: var(--graiph-border-default);
  padding-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.fd-detail-section-title {
  margin: 0;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--graiph-text-secondary);
}
.fd-detail-empty {
  font-size: 12px;
  color: var(--graiph-text-secondary);
  font-style: italic;
}
.fd-composition-strip {
  position: relative;
  width: 100%;
  max-width: 220px;
  margin: 0 auto;
  background: #000;
  border: 1px solid var(--graiph-border);
  border-radius: var(--graiph-radius-md);
  overflow: hidden;
}
.fd-composition-strip-img {
  display: block;
  width: 100%;
  height: auto;
}
.fd-composition-strip-marker {
  position: absolute;
  left: 0;
  right: 0;
  background: rgba(51, 204, 102, 0.25);
  border-top: 2px solid var(--graiph-accent);
  border-bottom: 2px solid var(--graiph-accent);
  pointer-events: none;
}
.fd-composition-strip-caption {
  font-size: 11px;
  color: var(--graiph-text-secondary);
  text-align: center;
}
.fd-lithology-chart-wrap {
  height: 220px;
  background: var(--graiph-bg-tertiary);
  border-radius: var(--graiph-radius-md);
  padding: 10px;
  border: 1px solid var(--graiph-border);
}
.fd-lithology-chart-wrap canvas {
  width: 100% !important;
  height: 100% !important;
}

/* Lithology context bar above description form fields */
.fd-lith-context {
  background: var(--graiph-bg-tertiary);
  border: 1px solid var(--graiph-border);
  border-radius: var(--graiph-radius-md);
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 10px;
}
.fd-lith-context[hidden] {
  display: none !important;
}
.fd-lith-context-title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--graiph-text-secondary);
}
.fd-lith-context-title svg {
  width: 14px; height: 14px;
  pointer-events: none;
}
.fd-lith-context-empty {
  font-size: 12px;
  color: var(--graiph-text-secondary);
  font-style: italic;
}
.fd-lith-context-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.fd-lith-context-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  background: var(--graiph-bg-primary);
  border: 1px solid var(--graiph-border);
  border-radius: 999px;
  font-size: 11px;
}
.fd-lith-context-chip-key {
  color: var(--graiph-text-secondary);
  text-transform: uppercase;
  font-size: 10px;
  letter-spacing: 0.04em;
}
.fd-lith-context-chip-value {
  color: var(--graiph-text-primary);
  font-weight: 600;
}

@media (max-width: 700px) {
  .fd-modal {
    width: 100vw;
    max-width: 100vw;
    height: 100vh;
    max-height: 100vh;
    border-radius: 0;
  }
  .fd-modal-charts { grid-template-columns: 1fr; }
}

/* ============ DESCRIPTION STATS (Claude-driven) ============ */
.fd-modal-stats-descriptions {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px dashed var(--graiph-border);
}
.fd-modal-stats-descriptions[hidden] {
  display: none !important;
}
.fd-modal-stats-descriptions .fd-modal-section-title {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--graiph-text-secondary);
  margin: 0 0 10px;
}
.fd-chart-card-rose canvas {
  height: 132px !important;
  aspect-ratio: 1 / 1;
  max-width: 100%;
  margin: 0 auto;
  display: block;
}

/* ============ DESCRIPTION DETAIL (per-class groups) ============ */
.fd-detail-groups {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.fd-detail-group {
  background: var(--graiph-bg-tertiary);
  border: 1px solid var(--graiph-border);
  border-radius: var(--graiph-radius-md);
  padding: 10px 12px;
}
.fd-detail-group-title {
  margin: 0 0 8px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--graiph-text-secondary);
}
.fd-detail-kv {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 4px 14px;
  margin: 0;
  font-size: 12px;
}
.fd-detail-kv dt {
  color: var(--graiph-text-secondary);
  font-weight: 600;
}
.fd-detail-kv dd {
  margin: 0;
  color: var(--graiph-text-primary);
  word-break: break-word;
}

/* Munsell color swatches */
.fd-color-swatch {
  display: inline-block;
  width: 14px;
  height: 14px;
  border-radius: 3px;
  flex: 0 0 auto;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18), 0 0 0 1px rgba(0, 0, 0, 0.35);
}
.fd-color-value {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  line-height: 1.4;
}
.fd-color-coverage {
  color: var(--graiph-text-secondary);
  font-weight: 500;
  margin-left: 2px;
}
.fd-color-chips {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.fd-color-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
}
.fd-color-chip-meta {
  color: var(--graiph-text-secondary);
}

/* ============ TOASTS ============ */
.fd-toasts {
  position: fixed;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 900;
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
}
.fd-toast {
  background: var(--graiph-bg-elevated);
  border: 1px solid var(--graiph-border);
  border-radius: var(--graiph-radius-md);
  padding: 10px 16px;
  font-size: 14px;
  box-shadow: var(--graiph-shadow-md);
  pointer-events: auto;
  animation: fd-toast-in 200ms cubic-bezier(.16, 1, .3, 1) both;
}
@keyframes fd-toast-in {
  from { opacity: 0; transform: translateY(8px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.fd-toast[data-kind="error"] { border-color: var(--graiph-alert-error); }
.fd-toast[data-kind="warn"] { border-color: var(--graiph-alert-warning); }
.fd-toast[data-kind="info"] { border-color: var(--graiph-alert-info); }

/* ============ AI SUGGESTION CHIP (per field) ============ */
/* T1.9 — `✨ AI: <value>` chip next to the field title. Tap to accept the
   AI value: chip swaps into "accepted" state with an undo affordance. The
   chip is a sibling button to .fd-form-field-label inside .fd-form-field-header
   so its click never bubbles up to trigger the title's onFieldVizClick. */
.fd-form-field-header {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 8px;
}
.fd-form-field-header > .fd-form-field-label {
  margin: 0;
}
/* T1.12: icon-only chip at rest. Tooltip slides in on hover (desktop) or
 * peek (touch, JS-driven via data-peek). Positioned via the chip's
 * `position: relative` so the tooltip can anchor without measuring. */
.fd-form-ai-chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--graiph-accent-text);
  border-radius: 6px;
  cursor: pointer;
  font-family: inherit;
  opacity: 0.7;
  transition: opacity 120ms ease, background-color 120ms ease;
}
.fd-form-ai-chip:hover,
.fd-form-ai-chip[data-peek="true"] {
  opacity: 1;
  background: var(--graiph-accent-muted);
}
.fd-form-ai-chip[data-state="accepted"] {
  color: var(--graiph-text-secondary);
}
.fd-form-ai-chip[data-state="accepted"]:hover,
.fd-form-ai-chip[data-state="accepted"][data-peek="true"] {
  color: var(--graiph-text-primary);
  background: var(--graiph-bg-elevated);
}
/* SVG icons inside buttons MUST not eat clicks — workspace memory rule
 * (see CLAUDE.md icon-pointer-events). */
.fd-form-ai-chip .fd-form-ai-chip-icon {
  width: 14px;
  height: 14px;
  pointer-events: none;
  display: block;
}
.fd-form-ai-chip-tip {
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  display: none;
  max-width: min(280px, calc(100vw - 32px));
  width: max-content;
  white-space: normal;
  word-break: break-word;
  text-align: center;
  line-height: 1.35;
  background: #1a1a2a;
  color: #ffffff;
  padding: 6px 10px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.01em;
  pointer-events: none;
  z-index: 10;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}
.fd-form-ai-chip-tip::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 4px solid transparent;
  border-top-color: #1a1a2a;
}
.fd-form-ai-chip:hover .fd-form-ai-chip-tip,
.fd-form-ai-chip[data-peek="true"] .fd-form-ai-chip-tip {
  display: block;
}

/* ============ READ-ONLY RICH FIELDS (AI extras) ============ */
.fd-rich-field {
  margin: 0 0 16px;
  padding: 10px 12px;
  border: 1px solid var(--graiph-accent);
  border-radius: var(--graiph-radius-md);
  background: var(--graiph-bg-secondary);
}
.fd-rich-field-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}
.fd-rich-field-label {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--graiph-text-secondary);
}
/* T1.9 — `✨ AI` badge in the header of each AI-only rich-extras card so the
   origin is unambiguous. Same accent palette as the per-field AI chip. */
.fd-rich-extra-card-ai-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 10px;
  font-weight: 600;
  padding: 1px 6px;
  border-radius: 9px;
  background: var(--graiph-accent-muted);
  color: var(--graiph-accent-text);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.fd-rich-color-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.fd-rich-color-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 8px;
  border-radius: var(--graiph-radius-sm);
  background: var(--graiph-bg-tertiary);
}
.fd-rich-color-swatch {
  display: inline-block;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1px solid var(--graiph-border);
  flex: 0 0 18px;
}
.fd-rich-color-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
  flex: 1;
  min-width: 0;
}
.fd-rich-color-primary {
  font-size: 13px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.fd-rich-color-cov {
  font-size: 11px;
  color: var(--graiph-accent-text);
  font-weight: 700;
}
.fd-rich-color-meta {
  font-size: 11px;
  color: var(--graiph-text-secondary);
}
.fd-rich-md-line {
  font-size: 13px;
  color: var(--graiph-text-primary);
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.fd-rich-md-line strong { color: var(--graiph-accent-text); font-weight: 700; }
.fd-rich-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.fd-rich-tag {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 10px;
  background: var(--graiph-bg-tertiary);
  border: 1px solid var(--graiph-border);
  font-size: 11px;
  color: var(--graiph-text-primary);
}

/* Pills representing a saved value that's not in the schema's option list
   (e.g. legacy English labels in a Spanish schema). Same shape as normal
   pills but visually flagged so the user knows it's not a canonical choice. */
.fd-pill[data-custom="true"] {
  background: var(--graiph-bg-elevated);
  border-style: dashed;
  font-style: italic;
}

/* ============ SAVE-MODE TOGGLE (Fill gaps / Overwrite) ============ */
/* Two-label side-by-side pill. Both options are visible; tapping a side
   switches directly to that mode. Active side gets accent bg + contrast text,
   inactive side is muted on transparent bg. */
.fd-form-mode {
  display: inline-flex;
  align-items: stretch;
  margin: 0 0 16px;
  padding: 2px;
  height: 36px;
  background: var(--graiph-bg-tertiary);
  border: 1px solid var(--graiph-border);
  border-radius: var(--graiph-radius-sm);
}
.fd-form-mode-option {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 14px;
  min-width: 96px;
  border: 0;
  border-radius: calc(var(--graiph-radius-sm) - 2px);
  background: transparent;
  color: var(--graiph-text-secondary);
  cursor: pointer;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  transition: background 120ms ease, color 120ms ease;
}
.fd-form-mode-option[data-active="true"] {
  background: var(--graiph-accent);
  color: var(--graiph-bg-primary);
}
.fd-form-mode-option[data-active="false"]:hover {
  color: var(--graiph-text-primary);
}

/* ---- Suggestion pills (shared lithology vocabulary, tap-to-fill) ---- */
.fd-suggest-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}
.fd-suggest-pill {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0 12px;
  border-radius: 17px;
  background: var(--graiph-bg-tertiary);
  border: 1px dashed var(--graiph-border);
  color: var(--graiph-text-secondary);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
}
.fd-suggest-pill[data-selected="true"] {
  background: var(--graiph-accent-muted);
  border-color: var(--graiph-accent);
  border-style: solid;
  color: var(--graiph-accent-text);
}
.fd-suggest-pill:active { transform: scale(0.97); }

/* ---- Auto-filled / identifier fields (capture-model P2) ---- */
.fd-form-auto-chip {
  display: inline-flex;
  align-items: center;
  padding: 1px 8px;
  border-radius: 9px;
  background: var(--graiph-bg-tertiary);
  border: 1px solid var(--graiph-border);
  color: var(--graiph-text-muted);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.fd-text-input.fd-input-readonly {
  background: var(--graiph-bg-tertiary);
  color: var(--graiph-text-secondary);
  border-style: dashed;
  pointer-events: none;
}

/* ---- Collapsible legend + center-line color-by selector ---- */
.fd-legend-panel {
  position: absolute;
  top: 64px;
  right: 8px;
  z-index: 240;
  width: 280px;
  max-height: min(60vh, 480px);
  overflow-y: auto;
  padding: 10px;
  background: var(--graiph-bg-secondary);
  border: var(--graiph-border-default);
  border-radius: var(--graiph-radius-sm);
  box-shadow: 0 8px 24px rgba(0, 0, 30, 0.45);
}
.fd-legend-params {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding-bottom: 10px;
  margin-bottom: 8px;
  border-bottom: 1px solid var(--graiph-border);
}
.fd-legend-select {
  width: 100%;
  min-height: 34px;
  padding: 4px 8px;
  border-radius: var(--graiph-radius-sm, 6px);
  background: var(--graiph-bg-tertiary);
  border: 1px solid var(--graiph-border);
  color: var(--graiph-text-primary);
  font-family: inherit;
  font-size: 13px;
  cursor: pointer;
  outline: none;
}
.fd-legend-select:focus { border-color: var(--graiph-accent); }
.fd-legend-list { display: flex; flex-direction: column; }
.fd-legend-row {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 28px;
  font-size: 12px;
  color: var(--graiph-text-primary);
}
.fd-legend-row-dim { color: var(--graiph-text-secondary); opacity: 0.7; }
.fd-legend-swatch {
  flex-shrink: 0;
  width: 12px;
  height: 12px;
  border-radius: 3px;
  border: 1px solid rgba(255, 255, 255, 0.15);
}
.fd-legend-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.fd-legend-empty {
  padding: 6px 0;
  font-size: 12px;
  color: var(--graiph-text-muted);
}

/* =========================================================================
   MEDIUM / TABLET TIER (≤900px) — fixed-width panel adaptation.
   Fixes the fixed-width 3D side panels at every width ≤900px (phone included —
   a 340px panel overflows a 360px phone). 900px aligns with the existing
   description-sheet dock threshold. (The .fd-header itself collapses to the
   hamburger drawer at ≤1024px — see the PHONE + TABLET TIER block below.)
   ========================================================================= */
@media (max-width: 900px) {
  /* T2.3/T2.5 detail + area-stats panels: never exceed the viewport width and
     stay scrollable inside it. */
  .fd-3d-side-panel { width: min(340px, 90vw); max-height: calc(100vh - 90px); }
  .fd-3d-side-panel.fd-3d-area-stats { width: min(480px, 92vw); }
}

/* =========================================================================
   DESKTOP BAR SPILL-SAFETY (>1440px) — keep the inline .fd-header from
   overlapping. .gh-center (shared) is flex:1 + justify-content:center, so when
   the data selectors can't shrink below their content they overflow the
   centered box and spill over BOTH the title and the mode picker. Left-align
   them and let them shrink; between 1441–1700px also drop the redundant
   uppercase data labels (~180px) and relax the fixed tray trigger so the bar
   fits without overlap.
   ========================================================================= */
.fd-header .fd-data-select { justify-content: flex-start; min-width: 0; }
@media (min-width: 1441px) and (max-width: 1700px) {
  .fd-header .fd-data-select .gh-data-label { display: none; }
  .fd-header .fd-data-select .combobox-container { min-width: 0; }
  .fd-header .fd-data-select #fdTrayDropdownTrigger { min-width: 0; max-width: none; }
}

/* =========================================================================
   PHONE → LAPTOP TIER (≤1440px) — single-menu field header.
   The field bar packs ~7 control groups (back · title · data selectors ·
   kind/report tabs · mode · 6 action icons); in describe mode the kind toggle
   (Geotécnico/Geológico) pushes the inline bar to ~1.4k px, so below ~1440px it
   would overlap. headerResponsive.js (its mq for .fd-header is ≤1440px) folds
   the data selectors, kind/report tabs and action buttons into a .gh-drawer;
   the bar keeps [back · title · mode] … [☰]. The shared drawer-body styling
   lives in /shared/header.css (.gh-drawer rules); the rules below adapt the
   field-specific pieces. >1440px keeps the inline desktop bar (see the
   spill-safety above).
   ========================================================================= */
@media (max-width: 1440px) {
  /* Reveal the single hamburger (shared header.css hides it by default). */
  .fd-header .gh-menu-toggle { display: inline-flex; }

  /* Bar layout: back + title (truncates) + compact mode select + hamburger. */
  .fd-header .fd-header-title { flex: 1 1 auto; max-width: none; }
  .fd-header .fd-mode-select-wrap { margin: 0; flex: 0 0 auto; }
  .fd-header .fd-mode-select {
    max-width: 132px;
    min-height: 44px;
    padding: 6px 30px 6px 32px;
  }
  /* Slim square hamburger — 44px read too wide/chunky next to the Describe
     button; 40px matches the drawer's icon buttons and is still a fine tap
     target. */
  .fd-header .gh-menu-toggle { width: 40px; height: 40px; }

  /* The drawer's overlay positioning + open-state rule live in shared
     header.css but ONLY inside its ≤640px block, so at this laptop tier the
     hamburger toggled `gh-mobile-open` without ever revealing the panel (☰
     appeared to do nothing). Re-declare them here, scoped to .fd-header, so ☰
     actually opens the drawer ≤1440px. The base `.gh-drawer { display:none }`
     (shared, unscoped) keeps it hidden until opened. */
  .fd-header { position: relative; }
  /* A compact panel anchored under the hamburger (right), NOT a full-width bar.
     Its controls fill the panel's own width, but the panel stays ~360px. */
  .fd-header .gh-drawer {
    position: absolute;
    top: calc(100% + 6px);
    left: auto;
    right: 8px;
    width: min(360px, calc(100vw - 16px));
    z-index: 250;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    margin: 0;
    padding: 12px;
    background: var(--graiph-bg-surface);
    border: 1px solid var(--graiph-border);
    border-radius: var(--graiph-radius-md);
    box-shadow: var(--graiph-shadow-lg);
    max-height: 80vh;
    overflow-y: auto;
  }
  .fd-header.gh-mobile-open .gh-drawer { display: flex; }

  /* Data selectors stack full-width in the drawer as a tidy aligned form:
     each row = a fixed leading label column + a control that fills the width,
     so all three controls share the same left and right edges (no ragged,
     half-width dropdowns). */
  .fd-header .gh-drawer .fd-data-select {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    gap: 10px;
    margin: 0;
  }
  .fd-header .gh-drawer .fd-data-select .gh-data-group {
    width: 100%;
    gap: 10px;
  }
  .fd-header .gh-drawer .fd-data-select .gh-data-label {
    flex: 0 0 76px; /* aligned leading column (fits "DRILLHOLE") */
  }
  /* Control fills the rest. Override the .gh-center 200px cap (combobox.css)
     and the fixed-width tray trigger so both span the drawer row. */
  .fd-header .gh-drawer .fd-data-select .combobox-container,
  .fd-header .gh-drawer .fd-data-select .gh-tray-multi {
    flex: 1 1 auto;
    min-width: 0;
    max-width: none;
  }
  .fd-header .gh-drawer #fdTrayDropdownTrigger {
    min-width: 0;
    max-width: none;
    width: 100%;
    justify-content: space-between;
  }
  .fd-header .gh-drawer .fd-data-select .gh-tray-multi-panel {
    min-width: 0;
    max-width: none;
  }

  /* Kind toggle / report tabs span the row when their mode shows them
     (do NOT force display — their own mode CSS controls visibility). */
  .fd-header .gh-drawer #fdKindBar,
  .fd-header .gh-drawer #fdReportsControls { width: 100%; }
  .fd-header .gh-drawer #fdKindBar .fd-kind-trigger { flex: 1; width: 100%; }

  /* Action buttons become the drawer's tidy icon row. */
  .fd-header .gh-drawer .fd-header-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    width: 100%;
    padding-top: 10px;
    border-top: 1px solid var(--graiph-border);
  }
}

/* ─────────────────────────────────────────────────────────────────────────
   Field/value help affordance (ⓘ) + bottom-sheet — spec §6.4
   ───────────────────────────────────────────────────────────────────────── */

/* Small linear info button in a field header (design-system iconography). */
.fd-field-info {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--graiph-text-muted);
  border-radius: 6px;
  cursor: pointer;
  opacity: 0.75;
  transition: opacity 120ms ease, color 120ms ease, background-color 120ms ease;
}
.fd-field-info:hover,
.fd-field-info:focus-visible {
  opacity: 1;
  color: var(--graiph-accent-text);
  background: var(--graiph-bg-tertiary);
}
.fd-field-info-icon { pointer-events: none; }

/* Per-option ⓘ: a smaller info button sitting next to an enum pill or a
   client-vocabulary suggestion pill. Aligns to the pill baseline; hidden with
   its pill when the "+N más" overflow toggle collapses the grid. */
.fd-pill-info {
  width: 20px;
  height: 20px;
  align-self: center;
  margin-left: -2px;
}
.fd-pill-info .fd-field-info-icon { width: 13px; height: 13px; }
.fd-pill-info.fd-pill-hidden { display: none; }

/* ── ⓘ popover: a small, non-invasive window anchored beside the info icon ──
   Replaces the bottom-sheet for parameter help. Holds the description + the
   value list (code · name · description). */
.fd-info-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
}
.fd-info-popover {
  /* Anchored to the whole field (not the tiny icon) and spanning the field's
     width, so it opens below the field and can NEVER overflow the narrow sheet's
     side edges. Absolute (not fixed) so a slide-in transform on the sheet or its
     overflow clipping don't misplace/hide it. */
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  margin-top: 4px;
  z-index: 60;
  max-height: 320px;
  overflow-y: auto;
  padding: 12px 14px;
  background: var(--graiph-bg-surface);
  border: 1px solid var(--graiph-border);
  border-radius: var(--graiph-radius-md);
  box-shadow: var(--graiph-shadow-lg);
  text-align: left;
  white-space: normal;
  cursor: default;
}
.fd-info-popover[hidden] { display: none; }
/* The field is the positioning context for its ⓘ popover; the little icon wrap
   must NOT be, or the popover would anchor to the icon and overflow sideways. */
.fd-form-field { position: relative; }
.fd-info-wrap { position: static; }
.fd-info-pop-head { margin: 0 0 6px; }
.fd-info-pop-title {
  font-weight: 700;
  font-size: 14px;
  color: var(--graiph-text-primary);
}
.fd-info-pop-lead {
  margin: 0 0 8px;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--graiph-text-secondary);
}
.fd-info-pop-images {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 8px;
}
.fd-info-pop-img {
  max-width: 100%;
  border-radius: var(--graiph-radius-sm);
}
.fd-info-pop-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.fd-info-pop-item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 2px 8px;
  font-size: 12px;
  line-height: 1.4;
  padding-top: 7px;
  border-top: 1px solid var(--graiph-border);
}
.fd-info-pop-item:first-child { border-top: none; padding-top: 0; }
.fd-info-pop-code {
  grid-row: 1 / span 2;
  align-self: start;
  font-weight: 700;
  color: var(--graiph-accent-text);
  font-variant-numeric: tabular-nums;
}
.fd-info-pop-name {
  font-weight: 600;
  color: var(--graiph-text-primary);
}
.fd-info-pop-text { color: var(--graiph-text-secondary); }

/* Tablet-first bottom-sheet: backdrop + panel anchored to the bottom edge. */
.fd-help-sheet {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.fd-help-sheet-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 30, 0.55);
}
.fd-help-sheet-panel {
  position: relative;
  max-height: 70vh;
  overflow-y: auto;
  padding: 18px 18px 24px;
  background: var(--graiph-bg-surface);
  border-top: var(--graiph-border-default);
  border-top-left-radius: var(--graiph-radius-lg);
  border-top-right-radius: var(--graiph-radius-lg);
  box-shadow: var(--graiph-shadow-lg);
}
.fd-help-sheet-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 10px;
}
.fd-help-sheet-title {
  font-weight: 700;
  font-size: 16px;
  color: var(--graiph-text-primary);
}
.fd-help-sheet-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: none;
  background: transparent;
  color: var(--graiph-text-secondary);
  border-radius: var(--graiph-radius-md);
  cursor: pointer;
}
.fd-help-sheet-close:hover { background: var(--graiph-bg-tertiary); }
.fd-help-sheet-desc {
  margin: 0 0 12px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--graiph-text-secondary);
}
.fd-help-sheet-images {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.fd-help-sheet-img {
  max-width: 100%;
  max-height: 40vh;
  border-radius: var(--graiph-radius-md);
  border: 1px solid var(--graiph-border);
  object-fit: contain;
}

/* ─────────────────────────────────────────────────────────────────────────
   Gap-free continuous-range interval editor — spec §6.3 / decision I3
   ───────────────────────────────────────────────────────────────────────── */

.fd-interval-editor {
  margin: 0 0 16px;
  padding: 12px;
  background: var(--graiph-bg-tertiary);
  border: 1px solid var(--graiph-border);
  border-radius: var(--graiph-radius-md);
}
.fd-interval-editor-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 10px;
}
.fd-interval-editor-label {
  font-weight: 700;
  color: var(--graiph-text-primary);
}
.fd-interval-editor-range {
  font-size: 12px;
  color: var(--graiph-text-muted);
  font-variant-numeric: tabular-nums;
}
.fd-interval-rows {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.fd-interval-row,
.fd-interval-append {
  display: flex;
  align-items: center;
  gap: 8px;
}
/* Derived (read-only) start value — visibly not an input. */
.fd-interval-desde {
  min-width: 56px;
  padding: 8px 10px;
  text-align: right;
  color: var(--graiph-text-muted);
  background: transparent;
  font-variant-numeric: tabular-nums;
}
.fd-interval-arrow { color: var(--graiph-text-muted); }
.fd-interval-hasta-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1;
}
.fd-interval-hasta-label {
  font-size: 12px;
  color: var(--graiph-text-muted);
}
.fd-interval-hasta,
.fd-interval-append-hasta {
  flex: 1;
  min-width: 0;
  font-variant-numeric: tabular-nums;
}
.fd-interval-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: 1px solid var(--graiph-border);
  background: var(--graiph-bg-surface);
  color: var(--graiph-text-secondary);
  border-radius: var(--graiph-radius-md);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}
.fd-interval-remove:hover {
  color: var(--graiph-alert-error);
  border-color: var(--graiph-alert-error);
}
.fd-interval-append {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed var(--graiph-border);
}
.fd-interval-add {
  padding: 8px 12px;
  border: 1px solid var(--graiph-border);
  background: var(--graiph-bg-elevated);
  color: var(--graiph-text-primary);
  border-radius: var(--graiph-radius-md);
  cursor: pointer;
  white-space: nowrap;
}
.fd-interval-add:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.fd-interval-coverage {
  margin: 10px 0 0;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}
.fd-interval-coverage[data-complete="true"] { color: var(--graiph-accent-text); }
.fd-interval-coverage[data-complete="false"] { color: var(--graiph-alert-warning); }

/* Right-panel description table as the gap-free interval EDIT surface: the To
   column is an editable input, From stays a read-only readout, and each row
   carries a compact remove button (tablet touch target). */
.fd-table td.fd-interval-hasta-cell { padding: 4px 8px; }
.fd-table .fd-interval-hasta {
  flex: none;
  width: 72px;
  padding: 6px 8px;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}
.fd-table th.fd-interval-remove-col { width: 40px; }
.fd-table td.fd-interval-remove-cell { padding: 4px 6px; text-align: center; }
.fd-table .fd-interval-remove { width: 30px; height: 30px; font-size: 16px; }
.fd-table-body .fd-interval-coverage { padding: 0 10px 10px; }