/* Global + U:Verse. Consolidated component styles; local assets and fonts. */
* { box-sizing: border-box; }
body { margin: 0px; color: var(--ink); font-family: var(--font); line-height: 1.5; }
button { font: inherit; }
input { font: inherit; }
select { font: inherit; }
textarea { font: inherit; }
button { -webkit-tap-highlight-color: transparent; }
a { -webkit-tap-highlight-color: transparent; }
input { -webkit-tap-highlight-color: transparent; }
select { -webkit-tap-highlight-color: transparent; }
textarea { -webkit-tap-highlight-color: transparent; }
a { color: var(--teal); text-decoration: none; }
a:hover { text-decoration: underline; }
button { cursor: pointer; }
button:disabled { cursor: default; opacity: 0.5; }
button { transition: background 0.15s, box-shadow 0.15s; }
h1 { margin: 0px; }
h2 { margin: 0px; }
h3 { margin: 0px; }
p { margin: 0px; }
svg { fill: none; stroke: currentcolor; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0px, 0px, 0px, 0px); white-space: nowrap; border: 0px; }
.skip-link { position: fixed; top: -100px; left: 20px; padding: 10px; background: white; }
.skip-link:focus { top: 12px; }
.initial-state { min-height: 100vh; display: grid; place-content: center; text-align: center; gap: 16px; }
.spinner { display: inline-block; width: 24px; height: 24px; border-top-color: var(--teal); border-radius: 50%; animation: 1s linear 0s infinite normal none running spin; margin: auto; }
@keyframes spin { 
  100% { transform: rotate(360deg); }
}
.demo-badge { display: inline-flex; align-items: center; gap: 7px; border: 1px solid rgb(238, 216, 151); font-weight: 650; padding: 5px 9px; white-space: nowrap; }
.demo-badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: rgb(149, 97, 23); }
.eyebrow { text-transform: uppercase; color: var(--muted); }
.muted { color: var(--muted); }
.pill { display: inline-flex; align-items: center; gap: 5px; line-height: 1.35; font-weight: 600; padding: 5px 9px; background: var(--teal-light); color: var(--teal); white-space: normal; }
.pill.warning { background: var(--orange-light); color: var(--orange); }
.pill.danger { background: var(--danger-light); color: var(--danger); }
.pill.neutral { background: rgb(237, 241, 242); color: var(--muted); }
.btn { display: inline-flex; align-items: center; justify-content: center; padding: 10px 15px; border: 1px solid var(--border); background: white; color: var(--ink); font-weight: 600; }
.btn:hover { text-decoration: none; }
.btn.primary { color: white; background: var(--teal); border-color: var(--teal); }
.btn.ghost { background: transparent; }
.btn.small { padding: 6px 10px; }
.icon-button { background: none; border: 1px solid transparent; color: inherit; display: inline-flex; align-items: center; justify-content: center; }
.button-row { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.sidebar { position: fixed; inset: 0px auto 0px 0px; display: flex; flex-direction: column; }
.brand-caption { text-transform: uppercase; }
.hub-card { border: 1px solid rgba(255, 255, 255, 0.07); }
.hub-card select { width: 100%; margin-top: 6px; }
.nav-label { text-transform: uppercase; }
.navigation { display: flex; flex-direction: column; overflow-y: auto; }
.nav-link { display: flex; align-items: center; }
.nav-link:hover { text-decoration: none; }
.scope-note { display: flex; }
.scope-note svg { width: 15px; height: 15px; margin-top: 2px; }
.workspace { min-height: 100vh; }
.topbar { border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; }
.breadcrumb { display: flex; align-items: center; gap: 10px; color: var(--muted); }
.breadcrumb strong { color: var(--ink); }
.topbar-end { display: flex; align-items: center; }
.user-block { display: flex; align-items: center; gap: 9px; }
.avatar { width: 33px; height: 33px; border-radius: 50%; display: grid; place-items: center; color: var(--teal); font-weight: 750; }
.user-block strong { display: block; }
.user-block small { display: block; color: var(--muted); }
.scenario-label select { display: block; max-width: 172px; border-width: medium; border-style: none; border-color: currentcolor; border-image: none; color: var(--ink); font-size: 11px; background: transparent; padding: 2px 0px; }
.content { margin: 0px auto; }
.page-heading { display: flex; align-items: flex-end; justify-content: space-between; }
.page-heading p { color: var(--muted); max-width: 710px; }
.heading-date { color: var(--muted); display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.source-line { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.source-line svg { width: 14px; height: 14px; }
.source-dot { width: 6px; height: 6px; border-radius: 50%; display: inline-block; }
.notice { display: flex; gap: 11px; align-items: flex-start; border: 1px solid rgb(217, 231, 225); margin: 0px 0px 22px; }
.notice svg { width: 18px; height: 18px; }
.notice strong { display: block; margin-bottom: 3px; }
.section-heading { display: flex; justify-content: space-between; align-items: center; margin: 25px 0px 15px; gap: 12px; }
.section-heading p { color: var(--muted); }
.metric-value { font-size: 32px; line-height: 1.1; letter-spacing: -1px; font-weight: 650; margin-bottom: 6px; }
.metric-label { font-size: 12px; font-weight: 600; }
.metric-foot { font-size: 10px; color: var(--muted); margin-top: auto; padding-top: 10px; display: flex; justify-content: space-between; align-items: center; }
.metric-foot svg { width: 13px; height: 13px; }
.panel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; }
.panel-title { display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--border); gap: 12px; }
.action-row { display: flex; align-items: center; gap: 13px; padding: 17px 22px; border-bottom: 1px solid rgb(237, 241, 239); color: var(--ink); }
.action-row:last-child { border-bottom: 0px; }
.action-row:hover { text-decoration: none; }
.action-row .action-text { flex: 1 1 0%; }
.action-row strong { display: block; font-size: 12px; }
.action-row small { color: var(--muted); font-size: 11px; }
.action-row > svg { width: 16px; height: 16px; }
.info-grid { display: grid; grid-template-columns: repeat(3, minmax(0px, 1fr)); }
.info-grid dt { color: var(--muted); margin-bottom: 5px; }
.info-grid dd { margin: 0px; font-weight: 600; }
.filter-form { display: grid; grid-template-columns: 1.7fr repeat(3, 1fr); align-items: end; border-bottom: 1px solid var(--border); }
label.field { color: var(--muted); display: flex; flex-direction: column; }
.field input { padding: 10px 11px; border: 1px solid var(--border); background: white; width: 100%; color: var(--ink); }
.field select { padding: 10px 11px; border: 1px solid var(--border); background: white; width: 100%; color: var(--ink); }
.field textarea { padding: 10px 11px; border: 1px solid var(--border); background: white; width: 100%; color: var(--ink); }
.field textarea { resize: vertical; }
.filter-row-secondary { grid-column: 1 / -1; display: flex; gap: 12px; align-items: end; flex-wrap: wrap; }
.filter-row-secondary .field { flex: 1 1 0%; min-width: 145px; }
.filter-row-secondary .button-row { margin-left: auto; }
table { width: 100%; border-collapse: collapse; text-align: left; }
th { white-space: nowrap; border-bottom: 1px solid var(--border); }
td { border-bottom: 1px solid rgb(237, 241, 239); vertical-align: middle; }
tr:last-child td { border-bottom: 0px; }
tbody tr:hover { background: rgb(252, 253, 252); }
.student-cell { display: flex; align-items: center; gap: 10px; }
.student-cell .avatar { width: 32px; height: 32px; flex-shrink: 0; }
.student-cell a { font-weight: 650; }
.student-cell small { display: block; color: var(--muted); margin-top: 3px; }
.pagination { display: flex; justify-content: space-between; align-items: center; border-top: 1px solid var(--border); color: var(--muted); }
.empty-state { padding: 55px 30px; text-align: center; max-width: 650px; margin: auto; }
.empty-state .state-icon { display: grid; place-items: center; width: 54px; height: 54px; background: var(--teal-light); border-radius: 16px; margin: 0px auto 18px; color: var(--teal); }
.empty-state h2 { margin-bottom: 9px; }
.empty-state p { color: var(--muted); margin-bottom: 19px; }
.loading-state { padding: 70px 30px; text-align: center; color: var(--muted); }
.loading-state p { margin-top: 13px; }
.footer { display: flex; justify-content: space-between; gap: 20px; color: var(--muted); }
.back-link { display: inline-flex; align-items: center; gap: 7px; }
.back-link svg { width: 15px; height: 15px; }
.profile-header { display: flex; align-items: center; gap: 17px; margin-bottom: 25px; }
.profile-header .avatar { width: 60px; height: 60px; border-radius: 17px; font-size: 19px; }
.profile-header h1 { letter-spacing: -0.7px; }
.profile-header p { color: var(--muted); margin-top: 6px; }
.profile-header .pill { margin-left: auto; }
.tabs { display: flex; gap: 7px; overflow-x: auto; border-bottom: 1px solid var(--border); margin-bottom: 24px; padding-bottom: 0px; }
.tab { display: block; padding: 12px 14px 14px; color: var(--muted); white-space: nowrap; font-weight: 600; border-bottom: 3px solid transparent; }
.tab.active { color: var(--teal); border-bottom-color: var(--teal); }
.tab:hover { text-decoration: none; color: var(--teal); }
.detail-title { margin-bottom: 20px; }
.detail-title p { color: var(--muted); margin-top: 5px; }
.summary-row { display: flex; gap: 15px; margin-bottom: 20px; flex-wrap: wrap; }
.summary-cell { background: white; padding: 19px 23px; border: 1px solid var(--border); flex: 1 1 0%; min-width: 190px; }
.summary-cell strong { display: block; font-weight: 650; margin-top: 6px; }
.summary-cell span { color: var(--muted); }
.summary-cell.danger strong { color: var(--danger); }
.reason-list { display: flex; flex-direction: column; gap: 9px; margin-top: 18px; }
.reason { display: flex; gap: 8px; color: var(--orange); }
.reason svg { width: 16px; height: 16px; }
.progress { height: 6px; border-radius: 4px; background: rgb(231, 238, 235); overflow: hidden; width: 100px; margin: 7px 0px; }
.progress > span { display: block; height: 100%; background: var(--teal); }
.marketing-grid { display: grid; grid-template-columns: repeat(3, minmax(0px, 1fr)); gap: 20px; }
.asset-card { display: flex; flex-direction: column; }
.asset-art { min-height: 155px; padding: 22px; position: relative; border-bottom: 1px solid var(--border); display: flex; flex-direction: column; justify-content: space-between; }
.asset-art svg { width: 33px; height: 33px; }
.asset-art strong { max-width: 180px; line-height: 1.2; }
.asset-art .eyebrow { color: inherit; margin-bottom: 16px; }
.asset-art .asset-format { position: absolute; top: 22px; right: 22px; letter-spacing: 1px; }
.asset-body { padding: 20px; flex: 1 1 0%; display: flex; flex-direction: column; }
.asset-body h2 { margin-bottom: 7px; }
.asset-body p { color: var(--muted); margin-bottom: 18px; }
.asset-meta { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 18px; }
.asset-body .button-row { margin-top: auto; }
.toolbar { display: flex; align-items: end; gap: 14px; margin-bottom: 20px; flex-wrap: wrap; }
.toolbar .field { min-width: 190px; flex: 1 1 0%; }
.toolbar .field:first-child { flex: 2 1 0%; }
.task-layout { display: grid; grid-template-columns: minmax(0px, 1.5fr) minmax(290px, 1fr); gap: 22px; }
.task-card { padding: 20px 22px; border-bottom: 1px solid var(--border); }
.task-card:last-child { border-bottom: 0px; }
.task-card h3 { margin: 9px 0px; }
.task-card .task-meta { display: flex; gap: 12px; color: var(--muted); flex-wrap: wrap; margin: 8px 0px 14px; }
.task-card details { color: var(--muted); margin-top: 12px; }
.task-card details li { margin-top: 6px; }
.task-form { padding: 22px; display: flex; flex-direction: column; gap: 15px; }
.form-note { color: var(--muted); line-height: 1.7; }
.form-status.error { color: var(--danger); }
.form-status.success { color: var(--teal); }
dialog { border: 1px solid var(--border); max-width: 650px; width: calc(100% - 30px); padding: 28px; background: white; color: var(--ink); box-shadow: rgba(15, 48, 37, 0.267) 0px 25px 120px; }
dialog::backdrop { background: rgba(18, 46, 53, 0.5); }
dialog .dialog-heading { display: flex; align-items: start; justify-content: space-between; gap: 15px; margin-bottom: 20px; }
dialog pre { white-space: pre-wrap; font-family: var(--font); line-height: 1.7; background: var(--canvas); padding: 24px; border-radius: 10px; margin: 20px 0px; }
.login-page { display: grid; }
.login-story { flex-direction: column; position: relative; overflow: hidden; }
.login-story .brand { padding: 0px; }
.login-story-content { z-index: 1; }
.login-story h1 em { font-weight: 400; }
.login-story p { margin-top: 22px; line-height: 1.8; max-width: 375px; }
.login-story-footer { z-index: 1; }
.login-form-side { display: flex; align-items: center; justify-content: center; position: relative; }
.login-form-wrapper { width: 100%; }
.login-form-wrapper .demo-badge { margin-bottom: 35px; }
.login-form-wrapper > p { font-size: 13px; color: var(--muted); line-height: 1.8; margin-bottom: 29px; }
.login-form { display: flex; flex-direction: column; }
.login-footer { border-top: 1px solid var(--border); color: var(--muted); }
.nowrap { white-space: nowrap; }
@media (min-width: 1500px) {
:root { --sidebar: 270px; }
.content { padding-top: 43px; }
.metric-value { font-size: 37px; }
}
@media (max-width: 1180px) {
:root { --sidebar: 220px; }
.content { padding: 28px; }
.topbar { padding: 0px 28px; }
.task-layout { grid-template-columns: 1fr; }
.marketing-grid { grid-template-columns: repeat(2, minmax(0px, 1fr)); }
.topbar-end { gap: 10px; }
.user-block div:not(.avatar) { display: none; }
.filter-form { grid-template-columns: repeat(2, minmax(0px, 1fr)); }
.login-story { padding: 40px; }
.login-story h1 { font-size: 43px; }
}
@media (max-width: 760px) {
:root { --sidebar: 240px; }
.sidebar { transform: translateX(-100%); transition: transform 0.2s; }
.sidebar.open { transform: translateX(0px); box-shadow: rgba(0, 0, 0, 0.333) 5px 0px 30px; }
.workspace { margin-left: 0px; }
.mobile-menu { display: inline-flex; }
.topbar { height: auto; min-height: 72px; padding: 12px 17px; gap: 7px; }
.breadcrumb { gap: 6px; }
.breadcrumb .crumb-prefix { display: none; }
.topbar-end { gap: 6px; }
.scenario-label select { max-width: 116px; font-size: 10px; }
.user-block { display: none; }
.content { padding: 25px 18px; }
.page-heading { align-items: flex-start; flex-direction: column; gap: 15px; }
h1 { font-size: 27px; }
.page-heading p { font-size: 12px; }
.metric-value { font-size: 29px; }
.metric-label { font-size: 11px; }
.metric-foot { font-size: 9px; }
.info-grid { grid-template-columns: repeat(2, minmax(0px, 1fr)); gap: 22px 15px; }
.filter-form { padding: 16px; gap: 11px; }
.filter-form > .field:first-child { grid-column: 1 / -1; }
.filter-row-secondary { gap: 11px; }
.filter-row-secondary .button-row { width: 100%; margin-top: 5px; }
.table-wrap { max-width: 100%; }
th { padding: 13px 15px; }
td { padding: 13px 15px; }
.marketing-grid { grid-template-columns: 1fr; }
.profile-header { flex-wrap: wrap; gap: 12px; }
.profile-header h1 { font-size: 22px; }
.profile-header .pill { margin-left: 72px; margin-top: -5px; }
.profile-header .avatar { width: 55px; height: 55px; }
.tabs { margin-left: -2px; margin-right: -2px; }
.tab { padding: 12px 10px; font-size: 11px; }
.footer { flex-direction: column; gap: 8px; }
.pagination { flex-wrap: wrap; }
.toolbar { align-items: stretch; }
.toolbar .field { min-width: 140px; }
.toolbar .field:first-child { min-width: 100%; }
.login-page { grid-template-columns: 1fr; }
.login-story { padding: 28px; }
.login-story-content { padding: 35px 0px 20px; }
.login-story h1 { font-size: 37px; }
.login-story p { margin-top: 16px; }
.login-story-footer { display: none; }
.login-form-side { padding: 32px 27px 40px; }
.login-form-wrapper .demo-badge { margin-bottom: 23px; }
.login-form-wrapper h2 { font-size: 25px; }
.panel-pad { padding: 20px; }
.notice { font-size: 11px; }
}
.hub-card select { border-color: rgb(97, 107, 114); }
.avatar { background: rgb(228, 238, 244); }
.source-dot { background: rgb(0, 84, 133); }
.btn { border-radius: 4px; }
.field input { border-radius: 4px; }
.field select { border-radius: 4px; }
.field textarea { border-radius: 4px; }
button { border-radius: 4px; }
input { border-radius: 4px; }
select { border-radius: 4px; }
textarea { border-radius: 4px; }
.btn:hover { background: rgb(242, 245, 247); }
.notice { border-color: rgb(219, 231, 239); }
.panel-pad > .notice { margin-top: 23px; margin-bottom: 0px; }
.action-row:hover { background: rgb(248, 250, 251); }
.asset-art { background: rgb(228, 238, 244); color: rgb(23, 78, 112); }
.asset-card:nth-child(2n) .asset-art { background: rgb(235, 235, 235); color: rgb(69, 73, 75); }
.summary-cell { border-radius: 6px; }
.login-story h1 em { color: rgb(182, 201, 213); font-style: normal; }
.login-story p { font-family: Georgia, "Times New Roman", serif; color: rgb(194, 199, 202); font-size: 16px; }
.login-story-content::before { content: ""; position: absolute; height: 2px; width: 54px; background: rgb(0, 84, 133); top: 34px; left: 0px; }
.icon-button:hover { background: rgb(228, 238, 244); }
@media (max-width: 760px) {
.login-story-content::before { top: 15px; }
.login-story p { font-size: 14px; }
.mobile-demo { display: flex; justify-content: center; background: rgb(255, 248, 229); border-bottom: 1px solid rgb(238, 216, 151); padding: 6px 12px; }
.mobile-demo .demo-badge { border: 0px; background: transparent; padding: 0px; font-size: 10px; }
}
@font-face { font-family: "Source Sans 3"; src: url("/assets/source-sans-3-latin.woff2") format("woff2"); font-style: normal; font-weight: 200 900; font-display: swap; }
@font-face { font-family: "Source Serif 4"; src: url("/assets/source-serif-4-latin.woff2") format("woff2"); font-style: normal; font-weight: 200 900; font-display: swap; }
:root { --blue: #005485; --blue-dark: #003f66; --blue-light: #e4eef4; --navy: #11191d; --navy-light: #27353d; --teal: var(--blue); --teal-light: var(--blue-light); --orange: #8c481f; --orange-light: #f8eadf; --radius: 4px; --shadow: none; --font: 'Source Sans 3','Segoe UI',Arial,sans-serif; --serif: 'Source Serif 4',Georgia,serif; --sidebar: 254px; }
body { font-size: 15px; }
h1 { font-weight: 650; }
h2 { font-size: 23px; letter-spacing: -0.55px; line-height: 1.25; }
h3 { font-size: 17px; }
small { font-size: 12px; }
.small { font-size: 12px; }
svg { width: 20px; height: 20px; stroke-width: 1.6; }
[hidden] { display: none !important; }
button:focus-visible { outline: rgb(0, 84, 133) solid 3px; outline-offset: 3px; box-shadow: rgb(255, 255, 255) 0px 0px 0px 2px; }
a:focus-visible { outline: rgb(0, 84, 133) solid 3px; outline-offset: 3px; box-shadow: rgb(255, 255, 255) 0px 0px 0px 2px; }
input:focus-visible { outline: rgb(0, 84, 133) solid 3px; outline-offset: 3px; box-shadow: rgb(255, 255, 255) 0px 0px 0px 2px; }
select:focus-visible { outline: rgb(0, 84, 133) solid 3px; outline-offset: 3px; box-shadow: rgb(255, 255, 255) 0px 0px 0px 2px; }
textarea:focus-visible { outline: rgb(0, 84, 133) solid 3px; outline-offset: 3px; box-shadow: rgb(255, 255, 255) 0px 0px 0px 2px; }
summary:focus-visible { outline: rgb(0, 84, 133) solid 3px; outline-offset: 3px; box-shadow: rgb(255, 255, 255) 0px 0px 0px 2px; }
.eyebrow { font-size: 12px; letter-spacing: 1.5px; font-weight: 650; }
.skip-link { z-index: 100; }
.demo-badge { font-size: 12px; background: rgb(249, 240, 217); color: rgb(105, 80, 34); border-color: rgb(219, 202, 166); border-radius: 3px; }
.pill { font-size: 12px; border-radius: 3px; }
.btn { min-height: 44px; font-size: 14px; gap: 10px; }
.btn.small { min-height: 44px; gap: 10px; }
.btn.small { font-size: 13px; }
.icon-button { min-width: 44px; min-height: 44px; padding: 10px; }
.btn.primary:hover { background: var(--blue-dark); }
.brand { display: flex; flex-direction: column; align-items: flex-start; gap: 11px; padding: 0px; }
.brand-logo { display: block; width: 100%; max-width: 214px; height: auto; }
.brand-caption { font-size: 11px; letter-spacing: 2.5px; color: var(--blue-dark); font-weight: 600; }
.sidebar { width: var(--sidebar); background: rgb(255, 255, 255); color: var(--ink); border-right: 1px solid var(--border); z-index: 40; transform: none; }
.sidebar-brand { position: relative; }
.hub-card { margin: 0px 9px 25px; padding: 17px 0px; border-right: 0px; border-left: 0px; border-image: none; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 12px; background: transparent; border-radius: 0px; }
.hub-symbol { display: flex; color: var(--blue); }
.hub-symbol svg { width: 25px; height: 25px; }
.hub-card .eyebrow { letter-spacing: 1px; margin-bottom: 2px; color: var(--muted); }
.hub-card strong { font-size: 16px; font-weight: 650; color: var(--ink); }
.hub-card select { max-width: 163px; background: rgb(255, 255, 255); color: var(--ink); border: 1px solid rgb(154, 168, 175); padding: 8px; min-height: 44px; font-size: 14px; }
.navigation { padding: 2px 0px 8px; scrollbar-width: thin; }
.nav-group { display: flex; flex-direction: column; gap: 2px; }
.nav-label { font-weight: 600; letter-spacing: 1.8px; color: var(--muted); padding: 0px 12px 9px; }
.nav-link { gap: 11px; color: rgb(65, 77, 85); padding: 10px 12px; font-size: 14px; font-weight: 500; border-radius: 2px; border-left: 3px solid transparent; min-height: 44px; line-height: 1.4; }
.nav-link:hover { color: var(--blue); background: rgb(242, 245, 247); }
.nav-link.active { background: var(--blue-light); color: var(--blue-dark); border-left-color: var(--blue); font-weight: 650; }
.nav-link svg { width: 20px; height: 20px; }
.scope-note { font-size: 12px; color: var(--muted); gap: 9px; line-height: 1.5; }
.sidebar-bottom .demo-badge { margin-top: 16px; background: rgb(249, 240, 217); color: rgb(105, 80, 34); border-color: rgb(219, 202, 166); }
.workspace { margin-left: var(--sidebar); min-width: 0px; }
.topbar { height: auto; min-height: 88px; background: rgba(255, 255, 255, 0.72); padding: 16px 32px; gap: 22px; }
.breadcrumb { font-size: 13px; flex-shrink: 0; }
.breadcrumb strong { font-weight: 600; }
.header-search { display: flex; align-items: center; gap: 8px; flex: 1 1 0%; max-width: 360px; border-bottom: 1px solid rgb(154, 168, 175); min-height: 44px; color: var(--muted); }
.header-search input { width: 100%; min-width: 0px; border: 0px; background: transparent; font-size: 14px; color: var(--ink); padding: 10px 0px; }
.header-search input::placeholder { color: rgb(102, 112, 120); }
.header-search:focus-within { border-bottom-color: var(--blue); box-shadow: 0 2px 0 var(--blue); }
.header-search input:focus-visible { outline: 2px solid var(--blue); outline-offset: 0px; box-shadow: none; }
.search-submit { border: 0px; background: transparent; color: var(--blue); font-size: 13px; font-weight: 650; min-height: 44px; padding: 6px 4px 6px 8px; }
.topbar-end { gap: 15px; }
.user-block strong { font-size: 13px; white-space: nowrap; }
.user-block small { font-size: 12px; }
.avatar { font-size: 12px; }
.demo-controls { position: relative; font-size: 12px; color: var(--muted); }
.demo-controls > summary { list-style: none; cursor: pointer; min-height: 44px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; max-width: 136px; line-height: 1.3; }
.demo-controls > summary::after { content: "⌄"; font-size: 16px; color: var(--ink); }
.demo-controls > summary::-webkit-details-marker { display: none; }
.scenario-status { display: block; color: var(--orange); font-weight: 600; flex-basis: 100%; }
.demo-controls-panel { position: absolute; right: 0px; top: calc(100% + 8px); z-index: 25; width: 270px; background: rgb(255, 255, 255); border: 1px solid var(--border); padding: 18px; box-shadow: rgba(17, 25, 29, 0.1) 0px 10px 35px; }
.scenario-label { display: block; font-size: 13px; color: var(--ink); font-weight: 600; margin-bottom: 7px; }
.demo-controls-panel select { width: 100%; min-height: 44px; padding: 8px; border: 1px solid rgb(154, 168, 175); background: rgb(255, 255, 255); color: var(--ink); font-size: 13px; }
.demo-controls-panel p { font-size: 12px; line-height: 1.5; margin-top: 12px; }
.mobile-demo { display: none; }
.drawer-backdrop { position: fixed; inset: 0px; z-index: 35; border: 0px; border-radius: 0px; background: rgba(17, 25, 29, 0.4); }
.content { min-width: 0px; }
.page-heading p { font-size: 15px; }
.heading-date { font-size: 12px; padding-bottom: 3px; }
.source-line { font-size: 12px; margin-top: 18px; color: var(--muted); }
.notice { font-size: 13px; padding: 15px 18px; line-height: 1.6; border-radius: 2px; border-left: 3px solid var(--blue); }
.notice.warning { border-left-color: rgb(162, 100, 52); }
.section-heading h2 { font-size: 21px; }
.section-heading p { font-size: 12px; }
.overview-layout { grid-template-columns: minmax(270px, 0.85fr) minmax(0px, 1.55fr); gap: 36px; align-items: start; }
.hub-summary { flex-direction: column; }
.hub-summary > h2 { font-size: 24px; font-weight: 550; line-height: 1.2; padding-bottom: 26px; border-bottom: 1px solid rgba(255, 255, 255, 0.22); }
.base-metric { flex-direction: column; border-width: 0px 1px 0px 0px; border-style: none solid none none; border-color: currentcolor rgba(255, 255, 255, 0.22) currentcolor currentcolor; }
.base-metric:last-child { padding-right: 0px; padding-left: 20px; }
.base-metric:hover .metric-label { text-decoration: underline; text-underline-offset: 4px; }
.base-metric:focus-visible { outline-color: rgb(255, 255, 255); }
.hub-summary .btn:focus-visible { outline-color: rgb(255, 255, 255); box-shadow: 0 0 0 2px var(--blue-dark); }
.base-metric .metric-value { font-variant-numeric: tabular-nums; }
.summary-note { font-size: 13px; line-height: 1.6; color: rgb(214, 227, 235); margin-bottom: 28px; max-width: 28ch; }
.hub-summary > .btn { align-self: flex-start; margin-top: auto; background: rgb(255, 255, 255); color: var(--blue-dark); border-color: rgb(255, 255, 255); min-width: 150px; }
.hub-summary > .btn:hover { background: rgb(228, 238, 244); }
.attention-board { min-width: 0px; }
.attention-board .section-heading { padding-top: 2px; }
.attention-board .section-heading h2 { line-height: 1.18; }
.attention-instruction { line-height: 1.45; text-align: right; }
.priority-row { width: 100%; display: grid; align-items: center; text-align: left; border-width: 0px 0px 1px; border-style: none none solid; border-color: currentcolor currentcolor rgb(212, 215, 210); border-radius: 0px; color: var(--ink); transition: background 0.15s; }
.priority-icon { color: var(--blue); display: flex; align-items: center; justify-content: center; }
.priority-copy { min-width: 0px; }
.priority-copy strong { display: block; }
.priority-copy small { display: block; }
.priority-label { display: block; font-size: 12px; color: var(--orange); margin-top: 4px; }
.priority-value { text-align: right; min-width: 36px; padding-left: 5px; }
.priority-value strong { line-height: 1; display: block; font-variant-numeric: tabular-nums; }
.priority-value small { display: block; margin-top: 4px; }
.priority-arrow { color: var(--blue); transition: transform 0.15s; }
.priority-row:hover .priority-arrow { transform: translateX(2px); }
.overview-context { border-top: 1px solid rgb(203, 208, 206); display: flex; align-items: flex-start; justify-content: space-between; gap: 25px; }
.overview-context .source-line { margin-top: 0px; max-width: 600px; }
.source-explainer { color: var(--muted); max-width: 480px; min-width: 180px; }
.source-explainer summary { cursor: pointer; min-height: 44px; color: var(--blue); font-size: 13px; font-weight: 600; }
.source-explainer p { margin: 0px 0px 10px; line-height: 1.6; }
.source-explainer ul { padding-left: 18px; margin: 0px; }
.source-explainer li { margin-bottom: 8px; }
.panel-pad { padding: 26px; }
.panel-title { padding: 20px 24px; }
.panel-title h2 { font-size: 19px; }
.panel-title select { min-height: 44px; padding: 7px; border: 1px solid rgb(154, 168, 175); background: rgb(255, 255, 255); }
.info-grid { gap: 28px; }
.info-grid dt { font-size: 12px; }
.info-grid dd { font-size: 15px; overflow-wrap: anywhere; }
.filter-form { gap: 15px; padding: 22px 24px; }
label.field { font-size: 13px; gap: 7px; }
.field input { border-color: rgb(170, 181, 186); min-height: 44px; font-size: 14px; min-width: 0px; }
.field select { border-color: rgb(170, 181, 186); min-height: 44px; font-size: 14px; min-width: 0px; }
.field textarea { border-color: rgb(170, 181, 186); font-size: 14px; min-width: 0px; }
.field textarea { min-height: 104px; }
.table-wrap { scrollbar-width: thin; }
table { font-size: 14px; }
th { padding: 14px 20px; }
td { padding: 17px 20px; }
.student-cell a { display: inline-block; padding: 4px 0px; }
.student-cell small { font-size: 12px; }
.empty-state h2 { font-size: 25px; }
.empty-state p { font-size: 15px; }
.loading-state { font-size: 14px; }
.footer { font-size: 12px; line-height: 1.5; padding-top: 36px; }
.back-link { font-size: 14px; min-height: 44px; margin-bottom: 14px; }
.profile-header h1 { font-size: 32px; }
.profile-header p { font-size: 14px; }
.tab { font-size: 14px; min-height: 48px; }
.detail-title p { font-size: 13px; }
.summary-cell span { font-size: 13px; }
.summary-cell strong { font-size: 30px; }
.reason { font-size: 13px; line-height: 1.6; }
.asset-art strong { font-family: var(--serif); font-weight: 400; font-size: 27px; }
.asset-body h2 { font-size: 19px; }
.asset-body p { font-size: 13px; }
.task-card h3 { font-size: 17px; }
.task-card .task-meta { font-size: 12px; }
.task-card details { font-size: 13px; }
.task-card details summary { min-height: 44px; cursor: pointer; padding-top: 12px; }
.task-form h2 { font-size: 23px; }
.form-note { font-size: 13px; }
.form-status { font-size: 13px; }
.form-status:empty { display: none; }
dialog { border-radius: 4px; }
dialog pre { font-size: 15px; overflow-wrap: anywhere; }
.hub-summary > .eyebrow { margin-bottom: 14px; font-size: 12px; }
.login-page { min-height: 100svh; grid-template-columns: minmax(0px, 1.62fr) minmax(410px, 1fr); background: rgb(255, 255, 255); }
.login-story { background: rgb(233, 231, 224); color: var(--ink); padding: 44px clamp(28px, 3.25vw, 64px) 30px; display: grid; grid-template-columns: minmax(0px, 0.88fr) minmax(0px, 1.12fr); grid-template-rows: auto 1fr auto; gap: 32px 24px; min-width: 0px; min-height: 100svh; }
.login-brand { grid-area: 1 / 1 / auto / -1; }
.login-brand .brand { gap: 11px; }
.login-brand .brand-logo { max-width: 282px; }
.login-brand .brand-caption { font-size: 11px; letter-spacing: 2.8px; }
.login-story-content { grid-area: 2 / 1; align-self: center; min-width: 0px; padding: 0px 0px 16px; margin: 0px; max-width: none; position: static; }
.login-story-content::before { display: none; }
.login-story-content .eyebrow { letter-spacing: 1.4px; color: var(--blue-dark); margin-bottom: 24px; max-width: 25ch; }
.login-story h1 { font-family: var(--serif); font-size: clamp(64px, 6.35vw, 104px); font-weight: 400; letter-spacing: -3.8px; line-height: 0.99; color: var(--blue-dark); }
.login-story-content p { font-family: var(--font); font-size: 16px; line-height: 1.55; color: rgb(73, 90, 98); max-width: 23ch; margin-top: 28px; }
.login-portrait { grid-area: 2 / 2; align-self: center; margin: 0px; min-width: 0px; }
.randy-portrait { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: contain; object-position: center center; filter: none; border-radius: 0px; }
.portrait-caption { display: flex; flex-direction: column; gap: 2px; border-top: 1px solid rgb(172, 180, 180); padding: 12px 0px 0px; margin-top: 13px; color: rgb(68, 84, 92); line-height: 1.35; }
.portrait-caption strong { font-size: 14px; color: var(--ink); font-weight: 650; }
.login-story-footer { grid-area: 3 / 1 / auto / -1; display: flex; align-items: center; justify-content: space-between; gap: 20px; border-top: 1px solid rgb(196, 201, 197); padding-top: 17px; font-size: 12px; color: rgb(86, 97, 105); position: static; }
.login-form-side { padding: 44px clamp(24px, 3.1vw, 60px); background: rgb(255, 255, 255); min-width: 0px; }
.login-form-wrapper { max-width: 380px; }
.login-kicker { display: flex; flex-direction: column; align-items: flex-start; gap: 15px; margin-bottom: 40px; }
.login-kicker > .eyebrow { color: var(--blue); font-size: 12px; letter-spacing: 2px; }
.login-kicker .demo-badge { margin-bottom: 0px; }
.login-form-wrapper h2 { font-size: 49px; font-weight: 600; line-height: 1.05; letter-spacing: -1.7px; margin-bottom: 19px; }
.login-form-wrapper > .login-intro { font-size: 17px; line-height: 1.55; color: var(--muted); margin-bottom: 35px; }
.login-form { gap: 20px; }
.login-form .field { font-size: 13px; color: rgb(76, 91, 99); }
.login-form select { padding: 13px 11px; font-size: 14px; min-height: 50px; }
.login-form .btn { padding: 15px 16px; font-size: 15px; min-height: 52px; justify-content: space-between; }
.login-footer { margin-top: 35px; padding-top: 22px; font-size: 13px; line-height: 1.65; }
.login-footer strong { color: rgb(55, 71, 80); font-weight: 600; display: block; margin-bottom: 7px; }
.login-access-note { margin-top: 30px; font-size: 12px; color: var(--muted); display: flex; align-items: flex-start; gap: 9px; line-height: 1.5; }
.login-access-note svg { width: 17px; height: 17px; margin-top: 1px; }
.capital-picker { border: 0; padding: 0; margin: 0; min-width: 0; }
.capital-picker legend { padding: 0; margin-bottom: 12px; color: var(--muted); font-size: 13px; }
.capital-options { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 9px; }
.capital-option { display: flex; align-items: center; gap: 9px; min-height: 55px; padding: 11px 10px; border: 1px solid var(--border); cursor: pointer; color: var(--ink); font-size: 14px; line-height: 1.25; transition: background-color .15s, border-color .15s; }
.capital-option input { width: 15px; height: 15px; min-height: 0; margin: 0; padding: 0; flex: 0 0 auto; accent-color: var(--blue); }
.capital-option span { font-weight: 600; }
.capital-option small { margin-left: auto; color: var(--muted); font-size: 10px; letter-spacing: .6px; }
.capital-option:has(input:checked) { background: #eef4f7; border-color: var(--blue); }
.capital-option:hover { border-color: var(--blue); }
.capital-option:has(input:focus-visible) { outline: 2px solid var(--blue); outline-offset: 3px; }
.login-profiles { margin-top: 9px; border-top: 1px solid var(--border); }
.login-profiles summary { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 44px; padding: 13px 0; color: var(--muted); font-size: 12px; cursor: pointer; list-style: none; }
.login-profiles summary::-webkit-details-marker { display: none; }
.login-profiles summary svg { width: 15px; height: 15px; }
.login-profiles[open] summary svg { transform: rotate(45deg); }
.login-profiles .login-form { padding: 8px 0; }
.login-form-wrapper:has(.capital-picker) .login-kicker { margin-bottom: 26px; }
.login-form-wrapper:has(.capital-picker) .login-intro { margin-bottom: 24px; }
.login-form-wrapper:has(.capital-picker) .login-footer { margin-top: 17px; padding-top: 17px; }
@media (min-width: 1600px) {
:root { --sidebar: 274px; }
.sidebar { padding-left: 24px; padding-right: 24px; }
.topbar { padding-left: 40px; padding-right: 40px; }
.overview-layout { gap: 44px; }
.priority-row { min-height: 80px; }
.login-story { column-gap: 38px; }
.login-story-content p { font-size: 18px; }
}
@media (max-width: 1320px) {
.topbar { gap: 17px; padding-left: 28px; padding-right: 28px; }
.breadcrumb .crumb-prefix { display: none; }
.user-block > div { display: none; }
.overview-layout { gap: 26px; grid-template-columns: minmax(260px, 0.85fr) minmax(0px, 1.35fr); }
.base-metric .metric-value { font-size: 60px; }
.base-metric:last-child { padding-left: 15px; }
.attention-instruction { max-width: 118px; }
.priority-row { gap: 11px; grid-template-columns: 23px minmax(0px, 1fr) auto 18px; }
.priority-value small { max-width: 68px; }
.task-layout { grid-template-columns: 1fr; }
.marketing-grid { grid-template-columns: repeat(2, minmax(0px, 1fr)); }
.filter-form { grid-template-columns: repeat(2, minmax(0px, 1fr)); }
.page-heading { align-items: flex-start; }
.heading-date { white-space: normal; max-width: 150px; }
.login-story { padding-left: 30px; padding-right: 30px; column-gap: 20px; }
.login-story h1 { font-size: clamp(62px, 6.2vw, 82px); letter-spacing: -2.7px; }
.login-story-content p { font-size: 15px; }
.login-story-content .eyebrow { font-size: 11px; letter-spacing: 1px; }
.login-brand .brand-logo { max-width: 260px; }
.login-form-side { padding-left: 25px; padding-right: 25px; }
}
@media (max-width: 1120px) and (min-width: 901px) {
:root { --sidebar: 232px; }
.sidebar { padding-left: 13px; padding-right: 13px; }
.content { padding: 30px 25px; }
.topbar { padding-left: 25px; padding-right: 25px; gap: 14px; }
.topbar-end { gap: 8px; }
.header-search { max-width: 300px; }
.breadcrumb { font-size: 12px; }
.overview-layout { grid-template-columns: 1fr; }
.hub-summary { grid-template-columns: 1fr 1.6fr; column-gap: 30px; }
.hub-summary > h2 { border: 0px; padding-bottom: 0px; align-self: center; }
.summary-note { margin: 10px 0px 18px; max-width: 30ch; }
.hub-summary > .btn { justify-self: start; }
.base-metric .metric-value { font-size: 66px; }
.attention-board .section-heading h2 { max-width: none; }
.attention-instruction { max-width: 180px; }
.base-metric { justify-content: center; }
.overview-context { flex-direction: column; gap: 12px; }
.source-explainer { max-width: none; }
}
@media (max-width: 1000px) {
.login-page { grid-template-columns: 1fr; }
.login-story { min-height: 0px; grid-template-columns: minmax(0px, 1fr) minmax(0px, 1fr); padding: 30px 40px 25px; gap: 28px 40px; }
.login-brand .brand-logo { max-width: 260px; }
.login-story h1 { font-size: 80px; }
.login-story-content .eyebrow { font-size: 12px; }
.login-story-content p { font-size: 16px; max-width: 26ch; margin-top: 24px; }
.login-portrait { max-width: 300px; justify-self: end; }
.login-story-footer { padding-top: 15px; }
.login-form-side { padding: 46px 40px; }
.login-form-wrapper { max-width: 520px; }
.login-kicker { flex-direction: row; align-items: center; justify-content: space-between; margin-bottom: 27px; gap: 14px; }
.login-form-wrapper h2 { font-size: 44px; }
.login-form-wrapper h2 br { display: none; }
.login-form-wrapper > .login-intro { margin-bottom: 27px; }
.login-intro br { display: none; }
.login-access-note { margin-top: 23px; }
}
@media (max-width: 900px) {
:root { --sidebar: 280px; }
.sidebar { transform: translateX(-100%); transition: transform 0.18s; }
.sidebar.open { transform: translateX(0px); box-shadow: rgba(17, 25, 29, 0.133) 10px 0px 40px; }
.sidebar-brand { padding-top: 7px; padding-bottom: 23px; padding-right: 37px; }
.sidebar-close { display: inline-flex; right: -9px; top: -8px; }
.sidebar .brand-logo { max-width: 200px; }
.sidebar .brand-caption { font-size: 10px; }
.sidebar-bottom { padding-top: 20px; }
.navigation { gap: 20px; }
.workspace { margin-left: 0px; }
.drawer-open { overflow: hidden; }
.mobile-menu { display: inline-flex; margin-left: -9px; }
.mobile-demo { display: flex; justify-content: center; background: rgb(249, 240, 217); border-bottom: 1px solid rgb(226, 212, 183); padding: 5px 14px; }
.mobile-demo .demo-badge { border: 0px; background: transparent; font-size: 11px; padding: 0px; }
.topbar { min-height: 78px; padding: 12px 25px; gap: 16px; flex-wrap: wrap; background: rgb(255, 255, 255); }
.breadcrumb { gap: 7px; font-size: 14px; }
.topbar-end { margin-left: auto; gap: 8px; }
.header-search { order: 3; max-width: none; min-width: 100%; flex-basis: 100%; }
.header-search input { font-size: 15px; }
.user-block > div { display: none; }
.overview-layout { grid-template-columns: minmax(230px, 0.8fr) minmax(0px, 1.3fr); gap: 24px; }
.hub-summary > h2 { font-size: 23px; }
.base-metrics { gap: 0px; }
.attention-board .section-heading { gap: 7px; }
.attention-board .section-heading h2 { max-width: none; font-size: 24px; }
.attention-instruction { max-width: none; text-align: left; }
.priority-row { min-height: 78px; grid-template-columns: 22px minmax(0px, 1fr) auto; gap: 10px; padding: 13px 7px; }
.priority-arrow { display: none; }
.priority-copy strong { font-size: 14px; }
.priority-value strong { font-size: 25px; }
.priority-value small { max-width: 62px; }
.overview-context { gap: 13px; }
.source-explainer { max-width: none; }
.heading-date { max-width: 150px; align-self: flex-start; padding-top: 2px; }
.info-grid { grid-template-columns: repeat(2, minmax(0px, 1fr)); }
.footer { flex-direction: column; gap: 6px; padding-top: 30px; }
}
@media (max-width: 650px) {
.topbar { padding: 10px 20px; gap: 5px 10px; }
.topbar-end { gap: 5px; }
.user-block { display: none; }
.demo-controls > summary { font-size: 12px; max-width: 116px; }
.demo-controls-panel { right: -37px; max-width: calc(-36px + 100vw); }
.page-heading { flex-direction: column; }
.page-heading .eyebrow { font-size: 11px; margin-bottom: 10px; }
.page-heading h1 { letter-spacing: -1px; }
.page-heading p { margin-top: 11px; }
.heading-date { max-width: none; font-size: 12px; }
.overview-layout { grid-template-columns: 1fr; }
.hub-summary { min-height: 0px; }
.hub-summary > h2 { font-size: 23px; padding-bottom: 20px; }
.base-metrics { margin: 22px 0px; }
.base-metric { padding-right: 18px; }
.base-metric:last-child { padding-left: 26px; }
.summary-note { max-width: none; margin-bottom: 22px; font-size: 13px; }
.hub-summary > .btn { width: 100%; justify-content: space-between; }
.attention-board .section-heading { flex-direction: row; align-items: flex-end; gap: 12px; margin-bottom: 16px; }
.attention-instruction { text-align: right; }
.source-line { font-size: 12px; gap: 5px; }
.overview-context { margin-top: 25px; }
.panel-pad { padding: 21px; }
.panel-title { padding: 18px 20px; flex-wrap: wrap; }
.filter-form { padding: 20px; gap: 13px; grid-template-columns: repeat(2, minmax(0px, 1fr)); }
.filter-form > .field:first-child { grid-column: 1 / -1; }
.filter-row-secondary .button-row { width: 100%; margin-top: 3px; }
.filter-row-secondary .button-row .btn { flex: 1 1 0%; }
.notice { font-size: 13px; padding: 14px; gap: 9px; }
.info-grid { gap: 23px 16px; }
.info-grid dd { font-size: 14px; }
th { padding: 14px 16px; }
td { padding: 14px 16px; }
.marketing-grid { grid-template-columns: 1fr; }
.profile-header { flex-wrap: wrap; gap: 15px; }
.profile-header h1 { font-size: 27px; }
.profile-header > div { flex: 1 1 0%; }
.profile-header .pill { margin-top: -4px; }
.profile-header .avatar { width: 60px; height: 60px; }
.profile-header p { font-size: 13px; }
.tab { padding: 12px 13px; font-size: 14px; }
.pagination { flex-wrap: wrap; }
.toolbar .field:first-child { min-width: 100%; }
.task-layout { grid-template-columns: minmax(0px, 1fr); }
.task-card h3 { font-size: 16px; }
.empty-state { padding: 38px 23px; }
.empty-state h2 { font-size: 23px; }
.empty-state p { font-size: 14px; }
.login-story { padding: 25px 22px 24px; grid-template-columns: minmax(0px, 54fr) minmax(0px, 46fr); gap: 24px 15px; }
.login-brand .brand-logo { max-width: 230px; }
.login-brand .brand-caption { font-size: 10px; letter-spacing: 2.3px; }
.login-brand .brand { gap: 8px; }
.login-story-content { padding-bottom: 0px; align-self: start; }
.login-story-content .eyebrow { letter-spacing: 0.8px; margin-bottom: 13px; max-width: 20ch; line-height: 1.5; }
.login-story h1 { font-size: clamp(40px, 10vw, 61px); letter-spacing: -1.6px; line-height: 1.03; }
.login-story-content p { font-size: 13px; line-height: 1.45; margin-top: 15px; max-width: 25ch; }
.login-portrait { place-self: start stretch; max-width: none; }
.portrait-caption { padding-top: 9px; margin-top: 10px; gap: 2px; line-height: 1.4; }
.portrait-caption strong { font-size: 13px; }
.login-story-footer { display: none; }
.login-form-side { padding: 32px 24px 34px; }
.login-form-wrapper { max-width: 460px; }
.login-kicker { gap: 12px; align-items: flex-start; margin-bottom: 25px; }
.login-kicker > .eyebrow { font-size: 11px; letter-spacing: 1.5px; max-width: 8ch; }
.login-form-wrapper h2 { font-size: 36px; letter-spacing: -1px; margin-bottom: 13px; }
.login-form-wrapper > .login-intro { font-size: 15px; margin-bottom: 26px; }
.login-form .field { font-size: 13px; }
.login-form select { font-size: 14px; }
.login-form .btn { font-size: 15px; }
.login-footer { margin-top: 28px; padding-top: 19px; font-size: 12px; }
.login-access-note { font-size: 12px; margin-top: 20px; }
}
@media (max-width: 370px) {
.topbar { padding-left: 16px; padding-right: 16px; }
.breadcrumb { font-size: 13px; }
.demo-controls > summary { max-width: 107px; font-size: 11px; }
.topbar-end > .icon-button { min-width: 40px; padding: 8px; }
.priority-row { gap: 9px; }
.priority-arrow { display: none; }
.priority-copy strong { font-size: 14px; }
.priority-value small { max-width: 58px; }
.hub-summary { padding: 21px; }
.base-metric .metric-value { font-size: 61px; }
.base-metric:last-child { padding-left: 18px; }
.login-story { padding: 22px 18px; gap: 20px 12px; }
.login-brand .brand-logo { max-width: 220px; }
.login-story h1 { font-size: 38px; }
.login-story-content p { font-size: 12px; line-height: 1.45; margin-top: 14px; }
.portrait-caption span { font-size: 10px; }
.login-form-side { padding: 28px 20px 32px; }
.login-kicker .demo-badge { font-size: 10px; }
.filter-form { padding: 16px; grid-template-columns: 1fr; }
.filter-form > .field:first-child { grid-column: auto; }
.filter-row-secondary .field { min-width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
* { animation: auto ease 0s 1 normal none running none !important; transition: none !important; scroll-behavior: auto !important; }
::before { animation: auto ease 0s 1 normal none running none !important; transition: none !important; scroll-behavior: auto !important; }
::after { animation: auto ease 0s 1 normal none running none !important; transition: none !important; scroll-behavior: auto !important; }
}
.nav-label { font-size: 12px; }
.hub-card .eyebrow { font-size: 12px; }
.login-story-content .eyebrow { font-size: 12px; }
.login-kicker .demo-badge { font-size: 12px; }
.portrait-caption { font-size: 12px; }
.asset-art .eyebrow { font-size: 12px; }
.asset-art .asset-format { font-size: 12px; }
.attention-board .section-heading .eyebrow { margin-bottom: 7px; }
.source-explainer summary { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; line-height: 1.5; }
.source-explainer summary svg { width: 17px; height: 17px; flex-shrink: 0; margin-top: 1px; }
.pagination select { min-height: 44px; border: 1px solid rgb(154, 168, 175); padding: 7px; background: rgb(255, 255, 255); font-size: 13px; }
@media (max-width: 1120px) and (min-width: 901px) {
.hub-summary > .eyebrow { grid-area: 1 / 1; }
.hub-summary > h2 { grid-area: 2 / 1; }
.hub-summary > .summary-note { grid-area: 3 / 1; }
.hub-summary > .base-metrics { grid-area: 1 / 2 / 5; }
.hub-summary > .btn { grid-area: 4 / 1; }
}
@media (max-width: 650px) {
.login-story-content .eyebrow { font-size: 10px; }
.portrait-caption { font-size: 12px; }
.portrait-caption span { font-size: 12px; }
.login-kicker .demo-badge { font-size: 11px; }
.hub-summary > h2 { display: none; }
.hub-summary > .summary-note { display: none; }
.hub-summary > .eyebrow { margin-bottom: 0px; }
.base-metric .metric-value { margin-bottom: 8px; }
.base-metric .metric-label { line-height: 1.25; }
.base-metric .metric-foot { margin-top: 6px; }
.overview-layout { gap: 24px; }
.attention-board .section-heading h2 { max-width: none; }
.attention-board .section-heading .eyebrow { font-size: 11px; letter-spacing: 1px; }
}
.table-scroll-hint { font-size: 12px; color: var(--muted); padding: 10px 16px; border-top: 1px solid var(--border); background: var(--surface); }
.table-wrap:focus-visible { outline: 3px solid var(--teal); outline-offset: -3px; }
h1[tabindex="-1"]:focus { outline: none; }
h1 { overflow-wrap: anywhere; min-width: 0px; }
h2 { overflow-wrap: anywhere; min-width: 0px; }
h3 { overflow-wrap: anywhere; min-width: 0px; }
.page-heading > div { min-width: 0px; }
.task-form { min-width: 0px; }
.task-layout > * { min-width: 0px; }
.query-summary > * { min-width: 0px; }
.selected-enrollment > .muted { display: block; }
.demo-controls > summary { overflow-wrap: anywhere; min-width: 0px; }
@media (max-width: 900px) {
.sidebar[aria-hidden="true"] { visibility: hidden; }
}
:root { --canvas: #f2f2f2; --ink: #111111; --surface: #fff; --muted: #566169; --border: #d8dde0; --danger: #a72b31; --danger-light: #faecec; }
body { background: var(--canvas); }
h1 { font-size: 36px; line-height: 1.16; letter-spacing: -1px; }
.content { padding: 32px 36px 26px; max-width: 1600px; }
.page-heading { margin-bottom: 24px; gap: 18px; }
.page-heading .eyebrow { margin-bottom: 9px; }
.page-heading p { margin-top: 9px; line-height: 1.5; }
.page-heading h1 { font-size: 36px; }
.notice { background: var(--blue-light); color: var(--blue-dark); border-top-color: rgb(197, 217, 229); border-right-color: rgb(197, 217, 229); border-bottom-color: rgb(197, 217, 229); border-left-color: var(--blue); }
.notice.warning { background: rgb(255, 245, 233); color: rgb(121, 66, 28); border-color: rgb(223, 198, 168); }
.overview-layout { display: block; }
.hub-summary { display: block; background: rgb(255, 255, 255); color: var(--ink); min-height: 0px; padding: 0px; border-width: 3px 1px 1px; border-style: solid; border-color: rgb(0, 84, 133) rgb(216, 221, 224) rgb(216, 221, 224); border-image: none; margin-bottom: 28px; }
.hub-summary > .eyebrow { color: var(--muted); margin: 0px; padding: 16px 24px 0px; }
.base-metrics { display: grid; grid-template-columns: 1.2fr 1fr 1.1fr; margin: 0px; gap: 0px; }
.base-metric { padding: 24px; display: flex; min-width: 0px; align-items: flex-start; text-align: left; background: transparent; color: var(--ink); border-top: 0px; border-bottom: 0px; border-left: 0px; border-image: none; border-right: 1px solid var(--border); border-radius: 0px; }
.base-metric:last-child { padding: 24px; border-right: 0px; }
.base-metric:first-child { background: rgb(241, 247, 250); }
.base-metric .metric-value { font-family: var(--font); font-size: clamp(30px, 3.4vw, 48px); font-weight: 550; color: var(--blue-dark); line-height: 1.05; letter-spacing: -1px; margin-bottom: 10px; max-width: 100%; overflow-wrap: anywhere; }
.base-metric .metric-label { font-size: 15px; line-height: 1.35; font-weight: 650; overflow-wrap: anywhere; }
.base-metric .metric-foot { font-size: 12px; color: var(--muted); margin-top: 8px; padding-top: 0px; gap: 8px; line-height: 1.4; max-width: 100%; overflow-wrap: anywhere; }
.base-metric:focus-visible { outline: 3px solid var(--blue); outline-offset: -4px; box-shadow: none; }
.attention-board .section-heading { margin: 0px 0px 14px; flex-direction: row; align-items: center; gap: 16px; padding: 0px; }
.attention-board .section-heading h2 { font-size: 23px; max-width: none; }
.attention-board .section-heading .eyebrow { display: none; }
.attention-instruction { font-size: 13px; max-width: none; color: var(--muted); }
.priority-list { border-top: 1px solid var(--border); background: rgb(255, 255, 255); }
.priority-row { grid-template-columns: minmax(0px, 1fr) auto 20px; gap: 18px; padding: 16px 20px; min-height: 68px; background: rgb(255, 255, 255); border-top: 0px; border-right: 0px; border-left: 0px; border-image: none; border-bottom: 1px solid var(--border); }
.priority-row.featured { background: rgb(255, 255, 255); }
.priority-row:hover { background: rgb(241, 247, 250); }
.priority-row.featured:hover { background: rgb(241, 247, 250); }
.priority-copy strong { font-size: 15px; line-height: 1.4; font-weight: 600; }
.priority-copy small { font-size: 12px; color: var(--muted); line-height: 1.5; margin-top: 3px; }
.priority-value strong { font-family: var(--font); font-size: 24px; font-weight: 550; overflow-wrap: anywhere; }
.priority-value small { max-width: none; font-size: 12px; color: var(--muted); }
.priority-arrow { display: flex; }
.overview-context { margin-top: 24px; padding-top: 18px; }
.source-explainer { font-size: 13px; line-height: 1.6; }
.nav-disclosure > summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; padding: 10px 14px; font-size: 14px; font-weight: 600; color: var(--ink); }
.nav-disclosure > summary::-webkit-details-marker { display: none; }
.nav-disclosure > summary::after { content: ""; width: 7px; height: 7px; border-style: solid; border-color: currentcolor; border-image: none; border-width: 0px 1.5px 1.5px 0px; transform: rotate(45deg); margin-right: 3px; }
.nav-disclosure[open] > summary::after { transform: rotate(225deg); }
.nav-disclosure .nav-link { padding-left: 19px; }
.navigation { gap: 16px; }
.query-form { display: block; padding: 20px 22px; border-bottom: 1px solid var(--border); background: rgb(255, 255, 255); }
.query-primary { display: grid; grid-template-columns: minmax(180px, 1.6fr) repeat(2, minmax(100px, 1fr)) auto; align-items: end; gap: 13px; }
.query-form .field { min-width: 0px; }
.query-form label.field { font-size: 13px; }
.extra-filters { margin-top: 12px; }
.extra-filters > summary { min-height: 44px; padding: 10px 0px; cursor: pointer; font-size: 14px; color: var(--blue); font-weight: 600; }
.query-secondary { display: grid; grid-template-columns: repeat(3, minmax(0px, 1fr)); gap: 13px; padding: 7px 0px 13px; }
.active-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 12px 22px; background: rgb(247, 249, 250); border-bottom: 1px solid var(--border); }
.active-filters:empty { display: none; }
.filter-chip { min-height: 36px; display: inline-flex; align-items: center; gap: 10px; max-width: 100%; padding: 6px 10px; background: rgb(255, 255, 255); border: 1px solid rgb(170, 184, 193); border-radius: 3px; color: var(--blue-dark); font-size: 13px; text-align: left; overflow-wrap: anywhere; }
.filter-chip svg { width: 15px; height: 15px; }
.query-summary { font-size: 14px; line-height: 1.5; padding: 16px 22px; background: rgb(255, 255, 255); display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.query-summary p { margin: 0px; }
.query-summary:focus { outline: 2px solid var(--blue); outline-offset: -3px; }
.query-sort { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--muted); }
.query-sort select { min-height: 44px; padding: 7px; border: 1px solid rgb(170, 181, 186); background: rgb(255, 255, 255); color: var(--ink); max-width: 100%; }
.pagination { flex-wrap: wrap; background: rgb(255, 255, 255); font-size: 13px; padding: 15px 20px; gap: 12px; }
.pagination .button-row { flex-wrap: wrap; gap: 8px; }
.table-wrap { min-width: 0px; max-width: 100%; position: relative; overflow: auto; }
th { background: rgb(245, 246, 247); font-size: 12px; text-transform: none; letter-spacing: 0px; font-weight: 650; color: rgb(73, 89, 99); }
td { font-size: 14px; line-height: 1.5; }
.student-cell { min-width: 170px; max-width: 330px; }
.student-cell a { overflow-wrap: anywhere; }
.profile-header h1 { overflow-wrap: anywhere; line-height: 1.2; }
.profile-header p { overflow-wrap: anywhere; }
.task-card h3 { overflow-wrap: anywhere; }
.task-card p { overflow-wrap: anywhere; }
.asset-body h2 { overflow-wrap: anywhere; }
.header-search { min-width: 0px; }
#task-enrollment-search { display: flex; flex-wrap: wrap; align-items: end; gap: 10px; margin: 12px 0px; }
#task-enrollment-search .field { flex: 1 1 0%; min-width: 160px; }
.enrollment-options { display: flex; flex-direction: column; gap: 6px; max-height: 260px; overflow: auto; margin: 10px 0px; }
.enrollment-options button { display: block; text-align: left; min-height: 44px; padding: 10px 12px; background: rgb(255, 255, 255); border: 1px solid var(--border); color: var(--ink); overflow-wrap: anywhere; }
.enrollment-options button:hover { background: var(--blue-light); }
.selected-enrollment { padding: 12px; margin: 12px 0px; background: var(--blue-light); color: var(--blue-dark); font-size: 14px; overflow-wrap: anywhere; }
.number { font-variant-numeric: tabular-nums; }
@media (min-width: 1600px) {
.content { padding-top: 40px; }
.hub-summary { min-height: 0px; padding: 0px; }
.base-metric .metric-value { font-size: 52px; }
}
@media (max-width: 1320px) {
.content { padding: 28px; }
.base-metric { padding: 21px; }
.base-metric:last-child { padding: 21px; }
.overview-layout { display: block; }
.hub-summary { padding: 0px; }
.query-primary { grid-template-columns: minmax(160px, 1.4fr) repeat(2, minmax(90px, 1fr)); }
.query-primary > .btn { grid-column: 1 / -1; justify-self: end; }
}
@media (max-width: 1120px) and (min-width: 901px) {
.hub-summary { display: block; min-height: 0px; padding: 0px; }
.base-metrics { grid-area: auto; margin: 0px; }
.query-primary { grid-template-columns: repeat(2, minmax(0px, 1fr)); }
.query-primary > .field:first-child { grid-column: 1 / -1; }
.query-primary > .btn { grid-column: 1 / -1; }
.query-secondary { grid-template-columns: repeat(2, minmax(0px, 1fr)); }
}
@media (max-width: 900px) {
.content { padding: 26px 24px; }
.hub-summary { min-height: 0px; padding: 0px; }
.base-metric:last-child { padding-left: 21px; }
.base-metric .metric-value { font-size: 32px; }
.base-metric .metric-label { font-size: 14px; }
.query-primary { grid-template-columns: minmax(150px, 1.4fr) repeat(2, minmax(90px, 1fr)); }
.query-primary > .btn { grid-column: 1 / -1; }
.attention-board .section-heading { flex-direction: row; }
.overview-context { flex-direction: column; }
.page-heading h1 { font-size: 32px; }
}
@media (max-width: 650px) {
.content { padding: 24px 18px; }
.page-heading { gap: 12px; margin-bottom: 20px; }
.page-heading h1 { font-size: 29px; }
.page-heading p { font-size: 14px; }
.hub-summary { padding: 0px; margin-bottom: 24px; }
.hub-summary > .eyebrow { padding: 14px 18px 0px; }
.hub-summary > .base-metrics { margin: 0px; grid-template-columns: 1fr 1fr; }
.base-metric { padding: 17px; border-right: 1px solid var(--border); }
.base-metric:last-child { padding: 17px; border-right: 0px; }
.base-metric:first-child { grid-column: 1 / -1; display: grid; grid-template-columns: auto minmax(0px, 1fr); gap: 4px 18px; align-items: center; border-top: 0px; border-right: 0px; border-left: 0px; border-image: none; border-bottom: 1px solid var(--border); }
.base-metric:first-child .metric-value { grid-row: 1 / 3; font-size: 44px; margin: 0px; }
.base-metric:first-child .metric-label { grid-column: 2; }
.base-metric:first-child .metric-foot { grid-column: 2; margin-top: 0px; }
.base-metric .metric-value { font-size: 30px; }
.base-metric .metric-label { font-size: 14px; }
.base-metric .metric-foot { font-size: 12px; line-height: 1.35; }
.priority-row { grid-template-columns: minmax(0px, 1fr) auto 16px; padding: 14px 13px; gap: 10px; min-height: 64px; }
.priority-copy strong { font-size: 14px; }
.priority-value strong { font-size: 23px; }
.priority-value small { max-width: 80px; }
.priority-arrow { display: flex; }
.priority-arrow svg { width: 16px; }
.attention-board .section-heading h2 { font-size: 22px; }
.attention-instruction { font-size: 12px; max-width: 100px; }
.query-form { padding: 12px 16px; }
.extra-filters { margin-top: 4px; }
.query-primary { grid-template-columns: repeat(2, minmax(0px, 1fr)); gap: 12px; }
.query-primary > .field:first-child { grid-column: 1 / -1; }
.query-primary > .btn { grid-column: 1 / -1; justify-self: stretch; }
.query-secondary { grid-template-columns: repeat(2, minmax(0px, 1fr)); gap: 12px; }
.query-summary { padding: 14px 16px; font-size: 13px; }
.query-sort { flex-wrap: wrap; }
.active-filters { padding: 10px 16px; }
.pagination { padding: 14px 16px; }
.task-form { padding: 18px; }
.task-card { padding: 18px; }
.summary-cell { min-width: 0px; flex-basis: 100%; }
.summary-cell strong { font-size: 26px; overflow-wrap: anywhere; }
.student-cell { max-width: 280px; }
.profile-header > div { min-width: 0px; }
.profile-header .pill { margin-left: 0px; }
.info-grid { grid-template-columns: 1fr 1fr; }
.footer { font-size: 12px; }
.query-summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 8em), 1fr)); align-items: start; gap: 12px; overflow-wrap: anywhere; }
.query-page-count { display: block; }
.query-sort { display: flex; flex-direction: column; align-items: stretch; gap: 4px; overflow-wrap: anywhere; }
.query-sort select { width: 100%; min-width: 0px; }
.selected-enrollment > span { display: block; }
.selected-enrollment > strong { display: block; }
}
@media (max-width: 370px) {
.content { padding-left: 14px; padding-right: 14px; }
.base-metric:first-child { gap: 4px 12px; }
.base-metric:first-child .metric-value { font-size: 38px; }
.query-secondary { grid-template-columns: 1fr; }
.base-metric .metric-label { font-size: 13px; }
.priority-row { grid-template-columns: minmax(0px, 1fr) auto 16px; }
}
.spinner { border-width: 2px; border-style: solid; border-color: rgb(0, 84, 133) rgb(216, 221, 224) rgb(216, 221, 224); border-image: none; }
#app { --sidebar: 220px; }
.sidebar { padding: 12px; max-height: 100dvh; overflow: hidden; }
.sidebar-brand { display: flex; align-items: center; gap: 8px; padding: 0px 0px 12px; flex-shrink: 0; }
.sidebar-brand .brand { flex: 1 1 0%; min-width: 0px; }
.sidebar-brand .brand-logo { max-width: 164px; }
.sidebar-brand .brand-caption { display: none; }
.sidebar-close { display: inline-flex; position: static; flex-shrink: 0; color: var(--muted); }
.sidebar .hub-card { flex-shrink: 0; margin: 0px 0px 12px; padding: 0px 4px 12px; border-top: 0px; gap: 0px; }
.sidebar .hub-symbol { display: none; }
.sidebar .hub-card > div { width: 100%; min-width: 0px; }
.sidebar .hub-card select { max-width: none; margin-top: 4px; }
.sidebar .hub-card strong { font-size: 14px; }
.sidebar .hub-card .eyebrow { font-size: 11px; }
.sidebar .navigation { flex: 1 1 0%; min-height: 0px; padding: 2px 5px 8px 0px; gap: 12px; overflow: hidden auto; scrollbar-gutter: stable; scrollbar-width: thin; scrollbar-color: rgb(148, 169, 183) rgb(242, 245, 247); overscroll-behavior-y: contain; }
.sidebar .nav-group { flex: 0 0 auto; gap: 1px; }
.sidebar .nav-link { flex-shrink: 0; gap: 8px; padding: 9px 8px; min-height: 44px; }
.sidebar .nav-link span { min-width: 0px; overflow-wrap: anywhere; }
.sidebar .nav-label { font-size: 11px; letter-spacing: 1px; padding: 3px 11px 4px; }
.sidebar-bottom { flex-shrink: 0; margin-top: 0px; padding: 8px 0px 0px; border-top: 1px solid rgb(216, 221, 224); }
.sidebar-bottom .demo-badge { margin: 0px; font-size: 11px; padding: 4px 7px; white-space: normal; }
.mobile-menu { display: inline-flex; gap: 6px; padding: 8px; color: var(--blue-dark); }
.mobile-menu span { font-size: 13px; font-weight: 600; }
.sidebar[aria-hidden="true"] { visibility: hidden; }
@media (min-width: 901px) {
#app.sidebar-collapsed .sidebar { transform: translateX(-100%); }
#app.sidebar-collapsed .workspace { margin-left: 0px; }
#app.sidebar-collapsed .mobile-demo { display: flex; justify-content: center; background: rgb(249, 240, 217); border-bottom: 1px solid rgb(226, 212, 159); padding: 4px 12px; }
#app.sidebar-collapsed .mobile-demo .demo-badge { border: 0px; background: transparent; font-size: 11px; padding: 0px; }
}
@media (max-width: 900px) {
#app { --sidebar: 280px; }
.sidebar { padding: 12px; height: 100dvh; max-width: calc(-48px + 100vw); }
.sidebar-brand { padding: 0px 0px 12px; }
.sidebar-brand .brand-logo { max-width: 194px; }
.sidebar-close { position: static; }
}
@media (max-width: 650px) {
.mobile-menu span { display: none; }
}
@media (max-height: 450px) {
.sidebar-brand { padding-bottom: 4px; }
.sidebar .hub-card { margin-bottom: 6px; padding-bottom: 6px; }
.sidebar-bottom { padding-top: 4px; }
}

