/* Canonical Evolver application chrome/forms, shared by site and dashboard.
   Reuse global.css tokens, typography.css and primitives.css. No local palette. */
.app-body { min-height: 100svh; display: flex; flex-direction: column; }
.app-body::before { content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(ellipse 65% 55% at 20% 30%, var(--green-soft), transparent 75%), radial-gradient(ellipse at bottom right, var(--navy-2), transparent 70%); opacity: 0.5; }
.skip-link { position: fixed; top: 8px; left: 16px; z-index: 200; padding: 12px 20px; background: var(--green); color: var(--navy); transform: translateY(-160%); }
.skip-link:focus { transform: none; }
.app-header { position: sticky; top: 0; z-index: 50; border-bottom: 1px solid var(--line); background: var(--navy-glass); backdrop-filter: blur(12px); }
.app-header__inner { display: flex; align-items: center; min-height: var(--nav-height); gap: 24px; padding-block: 12px; }
.app-brand { display: inline-flex; flex-shrink: 0; align-items: center; min-height: 44px; }
.app-brand img { width: auto; height: 30px; }
.app-brand__light { display: none; }
[data-theme='light'] .app-brand__light { display: block; }
[data-theme='light'] .app-brand__dark { display: none; }
.app-context { border-left: 1px solid var(--line-2); padding-left: 24px; color: var(--muted); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; }
.app-nav { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-left: auto; }
.app-nav > a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 8px 14px; border: 1px solid transparent; border-radius: 999px; font-size: 12px; font-weight: 500; color: var(--muted); transition: color 160ms, background 160ms, border-color 160ms; }
.app-nav > a:hover { color: var(--text); border-color: var(--line-2); }
.app-nav > a[aria-current='page'] { color: var(--green); border-color: var(--green-line); background: var(--green-soft); }
.app-nav form { margin: 0; }
.app-main { flex: 1; padding-block: 64px 80px; }
.app-frame { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); align-items: start; gap: clamp(40px, 6vw, 88px); }
.app-aside { position: sticky; top: calc(var(--nav-height) + 48px); padding-block: 32px; }
.app-aside .eyebrow { margin-bottom: 24px; }
.app-aside h2 { font-family: 'Russo One', sans-serif; font-size: clamp(36px, 4.7vw, 64px); font-weight: 400; line-height: 1.05; text-transform: uppercase; letter-spacing: 0.005em; }
.app-aside .body-lg { max-width: 390px; margin-top: 24px; }
.app-benefits { display: grid; gap: 22px; margin-top: 40px; padding-top: 28px; border-top: 1px solid var(--line-2); }
.app-benefits li { display: grid; grid-template-columns: 30px minmax(0,1fr); gap: 16px; }
.app-benefits__number { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--green); padding-top: 3px; }
.app-benefits strong { display: block; font-size: 14px; font-weight: 600; }
.app-benefits p { margin-top: 4px; color: var(--muted); font-size: 13px; line-height: 1.7; }
.app-aside__note { display: flex; align-items: center; gap: 10px; margin-top: 36px; font-family: 'JetBrains Mono', monospace; color: var(--muted); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; }
.app-aside__note::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--green); flex-shrink: 0; }
.app-panel { min-width: 0; padding: clamp(24px, 3vw, 40px); background: var(--navy-2); border: 1px solid var(--line-2); border-radius: 4px; }
.app-surface h1 { font-family: 'Russo One', sans-serif; font-size: clamp(28px, 3.2vw, 42px); font-weight: 400; line-height: 1.08; text-transform: uppercase; overflow-wrap: anywhere; }
.app-surface h2 { font-family: 'Russo One', sans-serif; font-size: clamp(20px, 2.2vw, 28px); font-weight: 400; line-height: 1.2; text-transform: uppercase; }
.app-surface h3 { font-family: 'Russo One', sans-serif; font-size: 17px; font-weight: 400; text-transform: uppercase; }
.app-surface p { font-size: 14px; line-height: 1.7; color: var(--muted); }
.app-surface p a, .app-surface .text-link { color: var(--green); text-decoration: underline; text-underline-offset: 4px; }
.app-surface strong { color: var(--text); font-weight: 600; }
.app-surface .eyebrow { color: var(--green); font-family: 'JetBrains Mono', monospace; font-size: 11px; }
.app-page-heading { display: grid; gap: 16px; margin-bottom: 32px; }
.app-page-heading > p { max-width: 700px; }
.app-form { display: grid; align-content: start; gap: 18px; }
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 500; letter-spacing: 0.12em; line-height: 1.6; text-transform: uppercase; color: var(--muted); }
.field input:not([type='checkbox']), .field select, .field textarea { display: block; width: 100%; min-width: 0; min-height: 48px; border: 1px solid var(--line-2); border-radius: 4px; background: var(--navy); color: var(--text); padding: 13px 16px; font-family: 'Manrope', sans-serif; font-size: 14px; font-weight: 400; letter-spacing: normal; text-transform: none; transition: border-color 180ms ease; }
.field input:hover, .field select:hover { border-color: var(--green-line); }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--green); }
.field small { font-family: 'Manrope', sans-serif; font-size: 12px; font-weight: 400; letter-spacing: normal; text-transform: none; }
.field select { padding-right: 32px; }
.field input:disabled { opacity: 0.6; cursor: not-allowed; }
.form-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 20px; }
.form-grid__full { grid-column: 1 / -1; }
.check { display: flex; align-items: flex-start; gap: 12px; font-family: 'Manrope', sans-serif; font-size: 13px; font-weight: 400; letter-spacing: normal; line-height: 1.65; text-transform: none; color: var(--muted); cursor: pointer; }
.check input, .role-tile input { width: 18px; height: 18px; margin-top: 2px; flex-shrink: 0; accent-color: var(--green); cursor: pointer; }
.check a { color: var(--green); text-decoration: underline; text-underline-offset: 3px; }
.form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.app-nav .btn, .app-surface .btn { min-height: 44px; }
.notice { padding: 14px 16px; border: 1px solid var(--line-2); border-radius: 4px; background: var(--navy); overflow-wrap: anywhere; }
.app-surface .notice--success { border-color: var(--green-line); background: var(--green-soft); color: var(--text); }
.app-surface .notice--error { border-color: var(--danger-line); background: var(--danger-soft); color: var(--danger); }
.app-surface .error { color: var(--danger); }
.app-surface .muted { color: var(--muted); }
.app-section { display: grid; align-content: start; gap: 20px; }
.app-section__heading { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; }
.record-list { display: grid; gap: 12px; }
.record { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; padding: 18px; border: 1px solid var(--line); background: var(--navy); border-radius: 4px; min-width: 0; }
.record > div { min-width: 0; }
.record strong { font-size: 14px; }
.record small { display: block; margin-top: 4px; color: var(--muted); font-family: 'JetBrains Mono', monospace; font-size: 10px; overflow-wrap: anywhere; }
.badge { display: inline-flex; align-items: center; padding: 4px 10px; border: 1px solid var(--line-2); border-radius: 999px; font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 0.04em; color: var(--muted); }
.badge--active { border-color: var(--green-line); color: var(--green); background: var(--green-soft); }
.badge--error { border-color: var(--danger-line); color: var(--danger); background: var(--danger-soft); }
.app-footer { border-top: 1px solid var(--line); padding-block: 24px; }
.app-footer__inner { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px; }
.app-footer p, .app-footer a { font-family: 'JetBrains Mono', monospace; font-size: 10px; line-height: 1.7; letter-spacing: 0.04em; color: var(--muted); }
.app-footer nav { display: flex; flex-wrap: wrap; gap: 20px; }
.app-footer a:hover { color: var(--green); }
@media (max-width: 960px) {
  .app-context { display: none; }
  .app-frame { grid-template-columns: minmax(0,1fr); max-width: 680px; margin-inline: auto; }
  .app-aside { display: none; }
  .app-main { padding-block: 40px 56px; }
}
@media (max-width: 600px) {
  .app-header__inner { gap: 12px; flex-wrap: wrap; padding-block: 12px; }
  .app-brand img { height: 26px; }
  .app-nav { order: 3; width: 100%; justify-content: center; border-top: 1px solid var(--line); padding-top: 8px; }
  .app-header .theme-toggle { margin-left: auto; }
  .app-nav > a { padding-inline: 12px; }
  .app-main { padding-block: 24px 40px; }
  .app-panel { padding: 24px 20px; }
  .form-grid { grid-template-columns: minmax(0,1fr); }
  .form-actions > .btn { flex-grow: 1; }
  .app-footer__inner { flex-direction: column; align-items: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
  .app-nav > a, .field input, .field select, .field textarea { transition: none; }
}