/* ─────────────────────────────────────────────────────────────────────────
   Instrument Panel for the clinician app and its entry pages.

   Opt-in: add `instrument` to <html> (portal, login, beta-access,
   connect-device, 404) or to a single element such as a modal. Inside that
   scope, Tailwind's slate/gray/blue/white scales (which read CSS variables,
   see tailwind.config.js) switch to the warm housing ramp and royal-blue key,
   and the shared components from main.css are re-cut in the instrument
   vocabulary: housing panels with seams, physical keys with travel, recessed
   wells, Archivo type. Pages without the class (CogniHealth, the patient
   assessment screen) are untouched.

   The app is an Operate surface: denser and quieter than the marketing site,
   no grain, clinical status colours (red, amber, green) keep their meaning.
   ───────────────────────────────────────────────────────────────────────── */

.instrument {
    /* Tailwind scales (space-separated RGB for <alpha-value>) */
    --tw-white: 244 243 238;
    --tw-slate-50: 240 239 234;
    --tw-slate-100: 230 228 221;
    --tw-slate-200: 214 210 200;
    --tw-slate-300: 191 187 176;
    --tw-slate-400: 150 147 138;
    --tw-slate-500: 95 96 88;
    --tw-slate-600: 79 80 73;
    --tw-slate-700: 61 63 57;
    --tw-slate-800: 44 46 42;
    --tw-slate-900: 31 33 30;
    --tw-slate-950: 22 24 21;
    --tw-gray-50: 240 239 234;
    --tw-gray-100: 230 228 221;
    --tw-gray-200: 214 210 200;
    --tw-gray-300: 191 187 176;
    --tw-gray-400: 150 147 138;
    --tw-gray-500: 95 96 88;
    --tw-gray-600: 79 80 73;
    --tw-gray-700: 61 63 57;
    --tw-gray-800: 44 46 42;
    --tw-gray-900: 31 33 30;
    --tw-gray-950: 22 24 21;
    --tw-blue-50: 238 242 253;
    --tw-blue-100: 223 230 251;
    --tw-blue-200: 193 207 246;
    --tw-blue-300: 152 174 239;
    --tw-blue-400: 107 135 228;
    --tw-blue-500: 61 99 217;
    --tw-blue-600: 31 79 209;
    --tw-blue-700: 26 66 176;
    --tw-blue-800: 23 55 142;
    --tw-blue-900: 20 47 114;
    --tw-blue-950: 14 29 71;
    --tw-primary: 31 79 209;
    --tw-primary-hover: 26 66 176;

    /* main.css design tokens */
    --color-primary: #1f4fd1;
    --color-primary-container: #2f5fe6;
    --font-sans: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
    --font-mono-app: 'Martian Mono';

    /* instrument surfaces */
    --app-housing: #e2dfd7;
    --app-housing-hi: #ecebe5;
    --app-housing-lo: #d4d0c6;
    --app-well: #f6f5f1;
    --app-seam-dark: rgba(52, 46, 34, 0.2);
    --app-seam-light: rgba(255, 255, 255, 0.7);
    --app-cast: rgba(40, 34, 22, 0.42);
    --app-ink: #1b1d1a;
    --app-ink-2: #44463f;
    --app-engrave: #575850;
    --app-placeholder: #6b6c64;
    --app-key: #1f4fd1;
    --app-key-hover: #1a45bd;
    --app-key-edge: #142f86;
    --app-keyh: #f4f3ee;
    --app-keyh-hover: #ffffff;
    --app-keyh-edge: #bdb8ac;
    --app-danger: #b42318;
    --app-danger-edge: #7a1a12;
    --app-success: #1d6a3c;
    --app-success-edge: #134628;
}

.dark .instrument,
.dark.instrument {
    --tw-primary: 47 95 230;
    --tw-primary-hover: 58 105 238;
    --color-primary: #2f5fe6;
    --color-primary-container: #2f5fe6;

    --app-housing: #1e201d;
    --app-housing-hi: #272a26;
    --app-housing-lo: #161815;
    --app-well: #121411;
    --app-seam-dark: rgba(0, 0, 0, 0.55);
    --app-seam-light: rgba(255, 255, 255, 0.06);
    --app-cast: rgba(0, 0, 0, 0.7);
    --app-ink: #edece5;
    --app-ink-2: #bdbeb3;
    --app-engrave: #a2a397;
    --app-placeholder: #8f9086;
    --app-key: #2f5fe6;
    --app-key-hover: #3a69ee;
    --app-key-edge: #17338f;
    --app-keyh: #30332f;
    --app-keyh-hover: #393c37;
    --app-keyh-edge: #0f110e;
    --app-danger: #c8382a;
    --app-danger-edge: #6e160f;
    --app-success: #2b7d4d;
    --app-success-edge: #123d24;
}

