/* Extend the shared Playbook appearance to HealthInsight's custom screen UI. */
@media screen {
    :root:is([data-appearance="quiet-luxury"], [data-appearance="nexora"]) {
        .viewer-layout .ambient-grid,
        .record-hero::after {
            display: none;
        }

        :is(.record-hero, .session-panel, .result-panel, .state-card,
            .examination-navigation, .examination-editor,
            .import-intro, .import-steps, .import-upload,
            .import-file-summary, .import-review-heading, .import-empty,
            .import-summary-grid > div, .import-columns, .import-preview) {
            border-radius: var(--app-radius-lg);
            box-shadow: var(--app-shadow-sm);
        }

        :is(.identity-facts, .session-option, .session-year, .retry-button,
            .result-surface, .result-surface .data-group,
            .state-icon, .brand-mark, .landing-brand-lockup__mark) {
            border-radius: var(--app-radius-md);
        }

        :is(.record-heading h1, .result-heading h2, .state-card h1,
            .state-card h2, .viewer-brand strong, .session-panel h2) {
            font-family: var(--app-font-heading);
            font-weight: 400;
            line-height: 1.2;
        }

        .result-heading {
            background: var(--app-surface);
        }

        :is(.session-option:hover, .retry-button:hover) {
            transform: none;
        }

        :is(.brand-mark, .landing-brand-lockup__mark, .landing-hero-visual figcaption) {
            box-shadow: none;
            backdrop-filter: none;
        }

        .dataviewer-group.view {
            --color: var(--app-foreground);
        }

        :is(.participant-viewer-header.view,
            .dataviewer-group.view .items-interpretations-super-container) {
            color: var(--app-foreground);
            background: var(--app-surface);
            border-radius: var(--app-radius-lg);
            box-shadow: var(--app-shadow-sm);
        }

        .dataviewer-group.view .report-table-1 thead tr th {
            border-color: var(--app-border);
        }

        .import-steps :is(.is-current, .is-complete) span {
            color: var(--app-on-brand);
        }

        .sign-selector button.active.emp {
            color: var(--app-danger);
        }

        :is(.examination-navigation, .examination-editor) {
            color: var(--app-foreground);
            border-color: var(--app-border);
        }

        .examination-navigation {
            background: var(--app-surface-muted);
        }

        .examination-editor {
            background: var(--app-surface);
        }

        :is(.identity-summary dt, .examination-navigation__heading,
            .examination-editor__heading span:first-child, .clinical-data-control__unit) {
            color: var(--app-foreground-muted);
        }

        .examination-editor__heading {
            border-color: var(--app-border);
        }

        :is(.clinical-data-control__label, .clinical-data-control__output) {
            color: var(--app-foreground);
        }

        .clinical-data-control__output {
            border-color: var(--app-border);
            border-radius: var(--app-radius-sm);
            background: var(--app-surface-muted);
        }

        :is(.sign-selector, .sign-selector button) {
            border-color: var(--app-border);
        }

        .sign-selector button {
            color: var(--app-foreground-muted);
            background: var(--app-surface-muted);
        }

        .sign-selector button:hover {
            background: var(--app-surface-hover);
        }

        .sign-selector button.active {
            background: var(--app-accent-soft);
        }

        .section-signal--complete {
            color: var(--app-success);
            background: var(--app-success-soft);
        }

        .section-signal--attention {
            color: var(--app-danger);
            background: var(--app-danger-soft);
        }

        .section-signal--pending {
            color: var(--app-foreground-muted);
            background: var(--app-surface-muted);
        }

        /* Theme the preview controls; the report sheet keeps its print palette. */
        .preview-studio {
            --studio-ink: var(--app-foreground);
            --studio-muted: var(--app-foreground-muted);
            --studio-accent: var(--app-accent);
            background: var(--app-background);
        }

        .preview-toolbar {
            border-color: var(--app-border);
            background: var(--app-surface);
            backdrop-filter: none;
        }

        .preview-studio .mode-switch {
            border-color: var(--app-border);
            border-radius: var(--app-radius-md);
            background: var(--app-surface-muted);
        }

        .preview-studio .mode-button {
            color: var(--app-foreground-muted);
            border-radius: var(--app-radius-sm);
        }

        .preview-studio .mode-button.active {
            color: var(--app-foreground);
            background: var(--app-surface);
            box-shadow: var(--app-shadow-sm);
        }

        .preview-studio .render-button {
            color: var(--app-on-brand);
            border-radius: var(--app-radius-sm);
        }

        .preview-studio .render-button:hover {
            background: color-mix(in srgb, var(--app-accent) 88%, var(--app-foreground));
        }

        /* The rule editor is a custom composition outside the shared shell. */
        .rule-studio {
            --ink: var(--app-foreground);
            --teal: var(--app-accent);
            --paper: var(--app-background);
            font-family: var(--app-font-body);
        }

        .rule-studio :is(.rule-studio__header, .rule-studio__context,
            .rule-palette, .rule-inspector, .graph-node,
            .data-drawer, .data-option, .template-list article) {
            background: var(--app-surface);
            border-color: var(--app-border);
        }

        .rule-studio :is(.rule-canvas, .palette-node, .data-picker,
            .test-card, .rule-inspector code, .template-shelf,
            .node-inline-control, .node-title:hover) {
            background: var(--app-surface-muted);
            border-color: var(--app-border);
        }

        .rule-studio :is(.studio-input, .test-card input, .test-card select,
            .test-card textarea, .node-inline-control) {
            color: var(--app-foreground);
            border-color: var(--app-border);
            border-radius: var(--app-radius-sm);
            background: var(--app-surface);
        }

        .rule-studio :is(p, small, .canvas-empty, .inspector-empty,
            .rule-palette h3, .node-port span, .test-status) {
            color: var(--app-foreground-muted);
        }

        .rule-studio :is(h1, h2, .property-heading strong, .canvas-empty strong,
            .template-shelf > header strong, .data-group > header strong) {
            font-family: var(--app-font-heading);
            font-weight: 400;
        }

        .rule-studio .graph-node {
            border-top-color: var(--app-accent);
            border-radius: var(--app-radius-md);
            box-shadow: var(--app-shadow-sm);
        }

        .rule-studio .node-port {
            background: var(--app-surface);
        }

        .rule-studio .node-port:hover {
            background: var(--app-accent-soft);
        }

        .rule-studio .node-title {
            font-family: var(--app-font-body);
        }

        .rule-studio .data-drawer header button {
            color: var(--app-foreground-muted);
        }

        .rule-studio .test-card summary {
            color: var(--app-accent);
        }

        .rule-studio .data-option .data-kind {
            color: var(--app-warning);
        }

        .rule-studio .trace-row code {
            color: var(--app-foreground);
        }

        .rule-studio .validation-panel h3 span {
            color: var(--app-foreground);
            background: var(--app-surface-muted);
        }

        .rule-studio :is(.graph-node:hover, .graph-node.selected,
            .studio-input:focus, .node-title:focus, .node-inline-control:focus) {
            outline-color: var(--app-focus-ring);
            box-shadow: var(--app-shadow-sm);
        }

        .rule-studio :is(.palette-node:hover, .data-option:hover, .data-option.selected) {
            border-color: var(--app-accent-border);
            background: var(--app-accent-soft);
        }

        .rule-studio :is(.version-chip, .studio-status, .trace-row > span) {
            color: var(--app-accent) !important;
            background: var(--app-accent-soft);
        }

        .rule-studio :is(.mode-chip, .mode-select, .template-coverage.shadow) {
            color: var(--app-warning);
            background: var(--app-warning-soft);
        }

        .rule-studio :is(.valid, .test-status.passed, .template-coverage.ready) {
            color: var(--app-success) !important;
        }

        .rule-studio .template-coverage.ready {
            background: var(--app-success-soft);
        }

        .rule-studio :is(.invalid, .test-status.failed, .test-error) {
            color: var(--app-danger) !important;
        }

        .rule-studio .test-error {
            background: var(--app-danger-soft);
        }

        .rule-studio :is(.test-toolbar button, .test-card button,
            .data-drawer__actions button) {
            color: var(--app-accent);
            border-color: var(--app-accent-border);
            background: var(--app-accent-soft);
        }

        .rule-studio .test-card > header button {
            color: var(--app-danger);
            background: transparent;
        }

        .rule-studio :is(.canvas-help, .minimap) {
            color: var(--app-foreground-muted);
            border-color: var(--app-border);
            background: var(--app-surface);
        }

        .rule-studio .data-group > header {
            background: var(--app-surface);
            border-color: var(--app-accent);
        }

        .rule-studio .data-group > header span {
            color: var(--app-foreground-muted) !important;
        }

        .rule-studio .edge-path:not(.pending) {
            stroke: var(--app-accent);
            filter: none;
        }

        .rule-studio .canvas-grid {
            background-image: radial-gradient(var(--app-border) 1px, transparent 1px);
        }

        :is(.preview-studio, .rule-studio) :is(button, a, input, select, textarea):focus-visible {
            outline: 2px solid var(--app-focus-ring);
            outline-offset: 2px;
        }
    }
}