/* web/styles.css */
:root {
  --buncss-light: initial;
  --buncss-dark: ;
  color-scheme: light;
  --ground: #e9ecf0;
  --surface: #fff;
  --surface-2: #f5f6f8;
  --rule: #d9dde3;
  --rule-strong: #c3c9d1;
  --ink: #14181e;
  --ink-2: #333a45;
  --muted: #5b6370;
  --shell: #14181e;
  --shell-ink: #eef0f3;
  --shell-muted: #a3abb7;
  --shell-rule: #2b313a;
  --accent: #2c56c9;
  --accent-soft: #e5ebfa;
  --ok: #1d7448;
  --warn: #8d5300;
  --err: #b42318;
  --selection: #cfdaf6;
  --slot-l: 90%;
  --slot-line-l: 52%;
  --slot-ink-l: 34%;
  --t-header: #5b6370;
  --t-bullet: #9aa2ad;
  --t-comment: #5b6370;
  --t-name: #14181e;
  --t-qualifier: #5b6370;
  --t-punct: #9aa2ad;
  --t-desc: #333a45;
  --t-keyword: #3552a8;
  --t-concept: #0d6656;
  --t-type: #0d6656;
  --t-string: #7c4a0f;
  --t-number: #9a3b2b;
  --t-json: #4f5763;
  --t-meta: #5b6370;
  --sans: "IBM Plex Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --radius: 4px;
  --ease-out: cubic-bezier(.16, 1, .3, 1);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --buncss-light: ;
    --buncss-dark: initial;
    color-scheme: dark;
    --ground: #0c0e11;
    --surface: #14171c;
    --surface-2: #181c22;
    --rule: #262b33;
    --rule-strong: #353c46;
    --ink: #e6e9ee;
    --ink-2: #c4c9d2;
    --muted: #949cab;
    --shell: #0a0c0f;
    --shell-ink: #e6e9ee;
    --shell-muted: #8a93a1;
    --shell-rule: #22272e;
    --accent: #7f9ef2;
    --accent-soft: #1c2640;
    --ok: #5cbf8a;
    --warn: #dda24a;
    --err: #f07a6e;
    --selection: #2a3a63;
    --slot-l: 24%;
    --slot-line-l: 60%;
    --slot-ink-l: 82%;
    --t-header: #949cab;
    --t-bullet: #5d6573;
    --t-comment: #949cab;
    --t-name: #e6e9ee;
    --t-qualifier: #949cab;
    --t-punct: #5d6573;
    --t-desc: #c4c9d2;
    --t-keyword: #93abf0;
    --t-concept: #6fd1bd;
    --t-type: #6fd1bd;
    --t-string: #e2b47a;
    --t-number: #f0a08f;
    --t-json: #a7aebb;
    --t-meta: #949cab;
  }
}

* {
  box-sizing: border-box;
}

html, body {
  height: 100%;
}

body {
  background: var(--ground);
  color: var(--ink);
  font: 14px / 1.5 var(--sans);
  display: flex;
  -webkit-font-smoothing: antialiased;
  flex-direction: column;
  margin: 0;
}

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

* {
  scrollbar-width: thin;
  scrollbar-color: var(--rule-strong) transparent;
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

code {
  font-family: var(--mono);
  font-size: .9em;
}

button {
  font: 500 12.5px / 1 var(--sans);
  border-radius: var(--radius);
  border: 1px solid var(--shell-rule);
  color: var(--shell-ink);
  cursor: pointer;
  transition: background-color .12s var(--ease-out), border-color .12s var(--ease-out);
  background: none;
  height: 28px;
  padding: 0 10px;
}

button:hover {
  background: var(--shell-rule);
}

button.quiet {
  color: var(--shell-muted);
}

button.quiet:hover {
  color: var(--shell-ink);
}

.topbar {
  position: relative;
  display: flex;
  background: var(--shell);
  color: var(--shell-ink);
  align-items:  center;
  gap: 20px;
  height: 48px;
  padding: 0 16px;
}

.brand {
  display: flex;
  align-items:  center;
  gap: 9px;
}

.mark {
  color: var(--shell-ink);
  width: 18px;
  height: 18px;
}

.brand h1 {
  letter-spacing: -.005em;
  margin: 0;
  font-size: 14px;
  font-weight: 600;
}

.status {
  display: flex;
  color: var(--shell-muted);
  flex: 1;
  align-items:  center;
  gap: 8px;
  min-width: 0;
  font-size: 13px;
}

.status .indicator {
  background: var(--shell-muted);
  flex: none;
  width: 6px;
  height: 6px;
}

.status[data-phase="synced"] .indicator {
  background: var(--ok);
}

.status[data-phase="typing"] .indicator, .status[data-phase="thinking"] .indicator, .status[data-phase="healing"] .indicator {
  background: var(--accent);
}

.status[data-phase="error"] .indicator {
  background: var(--err);
}

.status[data-phase="offline"] .indicator {
  box-shadow: inset 0 0 0 1px var(--shell-muted);
  background: none;
}

.status[data-phase="error"] #status-text {
  color: var(--shell-ink);
}

