@layer legacy {
/* Startrail all-page visual system v2 · one restrained hierarchy across every workspace. */
:root {
  --page-title-size: clamp(42px, 3.35vw, 52px);
  --page-section-size: 24px;
  --page-card-size: 21px;
  --page-copy-size: 15px;
  --page-kicker-size: 13px;
  --surface-line: color-mix(in srgb, var(--line) 84%, transparent);
  --surface-line-strong: color-mix(in srgb, var(--line-2) 82%, var(--line));
  --surface-raised: linear-gradient(145deg, color-mix(in srgb, var(--panel) 98%, white 1.2%), color-mix(in srgb, var(--panel) 94%, var(--panel-2)));
  --surface-inset: color-mix(in srgb, var(--panel-2) 88%, var(--bg));
  --surface-shadow: 0 1px 0 rgba(255,255,255,.035), 0 18px 52px rgba(0,0,0,.13);
  --surface-shadow-strong: 0 1px 0 rgba(255,255,255,.045), 0 24px 70px rgba(0,0,0,.18);
}

.content { isolation: isolate; }
.content :where(h1,h2,h3,h4) { text-wrap: balance; }
.content :where(p,li,dd) { text-wrap: pretty; }
.content :where(time,.metric-value,.work-kpi b,.review-progress-ring b,.life-countdown-value,.global-timer-clock) {
  font-variant-numeric: tabular-nums;
}

/* Titles remain recognizable across working pages without making every hero identical. */
.content :is(.hero h1,.v2-home-head h1,.calendar-command-copy h1,.evening-hero h1,.resource-hero-main h1,.cognitive-hero h1,.eqk-hero h1,.startrail-hero h1,.trajectory-hero h1) {
  margin: 9px 0 11px;
  font-family: var(--font-display);
  font-size: var(--page-title-size);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -.035em;
}
.content :is(.gt-library-hero h2,.gt-hero-copy h2) {
  font-family: var(--font-display);
  font-size: clamp(34px, 3.2vw, 46px);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -.03em;
}
.content :is(.eyebrow,.panel-kicker,.trajectory-focus-kicker,.now-label,.gt-kicker) {
  font-family: var(--font-mono);
  font-size: var(--page-kicker-size);
  font-weight: 720;
  line-height: 1.4;
  letter-spacing: .1em;
  text-transform: none;
}
.content :is(.hero .lead,.calendar-command-copy p,.evening-hero p,.resource-hero-main p:not(.resource-hero-note),.cognitive-hero p,.eqk-hero p,.startrail-hero p,.trajectory-hero p,.gt-library-hero p,.gt-hero-copy p) {
  max-width: 820px;
  color: color-mix(in srgb, var(--muted) 90%, var(--text));
  font-size: var(--page-copy-size);
  line-height: 1.7;
}

.content > .hero {
  margin-bottom: 22px;
  padding: 4px 0 24px;
  border-bottom-color: var(--surface-line);
}
.v2-home-head,.evening-hero,.startrail-hero,.trajectory-hero { margin-bottom: 20px; }
.evening-hero { padding: 4px 0 24px; }
.calendar-command,.resource-hero-main,.cognitive-hero,.eqk-hero {
  border-color: color-mix(in srgb, var(--accent) 25%, var(--surface-line));
  border-radius: 22px;
  box-shadow: var(--surface-shadow);
}
.calendar-command,.cognitive-hero,.eqk-hero { position: relative; overflow: hidden; }
.calendar-command { padding: 22px 24px; }
.resource-hero-main { padding: 24px; }

/* Shared surface rhythm. */
.content .card {
  border-color: var(--surface-line);
  background: var(--surface-raised);
  box-shadow: var(--surface-shadow);
}
.content .card.inset { background: var(--surface-inset); box-shadow: inset 0 1px 0 rgba(255,255,255,.025); }
.panel-head { gap: 18px; margin-bottom: 18px; }
.panel-head h2,.today-section-head h2,.trajectory-selector-head h2,.linked-route-head h2,.card > h2 {
  font-size: var(--page-card-size);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -.02em;
}
.section-head h2,.campaign-workspace-head h2,.review-resource-head h2,.cog-library-section > header h2 {
  font-size: var(--page-section-size);
  font-weight: 700;
  line-height: 1.28;
  letter-spacing: -.022em;
}
.panel-head p,.section-head p,.today-section-head p,.review-resource-head p {
  color: color-mix(in srgb, var(--muted) 90%, var(--text));
  font-size: 14px;
  line-height: 1.65;
}

/* Layer navigation reads as one control, not a loose row of labels. */
.layer-tabs-shell { padding-top: 8px; padding-bottom: 8px; }
.layer-tabs-inner { gap: 12px; }
.layer-tabs-title { font-size: 13px; letter-spacing: .06em; }
.layer-tabs-list {
  gap: 3px;
  padding: 3px;
  border: 1px solid color-mix(in srgb, var(--line) 78%, transparent);
  border-radius: 13px;
  background: color-mix(in srgb, var(--panel) 84%, transparent);
}
.layer-tab {
  min-height: 40px;
  padding: 8px 13px;
  border-radius: 9px;
  font-size: 14px;
  font-weight: 650;
}
.layer-tab.active {
  border-color: color-mix(in srgb, var(--accent) 30%, var(--line));
  background: color-mix(in srgb, var(--accent) 9%, var(--panel-2));
  box-shadow: inset 0 -2px 0 var(--accent), 0 5px 14px rgba(0,0,0,.09);
}
.segmented,.sort-toolbar,.calendar-filter,.cog-library-toolbar nav {
  border-color: var(--surface-line-strong);
  background: color-mix(in srgb, var(--panel-2) 86%, var(--bg));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.025);
}
.seg-btn,.sort-chip,.calendar-filter button { font-weight: 620; }
.seg-btn.active,.sort-chip.active,.calendar-filter button.active {
  background: color-mix(in srgb, var(--panel-3) 86%, var(--text) 3%);
  box-shadow: 0 1px 0 rgba(255,255,255,.035), 0 5px 14px rgba(0,0,0,.09);
}

