/* The welcome stays Azure; the underlying app keeps the visitor's chosen theme. */
html.onboarding-pending #appShell { visibility: hidden; }
.ob-root { --ob-safe-top:var(--safe-top,env(safe-area-inset-top,0px)); --ob-safe-bottom:env(safe-area-inset-bottom,0px); isolation:isolate; --ob-ink:#153f4f; --ob-muted:#567684; --ob-blue:#09b9e8; --ob-soft:#e6f8fc; --ink:#153f4f; --ink-80:#315e6b; --muted:#567684; --blue:#08b7e4; --blue-text:#0485a8; --accent-fill:#007f9f; --accent-ink:#fff; --surface-soft:#e6f8fc; --surface-soft-2:#f5fbfd; --control-line:#cde8f0; --input-surface:#f5fbfd; color:var(--ob-ink); color-scheme:light; font-family:"Inter",sans-serif; position:fixed; inset:0; z-index:200; width:min(100%,430px); margin-inline:auto; overflow:auto; overscroll-behavior:contain; scrollbar-width:none; background:#fff; }
.ob-root[hidden] { display:none; }
.ob-root [hidden] { display:none !important; }
.ob-root * { box-sizing:border-box; }
.ob-root h1,.ob-root h2,.ob-root p { margin:0; }
.ob-root h1,.ob-root h2,.ob-role span { overflow-wrap:anywhere; min-width:0; }
.ob-root button,.ob-root input,.ob-root select { font-family:inherit; }
.ob-root [data-ob-focus]:focus { outline:none; }
.ob-root button { min-height:44px; cursor:pointer; }
.ob-root button:disabled { opacity:.5; cursor:wait; }
.ob-root button:focus-visible,.ob-root input:focus-visible,.ob-root select:focus-visible,.ob-invitation button:focus-visible { outline:3px solid #1670a5; outline-offset:3px; }
.ob-primary,.ob-secondary,.ob-text { border:0; appearance:none; text-decoration:none; }
.ob-primary { display:flex; align-items:center; justify-content:center; width:100%; border-radius:18px; background:#007f9f; color:white; padding:13px 14px; font-size:18px; font-weight:700; line-height:1.25; text-align:center; }
.ob-primary:hover { background:#006d89; }
.ob-secondary { border-radius:14px; background:#e6f5f9; color:#194957; padding:11px 16px; font-weight:600; }
.ob-text { background:transparent; color:#346779; padding:8px 6px; font-size:14px; font-weight:550; }
.ob-welcome { display:flex; flex-direction:column; background:#35cdf3; }
.ob-welcome-art { height:41.6%; min-height:250px; position:absolute; top:0; left:0; width:100%; overflow:hidden; }
.ob-welcome-art img { width:100%; height:100%; object-fit:cover; object-position:center bottom; display:block; }
.ob-brand { position:absolute; top:calc(var(--ob-safe-top) + 18px); left:22px; right:22px; display:flex; justify-content:space-between; align-items:center; z-index:1; gap:10px; color:#153f4f; font-size:21px; font-weight:750; letter-spacing:-.7px; }
.ob-brand .ob-text { color:#153f4f; font-size:12px; max-width:110px; }
.ob-welcome-sheet { margin-top:calc(var(--viewport-height,100dvh) * .416); position:relative; flex:1; background:white; border-radius:34px 34px 0 0; padding:34px 18px max(25px,var(--ob-safe-bottom)); display:flex; flex-direction:column; gap:14px; }
.ob-handle { position:absolute; width:60px; height:5px; border-radius:8px; background:#c4e4ee; top:12px; left:calc(50% - 30px); }
.ob-welcome h1 { font-size:46px; font-weight:800; letter-spacing:-1.9px; line-height:.97; margin:4px 4px 2px; color:#153f4f; }
.ob-lead { color:#547582; font-size:20px; line-height:1.35; letter-spacing:-.5px; padding:0 4px; }
.ob-roles { border:0; margin:3px 0 1px; padding:0; display:grid; gap:8px; min-width:0; }
.ob-role { display:flex; align-items:center; gap:20px; padding:12px 18px; min-height:74px; border:1px solid #dceef3; border-radius:16px; cursor:pointer; background:white; }
.ob-role:has(input:checked) { background:#e3f7fc; border-color:#e3f7fc; }
.ob-role input { appearance:none; width:32px; height:32px; border:2px solid #94b3c3; border-radius:50%; background:white; margin:0; flex-shrink:0; }
.ob-role input:checked { border-color:#07b9ec; background:#07b9ec; box-shadow:inset 0 0 0 5px white; }
.ob-role b { display:block; font-size:20px; line-height:1.2; font-weight:750; letter-spacing:-.5px; }
.ob-role small { display:block; font-size:16px; color:#597c8c; margin-top:4px; line-height:1.2; letter-spacing:-.4px; }
.ob-welcome-sheet > .ob-primary { margin-top:auto; min-height:56px; font-size:21px; }
.ob-step-header { position:sticky; top:0; z-index:4; background:#fff; min-height:calc(72px + var(--ob-safe-top)); display:flex; align-items:center; justify-content:space-between; gap:10px; padding:calc(16px + var(--ob-safe-top)) 20px 16px; border-bottom:1px solid #e6f0f4; font-size:14px; font-weight:650; }
.ob-step-header > span { color:#547582; }
.ob-setup-body,.ob-optional-body { padding:26px 22px; }
.ob-eyebrow { font-size:11px; line-height:1.4; text-transform:uppercase; letter-spacing:1px; color:#567c8a; font-weight:650; }
.ob-setup-body h1,.ob-optional-body h1 { color:var(--ob-ink); margin:12px 0; font-size:34px; font-weight:750; letter-spacing:-1.2px; line-height:1.08; }
.ob-copy { font-size:16px; color:var(--ob-muted); line-height:1.5; margin:0 0 22px !important; }
.ob-setup .owner-settings { background:transparent; border:0; border-radius:0; padding:0; margin:20px 0 0; box-shadow:none; }
.ob-setup .owner-settings h2 { display:none; }
.ob-setup .field,.ob-department { display:grid; gap:7px; margin:16px 0; color:#194957; }
.ob-setup .field > span { font-size:14px; font-weight:650; color:#194957; }
.ob-setup input,.ob-setup select { width:100%; min-height:50px; border:1px solid #cde8f0; border-radius:12px; background:#f5fbfd; color:#194957; padding:10px 12px; box-shadow:none; font-size:16px; }
.ob-setup .helper-copy { color:#567684; font-size:13px; line-height:1.5; }
.ob-setup #saveOwnerButton { margin-top:24px; color:white; background:#007f9f; border:0; min-height:54px; border-radius:16px; width:100%; }
.ob-error { color:#88541b; font-size:13px; line-height:1.5; margin-top:12px !important; }
.ob-tour { background:transparent; pointer-events:none; overflow:hidden; }
.ob-tour-card { pointer-events:auto; position:absolute; z-index:3; bottom:94px; left:12px; right:12px; display:flex; flex-direction:column; padding:16px; border:1px solid #cdebf4; border-radius:20px; background:#fff; box-shadow:0 4px 18px #08263826; max-height:50%; overflow:hidden; }
.ob-tour-card h2 { color:#153f4f; font-size:22px; font-weight:750; letter-spacing:-.7px; line-height:1.15; margin:10px 0; }
.ob-tour-copy { overflow:auto; min-height:0; overscroll-behavior:contain; scrollbar-width:thin; }
.ob-tour-card p:not(.ob-eyebrow) { font-size:15px; line-height:1.4; color:#3e6474; margin:8px 0; }
.ob-tour-card .ob-tour-detail { font-size:14px !important; }
.ob-tour-top,.ob-tour-actions { display:flex; justify-content:space-between; align-items:center; gap:10px; flex-shrink:0; }
.ob-tour-top .ob-text { min-height:32px; font-size:12px; padding:4px; }
.ob-tour-actions { margin-top:12px; }
.ob-tour-actions .ob-primary { width:auto; flex:1; min-height:46px; font-size:16px; }
.ob-tour-actions .ob-text { padding-inline:8px; }
.ob-highlight { position:fixed; z-index:1; border-radius:12px; outline:2px solid #09bae7; box-shadow:0 0 0 3px #fff; pointer-events:none; }
.ob-tour-sample { position:absolute; z-index:2; padding:14px; overflow:auto; border-radius:12px; background:#ecf8fc; color:#153f4f; pointer-events:auto; }
.ob-example-line { display:grid; grid-template-columns:20px 1fr; gap:4px 8px; margin-top:14px; font-size:14px; line-height:1.3; }
.ob-example-line img { width:18px; height:18px; grid-row:span 2; }
.ob-example-line span { color:#547582; }
/* Reserve room for the explanation: the live schedule never sits beneath it. */
html.ob-tour-active #appShell { --panel-top:var(--ob-panel-top,180px) !important; }
html.ob-tour-active #screenSchedule .hero { padding:calc(12px + var(--safe-top)) 20px 10px; transition:none; }
html.ob-tour-active #screenSchedule .hero-main { min-height:0; }
html.ob-tour-active #screenSchedule .day-heading h1 { font-size:32px; line-height:36px; }
html.ob-tour-active #screenSchedule .day-heading p { font-size:20px; line-height:24px; }
html.ob-tour-active #schedulePanel { bottom:var(--ob-panel-bottom,360px); border-radius:28px 28px 0 0; padding-top:10px; gap:8px; transition:none; }
html.ob-tour-active #scheduleScroll { padding-bottom:8px; }
html.ob-tour-active .hero-meta-blur { display:none; }
html.ob-tour-example-active #scheduleScroll { visibility:hidden; }
.ob-invitation { padding:17px; margin:8px 0 18px; background:var(--surface-soft,#eaf6ff); border:1px solid var(--line,#d8edf6); border-radius:16px; color:var(--ink-80,#194957); }
.ob-invitation strong { display:block; font-size:16px; line-height:1.35; }
.ob-invitation p { font-size:13px; line-height:1.4; margin:8px 0 12px; }
.ob-invitation > div { display:flex; align-items:center; gap:12px; }
.ob-invitation .ob-primary { width:auto; font-size:14px; min-height:42px; }
.ob-invitation .ob-text { color:inherit; }
.ob-optional { display:flex; flex-direction:column; }
.ob-optional-body { flex:1; }
.ob-optional-footer { padding:12px 22px max(16px,var(--ob-safe-bottom)); border-top:1px solid #e5f0f4; }
.ob-optional-footer > div { display:flex; justify-content:space-between; }
.ob-optional-footer > .ob-text { width:100%; }
.ob-extra-main { display:grid; gap:10px; margin:22px 0 8px; }
.ob-extra-main .ob-primary { min-height:54px; }
.ob-info { padding:17px; background:#ecf8fc; border-radius:15px; color:#315c6c; font-size:15px; line-height:1.5; }
.ob-info p { margin-top:8px; }
.ob-optional .notification-settings { background:transparent; border:0; border-radius:0; padding:0; box-shadow:none; color:#194957; }
.ob-optional .notification-settings h2 { font-size:20px; color:#194957; }
.ob-optional .notification-settings .helper-copy { color:#547582; line-height:1.5; }
.ob-optional .switch-row b { color:#194957; }
.ob-optional .switch-row small { color:#547582; }
.ob-optional .notification-settings .primary-button { background:#007f9f; border:0; color:white; }
.ob-flowbar { pointer-events:none; background:transparent; overflow:visible; top:auto; }
.ob-flowbar-inner { pointer-events:auto; background:white; padding:14px 20px max(14px,var(--ob-safe-bottom)); box-shadow:0 -6px 30px #193f5326; border-radius:20px 20px 0 0; }
.ob-flowbar-inner > strong { display:block; font-size:14px; color:#194957; margin-bottom:7px; }
.ob-flowbar-inner > div { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.ob-flowbar-inner .ob-primary { width:auto; font-size:15px; min-width:140px; }
.ob-flowbar-links .ob-text { font-size:12px; min-height:35px; }
html.ob-external-step .detail-content,html.ob-external-step .root-page-scroll { padding-bottom:190px !important; }
html.ob-account-teacher #cProfileForm { display:none !important; }
.ob-restart { margin-bottom:20px; }
@media (max-width:359px) {
 .ob-welcome h1 { font-size:39px; }
 .ob-lead { font-size:17px; }
 .ob-role { gap:12px; padding:12px; }
 .ob-role b { font-size:18px; }
 .ob-role small { font-size:14px; }
 .ob-welcome-sheet { padding:36px 15px 20px; gap:11px; }
 .ob-brand { font-size:19px; left:19px; }
}
@media (max-height:760px) {
 .ob-welcome-art { height:35%; min-height:210px; }
 .ob-welcome-sheet { margin-top:calc(var(--viewport-height,100dvh) * .35); padding-top:34px; gap:12px; }
 .ob-welcome h1 { font-size:42px; }
 .ob-lead { font-size:18px; }
 .ob-role { min-height:65px; padding:10px 16px; }
 .ob-welcome-sheet > .ob-primary { min-height:52px; }
}
@media (prefers-reduced-motion:reduce) { .ob-root * { animation:none !important; transition:none !important; scroll-behavior:auto !important; } }

.ob-step-header::before { content:""; position:absolute; inset:0 0 auto; height:var(--ob-safe-top); background:#15566b; pointer-events:none; }
.ob-brand { text-shadow:none; }
html.ob-tour-active #screenSchedule .hero-meta { padding:5px 8px; margin-inline:-4px; border-radius:8px; background:#153f4f; color:#fff; }
html[data-ob-tour="freshness"] #scheduleList { display:none; }

html.ob-tour-compact #screenSchedule .hero { display:none; }
html.ob-tour-compact[data-ob-tour="freshness"] #screenSchedule .hero { display:flex; justify-content:flex-start; padding-bottom:0; }
html.ob-tour-compact[data-ob-tour="freshness"] #screenSchedule .hero-main,
html.ob-tour-compact[data-ob-tour="freshness"] #schedulePanel > .panel-handle,
html.ob-tour-compact[data-ob-tour="freshness"] #daySwitcher { display:none; }
html.ob-tour-compact .ob-tour-sample { padding:9px; }
html.ob-tour-compact .ob-example-line { font-size:12px; line-height:1.2; margin-top:9px; gap:2px 6px; }
html.ob-tour-compact .ob-tour-sample .ob-eyebrow { font-size:10px; }
html[data-ob-tour="freshness"] #schedulePanel > .panel-handle,
html[data-ob-tour="freshness"] #daySwitcher { display:none; }

.ob-tour-copy:focus-visible { outline:2px solid #007f9f; outline-offset:-2px; }