/* See test/hidden-guard.test.js. Repeated per-file on purpose rather than
   relied upon from base.css: a stylesheet that can render a hidden element
   should not depend on which OTHER stylesheet a page happens to load. */
[hidden] { display: none !important; }

/* Standard Builder. OWNED BY BUILDER A.
   Builds on the tokens in /shared/base.css and adds only what this surface
   needs. Every colour here resolves through a custom property so light and dark
   both work; nothing is hard-coded except the ACI swatches, which are the real
   AutoCAD Color Index values and must not be theme-adjusted. */

:root {
  --ok: #157f3d;
  --ok-bg: rgba(21, 127, 61, 0.10);
  --warn: #9a6300;
  --warn-bg: rgba(154, 99, 0, 0.12);
  --err: #b3261e;
  --err-bg: rgba(179, 38, 30, 0.10);
  --field: #ffffff;
  --field-line: #cfd5df;
  --zebra: rgba(0, 0, 0, 0.022);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ok: #58d68a;
    --ok-bg: rgba(88, 214, 138, 0.12);
    --warn: #e0a53c;
    --warn-bg: rgba(224, 165, 60, 0.14);
    --err: #ff7b72;
    --err-bg: rgba(255, 123, 114, 0.12);
    --field: #10141a;
    --field-line: #333c49;
    --zebra: rgba(255, 255, 255, 0.025);
  }
}

:root[data-theme="dark"] {
  --ok: #58d68a;
  --ok-bg: rgba(88, 214, 138, 0.12);
  --warn: #e0a53c;
  --warn-bg: rgba(224, 165, 60, 0.14);
  --err: #ff7b72;
  --err-bg: rgba(255, 123, 114, 0.12);
  --field: #10141a;
  --field-line: #333c49;
  --zebra: rgba(255, 255, 255, 0.025);
}

.shell-wide { max-width: 86rem; }

/* ── header ───────────────────────────────────────────────────────────── */

.builder-head {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: flex-start;
  justify-content: space-between;
}

.crumb { margin: 0 0 0.15rem; font-size: 0.85rem; }
.crumb a { color: var(--ink-soft); text-decoration: none; }
.crumb a:hover { color: var(--accent); }

.head-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; }

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

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.45rem 0.8rem;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: 0.9rem;
  cursor: pointer;
}

.btn:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.btn:disabled { opacity: 0.35; cursor: default; }

.btn-primary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
  font-weight: 600;
}
.btn-primary:hover { color: var(--accent-ink); filter: brightness(1.06); }

.btn-icon {
  padding: 0.15rem 0.45rem;
  line-height: 1.3;
  font-size: 0.95rem;
}

.in {
  width: 100%;
  min-width: 5rem;
  padding: 0.34rem 0.5rem;
  border: 1px solid var(--field-line);
  border-radius: 6px;
  background: var(--field);
  color: var(--ink);
  font: inherit;
  font-size: 0.88rem;
}

.in:focus { outline: 2px solid var(--accent); outline-offset: -1px; border-color: var(--accent); }
.in:disabled { opacity: 0.5; }
.in-bad { border-color: var(--err); background: var(--err-bg); }
.in-wide { max-width: 34rem; }
.in-delim { width: 4.5rem; min-width: 0; text-align: center; }
.in-regex { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.83rem; }
.in-mod { width: 100%; }

.field { display: block; font-size: 0.82rem; color: var(--ink-soft); }
.field > span { display: block; margin-bottom: 0.15rem; }
.field-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 0.5rem;
}
.field-row > span { display: inline; margin: 0; min-width: 9rem; }

.chk { display: inline-flex; align-items: center; gap: 0.25rem; font-size: 0.78rem; color: var(--ink-soft); }

/* ── start-from + meta ────────────────────────────────────────────────── */

.startfrom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1.5rem;
  padding: 0.75rem 0.9rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}

.startfrom-label { font-size: 0.85rem; font-weight: 600; color: var(--ink-soft); margin-right: 0.2rem; }
.startfrom-note { font-size: 0.8rem; color: var(--ink-soft); margin-left: auto; }
.startfrom label.btn { cursor: pointer; }

.meta { margin-top: 1.25rem; }

/* ── stat bar ─────────────────────────────────────────────────────────── */

.statbar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: stretch;
  margin: 1.25rem 0 0.25rem;
}

.stat {
  flex: 1 1 8rem;
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--line);
  border-left-width: 3px;
  border-radius: 8px;
  background: var(--surface);
}

