/*
 * Samraworld Teachers — Modern Add/Edit Pages
 * Brand: #5134F1 (teacher blue). Re-themed copy of the admin shell.
 *
 * Designed to be reused: classes are page-prefixed (.page-hero, .page-form…)
 * rather than tied to a specific entity type.
 */

:root {
    --add-brand: #5134F1;
    --add-brand-dark: #3823a3;
    --add-bg: #e9eef2;
    --add-card: #fff;
    --add-border: #c7d2da;
    --add-border-soft: #dae1e7;
    --add-text: #2c3e50;
    --add-text-muted: #6c7a85;
    --add-text-faint: #9aa6ae;
    --add-shadow-sm: 0 1px 2px rgba(31,52,64,0.07), 0 4px 12px rgba(31,52,64,0.07);
    --add-shadow-md: 0 6px 20px rgba(31,52,64,0.11);
    --add-radius: 10px;
    --add-radius-sm: 6px;
    --add-success: #1e6636;
    --add-success-bg: #f0f7f2;
    --add-success-border: #b7dfc5;
    --add-error: #c0392b;
    --add-error-bg: #fff3f3;
    --add-error-border: #f5c6cb;
    --add-danger: #c0392b;
    --add-danger-dark: #962d22;
    --add-warning-bg: #fff8e6;
    --add-warning-border: #ffe1a8;
}

body {
    background-color: var(--add-bg) !important;
}

* { box-sizing: border-box; }

/* ======== Page wrapper ======== */

.add-page {
    max-width: 1080px;
    margin: 0 auto;
    padding: 24px 18px 40px;
}

/* Wide variant — for search/list pages with multi-column data tables */
.add-page--wide {
    max-width: 1480px;
}

/* Narrow variant — for single-column pages like login / password reset. */
.add-page--narrow {
    max-width: 520px;
}

/* ======== Hero ======== */

.page-hero {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 20px;
    align-items: center;
    background: var(--add-card);
    border: 1px solid var(--add-border);
    border-top: 3px solid var(--add-brand);
    border-radius: var(--add-radius);
    box-shadow: var(--add-shadow-sm);
    padding: 22px 24px;
    margin-bottom: 18px;
}

.page-hero__icon {
    width: 70px;
    height: 70px;
    border-radius: 16px;
    background: linear-gradient(135deg, var(--add-brand) 0%, var(--add-brand-dark) 100%);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 1.7rem;
    box-shadow: var(--add-shadow-md);
}

.page-hero__icon i { line-height: 1; }

.page-hero__info {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.page-hero__type {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--add-brand);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.page-hero__badge {
    display: inline-block;
    padding: 1px 8px;
    background: rgba(102, 130, 149, 0.12);
    color: var(--add-brand-dark);
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-left: 4px;
}

.page-hero__title {
    margin: 2px 0 0;
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--add-text);
    line-height: 1.25;
    word-break: break-word;
}

.page-hero__subtitle {
    margin: 0;
    font-size: 0.95rem;
    color: var(--add-text-muted);
    font-weight: 500;
}

.page-hero__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    font-size: 0.78rem;
    color: var(--add-text-faint);
    margin-top: 6px;
}

.page-hero__meta span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.page-hero__meta i { font-size: 0.72rem; }

.page-hero__actions {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-shrink: 0;
}

/* ======== Buttons ======== */

.page-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 9px 18px;
    border: 1px solid transparent;
    border-radius: var(--add-radius-sm);
    background: var(--add-brand);
    color: #fff !important;
    font-size: 0.88rem;
    font-weight: 600;
    cursor: pointer;
    line-height: 1.3;
    text-decoration: none !important;
    font-family: inherit;
    transition: background 0.15s, border-color 0.15s, color 0.15s, transform 0.1s;
}

.page-btn:hover {
    background: var(--add-brand-dark);
    color: #fff !important;
    transform: translateY(-1px);
}

.page-btn:active { transform: translateY(0); }

.page-btn--primary { background: var(--add-brand); }

.page-btn--ghost {
    background: transparent;
    color: var(--add-text) !important;
    border-color: var(--add-border);
}

.page-btn--ghost:hover {
    background: var(--add-border-soft);
    border-color: var(--add-text-muted);
    color: var(--add-text) !important;
}

.page-btn--danger {
    background: var(--add-danger);
}

.page-btn--danger:hover {
    background: var(--add-danger-dark);
}

.page-btn--icon {
    padding: 9px 11px;
}

/* Tiny inline action button (used for translate buttons next to fields) */
.page-mini-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 7px 10px;
    border: 1px solid var(--add-border);
    border-radius: var(--add-radius-sm);
    background: #fff;
    color: var(--add-brand);
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    line-height: 1;
    height: 38px;
    font-family: inherit;
    white-space: nowrap;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.page-mini-btn:hover {
    background: var(--add-brand);
    border-color: var(--add-brand);
    color: #fff;
}

.page-mini-btn:disabled,
.page-mini-btn[disabled] {
    opacity: 0.5;
    cursor: not-allowed;
    background: #fff;
    color: var(--add-text-muted);
    border-color: var(--add-border);
}

/* ======== Banner alerts ======== */

.page-banner {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 14px 18px;
    border-radius: var(--add-radius-sm);
    margin-bottom: 18px;
    border: 1px solid;
}

.page-banner--success {
    background: var(--add-success-bg);
    border-color: var(--add-success-border);
    color: var(--add-success);
}

.page-banner--error {
    background: var(--add-error-bg);
    border-color: var(--add-error-border);
    color: var(--add-error);
}

.page-banner--info {
    background: rgba(102, 130, 149, 0.08);
    border-color: rgba(102, 130, 149, 0.25);
    color: var(--add-brand-dark);
}

.page-banner__icon {
    font-size: 1.3rem;
    line-height: 1;
    margin-top: 2px;
}

.page-banner__body { flex: 1; min-width: 0; }

/* Audience badge on the series publish banner (esl_addCurriculum). Green for
   PUBLIC (everyone), amber for MEMBER/FAMILY (logged-in / restricted). */
.pub-audience {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 6px;
    padding: 3px 11px;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 700;
    background: var(--add-success-bg);
    color: var(--add-success);
    border: 1px solid var(--add-success-border);
}

.pub-audience--restricted {
    background: var(--add-warning-bg);
    color: #9a6b00;
    border-color: var(--add-warning-border);
}

.page-banner__title {
    margin: 0;
    font-size: 0.92rem;
    font-weight: 700;
}

.page-banner__list {
    margin: 6px 0 0 18px;
    padding: 0;
    font-size: 0.85rem;
    font-weight: 500;
}

.page-banner__list li { margin: 3px 0; }

/* ======== Main form card ======== */

.page-form {
    background: var(--add-card);
    border: 1px solid var(--add-border);
    border-radius: var(--add-radius);
    box-shadow: var(--add-shadow-sm);
    padding: 28px 28px 24px;
    margin-bottom: 18px;
}

.page-form__intro {
    margin: 0 0 22px;
    font-size: 0.88rem;
    color: var(--add-text-muted);
    line-height: 1.55;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--add-border-soft);
}

/* ======== Form grid ======== */

.page-form__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px 24px;
}

/* Spacing when two .page-form__grid sections appear back-to-back (e.g., profile + password). */
.page-form__grid + .page-form__grid {
    margin-top: 28px;
}

/* ======== Form section dividers (group labels inside .page-form__grid) ======== */

.form-section-divider {
    /* Span the full grid width so a 2-col page-form__grid puts each divider
       on its own row even though it's a plain grid child. */
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 10px 0 -2px;
    padding: 9px 14px;
    border-left: 3px solid var(--add-brand);
    background: linear-gradient(to right, rgba(81, 52, 241, 0.10), rgba(81, 52, 241, 0));
    border-radius: var(--add-radius-sm);
    color: var(--add-brand);
    font-weight: 700;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.form-section-divider i {
    font-size: 0.95rem;
    opacity: 0.85;
}

/* Variant — green accent for the Answer section so the conceptual shift
   from "what's being asked" to "what counts as correct" is visible at a
   glance and ties in with the green "Correct" pill below. */
.form-section-divider--accent {
    border-left-color: #2f7e3e;
    background: linear-gradient(to right, rgba(47, 126, 62, 0.10), rgba(47, 126, 62, 0));
    color: #2f7e3e;
}

/* ======== Form fields ======== */

.form-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.form-field--full {
    grid-column: 1 / -1;
}

.form-field__label {
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--add-text);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 4px;
}

/* Required-field marker — renders the <span class="form-field__required">*
   as a small red dot. The asterisk text inside is hidden (font-size 0)
   but kept in the DOM as a fallback. */
.form-field__required {
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--add-error);
    margin-left: 6px;
    vertical-align: 1px;
    color: transparent;
    font-size: 0;
    line-height: 0;
    overflow: hidden;
}

.form-field__input,
.form-field__select,
.form-field__textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1.5px solid #b8c2c9;
    border-radius: var(--add-radius-sm);
    background: #fff;
    color: var(--add-text);
    font-size: 0.92rem;
    font-family: inherit;
    transition: border-color 0.18s, box-shadow 0.18s;
    margin-left: 0 !important;
}

/* Give inputs and selects one shared height so a number input never renders
   shorter than the selects beside it (e.g. the Series / Sequence / Status row,
   where <input type=number> sat lower than the two <select>s). Textarea keeps
   its auto, multi-line height. */
.form-field__input,
.form-field__select {
    height: 42px;
}

.form-field__input::placeholder,
.form-field__textarea::placeholder {
    color: #8a99a3;
    opacity: 1;
}

.form-field__input:focus,
.form-field__select:focus,
.form-field__textarea:focus {
    outline: none;
    border-color: var(--add-brand);
    box-shadow: 0 0 0 3px rgba(102, 130, 149, 0.18);
}

.form-field__input:disabled,
.form-field__select:disabled,
.form-field__textarea:disabled {
    background: #f4f7f9;
    color: var(--add-text);
    cursor: default;
    border-color: var(--add-border-soft);
    -webkit-text-fill-color: var(--add-text); /* Safari override */
    opacity: 1;                                /* Safari/iOS dim by default */
}

.form-field__select,
.form-field select {
    width: 100%;
    padding: 10px 32px 10px 12px;
    border: 1.5px solid #b8c2c9;
    border-radius: var(--add-radius-sm);
    background: #fff;
    color: var(--add-text);
    font-size: 0.92rem;
    font-family: inherit;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%235134F1'%3e%3cpath d='M7 10l5 5 5-5z'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 8px center;
    background-size: 18px;
    cursor: pointer;
    transition: border-color 0.18s, box-shadow 0.18s;
    margin-left: 0 !important;
}

.form-field select:focus {
    outline: none;
    border-color: var(--add-brand);
    box-shadow: 0 0 0 3px rgba(102, 130, 149, 0.18);
}

.form-field select:disabled {
    background-color: #f4f7f9;
    color: var(--add-text);
    cursor: default;
    border-color: var(--add-border-soft);
    -webkit-text-fill-color: var(--add-text);
    opacity: 1;
}

.form-field__textarea {
    min-height: 140px;
    resize: vertical;
    line-height: 1.55;
}

/* Read-only output (used by encryption utility pages) */
.form-field__input.page-output[readonly],
.form-field__input.page-output {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, monospace;
    font-size: 0.9rem;
    background: #f0f3f5;
    color: var(--add-text);
    border-color: var(--add-border-soft);
    cursor: text;
}

/* Field with adjacent action button (e.g. translate) */
.form-field__row {
    display: flex;
    gap: 8px;
    align-items: stretch;
}

.form-field__row .form-field__input {
    flex: 1;
    min-width: 0;
}

/* TinyMCE fields */
.form-field__tinymce {
    border: 1.5px solid var(--add-border);
    border-radius: var(--add-radius-sm);
    overflow: hidden;
}

.form-field__tinymce .tox-tinymce {
    border: none !important;
    border-radius: 0 !important;
}

.form-field__tinymce-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 4px;
}

/* ======== Action bar (bottom of form) ======== */

.page-actions {
    margin-top: 28px;
    padding-top: 22px;
    border-top: 1px solid var(--add-border-soft);
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
}

/* Top action bar (mirror of the bottom one at the start of the form): same
   right-aligned buttons, but the divider sits BELOW it to separate it from the
   form fields, instead of above. */
.page-actions--top {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
    margin-bottom: 24px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--add-border-soft);
}

/* Center an action bar's button group (vs the default right-aligned). Applied
   to the top + bottom bars on the teacher add/edit pages. */
.page-actions--center {
    justify-content: center;
}

/* On single-column narrow pages (login, password reset, etc.) a single
   primary button looks orphaned hugging the right edge. Center it. */
.add-page--narrow .page-actions {
    justify-content: center;
}

.page-actions__hint {
    flex: 1;
    margin: 0;
    font-size: 0.82rem;
    color: var(--add-text-muted);
    text-align: left;
}

.page-actions .page-btn {
    min-width: 130px;
}

/* ======== Radio group (hosts legacy .sw_radio markup in a wrapped row) ======== */

.page-radio-group {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 14px;
    padding: 12px;
    background: #f7f9fa;
    border: 1px solid var(--add-border);
    border-radius: var(--add-radius-sm);
}

