/* ---------------------------------------------------------------------------
   Token scale derived from adobe.design.md.

   Adopted: weight contrast (400 body / 500 emphasis / 600 heading) rather than
   a second family; a generous single-default radius with no 4px tier; the
   8px spacing base; and one saturated colour reserved for the primary action.

   Not adopted: the charcoal-tile marketing hero, full-bleed product artwork,
   and the light-only surface set. This is an Operate surface used in both
   themes, so every token below resolves through the existing theme variables.
   --------------------------------------------------------------------------- */
/* Defined on the root, not on the panel: the encounter selector, the Guidance
   clarification card, and the history rows all sit outside the panel and must
   resolve the same scale. */
:root{
  /* type: no step below 12px, and headings earn real size */
  --dc-text-caption:12px;
  --dc-text-body-sm:13px;
  --dc-text-body:14px;
  --dc-text-title-sm:16px;
  --dc-text-title:18px;
  --dc-text-display:22px;
  --dc-weight-body:400;
  --dc-weight-emphasis:500;
  --dc-weight-heading:600;
  /* radius: generous-soft, single default, no tight dev-tools tier */
  --dc-radius-sm:6px;
  --dc-radius-md:16px;
  --dc-radius-lg:20px;
  --dc-radius-pill:25px;
  /* Keep the main panel rhythm generous while compact controls retain their scale. */
  --dc-space-xs:4px;
  --dc-space-sm:8px;
  --dc-space-md:12px;
  --dc-space-base:20px;
  --dc-space-lg:28px;
  --dc-space-xl:32px;
}
.workflow-switch{display:flex;gap:4px;align-items:center;margin:0 0 10px;border-bottom:1px solid var(--border);padding-bottom:7px}
.workflow-btn{border:1px solid var(--border);background:var(--panel2);color:var(--dim);border-radius:6px;padding:7px 12px;font-family:var(--thai);font-size:12px;font-weight:500;cursor:pointer}
.workflow-btn:hover,.workflow-btn:focus-visible{border-color:var(--accent);color:var(--text)}
.workflow-btn.active{background:var(--accent-solid);border-color:var(--accent-solid);color:#fff}
.diagnosis-check-panel{--dc-soft-blue:color-mix(in srgb,var(--accent) 10%,var(--panel));--dc-soft-mint:color-mix(in srgb,var(--good) 12%,var(--panel));--dc-soft-warn:color-mix(in srgb,var(--warn) 12%,var(--panel));--dc-soft-bad:color-mix(in srgb,var(--bad) 11%,var(--panel));--dc-status-bad-text:var(--bad);width:min(1600px,100%);max-width:100%;border:1px solid color-mix(in srgb,var(--accent) 30%,var(--border));background:color-mix(in srgb,var(--accent) 3%,var(--bg));border-radius:var(--dc-radius-lg);padding:var(--dc-space-base);margin:0 auto var(--dc-space-lg);min-width:0;box-sizing:border-box}
.diagnosis-check-panel[hidden]{display:none!important}
.dc-heading{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:12px}
.dc-heading h2{font-size:var(--dc-text-display);font-weight:var(--dc-weight-heading);line-height:1.35;margin:0;letter-spacing:0}
.dc-heading p{font-size:var(--dc-text-body-sm);color:var(--dim);margin-top:var(--dc-space-xs);line-height:1.5}
.dc-heading .dc-reset-btn{flex:0 0 auto;min-height:36px;margin:0;font-size:12px}
.dc-warning{background:color-mix(in srgb,var(--warn) 10%,transparent);border:1px solid color-mix(in srgb,var(--warn) 38%,var(--border));border-radius:var(--dc-radius-sm);color:var(--text);font-size:var(--dc-text-body-sm);line-height:1.6;padding:var(--dc-space-md) var(--dc-space-base);margin-bottom:var(--dc-space-base)}
.dc-workspace-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:12px;align-items:start}
.dc-part{min-width:0;border:1px solid var(--border);border-radius:var(--dc-radius-lg);background:var(--panel);color:var(--text);padding:var(--dc-space-base)}
.dc-part-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;margin-bottom:12px}
.dc-part-heading h3{margin:0;color:var(--text);font-size:var(--dc-text-title-sm);font-weight:var(--dc-weight-heading);line-height:1.4;letter-spacing:0}
.dc-part-heading p{margin:var(--dc-space-xs) 0 0;color:var(--dim);font-size:var(--dc-text-body-sm);line-height:1.55}
.dc-image-part{background:var(--dc-soft-blue)}
/* Until a picture exists this column is only an entry point, so it lies down as
   a single row instead of reserving a share of the workspace width. */
.diagnosis-check-panel:not(.has-image) .dc-image-part{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 18px}
.diagnosis-check-panel:not(.has-image) .dc-image-part .dc-part-heading{margin-bottom:0}
.diagnosis-check-panel:not(.has-image) .dc-image-part .dc-image-tools{display:flex;align-items:center}
/* The OCR accuracy caveat belongs to the moment of reading, which needs an image. */
.diagnosis-check-panel:not(.has-image) .dc-ocr-testing-note{display:none}
.dc-case-part{background:var(--panel)}
.dc-review-part{margin-top:var(--dc-space-lg);padding-top:var(--dc-space-lg);border-top:1px solid var(--border)}
.dc-output-part{min-width:0}
.guidance-source-row{display:flex;align-items:center;flex-wrap:wrap;gap:var(--dc-space-md);margin:0 0 var(--dc-space-md);padding:var(--dc-space-sm) var(--dc-space-md);border:1px solid var(--border);border-radius:var(--dc-radius-sm);background:var(--panel2);color:var(--dim);font-size:var(--dc-text-caption)}
/* 44px pointer target without a taller row: the label carries the height. */
.guidance-source-row label{display:inline-flex;align-items:center;gap:var(--dc-space-xs);min-height:32px;padding:var(--dc-space-xs) 0;color:var(--text);cursor:pointer}
.guidance-source-row input{accent-color:var(--accent-solid,var(--accent));min-width:16px;min-height:16px}
.guidance-web-note{color:var(--dim);font-weight:400}
.guidance-web-note[hidden]{display:none}
body.dc-workflow-active #guidance-source-row,
body.dc-workflow-active #guidance-encounter-control{display:none}
@media(max-width:600px){
  .encounter-control{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:6px!important;padding:10px!important}
  .encounter-control>span:first-child{grid-column:1/-1;font-size:12px;font-weight:600;color:var(--dim);margin-bottom:2px}
  .encounter-control label{display:flex!important;align-items:center;justify-content:center;gap:4px!important;min-height:38px!important;padding:6px 4px!important;border:1px solid var(--border)!important;border-radius:var(--dc-radius-sm)!important;background:var(--panel)!important;color:var(--text)!important;font-size:11px!important;text-align:center;white-space:nowrap;cursor:pointer;box-sizing:border-box;transition:all .15s ease}
  .encounter-control label:has(input:checked){border-color:var(--accent)!important;background:color-mix(in srgb,var(--accent) 12%,var(--panel))!important;color:var(--accent)!important;font-weight:600}
}
/* The scope of a grouped answer is a caption above the question, not a card
   beside it. The extra class outranks .clarify-target, declared later inline. */
