/* ═══════════════════════════════════════════════════════════════════════════
   Aisgard — studio shell
   Near-black gallery chrome: a quiet sidebar, one prompt bar, the images do
   the talking. Class names are shared by every page, so restyle, don't rename.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  color-scheme: dark;

  --bg:        #0e0e10;
  --surface:   #17171a;
  --surface-2: #1e1e22;
  --surface-3: #28282d;
  --line:      #25252a;
  --line-2:    #33333a;

  --text:      #ececef;
  --text-dim:  #a4a4ad;
  --text-mute: #6d6d76;

  /* Accent: each user's own colour (public/js/theme-boot.js sets these on <html>;
     these are the fallbacks — violet). Never write an accent colour directly: use these. */
  --accent:       #7c5cff;
  --accent-hi:    #9880ff;
  --accent-rgb:   124 92 255;
  --accent-light: #ab9aff;
  --accent-pale:  #cbbfff;
  --accent-deep:  #6148c7;
  --accent-soft:  rgb(var(--accent-rgb) / 13%);
  --accent-line:  rgb(var(--accent-rgb) / 45%);

  --ok:   #4fd987;
  --warn: #f3b447;
  --err:  #f2685d;
  --err-soft:  rgba(242, 104, 93, 0.12);
  --warn-soft: rgba(243, 180, 71, 0.11);
  --ok-soft:   rgba(79, 217, 135, 0.1);

  --sans: "Inter", "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
  --mono: ui-monospace, "Cascadia Mono", Consolas, "DejaVu Sans Mono", monospace;

  --r-sm: 6px;
  --r:    9px;
  --r-lg: 14px;
  --pill: 999px;

  --sidebar-w: 228px;

  /* Older inline styles still name the bunker palette. */
  --amber: var(--accent);
  --phosphor: var(--text);
}

* { box-sizing: border-box; }

/* Author `display` rules below outrank the UA sheet's [hidden] rule, so state
   the intent explicitly or JS toggling breaks. */
[hidden] { display: none !important; }

html { scrollbar-color: var(--surface-3) var(--bg); }

body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.5;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-hi); }

::selection { background: var(--accent-soft); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ─────────────────────────────────────────────────────────────── app frame */

.app {
  display: grid;
  grid-template-columns: var(--sidebar-w) minmax(0, 1fr);
  min-height: 100vh;
}

.sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  padding: 22px 14px 16px;
  overflow-y: auto;
  background: var(--bg);
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 10px 26px;
  color: var(--text);
  font-size: 16px;
  font-weight: 650;
  letter-spacing: -0.01em;
}

.brand:hover { color: var(--text); }

.brand-mark {
  flex: none;
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: linear-gradient(140deg, var(--accent-hi), var(--accent-deep));
  color: #fff;
}

.brand-mark svg { width: 14px; height: 14px; fill: currentColor; }

.nav { display: flex; flex-direction: column; gap: 2px; }

.nav-label {
  margin: 20px 12px 6px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text-mute);
}

.nav a {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 8px 13px;
  border-radius: var(--pill);
  color: var(--text);
  font-size: 13.5px;
  font-weight: 600;
  transition: background 0.12s, color 0.12s;
}

.nav a svg {
  flex: none;
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.nav a:hover { background: var(--surface-2); color: var(--text); }

.nav a[aria-current="page"] {
  background: var(--accent-soft);
  color: var(--accent);
}

.sidebar-foot {
  margin-top: auto;
  padding: 16px 12px 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 12px;
  color: var(--text-mute);
}

.main {
  min-width: 0;
  padding: 0 28px 90px;
}

.wrap {
  max-width: 1320px;
  margin: 0 auto;
}

/* ─────────────────────────────────────────────────────────────── page head */

.page-head {
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 12px 20px;
  padding: 34px 0 24px;
}

.page-head .titles { flex: 1 1 320px; min-width: 0; }

h1 {
  margin: 0;
  font-size: 24px;
  font-weight: 650;
  letter-spacing: -0.02em;
}

.subtitle {
  margin: 4px 0 0;
  font-size: 13.5px;
  color: var(--text-dim);
}

/* ──────────────────────────────────────────────────────────────────── panel */

.panel {
  position: relative;
  margin-bottom: 20px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
}

.panel-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 18px;
  border-bottom: 1px solid var(--line);
}

.panel-head h2 {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
}

.panel-head .sub {
  font-size: 12.5px;
  color: var(--text-mute);
}

.panel-body { padding: 18px; }

.spacer { flex: 1; }

/* ───────────────────────────────────────────────────────────── status lamps */

.lamp {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-dim);
  white-space: nowrap;
}

.lamp::before {
  content: "";
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--text-mute);
}

.lamp[data-state="ok"]::before   { background: var(--ok); }
.lamp[data-state="warn"]::before { background: var(--warn); }
.lamp[data-state="err"]::before  { background: var(--err); }
.lamp[data-state="busy"]::before { background: var(--accent); animation: pulse 1.1s ease-in-out infinite; }

@keyframes pulse { 50% { opacity: 0.25; } }

/* ───────────────────────────────────────────────────────────────── controls */

.field {
  display: block;
  margin-bottom: 14px;
}

.cap {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-bottom: 6px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-dim);
}

.cap .sub { color: var(--text-mute); font-weight: 400; }

input[type="text"],
input[type="email"],
input[type="url"],
input[type="number"],
input[type="password"],
textarea,
select {
  width: 100%;
  padding: 9px 12px;
  border: 1px solid var(--line-2);
  border-radius: var(--r);
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 13.5px;
  line-height: 1.5;
  transition: border-color 0.12s, box-shadow 0.12s;
}

textarea { resize: vertical; min-height: 88px; }

input:focus,
textarea:focus,
select:focus {
  outline: none;
  border-color: #4a4a52;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.05);
}

input::placeholder, textarea::placeholder { color: var(--text-mute); opacity: 1; }

select {
  appearance: none;
  padding-right: 34px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236d6d76' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-position: right 11px center;
  background-size: 15px;
  background-repeat: no-repeat;
  cursor: pointer;
}

select option { background: var(--surface-2); color: var(--text); }

.row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(165px, 1fr));
  gap: 0 14px;
}

.hint {
  margin: 6px 0 0;
  font-size: 12px;
  line-height: 1.55;
  color: var(--text-mute);
}

.hint code,
code {
  padding: 1px 5px;
  border-radius: 4px;
  background: var(--surface-3);
  color: var(--text);
  font-family: var(--mono);
  font-size: 11.5px;
}

/* ────────────────────────────────────────────────────────────────── buttons */

button { font-family: var(--sans); cursor: pointer; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 9px 16px;
  border: 1px solid var(--accent);
  border-radius: var(--r);
  background: var(--accent);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}

.btn:hover:not(:disabled) { background: var(--accent-hi); border-color: var(--accent-hi); color: #fff; }
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn:disabled { opacity: 0.4; cursor: not-allowed; }

.btn.ghost {
  padding: 7px 12px;
  border-color: var(--line-2);
  background: transparent;
  color: var(--text-dim);
  font-size: 12.5px;
}

.btn.ghost:hover:not(:disabled) { background: var(--surface-2); border-color: var(--line-2); color: var(--text); }

.btn.danger { color: var(--err); }
.btn.danger:hover:not(:disabled) { background: var(--err-soft); border-color: rgba(242, 104, 93, 0.4); color: var(--err); }

/* ──────────────────────────────────────────────────────────── toggle switch */

.switch {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  user-select: none;
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
}

.switch input { position: absolute; opacity: 0; pointer-events: none; }

.switch .track {
  position: relative;
  flex: none;
  width: 34px;
  height: 20px;
  border-radius: var(--pill);
  background: var(--surface-3);
  transition: background 0.15s;
}

.switch .track::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #bdbdc4;
  transition: transform 0.15s ease-out, background 0.15s;
}

.switch input:checked + .track { background: var(--accent); }
.switch input:checked + .track::after { transform: translateX(14px); background: #fff; }
.switch input:focus-visible + .track { outline: 2px solid var(--accent-line); outline-offset: 2px; }

.switch .lbl .sub { color: var(--text-mute); font-weight: 400; }

/* A switch sitting inline in a toolbar rather than stacked in a form. */
.switch.compact { gap: 7px; margin: 0; font-size: 12.5px; color: var(--text-dim); }
.switch.compact .track { width: 28px; height: 16px; }
.switch.compact .track::after { top: 2px; left: 2px; width: 12px; height: 12px; }
.switch.compact input:checked + .track::after { transform: translateX(12px); }

/* ───────────────────────────────────────────────────────────────── readouts */

.readout {
  padding: 10px 13px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--surface-2);
  color: var(--text-dim);
  font-size: 12.5px;
  line-height: 1.6;
  white-space: pre-wrap;
  word-break: break-word;
}