.page-radio-group--countries .sw_radio {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, monospace;
    font-size: 0.78rem;
}

/* ======== Checkbox group (for roles, multi-select boxes) ======== */

.page-checkbox-group {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 8px 14px;
    padding: 14px 16px;
    background: #f7f9fa;
    border: 1px solid var(--add-border);
    border-radius: var(--add-radius-sm);
}

.page-checkbox {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    border-radius: var(--add-radius-sm);
    cursor: pointer;
    font-size: 0.88rem;
    color: var(--add-text);
    transition: background 0.12s;
    user-select: none;
}

.page-checkbox:hover {
    background: rgba(102, 130, 149, 0.08);
}

.page-checkbox input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: var(--add-brand);
    cursor: pointer;
    flex-shrink: 0;
}

.page-checkbox input[type="checkbox"]:disabled {
    cursor: default;
}

.page-checkbox input[type="checkbox"]:disabled + span {
    color: var(--add-text-muted);
}

/* ======== Fieldset (containers for grouped sections inside a form) ======== */

.page-fieldset {
    margin: 22px 0 0;
    padding: 18px 20px 16px;
    border: 1px solid var(--add-border);
    border-radius: var(--add-radius-sm);
    background: #fff;
}

.page-fieldset legend {
    padding: 0 8px;
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--add-brand);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    background: transparent;
    box-shadow: none;
    border-radius: 0;
}

.page-fieldset__intro {
    margin: 0 0 12px;
    font-size: 0.85rem;
    color: var(--add-text-muted);
    line-height: 1.5;
}

/* ======== Compact filter bar (used by report pages with date ranges) ======== */

.page-filter {
    background: var(--add-card);
    border: 1px solid var(--add-border);
    border-radius: var(--add-radius);
    box-shadow: var(--add-shadow-sm);
    padding: 16px 20px;
    margin-bottom: 18px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 14px 18px;
    align-items: end;
}

.page-filter__field {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 0;
}

.page-filter__label {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--add-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.page-filter__input {
    width: 100%;
    padding: 8px 10px;
    border: 1.5px solid #b8c2c9;
    border-radius: var(--add-radius-sm);
    background: #fff;
    color: var(--add-text);
    font-size: 0.92rem;
    font-family: inherit;
    transition: border-color 0.18s, box-shadow 0.18s;
}

.page-filter__input:focus {
    outline: none;
    border-color: var(--add-brand);
    box-shadow: 0 0 0 3px rgba(102, 130, 149, 0.18);
}

.page-filter__action {
    display: flex;
    align-items: end;
}

.page-filter .page-btn {
    width: 100%;
    height: 38px;
}

/* ======== Report summary (small stat tiles above results table) ======== */

.page-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 12px;
}

.page-summary__pill {
    background: rgba(102, 130, 149, 0.1);
    color: var(--add-brand-dark);
    padding: 8px 16px;
    border-radius: 999px;
    font-size: 0.85rem;
    font-weight: 600;
}

.page-summary__pill strong {
    color: var(--add-text);
    font-weight: 700;
    margin-left: 6px;
}

/* ======== Data table (used for pending lists, etc.) ======== */

.page-table-wrap {
    background: var(--add-card);
    border: 1px solid var(--add-border);
    border-radius: var(--add-radius);
    box-shadow: var(--add-shadow-sm);
    overflow: hidden;
    margin-bottom: 18px;
}

.page-table-wrap__header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 18px;
    border-bottom: 1px solid var(--add-border);
    background: #fafbfc;
}

.page-table-wrap__title {
    margin: 0;
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--add-text);
    flex: 1;
}

.page-table-wrap__count {
    background: var(--add-brand);
    color: #fff;
    border-radius: 999px;
    padding: 2px 10px;
    font-size: 0.72rem;
    font-weight: 700;
}

.page-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}

.page-table thead th {
    text-align: left;
    padding: 10px 14px;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--add-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    background: #e1e8ed;
    border-bottom: 2px solid var(--add-border);
}

.page-table tbody td {
    padding: 11px 14px;
    border-bottom: 1px solid var(--add-border-soft);
    color: var(--add-text);
    vertical-align: middle;
}

.page-table tbody tr:last-child td { border-bottom: none; }

.page-table tbody tr.is-clickable,
.page-table tbody tr.page-table__row--clickable {
    cursor: pointer;
    transition: background 0.12s, box-shadow 0.12s;
}

.page-table tbody tr.is-clickable:hover { background: #f7fafb; }

/* Clickable list rows (grammar/idiom catalog + category tables): brand-tinted
   highlight + a brand left-accent bar so it's clear the whole row is actionable,
   regardless of which column leads. */
.page-table tbody tr.page-table__row--clickable:hover {
    background: #f2f0ff;
    box-shadow: inset 3px 0 0 0 #5134F1;
}

.page-table__empty {
    text-align: center;
    padding: 28px 18px;
    color: var(--add-text-muted);
    font-size: 0.9rem;
}

.page-table__pill {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 999px;
    background: rgba(102, 130, 149, 0.12);
    color: var(--add-brand-dark);
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.page-table__mono {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, monospace;
    font-size: 0.82rem;
    color: var(--add-text-muted);
}

@media (max-width: 720px) {
    .page-table thead { display: none; }
    .page-table tbody tr {
        display: block;
        padding: 10px 14px;
        border-bottom: 1px solid var(--add-border-soft);
    }
    .page-table tbody td {
        display: flex;
        justify-content: space-between;
        gap: 12px;
        padding: 4px 0;
        border: none;
        width: auto !important;   /* override desktop shrink-to-fit widths (e.g. width:1% on count cells) so the cell fills the card */
        text-align: right;        /* value reads against the right edge */
    }
    .page-table tbody td::before {
        content: attr(data-label);
        font-size: 0.72rem;
        font-weight: 700;
        color: var(--add-text-muted);
        text-transform: uppercase;
        letter-spacing: 0.04em;
        text-align: left;         /* keep the label left-aligned... */
        flex-shrink: 0;           /* ...and at full width so the value takes the remaining space */
    }
    /* Cancel the wide-table inline sizing (min-width / max-width), nowrap and
       ellipsis clipping so long values wrap inside the stacked card instead of
       running off the right edge. */
    .page-table tbody td,
    .page-table tbody td > * {
        min-width: 0 !important;
        max-width: 100% !important;
        white-space: normal !important;
        overflow: visible !important;
        text-overflow: clip !important;
        overflow-wrap: anywhere;
    }
}

/* ======== Side panels (Delete, Clone, etc.) ======== */

.page-side-panel {
    background: var(--add-card);
    border: 1px solid var(--add-border);
    border-radius: var(--add-radius);
    box-shadow: var(--add-shadow-sm);
    padding: 18px 22px;
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.page-side-panel--danger {
    border-left: 4px solid var(--add-danger);
}

.page-side-panel__icon {
    font-size: 1.3rem;
    color: var(--add-text-muted);
    flex-shrink: 0;
}

.page-side-panel--danger .page-side-panel__icon {
    color: var(--add-danger);
}

.page-side-panel__body {
    flex: 1;
    min-width: 220px;
}

.page-side-panel__title {
    margin: 0 0 3px;
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--add-text);
}

.page-side-panel__desc {
    margin: 0;
    font-size: 0.84rem;
    color: var(--add-text-muted);
    line-height: 1.5;
}

.page-side-panel__action {
    flex-shrink: 0;
}

/* ======== Responsive ======== */

@media (max-width: 720px) {
    .add-page { padding: 18px 12px 32px; }

    .page-hero {
        grid-template-columns: 1fr;
        gap: 14px;
        padding: 18px;
        text-align: center;
    }
    .page-hero__icon {
        margin: 0 auto;
        width: 60px;
        height: 60px;
        font-size: 1.45rem;
    }
    .page-hero__info { align-items: center; }
    .page-hero__meta { justify-content: center; }
    .page-hero__actions { justify-content: center; flex-wrap: wrap; }

    .page-form { padding: 20px 16px; }

    .page-form__grid {
        grid-template-columns: 1fr;
    }

    .page-actions {
        justify-content: stretch;
        flex-direction: column-reverse;
    }
    .page-actions__hint {
        text-align: center;
        margin-top: 6px;
    }
    .page-actions .page-btn {
        width: 100%;
    }

    .page-side-panel {
        padding: 14px 16px;
    }
    .page-side-panel__action,
    .page-side-panel__action .page-btn {
        width: 100%;
    }
}
/* Password input + show/hide eye toggle */
.form-field__pw {
    position: relative;
    display: block;
}

.form-field__pw .form-field__input {
    padding-right: 40px;
}

.form-field__pw-toggle {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    color: var(--add-text-muted);
    padding: 4px 6px;
    font-size: 0.95rem;
    line-height: 1;
    border-radius: 4px;
    transition: color 0.15s, background 0.15s;
}

.form-field__pw-toggle:hover {
    color: var(--add-brand);
    background: rgba(81, 52, 241, 0.08);
}


/* Policy / help link list (used by selc_viewPolicy.php). One row per link with
   leading icon, label, and a trailing chevron. Click target is the whole row. */
.policy-link-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.policy-link-list li + li {
    border-top: 1px solid var(--add-border-soft);
}
.policy-link-list a {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 6px;
    color: var(--add-text);
    text-decoration: none;
    font-size: 1rem;
    font-weight: 500;
    transition: color 0.15s, background 0.15s;
}
.policy-link-list a:hover {
    color: var(--add-brand);
    background: var(--add-border-soft);
}
.policy-link-list a > i:first-child {
    font-size: 1.15rem;
    color: var(--add-brand);
    width: 24px;
    text-align: center;
    flex-shrink: 0;
}
.policy-link-list a > span {
    flex: 1;
    min-width: 0;
}
.policy-link-list__chev {
    color: var(--add-text-faint);
    font-size: 0.85rem;
    transition: transform 0.15s;
}
.policy-link-list a:hover .policy-link-list__chev {
    transform: translateX(2px);
    color: var(--add-brand);
}

/* Standalone panel card (used by IndexPageStatsPanel and view-only pages).
   Same look as .page-form but standalone (not a form). */
.profile-panel--card {
    background: var(--add-card);
    border: 1px solid var(--add-border);
    border-radius: var(--add-radius);
    box-shadow: var(--add-shadow-sm);
    padding: 24px 28px;
    margin-bottom: 18px;
}

.profile-panel__heading {
    margin: 0 0 18px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--add-border-soft);
    font-size: 1rem;
    font-weight: 700;
    color: var(--add-text);
    display: flex;
    align-items: center;
    gap: 10px;
}

.profile-panel__heading i {
    color: var(--add-brand);
}

/* Card-variant heading: full-width brand-color bar that bleeds to the
   card edges. Brings back the colored "header strip" feel from the
   legacy mini_main table, but on the actual section heading instead
   of a redundant inner label. Scoped to .profile-panel--card so it
   doesn't leak into other uses of .profile-panel__heading. */
.profile-panel--card .profile-panel__heading {
    margin: -24px -28px 18px -28px;
    padding: 12px 18px;
    background: linear-gradient(135deg, var(--add-brand) 0%, var(--add-brand-dark) 100%);
    color: #fff;
    border-bottom: 0;
    border-top-left-radius: var(--add-radius);
    border-top-right-radius: var(--add-radius);
    font-size: 0.95rem;
    letter-spacing: 0.02em;
}

.profile-panel--card .profile-panel__heading i {
    color: rgba(255, 255, 255, 0.92);
}

/* Legacy dashboard tables (mini_panel) — modernized in place so the per-page
   esl_list*Dashboard.php files don't need to change. */
table.mini_panel {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
    margin-top: 8px;
    background: var(--add-card);
}

/* When mini_panel lives inside a sidecard body (right-panel context on
   add pages), drop the top gap — the sidecard already has its own
   header strip directly above the table and the 8px reads as an awkward
   empty band. */
.sidecard__body table.mini_panel {
    margin-top: 0;
}

table.mini_panel th {
    text-align: left;
    padding: 10px 12px;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--add-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    background: #f4f7f9;
    border-bottom: 1px solid var(--add-border);
    white-space: nowrap;
}

table.mini_panel td.mini_col {
    padding: 10px 12px;            /* room around every value so columns don't touch */
    border-bottom: 1px solid var(--add-border-soft);
    color: var(--add-text);
    font-weight: normal;
    font-size: 0.85rem;
    text-align: left;
    vertical-align: middle;
}

table.mini_panel tr:last-child td { border-bottom: none; }

/* Optional secondary line under a mini_col entry — e.g. shows which
   lesson a quiz belongs to in the Recent Quizzes mini-panel. */
table.mini_panel td.mini_col .mini_col__sub {
    margin-top: 2px;
    font-size: 0.78rem;
    color: var(--add-text-muted);
    line-height: 1.3;
}

/* Click affordance for clickable rows in dashboard tables */
table.mini_panel tr.hyperlink {
    cursor: pointer;
    transition: background 0.12s;
}

table.mini_panel tr.hyperlink:hover {
    background: rgba(81, 52, 241, 0.06);   /* teacher-brand-tinted hover */
}

table.mini_panel tr.hyperlink:hover td.mini_col {
    color: var(--add-brand-dark);
}

table.mini_panel .mini_para {
    margin: 12px 16px;
    color: var(--add-text-muted);
    font-style: italic;
}

/* Title bar above each dashboard mini-table (used by displayStat()) */
table.mini_main {
    width: 100%;
    border-collapse: collapse;
    margin: 4px 0 10px;
}

table.mini_main td.adm_mini_col {
    padding: 10px 14px;
    background: rgba(81, 52, 241, 0.08);
    border-radius: var(--add-radius-sm);
    font-weight: 700;
    color: var(--add-brand-dark);
    text-align: left;
    font-size: 0.92rem;
}

/* ======================================================================
   Teacher Group add/edit/view — 2-column layout, sidecards, danger card,
   mini-list. Generic .detail-layout / .sidecard / .mini-list / .danger-card patterns,
   ====================================================================== */

.detail-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 20px;
    align-items: start;
}