/* Lists and controls gain consistent depth while data remains the focus. */
.content :is(.lean-task,.calendar-day,.review-history-row,.outcome-manager-row,.module-usage-row,.data-workspace-link,.cog-library-card,.home-quick-card,.trajectory-nav-node) {
  transition: transform .16s ease, border-color .16s ease, background .16s ease, box-shadow .16s ease;
}
@media (hover:hover) {
  .content :is(.lean-task,.calendar-day,.review-history-row,.outcome-manager-row,.cog-library-card,.home-quick-card):hover {
    transform: translateY(-1px);
    border-color: color-mix(in srgb, var(--accent-2) 34%, var(--line));
    box-shadow: 0 11px 28px rgba(0,0,0,.12);
  }
}
.table-wrap { max-width: 100%; border-radius: 16px; }
.table-wrap table { border-collapse: separate; border-spacing: 0; }
.table-wrap th {
  background: color-mix(in srgb, var(--panel-2) 94%, var(--bg));
  color: color-mix(in srgb, var(--muted) 88%, var(--text));
  font-size: 13px;
  font-weight: 700;
}
.table-wrap tbody tr:hover td { background: color-mix(in srgb, var(--accent-2) 3%, var(--panel)); }
.content :is(.time-empty,.outcome-manager-empty,.startrail-flow-empty,.cog-library-empty,.trajectory-nav-empty,.experience-idea-empty) {
  border-color: color-mix(in srgb, var(--line-2) 72%, var(--line));
  background: color-mix(in srgb, var(--panel-2) 72%, var(--panel));
  color: color-mix(in srgb, var(--muted) 90%, var(--text));
  line-height: 1.65;
}

/* Page-specific polish discovered during the full-site audit. */
.calendar-command { background: radial-gradient(circle at 94% -8%,color-mix(in srgb,var(--accent-2) 11%,transparent),transparent 35%),var(--surface-raised); }
.calendar-shell { overflow: hidden; }
.evening-step { position: relative; border-color: var(--surface-line); }
.step-number { background: linear-gradient(145deg,color-mix(in srgb,var(--violet) 16%,var(--panel-2)),var(--panel-2)); box-shadow: 0 8px 20px color-mix(in srgb,var(--violet) 10%,transparent); }
.review-progress-ring { background: radial-gradient(circle,color-mix(in srgb,var(--violet) 7%,var(--panel)),var(--panel)); box-shadow: 0 12px 34px rgba(0,0,0,.12); }
.review-day-rule { border-color: color-mix(in srgb,var(--accent-2) 26%,var(--surface-line)); box-shadow: 0 8px 22px rgba(0,0,0,.07); }
.cog-library-section { gap: 14px; padding: 20px; border-color: var(--surface-line); box-shadow: var(--surface-shadow); }
.cog-library-section > header span,.cog-library-copy > small,.cog-library-enter > small { font-size: 13px; }
.cog-library-card { min-height: 158px; padding: 18px; background: linear-gradient(145deg,color-mix(in srgb,var(--panel-2) 97%,white 1%),color-mix(in srgb,var(--panel-2) 94%,var(--panel))); }
.cog-detail-bar { border-color: var(--surface-line-strong); box-shadow: 0 8px 24px rgba(0,0,0,.08); }
.startrail-command-v2,.startrail-flow-card,.trajectory-navigation-card,.trajectory-timeline-card { border-color: color-mix(in srgb,var(--accent-2) 18%,var(--surface-line)); }
.startrail-full-map > summary { border-radius: 16px; }
.display-settings,.currency-settings,.pilot-guide-settings { border-color: color-mix(in srgb,var(--accent) 14%,var(--surface-line)); }

