/* =========================================================================
   app.css — the screens: the registry, the generated encounter form, admin.

   Everything here dresses markup that `renderer.js` produced from the dictionary, so the
   selectors are structural (`.grp`, `.field`, `.row-card`, `.rec-item`) and never name a data
   group. A stylesheet that had to know what NCDQANS looks like would be the same architecture
   mistake as a renderer that did.

   The vocabulary is OLD's — cards, pills, tables, notes, empty states, the teal/coral pairing
   for "suggested" versus "required". Screens OLD never had (the generated form, the A.3 panel,
   the Konsulta admin cards, the import and cipher-key cards) are drawn in that same language so
   they read as though they had always belonged to it.
   ========================================================================= */

/* ================================================================ REGISTRY */
.search-card .row{align-items:flex-end}
.search-card .field{min-width:260px;flex:1}
.new-pin{margin-top:14px;padding-top:14px;border-top:1px dashed var(--line)}
.new-pin .field{min-width:200px}
.results{overflow:auto;-webkit-overflow-scrolling:touch}
.results table{min-width:640px}

/* the patient's encounters, newest first — a row per encounter, not a table, because each one
   is a destination rather than a datum */
.timeline .tl-item{
  display:flex;align-items:center;gap:14px;width:100%;text-align:left;cursor:pointer;
  padding:13px 18px;border:0;border-bottom:1px solid var(--line-2);background:none;
  font:inherit;color:var(--ink);transition:background-color .16s ease;
}
.timeline .tl-item:last-child{border-bottom:0}
.timeline .tl-item:hover{background:var(--surface-2)}
.timeline .tl-item:focus-visible{outline:2px solid var(--teal-500);outline-offset:-2px}
.tl-date{font-weight:800;font-size:13px;min-width:104px;font-variant-numeric:tabular-nums;color:var(--ink)}
.tl-label{color:var(--ink-2);flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:650}
/* The encounter type and its status are columns, not tags in a sentence: fixed widths so the
   labels between them line up down the list. */
.tl-date + .pill{min-width:104px;justify-content:center;flex:none}
.tl-label + .pill{min-width:58px;justify-content:center;flex:none}

/* ================================================================ ENCOUNTER */
.enc{max-width:1440px;margin:0 auto}
.enc-h{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:20px}
.enc-title h1{font-size:26px;font-weight:800;letter-spacing:-.02em}
.enc-meta{display:flex;gap:8px;flex-wrap:wrap;align-items:center;color:var(--ink-2);
  font-size:12px;font-weight:700;margin-top:5px}
.enc-actions{margin-left:auto;display:flex;gap:9px;flex-wrap:wrap}
/* "Join call" is a real link (a new tab, `rel=noopener`) wearing the button's clothes — an
   anchor brings its own underline and visited colour, and both have to go. P12. */