@media (max-width: 880px) {
    .detail-layout { grid-template-columns: 1fr; }
}

/* List + inline editor on one page (grammar/idiom category managers): the form
   lives in the side column, so give it much more room than the 300px sidebar.
   Desktop only — mobile still stacks via the rule above. */
@media (min-width: 881px) {
    .detail-layout--editor { grid-template-columns: minmax(0, 1fr) minmax(420px, 560px); }
}

.detail-layout__side {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Side cards (panels in the right column) */
.sidecard {
    background: var(--add-card);
    border: 1px solid var(--add-border);
    border-radius: var(--add-radius);
    box-shadow: var(--add-shadow-sm);
    overflow: hidden;
}

.sidecard__header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 14px;
    background: linear-gradient(135deg, var(--add-brand) 0%, var(--add-brand-dark) 100%);
    color: #fff;
    font-weight: 700;
    font-size: 0.88rem;
}

.sidecard__header i {
    font-size: 0.95rem;
    opacity: 0.95;
}

.sidecard__count {
    margin-left: auto;
    font-size: 0.8rem;
    font-weight: 500;
    opacity: 0.88;
}

.sidecard__body {
    padding: 6px 0;
    max-height: 320px;
    overflow-y: auto;
}

/* The Lesson Images sidecard packs small thumbnails so it fills up
   fast — give it 2x the default body height so the teacher doesn't
   have to scroll through every image. :has() target keeps the other
   sidecards (vocab / quiz / etc.) at their default size. */
.sidecard__body:has(.mini-thumbs) {
    max-height: 640px;
}

/* Editor sidecards (an add/edit form, e.g. the category add panel) should grow
   to fit the whole form rather than scroll inside a fixed height. Keeps the
   list-type sidecards (mini-lists / thumbs) at their scrollable default. */
.sidecard__body:has(.page-form) {
    max-height: none;
    overflow: visible;
}

/* Mini-list (members / groups) inside a sidecard */
.mini-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.mini-list__item + .mini-list__item {
    border-top: 1px solid var(--add-border-soft);
}

.mini-list__link {
    display: flex;
    align-items: flex-start;          /* keep seq + pill anchored at row top while name wraps */
    gap: 9px;
    padding: 9px 14px;
    color: var(--add-text);
    text-decoration: none !important;
    transition: background 0.12s, color 0.12s;
}

.mini-list__link:hover {
    background: rgba(81, 52, 241, 0.06);
    color: var(--add-brand-dark);
}

.mini-list__link--current {
    background: rgba(81, 52, 241, 0.08);
    font-weight: 700;
    color: var(--add-brand-dark);
}

.mini-list__icon--member { color: var(--add-text-faint); font-size: 0.85rem; flex-shrink: 0; }
.mini-list__icon--leader { color: #d4ad2a;              font-size: 0.85rem; flex-shrink: 0; }
.mini-list__icon--current { color: var(--add-brand); font-size: 0.5rem; margin-left: auto; }

.mini-list__name {
    flex: 1;
    min-width: 0;
    /* Show the full name — wrap onto multiple lines instead of truncating.
       Break long unhyphenated words so they don't push the pill off-screen. */
    overflow-wrap: anywhere;
    word-break: break-word;
    line-height: 1.35;
    font-size: 0.88rem;
}

/* Optional secondary line under a mini-list entry — e.g. shows which
   series a lesson belongs to in the Recent Lessons mini-panel. */
.mini-list__sub {
    display: block;
    margin-top: 2px;
    font-size: 0.74rem;
    font-weight: normal;
    color: var(--add-text-muted);
    line-height: 1.3;
}

/* In the "current" highlight, keep the sub-line readable but muted. */
.mini-list__link--current .mini-list__sub {
    color: var(--add-brand-dark);
    opacity: 0.7;
}

.mini-list__pill {
    flex-shrink: 0;
    white-space: nowrap;
    background: #fdf3e0;
    color: #8a5a08;
    border: 1px solid #f0d8a8;
    border-radius: 999px;
    padding: 1px 8px;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    /* Nudge down a hair so the pill optically lines up with the first text line. */
    margin-top: 1px;
}

.mini-list__empty {
    margin: 0;
    padding: 14px;
    color: var(--add-text-muted);
    font-size: 0.85rem;
    text-align: center;
    font-style: italic;
}

/* Danger-zone card for delete action */
.danger-card {
    margin-top: 20px;
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 14px;
    align-items: center;
    padding: 16px 20px;
    background: #fff7f7;
    border: 1px solid #f5c4c4;
    border-radius: var(--add-radius);
}

.danger-card__icon {
    width: 38px;
    height: 38px;
    border-radius: 999px;
    background: #f4ebec;
    color: #a83232;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.05rem;
    flex-shrink: 0;
}

.danger-card__title {
    margin: 0 0 2px;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--add-text);
}

.danger-card__desc {
    margin: 0;
    font-size: 0.85rem;
    color: var(--add-text-muted);
    line-height: 1.5;
}

.danger-card__form { margin: 0; }

@media (max-width: 600px) {
    .danger-card {
        grid-template-columns: 1fr;
        text-align: center;
    }
    .danger-card__icon { margin: 0 auto; }
    .danger-card__form { display: flex; justify-content: center; }
}

/* Help panel collapse when empty */
.page-help { margin-bottom: 18px; }
.page-help:empty { display: none; }

/* Inline error-state label tint (used when a field name appears in $errors) */
.form-field__label--error {
    color: var(--add-error);
}

/* ======================================================================
   Sortable column headers + numeric/primary cells for .page-table.
   Used by search-results tables.
   ====================================================================== */

