/* XP-STYLE-OC-1, extended in XP-STYLE-OC-2 — the alternate look ("Try the new look (preview)"). OFF BY DEFAULT. Every rule here sits under html[data-style="base"], set before paint by App.razor from the per-user ui:style setting (oc-style cookie) or a ?style=base demo link. Without the attribute nothing in this file matches, so today's design renders unchanged (the Tools/StyleBaseline captures prove it). Print is excluded: everything is inside @media screen. Rationale and the designer call each rule answers: C:\Claude\OpComm\design\STYLE.md (DC-n). Two hosts, one build (Portal:ClassicHosts): care.opcommportal.com renders data-experience= "classic", the plain OR schedule. The alternate gives care the same TOKENS (colour, focus, radius, type scale, one accent) and NO extra chrome: every rule that adds a shadow or changes spacing is scoped to :not([data-experience="classic"]) (a unit test enforces it). Light and dark are two values of the same token, never a per-component dark rule. */ /* The account-menu switch itself (admins only). Not gated: it is the switch. */ .style-preview-row { display: flex; align-items: center; gap: 8px; } .style-preview-check { margin-left: auto; visibility: hidden; } @media screen { html[data-style="base"] .style-preview-check { visibility: visible; } /* ── 1. Roles (STYLE-BASE §11) mapped onto today's --oc-* tokens ─────────────────────── */ html[data-style="base"] { /* New role tokens the base asks for; today has no equivalent. */ --oc-focus: #2563eb; /* DC-3: one ring */ --oc-line-strong: #7a8496; /* DC-5: control edges, 3.8:1 on white */ --oc-accent-hover: #1d4ed8; /* DC-2: the one accent's hover/pressed */ --oc-radius-control: 6px; /* DC-6: buttons, inputs, selects, menu items */ --oc-radius-card: 10px; /* cards, tiles, popovers, menus */ --oc-radius-dialog: 12px; /* dialogs and sheets */ --oc-radius-pill: 999px; /* chips and pills */ --oc-shadow-1: 0 2px 10px rgba(15, 23, 42, 0.10); --oc-shadow-2: 0 12px 40px rgba(15, 23, 42, 0.18); --oc-font: "Gilroy", "Segoe UI", Roboto, Helvetica, Arial, sans-serif; /* DC-1: brand face kept */ --oc-mono: Consolas, "IBM Plex Mono", ui-monospace, monospace; /* DC-8 type scale, px only. The generated block below snaps every component to it. */ --oc-fs-11: 11px; --oc-fs-12: 12px; --oc-fs-13: 13px; --oc-fs-14: 14px; --oc-fs-16: 16px; --oc-fs-18: 18px; --oc-fs-22: 22px; --oc-fs-26: 26px; /* Retuned values (light). Each was below AA today; see STYLE.md §5. */ --oc-text-muted: #5f6b7a; /* DC-4: 2.65:1 -> 5.43:1 */ --oc-card-sub: #5f6b7a; --oc-chrome-muted: #5f6b7a; --oc-input-border: var(--oc-line-strong); --oc-menu-border: var(--oc-line-strong); --oc-link: var(--oc-accent); /* DC-2: one accent; #007bff was 3.98:1 */ --oc-link-alt: var(--oc-accent); /* Status chips (DC-7): soft tint + strong text + same-hue edge, every pair >= 4.5:1. The six hues stay distinct because each carries clinical meaning (STYLE.md §8.1). XP-STYLE-OC-2 tuned them for colour vision (Tools/StyleBaseline/cvd.js; STYLE-REFERENCE.md R9): yellow light and bright, orange deeper, green toward teal and red toward crimson, so no pair drops below CIEDE2000 10 for protanopia or deuteranopia (round 1's tints had pairs at 7). */ --oc-chip-pending-bg: #EEF1F5; --oc-chip-pending-fg: #4A5463; --oc-chip-pending-bd: #A3ADBB; --oc-chip-progress-bg: #FFF2B3; --oc-chip-progress-fg: #6B4C00; --oc-chip-progress-bd: #E6B800; --oc-chip-completed-bg: #D7F2EA; --oc-chip-completed-fg: #0F6B55; --oc-chip-completed-bd: #2FA586; --oc-chip-cancelled-bg: #FBE0E6; --oc-chip-cancelled-fg: #A3133A; --oc-chip-cancelled-bd: #D9486E; --oc-chip-discharged-bg: #E3EDFD; --oc-chip-discharged-fg: #1A4FA8; --oc-chip-discharged-bd: #4184f1; --oc-chip-noshow-bg: #FFD9B8; --oc-chip-noshow-fg: #7A3300; --oc-chip-noshow-bd: #C25E00; } html[data-style="base"][data-theme="dark"] { --oc-focus: #60a5fa; --oc-line-strong: #64748b; /* 3.75:1 on --oc-page-bg */ --oc-accent-hover: #3b82f6; --oc-shadow-1: 0 2px 10px rgba(0, 0, 0, 0.45); --oc-shadow-2: 0 12px 40px rgba(0, 0, 0, 0.55); --oc-text-muted: #94a3b8; --oc-card-sub: #94a3b8; --oc-chrome-muted: #94a3b8; --oc-link: #60a5fa; --oc-link-alt: #60a5fa; /* Dark chips pass contrast today, but In progress and No show are near-identical for deuteranopia (CIEDE2000 4.8, fills 0.4). XP-STYLE-OC-2 spreads them the same way as light. */ --oc-chip-pending-bg: #334155; --oc-chip-pending-fg: #e2e8f0; --oc-chip-pending-bd: #64748b; --oc-chip-progress-bg: #665c00; --oc-chip-progress-fg: #fff8cc; --oc-chip-progress-bd: #fde047; --oc-chip-completed-bg: #0a6556; --oc-chip-completed-fg: #d5fff3; --oc-chip-completed-bd: #5eead4; --oc-chip-cancelled-bg: #4a0b28; --oc-chip-cancelled-fg: #ffd6e3; --oc-chip-cancelled-bd: #c0306a; --oc-chip-discharged-bg: #1e40af; --oc-chip-discharged-fg: #dbeafe; --oc-chip-discharged-bd: #60a5fa; --oc-chip-noshow-bg: #5c1a00; --oc-chip-noshow-fg: #ffcfae; --oc-chip-noshow-bd: #c2410c; } /* ── 2. One accent for actions (DC-2), both hosts. Navy #253C80 stays brand chrome. ─────── */ html[data-style="base"] :is(.btn-primary, .e-btn.e-primary, .e-css.e-btn.e-primary) { background-color: var(--oc-accent); border-color: var(--oc-accent); color: var(--oc-on-accent); } html[data-style="base"] :is(.btn-primary, .e-btn.e-primary, .e-css.e-btn.e-primary):hover { background-color: var(--oc-accent-hover); border-color: var(--oc-accent-hover); color: var(--oc-on-accent); } /* The Cases filter bar's Reset is the region's one primary action (navy fill today). */ html[data-style="base"] .clear-button { background-color: var(--oc-accent); border-color: var(--oc-accent); color: var(--oc-on-accent); } html[data-style="base"] .clear-button:hover { background-color: var(--oc-accent-hover); } /* The case header's Join is that region's primary action (navy fill today, care and clinical). */ html[data-style="base"] .action-btn.btn-toggle-join-case:not(:disabled) { background-color: var(--oc-accent); } html[data-style="base"] .action-btn.btn-toggle-join-case:not(:disabled):hover { background-color: var(--oc-accent-hover); } html[data-style="base"] :is(input[type="checkbox"], input[type="radio"], input[type="range"], progress) { accent-color: var(--oc-accent); } /* ── 3. Type (DC-1, DC-8, DC-9) ────────────────────────────────────────────────────────── */ /* DC-10 (line-height 1.45) is NOT applied: it adds row height to dense clinical lists (STYLE.md §8.4). */ /* Stacked numbers line up. */ html[data-style="base"] :is(table, .e-grid, [class*="clock"], [class*="timer"], [class*="count"], [class*="badge"], .time, .case-meta) { font-variant-numeric: tabular-nums; } /* ── 4. One focus ring (DC-3; STYLE-BASE §7). Today 22 own rules remove the outline. ── */ html[data-style="base"] :focus-visible { outline: 2px solid var(--oc-focus) !important; outline-offset: 2px !important; } html[data-style="base"] :is([role="tab"], [role="menuitem"], [role="menuitemradio"], [role="menuitemcheckbox"]):focus-visible { outline-offset: -2px !important; } /* ── 5. Radius by role (DC-6), both hosts: chips and pills round, cards 10. ──────────────── */ html[data-style="base"] :is(.status, .census-chip, .module-ws-pill, .presencePill, .selected-tag) { border-radius: var(--oc-radius-pill); } html[data-style="base"] :is(.case, .filter-container, .settings-card, .names-card, .current-step-card, .module-strip-card) { border-radius: var(--oc-radius-card); } html[data-style="base"] :is(.dropdown-select, .search-input, .sort-dropdown-select, .input-field, .expand-input, .e-input-group, .form-control) { border-radius: var(--oc-radius-control); } html[data-style="base"] :is(.profile-dropdown, .theme-menu, .notification-dropdown, .dropdown-wrapper .dropdown-menu, .e-popup) { border-radius: var(--oc-radius-card); } html[data-style="base"] :is(.modal-container, .e-dialog) { border-radius: var(--oc-radius-dialog); } /* ── 6. Chrome: the clinical address only. Care stays a dense, plain list (no shadows, no spacing changes), so every rule here carries :not([data-experience="classic"]). ── */ html[data-style="base"]:not([data-experience="classic"]) :is(.case, .settings-card, .module-strip-card) { box-shadow: var(--oc-shadow-1); } html[data-style="base"]:not([data-experience="classic"]) :is(.profile-dropdown, .theme-menu, .notification-dropdown, .modal-container, .e-dialog, .e-popup.e-popup-open) { box-shadow: var(--oc-shadow-2); } } /* ── BEGIN generated type scale (DC-8; Tools/StyleBaseline/typescale-gen.js; do not edit by hand) ── */ /* 295 font sizes snapped to 11 12 13 14 16 18 22 26 px. 15 left alone: the same selector is declared elsewhere at a value that would change differently, or at a relative value (shared class names). */ @media screen { html[data-style="base"] .about-app-expiry { font-size: 11px; } html[data-style="base"] .about-app-key { font-size: 11px; } html[data-style="base"] .about-app-name { font-size: 13px; } html[data-style="base"] .about-app-status { font-size: 11px; } html[data-style="base"] .about-apps-header h2 { font-size: 22px; } html[data-style="base"] .about-apps-lead { font-size: 13px; } html[data-style="base"] .about-apps-request { font-size: 11px; } html[data-style="base"] .about-page-header h1 { font-size: 22px; } html[data-style="base"] .action-meta .desc { font-size: 12px; } html[data-style="base"] .addressText { font-size: 22px; } html[data-style="base"] .attachment-file-icon { font-size: 11px; } html[data-style="base"] .attachment-image-close-glyph { font-size: 18px; } html[data-style="base"] .attachment-image-title { font-size: 14px; } html[data-style="base"] .attachment-sensitive-badge { font-size: 11px; } html[data-style="base"] .attachment-video-close-glyph { font-size: 18px; } html[data-style="base"] .attachment-video-title { font-size: 14px; } html[data-style="base"] .attachmentUploadArea { font-size: 22px; } html[data-style="base"] .authCheckText { font-size: 22px; } html[data-style="base"] .back-button { font-size: 18px; } html[data-style="base"] .badge { font-size: 11px; } html[data-style="base"] .bell-inbox-empty { font-size: 12px; } html[data-style="base"] .bell-inbox-title { font-size: 11px; } html[data-style="base"] .bell-tab-count { font-size: 11px; } html[data-style="base"] .bell-unread { font-size: 11px; } html[data-style="base"] .bell-watch-unread { font-size: 11px; } html[data-style="base"] .btn-toggle { font-size: 11px; } html[data-style="base"] .bubble-status { font-size: 12px; } html[data-style="base"] .bumpDownSlightly { font-size: 12px !important; } html[data-style="base"] .butterfly { font-size: 16px; } html[data-style="base"] .case-feedback-btn { font-size: 14px; } html[data-style="base"] .census-chip { font-size: 11px; } html[data-style="base"] .census-detail .census-chip { font-size: 11px; } html[data-style="base"] .census-detail-badge { font-size: 11px; } html[data-style="base"] .census-detail-marquee-meta { font-size: 11px; } html[data-style="base"] .census-detail-marquee-state { font-size: 11px; } html[data-style="base"] .census-field-label { font-size: 11px; } html[data-style="base"] .census-list-badge { font-size: 11px; } html[data-style="base"] .census-list-count { font-size: 11px; } html[data-style="base"] .census-list-meta { font-size: 11px; } html[data-style="base"] .census-marquee-count { font-size: 11px; } html[data-style="base"] .census-marquee-emit { font-size: 11px; } html[data-style="base"] .census-marquee-hint { font-size: 11px; } html[data-style="base"] .census-marquee-label { font-size: 11px; } html[data-style="base"] .census-marquee-owner { font-size: 11px; } html[data-style="base"] .census-marquee-patient { font-size: 12px; } html[data-style="base"] .census-marquee-state { font-size: 11px; } html[data-style="base"] .census-marquee-task { font-size: 12px; } html[data-style="base"] .census-quiet { font-size: 12px; } html[data-style="base"] .census-row-primary { font-size: 12px; } html[data-style="base"] .census-row-sub { font-size: 11px; } html[data-style="base"] .chatTextEntryTextArea { font-size: 18px; } html[data-style="base"] .chatTextEntryTextAreaContracted { font-size: 18px; } html[data-style="base"] .chatTextEntryTextAreaExpanded { font-size: 18px; } html[data-style="base"] .clear-selection { font-size: 11px; } html[data-style="base"] .close-button { font-size: 18px; } html[data-style="base"] .close-button-registration { font-size: 22px; } html[data-style="base"] .close-button::before { font-size: 18px; } html[data-style="base"] .compact-dot { font-size: 11px; } html[data-style="base"] .contact-header { font-size: 13px; } html[data-style="base"] .corridor-bind-chip { font-size: 11px; } html[data-style="base"] .corridor-strip-head { font-size: 11px; } html[data-style="base"] .corridor-t { font-size: 14px; } html[data-style="base"] .cs-frame-headline { font-size: 14px; } html[data-style="base"] .csp-banner .intro { font-size: 13px; } html[data-style="base"] .csp-card h3 { font-size: 14px; } html[data-style="base"] .csp-chip { font-size: 11px; } html[data-style="base"] .csp-handoff-sec h4 { font-size: 13px; } html[data-style="base"] .csp-handoff-text { font-size: 13px; } html[data-style="base"] .csp-header h3 { font-size: 18px; } html[data-style="base"] .csp-hp { font-size: 11px; } html[data-style="base"] .csp-labs .trend { font-size: 11px; } html[data-style="base"] .csp-labs { font-size: 13px; } html[data-style="base"] .csp-labs-compact { font-size: 12px; } html[data-style="base"] .csp-uid-input { font-size: 12px; } html[data-style="base"] .current-step-title { font-size: 12px; } html[data-style="base"] .day-compact-caret { font-size: 11px; } html[data-style="base"] .day-separator-label { font-size: 11px; } html[data-style="base"] .day-step-btn { font-size: 16px; } html[data-style="base"] .day-today-btn { font-size: 11px; } html[data-style="base"] .diag-copy { font-size: 11px; } html[data-style="base"] .diag-copy-all { font-size: 11px; } html[data-style="base"] .diagnostics-header h1 { font-size: 18px; } html[data-style="base"] .dx-task-overlay { font-size: 11px; } html[data-style="base"] .error-details { font-size: 12px; } html[data-style="base"] .error-stack { font-size: 12px; } html[data-style="base"] .event-correction-tag { font-size: 11px; } html[data-style="base"] .eye-icon { font-size: 18px; } html[data-style="base"] .familyTextEntryTextArea { font-size: 18px; } html[data-style="base"] .familyTextEntryTextAreaContracted { font-size: 18px; } html[data-style="base"] .familyTextEntryTextAreaExpanded { font-size: 18px; } html[data-style="base"] .fb-grid > span:nth-child(6) { font-size: 16px; } html[data-style="base"] .fb-labels { font-size: 11px; } html[data-style="base"] .feed-badge { font-size: 11px; } html[data-style="base"] .feed-panel-head { font-size: 11px; } html[data-style="base"] .file-tree-empty { font-size: 12px; } html[data-style="base"] .file-tree-modified { font-size: 11px; } html[data-style="base"] .file-tree-name { font-size: 12px; } html[data-style="base"] .file-tree-role-badge { font-size: 11px; } html[data-style="base"] .file-tree-size { font-size: 11px; } html[data-style="base"] .file-tree-status { font-size: 11px; } html[data-style="base"] .file-tree-subtitle { font-size: 11px; } html[data-style="base"] .file-tree-table { font-size: 12px; } html[data-style="base"] .fishbone { font-size: 14px; } html[data-style="base"] .footer { font-size: 12px; } html[data-style="base"] .foregroundColorText { font-size: 22px; } html[data-style="base"] .form-group label { font-size: 18px; } html[data-style="base"] .gaveUpMessage { font-size: 18px; } html[data-style="base"] .grow-wrap > textarea { font-size: 18px; } html[data-style="base"] .grow-wrap::after { font-size: 18px; } html[data-style="base"] .gut-harness-banner h2 { font-size: 18px; } html[data-style="base"] .hdr-date-cell-dow { font-size: 11px; } html[data-style="base"] .hdr-date-cell-num { font-size: 13px; } html[data-style="base"] .hdr-date-link { font-size: 11px; } html[data-style="base"] .hdr-date-month-dows { font-size: 11px; } html[data-style="base"] .hdr-date-step { font-size: 16px; } html[data-style="base"] .hdr-date-today { font-size: 11px; } html[data-style="base"] .header-title { font-size: 14px; } html[data-style="base"] .hero-content h2 { font-size: 18px; } html[data-style="base"] .hint { font-size: 13px; } html[data-style="base"] .hospital-branding .hospital-name { font-size: 12px; } html[data-style="base"] .hospital-branding .site-name { font-size: 11px; } html[data-style="base"] .hospital-header h1 { font-size: 22px; } html[data-style="base"] .hospital-info h2 { font-size: 18px; } html[data-style="base"] .idrawer-strength { font-size: 11px; } html[data-style="base"] .idrawer-tier { font-size: 11px; } html[data-style="base"] .indicator-settings-page .hint { font-size: 12px; } html[data-style="base"] .indicator-settings-page table.settings-table th { font-size: 12px; } html[data-style="base"] .intro { font-size: 13px; } html[data-style="base"] .item-text { font-size: 18px; } html[data-style="base"] .lab-age-pill { font-size: 11px; } html[data-style="base"] .lab-flag-chip { font-size: 11px; } html[data-style="base"] .lab-harness-banner h2 { font-size: 18px; } html[data-style="base"] .lab-table .prelim { font-size: 11px; } html[data-style="base"] .lab-table .when { font-size: 11px; } html[data-style="base"] .lab-table-unit { font-size: 11px; } html[data-style="base"] .lab-trend-flag { font-size: 11px; } html[data-style="base"] .lab-trend-marker-label { font-size: 11px; } html[data-style="base"] .lab-trend-sup { font-size: 11px; } html[data-style="base"] .lab-trend-tick { font-size: 11px; } html[data-style="base"] .lab-trend-ylabel { font-size: 11px; } html[data-style="base"] .language-code-text { font-size: 13px; } html[data-style="base"] .language-code-text.color { font-size: 11px; } html[data-style="base"] .language-code-text.monochrome { font-size: 11px; } html[data-style="base"] .language-dropdown button { font-size: 12px; } html[data-style="base"] .layer-key-count { font-size: 11px; } html[data-style="base"] .layer-label { font-size: 12px; } html[data-style="base"] .layer-missing-badge { font-size: 11px; } html[data-style="base"] .layer-modified { font-size: 11px; } html[data-style="base"] .layer-path { font-size: 11px; } html[data-style="base"] .layer-type-badge { font-size: 11px; } html[data-style="base"] .leftTabButtonSelected { font-size: 16px; } html[data-style="base"] .licenses-lead { font-size: 13px; } html[data-style="base"] .licenses-page .about-page-header h2 { font-size: 22px; } html[data-style="base"] .locationText { font-size: 22px; } html[data-style="base"] .logout-overlay p { font-size: 16px; } html[data-style="base"] .menu-label { font-size: 11px; } html[data-style="base"] .message-bubble .bubble-timestamp { font-size: 11px; } html[data-style="base"] .message-text { font-size: 18px; } html[data-style="base"] .meta { font-size: 13px; } html[data-style="base"] .metric-clock-chip { font-size: 11px; } html[data-style="base"] .metric-clock-label { font-size: 11px; } html[data-style="base"] .metric-clock-sm .metric-clock-target { font-size: 11px; } html[data-style="base"] .metric-clock-sm .metric-clock-value { font-size: 14px; } html[data-style="base"] .modal-title { font-size: 18px; } html[data-style="base"] .module-strip-badge { font-size: 11px; } html[data-style="base"] .module-strip-sub { font-size: 11px; } html[data-style="base"] .module-strip-title { font-size: 11px; } html[data-style="base"] .module-strip-who { font-size: 12px; } html[data-style="base"] .module-ws-badge { font-size: 11px; } html[data-style="base"] .module-ws-detail-headline { font-size: 14px; } html[data-style="base"] .module-ws-field label { font-size: 11px; } html[data-style="base"] .module-ws-field span { font-size: 12px; } html[data-style="base"] .module-ws-item-clock { font-size: 11px; } html[data-style="base"] .module-ws-item-headline { font-size: 12px; } html[data-style="base"] .module-ws-item-state { font-size: 11px; } html[data-style="base"] .module-ws-item-sub { font-size: 11px; } html[data-style="base"] .module-ws-pill { font-size: 11px; } html[data-style="base"] .module-ws-quiet { font-size: 12px; } html[data-style="base"] .modules-nav-count { font-size: 11px; } html[data-style="base"] .modules-nav-label { font-size: 11px; } html[data-style="base"] .modules-nav-mark { font-size: 11px; } html[data-style="base"] .muted { font-size: 13px; } html[data-style="base"] .nav-footer-links .separator { font-size: 11px; } html[data-style="base"] .nav-footer-version { font-size: 11px; } html[data-style="base"] .nav-rail-close { font-size: 22px; } html[data-style="base"] .nav-toggle-close { font-size: 22px; } html[data-style="base"] .notification-badge { font-size: 11px; } html[data-style="base"] .notification-content h3 { font-size: 12px; } html[data-style="base"] .notification-content h4 { font-size: 12px; } html[data-style="base"] .notification-content p { font-size: 12px; } html[data-style="base"] .notification-empty { font-size: 12px; } html[data-style="base"] .notification-header-row h3 { font-size: 12px; } html[data-style="base"] .notification-icon { font-size: 18px; } html[data-style="base"] .notification-item-header h4 { font-size: 12px; } html[data-style="base"] .notification-time { font-size: 11px; } html[data-style="base"] .notification-title { font-size: 12px; } html[data-style="base"] .oc-synthetic-pill { font-size: 11px; } html[data-style="base"] .optionButtonText { font-size: 18px; } html[data-style="base"] .or-case-synopsis-text { font-size: 13px; } html[data-style="base"] .or-date-dow { font-size: 11px; } html[data-style="base"] .or-date-mon { font-size: 11px; } html[data-style="base"] .or-header { font-size: 16px; } html[data-style="base"] .or-hero-label { font-size: 11px; } html[data-style="base"] .or-hero-primary { font-size: 16px; } html[data-style="base"] .otherUserRoleText { font-size: 16px; } html[data-style="base"] .packet-body { font-size: 12px; } html[data-style="base"] .packet-kind { font-size: 11px; } html[data-style="base"] .pendingPhoneInfo { font-size: 22px; } html[data-style="base"] .phoneText { font-size: 22px; } html[data-style="base"] .picker-grid .picker-result-icon { font-size: 18px; } html[data-style="base"] .pip-modal-header strong { font-size: 14px; } html[data-style="base"] .preview-feature .pf-desc { font-size: 12px; } html[data-style="base"] .profile-email { font-size: 12px; } html[data-style="base"] .raw-files-content { font-size: 11px; } html[data-style="base"] .raw-files-empty { font-size: 12px; } html[data-style="base"] .raw-files-modified { font-size: 11px; } html[data-style="base"] .raw-files-path { font-size: 11px; } html[data-style="base"] .raw-files-subtab { font-size: 11px; } html[data-style="base"] .raw-files-unavailable { font-size: 12px; } html[data-style="base"] .redirect { font-size: 13px; } html[data-style="base"] .roomText { font-size: 18px; } html[data-style="base"] .section-header { font-size: 16px; } html[data-style="base"] .section-number { font-size: 22px; } html[data-style="base"] .settings-browser-count { font-size: 11px; } html[data-style="base"] .settings-browser-empty { font-size: 12px; } html[data-style="base"] .settings-browser-filter { font-size: 12px; } html[data-style="base"] .settings-browser-table { font-size: 12px; } html[data-style="base"] .settings-dx-slot-badge { font-size: 11px; } html[data-style="base"] .settings-dx-tab { font-size: 13px; } html[data-style="base"] .settings-dx-title { font-size: 18px; } html[data-style="base"] .settings-eye-btn { font-size: 13px; } html[data-style="base"] .settings-key { font-size: 11px; } html[data-style="base"] .settings-source-badge { font-size: 11px; } html[data-style="base"] .settings-value { font-size: 11px; } html[data-style="base"] .site-legal-footer { font-size: 11px; } html[data-style="base"] .slot-summary-empty { font-size: 12px; } html[data-style="base"] .slot-summary-label { font-size: 11px; } html[data-style="base"] .slot-summary-section-title { font-size: 13px; } html[data-style="base"] .slot-summary-subtitle { font-size: 11px; } html[data-style="base"] .slot-summary-value { font-size: 12px; } html[data-style="base"] .slot-summary-warnings li { font-size: 12px; } html[data-style="base"] .spinnerTitle { font-size: 16px; } html[data-style="base"] .status-card code { font-size: 11px; } html[data-style="base"] .status-card h3 { font-size: 14px; } html[data-style="base"] .status-item.small { font-size: 12px; } html[data-style="base"] .stemi-packet { font-size: 12px; } html[data-style="base"] .stemi-packet-card-title { font-size: 11px; } html[data-style="base"] .stemi-packet-card.emphasize .stemi-packet-card-body { font-size: 14px; } html[data-style="base"] .stemi-packet-footnote { font-size: 11px; } html[data-style="base"] .stroke-packet { font-size: 12px; } html[data-style="base"] .stroke-packet-card-title { font-size: 11px; } html[data-style="base"] .stroke-packet-footnote { font-size: 11px; } html[data-style="base"] .sync-degraded-banner { font-size: 12px; } html[data-style="base"] .systems-edge[data-alert="true"]::after { font-size: 11px; } html[data-style="base"] .task-history-title { font-size: 14px; } html[data-style="base"] .team-header h2 { font-size: 22px; } html[data-style="base"] .team-latency { font-size: 11px; } html[data-style="base"] .team-legend { font-size: 11px; } html[data-style="base"] .team-member h3 { font-size: 13px; } html[data-style="base"] .team-member p { font-size: 12px; } html[data-style="base"] .team-reach { font-size: 11px; } html[data-style="base"] .team-req { font-size: 11px; } html[data-style="base"] .team-role-chip { font-size: 11px; } html[data-style="base"] .team-status { font-size: 11px; } html[data-style="base"] .tenant-branding-location { font-size: 11px; } html[data-style="base"] .theme-menu-item { font-size: 12px; } html[data-style="base"] .theme-pref-label { font-size: 12px; } html[data-style="base"] .theme-row-caret { font-size: 12px; } html[data-style="base"] .topTabButton { font-size: 16px; } html[data-style="base"] .transfer-packet { font-size: 12px; } html[data-style="base"] .transfer-packet-card-title { font-size: 11px; } html[data-style="base"] .transfer-packet-footnote { font-size: 11px; } html[data-style="base"] .trauma-packet { font-size: 12px; } html[data-style="base"] .trauma-packet-card-title { font-size: 11px; } html[data-style="base"] .trauma-packet-footnote { font-size: 11px; } html[data-style="base"] .trend-text { font-size: 11px; } html[data-style="base"] .user-name { font-size: 12px; } html[data-style="base"] .wn-changed { font-size: 12px; } @media (max-width: 1199px) { html[data-style="base"] .sort-dropdown-select .truncate-or-number { font-size: 11px; } html[data-style="base"] .sort-dropdown-select .truncate-start-time { font-size: 11px; } html[data-style="base"] .sort-dropdown-select span[data-full-text] { font-size: 11px; } html[data-style="base"] .sort-label:not(:empty) { font-size: 11px; } } @media (max-width: 576px) { html[data-style="base"] .clear-btn { font-size: 11px; } html[data-style="base"] .header-title { font-size: 13px; } html[data-style="base"] .notification-content h3 { font-size: 11px; } html[data-style="base"] .notification-content p { font-size: 11px; } html[data-style="base"] .notification-header-row h3 { font-size: 11px; } html[data-style="base"] .notification-time { font-size: 11px; } html[data-style="base"] .sub-message { font-size: 13px; } } @media (max-width: 640px) { html[data-style="base"] .section-title { font-size: 22px; } } @media (max-width: 768px) { html[data-style="base"] .message { font-size: 16px; } html[data-style="base"] .spinnerTitle { font-size: 16px; } html[data-style="base"] .sub-message { font-size: 13px; } } @media (min-width: 1024px) { html[data-style="base"][data-nav-rail="compact"] .nav-sidebar .modules-nav-count { font-size: 11px; } } @media (min-width: 1200px) { html[data-style="base"] .labs-toggle button { font-size: 11px; } } } /* ── END generated type scale ── */ /* ── BEGIN generated radius (DC-6; Tools/StyleBaseline/typescale-gen.js; do not edit by hand) ── */ /* 137 radii snapped to 6 (controls), 10 (cards) and 12 (dialogs). 4 left alone: the same selector is declared elsewhere at a value that would change differently, or at a relative value (shared class names). */ @media screen { html[data-style="base"] .about-app-key { border-radius: 6px; } html[data-style="base"] .about-apps-header .divider { border-radius: 6px; } html[data-style="base"] .add-button-registration { border-radius: 6px; } html[data-style="base"] .attachment-sensitive-badge { border-radius: 6px; } html[data-style="base"] .attachmentsAreaFrame { border-radius: 6px; } html[data-style="base"] .bell-inbox { border-radius: 6px; } html[data-style="base"] .btn { border-radius: 6px; } html[data-style="base"] .btn-toggle { border-radius: 6px; } html[data-style="base"] .case-unread-badge { border-radius: 10px; } html[data-style="base"] .census-chip { border-radius: 6px; } html[data-style="base"] .census-detail .census-chip { border-radius: 6px; } html[data-style="base"] .census-detail-badge { border-radius: 6px; } html[data-style="base"] .census-detail-marquee-state { border-radius: 6px; } html[data-style="base"] .census-hide-names { border-radius: 6px; } html[data-style="base"] .census-list-badge { border-radius: 6px; } html[data-style="base"] .census-marquee-emit { border-radius: 6px; } html[data-style="base"] .census-marquee-state { border-radius: 6px; } html[data-style="base"] .clear-btn { border-radius: 6px; } html[data-style="base"] .confirm-button { border-radius: 6px; } html[data-style="base"] .confirmTask { border-radius: 12px; } html[data-style="base"] .corridor-conn { border-radius: 6px; } html[data-style="base"] .cs-frame-badge { border-radius: 6px; } html[data-style="base"] .cs-help kbd { border-radius: 6px; } html[data-style="base"] .cs-staystrip-toggle { border-radius: 6px; } html[data-style="base"] .csp-hp { border-radius: 6px; } html[data-style="base"] .day-compact-btn { border-radius: 6px; } html[data-style="base"] .day-popover-input { border-radius: 6px; } html[data-style="base"] .day-step-btn { border-radius: 6px; } html[data-style="base"] .day-today-btn { border-radius: 6px; } html[data-style="base"] .deleteTask { border-radius: 12px; } html[data-style="base"] .diag-copy { border-radius: 6px; } html[data-style="base"] .diag-copy-all { border-radius: 6px; } html[data-style="base"] .docs-icon[data-kind="imaging"]::after { border-radius: 6px; } html[data-style="base"] .docs-new { border-radius: 6px; } html[data-style="base"] .dropdown-menu-inner { border-radius: 6px; } html[data-style="base"] .dropdown-menu-inner::-webkit-scrollbar-thumb { border-radius: 6px; } html[data-style="base"] .dropdown-select { border-radius: 6px; } html[data-style="base"] .dualTabsHolderInner { border-radius: 6px; } html[data-style="base"] .dx-task-overlay { border-radius: 6px; } html[data-style="base"] .e-dropdown-btn { border-radius: 6px !important; } html[data-style="base"] .e-dropdown-popup { border-radius: 6px; } html[data-style="base"] .e-input-group { border-radius: 6px; } html[data-style="base"] .error-container { border-radius: 6px; } html[data-style="base"] .error-stack { border-radius: 6px; } html[data-style="base"] .event-correction-tag { border-radius: 6px; } html[data-style="base"] .familyTextEntryAreaTextHolderContracted { border-radius: 12px; } html[data-style="base"] .familyTextEntryAreaTextHolderExpanded { border-radius: 12px; } html[data-style="base"] .filter-container { border-radius: 6px; } html[data-style="base"] .form-input-registration { border-radius: 6px; } html[data-style="base"] .generate-password-button-inline-mobile { border-radius: 6px; } html[data-style="base"] .hdr-date-step { border-radius: 6px; } html[data-style="base"] .hdr-date-today { border-radius: 6px; } html[data-style="base"] .hold-status { border-radius: 6px; } html[data-style="base"] .hospital-header { border-radius: 6px; } html[data-style="base"] .hospital-select { border-radius: 6px; } html[data-style="base"] .idle-buttons button { border-radius: 6px; } html[data-style="base"] .idrawer-strength { border-radius: 6px; } html[data-style="base"] .idrawer-tier { border-radius: 6px; } html[data-style="base"] .indicator-settings-page .error { border-radius: 6px; } html[data-style="base"] .indicator-settings-page select { border-radius: 6px; } html[data-style="base"] .input-field { border-radius: 6px; } html[data-style="base"] .lab-bar { border-radius: 6px; } html[data-style="base"] .lab-bar-tick { border-radius: 6px; } html[data-style="base"] .lab-flag-chip { border-radius: 6px; } html[data-style="base"] .language-dropdown button { border-radius: 6px; } html[data-style="base"] .language-dropdown { border-radius: 6px; } html[data-style="base"] .language-dropdown::-webkit-scrollbar-thumb { border-radius: 6px; } html[data-style="base"] .languageButton { border-radius: 6px; } html[data-style="base"] .loader::before { border-radius: 12px; } html[data-style="base"] .modal-content { border-radius: 6px; } html[data-style="base"] .module-strip-badge { border-radius: 6px; } html[data-style="base"] .module-ws-badge { border-radius: 6px; } html[data-style="base"] .module-ws-hide-names { border-radius: 6px; } html[data-style="base"] .module-ws-worklist-collapse { border-radius: 6px; } html[data-style="base"] .modules-nav-row { border-radius: 6px; } html[data-style="base"] .myMessageBubble.messageBubble_continuation_continued { border-radius: 6px 6px 6px 6px; } html[data-style="base"] .myMessageBubble.messageBubble_continuation_end { border-radius: 6px 6px 12px 12px; } html[data-style="base"] .myMessageBubble.messageBubble_start_continued { border-radius: 12px 28px 6px 6px; } html[data-style="base"] .myMessageBubble.messageBubble_start_end { border-radius: 12px 28px 12px 12px; } html[data-style="base"] .nav-link { border-radius: 6px; } html[data-style="base"] .notification-dropdown::-webkit-scrollbar-thumb { border-radius: 6px; } html[data-style="base"] .notification-list::-webkit-scrollbar-thumb { border-radius: 6px; } html[data-style="base"] .oc-tl-chip .flag { border-radius: 6px; } html[data-style="base"] .oc-tl-chip { border-radius: 6px; } html[data-style="base"] .opcommChart.div { border-radius: 12px !important; } html[data-style="base"] .opcommTextAreaScroller { border-radius: 0 12px 12px 0; } html[data-style="base"] .opcommTextAreaScroller::-webkit-scrollbar { border-radius: 0 12px 12px 0; } html[data-style="base"] .opcommTextAreaScroller::-webkit-scrollbar-thumb { border-radius: 6px; } html[data-style="base"] .optionButton { border-radius: 12px; } html[data-style="base"] .or-header { border-radius: 6px; } html[data-style="base"] .otherMessageBubble.messageBubble_continuation_continued { border-radius: 6px 6px 6px 6px; } html[data-style="base"] .otherMessageBubble.messageBubble_continuation_end { border-radius: 6px 6px 12px 12px; } html[data-style="base"] .otherMessageBubble.messageBubble_start_continued { border-radius: 28px 12px 6px 6px; } html[data-style="base"] .otherMessageBubble.messageBubble_start_end { border-radius: 28px 12px 12px 12px; } html[data-style="base"] .password-field { border-radius: 6px; } html[data-style="base"] .password-input { border-radius: 6px; } html[data-style="base"] .password-input-mobile { border-radius: 6px; } html[data-style="base"] .personTypingAnimation { border-radius: 10px; } html[data-style="base"] .personTypingFrame { border-radius: 12px; } html[data-style="base"] .picker-grid .picker-empty-action { border-radius: 6px; } html[data-style="base"] .preferencesInnerFrame { border-radius: 6px; } html[data-style="base"] .profile-dropdown { border-radius: 6px; } html[data-style="base"] .profile-link { border-radius: 6px; } html[data-style="base"] .profile-menu .theme-toggle.theme-row { border-radius: 6px; } html[data-style="base"] .profile-trigger { border-radius: 6px; } html[data-style="base"] .progress-bar { border-radius: 6px; } html[data-style="base"] .progress-bar-new { border-radius: 6px; } html[data-style="base"] .progress-tooltip-new { border-radius: 6px; } html[data-style="base"] .propertyLabelArea { border-radius: 6px; } html[data-style="base"] .register-button { border-radius: 6px; } html[data-style="base"] .reportAreaDisplayArea[b-l28u6vicga] { border-radius: 6px; } html[data-style="base"] .reportButton { border-radius: 6px !important; } html[data-style="base"] .reportTitle { border-radius: 6px; } html[data-style="base"] .revoke-button { border-radius: 6px; } html[data-style="base"] .roomPanelOuter { border-radius: 12px; } html[data-style="base"] .roomPanelOuterHolderSelected { border-radius: 12px; } html[data-style="base"] .search-input { border-radius: 6px; } html[data-style="base"] .selected-tag { border-radius: 6px; } html[data-style="base"] .sort-dropdown-menu { border-radius: 6px; } html[data-style="base"] .status-card code { border-radius: 6px; } html[data-style="base"] .tb .tb-more { border-radius: 6px; } html[data-style="base"] .tb-band { border-radius: 6px; } html[data-style="base"] .team-header .divider { border-radius: 6px; } html[data-style="base"] .team-req { border-radius: 6px; } html[data-style="base"] .theme-toggle.theme-row { border-radius: 6px; } html[data-style="base"] .tl-hod input { border-radius: 6px; } html[data-style="base"] .tl-loc-legend i { border-radius: 6px; } html[data-style="base"] .toast { border-radius: 12px; } html[data-style="base"] .tooltip { border-radius: 6px; } html[data-style="base"] .topTabsHolderInner { border-radius: 6px; } html[data-style="base"] .unitPanelInner { border-radius: 6px; } html[data-style="base"] .unitPanelOuter { border-radius: 12px; } html[data-style="base"] .watch-badge { border-radius: 6px; } @media (max-width: 1199px) { html[data-style="base"] .dropdown-menu-inner { border-radius: 6px; } html[data-style="base"] .sort-dropdown-select { border-radius: 6px; } } @media (max-width: 576px) { html[data-style="base"] .case { border-radius: 6px; } } @media (max-width: 768px) { html[data-style="base"] .case { border-radius: 6px; } } } /* ── END generated radius ── */ /* ── BEGIN generated accent (DC-2; Tools/StyleBaseline/typescale-gen.js; do not edit by hand) ── */ /* 28 framework-blue declarations moved onto the one accent. 2 left alone: the same selector is declared elsewhere at a value that would change differently, or at a relative value (shared class names). */ @media screen { html[data-style="base"] .all-cases-link { color: var(--oc-accent); } html[data-style="base"] .btn-primary { background-color: var(--oc-accent); } html[data-style="base"] .chat-input button { color: var(--oc-accent); } html[data-style="base"] .clear-btn:hover { color: var(--oc-accent-hover); } html[data-style="base"] .clear-selection { background-color: var(--oc-accent); } html[data-style="base"] .clear-selection:hover { background-color: var(--oc-accent-hover); } html[data-style="base"] .e-input-group.e-input-focus { border-color: var(--oc-accent); } html[data-style="base"] .hospital-header:hover { background-color: var(--oc-accent-hover); } html[data-style="base"] .info-icon-new { color: var(--oc-accent); } html[data-style="base"] .language-dropdown button.selected { background-color: var(--oc-accent); } html[data-style="base"] .languageButton.selected { background-color: var(--oc-accent); } html[data-style="base"] .message-status.delivered { color: var(--oc-accent); } html[data-style="base"] .optionButtonPositive { background-color: var(--oc-accent); } html[data-style="base"] .optionButtonPositive:hover { background-color: var(--oc-accent-hover); } html[data-style="base"] .raw-files-subtab.active { background: var(--oc-accent); border-color: var(--oc-accent); } html[data-style="base"] .roomPanelOuterUnselected { border: 2px solid var(--oc-accent); } html[data-style="base"] .selected-tag { border: 1px solid var(--oc-accent); } html[data-style="base"] .selected-text { color: var(--oc-accent); } html[data-style="base"] .settings-browser-filter:focus { border-color: var(--oc-accent); } html[data-style="base"] .settings-dx-slot-badge { background: var(--oc-accent); } html[data-style="base"] .settings-dx-tab.active { color: var(--oc-accent); border-bottom-color: var(--oc-accent); } html[data-style="base"] .slot-name { color: var(--oc-accent); } html[data-style="base"] .staff-header.selected { background-color: var(--oc-accent); } html[data-style="base"] .tab.active { color: var(--oc-accent); border-bottom: 2px solid var(--oc-accent); } html[data-style="base"] .user-avatar.no-image { background-color: var(--oc-accent); } } /* ── END generated accent ── */ /* ── BEGIN generated spacing (base §2; Tools/StyleBaseline/typescale-gen.js; do not edit by hand) ── */ /* 113 chrome paddings, margins and gaps snapped to 4 8 12 16 24 32 48, clinical address only. 43 left alone: the same selector is declared elsewhere at a value that would change differently, or at a relative value (shared class names). */ @media screen { html[data-style="base"]:not([data-experience="classic"]) .bell-chip { padding: 4px 8px; } html[data-style="base"]:not([data-experience="classic"]) .bell-filter-row { gap: 4px; } html[data-style="base"]:not([data-experience="classic"]) .bell-inbox-section { padding: 12px 12px 12px; } html[data-style="base"]:not([data-experience="classic"]) .bell-inbox-title { margin: 0 0 8px; } html[data-style="base"]:not([data-experience="classic"]) .bell-row-actions { gap: 4px; margin-top: 4px; } html[data-style="base"]:not([data-experience="classic"]) .bell-tab { gap: 4px; } html[data-style="base"]:not([data-experience="classic"]) .bell-tab-count { padding: 0 4px; } html[data-style="base"]:not([data-experience="classic"]) .bell-tabs { padding: 8px 12px 0; } html[data-style="base"]:not([data-experience="classic"]) .bell-unread { padding: 0 4px; } html[data-style="base"]:not([data-experience="classic"]) .bell-watch-unread { padding: 0 4px; } html[data-style="base"]:not([data-experience="classic"]) .checkbox-container { gap: 4px; } html[data-style="base"]:not([data-experience="classic"]) .clear-button { padding: 8px 12px; } html[data-style="base"]:not([data-experience="classic"]) .clear-icon { margin-right: 12px; } html[data-style="base"]:not([data-experience="classic"]) .day-compact-btn { gap: 4px; padding: 0 8px; } html[data-style="base"]:not([data-experience="classic"]) .day-popover-input { padding: 0 4px; } html[data-style="base"]:not([data-experience="classic"]) .day-popover-row { gap: 4px; } html[data-style="base"]:not([data-experience="classic"]) .day-selector-label { gap: 4px; } html[data-style="base"]:not([data-experience="classic"]) .day-selector-popover { gap: 8px; padding: 8px; } html[data-style="base"]:not([data-experience="classic"]) .day-step-btn { padding: 0 4px; } html[data-style="base"]:not([data-experience="classic"]) .day-today-btn { margin-left: 4px; padding: 4px 8px; } html[data-style="base"]:not([data-experience="classic"]) .dropdown-item { padding: 4px 4px; } html[data-style="base"]:not([data-experience="classic"]) .dropdown-select { padding: 8px; } html[data-style="base"]:not([data-experience="classic"]) .empty-notifications-content { padding: 16px; } html[data-style="base"]:not([data-experience="classic"]) .expanded-content { padding: 12px; margin-top: 8px; } html[data-style="base"]:not([data-experience="classic"]) .filter-bar { row-gap: 8px; column-gap: 12px; } html[data-style="base"]:not([data-experience="classic"]) .filter-label { gap: 4px; } html[data-style="base"]:not([data-experience="classic"]) .filter-meta { gap: 12px 12px; } html[data-style="base"]:not([data-experience="classic"]) .filter-section { gap: 12px 24px; } html[data-style="base"]:not([data-experience="classic"]) .hdr-crumb-back { padding: 4px 4px 4px 0; } html[data-style="base"]:not([data-experience="classic"]) .hdr-date { gap: 4px; } html[data-style="base"]:not([data-experience="classic"]) .hdr-date-actions { gap: 8px; } html[data-style="base"]:not([data-experience="classic"]) .hdr-date-cell { padding: 4px 0; } html[data-style="base"]:not([data-experience="classic"]) .hdr-date-label { padding: 4px 4px; } html[data-style="base"]:not([data-experience="classic"]) .hdr-date-link { padding: 4px 0; } html[data-style="base"]:not([data-experience="classic"]) .hdr-date-month-grid { gap: 4px; } html[data-style="base"]:not([data-experience="classic"]) .hdr-date-popover { gap: 8px; padding: 8px; } html[data-style="base"]:not([data-experience="classic"]) .hdr-date-step { padding: 0 4px; } html[data-style="base"]:not([data-experience="classic"]) .hdr-date-today { padding: 4px 8px; } html[data-style="base"]:not([data-experience="classic"]) .hdr-date-week { gap: 4px; } html[data-style="base"]:not([data-experience="classic"]) .header { gap: 8px; } html[data-style="base"]:not([data-experience="classic"]) .hospital-branding { gap: 8px; } html[data-style="base"]:not([data-experience="classic"]) .logo-section { gap: 8px; } html[data-style="base"]:not([data-experience="classic"]) .menu-label { margin-bottom: 12px; padding-left: 12px; } html[data-style="base"]:not([data-experience="classic"]) .modal-backdrop { padding: 12px; } html[data-style="base"]:not([data-experience="classic"]) .modal-header { padding: 12px; } html[data-style="base"]:not([data-experience="classic"]) .modules-nav-count { padding: 1px 8px; } html[data-style="base"]:not([data-experience="classic"]) .modules-nav-divider { margin: 8px 8px; } html[data-style="base"]:not([data-experience="classic"]) .modules-nav-label { padding: 8px 8px 4px; } html[data-style="base"]:not([data-experience="classic"]) .modules-nav-row { gap: 8px; padding: 4px 8px; } html[data-style="base"]:not([data-experience="classic"]) .nav-drawer-header { gap: 8px; } html[data-style="base"]:not([data-experience="classic"]) .nav-link-button { padding-right: 4px; margin-right: 4px; } html[data-style="base"]:not([data-experience="classic"]) .no-results { padding: 4px; } html[data-style="base"]:not([data-experience="classic"]) .notification-empty { padding: 24px; } html[data-style="base"]:not([data-experience="classic"]) .notification-message { margin-bottom: 12px; } html[data-style="base"]:not([data-experience="classic"]) .opCommNavIcon { margin-right: 4px; } html[data-style="base"]:not([data-experience="classic"]) .opCommNavLink { margin: 4px 24px 8px 12px; } html[data-style="base"]:not([data-experience="classic"]) .page-context { padding: 0 12px; } html[data-style="base"]:not([data-experience="classic"]) .presenceMenu { padding: 4px; } html[data-style="base"]:not([data-experience="classic"]) .presenceMenuItem { gap: 8px; padding: 8px 8px; } html[data-style="base"]:not([data-experience="classic"]) .presencePill { padding: 0 8px; } html[data-style="base"]:not([data-experience="classic"]) .profile-divider { margin: 8px 0; } html[data-style="base"]:not([data-experience="classic"]) .profile-header { padding: 12px; } html[data-style="base"]:not([data-experience="classic"]) .profile-info { gap: 4px; } html[data-style="base"]:not([data-experience="classic"]) .profile-link { gap: 12px; padding: 12px; } html[data-style="base"]:not([data-experience="classic"]) .profile-menu .theme-toggle.theme-row { padding: 12px; gap: 12px; } html[data-style="base"]:not([data-experience="classic"]) .profile-presence { margin-top: 12px; } html[data-style="base"]:not([data-experience="classic"]) .profile-theme-row { gap: 4px; padding: 0 0 4px; } html[data-style="base"]:not([data-experience="classic"]) .profile-trigger { gap: 8px; } html[data-style="base"]:not([data-experience="classic"]) .search-input { padding: 4px 8px; } html[data-style="base"]:not([data-experience="classic"]) .selected-tag { padding: 4px 4px; } html[data-style="base"]:not([data-experience="classic"]) .settings-card { padding: 24px; } html[data-style="base"]:not([data-experience="classic"]) .sort-container { gap: 8px; } html[data-style="base"]:not([data-experience="classic"]) .sort-dropdown-item { padding: 8px 12px; } html[data-style="base"]:not([data-experience="classic"]) .sort-dropdown-select { padding: 8px; } html[data-style="base"]:not([data-experience="classic"]) .tooltip { padding: 4px 8px; } @media (hover: none) { html[data-style="base"]:not([data-experience="classic"]) .notification-item { padding: 12px 12px; } html[data-style="base"]:not([data-experience="classic"]) .toggle-switch { padding: 8px 0; } } @media (max-width: 1199px) { html[data-style="base"]:not([data-experience="classic"]) .dropdown-menu-inner { margin-top: 24px; } html[data-style="base"]:not([data-experience="classic"]) .filter-bar { gap: 4px 12px; } html[data-style="base"]:not([data-experience="classic"]) .sort-dropdown-item { padding: 8px; } } @media (max-width: 360px) { html[data-style="base"]:not([data-experience="classic"]) .notification-time { margin-left: 12px; } } @media (max-width: 576px) { html[data-style="base"]:not([data-experience="classic"]) .logo-section { gap: 4px; } html[data-style="base"]:not([data-experience="classic"]) .notification-item { gap: 12px; padding: 12px; } html[data-style="base"]:not([data-experience="classic"]) .title-section { gap: 4px; } } @media (max-width: 579px) { html[data-style="base"]:not([data-experience="classic"]) .filter-bar { padding: 4px; } html[data-style="base"]:not([data-experience="classic"]) .filter-meta { gap: 8px; } } @media (max-width: 768px) { html[data-style="base"]:not([data-experience="classic"]) .notification-indicator { margin-right: 8px; } html[data-style="base"]:not([data-experience="classic"]) .notification-item { padding: 8px; } } @media (min-width: 1024px) { html[data-style="base"]:not([data-experience="classic"])[data-nav-rail="compact"] .nav-sidebar .modules-nav-row { padding: 8px 4px; } html[data-style="base"]:not([data-experience="classic"])[data-nav-rail="compact"] .nav-sidebar .nav-link { padding: 8px 4px; } } @media (min-width: 1200px) { html[data-style="base"]:not([data-experience="classic"]) .filter-bar { column-gap: 12px; } html[data-style="base"]:not([data-experience="classic"]) .filter-section { gap: 12px; } } @media (min-width: 580px) and (max-width: 1023px) { html[data-style="base"]:not([data-experience="classic"]) .filter-bar { padding: 8px; } } @media (width < 1024px) { html[data-style="base"]:not([data-experience="classic"]) .header { padding: 4px 8px; column-gap: 4px; } html[data-style="base"]:not([data-experience="classic"]) .page-context .hdr-date { gap: 4px; } html[data-style="base"]:not([data-experience="classic"]) .page-context .hdr-date-label { padding: 0.1rem 4px; } html[data-style="base"]:not([data-experience="classic"]) .user-section { gap: 4px; } } } /* ── END generated spacing ── */ /* ── Motion (STYLE-BASE §9). Today's clinical sheets have no reduced-motion block. ── */ @media screen and (prefers-reduced-motion: reduce) { html[data-style="base"] *, html[data-style="base"] *::before, html[data-style="base"] *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } }