/* Janine's visual language across the application, alongside the result-specific theme. */
.app-shell {
  --ink:#1e2b4a;--muted:#4d5e76;--paper:#f1f6fc;--surface-soft:#e6effb;
  --green:var(--brand);--brand:#285ab5;--brand-strong:#20498f;--brand-soft:#e2edff;--line:#d1ddeb;
  background:var(--paper);font-family:Figtree,Arial,sans-serif;
}
.app-shell #main {min-height:65vh;}
.app-shell .section {padding-top:56px;padding-bottom:64px;}
.app-shell h1 {font-size:clamp(42px,5vw,68px);line-height:1.06;}
.app-shell h2 {font-size:clamp(28px,3vw,38px);line-height:1.16;}
.app-shell h3 {line-height:1.25;}
.app-shell .eyebrow {font-size:11px;letter-spacing:.14em;margin-bottom:18px;color:#2851a2;}
.app-shell .button {border-radius:999px;box-shadow:none;gap:12px;min-height:48px;padding:14px 23px;font-size:15px;}
.app-shell .secondary {background:white;border-color:#b8c9e2;}
.app-shell .secondary:hover {background:#e2edff;}
.app-shell button:disabled {cursor:not-allowed;opacity:.6;}
.app-header {height:auto;min-height:92px;max-width:1360px;gap:24px;padding-block:20px;border-bottom-color:#d1ddeb;}
.app-brand {display:inline-flex;align-items:center;gap:10px;flex-shrink:0;font-family:Bricolage,Arial,sans-serif;font-size:24px;line-height:1.2;letter-spacing:-1px;font-weight:700;text-decoration:none;}
.app-brand svg {flex-shrink:0;}
.app-header .app-nav {gap:6px;flex-wrap:wrap;justify-content:flex-end;font-size:14px;}
.app-header .app-nav>a,.app-nav-more>summary {padding:10px 14px;border-radius:999px;white-space:nowrap;font-weight:600;}
.app-nav>a:hover,.app-nav-more>summary:hover {background:#e2edff;}
.app-nav>a[aria-current=page] {background:#dce8fa;color:#214f9d;}
.app-shell .app-header .app-nav>a {display:inline-flex;}
.app-nav-more {position:relative;}
.app-nav-more>summary {cursor:pointer;list-style:none;display:flex;gap:8px;align-items:center;}
.app-nav-more>summary::-webkit-details-marker {display:none;}
.app-nav-more[open]>summary {background:#dce8fa;}
.app-nav-menu {position:absolute;right:0;top:calc(100% + 8px);z-index:15;width:240px;padding:10px;background:white;border:1px solid #d1ddeb;border-radius:20px;box-shadow:0 12px 36px #1e2b4a1a;}
.app-nav-menu>a,.app-nav-menu .text-button {display:block;width:100%;padding:12px;text-align:left;text-decoration:none;border-radius:12px;font-size:14px;}
.app-nav-menu>a:hover,.app-nav-menu .text-button:hover {background:#edf3fc;}
.app-nav-menu form {border-top:1px solid #d1ddeb;margin-top:6px;padding-top:6px;}
.app-shell .environment-note {background:#e6effb;padding:7px 20px;}
.app-shell footer {border-top:1px solid #d1ddeb;}
.app-shell footer .brand {font-family:Bricolage,Arial,sans-serif;letter-spacing:-.5px;}
.workspace-hero {display:grid;grid-template-columns:1.25fr 1fr;gap:48px;align-items:center;margin-bottom:60px;}
.workspace-hero h1 {margin-bottom:22px;}
.workspace-intro,.workspace-hero .role-intro {font-size:18px;line-height:1.75;max-width:540px;margin-bottom:26px;}
.workspace-hero .button-row {justify-content:flex-start;flex-wrap:wrap;gap:12px;}
.workspace-art {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-items:end;gap:0;padding:42px 14px 26px;min-height:260px;background:#dce9fb;border-radius:48% 48% 28px 28px;}
.workspace-art .work-character {width:100%;height:auto;}
.workspace-art .work-character:nth-child(2) {transform:translateY(-18px);}
.workspace-art-note {grid-column:1/-1;text-align:center;font-size:13px;font-weight:600;margin-top:18px;color:#35527a;}
.workspace-section-heading {display:flex;align-items:end;justify-content:space-between;gap:20px;margin:0 0 26px;}
.workspace-section-heading h2 {margin-bottom:0;}
.workspace-section-heading .eyebrow {margin-bottom:10px;}
.completion-pill {background:#fff0b9;border:1px solid #e8d491;border-radius:999px;padding:10px 16px;font-size:13px;white-space:nowrap;}
.app-shell .assessment-history-card {background:white;border-radius:24px;border-color:#d1ddeb;padding:28px;}
.dashboard-page .assessment-history-card .profile-title {font-size:30px;}
.dashboard-page .profile-symbol {width:48px;height:48px;margin-bottom:20px;}
.dashboard-page .character-card-art {max-width:128px;margin:0 0 20px;}
.app-shell .history {border:0;display:grid;gap:12px;}
.app-shell .history>article {background:white;border:1px solid #d1ddeb;border-radius:20px;padding:22px 26px;}
.app-shell .empty-state {border:1px dashed #b8c9e2;border-radius:24px;background:#e6effb;padding:36px;}
.account-intro {max-width:640px;margin-bottom:32px;}
.account-intro>p:last-child {font-size:18px;line-height:1.75;}
.app-shell .panel,.app-shell .role-main,.app-shell .role-card,.app-shell .role-confirmed-profile>article {border-radius:24px;border-color:#d1ddeb;box-shadow:none;}
.app-shell .panel {padding:32px;}
.app-shell .panel h2 {font-size:30px;}
.app-shell input:not([type=checkbox]):not([type=radio]):not([type=hidden]),.app-shell textarea,.app-shell select {border-radius:12px;border-color:#b8c9e2;background:#fbfdff;max-width:100%;}
.app-shell input[type=checkbox],.app-shell input[type=radio] {accent-color:#285ab5;}
.app-shell label {line-height:1.5;}
.app-shell .check {align-items:flex-start;}
.app-shell .check input {flex-shrink:0;margin-top:4px;}
.app-shell .consent-panel {background:#e6effb;border-color:#c9d9ee;border-radius:18px;padding:24px;}
.app-shell .danger-zone {border-color:#e5c1bb;}
.app-shell .social-logins {background:white;border:1px solid #d1ddeb;border-radius:24px;padding:26px;margin-bottom:24px;}
.app-shell .social-logins h2 {font-size:26px;}
.app-shell .social-logins form+form {margin-top:12px;}
.app-shell .auth-card {min-height:0;max-width:600px;margin:48px auto 64px;padding:40px;background:white;border:1px solid #d1ddeb;border-radius:28px;}
.app-shell .auth-card h1 {font-size:clamp(36px,5vw,50px);}
.app-shell .auth-card .social-logins {padding:22px 0 0;border:0;border-top:1px solid #d1ddeb;border-radius:0;margin-top:28px;}
.app-shell .notice {background:#e6effb;border-radius:16px;border-color:#c9d9ee;}
.app-shell .quiz-wrap {max-width:860px;margin:40px auto 56px;padding:32px 40px 36px;background:white;border:1px solid #d1ddeb;border-radius:28px;min-height:0;}
.app-shell .quiz-top {margin-bottom:28px;}
.app-shell .quiz-wrap .question-title {font-size:clamp(26px,3vw,34px);line-height:1.3;}
.app-shell .quiz-wrap progress {height:8px;border-radius:999px;}
.app-shell .choice-table td {background:#f7faff;border-color:#c9d9ee;}
.app-shell .choice-table td:first-child {border-radius:16px 0 0 16px;}
.app-shell .choice-table td:last-child {border-radius:0 16px 16px 0;}
.app-shell .choice-table tr:has(input:checked) td {background:#e6effb;border-color:#b0c7e9;}
.app-shell .likert-choice,.app-shell .role-choice {border-radius:14px;background:#f7faff;border-color:#d1ddeb;}
.app-shell .likert-choice:has(input:checked),.app-shell .role-choice:has(input:checked) {background:#e2edff;border-color:#285ab5;}
.app-shell .role-overview article {border-radius:24px;background:#fff3ce;}
.app-shell .role-overview article:nth-child(2) {background:#dce9fb;}
.app-shell .role-overview article:nth-child(3) {background:#e2efdf;}
.app-shell .role-overview span {display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;background:#ffffffa8;border-radius:50%;color:#1e2b4a;font-weight:700;}
.app-shell .role-sidebar {background:#e2ecfa;border-radius:24px;}
.app-shell .role-step {border-radius:12px;}
.app-shell .role-main h2 {font-size:30px;}
.app-shell .role-review summary {font-family:Bricolage,Arial,sans-serif;}
.app-shell .role-history article {background:white;border:1px solid #d1ddeb;padding:20px;border-radius:20px;margin-bottom:12px;}
@media(max-width:1050px) {
  .app-header {flex-wrap:wrap;justify-content:center;gap:16px;}
  .app-header .app-nav {justify-content:center;}
  .workspace-hero {gap:28px;grid-template-columns:1.2fr 1fr;}
  .workspace-art {min-height:220px;}
}
@media(max-width:800px) {
  .workspace-hero {grid-template-columns:1fr;margin-bottom:40px;}
  .workspace-art {max-width:440px;width:100%;margin:auto;}
  .workspace-section-heading {align-items:flex-start;flex-direction:column;gap:16px;}
  .app-shell .quiz-wrap {margin:24px 20px 40px;padding:26px;}
}
@media(max-width:600px) {
  .app-header {padding:20px 16px 14px;gap:16px;}
  .app-brand {font-size:23px;}
  .app-header .app-nav {width:100%;gap:2px;font-size:12px;}
  .app-header .app-nav>a,.app-nav-more>summary {padding:10px 8px;}
  .app-shell .section {padding-top:32px;padding-bottom:40px;}
  .app-shell .workspace-hero h1 {font-size:46px;}
  .workspace-intro,.workspace-hero .role-intro {font-size:16px;}
  .workspace-hero .button-row {align-items:stretch;flex-direction:column;}
  .workspace-art {min-height:0;padding:26px 12px 20px;}
  .app-shell .panel {padding:22px;}
  .app-shell .consent-panel {padding:18px;}
  .app-shell .checkbox-grid {grid-template-columns:1fr;}
  .app-shell .auth-card {margin:24px 16px 40px;padding:26px;}
  .app-shell .quiz-wrap {margin:20px 12px 32px;padding:22px 16px;}
  .app-shell .quiz-top {gap:12px;align-items:flex-start;}
  .app-shell .quiz-top .pill {font-size:11px;padding:7px 10px;}
  .app-shell .quiz-actions .button {font-size:13px;padding:12px 16px;}
  .app-shell .progress-label {flex-wrap:wrap;gap:4px;}
  .app-shell .role-main {padding:20px;}
  .app-shell .role-main h2 {font-size:26px;}
  .app-shell .history>article {padding:20px;}
  .app-shell footer {padding:28px 22px;flex-direction:column;text-align:center;}
}