/* ─── Lira Studio — Design System ─── */

:root {
  /* Lira brand colors */
  --lira-teal: #09ADC8;
  --lira-green: #77C033;
  --lira-purple: #932F91;
  --lira-orange: #F08F1E;

  /* Derived tints */
  --teal-light: #E8F7FA;
  --teal-hover: #078DA3;
  --green-light: #F0F8E6;
  --purple-light: #F5EAF5;
  --purple-deep: #7A2778;
  --orange-light: #FEF3E4;

  /* Surfaces — all light */
  --bg: #F7F8FA;
  --surface: #FFFFFF;
  --surface-alt: #F2F3F5;
  --sidebar-bg: #FFFFFF;
  --sidebar-border: #E8E9EB;
  /* Shared width for the three open side panels (Fields, Add Content, Ask). */
  --side-panel-width: 320px;

  /* Borders */
  --border: #E0E2E6;
  --border-light: #ECEDF0;
  --border-focus: var(--lira-purple);

  /* Text */
  --text: #1A1D23;
  --text-sec: #44474F;
  --text-dim: #4D515A;
  --text-inverse: #FFFFFF;

  /* Accent — purple is primary */
  --accent: var(--lira-purple);
  --accent-light: var(--purple-light);
  --accent-hover: var(--purple-deep);

  /* Semantic */
  --scaffolding-bg: #FEF3E4;
  --scaffolding-border: #F8DDB8;
  --danger: #D94452;
  --danger-light: #FDF0F1;

  /* Typography */
  --font-display: 'Raleway', sans-serif;
  --font-body: 'Poppins', sans-serif;
  --font-mono: 'SF Mono', 'Fira Code', 'Consolas', monospace;

  /* Level colors — Lira brand quartet */
  --level-0: var(--lira-purple);
  --level-1: var(--lira-orange);
  --level-2: var(--lira-green);
  --level-3: var(--lira-purple);
  --level-4: var(--lira-orange);

  /* Shadows */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.12);
}

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

body {
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  font-weight: 400;
  font-size: 14px;
  line-height: 1.5;
}

button {
  cursor: pointer;
  font-family: var(--font-body);
}

button:disabled {
  cursor: default;
  opacity: 0.45;
}

a {
  color: var(--accent);
  text-decoration: none;
}

a:hover {
  color: var(--accent-hover);
}

/* ─── Setup Screen ─── */

.setup-container {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px;
  background: var(--bg);
}

.setup-box {
  max-width: 620px;
  width: 100%;
  background: var(--surface);
  border-radius: 16px;
  padding: 40px;
  box-shadow: var(--shadow-lg);
}

.setup-logo {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 24px;
}

.setup-title {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 4px;
  letter-spacing: -0.01em;
}

.setup-subtitle {
  font-size: 14px;
  color: var(--text-sec);
  margin-bottom: 28px;
  font-weight: 400;
}

/* Tabs */
.tabs {
  display: flex;
  gap: 0;
  margin-bottom: 24px;
  border-bottom: 2px solid var(--border);
}

.tab-btn {
  font-family: var(--font-body);
  font-size: 13px;
  padding: 10px 20px;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--text-sec);
  margin-bottom: -2px;
  font-weight: 400;
  transition: all 0.15s;
}

.tab-btn:hover {
  color: var(--text);
}

.tab-btn.active {
  font-weight: 600;
  border-bottom-color: var(--accent);
  color: var(--accent);
}

/* Level rows */
.level-row {
  margin-bottom: 18px;
}

.level-row-label {
  font-family: var(--font-display);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-dim);
  margin-bottom: 8px;
  font-weight: 600;
}

.level-options {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.level-pill {
  font-family: var(--font-body);
  font-size: 13px;
  padding: 7px 18px;
  border-radius: 20px;
  border: 1.5px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font-weight: 400;
  position: relative;
  transition: all 0.15s;
}

.level-pill:hover {
  border-color: var(--accent);
}

.level-pill.selected {
  border-color: var(--lira-purple);
  background: var(--purple-light);
  color: var(--purple-deep);
  font-weight: 600;
}

.level-pill .order-num {
  position: absolute;
  left: 7px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 9px;
  font-weight: 700;
}

/* Structure preview */
.structure-preview {
  margin-top: 20px;
  padding: 14px 16px;
  background: var(--surface-alt);
  border-radius: 8px;
  border: 1px solid var(--border);
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-sec);
}

/* Project Settings — consequence notices on Structure / Context panes.
   Structure (amber) can strand content; Context (neutral) is non-destructive. */
.settings-warn {
  display: flex;
  gap: 9px;
  align-items: flex-start;
  margin-bottom: 18px;
  padding: 11px 13px;
  border-radius: 8px;
  font-size: 12.5px;
  line-height: 1.5;
}

.settings-warn-glyph {
  flex: 0 0 auto;
  font-size: 13px;
  line-height: 1.5;
}

.settings-warn-text {
  color: var(--text-sec);
}

.settings-warn-text strong {
  color: var(--text);
  font-weight: 600;
}

.settings-warn-structure {
  background: var(--warning-light, #FCF6E8);
  border: 1px solid var(--warning, #C98A00);
}

.settings-warn-structure .settings-warn-glyph {
  color: var(--warning, #C98A00);
}

.settings-warn-context {
  background: var(--surface-alt);
  border: 1px solid var(--border);
}

.settings-warn-context .settings-warn-glyph {
  color: var(--text-dim);
}


/* Constraint groups */
.constraint-group {
  margin-bottom: 20px;
}

.constraint-label {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 8px;
}

.constraint-options {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.constraint-subgroup {
  margin-bottom: 10px;
}

.constraint-sublabel {
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 600;
  color: var(--text-muted, #888);
  margin-bottom: 5px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.constraint-pill {
  font-family: var(--font-body);
  font-size: 12px;
  padding: 5px 14px;
  border-radius: 16px;
  border: 1.5px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font-weight: 400;
  transition: all 0.15s;
}

.constraint-pill:hover {
  border-color: var(--accent);
}

.constraint-pill.selected {
  border-color: var(--lira-purple);
  background: var(--purple-light);
  color: var(--purple-deep);
  font-weight: 500;
}

/* ─── Field Types tab (custom field types) ─── */

.field-types-intro {
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--text-sec);
  line-height: 1.5;
  margin-bottom: 16px;
}

.field-types-intro strong {
  color: var(--text);
  font-weight: 600;
}

.field-types-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 18px;
  max-height: 200px;
  overflow-y: auto;
}

.field-type-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background: var(--surface);
  border: 1px solid var(--border-light);
  border-radius: 8px;
}

.field-type-icon {
  font-family: var(--font-mono);
  font-size: 16px;
  color: var(--text-sec);
  width: 24px;
  text-align: center;
  flex-shrink: 0;
}

.field-type-text {
  flex: 1;
  min-width: 0;
}

.field-type-label {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
}

.field-type-placeholder {
  font-family: var(--font-body);
  font-size: 11px;
  color: var(--text-dim);
  font-style: italic;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.field-type-action {
  border: none;
  background: none;
  color: var(--text-dim);
  font-size: 16px;
  width: 24px;
  height: 24px;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.15s;
}

.field-type-action.danger:hover {
  color: var(--danger);
  background: var(--danger-light);
}

.field-types-empty {
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--text-dim);
  font-style: italic;
  padding: 16px 12px;
  text-align: center;
  border: 1px dashed var(--border);
  border-radius: 8px;
}

.field-type-form {
  border-top: 1px solid var(--border-light);
  padding-top: 16px;
}

.field-type-form-label {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 12px;
}

.field-type-form-row {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  margin-bottom: 12px;
}

.field-type-form-sublabel {
  display: block;
  font-family: var(--font-display);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-dim);
  font-weight: 700;
  margin-bottom: 5px;
}

.field-type-icon-picker {
  flex-shrink: 0;
}

.icon-picker-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 3px;
  width: 145px;
}

.icon-picker-btn {
  font-family: var(--font-mono);
  font-size: 14px;
  width: 27px;
  height: 27px;
  border: 1.5px solid transparent;
  background: var(--surface-alt);
  color: var(--text-sec);
  border-radius: 5px;
  cursor: pointer;
  transition: all 0.12s;
  display: flex;
  align-items: center;
  justify-content: center;
}

.icon-picker-btn:hover {
  border-color: var(--border);
  background: var(--surface);
}

.icon-picker-btn.selected {
  border-color: var(--accent);
  background: var(--accent-light);
  color: var(--accent-hover);
}

.field-type-text-inputs {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.field-type-input {
  font-family: var(--font-body);
  font-size: 13px;
  padding: 7px 10px;
  border: 1.5px solid var(--border);
  border-radius: 6px;
  background: var(--surface);
  color: var(--text);
  margin-bottom: 10px;
  outline: none;
  transition: border-color 0.15s;
}

.field-type-input:last-child {
  margin-bottom: 0;
}

.field-type-input:focus {
  border-color: var(--accent);
}

.field-type-form-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.btn-small {
  font-size: 12px;
  padding: 6px 14px;
  border-radius: 6px;
}

.field-type-form-status {
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--lira-green);
  font-weight: 500;
}

.field-type-form-status.error {
  color: var(--danger);
}

/* ─── Team tab ─── */

.team-intro {
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--text-sec);
  line-height: 1.5;
  margin-bottom: 18px;
}

.team-mode-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 18px;
}

.team-mode-card {
  font-family: var(--font-body);
  padding: 16px 12px;
  border-radius: 10px;
  border: 1.5px solid var(--border);
  background: var(--surface);
  text-align: left;
  transition: all 0.15s;
  cursor: pointer;
}

.team-mode-card:hover {
  border-color: var(--accent);
}

.team-mode-card.selected {
  border-color: var(--lira-purple);
  background: var(--purple-light);
}

.team-mode-icon {
  font-size: 18px;
  color: var(--accent);
  font-weight: 600;
  margin-bottom: 6px;
  letter-spacing: 2px;
}

.team-mode-label {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 3px;
}

.team-mode-blurb {
  font-size: 12px;
  color: var(--text-sec);
  line-height: 1.4;
}

.team-details {
  border-top: 1px solid var(--border-light);
  padding-top: 18px;
}

.team-field-label {
  display: block;
  font-family: var(--font-display);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-dim);
  margin-bottom: 6px;
  font-weight: 600;
}

.team-input {
  font-family: var(--font-body);
  font-size: 13px;
  padding: 8px 12px;
  border-radius: 6px;
  border: 1.5px solid var(--border);
  background: var(--surface);
  color: var(--text);
  width: 100%;
  transition: border-color 0.15s;
}

.team-input:focus {
  outline: none;
  border-color: var(--accent);
}

.team-members-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 10px;
}

.team-member-row {
  display: grid;
  grid-template-columns: 1fr 1.3fr auto auto;
  gap: 8px;
  align-items: center;
}

.team-member-row .team-input {
  padding: 7px 10px;
  font-size: 12px;
}

.team-member-role {
  cursor: pointer;
  min-width: 100px;
}

.team-member-remove {
  font-size: 18px;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  border: none;
  background: none;
  color: var(--text-dim);
  cursor: pointer;
  transition: all 0.15s;
}

.team-member-remove:hover {
  background: var(--danger-light);
  color: var(--danger);
}

.team-add-member {
  font-size: 12px;
  color: var(--accent);
  padding: 4px 0;
  cursor: pointer;
}

.team-add-member:hover {
  color: var(--accent-hover);
}

.team-note {
  margin-top: 14px;
  padding: 10px 12px;
  background: var(--surface-alt);
  border-radius: 6px;
  font-size: 11px;
  color: var(--text-sec);
  line-height: 1.5;
}

/* ─── Libraries tab ─── */

.libraries-intro {
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--text-sec);
  line-height: 1.5;
  margin-bottom: 16px;
}

.libraries-subnav {
  display: flex;
  gap: 4px;
  margin-bottom: 16px;
  padding-bottom: 2px;
  border-bottom: 1px solid var(--border-light);
}

.library-subnav-btn {
  font-family: var(--font-body);
  font-size: 12px;
  padding: 8px 12px;
  border-radius: 6px 6px 0 0;
  border: none;
  background: none;
  color: var(--text-sec);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: all 0.15s;
  position: relative;
  margin-bottom: -1px;
}

.library-subnav-btn:hover {
  color: var(--text);
  background: var(--surface-alt);
}

.library-subnav-btn.active {
  color: var(--accent);
  background: var(--accent-light);
  font-weight: 600;
}

.library-subnav-count {
  font-size: 10px;
  font-weight: 600;
  padding: 1px 6px;
  border-radius: 8px;
  background: var(--border-light);
  color: var(--text-sec);
  min-width: 18px;
  text-align: center;
}

.library-subnav-btn.active .library-subnav-count {
  background: var(--accent);
  color: var(--text-inverse);
}

.library-pane-blurb {
  font-size: 12px;
  color: var(--text-sec);
  margin-bottom: 14px;
  font-style: italic;
}

.library-sets-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 360px;
  overflow-y: auto;
  padding-right: 4px;
}

.library-set-card {
  display: flex;
  align-items: stretch;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 8px;
  border: 1.5px solid var(--border);
  background: var(--surface);
  transition: all 0.15s;
}

.library-set-card.staged {
  border-color: #10B981;
  border-left-width: 3px;
  background: linear-gradient(to right, rgba(16, 185, 129, 0.04) 0%, var(--surface) 30%);
}

.library-set-main {
  flex: 1;
  min-width: 0;
}

.library-set-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
  flex-wrap: wrap;
}

.library-set-name {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}

.library-set-count {
  font-size: 11px;
  color: var(--text-dim);
  margin-left: auto;
}

.library-set-desc {
  font-size: 12px;
  color: var(--text-sec);
  line-height: 1.45;
  margin-bottom: 6px;
}

.library-set-samples {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.library-sample-chip {
  font-size: 10px;
  padding: 2px 8px;
  border-radius: 10px;
  background: var(--surface-alt);
  color: var(--text-sec);
  font-weight: 400;
}

.library-stage-btn {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
  padding: 0 14px;
  border-radius: 6px;
  border: 1.5px solid var(--border);
  background: var(--surface);
  color: var(--text-sec);
  cursor: pointer;
  white-space: nowrap;
  align-self: center;
  min-width: 120px;
  height: 34px;
  transition: all 0.15s;
}

.library-stage-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.library-stage-btn.staged {
  border-color: #10B981;
  background: #E1F5EE;
  color: #085041;
}

.library-stage-btn.staged:hover {
  background: #FDF0F1;
  border-color: var(--danger);
  color: var(--danger);
}

.library-stage-btn.staged:hover .stage-btn-label::before {
  content: "− Remove";
}

.library-stage-btn.staged:hover .stage-btn-label {
  font-size: 0;
}

.library-stage-btn.staged:hover .stage-btn-label::before {
  font-size: 12px;
}

.library-pane-footer {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--border-light);
  text-align: center;
}

.library-pane-footer-hint {
  font-size: 11px;
  color: var(--text-dim);
  font-style: italic;
}

/* ─── Welcome dialog — walkthrough / edit mode ─── */

/* Default: hide both sets of nav; mode classes reveal the right one */
.welcome-stepper {
  display: none;
}

.welcome-tabs {
  display: none !important;
}

.welcome-back-btn,
.welcome-next-btn,
.welcome-done-btn {
  display: none;
}

/* Walkthrough mode: stepper + Back/Next */
.welcome-mode-walkthrough .welcome-stepper {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 22px 0;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--border-light);
}

.welcome-mode-walkthrough .welcome-back-btn,
.welcome-mode-walkthrough .welcome-next-btn {
  display: inline-flex;
  align-items: center;
}

/* Edit mode: tab bar + Done */
.welcome-mode-edit .welcome-tabs {
  display: flex !important;
}

.welcome-mode-edit .welcome-done-btn {
  display: inline-flex;
  align-items: center;
}

/* Stepper dots */
.welcome-step-dot {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px 6px 8px;
  border-radius: 20px;
  border: none;
  background: none;
  color: var(--text-dim);
  font-family: var(--font-body);
  font-size: 12px;
  cursor: pointer;
  transition: all 0.15s;
}

