/* Shared geometry and theme tokens for the complete platform. */
:root {
    --layout-page-width: 1200px;
    --layout-sidebar-width: 280px;
    --layout-gap: 20px;
    --layout-page-gutter: 16px;
    --action-primary-bg: #4f46e5;
    --action-primary-hover: #4338ca;
    --action-success-bg: #047857;
    --action-success-hover: #065f46;
    --action-danger-bg: #b91c1c;
    --action-warning-bg: #92400e;
    --action-text: #ffffff;
    --color-info: #1d4ed8;
    --color-success: #065f46;
}
[data-theme="dark"] { --color-info: #60a5fa; --color-success: #34d399; }
body .page-wrapper { width: 100%; max-width: var(--layout-page-width) !important; padding: 16px var(--layout-page-gutter) 24px !important; }
.navbar-inner { max-width: var(--layout-page-width); }
.page-wrapper .feed-layout { grid-template-columns: minmax(0, 1fr) var(--layout-sidebar-width); gap: var(--layout-gap); }
.page-wrapper .feed-layout > .sidebar { grid-column: 2; grid-row: 1; }
.page-wrapper .feed-layout > :not(.sidebar) { grid-column: 1; grid-row: 1; min-width: 0; }
.page-wrapper :is(.assignment-detail-layout, .submission-page-layout) { grid-template-columns: minmax(0, 1fr) var(--layout-sidebar-width); gap: var(--layout-gap); }
.page-wrapper :is(.feed-main-content, .home-feed-main, .assignment-detail-main, .submission-form-card, .form-group) { min-width: 0; }
.page-wrapper .page-hero { margin-bottom: 16px; gap: 12px; }
.page-wrapper .page-hero h1 { font-size: 24px !important; line-height: 1.4; overflow-wrap: anywhere; }
.page-wrapper :is(.page-hero, .form-card-header, .card-header) > * { min-width: 0; }
.page-wrapper :is(.sidebar-card, .form-card, .card, .assignment-card, .submission-side-card, .submission-form-card, .assignment-detail-help-card, .assignment-detail-info) { border-color: var(--color-border); border-radius: var(--radius-lg); }
.page-wrapper .sidebar { padding-right: 0; top: 76px; }
.page-wrapper .sidebar-card { margin-bottom: 14px; }
.page-wrapper :is(.form-card-header, .form-card-body) { padding: 18px; }
.page-wrapper .form-input, .page-wrapper .form-select { min-width: 0; max-width: 100%; color: var(--color-text-primary); background: var(--color-surface); border-color: var(--color-border); }
.page-wrapper input::placeholder, .page-wrapper textarea::placeholder { color: var(--color-text-muted); opacity: 1; }
.page-wrapper :is(.form-row, .stat-grid, .tabs) { gap: 12px; }
.page-wrapper .tabs { flex-wrap: wrap; }
.page-wrapper .btn { min-height: 38px; white-space: normal; }
body .btn-primary { background: var(--action-primary-bg) !important; border-color: var(--action-primary-bg) !important; color: var(--action-text) !important; }
body .btn-primary:hover { background: var(--action-primary-hover) !important; border-color: var(--action-primary-hover) !important; }
.page-wrapper .btn-secondary { background: var(--color-bg-secondary); color: var(--color-text-primary); border-color: var(--color-border); }
.page-wrapper .btn-warning { background: var(--color-warning-light) !important; color: var(--color-warning) !important; border-color: var(--color-border); }
.page-wrapper .btn-danger { background: var(--action-danger-bg); color: var(--action-text); }
.page-wrapper :is(.btn-submit-work, #submission-send-button, .assignment-detail-send-bar .btn, .assignment-detail-help-card > .btn-primary, .assignment-detail-completion > .btn-primary) { background: var(--action-success-bg) !important; border-color: var(--action-success-bg) !important; color: var(--action-text) !important; }
.page-wrapper :is(.btn-submit-work, #submission-send-button, .assignment-detail-send-bar .btn, .assignment-detail-help-card > .btn-primary, .assignment-detail-completion > .btn-primary):hover { background: var(--action-success-hover) !important; border-color: var(--action-success-hover) !important; }
.page-wrapper :is(.table-responsive, .table-container, .gradebook-table-container) { max-width: 100%; overflow-x: auto; }
.page-wrapper .feed-main-content > div:has(> table) { max-width: 100%; overflow-x: auto; }
.page-wrapper :is(.card-description, .rich-text-content) :is(p, span, strong, b) { color: inherit; }
[data-theme="dark"] .card-description :is(p, span, strong, b) { color: var(--color-text-primary) !important; }
.page-wrapper .subject-tag { color: var(--color-primary-text) !important; background: var(--color-primary-light) !important; }
.page-wrapper :is(.class-grid-item.active a, .class-grid-all-btn.active a, .class-tab-pill.active, .cal-task-badge, .badge-today-mini) { background: var(--action-primary-bg); color: var(--action-text); border-color: var(--action-primary-bg); }
.page-wrapper .class-tab-pill.active .class-tab-badge { background: rgba(0, 0, 0, .18); color: var(--action-text); }
.page-wrapper .publish-date-badge.badge-relevance-today { color: var(--color-success); }
.page-wrapper .btn-submissions { background: var(--action-primary-bg); color: var(--action-text); }
.page-wrapper .alert { animation: none; }
.ai-overview-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 18px; }
.ai-overview-grid .sidebar-card { margin-bottom: 0; }
.page-wrapper :is(a, button, summary, input, select, textarea):focus-visible { outline: 3px solid var(--color-primary); outline-offset: 3px; }
.home-mobile-class-button, .settings-mobile-tabs { display: none; }
.page-wrapper .student-filter-sidebar { position: static; max-height: none; overflow: visible; }
.student-class-filter .sidebar-class-grid { max-height: none; overflow: visible; padding-right: 0; }
.teacher-tools-card > summary { padding: 14px; cursor: pointer; font-size: 14px; font-weight: 750; color: var(--color-text-primary); }
.teacher-tools-content { display: flex; flex-direction: column; gap: 10px; padding: 0 14px 14px; }
.teacher-tools-content .btn { width: 100%; justify-content: flex-start; text-align: left; }
.teacher-tools-content .form-label { font-size: 13px; }
.teacher-tools-admin { border-top: 1px solid var(--color-border); padding-top: 10px; }
.home-filter-disclosure { margin-bottom: 14px; border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); }
.home-filter-disclosure > summary { padding: 14px 16px; cursor: pointer; color: var(--color-text-primary); font-size: 14px; font-weight: 700; }
.home-filter-disclosure .sidebar-card { border: none; box-shadow: none; margin-bottom: 0; }
.home-page .assignment-card .card-title { font-size: 20px; line-height: 1.45; }
.home-page .assignment-card .card-title a { color: var(--color-text-primary); text-decoration: none; }
.home-page .assignment-card .card-title a:hover { color: var(--color-primary); }
.home-page .card-body { padding: 18px; }
.home-page .card-footer { padding: 12px 18px; gap: 12px; }
.home-page .card-description { font-size: 14px; line-height: 1.65; }
.home-page .assignments-feed { gap: 16px; }
.home-page #feed-header { scroll-margin-top: 80px; }
.platform-teacher-mobile-nav { display: none; }
.page-wrapper .fv-container { max-width: 100%; padding: 0; }
.page-wrapper .fv-grid { grid-template-columns: minmax(0, 1fr) 320px; gap: var(--layout-gap); }
@media (max-width: 1100px) {
    .page-wrapper .fv-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 960px) {
    .page-wrapper .feed-layout, .page-wrapper :is(.assignment-detail-layout, .submission-page-layout) { grid-template-columns: minmax(0, 1fr); }
    .page-wrapper .feed-layout > :not(.sidebar) { grid-column: 1; }
    .page-wrapper .sidebar { display: none; }
    .page-wrapper .sidebar.mobile-open { display: block; position: fixed !important; top: var(--sn-navbar-height, 56px) !important; right: 0 !important; left: auto !important; width: min(320px, 90vw) !important; max-height: calc(100vh - var(--sn-navbar-height, 56px)) !important; padding: 12px; background: var(--color-bg); z-index: 90; box-shadow: var(--shadow-lg); overflow-y: auto; }
    .page-wrapper .feed-layout > :is(.teacher-work-sidebar, .settings-tools-sidebar) { display: block; position: static !important; grid-column: 1; grid-row: 1; width: 100% !important; max-height: none !important; padding: 0; overflow: visible; background: transparent; box-shadow: none; }
    .page-wrapper :is(.teacher-work-sidebar, .settings-tools-sidebar) > .sidebar-card:not(.teacher-tools-card) { display: none; }
    .page-wrapper :is(.teacher-work-sidebar, .settings-tools-sidebar) .teacher-tools-card { margin-bottom: 0; }
    .page-wrapper .feed-layout:has(> .teacher-work-sidebar, > .settings-tools-sidebar) > .feed-main-content,
    .page-wrapper .feed-layout.has-work-sidebar > .feed-main-content { grid-row: 2; }
    .home-mobile-class-button { display: inline-flex; }
    .settings-mobile-tabs { display: flex; margin-bottom: 16px; }
    #mobile-menu-btn { display: inline-flex; }
    [data-page-area="teacher"] #mobile-menu-btn { display: none !important; }
    .platform-teacher-mobile-nav { display: block; width: 100%; max-width: var(--layout-page-width); margin: 12px auto 0; padding: 0 var(--layout-page-gutter); }
    .platform-teacher-mobile-nav details { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); }
    .platform-teacher-mobile-nav summary { padding: 12px 14px; cursor: pointer; color: var(--color-text-primary); font-size: 14px; font-weight: 750; }
    .platform-teacher-mobile-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding: 0 12px 12px; }
    .platform-teacher-mobile-links a { padding: 10px; border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-bg-secondary); color: var(--color-text-primary); font-size: 13px; text-decoration: none; }
}
@media (max-width: 600px) {
    :root { --layout-page-gutter: 12px; --layout-gap: 14px; }
    .page-wrapper .page-hero h1 { font-size: 21px !important; }
    .page-wrapper .form-row { grid-template-columns: minmax(0, 1fr); }
    .page-wrapper .stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .page-wrapper :is(.form-card-header, .form-card-body) { padding: 14px; }
    .home-page .card-body { padding: 14px; }
    .home-page .card-footer { padding: 12px 14px; }
    .home-page .assignment-card .card-title { font-size: 18px; }
    .ai-overview-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .page-wrapper .dashboard-card { flex-wrap: wrap; }
    .page-wrapper .dashboard-card-actions { width: 100%; max-width: 100%; margin-left: 0 !important; align-items: stretch !important; }
    .page-wrapper .dashboard-card-actions > div { flex-wrap: wrap; justify-content: flex-start; max-width: 100%; }
    .navbar-inner { padding: 0 12px; gap: 8px; }
    .navbar-brand > span { display: none; }
    .navbar-actions { gap: 6px; min-width: 0; }
    .changelog-version-tag { display: none; }
}
/* Text wraps in UI cards; narrow tables expose every cell as a labelled record. */
@media(max-width:1280px),(max-height:760px) {
    .page-wrapper .page-hero { padding:10px 12px; margin-bottom:10px; gap:6px!important; }
    .page-wrapper .page-hero h1 { font-size:22px!important; line-height:1.25; }
    .page-wrapper :is(.form-card-header,.card-header,.form-card-body,.card-body,.sidebar-card,.compact-content-card,.submit-form-card,.login-card) { padding:12px!important; }
    .page-wrapper :is(.card-footer,.sidebar-header) { padding:8px 12px; }
    .page-wrapper :is(.form-card,.card,.sidebar-card,.assignment-detail-instructions,.assignment-detail-materials,.submission-context) { margin-bottom:10px; }
    .page-wrapper :is(.form-row,.stat-grid,.tabs,.assignments-feed) { gap:8px; }
    .page-wrapper .btn-sm { min-height:30px; padding:4px 8px; }
    .page-wrapper :is(.assignment-detail-overview,.assignment-detail-help-card,.assignment-detail-completion,.submission-context,.submission-form-card,.assignment-editor-actions,.submission-send-bar,.assignment-detail-send-bar) { padding:10px 12px!important; gap:8px; }
    .page-wrapper :is(.assignment-detail-overview h1,.submission-context h1) { font-size:21px; margin-bottom:6px; }
    .page-wrapper :is(.assignment-detail-status,.assignment-detail-jumps) { margin-top:8px; }
    .page-wrapper .assignment-description-header { padding:8px 12px!important; }
    .page-wrapper .assignment-full-description { padding:12px!important; font-size:16px; line-height:1.6; }
    .page-wrapper .assignment-detail-file-header { padding:8px 10px!important; gap:8px!important; }
    .page-wrapper :is(.teacher-tools-card,.home-filter-disclosure,.submission-side-card,.assignment-editor-disclosure,.ai-settings-disclosure) > summary { padding:8px 12px; }
    .page-wrapper :is(.ai-settings-intro,.ai-settings-tabs) { margin-bottom:10px; gap:6px; }
    .page-wrapper .ai-settings-tab { padding:6px 9px; }
    .page-wrapper .ai-settings-tabs { position:static; }
    .page-wrapper .ai-request-metadata { padding:8px 10px; }
    .page-wrapper .ai-request-metadata :is(h3,p) { margin-bottom:4px; }
    .page-wrapper .ai-request-metadata dl { gap:4px 8px; }
    .page-wrapper .fv-workspace-toolbar .btn { min-height:30px; padding:4px 7px; }
    #teacher-schedule-wrapper { padding:12px!important; }
}
@media(max-width:600px) {
    .page-wrapper .btn-sm,.page-wrapper .fv-workspace-toolbar .btn { min-height:36px; }
    .page-wrapper .page-hero h1 { font-size:20px!important; }
    .page-wrapper .form-card-body { padding:10px!important; }
}
.page-wrapper :is(.form-card-title, .sidebar-header, .page-hero-sub) { overflow-wrap: anywhere; }
.page-wrapper :is(.form-card-header, .card-header) { flex-wrap: wrap; }
.page-wrapper :is(.form-card-header, .card-header) > * { max-width: 100%; }
.platform-record-table { width: 100% !important; table-layout: fixed; }
.platform-record-table :is(th, td) { overflow-wrap: anywhere; white-space: normal !important; }
.platform-record-table :is(th, td) :is(code, a, strong, span) { max-width: 100%; overflow-wrap: anywhere; }
.platform-record-table :is(th, td) .btn { white-space: normal !important; }
.page-wrapper .platform-matrix-region { min-width: 0; max-width: 100%; overflow: auto; max-height: 72dvh; isolation: isolate; }
.platform-matrix-table { border-collapse: separate; border-spacing: 0; table-layout: auto; }
.platform-matrix-table thead th { position: sticky; top: 0; z-index: 10; background: var(--color-bg-secondary); }
.platform-matrix-table :is(th,td):first-child { position: sticky; left: 0; z-index: 5; background: var(--color-surface); box-shadow: 2px 0 0 var(--color-border); }
.platform-matrix-table thead th:first-child { z-index: 12; background: var(--color-bg-secondary); }
.platform-matrix-table.schedule-matrix { table-layout: fixed; }
.platform-matrix-table.schedule-matrix :is(th,td):first-child { width: 125px; background: var(--color-bg-secondary); }
.platform-matrix-table.schedule-matrix :is(select,input) { width: 100%; min-width: 0; }
.matrix-scroll-hint { margin: 6px 10px; font-size: 11px; color: var(--color-text-muted); }
.journal-pagination { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 8px 10px; border-bottom: 1px solid var(--color-border); }
.journal-pagination p { margin: 0; flex: 1 1 200px; font-size: 12px; }
.journal-page-links { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; }
.journal-page-links :is(a,span) { padding: 5px 8px; font-size: 12px; border: 1px solid var(--color-border); border-radius: var(--radius-sm); }
.journal-page-links [aria-current] { background: var(--color-primary-light); font-weight: 800; }
@media(max-width:600px) { .platform-matrix-table.journal-table :is(th,td):first-child { min-width: 130px; max-width: 160px; padding: 5px 8px; } #teacher-schedule-wrapper { padding: 12px!important; } }
@media print { .page-wrapper .platform-matrix-region { max-height: none; overflow: visible; } .platform-matrix-table :is(th,td) { position: static!important; box-shadow: none; } .matrix-scroll-hint,.journal-pagination { display: none; } }
.platform-table-region:has(> .is-record-layout) { overflow-x: visible !important; }
.platform-record-table.is-record-layout { display: block; min-width: 0 !important; max-width: 100%; border-collapse: separate; }
.platform-record-table.is-record-layout thead { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); }
.platform-record-table.is-record-layout :is(tbody, tfoot) { display: block; width: 100%; }
.platform-record-table.is-record-layout :is(tbody, tfoot) > tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; margin: 12px; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); }
.platform-record-table.is-record-layout td { display: block; position: static !important; min-width: 0 !important; width: auto !important; max-width: 100%; padding: 10px !important; border-bottom: 1px solid var(--color-border); text-align: left !important; white-space: normal !important; }
.platform-record-table.is-record-layout td::before { content: attr(data-column-label); display: block; font-size: 12px; font-weight: 700; color: var(--color-text-secondary); margin-bottom: 6px; }
.platform-record-table.is-record-layout td.platform-full-row { grid-column: 1 / -1; }
.platform-record-table.is-record-layout td.platform-full-row::before { display: none; }
.platform-record-table.is-record-layout :is(.journal-td-student, .journal-th-student) { box-shadow: none; }
@media (max-width: 600px) {
    .mobile-filter-bar { overflow-x: visible; flex-wrap: wrap; }
    .page-wrapper .tabs { overflow-x: visible; }
    .guide-card-header { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
    .guide-card-header > div:first-child { width: 100%; min-width: 0; }
    .guide-header-text { flex: 1; min-width: 0; }
    .guide-header-meta { justify-content: flex-end; width: 100%; }
    .guide-active-page-badge { max-width: 100%; white-space: normal; }
    .platform-record-table.is-record-layout :is(tbody, tfoot) > tr { grid-template-columns: minmax(0, 1fr); margin: 10px; }
}
@media print {
    .platform-record-table.is-record-layout { display: table; }
    .platform-record-table.is-record-layout thead { position: static; width: auto; height: auto; clip-path: none; display: table-header-group; }
    .platform-record-table.is-record-layout :is(tbody, tfoot) { display: table-row-group; }
    .platform-record-table.is-record-layout :is(tbody, tfoot) > tr { display: table-row; }
    .platform-record-table.is-record-layout td { display: table-cell; }
    .platform-record-table.is-record-layout td::before { display: none; }
}

/* Keep idle pages quiet; animate only interactions and active loading. */
.nav-badge, .guide-nav-icon, .guide-status-dot, .guide-active-page-badge, .guide-pulsing-dot, .live-dot-pulse, .class-prominent-badge.class-status-now,
.nav-schedule-pill.status-in-lesson, .nav-schedule-pill.status-in-break {
    animation: none !important;
}
@media (prefers-reduced-motion: reduce) {
    @view-transition { navigation: none; }
    ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
    html { scroll-behavior: auto !important; }
}
@media (max-height: 720px) and (min-width: 961px) {
    body .page-wrapper { padding-top: 10px !important; }
    .page-wrapper .page-hero { margin-bottom: 12px; }
}
.ai-origin-details { white-space: normal; overflow-wrap: anywhere; color: var(--color-text-secondary); font-size: 13px; line-height: 1.6; margin: 8px 0; }
.ai-origin-note { color: var(--color-text-muted); font-size: 12px; line-height: 1.5; }
/* Fallback for browsers without :has(), keeping labelled tables and work menu usable. */
.platform-table-region.is-record-region { overflow-x: visible !important; }

/* Layered important rules override page-specific important effects, including SVG robots.
   Functional status text and all controls stay visible. */
@layer sn-performance {
html.sn-reduced-motion, html.sn-reduced-motion *,
html.sn-reduced-motion *::before, html.sn-reduced-motion *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
}
html.sn-reduced-motion::view-transition-group(*),
html.sn-reduced-motion::view-transition-old(*),
html.sn-reduced-motion::view-transition-new(*) { animation: none !important; }
html.sn-lite *, html.sn-lite *::before, html.sn-lite *::after,
html.sn-lite dialog::backdrop {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: none !important;
    text-shadow: none !important;
}
html.sn-lite .ai-kid-robot-svg { filter: none !important; }
html.sn-lite :is(.assignment-card, .btn, .theme-toggle):hover { transform: none !important; }
html.sn-page-hidden *, html.sn-page-hidden *::before, html.sn-page-hidden *::after {
    animation-play-state: paused !important;
}
/* OS accessibility preferences apply even if decorative effects are explicitly enabled. */
@media (prefers-reduced-motion: reduce) {
    html, *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
}
.simplified-site-toggle {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    flex-shrink: 0;
    min-height: 36px;
    padding: 5px 9px;
    border: 1px solid rgba(255, 255, 255, .35);
    border-radius: var(--radius-full);
    color: #fff;
    background: rgba(255, 255, 255, .08);
    font: inherit;
    font-size: 11px;
    cursor: pointer;
}
.simplified-site-toggle:hover { background: rgba(255, 255, 255, .18); }
.simplified-site-toggle:focus-visible { outline: 3px solid #c7d2fe; outline-offset: 3px; }
.simplified-site-toggle[aria-checked="true"] { background: #065f46; border-color: #6ee7b7; }
.simplified-site-track { width: 24px; height: 14px; border: 1px solid #cbd5e1; border-radius: 8px; position: relative; }
.simplified-site-track::before { content: ''; position: absolute; width: 8px; height: 8px; top: 2px; left: 2px; background: #fff; border-radius: 50%; }
[aria-checked="true"] > .simplified-site-track::before { left: 12px; }
#simplified-site-help { max-width: 700px; margin: 8px auto 0; font-size: 12px; line-height: 1.6; }
@media (max-width: 600px) {
    .navbar { height: auto; }
    .navbar-inner { height: auto; min-height: 56px; padding-top: 8px; padding-bottom: 8px; }
    .simplified-site-toggle { padding: 3px 6px; gap: 4px; }
    .simplified-site-label { max-width: 64px; font-size: 10px; line-height: 1.2; text-align: left; }
    .navbar-actions { flex-wrap: wrap; justify-content: flex-end; }
}