/* ============================================================================
   QUDS — utility operational pages.
   QAISBEE-PRODUCT-COMPLETION-NIGHT-20260730
   ----------------------------------------------------------------------------
   ONE copy of the small stylesheet that five pages had each grown their own
   near-identical version of:

     connectproof.html, daily-summary.html, delivery-attempts.html,
     exports.html, source-summary.html

   Those copies had drifted into a palette that belongs to no design system —
   #111827 ink, #e5e7eb borders, #f7f7f8 page, a #eef2ff/#c7d2fe indigo pill,
   14px radii — sitting beside the sixteen pages that already used QUDS. Same
   product, two visual languages, and any change to the shared look had to be
   made five times.

   WHAT THIS DELIBERATELY IS NOT. It is not a rewrite of those pages. Every
   class name and every selector below is one the five pages already use, so the
   markup and the JavaScript are untouched and only the VALUES change — raw hex
   becomes the semantic token that already existed for it. That keeps a visual
   consolidation from turning into a functional regression on working screens.

   Depends on quds-tokens.css being linked first; it defines no raw colours of
   its own, by the same rule the rest of QUDS follows.
   ========================================================================== */

body {
  font-family: var(--quds-font);
  margin: var(--quds-space-5);
  background: var(--quds-page-bg);
  color: var(--quds-text);
  font-size: var(--quds-text-body);
  line-height: var(--quds-leading-body);
}

/* These pages predate the shell, which is where the global box-sizing reset
   lives. Without it a width:100% input adds its own padding and border on top
   of the 100% and overflows its card — the same trap flowproof.html documents. */
*, *::before, *::after { box-sizing: border-box; }

h1 { font-size: var(--quds-text-page); line-height: var(--quds-leading-tight); }
h2 { font-size: var(--quds-text-section); line-height: var(--quds-leading-tight); }

/* --- Surfaces ------------------------------------------------------------- */
.card {
  background: var(--quds-surface);
  border: 1px solid var(--quds-border);
  border-radius: var(--quds-radius);
  padding: var(--quds-space-4);
  margin: var(--quds-space-4) 0;
  /* Wide content scrolls INSIDE its card; the document never scrolls sideways.
     Measured, not assumed: at 390px the tables on connectproof, daily-summary,
     delivery-attempts and source-summary pushed the page to 727px, 483px, 604px
     and 463px respectively. Every table on these pages already sits in a .card
     and their scripts address <tbody> by id, never the table's parent, so this
     needs no wrapper element and no markup change. */
  overflow-x: auto;
}

.cards { display: flex; gap: var(--quds-space-3); flex-wrap: wrap; }

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--quds-space-3);
}

/* --- Text ----------------------------------------------------------------- */
.muted { color: var(--quds-text-muted); }
.metric { font-size: var(--quds-text-display); font-weight: 700; }

/* Status colours carry a weight as well as a hue, so status is never conveyed
   by colour alone. */
.ok     { color: var(--quds-success); font-weight: 700; }
.bad    { color: var(--quds-danger);  font-weight: 700; }
.danger { color: var(--quds-danger);  font-weight: 700; }

.pill {
  display: inline-block;
  background: var(--quds-info-surface);
  border: 1px solid var(--quds-info-border);
  color: var(--quds-info);
  border-radius: var(--quds-radius-pill);
  padding: 2px var(--quds-space-2);
  font-size: var(--quds-text-meta);
}

.note {
  background: var(--quds-info-surface);
  border: 1px solid var(--quds-info-border);
  border-radius: var(--quds-radius-sm);
  padding: var(--quds-space-3);
  font-size: var(--quds-text-small);
}

.stat { color: var(--quds-text-secondary); }
.stat b { color: var(--quds-text); }

.detail {
  font-family: var(--quds-font-mono);
  font-size: var(--quds-text-meta);
  color: var(--quds-text-secondary);
}

/* --- Controls ------------------------------------------------------------- */
input, select, button {
  font: inherit;
  font-family: var(--quds-font);
  min-height: var(--quds-control-height);
  padding: var(--quds-space-2) var(--quds-space-3);
  border: 1px solid var(--quds-border);
  border-radius: var(--quds-radius-sm);
  background: var(--quds-surface);
  color: var(--quds-text);
}

button {
  background: var(--quds-action-primary);
  border-color: var(--quds-action-primary);
  color: var(--quds-text-invert);
  cursor: pointer;
}
button:hover:not(:disabled) {
  background: var(--quds-action-primary-hover);
  border-color: var(--quds-action-primary-hover);
}
button:disabled {
  background: var(--quds-disabled-bg);
  border-color: var(--quds-border);
  color: var(--quds-disabled-text);
  cursor: not-allowed;
}

/* A visible focus ring on every interactive element. These are keyboard-driven
   operational screens; an invisible focus state makes them unusable. */
a:focus-visible,
input:focus-visible,
select:focus-visible,
button:focus-visible {
  outline: var(--quds-focus-ring-width) solid var(--quds-focus-ring);
  outline-offset: var(--quds-focus-ring-offset);
}

a { color: var(--quds-action-primary); }
a.rowlink { text-decoration: none; }
a.rowlink:hover { text-decoration: underline; }

/* --- Tables --------------------------------------------------------------- */
/* The wrapper scrolls, not the page: a wide table must never give the document
   a horizontal scrollbar at 390px. */
.table-scroll { overflow-x: auto; }

table { width: 100%; border-collapse: collapse; background: var(--quds-surface); }

th, td {
  border-bottom: 1px solid var(--quds-border);
  padding: var(--quds-table-pad-y) var(--quds-table-pad-x);
  text-align: left;
  vertical-align: top;
  font-size: var(--quds-text-small);
}

th { background: var(--quds-surface-inset); color: var(--quds-text-secondary); }

pre {
  background: var(--quds-surface-inset);
  border-radius: var(--quds-radius-xs);
  padding: var(--quds-space-2);
  white-space: pre-wrap;
  overflow-x: auto;
  max-width: 520px;
  font-family: var(--quds-font-mono);
  font-size: var(--quds-text-meta);
}

/* --- Small screens -------------------------------------------------------- */
@media (max-width: 640px) {
  body { margin: var(--quds-gutter-mobile); }
  .grid { grid-template-columns: 1fr; }
  /* Touch targets stay usable at 390px. */
  input, select, button { min-height: var(--quds-control-height-lg); }
}