/* ============================================================================
   CourseForge – component styles.
   ========================================================================== */

/* -- buttons --------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 7px 13px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface-2);
  color: var(--text);
  font-size: var(--t-sm);
  font-weight: 530;
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--speed) var(--ease), border-color var(--speed) var(--ease),
              color var(--speed) var(--ease), transform var(--speed) var(--ease);
}
.btn:hover:not(:disabled) { background: var(--surface-hover); border-color: var(--border-strong); }
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }

.btn--primary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
  font-weight: 600;
}
.btn--primary:hover:not(:disabled) { background: var(--accent-hover); border-color: var(--accent-hover); }

.btn--success {
  background: var(--success);
  border-color: var(--success);
  color: var(--success-ink);
  font-weight: 600;
}
.btn--success:hover:not(:disabled) { filter: brightness(1.07); }

.btn--danger { border-color: var(--danger-line); color: var(--danger); background: var(--danger-soft); }
.btn--danger:hover:not(:disabled) { background: var(--danger-soft); border-color: var(--danger); color: var(--danger-hover); }

.btn--ghost { background: transparent; border-color: transparent; color: var(--text-muted); }
.btn--ghost:hover:not(:disabled) { background: var(--surface-hover); color: var(--text); border-color: transparent; }

.btn--sm { padding: 4px 9px; font-size: var(--t-xs); gap: 5px; }
.btn--icon { padding: 6px; }
.btn--icon.btn--sm { padding: 4px; }
.btn--block { width: 100%; }
.btn--pill { border-radius: var(--r-pill); }

.btn-group { display: inline-flex; border: 1px solid var(--border); border-radius: var(--r-md); overflow: hidden; }
.btn-group > button {
  padding: 5px 11px;
  border: 0;
  border-left: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text-muted);
  font-size: var(--t-xs);
  font-weight: 530;
  cursor: pointer;
  transition: background var(--speed) var(--ease), color var(--speed) var(--ease);
}
.btn-group > button:first-child { border-left: 0; }
.btn-group > button:hover { background: var(--surface-hover); color: var(--text); }
.btn-group > button.is-active { background: var(--accent); color: var(--accent-ink); }

/* -- cards ----------------------------------------------------------------- */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
}
.card--flat { background: var(--surface-2); }
.card--pad { padding: var(--s-5); }
.card__head {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-4) var(--s-5);
  border-bottom: 1px solid var(--border-soft);
}
.card__title { font-size: var(--t-md); font-weight: 600; }
.card__body { padding: var(--s-5); }
.card__foot { padding: var(--s-4) var(--s-5); border-top: 1px solid var(--border-soft); }

.card--action {
  cursor: pointer;
  text-align: left;
  width: 100%;
  transition: border-color var(--speed) var(--ease), background var(--speed) var(--ease), transform var(--speed) var(--ease);
}
.card--action:hover { border-color: var(--accent-line); background: var(--surface-2); }

/* -- section header inside panes ------------------------------------------- */
.section {
  border-bottom: 1px solid var(--border-soft);
}
.section:last-child { border-bottom: 0; }
.section__head {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  width: 100%;
  padding: var(--s-3) var(--s-4);
  border: 0;
  background: transparent;
  color: var(--text);
  cursor: pointer;
  text-align: left;
}
.section__head:hover { background: var(--surface-hover); }
.section__body { padding: 0 var(--s-4) var(--s-4); }
.section__chevron { color: var(--text-faint); transition: transform var(--speed) var(--ease); }
.section.is-open .section__chevron { transform: rotate(90deg); }

/* -- form field groups ----------------------------------------------------- */
.form-row { display: flex; flex-direction: column; gap: 5px; }
.form-row > label,
.label {
  font-size: var(--t-xs);
  font-weight: 560;
  color: var(--text-muted);
}
.hint { font-size: var(--t-xs); color: var(--text-dim); line-height: 1.5; }
.check { display: flex; align-items: flex-start; gap: var(--s-2); font-size: var(--t-sm); cursor: pointer; }
.check input { margin-top: 2px; }

/* -- badges and chips ------------------------------------------------------ */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 8px;
  border-radius: var(--r-pill);
  background: var(--neutral-soft);
  color: var(--text-muted);
  font-size: var(--t-2xs);
  font-weight: 600;
  letter-spacing: 0.01em;
  white-space: nowrap;
}
.badge--accent  { background: var(--accent-soft);  color: var(--accent); }
.badge--success { background: var(--success-soft); color: var(--success); }
.badge--warning { background: var(--warning-soft); color: var(--warning); }
.badge--danger  { background: var(--danger-soft);  color: var(--danger); }
.badge--magic   { background: var(--magic-soft);   color: var(--magic); }
.badge--outline { background: transparent; border: 1px dashed var(--border-strong); color: var(--text-dim); }

.chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  max-width: 100%;
  padding: 3px 5px 3px 9px;
  border-radius: var(--r-pill);
  background: var(--accent-soft);
  color: var(--accent);
  font-size: var(--t-xs);
  line-height: 1.35;
}
.chip--magic { background: var(--magic-soft); color: var(--magic); }
.chip--off { background: var(--neutral-soft); color: var(--text-faint); text-decoration: line-through; }
.chip--inherited { background: transparent; border: 1px dashed var(--border-strong); color: var(--text-dim); padding-right: 9px; }
.chip__value { opacity: 0.72; }
.chip__btn {
  display: grid;
  place-items: center;
  padding: 2px;
  border: 0;
  border-radius: var(--r-pill);
  background: transparent;
  color: inherit;
  opacity: 0.6;
  cursor: pointer;
  transition: opacity var(--speed) var(--ease), background var(--speed) var(--ease);
}
.chip__btn:hover { opacity: 1; background: rgb(255 255 255 / 12%); }
.chip__btn:disabled { opacity: 0.3; cursor: not-allowed; }
.chip__btn--danger:hover { color: var(--danger); }

/* -- status dot ------------------------------------------------------------ */
.dot {
  width: 8px;
  height: 8px;
  flex: none;
  border-radius: var(--r-pill);
  background: var(--text-faint);
}
.dot--pending    { background: var(--border-strong); }
.dot--generating { background: var(--warning); animation: cf-pulse 1.1s ease-in-out infinite; }
.dot--generated  { background: var(--accent); }
.dot--dirty      { background: var(--warning); }
.dot--pushed     { background: var(--success); }
.dot--error      { background: var(--danger); }

/* -- progress -------------------------------------------------------------- */
.bar {
  height: 5px;
  width: 100%;
  overflow: hidden;
  border-radius: var(--r-pill);
  background: var(--surface-3);
}
.bar__fill {
  height: 100%;
  border-radius: var(--r-pill);
  background: var(--accent);
  transition: width 220ms var(--ease);
}
.bar__fill--success { background: var(--success); }

/* -- tri-state toggle ------------------------------------------------------ */
.tri {
  display: inline-grid;
  grid-template-columns: repeat(3, 1fr);
  flex: none;
  width: 124px;
  padding: 2px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface-2);
}
.tri__opt {
  padding: 3px 4px;
  border: 0;
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--text-dim);
  font-size: var(--t-2xs);
  font-weight: 620;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: background var(--speed) var(--ease), color var(--speed) var(--ease);
}
.tri__opt:hover:not(:disabled) { color: var(--text); }
.tri__opt:disabled { cursor: not-allowed; opacity: 0.5; }
.tri__opt.is-on  { background: var(--success); color: var(--success-ink); }
.tri__opt.is-off { background: var(--danger); color: var(--danger-ink); }
.tri__opt.is-inherit { background: var(--surface-hover); color: var(--text); }

/* -- detail rows ----------------------------------------------------------- */
.detail-row {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: 9px var(--s-3);
  border-radius: var(--r-md);
  transition: background var(--speed) var(--ease);
}
.detail-row:hover { background: var(--surface-2); }
.detail-row__icon {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  flex: none;
  border-radius: var(--r-sm);
  background: var(--surface-3);
  color: var(--text-dim);
}
.detail-row.is-on .detail-row__icon { background: var(--success-soft); color: var(--success); }
.detail-row.is-off .detail-row__icon { background: var(--neutral-soft); color: var(--text-faint); }
.detail-row__text { min-width: 0; flex: 1 1 auto; }
.detail-row__label { font-size: var(--t-sm); font-weight: 520; line-height: 1.3; }
.detail-row__note { font-size: var(--t-2xs); color: var(--text-dim); line-height: 1.4; }

.param-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 156px;
  align-items: center;
  gap: var(--s-3);
  padding: 8px var(--s-3);
  border-radius: var(--r-md);
}
.param-row:hover { background: var(--surface-2); }
.param-input { position: relative; display: flex; align-items: center; gap: 4px; }
.param-input input { min-width: 0; text-align: right; padding-inline: 6px; }
.param-input__unit { font-size: var(--t-2xs); color: var(--text-faint); width: 42px; flex: none; }

/* -- outline tree ---------------------------------------------------------- */
.tree { padding: var(--s-2); }
.tree__chapter { margin-bottom: var(--s-2); }
.tree__chapter-head {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  padding: 5px 7px;
  border: 0;
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  text-align: left;
}
.tree__chapter-head:hover { background: var(--surface-hover); color: var(--text); }
.tree__chapter-head.is-active { background: var(--accent-soft); color: var(--accent); }
.tree__chapter-title {
  font-size: var(--t-2xs);
  font-weight: 680;
  letter-spacing: 0.055em;
  text-transform: uppercase;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tree__page {
  display: flex;
  align-items: center;
  gap: 7px;
  width: 100%;
  padding: 5px 8px 5px 10px;
  border: 0;
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--text-muted);
  font-size: var(--t-sm);
  cursor: pointer;
  text-align: left;
}
.tree__page:hover { background: var(--surface-hover); color: var(--text); }
.tree__page.is-active { background: var(--accent-soft); color: var(--accent); font-weight: 550; }
.tree__page-idx { font-size: var(--t-2xs); color: var(--text-faint); width: 18px; flex: none; text-align: right; font-variant-numeric: tabular-nums; }