.clarify-target.clarify-shared{display:block;max-width:100%;margin-bottom:var(--dc-space-sm);padding:0;border:0;background:none;color:var(--dim);font-family:var(--thai);font-size:var(--dc-text-caption);font-weight:var(--dc-weight-emphasis);line-height:1.5}
.clarify-affected{display:flex;flex-wrap:wrap;gap:0 var(--dc-space-md);margin:2px 0 0;padding:0;list-style:none;color:var(--text);font-size:var(--dc-text-body-sm);font-weight:var(--dc-weight-emphasis)}
/* A separator between names, so a wrapped list still reads as a list. */
.clarify-affected li+li::before{content:"·";margin-right:var(--dc-space-md);color:var(--dim);font-weight:var(--dc-weight-body)}
.dc-image-tools{min-width:0}
.dc-testing-status.dc-ocr-testing-note{margin:0 0 10px;padding:0;border:0;background:transparent;color:color-mix(in srgb,var(--warn) 78%,var(--text));font-size:12px;line-height:1.5}
.dc-image-actions{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.dc-file-btn,.dc-camera-btn,.dc-torch-btn,.dc-text-btn,.dc-icon-btn{display:inline-flex;align-items:center;justify-content:center;gap:5px;border:1px solid var(--border);background:var(--panel);color:var(--text);border-radius:var(--dc-radius-pill);padding:var(--dc-space-sm) var(--dc-space-base);font:var(--dc-weight-emphasis) var(--dc-text-body-sm)/1.2 var(--thai);cursor:pointer;min-height:40px}
.dc-file-btn:hover,.dc-camera-btn:hover,.dc-torch-btn:hover,.dc-text-btn:hover,.dc-icon-btn:hover{border-color:var(--accent);color:var(--accent)}
/* display:inline-flex above beats the [hidden] default, so buttons meant to
   stay hidden until their mode is active were always on screen. */
.dc-file-btn[hidden],.dc-camera-btn[hidden],.dc-torch-btn[hidden],.dc-text-btn[hidden],.dc-icon-btn[hidden]{display:none!important}
.dc-file-btn svg,.dc-camera-btn svg,.dc-torch-btn svg,.dc-icon-btn svg,.dc-actions svg{width:16px;height:16px;stroke-width:2}
.dc-image-editor{margin-top:10px;border-top:1px solid var(--border);padding-top:10px;min-width:0}
.dc-image-editor.is-locked{border-top-color:color-mix(in srgb,var(--good) 55%,var(--border))}
/* Once the text is read the picture has done its job, so it shrinks and hands
   the space to the transcript the coder now has to check. */
.dc-image-editor.is-locked .dc-crop-stage{width:min(100%,300px);min-height:0;aspect-ratio:16 / 10;margin:0}
.dc-image-editor.is-locked .dc-image-warning{display:none}
.dc-image-editor.is-locked .dc-redaction-help{display:none}
.dc-image-editor.is-locked .dc-privacy-confirm{display:none}
@media(min-width:900px){
  .dc-image-editor.is-locked .dc-crop-stage{width:min(100%,340px)}
}
.dc-image-editor.is-locked .dc-image-warning{color:color-mix(in srgb,var(--good) 78%,var(--text))}
.dc-image-editor.is-locked #dc-redaction-layer{pointer-events:none!important;cursor:default}
.dc-image-editor.is-locked .cropper-container{pointer-events:none!important;touch-action:none}
.dc-image-editor.is-locked .cropper-face,.dc-image-editor.is-locked .cropper-line,.dc-image-editor.is-locked .cropper-point{pointer-events:none!important}
/* `display:flex` on these rules outranks the `[hidden]` user-agent default,
   so every one of them has to opt back in explicitly. */
.dc-image-editor[hidden],.dc-camera-panel[hidden],.dc-ocr-confirmation[hidden],.dc-ocr-status[hidden]{display:none!important}
.dc-image-warning{font-size:12px;color:var(--warn);margin-bottom:8px}
.dc-crop-stage{position:relative;width:min(100%,560px);aspect-ratio:4 / 3;height:auto;min-height:220px;margin:0 auto;background:#080a0d;overflow:hidden;border:1px solid var(--border);border-radius:var(--dc-radius-sm)}
.dc-crop-stage>img{display:block;max-width:100%;max-height:100%;margin:auto}
.dc-crop-stage .cropper-container{width:100%;height:100%;max-width:none;max-height:none}
#dc-redaction-layer{position:absolute;inset:0;width:100%;height:100%;z-index:5;pointer-events:none;cursor:crosshair}
.dc-crop-stage .cropper-container{z-index:1}
#dc-redaction-layer{z-index:20;touch-action:none}
/* Three purposes, three groups: look at the image, protect the patient, manage
   the file. A single flat row of ten buttons wrapped into an unreadable block. */
.dc-image-controls{display:flex;gap:8px 14px;align-items:center;flex-wrap:wrap;margin-top:10px}
.dc-control-group{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.dc-control-privacy{padding-left:14px;border-left:1px solid var(--border)}
.dc-control-file{margin-left:auto}
.dc-control-danger:hover,.dc-control-danger:focus-visible{border-color:var(--bad);color:var(--bad)}
@media(max-width:640px){
  .dc-image-controls{gap:8px}
  .dc-control-privacy{padding-left:0;border-left:0}
  .dc-control-group{width:100%}
  .dc-control-file{margin-left:0}
}
.dc-confirm-modal{width:min(92vw,420px);padding:16px;border:1px solid var(--border);border-radius:10px;background:var(--panel);color:var(--text);box-shadow:0 12px 32px -12px rgba(0,0,0,.55)}
.dc-confirm-modal h2, .dc-confirm-modal h3{margin:0 0 6px;font-size:14px;line-height:1.35}
.dc-confirm-modal p{margin:0 0 10px;color:var(--dim);font-size:12px;line-height:1.5}
.dc-confirm-list{margin:0 0 14px;padding-left:18px;color:var(--text);font-size:12px;line-height:1.7}
.dc-confirm-actions{display:flex;justify-content:flex-end;align-items:center;gap:8px}
/* A destructive action must never wear the primary action's colour. */
.dc-confirm-actions .dc-confirm-danger{width:auto;min-height:36px;padding:8px 14px;background:var(--bad);border:1px solid var(--bad);color:#fff;font-weight:600}
.dc-confirm-actions .dc-confirm-danger:hover,.dc-confirm-actions .dc-confirm-danger:focus-visible{background:color-mix(in srgb,var(--bad) 84%,#000);border-color:color-mix(in srgb,var(--bad) 84%,#000)}
.dc-confirm-actions .dc-text-btn{min-height:36px}
.dc-image-viewer-modal{width:min(92vw,1100px);height:min(88vh,900px)}
.dc-image-viewer-close{color:var(--bad)}
/* .img-modal-body is row-flex, built for a single centered flattened <img>.
   The live editor moved in here (v4.14.21) is two children -- the crop
   stage and its controls -- and row-flex forces them to share one line,
   squeezing the stage down to a small box beside the buttons instead of
   filling the modal. Column stacks them instead: stage first and grown to
   fill the remaining height, controls after at their natural size. */
#dc-image-viewer-body{align-items:center;flex-direction:column}
#dc-image-viewer-body img{max-width:100%;max-height:100%;object-fit:contain}
/* The stage's own sizing (aspect-ratio:4/3, width capped at 560px) is tuned
   for its usual home inside the form column, not this much taller/narrower
   modal -- reset it to fill whatever column-flex hands it. */
#dc-image-viewer-body .dc-crop-stage{width:100%;max-width:none;height:auto;aspect-ratio:auto;flex:1}
#dc-image-viewer-body .dc-image-controls{flex:none}
/* Actual size lets the body scroll so fine handwriting stays legible. */
#dc-image-viewer-body.is-actual-size{align-items:flex-start;justify-content:flex-start}
#dc-image-viewer-body.is-actual-size img{max-width:none;max-height:none;object-fit:none}
.dc-icon-btn{width:36px;padding:6px}
.dc-redaction-mode-btn.active{background:color-mix(in srgb,var(--accent) 14%,var(--panel));border-color:var(--accent);color:var(--accent)}
.dc-privacy-confirm{display:flex;align-items:center;gap:7px;min-height:40px;margin-top:10px;padding:6px 8px;border:1px solid color-mix(in srgb,var(--accent) 22%,var(--border));border-radius:6px;background:var(--panel);font-size:11px;color:var(--text);cursor:pointer}
.dc-privacy-confirm input{accent-color:var(--accent)}
.dc-redaction-help{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap;margin-top:7px;color:var(--dim);font-size:12px;line-height:1.45}
.dc-redaction-help strong{color:var(--text);font-weight:600}
.dc-camera-panel{margin-top:10px;border-top:1px solid var(--border);padding-top:10px}
#dc-camera-video{display:block;width:100%;max-height:52vh;background:#080a0d;border-radius:var(--dc-radius-sm);object-fit:contain}
.dc-ocr-confirmation{margin-top:10px;border-top:1px solid var(--border);padding-top:10px}
.dc-ocr-action-row{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--dc-space-sm);margin-top:var(--dc-space-md)}
.dc-ocr-action-row #dc-ocr-btn{min-height:40px;width:100%}
/* A standalone bar at the top of the pane: progress and result always appear
   in the same place instead of beside whichever button last ran. */
.dc-ocr-status{display:flex;align-items:center;gap:var(--dc-space-sm);min-height:36px;margin:0 0 var(--dc-space-md);padding:var(--dc-space-sm) var(--dc-space-base);border:1px solid var(--border);border-radius:var(--dc-radius-sm);background:var(--panel2);color:var(--dim);font-size:var(--dc-text-body-sm);line-height:1.5}
.dc-ocr-status[data-state="loading"]{border-color:color-mix(in srgb,var(--accent) 55%,var(--border));color:var(--accent)}
.dc-ocr-status[data-state="success"],.dc-ocr-status[data-state="high"]{border-color:color-mix(in srgb,var(--good) 55%,var(--border));color:var(--good)}
.dc-ocr-status[data-state="medium"],.dc-ocr-status[data-state="low"],.dc-ocr-status[data-state="error"]{border-color:color-mix(in srgb,var(--warn) 60%,var(--border));color:var(--warn)}
.dc-ocr-summary{display:flex;align-items:flex-start;justify-content:space-between;gap:8px;flex-wrap:wrap;margin-bottom:9px;padding:9px 10px;border-left:1px solid var(--accent);background:color-mix(in srgb,var(--accent) 7%,var(--panel2));font-size:11px}
.dc-ocr-summary strong{color:var(--text)}
.dc-ocr-summary small{color:var(--dim);display:block;margin-top:2px}
.dc-ocr-summary.low{border-left-color:var(--warn)}
.dc-ocr-summary.high{border-left-color:var(--good)}
.dc-ocr-confidence{display:inline-flex;margin-left:var(--dc-space-sm);padding:2px 6px;border-radius:var(--dc-radius-sm);font-size:var(--dc-text-caption);font-weight:var(--dc-weight-emphasis)}
.dc-ocr-confidence.high{background:color-mix(in srgb,var(--good) 15%,transparent);color:var(--good)}
.dc-ocr-confidence.medium,.dc-ocr-confidence.low{background:color-mix(in srgb,var(--warn) 15%,transparent);color:var(--warn)}
.dc-ocr-list-hint{margin:0 0 var(--dc-space-sm);color:var(--dim);font-size:var(--dc-text-caption);line-height:1.5}
/* A checkbox, not a card. The bordered box repeated the same affordance on
   every row and left the diagnosis competing with it for the eye. */
.dc-ocr-accept{display:inline-flex;align-items:center;justify-content:center;min-width:40px;min-height:40px;margin:0;padding:0;cursor:pointer}
.dc-ocr-accept input{accent-color:var(--accent-solid,var(--accent));width:18px;height:18px;margin:0}
.dc-ocr-copy-row{display:flex;align-items:flex-start;gap:7px;margin:8px 0;min-width:0}
.dc-ocr-copy-row textarea{flex:1;width:100%;min-width:0;min-height:160px;resize:vertical;padding:8px 9px;background:var(--bg);border:1px solid var(--border);border-radius:var(--dc-radius-sm);color:var(--text);font:400 12px/1.5 var(--mono)}
.dc-ocr-line{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--dc-space-sm);align-items:start;padding:var(--dc-space-md) 0;border-bottom:1px solid var(--border)}
/* Checkbox first, then the text it governs, so the row reads left to right. */
.dc-ocr-item-head{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--dc-space-sm);align-items:start}
.dc-ocr-item-title{min-width:0;padding-top:var(--dc-space-sm)}
.dc-ocr-line small{display:block;margin-top:2px;color:var(--dim);font-size:var(--dc-text-caption);line-height:1.5}
/* The checkbox is an <input> too, and this rule used to stretch it to the full
   column, which pushed its own label to the far edge and wrapped it. */
.dc-ocr-line input:not([type="checkbox"]),.dc-ocr-line select{width:100%;padding:6px 8px;background:var(--bg);border:1px solid var(--border);border-radius:var(--dc-radius-sm);color:var(--text);font:400 var(--dc-text-body-sm) var(--thai)}
.dc-ocr-line .verbatim{font-family:var(--mono);overflow-wrap:anywhere}
.dc-ocr-line.is-suspicious{border:1px solid color-mix(in srgb,var(--warn) 42%,var(--border));border-radius:var(--dc-radius-sm);background:color-mix(in srgb,var(--warn) 6%,transparent);padding:9px 8px}
.dc-ocr-risk{margin-top:4px;color:var(--warn);font-size:12px;font-weight:600}
.dc-confirm-ocr{margin-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}
.dc-field{display:block;color:var(--text);font-size:var(--dc-text-body-sm);font-weight:var(--dc-weight-emphasis);min-width:0}
.dc-field>span{font-weight:var(--dc-weight-body);color:var(--dim);font-size:var(--dc-text-caption)}
.dc-field input,.dc-field textarea{display:block;width:100%;margin-top:var(--dc-space-sm);padding:10px 12px;background:var(--bg);border:1px solid var(--border);border-radius:var(--dc-radius-sm);color:var(--text);font:var(--dc-weight-body) var(--dc-text-body-sm)/1.5 var(--thai);resize:vertical}
/* Match the app-wide focus ring: a 30%-alpha outline at 0 offset falls below
   the 3:1 required by WCAG 1.4.11, and :focus would also fire on mouse clicks. */
.dc-field input:focus-visible,.dc-field textarea:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-color:var(--accent)}
.dc-field input:focus,.dc-field textarea:focus{border-color:var(--accent)}
.dc-context-field{margin-bottom:14px}
.dc-form-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:12px}
.dc-multi-field{position:relative}
.dc-entry-row{display:flex;gap:var(--dc-space-sm);align-items:stretch}
.dc-entry-row input{min-width:0;flex:1}
.dc-add-btn{min-width:52px;margin-top:var(--dc-space-sm);border:1px solid var(--border);background:var(--panel2);color:var(--text);border-radius:var(--dc-radius-sm);padding:10px 14px;font:var(--dc-weight-emphasis) var(--dc-text-body-sm)/1.5 var(--thai);cursor:pointer;white-space:nowrap}
.dc-add-btn:hover,.dc-add-btn:focus-visible{border-color:var(--accent);color:var(--accent)}
.dc-chip-list{display:flex;flex-wrap:wrap;gap:5px;margin-top:6px;min-height:2px}
.dc-chip{display:inline-flex;align-items:center;gap:5px;max-width:100%;border:1px solid color-mix(in srgb,var(--accent) 36%,var(--border));background:color-mix(in srgb,var(--accent) 8%,var(--panel2));border-radius:12px;padding:3px 7px;color:var(--text);font-size:11px;overflow-wrap:anywhere}
.dc-chip button{display:inline-flex;align-items:center;justify-content:center;min-width:26px;min-height:26px;border:0;border-radius:var(--dc-radius-sm);background:transparent;color:var(--dim);font-size:15px;line-height:1;cursor:pointer;padding:0;transition:all .15s ease}
.dc-chip button:hover,.dc-chip button:focus-visible{color:var(--bad);background:color-mix(in srgb,var(--bad) 15%,transparent)}
.dc-suggestion-list{display:flex;flex-wrap:wrap;gap:4px;margin-top:5px;min-height:0}
.dc-suggestion-list:empty{display:none}
.dc-suggestion{border:0;background:transparent;color:var(--accent);font:400 10px var(--thai);padding:0 2px;cursor:pointer;text-align:left}
.dc-suggestion:hover{text-decoration:underline}
.dc-source-row{display:flex;align-items:flex-start;flex-direction:column;gap:7px;margin-top:0;font-size:12px;color:var(--dim)}
.dc-source-row label{display:inline-flex;align-items:center;gap:4px;color:var(--text);font-weight:400;cursor:pointer}
/* One legal option is not a decision; keep only the explanation. */
.dc-source-row.is-single-option .dc-source-label,.dc-source-row.is-single-option label{display:none}
.dc-source-row input{accent-color:var(--accent-solid,var(--accent));min-width:16px;min-height:16px}
/* Three short options fit one row on a wide pane and wrap on a narrow one,
   which is why this row is a wrapping flex rather than a column. */
.dc-clarify-shared{display:block;margin-top:var(--dc-space-xs);color:var(--text)}
.dc-web-status{color:var(--warn);font-size:12px;line-height:1.4}
.dc-web-status.is-enabled{color:var(--good)}
.dc-web-status button{margin-left:5px;border:1px solid var(--border);background:var(--panel);color:var(--accent);border-radius:var(--dc-radius-sm);padding:2px 6px;font:600 10px var(--thai)}
.dc-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:14px}
.dc-actions button{width:auto;padding:8px 14px}
.dc-primary-actions #dc-review-btn,.dc-primary-actions #dc-stop-review-btn{width:100%;min-height:40px}
/* Every enabled primary action must look actionable. "Current step" is extra
   emphasis on top, not the only thing that makes a button look clickable:
   demoting all the others to flat grey made enabled buttons read as disabled. */