.readout[data-tone="err"]  { border-color: rgba(242, 104, 93, 0.3); background: var(--err-soft); color: #f7a198; }
.readout[data-tone="warn"] { border-color: rgba(243, 180, 71, 0.28); background: var(--warn-soft); color: var(--warn); }
.readout[data-tone="ok"]   { border-color: rgba(79, 217, 135, 0.25); background: var(--ok-soft); color: #8fe8b3; }

/* Console status: a transient toast rather than a panel that is always there. */
.toast {
  position: fixed;
  left: 50%;
  bottom: 22px;
  z-index: 9600;
  max-width: min(580px, calc(100vw - 32px));
  padding: 11px 16px 11px 30px;
  border: 1px solid var(--line-2);
  border-radius: 12px;
  background: #222226;
  color: var(--text);
  font-size: 13px;
  line-height: 1.55;
  white-space: pre-wrap;
  word-break: break-word;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.55);
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 10px);
  transition: opacity 0.18s, transform 0.18s;
}

.toast::before {
  content: "";
  position: absolute;
  left: 14px;
  top: 18px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--text-mute);
}

.toast.show { opacity: 1; pointer-events: auto; transform: translate(-50%, 0); }
.toast[data-tone="ok"]::before   { background: var(--ok); }
.toast[data-tone="warn"]::before { background: var(--warn); }
.toast[data-tone="err"]::before  { background: var(--err); }

/* ─────────────────────────────────────────────────────────────── references */

.dropzone {
  padding: 18px;
  border: 1.5px dashed var(--line-2);
  border-radius: var(--r);
  text-align: center;
  color: var(--text-mute);
  font-size: 12.5px;
  cursor: pointer;
  transition: border-color 0.12s, background 0.12s, color 0.12s;
}

.dropzone:hover,
.dropzone.hot {
  border-color: var(--accent-line);
  background: var(--accent-soft);
  color: var(--text);
}

.dropzone.compact { padding: 13px; }

/* The units page disables its dropzone until the unit exists. */
.dropzone.disabled { opacity: 0.5; cursor: not-allowed; border-style: solid; }
.dropzone.disabled:hover { border-color: var(--line-2); background: none; color: var(--text-mute); }

/* The tracer failed to load — the dropzone stops inviting input. */
.dropzone.dead { pointer-events: none; opacity: 0.45; border-style: solid; }

.ref-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.ref-strip:empty { display: none; }

.ref {
  position: relative;
  width: 76px;
  height: 76px;
  border: 1px solid var(--line-2);
  border-radius: var(--r);
  overflow: hidden;
  background: var(--bg);
}

.ref img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* A suspended standing reference is kept but not sent. */
.ref[data-off] img { filter: grayscale(1) brightness(0.45); }

.ref button {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.7);
  color: #fff;
  font-size: 11px;
  line-height: 1;
  opacity: 0.85;
}

.ref button:hover { background: var(--err); opacity: 1; }

.ref button.ref-toggle { right: auto; left: 4px; font-size: 10px; }
.ref button.ref-toggle:hover { background: var(--accent); }

.ref .tag {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  padding: 10px 5px 3px;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.8));
  color: rgba(255, 255, 255, 0.85);
  font-size: 9.5px;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ────────────────────────────────────────────────────── unit attachments */

.attach .ref-strip { margin-top: 0; margin-bottom: 10px; }
.attach .ref { width: 58px; height: 58px; }
.attach .hint { margin: 0; }

.attach-rules {
  margin-bottom: 10px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--bg);
  font-size: 12px;
}

.rules-fold > summary {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 11px;
  cursor: pointer;
  list-style: none;
  user-select: none;
}

.rules-fold > summary::-webkit-details-marker { display: none; }

.rules-fold > summary::after {
  content: "";
  margin-left: auto;
  width: 6px;
  height: 6px;
  border-right: 1.5px solid var(--text-mute);
  border-bottom: 1.5px solid var(--text-mute);
  transform: rotate(-45deg);
  transition: transform 0.12s;
}

.rules-fold[open] > summary::after { transform: rotate(45deg); }
.rules-fold > summary:hover .rules-summary { color: var(--text); }

.rules-summary { font-size: 12px; color: var(--text-dim); }

.spec-fold { border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--bg); }
.spec-fold > summary { padding: 5px 9px; }
.spec-fold .rules-body { max-height: 200px; padding: 0 9px 9px; }

/* Long briefs scroll inside the fold rather than stretching the panel. */
.rules-body {
  margin: 0;
  padding: 0 11px 11px;
  max-height: 240px;
  overflow: auto;
  font-family: var(--mono);
  font-size: 11.5px;
  line-height: 1.65;
  color: var(--text-dim);
  white-space: pre-wrap;
  word-break: break-word;
}

.attach-rules-tag {
  flex: none;
  padding: 1px 7px;
  border-radius: var(--pill);
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
}

/* ─────────────────────────────────────────────────────────── bulk list */

/* The parsed prompts, one row each — proof the list was split the way it was
   meant before a paid run goes out. */
.bulk-list {
  max-height: 180px;
  margin: 10px 0 0;
  padding: 0;
  overflow-y: auto;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--bg);
  list-style: none;
  counter-reset: bulk;
}

.bulk-list:empty { display: none; }

.bulk-list li {
  counter-increment: bulk;
  display: flex;
  gap: 9px;
  padding: 6px 11px;
  border-bottom: 1px solid var(--line);
  font-size: 12.5px;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bulk-list li:last-child { border-bottom: 0; }

.bulk-list li::before {
  content: counter(bulk, decimal-leading-zero);
  flex: none;
  color: var(--text-mute);
  font-variant-numeric: tabular-nums;
}

.bulk-list li > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.bulk-entry { flex: 0 1 auto; }
.bulk-extra { flex: 0 1 auto; color: var(--text-mute); }

/* ═══════════════════════════════════════════════════════════════ composer */

/* Pinned to the top of the feed; the gradient lets images scroll away under it. */
.composer {
  position: sticky;
  top: 0;
  z-index: 60;
  padding: 16px 0 14px;
  background: linear-gradient(var(--bg) 82%, rgba(14, 14, 16, 0));
}

.composer-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.pb-stack { flex: 1; min-width: 0; }

/* The settings panel hangs off the bar itself, so it floats over the bulk tray
   rather than below it. */
.pb-anchor { position: relative; }

.promptbar {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  padding: 6px;
  border: 1px solid var(--line-2);
  border-radius: 12px;
  background: var(--surface);
  transition: border-color 0.12s, border-radius 0.12s;
}

.promptbar:focus-within { border-color: #46464e; }
.promptbar.hot { border-color: var(--accent-line); background: #1c1718; }

.composer.open .promptbar {
  border-radius: 12px 12px 0 0;
  border-bottom-color: var(--line);
}

.promptbar textarea {
  flex: 1;
  min-width: 0;
  min-height: 36px;
  max-height: 42vh;
  padding: 8px 6px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  font-size: 14px;
  line-height: 20px;
  resize: none;
  overflow-y: auto;
}

.promptbar textarea:focus { box-shadow: none; }

.pb-icon {
  flex: none;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--text-mute);
  transition: background 0.12s, color 0.12s;
}

.pb-icon svg,
.pb-go svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.pb-icon:hover { background: var(--surface-2); color: var(--text); }
.pb-icon[aria-expanded="true"] { background: var(--accent-soft); color: var(--accent); }

/* Single ↔ bulk. Labelled, not just an icon: it changes what Enter does. */
.pb-mode {
  flex: none;
  height: 36px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 11px 0 9px;
  border: 1px solid var(--line-2);
  border-radius: 8px;
  background: transparent;
  color: var(--text-dim);
  font-size: 12.5px;
  font-weight: 600;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}

.pb-mode svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.pb-mode:hover { background: var(--surface-2); color: var(--text); }

.pb-mode[aria-pressed="true"] {
  border-color: var(--accent-line);
  background: var(--accent-soft);
  color: var(--accent);
}

/* What the next run will use, readable without opening the panel. */
.pb-summary {
  flex: 0 1 auto;
  align-self: center;
  max-width: 40%;
  padding: 0 6px;
  border: 0;
  background: none;
  color: var(--text-mute);
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pb-summary:hover { color: var(--text-dim); }

.pb-go {
  position: relative;
  flex: none;
  width: 50px;
  height: 50px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid var(--line-2);
  border-radius: 12px;
  background: var(--surface);
  color: var(--text-dim);
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}

.pb-go:hover:not(:disabled) { background: var(--accent); border-color: var(--accent); color: #fff; }
.pb-go:active:not(:disabled) { transform: translateY(1px); }
.pb-go:disabled { opacity: 0.4; cursor: not-allowed; }

.pb-count {
  position: absolute;
  top: -6px;
  right: -6px;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  display: grid;
  place-items: center;
  border-radius: var(--pill);
  background: var(--accent);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
}

.pb-refs {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
}

.pb-refs .ref-strip { margin: 0; }
.pb-refs .ref { width: 52px; height: 52px; }
.pb-refs .ref .tag { display: none; }

/* ─────────────────────────────────────────────────────────── settings panel */

.settings {
  position: absolute;
  z-index: 5;
  inset-inline: 0;
  top: 100%;
  max-height: calc(100vh - 110px);
  overflow-y: auto;
  padding: 18px 20px 16px;
  border: 1px solid var(--line-2);
  border-top: 0;
  border-radius: 0 0 12px 12px;
  background: var(--surface);
  box-shadow: 0 28px 60px rgba(0, 0, 0, 0.6);
}

.settings-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 4px 28px;
}

.set-group h3 {
  margin: 0 0 12px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text-mute);
}

.settings-foot {
  margin-top: 6px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

.settings-foot .cap { margin-bottom: 8px; }

/* Segmented picker, mirroring a hidden <select> that stays the source of truth. */
.seg {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--bg);
}

.seg button {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  padding: 6px 9px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--text-dim);
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.3;
  transition: background 0.12s, color 0.12s;
}

.seg button small { font-size: 10px; font-weight: 500; color: var(--text-mute); }
.seg button:hover { color: var(--text); }

.seg button[aria-pressed="true"] {
  background: var(--surface-3);
  color: var(--text);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}

.stepper {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--line-2);
  border-radius: var(--r);
  background: var(--bg);
  overflow: hidden;
}

