/* ──────────────────────────────────────────────────────────────────────
   Controls, overlays, and every small reusable part of the notebook.
   ────────────────────────────────────────────────────────────────────── */

/* ── Buttons ──────────────────────────────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  font-size: var(--text-sm);
  font-weight: 500;
  line-height: 1.4;
  white-space: nowrap;
  color: var(--ink-2);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease-out),
              background var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out);
}
.btn:hover {
  color: var(--ink);
  border-color: var(--border-strong);
  box-shadow: var(--shadow-card);
  transform: translateY(-1px);
}
.btn:active {
  transform: translateY(0) scale(0.98);
  box-shadow: none;
}

.btn--ghost {
  background: transparent;
  border-color: transparent;
}
.btn--ghost:hover {
  background: var(--surface-2);
  border-color: var(--border);
}

/* Beside a text input a borderless button reads as a link, so give ghost
   buttons inside a form row a visible edge. */
.input-row > .btn--ghost {
  border-color: var(--border);
}

.btn--primary {
  color: var(--paper);
  background: linear-gradient(145deg, var(--accent) 0%, var(--accent-ink) 100%);
  border-color: color-mix(in srgb, var(--accent-ink) 55%, transparent);
}
.btn--primary:hover {
  color: var(--paper);
  border-color: var(--accent-ink);
}

.btn--danger {
  color: var(--danger);
  background: transparent;
  border-color: color-mix(in srgb, var(--danger) 35%, transparent);
}
.btn--danger:hover {
  color: var(--danger);
  background: color-mix(in srgb, var(--danger) 12%, transparent);
  border-color: var(--danger);
}

.btn--icon {
  width: 34px;
  height: 34px;
  padding: 0;
  flex-shrink: 0;
}

.btn__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  line-height: 1;
  opacity: 0.85;
}
.btn__icon svg { display: block; }

.btn__label { white-space: nowrap; }

.btn.is-active {
  color: var(--accent-ink);
  background: var(--accent-soft);
  border-color: color-mix(in srgb, var(--accent) 45%, transparent);
}

/* Placed last so it outranks the hover/active rules above. */
.btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* ── Row icon buttons ─────────────────────────────────────────────── */

.iconbtn {
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  padding: 0;
  color: var(--ink-3);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease-out),
              background var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out);
}
.iconbtn svg {
  display: block;
  width: 15px;
  height: 15px;
}
.iconbtn:hover {
  color: var(--accent-ink);
  background: var(--accent-soft);
  border-color: color-mix(in srgb, var(--accent) 40%, transparent);
  transform: translateY(-1px);
}
.iconbtn:active { transform: scale(0.94); }
.iconbtn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  transform: none;
}

.iconbtn.is-copied {
  color: var(--ok);
  background: var(--ok-bg);
  border-color: color-mix(in srgb, var(--ok) 45%, transparent);
}

/* ── Form fields ──────────────────────────────────────────────────── */

.field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-width: 0;
}

.field__label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.field__hint {
  font-size: var(--text-xs);
  line-height: var(--leading-normal);
  color: var(--ink-faint);
}

.input,
.select,
.textarea {
  width: 100%;
  min-width: 0;
  padding: var(--space-2) var(--space-3);
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  transition: border-color var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out),
              background var(--dur-fast) var(--ease-out);
}
.input::placeholder,
.textarea::placeholder { color: var(--ink-faint); }

.input:hover,
.select:hover,
.textarea:hover { border-color: var(--border-strong); }

.input:focus,
.select:focus,
.textarea:focus,
.input:focus-visible,
.select:focus-visible,
.textarea:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.input:disabled,
.select:disabled,
.textarea:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  background: var(--surface-2);
}

/* Queries are typed as code, so the plain input switches to mono on demand. */
.input--mono { font-family: var(--font-mono); }

/* The caret is drawn with two gradients rather than an SVG so it stays
   token-coloured in both themes. */
.select {
  appearance: none;
  padding-right: var(--space-6);
  background-image:
    linear-gradient(45deg, transparent 50%, var(--ink-3) 50%),
    linear-gradient(135deg, var(--ink-3) 50%, transparent 50%);
  background-size: 5px 5px;
  background-position: right 17px center, right 12px center;
  background-repeat: no-repeat;
  cursor: pointer;
}

