/* === Reset & base ============================================== */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
/* Reserve the scrollbar gutter so locking scroll (modal open) doesn't shift the layout. */
html { -webkit-text-size-adjust: 100%; scrollbar-gutter: stable; }
body {
  font: 14px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Inter,
        "Helvetica Neue", Arial, sans-serif;
  color: var(--fg);
  background: var(--bg);
  min-height: 100vh;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}
body.read-locked .topbar,
body.read-locked main,
body.read-locked .bulk-bar {
  opacity: .18;
  pointer-events: none;
}
body.read-locked .read-auth-modal {
  display: grid;
}
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0);
  white-space: nowrap; border: 0;
}
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; }
input { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
.bulk-cbx:focus-visible, .select-all-cbx:focus-visible { outline: none; }

/* === Scrollbars: one minimal, theme-aware style everywhere ======
   Not thin sliver, not default OS chrome — a soft rounded thumb that
   sits inset from the edge (transparent border + background-clip). */
* { scrollbar-width: auto; scrollbar-color: var(--border-2) transparent; }
*::-webkit-scrollbar { width: 11px; height: 11px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: var(--border-2);
  border-radius: 8px;
  border: 3px solid transparent;
  background-clip: padding-box;
}
*::-webkit-scrollbar-thumb:hover { background: var(--fg-3); background-clip: padding-box; }
*::-webkit-scrollbar-corner { background: transparent; }

/* === Theme ===================================================== */
:root {
  color-scheme: dark;
  --bg:        #0b0b0c;
  --bg-2:      #111113;
  --surface:   #16161a;
  --surface-2: #1c1c21;
  --border:    #25252b;
  --border-2:  #34343c;
  --fg:        #ececf1;
  --fg-2:      #a0a0aa;
  --fg-3:      #6c6c76;
  --accent:    #6366f1;          /* indigo */
  --accent-2:  #818cf8;
  --accent-bg: rgba(99,102,241,.12);
  --good:      #22c55e;
  --warn:      #f59e0b;
  --shadow:    0 1px 0 rgba(255,255,255,.02) inset;
  --hover-duration: .16s;
  --hover-ease: ease;
  --hover-motion: var(--hover-duration) var(--hover-ease);
  --hover-stagger-1: .02s;
  --hover-stagger-2: .04s;
  --hover-stagger-3: .06s;
  --hover-stagger-4: .08s;
  --hover-stagger-5: .10s;
  --hover-stagger-6: .12s;
  --hover-stagger-7: .14s;
}
/* Light variables, applied when forced OR when OS prefers light and no override. */
:root[data-theme="light"] {
  color-scheme: light;
  --bg:        #f7f7f8;
  --bg-2:      #ffffff;
  --surface:   #ffffff;
  --surface-2: #fafafb;
  --border:    #e6e6ea;
  --border-2:  #d4d4d8;
  --fg:        #111114;
  --fg-2:      #50505a;
  --fg-3:      #8a8a92;
  --accent-bg: rgba(99,102,241,.08);
  --shadow:    0 1px 0 rgba(0,0,0,.02) inset;
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme]) {
    color-scheme: light;
    --bg:        #f7f7f8;
    --bg-2:      #ffffff;
    --surface:   #ffffff;
    --surface-2: #fafafb;
    --border:    #e6e6ea;
    --border-2:  #d4d4d8;
    --fg:        #111114;
    --fg-2:      #50505a;
    --fg-3:      #8a8a92;
    --accent-bg: rgba(99,102,241,.08);
    --shadow:    0 1px 0 rgba(0,0,0,.02) inset;
  }
}

/* === Topbar ==================================================== */
.topbar {
  position: sticky; top: 0; z-index: 110;   /* stays above the modal backdrop (100) */
  background: var(--bg);
  border-bottom: 1px solid var(--border);
}
/* While a modal is open the topbar stays visible but is dimmed and inert. */
body:has(.modal:not([hidden])) .topbar { pointer-events: none; opacity: .5; }
.topbar-row {
  max-width: 1600px; margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr minmax(320px, 560px) 1fr;
  gap: 24px;
  align-items: center;
  padding: 12px 20px;
}
.brand { display: inline-flex; align-items: center; gap: 12px; user-select: none; justify-self: start; }
.actions { justify-self: end; }
.brand-mark {
  flex: none; align-self: center;
  width: 32px; height: 32px; aspect-ratio: 1 / 1;
  display: grid; place-items: center;
  background: var(--accent); color: #fff;
  font-weight: 800; font-size: 18px;
  border-radius: 8px;
  letter-spacing: -.02em;
}
.brand-text { display: flex; flex-direction: column; line-height: 1.1; }
.brand-title { font-weight: 700; letter-spacing: -.01em; font-size: 15px; white-space: nowrap; }
.brand-sub { font-size: 11px; color: var(--fg-3); display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.brand-sub-text { overflow: hidden; text-overflow: ellipsis; }
.version-badge {
  font-size: 9px; font-weight: 600; letter-spacing: .02em;
  color: var(--fg-3); background: var(--surface); border: 1px solid var(--border);
  border-radius: 5px; padding: 1px 5px; vertical-align: middle;
}
.version-badge:empty { display: none; }
.conn-status {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--fg-3); flex: none;
}
.conn-status.ok  { background: var(--good); }
.conn-status.bad { background: var(--warn); }
.conn-status.warn { background: var(--warn); box-shadow: 0 0 0 3px rgba(245,158,11,.16); }

.search {
  position: relative;
  display: flex; align-items: center;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 0 10px;
  transition: border-color var(--hover-motion), background var(--hover-motion);
  width: 100%;
}
.search:focus-within {
  border-color: var(--accent);
  background: var(--surface-2);
}
.search input:focus,
.search input:focus-visible { outline: none; }
.search-icon { color: var(--fg-3); flex: none; }
.search input {
  width: 100%; height: 40px;
  padding: 0 10px;
  border: 0; background: transparent;
}
.search input::placeholder { color: var(--fg-3); }
.kbd {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px; color: var(--fg-3);
  border: 1px solid var(--border); border-radius: 4px;
  padding: 1px 6px;
}

.actions {
  justify-self: end;
  height: 36px;
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: flex-end;
}
.actions-dock {
  position: relative;
  width: 36px;
  min-width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.actions-panel {
  position: absolute;
  top: 0;
  /* 36px (gear width) + 8px gap so the import button has the same spacing
     to the gear as all other buttons have between each other. */
  right: 44px;
  display: flex;
  align-items: center;
  gap: 8px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateX(10px);
  transform-origin: right center;
  transition: opacity var(--hover-motion), transform var(--hover-motion), visibility 0s linear var(--hover-duration);
  z-index: 72;
}
/* Invisible bridge across the 8px gap to the gear, so moving the cursor from
   the gear onto the panel never leaves the dock's hover area (no instant collapse). */
.actions-panel::after {
  content: ''; position: absolute;
  top: 0; bottom: 0; right: -8px; width: 8px;
}
.actions-dock.is-open .actions-panel {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(0);
  transition-delay: 0s;
}
.actions-panel > :not([hidden]) {
  opacity: 0;
  transform: translateX(8px);
  transition: opacity var(--hover-motion), transform var(--hover-motion);
}
.actions-dock.is-open .actions-panel > :not([hidden]) {
  opacity: 1;
  transform: translateX(0);
}
.actions-dock.is-open .actions-panel > :nth-last-child(2) { transition-delay: var(--hover-stagger-1); }
.actions-dock.is-open .actions-panel > :nth-last-child(3) { transition-delay: var(--hover-stagger-2); }
.actions-dock.is-open .actions-panel > :nth-last-child(4) { transition-delay: var(--hover-stagger-3); }
.actions-dock.is-open .actions-panel > :nth-last-child(5) { transition-delay: var(--hover-stagger-4); }
.actions-dock.is-open .actions-panel > :nth-last-child(6) { transition-delay: var(--hover-stagger-5); }
.actions-dock.is-open .actions-panel > :nth-last-child(7) { transition-delay: var(--hover-stagger-6); }
.actions-dock.is-open .actions-panel > :nth-last-child(8) { transition-delay: var(--hover-stagger-7); }
.actions-toggle {
  position: relative;
  z-index: 73;
}
.actions-toggle[aria-expanded="true"],
.actions-toggle:hover {
  border-color: var(--border-2);
  background: var(--surface);
}
.actions-toggle.has-issues {
  color: var(--fg);
  border-color: var(--border-2);
}
.actions-badge {
  position: absolute;
  top: -5px; right: -5px;
  min-width: 16px; height: 16px;
  padding: 0 4px;
  display: grid; place-items: center;
  border-radius: 999px;
  background: var(--surface-2);
  border: 1px solid var(--border-2);
  color: var(--fg-2);
  font-size: 9px; line-height: 1;
}
.btn {
  display: inline-flex; align-items: center; gap: 6px;
  height: 36px; padding: 0 12px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--fg);
  font-weight: 500; font-size: 13px;
  transition: border-color var(--hover-motion), background var(--hover-motion), color var(--hover-motion);
}
.btn:hover { border-color: var(--border-2); }
.btn.primary {
  background: var(--accent); border-color: var(--accent); color: #fff;
}
.btn.primary:hover { background: var(--accent-2); border-color: var(--accent-2); }
.btn.ghost { background: transparent; }
.btn-label { font-size: 13px; }
.btn.edit-active {
  background: var(--accent-bg); color: var(--accent); border-color: rgba(99,102,241,.35);
}
.audit-btn {
  position: relative;
  font-weight: 800;
}
.audit-btn.has-issues {
  color: var(--fg);
  border-color: var(--border-2);
  background: var(--surface);
}
.audit-badge {
  position: absolute;
  top: -5px; right: -5px;
  min-width: 16px; height: 16px;
  padding: 0 4px;
  display: grid; place-items: center;
  border-radius: 999px;
  background: var(--surface-2);
  border: 1px solid var(--border-2);
  color: var(--fg-2);
  font-size: 9px; line-height: 1;
}