.page-table__sort {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    color: var(--add-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: 0.72rem;
    font-weight: 700;
    cursor: pointer;
    transition: color 0.12s;
}

.page-table__sort:hover {
    color: var(--add-brand);
}

.page-table__sort i {
    font-size: 0.7rem;
    opacity: 0.4;
    transition: opacity 0.12s, color 0.12s;
}

.page-table__sort.is-active {
    color: var(--add-brand);
}

.page-table__sort.is-active i {
    opacity: 1;
    color: var(--add-brand);
}

.page-table__primary {
    font-weight: 600;
    color: var(--add-text);
}

.page-table__num {
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    text-align: center;
}

/* `.page-table thead th { text-align: left }` has higher specificity than
   `.page-table__num` alone, so a plain numeric header (no sort button) stays
   left-aligned. Match the specificity to center it. */
.page-table thead th.page-table__num {
    text-align: center;
}

/* Center the sort-button inside a numeric column header so it sits above
   the centered cell values rather than left-justified. */
.page-table thead th.page-table__num .page-table__sort {
    justify-content: center;
    width: 100%;
}

.page-table__num-icon {
    color: var(--add-text-faint);
    margin-right: 6px;
    font-size: 0.78rem;
}

.page-table__pill--success {
    background: #e6f4ec;
    color: #1e6636;
    border: 1px solid #c0e0cd;
}

.page-table__pill--muted {
    background: var(--add-border-soft);
    color: var(--add-text-muted);
    border: 1px solid var(--add-border);
}

.page-table--sortable thead th {
    /* let the sort button drive the padding */
    padding: 10px 14px;
}

/* Additional pill variants for table cells — info (blue) and warn (amber). */
.page-table__pill--info {
    background: #e8eaff;
    color: #3823a3;
    border: 1px solid #c8cdf3;
}

.page-table__pill--warn {
    background: #fdf3e0;
    color: #8a5a08;
    border: 1px solid #f0d8a8;
}

/* Catalog (grammar/idiom) publish lifecycle badges. */
.page-table__pill--pending {   /* draft / awaiting review */
    background: #fdf3e0;
    color: #8a5a08;
    border: 1px solid #f0d8a8;
}
.page-table__pill--active {    /* published, student-visible */
    background: #e6f4ec;
    color: #1e6636;
    border: 1px solid #c0e0cd;
}
.page-table__pill--retired {   /* withdrawn */
    background: var(--add-border-soft);
    color: var(--add-text-muted);
    border: 1px solid var(--add-border);
}

/* Idiom illustration image card — centered, framed square that fills the panel
   nicely. AI images are 1:1; uploads letterbox onto a soft mat (never cropped). */
.id-img-preview { display: flex; justify-content: center; margin-bottom: 12px; }
.id-img-preview img {
    width: 100%;
    max-width: 340px;
    aspect-ratio: 1 / 1;
    object-fit: contain;
    background: var(--add-border-soft);
    border-radius: 14px;
    border: 1px solid var(--add-border);
    box-shadow: 0 6px 18px rgba(17, 12, 46, 0.10);
    display: block;
}
.id-img-controls { display: flex; gap: 8px; align-items: center; justify-content: center; margin-top: 12px; flex-wrap: wrap; }

/* "Recent grammar / idioms" side-panel list. */
.recent-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.recent-list__item a { display: flex; flex-direction: column; gap: 3px; padding: 8px 10px; border-radius: 8px; text-decoration: none; color: inherit; }
.recent-list__item a:hover { background: var(--add-border-soft); }
.recent-list__item.is-current a { background: #eef0ff; }
.recent-list__title { font-weight: 600; font-size: .9rem; line-height: 1.25; }
.recent-list__meta { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.recent-list__lvl { font-size: .72rem; font-weight: 700; color: #5134F1; background: #efeaff; padding: 1px 8px; border-radius: 999px; }
.recent-list__empty { color: var(--add-text-muted); font-size: .9rem; padding: 6px 10px; }
.recent-list__all { margin-top: 10px; }
/* Recent-work panel: ~30% taller than the 320px sidecard default so more recent
   points are visible before it scrolls. Scoped to recent-list panels only. */
.sidecard__body:has(.recent-list) { max-height: 416px; }

/* Static (non-clickable) variant of .page-table__sort — used for columns
   that don't support server-side ordering. Looks like a header but no
   hover/active styling. */
.page-table__sort.is-static {
    cursor: default;
    color: var(--add-text-muted);
}
.page-table__sort.is-static:hover {
    color: var(--add-text-muted);
}

/* Mini-list: small leading sequence/badge column (used by lesson list). */
.mini-list__seq {
    flex-shrink: 0;
    min-width: 22px;
    text-align: right;
    color: var(--add-text-faint);
    font-size: 0.78rem;
    font-variant-numeric: tabular-nums;
    /* Match the pill's nudge so seq, name, and pill share an optical baseline
       at the top of the row when the name wraps onto multiple lines. */
    margin-top: 2px;
}

/* Status-style pill variant (muted neutral, smaller text) for in-list status hints. */
.mini-list__link .mini-list__pill {
    background: var(--add-border-soft);
    color: var(--add-text-muted);
    border-color: var(--add-border);
    text-transform: none;
    letter-spacing: 0;
}

/* ======================================================================
   Tool card — large action-oriented card used for secondary in-page tools
   (image upload, clone, publish/withdraw) on add/edit/view pages.
   Looks like a sidecard but full-width inside the main column.
   ====================================================================== */

.tool-card {
    margin-top: 18px;
    background: var(--add-card);
    border: 1px solid var(--add-border);
    border-radius: var(--add-radius);
    box-shadow: var(--add-shadow-sm);
    overflow: hidden;
}

.tool-card__header {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 14px;
    align-items: center;
    padding: 16px 20px;
}

.tool-card__icon {
    width: 40px;
    height: 40px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(81, 52, 241, 0.1);
    color: var(--add-brand);
    font-size: 1.1rem;
    flex-shrink: 0;
}

.tool-card__body {
    min-width: 0;
}

.tool-card__title {
    margin: 0 0 2px;
    font-size: 0.98rem;
    font-weight: 700;
    color: var(--add-text);
}

.tool-card__desc {
    margin: 0;
    font-size: 0.85rem;
    color: var(--add-text-muted);
    line-height: 1.5;
}

.tool-card__empty {
    margin: 0;
    padding: 18px 20px;
    color: var(--add-text-muted);
    font-size: 0.88rem;
    text-align: center;
    font-style: italic;
    border-top: 1px solid var(--add-border-soft);
    background: #fafbfc;
}

.tool-card .page-table-wrap {
    margin: 0;
    border: none;
    border-top: 1px solid var(--add-border);
    border-radius: 0;
    box-shadow: none;
}

@media (max-width: 600px) {
    .tool-card__header {
        grid-template-columns: 1fr;
        text-align: center;
    }
    .tool-card__icon { margin: 0 auto; }
}

/* ======================================================================
   Share-plan card radios — used by curriculum/lesson etc. for choosing
   visibility (Private / Group / Public). Replaces the legacy dot radios
   with a 3-up card grid where each option shows icon + title + blurb.
   ====================================================================== */

.share-options {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px;
}

.share-option {
    position: relative;
    cursor: pointer;
    margin: 0;
    display: block;
}

.share-options.is-locked .share-option { cursor: not-allowed; }

.share-option input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.share-option__card {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 14px 16px;
    border: 1.5px solid var(--add-border);
    border-radius: var(--add-radius);
    background: #fff;
    height: 100%;
    transition: border-color 0.15s, background 0.15s, box-shadow 0.15s, transform 0.1s;
}

.share-option:hover .share-option__card {
    border-color: var(--add-brand);
    transform: translateY(-1px);
}

.share-option input[type="radio"]:checked + .share-option__card {
    border-color: var(--add-brand);
    background: rgba(81, 52, 241, 0.05);
    box-shadow: 0 0 0 3px rgba(81, 52, 241, 0.12);
}

.share-option input[type="radio"]:focus-visible + .share-option__card {
    box-shadow: 0 0 0 3px rgba(81, 52, 241, 0.22);
}

.share-option__head {
    display: flex;
    align-items: center;
    gap: 10px;
}

.share-option__icon {
    font-size: 1.05rem;
    color: var(--add-text-faint);
    width: 22px;
    text-align: center;
    transition: color 0.15s;
}

.share-option input[type="radio"]:checked + .share-option__card .share-option__icon {
    color: var(--add-brand);
}

.share-option__title {
    font-weight: 700;
    font-size: 0.92rem;
    color: var(--add-text);
    flex: 1;
    min-width: 0;
}

.share-option__check {
    width: 22px;
    height: 22px;
    border-radius: 999px;
    border: 1.5px solid var(--add-border);
    background: #fff;
    color: transparent;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    flex-shrink: 0;
    transition: border-color 0.15s, background 0.15s, color 0.15s;
}

.share-option input[type="radio"]:checked + .share-option__card .share-option__check {
    background: var(--add-brand);
    border-color: var(--add-brand);
    color: #fff;
}

.share-option__desc {
    font-size: 0.82rem;
    color: var(--add-text-muted);
    line-height: 1.45;
}

/* ======================================================================
   Group-share row cards — used by the conditional "Group Collaboration"
   checklist that appears when Share=GROUP is selected. Each row is a
   full-width clickable card with check on the left, group icon, name.
   ====================================================================== */

.group-share-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-top: 4px;
}

.group-share {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border: 1.5px solid var(--add-border);
    border-radius: var(--add-radius-sm);
    background: #fff;
    cursor: pointer;
    margin: 0;
    transition: border-color 0.15s, background 0.15s;
}

.group-share:hover {
    border-color: var(--add-brand);
    background: rgba(81, 52, 241, 0.03);
}

.group-share input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.group-share__check {
    width: 22px;
    height: 22px;
    border-radius: 5px;
    border: 1.5px solid #b8c2c9;
    background: #fff;
    color: transparent;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.78rem;
    flex-shrink: 0;
    transition: border-color 0.15s, background 0.15s, color 0.15s;
}

.group-share input[type="checkbox"]:checked + .group-share__check {
    background: var(--add-brand);
    border-color: var(--add-brand);
    color: #fff;
}

.group-share input[type="checkbox"]:checked ~ .group-share__name {
    color: var(--add-brand-dark);
    font-weight: 700;
}

.group-share input[type="checkbox"]:checked ~ .group-share__icon {
    color: var(--add-brand);
}

.group-share input[type="checkbox"]:focus-visible + .group-share__check {
    box-shadow: 0 0 0 3px rgba(81, 52, 241, 0.22);
}

.group-share:has(input[type="checkbox"]:checked) {
    border-color: var(--add-brand);
    background: rgba(81, 52, 241, 0.05);
}

.group-share__icon {
    color: var(--add-text-faint);
    font-size: 1rem;
    width: 20px;
    text-align: center;
    transition: color 0.15s;
}

.group-share__name {
    flex: 1;
    min-width: 0;
    font-size: 0.92rem;
    color: var(--add-text);
    transition: color 0.15s, font-weight 0.05s;
}

.group-share-empty {
    margin: 0;
    padding: 16px 18px;
    border: 1.5px dashed var(--add-border);
    border-radius: var(--add-radius-sm);
    background: var(--add-bg);
    color: var(--add-text-muted);
    font-size: 0.88rem;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.group-share-empty i {
    color: var(--add-text-faint);
}

/* ======================================================================
   Modal dialog — uses the native HTML5 <dialog> element with .showModal().
   Esc-to-close, focus-trap, and backdrop click are handled by the element
   plus a small JS shim on each consumer page.
   ====================================================================== */

.sw-modal {
    /* Reset native <dialog> defaults */
    padding: 0;
    border: none;
    background: transparent;
    color: inherit;
    max-width: 96vw;
    max-height: 92vh;
    width: 560px;
    overflow: visible;
}

.sw-modal::backdrop {
    background: rgba(20, 25, 35, 0.55);
    backdrop-filter: blur(2px);
}

.sw-modal__inner {
    background: var(--add-card);
    border-radius: var(--add-radius);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
    display: flex;
    flex-direction: column;
    max-height: 92vh;
    overflow: hidden;
}

/* When a <form> wraps body + footer (used by the print modals), it has to
   behave as a transparent flex column so the body's overflow-y: auto
   actually engages. Otherwise the form takes its intrinsic content height
   and bursts past max-height, hiding the bottom of the modal. */
.sw-modal__inner > form {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}

.sw-modal__header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 20px;
    border-bottom: 1px solid var(--add-border);
    background: linear-gradient(135deg, var(--add-brand) 0%, var(--add-brand-dark) 100%);
    color: #fff;
}

.sw-modal__header i {
    font-size: 1.1rem;
    opacity: 0.95;
}

.sw-modal__title {
    margin: 0;
    flex: 1;
    min-width: 0;
    font-size: 1rem;
    font-weight: 700;
}

.sw-modal__subtitle {
    margin: 0;
    flex-shrink: 0;
    font-size: 0.82rem;
    opacity: 0.85;
    max-width: 40%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sw-modal__close {
    background: rgba(255, 255, 255, 0.18);
    border: none;
    color: #fff;
    width: 32px;
    height: 32px;
    border-radius: 999px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    transition: background 0.12s;
}

.sw-modal__close:hover { background: rgba(255, 255, 255, 0.3); }

.sw-modal__body {
    padding: 20px 22px;
    overflow-y: auto;
    flex: 1;
    min-height: 0;
    /* Stop scroll-chaining: when the body reaches top/bottom, scroll events
       no longer bubble out to the page underneath the modal. */
    overscroll-behavior: contain;
}

/* Lock the page scroll while any sw-modal dialog is open. Pure-CSS via :has()
   — supported in all current evergreen browsers; older browsers fall back to
   the overscroll-behavior fix above, which is still a clear improvement. */
html:has(dialog.sw-modal[open]) {
    overflow: hidden;
}

.sw-modal__body > p { margin: 0 0 12px; color: var(--add-text-muted); font-size: 0.9rem; line-height: 1.5; }

.sw-modal__footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    padding: 14px 20px;
    border-top: 1px solid var(--add-border-soft);
    background: #fafbfc;
}

/* Upload progress bar (used by the image-upload modal) */
.sw-modal__progress {
    margin-top: 14px;
    display: none;
}

.sw-modal__progress[data-visible="true"] {
    display: block;
}

.sw-modal__progress progress {
    width: 100%;
    height: 8px;
    accent-color: var(--add-brand);
    border: none;
    border-radius: 4px;
}

.sw-modal__progress progress::-webkit-progress-bar {
    background: var(--add-border-soft);
    border-radius: 4px;
}

.sw-modal__progress progress::-webkit-progress-value {
    background: var(--add-brand);
    border-radius: 4px;
}

.sw-modal__progress-label {
    display: block;
    margin-top: 6px;
    text-align: center;
    font-size: 0.78rem;
    color: var(--add-text-muted);
}

@media (max-width: 520px) {
    .sw-modal { width: 100vw; max-width: 100vw; height: 100vh; max-height: 100vh; }
    .sw-modal__inner { border-radius: 0; max-height: 100vh; }
}

/* ======================================================================
   Curriculum image preview (inside the Image tool-card).
   Single image per curriculum (replace-on-upload pattern), so the preview
   is just one tile with metadata + a remove button — no table.
   ====================================================================== */

.cur-image-preview {
    display: grid;
    grid-template-columns: minmax(160px, 240px) 1fr;
    gap: 18px;
    align-items: center;
    padding: 18px 20px;
    border-top: 1px solid var(--add-border-soft);
    background: #fafbfc;
}

.cur-image-preview__pic {
    border-radius: var(--add-radius-sm);
    overflow: hidden;
    background: var(--add-border-soft);
    aspect-ratio: 4 / 3;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cur-image-preview__pic img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.cur-image-preview__meta {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.cur-image-preview__title {
    margin: 0;
    font-size: 0.98rem;
    font-weight: 700;
    color: var(--add-text);
    word-break: break-word;
}

.cur-image-preview__time {
    margin: 0;
    font-size: 0.82rem;
    color: var(--add-text-muted);
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.cur-image-preview__time i {
    color: var(--add-text-faint);
    font-size: 0.78rem;
}

.cur-image-preview__remove {
    align-self: flex-start;
    margin-top: 6px;
}

.cur-image-preview__remove:hover {
    color: var(--add-error) !important;
    border-color: var(--add-error) !important;
}

@media (max-width: 600px) {
    .cur-image-preview {
        grid-template-columns: 1fr;
    }
}

/* ======================================================================
   Lesson image grid (multiple per lesson — embedded in the passage).
   Each tile shows thumbnail / metadata / editable caption / Save+Delete.
   ====================================================================== */

.lesson-image-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 14px;
    padding: 16px 20px 18px;
    border-top: 1px solid var(--add-border-soft);
    background: #fafbfc;
}

.lesson-image-tile {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid var(--add-border);
    border-radius: var(--add-radius-sm);
    overflow: hidden;
}

.lesson-image-tile__pic {
    aspect-ratio: 4 / 3;
    background: var(--add-border-soft);
    overflow: hidden;
}

.lesson-image-tile__pic img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.lesson-image-tile__body {
    padding: 10px 12px 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.lesson-image-tile__meta {
    margin: 0;
    display: flex;
    gap: 12px;
    font-size: 0.74rem;
    color: var(--add-text-faint);
}

.lesson-image-tile__meta i {
    margin-right: 4px;
}

.lesson-image-tile textarea {
    min-height: 50px !important;
    font-size: 0.85rem;
}

.lesson-image-tile__filename {
    margin: 0;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, monospace;
    font-size: 0.72rem;
    color: var(--add-text-faint);
    word-break: break-all;
}

.lesson-image-tile__actions {
    display: flex;
    gap: 8px;
    margin-top: 2px;
}

.lesson-image-tile__actions .page-btn {
    padding: 6px 12px;
    font-size: 0.78rem;
    flex: 1;
}

/* Inline thumb next to the Heading Image dropdown */
.lesson-heading-thumb {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border: 1px solid var(--add-border);
    border-radius: var(--add-radius-sm);
    overflow: hidden;
    background: var(--add-border-soft);
}

.lesson-heading-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ======================================================================
   Mini-thumbs (sidebar image gallery — small)
   ====================================================================== */

.mini-thumbs {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
    gap: 6px;
    padding: 8px 10px 10px;
}

.mini-thumbs__tile {
    margin: 0;
    border-radius: 4px;
    overflow: hidden;
    background: var(--add-border-soft);
    aspect-ratio: 1 / 1;
    position: relative;
    border: 1px solid var(--add-border-soft);
}

.mini-thumbs__tile img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.mini-thumbs__tile figcaption {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 2px 4px;
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    font-size: 0.66rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    opacity: 0;
    transition: opacity 0.15s;
}

.mini-thumbs__tile:hover figcaption {
    opacity: 1;
}

/* {LI-nn} marker overlay — top-left badge, always visible so the
   teacher can scan the right marker without hovering each tile. */
.mini-thumbs__marker {
    position: absolute;
    top: 2px;
    left: 2px;
    z-index: 1;
    padding: 1px 5px;
    background: rgba(0, 0, 0, 0.65);
    color: #fff;
    font-size: 0.62rem;
    font-weight: 700;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    border-radius: 3px;
    letter-spacing: 0.02em;
    pointer-events: none;
    transition: background 0.15s ease, color 0.15s ease;
}

/* Click-to-copy affordance: tile is interactive, badge briefly flashes
   green on copy so the teacher knows it landed in the clipboard. */
.mini-thumbs__tile[data-li-marker] {
    cursor: pointer;
}

.mini-thumbs__tile[data-li-marker]:hover {
    border-color: var(--add-brand, #5134F1);
}

.mini-thumbs__tile[data-li-marker]:focus-visible {
    outline: 2px solid var(--add-brand, #5134F1);
    outline-offset: 1px;
}

.mini-thumbs__marker.is-copied {
    background: #0e6630;
    color: #fff;
    letter-spacing: 0.04em;
}

/* ======================================================================
   Chip multi-select — used by short-label many-option groups like Themes.
   Each option is a pill that fills with brand color when selected.
   Replaces the legacy .sw_checkbox grid for these cases.
   ====================================================================== */

.chip-group {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding-top: 4px;
}

.chip {
    margin: 0;
    cursor: pointer;
    user-select: none;
}

.chip input[type="checkbox"],
.chip input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.chip__inner {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    border: 1.5px solid var(--add-border);
    border-radius: 999px;
    background: #fff;
    color: var(--add-text);
    font-size: 0.88rem;
    font-weight: 500;
    line-height: 1.3;
    transition: border-color 0.15s, background 0.15s, color 0.15s;
}

.chip__check {
    display: none;
    font-size: 0.72rem;
    color: var(--add-brand);
}

.chip:hover .chip__inner {
    border-color: var(--add-brand);
    color: var(--add-brand-dark);
}

.chip input:checked + .chip__inner {
    background: var(--add-brand);
    border-color: var(--add-brand);
    color: #fff;
}

.chip input:checked + .chip__inner .chip__check {
    display: inline-block;
    color: #fff;
}

.chip input:focus-visible + .chip__inner {
    box-shadow: 0 0 0 3px rgba(81, 52, 241, 0.22);
}

.chip input:disabled + .chip__inner {
    opacity: 0.55;
    cursor: not-allowed;
}

/* ======================================================================
   Page-actions LEAD strip — the contextual "you are in view mode"
   hint that previously sat squeezed inside the action button row.
   Now its own stripe directly above the buttons.
   ====================================================================== */

.page-actions__lead {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 24px 0 10px;
    padding: 10px 14px;
    background: rgba(81, 52, 241, 0.05);
    border-left: 3px solid var(--add-brand);
    border-radius: var(--add-radius-sm);
    font-size: 0.88rem;
    color: var(--add-text);
    line-height: 1.45;
}

.page-actions__lead i {
    color: var(--add-brand);
    font-size: 0.92rem;
    flex-shrink: 0;
}

/* Once the lead exists, the action row sits directly under it with no extra top margin */
.page-actions__lead + .page-actions {
    margin-top: 0;
    padding-top: 16px;
}

/* ======================================================================
   TinyMCE size variants — intro is compact, passage gets more room.
   Uses min-height (not height) so the user can drag TinyMCE's resize
   handle to grow the editor when they need more visible passage at
   once. The wrapper's overflow:hidden clips only horizontal stray
   content; vertical growth flows through.
   ====================================================================== */

.form-field__tinymce--intro .tox-tinymce {
    min-height: 180px;
}

.form-field__tinymce--passage .tox-tinymce {
    min-height: 480px;
}

@media (max-width: 720px) {
    .form-field__tinymce--passage .tox-tinymce { min-height: 360px; }
}

/* ======================================================================
   Chip-group boxed variant — frames the chips in a soft tray so they
   read as a single grouped control instead of floating loose.
   ====================================================================== */

.chip-group {
    padding: 12px 14px;
    background: var(--add-bg);
    border: 1px solid var(--add-border-soft);
    border-radius: var(--add-radius-sm);
}

/* ======================================================================
   Wider modal variant for record-audio (need room for the recordings list)
   ====================================================================== */

.sw-modal--wide { width: 640px; }

/* ======================================================================
   In-modal audio recorder UI
   ====================================================================== */

.audio-recorder {
    margin-top: 12px;
    padding: 16px;
    background: var(--add-bg);
    border: 1px solid var(--add-border-soft);
    border-radius: var(--add-radius-sm);
}

.audio-recorder__controls {
    display: flex;
    gap: 10px;
    justify-content: center;
    margin-bottom: 14px;
}

.audio-recorder__status {
    text-align: center;
    padding: 10px 14px;
    background: #fff;
    border: 1px solid var(--add-border-soft);
    border-radius: var(--add-radius-sm);
    font-size: 0.88rem;
    color: var(--add-text-muted);
    margin-bottom: 12px;
}

.audio-recorder__status span[style*="color: red"] {
    color: var(--add-error) !important;
    font-size: 1rem !important;
    font-weight: 700;
    animation: audio-rec-blink 1.1s steps(2, end) infinite;
}

@keyframes audio-rec-blink {
    50% { opacity: 0.35; }
}

.audio-recorder__list-label {
    margin: 14px 0 6px;
    font-size: 0.9rem;
    color: var(--add-text);
}

.audio-recorder__list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.audio-recorder__list li {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    padding: 10px 12px;
    background: #fff;
    border: 1px solid var(--add-border-soft);
    border-radius: var(--add-radius-sm);
    margin-bottom: 8px;
    font-size: 0.85rem;
    color: var(--add-text-muted);
}

.audio-recorder__list li audio {
    width: 100%;
    max-width: 320px;
    flex: 1;
    min-width: 200px;
    height: 34px;
}

.audio-recorder__list li a {
    /* WebAudioRecorder injects a download link with the timestamp filename — hide it,
       too noisy for the modal. The Upload button matters; the download link doesn't. */
    display: none;
}

/* The recorder's injected "Upload" button uses .btn_ul / .btn_ul_done classes */
.audio-recorder__list li .btn_ul {
    background: var(--add-brand);
    color: #fff;
    border: none;
    border-radius: var(--add-radius-sm);
    padding: 7px 16px;
    font-weight: 600;
    cursor: pointer;
    font-size: 0.82rem;
    transition: background 0.12s;
}

.audio-recorder__list li .btn_ul:hover { background: var(--add-brand-dark); }

.audio-recorder__list li .btn_ul_done {
    background: var(--add-success);
    cursor: default;
}

/* ======================================================================
   TTS voice / speaking-rate radio rows inside the Synthesize Audio modal.
   The synthesize.js bundle appends <input type="radio"> + <label> pairs
   directly to these containers — we just style what comes out.
   ====================================================================== */

.tts-radios {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 10px 12px;
    background: #fff;
    border: 1px solid var(--add-border);
    border-radius: var(--add-radius-sm);
}

/* Visually hide the native radio — keep it in the DOM for form state +
   keyboard access. The adjacent <label class="tts-chip"> is the UI. */
.tts-radios input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    pointer-events: none;
    margin: 0;
}

.tts-radios .tts-chip {
    display: inline-flex;
    align-items: center;
    padding: 6px 14px;
    font-size: 0.85rem;
    line-height: 1.2;
    color: var(--add-text);
    background: #f7f7fb;
    border: 1px solid var(--add-border);
    border-radius: 999px;
    cursor: pointer;
    user-select: none;
    transition: background 0.12s, color 0.12s, border-color 0.12s, box-shadow 0.12s;
}

.tts-radios .tts-chip:hover {
    border-color: var(--add-brand);
    color: var(--add-brand);
    background: rgba(81, 52, 241, 0.06);
}

.tts-radios input[type="radio"]:checked + .tts-chip {
    background: var(--add-brand);
    border-color: var(--add-brand);
    color: #fff;
    box-shadow: 0 1px 2px rgba(81, 52, 241, 0.25);
}

.tts-radios input[type="radio"]:focus-visible + .tts-chip {
    outline: 2px solid var(--add-brand);
    outline-offset: 2px;
}

/* Synth-specific progress bar (separate from upload progress) */
.synth-progress {
    width: 100%;
    background: var(--add-border-soft);
    border-radius: var(--add-radius-sm);
    margin: 12px 0;
    overflow: hidden;
    height: 22px;
}

.synth-progress__bar {
    height: 100%;
    background: var(--add-brand);
    color: #fff;
    line-height: 22px;
    text-align: center;
    font-size: 0.78rem;
    font-weight: 600;
    border-radius: var(--add-radius-sm);
    transition: width 0.2s ease;
    min-width: 30px;
}

/* ======================================================================
   Word Scan modal (vocabulary candidate picker inside the Lesson page).
   Two-column layout: chip grid on the left, passage preview on the right.
   ====================================================================== */

/* Widen the dialog itself — .sw-modal sets width: 560px and .sw-modal--wide
   bumps to 640px, both too narrow for the two-column word-scan layout. */
.ws-modal.sw-modal { width: min(1100px, 95vw); }
.ws-modal .sw-modal__inner { width: 100%; }

.ws-body { padding-top: 14px; }

.ws-intro {
    margin: 0 0 14px;
    color: var(--add-text-faint);
    font-size: 0.88rem;
    line-height: 1.45;
}

.ws-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
    gap: 14px;
    min-height: 380px;
}

@media (max-width: 820px) {
    .ws-layout { grid-template-columns: 1fr; }
}

.ws-col {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.ws-summary {
    font-size: 0.78rem;
    color: var(--add-text-faint);
    margin-bottom: 8px;
    min-height: 1.2em;
}

/* ---- Toolbar (search on top row, filter+sort on second row) ---- */
.ws-toolbar {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--add-border-soft);
}

.ws-toolbar__search {
    position: relative;
    width: 100%;
}
.ws-toolbar__search i {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--add-text-faint);
    font-size: 0.85rem;
    pointer-events: none;
}
.ws-toolbar__search input {
    width: 100%;
    box-sizing: border-box;
    padding: 7px 10px 7px 30px;
    border: 1px solid var(--add-border);
    border-radius: var(--add-radius-sm);
    font-size: 0.88rem;
    background: #fff;
    color: var(--add-text);
}
.ws-toolbar__search input:focus {
    outline: none;
    border-color: var(--add-brand);
    box-shadow: 0 0 0 3px rgba(81, 52, 241, 0.12);
}

.ws-toolbar__row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 14px;
    align-items: center;
    justify-content: space-between;
}

/* Filter checkbox — styled pill that's easier to click than a bare checkbox */
.ws-toolbar__filter {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 5px 12px;
    border: 1px solid var(--add-border);
    border-radius: 999px;
    background: #fff;
    font-size: 0.82rem;
    color: var(--add-text);
    white-space: nowrap;
    cursor: pointer;
    user-select: none;
    transition: background 0.12s, border-color 0.12s, color 0.12s;
    flex-shrink: 0;
}
.ws-toolbar__filter:hover {
    border-color: var(--add-brand);
    color: var(--add-brand);
}
.ws-toolbar__filter input[type="checkbox"] {
    margin: 0;
    accent-color: var(--add-brand);
    cursor: pointer;
}
.ws-toolbar__filter:has(input:checked) {
    background: rgba(81, 52, 241, 0.08);
    border-color: var(--add-brand);
    color: var(--add-brand);
}

/* Sort label + select — keep label and select on the same line, always */
.ws-toolbar__sort {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.82rem;
    color: var(--add-text-faint);
    white-space: nowrap;
    flex-shrink: 0;
}
.ws-toolbar__sort > label {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin: 0;
    font-weight: 500;
    color: var(--add-text-faint);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 0.72rem;
    cursor: default;
}
.ws-toolbar__sort > label i {
    font-size: 0.78rem;
    opacity: 0.7;
}
.ws-toolbar__sort select {
    padding: 5px 28px 5px 10px;
    border: 1px solid var(--add-border);
    border-radius: var(--add-radius-sm);
    background: #fff url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path fill='%23556' d='M0 0l5 6 5-6z'/></svg>") no-repeat right 10px center;
    font-size: 0.82rem;
    color: var(--add-text);
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    cursor: pointer;
    transition: border-color 0.12s, box-shadow 0.12s;
}
.ws-toolbar__sort select:hover { border-color: var(--add-brand); }
.ws-toolbar__sort select:focus {
    outline: none;
    border-color: var(--add-brand);
    box-shadow: 0 0 0 3px rgba(81, 52, 241, 0.12);
}

/* ---- Chip grid ---- */
.ws-chiplist {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-content: flex-start;
    max-height: 50vh;
    overflow-y: auto;
    padding: 4px 4px 12px;
    border: 1px solid var(--add-border-soft);
    border-radius: var(--add-radius-sm);
    background: #fafafd;
}

.ws-empty {
    width: 100%;
    color: var(--add-text-faint);
    font-size: 0.85rem;
    text-align: center;
    padding: 20px;
    margin: 0;
}

.ws-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 10px;
    border-radius: 999px;
    border: 1px solid var(--add-border);
    background: #fff;
    color: var(--add-text);
    font-size: 0.85rem;
    line-height: 1.2;
    cursor: pointer;
    user-select: none;
    transition: background 0.12s, color 0.12s, border-color 0.12s, box-shadow 0.12s;
    position: relative;
}

.ws-chip:hover {
    border-color: var(--add-brand);
    color: var(--add-brand);
}

.ws-chip__count {
    font-size: 0.7rem;
    opacity: 0.65;
    margin-left: 2px;
    padding: 0 5px;
    background: rgba(0, 0, 0, 0.05);
    border-radius: 999px;
}

/* State: already in vocab somewhere else — distinct two-tone (teal border on
   white body) so it reads as "available to add" rather than "done". The
   link-icon hint is added by JS and the tooltip lists the other lessons. */
.ws-chip.is-in-vocab {
    background: #fff;
    color: #0c6e6a;
    border: 1px solid #0d9488;
    border-left-width: 4px;
    padding-left: 9px;       /* compensate for the thicker left border */
}
.ws-chip.is-in-vocab:hover {
    background: #ecfeff;
    color: #0c6e6a;
    border-color: #0d9488;
}
.ws-chip.is-in-vocab .ws-chip__count {
    background: rgba(13, 148, 136, 0.12);
    color: #0c6e6a;
}
.ws-chip__linkicon {
    font-size: 0.7rem;
    opacity: 0.7;
    margin-left: 2px;
}

/* Word already in THIS lesson's vocabulary — informational, not editable. */
.ws-chip.is-in-lesson {
    background: #eaf6ee;
    color: #14653a;
    border: 1px solid #34a853;
    border-left-width: 4px;
    padding-left: 9px;
    cursor: default;
}
.ws-chip.is-in-lesson:hover { background: #eaf6ee; box-shadow: none; }
.ws-chip__inlessonicon { color: #2e9e4f; margin-left: 5px; font-size: 0.85em; }

/* State: reuse the existing vocab entry as-is in this lesson — filled teal
   (the same hue the unselected in-vocab pill outlines with, now solid). */
.ws-chip.is-reuse {
    background: #0d9488;
    color: #fff;
    border-color: #0d9488;
    box-shadow: 0 1px 2px rgba(13, 148, 136, 0.3);
    opacity: 1;
}
.ws-chip.is-reuse .ws-chip__count {
    background: rgba(255, 255, 255, 0.22);
    color: #fff;
}

/* State: staged as vocab candidate (action target) — brand color */
.ws-chip.is-stage {
    background: var(--add-brand);
    color: #fff;
    border-color: var(--add-brand);
    box-shadow: 0 1px 2px rgba(81, 52, 241, 0.25);
    opacity: 1;
}
.ws-chip.is-stage .ws-chip__count {
    background: rgba(255, 255, 255, 0.22);
    color: #fff;
}

/* State: marked as proper name — amber */
.ws-chip.is-proper {
    background: #f59e0b;
    color: #fff;
    border-color: #f59e0b;
    box-shadow: 0 1px 2px rgba(245, 158, 11, 0.3);
    opacity: 1;
}
.ws-chip.is-proper .ws-chip__count {
    background: rgba(255, 255, 255, 0.22);
    color: #fff;
}

/* Pending-change indicator dot — top-right */
.ws-chip.is-dirty::after {
    content: '';
    position: absolute;
    top: -3px;
    right: -3px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #ef4444;
    border: 2px solid #fff;
}

/* When the toolbar filter hides a chip */
.ws-chip[hidden] { display: none !important; }

/* ---- Passage preview ---- */
.ws-passage-label {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--add-text-faint);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 6px;
}

.ws-passage {
    flex: 1;
    max-height: 50vh;
    overflow-y: auto;
    padding: 14px 16px;
    border: 1px solid var(--add-border-soft);
    border-radius: var(--add-radius-sm);
    background: #fff;
    font-size: 0.9rem;
    line-height: 1.55;
    color: var(--add-text);
    white-space: pre-wrap;
    word-wrap: break-word;
}

.ws-passage mark.ws-hl {
    background: #fde68a;
    color: inherit;
    padding: 1px 2px;
    border-radius: 3px;
}
.ws-passage mark.ws-hl--focus {
    background: #f59e0b;
    color: #fff;
    box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.35);
}

/* Visible disabled state for the Save button — the project's .page-btn rules
   don't style :disabled, so without this the button looks identical
   enabled/disabled, giving the user no feedback. */
.ws-modal .page-btn[disabled],
.ws-modal .page-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
    box-shadow: none;
}

/* ======================================================================
   Vocabulary — Usage Example rows (esl_addVocabulary.php).
   Single-line horizontal layout per example, matching the original table:
     [# input] [EN textarea] [T btn] [JP textarea] [trash btn]
   A header strip above the rows labels the columns. All rows share the
   same 5-column grid template, so columns line up vertically.
   ====================================================================== */

/* Shared grid template — keep these two selectors in sync so the column
   labels in the head row line up exactly with the inputs in the data rows. */
.example-stack__head,
.example-row {
    display: grid;
    grid-template-columns: 60px minmax(0, 1fr) 38px minmax(0, 1fr) 38px;
    gap: 12px;
    align-items: center;
}

.example-stack {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.example-stack__caption {
    margin: 0 0 4px;
    color: var(--add-text-faint);
    font-size: 0.85rem;
    line-height: 1.45;
}
.example-stack__caption i {
    margin-right: 6px;
    color: var(--add-brand);
    opacity: 0.7;
}

.example-stack__head {
    padding: 4px 14px;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--add-text-faint);
}

.example-stack__add {
    margin-top: 8px;
}

.example-row {
    padding: 12px 14px;
    border: 1px solid var(--add-border);
    border-radius: var(--add-radius);
    background: #fff;
    box-shadow: var(--add-shadow-sm);
}

.example-row__seq-input {
    width: 100% !important;
    padding: 6px 8px !important;
    text-align: center;
    font-size: 0.85rem !important;
}

.example-row__textarea {
    width: 100%;
    min-width: 0;
    min-height: 84px;
    resize: vertical;
    box-sizing: border-box;
}

/* Square icon buttons (T and trash) — same footprint as the # input so the
   row reads as a tidy 5-column strip. */
.example-row__icon-btn {
    width: 38px;
    height: 38px;
    background: #fff;
    border: 1px solid var(--add-border);
    border-radius: var(--add-radius-sm);
    color: var(--add-text-faint);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.12s, color 0.12s, border-color 0.12s;
    padding: 0;
}
.example-row__translate:hover {
    background: rgba(81, 52, 241, 0.08);
    color: var(--add-brand);
    border-color: var(--add-brand);
}
.example-row__delete:hover {
    background: rgba(220, 38, 38, 0.08);
    color: #dc2626;
    border-color: rgba(220, 38, 38, 0.25);
}
.example-row__icon-btn:disabled {
    cursor: not-allowed;
    opacity: 0.4;
}

/* Placeholder cell that occupies the T or trash slot in VIEW mode so the
   grid columns still line up with the EDIT-mode rows above. */
.example-row__btn-slot {
    width: 38px;
    height: 38px;
}

/* View-mode rendered example with the vocab word bolded by
   highlightWordInPassage / highlightWordInPassageLang. */
.example-row__view {
    min-height: 84px;
    padding: 10px 12px;
    border: 1px solid var(--add-border-soft);
    border-radius: var(--add-radius-sm);
    background: #fafafd;
    font-size: 0.92rem;
    line-height: 1.5;
    color: var(--add-text);
}
.example-row__view strong {
    color: var(--add-brand);
}

/* On phone-narrow widths, collapse so the EN textarea + T + JP textarea
   stack vertically instead of squishing to unusable width. */
@media (max-width: 720px) {
    .example-stack__head,
    .example-row {
        grid-template-columns: 60px 1fr 38px;
    }
    /* In narrow mode, JP textarea wraps to a new row spanning EN + T cols. */
    .example-row [data-example-lg] {
        grid-column: 2 / 4;
    }
    .example-row__delete {
        grid-row: 1;
        grid-column: 3;
    }
}

/* ======================================================================
   Vocabulary search — Lesson cell list.
   The Lesson cell now lists every lesson the word appears in. Each lesson
   name is a link to the word in that lesson's context; hovering shows the
   curriculum name in a native browser tooltip via the title attribute.
   ====================================================================== */

.vocab-lesson-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.vocab-lesson-list li {
    line-height: 1.35;
}

.vocab-lesson-list a {
    color: var(--add-text);
    text-decoration: none;
    border-bottom: 1px dotted transparent;
}

.vocab-lesson-list a:hover {
    color: var(--add-brand);
    border-bottom-color: var(--add-brand);
}

/* When the word appears in many lessons, this cell can dominate row height.
   Cap it and scroll so a single word doesn't blow up the whole table row. */
.vocab-lesson-list {
    max-height: 7.5em;
    overflow-y: auto;
}

/* ======================================================================
   Quiz Question Answer Table (esl_addQuizQuestion.php).
   Single-line horizontal layout per answer, matching the original table:
     [# input] [EN textarea] [T btn] [JP textarea] [correct select] [trash btn]
   For TEXT-type answers, layout collapses to: [EN input] [T btn] [JP input].
   ====================================================================== */

/* Shared grid template — kept in sync between the head and data rows so
   columns line up vertically. */
.answer-stack__head,
.answer-stack:not(.answer-stack--text) .answer-row {
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr) 38px minmax(0, 1fr) 100px 38px;
    gap: 10px;
    align-items: center;
}

/* TEXT-type layout: just EN | T | JP */
.answer-stack--text .answer-stack__head,
.answer-stack--text .answer-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 38px minmax(0, 1fr);
    gap: 10px;
    align-items: center;
}

