:root{--ink:#24213e;--purple:#7564a8;--pale:#f0edf7;--line:#e5e2ed;--rust:#ae664c;--muted:#706b80}*{box-sizing:border-box}body{margin:0;background:#f8f7fb;color:var(--ink);font:16px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}button,input,select,textarea{font:inherit}button{cursor:pointer;border:1px solid var(--line);border-radius:9px;background:white;color:var(--ink);padding:11px 17px;font-weight:600}button:hover{background:var(--pale)}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid #ae8ae0;outline-offset:3px}header{display:flex;align-items:center;justify-content:space-between;padding:18px 4%;gap:22px;background:#fff;border-bottom:1px solid var(--line)}header img{width:148px;height:65px;object-fit:contain}.switch{display:flex;background:#f3f1f7;padding:4px;border-radius:12px}.switch button{border:0;background:transparent}.switch .active{background:white;box-shadow:0 2px 8px #20163012;color:#65518f}.demo{font-size:12px;letter-spacing:1px;color:var(--rust);font-weight:700}.notice{text-align:center;background:#f5eee8;padding:8px 15px;color:#78513d;font-size:13px}main{max-width:1440px;margin:auto;padding:38px 4% 60px}.heading{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:28px}.eyebrow{font-size:12px;letter-spacing:1.7px;font-weight:700;color:var(--rust)}h1{font-size:clamp(25px,3vw,36px);font-weight:600;letter-spacing:-1px;margin:8px 0}h2{font-size:19px;margin:0;font-weight:650}p{color:var(--muted);margin:8px 0}.primary{background:var(--purple);border-color:var(--purple);color:white}.primary:hover{background:#66538f}.filters{display:flex;gap:14px;margin-bottom:25px}.filters label{flex:1;min-width:0}label{display:block;font-size:14px;font-weight:600;color:#625b76}select,input:not([type=range]),textarea{width:100%;border:1px solid #dcd7e7;background:white;border-radius:8px;padding:11px 12px;margin-top:6px;color:var(--ink)}.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-bottom:24px}.stat{border:1px solid var(--line);background:white;border-radius:13px;padding:22px}.stat small{color:var(--muted);font-size:14px}.stat strong{display:block;font-size:36px;font-weight:600;margin:7px 0 0}.stat .sub{font-size:13px;color:var(--muted)}.card{background:white;border:1px solid var(--line);border-radius:14px;padding:24px}.panels{display:grid;grid-template-columns:1.1fr 1fr;gap:22px;margin-bottom:24px}.cardtitle{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:22px}.cardtitle span,.footnote{font-size:13px;color:var(--muted)}.bars{display:flex;height:180px;align-items:flex-end;gap:38px;padding:12px 20px 0;border-bottom:1px solid var(--line)}.baritem{flex:1;text-align:center;height:100%;display:flex;flex-direction:column;justify-content:flex-end}.bar{background:var(--purple);border-radius:7px 7px 0 0;min-height:3px;max-width:85px;width:100%;margin:auto auto 0}.baritem:first-child .bar{background:#cbc2dd}.baritem strong{font-size:20px}.barlabels{display:flex;text-align:center;gap:38px;padding:10px 20px;color:var(--muted);font-size:14px}.barlabels span{flex:1}.outrow{display:grid;grid-template-columns:110px 1fr 40px;gap:12px;align-items:center;margin:15px 0;font-size:14px}.track{height:10px;border-radius:5px;background:#f1eff5}.track div{height:100%;border-radius:5px;background:#8471b4}.tablewrap{overflow:auto}table{border-collapse:collapse;width:100%;text-align:left}th{font-size:12px;text-transform:uppercase;letter-spacing:.7px;color:var(--muted);background:#f8f7fa;padding:14px}td{padding:17px 14px;border-bottom:1px solid #eeeaf3;font-size:14px}td small{display:block;color:var(--muted);font-size:12px}td button{padding:0;border:0;color:#6a528f;background:none;text-align:left}td .icononly{padding:6px 9px;border:1px solid var(--line);border-radius:8px;background:white;font-size:15px;line-height:1}td .icononly:hover{background:#faeceb;border-color:#e2b8b3}.badge{border-radius:20px;padding:5px 9px;background:#eaf3ef;color:#356958;font-size:12px;white-space:nowrap}.badge.pending{background:#f5eee6;color:#886740}.badge.due{background:#f6e6e3;color:#9a4a30}.pendingonly{display:flex;align-items:center;gap:8px;font-weight:600;font-size:14px;margin:-12px 0 22px}.pendingonly input{width:auto;margin:0}.footnote{margin-top:18px}#patient{max-width:760px}.patienttop{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;gap:20px}.patienttop label{max-width:200px}.patientcard{padding:32px}.patientcard h1{font-size:30px}.patientcard .progress{height:4px;background:#eeeaf5;border-radius:8px;margin-bottom:24px}.progress div{height:100%;background:var(--purple)}.procedurebox{padding:18px;background:var(--pale);border-radius:10px;margin:22px 0}.procedurebox p{font-size:14px}.fields{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:22px 0}.dobrow{display:grid;grid-template-columns:1fr 1fr 1.3fr;gap:8px;margin-top:6px}.dobrow select{margin-top:0}.full{width:100%;margin-top:22px}.step{font-size:13px;color:var(--purple);font-weight:600}.question{border-top:1px solid var(--line);padding-top:24px;margin-top:26px}.score{display:flex;align-items:center;justify-content:space-between;margin:16px 0}.score strong{font-size:42px;color:var(--purple)}input[type=range]{width:100%;accent-color:var(--purple);height:30px}.endpoints{display:flex;justify-content:space-between;font-size:13px;color:var(--muted)}.choices{display:grid;gap:9px;margin-top:15px}.choice{padding:12px;border:1px solid var(--line);border-radius:8px;display:flex;align-items:center;gap:12px;font-size:16px}.choice input{width:auto!important;margin:0!important;accent-color:var(--purple)}textarea{min-height:95px}.patientnote{text-align:center;font-size:13px;margin-top:20px}.error{color:#a63636}.successmark{font-size:40px;color:#48745b}dialog{border:1px solid var(--line);border-radius:16px;max-width:540px;width:90%;padding:30px;color:var(--ink)}dialog::backdrop{background:#24213e66}.close{float:right;font-size:24px;padding:0 10px}dl{display:grid;grid-template-columns:1fr 1fr;gap:12px}dt{color:var(--muted)}dd{margin:0} [hidden]{display:none!important}@media(max-width:800px){header{flex-wrap:wrap;padding:14px 5%;gap:10px}header img{width:115px;height:48px}.demo{margin-left:auto}.switch{order:3;width:100%}.switch button{flex:1;padding:10px;font-size:14px}.heading{display:block}.heading button{margin-top:15px}.filters{flex-wrap:wrap}.filters label{flex-basis:44%}.stats{grid-template-columns:1fr 1fr;gap:10px}.stat{padding:16px}.stat strong{font-size:30px}.panels{grid-template-columns:1fr}.cardtitle{align-items:flex-start;flex-wrap:wrap}.card{padding:20px}main{padding:26px 5%}.fields{grid-template-columns:1fr}.patientcard{padding:24px}.patientcard h1{font-size:27px}.notice{font-size:12px}.patienttop .eyebrow{font-size:10px}}

.patienttop label{max-width:350px;flex:1}.patienttop select{min-height:48px}[lang="pa"],[lang="hi"],[lang="ur"],[lang="fa"]{line-height:1.8}@media(max-width:600px){.patienttop{align-items:stretch;flex-direction:column}.patienttop label{max-width:none}}
a.button{display:inline-block;text-decoration:none;border-radius:9px;padding:11px 17px;font-weight:600}.portalnav{display:flex;gap:8px;flex-wrap:wrap}.portalnav a{padding:10px 14px;text-decoration:none;border-radius:8px;color:var(--muted);font-size:14px}.portalnav a.selected{color:var(--purple);background:var(--pale)}.account{display:flex;align-items:center;gap:14px;font-weight:650;color:var(--purple)}.account>span{font-size:14px;color:var(--ink)}.account small{display:block;font-weight:400;color:var(--muted);font-size:12px}.radmain{max-width:1000px}.appcontrols{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:15px}.appcontrols label{min-width:160px}.appcontrols .switch button{min-height:48px}.clinicbanner{margin:25px 0}.clinicbanner h2{font-size:26px;margin-top:8px}.patientrow{display:flex;width:100%;align-items:center;gap:16px;text-align:left;border:0;border-bottom:1px solid var(--line);border-radius:0;padding:18px 0;background:white;font-weight:400}.patientinitial{background:var(--pale);border-radius:10px;padding:12px;color:var(--purple);font-size:14px;font-weight:650}.patientinfo{flex:1}.patientinfo span,.patientinfo small{display:block}.patientinfo strong{font-weight:650}.patientinfo span{font-size:14px;color:var(--muted)}.patientinfo small{font-size:12px;color:var(--muted);margin-top:3px}.patientresult{text-align:right}.patientresult strong{font-size:25px}.patientresult small{display:block;color:var(--muted);font-size:12px;font-weight:400}.patientresult strong small{display:inline}.summaryrow{display:flex;justify-content:space-between;gap:20px;padding:20px 0;border-bottom:1px solid var(--line);align-items:center}.summaryrow:last-child{border:0}.summaryrow p{font-size:13px}.summaryvalue{text-align:right}.summaryvalue strong{font-size:28px;color:var(--purple)}.summaryvalue span{display:block;color:var(--muted);font-size:12px}.withheld{color:#886740;background:#f5eee6;padding:5px 10px;border-radius:20px;font-size:13px}.install{margin-top:24px;font-size:14px}.install summary{cursor:pointer;color:var(--purple);font-weight:600}.radiologist .stats{margin-top:24px}@media(max-width:650px){.portalnav{order:3;width:100%}.portalnav a{flex:1;text-align:center;padding:8px}.appcontrols{flex-direction:column;align-items:stretch;gap:12px}.appcontrols .switch{width:100%}.appcontrols .switch button{flex:1}.appcontrols label{align-self:flex-end;width:160px}.radiologist header{flex-wrap:nowrap}.radiologist header img{width:110px}.patientrow{gap:10px}.patientinitial{display:none}.patientinfo{min-width:0}.patientinfo span{font-size:14px}.radmain .heading{display:flex}.radmain .heading h1{font-size:28px}.radmain .heading button{font-size:14px}.radiologist .card{padding:18px}.radmain .stats{gap:10px}}
.cliniccontrol{display:flex;justify-content:flex-end;margin:12px 0}.cliniccontrol label{width:280px;max-width:100%}

.ownprocedure{max-width:320px;margin-top:18px}.modalityheading{font-size:14px;letter-spacing:1px;color:var(--purple);padding:12px 0;border-bottom:2px solid var(--pale);margin:20px 0 0}

/* Live app only: long lists scroll inside their own panel instead of growing the page indefinitely. */
.tablewrap{max-height:560px;overflow-y:auto}.tablewrap table thead th{position:sticky;top:0;z-index:1}
#myPatients{max-height:520px;overflow-y:auto;border:1px solid var(--line);border-radius:10px}

/* Live app only: a selected .choice (radio + label pattern, used for the
   patient questionnaire's result options and the kiosk's tap targets)
   gets a clear filled state — large touch targets with instant visual
   feedback matter most on a shared clinic tablet under time pressure. */
.choice:has(input:checked){background:var(--purple);border-color:var(--purple);color:#fff}
.choicegrid{gap:10px}
.choicegrid.numeric{grid-template-columns:repeat(auto-fit,minmax(56px,1fr))}
.choicegrid .choice{justify-content:center;text-align:center}
.choicegrid.numeric .choice{position:relative;min-height:56px;font-size:20px;font-weight:650;padding:0}
.choicegrid.numeric .choice input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer}

/* Kiosk intake only: one screen, no page scroll, same layout on a laptop
   browser window as on a tablet — a dense multi-column grid instead of a
   centred narrow column, since that's what actually fits everything
   without scrolling at typical tablet/laptop viewport heights. */
html{height:100%;margin:0}
body.kiosk-page{height:100vh;height:100dvh;margin:0;display:flex;flex-direction:column;overflow:hidden}
.kiosk-page header{display:grid;grid-template-columns:minmax(max-content,1fr) auto minmax(max-content,1fr);align-items:center;padding:10px 2%;gap:14px}
.kiosk-page header img{width:160px;height:80px;object-fit:contain;object-position:left center;flex:0 0 auto}
.kiosk-page .headerzone{display:flex;align-items:center;gap:14px;min-width:0}
.kiosk-page .headerleft{justify-self:start}
.kiosk-page .headercenter{justify-self:center}
.kiosk-page .headerright{justify-self:end}
.kiosk-page header .eyebrow{font-size:11px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.kiosk-page header .account{min-width:0}
.kiosk-page header .account>span{min-width:0;overflow:hidden}
.kiosk-page header .account>span>span,.kiosk-page header .account small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block;text-align:center}
.kiosk-page .kiosklang{display:flex;flex-direction:column;align-items:flex-start;gap:2px;font-size:12px;font-weight:600;color:#625b76;margin:0;white-space:nowrap}
.kiosk-page .kiosklang select{width:150px;margin:0;padding:6px 8px;font-size:13px}
.kiosk-page .fields{margin:0;gap:18px;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.kiosk-page main{flex:1 1 auto;overflow:hidden;max-width:none;width:100%;margin:0;padding:14px 1.5%;display:flex;flex-direction:column;min-height:0;box-sizing:border-box}
.kiosk-page .kiosklogin{align-items:center;justify-content:center}
.kiosk-page .kiosklogin .card{max-width:420px;width:100%}
.kiosk-page #intakeForm{flex:1 1 auto;display:grid;gap:14px;min-height:0;grid-template-columns:1fr 1fr 1fr;grid-template-rows:1fr auto auto;grid-template-areas:"patient radiologist procedure" "score score score" "submit submit submit"}
.kiosk-page .kioskcol,.kiosk-page #scoreSection{padding:20px 22px;overflow:auto;display:flex;flex-direction:column;gap:18px;min-height:0}
.kiosk-page .kioskcol strong,.kiosk-page #scoreSection strong{font-size:16px;font-weight:650}
.kiosk-page .sectionheading{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0}
.kiosk-page .scanbuttons{display:flex;gap:8px}
.kiosk-page #scanLabelButton,.kiosk-page #clearPatientButton{padding:8px 12px;font-size:13px;font-weight:600;border-radius:8px}
.kiosk-page #scanStatus{margin:0;color:var(--purple);font-weight:600}
.kiosk-page #rawScanDetails{margin:0;font-size:12px;color:var(--muted)}
.kiosk-page #rawScanDetails summary{cursor:pointer;font-weight:600}
.kiosk-page #rawScanText{white-space:pre-wrap;font-size:11px;background:var(--pale);border-radius:8px;padding:8px;margin:6px 0 0;max-height:80px;overflow:auto}
.kiosk-page #patientSection{grid-area:patient}
.kiosk-page #radiologistSection{grid-area:radiologist}
.kiosk-page #radiologistSection .choicegrid{margin-top:27px}
.kiosk-page #procedureSection{grid-area:procedure}
.kiosk-page #scoreSection{grid-area:score}
.kiosk-page #submitRow{grid-area:submit;padding-top:4px}
.kiosk-page label{font-size:14px;font-weight:600;margin:0;color:#625b76}
.kiosk-page input,.kiosk-page select{box-sizing:border-box;width:100%;min-width:0;min-height:52px;padding:13px 14px;margin-top:6px;font-size:17px;border-radius:9px;color:var(--ink);font-weight:400}
/* iOS Safari ignores custom border/background on input[type=date] itself
   (it insists on native chrome for the control) — give the box styling to
   a wrapping div instead and let the real input sit inside it, transparent
   and borderless, so the visible box renders consistently everywhere. */
.kiosk-page .datewrap{margin-top:6px;border:1px solid #dcd7e7;background:#fff;border-radius:9px;box-sizing:border-box}
.kiosk-page .datewrap input{margin-top:0;border:none;background:transparent;border-radius:0}
.kiosk-page .choicegrid{gap:12px}
.kiosk-page .choicegrid .choice{padding:14px;font-size:16px;font-weight:600;color:var(--ink)}
.kiosk-page #radiologistChoices .choice{justify-content:flex-start;text-align:left;min-height:56px}
.kiosk-page #radiologistChoices .choice input{flex:0 0 auto}
.kiosk-page #radiologistChoices .choicetext{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.kiosk-page .choicegrid.numeric .choice{min-height:72px;font-size:22px;font-weight:650}
.kiosk-page .error{margin:0 0 8px;font-size:14px}
.kiosk-page button.primary.full{padding:18px 17px;font-size:17px;font-weight:650;border-radius:10px}
.kiosk-page #scoreSection .footnote{font-size:14px}

.kiosk-page .kioskbadge{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;background:var(--pale);color:var(--purple);font-size:13px;font-weight:700}.kiosk-page .kioskbadge:empty{display:none}.kiosk-page header .headerright button{white-space:nowrap}

/* Kiosk, portrait tablet (e.g. Fully Kiosk Browser full screen). Three
   columns are too narrow in portrait: names were cut off and the 0-10 scale
   wrapped onto a second row. Stack into rows instead, scale the whole form down (kiosk.js fitToScreen)
   if a short screen can't fit it, never scroll, keep 0-10 on one row, and show every
   radiologist name in full. */
@media (orientation:portrait){
  .kiosk-page header{padding:12px 3%}
  .kiosk-page main{overflow:hidden;padding:14px 3% 18px}
  .kiosk-page #intakeForm{flex:0 0 auto;gap:12px;grid-template-columns:1fr 1fr;grid-template-rows:auto;grid-template-areas:"patient procedure" "radiologist radiologist" "score score" "submit submit"}
  .kiosk-page .kioskcol,.kiosk-page #scoreSection{overflow:visible;padding:18px 20px;gap:14px}
  .kiosk-page .fields{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px}
  .kiosk-page label{font-size:16px}
  .kiosk-page input,.kiosk-page select{min-height:54px;font-size:18px;margin-top:6px}
  .kiosk-page .sectionheading{flex-wrap:wrap}
  .kiosk-page #radiologistSection .choicegrid{margin-top:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
  .kiosk-page #radiologistChoices .choice{min-height:60px;font-size:16px}
  .kiosk-page #radiologistChoices .choicetext{white-space:normal;overflow:visible;text-overflow:clip;line-height:1.25}
  .kiosk-page .choicegrid.numeric{display:grid;grid-template-columns:repeat(11,minmax(0,1fr));gap:8px}
  .kiosk-page .choicegrid.numeric .choice{min-height:64px;font-size:22px;padding:0}
  .kiosk-page #submitRow{padding-top:2px}
  .kiosk-page button.primary.full{padding:18px 17px;font-size:19px}
}

/* Smaller portrait screens (e.g. a 10" 1280x800 tablet whose browser
   reports ~600x960): tighter controls so less shrink-to-fit is needed, and a
   header that cannot collide (no RP badge, narrower language box). */
@media (orientation:portrait) and (max-width:700px){
  .kiosk-page .kioskbadge{display:none}
  .kiosk-page header{padding:8px 2.5%;gap:8px}
  .kiosk-page header img{width:140px;height:70px}
  .kiosk-page .headerright{gap:8px}
  .kiosk-page .kiosklang select{width:120px;min-height:44px;font-size:15px;padding:6px 8px}
  .kiosk-page .headerright button{padding:10px 12px;font-size:15px}
  .kiosk-page header .account>span>span{white-space:normal;font-size:13px;line-height:1.2}
  .kiosk-page main{padding:10px 2.5% 12px}
  .kiosk-page #intakeForm{gap:10px}
  .kiosk-page .kioskcol,.kiosk-page #scoreSection{padding:14px 14px;gap:10px}
  .kiosk-page input,.kiosk-page select{min-height:46px;font-size:16px;margin-top:4px;padding:8px 10px}
  .kiosk-page label{font-size:14px}
  .kiosk-page .fields{gap:10px}
  .kiosk-page #radiologistChoices .choice{min-height:50px;padding:8px;font-size:14px}
  .kiosk-page .choicegrid.numeric .choice{min-height:54px;font-size:20px}
  .kiosk-page .choicegrid.numeric{gap:6px}
  .kiosk-page button.primary.full{padding:16px 14px;font-size:17px}
  .kiosk-page #scanTip{display:none}
}

/* Kiosk pickers: replace native dropdowns (which pop up at the top of the
   screen on Android) with in-page controls and a centred dialog. */
.kiosk-page .fieldlabel{font-size:14px;font-weight:600;color:#625b76}
.kiosk-page .pickfield{display:flex;flex-direction:column;gap:6px}
.kiosk-page .pickbutton{width:100%;min-height:52px;margin:0;padding:13px 40px 13px 14px;text-align:left;font-size:17px;font-weight:400;color:var(--ink);background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%23625b76' stroke-width='2'/%3E%3C/svg%3E") no-repeat right 14px center;border:1px solid #dcd7e7;border-radius:9px}
.kiosk-page .kiosklang .pickbutton{width:150px;min-height:48px;padding:8px 34px 8px 12px;font-size:15px}
.kiosk-page .segmented{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.kiosk-page .segmented button{min-height:52px;padding:6px 4px;font-size:16px;font-weight:600;color:var(--ink);background:#fff;border:1px solid #dcd7e7;border-radius:9px}
.kiosk-page .segmented button.selected{background:var(--purple);border-color:var(--purple);color:#fff}
.pickdialog{width:min(92%,560px);max-height:80vh;max-height:80dvh;overflow:auto;padding:22px;border-radius:16px}
.pickdialog>strong{display:block;font-size:20px;margin-bottom:10px}
.pickdialog .pickgroup{margin:14px 0 6px;font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.pickdialog .pickgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.pickdialog .pickoption{min-height:60px;padding:8px 10px;font-size:17px;font-weight:600;color:var(--ink);background:#fff;border:1px solid var(--line);border-radius:10px;text-align:center}
.pickdialog .pickoption.selected{background:var(--purple);border-color:var(--purple);color:#fff}
.pickdialog #pickCancel{margin-top:16px;width:100%;min-height:52px;font-size:16px;font-weight:600;border-radius:10px}
@media (orientation:portrait){
  .kiosk-page .pickbutton{min-height:54px;font-size:18px}
  .kiosk-page .segmented button{min-height:54px}
}
@media (orientation:portrait) and (max-width:700px){
  .kiosk-page .pickbutton{min-height:46px;font-size:16px;padding:8px 36px 8px 10px}
  .kiosk-page .kiosklang .pickbutton{width:120px;min-height:44px;font-size:15px}
  .kiosk-page .segmented{gap:6px}
  .kiosk-page .segmented button{min-height:46px;font-size:15px}
  .kiosk-page .fieldlabel{font-size:14px}
}

.pickdialog .pickgrid.regions{grid-template-columns:repeat(3,minmax(0,1fr))}
.kiosk-page .segmented.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.pickdialog .pickgrid.one{grid-template-columns:minmax(0,1fr)}

/* "Use for rest of day" switch next to the Radiologist heading. */
.kiosk-page .daytoggle{position:relative;display:inline-flex;align-items:center;gap:8px;margin:0;cursor:pointer;font-size:13px;font-weight:600;color:#625b76;user-select:none;-webkit-user-select:none}
.kiosk-page .daytoggle input{position:absolute;opacity:0;width:1px;height:1px;min-height:0;margin:0;padding:0;pointer-events:none}
.kiosk-page .daytoggle .switch{position:relative;flex:0 0 auto;width:42px;height:24px;border-radius:12px;background:#cfc9dd;transition:background .15s}
.kiosk-page .daytoggle .switch::before{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 1px 3px #0003;transition:transform .15s}
.kiosk-page .daytoggle input:checked+.switch{background:var(--purple)}
.kiosk-page .daytoggle input:checked+.switch::before{transform:translateX(18px)}
.kiosk-page .daytoggle input:checked~.switchtext{color:var(--purple)}
.kiosk-page .daytoggle input:focus-visible+.switch{outline:3px solid #ae8ae0;outline-offset:2px}
@media (orientation:portrait) and (max-width:700px){
  .kiosk-page .daytoggle{font-size:12px;gap:6px}
}
.pickdialog .pickgrid.dense{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.pickdialog .pickgrid.dense .pickoption{min-height:52px;font-size:16px;padding:6px}

/* Sub-choice rows (bursa type, joint, pulley, small joint): wrap onto as many lines as the column needs. */
.kiosk-page .segmented.flow{grid-template-columns:repeat(auto-fit,minmax(84px,1fr))}
.kiosk-page .segmented.flow button{font-size:13px;padding:6px 2px;letter-spacing:-.1px}
.kiosk-page #siteSaved{margin:0;font-size:13px;color:var(--purple);font-weight:600}

/* Selected radiologist / pain score: white text on the purple. The kiosk's
   own .choice colour rules are more specific than the generic selected rule,
   so state it here with enough specificity (and for the inner text too). */
.kiosk-page .choicegrid .choice:has(input:checked),
.kiosk-page .choicegrid .choice:has(input:checked) .choicetext{color:#fff}

/* Patient follow-up page */
#patient .clinicphone{margin:22px 0 0;padding-top:14px;border-top:1px solid var(--line);text-align:center;color:var(--muted);font-size:15px}
#patient .clinicphone a{color:var(--purple);font-weight:650;text-decoration:none;white-space:nowrap}
#patient .reviewinvite{margin-top:20px;text-align:center}
#patient .reviewinvite .button{display:block;text-align:center;text-decoration:none}
#patient .reviewsmall{margin:12px 0 0;text-align:center;font-size:12.5px;color:var(--muted)}
#patient .reviewsmall a{color:var(--muted);text-decoration:underline}
/* Pain slider */
#patient .painslider{margin:6px 0 2px;touch-action:pan-y;-webkit-user-select:none;user-select:none;outline:none}
#patient .painvalue{text-align:center;min-height:52px;font-size:36px;font-weight:700;color:var(--purple);line-height:52px}
#patient .painprompt{font-size:16px;font-weight:600;color:var(--muted)}
#patient .painarea{position:relative;height:84px;margin:0 24px;cursor:pointer;touch-action:pan-y}
#patient .paintrack{position:absolute;top:18px;inset-inline:0;height:10px;border-radius:5px;background:#e0dbec}
#patient .painfill{position:absolute;top:0;bottom:0;inset-inline-start:0;width:0;border-radius:5px;background:var(--purple)}
#patient .paintick{position:absolute;top:56px;transform:translateX(-50%);font-size:13px;font-weight:600;color:var(--muted)}
#patient[dir=rtl] .paintick{transform:translateX(50%)}
#patient .paintick.on{color:var(--purple)}
#patient .painthumb{position:absolute;top:-4px;width:46px;height:46px;margin-inline-start:-23px;border-radius:50%;background:var(--purple);border:5px solid #fff;box-shadow:0 2px 8px #24213e55;opacity:0;transition:transform .12s,opacity .12s;pointer-events:none}
#patient .painthumb.set{opacity:1}
#patient .painthumb.drag{transform:scale(1.15)}
#patient .painslider:focus-visible .painarea{outline:3px solid #ae8ae0;outline-offset:6px;border-radius:8px}
#patient .painarea::before{content:"";position:absolute;inset:-6px -24px}

/* Patient page on phones: 16px+ fields (iOS zooms into anything smaller),
   a compact first screen that fits without scrolling, and DOB boxes. */
#patient input,#patient select,#patient textarea{font-size:16px}
.dobrow{grid-template-columns:1fr 1fr 1.5fr}
.dobrow input{margin-top:0;text-align:center;min-height:48px}
#patient .error:empty{display:none}
@media (max-width:600px){
  body:has(#patient) header{padding:8px 5%}
  body:has(#patient) header img{width:96px;height:42px}
  #patient{padding-top:10px}
  #patient .patienttop{flex-direction:row;align-items:center;justify-content:space-between;margin-bottom:10px;gap:12px}
  #patient .patienttop .eyebrow{flex:1 1 40%;font-size:11px;line-height:1.3}
  #patient .patienttop label{flex:1 1 55%;max-width:none;font-size:12px}
  #patient .patienttop select{min-height:44px;margin-top:2px}
  #patient .card{padding:16px 18px}
  #patient h1{font-size:22px;letter-spacing:-.4px;margin:2px 0 4px}
  #patient .fields{gap:12px;margin-bottom:12px}
  #patient{padding-bottom:10px}
  #patient .step{display:block;margin-bottom:2px}
  #patient #patientContent p{margin:6px 0}
  #patient #patientNote{margin-top:12px;font-size:13px}
}

/* Kiosk date-of-birth boxes */
.kiosk-page .dobrow{margin-top:6px}
.kiosk-page .dobrow input{margin-top:0;text-align:center}
.kiosk-page #dobError{margin:0}

/* ---------- Charts (owner portal + radiologist page) ---------- */
.panels{display:grid;gap:22px;margin-bottom:24px;align-items:start;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);grid-template-areas:"trend split" "outcomes split"}
.panels .panel-trend{grid-area:trend}.panels .panel-split{grid-area:split}.panels .panel-outcomes{grid-area:outcomes}
.panels.two{grid-template-areas:"trend split"}
@media (max-width:960px){.panels,.panels.two{grid-template-columns:minmax(0,1fr);grid-template-areas:"trend" "split" "outcomes"}}
.panels .card{min-width:0}
.vizsvg{display:block;width:100%;height:auto}
.vizfoot{margin:10px 0 0;font-size:12.5px;color:var(--muted)}
.vizempty{margin:18px 0;color:var(--muted)}
.vizdata{margin-top:12px;font-size:13px;color:var(--muted)}
.vizdata summary{cursor:pointer;font-weight:600;color:var(--purple)}
.vizdata table{width:100%;border-collapse:collapse;margin-top:8px}
.vizdata th,.vizdata td{text-align:left;padding:5px 6px;border-bottom:1px solid var(--line)}
.vizdata td:not(:first-child),.vizdata th:not(:first-child){text-align:right}
.splitswitch{margin:0 0 14px;width:100%}
.splitswitch button{flex:1;min-height:42px;font-weight:600}
.splitwrap{display:flex;flex-direction:column;align-items:center;gap:12px}
.donut{width:190px;max-width:100%}
.donut .slice{cursor:pointer;transition:opacity .12s}
.donut .slice:hover{opacity:.85}
.donut .slice:focus-visible{outline:3px solid #ae8ae0;outline-offset:2px}
.splitlegend{width:100%;display:flex;flex-direction:column;gap:2px}
.splitrow{display:grid;grid-template-columns:14px minmax(0,1fr) auto 44px;align-items:center;gap:10px;width:100%;padding:5px 10px;border:0;border-radius:8px;background:transparent;text-align:left;font-weight:400;font-size:14px;color:var(--ink);min-height:36px}
.splitrow:hover:not(:disabled){background:var(--pale)}
.splitrow[aria-pressed="true"]{background:var(--pale);font-weight:650}
.splitrow:disabled{opacity:.45;cursor:default}
.splitrow .swatch{width:12px;height:12px;border-radius:3px}
.splitrow .splitname{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.splitrow .splitcount{font-weight:650}
.splitrow .splitpct{text-align:right;color:var(--muted);font-size:13px}
.splithint{min-height:22px;text-align:center}
.linkbutton{border:0;background:transparent;padding:0;min-height:0;color:var(--purple);font-weight:650;text-decoration:underline;cursor:pointer;font-size:13px}

/* ---------- Patient list on the radiologist page: room at the edges ---------- */
#myPatients{max-height:560px;overflow-y:auto;border:1px solid var(--line);border-radius:12px;background:#fff}
.patientrow{padding:16px 20px;gap:16px}
.patientrow:last-child{border-bottom:0}
.patientrow:hover{background:var(--pale)}
.patientinitial{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;padding:0;border-radius:50%}
.patientinfo{min-width:0}
.patientinfo strong,.patientinfo span,.patientinfo small{overflow-wrap:anywhere}
.patientresult{flex:0 0 auto;min-width:76px;white-space:nowrap}
.patientresult .badge{display:inline-block}
@media (max-width:650px){
  .patientrow{padding:14px 14px;gap:12px}
  .patientinitial{display:none}
  .patientresult{min-width:64px}
}

/* Radiologist filters in one tidy row */
.radfilters{margin:14px 0 6px}
.radfilters label{flex:1 1 200px}

/* Five stat tiles (adds "Pain at least halved") */
.stats{grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
@media (max-width:650px){.stats{grid-template-columns:1fr 1fr}}

/* ---------- Dashboard grid (owner + radiologist): uses the full width ---------- */
.dash{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:22px;margin-bottom:24px;align-items:stretch}
.dash>.card{min-width:0}
.dash .span-5{grid-column:span 5}.dash .span-6{grid-column:span 6}.dash .span-7{grid-column:span 7}.dash .span-12{grid-column:span 12}
@media (max-width:1100px){.dash .span-5,.dash .span-6,.dash .span-7{grid-column:span 12}}
.radmain{max-width:1440px}
.stats{grid-template-columns:repeat(5,minmax(0,1fr))}
@media (max-width:1100px){.stats{grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}}
@media (max-width:650px){.stats{grid-template-columns:1fr 1fr}}
.countbadge{min-width:28px;text-align:center;padding:2px 10px;border-radius:999px;background:var(--pale);color:var(--purple);font-weight:700;font-size:13px}
.countbadge:empty{display:none}
.comparecontrols{display:flex;gap:10px;align-items:center;flex-wrap:wrap;justify-content:flex-end}
.comparecontrols .switch button{min-height:38px;padding:6px 12px;font-size:14px}
.comparecontrols select{min-height:42px;width:auto}
/* comparison bars */
.cmplist{display:flex;flex-direction:column;gap:10px;max-height:380px;overflow-y:auto;padding-right:4px}
.cmprow{display:grid;grid-template-columns:minmax(110px,170px) minmax(0,1fr) 64px 52px;gap:12px;align-items:center;font-size:14px}
.cmplabel{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cmptrack{height:12px;border-radius:6px;background:#f1eff5;display:block;overflow:hidden}
.cmpbar{display:block;height:100%;border-radius:6px;background:var(--purple)}
.cmpvalue{font-weight:700;text-align:right}
.cmpn{color:var(--muted);font-size:12px}
.cmprow.small{opacity:.55}
/* needs attention / chase lists */
.attnlist{list-style:none;margin:0;padding:0;max-height:380px;overflow-y:auto;border:1px solid var(--line);border-radius:12px}
.attnitem{display:flex;gap:14px;justify-content:space-between;align-items:flex-start;padding:14px 18px;border-bottom:1px solid var(--line)}
.attnitem:last-child{border-bottom:0}
.attnitem p{margin:4px 0 0}
.attnmeta{color:var(--muted);font-size:13px}
.attnwhy{font-size:14px}
.attncomment{font-size:14px;color:var(--ink);font-style:italic;border-left:3px solid var(--line);padding-left:10px}
.smallbtn{flex:0 0 auto;min-height:36px;padding:6px 14px;font-size:13px;font-weight:600}
.chips{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}
.chip{padding:3px 12px;border-radius:999px;font-size:12.5px;font-weight:650;background:var(--pale);color:var(--purple)}
.chip.failed{background:#fbe9e7;color:#a63636}.chip.nophone{background:#fdf1dc;color:#8a5a00}.chip.noreply{background:#f3efe6;color:#6b5a2c}
.vizlegend{display:flex;gap:18px;flex-wrap:wrap;margin:8px 0 0;font-size:13px;color:var(--muted)}
.vizlegend .key{display:inline-block;width:18px;height:0;border-top:3px solid var(--purple);vertical-align:middle;margin-right:6px}
.vizlegend .key.dashed{border-top-style:dashed}
.bytype table{width:100%}
.bytype .lowdata td{color:var(--muted)}

/* ---------- Staff header: bigger logo, clear navigation buttons on the left, account at the far right ---------- */
.staffpage header{display:flex;align-items:center;justify-content:flex-start;flex-wrap:wrap;gap:12px 30px;padding:14px 4%}
.staffpage header img{width:210px;height:92px;object-fit:contain;object-position:left center;flex:0 0 auto}
.staffpage .portalnav{display:flex;gap:10px;flex-wrap:wrap;margin-right:auto}
.staffpage .portalnav a{padding:12px 24px;border-radius:12px;font-size:16px;font-weight:650;color:var(--purple);background:#fff;border:1.5px solid #d9d2ea;box-shadow:0 1px 2px #20163010;transition:background .12s,border-color .12s,box-shadow .12s}
.staffpage .portalnav a:hover{background:var(--pale);border-color:var(--purple)}
.staffpage .portalnav a.selected{background:var(--purple);border-color:var(--purple);color:#fff;box-shadow:0 4px 12px #7564a855}
.staffpage .portalnav a:focus-visible{outline:3px solid #ae8ae0;outline-offset:2px}
.staffpage .account{margin-left:auto;display:flex;align-items:center;gap:12px}
.staffpage .account #accountInitials{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;width:42px;height:42px;border-radius:50%;background:var(--pale);color:var(--purple);font-size:15px;font-weight:700}
.staffpage .account>span:last-child{text-align:left}
.staffpage .account #accountName{display:block;font-size:15px;font-weight:650;color:var(--ink)}
.staffpage .account small{display:block;margin-top:1px;font-size:12.5px;color:var(--muted);font-weight:400}
@media (max-width:900px){
  .staffpage header{padding:12px 5%;gap:10px 16px}
  .staffpage header img{width:150px;height:66px}
  .staffpage .portalnav{order:3;width:100%;margin-right:0}
  .staffpage .portalnav a{flex:1;text-align:center;padding:10px 12px;font-size:15px}
}

/* ---------- "My patient responses": baseline / 6 weeks / 3 months columns ---------- */
.patientlisthead,.patientrow{display:grid;grid-template-columns:42px minmax(0,1fr) repeat(3,minmax(88px,110px));gap:16px;align-items:center}
.patientlisthead{position:sticky;top:0;z-index:1;padding:10px 20px;background:#faf9fc;border-bottom:1px solid var(--line);font-size:12px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
.patientlisthead span:nth-child(n+3){text-align:center}
.patientrow .scorecell{text-align:center;display:flex;flex-direction:column;align-items:center;gap:2px;min-width:0}
.patientrow .scorecell strong{font-size:22px;line-height:1.1}
.patientrow .scorecell strong small{font-size:12px;font-weight:400;color:var(--muted)}
.patientrow .scorecell .duedate{font-size:13px;color:var(--muted)}
.patientrow .delta{font-size:12px;font-weight:650;color:var(--muted)}
.patientrow .delta.better{color:#2f7d4f}
.patientrow .delta.worse{color:#a63636}
@media (max-width:760px){
  .patientlisthead,.patientrow{grid-template-columns:minmax(0,1fr) repeat(3,minmax(54px,64px));gap:8px}
  .patientlisthead span:first-child{display:none}
  .patientlisthead{padding:8px 12px;font-size:10.5px;letter-spacing:.02em}
  .patientlisthead span:nth-child(2){text-align:left}
  .patientrow .patientinitial{display:none}
  .patientrow .scorecell strong{font-size:18px}
  .patientrow .scorecell strong small{display:none}
}

.patientlisthead b{font-weight:inherit}
.patientlisthead .short{display:none}
@media (max-width:760px){
  .patientlisthead,.patientrow{grid-template-columns:minmax(0,1fr) repeat(3,48px);gap:6px}
  .patientlisthead .long{display:none}
  .patientlisthead .short{display:inline}
  .patientrow{padding:12px 12px}
  .patientrow .patientinfo,.patientrow .patientinfo strong,.patientrow .patientinfo span,.patientrow .patientinfo small{overflow-wrap:break-word;word-break:normal}
  .patientrow .patientinfo strong{font-size:15px}
  .patientrow .scorecell .badge{padding:2px 6px;font-size:10px}
  .patientrow .scorecell .duedate{font-size:11px}
}

/* needs-attention: GP line and the remove (trash) button */
.attngp{font-size:13px;color:var(--muted)}
.attngp strong{color:var(--ink);font-weight:650}
.trashbtn{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;min-height:0;padding:0;border:1px solid var(--line);border-radius:10px;background:#fff;color:var(--muted);cursor:pointer}
.trashbtn:hover{color:#a63636;border-color:#e6b9b9;background:#fdf3f3}
.trashbtn:focus-visible{outline:3px solid #ae8ae0;outline-offset:2px}

/* Header lines up with the page content: both use the same maximum width. */
:root{--page-max:1600px}
.staffpage main{max-width:var(--page-max);padding-inline:calc(min(100%, var(--page-max)) * 0.04)}
@media (min-width:901px){
  .staffpage header{padding-inline:calc((100% - min(100%, var(--page-max))) / 2 + min(100%, var(--page-max)) * 0.04)}
}

/* Phone only (<=480px wide; the clinic tablet is ~600px wide, so it is untouched):
   kiosk header on two tidy rows instead of squeezing everything onto one. */
@media (max-width:480px){
  .kiosk-page header{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"logo out" "acct lang";row-gap:8px;column-gap:10px;padding:8px 4%}
  .kiosk-page header img{width:110px;height:48px}
  .kiosk-page .headerleft{grid-area:logo}
  .kiosk-page .headercenter{grid-area:acct;justify-self:start;min-width:0}
  .kiosk-page .headerright{display:contents}
  .kiosk-page #logoutButton{grid-area:out;justify-self:end;padding:8px 14px;font-size:15px}
  .kiosk-page #kioskLangRow{grid-area:lang;justify-self:end}
  .kiosk-page header .account>span>span,.kiosk-page header .account small{text-align:left}
  /* Laterality: 2x2 so "Bilateral" is not cut off on a narrow screen */
  .kiosk-page #lateralityChoices{grid-template-columns:repeat(2,minmax(0,1fr))}
}