/* ============================================================
   Enduro Field Portal — weekly-report.css
   PAGE LAYOUT ONLY. All components (.field/.input/.btn/.repeat/
   .photo-grid/.portal-nav/.wizard/.portal-draft…) come
   from assets/css/portal.css, which itself sits on assets/css/base.css
   (brand tokens + reset).

   SPEC (2026-06-25 overhaul): this page is a no-scroll page-wipe WIZARD
   (portal.css §9C). This file owns ONLY what's specific to the Weekly
   Progress Report: the intro/step headers, the 2×3 matched meta grid, the
   step sub-sections, and the @media print stylesheet that flattens the
   wizard's absolutely-positioned steps into a clean printed document.

   The shared top nav (portal.css §9B), the wizard layout + horizontal wipe
   (§9C), the split draft chip (§9D), the red focus ring (§6), the
   required-asterisk / optional-removed rules (§5) and the date/time picker
   affordance (§5) are ALL inherited — never re-declared here.

   Square corners everywhere (inherited). No brand colour added here beyond
   what portal.css already governs (focus ring / true errors).
   ============================================================ */


/* ============================================================
   1. INTRO STEP (step 1) — title + 2×3 meta grid + gate
   The wizard step is already centered both axes (portal.css §9C). The
   centered stage keeps a generous gap above the title (>100px on the
   ~960px target), satisfying SPEC §2's "padding above the page title"
   without breaking the centering the core wizard spec (§1) requires.
   ============================================================ */
.wr-intro-head { margin-bottom: var(--s7); }

/* Restored note sits ~15px below the title, no icon (Radik 2026-06-29). */
.wr-intro-head { position: relative; }
/* Out of flow — floats just above the title; revealing it never shifts the grid. */
.wr-restored { position: absolute; bottom: 100%; left: 0; margin: 0 0 6px; color: var(--text-2); }
.wr-restored[hidden] { display: none; }

/* Draft chip moved INTO flow ~40px below the meta grid (under the Approximate %
   complete field) — was absolute top-right (Radik 2026-06-29). position:relative
   so its dropdown menu still anchors to the chip, not the step. */
#wr-resume.portal-draft {
  position: relative;
  top: auto;
  right: auto;
  margin-top: 40px;
}
/* The chip sits low inside the wizard stage, which clips overflow — so the menu
   is fixed-positioned under the toggle in JS (escapes the clip) and drops DOWN.
   See positionResumeMenu() in weekly-report.js. (Radik 2026-06-29.) */

/* Photos step (step 6) header: title left, actions pinned to the right gutter.
   The actions (Clear all · + Add photos) show only once photos exist; the big
   dropzone is the empty state. */
.wr-photos-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s4);
  /* Sticky in place: title + Clear all + Add photos stay put while the grid
     scrolls under them. Back/Export are already pinned to the bottom by the
     §11b laptop layout, so on this step only the photo grid moves. (Radik 2026-06-29) */
  position: sticky;
  top: 0;
  z-index: 4;
  background: var(--white);
  padding-bottom: var(--s4);
}
.wr-photos-actions {
  display: inline-flex;
  align-items: center;
  gap: var(--s4);
}
.wr-photos-actions[hidden] { display: none; }

/* Two-column photo grid that grows DOWN as photos are added — bigger tiles /
   bigger preview than the default small auto-fill grid. The PDF export grid is
   already 2-col (print section below). (Radik 2026-06-29) */
.photo-grid { grid-template-columns: repeat(2, 1fr); }


/* ============================================================
   2. META GRID  —  2 columns × 3 rows, all six cells MATCHED (SPEC §3)
   grid-auto-rows:1fr makes every row equal height; pushing each control
   to the bottom of its cell (margin-top:auto) keeps all inputs aligned on
   one baseline even if a label wraps — so the six cells read as one
   continuous block. The four required cells gate the wipe to step 2.
   ============================================================ */
.wr-meta-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: 1fr;
  gap: var(--s4);
  margin-top: var(--s7);
}
.wr-meta-grid .field {
  margin: 0;                       /* the grid gap owns spacing */
  display: flex;
  flex-direction: column;
}
/* The control sits at the bottom of its cell → inputs (incl. the Week / %
   <select>s, which carry .input) share one baseline. */
.wr-meta-grid .field > .input { margin-top: auto; }


/* ============================================================
   3. INTERIOR STEP HEADERS (steps 2–6)
   The step heading and the helper line. The page sub-lede + the meta-section
   sub-text are gone (SPEC §2); the per-step helper line stays — it's task
   guidance, not the removed meta sub-text. The old "Step N of 6" counter was
   removed (SPEC item 5) — the wizard circle indicator is the single source of
   step state now.
   ============================================================ */
