.menu-hint {
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: var(--type-sm);
}

.menu-sep {
  height: var(--hairline);
  margin: var(--space-1) var(--space-2);
  background: var(--line-hairline);
}

.inspector {
  position: fixed;

  top: var(--panel-top, var(--topbar-height));
  right: 0;

  bottom: var(--panel-bottom, var(--dock-inset));

  width: var(--chrome-inspector-w, var(--panel-width));
  display: flex;
  flex-direction: column;
  background: var(--surface-raised);
  border-left: var(--hairline) solid var(--line-hairline);
  font-family: var(--font-ui);
}

.inspector[aria-hidden="true"],
.arrange-panel[aria-hidden="true"] {
  visibility: hidden;
  pointer-events: none;
  transform: translateX(100%);
  transition: transform var(--motion-normal) var(--motion-ease),
    visibility 0s linear var(--motion-normal);
}

.inspector[aria-hidden="false"],
.arrange-panel[aria-hidden="false"] {
  visibility: visible;
  transform: none;
  transition: transform var(--motion-normal) var(--motion-ease);
}

body.zen .inspector,
body.zen .arrange-panel { display: none; }

@media (prefers-reduced-motion: reduce) {
  .inspector[aria-hidden="true"],
  .inspector[aria-hidden="false"],
  .arrange-panel[aria-hidden="true"],
  .arrange-panel[aria-hidden="false"] {
    transition: none;
  }
}

.insp-head {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-3) var(--space-3) var(--space-4);
  border-bottom: var(--hairline) solid var(--line-hairline);
}

.insp-head-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}

.insp-title {
  margin: 0;
  color: var(--text-primary);
  font-size: var(--type-sm);
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.insp-counts {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  margin-left: auto;
}
.insp-counts[hidden] { display: none; }

.insp-count {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 0 var(--space-2);
  min-height: var(--chrome-min-hit, 26px);
  color: var(--text-secondary);
  font-family: var(--font-mono);
  font-size: var(--type-sm);
}
.insp-count.is-empty { color: var(--text-muted); }
.insp-count[aria-expanded='true'] { color: var(--accent); }
.insp-count .icon { width: 14px; height: 14px; }

.insp-id-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1) var(--space-2);
}
.insp-id-row[hidden] { display: none; }

.insp-id {
  display: inline-flex;
  align-items: baseline;
  gap: var(--space-1);
  padding: 0 var(--space-2);
  min-height: 18px;
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: var(--type-sm);
  text-align: left;

  position: relative;
}
.insp-id:hover:not(:disabled) { color: var(--text-primary); }
.insp-id:disabled { opacity: 0.7; }

.insp-id-key {
  color: var(--text-muted);
  font-family: var(--font-ui);
  letter-spacing: 0.04em;
}

.insp-id-value {
  color: var(--text-secondary);
  white-space: nowrap;
}

.insp-copied {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 2px);
  transform: translateX(-50%);
  padding: 1px var(--space-1);
  border-radius: var(--radius-sm);
  background: var(--surface-raised);
  border: var(--hairline) solid var(--line-hairline);
  color: var(--text-muted);
  font-family: var(--font-ui);

  font-size: var(--type-sm);
  line-height: 1.4;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity 120ms ease-out;
}
.insp-copied.is-on { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .insp-copied { transition: none; }
}
.insp-id-dotted .insp-id-value { color: var(--text-primary); }
.insp-id:hover:not(:disabled) .insp-id-value { color: var(--text-primary); }

.insp-dirty-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.insp-dirty-row[hidden] { display: none; }

