/* Clinician review — the small amount this page needs on top of the portal
   stylesheet and the staff console's. Everything structural is inherited so the
   three pages stay one product. */

/* One column, not the member portal's two. `main` in the shared stylesheet
   (../portal/styles.css) sets a two-column grid for the documents/chat split;
   without this override the review page inherits it and the topbar ends up
   squeezed into the left column with the content stranded in the right. The
   staff console solves the same problem with `.admin-main`. */
.clinician-main {
  max-width: 1000px;
  margin: 0 auto;
  padding: 30px 24px 60px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}
.clinician-main > .topbar { grid-column: 1 / -1; }

.section-head {
  display: flex;
  align-items: baseline;
  gap: 16px;
  margin: 0 0 6px;
}
.section-head h2 { margin: 0; }
/* Pushes only the trailing control to the right. `justify-content: space-between`
   would fling the heading to the far edge whenever the row starts with a button. */
.section-head .spacer { margin-left: auto; }

.rows { list-style: none; margin: 14px 0 0; padding: 0; }
.rows > li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--paper);
  margin-bottom: 10px;
}
.rows .meta { min-width: 0; }
.rows .name { font-weight: 500; overflow-wrap: anywhere; }
.rows .sub { font-size: 13px; color: var(--ink-faint); margin-top: 3px; }
.rows .actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }

/* Counts on a queue row. The unread count is the only one that draws the eye,
   because it is the only one that is work. */
.count { font-size: 13px; color: var(--ink-faint); }
.count-unread { color: var(--ink); font-weight: 500; }

.row-button {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
  min-width: 0;
}
.row-button:hover .name { text-decoration: underline; }

.review-form { display: flex; flex-direction: column; gap: 8px; width: 100%; }
.review-form textarea {
  width: 100%;
  min-height: 68px;
  font: inherit;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--paper-deep);
  color: var(--ink);
  resize: vertical;
}
.review-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.review-row select {
  font: inherit;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--paper-deep);
  color: var(--ink);
}
.doc-block {
  display: block;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--paper);
  padding: 14px 16px;
  margin-bottom: 10px;
}
.doc-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 10px;
}
.saved { font-size: 13px; color: var(--ink-faint); }

/* Read-only intake view. Deliberately its own class names, not a reuse of the
   member portal's `.intake-*` classes: those style an editable form (inputs,
   radio groups, table cells) and this is a physician reading text in one
   pass. Sharing the names would pull in padding and control styling built for
   a form this page never renders. */
.ci-view {
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--paper);
  padding: 16px 18px 6px;
  margin: 14px 0;
}
.ci-legend { margin: 0 0 4px; }
.ci-section + .ci-section { margin-top: 22px; }
.ci-section h4 {
  margin: 0 0 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--line);
  font-size: 15px;
}
.ci-field { margin-bottom: 14px; }
.ci-q { font-weight: 500; }
.ci-star { color: var(--ink-faint); margin-left: 2px; }
.ci-a {
  margin-top: 3px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
/* Visibly marked, not omitted — a blank line here reads as "nobody looked,"
   which is not the same fact as "the member has not answered this yet." */
.ci-a.ci-unanswered {
  color: var(--ink-faint);
  font-style: italic;
}

/* Tabs on the merged staff page. Plain buttons, same quiet treatment as the
   rest of the console — no router, no extra chrome. */
.staff-tabs {
  display: flex;
  gap: 4px;
  flex: 1;
  align-items: stretch;
  margin: 0 12px;
}
.staff-tab {
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  padding: 6px 14px;
  font: inherit;
  font-weight: 500;
  color: var(--ink-faint);
  cursor: pointer;
}
.staff-tab.is-active {
  color: var(--ink);
  border-bottom-color: var(--sage);
}
.staff-tab:hover { color: var(--ink); }

/* Authenticator enrolment. The QR is the main path; the typed key is a
   fallback behind a disclosure, because nobody wants to key 52 base32
   characters on a phone. */
.qr-wrap {
  display: flex;
  justify-content: center;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 14px;
}
.qr-wrap canvas { display: block; width: 232px; height: 232px; image-rendering: pixelated; }
.qr-link { color: var(--sage-dark); text-decoration: underline; }
.qr-fallback { margin-top: 4px; }
.qr-fallback summary {
  cursor: pointer;
  font-size: 14px;
  color: var(--ink-soft);
  padding: 4px 0;
}
.qr-fallback .setup-key { margin-top: 8px; }
.qr-fallback .btn-quiet { margin-top: 10px; }

.ci-milestones {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin: 12px 0 8px;
  padding: 12px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--paper);
}
.ci-milestones .btn { margin: 0; }

