/*
 * style.css — Checklist LIFF form-specific styles.
 *
 * hub.css (copied from liff/shared/) provides the base: dark navy moodboard,
 * form field baseline, sticky footer (R6), stepper, checkbox rows, shot-test
 * card styles. This file adds only Checklist-specific layout adjustments.
 *
 * Load order in index.html:
 *   1. hub.css   — base / shared
 *   2. style.css — Checklist overrides (this file)
 */

/* ── Session section headers ─────────────────────────────────────────────────
   The "Opening" and "Closing" headings sit inside a tinted banner so the two
   sessions are visually distinct when the barista scrolls through.             */

.session-heading {
  background-color: var(--color-surface-alt);
  border-radius: 10px;
  padding: 12px 16px;
  margin-top: 18px;
  margin-bottom: 10px;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--color-text);
}

.session-heading:first-of-type {
  margin-top: 4px;
}

/* ── Checklist task cards ────────────────────────────────────────────────────
   The two task-checkbox groups (opening / closing) reuse `.hub-section` from
   hub.css for the rounded card surface + shadow. The .checklist-card modifier
   adds inner padding so the checkbox rows breathe — without it the rows hug
   the card edge because they're not inside a `.hub-section-body` wrapper.   */

.hub-section.checklist-card {
  padding: 4px 16px;
}

/* ── Readings section ────────────────────────────────────────────────────────
   The 4 numeric reading fields (pH/TDS tap, pH/TDS machine, TEMP, MOISTURE)
   display as a 2-column grid so they fit on one screen.                        */

.readings-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 16px;
}

.readings-grid .hub-field {
  margin-bottom: 0;
}

/* ── Shot test list ───────────────────────────────────────────────────────────
   The variable-length shot-test section. hub.css already defines .hub-shot-entry
   and .hub-shot-dimension; we only add a container margin here.                */

.shot-list-container {
  margin-bottom: 10px;
}

/* "Add shot test" button row — centred, extra top margin. */
.shot-add-row {
  text-align: center;
  margin-bottom: 16px;
}

/* ── Finalized notice ────────────────────────────────────────────────────────
   Reuses .hub-submitted-notice from hub.css with a Checklist-specific icon.   */

.finalized-notice-icon {
  font-size: 2.5rem;
  margin-bottom: 10px;
}

/* ── Footer progress line ────────────────────────────────────────────────────
   The "7/10" task-progress counter in the sticky footer. hub.css defines
   .footer-progress as the containing element; we only ensure the number is
   visually prominent.                                                           */

.footer-progress-number {
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-accent-alt);
}