/* Board chrome: toolbar, sidebar, frames, frame captions.
   Nothing here is product UI: every frame is an iframe of the real app, which
   brings its own stylesheets, so this file only sizes and frames it. */

:root {
  --board-bg: #ECEDE8;
  --board-sunk: #E2E3DD;
  --board-grid: rgba(20, 30, 24, .07);
  --board-toolbar-h: 56px;
}
:root[data-theme="dark"] {
  --board-bg: #121614;
  --board-sunk: #1B211E;
  --board-grid: rgba(0, 0, 0, .5);
}

[hidden] { display: none !important; }

html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--board-bg);
  color: var(--text);
  font-family: var(--font-family);
  font-size: var(--body-size);
  line-height: var(--body-line);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, p, ul, ol, figure, table { margin: 0; }

/* ---------- Toolbar ---------- */
.toolbar {
  position: sticky;
  top: 0;
  z-index: 60;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 18px;
  min-height: var(--board-toolbar-h);
  padding: 9px 18px;
  background: var(--surface);
  box-shadow: 0 1px 0 var(--track), 0 6px 20px var(--board-grid);
}
.toolbar__brand { display: inline-flex; align-items: center; gap: 10px; }
.toolbar__brand img { width: 26px; height: 26px; border-radius: 8px; }
.toolbar__brand-text { display: grid; }
.toolbar__eyebrow { font-size: 11px; line-height: 13px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); }
.toolbar__title { font-size: 15px; line-height: 20px; font-weight: 600; letter-spacing: -0.4px; }
.toolbar__spacer { flex: 1; }
.toolbar__field { display: inline-flex; align-items: center; gap: 8px; }
.toolbar__label { font-size: 11px; line-height: 13px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); }
.toolbar__search {
  min-width: 230px;
  min-height: 36px;
  padding: 0 12px;
  border: 0;
  border-radius: var(--r-sm);
  background: var(--surface-neutral);
  color: var(--text);
  font: inherit;
  font-size: 14px;
  box-shadow: var(--shadow-button);
}
.toolbar__search:focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-ring-offset); }
.toolbar__source { font-size: 12px; color: var(--text-faint); }

/* Segmented controls */
.seg { display: inline-flex; padding: 3px; gap: 3px; border-radius: var(--r-sm); background: var(--surface-neutral); box-shadow: var(--shadow-button); }
.seg__btn {
  border: 0;
  border-radius: 8px;
  min-height: 30px;
  padding: 0 12px;
  background: transparent;
  color: var(--text-muted);
  font: inherit;
  font-size: 13px;
  font-weight: 500;
}
.seg__btn[aria-pressed="true"] {
  background: var(--surface);
  color: var(--accent-deep);
  font-weight: 600;
  box-shadow: var(--shadow-button);
}
.seg__btn:focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-ring-offset); }

/* ---------- Shell ---------- */
.shell {
  display: grid;
  grid-template-columns: 306px minmax(0, 1fr);
  align-items: start;
}
.sidebar {
  position: sticky;
  top: var(--board-toolbar-h);
  max-height: calc(100vh - var(--board-toolbar-h));
  overflow-y: auto;
  padding: 18px 16px 40px;
  background: var(--board-sunk);
  border-right: 1px solid var(--track);
}
.sidebar__head { margin-bottom: 14px; }
.sidebar__head h2 { font-size: 13px; line-height: 18px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); }
.sidebar__head p { font-size: 12.5px; line-height: 18px; color: var(--text-faint); margin-top: 6px; }
.sidebar__group + .sidebar__group { margin-top: 16px; }
.sidebar__group-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 8px 6px;
}
.sidebar__group-name { font-size: 13px; font-weight: 600; letter-spacing: -0.2px; }
.sidebar__group-count {
  margin-left: auto;
  min-width: 22px;
  padding: 1px 7px;
  border-radius: var(--r-pill);
  background: var(--surface);
  color: var(--text-muted);
  font-size: 11.5px;
  font-weight: 600;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.sidebar__list { display: grid; gap: 2px; }
.sidebar__item {
  display: flex;
  align-items: baseline;
  gap: 8px;
  width: 100%;
  text-align: start;
  border: 0;
  padding: 7px 8px 7px 10px;
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 13.5px;
  line-height: 19px;
}
.sidebar__item:hover { background: var(--hover); }
.sidebar__item.is-active { background: var(--accent-soft); color: var(--accent-deep); font-weight: 600; }
.sidebar__item-title { flex: 1; min-width: 0; }
.sidebar__item:focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-ring-offset); }
.sidebar__empty { padding: 8px 10px; font-size: 13px; color: var(--text-faint); }