.stepper button {
  width: 34px;
  height: 34px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--text-dim);
  font-size: 17px;
  line-height: 1;
}

.stepper button:hover { background: var(--surface-2); color: var(--text); }

.stepper input[type="number"] {
  width: 46px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  text-align: center;
  font-weight: 600;
  -moz-appearance: textfield;
}

.stepper input::-webkit-outer-spin-button,
.stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* ─────────────────────────────────────────────────────────────── bulk mode */

/* A list can outgrow the viewport, and a sticky composer taller than the screen
   would hide its own Generate button — so in bulk mode it scrolls with the page. */
.composer.bulk { position: relative; }

.composer.bulk .promptbar {
  border-radius: 12px 12px 0 0;
  border-bottom-color: var(--line);
}

/* The bar stays one row in bulk mode — the tray below already lists every
   entry, so the raw text only needs to be reachable, not shown in full. */
/* Line height equals the bar, so exactly one line shows and the next never peeks in. */
.composer.bulk .promptbar textarea {
  height: 36px;
  min-height: 36px;
  max-height: 36px;
  padding-block: 0;
  line-height: 36px;
}

.composer.bulk.open .settings { border-radius: 0 0 12px 12px; }

.bulk-tray {
  border: 1px solid var(--line-2);
  border-top: 0;
  border-radius: 0 0 12px 12px;
  background: var(--surface);
}

.bulk-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 22px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
}

.bulk-opt {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0;
}

.bulk-opt-grow { flex: 1 1 280px; min-width: 0; }

.bulk-opt-label {
  flex: none;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-mute);
  white-space: nowrap;
}

.bulk-bar .seg { flex-wrap: nowrap; padding: 2px; }
.bulk-bar .seg button { padding: 4px 10px; font-size: 12px; }

.bulk-bar input[type="text"] {
  padding: 6px 11px;
  font-size: 13px;
}

.stepper.sm button { width: 28px; height: 29px; font-size: 15px; }
.stepper.sm input[type="number"] { width: 32px; font-size: 13px; }

/* The parsed list inside the tray: the operator's proof of how it was split. */
.bulk-tray .bulk-list {
  max-height: min(320px, 38vh);
  margin: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.bulk-tray .bulk-list li {
  align-items: center;
  padding: 0 8px 0 14px;
  min-height: 36px;
  font-size: 13px;
}

.bulk-tray .bulk-list li:hover { background: var(--surface-2); }

.bulk-tray .bulk-list li::before { min-width: 20px; font-size: 12px; }

.bulk-list .bulk-text {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bulk-list .bulk-remove {
  flex: none;
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--text-mute);
  font-size: 12px;
  opacity: 0;
  transition: opacity 0.12s, background 0.12s, color 0.12s;
}

.bulk-list li:hover .bulk-remove,
.bulk-list .bulk-remove:focus-visible { opacity: 1; }
.bulk-list .bulk-remove:hover { background: var(--err-soft); color: var(--err); }

@media (hover: none) {
  .bulk-list .bulk-remove { opacity: 1; }
}

.bulk-empty {
  padding: 22px 18px;
  color: var(--text-mute);
  font-size: 13px;
  line-height: 1.6;
  text-align: center;
}

.bulk-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 10px 12px 10px 14px;
  border-top: 1px solid var(--line);
}

.bulk-note { font-size: 12.5px; color: var(--text-dim); }
.bulk-note strong { color: var(--text); font-weight: 600; }

.kbd {
  padding: 2px 7px;
  border: 1px solid var(--line-2);
  border-bottom-width: 2px;
  border-radius: 6px;
  color: var(--text-mute);
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}

/* Offered when a multi-line list is pasted in single mode — the moment bulk
   is actually wanted, instead of making it something to go and find. */
.bulk-suggest {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
  margin-top: 8px;
  padding: 7px 8px 7px 12px;
  border: 1px solid var(--accent-line);
  border-radius: 11px;
  background: var(--accent-soft);
  font-size: 13px;
}

.bulk-suggest svg {
  flex: none;
  width: 16px;
  height: 16px;
  fill: none;
  stroke: var(--accent);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.bulk-suggest .btn { padding: 6px 12px; font-size: 12.5px; }

@media (max-width: 560px) {
  .pb-mode span { display: none; }
  .pb-mode { padding: 0 9px; }
  .kbd { display: none; }
  .bulk-bar .seg { flex-wrap: wrap; }
}

/* ═══════════════════════════════════════════════════════════ runs in feed */

.queue { margin: 6px 0 4px; }

.gen-lamp { color: var(--text); }

/* A run in flight. Every layer reads --p, the run's progress, so the tile
   visibly resolves: colour pulls into focus, the blocks halve, the noise
   settles. --t (the run's age, negative) resumes the loops after a re-flow. */
.gen {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: #0a0a0c;
  cursor: progress;
  animation: gen-in 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) both;
  animation-delay: var(--t, 0s);
}

@keyframes gen-in {
  from { opacity: 0; transform: scale(0.97); }
}

.gen-art {
  position: relative;
  width: 100%;
  overflow: hidden;
  background: #0a0a0c;
}

/* Depth, so the tile reads as a lit box rather than a flat swatch. */
.gen-art::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(125% 100% at 50% 45%, transparent 40%, rgba(0, 0, 0, 0.6));
  pointer-events: none;
}

/* Colour drifting under the surface — heavily blurred at the start, pulled
   into focus as the run advances. */
.gen-aurora {
  position: absolute;
  inset: -25%;
  background:
    radial-gradient(38% 46% at 28% 32%, rgb(var(--accent-rgb) / 55%), transparent 70%),
    radial-gradient(42% 40% at 72% 62%, rgba(126, 92, 255, 0.45), transparent 70%),
    radial-gradient(36% 38% at 58% 20%, rgba(45, 212, 255, 0.24), transparent 70%);
  /* Each frame of a run gets its own cast, so three tiles are not one tile thrice. */
  filter:
    blur(calc(4px + (1 - var(--p, 0)) * 26px))
    saturate(calc(1 + var(--p, 0) * 0.5))
    hue-rotate(calc(var(--frame, 0) * 34deg));
  animation: gen-wash 14s ease-in-out infinite alternate;
  animation-delay: calc(var(--t, 0s) - var(--frame, 0) * 2.4s);
  transition: filter 0.4s linear;
  will-change: transform;
}

@keyframes gen-wash {
  0%   { transform: translate3d(-4%, -3%, 0) scale(1.05); }
  50%  { transform: translate3d(5%, 4%, 0) scale(1.2); }
  100% { transform: translate3d(-2%, 6%, 0) scale(1.08); }
}

/* The resolve itself: a block lattice that halves and fades as --p climbs. */
.gen-mosaic {
  --cell: calc(5px + (1 - var(--p, 0)) * 43px);
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(0, 0, 0, 0.5) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 0, 0, 0.5) 1px, transparent 1px),
    conic-gradient(rgba(255, 255, 255, 0.11) 0 25%, rgba(0, 0, 0, 0.2) 0 50%, rgba(255, 255, 255, 0.07) 0 75%, rgba(0, 0, 0, 0.14) 0);
  background-size: var(--cell) var(--cell);
  background-position: calc(var(--frame, 0) * 9px) calc(var(--frame, 0) * 13px);
  opacity: calc(0.8 - var(--p, 0) * 0.75);
  transition: background-size 0.45s cubic-bezier(0.3, 0, 0.2, 1), opacity 0.45s linear;
}

.gen-grain {
  position: absolute;
  inset: -40%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 150px;
  opacity: calc(0.3 - var(--p, 0) * 0.24);
  mix-blend-mode: overlay;
  animation: gen-grain 0.75s steps(5) infinite;
  transition: opacity 0.4s linear;
}

@keyframes gen-grain {
  0%   { transform: translate(0, 0); }
  20%  { transform: translate(-6%, 4%); }
  40%  { transform: translate(5%, -7%); }
  60%  { transform: translate(-3%, 8%); }
  80%  { transform: translate(7%, 2%); }
  100% { transform: translate(0, 0); }
}