.textarea {
  min-height: 96px;
  font-family: var(--font-mono);
  line-height: var(--leading-normal);
  resize: vertical;
}

.input-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--space-3);
}
/* Text controls take the slack; buttons and chips keep their natural width. */
.input-row > * {
  flex: 0 0 auto;
  min-width: 0;
}
.input-row > .input,
.input-row > .select,
.input-row > .textarea {
  flex: 1 1 180px;
}

/* ── Segmented control ────────────────────────────────────────────── */

.segmented {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
}

.segmented__opt {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 3px var(--space-3);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
  border-radius: var(--radius-pill);
  cursor: pointer;
  user-select: none;
  transition: background var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out);
}
.segmented__opt input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  margin: 0;
  clip-path: inset(50%);
  pointer-events: none;
}
.segmented__opt:hover { color: var(--ink); }
.segmented__opt:focus-within { box-shadow: 0 0 0 2px var(--accent); }

.segmented__opt.is-active {
  color: var(--paper);
  background: var(--accent);
}

/* ── Chips ────────────────────────────────────────────────────────── */

.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 3px var(--space-3);
  font-size: var(--text-xs);
  font-weight: 500;
  line-height: 1.6;
  color: var(--ink-2);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease-out),
              background var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out);
}
.chip:hover {
  color: var(--ink);
  border-color: var(--border-strong);
  box-shadow: var(--shadow-card);
  transform: translateY(-1px);
}
.chip:active { transform: translateY(0); }

.chip__count {
  font-variant-numeric: tabular-nums;
  color: var(--ink-faint);
}

.chip--info {
  color: var(--risk-info);
  background: var(--risk-info-bg);
  border-color: color-mix(in srgb, var(--risk-info) 35%, transparent);
}
.chip--notable {
  color: var(--risk-notable);
  background: var(--risk-notable-bg);
  border-color: color-mix(in srgb, var(--risk-notable) 35%, transparent);
}
.chip--sensitive {
  color: var(--risk-sensitive);
  background: var(--risk-sensitive-bg);
  border-color: color-mix(in srgb, var(--risk-sensitive) 35%, transparent);
}

.chip.is-active {
  color: var(--accent-ink);
  background: var(--accent-soft);
  border-color: color-mix(in srgb, var(--accent) 50%, transparent);
}
.chip.is-active .chip__count { color: inherit; }

/* ── Checkbox ─────────────────────────────────────────────────────── */

.check {
  display: inline-flex;
  align-items: flex-start;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: var(--ink-2);
  cursor: pointer;
  user-select: none;
}

.check input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  margin: 0;
  clip-path: inset(50%);
  pointer-events: none;
}

.check__box {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin-top: 1px;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  transition: background var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out);
}
.check:hover .check__box { border-color: var(--accent); }

/* Tick and dash share one grid cell so they can swap without reflow. */
.check__tick,
.check__dash { grid-area: 1 / 1; }

.check__tick {
  width: 13px;
  height: 13px;
  fill: none;
  stroke: var(--paper);
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 24;
  stroke-dashoffset: 24;
}

.check__dash {
  width: 9px;
  height: 2px;
  border-radius: 1px;
  background: var(--accent);
  opacity: 0;
  transition: opacity var(--dur-fast) var(--ease-out);
}

.check input:checked + .check__box {
  background: var(--accent);
  border-color: var(--accent);
}
.check input:checked + .check__box .check__tick { stroke-dashoffset: 0; }

.check input:indeterminate + .check__box {
  background: var(--accent-soft);
  border-color: var(--accent);
}
.check input:indeterminate + .check__box .check__tick { opacity: 0; }
.check input:indeterminate + .check__box .check__dash { opacity: 1; }

.check input:focus-visible + .check__box {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

/* ── Catalog accordion ────────────────────────────────────────────── */

.catalog {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.cat {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: border-color var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out);
}
.cat.is-open {
  border-color: var(--border-strong);
  box-shadow: var(--shadow-card);
}

.cat__head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  padding: var(--space-3) var(--space-4);
  text-align: left;
  background: transparent;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out);
}
.cat__head:hover { background: var(--surface-2); }

.cat__icon {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 20px;
  color: var(--ink-3);
}

/* Title and blurb stack inside .cat__text, which takes the free space so the
   count badge and chevron stay pinned to the right edge of the header. */
.cat__text {
  flex: 1;
  min-width: 0;
}

.cat__title {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
}

