/* True Knee patient palette and spacing, scoped to the embedded workbench. */
:root{font-family:Arial,sans-serif;color:#111617;background:#f2f0e9;--green:#237f79;--border:rgba(15,25,27,.16)}
body.patient{background:#f2f0e9;display:flow-root}
.patient main{max-width:1320px;padding:24px 3.5vw 32px}
.patient .patient-intro{display:grid;grid-template-columns:1fr 1fr;gap:32px;background:#0a0c0d;margin:0 0 24px;min-height:0;border-radius:4px;overflow:hidden}
.patient .hero-copy{width:auto;padding:32px;align-self:center}
.patient .patient-intro .eyebrow{color:#8ee7df;font-size:12px;letter-spacing:.14em;margin:0 0 16px}
.patient .patient-intro h1,.patient.has-image .patient-intro h1{font:500 clamp(40px,5.2vw,68px)/1.04 Arial,sans-serif;letter-spacing:-.055em;color:#faf9f5;margin:0 0 18px}
.patient .patient-intro .lead{color:#c4cccc;font-size:18px;line-height:1.5;margin:0;max-width:340px}
.patient .hero-tags{display:none}.patient.has-image .patient-intro{min-height:0}
.tilt-activity{position:relative;margin:0;min-width:0;min-height:260px;background:#121719}
.tilt-activity video{width:100%;height:100%;position:absolute;inset:0;object-fit:cover}
.tilt-activity figcaption{position:absolute;inset:auto 0 0;display:flex;align-items:center;justify-content:space-between;padding:32px 20px 16px;background:linear-gradient(transparent,rgba(0,0,0,.7));color:#fff;font-size:16px}
.tilt-activity button{border:1px solid #ffffff80;border-radius:99px;background:#10171980;color:#fff;font-size:14px;padding:8px 16px}
.patient-layout{display:flex;flex-direction:column;gap:24px}.patient-start,.patient .results{width:100%;min-width:0}
.patient .panel{border:1px solid var(--border);border-radius:6px;box-shadow:none;padding:24px;background:#faf9f5}
.patient .upload-card{display:grid;grid-template-columns:1fr 1.1fr;column-gap:32px;align-items:center}
.upload-card>.step{font-size:12px;letter-spacing:.12em;color:#687173;grid-column:1;align-self:end}
.patient .upload-card h2{font:500 clamp(23px,2.3vw,30px)/1.2 Arial,sans-serif;letter-spacing:-.035em;margin:8px 0;grid-column:1}
.upload-with-xray{grid-column:2;grid-row:1/4;margin:0;gap:16px}.upload-xray{flex-basis:70px;border-radius:4px}.upload-xray img{width:70px;height:95px}.upload-xray figcaption{font-size:10px}
.patient .patient-upload{border-radius:99px;background:#0a0c0d;color:#faf9f5;box-shadow:none;padding:18px 20px;font-size:16px;line-height:1.3}.patient .patient-upload:hover{background:#237f79}
.patient .file-help{grid-column:2;margin:8px 0 0;font-size:12px}.patient #status{grid-column:1;font-size:14px;color:#687173;margin:8px 0 0;line-height:1.5}
#patient-images,#patient-upload-status,.upload-actions{grid-column:1/-1}#patient-upload-status:empty,.upload-actions:has(>button[hidden]):not(:has(>button:not([hidden]))){display:none}
.patient.has-image .upload-card{padding:24px}.patient.has-image .upload-with-xray{grid-column:1/-1;grid-row:auto}.patient.has-image .file-help{grid-column:1/-1}
.patient .results{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:stretch}.patient .results .panel{margin:0;min-width:0}
.patient .panel-title h2{font:500 23px/1.2 Arial,sans-serif;letter-spacing:-.025em;color:#111617}
.patient .panel-title h2 small{font:12px Arial,sans-serif;color:#687173}
.example-invitation{background:#e8edeb;border-radius:4px;color:#384846;margin:16px 0;line-height:1.5}.example-invitation strong{font-size:12px;color:#237f79}
.patient .results p,.patient details p{font-size:14px;color:#566463}.patient .metrics>div,.patient .metrics>div:nth-child(n){background:#f2f0e9;border-radius:4px;padding:16px}
.patient .metrics strong{font:500 36px/1 Arial,sans-serif;letter-spacing:-.05em;color:#111617;margin:12px 0 8px}
.patient .metrics span:not(.angle-icon){font-size:14px;color:#566463}.patient .metrics small{font-size:12px;color:#687173}
.patient .grid-head{font-size:12px;color:#566463}.patient #cpak-grid .row-label{font-size:11px;color:#687173}
.patient #cpak-grid .cell{background:#f2f0e9;border-color:#d9dfdc;color:#687173;font:500 24px Arial,sans-serif;border-radius:4px}
.patient:not(.has-result) #cpak-grid .cell[data-type="II"],.patient #cpak-grid .cell.selected{background:#237f79;border-color:#237f79;color:white;box-shadow:none}
.patient summary,.patient a{color:#237f79;font-size:14px}.patient .cpak-common,.sample-model-credit{font-size:12px!important;line-height:1.5}
.patient .reconstruction-card{margin:24px 0 0;padding:24px;border:1px solid var(--border);border-radius:6px;background:#faf9f5;color:#111617}
.patient .reconstruction-card h2{font:500 32px/1.15 Arial,sans-serif;letter-spacing:-.04em;margin:8px 0}.reconstruction-card .eyebrow{color:#237f79;font-size:12px}
.reconstruction-tag{border-color:#ccd6d3;color:#566463}.sample-model-image{border-radius:4px;margin-top:20px}.sample-model-actions button{color:#237f79;border-color:#bacac6;font-size:14px}
.patient-download{margin:24px 0}.patient-download button{border-radius:99px;padding:14px 24px;background:#0a0c0d;color:#fff}
.patient footer{margin:24px 0 0;padding:20px 0 0;font-size:12px;color:#687173;line-height:1.6}
@media(max-width:760px){.patient main{padding:16px 20px 24px}.patient .patient-intro{grid-template-columns:1fr;gap:0}.patient .hero-copy{padding:24px}.patient .patient-intro h1,.patient.has-image .patient-intro h1{font-size:44px}.patient .patient-intro .lead{font-size:16px;max-width:none}.tilt-activity{min-height:190px;max-height:230px;aspect-ratio:16/9}.patient .upload-card{display:block}.upload-with-xray{margin:16px 0 0}.patient .file-help{margin-top:10px}.patient #status{margin-top:12px}.patient .results{grid-template-columns:1fr}.patient .panel,.patient .reconstruction-card{padding:20px}.patient .reconstruction-heading{display:flex;flex-wrap:wrap}.reconstruction-tag{margin:0}.patient-layout{gap:20px}.patient .results{gap:20px}}

.tilt-activity video{object-position:center 30%}.tilt-activity figcaption small{display:block;font-size:11px;color:#e1e6e4;margin-top:4px}

/* Lead with the X-ray and a single, prominent upload action. */
.patient .upload-card,.patient.has-image .upload-card{display:grid;grid-template-columns:minmax(180px,260px) minmax(0,1fr);gap:16px 48px;padding:36px;background:#faf9f5}
.tilt-upload-heading{grid-column:2;grid-row:1;align-self:end}
.tilt-upload-heading .eyebrow{font-size:12px;color:#237f79;letter-spacing:.14em;margin:0 0 12px}
.patient .tilt-upload-heading h1{font:500 clamp(40px,5.3vw,68px)/1.04 Arial,sans-serif;letter-spacing:-.055em;margin:0 0 16px;color:#111617}
.tilt-upload-heading>p:last-child{font-size:18px;line-height:1.5;color:#566463;margin:0;max-width:490px}
.patient .upload-with-xray,.patient.has-image .upload-with-xray{display:contents}
.patient .upload-xray{grid-column:1;grid-row:1/5;align-self:stretch;width:100%;border-radius:6px;background:#101719;display:flex;flex-direction:column;justify-content:center}
.patient .upload-xray img{width:100%;height:330px;object-fit:contain}
.patient .upload-xray figcaption{font-size:12px;padding:10px;color:#c4cccc}
.patient .patient-upload,.patient.has-image .patient-upload{grid-column:2;grid-row:2;width:100%;margin:4px 0 0;padding:24px;font-size:clamp(22px,2.6vw,30px);font-weight:600;border-radius:8px;background:#237f79;color:#fff;text-align:center}
.patient .patient-upload:hover{background:#185d58}.patient .patient-upload:focus-within{outline:3px solid #237f79;outline-offset:4px}
.patient .file-help,.patient.has-image .file-help{grid-column:2;grid-row:3;margin:0;font-size:13px;text-align:center}
.patient #status,.patient.has-image #status{grid-column:2;grid-row:4;font-size:14px;margin:0;align-self:start;text-align:center}
.patient.has-image .upload-card>.file-help{display:block}
.tilt-life-section{margin:32px 0 0;display:flex;justify-content:center}
.tilt-life-section .tilt-activity{width:100%;max-width:640px;min-height:280px;height:280px;border-radius:6px;overflow:hidden}
@media(max-width:760px){.patient .upload-card,.patient.has-image .upload-card{grid-template-columns:110px minmax(0,1fr);gap:20px 18px;padding:22px}.tilt-upload-heading{grid-column:2;grid-row:1;align-self:center}.patient .tilt-upload-heading h1{font-size:38px;margin-bottom:10px}.tilt-upload-heading>p:last-child{font-size:15px;line-height:1.5}.tilt-upload-heading .eyebrow{font-size:11px;margin-bottom:10px}.patient .upload-xray{grid-column:1;grid-row:1;align-self:stretch}.patient .upload-xray img{height:190px}.patient .upload-xray figcaption{font-size:10px;padding:7px 2px}.patient .patient-upload,.patient.has-image .patient-upload{grid-column:1/-1;grid-row:2;font-size:24px;padding:22px 12px;margin:0}.patient .file-help,.patient.has-image .file-help{grid-column:1/-1;grid-row:3}.patient #status,.patient.has-image #status{grid-column:1/-1;grid-row:4}.tilt-life-section .tilt-activity{height:240px;min-height:240px;max-height:none}}
@media(max-width:360px){.patient .upload-card,.patient.has-image .upload-card{grid-template-columns:85px minmax(0,1fr);padding:18px;gap:16px 12px}.patient .tilt-upload-heading h1{font-size:32px}}

.tilt-activity .tilt-video-logo{display:block;width:150px;height:90px;object-fit:contain;object-position:left center}