/* The guarded staff deploy deliberately leaves the shared /admin/admin.css
   object pinned. Keep Accounts fallbacks needed by the merged page here too,
   so a staff-frontend deploy cannot regress newer account UX.

   One human confirmation replaced seven transcribed Stripe fields (ops #118). */
.enroll-confirm {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  margin: 0.25rem 0 0.1rem;
  cursor: pointer;
  line-height: 1.45;
}
.enroll-confirm input[type="checkbox"] {
  margin-top: 0.2rem;
  width: 1.05rem;
  height: 1.05rem;
  flex: 0 0 auto;
  cursor: pointer;
}

/* One-time temporary-password panel for initial invite or explicit staff regeneration. */
.invite-pw {
  border: 2px solid #44604a;
  border-radius: 10px;
  background: #f6f1e8;
  padding: 1rem 1.1rem;
  margin: 0.9rem 0;
}
.invite-pw-head { margin: 0 0 0.35rem; font-weight: 600; }
.invite-pw-warn { margin: 0 0 0.75rem; font-size: 0.9rem; line-height: 1.45; }
.invite-pw-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; }
.invite-pw-code {
  white-space: pre;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 1.1rem;
  letter-spacing: 0.04em;
  background: #fffdf8;
  border: 1px solid #ddd4c2;
  border-radius: 6px;
  padding: 0.5rem 0.7rem;
  user-select: all;
  word-break: break-all;
}

/* Journey board. A row wraps so the step list can open full-width under it.
   Red is only for a member past the limit: the one thing on this tab that is
   work right now. */
.rows > li.journey-row { flex-wrap: wrap; }
.journey-row.is-late { border-color: rgba(155, 74, 63, .45); }
/* What to do about a late member, where the step says. */
.journey-row .sub.journey-todo { color: var(--danger); font-weight: 500; }
.journey-late {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  color: var(--danger);
  border: 1px solid rgba(155, 74, 63, .35);
  border-radius: 999px;
  padding: 1px 8px;
  vertical-align: 1px;
}
.journey-row .actions .btn { padding: 7px 14px; font-size: 13.5px; }
.journey-row .actions .btn-quiet { padding: 5px 13px; font-size: 13.5px; }
.journey-details { flex-basis: 100%; }
.journey-steps { list-style: none; margin: 4px 0 0; padding: 0; }
.journey-steps li {
  display: grid;
  grid-template-columns: 18px minmax(0, 14em) 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
  border-top: 1px solid var(--line);
  font-size: 14px;
}
.journey-steps li:not(.is-done) .journey-step { color: var(--ink-faint); }
.journey-mark { color: var(--sage-dark); text-align: center; }
.journey-steps .btn-quiet { padding: 3px 11px; font-size: 13px; }

/* Guides. A long read-only document, so it gets a reading width and quiet
   tables. The status line says DRAFT before anything else on the page. */
.guide {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 22px 26px;
  max-width: 820px;
  line-height: 1.55;
}
.guide-status {
  display: inline-block;
  margin: 0 0 8px;
  padding: 4px 12px;
  border-radius: 999px;
  border: 1px solid rgba(155, 74, 63, .35);
  color: var(--danger);
  font-size: 13px;
  font-weight: 600;
}
.guide .guide-h { margin: 22px 0 8px; }
.guide hr { border: 0; border-top: 1px solid var(--line); margin: 22px 0; }
.guide blockquote {
  margin: 12px 0;
  padding: 4px 16px;
  border-left: 3px solid var(--sage);
  background: var(--paper);
}
.guide ol, .guide ul { padding-left: 1.4em; }
.guide li { margin: 4px 0; }
.guide-table { overflow-x: auto; margin: 12px 0; }
.guide table { border-collapse: collapse; font-size: 14px; }
.guide th, .guide td { border: 1px solid var(--line); padding: 6px 10px; text-align: left; vertical-align: top; }
.guide th { background: var(--paper-deep); font-weight: 600; }

/* ---------- Intake form editor */

#panel-form.is-busy { opacity: .6; pointer-events: none; }

