:root {
  --bg: #1c1c1c;
  --panel: #262626;
  --panel-soft: #2e2e2e;
  --text: #e8e4d8;
  --muted: #8a8678;
  --accent: #c8a96a;
  --border: #3a3a3a;
  --state-N: #6b6b6b;
  --state-D: #d97a7a;
  --state-C: #6fa4d9;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  background: var(--bg);
  color: var(--text);
  display: grid;
  grid-template-columns: var(--lib-w, 280px) 1fr var(--insp-w, 320px);
  grid-template-rows: 1fr var(--log-h, 22px);
  grid-template-areas: "library main inspector" "log log log";
  height: 100vh;
}
body.lib-collapsed { --lib-w: 28px; }
body.insp-collapsed { --insp-w: 28px; }

.canvas-header {
  padding: 8px 20px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 32px;
  flex: 0 0 auto;
}
.canvas-header .loaded-pattern-label { font-size: 13px; color: var(--muted); }
.canvas-header .loaded-pattern-label[hidden] { display: none; }
/* Dirty indicator inside the Save button — a gold dot after the word. The
   span always takes up space so the button width doesn't jump when toggling. */
.save-dirty-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-left: 6px;
  border-radius: 50%;
  background: transparent;
  vertical-align: middle;
}
#save-pattern.is-dirty .save-dirty-dot { background: #e0b65a; }

.canvas-body {
  flex: 1 1 auto;
  display: flex;
  overflow: hidden;
  position: relative;
  min-height: 0;
}
/* The scroll viewport: fits the knot to the pane at zoom 100%, and scrolls
   (pans) when zoomed in past the pane bounds. `safe center` keeps the knot
   centred when it fits but falls back to start-aligned when it overflows,
   so every part stays reachable by scrolling. */
.canvas-viewport {
  flex: 1 1 auto;
  display: flex;
  align-items: safe center;
  justify-content: safe center;
  overflow: auto;
  padding: 20px;
  min-width: 0;
  min-height: 0;
}
#canvas { flex: 0 0 auto; }
/* Excel-style zoom control, pinned bottom-right of the canvas area. It is a
   sibling of the scroll viewport (not inside it) so it never scrolls away. */
.canvas-footer {
  padding: 6px 20px;
  border-top: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 32px;
  flex: 0 0 auto;
}
.canvas-footer #history-controls { margin-left: auto; }
.zoom-control {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 3px 8px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 6px;
}
.zoom-fit-btn {
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: var(--panel-soft);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 4px;
  cursor: pointer;
}
.zoom-fit-btn:hover { border-color: var(--accent); color: var(--accent); }
.zoom-control input[type="range"] { width: 110px; }
.zoom-value {
  font-size: 11px;
  color: var(--muted);
  min-width: 34px;
  text-align: right;
}

.log-body > div.ready { color: #6fbf73; }

:is(header, .canvas-header, .canvas-footer, .inspector-toolbar) .header-key-btn {
  font-size: 12px;
  padding: 4px 10px;
  background: var(--panel-soft);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 4px;
  cursor: pointer;
}
:is(header, .canvas-header, .canvas-footer, .inspector-toolbar) .header-key-btn:hover { background: var(--panel); border-color: var(--accent); }
:is(header, .canvas-header, .canvas-footer, .inspector-toolbar) .header-key-btn:disabled {
  opacity: 0.4;
  cursor: default;
}
:is(header, .canvas-header, .canvas-footer, .inspector-toolbar) .header-key-btn:disabled:hover {
  background: var(--panel-soft);
  border-color: var(--border);
}

#history-controls {
  display: flex;
  gap: 10px;
}
.hist-count {
  color: #e8c96a;
  font-weight: 600;
  margin-left: 3px;
}

.copy-menu { position: relative; display: inline-block; }
.copy-menu-list {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  z-index: 100;
  background: var(--panel-soft);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 4px 0;
  min-width: 180px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.4);
  display: flex;
  flex-direction: column;
}
.copy-menu-list[hidden] { display: none; }
.copy-menu-list button {
  background: transparent;
  color: var(--text);
  border: none;
  text-align: left;
  padding: 6px 12px;
  font-size: 12px;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  gap: 12px;
}
.copy-menu-list button:hover { background: var(--panel); color: var(--accent); }

:is(header, .canvas-header, .log-footer) .clipboard-indicator {
  font-size: 12px;
  color: var(--muted);
  font-style: italic;
  padding: 2px 8px;
  border: 1px dashed var(--border);
  border-radius: 4px;
  max-width: 320px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
:is(header, .canvas-header, .log-footer) .clipboard-indicator[hidden] { display: none; }
:is(header, .canvas-header, .log-footer) .clipboard-indicator.clipboard-indicator-empty { opacity: 0.55; }

.library-selection-btn {
  font-size: 12px;
  padding: 4px 10px;
  background: var(--panel);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 4px;
  cursor: pointer;
}
.library-selection-btn:hover:not(:disabled) { border-color: var(--accent); }
.library-selection-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.library-selection-btn-primary { background: var(--accent); color: #111; border-color: var(--accent); }

/* Selected library card highlight — kept visually distinct from .active
   (the loaded entry) so users don't conflate the two. */
.lib-card { position: relative; }
.lib-card.selected { outline: 3px solid #4aa3ff; outline-offset: -3px; }
.lib-card.selected .lib-thumb { box-shadow: 0 0 0 2px #4aa3ff inset; }
.lib-card.selected::before {
  content: '✓';
  position: absolute;
  top: 4px;
  left: 4px;
  z-index: 5;
  width: 18px;
  height: 18px;
  line-height: 18px;
  text-align: center;
  font-size: 12px;
  font-weight: 700;
  background: #4aa3ff;
  color: #fff;
  border-radius: 50%;
  box-shadow: 0 0 0 2px var(--panel);
  pointer-events: none;
}

/* Floating context menu (right-click on a library card) */
.lib-ctx-menu {
  position: fixed;
  z-index: 200;
  background: var(--panel-soft);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 4px 0;
  min-width: 180px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.5);
  font-size: 12px;
  display: flex;
  flex-direction: column;
}
.lib-ctx-menu .lib-ctx-section {
  padding: 4px 12px 2px;
  color: var(--muted);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.lib-ctx-menu button {
  background: transparent;
  color: var(--text);
  border: none;
  text-align: left;
  padding: 6px 12px;
  font-size: 12px;
  cursor: pointer;
}
.lib-ctx-menu button:hover:not(:disabled) { background: var(--panel); color: var(--accent); }
.lib-ctx-menu button:disabled { opacity: 0.45; cursor: not-allowed; }
.lib-ctx-menu .lib-ctx-sep { height: 1px; background: var(--border); margin: 4px 0; }

/* Move-to-Project modal */
.move-project-box { width: 460px; max-width: 92vw; }
.move-project-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 14px 18px;
}
.move-project-summary {
  font-size: 13px;
  color: var(--text);
  line-height: 1.4;
}
.move-project-summary strong { color: var(--accent); }
.move-project-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-height: 50vh;
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--panel-soft);
  padding: 6px;
}
.move-project-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 4px;
  background: transparent;
  border: 1px solid transparent;
  color: var(--text);
  font-size: 13px;
  text-align: left;
  cursor: pointer;
}
.move-project-row:hover:not(:disabled) {
  background: var(--panel);
  border-color: var(--border);
  color: var(--accent);
}
.move-project-row:disabled { opacity: 0.45; cursor: not-allowed; }
.move-project-row .mp-name { font-weight: 500; }
.move-project-row .mp-note {
  color: var(--muted);
  font-style: italic;
  font-size: 11px;
  font-weight: 400;
}
.move-project-row .mp-count {
  color: var(--muted);
  font-size: 12px;
  font-family: ui-monospace, monospace;
  white-space: nowrap;
}
.move-project-row.mp-new {
  margin-top: 6px;
  border-top: 1px dashed var(--border);
  border-radius: 0 0 4px 4px;
  padding-top: 12px;
  color: var(--accent);
}
.move-project-row.mp-new .mp-name { color: var(--accent); }
.move-project-row.mp-new:hover:not(:disabled) {
  background: var(--panel);
  border-color: var(--border);
  border-top-style: dashed;
}

/* Paste Special modal (B7) */
.paste-special-box { width: 560px; }
.paste-special-body { padding: 14px 18px; overflow-y: auto; }
.paste-special-source, .paste-special-target {
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 8px;
}
.paste-special-source strong, .paste-special-target strong { color: var(--text); font-weight: 600; }
.paste-special-tree { display: flex; flex-direction: column; gap: 12px; margin-top: 8px; }
.paste-special-facet {
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 8px 10px;
  background: var(--panel-soft);
}
.paste-special-facet-header {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--accent);
  margin-bottom: 6px;
}
.paste-special-facet-header label { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.paste-special-caret {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  padding: 0;
  font-size: 22px;
  line-height: 1;
  background: transparent;
  border: none;
  color: var(--accent);
  cursor: pointer;
}
.paste-special-facet-summary {
  margin-left: auto;
  font-size: 10px;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  color: var(--muted);
}
.paste-special-leaves {
  display: none;
  grid-template-columns: 1fr 1fr;
  gap: 4px 12px;
}
.paste-special-facet.expanded .paste-special-leaves { display: grid; }
.paste-special-leaf {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--text);
  cursor: pointer;
  padding: 2px 0;
  min-width: 0; /* allow the value column to shrink + ellipsis inside the grid */
}
.paste-special-leaf input { margin: 0; flex: 0 0 auto; }
.paste-special-leaf .ps-key { flex: 0 0 auto; }
.paste-special-leaf .ps-val {
  font-family: ui-monospace, monospace;
  font-size: 11px;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1 1 auto;
  min-width: 0;
}
.paste-special-quickbtn {
  font-size: 12px;
  padding: 4px 10px;
  background: var(--panel-soft);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 4px;
  cursor: pointer;
}
.paste-special-quickbtn:hover { border-color: var(--accent); }
.paste-special-count { font-size: 11px; color: var(--muted); margin-left: 8px; }

.key-panel {
  grid-area: inspector;
  z-index: 80;
  padding: 12px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  background: rgba(0, 0, 0, 0.35);
  overflow: hidden;
}
.key-panel[hidden] { display: none !important; }
.key-panel-box {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  background: #1f1f1f;
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.6);
  padding: 14px 16px 16px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.key-panel-box h2 {
  margin: 0 0 10px 0;
  padding-right: 28px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  text-transform: none;
  letter-spacing: 0;
}
.key-panel-close {
  position: absolute;
  top: 8px;
  right: 8px;
  background: none;
  border: none;
  color: var(--muted);
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  padding: 4px 6px;
  border-radius: 4px;
}
.key-panel-close:hover { color: #d97a7a; background: rgba(255,255,255,0.05); }
.key-panel-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}
.key-row {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
  border-bottom: 1px solid var(--border);
}
.key-row:last-child { border-bottom: none; }
.key-glyph {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
}
.key-glyph svg { display: block; }
.key-text {
  flex: 1 1 auto;
  font-size: 12px;
  color: var(--text);
  line-height: 1.35;
}
.key-text strong { font-size: 12px; color: var(--text); }
.key-text .key-hint {
  font-size: 11px;
  color: var(--muted);
}
aside {
  padding: 0;
  overflow: hidden;
  position: relative;
  display: flex;
  flex-direction: column;
}
aside #library-panel-body,
aside #inspector-panel-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 9px 10px;
}
/* Inspector body becomes a non-scrolling flex column: the tabs sit as a
   fixed header and #inspector-scroll below them is the scroll container.
   This keeps the tabs structurally above any scrollable content, so no
   sticky-positioning trick is needed and nothing can leak above them. */