.insp-dirty {
  flex: 1 1 auto;
  min-width: 0;
  color: var(--state-dirty);
  font-size: var(--type-sm);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.insp-dirty::before {
  content: '● ';
  color: var(--state-dirty);
}

.insp-save,
.insp-revert {
  padding: 0 var(--space-2);
  min-height: 20px;
  font-size: var(--type-sm);
}
.insp-save { color: var(--accent); }

.inspector.is-dirty { border-left-color: var(--state-dirty); }

.insp-body {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.insp-body[hidden] { display: none; }

.insp-foot {
  flex: 0 0 auto;
  padding: var(--space-2) var(--space-3) var(--space-2) var(--space-4);
  border-top: var(--hairline) solid var(--line-hairline);
}

.insp-auto {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--chrome-min-hit, 26px);
  color: var(--text-secondary);
  font-size: var(--type-sm);
  cursor: pointer;
}
.insp-auto:hover { color: var(--text-primary); }
.insp-auto-box { accent-color: var(--accent); }

.insp-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.insp-label {
  color: var(--text-muted);
  font-size: var(--type-sm);
  letter-spacing: 0.03em;
}

.insp-text,
.insp-select {
  width: 100%;
  padding: var(--space-2);
  background: var(--surface-inset);
  color: var(--text-primary);
  border: var(--hairline) solid var(--line-hairline);
  border-radius: var(--radius-sm);
  font-family: var(--font-ui);
  font-size: var(--type-sm);
  resize: vertical;
}

.insp-text:focus,
.insp-select:focus {
  outline: none;
  border-color: var(--accent-quiet);
}

.insp-facts {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-1) var(--space-3);
  margin: 0;
  padding-top: var(--space-3);
  border-top: var(--hairline) solid var(--line-hairline);
  font-family: var(--font-mono);
  font-size: var(--type-sm);
}

.insp-facts dt { color: var(--text-muted); }
.insp-facts dd { margin: 0; color: var(--text-secondary); overflow-wrap: anywhere; }

.insp-size {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.insp-size-x { color: var(--text-muted); }

.insp-size-box {
  box-sizing: content-box;
  width: calc(var(--size-digits) * 1ch);
  height: 2ch;
  max-width: 100%;
  padding: var(--space-1);
  background: var(--surface-inset);
  color: var(--text-primary);
  border: var(--hairline) solid var(--line-hairline);
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: var(--type-sm);
  text-align: center;
}

.insp-size-box:focus {
  outline: none;
  border-color: var(--accent-quiet);
}

.insp-size-box[data-refusing="yes"] {
  border-color: var(--state-danger);
  color: var(--state-danger);
}

.insp-size-box:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.insp-label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.insp-label-seats {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

.insp-mic {
  width: 22px;
  height: 22px;
  min-height: 22px;
}

.insp-ta-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border: var(--hairline) solid transparent;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-secondary);
  font-size: var(--type-md);
  line-height: 1;
  cursor: ew-resize;
  user-select: none;
  touch-action: none;
}
.insp-ta-arrow[data-axis="boxH"] { cursor: ns-resize; }
.insp-label-row .insp-ta-arrow[data-axis="boxW"] { margin-left: var(--space-2); }
.insp-label-row .insp-ta-arrow[data-axis="boxH"] { margin-right: auto; }
.insp-ta-arrow:hover {
  color: var(--accent);
  border-color: var(--accent-quiet);
  background: color-mix(in srgb, var(--accent) 14%, transparent);
}

.insp-ta-arrow[data-dragging="yes"] {
  color: var(--accent);
  border-color: var(--accent);
}
.insp-ta-arrow:focus-visible {
  outline: var(--hairline) solid var(--accent);
  outline-offset: 1px;
}

.insp-format-open {
  width: 22px;
  height: 22px;
  min-height: 22px;
  padding: 0;
  font-family: var(--font-ui);
  font-size: var(--type-sm);
  font-weight: 600;
  line-height: 1;
}

.insp-format-menu {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-1);
}

.insp-format-row {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: var(--space-1);
}

.insp-format-label {
  flex: 0 0 auto;
  min-width: 34px;
  color: var(--text-muted);
  font-size: var(--type-sm);
  letter-spacing: 0.03em;
}

.insp-format-btn,
.insp-format-size,
.insp-format-case {
  min-height: 22px;
  padding: 0 var(--space-2);
  font-size: var(--type-sm);
  line-height: 1;
  white-space: nowrap;
}

.insp-format-btn { min-width: 28px; }
.insp-format-btn.is-strong { font-weight: 800; }
.insp-format-btn.is-em { font-style: italic; }
.insp-format-btn.is-strike { text-decoration: line-through; }
.insp-format-btn.is-mark {
  background: color-mix(in srgb, var(--state-dirty) 38%, var(--surface-raised));
}

.insp-format-colour {
  width: 28px;
  height: 22px;
  padding: 0;
  border: var(--hairline) solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: transparent;
  cursor: pointer;
}