.stat.good { border-left-color: var(--ok); }
.stat.warn { border-left-color: var(--warn); background: var(--warn-bg); }
.stat.bad { border-left-color: var(--err); background: var(--err-bg); }

.stat-n { display: block; font-size: 1.35rem; font-weight: 650; line-height: 1.1; letter-spacing: -0.02em; }
.stat-k { display: block; font-size: 0.78rem; color: var(--ink-soft); }
.stat-sub { display: block; font-size: 0.72rem; color: var(--ink-soft); opacity: 0.85; }
.stat-src { display: flex; align-items: center; }

.pill {
  display: inline-block;
  padding: 0.1rem 0.5rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 600;
  white-space: nowrap;
}
.pill-ok { background: var(--ok-bg); color: var(--ok); }
.pill-soft { background: var(--warn-bg); color: var(--warn); }

/* ── tabs ─────────────────────────────────────────────────────────────── */

.tabs {
  display: flex;
  gap: 0.25rem;
  margin: 1.5rem 0 0;
  border-bottom: 1px solid var(--line);
}

.tab {
  padding: 0.55rem 0.9rem;
  border: 1px solid transparent;
  border-bottom: none;
  border-radius: 8px 8px 0 0;
  background: none;
  color: var(--ink-soft);
  font: inherit;
  font-size: 0.92rem;
  font-weight: 600;
  cursor: pointer;
  margin-bottom: -1px;
}

.tab:hover { color: var(--ink); }
.tab.is-active {
  background: var(--surface);
  border-color: var(--line);
  color: var(--ink);
  border-bottom: 1px solid var(--surface);
}

.panel { padding: 1.25rem 0 0; }
.panel-lede { margin: 0 0 1rem; color: var(--ink-soft); font-size: 0.9rem; max-width: 60rem; }
.empty { color: var(--ink-soft); font-style: italic; }

/* ── groups + tables ──────────────────────────────────────────────────── */

.group {
  margin-bottom: 1.5rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  overflow: hidden;
}

.group-h {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  margin: 0;
  padding: 0.6rem 0.9rem;
  border-bottom: 1px solid var(--line);
  font-size: 0.9rem;
  letter-spacing: 0.01em;
}

.group-count { font-size: 0.76rem; font-weight: 500; color: var(--ink-soft); }
.group-count.is-warn { color: var(--warn); font-weight: 700; }

.toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
  padding: 0.6rem 0.9rem;
}

.toolbar .field-row { margin: 0; }
.toolbar .field-row > span { min-width: auto; }

.grid { font-size: 0.88rem; }
.grid th {
  padding: 0.4rem 0.55rem;
  text-align: left;
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ink-soft);
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
.grid td { padding: 0.25rem 0.55rem; vertical-align: middle; border-bottom: 1px solid var(--line); }
.grid tbody tr:nth-child(even of :not(.issue-row)) { background: var(--zebra); }
.grid tr.is-set td { background: rgba(31, 111, 235, 0.045); }
.grid tr.is-inert td { opacity: 0.72; }
.grid .rownum { color: var(--ink-soft); font-size: 0.78rem; white-space: nowrap; }

.grid-ol td:first-child { min-width: 16rem; }
.grid-ol td:nth-child(2) { min-width: 12rem; }
.grid-ol td:nth-child(3) { width: 7.5rem; }
.grid-ol td:nth-child(4) { width: 10rem; }
.grid-layers td:nth-child(2) { min-width: 11rem; }
.grid-pat td:nth-child(2) { min-width: 15rem; }
.cell-order { white-space: nowrap; }
.cell-lt { white-space: nowrap; display: flex; align-items: center; gap: 0.35rem; }
.col-doc { color: var(--ink-soft); }

.ol-name { font-weight: 600; }

.tag {
  display: inline-block;
  margin-left: 0.35rem;
  padding: 0.02rem 0.35rem;
  border-radius: 4px;
  background: var(--line);
  color: var(--ink-soft);
  font-size: 0.7rem;
  font-weight: 600;
  white-space: nowrap;
}
.tag-ok { background: var(--ok-bg); color: var(--ok); }
.tag-inert { background: var(--warn-bg); color: var(--warn); }
.tag-quiet { background: none; border: 1px solid var(--line); font-weight: 500; }

.eff { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.82rem; }
.eff-plain { color: var(--ink-soft); font-family: inherit; }
.hint { color: var(--ink-soft); font-size: 0.78rem; margin: 0.15rem 0 0; font-weight: 400; }
.doconly { font-size: 0.76rem; white-space: nowrap; }

.dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-left: 0.35rem; vertical-align: middle; }
.dot-ok { background: var(--ok); }
.dot-warn { background: var(--warn); }

/* ── inline issues ────────────────────────────────────────────────────── */

.issue-row td { padding: 0 0.55rem 0.4rem; background: none !important; }
.row-issues { display: grid; gap: 0.2rem; }

.row-issue, .issue {
  display: flex;
  gap: 0.45rem;
  align-items: flex-start;
  padding: 0.3rem 0.5rem;
  border-radius: 6px;
  font-size: 0.8rem;
  line-height: 1.4;
}

.row-issue strong { font-weight: 600; }
.sev-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; margin-top: 0.35rem; background: var(--ink-soft); }
.sev-error { background: var(--err-bg); color: var(--err); }
.sev-error .sev-dot { background: var(--err); }
.sev-warning { background: var(--warn-bg); color: var(--warn); }
.sev-warning .sev-dot { background: var(--warn); }
.sev-info { background: var(--zebra); }
.row-issue .hint, .issue .hint { color: inherit; opacity: 0.85; }

.notice {
  padding: 0.6rem 0.8rem;
  border-radius: 8px;
  margin-bottom: 1rem;
  font-size: 0.86rem;
}
.notice-warn { background: var(--warn-bg); color: var(--warn); }
.notice-err { background: var(--err-bg); color: var(--err); }

/* ── ACI picker ───────────────────────────────────────────────────────── */

.aci-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.25rem 0.45rem;
  border: 1px solid var(--field-line);
  border-radius: 6px;
  background: var(--field);
  color: var(--ink);
  font: inherit;
  font-size: 0.82rem;
  cursor: pointer;
  white-space: nowrap;
}
.aci-btn:hover { border-color: var(--accent); }
.aci-n { color: var(--ink-soft); }

.sw {
  display: inline-block;
  width: 16px;
  height: 16px;
  border-radius: 3px;
  border: 1px solid var(--field-line);
  flex: none;
}

/* 0 is "unconstrained", not black. It must never read as a colour. */
.sw-none {
  background:
    linear-gradient(45deg, transparent 44%, var(--ink-soft) 44%, var(--ink-soft) 56%, transparent 56%),
    var(--surface);
}

.aci-pop {
  position: absolute;
  z-index: 40;
  width: 21rem;
  max-height: 72vh;
  overflow-y: auto;
  padding: 0.7rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.22);
}

.aci-head { margin: 0 0 0.5rem; font-size: 0.8rem; }

.aci-none {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  width: 100%;
  margin-bottom: 0.5rem;
  padding: 0.35rem 0.5rem;
  border: 1px solid var(--field-line);
  border-radius: 6px;
  background: var(--field);
  color: var(--ink);
  font: inherit;
  font-size: 0.82rem;
  cursor: pointer;
}
.aci-none.is-on, .aci-cell.is-on { outline: 2px solid var(--accent); outline-offset: 1px; }

.aci-grid {
  display: grid;
  grid-template-columns: repeat(var(--aci-cols, 10), 1fr);
  gap: 2px;
  margin-bottom: 0.5rem;
}

.aci-band {
  margin: 0.35rem 0 0.2rem;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.aci-cell {
  aspect-ratio: 1;
  min-height: 13px;
  padding: 0;
  border: 1px solid rgba(128, 128, 128, 0.35);
  border-radius: 2px;
  cursor: pointer;
}
.aci-cell:hover { transform: scale(1.35); position: relative; z-index: 1; }

/* ── convention ───────────────────────────────────────────────────────── */

.convo { padding: 0.6rem 0.9rem; border-top: 1px solid var(--line); }

.regex {
  display: block;
  overflow-x: auto;
  padding: 0.35rem 0.5rem;
  border-radius: 6px;
  background: var(--zebra);
  border: 1px solid var(--line);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.82rem;
  white-space: pre;
}

.preserved { margin: 0.6rem 0.9rem 0.9rem; font-size: 0.82rem; color: var(--ink-soft); }

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

.issues { margin-top: 2rem; }
.issues-head { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.6rem; }
.issues-head h2 { margin: 0; font-size: 1.05rem; }
.issue { margin-bottom: 0.3rem; }
.issue-msg { margin: 0; font-weight: 600; }
.issue-meta { margin: 0.15rem 0 0; font-size: 0.72rem; opacity: 0.8; }
.issue-meta code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }

@media (max-width: 720px) {
  .startfrom-note { margin-left: 0; }
  .field-row { flex-wrap: wrap; }
  .aci-pop { width: calc(100vw - 2rem); }
}