.welcome-step-dot:hover:not(:disabled) {
  color: var(--text-sec);
}

.welcome-step-dot:disabled {
  cursor: default;
  opacity: 0.6;
}

.welcome-step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--surface-alt);
  color: var(--text-dim);
  font-size: 11px;
  font-weight: 600;
  transition: all 0.15s;
}

.welcome-step-dot.visited .welcome-step-num {
  background: var(--accent-light);
  color: var(--accent);
}

.welcome-step-dot.active {
  color: var(--text);
}

.welcome-step-dot.active .welcome-step-num {
  background: var(--accent);
  color: var(--text-inverse);
}

.welcome-step-name {
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 500;
}

.welcome-step-dot.active .welcome-step-name {
  font-weight: 600;
}

.welcome-step-sep {
  flex: 1;
  height: 1px;
  background: var(--border-light);
  max-width: 28px;
}

/* Footer */
.welcome-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px solid var(--border-light);
}

.welcome-footer-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-width: 0;
  flex: 1;
}

.welcome-mode-edit .welcome-footer-center {
  display: none;
}

.welcome-footer-step {
  font-family: var(--font-display);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-dim);
  font-weight: 600;
}

.welcome-footer-hint {
  font-size: 11px;
  color: var(--lira-orange);
  text-align: center;
  min-height: 14px;
}

.welcome-footer-hint:empty {
  min-height: 0;
}

/* ─── Provenance badges — per the Libraries Spec ─── */
.provenance-badge {
  display: inline-block;
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 2px 7px;
  border-radius: 10px;
  line-height: 1.3;
}

.provenance-lira {
  background: #EEEDFE;
  color: #3C3489;
}

.provenance-mine {
  background: #E1F5EE;
  color: #085041;
}

.provenance-pack {
  background: #FAEEDA;
  color: #633806;
}

/* Setup actions */
.setup-actions {
  margin-top: 28px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.btn-primary {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  padding: 10px 28px;
  border-radius: 8px;
  border: none;
  background: var(--accent);
  color: var(--text-inverse);
  transition: background 0.15s;
}

.btn-primary:hover {
  background: var(--accent-hover);
  /* Anchor-styled .btn-primary (e.g. "Done — open workspace") would otherwise
     inherit the global a:hover color (deep purple) on hover — equal specificity,
     and the base .btn-primary white loses to it — turning the text invisible on
     the purple fill. Pin the inverse color so the button stays white on hover. */
  color: var(--text-inverse);
}

.btn-primary:disabled {
  background: var(--border);
  color: var(--text-dim);
}

.btn-secondary {
  font-family: var(--font-body);
  font-size: 13px;
  padding: 8px 16px;
  border-radius: 6px;
  border: 1.5px solid var(--border);
  background: var(--surface);
  color: var(--text);
  transition: all 0.15s;
}

.btn-secondary:hover {
  border-color: var(--text-dim);
}

.btn-text {
  font-family: var(--font-body);
  font-size: 12px;
  background: none;
  border: none;
  color: var(--text-dim);
}

.btn-text:hover {
  color: var(--text-sec);
}

.btn-danger {
  font-family: var(--font-body);
  font-size: 12px;
  padding: 6px 14px;
  border-radius: 6px;
  border: 1.5px solid var(--danger);
  background: none;
  color: var(--danger);
}

.btn-danger:hover {
  background: var(--danger-light);
}

/* ─── Studio Layout ─── */

.studio {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background: var(--bg);
}

/* Menu bar */
.menu-bar {
  display: flex;
  align-items: center;
  padding: 0 20px;
  height: 76px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  gap: 2px;
  box-shadow: var(--shadow-sm);
  z-index: 10;
}

.menu-bar-logo {
  height: 56px;
  width: auto;
  margin-right: 20px;
}

/* CSS Logo — colored squares + text */
.logo-squares {
  display: inline-grid;
  grid-template-columns: 8px 8px;
  grid-template-rows: 8px 8px;
  gap: 1px;
  flex-shrink: 0;
}

.logo-squares-lg {
  grid-template-columns: 11px 11px;
  grid-template-rows: 11px 11px;
  gap: 2px;
}

.sq {
  border-radius: 1px;
}

.sq-teal {
  background: var(--lira-teal);
}

.sq-green {
  background: var(--lira-green);
}

.sq-purple {
  background: var(--lira-purple);
}

.sq-orange {
  background: var(--lira-orange);
}

.logo-text {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.02em;
  line-height: 1;
}

.logo-text-lg {
  font-size: 26px;
}

.logo-sub {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 400;
  color: var(--text-sec);
  letter-spacing: 0.16em;
  margin-left: 2px;
  line-height: 1;
}

.menu-item {
  font-family: var(--font-body);
  font-size: 13px;
  padding: 6px 14px;
  border-radius: 6px;
  border: none;
  background: none;
  color: var(--text-sec);
  text-decoration: none;
  font-weight: 400;
  transition: all 0.15s;
}

.menu-item:hover {
  background: var(--surface-alt);
  color: var(--text);
}

.menu-item.active {
  background: var(--accent-light);
  color: var(--accent);
  font-weight: 500;
}

.menu-spacer {
  flex: 1;
}

.constraint-badge {
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--text-sec);
  background: var(--surface-alt);
  padding: 3px 9px;
  border-radius: 10px;
  border: 1px solid var(--border-light);
  margin-left: 2px;
}

/* Project switcher */
.project-switcher {
  position: relative;
}

.project-switcher-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: 1px solid transparent;
  border-radius: 6px;
  padding: 6px 10px;
  transition: all 0.15s;
}

.project-switcher-btn:hover {
  background: var(--surface-alt);
  border-color: var(--border);
}

.project-name {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.project-caret {
  font-size: 10px;
  color: var(--text-dim);
}

.project-menu {
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 4px;
  min-width: 240px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: var(--shadow-lg);
  z-index: 100;
  padding: 6px 0;
}

.project-menu-header {
  font-family: var(--font-display);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-dim);
  padding: 8px 14px 6px;
  font-weight: 600;
}

.project-menu-item {
  display: flex;
  align-items: center;
  padding: 7px 14px;
  gap: 6px;
  transition: background 0.1s;
}

.project-menu-item:hover {
  background: var(--surface-alt);
}

.project-menu-item.active {
  background: var(--accent-light);
}

.project-menu-item-name {
  flex: 1;
  font-size: 13px;
  font-weight: 400;
  color: var(--text);
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.project-menu-item.active .project-menu-item-name {
  font-weight: 500;
  color: var(--accent-hover);
}

.project-menu-action {
  background: none;
  border: none;
  font-size: 13px;
  color: var(--text-dim);
  padding: 2px 4px;
  border-radius: 4px;
  opacity: 0;
  transition: all 0.1s;
}

.project-menu-item:hover .project-menu-action {
  opacity: 1;
}

.project-menu-action:hover {
  color: var(--text);
  background: var(--surface-alt);
}

.project-menu-action.danger:hover {
  color: var(--danger);
  background: var(--danger-light);
}

.project-menu-divider {
  height: 1px;
  background: var(--border-light);
  margin: 4px 10px;
}

.project-menu-new {
  display: block;
  width: 100%;
  text-align: left;
  padding: 8px 14px;
  background: none;
  border: none;
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--accent);
  font-weight: 500;
  transition: background 0.1s;
}

.project-menu-new:hover {
  background: var(--surface-alt);
}

.project-menu-new-row {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
}

.project-menu-new-input {
  flex: 1;
  font-family: var(--font-body);
  font-size: 13px;
  padding: 6px 10px;
  border: 1.5px solid var(--border);
  border-radius: 6px;
  outline: none;
  background: var(--surface);
  color: var(--text);
}

.project-menu-new-input:focus {
  border-color: var(--accent);
}

.project-menu-new-submit {
  background: var(--accent);
  color: var(--text-inverse);
  border: none;
  border-radius: 6px;
  padding: 6px 10px;
  font-size: 13px;
  font-weight: 600;
  transition: background 0.15s;
}

.project-menu-new-submit:hover {
  background: var(--accent-hover);
}

/* ─── Libraries dropdown (menu bar) ─── */

.libraries-switcher {
  position: relative;
}

.user-switcher {
  position: relative;
  margin-left: 4px;
}

/* The User dropdown menu reuses the libraries-menu container styles but
   anchors to the right edge so it doesn't overflow the menu bar. */
.user-switcher .libraries-menu {
  left: auto;
  right: 0;
}

.libraries-switcher-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: none;
  border: none;
  padding: 6px 10px;
  font: inherit;
  color: inherit;
  cursor: pointer;
  border-radius: 6px;
}

.libraries-switcher-btn:hover {
  background: var(--surface-alt);
}

.libraries-switcher-btn.active {
  color: var(--accent-hover);
  font-weight: 500;
}

.libraries-caret {
  font-size: 10px;
  opacity: 0.7;
}

.libraries-menu {
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 4px;
  min-width: 220px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: var(--shadow-lg);
  z-index: 100;
  padding: 6px 0;
}

.libraries-menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  font-size: 13px;
  color: var(--text);
  text-decoration: none;
  transition: background 0.1s;
}

.libraries-menu-item:hover {
  background: var(--surface-alt);
}

.libraries-menu-item.active {
  background: var(--accent-light);
  color: var(--accent-hover);
  font-weight: 500;
}

/* First launch screen */
.first-launch {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px;
}

.first-launch-inner {
  text-align: center;
  max-width: 440px;
}

.first-launch-logo {
  height: 64px;
  margin-bottom: 24px;
}

.first-launch-heading {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 8px;
  letter-spacing: -0.01em;
}

.first-launch-sub {
  font-size: 15px;
  color: var(--text-sec);
  margin-bottom: 28px;
  font-weight: 400;
}

.first-launch-form {
  display: flex;
  gap: 8px;
  max-width: 380px;
  margin: 0 auto;
}

.first-launch-input {
  flex: 1;
  font-family: var(--font-body);
  font-size: 14px;
  padding: 10px 16px;
  border: 1.5px solid var(--border);
  border-radius: 8px;
  outline: none;
  background: var(--surface);
  color: var(--text);
}

.first-launch-input:focus {
  border-color: var(--accent);
}

.first-launch-input::placeholder {
  color: var(--text-dim);
  font-weight: 400;
}

.menu-nav-divider {
  width: 1px;
  height: 24px;
  background: var(--border);
  margin: 0 10px;
  flex-shrink: 0;
}

/* Studio body */
.studio-body {
  display: flex;
  flex: 1;
  overflow: hidden;
}

/* ─── Sidebar — Light ─── */

.sidebar {
  width: 270px;
  background: #FFFFFF;
  background: var(--sidebar-bg);
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  border-right: 1px solid #E8E9EB;
  border-right: 1px solid var(--sidebar-border);
}

.sidebar-header {
  padding: 16px 18px 12px;
  border-bottom: 1px solid var(--border);
}

.sidebar-header-title {
  font-family: var(--font-display);
  font-size: 13px;
  color: var(--text);
  font-weight: 600;
  letter-spacing: 0.02em;
}

.sidebar-header-sub {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-dim);
  margin-top: 2px;
}

.sidebar-scroll {
  flex: 1;
  overflow-y: auto;
}

.sidebar-section {
  padding: 12px 0 6px;
}

.sidebar-section-label {
  font-family: var(--font-display);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-dim);
  padding: 0 18px;
  margin-bottom: 6px;
  font-weight: 600;
}

.sidebar-divider {
  height: 1px;
  background: var(--border-light);
  margin: 4px 16px;
}

/* ─── Sidebar projects section (top of Dashboard sidebar) ─── */
/* Replaces the menu-bar project switcher dropdown on the Dashboard.
   Collapsed: header button shows the active project name as a pill.
   Expanded: flat list of projects + rename/delete + New project input. */

.sidebar-projects {
  padding: 14px 8px 8px;
}

.sidebar-projects-header {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  background: var(--surface-alt);
  border: 1px solid var(--border-light);
  border-radius: 8px;
  padding: 8px 10px;
  text-align: left;
  cursor: pointer;
  transition: all 0.15s ease;
}

.sidebar-projects-header:hover {
  border-color: var(--border);
  background: var(--surface);
}

.sidebar-projects-caret {
  font-size: 9px;
  color: var(--text-dim);
  width: 10px;
  text-align: center;
  flex-shrink: 0;
  transition: color 0.15s;
}

.sidebar-projects-header:hover .sidebar-projects-caret {
  color: var(--text-sec);
}

.sidebar-projects-label {
  font-family: var(--font-display);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-dim);
  font-weight: 600;
  flex-shrink: 0;
}

.sidebar-projects-active {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sidebar-projects-list {
  margin-top: 6px;
  padding: 4px 0;
}

.sidebar-project-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px 6px 12px;
  margin: 1px 2px;
  border-radius: 6px;
  border-left: 2px solid transparent;
  transition: background 0.1s;
}

.sidebar-project-item:hover {
  background: var(--surface-alt);
}

.sidebar-project-item.active {
  background: var(--accent-light);
  border-left-color: var(--accent);
}

.sidebar-project-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--text-dim);
  flex-shrink: 0;
  opacity: 0.5;
}

.sidebar-project-item.active .sidebar-project-dot {
  background: var(--accent);
  opacity: 1;
}

.sidebar-project-name {
  flex: 1;
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--text);
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 400;
}

.sidebar-project-item.active .sidebar-project-name {
  font-weight: 500;
  color: var(--accent-hover);
  cursor: default;
}

.sidebar-project-action {
  background: none;
  border: none;
  font-size: 12px;
  color: var(--text-dim);
  padding: 2px 4px;
  border-radius: 4px;
  opacity: 0;
  transition: all 0.1s;
  cursor: pointer;
}

.sidebar-project-item:hover .sidebar-project-action {
  opacity: 1;
}

.sidebar-project-action:hover {
  color: var(--text);
  background: var(--surface);
}

.sidebar-project-action.danger:hover {
  color: var(--danger);
  background: var(--danger-light);
}

.sidebar-project-new {
  display: block;
  width: calc(100% - 4px);
  text-align: left;
  background: none;
  border: none;
  padding: 7px 12px;
  margin: 4px 2px 0;
  border-radius: 6px;
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--accent);
  font-weight: 500;
  cursor: pointer;
  transition: background 0.1s;
}

.sidebar-project-new:hover {
  background: var(--accent-light);
}

.sidebar-project-new-row {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 6px;
  margin-top: 4px;
}

.sidebar-project-new-input {
  flex: 1;
  font-family: var(--font-body);
  font-size: 12px;
  padding: 6px 9px;
  border: 1.5px solid var(--border);
  border-radius: 6px;
  outline: none;
  background: var(--surface);
  color: var(--text);
  min-width: 0;
}

.sidebar-project-new-input:focus {
  border-color: var(--accent);
}

.sidebar-project-new-submit {
  background: var(--accent);
  color: var(--text-inverse);
  border: none;
  border-radius: 6px;
  padding: 6px 10px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
  flex-shrink: 0;
}

.sidebar-project-new-submit:hover {
  background: var(--accent-hover);
}

/* Flash hint — used by clickAddField when no node is selected to point
   the author at the canvas. (Replaces the old sidebar-Outline-flash.) */
.canvas-node-inner.flash-hint {
  box-shadow: 0 0 0 2px var(--accent), 0 4px 12px rgba(9, 173, 200, 0.18);
  transition: box-shadow 0.2s ease;
}

/* Top-level + Add at the bottom of canvas-inner (replaces the sidebar
   tree-add-btn that used to host top-level adds). */
.canvas-add-root {
  display: block;
  width: 100%;
  background: none;
  border: 1.5px dashed var(--border);
  border-radius: 8px;
  padding: 12px;
  margin-top: 12px;
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--accent);
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s;
}

.canvas-add-root:hover {
  border-color: var(--accent);
  background: var(--accent-light);
}

