/* Workbench shell. Development tooling, not player-facing chrome (§13.2 #3).

   Layered per DESIGN_SYSTEM.md §7.1: the reset is its own `reset` layer/file
   (`reset.css`, split out by §13.3 step 6); this file is the `app` layer (always
   last). The layer order itself is declared once, in tokens.css.

   §13.2 #3 is resolved (§13.3 step 11c): the shell's old `--wb-*` token system
   is gone. Its fixed dark palette is now primitives in tokens.css
   (`--ui-color-workbench-*`) and its status colours read the shared status
   roles, so this file carries no colour literal and no token of its own. */

@layer app {
/* §13.2 #3: the shell no longer keeps its own `--wb-*` token system or any
   colour literal. Its fixed dark palette is declared as primitives in
   tokens.css (`--ui-color-workbench-*`) and its status colours read the shared
   status roles (success/danger/info), which are theme-independent. The shell
   stays theme-INDEPENDENT on purpose: §2.2 puts application chrome on the
   *platform* theme (not implemented yet, §15.2 #3), so it must not be
   re-skinned by a story theme. */

body {
  background: var(--ui-color-workbench-bg);
  color: var(--ui-color-workbench-text);
  font-family: system-ui, sans-serif;
  min-height: 100vh;
}

/* Touch: "manipulation" drops double-tap-to-zoom and the 300ms click delay
   without disabling pinch-zoom (which user-scalable=no would). Applied to the
   whole page and re-stated on the controls most likely to be double-tapped. */
html,
body {
  touch-action: manipulation;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
}
button,
select,
input,
summary,
.ui-key,
.ui-ring-touch {
  touch-action: manipulation;
}

.wb {
  display: grid;
  grid-template-columns: 320px 1fr;
  min-height: 100vh;
}

@media (max-width: 760px) {
  .wb { grid-template-columns: 1fr; }
}

.wb-side {
  background: var(--ui-color-workbench-panel);
  border-right: 1px solid var(--ui-color-workbench-line);
  padding: var(--ui-space-18);
  overflow-y: auto;
  max-height: 100vh;
}

.wb-side h1 { font-size: var(--ui-font-size-15); letter-spacing: 1px; text-transform: uppercase; color: var(--ui-color-workbench-accent); }
.wb-sub { font-size: var(--ui-font-size-12); color: var(--ui-color-workbench-muted); margin: var(--ui-space-6) 0 var(--ui-space-16); line-height: 1.4; }

.wb-field { display: block; margin-bottom: var(--ui-space-12); }
/* `.wb-field` sets `display: block`, which beats the UA `[hidden]{display:none}`
   on specificity — so a field toggled with `.hidden = true` (the per-widget Skin
   control) would stay visible. Restore the attribute's meaning. */
.wb-field[hidden] { display: none; }
.wb-field span { display: block; font-size: var(--ui-font-size-11); text-transform: uppercase; letter-spacing: 1px; color: var(--ui-color-workbench-muted); margin-bottom: var(--ui-space-4); }
.wb-field select,
.wb-field input {
  width: 100%;
  padding: var(--ui-space-8) var(--ui-space-10);
  font-size: var(--ui-font-size-13);
  background: var(--ui-color-workbench-input);
  color: var(--ui-color-workbench-text);
  border: 1px solid var(--ui-color-workbench-line);
  border-radius: var(--ui-radius-6);
}

.wb-section {
  font-size: var(--ui-font-size-11);
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--ui-color-workbench-muted);
  margin: var(--ui-space-18) 0 var(--ui-space-8);
  padding-bottom: var(--ui-space-4);
  border-bottom: 1px solid var(--ui-color-workbench-line);
}

/* Collapsible cards: <details> keeps the toggle native (no JS, touch-safe).
   The summary is the card header; the body holds the fields. */
