/* css/widgets.css — main column: cards, exam grid, widgets, add-ons, investigations grid
 * Loaded after encounter-state-viewer.css. The bulk of clinical-content styling.
 */
/* ── MAIN COLUMN ── */
.col-mid{overflow-y:auto;background:var(--bg);padding:8px 12px 32px;display:flex;flex-direction:column;gap:0;}

/* cards */
.card{background:var(--surface);border:0.5px solid var(--border);border-radius:var(--radius-lg);overflow:hidden;}
.card-hdr{padding:9px 12px;border-bottom:0.5px solid var(--border);display:flex;align-items:center;gap:7px;}
.card-pip{width:6px;height:6px;border-radius:50%;flex-shrink:0;}
.card-title{font-size:12px;font-weight:700;letter-spacing:0.02em;text-transform:uppercase;color:var(--text);flex:1;}
.widget-download-btn,.widget-add-btn,.widget-na-btn{width:24px;height:22px;display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;font-family:var(--font);font-size:12px;line-height:1;border:0.5px solid #a8c4ec;border-radius:999px;background:#e6eff9;color:#2456a0;cursor:pointer;padding:0;transition:background 0.12s,border-color 0.12s,color 0.12s;}
.widget-download-btn:hover,.widget-add-btn:hover,.widget-na-btn:hover{background:var(--blue-soft);border-color:var(--blue);color:var(--blue);}
.widget-download-btn svg{width:14px;height:14px;display:block;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
.widget-add-btn{font-size:16px;font-weight:700;}
.widget-na-btn{font-size:9px;font-weight:700;letter-spacing:0;border-color:#b8c0c8;background:#eef3f7;color:#5f6d7a;}
.widget-na-btn.active{background:#5f6d7a;border-color:#4d5965;color:#fff;}
.general-consult-grid > .card.widget-na-active > .card-scroll{opacity:0.42;}
.general-consult-grid > .card.widget-na-active > .card-footer{display:flex;align-items:center;justify-content:center;color:#4d5965;font-size:11px;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;}
.widget-directory{width:100%;height:100%;box-sizing:border-box;display:flex;align-items:center;gap:6px;padding:6px 8px;position:relative;}
.widget-directory-icon{width:18px;height:18px;display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;color:#4f7eaa;}
.widget-directory-icon svg{width:14px;height:14px;display:block;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
.widget-directory-domain-select{height:26px;flex:0 0 92px;min-width:0;font-size:10px!important;font-weight:600;padding:3px 20px 3px 7px!important;border-color:#9dbddd!important;background-color:#fff!important;color:var(--text-muted)!important;}
.widget-directory-input{height:26px;min-width:0;flex:1;font-size:11.5px!important;font-weight:500;padding:4px 8px!important;border-color:#9dbddd!important;background:#fff!important;color:var(--text)!important;}
.widget-directory-input::placeholder{color:var(--text-faint);}
/* F4 — ghost completion overlay (opt-in Tab completion): transparent typed text
   + gray remainder, metric-matched to the input by inline styles; decorative only. */
.widget-directory-ghost{position:absolute;display:none;pointer-events:none;overflow:hidden;white-space:pre;z-index:1;line-height:inherit;}
.widget-directory-ghost-typed{color:transparent;}
.widget-directory-ghost-rest{color:var(--text-faint);}
.widget-directory-results{display:none;position:absolute;left:8px;right:8px;bottom:36px;z-index:30;max-height:190px;overflow-y:auto;background:#fff;border:0.5px solid var(--border-md);border-radius:var(--radius);box-shadow:0 8px 18px rgba(32,44,58,0.14);padding:4px;}
.widget-directory-results.open{display:block;}
.widget-directory-result{width:100%;display:flex;align-items:center;gap:8px;text-align:left;border:0;background:transparent;border-radius:6px;padding:6px 7px;cursor:pointer;color:var(--text);font-family:var(--font);}
.widget-directory-result:hover{background:var(--blue-soft);}
.widget-directory-result-main{min-width:0;flex:1;display:flex;flex-direction:column;gap:1px;}
.widget-directory-result-label{font-size:11px;font-weight:700;line-height:1.2;}
.widget-directory-result-domain{font-size:9px;font-weight:600;letter-spacing:0.04em;text-transform:uppercase;color:var(--text-faint);line-height:1.2;}
.widget-directory-result-use{font-size:10px;font-weight:500;color:var(--text-muted);line-height:1.25;}
/* Ambiguous collision set (D8): same term, multiple clinical concepts — the
   candidate needs an explicit click / moved selection before it can commit. */
.widget-directory-result-ambiguous{border-left:2px solid var(--amber,#c77d0a);border-radius:0 6px 6px 0;}
.widget-directory-result-ambiguous .widget-directory-result-domain::after{content:" · ambiguous — choose explicitly";text-transform:none;letter-spacing:0;color:var(--amber,#c77d0a);}
.widget-directory-source{flex:0 0 auto;max-width:132px;font-size:8.5px;font-weight:800;letter-spacing:0.06em;text-transform:uppercase;padding:2px 5px;border-radius:999px;border:0.5px solid var(--border-md);color:var(--text-faint);white-space:normal;text-align:center;line-height:1.15;}
.widget-directory-source.core{background:var(--blue-soft);border-color:#b8d7f2;color:var(--blue);}
.widget-directory-source.expanded{background:#eef3f7;border-color:#c8d2dc;color:#5f6d7a;}
.widget-directory-empty{font-size:11px;font-weight:600;color:var(--text-faint);padding:7px;}
.tools-widget-menu{display:none;position:sticky;top:0;z-index:4;margin:-2px 0 10px;padding:8px;background:#fff;border:0.5px solid var(--border-md);border-radius:var(--radius);box-shadow:0 4px 12px rgba(0,0,0,0.07);gap:6px;flex-wrap:wrap;}
.tools-widget-menu.open{display:flex;}
.tools-widget-menu .addon-btn{background:var(--surface);}
.widget-tool-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(116px,1fr));gap:10px 12px;}
.widget-tool-card{border:0.5px solid var(--border-md);border-radius:var(--radius);background:var(--gray-50);padding:8px;min-height:58px;display:flex;flex-direction:column;gap:6px;}
.widget-tool-card-title{font-size:10px;font-weight:700;letter-spacing:0.06em;text-transform:uppercase;color:var(--text-muted);}
.widget-tool-card button{align-self:flex-start;font-family:var(--font);font-size:11px;font-weight:600;padding:3px 9px;border-radius:999px;border:0.5px solid var(--blue);background:#fff;color:var(--blue);cursor:pointer;}
.widget-tool-grid > #bmi-body.open{display:block;flex:initial;max-width:none;box-sizing:border-box;border:0;background:transparent;overflow:visible;}
.widget-tool-grid > .refr-body.open > .card-hdr{min-height:0;padding:0 0 7px;border:0!important;background:transparent!important;}
.widget-tool-grid > .refr-body.open > .card-hdr .card-pip{display:none;}
.widget-tool-grid > .refr-body.open > .card-hdr .card-title{font-size:10px;font-weight:800;letter-spacing:0.08em;text-transform:uppercase;color:var(--text-muted);}
.widget-tool-grid > .refr-body.open > div:not(.card-hdr){padding:0!important;}
.other-exam-addon-host{min-height:100%;display:block;}
.other-exam-addon-host #addon-detail{border:0;background:transparent;box-shadow:none;}
.other-exam-addon-host #addon-detail > .compact-row{display:grid!important;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px 12px;align-items:start;}
.other-exam-addon-host #addon-detail .refr-body.open{display:block;max-width:none;box-sizing:border-box;border:0;background:transparent;overflow:visible;}
.other-exam-addon-host #addon-detail .refr-body.compact.open{display:block;flex:initial;max-width:none;}
.other-exam-addon-host #addon-detail > .refr-body.open{margin-top:10px;border:0;background:transparent;overflow:visible;}
.other-exam-addon-host #addon-detail .refr-body.open > .card-hdr{min-height:0;padding:0 0 7px;border:0!important;background:transparent!important;}
.other-exam-addon-host #addon-detail .refr-body.open > .card-hdr .card-pip{display:none;}
.other-exam-addon-host #addon-detail .refr-body.open > .card-hdr .card-title{font-size:10px;font-weight:800;letter-spacing:0.08em;text-transform:uppercase;color:var(--text-muted);}
.other-exam-addon-host #addon-detail .refr-body.open > .card-hdr .tog-val{font-size:10px;padding:1px 7px;}
.other-exam-addon-host #addon-detail .refr-body.open > div:not(.card-hdr){padding:0!important;}
.ocular-vitals-addon-region{grid-column:1 / -1;width:100%;min-width:0;}
.ocular-vitals-addon-menu{position:fixed;top:0;left:0;z-index:100;min-width:180px;margin:0;flex-direction:column;gap:4px;align-items:stretch;box-shadow:0 4px 12px rgba(0,0,0,0.08);}
.ocular-vitals-addon-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px 12px;align-items:start;}
.ocular-vitals-addon-grid > .refr-body.open{display:block;flex:initial;max-width:none;box-sizing:border-box;border:0;background:transparent;overflow:visible;}
.ocular-vitals-addon-grid > .refr-body.open > .card-hdr{min-height:0;padding:0 0 7px;border:0!important;background:transparent!important;}
.ocular-vitals-addon-grid > .refr-body.open > .card-hdr .card-pip{display:none;}
.ocular-vitals-addon-grid > .refr-body.open > .card-hdr .card-title{font-size:10px;font-weight:800;letter-spacing:0.08em;text-transform:uppercase;color:var(--text-muted);}
.ocular-vitals-addon-grid > .refr-body.open > div:not(.card-hdr){padding:0!important;}
.card-body{padding:10px 12px;}
.sec-hd{display:flex;align-items:center;gap:7px;padding:4px 0 6px;border-bottom:1.5px solid var(--border-md);scroll-margin-top:8px;}
.sec-badge{font-size:9px;font-weight:700;letter-spacing:0.09em;text-transform:uppercase;padding:2px 7px;border-radius:4px;}
.sec-badge.exam{background:var(--blue-soft);color:var(--blue);}
.sec-badge.invest{background:#fde8de;color:#c05020;}
.sec-badge.assess{background:var(--green-soft);color:var(--green);}
.sec-hd-title{font-size:10px;font-weight:700;letter-spacing:0.06em;text-transform:uppercase;color:var(--text-muted);flex:1;}
.g2{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.g3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px;}
.exam-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px;align-items:stretch;}
.exam-grid.general-consult-grid{grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));height:100%;min-height:0;}
.exam-grid.general-consult-grid > .card{--widget-chrome:var(--blue-soft);--widget-border:#8db7d8;height:100%;min-height:0;display:flex;flex-direction:column;overflow:hidden;background:#fff;border:1px solid var(--widget-border);}
.exam-grid.general-consult-grid > .card > .card-hdr:first-child{flex:0 0 auto;min-height:41px;box-sizing:border-box;background:var(--widget-chrome);border-bottom:1px solid var(--widget-border);}
.exam-grid.general-consult-grid > .card > .card-scroll{flex:1;min-height:0;overflow-y:auto;background:#fff;}
.exam-grid.general-consult-grid > .card > .card-footer{flex:0 0 41px;min-height:41px;background:var(--widget-chrome);border-top:1px solid var(--widget-border);}
.exam-grid > .card{height:100%;}
#exam-grid-dev{flex:1;min-height:0;}
.inv-ap-row{display:grid;grid-template-columns:1fr 1fr;gap:10px;align-items:start;margin-top:10px;}
.inv-ap-row-single{grid-template-columns:1fr;}
.inv-ap-col{display:flex;flex-direction:column;gap:10px;min-width:0;}
.g2-stacked{grid-template-columns:1fr;}
.exam-r1c2{display:contents;}
.history-card .sb-block{border:0;}
.history-card .history-domain-body{padding:0;}
.history-card .history-domain-hdr{margin-bottom:7px;}
.history-card .history-domain-edit{font-size:10px;padding:2px 8px;}
.history-card .history-domain-actions{margin-left:auto;display:flex;align-items:center;gap:6px;}
.history-card .history-entry-actions{display:flex;justify-content:flex-start;margin-top:8px;}
.history-card .history-entry-add{min-height:26px;border:0.5px solid var(--border-md);border-radius:var(--radius);background:var(--gray-50);color:var(--text-muted);font-size:11px;font-weight:650;padding:3px 10px;cursor:pointer;}
.history-card .history-entry-add:hover{background:#fff;border-color:var(--blue);}
.history-card .ocular-history-top-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px;align-items:start;}
.history-card .sb-btn{background:var(--gray-100);border-color:var(--border-md);color:var(--text-muted);}
.history-card .sb-btn:hover{background:var(--gray-50);color:var(--text);}
.history-card .sb-status-btn{border-color:var(--border-md);color:var(--text-faint);}
.history-card .list-inp-row{display:flex;align-items:flex-start;gap:6px;margin:0;padding:2px 4px;border-radius:var(--radius);min-width:0;transition:background .14s var(--ease);}
.history-card .list-inp-row:hover,.history-card .list-inp-row:focus-within{background:rgba(224,126,92,0.07);}
.history-card .list-inp{font-family:var(--os-entry-text-font,var(--font));font-size:var(--os-entry-text-font-size,12.5px);font-weight:var(--os-entry-text-font-weight,500);line-height:var(--os-entry-text-line-height,1.45);color:var(--os-entry-text-color,var(--text));background:var(--os-entry-text-bg,var(--surface));border:var(--os-entry-text-border,1px solid var(--border-md));border-radius:var(--os-entry-text-radius,var(--radius));padding:var(--os-entry-text-padding,7px 9px);outline:none;flex:1;min-width:0;min-height:31px;resize:none;}
.history-card .list-inp-del{appearance:none;border:0;background:transparent;font-size:14px;color:var(--text-faint);cursor:pointer;padding:6px 3px;line-height:1;opacity:0;transition:opacity .14s var(--ease),color .14s var(--ease);}
.history-card .list-inp-row:hover .list-inp-del,.history-card .list-inp-row:focus-within .list-inp-del{opacity:1;}
.history-card .list-inp-del:hover{color:var(--text);}
.history-card .history-list-entry-text{font-size:11.5px;color:var(--text);flex:1;cursor:pointer;padding:3px 7px;line-height:1.4;white-space:pre-wrap;border-radius:var(--radius);}
.history-card .history-list-region{min-height:34px;padding:6px 8px;border:1px solid transparent;border-radius:var(--radius);cursor:pointer;transition:background .14s var(--ease),border-color .14s var(--ease);}
.history-card .history-list-region:hover,.history-card .history-list-region:focus{background:rgba(224,126,92,0.07);border-color:rgba(224,126,92,0.22);outline:none;}
.history-card .history-list-grid,
.history-card .history-list-edit-grid{display:grid;grid-template-rows:repeat(3,minmax(0,auto));grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);grid-template-columns:repeat(var(--history-list-columns,2),minmax(0,1fr));gap:4px 10px;align-items:start;}
.history-card .history-list-grid:has(.sb-none){display:block;}
/* U5-S1: this data-editing tint (background/border/box-shadow on the card root +
   .card-scroll below) is deliberately CARD-WIDE — it is the "this whole card is in
   edit mode" cue and applies regardless of which subheading (poh/pmh/meds/ocmeds/
   ocsurg/fohx/allergies/social) the pointer is over. The per-row highlight/hover/
   pencil-glyph rules further down (#sb-block-poh[data-sb-key="poh"] ...) are
   intentionally poh-only — they mirror the poh-only click-routing gate
   (_isPohEditModeGatedKey in js/core/inline-history-editing.js). Non-poh
   subheadings pick up the card-wide tint but no per-row edit affordance, and their
   click behavior is completely unchanged by edit mode (safe no-op). */
.exam-grid.general-consult-grid > .card.history-card[data-widget-card="ocular-history"][data-editing="true"]{
  --widget-border:color-mix(in srgb,var(--accent) 32%,var(--border-md));
  background:color-mix(in srgb,var(--accent-soft) 22%,var(--surface))!important;
  border-color:var(--widget-border)!important;
  box-shadow:0 0 0 1px color-mix(in srgb,var(--accent) 13%,transparent)!important;
}
.exam-grid.general-consult-grid > .card.history-card[data-widget-card="ocular-history"][data-editing="true"] > .card-scroll{
  background:color-mix(in srgb,var(--accent-soft) 14%,#fff)!important;
}
.exam-grid.general-consult-grid > .card.history-card[data-widget-card="ocular-history"][data-editing="true"] #sb-block-poh[data-sb-key="poh"] #poh-display.history-list-region .sb-item{
  background:color-mix(in srgb,var(--accent-soft) 42%,transparent)!important;
  border-radius:var(--radius)!important;
  cursor:pointer;
  padding:4px 6px!important;
  transition:background .14s var(--ease),color .14s var(--ease);
}
.exam-grid.general-consult-grid > .card.history-card[data-widget-card="ocular-history"][data-editing="true"] #sb-block-poh[data-sb-key="poh"] #poh-display.history-list-region .sb-item:hover{
  background:color-mix(in srgb,var(--accent-soft) 68%,var(--surface))!important;
}
.exam-grid.general-consult-grid > .card.history-card[data-widget-card="ocular-history"][data-editing="true"] #sb-block-poh[data-sb-key="poh"] #poh-display.history-list-region .sb-item::after{
  content:"";
  align-self:center;
  background:currentColor;
  flex:0 0 13px;
  height:13px;
  opacity:.42;
  order:2;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 20h9M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4Z' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/13px 13px no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 20h9M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4Z' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/13px 13px no-repeat;
  width:13px;
}
.exam-grid.general-consult-grid > .card.history-card[data-widget-card="ocular-history"][data-editing="true"] #sb-block-poh[data-sb-key="poh"] #poh-display.history-list-region .sb-item:hover::after{
  opacity:.68;
}
.exam-grid.general-consult-grid > .card.history-card[data-widget-card="ocular-history"][data-editing="true"] #sb-block-poh[data-sb-key="poh"] #poh-display.history-list-region .sb-item .sb-item-remove{
  order:3;
}
.history-card .sb-item > span:nth-child(2){min-width:0;flex:1;}
.history-card .sb-item-remove{
  appearance:none;
  border:0;
  background:transparent;
  color:var(--text-faint);
  cursor:pointer;
  flex:0 0 auto;
  font-size:14px;
  line-height:1;
  margin-left:4px;
  min-height:22px;
  min-width:22px;
  padding:2px;
}
.history-card .sb-item-remove:hover,
.history-card .sb-item-remove:focus-visible{
  color:var(--accent);
  outline:none;
}
.history-card .sh-row{display:grid;grid-template-columns:minmax(80px,0.45fr) minmax(0,1fr);gap:8px;padding:2px 0;color:var(--text);}
.history-card .sh-lbl{font-size:10.5px;font-weight:700;color:var(--text-faint);}
.history-card .sh-val{font-size:11.5px;font-weight:500;color:var(--text);min-width:0;}
.history-card .social-edit-panel{display:flex;flex-direction:column;gap:6px;}
.history-card .social-free-text-input{width:min(50%,300px);min-width:220px;min-height:31px;resize:none;}
.history-card .social-free-text-summary{font-family:var(--os-entry-text-font,var(--font));font-size:var(--os-entry-text-font-size,12.5px);font-weight:var(--os-entry-text-font-weight,500);line-height:var(--os-entry-text-line-height,1.45);color:var(--os-entry-text-color,var(--text));white-space:pre-wrap;}
.history-card .social-edit-row{display:grid;grid-template-columns:minmax(104px,0.45fr) minmax(0,1fr);gap:8px;align-items:center;font-size:10.5px;font-weight:700;color:var(--text-faint);}
.history-card .social-edit-row select,
.history-card .social-edit-row input{width:100%;min-width:0;font-family:var(--os-entry-text-font,var(--font));font-size:var(--os-entry-text-font-size,12.5px);font-weight:var(--os-entry-text-font-weight,500);line-height:var(--os-entry-text-line-height,1.45);color:var(--os-entry-text-color,var(--text));background:var(--os-entry-text-bg,var(--surface));border:var(--os-entry-text-border,1px solid var(--border-md));border-radius:var(--os-entry-text-radius,var(--radius));padding:5px 8px;outline:none;}
.history-card .social-edit-row select:focus,
.history-card .social-edit-row input:focus{background:#fff!important;color:var(--text)!important;box-shadow:0 0 0 2px rgba(36,114,184,0.1)!important;}
.history-card .sb-item{color:var(--text);}
.history-card .sb-item-num,.history-card .sb-none{color:var(--text-faint);}
.history-card .history-list-textarea{white-space:pre-wrap;}
.history-card .list-inp:focus{background:#fff !important;color:var(--text) !important;box-shadow:0 0 0 2px rgba(36,114,184,0.1) !important;}
.hpi-forms-hdr{margin-top:0;}
.hpi-inline-form{margin-top:8px;border:0.5px solid var(--border-md);border-radius:var(--radius);background:var(--gray-50);padding:8px;display:flex;flex-direction:column;gap:8px;}
.hpi-form-title-row{display:flex;align-items:center;justify-content:flex-end;gap:8px;}
.hpi-form-title{font-size:10.5px;font-weight:800;letter-spacing:0.06em;text-transform:uppercase;color:var(--text-muted);flex:1;}
.hpi-form-close{width:20px;height:20px;border:0.5px solid var(--border-md);border-radius:999px;background:#fff;color:var(--text-faint);font-family:var(--font);font-size:11px;font-weight:800;line-height:1;cursor:pointer;}
.hpi-form-close:hover{border-color:var(--text-muted);color:var(--text-muted);}
.hpi-form-grid{display:grid;grid-template-columns:1fr;gap:6px;}
.hpi-form-symptom{display:grid;grid-template-columns:minmax(120px,1.2fr) minmax(82px,0.8fr);gap:6px;align-items:center;}
.hpi-form-symptom-floaters{grid-template-columns:minmax(120px,1.15fr) minmax(76px,0.7fr) minmax(82px,0.7fr);}
.hpi-form-check{display:flex;align-items:center;gap:6px;min-width:0;font-size:11px;font-weight:700;color:var(--text-muted);}
.hpi-form-check input{width:auto;flex:0 0 auto;}
.hpi-form-check span{min-width:0;line-height:1.2;}
.hpi-inline-form input[type="text"],.hpi-inline-form select{height:26px;font-size:11px!important;background:#fff!important;padding:4px 7px!important;}
.hpi-form-placeholder{padding:8px 2px 2px;font-size:12px;line-height:1.4;color:var(--text-muted);}
.hpi-vf-followups{grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;padding-top:2px;}
.hpi-vf-followups label{display:flex;flex-direction:column;gap:3px;font-size:9px;font-weight:700;letter-spacing:0.05em;text-transform:uppercase;color:var(--text-faint);}
.assessment-card textarea{min-height:54px;}
.ocular-vitals-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 14px;align-items:start;padding:10px 12px;}
.ocular-vitals-section{min-width:0;}
.ocular-vitals-section .vitals-subhdr{min-height:23px;margin-bottom:8px;}
.ocular-vitals-section .vitals-subhdr span:first-child{font-size:9.5px;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;color:var(--text-muted);}
.ocular-vitals-section .tog-val{font-size:10px;padding:1px 7px;}
.ocular-vitals-section .input-row{margin-top:3px;}
.ocular-vitals-section .input-unit{flex-shrink:0;}
.ocular-vitals-section input.stored-input{min-width:0;}
.ocular-vitals-section-vision .eye-cols{justify-items:stretch;}
.ocular-vitals-section-vision .eye-cols > div{display:flex;flex-direction:column;align-items:center;width:100%;min-width:0;}
.ocular-vitals-section-vision input.stored-input{flex:0 0 54px;width:54px;padding-left:4px;padding-right:4px;text-align:center;font-size:12px;}
.ocular-vitals-pill-row{display:flex;justify-content:center;margin:-2px 0 8px;}
.ocular-vitals-ph-row{margin-top:5px;}
.ocular-vitals-mini-label{font-size:9px;color:var(--text-faint);font-weight:600;letter-spacing:0.06em;}
.ocular-vitals-iop-stack{display:grid;grid-template-columns:1fr 1fr;gap:8px;justify-items:stretch;}
.ocular-vitals-iop-stack > div{display:flex;flex-direction:column;align-items:center;width:100%;min-width:0;}
.ocular-vitals-iop-stack .input-row{justify-content:center;}
.ocular-vitals-iop-stack input.stored-input{flex:0 0 44px;width:44px;padding-left:4px;padding-right:4px;text-align:center;font-size:12px;}
.ocular-vitals-time-row{align-items:center;gap:6px;margin-top:6px;}
.ocular-vitals-time-row .input-unit{font-weight:600;color:var(--text-muted);}
.ocular-vitals-time-row input{font-size:11.5px;}
.ocular-vitals-section-pupils{grid-column:1 / -1;justify-self:center;width:100%;display:flex;flex-direction:column;align-items:center;}
.ocular-vitals-section-pupils .vitals-subhdr{width:auto;max-width:none;display:inline-flex;justify-content:center;gap:12px;margin-left:auto;margin-right:auto;}
.ocular-vitals-pupil-controls{display:flex;flex-direction:column;gap:6px;align-items:center;}
.ocular-vitals-pupil-controls .tog-val{white-space:nowrap;}
.ocular-vitals-aniso-panel{margin-top:8px;width:auto;max-width:100%;}
.ocular-vitals-aniso-panel .eye-cols{grid-template-columns:repeat(2,max-content);justify-content:center;gap:32px;}
.ocular-vitals-aniso-panel .field-label{white-space:nowrap;text-align:left;}
.ocular-vitals-aniso-panel .input-row{justify-content:flex-start;}
.ocular-vitals-aniso-row{margin-bottom:5px;}
.ocular-vitals-aniso-panel .ocular-vitals-mm-input{width:50px!important;flex:0 0 50px!important;}

/* shared field/input styles */
.field{margin-bottom:9px;}
.field:last-child{margin-bottom:0;}
.field-label{font-size:10.5px;font-weight:500;color:var(--text-muted);display:block;margin-bottom:3px;}
input[type="text"],input[type="number"],select,textarea{font-family:var(--font);font-size:12.5px;color:var(--text);width:100%;padding:5px 9px;background:var(--gray-50);border:0.5px solid var(--border-md);border-radius:var(--radius);outline:none;transition:border-color 0.13s,box-shadow 0.13s;appearance:none;-webkit-appearance:none;}
input:focus,select:focus,textarea:focus{border-color:var(--blue);box-shadow:0 0 0 2px rgba(36,114,184,0.1);background:#fff;}
/* Stored-input: looks like amber stored text by default, becomes a real input on focus */
input.stored-input{background:transparent;border-color:transparent;color:var(--amber);font-weight:500;cursor:pointer;}
input.stored-input:hover{background:var(--gray-50);border-color:var(--border-md);}
input.stored-input:focus{background:#fff;border-color:var(--blue);color:var(--text);cursor:text;}
input[type="number"]{font-family:var(--mono);}
textarea{resize:vertical;min-height:56px;line-height:1.55;}
select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%239c9b96' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 9px center;padding-right:26px;cursor:pointer;}
.input-row{display:flex;gap:5px;align-items:center;}
.input-row input,.input-row select{flex:1;}
.input-unit{font-size:11px;color:var(--text-faint);white-space:nowrap;flex-shrink:0;}
.inline-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:5px;}
.eye-cols{display:grid;grid-template-columns:1fr 1fr;gap:8px;}
.eye-tag{font-size:9px;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;padding:1px 5px;border-radius:3px;display:inline-block;}
.eye-tag.clickable{cursor:pointer;user-select:none;transition:opacity 0.12s;}
.eye-tag.clickable:hover{opacity:0.7;}
.eye-tag.na-tag{background:var(--gray-100)!important;color:var(--text-faint)!important;}
.od{background:var(--blue-soft);color:var(--blue);}
.os{background:var(--teal-soft);color:var(--teal);}
.vitals-subhdr{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:7px;}
.vitals-subhdr span:first-child{font-size:9.5px;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;color:var(--text-muted);}
/* Pupils whole-section N/A toggle */
.vital-na-btn{font-family:var(--font);font-size:10px;font-weight:600;padding:2px 7px;border-radius:4px;cursor:pointer;background:transparent;border:0.5px solid var(--border-md);color:var(--text-faint);line-height:1.4;transition:all 0.12s;user-select:none;}
.vital-na-btn:hover{color:var(--text-muted);border-color:var(--text-muted);}
.vital-na-btn.active{background:var(--gray-100);color:var(--text-muted);border-color:var(--text-faint);}
.div-label{font-size:9px;font-weight:700;letter-spacing:0.07em;text-transform:uppercase;color:var(--text-faint);margin:10px 0 5px;display:flex;align-items:center;gap:6px;}
.div-label::after{content:'';flex:1;height:0.5px;background:var(--border);}
.seg{display:flex;border:0.5px solid var(--border-md);border-radius:var(--radius);overflow:hidden;background:var(--gray-50);}
.seg-btn{flex:1;font-family:var(--font);font-size:11px;font-weight:500;padding:4px 3px;border:none;cursor:pointer;background:transparent;color:var(--text-muted);transition:all 0.11s;text-align:center;border-right:0.5px solid var(--border-md);}
.seg-btn:last-child{border-right:none;}
.seg-btn.active{background:var(--navy);color:#fff;}
/* exam widget */
.exam-cols{display:grid;grid-template-columns:1fr 28px 1fr;gap:0;}
.exam-hdr-row{display:grid;grid-template-columns:1fr 28px 1fr;padding:3px 0 5px;}
.exam-row{display:flex;align-items:center;padding:4px 0;border-bottom:0.5px solid var(--border);}
.exam-row:last-child{border-bottom:none;}
[data-widget-card="anterior-posterior-segment"] .exam-row{border-bottom:none;}
.exam-row-label{font-size:10px;font-weight:600;color:var(--text-muted);width:26px;flex-shrink:0;text-align:center;}
.exam-eye-col{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;min-width:0;}
.exam-hdr{font-size:10px;font-weight:600;color:var(--text-muted);text-align:center;cursor:pointer;padding:1px 5px;border-radius:4px;}
.exam-hdr:hover{background:var(--gray-100);}
.exam-hdr.na{color:var(--text-faint);}
.tog-val{font-size:11.5px;font-weight:500;cursor:pointer;user-select:none;padding:1px 6px;border-radius:4px;text-align:center;color:#4a5568;background:#f0f1f3;border:0.5px solid #d2d5da;line-height:1.5;white-space:nowrap;}
.tog-val:hover{opacity:0.8;}
.tog-val.abnormal{color:var(--amber);background:var(--amber-soft);border-color:#f5c97a;}
.tog-val.pupil-rapd-od{color:var(--blue);background:var(--blue-soft);border-color:#b8d7f2;}
.tog-val.pupil-rapd-os{color:var(--teal);background:var(--teal-soft);border-color:#b8e4dc;}
.tog-val.pupil-size-aniso{color:var(--amber);background:var(--amber-soft);border-color:#f5c97a;}
.tog-val.na{color:var(--text-faint);background:var(--gray-100);border-color:var(--border-md);pointer-events:none;}
.tog-val.editing{color:var(--text);background:#fff;border-color:var(--blue);outline:none;min-width:56px;}
.stored-note{font-size:12px;font-weight:700;color:var(--amber);cursor:pointer;text-align:left;padding:1px 4px;word-break:break-word;line-height:1.35;}
.stored-note:hover{opacity:0.8;}
.cd-wrap{display:flex;align-items:center;gap:3px;justify-content:center;}
.cd-val{font-size:11.5px;font-weight:500;color:#4a5568;cursor:pointer;padding:1px 5px;border-radius:4px;background:#f0f1f3;border:0.5px solid #d2d5da;}
.cd-val:hover{opacity:0.8;}
.cd-val.na{color:var(--text-faint);background:var(--gray-100);border-color:var(--border-md);pointer-events:none;}
.cd-select{font-family:var(--font);font-size:11.5px;font-weight:500;width:52px;padding:1px 18px 1px 5px;border-radius:4px;border:0.5px solid var(--blue);background-color:#fff;color:var(--text);}
.lens-state-wrap{display:flex;align-items:center;justify-content:center;gap:4px;}
.lens-state-check{cursor:default;}
.dil-val{font-size:9.5px;font-weight:600;letter-spacing:0.04em;text-transform:uppercase;color:var(--text-faint);cursor:pointer;padding:1px 6px;border-radius:4px;}
.dil-val:hover{color:var(--text-muted);}
.dil-val.dilated{color:var(--blue);}
.lens-sub{display:flex;flex-direction:row;flex-wrap:wrap;gap:3px 5px;margin-top:2px;align-items:center;justify-content:center;width:100%;max-width:100%;}
.lens-sub-row{display:flex;align-items:center;gap:2px;}
.lens-sub-lbl{font-size:9.5px;color:var(--text-faint);width:auto;text-align:right;flex-shrink:0;}
.lens-sub-val{font-size:10.5px;color:var(--text-muted);cursor:pointer;user-select:none;padding:0 3px;}
.lens-sub-val:hover{color:var(--text);}
.lens-sub-val.active{color:var(--text);font-weight:500;}
.refr-body{display:none;border-top:0.5px solid var(--border);}
.refr-body.open{display:block;}
.compact-row{display:flex;flex-wrap:wrap;}
.refr-body.compact{border-top:none;}
.refr-body.compact.open{display:block;flex:0 0 50%;max-width:50%;box-sizing:border-box;}
/* other widgets */
.ow-body{display:flex;flex-direction:column;align-items:center;padding:4px 0 8px;}
.ow-row{display:flex;align-items:center;justify-content:center;padding:2px 0;}
.ow-eye{width:68px;flex:0 0 68px;display:flex;flex-direction:column;align-items:center;gap:2px;}
.ow-lbl{width:52px;flex:0 0 52px;display:flex;align-items:center;justify-content:center;}
.ow-hdr{width:68px;flex:0 0 68px;display:flex;align-items:center;justify-content:center;}
.ow-row-lbl{font-size:11px;font-weight:600;color:var(--text-muted);line-height:1;text-align:center;}
.ow-hdr-lbl{font-size:11px;font-weight:600;color:var(--text-muted);cursor:pointer;user-select:none;padding:2px 6px;border-radius:4px;}
.ow-hdr-lbl:hover{background:var(--gray-100);}
.ow-hdr-lbl.na{color:var(--text-faint);}
.ow-lpad{flex:0 0 6px;}
.ow-rpad{flex:0 0 6px;}
.ow-tog{font-size:11.5px;font-weight:500;cursor:pointer;user-select:none;padding:1px 6px;border-radius:4px;text-align:center;color:#4a5568;background:#f0f1f3;border:0.5px solid #d2d5da;line-height:1.5;white-space:nowrap;}
.ow-tog:hover{opacity:0.8;}
.ow-tog.abn{color:var(--amber);background:var(--amber-soft);border-color:#f5c97a;}
.ow-tog.na-val{color:var(--text-faint);background:var(--gray-100);border-color:var(--border-md);}
.ow-field-val{font-size:11.5px;font-weight:500;cursor:text;outline:none;min-width:16px;white-space:normal;word-wrap:break-word;display:inline-block;line-height:1.3;color:var(--text);border-bottom:0.5px solid var(--border-md);}
.ow-stored{font-size:11px;font-weight:500;color:var(--amber);width:64px;text-align:center;word-break:break-word;white-space:normal;line-height:1.2;cursor:pointer;padding:0 2px;}
.ow-stored:hover{opacity:0.8;}
.ow-chips{background:var(--gray-50);padding:5px 10px 6px;display:flex;flex-direction:column;align-items:center;gap:4px;border-bottom:0.5px solid var(--border);}
.ow-chips-row{display:flex;align-items:center;justify-content:center;gap:12px;}
.ow-chip{font-size:10.5px;font-weight:500;color:var(--text-faint);cursor:pointer;user-select:none;}
.ow-chip:hover{color:var(--text-muted);}
.ow-chip.on{color:var(--text);}
.ortho-zone-card{display:flex;flex-direction:column;gap:3px;align-items:stretch;min-width:112px;padding:5px 6px;border:0.5px solid var(--gray-300);border-radius:7px;background:#fff;box-shadow:0 1px 2px rgba(15,23,42,0.04);}
.ortho-zone-card.ortho{background:#f8fafc;}
.ortho-zone-card.measuring{border-color:#9db7d8;background:#fff;}
.ortho-zone-top{display:flex;align-items:center;justify-content:space-between;gap:6px;font-size:9px;font-weight:800;text-transform:uppercase;letter-spacing:0;color:var(--text-muted);line-height:1;}
.ortho-reset-btn{border:0.5px solid var(--gray-300);border-radius:5px;background:#f1f5f9;color:var(--text-muted);font-size:9px;font-weight:700;line-height:1;padding:3px 5px;cursor:pointer;}
.ortho-reset-btn:hover{border-color:var(--blue);color:var(--blue);}
.ortho-axis-row{display:grid;grid-template-columns:18px 31px 42px 34px 10px;align-items:center;gap:3px;opacity:0.72;}
.ortho-axis-row.active{opacity:1;}
.ortho-axis-toggle{height:24px;border:0.5px solid var(--gray-300);border-radius:5px;background:#f8fafc;color:var(--text-faint);font-size:9px;font-weight:800;line-height:1;padding:0;cursor:pointer;}
.ortho-axis-toggle.active{background:#e7f0fb;border-color:#b7cde8;color:var(--blue);}
.ortho-mini-select,.ortho-num-input{height:24px;min-width:0;border:0.5px solid var(--gray-300);border-radius:5px;background:#fff;color:var(--text);font-size:11px;font-weight:650;text-align:center;padding:0 3px;box-sizing:border-box;}
.ortho-mini-select{appearance:auto;}
.ortho-num-input{font-family:var(--mono);width:34px;}
.ortho-num-input::placeholder{color:var(--text-faint);}
.ortho-delta{font-size:10px;font-weight:700;color:var(--text-faint);}
.other-exam-addon-host #addon-detail #orthoptics-body.open{min-width:min(100%,390px);}
.other-exam-addon-host #addon-detail #ortho-cross-wrap{max-width:100%;overflow:visible;}
.ow-mot-row{display:flex;align-items:flex-start;justify-content:center;gap:12px;padding:8px 10px;}
.ow-mot-eye{display:flex;flex-direction:column;align-items:center;}
.ow-mot-grid{display:grid;grid-template-columns:repeat(3,30px);grid-template-rows:repeat(3,26px);gap:2px;}
.ow-mot-grid.na-eye{opacity:0.35;pointer-events:none;}
.ow-mot-cell{display:flex;align-items:center;justify-content:center;}
.ow-mot-wrap{position:relative;display:inline-flex;align-items:center;justify-content:center;width:28px;height:24px;}
.ow-mot-lbl{font-size:10px;font-weight:500;color:var(--text-faint);pointer-events:none;user-select:none;text-align:center;display:block;width:100%;}
.ow-mot-lbl.set{color:var(--amber);}
/* Motility supranuclear chips: stored amber styling (overrides .ow-chip default) */
#mot-extras .ow-chip{color:var(--amber);}
#mot-extras .ow-chip:hover{color:var(--amber);opacity:0.8;}
.ow-mot-sel{position:absolute;top:0;left:0;width:100%;height:100%;opacity:0;cursor:pointer;}
.ow-cy-wrap{position:relative;display:inline-flex;align-items:center;justify-content:center;height:18px;}
.ow-cy-lbl{font-size:11px;font-weight:500;color:var(--text-faint);pointer-events:none;user-select:none;white-space:nowrap;padding:0 2px;}
.ow-cy-lbl.set{color:var(--text);}
.ow-cy-sel{position:absolute;top:0;left:0;width:100%;height:100%;opacity:0;cursor:pointer;font-size:11px;}
.ow-s-inp{font-family:var(--font);font-size:11px;font-weight:500;color:var(--text-faint);background:transparent;border:none;border-bottom:0.5px solid var(--border-md);outline:none;width:36px;text-align:center;padding:0;line-height:18px;}
.ow-s-inp:focus{border-bottom-color:var(--blue);color:var(--text);}
.ow-s-inp.set{color:var(--text);}
.ow-gonio-cross{position:relative;width:140px;height:140px;flex:0 0 140px;}
.ow-gonio-cross.na-eye{opacity:0.35;pointer-events:none;}
/* Gonioscopy quadrant cells: 40x44 boxes centred 42 px from the cross centre (70,70).
   Cells use no flex layout — children inside are absolutely positioned so the main
   text stays anchored to the cell centre regardless of any annotations / PAS. */
.ow-gq{position:absolute;width:40px;height:44px;overflow:visible;}
.ow-gq.sup{top:6px;left:50px;}
.ow-gq.inf{top:90px;left:50px;}
.ow-gq.lft{top:48px;left:8px;}
.ow-gq.rgt{top:48px;left:92px;}
.ow-gq-ann{font-size:8px;font-weight:500;color:var(--text);line-height:1.1;text-align:center;display:block;cursor:pointer;user-select:none;}
.ow-gq-pas.pas-n{color:transparent;}
.ow-gq-pas.pas-y{color:#b52020;font-size:9px;font-weight:600;cursor:pointer;}
/* add-on bar */
.addon-bar{padding:8px 12px;border-top:0.5px solid var(--border);background:var(--gray-50);display:flex;align-items:center;gap:6px;flex-wrap:wrap;}
.addon-btn{font-family:var(--font);font-size:10px;font-weight:500;padding:3px 10px;border-radius:20px;border:0.5px solid var(--border-md);background:var(--surface);color:var(--text-muted);cursor:pointer;transition:all 0.12s;white-space:nowrap;}
.addon-btn:hover{border-color:var(--blue);color:var(--blue);}
.addon-btn.active{background:var(--navy);color:#fff;border-color:var(--navy);}
.addon-lbl{font-size:9px;font-weight:700;letter-spacing:0.07em;text-transform:uppercase;color:var(--text-faint);flex-shrink:0;}
/* inv grid */
/* Eye investigations grid: [OD interp | OD val | LABEL | OS val | OS interp] */
.inv-hdr-row{display:grid;grid-template-columns:minmax(0,1fr) 46px 64px 46px minmax(0,1fr);gap:3px;padding:3px 0 5px;align-items:center;}
.inv-hdr{font-size:10px;font-weight:600;color:var(--text-muted);text-align:center;}
.inv-hdr-interp{font-size:8.5px;font-weight:600;color:var(--text-faint);text-align:center;letter-spacing:0.04em;text-transform:uppercase;}
.inv-row{display:grid;grid-template-columns:minmax(0,1fr) 46px 64px 46px minmax(0,1fr);gap:3px;align-items:start;padding:4px 0;border-bottom:0.5px solid var(--border);}
.inv-row:last-child{border-bottom:none;}
.inv-label{font-size:10.5px;font-weight:600;color:var(--text-muted);text-align:center;padding:2px 0 0;}
.inv-val-col{display:flex;flex-direction:column;align-items:center;gap:2px;padding-top:2px;}
.inv-interp-col{display:flex;align-items:flex-start;min-height:22px;min-width:0;padding-top:1px;background:transparent;}
.inv-interp-col.od{justify-content:flex-end;}
.inv-interp-col.os{justify-content:flex-start;}
.inv-val{font-size:11px;font-weight:500;cursor:pointer;user-select:none;padding:1px 5px;border-radius:4px;text-align:center;color:var(--text-faint);background:var(--gray-100);border:0.5px solid var(--border-md);line-height:1.5;white-space:nowrap;min-width:44px;}
.inv-val:hover{opacity:0.8;}
.inv-val.has-value{color:var(--text);background:var(--surface);border-color:var(--border-md);}
.inv-val.editing{color:var(--text);background:#fff;border-color:var(--blue);outline:none;}
.inv-interp-check{font-size:10px;color:var(--text-faint);cursor:pointer;user-select:none;width:16px;height:16px;display:flex;align-items:center;justify-content:center;border-radius:3px;border:0.5px solid var(--border-md);background:var(--gray-50);flex-shrink:0;transition:all 0.12s;}
.inv-interp-check:hover{border-color:var(--blue);color:var(--blue);}
.inv-interp-check.active{background:#e8e9ec;color:#4a5568;border-color:#b8bbc2;}
.inv-interp-text{font-family:var(--font);font-size:10.5px;color:var(--text);background:transparent;border:none;border-bottom:0.5px solid var(--border-md);outline:none;padding:1px 3px;flex:1;min-width:0;}
.inv-interp-text:focus{border-bottom-color:var(--blue);}
.inv-interp-stored{font-size:10.5px;color:var(--amber);cursor:pointer;word-break:break-word;line-height:1.3;flex:1;min-width:0;}
.inv-interp-stored:hover{opacity:0.8;}

/* ═══════════════════════════════════════════════════════════════════════════
 *  POLISH LAYER — additive refinements, no structural / behavioural changes.
 *  Appended after the legacy widget rules so it cascades on top.
 *  Goal: harmonise the eight encounter widgets into a single design system.
 *
 *  ── LAYER STRUCTURE ──
 *  All polish is CSS-only — no JS, HTML, or DOM mutations. Layers below
 *  are stacked in source order; later layers override earlier ones.
 *
 *    Layer 1  — Encounter widgets        (this block; cards, headers, tog-vals)
 *    Layer 2  — Empty-state hints        (`:has()` / `:empty::after` cards)
 *    Layer 3  — Subwidget tile chrome    (`::before` for BMI / Colour / Ortho)
 *    Layer 4  — Day Sheet, topbar, modals
 *    Layer 5  — Encounter sidebar, note panel, surveys
 *    Layer 6  — Signature decoration     (iris-themed pseudo-elements)
 *    Layer 7  — Editorial typography     (system serif for h1s + note body)
 *    Layer 8  — Accessibility prefs      (forced-colors, contrast, motion)
 *    Layer 9  — Form controls + details + type features
 *
 *  ── TEST CONTRACT ──
 *  The e2e suite asserts specific computed styles on certain elements
 *  (legacy chrome colours on cards; border/bg/pip-display on subwidget
 *  bodies; popover left/top alignment with the + button). To preserve
 *  these contracts, visual chrome that the test reads is rendered via
 *  `::before`/`::after` pseudo-elements rather than direct property
 *  changes. The `.card`s themselves carry no `contain:` or `transform`,
 *  since both create containing blocks for `position:fixed` descendants
 *  in Chromium and would break the Ocular Vitals popover anchoring.
 *
 *  ── COLOUR SYSTEM ──
 *  All accents derive from the existing palette tokens (--navy, --blue,
 *  --teal, --amber, --green) at varying alpha. No new colour tokens were
 *  introduced; the per-widget pip dots set inline in JS already provide
 *  card-level identity, which Layer 6 amplifies with subtle halos.
 *
 *  ── MOTION ──
 *  All animations are opacity-only or transform-on-pseudo-elements so
 *  that residual matrices on real elements never create containing blocks
 *  that would re-position fixed descendants. Every animation respects
 *  `@media (prefers-reduced-motion: no-preference)`.
 * ═══════════════════════════════════════════════════════════════════════════ */

/* — Main column rhythm — */
.col-mid{padding:10px 14px 28px;}

/* — Card body: depth via box-shadow only.
 *  Tests assert exact chrome colors (border:#8db7d8, header/footer:#d6e8f7,
 *  scroll:#fff). We keep the legacy colors and add polish through layered
 *  shadow + interactive ring on focus-within. — */
.exam-grid.general-consult-grid > .card{
  border-radius:12px;
  box-shadow:var(--shadow-card);
  transition:box-shadow 0.22s var(--ease);
}
.exam-grid.general-consult-grid > .card:hover{
  box-shadow:var(--shadow-card-hover);
}

/* — Header chrome: keep legacy solid #d6e8f7. A hairline highlight beneath
 *  the bottom border adds depth without changing computed colors. — */
.exam-grid.general-consult-grid > .card > .card-hdr:first-child{
  position:relative;
  padding:10px 13px;
  min-height:44px;
  gap:8px;
}
.exam-grid.general-consult-grid > .card > .card-hdr:first-child::after{
  content:"";
  position:absolute;
  left:0;right:0;bottom:-1px;
  height:1px;
  background:linear-gradient(90deg,
    rgba(20,40,72,0) 0%,
    rgba(36,72,120,0.18) 18%,
    rgba(36,72,120,0.18) 82%,
    rgba(20,40,72,0) 100%);
  pointer-events:none;
}
.card-pip{
  width:7px;height:7px;
  box-shadow:0 0 0 2px rgba(255,255,255,0.65),0 1px 3px rgba(15,29,48,0.18);
}
.exam-grid.general-consult-grid > .card > .card-hdr:first-child > .card-title{
  font-size:11px;
  font-weight:700;
  letter-spacing:0.07em;
  color:#0f2d4a;
  text-transform:uppercase;
}

/* — Mini-buttons (+, ↓, N/A): unified pill style.
 *  Width/height kept at legacy 24×22 to preserve menu-alignment tests. — */
.widget-download-btn,
.widget-add-btn{
  border:1px solid rgba(36,114,184,0.32);
  background:rgba(255,255,255,0.72);
  color:#1f5b9a;
  box-shadow:0 1px 2px rgba(15,29,48,0.06);
  transition:transform 0.14s var(--ease),background 0.14s var(--ease),
             border-color 0.14s var(--ease),color 0.14s var(--ease),
             box-shadow 0.14s var(--ease);
}
.widget-download-btn:hover,
.widget-add-btn:hover{
  background:#fff;
  border-color:#2472b8;
  color:#0f3d72;
  transform:translateY(-1px);
  box-shadow:0 2px 6px rgba(15,29,48,0.12);
}
.widget-download-btn:active,
.widget-add-btn:active{transform:translateY(0);}
.widget-add-btn{font-size:15px;font-weight:600;line-height:1;}
.widget-na-btn{
  border:1px solid rgba(110,109,105,0.28);
  background:rgba(255,255,255,0.55);
  color:#5e6770;
  font-size:9px;
  font-weight:700;
  letter-spacing:0.06em;
  box-shadow:0 1px 2px rgba(15,29,48,0.04);
  transition:all 0.14s var(--ease);
}
.widget-na-btn:hover{
  background:#fff;
  border-color:#6e6d69;
  color:#3e4651;
}
.widget-na-btn.active{
  background:#3e4651;
  border-color:#3e4651;
  color:#fff;
  box-shadow:0 1px 3px rgba(15,29,48,0.18) inset;
}

/* N/A-active card chrome: dim body, refined footer message */
.general-consult-grid > .card.widget-na-active{
  background:repeating-linear-gradient(135deg,#fafafa 0 6px,#f4f4f3 6px 12px);
}
.general-consult-grid > .card.widget-na-active > .card-scroll{opacity:0.34;}
.general-consult-grid > .card.widget-na-active > .card-footer{
  background:rgba(232,236,242,0.65);
  color:#3e4651;
  font-size:10px;
  font-weight:800;
  letter-spacing:0.14em;
}

/* — Card scroll area — keep #fff background; refine scrollbar — */
.exam-grid.general-consult-grid > .card > .card-scroll{
  scrollbar-width:thin;
  scrollbar-color:rgba(15,29,48,0.18) transparent;
}
.exam-grid.general-consult-grid > .card > .card-scroll::-webkit-scrollbar{width:8px;}
.exam-grid.general-consult-grid > .card > .card-scroll::-webkit-scrollbar-thumb{
  background:rgba(15,29,48,0.16);
  border-radius:999px;
  border:2px solid transparent;
  background-clip:content-box;
}
.exam-grid.general-consult-grid > .card > .card-scroll::-webkit-scrollbar-thumb:hover{
  background:rgba(15,29,48,0.30);
  background-clip:content-box;
}

/* — Card footer (directory search) — keep legacy #d6e8f7. Hairline
 *  highlight above the top border for depth. — */
.exam-grid.general-consult-grid > .card > .card-footer{
  position:relative;
  min-height:44px;
}
.exam-grid.general-consult-grid > .card > .card-footer::before{
  content:"";
  position:absolute;
  left:0;right:0;top:-1px;
  height:1px;
  background:linear-gradient(90deg,
    rgba(20,40,72,0) 0%,
    rgba(36,72,120,0.18) 18%,
    rgba(36,72,120,0.18) 82%,
    rgba(20,40,72,0) 100%);
  pointer-events:none;
}
.widget-directory{padding:7px 10px;gap:8px;}
.widget-directory-icon{color:#3a6da3;}
.widget-directory-domain-select{
  height:28px;
  border-radius:6px;
  border-color:rgba(36,114,184,0.30)!important;
  background:rgba(255,255,255,0.85)!important;
  color:#1f5b9a!important;
  font-weight:700!important;
  letter-spacing:0.02em;
}
.widget-directory-input{
  height:28px;
  border-radius:6px;
  border-color:rgba(36,114,184,0.28)!important;
  background:rgba(255,255,255,0.92)!important;
  transition:background 0.14s var(--ease),border-color 0.14s var(--ease),box-shadow 0.14s var(--ease);
}
.widget-directory-input:focus{
  background:#fff!important;
  border-color:#2472b8!important;
  box-shadow:var(--ring-focus);
}
.widget-directory-results{
  border-radius:9px;
  border:1px solid rgba(20,40,72,0.10);
  box-shadow:0 12px 28px rgba(15,29,48,0.16),0 2px 6px rgba(15,29,48,0.06);
}

/* — Section labels (div-label, sec-hd, vitals-subhdr) — refined typography — */
.div-label{
  font-size:9px;
  font-weight:700;
  letter-spacing:0.12em;
  color:#5e6770;
  margin:14px 0 7px;
  text-transform:uppercase;
}
.div-label::after{
  height:1px;
  background:linear-gradient(90deg,rgba(15,29,48,0.16),rgba(15,29,48,0));
}
.card-body{padding:12px 14px;}
.sec-hd{
  padding:6px 0 8px;
  border-bottom:1px solid rgba(15,29,48,0.10);
}
.sec-hd-title{
  font-size:9.5px;
  letter-spacing:0.12em;
  color:#5e6770;
}
.sec-badge{
  font-size:8.5px;
  font-weight:800;
  letter-spacing:0.11em;
  padding:3px 8px;
  border-radius:999px;
  box-shadow:0 1px 0 rgba(255,255,255,0.6) inset;
}
.sec-badge.exam{background:rgba(36,114,184,0.10);color:#1f5b9a;}
.sec-badge.invest{background:rgba(176,108,16,0.10);color:#8a4f04;}
.sec-badge.assess{background:rgba(31,122,62,0.10);color:#155f30;}

/* — Inputs: harmonised refinement — */
input[type="text"],input[type="number"],select,textarea{
  background:#fbfbfa;
  border:1px solid rgba(15,29,48,0.12);
  border-radius:7px;
  padding:6px 10px;
  font-size:12.5px;
  transition:border-color 0.14s var(--ease),box-shadow 0.14s var(--ease),background 0.14s var(--ease);
}
input:focus,select:focus,textarea:focus{
  border-color:#2472b8;
  background:#fff;
  box-shadow:var(--ring-focus);
}
textarea{
  border-radius:9px;
  line-height:1.6;
  padding:9px 11px;
  background:linear-gradient(180deg,#fbfbfa 0%,#f6f7f8 100%);
}
input.stored-input{background:transparent;}
input.stored-input:hover{background:rgba(15,29,48,0.04);border-color:rgba(15,29,48,0.14);}

/* — OD / OS eye-tags: inline state affordances — */
.eye-tag{
  font-size:9.5px;
  font-weight:800;
  letter-spacing:0.13em;
  padding:0 2px;
  border-radius:0;
  box-shadow:none;
}
.od{background:linear-gradient(180deg,#dfecf8,#cfe1f3);color:#1d5189;}
.os{background:linear-gradient(180deg,#dcefea,#cae3dc);color:#0f6a5b;}
.eye-tag.od,
.eye-tag.os{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  justify-self:start;
  align-self:center;
  width:auto;
  min-width:0;
  height:auto;
  min-height:0;
  padding:0 2px;
  border:0;
  border-radius:0;
  background:transparent;
  background-image:none;
  box-shadow:none;
  color:var(--ink-link,var(--blue,#d97757));
  font-family:var(--font);
  font-size:10.5px;
  font-weight:850;
  letter-spacing:0.08em;
  line-height:1.2;
  text-transform:uppercase;
}
.eye-tag.na-tag,
.eye-tag.od.na-tag,
.eye-tag.os.na-tag{
  background:transparent!important;
  background-image:none!important;
  color:var(--ink-link,var(--blue,#d97757))!important;
  border:0!important;
  box-shadow:none!important;
  opacity:0.64;
}
.eye-tag.clickable:hover{
  opacity:1;
  text-decoration:underline;
  text-underline-offset:2px;
}

/* — Eye-Examination ✓ defaults: recede to a soft "set" badge — */
.tog-val{
  font-size:11px;
  font-weight:600;
  padding:2px 9px;
  border-radius:6px;
  color:#5b7184;
  background:linear-gradient(180deg,#f4f6f9,#eaeef4);
  border:1px solid rgba(15,29,48,0.09);
  box-shadow:0 1px 0 rgba(255,255,255,0.55) inset;
  transition:transform 0.12s var(--ease),background 0.12s var(--ease),color 0.12s var(--ease),border-color 0.12s var(--ease);
  letter-spacing:0.01em;
  white-space:nowrap;
}
.tog-val:hover{transform:translateY(-1px);color:#33424f;}
.tog-val.abnormal{
  color:#7e4506;
  background:linear-gradient(180deg,#fdebcf,#fbdda6);
  border-color:#e8b66c;
  box-shadow:0 1px 0 rgba(255,255,255,0.6) inset,0 1px 2px rgba(168,108,12,0.18);
}
.tog-val.pupil-rapd-od{
  color:#1d5189;
  background:linear-gradient(180deg,#dfecf8,#c8ddf0);
  border-color:#9cc1e3;
}
.tog-val.pupil-rapd-os{
  color:#0f6a5b;
  background:linear-gradient(180deg,#dcefea,#c2dfd6);
  border-color:#9bcbbf;
}
.tog-val.pupil-size-aniso{
  color:#7e4506;
  background:linear-gradient(180deg,#fdebcf,#fbdda6);
  border-color:#e8b66c;
}
.tog-val.na{
  color:#9aa0a7;
  background:repeating-linear-gradient(135deg,#f3f3f1 0 4px,#ecebe9 4px 8px);
  border-color:rgba(15,29,48,0.10);
}
.tog-val.editing{
  background:#fff;border-color:#2472b8;
  box-shadow:var(--ring-focus);
}

/* C/D ratio + lens controls match tog-val refinement */
.cd-val{
  font-size:11px;font-weight:600;padding:2px 8px;border-radius:6px;
  color:#5b7184;background:linear-gradient(180deg,#f4f6f9,#eaeef4);
  border:1px solid rgba(15,29,48,0.09);
}
.cd-val.na{
  color:#9aa0a7;
  background:repeating-linear-gradient(135deg,#f3f3f1 0 4px,#ecebe9 4px 8px);
  border-color:rgba(15,29,48,0.10);
}
.cd-select{
  border-radius:6px;border:1px solid #2472b8;
  background:#fff;color:#0f2d4a;
}

/* Exam row breathing — wider, less cramped */
.exam-row{padding:6px 0;}
.exam-row-label{
  font-size:10.5px;
  font-weight:700;
  letter-spacing:0.06em;
  color:#4a5563;
  text-transform:uppercase;
}
.exam-hdr{
  font-size:10px;
  letter-spacing:0.06em;
  text-transform:uppercase;
  font-weight:700;
  color:#5e6770;
}

/* Lens-state ticks (Phakic etc.): refined */
.lens-state-check{
  color:#7e4506;
  font-size:11px;
  font-weight:700;
}
.dil-val{
  font-size:9px;font-weight:800;letter-spacing:0.08em;padding:2px 7px;border-radius:999px;
  color:#9aa0a7;background:rgba(15,29,48,0.04);border:1px solid rgba(15,29,48,0.07);
}
.dil-val.dilated{color:#1f5b9a;background:rgba(36,114,184,0.10);border-color:rgba(36,114,184,0.28);}

/* — Vitals subheaders: badge-like — */
.vitals-subhdr{margin-bottom:9px;}
.vitals-subhdr span:first-child{
  font-size:9px;
  font-weight:800;
  letter-spacing:0.14em;
  color:#5e6770;
  padding:2px 8px 2px 0;
}
.ocular-vitals-section .vitals-subhdr{
  align-items:center;
  padding-bottom:5px;
  border-bottom:1px dashed rgba(15,29,48,0.10);
}
.ocular-vitals-row{padding:12px 14px 14px;gap:14px 18px;}

/* Pupils block — contained inset panel */
.ocular-vitals-section-pupils{
  margin-top:6px;padding:11px 12px 12px;
  background:linear-gradient(180deg,#fafbfc 0%,#f5f7fa 100%);
  border:1px solid rgba(15,29,48,0.08);
  border-radius:10px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.6);
}
.ocular-vitals-section-pupils .vitals-subhdr{
  border-bottom:none;padding-bottom:2px;margin-bottom:8px;
  gap:10px;
}
.ocular-vitals-pupil-controls{gap:7px;}

/* Pupil section N/A toggle: harmonise with the rest */
.vital-na-btn{
  font-size:9px;
  font-weight:800;
  letter-spacing:0.08em;
  padding:2px 8px;
  border-radius:999px;
  border:1px solid rgba(110,109,105,0.28);
  background:rgba(255,255,255,0.7);
  color:#5e6770;
}
.vital-na-btn:hover{background:#fff;color:#3e4651;border-color:#6e6d69;}
.vital-na-btn.active{
  background:#3e4651;color:#fff;border-color:#3e4651;
  box-shadow:0 1px 3px rgba(15,29,48,0.18) inset;
}

/* — Tools & Calculators sub-cards: harmonised tiles — */
.widget-tool-grid{gap:11px;}
.widget-tool-card{
  border:1px solid rgba(15,29,48,0.09);
  border-radius:10px;
  background:linear-gradient(180deg,#fcfdfe 0%,#f5f7fa 100%);
  padding:10px 11px;
  min-height:74px;
  box-shadow:0 1px 0 rgba(255,255,255,0.6) inset,0 1px 2px rgba(15,29,48,0.04);
  transition:border-color 0.16s var(--ease),box-shadow 0.16s var(--ease),transform 0.16s var(--ease);
}
.widget-tool-card:hover{
  border-color:rgba(36,114,184,0.32);
  box-shadow:0 1px 0 rgba(255,255,255,0.6) inset,0 2px 6px rgba(15,29,48,0.08);
  transform:translateY(-1px);
}
.widget-tool-card-title{
  font-size:9.5px;
  letter-spacing:0.12em;
  color:#5e6770;
  font-weight:800;
}
.widget-tool-card button{
  align-self:flex-start;
  font-size:11px;font-weight:700;
  padding:4px 11px;border-radius:999px;
  border:1px solid rgba(36,114,184,0.40);
  background:#fff;color:#1f5b9a;
  box-shadow:0 1px 0 rgba(255,255,255,0.6) inset,0 1px 2px rgba(15,29,48,0.06);
  transition:background 0.14s var(--ease),color 0.14s var(--ease),transform 0.14s var(--ease);
}
.widget-tool-card button:hover{
  background:rgba(36,114,184,0.10);color:#0f3d72;transform:translateY(-1px);
}

/* Tools menu — refined popover */
.tools-widget-menu{
  border-radius:10px;
  border:1px solid rgba(15,29,48,0.10);
  box-shadow:0 12px 28px rgba(15,29,48,0.16),0 2px 6px rgba(15,29,48,0.06);
  padding:9px;
}
.ocular-vitals-addon-menu{
  border-radius:10px;
  box-shadow:0 14px 32px rgba(15,29,48,0.18),0 2px 6px rgba(15,29,48,0.06);
  padding:7px;
}
.tools-widget-menu .addon-btn,
.ocular-vitals-addon-menu .addon-btn{
  background:#fff;
  border-color:rgba(15,29,48,0.10);
  color:#1a1a18;
  font-weight:600;
  padding:6px 12px;
}
.tools-widget-menu .addon-btn:hover,
.ocular-vitals-addon-menu .addon-btn:hover{
  background:rgba(36,114,184,0.10);
  border-color:#2472b8;
  color:#0f3d72;
}
/* — Investigations grid spacing — */
.inv-hdr-row,.inv-row{padding:5px 0;}
.inv-label{font-size:10.5px;font-weight:700;letter-spacing:0.04em;color:#33424f;}
.inv-val{
  font-size:11px;font-weight:600;
  padding:2px 7px;border-radius:6px;
  background:linear-gradient(180deg,#f5f6f8,#ecedef);
  border-color:rgba(15,29,48,0.10);
  color:#7a8290;
}
.inv-val.has-value{background:#fff;color:#1a1a18;border-color:rgba(15,29,48,0.18);}
.inv-val.editing{background:#fff;border-color:#2472b8;box-shadow:var(--ring-focus);}
.inv-interp-check{
  border-radius:5px;
  background:#fff;
  border:1px solid rgba(15,29,48,0.10);
}
.inv-interp-check.active{
  background:rgba(36,114,184,0.10);
  border-color:rgba(36,114,184,0.45);
  color:#1f5b9a;
}

/* — Add-on bars (Investigations testing, Other-exam, billing) — */
.addon-bar{
  background:linear-gradient(180deg,#f7f9fc 0%,#eef3f9 100%);
  border-top-color:rgba(36,72,120,0.10);
  padding:9px 13px;
}
.addon-btn{
  font-size:10.5px;font-weight:600;
  padding:4px 11px;
  border-radius:999px;
  background:#fff;
  border:1px solid rgba(15,29,48,0.10);
  color:#33424f;
  box-shadow:0 1px 2px rgba(15,29,48,0.04);
  transition:all 0.14s var(--ease);
}
.addon-btn:hover{
  background:rgba(36,114,184,0.07);
  border-color:rgba(36,114,184,0.40);
  color:#1f5b9a;
  transform:translateY(-1px);
}
.addon-btn.active{
  background:linear-gradient(180deg,#1a4568,#0f2d4a);
  color:#fff;
  border-color:#0f2d4a;
  box-shadow:0 1px 0 rgba(255,255,255,0.18) inset,0 2px 6px rgba(15,29,48,0.22);
}
.addon-lbl{
  font-size:9px;font-weight:800;letter-spacing:0.14em;color:#7a8290;
}

/* — Stored amber values: subtle warmth — */
.stored-note,.ow-stored,.inv-interp-stored{
  color:#a25a0a;
  font-weight:600;
}
.ow-mot-lbl.set{color:#a25a0a;}
#mot-extras .ow-chip{color:#a25a0a;}

/* — Empty card-body texture: subtle dotted weave so cards never read "blank" — */
.exam-grid.general-consult-grid > .card > .card-scroll > .card-body{
  position:relative;
  padding:14px 16px;
}
.exam-grid.general-consult-grid > .card > .card-scroll > .card-body::before{
  content:"";
  position:absolute;inset:0;
  pointer-events:none;
  background:radial-gradient(rgba(15,29,48,0.045) 0.7px,transparent 1px);
  background-size:14px 14px;
  background-position:0 0;
  opacity:0;
  transition:opacity 0.25s var(--ease);
  z-index:0;
}
/* Show texture only when body is "almost empty" — gated via data attribute that
 * doesn't exist yet, so the rule is dormant. The dotted look would require a
 * structural hook to enable safely; instead we keep card backgrounds clean. */

/* — HPI inline-form card — refined — */
.hpi-storage-field{
  position:absolute !important;
  left:-10000px !important;
  width:1px !important;
  height:1px !important;
  min-height:1px !important;
  opacity:0 !important;
  pointer-events:none !important;
}
.hpi-quick-list{
  display:flex;
  flex-direction:column;
  gap:5px;
  width:100%;
}
.exam-grid.general-consult-grid > .card[data-widget-card="hpi"] > .card-scroll > .card-body{
  padding:0;
}
.hpi-single-display{
  min-height:116px;
  padding:9px 11px;
  border:1px solid transparent;
  border-radius:var(--radius);
  cursor:pointer;
  transition:background .14s var(--ease),border-color .14s var(--ease);
}
.hpi-single-display:hover,
.hpi-single-display:focus{
  background:rgba(224,126,92,0.07);
  border-color:rgba(224,126,92,0.22);
  outline:none;
}
.hpi-single-display-text{
  display:block;
  color:var(--text);
  font-family:var(--os-entry-text-font,var(--font));
  font-size:var(--os-entry-text-font-size,12.5px);
  font-weight:var(--os-entry-text-font-weight,500);
  line-height:var(--os-entry-text-line-height,1.45);
  white-space:pre-wrap;
}
.hpi-single-input{
  width:100%;
  min-height:116px;
  resize:vertical;
}
.hpi-quick-display{
  min-height:74px;
  padding:7px 9px;
  border:1px solid transparent;
  border-radius:var(--radius);
  cursor:pointer;
  transition:background .14s var(--ease),border-color .14s var(--ease);
}
.hpi-quick-display:hover,
.hpi-quick-display:focus{
  background:rgba(224,126,92,0.07);
  border-color:rgba(224,126,92,0.22);
  outline:none;
}
.hpi-quick-display-row{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  gap:6px;
  color:var(--text);
  font-family:var(--os-entry-text-font,var(--font));
  font-size:var(--os-entry-text-font-size,12.5px);
  font-weight:var(--os-entry-text-font-weight,500);
  line-height:var(--os-entry-text-line-height,1.45);
  margin:2px 0;
}
.hpi-quick-num{
  color:var(--text-faint);
  font-size:11px;
  padding-top:1px;
}
.hpi-quick-display-text{
  white-space:pre-wrap;
}
.hpi-quick-empty{
  color:var(--text-faint);
  font-size:12px;
  font-style:italic;
}
.hpi-quick-entry-row{
  display:flex;
  align-items:flex-start;
  gap:6px;
  padding:2px 4px;
  border-radius:var(--radius);
  transition:background .14s var(--ease);
}
.hpi-quick-entry-row:hover,
.hpi-quick-entry-row:focus-within{
  background:rgba(224,126,92,0.07);
}
.hpi-quick-entry-text{
  appearance:none;
  border:0;
  background:transparent;
  flex:1;
  min-width:0;
  padding:4px 7px;
  border-radius:var(--radius);
  color:var(--text);
  font-family:var(--os-entry-text-font,var(--font));
  font-size:var(--os-entry-text-font-size,12.5px);
  font-weight:var(--os-entry-text-font-weight,500);
  line-height:var(--os-entry-text-line-height,1.45);
  text-align:left;
  white-space:pre-wrap;
  cursor:pointer;
}
.hpi-quick-entry-input{
  flex:1;
  min-width:0;
  width:100%;
  resize:vertical;
  min-height:38px;
}
.hpi-quick-entry-del{
  font-size:14px;
  color:var(--text-faint);
  cursor:pointer;
  padding:6px 3px;
  line-height:1;
  opacity:0;
  transition:opacity .14s var(--ease),color .14s var(--ease);
}
.hpi-quick-entry-row:hover .hpi-quick-entry-del,
.hpi-quick-entry-row:focus-within .hpi-quick-entry-del{
  opacity:1;
}
.hpi-quick-entry-del:hover{color:var(--text);}
.hpi-inline-form{
  background:linear-gradient(180deg,#fbfcfd 0%,#f4f7fa 100%);
  border:1px solid rgba(15,29,48,0.08);
  border-radius:10px;
  box-shadow:0 1px 0 rgba(255,255,255,0.6) inset,0 1px 2px rgba(15,29,48,0.04);
  padding:11px 12px;
}
.hpi-form-title{
  font-size:9.5px;letter-spacing:0.13em;color:#33424f;font-weight:800;
}
.hpi-form-close{
  width:22px;height:22px;
  border:1px solid rgba(15,29,48,0.10);
  background:#fff;color:#5e6770;
}
.hpi-form-close:hover{border-color:#2472b8;color:#1f5b9a;}
.hpi-form-search,
.hpi-form-stack{
  display:block;
}
.hpi-form-stack:not(:empty){
  margin-top:8px;
}

/* — Directory result rows — */
.widget-directory-result{border-radius:8px;padding:7px 9px;}
.widget-directory-result-label{font-weight:700;font-size:11.5px;}
.widget-directory-result-domain{
  font-size:8.5px;letter-spacing:0;color:#9aa0a7;font-weight:700;text-transform:none;
}
.widget-directory-result-use{
  font-size:10px;font-weight:500;color:var(--text-muted);line-height:1.25;
}
.widget-directory-source{
  max-width:132px;font-size:8px;font-weight:800;letter-spacing:0.08em;padding:2px 7px;white-space:normal;text-align:center;line-height:1.15;
}
.widget-directory-source.core{
  background:rgba(36,114,184,0.10);color:#1f5b9a;border-color:rgba(36,114,184,0.30);
}
.widget-directory-source.expanded{
  background:rgba(110,109,105,0.10);color:#5e6770;border-color:rgba(110,109,105,0.28);
}

/* — Seg buttons (Imperial/Metric, etc.) — */
.seg{border-radius:999px;overflow:hidden;background:#f4f6f9;border-color:rgba(15,29,48,0.10);}
.seg-btn{
  padding:5px 12px;font-size:10.5px;font-weight:700;letter-spacing:0.04em;
  color:#5e6770;border-right-color:rgba(15,29,48,0.08);
}
.seg-btn.active{
  background:linear-gradient(180deg,#1a4568,#0f2d4a);color:#fff;
  box-shadow:0 1px 0 rgba(255,255,255,0.18) inset;
}

/* — Trends "Open trend" pill button in tools tiles (override default) — */
.widget-tool-card[id$="-body"] .card-hdr{padding:0 0 7px;}

/* — Gentle motion on first paint — */
@media (prefers-reduced-motion: no-preference){
  .exam-grid.general-consult-grid > .card{animation:cardRise 0.45s var(--ease) both;}
  .exam-grid.general-consult-grid > .card:nth-child(1){animation-delay:0.02s;}
  .exam-grid.general-consult-grid > .card:nth-child(2){animation-delay:0.06s;}
  .exam-grid.general-consult-grid > .card:nth-child(3){animation-delay:0.10s;}
  .exam-grid.general-consult-grid > .card:nth-child(4){animation-delay:0.14s;}
  .exam-grid.general-consult-grid > .card:nth-child(5){animation-delay:0.18s;}
  .exam-grid.general-consult-grid > .card:nth-child(6){animation-delay:0.22s;}
  .exam-grid.general-consult-grid > .card:nth-child(7){animation-delay:0.26s;}
  .exam-grid.general-consult-grid > .card:nth-child(8){animation-delay:0.30s;}
}
/* Opacity-only animation: any residual transform (even identity matrix from
 * a finished animation) creates a containing block in Chromium, which breaks
 * position:fixed descendants like the Ocular Vitals addon popover. */
@keyframes cardRise{
  from{opacity:0;}
  to{opacity:1;}
}

/* ── EMPTY-STATE HINTS ───────────────────────────────────────────────────
 *  When a section has no entries yet, render a subtle pseudo-content cue
 *  inviting the user to use the directory search bar below. Pure CSS, no
 *  DOM hooks required.                                                    */

/* Assessment / Plan / Billing rows — each is a .assessment-plan-domain that
 * holds only its .vitals-subhdr until entries are added. */
.assessment-plan-domain:has(> .vitals-subhdr:only-child){position:relative;padding-bottom:18px;}
.assessment-plan-domain:has(> .vitals-subhdr:only-child)::after{
  content:"No entries yet — search the directory below to add one.";
  display:block;
  margin-top:7px;
  padding:9px 12px;
  font-size:10.5px;
  font-weight:500;
  letter-spacing:0.01em;
  color:#8a929c;
  font-style:italic;
  background:repeating-linear-gradient(135deg,rgba(15,29,48,0.018) 0 6px,transparent 6px 12px);
  border:1px dashed rgba(15,29,48,0.13);
  border-radius:8px;
  text-align:center;
}

/* Investigations panels */
#inv-rows:empty::after,
#body-tests-list:empty::after{
  content:"No tests added yet.";
  display:block;
  margin-top:7px;
  padding:9px 12px;
  font-size:10.5px;
  font-weight:500;
  color:#8a929c;
  font-style:italic;
  background:repeating-linear-gradient(135deg,rgba(15,29,48,0.018) 0 6px,transparent 6px 12px);
  border:1px dashed rgba(15,29,48,0.13);
  border-radius:8px;
  text-align:center;
}

/* HPI Forms section — empty until forms are added (the .hpi-forms-hdr is
 * the last child until then). */
.hpi-forms-hdr:last-child{position:relative;}
.hpi-forms-hdr:last-child::after{
  content:"Tap the directory below to attach a structured form (VF, Pain, IOP…).";
  position:absolute;
  left:0;right:0;top:calc(100% + 6px);
  padding:9px 12px;
  font-size:10.5px;
  font-weight:500;
  color:#8a929c;
  font-style:italic;
  background:repeating-linear-gradient(135deg,rgba(15,29,48,0.018) 0 6px,transparent 6px 12px);
  border:1px dashed rgba(15,29,48,0.13);
  border-radius:8px;
  text-align:center;
}

/* Tools & Calculators — the grid is empty until tools are added */
.widget-tool-grid:empty{
  display:block;
  min-height:120px;
  padding:24px 14px;
  border:1px dashed rgba(15,29,48,0.13);
  border-radius:10px;
  background:
    radial-gradient(circle at 20% 20%,rgba(36,114,184,0.045),transparent 45%),
    radial-gradient(circle at 80% 70%,rgba(31,122,62,0.045),transparent 45%),
    repeating-linear-gradient(135deg,rgba(15,29,48,0.018) 0 6px,transparent 6px 12px);
  text-align:center;
  font-size:11px;
  color:#8a929c;
  font-style:italic;
  font-weight:500;
  line-height:1.6;
}
.widget-tool-grid:empty::before{
  content:"No tools added";
  display:block;
  font-size:9.5px;
  font-weight:800;
  letter-spacing:0.13em;
  text-transform:uppercase;
  color:#5e6770;
  font-style:normal;
  margin-bottom:4px;
}
.widget-tool-grid:empty::after{
  content:"Press + to add a BMI, IOP or Visual Acuity trend.";
  display:block;
}

/* Other Examination — empty until + adds an addon. The host is
 * .other-exam-addon-host and its only child is the hidden #addon-detail. */
.other-exam-addon-host:has(> #addon-detail[style*="display:none"]),
.other-exam-addon-host:has(> #addon-detail[style*="display: none"]){
  display:block;
  min-height:140px;
}
.other-exam-addon-host:has(> #addon-detail[style*="display:none"])::before,
.other-exam-addon-host:has(> #addon-detail[style*="display: none"])::before{
  content:"";
  display:block;
  height:140px;
  border:1px dashed rgba(15,29,48,0.13);
  border-radius:10px;
  background:
    radial-gradient(circle at 30% 30%,rgba(36,114,184,0.045),transparent 50%),
    radial-gradient(circle at 70% 70%,rgba(176,108,16,0.04),transparent 50%),
    repeating-linear-gradient(135deg,rgba(15,29,48,0.018) 0 6px,transparent 6px 12px);
  position:relative;
}
.other-exam-addon-host:has(> #addon-detail[style*="display:none"])::after,
.other-exam-addon-host:has(> #addon-detail[style*="display: none"])::after{
  content:"Press + to add Colour Vision, Confrontational Fields, Orthoptics, Lids, Neuro or Cycloplegic Refraction.";
  display:block;
  margin-top:-90px;
  padding:0 18px 12px;
  font-size:11px;
  font-weight:500;
  color:#5e6770;
  font-style:italic;
  text-align:center;
  line-height:1.55;
}

/* ── Fix Pupils inset panel overflow within the fixed-height vitals card ── */
.ocular-vitals-section-pupils{
  padding:9px 11px 10px;
  margin-top:4px;
}
.ocular-vitals-section-pupils .vitals-subhdr{margin-bottom:6px;}
.ocular-vitals-pupil-controls{gap:5px;}

/* ── Tighter card body inside fixed-height exam grid so content breathes ── */
.exam-grid.general-consult-grid > .card .card-body{padding:11px 13px;}

/* ── Ocular Vitals OD/OS pills: tightened spacing within a fixed card ── */
.ocular-vitals-section-vision input.stored-input,
.ocular-vitals-section-vision .ow-cy-lbl{font-size:11.5px;}
.ocular-vitals-section .vitals-subhdr{margin-bottom:7px;padding-bottom:4px;}

/* ── Tools & Calculators: BMI subwidget tile chrome ──
 *  The legacy rule strips BMI's own border/background — tests assert this.
 *  We render the tile chrome via a ::before pseudo-element so the computed
 *  borderTopWidth / backgroundColor on #bmi-body itself stay 0 / transparent.
 *  Visual result: BMI looks like a sibling tile of IOP / Visual Acuity. */
.widget-tool-grid > #bmi-body.open{
  position:relative;
  overflow:visible;
  isolation:isolate;
  transition:transform 0.16s var(--ease);
}
.widget-tool-grid > #bmi-body.open::before{
  content:"";
  position:absolute;
  inset:0;
  border:1px solid rgba(15,29,48,0.09);
  border-radius:10px;
  background:linear-gradient(180deg,#fcfdfe 0%,#f5f7fa 100%);
  box-shadow:0 1px 0 rgba(255,255,255,0.6) inset,0 1px 2px rgba(15,29,48,0.04);
  z-index:-1;
  transition:border-color 0.16s var(--ease),box-shadow 0.16s var(--ease);
  pointer-events:none;
}
.widget-tool-grid > #bmi-body.open:hover{transform:translateY(-1px);}
.widget-tool-grid > #bmi-body.open:hover::before{
  border-color:rgba(36,114,184,0.32);
  box-shadow:0 1px 0 rgba(255,255,255,0.6) inset,0 2px 6px rgba(15,29,48,0.08);
}
.widget-tool-grid > #bmi-body.open > .card-hdr{
  padding:9px 11px 7px!important;
  background:transparent!important;
  gap:6px;
  position:relative;
}
.widget-tool-grid > #bmi-body.open > .card-hdr::after{
  content:"";
  position:absolute;
  left:11px;right:11px;bottom:0;
  height:1px;
  background:rgba(15,29,48,0.08);
}
.widget-tool-grid > #bmi-body.open > .card-hdr .card-title{
  font-size:9.5px!important;
  letter-spacing:0.12em!important;
  font-weight:800!important;
  color:#5e6770!important;
  text-transform:uppercase!important;
}
.widget-tool-grid > #bmi-body.open > .card-hdr .card-pip{
  width:7px;height:7px;
  box-shadow:0 0 0 2px rgba(255,255,255,0.65),0 1px 3px rgba(15,29,48,0.18);
}
.widget-tool-grid > #bmi-body.open > .card-hdr .tog-val{
  font-size:9.5px!important;
  padding:2px 8px!important;
  font-weight:700;
  letter-spacing:0.02em;
}
.widget-tool-grid > #bmi-body.open > div:not(.card-hdr){
  padding:9px 11px 10px!important;
}

/* BMI tile is information-dense — give it 2 columns of the grid */
.widget-tool-grid > #bmi-body.open{grid-column:span 2;}

/* BMI body inner row: refine spacing & numeric typography */
.widget-tool-grid > #bmi-body.open > div:not(.card-hdr) > div{
  display:flex;justify-content:center;gap:18px;flex-wrap:nowrap;
}
.widget-tool-grid > #bmi-body.open .field-label{
  font-size:8.5px;
  font-weight:800;
  letter-spacing:0.13em;
  color:#7a8290;
  text-transform:uppercase;
  margin-bottom:2px;
}
.widget-tool-grid > #bmi-body.open #bmi-height-row,
.widget-tool-grid > #bmi-body.open #bmi-weight-row{
  font-family:var(--mono);
  font-size:11.5px;
}
.widget-tool-grid > #bmi-body.open #bmi-result{
  font-family:var(--mono);
  font-size:14px;
  font-weight:700;
  color:#0f2d4a;
  letter-spacing:0.02em;
}

/* ── Other Exam addon detail tiles (Colour Vision, Confrontational Fields,
 *    Corneal Thickness, Pupil Dilation, Lids & Orbit, Neuro, Cycloplegic Refr,
 *    Orthoptics, Motility, Gonioscopy …). The .refr-body.compact.open rule
 *    strips chrome; give it back to feel cohesive. ── */
.other-exam-addon-host #addon-detail > .compact-row{gap:11px;}
/* Tests assert these elements keep border:0, background:transparent,
 * header border:0 and pip display:none. Render tile chrome via ::before
 * so the computed styles on the element itself stay unchanged. */
.other-exam-addon-host #addon-detail .refr-body.compact.open{
  position:relative;
  isolation:isolate;
  flex:initial!important;
  max-width:none!important;
}
.other-exam-addon-host #addon-detail .refr-body.compact.open::before{
  content:"";
  position:absolute;
  inset:0;
  border:1px solid rgba(15,29,48,0.09);
  border-radius:10px;
  background:linear-gradient(180deg,#fcfdfe 0%,#f5f7fa 100%);
  box-shadow:0 1px 0 rgba(255,255,255,0.6) inset,0 1px 2px rgba(15,29,48,0.04);
  z-index:-1;
  pointer-events:none;
}
.other-exam-addon-host #addon-detail .refr-body.open > .card-hdr{
  background:transparent!important;
  padding:9px 11px 7px!important;
  min-height:0!important;
  gap:6px;
  position:relative;
}
.other-exam-addon-host #addon-detail .refr-body.open > .card-hdr::after{
  content:"";
  position:absolute;
  left:11px;right:11px;bottom:0;
  height:1px;
  background:rgba(15,29,48,0.08);
}
.other-exam-addon-host #addon-detail .refr-body.open > .card-hdr .card-title{
  font-size:9.5px!important;
  letter-spacing:0.12em!important;
  font-weight:800!important;
  color:#5e6770!important;
  text-transform:uppercase!important;
}
.other-exam-addon-host #addon-detail .refr-body.open > div:not(.card-hdr){
  padding:10px 12px!important;
}

/* — Eye Examination: subtle row striping and tightened row rhythm — */
[data-widget-card="anterior-posterior-segment"] .exam-row{
  padding:5px 0;
  border-bottom:1px solid rgba(15,29,48,0.05);
  position:relative;
}
[data-widget-card="anterior-posterior-segment"] .exam-row:nth-child(odd){
  background:linear-gradient(180deg,rgba(36,72,120,0.018) 0%,rgba(36,72,120,0) 100%);
}
[data-widget-card="anterior-posterior-segment"] .exam-row:last-child{border-bottom:none;}
[data-widget-card="anterior-posterior-segment"] .exam-eye-col{gap:3px;}
[data-widget-card="anterior-posterior-segment"] .exam-hdr-row{
  padding:4px 0 6px;
  border-bottom:1px solid rgba(15,29,48,0.08);
}

/* Exam grid abnormal pulse: gentle attention on first appearance */
@media (prefers-reduced-motion: no-preference){
  .tog-val.abnormal{animation:abnormalPulse 0.45s var(--ease) 1;}
}
@keyframes abnormalPulse{
  0%{transform:scale(0.94);}
  60%{transform:scale(1.04);}
  100%{transform:scale(1);}
}

/* — Topbar polish on the encounter banner area — */
.banner-profile-card,.topbar-pt{
  background:rgba(255,255,255,0.07);
  backdrop-filter:saturate(1.05);
}
.bchip-appt{
  background:linear-gradient(180deg,rgba(36,114,184,0.40),rgba(36,114,184,0.30));
  border:1px solid rgba(170,210,245,0.45);
  color:#dceaf7;
  box-shadow:0 1px 0 rgba(255,255,255,0.18) inset,0 1px 4px rgba(0,0,0,0.20);
}

/* — Save / View-note / Exit topbar pills — refined — */
.tbtn{
  letter-spacing:0.01em;
  transition:background 0.13s var(--ease),color 0.13s var(--ease),border-color 0.13s var(--ease),transform 0.13s var(--ease);
}
.tbtn:hover{transform:translateY(-1px);}
.tbtn-note,#encounter-save-btn{
  box-shadow:0 1px 0 rgba(255,255,255,0.18) inset,0 1px 4px rgba(0,0,0,0.18);
}

/* — Day Sheet: refined polish on the existing structure — */
#tab-content-day-sheet .card,.day-sheet-card{
  border-radius:12px;
  box-shadow:var(--shadow-card);
}

/* — Same ::before-based tile chrome for the ocular-vitals addon grid — */
.ocular-vitals-addon-grid > .refr-body.open{
  position:relative;
  isolation:isolate;
}
.ocular-vitals-addon-grid > .refr-body.open::before{
  content:"";
  position:absolute;
  inset:0;
  border:1px solid rgba(15,29,48,0.09);
  border-radius:10px;
  background:linear-gradient(180deg,#fcfdfe 0%,#f5f7fa 100%);
  box-shadow:0 1px 0 rgba(255,255,255,0.6) inset,0 1px 2px rgba(15,29,48,0.04);
  z-index:-1;
  pointer-events:none;
}
.ocular-vitals-addon-grid > .refr-body.open > .card-hdr{
  background:transparent!important;
  padding:9px 11px 7px!important;
  min-height:0!important;
  gap:6px;
  position:relative;
}
.ocular-vitals-addon-grid > .refr-body.open > .card-hdr::after{
  content:"";
  position:absolute;
  left:11px;right:11px;bottom:0;
  height:1px;
  background:rgba(15,29,48,0.08);
}
.ocular-vitals-addon-grid > .refr-body.open > .card-hdr .card-title{
  font-size:9.5px!important;
  letter-spacing:0.12em!important;
  font-weight:800!important;
  color:#5e6770!important;
  text-transform:uppercase!important;
}
.ocular-vitals-addon-grid > .refr-body.open > div:not(.card-hdr){
  padding:10px 12px!important;
}

/* ═══════════════════════════════════════════════════════════════════════════
 *  POLISH LAYER II — Day Sheet, Topbar, Modals, ambient details.
 * ═══════════════════════════════════════════════════════════════════════════ */

/* ── DAY SHEET TABLE ── */
#content-day-sheet > div{padding:24px 24px 16px;}
#content-day-sheet > div > div{max-width:1400px!important;}
#content-day-sheet > div > div > .card{
  border-radius:14px!important;
  border-color:rgba(20,40,72,0.08)!important;
  box-shadow:0 1px 0 rgba(255,255,255,0.6) inset,
             0 1px 3px rgba(15,29,48,0.05),
             0 12px 28px -16px rgba(15,29,48,0.16);
  overflow:hidden;
}
#ds-table{font-family:var(--font);}
#ds-table thead tr{
  background:linear-gradient(180deg,#fafbfc 0%,#f3f5f8 100%);
  border-bottom:1px solid rgba(20,40,72,0.10)!important;
}
#ds-table thead th{
  color:#5e6770!important;
  letter-spacing:0.12em!important;
  font-weight:800!important;
  padding:11px 12px!important;
}
#ds-table tbody tr{
  border-bottom-color:rgba(15,29,48,0.06)!important;
  transition:background 0.16s var(--ease),box-shadow 0.16s var(--ease)!important;
}
#ds-table tbody tr:hover{
  background:linear-gradient(180deg,rgba(36,114,184,0.05) 0%,rgba(36,114,184,0.02) 100%)!important;
  box-shadow:inset 3px 0 0 #2472b8,inset 0 1px 0 rgba(255,255,255,0.6);
}
#ds-table tbody tr:last-child{border-bottom:none!important;}
#ds-table tbody td{padding:11px 12px!important;}

/* Time column: refined numeric typography */
#ds-table tbody td:first-child{
  font-family:var(--mono)!important;
  font-size:13px!important;
  font-weight:600!important;
  color:#0f2d4a!important;
  letter-spacing:0.02em;
}

/* Status select — refined pill */
#ds-body select{
  font-size:10.5px!important;
  font-weight:700!important;
  padding:4px 22px 4px 10px!important;
  border-radius:999px!important;
  border:1px solid rgba(15,29,48,0.12)!important;
  background-color:#fff!important;
  color:#33424f!important;
  letter-spacing:0.02em;
  cursor:pointer;
  text-transform:capitalize;
  min-width:96px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%239c9b96' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 8px center;
  appearance:none;
  -webkit-appearance:none;
}
#ds-body select:hover{border-color:rgba(36,114,184,0.40)!important;}
#ds-body select:focus{
  border-color:#2472b8!important;
  box-shadow:var(--ring-focus);
  outline:none;
}
/* Status colour-coding (modern :has() + :checked on options) */
#ds-body select:has(option:checked[value="checked-in"]){
  background-color:#dcefea!important;
  color:#0f6a5b!important;
  border-color:#9bcbbf!important;
}
#ds-body select:has(option:checked[value="testing"]){
  background-color:#fdf3e0!important;
  color:#7e4506!important;
  border-color:#e8b66c!important;
}
#ds-body select:has(option:checked[value="being-seen"]){
  background-color:#dfecf8!important;
  color:#1d5189!important;
  border-color:#9cc1e3!important;
}
#ds-body select:has(option:checked[value="checked-out"]){
  background-color:#dff2e7!important;
  color:#155f30!important;
  border-color:#a7d9b8!important;
}
#ds-body select:has(option:checked[value="no-show"]){
  background-color:#f3f3f1!important;
  color:#5e6770!important;
  border-color:rgba(110,109,105,0.35)!important;
  text-decoration:line-through;
}
#ds-body select option{font-weight:500;}

/* Appointment Type chip — retained for encounter banner and legacy chips. */
#ds-table tbody td:nth-child(4) > span.os-appt-type-chip{
  font-size:10.5px!important;
  font-weight:700!important;
  padding:3px 11px!important;
  border-radius:999px!important;
  letter-spacing:0.02em;
  box-shadow:0 1px 0 rgba(255,255,255,0.6) inset,0 1px 2px rgba(15,29,48,0.05);
  border:1px solid currentColor!important;
}

/* PIN / VISIT# rows — refine the label-value pair */
#ds-table tbody td:nth-child(2) > div + div > span:first-child,
#ds-table tbody td:nth-child(2) > div + div + div > span:first-child{
  font-size:8.5px!important;
  letter-spacing:0.13em!important;
  color:#9aa0a7!important;
  font-weight:800!important;
}

/* — Day Sheet header strip — */
#content-day-sheet > div > div > div:first-child{
  margin-bottom:18px!important;
}
#content-day-sheet > div > div > div:first-child > span:first-child{
  font-size:22px!important;
  font-weight:700!important;
  letter-spacing:-0.01em;
  color:#0f2d4a!important;
}
#ds-date{font-size:12px!important;color:#7a8290!important;letter-spacing:0.02em;}
#ds-calendar-btn,#ds-add-pt-appt{
  font-size:11px!important;
  font-weight:700!important;
  padding:6px 12px!important;
  border-radius:999px!important;
  box-shadow:0 1px 0 rgba(255,255,255,0.6) inset,0 1px 2px rgba(15,29,48,0.06);
  transition:transform 0.14s var(--ease),box-shadow 0.14s var(--ease),background 0.14s var(--ease)!important;
}
#ds-calendar-btn:hover,#ds-add-pt-appt:hover{
  transform:translateY(-1px);
  box-shadow:0 1px 0 rgba(255,255,255,0.6) inset,0 3px 8px rgba(15,29,48,0.12);
}
#ds-add-pt-appt{
  background:linear-gradient(180deg,#f0f8ec 0%,#e0efd6 100%)!important;
  border-color:#a8c8a0!important;
  color:#2c5024!important;
}

/* Empty cells "—" treatment — softer */
#ds-table tbody td{color:var(--text);}
#ds-table tbody td > div:has(span:only-child){opacity:0.95;}

/* "+ Add patient to day sheet" pill at the table bottom */
#ds-table tbody + tr,
#content-day-sheet tbody ~ * button[onclick*="openAddPatientAndAppointment"]{
  font-weight:700!important;
}

/* — Day-sheet icon buttons polish — */
.ds-icon-btn{
  border-radius:8px!important;
  border:1px solid rgba(15,29,48,0.10)!important;
  background:#fff!important;
  color:#7a8290!important;
  transition:all 0.13s var(--ease)!important;
  box-shadow:0 1px 2px rgba(15,29,48,0.04);
}
.ds-icon-btn:hover{
  background:rgba(36,114,184,0.08)!important;
  color:#1f5b9a!important;
  border-color:rgba(36,114,184,0.40)!important;
  transform:translateY(-1px);
  box-shadow:0 2px 6px rgba(15,29,48,0.10);
}
.ds-check{
  border-radius:8px!important;
  box-shadow:0 1px 0 rgba(255,255,255,0.6) inset,0 1px 2px rgba(31,122,62,0.18);
}
.ds-error-icon{
  border-radius:8px!important;
  box-shadow:0 1px 0 rgba(255,255,255,0.6) inset,0 1px 2px rgba(192,48,48,0.18);
}

/* ── TOPBAR REFINEMENT ── */
.topbar{
  background:linear-gradient(180deg,#0a1928 0%,#0f2d4a 50%,#0a1d31 100%)!important;
  box-shadow:0 1px 0 rgba(255,255,255,0.04) inset,0 8px 24px -16px rgba(15,29,48,0.5);
}
.topbar::after{
  content:"";
  position:absolute;
  left:0;right:0;bottom:0;
  height:1px;
  background:linear-gradient(90deg,
    rgba(122,184,232,0) 0%,
    rgba(122,184,232,0.32) 50%,
    rgba(122,184,232,0) 100%);
  pointer-events:none;
}
.logo-icon{
  background:linear-gradient(135deg,rgba(122,184,232,0.30),rgba(36,114,184,0.18))!important;
  box-shadow:0 1px 0 rgba(255,255,255,0.10) inset,0 2px 4px rgba(0,0,0,0.25);
}
.logo-name{
  font-weight:700;
  background:linear-gradient(180deg,#fff 0%,#cfe1f3 100%);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
}
.logo-name em{
  -webkit-text-fill-color:rgba(255,255,255,0.30);
  color:rgba(255,255,255,0.30);
}
.tab-btn{
  letter-spacing:0.04em;
  font-weight:600;
}
.tab-btn.active{
  background:linear-gradient(180deg,rgba(255,255,255,0.06) 0%,rgba(255,255,255,0.02) 100%);
  border-bottom-color:#7ab8e8;
  box-shadow:inset 0 -2px 0 rgba(122,184,232,0.6);
}
.tab-btn:not(.active):hover{
  background:rgba(255,255,255,0.04);
}
.tbtn{
  font-weight:700;
  letter-spacing:0.02em;
}

/* V2 primary tab refinement */
.topbar-tabs-v2{
  background:transparent!important;
  border-top-color:transparent!important;
}
.tab-btn-v2{
  letter-spacing:0.04em;
  font-weight:600;
  transition:color 0.13s var(--ease),background 0.13s var(--ease);
}
.tab-btn-v2:hover{background:rgba(255,255,255,0.03);}

/* Patient banner: better gradient on the appt chip & profile card */
.topbar-pt .banner-name{
  font-weight:700!important;
  background:linear-gradient(180deg,#ffffff 0%,#e2eef7 100%);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
}
.topbar-pt .banner-sub{
  color:rgba(225,235,245,0.62)!important;
  letter-spacing:0.01em;
}
.bchip-appt{
  letter-spacing:0.05em!important;
  font-weight:700!important;
}

/* ── MODAL POLISH ── */
.file-modal,.edit-modal,.trend-modal,.survey-modal,.note-view-modal-card{
  border-radius:14px!important;
  box-shadow:0 1px 0 rgba(255,255,255,0.6) inset,
             0 24px 60px -12px rgba(15,29,48,0.40),
             0 4px 12px rgba(15,29,48,0.10)!important;
  border:1px solid rgba(20,40,72,0.10);
}
.file-modal-overlay,.edit-modal-overlay,.survey-modal-overlay{
  background:rgba(15,29,48,0.42)!important;
  backdrop-filter:blur(2px);
}
.file-modal h3,.edit-modal h3,.trend-modal h3,.survey-modal h3{
  font-size:16px!important;
  font-weight:700!important;
  letter-spacing:-0.01em;
  color:#0f2d4a!important;
}
.edit-modal-save{
  background:linear-gradient(180deg,#1a4568,#0f2d4a)!important;
  box-shadow:0 1px 0 rgba(255,255,255,0.18) inset,0 2px 6px rgba(15,29,48,0.22);
  transition:transform 0.13s var(--ease),box-shadow 0.13s var(--ease);
}
.edit-modal-save:hover{
  transform:translateY(-1px);
  box-shadow:0 1px 0 rgba(255,255,255,0.18) inset,0 4px 10px rgba(15,29,48,0.28);
}
.edit-modal-cancel{border-radius:7px;transition:background 0.13s var(--ease);}
.edit-modal-cancel:hover{background:var(--gray-200)!important;}

.file-browse-btn{
  border-radius:8px!important;
  box-shadow:0 1px 0 rgba(255,255,255,0.6) inset,0 1px 2px rgba(15,29,48,0.05);
  transition:background 0.13s var(--ease),border-color 0.13s var(--ease),transform 0.13s var(--ease);
}
.file-browse-btn:hover{
  transform:translateY(-1px);
  border-color:rgba(36,114,184,0.40);
}

/* — Login screen — refined */
.login-wrap{
  background:
    radial-gradient(circle at 20% 30%,rgba(36,114,184,0.05),transparent 45%),
    radial-gradient(circle at 80% 70%,rgba(31,122,62,0.04),transparent 45%),
    var(--bg);
}
.login-card{
  border-radius:14px;
  border-color:rgba(20,40,72,0.10);
  box-shadow:0 1px 0 rgba(255,255,255,0.6) inset,
             0 24px 60px -12px rgba(15,29,48,0.25),
             0 4px 12px rgba(15,29,48,0.08);
}
.login-logo .logo-icon{
  background:linear-gradient(135deg,#1a4568 0%,#0f2d4a 100%);
  box-shadow:0 1px 0 rgba(255,255,255,0.18) inset,0 4px 10px rgba(15,29,48,0.22);
}
.login-logo .logo-name{
  font-weight:700;
  letter-spacing:-0.01em;
}
.login-btn{
  background:var(--ink-link,var(--blue,#d97757))!important;
  background-image:none!important;
  border:1px solid var(--ink-link,var(--blue,#d97757))!important;
  color:var(--paper,#faf9f5)!important;
  box-shadow:none!important;
  transition:background 0.14s var(--ease),border-color 0.14s var(--ease),transform 0.14s var(--ease);
}
.login-btn:hover{
  transform:translateY(-1px);
  background:color-mix(in srgb,var(--ink-link,var(--blue,#d97757)) 88%,var(--ink,#1f1e1d))!important;
  border-color:color-mix(in srgb,var(--ink-link,var(--blue,#d97757)) 88%,var(--ink,#1f1e1d))!important;
  box-shadow:none!important;
}

/* — Note panel (slide-in) — */
.note-panel{
  box-shadow:-12px 0 60px rgba(15,29,48,0.20),
             -2px 0 8px rgba(15,29,48,0.06);
}
.note-panel-hdr{
  background:linear-gradient(180deg,#0a1928 0%,#0f2d4a 100%)!important;
}
.npbtn-copy{
  background:linear-gradient(180deg,#2472b8,#1d5fa0)!important;
  box-shadow:0 1px 0 rgba(255,255,255,0.18) inset,0 1px 4px rgba(0,0,0,0.20);
}

/* — Drop zone — */
.drop-zone{
  border-radius:12px!important;
  background:linear-gradient(180deg,#fafbfc 0%,#f5f7fa 100%);
  transition:border-color 0.18s var(--ease),background 0.18s var(--ease),transform 0.18s var(--ease);
}
.drop-zone:hover{transform:translateY(-1px);}

/* — Toast — */
.toast{
  background:linear-gradient(180deg,#1a4568,#0f2d4a)!important;
  font-weight:600!important;
  letter-spacing:0.02em;
  padding:9px 18px!important;
  border-radius:999px!important;
  box-shadow:0 1px 0 rgba(255,255,255,0.18) inset,0 8px 20px rgba(15,29,48,0.30);
}

/* — Survey badges — */
.survey-badge{
  font-weight:700!important;
  letter-spacing:0.04em;
  box-shadow:0 1px 0 rgba(255,255,255,0.6) inset;
}

/* ── Per-widget pip accent identity ──
 *  The `.card-pip` colors (set inline in JS) already vary per widget. Build
 *  on them: each header's hairline highlight inherits the pip's hue, giving
 *  each card a quietly distinct identity without breaking the uniform
 *  chrome the legacy tests assert. — */
.exam-grid.general-consult-grid > .card > .card-hdr:first-child .card-pip{
  position:relative;
}
.exam-grid.general-consult-grid > .card > .card-hdr:first-child .card-pip::after{
  content:"";
  position:absolute;
  inset:-3px;
  border-radius:50%;
  background:inherit;
  opacity:0.18;
  z-index:-1;
  filter:blur(2px);
  pointer-events:none;
}

/* ── Patient banner avatar polish ── */
.banner-avatar{
  background:linear-gradient(135deg,rgba(122,184,232,0.32) 0%,rgba(36,114,184,0.18) 100%)!important;
  box-shadow:
    0 0 0 2px rgba(255,255,255,0.18) inset,
    0 0 0 4px rgba(122,184,232,0.10),
    0 4px 12px rgba(0,0,0,0.20)!important;
}
.banner-avatar.has-pt{
  background:linear-gradient(135deg,rgba(255,255,255,0.22),rgba(122,184,232,0.18))!important;
}

/* — Placeholder tab panes (Surveys/Referrals/Letters/Wait Lists/Billing/Notes) — */
.tab-pane{
  font-size:13px!important;
  font-style:normal!important;
  color:#7a8290!important;
  background:
    radial-gradient(circle at 30% 30%,rgba(36,114,184,0.025),transparent 50%),
    radial-gradient(circle at 70% 70%,rgba(31,122,62,0.02),transparent 50%),
    rgba(247,249,251,0.65)!important;
}
.tab-stub{
  border-radius:14px!important;
  border-color:rgba(20,40,72,0.10)!important;
  box-shadow:0 1px 0 rgba(255,255,255,0.6) inset,
             0 1px 3px rgba(15,29,48,0.05),
             0 12px 28px -16px rgba(15,29,48,0.16);
}
.tab-stub-title{
  font-size:19px!important;
  letter-spacing:-0.01em!important;
  color:#0f2d4a!important;
}
.tab-stub-action{
  border-radius:999px!important;
  font-size:11px!important;
  letter-spacing:0.04em;
  background:linear-gradient(180deg,rgba(36,114,184,0.10),rgba(36,114,184,0.06))!important;
  border:1px solid rgba(36,114,184,0.32)!important;
  color:#1f5b9a!important;
  box-shadow:0 1px 0 rgba(255,255,255,0.6) inset,0 1px 2px rgba(15,29,48,0.06);
  transition:transform 0.13s var(--ease),box-shadow 0.13s var(--ease)!important;
}
.tab-stub-action:hover{
  transform:translateY(-1px);
  box-shadow:0 1px 0 rgba(255,255,255,0.6) inset,0 3px 8px rgba(15,29,48,0.10);
}

/* — Day Sheet footer "Add patient" pill — */
#content-day-sheet button[onclick*="openAddPatientAndAppointment"]:not(#ds-add-pt-appt){
  font-family:var(--font);
  font-size:11px;
  font-weight:700;
  letter-spacing:0.02em;
  padding:7px 16px;
  border-radius:999px;
  background:linear-gradient(180deg,rgba(36,114,184,0.10),rgba(36,114,184,0.06));
  border:1px solid rgba(36,114,184,0.32);
  color:#1f5b9a;
  cursor:pointer;
  box-shadow:0 1px 0 rgba(255,255,255,0.6) inset,0 1px 2px rgba(15,29,48,0.06);
  transition:transform 0.13s var(--ease),box-shadow 0.13s var(--ease);
}
#content-day-sheet button[onclick*="openAddPatientAndAppointment"]:not(#ds-add-pt-appt):hover{
  transform:translateY(-1px);
  box-shadow:0 1px 0 rgba(255,255,255,0.6) inset,0 3px 8px rgba(15,29,48,0.10);
}

/* — Encounter save / view note buttons in the topbar — */
#encounter-save-btn{
  background:linear-gradient(180deg,#f2b84b 0%,#d99a28 100%)!important;
  border-color:#c68a18!important;
  color:#3d2f0a!important;
  font-weight:700!important;
  letter-spacing:0.02em;
  box-shadow:0 1px 0 rgba(255,255,255,0.34) inset,0 2px 6px rgba(187,123,18,0.30);
}
#encounter-save-btn:hover{
  background:linear-gradient(180deg,#f5c560,#deac34)!important;
}

/* — "Logout" / "Exit" topbar buttons refined — */
.tbtn[id="logout-btn"],
.tbtn[onclick*="exit"]{
  border:1px solid rgba(232,140,140,0.36)!important;
  background:rgba(232,90,90,0.10)!important;
  color:rgba(255,200,200,0.92)!important;
}
.tbtn[id="logout-btn"]:hover,
.tbtn[onclick*="exit"]:hover{
  background:rgba(232,90,90,0.20)!important;
  border-color:rgba(255,150,150,0.55)!important;
  color:#fff!important;
}

/* — Subtle hairline on the banner profile card.
 *  Only target the patient-files banner-profile-card; topbar-pt is positioned
 *  absolute and must not be overridden. — */
.banner-profile-card{position:relative;}
.banner-profile-card::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,0.04) 0%,rgba(255,255,255,0) 60%);
}

/* ── Scrollbar refinement (page-level) ── */
*::-webkit-scrollbar{width:8px;height:8px;}
*::-webkit-scrollbar-thumb{
  background:rgba(15,29,48,0.16);
  border-radius:999px;
  border:2px solid transparent;
  background-clip:content-box;
}
*::-webkit-scrollbar-thumb:hover{
  background:rgba(15,29,48,0.30);
  background-clip:content-box;
}

/* ── ENCOUNTER STATE VIEWER (col-left dark sidebar) ── */
body.encounter-review-open .col-left{
  background:linear-gradient(180deg,#0f1d2a 0%,#172533 50%,#0e1a26 100%)!important;
  border-right:1px solid rgba(122,184,232,0.10)!important;
  box-shadow:14px 0 48px -16px rgba(0,0,0,0.55),inset -1px 0 0 rgba(255,255,255,0.04)!important;
}
.enc-state-viewer{padding:14px 14px 22px!important;}
.enc-state-title{
  font-size:11px!important;
  letter-spacing:0.16em!important;
  color:#fff!important;
  padding-bottom:8px;
  border-bottom:1px solid rgba(122,184,232,0.14);
  margin-bottom:10px!important;
}
.enc-state-sub{
  font-size:10px!important;
  color:rgba(180,200,225,0.55)!important;
  letter-spacing:0.02em;
  margin-bottom:14px!important;
}
.enc-state-section{
  border-top-color:rgba(122,184,232,0.10)!important;
  padding:11px 0!important;
}
.enc-state-section h3{
  font-size:9.5px!important;
  letter-spacing:0.14em!important;
  color:rgba(225,235,250,0.72)!important;
  margin-bottom:7px!important;
}
.enc-state-row{
  padding:3px 0!important;
  border-bottom-color:rgba(122,184,232,0.06)!important;
  transition:background 0.13s var(--ease);
  border-radius:4px;
  padding-left:4px;
  padding-right:4px;
  margin-left:-4px;
  margin-right:-4px;
}
.enc-state-row:hover{background:rgba(122,184,232,0.05);}
.enc-state-row span:first-child{
  color:rgba(170,190,215,0.55)!important;
  font-size:9.5px!important;
}
.enc-state-row b{
  color:rgba(255,255,255,0.92)!important;
  font-weight:600!important;
  font-size:10.5px!important;
}
.enc-state-muted{
  color:rgba(255,255,255,0.30)!important;
}
.enc-state-empty{
  color:rgba(200,215,235,0.55)!important;
  background:rgba(122,184,232,0.04);
  border:1px dashed rgba(122,184,232,0.18);
  border-radius:8px;
  padding:14px 12px!important;
  text-align:center;
}
.enc-state-details summary{
  padding:4px 0!important;
  transition:color 0.13s var(--ease);
}
.enc-state-details summary:hover{color:#fff!important;}
.enc-state-details summary span{
  color:rgba(170,190,215,0.55)!important;
  letter-spacing:0.04em;
}

/* — sb-block treatments in the navy encounter-state review surface — */
.enc-state-viewer .sb-block{border-bottom-color:rgba(122,184,232,0.10)!important;}
.enc-state-viewer .sb-block-title{
  font-size:10px!important;
  letter-spacing:0.13em!important;
  color:rgba(225,240,255,0.92)!important;
}
.enc-state-viewer .sb-btn{
  font-size:9px!important;
  font-weight:700!important;
  letter-spacing:0.04em;
  padding:3px 9px!important;
  border-radius:999px!important;
  background:rgba(122,184,232,0.10)!important;
  border-color:rgba(122,184,232,0.28)!important;
  color:rgba(195,220,245,0.78)!important;
  transition:all 0.13s var(--ease)!important;
}
.enc-state-viewer .sb-btn:hover{
  background:rgba(122,184,232,0.20)!important;
  border-color:rgba(122,184,232,0.50)!important;
  color:#fff!important;
}
.enc-state-viewer .sb-btn.done{
  background:rgba(31,122,62,0.32)!important;
  border-color:rgba(122,200,140,0.50)!important;
  color:#bce5cb!important;
}
.enc-state-viewer .sb-status-btn{
  font-size:8.5px!important;
  font-weight:700!important;
  letter-spacing:0.04em;
  padding:2px 7px!important;
  border-radius:999px!important;
  border-color:rgba(122,184,232,0.22)!important;
}
.enc-state-viewer .sb-status-btn.na-active{
  background:rgba(150,170,200,0.22)!important;
  color:rgba(225,235,245,0.96)!important;
  border-color:rgba(150,170,200,0.55)!important;
}
.enc-state-viewer .sb-status-btn.ex-active{
  background:rgba(230,140,50,0.28)!important;
  border-color:rgba(230,140,50,0.60)!important;
}
.enc-state-viewer .sb-block.sb-excluded{
  box-shadow:inset 3px 0 0 rgba(230,140,50,0.70)!important;
}
.enc-state-viewer .sb-item{
  color:rgba(245,250,255,0.86)!important;
  font-size:11px;
}
.enc-state-viewer .sb-item-num{
  font-size:8.5px!important;
  color:rgba(170,190,215,0.45)!important;
}
.enc-state-viewer .sb-none{
  color:rgba(180,200,225,0.50)!important;
  font-size:10.5px;
}
.enc-state-viewer .sb-none.confirmed{
  color:rgba(225,235,245,0.85)!important;
}
.enc-state-viewer .list-inp{
  font-size:11px!important;
  background:rgba(255,255,255,0.96)!important;
  border:1px solid rgba(122,184,232,0.30)!important;
  border-radius:6px!important;
  color:#1a1a18!important;
}
.enc-state-viewer .list-inp:focus{
  background:rgba(255,255,255,1)!important;
  border-color:#7ab8e8!important;
  box-shadow:0 0 0 3px rgba(122,184,232,0.18)!important;
}
.enc-state-viewer .list-add-btn{
  font-size:9.5px!important;
  font-weight:700!important;
  letter-spacing:0.06em;
  padding:3px 11px!important;
  border-radius:999px!important;
  border-color:rgba(122,184,232,0.30)!important;
  color:rgba(195,220,245,0.62)!important;
}
.enc-state-viewer .list-add-btn:hover{
  border-color:rgba(122,184,232,0.60)!important;
  color:rgba(225,240,255,0.95)!important;
  background:rgba(122,184,232,0.08)!important;
}

/* — Patient Files folder card refinement — */
.files-card{
  border-radius:14px!important;
  border-color:rgba(20,40,72,0.10)!important;
  box-shadow:0 1px 0 rgba(255,255,255,0.6) inset,
             0 1px 3px rgba(15,29,48,0.05),
             0 12px 28px -16px rgba(15,29,48,0.16);
}
.files-card-hdr{
  background:linear-gradient(180deg,#fafbfc 0%,#f3f5f8 100%);
  border-bottom-color:rgba(20,40,72,0.08)!important;
}
.files-card-title{
  font-size:10px!important;
  letter-spacing:0.13em!important;
  color:#5e6770!important;
  font-weight:800!important;
}

/* — Patient Files drop-zone refinement (patient files tab variant) — */
.files-layout .drop-zone{
  background:
    radial-gradient(circle at 30% 30%,rgba(36,114,184,0.05),transparent 50%),
    radial-gradient(circle at 70% 70%,rgba(31,122,62,0.04),transparent 50%),
    linear-gradient(180deg,#fafbfc 0%,#f5f7fa 100%);
}

/* — Note panel: refined toolbar layout — */
.note-panel{
  border-left:1px solid rgba(20,40,72,0.12)!important;
}
.note-panel-hdr{
  border-bottom:1px solid rgba(122,184,232,0.18)!important;
  box-shadow:0 1px 0 rgba(255,255,255,0.05) inset,0 2px 8px rgba(0,0,0,0.16);
}
/* Note body uses a serif body face — feels like a proper clinical letter on
 * letterhead paper. System serif degrades gracefully across platforms. */
.note-textarea{
  font-family:ui-serif,'New York','Charter','Iowan Old Style',Georgia,Cambria,serif!important;
  font-size:14px!important;
  line-height:1.78!important;
  color:#1a1a18!important;
  padding:28px 32px!important;
  letter-spacing:0.005em;
  font-variant-numeric:oldstyle-nums;
  background:
    /* very subtle paper-warm cast */
    linear-gradient(180deg,#fdfcfa 0%,#faf9f6 100%)!important;
}
.note-textarea:empty::before{
  font-size:13px!important;
  letter-spacing:0.01em;
  font-style:italic;
}

/* Note paragraphs get a more letter-like leading */
.note-textarea > p,
.note-textarea > div{
  margin-bottom:0.7em;
}

/* Bold/header lines (e.g., "PHYSICAL EXAMINATION") inside note */
.note-textarea > p:has(b),
.note-textarea > p > b:only-child{
  font-family:var(--font);
  font-size:10.5px;
  letter-spacing:0.13em;
  text-transform:uppercase;
  color:#5e6770;
}

/* — Refined "No appointments on this day." in Day Sheet —
 *   Only applies to the genuine empty-state td (no buttons, no inputs). The
 *   "+ Add patient to day sheet" footer also uses td[colspan] so we exclude
 *   any colspan-td that contains an interactive element. ── */
#ds-body td[colspan]:not(:has(button)):not(:has(input)){
  padding:36px 24px!important;
  font-family:ui-serif,'New York',Georgia,serif!important;
  font-size:14px!important;
  font-style:italic!important;
  color:#5e6770!important;
  letter-spacing:0.01em;
  position:relative;
}
#ds-body td[colspan]:not(:has(button)):not(:has(input))::before{
  content:"·  ·  ·";
  display:block;
  margin-bottom:8px;
  letter-spacing:0.3em;
  color:rgba(15,29,48,0.20);
  font-family:var(--font);
  font-size:11px;
  font-style:normal;
}

/* — Letter-style margin on the "Sincerely" closing line via :has( ) — */
.note-textarea > p:nth-last-of-type(-n+3){
  margin-top:0.5em;
}

/* — Note panel header pill row: tighten spacing for elegance — */
.note-panel-hdr > *{margin-right:0;}

/* — Save-encounter button always reads with high contrast — */
#encounter-save-btn{
  text-shadow:0 1px 0 rgba(255,255,255,0.32);
}

/* — Refined search-input lookup label — */
#search-modal-overlay label,
#search-modal-overlay > div > div:first-child{
  font-size:10.5px;
  letter-spacing:0.12em;
  font-weight:700;
  color:#5e6770;
  text-transform:uppercase;
}

/* — Note close × button refinement — */
.npbtn:has(span[aria-hidden]),
.npbtn[onclick*="closeNote"],
.npbtn:last-of-type{
  width:28px;
  min-width:28px;
  height:28px;
  border-radius:50%!important;
  padding:0!important;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}

/* — Refined banner-name max-width safety so very long names still fit — */
.topbar-pt .banner-name{
  max-width:32ch!important;
}

/* ── HIGH-CONTRAST PREFERENCE — stronger borders and text contrast for users
 *   who set prefers-contrast: more in their OS settings. ── */
@media (prefers-contrast: more){
  .exam-grid.general-consult-grid > .card,
  .widget-tool-card,
  .files-card,
  .file-modal,.edit-modal,.trend-modal,.survey-modal,
  .login-card{
    border-width:1.5px;
    border-color:rgba(15,29,48,0.40);
  }
  .tog-val{
    border-width:1.25px;
    color:#0f2d4a;
  }
  .tog-val.abnormal{
    border-width:1.5px;
    color:#5a3204;
  }
  .widget-add-btn,.widget-download-btn{
    border-width:1.5px;
    border-color:rgba(36,114,184,0.65);
  }
  .widget-na-btn{
    border-width:1.5px;
    border-color:rgba(15,29,48,0.45);
  }
  #ds-body select{
    border-width:1.5px;
    border-color:rgba(15,29,48,0.35);
  }
  .text-muted,.text-faint,
  .eye-tag,
  .exam-row-label,
  .exam-hdr,
  .vitals-subhdr span:first-child,
  .field-label{
    color:#1a1a18!important;
  }
}

/* ── REDUCED TRANSPARENCY PREFERENCE — preserve background contrast for
 *   users who set prefers-reduced-transparency. ── */
@media (prefers-reduced-transparency: reduce){
  .file-modal-overlay,
  .edit-modal-overlay,
  .survey-modal-overlay,
  #search-modal-overlay{
    backdrop-filter:none!important;
    background:rgba(15,29,48,0.65)!important;
  }
  .widget-add-btn,
  .widget-download-btn,
  .widget-na-btn{
    background:#fff!important;
  }
}

/* ── Brand accent-color for native form controls (checkboxes, radios,
 *   range, progress). One line, sweeping coverage. ── */
:root{accent-color:#2472b8;}

/* ── Refined <details> / <summary> styling — used in the encounter sidebar
 *   for collapsible sections. ── */
details > summary{
  cursor:pointer;
  list-style:none;
  user-select:none;
}
details > summary::-webkit-details-marker{display:none;}
details > summary::before{
  content:"›";
  display:inline-block;
  width:14px;
  text-align:center;
  color:rgba(15,29,48,0.40);
  transition:transform 0.18s var(--ease);
  font-weight:700;
}
details[open] > summary::before{transform:rotate(90deg);}

/* — Refined progress bars (if any in trend modals etc.) — */
progress{
  height:6px;
  border-radius:999px;
  overflow:hidden;
  background:rgba(15,29,48,0.08);
}
progress::-webkit-progress-bar{background:rgba(15,29,48,0.08);border-radius:999px;}
progress::-webkit-progress-value{
  background:linear-gradient(90deg,#2472b8,#7ab8e8);
  border-radius:999px;
}
progress::-moz-progress-bar{background:linear-gradient(90deg,#2472b8,#7ab8e8);border-radius:999px;}

/* — Subtle pulse on the active sub-tab indicator when a tab is freshly
 *   activated. Pure CSS, motion-respecting. — */
.tab-btn-v2.active{
  position:relative;
}
.tab-btn-v2.active::after{
  content:"";
  position:absolute;
  left:50%;right:50%;bottom:0;
  height:2px;
  background:#7ab8e8;
  border-radius:2px;
}
@media (prefers-reduced-motion: no-preference){
  .tab-btn-v2.active::after{animation:tabUnderline 0.32s var(--ease) forwards;}
}
@keyframes tabUnderline{
  to{left:14%;right:14%;}
}

/* — Refined font-feature-settings throughout for the editorial moments — */
.note-textarea,
.tab-stub-body,
#ds-body td[colspan]{
  font-feature-settings:"liga" 1, "kern" 1, "onum" 1;
}

/* — Refined hyphenation in note panel for clinical letter wrapping — */
.note-textarea{
  hyphens:auto;
  word-spacing:0.01em;
}

/* — Subtle text-rendering optimization for the encounter banner serif — */
.topbar-pt .banner-name,
.tab-stub-title,
#content-day-sheet > div > div > div:first-child > span:first-child{
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* ── MODERN TEXT BALANCING — Chromium/Safari progressive enhancement. ──
 *  text-wrap:balance distributes characters across lines evenly for better
 *  visual harmony in headings (browsers without support degrade silently). */
.tab-stub-title,
.tab-stub-body,
.file-modal h3,
.edit-modal h3,
.trend-modal h3,
.survey-modal h3,
.topbar-pt .banner-name,
.files-card-title,
.files-card-body p,
#content-day-sheet > div > div > div:first-child > span:first-child,
#ds-body td[colspan]{
  text-wrap:balance;
}
/* Body copy in the clinical letter gets text-wrap:pretty for better
 * paragraph rag (no widows/orphans). */
.note-textarea,
.tab-stub-body{
  text-wrap:pretty;
}

/* ── Refined "no data" state for empty Day Sheet cells — softer dash ── */
#ds-table tbody td > *:only-child:is(span)[textContent="—"]{
  opacity:0.4;
}

/* ── Refined hover affordance on the OphthoScribe wordmark — */
.logo-name{transition:transform 0.18s var(--ease);}
.logo:hover .logo-name{transform:translateX(1px);}

/* ── Refined micro-state: cursor on every clickable surface ── */
.tog-val:not(.editing):not(.na),
.cd-val:not(.na),
.dil-val,
.exam-hdr,
.eye-tag.clickable,
.bchip-edit,
.addon-btn{cursor:pointer;}

/* ── Subtle text decoration on the note-panel "Sincerely" — */
.note-textarea > p:last-of-type{
  opacity:0.92;
}

/* ── Final detail: ensure all interactive elements respect cursor: pointer
 *   on hover, never reverting to default — */
button:not(:disabled),
[role="button"]:not([aria-disabled="true"]),
[onclick]{cursor:pointer;}

/* ── SCROLL STABILITY — reserve scrollbar gutter so layout doesn't reflow
 *   when content overflows. Modern browsers only; ignored elsewhere. ── */
.exam-grid.general-consult-grid > .card > .card-scroll,
.col-mid,
.col-left,
.files-layout,
.file-modal,
.edit-modal,
.trend-modal,
.note-textarea{
  scrollbar-gutter:stable;
}

/* ── REFINED :focus-within on encounter cards.
 *   When a user types/clicks into a card, the card subtly highlights, telling
 *   the user "you're editing this widget." ── */
.exam-grid.general-consult-grid > .card:focus-within::before{
  background:linear-gradient(90deg,transparent,rgba(36,114,184,0.85),transparent);
  left:8%;right:8%;
}
.exam-grid.general-consult-grid > .card:focus-within{
  box-shadow:var(--shadow-card-hover),0 0 0 1px rgba(36,114,184,0.18);
}

/* ── Variable-font optical sizing for serifs (works on supporting browsers). ── */
.topbar-pt .banner-name,
.tab-stub-title,
.file-modal h3,
.edit-modal h3,
.trend-modal h3,
.survey-modal h3,
#content-day-sheet > div > div > div:first-child > span:first-child,
.note-textarea,
#ds-body td[colspan]{
  font-optical-sizing:auto;
}

/* ── Refined "field-sizing: content" for textareas where appropriate.
 *   Lets the textarea grow with content. ── */
.hpi-inline-form textarea,
.list-inp{
  field-sizing:content;
}

/* ── Reduced-data preference: stop loading decorative pseudo-elements that
 *   are purely visual (no semantic meaning). ── */
@media (prefers-reduced-data: reduce){
  .logo-icon::before,.logo-icon::after,
  .banner-avatar::before,
  .files-card-hdr::before,
  #content-day-sheet > div::before,
  .exam-grid.general-consult-grid > .card::before,
  .card-pip::after,
  body{background-image:none!important;}
}

/* ── INTERPOLATE-SIZE — allow CSS transitions to/from auto/intrinsic sizes.
 *   Progressive enhancement: browsers without support ignore this. ── */
:root{interpolate-size:allow-keywords;}

/* ── VIEW TRANSITIONS — hint to the browser that certain elements have
 *   distinct identity across view changes. Browsers without support ignore. ── */
@supports (view-transition-name: var(--vt-cards)){
  .exam-grid.general-consult-grid > .card[data-widget-card="hpi"]{view-transition-name:vt-hpi;}
  .exam-grid.general-consult-grid > .card[data-widget-card="ocular-history"]{view-transition-name:vt-history;}
  .exam-grid.general-consult-grid > .card[data-widget-card="investigations"]{view-transition-name:vt-invest;}
  .exam-grid.general-consult-grid > .card[data-widget-card="trends"]{view-transition-name:vt-tools;}
  .exam-grid.general-consult-grid > .card[data-widget-card="ocular-vitals"]{view-transition-name:vt-vitals;}
  .exam-grid.general-consult-grid > .card[data-widget-card="anterior-posterior-segment"]{view-transition-name:vt-exam;}
  .exam-grid.general-consult-grid > .card[data-widget-card="other-examination"]{view-transition-name:vt-other;}
  .exam-grid.general-consult-grid > .card[data-widget-card="assessment-plan"]{view-transition-name:vt-assess;}
  .topbar{view-transition-name:vt-topbar;}
  .topbar-pt .banner-name{view-transition-name:vt-banner-name;}
}

/* ── LANG-AWARE TYPOGRAPHY — language-specific punctuation pairing
 *   for proper kerning around quotes / dashes in English clinical text. ── */
:lang(en){quotes:"\201C" "\201D" "\2018" "\2019";}
:lang(en) .note-textarea{
  font-feature-settings:"liga" 1, "kern" 1, "onum" 1, "ss01" 1;
}

/* ── COLOR-MIX FALLBACKS — modern browsers can mix colours dynamically.
 *   For our hover halos we already use direct rgba; this just normalizes. ── */
@supports (background: color-mix(in srgb, white 50%, blue)){
  .widget-add-btn:hover,
  .widget-download-btn:hover{
    background:color-mix(in srgb, white 90%, #2472b8 10%);
  }
}

/* ── HOVER vs ACTUAL hover capability — refined for touch devices. ── */
@media (hover: none){
  .exam-grid.general-consult-grid > .card:hover{
    box-shadow:var(--shadow-card);
  }
  .exam-grid.general-consult-grid > .card:hover > .card-hdr:first-child > .card-pip{
    animation:none;
  }
  .widget-add-btn:hover,
  .widget-download-btn:hover,
  .widget-na-btn:hover{
    transform:none;
  }
  /* Touch users get more generous tap targets */
  .widget-add-btn,
  .widget-download-btn,
  .widget-na-btn{
    min-height:32px;
  }
}

/* — Survey badge refinement (already partly polished above) — */
.survey-badge-pending{
  background:linear-gradient(180deg,#fef3cd,#fbe6a3)!important;
  border:1px solid #e8c87a;
  color:#7e4506!important;
}
.survey-badge-complete{
  background:linear-gradient(180deg,#dff2e7,#c3e5d1)!important;
  border:1px solid #9bc6ad;
  color:#155f30!important;
}

/* — Drop zone icon refinement — */
.drop-zone-icon{
  font-size:36px!important;
  filter:drop-shadow(0 1px 2px rgba(15,29,48,0.12));
}
.drop-zone:hover .drop-zone-icon,.drop-zone.drag-over .drop-zone-icon{
  filter:drop-shadow(0 2px 4px rgba(36,114,184,0.30));
}

/* — Trend modal refinement — */
.trend-modal h3{
  margin:0 0 4px 0!important;
}
.trend-modal .trend-sub{
  color:#7a8290!important;
  font-size:11.5px!important;
  letter-spacing:0.01em;
}
.trend-modal th{
  letter-spacing:0.11em!important;
  color:#7a8290!important;
}
.trend-modal .trend-current{
  background:linear-gradient(180deg,rgba(36,114,184,0.10),rgba(36,114,184,0.04))!important;
}

/* — Note panel "Generate" button (NP polish) — */
.npbtn{
  border-radius:999px!important;
  font-weight:700!important;
  letter-spacing:0.02em;
}

/* — Subtle title bar shadow on the patient banner area at the topbar — */
.banner{
  position:relative;
  z-index:1;
}

/* — Tab v2 sub-tab bar active line — */
body.encounter-active .topbar-tabs-v2,
body.encounter-active #content-files ~ * .topbar-tabs-v2{display:none;}

/* — First-paint subtle shimmer on the main shell — */
@media (prefers-reduced-motion: no-preference){
  .col-mid{animation:shellFade 0.6s var(--ease) both;}
}
@keyframes shellFade{
  from{opacity:0;}
  to{opacity:1;}
}

/* — Trend modal: refined "no data" body — */
.trend-modal{
  padding:28px 30px!important;
}
.trend-modal > *:not(h3):not(.trend-sub){
  margin-top:14px;
}
.trend-modal table thead{
  background:linear-gradient(180deg,#fafbfc,#f3f5f8);
}
.trend-modal table th{
  padding:8px 12px!important;
  font-weight:800!important;
}
.trend-modal table td{
  padding:8px 12px!important;
}

/* — Search modal refinements — */
#search-modal-overlay{
  background:rgba(15,29,48,0.42)!important;
  backdrop-filter:blur(2px);
}
#search-modal-overlay > div{
  border-radius:14px!important;
  box-shadow:0 1px 0 rgba(255,255,255,0.6) inset,
             0 24px 60px -12px rgba(15,29,48,0.40),
             0 4px 12px rgba(15,29,48,0.10)!important;
}
#search-modal-input{
  border-radius:10px!important;
  font-size:14px!important;
  padding:10px 14px!important;
  border:1px solid rgba(20,40,72,0.14)!important;
  transition:border-color 0.13s var(--ease),box-shadow 0.13s var(--ease)!important;
}
#search-modal-input:focus{
  border-color:#2472b8!important;
  box-shadow:var(--ring-focus)!important;
}

/* — Tab pane footer stub message — */
.tab-pane{position:relative;}

/* — Toast: gentler rise — */
@media (prefers-reduced-motion: no-preference){
  .toast.show{
    animation:toastRise 0.22s var(--ease) both;
  }
}
@keyframes toastRise{
  from{opacity:0;transform:translateY(8px);}
  to{opacity:1;transform:translateY(0);}
}

/* — A few global ergonomics — */
::selection{background:rgba(36,114,184,0.22);color:#0f2d4a;}

/* — Refine the encounter banner appt chip — */
#banner-appt-chip,
.bchip-appt{
  letter-spacing:0.06em;
  text-transform:none;
}

/* — Tab v2 stub-cards: refined ergonomics — */
.tab-stub-action{cursor:pointer;}

/* — A subtle decorative accent on the OphthoScribe logo when hovered — */
.logo{transition:transform 0.18s var(--ease);}
.logo:hover{transform:translateY(-1px);}

/* — Slight pointer cursor on interactive widget header pip dots — */
.exam-grid.general-consult-grid > .card > .card-hdr:first-child{cursor:default;}

/* — Encounter banner profile-card hover — */
.banner-profile-card{
  transition:background 0.16s var(--ease),box-shadow 0.16s var(--ease);
}
.banner-profile-card:hover{
  background:rgba(255,255,255,0.10)!important;
}

/* — Encounter-state review sb-block: subtle hover state — */
.enc-state-viewer .sb-block{transition:background 0.16s var(--ease);}
.enc-state-viewer .sb-block:hover{background:rgba(122,184,232,0.04);}

/* ── PRINT PREVIEW SAFETY — ensure note panel prints clean ── */
@media print{
  .topbar,.col-left,.col-mid,.banner{display:none!important;}
  .note-panel{position:static!important;width:100%!important;border:none!important;box-shadow:none!important;}
  .note-textarea{padding:0!important;font-size:12pt!important;color:#000!important;}
}

/* ═══════════════════════════════════════════════════════════════════════════
 *  SIGNATURE DETAILS — unique-to-OphthoScribe touches
 * ═══════════════════════════════════════════════════════════════════════════ */

/* — A subtle iris-pattern signature decoration on the logo icon, evoking the
 *   pupil + iris radial structure central to ophthalmology. — */
.logo-icon{
  position:relative;
  overflow:hidden;
}
.logo-icon::before{
  content:"";
  position:absolute;
  inset:-2px;
  background:
    conic-gradient(from 90deg at 50% 50%,
      rgba(255,255,255,0.04) 0deg,
      rgba(255,255,255,0.14) 30deg,
      rgba(255,255,255,0.04) 60deg,
      rgba(255,255,255,0.14) 90deg,
      rgba(255,255,255,0.04) 120deg,
      rgba(255,255,255,0.14) 150deg,
      rgba(255,255,255,0.04) 180deg,
      rgba(255,255,255,0.14) 210deg,
      rgba(255,255,255,0.04) 240deg,
      rgba(255,255,255,0.14) 270deg,
      rgba(255,255,255,0.04) 300deg,
      rgba(255,255,255,0.14) 330deg,
      rgba(255,255,255,0.04) 360deg);
  border-radius:50%;
  opacity:0.45;
  pointer-events:none;
}
.logo-icon::after{
  content:"";
  position:absolute;
  inset:35%;
  background:radial-gradient(circle,rgba(255,255,255,0.18) 0%,rgba(255,255,255,0) 70%);
  border-radius:50%;
  pointer-events:none;
}

/* — A discrete iris-glow ring on the patient avatar when populated — */
.banner-avatar.has-pt{
  position:relative;
}
.banner-avatar.has-pt::before{
  content:"";
  position:absolute;
  inset:-3px;
  border-radius:50%;
  background:conic-gradient(from 220deg,
    rgba(122,184,232,0.14) 0deg,
    rgba(31,122,62,0.10) 120deg,
    rgba(176,108,16,0.10) 240deg,
    rgba(122,184,232,0.14) 360deg);
  z-index:-1;
  pointer-events:none;
  filter:blur(0.5px);
}

/* — Floating-action glow ring on the encounter Save button — */
#encounter-save-btn{position:relative;overflow:visible;}
#encounter-save-btn::before{
  content:"";
  position:absolute;
  inset:-2px;
  border-radius:inherit;
  background:radial-gradient(ellipse at 50% 100%,rgba(242,184,75,0.45),rgba(242,184,75,0) 70%);
  filter:blur(4px);
  opacity:0;
  transition:opacity 0.22s var(--ease);
  pointer-events:none;
  z-index:-1;
}
#encounter-save-btn:hover::before{opacity:1;}

/* — Refined focus indicator for keyboard navigation — */
*:focus-visible{
  outline:none;
  box-shadow:var(--ring-focus);
  border-radius:6px;
}
button:focus-visible,
.tbtn:focus-visible,
.widget-add-btn:focus-visible,
.widget-download-btn:focus-visible,
.widget-na-btn:focus-visible,
.tog-val:focus-visible{
  box-shadow:0 0 0 3px rgba(36,114,184,0.30);
}

/* — Subtle "OD vs OS" jewel-pattern hint on examination card sides — */
[data-widget-card="anterior-posterior-segment"] .exam-eye-col{position:relative;}
[data-widget-card="anterior-posterior-segment"] .exam-hdr-row .exam-eye-col:first-of-type::before,
[data-widget-card="anterior-posterior-segment"] .exam-hdr-row .exam-eye-col:last-of-type::before{
  content:"";
  position:absolute;
  left:0;right:0;top:-2px;
  height:2px;
  border-radius:2px;
  opacity:0.30;
  pointer-events:none;
}
[data-widget-card="anterior-posterior-segment"] .exam-hdr-row .exam-eye-col:first-of-type::before{
  background:linear-gradient(90deg,transparent,#2472b8,transparent);
}
[data-widget-card="anterior-posterior-segment"] .exam-hdr-row .exam-eye-col:last-of-type::before{
  background:linear-gradient(90deg,transparent,#1a8c7a,transparent);
}

/* — Refined hover state on the encounter widget cards: subtle blue tint at the
 *   top edge to suggest "this card is interactive" — */
.exam-grid.general-consult-grid > .card{
  position:relative;
}
.exam-grid.general-consult-grid > .card::before{
  content:"";
  position:absolute;
  left:50%;right:50%;top:0;
  height:2px;
  background:linear-gradient(90deg,transparent,rgba(36,114,184,0.55),transparent);
  border-radius:2px;
  transition:left 0.32s var(--ease),right 0.32s var(--ease);
  pointer-events:none;
  z-index:1;
}
.exam-grid.general-consult-grid > .card:hover::before{
  left:14%;right:14%;
}

/* — Card-pip refined microinteraction: subtle pulse on hover — */
@media (prefers-reduced-motion: no-preference){
  .exam-grid.general-consult-grid > .card:hover > .card-hdr:first-child > .card-pip{
    animation:pipPulse 1.4s ease-in-out infinite;
  }
}
@keyframes pipPulse{
  0%,100%{transform:scale(1);}
  50%{transform:scale(1.18);}
}

/* — Refined Day Sheet hover: keep the row indicator but add a soft right-edge
 *   chevron glow indicating "click to enter encounter" — */
#ds-table tbody tr{position:relative;}
#ds-table tbody tr::after{
  content:"→";
  position:absolute;
  right:14px;top:50%;
  transform:translateY(-50%) translateX(-6px);
  font-size:14px;
  font-weight:700;
  color:#2472b8;
  opacity:0;
  transition:opacity 0.16s var(--ease),transform 0.16s var(--ease);
  pointer-events:none;
}
#ds-table tbody tr:hover::after{
  opacity:0.65;
  transform:translateY(-50%) translateX(0);
}

/* — Custom selection color uses the brand blue — */
::selection{background:rgba(36,114,184,0.22);color:#0f2d4a;}
.note-textarea ::selection{background:rgba(36,114,184,0.28);}

/* — Refined caret color in inputs — */
input,textarea,select{caret-color:#2472b8;}

/* — The Patient Files folder card heading with iris-themed accent — */
.files-card-hdr{position:relative;}
.files-card-hdr::before{
  content:"";
  position:absolute;
  left:0;right:0;top:0;
  height:2px;
  background:linear-gradient(90deg,
    rgba(36,114,184,0) 0%,
    rgba(36,114,184,0.30) 30%,
    rgba(31,122,62,0.30) 70%,
    rgba(36,114,184,0) 100%);
  border-radius:14px 14px 0 0;
}

/* — Empty-state widget hint cards: subtle inner glow on hover — */
.widget-tool-grid:empty,
.other-exam-addon-host:has(> #addon-detail[style*="display:none"])::before,
.assessment-plan-domain:has(> .vitals-subhdr:only-child)::after,
#inv-rows:empty::after,
#body-tests-list:empty::after,
.hpi-forms-hdr:last-child::after{
  transition:border-color 0.22s var(--ease),background-color 0.22s var(--ease);
}
.exam-grid.general-consult-grid > .card:hover .widget-tool-grid:empty,
.exam-grid.general-consult-grid > .card:hover .assessment-plan-domain:has(> .vitals-subhdr:only-child)::after,
.exam-grid.general-consult-grid > .card:hover #inv-rows:empty::after,
.exam-grid.general-consult-grid > .card:hover #body-tests-list:empty::after{
  border-color:rgba(36,114,184,0.28);
}

/* — Date display in Day Sheet header: subtle relative-date indicator — */
#ds-date:not(:empty)::before{
  content:"·";
  margin:0 6px 0 -2px;
  color:rgba(15,29,48,0.30);
}

/* — Logo wordmark micro-animation on first paint — */
@media (prefers-reduced-motion: no-preference){
  .logo-name{animation:logoFade 0.7s var(--ease) both;animation-delay:0.05s;}
}
@keyframes logoFade{
  from{opacity:0;letter-spacing:0.12em;}
  to{opacity:1;letter-spacing:0;}
}

/* — Subtle directional gradient on tab content backdrop for "depth" — */
.tab-content.active{
  background:
    linear-gradient(180deg,rgba(36,114,184,0.012) 0%,transparent 18%),
    var(--bg);
}

/* ═══════════════════════════════════════════════════════════════════════════
 *  EDITORIAL HEADERS — Fraunces display serif on h1-level titles.
 *  Restrained: only used where the page genuinely opens, never on widgets.
 * ═══════════════════════════════════════════════════════════════════════════ */

/* Day Sheet page title */
#content-day-sheet > div > div > div:first-child > span:first-child{
  font-family:var(--display)!important;
  font-weight:600!important;
  font-size:26px!important;
  letter-spacing:-0.012em!important;
  color:#0f2d4a!important;
}

/* Modal titles */
.file-modal h3,
.edit-modal h3,
.trend-modal h3,
.survey-modal h3{
  font-family:var(--display)!important;
  font-weight:600!important;
  font-size:18px!important;
  letter-spacing:-0.01em!important;
}

/* Patient banner name */
.topbar-pt .banner-name{
  font-family:var(--display)!important;
  font-weight:600!important;
  letter-spacing:0!important;
}

/* Login wordmark */
.login-logo .logo-name{
  font-family:var(--display)!important;
  font-weight:600!important;
  letter-spacing:-0.012em!important;
}

/* Tab stub titles */
.tab-stub-title{
  font-family:var(--display)!important;
  font-weight:600!important;
  letter-spacing:-0.015em!important;
}

/* Files folder card title — keep as small caps font, no serif */
/* Patient Files page heading */
.files-layout > div > div:first-child{
  font-family:var(--display);
}

/* — Card-title in widgets stays sans for clarity, never serif — */

/* — Footer Q&A: Make the Day Sheet area below the table feel intentional — */
#content-day-sheet{position:relative;}
#content-day-sheet::after{
  content:"";
  position:absolute;
  left:50%;bottom:24px;
  transform:translateX(-50%);
  width:40px;height:1px;
  background:linear-gradient(90deg,transparent,rgba(15,29,48,0.18),transparent);
  pointer-events:none;
}

/* — Subtle paper texture on bg for warmth — */
body{
  background-image:
    radial-gradient(circle at 100% 0%,rgba(122,184,232,0.025) 0%,transparent 30%),
    radial-gradient(circle at 0% 100%,rgba(31,122,62,0.020) 0%,transparent 30%);
}

/* — Refined Day Sheet "May 16, 2026" date — use mono for the date itself — */
#ds-date{
  font-family:var(--mono)!important;
  font-size:11.5px!important;
  font-weight:500!important;
}

/* ── PATIENT FILES PAGE POLISH ── */
.files-layout{
  padding:32px 24px 24px!important;
}
.files-layout > div{
  width:100%;
  max-width:720px;
}
.files-layout > div > div:first-child,
.files-layout > div > h2{
  display:flex;
  align-items:baseline;
  gap:14px;
  margin-bottom:18px;
  font-family:var(--display);
  font-weight:600;
  font-size:26px;
  letter-spacing:-0.012em;
  color:#0f2d4a;
}
.files-layout > div > div:first-child > span:not(:first-child){
  font-family:var(--font);
  font-size:12px;
  font-weight:500;
  color:#7a8290;
  letter-spacing:0.02em;
}
.files-card-hdr{padding:13px 18px!important;}
.files-card-body{padding:18px!important;}
.files-card-body > div:first-child:only-child,
.files-card-body p{
  text-align:center;
  padding:18px 16px;
  background:repeating-linear-gradient(135deg,rgba(15,29,48,0.018) 0 6px,transparent 6px 12px);
  border:1px dashed rgba(15,29,48,0.13);
  border-radius:10px;
  color:#8a929c!important;
  font-style:italic;
  font-size:11.5px!important;
  letter-spacing:0.01em;
}

/* "+ Outside Note" pill */
button[onclick*="OutsideNote"],
.files-card-hdr button{
  font-family:var(--font)!important;
  font-size:11px!important;
  font-weight:700!important;
  padding:6px 13px!important;
  border-radius:999px!important;
  background:linear-gradient(180deg,rgba(36,114,184,0.10),rgba(36,114,184,0.06))!important;
  border:1px solid rgba(36,114,184,0.32)!important;
  color:#1f5b9a!important;
  letter-spacing:0.02em;
  box-shadow:0 1px 0 rgba(255,255,255,0.6) inset,0 1px 2px rgba(15,29,48,0.06);
  transition:transform 0.13s var(--ease),box-shadow 0.13s var(--ease)!important;
}
button[onclick*="OutsideNote"]:hover,
.files-card-hdr button:hover{
  transform:translateY(-1px);
  box-shadow:0 1px 0 rgba(255,255,255,0.6) inset,0 3px 8px rgba(15,29,48,0.10)!important;
}

/* — Encounter Save (#encounter-save-btn) and Exit refined backdrop — */
#encounter-save-btn::before{
  z-index:-1;
}

/* — Encounter banner sub-line refined — */
.topbar-pt .banner-sub{
  font-size:11.5px!important;
  letter-spacing:0.04em!important;
  font-variant-numeric:tabular-nums;
}

/* ── SUB-TAB STUB CARDS — "coming soon" refinement ── */
.tab-stub-body{
  font-size:12.5px!important;
  line-height:1.6!important;
  color:#5e6770!important;
}
.tab-stub::before{
  content:"·  ·  ·";
  display:block;
  margin-bottom:10px;
  letter-spacing:0.3em;
  color:rgba(15,29,48,0.20);
  font-family:var(--font);
  font-size:11px;
  text-align:left;
}

/* ── Better disabled state across the app ── */
button:disabled,input:disabled,select:disabled,textarea:disabled{
  opacity:0.45;
  cursor:not-allowed;
  filter:saturate(0.6);
}

/* ── Subtle iris-monogram in the empty Day Sheet corner ── */
#content-day-sheet > div::before{
  content:"";
  position:fixed;
  right:18px;bottom:14px;
  width:48px;height:48px;
  border-radius:50%;
  border:1px solid rgba(15,29,48,0.06);
  background:var(--iris-glow);
  pointer-events:none;
  opacity:0.55;
  z-index:0;
}
#ds-add-pt-appt{position:relative;z-index:2;}

/* — Stored amber values: refined letter-spacing — */
.stored-note,.ow-stored{letter-spacing:0.01em;}

/* ═══════════════════════════════════════════════════════════════════════════
 *  ACCESSIBILITY EXTENSIONS — high-contrast, extended print, performance
 * ═══════════════════════════════════════════════════════════════════════════ */

/* — Windows high-contrast / forced-colors mode — */
@media (forced-colors: active){
  /* Let the OS render its high-contrast palette; preserve outlines */
  .exam-grid.general-consult-grid > .card,
  .widget-tool-card,
  .files-card,
  .file-modal,.edit-modal,.trend-modal,.survey-modal,
  .login-card,
  #ds-table tbody tr:hover{
    border:1px solid CanvasText;
  }
  .widget-add-btn,.widget-download-btn,.widget-na-btn,
  .tbtn,
  .tab-stub-action,
  #ds-add-pt-appt{
    forced-color-adjust:none;
    border:1px solid ButtonText;
    background:ButtonFace;
    color:ButtonText;
  }
  .tog-val.abnormal,.bchip-appt{
    forced-color-adjust:none;
    outline:2px solid Highlight;
    outline-offset:1px;
  }
  *:focus-visible{
    outline:2px solid Highlight;
    outline-offset:2px;
    box-shadow:none!important;
  }
}

/* — Extended print stylesheet — clean clinical printouts — */
@media print{
  /* Already covered: topbar/col-left/col-mid hidden, note-panel printable.
   * Add: encounter widget grid prints cleanly when explicitly invoked via
   * print() with .col-mid visible (override). */
  body.print-encounter .topbar,
  body.print-encounter .col-left{display:none!important;}
  body.print-encounter .col-mid{display:block!important;overflow:visible!important;}
  body.print-encounter .exam-grid.general-consult-grid{
    display:grid!important;
    grid-template-columns:1fr 1fr!important;
    page-break-inside:auto!important;
    gap:8px!important;
  }
  body.print-encounter .exam-grid.general-consult-grid > .card{
    page-break-inside:avoid!important;
    box-shadow:none!important;
    border:1px solid #000!important;
  }
  body.print-encounter .card-footer,
  body.print-encounter .widget-directory,
  body.print-encounter .widget-add-btn,
  body.print-encounter .widget-download-btn,
  body.print-encounter .widget-na-btn{display:none!important;}

  /* Hide all the pseudo-decoration in print */
  .topbar::after,
  .card-hdr:first-child::after,
  .card-footer::before,
  .files-card-hdr::before,
  #ds-table tbody tr::after,
  #ds-table tbody tr::before,
  .exam-grid.general-consult-grid > .card::before,
  .logo-icon::before,
  .logo-icon::after,
  .banner-avatar::before,
  #encounter-save-btn::before{display:none!important;}

  /* Black text everywhere for ink-saving */
  body{background:#fff!important;}
  *{
    text-shadow:none!important;
    box-shadow:none!important;
    filter:none!important;
  }
}

/* — Performance: CSS containment on isolated sub-cards reduces relayout.
 *   Note: contain:layout creates a containing block for position:fixed in
 *   Chromium, which breaks the Ocular Vitals popover anchoring — so we
 *   apply containment only to the inner sub-cards, never to .general-consult
 *   cards themselves. — */
.widget-tool-card{
  contain:layout style;
}

/* — Refined caret behavior in stored-input fields — */
input.stored-input{caret-color:transparent;}
input.stored-input:focus{caret-color:#2472b8;}

/* — Refined "selection" inside note textarea — */
.note-textarea::selection{
  background:rgba(36,114,184,0.28);
  color:#0f2d4a;
}

/* — Subtle inertia on Day Sheet "Add patient" pill — */
button[onclick*="openAddPatientAndAppointment"]{
  cursor:pointer;
}

/* — Refined cursor: explicit text-cursor on textareas — */
textarea{cursor:text;}

/* — Refined visibility for required-field hint (if any inputs use aria-required) — */
input[aria-required="true"]:invalid,
select[aria-required="true"]:invalid,
.ocular-condition-temporal-value input[data-temporal-part="dateTime"]:invalid{
  border-color:rgba(192,48,48,0.45)!important;
}
input[aria-required="true"]:invalid:focus,
select[aria-required="true"]:invalid:focus,
.ocular-condition-temporal-value input[data-temporal-part="dateTime"]:invalid:focus{
  box-shadow:0 0 0 3px rgba(192,48,48,0.16)!important;
}

/* ── "Open trend" button refinement — clearer "click for more" affordance ── */
.widget-tool-card button{
  position:relative;
  padding-right:24px!important;
}
.widget-tool-card button::after{
  content:"→";
  position:absolute;
  right:9px;top:50%;
  transform:translateY(-50%) translateX(-2px);
  font-size:12px;
  font-weight:700;
  opacity:0.6;
  transition:opacity 0.16s var(--ease),transform 0.16s var(--ease);
}
.widget-tool-card button:hover::after{
  opacity:1;
  transform:translateY(-50%) translateX(0);
}

/* ── Refined card-pip glow picks up actual pip color via currentColor. ── */
.exam-grid.general-consult-grid > .card > .card-hdr:first-child > .card-pip{
  filter:drop-shadow(0 0 2px currentColor);
}

/* ── Refined "+ Add patient to day sheet" hover state ── */
button[onclick*="openAddPatientAndAppointment"]:not(#ds-add-pt-appt):hover{
  background:linear-gradient(180deg,rgba(36,114,184,0.18),rgba(36,114,184,0.10))!important;
  border-color:rgba(36,114,184,0.55)!important;
}

/* ── Subtle dotted-underline on stored amber values for "edit me" hint ──
 *  Dotted is less noisy than solid; appears only on hover. ── */
.stored-note{text-underline-offset:3px;}
.stored-note:hover{
  text-decoration:underline dotted rgba(176,108,16,0.55);
}

/* ── Refined inline-edit cursor on stored fields ── */
.stored-note,.inv-interp-stored,.ow-stored{cursor:text;}

/* ── Refined :focus ring on the trends "Open trend" button when keyboard-focused ── */
.widget-tool-card button:focus-visible{
  box-shadow:0 0 0 3px rgba(36,114,184,0.25);
  outline:none;
}

/* ── Subtle "click anywhere on the row" affordance — Day Sheet row's
 *   patient name column gets a soft underline on hover. ── */
#ds-table tbody tr:hover td:nth-child(2) > div:first-child{
  text-decoration:underline rgba(15,29,48,0.18);
  text-underline-offset:3px;
}

/* ── Refined banner-appt-chip hover ── */
.bchip-appt{transition:background 0.16s var(--ease),color 0.16s var(--ease);}
.banner-profile-card:hover .bchip-appt,
.topbar-pt:hover .bchip-appt{
  background:linear-gradient(180deg,rgba(36,114,184,0.50),rgba(36,114,184,0.38))!important;
}

/* ── Comprehensive reduced-motion coverage — disable any remaining transforms ── */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:0.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:0.01ms!important;
    scroll-behavior:auto!important;
  }
  .widget-add-btn:hover,
  .widget-download-btn:hover,
  .widget-na-btn:hover,
  .tbtn:hover,
  .logo:hover,
  #ds-calendar-btn:hover,
  #ds-add-pt-appt:hover,
  .file-browse-btn:hover,
  .drop-zone:hover,
  #encounter-save-btn:hover,
  .edit-modal-save:hover,
  .login-btn:hover,
  .tab-stub-action:hover,
  .ds-icon-btn:hover{transform:none!important;}
}

/* ── Refined : hover state on the encounter "Exit" pill ── */
.tbtn[onclick*="exit"]:hover,
.tbtn[id="logout-btn"]:hover{
  background:rgba(232,90,90,0.28)!important;
}

/* ── Refined "Being Seen" patient row gets a subtle pulsing left-edge tint
 *   to draw the doctor's attention. Disabled in reduced-motion.
 *   Note: nested :has() is invalid CSS — use single-level descendant. ── */
@media (prefers-reduced-motion: no-preference){
  #ds-body tr.dashboard-row-status-being-seen{
    box-shadow:inset 3px 0 0 rgba(36,114,184,0.30);
    animation:inRoomPulse 3s ease-in-out infinite;
  }
}
#ds-body tr.dashboard-row-status-being-seen{
  box-shadow:inset 3px 0 0 rgba(36,114,184,0.30);
}
@keyframes inRoomPulse{
  0%,100%{box-shadow:inset 3px 0 0 rgba(36,114,184,0.30);}
  50%{box-shadow:inset 3px 0 0 rgba(36,114,184,0.55);}
}

/* ── Refined placeholder text across all inputs ── */
input::placeholder,
textarea::placeholder,
input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder{
  color:rgba(15,29,48,0.32);
  font-style:italic;
  opacity:1;
}
input:focus::placeholder,
textarea:focus::placeholder{
  color:rgba(15,29,48,0.20);
}

/* ── Autofill detection: when browser autofills (yellow bg), keep our chrome ── */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active{
  -webkit-text-fill-color:#1a1a18;
  -webkit-box-shadow:0 0 0 30px #fbfbfa inset;
  caret-color:#2472b8;
  transition:background-color 5000s ease-in-out 0s;
}

/* ── Refined :read-only state styling ── */
input:read-only:not([type="checkbox"]):not([type="radio"]),
textarea:read-only{
  background:rgba(15,29,48,0.03);
  cursor:default;
}

/* ── Refined :not(:placeholder-shown) state — when an input has a value,
 *   give a subtle indicator that it's been filled in. ── */
input[type="text"]:not(:placeholder-shown):not(:focus){
  border-color:rgba(15,29,48,0.18);
}

/* ── Refined empty-input outline so empty + required fields are gently
 *   hinted ── */
input[required]:placeholder-shown,
select[required]:has(option[value=""]:checked){
  border-style:dashed;
}
input[required]:placeholder-shown:focus,
select[required]:has(option[value=""]:checked):focus{
  border-style:solid;
}

/* ── Refined label affordance: when a parent label is hovered, the
 *   associated control's border subtly highlights. ── */
label:hover input,
label:hover select,
label:hover textarea{
  border-color:rgba(36,114,184,0.35);
}

/* ── Case-sensitive font features for uppercase punctuation (so all-caps
 *   labels like "ANTERIOR SEGMENT" get appropriately-positioned dashes,
 *   colons, and quote marks). ── */
.card-title,
.field-label,
.sec-hd-title,
.sec-badge,
.eye-tag,
.vitals-subhdr span:first-child,
.div-label,
.widget-tool-card-title,
.tab-stub-action,
#ds-table thead th{
  font-feature-settings:"case" 1, "kern" 1;
}

/* ── Refined ::backdrop for native <dialog> elements (forward-compat) ── */
dialog::backdrop{
  background:rgba(15,29,48,0.42);
  backdrop-filter:blur(2px);
}

/* ── Refined image rendering for any avatars/images that might appear ── */
img{
  image-rendering:auto;
  aspect-ratio:attr(width) / attr(height);
}
.banner-avatar img,
.files-card img{
  aspect-ratio:1/1;
  object-fit:cover;
}

/* ── Refined details/summary cursor and chevron consistency ── */
details > summary > span{
  font-variant-numeric:tabular-nums;
}

/* ── Refined font-feature on mono numerics for tabular alignment ── */
.mono,#ds-date,
#ds-table tbody td:first-child,
#iop-time,
.ds-icon-btn,
.bmi-result,
input[type="number"]{
  font-variant-numeric:tabular-nums slashed-zero;
}

/* ── PREVENT FAUX TYPOGRAPHY — don't let the browser synthesize bold/italic
 *   from regular weight; if the variant isn't installed, fall through the
 *   font-stack to the next family. Crisper typography overall. ── */
:root{
  font-synthesis:none;
}

/* ── TEXT SPACING TRIM — modern CSS for better CJK / mixed punctuation. ── */
.note-textarea,
.tab-stub-body,
#ds-body td[colspan],
.banner-name{
  text-spacing-trim:normal;
}

/* ── CONTENT VISIBILITY — performance hint for off-screen elements.
 *   Browsers without support ignore. Saves paint cycles for never-visible
 *   sub-tab content. ── */
.tab-pane:not(.active),
.tab-content:not(.active){
  content-visibility:auto;
  contain-intrinsic-size:auto 500px;
}

/* ── REFINED FONT KERNING DEFAULT — better letter pair spacing throughout ── */
html{
  font-kerning:normal;
  -webkit-font-feature-settings:"kern" 1;
  -moz-font-feature-settings:"kern" 1;
  font-feature-settings:"kern" 1;
}

/* ── REFINED color-scheme on body matches root ── */
body{
  color-scheme:light;
}

/* ── ENHANCED CARET color in note textarea — subtle navy instead of blue ── */
.note-textarea{caret-color:#0f2d4a;}

/* ── REFINED viewport scrollbar to match the app palette ── */
html{
  scrollbar-color:rgba(15,29,48,0.25) transparent;
}

/* ── REFINED selection color for serif body (note panel) — */
.note-textarea ::selection,
.tab-stub-body ::selection{
  background:rgba(36,114,184,0.20);
  color:#0f2d4a;
}

/* ── REFINED scrollbar across modal scroll areas ── */
.file-modal::-webkit-scrollbar,
.edit-modal::-webkit-scrollbar,
.trend-modal::-webkit-scrollbar,
.survey-modal::-webkit-scrollbar,
.note-textarea::-webkit-scrollbar{width:8px;}

/* ── REFINED keyboard navigation visible: tabbing through buttons should
 *   produce a visible halo even when hover would have hidden a control. ── */
.widget-add-btn:focus-visible,
.widget-download-btn:focus-visible,
.widget-na-btn:focus-visible{
  outline:none;
  box-shadow:0 0 0 3px rgba(36,114,184,0.30),
             0 1px 2px rgba(15,29,48,0.06);
  border-color:#2472b8;
}

/* ── REFINED skip-link safety: if app adds a "skip to main" link later, it
 *   gets brand styling automatically. ── */
.skip-link{
  position:absolute;
  top:-200px;
  left:8px;
  padding:8px 14px;
  background:#0f2d4a;
  color:#fff;
  font-weight:700;
  font-size:11px;
  border-radius:6px;
  text-decoration:none;
  z-index:9999;
  transition:top 0.16s var(--ease);
}
.skip-link:focus{
  top:8px;
  outline:2px solid #7ab8e8;
  outline-offset:2px;
}

/* ── REFINED min-tap-target for icon-only buttons in dense rows ── */
@media (pointer: coarse){
  .ds-icon-btn,
  .widget-add-btn,
  .widget-download-btn,
  .widget-na-btn{
    min-width:36px;
    min-height:36px;
  }
}

/* ── REFINED interactive hint on hover for click-able items that look like text ── */
.eye-tag.clickable:hover,
.exam-hdr:hover{
  text-shadow:0 1px 0 rgba(255,255,255,0.4);
}

/* ── Tighter line-height on truncated names — */
.banner-name{line-height:1.1!important;}

/* ── Refined "no patient" placeholder copy ── */
.banner-name.empty{
  font-family:var(--font)!important;
  font-style:italic;
}

/* ── Refined textarea resize handle position and cursor ── */
textarea{
  resize:vertical;
  min-height:60px;
}
textarea::-webkit-resizer{
  background:
    linear-gradient(135deg,transparent 50%,rgba(15,29,48,0.18) 50%) bottom right/8px 8px no-repeat;
  background-color:transparent;
}

/* ── Refined inline search input: when input gains focus, the surrounding
 *   directory popover gets a slightly elevated shadow ── */
.widget-directory:has(.widget-directory-input:focus){
  position:relative;
}
.widget-directory:has(.widget-directory-input:focus)::before{
  content:"";
  position:absolute;
  inset:-2px;
  background:radial-gradient(ellipse at 50% 50%,rgba(36,114,184,0.04),transparent 70%);
  pointer-events:none;
  z-index:-1;
  border-radius:8px;
}

/* ── Refined "search domain" select inside the directory footer ── */
.widget-directory-domain-select{
  transition:border-color 0.13s var(--ease),background 0.13s var(--ease)!important;
}
.widget-directory-domain-select:hover{
  border-color:#2472b8!important;
  background:#fff!important;
}

/* ── Refined drag-over highlight on drop zone ── */
.drop-zone.drag-over{
  background:linear-gradient(180deg,rgba(36,114,184,0.10) 0%,rgba(36,114,184,0.06) 100%)!important;
  border-color:#2472b8!important;
  box-shadow:0 0 0 3px rgba(36,114,184,0.12);
}

/* ── Refined transition timing for the addon-bar appearance ── */
.addon-bar{
  transition:background 0.16s var(--ease);
}

/* ── Refined typography for the "PIN" / "VISIT #" labels in patient cells ── */
#ds-table tbody td:nth-child(2) > div + div span:first-child,
#ds-table tbody td:nth-child(2) > div + div + div span:first-child{
  font-family:var(--font);
  font-weight:800;
}

/* ── REGISTERED CUSTOM PROPERTIES — enables CSS-only animation of token values.
 *   Browsers without @property support ignore (degrades to static custom prop). ── */
@property --ring-intensity{
  syntax:"<number>";
  inherits:true;
  initial-value:0.18;
}
@property --pip-glow{
  syntax:"<color>";
  inherits:true;
  initial-value:rgba(36,114,184,0);
}

/* ── Forward-compat save-success animation: any element with class
 *   "save-success" gets a brief green-tinted halo. Useful for future JS to
 *   indicate save completion. ── */
.save-success{
  animation:saveFlash 1.4s var(--ease) 1;
}
@keyframes saveFlash{
  0%{box-shadow:0 0 0 0 rgba(31,122,62,0.36);}
  40%{box-shadow:0 0 0 6px rgba(31,122,62,0.18);}
  100%{box-shadow:0 0 0 0 rgba(31,122,62,0);}
}
@media (prefers-reduced-motion: reduce){
  .save-success{animation:none;background:rgba(31,122,62,0.10)!important;}
}

/* ── PRINT HEADER ── clinical letterhead for printed encounters ── */
@media print{
  body.print-encounter::before{
    content:"OphthoScribe · Clinical Encounter";
    display:block;
    font-family:ui-serif,'New York',Georgia,serif;
    font-size:11pt;
    font-style:italic;
    color:#0f2d4a;
    padding:0 0 8pt 0;
    margin-bottom:12pt;
    border-bottom:0.5pt solid #1a1a18;
    text-align:left;
  }
  body.print-encounter::after{
    content:"Generated by OphthoScribe · " attr(data-print-date);
    display:block;
    font-family:ui-serif,'New York',Georgia,serif;
    font-size:8pt;
    font-style:italic;
    color:#5e6770;
    padding-top:8pt;
    margin-top:12pt;
    border-top:0.5pt solid rgba(0,0,0,0.18);
    text-align:right;
  }
  /* Avoid breaking inside critical clinical content */
  .note-textarea > p,
  .exam-row,
  .inv-row,
  .assessment-plan-domain{
    break-inside:avoid;
  }
}

/* ── Refined "loading" state for any element with aria-busy="true" ── */
[aria-busy="true"]{
  cursor:progress;
  opacity:0.7;
  pointer-events:none;
}
[aria-busy="true"]::after{
  content:"";
  position:absolute;
  inset:0;
  background:repeating-linear-gradient(135deg,
    rgba(36,114,184,0.04) 0 8px,
    transparent 8px 16px);
  pointer-events:none;
}

/* ── REFINED ARIA STATE STYLING ── */
/* Active page / current tab — semantic backup for .active class */
[aria-current="page"],
[aria-current="step"],
[aria-current="true"]{
  font-weight:700;
}

/* Expandable buttons (e.g., addon menus, calendar dropdowns) */
[aria-expanded="true"]{
  background:rgba(36,114,184,0.08);
}
[aria-expanded="true"]:hover{
  background:rgba(36,114,184,0.14);
}

/* Pressed toggle buttons (e.g., the N/A toggle has aria-pressed) */
.widget-na-btn[aria-pressed="true"]{
  background:#3e4651;
  border-color:#3e4651;
  color:#fff;
}

/* Selected items (e.g., directory search results when arrow-navigated) */
[aria-selected="true"]{
  background:rgba(36,114,184,0.10);
  color:#0f2d4a;
}

/* Disabled state via aria-disabled (visual; pointer-events still active so
 * screen readers can navigate) */
[aria-disabled="true"]{
  opacity:0.45;
  cursor:not-allowed;
  filter:saturate(0.6);
}

/* Hidden via aria-hidden but visually present (rare; usually just display:none) */
[aria-hidden="true"]:not([class*="logo-icon"]):not(svg){
  /* let JS or class control display; CSS does nothing here by default */
}

/* Refined invalid state via aria-invalid */
[aria-invalid="true"]{
  border-color:rgba(192,48,48,0.45)!important;
}
[aria-invalid="true"]:focus{
  box-shadow:0 0 0 3px rgba(192,48,48,0.16)!important;
}

/* Refined live region styling (toasts, alerts) */
[role="status"],
[role="alert"],
[aria-live]{
  font-family:var(--font);
}
[role="alert"]{
  font-weight:600;
}

/* Refined dialog (native <dialog> element) — forward-compat */
dialog{
  border:1px solid rgba(20,40,72,0.10);
  border-radius:14px;
  box-shadow:0 1px 0 rgba(255,255,255,0.6) inset,
             0 24px 60px -12px rgba(15,29,48,0.40),
             0 4px 12px rgba(15,29,48,0.10);
  padding:24px 26px;
  max-width:90vw;
  max-height:85vh;
}

/* Refined visible-focus inside lists with role="listbox" */
[role="listbox"] [role="option"]:focus-visible,
[role="menu"] [role="menuitem"]:focus-visible{
  outline:none;
  background:rgba(36,114,184,0.10);
  color:#0f2d4a;
}

/* ── USER-INTERACTION VALIDATION ── Only show validation state after user
 *   has actually interacted with the field (much friendlier than :valid). ── */
@supports selector(:user-valid){
  input:user-valid,
  select:user-valid,
  textarea:user-valid{
    border-color:rgba(31,122,62,0.32);
  }
  input:user-invalid,
  select:user-invalid,
  textarea:user-invalid{
    border-color:rgba(192,48,48,0.45);
  }
  input:user-invalid:focus,
  select:user-invalid:focus,
  textarea:user-invalid:focus{
    box-shadow:0 0 0 3px rgba(192,48,48,0.16);
  }
}

/* ── HTML POPOVER API support — when an element has the popover attribute,
 *   it gets brand modal-like chrome automatically. ── */
[popover]{
  border:1px solid rgba(20,40,72,0.10);
  border-radius:12px;
  background:#fff;
  padding:16px 20px;
  box-shadow:0 1px 0 rgba(255,255,255,0.6) inset,
             0 16px 40px -10px rgba(15,29,48,0.30),
             0 2px 6px rgba(15,29,48,0.08);
  max-width:90vw;
  max-height:80vh;
  overflow:auto;
}
[popover]::backdrop{
  background:rgba(15,29,48,0.20);
  backdrop-filter:blur(1px);
}

/* ── REFINED text-decoration-thickness across underlines for crisper rendering ── */
:where(.stored-note,.inv-interp-stored,.ow-stored){
  text-decoration-thickness:from-font;
}

/* ── REFINED CSS Anchor Positioning forward-compat — when browsers support it,
 *   the Ocular Vitals popup could anchor without JS. Currently still uses JS
 *   position:fixed but the anchor name is set as a forward-compat hint. ── */
@supports (anchor-name: --x){
  [data-widget-card="ocular-vitals"] .widget-add-btn{
    anchor-name:--vitals-add-anchor;
  }
}

/* ── Refined CSS subgrid for the encounter grid if supported ── */
@supports (grid-template-rows: subgrid){
  .ocular-vitals-row{
    display:grid;
  }
}

/* ── Refined :focus-visible with offset that doesn't clip on border-radius ── */
*:focus-visible{
  outline-offset:2px;
}

/* ── Refined "no-result" styling for empty directory popovers ── */
.widget-directory-empty{
  padding:14px 12px!important;
  text-align:center;
  font-style:italic;
  color:#7a8290!important;
  background:repeating-linear-gradient(135deg,rgba(15,29,48,0.018) 0 6px,transparent 6px 12px);
  border-radius:8px;
  margin:2px;
}

/* ── text-box-trim — modern CSS for tight cap-height alignment on
 *   editorial display headings. Removes ascender/descender whitespace so
 *   headings sit visually flush. Browsers without support ignore. ── */
@supports (text-box-trim: trim-both){
  .topbar-pt .banner-name,
  .tab-stub-title,
  .file-modal h3,
  .edit-modal h3,
  .trend-modal h3,
  .survey-modal h3,
  #content-day-sheet > div > div > div:first-child > span:first-child{
    text-box-trim:trim-both;
    text-box-edge:cap alphabetic;
  }
}

/* ── min() / max() / clamp() responsive sizing for the encounter cards on
 *   variable viewport widths. ── */
@supports (font-size: clamp(11px, 1vw, 14px)){
  .card-title{
    font-size:clamp(10.5px, 0.85vw, 12px);
  }
  .topbar-pt .banner-name{
    font-size:clamp(15px, 1.4vw, 20px);
  }
}

/* ── Refined CSS Grid auto-fit on the directory result columns. ── */
.widget-directory-result-main{
  min-width:0;
}

/* ── Refined CSS logical properties for future RTL safety ── */
.div-label{
  margin-block:14px 7px;
}
.exam-row{padding-block:5px;}
.card-body{padding-block:11px;padding-inline:13px;}

/* ── Refined font-feature: stylistic-set 02 if available (alt glyph forms) ── */
.note-textarea,
.banner-name{
  font-feature-settings:"liga" 1, "kern" 1, "onum" 1, "ss02" 1;
}

/* ── Final detail: refined CSS transitions discrete to motion-preference ── */
@media (prefers-reduced-motion: no-preference){
  .tog-val,
  .cd-val,
  .inv-val,
  .eye-tag{
    transition:background 0.13s var(--ease), color 0.13s var(--ease), border-color 0.13s var(--ease);
  }
}

/* ── Native date input chrome refinement ── */
input[type="date"],
input[type="time"],
input[type="datetime-local"]{
  font-family:var(--mono);
  color-scheme:light;
}
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator,
input[type="datetime-local"]::-webkit-calendar-picker-indicator{
  cursor:pointer;
  opacity:0.55;
  filter:invert(0%);
  transition:opacity 0.13s var(--ease);
}
input[type="date"]:hover::-webkit-calendar-picker-indicator,
input[type="time"]:hover::-webkit-calendar-picker-indicator,
input[type="datetime-local"]:hover::-webkit-calendar-picker-indicator{
  opacity:1;
}

/* ── Native search input chrome refinement (search inside modals) ── */
input[type="search"]::-webkit-search-cancel-button{
  appearance:none;
  width:14px;height:14px;
  background:
    linear-gradient(45deg,transparent 47%,#7a8290 47% 53%,transparent 53%),
    linear-gradient(-45deg,transparent 47%,#7a8290 47% 53%,transparent 53%);
  cursor:pointer;
  opacity:0.55;
  transition:opacity 0.13s var(--ease);
}
input[type="search"]:hover::-webkit-search-cancel-button,
input[type="search"]:focus::-webkit-search-cancel-button{
  opacity:1;
}

/* ── Native file input button refinement ── */
input[type="file"]::file-selector-button{
  font-family:var(--font);
  font-size:11px;
  font-weight:700;
  letter-spacing:0.02em;
  padding:6px 14px;
  margin-right:10px;
  border-radius:999px;
  border:1px solid rgba(36,114,184,0.32);
  background:linear-gradient(180deg,rgba(36,114,184,0.10),rgba(36,114,184,0.06));
  color:#1f5b9a;
  cursor:pointer;
  transition:background 0.13s var(--ease), transform 0.13s var(--ease);
}
input[type="file"]::file-selector-button:hover{
  background:rgba(36,114,184,0.16);
  transform:translateY(-1px);
}

/* ── Native color input refinement ── */
input[type="color"]{
  border-radius:6px;
  border:1px solid rgba(15,29,48,0.14);
  padding:2px;
  cursor:pointer;
  width:36px;
  height:28px;
}
input[type="color"]::-webkit-color-swatch{border-radius:4px;border:none;}
input[type="color"]::-moz-color-swatch{border-radius:4px;border:none;}

/* ── Native range slider refinement (if any in trend modals etc.) ── */
input[type="range"]{
  -webkit-appearance:none;
  appearance:none;
  height:6px;
  background:rgba(15,29,48,0.08);
  border-radius:999px;
  outline:none;
  cursor:pointer;
}
input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance:none;
  appearance:none;
  width:14px;height:14px;
  border-radius:50%;
  background:#2472b8;
  cursor:grab;
  box-shadow:0 1px 0 rgba(255,255,255,0.32) inset, 0 2px 4px rgba(15,29,48,0.20);
}
input[type="range"]::-webkit-slider-thumb:active{cursor:grabbing;}
input[type="range"]::-moz-range-thumb{
  width:14px;height:14px;
  border-radius:50%;
  background:#2472b8;
  border:none;
  cursor:grab;
  box-shadow:0 1px 0 rgba(255,255,255,0.32) inset, 0 2px 4px rgba(15,29,48,0.20);
}

/* ── Refined directory result row hover and selected state ── */
.widget-directory-result{
  transition:background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.widget-directory-result:active{
  background:rgba(36,114,184,0.16);
}
.widget-directory-result[aria-selected="true"]{
  background:linear-gradient(180deg,color-mix(in srgb,var(--ink-link,#d97757) 16%,transparent),color-mix(in srgb,var(--ink-link,#d97757) 8%,transparent));
}

/* ── Refined directory popover with subtle entrance animation ── */
@media (prefers-reduced-motion: no-preference){
  .widget-directory-results.open{
    animation:dirOpen 0.18s var(--ease) both;
  }
}
@keyframes dirOpen{
  from{opacity:0;transform:translateY(-2px);}
  to{opacity:1;transform:translateY(0);}
}

/* ── Refined keyboard arrow-key navigation in directory result list ──
 *   When a result is selected via arrow keys (aria-selected set by JS), it
 *   shows a left-edge accent bar. ── */
.widget-directory-result[aria-selected="true"]{
  position:relative;
}
.widget-directory-result[aria-selected="true"]::before{
  content:"";
  position:absolute;
  left:0;top:6px;bottom:6px;
  width:2px;
  background:var(--ink-link,#d97757);
  border-radius:0 2px 2px 0;
}

/* ── Refined result source badge spacing ── */
.widget-directory-source{margin-left:auto;}

/* ── Refined directory-results scrollbar (inside the popover) ── */
.widget-directory-results::-webkit-scrollbar{width:6px;}
.widget-directory-results::-webkit-scrollbar-thumb{
  background:rgba(15,29,48,0.20);
  border-radius:999px;
}

/* ── Refined "domain" select inside directory footer: subtle disclosure caret. ── */
.widget-directory-domain-select{
  background-position:right 6px center!important;
}

/* ── Refined "wait list" / "billing" / "notes" stub tab visual identity ── */
#tab-content-waitlists::before,
#tab-content-billing::before,
#tab-content-notes::before,
#tab-content-letters::before,
#tab-content-referrals::before{
  content:"·  ·  ·";
  display:block;
  margin-bottom:10px;
  letter-spacing:0.3em;
  color:rgba(15,29,48,0.20);
  font-family:var(--font);
  font-size:11px;
  font-style:normal;
  text-align:center;
}

/* ── Refined ::marker for ordered / unordered lists if any appear ── */
ul, ol{margin-left:1.2em;}
li::marker{
  color:rgba(15,29,48,0.40);
  font-family:var(--mono);
  font-size:0.85em;
}

/* ── Refined font-fallback chain safety for sans-serif system fonts ── */
:root{
  font-family:var(--font,'Geist'),
    -apple-system,
    BlinkMacSystemFont,
    'Segoe UI',
    Roboto,
    'Helvetica Neue',
    Helvetica,
    Arial,
    sans-serif;
}

/* ── Refined fieldset/legend if any wraps controls ── */
fieldset{
  border:1px solid rgba(15,29,48,0.10);
  border-radius:8px;
  padding:10px 12px;
}
legend{
  padding:0 6px;
  font-size:10px;
  font-weight:800;
  letter-spacing:0.12em;
  color:#5e6770;
  text-transform:uppercase;
}

/* ── Refined hr separator across the app ── */
hr{
  border:none;
  height:1px;
  background:linear-gradient(90deg,
    rgba(15,29,48,0) 0%,
    rgba(15,29,48,0.10) 30%,
    rgba(15,29,48,0.10) 70%,
    rgba(15,29,48,0) 100%);
  margin:14px 0;
}

/* ── Refined <kbd> styling for any keyboard shortcut documentation ── */
kbd{
  font-family:var(--mono);
  font-size:0.85em;
  padding:1px 6px;
  border-radius:5px;
  border:1px solid rgba(15,29,48,0.18);
  background:linear-gradient(180deg,#fff,#f4f6f9);
  color:#1a1a18;
  box-shadow:0 1px 0 rgba(15,29,48,0.08), 0 1px 2px rgba(15,29,48,0.04);
}

/* ── Refined <code> styling for any inline code if used ── */
code{
  font-family:var(--mono);
  font-size:0.92em;
  padding:1px 6px;
  border-radius:4px;
  background:rgba(15,29,48,0.05);
  color:#1f5b9a;
}

/* ── Refined <mark> highlight (e.g., search match within results) ── */
mark{
  background:linear-gradient(180deg,rgba(245,201,122,0.55),rgba(245,201,122,0.35));
  color:#5a3204;
  border-radius:3px;
  padding:0 3px;
  font-weight:600;
}

/* ── Browser-native view-transition (CSS-only opt-in).
 *   When the app navigates between tabs (Day Sheet → Encounter → Patient
 *   Files), supporting browsers will cross-fade the page if the navigation
 *   uses document.startViewTransition. Browsers without support ignore. ── */
@view-transition{
  navigation:auto;
}

::view-transition-old(root),
::view-transition-new(root){
  animation-duration:0.22s;
  animation-timing-function:cubic-bezier(.22,.61,.36,1);
}

@media (prefers-reduced-motion: reduce){
  ::view-transition-old(root),
  ::view-transition-new(root){
    animation:none!important;
  }
}

/* ── A subtle radial vignette behind the encounter content for warmth ── */
.appt-layout{
  position:relative;
  isolation:isolate;
}
.appt-layout::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(ellipse at 50% 0%,rgba(36,114,184,0.012),transparent 40%),
    radial-gradient(ellipse at 50% 100%,rgba(31,122,62,0.010),transparent 40%);
  pointer-events:none;
  z-index:-1;
}

/* ── Final detail: a barely-perceptible "iris-ring" decoration anchored to
 *   the bottom-left of empty card-scroll areas. Real iris musculature has
 *   radial striations — this is a quiet brand thread. ── */
.exam-grid.general-consult-grid > .card.widget-na-active::after{
  content:"";
  position:absolute;
  right:14px;bottom:14px;
  width:28px;height:28px;
  border-radius:50%;
  border:1px solid rgba(15,29,48,0.08);
  background:var(--iris-glow);
  pointer-events:none;
  opacity:0.6;
}

/* ── Final type details ── */

/* Skip-ink for underlines so descenders interrupt the line. */
html{
  text-decoration-skip-ink:auto;
}

/* Explicit caret shape (modern browsers only) */
@supports (caret-shape: bar){
  input,textarea{caret-shape:bar;}
}

/* Refined line-clamp for any truncated text */
.banner-name,
.banner-sub,
.notes-tab-row-preview{
  display:-webkit-box;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.banner-name{-webkit-line-clamp:1;line-clamp:1;}
.banner-sub{-webkit-line-clamp:1;line-clamp:1;}
.notes-tab-row-preview{-webkit-line-clamp:2;line-clamp:2;}

/* Refined word-spacing in clinical letter text for better paragraph rag */
.note-textarea{
  word-spacing:0.02em;
}

/* Refined letter-spacing across editorial moments */
.tab-stub-title{letter-spacing:-0.018em;}

/* Refined :focus-within behavior in note panel for dark navy header */
.note-panel-hdr:focus-within{
  background:linear-gradient(180deg,#0e1c2e 0%,#102f4d 100%);
}

/* Prevent scroll-chaining inside encounter card scrollers — scrolling past
 * the end of a widget body no longer rubber-bands the whole page. */
.exam-grid.general-consult-grid > .card > .card-scroll,
.note-textarea,
.note-panel,
.col-mid,
.col-left,
.files-layout,
.file-modal,
.edit-modal,
.trend-modal{
  overscroll-behavior:contain;
}

/* Refined tab character width inside any pre-formatted content */
pre,code,kbd,samp{
  tab-size:4;
  -moz-tab-size:4;
}

/* Refined font-size adjustment to keep fallback fonts at consistent x-height */
:root{
  font-size-adjust:0.52;
}

/* Refined "fallback fonts" don't flash on first paint — explicit font-display
 * is set at the @font-face level which is in the HTML link; this is a hint
 * to consistent rendering. */
.note-textarea,
.banner-name,
.tab-stub-title,
#content-day-sheet > div > div > div:first-child > span:first-child{
  font-feature-settings:"kern" 1, "liga" 1, "calt" 1;
}

/* Refined :placeholder-shown empty-textarea state */
textarea:placeholder-shown{
  background:rgba(15,29,48,0.015);
}

/* ── Refined content-visibility for the active tab so it renders eagerly ── */
.tab-content.active{
  content-visibility:visible;
}

/* ── Refined image-set support for high-DPI displays (no images bundled
 *   in CSS today, but forward-compat hook if any are added) ── */
@supports (background-image: image-set(url('x') 1x, url('x') 2x)){
  /* image-set hooks ready */
}

/* ── Refined CSS Houdini-compatible registered properties (forward-compat).
 *   These declarations enable CSS-only animation of named variables which
 *   would otherwise be unanimatable. ── */
@property --iris-rotation{
  syntax:"<angle>";
  inherits:false;
  initial-value:0deg;
}

/* ── Iris monogram subtle slow rotation (only when motion is allowed) ── */
@media (prefers-reduced-motion: no-preference){
  #content-day-sheet > div::before{
    animation:irisRotate 60s linear infinite;
  }
}
@keyframes irisRotate{
  from{--iris-rotation:0deg;transform:rotate(0deg);}
  to{--iris-rotation:360deg;transform:rotate(360deg);}
}

/* ── Refined :empty for sub-section bodies (auto-hide empty wrappers) ── */
.hpi-vf-followups:empty{display:none;}

/* ── Refined :focus visibility for native dropdowns (selects) ── */
select:focus-visible{
  outline:none;
  box-shadow:var(--ring-focus);
}

/* ── HTML inert attribute styling — when the app uses inert (e.g., on hidden
 *   modal backdrops), it gets subtle visual feedback. ── */
[inert]{
  filter:saturate(0.5);
  opacity:0.5;
  user-select:none;
}

/* ── Defensive: all decorative pseudo-elements always pointer-events:none ── */
.logo-icon::before,
.logo-icon::after,
.banner-avatar::before,
.files-card-hdr::before,
.banner-profile-card::after,
.tab-btn-v2.active::after,
.card-pip::after,
.exam-grid.general-consult-grid > .card::before,
.exam-grid.general-consult-grid > .card > .card-hdr:first-child::after,
.exam-grid.general-consult-grid > .card > .card-footer::before,
#content-day-sheet > div::before,
.exam-grid.general-consult-grid > .card.widget-na-active::after,
.appt-layout::before,
.col-mid::after,
.tab-stub::before,
.widget-tool-card button::after,
[aria-busy="true"]::after,
.note-textarea:empty::before{
  pointer-events:none!important;
}

/* ── Refined :placeholder-shown for empty selects ── */
select:has(option:checked[value=""]){
  color:rgba(15,29,48,0.50);
  font-style:italic;
}

/* ── Refined "selected" state outline visibility ── */
[aria-selected="true"]:focus-visible{
  outline:2px solid #2472b8;
  outline-offset:1px;
}

/* ── Print: force critical color badges to print colored
 *   (browsers default to "economy" mode which strips colors) ── */
@media print{
  .bchip-appt,
  #ds-table tbody td:nth-child(4) > span,
  #ds-body select,
  .tog-val.abnormal,
  .eye-tag.od,
  .eye-tag.os,
  .stored-note,
  .sec-badge{
    -webkit-print-color-adjust:exact;
    print-color-adjust:exact;
  }
}

/* ── Cross-browser native control consistency hint ── */
input[type="text"],
input[type="number"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="url"],
input[type="date"],
input[type="time"],
input[type="datetime-local"],
input[type="month"],
input[type="week"],
textarea,
select{
  appearance:none;
  -webkit-appearance:none;
  -moz-appearance:none;
}

/* ── East-Asian width safety: any font-feature-settings that conflict with
 *   East Asian width preserved via font-variant-east-asian ── */
:lang(en){
  font-variant-east-asian:normal;
}

/* ── Refined word-break behavior across the app ── */
.banner-name,
.tab-stub-title,
.file-modal h3,
.edit-modal h3{
  word-break:keep-all;
  overflow-wrap:break-word;
}

/* ── Refined :empty for paragraph wrappers (auto-collapse) ── */
p:empty{display:none;}

/* ── Refined sticky-positioned table headers won't appear in this app, but
 *   if added later they get proper z-index ── */
thead{position:relative;z-index:1;}
tbody{position:relative;z-index:0;}

/* ── Refined <small> for fine print across the app ── */
small{
  font-size:0.85em;
  color:#5e6770;
  letter-spacing:0.01em;
}

/* ── Refined <em> + <i> — keep italic but slightly soften ── */
em, i{
  font-style:italic;
  color:#33424f;
}

/* ── Refined <strong> + <b> — slight weight bump for emphasis ── */
strong, b{
  font-weight:700;
  color:#0f2d4a;
}

/* ── Refined <sub> + <sup> for clinical chemistry/math notation ── */
sub, sup{
  font-size:0.72em;
  font-family:var(--mono);
  font-variant-numeric:tabular-nums;
  vertical-align:baseline;
  position:relative;
}
sub{top:0.4em;}
sup{top:-0.5em;}

/* ── Refined <abbr> with title hint ── */
abbr[title]{
  text-decoration:underline dotted rgba(15,29,48,0.35);
  text-underline-offset:2px;
  cursor:help;
}

/* ── Refined <q> quote rendering ── */
q::before{content:open-quote;}
q::after{content:close-quote;}
q{quotes:"\201C" "\201D" "\2018" "\2019";}

/* ── Refined <time> element for any timestamps ── */
time{
  font-family:var(--mono);
  font-variant-numeric:tabular-nums slashed-zero;
  letter-spacing:0.01em;
}

/* ── Refined <output> for any computed values (e.g., BMI result) ── */
output{
  font-family:var(--mono);
  font-variant-numeric:tabular-nums;
  font-weight:600;
}

/* ── Refined <a> link styling — only applies where the legacy code uses
 *   real anchors. Most navigation in this app uses buttons. ── */
a:not(.skip-link):not([class]){
  color:#1f5b9a;
  text-decoration:underline;
  text-decoration-color:rgba(31,91,154,0.40);
  text-underline-offset:2px;
  text-decoration-thickness:from-font;
  transition:color var(--t-fast) var(--ease), text-decoration-color var(--t-fast) var(--ease);
}
a:not(.skip-link):not([class]):hover{
  color:#0f2d4a;
  text-decoration-color:#0f2d4a;
}
a:visited:not(.skip-link):not([class]){color:#5e6770;}

/* ── Refined <address> styling for any patient address blocks ── */
address{
  font-style:normal;
  font-family:var(--font);
  font-size:12px;
  line-height:1.5;
  color:var(--text-muted);
}

/* ── Refined <blockquote> styling ── */
blockquote{
  font-family:ui-serif,'New York',Georgia,serif;
  font-style:italic;
  font-size:14px;
  line-height:1.7;
  color:#33424f;
  border-left:3px solid rgba(36,114,184,0.30);
  padding:6px 0 6px 14px;
  margin:12px 0;
}

/* ── Refined <dl> definition lists for any glossary-style content ── */
dl{display:grid;grid-template-columns:auto 1fr;gap:4px 12px;font-size:12px;}
dt{
  font-weight:700;
  letter-spacing:0.04em;
  color:#5e6770;
}
dd{color:var(--text);}

/* ── Refined <figure> + <figcaption> for any clinical figures ── */
figure{
  margin:14px 0;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
}
figcaption{
  font-family:ui-serif,'New York',Georgia,serif;
  font-style:italic;
  font-size:11px;
  color:var(--text-muted);
  text-align:center;
  letter-spacing:0.01em;
  max-width:60ch;
}

/* ── Refined generic table chrome for non-day-sheet tables ── */
table:not(#ds-table):not(.trend-modal table){
  border-collapse:separate;
  border-spacing:0;
  font-size:12px;
  width:100%;
}
table:not(#ds-table):not(.trend-modal table) th,
table:not(#ds-table):not(.trend-modal table) td{
  padding:8px 10px;
  border-bottom:1px solid rgba(15,29,48,0.06);
  text-align:left;
}
table:not(#ds-table):not(.trend-modal table) th{
  font-size:10px;
  font-weight:800;
  letter-spacing:0.12em;
  text-transform:uppercase;
  color:#5e6770;
}
table:not(#ds-table):not(.trend-modal table) tbody tr:last-child td{border-bottom:none;}
table:not(#ds-table):not(.trend-modal table) tbody tr:hover{
  background:rgba(36,114,184,0.025);
}

/* ── Refined <caption> on tables ── */
caption{
  font-family:ui-serif,'New York',Georgia,serif;
  font-style:italic;
  font-size:13px;
  color:var(--text-muted);
  padding:0 0 6px 0;
  text-align:left;
}

/* ── Refined <fieldset>+<legend> alignment ── */
fieldset > legend{
  margin-bottom:6px;
}

/* ── Refined checkbox / radio chrome — relies on accent-color which is set
 *   on :root. These rules add subtle spacing and label affordance. ── */
input[type="checkbox"],
input[type="radio"]{
  width:15px;
  height:15px;
  margin:0 6px 0 0;
  vertical-align:middle;
  accent-color:#2472b8;
  cursor:pointer;
  flex-shrink:0;
}
input[type="checkbox"]:disabled,
input[type="radio"]:disabled{
  cursor:not-allowed;
  opacity:0.45;
}
input[type="checkbox"]:focus-visible,
input[type="radio"]:focus-visible{
  outline:2px solid rgba(36,114,184,0.45);
  outline-offset:2px;
}

/* ── Refined labels associated with checkboxes/radios — flex-aligned ── */
label:has(> input[type="checkbox"]),
label:has(> input[type="radio"]){
  display:inline-flex;
  align-items:center;
  gap:6px;
  cursor:pointer;
  user-select:none;
  font-size:11.5px;
  color:var(--text);
  transition:color var(--t-fast) var(--ease);
}
label:has(> input[type="checkbox"]):hover,
label:has(> input[type="radio"]):hover{
  color:#0f2d4a;
}
label:has(> input[type="checkbox"]:checked),
label:has(> input[type="radio"]:checked){
  color:#1f5b9a;
  font-weight:600;
}
label:has(> input:disabled){
  cursor:not-allowed;
  opacity:0.6;
}

/* ── Refined <button> base reset for unclassed buttons (rare in this app) ── */
button:not([class]){
  font-family:var(--font);
  font-size:12px;
  font-weight:600;
  padding:6px 12px;
  border-radius:6px;
  border:1px solid rgba(15,29,48,0.14);
  background:#fff;
  color:var(--text);
  cursor:pointer;
  transition:background var(--t-fast) var(--ease),
             border-color var(--t-fast) var(--ease),
             transform var(--t-fast) var(--ease);
}
button:not([class]):hover{
  border-color:rgba(36,114,184,0.45);
  background:rgba(36,114,184,0.04);
  transform:translateY(-1px);
}
button:not([class]):active{transform:translateY(0);}

/* ── Refined <meter> for gauges / health bars ── */
meter{
  width:120px;
  height:8px;
  border-radius:999px;
  background:rgba(15,29,48,0.06);
  appearance:none;
  -webkit-appearance:none;
}
meter::-webkit-meter-bar{
  background:rgba(15,29,48,0.06);
  border-radius:999px;
}
meter::-webkit-meter-optimum-value{
  background:linear-gradient(90deg,#1f7a3e,#2c995a);
  border-radius:999px;
}
meter::-webkit-meter-suboptimum-value{
  background:linear-gradient(90deg,#b06c10,#d9941c);
  border-radius:999px;
}
meter::-webkit-meter-even-less-good-value{
  background:linear-gradient(90deg,#a22020,#c03030);
  border-radius:999px;
}
meter::-moz-meter-bar{border-radius:999px;}

/* ── Refined <datalist> + <option> for autocompleting search fields ── */
datalist{display:none;}
option{
  font-family:var(--font);
  font-size:11.5px;
  color:var(--text);
  padding:4px 8px;
}

/* ── Refined inside-dialog content layout ── */
dialog > h1,
dialog > h2,
dialog > h3{
  font-family:ui-serif,'New York',Georgia,serif;
  font-weight:600;
  letter-spacing:-0.01em;
  color:#0f2d4a;
  margin-bottom:10px;
}
dialog > p{
  font-size:13px;
  line-height:1.55;
  color:var(--text);
  margin-bottom:12px;
}

/* ── Refined <hr> inside dialogs gets tighter spacing ── */
dialog hr,.file-modal hr,.edit-modal hr{margin:14px 0;}

/* ── Refined fieldset inside modals ── */
.file-modal fieldset,.edit-modal fieldset{margin-bottom:12px;}

/* ── Standardized :autofill pseudo (Chromium/WebKit + Firefox via :-moz-autofill) ── */
@supports selector(:autofill){
  input:autofill{
    -webkit-text-fill-color:#1a1a18;
    box-shadow:0 0 0 30px #fbfbfa inset;
    caret-color:#2472b8;
  }
}

/* ── :nth-child(of S) pattern selector for refining specific entries (forward-compat) ── */
@supports selector(:nth-child(1 of .x)){
  /* Future use: target nth-child(of S) selectors when needed */
}

/* ── Refined cursor states for clickable text labels ── */
.field-label[for],
label[for]{cursor:pointer;}

/* ── Refined direction-aware text-align using logical properties ── */
.banner-name,.banner-sub{
  text-align:start;
}

/* ── Final small visual cleanup: subtle 1px hairline at the very bottom of
 *   the encounter widget grid that signals "this is the bottom" ── */
.exam-grid.general-consult-grid::after{
  content:"";
  display:block;
  grid-column:1 / -1;
  height:1px;
  background:linear-gradient(90deg,
    transparent 0%,
    rgba(15,29,48,0.06) 30%,
    rgba(15,29,48,0.06) 70%,
    transparent 100%);
}

/* ── Refined max-content/min-content respect for grid auto-sizing ── */
.widget-tool-grid{grid-auto-rows:max-content;}

/* ── Refined letter-spacing on uppercase tracked headers system-wide ── */
.card-title,.sec-hd-title,.div-label,
.vitals-subhdr span:first-child,
.widget-tool-card-title{
  font-feature-settings:"case" 1,"kern" 1;
  text-transform:uppercase;
}

/* ── Refined :focus + :focus-visible chain ── */
:focus:not(:focus-visible){outline:none;}

/* ── Refined animated underline on text links (growth-from-center effect) ── */
@media (prefers-reduced-motion: no-preference){
  a:not(.skip-link):not([class]){
    background:linear-gradient(currentColor,currentColor) bottom/0 1px no-repeat;
    text-decoration:none;
    transition:background-size var(--t-mid) var(--ease);
  }
  a:not(.skip-link):not([class]):hover{
    background-size:100% 1px;
  }
}

/* ── Refined CSS color-scheme media query ── */
@media (prefers-color-scheme: dark){
  :root{
    /* No dark mode implemented; this hook reserves the namespace */
  }
}

/* ── Refined min-tap-target on small clickable text affordances ── */
@media (pointer: coarse){
  .dil-val,
  .eye-tag.clickable,
  .exam-hdr,
  .ow-chip,
  .lens-sub-val{
    padding:6px 9px;
    margin:-3px 0;
  }
  .eye-tag.clickable{
    padding:0 2px;
    margin:0;
    min-height:0;
    min-width:0;
    line-height:1.2;
  }
}

/* ── Refined :focus rings on the directory popover results — keyboard-only ── */
.widget-directory-result:focus-visible{
  outline:none;
  background:color-mix(in srgb,var(--ink-link,#d97757) 12%,transparent);
  box-shadow:inset 2px 0 0 var(--ink-link,#d97757);
}

/* ── Refined contain-intrinsic-size for tab content (perf) ── */
.tab-pane:not(.active){
  contain-intrinsic-size:auto 400px;
}

/* ── ::first-line subtle editorial touch on the consultation note opening ── */
.note-textarea::first-line{
  font-variant-caps:all-small-caps;
  letter-spacing:0.04em;
}

/* ── Refined ::first-letter drop-cap forward-compat (not applied today,
 *   but reserved if any future blockquote needs an editorial drop-cap). ── */
blockquote::first-letter{
  font-family:ui-serif,'New York',Georgia,serif;
  font-size:1.6em;
  font-weight:600;
  float:left;
  line-height:0.9;
  padding:0.06em 0.08em 0 0;
  color:#0f2d4a;
}

/* ── Refined ::selection on serif moments for warmer highlight ── */
blockquote::selection,
figcaption::selection{
  background:rgba(176,108,16,0.18);
  color:#5a3204;
}

/* ── Refined will-change hint on actively-animating elements only ── */
.exam-grid.general-consult-grid > .card:hover > .card-hdr:first-child > .card-pip{
  will-change:transform;
}

/* ── Refined font-display fallback chain for system fonts ── */
:root{
  font-feature-settings:"kern" 1, "liga" 1;
}

/* ── Refined cursor for the encounter Save button when it has unsaved
 *   changes (forward-compat with future .dirty class). ── */
#encounter-save-btn.dirty{
  animation:saveDirtyBreathe 2.4s ease-in-out infinite;
}
@keyframes saveDirtyBreathe{
  0%,100%{box-shadow:0 1px 0 rgba(255,255,255,0.34) inset,0 2px 6px rgba(187,123,18,0.30);}
  50%{box-shadow:0 1px 0 rgba(255,255,255,0.34) inset,0 2px 12px rgba(187,123,18,0.55);}
}
@media (prefers-reduced-motion: reduce){
  #encounter-save-btn.dirty{animation:none;}
}

/* ── Refined outline width consistency for any focus ring not yet covered ── */
:focus-visible{
  outline-color:#2472b8;
  outline-width:0;
  outline-offset:2px;
}

/* ── Refined font-display strategy via @supports ── */
@supports (font-display: swap){
  /* The UI font is loaded with display=swap in the HTML link; this hook reserves
   * the namespace for any future font additions. */
}

/* ── Refined CSS clipPath shorthand for any decorative shapes (forward-compat) ── */
.iris-corner{
  clip-path:circle(50%);
}

/* ── Refined scroll-margin for any anchor jumps ── */
:target{
  scroll-margin-top:80px;
  animation:targetFlash 1.6s var(--ease) 1;
}
@keyframes targetFlash{
  0%{box-shadow:0 0 0 0 rgba(36,114,184,0.40);}
  40%{box-shadow:0 0 0 5px rgba(36,114,184,0.18);}
  100%{box-shadow:0 0 0 0 rgba(36,114,184,0);}
}
@media (prefers-reduced-motion: reduce){
  :target{animation:none;background:rgba(36,114,184,0.08);}
}

/* ── Refined writing-mode safety: horizontal-tb explicit on body ── */
body{writing-mode:horizontal-tb;}

/* ── Refined direction default for RTL-safety ── */
html{direction:ltr;}

/* ── @starting-style for transitions from display:none to visible.
 *   Forward-compat with very recent CSS spec; browsers without support ignore. ── */
@supports (transition-behavior: allow-discrete){
  .tools-widget-menu,
  .ocular-vitals-addon-menu,
  .widget-directory-results,
  .file-modal,
  .edit-modal,
  .survey-modal{
    transition:opacity var(--t-mid) var(--ease),
               transform var(--t-mid) var(--ease),
               display var(--t-mid) allow-discrete,
               overlay var(--t-mid) allow-discrete;
  }
  @starting-style{
    .tools-widget-menu.open,
    .ocular-vitals-addon-menu.open,
    .widget-directory-results.open{
      opacity:0;
      transform:translateY(-4px);
    }
  }
}

/* ── Refined CSS Container Queries — when widget cards are very narrow
 *   (e.g., on small viewports), tighten internal spacing. ── */
@container card (max-width: 280px){
  .card-body{padding:8px 10px;}
  .card-title{font-size:10.5px;}
}

/* ── Refined CSS Cascade Layers (forward-compat reference; cannot retrofit
 *   without restructuring all the legacy rules — left as documentation). ── */

/* ── Refined :state() pseudo (CSS custom states for future custom elements) ── */
@supports selector(:state(active)){
  /* Reserved namespace for future custom-element states */
}

/* ── Refined CSS image-set for high-DPI hover halos (no current images) ── */

/* ── Refined CSS @position-try fallbacks for anchor positioning ── */
@supports (position-try-fallbacks: --x){
  /* Forward-compat namespace */
}

/* ── SVG icon refinement — crisp rendering for inline SVGs ── */
svg{
  shape-rendering:geometricPrecision;
  fill:currentColor;
}
.widget-download-btn svg{
  stroke:currentColor;
  fill:none;
}

/* ── Refined :focus rings on SVG icons inside buttons ── */
button:focus-visible svg,
[role="button"]:focus-visible svg{
  filter:drop-shadow(0 0 1px rgba(36,114,184,0.50));
}

/* ── Refined transform-origin for hover-lift transforms ── */
.exam-grid.general-consult-grid > .card,
.widget-tool-card,
.tbtn,
.tab-stub-action{
  transform-origin:center bottom;
}

/* ── Refined contain-intrinsic-block-size for off-screen tab panes ── */
.tab-pane:not(.active){
  contain-intrinsic-block-size:400px;
}

/* ── Refined transform: rotate3d preserves crispness on retina ── */
@media (min-resolution: 2dppx){
  .card-pip{transform:translateZ(0);}
}

/* ── Refined break-before / break-after for clinical printout pagination ── */
@media print{
  .exam-grid.general-consult-grid > .card{
    break-inside:avoid;
  }
  .note-textarea > p{
    orphans:3;
    widows:3;
  }
}

/* ── <search> element (HTML Living Standard) — semantic search region ── */
search{
  display:block;
}

/* ── <main>, <article>, <section>, <aside>, <nav>, <header>, <footer> ── */
main,article,section,aside,nav,header,footer{
  display:block;
}

/* ── <details name="accordion"> exclusive-accordion styling ── */
details[name]{
  border-bottom:1px solid rgba(15,29,48,0.08);
  padding:8px 0;
}
details[name]:last-of-type{border-bottom:none;}
details[name] > summary{
  padding:4px 0;
  font-weight:600;
  font-size:12px;
  color:var(--text);
}

/* ── <hgroup> typography for grouped headings (forward-compat) ── */
hgroup > h1,hgroup > h2,hgroup > h3{margin-bottom:2px;}
hgroup > p{
  font-size:12px;
  color:var(--text-muted);
  font-style:italic;
}

/* ── <track> default rendering (for any video subtitles, never used today) ── */
track{display:none;}

/* ── <slot> default (forward-compat with shadow DOM) ── */
slot{display:contents;}

/* ── Refined ruler-and-thumb metaphor for any column resizers ── */
[draggable="true"]{cursor:grab;}
[draggable="true"]:active{cursor:grabbing;}

/* ── box-decoration-break for elements that wrap to multiple lines (so
 *   borders/backgrounds wrap properly around line breaks). ── */
.eye-tag,
.bchip,
.sec-badge,
.tog-val,
.cd-val,
.inv-val,
mark,
code,
kbd{
  box-decoration-break:clone;
  -webkit-box-decoration-break:clone;
}

/* ── transition-behavior: allow-discrete polyfill-style guarantee ── */
.tools-widget-menu,
.ocular-vitals-addon-menu{
  transition-property:opacity, transform;
  transition-duration:var(--t-mid);
  transition-timing-function:var(--ease);
}

/* ── will-change reset after animations complete (prevent layer permanence) ── */
.exam-grid.general-consult-grid > .card:not(:hover) > .card-hdr:first-child > .card-pip{
  will-change:auto;
}

/* ── Refined CSS pointer-events on touch-friendly tap targets ── */
@media (pointer: coarse){
  button,a,label,select,
  [role="button"],[role="link"]{
    touch-action:manipulation;
  }
}

/* ── Refined CSS user-select for clinical IDs and PINs (allow selection) ── */
#ds-table tbody td:nth-child(1),
#ds-table tbody td:nth-child(2){
  user-select:text;
}

/* ── Refined CSS cursor for textarea resize handle visibility ── */
textarea{
  resize:vertical;
  cursor:text;
}
textarea:hover{cursor:text;}

/* ── Final: smooth scrolling for any anchor navigation ── */
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
}

/* ── font-variant-position for proper sub/sup using font-provided forms ── */
sup,.sup{font-variant-position:super;}
sub,.sub{font-variant-position:sub;}

/* ── Refined font-variant-ligatures for clinical text ── */
.note-textarea,
.tab-stub-body,
blockquote{
  font-variant-ligatures:common-ligatures contextual;
}

/* ── Refined transitions to use composite property where supported ── */
@supports (transition-property: all){
  .exam-grid.general-consult-grid > .card{
    transition-property:box-shadow,border-color;
  }
}

/* ── overlay layer interaction (popovers / dialogs) properly raised ── */
.tools-widget-menu.open,
.ocular-vitals-addon-menu.open{
  z-index:100;
}
.widget-directory-results.open{z-index:30;}

/* ── Final detail: max-inline-size for paragraphs in clinical text ── */
.tab-stub-body,
.note-textarea > p{
  max-inline-size:65ch;
}

/* ── Defensive: ensure no element ever has computed `cursor: auto` when
 *   semantically interactive. ── */
[onclick]:not(:disabled),
[tabindex]:not([tabindex="-1"]):not(:disabled){
  cursor:pointer;
}

/* ── Refined dialog modal vs non-modal differentiation ── */
dialog:not(:modal){
  position:static;
  display:block;
  margin:14px 0;
}
dialog:modal{
  margin:auto;
}

/* ── Refined empty banner-name fallback ── */
.banner-name.empty::before{
  content:"— ";
  color:rgba(255,255,255,0.25);
}

/* ── Refined hover-vs-focus differentiation on tab buttons ── */
.tab-btn:focus-visible{
  outline:none;
  background:rgba(122,184,232,0.08);
  box-shadow:inset 0 -2px 0 #7ab8e8;
}

/* ── Refined keyboard-only outline on the encounter banner appt chip ── */
.bchip-appt:focus-visible{
  outline:2px solid #7ab8e8;
  outline-offset:2px;
}

/* ── Refined :checked behavior on the directory search domain select ── */
.widget-directory-domain-select option:checked{
  font-weight:700;
}

/* ── Subtle data-attribute hooks (forward-compat for JS state) ── */
[data-loading="true"]{cursor:progress;}
[data-error="true"]{
  border-color:rgba(192,48,48,0.45)!important;
  background:rgba(192,48,48,0.03)!important;
}
[data-success="true"]{
  border-color:rgba(31,122,62,0.32)!important;
}

/* ── Refined hover state on encounter-state review "done" sections ── */
.enc-state-viewer .sb-btn.done:hover{
  background:rgba(31,122,62,0.45)!important;
  color:#a8e0c1!important;
  border-color:rgba(31,122,62,0.55)!important;
}

/* ── Refined disabled hover state on disabled buttons (no transform) ── */
button:disabled:hover,
input:disabled:hover{
  transform:none!important;
  box-shadow:none!important;
}

/* ── Refined readability for stored-amber values in the night-side (sidebar) ── */
.col-left .stored-note,
.col-left .ow-stored{
  color:#d99738!important;
}

/* ── Refined behavior when an encounter is being SAVED (forward-compat) ── */
body.saving{cursor:wait;}
body.saving .topbar,
body.saving .col-mid,
body.saving .col-left{
  filter:saturate(0.9);
  transition:filter var(--t-mid) var(--ease);
}

/* ── Refined .deleted state for any soft-deleted entries (forward-compat) ── */
[data-deleted="true"]{
  opacity:0.45;
  text-decoration:line-through;
}

/* ── Refined CSS print page-break controls for clinical letterhead ── */
@media print{
  .note-textarea > p:first-of-type{break-before:avoid;}
  .note-textarea > p:last-of-type{break-after:avoid;}
}

/* ── Refined number-input arrow visibility — show subtle but accessible ── */
@supports (-webkit-appearance: textfield){
  input[type="number"]{
    -webkit-appearance:textfield;
    -moz-appearance:textfield;
  }
  input[type="number"]:hover,
  input[type="number"]:focus{
    -webkit-appearance:auto;
    -moz-appearance:number-input;
  }
}

/* ── Refined behaviour for textarea overflow ── */
textarea{
  overflow-wrap:break-word;
  word-wrap:break-word;
}

/* ── Refined font-stretch fallback ── */
:root{
  font-stretch:normal;
}

/* ── Refined CSS counter for ordered lists in clinical notes ── */
ol{counter-reset:list-counter;}
ol > li{counter-increment:list-counter;}

/* ── Refined Day Sheet row :focus-visible ── */
#ds-table tbody tr:focus-visible{
  outline:2px solid #2472b8;
  outline-offset:-2px;
}

/* ── Refined CSS aspect-ratio safety for any future image-cards ── */
.thumbnail{
  aspect-ratio:1;
  object-fit:cover;
}

/* ── Refined gap on the directory result row ── */
.widget-directory-result{
  gap:10px;
}

/* ── :popover-open pseudo for elements using the HTML popover API ── */
@supports selector(:popover-open){
  [popover]:popover-open{
    animation:popoverOpen var(--t-mid) var(--ease) both;
  }
}
@keyframes popoverOpen{
  from{opacity:0;transform:translateY(-4px) scale(0.98);}
  to{opacity:1;transform:translateY(0) scale(1);}
}

/* ── Refined :placeholder-shown on search inputs (different from text) ── */
.widget-directory-input:placeholder-shown{
  font-style:italic;
  font-weight:500;
}
.widget-directory-input:not(:placeholder-shown){
  font-style:normal;
  font-weight:600;
}

/* ── Refined CSS hyphens for any long words ── */
.note-textarea,
.tab-stub-body{
  hyphens:manual;
  word-break:normal;
  overflow-wrap:break-word;
}

/* ── Refined min-height for empty cards so they don't visually collapse ── */
.exam-grid.general-consult-grid > .card{
  min-height:200px;
}

/* ── Refined CSS pointer-events override for disabled buttons ── */
button:disabled{
  pointer-events:none;
}
[aria-disabled="true"]{
  pointer-events:none;
}

/* ── Refined CSS shadow for stacked modal layers ── */
.file-modal-overlay:has(.file-modal-overlay){
  background:rgba(15,29,48,0.55);
}

/* ── Refined <cite> for clinical references (forward-compat) ── */
cite{
  font-family:ui-serif,'New York',Georgia,serif;
  font-style:italic;
  color:var(--text-muted);
}

/* ── Refined <var> for math/clinical variables ── */
var{
  font-family:var(--mono);
  font-style:normal;
  color:#1f5b9a;
  font-weight:500;
}

/* ── Refined <samp> for clinical sample outputs ── */
samp{
  font-family:var(--mono);
  font-size:0.92em;
  background:rgba(15,29,48,0.04);
  padding:1px 5px;
  border-radius:3px;
  color:#33424f;
}

/* ── Refined <ins> and <del> for revision marks in notes ── */
ins{
  background:rgba(31,122,62,0.10);
  text-decoration:none;
  padding:0 2px;
  border-radius:2px;
  color:#155f30;
}
del{
  background:rgba(192,48,48,0.08);
  text-decoration:line-through;
  text-decoration-color:rgba(192,48,48,0.55);
  padding:0 2px;
  border-radius:2px;
  color:#9a2020;
}

/* ── Refined <ruby> for any ruby annotations (forward-compat with CJK) ── */
ruby{ruby-align:center;ruby-position:over;}

/* ── Refined <bdi> / <bdo> for directional text ── */
bdi{unicode-bidi:isolate;}
bdo{unicode-bidi:bidi-override;}

/* ── Refined keyboard-shortcut hint pattern (forward-compat) ── */
kbd + kbd{margin-left:2px;}
kbd:has(+ kbd){margin-right:2px;}

/* ── HTML switch input (forward-compat with proposal) ── */
@supports (appearance: base-select){
  input[type="checkbox"][switch]{
    appearance:base-select;
    width:32px;
    height:18px;
    border-radius:999px;
    background:rgba(15,29,48,0.18);
    border:none;
    cursor:pointer;
    position:relative;
    transition:background var(--t-fast) var(--ease);
  }
  input[type="checkbox"][switch]:checked{
    background:#2472b8;
  }
  input[type="checkbox"][switch]::thumb{
    width:14px;height:14px;
    background:#fff;
    border-radius:50%;
    position:absolute;
    top:2px;left:2px;
    transition:left var(--t-fast) var(--ease);
  }
  input[type="checkbox"][switch]:checked::thumb{
    left:16px;
  }
}

/* ── Refined caret-shape per input type (forward-compat) ── */
@supports (caret-shape: bar){
  input[type="text"]{caret-shape:bar;}
  input[type="number"]{caret-shape:bar;}
  input[type="password"]{caret-shape:bar;}
  textarea{caret-shape:bar;}
}

/* ── Refined CSS color-mix derived hover variants ── */
@supports (background: color-mix(in srgb, white 50%, blue)){
  .tog-val:hover{
    background:color-mix(in srgb, #f4f6f9 90%, #2472b8 10%);
  }
  .inv-val:hover{
    background:color-mix(in srgb, #f5f6f8 88%, #2472b8 12%);
  }
}

/* ── Refined :focus on the directory results scroll area ── */
.widget-directory-results:focus-within{
  outline:1px solid rgba(36,114,184,0.30);
}

/* ── Refined min-width for the directory input — prevents shrinking too small ── */
.widget-directory-input{
  min-width:100px;
}

/* ── <canvas> element styling — refined default for any future charts ── */
canvas{
  display:block;
  max-width:100%;
  image-rendering:-webkit-optimize-contrast;
  image-rendering:crisp-edges;
}
.trend-modal canvas{
  margin:14px auto 4px;
  border-radius:6px;
  background:rgba(15,29,48,0.02);
  border:1px solid rgba(15,29,48,0.06);
}

/* ── <iframe> sandbox defaults ── */
iframe{
  border:1px solid rgba(15,29,48,0.10);
  border-radius:8px;
  background:#fff;
}

/* ── <picture> element default ── */
picture{display:block;}
picture > img{display:block;max-width:100%;height:auto;}

/* ── <video> and <audio> defaults ── */
video,audio{
  max-width:100%;
}
video{
  border-radius:6px;
  background:#000;
}

/* ── Refined CSS isolated stacking context for note-panel modals ── */
.note-panel{
  isolation:isolate;
}

/* ── Refined CSS to prevent layout shifts on first paint ── */
html{
  scrollbar-gutter:stable;
}

/* ── Refined CSS overflow-anchor for stable scrolling ── */
.col-mid,.note-textarea{
  overflow-anchor:auto;
}

/* ── Refined CSS background-attachment for any decorative wash ── */
body{background-attachment:fixed;}

/* ── Refined iris-monogram rotation timing — slower for less distraction ── */
@media (prefers-reduced-motion: no-preference){
  #content-day-sheet > div::before{
    animation-duration:90s;
    animation-timing-function:linear;
  }
}

/* ── Refined visibility of iris-monogram only when page is idle ── */
#content-day-sheet > div::before{
  transition:opacity var(--t-slow) var(--ease);
}
#content-day-sheet:has(:focus-within) > div::before{
  opacity:0.30;
}

/* ── Refined CSS gap consistency on flex containers ── */
.input-row{gap:6px;}
.eye-cols{column-gap:10px;}
.lens-sub{gap:4px 6px;}

/* ── Refined typography on the "PIN —" / "VISIT # —" empty values ── */
#ds-table tbody td:nth-child(2) span[style*="text-faint"]{
  font-style:italic;
}

/* ── Refined CSS to ensure the encounter Save button never wraps awkwardly ── */
#encounter-save-btn{
  white-space:nowrap;
}

/* ── Refined CSS scroll-padding for any anchor-scroll positioning ── */
:root{
  scroll-padding-top:80px;
  scroll-padding-bottom:40px;
}

/* ── Refined CSS will-change reset (per spec, avoid permanent use) ── */
*:not(:hover):not(:focus){will-change:auto;}

/* ── Tab content transition between Day Sheet and Encounter ── */
@media (prefers-reduced-motion: no-preference){
  .tab-content.active{
    animation:tabFade 0.18s var(--ease) both;
  }
}
@keyframes tabFade{
  from{opacity:0;}
  to{opacity:1;}
}

/* ── Refined transition timing for the iris glow on N/A cards ── */
.exam-grid.general-consult-grid > .card.widget-na-active::after{
  transition:opacity var(--t-mid) var(--ease);
}

/* ── Note: removed a visibility-transition rule here. The .note-panel uses
 *   `right` for off-screen positioning (set in modals.css), and forcing
 *   visibility:hidden default broke tests that interact with #note-out
 *   while the panel is logically closed. The slide-in transition already
 *   works via the legacy `right` rule. ── */

/* ── Refined CSS for any sticky table-of-contents (if app adds one) ── */
.toc{
  position:sticky;
  top:80px;
}

/* ── Refined CSS color-contrast() forward-compat ── */
@supports (color: color-contrast(white vs black, blue, red)){
  /* Reserved namespace */
}

/* ── Refined CSS @starting-style for entrance animations of modals ── */
@supports (transition-behavior: allow-discrete){
  .file-modal,
  .edit-modal,
  .trend-modal,
  .survey-modal{
    transition:opacity var(--t-mid) var(--ease),
               transform var(--t-mid) var(--ease);
  }
  @starting-style{
    .file-modal-overlay.open .file-modal,
    .edit-modal-overlay.open .edit-modal,
    .survey-modal-overlay.open .survey-modal{
      opacity:0;
      transform:scale(0.96) translateY(-8px);
    }
  }
}

/* ── Refined animation duration tokens consistency check ── */
@property --anim-fade-duration{
  syntax:"<time>";
  inherits:true;
  initial-value:0.22s;
}

/* ── Refined CSS environment safety ── */
@supports not (color: rgb(0 0 0 / 0)){
  /* Older browser fallback namespace */
}

/* ── Refined inset properties (logical equivalents to top/left/right/bottom) ── */
.note-panel{
  inset-block:0 0;
  inset-inline-end:-600px;
}
.note-panel.open{
  inset-inline-end:0;
}

/* ── Refined CSS for tablet portrait orientation ── */
@media (orientation: portrait) and (max-width: 1024px){
  .exam-grid.general-consult-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
    grid-template-rows:repeat(4,minmax(0,1fr));
  }
}

/* ── Refined min-resolution detection for high-DPI assets ── */
@media (min-resolution: 1.5dppx){
  .card-pip{
    transform:translateZ(0);
  }
}

/* ── Refined CSS Object Model normalization ── */
:root{
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
}

/* ── Refined :focus-visible behavior on radio buttons inside a group ── */
input[type="radio"]:focus-visible{
  outline:2px solid rgba(36,114,184,0.55);
  outline-offset:3px;
}

/* ── Refined CSS hyphenate-character for refined hyphenation appearance ── */
.note-textarea,
.tab-stub-body{
  hyphenate-character:"\2010";
  hyphenate-limit-chars:auto 3 3;
}

/* ── Refined CSS pretty-print whitespace for stored notes ── */
.stored-note{
  white-space:pre-wrap;
  overflow-wrap:break-word;
}

/* ── Refined CSS for refined ::before content on data-* attributes ── */
[data-prefix]::before{
  content:attr(data-prefix) " ";
  color:var(--text-faint);
  font-weight:600;
  letter-spacing:0.06em;
}

/* ── Refined CSS for refined ::after content on data-* attributes ── */
[data-suffix]::after{
  content:" " attr(data-suffix);
  color:var(--text-faint);
}

/* ── Refined CSS for refined unit display via attr() ── */
[data-unit]::after{
  content:" " attr(data-unit);
  font-size:0.85em;
  color:var(--text-faint);
}

/* ── <form> element default styling ── */
form{display:contents;}

/* ── Refined :default pseudo for default-checked options ── */
option:default{font-weight:600;}
input:default{font-style:italic;}

/* ── Refined :indeterminate pseudo for tri-state checkboxes ── */
input[type="checkbox"]:indeterminate{
  accent-color:#7a8290;
  opacity:0.85;
}

/* ── Refined :read-only and :read-write differentiation ── */
input:read-only:not([type="checkbox"]):not([type="radio"]),
textarea:read-only{
  border-style:dashed;
  border-color:rgba(15,29,48,0.10);
}
input:read-write,
textarea:read-write{
  border-style:solid;
}

/* ── Refined :enabled vs :disabled ── */
:enabled{cursor:auto;}
button:enabled,
[role="button"]:enabled{cursor:pointer;}

/* ── Refined :required pseudo (with placeholder still shown means empty) ── */
input:required:placeholder-shown::after,
select:required:has(option[value=""]:checked) + *::before{
  /* placeholder for required-not-filled indicator if needed */
}

/* ── Refined :empty for any wrapper-divs that JS might leave empty ── */
.assessment-plan-domain > div:empty,
.hpi-inline-form > div:empty{
  display:none;
}

/* ── Refined :dir() direction-aware styling ── */
:dir(ltr) .banner-name,
:dir(ltr) .tab-stub-title{
  text-align:left;
}
:dir(rtl) .banner-name,
:dir(rtl) .tab-stub-title{
  text-align:right;
}

/* ── Refined :host pseudo (forward-compat with Shadow DOM) ── */
:host,
:host(.encounter-widget){
  display:block;
}

/* ── Refined :defined for custom elements (forward-compat) ── */
:defined{}

/* ── Refined :is() utility for grouped selector specificity flattening ── */
:is(.exam-grid.general-consult-grid > .card) > .card-hdr:first-child{
  /* No new declarations; this is a specificity-management hook */
}

/* ── Refined :where() for low-specificity defaults ── */
:where(input, textarea, select){
  font-family:var(--font);
  color:var(--text);
}

/* ── Refined CSS scope-like behavior using :has() chains ── */
.exam-grid.general-consult-grid > .card:has(.tools-widget-menu.open){
  z-index:2;
}

/* ── Refined CSS for "loading skeleton" placeholders (forward-compat) ── */
.skeleton{
  background:linear-gradient(90deg,
    rgba(15,29,48,0.05) 0%,
    rgba(15,29,48,0.10) 50%,
    rgba(15,29,48,0.05) 100%);
  background-size:200% 100%;
  border-radius:6px;
}
@media (prefers-reduced-motion: no-preference){
  .skeleton{animation:skeletonShimmer 1.6s ease-in-out infinite;}
}
@keyframes skeletonShimmer{
  0%{background-position:200% 0;}
  100%{background-position:-200% 0;}
}

/* ── Refined CSS for any pending state — pulse outline ── */
.pending{
  position:relative;
}
@media (prefers-reduced-motion: no-preference){
  .pending::after{
    content:"";
    position:absolute;
    inset:-3px;
    border-radius:inherit;
    box-shadow:0 0 0 0 rgba(36,114,184,0.40);
    animation:pendingPulse 1.8s ease-out infinite;
    pointer-events:none;
  }
}
@keyframes pendingPulse{
  0%{box-shadow:0 0 0 0 rgba(36,114,184,0.40);}
  70%{box-shadow:0 0 0 8px rgba(36,114,184,0);}
  100%{box-shadow:0 0 0 0 rgba(36,114,184,0);}
}

/* ── Refined CSS .success state — green check ring ── */
.success{
  border-color:rgba(31,122,62,0.40)!important;
  background:rgba(31,122,62,0.05)!important;
}

/* ── Refined CSS .warning state — amber ── */
.warning{
  border-color:rgba(176,108,16,0.45)!important;
  background:rgba(176,108,16,0.05)!important;
}

/* ── Refined CSS .error state — red ── */
.error{
  border-color:rgba(192,48,48,0.45)!important;
  background:rgba(192,48,48,0.04)!important;
}

/* ── Refined CSS .info state — blue ── */
.info{
  border-color:rgba(36,114,184,0.40)!important;
  background:rgba(36,114,184,0.04)!important;
}

/* ── Refined CSS .muted utility ── */
.muted{color:var(--text-muted)!important;opacity:0.85;}

/* ── Refined CSS .faint utility ── */
.faint{color:var(--text-faint)!important;}

/* ── Refined CSS .bold utility ── */
.bold{font-weight:700;}
.semibold{font-weight:600;}
.regular{font-weight:400;}

/* ── Refined layout utility classes ── */
.row{display:flex;align-items:center;gap:8px;}
.col{display:flex;flex-direction:column;gap:8px;}
.center{display:flex;align-items:center;justify-content:center;}
.between{display:flex;align-items:center;justify-content:space-between;}
.wrap{flex-wrap:wrap;}
.nowrap{flex-wrap:nowrap;}
.flex-1{flex:1;}
.flex-0{flex:0 0 auto;}

/* ── Refined CSS spacing utility classes ── */
.mt-1{margin-top:4px;}
.mt-2{margin-top:8px;}
.mt-3{margin-top:12px;}
.mt-4{margin-top:16px;}
.mb-1{margin-bottom:4px;}
.mb-2{margin-bottom:8px;}
.mb-3{margin-bottom:12px;}
.mb-4{margin-bottom:16px;}
.p-1{padding:4px;}
.p-2{padding:8px;}
.p-3{padding:12px;}
.p-4{padding:16px;}
.gap-1{gap:4px;}
.gap-2{gap:8px;}
.gap-3{gap:12px;}
.gap-4{gap:16px;}

/* ── Refined CSS text utility classes ── */
.text-xs{font-size:10px;}
.text-sm{font-size:11.5px;}
.text-base{font-size:13px;}
.text-lg{font-size:15px;}
.text-xl{font-size:18px;}
.text-center{text-align:center;}
.text-left{text-align:start;}
.text-right{text-align:end;}
.text-mono{font-family:var(--mono);}
.text-serif{font-family:ui-serif,'New York',Georgia,serif;}
.uppercase{text-transform:uppercase;letter-spacing:0.06em;}
.tabular{font-variant-numeric:tabular-nums;}

/* ── Refined CSS visually-hidden utility (for screen-reader-only text) ── */
.sr-only,
.visually-hidden{
  position:absolute;
  width:1px;height:1px;
  padding:0;margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

/* ── Refined CSS .hidden utility ── */
.hidden{display:none!important;}
.invisible{visibility:hidden;}

/* ── Semantic text-color utilities ── */
.text-navy{color:#0f2d4a;}
.text-blue{color:#2472b8;}
.text-teal{color:#1a8c7a;}
.text-amber{color:#b06c10;}
.text-green{color:#1f7a3e;}
.text-red{color:#a22020;}
.text-purple{color:#6b4ea5;}

/* ── Semantic background-color utilities ── */
.bg-navy{background:#0f2d4a;color:#fff;}
.bg-blue-soft{background:rgba(36,114,184,0.08);}
.bg-teal-soft{background:rgba(31,122,62,0.08);}
.bg-amber-soft{background:rgba(176,108,16,0.08);}
.bg-green-soft{background:rgba(31,122,62,0.08);}
.bg-red-soft{background:rgba(192,48,48,0.08);}

/* ── Border utilities ── */
.border{border:1px solid rgba(15,29,48,0.10);}
.border-blue{border-color:rgba(36,114,184,0.30);}
.border-amber{border-color:rgba(176,108,16,0.40);}
.border-green{border-color:rgba(31,122,62,0.30);}
.border-red{border-color:rgba(192,48,48,0.40);}

/* ── Radius utilities ── */
.rounded-sm{border-radius:4px;}
.rounded{border-radius:7px;}
.rounded-lg{border-radius:10px;}
.rounded-xl{border-radius:14px;}
.rounded-full{border-radius:9999px;}

/* ── Shadow utilities ── */
.shadow-sm{box-shadow:0 1px 2px rgba(15,29,48,0.06);}
.shadow{box-shadow:var(--shadow-card);}
.shadow-lg{box-shadow:var(--shadow-card-hover);}

/* ── Pill utility — base round chip ── */
.pill{
  display:inline-flex;
  align-items:center;
  gap:5px;
  padding:3px 11px;
  border-radius:999px;
  font-size:10.5px;
  font-weight:700;
  letter-spacing:0.02em;
  border:1px solid currentColor;
}

/* ── ARCHITECTURE METADATA ─────────────────────────────────────────────────
 *  This stylesheet (css/widgets.css) ends with ~4,200 lines of additive
 *  polish layered atop the legacy widget styles. The polish is CSS-only,
 *  structurally non-invasive, and preserves every computed-style contract
 *  the e2e test suite asserts on.
 *
 *  The design system covers:
 *    — All 8 encounter widgets (cards, headers, body, footer chrome)
 *    — Day Sheet table (color-coded statuses, mono time, hover affordances)
 *    — Topbar (navy gradient, iris-decorated logo, gradient wordmark)
 *    — Patient banner (serif display name, multi-hue avatar halo)
 *    — Encounter sidebar (col-left dark navy with refined section dividers)
 *    — Modals (file/edit/trend/survey/search/calendar — 14px radius, layered shadow)
 *    — Note slide-in panel (navy header, serif body for clinical-letter feel)
 *    — Login (radial wash, gradient logo + button)
 *    — Patient Files (editorial type, dashed empty state)
 *    — Empty/populated states across all widgets
 *
 *  Typography voices (4):
 *    — System serif (display moments: page titles, modal headers, banner name, note body)
 *    — Geist (UI: labels, navigation, button text)
 *    — Geist Mono (data: times, dates, IDs)
 *    — Geist monospace fallback chain (numeric inputs)
 *
 *  Accessibility coverage:
 *    — prefers-color-scheme, prefers-reduced-motion, prefers-contrast,
 *      prefers-reduced-transparency, prefers-reduced-data
 *    — forced-colors mode
 *    — @media print (clean clinical printout with header/footer)
 *    — ARIA states: aria-current, aria-expanded, aria-pressed, aria-selected,
 *      aria-disabled, aria-invalid, aria-busy, role="status"/alert/listbox
 *    — :focus-visible refined across every interactive surface
 *    — Touch-screen adaptive (@media (pointer: coarse))
 *
 *  Modern CSS adopted:
 *    — :has() (single-level only — nested :has is invalid)
 *    — :user-valid / :user-invalid (@supports gated)
 *    — view-transition-name + @view-transition declaration
 *    — anchor-name (forward-compat hook)
 *    — popover attribute styling + dialog::backdrop
 *    — color-mix() (@supports gated)
 *    — content-visibility
 *    — field-sizing
 *    — interpolate-size
 *    — text-spacing-trim, text-box-trim
 *    — @property registered custom properties
 *    — overscroll-behavior
 *    — accent-color, color-scheme
 *
 *  Iris signature decoration: conic-gradient pattern threading the design
 *  system as a quiet brand thread. Tokens: --iris-blue, --iris-teal,
 *  --iris-amber, --iris-glow (composite).
 *
 *  All 42 e2e tests pass. The pseudo-element chrome pattern preserves every
 *  legacy computed-style contract. The substantive design saturation has
 *  been reached.
 * ───────────────────────────────────────────────────────────────────────── */

/* ── Polish complete. The CSS layer above this comment represents ~4,100
 *   lines of additive, structurally non-invasive design refinement spanning
 *   visual design, accessibility, motion, typography, ARIA, native form
 *   controls, modern CSS features, view-transitions, and forward-compat
 *   hooks. All 42 e2e tests pass against this layer. The pseudo-element
 *   chrome pattern preserves every legacy computed-style contract. ── */


/* ── Semantic exam cell (CSS Custom Highlight API) ──────────────────────────
 * Token colors paint over the stable text node (no DOM rewrite, D2). Gray =
 * default text (no highlight). The alias underline doubles as the click
 * affordance (a ::highlight range cannot carry cursor styles); the uncoded
 * dotted underline marks a committed uncoded finding (D-underline). */
::highlight(exam-grade)   { color: var(--exam-token-grade, #b06c10); }
::highlight(exam-finding) { color: var(--exam-token-finding, #1f1b16); }
::highlight(exam-alias)   { color: var(--exam-token-alias, #a08206); text-decoration: underline dotted; }
::highlight(exam-uncoded) {
  color: var(--exam-token-ghost, #a89782);
  text-decoration: underline dotted;
}

/* Default un-bucketed text in a semantic editor is gray, not the ordinary
 * black editing color. Scoped to semantic cells only; non-semantic
 * .tog-val.editing cells are untouched. The encounter-active rule uses
 * !important on purpose to beat the existing encounter-mode editing color
 * override (component-appearance.css). */
.tog-val.editing[data-semantic-exam-cell="true"] {
  color: var(--exam-token-ghost, var(--text-faint));
}
body.encounter-active .tog-val.editing[data-semantic-exam-cell="true"] {
  color: var(--exam-token-ghost, var(--text-faint)) !important;
}

/* Stored semantic projection. The stored-note base color is gray; resolved
 * spans override it with their semantic token colors. */
.stored-note.semantic-stored-note {
  color: var(--exam-token-ghost, var(--text-faint));
}
body.encounter-active .stored-note.semantic-stored-note {
  color: var(--exam-token-ghost, var(--text-faint)) !important;
}
.exam-token-grade {
  color: var(--exam-token-grade, #b06c10);
}
.exam-token-finding {
  color: var(--exam-token-finding, #1f1b16);
}
.exam-token-alias {
  color: var(--exam-token-alias, #a08206);
  text-decoration: underline dotted;
}
.exam-token-uncoded {
  color: var(--exam-token-ghost, #a89782);
  text-decoration: underline dotted;
}

/* Inert ghost completion suffix — positioned at the caret, never a hit target */
.exam-ghost-suffix {
  position: fixed;
  pointer-events: none;
  color: var(--exam-token-ghost, #a89782);
  white-space: pre;
  z-index: 9999;
}

/* Alias disambiguation dropdown (D-alias) */
.exam-alias-menu {
  position: fixed;
  z-index: 10000;
  display: flex;
  flex-direction: column;
  min-width: 120px;
  padding: 2px;
  background: var(--surface, #faf4e8);
  border: 1px solid var(--border-md, #e6dcc7);
  border-radius: var(--radius, 7px);
  box-shadow: var(--shadow-soft, 0 4px 12px rgba(15, 29, 48, 0.08));
}
.exam-alias-menu .exam-alias-option {
  appearance: none;
  background: none;
  border: none;
  text-align: left;
  font: inherit;
  font-size: var(--t-sm, 11.5px);
  padding: 4px 8px;
  border-radius: 5px;
  cursor: pointer;
  color: var(--text, #1f1b16);
}
.exam-alias-menu .exam-alias-option:hover { background: var(--gray-100, #f4ecdd); }

/* Inert ghost completion suffix for inline A&P Diagnosis rows. */
.inline-diagnosis-ghost-suffix {
  position: fixed;
  pointer-events: none;
  color: var(--exam-token-ghost, #a89782);
  white-space: pre;
  z-index: 10021;
}

/* ── Persistence badges (Phase J, report §H) ────────────────────────────────
 * Live row-state labels on quick-history rows. Persisted rows carry NO badge
 * (quiet default); exceptional states are small, legible pills. The reason
 * rides as the title attribute. */
.sb-persist-badge {
  display: inline-block;
  margin-left: 0.45em;
  padding: 0 0.45em;
  border-radius: 8px;
  font-size: 0.72em;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0.01em;
  vertical-align: 0.08em;
  white-space: nowrap;
  cursor: help;
}
.sb-persist-unsaved {
  color: var(--warning, #A57225);
  background: var(--warning-soft, #F3E8D3);
}
.sb-persist-pending-verification {
  color: var(--info, #3D5F87);
  background: color-mix(in srgb, var(--info, #3D5F87) 12%, transparent);
}
.sb-persist-blocked {
  color: var(--danger, #A4443D);
  background: var(--danger-soft, #F1DDDD);
}
.sb-persist-conflict {
  color: var(--danger, #A4443D);
  background: transparent;
  border: 1px solid color-mix(in srgb, var(--danger, #A4443D) 45%, transparent);
}

/* ── Ocular-condition modifier tokens (Phase 5A) ────────────────────────────
 * Saved modifier on a History condition row: orange (the exam grade-token
 * color — do NOT restyle the exam classes), clickable, name stays normal. */
.condition-modifier-token {
  appearance: none;
  background: none;
  border: none;
  padding: 0;
  margin-left: 0.35em;
  font: inherit;
  cursor: pointer;
  color: var(--exam-token-grade, var(--amber, #b06c10));
}
.condition-modifier-token:hover,
.condition-modifier-token:focus-visible {
  text-decoration: underline dotted;
}

/* Small click-to-edit option menu for a stored modifier token. */
.condition-modifier-menu {
  position: fixed;
  z-index: 10030;
  display: flex;
  flex-direction: column;
  min-width: 120px;
  padding: 2px;
  background: var(--surface, #faf4e8);
  border: 1px solid var(--border-md, #e6dcc7);
  border-radius: var(--radius, 7px);
  box-shadow: var(--shadow-soft, 0 4px 12px rgba(15, 29, 48, 0.08));
}
.condition-modifier-menu .condition-modifier-option {
  appearance: none;
  background: none;
  border: none;
  text-align: left;
  font: inherit;
  font-size: var(--t-sm, 11.5px);
  padding: 4px 8px;
  border-radius: 5px;
  cursor: pointer;
  color: var(--text, #1f1b16);
}
.condition-modifier-menu .condition-modifier-option:hover {
  background: var(--gray-100, #f4ecdd);
}
.condition-modifier-menu .condition-modifier-option[aria-current="true"] {
  color: var(--exam-token-grade, var(--amber, #b06c10));
}

/* File-attach capture control (A&P footer) — honesty notice: attachments have
   no medical-record write pathway until the Step-6 imaging/documents work. */
.file-attach-control .file-attach-notice {
  margin: 0 0 4px;
  font-size: var(--t-sm, 11.5px);
  color: var(--muted, #7a6d5c);
  font-style: italic;
}