.cat__blurb {
  min-width: 0;
  font-size: var(--text-xs);
  color: var(--ink-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cat__badge {
  flex-shrink: 0;
  padding: 1px var(--space-2);
  font-size: var(--text-xs);
  font-variant-numeric: tabular-nums;
  color: var(--ink-3);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
}

.cat__chev {
  flex-shrink: 0;
  color: var(--ink-faint);
  line-height: 1;
  transition: transform var(--dur-mid) var(--ease-out);
}
.cat.is-open .cat__chev { transform: rotate(90deg); }

/* Height-less open/close: the row track animates from 0fr to 1fr. */
.cat__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--dur-mid) var(--ease-out);
}
.cat.is-open .cat__panel { grid-template-rows: 1fr; }

.cat__items {
  overflow: hidden;
  min-height: 0;
}

/* ── Dork row ─────────────────────────────────────────────────────── */

.dork {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-4);
  border-top: 1px solid var(--border);
  transition: background var(--dur-fast) var(--ease-out);
}
.dork:hover { background: var(--surface-2); }

.dork__main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.dork__name {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--ink);
}

.dork__tpl {
  display: block;
  width: fit-content;
  max-width: 100%;
  padding: 1px var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--ink-3);
  background: var(--paper-sunk);
  border-radius: var(--radius-sm);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dork__preview {
  font-size: var(--text-xs);
  color: var(--ink-faint);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dork__risk {
  flex-shrink: 0;
  padding: 1px var(--space-2);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: var(--radius-sm);
  color: var(--risk-info);
  background: var(--risk-info-bg);
}
.dork__risk--notable,
.dork__risk[data-risk='notable'] {
  color: var(--risk-notable);
  background: var(--risk-notable-bg);
}
.dork__risk--sensitive,
.dork__risk[data-risk='sensitive'] {
  color: var(--risk-sensitive);
  background: var(--risk-sensitive-bg);
}

/* ── Results ──────────────────────────────────────────────────────── */

.results {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.result-group__title {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.result-group__title::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--rule-strong);
}

.result {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-2) var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  transition: border-color var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out);
}
.result:hover {
  border-color: var(--border-strong);
  box-shadow: var(--shadow-card);
}

.result__name,
.result__query,
.result__meta,
.result__parts { grid-column: 1; }

.result__name {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--ink);
}

.result__query {
  padding: var(--space-2) var(--space-3);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  line-height: 1.5;
  color: var(--ink);
  background: var(--paper-sunk);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius-sm);
  word-break: break-all;
  user-select: text;
}

.result__meta {
  font-size: var(--text-xs);
  color: var(--ink-faint);
  font-variant-numeric: tabular-nums;
}

.result__parts {
  font-size: var(--text-xs);
  font-style: italic;
  color: var(--ink-3);
}

.result__actions {
  display: flex;
  align-items: flex-start;
  gap: var(--space-1);
  grid-column: 2;
  grid-row: 1;
  align-self: start;
}

/* The headline query of a run gets the accent treatment. */
.result--combined {
  padding: var(--space-4);
  background: var(--accent-soft);
  border-color: color-mix(in srgb, var(--accent) 40%, transparent);
}
.result--combined .result__name {
  font-size: var(--text-base);
  color: var(--accent-ink);
}
.result--combined .result__query {
  font-size: var(--text-base);
  background: var(--surface);
}

/* ── Callouts ─────────────────────────────────────────────────────── */

.notes {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.note {
  --note-tone: var(--accent);
  --note-wash: var(--accent-soft);
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--note-wash);
  border: 1px solid color-mix(in srgb, var(--note-tone) 28%, transparent);
  border-left: 3px solid var(--note-tone);
  border-radius: var(--radius-md);
}
.note--warn {
  --note-tone: var(--warn);
  --note-wash: var(--warn-bg);
}
.note--info {
  --note-tone: var(--risk-info);
  --note-wash: var(--risk-info-bg);
}
.note--ok {
  --note-tone: var(--ok);
  --note-wash: var(--ok-bg);
}

.note__icon {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  margin-top: 1px;
  color: var(--note-tone);
}

.note__text {
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  color: var(--ink-2);
}

/* ── Key / value readout ──────────────────────────────────────────── */

.kv {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: var(--space-2) var(--space-4);
  align-items: baseline;
}

.kv__k {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.04em;
  color: var(--ink-faint);
}