.enc-actions a.btn{text-decoration:none;color:var(--ink)}
.enc-actions a.btn.primary{color:#fff}
/* P16 moved the group navigator INTO the right rail, where V3-PLAN §Phase 16 puts the DD-group
   timeline — so the room is now the form and one rail, not a form between two of them. */
.enc-body{display:grid;grid-template-columns:minmax(0,1fr) 348px;gap:20px;align-items:start}

/* ---- the DD-group timeline: a rail, in the sidebar's idiom but on a light surface ---- */
/* Forty-three groups is longer than any display, so the sections collapse and the rail scrolls
   inside itself rather than running off the bottom of a sticky column. */
.enc-nav{display:flex;flex-direction:column;gap:2px;margin-bottom:14px;
  padding:12px 10px;border-radius:var(--r);background:var(--surface);
  border:1px solid var(--line);box-shadow:var(--shadow),var(--hi-soft)}
.nav-h{font-size:10px;font-weight:900;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-3);padding:2px 8px 8px}
.rail-sec{display:flex;flex-direction:column;gap:2px;padding-bottom:4px}
.rail-sec + .rail-sec{border-top:1px dashed var(--line-2);padding-top:5px}
.rail-h{display:flex;align-items:center;gap:8px;width:100%;padding:6px 8px;border:0;background:none;
  cursor:pointer;border-radius:9px;text-align:left;
  font:900 10.5px/1.3 var(--font-sans);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
.rail-h:hover{background:var(--line-2);color:var(--ink-2)}
.rail-h:focus-visible{outline:2px solid var(--teal-500);outline-offset:1px}
.rail-caret{flex:none;font-size:9px;color:var(--ink-3)}
.rail-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rail-h .pill{flex:none;padding:1px 7px;font-size:9.5px;font-family:var(--font-mono)}
.nav-item{display:flex;align-items:center;gap:8px;padding:6px 10px;border:0;background:none;cursor:pointer;
  border-radius:9px;font:800 12px/1.35 var(--font-sans);color:var(--ink-2);text-align:left;width:100%;
  transition:background-color .16s,color .16s}
.nav-item:hover:not(:disabled){background:var(--teal-50);color:var(--teal-ink)}
.nav-item:focus-visible{outline:2px solid var(--teal-500);outline-offset:1px}
/* A group the rules did not open is SHOWN, greyed: "the engine decided you do not need this"
   is an answer, and a rail that hid it could not give it. */
.nav-item.is-closed{opacity:.5;cursor:default}
.nav-item:disabled{cursor:default}
.nav-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:var(--font-mono);
  font-size:11px;letter-spacing:.01em}
.nav-state{flex:none;font:700 9.5px/1 var(--font-sans);letter-spacing:.04em;text-transform:uppercase;
  color:var(--ink-3)}
.nav-item .pill{flex:none;padding:1px 7px;font-size:10px}

.enc-form{min-width:0}
.enc-findings{position:sticky;top:18px;max-height:calc(100vh - 42px);overflow:auto;-webkit-overflow-scrolling:touch}