/* Experience inspiration responds to its own panel width, including desktop layouts with a sidebar. */
.experience-inspiration { container-type: inline-size; }
.experience-inspiration-list {
  grid-template-columns: repeat(auto-fit,minmax(min(100%,400px),1fr));
  gap: 10px;
}
.experience-inspiration.kind-goal .experience-inspiration-list { grid-template-columns: 1fr; }
.experience-idea {
  grid-template-columns: minmax(0,1fr) auto;
  gap: 12px;
  align-items: start;
  padding: 13px;
}
.experience-idea-copy strong {
  display: grid;
  grid-template-columns: max-content minmax(0,1fr);
  gap: 8px;
  align-items: start;
}
.experience-idea-copy strong > span:last-child {
  min-width: 0;
  line-height: 1.35;
  word-break: normal;
  overflow-wrap: break-word;
}
.experience-idea-copy small { margin-top: 7px; line-height: 1.58; }
.experience-idea-actions {
  display: flex;
  gap: 6px;
  align-self: center;
}
.experience-idea .btn { min-height: 38px; }

@container (max-width:560px) {
  .experience-idea { grid-template-columns: 1fr; }
  .experience-idea-actions {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    width: 100%;
    margin-top: 2px;
  }
  .experience-idea-actions .btn { width: 100%; min-width: 0; }
}

/* Route language previously exceeded the available workspace by a few pixels. */
.data-workspace,.data-workspace-main,.route-visual-language,.route-visual-rule { min-width: 0; max-width: 100%; }
.route-visual-language {
  grid-template-columns: minmax(175px,1.12fr) repeat(4,minmax(0,1fr));
  overflow: hidden;
}
.route-visual-rule { overflow: hidden; }
.route-visual-rule > div { min-width: 0; }
.route-visual-rule small { overflow-wrap: anywhere; }

@media (min-width:761px) and (max-width:1180px) {
  .content :is(.hero h1,.v2-home-head h1,.calendar-command-copy h1,.evening-hero h1,.resource-hero-main h1,.cognitive-hero h1,.eqk-hero h1,.startrail-hero h1,.trajectory-hero h1) {
    font-size: clamp(38px,4.4vw,48px);
  }
  .route-visual-language { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .route-visual-language-head { grid-column: 1 / -1; }
}

@media (max-width:760px) {
  :root {
    --page-title-size: clamp(31px,9.2vw,36px);
    --page-section-size: 22px;
    --page-card-size: 20px;
    --page-copy-size: 14px;
  }
  .content { padding-top: 20px; }
  .content > .hero { margin-bottom: 16px; padding: 2px 0 19px; }
  .content :is(.hero h1,.v2-home-head h1,.calendar-command-copy h1,.evening-hero h1,.resource-hero-main h1,.cognitive-hero h1,.eqk-hero h1,.startrail-hero h1,.trajectory-hero h1) {
    margin: 7px 0 9px;
    font-size: var(--page-title-size);
    line-height: 1.13;
    letter-spacing: -.03em;
  }
  .content :is(.gt-library-hero h2,.gt-hero-copy h2) { font-size: 29px; }
  .content :is(.hero .lead,.calendar-command-copy p,.evening-hero p,.resource-hero-main p:not(.resource-hero-note),.cognitive-hero p,.eqk-hero p,.startrail-hero p,.trajectory-hero p,.gt-library-hero p,.gt-hero-copy p) {
    font-size: 14px;
    line-height: 1.65;
  }
  .calendar-command,.resource-hero-main,.cognitive-hero,.eqk-hero { padding: 18px 16px; border-radius: 18px; }
  .content .card { border-radius: 18px; }
  .panel-head { gap: 10px; margin-bottom: 14px; }
  .panel-head p,.section-head p,.today-section-head p,.review-resource-head p { font-size: 14px; }
  .layer-tabs-shell { padding-top: 7px; padding-bottom: 7px; }
  .layer-tabs-list { gap: 2px; padding: 3px; }
  .layer-tab { min-height: 40px; padding: 8px 11px; font-size: 13px; }
  .evening-step { padding: 17px; }
  .cog-library-section { gap: 11px; padding: 13px; border-radius: 17px; }
  .cog-library-card { min-height: 0; padding: 14px; }
  .experience-inspiration-head { display: grid; grid-template-columns: minmax(0,1fr) auto; }
  .experience-idea-actions { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); width: 100%; }
  .experience-idea-actions .btn { width: 100%; min-width: 0; }
  .route-visual-language { grid-template-columns: 1fr; }
  .route-visual-language-head { grid-column: auto; }
  .route-visual-rule { grid-template-columns: 38px minmax(0,1fr); }
  .table-wrap { border-radius: 14px; }
}

}