/* =================================================================
   GRAMMAR PAGE EDITOR (v0.25.74.0) — js/deck-builder/uploads/grammar-editor.js
   A full-screen editor over the Deck Builder. The page itself is drawn
   by grammar.css (.grammar-document .gx …), so what an editor sees is
   what a student sees; this file styles only the editor's own chrome:
   the header, toolbar, block controls and the example sheet. Tokens
   only (--as-*, core.css), so both themes come for free. It sits below
   the audio picker (.file-selection-modal, z-index 10000) and the
   confirm sheet, both of which it opens.
   ================================================================= */

.ge-overlay {
    position: fixed;
    inset: 0;
    z-index: 9000;
    background: rgba(17, 19, 34, 0.45);
    display: flex;
    padding: 16px;
}

.ge-shell {
    position: relative;
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    background: var(--as-canvas, var(--as-sunk));
    color: var(--as-ink);
    border: 1px solid var(--as-line);
    border-radius: var(--as-r-card);
    box-shadow: var(--as-shadow-3);
    overflow: hidden;
}

.ge-head {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding: 12px 16px;
    background: var(--as-surface);
    border-bottom: 1px solid var(--as-line);
}
.ge-title { display: flex; align-items: baseline; gap: 10px; flex: 1; min-width: 0; flex-wrap: wrap; }
.ge-title h2 { margin: 0; font-size: var(--as-fs-lg); }
.ge-sub { font-size: var(--as-fs-sm); color: var(--as-ink3); }
.ge-status { font-size: var(--as-fs-sm); color: var(--as-ink3); }
.ge-status.ge-dirty { color: var(--as-warn); font-weight: 700; }

.ge-toolbar {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
    padding: 8px 16px;
    background: var(--as-surface);
    border-bottom: 1px solid var(--as-line);
}
.ge-toolbar .select-control { min-height: 36px; }
.ge-sep { width: 1px; height: 24px; background: var(--as-line); margin: 0 6px; }
.ge-tb {
    min-width: 36px;
    min-height: 36px;
    padding: 0 10px;
    border: 1px solid transparent;
    border-radius: var(--as-r-ctl);
    background: transparent;
    color: var(--as-ink2);
    font: inherit;
    font-size: var(--as-fs-sm);
    cursor: pointer;
}
.ge-tb:hover { background: var(--as-sunk); color: var(--as-ink); }
.ge-tb-text { font-weight: 600; }
.ge-tb:focus-visible, .ge-c:focus-visible, .ge-x:focus-visible { outline: 3px solid var(--as-brand); outline-offset: 2px; }

.ge-banner {
    margin: 0;
    padding: 10px 16px;
    background: var(--as-warn-wash);
    color: var(--as-ink);
    font-size: var(--as-fs-sm);
    border-bottom: 1px solid var(--as-line);
}
.ge-hint { margin: 0; padding: 8px 16px; font-size: var(--as-fs-sm); color: var(--as-ink3); }

.ge-scroll { flex: 1; min-height: 0; overflow-y: auto; padding: 0 16px 24px; }
.ge-page {
    max-width: 74ch;
    margin: 0 auto;
    padding: 28px 32px 40px;
    background: var(--as-surface);
    border: 1px solid var(--as-line);
    border-radius: var(--as-r-card);
    font-size: 17px;
    line-height: 1.7;
    color: var(--as-ink);
}
.ge-page .gx:focus { outline: none; }
.ge-page [contenteditable="true"]:empty::before { content: 'Write here…'; color: var(--as-ink3); }

/* Examples, note boxes and tables carry their own controls while editing. */
.ge-page figure.gx-ex,
.ge-page aside.gx-note,
.ge-page div.gx-table { position: relative; }
.ge-page figure.gx-ex { cursor: default; }
.ge-page figure.gx-ex:hover,
.ge-page aside.gx-note:hover,
.ge-page div.gx-table:hover { box-shadow: 0 0 0 2px var(--as-brand-wash); }
.ge-ctl {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
    justify-content: flex-end;
    margin: 0 0 4px;
    user-select: none;
}
.ge-page div.gx-table .ge-ctl { padding: 6px 8px 0; }
.ge-c {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 32px;
    padding: 0 10px;
    border: 1px solid var(--as-line-strong);
    border-radius: var(--as-r-pill);
    background: var(--as-surface);
    color: var(--as-ink2);
    font: inherit;
    font-size: var(--as-fs-xs);
    font-weight: 700;
    cursor: pointer;
}
.ge-c:hover { color: var(--as-ink); border-color: var(--as-brand); }
.ge-c[disabled] { opacity: .4; cursor: default; }
.ge-c.ge-has { background: var(--as-ok-wash); border-color: var(--as-ok-line); color: var(--as-ok); }
.ge-c-del:hover { border-color: var(--as-no-line); color: var(--as-no); }
.ge-c-label { align-self: center; margin-right: auto; font-size: var(--as-fs-xs); font-weight: 700; color: var(--as-ink3); text-transform: uppercase; letter-spacing: .06em; }

