/* Layout for the grammar practice page (GrammarPractice.razor → GrammarPracticePageView).
   Lives in a non-isolated stylesheet because Blazor CSS isolation scopes `.razor.css`
   rules to a single component, and the page's markup is split across an RCL component
   and its per-host page wrappers.

   The page renders the full `GrammarReferenceView` card (level chip + title + form +
   use-cases + examples + pitfall) and below it a "Practice" CTA that opens the runner
   in a modal. Page chrome is just the back button.

   (The curriculum-node intro page shared these rules until #1235, when the home deck
   moved to recommending topics and that page was removed.) */

.gpr-page {
    max-width: var(--w-readable);
    margin: 0 auto;
    padding: var(--space-3) var(--space-4) var(--space-16);
}

.gpr-back {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: transparent;
    border: 1px solid var(--card-border);
    color: var(--text-secondary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background var(--transition), color var(--transition);
}
.gpr-back:hover {
    background: var(--card-hover);
    color: var(--text);
}

/* GrammarPractice has only the back button — give it spacing without a row wrapper. */
.gpr-back--floating {
    margin-bottom: var(--space-4);
}

.gpr-loading {
    display: flex;
    justify-content: center;
    padding: var(--space-10) 0;
}

.gpr-empty {
    text-align: center;
    color: var(--text-secondary);
    padding: var(--space-10) 0;
}

/* ── Practice CTA + modal (GrammarPractice.razor, #136) ──────────────────────
   The reference page opens practice in a fixed-layout modal instead of an inline
   block so the question / input / Check stay put as the answer reveals (inline,
   the page grew on every answer and forced a scroll back to the input). */
.gpr-practice-cta {
    margin-top: var(--space-6);
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-4);
    border: none;
    border-radius: var(--radius);
    background: var(--button-bg, var(--accent));
    color: var(--button-text, #fff);
    font-size: var(--type-title-s-size);
    font-weight: 600;
    cursor: pointer;
    transition: filter var(--transition);
}
.gpr-practice-cta:hover { filter: brightness(1.05); }

.gpr-practice-cta-count {
    min-width: 22px;
    padding: 0 6px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.22);
    font-size: var(--type-body-s-size);
    font-weight: 700;
    line-height: 22px;
    text-align: center;
}

.gpr-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: rgba(0, 0, 0, 0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    /* Insets keep the sheet off the status bar / gesture pill in the MAUI WebView, which
       draws edge-to-edge (see tokens.css --safe-*). Off-device both resolve to 0px. */
    padding: calc(var(--space-4) + var(--safe-top)) var(--space-4) calc(var(--space-4) + var(--safe-bottom));
}

.gpr-modal {
    width: 100%;
    max-width: 540px;
    display: flex;
    flex-direction: column;
    background: var(--card-bg, var(--bg, #fff));
    border: 1px solid var(--card-border);
    border-radius: var(--radius-lg);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
    max-height: calc(100dvh - 2 * var(--space-4) - var(--safe-top) - var(--safe-bottom));
    overflow: hidden;
}

.gpr-modal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-4);
    border-bottom: 1px solid var(--card-border);
}

.gpr-modal-title {
    font-size: var(--type-title-s-size);
    font-weight: 700;
    color: var(--text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.gpr-modal-close {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 50%;
    background: var(--card-hover, rgba(127, 127, 127, 0.12));
    color: var(--text-secondary);
    font-size: 20px; /* skip(c): fixed 32×32 circle, single × glyph */
    line-height: 1;
    cursor: pointer;
}
.gpr-modal-close:hover { color: var(--text); }

/* Fixed min-height is the whole point: the practice runner grows when feedback +
   explanation appear, but the body reserves the space up-front so the question and
   input don't shift under the user's finger between question and answer. */
.gpr-modal-body {
    padding: var(--space-4) var(--space-5) var(--space-5);
    overflow-y: auto;
    min-height: 420px;
}