.wb-card {
  border: 1px solid var(--ui-color-workbench-line);
  border-radius: var(--ui-radius-8);
  background: var(--ui-color-workbench-card);
  margin-bottom: var(--ui-space-12);
}
.wb-card > summary {
  list-style: none;
  cursor: pointer;
  padding: var(--ui-space-10) var(--ui-space-12);
  font-size: var(--ui-font-size-11);
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--ui-color-workbench-muted);
  display: flex;
  align-items: center;
  justify-content: space-between;
  user-select: none;
}
.wb-card > summary::-webkit-details-marker { display: none; }
.wb-card > summary::after {
  content: "\25B8";
  color: var(--ui-color-workbench-accent);
  transition: transform var(--ui-motion-duration-fast);
}
.wb-card[open] > summary::after { transform: rotate(90deg); }
.wb-card > summary:hover { color: var(--ui-color-workbench-text); }
/* §11.6 / check L: the arrow rotation is decorative, so it is not animated under
   reduced motion (the arrow still points the right way — the rotation is set by
   the `[open]` selector, not the transition). */
@media (prefers-reduced-motion: reduce) {
  .wb-card > summary::after { transition: none; }
}
.wb-card-body { padding: var(--ui-space-4) var(--ui-space-12) var(--ui-space-12); }
.wb-card-body .wb-field:last-child { margin-bottom: 0; }

.wb-actions { display: flex; flex-wrap: wrap; gap: var(--ui-space-8); margin-top: var(--ui-space-16); }

.wb-btn {
  padding: var(--ui-space-9) var(--ui-space-14);
  font-size: var(--ui-font-size-13);
  font-weight: 600;
  cursor: pointer;
  border: 1px solid var(--ui-color-workbench-line);
  border-radius: var(--ui-radius-6);
  background: var(--ui-color-workbench-button);
  color: var(--ui-color-workbench-text);
}
.wb-btn:hover { filter: brightness(1.15); }
.wb-btn.primary { background: var(--ui-color-workbench-button-primary); color: var(--ui-color-workbench-on-primary); }
.wb-btn.ghost { background: transparent; }

.wb-score { display: flex; justify-content: space-between; font-size: var(--ui-font-size-13); color: var(--ui-color-workbench-muted); }
.wb-score b { color: var(--ui-color-workbench-accent); }

#log {
  height: 190px;
  overflow-y: auto;
  font-family: ui-monospace, monospace;
  font-size: var(--ui-font-size-11);
  line-height: 1.5;
  color: var(--ui-color-workbench-log-text);
  background: var(--ui-color-workbench-log-bg);
  border: 1px solid var(--ui-color-workbench-line);
  border-radius: var(--ui-radius-6);
  padding: var(--ui-space-8);
}
.log-line { white-space: pre-wrap; word-break: break-word; }

.wb-main {
  padding: var(--ui-space-32);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--ui-space-18);
  position: relative;
}

/* The host column gives the widget frame a DEFINITE width. `.ui-stage` is the
   widget's query container (§7.3) and a `container-type: inline-size` element
   cannot size itself from its contents, so the shell must supply the width.
   This is the host's job, not the widget's (§10.7). `.ui-stage` centres itself
   with `margin-inline: auto` (widgets/common.css). */
#stage {
  width: 100%;
}

.wb-empty { color: var(--ui-color-workbench-muted); font-size: var(--ui-font-size-14); text-align: center; }

#banner {
  display: none;
  position: absolute;
  top: 24px;
  padding: var(--ui-space-10) var(--ui-space-22);
  border-radius: var(--ui-radius-8);
  font-size: var(--ui-font-size-15);
  font-weight: 700;
  background: var(--ui-color-on-success);
  border: 1px solid var(--ui-color-success-border);
  color: var(--ui-color-success);
}

/* The host's verdict announcer (§8.1, §13.2 #8). Always rendered and in the
   accessibility tree; visually hidden by the same clip recipe as the widget
   `.ui-status` (absolute, out of flow, no `display:none`). Only its text changes,
   which is what makes the announcement reliable. */
.wb-verdict {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.wb-feedback {
  font-size: var(--ui-font-size-13);
  min-height: 20px;
  padding: var(--ui-space-8) var(--ui-space-14);
  border-radius: var(--ui-radius-6);
  background: var(--ui-color-workbench-feedback-bg);
  color: var(--ui-color-workbench-muted);
  max-width: 420px;
  text-align: center;
}
.wb-feedback.correct { background: var(--ui-color-on-success); color: var(--ui-color-success); }
.wb-feedback.incorrect { background: var(--ui-color-on-danger); color: var(--ui-color-danger); }
.wb-feedback.hint { background: var(--ui-color-on-info); color: var(--ui-color-info); }

.secret-row { display: flex; gap: var(--ui-space-6); }
.secret-row input { flex: 1; }
}