/* Reusable EHR components. See ../../COMPONENTS.md for composition rules.
   Colors, type, shapes and spacing follow sandbox/wireframe.html. */

/* Page flow owns spacing between blocks; cards own their internal rhythm. */
.content { padding: 24px; max-width: 1460px; width: 100%; display: flex; flex-direction: column; gap: 20px; container: page / inline-size; }
.content > * { min-width: 0; }
.content-narrow { max-width: 880px; }
.page-header { display: flex; flex-direction: column; gap: 6px; }
.page-header h1 { font: 600 22px/1.25 var(--f-serif); letter-spacing: -0.01em; }
.page-header .h-sub { margin: 0; }
.eyebrow { font-size: 9.5px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--teal-deep); }
.rec-grid, .confirm-grid, .action-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 16px; align-items: start; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.action-group { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; min-width: 0; }
.action-group > *, .actions > * { max-width: 100%; }
.card-action { margin-top: 14px; }
.action-group .btn-sub { margin: 0; }
.chip-row { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; list-style: none; }
.mono { font-family: 'Fira Mono', monospace; }
.foot { font-size: 11px; color: var(--text2); line-height: 1.5; }

/* Cards and controls. */
.card { min-width: 0; overflow-wrap: anywhere; background: var(--card); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow); padding: 18px 20px; }
.card h2, .card h3 { font-size: 15px; font-weight: 600; letter-spacing: -0.005em; display: flex; align-items: center; gap: 9px; margin-bottom: 2px; font-family: var(--f-serif); }
.card .h-sub { font-size: 11.5px; color: var(--text2); }
.btn { border-radius: 999px; padding: 9px 20px; max-width: 100%; justify-content: center; text-align: center; white-space: normal; overflow-wrap: anywhere; font-size: 12.5px; font-weight: 600; font-family: 'Inter', sans-serif; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; transition: transform 0.12s, box-shadow 0.15s, background 0.15s; letter-spacing: -0.004em; }
.btn svg { width: 14px; height: 14px; }
.btn.solid { background: var(--ink); color: var(--bg); border: none; box-shadow: 0 2px 8px rgba(28,25,23,0.25); }
.btn.solid:hover { background: var(--ink-2); transform: translateY(-1px); box-shadow: 0 6px 16px rgba(28,25,23,0.25); }
.btn.ghost { background: var(--card); color: var(--text); border: 1px solid var(--line2); box-shadow: 0 1px 2px rgba(60,47,26,0.05); }
.btn.ghost:hover { background: #f5f1ea; border-color: #cfc5b4; }
.btn.big { padding: 11px 24px; font-size: 13px; }
.btn-sub { font-size: 11px; color: var(--text2); margin-top: 8px; }
.confirm-card { min-width: 0; overflow-wrap: anywhere; background: var(--card); border: 1px solid var(--sage-line); border-radius: 14px; box-shadow: var(--shadow); padding: 16px 18px; }
.confirm-card h2 { font-size: 13.5px; font-weight: 600; display: flex; align-items: center; gap: 9px; margin-bottom: 10px; font-family: var(--f-serif); }
.ok-ic { width: 22px; height: 22px; border-radius: 50%; background: var(--sage-soft); color: var(--sage); font-size: 10px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; border: 1px solid var(--sage-line); }
.confirm-card.failed  { border-color: var(--red-line); background: var(--red-soft); }
.confirm-card.skipped { opacity: 0.7; }
.confirm-card.unknown { border-color: var(--sand-line); background: var(--sand-soft); }
.cc-detail { font-size: 11.5px; color: var(--text2); margin-bottom: 8px; line-height: 1.5; }
.fail-ic { width: 22px; height: 22px; border-radius: 50%; background: var(--red-soft); color: var(--red); font-size: 10px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; border: 1px solid var(--red-line); }
.unk-ic { width: 22px; height: 22px; border-radius: 50%; background: var(--sand-soft); color: var(--sand-ink); font-size: 10px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; border: 1px solid var(--sand-line); }
.skip-ic { width: 22px; height: 22px; border-radius: 50%; background: var(--sand-soft); color: var(--text2); font-size: 10px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; border: 1px solid var(--sand-line); }
.btn { text-decoration: none; }
.card > * + * { margin-top: 12px; }
.card > .page-header + .h-sub, .card > h2 + .h-sub, .card > h3 + .h-sub { margin-top: 2px; }
.card > .data-item { margin-top: 0; }
.card > .card-action { margin-top: 14px; }
.btn:focus-visible, .prow:focus-visible { outline: 2px solid var(--teal); outline-offset: 3px; }

/* Status and provenance chips accept full labels, including organization names. */
.chip { color: #57534e; background: #f1ede6; display: inline-flex; align-items: center; gap: 6px; font-size: 10.5px; font-weight: 600; border-radius: 999px; padding: 3.5px 12px; }
.chip.mono { font-family: 'Fira Mono', monospace; font-size: 10px; letter-spacing: 0.04em; }
.chip.blue { color: var(--blue); background: var(--blue-soft); }
.chip.grey { color: #57534e; background: #f1ede6; }
.src { display: inline-flex; align-items: center; gap: 5px; font-size: 9.5px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; border-radius: 999px; padding: 2.5px 10px; white-space: normal; }
.src.zmc { color: var(--blue); background: var(--blue-soft); }
.src.zb { color: var(--sage); background: var(--sage-soft); }
.src.grey { color: var(--text2); background: #f1ede6; }
.hl-chip { display: inline-flex; align-items: center; gap: 5px; font-size: 9px; font-weight: 700; color: #fff; background: var(--plum); border-radius: 999px; padding: 2.5px 10px; margin-bottom: 8px; letter-spacing: 0.02em; }
.stat-chip { padding: 2px 9px; border-radius: 999px; font-size: 10.5px; font-weight: 600; white-space: normal; border: 1px solid transparent; }
.stat-chip.gf      { background: var(--sage-soft); color: var(--sage); border-color: var(--sage-line); }
.stat-chip.local   { background: var(--sand-soft); color: var(--text2); border-color: var(--sand-line); }
.stat-chip.busy    { background: var(--plum-soft); color: var(--plum); }
.stat-chip.unknown { background: var(--sand-soft); color: var(--sand-ink); border-color: var(--sand-line); }
.stat-chip.partial { background: var(--red-soft); color: var(--red); border-color: var(--red-line); }
.chip, .src, .stat-chip, .hl-chip { display: inline-flex; align-items: center; max-width: 100%; overflow-wrap: anywhere; }

/* Patient and clinical rows. */
.pat-head { display: flex; flex-direction: row; align-items: center; gap: 16px; }
.pav { width: 50px; height: 50px; border-radius: 50%; background: var(--sand-soft); color: var(--sand-ink); font-weight: 600; font-size: 16px; font-family: var(--f-serif); display: flex; align-items: center; justify-content: center; flex-shrink: 0; box-shadow: 0 0 0 3px var(--card), 0 0 0 4.5px var(--sand-line); }
.data-item { flex-wrap: wrap; padding: 11px 2px; border-top: 1px solid #f1ece3; font-size: 12.5px; display: flex; justify-content: space-between; gap: 10px; align-items: flex-start; }
.data-item:first-child { border-top: none; }
.data-item b { font-weight: 600; }
.data-item .meta { font-size: 11px; color: var(--text2); margin-top: 2px; }
.data-empty { font-size: 11.5px; color: var(--text3); padding: 14px 2px 6px; line-height: 1.6; font-style: italic; }
.data-item.hl { display: block; background: var(--plum-soft); border: 1px solid #f3cfe0; border-radius: 12px; padding: 12px 14px; margin: 8px 0 4px; }
.card-flush { padding: 4px 0; }
.prow-form { margin: 0; }
.prow { display: grid; grid-template-columns: 50px minmax(0, 1fr) auto 10px; align-items: center; gap: 12px; width: 100%; padding: 10px 18px; background: none; border: 0; cursor: pointer; font: inherit; color: inherit; text-align: left; }
.prow:hover:not(:disabled) { background: var(--sand-soft); }
.prow:disabled { opacity: 0.55; cursor: not-allowed; }
.pinfo { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.pn { font-size: 13px; font-weight: 600; color: var(--ink); }
.pm { font-size: 11px; color: var(--text2); }
.chev { color: var(--text3); font-size: 16px; }
.pat-head > div, .data-item > div { min-width: 0; }
.prow-form + .prow-form { border-top: 1px solid var(--line); }
.card-flush > * + * { margin-top: 0; }
.prow .pav { width: 38px; height: 38px; font-size: 13px; }

/* Name/value lists and query tables share a narrow-label, flexible-value layout. */
.facts { font-size: 11.5px; }
.kv { display: grid; grid-template-columns: minmax(0, 112px) minmax(0, 1fr); gap: 8px; padding: 3px 0; }
.kv dt { color: var(--text2); }
.kv dd { font-weight: 500; }
.kv dd.mono { font-size: 10.5px; }
.kv-table, .claims { width: 100%; border-collapse: collapse; table-layout: fixed; }
.kv-table th, .kv-table td, .claims th, .claims td { text-align: left; vertical-align: top; padding: 8px 0; border-top: 1px solid #f1ece3; overflow-wrap: anywhere; }
.kv-table tr:first-child > *, .claims tr:first-child > * { border-top: none; }
.kv-table th, .claims th { width: 30%; font-size: 11.5px; font-weight: 400; color: var(--text2); padding-right: 12px; }
.kv-table td, .claims td { font-family: 'Fira Mono', monospace; font-size: 11px; }

/* Source cards. */
.src-card { min-width: 0; overflow-wrap: anywhere; border: 1.5px solid var(--teal); border-radius: 18px; background: linear-gradient(180deg, var(--card), #f7faf8); box-shadow: 0 8px 26px rgba(15,118,110,0.09); padding: 17px 19px 15px; }
.src-top { display: flex; gap: 14px; align-items: center; }
.src-av { width: 44px; height: 44px; border-radius: 50%; background: var(--sage-soft); color: var(--sage); font-family: var(--f-serif); font-weight: 600; font-size: 18px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; box-shadow: 0 0 0 3px var(--card), 0 0 0 4.5px var(--sage-line); }
.src-name { font-family: var(--f-serif); font-size: 16.5px; font-weight: 600; letter-spacing: -0.01em; }
.src-sub { font-size: 11.5px; color: var(--text2); margin-top: 2px; }
.src-line { display: flex; gap: 10px; align-items: flex-start; padding: 5.5px 0; font-size: 11.5px; color: var(--text2); line-height: 1.55; }
.src-line .ic { width: 23px; height: 23px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 1px; }
.src-line .ic svg { width: 12px; height: 12px; }
.src-line .ic.nvi { background: var(--blue-soft); color: var(--blue); }
.src-line .ic.adr { background: var(--teal-soft); color: var(--teal); }
.src-line b { color: var(--text); font-weight: 600; }
.src-line .mono { font-family: 'Fira Mono', monospace; font-size: 10px; }
.src-card.plain { border: 1px solid var(--line); box-shadow: var(--shadow); background: var(--card); }
.src-card > * + * { margin-top: 12px; }
.src-top > div, .src-line > div { min-width: 0; }
.src-line + .src-line { margin-top: 0; }

/* Authorization result and narrated checks. */
.auth-hero { display: flex; flex-direction: row; gap: 16px; align-items: center; }
.auth-hero .vbig { width: 48px; height: 48px; border-radius: 50%; background: var(--sage); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 20px; flex-shrink: 0; box-shadow: 0 8px 20px rgba(63,98,18,0.3); }
.auth-hero h1 { font-family: var(--f-serif); font-size: 25px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.2; }
.auth-hero .asub { font-size: 11.5px; color: var(--text2); margin-top: 4px; }
.auth-hero.denied .vbig { background: var(--red); box-shadow: 0 8px 20px rgba(185,28,28,0.28); }
.auth-hero.denied h1 { color: var(--red); }
/* The sand palette the share cards already use for "could not be established".
   Deliberately neither green nor red: a source that failed to answer neither
   granted nor refused, and colouring it as either would state a decision. */
.auth-hero.undetermined .vbig { background: var(--sand-soft); color: var(--sand-ink); border: 1px solid var(--sand-line); box-shadow: none; }
.auth-hero.undetermined h1 { color: var(--sand-ink); }
.chk { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 14px 18px; border-top: 1px solid #f1ece3; }
.chk:first-child { border-top: none; }
.chk .tile { width: 36px; height: 36px; border-radius: 12px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.chk .tile svg { width: 16px; height: 16px; }
.chk.ok .tile { background: var(--sage-soft); color: var(--sage); }
.chk.fail .tile { background: var(--red-soft); color: var(--red); }
.chk.skip .tile { background: #f1ede6; color: var(--text3); }
.chk b { font-size: 12.5px; font-weight: 600; display: block; }
.chk.fail b { color: var(--red); }
.chk .cd { font-size: 11px; color: var(--text2); margin-top: 1px; }
.chk .tag { margin-left: auto; font-size: 9.5px; font-weight: 700; border-radius: 999px; padding: 3px 11px; white-space: nowrap; letter-spacing: 0.02em; flex-shrink: 0; }
.chk.ok .tag { color: var(--sage); background: var(--sage-soft); }
.chk.fail .tag { color: var(--red); background: var(--red-soft); }
.chk.skip .tag { color: var(--text3); background: #f1ede6; }
.disclaimer { border: 1px solid var(--sand-line); background: var(--sand-soft); color: var(--sand-ink); border-radius: 13px; padding: 12px 16px; font-size: 11.5px; display: flex; gap: 10px; align-items: flex-start; line-height: 1.6; }
.check-card { background: var(--card); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow); overflow: hidden; }
.notice-icon { flex-shrink: 0; }
.auth-hero > div, .disclaimer > span { min-width: 0; overflow-wrap: anywhere; }
.chk > div { min-width: 0; overflow-wrap: anywhere; }

/* Component reflow follows the content width, including when the viewer docks. */
@container page (max-width: 560px) {
  .chk { grid-template-columns: 36px minmax(0, 1fr); }
  .chk .tag { grid-column: 2; margin-left: 0; justify-self: start; }
  .prow { grid-template-columns: 38px minmax(0, 1fr) 10px; }
  .prow .stat-chip { grid-column: 2; justify-self: start; }
  .prow .chev { grid-column: 3; grid-row: 1 / span 2; }
}
@container page (max-width: 380px) {
  .kv { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .kv + .kv { margin-top: 6px; }
  .kv-table, .kv-table tbody, .kv-table tr, .kv-table th, .kv-table td,
  .claims, .claims tbody, .claims tr, .claims th, .claims td { display: block; width: 100%; }
  .kv-table td, .claims td { border-top: 0; padding-top: 0; }
}