/* Layout and functional states added to the preserved April 28 design. */
:root {
  color-scheme: dark;
  --teal: #55c7b6;
  --teal-soft: #173b3b;
  --amber: #efbd69;
  --amber-soft: #3a3020;
  --violet: #b5a0f4;
  --violet-soft: #30284b;
  --coral: #ef8e88;
  --coral-soft: #45282d;
}
body {
  font-family: "Avenir Next", "Segoe UI Variable", "Segoe UI", system-ui, sans-serif;
  font-size: 15px;
  line-height: 1.55;
}
button,
input,
select,
textarea {
  font: inherit;
}
button,
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 34px;
  padding: 6px 12px;
  background: var(--surface-2);
  color: var(--text-2);
  border: 1px solid var(--line);
  border-radius: 6px;
  cursor: pointer;
  text-decoration: none;
  font-weight: 500;
  white-space: normal;
}
button:hover,
.button:hover {
  background: #293852;
  color: var(--text);
}
button:disabled {
  opacity: 0.4;
  cursor: default;
}
.primary,
button.primary {
  background: #356bb4;
  border-color: #6093d5;
  color: #eff6ff;
}
.primary:hover,
button.primary:hover {
  background: #427bc5;
}
.danger {
  color: var(--danger);
}
a {
  color: var(--accent);
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}
h1 {
  font-size: 27px;
  letter-spacing: -0.5px;
  margin: 0;
}
h2 {
  font-size: 19px;
  margin: 0 0 15px;
}
h3 {
  font-size: 15px;
  margin: 0 0 11px;
  font-weight: 600;
}
p {
  margin: 8px 0;
}
input,
select,
textarea {
  display: block;
  width: 100%;
  background: #121c2e;
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: 5px;
  padding: 9px 10px;
  min-height: 36px;
}
select {
  appearance: none;
  padding-right: 12px;
}
input:focus,
select:focus,
textarea:focus {
  outline: 2px solid #5388cf;
  outline-offset: 1px;
}
input[type="checkbox"],
input[type="radio"] {
  display: inline-block;
  width: 16px;
  min-height: 16px;
  height: 16px;
  accent-color: var(--accent);
  margin: 0 7px 0 0;
  vertical-align: middle;
}
label {
  display: block;
  font-size: 13px;
  color: var(--text-2);
  margin-bottom: 12px;
}
label input,
label select,
label textarea {
  margin-top: 5px;
}
.check {
  display: flex;
  align-items: flex-start;
  gap: 2px;
  margin: 9px 0;
  line-height: 1.6;
}
.check input {
  flex-shrink: 0;
  margin-top: 3px;
}
.muted {
  color: #a7b3c9;
}
.small {
  font-size: 12px;
}
.eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.11em;
  font-size: 10px;
  color: var(--text-3);
}
.row {
  display: flex;
  align-items: center;
  gap: 9px;
  flex-wrap: wrap;
}
.between {
  justify-content: space-between;
}
.grow {
  flex: 1;
  min-width: 0;
}
.actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 16px;
}
.grid2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.grid3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
.stack > * + * {
  margin-top: 15px;
}
.panel,
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 18px;
  margin: 0;
}
.panel > h2:first-child,
.panel > h3:first-child,
.panel-title h2,
.panel-title h3 {
  color: #eaf2ff;
}
.panel-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 15px;
}
.panel-title h2,
.panel-title h3 {
  margin: 0;
}
.app {
  grid-template-columns: 208px minmax(0, 1fr);
}
.rail {
  width: auto;
  padding: 20px 12px;
  display: flex;
  flex-direction: column;
  z-index: 5;
}
.brand {
  padding: 4px 6px 24px;
  gap: 10px;
}
.brand-mark {
  border-radius: 0;
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  background: transparent;
}
.brand-mark img { display: block; width: 100%; height: 100%; object-fit: contain; }
.brand-sub {
  font-size: 10px;
}
.nav-link {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #aab6cc;
  padding: 10px 12px;
  border: 1px solid transparent;
  border-radius: 6px;
  margin: 3px 0;
  font-size: 14px;
}
.nav-link:hover {
  background: var(--surface);
  color: var(--text);
  text-decoration: none;
}
.nav-link.active {
  background: #1b3540;
  color: #bff6ec;
  border-color: #286158;
  box-shadow: inset 3px 0 var(--teal);
}
.nav-symbol {
  font-size: 16px;
  width: 19px;
  text-align: center;
  opacity: 0.8;
}
.rail-foot {
  margin-top: auto;
  padding: 20px 8px 0;
  color: var(--text-3);
  font-size: 11px;
}
.rail-foot form {
  margin-top: 14px;
}
.rail-foot button {
  width: 100%;
  background: transparent;
}
.main {
  min-width: 0;
}
.topbar {
  height: 58px;
  padding: 0 25px;
  border-bottom: 1px solid var(--line-soft);
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--bg-elev);
  gap: 12px;
}
.topbar h1 {
  font-size: 15px;
  letter-spacing: 0;
}
.page-schedule .topbar,
.page-checkin .topbar { background: linear-gradient(90deg, #16303a, var(--bg-elev) 58%); border-bottom-color: #2f625e; }
.page-patients .topbar,
.page-chart .topbar { background: linear-gradient(90deg, #272344, var(--bg-elev) 58%); border-bottom-color: #514879; }
.page-checkout .topbar { background: linear-gradient(90deg, #3a2b1d, var(--bg-elev) 58%); border-bottom-color: #735832; }
.page-work .topbar { background: linear-gradient(90deg, #3b242d, var(--bg-elev) 58%); border-bottom-color: #75424c; }
.page-capture .topbar { background: linear-gradient(90deg, #19333c, #2b2744 70%, var(--bg-elev)); border-bottom-color: #456b78; }
.capture-link { color: #d8cfff; background: var(--violet-soft); border-color: #65568e; }
.env {
  color: var(--warn);
  font-size: 10px;
  letter-spacing: 0.04em;
  border: 1px solid #665132;
  padding: 3px 7px;
  border-radius: 4px;
}
.content {
  padding: 24px;
  max-width: 1680px;
  margin: 0 auto;
}
.page-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  margin-bottom: 22px;
}
.page-heading > .row {
  justify-content: flex-end;
}
.date-nav {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #151f32;
}
.date-control {
  width: 158px;
  min-height: 36px;
  padding: 6px 9px;
  border-color: transparent;
  background: transparent;
  font-weight: 600;
}
.date-step,
.date-today {
  min-height: 36px;
  padding: 5px 10px;
  background: transparent;
  border-color: transparent;
  color: #d6e4f8;
}
.date-step {
  min-width: 36px;
  font-size: 24px;
  line-height: 1;
}
.date-today {
  font-size: 13px;
}
.schedule-grid {
  display: grid;
  grid-template-columns: 360px minmax(520px, 1fr);
  gap: 18px;
  align-items: start;
}
.schedule-grid > .queue { background: #1b3034; }
.schedule-grid > .stack > .panel:first-child { background: #282d3d; }
.queue {
  padding: 0;
  overflow: hidden;
}
.queue-head {
  padding: 17px 18px;
  border-bottom: 1px solid var(--line);
}
.queue-item {
  display: block;
  width: 100%;
  border: 0;
  border-bottom: 1px solid var(--line-soft);
  border-radius: 0;
  text-align: left;
  padding: 16px 18px;
  background: transparent;
}
.queue-item.selected {
  background: #1b3540;
  box-shadow: inset 3px 0 var(--teal);
}
.queue-item:last-child {
  border-bottom: 0;
}
.queue-item .name {
  font-size: 15px;
  color: var(--text);
  font-weight: 600;
}
.queue-item .meta {
  font-size: 13px;
  color: #aebbd1;
  margin-top: 5px;
}
.queue-item .clock {
  color: var(--text-2);
  font-variant-numeric: tabular-nums;
  font-size: 13px;
}
.status {
  display: inline-block;
  border: 1px solid #344563;
  border-radius: 4px;
  padding: 2px 7px;
  font-size: 11px;
  white-space: nowrap;
  color: #bdd2f3;
  background: #23324a;
}
.status.arrived,
.status.roomed {
  color: #9de6d7;
  background: var(--teal-soft);
  border-color: #35756d;
}
.status.checkout {
  color: #f6cf8d;
  background: var(--amber-soft);
  border-color: #725a31;
}
.status.completed {
  color: #cbbdf7;
  background: var(--violet-soft);
  border-color: #5f5389;
}
.status.cancelled,
.status.noshow {
  color: #ffb0aa;
  background: var(--coral-soft);
  border-color: #7c4449;
}
.empty {
  padding: 25px 10px;
  color: var(--text-3);
  font-size: 12px;
  text-align: center;
}
.patient-id {
  color: #a1aec4;
  font-size: 12px;
}
.patient-title {
  font-size: 20px;
  margin: 2px 0 7px;
}
.patient-summary {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 15px;
  margin: 20px 0;
}
.patient-summary dt {
  font-size: 11px;
  color: #a1aec4;
  margin-bottom: 4px;
}
.patient-summary dd {
  margin: 0;
  font-size: 14px;
}
.step {
  border-top: 1px solid var(--line-soft);
  padding: 13px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.step .step-name {
  font-weight: 500;
}
.step .step-caption {
  font-size: 12px;
  color: #a7b3c9;
  margin-top: 2px;
}
.event {
  padding: 11px 0;
  border-bottom: 1px solid var(--line-soft);
  font-size: 12px;
  color: #c2ccdc;
}
.event .muted {
  font-size: 11px;
}
.activity {
  padding: 15px;
  background: #302b3b;
}
.activity h3 {
  margin-bottom: 8px;
}
.chart-header {
  padding: 22px 26px 16px;
  border-bottom: 1px solid var(--line);
  background: var(--bg-elev);
}
.chart-header h1 {
  font-size: 22px;
}
.patient-name-row { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.patient-name-row a { font-size: 13px; font-weight: 600; }
.tabs-bar {
  display: flex;
  gap: 26px;
  padding: 0 26px;
  border-bottom: 1px solid var(--line);
  background: var(--bg-elev);
  overflow-x: auto;
}
.chart-tab {
  border: 0;
  border-radius: 0;
  padding: 13px 0;
  background: transparent;
  color: var(--text-3);
  border-bottom: 2px solid transparent;
  white-space: nowrap;
}
.chart-tab.active {
  color: #c8f7ef;
  border-bottom-color: var(--teal);
}
.chart-body {
  padding: 22px 26px;
  max-width: 1500px;
  margin: auto;
}
.visit-ribbon {
  background: #172d37;
  border: 1px solid #2d615e;
  border-radius: 6px;
  padding: 13px 16px;
  margin-bottom: 18px;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.visit-ribbon-main { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.visit-ribbon-main > span { color: #b8c5d7; }
.visit-ribbon .handoff-strip { display: inline; padding: 0; margin: 0; border: 0; border-radius: 0; background: transparent; font-size: inherit; }
.visit-context {
  color: var(--teal);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  margin-bottom: 3px;
}
.patient-overview-body {
  max-width: 1200px;
}
.patient-profile {
  background: linear-gradient(120deg, #202440, var(--surface) 52%, #183238);
}
.patient-profile .patient-summary {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-bottom: 0;
}
.visit-group {
  margin-top: 28px;
}
.section-heading {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}
.section-heading h2 { margin: 0; }
.section-heading span {
  min-width: 27px;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--violet-soft);
  color: #d8cfff;
  text-align: center;
  font-size: 12px;
}
.visit-row {
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr) auto;
  align-items: center;
  gap: 20px;
  min-height: 54px;
  padding: 11px 16px;
  margin-bottom: 7px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #203537;
  color: var(--text);
  text-decoration: none;
}
.visit-row:hover { background: #294448; text-decoration: none; }
.visit-row:focus-visible { outline: 3px solid #7fb8ff; outline-offset: 2px; }
.visit-group:last-child .visit-row { background: #34302a; }
.visit-group:last-child .visit-row:hover { background: #443e35; }
.visit-date { color: #d8e8fb; font-weight: 650; }
.visit-summary { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
.visit-summary strong { white-space: nowrap; }
.visit-summary span { color: #b5c0d1; overflow-wrap: anywhere; }
.fee-group {
  margin-bottom: 16px;
}
#charges-form > .grid3 > .panel:nth-child(1) { background: #b8d6c2; border-color: #d3eadb; color: #17251f; }
#charges-form > .grid3 > .panel:nth-child(2) { background: #ead9a6; border-color: #f5e8bd; color: #292116; }
#charges-form > .grid3 > .panel:nth-child(-n+2) h2,
#charges-form > .grid3 > .panel:nth-child(-n+2) h3,
#charges-form > .grid3 > .panel:nth-child(-n+2) label,
#charges-form > .grid3 > .panel:nth-child(-n+2) .fee-code,
#charges-form > .grid3 > .panel:nth-child(-n+2) .muted,
#charges-form > .grid3 > .panel:nth-child(-n+2) .section-help { color: inherit; }
#charges-form > .grid3 > .panel:nth-child(-n+2) .fee-group h3 { border-bottom-color: #26352d55; }
#charges-form > .grid3 > .panel:nth-child(-n+2) input[type="number"] { background: #132138; color: #fff; border-color: #273b59; }
#charges-form > .grid3 > .stack .panel:nth-child(1) { background: #5b466d; border-color: #826b96; }
#charges-form > .grid3 > .stack .panel:nth-child(2) { background: #2d6665; border-color: #4e8a87; }
#charges-form > .grid3 > .stack .panel:nth-child(3) { background: #795437; border-color: #9b7656; }
#charges-form > .grid3 > .stack .panel h3,
#charges-form > .grid3 > .stack .panel .muted,
#charges-form > .grid3 > .stack .panel .note-text { color: #f6f3ed; }
.fee-group h3 {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-3);
  border-bottom: 1px solid var(--line);
  padding-bottom: 8px;
}
.fee-row {
  display: grid;
  grid-template-columns: 19px 45px minmax(80px, 1fr) 62px;
  align-items: center;
  gap: 7px;
  margin: 5px 0;
  color: var(--text-2);
  font-size: 11px;
}
.diagnosis-panel { margin-top: 18px; background: #282d3d; }
.diagnosis-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 4px 18px; }
.diagnosis-grid .check { padding: 7px 0; border-bottom: 1px solid var(--line-soft); }
.diagnosis-grid strong { display: block; color: var(--text); font-size: 13px; font-weight: 550; }
.diagnosis-grid small { display: block; color: #aab6c9; font-size: 11px; margin-top: 2px; }
.fee-row input[type="number"] {
  padding: 5px;
  min-height: 29px;
  width: 62px;
  text-align: right;
}
.fee-row input[type="checkbox"] {
  margin: 0;
}
.fee-code {
  color: var(--text-3);
  font-variant-numeric: tabular-nums;
}
.total-line {
  display: flex;
  justify-content: space-between;
  padding: 9px 0;
  border-top: 1px solid var(--line-soft);
  font-size: 14px;
}
.total-line.emphasis {
  color: var(--text);
  font-size: 16px;
  font-weight: 600;
}
.timeline {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin: 14px 0;
}
.check-pill {
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 5px 9px;
  color: var(--text-3);
  font-size: 11px;
}
.check-pill.done {
  color: #a2e7da;
  border-color: #39756d;
  background: var(--teal-soft);
}
.note-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.8fr) minmax(250px, 1fr);
  gap: 18px;
}
.note-grid > .panel { background: #203337; }
.note-grid > .stack .panel:nth-child(1) { background: #302c42; }
.note-grid > .stack .panel:nth-child(2) { background: #3b3228; }
.note-grid > .stack .panel:nth-child(3) { background: #3a2930; }
.note-section {
  margin-bottom: 17px;
}
.note-section textarea {
  min-height: 100px;
  resize: vertical;
}
.note-section .row {
  margin-bottom: 7px;
}
.note-section h3 {
  margin: 0;
}
.note-section .draw-toggle {
  min-height: 25px;
  font-size: 10px;
  padding: 3px 7px;
}
.ink-wrap {
  margin: 8px 0;
}
.ink-canvas {
  background: #f7f3e7;
  border: 1px solid #8c856c;
  border-radius: 4px;
  width: 100%;
  height: 180px;
  touch-action: none;
  display: block;
}
.ink-preview {
  max-width: 100%;
  max-height: 230px;
  background: #f7f3e7;
  border-radius: 4px;
}
.note-text {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  color: var(--text-2);
  font-size: 14px;
}
.signed {
  padding: 11px 13px;
  border: 1px solid #345747;
  background: #193027;
  color: #9fd1ae;
  border-radius: 5px;
  font-size: 13px;
  margin-bottom: 15px;
}
.form-section {
  margin-bottom: 14px;
}
.form-section > summary {
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  padding: 15px 18px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 6px;
  list-style: none;
}
.form-section > summary::marker {
  display: none;
}
.section-body {
  padding: 18px;
  border: 1px solid var(--line);
  border-top: 0;
  background: var(--bg-elev);
  border-radius: 0 0 6px 6px;
}
.form-section:nth-of-type(4n + 1) > summary { background: #203638; }
.form-section:nth-of-type(4n + 2) > summary { background: #3b3227; }
.form-section:nth-of-type(4n + 3) > summary { background: #312d43; }
.form-section:nth-of-type(4n) > summary { background: #3b2930; }
.choice-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0 14px;
}
.choice-grid label {
  font-size: 13px;
}
.repeat-row {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr 32px;
  gap: 7px;
  margin: 7px 0;
}
.repeat-row input {
  font-size: 11px;
}
.repeat-row button {
  padding: 4px;
  min-height: 32px;
}
.sticky-actions {
  position: sticky;
  bottom: 0;
  padding: 12px 16px;
  background: #131c2ef2;
  backdrop-filter: blur(10px);
  border: 1px solid var(--line);
  border-radius: 6px;
  z-index: 3;
  margin-top: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.error {
  color: #ffb0ac;
  background: #4a232a;
  border: 1px solid #78404a;
  padding: 11px;
  border-radius: 5px;
  font-size: 12px;
}
.hint {
  background: #182842;
  border: 1px solid #2c4266;
  padding: 10px 13px;
  border-radius: 5px;
  font-size: 11px;
  color: var(--text-2);
}
.consent-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  padding: 16px 0;
  border-bottom: 1px solid var(--line-soft);
}
.consent-row p {
  font-size: 13px;
  color: #b4c0d4;
}
.patient-table {
  width: 100%;
  border-collapse: collapse;
}
.patient-table tbody tr:hover { background: #202e46; }
.patient-table tbody tr:nth-child(odd) { background: #1b2b36; }
.patient-table tbody tr:nth-child(even) { background: #25293a; }
.patient-table th {
  text-align: left;
  color: var(--text-3);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 500;
  border-bottom: 1px solid var(--line);
  padding: 10px 12px;
}
.patient-table td {
  padding: 14px 12px;
  border-bottom: 1px solid var(--line-soft);
  font-size: 14px;
}
.search {
  max-width: 300px;
}
.work-grid {
  display: grid;
  grid-template-columns: 330px minmax(0, 1fr);
  gap: 18px;
}
.work-grid > .queue { background: #332a32; }
.work-grid > .stack .panel:first-child { background: #302c42; }
.ledger-row {
  padding: 12px 0;
  border-bottom: 1px solid var(--line-soft);
  font-size: 14px;
}
.ledger-row .small {
  margin-top: 4px;
}
.attachments {
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.attachments audio {
  max-width: 100%;
  height: 34px;
}
dialog {
  background: var(--bg-elev);
  color: var(--text);
  border: 1px solid #435574;
  border-radius: 8px;
  padding: 0;
  max-width: min(620px, calc(100vw - 24px));
  width: 620px;
  max-height: 90vh;
  box-shadow: 0 25px 100px #0009;
}
dialog::backdrop {
  background: #030916b8;
  backdrop-filter: blur(3px);
}
.dialog-head {
  padding: 18px 22px;
  border-bottom: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}
.dialog-head h2 {
  margin: 0;
}
.dialog-body {
  padding: 21px;
}
.dialog-body .document {
  white-space: pre-wrap;
  border: 1px solid var(--line);
  padding: 17px;
  max-height: 260px;
  overflow: auto;
  font-size: 13px;
  line-height: 1.8;
  margin-bottom: 18px;
}
#notice {
  position: fixed;
  bottom: 20px;
  right: 20px;
  max-width: 450px;
  z-index: 100;
  background: #223b36;
  border: 1px solid #4b7565;
  border-radius: 6px;
  color: #d1eddf;
  box-shadow: 0 10px 35px #0006;
  padding: 12px 18px;
  display: none;
}
#notice.error {
  background: #4a232a;
  color: #ffceca;
  border-color: #78404a;
}
.loading {
  padding: 50px;
  color: var(--text-3);
}
.login-page {
  min-height: 100vh;
  display: grid;
  place-items: center;
  background: radial-gradient(ellipse at 30% 0%, #1b2b45, #0f172a 65%);
}
.login-card {
  width: min(440px, calc(100vw - 36px));
  padding: 35px;
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 20px 90px #0004;
}
.login-card .brand {
  padding-left: 0;
}
.login-card h1 {
  font-size: 23px;
  margin: 10px 0;
}
.login-help {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #aab7cc;
  font-size: 13px;
  border-top: 1px solid var(--line-soft);
  padding-top: 14px;
  margin-top: 20px;
}
.login-card form {
  margin-top: 26px;
}
.login-card .primary {
  width: 100%;
  margin-top: 8px;
}
code {
  color: var(--text-2);
}
.capture-card {
  max-width: 700px;
  margin: auto;
  background: linear-gradient(145deg, #202842, var(--surface) 55%, #173638);
}
.capture-controls button[data-action="record-start"] { background: #257b70; border-color: #4bb7a8; color: #f0fffb; }
.capture-controls button[data-action="record-pause"] { background: #6a4d20; border-color: #b7883e; color: #fff2d5; }
.capture-controls button[data-action="record-stop"] { background: #743b45; border-color: #b9606d; color: #ffe9ec; }
button[data-action="accept"], button[data-action="status"] { background: #276f66; border-color: #48a99c; color: #edfffb; }
button[data-action="payment"], button[data-action="day-close"] { background: #6b5025; border-color: #ae823b; color: #fff2d8; }
button[data-action="cancel"], button[data-action="revoke"] { color: #ffc2bd; border-color: #7c4449; }
.print-actions {
  margin: 20px;
}
.capture-state {
  font-size: 12px;
  color: var(--warn);
  margin: 12px 0;
}
.filter-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 15px;
}
.filter-row select {
  width: 180px;
}
.section-help {
  font-size: 13px;
  color: #aebbd0;
  margin-bottom: 15px;
}
.danger-zone {
  border-top: 1px solid var(--line);
  margin-top: 20px;
  padding-top: 16px;
}
@media (min-width: 1700px) {
  .schedule-grid {
    grid-template-columns: 380px minmax(560px, 1fr);
  }
}
@media (max-width: 1300px) {
  .schedule-grid {
    grid-template-columns: 290px minmax(0, 1fr);
  }
  .activity {
    display: none;
  }
  .app {
    grid-template-columns: 185px minmax(0, 1fr);
  }
  .rail {
    padding: 18px 8px;
  }
  .brand-name {
    font-size: 13px;
  }
  .brand-sub {
    font-size: 9px;
  }
  .content {
    padding: 20px;
  }
  .fee-row {
    grid-template-columns: 17px 40px minmax(60px, 1fr) 55px;
  }
  .fee-row input[type="number"] {
    width: 55px;
  }
  .grid3 {
    gap: 11px;
  }
  .chart-body {
    padding: 20px;
  }
  .chart-header {
    padding: 20px;
  }
  .tabs-bar {
    padding: 0 20px;
    gap: 22px;
  }
}
@media (max-width: 1000px) {
  .app {
    grid-template-columns: 70px minmax(0, 1fr);
  }
  .rail {
    padding: 18px 8px;
  }
  .brand {
    padding: 0 9px 22px;
  }
  .brand-copy,
  .nav-label,
  .rail-section,
  .rail-foot .staff-name,
  .rail-foot .role-name {
    display: none;
  }
  .nav-link {
    justify-content: center;
    padding: 11px 8px;
  }
  .nav-symbol {
    font-size: 20px;
  }
  .rail-foot {
    padding: 15px 0;
  }
  .rail-foot button {
    font-size: 9px;
    padding: 4px;
  }
  .schedule-grid {
    grid-template-columns: 260px minmax(0, 1fr);
    gap: 12px;
  }
  .grid3 {
    grid-template-columns: 1fr 1fr;
  }
  .note-grid {
    grid-template-columns: 1fr;
  }
  .choice-grid {
    grid-template-columns: 1fr 1fr;
  }
  .work-grid {
    grid-template-columns: 260px minmax(0, 1fr);
  }
  .content {
    padding: 16px;
  }
  .topbar {
    padding: 0 18px;
  }
  .patient-summary {
    gap: 10px;
  }
  .diagnosis-grid { grid-template-columns: 1fr 1fr; }
  .patient-profile .patient-summary { grid-template-columns: 1fr 1fr; }
  .visit-row { grid-template-columns: 170px minmax(0, 1fr) auto; }
}
@media (max-width: 700px) {
  .app {
    display: block;
  }
  .rail {
    position: sticky;
    top: 0;
    width: 100%;
    height: auto;
    padding: 7px 10px;
    flex-direction: row;
    align-items: center;
    border-bottom: 1px solid var(--line);
    border-right: 0;
    justify-content: space-between;
  }
  .brand {
    padding: 0;
    margin-right: 6px;
  }
  .brand-mark {
    width: 28px;
    height: 28px;
    font-size: 13px;
  }
  .rail nav {
    display: flex;
    gap: 3px;
  }
  .nav-link {
    margin: 0;
    padding: 5px 9px;
    min-height: 34px;
  }
  .nav-symbol {
    font-size: 16px;
  }
  .rail-foot {
    padding: 0;
    margin: 0;
  }
  .rail-foot form {
    margin: 0;
  }
  .rail-foot button {
    min-height: 29px;
    padding: 3px;
  }
  .topbar {
    height: 48px;
    padding: 0 14px;
  }
  .env {
    font-size: 8px;
  }
  .schedule-grid,
  .work-grid,
  .grid3 {
    grid-template-columns: 1fr;
  }
  .queue {
    max-height: 300px;
    overflow: auto;
  }
  .grid2 {
    gap: 10px;
  }
  .content,
  .chart-body {
    padding: 14px;
  }
  .page-heading {
    align-items: flex-start;
    flex-direction: column;
    margin-bottom: 16px;
  }
  .page-heading > .row {
    width: 100%;
    justify-content: flex-start;
  }
  .page-heading h1 {
    font-size: 20px;
  }
  .chart-header {
    padding: 16px 14px;
  }
  .tabs-bar {
    padding: 0 14px;
    gap: 22px;
  }
  .chart-tab {
    font-size: 12px;
  }
  .choice-grid {
    grid-template-columns: 1fr 1fr;
  }
  .patient-table th:nth-child(3),
  .patient-table td:nth-child(3) {
    display: none;
  }
  .patient-table td,
  .patient-table th {
    padding: 10px 7px;
    font-size: 11px;
  }
  .patient-profile .patient-summary { grid-template-columns: 1fr; }
  .diagnosis-grid { grid-template-columns: 1fr; }
  .visit-row { grid-template-columns: 1fr auto; gap: 6px 12px; padding: 13px 14px; }
  .visit-summary { grid-column: 1 / -1; flex-wrap: wrap; gap: 4px 8px; }
  .visit-row > .status { grid-column: 2; grid-row: 1; justify-self: end; }
  .repeat-row {
    grid-template-columns: 1fr 1fr;
  }
  .repeat-row button {
    width: 32px;
  }
  .panel,
  .card {
    padding: 14px;
  }
  .fee-row {
    grid-template-columns: 19px 46px minmax(80px, 1fr) 65px;
  }
  .fee-row input[type="number"] {
    width: 65px;
  }
  .sticky-actions {
    padding: 10px;
    bottom: 0;
  }
  .sticky-actions button {
    font-size: 11px;
  }
  .dialog-body {
    padding: 16px;
  }
  #notice {
    left: 12px;
    right: 12px;
    bottom: 12px;
    max-width: none;
  }
  .patient-title {
    font-size: 19px;
  }
  .date-control {
    width: 140px;
  }
  .tablet-ui .date-nav {
    gap: 2px;
  }
  .tablet-ui .date-step {
    min-width: 38px;
    padding: 6px;
  }
  .tablet-ui .date-today {
    padding: 6px 9px;
  }
  .grid2.mobile-stack {
    grid-template-columns: 1fr;
  }
  .panel-title {
    align-items: flex-start;
  }
  .section-body {
    padding: 14px;
  }
}
.main {
  display: block;
}
.content {
  width: 100%;
}
.chart-body {
  width: 100%;
}
.stack {
  display: flex;
  flex-direction: column;
  gap: 15px;
}
.stack > * + * {
  margin-top: 0;
}
.fee-row {
  grid-template-columns: 19px 45px minmax(65px, 1fr) 73px;
}
.fee-row input[type="number"] {
  width: 73px;
  padding: 5px 6px;
  -moz-appearance: textfield;
}
.fee-row input::-webkit-inner-spin-button,
.fee-row input::-webkit-outer-spin-button {
  appearance: none;
  margin: 0;
}
.chart-header .eyebrow {
  margin-bottom: 3px;
}
.patient-summary dt {
  margin-bottom: 2px;
}
.login-card code {
  font-size: 11px;
}
@media (max-width: 700px) {
  .content,
  .chart-body {
    padding: 14px;
  }
  .fee-row {
    grid-template-columns: 19px 45px minmax(65px, 1fr) 73px;
  }
}

.repeat-row[data-repeat-row="medications_table"] {
  grid-template-columns: 1.3fr 1fr 1fr 90px 32px;
}
.repeat-row select {
  font-size: 11px;
  padding: 6px;
  min-height: 32px;
}
.source-grid {
  display: grid;
  gap: 8px;
}
.source-row {
  display: grid;
  grid-template-columns: minmax(220px, 2fr) minmax(150px, 1fr);
  gap: 10px;
  align-items: end;
}
.source-row-wide {
  grid-template-columns: minmax(220px, 2fr) repeat(3, minmax(130px, 1fr));
}
.source-row > span {
  padding: 0 0 9px;
}
@media (max-width: 1000px) {
  .repeat-row[data-repeat-row="medications_table"] {
    grid-template-columns: 1fr 1fr;
  }
  .repeat-row[data-repeat-row="medications_table"] button {
    width: 32px;
  }
  .source-row,
  .source-row-wide {
    grid-template-columns: 1fr;
  }
}

/* Mobile visit work keeps the existing navy palette and five chart tabs. */
.handoff-strip{display:flex;flex-wrap:wrap;gap:12px;align-items:center;padding:12px 16px;margin-bottom:16px;border:1px solid var(--border,#2b3347);border-radius:8px;background:#1b2437;font-size:13px}
.handoff-meta{font-size:12px;color:#aab7cf;margin-top:8px}
.capture-state{font-variant-numeric:tabular-nums;min-height:32px}
.capture-controls button{min-height:48px;min-width:94px}
@media(max-width:1100px){.chart-header{position:sticky;top:0;z-index:8;background:#141b2b}.tabs-bar{overflow-x:auto;white-space:nowrap}.note-grid{grid-template-columns:minmax(0,1fr)}.ink-canvas{min-height:260px}.note-section textarea{min-height:110px}.handoff-strip .button{margin-left:auto}}
@media(max-width:600px){button,.button,select,input:not([type=checkbox]){min-height:44px}input,textarea,select{font-size:16px}.chart-header .row.between{display:block}.chart-header .row{flex-wrap:wrap;margin-top:8px}.chart-header h1{font-size:23px}.visit-ribbon{display:block}.visit-ribbon>.row{margin-top:10px;flex-wrap:wrap}.grid3,.grid2{grid-template-columns:1fr}.note-section .row.between{flex-wrap:wrap}.capture-card{padding:16px}.handoff-strip{align-items:flex-start;flex-direction:column}.handoff-strip .button{margin-left:0}dialog{width:calc(100vw - 20px);max-height:90dvh}.dialog-body{overflow-y:auto}.ink-canvas{min-height:230px}.chart-body{padding:12px}}

select{appearance:none;-webkit-appearance:none;background-image:none}

@media(max-width:600px){.capture-controls{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.capture-controls button{min-width:0;padding:10px 6px;font-size:12px}}

/* Preserve native hidden semantics when component display rules apply. */
[hidden] { display: none !important; }

.ink-tools{gap:8px;flex-wrap:wrap;margin-bottom:12px}.ink-expanded{position:fixed;inset:12px;z-index:100;background:var(--surface);padding:18px;overflow:auto;box-shadow:0 0 0 100vmax #080d19e8}.ink-expanded .ink-canvas{height:auto;width:100%}.ink-canvas{touch-action:none;background:#fff}.ink-expanded .ink-tools button{min-height:44px}

.drawing-sheet-title{display:none}.drawing-open{overflow:hidden}.ink-expanded{inset:0;border-radius:0;display:flex;flex-direction:column;align-items:center;padding:12px;overflow:auto}.ink-expanded .drawing-sheet-title{display:flex;width:100%;justify-content:space-between;align-items:center;gap:16px;margin-bottom:10px}.ink-expanded .drawing-sheet-title button{min-height:46px;min-width:90px}.ink-expanded .ink-tools{flex-shrink:0;justify-content:center}.ink-expanded [data-action=ink-expand]{display:none}.ink-expanded .ink-canvas{width:min(100%,calc((100dvh - 210px)*0.7725));height:auto;min-height:0;flex-shrink:0;touch-action:none;user-select:none;-webkit-user-select:none;border-radius:2px;box-shadow:0 4px 24px #0004}.ink-wrap:not(.ink-expanded) .ink-canvas{max-height:220px;width:auto;max-width:100%;min-height:0}.ink-expanded>label.check{margin:8px 0}.ink-expanded>[data-action=clear-drawing]{min-height:40px}

/* Tablet workspace: full-width controls, readable notes, no desktop rail. */
.tablet-site-nav{display:none}.tablet-ui{display:block;font-size:18px;line-height:1.55}.tablet-ui .rail{display:none}.tablet-ui .main{min-width:0;margin:0;width:100%}.tablet-ui .tablet-site-nav{display:flex;gap:20px;align-items:center;flex-wrap:wrap;padding:14px 20px;border-bottom:1px solid var(--line);font-size:17px}.tablet-site-nav form{margin:0}.tablet-site-nav span{margin-left:auto}.tablet-ui button,.tablet-ui .button,.tablet-ui select{min-height:50px;font-size:17px;padding:10px 16px}.tablet-ui input,.tablet-ui textarea{font-size:19px;min-height:50px;line-height:1.6}.tablet-ui input[type=checkbox]{width:24px;min-height:24px;height:24px}.tablet-ui .small,.tablet-ui .muted.small{font-size:16px}.tablet-ui .chart-body,.tablet-ui .content{padding:20px}.tablet-ui .note-grid{display:block}.tablet-ui .note-grid>.panel{padding:24px}.tablet-ui .note-grid>aside{margin-top:24px}.tablet-ui h3{font-size:21px}.tablet-ui .note-section{padding:20px 0}.tablet-ui .note-section textarea{min-height:150px}.tablet-ui .note-section .row.between{gap:12px;flex-wrap:wrap}.tablet-ui .note-section .draw-toggle{font-size:17px;min-height:48px}.tablet-ui .grid3,.tablet-ui .grid2{gap:18px}.tablet-ui .topbar{padding:12px 20px}.tablet-clinical .topbar{display:none}.tablet-patient{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px}.tablet-patient h1{font-size:29px;margin:0}.tablet-patient span{font-size:17px;color:var(--text-2)}.tablet-primary{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;padding:0 20px}.tablet-primary button,.tablet-primary a{font-size:21px;min-height:62px;border:1px solid var(--line);border-radius:8px}.tablet-secondary{display:flex;gap:12px;padding:12px 20px}.tablet-clinical:not(.tablet-more-open) .chart-header,.tablet-clinical:not(.tablet-more-open) .tabs-bar,.tablet-clinical:not(.tablet-more-open) .handoff-strip,.tablet-clinical:not(.tablet-more-open) .visit-ribbon{display:none}.visit-details{margin-bottom:20px}.visit-details>summary{font-size:18px;min-height:48px;cursor:pointer}.visit-details:not([open]){border-bottom:1px solid var(--line)}.tablet-ui .ink-expanded{z-index:200}.tablet-ui .ink-expanded .ink-tools button{font-size:16px}.tablet-ui .ink-expanded .ink-canvas{width:min(100%,calc((100dvh - 250px)*0.7725));min-height:0}.tablet-ui .ink-expanded .drawing-sheet-title{font-size:18px}.tablet-ui .ink-expanded .drawing-sheet-title button{font-size:20px;min-height:54px;min-width:110px}@media(max-width:600px){.tablet-ui .tablet-site-nav{gap:12px;padding:10px;font-size:16px}.tablet-ui .tablet-site-nav span{display:none}.tablet-primary{gap:8px;padding:0 12px}.tablet-primary button,.tablet-primary a{font-size:18px;padding:10px 6px}.tablet-patient{padding:16px 12px}.tablet-secondary{padding:12px}.tablet-ui .chart-body{padding:12px}.tablet-ui .note-grid>.panel{padding:16px}}

.tablet-clinical .chart-header{display:none}.tablet-clinical .visit-ribbon [data-action=status]{display:none}

.explainer {
  margin: 12px 0;
  padding: 12px 15px;
  border: 1px solid var(--line);
  border-radius: 6px;
}
.explainer summary {
  font-weight: 600;
  cursor: pointer;
}
.explainer p {
  margin: 8px 0 0;
  font-size: 14px;
  line-height: 1.5;
}
/* Compliance */
.compliance-banner{margin-bottom:14px;border-left:4px solid var(--amber,#805d1c)}
.compliance-banner.compliance-overdue{border-left-color:var(--danger,#a13d34);background:var(--coral-soft,#fae9e5)}
.compliance-item .actions{margin-top:6px}
.compliance-audit{margin-top:8px;font-size:13px}

/* Website */
.site-grid{--site-h:calc(100vh - 200px);display:grid;grid-template-columns:240px minmax(0,1fr) 320px;gap:16px;align-items:start}
.site-grid>.stack{position:sticky;top:12px;max-height:var(--site-h);overflow:auto;margin:0}
.site-grid>.stack>.panel{margin:0}
.site-pages{display:flex;flex-direction:column;min-height:0}
.site-preview-panel{position:sticky;top:12px;padding:0;overflow:hidden;margin:0}
#site-frame{display:block;width:100%;height:var(--site-h);min-height:480px;border:0;background:#fff}
.site-diff{margin-top:8px;padding:8px;border-radius:6px;background:rgba(0,0,0,.03);font-size:13px;line-height:1.5;max-height:240px;overflow:auto}
.site-diff del{background:#f6d5d1;color:#7a1f14}
.site-diff ins{background:#d6ecd9;color:#1d5b2a;text-decoration:none}
.site-edit{max-height:65vh;overflow:auto}
@media (max-width:1200px){.site-grid{grid-template-columns:1fr}.site-grid>.stack,.site-preview-panel{position:static;max-height:none}#site-frame{height:70vh}}
.site-grid>.stack:first-child{overflow:hidden;display:flex;flex-direction:column;gap:16px}
.site-grid>.stack:first-child{height:var(--site-h)}
.site-grid>.stack:first-child>.panel{flex:1 1 0;min-height:0;display:flex;flex-direction:column;margin:0}
@media (max-width:1200px){.site-grid>.stack:first-child{height:auto}.site-grid>.stack:first-child>.panel{flex:none}}
.site-list{overflow:auto;min-height:0;flex:1 1 0}
.site-list>*{flex-shrink:0}
.nav-alert{margin-left:auto;background:#a13d34;color:#fff;border-radius:999px;font-size:11px;line-height:18px;min-width:18px;padding:0 5px;text-align:center}
tr:has(> td a[href]:only-of-type),.ledger-row:has(a[href]){cursor:pointer}
tbody tr:has(a[href]):hover{background:rgba(20,98,83,.06)}