aside #inspector-panel-body {
  padding: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
}
#inspector-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 0 10px 9px;
}
/* Library panel: stack the project bar, selection bar and grid vertically
   so the grid (the only flexible child) absorbs all remaining height. */
aside #library-panel-body {
  display: flex;
  flex-direction: column;
  overflow: hidden; /* the grid itself is the scroll container */
}
aside.library-aside {
  grid-area: library;
  border-right: 1px solid var(--border);
}
aside.inspector-aside {
  grid-area: inspector;
  border-left: 1px solid var(--border);
}
/* Scroll-clip indicators: a gold strip marks the bottom of the sticky tab
   strip (clip-top: there is hidden content scrolled above) and another sits
   at the bottom of the panel body (clip-bottom: hidden content below). */
aside.inspector-aside::after {
  content: '';
  position: absolute;
  left: 0; right: 0;
  bottom: 0;
  height: 3px;
  background: var(--accent);
  z-index: 10;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s;
}
aside.inspector-aside.clip-bottom::after { opacity: 1; }
body.insp-collapsed aside.inspector-aside::after { display: none; }
aside .field { margin-bottom: 14px; }
aside .row {
  display: flex;
  gap: 10px;
  align-items: center;
}
aside .row > * { flex: 1; }
aside label {
  display: block;
  font-size: 11px;
  color: var(--muted);
  margin-bottom: 4px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
aside label .fd-hint {
  text-transform: none;
  letter-spacing: 0;
  font-size: 10px;
  color: var(--muted);
  opacity: 0.7;
  margin-left: 6px;
}
aside select, aside input[type="number"] {
  width: 100%;
  padding: 7px 9px;
  background: var(--panel);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 4px;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 13px;
}
aside input[type="range"] { width: 100%; }
aside .slider-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
aside .slider-row input[type="range"] { flex: 1; }
aside .slider-row .value {
  width: 28px;
  text-align: right;
  font-family: ui-monospace, monospace;
  font-size: 13px;
  color: var(--accent);
}
aside button {
  width: 100%;
  padding: 8px 10px;
  background: var(--panel);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 4px;
  font-size: 13px;
  cursor: pointer;
}
aside button.primary {
  background: var(--accent);
  color: #1c1c1c;
  border-color: var(--accent);
  font-weight: 600;
}
aside button:hover { filter: brightness(1.15); }
aside button:disabled { opacity: 0.4; cursor: wait; }
aside .hint {
  font-size: 11px;
  color: var(--muted);
  margin-top: 4px;
  line-height: 1.4;
}

.turn-style-row {
  display: flex;
  gap: 6px;
  margin-top: 4px;
}
.turn-style-btn {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 6px 4px;
  background: var(--panel);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 4px;
  font-size: 11px;
  cursor: pointer;
  transition: all 0.15s;
}
.turn-style-btn:hover:not(:disabled) {
  filter: brightness(1.15);
  border-color: var(--accent);
}
.turn-style-btn.active {
  background: var(--accent);
  color: #1c1c1c;
  border-color: var(--accent);
  font-weight: 600;
}
.turn-style-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.group-button-grid {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 4px;
  align-items: flex-start;
}
.group-button-grid[hidden] { display: none; }

.subgroup-lattice {
  position: relative;
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  grid-template-rows: repeat(7, 72px);
  gap: 0;
  margin-bottom: 10px;
  width: 100%;
}
.subgroup-lattice .group-btn {
  place-self: start center;
  margin-top: 2.4px;
  z-index: 1;
  position: relative;
  background: var(--panel); /* opaque so arrow lines hide under buttons */
  min-width: 0;
  max-width: none;
  width: 50px;
  height: 44px;
  padding: 3px 2px;
  font-size: 10px;
  border: 2px solid #8a8a8a;
  flex-direction: column;
  gap: 1px;
}
.subgroup-lattice .group-btn > span:first-child {
  font-size: 13px;
  line-height: 1;
  font-weight: 600;
}
.subgroup-lattice .group-btn .legacy {
  font-size: 8px;
  line-height: 1;
  margin-top: 0;
}
.subgroup-arrows {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
  color: var(--fg);
  overflow: visible;
  opacity: 0.85;
}
.subgroup-arrows line {
  stroke: currentColor;
  stroke-width: 3;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
  marker-end: url(#sg-arrow);
}
.subgroup-arrows .kg-lines line {
  stroke: #4caf50;
  marker-end: url(#sg-arrow-kg);
}
.subgroup-arrows #sg-arrow path {
  fill: currentColor;
}
.subgroup-legend {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  font-size: 10px;
  color: var(--fg);
  opacity: 0.85;
  margin: 2px 0 8px;
  padding-left: 2px;
}
.subgroup-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.subgroup-legend-arrow {
  width: 30px;
  height: 10px;
  color: var(--fg);
  opacity: 0.85;
  flex: 0 0 auto;
}
.subgroup-legend-item-kg .subgroup-legend-arrow {
  color: #4caf50;
  opacity: 1;
}
.lattice-extra-row {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 6px;
}
.lattice-btn.lattice-extra {
  opacity: 0.85;
}
.group-button-row {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  justify-content: flex-start;
}
.group-button-pair {
  display: inline-flex;
  gap: 4px;
}
.group-btn {
  min-width: 58px;
  max-width: 58px;
  height: 38px;
  flex-direction: column;
  line-height: 1.05;
  padding: 4px 3px;
  background: var(--panel);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 4px;
  font-size: 12px;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  cursor: pointer;
  transition: all 0.15s;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.group-btn:hover {
  filter: brightness(1.15);
  border-color: var(--accent);
}
.group-btn.active {
  background: var(--accent);
  color: #1c1c1c;
  border-color: var(--accent);
  font-weight: 600;
}
.group-btn.hexagonal {
  opacity: 0.4;
  cursor: not-allowed;
  color: var(--muted);
}
.unsupported-toggle {
  min-width: 28px;
  height: 38px;
  padding: 0 6px;
  background: transparent;
  color: var(--muted);
  border: 1px dashed var(--border);
  border-radius: 4px;
  font-size: 14px;
  cursor: pointer;
  line-height: 1;
  transition: all 0.15s;
}
.unsupported-toggle:hover {
  color: var(--text);
  border-color: var(--accent);
}
.unsupported-pane {
  margin-top: 2px;
  padding: 4px 8px 8px;
  border: 1px dashed var(--border);
  border-radius: 4px;
  background: var(--panel-soft);
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-self: stretch;
}
.unsupported-pane[hidden] { display: none; }
.unsupported-pane-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 2px;
}
.unsupported-pane-label {
  font-size: 11px;
  color: var(--muted);
  font-style: italic;
  white-space: nowrap;
}
.unsupported-close {
  background: transparent;
  color: var(--muted);
  border: none;
  font-size: 16px;
  line-height: 1;
  padding: 0 4px;
  cursor: pointer;
}
.unsupported-close:hover { color: var(--text); }
.group-btn.hexagonal:hover {
  filter: none;
  border-color: var(--border);
}
.group-btn .legacy {
  font-size: 9px;
  color: var(--muted);
  margin-top: 1px;
  font-weight: 400;
}
.group-btn.active .legacy {
  color: #1c1c1c;
  opacity: 0.7;
}
/* Conway orbifold colouring: gyration points red, mirror/corner/glide
   symbols blue, identity 'o' uses default text colour. The orbifold
   glyphs are rendered larger than the small crystallographic legacy
   name beneath them. */
.group-btn > span:first-child {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0;
}
.orb-gyr { color: #ff5a5a; }
.orb-mir { color: #4d9eff; }
.group-btn.active .orb-gyr { color: #d61f24; }
.group-btn.active .orb-mir { color: #1d57c4; }

/* Friendly symmetry chooser */
.group-friendly {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-top: 4px;
}
.group-friendly[hidden] { display: none !important; }
.friendly-controls {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1 1 auto;
  min-width: 0;
}
.friendly-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.friendly-label {
  font-size: 11px;
  color: var(--muted);
  width: 56px;
  flex: 0 0 auto;
}
.friendly-pills {
  display: inline-flex;
  gap: 0;
  border: 1px solid var(--border);
  border-radius: 4px;
  overflow: hidden;
  background: var(--panel);
}
.friendly-pill {
  min-width: 38px;
  height: 28px;
  padding: 0 8px;
  background: transparent;
  color: var(--text);
  border: none;
  border-left: 1px solid var(--border);
  font-size: 12px;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.friendly-pill:first-child { border-left: none; }
.friendly-pill:hover {
  background: var(--panel-soft, rgba(255,255,255,0.05));
}
.friendly-pill.active {
  background: var(--accent);
  color: #1c1c1c;
  font-weight: 600;
}
.friendly-pill:disabled {
  opacity: 0.35;
  cursor: not-allowed;
  background: transparent;
}
.friendly-pill:disabled:hover { background: transparent; }
.field-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 4px;
}
.chooser-style-toggle {
  display: inline-flex;
  border: 1px solid var(--border);
  border-radius: 4px;
  overflow: hidden;
  background: var(--panel);
}
.chooser-style-toggle button {
  background: transparent;
  border: 0;
  padding: 2px 8px;
  font-size: 11px;
  color: var(--muted);
  cursor: pointer;
  font-family: inherit;
}
.chooser-style-toggle button + button {
  border-left: 1px solid var(--border);
}
.chooser-style-toggle button.active {
  background: var(--fg);
  color: var(--panel);
}
.chooser-style-toggle button:not(.active):hover {
  background: rgba(127,127,127,0.12);
}

.effective-orbifold[hidden] { display: none; }
.effective-orbifold {
  margin-top: 8px;
  padding: 4px 6px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--panel);
  font-size: 11px;
  color: var(--muted);
  border-collapse: collapse;
  width: 100%;
}
.effective-orbifold td {
  padding: 3px 6px;
  vertical-align: middle;
}
.effective-orbifold tbody + tbody td {
  border-top: 1px solid var(--border);
}
.effective-view {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  color: var(--muted);
  text-transform: none;
}
.effective-view input { margin: 0; }
.effective-label { font-weight: 500; }
.effective-cell {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  color: var(--muted);
  white-space: nowrap;
}
.effective-measure { color: var(--muted); white-space: nowrap; }
.effective-value {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  color: var(--fg);
  text-align: right;
  white-space: nowrap;
}
.effective-view-cell { text-align: right; }
.effective-orbifold .effective-value .legacy {
  color: var(--muted);
  margin-left: 6px;
  font-size: 10px;
}

.friendly-readout {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--panel);
  min-width: 56px;
  line-height: 1.1;
}
.friendly-readout-orbifold {
  font-size: 18px;
  font-weight: 600;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  letter-spacing: 0;
}
.friendly-readout-legacy {
  font-size: 10px;
  color: var(--muted);
  margin-top: 3px;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
}
.friendly-readout-nav {
  display: flex;
  gap: 4px;
  margin-top: 6px;
}
.friendly-nav-btn {
  width: 22px;
  height: 22px;
  padding: 0;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 3px;
  color: var(--text);
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  transition: all 0.15s;
}
.friendly-nav-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.chooser-toggle-row {
  margin-top: 6px;
  margin-bottom: -4px;
}
.orbifolds-section[hidden] { display: none; }
.orbifolds-section { margin-top: 12px; }

/* Found-symmetry colour markers — one per row in the table, mirrored by
   matching dots on the lattice button(s) where each found orbifold lands. */
.found-marker {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-right: 6px;
  vertical-align: middle;
  border: 1px solid rgba(0, 0, 0, 0.35);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0.3);
}
.found-marker[data-key="selected"]         { background: #d8c388; }
.found-marker[data-key="topological"]      { background: #ff2bd6; }
.found-marker[data-key="visible"]          { background: #ff8c00; }
.found-marker[data-key="true-topological"] { background: #00d6e6; }
.found-marker[data-key="true-visible"]     { background: #ffd400; }

.lattice-markers {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 2px;
  display: flex;
  gap: 2px;
  justify-content: center;
  z-index: 3;
  pointer-events: none;
}
.lattice-marker {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, 0.55);
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
}
.lattice-marker[data-key="selected"]         { background: #d8c388; }
.lattice-marker[data-key="topological"]      { background: #ff2bd6; }
.lattice-marker[data-key="visible"]          { background: #ff8c00; }
.lattice-marker[data-key="true-topological"] { background: #00d6e6; }
.lattice-marker[data-key="true-visible"]     { background: #ffd400; }
.chooser-toggle {
  background: transparent;
  border: none;
  color: var(--muted);
  font-size: 11px;
  padding: 2px 0;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.chooser-toggle:hover { color: var(--accent); }
aside .config-display {
  font-family: ui-monospace, monospace;
  font-size: 12px;
  color: var(--accent);
  background: var(--panel);
  padding: 6px 9px;
  border-radius: 4px;
  border: 1px solid var(--border);
  word-break: break-all;
  letter-spacing: 0.08em;
}

/* Facet preset chooser (per-tab header) */
.facet-chooser {
  background: var(--panel-soft);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 10px 12px;
  margin-bottom: 14px;
}
.facet-chooser-label {
  display: block;
  font-size: 11px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
  margin-bottom: 6px;
}
.facet-chooser-dot {
  color: #e0b65a;
  margin-left: 4px;
  font-size: 12px;
}
.facet-chooser-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
}
.facet-chooser-select {
  flex: 1;
  padding: 6px 8px;
  font-size: 12px;
  background: var(--panel);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 4px;
}
.facet-chooser-actions {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}
.facet-chooser-actions button {
  flex: 1;
  min-width: 0;
  padding: 5px 6px;
  font-size: 11px;
  background: var(--panel);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 4px;
  cursor: pointer;
  white-space: nowrap;
}
.facet-chooser-actions button:hover:not(:disabled) {
  border-color: var(--accent);
  color: var(--accent);
}
.facet-chooser-actions button:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.coe-modal-box { width: min(440px, 92vw); }

/* Colour wizard ---------------------------------------------------------- */
.modal-box.wizard-box {
  width: 96vw;
  max-width: 96vw;
  max-height: 94vh;
  height: 94vh;
}
.wizard-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 18px;
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}
.wizard-toolbar-left, .wizard-toolbar-right {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.wizard-toolbar-check {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; color: var(--muted);
}
.wizard-sep { color: var(--border); }
.modal-body.wizard-body {
  flex: 1 1 auto;
  overflow-y: auto !important;
  overflow-x: hidden;
  min-height: 0;
  padding: 14px 18px;
  background: var(--panel-soft, var(--panel));
}
.wizard-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}
@media (max-width: 1200px) {
  .wizard-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 800px) {
  .wizard-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.wizard-empty {
  text-align: center; color: var(--muted); padding: 60px 20px; font-size: 14px;
}
.cw-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  position: relative;
  cursor: pointer;
  transition: border-color 0.12s, box-shadow 0.12s;
}
.cw-card:hover { border-color: var(--accent, #d97706); }
.cw-card.selected {
  border-color: var(--accent, #d97706);
  box-shadow: 0 0 0 2px var(--accent, #d97706) inset;
}
.cw-card.dupe-group { border-left: 3px solid #d97706; }
.cw-meta-row {
  display: flex; align-items: center; gap: 8px;
}
.cw-meta-row .cw-meta { flex: 1; min-width: 0; }
.cw-goto-btn {
  font-size: 10px !important;
  padding: 3px 7px !important;
  background: var(--panel-soft) !important;
  color: var(--text) !important;
  white-space: nowrap;
  flex-shrink: 0;
}
.cw-goto-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.cw-thumb {
  width: 50%;
  align-self: center;
  aspect-ratio: 1;
  border-radius: 4px;
  background: #222;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  border: 1px solid var(--border);
}
.cw-thumb svg { width: 100%; height: 100%; display: block; transform: scale(1.6); transform-origin: center center; }
#gw-grid .cw-thumb svg { transform: scale(1.12); }
.cw-thumb.loading { color: var(--muted); font-size: 11px; }
.cw-name-row {
  display: flex; align-items: center; gap: 6px;
}
.cw-name {
  flex: 1;
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 3px;
  padding: 3px 5px;
  font-family: inherit;
  min-width: 0;
}
.cw-name:hover { border-color: var(--border); }
.cw-name:focus { border-color: var(--accent, #d97706); background: var(--panel-soft, var(--panel)); outline: none; }
.cw-suggest-btn {
  font-size: 10px !important;
  padding: 3px 6px !important;
  background: var(--panel-soft) !important;
  color: var(--muted) !important;
  white-space: nowrap;
}
.cw-meta {
  display: flex; flex-wrap: wrap; gap: 6px 10px;
  font-size: 11px; color: var(--muted);
}
.cw-meta b { color: var(--text); font-weight: 500; }
.cw-bands {
  display: flex; height: 16px; border-radius: 3px; overflow: hidden;
  border: 1px solid var(--border);
}
.cw-band { height: 100%; }
.cw-chips {
  display: flex; gap: 4px; align-items: center; font-size: 10px; color: var(--muted);
}
.cw-chip {
  width: 16px; height: 16px; border-radius: 3px;
  border: 1px solid var(--border);
}
.cw-card-actions {
  display: flex; gap: 4px; flex-wrap: wrap; margin-top: 2px;
}
.cw-card-actions button {
  font-size: 11px !important;
  padding: 3px 7px !important;
  flex: 1;
  min-width: 0;
}
.cw-card-actions button.danger {
  color: #e53535 !important;
}
.cw-dupe-badge {
  display: inline-block; font-size: 10px;
  background: #d97706; color: #fff;
  padding: 1px 6px; border-radius: 8px;
  margin-left: 4px;
}
.cw-merge-row {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 8px; border: 1px solid var(--border); border-radius: 4px;
  cursor: pointer;
}
.cw-merge-row:hover { background: var(--panel-soft, var(--panel)); }
.cw-merge-row .cw-merge-thumb {
  width: 36px; height: 36px; border-radius: 3px; flex-shrink: 0;
  background: #222; overflow: hidden;
}
.cw-merge-row .cw-merge-thumb svg { width: 100%; height: 100%; display: block; }
.cw-merge-row .cw-merge-name { flex: 1; font-size: 12px; }
.cw-merge-row .cw-merge-refs { font-size: 11px; color: var(--muted); }

.coe-radio-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 8px 10px;
  margin-bottom: 6px;
  border: 1px solid var(--border);
  border-radius: 4px;
  cursor: pointer;
  font-size: 13px;
  line-height: 1.4;
}
.coe-radio-row:hover { border-color: var(--accent); }
.coe-radio-row input[type="radio"] { margin-top: 2px; }

/* FD editor */
.fd-section {
  background: var(--panel-soft);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 12px;
  margin-bottom: 14px;
}
.fd-section h2 {
  margin: 0 0 6px;
  font-size: 12px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
}
.fd-section h2 .fd-hint {
  text-transform: none;
  letter-spacing: 0;
  font-size: 10px;
  color: var(--muted);
  opacity: 0.7;
  margin-left: 6px;
  font-weight: 400;
}
#fd-svg {
  width: 100%;
  height: auto;
  background: #f3ead3;
  border-radius: 4px;
  cursor: pointer;
  user-select: none;
}
#fd-svg .edge {
  cursor: pointer;
  transition: stroke-width 0.1s;
}
#fd-svg .edge:hover { stroke-width: 1.6; }
.legend {
  display: flex;
  gap: 12px;
  font-size: 11px;
  margin-top: 8px;
  color: var(--muted);
}
.legend .swatch {
  display: inline-block;
  width: 14px;
  height: 4px;
  border-radius: 2px;
  vertical-align: middle;
  margin-right: 4px;
}

main {
  grid-area: main;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: 0;
}
#canvas {
  border-radius: 4px;
  box-shadow: 0 8px 30px rgba(0,0,0,0.4);
  overflow: hidden;
  position: relative;
}
#canvas:empty { box-shadow: none; }
@keyframes orbit-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.4); }
}
.hover-circle {
  fill: rgba(20, 15, 10, 0.82);
  stroke: rgba(255, 255, 255, 0.92);
  stroke-width: 3;
  cursor: pointer;
  pointer-events: auto;
}
.hover-circle-primary {
  transform-box: fill-box;
  transform-origin: center;
  stroke-width: 5;
  stroke: #ffd54f;
  animation: orbit-pulse 1s ease-in-out infinite;
}
aside input[type="color"] {
  width: 100%;
  height: 32px;
  padding: 2px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 4px;
  cursor: pointer;
}

/* Facet slot strip (Stage 4) — persistent 4-way mix above the tabs */
.tab-dirty-dot {
  color: #e0b65a;
  margin-left: 4px;
  font-size: 10px;
  line-height: 1;
}

/* Tabs */
.tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--border);
  background: var(--panel);
  flex: 0 0 auto;
  padding: 9px 20px 0;
  position: relative;
  z-index: 5;
}
/* clip-top strip: sits flush below the sticky tab strip when hidden
   content has scrolled up under the tabs. Anchored to `.tabs` so it
   tracks the tabs as they stick. */
aside.inspector-aside .tabs::after {
  content: '';
  position: absolute;
  left: 0; right: 0;
  bottom: -3px;
  height: 3px;
  background: var(--accent);
  opacity: 0;
  transition: opacity 0.15s;
  pointer-events: none;
}
aside.inspector-aside.clip-top .tabs::after { opacity: 1; }
.tab-btn {
  flex: 1;
  min-width: 0;
  padding: 8px 4px;
  background: transparent;
  color: var(--muted);
  border: none;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s;
}
.tab-btn:hover {
  color: var(--text);
}
.tab-btn.active {
  background: var(--accent);
  color: #111;
  font-weight: 600;
}
.tab-content {
  display: none;
}
.tab-content.active {
  display: block;
}
/* When no pattern is loaded in the canvas, the inspector tabs show as empty:
   tab buttons remain visible, but their content panels are hidden and the
   empty-state hint shows instead. */
body.no-pattern .tab-content,
body.no-pattern .tab-content.active {
  display: none;
}
.inspector-empty { display: none; }
body.no-pattern .inspector-empty {
  display: block;
  padding: 16px 14px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}
body.no-pattern .inspector-empty p { margin: 0 0 8px 0; }
body.no-pattern .inspector-empty p:last-child { margin-bottom: 0; }
#canvas svg {
  display: block;
  width: 100%;
  height: 100%;
  /* Promote the main strand SVG to its own compositor layer so the alpha-
     blended hover overlay above it doesn't force a full re-rasterisation
     every mousemove. Without this, each `points` update on the highlight
     polygon forced the GPU to redraw the strands + shadows underneath. */
  transform: translateZ(0);
}
/* But the hover-overlay itself must NOT be promoted via the same rule — it
   sits inside #canvas as a sibling of the main svg; make sure it stays a
   normal element so it composites cheaply against the cached main layer. */
#canvas #hover-overlay { transform: none; }
/* Fundamental-domain highlight: hidden until the user hovers the canvas. */
#canvas svg .fd-highlight { opacity: 0; transition: opacity 0.12s ease-out; pointer-events: none; }
#canvas:hover svg .fd-highlight { opacity: 1; }
/* Hover overlay: separate SVG layered above the main strand SVG. Holds the
   FD-fill highlight + the orbit hover circles so changes never cause the
   heavy strand SVG underneath to re-rasterise. Pointer-events: none lets
   clicks pass through to the canvas-level handler. */
#canvas #hover-overlay { pointer-events: none; }

/* ---- Log footer (bottom strip; drag top edge to expand) ---- */
.log-footer {
  grid-area: log;
  background: var(--panel);
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  min-height: 0;
  position: relative;
}
.log-footer-resize {
  flex: 0 0 4px;
  cursor: ns-resize;
  background: transparent;
  border-top: 1px solid var(--border);
  margin-top: -1px;
}
.log-footer-resize:hover { background: var(--accent); opacity: 0.6; }
.log-footer.dragging .log-footer-resize { background: var(--accent); }
.log-body {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 2px 12px;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 11px;
  color: var(--muted);
  line-height: 18px;
}
.log-body > div { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.log-footer .clipboard-indicator {
  position: absolute;
  right: 12px;
  bottom: 4px;
  background: var(--panel);
  z-index: 2;
  pointer-events: none;
}
.err { color: #d97a7a; }
/* Audit messages (LEGACY_ALERT_SYSTEM_PROPOSAL): `schema`/`info` findings use
   a muted tone so they don't read as errors; audit lines wrap (the default log
   line is single-line/ellipsis) so the multi-line fix recipe stays readable. */
.audit-note { color: var(--muted); }
.log-body > div.audit-line { white-space: normal; }
/* Inline "Re-save now" action button in the audit log block. */
.log-action-btn {
  font: inherit;
  font-size: 10px;
  margin-left: 2px;
  padding: 1px 7px;
  color: #1a1a1a;
  background: #ffbf00;
  border: none;
  border-radius: 3px;
  cursor: pointer;
}
.log-action-btn:hover { background: #ffcf3a; }
.log-action-btn:disabled { opacity: 0.5; cursor: default; }

/* ---- Engine-mode badge (bottom-right floating widget) ----
   Engine selector + last-render timings. See app.js boot block — created at
   load so it's visible during Pyodide/WASM init. */
#engine-badge {
  position: fixed;
  right: 8px;
  bottom: 6px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 4px 6px;
  background: var(--panel, #1f1f1f);
  border: 1px solid var(--border, #333);
  border-radius: 6px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.35);
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 11px;
  color: var(--text, #d8d8d8);
  user-select: none;
  pointer-events: auto;
  opacity: 0.85;
}
#engine-badge:hover { opacity: 1; }
#engine-badge .eb-row { display: flex; gap: 3px; align-items: center; }
#engine-badge .eb-modes .eb-mode {
  font: inherit;
  padding: 1px 8px;
  background: transparent;
  border: 1px solid var(--border, #333);
  border-radius: 4px;
  color: var(--muted, #888);
  cursor: pointer;
  line-height: 16px;
}
#engine-badge .eb-modes .eb-mode:hover { color: var(--text, #d8d8d8); }
#engine-badge .eb-modes .eb-mode.active {
  background: var(--accent, #6aa0d0);
  border-color: var(--accent, #6aa0d0);
  color: #111;
}
#engine-badge .eb-bars {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 10px;
  color: var(--muted, #888);
}
#engine-badge .eb-barrow {
  display: grid;
  grid-template-columns: 16px 80px 50px;
  align-items: center;
  gap: 4px;
}
#engine-badge .eb-label { text-align: right; color: var(--muted, #888); }
#engine-badge .eb-bar {
  height: 7px;
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--border, #333);
  border-radius: 2px;
  overflow: hidden;
  position: relative;
}
#engine-badge .eb-bar-fill {
  display: block;
  height: 100%;
  width: 0;
  transition: width 120ms ease-out;
}
#engine-badge .eb-py-fill { background: #d8a64a; }   /* python-ish gold */
#engine-badge .eb-rs-fill { background: #c8553d; }   /* rust orange */
#engine-badge .eb-num { text-align: right; }
#engine-badge .eb-barrow.inactive { opacity: 0.25; }
/* Busy state: shown while a deferred render is queued. Subtle pulsing border
   so the user can see work is happening without a heavy spinner. */
#engine-badge.busy {
  border-color: var(--accent, #6aa0d0);
  animation: engine-badge-pulse 0.7s ease-in-out infinite alternate;
}
@keyframes engine-badge-pulse {
  from { box-shadow: 0 2px 6px rgba(0,0,0,0.35), 0 0 0 0 rgba(106,160,208,0.6); }
  to   { box-shadow: 0 2px 6px rgba(0,0,0,0.35), 0 0 0 4px rgba(106,160,208,0.0); }
}

/* Band stack editor */
#xs-preview {
  width: 100%;
  height: 40px;
  border-radius: 4px;
  border: 1px solid var(--border);
  margin-bottom: 8px;
  display: block;
  cursor: default;
  box-sizing: border-box;
}
.band-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 5px;
  padding: 5px 7px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 4px;
}
.band-lbl {
  font-size: 10px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  min-width: 28px;
  flex-shrink: 0;
}
.band-row input[type="color"] {
  width: 28px;
  height: 24px;
  min-width: 28px;
  padding: 2px;
  border-radius: 3px;
  flex-shrink: 0;
  border: 1px solid var(--border);
  background: var(--panel);
  cursor: pointer;
}
.band-row input[type="range"] {
  flex: 1;
  min-width: 0;
}
.band-width-val {
  width: 26px;
  text-align: right;
  font-family: ui-monospace, monospace;
  font-size: 12px;
  color: var(--accent);
  flex-shrink: 0;
}
.rm-band {
  width: 20px !important;
  height: 20px;
  min-width: 20px;
  padding: 0 !important;
  background: var(--panel-soft) !important;
  border: 1px solid var(--border) !important;
  border-radius: 3px !important;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  color: var(--muted) !important;
  flex-shrink: 0;
}
.rm-band:hover {
  color: #d97a7a !important;
  border-color: #d97a7a !important;
  filter: none !important;
}
.rm-band:disabled {
  opacity: 0.3 !important;
  cursor: not-allowed !important;
}

/* Compact xs strip in Style tab */
.xs-strip-row {
  display: flex;
  gap: 8px;
  align-items: center;
}
#xs-strip {
  flex: 1;
  height: 116px;
  border-radius: 4px;
  border: 1px solid var(--border);
  cursor: pointer;
  display: block;
  min-width: 0;
}
#edit-xs-btn {
  flex-shrink: 0;
  font-size: 12px;
  padding: 6px 10px;
  white-space: nowrap;
}
.xs-profile-btn-row {
  display: flex;
  gap: 6px;
  margin-top: 6px;
}
.xs-profile-btn-row button {
  flex: 1;
  font-size: 11px;
  padding: 6px 8px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
}
/* Preset is the secondary action — the strip itself is the primary (edit). */
.xs-preset-btn {
  background: transparent;
  font-weight: 500;
  opacity: 0.85;
}
.xs-strip-wrap { position: relative; }
.xs-edit-badge {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  background: rgba(0,0,0,0.55);
  color: #fff;
  font-size: 13px;
  line-height: 1;
  pointer-events: none;
}
.xs-band-count {
  position: absolute;
  left: 6px;
  bottom: 6px;
  padding: 2px 6px;
  border-radius: 4px;
  background: rgba(0,0,0,0.55);
  color: #fff;
  font-size: 10px;
  letter-spacing: 0.04em;
  pointer-events: none;
}

/* Modal */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.65);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
}
.modal-overlay[hidden] { display: none !important; }
.modal-box {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  width: 640px;
  max-width: 96vw;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0,0,0,0.6);
}
.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px 10px;
  border-bottom: 1px solid var(--border);
}
.modal-header h2 {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.modal-close {
  width: 28px !important;
  height: 28px;
  padding: 0 !important;
  font-size: 16px;
  line-height: 1;
  background: var(--panel-soft) !important;
  border-radius: 50% !important;
  color: var(--muted) !important;
}
.modal-body {
  display: block;
  width: 100%;
  flex: 1;
  overflow: hidden;
  min-height: 260px;
  box-sizing: border-box;
  position: relative;
}
.xs-guide-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 5;
  overflow: visible;
}
.xs-preview-label-below {
  text-align: left;
  margin-top: 6px;
  margin-bottom: 0;
}
.modal-stack-col {
  width: 100%;
  display: flex;
  flex-direction: column;
  padding: 14px 18px;
  box-sizing: border-box;
  gap: 14px;
}
.modal-bar-row {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
  width: 100%;
}
.modal-preview-col {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-width: 0;
  width: 100%;
}
.xs-bar-wrap {
  position: relative;
  width: 100%;
  height: 64px;
  display: block;
  margin-top: 36px;
  margin-bottom: 36px;
}
.xs-bar-markers {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.xs-marker {
  position: absolute;
  top: 50%;
  width: 26px;
  height: 26px;
  margin-left: -13px;
  margin-top: -13px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: 900;
  line-height: 1;
  cursor: pointer;
  pointer-events: auto;
  user-select: none;
  box-shadow: 0 2px 5px rgba(0,0,0,0.45);
  transition: transform 0.08s ease;
  color: #fff;
}
.xs-marker:hover {
  transform: scale(1.2);
  z-index: 2;
}
.xs-marker.add {
  background: #1ea83c;
  border: 2px solid #0e6322;
}
.xs-marker.del {
  background: #d92424;
  border: 2px solid #7a0f0f;
}
.xs-bar-color-input {
  position: absolute;
  left: 0;
  top: 0;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
.modal-section-label {
  font-size: 10px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 8px;
  font-weight: 600;
}
.xs-preview-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  width: 100%;
  box-sizing: border-box;
}
.xs-preview-cell {
  display: flex;
  flex-direction: column;
}
.xs-strand-preview-cell {
  flex: 1 1 auto;
  min-width: 0;
}
.xs-knot-preview-cell {
  flex: 0 0 auto;
  margin-left: auto;
}
.xs-strand-preview {
  background: #f3ead3;
  border-radius: 4px;
  border: 2px solid var(--border);
  width: 100%;
  height: 320px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
#xs-strand-preview-canvas {
  display: block;
  width: 100%;
  height: 100%;
}
#xs-knot-preview {
  background: #f3ead3;
  border-radius: 4px;
  border: 2px solid var(--border);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 320px;
  height: 320px;
  box-sizing: border-box;
}
#xs-knot-preview svg {
  display: block;
  width: 100%;
  height: 100%;
  transform: scale(0.8);
  transform-origin: center center;
}
.strand-color-legend {
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 220px;
  overflow-y: auto;
}
.strand-color-legend .scl-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.strand-color-legend .scl-swatch {
  position: relative;
  display: inline-block;
  width: 22px;
  height: 22px;
  border-radius: 4px;
  border: 1px solid var(--border);
  flex: 0 0 auto;
  cursor: pointer;
}
.strand-color-legend .scl-swatch:hover { outline: 1px solid var(--text); }
.strand-color-legend .scl-swatch.editing {
  box-shadow: 0 0 0 2px var(--text);
}
.strand-color-legend .scl-header {
  display: block;
  margin-top: 2px;
  font-size: 12px;
  color: var(--text);
}
/* Bottom-right white triangle indicating a user-edited swatch. Applied to
   both the per-class grid swatches and the palette-range endpoint swatches. */
.scl-swatch.edited::after,
#strand-color-range .scr-swatch.edited::after {
  content: '';
  position: absolute;
  right: 0;
  bottom: 0;
  width: 7px;
  height: 7px;
  background: #fff;
  clip-path: polygon(100% 0, 100% 100%, 0 100%);
  pointer-events: none;
}
#strand-color-range .scr-swatch { position: relative; }
#strand-color-range .scr-axis-label {
  font-size: 11px;
  color: var(--muted);
}
.scr-mode-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.scr-mode-row select { flex: 1 1 auto; min-width: 0; }
.strand-color-count {
  font-size: 11px;
  color: var(--muted);
  white-space: nowrap;
  flex: 0 0 auto;
}
#strand-color-range .scr-row {
  display: flex;
  align-items: center;
  gap: 6px;
}
#strand-color-range .scr-swatch {
  width: 22px;
  height: 22px;
  border-radius: 4px;
  border: 1px solid var(--border);
  flex: 0 0 auto;
  cursor: pointer;
}
#strand-color-range .scr-swatch:hover { outline: 1px solid var(--text); }
#strand-color-range .scr-arrow {
  color: var(--muted);
  font-size: 12px;
}
#strand-color-range .scr-count {
  color: var(--muted);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  margin-left: auto;
}
.strand-color-legend .scl-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 4px;
}
.strand-color-legend .scl-reset {
  font-size: 11px;
  padding: 3px 6px;
  background: var(--panel);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 4px;
  cursor: pointer;
  align-self: flex-start;
}
.strand-color-legend .scl-reset:hover { background: var(--panel-2, var(--panel)); }
.strand-color-legend .scl-label { flex: 1 1 auto; color: var(--text); }
.strand-color-legend .scl-size { color: var(--muted); font-variant-numeric: tabular-nums; }
.strand-color-legend .scl-empty {
  font-size: 12px;
  color: var(--muted);
  font-style: italic;
  padding: 4px 2px;
}