.fe-views { display: flex; gap: 6px; flex-wrap: wrap; margin: 14px 0 18px; }
.fe-view {
  font: inherit;
  font-size: 14px;
  padding: 7px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--paper);
  color: var(--ink-soft);
  cursor: pointer;
}
.fe-view.is-active { background: var(--sage-dark); border-color: var(--sage-dark); color: #fff; }

.fe-problems {
  border: 1px solid var(--danger);
  border-radius: var(--radius-md);
  padding: 10px 14px;
  margin: 10px 0;
  color: var(--ink);
}
.fe-problems-head { margin: 0 0 4px; font-weight: 500; }
.fe-problems ul { margin: 0; padding-left: 18px; }

.fe-section { margin-bottom: 30px; }
.fe-section h3 { margin: 0; }
.fe-intro { margin: 4px 0 10px; white-space: pre-line; }

.fe-q {
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--paper);
  padding: 12px 14px;
  margin-bottom: 8px;
}
.fe-q.is-hidden { background: var(--paper-deep); }
.fe-q.is-hidden .fe-q-label { color: var(--ink-faint); text-decoration: line-through; }
.fe-q-top { display: flex; gap: 14px; align-items: flex-start; justify-content: space-between; }
.fe-q-text { min-width: 0; }
.fe-q-label { font-weight: 500; overflow-wrap: anywhere; }
.fe-q-meta { font-size: 13px; color: var(--ink-faint); margin-top: 3px; }
.fe-q-help { font-size: 13px; color: var(--ink-soft); margin-top: 4px; white-space: pre-line; overflow-wrap: anywhere; }
.fe-actions { display: flex; gap: 6px; flex-shrink: 0; flex-wrap: wrap; justify-content: flex-end; max-width: 46%; }
.fe-actions .btn-quiet { padding: 5px 10px; font-size: 13px; }
.fe-add { margin-top: 4px; }

