/* ————— Health Gate clinician portal —————
   Palette
     ink        #16232B  text
     paper      #F6F8F7  page
     surface    #FFFFFF  cards
     teal       #0E5A54  primary / gate open
     mist       #DDEBE8  teal tint
     amber      #B0721B  timer warnings
     claret     #7A2E3B  sign-off (a permanent act)
     rule       #D8E0DE  hairlines
   Type: IBM Plex Serif (patient banner) / Plex Sans (body) / Plex Mono (data)
*/

:root {
  --ink: #16232B;
  --ink-soft: #46565F;
  --paper: #F6F8F7;
  --surface: #FFFFFF;
  --teal: #0E5A54;
  --teal-deep: #093F3B;
  --mist: #DDEBE8;
  --amber: #B0721B;
  --amber-tint: #F6EBD8;
  --claret: #7A2E3B;
  --claret-deep: #5C1F2B;
  --rule: #D8E0DE;
  --danger: #9E2B25;
  --radius: 6px;
  --gate-h: 44px;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: "IBM Plex Sans", system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink);
  background: var(--paper);
}
.mono { font-family: "IBM Plex Mono", monospace; }
.serif { font-family: "IBM Plex Serif", serif; }
h1, h2 { margin: 0; font-weight: 600; }
:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }

/* ————— Gate strip (signature element) ————— */
.gate {
  position: sticky; top: 0; z-index: 10;
  height: var(--gate-h);
  display: flex; align-items: center; gap: 10px;
  padding: 0 20px;
  font-size: 13.5px; font-weight: 500;
  letter-spacing: 0.01em;
  border-bottom: 1px solid transparent;
}
.gate__dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.gate__timer { margin-left: auto; font-size: 13px; }