.answer-stack {
    display: flex;
    flex-direction: column;
    gap: 10px;
    /* Soft framed container so the answer table reads as its own section
       inside the form — pale brand tint, brand-color left accent stripe. */
    background: #f4f5fb;
    border: 1px solid var(--add-border-soft);
    border-left: 3px solid var(--add-brand);
    border-radius: var(--add-radius);
    padding: 14px 16px 16px;
    box-shadow: var(--add-shadow-sm);
}

.answer-stack__caption {
    margin: 0 0 4px;
    color: var(--add-text);
    font-size: 0.85rem;
    line-height: 1.45;
    font-weight: 500;
}
.answer-stack__caption i {
    margin-right: 6px;
    color: var(--add-brand);
    opacity: 0.85;
}

.answer-stack__head {
    padding: 4px 14px;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--add-text-faint);
}
.answer-stack__head-cell--center { text-align: center; }

.answer-stack__add { margin-top: 8px; }

.answer-row {
    padding: 12px 14px;
    border: 1px solid var(--add-border);
    border-radius: var(--add-radius);
    background: #fff;
    box-shadow: var(--add-shadow-sm);
}

.answer-row__seq-input {
    width: 100% !important;
    padding: 6px 8px !important;
    text-align: center;
    font-size: 0.85rem !important;
}

