/* ==========================================================================
 * Standard Checklist — styles.
 *
 * Everything is scoped under `.cks-scope`, DOUBLED on the rules that style a
 * control. index.html carries bare global element rules — most importantly
 * (index.html:3755):
 *
 *     button { background-color: var(--brand); color: #FFF !important;
 *              border: 1px solid #000; padding: 8px 15px; margin-top: 10px; }
 *
 * A single class ties that on specificity and LOSES on `color`, because the
 * global carries !important. Left alone, every icon button in this dense table
 * would render as a fat branded block with an invisible white glyph, pushed
 * 10px down. So control rules are doubled AND repeat !important on colour,
 * background, border, padding and margin. This is the same defect CLAUDE.md
 * records for the Fleet port; it is not defensive over-styling.
 *
 * Colour rule: chrome follows the tenant accent through --brand-*; anything
 * carrying MEANING (ok / danger / neutral) uses the fixed status tokens, so a
 * red-branded tenant never gets a red "published" badge. No literal hex for a
 * brand colour anywhere — `npm run brand-doctor` enforces it.
 *
 * ── THE HOVER TRAP (read before adding any button) ────────────────────────
 * index.html:3771 has a bare global:
 *
 *     button:hover { background-color:#FFF; color:var(--brand) !important; }
 *
 * so EVERY button in the app turns white with accent text on hover unless it
 * says otherwise. Two consequences, and both have bitten this file:
 *
 *  1. A hover rule that sets ONLY a background inherits that accent `color`,
 *     so a dark hover background gets accent-on-dark text. **Every :hover rule
 *     must set `color` and `background` together — never one alone.**
 *  2. `:hover` adds specificity, so a hover rule BEATS the selected-state rule
 *     of the same element. A selected green button with white text became grey
 *     with white text — invisible — the moment the cursor touched it.
 *
 * The fix used throughout this file is structural, not another !important:
 * every state is declared WITH its own `:hover` twin in the same rule, so
 * hovering can never contradict what the control means. Add a state, add its
 * hover in the same selector list.
 * ========================================================================== */

