/**
 * Patient portal.
 *
 * Application styling, not marketing styling. Nothing here should look
 * like an advertisement.
 *
 * Sizes are deliberate: many of these patients are over fifty, and some
 * are being treated for arthritis. Nothing drops below 15px and no target
 * is smaller than 48px.
 */

.khb-portal {
  --p-blue:  var(--kh-blue,  #17557F);
  --p-ink:   var(--kh-ink,   #10222E);
  --p-slate: var(--kh-slate, #4C6373);
  --p-mist:  var(--kh-mist,  #C7D5DD);
  --p-wash:  var(--kh-wash,  #E9F2F8);
  --p-cloud: var(--kh-cloud, #EEF3F6);
  max-width: 640px;
  margin: 0 auto;
  font-size: 1.0625rem;
  line-height: 1.7;
}

.khb-portal__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  padding-bottom: 1.25rem;
  margin-bottom: 1.5rem;
  border-bottom: 1px solid var(--p-mist);
}
.khb-portal__head h1 { margin: 0 0 .35rem; font-size: 1.75rem; }
.khb-portal__logout { margin: 0; }

.khb-portal .khb-card,
.khb-portal section.khb-card {
  background: #fff;
  border: 1px solid var(--p-mist);
  border-radius: 12px;
  padding: 1.5rem;
  margin-bottom: 1.5rem;
}
.khb-portal .khb-card h2 { font-size: 1.25rem; margin: 0 0 1rem; }

.khb-next { background: var(--p-wash); }

.khb-quiet { font-size: .9375rem; color: var(--p-slate); }

/* Action tiles — a word on every one, never an icon alone. */
.khb-tiles {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .75rem;
  margin-bottom: 1.5rem;
}
@media (max-width: 480px) { .khb-tiles { grid-template-columns: 1fr; } }

.khb-tile {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 64px;
  padding: .75rem 1rem;
  background: #fff;
  border: 2px solid var(--p-mist);
  border-radius: 10px;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  color: var(--p-blue);
}
.khb-tile:hover { border-color: var(--p-blue); background: var(--p-wash); }

/* Simple rows */
.khb-list { list-style: none; margin: 0; padding: 0; }
.khb-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 0;
  border-bottom: 1px solid var(--p-mist);
  margin: 0;
}
.khb-list li:last-child { border-bottom: 0; padding-bottom: 0; }

/* Login */
.khb-phone-row { display: flex; align-items: stretch; gap: .5rem; }
.khb-phone-prefix {
  display: flex;
  align-items: center;
  padding: 0 .875rem;
  background: var(--p-cloud);
  border: 2px solid var(--p-mist);
  border-radius: 8px;
  font-weight: 600;
  color: var(--p-slate);
}
.khb-phone-row input { flex: 1; }

.khb-code-input {
  font-size: 1.75rem !important;
  letter-spacing: .4em;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.khb-portal__foot {
  margin-top: 2rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--p-mist);
  font-size: .9375rem;
  color: var(--p-slate);
  text-align: center;
}

/* Reference entry — read off a slip, so it needs to be easy to check */
.khb-ref-input {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace !important;
  font-size: 1.25rem !important;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.khb-ref-input::placeholder { letter-spacing: .12em; opacity: .45; }

/* A button that reads and behaves like a plain text link — used for
   "Not you? Cancel", which has to be a real submit button (it clears a
   held sign-in server-side) but should not look like a call to action. */
.khb-linklike {
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  font: inherit;
  font-size: .9375rem;
  color: var(--p-blue, #17557F);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.khb-linklike:hover { color: var(--p-ink, #10222E); }

/* Status pill used on past-visit rows — a token number, or a plain word
   for anything that did not run its normal course. Never a colour alone. */
.khb-pill {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  padding: .3rem .75rem;
  border-radius: 999px;
  background: var(--p-wash, #E9F2F8);
  color: var(--p-blue, #17557F);
  font-size: .875rem;
  font-weight: 600;
  white-space: nowrap;
}
.khb-pill.is-off { background: #F1F5F7; color: var(--p-slate, #4C6373); }