.answer-row__textarea {
    width: 100%;
    min-width: 0;
    min-height: 72px;
    resize: vertical;
    box-sizing: border-box;
}

.answer-row__text-input {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

/* Correct? toggle — click-to-flip pill. The actual submitted value lives in
   the hidden f_AnswerCorrectFlag[] input; the visible checkbox is a click
   target whose state we mirror via inline onchange. Pill turns green when on. */
.correct-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    user-select: none;
    position: relative;
    width: 100%;
}

.correct-toggle__checkbox {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
    width: 100%;
    height: 100%;
    margin: 0;
}

.correct-toggle__pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 12px;
    border-radius: 999px;
    border: 1.5px solid var(--add-border);
    background: #fff;
    color: var(--add-text-faint);
    font-size: 0.78rem;
    font-weight: 600;
    transition: background 0.12s, color 0.12s, border-color 0.12s, box-shadow 0.12s;
    white-space: nowrap;
    pointer-events: none;     /* let the checkbox above receive the click */
}

.correct-toggle__pill i {
    font-size: 0.72rem;
    opacity: 0.55;
}

.correct-toggle:hover .correct-toggle__pill {
    border-color: #2f7e3e;
    color: #2f7e3e;
}

/* :has() works in all current evergreen browsers; the project already uses
   it elsewhere (toolbar filter pill in the word-scan modal). */
.correct-toggle:has(.correct-toggle__checkbox:checked) .correct-toggle__pill {
    background: #2f7e3e;
    border-color: #2f7e3e;
    color: #fff;
    box-shadow: 0 1px 2px rgba(47, 126, 62, 0.25);
}

.correct-toggle:has(.correct-toggle__checkbox:checked) .correct-toggle__pill i {
    opacity: 1;
}

.correct-toggle:has(.correct-toggle__checkbox:focus-visible) .correct-toggle__pill {
    outline: 2px solid var(--add-brand);
    outline-offset: 2px;
}

.correct-toggle:has(.correct-toggle__checkbox:disabled) {
    cursor: not-allowed;
}
.correct-toggle:has(.correct-toggle__checkbox:disabled) .correct-toggle__pill {
    opacity: 0.5;
}

/* Square icon buttons */
.answer-row__icon-btn {
    width: 38px;
    height: 38px;
    background: #fff;
    border: 1px solid var(--add-border);
    border-radius: var(--add-radius-sm);
    color: var(--add-text-faint);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.12s, color 0.12s, border-color 0.12s;
    padding: 0;
}
.answer-row__translate:hover {
    background: rgba(81, 52, 241, 0.08);
    color: var(--add-brand);
    border-color: var(--add-brand);
}
.answer-row__delete:hover {
    background: rgba(220, 38, 38, 0.08);
    color: #dc2626;
    border-color: rgba(220, 38, 38, 0.25);
}
.answer-row__icon-btn:disabled { cursor: not-allowed; opacity: 0.4; }

/* VIEW-mode placeholder cell that keeps the grid columns lined up where the
   translate/delete buttons would otherwise sit. */
.answer-row__btn-slot {
    width: 38px;
    height: 38px;
}

/* Narrow viewports — collapse the multi-answer grid so the row stays usable.
   JP textarea wraps under EN, dropdown and trash share a small row. */
@media (max-width: 720px) {
    .answer-stack:not(.answer-stack--text) .answer-stack__head,
    .answer-stack:not(.answer-stack--text) .answer-row {
        grid-template-columns: 56px 1fr 38px;
    }
    .answer-row [data-answer-lg] { grid-column: 2 / 4; }
    .answer-row__correct        { grid-column: 1 / 3; }
    .answer-row__delete         { grid-column: 3; }
}