/* Empty-state + Add (replaces the old "from the sidebar" hint). */
.canvas-empty-add {
  margin-top: 18px;
  background: var(--accent);
  color: var(--text-inverse);
  border: none;
  border-radius: 8px;
  padding: 10px 18px;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s;
}

.canvas-empty-add:hover {
  background: var(--accent-hover);
}

/* Sidebar tree */
.tree-node {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  cursor: pointer;
  border-radius: 6px;
  margin: 1px 8px;
  border-left: 2px solid transparent;
  transition: all 0.1s;
}

.tree-node:hover {
  background: var(--surface-alt);
}

.tree-node.selected {
  background: var(--accent-light);
  border-left-color: var(--node-color, var(--accent));
}

.tree-toggle {
  font-size: 9px;
  color: var(--text-dim);
  width: 10px;
  flex-shrink: 0;
  text-align: center;
}

.tree-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}

.tree-title {
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--text);
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 400;
}

.tree-node.selected .tree-title {
  color: var(--accent-hover);
  font-weight: 500;
}

.tree-count {
  font-size: 10px;
  font-weight: 400;
  color: var(--text-dim);
}

.tree-node.selected .tree-count {
  color: var(--accent);
  opacity: 0.7;
}

.tree-add-btn {
  font-family: var(--font-body);
  font-size: 11px;
  color: var(--accent);
  background: none;
  border: none;
  padding: 6px 18px;
  opacity: 0.8;
  width: 100%;
  text-align: left;
  font-weight: 500;
}

.tree-add-btn:hover {
  opacity: 1;
}

/* Sidebar field chips */
.field-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 0 12px;
}

.field-chip {
  font-family: var(--font-body);
  font-size: 11px;
  padding: 4px 10px;
  border-radius: 6px;
  cursor: grab;
  display: flex;
  align-items: center;
  gap: 4px;
  background: var(--surface-alt);
  color: var(--text-sec);
  border: 1px solid var(--border-light);
  user-select: none;
  font-weight: 400;
  transition: all 0.15s;
}

.field-chip:hover {
  border-color: var(--lira-purple);
  color: var(--lira-purple);
}

.field-chip:active {
  cursor: grabbing;
}

/* Library-backed fields (Move, Standards, Vocabulary List, Text, Media)
   get a soft teal tint so the author can see at a glance which palette
   chips pull from one of the four libraries vs. authored inline. */
.field-chip.library-field {
  background: var(--surface-alt);
  color: var(--text-sec);
  border-color: var(--border-light);
}

.field-chip.library-field:hover {
  border-color: var(--border);
  color: var(--text);
}

/* Sidebar Library section CSS (.library-chip, .sidebar-section-count,
   .sidebar-empty-hint) removed in v14 — the sidebar Library section
   was dropped to make room for the longer Field Map palette and to
   single-source library navigation through the menu-bar Libraries
   dropdown. */

/* ─── Canvas ─── */

.canvas {
  flex: 1;
  overflow-y: auto;
  padding: 28px 40px 56px;
}

.canvas-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  text-align: center;
  max-width: 420px;
  margin: 0 auto;
}

.canvas-empty-title {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 8px;
}

.canvas-empty-sub {
  font-size: 14px;
  color: var(--text-sec);
  line-height: 1.6;
  font-weight: 400;
}

.canvas-inner {
  position: relative;
  max-width: var(--canvas-width, 820px);
}

/* Width handle on the content's right edge. Subtle until hovered/active so it
   doesn't compete with the field rows; widens the working area for wide tables
   and content. Sits in the canvas padding gutter (right: -10px). */
.canvas-resizer {
  position: absolute;
  top: 0;
  bottom: 0;
  right: -10px;
  width: 10px;
  cursor: col-resize;
  z-index: 5;
  touch-action: none;
}

.canvas-resizer::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 4px;
  width: 2px;
  border-radius: 2px;
  background: transparent;
  transition: background 0.12s ease;
}

.canvas-resizer:hover::after,
body.canvas-resizing .canvas-resizer::after {
  background: color-mix(in srgb, var(--lira-purple) 45%, transparent);
}

body.canvas-resizing {
  cursor: col-resize;
  user-select: none;
}

/* Canvas node */
.canvas-node {
  margin-top: 6px;
}

.canvas-node[data-depth="0"] {
  margin-top: 16px;
}

.canvas-node-inner {
  border-left: 3px solid var(--border);
  border-radius: 0 8px 8px 0;
  transition: all 0.15s;
}

/* Top-level nodes get a white frame; nested nodes sit inside it transparently. */
.canvas-node[data-depth="0"]>.canvas-node-inner {
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

.canvas-node-inner.selected {
  border-left-color: var(--text-dim);
}

.canvas-node-inner.drop-hover {
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--node-color, var(--accent)) 40%, transparent);
}

/* Node header */
.node-header {
  padding: 8px 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
}

.node-toggle {
  font-size: 10px;
  color: var(--node-color, var(--accent));
  width: 12px;
  flex-shrink: 0;
  font-weight: 600;
}

.node-badge {
  font-family: var(--font-display);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: color-mix(in srgb, var(--node-color, var(--accent)) 62%, #161616);
  background: color-mix(in srgb, var(--node-color, var(--accent)) 16%, transparent);
  padding: 2px 8px;
  border-radius: 4px;
  font-weight: 700;
  flex-shrink: 0;
}

.node-title-input {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 400;
  color: var(--text);
  border: none;
  background: transparent;
  outline: none;
  flex: 1;
  padding: 0;
}

.node-title-input[data-depth="0"] {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 600;
}

.node-title-input[data-depth="1"] {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 600;
}

.node-title-input[data-depth="2"] {
  font-size: 14px;
  font-weight: 500;
}

.node-title-input[data-depth="3"] {
  font-size: 13px;
}

.node-title-input.generating {
  color: var(--text-dim);
  font-style: italic;
}

/* Node actions — always visible (upper right), collapsed or not. */
.node-actions {
  display: flex;
  gap: 3px;
  flex-shrink: 0;
}

.node-count {
  flex-shrink: 0;
  font-size: 11px;
  color: var(--text-dim);
  font-family: var(--font-body);
  white-space: nowrap;
  margin-left: 4px;
}

/* Total Duration — derived, live from the move times below. Hidden at 0. */
.node-duration {
  flex-shrink: 0;
  font-size: 11px;
  font-weight: 600;
  color: var(--purple-deep);
  background: var(--purple-light);
  font-family: var(--font-body);
  white-space: nowrap;
  padding: 1px 7px;
  border-radius: 10px;
  margin-left: 4px;
}

.node-duration.is-empty {
  display: none;
}

.canvas-node-inner.selected .node-actions {
  display: flex;
}

.node-action-btn {
  padding: 3px 7px;
  border-radius: 4px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-sec);
  font-size: 10px;
  transition: all 0.1s;
}

.node-action-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.node-action-btn.danger:hover {
  border-color: var(--danger);
  color: var(--danger);
}

/* On-node "Author" affordance — accented so it reads as the primary thing you
   can do to a node, not another icon control. */
.node-author-btn {
  padding: 3px 9px;
  border-radius: 5px;
  border: 1px solid transparent;
  background: var(--surface);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
  transition: all 0.1s;
}

.node-author-btn:hover {
  background: var(--accent-light);
  color: var(--text);
  border-color: var(--lira-purple);
}

.node-author-btn:focus-visible {
  outline: 2px solid var(--purple-deep);
  outline-offset: 2px;
}

/* Node body */
.node-body {
  padding: 0 14px 12px 28px;
}

/* Content chips on nodes */
/* Fields on nodes */
.node-fields {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 8px;
}

.node-field {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 8px;
  background: var(--surface-alt);
  border: 1px solid var(--border-light);
}

/* ─── §1 power fields + §3 relation marks ───
   A power field is a governing source — its value flows into every field
   below it. It carries a teal inset accent + a faint teal wash so it reads as
   "structural" at a glance, distinct from the purple of library-backed fields
   and the orange of scaffolds. */
.node-field.power {
  background: var(--purple-light);
}

/* Palette chip for a power field — same teal language as the placed card. */
.field-chip.power {
  background: var(--purple-light);
  color: var(--purple-deep);
  border-color: color-mix(in srgb, var(--lira-purple) 28%, transparent);
}

.field-chip.power:hover {
  border-color: var(--lira-purple);
  color: var(--purple-deep);
}

/* ─── Move fields: a teal identity ───
   Move is the one library field that isn't a governance singleton, so it stays
   off the power floor (no purple). A teal left-accent + faint wash makes the
   instructional components stand out from the neutral library pickers and from
   the purple governance fields, without claiming the governance language. */
.node-field.field-kind-move {
  background: color-mix(in srgb, var(--lira-teal) 6%, var(--surface-alt));
}

/* Palette chip for Move — teal-tinted, overriding the neutral library-field look
   (declared after it so it wins on equal specificity). */
.field-chip.library-field[data-field-type="move"] {
  background: color-mix(in srgb, var(--lira-teal) 12%, var(--surface-alt));
  color: var(--text);
  border-color: color-mix(in srgb, var(--lira-teal) 40%, transparent);
}

.field-chip.library-field[data-field-type="move"]:hover {
  border-color: var(--lira-teal);
  color: var(--text);
}

/* ─── Per-field Author affordance ───
   A manual "author this one field" button at the top of each authorable field
   (draft if empty, refresh if filled) — the single-field counterpart to the
   node-level "Author all". Same purple action language as .node-author-btn. */
.field-author-row {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 3px;
}

.field-author-btn {
  padding: 2px 8px;
  border-radius: 5px;
  border: 1px solid transparent;
  background: var(--surface);
  color: var(--text-sec);
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
  transition: all 0.1s;
}

.field-author-btn:hover {
  background: var(--accent-light);
  color: var(--text);
  border-color: var(--lira-purple);
}

.field-author-btn:focus-visible {
  outline: 2px solid var(--purple-deep);
  outline-offset: 2px;
}

/* The ✦ keeps the brand purple so the Author button ties to the sidebar's
   power marks, while the label stays near-black for contrast. Purple-on-white
   6.9:1; purple-on-(hover)purple-light 5.9:1 — both clear AA. */
.field-author-btn .author-star,
.node-author-btn .author-star {
  color: var(--lira-purple);
}

/* Direction marks on palette chips — same glyphs as the field rows and legend,
   so the palette speaks one visual language. Muted by default; the power star
   carries the governance purple. Most chips share ↑ / ↑↔, so the rare marks
   (↓ ↩ ↕) read as the salient ones. */
.chip-marks {
  display: inline-flex;
  gap: 2px;
  margin-right: 4px;
  vertical-align: baseline;
}

.chip-marks .reads-mark {
  font-size: 9px;
  line-height: 1;
  color: var(--text-sec);
  cursor: inherit;
}

.chip-marks .reads-mark.is-power {
  font-size: 9px;
  color: var(--purple-deep);
}

.field-controls {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  flex-shrink: 0;
  padding-top: 3px;
}

.field-move-btn {
  border: none;
  background: none;
  color: var(--text-sec);
  font-size: 10px;
  line-height: 1;
  padding: 1px 2px;
  cursor: pointer;
}

.field-move-btn:hover:not(:disabled) {
  color: var(--accent);
}

.field-move-btn:disabled {
  opacity: 0.3;
  cursor: default;
}

/* Drag-to-reorder: a grip handle (keeps the contenteditable body selectable),
   a faded source card while dragging, and a thin purple line at the drop gap. */
.field-drag-handle {
  cursor: grab;
  color: var(--text-sec);
  font-size: 13px;
  line-height: 1;
  padding: 2px 3px;
  border-radius: 4px;
  user-select: none;
}

.field-drag-handle:hover {
  color: var(--text-sec);
  background: var(--surface-alt);
}

.field-drag-handle:active {
  cursor: grabbing;
}

.node-field.dragging {
  opacity: 0.45;
}

.field-drop-indicator {
  height: 2px;
  margin: -1px 0;
  border-radius: 2px;
  background: var(--lira-purple);
  pointer-events: none;
}

.field-label-input {
  font-family: var(--font-display);
  font-size: 10px;
  color: var(--text-sec);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 700;
  width: 90px;
  flex-shrink: 0;
  white-space: normal;
  overflow-wrap: break-word;
  line-height: 1.3;
  padding: 5px 0 0;
  border: none;
  background: transparent;
  outline: none;
}

/* Field name + its read marks, stacked under the name. The column owns the
   84px width; the name fills it. */
.field-label-col {
  width: 90px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.field-label-col .field-label-input {
  width: 100%;
  padding-top: 5px;
}

/* Read marks: which way a field looks for what it's built from — ↑ reads the
   fields above (up to its twin), ↓ summarizes those below, → reads what comes
   before, <span class="power-anchor" aria-hidden="true"></span> is a governance source (read BY others, reads nothing). */
.field-reads {
  display: flex;
  gap: 4px;
  padding-left: 1px;
}

.reads-mark {
  font-size: 11px;
  line-height: 1;
  color: var(--text-sec);
  cursor: help;
  user-select: none;
}

.reads-mark.is-power {
  color: var(--purple-deep);
  font-size: 10px;
}

.field-reads-legend {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--border, color-mix(in srgb, var(--text-sec) 14%, transparent));
}

.field-reads-legend .legend-title {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-dim, var(--text-sec));
  margin-bottom: 8px;
}

.field-reads-legend .legend-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--text-sec);
  line-height: 1.6;
}

.field-reads-legend .reads-mark {
  width: 14px;
  text-align: center;
  flex: none;
  cursor: default;
}

.field-remove-btn {
  border: none;
  background: none;
  color: var(--text-sec);
  font-size: 11px;
  padding: 1px;
  flex-shrink: 0;
  cursor: pointer;
}

.field-remove-btn:hover {
  color: var(--danger);
}

/* Clear (reset) control — sits with the field controls; resets the field to
   placed-but-blank. Teal hover ties it to the placed/spec language. */
.field-clear-btn {
  border: none;
  background: none;
  color: var(--text-sec);
  font-size: 11px;
  padding: 1px;
  flex-shrink: 0;
  cursor: pointer;
}

.field-clear-btn:hover {
  color: var(--text);
}

/* Placed-but-unauthored indicator: the recorded intent (move pick / form /
   notes) shown in place of content until the fill pass authors it. */
.field-spec-tag {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 0;
  padding: 8px 2px;
}

.field-spec-chip {
  font-size: 11px;
  color: var(--text-sec);
  background: var(--surface-alt);
  border: 1px solid var(--border-light);
  border-radius: 5px;
  padding: 2px 8px;
}

.field-spec-note {
  font-size: 11px;
  color: var(--text-dim);
  font-style: italic;
}

/* Per-move time budget — authored on the move, feeds its generation, and sums
   into the node's Total Duration. */
/* Move content column: stacks the time row + heads-up above the editor inside
   the node-field row (which is otherwise label | content | controls). */
.field-col {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.move-time {
  display: flex;
  align-items: center;
  gap: 6px;
}

.move-time-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-sec);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.move-time-input {
  width: 56px;
  padding: 3px 7px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 13px;
  text-align: right;
}

.move-time-input:focus {
  outline: none;
  border-color: var(--lira-purple);
}

/* Hide the spinner arrows — the field is small and they crowd it. */
.move-time-input::-webkit-outer-spin-button,
.move-time-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.move-time-input {
  appearance: textfield;
  -moz-appearance: textfield;
}

.move-time-unit {
  font-size: 12px;
  color: var(--text-dim);
}

/* Stale heads-up: a small flag row under the field name, shown only when the
   field carries .is-stale. Non-blocking; carries Re-author + Clear. */
.stale-flag {
  display: none;
}

.node-field.is-stale>.field-col>.stale-flag {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 9px;
  border: .5px solid var(--danger);
  background: var(--danger-light);
  border-radius: 7px;
}

.stale-flag-icon {
  color: var(--danger);
  font-size: 13px;
  line-height: 1;
  flex-shrink: 0;
}

.stale-flag-text {
  flex: 1;
  font-size: 11.5px;
  line-height: 1.35;
  color: var(--text-sec);
}

