/* Workbench components. One block per component, prefixed wb-. */

/* ---------- Shell ---------- */
.wb-shell { min-height: 100vh; display: flex; flex-direction: column; }

.wb-shell__body {
  flex: 1;
  display: grid;
  grid-template-columns: var(--wb-sidebar-w) minmax(0, 1fr) var(--wb-inspector-w);
  grid-template-areas: "explorer main inspector";
  align-items: stretch;
}
.wb-shell__explorer { grid-area: explorer; }
.wb-shell__main { grid-area: main; min-width: 0; background: var(--wb-surface-editor); display: flex; flex-direction: column; }
.wb-shell__inspector { grid-area: inspector; }

@media (max-width: 1180px) {
  .wb-shell__body {
    grid-template-columns: var(--wb-sidebar-w) minmax(0, 1fr);
    grid-template-areas: "explorer main" "explorer inspector";
  }
  .wb-shell__inspector { border-left: none !important; border-top: 1px solid var(--wb-line); }
}
@media (max-width: 760px) {
  .wb-shell__body { grid-template-columns: minmax(0, 1fr); grid-template-areas: "explorer" "main" "inspector"; }
}

/* ---------- Title bar ---------- */
.wb-titlebar {
  position: sticky; top: 0; z-index: 20;
  background: var(--wb-surface-chrome);
  border-bottom: 1px solid var(--wb-line);
}
.wb-titlebar__inner {
  min-height: var(--wb-titlebar-h);
  padding: var(--wb-space-2) var(--wb-space-5);
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--wb-space-3) var(--wb-space-6);
}
.wb-titlebar__nav { display: flex; flex-wrap: wrap; gap: 2px; font-size: var(--wb-text-md); }
.wb-titlebar__nav a {
  padding: 0 var(--wb-space-3); min-height: var(--wb-hit);
  display: inline-flex; align-items: center; border-radius: var(--wb-radius-md);
  color: var(--wb-text-secondary);
  transition: color var(--wb-fast) var(--wb-ease), background var(--wb-fast) var(--wb-ease);
}
.wb-titlebar__nav a:hover { color: var(--wb-text); background: var(--wb-surface-raised); }
.wb-titlebar__nav a.active { color: var(--wb-text); box-shadow: inset 0 -2px 0 var(--wb-accent); border-radius: 0; }
.wb-titlebar__search { flex: 1 1 240px; display: flex; justify-content: center; }

/* ---------- Brand ---------- */
.wb-brand { display: flex; align-items: center; gap: var(--wb-space-3); min-height: var(--wb-hit); }
.wb-brand:hover { color: var(--wb-text); }
.wb-brand__tile {
  width: 34px; height: 34px; border-radius: var(--wb-radius-md);
  background: #ECE6DA; display: inline-flex; align-items: center; justify-content: center;
}
.wb-brand__name { font-weight: 600; font-size: var(--wb-text-base); letter-spacing: var(--wb-tracking-title); }
.wb-brand__name span { font-weight: 400; color: var(--wb-text-muted); }

/* ---------- Command search ---------- */
.wb-command { position: relative; flex: 0 1 420px; }
.wb-command__field {
  display: flex; align-items: center; gap: var(--wb-space-3);
  background: var(--wb-surface-editor); border: 1px solid var(--wb-line); border-radius: var(--wb-radius-lg);
  padding: 0 var(--wb-space-3); min-height: 40px;
  transition: border-color var(--wb-fast) var(--wb-ease);
}
.wb-command__field:focus-within { border-color: var(--wb-accent); }
.wb-command__input { flex: 1; min-width: 0; background: transparent; border: none; outline: none; font-size: var(--wb-text-md); }
.wb-command__input::placeholder { color: var(--wb-text-faint); }
.wb-command__input:focus-visible { box-shadow: none; }
.wb-command__results {
  position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 30;
  list-style: none; margin: 0; padding: var(--wb-space-1);
  background: var(--wb-surface-raised); border: 1px solid var(--wb-line-strong); border-radius: var(--wb-radius-lg);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
}
.wb-command__result a {
  display: grid; grid-template-columns: 16px minmax(0, 1fr) auto; gap: var(--wb-space-3); align-items: center;
  padding: var(--wb-space-2) var(--wb-space-3); border-radius: var(--wb-radius-md); min-height: var(--wb-hit);
}
.wb-command__result a:hover, .wb-command__result a[aria-selected="true"] { background: var(--wb-surface-hover); color: var(--wb-text); }
.wb-command__result small { color: var(--wb-text-muted); font-size: var(--wb-text-sm); }
.wb-command__empty { padding: var(--wb-space-3); color: var(--wb-text-muted); font-size: var(--wb-text-sm); }

