:root{--ink:#241e1b;--muted:#706760;--red:#b83027;--red-dark:#97271f;--cream:#faf8f5;--line:#e7e1d9;--serif:'Cormorant Garamond',Georgia,serif;--green:#356553}
*{box-sizing:border-box}body{margin:0;color:var(--ink);background:var(--cream);font:14px/1.55 'DM Sans',system-ui,sans-serif}button,input,textarea{font:inherit}button{cursor:pointer}button:disabled{cursor:not-allowed;opacity:.48}button,a,input,textarea,summary{touch-action:manipulation}button{color:inherit}a{color:var(--red-dark)}[hidden]{display:none!important}:focus-visible{outline:3px solid #3578a7;outline-offset:3px}h1,h2,h3,h4,p{margin:0}h1{font:600 clamp(34px,3.5vw,50px)/1.08 var(--serif);letter-spacing:-1.1px}h1 em{color:var(--red);font-weight:500}h2{font-size:16px;letter-spacing:-.25px}h3{font-size:14px}h4{font-size:13px}small{font-size:12px}.muted,.helper,.subtitle{color:var(--muted)}.helper{font-size:12px;line-height:1.65;margin:12px 0 0}.topbar{min-height:88px;padding:18px max(28px,calc((100% - 1376px)/2));background:#fff;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:20px}.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--ink)}.brand>span{font:700 28px/1 var(--serif);letter-spacing:-.6px}.brand img{object-fit:contain}.brand small{display:block;font:600 8px/1.5 'DM Sans',sans-serif;letter-spacing:1.6px;margin-top:7px;color:var(--muted)}nav{display:flex;gap:10px;flex-wrap:wrap}nav button,.test-notice button,.text-button{background:none;border:0;font-size:12px;font-weight:600;min-height:40px;padding:8px 12px}nav button:hover,.text-button:hover{text-decoration:underline}#accountButton{border:1px solid var(--line);border-radius:8px;padding:8px 16px;background:var(--cream)}main{max-width:1432px;margin:auto;padding:36px 28px 0}.title-row{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:26px}.eyebrow{font-size:9px;letter-spacing:2px;font-weight:700;color:var(--muted);margin-bottom:10px}.subtitle{font-size:13px;margin-top:12px}.button{display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:42px;padding:11px 17px;border-radius:8px;font-size:12px;font-weight:600;border:1px solid transparent;white-space:normal}.primary{background:var(--red);color:#fff}.primary:hover:not(:disabled){background:var(--red-dark)}.secondary{background:#fff;border-color:var(--line)}.secondary:hover:not(:disabled){background:#f3eee8}.test-notice{display:flex;gap:16px;align-items:center;padding:10px 16px;border:1px solid #e7d6c6;border-radius:8px;background:#fffaf3;font-size:11px;color:#6c5341}.test-label{font-size:9px;letter-spacing:1px;font-weight:700;flex-shrink:0}.test-notice button{margin-left:auto;color:#765441;white-space:nowrap}.patient-strip{display:grid;grid-template-columns:1.1fr 1fr 1fr auto;gap:22px;align-items:end;margin:24px 0;padding:0 2px}.field{display:flex;flex-direction:column;gap:8px;min-width:0}.field>span{font-size:12px;font-weight:600}.field small{font-weight:400;color:var(--muted);margin-left:7px;font-size:11px}input:not([type=checkbox]),textarea{width:100%;border:1px solid #ddd5cc;border-radius:7px;background:#fff;color:var(--ink);padding:11px 12px;min-height:42px;font-size:13px;line-height:1.6}textarea{resize:vertical;min-height:106px}input[type=checkbox]{accent-color:var(--red);width:17px;height:17px;flex-shrink:0;margin:0}.save-status{display:flex;flex-direction:column;align-items:flex-end;gap:3px;min-width:138px}.save-status>span{font-size:11px;color:var(--green)}.save-status button{min-height:30px;padding:4px 0;color:var(--red)}.workspace-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:24px;align-items:start}#captureSide{display:flex;flex-direction:column;gap:20px;min-width:0}.surface{background:#fff;border:1px solid var(--line);border-radius:13px;padding:24px;min-width:0}.section-label{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:20px}.number{font-size:10px;color:#887d72;letter-spacing:.5px;background:#f6f2ed;min-width:26px;height:26px;border-radius:50%;display:grid;place-items:center}.section-label>.muted{font-size:10px;margin-left:auto}.service-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}.service{display:flex;align-items:center;gap:8px;min-height:47px;padding:11px 9px;border:1px solid var(--line);border-radius:7px;cursor:pointer;font-size:11px;line-height:1.4}.service.selected{border-color:#dba399;background:#fcf3f0;color:#9c3227}.services .helper{font-size:10px;margin-top:14px}.record-modes{display:grid;grid-template-columns:1fr 1fr;background:#f6f3ef;border-radius:9px;padding:4px;gap:4px}.record-modes button{border:1px solid transparent;background:none;text-align:left;padding:12px;font-size:12px;border-radius:6px;font-weight:600}.record-modes small{display:block;font-size:10px;font-weight:400;color:var(--muted);margin-top:3px}.record-modes [aria-pressed=true]{background:#fff;border-color:#e8e0d8;box-shadow:0 2px 3px #32201506}.recorder{padding:26px 0 18px;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:14px}.record-button{display:flex;align-items:center;justify-content:center;gap:12px;border:0;border-radius:11px;background:var(--red);color:#fff;min-height:70px;padding:16px 24px;font-size:16px;font-weight:600;box-shadow:0 4px 12px #b830271a}.record-button:hover{background:var(--red-dark)}.record-button svg{width:27px;height:27px}.record-button.recording{background:#7b241f}.stop-square{width:18px;height:18px;border-radius:3px;background:#fff}.record-meta{display:flex;flex-direction:column;gap:6px;max-width:155px}.record-meta strong{font-size:10px;font-weight:500;color:var(--muted)}#recordTime{font-size:24px;font-variant-numeric:tabular-nums;font-family:var(--serif);line-height:1}.recorder .helper{flex-basis:100%;text-align:center;font-size:10px;max-width:390px;margin:0}.permissions{background:#faf8f5;border-radius:8px;padding:12px 14px;margin-bottom:22px;border:1px solid var(--line)}summary{cursor:pointer;font-weight:600;font-size:12px;padding:4px 0;min-height:28px}summary span{display:block;font-weight:400;font-size:10px;color:var(--muted);margin:3px 0 0 15px}.check{display:flex;align-items:flex-start;gap:10px;font-size:11px;margin-top:14px}.check input{margin-top:2px}.permissions .helper{font-size:10px}.permissions .text-button{padding:0;min-height:22px;font-size:10px}.notes textarea{min-height:166px;background:#fefdfb}.findings{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:15px 0;margin:20px 0}.finding-block{margin-top:18px}.finding-block .helper{margin:8px 0}.ear-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:16px}.ear-grid h4{margin-bottom:10px}.ear-grid .field{margin-top:12px}.plan{margin-top:20px}.generate{width:100%;margin-top:22px;min-height:48px}.generate span{margin-left:auto}.review{position:sticky;top:24px;padding:24px;min-height:610px}.draft-label{margin-left:auto;color:#746557;background:#f6f2ed;font-size:9px;padding:4px 8px;border-radius:5px}.review-empty{text-align:center;padding:62px 10px 46px}.paper-mark{width:64px;height:78px;border:1px solid #ddcfc3;border-radius:7px;margin:0 auto 26px;padding:22px 12px;background:#fbf8f4;transform:rotate(-4deg)}.paper-mark span{display:block;background:#d6c7b8;height:2px;margin-bottom:9px}.paper-mark span:last-child{width:60%}.review-empty h3{font:600 29px/1.2 var(--serif);margin-bottom:12px}.review-empty p{color:var(--muted);font-size:12px;line-height:1.8}.review-empty ul{display:grid;grid-template-columns:1fr 1fr;gap:13px 24px;text-align:left;list-style:none;padding:24px 0;margin:28px auto;max-width:330px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);font-size:11px}.review-empty li span{color:var(--green);margin-right:7px}.review-empty small{font-size:10px;color:#796f65}.document-tabs{display:grid;grid-template-columns:1fr 1fr;gap:6px;border-bottom:1px solid var(--line);padding-bottom:16px}.document-tabs button{border:1px solid var(--line);background:#fff;text-align:left;padding:10px;font-size:11px;border-radius:6px}.document-tabs [aria-selected=true]{background:#faf0ec;border-color:#d5a59b;color:#992d23}.document-tabs small{display:block;font-size:9px;margin-top:4px;color:var(--muted)}.document-status{display:flex;justify-content:space-between;align-items:center;gap:12px;margin:18px 0;font-size:10px;color:var(--muted)}#documentEditor{min-height:420px;line-height:1.85;font-size:13px;padding:18px;background:#fffefa}.review-checks,.source-notes{margin-top:16px;border-top:1px solid var(--line);padding-top:10px}.review-checks p,.review-checks li{font-size:11px;margin-top:10px}.review-checks ul{padding-left:20px}.source-notes pre{font-family:inherit;font-size:12px;white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.8}.export-row,.finish-row{display:flex;align-items:center;gap:10px;margin-top:18px;flex-wrap:wrap}.finish-row{border-top:1px solid var(--line);padding-top:18px;justify-content:space-between}.finish-row>span{font-size:11px;color:var(--muted)}.error{color:#972c24;font-size:12px;overflow-wrap:anywhere;margin:10px 0}.error:empty{display:none}.clip-heading{margin:14px 0 10px}.clip-heading small{display:block;color:var(--muted);font-weight:400;font-size:10px}.clip{border:1px solid var(--line);border-radius:8px;padding:12px;margin:10px 0}.clip-title{display:flex;gap:8px;justify-content:space-between;font-size:10px;flex-wrap:wrap}.clip-title span{color:var(--muted)}audio{width:100%;height:36px;margin-top:10px}.clip .text-button{font-size:10px;padding:6px 0;min-height:30px}.transcript{border-bottom:1px solid var(--line);padding:10px 0;margin-bottom:16px}.transcript textarea{min-height:140px}.transcript .field{margin:12px 0}footer{display:flex;justify-content:space-between;color:#887f75;font-size:10px;padding:26px 0;gap:16px}dialog{border:1px solid var(--line);border-radius:14px;padding:28px;max-width:560px;width:calc(100% - 32px);max-height:85dvh;background:#fff;color:var(--ink);box-shadow:0 24px 100px #34271930}dialog::backdrop{background:#29201955;backdrop-filter:blur(3px)}.panel-head{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:22px}.panel-head h2{font:600 30px/1 var(--serif)}dialog p{font-size:13px;margin:14px 0;color:var(--muted)}dialog h3{margin-top:24px}dialog .field{margin:18px 0}.saved-row{display:flex;flex-direction:column;gap:6px;text-align:left;width:100%;border:1px solid var(--line);padding:15px;border-radius:8px;background:#faf8f5;margin-top:10px}.saved-row span{font-size:11px;color:var(--muted)}#toast{position:fixed;bottom:24px;left:50%;transform:translate(-50%,20px);z-index:100;max-width:calc(100% - 32px);width:max-content;background:#2f2823;color:#fff;border-radius:9px;padding:12px 20px;font-size:12px;opacity:0;pointer-events:none;transition:opacity .15s,transform .15s}#toast.show{opacity:1;transform:translate(-50%,0)}.skip-link{position:absolute;top:-80px;left:16px;z-index:100;background:white;padding:15px}.skip-link:focus{top:10px}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}#printDocument{display:none}
@media(min-width:1600px){main{padding-top:44px}.surface{padding:28px}.service{font-size:12px}}
@media(max-width:1100px){.service-grid{grid-template-columns:1fr 1fr}.surface{padding:20px}.workspace-grid{gap:18px}.review-empty ul{grid-template-columns:1fr;max-width:210px}.record-meta{max-width:130px}.record-button{padding:15px 20px}.patient-strip{gap:15px}.test-notice{flex-wrap:wrap;gap:6px 12px}}
@media(max-width:820px){.workspace-grid{grid-template-columns:1fr}.review{position:static;min-height:0}.review-empty{padding:35px 10px}.review-empty ul{grid-template-columns:1fr 1fr;max-width:330px}.patient-strip{grid-template-columns:1fr 1fr}.save-status{align-items:flex-start}.topbar{padding:16px 20px;align-items:flex-start}.topbar nav{gap:2px;justify-content:flex-end}nav button{font-size:11px;padding:8px}.title-row{align-items:flex-start}.title-row .button{font-size:11px}.service-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:560px){main{padding:26px 16px 0}.topbar{flex-direction:column;gap:14px;padding:18px 16px 12px}.topbar nav{width:100%;justify-content:space-between}.brand>span{font-size:27px}.title-row{flex-direction:column;gap:16px}.title-row .button{align-self:flex-start;min-height:38px}.test-notice{padding:12px;font-size:11px}.test-notice button{padding:0;min-height:32px;margin-left:0}.patient-strip{gap:14px}.patient-strip .field:first-child{grid-column:1/-1}.patient-strip .save-status{grid-column:1/-1;flex-direction:row;align-items:center;justify-content:space-between}.surface{padding:18px}.service-grid{grid-template-columns:1fr 1fr}.service{font-size:12px;min-height:50px}.section-label>.muted{flex-basis:100%;margin:0 0 0 36px}.field small{display:block;margin:4px 0 0}input:not([type=checkbox]),textarea{font-size:16px}.record-modes button{padding:10px;font-size:11px}.record-button{min-height:68px;width:100%}.record-meta{max-width:none;flex-direction:row;align-items:center;gap:16px}.recorder{padding-top:20px}.draft-label{margin-left:36px}.review-empty ul{grid-template-columns:1fr;max-width:210px}.ear-grid{gap:12px}.document-status{flex-wrap:wrap}.document-status .button{min-height:40px}.finish-row{align-items:flex-start;flex-direction:column}.finish-row button{width:100%}footer{flex-direction:column;gap:4px}dialog{padding:22px}.panel-head h2{font-size:26px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}
/* Account shortcuts stay balanced without changing their role-based visibility. */
.account-card{display:grid;gap:16px;min-width:0}
#panel:has(.account-card){max-width:760px;padding:28px}
#panel:has(.account-card) .panel-head{margin-bottom:20px}
.account-identity{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;overflow-wrap:anywhere}
.account-identity>div{display:grid;gap:3px;min-width:0}
.account-identity strong{font-size:17px;color:var(--ink)}
.account-identity>div>span{font-size:12px;color:var(--muted)}
.account-identity .account-role{font-size:11px;color:var(--muted);background:var(--cream);border:1px solid var(--line);border-radius:20px;padding:5px 10px;max-width:45%;flex-shrink:0}
.account-card .account-trial{margin:0;padding:16px 18px;border-radius:14px}
.account-trial:empty{display:none}
.account-trial>strong{font-size:14px}
.account-card .account-trial p{margin:7px 0;font-size:12px;line-height:1.6}
.account-trial>a{display:inline-block;font-size:12px;margin:4px 14px 0 0}
.account-trial .account-view-plans{font-weight:700}
.account-usage-stats{display:grid;grid-template-columns:1fr 1fr 1.3fr;gap:14px;margin:12px 0}
.account-usage-stats>div{min-width:0}
.account-usage-stats>div+div{border-left:1px solid #c7dfd8;padding-left:14px}
.account-usage-stats dt{font-size:11px;color:var(--muted);margin-bottom:4px}
.account-usage-stats dd{margin:0;font-size:22px;font-weight:600;line-height:1.35}
.account-usage-stats dd small{font-size:12px;font-weight:400;color:var(--muted)}
.account-usage-stats .account-end-date{font-size:14px}
.account-end-date small{display:block;margin-top:3px}
.account-card .account-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.account-actions .button{width:100%;min-height:58px;justify-content:flex-start;text-align:left;text-decoration:none;color:var(--ink);padding:14px;font-size:13px;line-height:1.4}
.account-actions .button:hover{text-decoration:none}
.account-actions svg{width:22px;height:22px;flex-shrink:0;color:var(--green)}
.account-card .account-security-status{display:block;margin:4px 0 0;font-size:11px;font-weight:400;line-height:1.45;color:var(--green)}
.account-privacy{font-size:12px;color:var(--muted)}
.account-privacy summary{cursor:pointer;min-height:32px;align-content:center}
.account-privacy p{margin:8px 0 0;font-size:12px}
.account-card .account-footer{display:flex;justify-content:flex-end;align-items:center;border-top:1px solid var(--line);padding:12px 0 0;margin:0;background:none}
.account-footer .button{font-size:12px}
@media(max-width:560px){
  .account-card .account-actions{grid-template-columns:1fr;gap:9px}
  #panel:has(.account-card){padding:20px}
  .account-identity{flex-direction:column;gap:8px}
  .account-identity .account-role{max-width:100%}
  .account-usage-stats{grid-template-columns:1fr 1fr;gap:12px}
  .account-usage-stats>div:last-child{grid-column:1/-1;border-left:0;border-top:1px solid #c7dfd8;padding:10px 0 0}
  .account-actions .button{min-height:52px}
  .account-card .account-trial{padding:15px}
  .account-card .account-footer .button{width:100%}
}
/* Service colour identities are shared by circles, badges and finding panels.
   Shared areas inherit a single service theme, or neutral stone for mixed visits. */
#workspace {
  --service-color: #655446;
  --service-tint: #f2ede7;
  --service-line: #d5c7bb;
}
#workspace[data-workspace-theme="wax-removal"], [data-service-theme="wax-removal"] {
  --service-color: #28645a;
  --service-tint: #e3f1ed;
  --service-line: #aacdc3;
}
#workspace[data-workspace-theme="hearing-assessment"], [data-service-theme="hearing-assessment"] {
  --service-color: #3b5f91;
  --service-tint: #e6edf9;
  --service-line: #b1c3df;
}
#workspace[data-workspace-theme="tinnitus"], [data-service-theme="tinnitus"] {
  --service-color: #765594;
  --service-tint: #eee7f6;
  --service-line: #cdbadd;
}
#workspace[data-workspace-theme="hearing-aid"], [data-service-theme="hearing-aid"] {
  --service-color: #856123;
  --service-tint: #f8edd8;
  --service-line: #dfc899;
}
#workspace[data-workspace-theme="follow-up"], [data-service-theme="follow-up"] {
  --service-color: #5d6b3e;
  --service-tint: #e9eedf;
  --service-line: #c3ceac;
}
#workspace[data-workspace-theme="free-form"], [data-service-theme="free-form"] {
  --service-color: #75614f;
  --service-tint: #eee9e3;
  --service-line: #d3c5b8;
}
.services { margin-bottom: 24px; }
.service-family {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 16px;
  max-width: 1100px;
  margin: 20px auto 12px;
}
.service-choice {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 0;
  padding: 8px 4px;
  cursor: pointer;
  text-align: center;
}
.service-choice .service-toggle {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
  z-index: 1;
}
.service-circle {
  position: relative;
  display: grid;
  place-items: center;
  width: 78px;
  height: 78px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--service-tint);
  color: var(--service-color);
  transition: transform 140ms ease, box-shadow 140ms ease;
}
.service-icon { width: 28px; height: 28px; flex-shrink: 0; }
.service-tick {
  position: absolute;
  right: -2px;
  bottom: -2px;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border: 3px solid #fff;
  border-radius: 50%;
  background: var(--service-color);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  opacity: 0;
}
.service-name { font-size: 12px; font-weight: 600; line-height: 1.4; margin-top: 14px; }
.service-chosen { color: var(--service-color); font-size: 10px; margin-top: 4px; opacity: 0; }
.service-choice:hover .service-circle { transform: translateY(-2px); }
.service-toggle:checked + .service-circle { box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--service-color); }
.service-toggle:checked + .service-circle .service-tick,
.service-toggle:checked ~ .service-chosen { opacity: 1; }
.service-toggle:checked ~ .service-name { color: var(--service-color); }
.service-toggle:focus-visible + .service-circle { outline: 3px solid #1c1917; outline-offset: 9px; }
.service-selection-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px 20px;
  border-top: 1px solid var(--line);
  padding-top: 14px;
}
#serviceSelection { color: var(--muted); font-size: 11px; }
.service-selection-footer .helper { margin: 0; }
.service-context { display: flex; flex-wrap: wrap; gap: 7px; margin: -6px 0 20px; }
.service-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 9px;
  border: 1px solid var(--service-line);
  border-radius: 20px;
  color: var(--service-color);
  background: var(--service-tint);
  font-size: 10px;
  font-weight: 500;
}
.service-chip .service-icon { width: 14px; height: 14px; }
.service-none { color: var(--muted); font-size: 11px; }
.capture > .section-label .number, .review > .section-label .number {
  background: var(--service-tint);
  color: var(--service-color);
}
.capture .record-modes [aria-pressed="true"], .review .document-tabs [aria-selected="true"] {
  color: var(--service-color);
  border-color: var(--service-line);
  background: var(--service-tint);
}
.capture .notes > span, .capture .plan > span { color: var(--service-color); }
.capture .notes textarea, .capture .plan textarea, .review #documentEditor { border-color: var(--service-line); }
.generate, .review .primary { background: var(--service-color); }
.generate:hover:not(:disabled), .review .primary:hover:not(:disabled) { background: var(--service-color); filter: brightness(.9); }
.service-finding {
  border: 1px solid var(--service-line);
  border-left: 3px solid var(--service-color);
  background: var(--service-tint);
  border-radius: 9px;
  padding: 16px;
}
.finding-title { display: flex; align-items: center; gap: 8px; color: var(--service-color); }
.finding-title .service-icon { width: 18px; height: 18px; }
.service-finding input:not([type="checkbox"]), .service-finding textarea { border-color: var(--service-line); }
.service-finding .helper { color: #5b534c; }
@media (max-width: 820px) {
  .service-family { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px 12px; }
  .service-circle { width: 70px; height: 70px; }
}
@media (max-width: 560px) {
  .services { margin-bottom: 18px; }
  .service-family { gap: 12px 8px; margin-top: 18px; }
  .service-circle { width: 62px; height: 62px; }
  .service-icon { width: 25px; height: 25px; }
  .service-name { font-size: 11px; min-height: 31px; }
  .service-chosen { margin-top: 2px; }
  .service-choice { padding: 8px 0; }
  .service-finding { padding: 12px; }
  .service-selection-footer { align-items: flex-start; }
}
@media (prefers-reduced-motion: reduce) { .service-choice:hover .service-circle { transform: none; } }
/* Welcome navigation introduces the app; appointment navigation stays focused. */
#workspace .topbar { position: relative; z-index: 10; flex-direction: row; flex-wrap: nowrap; min-height: 82px; padding: 16px clamp(20px,2.8vw,40px); gap: 24px; }
.topbar .brand { flex-shrink: 0; gap: 10px; min-height: 44px; }
.topbar .brand > span { font-size: 27px; }
.topbar .brand img { width: 24px; height: 34px; }
.topbar .brand small { font-size: 7px; letter-spacing: 1.2px; margin-top: 6px; }
.topbar .header-nav { align-items: center; justify-content: flex-end; flex-wrap: nowrap; gap: 8px; margin-left: auto; width: auto; }
.header-nav > a,.header-nav > button { display: inline-flex; align-items: center; justify-content: center; gap: 5px; min-height: 44px; padding: 8px 10px; font-size: 12px; font-weight: 500; color: var(--ink); text-decoration: none; white-space: nowrap; }
.header-nav > a:hover,.header-nav > button:hover { text-decoration: underline; text-underline-offset: 4px; }
.header-nav > a[aria-current="page"] { color: var(--red-dark); text-decoration: underline; text-underline-offset: 7px; text-decoration-thickness: 2px; }
.header-nav > a[aria-disabled="true"] { opacity: .48; cursor: not-allowed; }
.header-actions { display: flex; align-items: center; flex-shrink: 0; gap: 8px; }
.header-actions #accountButton { min-height: 44px; padding: 8px 18px; background: var(--red); border-color: var(--red); color: #fff; font-size: 12px; font-weight: 600; white-space: nowrap; }
.header-actions #accountButton:hover:not(:disabled) { background: var(--red-dark); border-color: var(--red-dark); }
.header-actions #accountButton.signed-in { background: var(--cream); border-color: var(--line); color: var(--ink); }
.header-actions #accountButton.signed-in:hover { background: #f3eee8; }
#headerMenuButton { display: none; min-width: 44px; min-height: 44px; align-items: center; justify-content: center; gap: 7px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; background: #fff; font-size: 12px; font-weight: 500; }
#headerMenuButton svg { width: 18px; height: 18px; }
#headerMenuButton .menu-cross,#headerMenuButton[aria-expanded="true"] .menu-lines { display: none; }
#headerMenuButton[aria-expanded="true"] .menu-cross { display: block; }
#headerMenuButton:hover:not(:disabled),#headerMenuButton[aria-expanded="true"] { background: var(--cream); }
#workspace:not([data-layout="public"]) .header-public-link { display: none; }
@media(max-width:820px) {
  #workspace .topbar { min-height: 72px; padding: 12px 20px; gap: 12px; }
  .header-actions { margin-left: auto; gap: 6px; }
  .header-actions #accountButton { padding: 8px 14px; }
  #headerMenuButton { display: inline-flex; }
  .topbar .header-nav { position: absolute; top: calc(100% - 2px); right: 20px; width: min(300px,calc(100% - 40px)); max-height: calc(100dvh - 90px); overflow-y: auto; display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 4px; margin: 0; padding: 8px; border: 1px solid var(--line); border-radius: 12px; background: #fff; box-shadow: 0 16px 40px #3427191a; }
  .header-nav > a,.header-nav > button { justify-content: flex-start; padding: 10px 14px; border-radius: 6px; }
  .header-nav > a:hover,.header-nav > button:hover { background: var(--cream); }
  .header-nav > a[aria-current="page"] { background: #faf0ec; text-underline-offset: 4px; }
  .header-nav #historyButton { border-top: 1px solid var(--line); border-radius: 0 0 6px 6px; margin-top: 4px; }
}
@media(max-width:560px) {
  #workspace .topbar { padding: 12px 16px; gap: 10px; }
  .topbar .brand > span { font-size: 25px; }
  .topbar .brand small { display: none; }
  #headerMenuButton > span { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .topbar .header-nav { right: 16px; width: min(300px,calc(100% - 32px)); }
}
@media(max-width:380px) {
  #workspace .topbar { padding: 12px; gap: 8px; }
  .topbar .brand { gap: 7px; }
  .topbar .brand > span { font-size: 22px; }
  .topbar .brand img { width: 20px; height: 28px; }
  .header-actions #accountButton { padding: 8px 12px; }
}
/* The welcome screen is a launcher; appointment stages share the same live state. */
#workspace { min-height: 100svh; display: flex; flex-direction: column; }
#workspace main { max-width: 1120px; width: 100%; margin: 0 auto; padding-top: 24px; flex: 1; }
#workspace[data-view="home"] main { max-width: none; padding: 0; }
.welcome { position: relative; isolation: isolate; overflow: hidden; min-height: max(620px,calc(100svh - 420px)); display: flex; flex-direction: column; }
.welcome-scenery { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; background: radial-gradient(ellipse at 4% 100%,#ecdfd0,transparent 54%),radial-gradient(ellipse at 98% 75%,#f0e7dc,transparent 48%); }
.welcome-scenery span { position: absolute; width: 850px; height: 850px; border: 1px solid #b7a58c45; border-radius: 50%; bottom: -445px; left: -360px; }
.welcome-scenery span:nth-child(2) { width: 690px; height: 690px; bottom: -365px; left: -280px; }
.welcome-scenery span:nth-child(3) { width: 530px; height: 530px; bottom: -285px; left: -200px; }
.welcome-scenery span:nth-child(4) { width: 760px; height: 760px; left: auto; right: -410px; bottom: -410px; }
.welcome-scenery span:nth-child(5) { width: 600px; height: 600px; left: auto; right: -330px; bottom: -330px; }
.welcome-content { width: 100%; padding: clamp(28px,4.2vh,56px) 24px 28px; flex: 1; display: flex; flex-direction: column; justify-content: center; text-align: center; }
.welcome-intro { margin: 0 auto 24px; }
.welcome-intro .eyebrow { letter-spacing: 2.3px; margin-bottom: 14px; }
.welcome-intro h1 { font-size: clamp(40px,4vw,60px); line-height: 1; }
.welcome-intro .subtitle { margin-top: 18px; }
.welcome-family { width: 100%; max-width: 680px; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 20px 56px; margin: 0 auto; }
.welcome-choice { border: 0; background: transparent; font: inherit; color: var(--ink); padding: 8px 4px 0; }
.welcome-choice .service-circle { width: 104px; height: 104px; background: radial-gradient(circle at 30% 22%,color-mix(in srgb,#fff 50%,var(--service-tint)),var(--service-tint) 75%); border: 1px solid color-mix(in srgb,var(--service-color) 16%,transparent); box-shadow: 0 10px 24px #6d4d2815,inset 0 1px 0 #fff; }
.welcome-choice .service-icon { width: 30px; height: 30px; }
.welcome-choice .service-name { font-size: 13px; margin-top: 14px; }
.welcome-choice .service-chosen { min-height: 15px; margin-top: 2px; font-size: 9px; }
.welcome-choice.is-selected .service-circle { box-shadow: 0 0 0 3px var(--cream),0 0 0 5px var(--service-color),0 10px 24px #6d4d2815; }
.welcome-choice.is-selected .service-tick,.welcome-choice.is-selected .service-chosen { opacity: 1; }
.welcome-choice.is-selected .service-name { color: var(--service-color); }
.getting-started { max-width: 1200px; margin: 0 auto; padding: 48px 32px; }
.getting-started-heading h2 { font: 600 clamp(28px,3vw,38px)/1.2 var(--serif); margin: 10px 0; }
.getting-started-heading > p:last-child { color: var(--muted); }
.onboarding-timeline { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); list-style: none; padding: 0; margin: 30px 0; gap: 24px; }
.onboarding-timeline li { position: relative; min-width: 0; }
.onboarding-timeline li:not(:last-child)::after { content: ''; position: absolute; top: 23px; left: 58px; right: -12px; height: 1px; background: var(--line); }
.onboarding-number { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: #e3f1ed; color: #28645a; font-weight: 700; margin-bottom: 16px; }
.onboarding-timeline li:nth-child(2) .onboarding-number { background: #e6edf9; color: #3b5f91; }
.onboarding-timeline li:nth-child(3) .onboarding-number { background: #eee7f6; color: #765594; }
.onboarding-timeline li:nth-child(4) .onboarding-number { background: #fae9df; color: #92502d; }
.onboarding-timeline li:nth-child(5) .onboarding-number { background: #eee8df; color: #715d48; }
.onboarding-timeline h3 { font-size: 16px; margin-bottom: 8px; }
.onboarding-timeline p,.onboarding-note { font-size: 14px; line-height: 1.65; color: var(--muted); }
.onboarding-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 16px 24px; }
.onboarding-actions .information-text-link { margin: 0; }
.onboarding-note { margin-top: 18px; }
.getting-started-guide { padding: 0 0 32px; }
@media(max-width:760px) {
  .getting-started { padding: 32px 24px; }
  .getting-started-guide { padding: 0 0 24px; }
  .onboarding-timeline { grid-template-columns: 1fr; gap: 24px; }
  .onboarding-timeline li { padding-left: 64px; min-height: 52px; }
  .onboarding-number { position: absolute; top: 0; left: 0; margin: 0; }
  .onboarding-timeline li:not(:last-child)::after { top: 54px; bottom: -16px; left: 23px; right: auto; width: 1px; height: auto; }
}
.save-status>span[data-tone="pending"] { color:var(--muted); }
.save-status>span[data-tone="error"] { color:var(--red-dark); }
.management-heading,.management-reference { white-space: pre-wrap; overflow-wrap: anywhere; }
.management-heading { margin-bottom: 24px; }
.management-reference { font-size: 12px; line-height: 1.6; margin-top: 24px; }
.management-table th:first-child { width: 32%; }
.welcome-close { margin-top: 22px; }
.welcome-close > p { font: 600 23px/1.2 var(--serif); color: var(--red-dark); letter-spacing: .5px; }
.welcome-close > span { display: block; font-size: 11px; color: var(--muted); margin-top: 8px; }
#resumeAppointment { display: flex; gap: 12px; justify-content: center; align-items: center; flex-wrap: wrap; margin: 18px auto 0; max-width: 650px; }
#homeSaveState { font-size: 11px; color: var(--muted); flex-basis: 100%; }
.appointment-top { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 24px; }
.appointment-top .text-button { padding-left: 0; color: var(--muted); }
.appointment-title { margin-bottom: 22px; }
.appointment-heading { display: flex; align-items: center; gap: 16px; min-width: 0; }
.appointment-heading h1 { font-size: clamp(34px,3.5vw,46px); }
.appointment-heading .subtitle { margin-top: 8px; }
.appointment-icon { display: grid; place-items: center; flex-shrink: 0; width: 60px; height: 60px; border-radius: 50%; background: var(--service-tint); color: var(--service-color); }
.workflow-bar { display: flex; gap: 18px; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--line); margin-bottom: 20px; padding-bottom: 18px; }
.workflow-steps { gap: 8px; }
.workflow-steps button { border: 1px solid var(--line); border-radius: 8px; background: #fff; padding: 10px 14px; display: flex; align-items: center; gap: 9px; font-size: 12px; text-decoration: none; }
.workflow-steps button > span { border-radius: 50%; width: 22px; height: 22px; display: grid; place-items: center; background: #f4efe9; font-size: 10px; }
.workflow-steps button[aria-current="step"] { background: var(--service-tint); border-color: var(--service-line); color: var(--service-color); }
.workflow-steps button[aria-current="step"] > span { background: var(--service-color); color: #fff; }
.appointment .patient-strip { grid-template-columns: 1.15fr 1fr 1fr; }
.appointment .workspace-grid { display: block; }
.service-navigation { display: flex; gap: 8px; flex-wrap: wrap; margin: 22px 0; }
.service-tab { font-size: 12px; min-height: 42px; background: #fff; border-color: var(--line); }
.service-tab[aria-pressed="true"] { background: var(--service-tint); border-color: var(--service-color); }
.service-tab .service-icon { width: 18px; height: 18px; }
.appointment .review { position: static; min-height: 0; margin-top: 22px; }
.appointment .document-tabs { grid-template-columns: repeat(4,minmax(0,1fr)); }
.appointment .document-tabs button { min-height: 62px; }
.appointment #documentEditor { min-height: 380px; }
.appointment .record-modes { max-width: 600px; margin: 0 auto; }
.appointment .recorder { padding-top: 30px; padding-bottom: 26px; }
.appointment .record-button { min-height: 76px; min-width: 260px; }
.appointment .recorder .helper { max-width: none; flex-basis: 100%; padding: 0 max(0px,calc((100% - 500px)/2)); }
.appointment .notes textarea { min-height: 155px; }
.appointment .findings { margin-bottom: 0; border-bottom: 0; padding-bottom: 0; }
.appointment .generate { min-height: 50px; }
.processing-status { padding: 16px; border: 1px solid var(--service-line); border-radius: 8px; background: var(--service-tint); color: var(--service-color); margin: 20px 0; font-size: 13px; }
.service-picker { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.picker-choice { display: flex; align-items: center; gap: 9px; min-height: 64px; padding: 12px; border: 1px solid var(--service-line); background: var(--service-tint); border-radius: 9px; color: var(--service-color); cursor: pointer; font-size: 12px; }
.picker-choice input { accent-color: var(--service-color); }
.picker-choice .service-icon { width: 22px; height: 22px; }
.service-picker + .helper { margin-bottom: 20px; }
@media(min-width:1600px) { .welcome-family { max-width: 760px; row-gap: 28px; }.welcome-choice .service-circle { width: 118px; height: 118px; } }
@media(max-width:820px) { .welcome-family { max-width: 600px; gap: 20px 32px; }.workflow-steps { justify-content: flex-start; } }
@media(max-width:560px) {
  #workspace main { padding: 18px 16px 0; }
  .welcome { min-height: 0; }
  .welcome-content { padding: 30px 20px 26px; }
  .welcome-intro { margin-bottom: 24px; }
  .welcome-intro .eyebrow { font-size: 8px; letter-spacing: 1.6px; }
  .welcome-family { gap: 16px 12px; }
  .welcome-choice .service-circle { width: 82px; height: 82px; }
  .welcome-choice .service-name { font-size: 11px; min-height: 31px; }
  .welcome-choice .service-icon { width: 26px; height: 26px; }
  .appointment-top { gap: 8px; margin-bottom: 20px; }
  .appointment-top .button,.appointment-top .text-button { font-size: 11px; }
  .appointment-icon { width: 46px; height: 46px; }
  .appointment-heading { gap: 12px; }
  .appointment-title { gap: 16px; }
  .appointment-title .button { margin-left: 58px; }
  .workflow-bar { flex-direction: column; align-items: stretch; gap: 12px; }
  .workflow-steps { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
  .workflow-steps button { padding: 8px; gap: 6px; font-size: 11px; text-align: left; }
  .workflow-steps button > span { flex-shrink: 0; }
  .workflow-bar .save-status { flex-direction: row; justify-content: space-between; align-items: center; }
  .appointment .patient-strip { grid-template-columns: 1fr 1fr; }
  .appointment .document-tabs { grid-template-columns: 1fr 1fr; }
  .appointment .record-button { min-width: 0; }
  .service-picker { grid-template-columns: 1fr; }
}
@media(max-width:420px) { .welcome-family { grid-template-columns: 1fr 1fr; max-width: 340px; gap: 18px 26px; }.welcome-choice .service-circle { width: 96px; height: 96px; }.welcome-choice .service-name { min-height: 0; font-size: 12px; } }
/* Individually addressable information pages share the clinic's visual identity. */
.information-page { padding-bottom: 44px; }
.information-top { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 38px; }
.information-top nav { display: flex; align-items: center; gap: 10px; font-size: 11px; color: var(--muted); }
.information-top nav a { padding: 10px 0; text-underline-offset: 3px; }
.information-intro { text-align: center; max-width: 760px; margin: 0 auto 40px; }
.information-intro h1 { font-size: clamp(38px,4.5vw,60px); line-height: 1.04; }
.information-page-label { display: block; font: 600 14px/1.6 'DM Sans',sans-serif; color: var(--muted); letter-spacing: 0; margin: 12px 0 18px; }
.information-intro > p:last-child { margin: 20px auto 0; max-width: 520px; color: var(--muted); line-height: 1.8; }
.information-split { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 22px; }
.information-card { min-width: 0; padding: 30px; border: 1px solid var(--line); border-radius: 14px; background: #fff; }
.information-card-warm { background: #f4ede4; }
.creator-profile + .product-origin { margin-top: 22px; }
.creator-intro{display:grid;grid-template-columns:minmax(0,1fr) minmax(260px,360px);align-items:start;gap:40px;margin-bottom:26px}
.creator-bio>p:not(.eyebrow){margin-top:16px;font-size:13px;line-height:1.9;color:var(--muted)}
.creator-purpose-title{margin-top:24px;font:600 23px/1.25 var(--serif);color:var(--ink)}
.creator-film{margin:0;min-width:0}
.creator-player{position:relative;overflow:hidden;border:1px solid var(--line);border-radius:16px;background:#f4ede4;box-shadow:0 8px 24px #30231a10}
.creator-player video{display:block;width:100%;aspect-ratio:1;object-fit:contain;background:#f4ede4}
.creator-play{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:24px;border:0;border-radius:0;background:linear-gradient(#172c2910,#172c2940),url('/assets/about/raymond-cover.jpg') center/cover;color:white;cursor:pointer;font:600 13px var(--sans)}
.creator-play[hidden]{display:none}
.creator-play>span:first-child{display:grid;place-items:center;width:56px;height:56px;border-radius:50%;background:#28635b;box-shadow:0 4px 18px #0003;font-size:24px;padding-left:3px}
.creator-play:hover>span:first-child{background:#1e514a}
.creator-play:focus-visible{outline:3px solid #fff;outline-offset:-6px}
.creator-film figcaption{margin-top:10px;font-size:12px;color:var(--muted);text-align:center}
@media(max-width:700px){.creator-intro{grid-template-columns:1fr;gap:24px}.creator-film{width:100%;max-width:360px;justify-self:center}}
.company-details { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,240px),1fr)); gap: 16px 24px; margin: 22px 0 0; padding-top: 18px; border-top: 1px solid var(--line); font-size: 13px; line-height: 1.7; }
.company-details dt { font-weight: 600; color: var(--ink); }
.company-details dd { margin: 4px 0 0; color: var(--muted); }
.information-card h2 { font: 600 30px/1.16 var(--serif); letter-spacing: -.4px; }
.information-card > p:not(.eyebrow) { margin-top: 16px; font-size: 13px; color: var(--muted); line-height: 1.9; }
.information-text-link { display: inline-flex; align-items: center; gap: 7px; min-height: 44px; margin-top: 18px; font-size: 12px; font-weight: 600; text-underline-offset: 4px; }
.information-steps { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 22px; list-style: none; padding: 0; margin: 0 0 22px; }
.information-steps li { border: 1px solid var(--line); border-radius: 14px; background: #fff; padding: 28px; }
.information-steps li > span { display: grid; place-items: center; width: 50px; height: 50px; margin-bottom: 28px; border-radius: 50%; background: #e3f1ed; color: #28645a; font: 600 22px var(--serif); }
.information-steps li:nth-child(2) > span { background: #e6edf9; color: #3b5f91; }
.information-steps li:nth-child(3) > span { background: #eee7f6; color: #765594; }
.information-steps h2 { font: 600 27px/1.2 var(--serif); }
.information-steps p { font-size: 12px; color: var(--muted); line-height: 1.9; margin-top: 14px; }
.information-principles { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 28px; margin: 32px 0; padding: 24px 0; }
.information-principles > div { border-top: 2px solid #dbc8b9; padding-top: 16px; }
.information-principles h2 { color: var(--red-dark); font: 600 26px var(--serif); }
.information-principles p { color: var(--muted); font-size: 12px; margin-top: 8px; }
.contact-options h2 { font-size: clamp(20px,2.25vw,30px); overflow-wrap: anywhere; }
.contact-options h2 a { display: inline-block; color: var(--ink); text-decoration: none; padding: 8px 0; }
.contact-options h2 a:hover { color: var(--red-dark); text-decoration: underline; text-underline-offset: 4px; }
.contact-options .information-text-link { overflow-wrap: anywhere; min-width: 0; }
.contact-options .button { margin-top: 22px; }
.clinic-enquiries { margin-top: 24px; }
.account-access-notice { padding: 14px 16px; background: var(--cream); border: 1px solid var(--line); border-radius: 8px; }
.information-locations { margin: 38px 0 0; }
.information-section-title { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; flex-wrap: wrap; margin-bottom: 22px; }
.information-section-title h2 { font: 600 32px var(--serif); }
.information-section-title p { font-size: 12px; color: var(--muted); }
.information-locations-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 22px; }
.information-locations-grid article { border: 1px solid var(--line); border-radius: 12px; padding: 26px; background: #f4ede4; }
.information-locations-grid article > span { color: var(--muted); font-size: 9px; letter-spacing: 1.1px; }
.information-locations-grid h3 { font: 600 28px var(--serif); margin: 16px 0 10px; }
.information-locations-grid p { font-size: 12px; color: var(--muted); line-height: 1.8; min-height: 44px; }
.information-locations-grid a { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-size: 12px; margin-top: 12px; text-underline-offset: 4px; }
.information-source { font-size: 11px; color: var(--muted); line-height: 1.8; margin: 18px 0; }
.information-safety { display: flex; align-items: baseline; gap: 8px 14px; flex-wrap: wrap; border: 1px solid #e7d6c6; border-radius: 8px; padding: 14px 18px; background: #fffaf3; color: #6c5341; margin-top: 28px; font-size: 11px; }
.information-bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; margin-top: 24px; }
.policy-content { display: grid; gap: 20px; margin-top: 24px; max-width: 900px; }
.policy-content .information-card { min-width: 0; overflow-wrap: anywhere; }
.product-help-launcher { position: fixed; right: 22px; bottom: 24px; z-index: 35; display: grid; place-items: center; width: 64px; height: 64px; border: 0; border-radius: 50%; padding: 0; background: #28645a; color: white; font-weight: 600; box-shadow: 0 4px 20px #163a3026; cursor: pointer; }
body:has(.cookie-notice:not([hidden])) .product-help-launcher { bottom: 180px; }
.product-help-launcher[hidden] { display: none; }
.product-help-launcher svg { width: 36px; height: 36px; }
.product-help-launcher {
  border: 2px solid #f5eee3;
  background-image: linear-gradient(145deg,#ffffff18,transparent 52%,#00000012);
  box-shadow: 0 10px 24px #17100c45,0 3px 7px #17100c30,inset 0 1px 1px #ffffff45;
  transition: transform .18s ease,box-shadow .18s ease;
}
@media(hover:hover) { .product-help-launcher:hover { transform: translateY(-3px); box-shadow: 0 14px 28px #17100c50,0 4px 9px #17100c30,inset 0 1px 1px #ffffff45; } }
.product-help-launcher:active { transform: translateY(1px); box-shadow: 0 4px 10px #17100c40,inset 0 1px 3px #00000020; }
@media(prefers-reduced-motion:reduce) { .product-help-launcher:hover,.product-help-launcher:active { transform: none; } }
/* Decorative service palette only; never an availability indicator. */
.product-help-launcher { animation: help-service-colours 60s ease-in-out infinite; }
@keyframes help-service-colours {
  0%, 12%, 100% { background-color: #28645a; }
  16.67%, 28.67% { background-color: #3b5f91; }
  33.33%, 45.33% { background-color: #765594; }
  50%, 62% { background-color: #856123; }
  66.67%, 78.67% { background-color: #5d6b3e; }
  83.33%, 95.33% { background-color: #75614f; }
}
.product-help-launcher:hover,.product-help-launcher:focus-visible,
.product-help-launcher[aria-expanded="true"],body:has(.support-panel[open]) .product-help-launcher { animation-play-state: paused; }
@media(prefers-reduced-motion:reduce) { .product-help-launcher { animation: none; background-color: #28645a; } }
.product-help-panel { position: fixed; inset: auto 20px 20px auto; margin: 0; width: min(430px,calc(100vw - 24px)); max-height: calc(100dvh - 40px); padding: 24px; border: 1px solid var(--line); border-radius: 20px; background: #faf8f5; color: var(--ink); overflow-y: auto; box-sizing: border-box; }
.product-help-panel::backdrop { background: #17251f45; }
.product-help-panel header { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; }
.product-help-panel h2 { font: 600 26px var(--serif); }
.product-help-panel p { font-size: 12px; line-height: 1.7; margin: 10px 0; }
.product-help-topics { display: flex; gap: 8px; flex-wrap: wrap; margin: 18px 0; }
.product-help-topics button { border: 1px solid #b7d3cb; border-radius: 18px; background: #e3f1ed; color: #28645a; padding: 10px 12px; cursor: pointer; }
#productHelpSearch label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 8px; }
#productHelpSearch > div { display: flex; gap: 8px; }
#productHelpQuery { min-width: 0; width: 100%; padding: 10px; border: 1px solid var(--line); border-radius: 8px; font: inherit; }
.product-help-panel .button { padding: 12px 16px; min-height: 44px; }
.product-help-panel .faq-item { margin-top: 10px; background: white; }
.product-help-panel footer { display: block; margin: 0; padding: 10px 16px; border-top: 1px solid var(--line); background: #faf8f5; }
.product-help-panel { width: min(360px,calc(100vw - 24px)); height: min(480px,calc(100dvh - 96px)); max-height: calc(100dvh - 96px); padding: 0; overflow: hidden; z-index: 45; box-shadow: 0 8px 32px #163a3026; }
.product-help-panel[open] { display: flex; flex-direction: column; }
.product-help-panel { width: min(320px,calc(100vw - 24px)); height: auto; max-height: min(420px,calc(100dvh - 96px)); }
.product-help-panel [data-product-help="close"] { width: 40px; min-width: 40px; height: 40px; padding: 0; font-size: 24px; line-height: 1; border-radius: 8px; }
.product-help-panel header { align-items: center; }
.product-help-panel #productHelpStatus:empty { display: none; }
.product-help-contact-details { margin-top: 18px; }
.product-help-contact-details summary { color: #28645a; min-height: 40px; padding: 10px 0; font-weight: 600; }
.product-help-panel .product-help-privacy summary { font-size: 11px; font-weight: 400; color: var(--muted); }
.product-help-panel #productHelpSearch button { width: 44px; min-width: 44px; padding: 0; font-size: 23px; background: #28645a; }
.product-help-panel header { padding: 14px 16px 10px; flex-shrink: 0; border-bottom: 1px solid var(--line); }
.product-help-panel h2 { font-size: 20px; }
.product-help-panel:focus { outline: none; }
.product-help-panel.has-answer { height: min(420px,calc(100dvh - 96px)); }
.product-help-composer { flex-shrink: 0; padding: 10px 16px 14px; border-top: 1px solid var(--line); background: #faf8f5; }
.product-help-composer #productHelpSearch { margin: 0; }
.product-help-body .product-help-question { background: #e3f1ed; border-radius: 12px 12px 3px 12px; padding: 10px 12px; margin: 8px 0 12px 18px; overflow-wrap: anywhere; color: #214f47; }
.product-help-answer { background: white; border: 1px solid var(--line); border-radius: 3px 12px 12px 12px; padding: 12px; overflow-wrap: anywhere; }
.product-help-answer h3 { margin: 0; font-size: 13px; line-height: 1.5; }
.product-help-answer .faq-answer { padding: 0; }
.product-help-answer .faq-answer p { margin: 8px 0 0; font-size: 12px; line-height: 1.65; }
.product-help-panel header p { font-size: 11px; margin: 4px 0 0; }
.product-help-body { padding: 0 16px 12px; overflow-y: auto; min-height: 0; flex: 1; overscroll-behavior: contain; }
.product-help-panel .product-help-topics { gap: 6px; margin: 8px 0; }
.product-help-topics button { padding: 8px 10px; font-size: 12px; min-height: 40px; }
.product-help-more summary,.product-help-privacy summary { color: #28645a; min-height: 36px; padding: 8px 0; }
.product-help-panel #productHelpSearch { margin-top: 8px; }
.product-help-panel #productHelpQuery { font-size: 16px; }
.product-help-panel .faq-item { padding: 10px; }
.product-help-contact { display: grid; grid-template-columns: 1.5fr 1fr 1fr; align-items: center; gap: 6px; }
.product-help-contact a,.product-help-contact button { display: flex; justify-content: center; align-items: center; min-height: 44px; width: 100%; padding: 6px; border: 0; border-radius: 8px; background: #e3f1ed; color: #28645a; font-size: 12px; font-weight: 600; text-decoration: none; }
.product-help-faq-link { display: block; padding-top: 8px; text-align: center; font-size: 11px; }
.support-panel { width: min(720px,calc(100vw - 24px)); max-height: calc(100dvh - 32px); overflow-y: auto; padding: 24px; border: 1px solid var(--line); border-radius: 18px; background: #faf8f5; color: var(--ink); }
.support-panel::backdrop { background: #17251f66; }
.support-panel { position: fixed; inset: auto 20px 20px auto; margin: 0; width: min(360px,calc(100vw - 24px)); height: min(480px,calc(100dvh - 96px)); max-height: calc(100dvh - 96px); padding: 0; overflow: hidden; z-index: 46; box-shadow: 0 8px 32px #163a3026; }
.support-panel[open] { display: flex; flex-direction: column; }
.support-panel.support-inbox { width: min(640px,calc(100vw - 24px)); max-width: 640px; }
.support-panel header { padding: 12px 16px; border-bottom: 1px solid var(--line); flex-shrink: 0; }
.support-scroll { padding: 0 16px 16px; overflow-y: auto; min-height: 0; flex: 1; overscroll-behavior: contain; }
.support-panel #supportSend textarea { min-height: 64px; font-size: 16px; }
.support-panel #supportSend .field { margin: 12px 0; }
.support-panel #supportSend button { min-height: 44px; }
.support-panel .clinic-row-actions { gap: 4px; }
.support-panel header { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.support-panel h2 { font: 600 22px var(--serif); }
.support-panel p { font-size: 13px; line-height: 1.7; margin: 12px 0; }
.support-privacy { margin: 0; font-size: 13px; }
.support-privacy summary { cursor: pointer; color: #28645a; font-weight: 600; min-height: 44px; padding: 12px 0; box-sizing: border-box; }
.support-privacy summary:focus-visible { outline: 2px solid #28645a; outline-offset: 3px; border-radius: 4px; }
.support-thread { width: 100%; display: flex; justify-content: space-between; gap: 12px; padding: 14px; margin: 8px 0; border: 1px solid var(--line); border-radius: 10px; background: white; text-align: left; overflow-wrap: anywhere; cursor: pointer; }
.support-thread strong { min-width: 0; }
.support-messages { max-height: 330px; overflow-y: auto; margin: 16px 0; }
.support-message { margin: 10px 12% 10px 0; padding: 14px; border-radius: 12px; border: 1px solid var(--line); background: white; overflow-wrap: anywhere; }
.support-message p { white-space: pre-wrap; }
.support-message time { font-size: 11px; color: var(--muted); }
.support-reply { background: #e3f1ed; margin: 10px 0 10px 12%; }
#supportAvailability { color: #28645a; font-weight: 600; margin-top: 16px; }
@media print { .support-panel { display: none !important; } }
@media(max-width: 600px) { .product-help-panel,.support-panel { right: 12px; bottom: 72px; padding: 0; } body:has(.cookie-notice:not([hidden])) .product-help-launcher { bottom: 240px; } }
@media print { .product-help-launcher,.product-help-panel { display: none !important; } }
.security-trust-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,220px),1fr)); gap: 16px; margin-top: 24px; }
.security-trust-grid > section { min-width: 0; padding: 20px; border: 1px solid var(--line); border-radius: 12px; background: #f4f8f6; }
.security-trust-grid h3 { font-size: 16px; line-height: 1.4; color: #28645a; }
.security-trust-grid p { margin-top: 12px; font-size: 13px; line-height: 1.8; color: var(--muted); }
.security-overview > .security-source-date { font-size: 12px; }
.otoscopy-reference-library { margin: 18px 0; padding: 18px 22px; background: #f4f8f6; border: 1px solid var(--line); border-radius: 12px; font-size: 13px; line-height: 1.8; overflow-wrap: anywhere; }
.otoscopy-reference-library summary { cursor: pointer; font-weight: 600; color: #28645a; min-height: 28px; }
.otoscopy-reference-library h3 { margin-top: 18px; font-size: 15px; }
.otoscopy-reference-library p { margin-top: 10px; }
.otoscopy-reference-library dt { font-weight: 600; margin-top: 8px; }
.otoscopy-reference-library dd { margin-left: 0; }
.otoscopy-reference-library ul { padding-left: 20px; }
.otoscopy-reference-library a { text-decoration: underline; text-underline-offset: 3px; }
.cookie-notice { position: sticky; bottom: 16px; z-index: 40; display: flex; align-items: center; gap: 24px; max-width: 900px; margin: 16px auto; padding: 20px 24px; background: #faf8f5; color: #292420; border: 1px solid #d9e5df; border-radius: 18px; box-shadow: 0 8px 32px #29242018; }
.cookie-notice[hidden] { display: none; }
.cookie-notice h2 { font-family: 'DM Sans', sans-serif; font-size: 16px; margin: 0 0 6px; }
.cookie-notice p { font-size: 13px; line-height: 1.6; margin: 0; }
.cookie-notice-actions { display: flex; flex-shrink: 0; align-items: center; gap: 16px; }
.cookie-notice-actions a { color: #29645b; font-size: 13px; text-underline-offset: 3px; }
.cookie-notice-actions .button { background: #29645b; color: white; white-space: nowrap; }
@media(max-width: 700px) { .cookie-notice { margin: 12px; padding: 16px; bottom: 12px; gap: 12px; flex-direction: column; align-items: stretch; } .cookie-notice-actions { justify-content: space-between; } }
@media print { .cookie-notice { display: none !important; } }
.information-bottom .button { text-decoration: none; }
.information-bottom > span { color: var(--muted); font-size: 11px; }
.help-start-note { display: grid; grid-template-columns: 190px minmax(0,1fr); gap: 12px 24px; margin: 0 0 28px; padding: 18px 24px; border-left: 3px solid #c7ab8a; background: #f3ede5; border-radius: 0 8px 8px 0; font-size: 12px; }
.help-start-note p { color: var(--muted); line-height: 1.8; }
.help-photos { display: grid; grid-template-columns: 1.15fr 1fr; align-items: center; gap: 40px; margin-bottom: 22px; background: #f0f5f2; border-color: #d4e1d9; }
.help-photos h2 { font-size: clamp(30px,3vw,40px); }
.help-photos > div > p:not(.eyebrow) { margin-top: 16px; color: #52645b; font-size: 13px; line-height: 1.85; }
.help-photo-example { min-width: 0; margin: 0; padding: 24px; border: 1px solid #d4e1d9; border-radius: 12px; background: #ffffffb3; }
.help-photo-example figcaption { font-size: 12px; font-weight: 600; color: #315b4a; }
.help-photo-example figcaption > span { display: block; font-size: 10px; font-weight: 400; color: #52645b; margin-top: 4px; }
.help-photo-grid { display: grid; gap: 10px; margin: 20px 0 16px; }
.help-photo-ear { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
.help-photo-ear > div { min-width: 0; padding: 18px 12px; background: #fff; border: 1px solid #d4e1d9; border-radius: 8px; }
.help-photo-ear strong { display: block; color: #315b4a; font-size: 13px; }
.help-photo-ear span { display: block; color: #52645b; font-size: 11px; margin-top: 5px; }
.help-photo-example > p { color: #52645b; font-size: 11px; line-height: 1.8; }
.help-next { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-top: 28px; padding: 24px 28px; border-radius: 12px; background: #f1e8dd; }
.help-next h2 { font: 600 28px/1.2 var(--serif); }
.help-next p { color: var(--muted); font-size: 12px; margin-top: 8px; }
.help-next .button { flex-shrink: 0; text-decoration: none; min-height: 44px; }
.faq-groups { max-width: 1120px; margin: 0 auto; }
.faq-group { display: grid; grid-template-columns: minmax(0,.7fr) minmax(0,1.7fr); gap: 44px; padding: 32px 0; border-top: 1px solid var(--line); }
.faq-group-intro { padding-top: 12px; }
.faq-group-intro .eyebrow { color: var(--red-dark); }
.faq-group-intro h2 { font: 600 32px/1.12 var(--serif); }
.faq-group-intro > p:last-child { margin-top: 12px; color: var(--muted); font-size: 12px; line-height: 1.8; max-width: 230px; }
.faq-questions { min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.faq-item { background: #fff; border: 1px solid var(--line); border-radius: 10px; }
.faq-item > summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; list-style: none; min-height: 64px; padding: 18px 22px; border-radius: 9px; font-size: 13px; font-weight: 600; line-height: 1.6; }
.faq-item > summary::-webkit-details-marker { display: none; }
.faq-item > summary:hover { background: #fdfaf6; }
.faq-item > summary svg { width: 20px; height: 20px; flex-shrink: 0; color: var(--red-dark); }
.faq-item[open] > summary { color: var(--red-dark); }
.faq-item[open] .faq-plus { display: none; }
.faq-answer { padding: 0 22px 22px; color: var(--muted); font-size: 13px; line-height: 1.9; overflow-wrap: anywhere; }
.faq-answer strong { color: var(--ink); font-weight: 600; }
.faq-answer a,.faq-inline-button { text-underline-offset: 3px; }
.faq-inline-button { display: inline; padding: 0; border: 0; background: none; color: var(--red-dark); font: inherit; text-decoration: underline; text-align: left; }
@media(min-width:821px) and (max-width:1000px) {
  #workspace .topbar { gap: 14px; }
  .topbar .header-nav { gap: 2px; }
}
@media(max-width:820px) {
  .information-steps,.information-locations-grid { grid-template-columns: 1fr; gap: 16px; }
  .information-steps li { padding: 24px; }
  .information-steps li > span { margin-bottom: 18px; }
  .information-card { padding: 24px; }
  .help-photos { grid-template-columns: 1fr; gap: 24px; }
  .help-photo-example { max-width: 520px; width: 100%; }
  .faq-group { grid-template-columns: minmax(0,.65fr) minmax(0,1.7fr); gap: 24px; }
}
@media(max-width:560px) {
  .information-top { margin-bottom: 24px; gap: 8px; }
  .information-top .button { width: 100%; }
  .information-intro { margin-bottom: 28px; }
  .information-intro .eyebrow { letter-spacing: 1.5px; font-size: 8px; }
  .information-intro > p:last-child { font-size: 13px; }
  .information-split,.information-principles { grid-template-columns: 1fr; gap: 16px; }
  .information-bottom { flex-direction: column; align-items: flex-start; }
  .information-bottom .button { width: 100%; }
  .help-start-note { grid-template-columns: 1fr; gap: 8px; padding: 18px 20px; }
  .help-photo-example { padding: 16px; }
  .help-photo-ear > div { padding: 14px 10px; }
  .help-photo-ear span { font-size: 10px; }
  .help-next { flex-direction: column; align-items: flex-start; padding: 24px; }
  .help-next .button { width: 100%; }
  .faq-group { grid-template-columns: 1fr; gap: 20px; padding: 24px 0; }
  .faq-group-intro { padding: 0; }
  .faq-group-intro > p:last-child { max-width: none; }
  .faq-item > summary { padding: 16px; }
  .faq-answer { padding: 0 16px 18px; }
}
/* Shared brand footer; public website information is separate from app privacy. */
.clinic-footer { display: block; padding: 0; margin-top: 32px; border-top: 3px solid var(--red); background: #2c1f1a; color: #d7c9bd; font-size: 12px; }
#workspace[data-layout="public"] .clinic-footer { margin-top: 0; }
.clinic-footer-inner { max-width: 1376px; padding: 0 28px; margin: 0 auto; }
.clinic-footer-main { display: grid; grid-template-columns: minmax(240px,1fr) minmax(0,2fr); align-items: center; gap: 20px 36px; padding: 24px 0 18px; }
.clinic-footer-main > * { min-width: 0; }
.clinic-footer-wordmark { display: flex; align-items: center; gap: 10px; color: #fff8ef; font: 600 26px/1.1 var(--serif); }
.clinic-footer-logo { display: grid; place-items: center; flex-shrink: 0; width: 36px; height: 42px; border-radius: 7px; background: #faf8f5; }
.clinic-footer-logo img { object-fit: contain; }
.clinic-footer-brand > p { line-height: 1.6; margin: 8px 0 0; }
.clinic-footer a { display: inline-flex; align-items: center; gap: 5px; color: #f4e9df; min-height: 36px; padding: 5px 0; font: inherit; text-decoration: none; text-align: left; overflow-wrap: anywhere; }
.clinic-footer a:hover { color: #fff; text-decoration: underline; text-underline-offset: 4px; }
.clinic-footer :focus-visible { outline: 2px solid #f1aa94; outline-offset: 4px; border-radius: 2px; }
.clinic-footer .clinic-footer-visit { color: #f1aa94; font-weight: 500; }
.clinic-footer a > span[aria-hidden] { flex-shrink: 0; }
.clinic-footer-navigation nav { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 2px 24px; }
.clinic-footer-navigation > p { margin: 5px 0 0; text-align: right; font-size: 11px; line-height: 1.6; }
.clinic-footer-bottom { border-top: 1px solid #58443a; padding: 10px 0 16px; font-size: 11px; }
.clinic-footer-bottom nav { display: flex; flex-wrap: wrap; gap: 0 22px; }
.clinic-footer-legal { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 2px 24px; margin-top: 4px; line-height: 1.7; }
.clinic-footer-legal p { margin: 0; }
.clinic-footer-credit a { text-decoration: underline; text-underline-offset: 3px; }
/* Leave a clear right-hand lane for the floating help button while scrolling. */
body:has(.product-help-launcher:not([hidden])) .clinic-footer-inner { padding-right: 108px; }
@media(max-width:900px) {
  body:has(.product-help-launcher:not([hidden])) .clinic-footer-main { grid-template-columns: minmax(0,1fr); }
  body:has(.product-help-launcher:not([hidden])) .clinic-footer-navigation nav { justify-content: flex-start; }
  body:has(.product-help-launcher:not([hidden])) .clinic-footer-navigation > p { text-align: left; }
}
@media(max-width:400px) {
  body:has(.product-help-launcher:not([hidden])) .clinic-footer-wordmark { font-size: 20px; gap: 6px; }
  body:has(.product-help-launcher:not([hidden])) .clinic-footer nav { grid-template-columns: minmax(0,1fr); }
}
#workspace:not([data-layout="public"]) .clinic-footer-main { padding-top: 16px; padding-bottom: 12px; }
#workspace:not([data-layout="public"]) .clinic-footer-brand > p { display: none; }
@media(max-width:900px) {
  .clinic-footer-main { grid-template-columns: minmax(210px,1fr) minmax(0,1.5fr); gap: 20px; }
  .clinic-footer-navigation nav { column-gap: 18px; }
}
@media(max-width:560px) {
  .clinic-footer-inner { padding: 0 20px; }
  .clinic-footer-main { grid-template-columns: 1fr; gap: 12px; padding: 20px 0 12px; }
  .clinic-footer-wordmark { font-size: 25px; }
  .clinic-footer-navigation nav,.clinic-footer-bottom nav { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 0 16px; }
  .clinic-footer-navigation > p { text-align: left; }
  .clinic-footer a { min-height: 44px; }
  .clinic-footer-legal { display: block; margin-top: 10px; }
  .clinic-footer-credit { margin-top: 4px !important; }
}
.language-cue { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 6px 18px; margin: 14px 0 20px; padding: 14px 16px; border-left: 3px solid var(--service-color, #946942); background: var(--service-tint, #faf8f5); border-radius: 0 9px 9px 0; font-size: 12px; }
.language-cue p { margin: 5px 0 0; color: #665e56; line-height: 1.6; }
.language-cue .text-button { min-height: 44px; }
.language-guide { font-size: 13px; line-height: 1.7; overflow-wrap: anywhere; }
.language-version { color: #755b43; font-size: 11px; overflow-wrap: anywhere; }
.wording-example { border: 1px solid #e6ddd3; border-top: 3px solid var(--service-color, #946942); border-radius: 10px; padding: 20px; margin: 22px 0; }
.wording-example .eyebrow { font-size: 10px; letter-spacing: 1px; color: var(--service-color, #755b43); }
.wording-example h3 { font: 600 23px/1.25 var(--serif); margin: 8px 0 20px; }
.wording-example dl { margin: 0; }
.wording-example dt { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .6px; color: #6d5744; margin-top: 16px; }
.wording-example dd { margin: 6px 0 16px; }
.wording-example .wording-source { background: #f5f1eb; padding: 12px; border-radius: 6px; }
.wording-example summary,.language-terms summary { min-height: 40px; padding: 8px 0; cursor: pointer; font-weight: 600; }
.wording-example details { border-top: 1px solid #e6ddd3; }
.language-terms { border-top: 1px solid #e6ddd3; margin-top: 16px; }
.language-terms > div { border-bottom: 1px solid #eee8e0; padding-bottom: 12px; }
.language-terms h4 { margin: 16px 0 0; font-size: 13px; }
.language-terms a { color: #724b38; text-underline-offset: 3px; }
@media(max-width:560px) { .wording-example { padding: 16px; }.wording-example h3 { font-size: 21px; } }
.template-cue { margin: 16px 0; padding: 14px 16px; border: 1px solid var(--line, #e8dfd6); border-radius: 10px; background: #faf8f5; font-size: 12px; line-height: 1.7; }
.template-cue summary { cursor: pointer; font-weight: 600; }
.template-cue summary span { display: block; font-size: 10px; font-weight: 400; color: #755b43; }
.template-cue ul { columns: 2; padding-left: 18px; }
.review-columns { display: grid; grid-template-columns: minmax(0,1.15fr) minmax(0,1fr); gap: 28px; align-items: start; }
.review-columns > * { min-width: 0; }
.draft-column { position: sticky; top: 20px; }
.review-columns #documentEditor { min-height: 640px; }
.template-notice { padding: 16px; border: 1px solid #e5d6c5; background: #fffaf3; border-radius: 10px; font-size: 12px; line-height: 1.65; margin: 16px 0; }
.template-notice > span { display: block; font-size: 10px; margin-top: 5px; color: #725841; }
.template-notice summary { cursor: pointer; }
.template-notice a { display: block; color: #724b38; text-underline-offset: 3px; margin: 8px 0; overflow-wrap: anywhere; }
.documentation-title { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 8px; margin: 22px 0 12px; }
.documentation-title h3 { font: 600 27px var(--serif); margin: 0; }
.documentation-title > span { font-size: 11px; color: #75543c; }
.check-group { border: 1px solid #e5dfd7; border-radius: 10px; margin: 12px 0; overflow: hidden; }
.check-group > summary { background: var(--service-tint, #f4f0ea); padding: 14px; font-size: 12px; font-weight: 600; cursor: pointer; }
.check-group > summary span { display: inline; float: right; margin: 0; }
.documentation-check { padding: 15px; border-top: 1px solid #e5dfd7; font-size: 12px; line-height: 1.7; overflow-wrap: anywhere; }
.check-heading { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px; }
.check-heading h4 { font-size: 12px; margin: 0; }
.check-status { font-size: 10px; border-radius: 5px; background: #f6eee3; color: #725139; padding: 2px 6px; }
[data-status="conflicting"] .check-status { color: #8a3028; background: #fae8e4; }
[data-status="documented"] .check-status { color: #405464; background: #edf2f5; }
.check-evidence { margin: 10px 0; }
.check-evidence summary { cursor: pointer; color: #555; }
.check-evidence blockquote { margin: 8px 0; padding: 8px 12px; border-left: 3px solid #d9cdc0; background: #faf8f5; white-space: pre-wrap; }
.check-evidence p { color: #6b655e; font-size: 11px; }
.additional-checks { padding: 14px; border-left: 3px solid #b58152; background: #fffaf3; font-size: 12px; line-height: 1.7; }
.additional-checks h4 { margin: 0; }
.additional-checks ul { padding-left: 18px; }
.documentation-ack { padding: 16px; background: #f5f2ed; border: 1px solid #ded6cc; border-radius: 10px; margin-top: 18px; line-height: 1.7; }
#clarificationForm select { width: 100%; padding: 12px; border: 1px solid #d8cfc6; border-radius: 7px; font: inherit; background: #fff; }
@media(max-width:1050px) { .review-columns { grid-template-columns: 1fr; }.draft-column { position: static; }.review-columns #documentEditor { min-height: 420px; } }
@media(max-width:560px) { .template-cue ul { columns: 1; }.review-columns { gap: 12px; }.document-status { flex-wrap: wrap; } }
/* A notes-first capture flow. Additional sources live in an on-demand dialog. */
.notes-workspace { border:1px solid var(--service-line); border-radius:10px; background:#fffefa; overflow:hidden; }
.notes-workspace:focus-within { box-shadow:0 0 0 2px var(--service-tint); }
.appointment .simple-capture .notes-workspace textarea { border:0; border-radius:0; background:transparent; }
.notes-workspace textarea:focus-visible { outline-offset:-3px; }
.appointment .simple-capture .notes-workspace.has-transcripts .notes textarea { min-height:90px; }
.note-transcript { border-top:1px solid var(--service-line); padding:16px 20px 0; }
.note-transcript > span { color:var(--service-color); font-size:11px; }
.note-transcript textarea { min-height:90px; padding:8px 0 16px; font-size:15px; line-height:1.8; }
.recorded-transcript > summary { padding:14px 20px; cursor:pointer; color:var(--service-color); font-size:12px; }
.recording-preview { display:block; margin-top:4px; color:var(--muted); font-size:12px; font-weight:400; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.latest-recording .recording-preview { display:none; }
.recorded-transcript .note-transcript { border-top:0; padding-top:0; margin:0; }
.appointment .simple-capture .recorded-transcript textarea { min-height:90px; max-height:220px; overflow-y:auto; resize:vertical; }
.previous-recordings { border-top:1px solid var(--service-line); padding:0 20px; }
.previous-recordings > summary { padding:14px 0; cursor:pointer; color:var(--service-color); font-size:12px; font-weight:600; }
.previous-recordings-list { max-height:300px; overflow-y:auto; overscroll-behavior:contain; margin-bottom:12px; }
.previous-recordings-list .recorded-transcript { border-top:1px solid var(--service-line); }
.previous-recordings-list .recorded-transcript > summary { padding:12px 4px; }
.live-transcript p { max-height:220px; overflow-y:auto; }
.simple-capture .capture-actions { position:sticky; bottom:12px; z-index:3; background:#fffefa; padding:12px; border:1px solid var(--service-line); border-radius:12px; box-shadow:0 3px 14px #2925210d; }
.transcription-status { padding:12px 20px; margin:0; background:var(--service-tint); color:var(--service-color); }
.live-transcript { padding:16px 20px; border-top:1px solid var(--service-line); }
.live-transcript > span { font-size:11px; font-weight:600; color:var(--service-color); }
.live-transcript p { white-space:pre-wrap; overflow-wrap:anywhere; font-size:15px; line-height:1.8; margin-top:8px; }
.recording-checks-entry { display:flex; flex-wrap:wrap; align-items:center; gap:4px 12px; margin-top:8px; }
.recording-checks-entry .text-button { padding-left:0; }
.recording-checks-entry .helper { margin:0; }
.recording-details { border-top:1px solid var(--line); margin-top:12px; padding-top:8px; }
.processing-checks-panel.permissions { margin:auto; padding:26px; background:white; }
.processing-checks-panel .check { font-size:13px; margin:20px 0; }
.processing-checks-panel > .primary { width:100%; margin-top:16px; }
.processing-checks-panel .helper { font-size:12px; }
#workspace[data-view="capture"] .appointment { max-width: 1040px; margin: 0 auto; }
.simple-capture { padding: 30px; }
.notes-intro { margin-bottom: 20px; }
.notes-intro .eyebrow { color: var(--service-color); letter-spacing: 1.6px; margin-bottom: 9px; }
.notes-intro h2 { font: 600 32px/1.15 var(--serif); }
.notes-intro > p:last-child { color: var(--muted); font-size: 13px; margin-top: 9px; }
.appointment .simple-capture .notes textarea { min-height: 230px; padding: 20px; font-size: 15px; line-height: 1.8; background: #fffefa; }
.capture-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin-top: 22px; }
.appointment .capture-actions .record-button { min-height: 58px; min-width: 0; padding: 14px 22px; font-size: 14px; box-shadow: none; border: 1px solid var(--service-line); background: var(--service-tint); color: var(--service-color); }
.appointment .capture-actions .record-button.recording { background: #7b241f; color: white; border-color: #7b241f; }
.appointment .capture-actions .generate { min-height: 58px; width: auto; margin: 0 0 0 auto; padding: 14px 30px; font-size: 14px; }
.simple-capture > .record-meta { flex-direction: row; align-items: center; max-width: none; margin-top: 12px; gap: 12px; }
.simple-capture #recordTime { font-size: 20px; }
.simple-capture .capture-reassurance { margin-top: 16px; }
.simple-capture .permissions { margin: 24px 0 0; padding: 12px 16px; background: #faf8f5; }
.simple-capture .permissions summary span { margin-left: 0; }
.record-controls { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.recording-choice select { max-width: 100%; min-height: 44px; border: 1px solid var(--line); border-radius: 8px; padding: 10px 30px 10px 12px; font: inherit; font-size: 13px; color: var(--ink); background: #fff; }
.recording-choice select:disabled { opacity: .6; }
.capture-extras { display: flex; flex-wrap: wrap; gap: 10px; }
.source-details-panel { max-width: 760px; padding-top: 0; }
.source-details-panel .panel-head { position: sticky; top: 0; z-index: 1; background: #fff; margin: 0; padding: 22px 0 14px; border-bottom: 1px solid var(--line); }
.source-details-panel .panel-head h2 { font-size: 26px; line-height: 1.2; }
.source-details-panel .service-navigation { margin-top: 18px; }
.demo-help { margin: 24px 0 14px; padding-top: 14px; border-top: 1px solid var(--line); }
@media(max-width:560px) { .record-controls { width: 100%; }.recording-choice { flex: 1 0 100%; min-width: 0; }.recording-choice select { width: 100%; font-size: 16px; }.record-controls .record-button { flex: 1; width: auto; }.source-details-panel .panel-head h2 { font-size: 22px; }.source-details-panel .ear-grid { grid-template-columns: 1fr; } }
.document-heading { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin: 22px 0 10px; flex-wrap: wrap; }
.document-heading h3 { font: 600 30px/1.2 var(--serif); }
.document-heading .text-button { padding-left: 0; }
.focused-check { margin-top: 16px; border: 1px solid var(--service-line, #ddd4c8); border-radius: 10px; overflow: hidden; }
.focused-check > .field { padding: 14px; background: var(--service-tint, #f6f2ed); }
.focused-check select { width: 100%; min-width: 0; border: 1px solid #d5c9bc; border-radius: 6px; background: #fff; padding: 10px; font: inherit; font-size: 12px; color: var(--ink); }
.focused-check .documentation-check { border-top: 0; }
.question-navigation { display: flex; align-items: center; justify-content: space-between; gap: 8px; border-top: 1px solid var(--line); padding: 12px; }
.question-navigation > span { font-size: 11px; white-space: nowrap; color: var(--muted); }
.question-navigation .button { min-height: 42px; padding: 9px 12px; }
.documentation-panel .documentation-title { margin-top: 16px; }
.additional-checks { margin-top: 14px; }
.additional-checks > p { margin-top: 8px; }
.template-notice > summary { margin-bottom: 6px; }
.template-notice > strong { display: block; margin-top: 12px; }
.full-set-completion { border-top: 1px solid var(--line); margin-top: 20px; padding-top: 4px; }
.supporting-documents .saved-row { min-height: 70px; }
@media(max-width:560px) {
  .simple-capture { padding: 18px; }
  .notes-intro h2 { font-size: 28px; }
  .appointment .simple-capture .notes textarea { font-size: 16px; min-height: 230px; padding: 14px; }
  .capture-actions { gap: 10px; }
  .appointment .capture-actions .record-button { width: auto; flex: 1; }
  .appointment .capture-actions .generate { width: 100%; margin: 0; padding: 14px 20px; }
  .document-heading h3 { font-size: 27px; }
  .question-navigation .button { padding: 8px; font-size: 11px; }
  .focused-check select { font-size: 16px; }
}
.review-columns.wide-review { display:block; }
.wide-review .draft-column { position:static; }
.review > .section-label { margin-bottom:14px; }
.review > .section-label .service-context { margin:0 0 0 auto; }
.clinical-document-heading { margin:0; }
.record-toolbar { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; margin-bottom:16px; }
.record-actions { display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.record-toolbar .review-toggle { display:flex; flex-direction:column; align-items:flex-start; gap:3px; padding:10px 14px; text-align:left; border-color:var(--service-line); background:var(--service-tint); color:var(--service-color); }
.review-toggle span { font-size:10px; font-weight:400; }
.review-drawer { position:fixed; inset:0 0 0 auto; margin:0; width:min(560px,100%); max-width:100%; height:100dvh; max-height:100dvh; border-radius:14px 0 0 14px; padding:24px; overflow:auto; overscroll-behavior:contain; }
.review-drawer-head { position:sticky; top:0; z-index:1; background:#fff; box-shadow:0 -24px 0 #fff; display:flex; align-items:center; justify-content:space-between; gap:12px; border-bottom:1px solid var(--line); padding-bottom:16px; }
.review-drawer-head .eyebrow { margin:0; }
.review-drawer .documentation-title { margin-top:20px; }
.review-drawer .documentation-title h3 { font-size:30px; }
.review-drawer .helper { font-size:12px; }
.review-drawer .documentation-ack { font-size:12px; }
.review-drawer .question-navigation { gap:8px; }
.check-guidance { border-left:3px solid var(--line); padding-left:12px; font-size:13px; }
.check-standard,.standards-register { margin:14px 0; font-size:13px; overflow-wrap:anywhere; }
.standards-register { border-top:1px solid var(--line); padding-top:16px; }
.standards-register summary,.check-standard summary { cursor:pointer; font-weight:600; }
.document-review-guide{margin:0 0 20px;padding:14px 18px;border:1px solid var(--line);border-radius:10px;background:var(--service-soft,#f5f7f5);font-size:.9rem;line-height:1.6;overflow-wrap:anywhere}
.document-review-guide>summary{cursor:pointer;font-weight:650;color:var(--service-color,#286359)}
.document-review-guide>summary span{display:inline-block;margin-left:8px;font-weight:400;color:var(--muted)}
.document-review-guide ul{padding-left:22px}.document-review-guide li{margin:6px 0}
.document-review-guide a{text-underline-offset:3px}.document-review-guide .check-standard{padding-top:10px;border-top:1px solid var(--line)}
@media(max-width:600px){.document-review-guide>summary span{display:block;margin-left:18px}}
@media print{.document-review-guide{display:none!important}}
.review-confirmation,.review-confirmed { margin-top:24px; padding:20px; border:1px solid var(--line); border-radius:14px; background:#faf8f5; scroll-margin-top:100px; }
.review-confirmation h4 { margin:0 0 10px; font-size:20px; }
.review-confirmation .documentation-ack { display:flex; gap:10px; align-items:flex-start; margin:16px 0; line-height:1.6; }
.review-confirmation input[type=checkbox] { flex:0 0 auto; margin-top:4px; }
.review-confirmation .button { width:100%; white-space:normal; }
.review-blocked { border-left:4px solid #a74435; background:#fff2ed; padding:16px; }
.record-review-note { margin:16px 0; padding:12px; border:1px solid var(--line); overflow-wrap:anywhere; }
.record-review-note h5 { margin:0 0 8px; font-size:inherit; }
.record-review-note p { white-space:pre-wrap; margin:0; }
.record-toolbar + .wide-review .document-status.sr-only { margin:0; }
.record-edit-hint { margin-bottom:12px; }
.clinical-record { border:1px solid #ded8cf; border-radius:12px; background:#fff; overflow:hidden; color:#302d29; }
.record-heading { display:flex; justify-content:space-between; align-items:center; gap:14px; padding:18px 22px 8px; }
.record-brand { font-size:10px; letter-spacing:1.6px; font-weight:700; text-transform:uppercase; color:#71695f; margin:0 0 8px; }
.record-heading h4 { font:600 29px/1.1 var(--serif); margin:0; }
.record-state { font-size:10px; line-height:1.5; padding:6px 10px; border:1px solid #ddd4c7; border-radius:20px; background:#f8f5ef; white-space:normal; }
.record-state.is-approved { background:#edf5ef; border-color:#b9cfbd; color:#31583c; }
.record-testing { margin:0 22px 12px; font-size:10px; color:#746450; }
.record-patient-meta { display:grid; grid-template-columns:1.2fr 1fr 1.2fr; margin:0 22px 10px; border-block:1px solid #e5dfd7; padding:10px 0; gap:18px; }
.record-patient-meta dt { font-size:10px; color:#71695f; margin-bottom:5px; }
.record-patient-meta dd { font-size:13px; font-weight:600; margin:0; overflow-wrap:anywhere; }
.record-legend { margin:10px 22px; font-size:11px; line-height:1.65; color:#71695f; }
.record-table { width:100%; border-collapse:collapse; table-layout:fixed; font-size:13px; line-height:1.6; }
.record-label-column { width:30%; }
.record-table[data-service-theme="common"] { --service-color:#5d564d; --service-tint:#f5f2ed; --service-line:#ddd6cb; }
.record-table caption { text-align:left; padding:9px 22px; background:var(--service-tint); color:var(--service-color); border-block:1px solid var(--service-line); font-size:13px; font-weight:700; }
.record-table thead th { font-size:10px; color:#71695f; font-weight:500; padding-block:6px; }
.record-print-section { display:none; }
.record-table th, .record-table td { text-align:left; vertical-align:top; padding:9px 22px; overflow-wrap:anywhere; }
.record-table th:first-child { width:30%; }
.record-table th + th, .record-table td { padding-left:18px; border-left:1px solid #eee9e3; }
.record-table tbody tr { border-top:1px solid #eee9e3; }
.record-table tbody th { font-weight:500; background:#fdfcfb; }
.record-field-help { display:block; margin-top:4px; color:#71695f; font-size:.85em; font-weight:400; }
.record-optional { color:#71695f; }
.record-value { white-space:pre-wrap; }
.record-missing { display:inline-block; padding:3px 9px; background:#fff5df; border:1px solid #ead6a9; border-radius:5px; color:#7a561c; font-size:11px; }
.record-verbatim { margin:24px; font:13px/1.8 'DM Sans',sans-serif; white-space:pre-wrap; overflow-wrap:anywhere; }
.clinical-record .record-review { display:flex; flex-direction:column; gap:5px; margin:0; padding:20px 24px; border-top:1px solid #ded8cf; font-size:10px; line-height:1.6; color:#655d53; overflow-wrap:anywhere; }
@media screen and (max-width:560px) {
  .review-drawer { padding:18px; border-radius:0; }
  .review > .section-label .service-context { flex-basis:100%; margin:0; }
  .record-toolbar, .record-actions { gap:8px; }
  .record-toolbar .review-toggle { width:100%; }
  .record-actions { width:100%; }
  .record-actions .button { flex:1 1 auto; font-size:11px; padding:9px 11px; }
  .record-heading { padding:20px 16px 12px; flex-wrap:wrap; }
  .record-heading h4 { font-size:29px; }
  .record-patient-meta { grid-template-columns:1fr; gap:12px; margin-inline:16px; }
  .record-testing, .record-legend, .record-verbatim { margin-inline:16px; }
  .record-table caption { padding:12px 16px; }
  .record-table thead { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
  .record-table colgroup { display:none; }
  .record-table tbody, .record-table tr, .record-table tbody th, .record-table td { display:block; width:auto; }
  .record-table tbody th:first-child { width:auto; }
  .record-table tbody th { padding:10px 16px 3px; background:#fff; }
  .record-table td { border-left:0; padding:0 16px 10px; }
  .clinical-record .record-review { padding:16px; }
}
@page { size:A4 portrait; margin:15mm; }
@page clinical-record-landscape { size:A4 landscape; margin:12mm; }
@media print {
  body { background:#fff; }
  #workspace,dialog,#toast,.skip-link { display:none!important; }
  #printDocument { display:block; white-space:pre-wrap; font:11pt/1.5 Arial,sans-serif; color:#000; padding:0; }
  #printDocument.formatted-print { white-space:normal; page:clinical-record-landscape; }
  .clinical-record { border:0; border-radius:0; overflow:visible; font-family:Arial,sans-serif; }
  .record-heading { padding:0 0 5pt; break-inside:avoid; }
  .record-heading h4 { font:600 18pt/1.2 Georgia,serif; }
  .record-brand { font-size:7pt; margin-bottom:3pt; }
  .record-testing { margin:0 0 5pt; font-size:8pt; }
  .record-patient-meta { margin:0 0 5pt; padding:5pt 0; break-inside:avoid; }
  .record-patient-meta dd { font-size:10pt; }
  .record-legend { margin:4pt 0; font-size:8pt; }
  .record-table { font-size:10pt; line-height:1.35; margin-top:5pt; }
  .record-table caption { display:none; }
  .record-table thead { display:table-header-group; break-inside:avoid; break-after:avoid; }
  .record-table .record-print-section { display:table-row; }
  .record-table .record-print-section th { width:auto; padding:4pt 10pt; background:var(--service-tint); color:var(--service-color); border-block:1px solid var(--service-line); font-size:10pt; font-weight:700; }
  .record-table th,.record-table td { padding:3pt 10pt; }
  .record-table tr { break-inside:avoid; }
  .record-table tr.record-long-row { break-inside:auto; }
  .record-table thead th { font-size:8pt; padding-block:2pt; }
  .record-missing { font-size:9pt; padding:0 6pt; }
  .record-verbatim { margin:12pt 0; font:10pt/1.5 Arial,sans-serif; }
  .clinical-record .record-review { display:grid; grid-template-columns:1fr 1fr; padding:7pt 0 0; margin-top:7pt; font-size:8pt; gap:2pt 14pt; break-inside:avoid; }
  .record-review > strong { grid-column:1/-1; }
}
/* Optional otoscopy workspace follows the selected service accent. */
/* Clinic administration shares the quiet, warm product identity. */
.clinic-area { max-width: 1120px; margin: 0 auto; padding-bottom: 36px; }
.clinic-area .information-intro { max-width: 800px; }
.clinic-area h1 { font: 500 clamp(42px,5vw,64px)/1.08 var(--serif); margin: 18px 0; }
.clinic-area h1 em { color: #886751; }
.clinic-area h2 { font: 500 30px/1.2 var(--serif); }
.clinic-area h3 { font-size: 15px; margin: 26px 0 12px; }
.clinic-area p { line-height: 1.7; font-size: 14px; margin: 12px 0; }
.clinic-safety { border-left: 3px solid #997442; background: #f5efe5; padding: 14px 18px; border-radius: 0 10px 10px 0; }
.clinic-area .information-card { margin-top: 24px; min-width: 0; }
.clinic-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.clinic-columns > * { min-width: 0; }
.clinic-area .field { margin: 18px 0; }
.clinic-area select { min-height: 44px; font: inherit; padding: 10px; border: 1px solid var(--line); border-radius: 8px; width: 100%; background: white; }
.clinic-section-heading,.clinic-row,.clinic-row-actions { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.clinic-row-actions { justify-content: flex-start; }
.clinic-row { border-top: 1px solid var(--line); padding: 18px 0; }
.clinic-row strong,.clinic-member strong { overflow-wrap: anywhere; font-size: 14px; }
.clinic-row p { font-size: 12px; color: var(--muted); margin: 4px 0; }
.clinic-metrics { display: grid; grid-template-columns: repeat(3,1fr); background: #f7f4ef; border-radius: 14px; padding: 22px; gap: 16px; margin: 24px 0; }
.clinic-metrics strong { display: block; font: 500 36px var(--serif); }
.clinic-metrics span { font-size: 12px; color: var(--muted); }
.clinic-badge { display: inline-block; font-size: 12px; background: #e6f0eb; color: #285748; padding: 7px 12px; border-radius: 20px; }
.clinic-member { border: 1px solid var(--line); border-radius: 12px; padding: 18px; margin: 16px 0; }
.clinic-member .check { margin-bottom: 16px; }
.clinic-audit { max-height: 340px; overflow: auto; }
.clinic-audit > div { display: grid; grid-template-columns: 1fr auto; gap: 6px; padding: 14px 0; border-bottom: 1px solid var(--line); font-size: 12px; }
.clinic-audit small { grid-column: 1/-1; color: var(--muted); overflow-wrap: anywhere; }
@media(max-width:680px) { .clinic-columns { grid-template-columns: 1fr; gap: 0; } .clinic-metrics { padding: 16px; gap: 10px; } .clinic-metrics strong { font-size: 30px; } .clinic-audit > div { grid-template-columns: 1fr; } .clinic-area select { font-size: 16px; } }
.otoscopy-entry { margin: 16px 0 4px; }
.otoscopy-entry .button { font-size: 13px; }
dialog:has(.otoscopy-panel) { width: min(1040px, calc(100vw - 32px)); max-width: 1040px; }
.otoscopy-panel { color: var(--ink, #292723); }
.otoscopy-panel select { width: 100%; min-height: 44px; padding: 10px 12px; border: 1px solid #d4ded9; border-radius: 8px; background: #fff; color: var(--ink); font: inherit; }
.otoscopy-panel .primary { background: var(--service-color, #28645a); }
.otoscopy-panel .primary:hover:not(:disabled) { background: var(--service-color, #28645a); filter: brightness(.92); }
.otoscopy-panel input[type="checkbox"] { accent-color: var(--service-color, #28645a); }
dialog:has(.otoscopy-panel) .panel-head { position: sticky; top: 0; z-index: 2; background: white; padding: 8px 0 14px; border-bottom: 1px solid var(--line); }
.otoscopy-panel > p { max-width: 76ch; }
.photo-notice { padding: 16px 20px; border: 1px solid #dccdaf; background: #fbf7ef; border-radius: 14px; margin: 20px 0; }
.photo-notice strong { font-size: 14px; }
.photo-notice p { margin: 8px 0 0; font-size: 13px; line-height: 1.6; }
#photoUploadForm { padding: 20px; background: #f6f8f8; border: 1px solid #dce4e2; border-radius: 16px; margin: 20px 0; }
#photoUploadForm .check { margin: 14px 0; }
.photo-upload-heading { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.photo-upload-heading h3 { font-size: 16px; }
.photo-upload-heading p { font-size: 12px; color: var(--muted); margin-top: 5px; max-width: 62ch; }
.photo-capacity { white-space: nowrap; font-size: 11px; background: white; border: 1px solid #dce4e2; border-radius: 20px; padding: 5px 10px; }
.photo-slots { display: grid; gap: 12px; margin-top: 20px; }
.photo-slot-row { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
.assessment-slots { grid-template-columns: repeat(2,minmax(0,1fr)); }
.assessment-slots .photo-slot-row { display: block; }
.photo-slot { display: grid; grid-template-columns: 38px minmax(0,1fr); align-items: center; gap: 10px 14px; width: 100%; min-height: 128px; padding: 18px; text-align: left; border: 1px dashed var(--service-line,#aacdc3); border-radius: 13px; background: white; transition: background .15s,border-color .15s; }
.photo-slot:hover:not(:disabled),.photo-slot:focus-visible { background: var(--service-tint,#e3f1ed); border-color: var(--service-color,#28645a); }
.photo-slot-icon { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; color: var(--service-color,#28645a); background: var(--service-tint,#e3f1ed); font-size: 24px; font-weight: 400; }
.photo-slot-label { display: grid; gap: 3px; }
.photo-slot-label strong { font-size: 15px; }
.photo-slot-label > span { color: var(--muted); font-size: 12px; }
.photo-slot-footer { grid-column: 1/-1; display: flex; justify-content: space-between; align-items: center; color: var(--service-color,#28645a); font-size: 12px; font-weight: 600; }
.photo-label-correction { margin: 0 0 18px; border-bottom: 1px solid #e7ece9; padding-bottom: 10px; }
.photo-label-correction summary { color: var(--service-color,#28645a); min-height: 36px; }
.photo-label-correction .photo-labels { margin-top: 12px; }
.photo-labels { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.photo-file { margin-top: 14px; }
.photo-file input { width: 100%; max-width: 100%; background: white; }
.photo-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 20px; margin: 20px 0; }
.photo-card { border: 1px solid #dce4e2; border-radius: 18px; overflow: hidden; background: white; min-width: 0; }
.photo-preview { height: 220px; background: #edf1f0; display: grid; place-items: center; padding: 12px; }
.photo-preview img { max-width: 100%; max-height: 196px; object-fit: contain; }
.photo-preview span { font-size: 13px; text-align: center; padding: 16px; }
.photo-card-body { padding: 18px; }
.photo-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.photo-heading h3 { font-size: 15px; line-height: 1.5; margin: 0; }
.photo-card .field { margin-bottom: 12px; min-width: 0; }
.photo-card textarea { min-height: 96px; resize: vertical; }
.photo-card select { max-width: 100%; }
.photo-confirmation { padding: 10px 12px; border-radius: 9px; background: #f4f3ef; font-size: 12px; line-height: 1.5; }
.photo-card-actions { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.photo-card-actions button { font-size: 12px; }
.photo-comparison-links { display: flex; flex-wrap: wrap; gap: 12px; }
.photo-viewer-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,320px),1fr)); gap: 18px; margin: 20px 0; }
.photo-viewer { margin: 0; min-width: 0; }
.photo-viewer figcaption { font-weight: 600; padding: 12px 0; }
.photo-zoom-controls { display: flex; gap: 20px; padding: 12px 0; }
.photo-viewport { height: min(58vh,580px); overflow: auto; background: #edf1f0; border-radius: 12px; padding: 12px; }
.photo-viewport img { width: 100%; max-width: none; height: auto; object-fit: contain; }
.photo-viewport[data-zoom="double"] img { width: 200%; }
.photo-viewport[data-zoom="quad"] img { width: 400%; }
#photoPending { padding: 12px 18px; background: #fbf7ef; border-radius: 12px; }
@media(max-width:640px) { .photo-grid, .photo-labels { grid-template-columns: 1fr; } .photo-card-body,#photoUploadForm { padding: 14px; } .photo-upload-heading { flex-wrap: wrap; gap: 8px; } .photo-slot-row,.assessment-slots { grid-template-columns: 1fr; } .photo-slot { min-height: 112px; padding: 14px; } .otoscopy-panel select { font-size: 16px; } dialog:has(.otoscopy-panel) { width: calc(100vw - 16px); padding: 18px; } }
/* Evidence remains a separate evaluation workspace, never a clinical record. */
.otoscopy-review-heading{display:flex;align-items:center;justify-content:space-between;gap:20px;margin:16px 0}
.otoscopy-review-heading .field{flex:1;max-width:450px}
#panel .otoscopy-review-heading .field,#panel .otoscopy-review-heading .eyebrow{margin:0}
#panel .otoscopy-review-section h3{margin:0 0 12px}
#panel .otoscopy-review-status{max-width:none}
.otoscopy-review-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);align-items:start;gap:22px}
.otoscopy-review-grid>*,.otoscopy-review-grid aside{min-width:0}
.otoscopy-review-section{border:1px solid var(--line);background:#fff;border-radius:12px;padding:20px;margin-bottom:16px;overflow-wrap:anywhere}
.otoscopy-review-section h3{font-size:18px;margin-bottom:12px}
.otoscopy-review-section p{font-size:13px;line-height:1.7;margin:10px 0}
.otoscopy-review-section .field{margin:14px 0}
.otoscopy-review-section .button{margin-top:12px}
.otoscopy-reference-list{max-height:320px;overflow:auto;border-top:1px solid var(--line);margin-top:14px;padding-right:6px}
.otoscopy-reference-list details{border-bottom:1px solid var(--line);padding:10px 0}
.otoscopy-reference-list summary{font-size:13px;line-height:1.5}
.otoscopy-review-status{padding:12px 16px;background:#f3f6f3;color:#285e55;border-radius:8px;margin:12px 0;font-weight:600}
[data-otoscopy-review] [data-photo-action="review"]{display:none}
@media(max-width:800px){.otoscopy-review-grid{grid-template-columns:minmax(0,1fr)}.otoscopy-review-heading{align-items:stretch;flex-direction:column}.otoscopy-review-heading .field{max-width:none}.otoscopy-review-section{padding:16px}}
.evidence-safeguards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;border:1px solid #dce4e2;background:#f4f7f5;border-radius:16px;padding:22px;margin:22px 0}
.evidence-safeguards p{font-size:.82rem;line-height:1.6;margin:8px 0 0}
.evidence-safeguards strong{font-size:.9rem;color:#285e55}
.evidence-register{margin:24px 0!important}
.evidence-source-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:20px;align-items:start}
.evidence-source{border:1px solid #e6dfd6;border-radius:12px;padding:16px;overflow-wrap:anywhere;margin-top:0!important;min-width:0}
.evidence-source summary>span:first-child{display:inline;font-size:.95rem;line-height:1.5;font-weight:600;color:var(--ink);margin:0}
.evidence-source summary>.clinic-badge{display:table;margin:10px 0 0;font-size:.75rem}
.evidence-source p,.evidence-source a{font-size:.85rem;line-height:1.6}
.evidence-source .clinic-row-actions{margin-top:16px}
#evidenceRights fieldset{border:1px solid #e6dfd6;border-radius:12px;padding:16px;margin:16px 0}
@media(max-width:760px){.evidence-safeguards,.evidence-source-list{grid-template-columns:minmax(0,1fr)}}
.evidence-overview{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--line,#e6dfd6);border:1px solid var(--line,#e6dfd6);border-radius:18px;overflow:hidden;margin:24px 0 14px}
.evidence-overview>div{background:#fff;padding:22px;display:grid;gap:6px}
.evidence-overview strong{font:600 2rem 'Cormorant Garamond',serif;color:#8a3027}
.evidence-overview span,.evidence-meta{font-size:.8rem;color:#6b655e}
.learning-resource-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}.learning-resource-grid>.information-card{margin:0;min-width:0}.learning-guidance{grid-column:1/-1}.learning-secondary{margin-top:24px;border:1px solid var(--line,#e6dfd6);border-radius:16px;padding:20px;background:#fff}.learning-secondary>summary{cursor:pointer;min-height:44px;font-weight:600;color:#28635b}.learning-secondary[open]>summary{margin-bottom:20px}@media(max-width:700px){.learning-resource-grid{grid-template-columns:1fr}.learning-secondary{padding:14px}}
.evidence-columns{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:24px;align-items:start}
.evidence-columns>div{min-width:0;display:grid;gap:24px}
.evidence-columns .information-card{margin:0;min-width:0}
.evidence-toolbar{display:flex;flex-wrap:wrap;gap:10px;margin:20px 0}
.evidence-card{padding:22px 0;border-top:1px solid #e6dfd6;overflow-wrap:anywhere}
.evidence-card h3{font-size:1.2rem;margin:4px 0 10px}
.evidence-card .clinic-section-heading{align-items:start;flex-wrap:wrap;gap:10px}
.evidence-meta{display:flex;flex-wrap:wrap;gap:8px 18px;margin:16px 0}
.evidence-area details{margin-top:16px}
.evidence-area summary{cursor:pointer;font-weight:600}
.evidence-area blockquote{margin:16px 0;padding:12px 18px;border-left:3px solid #b82e24;background:#faf7f1;white-space:pre-wrap;overflow-wrap:anywhere}
.evidence-area .check{align-items:flex-start;margin:14px 0}
.evidence-area textarea{min-height:130px}
.evidence-empty{border:1px dashed #d8cfc3;background:#faf7f1;border-radius:12px;padding:22px;margin-top:20px}
.evidence-result{border-top:1px solid #d8cfc3;margin-top:24px;padding-top:20px;overflow-wrap:anywhere}
.evidence-point,.evidence-provenance{margin:16px 0;padding-bottom:14px;border-bottom:1px solid #e6dfd6}
.evidence-result ul{padding-left:22px}
#evidenceEditor fieldset{border:1px solid #e6dfd6;border-radius:12px;padding:16px;margin:16px 0}
@media(max-width:1000px){.evidence-columns{grid-template-columns:minmax(0,1fr)}.evidence-overview{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:400px){.evidence-overview>div{padding:14px}.evidence-toolbar .button{width:100%}}
/* Isolated evaluation workspace: never part of a printable clinical record. */
.image-eval-lab { max-width: 1220px; margin: 0 auto 3rem; }
.eval-warning { padding: 1rem 1.25rem; border: 1px solid #d3bda4; border-radius: 12px; background: #fff9ed; color: #58402c; line-height: 1.6; }
.eval-toolbar { display: flex; flex-wrap: wrap; align-items: end; gap: 1rem; margin: 1.5rem 0; }
.eval-toolbar .field { flex: 1 1 200px; margin: 0; }
.eval-ear-switch { display: flex; flex-wrap: wrap; gap: .5rem; }
.eval-ear-switch button { border: 1px solid #d6cfca; border-radius: 999px; background: #fff; padding: .8rem 1rem; font: inherit; cursor: pointer; }
.eval-ear-switch button[aria-pressed="true"] { background: #345c56; color: white; border-color: #345c56; }
.eval-columns { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 1.75rem; align-items: start; }
.eval-capture, .eval-results { min-width: 0; background: #fff; border: 1px solid #e3ddd6; border-radius: 20px; padding: clamp(1rem,2.5vw,2rem); }
.image-eval-lab fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.image-eval-lab legend { font-weight: 700; font-size: 1.2rem; margin-bottom: 1rem; }
.image-eval-lab .field { display: flex; flex-direction: column; gap: .45rem; margin: 1rem 0; }
.image-eval-lab input:not([type="checkbox"]), .image-eval-lab select, .image-eval-lab textarea { width: 100%; min-width: 0; box-sizing: border-box; font: inherit; border: 1px solid #d9d1c9; border-radius: 8px; padding: .7rem; }
.image-eval-lab .check-row { display: flex; align-items: start; gap: .6rem; margin: .8rem 0; font-size: .92rem; line-height: 1.55; }
.image-eval-lab .check-row input { margin-top: .3rem; flex-shrink: 0; }
.eval-upload { display: flex; flex-direction: column; gap: .75rem; background: #f6f8f6; border: 1px dashed #86a29a; border-radius: 12px; padding: 1rem; }
.eval-upload span { font-weight: 600; }
.eval-upload small { line-height: 1.5; color: #625e58; }
.eval-image { display: block; width: 100%; max-height: 340px; object-fit: contain; background: #f0eeeb; border-radius: 10px; margin: 1rem 0; }
.eval-empty { min-height: 320px; display: flex; flex-direction: column; justify-content: center; text-align: center; color: #6b665e; }
.eval-empty > span { font-size: 5rem; color: #78938b; }
.eval-empty h3, .eval-result h3 { margin: .5rem 0 1rem; }
.eval-result h4 { margin: 1.25rem 0 .6rem; }
.eval-result p, .eval-result li { overflow-wrap: anywhere; line-height: 1.6; }
.eval-observations { padding-left: 1.25rem; }
.eval-observations li { margin: 1rem 0; }
.eval-quality { padding: 1rem; background: #f2f6f4; border-radius: 12px; margin: 1.2rem 0; }
.eval-quality p { margin: .4rem 0; }
.eval-observation-table { overflow-x: auto; margin: .7rem 0 1.4rem; border: 1px solid #deded6; border-radius: 10px; }
.eval-observation-table table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.eval-observation-table th, .eval-observation-table td { padding: .8rem; text-align: left; vertical-align: top; border-bottom: 1px solid #e5e5df; overflow-wrap: anywhere; line-height: 1.5; }
.eval-observation-table thead th { background: #f2f6f4; font-size: .8rem; }
.eval-observation-table tbody th { width: 20%; font-weight: 600; }
.eval-observation-table tr:last-child > * { border-bottom: 0; }
.photo-record-status { border: 1px solid #dce4e2; background: #f2f6f4; border-radius: 14px; padding: 16px 18px; margin: 20px 0; }
.photo-record-status h3 { margin: 0 0 8px; font-size: 16px; }
.photo-record-status p { margin: 8px 0; }
.photo-record-status [data-photo-save-status] { font-weight: 600; }
.photo-record-status[data-state="unsaved"], .photo-record-status[data-state="error"] { background: #fff9ed; border-color: #d3bda4; }
.eval-reading { border-block: 1px solid #ddd5cc; padding: 1rem 0; margin: 1rem 0; }
.eval-reading summary { cursor: pointer; font-weight: 600; }
.eval-reference { padding: .5rem 0; }
.eval-reference blockquote { margin: .7rem 0; padding-left: 1rem; border-left: 3px solid #a6b9af; }
.eval-review-status { border: 1px solid #839f94; background: #f0f6f2; border-radius: 10px; padding: 1rem; }
.eval-retention { font-size: .9rem; color: #6b665e; line-height: 1.6; margin: 1.5rem 0; }
.eval-appointment-context { display: flex; align-items: start; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding: 1rem 0; }
.eval-appointment-context h3 { margin: .4rem 0; }
.eval-appointment-context p { margin: .5rem 0; }
dialog:has(.appointment-image-eval) { width: min(1180px, calc(100vw - 2rem)); max-width: calc(100vw - 2rem); }
.appointment-image-eval .eval-appointment-context { border-bottom: 1px solid var(--border, #e3ddd6); margin-bottom: 1rem; }
.appointment-image-eval .eval-capture, .appointment-image-eval .eval-results { padding: clamp(.8rem,2vw,1.5rem); }
@media(max-width:800px) { .eval-columns { grid-template-columns: minmax(0,1fr); } .eval-empty { min-height: 180px; } }
@media print { .image-eval-lab { display: none !important; } }
.history-record-row { padding: 1rem 0; border-bottom: 1px solid var(--line, #e5ded6); }
.history-text { white-space: pre-wrap; overflow-wrap: anywhere; font: inherit; max-height: 32rem; overflow: auto; }
.history-photo { padding: 1rem 0; border-bottom: 1px solid var(--line, #e5ded6); }
.history-photo img { display: block; max-width: 100%; max-height: 32rem; object-fit: contain; margin-top: 1rem; }
.history-photo img[hidden] { display: none; }
.approval-explanation{margin:0 0 1.25rem;padding:.9rem 1.1rem;border-left:3px solid var(--service-color,#327765);background:#f5f7f5;border-radius:0 8px 8px 0;font-size:.9rem;line-height:1.6;color:#514e49}
.stale-draft-notice{margin:1rem 0;padding:1rem 1.2rem;border:1px solid #dfc58e;background:#fff8e9;border-radius:12px;line-height:1.6}
.stale-draft-notice strong{display:block}
.optional-document-actions{display:flex;gap:.75rem;flex-wrap:wrap}
.appointment .patient-strip{grid-template-columns:1.15fr 1fr .85fr 1fr}
.pack-choices{display:flex;align-items:center;flex-wrap:wrap;gap:12px 22px;padding:20px;margin-top:22px;background:#faf8f5;border:1px solid var(--line);border-radius:12px}
.pack-choices>strong{width:100%;font-size:14px}.pack-choices>span{font-size:12px;color:var(--muted)}.pack-choices .check{margin:0;font-size:13px}.pack-choices>small{width:100%;color:var(--muted)}
.correspondence-choices{width:100%;border-top:1px solid var(--line);padding-top:14px}
.correspondence-choices summary{font-weight:700;cursor:pointer;font-size:14px}
.correspondence-choices summary span{display:inline;font-weight:400;font-size:12px;color:var(--muted);margin-left:8px}
.correspondence-options{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px}
.correspondence-options .check{padding:12px;background:#fff;border:1px solid var(--line);border-radius:9px;align-items:center}
.correspondence-options .check:has(input:checked){border-color:var(--service-color);background:var(--service-tint)}
.pack-choices input[type=checkbox]{accent-color:var(--service-color)}
.correspondence-details{border:0;border-top:1px solid var(--line);padding:16px 0 0;margin:20px 0 0;min-width:0}
.correspondence-details legend{font-size:14px;font-weight:700;padding:0 10px 0 0}
.letter-fields{display:grid;grid-template-columns:1fr 2fr;gap:16px;margin-top:12px}
.letter-fields textarea,.letter-details textarea{min-height:90px}
.letter-address{white-space:pre-line;margin-top:8px;color:var(--muted);font-size:13px}
@media(max-width:760px){.letter-fields,.correspondence-options{grid-template-columns:1fr}}
@media(min-width:761px){.document-pack-nav:has(.pack-card:nth-child(6)){grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(min-width:1100px){.document-pack-nav:has(.pack-card:nth-child(8)){grid-template-columns:repeat(4,minmax(0,1fr))}}
.letter-details{margin-top:14px;border-bottom:1px solid var(--line);padding-bottom:14px}.letter-details summary{font-weight:600;cursor:pointer;padding:12px 0}.letter-details summary span{font-weight:400;color:var(--muted);font-size:12px;margin-left:10px}.letter-details>.field{margin-top:14px}
.document-pack-nav{display:grid;grid-template-columns:repeat(auto-fit,minmax(165px,1fr));gap:10px;margin:4px 0 14px}
.document-pack-nav .pack-card{display:flex;align-items:flex-start;gap:12px;text-align:left;padding:18px 14px;border:1px solid var(--line);border-radius:12px;background:#fff;min-height:94px;text-decoration:none}
.document-pack-nav .pack-card:hover{background:#faf8f5;text-decoration:none}.document-pack-nav .pack-card[aria-pressed=true]{border-color:var(--service-color,var(--red));box-shadow:inset 0 -3px var(--service-color,var(--red));background:#faf8f5}
.pack-card-number{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:28px;height:28px;border-radius:50%;background:#f0ebe5;font-size:10px;letter-spacing:.5px}
.pack-card strong{display:block;font-size:13px;line-height:1.4}.pack-card small{display:block;font-weight:400;font-size:11px;color:var(--muted);margin-top:6px}
.pack-review-hint{font-size:12px;color:var(--muted);margin:0 0 24px;line-height:1.6}
.letter-paper{max-width:860px;margin:0 auto;background:#fff;border:1px solid var(--line);border-top:4px solid var(--service-color,var(--red));border-radius:4px;padding:clamp(20px,4vw,56px);box-shadow:0 8px 28px #33251608}
.letter-paper pre{white-space:pre-wrap;overflow-wrap:anywhere;margin:0;font:14px/1.9 'DM Sans',system-ui,sans-serif;color:var(--ink)}
.letter-heading{padding-bottom:22px;margin-bottom:26px;border-bottom:1px solid var(--line)}.letter-clinic{font-size:12px;font-weight:700;letter-spacing:.7px;color:var(--service-color,var(--red))}.letter-heading h4{font:600 32px/1.2 var(--serif);margin:10px 0 20px}.letter-meta{font-size:12px;color:var(--muted);white-space:pre-wrap;overflow-wrap:anywhere}.letter-paragraph,.letter-section p{white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.9;font-size:14px}.letter-paragraph,.letter-section{margin:0 0 22px}.letter-section h5{font-size:11px;letter-spacing:1px;margin:0 0 8px;color:var(--muted)}
#workspace[data-view="review"] main{padding-top:20px}
#workspace[data-view="review"] .appointment-top{margin-bottom:12px}
#workspace[data-view="review"] .appointment-title{margin-bottom:16px}
#workspace[data-view="review"] .appointment-title h1{font-size:clamp(28px,3vw,40px)}
#workspace[data-view="review"] .appointment-title .subtitle{margin-top:8px}
#workspace[data-view="review"] .pack-review-hint{margin-bottom:14px}
#workspace[data-view="review"] .document-heading{margin-bottom:12px}
@media(max-width:820px){.appointment .patient-strip{grid-template-columns:1fr 1fr}.appointment .patient-strip .field:first-child{grid-column:auto}.document-pack-nav{grid-template-columns:1fr 1fr}}
@media(max-width:760px){.gp-details{grid-template-columns:1fr}.document-pack-nav{grid-template-columns:1fr 1fr}.document-pack-nav .pack-card{min-width:0;padding:14px 10px;gap:8px}.pack-card-number{width:24px;height:24px}.letter-details summary span{display:block;margin-left:0}}
@media(max-width:380px){.appointment .patient-strip{grid-template-columns:1fr}.document-pack-nav{grid-template-columns:1fr}.document-pack-nav .pack-card{min-height:72px}}
@media(max-width:640px){.workflow-steps{flex-wrap:wrap}.approval-explanation{font-size:.85rem}.optional-document-actions{width:100%}.optional-document-actions .button{flex:1}}
@media print {
  #printDocument.letter-print{white-space:normal;page:auto}
  .letter-print .letter-paper{max-width:none;border:0;border-radius:0;padding:0;box-shadow:none}
  .letter-print .letter-heading{break-inside:avoid;padding-bottom:12pt;margin-bottom:16pt}
  .letter-print .letter-heading h4{font:600 22pt/1.2 Georgia,serif}
  .letter-print .letter-clinic{font-size:10pt}
  .letter-print .letter-meta{font-size:9pt}
  .letter-print .letter-paragraph,.letter-print .letter-section p,.letter-print .letter-paper pre{font:10pt/1.5 Arial,sans-serif;orphans:3;widows:3}
  .letter-print .letter-paragraph,.letter-print .letter-section{margin-bottom:12pt}
  .letter-print .letter-section h5{font-size:9pt;break-after:avoid}
  .letter-print-notice{font:8pt/1.4 Arial,sans-serif;margin:0 0 12pt}
  .letter-provenance{white-space:pre-wrap;overflow-wrap:anywhere;border-top:1px solid #ddd;margin-top:16pt;padding-top:8pt;font:7pt/1.4 Arial,sans-serif;break-inside:avoid}
}
.pack-preparation {display:flex;align-items:center;justify-content:space-between;gap:1.5rem;padding:1.2rem 1.4rem;margin:1rem 0 1.5rem;border:1px solid #e4ddd4;border-radius:16px;background:#f4f8f7;}
.pack-preparation p {max-width:68ch;margin:.35rem 0 0;font-size:.94rem;line-height:1.5;}
.pack-preparation button {flex-shrink:0;}
.pack-comparison fieldset {min-width:0;margin:1.25rem 0;padding:1rem;border:1px solid #ded8cf;border-radius:12px;}
.pack-comparison legend {padding:0 .4rem;font-weight:700;}
dialog:has(#packComparison) {width:min(1120px,calc(100vw - 32px));max-width:1120px;}
.pack-compare-columns {display:grid;grid-template-columns:1fr 1fr;gap:1rem;}
.pack-compare-columns section {min-width:0;}
.pack-compare-columns h3 {font-size:1rem;}
.pack-compare-columns pre {white-space:pre-wrap;overflow-wrap:anywhere;font:inherit;font-size:.9rem;line-height:1.6;max-height:24rem;overflow:auto;padding:.8rem;background:#faf9f6;border:1px solid #e4ddd4;border-radius:8px;}
.pack-compare-choices {display:grid;gap:.5rem;margin-top:1rem;}
.pack-compare-choices input[type=radio] {width:18px;height:18px;min-height:18px;flex:0 0 18px;margin:0;padding:0;accent-color:var(--service-color,#28645a);}
@media(max-width:720px){.pack-preparation{align-items:stretch;flex-direction:column;}.pack-compare-columns{grid-template-columns:1fr;}}
@media print{.pack-preparation{display:none!important;}}
.patient-selector{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-top:22px;padding:16px 18px;background:#fff;border:1px solid var(--line);border-radius:12px}
.patient-selector .helper{margin-top:4px}.patient-selector-actions{display:flex;gap:8px;flex-wrap:wrap;flex-shrink:0}.patient-results{display:grid;gap:8px;margin-top:14px}.patient-result{justify-content:space-between;text-align:left}.patient-result span{font-variant-numeric:tabular-nums}#patientDetails input[readonly]{background:#f5f4ef;color:var(--muted)}
@media(max-width:700px){.patient-selector{align-items:stretch;flex-direction:column}.patient-selector-actions>*{flex:1}.patient-result{align-items:flex-start;flex-direction:column;gap:4px}}
.patient-history-heading{background:var(--cream);border:1px solid var(--line);border-radius:10px;padding:16px;margin-bottom:20px}.patient-history-actions{display:flex;gap:8px;flex-wrap:wrap;margin:12px 0}.patient-appointment{border:1px solid var(--line);border-radius:10px;padding:16px;margin-top:14px}.patient-appointment header{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}.patient-appointment header span{color:var(--muted);font-size:12px}.patient-appointment p{font-size:12px}.patient-history-heading,.patient-appointment{overflow-wrap:anywhere}
@media(max-width:600px){.patient-history-actions{flex-direction:column}.patient-history-actions .button{width:100%}}
.clinic-profile-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 20px;margin:20px 0}
.clinic-profile-fields .field{min-width:0;margin:0}
.clinic-profile-fields .field:first-child,.clinic-profile-fields .field:nth-child(2){grid-column:1/-1}
.clinic-letterhead-preview{white-space:pre-line;overflow-wrap:anywhere;border-left:3px solid var(--accent,#286359);padding:12px 18px;margin:14px 0;line-height:1.65;background:#f6f8f6}
.clinic-profile-missing{color:#805934;font-size:.92rem}
/* Administration only: the public homepage and clinical workspace are unchanged. */
.clinic-admin-page .information-intro{max-width:none;text-align:left;margin:0 0 24px}
.clinic-admin-page .information-intro h1{font-size:clamp(34px,4vw,48px);margin:12px 0}
.clinic-admin-page .information-intro>p{max-width:650px;margin-left:0}
.clinic-admin-page>.clinic-safety{font-size:12px;padding:10px 16px}
.clinic-admin-summary{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:28px 0 18px}
.clinic-admin-summary strong{display:block;font-size:20px;overflow-wrap:anywhere}
.clinic-admin-tabs{display:flex;gap:6px;padding:6px;border:1px solid var(--line);border-radius:14px;background:#fff;flex-wrap:wrap}
.clinic-admin-tabs button{border:0;border-radius:9px;background:transparent;padding:12px 18px;min-height:44px;font:600 13px 'DM Sans',sans-serif;color:var(--muted);cursor:pointer;flex:1}
.clinic-admin-tabs button[aria-selected="true"]{background:#e6f2ef;color:#28665d}
.clinic-admin-tabs button:hover{background:#f3f6f4}
.clinic-admin-tabs button:focus-visible{outline:3px solid #327ca6;outline-offset:2px}
.clinic-admin-panel[hidden]{display:none!important}
.clinic-admin-panel .information-card{padding:28px}
.clinic-admin-panel h2{font-size:27px;margin:6px 0 12px}
.clinic-admin-panel .button{min-height:44px;margin:0;font-size:13px}
.clinic-admin-panel .clinic-section-heading{align-items:center}
.clinic-admin-panel .clinic-section-heading .eyebrow{margin-top:0}
.clinic-team-list{display:grid;gap:18px;margin-top:24px}
.clinic-team-person{border:1px solid var(--line);border-radius:14px;min-width:0;overflow:hidden}
.clinic-team-person>header{display:flex;justify-content:space-between;align-items:center;gap:12px;background:#f8f7f4;padding:16px 20px}
.clinic-team-person>header>strong{font-size:14px;overflow-wrap:anywhere;min-width:0}
.clinic-badge-muted{background:#f3eee6;color:#76654e}
.clinic-member-settings{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.7fr);gap:24px;padding:20px}
.clinic-member-settings .clinic-member{border:0;padding:0;margin:0}
.clinic-member-settings h3{margin:0 0 14px;font-size:13px}
.clinic-member-settings .field{margin:0 0 14px}
.clinic-member-workspaces{border-left:1px solid var(--line);padding-left:24px;min-width:0}
.clinic-member-workspaces .profession-member{display:flex;flex-direction:column;align-items:stretch;gap:16px;border:0;padding:0}
.clinic-member-workspaces .profession-save{max-width:none;align-items:flex-start;flex-direction:column;gap:0}
.clinic-member-workspaces .profession-save .button{order:0}
.clinic-member-workspaces .profession-feedback:not(:empty){margin:10px 0 0}
.clinic-member-workspaces{display:flex;flex-direction:column}
.clinic-workspace-slot{display:flex;flex-direction:column;flex:1}
.clinic-member-workspaces .profession-member{flex:1}
.clinic-member-workspaces .profession-save{margin-top:auto}
.clinic-profile-layout{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:28px;align-items:start}
.clinic-profile-layout>*{min-width:0}
.clinic-profile-preview{background:#f5f8f6;border:1px solid #d1e1dc;border-radius:14px;padding:20px;margin-top:18px;overflow-wrap:anywhere}
.clinic-profile-preview .eyebrow{margin-top:0}
.clinic-profile-preview .clinic-letterhead-preview{background:transparent;padding:0;border:0}
.clinic-admin-panel .clinic-platform-tools{padding-bottom:22px;border-bottom:1px solid var(--line)}
.clinic-access-controls{margin-top:28px;border:1px solid #e3d6c6;border-radius:14px;padding:0 20px;background:#faf8f4}
.clinic-access-controls .button[data-clinic-action="clinic-status"]{color:#9e3026}
.clinic-empty{color:var(--muted);background:#f8f7f4;border-radius:10px;padding:14px 18px}
.clinic-audit-entry{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:20px;padding:16px 0;border-bottom:1px solid var(--line);font-size:13px}
.clinic-audit-entry time{font-size:12px;color:var(--muted)}
.clinic-audit-entry details{margin-top:8px;color:var(--muted);font-size:12px}
.clinic-audit-entry summary{cursor:pointer;min-height:24px}
.clinic-audit-entry small{display:block;overflow-wrap:anywhere}
.clinic-audit-pagination{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-top:18px;flex-wrap:wrap}
.clinic-audit-pagination p{font-size:12px;color:var(--muted)}
@media(max-width:800px){.clinic-profile-layout{grid-template-columns:1fr}.clinic-profile-preview{margin-top:0}.clinic-member-settings{grid-template-columns:1fr}.clinic-member-workspaces{border-left:0;border-top:1px solid var(--line);padding:18px 0 0}}
@media(max-width:600px){.clinic-admin-panel .information-card{padding:20px 16px}.clinic-admin-tabs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}.clinic-admin-tabs button{padding:10px 6px;font-size:12px}.clinic-admin-summary{align-items:flex-start;flex-direction:column;gap:10px}.clinic-team-person>header{align-items:flex-start;flex-direction:column;padding:16px}.clinic-member-settings{padding:16px}.clinic-admin-panel .clinic-row-actions{gap:10px}.clinic-audit-entry{grid-template-columns:1fr;gap:10px}.clinic-profile-preview{padding:16px}.clinic-admin-panel .clinic-section-heading{align-items:flex-start}}
#clinicProfile>.button{margin:5px 8px 5px 0}
@media(max-width:600px){.clinic-profile-fields{grid-template-columns:1fr}}
.record-row-footer,.record-actions,.record-view-picker{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.record-row-footer{justify-content:space-between;margin-top:12px}
.record-view-picker{margin:0 0 20px}
.record-view-picker [aria-pressed="true"]{background:var(--service-accent,#2b645c);color:#fff}
.record-action-dialog .check-row{display:flex;align-items:flex-start;gap:12px;margin:18px 0}
.record-action-dialog .check-row[hidden]{display:none}
.record-action-dialog .check-row input{flex:0 0 auto;margin-top:5px}
.record-action-dialog .field{margin:20px 0}
.record-action-dialog select{max-width:100%;width:100%}
@media(max-width:600px){.record-row-footer{align-items:stretch}.record-row-footer>.button,.record-row-footer>.record-actions{width:100%}.record-actions .button{flex:1 1 auto}.record-action-dialog .record-actions{flex-direction:column;align-items:stretch}}
.evidence-columns.evidence-columns-single{grid-template-columns:1fr}
/* Stable capture controls: changing mode or recording status must not resize them. */
.appointment .capture-actions .recording-choice{width:192px;flex:0 0 192px}
.appointment .capture-actions .recording-choice select{width:100%;height:58px;min-height:58px;font-size:14px;border-radius:11px}
.appointment .capture-actions .record-button{width:224px;flex:0 0 224px;height:58px;min-height:58px;padding:12px 16px;white-space:nowrap}
.appointment .capture-actions .record-button svg,.appointment .capture-actions .stop-square{flex-shrink:0}
@media(max-width:560px){
  .appointment .capture-actions .record-controls{flex-direction:column;align-items:stretch;width:100%}
  .appointment .capture-actions .recording-choice{width:100%;flex:0 0 auto}
  .appointment .capture-actions .recording-choice select{font-size:16px}
  .appointment .capture-actions .record-button{width:100%;flex:0 0 auto}
  .appointment .capture-actions #pauseButton{width:100%;min-height:44px}
}
.trial-usage{margin:1rem 0;padding:1rem 1.2rem;border:1px solid #bdd5ce;border-radius:16px;background:#f2f7f5;color:#285f57;max-width:100%;overflow-wrap:anywhere;font-size:.9rem;line-height:1.5}
.trial-usage[hidden],.trial-usage:empty{display:none}
.trial-welcome{display:flex;align-items:center;gap:24px;margin:20px auto;padding:24px;max-width:1100px;border:1px solid #bdd5ce;border-radius:18px;background:#f2f7f5;overflow-wrap:anywhere;color:#285f57}
.trial-welcome[hidden]{display:none}.trial-welcome-copy{flex:1;min-width:0}.trial-welcome h2{font:600 28px/1.2 var(--serif);margin:6px 0 10px;color:var(--ink)}.trial-welcome p{line-height:1.6}.trial-welcome .eyebrow{font-size:10px}.trial-welcome-facts{display:flex;flex-wrap:wrap;gap:10px 22px;margin-top:14px;font-size:13px}.trial-welcome-facts strong{display:block}.trial-welcome-actions{display:flex;flex-direction:column;align-items:stretch;gap:8px;flex:0 0 175px}.trial-welcome-actions small{font-size:11px;color:var(--muted);line-height:1.5}.trial-welcome .helper{font-size:12px}
@media(max-width:700px){.trial-welcome{flex-direction:column;align-items:stretch;gap:16px;padding:18px;margin:14px 0}.trial-welcome-actions{flex:auto;flex-direction:row;flex-wrap:wrap;align-items:center}.trial-welcome-actions small{flex-basis:100%}.trial-welcome-facts{gap:12px 20px}.trial-welcome h2{font-size:25px}}
@media print{.trial-welcome{display:none!important}}
.trial-usage p{margin:.5rem 0;font-size:inherit}
.trial-usage summary{cursor:pointer;font-weight:600}
.trial-usage ul{padding-left:1.25rem;margin:.75rem 0}
.trial-usage a{color:inherit;text-underline-offset:3px}
#trialAudioUsage{flex-basis:100%;grid-column:1 / -1}
@media(max-width:600px){.trial-usage{padding:.8rem;border-radius:12px}}
.trial-audio-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:14px 0 10px;max-width:560px}
.trial-audio-stats dt{font-size:.78rem;color:var(--muted)}
.trial-audio-stats dd{margin:2px 0 0;font-size:1.15rem;font-weight:600;font-variant-numeric:tabular-nums}
.trial-audio-progress{display:block;width:100%;height:5px;border:0;border-radius:10px;overflow:hidden;background:#dce9e5;accent-color:#2c685d}
.trial-audio-progress::-webkit-progress-bar{background:#dce9e5;border-radius:10px}
.trial-audio-progress::-webkit-progress-value{background:#2c685d;border-radius:10px}
.trial-audio-progress::-moz-progress-bar{background:#2c685d;border-radius:10px}
.trial-documents,.trial-rules{margin-top:14px}
.trial-allowance-table{width:100%;border-collapse:collapse;margin:12px 0;font-size:.85rem;color:inherit}
.trial-allowance-table th,.trial-allowance-table td{padding:9px 10px;border-bottom:1px solid #d5e3de;text-align:right;vertical-align:middle;font-variant-numeric:tabular-nums}
.trial-allowance-table th:first-child{text-align:left;padding-left:0;width:60%}
.trial-allowance-table tbody th{font-weight:400}
.trial-allowance-table thead th{font-size:.75rem;font-weight:600;color:var(--muted)}
.trial-allowance-table tr:last-child>*{border-bottom:0}
.trial-balance{display:inline-block;min-width:28px;font-weight:600}
.trial-mobile-pending{display:none}
.trial-usage .trial-allowance-note,.trial-rules{font-size:.8rem}
@media(max-width:600px){.trial-used-column,.trial-pending-column{display:none}.trial-mobile-pending{display:block;font-size:.7rem;white-space:nowrap}.trial-allowance-table th,.trial-allowance-table td{padding:9px 4px}.trial-allowance-table th:first-child{width:70%}.trial-audio-stats{gap:8px}.trial-audio-stats dd{font-size:1.05rem}}
.trial-expiry-reminder{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin:1rem auto;padding:1rem 1.25rem;max-width:1100px;border:1px solid #dccca9;border-left:4px solid #9a742b;border-radius:16px;background:#faf5e9;color:#51452f}
.trial-expiry-reminder[hidden]{display:none}
.trial-expiry-reminder p{margin:.35rem 0 0;font-size:.9rem;line-height:1.6}
.trial-expiry-reminder a{color:#29675f;font-weight:600;flex-shrink:0}
@media(max-width:700px){.trial-expiry-reminder{align-items:flex-start;flex-direction:column;margin:1rem;}.trial-expiry-reminder a{flex-shrink:1}}
@media print{.trial-expiry-reminder{display:none!important}}
.trial-ended{max-width:1100px;margin:24px auto;padding:32px;border:1px solid #dfd7cb;border-radius:22px;background:#fcfaf6;color:var(--ink);overflow-wrap:anywhere}
.trial-ended[hidden]{display:none}.trial-ended h2{font:600 34px/1.2 var(--serif);margin:8px 0 16px}.trial-ended p{line-height:1.65}.trial-ended .eyebrow{color:#78654a;font-size:11px}.trial-ended-options{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin:24px 0}.trial-ended-options>div{padding:20px;background:white;border:1px solid #e5ddd3;border-radius:14px}.trial-ended h3{font-size:16px;margin:0 0 8px}.trial-ended-options p{margin:0;color:var(--muted)}.trial-ended .helper{font-size:13px;color:var(--muted)}.trial-ended-actions{display:flex;gap:12px;flex-wrap:wrap}.trial-ended-actions .button{white-space:normal;text-align:center}.trial-ended.is-compact{padding:20px}.trial-ended.is-compact h2{font-size:24px}
@media(max-width:700px){.trial-ended{padding:20px;margin:16px 0}.trial-ended h2{font-size:28px}.trial-ended-options{grid-template-columns:1fr;gap:12px;margin:18px 0}.trial-ended-actions{flex-direction:column}}
@media print{.trial-ended{display:none!important}}
.billing-plan-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin:24px 0}.billing-plan{padding:24px;border:1px solid #dfd7cb;border-radius:20px;background:#fcfaf6}.billing-plan h2{font-family:var(--serif);margin-top:0}.billing-price{font-size:32px;color:var(--ink)}.billing-price small{font-size:15px;color:var(--muted)}.billing-plan .button{width:100%;white-space:normal}.billing-ack{display:flex;gap:12px;align-items:flex-start;line-height:1.6;margin:24px 0}.billing-ack input{flex-shrink:0;margin-top:6px}
@media(max-width:760px){.billing-plan-grid{grid-template-columns:1fr}}
.contact-options{align-items:start}
.information-tour-action{display:flex;justify-content:center;margin-top:26px}
.information-tour-action .tour-replay-button{min-height:44px;padding:11px 20px;gap:9px;color:var(--green);border-color:#bdd8d2;background:transparent}
.information-tour-action .tour-replay-button:hover{background:#edf5f2;border-color:var(--green)}
.tour-replay-button svg{width:18px;height:18px;flex-shrink:0}
.contact-options .clinic-interest{align-self:start;min-height:0;height:auto}
.clinic-interest .clinic-interest-intro{margin:16px 0 0;font-size:14px;line-height:1.65}
.clinic-interest-actions{display:grid;gap:12px;margin:24px 0}
.contact-options .clinic-interest-actions .button{margin:0;width:100%;min-height:48px;justify-content:space-between;text-align:left;text-decoration:none}
.clinic-interest .clinic-interest-note{border-top:1px solid var(--line);padding-top:18px;margin:0;font-size:12px;line-height:1.65;color:var(--muted)}
.clinic-interest .clinic-interest-help{font-size:12px;line-height:1.65;color:var(--muted);margin:12px 0 0}
.contact-direct{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:24px 0}
.contact-direct a{display:flex;flex-direction:column;gap:6px;border:1px solid #bdd8d2;background:#f1f7f5;border-radius:12px;padding:16px;text-decoration:none;color:var(--green);min-width:0}
.contact-direct a:hover{border-color:var(--green)}
.contact-direct strong{font-size:14px}
.contact-direct span{font-size:12px;overflow-wrap:anywhere}
.contact-fields{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.contact-card .field{margin:0}
.contact-card select{width:100%;min-height:44px;border:1px solid var(--line);border-radius:7px;padding:11px 12px;font:inherit;color:var(--ink);background:white}
.contact-card .contact-safety{font-size:12px;line-height:1.6;background:#f5efe5;border-radius:10px;padding:12px 14px;margin:20px 0}
.contact-card .contact-data-note,.contact-card .contact-company{font-size:12px;line-height:1.6;color:var(--muted);margin:16px 0}
.contact-card .contact-company{border-top:1px solid var(--line);padding-top:18px;margin-bottom:0}
.contact-submit{display:flex;align-items:center;gap:16px;margin-top:18px}
.contact-submit .button{flex-shrink:0;min-height:46px}
.contact-submit #contactStatus{font-size:12px;margin:0;line-height:1.6}
.contact-trap{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
@media(max-width:1100px){.contact-direct,.contact-fields{grid-template-columns:1fr}}
@media(max-width:560px){.contact-submit{flex-direction:column;align-items:stretch}.contact-card select{font-size:16px}}
.billing-layout{display:grid;gap:24px;margin-top:24px;min-width:0}
.billing-layout p{line-height:1.65}
.billing-layout .billing-notice{margin:0;font-size:13px}
.billing-usage{background:#f1f7f5;border:1px solid #bdd8d2;border-radius:18px;padding:22px;color:var(--green)}
.billing-usage>strong{font-size:16px}
.billing-usage>p{margin:10px 0;font-size:13px}
.billing-usage>a{display:inline-block;font-size:13px;margin:4px 0;color:var(--green)}
.billing-usage-metrics{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin:18px 0}
.billing-usage-metrics dt{font-size:12px;color:var(--muted)}
.billing-usage-metrics dd{margin:4px 0 0;font-size:26px;font-weight:600}
.billing-usage-metrics small{font-size:14px;font-weight:400;color:var(--muted)}
.billing-section-heading h2,.billing-included h2,.billing-current h2{font:600 24px/1.2 var(--serif)}
.billing-section-heading p{margin:10px 0 0;color:var(--muted);font-size:13px}
.billing-layout .billing-ack{border:1px solid var(--line);background:#faf8f5;border-radius:12px;padding:16px;margin:18px 0;font-size:13px}
.billing-layout .billing-ack input{margin-top:3px}
.billing-layout .billing-plan-grid{margin:18px 0 0;align-items:stretch}
.billing-layout .billing-plan{display:flex;flex-direction:column;gap:18px;min-width:0;padding:24px}
.billing-layout .billing-plan h3{font:600 28px/1.2 var(--serif);margin:0}
.billing-layout .billing-plan p{margin:0}
.billing-layout .billing-price{font-size:36px;line-height:1.2}
.billing-plan-allowances{margin:0;display:grid;gap:10px}
.billing-plan-allowances>div{display:flex;justify-content:space-between;gap:12px;font-size:13px}
.billing-plan-allowances dt{color:var(--muted)}
.billing-plan-allowances dd{margin:0;font-weight:700}
.billing-layout .billing-plan .button{margin-top:auto;min-height:46px;text-decoration:none}
.billing-current{display:flex;align-items:center;justify-content:space-between;gap:20px}
.billing-current p{margin:8px 0 0;color:var(--muted)}
.billing-included{border-top:1px solid var(--line);padding-top:24px}
.billing-included-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:18px}
.billing-included-grid>div{border-left:2px solid #bdd8d2;padding-left:14px}
.billing-included-grid strong{font-size:14px;color:var(--green)}
.billing-included-grid p{font-size:12px;margin:6px 0 0;color:var(--muted)}
.billing-details summary{cursor:pointer;font-weight:600;min-height:44px;align-content:center;color:var(--green)}
.billing-details p{font-size:13px;margin:8px 0;color:var(--muted)}
.billing-layout .billing-status-footer{display:flex;align-items:center;justify-content:space-between;gap:20px;margin:0;padding:20px 0 0;border-top:1px solid var(--line);background:none}
.billing-status-footer p{margin:0;max-width:480px;font-size:12px;color:var(--muted)}
.billing-status-footer .button{flex-shrink:0}
@media(max-width:760px){
  .billing-included-grid{grid-template-columns:1fr}
  .billing-current,.billing-layout .billing-status-footer{flex-direction:column;align-items:stretch}
  .billing-layout .billing-plan{padding:20px}
  .billing-usage{padding:18px}
  .billing-usage-metrics{gap:12px}
}