/* MuscleState Health — Option 1. Presentation only; legacy layout contracts remain. */
:root,html[data-accent="ember"],html[data-accent="electric"] {
  --orange:#329dff; --orange2:#62deff;
}
:root {
  color-scheme:dark; --bg:#060b13; --surface:#0d1725; --surface-raised:#122033;
  --panel:var(--surface); --line:#23354a; --border:var(--line);
  --text:#edf5ff; --muted:#9eb0c5; --accent:var(--orange);
  --green:#65dda9; --red:#ff8293; --yellow:#f6cc7c;
  --shadow:0 8px 28px #0003; --radius:16px;
}
html {scroll-padding-top:100px; scrollbar-color:#344c67 transparent}
body {font-family:Inter,"Segoe UI",system-ui,sans-serif; font-size:14px; line-height:1.6; background:var(--bg); color:var(--text); -webkit-font-smoothing:antialiased}
body:before {background:radial-gradient(ellipse at 90% 0%,#10315466,transparent 50%),linear-gradient(135deg,#080d16,#060b13);opacity:1}
body:after {background:none}
a {color:var(--orange2);text-underline-offset:4px}
button,input,select,textarea {font:inherit}
button,a,input,select,textarea,summary { -webkit-tap-highlight-color:transparent }
:focus-visible {outline:2px solid var(--orange2);outline-offset:4px}
.skip-link {position:fixed;left:16px;top:-100px;z-index:100;background:var(--surface);color:var(--orange2);padding:12px 18px;border:1px solid var(--orange);border-radius:8px}
.skip-link:focus {top:12px}
[hidden] {display:none!important}
h1,h2,h3,h4 {color:var(--text);line-height:1.25;letter-spacing:-.035em}
h1 {font-size:clamp(27px,3vw,40px);font-weight:750}
h2 {font-size:20px;font-weight:700} h3 {font-size:16px}
p {max-width:100%;overflow-wrap:break-word}
.eyebrow {color:var(--orange2);font-size:10px;letter-spacing:.18em;font-weight:750}
.lead {font-size:14px;line-height:1.65}
.app-shell {grid-template-columns:260px minmax(0,1fr)}
.sidebar {width:260px;background:#080f1bf2;padding:22px 12px 14px;border-color:var(--line)}
.logo {padding:0 8px 18px;gap:0;border-bottom:1px solid var(--line)}
.brand-wordmark {width:100%;max-width:280px;height:auto;display:block}
.brand-line {margin:12px 12px 0;padding:4px 0 4px 12px;border-color:var(--orange);font-size:9px;letter-spacing:.13em;color:var(--muted);line-height:1.8}
.side-nav {padding:16px 0;gap:3px}
.side-nav a,.nav-link-button,.nav-group-toggle {font-size:12px;border-radius:8px;min-height:40px;padding:9px 12px;color:var(--muted);font-weight:550}
.side-nav a:hover,.nav-link-button:hover,.nav-group-toggle:hover {background:var(--surface-raised);color:var(--text)}
.side-nav a.active,.nav-group-toggle.active {color:var(--orange2);background:color-mix(in srgb,var(--orange) 12%,transparent);border-color:color-mix(in srgb,var(--orange) 25%,transparent);box-shadow:inset 3px 0 var(--orange)}
.side-nav a.active i {color:var(--orange2)}
.side-nav a i,.nav-link-button i,.nav-group-toggle i {color:#7395b5;width:20px;height:20px;display:inline-flex;align-items:center;justify-content:center;flex:none}
.nav-icon {width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.side-nav .sub {padding-left:44px;font-size:11px}
.profile {background:var(--surface);border-radius:12px;padding:11px;font-size:11px}
.profile>span {background:var(--surface-raised);border-color:var(--line);color:var(--orange2);font-weight:700}
.profile small {font-size:10px}
.topbar {background:#080f1be8;height:80px;padding:0 32px;border-color:var(--line)}
.topbar>div>b {font-size:19px;font-weight:650;letter-spacing:-.03em}
.topbar>div>small {font-size:10px;color:var(--muted);letter-spacing:.025em}
.top-actions {gap:16px}.local-clock b {font-size:12px;font-variant-numeric:tabular-nums}.local-clock small {font-size:9px}
.tenant-chip {border-color:var(--line);color:var(--muted);font-size:9px;background:var(--surface)}
.top-user a {font-size:11px}
main {padding:30px 32px 88px;max-width:1600px}
.hero-row {margin-bottom:24px}.hero-row h1 {margin:0 0 6px}
.brand-hero {position:relative;isolation:isolate;overflow:hidden;padding:30px;border:1px solid #28425e;background:linear-gradient(115deg,#132e48,#0d1929 65%,#101e32);border-radius:18px;box-shadow:var(--shadow);margin-bottom:26px}
.brand-hero:after {content:"";position:absolute;right:-25px;top:0;bottom:0;width:45%;z-index:-1;opacity:.13;background:url('/static/musclestate-mark.svg') right center/180px no-repeat;pointer-events:none}
.brand-hero h1 {font-size:clamp(24px,2.7vw,37px);max-width:700px;font-weight:700}
.brand-hero .lead {margin-top:12px;font-size:12px;color:#a7c1d9}
.date-chip {background:#0b152399;border-color:#36516a;color:#b2c9dd;font-size:11px;white-space:nowrap}
.dashboard-heading h2 {font-size:22px;margin:0 0 5px}
.brand-greeting-icon {width:26px;height:26px;vertical-align:middle;margin-left:6px}
.glass,.card,.kpi-card,.therapy-card,.history-event,.hero-card,.public-section,.auth-card,.feature-grid article,.protocol-score-card {background:linear-gradient(145deg,var(--surface-raised),var(--surface));border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);backdrop-filter:none;color:var(--text)}
.glass,.card {padding:22px}
.panel-title {margin-bottom:18px;gap:14px}.panel-title h2 {font-size:17px}.panel-title a {color:var(--orange2);font-weight:600;font-size:11px}
.custom-dashboard-grid,.grid,.therapy-card-grid {gap:18px}
.kpi-card {padding:22px;min-height:170px}.kpi-card:hover {border-color:var(--orange)}
.kpi-card strong,.big,.health-kpi-grid strong {font-variant-numeric:tabular-nums;letter-spacing:-.05em}
.kpi-card>strong,.tile-link>strong {font-size:32px}
.kpi-head {font-size:12px;color:var(--muted)}
.kpi-card>small,.tile-link>small {font-size:11px;color:var(--muted)}
.pillar-grid a {background:var(--surface);border-color:var(--line);border-radius:12px;padding:18px 20px;box-shadow:none}
.pillar-grid b {font-size:14px;color:var(--orange2)}.pillar-grid span {font-size:11px}
.quick-start-card {border-left:3px solid var(--orange);padding:22px}.quick-start-actions {gap:10px}
button,.primary-btn,.btn,.btn:link,.btn:visited {min-height:42px;border:1px solid transparent;border-radius:9px;background:linear-gradient(120deg,var(--orange),var(--orange2));color:#031324!important;font-size:12px;font-weight:750;padding:10px 16px;box-shadow:0 4px 16px #0002;transition:background .15s,border-color .15s,transform .15s}
button:hover,.primary-btn:hover,.btn:hover {filter:brightness(1.08)}
button:disabled {opacity:.45;cursor:not-allowed}
.secondary-btn,.btn.secondary,.btn.secondary:link,.btn.secondary:visited,.dashboard-customize-btn,.filter-pill,.catalog-item,.saved-blend-btn {background:var(--surface-raised);color:var(--text)!important;border:1px solid var(--line);box-shadow:none;font-weight:600}
.secondary-btn:hover,.btn.secondary:hover,.filter-pill:hover {border-color:var(--orange)}
.secondary-btn {display:inline-flex;align-items:center;justify-content:center;text-align:center;text-decoration:none;white-space:nowrap}
.dashboard-edit-actions {flex-shrink:0}
.section-heading {display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:18px}
.section-heading h2,.section-heading h3 {margin:4px 0}.section-heading>a {font-size:12px;flex-shrink:0}
main>section.card+section.card,main>.grid+section.card,main>section.card+.grid {margin-top:20px}
.quick-admin-btn {color:var(--orange2);font-size:12px}
.menu-btn,.sidebar-pin-btn,.sidebar-reveal,.mobile-nav-close,.nav-group-toggle,.nav-link-button {background:transparent;color:var(--text)!important;box-shadow:none}
.global-quick-admin {background:linear-gradient(135deg,var(--orange),var(--orange2));border:1px solid #a5edff66;color:#031324;box-shadow:0 8px 30px #0008;bottom:max(24px,env(safe-area-inset-bottom));right:24px}
.nav-backdrop {background:#020815b8;border-radius:0;box-shadow:none}
label,.field {font-size:12px;font-weight:550;color:var(--muted)}
input,select,textarea,.stack-form input,.stack-form select,.copy-row input {min-height:44px;padding:11px 13px;border:1px solid var(--line);background:var(--bg);color:var(--text);border-radius:8px;box-shadow:inset 0 1px 2px #0002}
input:hover,select:hover,textarea:hover {border-color:#426485}
input:focus,select:focus,textarea:focus {border-color:var(--orange);outline:2px solid color-mix(in srgb,var(--orange) 25%,transparent);outline-offset:1px}
input::placeholder,textarea::placeholder {color:#71859b;opacity:1}
input[type=checkbox],input[type=radio] {accent-color:var(--orange);min-height:18px;width:18px;height:18px;flex:none;cursor:pointer}
input[type=file] {font-size:12px;max-width:100%}
input::file-selector-button {background:var(--surface-raised);color:var(--text);border:1px solid var(--line);border-radius:5px;padding:5px 8px;margin-right:10px}
option {background:var(--surface);color:var(--text)}
.field,.form-grid label,.stack-form label {gap:7px}.form-grid {gap:18px}.stack-form {gap:18px}
.table-scroll {border:1px solid var(--line);border-radius:10px;background:var(--surface);margin:12px 0}
table {font-size:12px;color:var(--text)} th {background:var(--surface-raised);padding:13px 14px;font-size:10px;font-weight:650;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);white-space:nowrap}
td {padding:13px 14px;border-color:var(--line);font-variant-numeric:tabular-nums}
tbody tr:hover {background:color-mix(in srgb,var(--orange) 4%,transparent)}
td button,.btn.tiny {min-height:32px;padding:5px 10px;font-size:11px}
.beta,.badge,.status-badge,.therapy-status,.history-status,.privacy-pill,.filter-pill,.tag-line span,.document-kind,.coming-soon {border-radius:6px;font-size:10px;letter-spacing:.035em;border:1px solid var(--line);padding:5px 9px;line-height:1.5}
.beta,.coming-soon {color:var(--orange2);background:color-mix(in srgb,var(--orange) 8%,transparent);border-color:color-mix(in srgb,var(--orange) 25%,transparent)}
.filter-pill.active,.checkin-tabs a.active {color:var(--orange2)!important;border-color:var(--orange);background:color-mix(in srgb,var(--orange) 10%,transparent)}
.therapy-status.active,.history-status.completed,.history-status.taken {color:var(--green);border-color:color-mix(in srgb,var(--green) 35%,transparent);background:color-mix(in srgb,var(--green) 8%,transparent)}
.btn.danger,button.danger,.danger-btn {color:var(--red)!important;background:color-mix(in srgb,var(--red) 12%,var(--surface));border-color:color-mix(in srgb,var(--red) 35%,transparent)}
.alert,.notice,.success-banner,.alert-banner {padding:14px 18px;border:1px solid var(--line);border-radius:10px;font-size:13px;line-height:1.6}
.alert.error,.notice.danger,.alert-banner {background:color-mix(in srgb,var(--red) 8%,var(--surface));border-color:color-mix(in srgb,var(--red) 32%,transparent);color:var(--red)}
.notice.success,.success-banner {background:color-mix(in srgb,var(--green) 8%,var(--surface));border-color:color-mix(in srgb,var(--green) 32%,transparent);color:var(--green)}
.therapy-card summary,.history-event summary,.protocol-score-card summary {position:relative;padding:22px;padding-right:52px}
summary {cursor:pointer;border-radius:8px}
.therapy-card summary:after,.history-event summary:after,.protocol-score-card summary:after {content:"";width:8px;height:8px;border-right:2px solid var(--orange2);border-bottom:2px solid var(--orange2);transform:rotate(45deg);position:absolute;right:24px;top:28px;transition:transform .15s}
details[open]>summary:after {transform:rotate(225deg)}
details[open]>summary {background:color-mix(in srgb,var(--orange) 5%,transparent)}
.therapy-card-body,.history-body {padding:22px;border-color:var(--line)}
.therapy-meta div,.result-grid>div,.result-hero,.result-card,.administration-component,.source-evidence-grid article,.discovery-steps article {background:var(--bg);border-color:var(--line);border-radius:10px}
.therapy-due-grid article,.apple-health-snapshot a,.mini-stats span {background:var(--surface-raised);border-color:var(--line)}
.document-dropzone,.discovery-drop {border:1px dashed #426485;background:var(--bg);border-radius:12px}
.document-dropzone {position:relative}
.document-dropzone input {width:1px;height:1px;min-height:0;padding:0;border:0;left:0;top:0}
.document-dropzone:focus-within {outline:2px solid var(--orange);outline-offset:3px}
.document-dropzone:hover,.discovery-drop:hover {border-color:var(--orange);background:color-mix(in srgb,var(--orange) 5%,var(--bg))}
.empty-state,.empty-health,.empty-state-tile {padding:32px;color:var(--muted);background:linear-gradient(120deg,var(--surface),var(--bg));border-radius:12px}
.empty-state-tile:before,.empty-health:before {content:"";width:44px;height:44px;margin-bottom:14px;display:block;background:url('/static/musclestate-mark.svg') center/contain no-repeat;opacity:.7}
.empty-health:before {margin:0 auto 16px}
.tool-icon,.connector-logo,.pdf-icon {background:color-mix(in srgb,var(--orange) 10%,transparent);border:1px solid color-mix(in srgb,var(--orange) 25%,transparent);color:var(--orange2);border-radius:10px}
.metric-ring:after {background:var(--surface)}
.trend-preview .area {fill:color-mix(in srgb,var(--orange) 10%,transparent)}
.dashboard-customizer,dialog {background:var(--surface);color:var(--text);border:1px solid #36516a;border-radius:18px;box-shadow:0 30px 100px #0009;padding:28px;max-width:calc(100vw - 32px);max-height:85dvh}
dialog::backdrop {background:#020815c9;backdrop-filter:blur(7px)}
.dialog-close {background:var(--surface-raised);color:var(--text)!important;border:1px solid var(--line)}
.tile-choice-list label {background:var(--bg);border-color:var(--line);padding:12px;border-radius:8px}
.tile-resize-controls {background:var(--surface);border-color:var(--line)}
.tile-resize-controls button {min-height:27px}.tile-resize-controls button:not(.active) {color:var(--muted)!important;background:transparent}
.settings-save-bar {background:var(--surface);border-color:var(--line);box-shadow:var(--shadow)}
body:has(.settings-save-bar) .global-quick-admin {bottom:110px}
.settings-clock-card {background:var(--surface-raised);border-color:var(--line)}
.public-site,.auth-page {background:var(--bg);color:var(--text)}
.public-nav {border-bottom:1px solid var(--line);padding:24px 28px}.public-brand {width:260px;max-width:100%}
.public-brand-copy {width:100%;display:flex!important}.logo-mark {background:url('/static/musclestate-mark.svg') center/contain no-repeat;clip-path:none;color:transparent;width:48px;height:48px}
.auth-card .public-brand {width:280px;max-width:100%;margin-bottom:28px}
.auth-card {padding:38px;border-color:#2c4761;position:relative;overflow:hidden}
.auth-card:before {content:"";position:absolute;left:0;right:0;top:0;height:2px;background:linear-gradient(90deg,transparent,var(--orange2),transparent)}
.auth-card h1 {font-size:32px}.auth-card p,.hero-saas p,.feature-grid article p,.fineprint {color:var(--muted)}
.hero-saas h1 {letter-spacing:-.055em;line-height:1.04}.public-section h2 {letter-spacing:-.045em}
.hero-card,.public-section {background:linear-gradient(130deg,var(--surface-raised),var(--surface))}
.feature-grid article {box-shadow:none}.hero-card li {color:var(--text)}
html[data-theme="light"] {color-scheme:light;--bg:#eef4fa;--surface:#fff;--surface-raised:#f6f9fd;--panel:var(--surface);--line:#cedce9;--border:var(--line);--text:#12283f;--muted:#526b83;--shadow:0 6px 22px #16314d0a;--orange:#1678c7;--orange2:#0878a0;--red:#ba2546;--green:#177247}
html[data-theme="light"] body,html[data-theme="light"] .public-site,html[data-theme="light"] .auth-page {background:var(--bg);color:var(--text)}
html[data-theme="light"] body:before {background:none;opacity:0}html[data-theme="light"] body:after {background:none}
html[data-theme="light"] .sidebar,html[data-theme="light"] .topbar {background:#f6f9fdf5}
html[data-theme="light"] .brand-hero {background:linear-gradient(120deg,#e0effc,#f6faff);border-color:#b5d4ed}
html[data-theme="light"] .brand-hero .lead {color:var(--muted)}
html[data-theme="light"] .date-chip {background:var(--surface);border-color:var(--line);color:var(--muted)}
html[data-theme="light"] .brand-wordmark {background:#0a1422;border-radius:8px;padding:4px}
html[data-theme="light"] .side-nav a,html[data-theme="light"] .lab-list a,html[data-theme="light"] .tile-link {color:var(--text)}
html[data-theme="light"] .side-nav a.active {color:var(--orange2)}
html[data-theme="light"] .local-clock b,html[data-theme="light"] .mini-stats b {color:var(--text)}
html[data-theme="light"] .primary-btn,html[data-theme="light"] button:not(.secondary-btn):not(.nav-link-button):not(.nav-group-toggle):not(.mobile-menu-btn):not(.sidebar-pin-btn):not(.sidebar-reveal):not(.mobile-nav-close):not(.nav-backdrop):not(.filter-pill):not(.catalog-item):not(.saved-blend-btn),html[data-theme="light"] .btn:not(.secondary) {color:#fff!important}
@media(min-width:901px){.sidebar-collapsed .app-shell {grid-template-columns:0 minmax(0,1fr)}}
@media(max-width:1100px){.top-user .tenant-chip {display:none}.topbar {padding:0 24px}main {padding:26px 24px 88px}}
@media(max-width:900px){.app-shell {display:block}.sidebar,.sidebar-collapsed .sidebar {width:min(300px,88vw);padding:20px 14px 16px}.topbar {height:70px;padding:0 18px;gap:12px}.mobile-nav-close {min-height:38px}.side-nav a,.nav-group-toggle,.nav-link-button {min-height:44px;font-size:13px}.topbar>div>b {font-size:17px}main {padding:22px 18px 88px}.brand-hero {padding:24px}.brand-hero:after {width:40%;background-size:120px}.glass,.card {padding:20px}}
@media(max-width:600px){body {font-size:14px}.top-actions {max-width:32%}.local-clock {display:none}.top-user a {max-width:100px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.topbar {height:64px}.topbar>div>b {font-size:16px}.brand-hero {padding:22px}.brand-hero h1 {font-size:27px}.brand-hero .lead {font-size:11px;max-width:230px}.dashboard-heading h2 {font-size:21px}.panel-title {align-items:flex-start;flex-wrap:wrap}.glass,.card {padding:18px}.dashboard-edit-actions {gap:8px}.dashboard-edit-actions>* {width:100%;text-align:center}.quick-start-actions {display:grid;grid-template-columns:1fr 1fr}.quick-start-actions a {padding:10px 8px;font-size:11px}.therapy-card summary {padding:18px 44px 18px 18px}.therapy-card-body {padding:18px}.public-brand {width:220px}.public-nav {padding:18px}.auth-card {padding:26px}.auth-card h1 {font-size:29px}.settings-save-bar {flex-wrap:wrap;gap:12px}.settings-save-bar button {width:100%}.administration-save-row {flex-direction:column;align-items:stretch}.global-quick-admin {width:50px;height:50px;right:18px}.table-scroll {margin:10px 0}th,td {padding:11px 12px}.public-section {padding:24px}.public-nav nav {flex-wrap:wrap;gap:12px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after {scroll-behavior:auto!important;animation:none!important;transition:none!important}}
@media(max-width:600px){.dashboard-workflow-strip {grid-template-columns:1fr 1fr}.pillar-grid a {padding:14px}.mini-stats {grid-template-columns:repeat(3,minmax(0,1fr));gap:5px}.mini-stats span {padding:8px 5px}.section-heading {flex-wrap:wrap;align-items:flex-start}.dashboard-edit-actions {flex-shrink:1}body:has(.settings-save-bar) .global-quick-admin {bottom:160px}}