/* ---------- Kbd & chips ---------- */
.wb-kbd {
  font-family: var(--wb-font-mono); font-size: var(--wb-text-xs); color: var(--wb-text-muted);
  border: 1px solid var(--wb-line-strong); border-radius: var(--wb-radius-sm); padding: 1px 6px; white-space: nowrap;
}
.wb-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.wb-chip {
  font-family: var(--wb-font-mono); font-size: var(--wb-text-xs);
  border: 1px solid var(--wb-line-strong); border-radius: var(--wb-radius-sm); padding: 3px 8px;
}
.wb-chip--accent { border-color: transparent; background: var(--wb-accent-wash); color: var(--wb-accent); }

/* ---------- Buttons ---------- */
.wb-button {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--wb-space-2);
  min-height: 46px; padding: 0 var(--wb-space-5); border-radius: var(--wb-radius-lg);
  font-size: var(--wb-text-base); font-weight: 500; border: 1px solid transparent; cursor: pointer;
  transition: background var(--wb-fast) var(--wb-ease), border-color var(--wb-fast) var(--wb-ease), color var(--wb-fast) var(--wb-ease);
}
.wb-button--primary { background: var(--wb-accent); color: var(--wb-accent-ink); font-weight: 600; }
.wb-button--primary:hover { background: var(--wb-accent-hover); color: var(--wb-accent-ink); }
.wb-button--secondary { border-color: var(--wb-line-strong); background: transparent; }
.wb-button--secondary:hover { border-color: var(--wb-line-hover); background: var(--wb-surface-raised); color: var(--wb-text); }
.wb-button--ghost { background: transparent; color: var(--wb-text-secondary); }
.wb-button--ghost:hover { background: var(--wb-surface-raised); color: var(--wb-text); }
.wb-button--small { min-height: 40px; padding: 0 var(--wb-space-4); font-size: var(--wb-text-md); }
.wb-buttons { display: flex; flex-wrap: wrap; gap: var(--wb-space-3); }

/* ---------- Explorer ---------- */
.wb-explorer {
  background: var(--wb-surface-sidebar); border-right: 1px solid var(--wb-line);
  padding: var(--wb-space-5) var(--wb-space-3);
}
.wb-explorer__inner { position: sticky; top: calc(var(--wb-titlebar-h) + var(--wb-space-5)); }
.wb-tree { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1px; font-size: var(--wb-text-md); }
.wb-tree a {
  display: flex; align-items: center; gap: var(--wb-space-3);
  padding: 0 var(--wb-space-3); min-height: 38px; border-radius: var(--wb-radius-md);
  color: var(--wb-text-secondary);
  transition: background var(--wb-fast) var(--wb-ease);
}
.wb-tree a:hover { background: var(--wb-surface-hover); color: var(--wb-text); }
.wb-tree a.active { background: var(--wb-surface-hover); color: var(--wb-text); box-shadow: inset 2px 0 0 var(--wb-accent); }
.wb-tree__count { margin-left: auto; font-family: var(--wb-font-mono); font-size: var(--wb-text-xs); color: var(--wb-text-faint); }
.wb-tree + .wb-eyebrow { margin-top: var(--wb-space-8); }