/* One pass sweeping down the tile, brightest at its leading edge. */
.gen-scan {
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: 24%;
  background: linear-gradient(to bottom, transparent, rgba(255, 255, 255, 0.09) 60%, rgba(255, 255, 255, 0.55) 97%, transparent);
  filter: blur(2px);
  opacity: calc(0.95 - var(--p, 0) * 0.5);
  animation: gen-scan 2.9s cubic-bezier(0.5, 0, 0.35, 1) infinite;
  animation-delay: calc(var(--t, 0s) - var(--frame, 0) * 0.85s);
}

@keyframes gen-scan {
  0%   { transform: translateY(-110%); }
  100% { transform: translateY(420%); }
}

/* The percentage, drawn as a ring that fills — the one honest, readable signal. */
.gen-meter {
  position: absolute;
  left: 50%;
  top: 46%;
  width: 76px;
  height: 76px;
  display: grid;
  place-items: center;
  transform: translate(-50%, -50%);
}

.gen-meter::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(from -90deg, var(--accent) calc(var(--p, 0) * 360deg), rgba(255, 255, 255, 0.14) 0);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3.5px));
          mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3.5px));
  filter: drop-shadow(0 0 7px rgb(var(--accent-rgb) / 60%));
  transition: background 0.4s linear;
}

.gen-meter::after {
  content: "";
  position: absolute;
  inset: 7px;
  border-radius: 50%;
  background: rgba(8, 8, 10, 0.5);
  box-shadow: inset 0 0 18px rgba(0, 0, 0, 0.6);
  animation: gen-breathe 2.6s ease-in-out infinite;
  animation-delay: var(--t, 0s);
}

@keyframes gen-breathe {
  0%, 100% { transform: scale(1); opacity: 0.9; }
  50%      { transform: scale(0.94); opacity: 1; }
}

.gen-pct {
  position: relative;
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 600;
  color: #fff;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.7);
}

.gen-info {
  position: absolute;
  inset: auto 0 0 0;
  padding: 36px 12px 12px;
  background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.76) 45%);
  color: #fff;
}

.gen-row { display: flex; align-items: center; gap: 8px; }

/* The word itself shimmers, left to right. */
.gen-status {
  font-size: 12.5px;
  font-weight: 600;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.45) 0%, #fff 45%, rgba(255, 255, 255, 0.45) 90%);
  background-size: 220% 100%;
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  animation: gen-text 2.2s linear infinite;
}

@keyframes gen-text {
  from { background-position: 120% 0; }
  to   { background-position: -120% 0; }
}

.gen-frame {
  padding: 0 7px;
  border-radius: var(--pill);
  background: rgba(255, 255, 255, 0.14);
  font-size: 10.5px;
  font-weight: 600;
}

.gen-time {
  font-family: var(--mono);
  font-size: 11.5px;
  color: rgba(255, 255, 255, 0.72);
  font-variant-numeric: tabular-nums;
}

.gen-prompt {
  margin: 4px 0 0;
  font-size: 12px;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.74);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ── failed run ── */

.gen.failed { cursor: default; animation: none; }

.gen.failed .gen-art {
  background: radial-gradient(90% 70% at 50% 34%, rgba(242, 104, 93, 0.22), #0c0a0b 70%);
}

.gen.failed .gen-art::after { background: none; }

.gen-fail-mark {
  position: absolute;
  left: 50%;
  top: 30%;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 2px solid var(--err);
  border-radius: 50%;
  color: var(--err);
  font-size: 20px;
  font-weight: 700;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 26px rgba(242, 104, 93, 0.35);
}

.gen.failed .gen-status { background: none; color: var(--err); animation: none; }

.gen-error {
  margin: 5px 0 0;
  font-size: 11.5px;
  line-height: 1.45;
  color: #f7a198;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.gen-actions { display: flex; gap: 6px; margin-top: 9px; }

.gen-btn {
  padding: 5px 12px;
  border: 0;
  border-radius: 7px;
  background: #fff;
  color: #111;
  font-size: 12px;
  font-weight: 600;
}

.gen-btn:hover { background: #e7e7ea; }
.gen-btn.ghost { background: rgba(255, 255, 255, 0.13); color: #fff; }
.gen-btn.ghost:hover { background: rgba(255, 255, 255, 0.22); }

/* ── the image landing ── */

/* Held dark, in the run's colours, until its pixels have loaded… */
.plate.arriving {
  background: radial-gradient(130% 100% at 50% 120%, #2a0f12 0%, #0d0b10 60%);
}

.plate.arriving img { opacity: 0; }

/* …then resolved from a hot blur into focus, with a brief accent edge. */
.plate.fresh img {
  animation: gen-reveal 1.3s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

@keyframes gen-reveal {
  0%   { opacity: 0; filter: blur(22px) saturate(1.8) brightness(1.45); transform: scale(1.08); }
  35%  { opacity: 1; }
  100% { opacity: 1; filter: none; transform: none; }
}

.plate.fresh::after {
  content: "";
  position: absolute;
  inset: 0;
  box-shadow: inset 0 0 0 2px var(--accent), inset 0 0 40px rgb(var(--accent-rgb) / 35%);
  pointer-events: none;
  animation: gen-flash 1.7s ease-out both;
}

@keyframes gen-flash {
  to { opacity: 0; }
}

/* ─────────────────────────────────────────────────────── batch bar */

.batch {
  margin-bottom: 10px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: var(--surface);
}

.batch-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 9px 12px;
}

.batch-bar {
  height: 4px;
  margin: 0 12px;
  border-radius: var(--pill);
  background: var(--surface-3);
  overflow: hidden;
}

.batch-bar span {
  display: block;
  width: 0;
  height: 100%;
  border-radius: var(--pill);
  background: var(--accent);
  transition: width 0.25s linear;
}

.batch-meta {
  padding: 7px 12px 10px;
  font-size: 11.5px;
  color: var(--text-mute);
}

/* ═══════════════════════════════════════════════════════════════════ feed */

.feed-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 18px;
  margin: 18px 0 14px;
}

.feed-tabs { display: flex; gap: 18px; }

.feed-tabs button {
  padding: 4px 0;
  border: 0;
  background: none;
  color: var(--text-mute);
  font-size: 15px;
  font-weight: 600;
  transition: color 0.12s;
}

.feed-tabs button:hover { color: var(--text-dim); }
.feed-tabs button[aria-selected="true"] { color: var(--text); }

.feed-tabs .n {
  margin-left: 5px;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-mute);
  font-variant-numeric: tabular-nums;
}

.feed-tools {
  flex: 1 1 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
}

input.search {
  width: 250px;
  max-width: 100%;
  padding: 7px 12px 7px 32px;
  border-radius: var(--pill);
  font-size: 13px;
  background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236d6d76' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") no-repeat 11px center / 14px;
  border-color: var(--line);
}

.chip-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border: 0;
  border-radius: var(--pill);
  background: transparent;
  color: var(--text-dim);
  font-size: 12.5px;
  font-weight: 600;
  transition: background 0.12s, color 0.12s;
}

.chip-btn:hover:not(:disabled) { background: var(--surface-2); color: var(--text); }
.chip-btn.on { background: var(--accent-soft); color: var(--accent); }

.select-bar,
.trace-bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 10px;
  margin-bottom: 12px;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: var(--surface);
}

.select-bar select { width: auto; padding-block: 6px; font-size: 12.5px; }

.trace-note { font-size: 12.5px; color: var(--text-mute); }
.trace-note[data-tone="err"] { color: var(--err); }
.trace-note[data-tone="ok"]  { color: var(--ok); }

/* ── masonry ────────────────────────────────────────────────────────────── */

/* Columns are filled by script, shortest first, so the reading order stays
   newest-first across the top rather than down each column. */
.masonry {
  display: flex;
  align-items: flex-start;
  gap: 3px;
}

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

.plate {
  position: relative;
  overflow: hidden;
  background: var(--surface);
  cursor: zoom-in;
}

.plate img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
  background: var(--surface-2);
  transition: opacity 0.15s, transform 0.4s ease;
}

.plate:hover img { transform: scale(1.015); }

.plate-missing {
  display: grid;
  place-items: center;
  width: 100%;
  background:
    repeating-linear-gradient(45deg, transparent 0 10px, rgba(255, 255, 255, 0.025) 10px 20px),
    var(--surface-2);
  color: var(--text-mute);
  font-size: 12.5px;
}

.masonry.picking .plate:not(.selected) .plate-missing { opacity: 0.45; }

.plate .meta {
  position: absolute;
  inset: auto 0 0 0;
  padding: 34px 12px 10px;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.82));
  color: rgba(255, 255, 255, 0.7);
  font-size: 11.5px;
  line-height: 1.45;
  opacity: 0;
  transition: opacity 0.15s;
  pointer-events: none;
}

.plate:hover .meta { opacity: 1; }

.plate .meta strong {
  display: block;
  color: #fff;
  font-size: 12.5px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.plate .vec {
  position: absolute;
  top: 8px;
  left: 8px;
  padding: 2px 8px;
  border-radius: var(--pill);
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  font-size: 10.5px;
  font-weight: 600;
  backdrop-filter: blur(4px);
}

.plate .pick {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 2;
  width: 24px;
  height: 24px;
  display: none;
  place-items: center;
  border: 2px solid rgba(255, 255, 255, 0.75);
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.35);
  color: #fff;
  font-size: 13px;
  line-height: 1;
}