/* ─── page ground and type ────────────────────────────────────────────── */
.instrument {
    color-scheme: light;
}

.dark .instrument,
.dark.instrument {
    color-scheme: dark;
}

html.instrument {
    background: var(--app-housing);
}

.instrument input[type="radio"],
.instrument input[type="checkbox"],
.instrument input[type="range"] {
    accent-color: var(--app-key);
}

/* An element-level scope (e.g. a modal on the homepage) restarts the type. */
.instrument:not(html) {
    font-family: var(--font-sans);
}

html.instrument body {
    background: var(--app-housing) !important;
    color: var(--app-ink);
    font-family: var(--font-sans);
}

/* Entry pages paint their full-height wrapper (beta-access with an inline
   gradient); the housing shows through instead. */
html.instrument body > div[style*="gradient"],
html.instrument body > div.min-h-screen {
    background: transparent !important;
}

.instrument ::-moz-selection {
    background: var(--app-key);
    color: #ffffff;
}

.instrument ::selection {
    background: var(--app-key);
    color: #ffffff;
}

.instrument :focus-visible {
    outline: 2px solid var(--app-key);
    outline-offset: 2px;
}

.instrument h1,
.instrument h2,
.instrument h3 {
    font-family: var(--font-sans);
    letter-spacing: -0.015em;
}

.instrument h1,
.instrument h2 {
    font-stretch: 92%;
}

/* Uppercase form labels read as engraved panel labels */
.instrument label.uppercase,
.instrument .uppercase.tracking-wider,
.instrument .uppercase.tracking-wide {
    font-stretch: 125%;
    letter-spacing: 0.08em;
}

/* Decorative blurred glows (login) have no place on the instrument */
.instrument .blur-3xl.pointer-events-none {
    display: none;
}

/* ─── header and footer bars ──────────────────────────────────────────── */
/* main.css forces every dark header and footer navy; the housing replaces it.
   Light bars keep their own utilities, which already follow the ramp. */
.dark .instrument header:not(.hero),
.dark.instrument header:not(.hero) {
    background-color: var(--app-housing-hi) !important;
    border-color: var(--app-seam-dark) !important;
    box-shadow: 0 1px 0 var(--app-seam-light);
    backdrop-filter: none;
}

.dark .instrument footer:not(.landing-footer),
.dark.instrument footer:not(.landing-footer) {
    background-color: var(--app-housing-lo) !important;
    border-color: var(--app-seam-dark) !important;
}

/* ─── panels ──────────────────────────────────────────────────────────── */
.instrument .card,
.dark .instrument .card,
.dark.instrument .card,
.instrument .glass-panel,
.dark .instrument .glass-panel,
.dark.instrument .glass-panel,
.instrument .landing-card,
.dark .instrument .landing-card,
.dark.instrument .landing-card {
    background: var(--app-housing-hi);
    border: 1px solid var(--app-seam-dark);
    border-radius: 14px;
    color: var(--app-ink);
    box-shadow: inset 0 1px 0 var(--app-seam-light), 0 18px 30px -26px var(--app-cast);
    backdrop-filter: none;
}

.instrument .modal-overlay,
.modal-overlay.instrument,
.dark .instrument .modal-overlay,
.dark .modal-overlay.instrument,
.dark.instrument .modal-overlay {
    background: rgba(18, 20, 17, 0.55);
    backdrop-filter: blur(2px);
}

.instrument .modal-content,
.dark .instrument .modal-content,
.dark.instrument .modal-content {
    background: var(--app-housing-hi);
    border: 1px solid var(--app-seam-dark);
    border-radius: 18px;
    color: var(--app-ink);
    box-shadow: inset 0 1px 0 var(--app-seam-light), 0 30px 60px -30px rgba(0, 0, 0, 0.55);
}