.active-tags {
  display: flex; flex-wrap: wrap; gap: 6px;
  padding: 0 20px 12px; max-width: 1600px; margin: 0 auto;
}
.active-tags .chip {
  background: var(--accent-bg); color: var(--accent);
  border: 1px solid rgba(99,102,241,.35);
}

/* === Autocomplete ============================================== */
.ac {
  position: absolute; left: 0; right: 0; top: calc(100% + 6px);
  background: var(--bg-2);
  border: 1px solid var(--border-2);
  border-radius: 10px;
  overflow: hidden;
  z-index: 60;
  max-height: 60vh; overflow-y: auto;
  /* Keep the wheel inside the dropdown — don't scroll the page behind it. */
  overscroll-behavior: contain;
}
.ac-item {
  display: grid; grid-template-columns: auto 1fr auto auto;
  gap: 10px; align-items: center;
  padding: 8px 10px; cursor: pointer;
  border-bottom: 1px solid var(--border);
  transition: background var(--hover-motion);
}
.ac-item:last-child { border-bottom: 0; }
.ac-item:hover,
.ac-item.active { background: var(--surface-2); }
.ac-name { font-weight: 600; font-size: 13px; }
.ac-meta { font-size: 11px; color: var(--fg-3); display: flex; gap: 8px; align-items: center; }
.ac-tag {
  font-size: 9.5px; color: var(--fg-2);
  background: var(--surface); border: 1px solid var(--border);
  padding: 1px 6px; border-radius: 4px;
  letter-spacing: .04em;
  /* Fixed-width badge column so the reason text lines up across rows
     (DEV/INT/LT pad up to PROD's width). Long custom names just grow. */
  display: inline-flex; justify-content: center;
  min-width: 46px; box-sizing: border-box;
}
.ac-muted { color: var(--fg-3); }
/* Match reason gets a soft, consistent tint so the row isn't all-grey. */
.ac-reason { color: hsl(215 22% 64%); }
.ac-rsep { color: var(--fg-3); opacity: .6; margin: 0 -4px; }
/* Per-tag colored chips on the right (hue from the tag text, set inline). */
.ac-tags { gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.ac-chip {
  font-size: 10px; letter-spacing: .02em;
  padding: 1px 6px; border-radius: 4px;
  background: color-mix(in srgb, currentColor 12%, transparent);
  border: 1px solid color-mix(in srgb, currentColor 28%, transparent);
  white-space: nowrap;
}
.ac-copy {
  width: 26px; height: 26px;
  display: grid; place-items: center;
  border-radius: 6px;
  color: var(--fg-3); background: transparent;
  border: 1px solid transparent;
  transition: color var(--hover-motion), border-color var(--hover-motion), background var(--hover-motion);
}
.ac-copy:hover { color: var(--accent); border-color: var(--accent); background: var(--surface); }
.ac-copy svg { display: block; }
.ac mark { background: none; color: var(--accent); padding: 0; }

/* === Command palette / diagnostics ============================= */
.palette-modal {
  align-items: flex-start;
  padding-top: min(14vh, 96px);
}
.palette-card {
  max-width: 720px;
  border-radius: 12px;
}
.palette-search {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
}
.palette-search input {
  height: 34px;
  border: 0;
  background: transparent;
  outline: none;
  color: var(--fg);
  font: inherit;
  font-size: 14px;
}
.palette-search kbd {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10px;
  color: var(--fg-3);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 1px 6px;
}
.command-list {
  max-height: min(58vh, 520px);
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  padding: 6px;
}
.command-item {
  width: 100%;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--fg);
  text-align: left;
  cursor: pointer;
  transition: background var(--hover-motion);
}
.command-item:hover,
.command-item.active { background: var(--surface-2); }
.command-item .ico { width: 28px; height: 28px; border-radius: 7px; }
.command-glyph {
  width: 28px; height: 28px;
  display: grid; place-items: center;
  border-radius: 7px;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--fg-2);
  font-weight: 700;
}
/* Title + meta sit inline; the whole line truncates if too long. */
.command-main {
  min-width: 0;
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.command-title { font-size: 13px; font-weight: 650; }
.command-meta { margin-left: 8px; font-size: 11px; color: var(--fg-3); }
.command-action {
  font-size: 10px;
  color: var(--fg-2);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 2px 7px;
}
.command-empty {
  padding: 26px 12px;
  text-align: center;
  color: var(--fg-3);
  font-size: 13px;
}
.audit-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
}
.audit-pill {
  padding: 7px 8px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  min-width: 0;
}
.audit-pill b { display: block; font-size: 15px; color: var(--fg); line-height: 1.2; }
.audit-pill span { font-size: 10px; color: var(--fg-3); display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.audit-group {
  border-top: 1px solid var(--border);
  padding-top: 12px;
}
.audit-group.is-collapsed { opacity: .72; }
.audit-group-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}
.audit-group h4 {
  margin: 0;
  font-size: 12px;
  color: var(--fg-2);
  text-transform: uppercase;
  letter-spacing: .08em;
}
.audit-toggle {
  border: 1px solid var(--border);
  background: transparent;
  color: var(--fg-3);
  border-radius: 999px;
  height: 24px;
  padding: 0 9px;
  font: inherit;
  font-size: 11px;
  cursor: pointer;
  transition: color var(--hover-motion), border-color var(--hover-motion);
}
.audit-toggle:hover { color: var(--fg); border-color: var(--border-2); }
.audit-list { display: flex; flex-direction: column; gap: 6px; }
.audit-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  align-items: center;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
}
.audit-row-main { min-width: 0; }
.audit-row-title { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.audit-row-meta { margin-top: 2px; font-size: 11px; color: var(--fg-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.audit-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 4px;
  max-width: 320px;
}
.audit-open {
  border: 1px solid var(--border);
  background: transparent;
  color: var(--fg-2);
  border-radius: 6px;
  height: 26px;
  padding: 0 9px;
  white-space: nowrap;
  cursor: pointer;
  font-size: 12px;
  transition: color var(--hover-motion), border-color var(--hover-motion), background var(--hover-motion);
}
.audit-open:hover { color: var(--fg); border-color: var(--border-2); background: var(--surface-2); }
.audit-more {
  padding: 8px 10px;
  color: var(--fg-3);
  font-size: 12px;
}

/* === Layout ==================================================== */
.page { max-width: 1600px; margin: 0 auto; padding: 18px 20px 64px; }
.block { margin-top: 28px; }
.block:first-child { margin-top: 16px; }
.block-head {
  display: flex; align-items: center; gap: 6px;
  padding: 0 2px 10px;
}
.blk-up, .blk-down {
  width: 22px; height: 22px;
  display: grid; place-items: center;
  border-radius: 6px; cursor: pointer;
  color: var(--fg-3); background: var(--surface); border: 1px solid var(--border);
  font-size: 12px; line-height: 1;
  transition: color var(--hover-motion), border-color var(--hover-motion);
}
.blk-up:hover, .blk-down:hover { color: var(--accent); border-color: var(--accent); }
.block-head .select-all-cbx { align-self: center; }
.add-section-btn {
  display: block; width: 100%;
  margin-top: 20px;
  padding: 14px;
  border: 1px dashed var(--border-2); border-radius: 12px;
  background: transparent; color: var(--fg-2);
  font: inherit; font-size: 13px; cursor: pointer;
  transition: color var(--hover-motion), border-color var(--hover-motion), background var(--hover-motion);
}
.add-section-btn[hidden] { display: none; }
.add-section-btn:hover { color: var(--accent); border-color: var(--accent); background: var(--accent-bg); }
.block.drag-enabled > .block-head { cursor: grab; }
.block.drag-enabled > .block-head:active { cursor: grabbing; }
.block.dragging,
.card.dragging {
  opacity: .48;
}
.block.drag-over-before,
.block.drag-over-after {
  outline: 0;
}
.block.drag-over-before { box-shadow: inset 0 2px 0 var(--accent); }
.block.drag-over-after { box-shadow: inset 0 -2px 0 var(--accent); }
.drag-enabled .card[draggable="true"] { cursor: grab; }
.drag-enabled .card[draggable="true"]:active { cursor: grabbing; }
.grid-flow .card.drag-over-before { box-shadow: inset 2px 0 0 var(--accent); }
.grid-flow .card.drag-over-after { box-shadow: inset -2px 0 0 var(--accent); }
.stand-list .card.drag-over-before { box-shadow: inset 0 2px 0 var(--accent); }
.stand-list .card.drag-over-after { box-shadow: inset 0 -2px 0 var(--accent); }
/* built-in Contacts rows are draggable items (vertical list) */
.drag-enabled .contact-row[draggable="true"] { cursor: grab; }
.drag-enabled .contact-row[draggable="true"]:active { cursor: grabbing; }
.contact-list .contact-row.drag-over-before { box-shadow: inset 0 2px 0 var(--accent); }
.contact-list .contact-row.drag-over-after { box-shadow: inset 0 -2px 0 var(--accent); }
.contact-row.dragging { opacity: .48; }
/* draggable column headers (stands / contact groups) */
.stand-head[draggable="true"],
.contact-role-row[draggable="true"] { cursor: grab; }
.stand-head[draggable="true"]:active,
.contact-role-row[draggable="true"]:active { cursor: grabbing; }
.stand.dragging,
.contact.dragging { opacity: .48; }
.stand.drag-over-before { box-shadow: inset 2px 0 0 var(--accent); }
.stand.drag-over-after { box-shadow: inset -2px 0 0 var(--accent); }
.contact.drag-over-before { box-shadow: inset 2px 0 0 var(--accent); }
.contact.drag-over-after { box-shadow: inset -2px 0 0 var(--accent); }
.block-head h2 {
  margin: 0; font-size: 13px; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--fg-2);
}
.counter {
  font-size: 11px; color: var(--fg-3);
  background: var(--surface); border: 1px solid var(--border);
  padding: 1px 7px; border-radius: 10px;
}
.add-btn {
  font-size: 12px;
  color: var(--fg-2);
  border-style: dashed;
  border-color: var(--border-2);
  border-radius: 6px;
  white-space: nowrap;
  overflow: hidden;
  /* Collapsed: zero HORIZONTAL box, but vertical padding/border kept at the
     full hover value so the button's height doesn't change between states —
     the header height stays constant and nothing below shifts down on hover.
     Negative margin cancels the .block-head flex gap. */
  max-width: 0;
  padding: 4px 0;
  border-width: 1px 0;
  border-color: transparent;
  margin-left: -6px;            /* matches .block-head flex gap */
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    max-width var(--hover-motion),
    padding var(--hover-motion),
    border-width var(--hover-motion),
    margin-left var(--hover-motion),
    opacity var(--hover-motion),
    color var(--hover-motion),
    border-color var(--hover-motion),
    visibility 0s linear var(--hover-duration);
}
/* Push the right cluster (counter + eye + add-btn) to the right edge as a
   group so they stay tight together instead of strung out across the row. */
.block-head > .counter { margin-left: auto; }
/* When a head has a .hd-grow spacer, the counter sits next to the title and
   the spacer pushes the right cluster (eye / add-btn) to the right edge. */
.hd-grow { flex: 1 1 auto; min-width: 0; align-self: stretch; }
.block-head:has(> .hd-grow) > .counter { margin-left: 0; }
.stand-head:has(> .hd-grow) > .stand-count { margin-left: 0; }
/* Reveal "+ link" / "+ group" on hover/focus of the WHOLE section, not
   just its header. Direct-child selectors (`> .block-head`, `> .stand-head`)
   scope the reveal so hovering one stand inside a custom envs section only
   shows that stand's button — not every sibling stand's button too. */
.block:hover > .block-head .add-btn,
.block:focus-within > .block-head .add-btn,
.stand:hover > .stand-head .add-btn,
.stand:focus-within > .stand-head .add-btn {
  max-width: 220px;
  padding: 4px 9px;
  border-width: 1px;
  border-color: var(--border-2);
  margin-left: 0;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition-delay: 0s;
}
.add-btn:hover { color: var(--accent); border-color: var(--accent); }

/* === Cards grid ================================================ */
.grid-flow {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 10px;
}

.card {
  position: relative;
  display: block;
  padding: 12px 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: var(--shadow);
  transition: border-color var(--hover-motion), background var(--hover-motion);
  min-height: 56px;
}
.card[data-no-url],
.card[data-href] { cursor: pointer; }
.card:hover {
  border-color: var(--border-2);
  background: var(--surface-2);
}
.card::before {
  content: ""; position: absolute; left: -1px; top: 10px; bottom: 10px;
  width: 2px; border-radius: 2px;
  background: var(--accent);
  opacity: 0;
  transition: opacity var(--hover-motion);
}
.card:hover::before { opacity: 1; }
.card-name {
  font-weight: 600; font-size: 14px;
  display: block;
  color: var(--fg);
}
.card-host {
  display: block;
  font-size: 11px; color: var(--fg-3);
  margin-top: 3px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.card-tags {
  display: flex; flex-wrap: wrap; gap: 4px;
  margin-top: 8px;
}
.tag {
  font-size: 10px; color: var(--fg-2);
  background: var(--surface-2); border: 1px solid var(--border);
  padding: 1px 6px; border-radius: 4px;
  cursor: pointer;
  transition: color var(--hover-motion), border-color var(--hover-motion), background var(--hover-motion);
}
.tag:hover { color: var(--accent); border-color: var(--accent); }
/* card head with icon */
.card-head { display: flex; align-items: center; gap: 9px; min-width: 0; transition: padding-right var(--hover-motion); }
.card-name { min-width: 0; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* No reserved right padding by default → title uses the full card width.
   On hover the padding grows smoothly so the title ellipsizes to make room
   for the action icons (which overlay the right edge). Only the title
   shrinks horizontally — no vertical layout shift. */
/* Values are sized to the actual hover-icon cluster (button width × count +
   gaps + the 6px right inset) — kept tight so the title shrinks only as much
   as is strictly needed to avoid icons covering it. */
/* Padding-right reserves just enough room for the action-icon cluster (icons
   are absolute at right:6/4) — kept tight so non-English titles still fit. */
.card.is-pinned .card-head { padding-right: 26px; }
.stand .card.is-pinned .card-head { padding-right: 22px; }
/* Reserve enough space on the right so the action cluster never overlaps the
   name. Widths are computed from the actual button cluster: N×btn + (N-1)×gap +
   right-inset + small visual buffer. On narrow cards the name will truncate
   with an ellipsis — that's the correct trade-off vs. icons covering text. */
/* Action cluster: 18px × N + 4px gaps + 6px right inset.
   4 buttons (non-editing) = 72+12+6 = 90px → 92 buffer.
   5 buttons (editing)     = 90+16+6 = 112 → 114 buffer. */
.card:hover .card-head,
.card:focus-within .card-head { padding-right: 92px; }
body.editing .card:hover .card-head,
body.editing .card:focus-within .card-head { padding-right: 114px; }
.stand .card:hover .card-head,
.stand .card:focus-within .card-head { padding-right: 92px; }
body.editing .stand .card:hover .card-head,
body.editing .stand .card:focus-within .card-head { padding-right: 116px; }

.ico {
  width: 20px; height: 20px; flex: none; aspect-ratio: 1 / 1;
  border-radius: 5px;
  display: inline-grid; place-items: center;
  font-size: 11px; font-weight: 800;
  color: #fff;
  letter-spacing: -.02em;
  line-height: 1;
  overflow: hidden;
}
.ico svg { width: 100%; height: 100%; display: block; overflow: visible; }
.stand .ico { width: 18px; height: 18px; }
.ac .ico { width: 22px; height: 22px; }

/* card action buttons (view / copy / pin / edit / delete) — hover-only */
.card-actions {
  position: absolute; top: 6px; right: 6px;
  display: flex; gap: 4px;
  z-index: 2;
}
.card-action-btn {
  width: 18px; height: 18px;
  border-radius: 5px;
  display: grid; place-items: center;
  color: var(--fg-3); background: var(--surface-2);
  border: 1px solid var(--border);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateX(8px);
  transition:
    opacity var(--hover-motion),
    transform var(--hover-motion),
    color var(--hover-motion),
    border-color var(--hover-motion),
    background var(--hover-motion),
    visibility 0s linear var(--hover-duration);
  cursor: pointer;
  font: inherit;
  line-height: 1;
}
.card-action-btn:hover { color: var(--accent); border-color: var(--accent); }
.card-action-btn svg { display: block; }
.card-action-btn.x { font-size: 14px; line-height: 1; padding-bottom: 1px; }
.card-action-btn svg { width: 10px; height: 10px; }

/* Show non-edit buttons on card hover/focus */
.card:hover .card-action-btn:not(.edit-only),
.card:focus-within .card-action-btn:not(.edit-only) {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(0);
  transition-delay: 0s;
}
/* Edit-only buttons require edit mode AND hover */
body.editing .card:hover .card-action-btn.edit-only,
body.editing .card:focus-within .card-action-btn.edit-only {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(0);
  transition-delay: 0s;
}

/* Generic edit-only for non-card elements (+ contact, + group, headers) */
.edit-only { display: none; }
body.editing .edit-only { display: grid; }
/* Override generic edit-only for card action buttons (handled by hover rules above) */
body.editing .card-action-btn.edit-only { display: grid; }
body.editing .card:hover .card-action-btn.edit-only,
body.editing .card:focus-within .card-action-btn.edit-only {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(0);
  transition-delay: 0s;
}

.stand .card-actions { top: 4px; right: 4px; }
.stand .card-action-btn { width: 18px; height: 18px; }
.stand .card-action-btn svg { width: 10px; height: 10px; }
.stand .card-action-btn.x { font-size: 14px; }

/* Theme toggle button & icon-only chrome */
.btn.icon-only { padding: 0; width: 36px; justify-content: center; }
.icon-btn { color: var(--fg-2); }
.icon-btn:hover { color: var(--accent); }

/* Sort popover */
.sort-wrap { position: relative; }
.sort-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 220px;
  background: var(--bg-2);
  border: 1px solid var(--border-2);
  border-radius: 10px;
  display: flex; flex-direction: column;
  overflow: hidden;
  z-index: 80;
}
.sort-menu[hidden] { display: none; }
.sort-menu button {
  padding: 9px 14px;
  text-align: left;
  font-size: 13px; color: var(--fg);
  background: transparent;
  border: 0; border-bottom: 1px solid var(--border);
  cursor: pointer;
  display: flex; align-items: center; gap: 8px;
  transition: background var(--hover-motion), color var(--hover-motion);
}
.sort-menu button:last-child { border-bottom: 0; }
.sort-menu button:hover { background: var(--surface-2); }
.sort-menu button.active { color: var(--accent); }
.sort-menu button.active::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent); flex: none;
}
.sort-menu button:not(.active)::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: transparent; flex: none;
}