#status-text {
  color: var(--shell-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.status-meta {
  font: 12px var(--mono);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-variant-numeric: tabular-nums;
}

.actions {
  display: flex;
  gap: 6px;
}

.topbar:after {
  content: "";
  position: absolute;
  background: linear-gradient(90deg, transparent, var(--accent) 45%, var(--accent) 55%, transparent);
  opacity: 0;
  transition: opacity .2s var(--ease-out);
  background-repeat: no-repeat;
  background-size: 40% 100%;
  height: 2px;
  inset: auto 0 0;
}

body[data-busy] .topbar:after {
  opacity: 1;
  animation: sweep 1.4s var(--ease-out) infinite;
}

@keyframes sweep {
  from {
    background-position: -40% 0;
  }

  to {
    background-position: 140% 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  body[data-busy] .topbar:after {
    animation: none;
    background-size: 100% 100%;
  }
}

.grid {
  display: grid;
  background: var(--rule);
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: minmax(280px, 1fr) minmax(280px, 1fr);
  flex: 1;
  gap: 1px;
  min-height: 0;
}

@media (max-width: 1100px) {
  .grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: none;
    grid-auto-rows: minmax(320px, auto);
  }
}

@media (max-width: 700px) {
  .grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .topbar {
    flex-wrap: wrap;
    gap: 8px 16px;
    height: auto;
    padding: 10px 16px;
  }

  .status {
    flex-basis: 100%;
    order: 3;
  }
}

.pane {
  display: flex;
  background: var(--surface);
  flex-direction: column;
  min-height: 0;
}

.pane > header {
  display: flex;
  border-bottom: 1px solid var(--rule);
  background: var(--surface-2);
  align-items: baseline;
  gap: 10px;
  height: 36px;
  padding: 10px 14px 0;
}

.pane h2 {
  color: var(--ink);
  white-space: nowrap;
  margin: 0;
  font-size: 12.5px;
  font-weight: 600;
}

.hint {
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
}

.badge {
  font: 12px var(--mono);
  white-space: nowrap;
  margin-left: auto;
}

.badge.ok {
  color: var(--ok);
}

.badge.err {
  color: var(--err);
}

.pane.stale .view, .pane.stale .registry, .pane.stale .editor {
  opacity: .5;
  transition: opacity .2s var(--ease-out);
}

.editor {
  position: relative;
  flex: 1;
  min-height: 0;
}

.editor .backdrop, .editor textarea {
  position: absolute;
  overflow: auto;
  white-space: pre-wrap;
  overflow-wrap: break-word;
  font: inherit;
  letter-spacing: inherit;
  tab-size: 2;
  border: 0;
  margin: 0;
  padding: 14px;
  inset: 0;
}

.editor .backdrop {
  color: var(--ink);
  pointer-events: none;
}

.editor textarea {
  resize: none;
  color: #0000;
  caret-color: var(--accent);
  outline: none;
  background: none;
}

.editor textarea::selection {
  background: var(--selection);
  color: #0000;
}

.editor textarea:read-only {
  cursor: default;
}

.editor.prose {
  font: 15.5px / 1.7 var(--sans);
}

.editor.code, .view.code {
  font: 12.5px / 1.7 var(--mono);
}

.view {
  overflow: auto;
  white-space: pre-wrap;
  overflow-wrap: break-word;
  flex: 1;
  margin: 0;
  padding: 14px;
}

.notes {
  color: var(--muted);
  border-top: 1px solid var(--rule);
  background: var(--surface-2);
  padding: 7px 14px;
  font-size: 12px;
}

.notes:empty {
  display: none;
}

.notes .warn, .warn {
  color: var(--warn);
}

mark.slot {
  color: inherit;
  box-shadow: inset 0 -1.5px 0 hsl(var(--h) 55% var(--slot-line-l));
  transition: background-color .12s var(--ease-out), box-shadow .12s var(--ease-out);
  background: none;
  border-radius: 1px;
}

mark.slot span {
  color: inherit;
}

mark.slot-placeholder {
  color: hsl(var(--h) 45% var(--slot-ink-l));
  box-shadow: none;
}

mark.slot-missing {
  text-decoration: underline wavy var(--err);
  text-underline-offset: 3px;
}

mark.slot.active {
  background: hsl(var(--h) 60% var(--slot-l));
  box-shadow: inset 0 -2px 0 hsl(var(--h) 60% calc(var(--slot-line-l)  - 8%));
  color: hsl(var(--h) 55% var(--slot-ink-l));
}

.t-header {
  color: var(--t-header);
}

.t-bullet {
  color: var(--t-bullet);
}

.t-comment {
  color: var(--t-comment);
  font-style: italic;
}

.t-name {
  color: var(--t-name);
  font-weight: 500;
}

.t-qualifier {
  color: var(--t-qualifier);
}

.t-punct {
  color: var(--t-punct);
}

.t-desc {
  color: var(--t-desc);
}

.t-keyword {
  color: var(--t-keyword);
}

.t-type {
  color: var(--t-type);
}

.t-concept {
  color: var(--t-concept);
  font-weight: 500;
}

.t-string {
  color: var(--t-string);
}

.t-number {
  color: var(--t-number);
}

.t-json {
  color: var(--t-json);
}

.t-meta {
  color: var(--t-meta);
}

.reader {
  font: 14.5px / 1.65 var(--sans);
  white-space: normal;
  color: var(--ink-2);
  padding: 16px 18px;
}

.reader mark.slot {
  box-shadow: none;
  color: inherit;
  background: none;
}

.reader mark.slot.active {
  background: hsl(var(--h) 60% var(--slot-l));
  box-shadow: inset 0 -2px 0 hsl(var(--h) 60% calc(var(--slot-line-l)  - 8%));
  color: hsl(var(--h) 55% var(--slot-ink-l));
}

.r-row {
  padding-left: calc(var(--depth) * 1.25rem);
}

.r-definition {
  color: var(--ink);
  margin-top: 1.1rem;
  font-size: 15px;
}

.r-row:first-child, .r-comment + .r-definition {
  margin-top: 0;
}

.r-comment + .r-definition {
  margin-top: .15rem;
}

.r-name, .r-ref {
  color: var(--ink);
  font-weight: 600;
}

.r-comment {
  color: var(--muted);
  margin-top: 1.1rem;
  font-style: italic;
}

.r-row.r-comment:first-child {
  margin-top: 0;
}

.r-attribute {
  padding-left: calc(var(--depth) * 1.25rem + 1rem);
  text-indent: -1rem;
  margin-top: .2rem;
}

.r-bullet {
  display: inline-block;
  text-indent: 0;
  color: var(--t-bullet);
  width: 1rem;
}

.r-attr-name {
  color: var(--ink);
  font-weight: 500;
}

.r-qualifier {
  color: var(--muted);
  font-size: 13px;
}

.r-sep {
  color: var(--t-bullet);
}

.r-constraint {
  color: var(--ink-2);
}

.r-directive, .r-other {
  color: var(--muted);
  margin-top: .2rem;
  font-size: 13px;
}

.error-line {
  color: var(--err);
  margin: 0 0 10px;
  font-size: 13px;
}

.code-fallback {
  font: 12.5px / 1.7 var(--mono);
  white-space: pre-wrap;
  color: var(--ink-2);
  margin: 0;
}

.registry-scroll {
  overflow: auto;
  flex: 1;
}

.registry {
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
  width: 100%;
}

.registry th {
  position: sticky;
  text-align: left;
  color: var(--muted);
  background: var(--surface);
  border-bottom: 1px solid var(--rule);
  padding: 7px 14px;
  font-size: 12px;
  font-weight: 500;
  top: 0;
}

.registry td {
  border-bottom: 1px solid var(--rule);
  vertical-align: middle;
  padding: 5px 14px;
}

.registry tr {
  transition: background-color .12s var(--ease-out);
}

.registry tr.active td {
  background: hsl(var(--h) 60% var(--slot-l) / .55);
}

.registry .slot-name {
  display: flex;
  font: 12.5px var(--mono);
  white-space: nowrap;
  color: var(--ink);
  align-items:  center;
  gap: 8px;
}

.registry .swatch {
  background: var(--rule-strong);
  transition: background-color .12s var(--ease-out);
  flex: none;
  width: 8px;
  height: 8px;
}

.registry tr.active .swatch {
  background: hsl(var(--h) 60% var(--slot-line-l));
}

.registry input {
  font: 12.5px var(--mono);
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  transition: border-color .12s var(--ease-out);
  width: 100%;
  height: 28px;
  padding: 0 8px;
}

.registry input:hover {
  border-color: var(--rule-strong);
}

.registry input:focus {
  outline: none;
  border-color: hsl(var(--h) 55% var(--slot-line-l));
  box-shadow: 0 0 0 2px hsl(var(--h) 60% var(--slot-l));
}

.registry input:disabled {
  opacity: .55;
}

.registry input.empty {
  border-color: var(--err);
}

.used {
  display: flex;
  font: 11.5px var(--mono);
  color: var(--muted);
  white-space: nowrap;
  align-items:  center;
  gap: 8px;
}

.chip {
  color: var(--rule-strong);
}

.chip.on {
  color: var(--ink-2);
}

.bytes {
  color: var(--muted);
}

.unused-remove {
  color: var(--muted);
  border-color: var(--rule);
  height: 20px;
  padding: 0 6px;
}

.unused-remove:hover {
  background: var(--surface-2);
  color: var(--ink);
}

.tabs {
  display: flex;
  gap: 2px;
  margin-left: 4px;
}

.tabs a {
  color: var(--shell-muted);
  text-decoration: none;
  border-radius: var(--radius);
  transition: color .12s var(--ease-out), background-color .12s var(--ease-out);
  padding: 5px 10px;
  font-size: 13px;
  font-weight: 500;
}

.tabs a:hover, .tabs a[aria-current="page"] {
  color: var(--shell-ink);
  background: var(--shell-rule);
}

mark.slot-folded {
  box-shadow: none;
  text-decoration: underline dotted hsl(var(--h) 45% var(--slot-line-l));
  text-underline-offset: 3px;
}

.i-row {
  display: grid;
  grid-template-columns: minmax(7rem, max-content) 1fr;
  padding: .3rem 0 .3rem calc(var(--depth, 0) * 1.25rem);
  border-bottom: 1px solid var(--rule);
  column-gap: 1rem;
}

.i-title {
  display: block;
  border-bottom: 1px solid var(--rule-strong);
  color: var(--ink);
  padding: 0 0 .6rem;
  font-size: 15px;
}

.i-title strong {
  font-weight: 600;
}

.i-key {
  color: var(--muted);
  padding-top: 1px;
  font-size: 13px;
}

.i-val {
  color: var(--ink);
  overflow-wrap: anywhere;
  min-width: 0;
}

.i-literal {
  font: 13px var(--mono);
  color: var(--ink-2);
}

.i-fold {
  font: 500 12px / 1.5 var(--sans);
  color: var(--accent);
  border: 1px solid var(--rule);
  background: var(--surface-2);
  height: auto;
  margin-left: 2px;
  padding: 0 5px;
}

.i-fold:hover {
  background: var(--accent-soft);
  border-color: var(--accent);
}

.i-invalid .i-key {
  color: var(--err);
}

.i-invalid, .i-invalid + .i-issue {
  background: color-mix(in srgb, var(--err) 6%, transparent);
}

.i-issue {
  padding: .15rem 0 .4rem calc(var(--depth, 0) * 1.25rem + .5rem);
  color: var(--err);
  border-bottom: 1px solid var(--rule);
  font-size: 12.5px;
}

.i-folded {
  color: var(--t-string);
}