/* ---- generated group sections: OLD's card, with the dictionary's own name on the header ---- */
.grp{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:var(--shadow),var(--hi-soft);margin-bottom:18px;overflow:hidden}
.grp-h{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:13px 18px;
  border-bottom:1px solid var(--line-2);
  background:linear-gradient(180deg,#fff,var(--neutral-50));position:sticky;top:0;z-index:2}
/* The group's DD name, in mono, because it is an identifier and not a phrase. */
.grp-h h2{font-size:13.5px;font-weight:900;letter-spacing:.02em;font-family:var(--font-mono);color:var(--ink)}
.grp-h .pill{flex:none}
.grp-b{padding:18px}
.grp-b>.empty{padding:22px}
.grp-b>.btn{margin-top:4px}
/* a group-level finding sits between the header and the body, full-bleed */
.grp>.field-warn,.grp>.field-err{margin:0;border-radius:0;border-left:0;border-right:0;padding:11px 18px}

/* ---- a row of a repeating group ---- */
.row-card{border:1px solid var(--line);border-radius:var(--r-sm);padding:14px;margin-bottom:12px;
  background:var(--surface-2)}
.row-card:last-of-type{margin-bottom:14px}
.row-head{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.row-n{font:900 10.5px/1 var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);
  background:var(--line-2);border-radius:var(--pill);padding:4px 9px}
.row-head .btn{margin-left:auto}

/* ---- a field, its marks and the engine's words about it ---- */
.field-label{font-weight:700}
.field-warn,.field-err{font-size:11.5px;font-weight:700;border-radius:var(--r-sm);
  padding:8px 11px;margin-top:6px;line-height:1.45;display:block}
.field-warn{color:var(--warning-dark);background:var(--warning-light);border:1px solid rgba(161,98,7,.24)}
.field-err{color:var(--error-dark);background:var(--error-light);border:1px solid rgba(185,28,28,.2)}
/* a field the dictionary pairs with the one above it (a value and its unit, a code and its text) */
.field.paired{padding-left:13px;border-left:2px solid var(--teal-100)}

/* who wrote the row, and when */
.stamps{grid-column:1/-1;display:flex;gap:16px;flex-wrap:wrap;padding-top:11px;margin-top:2px;
  border-top:1px dashed var(--line);font-size:11px;color:var(--ink-3)}
.stamp{display:inline-flex;gap:6px;align-items:baseline}
.stamp-k{font-weight:900;text-transform:uppercase;letter-spacing:.08em;font-size:9.5px;color:var(--ink-3)}
.stamp-v{font-weight:700;color:var(--ink-2)}

/* ---- library combobox: OLD's typeahead, on a light surface ---- */
.combo{position:relative}
.combo-bar{display:flex;align-items:center;gap:7px}
.combo-input{flex:1;min-width:0}
.combo-code{font-size:11px;font-weight:800;color:var(--teal-700);background:var(--teal-50);
  border:1px solid var(--teal-100);border-radius:6px;padding:4px 8px;min-width:28px;text-align:center;flex:none}
.combo-clear{border:1px solid var(--line);background:var(--surface);border-radius:8px;width:28px;height:28px;
  cursor:pointer;color:var(--ink-3);font-size:14px;line-height:1;flex:none;padding:0;transition:.15s}
.combo-clear:hover{border-color:#e79b9b;color:var(--danger);background:var(--danger-soft)}
.combo-menu{position:absolute;z-index:var(--z-menu);left:0;right:0;top:calc(100% + 5px);max-height:270px;overflow:auto;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:0 22px 50px rgba(23,28,38,.18);padding:4px;-webkit-overflow-scrolling:touch}
.combo-opt{display:flex;gap:10px;width:100%;text-align:left;border:0;background:none;cursor:pointer;
  padding:9px 11px;border-radius:var(--r-sm);font:650 13px/1.35 var(--font-sans);color:var(--ink)}
.combo-opt:hover{background:var(--teal-50);color:var(--teal-ink)}
.combo-opt .mono{color:var(--teal-700);font-weight:800;min-width:40px;flex:none}
.combo-desc{flex:1;min-width:0}
.combo-empty{padding:12px 13px;font-size:12px;font-weight:700;color:var(--ink-3)}
/* A badge the library layer attached to a row — "Konsulta" for a PhilHealth benefit drug,
   "Stocked" for one this clinic holds (P14). Coral because it is a fact about the row, not a
   state of the control. */
.combo-badge{flex:none;align-self:center;font-size:10px;font-weight:800;letter-spacing:.02em;
  color:var(--coral-700);background:var(--coral-50);border:1px solid var(--coral-100);
  border-radius:var(--pill);padding:2px 8px;white-space:nowrap}
.combo-chips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:7px}
.chip-code{display:inline-flex;align-items:center;gap:7px;background:var(--teal-50);color:var(--teal-700);
  border:1px solid var(--teal-100);border-radius:var(--pill);padding:3px 5px 3px 10px;font-size:11.5px;font-weight:800}
.chip-desc{font-weight:650;color:var(--ink-2);max-width:230px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chip-x{border:0;background:none;cursor:pointer;color:var(--teal-700);font-size:13px;line-height:1;padding:0 3px}
.chip-x:hover{color:var(--danger)}

/* ---- the A.3 recommended-services panel ----------------------------------
   A card in its own right, teal because the whole panel is a suggestion: nothing in it can
   block a finalize, and its rows are answered rather than filled in. */
.panel.recommend{margin:0 18px 18px;border:1px solid rgba(91,191,181,.45);border-radius:var(--r);
  background:linear-gradient(180deg,var(--teal-50),rgba(255,255,255,.92));padding:16px;
  box-shadow:var(--hi-soft)}
.grp-h + .panel.recommend{margin-top:18px}
.panel-h{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:7px}
.panel-h h3{font-size:14px;font-weight:900;color:var(--teal-ink)}
.panel-note{margin:0 0 14px;font-size:12.5px;font-weight:650;color:var(--teal-ink);line-height:1.5;max-width:72ch}
.panel.recommend > .field-warn{margin:0 0 12px}
.rec-list{display:flex;flex-direction:column;gap:9px}
.rec-item{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-sm);padding:12px 14px;
  box-shadow:var(--hi-soft)}
.rec-title{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:10px}
.rec-code{background:var(--teal-50);color:var(--teal-700);border:1px solid var(--teal-100);border-radius:6px;
  padding:2px 8px;font-weight:800;font-size:11px;flex:none}
.rec-name{font-weight:800;font-size:13px;line-height:1.35}
.rec-answers{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:11px}
.rec-answers .field{margin-bottom:0}
.rec-extra{margin-top:11px;padding-top:11px;border-top:1px dashed var(--line-2)}
/* A-15: services the guide names that no PhilHealth library codes — shown, never guessed at. */
.rec-unmapped{margin-top:14px;padding:11px 13px;border-radius:var(--r-sm);background:var(--warning-light);
  border:1px solid rgba(161,98,7,.28);color:var(--warning-dark);font-size:12px;font-weight:700;line-height:1.5}
.rec-unmapped .field-help{color:var(--warning-dark);opacity:.85}

/* ---- the NCD questionnaire ---- */
.ncdq-section{font-size:10px;font-weight:900;letter-spacing:.14em;text-transform:uppercase;
  color:var(--teal-ink);margin:20px 0 10px;padding-top:14px;border-top:1px solid var(--line-2)}
.ncdq-section:first-child{margin-top:0;padding-top:0;border-top:0}
.ncdq-q{display:grid;grid-template-columns:minmax(0,1fr) 190px;gap:10px 16px;align-items:start;
  padding:11px 0;border-bottom:1px solid var(--line-2)}
.ncdq-q:last-child{border-bottom:0}
/* The question and its answer are pinned to the first row, so a finding rendered BETWEEN them
   (the renderer emits ask → warning → answer) drops to a row of its own instead of shunting the
   answer control into the question's column. */
.ncdq-ask{display:flex;gap:10px;align-items:baseline;grid-column:1;grid-row:1}
.ncdq-n{font-weight:900;color:var(--teal-700);font-size:10.5px;font-family:var(--font-mono);flex:none;
  min-width:22px;text-align:right}
.ncdq-text{font-size:13px;font-weight:650;line-height:1.5}
.ncdq-a{margin-bottom:0;grid-column:2;grid-row:1}
.ncdq-q .field-warn,.ncdq-q .field-err,.ncdq-extra{grid-column:1/-1}
.ncdq-extra{padding-left:32px;border-left:2px solid var(--teal-100);margin-left:2px}

/* ---- the findings rail: the engine's own words, never paraphrased ---- */
.findings{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:var(--shadow),var(--hi-soft);margin-bottom:14px;overflow:hidden}
.findings-h{display:flex;align-items:center;gap:9px;padding:12px 14px;border-bottom:1px solid var(--line-2)}
.findings-h h3{font-size:11px;font-weight:900;letter-spacing:.13em;text-transform:uppercase}
.findings-h .pill{margin-left:auto}
.findings.errors{border-color:rgba(185,28,28,.28)}
.findings.errors .findings-h{background:var(--error-light);color:var(--error-dark)}
.findings.warnings{border-color:rgba(161,98,7,.28)}
.findings.warnings .findings-h{background:var(--warning-light);color:var(--warning-dark)}
.finding{padding:10px 14px;border-bottom:1px solid var(--line-2)}
.finding:last-child{border-bottom:0}
.finding-jump{display:block;width:100%;text-align:left;border:0;background:none;cursor:pointer;padding:0;font:inherit}
.finding-jump:focus-visible{outline:2px solid var(--teal-500);outline-offset:2px;border-radius:4px}
.finding-where{display:block;font-size:10px;font-weight:800;color:var(--teal-700);font-family:var(--font-mono);
  letter-spacing:.02em}
.finding-msg{display:block;font-size:12px;font-weight:650;line-height:1.45;color:var(--ink);margin-top:3px}
.finding-jump:hover .finding-msg{text-decoration:underline}
.finding-rule{display:inline-block;margin-top:5px;font-size:10px;font-weight:800;color:var(--ink-3);
  font-family:var(--font-mono);background:var(--line-2);border-radius:var(--pill);padding:1px 8px}
.finding .btn{margin-top:8px}

/* ---- the media panel: the §V.D.5 signature and the §V.D.2 photos (P13, D-100/D-101) ---- */
/* It sits under the findings in the same rail, in the findings card's idiom — the same surface,
   the same header type — because it is the other thing a clinician does at the end of a visit,
   not a different kind of screen. */
.enc-media{margin-top:14px}
.media-consent{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-bottom:12px}
.media-consent .btn{margin-left:auto}
.media-consent .media-meta{width:100%;margin:0}
.media-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:var(--shadow),var(--hi-soft);margin-bottom:14px;padding:14px}
.media-h{display:flex;align-items:center;gap:9px;margin-bottom:11px}
.media-h h3{font-size:11px;font-weight:900;letter-spacing:.13em;text-transform:uppercase}
.media-h .pill{margin-left:auto}
.media-empty{font-size:12px;font-weight:650;line-height:1.45;color:var(--ink-3);margin-bottom:11px}
.media-meta{font-size:11px;font-weight:700;color:var(--ink-3);line-height:1.45;margin:8px 0 11px}
/* The stored signature is a trimmed PNG on a transparent background: it needs a light ground of
   its own, or dark ink on a dark surface disappears. */
.media-sig-img{display:block;width:100%;max-height:120px;object-fit:contain;object-position:left center;
  background:var(--surface-2);border:1px solid var(--line-2);border-radius:var(--r-sm);padding:6px}
.media-strip{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:11px}
.media-thumb{display:block;width:72px;text-decoration:none;color:var(--ink-3)}
.media-thumb img{display:block;width:72px;height:72px;object-fit:cover;border-radius:var(--r-sm);
  border:1px solid var(--line)}
.media-thumb-at{display:block;font-size:10px;font-weight:800;margin-top:3px;font-family:var(--font-mono)}
/* The file input is the label: it opens the camera on a phone and the picker everywhere else. */
.media-add{display:inline-flex;cursor:pointer}
.media-add input[type=file]{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}

/* ---- the pad itself: OLD's 3:1 strip, with a signature rule drawn under it ---- */
.sigpad{margin-top:4px}
.sigpad .note{margin-bottom:12px;font-size:11.5px;line-height:1.5}
.sigpad-modes{display:flex;gap:8px;margin-bottom:12px}
.sigpad-box{position:relative;border:1px solid var(--line);border-radius:var(--r-sm);
  background:var(--surface-2);overflow:hidden;margin-bottom:10px;touch-action:none}
.sigpad-box canvas{display:block;width:100%;touch-action:none;cursor:crosshair}
.sigpad-base{position:absolute;left:12%;right:12%;bottom:22%;border-bottom:1px dashed var(--line);
  pointer-events:none}
.sigpad-foot{display:flex;align-items:center;gap:8px}

/* ================================================================ ADMIN */
.user-list{display:flex;flex-direction:column}
.user-row{display:flex;align-items:center;gap:14px;padding:13px 18px;border-bottom:1px solid var(--line-2)}
.user-row:last-child{border-bottom:0}
.user-row.inactive{opacity:.55}
.user-who{flex:1;min-width:0}
.user-name{display:block;font-weight:800;font-size:13.5px}
.user-meta{display:block;font-size:11.5px;font-weight:650;color:var(--ink-3);margin-top:1px}
.user-row select.ctl{width:auto;min-width:136px}

/* ---- the Formulary (P14) -------------------------------------------------
   The same row shape as the account list: what it is on the left, the clinic's own two cells
   in the middle, the stock flag and the way out on the right. */
.formulary-list{display:flex;flex-direction:column}
.formulary-row{display:flex;align-items:center;gap:12px;padding:12px 18px;border-bottom:1px solid var(--line-2)}
.formulary-row:last-child{border-bottom:0}
.formulary-who{flex:1 1 34%;min-width:0}
.formulary-name{display:block;font-weight:800;font-size:13.5px}
.formulary-meta{display:block;font-size:11px;font-weight:650;color:var(--ink-3);margin-top:1px}
.formulary-row input.ctl{flex:1 1 22%;min-width:130px;width:auto}
.formulary-stocked{display:inline-flex;align-items:center;gap:7px;flex:none;
  font-size:12px;font-weight:750;color:var(--ink-2);cursor:pointer}
.formulary-row.stocked .formulary-name{color:var(--teal-ink)}
@media (max-width:820px){.formulary-row{flex-wrap:wrap}.formulary-who{flex-basis:100%}}

/* ---- the pharmacy queue (P15) --------------------------------------------
   Read-only, so the same row shape with nothing to type in: what was prescribed on the left,
   why it left the shelf and where it stands on the right. */
.formulary-queue{display:flex;flex-direction:column}
.formulary-queue > .field-help{padding:12px 18px 0}
.formulary-queue-row{display:flex;align-items:center;gap:12px;padding:12px 18px;
  border-bottom:1px solid var(--line-2)}
.formulary-queue-row:last-child{border-bottom:0}
.formulary-queue-row .formulary-meta > span + span{margin-left:8px}
@media (max-width:820px){.formulary-queue-row{flex-wrap:wrap}}

/* A grid row is this app's table: the columns are declared by the screen, and the head row is
   the same grid with the table-header treatment, so the two can never drift apart. */
.audit-rows,.ml-rows,.tx-rows,.imp-rows,.gen-encounters{display:flex;flex-direction:column}
.audit-row,.ml-row,.tx-row,.imp-row,.gen-row{
  border-bottom:1px solid var(--line-2);font-size:12px;font-weight:650;align-items:center;
  display:grid;gap:10px}
.audit-row:last-child,.ml-row:last-child,.tx-row:last-child,.imp-row:last-child,.gen-row:last-child{border-bottom:0}
.ml-row.head,.tx-row.head,.imp-row.head,.gen-row.head{
  font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-3);
  border-bottom:1px solid var(--line);background:none}