/* Timestamp on cards */
.card-time {
  font-size: 10px;
  color: var(--fg-3);
  margin-top: 6px;
  letter-spacing: .02em;
}
.stand .card-time { margin-top: 2px; font-size: 9.5px; }
.stand .card-host-line {
  display: flex; align-items: baseline; gap: 6px;
  font-size: 10.5px; color: var(--fg-3);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  margin-top: 2px;
}
.stand .card-host-line .dot {
  width: 2px; height: 2px; border-radius: 50%;
  background: var(--fg-3); flex: none;
}

/* Share-filter button inside search */
.share-btn {
  width: 28px; height: 28px;
  display: none;
  border-radius: 6px;
  align-items: center; justify-content: center;
  transition: background var(--hover-motion);
}
.search.has-filter .share-btn { display: inline-flex; }
.share-btn:hover { background: var(--surface-2); }

/* Edit-only buttons in topbar — visible only when in edit mode */
.export-wrap { display: none; }
body.editing .export-wrap { display: block; }
.edit-only-btn { display: none !important; }
body.editing .edit-only-btn { display: inline-flex !important; }

/* Recent strip */
.recent-strip {
  display: flex; align-items: center; gap: 10px;
  padding: 0 20px 10px;
  max-width: 1600px; margin: 0 auto;
  overflow: hidden;
}
.recent-strip[hidden] { display: none; }
.recent-label {
  font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--fg-3); flex: none;
}
.recent-items {
  display: flex; gap: 6px;
  overflow-x: auto;
  flex: 1;
  scrollbar-width: auto;
}
.recent-items::-webkit-scrollbar { height: 6px; }
.recent-items::-webkit-scrollbar-thumb { background: var(--border-2); border-radius: 3px; }
.recent-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 9px 4px 4px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 14px;
  font-size: 12px; color: var(--fg);
  white-space: nowrap;
  transition: border-color var(--hover-motion);
  flex: none;
  font-family: inherit; cursor: pointer;
}
.recent-chip:hover { border-color: var(--border-2); }
.recent-chip .ico { width: 18px; height: 18px; }
.recent-x {
  width: 0; height: 16px;
  display: inline-flex;
  align-items: center; justify-content: center;
  margin-left: -6px;
  border: 0; background: transparent;
  color: var(--fg-3);
  font-size: 14px; line-height: 1;
  border-radius: 50%;
  cursor: pointer;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    width var(--hover-motion),
    margin-left var(--hover-motion),
    opacity var(--hover-motion),
    color var(--hover-motion),
    background var(--hover-motion),
    visibility 0s linear var(--hover-duration);
}
.recent-chip:hover .recent-x,
.recent-chip:focus-within .recent-x {
  width: 16px;
  margin-left: 0;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition-delay: 0s;
}
.recent-x:hover { color: var(--accent); background: var(--surface-2); }
.recent-clear {
  width: 24px; height: 24px;
  display: grid; place-items: center;
  margin-left: 4px;
  color: var(--fg-3);
  background: transparent; border: 0;
  border-radius: 6px;
  cursor: pointer;
  flex: none;
  align-self: center;
  transition: color var(--hover-motion), background var(--hover-motion);
}
.recent-clear:hover { color: var(--accent); background: var(--surface-2); }
.recent-clear svg { display: block; }

