/* Visual overlay for the existing independent doctor workspace.
   Keep the deployed application, permissions, reports, and print styles intact. */
@media screen {
  .doctor-shell > .doctor-topnav {
    position: sticky;
    top: 0;
    z-index: 60;
    min-height: 68px;
    padding: 0 24px;
    grid-template-columns: minmax(160px, 1fr) auto minmax(190px, 1fr);
    gap: 18px;
    border-bottom: 1px solid #cedce8;
    background: #f8fbfe;
    color: #163351;
    box-shadow: none;
  }
  .doctor-topnav .doctor-topnav-brand { gap: 11px; }
  .doctor-topnav .doctor-topnav-brand > span { width: 42px; height: 42px; border: 0; border-radius: 8px; background: #345f87; color: #fff; }
  .doctor-topnav .doctor-topnav-brand > div { display: block; }
  .doctor-topnav .doctor-topnav-brand b { color: #163351; font-size: 16px; letter-spacing: 0; }
  .doctor-topnav .doctor-topnav-brand small { margin-top: 3px; color: #657c94; font-size: 12px; letter-spacing: 0; }
  .doctor-topnav .doctor-mode-switch { min-width: 0; height: 68px; padding: 0; gap: 5px; border: 0; border-radius: 0; background: transparent; }
  .doctor-topnav .doctor-mode-switch button { min-width: 0; min-height: 48px; height: 68px; padding: 0 17px; border-radius: 7px 7px 0 0; border-bottom: 3px solid transparent; color: #536e88; font-size: 15px; font-weight: 650; }
  .doctor-topnav .doctor-mode-switch button > span { display: inline; }
  .doctor-topnav .doctor-mode-switch button.active { border-bottom-color: #3478b6; color: #153754; background: #fff; box-shadow: none; }
  .doctor-topnav .doctor-mode-switch button:hover { color: #254f73; background: #eaf2f9; }
  .doctor-topnav .doctor-mode-switch button small { min-width: 22px; height: 22px; color: #355b7e; background: #e7eef5; font-size: 11px; }
  .doctor-topnav .doctor-topnav-tools { gap: 6px; }
  .doctor-topnav .topnav-live { color: #526f89; font-size: 12px; }
  .doctor-topnav .topnav-live.warning { color: #9c6727; }
  .doctor-topnav .topnav-icon-button { min-width: 38px; min-height: 42px; color: #355b7e; border: 0; border-radius: 6px; background: transparent; }
  .doctor-topnav .topnav-icon-button:hover { color: #153c61; background: #e8f0f7; }
  .doctor-topnav .topnav-icon-button.audio-ready { color: #28794f; }
  .doctor-topnav .doctor-topnav-user { max-width: 150px; height: 42px; padding-inline: 8px; border-color: #dce5ee; color: #3e5d7c; font-size: 13px; }
  .doctor-topnav .doctor-topnav-user > span { display: inline; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  .doctor-topnav .doctor-topnav-user > svg { flex: 0 0 auto; }

  /* These contents exist only in the task workspace, not the configuration or account screens. */
  .doctor-main:not(.scale-configuration-mode):not(.account-management-mode) { padding: 22px 26px 30px; background: #f2f6fa; }
  .doctor-main > .doctor-grid { min-width: 0; gap: 18px; }
  .doctor-main > .doctor-grid > .doctor-panel { min-width: 0; padding: 18px; border: 1px solid #dce5ee; border-radius: 12px; background: #fff; box-shadow: none; }
  .doctor-main > .doctor-grid > .doctor-panel > .doctor-panel-head { min-height: 44px; gap: 12px; margin-bottom: 16px; padding-bottom: 13px; border-color: #e1e8f0; }
  .doctor-main > .doctor-grid .doctor-panel-head > span { color: #bf8649; font-size: 23px; font-weight: 650; }
  .doctor-main > .doctor-grid .doctor-panel-head h2 { margin: 0; color: #163351; font-size: 19px; font-weight: 700; }
  .doctor-main > .doctor-grid .doctor-panel-head > div:not(.task-live-control) > small { color: #71879b; font-size: 11px; line-height: 1.5; letter-spacing: 0; }
  .doctor-main > .doctor-grid .task-live-control { gap: 8px; }
  .doctor-main > .doctor-grid .task-last-refresh { color: #71879b; font-size: 11px; }
  .doctor-main > .doctor-grid .mini-icon-button { width: 34px; height: 34px; color: #54789c; }
  .doctor-main > .doctor-grid > .create-task-panel { position: static; top: auto; max-height: none; overflow: visible; }
  .doctor-main > .doctor-grid > .create-task-panel form { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 12px; }
  .doctor-main > .doctor-grid .create-task-panel form > * { min-width: 0; grid-column: 1 / -1; }
  .doctor-main > .doctor-grid .create-task-panel .form-pair { grid-column: 1; margin: 0; }
  .doctor-main > .doctor-grid .create-task-panel .camera-button { grid-column: 2; width: auto; height: 46px; margin: 0; padding: 0 13px; border-color: #e7d8bf; background: #f5eddf; color: #876032; font-size: 13px; }
  .doctor-main > .doctor-grid .create-task-panel label > span { margin-bottom: 8px; color: #23425f; font-size: 14px; font-weight: 650; }
  .doctor-main > .doctor-grid .create-task-panel .form-pair input { min-width: 0; height: 46px; padding: 0 12px; border: 1px solid #d4e0eb; border-radius: 7px; font-size: 15px; }
  .doctor-main > .doctor-grid .create-task-panel .independent-assessment-note { min-height: 0; padding: 9px 11px; border-color: #dbe7ef; border-radius: 7px; color: #53718b; background: #f3f8fc; font-size: 12px; font-weight: 400; line-height: 1.6; }
  .doctor-main > .doctor-grid .create-task-panel .button { min-height: 44px; border-radius: 7px; font-size: 14px; box-shadow: none; }
  .doctor-main > .doctor-grid .create-task-panel .create-submit { min-height: 48px; margin: 0; border-color: #345f87; color: #fff; background: #345f87; font-size: 16px; }
  .doctor-main > .doctor-grid .direct-scale-picker { margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; }
  .doctor-main > .doctor-grid .scale-picker-head { margin-bottom: 9px; }
  .doctor-main > .doctor-grid .scale-picker-head > span { color: #24496c; font-size: 14px; }
  .doctor-main > .doctor-grid .scale-clear-button { color: #507ca5; font-size: 12px; }
  .doctor-main > .doctor-grid .scale-catalog-search { height: 44px; border-color: #d4e0eb; border-radius: 7px; }
  .doctor-main > .doctor-grid .scale-catalog-search input { font-size: 14px; }
  .doctor-main > .doctor-grid .scale-search-hint { margin-top: 6px; color: #788da1; font-size: 11px; }
  .doctor-main > .doctor-grid .scale-picker-results { border-color: #c9dae9; box-shadow: 0 10px 24px #183a5c18; }
  .doctor-main > .doctor-grid .scale-pick { min-height: 50px; }
  .doctor-main > .doctor-grid .scale-pick-title b { font-size: 14px; }
  .doctor-main > .doctor-grid .scale-pick-copy small { font-size: 12px; }
  .doctor-main > .doctor-grid .current-scale-combination { margin: 0; padding: 12px; border-color: #dbe6ef; background: #f7fafd; }
  .doctor-main > .doctor-grid .current-scale-combination-head span { color: #4e6981; font-size: 12px; }
  .doctor-main > .doctor-grid .current-scale-combination-head small { font-size: 12px; }
  .doctor-main > .doctor-grid .current-scale-abbreviations { font-size: 13px; line-height: 1.6; }
  .doctor-main > .doctor-grid .current-scale-chips { gap: 6px; margin-top: 9px; }
  .doctor-main > .doctor-grid .current-scale-chips > span { max-width: 100%; padding: 5px 8px; border-color: #cfdeeb; border-radius: 6px; color: #355b7c; font-size: 12px; }
  .doctor-main > .doctor-grid .current-scale-chips b { max-width: 100%; white-space: normal; overflow-wrap: anywhere; }
  .doctor-main > .doctor-grid .current-scale-chips em { font-size: 10px; }
  .doctor-main > .doctor-grid .scale-package-config { margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; }
  .doctor-main > .doctor-grid .quick-scale-packages .scale-package-list { max-height: 222px; margin-top: 9px; }
  /* A row menu must remain reachable instead of being clipped by its list scroller. */
  .doctor-main > .doctor-grid .quick-scale-packages:has(.scale-package-menu) .scale-package-list { max-height: none; overflow: visible; }
  .doctor-main > .doctor-grid .scale-package-title > span { color: #24496c; font-size: 14px; }
  .doctor-main > .doctor-grid .scale-package-title > small { color: #8395a7; font-size: 11px; }
  .doctor-main > .doctor-grid .scale-package-row { min-height: 50px; margin-top: 7px; padding: 7px 9px; gap: 8px; border: 1px solid #e0e8f0; border-radius: 6px; background: #fff; }
  .doctor-main > .doctor-grid .scale-package-info b { color: #24496c; font-size: 13px; font-weight: 600; }
  .doctor-main > .doctor-grid .scale-package-info small { margin-top: 3px; color: #7a8fa2; font-size: 11px; }
  .doctor-main > .doctor-grid .scale-package-use { height: 34px; padding: 0 9px; border-color: #e0ebf4; color: #3b7daf; background: #f0f6fb; font-size: 13px; }
  .doctor-main > .doctor-grid .scale-package-more-button { height: 34px; font-size: 11px; }
  .doctor-main > .doctor-grid .scale-package-menu button { min-height: 40px; font-size: 12px; }
  .doctor-main > .doctor-grid .scale-package-empty { font-size: 12px; line-height: 1.6; }
  .doctor-main > .doctor-grid .package-manager-disclosure { border-color: #dce5ee; border-radius: 7px; background: #fff; }
  .doctor-main > .doctor-grid .package-manager-disclosure summary b { color: #446681; font-size: 13px; }
  .doctor-main > .doctor-grid .package-manager-disclosure summary small { font-size: 11px; }
  .doctor-main > .doctor-grid .scale-package-save { flex-wrap: wrap; }
  .doctor-main > .doctor-grid .scale-package-save input { min-width: 120px; height: 42px; border-color: #d4e0eb; font-size: 13px; }

  /* The live DOM has no list wrapper: scroll panel 02 itself, without nested list scrollers. */
  .doctor-main > .doctor-grid > .task-list-panel .task-list { max-height: none; overflow: visible; }
  .doctor-main > .doctor-grid .task-search { height: 44px; margin-bottom: 12px; border-color: #dce5ee; border-radius: 7px; background: #f8fafc; }
  .doctor-main > .doctor-grid .task-search input { color: #24496c; font-size: 14px; }
  .doctor-main > .doctor-grid .task-section-heading { min-height: 30px; padding: 0 8px; }
  .doctor-main > .doctor-grid .task-section-heading span { color: #657c94; font-size: 12px; font-weight: 600; }
  .doctor-main > .doctor-grid .task-section-heading small { color: #8395a7; font-size: 11px; }
  .doctor-main > .doctor-grid .task-list-row { min-height: 72px; padding: 12px 9px; grid-template-columns: 34px minmax(0, 1fr) auto 16px; gap: 10px; border-color: #e4ebf2; }
  .doctor-main > .doctor-grid .task-list-row.selected { background: #e8f1fa; box-shadow: inset 3px 0 #2c77b4; }
  .doctor-main > .doctor-grid .task-list-row:hover { background: #f0f6fc; }
  .doctor-main > .doctor-grid .task-avatar { width: 32px; height: 32px; border-radius: 7px; color: #6387a6; background: #edf4fa; }
  .doctor-main > .doctor-grid .task-list-main > b { color: #173a5b; font-size: 14px; font-weight: 650; }
  .doctor-main > .doctor-grid .task-list-meta small { color: #6d849a; font-size: 12px; line-height: 1.5; }
  .doctor-main > .doctor-grid .task-list-state { min-width: 74px; gap: 5px; }
  .doctor-main > .doctor-grid .status-pill { font-size: 11px; }
  .doctor-main > .doctor-grid .history-task-group { border-color: #e1e8f0; }
  .doctor-main > .doctor-grid .history-task-summary { min-height: 44px; color: #426988; }
  .doctor-main > .doctor-grid .history-task-summary b { font-size: 13px; }
  .doctor-main > .doctor-grid .history-task-summary small { background: #edf3f8; font-size: 11px; }

  /* Preserve each existing handoff node and action; reports and QR print sheets are portals. */
  .doctor-main > .doctor-grid .task-detail-content[data-psych-delivery-mode="web_independent"] { display: grid; min-width: 0; grid-template-columns: minmax(0, 1fr); grid-template-areas: none; gap: 16px; align-items: start; }
  .doctor-main > .doctor-grid .task-detail-content[data-psych-delivery-mode="web_independent"] > :where(:not(.ordinary-report-overlay)) { min-width: 0; grid-area: auto; grid-column: auto; }
  .doctor-main > .doctor-grid .task-detail-content > .task-handoff-primary-row.independent-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; align-content: start; }
  .doctor-main > .doctor-grid .task-handoff-primary-row.independent-actions > .patient-label { grid-column: 1 / -1; min-height: 0; margin: 0 0 4px; padding: 0 0 8px; grid-template-columns: minmax(0, 1fr); gap: 6px; border-radius: 0; color: #163351; background: transparent; overflow: visible; }
  .doctor-main > .doctor-grid .task-handoff-primary-row .patient-label::after,
  .doctor-main > .doctor-grid .task-handoff-primary-row .label-mark { display: none; }
  .doctor-main > .doctor-grid .task-handoff-primary-row .label-id small { color: #71879b; font-size: 12px; letter-spacing: 0; }
  .doctor-main > .doctor-grid .task-handoff-primary-row .label-id strong { margin-top: 5px; color: #173a5b; font-size: 21px; line-height: 1.4; white-space: normal; overflow-wrap: anywhere; }
  .doctor-main > .doctor-grid .task-handoff-primary-row .label-token { position: static; display: block; color: #8194a6; font-size: 11px; line-height: 1.5; overflow-wrap: anywhere; }
  .doctor-main > .doctor-grid .task-handoff-primary-row .task-primary-action { min-height: 44px; height: auto; padding: 9px 10px; flex-direction: row; gap: 6px; border-radius: 7px; border-color: #c7d7e6; color: #3d6288; background: #f8fbfe; font-size: 13px; font-weight: 600; line-height: 1.5; white-space: normal; box-shadow: none; }
  .doctor-main > .doctor-grid .task-handoff-primary-row .task-primary-action svg { flex: 0 0 auto; }
  .doctor-main > .doctor-grid .task-handoff-primary-row .print-qr-button { border-color: #345f87; color: #fff; background: #345f87; }
  .doctor-main > .doctor-grid .task-handoff-primary-row .print-qr-button:not(:disabled):hover { background: #254f75; box-shadow: none; }
  .doctor-main > .doctor-grid .task-handoff-primary-row .clinician-assessment-open:disabled { border-style: dashed; border-color: #d6dfe7; color: #8997a4; background: #f4f7f9; cursor: not-allowed; opacity: 1; }
  .doctor-main > .doctor-grid .task-detail-content > .detail-button-row { display: flex; margin: 0; }
  .doctor-main > .doctor-grid .task-detail-content > .detail-button-row .copy-patient-link-button { grid-area: auto; min-height: 40px; height: auto; margin: 0; padding: 8px 11px; border-color: #c7d7e6; border-radius: 7px; color: #496d89; font-size: 13px; align-self: start; }
  .doctor-main > .doctor-grid .task-detail-content > .patient-link { min-height: 0; margin: 0; padding: 8px 10px; border-radius: 6px; color: #71879b; background: #f5f8fb; font-size: 11px; line-height: 1.6; }
  .doctor-main > .doctor-grid .task-detail-content > .patient-link span { white-space: normal; overflow-wrap: anywhere; }
  .doctor-main > .doctor-grid .task-detail-content > .patient-qr-card { height: auto; min-height: 0; margin: 0; padding: 0; border: 0; border-radius: 0; grid-template-columns: 106px minmax(0, 1fr); gap: 12px; align-self: start; background: transparent; }
  .doctor-main > .doctor-grid .patient-qr-card .patient-qr-image { width: 106px; height: 106px; border-color: #dce5ee; }
  .doctor-main > .doctor-grid .patient-qr-card .patient-qr-copy { min-width: 0; }
  .doctor-main > .doctor-grid .patient-qr-copy > span { color: #466f91; font-size: 12px; letter-spacing: 0; }
  .doctor-main > .doctor-grid .patient-qr-copy b { color: #24496c; font-size: 13px; line-height: 1.6; }
  .doctor-main > .doctor-grid .patient-qr-copy :is(p, small) { color: #71879b; font-size: 12px; line-height: 1.6; }
  .doctor-main > .doctor-grid .task-detail-content > .muted.no-print { margin: 0; color: #6c8091; font-size: 13px; line-height: 1.7; }
  .doctor-main > .doctor-grid .task-detail-content > .detail-section { margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; }
  .doctor-main > .doctor-grid .task-detail-content > .detail-section > .detail-section-title { min-width: 0; min-height: 36px; flex-wrap: wrap; }
  .doctor-main > .doctor-grid .task-detail-content > .detail-section > .detail-section-title b { color: #315777; font-size: 14px; }
  .doctor-main > .doctor-grid .task-detail-content > .detail-section > .detail-section-title > span:not(.status-pill) { font-size: 12px; }
  .doctor-main > .doctor-grid .scale-detail-section .scale-append-button { width: 36px; height: 36px; border-radius: 7px; color: #3b709b; }
  .doctor-main > .doctor-grid .scale-detail-section .assigned-scales { gap: 7px; max-height: 220px; margin-top: 9px; overflow-y: auto; overscroll-behavior: contain; scrollbar-color: #bdcddd transparent; }
  .doctor-main > .doctor-grid .scale-detail-section .assigned-scales > span { max-width: 100%; min-height: 30px; padding: 5px 9px 5px 5px; border-radius: 6px; color: #315777; background: #edf4fa; font-size: 12px; line-height: 1.5; overflow-wrap: anywhere; }
  .doctor-main > .doctor-grid .assigned-scales i { flex: 0 0 20px; width: 20px; height: 20px; border-radius: 5px; color: #557b9a; background: #dfeaf4; font-size: 10px; }
  .doctor-main > .doctor-grid .task-management-editor { padding: 11px; border-color: #dce5ee; border-radius: 8px; background: #f7fafd; }
  .doctor-main > .doctor-grid .task-management-list { max-height: 224px; }
  .doctor-main > .doctor-grid .task-management-scale { min-width: 0; grid-template-columns: 20px minmax(0, 1fr); gap: 3px 7px; }
  .doctor-main > .doctor-grid .task-management-scale > span { grid-row: 1 / 3; }
  .doctor-main > .doctor-grid .task-management-scale :is(b, small) { grid-column: 2; min-width: 0; white-space: normal; overflow-wrap: anywhere; }
  .doctor-main > .doctor-grid .task-management-scale b { font-size: 13px; }
  .doctor-main > .doctor-grid .task-management-scale small { font-size: 12px; line-height: 1.5; }
  .doctor-main > .doctor-grid .task-management-footer { flex-wrap: wrap; }
  .doctor-main > .doctor-grid .task-management-footer > span { font-size: 12px; }
  .doctor-main > .doctor-grid .task-management-footer .button { min-height: 40px; border-radius: 7px; font-size: 13px; }
  .doctor-main > .doctor-grid .task-detail-content > .oa-status-box.web-result { margin: 0; padding: 12px; border: 1px solid #dbe7ef; border-radius: 8px; background: #f5f9fc; }
  .doctor-main > .doctor-grid .oa-status-box.web-result small { color: #6b879d; font-size: 11px; }
  .doctor-main > .doctor-grid .oa-status-box.web-result b { color: #355b79; font-size: 15px; }
  .doctor-main > .doctor-grid .oa-status-box.web-result p { color: #71879b; font-size: 12px; line-height: 1.6; }
  .doctor-main > .doctor-grid .task-detail-content > .task-management-section { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; padding-top: 13px; border-top: 1px solid #e1e8f0; }
  .doctor-main > .doctor-grid .task-management-section .task-management-actions { margin: 0; }
  .doctor-main > .doctor-grid .task-management-section .button { min-height: 40px; height: auto; padding: 7px 11px; border-radius: 7px; font-size: 13px; }
  .doctor-main > .doctor-grid .task-management-section > .task-management-error { flex-basis: 100%; margin: 0; }
  .doctor-main > .doctor-grid :is(.task-management-error, .task-primary-error) { font-size: 13px; line-height: 1.6; overflow-wrap: anywhere; }
}

@media screen and (min-width: 960px) {
  .doctor-main > .doctor-grid { grid-template-columns: minmax(345px, 42fr) minmax(0, 58fr); grid-template-areas: "create list" "detail detail"; grid-template-rows: auto auto; align-items: start; }
  .doctor-main > .doctor-grid > .create-task-panel { grid-area: create; grid-column: 1; }
  .doctor-main > .doctor-grid > .task-list-panel { grid-area: list; grid-column: 2; align-self: stretch; min-height: 0; contain: size; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; scrollbar-gutter: stable; scrollbar-color: #aebfd0 transparent; }
  .doctor-main > .doctor-grid > .task-detail-panel { grid-area: detail; grid-column: 1 / -1; }
  .doctor-main > .doctor-grid .task-detail-content[data-psych-delivery-mode="web_independent"] { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.15fr); grid-template-areas: "primary qr scales" "primary qr answer" "copy link oa" "report-error report-error report-error" "manage manage manage"; gap: 14px 24px; }
  .doctor-main > .doctor-grid .task-detail-content > .task-handoff-primary-row.independent-actions { grid-area: primary; }
  .doctor-main > .doctor-grid .task-detail-content > .detail-button-row { grid-area: copy; }
  .doctor-main > .doctor-grid .task-detail-content > .patient-link { grid-area: link; }
  .doctor-main > .doctor-grid .task-detail-content > .patient-qr-card { grid-area: qr; grid-template-columns: 106px minmax(0, 1fr); }
  .doctor-main > .doctor-grid .task-detail-content > .scale-detail-section { grid-area: scales; }
  .doctor-main > .doctor-grid .task-detail-content > .answer-status-section { grid-area: answer; }
  .doctor-main > .doctor-grid .task-detail-content > .oa-status-box.web-result { grid-area: oa; }
  .doctor-main > .doctor-grid .task-detail-content > .task-primary-error { grid-area: report-error; margin: 0; }
  .doctor-main > .doctor-grid .task-detail-content > .task-management-section { grid-area: manage; }
  .doctor-main > .doctor-grid .task-detail-content > .muted.no-print { grid-column: 1 / -1; grid-row: auto; }
  /* Clinician-only tasks have no QR/copy/link nodes. Keep the existing instruction visible. */
  .doctor-main > .doctor-grid .task-detail-content[data-psych-delivery-mode="web_independent"]:not(:has(> .patient-qr-card)) { grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); grid-template-areas: "primary scales" "primary answer" "oa oa" "report-error report-error" "manage manage"; }
}

@media screen and (min-width: 960px) and (max-width: 1279px) {
  .doctor-shell > .doctor-topnav { grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; padding-inline: 18px; }
  .doctor-topnav .doctor-topnav-brand small,
  .doctor-topnav .topnav-live { display: none; }
  .doctor-topnav .doctor-mode-switch { justify-self: center; }
  .doctor-topnav .doctor-mode-switch button { padding-inline: 12px; font-size: 14px; }
  .doctor-topnav .doctor-mode-switch button > svg { display: none; }
  .doctor-main:not(.scale-configuration-mode):not(.account-management-mode) { padding: 18px; }
  .doctor-main > .doctor-grid { gap: 16px; }
  .doctor-main > .doctor-grid > .doctor-panel { padding: 16px; }
  .doctor-main > .doctor-grid > .task-list-panel > .doctor-panel-head { flex-wrap: wrap; }
  .doctor-main > .doctor-grid > .task-list-panel .task-live-control { flex-basis: 100%; justify-content: flex-end; }
  .doctor-main > .doctor-grid .task-detail-content > .patient-qr-card { grid-template-columns: 1fr; justify-items: start; }
}

@media screen and (max-width: 959px) {
  .doctor-shell > .doctor-topnav { grid-template-columns: minmax(0, 1fr) auto; gap: 0 10px; padding: 0 16px; }
  .doctor-topnav .doctor-topnav-brand { grid-column: 1; grid-row: 1; min-height: 60px; }
  .doctor-topnav .doctor-topnav-tools { grid-column: 2; grid-row: 1; justify-self: end; }
  .doctor-topnav .doctor-mode-switch { grid-column: 1 / -1; grid-row: 2; justify-self: stretch; justify-content: center; height: 48px; gap: 4px; }
  .doctor-topnav .doctor-mode-switch button { flex: 1 1 auto; justify-content: center; height: 48px; padding: 0 12px; font-size: 14px; }
  .doctor-topnav .doctor-mode-switch button > svg { display: none; }
  .doctor-topnav .doctor-topnav-user { display: flex; max-width: 120px; margin: 0; padding: 0 6px; }
  .doctor-topnav .topnav-live { display: none; }
  .doctor-main:not(.scale-configuration-mode):not(.account-management-mode) { padding: 16px; }
  .doctor-main > .doctor-grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: none; grid-template-rows: auto; }
  .doctor-main > .doctor-grid > .doctor-panel { grid-area: auto; grid-column: auto; height: auto; max-height: none; min-height: 0; contain: none; overflow: visible; }
  .doctor-main > .doctor-grid .task-detail-content[data-psych-delivery-mode="web_independent"] { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "primary primary" "copy link" "qr scales" "answer oa" "report-error report-error" "manage manage"; }
  .doctor-main > .doctor-grid .task-detail-content > .task-handoff-primary-row.independent-actions { grid-area: primary; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .doctor-main > .doctor-grid .task-detail-content > .detail-button-row { grid-area: copy; }
  .doctor-main > .doctor-grid .task-detail-content > .patient-link { grid-area: link; }
  .doctor-main > .doctor-grid .task-detail-content > .patient-qr-card { grid-area: qr; grid-template-columns: 1fr; justify-items: start; }
  .doctor-main > .doctor-grid .task-detail-content > .scale-detail-section { grid-area: scales; }
  .doctor-main > .doctor-grid .task-detail-content > .answer-status-section { grid-area: answer; }
  .doctor-main > .doctor-grid .task-detail-content > .oa-status-box.web-result { grid-area: oa; }
  .doctor-main > .doctor-grid .task-detail-content > .task-primary-error { grid-area: report-error; }
  .doctor-main > .doctor-grid .task-detail-content > .task-management-section { grid-area: manage; }
  .doctor-main > .doctor-grid .task-detail-content > .muted.no-print { grid-column: 1 / -1; }
}

@media screen and (max-width: 620px) {
  .doctor-shell > .doctor-topnav { padding: 0 10px; }
  .doctor-topnav .doctor-topnav-brand { gap: 8px; }
  .doctor-topnav .doctor-topnav-brand > span { width: 34px; height: 34px; }
  .doctor-topnav .doctor-topnav-brand b { font-size: 14px; }
  .doctor-topnav .doctor-topnav-brand small { display: none; }
  .doctor-topnav .doctor-topnav-tools { gap: 2px; }
  .doctor-topnav .doctor-topnav-user { max-width: 90px; height: 44px; padding: 0 4px; gap: 4px; font-size: 12px; }
  .doctor-topnav .topnav-icon-button { min-width: 36px; min-height: 44px; padding-inline: 6px; }
  .doctor-topnav .doctor-mode-switch button { padding-inline: 8px; gap: 5px; font-size: 13px; }
  .doctor-main:not(.scale-configuration-mode):not(.account-management-mode) { padding: 14px 10px 22px; }
  .doctor-main > .doctor-grid { gap: 14px; }
  .doctor-main > .doctor-grid > .doctor-panel { padding: 15px 12px; }
  .doctor-main > .doctor-grid .doctor-panel-head h2 { font-size: 18px; }
  .doctor-main > .doctor-grid > .task-list-panel > .doctor-panel-head { flex-wrap: wrap; }
  .doctor-main > .doctor-grid > .task-list-panel .task-live-control { flex-basis: 100%; justify-content: flex-end; }
  .doctor-main > .doctor-grid .create-task-panel .camera-button { padding: 0 9px; font-size: 12px; }
  .doctor-main > .doctor-grid .scale-package-title > small { font-size: 10px; }
  .doctor-main > .doctor-grid .scale-package-row { flex-wrap: wrap; gap: 5px 8px; padding: 8px; }
  .doctor-main > .doctor-grid .scale-package-info { flex-basis: 100%; }
  .doctor-main > .doctor-grid .scale-package-use,
  .doctor-main > .doctor-grid .scale-package-more-button { min-height: 44px; height: auto; font-size: 12px; }
  .doctor-main > .doctor-grid .scale-package-more { margin-left: auto; }
  .doctor-main > .doctor-grid .scale-package-menu button { min-height: 44px; font-size: 13px; }
  .doctor-main > .doctor-grid .task-list-row { grid-template-columns: minmax(0, 1fr) auto 14px; padding: 12px 8px; gap: 8px; }
  .doctor-main > .doctor-grid .task-list-row .task-avatar { display: none; }
  .doctor-main > .doctor-grid .task-list-main > b { white-space: normal; overflow-wrap: anywhere; }
  .doctor-main > .doctor-grid .task-list-meta small { font-size: 11px; }
  .doctor-main > .doctor-grid .task-detail-content[data-psych-delivery-mode="web_independent"] { display: flex; flex-direction: column; gap: 17px; }
  .doctor-main > .doctor-grid .task-detail-content[data-psych-delivery-mode="web_independent"] > :where(:not(.ordinary-report-overlay)) { width: 100%; }
  .doctor-main > .doctor-grid .task-detail-content > .task-handoff-primary-row.independent-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .doctor-main > .doctor-grid .task-detail-content > .patient-qr-card { grid-template-columns: 100px minmax(0, 1fr); }
  .doctor-main > .doctor-grid .patient-qr-card .patient-qr-image { width: 100px; height: 100px; }
  .doctor-main > .doctor-grid .task-detail-content :is(.task-primary-action, .copy-patient-link-button, .scale-append-button, .task-management-actions .button, .task-management-footer .button) { min-height: 44px; height: auto; font-size: 13px; }
  .doctor-main > .doctor-grid .scale-detail-section .scale-append-button { width: 44px; }
}

@media screen and (max-width: 360px) {
  .doctor-topnav .doctor-topnav-brand b { font-size: 12px; }
  .doctor-topnav .doctor-topnav-brand > span { width: 30px; height: 30px; }
  .doctor-topnav .doctor-topnav-user { max-width: 76px; }
  .doctor-topnav .topnav-icon-button { min-width: 32px; padding-inline: 4px; }
  .doctor-main > .doctor-grid .create-task-panel .form-pair,
  .doctor-main > .doctor-grid .create-task-panel .camera-button { grid-column: 1 / -1; }
  .doctor-main > .doctor-grid .create-task-panel .camera-button { justify-self: start; }
}