.stale-flag-btn {
  flex-shrink: 0;
  padding: 3px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface);
  color: var(--text-sec);
  font-family: var(--font-body);
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
}

.stale-flag-btn:hover {
  border-color: var(--text-sec);
  color: var(--text);
}

.stale-flag-btn.primary {
  border-color: var(--danger);
  color: var(--danger);
}

.stale-flag-btn.primary:hover {
  background: var(--danger);
  color: #fff;
}

/* All field kinds share one uniform light-grey box (no colored left border):
   the editable white frame inside carries the content. */

.node-field.deprecated {
  opacity: 0.7;
}

/* ─── Content reference field — chip + picker ─── */

.field-reference {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.content-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--font-body);
  font-size: 12px;
  color: #4A6B1A;
  /* darker green for legibility on green-light */
  background: var(--surface);
  border: 1px solid var(--lira-green);
  padding: 3px 10px;
  border-radius: 12px;
  font-weight: 500;
  max-width: 100%;
  overflow: hidden;
}

.content-chip.empty {
  color: var(--text-dim);
  border-color: var(--border);
  font-style: italic;
  font-weight: 400;
}

.content-chip-title {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.field-reference-picker {
  font-family: var(--font-body);
  font-size: 11px;
  color: var(--text-sec);
  background: transparent;
  border: 1px solid var(--border-light);
  border-radius: 5px;
  padding: 2px 6px;
  cursor: pointer;
  max-width: 180px;
}

.field-reference-picker:hover {
  border-color: var(--lira-green);
  color: var(--text);
}

.field-reference-picker:focus {
  outline: none;
  border-color: var(--lira-green);
  box-shadow: 0 0 0 2px var(--green-light);
}

/* ─── Sidebar palette: group label ─── */

.field-group-label {
  font-family: var(--font-display);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-dim);
  padding: 10px 12px 4px;
  font-weight: 700;
}

.field-group-label:first-child {
  padding-top: 4px;
}

/* Add child button in canvas */
.canvas-add-child {
  font-family: var(--font-body);
  font-size: 11px;
  color: var(--add-color, var(--accent));
  background: none;
  border: 1.5px dashed var(--border);
  border-radius: 6px;
  padding: 7px 14px;
  margin-top: 4px;
  font-weight: 500;
  transition: all 0.15s;
  width: 100%;
  text-align: left;
}

.canvas-add-child:hover {
  border-color: var(--add-color, var(--accent));
  background: color-mix(in srgb, var(--add-color, var(--accent)) 8%, transparent);
}

/* ─── Library View ─── */

.menu-view {
  flex: 1;
  overflow-y: auto;
  padding: 36px 44px;
  max-width: 900px;
  margin: 0 auto;
  width: 100%;
}

.menu-view-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 28px;
}

.menu-view-title {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.menu-view-subtitle {
  font-size: 13px;
  color: var(--text-sec);
  margin-top: 4px;
  font-weight: 400;
}

.menu-view-actions {
  display: flex;
  gap: 8px;
}

.btn-provide {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  padding: 8px 18px;
  border-radius: 8px;
  border: 1.5px dashed var(--lira-orange);
  background: var(--orange-light);
  color: var(--lira-orange);
  transition: all 0.15s;
}

.btn-provide:hover {
  background: #fdebd6;
}

.btn-generate {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  padding: 8px 18px;
  border-radius: 8px;
  border: 1.5px dashed var(--accent);
  background: var(--accent-light);
  color: var(--accent);
  transition: all 0.15s;
}

.btn-generate:hover {
  background: #d5f0f5;
}

/* Library cards */
.library-grid {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.library-card {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 16px 20px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.15s;
}

.library-card:hover {
  border-color: var(--accent);
  box-shadow: var(--shadow-sm);
}

.library-card-icon {
  font-size: 22px;
  flex-shrink: 0;
  padding-top: 2px;
}

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

.library-card-title {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 2px;
}

.library-card-type {
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--text-sec);
  margin-bottom: 8px;
  font-weight: 400;
}

.library-card-profile {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.profile-tag {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-sec);
  background: var(--surface-alt);
  padding: 2px 8px;
  border-radius: 4px;
  border: 1px solid var(--border-light);
}

.library-card-delete {
  border: none;
  background: none;
  color: var(--text-dim);
  font-size: 16px;
  padding: 4px;
  flex-shrink: 0;
}

.library-card-delete:hover {
  color: var(--danger);
}

.library-empty {
  text-align: center;
  padding: 80px 20px;
  color: var(--text-sec);
}

/* ─── Modal ─── */

.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  backdrop-filter: blur(2px);
}

.modal-box {
  background: var(--surface);
  border-radius: 16px;
  padding: 32px;
  width: 540px;
  max-height: 85vh;
  overflow-y: auto;
  box-shadow: var(--shadow-lg);
}

.modal-title {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 16px;
}

.content-type-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.content-type-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  border-radius: 10px;
  border: 1.5px solid var(--border);
  background: var(--surface);
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--text);
  text-align: left;
  transition: all 0.15s;
}

.content-type-btn:hover {
  border-color: var(--accent);
  background: var(--accent-light);
}

.content-type-btn .icon {
  font-size: 18px;
}

.form-input {
  width: 100%;
  padding: 9px 14px;
  border-radius: 8px;
  border: 1.5px solid var(--border);
  font-family: var(--font-body);
  font-size: 13px;
  outline: none;
  background: var(--surface);
  transition: border-color 0.15s;
}

.form-input:focus {
  border-color: var(--accent);
}

.form-textarea {
  width: 100%;
  padding: 9px 14px;
  border-radius: 8px;
  border: 1.5px solid var(--border);
  font-family: var(--font-body);
  font-size: 13px;
  resize: vertical;
  outline: none;
  transition: border-color 0.15s;
}

.form-textarea:focus {
  border-color: var(--accent);
}

.form-select {
  padding: 6px 10px;
  border-radius: 6px;
  border: 1px solid var(--border);
  font-family: var(--font-body);
  font-size: 12px;
  outline: none;
  background: var(--surface);
  flex: 1;
}

.form-label {
  font-family: var(--font-display);
  font-size: 11px;
  color: var(--text-sec);
  min-width: 110px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.form-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}

.mode-toggle {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
}

.mode-btn {
  flex: 1;
  font-family: var(--font-body);
  font-size: 13px;
  padding: 8px 0;
  border-radius: 8px;
  border: 1.5px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font-weight: 400;
  transition: all 0.15s;
}

.mode-btn.active-provide {
  border-color: var(--lira-orange);
  background: var(--orange-light);
  color: var(--lira-orange);
  font-weight: 600;
}

.mode-btn.active-generate {
  border-color: var(--accent);
  background: var(--accent-light);
  color: var(--accent);
  font-weight: 600;
}

.form-section-label {
  font-family: var(--font-display);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-dim);
  margin-bottom: 8px;
  font-weight: 600;
}

.form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 20px;
}

/* ─── Welcome Dialog ─── */

.welcome-dialog .modal-box {
  width: 600px;
}

.welcome-logo {
  height: 64px;
  width: auto;
  margin-bottom: 20px;
}

.welcome-heading {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 6px;
  letter-spacing: -0.01em;
}

.welcome-subtext {
  font-size: 14px;
  color: var(--text-sec);
  margin-bottom: 24px;
  font-weight: 400;
  line-height: 1.6;
}

.welcome-step {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 16px;
}

.welcome-step-num {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--text-inverse);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  flex-shrink: 0;
}

.welcome-step-num.done {
  background: var(--lira-green);
}

.welcome-step-content {
  flex: 1;
}

.welcome-step-title {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 4px;
}

.welcome-step-desc {
  font-size: 12px;
  color: var(--text-sec);
  font-weight: 400;
}

/* ─── Empty-state "Coming soon" panel ───
   Full-page placeholder used by the Catalog (formerly Store) page when
   the actual feature isn't built yet. Distinct from `.coming-soon`
   (the inline greying treatment defined at the bottom of this file). */

.empty-state-soon {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 100px 20px;
  text-align: center;
}

.empty-state-soon-icon {
  font-size: 48px;
  margin-bottom: 16px;
  opacity: 0.15;
}

.empty-state-soon-title {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 8px;
}

.empty-state-soon-sub {
  font-size: 14px;
  color: var(--text-sec);
  max-width: 420px;
  line-height: 1.6;
  font-weight: 400;
}

/* ─── Utility ─── */

.hidden {
  display: none !important;
}

.mb-12 {
  margin-bottom: 12px;
}

.mb-16 {
  margin-bottom: 16px;
}

.mt-8 {
  margin-top: 8px;
}

/* ─── Library pages (three-column shell for Moves, Standards, Library, Vocabulary) ─── */

/* Override .menu-view's narrow max-width when a library page is active.
   Library pages need the full viewport for three columns. */
.library-view {
  max-width: none;
  padding: 20px 24px 32px;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

/* Header */
.library-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border-light);
  margin-bottom: 16px;
  flex-shrink: 0;
}

.library-header-title {
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.library-header-title h1 {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text);
}

.library-header-stats {
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--text-sec);
}

/* Authoring row */
.library-authoring {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
  flex-shrink: 0;
}

.library-auth-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border: 1.5px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}

.library-auth-btn:hover {
  border-color: var(--accent);
  background: var(--accent-light);
}

.library-auth-btn:disabled,
.library-auth-btn[disabled] {
  opacity: 0.55;
  cursor: not-allowed;
}

.library-auth-btn-icon {
  font-size: 14px;
  line-height: 1;
  color: var(--accent);
}

/* Browse packs — the only live button in the authoring row (the other three
   are "coming soon" stubs). Subtle differentiator: accent-colored border so
   it reads as active, not extra chrome. It's an <a>, so also kill underline. */
.library-auth-btn-store {
  border-color: var(--accent);
  text-decoration: none;
}

.library-auth-btn-store:hover {
  background: var(--accent);
  color: var(--text-inverse);
}

.library-auth-btn-store:hover .library-auth-btn-icon {
  color: var(--text-inverse);
}

/* Two-column grid — master + project. As of v8 there is no detail panel;
   the set cards themselves carry the "do I want this?" decision, and the
   expand-caret reveals an outline of what's in the set. */
.library-grid {
  display: grid;
  grid-template-columns: minmax(320px, 1.2fr) minmax(280px, 1fr);
  gap: 16px;
  flex: 1;
  min-height: 0;
  align-items: stretch;
}

.library-col {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  min-height: 0;
}

.library-col-header {
  padding: 12px 14px;
  border-bottom: 1px solid var(--border-light);
  background: var(--surface-alt);
  flex-shrink: 0;
}

.library-col-title {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 2px;
}

.library-col-hint {
  font-family: var(--font-body);
  font-size: 11px;
  color: var(--text-dim);
}

.library-col-body {
  flex: 1;
  overflow-y: auto;
  padding: 10px;
  min-height: 0;
}

/* Center column — staged sets get a subtle teal accent along the left edge of
   the column body, echoed by the teal border on each staged set card. */
.library-col-project .library-col-body {
  background: linear-gradient(to right, var(--purple-light) 0, var(--purple-light) 3px, transparent 3px);
}

/* Search and filters inside master column */
.library-col-search {
  padding: 10px 12px 4px;
  flex-shrink: 0;
}

.library-search-input {
  width: 100%;
  padding: 7px 10px;
  border: 1.5px solid var(--border);
  border-radius: 6px;
  background: var(--surface);
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--text);
}

.library-search-input:focus {
  outline: none;
  border-color: var(--accent);
}

.library-search-input:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Set card */
.set-card {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  margin-bottom: 8px;
  transition: border-color 0.15s, box-shadow 0.15s;
  align-items: start;
  cursor: pointer;
  position: relative;
}

.set-card:hover {
  border-color: var(--accent);
  box-shadow: var(--shadow-sm);
}

.set-card-added {
  border-left: 3px solid var(--accent);
  padding-left: 6px;
}

.set-card-caret {
  font-family: var(--font-body);
  font-size: 11px;
  color: var(--text-dim);
  background: transparent;
  border: none;
  padding: 2px;
  cursor: pointer;
  transition: transform 0.15s, color 0.15s;
  line-height: 1;
  margin-top: 1px;
}

.set-card-caret:hover {
  color: var(--accent);
}

.set-card-caret[aria-expanded="true"] {
  transform: rotate(90deg);
  color: var(--accent);
}

.set-card-main {
  min-width: 0;
}

.set-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 4px;
}

.set-card-name {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.3;
}

.set-card-description {
  font-family: var(--font-body);
  font-size: 11.5px;
  color: var(--text-sec);
  line-height: 1.4;
  margin-bottom: 6px;
}

.set-card-meta {
  display: flex;
  gap: 10px;
  font-family: var(--font-body);
  font-size: 10.5px;
  color: var(--text-dim);
}

.set-card-count::before {
  content: "";
}

.set-card-mode {
  text-transform: capitalize;
}

.set-card-mode::before {
  content: "·";
  margin-right: 8px;
  color: var(--text-dim);
}

.set-card-add-btn,
.set-card-remove-btn {
  align-self: center;
  padding: 4px 10px;
  border-radius: 14px;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s;
}

.set-card-add-btn {
  border: 1.5px solid var(--accent);
  background: var(--surface);
  color: var(--accent-hover);
}

.set-card-add-btn:hover {
  background: var(--accent);
  color: var(--text-inverse);
}

.set-card-remove-btn {
  border: 1px solid transparent;
  background: transparent;
  color: var(--text-dim);
  font-size: 16px;
  padding: 2px 8px;
  line-height: 1;
}

.set-card-remove-btn:hover {
  color: var(--danger);
  background: var(--danger-light);
}

/* Hide-from-master affordance — master column only. Opacity 0 until the card
   is hovered, small × in the top-right. Neutral colors; this is a "put this
   away" action, not a destructive one. Set gets filtered out on next render
   by _render_library_page, via the per-user hidden list. */
.set-card-hide-btn {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 18px;
  height: 18px;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--text-dim);
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  border-radius: 4px;
  opacity: 0;
  transition: opacity 0.15s, color 0.15s, background 0.15s;
  z-index: 2;
}

.set-card:hover .set-card-hide-btn {
  opacity: 1;
}

.set-card-hide-btn:hover {
  color: var(--text);
  background: var(--surface-alt);
}

/* Provenance badges — three colors per Libraries Spec */
.provenance-badge {
  display: inline-block;
  padding: 2px 7px;
  border-radius: 8px;
  font-family: var(--font-body);
  font-size: 9.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  line-height: 1.4;
  flex-shrink: 0;
}

.provenance-lira {
  background: #EEEDFE;
  color: #3C3489;
}

.provenance-user {
  background: var(--teal-light);
  color: #085041;
}

.provenance-pack {
  background: #FAEEDA;
  color: #633806;
}

/* Empty states inside columns */
.library-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 40px 20px;
  color: var(--text-dim);
}

.library-empty-title {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 600;
  color: var(--text-sec);
  margin-bottom: 6px;
}

.library-empty-sub {
  font-family: var(--font-body);
  font-size: 11.5px;
  color: var(--text-dim);
  line-height: 1.5;
  max-width: 240px;
}

/* Responsive — stack columns below ~860px so the page still works on narrow
   laptops and tablets. (Raised from 1100px when we dropped the third
   column in v8 — two columns breathe fine down to ~860px.) */
@media (max-width: 860px) {
  .library-grid {
    grid-template-columns: 1fr;
    grid-auto-rows: minmax(200px, auto);
  }

  .library-col {
    min-height: 220px;
  }
}

/* ─── Set card: selected state ─── */
.set-card-selected {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent);
}

/* ─── Set card: filtered-out state ─── */
.set-card-hidden {
  display: none;
}

/* ─── Authoring row: disabled state ─── */
.library-auth-btn[disabled] {
  opacity: 0.55;
  cursor: not-allowed;
  background: var(--surface-alt);
}

.library-auth-btn[disabled]:hover {
  border-color: var(--border);
  background: var(--surface-alt);
}

.library-auth-btn-soon {
  font-family: var(--font-body);
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-dim);
  padding: 2px 6px;
  border-radius: 4px;
  background: var(--surface);
  border: 1px solid var(--border-light);
  margin-left: 4px;
}