@media (max-width: 760px) {
  .wb-explorer { border-right: none; border-bottom: 1px solid var(--wb-line); padding: var(--wb-space-3); }
  .wb-explorer__inner { position: static; }
  .wb-explorer .wb-eyebrow { display: none; }
  .wb-tree { flex-direction: row; overflow-x: auto; }
  .wb-tree a { white-space: nowrap; min-height: var(--wb-hit); }
  .wb-tree--secondary { display: none; }
}

/* ---------- Eyebrow (mono section label) ---------- */
.wb-eyebrow {
  font-family: var(--wb-font-mono); font-weight: 500; font-size: var(--wb-text-2xs);
  letter-spacing: var(--wb-tracking-label); text-transform: uppercase; color: var(--wb-text-muted);
  margin: 0 0 var(--wb-space-3);
}
.wb-explorer .wb-eyebrow { padding: 0 var(--wb-space-3); }
.wb-eyebrow--doc { font-size: var(--wb-text-xs); margin: var(--wb-space-18) 0 var(--wb-space-4); }

/* ---------- Tabs ---------- */
.wb-tabs {
  display: flex; overflow-x: auto; background: var(--wb-surface-sidebar);
  border-bottom: 1px solid var(--wb-line); font-size: var(--wb-text-sm);
  position: sticky; top: var(--wb-titlebar-h); z-index: 10;
}
.wb-tab { display: flex; align-items: stretch; border-right: 1px solid var(--wb-line); }
.wb-tab a { display: inline-flex; align-items: center; gap: var(--wb-space-2); padding: 0 var(--wb-space-2) 0 var(--wb-space-4); min-height: 42px; color: var(--wb-text-muted); white-space: nowrap; }
.wb-tab button {
  border: none; background: transparent; color: var(--wb-text-faint); cursor: pointer;
  width: 32px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--wb-radius-sm);
}
.wb-tab button:hover { color: var(--wb-text); background: var(--wb-surface-hover); }
.wb-tab--active { background: var(--wb-surface-editor); box-shadow: inset 0 2px 0 var(--wb-accent); }
.wb-tab--active a { color: var(--wb-text); }

/* ---------- Document ---------- */
.wb-doc { padding: var(--wb-space-12) clamp(var(--wb-space-6), 5vw, var(--wb-space-18)) var(--wb-space-16); max-width: var(--wb-doc-max); width: 100%; }
.wb-breadcrumb { font-family: var(--wb-font-mono); font-size: var(--wb-text-sm); color: var(--wb-text-muted); margin-bottom: var(--wb-space-5); }
.wb-breadcrumb ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--wb-space-2); }
.wb-breadcrumb li + li::before { content: "/"; color: var(--wb-text-separator); margin-right: var(--wb-space-2); }
.wb-breadcrumb a:hover { color: var(--wb-accent); }
.wb-title { font-weight: 600; letter-spacing: var(--wb-tracking-display); line-height: var(--wb-leading-tight); }
.wb-title--display { font-size: var(--wb-text-display); }
.wb-title--page { font-size: var(--wb-text-3xl); letter-spacing: -0.03em; }
.wb-lede { margin-top: var(--wb-space-6); max-width: 640px; font-size: var(--wb-text-lg); line-height: var(--wb-leading-body); color: var(--wb-text-secondary); }
.wb-doc .wb-buttons { margin-top: var(--wb-space-8); }
.wb-section-title { font-size: var(--wb-text-2xl); font-weight: 600; letter-spacing: -0.02em; line-height: var(--wb-leading-snug); margin-bottom: var(--wb-space-4); }