/* ─── keys ────────────────────────────────────────────────────────────── */
.instrument .btn,
.dark .instrument .btn,
.dark.instrument .btn {
    --edge: var(--app-keyh-edge);
    border: 0;
    border-radius: 8px;
    font-weight: 600;
    font-stretch: 104%;
    letter-spacing: 0.005em;
    box-shadow: 0 2px 0 var(--edge), 0 6px 12px -10px var(--app-cast);
    transition: transform 70ms steps(2, end), box-shadow 70ms steps(2, end), background-color 120ms;
}

.instrument .btn:active:not(:disabled) {
    transform: translateY(2px);
    box-shadow: 0 0 0 var(--edge);
}

.instrument .btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.instrument .btn-primary,
.dark .instrument .btn-primary,
.dark.instrument .btn-primary {
    --edge: var(--app-key-edge);
    background-color: var(--app-key);
    color: #ffffff;
}

.instrument .btn-primary:hover,
.dark .instrument .btn-primary:hover,
.dark.instrument .btn-primary:hover {
    background-color: var(--app-key-hover);
}

.instrument .btn-secondary,
.dark .instrument .btn-secondary,
.dark.instrument .btn-secondary {
    --edge: var(--app-keyh-edge);
    background-color: var(--app-keyh);
    color: var(--app-ink);
}

.instrument .btn-secondary:hover,
.dark .instrument .btn-secondary:hover,
.dark.instrument .btn-secondary:hover {
    background-color: var(--app-keyh-hover);
}

.instrument .btn-danger,
.dark .instrument .btn-danger,
.dark.instrument .btn-danger {
    --edge: var(--app-danger-edge);
    background-color: var(--app-danger);
    color: #ffffff;
}

.instrument .btn-danger:hover,
.dark .instrument .btn-danger:hover,
.dark.instrument .btn-danger:hover {
    background-color: var(--app-danger-edge);
}

.instrument .btn-success,
.dark .instrument .btn-success,
.dark.instrument .btn-success {
    --edge: var(--app-success-edge);
    background-color: var(--app-success);
    color: #ffffff;
}

.instrument .btn-success:hover,
.dark .instrument .btn-success:hover,
.dark.instrument .btn-success:hover {
    background-color: var(--app-success-edge);
}

.instrument .btn-icon,
.dark .instrument .btn-icon,
.dark.instrument .btn-icon,
.instrument .theme-toggle-icon,
.dark .instrument .theme-toggle-icon,
.dark.instrument .theme-toggle-icon {
    color: var(--app-ink-2);
}

/* ─── wells (inputs) ──────────────────────────────────────────────────── */
.instrument .input-field,
.dark .instrument .input-field,
.dark.instrument .input-field,
.instrument .input-dark,
.dark .instrument .input-dark,
.dark.instrument .input-dark,
.instrument .language-selector,
.dark .instrument .language-selector,
.dark.instrument .language-selector {
    background-color: var(--app-well);
    border: 1px solid var(--app-seam-dark);
    border-radius: 8px;
    color: var(--app-ink);
    box-shadow: inset 0 2px 3px rgba(0, 0, 0, 0.08);
    caret-color: var(--app-key);
}

.instrument .input-field::-moz-placeholder, .instrument .input-dark::-moz-placeholder {
    color: var(--app-placeholder);
    opacity: 1;
}

.instrument .input-field::placeholder,
.instrument .input-dark::placeholder {
    color: var(--app-placeholder);
    opacity: 1;
}

.instrument .input-field:focus,
.instrument .input-dark:focus,
.instrument .language-selector:focus,
.instrument .btn:focus,
.instrument .theme-toggle-icon:focus {
    --tw-ring-color: rgb(var(--tw-primary) / 0.35);
    border-color: var(--app-key);
}

.instrument .spinner {
    border-top-color: var(--app-key);
}

/* ─── mono readouts ───────────────────────────────────────────────────── */
.instrument .font-mono {
    font-variant-numeric: tabular-nums;
}

/* ─── dark-mode text: main.css forces these bright with !important ───── */
.dark .instrument .text-slate-900,
.dark.instrument .text-slate-900,
.dark .instrument .text-slate-800,
.dark.instrument .text-slate-800,
.dark .instrument .text-slate-700,
.dark.instrument .text-slate-700,
.dark .instrument .text-gray-900,
.dark.instrument .text-gray-900,
.dark .instrument .text-gray-800,
.dark.instrument .text-gray-800,
.dark .instrument .text-gray-700,
.dark.instrument .text-gray-700,
.dark .instrument .text-slate-200,
.dark.instrument .text-slate-200,
.dark .instrument .text-slate-100,
.dark.instrument .text-slate-100 {
    color: var(--app-ink) !important;
}

