.op-public, .organization-portal { --op-ink: var(--ink); --op-muted: var(--muted); --op-line: var(--line); --op-accent: var(--accent); --op-nav: var(--ink); color: var(--op-ink); font: 14px/1.5 Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color-scheme: dark; }
.op-public { margin: 0; background: var(--page); }
.op-public *, .organization-portal * { box-sizing: border-box; }
.op-public-header { max-width: 1440px; margin: auto; padding: 24px 48px; display: flex; align-items: center; justify-content: space-between; gap: 24px; border-bottom: 1px solid var(--op-line); }
.op-brand { display: flex; gap: 16px; align-items: center; color: var(--op-nav); text-decoration: none; }
.op-brand img { width: 66px; height: 58px; object-fit: contain; }
.op-brand-copy { display: grid; gap: 3px; }
.op-brand strong { font-size: 18px; letter-spacing: -.035em; font-weight: 650; line-height: 1.3; }
.op-brand small { font-size: 10px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.op-powered { display: block; font-size: 9px; color: var(--muted); letter-spacing: .025em; }
.op-language { font-size: 10px; color: var(--op-muted); display: grid; gap: 5px; }
.op-language select { font: inherit; font-size: 12px; padding: 8px 12px; border: 1px solid var(--op-line); background: var(--panel); border-radius: 8px; color: var(--op-nav); }
.op-public-main { max-width: 1440px; margin: auto; padding: 30px 48px 48px; min-height: 76vh; }
.op-footer { padding: 24px; text-align: center; color: var(--muted); font-size: 10px; letter-spacing: .015em; }
.op-footer span { margin: 0 8px; }
.organization-portal h1, .organization-portal h2, .organization-portal h3, .organization-portal h4, .organization-portal p { margin: 0; }
.organization-portal h1 { font-size: clamp(24px, 3vw, 30px); font-weight: 600; line-height: 1.2; letter-spacing: -.045em; color: var(--op-nav); }
.organization-portal h2 { font-size: 23px; font-weight: 600; letter-spacing: -.035em; }
.organization-portal h3 { font-size: 23px; font-weight: 600; line-height: 1.25; letter-spacing: -.035em; overflow-wrap: anywhere; }
.organization-portal h4 { font-size: 13px; font-weight: 600; margin: 24px 0 12px; }
.organization-portal label { display: grid; gap: 7px; font-size: 11px; font-weight: 550; color: var(--muted); }
.organization-portal input, .organization-portal select, .organization-portal textarea { min-width: 0; width: 100%; background: var(--panel); color: var(--op-ink); border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; font: inherit; font-size: 13px; transition: border-color .15s, box-shadow .15s; }
.organization-portal textarea { resize: vertical; min-height: 100px; }
.organization-portal input:focus, .organization-portal select:focus, .organization-portal textarea:focus { outline: 0; box-shadow: 0 0 0 3px #2563eb12; border-color: #8ba9e7; }
.organization-portal button { font: inherit; cursor: pointer; }
.organization-portal button:disabled { opacity: .6; cursor: wait; }
.organization-portal button:focus-visible, .organization-portal a:focus-visible, .organization-portal summary:focus-visible { outline: 2px solid #2563eb; outline-offset: 3px; }
.organization-portal .op-primary, .organization-portal .op-secondary { display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--line); border-radius: 8px; padding: 10px 15px; text-decoration: none; font-weight: 550; font-size: 12px; background: var(--panel); color: var(--ink); transition: background .15s; }
.organization-portal .op-primary { border-color: var(--op-accent); background: var(--op-accent); color: white; }
.organization-portal .op-primary:hover { background: #3b82f6; }
.organization-portal .op-secondary:hover { background: var(--soft); }
.organization-portal .op-eyebrow { color: var(--muted); text-transform: uppercase; letter-spacing: .13em; font-weight: 600; font-size: 9px; margin: 0 0 8px; }
.op-login { max-width: 450px; margin: 5vh auto 0; border: 1px solid var(--op-line); padding: 36px; border-radius: 8px; background: var(--panel); box-shadow: 0 12px 44px #0f172a06; }
.op-login-icon { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin-bottom: 26px; border-radius: 8px; background: var(--page); color: var(--muted); border: 1px solid var(--line); }
.op-login > p:not(.op-eyebrow) { color: var(--op-muted); margin: 14px 0 28px; font-size: 13px; }
.op-login form { display: grid; gap: 19px; }
.op-login [data-op-login-status]:empty { display: none; }
.op-login > small { display: block; color: var(--op-muted); margin-top: 24px; font-size: 10px; }
.op-home { display: block; color: var(--muted); margin-top: 18px; font-size: 11px; text-decoration: none; }
.op-portal-header, .op-viewer-heading { display: flex; justify-content: space-between; align-items: center; gap: 20px; margin: 6px 0 24px; }
.op-viewer-heading { margin-top: 30px; }
.op-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.op-updated { font-size: 10px; color: var(--muted); }
.op-metrics { display: grid; grid-template-columns: repeat(4, 1fr); background: var(--panel); border: 1px solid var(--op-line); border-radius: 8px; overflow: hidden; margin: 0 0 24px; }
.op-metrics article { padding: 22px 24px; display: grid; gap: 9px; border-right: 1px solid var(--op-line); }
.op-metrics article:last-child { border-right: 0; }
.op-metrics span { color: var(--op-muted); font-size: 10px; font-weight: 500; }
.op-metrics strong { font-size: 31px; font-weight: 550; letter-spacing: -.045em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.op-browser { display: grid; grid-template-columns: minmax(250px, 300px) minmax(0, 1fr); align-items: start; gap: 24px; }
.op-roster { padding: 18px; background: var(--panel); border: 1px solid var(--op-line); border-radius: 8px; display: grid; gap: 15px; }
.op-student-list { display: grid; gap: 3px; max-height: 700px; overflow-y: auto; padding-top: 8px; border-top: 1px solid var(--op-line); }
.organization-portal .op-student-button { width: 100%; display: flex; align-items: center; gap: 10px; text-align: left; background: transparent; border: 1px solid transparent; padding: 12px 9px; border-radius: 8px; color: var(--op-ink); }
.organization-portal .op-student-button:hover { background: var(--soft); }
.organization-portal .op-student-button.selected { border-color: var(--line); background: var(--accent-soft); }
.op-student-copy { flex: 1; min-width: 0; }
.op-student-button strong { font-size: 12px; font-weight: 550; display: block; overflow-wrap: anywhere; }
.op-student-button small { font-size: 10px; color: var(--op-muted); display: block; margin-top: 3px; }
.op-student-button > b { font-size: 11px; font-weight: 550; color: var(--muted); font-variant-numeric: tabular-nums; }
.op-avatar { position: relative; flex: 0 0 36px; width: 36px; height: 36px; display: grid; place-items: center; overflow: hidden; background: var(--nav-soft); color: var(--muted); border-radius: 50%; font-size: 11px; font-weight: 600; }
.op-avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
.op-avatar-large { flex-basis: 68px; width: 68px; height: 68px; font-size: 21px; box-shadow: 0 0 0 4px #f8fafc; }
.op-student-detail { background: var(--panel); border: 1px solid var(--op-line); border-radius: 8px; padding: 28px; min-width: 0; }
.op-detail-header { display: flex; align-items: start; justify-content: space-between; gap: 16px; }
.op-student-identity { display: flex; align-items: center; gap: 18px; min-width: 0; }
.op-student-identity > div { min-width: 0; }
.op-detail-header p:not(.op-eyebrow) { color: var(--op-muted); font-size: 10px; margin: 10px 0 0; }
.op-badge { display: inline-block; font-size: 9px; font-weight: 550; border-radius: 999px; padding: 5px 10px; background: var(--accent-soft); color: var(--accent-strong); white-space: nowrap; }
.op-badge.op-graduated { background: var(--success-soft); color: var(--success); }
.op-badge.op-inactive { background: var(--nav-soft); color: var(--muted); }
.op-dmv { margin: 26px 0; border-radius: 8px; background: var(--soft); border: 1px solid var(--line); padding: 16px 18px; display: flex; align-items: center; gap: 14px; color: var(--ink); }
.op-dmv > span { display: grid; place-items: center; flex: 0 0 36px; height: 36px; border: 1px solid var(--op-line); border-radius: 8px; background: var(--panel); color: var(--muted); }
.op-dmv div { display: grid; gap: 4px; }
.op-dmv small { font-weight: 500; font-size: 10px; color: var(--op-muted); }
.op-dmv strong { font-size: 14px; font-weight: 550; }
.op-dmv div > span { font-size: 11px; color: var(--op-muted); }
.op-notes { padding: 0 0 24px; margin: 0 0 8px; border-bottom: 1px solid var(--op-line); }
.op-notes-heading { display: flex; align-items: center; flex-wrap: wrap; justify-content: space-between; gap: 8px; margin-bottom: 12px; }
.op-notes-heading h4 { margin: 0; }
.op-notes-empty { color: var(--muted); font-size: 11px; }
.op-note-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.op-note-list li { padding: 14px 16px; border-left: 2px solid var(--line); background: var(--soft); border-radius: 0 8px 8px 0; }
.op-note-meta { display: flex; align-items: center; flex-wrap: wrap; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.op-note-meta time { font-size: 9px; color: var(--op-muted); }
.op-note-meta > span { display: flex; gap: 12px; }
.op-note-list p { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 12px; line-height: 1.7; color: var(--ink); }
.organization-portal .op-text-button { border: 0; padding: 3px 0; background: transparent; color: var(--accent-strong); font-size: 10px; font-weight: 500; }
.organization-portal .op-text-button:hover { color: var(--op-accent); text-decoration: underline; }
.organization-portal .op-note-remove { color: var(--danger); }
.op-note-form { margin-top: 16px; display: grid; gap: 10px; }
.op-note-form small { color: var(--op-muted); font-size: 10px; }
[data-op-note-status]:not(:empty) { margin-top: 12px; }
.op-tabs { display: flex; gap: 24px; border-bottom: 1px solid var(--op-line); margin: 0 0 24px; }
.organization-portal .op-tabs button { border: 0; padding: 14px 0 12px; border-bottom: 2px solid transparent; background: transparent; color: var(--op-muted); font-weight: 550; font-size: 12px; }
.organization-portal .op-tabs button[aria-selected=true] { border-bottom-color: var(--op-accent); color: var(--op-accent); }
.op-overall { display: flex; justify-content: space-between; align-items: center; font-size: 12px; font-weight: 500; margin-bottom: 16px; }
.op-overall strong { font-size: 23px; font-weight: 550; letter-spacing: -.025em; }
.op-progress-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.op-progress-grid article { padding: 18px 16px; background: var(--soft); border: 1px solid var(--line); border-radius: 8px; display: grid; gap: 10px; }
.op-progress-grid span { font-size: 10px; color: var(--op-muted); font-weight: 500; }
.op-progress-grid strong { font-size: 25px; font-weight: 550; letter-spacing: -.03em; }
.op-progress-grid progress { width: 100%; height: 4px; appearance: none; border: 0; border-radius: 6px; overflow: hidden; background: var(--nav-soft); }
.op-progress-grid progress::-webkit-progress-bar { background: var(--nav-soft); border-radius: 6px; }
.op-progress-grid progress::-webkit-progress-value { background: #6081c5; border-radius: 6px; }
.op-progress-grid progress::-moz-progress-bar { background: #6081c5; border-radius: 6px; }
.op-records { border: 1px solid var(--op-line); border-radius: 8px; margin-bottom: 9px; overflow: hidden; }
.op-records summary { padding: 13px 15px; cursor: pointer; font-size: 12px; font-weight: 550; background: var(--panel); }
.op-records summary span { float: right; font-weight: 400; color: var(--op-muted); font-size: 10px; }
.op-records ul { list-style: none; margin: 0; padding: 0 15px; }
.op-records li { display: flex; gap: 10px; align-items: start; padding: 11px 0; border-top: 1px solid var(--line); font-size: 11px; }
.op-records li strong { font-weight: 500; }
.op-records li small { display: block; color: var(--op-muted); font-size: 10px; margin-top: 3px; }
.op-record-icon { color: #94a3b8; }
.op-record-icon.done { color: var(--success); }
.op-evaluation { padding: 14px 15px; border-top: 1px solid var(--line); font-size: 11px; }
.op-evaluation small { display: block; color: var(--op-muted); margin: 4px 0 8px; }
.op-evaluation ul { padding: 0; }
.op-evaluation li { justify-content: space-between; }
.op-attendance-metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 20px; }
.op-attendance-metrics article { display: grid; gap: 7px; padding: 16px; background: var(--soft); border: 1px solid var(--line); border-radius: 8px; }
.op-attendance-metrics strong { font-size: 23px; font-weight: 550; }
.op-attendance-metrics span { color: var(--op-muted); font-size: 10px; }
.op-table-wrap { overflow-x: auto; }
.organization-portal table { width: 100%; border-collapse: collapse; font-size: 11px; }
.organization-portal th { text-align: left; font-size: 10px; font-weight: 500; color: var(--op-muted); background: var(--soft); padding: 12px; }
.organization-portal td { padding: 14px 12px; border-bottom: 1px solid var(--line); }
.op-muted { color: var(--op-muted); font-size: 10px; }
.organization-portal .op-notice { padding: 14px; border-radius: 8px; background: var(--page); font-size: 12px; color: var(--op-muted); }
.organization-portal .op-notice.op-error { background: var(--danger-soft); color: var(--danger); }
.op-staff-toolbar { display: flex; flex-wrap: wrap; align-items: end; gap: 12px; margin-bottom: 18px; }
.op-staff-toolbar label:first-child { min-width: 220px; flex: 1; }
.op-preview-note { padding: 14px 18px; background: var(--soft); border: 1px solid var(--op-line); border-radius: 8px; color: var(--muted); margin-bottom: 22px; }
.op-preview-note strong { font-size: 12px; font-weight: 550; }
.op-preview-note p { font-size: 11px; margin-top: 5px; }
.op-preview-note small { display: block; color: var(--op-muted); margin-top: 7px; font-size: 10px; }
.op-admin { margin-top: 24px; border: 1px solid var(--op-line); border-radius: 8px; padding: 20px; background: var(--panel); }
.op-admin > summary { cursor: pointer; font-weight: 550; font-size: 13px; }
.op-admin > p { color: var(--op-muted); font-size: 11px; margin: 12px 0 18px; }
.op-account-form, .op-admin > form { display: flex; flex-wrap: wrap; align-items: end; gap: 12px; margin: 18px 0; }
.op-account-form label, .op-admin > form label { flex: 1; min-width: 180px; }
.op-account-form label small { font-weight: 400; font-size: 9px; color: var(--op-muted); }
.op-accounts { display: grid; gap: 12px; }
.op-accounts article { padding: 15px; border: 1px solid var(--op-line); border-radius: 8px; }
.op-account-heading { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.op-account-heading > div { flex: 1; }
.op-account-heading small { display: block; color: var(--op-muted); font-size: 10px; }
.op-accounts details { margin-top: 12px; font-size: 11px; }
.op-accounts summary { color: var(--muted); cursor: pointer; }
@media (max-width: 1050px) { .op-browser { grid-template-columns: 240px minmax(0, 1fr); gap: 16px; } .op-student-detail { padding: 22px; } .op-student-identity { gap: 12px; } .op-avatar-large { flex-basis: 56px; width: 56px; height: 56px; } }
@media (max-width: 760px) {
  .op-public-header { padding: 20px; gap: 12px; } .op-public-main { padding: 24px 16px 32px; } .op-brand { gap: 10px; } .op-brand img { width: 42px; height: 46px; }
  .op-brand strong { font-size: 13px; max-width: 180px; } .op-brand small { font-size: 8px; } .op-powered { font-size: 8px; } .op-language span { display: none; } .op-language select { font-size: 11px; padding: 8px; }
  .op-login { padding: 28px; margin-top: 3vh; } .op-login h1 { font-size: 25px; }
  .op-portal-header, .op-viewer-heading { align-items: start; flex-direction: column; gap: 12px; }
  .op-metrics { grid-template-columns: repeat(2, 1fr); } .op-metrics article { padding: 18px 20px; } .op-metrics article:nth-child(2) { border-right: 0; } .op-metrics article:nth-child(-n+2) { border-bottom: 1px solid var(--op-line); } .op-metrics strong { font-size: 27px; }
  .op-browser { grid-template-columns: minmax(0, 1fr); gap: 16px; } .op-student-list { max-height: 230px; } .op-student-detail { padding: 20px 16px; }
  .op-detail-header { gap: 8px; } .op-student-identity { gap: 12px; align-items: start; } .organization-portal h3 { font-size: 20px; } .op-detail-header .op-eyebrow { font-size: 8px; } .op-avatar-large { flex-basis: 48px; width: 48px; height: 48px; font-size: 16px; }
  .op-progress-grid article { padding: 14px 11px; } .op-progress-grid { gap: 7px; } .op-progress-grid span { min-height: 30px; } .op-progress-grid strong { font-size: 23px; }
  .op-attendance-metrics { gap: 6px; } .op-attendance-metrics article { padding: 12px 9px; } .op-note-meta { align-items: start; } .op-note-meta > span { flex-wrap: wrap; }
  .op-staff-toolbar { gap: 10px; } .op-staff-toolbar label:first-child { min-width: 100%; } .op-account-form { display: grid; grid-template-columns: 1fr; } .op-account-form label { min-width: 0; } .op-account-heading > div { min-width: 100%; }
}
@media (prefers-reduced-motion: reduce) { .organization-portal input, .organization-portal select, .organization-portal textarea, .organization-portal .op-primary, .organization-portal .op-secondary { transition: none; } }

/* The organization portal shares the same surfaces and authentication layout as CDLCore. */
body.op-public { min-height: 100svh; display: flex; flex-direction: column; background: var(--cdlcore-background); }
.op-public-header { width: 100%; margin: 0 auto; }
.op-public-main { width: 100%; flex: 1; }
.op-auth-stage { width: min(100%, 430px); display: grid; justify-items: center; gap: 22px; margin: auto; }
.op-public-main[data-view="auth"] { display: grid; place-items: center; min-height: calc(100svh - 72px); padding: 80px 24px 32px; }
.op-public:has(.op-public-main[data-view="auth"]) .op-public-header { position: absolute; inset: 0 0 auto; width: 100%; border: 0; justify-content: flex-end; }
.op-public:has(.op-public-main[data-view="auth"]) .op-brand { display: none; }
.op-login { width: 100%; max-width: 430px; margin: 0; padding: 28px; border-radius: 8px; background: var(--panel); border-color: var(--line); box-shadow: 0 28px 90px rgba(0, 0, 0, .34); }
.op-login h1 { color: var(--ink); font-size: 32px; line-height: 1; font-weight: 800; letter-spacing: -.035em; }
.op-login > p:not(.op-eyebrow) { margin: 12px 0 24px; font-size: 16px; line-height: 1.5; }
.organization-portal .op-eyebrow { color: var(--accent-strong); font-size: 12px; font-weight: 800; letter-spacing: .02em; }
.organization-portal label { color: var(--muted); font-size: 13px; font-weight: 700; }
.organization-portal :is(input, select, textarea), .op-language select { border-color: var(--line); border-radius: 8px; background: var(--soft); color: var(--ink); }
.organization-portal :is(input, select, textarea)::placeholder { color: var(--muted); }
.organization-portal :is(input, select, textarea):focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(96, 165, 250, .16); }
.organization-portal .op-primary { border-color: var(--accent); background: var(--accent); color: #fff; font-weight: 800; font-size: 14px; border-radius: 8px; min-height: 44px; box-shadow: 0 8px 18px rgba(37, 99, 235, .22); }
.organization-portal .op-primary:hover { background: #3b82f6; }
.op-login .op-primary, .op-login input { min-height: 52px; font-size: 16px; }
.organization-portal .op-secondary { border-color: var(--line); background: var(--nav-soft); color: var(--ink); font-size: 13px; font-weight: 700; border-radius: 8px; min-height: 44px; }
.organization-portal .op-secondary:hover { background: #24324a; }
.op-brand, .organization-portal h1 { color: var(--ink); }
.op-brand small, .op-home, .op-accounts summary, .op-preview-note, .op-note-list p, .op-dmv { color: var(--muted); }
.op-metrics, .op-roster, .op-student-detail, .op-admin, .op-records summary { background: var(--panel); border-color: var(--line); border-radius: 8px; }
.op-dmv, .op-progress-grid article, .op-attendance-metrics article, .op-note-list li, .op-preview-note, .organization-portal th { background: var(--soft); border-color: var(--line); }
.organization-portal td, .op-records li, .op-evaluation { border-color: var(--line); }
.op-student-button > b { color: var(--muted); }
.organization-portal .op-student-button:hover { background: var(--nav-soft); }
.organization-portal .op-student-button.selected { background: var(--accent-soft); border-color: var(--accent); }
.op-avatar { background: var(--nav-soft); color: var(--muted); }
.op-avatar-large { box-shadow: 0 0 0 4px var(--soft); }
.op-badge { background: var(--accent-soft); color: var(--accent-strong); }
.op-badge.op-graduated { background: var(--success-soft); color: var(--success); }
.op-badge.op-inactive { background: var(--nav-soft); color: var(--muted); }
.organization-portal .op-notice { background: var(--soft); color: var(--muted); }
.organization-portal .op-notice.op-error { background: var(--danger-soft); color: var(--danger); }
.op-progress-grid progress, .op-progress-grid progress::-webkit-progress-bar { background: var(--nav-soft); }
.op-progress-grid progress::-webkit-progress-value { background: var(--accent); }
.op-progress-grid progress::-moz-progress-bar { background: var(--accent); }
.organization-portal .op-text-button { color: var(--accent-strong); }
.organization-portal .op-note-remove { color: var(--danger); }

@media (max-width: 760px) {
  .op-public-main[data-view="auth"] { padding: 80px 18px 24px; }
  .op-login { padding: 22px; }
}

/* Every comparison uses the same six-week domain, percentage scale and card dimensions. */
.op-comparison { margin-top: 28px; container-type: inline-size; }
.op-comparison-heading { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px; }
.organization-portal .op-comparison h4 { margin: 0; font-size: 16px; }
.op-comparison-heading > p, .op-comparison-intro { color: var(--muted); font-size: 12px; }
.organization-portal .op-comparison-intro { margin: 8px 0 12px; }
.op-comparison-legend { display: flex; flex-wrap: wrap; gap: 12px 22px; margin-bottom: 16px; font-size: 12px; color: var(--ink); }
.op-comparison-legend > span { display: inline-flex; align-items: center; gap: 8px; }
.op-comparison-legend i { display: inline-block; width: 26px; border-top: 3px solid var(--accent); }
.op-comparison-legend .op-legend-average { border-top: 2px dashed #a8b3c7; }
.op-comparison-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
.op-comparison-card { min-width: 0; margin: 0; padding: 16px 12px 14px; background: var(--soft); border: 1px solid var(--line); border-radius: 8px; }
.op-comparison-card figcaption { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 14px; padding: 0 4px 8px; min-height: 60px; align-content: start; }
.op-comparison-card h5 { margin: 0; font-size: 13px; font-weight: 650; }
.op-comparison-card figcaption > span { color: var(--muted); font-size: 12px; }
.op-comparison-card figcaption strong { color: var(--ink); font-size: 15px; font-variant-numeric: tabular-nums; }
.op-comparison-chart { display: block; width: 100%; height: auto; max-height: 270px; overflow: visible; }
.op-chart-grid { stroke: var(--line); stroke-width: 1; }
.op-chart-axis, .op-chart-reference-value { fill: var(--muted); font-size: 11px; font-family: inherit; }
.op-curve-average, .op-curve-student { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.op-curve-average { stroke: #a8b3c7; stroke-width: 2; stroke-dasharray: 6 5; }
.op-curve-student { stroke: var(--accent); stroke-width: 3; }
.op-point-average { fill: var(--soft); stroke: #a8b3c7; stroke-width: 1.8; }
.op-point-student { fill: var(--accent); stroke: var(--soft); stroke-width: 1.5; }
.op-point-today { stroke: var(--accent-strong); stroke-width: 2; }
.organization-portal .op-chart-help { margin: 4px 4px 0; color: var(--muted); font-size: 11px; line-height: 1.5; min-height: 6em; }
.op-comparison-data { margin-top: 14px; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.op-comparison-data > summary { padding: 12px 14px; color: var(--accent-strong); font-size: 12px; cursor: pointer; }
.op-comparison-data table { min-width: 560px; }
.op-comparison-data td small { display: block; margin-top: 3px; color: var(--muted); }
@container (min-width: 800px) {
  .op-comparison-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .op-comparison-card figcaption { min-height: 60px; align-content: start; }
  .op-chart-help { min-height: 6em; }
}

/* Staff-only organization attendance setting. */
.op-visibility { padding: 16px 18px; margin-bottom: 22px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); }
.organization-portal .op-visibility label { display: flex; align-items: center; gap: 10px; cursor: pointer; font-size: 13px; }
.organization-portal .op-visibility input[type="checkbox"] { width: 18px; height: 18px; margin: 0; padding: 0; flex: 0 0 18px; accent-color: var(--accent, #2563eb); }
.op-visibility p { margin: 8px 0 0; color: var(--muted); font-size: 11px; line-height: 1.5; }
.op-visibility .op-notice { margin: 10px 0 0; padding: 8px 10px; font-size: 11px; }