.fe-tag {
  display: inline-block;
  font-size: 11px;
  line-height: 1;
  padding: 3px 7px;
  border-radius: 999px;
  border: 1px solid var(--line);
  color: var(--ink-soft);
  vertical-align: 1px;
}
.fe-tag.is-new { border-color: var(--sage); color: var(--sage-dark); }
.fe-tag.is-changed { border-color: var(--sand-deep); color: var(--ink); }
.fe-tag.is-hidden { color: var(--ink-faint); }
.fe-tag.is-only { background: var(--sage-dark); border-color: var(--sage-dark); color: #fff; }

.fe-editor {
  margin-top: 12px;
  padding: 12px;
  border-radius: var(--radius-md);
  background: var(--paper-deep);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.fe-row { display: flex; flex-direction: column; gap: 4px; }
.fe-row-label { font-size: 13px; font-weight: 500; }
.fe-row input[type="text"], .fe-row textarea, .fe-row select {
  font: inherit;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--paper);
  color: var(--ink);
}
.fe-row textarea { min-height: 60px; resize: vertical; }
.fe-row textarea.fe-options { min-height: 110px; }
.fe-check { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.fe-buttons { display: flex; gap: 10px; align-items: center; margin: 12px 0; }
.fe-buttons .btn { margin: 0; }
.fe-pre { white-space: pre-line; overflow-wrap: anywhere; }

/* Women / men side by side. A question asked of only one sex is filled in
   on its side and leaves a grey "Not asked" gap on the other, so the
   differences read at a glance down the page. */
.pv-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 12px; margin-top: 12px; }
.pv-head { font-weight: 600; padding: 4px 2px; border-bottom: 1px solid var(--line); }
.pv-section { grid-column: 1 / -1; font-weight: 600; margin-top: 14px; color: var(--sage-dark); }
.pv-cell {
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--paper);
  padding: 8px 10px;
  min-width: 0;
}
.pv-cell.pv-only { border-color: var(--sage-dark); border-width: 2px; background: var(--card); }
.pv-cell.pv-absent {
  background: repeating-linear-gradient(135deg, var(--paper-deep), var(--paper-deep) 6px, transparent 6px, transparent 12px);
  color: var(--ink-faint);
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pv-label { font-size: 14px; font-weight: 500; overflow-wrap: anywhere; }
.pv-help { font-size: 12px; color: var(--ink-soft); margin-top: 3px; overflow-wrap: anywhere; }
.pv-opts { font-size: 12px; color: var(--ink-faint); margin-top: 3px; overflow-wrap: anywhere; }

/* Journey map. Nathan's journey map in a frame (journey-map/overlay.css
   sizes it), with notes under it. Red still means only one thing, a member
   past the limit. */
.journey-map {
  margin: 14px 0 10px;
}
.jm-legend { margin: 6px 4px 2px; font-size: 13px; }
.jm-unknown { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 6px 4px 4px; }
.jm-unknown .btn-quiet { padding: 3px 11px; font-size: 13px; }
.journey-list > summary {
  cursor: pointer;
  font-weight: 600;
  padding: 8px 2px;
  color: var(--sage-dark);
}
.journey-list > summary span { font-weight: 400; color: var(--ink-faint); }
.journey-row:focus { outline: none; }
.journey-row:focus-visible { outline: 2px solid var(--sage-dark); outline-offset: 2px; }
.journey-row.is-flash { animation: jm-flash 1.8s ease-out; }
@keyframes jm-flash {
  0%, 30% { box-shadow: 0 0 0 4px var(--sage-glow); background: #f2f8ec; }
  100% { box-shadow: 0 0 0 0 rgba(163, 209, 153, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .journey-row.is-flash { animation: none; box-shadow: 0 0 0 4px var(--sage-glow); }
}

/* ---------- Phone (720px and narrower)

   Nathan, 2026-11-02, on his phone: the console "looks atrocious on mobile".
   The top bar (logo, six tabs, name, Fitness, Sign out) was one row about
   930px wide, so every tab panned sideways on a 390px iPhone, and the sticky
   bar sat on top of buttons so they could not be tapped. Everything below is
   phone only. Nothing above this line changes, so the desktop look is the
   same as before.

   This file has to carry it: the staff deploy keeps ../portal/styles.css and
   ../admin/admin.css pinned (deploy-to-s3.sh), and the pinned copies predate
   the member portal's phone fixes. Journey map internals (.jm-*) are left to
   the map's own rules; only its container is held to the screen width. */
@media (max-width: 720px) {
  /* Top bar: logo, Fitness and Sign out on one row, then the tabs as one
     row that scrolls sideways inside itself, never the page. */
  .topbar {
    flex-wrap: wrap;
    gap: 6px 10px;
    padding: 8px 16px 0;
  }
  .topbar .brandmark-bar {
    flex: 1 1 0;
    min-width: 0;
    height: auto;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 15px;
  }
  .topbar .topbar-right { order: 1; gap: 8px; min-width: 0; }
  /* The name is the least needed thing on a small screen. Sign out stays. */
  .topbar .who { display: none; }
  .topbar #fitness-error { flex: 1 0 100%; order: 3; margin-bottom: 8px; }
  .topbar-right:has(#fitness-error:not(.hidden)) { flex-wrap: wrap; }
  .staff-tabs {
    order: 2;
    flex: 1 0 100%;
    margin: 0 -16px;
    padding: 0 12px;
    gap: 0;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .staff-tabs::-webkit-scrollbar { display: none; }
  /* The last tab fades at the right edge, so the row reads as one to swipe. */
  .staff-tabs {
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent);
    mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent);
    padding-right: 28px;
    scroll-padding-inline: 12px 28px;
  }
  .staff-tab {
    flex: 0 0 auto;
    min-height: 44px;
    padding: 6px 12px;
    white-space: nowrap;
  }

  /* Page width: 16px gutters, nothing wider than the screen. */
  .admin-main, .clinician-main { padding: 16px 16px 48px; gap: 16px; min-width: 0; }
  .admin-main > *, .clinician-main > * { min-width: 0; }
  #app .panel { padding: 20px 16px 18px; border-radius: var(--radius-md); }
  .chat-head { flex-wrap: wrap; gap: 10px; }
  .chat-head > div { flex: 1 1 200px; min-width: 0; }

  /* Section heads wrap instead of squeezing the heading into a column. */
  .section-head { flex-wrap: wrap; align-items: center; row-gap: 8px; }
  .section-head h2 { flex: 1 1 auto; }
  #member-view > .section-head h2 { order: 3; flex-basis: 100%; overflow-wrap: anywhere; }

  /* Tap targets: at least 44px tall, text centred. */
  #app .btn, #app .btn-quiet, #login .btn, #login .btn-quiet, .fe-view {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
  }
  #app .btn-quiet, .fe-view { min-width: 44px; padding: 8px 16px; font-size: 15px; }
  #app .btn { padding: 10px 20px; }
  #app .btn-link { min-height: 44px; }
  /* Block, not flex: a flex summary loses its disclosure arrow. */
  .qr-fallback summary { min-height: 44px; padding: 11px 0; }
  /* A link inside a sentence: a taller hit area, no change to the line. */
  .qr-link { display: inline-block; padding: 12px 0; margin: -12px 0; }

  /* Inputs at 16px or iOS zooms the page when one is tapped. */
  #app :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea),
  #login :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea) {
    font-size: 16px;
    max-width: 100%;
    min-height: 44px;
  }
  /* The Stripe invoice field has no type, so the shared input look skips it. */
  .enroll-pay input:not([type="checkbox"]) {
    padding: 10px 14px;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: var(--card);
    color: var(--ink);
    font-family: inherit;
  }
  #app select { min-height: 44px; }
  .enroll-confirm input[type="checkbox"] { width: 22px; height: 22px; margin-top: 0; }

  /* Small labels a step bigger, so they read without zooming. */
  #app .pill, .fe-tag { font-size: 12px; }
  .doclist .sub, .pv-help, .pv-opts { font-size: 13px; }

  /* Sign-in card: room for the fields, not the padding. */
  #login { padding: 20px 16px; }
  .login-card { padding: 30px 22px 26px; border-radius: var(--radius-lg); }

  /* Lists become stacked cards: the text on top, its buttons under it. */
  .doclist li { flex-direction: column; align-items: stretch; gap: 10px; }
  .doclist .meta, #memberlist .meta, #enrollmentlist .meta { width: 100%; min-width: 0; }
  .doclist .name, #memberlist .name { white-space: normal; overflow-wrap: anywhere; }
  .doclist .actions { flex-wrap: wrap; }
  .enroll-email-read { overflow-wrap: anywhere; }
  .enroll-pay input:not([type="checkbox"]) { width: 100%; }
  .reason-row input { flex-basis: 100%; }
  /* A long email in the one-time password box is one word. pre-wrap keeps the
     line break between username and password, and anywhere lets that word
     wrap so the box cannot widen the page. */
  .invite-pw, .invite-pw-head, .invite-pw-warn { max-width: 100%; min-width: 0; overflow-wrap: anywhere; }
  .invite-pw-row { min-width: 0; max-width: 100%; }
  .invite-pw-code {
    white-space: pre-wrap;
    flex-basis: 100%;
    min-width: 0;
    max-width: 100%;
    overflow-wrap: anywhere;
  }

  .rows > li { flex-direction: column; align-items: stretch; gap: 10px; }
  .rows .actions { flex-wrap: wrap; flex-shrink: 1; }
  .row-button { width: 100%; min-height: 44px; }
  .rows .sub { overflow-wrap: anywhere; }
  .doc-head { flex-wrap: wrap; }
  .doc-head .meta { flex: 1 1 200px; min-width: 0; overflow-wrap: anywhere; }
  .review-row select { flex: 1 1 100%; }
  .ci-view { padding: 14px 14px 4px; }

  /* System tables: one card per row, each value with its column name. */
  .ops-table, .ops-table tbody, .ops-table tr, .ops-table td { display: block; width: auto; }
  .ops-table thead { display: none; }
  .ops-table tr { padding: 10px 0; border-top: 1px solid var(--line); }
  .ops-table td {
    display: grid;
    grid-template-columns: minmax(0, 9.5em) minmax(0, 1fr);
    gap: 10px;
    padding: 2px 0;
    border: 0;
    white-space: normal;
    overflow-wrap: anywhere;
  }
  .ops-table td::before { content: attr(data-label); color: var(--ink-faint); font-size: 13px; }
  /* admin.css keeps the first column on one line; a long name must wrap here. */
  .ops-table td:first-child { display: block; font-weight: 500; padding-bottom: 4px; white-space: normal; }
  .ops-table td:first-child::before { content: none; }
  .ops-table td:last-child { width: auto; }

  /* Journey: the tab holds to the screen. The step list under each member
     puts the date on its own line so the button keeps its size. */
  #panel-journey section, .journey-map, .journey-list { min-width: 0; max-width: 100%; }
  .journey-row .actions .btn, .journey-row .actions .btn-quiet { font-size: 14.5px; }
  .journey-steps li { grid-template-columns: 18px minmax(0, 1fr) auto; row-gap: 0; }
  .journey-steps li > .note { grid-column: 2; grid-row: 2; }
  .journey-steps li > .btn-quiet { grid-column: 3; grid-row: 1 / span 2; }
  .journey-steps .btn-quiet { padding: 6px 14px; font-size: 14px; }
  .journey-list > summary { min-height: 44px; padding: 10px 2px; }

  /* Guides: full width, a wide table scrolls inside its own box. */
  .guide { padding: 18px 16px; overflow-wrap: anywhere; }

  /* Intake form editor: buttons go under the question, not beside it. */
  .fe-q-top { flex-direction: column; gap: 10px; }
  .fe-actions { max-width: none; justify-content: flex-start; }
  .fe-actions .btn-quiet { padding: 8px 14px; font-size: 15px; }
  .fe-buttons { flex-wrap: wrap; }
  .fe-check { min-height: 44px; }
  .fe-check input[type="checkbox"] { width: 22px; height: 22px; }
  .pv-grid { gap: 6px 8px; }
  .pv-cell { padding: 8px; }
}