.gate--idle   { background: var(--ink); color: #C7D2D6; }
.gate--idle .gate__dot { background: #5A6B73; }

.gate--open   { background: var(--teal-deep); color: #E8F2F0; }
.gate--open .gate__dot { background: #6FD3B8; }
@media (prefers-reduced-motion: no-preference) {
  .gate--open .gate__dot { animation: pulse 2s ease-in-out infinite; }
  @keyframes pulse { 50% { opacity: 0.35; } }
}

.gate--warning { background: var(--amber); color: #FFF8EC; }
.gate--warning .gate__dot { background: #FFE1A8; }

.gate--closed { background: var(--ink); color: #C7D2D6; }
.gate--closed .gate__dot { background: var(--claret); }

/* ————— Layout ————— */
.view { max-width: 1080px; margin: 0 auto; padding: 40px 20px 80px; }

/* ————— Redeem ————— */
.redeem-card {
  max-width: 480px; margin: 4vh auto 0;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-top: 3px solid var(--teal);
  border-radius: var(--radius);
  padding: 36px 36px 28px;
}
.redeem-card__title { font-size: 24px; }
.redeem-card__lede { color: var(--ink-soft); font-size: 14.5px; margin: 10px 0 26px; }
.redeem-card__legal { color: var(--ink-soft); font-size: 12.5px; margin: 18px 0 0; }

.field { margin-bottom: 18px; }
.field label, .identity legend {
  display: block; font-size: 12.5px; font-weight: 600;
  letter-spacing: 0.02em; color: var(--ink-soft); margin-bottom: 6px;
}
.field input, .field select {
  width: 100%; padding: 10px 12px;
  font: inherit; color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--rule); border-radius: var(--radius);
}
.field input:focus, .field select:focus { border-color: var(--teal); outline: none; }
.field__hint { font-size: 12px; color: var(--ink-soft); margin: 5px 0 0; }
.field-row { display: flex; gap: 12px; }
.field--grow { flex: 1; }

.identity { border: none; padding: 18px 0 0; margin: 6px 0 0; border-top: 1px solid var(--rule); }

.code-cells { display: flex; gap: 8px; }
.code-cell {
  width: 46px; height: 54px; text-align: center;
  font-size: 22px !important; font-weight: 500;
  padding: 0 !important;
}

.btn {
  font: inherit; font-weight: 600; font-size: 15px;
  padding: 11px 18px; border-radius: var(--radius);
  border: 1px solid transparent; cursor: pointer;
  transition: background-color 120ms ease;
}
.btn--primary { width: 100%; background: var(--teal); color: #fff; margin-top: 8px; }
.btn--primary:hover { background: var(--teal-deep); }
.btn--ghost { background: var(--surface); color: var(--teal); border-color: var(--teal); }
.btn--ghost:hover { background: var(--mist); }
.btn--signoff { background: var(--claret); color: #fff; }
.btn--signoff:hover { background: var(--claret-deep); }
.btn[disabled] { opacity: 0.55; cursor: not-allowed; }

.form-error {
  background: #F9E9E7; color: var(--danger);
  border: 1px solid #E5C4C0; border-radius: var(--radius);
  font-size: 13.5px; padding: 10px 12px; margin: 0 0 14px;
}

/* ————— Patient banner ————— */
.patient-banner {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 20px; flex-wrap: wrap;
  background: var(--surface);
  border: 1px solid var(--rule); border-left: 4px solid var(--teal);
  border-radius: var(--radius);
  padding: 18px 22px; margin-bottom: 22px;
}
.patient-banner__name { font-size: 26px; font-weight: 600; }
.patient-banner__meta { font-size: 13px; color: var(--ink-soft); margin: 4px 0 0; }
.allergy-chip {
  display: inline-block; margin-left: 8px;
  background: var(--amber-tint); color: #7A5212;
  border: 1px solid #E3CC9E; border-radius: 999px;
  font-size: 12.5px; font-weight: 600; padding: 4px 12px;
}
.allergy-chip--none { background: var(--mist); color: var(--teal-deep); border-color: #BCD6D0; }

/* ————— Consultation grid ————— */
.consult-grid { display: grid; grid-template-columns: 1fr 380px; gap: 22px; align-items: start; }
@media (max-width: 900px) { .consult-grid { grid-template-columns: 1fr; } }

.pane {
  background: var(--surface);
  border: 1px solid var(--rule); border-radius: var(--radius);
  padding: 20px 22px; margin-bottom: 18px;
}
.pane__title {
  font-size: 13px; font-weight: 600; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--teal-deep);
  padding-bottom: 10px; margin-bottom: 14px;
  border-bottom: 1px solid var(--rule);
}
.pane__body { margin: 0; font-size: 15px; }

.vitals-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 14px; }
.vital { }
.vital__value { font-family: "IBM Plex Mono", monospace; font-size: 20px; font-weight: 500; }
.vital__unit { font-size: 12px; color: var(--ink-soft); margin-left: 3px; }
.vital__label { font-size: 12.5px; color: var(--ink-soft); }
.vital__taken { font-size: 11.5px; color: var(--ink-soft); opacity: 0.8; }

.med-list, .history-list { list-style: none; margin: 0; padding: 0; }
.med-list li, .history-list li {
  padding: 10px 0; border-bottom: 1px solid var(--rule);
  font-size: 14.5px; display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap;
}
.med-list li:last-child, .history-list li:last-child { border-bottom: none; }
.med__dose { font-family: "IBM Plex Mono", monospace; font-size: 13px; color: var(--ink-soft); }
.hist__date { font-family: "IBM Plex Mono", monospace; font-size: 12.5px; color: var(--ink-soft); }

.doc-list { list-style: none; margin: 0; padding: 0; }
.doc-list li {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 10px 0; border-bottom: 1px solid var(--rule); font-size: 14.5px;
}
.doc-list li:last-child { border-bottom: none; }
.doc__meta { font-family: "IBM Plex Mono", monospace; font-size: 12px; color: var(--ink-soft); }
.doc__open {
  font: inherit; font-size: 13.5px; font-weight: 600;
  color: var(--teal); background: none; border: 1px solid var(--teal);
  border-radius: var(--radius); padding: 6px 12px; cursor: pointer;
}
.doc__open:hover { background: var(--mist); }
.doc__open[disabled] { opacity: 0.55; cursor: wait; }

/* ————— Summary editor ————— */
.summary { position: sticky; top: calc(var(--gate-h) + 16px); }
.summary__inner {
  background: var(--surface);
  border: 1px solid var(--rule); border-top: 3px solid var(--claret);
  border-radius: var(--radius); padding: 20px 22px;
}
#summary-text {
  width: 100%; min-height: 260px; resize: vertical;
  font: inherit; font-size: 14.5px; line-height: 1.6;
  padding: 12px; color: var(--ink);
  border: 1px solid var(--rule); border-radius: var(--radius);
}
#summary-text:focus { border-color: var(--teal); outline: none; }
.summary__status { font-size: 12.5px; color: var(--ink-soft); margin: 8px 0 14px; }
.summary__actions { display: flex; gap: 10px; flex-wrap: wrap; }
.summary__actions .btn { flex: 1; white-space: nowrap; }
.summary__note { font-size: 12.5px; color: var(--ink-soft); margin: 14px 0 0; }
.summary .form-error { margin-top: 14px; }

/* ————— Closed ————— */
.closed-card {
  max-width: 520px; margin: 10vh auto 0; text-align: center;
  background: var(--surface); border: 1px solid var(--rule);
  border-top: 3px solid var(--claret); border-radius: var(--radius);
  padding: 44px 40px;
}
.closed-card__title { font-size: 28px; }
.closed-card__body { color: var(--ink-soft); font-size: 15px; margin: 14px 0 0; }
.closed-card__audit { font-size: 12.5px; color: var(--ink-soft); margin: 22px 0 0; }

/* Trends — sparkline cards (deep teal, mono values, matching the gate look) */
.trends-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.trend { border: 1px solid var(--rule, #d8d5cd); border-radius: 8px; padding: 12px 14px; color: var(--teal, #0f5c5a); }
.trend__head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.trend__label { font-family: "IBM Plex Sans", sans-serif; font-weight: 600; color: var(--ink, #1a1a18); }
.trend__latest { font-family: "IBM Plex Mono", monospace; font-size: 0.95rem; }
.trend__chart { width: 100%; height: 56px; margin-top: 6px; display: block; }
.trend__range { font-family: "IBM Plex Mono", monospace; font-size: 0.72rem; color: #6b6963; margin-top: 4px; }