/* ===== Self-Hosted Fonts (Thai + Latin WOFF2 Subsets) ===== */
/* Sarabun — Thai + Latin (400, 700) */
@font-face {
  font-family: Sarabun;
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('./fonts/Sarabun-400-thai.woff2') format('woff2');
  unicode-range: U+02D7, U+0303, U+0331, U+0E01-0E5B, U+200C-200D, U+25CC;
}
@font-face {
  font-family: Sarabun;
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('./fonts/Sarabun-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: Sarabun;
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('./fonts/Sarabun-700-thai.woff2') format('woff2');
  unicode-range: U+02D7, U+0303, U+0331, U+0E01-0E5B, U+200C-200D, U+25CC;
}
@font-face {
  font-family: Sarabun;
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('./fonts/Sarabun-700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Fallback Font Metric Override (Zero CLS Layout Shift) */
@font-face {
  font-family: Sarabun-Fallback;
  src: local('Arial');
  ascent-override: 95%;
  descent-override: 25%;
  line-gap-override: 0%;
  size-adjust: 100%;
}

/* Inter Tight — Latin + Latin-ext (400, 500, 600, 700) */
@font-face {
  font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('./fonts/InterTight-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('./fonts/InterTight-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('./fonts/InterTight-500-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('./fonts/InterTight-500-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('./fonts/InterTight-600-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('./fonts/InterTight-600-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('./fonts/InterTight-700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('./fonts/InterTight-700-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* JetBrains Mono — Latin + Latin-ext (500, 700) */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('./fonts/JetBrainsMono-500-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('./fonts/JetBrainsMono-500-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('./fonts/JetBrainsMono-700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('./fonts/JetBrainsMono-700-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ===== Design System & Variables ===== */
:root {
    /* Braun Analogue Material Palette & Universal Tokens */
    --paper: #ebe7df;
    --ink: #1a1a1a;
    --graphite: #4a4a4a;
    --muted: #737373;
    --rule: #d8d4c8;
    --rule-light: #e8e5dc;
    --rule-strong: #1a1a1a;
    --signal-orange: #d84315;
    --braun-white: #F0EDE5;

    --bg-screen: var(--paper);
    --bg-card: #ffffff;
    --text-primary: #1a1a1a;
    --border-neutral: #d8d4c8;
    --highlight-yellow: #ffeaa7;
    --highlight-red-bg: #fff5f5;

    /* Domain Theme Accents */
    --stroke-primary: #007bff;
    --stroke-hover: #0056b3;
    --stroke-bg-highlight: #e6f0ff;

    --cardiac-primary: #c0392b;
    --cardiac-hover: #a93226;
    --cardiac-bg-highlight: #fff5f5;

    --success-primary: #28a745;
    --success-hover: #218838;

    --neutral-primary: #7f8c8d;
    --neutral-hover: #626c6d;

    /* Safety Tiers */
    --safety-safe-bg: #f0fdf4;
    --safety-safe-border: #86efac;
    --safety-safe-text: #166534;

    --safety-warn-bg: #fffbeb;
    --safety-warn-border: #fde68a;
    --safety-warn-text: #92400e;

    --safety-danger-bg: #fef2f2;
    --safety-danger-border: #fca5a5;
    --safety-danger-text: #991b1b;

    /* Typography & Fonts */
    --font-ui: "Inter Tight", "Neue Haas Grotesk", "Sarabun", sans-serif;
    --font-mono: "JetBrains Mono", "SF Mono", monospace;

    /* Body horizontal/vertical padding — .top-nav's breakout math (below)
       reads this var so the nav stays flush regardless of how a page
       overrides body padding (see index.html, which sets this to 0). */
    --page-pad: 20px;
}

/* ===== Base Styles ===== */
html {
    scroll-padding-top: 72px;
    scroll-padding-bottom: 80px;
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-ui);
    background-color: var(--bg-screen);
    color: var(--text-primary);
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: var(--page-pad);
    margin: 0;
    width: 100%;
    box-sizing: border-box;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.container {
    width: 100%;
    max-width: 1100px;
    background: var(--bg-card);
    border-radius: 8px;
    border: 1px solid var(--rule);
    box-shadow: 0 2px 10px rgba(0,0,0,0.04);
}

.form-container {
    padding: 30px;
}

.header {
    text-align: center;
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--border-neutral);
}

h1 {
    margin: 10px 0 5px 0;
    font-size: 1.5em;
    font-weight: 700;
}

/* Theme selectors for headers */
.theme-stroke h1 { color: var(--stroke-primary); }
.theme-cardiac h1 { color: var(--cardiac-primary); }

h3 {
    padding-bottom: 5px;
    margin-bottom: 15px;
    font-size: 1.2em;
    font-weight: 700;
}
.theme-stroke h3 { border-bottom: 2px solid var(--stroke-primary); }
.theme-cardiac h3 { border-bottom: 2px solid var(--cardiac-primary); }

/* ===== Form Layout ===== */
.input-layout {
    display: flex;
    gap: 20px;
    margin-bottom: 20px;
}

.input-column {
    flex: 1;
    min-width: 240px;
}

.inline-input-group {
    display: flex;
    align-items: center;
    margin-bottom: 11px;
}

.inline-input-group label {
    flex-shrink: 0;
    width: 150px;
    font-weight: bold;
    text-align: right;
    padding-right: 12px;
    font-size: 14px;
}

.inline-input-group input[type="text"],
.inline-input-group input[type="number"],
.inline-input-group select {
    width: auto;
    flex-grow: 1;
}

input[type="text"],
input[type="number"],
select {
    padding: 9px;
    border-radius: 4px;
    border: 1px solid #ccc;
    box-sizing: border-box;
    font-size: 15px;
    font-family: var(--font-ui);
    transition: border-color 0.2s, box-shadow 0.2s;
}

.theme-stroke input[type="text"]:focus,
.theme-stroke input[type="number"]:focus,
.theme-stroke select:focus {
    border-color: var(--stroke-primary);
    box-shadow: 0 0 5px rgba(0, 123, 255, 0.3);
    outline: none;
}

.theme-cardiac input[type="text"]:focus,
.theme-cardiac input[type="number"]:focus,
.theme-cardiac select:focus {
    border-color: var(--cardiac-primary);
    box-shadow: 0 0 5px rgba(192, 57, 43, 0.3);
    outline: none;
}

input[type="radio"],
input[type="checkbox"] {
    width: auto;
    vertical-align: middle;
    margin-right: 6px;
    cursor: pointer;
}

.gender-radio {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-right: 10px;
    cursor: pointer;
    font-size: 14px;
    white-space: normal;
}

.gender-radio input[type="radio"] {
    margin: 0;
}

.flag-label {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    padding: 3px 0;
    font-size: 13.5px;
    cursor: pointer;
    line-height: 1.4;
}

.flag-label input {
    flex-shrink: 0;
    margin-top: 3px;
}

/* Fibrinolytic / Drug Selection Cards */
.fib-choice-group {
    display: flex;
    gap: 10px;
    margin-top: 8px;
}

.fib-card {
    flex: 1;
    border: 2px solid #ddd;
    border-radius: 8px;
    padding: 12px;
    cursor: pointer;
    transition: all 0.2s;
}

.theme-stroke .fib-card:hover {
    border-color: #9eccff;
    background: #f4f9ff;
}

.theme-stroke .fib-card.selected {
    border-color: var(--stroke-primary);
    background: var(--stroke-bg-highlight);
}

.theme-cardiac .fib-card:hover {
    border-color: #e0a59a;
    background: #fff8f7;
}

.theme-cardiac .fib-card.selected {
    border-color: var(--cardiac-primary);
    background: var(--cardiac-bg-highlight);
}

.fib-card input {
    margin-right: 8px;
}

.fib-card strong {
    font-size: 14.5px;
}

.fib-card small {
    display: block;
    color: #777;
    margin-top: 3px;
    font-size: 11.5px;
}

.sk-warning-wrap {
    margin-top: 10px;
    padding: 10px 12px;
    background: #fff3cd;
    border-left: 4px solid #e67e22;
    border-radius: 4px;
    font-size: 13.5px;
}

.sk-warning-wrap.hidden {
    display: none;
}

/* ===== Sticky Top Nav Bar ===== */
.top-nav {
    position: sticky;
    top: 0;
    z-index: 100;
    width: calc(100% + (var(--page-pad) * 2));
    margin-top: calc(var(--page-pad) * -1);
    margin-left: calc(var(--page-pad) * -1);
    margin-right: calc(var(--page-pad) * -1);
    margin-bottom: 20px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 12px;
    background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
    padding: 0 24px;
    height: 64px;
    box-sizing: border-box;
    color: #F0EDE5;
}

.nav-logo {
    height: 38px;
    width: auto;
    flex-shrink: 0;
    border-radius: 4px;
}

.nav-home {
    color: #F0EDE5;
    text-decoration: none;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 6px;
}

.nav-title {
    color: #F0EDE5;
    font-size: 14px;
    border-left: 1px solid rgba(240, 237, 229, 0.3);
    padding-left: 16px;
}

.nav-title-short {
    display: none;
}

.nav-right {
    margin-left: auto;
    font-size: 11px;
    color: #F0EDE5;
    display: flex;
    align-items: center;
    font-family: var(--font-mono, monospace);
    opacity: 0.85;
    padding-right: 4px;
}

/* ===== Buttons ===== */
.btn {
    width: 100%;
    min-height: 48px;
    padding: 12px 16px;
    border: none;
    border-radius: 6px;
    color: #fff;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.1s ease;
    margin-top: 10px;
    font-family: var(--font-ui);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    touch-action: manipulation;
}

.theme-stroke .btn-calculate { background-color: var(--stroke-primary); }
.theme-stroke .btn-calculate:hover { background-color: var(--stroke-hover); }

.theme-cardiac .btn-calculate { background-color: var(--cardiac-primary); }
.theme-cardiac .btn-calculate:hover { background-color: var(--cardiac-hover); }

.btn-clear { background-color: var(--neutral-primary); }
.btn-clear:hover { background-color: var(--neutral-hover); }

.btn-print { background-color: var(--success-primary); }
.btn-print:hover { background-color: var(--success-hover); }

.hidden { display: none !important; }

.field-error {
    border-color: #c0392b !important;
    box-shadow: 0 0 5px rgba(192, 57, 43, 0.4) !important;
}

.inline-error-msg {
    color: #c0392b;
    font-size: 13px;
    font-weight: bold;
    padding: 4px 0 4px 162px;
    margin-bottom: 8px;
}

.clinical-warning {
    background: #fff3cd;
    border: 2px solid #e67e22;
    border-radius: 6px;
    padding: 12px 16px;
    margin: 10px 0;
    font-size: 14px;
    font-weight: bold;
    color: #856404;
    line-height: 1.5;
}

/* Floating print action bar */
.float-print-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: #27ae60;
    color: #fff;
    padding: 12px 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    z-index: 1000;
    box-shadow: 0 -2px 10px rgba(0,0,0,0.2);
}

.float-print-bar button {
    padding: 8px 18px;
    border: none;
    border-radius: 5px;
    font-size: 14px;
    font-weight: bold;
    cursor: pointer;
    font-family: var(--font-ui);
}

.float-print-bar .btn-print-now {
    background: #fff;
    color: #27ae60;
}

.float-print-bar .btn-view-order {
    background: rgba(255,255,255,0.2);
    color: #fff;
}



/* ===== Results Screen Layout ===== */
.results-container {
    padding: 0 30px 30px;
}

.summary-banner {
    border-radius: 8px;
    padding: 16px;
    margin: 20px 0;
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    align-items: center;
}

.theme-stroke .summary-banner {
    background: var(--stroke-bg-highlight);
    border: 2px solid var(--stroke-primary);
}

.theme-cardiac .summary-banner {
    background: var(--cardiac-bg-highlight);
    border: 2px solid var(--cardiac-primary);
}

.dose-badge {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--highlight-yellow);
    padding: 10px 18px;
    border-radius: 8px;
}

.dose-num {
    font-size: 1.8em;
    font-weight: bold;
}
.theme-stroke .dose-num { color: var(--stroke-hover); }
.theme-cardiac .dose-num { color: var(--cardiac-primary); }

.dose-label {
    font-size: 12px;
    color: #555;
}

.note-pill {
    background: #ecf0f1;
    padding: 7px 14px;
    border-radius: 20px;
    font-size: 12.5px;
    color: #444;
}

.note-pill.warn {
    background: var(--highlight-yellow);
    color: var(--cardiac-primary);
    font-weight: bold;
}

/* ===== Responsive Styles ===== */
@media (max-width: 900px) {
    body {
        --page-pad: 10px;
    }
    .form-container,
    .results-container {
        padding: 15px;
    }
    .input-layout,
    .fib-choice-group {
        flex-direction: column;
    }
    .inline-input-group label {
        width: 110px;
        text-align: left;
    }
    .nav-title-full {
        display: none;
    }
    .nav-title-short {
        display: inline;
    }
}

@media (max-width: 768px) {
    .top-nav {
        padding: 0 16px;
    }
}

/* Tablet: 600–899px */
@media (max-width: 899px) {
    .inline-input-group {
        flex-direction: column;
        gap: 4px;
    }
    .inline-input-group label {
        width: auto;
        text-align: left;
        padding-right: 0;
    }
    .btn {
        min-height: 44px;
        font-size: 15px;
    }
}

/* Mobile: ≤599px */
@media (max-width: 599px) {
    body {
        --page-pad: 8px;
    }
    .form-container {
        padding: 12px;
        border-radius: 8px;
    }
    .header h1 {
        font-size: 1.2em;
    }


    .results-container {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .results-container::before {
        content: '← เลื่อนดู order ทั้งหมด →';
        display: block;
        text-align: center;
        font-size: 11px;
        color: #888;
        padding: 4px 0;
    }

    /* Flag checkboxes: stack vertically */
    .flag-label {
        font-size: 13px;
    }

    /* Fib choice buttons: full width */
    .fib-choice-group {
        flex-direction: column;
    }
}

.skip-link {
  position: absolute;
  top: -40px;
  left: 0;
  background: #1e3c72;
  color: #F0EDE5;
  padding: 8px 16px;
  z-index: 200;
  font-family: var(--font-ui, 'Inter Tight', sans-serif);
  font-size: 14px;
  text-decoration: none;
  transition: top 200ms ease;
}
.skip-link:focus {
  top: 0;
}

/* ===== Cross-Document View Transitions (Baseline 2024-2026) ===== */
@view-transition {
    navigation: auto;
}

::view-transition-old(root) {
    animation: 100ms ease-out both vt-fade-out;
}

::view-transition-new(root) {
    animation: 140ms ease-in both vt-fade-in;
}

@keyframes vt-fade-out {
    from { opacity: 1; }
    to { opacity: 0; }
}

@keyframes vt-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* ===== Top-Layer Physics & Modern Discrete Transitions ===== */
dialog[open],
[popover]:popover-open {
    opacity: 1;
    transform: scale(1) translateY(0);

    @starting-style {
        opacity: 0;
        transform: scale(0.96) translateY(-4px);
    }
}

dialog,
[popover] {
    opacity: 0;
    transform: scale(0.96) translateY(-4px);
    transition: opacity 0.22s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.22s cubic-bezier(0.16, 1, 0.3, 1),
                display 0.22s allow-discrete,
                overlay 0.22s allow-discrete;
}

dialog::backdrop,
[popover]::backdrop {
    background-color: rgba(26, 26, 26, 0.4);
    backdrop-filter: blur(4px);
    transition: display 0.22s allow-discrete,
                overlay 0.22s allow-discrete,
                background-color 0.22s ease-out;

    @starting-style {
        background-color: rgba(26, 26, 26, 0);
    }
}

/* ===== Dynamic Container Queries & Subgrid (Baseline 2024-2026) ===== */
.container,
.form-container,
.result-box,
.patient-section,
.calc-card,
.regimen-selector {
    container-type: inline-size;
}

@container (max-width: 540px) {
    .result-box {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }
    .result-box .rate-large {
        text-align: right;
    }
    .patient-fields-grid,
    .item-grid {
        grid-template-columns: 1fr;
    }
}

@supports (grid-template-columns: subgrid) {
    .patient-fields-grid {
        grid-template-columns: subgrid;
    }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation: none !important;
  }
}

/* ===== CSS @property Typed Custom Properties (Baseline 2024-2026) ===== */
@property --cadence-pulse {
  syntax: '<number>';
  inherits: false;
  initial-value: 1;
}

@property --progress-pct {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 0%;
}

/* ===== Intrinsic Size Accordion Animations (Baseline 2026) ===== */
:root {
  interpolate-size: allow-keywords;
}

details.reference-card::details-content {
  opacity: 0;
  block-size: 0;
  overflow-y: clip;
  transition: content-visibility 0.25s allow-discrete,
              opacity 0.25s ease-out,
              block-size 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

details.reference-card[open]::details-content {
  opacity: 1;
  block-size: auto;
}

/* ===== Performance: Content Visibility for Heavy Dom Sections ===== */
.order-grid-5col,
.score-list,
.reference-card {
  content-visibility: auto;
  contain-intrinsic-size: auto 200px;
}

/* ===== CSS Anchor Positioning for Clinical Tooltips (Baseline 2026) ===== */
[data-tooltip] {
  anchor-name: --tooltip-anchor;
}

[popover][data-tooltip] {
  position-anchor: --tooltip-anchor;
  top: anchor(bottom);
  left: anchor(center);
  transform: translateX(-50%);
  margin-top: 6px;
}