/**
 * LumorowLMS — Unscramble the Sentence styles
 *
 * Wider container than the Duolingo phone screenshot — the block uses the
 * full width of its parent column (capped at 860px so very wide layouts
 * don't get awkward) and the word tiles flow on multiple rows.
 *
 * Editor preview reuses the same look so the admin can eyeball the level
 * of difficulty without leaving Gutenberg.
 */

/* ─── Block container ─────────────────────────────────────── */
.llmsb-uss-block {
    font-family: inherit;
    max-width: 860px;
    margin: 0 0 2rem;
    padding: 20px 22px 22px;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}

.llmsb-uss-title {
    font-size: 1.35rem;
    font-weight: 800;
    color: #1c1c1c;
    margin: 0 0 12px;
    line-height: 1.25;
}

.llmsb-uss-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    font-size: 0.85rem;
    color: var(--llmsb-muted, #6b7280);
    margin-bottom: 4px;
}
.llmsb-uss-progress { font-weight: 600; }
.llmsb-uss-activity-tag {
    background: var(--llmsb-primary-pale, #fef6ea);
    color: var(--llmsb-primary-dk, #c45a04);
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .3px;
}

.llmsb-uss-instruction {
    font-size: 1rem;
    color: #1c1c1c;
    background: var(--llmsb-primary-pale, #fef6ea);
    border-left: 4px solid var(--llmsb-primary-mid, var(--llmsb-primary, #f78b33));
    padding: 12px 14px;
    border-radius: 0 8px 8px 0;
    margin: 10px 0 18px;
    line-height: 1.5;
}

/* ─── Sentence build area (placed words) ─────────────────── */
.llmsb-uss-sentence {
    min-height: 80px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    align-content: flex-start;
    padding: 14px 16px;
    background: #f9fafb;
    border: 2px dashed #d1d5db;
    border-radius: 10px;
    margin-bottom: 18px;
    transition: border-color 0.2s, background 0.2s;
}
.llmsb-uss-sentence:has(.llmsb-uss-tile) {
    border-style: solid;
    border-color: var(--llmsb-primary, #f77205);
    background: #fff;
}
.llmsb-uss-sentence-placeholder {
    color: #9ca3af;
    font-style: italic;
    font-size: 0.92rem;
}

/* ─── Word bank ──────────────────────────────────────────── */
.llmsb-uss-bank {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 6px 0 4px;
    margin-bottom: 18px;
    border-top: 1px solid #e5e7eb;
    padding-top: 18px;
}

/* ─── Tile button ────────────────────────────────────────── */
.llmsb-uss-tile {
    background: #fff;
    color: #1c1c1c;
    border: 1px solid #d1d5db;
    border-bottom-width: 2px;
    border-radius: 8px;
    padding: 9px 16px;
    font-size: 0.98rem;
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
    line-height: 1.2;
    box-shadow: 0 1px 0 #e5e7eb;
    transition: transform 0.08s ease, border-color 0.15s, box-shadow 0.15s, background 0.15s;
    user-select: none;
}
.llmsb-uss-tile:hover:not(:disabled) {
    border-color: var(--llmsb-primary, #f77205);
    background: var(--llmsb-primary-pale, #fef6ea);
}
.llmsb-uss-tile:active:not(:disabled) {
    transform: translateY(1px);
    box-shadow: none;
}
.llmsb-uss-tile.used {
    /* Ghost placeholder so the bank's layout doesn't reflow when a
       tile is placed in the sentence — same width, faded. */
    background: transparent !important;
    color: transparent !important;
    border-color: transparent !important;
    border-bottom-color: #e5e7eb !important;
    box-shadow: none;
    cursor: default;
}
.llmsb-uss-tile.placed {
    border-color: var(--llmsb-primary, #f77205);
    background: #fff;
}
.llmsb-uss-tile.placed:hover {
    background: #fff5e8;
}

/* ─── Action buttons (Continue + secondary Clear) ─────────
   Continue is the primary action: centered, primary color, matches
   the shared `.llmsb-seq-continue` standard exactly (same padding,
   weight, font, no uppercase, no letter-spacing — so a multi-block
   page doesn't show two cosmetically different "Continue" buttons).
   Clear is a quiet secondary action shown ABOVE the Continue, small
   and text-styled, only visible once the student has placed any tile. */
.llmsb-uss-controls {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    margin-top: 18px;
}
.llmsb-uss-clear {
    background: transparent;
    color: var(--llmsb-muted, #6b7280);
    border: none;
    padding: 4px 10px;
    font-size: 0.82rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 3px;
    transition: color 0.15s;
    order: 2;   /* render BELOW the Continue button */
}
.llmsb-uss-clear:hover:not(:disabled) { color: var(--llmsb-primary, #f77205); }
.llmsb-uss-clear:disabled {
    opacity: 0;             /* invisible until the student has placed something */
    pointer-events: none;
}
.llmsb-uss-submit {
    display: block;
    margin: 0 auto;
    background: var(--llmsb-primary, #f77205) !important;
    color: #fff !important;
    border: none;
    border-radius: 8px;
    padding: 10px 36px;
    font-size: 0.95rem;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    transition: filter 0.15s, opacity 0.15s;
    order: 1;   /* render ABOVE the Clear button */
}
.llmsb-uss-submit:hover:not(:disabled) { filter: brightness(.9); }
.llmsb-uss-submit:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

/* ─── Results table (revealed by Check Answers) ──────────── */
.llmsb-uss-results {
    margin-top: 14px;
}
.llmsb-uss-results-title {
    font-size: 1rem;
    font-weight: 700;
    color: #1c1c1c;
    margin: 8px 0 8px;
}
.llmsb-uss-results-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}
.llmsb-uss-results-table th,
.llmsb-uss-results-table td {
    padding: 8px 10px;
    border-bottom: 1px solid #f3f4f6;
    text-align: left;
    vertical-align: top;
}
.llmsb-uss-results-table th {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--llmsb-muted, #6b7280);
    font-weight: 700;
    border-bottom: 2px solid #e5e7eb;
}
.llmsb-uss-results-table td.n { width: 32px; color: var(--llmsb-muted, #6b7280); font-weight: 600; }
.llmsb-uss-results-table td.mark { width: 28px; text-align: center; font-size: 1.05rem; }
.llmsb-uss-results-table tr.ok td.mark { color: var(--llmsb-correct, #16a34a); }
.llmsb-uss-results-table tr.no td.mark { color: var(--llmsb-wrong,   #dc2626); }
.llmsb-uss-results-table td.you em { color: var(--llmsb-muted, #9ca3af); }

/* ─── Editor preview ─────────────────────────────────────── */
.llmsb-uss-editor {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: 16px 16px 18px;
    margin-bottom: 16px;
}
.llmsb-uss-editor-header {
    font-size: 1rem;
    font-weight: 700;
    color: #1c1c1c;
    margin-bottom: 8px;
}
.llmsb-uss-editor-meta {
    display: flex;
    gap: 18px;
    flex-wrap: wrap;
    font-size: 0.82rem;
    color: var(--llmsb-muted, #6b7280);
    margin-bottom: 10px;
}
.llmsb-uss-editor-meta strong { color: #1c1c1c; }
.llmsb-uss-editor-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}
.llmsb-uss-editor-help {
    font-size: 0.84rem;
    color: var(--llmsb-muted, #6b7280);
    margin: 0 0 12px;
    line-height: 1.4;
}
.llmsb-uss-editor-preview {
    margin-top: 6px;
    border-top: 1px solid #f3f4f6;
    padding-top: 12px;
}
.llmsb-uss-editor-empty {
    font-size: 0.9rem;
    color: var(--llmsb-muted, #6b7280);
    padding: 12px 14px;
    background: #f9fafb;
    border-radius: 6px;
}
.llmsb-uss-editor-empty-act {
    font-size: 0.85rem;
    color: var(--llmsb-muted, #9ca3af);
    padding: 6px 0;
    font-style: italic;
}
.llmsb-uss-editor-act { margin-bottom: 10px; }
.llmsb-uss-editor-act-head {
    font-size: 0.88rem;
    margin-bottom: 4px;
}
.llmsb-uss-editor-act-meta {
    color: var(--llmsb-muted, #6b7280);
    font-size: 0.78rem;
    margin-left: 4px;
}
.llmsb-uss-editor-sentence-list {
    margin: 4px 0 6px 22px;
    padding: 0;
    font-size: 0.85rem;
    color: #1c1c1c;
}
.llmsb-uss-editor-sentence-list li { margin-bottom: 2px; line-height: 1.4; }
.llmsb-uss-editor-more {
    color: var(--llmsb-muted, #9ca3af) !important;
    font-style: italic;
    font-size: 0.78rem !important;
}

/* ─── Mobile tweaks ─────────────────────────────────────── */
@media (max-width: 640px) {
    .llmsb-uss-block { padding: 16px 14px 18px; }
    .llmsb-uss-tile  { padding: 8px 12px; font-size: 0.94rem; }
    .llmsb-uss-controls { gap: 6px; }
    .llmsb-uss-submit { width: 100%; }
    .llmsb-uss-clear  { font-size: 0.8rem; }
    .llmsb-uss-results-table { font-size: 0.84rem; }
    .llmsb-uss-results-table th, .llmsb-uss-results-table td { padding: 6px 6px; }
}