/* ─── Tier badge ─────────────────────────────────────────────────────────
   Sits next to the provenance badge on set cards. Free = neutral, Premium
   = accent-tinted. These are the only two tier values seeded in v8; the
   `tier` column also accepts `pack:<id>` for future purchased packs. */
.tier-badge {
  display: inline-block;
  padding: 2px 7px;
  border-radius: 8px;
  font-family: var(--font-body);
  font-size: 9.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  line-height: 1.3;
}

.tier-badge.tier-free {
  background: var(--surface-alt);
  color: var(--text-dim);
  border: 1px solid var(--border-light);
}

.tier-badge.tier-premium {
  background: var(--accent-light);
  color: var(--accent-hover);
  border: 1px solid var(--accent);
}

/* ─── Outline tree (inside expanded set cards) ───────────────────────────
   Rendered into .tree-container on click. Used by Standards (nested,
   variable depth) and Moves (flat — a single list of leaves, no branches).
   Leaves are inert in v8 — the tree is an outline of what's in the set,
   not a detail browser. */

.tree-container {
  margin-top: 10px;
  padding: 8px 6px 4px;
  border-top: 1px solid var(--border-light);
}

.tree-branch {
  margin-bottom: 2px;
}

.tree-branch-header {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 6px;
  border-radius: 4px;
  cursor: pointer;
  user-select: none;
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--text);
}

.tree-branch-header:hover {
  background: var(--surface-alt);
}

.tree-branch-caret {
  display: inline-block;
  width: 10px;
  font-size: 10px;
  color: var(--text-dim);
  transition: transform 0.12s;
  line-height: 1;
}

.tree-branch[aria-expanded="true"]>.tree-branch-header>.tree-branch-caret {
  transform: rotate(90deg);
  color: var(--accent);
}

.tree-branch-label {
  flex: 1;
  font-weight: 500;
}

.tree-branch-count {
  font-size: 10px;
  color: var(--text-dim);
  font-weight: 400;
  padding: 1px 6px;
  background: var(--surface-alt);
  border-radius: 8px;
}

.tree-branch-body {
  padding-left: 14px;
  display: none;
}

.tree-branch[aria-expanded="true"]>.tree-branch-body {
  display: block;
}

/* Leaf container. Used directly under a card's tree-container when the set
   is flat (Moves), and under a tree-branch-body's terminal branch when the
   set is hierarchical (Standards). */
.tree-items {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 4px 0;
}

.tree-leaf {
  display: flex;
  gap: 8px;
  padding: 4px 8px;
  font-family: var(--font-body);
  font-size: 11.5px;
  line-height: 1.4;
  color: var(--text-sec);
  border-radius: 4px;
}

/* Code column for external frameworks (e.g., "1.L.1"). Lira-authored sets
   render name-only leaves and never produce this element. */
.tree-leaf-code {
  flex-shrink: 0;
  min-width: 54px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 11px;
  color: var(--text);
  letter-spacing: -0.01em;
}

.tree-leaf-text {
  flex: 1;
  color: var(--text-sec);
}

.tree-items-loading,
.tree-items-empty {
  padding: 8px 10px;
  font-family: var(--font-body);
  font-size: 11px;
  font-style: italic;
  color: var(--text-dim);
}

/* ─── Two-line tree leaves ────────────────────────────────────────────────
   Used by the Content library for book/video/source items: title on top,
   byline (author · year · type) in dimmer text below. The one-line layout
   used by Standards and Moves stays as-is. */
.tree-leaf-twoline {
  align-items: flex-start;
  padding: 6px 8px;
}

.tree-leaf-body {
  display: flex;
  flex-direction: column;
  gap: 1px;
  flex: 1;
  min-width: 0;
}

.tree-leaf-title {
  font-family: var(--font-body);
  font-size: 11.5px;
  line-height: 1.35;
  font-weight: 500;
  color: var(--text);
}

.tree-leaf-byline {
  font-family: var(--font-body);
  font-size: 10.5px;
  line-height: 1.3;
  color: var(--text-dim);
}

/* ─── Set card grade-range pill (Content library only) ────────────────────
   Sits next to the item count in the card meta row. "Grade K", "Grade 5",
   "Grade 3-5" — freeform label, not a filter. */
.set-card-grade {
  font-family: var(--font-body);
  font-size: 10.5px;
  color: var(--text-dim);
}

.set-card-grade::before {
  content: "·";
  margin-right: 8px;
  color: var(--text-dim);
}

/* ─── Vocabulary leaves ───────────────────────────────────────────────────
   One-line layout like Moves/Standards, but with a tier + priority tag
   cluster on the right. Denser than Moves (which is just the name) and
   more informative than bare word lists. Words are inert — no click. */
.vocab-leaf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 4px 8px;
}

.vocab-leaf-word {
  font-family: var(--font-body);
  font-size: 11.5px;
  color: var(--text);
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.vocab-leaf-tags {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
}

.vocab-tag {
  font-family: var(--font-body);
  font-size: 9.5px;
  font-weight: 500;
  padding: 1px 5px;
  border-radius: 3px;
  letter-spacing: 0.2px;
  line-height: 1.4;
  white-space: nowrap;
  background: var(--surface-2, #2a2a2a);
  color: var(--text-dim);
  border: 1px solid var(--border, rgba(255, 255, 255, 0.08));
}

/* Tier tags — subtle gradient from light (T1, common) to dark (T3, domain).
   Matches Beck & McKeown's pedagogical weighting: T1 words are the everyday
   baseline, T3 words are the weighty domain-specific terms. */
.vocab-tag.vocab-tier-t1 {
  background: rgba(140, 180, 220, 0.12);
  color: #9ec4e5;
  border-color: rgba(140, 180, 220, 0.25);
}

.vocab-tag.vocab-tier-t2 {
  background: rgba(180, 160, 220, 0.14);
  color: #c5a9e8;
  border-color: rgba(180, 160, 220, 0.28);
}

.vocab-tag.vocab-tier-t3 {
  background: rgba(220, 160, 140, 0.15);
  color: #e8b397;
  border-color: rgba(220, 160, 140, 0.3);
}

/* Priority tags — Core is strongest (warmest), Stretch is most muted.
   Mirrors the instructional weight: Core gets direct teaching time,
   Stretch is extension/writing. */
.vocab-tag.vocab-priority-core {
  background: rgba(200, 180, 120, 0.15);
  color: #d4be87;
  border-color: rgba(200, 180, 120, 0.3);
}

.vocab-tag.vocab-priority-supporting {
  background: rgba(140, 180, 150, 0.12);
  color: #9fc8a8;
  border-color: rgba(140, 180, 150, 0.25);
}

.vocab-tag.vocab-priority-stretch {
  background: rgba(160, 160, 170, 0.1);
  color: var(--text-dim);
  border-color: rgba(160, 160, 170, 0.2);
}

/* ─── Field Helpers ─── */
/* Inline trigger button that sits in the field row between the label input
   and the value textarea, visible only when the field has a helper
   registered. Styled to read as interactive without stealing attention
   from the textarea. */
.field-helper-btn {
  border: none;
  background: none;
  color: var(--text-dim);
  font-size: 14px;
  padding: 0 4px;
  line-height: 1;
  cursor: pointer;
  flex-shrink: 0;
  transition: color 0.15s, transform 0.15s;
}

.field-helper-btn:hover {
  color: var(--lira-purple);
  transform: scale(1.15);
}

/* ─── Field Helper Modal ─── */
.field-helper-modal.hidden {
  display: none;
}

.field-helper-box {
  width: 640px;
  max-width: 92vw;
  padding: 24px 28px 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.field-helper-header {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border-light);
}

.field-helper-icon {
  font-size: 20px;
  line-height: 1;
  padding-top: 2px;
  color: var(--accent);
  flex-shrink: 0;
}

.field-helper-title-block {
  flex: 1;
  min-width: 0;
}

.field-helper-title {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.2;
}

.field-helper-descriptor {
  font-size: 12px;
  color: var(--text-sec);
  margin-top: 6px;
  line-height: 1.5;
}

.field-helper-close {
  border: none;
  background: none;
  color: var(--text-dim);
  font-size: 18px;
  cursor: pointer;
  padding: 0 4px;
  line-height: 1;
  flex-shrink: 0;
}

.field-helper-close:hover {
  color: var(--danger);
}

/* Action tabs — only shown for multi-action helpers (EQ) */
.field-helper-actions {
  display: flex;
  gap: 6px;
}

.field-helper-actions.hidden {
  display: none;
}

.fh-action-tab {
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-sec);
  font-family: var(--font-body);
  font-size: 12px;
  padding: 6px 12px;
  border-radius: 999px;
  cursor: pointer;
  font-weight: 500;
}

.fh-action-tab.active {
  background: var(--accent);
  color: var(--text-inverse);
  border-color: var(--accent);
}

.fh-action-tab:hover:not(.active) {
  border-color: var(--accent);
  color: var(--accent);
}

/* Input + Output regions */
.field-helper-input-region,
.field-helper-output-region {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.field-helper-output-region.hidden {
  display: none;
}

.field-helper-input-label,
.field-helper-output-label {
  font-family: var(--font-display);
  font-size: 10px;
  color: var(--text-sec);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 700;
}

.field-helper-input,
.field-helper-output {
  width: 100%;
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 12px;
  background: var(--surface);
  line-height: 1.5;
  resize: vertical;
  outline: none;
}

.field-helper-input:focus,
.field-helper-output:focus {
  border-color: var(--accent);
  background: var(--accent-light);
}

.field-helper-output {
  background: var(--surface-alt);
}

.field-helper-output-hint {
  font-size: 11px;
  color: var(--text-dim);
  font-style: italic;
}

/* Suggestions — EQ's suggest action */
.field-helper-suggestions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  background: var(--surface-alt);
  border-radius: 8px;
  border: 1px solid var(--border-light);
}

.field-helper-suggestions.hidden {
  display: none;
}

.field-helper-suggestions-label {
  font-family: var(--font-display);
  font-size: 10px;
  color: var(--text-sec);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 700;
}

.field-helper-suggestions-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.fh-suggestion {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}

.fh-suggestion:hover {
  border-color: var(--accent);
  background: var(--accent-light);
}

.fh-suggestion.picked {
  border-color: var(--accent);
  background: var(--accent-light);
}

.fh-suggestion-text {
  font-size: 13px;
  color: var(--text);
  line-height: 1.4;
  flex: 1;
}

.fh-suggestion-pick {
  font-size: 11px;
  color: var(--accent);
  font-weight: 600;
  flex-shrink: 0;
}

/* "What the AI did" panel — shared across all helpers */
.field-helper-edits-panel {
  border-top: 1px solid var(--border-light);
  padding-top: 10px;
  margin-top: 2px;
}

.field-helper-edits-panel.hidden {
  display: none;
}

.field-helper-edits-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  border: none;
  background: none;
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--text-sec);
  padding: 4px 0;
  font-weight: 500;
}

.field-helper-edits-toggle:hover {
  color: var(--accent);
}

.fh-edits-chevron {
  font-size: 10px;
  color: var(--text-dim);
}

.fh-edits-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--text-inverse);
  font-size: 10px;
  font-weight: 600;
  line-height: 1;
}

.fh-edits-badge.hidden {
  display: none;
}

.field-helper-edits-body {
  padding: 10px 0 4px 14px;
}

.field-helper-edits-body.hidden {
  display: none;
}

.field-helper-edits-list {
  list-style: disc;
  margin: 0;
  padding-left: 18px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.field-helper-edits-list.hidden {
  display: none;
}

.fh-edit-item {
  font-size: 12px;
  color: var(--text-sec);
  line-height: 1.5;
}

.field-helper-edits-empty {
  font-size: 12px;
  color: var(--text-dim);
  font-style: italic;
}

.field-helper-edits-empty.hidden {
  display: none;
}

/* Footer */
.field-helper-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border-light);
}

.field-helper-status {
  font-size: 11px;
  color: var(--danger);
  flex: 1;
  min-width: 0;
}

.field-helper-footer-actions {
  display: flex;
  gap: 8px;
}

/* ─── Coming Soon — Shared treatment for unbuilt features ───
   Visual: dims the element, badges a "Soon" pill, blocks default interaction.
   Variant `.coming-soon-clickable` keeps the click receiver active so the
   element can open the popup explaining the feature. Use the variant on
   buttons/links you still want to be tabbable. Otherwise pointer-events
   on inner content are suppressed so the parent registers the click and
   nothing else fires (drag handlers, hovers, etc.).
*/
.coming-soon {
  opacity: 0.55;
  cursor: not-allowed !important;
  position: relative;
}

.coming-soon>* {
  pointer-events: none;
}

.coming-soon-clickable {
  cursor: pointer !important;
}

.coming-soon::after {
  content: 'Coming Soon';
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  font-family: var(--font-body);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--lira-purple);
  background: var(--purple-light);
  border-radius: 8px;
  vertical-align: middle;
  pointer-events: none;
}

/* Variant for chip-like elements where the badge looks better stacked. */
.coming-soon.coming-soon-chip::after {
  margin-left: 4px;
  font-size: 8px;
  padding: 1px 5px;
}

/* Variant to suppress the badge entirely. Used on the top menu nav,
   where the greying alone reads as "coming soon" given the cluster of
   live items next to it. The popup-on-click carries the explanation. */
.coming-soon.coming-soon-no-badge::after {
  content: none;
}

/* Suppress hover effects on coming-soon items by neutralizing common
   hover-triggered properties. Specific component selectors may need
   additional targeted overrides; add them with `.coming-soon` parent
   selectors as those cases come up. */
.coming-soon:hover {
  border-color: inherit !important;
  background: inherit !important;
  color: inherit !important;
}

/* Library authoring row: when greyed, the store-variant button must NOT
   light up its icon on hover (the .library-auth-btn-store:hover .icon
   selector would otherwise still match through the .coming-soon parent). */
.coming-soon.library-auth-btn-store:hover .library-auth-btn-icon {
  color: var(--accent) !important;
}

/* ─── Coming Soon Popup ─── */

.coming-soon-popup .modal-box {
  width: 460px;
  padding: 28px 28px 24px;
}

.coming-soon-popup-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--purple-light);
  color: var(--lira-purple);
  font-size: 22px;
  margin-bottom: 14px;
}

.coming-soon-popup-eyebrow {
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--lira-purple);
  margin-bottom: 6px;
}

.coming-soon-popup-title {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 600;
  color: var(--text);
  margin: 0 0 10px;
  line-height: 1.25;
}

.coming-soon-popup-body {
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.55;
  color: var(--text-sec);
  margin: 0 0 22px;
}

.coming-soon-popup-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.coming-soon-popup-actions .btn-primary {
  background: var(--lira-purple);
  border-color: var(--lira-purple);
}

.coming-soon-popup-actions .btn-primary:hover {
  background: #7d2879;
  border-color: #7d2879;
}


/* ─── Tooltip — compact hover card for `data-tooltip` elements ───
   Replaces native browser `title=` tooltips with a styled card so we
   control wrap width, color, and positioning. Driven by the Tooltip
   utility in shared.js; the JS attaches the element to <body> so it
   escapes any modal containment (welcome dialog, popups, etc).

   Color choice: a desaturated cool blue, distinct from the purple
   coming-soon family. Tooltips are descriptive/helper info, not
   roadmap signals — they shouldn't share a palette with greyed-out
   items.
*/

:root {
  --tooltip-bg: #eef2fb;
  --tooltip-border: #c8d2ea;
  --tooltip-text: #1f2a44;
}

.lira-tooltip {
  position: fixed;
  z-index: 9999;
  max-width: 240px;
  padding: 9px 12px;
  background: var(--tooltip-bg);
  color: var(--tooltip-text);
  border: 1px solid var(--tooltip-border);
  border-radius: 8px;
  font-family: var(--font-body);
  font-size: 12px;
  line-height: 1.45;
  font-weight: 400;
  box-shadow: 0 4px 14px rgba(31, 42, 68, 0.12);
  opacity: 0;
  transition: opacity 0.15s ease-in-out;
  pointer-events: none;
}

