/* ============================================================================
   APRENDIZZAJE · V2 VISUAL FOUNDATION
   Scope: typography hierarchy, grid, spacing, materiality, component system.
   Navigation architecture remains owned by V1. Motion choreography remains V5.
   Priority-forcing declarations are intentionally avoided in this file.
   ============================================================================ */

/* ---------- Global canvas / reading rhythm ---------- */
body.public-body,
body.app-body {
    background:
        radial-gradient(circle at 8% 0%, rgba(29,114,232,.075), transparent 28%),
        radial-gradient(circle at 92% 12%, rgba(107,85,219,.055), transparent 26%),
        linear-gradient(180deg, var(--al-canvas) 0%, var(--al-canvas-cool) 100%);
    color: var(--al-ink-900);
}

body.app-body::after {
    opacity: .3;
    mix-blend-mode: multiply;
}

html[data-theme="dark"] body.app-body::after { opacity: .12; mix-blend-mode: screen; }

::selection {
    background: color-mix(in srgb, var(--al-primary) 24%, transparent);
    color: var(--al-ink-950);
}

.v1-page-container,
.page-container {
    width: min(100%, var(--al-page-max));
    padding: var(--al-space-5) var(--al-page-gutter) var(--al-space-9);
    gap: var(--al-section-gap);
}

.public-shell {
    width: min(100%, 1760px);
    padding-inline: clamp(16px, 1.45vw, 28px);
}

body.public-body[data-v5-page="home"] .public-shell,
body.public-body[data-v5-page="login"] .public-shell {
    width: min(100%, 1800px);
    padding-top: clamp(14px, 1.4vw, 24px);
    padding-bottom: clamp(28px, 3vw, 54px);
}

/* ---------- Heading hierarchy ---------- */
.v1-topbar__titles h1 {
    font-family: var(--al-font-display);
    font-size: clamp(1rem, 1.15vw, 1.16rem);
    font-weight: 780;
    letter-spacing: -.015em;
    color: var(--al-ink-950);
}

.v1-topbar__kicker,
.eyebrow,
.al-kicker,
.r8-kicker,
.al-home-section__eyebrow,
.al-home-hero__eyebrow,
.al-home-mission__eyebrow,
.al-activity-hero__eyebrow,
.r7-kicker,
.admin-cms-hero .eyebrow,
.instruction-card .eyebrow {
    font-family: var(--al-font-display-wide);
    font-size: var(--al-text-label);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: var(--al-track-label);
    text-transform: uppercase;
}

.eyebrow,
.al-kicker,
.r8-kicker {
    color: var(--al-primary-deep);
}

.section-heading h2,
.section-heading h3,
.hero-mini h2,
.hero-mini h3,
.instruction-card h2,
.instruction-card h3,
.result-hero h2,
.profile-card h2,
.profile-card h3,
.r8-section-head h3,
.admin-editor-heading h3 {
    color: var(--al-ink-950);
}

.section-heading p,
.instruction-card p,
.hero-panel-card p,
.wide-card > p,
.r8-teacher-hero p,
.r8-profile-hero p,
.admin-cms-hero p,
.muted-text {
    max-width: var(--al-reading-measure);
    color: var(--al-ink-600);
    line-height: var(--al-leading-body);
}

.role-teacher .v1-topbar__titles h1,
.role-admin .v1-topbar__titles h1,
.role-teacher .section-heading h2,
.role-teacher .section-heading h3,
.role-admin .section-heading h2,
.role-admin .section-heading h3,
.role-teacher .r8-teacher-hero h2,
.role-admin .admin-cms-hero h2 {
    font-family: var(--al-font-display);
}

.student-mode-kid .al-home-hero__title,
.student-mode-kid .al-home-section h2,
.student-mode-kid .al-home-mission h2,
.student-mode-kid .al-activity-hero h1,
.student-mode-kid .al-library-hero h1,
.student-mode-kid .al-reader-shell h1 {
    font-family: var(--al-font-kid);
}

.student-mode-kid .al-home-hero__title {
    font-size: clamp(2.35rem, 6vw, 4.6rem);
    line-height: .98;
    letter-spacing: -.045em;
}

/* ---------- Master grids ---------- */
.dashboard-grid,
.two-col,
.three-col,
.admin-grid,
.r8-metric-grid,
.r8-area-grid,
.r8-student-grid,
.r8-profile-grid,
.r8-fact-grid,
.al-home-actions,
.al-library-grid {
    gap: var(--al-grid-gap);
}

.dashboard-grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
}

