/* =================================================================
   SENTENCE COMPOSER — the student writes their own sentences

   Three stages in one column: write, say it, translate it. The boxes
   size themselves from the formula's example words and grow with what
   is typed, so the row reads as a sentence rather than a form.
   ================================================================= */

.module-composer {
    display: flex;
    flex-direction: column;
    gap: 18px;
    max-width: 900px;
    margin: 0 auto;
    padding: 16px;
}

.sc-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
}

.sc-head h4 {
    margin: 0;
}

.sc-sub {
    color: var(--text-secondary);
    font-size: 0.86rem;
}

.sc-bar {
    flex: 1 1 160px;
    height: 8px;
    border-radius: 999px;
    background: var(--bg-tertiary);
    overflow: hidden;
}

.sc-bar span {
    display: block;
    height: 100%;
    background: var(--primary);
}

/* ONE SEGMENT PER FORMULA (v0.17.5.0). This was a row of buttons, one
   per formula, which filled half the screen above the work — Cebuano
   Lesson 1 has 46 of them. They stopped being a chooser when the student
   stopped choosing which formula to attempt, and 46 labels nobody can
   act on is not a navigation aid. */
.sc-formula-rail {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.sc-rail-count {
    color: var(--text-secondary);
    font-size: 0.84rem;
    font-weight: 600;
    white-space: nowrap;
}

.sc-rail-bar {
    display: flex;
    flex: 1 1 200px;
    flex-wrap: wrap;
    gap: 3px;
}

.sc-seg {
    flex: 1 1 8px;
    min-width: 8px;
    height: 8px;
    border-radius: 3px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
}

.sc-seg.done {
    background: var(--success, #16a34a);
    border-color: var(--success, #16a34a);
}

.sc-seg.active {
    background: var(--primary);
    border-color: var(--primary);
    box-shadow: 0 0 0 2px var(--primary-light);
}

.sc-stage {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 18px;
    border: 1px solid var(--border-color);
    border-radius: 14px;
    background: var(--bg-secondary);
}

/* THE FORMULA READS ABOVE THE LINE IT FILLS (v0.17.5.0): which formula
   this is and how many it wants, the formula itself at full size, then
   its hint, then the boxes. The quota used to sit BELOW the boxes, which
   is after the decision it was meant to inform. */
.sc-formula-head {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border-color);
}

.sc-formula-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: baseline;
    color: var(--text-secondary);
    font-size: 0.82rem;
    font-weight: 600;
}

.sc-formula-quota.sc-quota-done {
    color: var(--success, #16a34a);
}

.sc-formula-label {
    margin: 0;
    font-size: 1.32rem;
    font-weight: 700;
    line-height: 1.25;
}

.sc-formula-hint {
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.95rem;
}

.sc-formula-hint[hidden] {
    display: none;
}

/* The formula's meaning in the student's own language waits behind this
   pill (v0.25.72.0): the exercise is writing from the target-language
   frame, so the translation is offered, not shown. */
.sc-hint-pill {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 32px;
    padding: 4px 12px;
    border: 1px solid var(--as-line, var(--border-color));
    border-radius: 999px;
    background: var(--as-surface, var(--bg-primary));
    color: var(--as-ink2, var(--text-secondary));
    font-size: var(--as-fs-xs);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    cursor: pointer;
}

.sc-hint-pill:hover {
    border-color: var(--as-brand, var(--primary));
    color: var(--as-brand, var(--primary));
}

.sc-hint-pill:focus-visible {
    outline: 2px solid var(--as-brand, var(--primary));
    outline-offset: 2px;
}

.sc-hint-pill[aria-expanded="true"] {
    background: var(--as-brand-wash, var(--primary-light));
    border-color: var(--as-brand, var(--primary));
    color: var(--as-brand, var(--primary));
}

.sc-boxes {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

/* A BOX IS A DROP TARGET, NOT A TEXT FIELD (v0.17.5.0). The student
   drags a word card in, or taps the box and then the word. Typing into
   the boxes moved out with the drag bank moving in; the picker still
   reaches any word in the deck. */
.sc-slot {
    min-width: 7ch;
    min-height: 44px;
    padding: 9px 13px;
    border: 2px dashed var(--border-color);
    border-radius: 9px;
    background: var(--bg-primary);
    color: var(--text-primary);
    font-family: inherit;
    font-size: 1.02rem;
    font-weight: 600;
    cursor: pointer;
}

.sc-slot-filled {
    border-style: solid;
    border-color: var(--primary);
    background: var(--primary-light);
    color: var(--primary);
}

/* Where the next tapped word will land. */
.sc-slot-target {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-light);
}

.sc-slot-over {
    border-color: var(--primary);
    background: var(--primary-light);
}

.sc-slot:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

.sc-lit {
    font-size: 1.02rem;
    font-weight: 600;
}

.sc-line {
    min-height: 1.6em;
    padding: 10px 12px;
    border-radius: 9px;
    background: var(--bg-tertiary);
    font-size: 1.05rem;
}

.sc-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.sc-need {
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.86rem;
}

.sc-need-ok {
    color: var(--success, #16a34a);
}

.sc-bank {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-top: 14px;
    border-top: 1px solid var(--border-color);
}

.sc-bank-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.sc-eyebrow {
    color: var(--text-secondary);
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.sc-bank-group {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 8px;
}

.sc-bank-label {
    flex: 0 0 110px;
    color: var(--text-secondary);
    font-size: 0.8rem;
}

.sc-bank-words {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 6px;
}

/* EVERY TILE TAKES THE SAME FOOTPRINT, with or without artwork — the
   function-card rule this redesign settled on everywhere else. A row of
   mixed pill chips and picture cards stretched the chips into ovals the
   height of a card, which is neither shape on purpose. */
.sc-word {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    width: 92px;
    min-height: 92px;
    padding: 6px;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    background: var(--bg-primary);
    color: var(--text-primary);
    font-family: inherit;
    font-size: 0.92rem;
    cursor: grab;
}

.sc-word:hover {
    border-color: var(--primary);
}

.sc-word:active {
    cursor: grabbing;
}

.sc-word-dragging {
    opacity: 0.5;
}

/* A word whose card has artwork is drawn AS the card: the student has
   met this picture in Flashcards and in Sentence Flashcards, and a bank
   of pictures is a bank of things they recognise. A word with no card
   keeps the plain chip — there is nothing to draw. */
.sc-word-img {
    display: grid;

    /* Definite row: `max-height: 100%` inside a content-sized grid track
       is circular and resolves to none — see tests/e2e/media-frames.spec.js
       and the three components that shipped with that defect. */
    grid-template-rows: minmax(0, 1fr);
    grid-template-columns: minmax(0, 1fr);
    place-items: center;
    width: 78px;
    height: 78px;
    overflow: hidden;
    border-radius: 7px;
    background: var(--bg-tertiary);
}

.sc-word-img img,
.sc-word-img video {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
}

.sc-word-text {
    font-size: 0.82rem;
    font-weight: 600;
    text-align: center;
    overflow-wrap: anywhere;
}

/* Words the student reached for themselves, marked as theirs. */
.sc-bank-added .sc-word {
    border-style: dashed;
    border-color: var(--primary);
}

.sc-bank-note {
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.82rem;
}

.sc-prompt {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 600;
}

.sc-said {
    padding: 12px 14px;
    border-left: 3px solid var(--primary);
    border-radius: 0 9px 9px 0;
    background: var(--bg-tertiary);
    font-size: 1.1rem;
}

.sc-rec {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
}

.sc-playback {
    max-width: 320px;
}

.sc-english {
    font-size: 1.02rem;
}

.sc-written {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.sc-written-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    border: 1px solid var(--border-color);
    border-radius: 9px;
    background: var(--bg-secondary);
}

.sc-written-text {
    font-weight: 600;
}

.sc-written-en {
    flex: 1 1 auto;
    color: var(--text-secondary);
    font-size: 0.88rem;
}

.sc-dim {
    opacity: 0.4;
}

.sc-drop {
    border: none;
    background: none;
    color: var(--text-secondary);
    cursor: pointer;
}

.sc-warn {
    padding: 10px 14px;
    border: 1px solid var(--warning, #d97706);
    border-radius: 9px;
    color: var(--warning, #d97706);
    font-size: 0.88rem;
}

.sc-done,
.sc-empty,
.sc-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 40px 20px;
    color: var(--text-secondary);
    text-align: center;
}

.sc-done i {
    color: var(--success, #16a34a);
    font-size: 2.4rem;
}

.sc-picker {
    position: fixed;
    inset: 0;
    z-index: 10002;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgb(17 24 39 / 55%);
}

.sc-picker-inner {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: min(560px, 100%);
    max-height: 80vh;
    padding: 18px;
    border-radius: 14px;
    background: var(--bg-primary);
}

.sc-picker-head {
    display: flex;
    gap: 10px;
}

.sc-picker-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    overflow-y: auto;
}

.sc-picker-item {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 8px 11px;
    border: 1px solid var(--border-color);
    border-radius: 9px;
    background: var(--bg-secondary);
    color: var(--text-primary);
    text-align: left;
    cursor: pointer;
}

.sc-picker-item img,
.sc-picker-item video {
    width: 38px;
    height: 38px;
    border-radius: 6px;
    object-fit: contain;
}

.sc-picker-word {
    font-weight: 600;
}

.sc-picker-en {
    color: var(--text-secondary);
    font-size: 0.85rem;
}

.sc-picker-note {
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.82rem;
}

@media (width <= 600px) {
    .sc-bank-label {
        flex-basis: 100%;
    }

    .sc-submit {
        width: 100%;
    }
}

/* =================================================================
   BUILD SENTENCES IN THE ACTIVITY FRAME (v0.25.0.0)
   Frame colours and sizes; "Hand in" is a quiet button until there is
   something to hand in; the formula card is the one card on the page;
   the actions under the line are the frame's buttons (green is kept for
   a finished state, never a button). On a phone the head wraps to two
   lines and Hand in goes to the end of the row.
   ================================================================= */

.module-composer.as-activity {
    max-width: 1080px;
    padding: 0;
    color: var(--as-ink);
}

.module-composer.as-activity .sc-head h4.as-title { display: flex; align-items: center; gap: 10px; }
.module-composer.as-activity .sc-head h4 i { color: var(--as-brand); font-size: var(--as-fs-lg); }
.module-composer.as-activity .sc-sub { font-size: var(--as-fs-sm); color: var(--as-ink3); }
.module-composer.as-activity .sc-submit { margin-left: auto; }
.module-composer.as-activity .sc-submit:not(:disabled) { background: var(--as-brand-fill); color: var(--as-on-brand); border-color: transparent; }

.module-composer.as-activity .sc-stage {
    background: var(--as-surface);
    border: 1px solid var(--as-line);
    border-radius: var(--as-r-card);
    box-shadow: var(--as-shadow-1);
}

.module-composer.as-activity .sc-formula-meta { font-size: var(--as-fs-sm); color: var(--as-ink3); }
.module-composer.as-activity .sc-formula-label { font-size: 26px; font-weight: 750; color: var(--as-ink); }
.module-composer.as-activity .sc-formula-hint { font-size: var(--as-fs-md); color: var(--as-ink2); }
.module-composer.as-activity .sc-line { font-size: 20px; font-weight: 600; background: var(--as-sunk); color: var(--as-ink); }
.module-composer.as-activity .sc-actions .as-btn { min-height: 48px; }
.module-composer.as-activity .sc-bank-label { font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--as-ink3); }

.module-composer.as-activity .sc-word {
    border: 1px solid var(--as-line);
    border-radius: 12px;
    background: var(--as-surface);
    box-shadow: var(--as-shadow-1);
    color: var(--as-ink);
}

.module-composer.as-activity .sc-word:hover { border-color: var(--as-brand); }

@media (max-width: 768px) {
    .module-composer.as-activity .sc-head { gap: 10px; }
    .module-composer.as-activity .sc-head-id { flex: 1 1 60%; }
    .module-composer.as-activity .sc-bar { order: 3; flex: 1 1 100%; }
    .module-composer.as-activity .sc-submit { width: auto; }
    .module-composer.as-activity .sc-formula-label { font-size: var(--as-fs-xl); }
    .module-composer.as-activity .sc-actions .as-btn { flex: 1 1 auto; }
}

/* =================================================================
   THE ANSWER STRIP, PINNED ON A PHONE (v0.25.16.0, S6)
   The word bank runs to 2,000px on a phone. The boxes and the sentence
   so far stay under the app bar while it scrolls, so a tapped word is
   seen to land. --app-header-h is the app bar's live height (app.js).
   ================================================================= */
.sc-answer { display: flex; flex-direction: column; gap: 12px; }

@media (max-width: 768px) {
    .module-composer .sc-answer {
        position: sticky;
        top: var(--app-header-h, 108px);
        z-index: 5;
        margin: 0 -12px;
        padding: 10px 12px;
        background: var(--as-surface, var(--bg-primary));
        border-bottom: 1px solid var(--as-line, var(--border-color));
        box-shadow: 0 6px 12px rgba(17, 19, 34, 0.05);
    }
    .module-composer .sc-answer .sc-line { font-size: 17px; padding: 8px 12px; min-height: 0; }
    .module-composer .sc-answer { gap: 8px; }
    .module-composer .sc-answer .sc-actions { margin: 0; gap: 8px; }
    .module-composer .sc-answer .sc-actions .as-btn { min-height: 44px; padding: 0 12px; }
}

/* Your teacher's marks (v0.25.19.0, T6): each marked set folds open to its
   note and a Grammar / Pronunciation mark per sentence. */
.sc-marked-wrap {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 12px 0;
}

.sc-marked {
    border: 1px solid var(--border-color);
    border-radius: 12px;
    background: var(--bg-secondary);
}

.sc-marked > summary {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 10px;
    min-height: 44px;
    padding: 10px 14px;
    cursor: pointer;
    list-style-position: inside;
}

.sc-marked > summary i {
    color: var(--as-ok, #16a34a);
}

.sc-marked-title {
    font-weight: 700;
}

.sc-marked-when {
    color: var(--text-secondary);
    font-size: var(--as-fs-sm, 14px);
}

.sc-marked-note {
    margin: 0 14px 12px;
    padding: 10px 14px;
    border-left: 4px solid var(--primary);
    border-radius: 0 9px 9px 0;
    background: var(--bg-tertiary);
}

.sc-marked-note p {
    margin: 0;
}

.sc-marked-note footer {
    margin-top: 6px;
    color: var(--text-secondary);
    font-size: var(--as-fs-sm, 14px);
}

.sc-marked-note footer::before {
    content: "— ";
}

.sc-marked-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0;
    padding: 0 14px 14px 36px;
}

.sc-marked-list li {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 12px;
}

.sc-marked-text {
    font-weight: 600;
}

.sc-marked-en {
    color: var(--text-secondary);
    font-size: var(--as-fs-sm, 14px);
}

.sc-marked-marks {
    display: flex;
    gap: 12px;
    margin-left: auto;
}

.sc-mark {
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
    font-size: var(--as-fs-sm, 14px);
}

.sc-mark-k,
.sc-mark-of {
    color: var(--text-secondary);
}

.sc-marked-waiting {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    color: var(--text-secondary);
    font-size: var(--as-fs-sm, 14px);
}

@media (max-width: 768px) {
    .sc-marked-marks {
        flex-basis: 100%;
        margin-left: 0;
    }
}