/* Quiet depth and clearer hierarchy for the existing DayOfSolutions surfaces.
   The mechanics workbench and the Pensamiento canvas retain their own styling. */
:is(#view-home, #view-day, #view-human, #view-professions, #view-dimensions, #view-contacts) {
  --vg-focus: #8be5df;
  --vg-depth: 0 9px 25px rgba(0, 0, 0, .18), inset 0 1px rgba(255, 255, 255, .045);
}

:is(#view-home, #view-day, #view-human, #view-professions, #view-dimensions, #view-contacts) .pagehead h2,
:is(#view-home, #view-day, #view-human, #view-professions, #view-dimensions, #view-contacts) .core-head h2,
:is(#view-home, #view-day, #view-human, #view-professions, #view-dimensions, #view-contacts) .gtd-section-head h2 {
  color: #edf6fa;
  font-weight: 800;
}

:is(#view-home, #view-day, #view-human, #view-professions, #view-dimensions, #view-contacts) .pagehead .eyebrow {
  letter-spacing: .12em;
}

:is(#view-home, #view-human, #view-professions, #view-dimensions, #view-contacts) .card,
#view-human :is(.resource-card, .focus-card, .journey-card, .ecosystem-card),
#view-professions .area-card,
#view-contacts :is(.contact, .template) {
  box-shadow: var(--vg-depth, 0 9px 25px rgba(0, 0, 0, .18));
}

/* States are sourced from exact GTD values by visual-guidance.js; they are not priorities or scores. */
#view-home .priority[data-visual-state] {
  --vg-state: #8da6b4;
  border-left: 3px solid var(--vg-state);
  padding-left: 7px;
}
#view-home .priority[data-visual-state="today"] { --vg-state: #68d9d4; }
#view-home .priority[data-visual-state="active"] { --vg-state: #82b9ff; }
#view-home .priority[data-visual-state="waiting"] { --vg-state: #f1ce72; }
#view-home .priority[data-visual-state="blocked"] { --vg-state: #ffab96; }
#view-home .priority[data-visual-state="done"] { --vg-state: #8fd8b4; }
#view-home .priority[data-visual-state="neutral"] { --vg-state: #8da6b4; }
#view-home .priority[data-visual-state] .picon {
  color: var(--vg-state);
  background: #0d2632;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .055);
}

/* Keep keyboard affordances visible without changing the geometry or the canvas. */
:is(#view-home, #view-day, #view-human, #view-professions, #view-dimensions, #view-contacts)
  :is(button, .btn, a[href], input, select, textarea, summary):focus-visible,
#view-symbiosis .symbiosis-detail-tabs :is(button, a[href]):focus-visible {
  outline: 3px solid var(--vg-focus, #8be5df);
  outline-offset: 3px;
}

@media (forced-colors: active) {
  #view-home .priority[data-visual-state] { border-left-color: CanvasText; }
  #view-home .priority[data-visual-state] .picon { color: CanvasText; }
}

/* Shared reading layer: labels and existing semantics, not a new layout. */
:root { --vg-info: #82b9ff; --vg-wait: #f1ce72; --vg-risk: #ffab96; --vg-verified: #8fd8b4; }
:is(#view-reports, #view-incidents, #view-files, #view-brain, #view-lab) .card,
#view-symbiosis :is(.symbiosis-hero, .symbiosis-sidebar, .symbiosis-inspector),
#drawer .drawerhead { box-shadow: 0 8px 24px #0003, inset 0 1px #ffffff0a; }
:is(.view, #drawerContent) .pill:not(.gtd-state-label) { font-size: 11px; line-height: 1.35; padding: 4px 8px; }
:is(.view, #drawerContent) .pill.gold { color: var(--vg-wait); background: #3f341e; border-color: #9f8148; }
:is(.view, #drawerContent) .pill.red { color: var(--vg-risk); background: #3d2524; border-color: #96564d; }
:is(.view, #drawerContent) .pill.green { color: var(--vg-verified); background: #16392e; border-color: #4e8b70; }
:is(.view, #drawerContent) .pill.cyan { color: #8be5df; background: #10373b; border-color: #3c7c82; }
:is(.view, #drawerContent) .pill.purple { color: #ccb9ff; background: #29243f; border-color: #75619b; }
#view-reports .reportcard:has(> .pill.gold) { border-left: 3px solid var(--vg-wait); }
#view-reports .reportcard:has(> .pill.red), #view-incidents .incident:has(> .pill.red) { border-left: 3px solid var(--vg-risk); }
#view-reports .reportcard:has(> .pill.green), #view-incidents .incident:has(> .pill.green) { border-left: 3px solid var(--vg-verified); }
#view-reports .reportcard .report-meta { border-top: 1px solid #3b596733; padding-top: 10px; }
:is(#view-reports, #view-incidents, #view-files, #view-brain, #view-lab) .pagehead h2 { color: #edf6fa; font-weight: 800; }
.rail .nav.active { box-shadow: inset 0 0 0 1px #61d6d229, 0 5px 16px #0003; }
:is(.rail, .top, .view, #drawer, #cmdOverlay) :is(button, a[href], input, select, textarea, summary):focus-visible { outline: 3px solid #8be5df; outline-offset: 3px; }
:is(#drawer, .view) .btn.primary { box-shadow: 0 4px 12px #0002, inset 0 1px #ffffff0b; }
#drawer .tab.active { border-color: #8be5df; box-shadow: inset 0 -2px #8be5df; }
@media (prefers-reduced-motion: reduce) {
  .rail .nav, .view .reportcard, .view .profession-row, :is(.view, #drawer) .btn { transition: none; }
  .view .reportcard:hover { transform: none; }
}