/* Ticket RF7: the Learn questions editor (design/brand/proposed/learn/manager-web.html, approved 13 Oct 2026).
   Every rule is scoped to .learn-editor, the page's root, because this file loads on every page. Tokens only.
   The header is the Standards page's own (sops/_head); what is here is the design's mint header panel, the
   lesson material, the question cards and the mint save bar. Narrow windows fall to one column by
   auto-fit against a phone's width, so there are no breakpoints. */

/* Header: the standards header on the design's mint panel. Muted text fails contrast on mint, so it is navy. */
.learn-editor .standards-head { background: var(--g-color-mint); padding: var(--g-space-24); border-radius: var(--g-radius-hero); margin-bottom: 0; }
.learn-editor .standards-head .helper,
.learn-editor .standards-head .eyebrow { color: var(--g-color-navy); }
.learn-editor .standards-head__pose { width: auto; height: var(--g-space-48); }

/* Labels and inputs as the design draws them: bold small labels, ivory inputs with a muted bottom edge. */
.learn-editor label { display: block; font-size: var(--g-font-size-small); font-weight: 700; margin-bottom: var(--g-space-8); }
.learn-editor input[type=text], .learn-editor select { width: 100%; min-height: var(--g-size-touch); padding: var(--g-space-12); background: var(--g-color-ivory); border: 0; border-bottom: var(--g-space-4) solid var(--g-color-muted); border-radius: var(--g-radius-input); }
.learn-editor input[type=text][aria-invalid=true] { border-bottom-color: var(--g-color-error); }

/* Lesson material: the standard's instruction and steps beside the service Pakcu on mint. */
.learn-editor .learn-material { margin-top: var(--g-space-24); background: var(--g-color-white); border-radius: var(--g-radius-card); padding: var(--g-space-24); border-bottom: var(--g-space-4) solid var(--g-color-line); }
.learn-editor .learn-material h2 { margin: 0; }
.learn-editor .learn-material__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--g-size-phone)), 1fr)); gap: var(--g-space-24); margin-top: var(--g-space-16); }
.learn-editor .learn-material__text { min-width: 0; overflow-wrap: anywhere; }
.learn-editor .learn-material__text p { margin: 0 0 var(--g-space-12); }
.learn-editor .learn-material__text ol { margin: 0; padding-left: var(--g-space-24); }
.learn-editor .learn-material__text li + li { margin-top: var(--g-space-8); }
.learn-editor .learn-material__media { align-self: start; display: flex; align-items: center; gap: var(--g-space-16); padding: var(--g-space-16); background: var(--g-color-mint); border-radius: var(--g-radius-card); }
.learn-editor .learn-material__pose { width: 20%; height: auto; }
.learn-editor .learn-material__note { margin: 0; font-size: var(--g-font-size-small); }

/* Questions heading with Add question pushed right. */
.learn-editor .learn-section-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--g-space-24); margin: var(--g-space-32) 0 var(--g-space-16); }
.learn-editor .learn-section-head h2 { margin: 0; }
.learn-editor .learn-section-head .helper { color: var(--g-color-navy); }
.learn-editor .learn-section-head .btn,
.learn-editor .learn-q__tools .btn { background: var(--g-color-mint); color: var(--g-color-navy); box-shadow: none; text-decoration: none; }
.learn-editor .learn-section-head .btn:disabled,
.learn-editor .learn-q__tools .btn:disabled { background: var(--g-color-line); cursor: default; }
.learn-editor .learn-empty { margin: 0 0 var(--g-space-16); }

/* One question card. A card holding an error gets the error colour on its bottom edge. */
.learn-editor .learn-q { background: var(--g-color-white); border-radius: var(--g-radius-card); padding: var(--g-space-24); margin-bottom: var(--g-space-16); border-bottom: var(--g-space-4) solid var(--g-color-line); }
.learn-editor .learn-q--invalid { border-bottom-color: var(--g-color-error); }
.learn-editor .learn-q__top { display: flex; align-items: center; justify-content: space-between; gap: var(--g-space-16); margin-bottom: var(--g-space-16); }
.learn-editor .learn-q__top h3 { margin: 0; }
.learn-editor .learn-q__tools { display: flex; gap: var(--g-space-8); }
.learn-editor .learn-q__move { width: var(--g-size-touch); padding: 0; }
.learn-editor .learn-q__answers { margin: var(--g-space-16) 0 0; }
.learn-editor .learn-q__answers legend { margin-bottom: var(--g-space-12); }
.learn-editor .learn-answers { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, calc(var(--g-size-phone) / 2)), 1fr)); gap: var(--g-space-16); }
.learn-editor .learn-answer { min-width: 0; }
.learn-editor label.learn-correct { display: flex; align-items: center; gap: var(--g-space-8); min-height: var(--g-size-touch); margin: var(--g-space-8) 0 0; font-weight: 400; }
.learn-editor .learn-answer__remove,
.learn-editor .learn-q__add-answer { font-size: var(--g-font-size-small); }
.learn-editor .learn-q__add-answer { margin-top: var(--g-space-12); }

/* Errors: on the error surface, in the error colour, under the field or group they belong to. */
.learn-editor .learn-error { background: var(--g-color-error-surface); color: var(--g-color-error); padding: var(--g-space-12); border-radius: var(--g-radius-input); margin: var(--g-space-12) 0 0; font-size: var(--g-font-size-small); }

/* Save bar: pass mark on the left, Save on the right, on mint. */
.learn-editor .learn-savebar { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--g-space-24); background: var(--g-color-mint); border-radius: var(--g-radius-card); padding: var(--g-space-24); }
.learn-editor .learn-savebar select { width: auto; min-width: var(--g-space-48); background: var(--g-color-white); }
.learn-editor .learn-savebar__help { margin: var(--g-space-8) 0 0; font-size: var(--g-font-size-small); }
.learn-editor .learn-savebar__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--g-space-12); }
.learn-editor .learn-savebar .btn--primary { padding: var(--g-space-12) var(--g-space-32); font-weight: 700; }
.learn-editor .learn-remove-all { margin-top: var(--g-space-24); }
.learn-editor .learn-remove-all form { margin: 0; }