.wr-step-head { margin-bottom: var(--s6); }
.wr-step-head .section-sub { margin-top: var(--s2); }

/* Step 4 stacks two repeatable sub-sections under one heading. */
.wr-subsection + .wr-subsection { margin-top: var(--s7); }
.wr-subhead {
  font-size: var(--t-label);
  font-weight: 700;
  letter-spacing: -0.005em;
  color: var(--text);
  margin-bottom: var(--s3);
}


/* ============================================================
   4. PER-STEP NAV NOTE
   The Back/Continue layout comes from portal.css §9C (Refinement Pass 2 §D/§E:
   no arrows; Back sits next to Continue, ~30px apart). The page-local actions
   note (final step) is all that stays here. "Clear form" uses the shared
   .btn-link (portal.css).
   ============================================================ */
.wr-actions-note {
  margin-top: var(--s4);
  font-size: var(--t-hint);
  color: var(--text-2);
}


/* ============================================================
   6. RESPONSIVE  —  laptop primary, mobile pleasant
   ============================================================ */
@media (max-width: 640px) {
  /* On a single column the equal-row / bottom-pinned tricks would leave big
     gaps, so let cells size to content and reset the baseline pin. */
  .wr-meta-grid {
    grid-template-columns: 1fr;
    grid-auto-rows: auto;
    gap: var(--s5);
  }
  .wr-meta-grid .field > .input { margin-top: 0; }
}


/* The print letterhead is export-only (hidden on screen). */
.wr-print-only { display: none; }


/* ============================================================
   7. PRINT  —  the CLIENT-FACING export (report-export.js → window.print()).
   A clean, minimal, near-monochrome document: a small logo letterhead, airy
   grouped sections, hairline rules, generous white space. Function first, no
   brand glam — pretty via spacing + type, not colour or shapes. The wizard is
   flattened so the whole report prints.
   Every page — INCLUDING continuation pages — gets a real 1" margin on all sides
   via @page margin, so nothing ever spills a page edge. CSS cannot remove the
   browser's own URL/date header+footer; turn them off ONCE in the print dialog
   ("Headers and footers" → off — Chrome remembers it). (Radik 2026-07-03)
   ============================================================ */