.kv__v {
  min-width: 0;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--ink);
  word-break: break-word;
}

/* ── Empty and loading states ─────────────────────────────────────── */

.empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-6) var(--space-4);
  text-align: center;
  font-size: var(--text-sm);
  color: var(--ink-faint);
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-md);
}

.empty__icon {
  font-size: var(--text-xl);
  line-height: 1;
  opacity: 0.35;
}

.skeleton {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.skeleton__line {
  height: 12px;
  border-radius: var(--radius-sm);
  background: linear-gradient(
    90deg,
    var(--paper-sunk) 0%,
    var(--surface-2) 45%,
    var(--surface) 50%,
    var(--surface-2) 55%,
    var(--paper-sunk) 100%
  );
  background-size: 200% 100%;
  animation: shimmer 1.4s linear infinite;
}
.skeleton__line--short { width: 55%; }

/* ── Run progress bar ─────────────────────────────────────────────── */

.runbar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  z-index: 2;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  background: var(--accent-soft);
  transition: opacity var(--dur-fast) var(--ease-out);
}
.runbar i {
  display: block;
  width: 32%;
  height: 100%;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent 0%, var(--accent) 50%, transparent 100%);
}

/* ── Toasts ───────────────────────────────────────────────────────── */

.toast-stack {
  position: fixed;
  right: var(--space-4);
  bottom: var(--space-4);
  z-index: 120;
  display: flex;
  flex-direction: column-reverse;
  align-items: flex-end;
  gap: var(--space-2);
  max-width: min(380px, calc(100vw - var(--space-6)));
  pointer-events: none;
}

.toast {
  --toast-tone: var(--accent);
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  max-width: 380px;
  padding: var(--space-3) var(--space-4);
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--toast-tone);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-pop);
  pointer-events: auto;
}
.toast--ok { --toast-tone: var(--ok); }
.toast--warn { --toast-tone: var(--warn); }
.toast--error { --toast-tone: var(--danger); }

.toast__icon {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  margin-top: 1px;
  color: var(--toast-tone);
}

.toast__msg {
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  color: var(--ink-2);
}

/* ── Menus ────────────────────────────────────────────────────────── */

.menu {
  position: fixed;
  z-index: 110;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 220px;
  max-width: calc(100vw - var(--space-4));
  padding: 6px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-pop);
}

.menu__item {
  display: block;
  width: 100%;
  padding: var(--space-2) var(--space-3);
  text-align: left;
  background: transparent;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out);
}
.menu__item:hover { background: var(--surface-2); }

.menu__item b {
  display: block;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--ink);
}

.menu__item span {
  display: block;
  font-size: var(--text-xs);
  line-height: 1.45;
  color: var(--ink-3);
}

/* Outranks the base rule so the attribute alone closes the menu. */
.menu[hidden] { display: none; }

/* ── Drawer ───────────────────────────────────────────────────────── */

.drawer {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 115;
  display: flex;
  flex-direction: column;
  width: min(420px, 92vw);
  height: 100dvh;
  background: var(--surface);
  border-left: 1px solid var(--border);
  box-shadow: var(--shadow-pop);
  transform: translateX(100%);
  transition: transform var(--dur-mid) var(--ease-out);
}
.drawer.is-open { transform: translateX(0); }
.drawer[hidden] { display: none; }

.drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-4);
  border-bottom: 1px solid var(--border);
}
.drawer__head h3 { font-size: var(--text-md); }

.drawer__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-4);
  overflow-y: auto;
}

.nb-item {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-3);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-out),
              background var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out);
}
.nb-item:hover {
  background: var(--accent-soft);
  border-color: color-mix(in srgb, var(--accent) 45%, transparent);
  box-shadow: var(--shadow-card);
}

.nb-item__title {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--ink);
}

.nb-item__meta {
  font-size: var(--text-xs);
  color: var(--ink-faint);
  font-variant-numeric: tabular-nums;
}

.nb-item__actions {
  display: flex;
  gap: var(--space-1);
}

/* ── Modal ────────────────────────────────────────────────────────── */

.modal {
  position: fixed;
  inset: 0;
  z-index: 130;
  display: grid;
  place-items: center;
  padding: var(--space-4);
}
.modal[hidden] { display: none; }

