/* Prototype-only styling. Everything else comes from the real OpenEyes stylesheet.
   Classes are prefixed proto- so it is obvious what is scaffolding and what is OE. */

/* The real "sem" grid reserves a 200px patient/event sidebar. This prototype has
   no event sidebar, so collapse the grid to header / event nav / main. */
body.open-eyes.oe-grid.sem {
  grid: "header" 60px "eventheader" 38px "main" 1fr / 1fr;
}
main#event-content.main-event {
  margin-inline: auto;
  padding: 14px 16px 150px;
}

/* Toggled only when capturing full-length screenshots for the written report:
   OpenEyes scrolls inside .main-event, which truncates a full-page capture. */
body.proto-capture.oe-grid.sem { height: auto; overflow: visible; }
body.proto-capture .main-event { overflow: visible; height: auto; }

.proto-guide {
  margin: 4px 0 14px;
  line-height: 1.5;
}
.proto-guide strong { margin-right: 4px; }

.proto-subtitle {
  font-size: 0.8125rem;
  opacity: 0.75;
  margin: -6px 0 14px 2px;
}
h2.event-title { margin-bottom: 8px; }

.proto-role-switch {
  color: var(--text, #333);
  font-size: 0.75rem;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0 6px;
}
.proto-role-switch select { font-size: 0.75rem; max-width: 190px; }

/* OE button and field styles set display, which beats the hidden attribute */
[hidden] { display: none !important; }

.proto-allergy-text {
  font-size: 0.75rem;
  padding: 2px 8px;
  border-radius: 10px;
  background: #b8443c;
  color: #fff;
  white-space: nowrap;
}

/* ---------- medication tables ---------- */

table.proto-meds { width: 100%; }
table.proto-meds th { text-align: left; font-weight: 600; }
table.proto-meds td { vertical-align: top; padding-top: 8px; padding-bottom: 8px; }

tr.proto-row + tr.proto-row td { border-top: 1px solid rgba(128,128,128,0.25); }

.proto-drug-name { font-weight: 600; }
.proto-drug-sub { display: block; font-size: 0.75rem; opacity: 0.75; margin-top: 2px; }

.proto-directions { line-height: 1.5; }
.proto-dates { font-size: 0.8125rem; line-height: 1.5; }

  display: inline-block;
  font-size: 0.6875rem;
  line-height: 1;
  padding: 3px 7px;
  border-radius: 9px;
  margin-right: 4px;
  vertical-align: middle;
  white-space: nowrap;
}