#diagnosis-check-panel .btn-pri{background:var(--accent-solid);border-color:var(--accent-solid);color:#fff}
#diagnosis-check-panel .btn-pri:disabled{opacity:1;background:var(--panel2);border-color:var(--border);color:var(--dim)}
.dc-current-primary{background:var(--accent-solid)!important;border-color:var(--accent-solid)!important;color:#fff!important;box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 30%,transparent)}
.dc-reset-btn.dc-reset-prominent{border-color:color-mix(in srgb,var(--bad) 52%,var(--border));background:var(--dc-soft-bad);color:var(--text);font-weight:600;box-shadow:0 0 0 2px color-mix(in srgb,var(--bad) 16%,transparent)}
.dc-reset-btn.dc-reset-prominent:hover,.dc-reset-btn.dc-reset-prominent:focus-visible{border-color:var(--bad);background:color-mix(in srgb,var(--bad) 12%,var(--panel));color:var(--text)}
#dc-status{font-size:11px;color:var(--dim)}
/* Severity must survive greyscale, so failures carry a mark as well as colour. */
#dc-status.is-error::before{content:"⚠ ";font-weight:700}
/* Floats above the scrolling form (same position:absolute-on-.main anchor
   the history panel already uses) so review status stays visible on a
   long case without the coder having to scroll back up to see it. */
.dc-progress{position:absolute;top:12px;left:50%;transform:translateX(-50%);z-index:850;width:calc(100% - 32px);max-width:420px;margin-top:0;padding:8px 10px;border:1px solid color-mix(in srgb,var(--good) 40%,var(--border));background:color-mix(in srgb,var(--good) 8%,var(--panel2));border-radius:var(--dc-radius-sm);color:var(--dim);box-shadow:0 12px 32px -12px rgba(0,0,0,.35)}
.dc-progress[hidden]{display:none!important}
.dc-progress-head{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:11px}
.dc-progress-head strong{color:var(--accent);font-family:var(--mono);font-size:11px}
.dc-progress-close{background:none;border:0;padding:2px 4px;margin-left:4px;cursor:pointer;color:var(--dim);font-size:13px;line-height:1;border-radius:var(--dc-radius-sm)}
.dc-progress-close:hover,.dc-progress-close:focus-visible{color:var(--text);background:color-mix(in srgb,var(--text) 8%,transparent)}
.dc-progress-track{height:6px;margin-top:6px;background:var(--bg);border:1px solid var(--border);border-radius:999px;overflow:hidden}
.dc-progress-fill{width:100%;height:100%;background:var(--accent);border-radius:999px;transform:scaleX(.03);transform-origin:left center;transition:transform .25s ease}
.dc-progress small{display:block;margin-top:4px;font-size:12px;color:var(--dim)}
.dc-clarify-region,.dc-result-region{margin-top:14px;border-top:1px solid var(--border);padding-top:14px}
.dc-result-region{scroll-margin-top:14px}
.result-block .result-body{padding:12px 16px 16px}
.dc-clarify-box{background:color-mix(in srgb,var(--accent) 9%,var(--panel2));border-left:1px solid var(--accent);padding:11px 12px}
.dc-clarify-box h3{font-size:14px;margin-bottom:5px}
.dc-clarify-box p.dc-clarify-why{color:var(--dim);font-size:12px;margin-bottom:4px}
.dc-clarify-box p.dc-clarify-why b{color:var(--text);font-weight:600}
.dc-clarify-box p.dc-clarify-question{font-size:16px;font-weight:600;color:var(--text)}
.dc-clarify-box p{font-size:12px;margin-bottom:9px}
.dc-choice-row{display:flex;flex-wrap:wrap;gap:6px}
.dc-choice-row button{border:1px solid var(--border);background:var(--panel);color:var(--text);border-radius:var(--dc-radius-sm);padding:6px 9px;font:400 12px var(--thai);cursor:pointer}
.dc-choice-row button:hover,.dc-choice-row button:focus-visible{border-color:var(--accent);color:var(--accent)}
.dc-clarify-input{width:100%;margin-top:8px;padding:8px 10px;background:var(--bg);border:1px solid var(--border);color:var(--text);border-radius:var(--dc-radius-sm);font:400 12px var(--thai)}
.dc-result-summary{display:flex;gap:var(--dc-space-md);flex-wrap:wrap;align-items:center;margin-bottom:var(--dc-space-md)}
/* Neutral by design: the encounter is context for reading the verdict, not a
   verdict of its own, so it must not compete with the status badge. */
.dc-encounter-chip{display:inline-flex;align-items:center;padding:5px 12px;border:1px solid var(--border);border-radius:var(--dc-radius-pill);background:var(--panel2);color:var(--dim);font-size:var(--dc-text-caption);font-weight:var(--dc-weight-emphasis);line-height:1.4}
.dc-encounter-chip[data-encounter="unknown"],.dc-encounter-chip[data-assumed="true"]{border-style:dashed}
.dc-timeline-list{margin:0;padding-left:var(--dc-space-base);color:var(--text);font-size:var(--dc-text-body-sm);line-height:1.7}
.dc-timeline-source{margin:0 0 6px;padding:6px 8px;border-left:2px solid var(--accent);background:var(--dc-soft-blue);color:var(--dim);font-size:var(--dc-text-caption);line-height:1.55}
.dc-timeline-category{color:var(--dim);font-weight:var(--dc-weight-body)}
.dc-timeline-evidence{display:block;color:var(--dim);font-size:var(--dc-text-caption);line-height:1.5}
/* Dark mode needs a lighter red: #f85149 on its own tint measured 4.24:1.
   This is both brighter and readable, which is what the palette needed. */
body:not(.light) .diagnosis-check-panel{--dc-status-bad-text:#ff7b72}
.dc-status-badge{border-radius:var(--dc-radius-pill);padding:5px 12px;line-height:1.4;font-size:var(--dc-text-caption);font-weight:var(--dc-weight-emphasis);white-space:nowrap}
/* overall_status values */
.dc-status-badge.acceptable{background:color-mix(in srgb,var(--good) 12%,var(--panel));color:var(--good)}
.dc-status-badge.needs_revision{background:color-mix(in srgb,var(--warn) 12%,var(--panel));color:var(--warn)}
/* per-item category_assessment values */
.dc-status-badge.appropriate{background:color-mix(in srgb,var(--good) 12%,var(--panel));color:var(--good)}
.dc-status-badge.inappropriate{background:color-mix(in srgb,var(--warn) 12%,var(--panel));color:var(--warn)}
.dc-status-badge.uncertain{background:color-mix(in srgb,var(--dc-status-bad-text) 12%,var(--panel));color:var(--dc-status-bad-text)}
.dc-result-summary p{color:var(--dim);font-size:12px}
.dc-review-metadata{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:-2px 0 10px;padding:5px 7px;border:1px solid var(--border);background:var(--panel2);border-radius:var(--dc-radius-sm);color:var(--dim);font:400 10px var(--mono)}
.dc-review-metadata strong{color:var(--text);font-weight:600}
.dc-review-table{width:100%;border-collapse:collapse;font-size:11px}
.dc-review-table th,.dc-review-table td{border-bottom:1px solid var(--border);padding:8px;text-align:left;vertical-align:top}
.dc-review-table th{color:var(--dim);font-size:11px;font-weight:600;white-space:nowrap}
.dc-review-table td strong{font-size:12px}
/* Numbered answer sections, modelled on the Diagnosis Guidance layout but built
   from theme tokens so light and dark need one definition, not two literal sets. */
.dc-answer-sections{display:flex;flex-direction:column;gap:12px;margin-top:12px}
.dc-sec{--dc-sec-accent:var(--accent);border:1px solid var(--border);border-radius:var(--dc-radius-md);background:var(--panel);overflow:hidden;min-width:0}
.dc-sec-head{display:flex;align-items:center;gap:var(--dc-space-sm);margin:0;padding:var(--dc-space-md) var(--dc-space-base);font-size:var(--dc-text-title-sm);font-weight:var(--dc-weight-heading);color:var(--text);background:color-mix(in srgb,var(--dc-sec-accent) 12%,var(--panel));border-bottom:1px solid color-mix(in srgb,var(--dc-sec-accent) 24%,var(--border))}
.dc-sec-num{display:inline-flex;align-items:center;justify-content:center;flex:0 0 26px;width:26px;height:26px;border-radius:999px;background:var(--dc-sec-accent);color:#fff;font-size:var(--dc-text-body-sm);font-weight:var(--dc-weight-heading)}
.dc-sec-body{padding:var(--dc-space-base);font-size:var(--dc-text-body-sm);line-height:1.65;color:var(--text);min-width:0}
.dc-sec-body>p{color:var(--text)}
.dc-sec-blue{--dc-sec-accent:var(--accent)}
.dc-sec-green{--dc-sec-accent:var(--good)}
.dc-sec-amber{--dc-sec-accent:var(--warn)}
.dc-sec-purple{--dc-sec-accent:color-mix(in srgb,var(--accent) 55%,#7c3aed)}
.dc-sec-slate{--dc-sec-accent:var(--dim)}

/* Label column left, framed values right — the shape the Guidance history
   already uses, which reads as one table instead of a stack of cards. */
.dc-sum-group{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--dc-space-sm);padding:var(--dc-space-sm) 0;border-top:1px solid var(--border)}
.dc-sum-group:first-of-type{border-top:0;padding-top:var(--dc-space-xs)}
.dc-sum-group:last-of-type{padding-bottom:0}
.dc-sum-group-head{margin:0;font-size:12px;font-weight:600;letter-spacing:.1px;color:var(--dim);align-self:start}
.dc-sum-items{display:flex;flex-direction:column;gap:var(--dc-space-md);min-width:0}
.dc-sum-row{padding:0;border:0;background:transparent;min-width:0;overflow-wrap:anywhere}
.dc-sum-row+.dc-sum-row{padding-top:var(--dc-space-md);border-top:1px dashed var(--border)}
/* Only items that need the coder to do something carry a tint; settled rows
   stay plain so the page reads as a table, not a wall of coloured cards. */
.dc-sum-row[data-assessment="ambiguous"],
.dc-sum-row[data-assessment="needs_specificity"],
.dc-sum-row[data-assessment="insufficient_documentation"]{padding:var(--dc-space-md) var(--dc-space-base);border-radius:var(--dc-radius-md)}
.dc-sum-row[data-assessment="ambiguous"],
.dc-sum-row[data-assessment="needs_specificity"]{background:var(--dc-soft-warn)}
.dc-sum-row[data-assessment="insufficient_documentation"]{background:var(--dc-soft-bad)}
.dc-sum-row[data-assessment="ambiguous"]+.dc-sum-row,
.dc-sum-row[data-assessment="needs_specificity"]+.dc-sum-row,
.dc-sum-row[data-assessment="insufficient_documentation"]+.dc-sum-row{border-top:0}
.dc-kv{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--dc-space-xs)}
.dc-kv+.dc-kv{margin-top:var(--dc-space-sm)}
.dc-k{font-size:12px;font-weight:600;letter-spacing:.1px;color:var(--dim)}
.dc-v{min-width:0;display:flex;flex-wrap:wrap;align-items:center;gap:var(--dc-space-sm)}
.dc-sum-dx{font-size:var(--dc-text-body);font-weight:var(--dc-weight-heading);color:var(--text);line-height:1.35}
.dc-sum-move{font-size:var(--dc-text-body-sm);color:var(--warn)}
.dc-sum-move b{color:var(--warn);font-weight:var(--dc-weight-heading)}
.dc-sum-icd{display:flex;flex-wrap:wrap;gap:var(--dc-space-sm)}
.dc-icd-chip{display:inline-flex;align-items:baseline;gap:var(--dc-space-sm);padding:6px 14px;line-height:1.5;border:1px solid color-mix(in srgb,var(--accent) 30%,var(--border));border-radius:var(--dc-radius-pill);background:color-mix(in srgb,var(--accent) 8%,var(--panel));font-size:var(--dc-text-body-sm);color:var(--text)}
.dc-icd-chip b{font-family:var(--mono);font-size:var(--dc-text-body-sm);font-weight:var(--dc-weight-heading);color:var(--accent)}
.dc-icd-none{font-size:var(--dc-text-body-sm);color:var(--dim);line-height:1.55}
@media(min-width:720px){
  .dc-sum-group{grid-template-columns:minmax(120px,150px) minmax(0,1fr);gap:var(--dc-space-lg)}
  .dc-kv{grid-template-columns:minmax(96px,120px) minmax(0,1fr);gap:var(--dc-space-md);align-items:baseline}
  .dc-kv+.dc-kv{margin-top:var(--dc-space-sm)}
}
.dc-sum-detail{margin-top:7px}
.dc-sum-detail>summary{cursor:pointer;font-size:var(--dc-text-body-sm);color:var(--accent);font-weight:var(--dc-weight-emphasis);padding:var(--dc-space-xs) 0}
.dc-detail-row{margin-top:7px;font-size:12px;line-height:1.65}
.dc-detail-row small{display:block;color:var(--dim);font-size:12px;margin-top:2px}
.dc-interpretation-list,.dc-correction-list{display:grid;gap:8px}
.dc-interpretation-row,.dc-correction-row{border:1px solid var(--border);border-radius:var(--dc-radius-sm);background:var(--panel2);padding:9px 10px;min-width:0}
.dc-interpretation-main{display:grid;grid-template-columns:minmax(110px,150px) minmax(0,1fr);gap:8px;align-items:baseline;font-size:12px;line-height:1.55;overflow-wrap:anywhere}
.dc-interpretation-main+.dc-interpretation-main{margin-top:5px;padding-top:5px;border-top:1px solid var(--border)}
.dc-interpretation-main .dc-review-label{margin:0}
.dc-interpretation-status{display:inline-flex;width:max-content;margin-left:6px;padding:2px 6px;border-radius:999px;background:color-mix(in srgb,var(--good) 12%,var(--panel));color:var(--good);font-size:12px;font-weight:600}
.dc-interpretation-meta{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px;color:var(--dim);font-size:12px;line-height:1.5;overflow-wrap:anywhere}
.dc-interpretation-meta b{color:var(--text)}
.dc-interpretation-alternatives{display:flex;flex-wrap:wrap;align-items:center;gap:5px;margin-top:7px;padding-top:6px;border-top:1px solid var(--border)}
.dc-interpretation-alternatives .dc-review-label{margin:0 4px 0 0}
.dc-interpretation-chip{padding:3px 7px;border:1px solid var(--border);border-radius:999px;color:var(--text);font-size:12px;background:var(--panel)}
.dc-interpretation-more{margin-top:8px}
.dc-interpretation-more summary{cursor:pointer;font-size:12px;color:var(--accent);font-weight:600;list-style:none}
.dc-interpretation-more summary::-webkit-details-marker{display:none}
.dc-interpretation-more summary:before{content:'▸ ';display:inline-block}
.dc-interpretation-more[open] summary:before{content:'▾ '}
.dc-interpretation-more[open] summary{margin-bottom:8px}
.dc-interpretation-more .dc-interpretation-list{margin:0}
.dc-quicklinks{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:8px 0 2px;padding:8px 10px;border:1px solid var(--border);border-radius:6px;background:var(--panel2)}
.dc-quicklinks-label{font-size:11px;color:var(--dim);font-weight:600;flex-shrink:0;margin-right:2px}
.dc-quicklink-chip{border:1px solid var(--border);border-radius:999px;background:var(--panel);color:var(--text);font-family:var(--thai);font-size:11px;padding:4px 10px;max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;cursor:pointer}
.dc-quicklink-chip:hover,.dc-quicklink-chip:focus-visible{border-color:var(--accent);color:var(--accent)}
.dc-correction-pair{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:14px;line-height:1.55;overflow-wrap:anywhere}
.dc-correction-pair span{color:var(--accent);font-weight:600}
.dc-correction-row p{margin:6px 0 0;color:var(--dim);font-size:12px;line-height:1.55;overflow-wrap:anywhere}
.dc-abbr-row{margin-bottom:8px;font-size:12px;line-height:1.6}
.dc-abbr-row:last-child{margin-bottom:0}
.dc-evidence-for{display:block;margin-top:2px;font-size:12px;color:var(--dim)}
.dc-reference-items{margin:0;padding-left:18px;font-size:12px;line-height:1.7}
.dc-reference-title{font-weight:600}
.dc-qna-meta{margin:0 0 8px;font-size:12px;color:var(--dim)}
.dc-qna-item{display:block;border:1px solid var(--border);border-radius:var(--dc-radius-sm);background:var(--panel2);margin-bottom:var(--dc-space-sm)}
.dc-qna-item:last-child{margin-bottom:0}
/* The default list-item marker reserves its own inline box; a flex row keeps
   the question on one wrapping block instead of beside a narrow marker. */
.dc-qna-item>summary{display:flex;align-items:baseline;gap:var(--dc-space-sm);cursor:pointer;padding:var(--dc-space-md) var(--dc-space-base);font-size:var(--dc-text-body-sm);font-weight:var(--dc-weight-emphasis);line-height:1.6;color:var(--text)}
.dc-qna-item>summary{list-style:none}
.dc-qna-item>summary::-webkit-details-marker{display:none}
.dc-qna-item>summary::before{content:"▸";flex:none;color:var(--dim);font-size:var(--dc-text-caption)}
.dc-qna-item[open]>summary::before{content:"▾"}
.dc-qna-item>p{padding:0 var(--dc-space-base) var(--dc-space-md) calc(var(--dc-space-base) + var(--dc-space-md));margin:0;font-size:var(--dc-text-body-sm);line-height:1.6;color:var(--dim)}

.dc-review-coverage{margin:0;color:var(--dim);font-size:var(--dc-text-body-sm);line-height:1.5}
.dc-result-section{min-width:0}
.dc-section-heading{display:flex;align-items:baseline;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-bottom:8px}
.dc-section-heading h3{margin:0;color:var(--text);font-size:14px}
.dc-section-heading-actions{display:flex;align-items:center;justify-content:flex-end;gap:8px;flex-wrap:wrap}
.dc-result-reset{min-height:36px}
.dc-review-timestamp{color:var(--dim);font-size:12px}
.dc-qna-list{display:grid;gap:var(--dc-space-sm);margin-top:var(--dc-space-sm)}
.dc-review-label{display:block;color:var(--dim);font-size:12px;margin-bottom:3px}
.dc-review-copy,.dc-review-evidence{margin-top:9px;color:var(--text);font-size:12px;line-height:1.5;overflow-wrap:anywhere}
.dc-review-evidence{padding-top:8px;border-top:1px solid var(--border)}
.dc-review-icd{margin-top:8px;font-size:11px;color:var(--accent)}
.dc-muted{color:var(--dim);font-size:12px}
.dc-coverage-warning,.dc-abbreviation-warning{margin:0 0 10px;padding:8px 10px;border:1px solid color-mix(in srgb,var(--warn) 38%,var(--border));border-radius:var(--dc-radius-sm);background:color-mix(in srgb,var(--warn) 8%,transparent);color:var(--text);font-size:12px;line-height:1.55}
/* The category entered is the physician's own timing claim, disagreeing with
   the case summary — reported for a human to reconcile, never auto-corrected. */
.dc-category-timeline-notice{margin:0 0 10px;padding:8px 10px;border:1px solid color-mix(in srgb,var(--bad) 38%,var(--border));border-radius:var(--dc-radius-sm);background:var(--dc-soft-bad);color:var(--text);font-size:12px;line-height:1.55}
.dc-category-timeline-notice>b{color:var(--bad)}
.dc-external-cause-review{padding-left:8px;border-left:2px solid var(--warn)}
.dc-external-cause-review>b{color:var(--warn)}
.dc-category-timeline-list{margin:5px 0 0;padding-left:18px;display:flex;flex-direction:column;gap:5px}
.dc-abbreviation-warning>div{margin-top:5px;padding-top:5px;border-top:1px solid color-mix(in srgb,var(--warn) 25%,transparent)}
.dc-source-image{margin-left:6px;border:1px solid var(--border);background:var(--panel);color:var(--accent);border-radius:var(--dc-radius-sm);padding:3px 6px;font:600 12px var(--thai);cursor:pointer}
.dc-source-image:hover,.dc-source-image:focus-visible{border-color:var(--accent)}
.history-toggle-row{display:flex;align-items:center;gap:var(--dc-space-base);padding:var(--dc-space-md) 0;color:var(--dim);font-size:var(--dc-text-body-sm)}
.history-toggle-row .btn-sm{color:var(--text);padding:6px 9px}
.dc-history-heading>div{min-width:0}
.dc-history-heading h2{margin:0;color:var(--text);font-size:var(--dc-text-title-sm);font-weight:600;line-height:1.4}
.dc-history-heading p{margin:2px 0 0;color:var(--dim);font-size:var(--dc-text-caption);line-height:1.5}
.dc-history-heading .btn-sm{flex:0 0 auto;min-height:34px}
.dc-evidence-list,.dc-reference-list{margin:4px 0 0;padding-left:17px;color:var(--dim)}
.dc-reference-location{display:block;color:var(--dim);font-size:12px;margin-top:2px}
.dc-web-note{margin-top:10px;border:1px solid color-mix(in srgb,var(--accent) 38%,var(--border));border-radius:var(--dc-radius-sm);padding:7px 9px;background:color-mix(in srgb,var(--accent) 8%,transparent);font-size:12px}
.dc-processing-workflow{margin:10px 0;padding:10px;border:1px solid var(--border);border-radius:6px;background:var(--panel2);overflow:hidden}
.dc-processing-workflow-intro{margin:0 0 8px;color:var(--dim);font-size:12px;line-height:1.5}
.dc-processing-step{padding:9px 10px;border:1px solid var(--border);border-radius:var(--dc-radius-sm);background:var(--panel)}
.dc-processing-step+.dc-processing-step{margin-top:7px}
.dc-processing-step-head{display:flex;align-items:center;gap:8px;min-width:0}
.dc-processing-step-number{display:inline-flex;align-items:center;justify-content:center;flex:0 0 24px;width:24px;height:24px;border-radius:50%;background:var(--accent);color:var(--on-accent,var(--panel));font-size:11px;font-weight:600}
.dc-processing-step h5{margin:0;color:var(--text);font-size:12px;line-height:1.4}
.dc-processing-step p{margin:5px 0 0;color:var(--text);font-size:12px;line-height:1.5}
.dc-processing-step-detail{margin-top:6px;padding-top:6px;border-top:1px solid var(--border);color:var(--dim);font-size:12px;line-height:1.5;overflow-wrap:anywhere}
.dc-processing-step-detail ul{margin:4px 0 0;padding-left:18px}
.dc-processing-step-detail li+li{margin-top:3px}
.dc-model-usage{margin:0 0 8px;padding:6px 8px;border:1px solid var(--border);border-radius:var(--dc-radius-sm);background:var(--panel2)}
.dc-model-usage summary{cursor:pointer;color:var(--accent);font-weight:600}
.dc-model-usage p{margin:5px 0;color:var(--dim)}
.dc-model-usage ul{margin:5px 0 0;padding-left:18px}
.dc-model-usage li+li{margin-top:3px}
.dc-processing-step-timing{margin:0 0 9px;padding:8px 10px;border:1px solid var(--border);border-radius:var(--dc-radius-sm);background:var(--panel);font-size:12px;line-height:1.5}
.dc-processing-step-timing ul{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 16px;margin:5px 0 0;padding-left:18px}
.dc-processing-step-timing li{display:flex;justify-content:space-between;gap:8px;color:var(--dim)}
.dc-processing-step-timing li b{color:var(--text);font-weight:600}
.dc-processing-step-timing li span{white-space:nowrap}
.dc-review-failure{padding:12px;border:1px solid color-mix(in srgb,var(--bad) 55%,var(--border));border-radius:6px;background:var(--dc-soft-bad);color:var(--text);font-size:12px;line-height:1.55}
.dc-review-failure h4{margin:0 0 5px;color:var(--bad);font-size:14px}
.dc-review-failure p{margin:4px 0}
.dc-review-failure details{margin-top:9px;padding-top:8px;border-top:1px solid color-mix(in srgb,var(--bad) 25%,var(--border))}
.dc-review-failure summary{cursor:pointer;color:var(--accent);font-weight:600}
.dc-review-failure ul{display:grid;gap:4px;margin:6px 0 0;padding-left:18px}
.dc-review-failure li{display:flex;justify-content:space-between;gap:10px}
.dc-review-failure li span{white-space:nowrap;color:var(--dim)}
.dc-review-failure-note{color:var(--dim);font-size:12px}
.dc-retry{margin-top:10px;border:1px solid var(--border);background:var(--panel2);color:var(--text);border-radius:var(--dc-radius-sm);padding:7px 10px;font:600 12px var(--thai);cursor:pointer}
.dc-settings-modal{box-sizing:border-box;display:flex;flex-direction:column;gap:10px;width:min(520px,calc(100vw - 24px));min-width:0;max-width:calc(100vw - 24px);max-height:min(86vh,760px);overflow:hidden auto}
.dc-settings-modal>*{box-sizing:border-box;min-width:0;max-width:100%}
.dc-settings-modal .fb-panel-header{min-width:0}
.dc-settings-modal .fb-panel-header>*{min-width:0;max-width:100%;overflow-wrap:anywhere}
.dc-settings-modal .dc-field{min-width:0}
.dc-settings-modal .dc-field>span{overflow-wrap:anywhere}
.dc-settings-modal .dc-field select,.dc-settings-modal .dc-field input,.dc-settings-modal .dc-field textarea{box-sizing:border-box;width:100%;min-width:0;max-width:100%}
.dc-settings-modal .dc-field select{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dc-settings-global{display:grid;gap:8px;padding-bottom:2px}
.dc-settings-group{display:grid;gap:10px;padding-top:12px;border-top:1px solid var(--border)}
.dc-settings-group h3{margin:0;color:var(--text);font-size:14px;font-weight:650;line-height:1.4}
.dc-settings-group>p{margin:-4px 0 0;color:var(--dim);font-size:11px;line-height:1.5}
.dc-settings-group .dc-field>span{display:inline;color:var(--dim);font-size:11px;font-weight:400}
.dc-setting-toggle{display:flex;align-items:center;gap:7px;font-size:12px;color:var(--text);cursor:pointer}
.dc-setting-toggle input{accent-color:var(--accent)}
.dc-settings-modal .dc-field select,.dc-settings-modal .dc-field input,.dc-settings-modal .dc-field textarea{margin-top:4px}
.dc-settings-status{font-size:11px;color:var(--dim);min-height:20px}
.dc-settings-test-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap;min-width:0}
.dc-settings-test-row button{flex:0 0 auto}
#dc-settings-test-status{min-width:0;color:var(--dim);font-size:11px;line-height:1.45;overflow-wrap:anywhere}
#dc-settings-test-status[data-state="loading"]{color:var(--accent)}
#dc-settings-test-status[data-state="success"]{color:var(--good)}
#dc-settings-test-status[data-state="error"]{color:var(--bad)}
body.dc-workflow-active .focus-hero,
body.dc-workflow-active .qbar,
body.dc-workflow-active .simple-help-card,
body.dc-workflow-active .mobile-settings-summary,
body.dc-workflow-active .mobile-quick-actions,
body.dc-workflow-active .advanced-panel,
body.dc-workflow-active .preset-panel{display:none!important}
@media(min-width:900px){
  body.ui-simple.dc-workflow-active .main{max-width:1500px}
}
/* Focus mode must actually reduce this surface, not just resize it. Timing and
   token counts are diagnostics; the answer itself stays untouched. */
body.ui-simple .dc-review-metadata{display:none}
body.dc-workflow-active #history-results-area:not([hidden]){display:block!important}
body.dc-workflow-active #history-results-area:not([hidden]){min-height:180px;max-height:62vh;overflow-y:auto;resize:vertical}
body.dc-workflow-active .history-section.history-open{flex-basis:min(42%,520px);min-height:220px}
.result-block .dc-history-summary{padding:10px 14px 8px}
.result-block .dc-answer-sections{padding:12px 14px}

@media(max-width:899px){
  .workflow-switch{overflow-x:auto;scrollbar-width:none}
  .workflow-btn{flex:1;min-width:0;white-space:nowrap;min-height:42px}
  .diagnosis-check-panel{margin-bottom:10px}
  .dc-heading{align-items:center}
  .dc-heading p{max-width:42ch}
  .dc-review-table{display:block;overflow-x:auto;white-space:normal}
  .dc-review-grid{grid-template-columns:1fr}
  .dc-crop-stage{width:100%;height:auto;min-height:200px}
  .dc-ocr-copy-row{display:block}
  .dc-ocr-copy-row button{width:100%;margin-top:6px;min-height:44px}
  .dc-icon-btn{flex:0 0 44px;min-width:44px;min-height:44px}
  .dc-file-btn,.dc-camera-btn,.dc-torch-btn,.dc-text-btn{min-height:44px}
  .dc-section-heading{align-items:flex-start}
  .dc-section-heading-actions{width:100%;justify-content:space-between}
  .dc-image-actions>*{flex:0 1 auto;min-width:0}
  .dc-entry-row{align-items:stretch}
  .dc-processing-workflow{padding:8px}
  .dc-processing-step{padding:8px}
  .dc-processing-step-timing ul{grid-template-columns:1fr}
  .dc-processing-step-timing li,.dc-review-failure li{display:block}
  .dc-interpretation-main{grid-template-columns:1fr;gap:2px}
  .dc-interpretation-main+.dc-interpretation-main{margin-top:7px;padding-top:7px}
  .edit-modal .btn-pri,.dc-settings-modal #dc-settings-save{width:100%!important;min-height:44px!important;font-size:14px!important;margin-top:12px}
}

@media(min-width:900px){
  .diagnosis-check-panel{padding:var(--dc-space-base)}
  /* Without an image the OCR column holds two buttons, so the case form owns
     the canvas. The two-pane workspace appears once there is an image to read. */
  .dc-workspace-grid{grid-template-columns:minmax(0,1fr);gap:14px}
  .diagnosis-check-panel.has-image .dc-workspace-grid{grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:18px}
  .dc-part{padding:14px}
  .dc-form-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 14px}
  .dc-source-row{align-items:center;flex-direction:row;flex-wrap:wrap;gap:10px}
  .dc-primary-actions #dc-review-btn,.dc-primary-actions #dc-stop-review-btn{width:auto}
  .dc-ocr-action-row{grid-template-columns:minmax(0,1fr) auto;align-items:center}
  .dc-ocr-action-row #dc-ocr-btn{width:auto}
  .dc-ocr-line{grid-template-columns:minmax(0,1fr) minmax(170px,220px)}
  .dc-review-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media(min-width:1200px){
  /* Wide desktop is where handwriting actually gets read, so the image leads. */
  .diagnosis-check-panel.has-image .dc-workspace-grid{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr)}
  .dc-crop-stage{width:min(100%,720px)}
  .dc-ocr-copy-row{display:block}
  .dc-ocr-copy-row textarea{min-height:180px}
  .dc-ocr-copy-row button{margin-top:6px}
}

@media(pointer:coarse){
  .dc-file-btn,.dc-camera-btn,.dc-text-btn,.dc-icon-btn,.dc-add-btn,.dc-history-heading .btn-sm{min-height:44px}
  .dc-icon-btn{width:44px}
  .dc-privacy-confirm,.dc-ocr-accept{min-height:44px}
  .dc-chip button,.dc-suggestion,.dc-source-image,.dc-choice-row button,.dc-web-status button{min-width:44px;min-height:44px}
  /* The primary path was missing from this block: the review and reset buttons,
     every text field, the workflow tabs and the source radios all sat under 44px
     on the very devices the camera capture exists for. */
  .dc-primary-actions #dc-review-btn,.dc-primary-actions #dc-stop-review-btn{min-height:44px}
  .dc-heading .dc-reset-btn,.workflow-btn,.dc-confirm-actions .dc-confirm-danger,.dc-confirm-actions .dc-text-btn{min-height:44px}
  .dc-field input,.dc-field textarea,.dc-field select{min-height:44px}
  .dc-source-row label{min-height:44px;padding:4px 0}
  .dc-source-row input[type="radio"]{width:20px;height:20px}
}

@media(prefers-reduced-motion:reduce){
  .dc-progress-fill,.workflow-btn,.dc-current-primary{transition:none!important}
}