:root {
  --bg: #14161a; --panel: #1c1f26; --line: #2c313b;
  --text: #e6e8ec; --muted: #9aa3b2; --accent: #4f9cf9;
  --new: #48c78e; --locked: #b0872a; --error: #f14668;
}
* { box-sizing: border-box; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font: 14px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif;
}
#topbar {
  display: flex; align-items: center; flex-wrap: wrap; gap: 16px; row-gap: 8px;
  padding: 10px 16px; background: var(--panel);
  border-bottom: 1px solid var(--line);
}
.brand { font-weight: 700; letter-spacing: .5px; }
/* margin-left:auto pushes the status right on a wide screen; once the bar wraps
   the status lands on its own line, where it must still be readable and must
   not push the buttons off-screen. */
#topbar-status { color: var(--muted); margin-left: auto; flex: 1 1 auto; min-width: 0; }
#board { position: relative; padding: 24px; min-height: calc(100vh - 45px); }

#topbar label { color: var(--muted); display: flex; gap: 6px; align-items: center; }
#topbar select, #topbar input {
  background: var(--bg); color: var(--text);
  border: 1px solid var(--line); border-radius: 4px; padding: 4px 6px;
}
#topbar button {
  background: var(--panel); color: var(--text); border: 1px solid var(--line);
  border-radius: 4px; padding: 5px 10px; cursor: pointer;
}
#topbar button:hover { border-color: var(--accent); }
#topbar button.primary { background: var(--accent); border-color: var(--accent); color: #08111e; font-weight: 600; }
#topbar button:disabled { opacity: .45; cursor: default; }
#topbar button:disabled:hover { border-color: var(--line); }

/* Shared banner mechanism (Phase 4 Tasks 1 & 2): a persistent strip below the
   topbar that, unlike #topbar-status, never clears itself on its own — it
   stays until dismissed, superseded by a fresh re-check, or (offline only)
   a successful reconnect. The whole point of both banners is that the old
   transient status line was too easy to miss the one time it actually
   mattered. Offline and drift are kept as two SEPARATE elements sharing this
   base rather than one that swaps its content: they have different
   lifecycles and can be true at once (drift found on a prior load, then the
   connection drops before it's dismissed) — see app.js's banner section for
   the full reasoning. `.offline-banner` and `.drift-banner` supply their own
   accent colour and any content-specific rules below. */
.banner {
  display: flex; gap: 16px; align-items: flex-start; justify-content: space-between;
  padding: 10px 16px; background: var(--panel); color: var(--text);
  border-bottom: 1px solid var(--line);
}
.banner[hidden] { display: none; }
.banner__body { display: flex; flex-direction: column; gap: 8px; flex: 1 1 auto; min-width: 0; }
.banner code { background: var(--bg); border-radius: 3px; padding: 0 4px; font-size: 12px; }
.banner__actions { display: flex; gap: 6px; flex: 0 0 auto; }
.banner__actions button {
  background: var(--bg); color: var(--text); border: 1px solid var(--line);
  border-radius: 4px; padding: 5px 10px; cursor: pointer;
}
.banner__actions button:hover { border-color: var(--accent); }

.offline-banner { border-bottom-color: var(--error); }

.drift-banner { border-bottom-color: var(--locked); }
.drift-banner--consequential { border-bottom-color: var(--error); }
.drift-banner__entity { display: flex; flex-direction: column; gap: 2px; }
.drift-banner__table {
  font-weight: 700; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px;
  color: var(--accent);
}
.drift-banner__entity ul { margin: 0; padding-left: 20px; }
.drift-banner__entity li { margin-bottom: 2px; }
.drift-banner__line--consequential { color: var(--error); font-weight: 600; }