/* Schedule (teacher availability) — reuses the .answer-stack container chrome
   but row layout is three equal dropdowns + delete button.
   - Higher specificity than the generic answer-stack rule so it wins the grid.
   - Row chrome dropped: no per-row border/shadow/padding so stacked time blocks
     read as a unified list, not separate cards.
   - Head cells get padding-left: 12px to match the select's internal padding,
     keeping labels visually aligned with the dropdown text below them. */
.answer-stack.answer-stack--schedule .answer-stack__head,
.answer-stack.answer-stack--schedule .answer-row {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) 38px;
}
.answer-stack.answer-stack--schedule .answer-stack__head-cell {
    padding-left: 12px;
}
.answer-stack.answer-stack--schedule .answer-row {
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 0;
}
@media (max-width: 720px) {
    .answer-stack.answer-stack--schedule .answer-stack__head,
    .answer-stack.answer-stack--schedule .answer-row {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 38px;
    }
    .answer-stack.answer-stack--schedule .answer-row select:nth-of-type(3) {
        grid-column: 1 / 3;
    }
    .answer-stack.answer-stack--schedule .answer-row .answer-row__delete,
    .answer-stack.answer-stack--schedule .answer-row .answer-row__btn-slot {
        grid-column: 3;
    }
}

/* ======================================================================
   Passage pair — two side-by-side scrollable text blocks (EN + JP) used at
   the bottom of esl_addVocabulary.php and esl_addQuizQuestion.php for the
   highlighted-passage previews. Collapses to a single column on phones so
   each pane stays readable instead of squishing to <200px.
   ====================================================================== */

.passage-pair {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 16px;
    padding: 0 20px 18px;
}

@media (max-width: 720px) {
    .passage-pair { grid-template-columns: 1fr; }
}

.passage-pair__col {
    min-width: 0;     /* let textareas/long passages shrink past intrinsic min */
}

.passage-pair__label {
    margin: 0 0 6px;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--add-text-faint);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.passage-pair__body {
    padding: 12px 14px;
    border: 1px solid var(--add-border-soft);
    border-radius: var(--add-radius-sm);
    background: #fff;
    font-size: 0.9rem;
    line-height: 1.55;
    max-height: 360px;
    overflow-y: auto;
}

/* ======================================================================
   Full-data-set report (esl_getFullDataSet.php) — small type badge for
   rows so the Curriculum / Lesson / Vocabulary distinction is obvious
   at a glance.
   ====================================================================== */

.fds-type-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 600;
    border: 1px solid var(--add-border);
    background: #fff;
    color: var(--add-text-faint);
    white-space: nowrap;
}

.fds-type-pill i {
    font-size: 0.78rem;
    opacity: 0.85;
}

.fds-type-pill.is-curriculum {
    color: #6f42c1;
    border-color: rgba(111, 66, 193, 0.35);
    background: rgba(111, 66, 193, 0.07);
}
.fds-type-pill.is-lesson {
    color: #1d4ed8;
    border-color: rgba(29, 78, 216, 0.35);
    background: rgba(29, 78, 216, 0.07);
}
.fds-type-pill.is-vocabulary {
    color: #15803d;
    border-color: rgba(21, 128, 61, 0.35);
    background: rgba(21, 128, 61, 0.07);
}

/* ======================================================================
   Page-table group header — a full-width row that visually separates
   groups of data rows (e.g. staged words grouped by lesson). Used by
   esl_getStagedWordDataSet.php and reusable on any page-table that
   wants to group rows.
   ====================================================================== */

.page-table tbody tr.page-table__group td {
    background: linear-gradient(to right, rgba(81, 52, 241, 0.08), rgba(81, 52, 241, 0.02));
    border-top: 1px solid rgba(81, 52, 241, 0.18);
    border-bottom: 1px solid rgba(81, 52, 241, 0.12);
    padding: 8px 14px;
}

.page-table tbody tr.page-table__group:first-child td {
    border-top: none;
}

.page-table__group-name {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 700;
    color: var(--add-brand);
    font-size: 0.92rem;
}

.page-table__group-name i {
    font-size: 0.85rem;
    opacity: 0.85;
}

.page-table__group-meta {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-left: 12px;
    color: var(--add-text-faint);
    font-size: 0.82rem;
    font-weight: 500;
}

.page-table__group-meta i {
    font-size: 0.76rem;
    opacity: 0.7;
}

.page-table__group-count {
    float: right;
    background: var(--add-brand);
    color: #fff;
    padding: 2px 9px;
    border-radius: 999px;
    font-size: 0.74rem;
    font-weight: 700;
    line-height: 1.5;
}

/* ======================================================================
   AI Generation modal (aiGenerateModal on esl_addLesson.php).
   ====================================================================== */

.ai-gen {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 16px;
    padding: 14px 16px;
    border: 1px solid var(--add-border-soft);
    border-left: 3px solid var(--add-brand);
    border-radius: var(--add-radius-sm);
    background: #f7f8fc;
    margin-bottom: 12px;
}

.ai-gen__count {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.ai-gen__cta {
    margin-left: auto;
}

/* ======================================================================
   Print Lesson modal — pickers for the include-translations,
   include-teacher-notes, and mark-correct-answers options. Each option
   is a small card with an icon + hint + Yes/No pill toggle.
   ====================================================================== */

.print-opts {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-bottom: 8px;
}

.print-opt {
    padding: 12px 14px;
    border: 1px solid var(--add-border-soft);
    border-left: 3px solid var(--add-brand);
    border-radius: var(--add-radius-sm);
    background: #f7f8fc;
}

.print-opt__label {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 4px;
    font-weight: 600;
    font-size: 0.92rem;
    color: var(--add-text);
}

.print-opt__label i {
    color: var(--add-brand);
    opacity: 0.85;
    font-size: 0.95rem;
}

.print-opt__hint {
    margin: 0 0 10px;
    color: var(--add-text-faint);
    font-size: 0.82rem;
    line-height: 1.4;
}

.print-opt__choices {
    display: inline-flex;
    gap: 6px;
}

.print-opt__pill {
    position: relative;
    display: inline-flex;
    cursor: pointer;
    user-select: none;
}

.print-opt__pill input[type="radio"] {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
    margin: 0;
}

.print-opt__pill span {
    display: inline-block;
    padding: 5px 18px;
    border: 1.5px solid var(--add-border);
    border-radius: 999px;
    background: #fff;
    color: var(--add-text-faint);
    font-size: 0.82rem;
    font-weight: 600;
    transition: background 0.12s, color 0.12s, border-color 0.12s, box-shadow 0.12s;
    pointer-events: none;
}

.print-opt__pill:hover span {
    border-color: var(--add-brand);
    color: var(--add-brand);
}

.print-opt__pill:has(input:checked) span {
    background: var(--add-brand);
    border-color: var(--add-brand);
    color: #fff;
    box-shadow: 0 1px 2px rgba(81, 52, 241, 0.25);
}

.print-opt__pill:has(input:focus-visible) span {
    outline: 2px solid var(--add-brand);
    outline-offset: 2px;
}

/* ── Furigana badge + hover preview + click-to-edit override (esl_addVocabulary) ──
   The phonetics fields are hidden by default (raw ruby markup isn't worth
   showing). This badge confirms a reading was generated, renders it on hover,
   and reveals an editable field on click so a wrong reading can be hand-fixed. */
.furigana-control { margin-top: 8px; }

.furigana-badge {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border: 1px solid var(--add-border-soft);
    border-radius: 999px;
    background: var(--add-card);
    color: var(--add-text-faint);
    font-size: 0.8rem;
    cursor: pointer;
    transition: background .15s, border-color .15s, color .15s;
}
.furigana-badge i { font-size: .78rem; }
.furigana-badge:hover { border-color: var(--add-brand); }

/* Inline-in-label variant — smaller, sits next to the field's prompt text. */
.furigana-badge--inline {
    margin-left: 8px;
    padding: 1px 8px;
    font-size: .66rem;
    font-weight: 600;
    vertical-align: middle;
    text-transform: none;
    letter-spacing: normal;
}
.furigana-badge--inline i { font-size: .66rem; }
.furigana-badge.is-ready {
    color: var(--add-success);
    border-color: var(--add-success-border);
    background: var(--add-success-bg);
}
.furigana-badge.is-empty { color: var(--add-text-faint); }

/* Hover preview — renders the actual ruby so the teacher sees what students see. */
.furigana-tooltip {
    position: absolute;
    bottom: calc(100% + 8px);
    left: 0;
    min-width: 120px;
    max-width: 460px;
    padding: 8px 12px;
    border-radius: var(--add-radius-sm);
    background: #1f2937;
    color: #fff;
    font-size: 1.15rem;
    line-height: 2.1;
    text-align: left;
    box-shadow: var(--add-shadow-md);
    opacity: 0;
    visibility: hidden;
    transition: opacity .15s;
    z-index: 60;
    pointer-events: none;
}
.furigana-badge.is-ready:hover .furigana-tooltip { opacity: 1; visibility: visible; }
.furigana-tooltip:empty { display: none; }
.furigana-tooltip rt { font-size: .58em; color: #cbd5e1; font-weight: 600; }

/* Click-to-edit override field (raw ruby markup). */
.furigana-editor { margin-top: 10px; }
.furigana-editor__label {
    display: block;
    margin-bottom: 4px;
    font-size: .78rem;
    color: var(--add-text-faint);
}
.furigana-editor .form-field__input {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, monospace;
    font-size: .82rem;
}
.furigana-editor textarea.form-field__input { min-height: 56px; }

/* Example-row furigana — simple round "F" indicator stacked under the trash icon. */
.example-row__actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}
.furigana-fbadge {
    position: relative;
    width: 22px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--add-border-soft);
    border-radius: 50%;
    background: var(--add-card);
    color: var(--add-text-faint);
    font-size: .72rem;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    transition: background .15s, border-color .15s, color .15s;
}
.furigana-fbadge:hover { border-color: var(--add-brand); }
.furigana-fbadge--readonly { cursor: default; }   /* view mode — indicator + hover preview only */
.furigana-fbadge.is-ready {
    color: var(--add-success);
    border-color: var(--add-success-border);
    background: var(--add-success-bg);
}
.furigana-fbadge.is-ready:hover .furigana-tooltip { opacity: 1; visibility: visible; }
/* Anchor the preview to the badge's right edge — it sits at the row's far right. */
.furigana-fbadge .furigana-tooltip { left: auto; right: 0; }

.example-row__furigana-editor { grid-column: 1 / -1; margin-top: 6px; }

/* ── Lesson Level (CEFR) side panel ──────────────────────────────────────────
   AI-suggested + teacher-confirmed reading level. Added 2026-07-02 (v6). */
