/* fretly-popover.css — shared dialog chrome.
   Used by every settings popover in Fretly so they read identically.
   Doctrine: NO custom popover CSS per page; all dialogs compose
   FretlyPopover and inherit these rules. */

.fly-popover {
  /* FIXED: dialog stays pinned in the viewport while the page scrolls
     beneath it — settings changes preview live (owner 2026-06-12). */
  position: fixed;
  /* Above any host surface, incl. the chord-diagram picker modal (10000). */
  z-index: var(--z-popover, 10050);
  background: var(--surface, #fff);
  border: var(--border-w, 1px) solid var(--border, #ccc);
  border-radius: var(--radius-lg, 10px);
  box-shadow: var(--shadow-lg, 0 10px 32px rgba(0, 0, 0, 0.18));
  font-family: inherit;
  color: var(--text, #1a1a18);
  max-width: 92vw;
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  /* User-resizable from any edge/corner via the .fly-resize-h handles
     (bound in fretly-popover.js). Header stays draggable to move. */
  min-width: 240px;
  min-height: 160px;
}

/* Resize handles — thin invisible strips just outside each edge + corner.
   overflow on .fly-popover stays visible so they sit on the border. */
.fly-resize-h { position: absolute; z-index: 2; touch-action: none; }
.fly-resize-h--n  { top: -4px;    left: 10px; right: 10px; height: 8px; cursor: ns-resize; }
.fly-resize-h--s  { bottom: -4px; left: 10px; right: 10px; height: 8px; cursor: ns-resize; }
.fly-resize-h--e  { right: -4px;  top: 10px; bottom: 10px; width: 8px;  cursor: ew-resize; }
.fly-resize-h--w  { left: -4px;   top: 10px; bottom: 10px; width: 8px;  cursor: ew-resize; }
.fly-resize-h--ne { top: -5px;    right: -5px; width: 16px; height: 16px; cursor: nesw-resize; z-index: 3; }
.fly-resize-h--nw { top: -5px;    left: -5px;  width: 16px; height: 16px; cursor: nwse-resize; z-index: 3; }
.fly-resize-h--se { bottom: -5px; right: -5px; width: 16px; height: 16px; cursor: nwse-resize; z-index: 3; }
.fly-resize-h--sw { bottom: -5px; left: -5px;  width: 16px; height: 16px; cursor: nesw-resize; z-index: 3; }

/* Drag handle / header. */
.fly-popover-head {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-sm) var(--space-md);
  background: var(--surface-2, #f7f6f3);
  border-bottom: var(--border-w, 1px) solid var(--border, #e0ddd5);
  border-radius: var(--radius-lg, 10px) var(--radius-lg, 10px) 0 0;
  cursor: move;
  user-select: none;
}
.fly-popover-title {
  flex: 1 1 auto;
  font-size: var(--font-sm);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-2, #333);
}
.fly-popover-close {
  border: none;
  background: transparent;
  font-size: var(--font-xl);
  line-height: 1;
  cursor: pointer;
  color: var(--text-3, #888);
  padding: 0 var(--space-xs);
}
.fly-popover-close:hover { color: var(--text, #1a1a18); }

/* Body — scrollable. overscroll-behavior:contain stops the scroll from
   chaining to the page once the popover reaches its top/bottom. */
.fly-popover-body {
  flex: 1 1 auto;
  overflow: auto;
  overscroll-behavior: contain;
  padding: 0;
}

/* Tabs row + panels. */
.fly-popover-tabs {
  display: flex;
  gap: 0;
  padding: var(--space-sm) var(--space-md) 0;
  border-bottom: var(--border-w, 1px) solid var(--border, #e0ddd5);
}
.fly-popover-tab-btn {
  padding: var(--space-sm) var(--space-md);
  font-size: var(--font-sm);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border: none;
  background: transparent;
  color: var(--text-3, #888);
  cursor: pointer;
  border-bottom: var(--border-w-thick, 2px) solid transparent;
  margin-bottom: -1px;
}
.fly-popover-tab-btn:hover { color: var(--text-2, #333); }
.fly-popover-tab-btn--active {
  color: var(--accent, #e8853c);
  border-bottom-color: var(--accent, #e8853c);
}
/* Fixed-height panel area so the dialog doesn't resize when the user
   switches tabs.  Each tab scrolls internally if it overflows. */
.fly-popover-panels {
  padding: var(--space-xs) 0;
  min-height: 30rem;        /* ~420 px at scale 1; scales with --ui-scale */
  max-height: 60vh;
  overflow: auto;
  position: relative;
}
.fly-popover-tab-panel { padding: var(--space-md) var(--space-lg); }

/* Sections within tabs/plain dialogs. */
.fly-popover-section {
  padding: var(--space-sm) var(--space-lg);
  border-bottom: var(--border-w, 1px) solid var(--border, #ececec);
}
.fly-popover-section:last-child { border-bottom: none; }
.fly-popover-section-label {
  font-size: var(--font-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-3, #888);
  margin-bottom: var(--space-sm);
}
.fly-popover-section-content {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

/* Row helper — label + control. */
.fly-popover-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  font-size: var(--font-sm);
}
.fly-popover-row-label {
  color: var(--text-2, #333);
}
.fly-popover-row-ctl {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
}

/* Checkbox row. */
.fly-popover-check {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-size: var(--font-sm);
  cursor: pointer;
}
.fly-popover-check input[type="checkbox"] {
  width: 1rem;
  height: 1rem;
  cursor: pointer;
}

/* Segmented button group. */
.fly-popover-btngrp {
  display: inline-flex;
  border: var(--border-w, 1px) solid var(--border, #ccc);
  border-radius: var(--radius-sm, 4px);
  overflow: hidden;
}
.fly-popover-btngrp-btn {
  padding: var(--space-xs) var(--space-sm);
  font-size: var(--font-sm);
  font-weight: var(--weight-medium);
  border: none;
  border-left: var(--border-w, 1px) solid var(--border, #ccc);
  background: var(--surface, #fff);
  color: var(--text-2, #555);
  cursor: pointer;
  white-space: nowrap;
}
.fly-popover-btngrp-btn:first-child { border-left: none; }
.fly-popover-btngrp-btn:hover { background: var(--surface-2, #f0eee9); }
.fly-popover-btngrp-btn--active {
  background: var(--accent, #e8853c);
  color: #fff;
}

/* Select — matches Fretly's `.uid-select` standard (admin-ui-defaults.css)
   so popover dropdowns read identically across the app: custom SVG caret,
   stripped OS chrome, accent focus ring.  Single source of truth for
   select chrome lives in admin-ui-defaults.css; this rule just applies
   the same treatment in popover scope. */
.fly-popover-select {
  height: var(--ctl-h-md, 32px);
  padding: 0 var(--space-xl) 0 var(--space-sm);
  font-size: var(--font-sm);
  font-weight: var(--weight-medium);
  color: var(--text, #1a1a18);
  background: var(--surface-2, #f7f6f3);
  border: var(--border-w, 1px) solid var(--border, #ccc);
  border-radius: var(--radius-md, 6px);
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23888'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--space-sm) center;
  cursor: pointer;
  transition: border-color var(--t-fast, .15s), box-shadow var(--t-fast, .15s);
  font-family: inherit;
  min-width: 10rem;
}
.fly-popover-select:hover { border-color: var(--accent, #e8853c); }
.fly-popover-select:focus {
  outline: none;
  border-color: var(--accent, #e8853c);
  box-shadow: 0 0 0 var(--border-w-thick, 2px) rgba(232, 133, 74, .2);
}

/* Color swatch helper used by Style tab root-color picker. */
.fly-popover-swatch {
  display: inline-block;
  width: 1.5714rem;     /* ~22 px */
  height: 1.5714rem;
  border: var(--border-w-thick, 2px) solid var(--border, #ccc);
  border-radius: var(--radius-full, 50%);
  cursor: pointer;
  padding: 0;
}
.fly-popover-swatch--active {
  border-color: var(--text, #1a1a18);
  box-shadow: 0 0 0 var(--border-w-thick, 2px) var(--surface, #fff), 0 0 0 0.2857rem var(--accent, #e8853c);
}

/* Admin-only marker. */
.fly-popover-admin-section {
  background: rgba(232, 133, 60, 0.04);
  border-left: 0.2143rem solid var(--accent, #e8853c);    /* ~3 px */
  padding-left: var(--space-sm);
}
.fly-popover-admin-tag {
  font-size: var(--font-xs);
  font-weight: var(--weight-bold);
  letter-spacing: 0.06em;
  color: var(--accent, #e8853c);
  margin-left: var(--space-xs);
}

/* Quiet inline note under a settings section (e.g. the Instrument
   section's "Account default: …" hint, 2026-06-12). */
.fly-popover-note {
  font-size: var(--font-xs, 11px);
  color: var(--text-3, #999);
  margin-top: var(--space-xs, 4px);
}

/* Chip grid for the styled <select> replacement (select-popover.js).
   Accent-filled current chip; auto-fit columns unless a fixed count is
   set inline.  Reused by every bar control that swapped its native
   <select> for a popover picker. */
.fly-select-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(3.25rem, 1fr));
  gap: var(--space-xs, 4px);
  padding: var(--space-xs, 4px) 0;
}
.fly-select-chip {
  font-family: inherit;
  font-size: var(--font-sm);
  font-weight: var(--weight-medium);
  text-align: center;
  white-space: nowrap;
  padding: var(--ctl-pad-y, 6px) var(--space-sm, 8px);
  background: var(--surface, #fff);
  color: var(--text-2, #555);
  border: var(--border-w, 1px) solid var(--border, #ddd);
  border-radius: var(--radius-md, 6px);
  cursor: pointer;
  transition: border-color var(--t-fast, .15s), background var(--t-fast, .15s), color var(--t-fast, .15s);
}
.fly-select-chip:hover { border-color: var(--accent, #e8853c); }
.fly-select-chip.is-current {
  background: var(--accent, #e8853c);
  border-color: var(--accent, #e8853c);
  color: #fff;
}
.fly-select-chip.is-disabled { opacity: 0.4; cursor: not-allowed; }

/* Category header for the categorised popover (built from <optgroup>s). */
.fly-select-group-label {
  font-size: var(--font-xs, 0.72rem);
  font-weight: var(--weight-bold, 700);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-2, #444);
  padding: 0 var(--space-xs, 4px) var(--space-xs, 4px);
  margin: var(--space-md, 12px) 0 var(--space-xs, 4px);
  border-bottom: var(--border-w, 1px) solid var(--border, #e0ddd5);
}
.fly-select-group-label:first-child { margin-top: var(--space-xs, 4px); }

/* Admin-dashboard select triggers (auto-enhanced via admin-enhance.js).
   Clean form-control box + chevron so admin dropdowns match the app. */
.fly-select-trigger.fly-admin-pick {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm, 8px);
  min-width: 160px;
  height: var(--ctl-h-md, 34px);
  padding: 0 var(--space-sm, 8px);
  font-family: inherit;
  font-size: var(--font-sm, 0.9rem);
  font-weight: var(--weight-medium, 500);
  line-height: 1.2;
  text-align: left;
  color: var(--text, #23201c);
  /* Match the admin's .uid-select / .uid-input box exactly so dropdowns
     and text/number boxes read identically. */
  background: var(--surface-2, #f7f6f3);
  border: var(--border-w, 1px) solid var(--border, #d8d4cc);
  border-radius: var(--r-sm, var(--radius-md, 6px));
  cursor: pointer;
  transition: border-color var(--t-fast, .15s), box-shadow var(--t-fast, .15s);
}
.fly-select-trigger.fly-admin-pick::after {
  content: '\25BE';                 /* down chevron */
  font-size: 0.7em;
  opacity: 0.55;
  flex: 0 0 auto;
}
.fly-select-trigger.fly-admin-pick:hover { border-color: var(--text-3, #999); }
.fly-select-trigger.fly-admin-pick:focus-visible {
  outline: none;
  border-color: var(--accent, #e8853c);
  box-shadow: 0 0 0 var(--border-w-thick, 2px) rgba(232, 133, 74, 0.2);
}
/* In the ui-defaults field grid the controls fill their cell, like inputs. */
.uid-field-control .fly-select-trigger.fly-admin-pick { width: 100%; }

/* Wide sectioned layout (opt-in via `multicol`): each group is a full-width
   section — a left-aligned header divider followed by its chips in an
   auto-fit grid that lines up into tidy columns.  Headers never float in the
   middle of a column, so the whole picker reads in straight aligned rows. */
.fly-select-body--wide .fly-select-grid {
  grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
}
/* Long names (suite titles) shouldn't spill their column — clip with an
   ellipsis; the full name stays available via the chip's title tooltip. */
.fly-select-body--wide .fly-select-chip {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Searchable picker (opt-in via `searchable`) — a sticky filter box pinned
   to the top of the scrolling body so it stays reachable in a long list. */
.fly-select-search {
  position: sticky;
  top: 0;
  z-index: 4;
  background: var(--surface, #fff);
  padding: var(--space-xs, 4px) 0 var(--space-sm, 8px);
  margin-bottom: var(--space-xs, 4px);
  border-bottom: var(--border-w, 1px) solid var(--border, #ececec);
}
.fly-select-search-input {
  box-sizing: border-box;
  width: 100%;
  height: var(--ctl-h-md, 32px);
  padding: 0 var(--space-sm, 8px);
  font-family: inherit;
  font-size: var(--font-sm);
  color: var(--text, #1a1a18);
  background: var(--surface-2, #f7f6f3);
  border: var(--border-w, 1px) solid var(--border, #ccc);
  border-radius: var(--radius-md, 6px);
}
.fly-select-search-input:focus {
  outline: none;
  border-color: var(--accent, #e8853c);
  box-shadow: 0 0 0 var(--border-w-thick, 2px) rgba(232, 133, 74, .2);
}
.fly-select-chip.is-hidden { display: none !important; }
.fly-select-empty {
  padding: var(--space-md, 12px);
  font-size: var(--font-sm);
  color: var(--text-3, #888);
  text-align: center;
}
/* Sticky caller-built footer (opt-in via `footer`) — e.g. "＋ New…". */
.fly-select-footer {
  position: sticky;
  bottom: 0;
  z-index: 4;
  display: flex;
  align-items: center;
  gap: var(--space-sm, 8px);
  flex-wrap: wrap;
  background: var(--surface, #fff);
  border-top: var(--border-w, 1px) solid var(--border, #ececec);
  padding: var(--space-sm, 8px) 0 var(--space-xs, 4px);
  margin-top: var(--space-sm, 8px);
}

/* Picker-opening button styled like a select (tuning picker etc.). */
.fly-popover-pickbtn {
  font-family: inherit;
  font-size: var(--font-sm, 13px);
  text-align: left;
  cursor: pointer;
  background: var(--surface, #fff);
  border: 1.5px solid var(--border, #ddd);
  border-radius: var(--radius-md, 8px);
  padding: var(--ctl-pad-y, 6px) var(--ctl-pad-x, 10px);
  color: var(--text, #222);
}
.fly-popover-pickbtn::after { content: '  ▾'; color: var(--text-3, #999); }
.fly-popover-pickbtn:hover { border-color: var(--accent, #f2a93b); }

/* A native <select> enhanced via enhanceNativeSelect() — kept in the DOM
   as the value source but hidden in favour of its .fly-select-trigger. */
.fly-select-native--hidden { display: none !important; }