.xs-cross-section-hint {
  font-size: 11px;
  color: var(--muted);
  line-height: 1.4;
  margin-top: 4px;
}
.xs-cross-section-hint strong { color: var(--text); font-weight: 600; }
.xs-bar-canvas {
  width: 100%;
  height: 64px;
  border-radius: 4px;
  border: 1px solid var(--border);
  cursor: crosshair;
  display: block;
}
.modal-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 18px;
  border-top: 1px solid var(--border);
  gap: 10px;
}
.modal-footer-left {
  display: flex;
  gap: 14px;
  align-items: center;
}
.modal-footer-right {
  display: flex;
  gap: 8px;
  align-items: center;
}
.modal-check-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--text);
  cursor: pointer;
  margin: 0;
  white-space: nowrap;
}
.modal-footer-right button {
  font-size: 12px;
  padding: 6px 12px;
}
.modal-profile-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 18px;
  border-bottom: 1px solid var(--border);
  background: var(--panel-soft);
}
.modal-profile-row .modal-section-label {
  margin-bottom: 0;
  white-space: nowrap;
  flex-shrink: 0;
  min-width: 80px;
}
.modal-profile-row select {
  flex: 1;
  padding: 5px 8px;
  background: var(--panel);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 4px;
  font-size: 12px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
}
/* Profile picker dropdown in sidebar */
.xs-profile-anchor { position: relative; }
.profile-dropdown {
  position: absolute;
  z-index: 200;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 6px;
  box-shadow: 0 8px 28px rgba(0,0,0,0.55);
  max-height: 320px;
  overflow-y: auto;
  margin-top: 4px;
}
.profile-option {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 10px;
  cursor: pointer;
  border-bottom: 1px solid var(--border);
}
.profile-option:last-child { border-bottom: none; }
.profile-option:hover { background: var(--panel-soft); }
.profile-option.custom-item {
  font-size: 12px;
  font-weight: 700;
  color: var(--accent);
  padding: 9px 10px;
  letter-spacing: 0.06em;
}
.profile-option-name { font-size: 11px; color: var(--text); line-height: 1.3; }
.profile-option-group { font-size: 9px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; }
/* Custom Tint dropdown — native <select> can't render colour swatches per option */
.tint-control { position: relative; display: flex; align-items: center; gap: 8px; }
.tint-select-btn {
  flex: 1;
  text-align: left;
  padding: 7px 9px;
  background: var(--panel);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 4px;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 13px;
  cursor: pointer;
}
.tint-select-btn:disabled { opacity: 0.5; cursor: default; }
.tint-swatch {
  width: 26px;
  height: 26px;
  flex-shrink: 0;
  border-radius: 4px;
  border: 1px solid var(--border);
  background: var(--panel-soft);
}
.tint-select-menu { top: 100%; }
.tint-select-option {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  cursor: pointer;
  border-bottom: 1px solid var(--border);
  font-size: 12px;
  color: var(--text);
}
.tint-select-option:last-child { border-bottom: none; }
.tint-select-option:hover,
.tint-select-option.selected { background: var(--panel-soft); }
.tint-option-swatch {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  border-radius: 3px;
  border: 1px solid var(--border);
}
/* Suppress FD dotted outlines in the modal strand preview */
#xs-knot-preview .fd-highlight { display: none !important; }
/* Start-from-profile row inside Custom Strand Profile modal */
.modal-start-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 18px;
  border-bottom: 1px solid var(--border);
  background: var(--panel-soft);
  flex-wrap: wrap;
}
.modal-start-row .modal-section-label { margin-bottom: 0; white-space: nowrap; flex-shrink: 0; }
#modal-start-swatch:not([hidden]) {
  width: 54px; height: 22px;
  border-radius: 3px;
  border: 1px solid var(--border);
  flex-shrink: 0;
  display: block;
}
#modal-start-swatch[hidden],
#modal-start-select[hidden],
#xs-profile[hidden] { display: none !important; }
#modal-start-select {
  flex: 1;
  min-width: 120px;
  padding: 5px 8px;
  background: var(--panel);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 4px;
  font-size: 12px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
}
/* Band-edit second modal */
.band-edit-fields { padding: 14px 18px 8px; display: flex; flex-direction: column; gap: 12px; }
.band-edit-actions { display: flex; flex-direction: column; gap: 6px; padding: 0 18px 14px; }
.band-edit-actions button { width: 100%; font-size: 12px; padding: 8px; }
.band-edit-actions .delete-btn { color: #d97a7a !important; border-color: #d97a7a !important; }

/* ---- Project bar ---- */
.project-bar {
  background: var(--panel-soft);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 10px;
  margin-bottom: 12px;
}
.project-select-row,
.project-action-row {
  display: flex;
  gap: 6px;
  align-items: center;
}
.project-select-row { margin-bottom: 6px; }
.project-bar-btn {
  width: auto !important;
  flex: 1;
  font-size: 11px !important;
  padding: 5px 8px !important;
  white-space: nowrap;
}
#project-menu { position: relative; flex: 0 0 auto; display: inline-block; }
#project-menu .project-bar-btn { flex: 0 !important; }
.project-next-btn {
  width: 100% !important;
  flex: none !important;
  margin-bottom: 6px;
}
.project-menu-list {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  z-index: 100;
  background: var(--panel-soft);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 4px 0;
  min-width: 160px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.4);
  display: flex;
  flex-direction: column;
}
.project-menu-list[hidden] { display: none; }
.project-menu-list button {
  background: transparent;
  color: var(--text);
  border: none;
  text-align: left;
  padding: 6px 12px;
  font-size: 12px;
  cursor: pointer;
  white-space: nowrap;
}
.project-menu-list button:hover:not(:disabled) { background: var(--panel); color: var(--accent); }
.project-menu-list button:disabled { color: var(--muted); cursor: default; opacity: 0.55; }
.project-bar-title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--muted);
  margin-bottom: 6px;
}
.project-selection-count {
  margin-top: 6px;
  font-size: 11px;
  color: var(--muted);
  font-style: italic;
}
/* Project-bar audit summary (LEGACY_ALERT_SYSTEM_PROPOSAL §follow-ons):
   click-to-filter the library grid to flagged knots only. */
