* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: 'Archivo Black', 'Arial Black', Arial, sans-serif;
  background: #FFFDE7;
  color: #222;
  height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* ---- Header ---- */
#editor-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 20px;
  background: #0057FF;
  border-bottom: 4px solid #000;
  flex-shrink: 0;
}

.header-left {
  display: flex;
  align-items: center;
  gap: 16px;
}

.header-left h1 {
  font-size: 1.4rem;
  color: white;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.back-link {
  color: #FFD600;
  text-decoration: none;
  font-size: 0.95rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.back-link:hover {
  text-decoration: underline;
}

.header-right {
  display: flex;
  gap: 10px;
}

/* ---- Buttons ---- */
.btn {
  padding: 8px 18px;
  border: 3px solid #000;
  border-radius: 12px;
  font-size: 0.95rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  cursor: pointer;
  font-family: inherit;
}

.btn-primary {
  background: #00C853;
  color: #000;
}

.btn-primary:hover {
  background: #00E676;
}

.btn-secondary {
  background: #FFD600;
  color: #000;
}

.btn-secondary:hover {
  background: #FFEA00;
}

/* ------------------------------------------------------------
   HEADER BUTTON ROLES (2026-08-08 field test: five equally-loud
   saturated pills = no hierarchy). On the cobalt header there are
   exactly three roles — keep it that way:
   1. PRIMARY (one per bar): solid green = "go live", same semantic
      as the projected START! button → ▶ Host (.btn-host)
   2. ATTENTION (state-driven, not a role you assign): solid yellow
      = "you have unsaved changes" → Save while dirty (CSS-only via
      the save-status sibling selector below)
   3. QUIET (everything else): white outline on the cobalt → More,
      Check for Errors, Preview, Save-when-clean (.btn-ghost)
   ------------------------------------------------------------ */
#editor-header .btn {
  white-space: nowrap;
}

.btn-ghost {
  background: transparent;
  color: #fff;
  border-color: rgba(255, 255, 255, 0.85);
}

.btn-ghost:hover {
  background: rgba(255, 255, 255, 0.15);
  border-color: #fff;
}

.btn-ghost:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* Unsaved changes: Save wakes up (pure CSS — the dirty class already
   lands on the save-status text, a preceding sibling). */
#save-status.save-status-dirty ~ #save-btn {
  background: #FFD600;
  color: #000;
  border-color: #000;
}

#save-status.save-status-dirty ~ #save-btn:hover {
  background: #FFEA00;
}

.btn-add {
  background: #00C853;
  color: #000;
  padding: 8px 16px;
  border: 3px solid #000;
  border-radius: 12px;
  font-weight: 900;
  text-transform: uppercase;
  font-family: inherit;
  font-size: 0.95rem;
  cursor: pointer;
}

.btn-add:hover {
  background: #00E676;
}

.btn-icon {
  background: none;
  border: none;
  font-size: 1.4rem;
  cursor: pointer;
  color: #000;
  padding: 0 4px;
  font-weight: 900;
}

.btn-icon:hover {
  color: #FF2D2D;
}

.btn-danger {
  background: #FF2D2D;
  color: white;
  padding: 8px 18px;
  border: 3px solid #000;
  border-radius: 12px;
  font-size: 0.9rem;
  font-weight: 900;
  text-transform: uppercase;
  cursor: pointer;
  font-family: inherit;
}

.btn-danger:hover {
  background: #FF5252;
}

/* ---- Three-panel layout ---- */
#editor-body {
  display: flex;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

/* ---- Left sidebar ---- */
#settings-panel {
  width: 250px;
  background: #FFF9C4;
  border-right: 4px solid #000;
  padding: 20px;
  overflow-y: auto;
  flex-shrink: 0;
}

#settings-panel h2 {
  font-size: 1.1rem;
  margin-bottom: 16px;
  color: #000;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.form-group {
  margin-bottom: 16px;
}

.form-group label {
  display: block;
  font-size: 0.85rem;
  font-weight: 700;
  color: #222;
  margin-bottom: 6px;
  text-transform: none;
  letter-spacing: 0;
}

.form-group input,
.form-group textarea,
.form-group select {
  width: 100%;
  padding: 8px 10px;
  border: 3px solid #000;
  border-radius: 10px;
  font-size: 0.9rem;
  font-family: 'Nunito', Arial, sans-serif;
  background: white;
}

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
  outline: none;
  border-color: #0057FF;
}

/* ---- Main canvas ---- */
#canvas-area {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

#canvas-toolbar {
  padding: 12px 20px;
  border-bottom: 3px solid #000;
  background: #FFF9C4;
  flex-shrink: 0;
}

#phase-canvas {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 30px 20px 60px;
}

#phase-list {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
}

#canvas-loading,
#canvas-error {
  text-align: center;
  padding: 60px 20px;
  font-size: 1.1rem;
  color: #666;
  text-transform: uppercase;
}

#canvas-error {
  color: #FF2D2D;
}

/* ---- Phase boxes ---- */
.phase-box {
  width: 380px;
  padding: 14px 18px 10px;
  border-radius: 16px;
  border: 3px solid #000;
  cursor: pointer;
  transition: border-color 0.15s;
  text-align: left;
  background: white;
  position: relative;
}

/* Primary-field preview — the dominant content of each phase, shown inline
   so the canvas reads at a glance. Editable for text phases, read-only
   summary for orchestrators (vote/foreach/etc). */
.phase-box-primary {
  margin-top: 10px;
}
.phase-box-primary-input {
  width: 100%;
  font-family: inherit;
  font-size: 0.8rem;
  line-height: 1.35;
  padding: 8px 10px;
  border: 2px solid #000;
  border-radius: 8px;
  background: #FFFDE7;
  resize: none;
  box-sizing: border-box;
}
.phase-box-primary-input:focus {
  outline: none;
  border-color: #0057FF;
}
.phase-box-primary-input::placeholder {
  color: #999;
  font-style: italic;
}
.phase-box-primary-summary {
  font-size: 0.8rem;
  color: #333;
  padding: 6px 10px;
  background: #F5F5F5;
  border-radius: 8px;
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
}

/* Live preview line — only renders when the message contains {{tokens}}.
   Shows the teacher what students will actually see in plain language so
   they don't have to decode template syntax. */
.phase-box-primary-preview {
  font-size: 0.78rem;
  color: #444;
  padding: 6px 10px;
  background: #E8F5E9;
  border-radius: 8px;
  margin-bottom: 6px;
  line-height: 1.5;
}
.primary-preview-label {
  font-weight: bold;
  color: #2E7D32;
  margin-right: 4px;
}
.primary-token-chip {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  background: #FFF59D;
  border: 1.5px solid #F57F17;
  color: #5D4037;
  padding: 1px 4px 1px 7px;
  border-radius: 6px;
  font-size: 0.75rem;
  font-weight: 600;
  margin: 0 1px;
  white-space: nowrap;
}
.primary-token-chip-delete {
  background: none;
  border: none;
  cursor: pointer;
  color: #8D4A00;
  font-size: 0.875rem;
  font-weight: bold;
  line-height: 1;
  padding: 0 2px;
  font-family: inherit;
  opacity: 0.6;
}
.primary-token-chip-delete:hover {
  opacity: 1;
  color: #B71C1C;
}

/* "+ Insert from earlier step" button — appears beneath the primary textarea
   so teachers can add references without typing template syntax. */
.primary-insert-row {
  margin-top: 6px;
}
.primary-insert-btn {
  background: #E3F2FD;
  border: 1.5px dashed #1976D2;
  color: #0D47A1;
  padding: 5px 10px;
  border-radius: 8px;
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
}
.primary-insert-btn:hover {
  background: #1976D2;
  color: white;
}

/* Popup menu — positioned beneath the button, scrollable, grouped by source phase. */
.primary-insert-menu {
  background: white;
  border: 2.5px solid #000;
  border-radius: 12px;
  box-shadow: 4px 4px 0 rgba(0,0,0,0.15);
  width: 340px;
  max-height: 420px;
  overflow-y: auto;
  padding: 6px 0;
  font-size: 0.8rem;
}
.primary-insert-group {
  padding: 4px 0;
  border-bottom: 1px solid #EEE;
}
.primary-insert-group:last-child { border-bottom: none; }
.primary-insert-group-head {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #666;
  font-weight: 700;
  padding: 4px 14px 2px;
}
.primary-insert-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  border: none;
  background: white;
  padding: 7px 14px;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  font-size: 0.8rem;
}
.primary-insert-item:hover {
  background: #E3F2FD;
}
.primary-insert-icon {
  font-size: 1rem;
  width: 22px;
  flex: 0 0 22px;
  text-align: center;
}
.primary-insert-label {
  color: #333;
}
.primary-insert-empty {
  padding: 14px 18px;
  color: #666;
  font-size: 0.78rem;
  font-style: italic;
}

.phase-box:hover {
  border-color: #0057FF;
}

.phase-box:hover::before {
  content: '';
  position: absolute;
  top: -4px;
  left: -4px;
  width: 12px;
  height: 12px;
  border-top: 3px solid #FF4081;
  border-left: 3px solid #FF4081;
}

.phase-box:hover::after {
  content: '';
  position: absolute;
  bottom: -4px;
  right: -4px;
  width: 12px;
  height: 12px;
  border-bottom: 3px solid #FF4081;
  border-right: 3px solid #FF4081;
}

.phase-box.selected {
  border-color: #000 !important;
  outline: 3px solid #FFD600;
  outline-offset: 2px;
}

/* Inline-settings prototype: when a phase is selected, the box widens
   and the config form is injected into it via attachFormToSelectedBox.
   Box stays in the same vertical flow so arrows still connect, just
   gets wider. The transition gives a subtle expand animation. */
