/* V2 end-user portal. V1 retains its original, independent stylesheet. */
:root {
    color-scheme: light;
    --school-accent: #315da8;
    --text: #233247;
    --muted: #647184;
    --border: #dfe4ea;
    --page-width: 1080px;
    --panel: #fff;
    --card: #fff;
    --hover: #f5f7fa;
    --control: #ccd4df;
    --selected: #eaf0f6;
    --icon: #5b6f89;
    font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, Arial, sans-serif;
    font-size: 14px;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; color: var(--text); background: var(--page-background-color, #dfe6ec) var(--school-background, none) var(--background-position, center) / cover no-repeat; background-attachment: var(--background-attachment, fixed); line-height: 1.55; min-height: 100dvh; display: flex; flex-direction: column; }
body.portal-v2--wide { --page-width: 1320px; }
body[data-color-scheme='dark'], body[data-color-scheme='transparent'] { color-scheme: dark; --text: #eef3f8; --muted: #b7c3d0; --border: #43515f; --panel: #24313d; --card: #2c3b48; --hover: #354654; --control: #546573; --selected: #405364; --icon: #bdcede; }
body[data-color-scheme='transparent'] { --panel: rgba(var(--panel-tint, 24, 37, 49), var(--panel-opacity, .72)); --card: rgba(var(--panel-tint, 24, 37, 49), var(--panel-card-opacity, .32)); --hover: rgba(var(--panel-tint, 24, 37, 49), var(--panel-hover-opacity, .6)); --border: rgba(218, 230, 240, .25); --control: rgba(218, 230, 240, .38); --selected: rgba(95, 117, 135, .45); --muted: #d1dce6; }
body[data-color-scheme='transparent'][data-panel-text='dark'] { color-scheme: light; --text: #233247; --muted: #3d5064; --icon: #405a70; --border: rgba(35, 50, 71, .25); --control: rgba(35, 50, 71, .4); --selected: rgba(95, 117, 135, .18); }
body[data-color-scheme='transparent'] .portal-shell { -webkit-backdrop-filter: blur(var(--panel-blur, 12px)); backdrop-filter: blur(var(--panel-blur, 12px)); }
.portal-stage { flex: 1; display: grid; place-items: center; padding: 56px 28px 32px; }
.portal-shell { width: min(var(--page-width), 100%); background: var(--panel); border: 1px solid var(--border); border-radius: 8px; box-shadow: 0 16px 48px rgba(10, 22, 34, .18); min-width: 0; }
a { color: inherit; text-underline-offset: 4px; }
button, input { font: inherit; }
button, .button { cursor: pointer; }
svg { width: 20px; height: 20px; flex-shrink: 0; }
:focus-visible { outline: 2px solid var(--school-accent); outline-offset: 4px; }
h1, h2, h3, p { margin: 0; }
.page-width { width: auto; }
.site-header { border-bottom: 1px solid var(--border); margin-inline: 32px; }
.header-inner { display: flex; justify-content: space-between; align-items: center; gap: 24px; min-height: 88px; padding-block: 20px; }
.school-brand { display: flex; align-items: center; gap: 14px; text-decoration: none; min-width: 0; }
.school-brand__icon { display: flex; align-items: center; justify-content: center; color: var(--icon); flex-shrink: 0; }
.school-brand__icon svg { width: 34px; height: 34px; }
.school-brand__icon img { max-width: 110px !important; max-height: 52px !important; width: auto; height: auto; object-fit: contain; }
.school-brand__name { font-size: 17px; font-weight: 600; line-height: 1.35; overflow-wrap: anywhere; }
.school-brand__name > span { display: block; color: var(--muted); font-size: 12px; font-weight: 400; margin-top: 4px; }
.header-account { display: flex; align-items: center; gap: 24px; flex-shrink: 0; }
.account-name { color: var(--muted); font-size: 12px; max-width: 230px; overflow-wrap: anywhere; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 16px; border: 1px solid var(--control); background: var(--card); border-radius: 3px; min-height: 40px; padding: 9px 16px; font-size: 12px; font-weight: 600; text-decoration: none; white-space: nowrap; }
.button:hover { border-color: var(--muted); background: var(--hover); }
.button svg { width: 16px; height: 16px; }
.portal-content { padding: 28px 32px 32px; }
.welcome { display: flex; align-items: flex-start; justify-content: space-between; gap: 40px; padding: 4px 0 32px; border-bottom: 1px solid var(--border); }
.welcome-copy { max-width: 750px; }
.portal-shell--empty .welcome { border-bottom: 0; padding-bottom: 12px; }
.eyebrow { font-size: 10px; text-transform: uppercase; letter-spacing: 1.5px; font-weight: 600; color: var(--muted); margin-bottom: 12px; }
h1 { font-size: clamp(25px, 2.3vw, 32px); line-height: 1.25; font-weight: 600; letter-spacing: -.65px; margin-bottom: 12px; }
.welcome p { color: var(--muted); font-size: 14px; line-height: 1.75; }
.profile-details { min-width: 160px; max-width: 300px; font-size: 12px; }
.profile-details summary { cursor: pointer; padding-block: 8px; }
.profile-details dl { border-top: 1px solid var(--border); padding-top: 12px; }
.profile-details dt { color: var(--muted); }
.profile-details dd { margin: 2px 0 12px; overflow-wrap: anywhere; }
.resources { padding-top: 28px; }
.portal-content > .resources:first-child { padding-top: 0; }
.resources-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 22px; }
.resources-heading h1 { font-size: 16px; letter-spacing: normal; line-height: inherit; margin: 0; }
h2 { font-size: 16px; font-weight: 600; }
[data-resource-count] { font-size: 12px; color: var(--muted); white-space: nowrap; }
.resource-toolbar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; margin-bottom: 20px; }
.resource-search { position: relative; width: min(400px, 100%); }
.resource-search svg { position: absolute; top: 12px; left: 13px; width: 17px; height: 17px; color: var(--muted); pointer-events: none; }
.resource-search input { min-height: 42px; width: 100%; border: 1px solid var(--control); border-radius: 3px; padding: 10px 12px 10px 40px; background: var(--card); font-size: 12px; color: var(--text); }
.resource-search input::placeholder { color: var(--muted); }
.view-controls { display: flex; gap: 0; margin-left: auto; }
.view-controls button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 38px; padding: 8px 12px; border: 1px solid var(--control); border-radius: 0; background: var(--card); color: var(--muted); font-size: 12px; }
.view-controls button + button { margin-left: -1px; }
.view-controls button:first-child { border-radius: 3px 0 0 3px; }
.view-controls button:last-child { border-radius: 0 3px 3px 0; }
.view-controls button[aria-pressed='true'] { background: var(--selected); color: var(--text); box-shadow: inset 0 -2px var(--school-accent); }
.view-controls button:hover { color: var(--text); background: var(--hover); }
.view-controls svg { width: 14px; height: 14px; }
.resource-grid { display: grid; grid-template-columns: repeat(var(--resource-columns, 3), minmax(0, 1fr)); gap: 14px; }
.resource-card { position: relative; display: flex; align-items: flex-start; gap: 14px; padding: 22px 18px; min-width: 0; min-height: 116px; border: 1px solid var(--border); border-radius: 3px; background: var(--card); text-decoration: none; transition: border-color .15s, background .15s; }
.resource-card:hover { border-color: var(--muted); background: var(--hover); }
.resource-icon { width: 36px; height: 36px; flex: 0 0 36px; display: grid; place-items: center; color: var(--icon); }
.resource-icon svg { width: 26px; height: 26px; }
.resource-image { position: relative; width: var(--image-width); max-width: 45%; aspect-ratio: var(--image-ratio); flex: 0 0 auto; overflow: hidden; }
.resource-image img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: var(--image-fit, contain); }
.resource-card--image-top { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-content: start; }
.resource-card--image-top .resource-image { grid-column: 1 / -1; max-width: 100%; }
.resource-text { min-width: 0; display: flex; flex-direction: column; gap: 7px; flex: 1; }
.resource-title { font-size: 14px; font-weight: 600; overflow-wrap: anywhere; }
.resource-description { font-size: 12px; color: var(--muted); line-height: 1.6; overflow-wrap: anywhere; }
.resource-cta { font-size: 11px; margin-top: 3px; color: var(--icon); }
.resource-arrow { color: #8b98a8; width: 16px; height: 16px; margin-top: 3px; }
.resource-grid[data-layout='list'] { grid-template-columns: 1fr; gap: 0; }
.resource-grid[data-layout='list'] .resource-card { min-height: 88px; align-items: center; border-radius: 0; }
.resource-grid[data-layout='list'] .resource-card + .resource-card { margin-top: -1px; }
.resource-grid[data-layout='list'] .resource-text { flex-direction: row; align-items: center; gap: 30px; }
.resource-grid[data-layout='list'] .resource-title { width: 25%; flex-shrink: 0; }
.resource-grid[data-layout='list'] .resource-description { flex: 1; }
.resource-grid[data-layout='list'] .resource-card--image-top { align-items: start; }
.empty-state { border: 1px solid var(--border); background: var(--card); padding: 36px 24px; text-align: center; }
.empty-state h3 { font-size: 17px; font-weight: 600; margin-bottom: 8px; }
.empty-state p { font-size: 13px; color: var(--muted); margin-bottom: 20px; }
.empty-state button { padding: 9px 16px; background: var(--card); border: 1px solid var(--control); border-radius: 3px; color: var(--text); }
.site-footer { padding: 0 28px 20px; color: var(--footer-color, #58697b); }
body[data-has-background='true'] .site-footer { color: rgba(255, 255, 255, .85); text-shadow: 0 1px 3px rgba(0, 0, 0, .85); }
.footer-inner { width: min(var(--page-width), 100%); margin-inline: auto; padding: 8px 0; display: flex; align-items: center; justify-content: space-between; gap: 24px; font-size: 11px; }
.footer-note { white-space: pre-line; }
.footer-note::before { content: '·'; margin-inline: 8px; }
.footer-inner > a { white-space: nowrap; text-decoration-color: transparent; }
.footer-inner > a:hover, .footer-inner > a:focus-visible { text-decoration-color: currentColor; }
.preview-notice { background: #eaf0f6; padding: 8px 20px; color: #364b66; font-size: 12px; text-align: center; }
.preview-notice a { margin-left: 16px; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.skip-link { position: fixed; top: -80px; left: 16px; padding: 10px 16px; background: white; z-index: 10; }
.skip-link:focus { top: 8px; }
@media (max-width: 1000px) {
    .resource-grid { grid-template-columns: repeat(min(var(--resource-columns, 3), 2), minmax(0, 1fr)); }
    .account-name { max-width: 150px; }
}
@media (max-width: 640px) {
    .portal-stage { padding: 24px 14px; }
    .site-header { margin-inline: 20px; }
    .header-inner { min-height: 80px; gap: 12px; }
    .school-brand { gap: 10px; }
    .school-brand__name { font-size: 14px; }
    .school-brand__icon img { max-width: 64px !important; max-height: 40px !important; }
    .school-brand__icon svg { width: 26px; height: 26px; }
    .account-name { display: none; }
    .button { padding: 9px 12px; gap: 8px; }
    .portal-content { padding: 24px 20px; }
    .welcome { flex-direction: column; gap: 16px; padding-bottom: 24px; }
    .welcome p { font-size: 13px; }
    .resources { padding-top: 24px; }
    .resources-heading { align-items: baseline; gap: 12px; }
    h2 { font-size: 15px; }
    .resource-search { width: 100%; }
    .resource-grid { grid-template-columns: 1fr; gap: 10px; }
    .resource-card { min-height: 100px; padding: 20px 16px; gap: 12px; }
    .resource-grid[data-layout='list'] .resource-text { flex-direction: column; align-items: flex-start; gap: 4px; }
    .resource-grid[data-layout='list'] .resource-title { width: auto; }
    .footer-inner { align-items: flex-start; flex-direction: column; gap: 14px; }
    .site-footer { padding: 0 14px 16px; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; scroll-behavior: auto !important; } }