.audit-summary {
  margin-top: 4px;
  font-size: 11px;
  color: #c8922e;
  cursor: pointer;
  user-select: none;
}
.audit-summary:hover { text-decoration: underline; }
.audit-summary.is-active {
  color: #1a1a1a;
  background: #ffbf00;
  border-radius: 3px;
  padding: 1px 5px;
  align-self: flex-start;
}

/* ---- Knots bar (header above the library grid) ---- */
.knots-bar { margin-bottom: 8px; }
.knots-bar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.knots-bar-header .project-bar-title { margin-bottom: 0; }
#new-menu { flex: 0 0 auto; }
#new-menu .copy-menu-list { left: auto; right: 0; }

/* ---- Storage footer (localStorage usage bar) ---- */
.storage-footer {
  flex: 0 0 auto;
  padding: 8px 0 2px;
  border-top: 1px solid var(--border);
  margin-top: 8px;
  font-size: 11px;
  color: var(--muted);
}
.storage-footer-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 4px;
}
.storage-footer-label {
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.storage-footer-text {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 10px;
  color: var(--text);
}
.storage-bar {
  position: relative;
  width: 100%;
  height: 6px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 3px;
  overflow: hidden;
  display: flex;
}
.storage-seg {
  height: 100%;
  width: 0;
  transition: width 0.2s ease;
}
.storage-seg-libraries { background: #3e8a3e; }
.storage-seg-clipboard { background: #c9a23a; }
.storage-seg-settings  { background: #6a7a8a; }
.storage-bar.near-cap .storage-seg-libraries { background: #c44; }

.storage-footer-spacer { display: inline-flex; align-items: center; gap: 6px; }
.supabase-sync-dot {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #6a7a8a;
  flex: 0 0 auto;
}
.supabase-sync-dot[data-state="ok"]      { background: #3e8a3e; }
.supabase-sync-dot[data-state="pending"] { background: #c9a23a; }
.supabase-sync-dot[data-state="error"]   { background: #c44; }
.supabase-sync-dot[data-state="idle"]    { background: transparent; border: 1px dashed var(--border); }

/* ---- Library grid ---- */
.library-grid-wrap {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
/* Scroll-clip indicators: gold strips overlay the top/bottom edge of the
   scroll viewport when there is hidden content above/below. Pseudo-elements
   sit on the wrapper (not the scroller) so they render on top of the cards
   regardless of scroll position. JS toggles `clip-top` / `clip-bottom`. */
.library-grid-wrap::before,
.library-grid-wrap::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--accent);
  z-index: 5;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s;
}
.library-grid-wrap::before { top: 0; }
.library-grid-wrap::after  { bottom: 0; }
.library-grid-wrap.clip-top::before    { opacity: 1; }
.library-grid-wrap.clip-bottom::after  { opacity: 1; }
.library-grid {
  display: grid;
  /* Responsive 1-4 columns based on panel width (cards min ~110px). */
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 10px;
  /* Fill the wrap (which itself fills the panel body's remaining height)
     and scroll internally. The wrap's flex column ensures we honour
     min-height: 0 so content can scroll rather than overflow the panel. */
  flex: 1 1 auto;
  min-height: 0;
  align-content: start;
  align-items: start;       /* don't stretch cards to row height */
  grid-auto-rows: max-content; /* rows hug their content; never shrink */
  overflow-y: auto;
}
.lib-empty {
  grid-column: 1 / -1;
  text-align: center;
  color: var(--muted);
  font-size: 12px;
  padding: 24px 0;
}
.lib-card {
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
  background: var(--panel);
  transition: border-color 0.15s;
  display: flex;
  flex-direction: column;
}
.lib-card:hover { border-color: var(--accent); }
.lib-card.active {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent);
}
.lib-body {
  padding: 6px 6px 0;
  cursor: pointer;
  flex: 1;
}
.lib-thumb-wrap {
  position: relative;
}
.lib-thumb {
  width: 100%;
  height: 72px;
  object-fit: contain;
  display: block;
  border-radius: 3px;
  margin-bottom: 4px;
}
.lib-alert-badge {
  position: absolute;
  right: 3px;
  bottom: 7px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #1a1a1a;
  color: #ffbf00;
  font-size: 11px;
  line-height: 16px;
  text-align: center;
  box-shadow: 0 0 0 1px #ffbf00, 0 1px 3px rgba(0,0,0,0.6);
  pointer-events: auto;
  cursor: help;
}
/* Severity tint: amber for `coerce` (render differs), grey for `schema`-only
   (cosmetic housekeeping). See LEGACY_ALERT_SYSTEM_PROPOSAL. */
.lib-alert-badge.sev-coerce {
  color: #ffbf00;
  box-shadow: 0 0 0 1px #ffbf00, 0 1px 3px rgba(0,0,0,0.6);
}
.lib-alert-badge.sev-schema {
  color: #aab0b8;
  box-shadow: 0 0 0 1px #aab0b8, 0 1px 3px rgba(0,0,0,0.6);
}
.lib-alert-badge.sev-info {
  color: #6db3e8;
  box-shadow: 0 0 0 1px #6db3e8, 0 1px 3px rgba(0,0,0,0.6);
}
.lib-alert-badge sup {
  font-size: 7px;
  line-height: 0;
}
.lib-label {
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--text);
  padding: 0 2px 4px;
  text-align: center;
}
.lib-actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 2px;
  padding: 2px 4px 4px;
}
.lib-del-btn,
.lib-move-btn {
  width: 26px !important;
  height: 26px !important;
  padding: 4px !important;
  border: none !important;
  background: transparent !important;
  cursor: pointer;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  flex-shrink: 0;
}
.lib-del-btn:hover { background: rgba(229,53,53,0.12) !important; }
.lib-move-btn:hover { background: var(--panel-soft) !important; color: var(--text); }

/* ---- Move-to-project dropdown ---- */
.move-dropdown {
  position: fixed;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 5px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.5);
  z-index: 600;
  min-width: 130px;
  overflow: hidden;
}
.move-dropdown-item {
  padding: 8px 14px;
  font-size: 12px;
  cursor: pointer;
  color: var(--text);
}
.move-dropdown-item:hover {
  background: var(--panel-soft);
  color: var(--accent);
}

/* L3 — header save cluster */
.header-save-cluster {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.header-save-cluster #new-pattern-name {
  padding: 4px 8px;
  border: 1px solid var(--border);
  border-radius: 4px;
  font-size: 12px;
  background: var(--panel-soft);
  color: var(--text);
  width: 160px;
}
.header-save-cluster #new-pattern-name[hidden] { display: none; }

/* L4 — panel collapse / expand / resize */
.panel-collapse-btn {
  flex: 0 0 auto;
  align-self: stretch;
  width: 100%;
  height: 26px;
  padding: 0 10px;
  font-size: 13px;
  line-height: 1;
  background: var(--panel-soft);
  color: var(--muted);
  border: none;
  border-bottom: 1px solid var(--border);
  border-radius: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.panel-collapse-btn .panel-collapse-title {
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--text);
  text-transform: uppercase;
  font-size: 11px;
}
.panel-collapse-btn .panel-collapse-chevron {
  font-size: 14px;
  line-height: 1;
  color: var(--muted);
}
.panel-collapse-btn:hover { color: var(--accent); background: var(--panel); }
.panel-collapse-btn:hover .panel-collapse-title,
.panel-collapse-btn:hover .panel-collapse-chevron { color: var(--accent); }

.panel-expand-btn {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 10px 0 0;
  /* 20% bigger than the collapsed-panel default (11px). */
  font-size: 13.2px;
  font-weight: 600;
  background: var(--panel-soft);
  color: var(--text);
  border: none;
  border-radius: 0;
  cursor: pointer;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  /* Anchor the title at the top of the thin panel. With vertical-rl,
     justify-content controls the inline (vertical) axis. */
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
aside.library-aside .panel-expand-btn-left,
aside.library-aside .panel-expand-btn {
  transform: rotate(180deg);
  /* After the 180° rotation, flex-start would push text to the bottom of
     the visible panel, so flip the alignment to keep it at the top. */
  justify-content: flex-end;
}
.panel-expand-btn:hover { color: var(--accent); background: var(--panel); }
/* Our `display: flex` above has the same specificity as the UA
   `[hidden] { display: none }` rule, so author styles would otherwise
   keep the vertical-text expand button visible on top of the horizontal
   collapse bar even when the panel is open. Force it hidden here. */
.panel-expand-btn[hidden] { display: none !important; }

body.lib-collapsed aside.library-aside { padding: 0; overflow: hidden; }
body.lib-collapsed aside.library-aside #library-panel-body,
body.lib-collapsed aside.library-aside #library-panel-collapse,
body.lib-collapsed aside.library-aside #library-panel-resize { display: none; }
body.lib-collapsed aside.library-aside #library-panel-expand { display: flex !important; }

.inspector-toolbar {
  display: flex;
  gap: 6px;
  padding: 6px 10px 8px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 6px;
}
.inspector-toolbar button { width: auto; }

body.insp-collapsed aside.inspector-aside { padding: 0; overflow: hidden; }
body.insp-collapsed aside.inspector-aside #inspector-panel-body,
body.insp-collapsed aside.inspector-aside .tabs,
body.insp-collapsed aside.inspector-aside .tab-content,
body.insp-collapsed aside.inspector-aside #inspector-panel-collapse,
body.insp-collapsed aside.inspector-aside #inspector-panel-resize { display: none; }
body.insp-collapsed aside.inspector-aside #inspector-panel-expand { display: flex !important; }

.panel-resize-handle {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 6px;
  cursor: col-resize;
  z-index: 11;
  background: transparent;
  transition: background 0.12s;
}
.panel-resize-handle:hover,
.panel-resize-handle.dragging { background: var(--accent); opacity: 0.6; }
.panel-resize-handle-right { right: -3px; }
.panel-resize-handle-left { left: -3px; }
body.resizing { cursor: col-resize !important; user-select: none !important; }
body.resizing * { user-select: none !important; }

/* L5: canvas debug overlay */
.debug-overlay {
  position: relative;
  display: inline-flex;
}
.debug-overlay-btn {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(20, 18, 14, 0.78);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 4px;
  cursor: pointer;
  padding: 0;
  transition: border-color 0.12s, background 0.12s, color 0.12s;
}
.debug-overlay-btn:hover,
.debug-overlay.open .debug-overlay-btn {
  background: var(--panel);
  border-color: var(--accent);
  color: var(--accent);
}
.debug-overlay-popover {
  position: absolute;
  bottom: calc(100% + 6px);
  left: 0;
  width: 320px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 12px 14px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.45);
  font-size: 12px;
  color: var(--text);
}
.debug-overlay-popover[hidden] { display: none; }
.debug-overlay-row { padding: 6px 0; border-bottom: 1px solid var(--border); }
.debug-overlay-row:last-of-type { border-bottom: none; }
.debug-overlay-check {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  user-select: none;
  font-size: 13px;
  color: var(--text);
}
.debug-overlay-check input[type="checkbox"] { margin: 0; }
.debug-overlay-hint {
  margin-top: 4px;
  font-size: 11px;
  line-height: 1.4;
  color: var(--muted);
}
.debug-overlay-footer {
  margin-top: 8px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}
.debug-overlay-footer .primary {
  background: var(--accent);
  color: #111;
  border: 1px solid var(--accent);
  padding: 5px 14px;
  border-radius: 4px;
  cursor: pointer;
  font-weight: 600;
  font-size: 12px;
}
.debug-overlay-footer .primary:hover { filter: brightness(1.1); }

/* Unsaved-changes confirmation modal */
.unsaved-modal-box { width: min(460px, 92vw); }
.unsaved-modal-body { min-height: 0; padding: 18px 22px 4px; }
.unsaved-modal-msg {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text);
}
.unsaved-modal-msg strong { color: var(--accent); }
#unsaved-modal .modal-footer { padding: 14px 18px; }
#unsaved-modal .modal-footer button {
  font-size: 12px;
  padding: 7px 14px;
  border-radius: 4px;
  cursor: pointer;
}
#unsaved-modal .modal-footer button.danger {
  background: transparent;
  color: #e88a8a;
  border: 1px solid #6a2a2a;
}
#unsaved-modal .modal-footer button.danger:hover {
  background: #3a1a1a;
  color: #ffb4b4;
}
#unsaved-modal .modal-footer button.primary {
  background: var(--accent);
  color: #111;
  border: 1px solid var(--accent);
  font-weight: 600;
}
#unsaved-modal .modal-footer button.primary:hover { filter: brightness(1.1); }