/* Shift-click selects a range; without this it also highlights text across the feed. */
.masonry.picking { user-select: none; }
.masonry.picking .plate { cursor: pointer; }
.masonry.picking .plate .pick { display: grid; }
.masonry.picking .plate:not(.selected) img { opacity: 0.45; }

.plate.selected { outline: 3px solid var(--accent); outline-offset: -3px; }
.plate.selected .pick { background: var(--accent); border-color: var(--accent); }

.more-sentinel { height: 1px; }

/* ── vectorize page ─────────────────────────────────────────────────────── */

/* Each card holds a raster and its trace side by side, for comparison. */
.trace-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
  gap: 12px;
}

.trace-grid:empty { display: none; }

.trace-card {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface-2);
}

.trace-card.tracing { border-color: var(--accent-line); }
.trace-card.error   { border-color: rgba(242, 104, 93, 0.4); }

.trace-card-head {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 12px;
  border-bottom: 1px solid var(--line);
}

.trace-card-head strong {
  flex: 1;
  min-width: 0;
  font-size: 12.5px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.trace-state { font-size: 11px; font-weight: 600; color: var(--text-mute); }
.trace-card.done .trace-state    { color: var(--ok); }
.trace-card.tracing .trace-state { color: var(--accent); }
.trace-card.error .trace-state   { color: var(--err); }

.trace-drop {
  padding: 2px 5px;
  border: 0;
  background: none;
  color: var(--text-mute);
  font-size: 12px;
  line-height: 1;
}

.trace-drop:hover { color: var(--err); }

.trace-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--line);
}

.trace-pair figure { margin: 0; background: var(--bg); }

/* The checkerboard reads through a traced cut-out, so transparency is visible. */
.trace-pair img,
.trace-blank {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  object-fit: contain;
  background-color: #19191c;
  background-image:
    linear-gradient(45deg, #222226 25%, transparent 25%, transparent 75%, #222226 75%),
    linear-gradient(45deg, #222226 25%, transparent 25%, transparent 75%, #222226 75%);
  background-size: 16px 16px;
  background-position: 0 0, 8px 8px;
}

.trace-blank {
  display: grid;
  place-items: center;
  color: var(--text-mute);
  font-size: 15px;
}

.trace-pair figcaption {
  padding: 5px 8px;
  border-top: 1px solid var(--line);
  font-size: 11px;
  color: var(--text-mute);
  text-align: center;
}

.trace-error {
  margin: 0;
  padding: 8px 12px;
  border-top: 1px solid var(--line);
  font-size: 12px;
  color: var(--err);
}

.trace-foot {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-top: 1px solid var(--line);
}

.trace-stats { font-size: 11px; color: var(--text-mute); }

/* ───────────────────────────────────────────────────────────────── lightbox */

.lightbox,
.modal {
  position: fixed;
  inset: 0;
  z-index: 9500;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(8, 8, 10, 0.9);
  backdrop-filter: blur(10px);
}

.modal { overflow-y: auto; }

.lightbox-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 350px;
  width: 100%;
  max-width: 1320px;
  max-height: 92vh;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.7);
}

.lightbox-inner img {
  width: 100%;
  height: 100%;
  max-height: 92vh;
  object-fit: contain;
  background: #09090a;
}

.lightbox-side {
  display: flex;
  flex-direction: column;
  border-left: 1px solid var(--line);
  overflow-y: auto;
}

.lightbox-side .panel-body { padding: 16px 18px 20px; }

dl.spec { margin: 0; font-size: 13px; }

dl.spec dt {
  margin-top: 12px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-mute);
}

dl.spec dt:first-child { margin-top: 0; }

dl.spec dd {
  margin: 3px 0 0;
  color: var(--text);
  word-break: break-word;
}

.modal-card {
  width: 100%;
  max-width: 620px;
  margin: 0;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.7);
}

.modal-card .panel-body { max-height: 76vh; overflow-y: auto; }

/* ─────────────────────────────────────────────────────────── roster (units) */

.unit {
  margin-bottom: 10px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface-2);
}

.unit[data-off] { opacity: 0.55; }

.unit-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 13px 4px;
}

.unit-head .lamp {
  flex: 1;
  min-width: 0;
  color: var(--text);
  font-size: 13.5px;
  font-weight: 600;
}

.unit-kind {
  flex: none;
  padding: 2px 8px;
  border-radius: var(--pill);
  background: var(--surface-3);
  color: var(--text-dim);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.03em;
}

.unit-body {
  padding: 4px 13px 10px;
  font-size: 12px;
  line-height: 1.7;
  color: var(--text-dim);
}

.unit-url { color: var(--text); word-break: break-all; }
.unit-note { color: var(--text-mute); }

.unit-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 0 13px 12px;
}

.unit-result { margin: 0 13px 13px; font-size: 12px; }

/* ──────────────────────────────────────────────────────────────── utilities */

.stack { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.stack.end { justify-content: flex-end; }
.mt { margin-top: 16px; }

.empty {
  padding: 48px 20px;
  border: 1px dashed var(--line-2);
  border-radius: var(--r-lg);
  color: var(--text-mute);
  font-size: 13.5px;
  text-align: center;
}

.two-col {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: 20px;
  align-items: start;
}

.divider {
  height: 1px;
  margin: 20px 0;
  background: var(--line);
}

/* ═══════════════════════════════════════════════════════════════ task board */

.dash { display: flex; flex-wrap: wrap; gap: 8px; }

.dash-tile {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  min-width: 92px;
  padding: 9px 14px 8px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: var(--surface-2);
  color: var(--text-dim);
  font-size: 12px;
  font-weight: 500;
  transition: border-color 0.12s, background 0.12s, color 0.12s;
}

.dash-tile:hover { border-color: var(--line-2); color: var(--text); }

.dash-count {
  font-size: 22px;
  font-weight: 650;
  line-height: 1.15;
  color: var(--text);
}

.dash-tile.on { border-color: var(--accent-line); background: var(--accent-soft); color: var(--accent); }
.dash-tile.on .dash-count { color: var(--accent); }

/* The tallies that mean work stand out even when the tile is not selected. */
.dash-tile[data-lens="urgent"] .dash-count,
.dash-tile[data-lens="bug"] .dash-count { color: var(--err); }
.dash-tile[data-lens="todo"] .dash-count { color: var(--warn); }

.board {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 12px;
  align-items: start;
}

.board-col { margin-bottom: 0; }
.board-col .panel-head { padding: 11px 14px; }
.board-col .panel-head h2 { font-size: 13px; }
.board-col .panel-head .sub { font-size: 11.5px; }

/* Each column is colour-keyed by a dot before its title. */
.board-col .panel-head h2::before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 8px;
  border-radius: 50%;
  vertical-align: 1px;
  background: var(--text-mute);
}

.col-active  .panel-head h2::before { background: var(--accent); }
.col-blocked .panel-head h2::before { background: var(--err); }
.col-done    .panel-head h2::before { background: var(--ok); }

.board-count {
  flex: none;
  min-width: 22px;
  padding: 1px 7px;
  border-radius: var(--pill);
  background: var(--surface-3);
  color: var(--text-dim);
  font-size: 11.5px;
  font-weight: 600;
  text-align: center;
}

.board-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 90px;
  padding: 10px;
}

.board-col.dragover { border-color: var(--accent-line); }
.board-col.dragover .board-body { background: var(--accent-soft); }

.board-empty {
  padding: 16px 8px;
  border: 1px dashed var(--line-2);
  border-radius: var(--r);
  color: var(--text-mute);
  font-size: 12px;
  text-align: center;
}

.card {
  position: relative;
  padding: 10px 11px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: var(--surface-2);
  cursor: grab;
}

.card:hover { border-color: var(--line-2); }
.card.dragging { opacity: 0.4; }

/* Kind shows as a thin inset stripe on the left edge. */
.card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 10px;
  bottom: 10px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: transparent;
}

.card.kind-bug::before  { background: var(--err); }
.card.kind-todo::before { background: var(--warn); }
.card.kind-idea::before { background: var(--ok); }
.card.is-urgent { border-color: rgba(242, 104, 93, 0.45); }
.card.is-pinned { border-top-color: var(--accent-line); }
.card.is-low { opacity: 0.8; }

.card.is-done { opacity: 0.5; }
.card.is-done .card-title { text-decoration: line-through; }

.card.is-done::after {
  content: "Done";
  position: absolute;
  top: 9px;
  right: 10px;
  padding: 1px 8px;
  border-radius: var(--pill);
  background: var(--ok-soft);
  color: var(--ok);
  font-size: 10.5px;
  font-weight: 600;
  pointer-events: none;
}

.card-top { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 6px; }

.chip {
  padding: 1px 7px;
  border-radius: var(--pill);
  background: var(--surface-3);
  color: var(--text-dim);
  font-size: 10.5px;
  font-weight: 600;
}