/* -- tables ---------------------------------------------------------------- */
.table { width: 100%; border-collapse: collapse; font-size: var(--t-sm); }
.table th {
  padding: 9px var(--s-4);
  text-align: left;
  font-size: var(--t-2xs);
  font-weight: 650;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text-dim);
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.table td { padding: 8px var(--s-4); border-bottom: 1px solid var(--border-soft); vertical-align: middle; }
.table tbody tr:last-child td { border-bottom: 0; }
.table tbody tr:hover { background: var(--surface-2); }
.table__num { text-align: right; font-variant-numeric: tabular-nums; }

/* -- popover / combo box --------------------------------------------------- */
.popover {
  position: absolute;
  z-index: var(--z-popover);
  top: calc(100% + 4px);
  left: 0;
  width: 100%;
  max-height: 260px;
  overflow-y: auto;
  padding: 4px;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-lg);
  animation: cf-rise 110ms var(--ease);
}
.popover__item {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  width: 100%;
  padding: 6px 9px;
  border: 0;
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--text-muted);
  font-size: var(--t-sm);
  cursor: pointer;
  text-align: left;
}
.popover__item:hover, .popover__item.is-active { background: var(--accent-soft); color: var(--accent); }
.popover__empty { padding: var(--s-3); font-size: var(--t-xs); color: var(--text-faint); text-align: center; }

/* -- modal ----------------------------------------------------------------- */
.modal-scrim {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: grid;
  place-items: center;
  padding: var(--s-4);
  background: var(--overlay);
  backdrop-filter: blur(3px);
  animation: cf-fade 120ms var(--ease);
}
.modal {
  width: 100%;
  max-width: 440px;
  max-height: 90vh;
  overflow-y: auto;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-lg);
  animation: cf-rise 140ms var(--ease);
}
.modal--wide { max-width: 720px; }
.modal__head { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-5) var(--s-5) 0; }
.modal__body { padding: var(--s-4) var(--s-5); }
.modal__foot { display: flex; justify-content: flex-end; gap: var(--s-2); padding: 0 var(--s-5) var(--s-5); }

/* -- toasts ---------------------------------------------------------------- */
.toasts {
  position: fixed;
  right: var(--s-5);
  bottom: var(--s-5);
  z-index: var(--z-toast);
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  width: min(380px, calc(100vw - var(--s-8)));
  pointer-events: none;
}
.toast {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: var(--shadow-lg);
  font-size: var(--t-sm);
  pointer-events: auto;
  animation: cf-rise 160ms var(--ease);
}
.toast--success { border-color: var(--success-line); }
.toast--error   { border-color: var(--danger-line); }
.toast--info    { border-color: var(--accent-line); }
.toast__icon { flex: none; margin-top: 1px; }
.toast--success .toast__icon { color: var(--success); }
.toast--error   .toast__icon { color: var(--danger); }
.toast--info    .toast__icon { color: var(--accent); }
.toast__text { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }

/* -- misc ------------------------------------------------------------------ */
.empty {
  display: grid;
  place-items: center;
  gap: var(--s-3);
  padding: var(--s-12) var(--s-6);
  text-align: center;
  color: var(--text-dim);
}
.empty__icon {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: var(--r-lg);
  background: var(--surface-2);
  color: var(--text-faint);
}
.empty__title { font-size: var(--t-md); font-weight: 600; color: var(--text-muted); }

.stat {
  padding: var(--s-3);
  border-radius: var(--r-md);
  background: var(--surface-2);
  text-align: center;
}
.stat__value { font-size: var(--t-xl); font-weight: 650; font-variant-numeric: tabular-nums; line-height: 1.2; }
.stat__label { font-size: var(--t-2xs); color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.06em; }

.log {
  max-height: 460px;
  overflow-y: auto;
  padding: var(--s-3) var(--s-4);
  border-radius: var(--r-md);
  background: var(--bg);
  border: 1px solid var(--border-soft);
  font-family: var(--mono);
  font-size: var(--t-xs);
  line-height: 1.8;
  color: var(--text-muted);
}
.log__line { overflow-wrap: anywhere; }
.log__line--new { color: var(--success); }
.log__line--warn { color: var(--warning); }

.kbd {
  padding: 1px 5px;
  border: 1px solid var(--border-strong);
  border-bottom-width: 2px;
  border-radius: var(--r-xs);
  background: var(--surface-2);
  font-family: var(--mono);
  font-size: var(--t-2xs);
  color: var(--text-muted);
}

.divider { height: 1px; background: var(--border-soft); }

.spin { animation: cf-spin 0.8s linear infinite; }

.placeholder-token {
  padding: 1px 6px;
  border: 1px solid var(--accent-line);
  border-radius: var(--r-sm);
  background: var(--accent-soft);
  color: var(--accent);
  font-family: var(--mono);
  font-size: var(--t-2xs);
  cursor: pointer;
}
.placeholder-token:hover { background: var(--accent-line); }