/* ── The example sheet ───────────────────────────────────────── */
.ge-sheet-ov {
    position: absolute;
    inset: 0;
    z-index: 2;
    background: rgba(17, 19, 34, 0.35);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}
.ge-sheet {
    width: min(880px, 100%);
    max-height: 100%;
    display: flex;
    flex-direction: column;
    background: var(--as-surface);
    border: 1px solid var(--as-line);
    border-radius: var(--as-r-card);
    box-shadow: var(--as-shadow-3);
    overflow: hidden;
}
.ge-sheet-head, .ge-sheet-foot {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--as-line);
}
.ge-sheet-head h3 { margin: 0; flex: 1; font-size: var(--as-fs-lg); }
.ge-sheet-foot { border-bottom: 0; border-top: 1px solid var(--as-line); justify-content: flex-end; }
.ge-x { width: 36px; height: 36px; border: 0; border-radius: var(--as-r-ctl); background: transparent; color: var(--as-ink2); cursor: pointer; }
.ge-sheet-body { padding: 14px 16px 18px; overflow-y: auto; display: grid; gap: 8px; }
.ge-sheet-body h4 { margin: 10px 0 0; font-size: var(--as-fs-md); }
.ge-lab { font-size: var(--as-fs-sm); font-weight: 700; color: var(--as-ink2); }
.ge-field {
    min-height: 40px;
    padding: 8px 10px;
    border: 1px solid var(--as-line-strong);
    border-radius: var(--as-r-ctl);
    background: var(--as-surface);
    font-size: var(--as-fs-md);
}
.ge-field-ceb { font-weight: 700; color: var(--as-brand-deep); font-size: var(--as-fs-lg); }
.ge-field:focus { outline: 3px solid var(--as-brand-wash); border-color: var(--as-brand); }
.ge-parts-head { display: flex; align-items: center; gap: 8px; justify-content: space-between; flex-wrap: wrap; }
.ge-help { margin: 0; font-size: var(--as-fs-sm); color: var(--as-ink3); }
.ge-parts { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; counter-reset: gepart; }
.ge-part {
    counter-increment: gepart;
    display: grid;
    gap: 6px;
    padding: 8px 10px;
    border: 1px solid var(--as-line);
    border-radius: var(--as-r-ctl);
    background: var(--as-sunk);
}
.ge-part-sep { display: flex; align-items: center; gap: 8px; }
.ge-part-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ge-part-top::before, .ge-part-sep::before { content: counter(gepart); font-size: var(--as-fs-xs); font-weight: 700; color: var(--as-ink3); min-width: 16px; }
.ge-role { width: 200px; max-width: 100%; color: var(--gx-role, var(--as-brand)); font-weight: 700; }
.ge-focus { display: inline-flex; align-items: center; gap: 4px; font-size: var(--as-fs-sm); color: var(--as-ink2); }
.ge-part-ctl { display: inline-flex; gap: 4px; margin-left: auto; flex-wrap: wrap; }
.ge-part-note { font-size: var(--as-fs-sm); color: var(--as-ink3); }
.ge-words { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; padding-left: 24px; }
.ge-word { display: inline-flex; gap: 4px; align-items: center; }
.ge-word .form-input { width: 130px; min-height: 34px; }
.ge-w-ceb { font-weight: 700; }
.ge-row, .ge-audio-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.ge-audio-row { padding: 8px 10px; border-radius: var(--as-r-ctl); background: var(--as-sunk); }
.ge-audio-name { font-size: var(--as-fs-sm); color: var(--as-ink2); flex: 1; min-width: 0; overflow-wrap: anywhere; }
.ge-preview { padding: 10px 14px; }
.ge-prev-h { margin-bottom: 0; }

@media (max-width: 640px) {
    .ge-overlay { padding: 0; }
    .ge-shell { border-radius: 0; }
    .ge-scroll { padding: 0 8px 16px; }
    .ge-page { padding: 18px 14px 24px; }
    .ge-sheet-ov { padding: 0; align-items: stretch; }
    .ge-words { padding-left: 0; }
    .ge-word .form-input { width: 110px; }
}