.chip-kind.kind-bug  { background: var(--err-soft); color: var(--err); }
.chip-kind.kind-todo { background: var(--warn-soft); color: var(--warn); }
.chip-kind.kind-idea { background: var(--ok-soft); color: var(--ok); }
.chip-pin { background: var(--accent-soft); color: var(--accent); }
.prio-urgent { background: var(--err-soft); color: var(--err); }
.prio-low { color: var(--text-mute); }

.card-title {
  font-size: 13.5px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.card-body {
  margin-top: 6px;
  color: var(--text-dim);
  font-size: 12.5px;
  line-height: 1.6;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 10px;
  margin-top: 7px;
  color: var(--text-mute);
  font-size: 11px;
}

.card-ref { color: var(--text-dim); }

.card-actions {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--line);
}

.card-actions .grow { flex: 1; }

.mini {
  padding: 3px 8px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--text-dim);
  font-size: 11px;
  font-weight: 600;
  transition: color 0.12s, background 0.12s;
}

.mini:hover:not(:disabled) { background: var(--surface-3); color: var(--text); }
.mini.danger:hover:not(:disabled) { background: var(--err-soft); color: var(--err); }
.mini.ok { color: var(--ok); }
.mini:disabled { opacity: 0.3; cursor: default; }

/* ─────────────────────────────────────────────────────────────────── packer */

.pack-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.pack-strip:empty { display: none; }

.pack-thumb {
  position: relative;
  width: 84px;
  height: 84px;
  overflow: hidden;
  border: 1px solid var(--line-2);
  border-radius: var(--r-sm);
  background: var(--bg);
  cursor: grab;
  transition: opacity 0.12s, border-color 0.12s, transform 0.12s;
}

.pack-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }
.pack-thumb.dragging { opacity: 0.35; }
.pack-thumb.over { border-color: var(--accent); transform: scale(1.04); }
/* Left off the sheet by a fixed row count. */
/* Max rows split the set over several sheets: the preview pages through them. */
.pack-pages { display: inline-flex; align-items: center; gap: 6px; }
.pack-pages .btn { padding: 2px 9px; min-height: 0; }

.pack-n {
  position: absolute;
  left: 4px;
  bottom: 4px;
  padding: 0 5px;
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.7);
  color: #fff;
  font-size: 10.5px;
  font-weight: 600;
  line-height: 16px;
}

.pack-x {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 18px;
  height: 18px;
  padding: 0;
  border: 0;
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.7);
  color: #fff;
  font-size: 10px;
  line-height: 18px;
  opacity: 0;
  transition: opacity 0.12s, background 0.12s;
}

.pack-thumb:hover .pack-x, .pack-x:focus-visible { opacity: 1; }
.pack-x:hover { background: var(--err); }
@media (hover: none) { .pack-x { opacity: 1; } }

.pack-layout {
  display: grid;
  grid-template-columns: 320px minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}

.pack-main { position: sticky; top: 16px; }

.pack-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 12px;
}

.pack-auto { width: 100%; margin: -4px 0 14px; }

.pack-side .seg { flex-wrap: nowrap; }
.pack-side .seg button { flex: 1 1 0; text-align: center; }
.pack-side .seg.pack-seg-grid { display: grid; grid-template-columns: repeat(3, 1fr); }

.pack-lines { margin: 0 0 14px; }

#wm-blend-hint { margin: -8px 0 14px; }
#wm-blend-hint:empty { display: none; }

.pack-inline { margin: 0; border: 0; padding: 0; }

/* Watermark switched off: settings stay editable, just visibly inactive. */
.pack-off { opacity: 0.45; }

.pack-stage {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 240px;
}

.pack-stage canvas {
  display: block;
  max-width: 100%;
  border-radius: var(--r-sm);
  box-shadow: 0 0 0 1px var(--line);
  /* Checkerboard behind a transparent sheet. */
  background-color: #19191c;
  background-image:
    linear-gradient(45deg, #222226 25%, transparent 25%, transparent 75%, #222226 75%),
    linear-gradient(45deg, #222226 25%, transparent 25%, transparent 75%, #222226 75%);
  background-size: 16px 16px;
  background-position: 0 0, 8px 8px;
}

.pack-pos {
  display: grid;
  grid-template-columns: repeat(3, 30px);
  gap: 4px;
  padding: 4px;
  width: max-content;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--bg);
}

.pack-pos button {
  height: 22px;
  padding: 0;
  border: 1px solid var(--line-2);
  border-radius: 4px;
  background: transparent;
}

.pack-pos button:hover { background: var(--surface-3); }
.pack-pos button[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); }

input[type="range"] {
  width: 100%;
  margin: 4px 0;
  accent-color: var(--accent);
}

input[type="color"] {
  width: 44px;
  height: 34px;
  padding: 3px;
  border: 1px solid var(--line-2);
  border-radius: var(--r);
  background: var(--bg);
  cursor: pointer;
}

input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; }
input[type="color"]::-webkit-color-swatch { border: 0; border-radius: 5px; }

/* Archive picker */
.pick-dialog {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 1180px;
  height: min(88vh, 1000px);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.7);
}

.pick-body { flex: 1; min-height: 0; overflow-y: auto; }

.pick-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(128px, 1fr));
  gap: 8px;
  margin-top: 12px;
}

.pick-tile {
  position: relative;
  display: block;
  padding: 0;
  overflow: hidden;
  border: 2px solid transparent;
  border-radius: var(--r);
  background: #09090a;
  aspect-ratio: 1;
  cursor: pointer;
  transition: border-color 0.1s;
}

.pick-tile img { width: 100%; height: 100%; object-fit: contain; display: block; }
.pick-tile:hover { border-color: var(--line-2); }
.pick-tile.picked { border-color: var(--accent); }
.pick-tile.added:not(.picked) img { opacity: 0.45; }

.pick-badge {
  position: absolute;
  top: 5px;
  left: 5px;
  padding: 0 6px;
  border-radius: 4px;
  background: var(--accent);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 18px;
}

.pick-badge:empty { display: none; }
.pick-tile.added:not(.picked) .pick-badge { background: rgba(0, 0, 0, 0.75); color: var(--text-dim); font-weight: 600; }

.pick-name {
  position: absolute;
  inset: auto 0 0 0;
  padding: 14px 6px 4px;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.85));
  color: var(--text-dim);
  font-size: 10.5px;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  opacity: 0;
  transition: opacity 0.12s;
}

.pick-tile:hover .pick-name, .pick-tile.picked .pick-name { opacity: 1; }

.pick-more { display: block; margin: 14px auto 0; }

.pick-foot {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px;
  border-top: 1px solid var(--line);
}

.pick-foot .readout { margin: 0; padding: 6px 10px; }
.pick-foot .readout:empty { display: none; }

@media (max-width: 1080px) {
  .pack-layout { grid-template-columns: 1fr; }
  .pack-main { position: static; order: -1; }
}

/* ─────────────────────────────────────────────────────────────── responsive */

@media (max-width: 1080px) {
  .pb-summary { display: none; }
}

@media (max-width: 940px) {
  .two-col { grid-template-columns: 1fr; }
  .lightbox-inner { grid-template-columns: 1fr; max-height: 94vh; overflow-y: auto; }
  .lightbox-side { border-left: none; border-top: 1px solid var(--line); overflow: visible; }
  .lightbox-inner img { max-height: 56vh; }
}

/* The sidebar folds into a top bar. */
@media (max-width: 820px) {
  .app { grid-template-columns: 1fr; }

  /* Static, not sticky: the composer is what pins to the top on a phone. */
  .sidebar {
    position: static;
    height: auto;
    flex-direction: row;
    align-items: center;
    gap: 6px;
    padding: 10px 16px;
    overflow-x: auto;
    border-bottom: 1px solid var(--line);
  }

  .brand { padding: 0 8px 0 0; }
  .brand-name { display: none; }
  .nav { flex-direction: row; }
  .nav-label, .sidebar-foot { display: none; }
  .nav a { padding: 7px 11px; white-space: nowrap; }

  .composer { top: 0; }
  .main { padding: 0 16px 70px; }
}

@media (max-width: 560px) {
  .nav a span { display: none; }
  .feed-tools { justify-content: flex-start; }
  input.search { width: 100%; }
}

/* ───────────────────────────────────────────────────── signed-in user chip */