.insp-format-colour::-webkit-color-swatch-wrapper { padding: 2px; }
.insp-format-colour::-webkit-color-swatch {
  border: none;
  border-radius: calc(var(--radius-sm) - 1px);
}
.insp-format-btn.is-code { font-family: var(--font-mono); }
.insp-format-btn.is-clear { min-width: 0; color: var(--text-secondary); }

.insp-format-size.is-large { font-size: calc(var(--type-sm) * 1.05); }
.insp-format-size.is-larger { font-size: calc(var(--type-sm) * 1.15); }
.insp-format-size.is-huge { font-size: calc(var(--type-sm) * 1.25); }

.insp-format-case { min-width: 26px; font-family: var(--font-mono); }

@keyframes insp-mic-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

.insp-mic[aria-pressed='true'] {
  animation: insp-mic-pulse 1.1s var(--motion-ease) infinite;
}

@media (prefers-reduced-motion: reduce) {
  .insp-mic[aria-pressed='true'] { animation: none; }
}

.insp-section {
  padding-top: var(--space-3);
  border-top: var(--hairline) solid var(--line-hairline);
}

.insp-summary {
  color: var(--text-muted);
  font-size: var(--type-sm);
  letter-spacing: 0.03em;
  cursor: pointer;
}
.insp-summary:hover { color: var(--text-secondary); }

.insp-section-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding-top: var(--space-3);
}

.insp-mem-bar {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.insp-mem-bar[hidden] { display: none; }

.insp-mem-bulk,
.insp-mem-browse {
  height: 22px;
  min-height: 22px;
  padding: 0 var(--space-2);
  font-size: var(--type-sm);
}

.insp-mem-browse { margin-left: auto; }

.insp-mem-tick {
  flex: 0 0 auto;
  width: 13px;
  height: 13px;
  margin: 0;
  cursor: pointer;
  accent-color: var(--accent);
}

.insp-mem-list {
  --insp-mem-row-h: 26px;

  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  max-height: calc(var(--insp-mem-row-h) * 5 + var(--space-2) * 4);
  overflow-y: auto;

  overflow-x: hidden;
  overscroll-behavior: contain;
}

.insp-mem-row {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--insp-mem-row-h);
  padding: 0 var(--space-2);
  background: var(--surface-inset);
  border: var(--hairline) solid var(--line-hairline);
  border-radius: var(--radius-sm);
}

.insp-mem-tag {
  flex: 1 1 auto;
  min-width: 0;
  padding: 0;
  border: 0;
  background: none;
  text-align: left;
  color: var(--text-primary);
  font-family: var(--font-mono);
  font-size: var(--type-sm);
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.insp-mem-tag:hover { color: var(--accent); }

.insp-mem-scope {
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: var(--type-sm);
}

.insp-mem-delete {
  width: 18px;
  height: 18px;
  min-height: 18px;
  color: var(--text-muted);
}
.insp-mem-delete:hover:not(:disabled) { color: var(--state-danger); }

.insp-mem-empty {
  margin: 0;
  color: var(--text-muted);
  font-size: var(--type-sm);
}

.insp-mem-actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-2);
}

.insp-mem-add[hidden] { display: none; }

.insp-mem-scope-pick { flex: 1 1 auto; min-width: 0; display: flex; }
.insp-mem-actions .insp-select { flex: 1 1 auto; width: auto; }

.insp-line,
.insp-md {
  resize: vertical;
  line-height: var(--leading-normal);
  overflow-wrap: anywhere;
}

.insp-line {
  white-space: pre-wrap;
  overflow-x: hidden;
  overflow-y: auto;
  min-height: calc(var(--leading-normal) * 3em);
  max-height: 40vh;
}

.insp-md {
  min-height: 72px;
  max-height: 40vh;
  overflow-y: auto;
  white-space: pre-wrap;
}

.insp-line:empty::before,
.insp-md:empty::before {
  content: attr(data-placeholder);
  color: var(--text-muted);
}