.gen-row,.imp-row{cursor:pointer;transition:background-color .16s ease}
.gen-row:hover,.imp-row:hover{background:var(--surface-2)}
.gen-row.head,.imp-row.head{cursor:default}
.gen-row.head:hover,.imp-row.head:hover{background:none}

.audit-row{grid-template-columns:150px 160px 140px 150px minmax(0,1fr);padding:10px 18px}
.audit-ts{color:var(--ink-3);font-variant-numeric:tabular-nums}
.audit-who{font-weight:800}
.audit-target,.audit-detail{color:var(--ink-2);overflow:hidden;text-overflow:ellipsis}

.ml-row{grid-template-columns:130px minmax(0,1fr) 60px 110px 110px 80px 76px;padding:9px 4px}
.ml-rows{margin-top:14px}
.ml-row.known{background:var(--success-light)}

.gen-patients{display:flex;flex-wrap:wrap;gap:7px;margin-top:14px}
.gen-encounters{margin-top:14px}
.gen-row{grid-template-columns:20px 96px 100px minmax(0,1fr);padding:9px 4px}
.gen-label{color:var(--ink-2);overflow:hidden;text-overflow:ellipsis}
.gen-bar{margin-top:16px;display:flex;gap:10px;flex-wrap:wrap;align-items:center}