.cks-scope { color: var(--text, #1f2937); }

/* ── Screen chrome ─────────────────────────────────────────────────────── */
.cks-scope .cks-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; margin-bottom: 14px;
}
.cks-scope .cks-head > div:first-child { flex: 1 1 320px; min-width: 0; }
.cks-scope .cks-head > button { flex: 0 0 auto; }
.cks-scope .cks-title { font-size: 20px; font-weight: 700; margin: 0; }
.cks-scope .cks-sub-title { font-size: 13px; color: var(--neutral); margin: 2px 0 0; }
.cks-scope .cks-count {
  display: inline-block; min-width: 22px; padding: 1px 8px; border-radius: 11px;
  background: var(--brand-tint); color: var(--brand-dark);
  font-size: 12px; font-weight: 700; text-align: center;
}

/* ── Buttons ───────────────────────────────────────────────────────────── */
.cks-scope.cks-scope .cks-btn {
  background: #fff !important;
  color: var(--text, #1f2937) !important;
  border: 1px solid #d1d5db !important;
  border-radius: 6px !important;
  padding: 7px 13px !important;
  margin-top: 0 !important;
  font-size: 13px; font-weight: 600; cursor: pointer; line-height: 1.2;
}
.cks-scope.cks-scope .cks-btn:hover {
  background: #f3f4f6 !important;
  color: var(--text, #1f2937) !important;   /* or the global paints it accent */
}

.cks-scope.cks-scope .cks-btn-primary,
.cks-scope.cks-scope .cks-btn-primary:hover {
  color: var(--brand-contrast) !important;
  border-color: var(--brand-dark) !important;
}
.cks-scope.cks-scope .cks-btn-primary { background: var(--brand) !important; }
.cks-scope.cks-scope .cks-btn-primary:hover { background: var(--brand-dark) !important; }

/* Publish is an OK action, not a brand action: it carries meaning, so it keeps
   the fixed status green for every tenant (same rule as --sev-*). */
.cks-scope.cks-scope .cks-btn-ok,
.cks-scope.cks-scope .cks-btn-ok:hover {
  color: #fff !important; border-color: var(--ok-dark) !important;
}
.cks-scope.cks-scope .cks-btn-ok { background: var(--ok) !important; }
.cks-scope.cks-scope .cks-btn-ok:hover { background: var(--ok-dark) !important; }

.cks-scope.cks-scope .cks-btn-ghost {
  background: transparent !important;
  color: var(--brand-dark) !important;
  border: 1px dashed var(--brand) !important;
  margin-top: 8px !important;
}
.cks-scope.cks-scope .cks-btn-ghost:hover {
  background: var(--brand-tint) !important;
  color: var(--brand-dark) !important;
}

.cks-scope.cks-scope .cks-link {
  background: none !important; border: none !important; padding: 2px 6px !important;
  margin-top: 0 !important; color: var(--brand-dark) !important;
  font-size: 13px; font-weight: 600; cursor: pointer; text-decoration: underline;
}
.cks-scope.cks-scope .cks-link:hover { color: var(--brand-darker) !important; }

/* Icon buttons: the ones the global rule would destroy most visibly. */
.cks-scope.cks-scope .cks-icon {
  background: transparent !important;
  color: var(--neutral) !important;
  border: 1px solid transparent !important;
  border-radius: 5px !important;
  padding: 2px 5px !important;
  margin-top: 0 !important;
  font-size: 12px; line-height: 1; cursor: pointer;
}
.cks-scope.cks-scope .cks-icon:hover {
  background: var(--brand-tint) !important; color: var(--brand-dark) !important;
}
.cks-scope.cks-scope .cks-icon-danger:hover {
  background: var(--danger-tint) !important; color: var(--danger) !important;
}

/* ── Inputs ────────────────────────────────────────────────────────────── */
.cks-scope.cks-scope .cks-input {
  width: 100%; box-sizing: border-box;
  padding: 7px 9px; border: 1px solid #d1d5db; border-radius: 6px;
  font-size: 13px; background: #fff; color: #111827;
  /* index.html forces select { height:38px; line-height:38px } globally, which
     makes a select in a table row taller than the row it sits in. */
  height: auto; line-height: 1.3;
}
.cks-scope.cks-scope select.cks-input { height: 34px; line-height: 1.3; }
.cks-scope.cks-scope .cks-input:focus {
  outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-a20);
}
.cks-scope .cks-check { width: 16px; height: 16px; accent-color: var(--brand); cursor: pointer; }
.cks-scope .cks-check:disabled { cursor: not-allowed; opacity: .45; }

.cks-scope .cks-f { display: flex; flex-direction: column; gap: 4px; font-size: 12px; font-weight: 600; color: #4b5563; }
.cks-scope .cks-f-wide { grid-column: span 2; }
.cks-scope .cks-flabel { font-size: 12px; font-weight: 600; color: #4b5563; }
.cks-scope .cks-req { color: var(--danger); }
.cks-scope .cks-hint { font-size: 11px; font-weight: 400; color: var(--neutral); line-height: 1.4; }
.cks-scope .cks-tiny { font-size: 11px; }
.cks-scope .cks-muted { color: var(--neutral); }
.cks-scope .cks-center { text-align: center; }

/* ── Header grid ───────────────────────────────────────────────────────── */
.cks-scope .cks-headgrid {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px; padding: 14px; background: #f9fafb;
  border: 1px solid #e5e7eb; border-radius: 8px; margin-bottom: 16px;
}
@media (max-width: 900px) { .cks-scope .cks-headgrid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) {
  .cks-scope .cks-headgrid { grid-template-columns: 1fr; }
  .cks-scope .cks-f-wide { grid-column: span 1; }
}

.cks-scope .cks-modgrid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 4px 10px;
}
.cks-scope .cks-modopt {
  display: flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 500; color: #374151; cursor: pointer;
}

/* ── Sections + the checklist table ────────────────────────────────────── */
.cks-scope .cks-section {
  border: 1px solid #e5e7eb; border-radius: 8px;
  margin-bottom: 16px; overflow: hidden; background: #fff;
}
.cks-scope .cks-sechead {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; background: var(--brand-tint); border-bottom: 1px solid #e5e7eb;
}
.cks-scope .cks-secnum { font-weight: 800; font-size: 14px; color: var(--brand-darker); min-width: 20px; }
.cks-scope.cks-scope .cks-secname {
  flex: 1; font-weight: 700; text-transform: none; background: #fff;
}
.cks-scope .cks-secbtns { display: flex; gap: 2px; }

/* A wide table scrolls INSIDE its own box. Without this the table widens the
   whole document, the page gains a horizontal scrollbar, and the fixed header's
   right-hand block (user name / company) is pushed out of view — which is
   exactly how this first shipped. The page body must never scroll sideways. */
.cks-scope .cks-tablewrap { width: 100%; overflow-x: auto; }

.cks-scope .cks-table { width: 100%; border-collapse: collapse; font-size: 13px; }
/* Fixed layout + explicit widths keep the columns in place whether the table is
   empty or full; with `auto` the headers collapse leftwards into a huddle as
   soon as there are no rows. */
.cks-scope .cks-table { table-layout: fixed; }
.cks-scope .cks-table-list  { min-width: 880px; }
.cks-scope .cks-table-build { min-width: 840px; }
.cks-scope .cks-table thead th {
  text-align: left; font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .03em; color: #6b7280;
  padding: 8px 10px; background: #f9fafb; border-bottom: 1px solid #e5e7eb;
  white-space: nowrap;
}
.cks-scope .cks-table tbody td {
  padding: 6px 10px; border-bottom: 1px solid #f3f4f6; vertical-align: middle;
  overflow-wrap: anywhere;   /* a long checklist name wraps instead of stretching the table */
}
.cks-scope .cks-table tbody tr:last-child td { border-bottom: none; }
.cks-scope .cks-sno { font-variant-numeric: tabular-nums; font-weight: 600; color: #6b7280; white-space: nowrap; }

.cks-scope .cks-w-name { width: 26%; }
.cks-scope .cks-w-cat  { width: 13%; }
.cks-scope .cks-w-mod  { width: 20%; }
.cks-scope .cks-w-scope{ width: 14%; }
.cks-scope .cks-w-stat { width: 9%; }
.cks-scope .cks-w-ver  { width: 8%; }
.cks-scope .cks-w-act  { width: 10%; }

/* Builder columns are PERCENTAGES that sum to exactly 100%, and every column is
   specified — including Checklist Items. With `table-layout: fixed` a browser
   redistributes any leftover space across the columns itself, so pixel widths
   that do not add up to the table width make two identical tables render with
   DIFFERENT column widths (Correct Answer came out 150px in one section and
   218px in the next). Percentages leave nothing to redistribute, so every
   section aligns. `min-width` on the table keeps them readable while the
   wrapper scrolls. */
.cks-scope .cks-w-sno  { width: 7%; }
.cks-scope .cks-w-item { width: 33%; }
.cks-scope .cks-w-type { width: 18%; }
.cks-scope .cks-w-ans  { width: 17%; }
.cks-scope .cks-w-mand { width: 12%; text-align: center; }
.cks-scope .cks-w-more { width: 13%; text-align: center; }

/* An Instruction row is read, not answered — tint it so that reads at a glance. */
.cks-scope .cks-row-instr td { background: var(--info-tint); }

.cks-scope .cks-detail td { background: #f9fafb; padding: 12px 14px !important; }
.cks-scope .cks-detail-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px;
}
.cks-scope .cks-note {
  grid-column: 1 / -1; font-size: 12px; font-weight: 400; color: var(--info-dark);
  background: var(--info-tint); border-left: 3px solid var(--info);
  padding: 8px 10px; border-radius: 0 5px 5px 0; line-height: 1.5;
}

/* ── List table ────────────────────────────────────────────────────────── */
.cks-scope .cks-sub { font-size: 12px; font-weight: 400; color: var(--neutral); margin-top: 2px; }
.cks-scope .cks-actions { white-space: nowrap; }
.cks-scope .cks-chip {
  display: inline-block; padding: 1px 8px; margin: 1px 3px 1px 0; border-radius: 10px;
  background: var(--brand-tint); color: var(--brand-darker); font-size: 11px; font-weight: 600;
}
.cks-scope .cks-badge {
  display: inline-block; padding: 2px 9px; border-radius: 10px;
  font-size: 11px; font-weight: 700; text-transform: capitalize;
}
.cks-scope .cks-badge-ok    { background: var(--ok-a15); color: var(--ok-dark); }
.cks-scope .cks-badge-draft { background: var(--neutral-tint); color: var(--neutral); }
.cks-scope .cks-badge-off   { background: var(--danger-tint); color: var(--danger-dark); }

.cks-scope .cks-empty { text-align: center; color: var(--neutral); padding: 26px 12px; font-size: 13px; }
.cks-scope .cks-empty-box { border: 1px dashed #d1d5db; border-radius: 8px; background: #f9fafb; }

/* ── Messages ──────────────────────────────────────────────────────────── */
.cks-scope .cks-msg {
  padding: 9px 12px; border-radius: 6px; font-size: 13px; font-weight: 600; margin-bottom: 12px;
}
.cks-scope .cks-msg-ok  { background: var(--ok-a15);      color: var(--ok-dark);     border: 1px solid var(--ok); }
.cks-scope .cks-msg-err { background: var(--danger-tint); color: var(--danger-dark); border: 1px solid var(--danger); }
.cks-scope .cks-err     { color: var(--danger-dark); font-size: 12px; font-weight: 600; }

/* ── Modal ─────────────────────────────────────────────────────────────── */
/* z-index sits above index.html's header (9999) and sidebar (10001) — the Fleet
   port shipped a modal at 500 that opened BEHIND the black header. */
.cks-scope.cks-overlay {
  position: fixed; inset: 0; background: rgba(0, 0, 0, .5); z-index: 10060;
  display: flex; align-items: flex-start; justify-content: center;
  padding: 40px 16px; overflow: auto;
}
.cks-scope .cks-modal {
  background: #fff; border-radius: 10px; width: 100%; max-width: 520px;
  box-shadow: 0 16px 48px rgba(0, 0, 0, .3); overflow: hidden;
}
.cks-scope .cks-modal-head {
  padding: 13px 16px; border-bottom: 1px solid #e5e7eb; font-size: 15px; background: #f9fafb;
}
.cks-scope .cks-modal-body { padding: 16px; display: flex; flex-direction: column; gap: 13px; }
.cks-scope .cks-modal-foot {
  padding: 12px 16px; border-top: 1px solid #e5e7eb;
  display: flex; justify-content: flex-end; gap: 8px; background: #f9fafb;
}

/* ── Builder action bar ────────────────────────────────────────────────── */
.cks-scope .cks-actionbar {
  display: flex; gap: 8px; justify-content: flex-end;
  padding: 14px 0 4px; border-top: 1px solid #e5e7eb; margin-top: 16px;
}


/* ==========================================================================
 * RUN view — the iPAS table, one row per item.
 *
 * Copied from the reference screens, not invented: section header, a header row
 * (S.No | Checklist Items | Answer | Remark), then one compact row per item
 * with every field inline. ~52px a row against ~230px for the legacy card, so
 * an operator sees a dozen items at once instead of one per screen.
 *
 * Mobile: the table cannot simply shrink — below 720px each row becomes a
 * stacked block with the same fields, because four columns at 380px wide is
 * two words per line and unusable. Inputs stay 16px, or iOS Safari zooms the
 * page on focus (a functional bug, not a style choice), and every touch target
 * stays >= 40px.
 * ========================================================================== */

.cks-r { display: flex; flex-direction: column; gap: 14px; padding-bottom: 4px; }

/* ── Section ────────────────────────────────────────────────────────────── */
.cks-r .cks-r-sec { border: 1px solid #e5e7eb; border-radius: 8px; overflow: hidden; background: #fff; }
.cks-r .cks-r-sechead {
  display: flex; align-items: center; gap: 9px;
  padding: 9px 12px; background: var(--brand-tint); border-bottom: 1px solid #e5e7eb;
  position: sticky; top: 0; z-index: 2;   /* the section stays named while scrolling */
}
.cks-r .cks-r-secno { font-size: 13px; font-weight: 800; color: var(--brand-darker); }
.cks-r .cks-r-secname {
  flex: 1; min-width: 0; font-size: 13px; font-weight: 800;
  letter-spacing: .02em; color: var(--brand-darker); text-transform: uppercase;
}
.cks-r .cks-r-seccount {
  padding: 1px 8px; border-radius: 9px; background: #fff;
  color: var(--brand-dark); font-size: 11px; font-weight: 700;
}

/* ── The table ──────────────────────────────────────────────────────────── */
.cks-r .cks-r-table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.cks-r .cks-r-table thead th {
  text-align: left; font-size: 10.5px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .03em; color: #6b7280;
  padding: 6px 10px; background: #f9fafb; border-bottom: 1px solid #e5e7eb; white-space: nowrap;
}
.cks-r .cks-r-w-no { width: 8%; }
.cks-r .cks-r-w-q  { width: 42%; }
.cks-r .cks-r-w-a  { width: 26%; }
.cks-r .cks-r-w-rm { width: 24%; }

.cks-r .cks-r-row > td {
  padding: 7px 10px; border-bottom: 1px solid #f3f4f6; vertical-align: middle;
}
.cks-r .cks-r-table tbody tr:last-child > td { border-bottom: none; }
.cks-r .cks-r-no {
  font-size: 12px; font-weight: 700; color: #9ca3af;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.cks-r .cks-r-qt { font-size: 13.5px; line-height: 1.35; color: #111827; overflow-wrap: anywhere; }
.cks-r .cks-r-req { color: var(--danger); font-weight: 700; margin-left: 3px; }
.cks-r .cks-r-std { font-size: 11px; color: #6b7280; margin-top: 2px; }
.cks-r .cks-r-badges:empty { display: none; }
.cks-r .cks-r-badges { margin-top: 4px; }

/* Answer controls — compact, but never below a 40px touch target. */
.cks-r .cks-r-seg { display: flex; gap: 4px; }
.cks-r.cks-r .cks-r-seg .ckl-seg-btn {
  flex: 1; min-width: 0; padding: 9px 6px !important; margin-top: 0 !important;
  font-size: 12.5px; font-weight: 700; border-radius: 6px !important;
  border: 1px solid #d1d5db !important;
  background: #f9fafb !important; color: #374151 !important;
  cursor: pointer; line-height: 1.2;
}
/* UNSELECTED hover. Sets colour as well as background — on its own the global
   `button:hover { color: var(--brand) !important }` would paint the label the
   tenant accent. */
.cks-r.cks-r .cks-r-seg .ckl-seg-btn:hover {
  background: #eef0f2 !important;
  color: #111827 !important;
  border-color: #9ca3af !important;
}

/* SELECTED states. Each is declared WITH its own :hover twin, because :hover
   carries more specificity than a plain class — without the twin the rule
   above wins the moment the cursor lands, and a selected green button with
   white text turns grey with white text, i.e. invisible. That is the exact
   defect this pairing exists to prevent; do not split these selectors.
   Reuses index.html's own .ckl-seg-active-* classes, so ckAnswerSeg is
   untouched. Pass/fail/na keep the FIXED status colours for every tenant —
   a green "Yes" beside a green brand accent would be unreadable. */
.cks-r.cks-r .ckl-seg-btn.ckl-seg-active-pass,
.cks-r.cks-r .cks-r-seg .ckl-seg-btn.ckl-seg-active-pass:hover {
  background: var(--ok) !important; border-color: var(--ok-dark) !important; color: #fff !important;
}
.cks-r.cks-r .ckl-seg-btn.ckl-seg-active-fail,
.cks-r.cks-r .cks-r-seg .ckl-seg-btn.ckl-seg-active-fail:hover {
  background: var(--danger) !important; border-color: var(--danger-dark) !important; color: #fff !important;
}
.cks-r.cks-r .ckl-seg-btn.ckl-seg-active-na,
.cks-r.cks-r .cks-r-seg .ckl-seg-btn.ckl-seg-active-na:hover {
  background: var(--neutral) !important; border-color: var(--neutral) !important; color: #fff !important;
}

/* The cursor must never make a chosen answer harder to read, so a selected
   button only deepens slightly on hover — the meaning colour is kept. */
.cks-r.cks-r .cks-r-seg .ckl-seg-btn.ckl-seg-active-pass:hover { background: var(--ok-dark) !important; }
.cks-r.cks-r .cks-r-seg .ckl-seg-btn.ckl-seg-active-fail:hover { background: var(--danger-dark) !important; }

.cks-r.cks-r .cks-r-in {
  width: 100%; box-sizing: border-box; padding: 9px 9px;
  border: 1px solid #d1d5db; border-radius: 6px;
  font-size: 16px;              /* 16px or iOS Safari zooms on focus */
  background: #fff; color: #111827; height: auto; line-height: 1.3;
}
.cks-r.cks-r .cks-r-in:focus {
  outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-a20);
}

/* Remark + camera share the last cell. */
.cks-r .cks-r-rm { position: relative; }
.cks-r.cks-r .cks-r-remark {
  width: 100%; box-sizing: border-box; padding: 8px 34px 8px 9px;
  border: 1px solid #d1d5db; border-radius: 6px;
  font-size: 16px; font-family: inherit; resize: vertical; min-height: 38px; line-height: 1.3;
}
.cks-r.cks-r .cks-r-remark:focus {
  outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-a20);
}
/* The camera is a 📷 affordance, not a native file control. index.html styles
   file inputs globally and the browser's own "Choose file / No file chosen"
   widget is far wider than this cell — left visible it spills across the remark
   box. So the input is clipped to the label and made fully transparent; the
   label is the visible, tappable target. width/height on the input itself (not
   just inset) is what actually contains Chrome's widget. */
.cks-r .cks-r-cam {
  position: absolute; top: 7px; right: 7px; width: 26px; height: 26px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; opacity: .75; font-size: 15px; overflow: hidden; border-radius: 5px;
  background: #f3f4f6; border: 1px solid #e5e7eb;
}
.cks-r .cks-r-cam:hover { opacity: 1; background: var(--brand-tint); }
/* !important throughout: the run screen also styles .ckl-run-photo-input (the
   class this input must keep, because ckPhotoChange and the resume path find it
   by that name), and those rules were winning — the native widget showed as a
   grey sliver instead of the camera glyph. */
.cks-r.cks-r .cks-r-cam input.ckl-run-photo-input,
.cks-r.cks-r .cks-r-cam input[type="file"] {
  position: absolute !important; top: 0 !important; left: 0 !important;
  width: 100% !important; height: 100% !important;
  opacity: 0 !important; cursor: pointer !important;
  padding: 0 !important; margin: 0 !important; border: none !important;
  background: none !important; font-size: 0 !important; z-index: 1;
}
.cks-r .cks-r-thumbs:empty { display: none; }
.cks-r .cks-r-thumbs { margin-top: 4px; display: flex; gap: 4px; flex-wrap: wrap; }

/* ── Instruction: read, not answered ─────────────────────────────────────── */
.cks-r .cks-r-note > td {
  padding: 8px 10px; background: var(--info-tint); border-bottom: 1px solid #f3f4f6;
}
.cks-r .cks-r-note-i {
  display: inline-block; width: 16px; height: 16px; border-radius: 50%;
  background: var(--info); color: #fff; font-size: 10px; font-weight: 800;
  font-style: italic; line-height: 16px; text-align: center; margin-right: 7px;
  vertical-align: 1px;
}
.cks-r .cks-r-note-t { font-size: 13px; font-weight: 600; color: var(--info-dark); }
.cks-r .cks-r-note-s { font-size: 11.5px; color: var(--info-dark); opacity: .85; margin-left: 6px; }

/* ── Phone: the row becomes a stacked block ──────────────────────────────── */
/* Four columns at 380px is two words per line, so below 720px each row stacks
   and the labels come back as ::before, keeping the same fields and handlers. */
@media (max-width: 720px) {
  .cks-r .cks-r-table, .cks-r .cks-r-table tbody, .cks-r .cks-r-row { display: block; width: 100%; }
  .cks-r .cks-r-table thead { display: none; }
  .cks-r .cks-r-row {
    padding: 10px 12px; border-bottom: 1px solid #f3f4f6; position: relative;
  }
  .cks-r .cks-r-row > td { display: block; padding: 0; border: none; }
  .cks-r .cks-r-no {
    position: absolute; top: 10px; left: 12px; font-size: 11.5px;
  }
  .cks-r .cks-r-q  { padding-left: 30px !important; margin-bottom: 8px; }
  .cks-r .cks-r-a  { margin-bottom: 7px; }
  .cks-r .cks-r-note > td { display: block; }
  .cks-r.cks-r .cks-r-seg .ckl-seg-btn { padding: 11px 6px !important; font-size: 13.5px; }
}

/* ── Read-only preview ────────────────────────────────────────────────────
   The SAME table as the run screen, with inert controls. Build / view / run
   must look identical, so this only neutralises interaction — it never
   re-styles the layout. */
.cks-r-preview .cks-r-sechead { position: static; }   /* no sticky inside a modal */
.cks-r.cks-r .cks-r-robtn {
  flex: 1; min-width: 0; padding: 9px 6px; border-radius: 6px;
  border: 1px solid #d1d5db; background: #f9fafb; color: #6b7280;
  font-size: 12.5px; font-weight: 700; line-height: 1.2; text-align: center;
  cursor: default;
}
.cks-r .cks-r-roin {
  display: inline-block; width: 100%; box-sizing: border-box;
  padding: 8px 9px; border: 1px dashed #d1d5db; border-radius: 6px;
  background: #fafafa; color: #9ca3af; font-size: 12.5px;
}

/* ── Submitted run, read back (history / detail) ────────────────────────────
   The SAME table as the run, with answers printed where the controls were.
   Colour pairs are declared in full (CLAUDE.md): these sit inside index.html's
   global table styling, which forces a text colour of its own. */
.cks-r-done .cks-r-ans {
  display: inline-block; font-weight: 700; font-size: 14px;
  color: var(--text-strong, #1f2430);   /* brand-doctor-ok: neutral body text */
}
.cks-r-done .cks-r-res {
  display: inline-block; margin-left: 8px; padding: 1px 8px; border-radius: 999px;
  font-size: 10px; font-weight: 800; letter-spacing: .04em;
}
.cks-r-done .cks-r-res-pass { background: var(--ok-tint); color: var(--ok-darker); }
.cks-r-done .cks-r-res-fail { background: var(--danger-tint); color: var(--danger-dark); }
.cks-r-done .cks-r-res-na   { background: var(--neutral-tint); color: var(--neutral); }
.cks-r-done .cks-r-rmv { font-size: 13px; color: var(--neutral); }