.fk-layer { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.fk { fill: none; stroke: var(--accent); stroke-width: 1.5; opacity: .55; }

.block {
  position: absolute; width: 260px; z-index: 1;
  background: var(--panel); border: 1px solid var(--line);
  border-radius: 8px; box-shadow: 0 6px 18px rgb(0 0 0 / .35);
}
.block--new { border-color: var(--new); }
.block--existing { border-color: var(--locked); }
.block--dragging { opacity: .85; }

.block__head {
  display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
  padding: 8px 10px; border-bottom: 1px solid var(--line); cursor: grab;
}
.block__head:active { cursor: grabbing; }
.block__name { font-weight: 700; }

.badge { font-size: 11px; padding: 1px 6px; border-radius: 10px; border: 1px solid var(--line); color: var(--muted); }
.badge--new { color: var(--new); border-color: var(--new); }
.badge--locked { color: var(--locked); border-color: var(--locked); }
.badge--change { color: var(--accent); border-color: var(--accent); }

.block__remove {
  margin-left: auto; background: transparent; color: var(--muted);
  border: 1px solid transparent; border-radius: 4px;
  padding: 0 6px; cursor: pointer; font-size: 13px; line-height: 1.6;
}
.block__remove:hover { color: var(--error); border-color: var(--error); }

.block__fields { list-style: none; margin: 0; padding: 4px 0; max-height: 320px; overflow: auto; }
.field { display: flex; gap: 8px; align-items: baseline; padding: 3px 10px; font-size: 13px; }
.field__name { flex: 1; }
.field__type { color: var(--muted); font-size: 12px; }
.field__req { color: var(--error); }
.field__new { color: var(--new); font-size: 10px; font-weight: 700; }
.field__translatable { font-size: 12px; }
.field--empty { color: var(--muted); font-style: italic; }

.block__foot { display: flex; gap: 6px; padding: 8px 10px; border-top: 1px solid var(--line); }
.block__foot button {
  flex: 1; background: transparent; color: var(--muted);
  border: 1px solid var(--line); border-radius: 4px; padding: 4px; cursor: pointer;
}
.block__foot button:hover { color: var(--text); border-color: var(--accent); }

.modal-overlay {
  position: fixed; inset: 0; z-index: 10;
  background: rgb(0 0 0 / .6); display: grid; place-items: center; padding: 24px;
}
.modal {
  width: min(760px, 100%); max-height: 88vh; display: flex; flex-direction: column;
  background: var(--panel); border: 1px solid var(--line); border-radius: 10px;
}
.modal__head, .modal__foot {
  display: flex; align-items: center; gap: 12px; padding: 12px 16px;
}
.modal__head { border-bottom: 1px solid var(--line); }
.modal__foot { border-top: 1px solid var(--line); }
.modal__head button, .modal__foot button {
  background: var(--bg); color: var(--text); border: 1px solid var(--line);
  border-radius: 4px; padding: 5px 12px; cursor: pointer;
}
.modal__foot button.primary { background: var(--accent); border-color: var(--accent); color: #08111e; font-weight: 600; }
.modal__foot button.danger { color: var(--error); border-color: var(--error); }
.modal__foot .modal__hint { flex: 1; color: var(--muted); }
.modal__steps { display: flex; gap: 6px; margin-left: auto; }
.modal__steps span {
  width: 22px; height: 22px; display: grid; place-items: center; font-size: 12px;
  border-radius: 50%; border: 1px solid var(--line); color: var(--muted);
}
.modal__steps span.on { background: var(--accent); border-color: var(--accent); color: #08111e; font-weight: 700; }
.modal__body { padding: 16px; overflow: auto; display: flex; flex-direction: column; gap: 14px; }
.modal__body input, .modal__body select, .modal__body textarea {
  background: var(--bg); color: var(--text); border: 1px solid var(--line);
  border-radius: 4px; padding: 6px 8px; font: inherit;
}
.stack { display: flex; flex-direction: column; gap: 4px; }
.stack small, .muted, .fe-note { color: var(--muted); font-size: 12px; }
fieldset { border: 1px solid var(--line); border-radius: 6px; padding: 10px 12px; }
.base-contract { background: var(--bg); border: 1px dashed var(--line); border-radius: 6px; padding: 8px 10px; font-size: 12px; }
.base-contract code { color: var(--muted); margin-right: 4px; }
.base-contract__note { display: block; margin-top: 6px; color: var(--muted); }
.field-editor { border: 1px solid var(--line); border-radius: 6px; padding: 10px; display: flex; flex-direction: column; gap: 8px; }
.field-editor__row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.field-editor__row label { display: flex; gap: 5px; align-items: center; color: var(--muted); font-size: 12px; }
.fe-locked { color: var(--locked); font-size: 12px; }
.field-removal-note {
  background: var(--bg); border: 1px solid var(--locked); border-radius: 6px;
  padding: 8px 10px; font-size: 12px; color: var(--locked);
}
.fe-purpose { flex: 1 1 100%; }
.advanced-toggle { display: flex; gap: 6px; align-items: center; color: var(--muted); font-size: 12px; }
.review { width: 100%; border-collapse: collapse; font-size: 13px; }
.review th, .review td { text-align: left; padding: 5px 8px; border-bottom: 1px solid var(--line); }
.review th { color: var(--muted); font-weight: 600; }

.form-designer { display: flex; flex-direction: column; gap: 10px; }
.fd-tabs { display: flex; flex-direction: column; gap: 10px; }
.fd-tab { border: 1px solid var(--accent); border-radius: 6px; padding: 8px 10px; display: flex; flex-direction: column; gap: 8px; }
.fd-tab__head, .fd-section__head { display: flex; gap: 8px; align-items: center; }
.fd-tab__head .fd-label { font-weight: 700; }
.fd-section { border: 1px solid var(--line); border-radius: 6px; padding: 8px 10px; display: flex; flex-direction: column; gap: 6px; }
.fd-label { flex: 1; }
.fd-fields { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.fd-field {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: space-between;
  background: var(--bg); border: 1px solid var(--line); border-radius: 4px; padding: 6px 8px; font-size: 12px;
}
.fd-field__label { flex: 1 1 auto; }
.fd-field__controls { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.fd-field__controls label { display: flex; gap: 4px; align-items: center; color: var(--muted); }
.fd-field__controls select, .fd-field__controls button { font-size: 12px; padding: 3px 6px; }
.fd-tray { border: 1px dashed var(--line); border-radius: 6px; padding: 8px 10px; }
.fd-tray ul { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.fd-tray-item { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 12px; }
.form-review { border: 1px solid var(--line); border-radius: 6px; padding: 8px 12px; }

.list-designer { display: flex; flex-direction: column; gap: 10px; }
.ld-columns { display: flex; flex-direction: column; gap: 6px; }
.ld-column {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: space-between;
  background: var(--bg); border: 1px solid var(--line); border-radius: 4px; padding: 6px 8px; font-size: 12px;
}
.ld-column__label { flex: 1 1 auto; }
.ld-column__controls { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.ld-column__controls label { display: flex; gap: 4px; align-items: center; color: var(--muted); }
.ld-column__controls select, .ld-column__controls button { font-size: 12px; padding: 3px 6px; }
.ld-tray { border: 1px dashed var(--line); border-radius: 6px; padding: 8px 10px; }
.ld-tray ul { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.ld-tray-item { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 12px; }
.ld-menu { border: 1px solid var(--line); border-radius: 6px; padding: 10px; display: flex; flex-direction: column; gap: 10px; }
.list-review { border: 1px solid var(--line); border-radius: 6px; padding: 8px 12px; }

.behaviour-group { border: 1px solid var(--line); border-radius: 6px; padding: 8px 12px; margin-bottom: 10px; }
.behaviour-group legend { padding: 0 4px; color: var(--muted); font-size: 12px; }
.behaviour-item { padding: 6px 0; border-top: 1px solid var(--line); }
.behaviour-item:first-child { border-top: none; }
.behaviour-item__check { display: flex; gap: 8px; align-items: center; cursor: pointer; }
.behaviour-item__hint { display: block; margin: 2px 0 0 24px; color: var(--muted); font-size: 12px; }
.behaviour-detail { display: flex; flex-direction: column; gap: 8px; margin: 8px 0 2px 24px; }
.behaviour-review ul { margin: 4px 0 0; padding-left: 20px; }
.behaviour-review li { margin-bottom: 4px; }

.status { margin-left: auto; color: var(--muted); }
.status--error { color: var(--error); }
.generated {
  width: 100%; background: var(--bg); color: var(--text);
  border: 1px solid var(--line); border-radius: 6px; padding: 10px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px;
}
.modal__body h3 { margin: 0; font-size: 13px; color: var(--muted); }
.modal__body ul { margin: 0; padding-left: 20px; }
.modal__body li { margin-bottom: 6px; }

/* A callout that has to outrank an ordinary bullet in the same panel — the
   offline-unverified warning (Phase 4 Task 2) is deliberately not just
   another line in "Worth a look": Generate is warned, not blocked, while
   offline, so this is the one thing standing between that choice and someone
   shipping a spec they believe was checked against the database.

   --alter is the same idea one step along: this specification changes columns
   that already hold data. Amber rather than red because, unlike offline, the
   spec WAS checked — it is the answer that needs a decision, not a gap in
   what is known. It is deliberately not tied to the drift banner: dismissing
   a notification must never be able to switch this off. */
.callout { margin: 0; padding: 8px 12px; border-radius: 6px; font-weight: 600; font-size: 13px; }
.callout--offline { background: rgb(241 70 104 / .12); border: 1px solid var(--error); color: var(--error); }
.callout--alter { background: rgb(176 135 42 / .16); border: 1px solid var(--locked); color: var(--locked); }

#import-filter {
  width: 100%; background: var(--bg); color: var(--text);
  border: 1px solid var(--line); border-radius: 4px; padding: 7px 9px; font: inherit;
}
.pick-list { list-style: none; margin: 0; padding: 0; max-height: 320px; overflow: auto; }
.pick-list li { margin: 0 0 4px; }
.pick-list button {
  width: 100%; display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  background: var(--bg); color: var(--text); border: 1px solid var(--line);
  border-radius: 4px; padding: 7px 10px; cursor: pointer; text-align: left; font: inherit;
}
.pick-list button:hover:not(:disabled) { border-color: var(--accent); }
.pick-list button:disabled { opacity: .45; cursor: default; }
.pick-list small { color: var(--muted); font-size: 11px; white-space: nowrap; }