/* Pin (star) state + view (eye) on card actions */
.card-action-btn.is-pinned { color: var(--accent); border-color: rgba(99,102,241,.35); }
.card-action-btn.card-pin:hover { color: var(--accent); border-color: var(--accent); }
/* Only when the card/row is actually pinned, push its star to the visual
   end of the cluster so the always-visible star sits flush right.
   Non-pinned cards keep the star in its natural DOM position (middle of the
   hover icon row). */
.card.is-pinned .card-pin,
.contact-row.is-pinned .contact-pin { order: 99; }
/* a pinned card keeps its (indigo) star visible even without hover */
.card.is-pinned .card-pin {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(0);
}

/* Note indicator */
.note-mark {
  display: inline-grid; place-items: center;
  width: 14px; height: 14px; flex: none;
  color: var(--fg-3);
  cursor: help;
  transition: color var(--hover-motion), opacity var(--hover-motion);
}
.note-mark:hover { color: var(--accent); }
.note-mark svg { display: block; }
.contact-row .note-mark { margin-left: 2px; }
/* Hide the note indicator on hover so the action icons read cleanly and the
   actual comment is only revealed by opening the card (same as in detail). */
.contact-row:hover .note-mark,
.contact-row:focus-within .note-mark,
.card:hover .note-mark,
.card:focus-within .note-mark,
.contact:hover > .contact-role-row .note-mark,
.contact:focus-within > .contact-role-row .note-mark,
.dm-row:hover .note-mark,
.dm-row:focus-within .note-mark {
  opacity: 0;
  pointer-events: none;
}

/* Bulk-selection checkbox — a <button> (avoids native toggle conflict inside <a>) */
.bulk-cbx {
  position: absolute;
  top: 8px; left: 8px;
  width: 16px; height: 16px;
  display: block;
  z-index: 3;
  padding: 0; margin: 0;
  background: rgba(0, 0, 0, .45);
  border: 1.5px solid var(--border-2);
  border-radius: 4px;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity var(--hover-motion),
    border-color var(--hover-motion),
    background var(--hover-motion),
    transform var(--hover-motion),
    visibility 0s linear var(--hover-duration);
}
.bulk-cbx::after {
  content: '';
  position: absolute;
  left: 4px; top: 1px;
  width: 4px; height: 8px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg) scale(0);
  transition: transform var(--hover-motion);
}
.bulk-cbx:hover { border-color: var(--accent); }
.bulk-cbx:active { transform: scale(.92); }
.bulk-cbx.checked { background: var(--accent); border-color: var(--accent); }
.bulk-cbx.checked::after { transform: rotate(45deg) scale(1); }
body.editing .card:hover .bulk-cbx,
body.editing .card:focus-within .bulk-cbx {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition-delay: 0s;
}
/* Selected items keep checkbox visible even without hover */
body.editing .card.bulk-selected .bulk-cbx {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition-delay: 0s;
}
.card.bulk-selected { border-color: var(--accent); }
.card.bulk-selected::before { opacity: 1; }
/* Whole empty column selected (custom stand / group) — ring is layout-neutral. */
.stand.bulk-selected, .contact.bulk-selected {
  border-color: var(--accent);
  box-shadow: inset 0 0 0 1px var(--accent);
  background: var(--accent-bg);
}
.stand .bulk-cbx { top: 5px; left: 5px; width: 14px; height: 14px; }
.stand .bulk-cbx::after { left: 3px; top: 0; }

/* Checkbox on a contact row — sits at the left, room reserved in edit mode */
.contact-row .bulk-cbx { top: 50%; margin-top: -7px; left: 8px; width: 14px; height: 14px; }
.contact-row .bulk-cbx::after { left: 3px; top: 0; }
body.editing .contact-row { padding-left: 28px; }
body.editing .contact-row:hover .bulk-cbx,
.contact-row.bulk-selected .bulk-cbx {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition-delay: 0s;
}
.contact-row.bulk-selected { background: var(--accent-bg); }
.contact-row, .contact-row.bulk-selected, .contact-row:hover { border-radius: 8px; }