.user-chip { display: flex; align-items: center; gap: 10px; min-width: 0; }
.user-chip img, .user-initial {
  flex: none; width: 30px; height: 30px; border-radius: 50%; object-fit: cover;
  display: grid; place-items: center; background: var(--surface-3); color: var(--text); font-weight: 650; font-size: 13px;
}
.user-text { display: grid; min-width: 0; line-height: 1.3; }
.user-text strong { color: var(--text); font-size: 12.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-text small { color: var(--text-mute); font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-out { align-self: flex-start; }

/* ─────────────────────────────────────────── ownership: public / private / owner */

.vis-tag {
  display: inline-flex; align-items: center; gap: 5px; padding: 1px 8px; border-radius: var(--pill);
  font-size: 11px; font-weight: 600; background: var(--surface-3); color: var(--text-dim);
}
.vis-tag.public { background: var(--ok-soft); color: var(--ok); }
.owner-note { font-size: 11.5px; color: var(--text-mute); }

/* ─────────────────────────────────────────────────────────────── admin users */

.users-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.users-table th { text-align: left; font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-mute); padding: 0 10px 10px; }
.users-table td { padding: 10px; border-top: 1px solid var(--line); vertical-align: middle; }
.users-table tr.is-disabled td { opacity: 0.55; }
.users-table .who { display: flex; align-items: center; gap: 10px; min-width: 0; }
.users-table .who img, .users-table .who .user-initial { width: 28px; height: 28px; }
.users-table select { width: auto; padding: 6px 30px 6px 10px; }
.users-table .actions { text-align: right; white-space: nowrap; }
.add-user { display: grid; grid-template-columns: minmax(220px, 1fr) 150px auto auto; gap: 12px; align-items: end; }
@media (max-width: 820px) { .add-user { grid-template-columns: 1fr; } .users-table .hide-sm { display: none; } }

.unit-owner { display: flex; align-items: center; gap: 4px; margin: -2px 0 8px; }

/* waiting access requests, on the Users link */
.nav-badge { margin-left: auto; min-width: 20px; padding: 1px 6px; border-radius: var(--pill); background: var(--accent); color: #fff;
  font-size: 11px; font-weight: 700; text-align: center; line-height: 18px; }

/* ─────────────────────────────────────────────── tool switches (admin → Edit user) */

.perm-card { max-width: 560px; }
.perm-who { margin-bottom: 16px; }
.perm-list { display: grid; gap: 6px; margin-top: 2px; }
.perm-row {
  display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: center; gap: 12px;
  padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r); background: var(--bg); cursor: pointer;
}
.perm-row:hover { border-color: var(--line-2); }
.perm-row.on { border-color: var(--accent-line); background: var(--accent-soft); }
.perm-icon { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 9px; background: var(--surface-3); color: var(--text); }
.perm-row.on .perm-icon { background: var(--accent); color: #fff; }
.perm-icon svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.perm-text { display: grid; min-width: 0; }
.perm-text strong { font-size: 13.5px; }
.perm-text small { color: var(--text-mute); font-size: 12px; }
.perm-list.locked .perm-row { cursor: default; opacity: 0.75; }
.perm-tools { display: flex; flex-wrap: wrap; gap: 4px; }
.perm-tools .vis-tag { font-weight: 500; }

/* someone without the Vectorize tool does not get tracing in Create's viewer either */
body.no-vectorize #lb-svg { display: none !important; }
.perm-who .who { display: flex; align-items: center; gap: 10px; min-width: 0; }
.perm-who .who img, .perm-who .who .user-initial { width: 36px; height: 36px; }

/* ─────────────────────────────────────────────── Styles: picture cards + friendly editor */

.style-new { align-self: center; padding: 10px 18px; font-size: 14px; }
.style-shelf { margin-bottom: 30px; }
.shelf-title { margin: 0 0 4px; font-size: 16px; font-weight: 650; }
.shelf-sub { margin: 0 0 14px; font-size: 13px; color: var(--text-mute); }
.style-shelf > .shelf-title + .style-grid, .style-shelf > .shelf-title + .style-empty { margin-top: 14px; }
.style-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 16px; }

.style-card {
  display: flex; flex-direction: column; overflow: hidden;
  border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface);
  transition: border-color 0.15s, transform 0.15s;
}
.style-card:hover { border-color: var(--line-2); transform: translateY(-2px); }
.style-preview { position: relative; aspect-ratio: 1 / 1; display: grid; place-items: center; overflow: hidden; background: var(--surface-2); }
/* the whole picture, never cropped */
.style-preview img { width: 100%; height: 100%; object-fit: contain; }
.style-letter { font-size: 54px; font-weight: 750; color: rgba(255, 255, 255, 0.92); text-shadow: 0 4px 18px rgba(0, 0, 0, 0.35); }
.style-info { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px 16px; flex: 1; }
.style-name-row { display: flex; align-items: center; gap: 8px; }
.style-name-row h3 { flex: 1; margin: 0; font-size: 15px; font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.style-gist { margin: 0; font-size: 13px; line-height: 1.45; color: var(--text-dim); flex: 1; }
.style-note { margin: 0; font-size: 12px; color: var(--text-mute); }
.style-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.style-actions .btn { padding: 7px 13px; }
.style-empty {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; padding: 26px; border: 1px dashed var(--line-2);
  border-radius: var(--r-lg); color: var(--text-dim);
}

.style-card-edit { max-width: 640px; }
.step-cap { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; font-size: 15px; font-weight: 650; color: var(--text); }
.step-cap b {
  width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%;
  background: var(--accent); color: #fff; font-size: 12.5px;
}
.style-card-edit input[type="text"] { font-size: 15px; padding: 11px 13px; }
.style-card-edit textarea { font-size: 14px; line-height: 1.55; }
.field-note { display: block; margin-top: 6px; font-size: 12px; color: var(--text-mute); }

.idea-box { margin: -4px 0 18px; }
.idea-cap { display: block; margin-bottom: 8px; font-size: 12px; font-weight: 600; color: var(--text-mute); }
.idea-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.idea-chip {
  padding: 7px 12px; border: 1px solid var(--line-2); border-radius: var(--pill); background: var(--surface-2);
  color: var(--text); font-size: 13px; font-weight: 500; transition: background 0.12s, border-color 0.12s;
}
.idea-chip:hover { background: var(--surface-3); }
.idea-chip.on { border-color: var(--accent-line); background: var(--accent-soft); color: var(--accent-hi); }

.example-box { margin-bottom: 18px; padding: 12px 14px; border-radius: var(--r); background: var(--bg); border: 1px solid var(--line); }
.example-box p { margin: 0; font-size: 13px; line-height: 1.55; color: var(--text-dim); }
.example-box q { color: var(--text); font-weight: 600; }
.example-box q.example-full { font-weight: 500; }

.share-row { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r); cursor: pointer; }
.share-row small, .choice small { display: block; color: var(--text-mute); font-size: 12px; font-weight: 400; }
.share-row strong, .choice strong { font-size: 13.5px; }

.more-box { border-top: 1px solid var(--line); padding-top: 12px; }
.more-box > summary { cursor: pointer; font-size: 13px; font-weight: 600; color: var(--text-dim); list-style: none; }
.more-box > summary::-webkit-details-marker { display: none; }
.more-box > summary::before { content: "▸ "; }
.more-box[open] > summary::before { content: "▾ "; }
.more-body { padding-top: 14px; }
.choice { display: flex; align-items: flex-start; gap: 10px; padding: 8px 0; cursor: pointer; }
.choice input { margin-top: 3px; accent-color: var(--accent); }
.pick-foot .danger { margin-right: auto; }

/* style thumbnail: current picture + upload / pick / automatic */
.thumb-row { display: grid; grid-template-columns: 116px minmax(0, 1fr); gap: 16px; align-items: center; margin-bottom: 18px; }
.thumb-frame {
  width: 116px; height: 116px; border-radius: var(--r-lg); overflow: hidden; display: grid; place-items: center;
  background: var(--surface-2); border: 1px solid var(--line);
}
.thumb-frame img { width: 100%; height: 100%; object-fit: contain; }
.thumb-frame .style-letter { font-size: 44px; }
.thumb-side .step-cap { margin-bottom: 2px; }
.thumb-note { margin: 0 0 10px; font-size: 12.5px; color: var(--text-mute); }
.thumb-buttons { display: flex; flex-wrap: wrap; gap: 6px; }
.thumb-picker { margin: -6px 0 18px; padding: 12px; border: 1px solid var(--line); border-radius: var(--r); background: var(--bg); }
.thumb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: 8px; max-height: 260px; overflow-y: auto; }
.thumb-grid button {
  aspect-ratio: 1 / 1; padding: 0; border: 2px solid transparent; border-radius: 9px; overflow: hidden; background: var(--surface-2); cursor: pointer;
}
.thumb-grid button:hover { border-color: var(--line-2); }
.thumb-grid button.on { border-color: var(--accent); }
.thumb-grid img { width: 100%; height: 100%; object-fit: contain; display: block; }
.thumb-picker > .btn { margin-top: 10px; }
.thumb-empty { font-size: 12.5px; color: var(--text-mute); }

/* ─────────────────────────────────────────────── Connections: cards + friendly editor */

