/* The learning-space visual layer. Functional console and reading styles stay in their modules. */
html[data-theme] { min-height: 100dvh; background: var(--bg-0); box-shadow: var(--canvas-inset); }
.skip-link:not(:focus) { width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
body, body[data-theme] { margin: 36px; height: calc(100dvh - 72px); background: transparent; border-radius: 0; box-shadow: none; }
#rail { border: 1px solid var(--line); border-radius: 28px; padding-block: 32px; box-shadow: var(--shadow-1); }
#stage { padding: 40px; background: transparent; box-shadow: none; }
#ops { border: 1px solid var(--line); border-radius: 28px; padding: 36px 24px; background: var(--bg-1); box-shadow: var(--shadow-1); }
.page { gap: 32px; }
h1, h2 { letter-spacing: -.035em; }
.page-title { font-weight: 720; }
.page-lede { font-size: 16px; }
.btn { min-height: 42px; border-radius: 999px; padding: 10px 20px; white-space: normal; text-align: center; }
.btn-primary { box-shadow: 0 4px 12px color-mix(in srgb, var(--accent) 16%, transparent); }
.btn:hover:not(:disabled) { translate: 0 -1px; }
.btn:active:not(:disabled) { translate: 0 1px; }
.card, .form-section, .ops-section, .day-order { border-color: var(--line); box-shadow: var(--shadow-1); }
.card, .form-section, .day-order { padding: 28px; }
.today-layout, .today-main, .today-side { gap: 32px; }
.card-title { font-weight: 650; }
.badge, .chip, .need { border-radius: 999px; }
.rail-brand { display: flex; align-items: center; gap: 10px; margin: 4px 22px 32px; text-decoration: none; }
.brand-mark { width: 36px; height: 40px; display: grid; flex: none; place-items: center; background: var(--accent); color: var(--accent-fg); border-radius: 13px 13px 13px 5px; rotate: -5deg; }
.brand-mark .icon { width: 24px; height: 24px; }
.brand-name { font-size: 25px; font-weight: 780; letter-spacing: -.06em; }
.brand-name small { display: block; font-size: 11px; letter-spacing: .01em; color: var(--fg-2); font-weight: 450; margin-top: 1px; }
.rail-section-label { margin: 0 26px 12px; font-size: 11px; font-weight: 650; letter-spacing: .12em; color: var(--fg-2); }
.rail-link { height: 46px; color: var(--fg-1); gap: 12px; font-size: 14px; margin-inline: 14px; }
.rail-link .icon { width: 21px; height: 21px; }
.rail-link[aria-current="page"] { color: var(--accent); background: var(--blue-soft); font-weight: 650; }
.rail-link[aria-current="page"]::before { display: none; }
.rail-foot { padding-top: 20px; }
.rail-foot button.rail-link { width: calc(100% - 28px); }
.rail-level { height: auto; min-height: 60px; margin-top: 16px; background: transparent; color: var(--fg-0); border-top: 1px solid var(--line); border-radius: 0; }
.rail-level:hover { background: var(--bg-2); color: var(--fg-0); }
.rail-level-badge { width: 30px; height: 30px; box-shadow: none; background: var(--hero); color: white; }
.rail-level-title { font-size: 11px; margin-top: 4px; }
body:not([data-rail="open"]) .brand-name,
body:not([data-rail="open"]) .rail-section-label { display: none; }
body:not([data-rail="open"]) .rail-brand { margin-inline: auto; }
body:not([data-rail="open"]) .rail-link { padding-inline: 10px; }
body:not([data-rail="open"]) .rail-level { padding-inline: 6px; }
.ops-heading { display: flex; align-items: center; gap: 12px; margin-bottom: 32px; }
.ops-heading-icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; color: var(--accent); background: var(--blue-soft); }
.ops-title { color: var(--fg-0); text-transform: none; font-size: 17px; letter-spacing: -.025em; }
.ops-heading p { font-size: 12px; color: var(--fg-2); margin-top: 3px; }
.ops-sidebar-panels > p { font-size: 13px; }
.ops-sidebar, .ops-sidebar-panels { gap: 24px; }
.ops-sidebar .ops-section { padding: 24px 0 0; border: 0; border-top: 1px solid var(--line); border-radius: 0; background: transparent; box-shadow: none; }
.ops-sidebar .ops-section > header { display: grid; gap: 5px; margin-bottom: 12px; }
.ops-sidebar .ops-section h2 { font-size: 16px; margin: 0; }
.ops-sidebar .ops-asof { margin-bottom: 12px; }
.ops-sidebar .ops-notice { margin-bottom: 16px; padding: 0; border: 0; border-radius: 0; font-size: 13px; background: transparent; }
.ops-sidebar .ops-notice.ops-error { color: var(--danger); }
.ops-sidebar .ops-facts { font-size: 13px; gap: 12px; }
.ops-sidebar .ops-facts dd { font-weight: 650; text-align: right; }
.today-header { flex-direction: row; align-items: center; justify-content: space-between; gap: 18px; }
.welcome-eyebrow { color: var(--fg-2); font-size: 11px; letter-spacing: .12em; font-weight: 650; margin-bottom: 8px; }
.today-header h1 { font-size: 38px; margin-bottom: 8px; }
.today-header .page-title::after { content: '.' / ''; color: var(--accent); }
.today-date { display: flex; flex: none; align-items: center; gap: 8px; color: var(--fg-1); padding: 8px 0; font-size: 13px; }
.today-date .icon { color: var(--accent); width: 16px; height: 16px; }
.today .day-card { padding: 0; gap: 0; border: 0; background: transparent; box-shadow: none; }
.today .day-card-head { position: relative; isolation: isolate; overflow: hidden; background: var(--hero); padding: 32px 32px 24px; border-radius: 28px 28px 0 0; color: white; box-shadow: inset 0 1px 0 rgb(255 255 255 / .25); }
.today .day-card-head::after { content: ''; position: absolute; z-index: -1; width: 240px; height: 240px; border: 36px solid rgb(255 255 255 / .07); border-radius: 50%; right: -80px; top: -100px; pointer-events: none; }
.today .day-card-heading { flex: 1 1 250px; gap: 10px; }
.today .day-card-head :is(.day-card-title, .day-card-eyebrow, .day-card-lede) { color: white; }
.today .day-card-eyebrow { font-size: 11px; letter-spacing: .09em; }
.today .day-card-title { font-size: 30px; font-weight: 700; }
.today .day-card-lede { font-size: 14px; line-height: 1.65; }
.today .day-card-head > .badge { background: white; color: #244366; border-color: transparent; }
.today .day-card-actions { background: var(--hero); border-radius: 0 0 28px 28px; padding: 0 32px 32px; margin-bottom: 32px; box-shadow: 0 4px 0 -1px color-mix(in srgb, var(--hero) 28%, transparent), 0 12px 20px -14px color-mix(in srgb, var(--hero) 55%, transparent); }
.today .day-card-actions .btn { background: white; color: #1458B2; border-color: transparent; }
.today .day-card-actions .btn:not(.btn-primary) { background: transparent; color: white; border-color: rgb(255 255 255 / .6); box-shadow: none; }
.today .day-card-actions .form-status { color: white; }
.today .day-card-orders { gap: 32px; padding-top: 0; }
.today .work-order { position: relative; padding: 28px; gap: 16px; border: 1px solid var(--line); border-radius: 24px; background: var(--bg-1); box-shadow: var(--shadow-1); }
.today .work-order-head { margin-bottom: 6px; }
.today .work-order-session { color: var(--d-ep); letter-spacing: .08em; }
.today .work-order-title { line-height: 1.4; font-size: 19px; min-height: 2.8em; }
.today .work-order-from { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 8px 12px; align-items: center; }
.today .work-order-channel { grid-column: 2; justify-self: start; margin-left: 0; }
.avatar { background: var(--blue-pale); color: var(--fg-0); border: 3px solid var(--bg-1); width: 40px; height: 40px; }
.today .work-order-ticket { background: transparent; border: 0; padding: 0; font-size: 11px; }
.today .timeline { padding: 28px; gap: 24px; background: var(--bg-1); border: 1px solid var(--line); border-radius: 24px; margin-top: 32px; box-shadow: var(--shadow-1); }
.timeline-heading { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 16px; }
.timeline-heading h3 { margin: 0; font-size: 16px; letter-spacing: -.02em; }
.timeline-heading span { color: var(--fg-2); font-size: 13px; font-variant-numeric: tabular-nums; }
.today .timeline-track { gap: 10px; }
.today .timeline-slot { border: 0; border-top: 2px solid var(--line); border-radius: 0; padding: 14px 0 0; gap: 6px; }
.today .timeline-slot[data-kind="break"] { border-top-style: dashed; }
.today .timeline-slot[aria-current="time"] { padding-inline: 8px; border-radius: 10px; border-color: var(--hero); }
.today .timeline-end { display: none; }
.timeline { position: relative; }
.timeline-slot { border-radius: 10px; background: var(--bg-1); border: 1px solid var(--line); border-top: 3px solid var(--tone); }
.timeline-slot[aria-current="time"] { --fg-0: white; --fg-1: white; background: var(--hero); }
.today-prep .prep-icon { background: var(--blue-soft); border-radius: 12px; width: 38px; height: 38px; }
.today-prep .prep-item { padding-block: 8px; }
.today-momentum.card { background: var(--bg-1); }
.momentum-stats { gap: 24px 20px; }
.momentum-stat { padding: 0; gap: 8px; }
.momentum-stat dt { text-transform: none; letter-spacing: 0; font-weight: 500; }
.momentum-stat dd { font-size: 21px; }
.momentum-hint { font-size: 13px; line-height: 1.5; }
.cgrid-btn { border-radius: 8px; }
.phase-band { box-shadow: var(--shadow-1); }
.phase-band-head { background: var(--bg-1); }
.day-ticket, .work-order, .settings-integration { background: var(--bg-1); }
.day-chip { background: var(--bg-1); padding: 16px; }
.day-chip[aria-current="step"] { border-color: var(--accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 12%, transparent); }
.auth { margin-top: max(32px, 8vh); }
.auth::before { content: 'ETOC / YOUR LEARNING SPACE'; color: var(--accent); font-size: 12px; font-weight: 750; letter-spacing: .12em; }
.auth-form { padding: 32px; }
.auth .btn { align-self: stretch; }

/* Keep complete competency statements readable; only the grid scrolls horizontally. */
.cgrid { position: relative; }
.cgrid-scroll-hint { margin-bottom: 16px; color: var(--fg-2); font-size: var(--fs-0); }
.cgrid-scroll { position: relative; max-width: 100%; max-height: min(65dvh, 720px); overflow: auto; padding: 4px; border-radius: 16px; scrollbar-color: var(--line-strong) transparent; }
.cgrid[data-size="full"] .cgrid-table { min-width: 1280px; border-spacing: 8px; }
.cgrid[data-size="full"] .cgrid-discipline { position: sticky; top: 0; z-index: 2; background: var(--bg-1); padding: 12px 8px; }
.cgrid[data-size="full"] .cgrid-corner { position: sticky; top: 0; left: 0; z-index: 3; background: var(--bg-1); }
.cgrid[data-size="full"] .cgrid-domain { position: sticky; left: 0; z-index: 1; background: var(--bg-1); padding: 16px; }
.cgrid-domain { box-shadow: none; }
.cgrid[data-size="full"] :is(.cgrid-name, .cgrid-statement, .cgrid-blocks) { overflow-wrap: normal; word-break: normal; }
.cgrid[data-size="full"] .cgrid-btn { min-height: 44px; }

/* Quiet notices retain semantic status/error labels without decorative side stripes. */
.ops-notice { padding: 0; border: 0; border-radius: 0; background: transparent; margin-block: 12px; }
.ops-notice.ops-error { color: var(--danger); }
.ops-panel { display: grid; gap: 16px; }
.ops-panel > header { align-items: baseline; }
.ops-panel > header h2 { margin: 0; }
.ops-panel .ops-notice { margin: 0; }
.ops-empty-action { font-size: var(--fs-0); }
.ops-empty-action .btn { background: var(--bg-1); color: var(--accent); border-color: var(--line-strong); }
.ops-sidebar .ops-panel > header, .ops-sidebar .ops-panel .ops-asof, .ops-sidebar .ops-panel .ops-notice { margin-bottom: 0; }
.day-chip { box-shadow: none; }

/* Reading gets the stage; Operations remains available through the main navigation. */
body:has(#stage > .brief-reader) #ops { display: none; }
.brief-reader { width: 100%; max-width: 1200px; margin-inline: auto; }
.brief-reader .prose { box-shadow: var(--shadow-1); }
.brief-reader .prose .callout { border: 1px solid var(--line); border-radius: 16px; padding: 24px; background: var(--bg-1); }
.brief-reader .prose .callout-watch .callout-label { color: var(--warn); }
.brief-outline-panel { position: sticky; top: 24px; min-width: 0; max-height: calc(100dvh - 160px); overflow: auto; padding: 20px; background: var(--bg-1); border-radius: 20px; box-shadow: var(--shadow-1); }
.brief-outline-panel > summary { cursor: pointer; font-weight: 650; font-size: var(--fs-1); }
.brief-outline-panel .brief-outline { position: static; border: 0; padding: 16px 0 0; max-height: none; overflow: visible; }
.brief-outline a { border: 0; border-radius: 10px; }
.brief-outline a[aria-current] { border: 0; background: var(--hero); color: white; }
.lab-reference .brief-outline-panel { position: static; grid-row: 1; max-height: 320px; }
@media (min-width: 1100px) {
  body:has(#stage > .brief-reader) { grid-template-columns: var(--rail-w) minmax(0, 1fr); }
}
@media (max-width: 1599px) {
  .brief-reader { max-width: 1000px; }
  .reading-layout { grid-template-columns: minmax(0, 1fr); }
  .brief-outline-panel { position: static; grid-row: 1; max-height: none; }
}
@media (max-width: 1399px) {
  body, body[data-theme] { margin: 24px; height: calc(100dvh - 48px); --ops-w: 270px; --rail-w-open: 210px; }
  #stage { padding: 32px; }
  #ops { padding: 32px 20px; }
  .today-header { flex-wrap: wrap; }
}
@media (min-width: 1100px) and (max-height: 800px) {
  #rail { padding-block: 16px; }
  .rail-brand { margin-bottom: 20px; }
  .rail-link { height: 40px; }
  .rail-level { margin-top: 6px; }
  .rail-foot { padding-top: 8px; }
}
@media (min-width: 1100px) and (max-height: 650px) {
  #rail { overflow-y: auto; }
}
@media (max-width: 1099px) {
  body, body[data-theme], body[data-rail="open"] { height: auto; min-height: calc(100dvh - 48px); grid-template-columns: 72px minmax(0, 1fr); grid-template-rows: auto auto; }
  #rail { grid-row: 1 / 3; border-radius: 24px; }
  #stage { overflow: visible; scrollbar-gutter: auto; }
  #ops { grid-column: 2; border-radius: 24px; padding: 24px; margin: 0 0 0 24px; }
  .ops-sidebar-panels { grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); }
  .ops-sidebar-panels > p { grid-column: 1 / -1; }
  .rail-brand { margin-inline: auto; }
  .brand-name, .rail-section-label { display: none; }
  .rail-foot { margin-top: 24px; }
  .rail-foot button[aria-controls="rail"] { display: none; }
  .rail-label { position: absolute; width: 1px; height: 1px; padding: 0 !important; overflow: hidden; clip-path: inset(50%); }
  .rail-link { padding-inline: 10px; }
  .rail-level { padding-inline: 6px; }
  .settings-layout { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .settings-toc { position: static; }
  .settings-toc ul { flex-direction: row; flex-wrap: wrap; gap: 4px; }
}
@media (max-width: 760px) {
  body, body[data-theme], body[data-rail="open"] { margin: 0; border-radius: 0; display: flex; flex-direction: column; min-height: 100dvh; height: auto; }
  #rail { border: 0; border-radius: 0 0 24px 24px; padding: 14px 16px; gap: 12px; }
  .rail-brand, body:not([data-rail="open"]) .rail-brand { margin: 0; }
  .brand-name, body:not([data-rail="open"]) .brand-name { display: block; font-size: 22px; }
  .brand-name small { display: none; }
  .brand-mark { height: 32px; width: 32px; }
  .rail-nav { flex-direction: row; overflow-x: auto; padding: 3px; gap: 8px; }
  .rail-nav li { flex: none; }
  .rail-nav .rail-link { margin: 0; height: 40px; gap: 7px; font-size: 12px; padding: 10px 12px; }
  .rail-nav .rail-label, body:not([data-rail="open"]) .rail-nav .rail-label { position: static; width: auto; height: auto; opacity: 1; translate: none; clip-path: none; background: none; color: inherit; box-shadow: none; pointer-events: auto; font-size: inherit; }
  .rail-foot { position: absolute; right: 12px; top: 10px; flex-direction: row; margin: 0; padding: 0; }
  .rail-foot .rail-link { margin: 0; height: 38px; width: 38px !important; }
  .rail-foot .rail-level, .rail-foot li:has([aria-controls="rail"]) { display: none; }
  #stage { padding: 24px 16px; }
  #ops { border-radius: 24px; padding: 24px; margin: 0 16px 24px; }
  .page, .today-layout, .today-main, .today-side { gap: 24px; }
  .card, .form-section, .day-order { padding: 24px; }
  .today-header h1 { font-size: 34px; }
  .today-date { font-size: 13px; padding: 0; }
  .today-side, .day-orders, .grid-2, .reading-layout, .ops-sidebar-panels { grid-template-columns: minmax(0, 1fr); }
  .today .day-card-head { padding: 24px 22px 18px; }
  .today .day-card-actions { padding: 0 22px 24px; }
  .today .day-card-title { font-size: 26px; }
  .today .work-order { padding: 22px; }
  .today .work-order-title { min-height: 0; }
  .today .day-card-orders { gap: 32px; }
  .today .timeline { padding: 24px; }
  .today .timeline-track { min-width: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
  .today .timeline-slot { grid-column: auto; }
  .phase-weeks { grid-template-columns: minmax(0, 1fr); }
  .prep-item { grid-template-columns: auto minmax(0, 1fr); }
  .prep-state { grid-column: 2; }
  .auth-form { padding: 24px; }
  .brief-reader .prose { padding: 20px; }
}
/* Today has one supporting column at every desktop size. */
body:has(#stage > .today) #ops { display: none; }
.today { width: 100%; max-width: 1600px; margin-inline: auto; }
.today-main, .today-side { display: grid; grid-template-columns: minmax(0, 1fr); }
.today-layout { grid-template-columns: minmax(0, 1fr); }
.today-momentum .card-body { display: flex; flex-direction: column; gap: 14px; }
.today-momentum .momentum-stats { display: block; }
.today-momentum .momentum-stat { flex-direction: row; align-items: baseline; justify-content: space-between; gap: 16px; }
.today-momentum .momentum-stat dd { font-size: 26px; white-space: nowrap; }
.today-progress-meter { appearance: none; width: 100%; height: 8px; border: 0; border-radius: 99px; overflow: hidden; background: var(--line); color: var(--accent); }
.today-progress-meter::-webkit-progress-bar { background: var(--line); border-radius: 99px; }
.today-progress-meter::-webkit-progress-value { background: var(--accent); border-radius: 99px; }
.today-progress-meter::-moz-progress-bar { background: var(--accent); border-radius: 99px; }
.today-competency-summary { padding-top: 18px; margin-top: 4px; border-top: 1px solid var(--line); color: var(--fg-1); font-size: 14px; }
.today .today-grid-link { margin-top: 0; font-size: 14px; }
.today-workspace .card-body { display: grid; gap: 24px; }
.workspace-updates { display: grid; gap: 16px; }
.workspace-update-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 20px; }
.workspace-update-list li { display: grid; gap: 8px; }
.workspace-update-list li + li { border-top: 1px solid var(--line); padding-top: 20px; }
.workspace-update-list a { color: var(--fg-0); font-size: 15px; font-weight: 600; overflow-wrap: anywhere; }
.workspace-meta, .workspace-note { color: var(--fg-2); font-size: 13px; line-height: 1.6; }
.workspace-warning { color: var(--danger); }
.workspace-console-link { font-size: 14px; }
@container (min-width: 950px) {
  .today-layout { grid-template-columns: minmax(0, 1fr) 320px; gap: 36px; }
}
@media (min-width: 1100px) {
  body:has(#stage > .today) { grid-template-columns: var(--rail-w) minmax(0, 1fr); }
}
@media print {
  html[data-theme] { background: white; box-shadow: none; }
  body, body[data-theme] { margin: 0; border-radius: 0; box-shadow: none; }
  #stage { box-shadow: none; }
  .cgrid-scroll { overflow: visible; max-height: none; padding: 0; }
  .cgrid[data-size="full"] .cgrid-table { min-width: 0; border-spacing: 2px; }
  .cgrid[data-size="full"] .cgrid-domain { position: static; padding: 4px; }
  .cgrid[data-size="full"] :is(.cgrid-corner, .cgrid-discipline) { position: static; }
  .cgrid[data-size="full"] :is(.cgrid-corner, .cgrid-domain) { width: 15%; }
  .cgrid[data-size="full"] :is(.cgrid-name, .cgrid-statement, .cgrid-blocks) { overflow-wrap: anywhere; }
  .cgrid-scroll-hint { display: none; }
}