.lira-tooltip.visible {
  opacity: 1;
}

/* Triangle pointer — rendered as two stacked pseudo-elements so the
   1px border line shows. The outer (::before) is the border-colored
   triangle; the inner (::after) is the fill-colored triangle nudged
   1px inward. Position flips when the tooltip is placed below the
   trigger (see .lira-tooltip.below). */
.lira-tooltip::before,
.lira-tooltip::after {
  content: '';
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
}

.lira-tooltip::before {
  bottom: -7px;
  border-top: 7px solid var(--tooltip-border);
}

.lira-tooltip::after {
  bottom: -6px;
  border-top: 7px solid var(--tooltip-bg);
}

.lira-tooltip.below::before {
  bottom: auto;
  top: -7px;
  border-top: none;
  border-bottom: 7px solid var(--tooltip-border);
}

.lira-tooltip.below::after {
  bottom: auto;
  top: -6px;
  border-top: none;
  border-bottom: 7px solid var(--tooltip-bg);
}



/* ─── App Shell (v19 — rail-only nav, four-zone workspace) ─────────────── */

.app-shell {
  display: flex;
  height: 100vh;
  width: 100vw;
  overflow: hidden;
}

/* Activity rail — the single primary navigation (labeled sidebar) */
.activity-rail {
  width: 228px;
  flex: none;
  background: var(--surface);
  border-right: 1px solid var(--sidebar-border);
  display: flex;
  flex-direction: column;
  padding: 16px 12px;
}

.activity-rail-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 4px 14px;
}

.activity-rail-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 0;
  text-decoration: none;
}

.brand-mark {
  width: 32px;
  height: 32px;
  object-fit: contain;
  flex: none;
}

.brand-word {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 21px;
  color: var(--text);
  letter-spacing: -.01em;
}

.activity-rail-items {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.rail-account {
  margin-top: auto;
}

.rail-account-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--lira-purple);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.02em;
  flex: none;
}

.rail-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 9px 12px;
  background: none;
  border: none;
  border-radius: 9px;
  color: var(--text-dim);
  font-family: var(--font-body);
  text-align: left;
  text-decoration: none;
  transition: background .12s, color .12s;
}

.rail-item:hover {
  background: var(--surface-alt);
  color: var(--text);
}

.rail-item.active {
  color: var(--text);
}

.rail-item.active .rail-item-label {
  font-weight: 500;
}

.rail-item-glyph {
  font-size: 16px;
  line-height: 1;
  width: 20px;
  text-align: center;
  flex: none;
}

.rail-item-glyph svg {
  width: 18px;
  height: 18px;
  display: block;
  margin: 0 auto;
}

.rail-item-label {
  font-size: 13px;
  font-weight: 400;
}

.rail-item.coming-soon {
  color: var(--text-dim);
  opacity: 0.65;
}

.rail-item.coming-soon:hover {
  color: var(--text-sec);
  opacity: 1;
}

/* Main region — fills between rail and (optional) assistant rail */
.app-main {
  flex: 1;
  min-width: 0;
  display: flex;
  overflow: hidden;
  background: var(--bg);
}

/* Workspace: contextual panel (palette) + canvas */
.workspace {
  flex: 1;
  min-width: 0;
  display: flex;
}

.context-panel {
  width: var(--side-panel-width);
  flex: none;
  background: var(--surface);
  border-right: 1px solid var(--sidebar-border);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

.context-panel-project {
  padding: 16px 16px 14px;
  border-bottom: 1px solid var(--border-light);
}

.context-panel-project-name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 15px;
  color: var(--text);
}

.context-panel-project-levels {
  font-size: 12px;
  color: var(--text-sec);
  margin-top: 3px;
}

.context-panel-readiness {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 8px;
}

.context-readiness-pill {
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 10px;
  background: var(--purple-light);
  color: var(--purple-deep);
}

.context-panel-settings {
  margin-top: 12px;
  width: 100%;
  padding: 7px;
  font-size: 12px;
  color: var(--text-sec);
  background: var(--surface-alt);
  border: 1px solid var(--border-light);
  border-radius: 7px;
}

.context-panel-settings:hover {
  color: var(--text);
  border-color: var(--border);
}

.context-panel-section {
  padding: 14px 12px 24px;
}

.context-panel-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--text-dim);
  padding: 0 6px 8px;
}

/* Assistant rail (right) */
.assistant-rail {
  width: var(--side-panel-width);
  flex: none;
  background: var(--surface);
  border-left: 1px solid var(--sidebar-border);
  display: flex;
  flex-direction: column;
  padding: 16px 14px;
  overflow-y: auto;
  min-height: 0;
}

/* Shared expanded-panel heading — identical across Fields, Comments,
   Add Content, and Ask Lira: star mark + display-font title, left-aligned.
   Carries no margin so it centers correctly inside flex head rows; the
   container supplies the gap to the body below. */
.panel-heading {
  display: flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.2;
}

.panel-heading-mark {
  color: var(--lira-purple);
  font-size: 14px;
  line-height: 1;
  flex: none;
}

.assistant-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 12px;
}

/* Shared head row + collapse control across all four collapsible panels */
.panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 12px;
}

.panel-head .panel-heading {
  margin: 0;
}

.panel-collapse {
  font-size: 15px;
  color: var(--text-dim);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0 2px;
  line-height: 1;
  flex: none;
}

.panel-collapse:hover {
  color: var(--text);
}

.assistant-greeting {
  font-size: 12.5px;
  color: var(--text-sec);
  margin: 0 2px 14px;
  line-height: 1.5;
}

/* General "how this area works" instructions at the top of each surface —
   Fields panel, the workspace, and (via the greeting) the Add Content panel —
   so the three-part layout reads consistently. */
.panel-intro {
  font-size: 12.5px;
  color: var(--text-sec);
  line-height: 1.5;
  margin: 0 6px 14px;
}

.panel-intro.workspace-intro {
  max-width: 620px;
  margin: 20px 40px 28px;
  padding: 2px 4px;
  line-height: 1.6;
}

/* Inline cues inside the workspace intro — small static echoes of the real
   Author button and drag handle so the instructions point at the right UI. */
.intro-cue {
  display: inline;
  white-space: nowrap;
}

.intro-cue-author {
  color: var(--text);
}

.intro-cue-drag {
  color: var(--text-dim);
  font-size: 14px;
  line-height: 1;
  padding: 0 2px;
}

.intro-cue-power {
  color: var(--lira-purple);
  font-size: 12px;
  line-height: 1;
  padding: 0 1px;
}

.assistant-suggestions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.assistant-chip {
  text-align: left;
  font-size: 12.5px;
  line-height: 1.4;
  padding: 9px 11px;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: var(--surface);
  color: var(--text);
}

.assistant-chip:disabled {
  color: var(--text-sec);
}

.assistant-thread {
  flex: 1;
  overflow-y: auto;
  margin: 12px 0;
}

.assistant-input-row {
  display: flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--border);
  border-radius: 9px;
  padding: 7px 9px;
}

.assistant-input {
  flex: 1;
  border: none;
  outline: none;
  background: none;
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--text);
}

.assistant-send {
  background: none;
  border: none;
  color: var(--text-dim);
  font-size: 15px;
}

.assistant-foot-note {
  font-size: 10.5px;
  color: var(--text-dim);
  text-align: center;
  margin-top: 8px;
}

.assistant-chip:hover:not(:disabled) {
  border-color: var(--lira-purple);
  background: var(--accent-light);
  cursor: pointer;
}

.assistant-send:not(:disabled):hover {
  color: var(--lira-purple);
  cursor: pointer;
}

.assistant-send:disabled,
.assistant-input:disabled {
  opacity: 0.5;
}

/* ─── Shared collapsed-strip pattern ───
   Every collapsible panel except the activity rail (which keeps its icon mode)
   collapses to this thin vertical strip: a mark over a rotated label, the whole
   strip a click target that re-opens the panel. Hidden until its panel is
   collapsed; each panel's collapsed-state rule flips it to display:flex. The
   mark swaps cleanly from a glyph to an <img> when real icons land. */
.panel-strip {
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  width: 100%;
  height: 100%;
  padding: 16px 0;
  box-sizing: border-box;
  border: none;
  background: none;
  cursor: pointer;
  color: var(--text-sec);
}

.panel-strip:hover {
  color: var(--text);
}

.panel-strip-mark {
  color: var(--lira-purple);
  font-size: 16px;
  line-height: 1;
  flex: none;
}

.panel-strip-mark img {
  width: 20px;
  height: 20px;
  object-fit: contain;
  display: block;
}

.panel-strip-label {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

/* ─── Comments panel (sits left of the Assistant; empty for now) ─── */
.comments-panel {
  flex: none;
  width: 300px;
  background: var(--surface);
  border-left: 1px solid var(--sidebar-border);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.comments-open {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 16px 14px;
  overflow: hidden;
  box-sizing: border-box;
}

.comments-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 12px;
}

.comments-empty {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 12px;
  color: var(--text-dim);
  line-height: 1.5;
  padding: 0 8px;
}

html.comments-collapsed .comments-panel {
  width: 40px;
}

html.comments-collapsed .comments-open {
  display: none;
}

html.comments-collapsed .comments-panel .panel-strip {
  display: flex;
}

/* ─── Ask-Lira panel (collapsible conversation surface) ─── */
.ask-panel {
  flex: none;
  width: var(--side-panel-width);
  background: var(--surface);
  border-left: 1px solid var(--sidebar-border);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.ask-open {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 16px 14px;
  overflow: hidden;
  box-sizing: border-box;
}

/* Collapsed: the shared thin strip. */
html.ask-collapsed .ask-panel {
  width: 40px;
}

html.ask-collapsed .ask-open {
  display: none;
}

html.ask-collapsed .ask-panel .panel-strip {
  display: flex;
}

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

.ask-head-actions {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

.ask-clear {
  font-size: 11px;
  color: var(--text-dim);
  background: none;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 3px 8px;
  cursor: pointer;
}

.ask-clear:hover {
  color: var(--text);
  border-color: var(--lira-purple);
}

.ask-sub {
  font-size: 11.5px;
  color: var(--text-dim);
  margin: 0 0 12px;
  line-height: 1.5;
}

.ask-examples {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 12px;
}

.ask-example {
  text-align: left;
  font-size: 12px;
  line-height: 1.35;
  color: var(--text);
  background: var(--surface-alt);
  border: 1px solid var(--border-light);
  border-radius: 8px;
  padding: 7px 10px;
  cursor: pointer;
  transition: all 0.12s;
}

.ask-example:hover {
  border-color: var(--lira-purple);
  background: var(--accent-light);
}

.ask-input-row {
  display: flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--border);
  border-radius: 9px;
  padding: 7px 9px;
}

.ask-thread {
  flex: 1;
  overflow-y: auto;
  margin: 12px 0 0;
}

/* Rail-side field proposals (Fill / Strengthen) */
.assistant-proposals {
  display: flex;
  flex-direction: column;
}

.assistant-proposals:not(:empty) {
  margin-top: 12px;
}

.assistant-proposals-status {
  font-size: 12px;
  color: var(--text-dim);
  font-style: italic;
  padding: 4px 2px;
}

/* Context panels — elicitation questions + quick-pick form chips */
.assistant-context-panels {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 12px;
}

.assistant-elicit {
  font-size: 12px;
  color: var(--text-sec);
  border: 1px solid var(--border-light);
  border-radius: 9px;
  padding: 8px 10px;
  background: var(--surface);
}

.assistant-elicit summary {
  cursor: pointer;
  font-weight: 500;
  color: var(--text);
  list-style: none;
}

.assistant-elicit summary::-webkit-details-marker {
  display: none;
}

.assistant-elicit summary::before {
  content: "▾";
  color: var(--text-dim);
  margin-right: 6px;
  font-size: 10px;
}

.assistant-elicit:not([open]) summary::before {
  content: "▸";
}

.assistant-elicit-list {
  margin: 8px 0 2px;
  padding-left: 16px;
}

.assistant-elicit-list li {
  margin-bottom: 5px;
  line-height: 1.45;
}

.assistant-forms-label {
  font-size: 11px;
  color: var(--text-dim);
  font-weight: 500;
  margin-bottom: 6px;
}

.assistant-forms-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.assistant-form-chip {
  font-size: 11.5px;
  line-height: 1.3;
  padding: 5px 9px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface);
  color: var(--text);
}

.assistant-form-chip:hover {
  border-color: var(--lira-purple);
  background: var(--accent-light);
  cursor: pointer;
}

.assistant-form-chip-open {
  color: var(--text-sec);
  font-style: italic;
  border-style: dashed;
}

.assistant-form-chip.armed {
  border-color: var(--lira-purple);
  background: var(--accent-light);
  color: var(--lira-purple);
  font-weight: 600;
}

/* ─── Per-field compose box ─── */
.assistant-compose {
  margin: 0 2px 14px;
}

.assistant-compose:empty {
  display: none;
}

.compose-head {
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 7px;
}

.compose-box {
  width: 100%;
  box-sizing: border-box;
  min-height: 96px;
  max-height: 360px;
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 11px;
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 1.55;
  color: var(--text);
  background: var(--surface);
}

.compose-box:focus {
  outline: none;
  border-color: var(--border-focus);
}

.compose-box:empty:before {
  content: attr(data-placeholder);
  color: var(--text-dim);
}

.compose-box p {
  margin: 0 0 6px;
}

.compose-box p:last-child {
  margin-bottom: 0;
}

.compose-box ul,
.compose-box ol {
  margin: 0 0 6px;
  padding-left: 20px;
}

.compose-box li {
  margin: 1px 0;
}

.compose-box a {
  color: var(--lira-teal);
  text-decoration: underline;
}

.compose-slot {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

.compose-actions {
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin-top: 10px;
}

.compose-gen {
  width: 100%;
  text-align: center;
  font-size: 12px;
  font-weight: 500;
  padding: 9px 12px;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  transition: all 0.12s;
}

.compose-gen:hover:not(:disabled) {
  border-color: var(--lira-purple);
  background: var(--accent-light);
}

.compose-gen:disabled {
  opacity: 0.6;
  cursor: default;
}

.compose-insert {
  width: 100%;
}

/* "Add to workspace" — secondary action next to author/insert; places the
   recorded intent without authoring. */
.compose-place {
  width: 100%;
  font-family: var(--font-body);
  font-size: 12.5px;
  padding: 8px 9px;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: var(--surface);
  color: var(--text-sec);
  cursor: pointer;
}

.compose-place:hover {
  border-color: var(--lira-purple);
  color: var(--purple-deep);
}

/* Rail head "Start over". */
.assistant-head-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.assistant-reset {
  font-family: var(--font-body);
  font-size: 11px;
  color: var(--text-dim);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}

.assistant-reset:hover {
  color: var(--text);
  text-decoration: underline;
}

.compose-foot {
  margin-top: 8px;
  font-size: 11.5px;
  color: var(--text-sec);
}

.compose-foot:empty {
  display: none;
}

.compose-lib-stub {
  font-size: 12px;
  color: var(--text-dim);
  line-height: 1.5;
  padding: 9px 11px;
  border: 1px dashed var(--border);
  border-radius: 9px;
}

/* ── Library compose (search staged sets → insert / author) ── */
.compose-lib-hint {
  font-size: 11.5px;
  color: var(--text-dim);
  line-height: 1.45;
  margin-bottom: 8px;
}

.compose-lib-search {
  width: 100%;
  box-sizing: border-box;
  padding: 8px 11px;
  margin-bottom: 8px;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: var(--surface);
  font-family: var(--font-body);
  font-size: 12.5px;
  color: var(--text);
}

.compose-lib-search:focus {
  outline: none;
  border-color: var(--border-focus);
}

.compose-lib-search::placeholder {
  color: var(--text-dim);
}

.compose-lib-list {
  display: flex;
  flex-direction: column;
  gap: 5px;
  max-height: 320px;
  overflow-y: auto;
}

.compose-lib-row {
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: 100%;
  text-align: left;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  transition: all 0.12s;
}

.compose-lib-row:hover {
  border-color: var(--lira-purple);
  background: var(--accent-light);
}

.compose-lib-check {
  flex-direction: row;
  align-items: flex-start;
  gap: 8px;
}

.compose-lib-check input {
  margin-top: 2px;
  flex: none;
}

.compose-lib-code {
  font-family: var(--font-mono, monospace);
  font-size: 12px;
  font-weight: 600;
  color: var(--lira-purple);
}

.compose-lib-name {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text);
}

.compose-lib-desc {
  font-size: 11.5px;
  color: var(--text-dim);
  line-height: 1.4;
}

.compose-lib-none {
  font-size: 12px;
  color: var(--text-dim);
  padding: 8px 2px;
}

.compose-lib-foot {
  margin-top: 9px;
}

.compose-lib-foot:empty {
  display: none;
}

.compose-lib-flash {
  font-size: 11.5px;
  color: var(--accent-hover);
  margin-top: 6px;
}

/* Move RENDER panel: facing toggle + authored preview + polish loop. */
.compose-move-panel {
  margin-top: 11px;
  padding-top: 11px;
  border-top: 1px solid var(--border);
}

.compose-move-head {
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 8px;
}

.compose-move-facing {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 9px;
}

.compose-facing-chip {
  font-size: 11.5px;
  padding: 5px 10px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  transition: all 0.12s;
}

.compose-facing-chip:hover {
  border-color: var(--lira-purple);
  background: var(--accent-light);
}

.compose-facing-chip.armed {
  border-color: var(--lira-purple);
  background: var(--accent-light);
  color: var(--lira-purple);
  font-weight: 600;
}

.compose-move-preview {
  margin-top: 10px;
  min-height: 90px;
  max-height: 360px;
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 11px;
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 1.55;
  color: var(--text);
  background: var(--surface);
}

.compose-move-preview:focus {
  outline: none;
  border-color: var(--border-focus);
}

/* Thread messages */
.assistant-msg {
  font-size: 12.5px;
  line-height: 1.5;
  padding: 8px 11px;
  border-radius: 10px;
  margin-bottom: 8px;
  max-width: 92%;
  white-space: pre-wrap;
}

.assistant-msg-user {
  background: var(--accent-light);
  color: var(--text);
  margin-left: auto;
}

.assistant-msg-assistant {
  background: var(--surface-alt);
  color: var(--text);
}

.assistant-msg-thinking {
  background: var(--surface-alt);
  color: var(--text-dim);
  font-style: italic;
}

/* Proposal cards (propose-and-confirm) */
.assistant-proposals {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 10px;
}

.proposal-card {
  border: 1px solid var(--border);
  border-radius: 11px;
  padding: 10px 11px;
  background: var(--surface);
}

.proposal-card.dismissed {
  opacity: 0.4;
}

.proposal-card.dismissed .proposal-text,
.proposal-card.dismissed .proposal-dismiss {
  pointer-events: none;
}

.proposal-head {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 12px;
  color: var(--text);
  margin-bottom: 6px;
}

/* Clarify-then-act scope question + its option chips; cross-node proposal tag. */
.assistant-clarify {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 4px 2px;
}

.assistant-clarify-q {
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--text-sec);
}