.dark .instrument .text-slate-600,
.dark.instrument .text-slate-600,
.dark .instrument .text-slate-500,
.dark.instrument .text-slate-500,
.dark .instrument .text-slate-300,
.dark.instrument .text-slate-300,
.dark .instrument .text-gray-600,
.dark.instrument .text-gray-600,
.dark .instrument .text-gray-500,
.dark.instrument .text-gray-500 {
    color: var(--app-ink-2) !important;
}

/* ─── toasts: main.css gives dark toasts dark text on dark ground ────── */
.dark .instrument .toast-error,
.dark.instrument .toast-error {
    color: #fecaca;
}

.dark .instrument .toast-info,
.dark.instrument .toast-info {
    color: var(--app-ink);
}

.dark .instrument .toast-warning,
.dark.instrument .toast-warning {
    color: #fde68a;
}

/* ─── dark-mode gaps in the app markup ───────────────────────────────────
   Several elements carry light-only utilities (no dark: variant); under the
   old navy theme they showed as bright lines and pale boxes. */
.dark .instrument .border-slate-100,
.dark.instrument .border-slate-100,
.dark .instrument .border-slate-200,
.dark.instrument .border-slate-200,
.dark .instrument .border-gray-200,
.dark.instrument .border-gray-200 {
    border-color: var(--app-seam-dark);
}

.dark .instrument .divide-slate-100 > :not([hidden]) ~ :not([hidden]),
.dark.instrument .divide-slate-100 > :not([hidden]) ~ :not([hidden]),
.dark .instrument .divide-slate-200 > :not([hidden]) ~ :not([hidden]),
.dark.instrument .divide-slate-200 > :not([hidden]) ~ :not([hidden]) {
    border-color: var(--app-seam-dark);
}

.dark .instrument .bg-red-50,
.dark.instrument .bg-red-50 {
    background-color: rgb(200 56 42 / 0.16);
}

.dark .instrument .border-red-200,
.dark.instrument .border-red-200 {
    border-color: rgb(248 113 113 / 0.35);
}

.dark .instrument .text-red-700,
.dark.instrument .text-red-700,
.dark .instrument .hover\:text-red-800:hover,
.dark.instrument .hover\:text-red-800:hover {
    color: #fca5a5;
}

.dark .instrument .hover\:bg-red-100:hover,
.dark.instrument .hover\:bg-red-100:hover {
    background-color: rgb(200 56 42 / 0.26);
}

/* ─── onboarding tour (css/onboarding.css) ────────────────────────────── */
html.instrument .onboarding-highlight {
    outline-color: var(--app-key) !important;
    animation: none !important;
    box-shadow: 0 0 0 5px rgb(var(--tw-primary) / 0.22);
}

html.instrument .onboarding-backdrop {
    background-color: rgba(18, 20, 17, 0.55);
    backdrop-filter: blur(2px);
}

html.instrument:not(.dark) .onboarding-popover,
html.instrument.dark .onboarding-popover {
    --popover-bg: var(--app-housing-hi);
    --popover-arrow-bg: var(--app-housing-hi);
    --popover-border: var(--app-seam-dark);
    --popover-title: var(--app-ink);
    --popover-body: var(--app-ink-2);
    --popover-meta-text: var(--app-engrave);
    --popover-separator: var(--app-seam-dark);
    --popover-ghost-color: var(--app-ink-2);
    --popover-ghost-hover: var(--app-ink);
    --popover-ghost-bg-hover: var(--app-housing-lo);
    --popover-shadow: inset 0 1px 0 var(--app-seam-light), 0 24px 40px -24px rgba(0, 0, 0, 0.55);
    --popover-badge-bg: rgb(var(--tw-primary) / 0.14);
    --popover-badge-color: var(--app-key);
    --popover-badge-border: rgb(var(--tw-primary) / 0.35);
    --popover-step-bg: var(--app-housing-lo);
    --popover-dot-inactive: var(--app-seam-dark);
    backdrop-filter: none;
}

html.instrument.dark .onboarding-popover {
    --popover-badge-color: #9bb4ff;
}