/* ── Export tab: export-definition manager (EXPORT_FACET_PROPOSAL §4) ── */
.export-def-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 10px;
}
.export-def-empty {
  color: var(--muted);
  font-size: 12px;
  font-style: italic;
  padding: 8px 2px;
}
.export-def-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 10px;
  background: var(--panel-soft);
  border: 1px solid var(--border);
  border-radius: 5px;
}
.export-def-info { min-width: 0; flex: 1; }
.export-def-title { font-size: 13px; font-weight: 600; }
.export-def-meta { font-size: 11.5px; color: var(--muted); margin-top: 2px; }
.export-def-time { font-size: 11px; color: var(--muted); margin-top: 2px; font-style: italic; }
.export-def-actions {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 0 0 auto;
}
.export-def-btn {
  font-size: 11px;
  padding: 3px 8px;
  background: var(--panel);
  color: var(--fg);
  border: 1px solid var(--border);
  border-radius: 4px;
  cursor: pointer;
}
.export-def-btn:hover:not(:disabled) { border-color: var(--accent); }
.export-def-btn:disabled { opacity: 0.45; cursor: default; }
.export-def-btn-primary { background: var(--accent); color: #111; border-color: var(--accent); font-weight: 600; }
.export-def-btn-danger:hover:not(:disabled) { border-color: #c0504d; color: #e08a87; }
.export-add-btn {
  font-size: 12px;
  padding: 6px 12px;
  background: var(--panel-soft);
  color: var(--fg);
  border: 1px dashed var(--border);
  border-radius: 5px;
  cursor: pointer;
  width: 100%;
}
.export-add-btn:hover { border-color: var(--accent); color: var(--accent); }

/* ── App-styled prompt / confirm dialogs (lib/app-modals.js) ── */
.app-modal-box { width: min(440px, 92vw); }
.app-modal-body {
  padding: 16px 18px 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 0 0 auto;
  min-height: 0;
}
.app-modal-msg {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text);
}
.app-modal-input {
  width: 100%;
  box-sizing: border-box;
  font-size: 13px;
  padding: 7px 10px;
  background: var(--panel-soft);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 4px;
  outline: none;
}
.app-modal-input:focus { border-color: var(--accent); }
.app-modal-error {
  margin-top: 8px;
  font-size: 12px;
  color: #e88a8a;
}
.app-modal-dup-preview {
  max-height: 200px;
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--panel-soft);
  padding: 6px 10px;
  font-size: 12px;
  color: var(--text);
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.app-modal-dup-title {
  font-weight: 600;
  color: var(--muted);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-bottom: 1px solid var(--border);
  padding-bottom: 3px;
  margin-bottom: 4px;
}
.app-modal-dup-sec-head {
  font-weight: 600;
  color: var(--muted);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-bottom: 1px solid var(--border);
  padding-bottom: 3px;
  margin-top: 4px;
  margin-bottom: 2px;
}
.app-modal-dup-sec-head:first-child { margin-top: 0; }
.app-modal-dup-folder > span:first-child { color: var(--text); font-weight: 600; }
.app-modal-dup-data { display: flex; flex-direction: column; gap: 3px; padding-top: 2px; }
.app-modal-dup-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  white-space: nowrap;
}
.app-modal-dup-row > span {
  overflow: hidden;
  text-overflow: ellipsis;
}
.app-modal-dup-row[hidden] { display: none; }
.app-modal-dup-row .app-modal-input,
.app-modal-dup-row .app-modal-dest-row { min-width: 0; width: 100%; }
.app-modal-dup-head {
  font-weight: 600;
  color: var(--muted);
  border-bottom: 1px solid var(--border);
  padding-bottom: 3px;
  margin-bottom: 2px;
}
.app-modal-dup-target.has-conflict { color: #e88a8a; }
.app-modal-dup-bang {
  display: inline-block;
  margin-left: 6px;
  font-size: 14px;
  line-height: 1;
  color: #ff4d4d;
}
.app-modal-checkbox-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--text);
  cursor: pointer;
  user-select: none;
}
.app-modal-checkbox-row input[type="checkbox"] { margin: 0; }
.app-modal-checkbox-row[hidden] { display: none; }
.app-modal-dest-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.app-modal-dest-row .app-modal-input { flex: 1 1 auto; min-width: 0; }
.app-modal-dest-hint {
  font-size: 12px;
  color: var(--muted);
  flex: 0 0 auto;
}
.app-modal-dest-hint[hidden] { display: none; }
.app-modal-segment {
  display: flex;
  border: 1px solid var(--border);
  border-radius: 4px;
  overflow: hidden;
  width: fit-content;
  margin-bottom: 4px;
}
.app-modal-segment-btn {
  background: var(--panel-soft);
  color: var(--muted);
  border: none;
  padding: 6px 14px;
  font-size: 12px;
  cursor: pointer;
}
.app-modal-segment-btn + .app-modal-segment-btn { border-left: 1px solid var(--border); }
.app-modal-segment-btn:hover { color: var(--text); }
.app-modal-segment-btn.is-active {
  background: var(--accent);
  color: var(--text);
}
.app-modal-box .modal-footer { padding: 12px 18px; }
.app-modal-box .modal-footer button {
  font-size: 12px;
  padding: 7px 14px;
  border-radius: 4px;
  cursor: pointer;
}
.app-modal-box .modal-footer button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  filter: none;
}
.app-modal-box .modal-footer button.primary {
  background: var(--accent);
  color: #111;
  border: 1px solid var(--accent);
  font-weight: 600;
}
.app-modal-box .modal-footer button.primary:hover { filter: brightness(1.1); }
.app-modal-box .modal-footer button.danger {
  background: transparent;
  color: #e88a8a;
  border: 1px solid #6a2a2a;
}
.app-modal-box .modal-footer button.danger:hover {
  background: #3a1a1a;
  color: #ffb4b4;
}