.ll-panel { display: flex; flex-direction: column; gap: 10px; }
.ll-current { display: flex; align-items: center; gap: 8px; font-size: 0.9rem; }
.ll-current__label { color: #555; }
.ll-current__badge {
    display: inline-block;
    min-width: 34px;
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--add-brand, #5134F1);
    color: #fff;
    font-weight: 700;
    font-size: 0.85rem;
    text-align: center;
    line-height: 1.4;
}
.ll-analyze { align-self: flex-start; }
.ll-analyze i { margin-right: 4px; }

.ll-result {
    border-top: 1px solid #eee;
    padding-top: 10px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.ll-result__headline { font-size: 0.9rem; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.ll-conf { color: #777; font-size: 0.82rem; }
.ll-rationale { margin: 0; font-size: 0.85rem; color: #444; line-height: 1.4; }

.ll-metrics { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.ll-metrics li { display: flex; justify-content: space-between; gap: 10px; font-size: 0.82rem; }
.ll-metrics__k { color: #666; }
.ll-metrics__v { color: #222; font-weight: 600; text-align: right; }

.ll-set { display: flex; align-items: center; gap: 8px; font-size: 0.88rem; margin-top: 2px; }
.ll-set__label { color: #555; }
.ll-select {
    padding: 4px 8px;
    border: 1px solid #ccc;
    border-radius: 6px;
    font-size: 0.9rem;
    background: #fff;
}
.ll-save { align-self: flex-start; }
.ll-save i { margin-right: 4px; }
.ll-help {
    margin: 0;
    font-size: 0.78rem;
    color: #777;
    line-height: 1.4;
    background: #f7f7fb;
    border-left: 3px solid var(--add-brand, #5134F1);
    padding: 6px 10px;
    border-radius: 4px;
}
.ll-help i { color: var(--add-brand, #5134F1); margin-right: 4px; }

/* ── Proofread Passage (AI) — advisory issue list ────────────────────────────
   Added 2026-07-02 (v6). Brand accent #5134F1. */
.pr-panel { display: flex; flex-direction: column; gap: 10px; }
.pr-run { align-self: flex-start; }
.pr-run i { margin-right: 4px; }

.pr-result { border-top: 1px solid #eee; padding-top: 10px; }
.pr-summary { margin: 0 0 8px; font-size: 0.9rem; font-weight: 600; }
.pr-summary--clean { color: #18823e; }
.pr-summary--clean i { margin-right: 4px; }
.pr-summary--issues { color: #b45309; }

.pr-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.pr-issue {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 4px 10px;
    align-items: baseline;
    padding: 8px 10px;
    background: #faf9ff;
    border: 1px solid #ece9fb;
    border-left: 3px solid #5134F1;
    border-radius: 6px;
    font-size: 0.85rem;
}
.pr-issue__type {
    grid-row: 1;
    align-self: start;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    padding: 2px 7px;
    border-radius: 999px;
    color: #fff;
    white-space: nowrap;
}
.pr-issue__type--spelling    { background: #dc2626; }
.pr-issue__type--grammar     { background: #5134F1; }
.pr-issue__type--punctuation { background: #0d9488; }
.pr-issue__type--clarity     { background: #b45309; }
.pr-issue--spelling    { border-left-color: #dc2626; }
.pr-issue--punctuation { border-left-color: #0d9488; }
.pr-issue--clarity     { border-left-color: #b45309; }

.pr-issue__body { grid-column: 2; display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; }
.pr-issue__quote { color: #b91c1c; text-decoration: line-through; text-decoration-color: rgba(185,28,28,0.4); }
.pr-issue__arrow { color: #999; }
.pr-issue__fix { color: #14211a; font-weight: 600; }
.pr-issue__note { grid-column: 2; color: #6b7280; font-size: 0.78rem; line-height: 1.4; }

.pr-truncated { list-style: none; color: #6b7280; font-size: 0.8rem; margin-top: 8px; }
.pr-truncated i { margin-right: 4px; color: #5134F1; }

/* Proofread panel — EDIT-mode, sits directly under the passage editor. 2026-07-02 */
.pr-panel { margin-top: 10px; padding-top: 10px; border-top: 1px dashed #d9d5f5; }
.pr-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.pr-hint { font-size: 0.8rem; color: #6b7280; }
.pr-result { margin-top: 10px; }

/* Clickable rows (click the text to jump to it in the editor) + Apply button. */
.pr-issue { grid-template-columns: auto 1fr auto; cursor: default; }
.pr-issue__body { grid-column: 2; cursor: pointer; }
.pr-issue__body:hover .pr-issue__quote { text-decoration-thickness: 2px; }
.pr-issue__apply {
    grid-column: 3;
    grid-row: 1;
    align-self: center;
    white-space: nowrap;
    font-size: 0.72rem;
    font-weight: 700;
    padding: 3px 10px;
    border: 1px solid var(--add-brand, #5134F1);
    border-radius: 999px;
    background: #fff;
    color: var(--add-brand, #5134F1);
    cursor: pointer;
    transition: background 0.12s ease, color 0.12s ease;
}
.pr-issue__apply:hover:not(:disabled) { background: var(--add-brand, #5134F1); color: #fff; }
.pr-issue__apply:disabled { border-color: #cbd5e1; color: #94a3b8; cursor: default; }
/* Revert state (cycle phase 2) — amber, "click to undo the applied change". */
.pr-issue__apply--revert { border-color: #b45309; color: #b45309; }
.pr-issue__apply--revert:hover:not(:disabled) { background: #b45309; color: #fff; }

.pr-issue.is-active { box-shadow: 0 0 0 2px rgba(81,52,241,0.35); }
/* Applied (cycle phase 2) — subtle green "changed" tint, not a heavy dim. */
.pr-issue.is-applied { background: #f0faf4; border-color: #cdeeda; border-left-color: #18823e; }
.pr-issue--notfound { border-left-color: #b45309 !important; }
.pr-issue__note--warn { color: #b45309; }

/* Eiken (英検) equivalent pill in the lesson-level panel. 2026-07-03 */
.ll-current__eiken {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 700;
    color: #0f766e;
    background: #ccfbf1;
    padding: 1px 8px;
    border-radius: 999px;
}

/* Series level roll-up suggestion (from lessons' CEFR bands). 2026-07-03 */
.cl-rollup {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 8px;
    padding: 8px 12px;
    background: #faf9ff;
    border: 1px solid #ece9fb;
    border-left: 3px solid var(--add-brand, #5134F1);
    border-radius: 6px;
    font-size: 0.85rem;
    color: #444;
}
.cl-rollup__icon { color: var(--add-brand, #5134F1); }
.cl-rollup__tier { color: var(--add-brand, #5134F1); }
.cl-rollup__meta { color: #6b7280; font-size: 0.8rem; }
.cl-rollup__apply { margin-left: auto; }

/* Grammar catalog list + example repeater. 2026-07-03 */
.gr-filterbar { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin: 0 0 18px; }
.gr-results__count { color: #6b7280; font-size: 0.85rem; margin: 0 0 8px; }
.gr-results__empty { color: #6b7280; padding: 24px; text-align: center; }
.gr-examples { display: flex; flex-direction: column; gap: 8px; }
.gr-example-row { display: flex; gap: 10px; flex-wrap: wrap; }
.gr-example-row input { flex: 1 1 220px; }
.form-field__hint { font-size: 0.8rem; color: #6b7280; margin: 2px 0 8px; }
.gr-example-row .gr-ex-tr { flex: 0 0 auto; align-self: center; }

/* "Grammar in this lesson" attach panel. 2026-07-03 */
.gr-attach { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.gr-attach select { flex: 1 1 auto; min-width: 0; }
.gr-attach__btn { flex: 0 0 auto; }

/* Typeahead search picker (replaces the category <select>). */
.gr-attach__search { position: relative; }
.gr-attach__icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--add-text-faint); font-size: 0.85rem; pointer-events: none; }
.gr-attach__input { width: 100%; padding-left: 32px !important; }
.gr-attach__results {
    position: absolute; z-index: 20; left: 0; right: 0; top: calc(100% + 4px);
    max-height: 260px; overflow-y: auto;
    background: #fff; border: 1px solid var(--add-border); border-radius: 10px;
    box-shadow: 0 8px 22px rgba(17, 12, 46, 0.12); padding: 4px;
}
.gr-attach__result {
    display: flex; align-items: baseline; gap: 8px; width: 100%; text-align: left;
    background: none; border: 0; cursor: pointer; padding: 7px 9px; border-radius: 7px; color: var(--add-text);
}
.gr-attach__result:hover { background: var(--add-border-soft); }
.gr-attach__result-name { font-weight: 600; }
.gr-attach__result-cat { font-size: 0.78rem; color: var(--add-text-faint); margin-left: auto; }
.gr-attach__none { padding: 8px 10px; color: var(--add-text-faint); font-size: 0.9rem; }

/* AI "suggest from passage" → clickable chips. */
.gr-suggest { display: flex; flex-wrap: wrap; gap: 6px; }
.gr-suggest__chip {
    display: inline-flex; align-items: center; gap: 5px;
    background: #f3f0ff; border: 1px solid #d9d0ff; color: #4c34c9;
    font-size: 0.82rem; font-weight: 600; padding: 4px 10px; border-radius: 999px; cursor: pointer;
}
.gr-suggest__chip:hover { background: #4c34c9; border-color: #4c34c9; color: #fff; }
.gr-suggest__chip:disabled { opacity: 0.5; cursor: default; }
.gr-suggest__none { color: var(--add-text-faint); font-size: 0.85rem; }

.gr-attached { display: flex; align-items: center; gap: 6px; }
.gr-attached .mini-list__link { flex: 1 1 auto; min-width: 0; }
.gr-attached__remove { flex: 0 0 auto; background: none; border: none; color: #b91c1c; font-size: 1.15rem; line-height: 1; cursor: pointer; padding: 2px 7px; border-radius: 4px; }
.gr-attached__remove:hover { background: #fee2e2; }

/* ── Practice Quiz card (grammar cloze) ──────────────────────────────────────
   Added 2026-07-26 (v6). Brand accent #5134F1. */
.gq-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 12px; }
.gq-empty { margin: 0 0 12px; font-size: 0.88rem; color: #777; }
.gq-item {
    padding: 10px 12px; background: #faf9ff; border: 1px solid #ece9fb;
    border-left: 3px solid #5134F1; border-radius: 6px;
}
.gq-item__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 5px; }
.gq-item__n { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; color: #5134F1; }
.gq-item__tools { display: flex; gap: 4px; }
.gq-icon { background: none; border: none; cursor: pointer; color: #6b6b7b; font-size: 0.9rem; padding: 3px 6px; border-radius: 4px; }
.gq-icon:hover { background: #ece9fb; color: #5134F1; }
.gq-icon--danger:hover { background: #fee2e2; color: #b91c1c; }
.gq-item__prompt { margin: 0 0 8px; font-size: 0.95rem; line-height: 1.5; color: #222; }
.gq-blank { display: inline-block; border-bottom: 2px solid #5134F1; min-width: 60px; }
.gq-item__opts { display: flex; flex-wrap: wrap; gap: 6px; }
.gq-opt { font-size: 0.82rem; padding: 3px 10px; border-radius: 999px; background: #fff; border: 1px solid #d9d5f2; color: #555; }
.gq-opt--correct { background: #eaf7ee; border-color: #18823e; color: #18823e; font-weight: 600; }
.gq-opt--correct i { margin-right: 3px; }
.gq-item__hint { margin: 8px 0 0; font-size: 0.8rem; color: #777; }
.gq-toolbar { display: flex; flex-wrap: wrap; gap: 8px; }

/* inline editor */
.gq-item--edit { display: flex; flex-direction: column; gap: 8px; }
.gq-f { display: flex; flex-direction: column; gap: 3px; }
.gq-f__l { font-size: 0.75rem; font-weight: 600; color: #555; }
.gq-f__i, .gq-f__t { width: 100%; padding: 7px 9px; border: 1px solid #ccc; border-radius: 6px; font-size: 0.9rem; background: #fff; font-family: inherit; }
.gq-f__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.gq-f__grid--2 { grid-template-columns: repeat(2, 1fr); }
.gq-editbtns { display: flex; gap: 8px; margin-top: 2px; }
@media (max-width: 640px) { .gq-f__grid { grid-template-columns: 1fr; } }

/* ── Review with AI (grammar / idiom advisory issues) ────────────────────────
   Added 2026-07-26 (v6). Brand accent #5134F1. */
.cr-panel { display: flex; flex-direction: column; gap: 10px; }
.cr-run { align-self: flex-start; }
.cr-run i { margin-right: 4px; }
.cr-result { border-top: 1px solid #eee; padding-top: 10px; }
.cr-summary { margin: 0 0 8px; font-size: 0.9rem; font-weight: 600; }
.cr-summary--clean { color: #18823e; }
.cr-summary--clean i { margin-right: 4px; }
.cr-summary--issues { color: #b45309; }
.cr-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.cr-issue {
    display: grid; grid-template-columns: auto 1fr; gap: 4px 10px; align-items: baseline;
    padding: 8px 10px; background: #faf9ff; border: 1px solid #ece9fb;
    border-left: 3px solid #5134F1; border-radius: 6px; font-size: 0.85rem;
}
.cr-issue__aspect {
    grid-row: 1; align-self: start;
    font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em;
    padding: 2px 7px; border-radius: 999px; color: #fff; white-space: nowrap;
}
.cr-issue--clarity  .cr-issue__aspect { background: #5134F1; }
.cr-issue--example  .cr-issue__aspect { background: #0d9488; }
.cr-issue--accuracy .cr-issue__aspect { background: #dc2626; }
.cr-issue--level    .cr-issue__aspect { background: #e0912f; }
.cr-issue--japanese .cr-issue__aspect { background: #7a4fd0; }
.cr-issue__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cr-issue__quote { font-style: italic; color: #666; }
.cr-issue__fix { color: #222; }
.cr-issue__note { font-size: 0.78rem; color: #777; }

/* ── Word Scan: multi-word vocab phrases + idioms-found section ───────────────
   Added 2026-07-26 (v6). */
.ws-chip--phrase { border-style: dashed; font-style: italic; }

/* Idiom chips — rendered inline with the words, distinct purple scheme.
   Thick left border like the other "special" chip states; filled when the
   idiom is attached to the lesson. */
.ws-chip--idiom {
    color: #4a3aa0;
    border: 1px solid #c9bef0;
    border-left-width: 4px;
    padding-left: 9px;
}
.ws-chip--idiom:hover {
    background: #f3f0fb;
    color: #4a3aa0;
    border-color: #5134F1;
}
.ws-chip--idiom.is-attached {
    background: #5134F1;
    border-color: #5134F1;
    color: #fff;
}
.ws-chip--idiom.is-attached:hover {
    background: #4429d6;
    color: #fff;
}
.ws-chip--idiom.is-attached .ws-chip__count {
    background: rgba(255, 255, 255, 0.22);
    color: #fff;
}
.ws-chip__idiomicon { font-size: 0.72rem; }

/* Live duplicate warning on the add/edit idiom page (2026-07-27, v6). */
.idiom-dup-warn { color: #c0392b; font-weight: 600; font-size: 0.85rem; margin: 6px 0 0; }
.idiom-dup-warn a { color: #5134F1; text-decoration: underline; }
.form-field__input.is-dup { border-color: #c0392b; }
.form-field__input.is-dup:focus { border-color: #c0392b; box-shadow: 0 0 0 3px rgba(192, 57, 43, 0.15); }

/* Teacher-applied text colors in grammar/idiom rich prose (2026-07-27, v6).
   Matches the editor content_style + student ViewLesson.css. */
.rt-red   { color: #c0392b; }
.rt-green { color: #1e7e34; }
.rt-blue  { color: #1565c0; }