.assistant-clarify-chips {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.proposal-head-node {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 10.5px;
  color: var(--text-sec);
  background: var(--surface-alt);
  border-radius: 5px;
  padding: 1px 6px;
  margin-left: 6px;
  vertical-align: 1px;
}

.proposal-text {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid var(--border-light);
  border-radius: 8px;
  padding: 7px 9px;
  font-family: var(--font-body);
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--text);
  background: var(--surface);
  min-height: 44px;
  max-height: 340px;
  overflow-y: auto;
}

.proposal-text p {
  margin: 0 0 8px;
}

.proposal-text p:last-child {
  margin-bottom: 0;
}

.proposal-text ul {
  margin: 4px 0;
  padding-left: 18px;
}

.proposal-text li {
  margin-bottom: 3px;
}

.proposal-text:focus {
  outline: none;
  border-color: var(--border-focus);
}

.proposal-edits {
  margin-top: 7px;
  font-size: 11.5px;
  color: var(--text-sec);
}

.proposal-edits summary {
  cursor: pointer;
  color: var(--lira-purple);
  font-weight: 500;
}

.proposal-edits ul {
  margin: 6px 0 0;
  padding-left: 16px;
}

.proposal-edits li {
  margin-bottom: 3px;
  line-height: 1.4;
}

.proposal-dismiss {
  margin-top: 8px;
  background: none;
  border: none;
  color: var(--text-dim);
  font-size: 11.5px;
  cursor: pointer;
  padding: 0;
}

.proposal-dismiss:hover {
  color: var(--danger);
}

.proposal-insert {
  align-self: flex-start;
  padding: 8px 16px;
  font-size: 12.5px;
  cursor: pointer;
}

/* Per-card action row: Insert this one + Dismiss. */
.proposal-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 8px;
}

.proposal-insert-one {
  padding: 6px 14px;
  font-size: 12px;
  cursor: pointer;
}

.proposal-actions .proposal-dismiss {
  margin-top: 0;
}

/* Bottom bar holds "Insert all"; hidden when fewer than two remain. */
.proposal-bar {
  margin-top: 4px;
}

/* Flash a field when content is written into it in place (no reload). */
.node-field.flash-hint {
  animation: flashHint 0.8s ease;
}

@keyframes flashHint {
  0% {
    background: var(--accent-light);
  }

  100% {
    background: transparent;
  }
}

.proposal-warnings {
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.proposal-warning {
  font-size: 11.5px;
  line-height: 1.4;
  color: var(--text-sec);
  background: var(--surface-2, rgba(0, 0, 0, 0.03));
  border-left: 2px solid var(--warning, #c98a00);
  border-radius: 3px;
  padding: 5px 8px;
}

/* Destinations (Projects, Library, Catalog) */
.dest {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.dest-header {
  padding: 24px 32px 14px;
  border-bottom: 1px solid var(--border-light);
  background: var(--surface);
}

.dest-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 22px;
}

.dest-sub {
  font-size: 13px;
  color: var(--text-sec);
  margin-top: 4px;
}

.dest-body {
  flex: 1;
  overflow-y: auto;
  padding: 24px 32px;
}

.dest-empty {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  text-align: center;
}

.dest-empty-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 18px;
}

.dest-empty-sub {
  font-size: 13px;
  color: var(--text-sec);
  margin-bottom: 6px;
}

/* Projects grid */
.projects-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 14px;
}

.project-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 110px;
}

.project-card.active {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent);
}

.project-card-main {
  cursor: pointer;
}

.project-card-name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 15px;
}

.project-card-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
}

.project-card-badge {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 9px;
  background: var(--accent-light);
  color: var(--accent-hover);
}

.project-card-badge.template {
  background: var(--surface-alt);
  color: var(--text-dim);
}

.project-card.is-template {
  border-style: dashed;
}

.project-card.is-template.active {
  border-style: solid;
}

.project-card-updated {
  font-size: 11px;
  color: var(--text-dim);
}

.project-card-team {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-dim);
  cursor: default;
}

.project-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 14px;
}

/* Projects toolbar — search */
.projects-toolbar {
  margin-bottom: 16px;
}

.projects-search-wrap {
  position: relative;
  max-width: 320px;
}

.projects-search-glyph {
  position: absolute;
  left: 11px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-dim);
  font-size: 14px;
  pointer-events: none;
}

.projects-search {
  width: 100%;
  padding: 8px 12px 8px 32px;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: var(--surface);
  color: var(--text);
  font-size: 13px;
}

.projects-search:focus {
  outline: none;
  border-color: var(--border-focus);
}

.projects-empty {
  grid-column: 1 / -1;
  padding: 28px 4px;
  text-align: center;
  color: var(--text-dim);
  font-size: 13px;
}

.project-card-btn {
  font-size: 12px;
  padding: 5px 10px;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: var(--surface);
  color: var(--text-sec);
}

.project-card-btn:hover {
  color: var(--text);
  border-color: var(--border-focus);
}

.project-card-btn.danger:hover {
  color: var(--danger);
  border-color: var(--danger);
}

/* Card overflow "⋯" menu */
.project-card-menu {
  position: relative;
  display: inline-flex;
}

.project-card-menu-trigger {
  line-height: 1;
  font-weight: 700;
  letter-spacing: 1px;
  padding: 5px 9px;
}

.project-card-menu.open .project-card-menu-trigger {
  color: var(--text);
  border-color: var(--border-focus);
}

.project-card-menu-list {
  display: none;
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  z-index: 20;
  min-width: 150px;
  padding: 4px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 9px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.10);
}

.project-card-menu.open .project-card-menu-list {
  display: block;
}

.project-card-menu-item {
  display: block;
  width: 100%;
  text-align: left;
  padding: 7px 10px;
  font-size: 12.5px;
  color: var(--text-sec);
  background: none;
  border: none;
  border-radius: 6px;
}

.project-card-menu-item:hover {
  background: var(--surface-alt);
  color: var(--text);
}

.project-card-menu-item.danger:hover {
  background: var(--danger-light);
  color: var(--danger);
}

.project-card-new {
  align-items: stretch;
  justify-content: center;
  border-style: dashed;
}

.project-card-new-trigger {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: 100%;
  height: 100%;
  background: none;
  border: none;
  color: var(--text-sec);
  font-size: 13px;
}

.project-card-new-plus {
  font-size: 26px;
  color: var(--text-dim);
}

.project-card-new-trigger:hover {
  color: var(--accent);
}

.project-card-new-form {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.project-card-new-input {
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-family: var(--font-body);
  font-size: 13px;
}

.project-card-new-submit {
  width: 100%;
}

/* Library destination under the shell */
.dest-library {
  display: flex;
  flex-direction: row;
}

.context-panel-library {
  padding: 16px 12px;
}

.library-nav-item {
  display: block;
  padding: 8px 10px;
  border-radius: 8px;
  font-size: 13px;
  color: var(--text-sec);
}

.library-nav-item:hover {
  background: var(--surface-alt);
  color: var(--text);
}

.library-nav-item.active {
  background: var(--accent-light);
  color: var(--accent-hover);
  font-weight: 500;
}

.context-panel-library .library-auth-btn {
  display: block;
  width: 100%;
  text-align: left;
  margin-top: 6px;
  padding: 8px 10px;
  font-size: 12.5px;
  border: 1px solid var(--border-light);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text-sec);
}

.library-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.library-back-setup {
  display: inline-block;
  margin: 14px 28px 0;
  font-size: 13px;
  font-weight: 500;
  color: var(--accent);
  text-decoration: none;
}

.library-back-setup:hover {
  text-decoration: underline;
}

.library-main .library-header {
  padding: 20px 28px 14px;
  border-bottom: 1px solid var(--border-light);
  background: var(--surface);
}

.library-main .library-grid {
  flex: 1;
  overflow: hidden;
  padding: 18px 28px 28px;
}

/* ─── Collapsible sidebars (rail / context panel / assistant) ──────────── */

.collapse-btn {
  background: none;
  border: none;
  color: var(--text-dim);
  cursor: pointer;
  padding: 5px 7px;
  border-radius: 7px;
  font-size: 15px;
  line-height: 1;
}

.collapse-btn:hover {
  background: var(--surface-alt);
  color: var(--text);
}

.collapse-chevron {
  display: inline-block;
  transition: transform .15s;
}

/* Positioning per sidebar */
.rail-collapse-toggle {
  flex: none;
}

/* Activity rail — icon-only mode */
html.rail-collapsed .activity-rail {
  width: 66px;
  padding: 16px 8px;
}

html.rail-collapsed .brand-word {
  display: none;
}

html.rail-collapsed .rail-item-label {
  display: none;
}

html.rail-collapsed .rail-item {
  justify-content: center;
  padding: 10px 0;
  gap: 0;
}

html.rail-collapsed .rail-item-glyph {
  width: auto;
}

html.rail-collapsed .activity-rail-head {
  flex-direction: column;
  gap: 10px;
  padding: 4px 0 14px;
}

html.rail-collapsed .activity-rail-brand {
  justify-content: center;
  flex: none;
  padding: 0;
}

html.rail-collapsed .rail-collapse-toggle .collapse-chevron {
  transform: rotate(180deg);
}

/* Context panel — collapse to the shared strip */
html.panel-collapsed .context-panel {
  width: 40px;
  overflow: hidden;
}

html.panel-collapsed .context-panel> :not(.panel-strip) {
  display: none;
}

html.panel-collapsed .context-panel .panel-strip {
  display: flex;
}

/* Assistant rail — collapse to the shared strip */
html.assistant-collapsed .assistant-rail {
  width: 40px;
  overflow: hidden;
  padding: 0;
}

html.assistant-collapsed .assistant-rail> :not(.panel-strip) {
  display: none;
}

html.assistant-collapsed .assistant-rail .panel-strip {
  display: flex;
}

/* ─── Workspace header (parity with library/dest headers) ─────────────── */
.workspace-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.workspace-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 40px 16px;
  border-bottom: 1px solid var(--border-light);
  background: var(--surface);
}

.workspace-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 22px;
  color: var(--text);
}

.workspace-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 6px;
  font-size: 13px;
  color: var(--text-sec);
}

.workspace-meta-dot {
  color: var(--text-dim);
}

.workspace-header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: none;
}

.tree-tools {
  display: flex;
  gap: 2px;
  padding: 2px;
  background: var(--surface-alt);
  border: 1px solid var(--border);
  border-radius: 8px;
}

.canvas-tools {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  /* Navigator sits in the fixed header, flush under the instructions; padding
     aligns it with the canvas content below, the border separates it from the
     scrolling tree. */
  padding: 10px 40px 12px;
  border-bottom: 1px solid var(--border-light);
  background: var(--bg);
}

.canvas-tools-label {
  font-size: 11px;
  color: var(--text-dim);
  white-space: nowrap;
}

.canvas-tools-divider {
  width: 1px;
  height: 18px;
  background: var(--border);
}

.depth-seg {
  display: inline-flex;
  border: 1px solid var(--border);
  border-radius: 7px;
  overflow: hidden;
}

.depth-seg-btn {
  font-size: 12px;
  padding: 5px 10px;
  border: none;
  background: transparent;
  color: var(--text-sec);
  cursor: pointer;
  white-space: nowrap;
  border-right: 1px solid var(--border-light);
  transition: background .12s, color .12s;
}

.depth-seg-btn:last-child {
  border-right: none;
}

.depth-seg-btn:hover {
  background: var(--surface-alt);
  color: var(--text);
}

.depth-seg-btn.active {
  background: var(--accent-light);
  color: var(--purple-deep);
  font-weight: 500;
}

.canvas-tools-btn {
  font-size: 12px;
  padding: 5px 10px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-sec);
  border-radius: 7px;
  cursor: pointer;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  transition: background .12s, color .12s, border-color .12s;
}

.canvas-tools-btn:hover {
  background: var(--surface-alt);
  color: var(--text);
}

.canvas-fields-toggle.active {
  background: var(--accent-light);
  color: var(--purple-deep);
  border-color: var(--accent-light);
  font-weight: 500;
}

.canvas-jump-glyph {
  font-size: 13px;
  line-height: 1;
}

/* Jump finder modal */
.jump-modal {
  align-items: flex-start;
}

.jump-box {
  background: var(--surface);
  border-radius: 12px;
  box-shadow: var(--shadow-lg);
  width: 460px;
  max-width: calc(100vw - 32px);
  margin-top: 12vh;
  overflow: hidden;
  border: 1px solid var(--border);
}

.jump-input {
  width: 100%;
  box-sizing: border-box;
  border: none;
  outline: none;
  padding: 16px 18px;
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--text);
  border-bottom: 1px solid var(--border-light);
}

.jump-input::placeholder {
  color: var(--text-dim);
}

.jump-results {
  max-height: 320px;
  overflow-y: auto;
  padding: 6px;
}