/* The 422 list. Coral, because a refusal by the Data Dictionary is the app's own voice —
   and every sentence in it is a rule's, quoted rather than paraphrased. */
.gen-errors,.imp-problems,.tx-deficiencies{display:flex;flex-direction:column;gap:7px;margin-top:14px}
.gen-errors-h{font-size:12.5px;font-weight:900;color:var(--coral-700);display:flex;align-items:center;gap:7px}
.gen-err{display:grid;grid-template-columns:auto auto minmax(0,1fr) auto;gap:9px;align-items:baseline;
  padding:9px 12px;border-radius:var(--r-sm);border:1px solid rgba(229,96,59,.4);
  background:linear-gradient(180deg,var(--coral-50),rgba(255,255,255,.9))}
.gen-err-at{color:var(--coral-700);font-size:11px;font-weight:800;font-family:var(--font-mono)}
.gen-err-msg{font-size:12px;font-weight:650;color:var(--ink);line-height:1.45}
.gen-err-entry{font-size:10.5px;color:var(--ink-3);font-weight:800;font-family:var(--font-mono)}

/* Nine columns and five per-row actions: the transmittal log keeps its natural width and
   scrolls sideways inside its card, exactly as OLD's wide admin tables do, rather than wrapping
   its buttons onto a second line and turning every row into a ragged block. */