/* ---------- OKLCH colour picker popover ---------- */
.oklch-picker {
  position: fixed;
  z-index: 10000;
  background: #1d1f24;
  border: 1px solid #3a3d44;
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.5);
  font-family: inherit;
  font-size: 11px;
  color: #d8d8d8;
  user-select: none;
}
.oklch-picker .ok-head {
  padding: 6px 10px;
  border-bottom: 1px solid #2c2f35;
  background: #16181c;
  border-radius: 7px 7px 0 0;
}
.oklch-picker .ok-title {
  font-weight: 600;
  color: #d8d8d8;
  letter-spacing: 0.3px;
}
.oklch-picker .ok-body { padding: 10px; }
.oklch-picker .ok-2d {
  display: block;
  cursor: crosshair;
  border-radius: 3px;
  flex: none;
}
.oklch-picker .ok-axis-c {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-size: 10px;
  color: #888;
  text-align: center;
  font-weight: 400 !important;
}
.oklch-picker .ok-axis-row { margin-top: 2px; margin-bottom: 4px; }
.oklch-picker .ok-axis-h {
  flex: 1;
  font-size: 10px;
  color: #888;
  text-align: center;
}
.oklch-picker .ok-eyedrop {
  background: #2a2d33;
  color: #d8d8d8;
  border: 1px solid #3a3d44;
  border-radius: 3px;
  padding: 2px 8px;
  cursor: pointer;
  font-size: 12px;
  line-height: 1.2;
}
.oklch-picker .ok-eyedrop:hover { background: #34373e; }
.oklch-picker .ok-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
}
.oklch-picker .ok-row[hidden] { display: none; }
.oklch-picker .ok-lab {
  width: 22px;
  margin-right: 4px;
  text-align: center;
  font-weight: 600;
  color: #b8b8b8;
}
.oklch-picker .ok-bar {
  display: block;
  cursor: ew-resize;
  border-radius: 3px;
  width: 390px;
  flex: none;
}
.oklch-picker .ok-num {
  width: 54px;
  background: #14161a;
  color: #d8d8d8;
  border: 1px solid #3a3d44;
  border-radius: 3px;
  padding: 2px 4px;
  font-size: 11px;
  font-family: inherit;
}
.oklch-picker .ok-rgb-row { margin-top: 10px; }
.oklch-picker .ok-swatch {
  width: 22px;
  height: 22px;
  border: 1px solid #3a3d44;
  border-radius: 3px;
}
.oklch-picker .ok-hex {
  flex: 1;
  background: #14161a;
  color: #d8d8d8;
  border: 1px solid #3a3d44;
  border-radius: 3px;
  padding: 3px 6px;
  font-size: 11px;
  font-family: ui-monospace, Menlo, monospace;
}
.oklch-picker .ok-copy,
.oklch-picker .ok-cancel,
.oklch-picker .ok-ok {
  background: #2a2d33;
  color: #d8d8d8;
  border: 1px solid #3a3d44;
  border-radius: 3px;
  padding: 4px 14px;
  cursor: pointer;
  font-size: 11px;
}
.oklch-picker .ok-copy:hover,
.oklch-picker .ok-cancel:hover,
.oklch-picker .ok-ok:hover { background: #34373e; }
.oklch-picker .ok-ok {
  background: #3a6b3a;
  border-color: #4e8a4e;
  color: #fff;
  font-weight: 600;
}
.oklch-picker .ok-ok:hover { background: #468146; }
.oklch-picker .ok-actions-row {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid #2c2f35;
}
.oklch-picker .ok-actions-spacer { flex: 1; }
.oklch-picker .ok-swatches-row {
  margin-top: 10px;
}
.oklch-picker .ok-swatches {
  display: flex;
  gap: 4px;
  overflow-x: auto;
  flex: 1;
  padding-bottom: 4px;
  scrollbar-width: thin;
}
.oklch-picker .ok-swatches::-webkit-scrollbar { height: 6px; }
.oklch-picker .ok-swatches::-webkit-scrollbar-thumb {
  background: #3a3d44; border-radius: 3px;
}
.oklch-picker .ok-swatch-chip {
  width: 22px;
  height: 22px;
  flex: none;
  border: 1px solid #3a3d44;
  border-radius: 3px;
  padding: 0;
  cursor: pointer;
}
.oklch-picker .ok-swatch-chip:hover { border-color: #d8d8d8; }
.oklch-picker .ok-swatches.is-blend-target {
  outline: 2px dashed #e8c96a;
  outline-offset: 2px;
  border-radius: 3px;
}
.oklch-picker .ok-saved-row { margin-top: 6px; }
.oklch-picker .ok-saved {
  display: flex;
  gap: 4px;
  overflow-x: auto;
  flex: 1;
  min-height: 22px;
  padding-bottom: 4px;
  scrollbar-width: thin;
}
.oklch-picker .ok-saved::-webkit-scrollbar { height: 6px; }
.oklch-picker .ok-saved::-webkit-scrollbar-thumb {
  background: #3a3d44; border-radius: 3px;
}
.oklch-picker .ok-saved.is-blend-target {
  outline: 2px dashed #e8c96a;
  outline-offset: 2px;
  border-radius: 3px;
}
.oklch-picker .ok-saved-add {
  width: 22px; height: 22px; flex: none;
  border: 1px solid #3a3d44;
  border-radius: 3px;
  background: #2a2d33;
  color: #d8d8d8;
  font-size: 15px;
  line-height: 1;
  padding: 0;
  cursor: pointer;
}
.oklch-picker .ok-saved-add:hover { background: #34373e; }
.oklch-picker .ok-saved-input-row { margin-top: 6px; }
.oklch-picker .ok-saved-input {
  flex: 1;
  background: #1c1e22;
  border: 1px solid #3a3d44;
  border-radius: 3px;
  color: #e8e8e8;
  font: inherit;
  padding: 3px 6px;
}
.oklch-picker .ok-saved-commit {
  flex: none;
  border: 1px solid #3a3d44;
  border-radius: 3px;
  background: #2a2d33;
  color: #d8d8d8;
  padding: 3px 10px;
  cursor: pointer;
}
.oklch-picker .ok-saved-commit:hover { background: #34373e; }
.oklch-picker .ok-blend-row { margin-top: 6px; }
.oklch-picker .ok-blend-chip {
  width: 22px; height: 22px; flex: none;
  border: 1px solid #3a3d44;
  border-radius: 3px;
  padding: 0;
  cursor: pointer;
}
.oklch-picker .ok-blend-chip:hover { border-color: #d8d8d8; }
.oklch-picker .ok-blend-chip.is-picking {
  border-color: #e8c96a;
  box-shadow: 0 0 0 2px rgba(232, 201, 106, 0.45);
}
.oklch-picker .ok-blend-bar {
  display: block;
  flex: 1;
  height: 22px;
  cursor: pointer;
  border-radius: 3px;
}

/* Minimal lightness-only picker (Shades palette "Range" endpoint). */
.lpick-backdrop {
  position: fixed;
  inset: 0;
  z-index: 10001;
  background: rgba(0, 0, 0, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
}
.lpick-modal {
  background: #1d1f24;
  border: 1px solid #3a3d44;
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
  padding: 14px;
  font-family: inherit;
  font-size: 11px;
  color: #d8d8d8;
  user-select: none;
}
.lpick-title {
  font-weight: 600;
  letter-spacing: 0.3px;
  margin-bottom: 10px;
}
.lpick-bar {
  display: block;
  cursor: ew-resize;
  border-radius: 3px;
}
.lpick-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 12px;
}
.lpick-cancel,
.lpick-ok {
  background: #2a2d33;
  color: #d8d8d8;
  border: 1px solid #3a3d44;
  border-radius: 3px;
  padding: 4px 14px;
  cursor: pointer;
  font-size: 11px;
}
.lpick-cancel:hover,
.lpick-ok:hover { background: #34373e; }
.lpick-ok {
  background: #3a6b3a;
  border-color: #4e8a4e;
  color: #fff;
  font-weight: 600;
}
.lpick-ok:hover { background: #468146; }

.swatch-btn {
  width: 36px;
  height: 22px;
  border: 1px solid #3a3d44;
  border-radius: 3px;
  padding: 0;
  cursor: pointer;
  vertical-align: middle;
}
.swatch-btn:disabled { opacity: 0.45; cursor: not-allowed; }

/* ========================================================================
   Role-based palette system (PALETTE_SYSTEM_PROPOSAL).
   ===================================================================== */

/* --- Library-panel Projects/Palettes tab strip --- */
.lib-tabstrip {
  display: flex;
  gap: 2px;
  padding: 6px 8px 0;
  border-bottom: 1px solid var(--border);
}
.lib-tab-btn {
  flex: 1;
  background: transparent;
  color: var(--muted);
  border: 1px solid transparent;
  border-bottom: none;
  padding: 6px 8px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  border-radius: 4px 4px 0 0;
}
.lib-tab-btn:hover { color: var(--text); }
.lib-tab-btn.active {
  color: var(--accent);
  background: var(--panel-soft);
  border-color: var(--border);
}
.lib-tab-pane { display: flex; flex-direction: column; min-height: 0; flex: 1; }
.lib-tab-pane[hidden] { display: none; }

/* --- Palettes manager --- */
.palettes-bar {
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
}
.palettes-bar-actions { display: flex; gap: 6px; margin-top: 6px; }
.palettes-bar-actions .project-bar-btn { flex: 1; }

.palette-grid-wrap { flex: 1; overflow-y: auto; min-height: 0; }
/* Multi-column grid mirroring the Projects-tab knot list. */
.palette-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 10px;
  padding: 10px 12px;
  align-content: start;
}
.palette-empty {
  grid-column: 1 / -1;
  color: var(--muted);
  font-size: 12px;
  text-align: center;
  padding: 20px 8px;
}
.palette-card {
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--panel);
  padding: 6px;
  cursor: pointer;
  transition: border-color 0.15s;
}
.palette-card:hover { border-color: var(--accent); }
.palette-card.is-active {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent);
}
.palette-card-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--text);
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 4px 2px 1px;
}

/* Role mockup — a ground rectangle with prominence-sized circles. Shared by
   the builder (large, interactive) and the palette cards (small). */
.palette-mockup { display: block; width: 100%; height: auto; border-radius: 4px; }
.palette-mockup-card { height: 64px; }
.palette-mockup-builder {
  margin: 4px 0 6px;
  border: 1px solid var(--border);
}
.palette-mockup-builder circle:hover { filter: brightness(1.08); }

/* Dashed "suggested" indicator — hidden by default, revealed only while the
   SVG carries .show-suggested (toggled on hover of the Re-suggest button). */
.pm-ground-hint { stroke: none; }
.palette-mockup-builder.show-suggested circle[data-suggested] {
  stroke: rgba(255, 255, 255, 0.95);
  stroke-width: 1.9;
  stroke-dasharray: 4 3;
}
.palette-mockup-builder.show-suggested .pm-ground-hint[data-suggested] {
  stroke: rgba(255, 255, 255, 0.95);
  stroke-width: 1.9;
  stroke-dasharray: 4 3;
}

/* Re-suggest button in the builder's Seeds row. */
.pb-resuggest {
  background: var(--panel-soft);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 4px;
  font-size: 11px;
  padding: 3px 8px;
  cursor: pointer;
  margin-left: auto;
}
.pb-resuggest:hover { border-color: var(--accent); color: var(--accent); }

/* --- Palette builder (construction / import) --- */
.palette-builder {
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  background: var(--panel);
}
.palette-builder[hidden] { display: none; }
.palette-builder h3 {
  margin: 0 0 8px;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--accent);
}
.pb-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.pb-row label { font-size: 12px; color: var(--muted); min-width: 70px; }
.pb-row input[type="text"] {
  flex: 1;
  background: var(--panel-soft);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 4px 6px;
  font-size: 12px;
}
.pb-row textarea {
  flex: 1;
  background: var(--panel-soft);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 4px 6px;
  font-size: 11px;
  font-family: ui-monospace, monospace;
  resize: vertical;
  min-height: 56px;
}
.pb-seed {
  width: 30px;
  height: 24px;
  border-radius: 4px;
  border: 1px solid var(--border);
  cursor: pointer;
  padding: 0;
}
.pb-roles { display: flex; flex-direction: column; gap: 5px; margin: 8px 0; }
.pb-role {
  display: flex;
  align-items: center;
  gap: 8px;
}
.pb-role-sw {
  width: 28px;
  height: 22px;
  border-radius: 4px;
  border: 1px solid var(--border);
  cursor: pointer;
  flex-shrink: 0;
  padding: 0;
}
.pb-role.is-suggested .pb-role-sw {
  border-style: dashed;
  border-color: var(--accent);
  opacity: 0.78;
}
.pb-role-label { font-size: 12px; color: var(--text); flex: 1; }
.pb-role-tag {
  font-size: 10px;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.pb-role.is-suggested .pb-role-accept {
  display: inline-block;
}
.pb-role-accept {
  display: none;
  background: var(--panel-soft);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 4px;
  font-size: 10px;
  padding: 2px 6px;
  cursor: pointer;
}
.pb-role-accept:hover { border-color: var(--accent); color: var(--accent); }
.pb-actions { display: flex; gap: 6px; margin-top: 8px; }
.pb-actions button {
  flex: 1;
  background: var(--panel-soft);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 5px 8px;
  font-size: 12px;
  cursor: pointer;
}
.pb-actions button.pb-primary { border-color: var(--accent); color: var(--accent); }
.pb-actions button:hover { background: var(--panel); }
.pb-hint { font-size: 11px; color: var(--muted); margin: 4px 0 0; }
.pb-error { font-size: 11px; color: var(--state-D); margin: 4px 0 0; }

/* --- Colour-tab active-palette row --- */
/* --- Colour-tab Palette strip (COLOUR_WORKFLOW_PROPOSAL §4.1) --- */
.palette-strip {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 9px;
  margin-bottom: 8px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--panel-soft);
}
.palette-strip-dropdown {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
  background: var(--panel);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 4px 8px;
  font-size: 12px;
  cursor: pointer;
}
.palette-strip-dropdown:hover { border-color: var(--accent); }
#palette-strip-name {
  flex: 1;
  min-width: 0;
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.palette-strip-caret { color: var(--muted); font-size: 10px; }
.palette-strip-swatches { display: flex; gap: 3px; }
.palette-strip-sw {
  width: 14px;
  height: 14px;
  border-radius: 3px;
  border: 1px solid rgba(0,0,0,0.3);
}
.palette-strip-menu-btn {
  flex: 0 0 auto;
  width: auto;
  background: var(--panel);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 4px 9px;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
}
.palette-strip-menu-btn:hover { border-color: var(--accent); color: var(--accent); }

/* Custom palette dropdown list — hover previews, click commits (§4.2). */
.palette-popup {
  position: fixed;
  z-index: 4000;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 6px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.4);
  padding: 4px;
  max-height: 360px;
  overflow-y: auto;
  min-width: 200px;
}
.palette-popup-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 7px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 12px;
  color: var(--text);
}
.palette-popup-item:hover, .palette-popup-item.is-preview {
  background: var(--panel-soft);
}
.palette-popup-item.is-active { outline: 1px solid var(--accent); }
.palette-popup-item .pp-swatches { display: flex; gap: 2px; margin-left: auto; }
.palette-popup-item .pp-sw {
  width: 12px; height: 12px; border-radius: 2px;
  border: 1px solid rgba(0,0,0,0.3);
}
.palette-popup-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.palette-builder-inline { margin-bottom: 8px; border: 1px solid var(--border); border-radius: 6px; }

