/* V6 · Final visual QA, responsive stability and performance polish. */
:root {
    --v6-readable-line: 72ch;
    --v6-touch-target: 48px;
    --v6-safe-gutter: clamp(14px, 2.4vw, 32px);
    --v6-state-border: color-mix(in srgb, var(--al-primary, #087fff) 18%, var(--al-line, #d9e3ef));
}

html {
    scrollbar-gutter: stable;
    overflow-x: clip;
    text-rendering: optimizeLegibility;
}

body {
    overflow-x: clip;
    overscroll-behavior-x: none;
}

:is(.app-shell,.app-main,.v1-app-main,.page-container,.v1-page-container,.public-shell,.kid-mode-shell,.kid-mode-shell__main,
    .panel,.wide-card,.hero-panel-card,.table-card,.form-card,.admin-cms-layout,.r7-library,.r7-reader,.r8-dashboard,.r8-profile) {
    min-inline-size: 0;
}

:is(.page-container,.public-shell,.kid-mode-shell__main) :is(h1,h2,h3,h4,p,li,dd,dt,strong,small,label,td,th,code) {
    overflow-wrap: break-word;
}

:is(.instruction-card,.lesson-body,.r7-reader__copy,.r8-profile__summary,.v3-home-primary__copy) > p,
:is(.panel,.wide-card,.hero-panel-card) > p {
    max-inline-size: var(--v6-readable-line);
}

/* Stable media boxes: the SVG families already expose these native ratios. */
img[src*="/img/worlds/"] { aspect-ratio: 16 / 9; }
img[src*="/img/library/"] { aspect-ratio: 5 / 7; }
img[src*="/img/mascot/"] { aspect-ratio: 1; }
img[src*="/img/icons/"] { aspect-ratio: 1; }
img[src*="/img/rewards/"] { aspect-ratio: 1; }
img[src*="/img/competencies/"] { aspect-ratio: 31 / 18; }
img[src*="/img/tools/"] { aspect-ratio: 31 / 18; }

img {
    height: auto;
}

/* Long repeating collections may skip off-screen painting without affecting semantics. */
@supports (content-visibility: auto) {
    :is(.r7-library__grid,.r8-student-grid,.kbdg-grid,.lesson-list,.admin-competency-grid) > :nth-child(n+7) {
        content-visibility: auto;
        contain-intrinsic-size: auto 260px;
    }
}

/* Unified final-state treatment, using only states that already exist in the product. */
:is(.r8-empty,.r8-empty-inline,.admin-empty-state,.v1-filter-empty,.kbdg-empty,.v1-command__empty) {
    border: 1px dashed var(--v6-state-border);
    border-radius: var(--al-radius-lg, 20px);
    background: color-mix(in srgb, var(--al-surface, #fff) 92%, var(--al-primary-soft, #eaf4ff));
}

:is(.r8-empty,.admin-empty-state,.v1-filter-empty) {
    padding: clamp(18px, 3vw, 30px);
}

[aria-disabled="true"],
:is(.al-map-stop--locked,.is-locked,.locked) {
    cursor: not-allowed;
}

.v6-network-state {
    position: fixed;
    z-index: 9990;
    inset-inline: max(12px, env(safe-area-inset-left)) max(12px, env(safe-area-inset-right));
    bottom: max(12px, env(safe-area-inset-bottom));
    width: min(560px, calc(100% - 24px));
    margin-inline: auto;
    padding: 12px 16px;
    border: 1px solid rgba(176, 109, 17, .26);
    border-radius: 16px;
    background: rgba(255, 249, 232, .97);
    color: #71430b;
    box-shadow: 0 18px 44px rgba(49, 42, 18, .16);
    font-weight: 750;
    backdrop-filter: blur(10px);
}

.v6-network-state[hidden] { display: none; }

/* Prevent focus from hiding below sticky headers and mobile bars. */
:where(a,button,input,select,textarea,[tabindex],section,article)[id] {
    scroll-margin-block-start: 104px;
}

:where(a,button,input,select,textarea,[role="button"],[tabindex="0"]) {
    -webkit-tap-highlight-color: rgba(8, 127, 255, .14);
}

/* Touch sizing, without inflating inline text links. */
:is(button,input[type="button"],input[type="submit"],select,.primary-btn,.secondary-btn,.ghost-btn,.al-map-button,
    .al-activity-btn,.r7-library__clear,.r7-reader__save,.v1-command-trigger,.topbar-icon-btn,.dark-toggle) {
    min-block-size: var(--v6-touch-target);
}

/* Technical overflow handling for data-heavy adult surfaces. */
:is(.table-card,.admin-table-card,.r8-table-wrap,.admin-cms-layout) {
    max-inline-size: 100%;
}

:is(.table-card,.admin-table-card) table {
    min-inline-size: min(720px, 100%);
}

.v6-scroll-shell {
    position: relative;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scrollbar-gutter: stable;
    -webkit-overflow-scrolling: touch;
}

.v6-scroll-shell.is-v6-overflowing {
    mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 22px), transparent 100%);
}

/* Keep media and actions stable on unusual text zoom / narrow widths. */
:is(.al-map-card,.r7-book,.kbdg-card,.r8-student-card,.v3-teacher-priority__card,.admin-form-section) {
    min-inline-size: 0;
}

:is(.al-map-card__content,.r7-book__body,.kbdg-card__info,.r8-student-card__body) {
    min-inline-size: 0;
}

/* Large screens: increase composition breathing room rather than stretching text. */
@media (min-width: 1440px) {
    .v1-page-container { max-inline-size: 1540px; margin-inline: auto; }
    .public-shell { max-inline-size: 1800px; margin-inline: auto; }
}

/* Laptop/tablet landscape. */
@media (max-width: 1180px) {
    :root { --v6-safe-gutter: clamp(14px, 2vw, 24px); }
    .v1-page-container { padding-inline: var(--v6-safe-gutter); }
    .r8-metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Tablet and 200%-zoom-equivalent narrow layouts. */
@media (max-width: 820px) {
    html { scrollbar-gutter: auto; }
    :is(.dashboard-grid,.two-col-grid,.admin-grid--2,.admin-grid--3,.r8-area-grid,.v3-teacher-priority__grid) {
        grid-template-columns: minmax(0, 1fr);
    }
    :is(.v3-home-primary,.v3-library-spotlight,.r7-reader__hero,.kld-hero) {
        grid-template-columns: minmax(0, 1fr);
    }
    .v6-scroll-shell.is-v6-overflowing { mask-image: none; }
}

/* Phones. */
@media (max-width: 640px) {
    :root { --v6-touch-target: 48px; }
    .v1-page-container,
    .page-container { padding-inline: max(14px, env(safe-area-inset-left)); }
    .r8-metric-grid { grid-template-columns: minmax(0, 1fr); }
    :is(.topbar-actions,.v1-topbar__actions) > * { max-inline-size: 100%; }
    :is(.primary-btn,.secondary-btn,.al-map-button,.r7-reader__save) { width: 100%; justify-content: center; }
}

/* Small phones: eliminate accidental clipping and keep primary actions reachable. */
@media (max-width: 430px) {
    .v1-topbar__titles h1 { font-size: clamp(1.2rem, 7vw, 1.65rem); }
    .v1-command-trigger kbd { display: none; }
    .al-map-hero__actions,
    .v3-home-shortcuts,
    .r7-reader__toolbar { gap: 8px; }
    .r7-library__controls { grid-template-columns: minmax(0, 1fr); }
}

@media (forced-colors: active) {
    .v6-network-state,
    :is(.r8-empty,.r8-empty-inline,.admin-empty-state,.v1-filter-empty,.kbdg-empty,.v1-command__empty) {
        border: 1px solid CanvasText;
        background: Canvas;
        color: CanvasText;
    }
    .v6-scroll-shell.is-v6-overflowing { mask-image: none; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        scroll-behavior: auto;
    }
}

.is-reduced-motion *,
.is-reduced-motion *::before,
.is-reduced-motion *::after {
    scroll-behavior: auto;
}