.conn-banner {
  position: relative; height: 112px; display: flex; align-items: center; gap: 14px; padding: 0 20px;
  background: linear-gradient(135deg, #10a37f, #0b6e57);
}
.conn-banner.custom { background: linear-gradient(135deg, #7c4dff, #4b2bb3); }
.conn-logo {
  width: 54px; height: 54px; display: grid; place-items: center; border-radius: 16px;
  background: rgba(255, 255, 255, 0.18); color: #fff; font-size: 20px; font-weight: 800; letter-spacing: -0.02em;
}
.conn-service { color: rgba(255, 255, 255, 0.92); font-size: 15px; font-weight: 650; }
.conn-card[data-off] .conn-banner { filter: saturate(0.25) brightness(0.7); }
.conn-ready { margin: 0; font-size: 13px; font-weight: 600; }
.conn-ready.ok { color: var(--ok); }
.conn-ready.warn { color: var(--warn); }
.conn-ready.off { color: var(--text-mute); }
.conn-ready span { color: var(--text-mute); font-weight: 500; }
.conn-result { margin: 8px 0 0; font-size: 12.5px; }

.kind-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.kind-tile, .model-tile {
  display: flex; align-items: center; gap: 12px; padding: 12px 14px; text-align: left;
  border: 1px solid var(--line-2); border-radius: var(--r-lg); background: var(--bg); color: var(--text);
  transition: border-color 0.12s, background 0.12s;
}
.kind-tile:hover, .model-tile:hover { border-color: #4a4a52; }
.kind-tile.on, .model-tile.on { border-color: var(--accent); background: var(--accent-soft); }
.kind-tile strong, .model-tile strong { display: block; font-size: 14px; }
.kind-tile small, .model-tile small { display: block; margin-top: 2px; font-size: 12px; color: var(--text-mute); }
.kind-logo {
  flex: none; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 12px;
  color: #fff; font-weight: 800; font-size: 15px; background: linear-gradient(135deg, #10a37f, #0b6e57);
}
.kind-logo.custom { background: linear-gradient(135deg, #7c4dff, #4b2bb3); font-size: 18px; }
.model-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.model-tile { display: block; padding: 10px 12px; }
.model-tile small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.model-tile.other strong { color: var(--text-dim); }
.expert-box { margin-bottom: 18px; padding: 14px; border: 1px dashed var(--line-2); border-radius: var(--r-lg); }
.expert-tag { margin-left: 4px; padding: 1px 8px; border-radius: var(--pill); background: var(--surface-3); color: var(--text-dim); font-size: 11px; font-weight: 600; }
@media (max-width: 560px) { .kind-tiles { grid-template-columns: 1fr; } }

/* the Aisgard logo: the white knot, no tile */
.brand-logo { flex: none; width: 28px; height: 28px; object-fit: contain; }

/* ─────────────────────────────────────────────────────────── loading skeletons */
/* Grey shapes of the real layout while data loads, with a soft light sweeping across.
   They sit in the page's HTML, so they paint before any script runs, and vanish when
   the real content replaces them. Reduced motion stops the sweep (global rule above). */

.skel {
  display: block;
  border-radius: 8px;
  background: linear-gradient(100deg, var(--surface-2) 30%, var(--surface-3) 50%, var(--surface-2) 70%) 0 0 / 300% 100%;
  animation: skel-sweep 1.5s ease-in-out infinite;
}
@keyframes skel-sweep { from { background-position: 100% 0; } to { background-position: 0 0; } }

.skel-line { height: 11px; margin: 7px 0; border-radius: 6px; }
.skel-line.tall { height: 15px; }
.skel-line.small { height: 9px; }
.skel-line.w40 { width: 40%; } .skel-line.w60 { width: 60%; } .skel-line.w70 { width: 70%; } .skel-line.w90 { width: 90%; }
.skel-btn { display: inline-block; width: 64px; height: 32px; border-radius: var(--r); }
.skel-btn.wide { width: 96px; }
.skel-row { display: flex; gap: 6px; margin-top: 10px; }
.skel-avatar { flex: none; width: 30px; height: 30px; border-radius: 50%; }
.skel-tag { display: inline-block; width: 46px; height: 18px; border-radius: var(--pill); }
.skel-tag.wide { width: 120px; }

/* cards (Styles, Connections) */
.skel-card { pointer-events: none; }
.skel-card:hover { transform: none; border-color: var(--line); }
.skel-media { aspect-ratio: 1 / 1; border-radius: 0; }
.skel-banner { height: 112px; border-radius: 0; }

/* the Create archive: columns of image tiles in mixed heights */
.skel-masonry { display: flex; gap: 3px; width: 100%; }
.skel-col { flex: 1 1 0; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.skel-tile { border-radius: 0; }
@media (max-width: 820px) { .skel-col:nth-child(n + 3) { display: none; } }

/* Board columns */
.skel-board .panel-head { min-height: 44px; }
.skel-note { height: 64px; border-radius: var(--r); }

/* Users table rows, Packer picker tiles, sidebar chip */
.skel-tr td { border-top: 1px solid var(--line); }
.skel-square { aspect-ratio: 1 / 1; border-radius: 9px; }
.skel-foot .user-chip { width: 100%; }

/* ─────────────────────────────────────────────────── theme colour picker (sidebar) */

.foot-tools { display: flex; align-items: center; gap: 6px; }
.theme-pick { position: relative; }
.theme-dot { width: 34px; height: 34px; padding: 0; display: grid; place-items: center; }
.theme-dot span { width: 16px; height: 16px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 2px rgb(255 255 255 / 15%); }
.theme-pop {
  position: fixed; z-index: 9700; width: 224px; padding: 14px;
  border: 1px solid var(--line-2); border-radius: var(--r-lg); background: var(--surface-2);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.5);
}
.theme-title { font-size: 12px; font-weight: 650; color: var(--text); margin-bottom: 10px; }
.theme-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.swatch { width: 30px; height: 30px; border-radius: 50%; border: 2px solid transparent; cursor: pointer; padding: 0; transition: transform 0.1s; }
.swatch:hover { transform: scale(1.1); }
.swatch.on { border-color: #fff; box-shadow: 0 0 0 2px rgb(255 255 255 / 25%); }
.theme-custom { display: flex; align-items: center; gap: 8px; margin-top: 12px; font-size: 12.5px; color: var(--text-dim); cursor: pointer; }
.theme-custom input { width: 30px; height: 30px; padding: 0; border: 0; border-radius: 50%; background: none; cursor: pointer; }
.theme-custom input::-webkit-color-swatch-wrapper { padding: 0; }
.theme-custom input::-webkit-color-swatch { border: 2px solid var(--line-2); border-radius: 50%; }
.theme-note { margin: 10px 0 0; font-size: 11px; color: var(--text-mute); }

/* connection presets: quick-start tiles at the top of Add connection */
.preset-tiles { display: grid; gap: 8px; }
.preset-tile {
  position: relative; display: flex; align-items: center; gap: 12px; padding: 12px 40px 12px 14px; text-align: left;
  border: 1px solid var(--accent-line); border-radius: var(--r-lg); background: var(--accent-soft); color: var(--text);
}
.preset-tile:hover { border-color: var(--accent); }
.preset-tile.on { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.preset-text strong { display: block; font-size: 14px; }
.preset-text small { display: block; margin-top: 2px; font-size: 12px; color: var(--text-dim); }
.preset-remove {
  position: absolute; right: 10px; top: 50%; translate: 0 -50%; width: 24px; height: 24px; display: grid; place-items: center;
  border-radius: 50%; color: var(--text-mute); font-size: 12px;
}
.preset-remove:hover { background: var(--surface-3); color: var(--err); }

/* Add connection: step 1 (choose) and the "what you picked" bar of step 2 */
.choose-group { margin-bottom: 20px; }
.choose-group:last-child { margin-bottom: 4px; }
.kind-tiles.stacked { grid-template-columns: 1fr; }
.kind-tiles.stacked .kind-tile { padding: 12px 14px; }
.wizard-chosen {
  display: flex; align-items: center; gap: 12px; margin-bottom: 18px; padding: 12px 14px;
  border: 1px solid var(--accent-line); border-radius: var(--r-lg); background: var(--accent-soft);
}
.wizard-chosen strong { display: block; font-size: 14px; }
.wizard-chosen small { display: block; margin-top: 2px; font-size: 12px; color: var(--text-dim); }
#step-label { margin-left: 4px; }

/* the brand: “AI” in the user's own colour */
.brand-ai { color: var(--accent); }

/* Connect Claude Code */
.claude-wrap { max-width: 880px; }
.claude-step .panel-head { gap: 12px; }
.step-num { width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; background: var(--accent); color: #fff; font-size: 13px; font-weight: 700; }
.claude-p { margin: 0 0 12px; color: var(--text-dim); }
.cmd-row { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.cmd-os { flex: none; width: 92px; font-size: 12px; color: var(--text-mute); font-weight: 600; }
.cmd { flex: 1; min-width: 0; padding: 10px 12px; border-radius: var(--r); background: var(--bg); border: 1px solid var(--line-2);
  font-family: var(--mono); font-size: 12.5px; color: var(--text); overflow-x: auto; white-space: nowrap; }
.cmd-row.big .cmd { white-space: normal; word-break: break-all; font-size: 12px; }
.warn-hint { color: var(--warn); }
.claude-wait { margin-top: 14px; }
.claude-done { margin-top: 14px; padding: 12px 14px; border-radius: var(--r); background: var(--ok-soft); color: var(--ok); }
.key-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line); }
.key-row:first-child { border-top: 0; }
.nav a .nav-badge { font-size: 10px; text-transform: lowercase; }