/* A restrained editorial spread: natural portrait, generous type, precise form. */
.demo-login-page { min-height: 100svh; display: grid; place-items: center; padding: 26px; background: #eae8e1; color: #19374a; }
.demo-login-card { display: grid; grid-template-columns: 51% minmax(0, 1fr); width: min(100%, 940px); background: #faf8f2; border: 1px solid #d8d8d1; border-radius: 3px; box-shadow: 0 22px 52px -38px #162e3b50; overflow: hidden; }
.demo-login-welcome { position: relative; min-width: 0; min-height: 0; background: #f3f0e7; color: #19374a; }
.demo-login-portrait { position: absolute; width: 220px; right: 30px; bottom: 26px; margin: 0; }
.demo-login-portrait img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: contain; border: 5px solid #faf8f2; background: #faf8f2; box-shadow: 0 1px 0 #b8b6ad; }
.demo-login-portrait figcaption { position: static; margin-top: 8px; color: #52616a; font-size: 12px; line-height: 1.4; text-align: right; }
.demo-login-story { position: relative; z-index: 1; padding: 33px 34px 0; }
.demo-login-story-kicker { display: flex; align-items: center; gap: 12px; margin: 0 0 16px; font-size: 11px; line-height: 1.5; letter-spacing: 1.4px; font-weight: 600; text-transform: uppercase; color: #52616a; }
.demo-login-story-kicker::before { content: ''; width: 27px; height: 1px; background: #a88953; }
.demo-login-story h2 { max-width: 17ch; margin: 0; font-family: var(--serif); font-size: 38px; line-height: 1.1; font-weight: 400; letter-spacing: -1.15px; text-wrap: balance; }
.demo-login-welcome-note { position: absolute; bottom: 48px; left: 34px; margin: 0; max-width: 170px; color: #52616a; font-size: 13px; line-height: 1.6; }
.demo-login-welcome-note::before { display: block; content: ''; width: 24px; height: 1px; margin-bottom: 15px; background: #a88953; }
.demo-login-access { min-width: 0; padding: 28px 38px 24px; border-left: 1px solid #dddcd5; }
.demo-login-header { text-align: center; }
.demo-login-logo { display: block; width: 222px; max-width: 100%; height: auto; margin: 0 auto 21px; }
.demo-login-eyebrow { margin: 0 0 7px; color: #5d6b71; font-size: 11px; line-height: 1.5; letter-spacing: 1.4px; text-transform: uppercase; }
.demo-login-header h1 { margin: 0; font-family: var(--serif); font-size: 27px; line-height: 1.2; font-weight: 400; letter-spacing: -.6px; }
.demo-login-intro { margin: 8px auto 0; color: #61717a; font-size: 13px; line-height: 1.5; }
.demo-login-credentials { margin: 18px 0; padding: 11px 0; background: transparent; border-top: 1px solid #ddded8; border-bottom: 1px solid #ddded8; text-align: center; }
.demo-login-credentials > p { margin: 0 0 5px; color: #5d6b71; font-size: 12px; font-weight: 400; }
.demo-login-credentials dl { display: flex; justify-content: center; gap: 23px; margin: 0; }
.demo-login-credentials dl > div { display: flex; align-items: baseline; gap: 7px; }
.demo-login-credentials dt { color: #61717a; font-size: 12px; }
.demo-login-credentials dd { margin: 0; color: #254c63; font-size: 13px; font-weight: 650; font-variant-numeric: tabular-nums; }
.demo-login-form { display: flex; flex-direction: column; gap: 13px; }
.demo-login-field { display: flex; flex-direction: column; gap: 6px; color: #344b58; font-size: 13px; font-weight: 600; }
.demo-login-field input { width: 100%; min-width: 0; height: 44px; padding: 10px 13px; border: 1px solid #bac7ce; border-radius: 3px; background: #fffefa; color: #19374a; font-size: 15px; font-weight: 400; line-height: 1.4; box-shadow: inset 0 1px 2px #16354b03; }
.demo-login-field input::placeholder { color: #61717a; opacity: 1; }
.demo-login-field input:focus-visible { outline: 2px solid #005485; outline-offset: 2px; border-color: #005485; }
.demo-login-status.form-status { margin: 0; padding: 0; font-size: 13px; line-height: 1.4; color: #a72b31; }
.demo-login-status:empty { display: none; }
.demo-login-submit { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 46px; margin-top: 3px; padding: 11px 16px; border: 1px solid #193e55; border-radius: 3px; background: #193e55; color: #fff; font-size: 15px; line-height: 1.4; font-weight: 600; }
.demo-login-submit:hover { background: #005485; border-color: #005485; }
.demo-login-submit:focus-visible { outline: 2px solid #005485; outline-offset: 3px; }
.demo-login-submit:disabled { opacity: .65; }
.demo-login-footer { margin-top: 16px; padding-top: 0; text-align: center; color: #61717a; font-size: 11px; line-height: 1.5; }
.demo-login-concept { color: #586d7a; font-weight: 600; }
.demo-login-footer p { display: inline; margin: 0; }
.demo-login-footer p::before { content: ' · '; }
.pill.financial-upcoming { background: #fff0bb; color: #705000; border: 1px solid #ead08a; }
.pill.financial-overdue { background: #fbe7e9; color: #962b35; border: 1px solid #ebc4ca; }
.pill.financial-paid { background: #e5f2e8; color: #27643c; border: 1px solid #badbc4; }
.library-intro { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; padding: 21px 24px; border: 1px solid #d6e1e7; background: #edf3f6; color: #25475c; margin-bottom: 22px; }
.library-intro > svg { width: 28px; height: 28px; }
.library-intro p { max-width: 720px; color: #536974; font-size: 14px; line-height: 1.6; }
.library-intro h2, .library-intro strong { display: block; font-size: 18px; margin-bottom: 5px; font-weight: 600; }
.library-filters { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 22px; }
.library-filter { min-height: 40px; padding: 8px 13px; border: 1px solid #d2dadd; border-radius: 4px; background: #fff; color: #455b69; font-size: 13px; font-weight: 600; }
.library-filter:hover { background: #f0f4f6; }
.library-filter.is-active { border-color: #005485; background: #005485; color: #fff; }
.library-filter:focus-visible { outline: 2px solid #005485; outline-offset: 2px; }
.library-card .library-cover { min-height: 174px; padding: 20px; gap: 16px; background: #e3edf2; color: #153f58; }
.library-card .library-cover--institution { background: #e3edf2; color: #153f58; }
.library-card .library-cover--academic { background: #e8eee7; color: #385343; }
.library-card .library-cover--brand { background: #eee9df; color: #725832; }
.library-card .library-cover--operation { background: #e8e8ef; color: #4d4e69; }
.library-cover-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.library-cover-top svg { width: 24px; height: 24px; }
.library-cover-top small { font-size: 10px; letter-spacing: 1px; font-weight: 650; }
.library-cover .library-cover-title { display: block; max-width: 100%; font-family: var(--serif); font-size: 25px; font-weight: 400; line-height: 1.14; letter-spacing: -.45px; }
.library-cover-caption { display: block; font-size: 11px; line-height: 1.45; opacity: .8; }
.library-card .asset-meta { margin-bottom: 12px; font-size: 11px; }
.library-card .asset-body { gap: 0; }
.library-card .asset-body p { line-height: 1.6; }
.library-card .button-row { padding-top: 7px; }
.library-preview-cover { padding: 24px; background: #e3edf2; border-left: 3px solid #005485; margin: 0 0 23px; }
.library-preview-cover .eyebrow { display: block; font-size: 11px; color: #486c80; margin-bottom: 9px; }
.library-preview-cover h2 { color: #153f58; font-family: var(--serif); font-size: 30px; font-weight: 400; line-height: 1.2; margin: 0 0 10px; }
.library-preview-cover p { font-size: 13px; line-height: 1.6; color: #536974; }
.library-preview-logo { display: block; width: 240px; max-width: 100%; height: auto; margin: 18px 0; padding: 14px; background: #fff; border: 1px solid #e3e7e9; }
.library-preview-content section { margin: 0 0 22px; }
.library-preview-content h3 { color: #25475c; font-size: 16px; font-weight: 650; margin-bottom: 8px; }
.library-preview-content p { color: #52616a; font-size: 14px; line-height: 1.65; white-space: pre-line; }
.library-preview-content pre { margin: 12px 0; padding: 16px; border-radius: 4px; background: #f3f5f6; font-size: 13px; }
.library-preview-meta { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; padding: 17px 0; margin: 0 0 23px; border-block: 1px solid #e0e5e8; }
.library-preview-meta dt { font-size: 11px; color: #61717a; }
.library-preview-meta dd { margin: 4px 0 0; font-size: 13px; color: #344b58; font-weight: 600; overflow-wrap: anywhere; }
.library-preview-note { padding-top: 16px; border-top: 1px solid #e0e5e8; color: #61717a; font-size: 12px; line-height: 1.55; }
.library-status-legend { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 12px 0 18px; font-size: 12px; }
@media (max-width: 650px) {
  .library-intro { padding: 17px 18px; }
  .library-card .library-cover { min-height: 160px; }
  .library-preview-cover { padding: 20px; }
  .library-preview-cover h2 { font-size: 26px; }
  .library-preview-meta { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-height: 580px) and (min-width: 961px) {
  .demo-login-page { padding: 12px; }
  .demo-login-card { width: min(100%, 890px); }
  .demo-login-access { padding: 23px 35px 20px; }
  .demo-login-logo { width: 202px; margin-bottom: 16px; }
  .demo-login-eyebrow, .demo-login-intro { display: none; }
  .demo-login-header h1 { font-size: 25px; }
  .demo-login-story { padding: 25px 30px 0; }
  .demo-login-story h2 { max-width: 18ch; font-size: 33px; line-height: 1.08; }
  .demo-login-story-kicker { margin-bottom: 12px; font-size: 10px; }
  .demo-login-portrait { width: 177px; right: 27px; bottom: 20px; }
  .demo-login-portrait img { border-width: 4px; }
  .demo-login-portrait figcaption { margin-top: 6px; }
  .demo-login-welcome-note { left: 30px; bottom: 44px; font-size: 12px; }
  .demo-login-credentials { padding-top: 9px; padding-bottom: 9px; margin-top: 17px; margin-bottom: 16px; }
  .demo-login-credentials > p { margin-bottom: 4px; }
  .demo-login-form { gap: 11px; }
  .demo-login-field { gap: 4px; font-size: 12px; }
  .demo-login-field input { height: 42px; padding-top: 9px; padding-bottom: 9px; }
  .demo-login-submit { min-height: 44px; margin-top: 2px; padding-top: 10px; padding-bottom: 10px; font-size: 14px; }
  .demo-login-footer { margin-top: 15px; }
}
@media (max-height: 480px) and (min-width: 961px) {
  .demo-login-page { padding: 10px; }
  .demo-login-access { padding-top: 18px; padding-bottom: 15px; }
  .demo-login-logo { width: 180px; margin-bottom: 12px; }
  .demo-login-header h1 { font-size: 24px; }
  .demo-login-credentials { margin-top: 13px; margin-bottom: 13px; padding-top: 7px; padding-bottom: 7px; }
  .demo-login-form { gap: 9px; }
  .demo-login-field input { height: 40px; padding-top: 8px; padding-bottom: 8px; }
  .demo-login-submit { min-height: 42px; padding-top: 9px; padding-bottom: 9px; }
  .demo-login-footer { margin-top: 12px; }
  .demo-login-portrait { width: 164px; bottom: 16px; }
  .demo-login-story { padding-top: 22px; }
  .demo-login-story h2 { font-size: 31px; }
  .demo-login-welcome-note { bottom: 39px; }
}
@media (max-width: 960px) {
  .demo-login-page { padding: 18px; }
  .demo-login-card { grid-template-columns: minmax(0, 1fr); width: min(100%, 410px); }
  .demo-login-welcome { min-height: 180px; }
  .demo-login-portrait { width: 104px; right: 17px; top: 13px; bottom: auto; }
  .demo-login-portrait img { border-width: 3px; }
  .demo-login-portrait figcaption { margin-top: 6px; font-size: 12px; }
  .demo-login-story { display: flex; align-items: center; min-height: 180px; width: calc(100% - 129px); padding: 18px 0 18px 24px; }
  .demo-login-story-kicker { display: none; }
  .demo-login-story h2 { max-width: none; font-size: 24px; line-height: 1.13; letter-spacing: -.7px; text-wrap: balance; }
  .demo-login-welcome-note { display: none; }
  .demo-login-access { padding: 21px 26px 22px; border-left: 0; border-top: 1px solid #ddded8; }
  .demo-login-logo { width: 200px; margin-bottom: 16px; }
  .demo-login-header h1 { font-size: 25px; }
  .demo-login-eyebrow, .demo-login-intro { display: none; }
  .demo-login-credentials { margin-top: 17px; margin-bottom: 16px; padding: 9px 0; }
  .demo-login-credentials > p { margin-bottom: 4px; }
  .demo-login-credentials dl { gap: 20px; }
  .demo-login-form { gap: 12px; }
  .demo-login-field { font-size: 12px; }
  .demo-login-field input { height: 43px; font-size: 16px; }
  .demo-login-footer { margin-top: 17px; font-size: 11px; }
}
@media (max-width: 370px) {
  .demo-login-page { padding: 12px; }
  .demo-login-access { padding-right: 23px; padding-left: 23px; }
  .demo-login-story { padding-left: 20px; }
  .demo-login-story h2 { font-size: 23px; }
  .demo-login-credentials dl { gap: 16px; }
}