/* Per-stand / per-group select-all (small checkbox) — hover-reveal in edit mode */
.select-all-cbx:not(.blk-cbx) {
  width: 0; height: 15px;
  flex: none;
  padding: 0;
  margin:
    0
    calc(var(--reveal-next-gap, 0px) * -1)
    0
    calc(var(--reveal-gap, 0px) * -1);
  background: rgba(0,0,0,.3);
  /* Same trick as .group-view: vertical borders permanent, only horizontal
     animate, so revealing this checkbox doesn't grow the row height. */
  border-style: solid;
  border-color: var(--border-2);
  border-width: 1px 0;
  border-radius: 4px;
  cursor: pointer; position: relative;
  display: block;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    width var(--hover-motion),
    margin var(--hover-motion),
    opacity var(--hover-motion),
    border-width var(--hover-motion),
    border-color var(--hover-motion),
    background var(--hover-motion),
    visibility 0s linear var(--hover-duration);
}
.stand-head .select-all-cbx:not(.blk-cbx) { --reveal-gap: 8px; --reveal-next-gap: 8px; }
.contact-role-row .select-all-cbx:not(.blk-cbx) { --reveal-gap: 0px; --reveal-next-gap: 6px; }
.select-all-cbx:not(.blk-cbx)::after {
  content: ''; position: absolute; left: 4px; top: 1px;
  width: 4px; height: 8px; border: solid #fff; border-width: 0 2px 2px 0;
  transform: rotate(45deg) scale(0); transition: transform var(--hover-motion);
}
.select-all-cbx:not(.blk-cbx):hover { border-color: var(--accent); }
.select-all-cbx:not(.blk-cbx).checked { background: var(--accent); border-color: var(--accent); }
.select-all-cbx:not(.blk-cbx).checked::after { transform: rotate(45deg) scale(1); }
body.editing .stand:hover .select-all-cbx:not(.blk-cbx),
body.editing .stand:focus-within .select-all-cbx:not(.blk-cbx),
body.editing .contact:hover .select-all-cbx:not(.blk-cbx),
body.editing .contact:focus-within .select-all-cbx:not(.blk-cbx),
.select-all-cbx:not(.blk-cbx).checked {
  width: 15px;
  margin: 0;
  border-width: 1.5px;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition-delay: 0s;
}

/* Block-level select-all — third square in the move cluster, styled like arrows */
.blk-cbx {
  width: 22px; height: 22px;
  display: grid; place-items: center;
  border-radius: 6px; cursor: pointer;
  color: var(--fg-3); background: var(--surface); border: 1px solid var(--border);
  position: relative;
  transition: color var(--hover-motion), border-color var(--hover-motion), background var(--hover-motion);
}
.blk-cbx::after {
  content: ''; width: 10px; height: 10px;
  border: 1.6px solid currentColor; border-radius: 3px; box-sizing: border-box;
}
.blk-cbx:hover { color: var(--accent); border-color: var(--accent); }
.blk-cbx.checked { color: #fff; background: var(--accent); border-color: var(--accent); }
.blk-cbx.checked::after {
  width: 5px; height: 9px; border: solid #fff; border-width: 0 2px 2px 0;
  border-radius: 0; transform: rotate(45deg); margin-top: -2px;
}

/* Move cluster (arrows + select-all) — revealed on block hover in edit mode */
.block-move {
  display: inline-flex; gap: 2px;
  max-width: 0;
  margin-right: -10px;
  opacity: 0;
  overflow: hidden;
  pointer-events: none;
  transform: translateX(-8px);
  transition:
    max-width var(--hover-motion),
    margin-right var(--hover-motion),
    opacity var(--hover-motion),
    transform var(--hover-motion);
}
body.editing .block:hover .block-move,
body.editing .block:focus-within .block-move,
body.editing .block:has(.blk-cbx.checked) .block-move {
  max-width: 76px;
  margin-right: 0;
  opacity: 1;
  pointer-events: auto;
  transform: translateX(0);
}

/* Group/section view (eye) button */
.group-view {
  width: 0; height: 22px;
  border-radius: 5px;
  display: grid;
  place-items: center;
  color: var(--fg-3); background: var(--surface-2);
  /* Keep vertical borders permanent (top/bottom = 1px), only animate the
     horizontal borders on hover. Outer height stays constant → header never
     grows taller when the eye appears. */
  border-style: solid;
  border-color: var(--border);
  border-width: 1px 0;
  cursor: pointer;
  overflow: hidden;
  margin:
    0
    calc(var(--reveal-next-gap, 0px) * -1)
    0
    calc(var(--reveal-gap, 0px) * -1);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateX(8px);
  transition:
    width var(--hover-motion),
    margin var(--hover-motion),
    opacity var(--hover-motion),
    transform var(--hover-motion),
    border-width var(--hover-motion),
    color var(--hover-motion),
    border-color var(--hover-motion),
    visibility 0s linear var(--hover-duration);
}
.block-head .group-view { --reveal-gap: 10px; --reveal-next-gap: 0px; }
body.editing .block-head .group-view { --reveal-next-gap: 10px; }
/* Stands block-head used to have no add-btn after the eye — now it does
   (+ stand), so the eye needs the normal trailing gap like other blocks. */
.stand-head .group-view { --reveal-gap: 8px; --reveal-next-gap: 0px; }
body.editing .stand-head .group-view { --reveal-next-gap: 8px; }
.contact-role-row .group-view { --reveal-gap: 6px; --reveal-next-gap: 0px; }
.block:hover > .block-head .group-view,
.block:focus-within > .block-head .group-view,
.stand:hover > .stand-head .group-view,
.stand:focus-within > .stand-head .group-view,
.contact:hover > .contact-role-row .group-view,
.contact:focus-within > .contact-role-row .group-view {
  width: 22px;
  margin: 0;
  border-width: 1px;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(0);
  transition-delay: 0s;
}
.group-view:hover { color: var(--accent); border-color: var(--accent); }
.group-view svg { display: block; }

.stand-empty {
  display: flex; align-items: center; justify-content: center;
  min-height: 60px;
  color: var(--fg-3); font-size: 12px;
}

/* Empty stand CTA */
.empty-cta {
  display: flex; align-items: center; justify-content: center;
  min-height: 80px;
  border: 1px dashed var(--border-2);
  border-radius: 8px;
  color: var(--fg-3);
  font-size: 12px;
  cursor: pointer;
  background: transparent;
  transition: color var(--hover-motion), border-color var(--hover-motion);
}
.empty-cta:hover { color: var(--accent); border-color: var(--accent); }

/* Pinned card subtle marker (indigo left tick) */
.card.is-pinned::before { opacity: 1; }

mark.hl { background: none; color: var(--accent); padding: 0; }

/* === Stands (DEV / INT / LT / PROD) ============================ */
.stands {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}
.stand {
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px;
  display: flex; flex-direction: column; gap: 10px;
  min-height: 120px;
  transition: border-color var(--hover-motion);
}
.stand:hover { border-color: var(--accent); }
.stand-head {
  display: flex; align-items: center; gap: 6px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
}
.stand-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--stand-color, var(--accent));
}
.stand-name {
  font-weight: 700; letter-spacing: .04em;
  color: var(--fg);
}
.stand-count {
  font-size: 11px; color: var(--fg-3);
  margin-left: auto;
}
.stand-add {
  font-size: 12px;
  color: var(--fg-2);
  border-style: dashed;
  border-color: var(--border-2);
  border-radius: 6px;
  white-space: nowrap;
  overflow: hidden;
  /* Same trick as .add-btn: zero horizontal box when collapsed, full vertical
     padding/border kept constant so the stand-head height never changes
     between states — nothing inside the stand shifts on hover. */
  max-width: 0;
  padding: 3px 0;
  border-width: 1px 0;
  border-color: transparent;
  margin-left: -6px;          /* matches .stand-head flex gap */
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    max-width var(--hover-motion),
    padding var(--hover-motion),
    border-width var(--hover-motion),
    margin-left var(--hover-motion),
    opacity var(--hover-motion),
    color var(--hover-motion),
    border-color var(--hover-motion),
    visibility 0s linear var(--hover-duration);
}
body.editing .stand:hover .stand-add,
body.editing .stand:focus-within .stand-add {
  max-width: 220px;
  padding: 3px 8px;
  border-width: 1px;
  border-color: var(--border-2);
  margin-left: 0;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition-delay: 0s;
}
.stand-add:hover { color: var(--accent); border-color: var(--accent); }
.stand-add.x { font-size: 14px; line-height: 1; border-style: solid; }

.stand-list { display: flex; flex-direction: column; gap: 6px; }
.stand .card {
  padding: 9px 11px;
  border-radius: 8px;
  min-height: 0;
}
.stand .card-name { font-size: 13px; }
.stand .card-host { font-size: 10.5px; margin-top: 2px; }
.stand .card-tags { display: none; }

