/* ==========================================================================
   Koch School LMS — v2: WordPress glue on top of the prototype stylesheets.
   Only bridges between WP/cabinet.js conventions and prototype classes live
   here. Visual rules belong to tokens/base/components/shell/stage*.css.
   ========================================================================== */

/* header.php / footer.php wrap everything in <main class="site-main"> — make it transparent. */
body.koch-v2 .site-main { display: contents; }
body.koch-v2 { margin: 0; }

/* WordPress adds the body class `page` on singular pages. The prototype uses
   `.page` for the content column (max-width 1200px), so the whole window was
   capped and sat on the left half of a wide screen. */
body.page {
  max-width: none;
  width: auto;
  margin: 0;
  padding: 0;
}

/* cabinet.js toggles modals/panels with the `hidden` attribute (not .is-open). */
.modal-backdrop.koch-modal:not([hidden]) { opacity: 1; pointer-events: auto; transition-duration: var(--dur-in); }
.modal-backdrop.koch-modal:not([hidden]) .modal { transform: none; opacity: 1; transition-duration: var(--dur-in); }

/*
 * MasterStudy/Bootstrap also own `.modal`: position fixed at the top-left,
 * height 100%, and dark button text. That pins our dialogs to the left edge
 * and paints black labels on the black primary button.
 */
body.koch-v2 .modal-backdrop {
  position: fixed !important;
  inset: 0 !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  z-index: 80;
}
body.koch-v2 .modal-backdrop > .modal {
  position: relative !important;
  inset: auto !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  width: min(560px, calc(100vw - 32px)) !important;
  height: auto !important;
  max-height: calc(100vh - 48px) !important;
  margin: 0 !important;
  overflow: auto;
}
body.koch-v2 .modal-backdrop > .modal.modal--sm {
  width: min(440px, calc(100vw - 32px)) !important;
}
body.koch-v2 .modal-backdrop .btn.btn--primary,
body.koch-v2 .btn.btn--primary {
  background: var(--fg) !important;
  border-color: var(--fg) !important;
  color: var(--inverse-fg) !important;
}
body.koch-v2 .modal-backdrop .btn.btn--danger-solid {
  background: var(--error) !important;
  border-color: var(--error) !important;
  color: var(--inverse-fg) !important;
}
.notif-panel[data-koch-bell-dropdown]:not([hidden]) { opacity: 1; transform: none; pointer-events: auto; transition-duration: var(--dur-in); }

.link-desk { display: grid; gap: 16px; margin: 8px 0 28px; min-width: 0; }
.link-desk__grid { display: grid; grid-template-columns: 1fr; gap: 12px; }
.link-card { display: grid; gap: 12px; padding: var(--s-5); min-width: 0; overflow: visible; }
.link-card--b2c { grid-column: auto; }
.link-card__title { font-weight: 700; font-size: 18px; letter-spacing: -0.03em; }
.link-card__hint, .link-card .hint { margin: 0; color: var(--fg-2); font-size: var(--text-sm); overflow-wrap: anywhere; }
.link-card__row { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; }
.link-card__row .field { width: 120px; }
.link-card__foot { display: flex; align-items: center; gap: 12px; }
.seg { display: flex; flex-wrap: wrap; gap: 4px; padding: 4px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); }
.seg__opt { position: relative; flex: 1 1 140px; min-width: 0; }
.seg__opt input { position: absolute; opacity: 0; pointer-events: none; }
.seg__opt span { display: grid; place-items: center; min-height: 36px; padding: 6px 10px; border-radius: 8px; font-size: var(--text-sm); font-weight: 650; color: var(--fg-2); text-align: center; line-height: 1.2; }
.seg__opt input:checked + span { background: var(--fg); color: var(--inverse-fg); }
.link-card .copy-field { width: 100%; min-width: 0; }
.link-roster { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.link-roster__title { font-weight: 750; margin-bottom: 8px; }
.link-roster__list { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.inspector .link-roster, .split__right .link-roster { grid-template-columns: 1fr 1fr; }
@media (max-width: 900px) { .link-roster { grid-template-columns: 1fr 1fr; } }

/* Inline error text inside modals (data-koch-modal-error, data-koch-*-error). */
.form-error { color: var(--error); font-size: var(--text-sm); }
.form-error:empty { display: none; }

/* WordPress-generated content (knowledge articles, lesson HTML) renders as prose. */
.prose img { border-radius: var(--r-card); }
.prose iframe { max-width: 100%; border-radius: var(--r-card); }
.prose table { font-size: var(--text-sm); }
.prose table th, .prose table td { padding: 8px 10px; border-bottom: 1px solid var(--border); text-align: left; }

/* Legacy helpers still used by a few data-driven lists. */
.is-hidden { display: none !important; }