/* Project-bar palette chip (§4.5). */
.project-palette-chip {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  font-size: 11px;
  color: var(--muted);
  cursor: pointer;
}
.project-palette-chip .ppc-swatches { display: flex; gap: 2px; }
.project-palette-chip .ppc-sw {
  width: 11px; height: 11px; border-radius: 2px;
  border: 1px solid rgba(0,0,0,0.3);
}
.project-palette-chip:hover { color: var(--text); }

/* Palette grid: usage line + bucket headings (§4.6). */
.palette-card-usage {
  font-size: 10px;
  color: var(--muted);
  text-align: center;
  padding: 1px 2px 0;
}
.palette-bucket-head {
  grid-column: 1 / -1;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
  padding: 6px 2px 0;
  border-top: 1px solid var(--border);
  margin-top: 2px;
}
.palette-bucket-head:first-child { border-top: none; margin-top: 0; }

/* --- Picker role-suggestion row --- */
.ok-roles-row { flex-wrap: wrap; }
.ok-roles {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  align-items: center;
}
.ok-role-chip {
  display: flex;
  align-items: center;
  gap: 4px;
  background: var(--panel-soft);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 2px 6px 2px 3px;
  cursor: pointer;
  font-size: 10px;
  color: var(--text);
}
.ok-role-chip:hover { border-color: var(--accent); }
.ok-role-chip.is-canonical { border-color: var(--accent); }
.ok-role-chip .ok-role-dot {
  width: 14px;
  height: 14px;
  border-radius: 3px;
  border: 1px solid rgba(0,0,0,0.3);
}