.badge {
  flex-shrink: 0;
  padding: 1px 6px;
  border-radius: 6px;
  font-size: 10px;
  line-height: 15px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: var(--surface-neutral);
  color: var(--text-muted);
}
.badge--core { background: var(--accent-soft); color: var(--accent-deep); }
.badge--shipped { background: var(--gold-soft); color: var(--gold-ink); }
.badge--phone { background: var(--surface); color: var(--text-faint); }

/* ---------- Stage and frames ---------- */
.stage { display: grid; gap: 30px; padding: 22px 22px 80px; min-width: 0; }
.frame { scroll-margin-top: calc(var(--board-toolbar-h) + 12px); }
.frame:focus { outline: none; }
.frame__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; margin-bottom: 4px; }
.frame__group { font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); }
.frame__title { font-size: 16px; font-weight: 600; letter-spacing: -0.4px; }
.frame__id {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11.5px;
  color: var(--text-faint);
}
.frame__badges { display: inline-flex; gap: 6px; margin-left: auto; }
.frame__note { flex-basis: 100%; max-width: 940px; font-size: 13px; line-height: 19px; color: var(--text-muted); }
.frame__assumed {
  flex-basis: 100%;
  max-width: 940px;
  padding: 6px 10px;
  border-left: 3px solid var(--gold);
  border-radius: 4px;
  background: var(--gold-soft);
  color: var(--gold-ink);
  font-size: 13px;
  line-height: 19px;
}
.frame__assumed b { font-weight: 600; }
.frame__scroll { overflow-x: auto; padding-bottom: 4px; }
.frame__canvas {
  box-sizing: border-box;
  margin-inline: auto;
  background: var(--bg);
  /* No radius and no overflow clip on a frame: a rounded ancestor clip changes
     the pixels the iframe paints in its corners, and the frame's pixels are
     meant to be the app's pixels, unaltered. The app itself draws any rounding
     the product has. */
  box-shadow: 0 1px 2px var(--board-grid), 0 14px 36px var(--board-grid);
  zoom: var(--board-zoom, 1);
}
/* A frame is a window of an exact size. The app's media queries key off this
   width, so these numbers are the viewport the reviewer is reviewing — they are
   not a scale factor. The board's own zoom scales the rendered result without
   changing the layout inside it. */
.frame__canvas--desktop { width: 1440px; height: 900px; }
.frame__canvas--phone { width: 390px; height: 844px; }
.frame__app {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  background: var(--bg);
}
/* The caption sits directly under the frame it describes. */
.frame__route {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
  margin-top: 8px;
  font-size: 12px;
  color: var(--text-faint);
}
.frame__route code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  padding: 1px 6px;
  border-radius: 6px;
  background: var(--surface-neutral);
  color: var(--text-muted);
}

[data-view="focus"] .frame { display: none; }
[data-view="focus"] .frame.is-active { display: block; }
[data-view="focus"] .stage { padding-top: 26px; }

@media (max-width: 1100px) {
  .shell { grid-template-columns: 1fr; }
  .sidebar { position: static; max-height: none; border-right: 0; border-bottom: 1px solid var(--track); }
}

/* A screen whose render() throws still gets a frame, with the error readable. */
.frame__error { padding: 24px; color: var(--danger-ink); font-size: 14px; }