.phase-box.selected {
  width: 720px;
  background: #FFF9C4;
  cursor: default;
  padding: 14px 22px 18px;
}

/* The form lives in this wrapper inside the selected box. The header
   border separates the box's summary (icon/name/dots) from the config
   form below. */
.phase-box-inline-form {
  margin-top: 16px;
  padding-top: 18px;
  border-top: 1px solid #ddd;
  text-align: left;
  cursor: default;
}

/* Form groups inside the expanded phase box */
.phase-box-inline-form .form-group {
  margin-bottom: 20px;
}

.phase-box-inline-form .form-group label {
  display: block;
  font-size: 0.85rem;
  font-weight: 700;
  color: #222;
  margin-bottom: 6px;
  text-transform: none;
  letter-spacing: 0;
}

.phase-box-inline-form .form-group input,
.phase-box-inline-form .form-group textarea,
.phase-box-inline-form .form-group select {
  width: 100%;
  padding: 8px 10px;
  border: 2px solid #bbb;
  border-radius: 10px;
  font-size: 0.9rem;
  font-family: 'Nunito', Arial, sans-serif;
  background: white;
  box-sizing: border-box;
  transition: border-color 0.15s;
}

.phase-box-inline-form .form-group input:focus,
.phase-box-inline-form .form-group textarea:focus,
.phase-box-inline-form .form-group select:focus {
  outline: none;
  border-color: #0057FF;
}

/* The "Done editing" button at the bottom of the inline form */
.phase-box-done-btn {
  display: block;
  width: 100%;
  margin-top: 18px;
  padding: 10px 16px;
  background: #00C853;
  color: white;
  border: 3px solid #000;
  border-radius: 12px;
  font-size: 0.95rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  cursor: pointer;
  font-family: inherit;
}

.phase-box-done-btn:hover {
  background: #00E676;
}

/* Stop the box's hover-corner accents (FF4081 corners) from showing
   on the expanded box — they're a "you can click this" affordance
   that's no longer relevant when settings are already open. */
.phase-box.selected:hover::before,
.phase-box.selected:hover::after {
  display: none;
}

.phase-box-header {
  display: flex;
  align-items: center;
  gap: 8px;
}

.phase-box-icon {
  font-size: 1.3rem;
  line-height: 1;
}
.phase-box-icon:empty {
  display: none;
}