.modal__card {
  display: flex;
  flex-direction: column;
  width: min(680px, 94vw);
  max-height: 86vh;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-pop);
  overflow: hidden;
}

.modal__head {
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-4);
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}
.modal__head h3 { font-size: var(--text-md); }

.modal__body {
  padding: var(--space-4);
  overflow-y: auto;
}

/* ── Cheat sheet ──────────────────────────────────────────────────── */

.cheat {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.cheat h4 {
  font-family: var(--font-display);
  font-size: var(--text-sm);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.cheat table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
}

.cheat th,
.cheat td {
  padding: var(--space-2) var(--space-3) var(--space-2) 0;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--border);
}

.cheat th {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.cheat td { color: var(--ink-2); }

.cheat code {
  padding: 1px var(--space-2);
  font-size: var(--text-xs);
  color: var(--ink);
  background: var(--paper-sunk);
  border-radius: var(--radius-sm);
  word-break: break-all;
}

.kbd {
  display: inline-block;
  padding: 1px 5px;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  line-height: 1.5;
  color: var(--ink-2);
  background: var(--paper-sunk);
  border: 1px solid var(--border-strong);
  border-bottom-width: 2px;
  border-radius: var(--radius-sm);
}

/* ── Scrim ────────────────────────────────────────────────────────── */

.scrim {
  position: fixed;
  inset: 0;
  z-index: 105;
  background: rgba(0, 0, 0, 0.35);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  opacity: 0;
  transition: opacity var(--dur-mid) var(--ease-out);
}
.scrim.is-open { opacity: 1; }
.scrim[hidden] { display: none; }

/* ── Notepad ──────────────────────────────────────────────────────── */

/* Line height tracks the sheet ruling so handwriting lands on the lines. */
.notepad {
  display: block;
  width: 100%;
  min-height: 90px;
  padding: 0 var(--space-2);
  font-family: var(--font-display);
  font-size: var(--text-base);
  line-height: var(--rule-height);
  color: var(--ink);
  background: transparent;
  border: none;
  border-radius: var(--radius-sm);
  resize: vertical;
  transition: background var(--dur-fast) var(--ease-out);
}
.notepad::placeholder {
  color: var(--ink-faint);
  font-style: italic;
}
.notepad:focus,
.notepad:focus-visible {
  outline: none;
  box-shadow: none;
  background: var(--accent-soft);
}

/* ── Theme dot ────────────────────────────────────────────────────── */

.theme-dot {
  display: block;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--paper) 0 50%, var(--ink) 50% 100%);
  border: 1px solid var(--border-strong);
  transition: transform var(--dur-mid) var(--ease-spring);
}
.theme-dot:hover,
.btn:hover .theme-dot { transform: rotate(180deg); }

/* ── Badge ────────────────────────────────────────────────────────── */

.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 1px var(--space-2);
  font-size: var(--text-xs);
  font-weight: 500;
  line-height: 1.6;
  color: var(--ink-3);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  font-variant-numeric: tabular-nums;
}
.badge--count {
  min-width: 22px;
  justify-content: center;
  color: var(--ink-2);
}

/* ── Narrow screens ───────────────────────────────────────────────── */

@media (max-width: 640px) {
  .result {
    grid-template-columns: minmax(0, 1fr);
    padding: var(--space-3);
  }
  .result__actions {
    grid-column: 1;
    grid-row: auto;
    justify-content: flex-end;
  }
  .result--combined { padding: var(--space-3); }

  .cat__head { padding: var(--space-3); }
  .cat__blurb { display: none; }
  /* With the blurb gone the title is the only label, so let it wrap instead
     of being clipped mid-word underneath the count badge. */
  .cat__title { white-space: normal; }
  .dork { padding: var(--space-2) var(--space-3); }

  .drawer {
    width: 100vw;
    border-left: none;
  }

  .modal { padding: var(--space-2); }
  .modal__card { max-height: 92vh; }
  .modal__head,
  .modal__body { padding: var(--space-3); }

  .toast-stack {
    left: var(--space-3);
    right: var(--space-3);
    bottom: var(--space-3);
    max-width: none;
    align-items: stretch;
  }
  .toast { max-width: none; }

  .menu { min-width: 0; }
}

@media (max-width: 400px) {
  .input-row > * { flex-basis: 100%; }
  .btn { padding: var(--space-2) var(--space-3); }
  .empty { padding: var(--space-5) var(--space-3); }
  .kv {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-1) 0;
  }
}