.card:has(> .tx-rows){overflow:auto;-webkit-overflow-scrolling:touch}
.tx-rows{min-width:1230px}
.tx-row{grid-template-columns:180px 54px minmax(0,1fr) 128px 100px 84px 104px 118px auto;padding:10px 18px}
.tx-row > .row.tight{flex-wrap:nowrap;justify-content:flex-end}
.tx-file{color:var(--ink-2);overflow:hidden;text-overflow:ellipsis}
.tx-txn{color:var(--ink-2);font-size:11.5px;font-family:var(--font-mono)}
.tx-row-wrap{display:flex;flex-direction:column;border-bottom:1px solid var(--line-2)}
.tx-row-wrap > .tx-row{border-bottom:0}
/* PhilHealth's own deficiency list, quoted. Coral for the same reason the 422 list is. */
.tx-deficiencies{padding:0 18px 14px;margin-top:0}

.imp-rows{margin-top:14px}
.imp-row{grid-template-columns:20px 130px minmax(0,1fr) 180px auto;padding:9px 4px}
.imp-row.done{grid-template-columns:130px minmax(0,1fr);cursor:default}
.imp-row .audit-detail{grid-column:1/-1}
.imp-problems{margin-top:14px}

/* the PhilHealth API state line, and what a lookup answered */
.pka-state{display:flex;flex-wrap:wrap;align-items:center;gap:9px}
.pka-state .field-help{flex:1 1 100%;margin-top:2px}
.pka-result{display:flex;align-items:center;gap:9px;margin-top:12px;min-height:22px;font-size:12.5px;font-weight:700;
  color:var(--ink-2)}