.phase-box-name {
  font-weight: 900;
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.phase-box-desc {
  font-size: 0.75rem;
  color: #666;
  margin-top: 3px;
  line-height: 1.35;
  font-family: 'Nunito', Arial, sans-serif;
  font-weight: normal;
}

.phase-box-id {
  font-size: 0.75rem;
  color: #888;
  margin-top: 2px;
  margin-left: 30px;
  font-family: 'Nunito', Arial, sans-serif;
  font-weight: normal;
}

.phase-box-detail {
  font-size: 0.8rem;
  color: #555;
  margin-top: 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-family: 'Nunito', Arial, sans-serif;
  font-weight: normal;
}

/* Role indicator dots — hidden; the color-coded section bands in the
   settings form communicate roles more clearly than tiny H/P/AI badges. */
.phase-box-dots {
  display: none;
}

/* Drag and drop */
.phase-box.dragging {
  opacity: 0.4;
}

.phase-box.drop-above {
  outline: 3px solid #0057FF;
  outline-offset: -3px;
}

.phase-box.drop-below {
  outline: 3px solid #0057FF;
  outline-offset: -3px;
}

/* Phase arrow connector */
.phase-arrow {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 36px;
  color: #000;
  font-size: 1.8rem;
  font-weight: 900;
  user-select: none;
}

/* Phase type colors — Keith Haring palette */
.phase-type-lobby       { background: #BBDEFB; border-color: #0057FF; }
.phase-type-collect     { background: #C8E6C9; border-color: #00C853; }
.phase-type-ai-process  { background: #E1BEE7; border-color: #AA00FF; }
.phase-type-vote        { background: #FFE0B2; border-color: #FF6D00; }
.phase-type-eliminate   { background: #FFCDD2; border-color: #FF2D2D; }
.phase-type-reveal      { background: #B2EBF2; border-color: #0057FF; }
.phase-type-preview     { background: #FFF9C4; border-color: #FFD600; }
.phase-type-winner      { background: #FFE0B2; border-color: #FF6D00; }
.phase-type-announce    { background: #B2EBF2; border-color: #0057FF; }
.phase-type-collect-choice { background: #C8E6C9; border-color: #00C853; }
.phase-type-ai-eliminate { background: #FFCDD2; border-color: #FF2D2D; }
.phase-type-end         { background: #E0E0E0; border-color: #555; }

/* ---- Right sidebar ---- */
/* Inline-settings prototype: hide the right panel always. The phase
   config form lives inside the selected phase box now. The panel
   stays in the DOM as a holding place for the form when nothing is
   selected (so we don't have to special-case its parentNode). */
#phase-panel {
  display: none !important;
}

.panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.panel-header h2 {
  font-size: 1.1rem;
  color: #000;
  text-transform: uppercase;
  letter-spacing: 1px;
}

#phase-config-form .form-group {
  margin-bottom: 14px;
}

/* ---- Section headers ---- */
.config-section-header {
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: #555;
  margin-top: 24px;
  margin-bottom: 12px;
  padding-top: 16px;
  border-top: 1px solid #ddd;
}

/* Role-coded section bands — color communicates which surface is affected */
.config-section-header.role-section-host,
.config-section-header.role-section-player,
.config-section-header.role-section-ai,
.config-section-header.role-section-both,
.config-section-header.role-section-flow {
  border-top: none;
  padding: 9px 14px;
  margin-top: 24px;
  margin-bottom: 12px;
  color: #000;
  border-radius: 6px;
  border: 2px solid rgba(0,0,0,0.15);
  font-size: 0.78rem;
  letter-spacing: 0.6px;
}
.config-section-header.role-section-host   { background: #DBEAFE; }
.config-section-header.role-section-player { background: #DCFCE7; }
.config-section-header.role-section-ai     { background: #F3E8FF; }
.config-section-header.role-section-both   { background: #FEF9C3; }
.config-section-header.role-section-flow   { background: #F1F5F9; }

/* Collapsible optional sections — click header to toggle */
.collapsible-section {
  /* Wrapper around a collapsible section; no padding so header stays flush with the form */
}
.collapsible-header {
  cursor: pointer;
  user-select: none;
  display: flex;
  align-items: center;
  gap: 4px;
}
.collapsible-header:hover {
  filter: brightness(0.95);
}
.collapsible-arrow {
  font-size: 0.9em;
  opacity: 1;
}
.collapsible-content {
  /* padding sits inside so the header border doesn't contain empty space when collapsed */
}

/* Save-state indicator in the header */
/* Quiet status TEXT, not a chip — the old green pill read as another
   button (2026-07-27 UI review). */
.save-status {
  display: inline-block;
  margin-right: 8px;
  font-size: 0.8rem;
  font-weight: bold;
}
/* Header is cobalt — status text needs light tints to stay readable. */
.save-status-clean {
  color: #C9F7CC;
}
.save-status-dirty {
  color: #FFD9A0;
}

/* "More ▾" menu — parks Ask AI + Save as Recipe so the header has a clear
   hierarchy: Save primary, Check for Errors / Prototype Mode secondary. */
.header-menu {
  position: relative;
  display: inline-block;
}

.header-menu-items {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px;
  background: #fff;
  border: 3px solid #000;
  border-radius: 12px;
  box-shadow: 4px 4px 0 #000;
  z-index: 50;
  min-width: 180px;
}

.header-menu-items[hidden] { display: none; }

.header-menu-items .btn {
  width: 100%;
  text-align: left;
}

/* Transient bottom-of-screen confirmation toast */
.editor-toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: #263238;
  color: #FFF;
  padding: 10px 18px;
  border-radius: 6px;
  font-family: 'Nunito', Arial, sans-serif;
  font-size: 0.9rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
  opacity: 0;
  transition: opacity 0.2s, transform 0.2s;
  pointer-events: none;
  z-index: 2000;
}
.editor-toast-visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* Compact "Goes to: <name> [Change]" display instead of a dropdown */
.compact-next-ref {
  padding: 10px 12px;
  background: #FAFAFA;
  border: 2px solid #000;
  border-radius: 6px;
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}
.compact-next-change {
  margin-left: auto;
  padding: 2px 10px;
  background: #FFF;
  border: 2px solid #000;
  border-radius: 4px;
  cursor: pointer;
  font-family: inherit;
  font-size: 0.8rem;
  font-weight: bold;
}
.compact-next-change:hover { background: #E3F2FD; }

/* ---- Field help text ---- */
.field-help {
  display: block;
  font-size: 0.78rem;
  color: #666;
  margin-top: 5px;
  line-height: 1.4;
  font-family: 'Nunito', Arial, sans-serif;
  font-weight: normal;
}

.delete-phase-section {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 2px solid #000;
}

/* ---- Phase picker modal ---- */
.picker-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.picker-modal {
  background: #FFD600;
  border-radius: 16px;
  padding: 28px 32px;
  max-width: 560px;
  max-height: 85vh;
  overflow-y: auto;
  width: 90%;
  border: 4px solid #000;
}

.picker-title {
  font-size: 1.2rem;
  color: #000;
  margin-bottom: 20px;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.picker-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.picker-category-header {
  grid-column: 1 / -1;
  font-weight: 900;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #666;
  border-bottom: 2px solid #ddd;
  padding: 8px 0 4px;
  margin-top: 8px;
}

.picker-category-header:first-child {
  margin-top: 0;
}

.picker-card {
  padding: 14px 16px;
  border: 3px solid #000;
  border-radius: 14px;
  cursor: pointer;
  transition: background 0.15s;
  text-align: left;
  background: white;
}

.picker-card:hover {
  background: #BBDEFB;
}

.picker-card-icon {
  font-size: 1.5rem;
  display: block;
  margin-bottom: 6px;
}

.picker-card-name {
  font-weight: 900;
  font-size: 0.95rem;
  color: #000;
  margin-bottom: 4px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.picker-card-desc {
  font-size: 0.8rem;
  color: #555;
  line-height: 1.3;
  font-family: 'Nunito', Arial, sans-serif;
  font-weight: normal;
}

/* ---- Validation panel ---- */
#validation-panel {
  position: relative;
  padding: 14px 20px;
  border-bottom: 3px solid #000;
  flex-shrink: 0;
}

#validation-panel.has-errors {
  background: #FFCDD2;
  border-color: #FF2D2D;
}

#validation-panel.warnings-only {
  background: #FFF9C4;
  border-color: #FF6D00;
}

#validation-close {
  position: absolute;
  top: 10px;
  right: 12px;
}

#validation-title {
  font-weight: 900;
  font-size: 0.95rem;
  margin-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.has-errors #validation-title {
  color: #FF2D2D;
}

.warnings-only #validation-title {
  color: #FF6D00;
}

#validation-list {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 0.85rem;
  line-height: 1.5;
  font-family: 'Nunito', Arial, sans-serif;
  font-weight: normal;
}

#validation-list li {
  padding: 2px 0;
}

#validation-list .validation-error::before {
  content: '\2716 ';
  color: #FF2D2D;
}

#validation-list .validation-warning::before {
  content: '\26A0 ';
  color: #FF6D00;
}

/* ---- Check My Game button ---- */
.btn-review {
  background: #AA00FF;
  color: white;
  padding: 8px 18px;
  border: 3px solid #000;
  border-radius: 12px;
  font-size: 0.95rem;
  font-weight: 900;
  text-transform: uppercase;
  cursor: pointer;
  font-family: inherit;
}

.btn-review:hover {
  background: #D500F9;
}

.btn-review:disabled {
  background: #CE93D8;
  cursor: wait;
}

.btn-ask-ai {
  background: #6A1B9A;
  color: white;
  padding: 8px 18px;
  border: 3px solid #000;
  border-radius: 12px;
  font-size: 0.95rem;
  font-weight: 900;
  text-transform: uppercase;
  cursor: pointer;
  font-family: inherit;
}

.btn-ask-ai:hover {
  background: #8E24AA;
}

.btn-ask-ai:disabled {
  background: #CE93D8;
  cursor: wait;
}

.btn-save-recipe {
  background: #FFD600;
  color: #000;
  padding: 8px 18px;
  border: 3px solid #000;
  border-radius: 12px;
  font-size: 0.95rem;
  font-weight: 900;
  text-transform: uppercase;
  cursor: pointer;
  font-family: inherit;
}

.btn-save-recipe:hover {
  background: #FFEB3B;
}

.btn-save-recipe:disabled {
  background: #FFF59D;
  cursor: wait;
}

/* ---- Save as Recipe modal (R5) ---- */
.sar-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sar-modal {
  background: #FFEB3B;
  border: 4px solid #000;
  border-radius: 16px;
  padding: 28px 32px;
  max-width: 720px;
  width: 92%;
  max-height: 92vh;
  overflow-y: auto;
  font-family: 'Archivo Black', 'Arial Black', Arial, sans-serif;
}

.sar-loading {
  text-align: center;
  font-size: 1.1rem;
  padding: 40px;
}

.sar-title {
  font-size: 1.4rem;
  margin: 0 0 8px 0;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.sar-subtitle {
  text-align: center;
  font-size: 0.9rem;
  color: #444;
  font-family: 'Nunito', Arial, sans-serif;
  font-weight: normal;
  margin: 0 0 20px 0;
  line-height: 1.4;
}

/* Candidate list */

.sar-candidate-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 16px;
}

.sar-candidate-row {
  background: white;
  border: 3px solid #000;
  border-radius: 12px;
  padding: 12px 14px;
  transition: opacity 0.15s;
}

.sar-candidate-row-disabled {
  opacity: 0.45;
}

.sar-candidate-check-wrap {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  cursor: pointer;
}

.sar-candidate-check {
  width: 22px;
  height: 22px;
  margin-top: 2px;
  cursor: pointer;
  flex-shrink: 0;
}

.sar-candidate-info {
  flex: 1;
  min-width: 0;
}

.sar-candidate-path {
  font-weight: 900;
  font-size: 0.95rem;
  color: #000;
}

.sar-candidate-path-tech {
  font-family: monospace;
  font-size: 0.7rem;
  color: #888;
  margin-top: 2px;
  font-weight: normal;
}

.sar-candidate-preview {
  margin-top: 6px;
  font-family: 'Nunito', Arial, sans-serif;
  font-weight: normal;
  font-size: 0.85rem;
  color: #555;
  font-style: italic;
  background: #FFF9C4;
  padding: 6px 8px;
  border-radius: 6px;
  word-break: break-word;
}

.sar-candidate-details {
  margin-top: 10px;
  margin-left: 34px;
  display: flex;
  gap: 12px;
}

.sar-candidate-field {
  flex: 1;
}

.sar-candidate-field label {
  display: block;
  font-size: 0.75rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #555;
  margin-bottom: 3px;
}

/* Metadata form */

.sar-metadata-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 16px;
}

.sar-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.sar-field-label {
  font-weight: 900;
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.sar-field-helper {
  font-size: 0.78rem;
  color: #555;
  font-family: 'Nunito', Arial, sans-serif;
  font-weight: normal;
  margin-bottom: 2px;
}

.sar-input {
  padding: 9px 11px;
  border: 3px solid #000;
  border-radius: 8px;
  font-size: 0.92rem;
  font-family: 'Nunito', Arial, sans-serif;
  background: white;
  font-weight: normal;
  width: 100%;
  box-sizing: border-box;
}

textarea.sar-input {
  resize: vertical;
  min-height: 56px;
}

.sar-input:focus {
  outline: none;
  border-color: #0057FF;
  background: #FFF9C4;
}

/* Status */

.sar-status {
  margin-bottom: 12px;
}

.sar-status-error {
  background: #FFCDD2;
  border: 3px solid #000;
  border-radius: 8px;
  padding: 12px;
  font-family: 'Nunito', Arial, sans-serif;
  font-weight: normal;
  font-size: 0.88rem;
}

.sar-status-error strong {
  display: block;
  margin-bottom: 6px;
  font-family: inherit;
  font-weight: 900;
}

.sar-status-error ul {
  margin: 4px 0 0 0;
  padding-left: 20px;
  color: #B71C1C;
}

/* Footer buttons */

.sar-modal-footer {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
}

.sar-btn {
  padding: 10px 22px;
  border: 3px solid #000;
  border-radius: 8px;
  font-weight: 900;
  font-size: 0.92rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  cursor: pointer;
  font-family: inherit;
}

.sar-btn-cancel {
  background: white;
  color: #000;
}

.sar-btn-cancel:hover {
  background: #eee;
}

.sar-btn-primary {
  background: #00C853;
  color: white;
}

.sar-btn-primary:hover:not(:disabled) {
  background: #00E676;
}

.sar-btn-primary:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

/* Success view */

.sar-success-card {
  background: white;
  border: 3px solid #000;
  border-radius: 12px;
  padding: 24px;
  text-align: center;
  margin-bottom: 16px;
}

.sar-success-icon {
  font-size: 3rem;
  margin-bottom: 8px;
}

.sar-success-name {
  font-weight: 900;
  font-size: 1.3rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 6px;
}

.sar-success-desc {
  font-family: 'Nunito', Arial, sans-serif;
  font-weight: normal;
  font-size: 0.95rem;
  color: #444;
  line-height: 1.4;
}

@media (max-width: 600px) {
  .sar-candidate-details {
    flex-direction: column;
    margin-left: 0;
  }
}

/* ---- Ask AI modal ---- */
.ask-ai-modal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ask-ai-modal[hidden] {
  display: none;
}

.ask-ai-modal-inner {
  background: #FFF9C4;
  border: 4px solid #000;
  border-radius: 16px;
  padding: 24px;
  width: min(560px, 92vw);
  max-height: 88vh;
  overflow: auto;
  box-shadow: 8px 8px 0 rgba(0, 0, 0, 0.2);
}

.ask-ai-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.ask-ai-header h3 {
  margin: 0;
  font-size: 1.1rem;
}

.ask-ai-subtitle {
  margin: 0 0 12px;
  font-size: 0.85rem;
  color: #555;
}

.ask-ai-modal textarea {
  width: 100%;
  padding: 10px;
  border: 2px solid #000;
  border-radius: 8px;
  font-family: inherit;
  font-size: 0.95rem;
  resize: vertical;
  background: white;
  box-sizing: border-box;
}

.ask-ai-actions,
.ask-ai-result-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  margin-top: 12px;
}

.ask-ai-status {
  margin-top: 12px;
  padding: 10px;
  background: #E1BEE7;
  border: 2px solid #000;
  border-radius: 8px;
  font-size: 0.9rem;
}

.ask-ai-summary {
  margin-top: 12px;
  padding: 12px;
  background: #C8E6C9;
  border: 2px solid #000;
  border-radius: 8px;
  font-size: 0.95rem;
  white-space: pre-wrap;
}

.ask-ai-errors {
  margin-top: 8px;
  padding: 10px;
  background: #FFCDD2;
  border: 2px solid #000;
  border-radius: 8px;
  font-size: 0.85rem;
}

.ask-ai-errors ul {
  margin: 4px 0 0;
  padding-left: 20px;
}

.ask-step-btn {
  background: #E1BEE7;
  color: #4A148C;
  padding: 6px 12px;
  border: 2px solid #000;
  border-radius: 8px;
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  margin-bottom: 12px;
}

.ask-step-btn:hover {
  background: #CE93D8;
}

/* ---- AI issue badge on phase boxes ---- */
.ai-issue-badge {
  position: absolute;
  top: -6px;
  right: -6px;
  background: #FF6D00;
  color: white;
  font-size: 0.65rem;
  font-weight: 900;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #000;
}

.ai-issue-badge.has-errors {
  background: #FF2D2D;
}

/* ---- Review panel ---- */
.review-panel {
  position: relative;
  padding: 16px 20px;
  border-bottom: 3px solid #AA00FF;
  background: #F3E5F5;
  flex-shrink: 0;
  max-height: 40vh;
  overflow-y: auto;
}

.review-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.review-header h3 {
  font-size: 1rem;
  color: #AA00FF;
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.review-summary {
  font-size: 0.9rem;
  color: #333;
  margin-bottom: 14px;
  line-height: 1.5;
  padding: 10px 12px;
  background: white;
  border-radius: 10px;
  border: 3px solid #000;
  font-family: 'Nunito', Arial, sans-serif;
  font-weight: normal;
}

/* Robot playtest banner (deep review) */
.review-playtest { font-weight: bold; }
.review-playtest-ok   { background: #C8E6C9; }
.review-playtest-warn { background: #FFF9C4; }
.review-playtest-bad  { background: #FFCDD2; }

.review-issues {
  list-style: none;
  padding: 0;
  margin: 0;
}

.review-issue {
  padding: 10px 12px;
  margin-bottom: 8px;
  border-radius: 10px;
  border-left: 4px solid;
  border: 3px solid #000;
  background: white;
  font-size: 0.85rem;
  line-height: 1.4;
  font-family: 'Nunito', Arial, sans-serif;
  font-weight: normal;
}

.review-issue-error {
  border-left: 6px solid #FF2D2D;
}

.review-issue-warning {
  border-left: 6px solid #FF6D00;
}

.review-issue-suggestion {
  border-left: 6px solid #0057FF;
}

.review-issue-phase {
  font-weight: 900;
  color: #AA00FF;
  cursor: pointer;
  font-size: 0.8rem;
  margin-bottom: 4px;
  text-transform: uppercase;
  font-family: inherit;
}

.review-issue-phase:hover {
  text-decoration: underline;
}

.review-issue-message {
  color: #333;
  margin-bottom: 4px;
}

.review-issue-suggestion-text {
  color: #666;
  font-size: 0.8rem;
  font-style: italic;
}

/* "Looks good" chip shown when a step has no AI suggestions */
.ai-suggestion-ok {
  padding: 8px 12px;
  margin: 10px 0;
  border-radius: 10px;
  background: #E8F5E9;
  border: 2px solid #2E7D32;
  color: #1B5E20;
  font-size: 0.85rem;
  font-weight: bold;
  text-align: center;
}

/* Pinned AI suggestions header — stands out at the top of the panel */
.ai-suggestions-header {
  margin-top: 10px;
  border-top: none;
  padding: 8px 12px;
  background: #FFF9C4;
  border: 2px solid #F57F17;
  color: #000;
  border-radius: 4px;
}

/* AI suggestions section in phase config sidebar */
.ai-suggestion-item {
  padding: 8px 10px;
  margin-bottom: 6px;
  border-radius: 10px;
  font-size: 0.8rem;
  line-height: 1.4;
  border: 2px solid #000;
  font-family: 'Nunito', Arial, sans-serif;
  font-weight: normal;
}

.ai-suggestion-item.severity-error {
  background: #FFCDD2;
}

.ai-suggestion-item.severity-warning {
  background: #FFF9C4;
}

.ai-suggestion-item.severity-suggestion {
  background: #BBDEFB;
}

.ai-suggestion-message {
  color: #000;
  margin-bottom: 3px;
}

.ai-suggestion-fix {
  color: #555;
  font-style: italic;
}

/* ---- Loop body visual ---- */
.phase-box.loop-body {
  border-left: 6px solid #AA00FF;
  margin-left: 12px;
}

.loop-badge {
  position: absolute;
  top: -6px;
  left: -6px;
  background: #AA00FF;
  color: white;
  font-size: 0.65rem;
  font-weight: 900;
  padding: 1px 6px;
  border-radius: 8px;
  border: 2px solid #000;
}

/* ---- Advanced toggle (foreach) ---- */
/* ---- Variable chips ---- */
.variable-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 4px;
  align-items: center;
}

.variable-chips-label {
  font-size: 0.7rem;
  font-weight: 900;
  color: #888;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.variable-chip {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 900;
  padding: 2px 8px;
  border: 2px solid #000;
  border-radius: 8px;
  background: #E1BEE7;
  cursor: pointer;
  font-family: 'Nunito', Arial, sans-serif;
  letter-spacing: 0.3px;
}

.variable-chip:hover {
  background: #CE93D8;
}

/* Example chips — click fills the field (distinct color from insert-variable chips) */
.example-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 4px;
  align-items: center;
}
.example-chips-label {
  font-size: 0.7rem;
  font-weight: 900;
  color: #888;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.example-chip {
  display: inline-block;
  font-size: 0.75rem;
  padding: 2px 10px;
  border: 2px solid #000;
  border-radius: 8px;
  background: #FFF9C4;
  cursor: pointer;
  font-family: 'Nunito', Arial, sans-serif;
}
.example-chip:hover {
  background: #FFF176;
}

/* ---- Inline data ref warnings ---- */
.data-ref-warning {
  color: #FF2D2D;
  font-size: 0.8rem;
  font-weight: 900;
  margin-top: 3px;
}

/* ---- Advanced toggle (foreach) ---- */
.advanced-toggle {
  width: 100%;
  padding: 10px 12px;
  margin-top: 12px;
  background: #F5F5F5;
  border: 3px solid #000;
  cursor: pointer;
  font-weight: 900;
  font-size: 0.85rem;
  font-family: 'Archivo Black', 'Arial Black', Arial, sans-serif;
  text-align: left;
  letter-spacing: 0.5px;
}

.advanced-toggle:hover {
  background: #EEEEEE;
}

.advanced-fields {
  border: 2px solid #DDD;
  border-top: none;
  padding: 8px 4px;
  background: #FAFAFA;
}

/* Toggle checkboxes for screen control */
.toggle-checkboxes {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 6px;
  padding-left: 4px;
}

.toggle-checkbox {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.85rem;
  color: #333;
  cursor: pointer;
  font-family: 'Nunito', Arial, sans-serif;
  font-weight: normal;
}

.toggle-checkbox input[type="checkbox"] {
  width: 16px;
  height: 16px;
  cursor: pointer;
}

/* ---- Live Preview ---- */
#live-preview-section {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 3px solid #000;
}

#live-preview-section.hidden {
  display: none;
}

#toggle-preview-btn {
  background: #0057FF;
  color: white;
  padding: 6px 14px;
  border: 3px solid #000;
  border-radius: 10px;
  font-size: 0.8rem;
  font-weight: 900;
  text-transform: uppercase;
  cursor: pointer;
  font-family: inherit;
  margin-bottom: 12px;
}

#toggle-preview-btn:hover {
  background: #2979FF;
}

#live-preview-container.hidden {
  display: none;
}

.preview-screens {
  display: flex;
  gap: 12px;
}

.preview-screen {
  flex: 1;
  min-width: 0;
}

.preview-screen > label {
  display: block;
  font-size: 0.65rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 1px;
  text-align: center;
  margin-bottom: 6px;
  color: #000;
}

.preview-screen-frame {
  border: 3px solid #000;
  border-radius: 14px;
  padding: 10px;
  min-height: 180px;
  background: white;
  overflow: hidden;
}

.preview-host .preview-screen-frame {
  border-color: #0057FF;
}

.preview-player .preview-screen-frame {
  border-color: #00C853;
}

.preview-element {
  padding: 4px 8px;
  margin-bottom: 6px;
  border: 2px solid #000;
  border-radius: 8px;
  font-size: 0.7rem;
  font-family: 'Nunito', Arial, sans-serif;
  font-weight: normal;
  background: #F5F5F5;
}

.preview-element-label {
  font-size: 0.6rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #888;
  margin-bottom: 2px;
}

.preview-element-text {
  color: #333;
  font-size: 0.75rem;
  line-height: 1.3;
}

.preview-hidden {
  border-style: dashed;
  opacity: 0.3;
}

.preview-hidden .preview-element-label {
  text-decoration: line-through;
}

.preview-btn-mockup {
  display: inline-block;
  padding: 3px 10px;
  margin: 3px 2px;
  border: 2px solid #000;
  border-radius: 8px;
  font-size: 0.65rem;
  font-weight: 900;
  text-transform: uppercase;
  background: #FFD600;
  color: #000;
  font-family: inherit;
}

.preview-input-mockup {
  display: block;
  width: 100%;
  padding: 4px 8px;
  margin: 3px 0;
  border: 2px solid #000;
  border-radius: 8px;
  font-size: 0.7rem;
  background: #FAFAFA;
  color: #AAA;
  font-family: 'Nunito', Arial, sans-serif;
}

/* ---- Theme swatches ---- */
.theme-swatch {
  width: 24px;
  height: 24px;
  border-radius: 6px;
  border: 2px solid #000;
  display: inline-block;
}

.preview-template-text {
  padding: 6px 8px;
  margin-bottom: 8px;
  background: #FFF9C4;
  border: 2px solid #FFD600;
  border-radius: 8px;
  font-size: 0.7rem;
  font-style: italic;
  color: #555;
  font-family: 'Nunito', Arial, sans-serif;
  font-weight: normal;
}

/* --- Apply Fix button + diff preview modal --- */
.review-fix-btn {
  margin-top: 8px;
  padding: 6px 12px;
  background: #C8E6C9;
  border: 2px solid #000;
  cursor: pointer;
  font-weight: bold;
  font-family: inherit;
  font-size: 0.85rem;
}
.review-fix-btn:hover:not(:disabled) { background: #A5D6A7; }
.review-fix-btn:disabled { background: #eee; cursor: wait; }

.fix-preview-modal { max-width: 640px; background: #FFF; }

.fix-btn-row {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  margin-top: 12px;
}

.fix-explanation {
  padding: 10px 12px;
  margin-bottom: 12px;
  background: #FFF9C4;
  border: 2px solid #FFD600;
  border-radius: 6px;
  font-size: 0.95rem;
}

.fix-diff {
  background: #fafafa;
  border: 2px solid #000;
  padding: 8px;
  margin-bottom: 12px;
  max-height: 340px;
  overflow-y: auto;
  font-family: monospace;
  font-size: 0.85rem;
}

.fix-diff-row {
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px dashed #ccc;
}
.fix-diff-row:last-child { border-bottom: none; margin-bottom: 0; }

.fix-diff-key {
  font-weight: bold;
  margin-bottom: 4px;
  font-family: inherit;
}

.fix-diff-old {
  background: #FFCDD2;
  padding: 4px 6px;
  margin-bottom: 2px;
  white-space: pre-wrap;
  word-break: break-word;
}

.fix-diff-new {
  background: #C8E6C9;
  padding: 4px 6px;
  white-space: pre-wrap;
  word-break: break-word;
}

.fix-diff-no-change {
  padding: 12px;
  text-align: center;
  color: #666;
  font-style: italic;
}


/* ===== Simple view (plain-English editor) ===== */

.view-toggle {
  display: flex;
  gap: 2px;
  background: #eee;
  border: 2px solid #000;
  border-radius: 999px;
  padding: 2px;
  margin-left: 14px;
}

.view-toggle-btn {
  border: none;
  background: transparent;
  font-family: inherit;
  font-weight: 900;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 5px 14px;
  border-radius: 999px;
  cursor: pointer;
  color: #666;
}

.view-toggle-btn.active {
  background: #0057FF;
  color: white;
}

#simple-view {
  flex: 1;
  overflow-y: auto;
  padding: 24px;
}

.sv-column {
  max-width: 860px;
  margin: 0 auto;
}

.sv-card {
  display: flex;
  gap: 14px;
  background: white;
  border: 3px solid #000;
  border-radius: 14px;
  padding: 14px 16px;
  margin-bottom: 12px;
}

.sv-card.sv-muted {
  background: #FAFAF5;
  border-width: 2px;
  opacity: 0.92;
}

.sv-num {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border: 2px solid #000;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  font-size: 0.95rem;
}

.sv-body { flex: 1; min-width: 0; }

.sv-sentence {
  font-weight: 900;
  font-size: 0.95rem;
  margin-bottom: 6px;
}

.sv-muted .sv-sentence { font-weight: 700; color: #555; }

.sv-text {
  width: 100%;
  border: 2px solid #bbb;
  border-radius: 8px;
  padding: 8px 10px;
  font-family: 'Nunito', Arial, sans-serif;
  font-size: 0.95rem;
  line-height: 1.4;
  resize: none;
  overflow: hidden;
  box-sizing: border-box;
}

.sv-text:focus { outline: none; border-color: #0057FF; }

/* Token-aware box: editable text segments with friendly data chips between
   them — teachers never see raw {{token}} syntax. */
.sv-token-box {
  resize: none;
  overflow: visible;
  height: auto;
}

.sv-token-box:focus-within { border-color: #0057FF; }

.sv-seg {
  display: block;
  width: 100%;
  border: none;
  padding: 2px 0;
  font-family: 'Nunito', Arial, sans-serif;
  font-size: 0.95rem;
  line-height: 1.4;
  resize: none;
  overflow: hidden;
  box-sizing: border-box;
  background: transparent;
}

.sv-seg:focus { outline: none; }

.sv-chip-row { margin: 4px 0; }

.sv-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #EDE7F6;
  border: 2px solid #6A1B9A;
  color: #4A148C;
  border-radius: 999px;
  padding: 3px 6px 3px 12px;
  font-family: 'Nunito', Arial, sans-serif;
  font-size: 0.8rem;
  font-weight: bold;
  cursor: default;
}

.sv-chip-delete {
  border: none;
  background: transparent;
  color: #9575CD;
  font-size: 1rem;
  font-weight: bold;
  line-height: 1;
  cursor: pointer;
  padding: 0 4px;
}

.sv-chip-delete:hover { color: #C62828; }

.sv-facts {
  margin-top: 8px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  font-family: 'Nunito', Arial, sans-serif;
  font-size: 0.8rem;
  color: #666;
}

.sv-fact { white-space: nowrap; }
.sv-fact-sep { color: #ccc; }

.sv-timer {
  width: 52px;
  border: 2px solid #bbb;
  border-radius: 6px;
  padding: 2px 4px;
  font-family: inherit;
  font-size: 0.8rem;
  text-align: center;
}

.sv-list { margin-top: 8px; }

.sv-list-row {
  display: flex;
  gap: 6px;
  margin-bottom: 6px;
}

.sv-list-input {
  flex: 1;
  border: 2px solid #bbb;
  border-radius: 8px;
  padding: 6px 10px;
  font-family: 'Nunito', Arial, sans-serif;
  font-size: 0.9rem;
}

.sv-list-input:focus { outline: none; border-color: #0057FF; }

.sv-list-remove {
  border: 2px solid #bbb;
  background: white;
  border-radius: 8px;
  cursor: pointer;
  padding: 0 10px;
  color: #999;
}

.sv-list-remove:hover { color: #C62828; border-color: #C62828; }

.sv-list-add {
  border: 2px dashed #bbb;
  background: transparent;
  border-radius: 8px;
  cursor: pointer;
  padding: 5px 12px;
  font-family: 'Nunito', Arial, sans-serif;
  font-size: 0.8rem;
  color: #666;
}

.sv-list-add:hover { border-color: #0057FF; color: #0057FF; }

.sv-subs { margin-top: 6px; }

.sv-sub {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  margin-bottom: 6px;
  padding-left: 8px;
}

.sv-sub-lead {
  font-family: 'Nunito', Arial, sans-serif;
  font-size: 0.85rem;
  font-weight: bold;
  color: #555;
  white-space: nowrap;
  padding-top: 8px;
}

.sv-actions {
  margin-top: 10px;
  display: flex;
  gap: 14px;
}

.sv-action {
  border: none;
  background: transparent;
  font-family: 'Nunito', Arial, sans-serif;
  font-size: 0.8rem;
  font-weight: bold;
  color: #6A1B9A;
  cursor: pointer;
  padding: 0;
}

.sv-action:hover { text-decoration: underline; }

.sv-action-quiet { color: #888; }

#simple-add-step { margin: 4px 0 40px; }

/* ============================================================
   Builder view — palette / canvas / rail (SURFACES-PLAN Phase 3)
   ============================================================ */

#builder-view {
  flex: 1;
  min-height: 0;
  display: flex;
  overflow: hidden;
}

/* display:flex would beat the hidden attribute (recurring bug) */
#builder-view[hidden] { display: none; }

#builder-palette {
  width: 230px;
  flex-shrink: 0;
  background: #fff;
  border-right: 3px solid #000;
  overflow-y: auto;
  padding: 14px;
}

.builder-palette-title {
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin: 0 0 4px;
}

.builder-palette-hint {
  font-family: 'Nunito', Arial, sans-serif;
  font-size: 0.75rem;
  color: #777;
  margin: 0 0 12px;
}

.builder-pgroup { margin-bottom: 14px; }

.builder-pgroup h3 {
  font-family: 'Nunito', Arial, sans-serif;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #888;
  margin: 0 0 6px;
  font-weight: 800;
}

.builder-tile {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  width: 100%;
  border: 2px solid #000;
  border-radius: 10px;
  padding: 7px 10px;
  margin-bottom: 6px;
  background: #fff;
  font-family: 'Nunito', Arial, sans-serif;
  font-weight: 800;
  font-size: 0.82rem;
  cursor: pointer;
  box-shadow: 2px 2px 0 #000;
  text-align: left;
}

.builder-tile:hover { transform: translate(-1px, -1px); box-shadow: 3px 3px 0 #000; }
.builder-tile:focus-visible { outline: 3px solid #0057FF; outline-offset: 2px; }
.builder-tile.ask { background: #C8E6C9; }
.builder-tile.show { background: #B2EBF2; }
.builder-tile.decide { background: #FFE0B2; }
.builder-tile.ai { background: #E1BEE7; }
.builder-tile.endtile { background: #E0E0E0; }

.builder-more { margin-top: 4px; }

#builder-canvas {
  flex: 1;
  min-width: 0;
  overflow-y: auto;
  padding: 20px 24px;
  background: #FFFDE7;
}

.builder-step {
  background: #fff;
  border: 2px solid #000;
  border-radius: 14px;
  padding: 14px 16px;
  margin-bottom: 16px;
  display: flex;
  gap: 12px;
  align-items: flex-start;
  cursor: pointer;
  position: relative;
}

/* Puzzle-piece connectors: a tab bumps out of each step's bottom edge and
   a matching notch is cut into the next step's top edge, so the stack
   reads as pieces that snap together. First card has no notch; the end
   card has no tab. */
.builder-step::before {
  /* notch: a canvas-colored cutout in the top edge */
  content: '';
  position: absolute;
  top: -2px;
  left: 44px;
  width: 26px;
  height: 11px;
  background: #FFFDE7;
  border: 2px solid #000;
  border-top: none;
  border-radius: 0 0 13px 13px;
}

.builder-step::after {
  /* tab: same shape bumping out of the bottom edge */
  content: '';
  position: absolute;
  bottom: -13px;
  left: 44px;
  width: 26px;
  height: 11px;
  background: inherit;
  border: 2px solid #000;
  border-top: none;
  border-radius: 0 0 13px 13px;
  z-index: 1;
}

.builder-step.puzzle-first::before { display: none; }
.builder-step.puzzle-last::after { display: none; }

.builder-step.selected {
  border: 3px solid #0057FF;
  box-shadow: 4px 4px 0 #0057FF;
}

.builder-step.selected::before,
.builder-step.selected::after {
  border-color: #0057FF;
  border-top: none;
}

.builder-step.selected::before { top: -3px; }
.builder-step.selected::after { bottom: -14px; }

.builder-step.ai { background: #F3E5F5; }

.builder-step-num {
  background: #B2EBF2;
  border: 2px solid #000;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  flex-shrink: 0;
}

.builder-step.ai .builder-step-num { background: #E1BEE7; }

.builder-step-body { min-width: 0; }

.builder-step-body p {
  margin: 0;
  font-family: 'Nunito', Arial, sans-serif;
  font-weight: 700;
}

.builder-step-body small {
  display: block;
  margin-top: 3px;
  font-family: 'Nunito', Arial, sans-serif;
  font-weight: 400;
  color: #777;
}

.builder-plusline {
  display: flex;
  justify-content: center;
  margin: -4px 0 8px;
}

.builder-plus {
  width: 28px;
  height: 28px;
  border: 2px solid #000;
  border-radius: 50%;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  font-weight: 900;
  cursor: pointer;
  box-shadow: 2px 2px 0 #000;
  padding: 0;
}

.builder-plus.open { background: #0057FF; color: #fff; cursor: default; box-shadow: none; }

.builder-suggest {
  border: 3px solid #0057FF;
  border-radius: 14px;
  background: #E3F2FD;
  padding: 14px 16px;
  margin-bottom: 12px;
}

.builder-suggest-ai {
  border-color: #AA00FF;
  background: #F3E5F5;
}

.builder-suggest-ai .builder-plus.open { background: #AA00FF; }

.builder-suggest-head {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: 'Nunito', Arial, sans-serif;
  font-weight: 800;
  margin-bottom: 10px;
}

.builder-suggest-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 8px;
}

.builder-tile.sug { position: relative; margin-bottom: 0; }

.builder-tile.sug small {
  font-weight: 400;
  color: #555;
  font-size: 0.72rem;
  line-height: 1.25;
}

.builder-why {
  position: absolute;
  top: -10px;
  right: 8px;
  background: #FFD600;
  border: 2px solid #000;
  border-radius: 999px;
  font-size: 0.6rem;
  font-weight: 800;
  text-transform: uppercase;
  padding: 1px 8px;
}

.builder-suggest-foot { margin-top: 10px; display: flex; gap: 8px; flex-wrap: wrap; }

/* Browse-all mode: the popover shows every step in its palette groups */
.builder-browse-group {
  margin: 12px 0 6px;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-soft, #555);
}
.builder-suggest-browse .builder-suggest-row { margin-top: 0; }

.builder-suggest-all {
  font-family: 'Nunito', Arial, sans-serif;
  font-weight: 800;
  font-size: 0.8rem;
  border: 2px solid #000;
  border-radius: 999px;
  background: #fff;
  padding: 5px 14px;
  cursor: pointer;
}

.builder-done {
  border: 3px solid #00C853;
  border-radius: 14px;
  background: #E8F5E9;
  padding: 18px 20px;
  margin-bottom: 12px;
}

.builder-done h3 {
  font-size: 1rem;
  text-transform: uppercase;
  margin: 0 0 4px;
}

.builder-done-check {
  font-family: 'Nunito', Arial, sans-serif;
  font-size: 0.82rem;
  font-weight: 700;
  color: #2E7D32;
  margin: 0 0 12px;
}

.builder-done-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }

.builder-done-btn {
  font-size: 0.85rem;
  text-transform: uppercase;
  padding: 12px 20px;
  border: 3px solid #000;
  border-radius: 12px;
  cursor: pointer;
  font-family: inherit;
  font-weight: 900;
}

.builder-done-btn.primary { background: #0057FF; color: #fff; box-shadow: 4px 4px 0 #000; }
.builder-done-btn.secondary { background: #fff; }

.builder-done-link {
  font-family: 'Nunito', Arial, sans-serif;
  font-weight: 800;
  font-size: 0.85rem;
  color: #555;
  text-decoration: underline;
  cursor: pointer;
  background: none;
  border: none;
}

#builder-rail {
  width: 320px;
  flex-shrink: 0;
  background: #FFF9C4;
  border-left: 3px solid #000;
  overflow-y: auto;
  padding: 14px;
}

#builder-rail-tabs { display: flex; gap: 6px; margin-bottom: 12px; flex-wrap: wrap; }

.builder-tab {
  font-family: 'Nunito', Arial, sans-serif;
  font-size: 0.75rem;
  font-weight: 800;
  padding: 6px 12px;
  border: 2px solid #000;
  border-radius: 999px;
  background: #fff;
  color: #555;
  cursor: pointer;
}

.builder-tab.active { background: #000; color: #fff; }

/* The relocated Activity settings sidebar loses its sidebar chrome */
#builder-rail #settings-panel {
  width: auto;
  border-right: none;
  padding: 0;
  background: transparent;
  overflow: visible;
}

#builder-rail #settings-panel.builder-hidden { display: none; }

/* The relocated step form fills the rail; its inline-form spacing rules
   don't apply here */
#builder-rail #phase-config-form { margin-top: 4px; }
#builder-rail #live-preview-section { margin-top: 10px; }

/* Builder card tools — quiet until hover */
.builder-step-tools {
  margin-left: auto;
  display: flex;
  gap: 4px;
  flex-shrink: 0;
  opacity: 0.25;
  transition: opacity 0.12s;
}

.builder-step:hover .builder-step-tools,
.builder-step.selected .builder-step-tools { opacity: 1; }

.builder-step-tool {
  width: 26px;
  height: 26px;
  border: 2px solid #000;
  border-radius: 8px;
  background: #fff;
  font-family: 'Nunito', Arial, sans-serif;
  font-weight: 800;
  font-size: 0.8rem;
  cursor: pointer;
  padding: 0;
}

.builder-step-tool:hover { background: #FFF9C4; }
.builder-step-del { color: #FF2D2D; border-color: #FF2D2D; }
.builder-step-del:hover { background: #FF2D2D; color: #fff; }

/* Header Host button — the customize-to-classroom shortcut */
/* The one primary on the cobalt header: go-live green (blue-on-blue
   disappeared; green matches the host screen's START! semantics). */
.btn-host {
  background: #00C853;
  color: #000;
}

.btn-host:hover { background: #00E676; }
.builder-tile-setup { opacity: 0.85; box-shadow: none; border-style: dashed; }

/* Builder rail: hide the loop power-feature (Technical view keeps it) */
#builder-rail .loop-collapsible { display: none; }

.builder-setup-nudge {
  font-family: 'Nunito', Arial, sans-serif;
  font-weight: 700;
  font-size: 0.85rem;
  background: #E3F2FD;
  border: 2px solid #0057FF;
  border-radius: 10px;
  padding: 8px 12px;
  margin-bottom: 10px;
}

/* The + between steps whispers until hovered (teacher: "overly prominent") */
.builder-plus:not(.open) {
  width: 22px;
  height: 22px;
  font-size: 0.8rem;
  box-shadow: none;
  opacity: 0.3;
  transition: opacity 0.12s, transform 0.12s;
}
.builder-plus:not(.open):hover {
  opacity: 1;
  transform: scale(1.15);
  box-shadow: 2px 2px 0 #000;
}
.builder-plusline { margin: -6px 0 6px; }

/* ════════════════════════════════════════════════════════════════
   PASTE-UP SKIN (docs/paper-layout-test/) — editor chrome re-theme.
   Ink header band, cut-paper buttons, gesso canvas, paper panels,
   square inset inputs, 2px radii. Phase-type and builder-tile
   category colors are kept: they are data coding, not decoration.
   Appended last so it wins every earlier rule it repeats.
   ════════════════════════════════════════════════════════════════ */

:root { --focus-ring: 3px solid #221E1C; }

body {
  font-family: 'Nunito', Arial, sans-serif;
  font-weight: 600;
  background: #EFE9DC;
  color: #221E1C;
}

/* Ink band header (the tool chrome) */
#editor-header {
  background: #221E1C;
  border-bottom: none;
  box-shadow: 0 3px 0 rgba(34,30,28,0.10);
}

.header-left h1 {
  font-family: 'Archivo Black', 'Arial Black', Arial, sans-serif;
  font-weight: 400;
  color: #FBF7EC;
  letter-spacing: 0.08em;
}

#editor-header .back-link { color: #CFC5B4; }
#editor-header .back-link:hover { color: #FBF7EC; text-decoration: none; }

/* Buttons: paper cuts with the two-step snap. Three header roles keep
   their hierarchy: primary = the one vermillion, attention = paper pops
   on ink, quiet = outlined ghost. */
.btn {
  border: none;
  border-radius: 2px;
  box-shadow: 2px 2px 0 rgba(34,30,28,0.30);
  font-family: 'Archivo Black', 'Arial Black', Arial, sans-serif;
  font-weight: 400;
  transition: transform 90ms steps(2, end), box-shadow 90ms steps(2, end);
}

.btn:hover:not(:disabled) {
  transform: translate(2px, 2px);
  box-shadow: 0 0 0 rgba(34,30,28,0.30);
}

.btn-primary { background: #D9481C; color: #FFF6EA; }
.btn-primary:hover { background: #D9481C; }

.btn-secondary { background: #FFFDF6; color: #221E1C; }
.btn-secondary:hover { background: #FFFDF6; }

/* The "+ Add X" buttons carry btn-secondary WITHOUT the .btn base, so
   they fell all the way back to the browser-default border. Give them
   the same paper-cut structure (scoped so .btn.btn-secondary header
   buttons keep their own padding). */
.btn-secondary:not(.btn) {
  padding: 6px 14px;
  border: none;
  border-radius: 2px;
  box-shadow: 2px 2px 0 rgba(34,30,28,0.30);
  font-family: 'Archivo Black', 'Arial Black', Arial, sans-serif;
  font-weight: 400;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  cursor: pointer;
  transition: transform 90ms steps(2, end), box-shadow 90ms steps(2, end);
}

.btn-secondary:not(.btn):hover:not(:disabled) {
  transform: translate(2px, 2px);
  box-shadow: 0 0 0 rgba(34,30,28,0.30);
}

.btn-ghost {
  background: transparent;
  color: #FBF7EC;
  border: none;
  box-shadow: inset 0 0 0 2px rgba(251,247,236,0.7);
}

.btn-ghost:hover {
  background: rgba(251,247,236,0.12);
  border: none;
  box-shadow: inset 0 0 0 2px #FBF7EC;
  transform: none;
}

.btn-danger { background: #FFFDF6; color: #AE3A16; box-shadow: 2px 2px 0 rgba(34,30,28,0.30), inset 0 0 0 1px #AE3A16; }

/* Panels: paper on the gesso */
#settings-panel,
#phase-panel,
#builder-palette {
  background: #FBF7EC;
  border-color: rgba(34,30,28,0.18);
}

#canvas-area, #phase-canvas, #builder-canvas { background: #EFE9DC; }

/* Inputs sit square with an inset shadow */
#settings-panel input, #settings-panel textarea, #settings-panel select,
#phase-panel input, #phase-panel textarea, #phase-panel select,
.sv-text, .sv-list-input, .sv-timer, .sar-input,
.picker-modal input, .picker-modal textarea {
  border: none;
  border-radius: 2px;
  background: #FFFDF6;
  box-shadow: inset 2px 2px 0 rgba(34,30,28,0.08), 0 0 0 1px rgba(34,30,28,0.16);
}

#settings-panel input:focus, #settings-panel textarea:focus, #settings-panel select:focus,
#phase-panel input:focus, #phase-panel textarea:focus, #phase-panel select:focus,
.sv-text:focus, .sv-list-input:focus, .sar-input:focus {
  border: none;
  outline: none;
  box-shadow: inset 2px 2px 0 rgba(34,30,28,0.08), 0 0 0 2px #221E1C;
}

.sv-token-box {
  border: none;
  border-radius: 2px;
  background: #FFFDF6;
  box-shadow: inset 2px 2px 0 rgba(34,30,28,0.08), 0 0 0 1px rgba(34,30,28,0.16);
  padding: 8px 10px;
}

.sv-token-box:focus-within {
  border: none;
  box-shadow: inset 2px 2px 0 rgba(34,30,28,0.08), 0 0 0 2px #221E1C;
}

/* Phase boxes: keep the type color coding, square the paper */
.phase-box {
  border-radius: 2px;
  box-shadow: 2px 2px 0 rgba(34,30,28,0.14);
}

/* Simple view: numbered sentence cards as paper scraps */
.sv-card {
  border: none;
  border-radius: 2px;
  background: #FFFDF6;
  box-shadow: 2px 2px 0 rgba(34,30,28,0.12), 0 0 0 1px rgba(34,30,28,0.08);
}

.sv-card.sv-muted { background: #F4EFE2; border: none; }

.sv-num {
  border: none;
  border-radius: 2px;
  background: #221E1C;
  color: #FBF7EC;
  font-family: 'Archivo Black', 'Arial Black', Arial, sans-serif;
  font-weight: 400;
  font-size: 0.85rem;
}

.sv-muted .sv-num { background: #857A66; }

/* Token chips: data references as little labeled scraps */
.sv-chip {
  background: #EFE9DC;
  border: none;
  box-shadow: 0 0 0 1px rgba(34,30,28,0.3);
  border-radius: 2px;
  color: #221E1C;
  font-weight: 800;
}

.sv-chip-delete { color: #857A66; }
.sv-chip-delete:hover { color: #AE3A16; }

.sv-action { color: #AE3A16; }
.sv-action-quiet { color: #857A66; }

.sv-list-add {
  border: 1px solid rgba(34,30,28,0.3);
  border-radius: 2px;
  color: #55503F;
}

.sv-list-add:hover { border-color: #221E1C; color: #221E1C; }

.sv-list-remove { border: none; border-radius: 2px; box-shadow: 0 0 0 1px rgba(34,30,28,0.2); color: #857A66; }
.sv-list-remove:hover { color: #AE3A16; box-shadow: 0 0 0 1px #AE3A16; }

/* Builder view: tiles keep their category colors, squared + pasted */
.builder-tile {
  border: none;
  border-radius: 2px;
  box-shadow: 2px 2px 0 rgba(34,30,28,0.18);
  transition: transform 90ms steps(2, end), box-shadow 90ms steps(2, end);
}

.builder-tile:hover {
  transform: translate(2px, 2px);
  box-shadow: 0 0 0 rgba(34,30,28,0.18);
}

.builder-step {
  border: none;
  border-radius: 2px;
  box-shadow: 2px 2px 0 rgba(34,30,28,0.12), 0 0 0 1px rgba(34,30,28,0.10);
}

/* View toggle chips flip to ink */
.view-toggle-btn.active { background: #221E1C; color: #FBF7EC; }

/* Modals: pasted sheets */
.picker-overlay, .sar-overlay { background: rgba(34, 30, 28, 0.5); }

.picker-modal, .sar-modal, .fix-preview-modal, .ask-ai-modal-inner, .review-panel {
  background: #FBF7EC;
  border: none;
  border-radius: 2px;
  box-shadow: 6px 7px 0 rgba(34,30,28,0.25);
}

.picker-card {
  border: none;
  border-radius: 2px;
  background: #FFFDF6;
  box-shadow: 2px 2px 0 rgba(34,30,28,0.14);
  transition: transform 90ms steps(2, end), box-shadow 90ms steps(2, end);
}

.picker-card:hover {
  transform: translate(2px, 2px);
  box-shadow: 0 0 0 rgba(34,30,28,0.14);
}

.picker-title, .sar-title {
  font-family: 'EB Garamond', Georgia, serif;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  text-shadow: 1.5px 0 0 rgba(217,72,28,0.26), -1.5px 0 0 rgba(0,165,196,0.20);
}

.editor-toast {
  background: #221E1C;
  color: #FBF7EC;
  border: none;
  border-radius: 2px;
  box-shadow: 3px 3px 0 rgba(34,30,28,0.25);
}

/* Blue focus rings go ink on this surface */
:focus-visible { outline-color: #221E1C !important; }

/* Skin follow-ups: rules that live below the first skin block */
.btn-host { background: #D9481C; color: #FFF6EA; }
.btn-host:hover { background: #D9481C; }

.btn-add { background: #221E1C; color: #FBF7EC; }
.btn-add:hover { background: #221E1C; }

/* Unsaved-changes attention: paper pops on the ink band */
#save-status.save-status-dirty ~ #save-btn {
  background: #FFFDF6;
  color: #221E1C;
  border-color: transparent;
}

#save-status.save-status-dirty ~ #save-btn:hover { background: #FFFDF6; }

.save-status-clean { color: #CFC5B4; }
.save-status-dirty { color: #FFC3DC; }

/* ════════════════════════════════════════════════════════════════
   PASTE-UP SKIN, PASS 2 — Builder view + rail + advanced settings.
   The rail hosts the relocated settings forms, so it needs its own
   input coverage. Role-coded section bands and step-category tints
   keep their hues (data coding) but square onto paper geometry.
   ════════════════════════════════════════════════════════════════ */

/* Header view toggle: a scrap holding two chips, active flips to ink */
.view-toggle {
  background: #FFFDF6;
  border: none;
  border-radius: 2px;
  box-shadow: 2px 2px 0 rgba(34,30,28,0.30);
  padding: 3px;
}

.view-toggle-btn {
  border-radius: 2px;
  color: #55503F;
  font-family: 'Archivo Black', 'Arial Black', Arial, sans-serif;
  font-weight: 400;
}

/* More-menu dropdown: a pasted sheet with plain scrap items */
.header-menu-items {
  background: #FBF7EC;
  border: none;
  border-radius: 2px;
  box-shadow: 4px 5px 0 rgba(34,30,28,0.25);
}

.header-menu-items .btn {
  background: #FFFDF6;
  color: #221E1C;
  box-shadow: 2px 2px 0 rgba(34,30,28,0.16);
}

.header-menu-items .btn:hover { background: #FFFDF6; }

/* The builder rail: sheet, not yellow */
#builder-rail {
  background: #FBF7EC;
  border-left: 1px solid rgba(34,30,28,0.18);
}

.builder-tab {
  border: none;
  border-radius: 2px;
  background: #FFFDF6;
  box-shadow: 2px 2px 0 rgba(34,30,28,0.14);
  color: #55503F;
}

.builder-tab.active { background: #221E1C; color: #FBF7EC; }

/* Relocated settings forms: rail inputs sit square with inset shadows
   (the #settings-panel/#phase-panel selectors stop matching here) */
#builder-rail input, #builder-rail textarea, #builder-rail select,
#builder-rail-body input, #builder-rail-body textarea, #builder-rail-body select {
  border: none;
  border-radius: 2px;
  background: #FFFDF6;
  box-shadow: inset 2px 2px 0 rgba(34,30,28,0.08), 0 0 0 1px rgba(34,30,28,0.16);
}

#builder-rail input:focus, #builder-rail textarea:focus, #builder-rail select:focus,
#builder-rail-body input:focus, #builder-rail-body textarea:focus, #builder-rail-body select:focus {
  border: none;
  outline: none;
  box-shadow: inset 2px 2px 0 rgba(34,30,28,0.08), 0 0 0 2px #221E1C;
}

#builder-rail input[type="checkbox"], #builder-rail-body input[type="checkbox"] {
  box-shadow: none;
}

/* Role-coded section bands keep their hues, squared onto paper */
/* Section headers: paper strips, the role color survives as a left
   edge chip (data coding) instead of a pastel field fill. */
.config-section-header.role-section-host,
.config-section-header.role-section-player,
.config-section-header.role-section-ai,
.config-section-header.role-section-both,
.config-section-header.role-section-flow {
  background: #FFFDF6;
  border: none;
  border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(34,30,28,0.18);
}

.config-section-header.role-section-host   { border-left: 6px solid #DBEAFE; }
.config-section-header.role-section-player { border-left: 6px solid #DCFCE7; }
.config-section-header.role-section-ai     { border-left: 6px solid #F3E8FF; }
.config-section-header.role-section-both   { border-left: 6px solid #FEF9C3; }
.config-section-header.role-section-flow   { border-left: 6px solid #F1F5F9; }

.config-section-header { border-top-color: rgba(34,30,28,0.18); color: #55503F; }

/* Advanced/optional collapsible toggles: scrap paper strips */
.advanced-toggle {
  background: #FFFDF6;
  border: none;
  border-radius: 2px;
  box-shadow: 2px 2px 0 rgba(34,30,28,0.14), 0 0 0 1px rgba(34,30,28,0.10);
}

.advanced-toggle:hover { background: #FFFDF6; filter: none; box-shadow: 1px 1px 0 rgba(34,30,28,0.14), 0 0 0 2px #221E1C; }

.advanced-fields {
  border: none;
  border-radius: 0 0 2px 2px;
  background: rgba(255,253,246,0.6);
  box-shadow: 0 0 0 1px rgba(34,30,28,0.12);
}

/* Builder canvas cards: puzzle pieces on the gesso */
.builder-step::before {
  background: #EFE9DC;
  border-color: #221E1C;
  border-top: none;
}

.builder-step::after { border-color: #221E1C; border-top: none; }

/* Selection reads as the ink ring, not cobalt */
.builder-step.selected {
  border: 3px solid #221E1C;
  box-shadow: 4px 4px 0 rgba(34,30,28,0.25);
}

.builder-step.selected::before,
.builder-step.selected::after {
  border-color: #221E1C;
  border-top: none;
}

.builder-step-num { border-radius: 2px; border: none; box-shadow: 0 0 0 1px rgba(34,30,28,0.25); }

/* Step tools: visible enough to find, quiet enough to ignore */
.builder-step-tools { opacity: 0.45; }

.builder-step-tool {
  border: none;
  border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(34,30,28,0.3);
}

.builder-step-tool:hover { background: #EFE9DC; }
.builder-step-del { color: #AE3A16; box-shadow: 0 0 0 1px #AE3A16; }
.builder-step-del:hover { background: #AE3A16; color: #FFF6EA; }

/* The inline "what happens next" change chip: square paper, not the
   old rounded black outline. */
.compact-next-change {
  border: none;
  border-radius: 2px;
  background: #FFFDF6;
  box-shadow: 0 0 0 1px rgba(34,30,28,0.3);
}

.compact-next-change:hover { background: #EFE9DC; }

/* Native checkbox/radio glyphs go ink, not browser blue */
input[type="checkbox"], input[type="radio"] { accent-color: #221E1C; }

/* The "Goes to" chip wrapper: scrap strip, not the old outlined box */
.compact-next-ref {
  background: #FFFDF6;
  border: none;
  border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(34,30,28,0.18);
}

/* Rail meta actions (Ask AI, Show Preview) were still the old purple
   and cobalt pills. Paper cuts with the snap. */
.ask-step-btn,
#toggle-preview-btn {
  background: #FFFDF6;
  color: #221E1C;
  border: none;
  border-radius: 2px;
  box-shadow: 2px 2px 0 rgba(34,30,28,0.30);
  font-family: 'Archivo Black', 'Arial Black', Arial, sans-serif;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-size: 0.72rem;
  transition: transform 90ms steps(2, end), box-shadow 90ms steps(2, end);
}

.ask-step-btn:hover,
#toggle-preview-btn:hover {
  background: #FFFDF6;
  transform: translate(2px, 2px);
  box-shadow: 0 0 0 rgba(34,30,28,0.30);
}

/* Delete Step carries btn-danger without the .btn base: outlined
   vermillion strip, fills on hover (same idiom as the card ✕). */
.btn-danger:not(.btn) {
  padding: 6px 14px;
  background: #FFFDF6;
  color: #AE3A16;
  border: none;
  border-radius: 2px;
  box-shadow: 0 0 0 1px #AE3A16;
  font-family: 'Archivo Black', 'Arial Black', Arial, sans-serif;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-size: 0.72rem;
  cursor: pointer;
}

.btn-danger:not(.btn):hover { background: #AE3A16; color: #FFF6EA; }

.delete-phase-section { border-top: 1px solid rgba(34,30,28,0.18); }

/* Step cards drop the pastel coding: number chips and the AI tint go
   paper (the palette tiles keep their category colors; on the canvas
   everything reads as one paper system). */
.builder-step-num { background: #FFFDF6; }
.builder-step.ai { background: #fff; }
.builder-step.ai .builder-step-num { background: #FFFDF6; }

/* Insert dots + suggestion popover */
.builder-plus {
  border: none;
  border-radius: 2px;
  background: #FFFDF6;
  box-shadow: 2px 2px 0 rgba(34,30,28,0.16);
}

.builder-plus.open { background: #221E1C; color: #FBF7EC; box-shadow: none; }

.builder-suggest {
  border: none;
  border-radius: 2px;
  background: #FBF7EC;
  box-shadow: 3px 3px 0 rgba(34,30,28,0.14), 0 0 0 2px #221E1C;
}

.builder-suggest-ai {
  background: #F3E5F5;
  box-shadow: 3px 3px 0 rgba(34,30,28,0.14), 0 0 0 2px #221E1C;
}

.builder-suggest-ai .builder-plus.open { background: #221E1C; }

.builder-why {
  background: #FFFDF6;
  border: none;
  border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(34,30,28,0.3);
}

.builder-suggest-all {
  border: none;
  border-radius: 2px;
  background: #FFFDF6;
  box-shadow: 2px 2px 0 rgba(34,30,28,0.14);
}

/* "Your activity is ready": a paper sheet with the loud ring */
.builder-done {
  border: none;
  border-radius: 2px;
  background: #FBF7EC;
  box-shadow: 3px 3px 0 rgba(34,30,28,0.12), 0 0 0 2px #D9481C;
}

.builder-done-check { color: #55503F; }

.builder-done-btn {
  border: none;
  border-radius: 2px;
  box-shadow: 3px 3px 0 rgba(34,30,28,0.18);
  font-family: 'Archivo Black', 'Arial Black', Arial, sans-serif;
  font-weight: 400;
  transition: transform 90ms steps(2, end), box-shadow 90ms steps(2, end);
}

.builder-done-btn:hover {
  transform: translate(2px, 2px);
  box-shadow: 0 0 0 rgba(34,30,28,0.18);
}

.builder-done-btn.primary { background: #D9481C; color: #FFF6EA; transform: rotate(-0.8deg); }
.builder-done-btn.primary:hover { transform: rotate(-0.8deg) translate(2px, 2px); }
.builder-done-btn.secondary { background: #FFFDF6; color: #221E1C; }

.builder-done-link { color: #6E6353; }

/* Technical view: toolbar strip + inline phase-box editors onto paper */
#canvas-toolbar {
  background: #FBF7EC;
  border-bottom: 1px solid rgba(34,30,28,0.18);
}

#canvas-loading { color: #6E6353; text-transform: none; }
#canvas-error { color: #AE3A16; text-transform: none; }

.phase-box { border-radius: 2px; }

.phase-box-primary-input {
  border: none;
  border-radius: 2px;
  background: #FFFDF6;
  box-shadow: inset 2px 2px 0 rgba(34,30,28,0.08), 0 0 0 1px rgba(34,30,28,0.20);
}

.phase-box-primary-input:focus {
  border: none;
  box-shadow: inset 2px 2px 0 rgba(34,30,28,0.08), 0 0 0 2px #221E1C;
}

.phase-box-primary-summary {
  border-radius: 2px;
  background: rgba(255,253,246,0.75);
  box-shadow: 0 0 0 1px rgba(34,30,28,0.14);
}

.phase-box-primary-preview { border-radius: 2px; }