/* ---------- Panels ---------- */
.wb-panel-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--wb-space-3); }
.wb-panel {
  background: var(--wb-surface-raised); border: 1px solid var(--wb-line); border-radius: var(--wb-radius-xl);
  overflow: hidden; display: flex; flex-direction: column;
  transition: border-color var(--wb-fast) var(--wb-ease);
}
a.wb-panel:hover { border-color: var(--wb-line-hover); color: var(--wb-text); }
.wb-panel__header {
  display: flex; justify-content: space-between; align-items: center; gap: var(--wb-space-3);
  padding: var(--wb-space-2) var(--wb-space-4); min-height: 40px; border-bottom: 1px solid var(--wb-line);
  font-family: var(--wb-font-mono); font-size: var(--wb-text-xs); color: var(--wb-text-muted);
}
.wb-panel__label { display: inline-flex; align-items: center; gap: var(--wb-space-2); }
.wb-panel__body { padding: var(--wb-space-5) var(--wb-space-4); display: flex; flex-direction: column; gap: var(--wb-space-2); flex: 1; }
.wb-panel__title { font-size: var(--wb-text-xl); font-weight: 600; letter-spacing: var(--wb-tracking-title); line-height: var(--wb-leading-snug); }
.wb-panel__text { font-size: var(--wb-text-md); line-height: 1.55; color: var(--wb-text-secondary); }
.wb-panel__footer { padding: var(--wb-space-3) var(--wb-space-4); border-top: 1px solid var(--wb-line); font-size: var(--wb-text-sm); color: var(--wb-text-muted); }

/* ---------- Rows (two-column data list) ---------- */
.wb-rows { border: 1px solid var(--wb-line); border-radius: var(--wb-radius-xl); overflow: hidden; margin: 0; }
.wb-rows__row {
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 2fr); gap: var(--wb-space-4);
  padding: var(--wb-space-4) var(--wb-space-5); border-top: 1px solid var(--wb-line);
}
.wb-rows__row:first-child { border-top: none; }
.wb-rows__row:nth-child(odd) { background: var(--wb-surface-stripe); }
.wb-rows dt { font-weight: 600; }
.wb-rows dd { margin: 0; color: var(--wb-text-secondary); font-size: var(--wb-text-base); }
@media (max-width: 560px) { .wb-rows__row { grid-template-columns: minmax(0, 1fr); gap: var(--wb-space-1); } }

/* ---------- Steps ---------- */
.wb-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--wb-space-3); counter-reset: step; }
.wb-steps li { border-top: 2px solid var(--wb-line-strong); padding-top: var(--wb-space-4); counter-increment: step; }
.wb-steps li:first-child { border-top-color: var(--wb-accent); }
.wb-steps li::before { content: counter(step, decimal-leading-zero); display: block; font-family: var(--wb-font-mono); font-size: var(--wb-text-xs); color: var(--wb-text-muted); margin-bottom: var(--wb-space-2); }
.wb-steps strong { display: block; font-weight: 600; margin-bottom: var(--wb-space-1); }
.wb-steps span { color: var(--wb-text-secondary); font-size: var(--wb-text-md); }

/* ---------- Inspector ---------- */
.wb-inspector {
  background: var(--wb-surface-sidebar); border-left: 1px solid var(--wb-line);
  padding: var(--wb-space-5);
}
.wb-inspector__inner { position: sticky; top: calc(var(--wb-titlebar-h) + var(--wb-space-5)); display: flex; flex-direction: column; gap: var(--wb-space-8); }
@media (max-width: 1180px) { .wb-inspector__inner { position: static; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); } }
.wb-props { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--wb-space-3) var(--wb-space-4); font-size: var(--wb-text-sm); margin: 0; }
.wb-props dt { color: var(--wb-text-muted); }
.wb-props dd { margin: 0; }
.wb-log { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--wb-space-3); font-size: var(--wb-text-sm); line-height: 1.45; }
.wb-log li { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: var(--wb-space-3); }
.wb-log time, .wb-log .wb-log__date { font-family: var(--wb-font-mono); color: var(--wb-text-muted); }