/* per-stand accent dots */
.stand[data-stand="DEV"]  { --stand-color: #22c55e; }
.stand[data-stand="INT"]  { --stand-color: #f59e0b; }
.stand[data-stand="LT"]   { --stand-color: #3b82f6; }
.stand[data-stand="PROD"] { --stand-color: var(--accent); }

/* === Contacts ================================================== */
.contacts {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 10px;
}
.contact {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 14px;
  transition: border-color var(--hover-motion);
}
.contact:hover { border-color: var(--accent); }
.contact-role-row {
  display: flex; align-items: center; gap: 6px;
  margin-bottom: 6px;
}
.contact-role {
  font-size: 11px; color: var(--fg-3);
  letter-spacing: .1em; text-transform: uppercase;
  flex: 1;
}
.contact-add {
  font-size: 11px; color: var(--fg-2);
  border: 1px dashed var(--border-2);
  padding: 2px 0; border-radius: 5px;
  display: inline-block;
  max-width: 0;
  margin-left: -6px;
  overflow: hidden;
  white-space: nowrap;
  border-width: 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateX(8px);
  transition:
    max-width var(--hover-motion),
    margin-left var(--hover-motion),
    padding var(--hover-motion),
    opacity var(--hover-motion),
    transform var(--hover-motion),
    border-width var(--hover-motion),
    color var(--hover-motion),
    border-color var(--hover-motion),
    visibility 0s linear var(--hover-duration);
  cursor: pointer;
  line-height: 1.2;
}
.contact-add:hover { color: var(--accent); border-color: var(--accent); }
body.editing .contact:hover .contact-add,
body.editing .contact:focus-within .contact-add {
  max-width: 96px;
  margin-left: 0;
  padding: 2px 7px;
  border-width: 1px;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(0);
  transition-delay: 0s;
}
.contact-add.x {
  font-size: 14px;
  line-height: 1;
  height: 22px;
  border-style: solid;
}
body.editing .contact:hover .contact-add.x,
body.editing .contact:focus-within .contact-add.x { padding: 0 7px; }

.contact-list {
  margin: 0; padding: 0; list-style: none;
  display: flex; flex-direction: column;
}
.contact-row {
  position: relative;
  display: flex; align-items: center; gap: 6px;
  padding: 6px 10px;
  margin: 0 -10px;
  font-size: 13px; color: var(--fg);
  border-bottom: 1px dashed transparent;
  min-height: 28px;
  transition: background var(--hover-motion), border-radius var(--hover-motion), padding-right var(--hover-motion);
}
.contact-row + .contact-row { border-top: 1px dashed var(--border); }
/* Make room for the absolute action icons only on hover (and permanently for
   the pinned star) — title ellipsizes instead of being overlapped. */
.contact-row.is-pinned { padding-right: 30px; }
.contact-row:hover,
.contact-row:focus-within { padding-right: 60px; }
body.editing .contact-row:hover,
body.editing .contact-row:focus-within { padding-right: 100px; }
.contact-name {
  flex: 1; min-width: 0;
  display: inline-flex; align-items: center; gap: 6px;
  color: inherit;
  overflow: hidden;
}
.cn-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
a.contact-name {
  cursor: pointer;
  transition: color var(--hover-motion);
}
a.contact-name:hover { color: var(--accent); }
.contact-name .link-mark {
  color: var(--fg-3);
  flex: none;
  transition: color var(--hover-motion);
}
a.contact-name:hover .link-mark { color: var(--accent); }

/* Action buttons overlay the right edge of the row absolutely — no width
   animation, so the row's name/text never shifts when you hover. */
.contact-actions {
  position: absolute;
  top: 50%; right: 6px;
  transform: translateY(-50%);
  display: flex; gap: 3px;
}
.contact-action-btn {
  width: 20px; height: 20px;
  border-radius: 5px;
  display: grid; place-items: center;
  color: var(--fg-3); background: var(--surface-2);
  border: 1px solid var(--border);
  opacity: 0;
  pointer-events: none;
  transform: translateX(6px);
  transition:
    opacity var(--hover-motion),
    transform var(--hover-motion),
    color var(--hover-motion),
    border-color var(--hover-motion);
  cursor: pointer;
  font: inherit; line-height: 1;
}
.contact-action-btn:hover { color: var(--accent); border-color: var(--accent); }
.contact-action-btn svg { display: block; }
.contact-action-btn.x { font-size: 15px; padding-bottom: 1px; }
.contact-action-btn.edit-only { display: none; }
body.editing .contact-action-btn.edit-only { display: grid; }
.contact-row:hover .contact-action-btn:not(.edit-only),
.contact-row:focus-within .contact-action-btn:not(.edit-only) {
  opacity: 1; pointer-events: auto; transform: translateX(0);
}
body.editing .contact-row:hover .contact-action-btn.edit-only,
body.editing .contact-row:focus-within .contact-action-btn.edit-only {
  opacity: 1; pointer-events: auto; transform: translateX(0);
}
/* pinned contact keeps its star always visible + indigo */
/* Pinned contact: keep the pin star visible even when the row isn't hovered. */
.contact-row.is-pinned .contact-pin {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(0);
}
.contact-action-btn.is-pinned { color: var(--accent); border-color: rgba(99,102,241,.35); }

/* subtle hover background on contact rows (like stand cards) */
.contact-row:hover { background: var(--surface-2); border-radius: 6px; }

/* ===== Contacts-type custom section ("groups" kind) =====
   Items are .card elements (so all card handlers + drag keep working) but
   rendered as a compact list that mirrors the built-in Contacts look. */
.contact-card-list { display: flex; flex-direction: column; }
.card.card-contact {
  display: flex; align-items: center; gap: 6px;
  min-height: 34px; padding: 7px 10px; margin: 0;
  background: transparent; border: 1px solid transparent;
  border-radius: 6px; box-shadow: none;
}
.card.card-contact::before { display: none; }
.card.card-contact + .card.card-contact { border-top: 1px dashed var(--border); border-radius: 0; }
.card.card-contact:hover { background: var(--surface-2); border-color: transparent; border-radius: 6px; }
.card.card-contact .card-name {
  flex: 1; min-width: 0;
  display: inline-flex; align-items: center; gap: 6px;
  font-weight: 500; font-size: 13px; color: var(--fg);
}
.card.card-contact .card-name .link-mark { color: var(--fg-3); flex: none; }
.card.card-contact .card-actions { top: 50%; right: 6px; transform: translateY(-50%); }
.card.card-contact .bulk-cbx { top: 50%; margin-top: -7px; left: 8px; }
body.editing .card.card-contact { padding-left: 28px; }
.contact-card-list .card.drag-over-before { box-shadow: inset 0 2px 0 var(--accent); }
.contact-card-list .card.drag-over-after { box-shadow: inset 0 -2px 0 var(--accent); }

/* group-member edit/delete gated to edit mode + hover (override generic .edit-only) */
.dm-btn.edit-only { display: none; }
body.editing .dm-btn.edit-only {
  display: grid;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateX(8px);
}
body.editing .dm-row:hover .dm-btn.edit-only,
body.editing .dm-row:focus-within .dm-btn.edit-only {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(0);
  transition-delay: 0s;
}

/* contact edit/delete: only in edit mode AND on row hover (override generic .edit-only) */
body.editing .contact-action-btn.edit-only {
  display: grid;
  width: 0;
  margin-left: 0;
  border-width: 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateX(8px);
}
body.editing .contact-row:hover .contact-action-btn.edit-only,
body.editing .contact-row:focus-within .contact-action-btn.edit-only {
  display: grid;
  width: 20px;
  margin-left: 0;
  border-width: 1px;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(0);
  transition-delay: 0s;
}

/* === Modal ===================================================== */
.modal {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.55);
  display: grid; place-items: center;
  z-index: 100;
  /* Top padding clears the sticky topbar so a tall card never hides behind it. */
  padding: 76px 16px 16px;
}
.modal[hidden] { display: none; }
/* Lock background page scroll while any modal is open. */
html:has(.modal:not([hidden])),
body:has(.modal:not([hidden])) { overflow: hidden; }
.active-tags[hidden] { display: none; }
.ac[hidden] { display: none; }
.toast[hidden] { display: none; }
/* Force-hide for any element with [hidden] attribute — overrides flex/grid display set by author rules. */
[hidden] { display: none !important; }
.modal-card {
  width: 100%; max-width: 460px;
  max-height: calc(100dvh - 92px);
  background: var(--bg-2);
  border: 1px solid var(--border-2);
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.modal-card.small { max-width: 380px; }
.modal-card.large { max-width: 560px; }

.detail-head-actions { display: flex; align-items: center; gap: 4px; }
.detail-head-actions .icon-btn { width: 32px; height: 32px; }
.detail-head-actions .icon-btn svg { display: block; }
.detail-head-actions .is-pinned { color: var(--accent); }

.detail-section { display: flex; flex-direction: column; gap: 14px; }
.detail-top {
  display: flex; gap: 12px; align-items: flex-start;
}
.detail-top .ico { width: 36px; height: 36px; border-radius: 8px; font-size: 16px; }
.detail-top-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.detail-name { font-size: 18px; font-weight: 700; letter-spacing: -.01em; word-break: break-word; }
.detail-kind {
  font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--fg-3);
}
.detail-url-row {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 12px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 12px;
  word-break: break-all;
}
.detail-url-row a { color: var(--fg); flex: 1; transition: color var(--hover-motion); }
.detail-url-row a:hover { color: var(--accent); }
.detail-actions-row { display: flex; gap: 6px; flex-wrap: wrap; }
.detail-tags { display: flex; flex-wrap: wrap; gap: 5px; }
.detail-note {
  display: flex; flex-direction: column; gap: 6px;
}
.detail-note label {
  font-size: 11px; text-transform: uppercase; letter-spacing: .08em;
  color: var(--fg-3);
}
.detail-note textarea {
  width: 100%;
  min-height: 80px;
  resize: vertical;
  padding: 10px 12px;
  background: var(--surface);
  color: var(--fg);
  border: 1px solid var(--border);
  border-radius: 8px;
  font: inherit;
  font-size: 13px;
  line-height: 1.45;
  transition: border-color var(--hover-motion);
}
.detail-note textarea:focus { outline: none; border-color: var(--accent); }
.detail-note-actions { display: flex; gap: 6px; }
.detail-meta {
  display: flex; flex-direction: column; gap: 8px;
  font-size: 11px; color: var(--fg-3);
}
.detail-meta-line { line-height: 1.4; }
/* History popover anchored to the modal header (opened by the clock button).
   Solid surface + shadow only — no blur, per the no-GPU-effects rule. */
.detail-hist-pop {
  position: fixed;          /* placed via JS under the clock button, clamped to viewport */
  z-index: 60;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 14px 32px rgba(0, 0, 0, .45);
  overflow: hidden;
}
.detail-hist-head {
  display: flex; align-items: center; gap: 6px;
  padding: 6px 10px;
  font-size: 11px; font-weight: 600; color: var(--fg-2);
  border-bottom: 1px solid var(--border);
}
.detail-hist-head svg { display: block; color: var(--fg-3); }
.detail-hist-count {
  margin-left: auto;
  min-width: 18px; height: 18px; padding: 0 5px;
  display: inline-grid; place-items: center;
  font-size: 10px; font-weight: 700;
  background: var(--surface); color: var(--fg-3);
  border: 1px solid var(--border); border-radius: 9px;
}
.detail-hist-list {
  max-height: 84px; overflow-y: auto;
  display: flex; flex-direction: column;
  scrollbar-width: auto;
}
.detail-hist-row {
  display: flex; align-items: center; gap: 8px;
  padding: 5px 10px;
  min-height: 28px;
  border-bottom: 1px dashed var(--border);
  font-size: 11px;
}
.detail-hist-row:last-child { border-bottom: 0; }
.detail-hist-act {
  flex: none;
  font-size: 9px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase;
  padding: 1px 6px; border-radius: 5px;
  background: var(--surface); color: var(--fg-3);
  border: 1px solid var(--border);
}
.detail-hist-act.is-created { color: var(--accent); border-color: rgba(99,102,241,.35); }
.detail-hist-when { color: var(--fg-2); white-space: nowrap; }
.detail-hist-who { margin-left: auto; color: var(--fg-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.detail-members {
  display: flex; flex-direction: column; gap: 4px;
  max-height: 240px; overflow-y: auto; overflow-x: hidden;
  padding: 8px 10px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 8px;
}
.detail-members .dm-row { position: relative; font-size: 13px; padding: 4px 118px 4px 0; border-bottom: 1px dashed var(--border); display: flex; gap: 6px; align-items: center; min-width: 0; }
.detail-members .dm-row:last-child { border-bottom: 0; }
.detail-members .dm-name { color: var(--fg); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; transition: color var(--hover-motion); }
.detail-members a.dm-name:hover { color: var(--accent); }
/* Anchor the note flag to the row's true right edge. The row reserves
   padding-right for the (absolute) action cluster, so a flex/margin approach
   would leave the flag stranded mid-row — absolute right:0 sits it flush
   right, where the action icons overlay it on hover. */
.detail-members .note-mark {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  flex: none;
}
.detail-member-group { display: flex; flex-direction: column; gap: 6px; }
.detail-member-group + .detail-member-group { margin-top: 10px; }
.detail-member-title { margin-bottom: 0; display: flex; align-items: center; gap: 8px; }
.detail-member-view {
  display: inline-grid; place-items: center;
  width: 18px; height: 18px;
  color: var(--fg-3);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 4px;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--hover-motion), color var(--hover-motion), border-color var(--hover-motion);
}
/* Show the group's "open card" eye only when that group is being hovered. */
.detail-member-group:hover .detail-member-view,
.detail-member-group:focus-within .detail-member-view {
  opacity: 1;
  pointer-events: auto;
}
.detail-member-view:hover { color: var(--accent); border-color: var(--accent); }
.detail-member-view svg { display: block; }
.dm-link-row .ico {
  width: 20px; height: 20px; border-radius: 5px;
  flex: none;
}
.dm-link-row .ico svg { width: 15px; height: 15px; }
.dm-link-main {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; gap: 1px;
}
.dm-link-main .dm-name { flex: none; }
.dm-sub {
  color: var(--fg-3); font-size: 11px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Hover-reveal actions overlay the right side of the row (absolute → no layout
   shift). Simple fade + slide matches the standard --hover-motion used
   everywhere else, so the timing is consistent with other hover-reveals. */
.dm-actions {
  position: absolute; right: 0; top: 50%;
  display: flex; gap: 3px;
  background: var(--surface-2);
  padding-left: 8px;
  opacity: 0;
  transform: translate(6px, -50%);
  pointer-events: none;
  transition: opacity var(--hover-motion), transform var(--hover-motion);
}
.dm-row:hover .dm-actions,
.dm-row:focus-within .dm-actions {
  opacity: 1;
  transform: translate(0, -50%);
  pointer-events: auto;
}
.dm-btn {
  width: 22px; height: 22px;
  display: grid; place-items: center;
  border-radius: 5px;
  color: var(--fg-3); background: var(--surface);
  border: 1px solid var(--border);
  cursor: pointer; line-height: 1;
  transition: color var(--hover-motion), border-color var(--hover-motion);
}
.dm-btn:hover { color: var(--accent); border-color: var(--accent); }
.dm-btn svg { display: block; }
.dm-btn.is-pinned { color: var(--accent); border-color: rgba(99,102,241,.35); }
.dm-btn.x { font-size: 15px; }
.detail-empty { color: var(--fg-3); font-size: 12px; padding: 8px 0; text-align: center; }

/* View-mode links list */
.detail-links { display: flex; flex-direction: column; gap: 6px; }
.detail-link-row {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 10px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 8px;
}
.detail-link-row .dl-open {
  flex: 1; min-width: 0;
  display: flex; align-items: baseline; gap: 8px;
  color: var(--fg); font-size: 12px;
  overflow: hidden;
}
.detail-link-row .dl-open:hover .dl-url-text { color: var(--accent); }
.dl-label-text { font-weight: 700; flex: none; }
.dl-url-text { color: var(--fg-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: color var(--hover-motion); }
.dl-copy {
  flex: none; width: 26px; height: 26px;
  display: grid; place-items: center;
  border-radius: 6px; color: var(--fg-3);
  background: transparent; border: 1px solid transparent;
  cursor: pointer; transition: color var(--hover-motion), border-color var(--hover-motion), background var(--hover-motion);
}
.dl-copy:hover { color: var(--accent); border-color: var(--accent); background: var(--surface); }
.dl-copy svg { display: block; }

/* Read-only note display */
.detail-note-view {
  padding: 10px 12px;
  background: var(--accent-bg);
  border: 1px solid rgba(99,102,241,.2);
  border-radius: 8px;
  font-size: 13px; line-height: 1.5;
  color: var(--fg);
  white-space: pre-wrap; word-break: break-word;
}
.detail-note-view.personal {
  background: var(--surface-2);
  border-color: var(--border-2);
}
.note-tag {
  display: inline-block; vertical-align: middle;
  font-size: 9.5px; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase;
  padding: 1px 6px; border-radius: 5px;
  margin-right: 8px;
}
.note-tag-all { background: var(--accent); color: #fff; }
.note-tag-me  { background: var(--border-2); color: var(--fg); }
.note-scope-hint { font-style: normal; font-weight: 400; color: var(--fg-3); font-size: 10px; margin-left: 6px; text-transform: none; letter-spacing: 0; }
.note-mark.note-personal { color: var(--fg-2); }

/* Edit-mode fields */
.dl-field { display: flex; flex-direction: column; gap: 6px; }
.dl-field > span { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--fg-3); }
.dl-field input, .dl-field textarea {
  width: 100%; padding: 9px 11px;
  background: var(--surface); color: var(--fg);
  border: 1px solid var(--border); border-radius: 8px;
  font: inherit; font-size: 13px;
  transition: border-color var(--hover-motion);
}
.dl-field textarea { min-height: 70px; resize: vertical; line-height: 1.45; }
.dl-field input:focus, .dl-field textarea:focus { outline: none; border-color: var(--accent); }
#detail-name-input { font-size: 15px; font-weight: 600; }

.dl-edit-list { display: flex; flex-direction: column; gap: 6px; }
.dl-edit-row { display: flex; gap: 6px; align-items: center; }
.dl-edit-row .dl-label-input { flex: 0 0 110px; }
.dl-edit-row .dl-url-input { flex: 1; min-width: 0; }
.dl-edit-row.dl-main .dl-url-input { flex: 1; }
.dl-edit-row input {
  padding: 8px 10px;
  background: var(--surface); color: var(--fg);
  border: 1px solid var(--border); border-radius: 7px;
  font: inherit; font-size: 12.5px;
  transition: border-color var(--hover-motion);
}
.dl-edit-row.dl-main .dl-url-input { border-color: var(--border-2); }
.dl-edit-row input:focus { outline: none; border-color: var(--accent); }
.dl-remove {
  flex: none; width: 28px; height: 30px;
  border-radius: 7px; font-size: 16px; line-height: 1;
  color: var(--fg-3); background: var(--surface-2);
  border: 1px solid var(--border); cursor: pointer;
  transition: color var(--hover-motion), border-color var(--hover-motion);
}
.dl-remove:hover { color: var(--accent); border-color: var(--accent); }
.dl-add {
  align-self: flex-start;
  font-size: 12px; color: var(--fg-2);
  border: 1px dashed var(--border-2); border-radius: 6px;
  padding: 5px 10px; cursor: pointer;
  transition: color var(--hover-motion), border-color var(--hover-motion);
}
.dl-add:hover { color: var(--accent); border-color: var(--accent); }

.detail-edit-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 4px; }
.detail-icon-preview {
  display: inline-grid;
  place-items: center;
}
.detail-icon-preview .ico { width: 36px; height: 36px; border-radius: 8px; font-size: 16px; }

/* Icon picker search + grid */
.icon-search {
  width: 100%; height: 34px; padding: 0 10px;
  background: var(--surface); color: var(--fg);
  border: 1px solid var(--border); border-radius: 8px;
  font: inherit; font-size: 13px;
  transition: border-color var(--hover-motion);
}
.icon-search:focus { outline: none; border-color: var(--accent); }
.icon-empty { color: var(--fg-3); font-size: 12px; padding: 10px; width: 100%; text-align: center; }
.icon-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(30px, 1fr));
  justify-items: center;
  gap: 6px;
  max-height: 132px; overflow-y: auto;
  padding: 8px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 8px;
  scrollbar-width: auto;
  overscroll-behavior: contain;
}
.icon-opt {
  width: 30px; height: 30px;
  display: grid; place-items: center;
  border-radius: 7px; cursor: pointer;
  background: transparent; border: 1px solid transparent;
  padding: 0;
  appearance: none;
  -webkit-appearance: none;
  line-height: 0;
  transition: border-color var(--hover-motion), background var(--hover-motion);
}
.icon-opt .ico { width: 24px; height: 24px; }
.icon-opt:hover { border-color: var(--border-2); }
.icon-opt.sel { border-color: var(--accent); background: var(--accent-bg); }
.icon-opt.icon-auto {
  font-size: 13px; font-weight: 600; color: var(--fg-2);
  border: 1px dashed var(--border-2);
}
.icon-opt.icon-auto.sel { color: var(--accent); border-color: var(--accent); border-style: solid; }
.modal-head {
  position: relative;
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
}
.modal-head h3 { margin: 0; font-size: 15px; }
.icon-btn {
  width: 28px; height: 28px; border-radius: 6px;
  display: grid; place-items: center;
  color: var(--fg-2);
  transition: color var(--hover-motion), background var(--hover-motion);
}
.icon-btn:hover { color: var(--fg); background: var(--surface-2); }
.modal-body { padding: 16px; display: flex; flex-direction: column; gap: 12px; overflow-y: auto; min-height: 0; overscroll-behavior: contain; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field[hidden] { display: none; }
/* Section-type chooser */
.sk-options { display: flex; flex-direction: column; gap: 6px; }
.sk-opt {
  display: flex; flex-direction: column; gap: 2px;
  text-align: left; padding: 9px 11px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 8px;
  cursor: pointer; transition: border-color var(--hover-motion), background var(--hover-motion);
}
.sk-opt b { font-size: 13px; font-weight: 650; }
.sk-opt em { font-style: normal; font-size: 11px; color: var(--fg-3); }
.sk-opt:hover { border-color: var(--border-2); }
.sk-opt.sel { border-color: var(--accent); background: var(--accent-bg); }
.field span { font-size: 11px; color: var(--fg-3); text-transform: uppercase; letter-spacing: .08em; }
.field input {
  height: 36px; padding: 0 10px;
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: 8px;
  transition: border-color var(--hover-motion);
}
.field input:focus { border-color: var(--accent); }
.field input[readonly] { color: var(--fg-2); opacity: .8; cursor: default; }
.auth-remember {
  display: flex; align-items: center; gap: 8px;
  font-size: 12px; color: var(--fg-2); cursor: pointer; user-select: none;
}
/* Custom checkbox matching the site's accent style (no native chrome). */
.auth-remember input {
  appearance: none; -webkit-appearance: none;
  flex: none; margin: 0;
  width: 16px; height: 16px;
  border: 1px solid var(--border-2); border-radius: 4px;
  background: var(--surface); cursor: pointer; position: relative;
  transition: background var(--hover-motion), border-color var(--hover-motion);
}
.auth-remember input:hover { border-color: var(--accent); }
.auth-remember input:checked { background: var(--accent); border-color: var(--accent); }
.auth-remember input:checked::after {
  content: ''; position: absolute; left: 5px; top: 2px;
  width: 4px; height: 8px;
  border: solid #fff; border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.modal-actions {
  display: flex; justify-content: flex-end; gap: 8px;
  margin-top: 4px;
}
.hint { margin: 0 0 4px; font-size: 12px; color: var(--fg-2); }

/* === Floating stack: bulk-bar at bottom, toasts stacked above ====
   New toasts are appended to .toast-stack (column-reverse) so each one
   appears at the top and pushes older ones / the bulk-bar... nothing,
   actually — they sit ABOVE bulk-bar because bulk-bar is a later sibling.
   Bulk-bar appearing pushes everything above it up by its own height. */
.floating-stack {
  position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center;
  gap: 8px;
  z-index: 200;
  pointer-events: none;
}
.toast-stack {
  display: flex; flex-direction: column-reverse; align-items: center;
  gap: 8px;
}
.toast-stack:empty { display: none; }
.toast {
  position: static; transform: none;
  background: var(--surface); color: var(--fg);
  border: 1px solid var(--border-2);
  border-radius: 10px;
  padding: 10px 14px;
  font-size: 13px;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  pointer-events: auto;
}

/* Bulk-action floating bar */
.bulk-bar {
  position: static; transform: none;
  display: flex; align-items: center; gap: 8px;
  padding: 8px 12px;
  background: var(--bg-2);
  border: 1px solid var(--border-2);
  border-radius: 12px;
  pointer-events: auto;
}
.bulk-bar .btn { height: 32px; }
.bulk-bar-count { font-size: 13px; color: var(--fg-2); padding: 0 6px 0 4px; }
.bulk-bar-count b { color: var(--fg); }
.toast.error { color: var(--accent); border-color: var(--accent); }
.toast.undo button {
  border: 0;
  background: transparent;
  color: var(--accent);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  padding: 0;
}
.toast.undo button:hover { text-decoration: underline; }

.empty-state {
  text-align: center; color: var(--fg-3);
  padding: 60px 20px;
}

/* === Hidden during search ===================================== */
.card.hidden, .contact.hidden, .stand.hidden, .block.hidden { display: none !important; }
.stand-list .card.hidden { display: none; }

/* === Responsive ================================================ */
@media (max-width: 1200px) {
  .stands { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* On smaller / zoomed screens drop the whole sub-line (tagline + status dot):
   it has no tidy home once the brand area tightens, so hide it entirely. */
@media (max-width: 1080px) {
  .brand-sub { display: none; }
}
@media (max-width: 760px) {
  .topbar-row {
    /* Brand keeps its content width; actions get the rest and wrap inside it,
       so the row can never grow wider than the screen (no horizontal scroll). */
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas:
      "brand actions"
      "search search";
    gap: 8px;
    padding: 10px 12px;
  }
  .brand { grid-area: brand; }
  .actions { grid-area: actions; justify-self: end; gap: 6px; }
  .brand-prefix { display: none; }
  .brand-title { font-size: 14px; }
  .brand-mark { width: 30px; height: 30px; border-radius: 8px; font-size: 17px; }
  .actions-panel {
    top: 0;
    right: 32px;
    width: auto;
    flex-wrap: nowrap;
    justify-content: flex-end;
    gap: 5px;
    padding: 0;
    background: transparent;
    border: 0;
    box-shadow: none;
  }
  .actions-panel .sort-menu {
    top: calc(100% + 8px);
  }
  .search { grid-area: search; max-width: none; }
  .btn-label { display: none; }
  .btn { height: 32px; padding: 0 8px; }
  .btn.icon-only { width: 32px; }
  .actions-dock { width: 32px; min-width: 32px; height: 32px; }
  .version-badge { display: none; }
  #command-btn { display: inline-flex; }
  .page { padding: 14px 14px 48px; }
  .stands { grid-template-columns: 1fr; }
  .grid-flow { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
  .kbd { display: none; }
}
@media (max-width: 420px) {
  .grid-flow { grid-template-columns: 1fr; }
  .contacts { grid-template-columns: 1fr; }
}
/* Last-resort on very narrow screens: keep the brand label compact so the
   brand + all action buttons always stay on one row. */
@media (max-width: 400px) {
  .brand-prefix { display: none; }
}