/* ── Oversized call to action ─────────────────────────────────────── */

/* The one button the whole page points at. Pairs with .btn--primary.
   The hover and press states are gated on :not(:disabled) so they cannot
   outrank the .btn:disabled rule above while a run is in flight. */
.btn--xl {
  padding: var(--space-3) var(--space-6);
  font-size: var(--text-md);
  font-weight: 700;
  letter-spacing: -0.01em;
}
.btn--xl:not(:disabled):hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-pop);
}
.btn--xl:not(:disabled):active {
  transform: translateY(0) scale(0.99);
  box-shadow: none;
}

/* ── Chip row ─────────────────────────────────────────────────────── */

.chip-row {
  display: inline-flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

/* "Risk" labels the chips beside it, so it hugs its own text while the
   chips take the slack and wrap — including below 400px, where .input-row
   otherwise gives every child a full-width basis. */
.risk-row {
  align-items: center;
}
.risk-row > .field__label {
  flex: 0 0 auto;
}
.risk-row > .chip-row {
  flex: 1 1 auto;
  min-width: 0;
}

/* ── Advanced disclosure ──────────────────────────────────────────── */

/* A <details> for the options most people never open: present and legible,
   deliberately quiet. */
.advanced {
  padding-top: var(--space-2);
  border-top: 1px dashed var(--border-strong);
}

.advanced > summary {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  width: fit-content;
  padding: var(--space-2);
  margin-left: calc(var(--space-2) * -1);
  font-size: var(--text-sm);
  color: var(--ink-3);
  border-radius: var(--radius-sm);
  list-style: none;
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease-out),
              background var(--dur-fast) var(--ease-out);
}
.advanced > summary::marker { content: ''; }
.advanced > summary::-webkit-details-marker { display: none; }
.advanced > summary:hover {
  color: var(--ink);
  background: var(--surface-2);
}
.advanced[open] > summary { margin-bottom: var(--space-3); }

/* Our own triangle: the native marker can be neither tinted nor eased. */
.advanced > summary::before {
  content: '';
  flex-shrink: 0;
  width: 0;
  height: 0;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  border-left: 5px solid currentColor;
  transition: transform var(--dur-fast) var(--ease-out);
}
.advanced[open] > summary::before { transform: rotate(90deg); }

.advanced > .field__hint { margin-top: var(--space-2); }

/* ── Guided empty state ───────────────────────────────────────────── */

/* Step 3 before anything has been generated. This is the answer to "what
   do I do?", so it reads as an invitation rather than a warning. */
.empty-guide {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-5);
  background: var(--paper-2);
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-md);
}

.empty-guide__title {
  font-family: var(--font-display);
  font-size: var(--text-md);
  font-weight: 600;
  color: var(--ink-2);
}

.empty-guide__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  list-style: none;
}

.empty-guide__item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  color: var(--ink-2);
}

/* A quieter echo of .step__num, so both orderings read as the same idea. */
.empty-guide__num {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: 700;
  line-height: 1;
  color: var(--ink-3);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 50%;
}

@media (max-width: 400px) {
  .empty-guide {
    gap: var(--space-3);
    padding: var(--space-4) var(--space-3);
  }
}

/* ── Attribute-hidden callouts ────────────────────────────────────── */

/* `.note` sets `display: flex`, and an author rule outranks the user
   agent's `[hidden]`, so step 1's engine caveat rendered as an empty pill
   whenever it had nothing to say. Same fix as .menu[hidden] above. */
.note[hidden] { display: none; }


/* ── Result internals ─────────────────────────────────────────────── */

/* results.js wraps the name, query and meta of a card in .result__info, so
   the grid's row-gap no longer separates them — this does it instead. */
.result__info {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-width: 0;
}

/* One run's whole output: the toolbar, then the queries. */
.run-output {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.result-toolbar {
  padding-bottom: var(--space-2);
  border-bottom: 1px dashed var(--border-strong);
}

/* The category heading between groups of individual dorks. */
.result-group__sub {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-3);
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--ink-2);
}

.result__footer {
  padding-top: var(--space-2);
  border-top: 1px solid var(--border);
  color: var(--ink-faint);
}

.result__footer code {
  padding: 1px var(--space-1);
  font-size: var(--text-xs);
  background: var(--paper-sunk);
  border-radius: var(--radius-sm);
}