/* ---------- Status bar ---------- */
.wb-statusbar {
  position: sticky; bottom: 0; z-index: 20;
  background: var(--wb-surface-chrome); border-top: 1px solid var(--wb-line);
  font-family: var(--wb-font-mono); font-size: var(--wb-text-xs); color: var(--wb-text-muted);
}
.wb-statusbar__inner { min-height: var(--wb-statusbar-h); padding: 0 var(--wb-space-5); display: flex; flex-wrap: wrap; align-items: center; gap: var(--wb-space-1) var(--wb-space-6); }
.wb-statusbar a { color: var(--wb-text-muted); }
.wb-statusbar a:hover { color: var(--wb-accent); }
.wb-statusbar__end { margin-left: auto; }
.wb-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--wb-accent); display: inline-block; }
.wb-status { display: inline-flex; align-items: center; gap: var(--wb-space-2); color: var(--wb-text); }

/* ---------- Timeline ---------- */
.wb-timeline__bar { display: flex; gap: 3px; height: 10px; border-radius: var(--wb-radius-sm); overflow: hidden; margin-bottom: var(--wb-space-5); }
.wb-timeline__bar span { background: var(--wb-line-strong); }
.wb-timeline__bar span:last-child { background: var(--wb-accent); }
.wb-timeline__eras { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: var(--wb-space-5); font-size: var(--wb-text-md); }
.wb-timeline__eras time { display: block; font-family: var(--wb-font-mono); font-size: var(--wb-text-xs); color: var(--wb-text-muted); }
.wb-timeline__eras strong { display: block; font-weight: 600; margin: 2px 0; }
.wb-timeline__eras span { color: var(--wb-text-secondary); }

/* ---------- Placeholder slot (content not yet written) ---------- */
.wb-slot {
  border: 1px dashed var(--wb-line-strong); border-radius: var(--wb-radius-xl);
  padding: var(--wb-space-6); color: var(--wb-text-muted); font-size: var(--wb-text-md);
  display: flex; flex-direction: column; gap: var(--wb-space-2); min-height: 160px; justify-content: flex-end;
}
.wb-slot strong { color: var(--wb-text); font-size: var(--wb-text-lg); font-weight: 600; }

/* ---------- Design-system page only ---------- */
.ds-swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--wb-space-3); }
.ds-swatch { border: 1px solid var(--wb-line); border-radius: var(--wb-radius-xl); overflow: hidden; background: var(--wb-surface-raised); }
.ds-swatch__chip { display: block; height: 64px; border-bottom: 1px solid var(--wb-line); }
.ds-swatch figcaption { padding: var(--wb-space-3); display: flex; flex-direction: column; gap: 2px; font-size: var(--wb-text-xs); color: var(--wb-text-muted); }
.ds-swatch code, .ds-type code, .ds-icons code { font-family: var(--wb-font-mono); font-size: var(--wb-text-xs); color: var(--wb-text); }
.ds-type .wb-rows__row { align-items: baseline; }
.ds-type code { color: var(--wb-text-muted); }
.ds-icons { display: flex; flex-wrap: wrap; gap: var(--wb-space-4); }
.ds-icons figure { display: flex; flex-direction: column; align-items: center; gap: var(--wb-space-2); }
.ds-icons__tile { width: 80px; height: 80px; display: inline-flex; align-items: center; justify-content: center; background: var(--wb-surface-raised); border: 1px solid var(--wb-line); border-radius: var(--wb-radius-xl); }

/* When the title bar wraps onto two rows, stop pinning the tabs underneath it */
@media (max-width: 1100px) {
  .wb-tabs { position: static; }
}

/* Phones: one row of navigation (the explorer strip), nothing pinned but the content */
@media (max-width: 760px) {
  .wb-titlebar, .wb-statusbar { position: static; }
  .wb-titlebar__inner { justify-content: space-between; padding: var(--wb-space-2) var(--wb-space-4); }
  .wb-titlebar__nav, .wb-tabs, .wb-command .wb-kbd { display: none; }
  .wb-titlebar__search { order: 3; flex-basis: 100%; }
  .wb-command { flex-basis: 100%; }
  .wb-statusbar__end { margin-left: 0; }
}