/* Indication picker */
.proto-indication { margin: 12px 0 4px; }
.proto-indication-label { font-size: 12px; margin-bottom: 4px; }
.proto-optional { opacity: 0.65; font-style: italic; }
.proto-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.proto-chips .proto-chip {
  border: 1px solid #9aa0a6 !important;
  background: #fff !important;
  color: #333 !important;
  border-radius: 12px; padding: 3px 10px; font-size: 12px; cursor: pointer;
}
.proto-chips .proto-chip:hover { border-color: #333 !important; }
.proto-chips .proto-chip.on {
  background: #2f6f4f !important; border-color: #2f6f4f !important; color: #fff !important; font-weight: 700;
}
.proto-chips .proto-chip.suggested {
  border-style: dashed !important; border-color: #8a5a00 !important; color: #8a5a00 !important;
}
.proto-chip-sub { opacity: 0.6; font-size: 11px; font-weight: 400; }
.proto-for { font-style: italic; opacity: 0.8; }

/* Advised future actions, awaiting confirmation */
.proto-advice-line { display: block; margin-top: 3px; font-size: 12px; color: #8a5a00; }
.proto-reconcile-list { margin: 6px 0 0; padding-left: 16px; }
.proto-reconcile-list li { margin-bottom: 4px; }
.proto-btn-confirm { background: #8a5a00 !important; color: #fff !important; border-color: #8a5a00 !important; }
.proto-field[hidden] { display: none !important; }
.proto-field-wide { display: block; width: 100%; margin-top: 8px; }
.proto-field-wide textarea, .proto-field-wide input { width: 100%; }

/* Two different markers: not yet committed, versus changed at this visit. */
tr.proto-row.is-unsaved td { box-shadow: inset 3px 0 0 #b3541e; }

/* ---------- unsaved-changes bar ---------- */

.proto-commit-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 0 0 12px;
  padding: 8px 12px;
  border-left: 4px solid #b3541e;
  background: rgba(179,84,30,0.12);
  line-height: 1.45;
}
.proto-commit-bar[hidden] { display: none !important; }
.proto-commit-actions { display: flex; gap: 6px; flex: none; }

/* The change dialog now carries dates and the reducing course, so it needs more
   room than the design system's default popup height before it starts scrolling. */
#popup-edit .oe-popup-content { max-height: min(78vh, 780px); }

/* ---------- duration and taper, on the add/change dialog ---------- */

.proto-taper-block { margin: 12px 0 4px; }
.proto-taper-block .proto-taper-table { margin-top: 4px; }
.proto-taper-block .proto-taper-table input { width: 100%; box-sizing: border-box; }
.proto-taper-block .proto-taper-table select { width: 100%; box-sizing: border-box; }
.proto-course-end { font-size: 12px; opacity: 0.8; margin-top: 6px; }

/* The stop date is shown, never typed. A date field beside a duration field is
   two controls that can disagree, and nothing on screen would say which one the
   system believed. */
.proto-stop-readout { display: flex; flex-direction: column; justify-content: flex-end; }
.proto-readout-label { font-size: 11px; opacity: 0.7; }
.proto-readout-value {
  font-weight: 600;
  padding: 6px 0;
  border-bottom: 1px dashed var(--text-color, #333);
  white-space: nowrap;
}
.proto-pin-field input { width: 140px; letter-spacing: 4px; font-size: 18px; }
.proto-pin-field .proto-optional { display: block; font-size: 11px; margin-top: 4px; }

.proto-attrib { font-size: 0.6875rem; opacity: 0.7; display: block; margin-top: 4px; }

tr.proto-row.is-planned td { background: rgba(107,143,181,0.10); }
tr.proto-row.is-held td { background: rgba(201,150,46,0.12); }
tr.proto-row.is-stopped td { opacity: 0.68; }
tr.proto-row.just-changed td { animation: proto-flash 1.6s ease-out; }
@keyframes proto-flash {
  from { background: rgba(80,160,110,0.45); }
  to { background: transparent; }
}

.proto-supply select,
.proto-supply-select { width: 100%; font-size: 0.75rem; max-width: 100%; }
.proto-supply-value { font-size: 0.75rem; }
/* The collapse header count. Small, bold and offset, as the sidebar group
   counts are, so it reads as a quantity rather than part of the label. */
.proto-count { font-size: 0.6875rem; font-weight: 700; vertical-align: 25%; margin-left: 4px; }
.proto-count::before { content: '('; }
.proto-count::after  { content: ')'; }
.collapse-data-header-icon { padding-left: 8px; }

.proto-supply-value.is-unset { opacity: 0.45; }
/* Nobody has set this; the row is showing the default for its duration. Muted
   rather than annotated, because a "(default)" suffix on most rows is noise. */
.proto-supply-value.is-derived,
.proto-supply-select.is-derived { opacity: 0.6; font-style: italic; }

.proto-add-from {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8125rem;
  margin-right: 8px;
}
.proto-add-from select { font-size: 0.8125rem; max-width: 14rem; }

/* All four medication tables share one column grid so the eye, systemic and
   stopped lists read as one record rather than three tables that happen to be
   stacked. Fixed layout is what guarantees it: with auto layout the widest
   action row in each table sets its own column widths, which is exactly why
   they drifted apart. */
table.proto-meds { table-layout: fixed; width: 100%; }
table.proto-meds col.proto-c-drug    { width: 16%; }
table.proto-meds col.proto-c-lat     { width: 44px; }
table.proto-meds col.proto-c-dir     { width: 21%; }
table.proto-meds col.proto-c-dates   { width: 19%; }
table.proto-meds col.proto-c-supply  { width: 12%; }
table.proto-meds col.proto-c-order   { width: 5%; }
table.proto-meds col.proto-c-actions { width: 27%; }

/* Search results reuse the tag shape to warn about an allergy or a product the
   patient is already on. */

/* Laterality uses the stock OpenEyes oe-lat sprite, which draws both eyes in a
   fixed 30px frame. Keeping it in its own column is what makes the sides
   scannable straight down the list. */
table.proto-meds td.proto-lat { vertical-align: top; padding-top: 6px; }
table.proto-meds td.proto-lat .oe-lat { display: inline-block; }
table.proto-meds th.proto-lat-head { white-space: nowrap; }

/* A course reads as one span, start to end, rather than two labelled lines.
   Ongoing and an anchored stop sit in the end slot so the shape never changes. */
.proto-date-range { white-space: nowrap; }
.proto-date-arrow { font-style: normal; opacity: 0.55; padding: 0 4px; }
.proto-date-soft { color: #666; }
table.proto-meds td, table.proto-meds th { overflow-wrap: break-word; }
/* The systemic tables carry one extra button, so their actions wrap to a second
   line rather than widening the column and breaking the shared grid. */
table.proto-meds td.proto-actions { display: table-cell; text-align: right; }
table.proto-meds td.proto-actions button { margin: 0 0 2px 2px; }

/* The real banner sizes its two rows against a taller header than this mock has,
   so the name and the ID line collide. Let the rows take their content height. */
#oe-patient-details { grid-template-rows: auto auto !important; align-content: center; row-gap: 2px; }
#oe-patient-details .patient-name { grid-row: 1 !important; line-height: 1.15; }
#oe-patient-details .patient-aware { grid-row: 1 / span 2; }
.proto-supply-note { font-size: 0.6875rem; opacity: 0.75; display: block; margin-top: 4px; }

/* The order toggle. A selection for the next order, never a stored field. */
.proto-rxsel, .proto-rxsel-head { width: 62px; text-align: center; }
.proto-toggle { display: inline-block; cursor: pointer; }
.proto-toggle input { position: absolute; opacity: 0; width: 0; height: 0; }
.proto-toggle-track {
  display: block; width: 38px; height: 20px; border-radius: 10px;
  background: #c4c9cf; position: relative; transition: background 0.12s;
}
.proto-toggle-knob {
  position: absolute; top: 2px; left: 2px; width: 16px; height: 16px;
  border-radius: 50%; background: #fff; transition: left 0.12s;
  box-shadow: 0 1px 2px rgba(0,0,0,0.3);
}
.proto-toggle input:checked + .proto-toggle-track { background: var(--button-green-bg, #3a8340); }
.proto-toggle input:checked + .proto-toggle-track .proto-toggle-knob { left: 20px; }
.proto-toggle input:focus-visible + .proto-toggle-track { outline: 2px solid #1b6ec2; outline-offset: 2px; }

.proto-form-buttons { display: flex; gap: 8px; }
.proto-set-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 7px 4px;
  border-bottom: 1px solid #e3e5e8;
  cursor: pointer;
}
.proto-set-item input { margin-top: 2px; flex: 0 0 auto; }
.proto-set-item.is-skipped { opacity: 0.65; }

/* Rows that carry an extra action, the eye-relevance toggle, need more than one
   line at this width. Wrapping is better than clipping the last button. */
.proto-actions { text-align: right; }
.proto-actions button {
  font-size: 0.6875rem;
  padding: 3px 7px;
  margin: 0 0 3px 3px;
  cursor: pointer;
}

/* ---------- sticky prescribe bar ---------- */

#proto-prescribe-summary { font-size: 0.8125rem; }

/* ---------- popups ---------- */

.oe-popup-wrap[hidden] { display: none; }
.oe-popup-wrap { display: flex; }
.proto-popup-wide { width: min(900px, 92vw); }

.proto-field { display: block; margin: 10px 0; font-size: 0.8125rem; }
.proto-field input, .proto-field select, .proto-field textarea { display: block; margin-top: 4px; }
.proto-field-row { display: flex; gap: 14px; flex-wrap: wrap; }
.proto-field-row .proto-field { flex: 1 1 140px; }
.proto-strong { font-weight: 600; margin-bottom: 8px; }
.proto-inline-note { margin: 10px 0; }

.proto-results { margin-top: 10px; max-height: 320px; overflow-y: auto; }
.proto-result {
  padding: 8px 10px;
  cursor: pointer;
  border-bottom: 1px solid rgba(128,128,128,0.25);
  font-size: 0.8125rem;
}
.proto-result:hover { background: rgba(80,140,200,0.18); }
.proto-result .proto-drug-sub { opacity: 0.7; }
.proto-result.is-active-already { opacity: 0.6; }

/* ---------- artefacts ---------- */

.proto-artefact { margin-bottom: 18px; }
.proto-artefact .element-header { display: flex; align-items: center; justify-content: space-between; }
.proto-artefact-meta { font-size: 0.75rem; opacity: 0.8; line-height: 1.6; }
.proto-status {
  display: inline-block; font-size: 0.6875rem; padding: 3px 8px; border-radius: 9px; margin-left: 8px;
}
.proto-status.draft { background: #8a8a8a; color: #fff; }
.proto-status.signed { background: #2f6f4f; color: #fff; }
.proto-status.issued { background: #2c5d8f; color: #fff; }
.proto-status.complete { background: #4a3f7a; color: #fff; }
.proto-status.cancelled { background: #7a3f3f; color: #fff; }

.proto-diverged-flag {
  margin-left: 6px;
  font-size: 0.85em;
  vertical-align: middle;
}

.proto-state-note { font-size: 0.75rem; opacity: 0.85; margin: 6px 0 10px; }
.proto-artefact.is-cancelled .proto-sign-table { opacity: 0.55; text-decoration: line-through; }

.proto-frozen-note { font-size: 0.75rem; margin-top: 8px; }
.proto-diverged { color: #b8712c; }
.proto-projection { color: #4a7a99; }
.proto-query { color: #a03c3c; }
tr.proto-diverged-row td { background: rgba(184,113,44,0.12); }

/* Pharmacy signatory chips, as the worklist renders them */
.proto-worklist-line {
  display: flex; align-items: center; flex-wrap: wrap; gap: 4px;
  margin-top: 10px; padding-top: 8px; font-size: 0.75rem;
  border-top: 1px solid rgba(128,128,128,0.25);
}
.proto-worklist-label { opacity: 0.7; margin-right: 2px; }
.proto-sig {
  display: inline-block; font-size: 0.6875rem; padding: 2px 6px; border-radius: 2px;
  white-space: nowrap;
}
.proto-sig.signed { background: #2f6f4f; color: #fff; }
.proto-sig.unsigned { background: rgba(128,128,128,0.3); color: inherit; opacity: 0.8; }
.proto-worklist-state { flex: 1 1 100%; margin-top: 4px; opacity: 0.75; }

.proto-notes { margin-top: 10px; font-size: 0.75rem; }
.proto-notes .proto-field { display: block; width: 100%; }
.proto-notes textarea { display: block; width: 100%; box-sizing: border-box; font-size: 0.75rem; }
.proto-notes-frozen { padding: 6px 8px; background: rgba(128,128,128,0.12); border-radius: 2px; }

table.proto-model-table td, table.proto-model-table th { padding: 8px 10px; vertical-align: top; font-size: 0.8125rem; }
table.proto-model-table th { text-align: left; font-weight: 600; }
table.proto-model-table tr + tr td { border-top: 1px solid rgba(128,128,128,0.25); }

table.proto-history-table td, table.proto-history-table th,
table.proto-sign-table td, table.proto-sign-table th,
table.proto-taper-table td, table.proto-taper-table th { padding: 6px 8px; font-size: 0.8125rem; text-align: left; }
table.proto-history-table tr + tr td { border-top: 1px solid rgba(128,128,128,0.25); }

.proto-empty { font-size: 0.8125rem; opacity: 0.7; padding: 10px 0; }

/* Dispense location, shown only when something is actually being supplied */
.proto-loc { margin-top: 3px; display: block; }

/* The set and PGD pickers use the stock OpenEyes adder, so the bundled
   stylesheet does the work. It is positioned against its open button. */
#adder-set { position: fixed; z-index: 400; }
#adder-set .proto-empty { padding: 4px 8px; color: #666; }
/* Resolving a set against what the patient is already on */
.proto-setplan-row { border-top: 1px solid #ccc; padding: 8px 0; }
table.standard.proto-setplan-diff { width: auto; margin: 4px 0 6px 0; }
table.standard.proto-setplan-diff td { padding: 1px 14px 1px 0; width: auto; white-space: nowrap; }
.proto-setplan-note { margin: 2px 0 8px 0; color: #555; }
.proto-setplan-arrow { color: #888; }
.proto-setplan-list { margin: 4px 0 10px 16px; list-style: disc; }
.proto-setplan-list li { margin: 2px 0; }
.proto-choice-row { display: flex; gap: 4px; }
.proto-setplan-side { border-bottom: 1px solid #bbb; padding-bottom: 8px; margin-bottom: 4px; }
.proto-setplan-side .proto-strong { display: block; margin-bottom: 4px; }
.proto-setplan-side .proto-setplan-note { margin-top: 6px; }
.proto-setplan-aside { color: #777; font-size: 0.92em; }

/* A side that came from the host event rather than from the user. Marked, not
   coloured for its own sake: the point is that it is an answer nobody has
   confirmed yet, and the mark clears the moment they touch it. */
#proto-edit-lat.from-host input:checked + .li { box-shadow: inset 0 0 0 2px #ffd200; }
.proto-side-hint { margin-top: 4px; color: #555; font-size: 0.92em; max-width: 230px; }

/* The stock li puts one label in the row; ours carries status glyphs too. */
#proto-set-list li .oe-i { margin-left: 4px; }
#proto-set-list li .oe-i.info { margin-left: 0; margin-right: 2px; }

/* The long-tail selects under the route and unit button lists */
.proto-longtail { margin-top: 8px; width: 100%; font-size: 0.8125rem; }

.oe-full-header .buttons-right { display: flex; flex-wrap: wrap; justify-content: flex-end; }

/* Conflict list inside the warning popup */
.proto-dup-list { margin-top: 5px; }
.proto-dup-list div { margin-top: 2px; }

/* ------------------------------------------------------------------ *
 * Design-system alignment
 *
 * Everything below either uses a class the OpenEyes stylesheet already
 * defines (highlighter, btn-list, highlight as-button, oe-i, oe-lat) or
 * lays those classes out. No new colours are invented here: the palette
 * comes from the design system, which is the point.
 * ------------------------------------------------------------------ */

/* ---- one element, four groups ---- */
.proto-group { margin-bottom: 14px; }
.proto-group-title {
  font-size: 0.875rem; font-weight: bold; margin: 0 0 4px;
  padding-bottom: 3px; border-bottom: 1px solid rgba(255,255,255,0.12);
}
html.theme-light .proto-group-title { border-bottom-color: rgba(0,0,0,0.12); }
.proto-group-title .proto-count { font-weight: normal; opacity: 0.6; }
.proto-group .js-collapse-data-header .proto-count { font-weight: normal; opacity: 0.6; }

.proto-element-footer {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-top: 10px; padding-top: 8px;
  border-top: 1px solid rgba(255,255,255,0.12);
}
html.theme-light .proto-element-footer { border-top-color: rgba(0,0,0,0.12); }
.proto-allergies { display: flex; align-items: center; gap: 8px; font-size: 0.8125rem; }
.proto-allergy { opacity: 0.85; }
.proto-allergy + .proto-allergy::before { content: '\2022'; padding: 0 6px; opacity: 0.5; }
.proto-element-footer .add-data-actions { display: flex; gap: 6px; align-items: center; }
#proto-btn-add { padding-inline: 10px; }
#proto-btn-add .oe-i { margin: 0; }

/* ---- prescribe bar, inside the element, top and bottom ---- */
.proto-rx-bar {
  display: flex; align-items: center; flex-wrap: wrap; gap: 10px;
  margin: 8px 0; padding: 7px 10px; font-size: 0.8125rem;
  background: rgba(255,255,255,0.07); border-left: 3px solid #0c7915;
}
html.theme-light .proto-rx-bar { background: rgba(0,0,0,0.05); }
.proto-rx-bar[hidden] { display: none; }
.proto-rx-bar-sel { flex: 1 1 200px; min-width: 0; }
.proto-rx-count { font-weight: bold; }
.proto-rx-names { opacity: 0.75; }
.proto-rx-forms { display: flex; gap: 4px; border: 0; padding: 0; margin: 0; }
.proto-pin-wrap { display: flex; align-items: center; gap: 6px; background: #b8860b; padding: 3px 4px 3px 7px; }
.proto-pin-wrap.is-draft { background: #55595f; }
.proto-rx-pin { width: 74px; text-align: center; letter-spacing: 3px; }
.proto-pin-label { font-weight: bold; color: #fff; padding: 0 8px; cursor: pointer; }
/* The draft option is a choice, not an action, so it reads as a box that is on
   or off rather than as a button that does something when pressed. Grey until
   it is picked, blue once it is, which is the same on/off language the rest of
   OpenEyes uses for a selected option. */
.proto-rx-opt {
  background: #55595f; color: #fff; border: 1px solid #6d7278; border-radius: 3px;
  padding: 4px 10px; font-size: 0.8125rem; cursor: pointer;
}
.proto-rx-opt.selected,
.proto-rx-opt.is-on { background: #0075b0; border-color: #4ba3d3; font-weight: bold; }
.proto-rx-opt[hidden] { display: none; }

/* What replaces the PIN field once it has been typed: the signature, the same
   green tick and "signed at" line the e-sign widget uses elsewhere, and a way
   back out. */
.proto-rx-signed { display: flex; align-items: center; gap: 8px; }
.proto-rx-signed[hidden] { display: none; }
.proto-sig-mark { width: 76px; height: 24px; color: #cfe3f5; flex: 0 0 auto; }
html.theme-light .proto-sig-mark { color: #23527c; }
.proto-sig-meta { white-space: nowrap; }
.proto-sig-clear { background: none; border: 0; color: inherit; opacity: 0.7; cursor: pointer;
  text-decoration: underline; font-size: 0.8125rem; padding: 0; }

/* The line that says why there is no PIN field, or what the save will do with
   what has been chosen. Full width so it sits under the bar's controls rather
   than squeezing them. */
.proto-rx-note { flex: 1 1 100%; opacity: 0.8; }
.proto-rx-note[hidden] { display: none; }

/* ---- row marks ---- */
.proto-rx-ref { white-space: nowrap; opacity: 0.8; }
.proto-rx-ref.is-issued { opacity: 1; font-weight: bold; }
table.proto-meds .highlighter { margin-right: 4px; }

/* ---- adder ---- */
.proto-adder-cols { display: flex; align-items: flex-start; gap: 10px; }
.proto-adder-cols > div { min-width: 0; }
.proto-adder-fill { flex: 1 1 auto; }
.proto-adder-cols h4 { margin: 0 0 6px; font-size: 0.8125rem; }
.proto-adder-cols .btn-list { max-height: 260px; overflow-y: auto; }
.proto-adder-cols .btn-list .li .fade { font-size: 0.75rem; }
.proto-stack { display: flex; flex-direction: column; gap: 5px; }
.proto-adder-note { margin-top: 12px; font-size: 0.8125rem; max-width: 220px; }
.proto-add-picked { margin-bottom: 6px; }

/* ---- edit dialog ---- */
.proto-med-setup { display: flex; align-items: flex-start; gap: 12px; }
.proto-med-setup > div { min-width: 0; }
.proto-med-setup h4 { margin: 0 0 6px; font-size: 0.8125rem; }
.proto-med-setup .btn-list { max-height: 300px; overflow-y: auto; }
.proto-freq-col { flex: 1 1 auto; }
.proto-dose-col input { width: 72px; }

.proto-med-dates { display: flex; align-items: flex-start; gap: 24px; }
.proto-med-dates h4 { margin: 0 0 6px; font-size: 0.8125rem; }
.proto-end-row { display: flex; align-items: center; gap: 18px; }
.proto-quick-row { display: flex; align-items: center; gap: 6px; }
.proto-quick-end fieldset { border: 0; padding: 0; margin: 0 0 4px; display: inline-flex; gap: 2px; flex-wrap: wrap; }
.proto-anchor-days { display: inline-flex; align-items: center; gap: 5px; }
.proto-anchor-days input { width: 52px; }
.proto-anchor-days[hidden] { display: none; }
.proto-rxtaper-col { margin-left: auto; }
.proto-rxtaper-col label { display: block; }

.proto-med-extra { display: flex; align-items: flex-start; gap: 30px; }
.proto-med-extra h4 { margin: 0 0 6px; font-size: 0.8125rem; font-weight: bold; }
.proto-inline-list { display: flex; flex-wrap: wrap; gap: 3px; }
.proto-inline-list label { flex: 0 0 auto; }
.proto-indication-col { flex: 1 1 auto; }

.proto-allergy-bar { padding: 6px 0; }
.proto-allergy-bar h4 { display: inline-block; margin: 0 14px 0 0; }
.proto-allergy-bar .row-list { display: inline-block; margin: 0 14px 0 0; }

.btn-list label.is-on-record .li { opacity: 0.45; }
.proto-adder-cols .btn-list .li { display: block; }
.proto-opt-sub { display: block; font-size: 0.75rem; opacity: 0.7; }
/* IDG runs the confirming action as a full-width green bar with Cancel beside
   it, so the primary action is unmissable and the escape hatch is still there. */
.oe-popup.max .popup-actions { display: flex; gap: 6px; margin-top: 14px; }
.oe-popup.max .popup-actions .green { flex: 1 1 auto; }
.oe-popup.max .oe-popup-content { max-height: 72vh; overflow-y: auto; }

.btn-list.is-disabled { opacity: 0.4; pointer-events: none; }
.proto-quick-end .highlight.as-button { margin: 0 2px 2px 0; }

/* The adder's running selection, and the hint beside the two commit buttons.
   Which button is pressed is what sets source, eye relevance and responsibility
   to supply, so the hint states the consequence rather than leaving it implied. */
.proto-selected { margin-top: 10px; }
.proto-selected h4 { margin-bottom: 4px; }
.proto-sel-row { padding: 2px 0; cursor: pointer; font-size: 0.94em; }
.proto-sel-row:hover { color: #a00; }
.proto-add-hint { color: #666; font-size: 0.9em; margin-right: auto; text-align: left; max-width: 52em; }
.popup-actions.flex-right { display: flex; align-items: center; gap: 8px; }

/* Future-dated rows. Per the DA review: make them as different as possible from
   current medication. Grey and italic throughout, laterality icons included. */
.proto-row.is-planned td { color: #767676; font-style: italic; }
.proto-row.is-planned .oe-lat { opacity: 0.45; filter: grayscale(1); }
.proto-row.is-planned .proto-drug { font-style: italic; }

/* ---------------------------------------------- the prescription event screen */

/* Picking one order and opening it the way it sits on the timeline, rather than
   reading a list of all of them. */
.proto-rx-eventbar {
  display: flex; align-items: center; flex-wrap: wrap; gap: 12px;
  margin: 0 0 10px; padding: 7px 10px; font-size: 0.8125rem;
  background: rgba(255,255,255,0.07);
}
html.theme-light .proto-rx-eventbar { background: rgba(0,0,0,0.05); }
.proto-rx-eventbar select { max-width: 460px; }
.proto-rx-modebtns { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.proto-rx-modebtn {
  background: #55595f; color: #fff; border: 1px solid #6d7278; border-radius: 3px;
  padding: 3px 10px; font-size: 0.8125rem; cursor: pointer;
}
.proto-rx-modebtn.is-on { background: #0075b0; border-color: #4ba3d3; font-weight: bold; }
.proto-rx-onlybox { display: flex; align-items: center; gap: 5px; opacity: 0.85; }

/* The element, once it is inside a prescription event. It is the same element,
   so it is marked rather than restyled: a tint and a rule down the side say you
   are editing the record from inside an order. */
#proto-meds-element.is-rx-edit { border-left: 3px solid #0075b0; }
.proto-el-sub { display: block; font-weight: normal; opacity: 0.8; margin-top: 2px; }
#proto-meds-element.is-rx-edit .proto-el-sub { max-width: 780px; }

/* A row that is on the order being edited, and one whose directions have moved
   away from what that order holds. The mark is on the row because that is where
   the change was made and where it would be undone. */
tr.proto-rx-onorder td:first-child { box-shadow: inset 3px 0 0 #0075b0; }
tr.proto-rx-diffrow td { background: rgba(184,113,44,0.12); }
.proto-rx-diffmark {
  display: block; margin-top: 2px; font-size: 0.6875rem; color: #d08a3c;
}
html.theme-light .proto-rx-diffmark { color: #8a5a15; }

/* The reconciliation table: two versions side by side, decision on the row. */
.proto-rx-edit-table td:nth-child(2) { opacity: 0.85; }
.proto-rx-off { opacity: 0.7; font-style: italic; }
.proto-rx-same { opacity: 0.55; font-size: 0.75rem; }
tr.proto-rx-offrow td { opacity: 0.6; }
tr.proto-rx-newrow td { background: rgba(12,121,21,0.10); }

/* The signing bar on the order itself, rather than on the element, because
   inside an event there is one thing to sign and it is the order. */
.proto-rx-eventsign { margin-top: 12px; border-left-color: #0075b0; }
.proto-rx-eventsign .proto-rx-note { flex: 1 1 100%; }

/* Which thread of a drug you are reading. A drug can run in each eye at once and
   can have earlier courses that were stopped, so the history names the thread it
   is showing and offers the others rather than merging them into one list. */
.proto-thread-pick { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 4px; }
.proto-thread-pick .proto-thread-btn {
  background: #55595f; color: #fff; border: 1px solid #6d7278; border-radius: 3px;
  padding: 3px 10px; font-size: 0.8125rem; cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
}
.proto-thread-pick .proto-thread-btn.is-on { background: #0075b0; border-color: #4ba3d3; font-weight: bold; }
.proto-thread-note { font-size: 0.8125rem; opacity: 0.8; margin: 0 0 8px; }

/* Held for the operation, seen from inside the operation note. Marked apart from
   the ordinary awaiting band because it is the one thing on this screen that has
   to be answered before the note is signed. */
.proto-surgery-band { border-left: 4px solid #d17a1d; }
.proto-surgery-acts { display: block; margin-top: 4px; }
.proto-surgery-acts .proto-btn-confirm { margin-right: 4px; }