.card.pad .form-grid + .btn{margin-top:14px}

/* ================================================================ RESPONSIVE */
@media (max-width:1180px){
  .enc-body{grid-template-columns:minmax(0,1fr)}
  .enc-nav{margin-bottom:16px}
  .rail-sec{flex-direction:row;flex-wrap:wrap;align-items:center;gap:6px}
  .rail-h{width:100%}
  .nav-item{width:auto;border:1px solid var(--line);border-radius:var(--pill);padding:6px 12px}
  .enc-findings{position:static;max-height:none}
  .audit-row,.ml-row,.tx-row,.imp-row{grid-template-columns:1fr 1fr;gap:4px 10px}
  .gen-err{grid-template-columns:1fr}
}
@media (max-width:880px){
  /* The registry table already scrolls inside its card, so it keeps natural column widths
     rather than being squeezed into the viewport and wrapping every name onto three lines. */
  .results table{table-layout:auto}
  .results table td{overflow:visible}
  .enc-h{gap:12px}
  .enc-title h1{font-size:21px}
  .enc-actions{margin-left:0;width:100%}
  .enc-actions .btn{flex:1 1 auto}
  /* Forty-three pills would push the first question off a phone screen: the rail keeps a couple
     of rows and scrolls for the rest. Collapsing a section is the other half of the answer. */
  .enc-nav{max-height:196px;overflow:auto;-webkit-overflow-scrolling:touch}
  .grp-h{position:static;padding:12px 14px}
  .grp-b{padding:14px}
  .panel.recommend{margin:0 14px 14px;padding:14px}
  .rec-answers{grid-template-columns:1fr}
  .user-row{flex-wrap:wrap}
  .audit-row,.tx-row{padding-left:14px;padding-right:14px}
  .tx-deficiencies{padding-left:14px;padding-right:14px}
}
@media (max-width:700px){
  .ncdq-q{grid-template-columns:1fr}
  .ncdq-ask,.ncdq-a{grid-column:1;grid-row:auto}
  .ncdq-extra{padding-left:0;border-left:0}
  .tl-date{min-width:0}
  .timeline .tl-item{flex-wrap:wrap;gap:4px 12px}
}