.dashboard-grid > .hero-panel-card,
.dashboard-grid > .wide-card { grid-column: 1 / -1; }
.dashboard-grid > .metric-card { grid-column: span 3; }
.dashboard-grid > .panel { grid-column: span 6; }

.two-col { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.three-col { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.admin-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.admin-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* ---------- Surface material system ---------- */
.panel,
.wide-card,
.hero-panel-card,
.metric-card,
.info-card,
.instruction-card,
.profile-card,
.table-card,
.form-card,
.r8-panel,
.r8-metric,
.r8-student-card,
.r8-group-areas,
.r8-roster,
.admin-cms-hero,
.admin-editor,
.admin-preview,
.admin-catalog,
.admin-toolbar,
.diagnostic-shell,
.diagnostic-card {
    position: relative;
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--al-surface) 98%, transparent), color-mix(in srgb, var(--al-surface-soft) 92%, transparent));
    border: 1px solid var(--al-line);
    border-radius: var(--al-radius-lg);
    box-shadow: var(--al-inset-highlight), var(--al-shadow-card);
}

.hero-panel-card,
.instruction-card,
.result-hero,
.admin-cms-hero,
.r8-teacher-hero,
.r8-profile-hero {
    border-radius: var(--al-radius-xl);
    overflow: hidden;
}

.hero-panel-card::before,
.instruction-card::before,
.admin-cms-hero::before,
.r8-teacher-hero::before,
.r8-profile-hero::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 4px;
    border-radius: inherit;
    background: linear-gradient(180deg, var(--al-primary), var(--al-secondary));
    opacity: .82;
    pointer-events: none;
}

.role-teacher .panel,
.role-teacher .wide-card,
.role-teacher .hero-panel-card,
.role-teacher .metric-card,
.role-teacher .info-card,
.role-teacher .instruction-card,
.role-teacher .profile-card,
.role-teacher .table-card,
.role-admin .panel,
.role-admin .wide-card,
.role-admin .hero-panel-card,
.role-admin .metric-card,
.role-admin .info-card,
.role-admin .instruction-card,
.role-admin .profile-card,
.role-admin .table-card {
    backdrop-filter: blur(12px);
}

.metric-card,
.r8-metric {
    min-height: 132px;
    display: grid;
    align-content: space-between;
    gap: var(--al-space-3);
    overflow: hidden;
}

.metric-card::after,
.r8-metric::after {
    content: "";
    position: absolute;
    width: 110px;
    height: 110px;
    inset: auto -34px -42px auto;
    border-radius: 50%;
    background: radial-gradient(circle, color-mix(in srgb, var(--al-primary) 14%, transparent), transparent 68%);
    pointer-events: none;
}

.metric-card strong,
.r8-metric strong {
    font-family: var(--al-font-display-wide);
    font-size: var(--al-text-metric);
    font-weight: 800;
    letter-spacing: -.035em;
    color: var(--al-ink-950);
}

.metric-card span,
.r8-metric span,
.r8-metric small {
    font-size: var(--al-text-body-sm);
    color: var(--al-ink-600);
    font-weight: 650;
}

/* ---------- Button hierarchy ---------- */
.primary-btn,
.secondary-btn,
.ghost-btn,
.audio-pill,
.mini-audio-btn,
.r8-hero-action,
.al-home-hero__cta,
.al-home-mission__cta,
.admin-primary-btn {
    min-height: var(--al-control-height-lg);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--al-space-2);
    padding: 11px 18px;
    border-radius: var(--al-radius-md);
    font-family: var(--al-font-display-wide);
    font-size: .9rem;
    font-weight: 780;
    line-height: 1.1;
    letter-spacing: .015em;
    text-decoration: none;
    cursor: pointer;
}