.insp-md > * { margin: 0; }
.insp-md h1, .insp-md h2, .insp-md h3,
.insp-md h4, .insp-md h5, .insp-md h6 {
  color: var(--text-primary);
  font-size: var(--type-md);
  font-weight: 600;
  line-height: var(--leading-tight);
}
.insp-md h3, .insp-md h4, .insp-md h5, .insp-md h6 { font-size: var(--type-sm); }
.insp-md ul, .insp-md ol { padding-left: var(--space-5); }
.insp-md blockquote {
  padding-left: var(--space-3);
  border-left: var(--hairline) solid var(--line-strong);
  color: var(--text-secondary);
}
.insp-md pre {
  padding: var(--space-2);
  background: var(--surface-sunken);
  border-radius: var(--radius-sm);
  overflow-x: auto;
}
.insp-md code,
.insp-line code {
  font-family: var(--font-mono);
  color: var(--accent);
}
.insp-md a,
.insp-line a { color: var(--accent); }

.insp-md s,
.insp-line s { text-decoration: line-through; }
.insp-md mark,
.insp-line mark {
  padding: 0 0.15em;
  border-radius: 2px;
  background: color-mix(in srgb, var(--state-dirty) 38%, var(--surface-inset));
  color: inherit;
}

.insp-line[data-md-h='1'] { font-size: 1.5em; font-weight: 650; }
.insp-line[data-md-h='2'] { font-size: 1.3em; font-weight: 650; }
.insp-line[data-md-h='3'] { font-size: 1.15em; font-weight: 600; }
.insp-line[data-md-h='4'],
.insp-line[data-md-h='5'],
.insp-line[data-md-h='6'] { font-size: 1.05em; font-weight: 600; }
.insp-md [data-md='blank'] { min-height: var(--space-4); }

.insp-sections {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.insp-sections[hidden] { display: none; }

.insp-att-row {
  padding: var(--space-2);
  background: var(--surface-inset);
  border: var(--hairline) solid var(--line-hairline);
  border-radius: var(--radius-sm);
}

.insp-att-row {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 0;
}

.insp-att-name {
  color: var(--text-primary);
  font-size: var(--type-sm);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.insp-att-meta {
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: var(--type-sm);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.insp-att-meta.is-missing { color: var(--state-danger); }

.insp-att-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  padding-top: var(--space-1);
}
.insp-att-actions:empty { display: none; }

.insp-att-act {
  padding: 0 var(--space-2);
  font-size: var(--type-sm);
}
.insp-att-act:hover:not(:disabled) { color: var(--text-primary); }

.insp-companion {
  display: block;
  width: 100%;
  padding: var(--space-2);
  color: var(--text-primary);
  font-size: var(--type-sm);
  text-align: left;
  overflow-wrap: anywhere;
}

.arrange-panel {
  position: fixed;
  top: var(--panel-top, var(--topbar-height));
  right: 0;

  bottom: var(--panel-bottom, var(--dock-inset));
  width: var(--chrome-arrange-w, var(--panel-width));
  display: flex;
  flex-direction: column;
  background: var(--surface-raised);
  border-left: var(--hairline) solid var(--line-hairline);
  overflow: hidden;
}

.arrange-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-bottom: var(--hairline) solid var(--line-hairline);
}

.arrange-title {
  margin: 0;
  font-family: var(--font-ui);
  font-size: var(--type-sm);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-primary);
}

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

.arrange-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.arrange-label {
  flex: 0 0 auto;
  min-width: 84px;
  font-size: var(--type-sm);
  color: var(--text-muted);
}

.arrange-select-mount { flex: 1 1 auto; min-width: 0; }
.arrange-select { width: 100%; }
.arrange-mode-glyph {
  flex: 0 0 auto;
  display: inline-flex;
  color: var(--text-muted);
}

.arrange-row-slider .arrange-slider {
  flex: 1 1 auto;
  min-width: 0;
  accent-color: var(--accent);
}
.arrange-box {
  margin: 0;
  accent-color: var(--accent);
}

.arrange-readout {
  flex: 0 0 auto;
  width: 104px;
  text-align: right;
  font-family: var(--font-mono);
  font-size: var(--type-sm);
  color: var(--text-secondary);
}

.arrange-check {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0 var(--space-2);
  align-items: start;
}
.arrange-check-label {
  font-size: var(--type-sm);
  color: var(--text-primary);
}

.arrange-check[data-available='no'] { opacity: 0.55; }
.arrange-hint {
  grid-column: 2;
  margin: 2px 0 0;
  font-size: var(--type-sm);
  color: var(--text-muted);
}

.arrange-go { align-self: flex-start; }
.arrange-said {
  margin: 0;
  min-height: 1.2em;
  font-size: var(--type-sm);
  color: var(--text-muted);
}