/*
 * A-28 / D-23 training editor (shared by the Admin console and the Director's Site training):
 * numbered sections (type tag, title, the kind's fields, "Must watch to the end" / "Ask for a
 * certificate upload" switches, drag handle, "…" menu), the dashed Add section bar, and beside them
 * the Settings and Finish cards, the notices and Save Draft / Publish & Assign. Also the read-only
 * sections of the Content tab (A-30 / D-25). Classes are prefixed tcms- (training CMS) because every
 * page stylesheet loads everywhere.
 */
@layer pages {
  /* The editor's wrapper only scopes its Stimulus controller. */
  .tcms-page { display: contents; }

  .tcms-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }

  .tcms-editor {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 380px;
    gap: 24px;
    align-items: start;
  }
  .tcms-editor[aria-busy="true"],
  .tcms-page[aria-busy="true"] .tcms-editor { cursor: progress; }

  .tcms-editor__content {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
  }

  .tcms-editor__side {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
  }

  .tcms-editor__form { display: contents; }

  .tcms-editor__actions {
    display: flex;
    align-items: flex-start;
    gap: 10px;
  }
  .tcms-editor__publish { flex: 1; }

  .tcms-errors {
    margin: 2px 0 0;
    padding-left: 18px;
    list-style: disc;
  }

  .tcms-problems:not(:has(*)) { display: none; }

  /* Sections ---------------------------------------------------------------------------------- */
  .tcms-sections {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  .tcms-sections__empty {
    padding: 16px 18px;
    color: var(--color-neutral-700);
    font-size: 14px;
  }
  .tcms-sections:has(.tcms-section-frame) .tcms-sections__empty { display: none; }

  .tcms-section-frame { display: block; }

  .tcms-section {
    display: flex;
    gap: 12px;
    margin: 0;
    padding: 16px 18px;
    border-radius: 24px;
    background: var(--color-bg);
    transition: box-shadow 120ms ease;
  }
  .tcms-section:focus-within,
  .tcms-section.is-dirty,
  .tcms-section--new { box-shadow: 0 0 0 2px var(--color-blue); }
  .tcms-section--read { background: var(--color-surface); }
  .tcms-section--read:focus-within { box-shadow: none; }

  .tcms-section__rail {
    display: flex;
    flex: none;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    min-width: 16px;
    padding-top: 4px;
    color: var(--color-neutral-600);
  }

  .tcms-section__number {
    color: var(--color-neutral-800);
    font: 700 12px var(--font-mono);
    line-height: 1.5;
  }

  .tcms-section__grip {
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    margin: -5px;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: none;
    color: inherit;
    font-size: 16px;
  }
  .tcms-section__grip:hover { background: var(--color-btn-hover); color: var(--color-text); }
  /* Keyboard focus on the handle selects its section (the ring is on the section). */
  .tcms-section__grip:focus-visible { outline: none; color: var(--color-text); }
  .tcms-section__grip:disabled { opacity: 0.5; cursor: not-allowed; }

  .tcms-section__plus { display: flex; font-size: 16px; color: var(--color-blue); }
  .tcms-section .input-wrap__icon { color: var(--color-text); font-size: 17px; }

  .tcms-section__main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  .tcms-section__head {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 34px;
  }

  .tcms-kind {
    display: inline-flex;
    flex: none;
    align-items: center;
    gap: 6px;
    height: 28px;
    padding: 0 11px;
    border-radius: var(--radius-pill);
    background: var(--color-surface);
    color: var(--color-neutral-900);
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
  }
  .tcms-kind .icon { font-size: 14px; }
  .tcms-kind--video { background: var(--petal-policy-bg); color: var(--petal-policy-fg); }
  .tcms-kind--file { background: var(--petal-lic-bg); color: var(--petal-lic-fg); }
  .tcms-kind--link { background: var(--petal-ops-bg); color: var(--petal-ops-fg); }
  .tcms-section--read .tcms-kind--text { background: var(--color-bg); }

  /* The title reads as bold text and edits in place. */
  .tcms-section__title-field { flex: 1; min-width: 0; }
  .tcms-section__title {
    display: block;
    width: 100%;
    height: 34px;
    padding: 0 8px;
    margin-left: -8px;
    border: 1.5px solid transparent;
    border-radius: 12px;
    background: transparent;
    color: var(--color-text);
    font-size: 15px;
    font-weight: 700;
    text-overflow: ellipsis;
  }
  .tcms-section__title::placeholder { color: var(--color-neutral-700); font-weight: 600; opacity: 1; }
  .tcms-section__title:hover { border-color: var(--color-input-border); }
  .tcms-section__title:focus { outline: none; border-color: var(--color-blue); }
  .tcms-section__title[aria-invalid="true"] { border: 2px solid var(--color-err); }
  .tcms-section__title:disabled { color: var(--color-text); -webkit-text-fill-color: var(--color-text); opacity: 1; }

  .tcms-section__heading {
    min-width: 0;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0;
    line-height: 1.4;
    overflow-wrap: anywhere;
  }

  .tcms-section__menu { margin-left: auto; flex: none; }
  .tcms-section__more {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: none;
    color: var(--color-neutral-700);
    font-size: 16px;
  }
  .tcms-section__more:hover,
  .tcms-section__more[aria-expanded="true"] { background: var(--color-surface); color: var(--color-text); }

  .tcms-section__delete { display: none; }

  /* Text boxes grow with their text; no resize grip. */
  .tcms-section__text.input,
  .tcms-section__note.input,
  .tcms-finish__statement.input {
    line-height: 1.55;
    resize: none;
    field-sizing: content;
  }
  .tcms-section__text.input { min-height: 72px; }
  .tcms-section__note.input { min-height: 64px; }
  .tcms-finish__statement.input { min-height: 96px; }

  /* File tile: icon, name, "Video · 8:42 · 212 MB", Replace. */
  .tcms-upload { gap: 10px; }

  .tcms-file {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 14px;
    border-radius: 20px;
    background: var(--color-surface);
  }
  .tcms-section--read .tcms-file { background: var(--color-bg); }

  .tcms-file__icon {
    width: 42px;
    height: 42px;
    flex: none;
    display: grid;
    place-items: center;
    border-radius: 14px;
    background: var(--petal-lic-bg);
    color: var(--petal-lic-fg);
    font-size: 20px;
  }
  .tcms-file--video .tcms-file__icon { background: var(--petal-policy-bg); color: var(--petal-policy-fg); }

  .tcms-file__main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
  }
  .tcms-file__name {
    color: var(--color-text);
    font-size: 14px;
    font-weight: 700;
    overflow-wrap: anywhere;
  }
  a.tcms-file__name:hover { color: var(--color-text); text-decoration: underline; }
  .tcms-file__meta { color: var(--color-neutral-700); font-size: 12.5px; }
  .tcms-file__actions { display: flex; flex: none; gap: 4px; }

  /* Switch rows: "Must watch to the end", "Ask for a certificate upload", "Require signature at the end". */
  .tcms-toggle {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    cursor: pointer;
  }
  .tcms-toggle__text {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 3px;
  }
  .tcms-toggle__title { font-size: 14px; font-weight: 700; }
  .tcms-toggle__hint { color: var(--color-neutral-700); font-size: 12.5px; line-height: 1.45; }

  .tcms-switch.switch { width: 46px; height: 28px; }
  .tcms-switch .switch__knob { width: 22px; height: 22px; }
  .tcms-switch.switch:has(input:checked) { background: var(--color-accent-2-600); }

  .tcms-section__foot {
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .tcms-section__foot[hidden] { display: none; }
  .tcms-section__foot .btn--sm { height: 36px; }
  .tcms-section__unsaved {
    margin-right: auto;
    color: var(--color-neutral-700);
    font-size: 12.5px;
    font-weight: 700;
  }

  /* Read-only sections (Content tab) */
  .tcms-section__body {
    color: var(--color-neutral-800);
    font-size: 14.5px;
    line-height: 1.55;
  }
  .tcms-section__body p + p { margin-top: 8px; }
  .tcms-section__url {
    display: block;
    width: fit-content;
    color: var(--color-blue-deep); /* AA on the surface cards */
    font-size: 13.5px;
    font-weight: 600;
    overflow-wrap: anywhere;
  }
  .tcms-section__flag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--color-accent-2-800);
    font-size: 12.5px;
    font-weight: 700;
  }
  .tcms-section__missing { color: var(--color-err-text); font-size: 13px; font-weight: 700; }

  /* Add section bar --------------------------------------------------------------------------- */
  .tcms-add {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  #tcms-new-section:empty { display: none; }

  .tcms-addbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 14px 18px;
    border: 2px dashed var(--color-neutral-400);
    border-radius: 24px;
  }
  .tcms-addbar__label {
    margin-right: 6px;
    font-size: 13.5px;
    font-weight: 700;
  }

  /* Side cards -------------------------------------------------------------------------------- */
  /* A value that cannot be changed here: the owning Site, the assigned version. */
  .tcms-locked {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 48px;
    padding: 0 18px;
    border: 1.5px solid var(--color-divider);
    border-radius: var(--radius-pill);
    font-size: 14.5px;
  }
  .tcms-locked > .icon { flex: none; font-size: 17px; }
  .tcms-locked__value { flex: 1; min-width: 0; }
  .tcms-locked > .tcms-locked__lock { color: var(--color-neutral-700); font-size: 15px; }

  /* Create training: what comes after the settings */
  .tcms-start {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 18px;
    border: 2px dashed var(--color-neutral-400);
    border-radius: 24px;
    color: var(--color-neutral-800);
    font-size: 14px;
    line-height: 1.5;
  }
  .tcms-start__icon {
    width: 44px;
    height: 44px;
    flex: none;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--petal-ops-bg);
    color: var(--petal-ops-fg);
    font-size: 19px;
  }
  .tcms-start__text { display: flex; flex-direction: column; gap: 2px; }
  .tcms-start__title { color: var(--color-text); font-size: 15px; font-weight: 700; }

  /* Content tab (read-only) ------------------------------------------------------------------- */
  .tcms-content {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 380px;
    gap: 24px;
    align-items: start;
  }
  .tcms-content__main,
  .tcms-content__side {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
  }
  .tcms-content__main .section-head__title { font-size: 20px; }
  .tcms-content .card .statement { background: var(--color-bg); }

  .tcms-version-row .chip { margin-left: auto; }
  .tcms-version-row.is-current .rows__title { color: var(--color-blue-deep); } /* AA in the surface card */

  /* Phone action sheet (Save Draft + Publish & Assign, Cancel + Create Training). */
  .tcms-sheet {
    display: flex;
    gap: 10px;
  }
  .tcms-sheet .btn { flex: none; }
  .tcms-sheet .tcms-sheet__primary { flex: 1; min-width: 0; }

  /* Laptop 1024–1199: a 320px side column leaves the sections more room. */
  @media (max-width: 1199px) {
    .tcms-editor,
    .tcms-content { grid-template-columns: minmax(0, 1fr) 320px; }
  }

  @media (max-width: 1023px) {
    .tcms-editor,
    .tcms-content { grid-template-columns: minmax(0, 1fr); }
    /* One column: Settings, Finish and the notices come before the sections; Save Draft and
       Publish & Assign after them. */
    .tcms-editor > .tcms-editor__side { display: contents; }
    .tcms-editor > .tcms-editor__side > *,
    .tcms-editor__form > .card { order: -1; }
    .tcms-editor > .tcms-editor__side > .tcms-editor__actions { order: 1; }
  }

  @media (max-width: 767px) {
    .tcms-section { padding: 14px; }
    .tcms-section__head { flex-wrap: wrap; }
    .tcms-section__title-field { flex-basis: 100%; order: 3; }
    .tcms-section__title { height: 44px; }
    /* 44px hit targets for the drag handle and "…". */
    .tcms-section__grip { width: 44px; height: 44px; margin: -9px -13px; }
    .tcms-section__more { width: 44px; height: 44px; margin: -5px -8px -5px 0; }
    .tcms-file { flex-wrap: wrap; }
    .tcms-addbar { padding: 12px 14px; }
  }
}