@media print {

  @page { size: letter; margin: 0.75in; }

  html, body { background: #fff; color: #101820; }
  .portal { font-size: 10.5pt; line-height: 1.5; }   /* margins come from @page */

  /* Hide all interactive chrome + screen-only bits. */
  [data-print-hide],
  .portal-nav, .wizard-nav, .repeat-add, .repeat-remove,
  .photo-drop, .photo-handle, .photo-remove,
  .btn, .btn-icon, .btn-link,
  .wr-intro-head, .wr-restored, .portal-draft, .wizard-progress {
    display: none !important;
  }

  /* Print-only letterhead: small logo · document title · generated date. */
  .wr-print-only { display: block; }
  .wr-print-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24pt;
    padding-bottom: 10pt;
    margin-bottom: 18pt;
    border-bottom: 1px solid #DADADA;
  }
  .wr-print-logo svg { width: 87px; height: auto; display: block; }   /* 25% smaller */
  .wr-print-id { text-align: right; }
  .wr-print-doctitle { display: block; font-size: 15pt; font-weight: 800; letter-spacing: -0.01em; color: #101820; }
  .wr-print-gen { display: block; margin-top: 3pt; font-size: 8.5pt; font-weight: 500; color: #8A8A8A; }

  /* --- Flatten the wizard into document flow --- */
  .wizard {
    position: static !important;
    height: auto !important;
    overflow: visible !important;
  }
  .wizard-step {
    position: static !important;
    display: block !important;
    transform: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    padding: 0 !important;
    break-inside: auto;
  }
  .wizard-stage {
    max-width: none !important;
    max-height: none !important;
    overflow: visible !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  /* Each body step = an airy, grouped section separated by a hairline. */
  .wizard-step + .wizard-step {
    border-top: 1px solid #ECECEC;
    margin-top: 30pt;
    padding-top: 22pt !important;
  }
  .wr-step-head { margin-bottom: 16pt; break-inside: avoid; page-break-inside: avoid; }
  .wr-subsection { break-inside: avoid; page-break-inside: avoid; }
  .wr-subsection + .wr-subsection { margin-top: 22pt; }   /* clear air between sub-groups */

  /* Headings read as a document — sentence case, not the on-screen ALL CAPS. */
  .section-h { font-size: 14pt; font-weight: 700; text-transform: none; letter-spacing: -0.01em; color: #101820; }
  .section-sub { display: none; }        /* helper text is screen-only guidance */
  .required, .optional { display: none; } /* badge tokens aren't part of the document */
  /* Sub-heads read as muted labels — clearly subordinate to the section title. */
  .wr-subhead { font-size: 9.5pt; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; margin: 0 0 6pt; color: #8A8A8A; }

  /* Meta = a clean two-column key/value block, right under the letterhead. */
  .wr-meta-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-auto-rows: auto !important;
    gap: 10pt 24pt;
    margin: 0;
  }
  .wr-meta-grid .field { display: block; }
  .wr-meta-grid .field > .input { margin-top: 0 !important; }
  .label { font-size: 7.5pt; font-weight: 700; color: #8A8A8A; text-transform: uppercase; letter-spacing: 0.6px; margin-bottom: 2pt; }
  .hint { display: none; }

  /* --- Flatten inputs to read as printed text (value shows, box gone) --- */
  .input,
  .portal textarea,
  .portal select {
    box-shadow: none !important;
    background: transparent !important;
    border: 0 !important;
    padding: 0 !important;
    color: #101820 !important;
    font-size: 11pt;
    min-height: 0;
    -webkit-appearance: none;
    appearance: none;
  }
  /* Selects (Week / % complete) print as their selected option's text — e.g.
     "12" and "45%" — via the flatten rule above; no chevron, no box. */
  .portal select { background-image: none !important; padding-right: 0 !important; }

  /* type=date: suppress the Chromium shadow-tree glyphs so the printed Date
     line reads as flat document text. (Verify Chromium + Safari.) */
  .portal input[type="date"] { color: #101820 !important; }
  .portal input[type="date"]::-webkit-calendar-picker-indicator { display: none !important; }
  .portal input[type="date"]::-webkit-inner-spin-button,
  .portal input[type="date"]::-webkit-clear-button {
    display: none !important;
    -webkit-appearance: none !important;
    appearance: none !important;
  }
  .portal input[type="date"]::-webkit-datetime-edit {
    padding: 0 !important;
    color: #101820 !important;
  }

  /* Repeatable lines = a tidy list with a small square marker. */
  .repeat-list { margin: 4pt 0 0; padding: 0; }
  .repeat-row { position: relative; display: block; padding-left: 12pt; break-inside: avoid; page-break-inside: avoid; }
  .repeat-row + .repeat-row { margin-top: 5pt; }
  .repeat-row::before { content: ""; position: absolute; left: 0; top: 0.5em; width: 3px; height: 3px; background: #101820; }
  .repeat-row-inner { display: block; overflow: visible; }
  .repeat-input { display: block; }

  /* Keep every heading with the content that follows it — a title must never be
     orphaned at the foot of a page (Radik 2026-06-29). */
  .section-h, .wr-step-head, .wr-subhead { break-after: avoid; page-break-after: avoid; }

  /* Page grouping (Radik): page 1 = main info + Work accomplished + Work
     scheduled; Inspections & comments + Urgent action items = page 2; photos =
     page 3. Each forced section starts a fresh page; its 1" top margin comes from
     @page. The .wizard-step prefix matches the separator rule's specificity so
     these win, and border/margin/padding-top are zeroed so no stray hairline or
     gap rides the top of the new page. */
  .wizard-step.wr-inspections-step,
  .wizard-step.wr-photos-step {
    break-before: page; page-break-before: always;
    border-top: 0 !important; margin-top: 0 !important;
    padding-top: 0 !important;
  }

  /* Date value sits flush-left under its DATE label (the on-screen overlay is
     inset 12px to match the input padding; the printed line has none). */
  .date-field-display { left: 0 !important; right: 0 !important; }

  /* Photos — tidy 2-column grid with captions. */
  .wr-photos-head .section-h { margin-bottom: 8pt; }
  .photo-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; margin-top: 6pt; }
  .photo-tile { break-inside: avoid; page-break-inside: avoid; }
  /* WHOLE photo — NEVER cropped in the export. Hard-reset the on-screen tile
     constraints (aspect-ratio box + overflow clip + object-fit) so a tall photo
     prints in full, at its real shape. (Radik 2026-07-03) */
  .photo-figure {
    box-shadow: none;
    border: 1px solid #DADADA;
    aspect-ratio: auto !important;
    overflow: visible !important;
    height: auto !important;
  }
  .photo-thumb {
    display: block;
    width: 100%;
    height: auto !important;
    object-fit: fill !important;
  }
  /* No photos attached → drop the whole photos page from the export. */
  .wr-photos-step:not(:has(.photo-tile)) { display: none !important; }
  .photo-caption { box-shadow: none !important; border: 0 !important; padding: 3pt 0 0 !important; font-size: 8.5pt !important; color: #6E6E6E !important; }
  /* An empty caption (still showing its placeholder) doesn't print — no stray
     "Add a caption" line under a photo. (Radik 2026-06-29) */
  .photo-caption:placeholder-shown { display: none !important; }
}