/* Final colour layer for the website. Keep fills separate from readable link ink.
   This file deliberately changes no layout, data, navigation or motion behaviour. */
@media screen {
body.unified-shell {
  --brand: var(--uw-accent); --brand-dark: var(--uw-accent-hover);
  --brand-strong: var(--uw-accent-hover); --brand-soft: var(--uw-accent-wash);
  --blue: var(--uw-accent); --blue-soft: var(--uw-accent-wash);
  --accent: var(--uw-blue-strong); --journal-sky: var(--uw-accent-edge);
}

/* Solid brand controls and selected navigation, including the mobile shell. */
html body.unified-shell :is(
  .uniway-public-nav a[aria-current="page"], .glass-navigation-rail a[aria-current="page"],
  .glass-navigation-rail a:hover, .application-nav-group > summary:has(a[aria-current="page"]),
  .mobile-nav a[aria-current="page"], .mobile-nav a.active, .mobile-nav button.active,
  .glass-mobile-header .mobile-guide-link, .board-avatar-public,
  .count-badge, .discovery-digest-badge, .pr-chip-blue, .pr-chip-cyan, .pr-chip-home,
  .school-switcher-icon, .planning-match-icon, .packet-total, .planning-step-number,
  .application-template-stage-heading em, .pr-toc-group a[aria-current="page"],
  .pr-guide-feedback button[aria-pressed="true"], .document-workbench-tabs button[aria-selected="true"],
  .application-workspace-stages [aria-current], .application-workspace-tools [aria-current],
  .partner-view-switch button[aria-pressed="true"], .pr-mode-switch button[aria-pressed="true"],
  .pr-view-toggle button[aria-pressed="true"], .pr-views button[aria-pressed="true"],
  .pr-profile-nav button[aria-current], .calendar-day.is-selected,
  .study-plan-step-tab.is-active, .study-plan-partner-pill.is-active,
  .verified-hook-pill, .verified-window-status-pill.tone-upcoming
) {
  background: var(--uw-accent); color: var(--uw-on-accent);
  border-color: var(--uw-accent-edge);
}
html body.unified-shell .glass-navigation-rail .uniway-public-nav a[aria-current="page"],
html body.unified-shell .glass-navigation-rail .application-nav-group > summary:has(a[aria-current="page"]),
html body.unified-shell .page-back-bar #school-switcher .school-switcher-icon,
html body.unified-shell #community-hub #community-feed-tabs a[aria-current="page"],
html body.unified-shell #community-hub#community-hub.pr-forum .community-topic-chips button[aria-pressed="true"],
html body.unified-shell #partners.pr-explore .pr-view-toggle button[aria-pressed="true"],
html body.unified-shell .pr-detail .detail-tabs button[aria-selected="true"] {
  background: var(--uw-accent); color: var(--uw-on-accent); border-color: var(--uw-accent-edge);
}
html body.unified-shell .glass-navigation-rail .application-nav-group > summary:has(a[aria-current="page"]) a,
html body.unified-shell :is(.application-workspace-stages [aria-current], .study-plan-step-tab.is-active) :is(small, strong, span, b),
html body.unified-shell .application-nav-group > summary:has(a[aria-current="page"]) .application-nav-chevron {
  color: var(--uw-on-accent); background-color: transparent;
}
html body.unified-shell :is(.pr-supported-label > .lucide, .pr-check input:checked + .pr-check-box, .pr-compare input:checked + .pr-compare-box) {
  background: var(--uw-accent); color: var(--uw-on-accent); border-color: var(--uw-accent-edge);
}
html body.unified-shell .glass-navigation-rail .glass-rail-brand {
  background: var(--uw-accent); color: var(--uw-on-accent); box-shadow: 0 6px 16px #23324a1f;
}
html body.unified-shell :is(input[type="checkbox"], input[type="radio"], progress) { accent-color: var(--uw-accent); }
html body.unified-shell .packet-progress progress::-webkit-progress-value { background: var(--uw-accent); }
html body.unified-shell .packet-progress progress::-moz-progress-bar { background: var(--uw-accent); }

/* Information blocks formerly filled pale blue use white copy on midnight. */
html body.unified-shell :is(.planning-next-action, .planning-target-summary, .planning-date-pair > span, .calendar-next-summary > span) {
  background: var(--uw-accent); color: var(--uw-on-accent); border-color: var(--uw-accent-edge);
}
html body.unified-shell :is(.planning-next-action, .planning-target-summary, .planning-date-pair > span, .calendar-next-summary > span)
  :is(p, small, strong, span, a.text-action, .lucide) { color: inherit; }
html body.unified-shell .planning-next-action .next-action-icon { background: #ffffff1f; color: #fff; }
html body.unified-shell .planning-step.is-current a { background: var(--uw-accent); color: #fff; }
html body.unified-shell .planning-step.is-current :is(small, strong) { color: #fff; }
html body.unified-shell .planning-step.is-current .planning-step-number { border: 1px solid #ffffff80; }
html body.unified-shell .document-flow-state-label { color: var(--uw-blue-strong); }
html body.unified-shell .document-flow-steps [data-flow-state="current"] { border-color: var(--uw-accent-edge); }
html body.unified-shell .document-flow-steps button:focus-visible { outline-color: var(--uw-blue-strong); }

/* Homepage route artwork and comparison tray share the same dark brand field. */
html body.unified-shell :is(.pr-map-band, .pr-compare-tray),
html body.unified-shell #home-landing .hm-route-card {
  background: var(--uw-accent); color: #fff;
}
html body.unified-shell .pr-map-band :is(.pr-kicker, h2, p, dd),
html body.unified-shell #home-landing :is(.hm-route-card-top, .hm-route-card-bottom > span, .hm-route-title) { color: #fff; }
html body.unified-shell #home-landing .hm-route-art text { fill: #fff; }
html body.unified-shell #home-landing .hm-route-origin { fill: #fff; }
html body.unified-shell #home-landing .hm-route-plane circle { fill: #fff; stroke: #ffffff30; }
html body.unified-shell #home-landing .hm-route-plane path { fill: var(--uw-accent); }
html body.unified-shell #home-landing .hm-route-trace { stroke: #fff; }
html body.unified-shell #home-landing .hm-route-meter span { background: #fff; }
html body.unified-shell .pr-band-button { color: var(--uw-accent); }
html body.unified-shell .pr-band-button:hover { color: #fff; background: var(--uw-accent-hover); }
html body.unified-shell :is(.pr-mini-week .today span, .pr-budget-bar .c1, .pr-budget-legend .c1) { background: var(--uw-accent); }
html body.unified-shell :is(.map-legend-dot,.map-legend-cluster) { background: var(--uw-accent); color: #fff; box-shadow: 0 0 0 1px var(--uw-accent); }
html body.unified-shell .school-detail-view .school-photo-fallback { background: var(--uw-accent); color: #fff; }

/* Dark mode changes the canvas, never the midnight fill / white label pairing. */
html[data-theme="dark"] #application-path {
  --ink: var(--uw-text); --muted: var(--uw-muted); --deep: #fff;
  --page: var(--uw-page); --border: var(--uw-line);
}
html[data-theme="dark"] #application-path :is(.plan-strip, .map-panel, .map-toolbar,
  .map-caption, .next-card, .side-note, .stat-card:not(.overall-stat), .stage-card,
  .level-card, .level-actions, .support-card, .outline-button, .overview-filter button:not([aria-pressed="true"]), dialog) {
  background: var(--uw-surface); color: var(--uw-text); border-color: var(--uw-line); box-shadow: none;
}
html[data-theme="dark"] #application-path .map-scroll { background: var(--uw-page); }
html[data-theme="dark"] #application-path :is(input:not([type=checkbox]):not([type=radio]),select,textarea) {
  background: var(--uw-surface); color: var(--uw-text); border-color: var(--uw-line);
}
html[data-theme="dark"] #application-path :is(.node-title,.node-caption) { background: var(--uw-page); color: var(--uw-text); }
html[data-theme="dark"] #application-path .primary-button { box-shadow: 0 4px 0 #0b1321; }
html[data-theme="dark"] #application-path :is(.kicker,.ap-empty>svg,.stage-card header>span:last-child,
  .hint-toggle,.source-details summary,.support-card h3 svg,.support-points svg,.context-card strong,.meter-label strong) { color: #fff; }
html[data-theme="dark"] #application-path :is(.ap-status,.quiet-button,.plan-choice label,.hub-tabs>a:not(.active),
  .next-card>span,.next-card>p,.side-note p,.source-button,.meter-label,.stat-card:not(.overall-stat)>span,
  .stat-card:not(.overall-stat)>small,.stage-card header small,.stage-level small,.row-progress,
  .level-topline,.back-link,.level-heading p:last-child,.level-progress>div:first-child,.input-meta,
  .level-actions>span,.support-points li,.source-details,.context-card,dialog p) { color: var(--uw-muted); }
html[data-theme="dark"] #application-path .meter { background: #ffffff30; }
html[data-theme="dark"] #application-path .meter:not(.gold) .meter-fill { background: #fff; }
html[data-theme="dark"] #application-path .meter:not(.gold) .particle::before { background: var(--uw-accent); box-shadow: 0 0 5px #23324a80; }
html[data-theme="dark"] #application-path .meter:not(.gold) .meter-fill::after { background: linear-gradient(105deg,transparent,#23324a66,transparent); }
html[data-theme="dark"] #application-path :is(button,a,input,select,textarea,[tabindex]):focus-visible { outline-color: #fff; }

/* Public HTML reading pages use the same tokens without loading the app shell. */
.reading-shell :is(.reading-header nav a[aria-current="page"], .reading-header nav a:hover,
  .reading-planner, .cta, .cs-upper-layer .cs-layer-step, .cs-home-pill.is-active,
  .cs-status-pill, .cs-checked-tag, .cs-origin-badge, .cs-agreement-table th) {
  background: var(--uw-accent); color: #fff; border-color: var(--uw-accent-edge);
}
.reading-shell :is(.overview, .cs-compliance-banner, .article-takeaways, .article-next, .article-table thead) { background: var(--uw-accent); color: #fff; border-color: var(--uw-accent-edge); }
.reading-shell :is(.overview, .cs-compliance-banner, .article-takeaways, .article-next, .article-table thead) :is(h2,h3,p,a,strong,small,li) { color: #fff; }
}

/* Let the application workspace sit directly on the page canvas. */
body.unified-shell #dashboard-view > #application-path {
  width: calc(100% - 64px);
  max-width: 1800px;
  padding: 16px 0 40px;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
#application-path :is(.plan-strip, .map-panel, .map-toolbar, .map-caption, .next-card, .side-note) {
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
#application-path .ap-status { border-bottom: 0; }
#application-path .app-header h1 { font-size: clamp(32px, 2.5vw, 42px); }
#application-path .plan-strip { padding: 14px 0 20px; }
#application-path .plan-choice label, #application-path .plan-choice small { font-size: 14px; }
#application-path .plan-choice select { font-size: 20px; max-width: 560px; }
#application-path .plan-progress { width: min(300px, 28%); }
#application-path .plan-progress > div:first-child { font-size: 15px; }
#application-path .plan-progress strong { font-size: 20px; }
#application-path .map-layout { grid-template-columns: minmax(0, 1fr) minmax(270px, 320px); gap: clamp(24px, 3vw, 48px); }
#application-path .map-panel { overflow: visible; min-width: 0; }
#application-path .map-toolbar { padding: 10px 0; }
#application-path .map-scroll { background: transparent; }
#application-path .path-stages { max-width: 820px; }
#application-path .map-caption { padding-inline: 0; font-size: 13px; }
#application-path .next-card { padding: 12px 0 20px; }
#application-path .next-card > span { font-size: 14px; }
#application-path .next-card h2 { font-size: 26px; }
#application-path .next-card > p:not(.kicker) { font-size: 15px; }
#application-path .side-note { padding: 18px 0; border-top: 1px solid var(--border); }
#application-path .side-note h3 { font-size: 15px; }
#application-path .side-note p, #application-path .source-button { font-size: 14px; }
html[data-theme="dark"] #application-path :is(.plan-strip, .map-panel, .map-toolbar, .map-caption, .next-card, .side-note, .map-scroll) {
  background: transparent;
  box-shadow: none;
}
@media (max-width: 800px) {
  body.unified-shell #dashboard-view > #application-path { width: calc(100% - 32px); padding: 12px 0 32px; }
}
@media (max-width: 600px) {
  body.unified-shell #dashboard-view > #application-path { width: calc(100% - 24px); }
  #application-path .plan-progress { width: 100%; }
  #application-path .plan-choice select { font-size: 16px; }
  #application-path .map-layout { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  #application-path .next-card { padding-top: 0; }
}

/* Keep the plan and its navigation together so the map starts higher. */
#application-path .app-header { padding-block: 12px; }
#application-path .plan-strip {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(140px, 180px);
  gap: 10px 20px;
  padding: 8px 0 16px;
}
#application-path .plan-choice { grid-column: 1; grid-row: 1; }
#application-path .plan-choice > div { flex: 1; }
#application-path .hub-tabs { grid-column: 2; grid-row: 1; padding: 0; white-space: nowrap; }
#application-path .plan-progress { grid-column: 3; grid-row: 1; width: 100%; margin: 0; padding: 0; border: 0; }
#application-path .map-toolbar { grid-column: 1 / -1; grid-row: 2; padding: 0; min-width: 0; }
#application-path .map-toolbar .stage-picker { width: 200px; min-width: 0; }
#application-path .map-toolbar > button { flex: none; white-space: nowrap; }
@media (min-width: 901px) {
  body.unified-shell #dashboard-view > #application-path { width: calc(100% - 144px); margin: 0 32px 0 112px; }
}
@media (min-width: 1944px) {
  body.unified-shell #dashboard-view > #application-path { margin-left: calc(112px + (100% - 1944px) / 2); }
}
@media (min-width: 1400px) {
  #application-path .plan-strip { grid-template-columns: minmax(0, 1fr) auto auto minmax(140px, 180px); }
  #application-path .map-toolbar { grid-column: 3; grid-row: 1; }
  #application-path .plan-progress { grid-column: 4; }
  #application-path .map-scroll { height: clamp(420px, calc(100dvh - 300px), 800px); }
}
@media (max-width: 760px) {
  #application-path .plan-strip { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  #application-path .plan-choice { grid-column: 1; grid-row: 1; }
  #application-path .plan-progress { grid-column: 1; grid-row: 2; display: flex; align-items: center; gap: 14px; }
  #application-path .plan-progress > div:first-child { min-width: 120px; margin: 0; gap: 12px; }
  #application-path #overall-meter { flex: 1; }
  #application-path .hub-tabs { grid-column: 1; grid-row: 3; }
  #application-path .map-toolbar { grid-column: 1; grid-row: 4; }
  #application-path .map-toolbar .stage-picker { flex: 1; width: auto; }
}