/* --- Palette extraction: unassigned-colours strip + bind row --- */
.pb-surplus {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: 4px 0 2px;
}
.pb-surplus-chip {
  width: 22px;
  height: 22px;
  border-radius: 4px;
  border: 1px solid var(--border);
  cursor: pointer;
  padding: 0;
}
.pb-surplus-chip:hover { border-color: var(--accent); }
.pb-bind-row {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--text);
  margin: 8px 0 0;
  cursor: pointer;
}

/* --- Palette allocation panel (PALETTE_ALLOCATION_PROPOSAL) --- */
.alloc-shell {
  position: fixed;
  inset: 0;
  z-index: 100;
  pointer-events: none;       /* only strips + box catch clicks */
}
.alloc-strip {
  position: fixed;
  background: rgba(0, 0, 0, 0.55);
  pointer-events: auto;
}
.alloc-shell .alloc-box {
  position: fixed;
  left: 20px;
  top: 50%;
  transform: translateY(-50%);
  max-height: calc(100vh - 40px);
  pointer-events: auto;
  z-index: 101;
}
.alloc-box { width: min(420px, 94vw); }
.alloc-body { padding: 14px 18px 6px; }
.alloc-note {
  font-size: 11px;
  color: var(--text-dim, #888);
  margin-bottom: 8px;
  font-style: italic;
}
.alloc-thumbs {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  flex-wrap: wrap;
}
.alloc-thumb {
  position: relative;
  width: 132px;
  cursor: pointer;
  border: 2px solid transparent;
  border-radius: 6px;
  padding: 3px;
}
.alloc-thumb.is-pick { border-color: var(--accent, #4a90d9); }
.alloc-thumb-img {
  width: 132px;
  height: 132px;
  background-size: cover;
  background-position: center;
  background-color: #fff;
  border-radius: 4px;
}
.alloc-thumb-badge {
  position: absolute;
  top: 6px; left: 6px;
  background: rgba(0,0,0,0.65);
  color: #fff;
  font-size: 10px;
  padding: 1px 5px;
  border-radius: 3px;
}
.alloc-bars { margin-top: 4px; }
.alloc-bar { display: flex; align-items: center; gap: 5px; margin: 2px 0; }
.alloc-bar-lab { font-size: 9px; width: 9px; color: var(--text-dim, #888); }
.alloc-bar-track {
  flex: 1;
  height: 5px;
  background: var(--panel-2, #e3e3e3);
  border-radius: 3px;
  overflow: hidden;
}
.alloc-bar-fill { display: block; height: 100%; background: var(--accent, #4a90d9); }
.alloc-stepper {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin: 10px 0 4px;
  font-size: 12px;
}
.alloc-stepper button {
  width: 26px; height: 24px;
  cursor: pointer;
  border: 1px solid var(--border, #ccc);
  background: var(--panel, #f5f5f5);
  border-radius: 4px;
}
.alloc-stepper button:disabled { opacity: 0.35; cursor: default; }
.alloc-hint {
  font-size: 11px;
  color: var(--text-dim, #888);
  margin: 10px 0 4px;
}
.alloc-roles { display: flex; flex-direction: column; gap: 4px; }
.alloc-role-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 2px;
  border-radius: 4px;
}
.alloc-role-row.is-swapsel { outline: 2px solid var(--accent, #4a90d9); }
.alloc-role-sw {
  width: 30px; height: 22px;
  border-radius: 4px;
  border: 1px solid rgba(0,0,0,0.25);
  cursor: pointer;
  padding: 0;
}
.alloc-role-name { flex: 1; font-size: 12px; }
.alloc-pin {
  border: none;
  background: none;
  cursor: pointer;
  font-size: 13px;
  opacity: 0.55;
}
.alloc-pin.is-pinned { opacity: 1; }
.alloc-slider {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 12px 0 6px;
  font-size: 11px;
  color: var(--text-dim, #888);
}
.alloc-slider input { flex: 1; }
.alloc-freecustom {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 11px;
  margin: 8px 0 4px;
  cursor: pointer;
}
.alloc-link {
  border: none;
  background: none;
  color: var(--accent, #4a90d9);
  cursor: pointer;
  font-size: 12px;
  align-self: center;
}