/* ---------- Forms ---------- */
.wb-contact { margin-top: var(--wb-space-10); max-width: 640px; }
.wb-form { display: flex; flex-direction: column; gap: var(--wb-space-5); }
.wb-field { display: flex; flex-direction: column; gap: var(--wb-space-2); }
.wb-field label { font-size: var(--wb-text-md); font-weight: 500; }
.wb-input {
  width: 100%; min-height: var(--wb-hit); padding: var(--wb-space-3);
  background: var(--wb-surface-sidebar); border: 1px solid var(--wb-line-strong); border-radius: var(--wb-radius-lg);
  font-size: var(--wb-text-base); transition: border-color var(--wb-fast) var(--wb-ease);
}
textarea.wb-input { resize: vertical; line-height: var(--wb-leading-body); }
.wb-input::placeholder { color: var(--wb-text-faint); }
.wb-input:hover { border-color: var(--wb-line-hover); }
.wb-input:focus-visible { border-color: var(--wb-accent); }
.wb-input.invalid { border-color: var(--wb-danger); }
.validation-message, .wb-form__error { color: var(--wb-danger); font-size: var(--wb-text-sm); }
.wb-button:disabled { opacity: 0.6; cursor: progress; }
.wb-honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.wb-notice {
  display: flex; flex-direction: column; gap: var(--wb-space-1);
  padding: var(--wb-space-5); background: var(--wb-surface-raised);
  border: 1px solid var(--wb-line); border-top: 2px solid var(--wb-accent); border-radius: var(--wb-radius-xl);
}
.wb-notice strong { font-size: var(--wb-text-xl); font-weight: 600; }
.wb-notice span { color: var(--wb-text-secondary); font-size: var(--wb-text-base); }

/* ---------- Admin ---------- */
.wb-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--wb-space-3); margin: var(--wb-space-8) 0 var(--wb-space-4); }
.wb-doc .wb-toolbar__actions { margin-top: 0; }
.wb-check { display: inline-flex; align-items: center; gap: var(--wb-space-2); min-height: var(--wb-hit); cursor: pointer; }
.wb-check input { width: 18px; height: 18px; accent-color: var(--wb-accent); }
.wb-empty { padding: var(--wb-space-8); color: var(--wb-text-muted); border: 1px dashed var(--wb-line-strong); border-radius: var(--wb-radius-xl); text-align: center; }
.wb-table-wrap { overflow-x: auto; border: 1px solid var(--wb-line); border-radius: var(--wb-radius-xl); }
.wb-table { width: 100%; min-width: 720px; border-collapse: collapse; font-size: var(--wb-text-md); }
.wb-table th { padding: var(--wb-space-3) var(--wb-space-4); text-align: left; font-family: var(--wb-font-mono); font-size: var(--wb-text-xs); font-weight: 500; color: var(--wb-text-muted); }
.wb-table td { padding: var(--wb-space-3) var(--wb-space-4); border-top: 1px solid var(--wb-line); vertical-align: middle; }
.wb-table td.mono { font-size: var(--wb-text-xs); color: var(--wb-text-muted); white-space: nowrap; }
.wb-table small { display: block; color: var(--wb-text-muted); font-size: var(--wb-text-sm); overflow-wrap: break-word; }
.wb-table td:nth-child(2) { min-width: 180px; }
.wb-table__snippet { max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--wb-text-secondary); }
.wb-table__actions { white-space: nowrap; text-align: right; }
.wb-table__row--muted td { background: var(--wb-surface-stripe); color: var(--wb-text-muted); }
.wb-table__row--muted .wb-table__snippet { color: var(--wb-text-muted); }
.wb-message__meta { margin-top: var(--wb-space-6); }
.wb-message__body {
  margin-top: var(--wb-space-6); padding: var(--wb-space-5); max-width: 72ch;
  background: var(--wb-surface-raised); border: 1px solid var(--wb-line); border-radius: var(--wb-radius-xl);
  font-size: var(--wb-text-base); white-space: pre-wrap; overflow-wrap: anywhere;
}