.jump-result {
  display: flex;
  align-items: baseline;
  gap: 8px;
  width: 100%;
  text-align: left;
  border: none;
  background: transparent;
  cursor: pointer;
  border-radius: 7px;
  padding: 8px 10px;
  font-family: var(--font-body);
  color: var(--text);
}

.jump-result:hover,
.jump-result.active {
  background: var(--accent-light);
}

.jump-result-level {
  font-size: 9px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--purple-deep);
  border: 1px solid var(--accent-light);
  border-radius: 4px;
  padding: 1px 6px;
  flex: none;
}

.jump-result-title {
  font-size: 13px;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.jump-result-parent {
  font-size: 11px;
  color: var(--text-dim);
  flex: none;
}

.jump-empty {
  padding: 18px;
  text-align: center;
  font-size: 13px;
  color: var(--text-dim);
}

.jump-hint {
  display: flex;
  gap: 14px;
  padding: 8px 14px;
  border-top: 1px solid var(--border-light);
  font-size: 10px;
  color: var(--text-dim);
}

.workspace-settings-btn {
  font-size: 13px;
  padding: 7px 13px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text-sec);
  white-space: nowrap;
}

.workspace-settings-btn:hover {
  color: var(--text);
  border-color: var(--border-focus);
}

/* ─── Top-level "describe your project" box ───
   The root node carries no fields; it holds the project description, which the
   assistant reads as standing context. Styled as a calm prose block, distinct
   from the field rows below it. */
.project-describe {
  background: var(--surface-alt);
  border: 1px solid var(--border-light);
  border-radius: 9px;
  padding: 11px 13px;
  margin-bottom: 8px;
}

.project-describe-label {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 6px;
}

.project-describe-input {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.55;
  color: var(--text);
  width: 100%;
  border: none;
  background: transparent;
  outline: none;
  padding: 0;
  resize: none;
  overflow: hidden;
  min-height: 22px;
}

.project-describe-input::placeholder {
  color: var(--text-dim);
  font-weight: 400;
}

/* Empty-canvas pointer to the assistant rail (the steps live only in the rail). */
.canvas-empty-pointer {
  margin-top: 14px;
  font-size: 12px;
  color: var(--text-dim);
  font-style: italic;
}

/* ─── Getting-started walkthrough (assistant rail) ─── */
.assistant-getting-started {
  margin: 0 2px 14px;
}

.assistant-getting-started:empty {
  display: none;
}

.gs-head {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 8px;
}

.gs-progress {
  font-size: 11px;
  font-weight: 500;
  color: var(--accent);
  margin-bottom: 8px;
}

.gs-step {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  width: 100%;
  text-align: left;
  font-family: var(--font-body);
  font-size: 12.5px;
  line-height: 1.4;
  padding: 7px 2px;
  border: none;
  background: none;
  color: var(--text-sec);
}

.gs-mark {
  flex: 0 0 auto;
  width: 16px;
  text-align: center;
  font-weight: 600;
}

.gs-step.gs-done {
  color: var(--text-dim);
}

.gs-step.gs-done .gs-mark {
  color: var(--lira-green, #3FA34D);
}

.gs-step.gs-done .gs-label {
  text-decoration: line-through;
  text-decoration-color: var(--border);
}

.gs-step.gs-upcoming {
  color: var(--text-dim);
  opacity: 0.65;
}

button.gs-step.gs-active {
  cursor: pointer;
  background: var(--accent-light);
  border: 1px solid var(--border);
  border-radius: 9px;
  padding: 9px 11px;
  color: var(--accent-hover);
  font-weight: 500;
  transition: all 0.15s;
}

button.gs-step.gs-active:hover {
  border-color: var(--accent);
}

button.gs-step.gs-active .gs-mark {
  color: var(--accent);
}

/* Combined name + description card on the top level. Naming and describing the
   top level happen together (getting-started step 1). */
.project-field-label {
  display: block;
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin: 0 0 5px;
}

.project-field-label+.project-name-input {
  margin-bottom: 12px;
}

.project-name-input {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
  width: 100%;
  border: none;
  border-bottom: 1.5px solid var(--border-light);
  background: transparent;
  outline: none;
  padding: 0 0 5px;
}

.project-name-input:focus {
  border-bottom-color: var(--accent);
}

.project-name-input::placeholder {
  color: var(--text-dim);
  font-weight: 400;
}

/* Root keeps its name in the card, so the header shows it as static text. */
.node-title-static {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  flex: 1;
}

/* ─── Project setup hub (four frames) ─── */
.setup-hub {
  max-width: 760px;
  margin: 0 auto;
  padding: 48px 24px;
}

.setup-hub-head {
  text-align: center;
  margin-bottom: 28px;
}

.setup-hub-title {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 600;
  color: var(--text);
  margin: 0 0 8px;
}

.setup-hub-sub {
  font-size: 13px;
  color: var(--text-sec);
  line-height: 1.6;
  max-width: 520px;
  margin: 0 auto;
}

.setup-hub-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-bottom: 24px;
}

@media (max-width: 720px) {
  .setup-hub-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.setup-frame {
  display: flex;
  flex-direction: column;
  gap: 7px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px;
  text-decoration: none;
  color: var(--text);
  transition: border-color 0.15s, transform 0.1s;
}

.setup-frame:hover {
  border-color: var(--accent);
  transform: translateY(-1px);
}

.setup-frame.is-done {
  border-color: var(--border-light);
}

.setup-frame-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.setup-frame-n {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-dim);
}

.setup-frame-glyph {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
}

.setup-frame-glyph svg {
  width: 19px;
  height: 19px;
  display: block;
}

/* Four logo colors — teal / green / purple / orange — keyed to the four cards
   in order (Structure, Context, Libraries, Team). Icon inherits the color via
   currentColor; background is a soft wash of the same hue. */
.setup-frame.tint-a .setup-frame-glyph {
  background: color-mix(in srgb, var(--lira-teal) 14%, var(--surface));
  color: var(--lira-teal);
}

.setup-frame.tint-b .setup-frame-glyph {
  background: color-mix(in srgb, var(--lira-green) 16%, var(--surface));
  color: var(--lira-green);
}

.setup-frame.tint-c .setup-frame-glyph {
  background: color-mix(in srgb, var(--lira-purple) 13%, var(--surface));
  color: var(--lira-purple);
}

.setup-frame.tint-d .setup-frame-glyph {
  background: color-mix(in srgb, var(--lira-orange) 16%, var(--surface));
  color: var(--lira-orange);
}

.setup-frame-label {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 600;
}

.setup-frame-blurb {
  font-size: 12px;
  color: var(--text-sec);
  line-height: 1.5;
  flex: 1;
}

.setup-frame-status {
  margin-top: 4px;
}

.setup-frame-check {
  font-size: 12px;
  font-weight: 500;
}

.setup-frame-check.done {
  color: #1D9E75;
}

.setup-frame-check.todo {
  color: var(--text-dim);
}

.setup-frame-check.optional {
  color: var(--text-dim);
  font-weight: 400;
  font-style: italic;
}

.setup-hub-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border-top: 1px solid var(--border-light);
  padding-top: 18px;
}

.setup-hub-progress {
  font-size: 13px;
  color: var(--text-sec);
}

.setup-hub-progress.ok {
  color: #1D9E75;
  font-weight: 500;
}

.setup-hub-foot .btn-primary[disabled] {
  opacity: 0.45;
  cursor: not-allowed;
}

/* ─── Setup pages (Structure / Libraries / Context / Team) ─── */
.setup-page {
  max-width: 720px;
  margin: 0 auto;
  padding: 32px 24px 64px;
}

.setup-page-bar {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 14px;
  margin-bottom: 18px;
}

.setup-page-title {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 600;
  margin: 0;
  grid-column: 2;
  text-align: center;
}

.setup-bar-btn {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  border: 1.5px solid var(--border);
  background: var(--surface);
  color: var(--text);
  border-radius: 8px;
  padding: 8px 16px;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
}

.setup-bar-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.setup-bar-btn:first-child {
  justify-self: start;
}

.setup-bar-btn.primary {
  justify-self: end;
  background: var(--accent);
  border-color: var(--accent);
  color: var(--text-inverse);
}

.setup-bar-btn.primary:hover {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
  color: var(--text-inverse);
}

.setup-page-intro {
  font-size: 13px;
  color: var(--text-sec);
  line-height: 1.6;
  margin: 0 0 24px;
}

/* Libraries launcher — three cards, each a link into a library window. The
   staging itself lives in the destination, so this step is a launcher, not a
   picker. */
.setup-lib-launchers {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.setup-lib-launch {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--surface);
  border: 1px solid var(--border-light);
  border-radius: 11px;
  padding: 16px 18px;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}

.setup-lib-launch:hover {
  border-color: var(--accent);
  box-shadow: 0 4px 14px rgba(31, 35, 48, .07);
  transform: translateY(-1px);
}

.setup-lib-launch-icon {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 9px;
  background: var(--accent-light);
  color: var(--accent);
  font-size: 16px;
}

.setup-lib-launch-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.setup-lib-launch-title {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
}

.setup-lib-launch-meta {
  font-size: 12px;
  color: var(--text-dim);
}

.setup-lib-launch-go {
  flex: 0 0 auto;
  font-size: 13px;
  font-weight: 500;
  color: var(--accent);
}

/* ─── Library fields: rich-text body + toolbar (text/media, move, standards) ─── */

.field-lib {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.field-lib-toolbar {
  display: flex;
  align-items: center;
  gap: 2px;
  opacity: 0.55;
  transition: opacity 0.12s ease;
}

.node-field:hover .field-lib-toolbar,
.field-lib:focus-within .field-lib-toolbar {
  opacity: 1;
}

.flbtn {
  font-family: var(--font-body);
  font-size: 11px;
  line-height: 1;
  color: var(--text-sec);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 5px;
  padding: 3px 6px;
  cursor: pointer;
  min-width: 22px;
}

.flbtn:hover {
  background: var(--surface);
  border-color: var(--border-light);
  color: var(--text);
}

.flbtn b,
.flbtn i {
  font-size: 12px;
}

.flbtn-ai {
  color: var(--text-dim);
}

.field-lib-body {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 400;
  color: var(--text);
  line-height: 1.5;
  background: var(--surface);
  border: 1px solid var(--border-light);
  border-radius: 6px;
  padding: 7px 10px;
  min-height: 30px;
  outline: none;
}

.field-lib-body:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent-light);
}

.field-lib-body:empty:before {
  content: attr(data-placeholder);
  color: var(--text-dim);
  font-style: italic;
}

.field-lib-body p {
  margin: 0 0 6px;
}

.field-lib-body p:last-child {
  margin-bottom: 0;
}

.field-lib-body ul,
.field-lib-body ol {
  margin: 0 0 6px;
  padding-left: 20px;
}

.field-lib-body li {
  margin: 1px 0;
}

.field-lib-body a {
  color: var(--lira-teal);
  text-decoration: underline;
}

/* ─── Export destination ─────────────────────────────────────────────────── */
.export-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
  max-width: 920px;
}

.export-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  text-align: left;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 20px 20px 18px;
  min-height: 170px;
  cursor: pointer;
  transition: border-color .15s, box-shadow .15s, transform .1s;
  font-family: var(--font-body);
}

.export-card:hover {
  border-color: var(--accent);
  box-shadow: var(--shadow-lg);
}

.export-card:active {
  transform: translateY(1px);
}

.export-card-glyph {
  font-size: 22px;
  line-height: 1;
  color: var(--accent);
  background: var(--accent-light);
  width: 42px;
  height: 42px;
  border-radius: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 4px;
}

.export-card-glyph.mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 15px;
  font-weight: 600;
}

.export-card-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 16px;
  color: var(--text);
}

.export-card-desc {
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-sec);
}

.export-card-foot {
  margin-top: auto;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--text-dim);
}

.export-card-soon {
  cursor: default;
  opacity: .7;
}

.export-card-soon:hover {
  border-color: var(--border);
  box-shadow: none;
}

.export-card-soon .export-card-glyph {
  color: var(--text-dim);
  background: var(--surface-alt);
}

/* Export dialog */
.export-modal {
  width: 460px;
}

.form-stack {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.form-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.form-label-block {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--text-sec);
}

.export-format-options {
  display: flex;
  gap: 8px;
}

.export-format-opt {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 8px 14px;
  border-radius: 9px;
  border: 1.5px solid var(--border);
  font-size: 13px;
  cursor: pointer;
  color: var(--text);
}

.export-format-opt:has(input:checked) {
  border-color: var(--accent);
  background: var(--accent-light);
  color: var(--accent-hover);
}

.export-empty-toggle {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 13px;
  color: var(--text-sec);
  cursor: pointer;
}

.export-empty-toggle input {
  width: 15px;
  height: 15px;
  accent-color: var(--accent);
}

.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 24px;
}

.btn-ghost {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-sec);
  border-radius: 9px;
  padding: 9px 18px;
  font-family: var(--font-body);
  font-size: 13px;
  cursor: pointer;
}

.btn-ghost:hover {
  border-color: var(--text-dim);
  color: var(--text);
}

/* ─── Library upload modal (moves & standards) — see library_upload.js ───
   Mirrors the content uploader's form styling; reuses the global
   .modal-overlay / .modal-box / .btn-* shell, with .lu-* scoping the form. */
.lu-box {
  max-width: 520px;
  text-align: left;
}

.lu-eyebrow {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--accent);
}

.lu-title {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 700;
  margin: 4px 0 8px;
}

.lu-lede {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--text-sec);
  margin: 0 0 18px;
}

.lu-template-link {
  color: var(--accent);
  font-weight: 500;
}

.lu-field {
  display: block;
  margin-bottom: 14px;
}

.lu-label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 5px;
}

.lu-req {
  color: var(--accent);
}

.lu-input {
  width: 100%;
  box-sizing: border-box;
  padding: 9px 11px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font: 400 14px var(--font-body);
  background: var(--surface);
  color: var(--text);
}

.lu-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-light);
}

.lu-textarea {
  resize: vertical;
  min-height: 44px;
}

.lu-file {
  padding: 8px;
  font-size: 13px;
}

.lu-error {
  background: #fdecec;
  border: 1px solid #f3b9b9;
  color: #9a2222;
  border-radius: 8px;
  padding: 10px 12px;
  margin-bottom: 14px;
  font-size: 13px;
}

.lu-error-msg {
  font-weight: 600;
}

.lu-error-list {
  margin: 6px 0 0;
  padding-left: 18px;
}

.lu-error-list li {
  margin: 2px 0;
}

.lu-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 6px;
}
/* ─── Collapsible panel intros ─── */
.panel-intro.fields-intro,
.panel-intro.workspace-intro {
  display: none;
}

html.fields-intro-open .panel-intro.fields-intro,
html.workspace-intro-open .panel-intro.workspace-intro {
  display: block;
}

.intro-toggle {
  margin-left: 8px;
  padding: 0;
  border: none;
  background: none;
  color: var(--lira-purple);
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 400;
  cursor: pointer;
}

.intro-toggle::before {
  content: "\25B8\00a0";
}

html.fields-intro-open .intro-toggle[data-intro-toggle="fields"]::before,
html.workspace-intro-open .intro-toggle[data-intro-toggle="workspace"]::before {
  content: "\25BE\00a0";
}

.intro-toggle:hover {
  text-decoration: underline;
}

.fields-intro-toggle,
.workspace-intro-toggle {
  display: block;
  margin-left: 0;
  text-align: left;
  margin-bottom: 6px;
}

.fields-intro-toggle {
  margin-top: 2px;
}
.workspace-intro-toggle {
  padding: 6px 0 6px 14px;
}
.intro-cue-author .author-star {
  color: var(--lira-purple);
}
.power-anchor {
  display: inline-block;
  width: 13px;
  height: 13px;
  vertical-align: -2px;
  background-color: var(--text-sec);
  /* the power-mark color — change this one value: grey #555, or near-black #1A1D23 */
  -webkit-mask: url("/static/img/anchor.svg") center / contain no-repeat;
  mask: url("/static/img/anchor.svg") center / contain no-repeat;
}