.primary-btn,
.al-home-hero__cta,
.r8-hero-action,
.admin-primary-btn {
    color: #fff;
    border: 1px solid color-mix(in srgb, var(--al-primary-deep) 72%, #0000);
    background: linear-gradient(180deg, #2f83ef 0%, var(--al-primary) 54%, var(--al-primary-deep) 100%);
    box-shadow: var(--al-inset-highlight), 0 8px 20px rgba(29, 114, 232, .22);
}

.secondary-btn {
    color: var(--al-primary-deep);
    border: 1px solid var(--al-line-accent);
    background: linear-gradient(180deg, var(--al-surface), var(--al-primary-soft));
    box-shadow: var(--al-inset-highlight), var(--al-shadow-xs);
}

.ghost-btn {
    color: var(--al-ink-800);
    border: 1px solid var(--al-line);
    background: color-mix(in srgb, var(--al-surface) 84%, transparent);
    box-shadow: var(--al-inset-highlight);
}

.primary-btn:hover,
.secondary-btn:hover,
.ghost-btn:hover,
.r8-hero-action:hover,
.al-home-hero__cta:hover,
.al-home-mission__cta:hover,
.admin-primary-btn:hover {
    transform: translateY(-1px);
}

.primary-btn:active,
.secondary-btn:active,
.ghost-btn:active,
.r8-hero-action:active,
.al-home-hero__cta:active,
.al-home-mission__cta:active,
.admin-primary-btn:active {
    transform: translateY(0) scale(.985);
}

.primary-btn:disabled,
.secondary-btn:disabled,
.ghost-btn:disabled,
button:disabled {
    opacity: .56;
    cursor: not-allowed;
    box-shadow: none;
}

/* ---------- Labels, chips and statuses ---------- */
.eyebrow,
.tiny-pill,
.pill,
.route-chip,
.lesson-status-badge,
.r8-status,
.admin-status,
.al-chip {
    border-radius: var(--al-radius-pill);
}

.eyebrow {
    min-height: 28px;
    padding: 6px 10px;
    background: var(--al-primary-soft);
    border: 1px solid var(--al-line-accent);
    box-shadow: none;
}

.tiny-pill,
.pill,
.route-chip,
.lesson-status-badge {
    min-height: 28px;
    padding: 5px 10px;
    border: 1px solid var(--al-line);
    background: var(--al-surface-soft);
    color: var(--al-ink-700);
    font-family: var(--al-font-body);
    font-size: var(--al-text-caption);
    font-weight: 720;
    letter-spacing: .01em;
}

.tiny-pill.is-active,
.pill.is-active,
.route-chip.is-active {
    color: #fff;
    background: var(--al-primary);
    border-color: var(--al-primary);
}

/* ---------- Forms ---------- */
.form-card,
.auth-card {
    gap: var(--al-space-5);
}

.form-card label,
.auth-card label,
.lgn-field {
    gap: var(--al-space-2);
}

.form-card label > span,
.auth-card label > span,
.lgn-field-label,
.admin-field > span {
    color: var(--al-ink-700);
    font-family: var(--al-font-display-wide);
    font-size: var(--al-text-label);
    font-weight: 760;
    letter-spacing: .045em;
    text-transform: none;
}

.form-card input,
.form-card select,
.form-card textarea,
.auth-card input,
.auth-card select,
.lgn-input,
.admin-field input,
.admin-field select,
.admin-field textarea {
    min-height: var(--al-control-height-lg);
    color: var(--al-ink-900);
    background: var(--al-surface-interactive);
    border: 1px solid var(--al-line-strong);
    border-radius: var(--al-radius-md);
    box-shadow: inset 0 1px 2px rgba(20, 32, 57, .035);
}

.form-card textarea,
.admin-field textarea { min-height: 118px; resize: vertical; }

.form-card input:hover,
.form-card select:hover,
.form-card textarea:hover,
.auth-card input:hover,
.auth-card select:hover,
.lgn-input:hover,
.admin-field input:hover,
.admin-field select:hover,
.admin-field textarea:hover {
    border-color: color-mix(in srgb, var(--al-primary) 38%, var(--al-line-strong));
}

.form-card input:focus,
.form-card select:focus,
.form-card textarea:focus,
.auth-card input:focus,
.auth-card select:focus,
.lgn-input:focus,
.admin-field input:focus,
.admin-field select:focus,
.admin-field textarea:focus {
    border-color: var(--al-primary);
    box-shadow: var(--al-focus-ring);
    outline: none;
}

/* ---------- Tables ---------- */
.table-card {
    overflow: auto;
}

.table-card table {
    font-size: var(--al-text-body-sm);
}

.table-card thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    padding: 13px 14px;
    color: var(--al-ink-700);
    background: color-mix(in srgb, var(--al-surface-soft) 94%, transparent);
    border-bottom: 1px solid var(--al-line-strong);
    font-family: var(--al-font-display-wide);
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .065em;
    text-transform: uppercase;
}

.table-card tbody td {
    padding: 14px;
    color: var(--al-ink-800);
    border-bottom: 1px solid var(--al-line-soft);
}

.table-card tbody tr:nth-child(even) td {
    background: color-mix(in srgb, var(--al-surface-soft) 62%, transparent);
}

.table-card tbody tr:hover td {
    background: var(--al-primary-soft);
}

/* ---------- List / content cards ---------- */
.lesson-list,
.card-stack { gap: var(--al-card-gap); }

.lesson-card {
    min-height: 76px;
    padding: 15px 16px;
    border-radius: var(--al-radius-lg);
    border: 1px solid var(--al-line);
    background: var(--al-surface-raised);
    box-shadow: var(--al-inset-highlight), var(--al-shadow-sm);
}

.lesson-card .lesson-body strong {
    font-family: var(--al-font-display-wide);
    font-size: .96rem;
    font-weight: 760;
    color: var(--al-ink-950);
}

.lesson-card .lesson-body p {
    margin-top: 3px;
    color: var(--al-ink-600);
    font-size: var(--al-text-body-sm);
}

.lesson-meta { gap: var(--al-space-2); }

/* ---------- Teacher visual density ---------- */
.role-teacher .v1-page-container,
.role-admin .v1-page-container {
    gap: clamp(18px, 1.65vw, 26px);
}

.r8-teacher-dashboard,
.r8-profile {
    gap: var(--al-section-gap);
}

.r8-teacher-hero,
.r8-profile-hero {
    padding: clamp(22px, 2.4vw, 34px);
    background:
        radial-gradient(circle at 96% 8%, rgba(29,114,232,.11), transparent 30%),
        linear-gradient(145deg, var(--al-surface), var(--al-surface-soft));
    border: 1px solid var(--al-line);
    box-shadow: var(--al-inset-highlight), var(--al-shadow-card);
}

.r8-teacher-hero h2,
.r8-profile-hero h2 {
    margin-top: 5px;
    font-size: clamp(1.75rem, 2.25vw, 2.45rem);
}

.r8-metric-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

.r8-area-row,
.r8-student-card,
.r8-recommendation,
.r8-skill-pair > span {
    border-color: var(--al-line);
}

.r8-student-card {
    padding: 20px;
    box-shadow: var(--al-inset-highlight), var(--al-shadow-sm);
}

.r8-student-card.has-attention {
    border-color: color-mix(in srgb, var(--al-warning) 32%, var(--al-line));
    background: linear-gradient(180deg, var(--al-surface), color-mix(in srgb, var(--al-warning-soft) 45%, var(--al-surface)));
}

.r8-avatar {
    font-family: var(--al-font-display-wide);
    font-weight: 800;
}

.r8-bar {
    background: var(--al-line-soft);
}

.r8-bar i {
    background: linear-gradient(90deg, var(--al-primary), var(--al-secondary));
}

/* ---------- Admin visual density ---------- */
.role-admin .admin-cms-hero,
.role-admin .instruction-card,
.role-admin .hero-panel-card {
    padding: clamp(22px, 2.15vw, 32px);
}

.admin-cms-hero h2,
.role-admin .instruction-card h2,
.role-admin .hero-panel-card h2 {
    margin-top: 6px;
    font-size: clamp(1.65rem, 2vw, 2.2rem);
}

.admin-form-section {
    border-color: var(--al-line);
    background: var(--al-surface-soft);
    border-radius: var(--al-radius-lg);
}

.admin-form-section__head > span {
    font-family: var(--al-font-data);
    color: var(--al-primary-deep);
    background: var(--al-primary-soft);
    border: 1px solid var(--al-line-accent);
}

.admin-form-section__head h4 {
    font-family: var(--al-font-display-wide);
    color: var(--al-ink-950);
}

.admin-form-section__head p {
    color: var(--al-ink-600);
}

/* ---------- Student hierarchy ---------- */
.student-mode-kid .kid-mode-shell__main {
    width: min(100%, 1600px);
    margin-inline: auto;
    padding-inline: clamp(16px, 2.2vw, 34px);
}

.student-mode-kid .al-home {
    gap: clamp(20px, 2.6vw, 34px);
}

.student-mode-kid .al-home-hero {
    border-radius: var(--al-radius-hero);
}

.student-mode-kid .al-home-hero__eyebrow,
.student-mode-kid .al-home-section__eyebrow,
.student-mode-kid .al-home-mission__eyebrow {
    letter-spacing: .07em;
}

.student-mode-kid .al-home-hero__lead,
.student-mode-kid .al-home-action__copy span,
.student-mode-kid .al-home-mission p,
.student-mode-kid .al-activity-hero p {
    font-size: clamp(.96rem, 1.25vw, 1.08rem);
    line-height: 1.55;
}

.student-mode-kid .al-home-action__copy strong,
.student-mode-kid .al-home-level__copy strong {
    font-family: var(--al-font-kid);
    letter-spacing: -.018em;
}

.student-mode-kid .al-home-action,
.student-mode-kid .al-home-level,
.student-mode-kid .al-home-mission {
    box-shadow: var(--al-inset-highlight), var(--al-shadow-card);
}

/* ---------- Public/auth typography refinement ---------- */
.public-body .lgn-copy h1 {
    font-family: var(--al-font-display-wide);
    font-size: clamp(2.65rem, 5vw, 5.6rem);
    font-weight: 820;
    line-height: .92;
    letter-spacing: -.045em;
}

.public-body .lgn-copy p,
.public-body .lgn-form-sub {
    line-height: 1.6;
}

.public-body .lgn-form-title {
    font-family: var(--al-font-display);
    font-size: clamp(1.75rem, 2.4vw, 2.35rem);
    letter-spacing: -.025em;
}

.public-body .lgn-field-label {
    color: var(--al-ink-700);
}

/* ---------- Dark theme ---------- */
html[data-theme="dark"] .panel,
html[data-theme="dark"] .wide-card,
html[data-theme="dark"] .hero-panel-card,
html[data-theme="dark"] .metric-card,
html[data-theme="dark"] .info-card,
html[data-theme="dark"] .instruction-card,
html[data-theme="dark"] .profile-card,
html[data-theme="dark"] .table-card,
html[data-theme="dark"] .form-card,
html[data-theme="dark"] .r8-panel,
html[data-theme="dark"] .r8-metric,
html[data-theme="dark"] .r8-student-card,
html[data-theme="dark"] .r8-group-areas,
html[data-theme="dark"] .r8-roster,
html[data-theme="dark"] .admin-cms-hero,
html[data-theme="dark"] .admin-editor,
html[data-theme="dark"] .admin-preview,
html[data-theme="dark"] .admin-catalog {
    color: var(--al-ink-900);
    background: linear-gradient(180deg, var(--al-surface), var(--al-surface-soft));
    border-color: var(--al-line);
}

html[data-theme="dark"] .table-card thead th {
    color: var(--al-ink-700);
    background: var(--al-surface-soft);
}

html[data-theme="dark"] .table-card tbody td { color: var(--al-ink-800); }
html[data-theme="dark"] .table-card tbody tr:nth-child(even) td { background: rgba(255,255,255,.018); }
html[data-theme="dark"] .table-card tbody tr:hover td { background: var(--al-primary-soft); }

/* ---------- Responsive grid discipline ---------- */
@media (max-width: 1180px) {
    .dashboard-grid > .metric-card { grid-column: span 6; }
    .dashboard-grid > .panel { grid-column: 1 / -1; }
    .r8-metric-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .three-col, .admin-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 820px) {
    :root {
        --al-page-gutter: 16px;
        --al-section-gap: 20px;
        --al-grid-gap: 14px;
    }

    .dashboard-grid { grid-template-columns: 1fr; }
    .dashboard-grid > .hero-panel-card,
    .dashboard-grid > .wide-card,
    .dashboard-grid > .metric-card,
    .dashboard-grid > .panel { grid-column: 1; }
    .two-col,
    .three-col,
    .admin-grid--2,
    .admin-grid--3 { grid-template-columns: 1fr; }
    .r8-metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

    .section-heading,
    .hero-mini,
    .profile-card {
        align-items: flex-start;
        flex-direction: column;
    }
}

@media (max-width: 560px) {
    :root {
        --al-text-body: .95rem;
        --al-control-height-lg: 48px;
        --al-radius-xl: 24px;
    }

    .v1-page-container,
    .page-container { padding-inline: 12px; }
    .r8-metric-grid { grid-template-columns: 1fr; }
    .metric-card,
    .r8-metric { min-height: 112px; }
    .public-body .lgn-copy h1 { font-size: clamp(2.3rem, 12vw, 4rem); }
}

@media (prefers-reduced-motion: reduce) {
    .primary-btn,
    .secondary-btn,
    .ghost-btn,
    .r8-hero-action,
    .al-home-hero__cta,
    .al-home-mission__cta,
    .lesson-card {
        transition-duration: 0ms;
    }
}

@media (forced-colors: active) {
    .panel,
    .wide-card,
    .hero-panel-card,
    .metric-card,
    .info-card,
    .instruction-card,
    .profile-card,
    .table-card,
    .form-card,
    .r8-panel,
    .r8-metric,
    .r8-student-card {
        border: 1px solid CanvasText;
        box-shadow: none;
    }
}