/* punch-list module -- tokens only, both themes (dark default, light via
 * [data-theme="light"], tokens resolve per theme).
 *
 * Two-tier CSS discipline (see module-preflight skill):
 *   Tier 1 (CONTAINER): classes rendered inside the module container are
 *     scoped under [data-module="punch-list"].
 *   Tier 2 (MODAL-CONTENT): classes used inside ctx.ui.modal({ content })
 *     render in the body-mounted .strata-overlay (NO data-module ancestor),
 *     so they stay UNSCOPED and rely on the .pl- prefix as the leak guard.
 *     (.pl-form / .pl-frow / .pl-f / .pl-f-narrow / .pl-lock-note only.)
 */

/* ============================================================
 * Tier 1 -- CONTAINER
 * ============================================================ */

/* v4 status palette (D-v4.2): four separable hues so completed + verified no
 * longer both read as green. Module-scoped tokens mapped onto platform
 * primitives (no hardcoded colors; each primitive is defined in both themes,
 * so these resolve per theme). open=amber, in_progress=a dedicated blue that is
 * NOT the accent indigo (pins never blend into UI chrome), completed=green,
 * verified=violet. Named --pl-status-* so Slice D can reuse them on the List
 * status chips (which this slice must NOT restyle). --box-blue / --ct-accent-2
 * are platform tokens. */
[data-module="punch-list"] {
  --pl-status-open: var(--warning);
  --pl-status-open-soft: var(--warning-soft);
  --pl-status-progress: var(--box-blue);
  --pl-status-progress-soft: var(--box-blue-soft);
  --pl-status-done: var(--success);
  --pl-status-done-soft: var(--success-soft);
  --pl-status-verified: var(--ct-accent-2);
  --pl-status-verified-soft: var(--ct-accent-2-soft);
}

[data-module="punch-list"] .pl-root { padding: 20px 22px 48px; }

[data-module="punch-list"] .pl-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 16px; margin-bottom: 16px; flex-wrap: wrap;
}
[data-module="punch-list"] .pl-title { font-size: 20px; font-weight: 700; margin: 0; color: var(--text-primary); }
[data-module="punch-list"] .pl-sub { font-size: 13px; color: var(--text-secondary); margin-top: 2px; }
[data-module="punch-list"] .pl-head-actions { display: flex; gap: 8px; flex-wrap: wrap; }

[data-module="punch-list"] .pl-btn {
  appearance: none; cursor: pointer; border-radius: var(--button-radius);
  padding: 8px 14px; font-size: 13px; font-weight: 600;
  border: 1px solid var(--border); background: var(--panel); color: var(--text-primary);
  touch-action: manipulation;
}
[data-module="punch-list"] .pl-btn:hover { border-color: var(--border-strong); }
[data-module="punch-list"] .pl-btn-primary { background: var(--accent); border-color: var(--accent); color: var(--bg); }

/* Filter bar */
[data-module="punch-list"] .pl-filters {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 14px;
}
[data-module="punch-list"] .pl-search {
  flex: 1 1 220px; min-width: 160px; box-sizing: border-box;
  padding: 8px 12px; font-size: 14px; border-radius: var(--button-radius);
  border: 1px solid var(--border); background: var(--input-bg); color: var(--text-primary);
}
[data-module="punch-list"] .pl-chips { display: inline-flex; gap: 4px; flex-wrap: wrap; }
[data-module="punch-list"] .pl-chip {
  appearance: none; cursor: pointer; border: 1px solid var(--border); background: var(--panel-2);
  color: var(--text-secondary); border-radius: 999px; padding: 6px 12px; font-size: 12px; font-weight: 600;
  touch-action: manipulation;
}
[data-module="punch-list"] .pl-chip.is-active { background: var(--accent-soft); color: var(--accent); border-color: var(--accent-line); }
[data-module="punch-list"] .pl-chip-priority.is-active { background: var(--warning-soft); color: var(--warning); border-color: var(--warning); }
[data-module="punch-list"] .pl-chip-facet { color: var(--text-tertiary); font-weight: 400; margin-left: 3px; }
[data-module="punch-list"] .pl-chip.is-active .pl-chip-facet { color: inherit; }
[data-module="punch-list"] .pl-filter-sep { width: 1px; align-self: stretch; min-height: 22px; background: var(--border); margin: 0 2px; }
[data-module="punch-list"] .pl-area-filter {
  appearance: none; cursor: pointer; padding: 7px 12px; font-size: 13px;
  border-radius: var(--button-radius); border: 1px solid var(--border);
  background: var(--input-bg); color: var(--text-primary);
}

[data-module="punch-list"] .pl-count-line {
  font-size: 12px; color: var(--text-tertiary); font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 8px;
}

/* Empty states */
[data-module="punch-list"] .pl-empty {
  padding: 36px 20px; text-align: center; color: var(--text-secondary);
  background: var(--panel-2); border: 1px dashed var(--border); border-radius: var(--panel-radius);
}
[data-module="punch-list"] .pl-empty-title { font-size: 15px; font-weight: 700; color: var(--text-primary); margin: 0 0 6px; }
[data-module="punch-list"] .pl-empty-body { font-size: 14px; margin: 0 0 12px; }
[data-module="punch-list"] .pl-empty .pl-btn { display: inline-block; }

/* Table */
[data-module="punch-list"] .pl-table-wrap {
  border: 1px solid var(--border); border-radius: var(--panel-radius);
  /* Controlled horizontal scroll: at narrow desktop widths the Status +
   * Actions columns used to clip under overflow:hidden with no way to reach
   * them. overflow-x:auto lets the table scroll instead; the min-width on the
   * table keeps the columns from crushing so a scrollbar appears when needed. */
  overflow-x: auto; background: var(--panel);
}
[data-module="punch-list"] .pl-table { width: 100%; min-width: 760px; border-collapse: collapse; font-size: 13px; }
[data-module="punch-list"] .pl-table thead th {
  text-align: left; padding: 10px 12px; font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.03em; color: var(--text-tertiary);
  background: var(--panel-2); border-bottom: 1px solid var(--border); white-space: nowrap;
}
[data-module="punch-list"] .pl-th-actions { width: 1%; }

[data-module="punch-list"] .pl-td {
  padding: 10px 12px; color: var(--text-primary); vertical-align: top;
  border-bottom: 1px solid var(--border); box-sizing: border-box;
}
[data-module="punch-list"] .pl-td-wide { min-width: 220px; white-space: normal; }
[data-module="punch-list"] .pl-td-num { white-space: nowrap; }
[data-module="punch-list"] .pl-item-row:hover .pl-td { background: var(--row-hover); }
/* D-v4 (mockup M3): the whole row opens the item detail; keep the pointer +
 * hover affordance so the row reads clickable. Controls inside the row
 * (status pill, priority flag, channel link, Edit/Delete) stopPropagation. */
[data-module="punch-list"] .pl-item-row { cursor: pointer; }

/* Density (mockup M3 column diet): Compact (default) folds Drawing / Reference
 * / Completed away; Comfortable brings them back. Persisted in module settings. */
[data-module="punch-list"] .pl-density-compact .pl-th-drawing_ref,
[data-module="punch-list"] .pl-density-compact .pl-td-drawing_ref,
[data-module="punch-list"] .pl-density-compact .pl-th-reference_docs,
[data-module="punch-list"] .pl-density-compact .pl-td-reference_docs,
[data-module="punch-list"] .pl-density-compact .pl-th-date,
[data-module="punch-list"] .pl-density-compact .pl-td-date { display: none; }

[data-module="punch-list"] .pl-density {
  display: inline-flex; border: 1px solid var(--border-strong); border-radius: 999px; overflow: hidden; flex: 0 0 auto;
}
[data-module="punch-list"] .pl-density button {
  appearance: none; cursor: pointer; touch-action: manipulation; border: 0;
  background: var(--panel); color: var(--text-secondary); font-size: 11px; font-weight: 700;
  padding: 7px 11px; border-right: 1px solid var(--border);
}
[data-module="punch-list"] .pl-density button:last-child { border-right: 0; }
[data-module="punch-list"] .pl-density button.is-on { background: var(--accent); color: var(--bg); }

/* List-header overflow menu (mockup M3: Issue + Add stay; the rest fold here). */
[data-module="punch-list"] .pl-overflow-wrap { position: relative; }
[data-module="punch-list"] .pl-overflow-btn {
  appearance: none; cursor: pointer; touch-action: manipulation;
  width: 38px; height: 36px; border-radius: 999px; padding: 0;
  border: 1px solid var(--border-strong); background: var(--panel-2); color: var(--text-primary);
  font-size: 18px; line-height: 1;
}
[data-module="punch-list"] .pl-overflow-btn:hover { border-color: var(--accent-line); }
[data-module="punch-list"] .pl-overflow-menu {
  position: absolute; top: 42px; right: 0; z-index: 15; min-width: 190px;
  background: var(--panel); border: 1px solid var(--border-strong);
  border-radius: var(--panel-radius); box-shadow: var(--shadow-lg); overflow: hidden;
}
[data-module="punch-list"] .pl-overflow-menu[hidden] { display: none; }
[data-module="punch-list"] .pl-overflow-menu button {
  appearance: none; cursor: pointer; touch-action: manipulation; display: block; width: 100%; text-align: left;
  padding: 10px 14px; font-size: 13px; color: var(--text-primary); background: transparent;
  border: 0; border-bottom: 1px solid var(--border);
}
[data-module="punch-list"] .pl-overflow-menu button:last-child { border-bottom: 0; }
[data-module="punch-list"] .pl-overflow-menu button:hover { background: var(--row-hover); }

/* Area header band -- keep the cell a table-cell (colspan), move flex inward. */
[data-module="punch-list"] .pl-area-cell {
  padding: 0; background: var(--panel-2); border-bottom: 1px solid var(--border);
}
[data-module="punch-list"] .pl-area-inner {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 9px 12px;
}
[data-module="punch-list"] .pl-area-name {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 700; color: var(--text-primary);
}
[data-module="punch-list"] .pl-area-num {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 22px; height: 22px; padding: 0 6px; border-radius: 6px;
  background: var(--accent-soft); color: var(--accent); font-size: 12px; font-weight: 800;
}
[data-module="punch-list"] .pl-area-meta { font-size: 11px; color: var(--text-tertiary); font-weight: 600; }
[data-module="punch-list"] .pl-area-acts { margin-left: auto; display: inline-flex; gap: 4px; flex-wrap: wrap; }

[data-module="punch-list"] .pl-mini {
  appearance: none; cursor: pointer; border: 1px solid var(--border); background: var(--panel);
  color: var(--text-secondary); border-radius: 6px; padding: 4px 9px; font-size: 12px; font-weight: 600;
  line-height: 1.4; touch-action: manipulation;
}
[data-module="punch-list"] .pl-mini:hover { color: var(--text-primary); border-color: var(--border-strong); }
[data-module="punch-list"] .pl-mini[disabled] { opacity: 0.4; cursor: default; }
[data-module="punch-list"] .pl-mini-danger:hover { color: var(--error); border-color: var(--error); }
[data-module="punch-list"] .pl-mini-accent { color: var(--accent); border-color: var(--accent-line); }
/* "Record" badge marks the authoritative stored issued PDF (vs the print preview). */
[data-module="punch-list"] .pl-badge-record {
  display: inline-block; vertical-align: middle; margin-left: 4px;
  padding: 2px 7px; border-radius: 999px; font-size: 10px; font-weight: 700;
  letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--accent); background: var(--accent-soft); border: 1px solid var(--accent-line);
}

/* Priority flag + number cell. The td stays a real table-cell so its
 * border-bottom "tick" aligns with sibling cells and the priority stripe
 * (box-shadow below) paints the FULL row height. Flex layout for the flag +
 * number + badge lives on an inner wrapper, not the td (display:flex on the
 * td dropped it out of table layout: misaligned border + partial stripe). */
[data-module="punch-list"] .pl-num-inner { display: flex; align-items: center; gap: 8px; }
[data-module="punch-list"] .pl-flag {
  appearance: none; cursor: pointer; border: 0; background: transparent;
  color: var(--text-tertiary); font-size: 15px; line-height: 1; padding: 2px;
  touch-action: manipulation;
}
[data-module="punch-list"] .pl-flag.is-on { color: var(--warning); }
[data-module="punch-list"] .pl-num { font-weight: 700; color: var(--text-primary); }
[data-module="punch-list"] .pl-is-priority .pl-td-num { box-shadow: inset 3px 0 0 var(--warning); }

/* Status pill */
[data-module="punch-list"] .pl-status-group { display: inline-flex; align-items: center; gap: 4px; }
[data-module="punch-list"] .pl-status-back {
  appearance: none; cursor: pointer; border: 1px solid var(--border); background: var(--panel);
  color: var(--text-secondary); border-radius: 6px; padding: 3px 7px; font-size: 12px; line-height: 1;
  touch-action: manipulation;
}
[data-module="punch-list"] .pl-status-back:hover { color: var(--text-primary); border-color: var(--border-strong); }
[data-module="punch-list"] .pl-status-pill {
  appearance: none; cursor: pointer; border: 1px solid var(--border); border-radius: 999px;
  padding: 4px 12px; font-size: 12px; font-weight: 700; white-space: nowrap;
  background: var(--panel-2); color: var(--text-secondary); touch-action: manipulation;
}
/* D-v4.2: four differentiated status hues on the List-row pill (open amber /
 * in_progress blue / completed green / verified violet), driven by the shared
 * --pl-status-* tokens. */
[data-module="punch-list"] .pl-status-open .pl-status-pill { background: var(--pl-status-open-soft); color: var(--pl-status-open); border-color: var(--pl-status-open); }
[data-module="punch-list"] .pl-status-in_progress .pl-status-pill { background: var(--pl-status-progress-soft); color: var(--pl-status-progress); border-color: var(--pl-status-progress); }
[data-module="punch-list"] .pl-status-completed .pl-status-pill { background: var(--pl-status-done-soft); color: var(--pl-status-done); border-color: var(--pl-status-done); }
[data-module="punch-list"] .pl-status-verified .pl-status-pill { background: var(--pl-status-verified-soft); color: var(--pl-status-verified); border-color: var(--pl-status-verified); }
[data-module="punch-list"] .pl-status-completed .pl-td-wide,
[data-module="punch-list"] .pl-status-verified .pl-td-wide { text-decoration: line-through; color: var(--text-secondary); }

[data-module="punch-list"] .pl-td-actions { white-space: nowrap; }
[data-module="punch-list"] .pl-td-actions .pl-mini { margin-left: 4px; }

/* Empty-state row inside the table body (real tr/td so the browser does not
 * foster-parent it out of the table). The inner .pl-empty keeps its look. */
[data-module="punch-list"] .pl-empty-cell { padding: 12px; border-bottom: 0; }
[data-module="punch-list"] .pl-empty-cell .pl-empty { border: 0; background: transparent; }

/* Photo-count badge on item rows */
[data-module="punch-list"] .pl-photo-badge {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: 11px; font-weight: 700; color: var(--text-tertiary);
}
[data-module="punch-list"] .pl-photo-badge svg { display: block; }

/* Channel badge column (D-v3.2 list spine): monospace zone + load, or a
 * "+ link" chip on unlinked rows. */
[data-module="punch-list"] .pl-ch-badge {
  display: inline-flex; align-items: center; gap: 6px; max-width: 100%;
  padding: 3px 8px; border-radius: 999px;
  background: var(--accent-soft); border: 1px solid var(--accent-line);
  font-size: 12px; white-space: nowrap; overflow: hidden;
}
[data-module="punch-list"] .pl-ch-z { font-family: var(--font-mono); font-weight: 700; color: var(--accent); }
[data-module="punch-list"] .pl-ch-l { color: var(--text-secondary); overflow: hidden; text-overflow: ellipsis; }
[data-module="punch-list"] .pl-ch-free { font-size: 12px; color: var(--text-secondary); margin-right: 6px; }
[data-module="punch-list"] .pl-ch-link {
  appearance: none; cursor: pointer; white-space: nowrap;
  display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: 999px;
  background: var(--panel-2); border: 1px dashed var(--border-strong);
  color: var(--text-tertiary); font-size: 12px; font-weight: 600; touch-action: manipulation;
}
[data-module="punch-list"] .pl-ch-link:hover { color: var(--accent); border-color: var(--accent-line); }
[data-module="punch-list"] .pl-ch-x {
  appearance: none; cursor: pointer; border: 0; background: none; padding: 0 0 0 2px;
  color: var(--text-tertiary); font-size: 14px; line-height: 1; opacity: 0.5;
}
[data-module="punch-list"] .pl-ch-x:hover { color: var(--warning); opacity: 1; }
[data-module="punch-list"] .pl-item-row:hover .pl-ch-x { opacity: 0.85; }

/* Quick-add FAB -- phone only (56px, above the bottom tab bar safe area) */
[data-module="punch-list"] .pl-fab { display: none; }

/* ============================================================
 * Slice 16 (v3) -- IA nav tabs + Walk hero surface (Tier 1, CONTAINER)
 * ============================================================ */

/* Shared IA tab row (Walk / List / Plan / Issued). */
[data-module="punch-list"] .pl-navtabs {
  display: flex; gap: 4px; flex-wrap: wrap; margin: 4px 0 16px;
}
[data-module="punch-list"] .pl-navtab {
  padding: 8px 16px; font-size: 13px; font-weight: 600; cursor: pointer;
  color: var(--text-secondary); background: var(--panel-2);
  border: 1px solid var(--border); border-radius: 999px;
  min-height: 38px; box-sizing: border-box;
}
[data-module="punch-list"] .pl-navtab:hover { border-color: var(--border-strong); }
[data-module="punch-list"] .pl-navtab.is-active {
  background: var(--accent-soft); color: var(--accent); border-color: var(--accent-line);
}

[data-module="punch-list"] .pl-wk-root { position: relative; }

/* Sync meta row (last-synced + diff counts) -- designed home for Sync. */
[data-module="punch-list"] .pl-wk-sync {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 14px; margin-bottom: 14px;
  background: var(--panel); border: 1px solid var(--border); border-radius: var(--panel-radius);
}
[data-module="punch-list"] .pl-wk-sync-meta { font-size: 12px; color: var(--text-tertiary); line-height: 1.5; min-width: 0; }
[data-module="punch-list"] .pl-wk-sync-meta strong { color: var(--text-secondary); font-weight: 700; }
[data-module="punch-list"] .pl-wk-sync-btn {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px;
  background: var(--panel-2); border: 1px solid var(--border-strong); color: var(--text-primary);
  border-radius: 999px; padding: 8px 14px; font-size: 12px; font-weight: 600; cursor: pointer;
  min-height: 38px; box-sizing: border-box;
}
[data-module="punch-list"] .pl-wk-sync-btn:hover { border-color: var(--accent-line); }
[data-module="punch-list"] .pl-wk-sync-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--success); }

[data-module="punch-list"] .pl-wk-loading { padding: 32px 8px; color: var(--text-tertiary); font-size: 14px; text-align: center; }
[data-module="punch-list"] .pl-wk-explain { margin-top: 8px; }

/* Sticky area-chip nav -- phone only (hidden on desktop, which shows all areas). */
[data-module="punch-list"] .pl-wk-areanav { display: none; }

/* Desktop default: all areas as a multi-column board. */
[data-module="punch-list"] .pl-wk-areas {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 16px; align-items: start;
}
[data-module="punch-list"] .pl-wk-area {
  border: 1px solid var(--border); border-radius: var(--panel-radius);
  background: var(--panel-2); padding: 12px 14px;
}
[data-module="punch-list"] .pl-wk-areahead {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 10px;
}
[data-module="punch-list"] .pl-wk-areahead-name {
  font-family: var(--font-display); font-size: 16px; font-weight: 700; letter-spacing: -0.2px; color: var(--text-primary);
}
[data-module="punch-list"] .pl-wk-areahead-prog { font-size: 12px; color: var(--text-secondary); font-weight: 600; }
[data-module="punch-list"] .pl-wk-areahead-prog b { color: var(--pl-status-open); }
[data-module="punch-list"] .pl-wk-empty-area { font-size: 12px; color: var(--text-tertiary); padding: 6px 2px; }

/* Channel row -- the tap target. */
[data-module="punch-list"] .pl-wk-chan {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  padding: 10px 12px; margin-bottom: 8px; box-sizing: border-box; cursor: pointer;
  border: 1px solid var(--border); border-left-width: 3px; border-left-color: var(--border);
  border-radius: var(--button-radius); background: var(--panel); min-height: 56px;
}
[data-module="punch-list"] .pl-wk-chan:hover { border-color: var(--border-strong); }
/* D-v4.2: zone tints ride the shared status palette (in_progress = the
 * dedicated blue, NOT the accent indigo, so rows never blend into chrome). */
[data-module="punch-list"] .pl-wk-chan.has-open { border-left-color: var(--pl-status-open); background: var(--pl-status-open-soft); }
[data-module="punch-list"] .pl-wk-chan.has-progress { border-left-color: var(--pl-status-progress); background: var(--pl-status-progress-soft); }
[data-module="punch-list"] .pl-wk-chan.is-silent { opacity: 0.72; }
[data-module="punch-list"] .pl-wk-chan.is-expanded { border-bottom-left-radius: 0; border-bottom-right-radius: 0; margin-bottom: 0; }
[data-module="punch-list"] .pl-wk-zone {
  flex: 0 0 auto; min-width: 44px; height: 38px; padding: 0 9px;
  display: flex; align-items: center; justify-content: center;
  background: var(--panel-2); border: 1px solid var(--border); border-radius: var(--button-radius);
  font-family: var(--font-mono); font-size: 14px; font-weight: 700; color: var(--text-primary);
}
[data-module="punch-list"] .pl-wk-main { flex: 1; min-width: 0; }
[data-module="punch-list"] .pl-wk-load { display: block; font-size: 14px; font-weight: 600; color: var(--text-primary); }
[data-module="punch-list"] .pl-wk-ctrl {
  display: block; font-size: 12px; color: var(--text-tertiary); margin-top: 2px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
[data-module="punch-list"] .pl-wk-flag { color: var(--warning); font-size: 13px; }
[data-module="punch-list"] .pl-wk-right { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; }
[data-module="punch-list"] .pl-wk-count {
  display: inline-flex; align-items: center; height: 24px; padding: 0 9px;
  border-radius: 999px; font-size: 12px; font-weight: 700; white-space: nowrap;
}
[data-module="punch-list"] .pl-wk-count-open { background: var(--pl-status-open-soft); color: var(--pl-status-open); border: 1px solid var(--pl-status-open); }
[data-module="punch-list"] .pl-wk-count-prog { background: var(--pl-status-progress-soft); color: var(--pl-status-progress); border: 1px solid var(--pl-status-progress); }
[data-module="punch-list"] .pl-wk-count-done { background: var(--pl-status-done-soft); color: var(--pl-status-done); border: 1px solid var(--pl-status-done); }
[data-module="punch-list"] .pl-wk-chev { color: var(--text-tertiary); font-size: 18px; line-height: 1; }

/* Inline channel panel -- open items + born-linked Add. */
[data-module="punch-list"] .pl-wk-panel {
  margin: 0 0 8px; padding: 10px 12px;
  border: 1px solid var(--border); border-top: 0;
  border-radius: 0 0 var(--button-radius) var(--button-radius); background: var(--panel);
}
[data-module="punch-list"] .pl-wk-panel-list { list-style: none; margin: 0 0 8px; padding: 0; display: flex; flex-direction: column; gap: 6px; }
[data-module="punch-list"] .pl-wk-panel-item {
  display: flex; align-items: center; gap: 10px; cursor: pointer;
  width: 100%; text-align: left; font: inherit; color: inherit; box-sizing: border-box;
  padding: 8px 10px; border: 1px solid var(--border); border-radius: var(--button-radius); background: var(--panel-2);
}
[data-module="punch-list"] .pl-wk-panel-item:hover { border-color: var(--border-strong); }
[data-module="punch-list"] .pl-wk-panel-seq { flex: 0 0 auto; font-family: var(--font-mono); font-size: 12px; font-weight: 700; color: var(--text-secondary); }
[data-module="punch-list"] .pl-wk-panel-desc { flex: 1; min-width: 0; font-size: 13px; color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
[data-module="punch-list"] .pl-wk-panel-status { flex: 0 0 auto; }
[data-module="punch-list"] .pl-wk-panel-empty { font-size: 12px; color: var(--text-tertiary); padding: 4px 2px 8px; }
[data-module="punch-list"] .pl-wk-panel-add {
  display: inline-flex; align-items: center; min-height: 38px; padding: 8px 14px;
  font-size: 13px; font-weight: 600; cursor: pointer;
  background: var(--accent-soft); color: var(--accent); border: 1px solid var(--accent-line); border-radius: 999px;
}
[data-module="punch-list"] .pl-wk-panel-add:hover { border-color: var(--accent); }

/* ---- Tablet: compact table, drop the optional column ---- */
@media (max-width: 1024px) {
  [data-module="punch-list"] .pl-col-optional { display: none; }
  [data-module="punch-list"] .pl-table { font-size: 12px; }
  [data-module="punch-list"] .pl-td, [data-module="punch-list"] .pl-table thead th { padding: 8px 10px; }
  [data-module="punch-list"] .pl-mini { min-height: 40px; }
}

/* ---- Phone: single-column cards (no table) ---- */
@media (max-width: 640px) {
  [data-module="punch-list"] .pl-root { padding: 16px 14px 56px; }
  [data-module="punch-list"] .pl-search { font-size: 16px; } /* prevent iOS zoom */

  [data-module="punch-list"] .pl-table-wrap { border: 0; border-radius: 0; overflow: visible; background: transparent; }
  /* Reset the desktop scroll min-width: the card layout is display:block inside
   * an overflow:visible wrapper, so an inherited 760px minimum would become
   * page-level horizontal overflow on phones. */
  [data-module="punch-list"] .pl-table { min-width: 0; }
  [data-module="punch-list"] .pl-table, [data-module="punch-list"] .pl-table tbody { display: block; }
  [data-module="punch-list"] .pl-table thead { display: none; }

  [data-module="punch-list"] .pl-area-row { display: block; }
  [data-module="punch-list"] .pl-area-cell { display: block; border-radius: var(--button-radius); margin: 14px 0 8px; }
  [data-module="punch-list"] .pl-empty-row { display: block; }
  [data-module="punch-list"] .pl-empty-cell { display: block; padding: 12px 0; }
  [data-module="punch-list"] .pl-empty-cell .pl-empty {
    border: 1px dashed var(--border); background: var(--panel-2);
  }
  [data-module="punch-list"] .pl-area-acts { margin-left: 0; width: 100%; }

  [data-module="punch-list"] .pl-item-row {
    display: block; background: var(--panel); border: 1px solid var(--border);
    border-radius: var(--panel-radius); margin-bottom: 10px; padding: 6px 4px;
  }
  [data-module="punch-list"] .pl-item-row:hover .pl-td { background: transparent; }
  [data-module="punch-list"] .pl-is-priority { border-left: 3px solid var(--warning); }

  [data-module="punch-list"] .pl-td {
    display: flex; gap: 10px; align-items: baseline; border-bottom: 0; padding: 5px 12px;
  }
  [data-module="punch-list"] .pl-td::before {
    content: attr(data-label); flex: 0 0 96px; font-size: 11px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.03em; color: var(--text-tertiary);
  }
  [data-module="punch-list"] .pl-td-num::before,
  [data-module="punch-list"] .pl-td-actions::before,
  [data-module="punch-list"] .pl-td-status::before { display: none; }
  [data-module="punch-list"] .pl-cell-empty { display: none; }
  [data-module="punch-list"] .pl-is-priority .pl-td-num { box-shadow: none; }

  [data-module="punch-list"] .pl-td-num { font-size: 15px; padding-top: 8px; }
  [data-module="punch-list"] .pl-td-wide { white-space: normal; }
  [data-module="punch-list"] .pl-td-status, [data-module="punch-list"] .pl-td-actions {
    justify-content: flex-start; padding-top: 8px; padding-bottom: 8px;
  }
  [data-module="punch-list"] .pl-mini, [data-module="punch-list"] .pl-status-pill,
  [data-module="punch-list"] .pl-status-back, [data-module="punch-list"] .pl-flag,
  [data-module="punch-list"] .pl-btn { min-height: 44px; }
  [data-module="punch-list"] .pl-status-pill { padding: 10px 16px; }
  /* Filters row: chips/search/area select are constant-tap field surfaces */
  [data-module="punch-list"] .pl-chip { min-height: 44px; padding: 8px 14px; }
  [data-module="punch-list"] .pl-search,
  [data-module="punch-list"] .pl-area-filter { min-height: 44px; }
  [data-module="punch-list"] .pl-ch-link { min-height: 44px; padding: 8px 12px; }
  [data-module="punch-list"] .pl-ch-x { min-width: 44px; min-height: 44px; padding: 0 8px; opacity: 0.85; }

  [data-module="punch-list"] .pl-fab {
    display: flex; align-items: center; justify-content: center;
    position: fixed; right: 16px;
    bottom: calc(70px + env(safe-area-inset-bottom, 0px));
    width: 56px; height: 56px; border-radius: 50%;
    background: var(--accent); color: var(--bg);
    border: 0; font-size: 30px; line-height: 1; font-weight: 400;
    box-shadow: var(--shadow); z-index: 150; cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: transform 0.15s ease;
  }
  [data-module="punch-list"] .pl-fab:active { transform: scale(0.94); }

  /* Walk hero -- phone: one active area, sticky area-chip nav, no desktop add. */
  [data-module="punch-list"] .pl-navtab { flex: 1; text-align: center; min-height: 44px; }
  [data-module="punch-list"] .pl-wk-desktop-add { display: none; }
  [data-module="punch-list"] .pl-wk-sync-btn { min-height: 44px; }
  [data-module="punch-list"] .pl-wk-areanav {
    display: flex; gap: 6px; overflow-x: auto; padding: 8px 0; margin-bottom: 8px;
    position: sticky; top: 0; z-index: 3; background: var(--bg);
    border-bottom: 1px solid var(--border);
    scrollbar-width: none;
  }
  [data-module="punch-list"] .pl-wk-areanav::-webkit-scrollbar { display: none; }
  [data-module="punch-list"] .pl-wk-chip {
    display: inline-flex; align-items: center;
    flex: 0 0 auto; padding: 8px 12px; font-size: 12px; font-weight: 600; cursor: pointer;
    white-space: nowrap; min-height: 44px; box-sizing: border-box;
    color: var(--text-secondary); background: var(--panel-2);
    border: 1px solid var(--border); border-radius: 999px;
  }
  [data-module="punch-list"] .pl-wk-chip.is-active { background: var(--accent-soft); color: var(--accent); border-color: var(--accent-line); }
  [data-module="punch-list"] .pl-wk-chip .n { color: var(--pl-status-open); font-weight: 800; margin-left: 5px; }
  [data-module="punch-list"] .pl-wk-areas { display: block; }
  [data-module="punch-list"] .pl-wk-area { display: none; border: 0; background: transparent; padding: 0; }
  [data-module="punch-list"] .pl-wk-area.is-active { display: block; }
  [data-module="punch-list"] .pl-wk-areahead {
    position: sticky; top: 57px; z-index: 2; background: var(--bg); padding: 8px 0;
  }
  [data-module="punch-list"] .pl-wk-areahead-name { font-size: 19px; }
  [data-module="punch-list"] .pl-wk-chan { min-height: 60px; }
}

/* ============================================================
 * Tier 2 -- MODAL-CONTENT (unscoped; .pl- prefix is the leak guard)
 * ============================================================ */

/* The UA stylesheet's [hidden] { display: none } loses to ANY author display
 * declaration. Every display-setting class the JS toggles via el.hidden needs
 * an explicit guard or it renders while "hidden" (.pl-f: the quick-add
 * new-area field; .pl-sug: empty suggestion lists as border hairlines). */
.pl-f[hidden], .pl-sug[hidden], .pl-voice-btn[hidden] { display: none; }

.pl-form { display: flex; flex-direction: column; gap: 12px; min-width: 460px; max-width: 560px; }
.pl-frow { display: flex; gap: 12px; }
.pl-f { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 0; }
.pl-f-narrow { flex: 0 0 130px; }
.pl-f > span { font-size: 11px; font-weight: 700; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.03em; }
.pl-f input, .pl-f select, .pl-f textarea {
  width: 100%; box-sizing: border-box; padding: 8px 10px; font-size: 14px;
  background: var(--input-bg); color: var(--text-primary);
  border: 1px solid var(--border); border-radius: var(--button-radius);
}
.pl-f textarea { resize: vertical; font-family: inherit; }
.pl-lock-note { font-size: 11px; color: var(--warning); margin-top: 4px; }

/* Inline input+button row (fixture field with scan) */
.pl-frow-inline { display: flex; gap: 6px; }
.pl-frow-inline input { flex: 1; min-width: 0; }
.pl-scan-btn {
  appearance: none; cursor: pointer; flex-shrink: 0;
  border: 1px solid var(--border); background: var(--panel-2);
  color: var(--text-secondary); border-radius: var(--button-radius);
  padding: 4px 10px; font-size: 12px; font-weight: 600;
}
.pl-scan-btn:hover { color: var(--text-primary); border-color: var(--border-strong); }

/* Suggestion list (inline flow under the input -- modal + sheet safe) */
.pl-sug {
  display: flex; flex-direction: column; margin-top: 4px; overflow: hidden;
  border: 1px solid var(--border); border-radius: var(--button-radius);
  background: var(--panel); box-shadow: var(--shadow-sm);
}
.pl-sug-opt {
  appearance: none; display: flex; justify-content: space-between; gap: 10px;
  padding: 8px 10px; min-height: 36px; align-items: center;
  background: transparent; border: 0; border-bottom: 1px solid var(--border);
  color: var(--text-primary); cursor: pointer; text-align: left; font-size: 13px;
}
.pl-sug-opt:last-child { border-bottom: 0; }
.pl-sug-opt:hover { background: var(--row-hover); }
.pl-sug-main { font-weight: 700; flex-shrink: 0; }
.pl-sug-hint {
  color: var(--text-secondary); font-size: 12px; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Attachments gallery (item modal) */
.pl-gal-sec { display: flex; flex-direction: column; gap: 8px; margin-top: 2px; }
.pl-gal-head {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.03em; color: var(--text-secondary);
}
.pl-gal-add {
  appearance: none; cursor: pointer; border: 1px solid var(--border);
  background: var(--panel); color: var(--text-primary);
  border-radius: var(--button-radius); padding: 6px 12px; font-size: 12px; font-weight: 600;
}
.pl-gal-add:hover { border-color: var(--border-strong); }
.pl-gal { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; }
.pl-gal-empty { font-size: 12px; color: var(--text-tertiary); padding: 6px 0; }
.pl-gal-item { margin: 0; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.pl-gal-img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block;
  border: 1px solid var(--border); border-radius: var(--button-radius);
  background: var(--panel-2); cursor: zoom-in;
}
.pl-gal-missing {
  aspect-ratio: 4 / 3; display: flex; align-items: center; justify-content: center;
  font-size: 11px; color: var(--text-tertiary);
  border: 1px dashed var(--border); border-radius: var(--button-radius);
}
/* Wraps because this row holds four children -- caption, Annotate, Send to
   Lightbox, Delete -- inside a .pl-gal tile that is only ~120-195px wide. Tile
   width is set by the auto-fill column count, NOT the viewport, so a wider
   window just adds columns and the row overflowed at EVERY width: the buttons
   need roughly 246px. Unwrapped, the caption was the only flexible child, so it
   collapsed to zero width (unusable -- captions could not be typed) and the
   buttons still spilled over the neighbouring tile. */
.pl-gal-capline { display: flex; flex-wrap: wrap; gap: 4px; }
.pl-gal-cap {
  /* Own row: the buttons cannot shrink below their label (white-space: nowrap
     plus the default min-width: auto), so sharing a line always starved this. */
  flex: 1 1 100%; min-width: 0; padding: 4px 8px; font-size: 12px;
  background: var(--input-bg); color: var(--text-primary);
  border: 1px solid var(--border); border-radius: var(--button-radius);
}
.pl-gal-del {
  appearance: none; cursor: pointer; flex-shrink: 0;
  border: 1px solid var(--border); background: var(--panel-2);
  color: var(--text-secondary); border-radius: var(--button-radius);
  padding: 4px 8px; font-size: 11px; font-weight: 600;
}
.pl-gal-del:hover { color: var(--error); border-color: var(--error); }

/* ---- voice notes (slice 5) ---- */
.pl-gal-head-actions { display: flex; align-items: center; gap: 8px; }
.pl-voice-btn {
  appearance: none; cursor: pointer; display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid var(--border); background: var(--panel); color: var(--text-primary);
  border-radius: var(--button-radius); padding: 6px 12px; font-size: 12px; font-weight: 600;
}
.pl-voice-btn:hover { border-color: var(--border-strong); }
.pl-voice-btn[disabled] { opacity: 0.6; cursor: default; }
.pl-voice-btn.pl-voice-rec {
  border-color: var(--accent); color: var(--accent);
  animation: pl-voice-pulse 1.4s ease-in-out infinite;
}
@keyframes pl-voice-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.55; } }
@media (prefers-reduced-motion: reduce) {
  .pl-voice-btn.pl-voice-rec { animation: none; }
}
.pl-voice-timer {
  font-size: 12px; font-variant-numeric: tabular-nums; color: var(--text-secondary);
}
/* Audio gallery entries span the full grid width (below the photo tiles). */
.pl-gal-audio {
  grid-column: 1 / -1; margin: 0;
  display: flex; flex-direction: column; gap: 6px;
  border: 1px solid var(--border); border-radius: var(--button-radius);
  background: var(--panel-2); padding: 8px 10px;
}
.pl-gal-audio-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.pl-gal-audio-label {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 600; color: var(--text-secondary);
}
.pl-gal-audio-player { width: 100%; height: 34px; }
.pl-gal-transcript {
  font-size: 12px; line-height: 1.45; color: var(--text-primary);
  white-space: pre-wrap; word-break: break-word;
  border-top: 1px solid var(--border); padding-top: 6px;
}

/* Slice 6 modal-content affordances (Tier 2 -- body-mounted overlay, so
 * UNSCOPED; the .pl- prefix is the leak guard). DAM push button per photo,
 * planner follow-up task section, issue-modal milestone checkbox. */
.pl-gal-dam {
  appearance: none; cursor: pointer; border: 1px solid var(--accent-line);
  background: var(--panel); color: var(--accent);
  border-radius: 6px; padding: 4px 8px; font-size: 11px; font-weight: 600;
  line-height: 1.3; white-space: nowrap; touch-action: manipulation;
}
.pl-gal-dam:hover { border-color: var(--accent); }
.pl-gal-dam.is-done {
  border-color: var(--success); color: var(--success);
  background: var(--success-soft); cursor: default;
}
.pl-task-sec {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-top: 2px; padding-top: 10px; border-top: 1px solid var(--border);
}
.pl-task-btn {
  appearance: none; cursor: pointer; border: 1px solid var(--border);
  background: var(--panel); color: var(--text-primary);
  border-radius: var(--button-radius); padding: 8px 14px; font-size: 13px; font-weight: 600;
  touch-action: manipulation;
}
.pl-task-btn:hover { border-color: var(--border-strong); }
.pl-task-btn[disabled] { opacity: 0.6; cursor: default; }
.pl-task-count { font-size: 12px; color: var(--text-secondary); font-weight: 600; }
/* Status history (slice 10) -- lives inside the body-mounted item modal, so
 * these selectors are unscoped like the other modal-content rules above. */
.pl-hist-sec {
  margin-top: 2px; padding-top: 10px; border-top: 1px solid var(--border);
}
.pl-hist-head {
  font-size: 12px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.03em; color: var(--text-tertiary); margin-bottom: 8px;
}
.pl-hist-body { max-height: 220px; overflow-y: auto; }
.pl-hist-empty { font-size: 12px; color: var(--text-secondary); }
/* Status timeline (item.html restyle): vertical rail + status-colored dots. */
.pl-tl {
  list-style: none; margin: 0; padding-left: 22px; position: relative;
}
.pl-tl::before {
  content: ''; position: absolute; left: 6px; top: 4px; bottom: 4px;
  width: 2px; background: var(--border);
}
.pl-tl-step { position: relative; padding-bottom: 14px; }
.pl-tl-step:last-child { padding-bottom: 0; }
.pl-tl-dot {
  position: absolute; left: -22px; top: 2px; width: 14px; height: 14px;
  border-radius: 50%; border: 2px solid var(--panel);
  box-shadow: 0 0 0 1px var(--border-strong); background: var(--panel-2);
}
.pl-tl-dot.pl-tl-open { background: var(--pl-status-open); }
.pl-tl-dot.pl-tl-in_progress { background: var(--pl-status-progress); }
.pl-tl-dot.pl-tl-completed { background: var(--pl-status-done); }
.pl-tl-dot.pl-tl-verified { background: var(--pl-status-verified); box-shadow: 0 0 0 1px var(--pl-status-verified); }
.pl-tl-dot.is-now { box-shadow: 0 0 0 4px var(--accent-soft), 0 0 0 1px var(--border-strong); }
.pl-tl-name { font-size: 13px; font-weight: 700; color: var(--text-primary); }
.pl-tl-when { font-size: 11px; color: var(--text-tertiary); margin-top: 2px; }
.pl-tl-who { font-size: 12px; color: var(--text-secondary); margin-top: 2px; }
.pl-tl-note {
  font-size: 12px; color: var(--text-secondary); margin-top: 3px;
  white-space: pre-wrap; word-break: break-word;
}
.pl-issue-milestone {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; color: var(--text-primary); cursor: pointer;
}
.pl-issue-milestone input { width: 16px; height: 16px; flex-shrink: 0; cursor: pointer; }

@media (max-width: 640px) {
  .pl-gal-dam { min-height: 44px; }
  .pl-task-btn { min-height: 44px; }
}

/* Lightbox (body-mounted; above the platform modal layer at 9000). The
 * self-attribute clause covers the body-mounted root explicitly -- a
 * descendant combinator would not match the element that IS the
 * data-module carrier (module-gotchas body-mount rule). */
.pl-lightbox,
.pl-lightbox[data-module="punch-list"] {
  position: fixed; inset: 0; z-index: 9500;
  background: var(--overlay-bg);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; padding: 24px;
}
.pl-lightbox-img {
  max-width: 100%; max-height: 82vh;
  border-radius: var(--panel-radius); box-shadow: var(--shadow-lg);
}
.pl-lightbox-cap {
  max-width: 90%; padding: 6px 14px; font-size: 13px;
  color: var(--text-primary); background: var(--panel);
  border: 1px solid var(--border); border-radius: 999px;
}
.pl-lightbox-close {
  position: absolute; top: calc(14px + env(safe-area-inset-top, 0px)); right: 16px;
  width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid var(--border); background: var(--panel); color: var(--text-primary);
  font-size: 20px; line-height: 1; cursor: pointer;
}

/* Quick-add bottom sheet content */
.pl-qa { display: flex; flex-direction: column; gap: 12px; padding: 2px 2px 8px; }

.pl-qa-desc { font-size: 16px; min-height: 84px; }
.pl-qa-save {
  appearance: none; cursor: pointer; min-height: 48px;
  background: var(--accent); color: var(--bg); border: 0;
  border-radius: var(--button-radius); font-size: 15px; font-weight: 700;
}
.pl-qa-save[disabled] { opacity: 0.6; cursor: default; }

/* ---- slice-17 capture surface (shared: quick-add sheet + item modal) ---- */

/* Channel badge (born-linked, or free-form after a channel pick). */
.pl-badge {
  display: flex; align-items: center; gap: 12px; padding: 12px;
  border-radius: var(--panel-radius); background: var(--accent-soft);
  border: 1px solid var(--accent-line);
}
.pl-badge-zone {
  flex: 0 0 auto; min-width: 48px; height: 42px; padding: 0 10px;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--button-radius); background: var(--panel);
  border: 1px solid var(--accent-line);
  font-family: var(--font-mono); font-size: 15px; font-weight: 700; color: var(--accent);
}
.pl-badge-main { flex: 1; min-width: 0; }
.pl-badge-load { display: block; font-size: 14px; font-weight: 700; color: var(--text-primary);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pl-badge-ctrl { display: block; font-size: 12px; color: var(--text-secondary); margin-top: 2px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pl-badge-tag { flex: 0 0 auto; font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--accent); font-weight: 700; }
.pl-badge-x {
  flex: 0 0 auto; appearance: none; cursor: pointer; width: 28px; height: 28px; padding: 0;
  border-radius: 50%; border: 1px solid var(--accent-line); background: var(--panel);
  color: var(--text-primary); font-size: 16px; line-height: 1;
}

/* Free-form link chip + expandable area-grouped channel picker. */
.pl-linkzone:empty { display: none; }
/* Modal picker (list "+ link" flow): give the auto-opened picker room. */
.pl-linkzone-modal { min-height: 260px; min-width: 280px; }
.pl-linkchip {
  display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 999px;
  background: var(--panel-2); border: 1px dashed var(--border-strong); color: var(--text-primary);
  font-size: 13px; font-weight: 600; cursor: pointer; min-height: 44px; box-sizing: border-box;
}
.pl-linkchip:hover { border-color: var(--accent-line); }
.pl-linkchip .ic { color: var(--accent); font-weight: 800; }
.pl-picker {
  border: 1px solid var(--border); border-radius: var(--panel-radius); background: var(--panel-2);
  overflow: hidden;
}
.pl-picker-head {
  padding: 10px 12px; border-bottom: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
.pl-picker-head b { font-size: 13px; }
.pl-picker-close {
  appearance: none; cursor: pointer; padding: 0; width: 30px; height: 30px; border-radius: 50%;
  border: 1px solid var(--border); background: var(--panel); color: var(--text-primary);
  font-size: 16px; line-height: 1;
}
.pl-picker-search {
  width: 100%; box-sizing: border-box; padding: 10px 12px; font-size: 16px;
  border: none; border-bottom: 1px solid var(--border);
  background: var(--input-bg); color: var(--text-primary);
}
.pl-picker-list { max-height: 220px; overflow-y: auto; }
.pl-picker-group {
  padding: 8px 12px 4px; font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--text-tertiary); background: var(--panel);
  position: sticky; top: 0;
}
.pl-picker-row {
  width: 100%; box-sizing: border-box; appearance: none; cursor: pointer; text-align: left;
  display: flex; align-items: center; gap: 10px; padding: 10px 12px; min-height: 44px;
  border: none; border-bottom: 1px solid var(--border); background: none; color: var(--text-primary);
}
.pl-picker-row:hover { background: var(--row-hover); }
.pl-picker-row:last-child { border-bottom: none; }
.pl-picker-zone { font-family: var(--font-mono); font-weight: 700; font-size: 13px; min-width: 44px; }
.pl-picker-load { flex: 1; min-width: 0; font-size: 13px; }
.pl-picker-load small { display: block; color: var(--text-tertiary); font-size: 11px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pl-picker-empty, .pl-picker-loading { padding: 14px 12px; font-size: 12px; color: var(--text-tertiary); }

/* Media surface: evidence strip + equal Camera / Voice buttons + recording bar. */
.pl-media { display: flex; flex-direction: column; gap: 12px; }
.pl-evi { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 2px; }
.pl-evi:empty { display: none; }
.pl-tile {
  flex: 0 0 auto; width: 72px; height: 72px; border-radius: var(--button-radius); position: relative;
  border: 1px solid var(--border); overflow: hidden; box-sizing: border-box; padding: 0;
}
.pl-tile-photo { appearance: none; cursor: pointer; background: var(--panel-2); }
.pl-tile-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pl-tile-missing { display: flex; align-items: center; justify-content: center; height: 100%;
  color: var(--text-tertiary); font-size: 18px; }
.pl-tile-voice {
  background: var(--panel-2); display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 6px;
}
.pl-tile-voice .wave { display: flex; align-items: center; gap: 2px; height: 18px; }
.pl-tile-voice .wave i { width: 2px; border-radius: 2px; background: var(--accent); }
.pl-tile-voice .dur { font-family: var(--font-mono); font-size: 11px; font-weight: 700; color: var(--text-primary); }
/* Pen badge on an annotated-copy tile (top-left, clear of the remove X). */
.pl-tile-badge {
  position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%;
  background: var(--accent); border: 1px solid var(--panel); color: var(--bg);
  display: flex; align-items: center; justify-content: center; pointer-events: none;
}
.pl-tile-badge svg { width: 11px; height: 11px; }
/* Opaque chip so the corner remove stays legible over any photo (photo-over-chrome rule). */
.pl-tile-x {
  position: absolute; top: 3px; right: 3px; width: 22px; height: 22px; border-radius: 50%;
  border: 1px solid var(--border-strong); background: var(--panel); color: var(--text-primary);
  font-size: 13px; line-height: 1; cursor: pointer; padding: 0;
  display: flex; align-items: center; justify-content: center;
}
.pl-cap-row { display: flex; gap: 12px; }
.pl-cap-btn {
  flex: 1; appearance: none; cursor: pointer; display: inline-flex; align-items: center;
  justify-content: center; gap: 9px; min-height: 54px; padding: 0 14px; box-sizing: border-box;
  border-radius: var(--button-radius); background: var(--accent-soft); border: 1px solid var(--accent-line);
  color: var(--accent); font-size: 14px; font-weight: 700;
}
.pl-cap-btn:hover { border-color: var(--accent); }
.pl-cap-btn svg { width: 19px; height: 19px; flex: 0 0 auto; }
.pl-cap-btn[hidden] { display: none; }
/* In-place recording bar (swaps the Voice button while recording). */
.pl-rec-bar {
  flex: 1; display: inline-flex; align-items: center; gap: 9px; min-height: 54px;
  padding: 0 12px; box-sizing: border-box; border-radius: var(--button-radius);
  background: var(--error-soft); border: 1px solid var(--error); color: var(--error);
}
.pl-rec-bar[hidden] { display: none; }
.pl-rec-dot {
  width: 11px; height: 11px; border-radius: 50%; background: var(--error); flex: 0 0 auto;
  animation: pl-rec-pulse 1.15s ease-in-out infinite;
}
@keyframes pl-rec-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.3; transform: scale(0.72); } }
@media (prefers-reduced-motion: reduce) { .pl-rec-dot { animation: none; } }
.pl-rec-time { font-family: var(--font-mono); font-size: 15px; font-weight: 700; flex: 0 0 auto; }
.pl-rec-wave { flex: 1; display: flex; align-items: center; gap: 3px; height: 22px; overflow: hidden; }
.pl-rec-wave i { width: 3px; border-radius: 2px; background: var(--error); opacity: 0.85; }
.pl-rec-stop {
  flex: 0 0 auto; appearance: none; cursor: pointer; display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 13px; border-radius: 999px; background: var(--error); color: var(--bg); border: none;
  font-size: 13px; font-weight: 700; min-height: 38px; box-sizing: border-box;
}
.pl-rec-stop b { width: 9px; height: 9px; border-radius: 2px; background: var(--bg); display: block; }

/* Priority segmented control. */
.pl-seg { display: flex; gap: 10px; }
.pl-seg-btn {
  flex: 1; appearance: none; cursor: pointer; text-align: center; padding: 12px; font-size: 13px;
  font-weight: 700; border: 1px solid var(--border); border-radius: var(--button-radius);
  background: var(--panel-2); color: var(--text-secondary); min-height: 48px; box-sizing: border-box;
}
.pl-seg-btn.is-on { background: var(--warning-soft); color: var(--warning); border-color: var(--warning); }
.pl-seg-btn.is-on-normal { background: var(--accent-soft); color: var(--accent); border-color: var(--accent-line); }

@media (max-width: 640px) {
  .pl-form { min-width: 0; }
  .pl-frow { flex-direction: column; }
  .pl-f-narrow { flex: 1; }
  .pl-f input, .pl-f select, .pl-f textarea { font-size: 16px; }
  .pl-gal-cap { font-size: 16px; } /* sub-16px inputs trigger iOS focus zoom */
  .pl-gal { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); }
  .pl-gal-del { min-height: 44px; }
  .pl-gal-add { min-height: 44px; }
  .pl-scan-btn { min-height: 44px; }
  .pl-voice-btn { min-height: 44px; }
  .pl-picker-search { font-size: 16px; }
  /* Stop is the only control that ends a recording -- full 44px target on
   * touch (the 54px recording bar has room). */
  .pl-rec-stop { min-height: 44px; }
  /* Keep the evidence-tile remove X visually small but give it a 44px hit
   * area via a pseudo-element expanded INWARD (down-left into the tile):
   * .pl-tile has overflow:hidden, so an outward inset would be clipped below
   * 44px. The button sits 3px from the tile's top-right corner; growing
   * 22px past its bottom-left lands a full 44x44 region inside the tile. */
  .pl-tile-x::after { content: ''; position: absolute; inset: 0 0 -22px -22px; }
}

/* ============================================================
 * Slice 3 -- issue lifecycle, history, snapshot, parties
 * ============================================================ */

/* Print-only header: exists in the DOM for the @media print sheet below;
 * never rendered on screen. */
[data-module="punch-list"] .pl-print-head { display: none; }

[data-module="punch-list"] .pl-head-titles { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
[data-module="punch-list"] .pl-list-region { display: block; }

/* NEW chip (snapshot + list rows added in the viewed version) */
[data-module="punch-list"] .pl-new-chip {
  display: inline-block; margin-left: 6px; padding: 1px 6px;
  font-size: 10px; font-weight: 800; letter-spacing: 0.04em;
  color: var(--accent); background: var(--accent-soft);
  border: 1px solid var(--accent-line); border-radius: 999px;
  vertical-align: middle;
}
[data-module="punch-list"] .pl-row-new .pl-num { color: var(--accent); }

/* Read-only snapshot chrome */
[data-module="punch-list"] .pl-snap-banner {
  display: flex; align-items: center; gap: 8px; margin-bottom: 12px;
  padding: 8px 12px; font-size: 13px; font-weight: 600;
  color: var(--warning); background: var(--warning-soft);
  border: 1px solid var(--warning); border-radius: var(--button-radius);
}
[data-module="punch-list"] .pl-row-static .pl-td { cursor: default; }
[data-module="punch-list"] .pl-status-pill-static {
  display: inline-block; padding: 4px 10px; font-size: 12px; font-weight: 700;
  color: var(--text-secondary); background: var(--panel-2);
  border: 1px solid var(--border); border-radius: 999px; cursor: default;
}
[data-module="punch-list"] .pl-flag-static { cursor: default; background: transparent; border: 0; }
[data-module="punch-list"] .pl-td-vnum { font-weight: 800; white-space: nowrap; }
[data-module="punch-list"] .pl-ver-chip {
  display: inline-block; padding: 2px 8px; font-size: 11px; font-weight: 700;
  color: var(--text-secondary); background: var(--panel-2);
  border: 1px solid var(--border); border-radius: 999px;
}

/* Tier 2 -- issue modal + parties modal content (body-mounted; .pl- prefix
 * is the leak guard, same convention as the form styles above) */
.pl-issue-warn { font-size: 12px; color: var(--warning); margin-top: 8px; }

.pl-pt { display: flex; flex-direction: column; gap: 10px; min-width: 480px; max-width: 620px; }
.pl-pt-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.pl-pt-count { font-size: 12px; color: var(--text-secondary); }
.pl-pt-head-acts { display: flex; gap: 6px; }
.pl-pt-btn {
  appearance: none; cursor: pointer; padding: 6px 12px; font-size: 12px; font-weight: 600;
  color: var(--text-secondary); background: var(--panel-2);
  border: 1px solid var(--border); border-radius: var(--button-radius);
}
.pl-pt-btn:hover { color: var(--text-primary); border-color: var(--border-strong); }
.pl-pt-btn-primary { color: var(--accent); background: var(--accent-soft); border-color: var(--accent-line); }
.pl-pt-btn-danger { color: var(--error); }
.pl-pt-row {
  display: flex; align-items: center; gap: 10px; padding: 8px 10px;
  border: 1px solid var(--border); border-radius: var(--button-radius);
  background: var(--panel);
}
.pl-pt-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.pl-pt-name { font-size: 14px; font-weight: 700; color: var(--text-primary); }
.pl-pt-abbrev {
  display: inline-block; margin-left: 8px; padding: 1px 6px; font-size: 10px; font-weight: 800;
  color: var(--text-secondary); background: var(--panel-2);
  border: 1px solid var(--border); border-radius: 999px; vertical-align: middle;
}
.pl-pt-contact { font-size: 12px; color: var(--text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pl-pt-acts { display: flex; gap: 6px; flex-shrink: 0; }
.pl-pt-empty { font-size: 13px; color: var(--text-secondary); padding: 16px 0; text-align: center; }
.pl-pt-list-note { font-size: 11px; color: var(--text-tertiary); }
.pl-pt-form { display: flex; flex-direction: column; gap: 10px; padding: 10px; border: 1px solid var(--border-strong); border-radius: var(--button-radius); }
.pl-pt-form-acts { display: flex; justify-content: flex-end; gap: 8px; }

@media (max-width: 640px) {
  .pl-pt { min-width: 0; }
  .pl-pt-btn { min-height: 44px; }
  .pl-pt-row { flex-wrap: wrap; }
}

/* ============================================================
 * Print sheet -- the issued punch list document (spec: landscape
 * letter, header block, key, area bands, priority/new/completed
 * markings). Literal black/white per the module print convention
 * (matrix, sample-tracker): paper output must not follow the app
 * theme.
 * ============================================================ */
@media print {
  /* Paper output is theme-independent: print ink/paper tokens (hex lives
   * only in these custom-property declarations, per the color lint). */
  :root {
    --print-ink: #000;
    --print-paper: #fff;
    --print-rule: #ccc;
    --print-band: #eee;
  }

  @page { size: letter landscape; margin: 0.5in; }

  /* Shell chrome off (matrix convention) */
  .strata-topbar, .strata-sidebar, .strata-nav, .skip-to-content,
  .strata-mobile-header, .strata-tabbar, .strata-dock-panel { display: none !important; }
  .strata-content, #strata-content { margin: 0 !important; padding: 0 !important; width: 100% !important; }

  [data-module="punch-list"] { height: auto !important; overflow: visible !important; }

  /* Screen chrome off; the print header replaces it */
  [data-module="punch-list"] .pl-head,
  [data-module="punch-list"] .pl-filters,
  [data-module="punch-list"] .pl-count-line,
  [data-module="punch-list"] .pl-snap-banner,
  [data-module="punch-list"] .pl-navtabs,
  [data-module="punch-list"] .pl-wk-sync,
  [data-module="punch-list"] .pl-fab,
  [data-module="punch-list"] .pl-area-acts,
  [data-module="punch-list"] .pl-td-actions,
  [data-module="punch-list"] .pl-th-actions,
  [data-module="punch-list"] .pl-td-status,
  [data-module="punch-list"] .pl-th-status,
  /* Interactive channel controls must never print into the issued document. */
  [data-module="punch-list"] .pl-ch-link,
  [data-module="punch-list"] .pl-ch-x { display: none !important; }

  /* Print the channel badge as a plain value, not a tinted pill. */
  [data-module="punch-list"] .pl-ch-badge {
    background: none !important; border: 0 !important; padding: 0 !important;
    color: var(--print-ink) !important;
  }
  [data-module="punch-list"] .pl-ch-z { color: var(--print-ink) !important; }
  [data-module="punch-list"] .pl-ch-l { color: var(--print-ink) !important; }

  [data-module="punch-list"] .pl-print-head { display: block; margin-bottom: 12pt; color: var(--print-ink); }
  [data-module="punch-list"] .pl-ph-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 24pt; }
  [data-module="punch-list"] .pl-ph-project { font-size: 14pt; font-weight: 700; }
  [data-module="punch-list"] .pl-ph-title { font-size: 11pt; font-weight: 600; }
  [data-module="punch-list"] .pl-ph-meta { font-size: 9pt; margin-top: 6pt; display: flex; gap: 18pt; flex-wrap: wrap; }
  [data-module="punch-list"] .pl-ph-field { white-space: nowrap; }
  [data-module="punch-list"] .pl-ph-key { font-size: 8pt; text-align: right; }
  [data-module="punch-list"] .pl-key { display: block; }
  [data-module="punch-list"] .pl-key-priority { border-left: 3pt solid var(--print-ink); padding-left: 4pt; }
  [data-module="punch-list"] .pl-key-new { font-weight: 700; }
  [data-module="punch-list"] .pl-key-completed { text-decoration: line-through; }

  /* The document table */
  [data-module="punch-list"] .pl-table-wrap { overflow: visible !important; border: 0 !important; }
  [data-module="punch-list"] .pl-table {
    width: 100% !important; border-collapse: collapse !important;
    font-size: 8.5pt !important; color: var(--print-ink) !important; background: var(--print-paper) !important;
  }
  [data-module="punch-list"] .pl-table thead { display: table-header-group; }
  [data-module="punch-list"] .pl-table th {
    font-size: 8pt !important; color: var(--print-ink) !important; background: var(--print-paper) !important;
    border-bottom: 1.5pt solid var(--print-ink) !important; text-align: left; padding: 3pt 4pt !important;
  }
  [data-module="punch-list"] .pl-table td {
    color: var(--print-ink) !important; background: var(--print-paper) !important;
    border-bottom: 0.5pt solid var(--print-rule) !important; padding: 3pt 4pt !important;
    vertical-align: top;
  }
  [data-module="punch-list"] .pl-item-row { page-break-inside: avoid; }
  [data-module="punch-list"] .pl-area-row td {
    background: var(--print-band) !important; font-weight: 700 !important;
    border-bottom: 1pt solid var(--print-ink) !important; padding: 4pt !important;
  }
  [data-module="punch-list"] .pl-is-priority .pl-td-num { border-left: 3pt solid var(--print-ink) !important; box-shadow: none !important; }
  [data-module="punch-list"] .pl-status-completed .pl-td-wide,
  [data-module="punch-list"] .pl-status-verified .pl-td-wide { text-decoration: line-through; }
  [data-module="punch-list"] .pl-new-chip {
    color: var(--print-ink); background: var(--print-paper); border: 1pt solid var(--print-ink);
    font-size: 7pt; padding: 0 3pt;
  }
  [data-module="punch-list"] .pl-flag, [data-module="punch-list"] .pl-flag-static { display: none !important; }
  /* Optional columns rejoin the document in print even if the tablet layout
   * hid them on screen */
  [data-module="punch-list"] .pl-col-optional { display: table-cell !important; }
}

/* ============================================================
 * Summary dashboard (slice 4)
 * ============================================================ */
[data-module="punch-list"] .pl-summary { display: flex; flex-direction: column; gap: 22px; margin-top: 8px; }

[data-module="punch-list"] .pl-stat-grid {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px;
}
[data-module="punch-list"] .pl-stat-card {
  background: var(--panel); border: 1px solid var(--border); border-radius: var(--panel-radius);
  padding: 16px 14px; display: flex; flex-direction: column; gap: 4px;
}
[data-module="punch-list"] .pl-stat-num { font-size: 26px; font-weight: 700; color: var(--text-primary); line-height: 1; }
[data-module="punch-list"] .pl-stat-label {
  font-size: 11px; font-weight: 700; color: var(--text-secondary);
  text-transform: uppercase; letter-spacing: 0.03em;
}
[data-module="punch-list"] .pl-stat-open .pl-stat-num { color: var(--pl-status-open); }
[data-module="punch-list"] .pl-stat-in_progress .pl-stat-num { color: var(--pl-status-progress); }
[data-module="punch-list"] .pl-stat-completed .pl-stat-num { color: var(--pl-status-done); }
[data-module="punch-list"] .pl-stat-verified .pl-stat-card { border-color: var(--pl-status-verified); }
[data-module="punch-list"] .pl-stat-verified .pl-stat-num { color: var(--pl-status-verified); }

[data-module="punch-list"] .pl-summary-section { display: flex; flex-direction: column; gap: 8px; }
[data-module="punch-list"] .pl-summary-h {
  font-size: 14px; font-weight: 700; color: var(--text-primary); margin: 0;
  display: flex; align-items: center; gap: 8px;
}
[data-module="punch-list"] .pl-summary-count {
  font-size: 12px; font-weight: 700; color: var(--warning);
  background: var(--warning-soft); border-radius: 10px; padding: 1px 8px;
}
[data-module="punch-list"] .pl-summary-table .pl-num-cell { text-align: right; white-space: nowrap; width: 1%; }
[data-module="punch-list"] .pl-summary-table th.pl-num-cell { text-align: right; }
[data-module="punch-list"] .pl-summary-table .pl-pct-cell { width: 180px; }
[data-module="punch-list"] .pl-pct-bar {
  display: inline-block; width: 110px; height: 8px; border-radius: 4px;
  background: var(--panel-2); overflow: hidden; vertical-align: middle; margin-right: 8px;
}
[data-module="punch-list"] .pl-pct-fill { display: block; height: 100%; background: var(--pl-status-done); }
[data-module="punch-list"] .pl-pct-num { font-size: 12px; font-weight: 700; color: var(--text-secondary); }

[data-module="punch-list"] .pl-pri-list { display: flex; flex-direction: column; gap: 6px; }
[data-module="punch-list"] .pl-pri-row {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  background: var(--panel); border: 1px solid var(--border); border-left: 3px solid var(--warning);
  border-radius: var(--button-radius); padding: 10px 12px; cursor: pointer; color: var(--text-primary);
}
[data-module="punch-list"] .pl-pri-row:hover { border-color: var(--border-strong); background: var(--row-hover); }
[data-module="punch-list"] .pl-pri-num { font-weight: 700; color: var(--text-primary); flex-shrink: 0; min-width: 44px; }
[data-module="punch-list"] .pl-pri-desc {
  flex: 1; min-width: 0; font-size: 13px; color: var(--text-secondary);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
[data-module="punch-list"] .pl-pri-status {
  flex-shrink: 0; font-size: 11px; font-weight: 700; border-radius: 10px; padding: 2px 10px;
  border: 1px solid var(--border); color: var(--text-secondary);
}
[data-module="punch-list"] .pl-pri-status.pl-status-open { background: var(--pl-status-open-soft); color: var(--pl-status-open); border-color: var(--pl-status-open); }
[data-module="punch-list"] .pl-pri-status.pl-status-in_progress { background: var(--pl-status-progress-soft); color: var(--pl-status-progress); border-color: var(--pl-status-progress); }
[data-module="punch-list"] .pl-pri-status.pl-status-completed { background: var(--pl-status-done-soft); color: var(--pl-status-done); border-color: var(--pl-status-done); }
[data-module="punch-list"] .pl-pri-status.pl-status-verified { background: var(--pl-status-verified-soft); color: var(--pl-status-verified); border-color: var(--pl-status-verified); }

/* Phone: stat cards stack, tables scroll (table-wrap already scrolls). */
@media (max-width: 640px) {
  [data-module="punch-list"] .pl-stat-grid { grid-template-columns: repeat(2, 1fr); }
  [data-module="punch-list"] .pl-pri-desc { white-space: normal; }
}

/* ============================================================
 * v4 Slice D -- Verify mode folded into the Walk board.
 * A Verify toggle over the same channel spine surfaces each zone's
 * open/fixing items with big Verified / Still open actions (replaces the
 * deleted v2 sequential Re-walk view). Reuses the walk-board rollups.
 * ============================================================ */

/* Verify toggle in the sync bar. */
[data-module="punch-list"] .pl-wk-verify-toggle {
  appearance: none; cursor: pointer; touch-action: manipulation;
  min-height: 36px; padding: 7px 14px; border-radius: 999px; font-size: 13px; font-weight: 700;
  border: 1px solid var(--border-strong); background: var(--panel-2); color: var(--text-primary);
}
[data-module="punch-list"] .pl-wk-verify-toggle:hover { border-color: var(--pl-status-verified); }
[data-module="punch-list"] .pl-wk-verify-toggle[disabled] { opacity: 0.55; cursor: default; pointer-events: none; }
[data-module="punch-list"] .pl-wk-verify-toggle.is-on {
  background: var(--pl-status-verified-soft); color: var(--pl-status-verified); border-color: var(--pl-status-verified);
}

/* Verify session tally + chronicle affordance, shown while verify is on. */
[data-module="punch-list"] .pl-wk-verifybar {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 10px 14px; margin-bottom: 12px; border-radius: var(--panel-radius);
  border: 1px solid var(--pl-status-verified); background: var(--pl-status-verified-soft);
}
[data-module="punch-list"] .pl-wk-verify-tally { font-size: 13px; font-weight: 700; color: var(--text-primary); }
[data-module="punch-list"] .pl-wk-verify-hint { font-size: 12px; color: var(--text-secondary); flex: 1; min-width: 120px; }
[data-module="punch-list"] .pl-wk-verifybar .pl-btn { margin-left: auto; }

/* Verify panel: each open/fixing item on a zone with big actions. */
[data-module="punch-list"] .pl-vf-panel { border-color: var(--pl-status-verified); }
[data-module="punch-list"] .pl-vf-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
[data-module="punch-list"] .pl-vf-item {
  display: flex; flex-direction: column; gap: 8px;
  border: 1px solid var(--border); border-radius: var(--button-radius);
  background: var(--panel); padding: 10px 12px;
}
[data-module="punch-list"] .pl-vf-item.is-settled { opacity: 0.6; }
[data-module="punch-list"] .pl-vf-item-open {
  appearance: none; cursor: pointer; touch-action: manipulation;
  display: flex; align-items: center; gap: 10px; width: 100%;
  background: transparent; border: 0; padding: 0; text-align: left; color: var(--text-primary);
}
[data-module="punch-list"] .pl-vf-seq { font-family: var(--font-mono); font-weight: 800; color: var(--text-secondary); flex: 0 0 auto; }
[data-module="punch-list"] .pl-vf-desc {
  flex: 1; min-width: 0; font-size: 14px; color: var(--text-primary);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
[data-module="punch-list"] .pl-vf-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
[data-module="punch-list"] .pl-vf-btn {
  appearance: none; cursor: pointer; touch-action: manipulation; min-height: 48px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--border); background: var(--panel-2); color: var(--text-primary);
  border-radius: var(--button-radius); font-size: 15px; font-weight: 700; padding: 8px 10px;
}
[data-module="punch-list"] .pl-vf-btn:hover { border-color: var(--border-strong); }
[data-module="punch-list"] .pl-vf-verified { background: var(--pl-status-verified-soft); border-color: var(--pl-status-verified); color: var(--pl-status-verified); }
[data-module="punch-list"] .pl-vf-open { background: var(--pl-status-open-soft); border-color: var(--pl-status-open); color: var(--pl-status-open); }
[data-module="punch-list"] .pl-vf-settled {
  font-size: 12px; font-weight: 700; color: var(--pl-status-open);
  text-align: center; padding: 6px 0;
}

[data-module="punch-list"] .pl-wk-root.is-verify .pl-wk-chan { cursor: default; }

@media (max-width: 640px) {
  [data-module="punch-list"] .pl-vf-btn { min-height: 56px; font-size: 16px; }
}

/* ---- slice 8: plan sheets + pins ------------------------------------ */
/* View chrome renders INSIDE the module container -> scoped. The canvas
   engine (StrataRedlinesCanvas) draws into .pl-plans-canvas and reads the
   platform theme tokens (--error / --warning / --panel / --border-strong)
   off the stage element, so both themes come for free. */
/* DEFINITE heights, never content-derived: with min-height the engine's
 * ResizeObserver feedback-loops (canvas grows -> container grows -> resize
 * fires -> canvas grows) until the canvas hits the 2^25 px max and the sheet
 * renders ~16.7M px off-screen (v2 visual-pass defect). 100dvh per the
 * mobile lesson; the 240px offset clears the shell header + plans chrome. */
[data-module="punch-list"] .pl-plans-root { display: flex; flex-direction: column; height: calc(100dvh - 240px); min-height: 340px; position: relative; }
[data-module="punch-list"] .pl-btn.is-active {
  background: var(--accent-soft); border-color: var(--accent-line); color: var(--accent);
}
[data-module="punch-list"] .pl-plans-actions { flex-wrap: wrap; }
[data-module="punch-list"] .pl-plans-hint {
  font-size: 13px; color: var(--accent); background: var(--accent-soft);
  border: 1px solid var(--accent-line); border-radius: var(--button-radius);
  padding: 8px 12px; margin: 0 0 10px;
}
[data-module="punch-list"] .pl-plans-body {
  flex: 1; min-height: 0; display: flex; position: relative;
}
[data-module="punch-list"] .pl-plans-canvas {
  flex: 1; min-height: 0; height: 100%; position: relative; overflow: hidden;
  border: 1px solid var(--border); border-radius: var(--panel-radius);
  background: var(--panel);
}
[data-module="punch-list"] .pl-plans-empty,
[data-module="punch-list"] .pl-plans-loading {
  display: flex; align-items: center; justify-content: center; height: 100%;
  min-height: 200px; font-size: 14px; color: var(--text-secondary); text-align: center; padding: 24px;
}
/* Touch-device placement crosshair: a fixed center reticle the user aligns the
   sheet under, then taps "Drop pin here". Non-interactive (pointer-events:none)
   so the pan/zoom gestures pass straight through to the canvas underneath.
   Tokens only -> both themes. */
[data-module="punch-list"] .pl-plans-crosshair {
  position: absolute; inset: 0; pointer-events: none; z-index: 5;
}
[data-module="punch-list"] .pl-plans-crosshair[hidden] { display: none; }
[data-module="punch-list"] .pl-plans-crosshair-h,
[data-module="punch-list"] .pl-plans-crosshair-v {
  position: absolute; top: 50%; left: 50%; background: var(--error);
  opacity: 0.85; transform: translate(-50%, -50%);
}
[data-module="punch-list"] .pl-plans-crosshair-h { width: 44px; height: 2px; }
[data-module="punch-list"] .pl-plans-crosshair-v { width: 2px; height: 44px; }
[data-module="punch-list"] .pl-plans-crosshair-dot {
  position: absolute; top: 50%; left: 50%; width: 12px; height: 12px;
  border: 2px solid var(--error); border-radius: 50%;
  background: var(--accent-soft); transform: translate(-50%, -50%);
}
/* Drop button: a comfortable touch target (>=56px). */
[data-module="punch-list"] .pl-plans-drop { min-height: 56px; }

/* ---- slice B: page navigation (whole-document sets) ------------------- */
/* Bottom command bar: phone thumb-reachable page nav under the stage. */
[data-module="punch-list"] .pl-plans-bottom { flex: 0 0 auto; }
[data-module="punch-list"] .pl-plans-bottom:empty { display: none; }
[data-module="punch-list"] .pl-pagenav {
  display: flex; align-items: center; gap: 8px; padding: 8px 4px 0;
}
[data-module="punch-list"] .pl-pg-btn {
  flex: 0 0 auto; width: 44px; height: 40px; border-radius: var(--button-radius);
  border: 1px solid var(--border-strong); background: var(--panel); color: var(--text-primary);
  font-size: 18px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
  touch-action: manipulation;
}
[data-module="punch-list"] .pl-pg-btn:hover:not([disabled]) { border-color: var(--accent-line); color: var(--accent); }
[data-module="punch-list"] .pl-pg-btn[disabled] { opacity: 0.4; cursor: default; }
[data-module="punch-list"] .pl-pg-ind {
  flex: 1; text-align: center; font-family: var(--font-mono); font-size: 13px; font-weight: 700; color: var(--text-primary);
}
[data-module="punch-list"] .pl-pg-ind small {
  display: block; font-family: inherit; font-size: 10px; color: var(--text-tertiary); font-weight: 600; letter-spacing: 0.03em;
}
[data-module="punch-list"] .pl-pg-jump {
  flex: 0 0 auto; width: 72px; height: 40px; text-align: center; border-radius: var(--button-radius);
  border: 1px solid var(--border); background: var(--input-bg); color: var(--text-primary);
  font-family: var(--font-mono); font-size: 14px; font-weight: 700;
}

/* ---- slice B: size-aware loading ------------------------------------- */
[data-module="punch-list"] .pl-plans-load {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
  height: 100%; min-height: 200px; padding: 24px; text-align: center;
}
[data-module="punch-list"] .pl-plans-load-title { font-size: 14px; font-weight: 700; color: var(--text-primary); }
[data-module="punch-list"] .pl-plans-load-stage { font-size: 12px; color: var(--accent); font-weight: 600; }
[data-module="punch-list"] .pl-plans-load-bar {
  width: 220px; max-width: 70%; height: 8px; border-radius: 999px; background: var(--panel-2);
  border: 1px solid var(--border); overflow: hidden;
}
[data-module="punch-list"] .pl-plans-load-fill {
  height: 100%; width: 40%; border-radius: 999px; background: var(--accent);
  animation: pl-load-indeterminate 1.3s ease-in-out infinite;
}
@keyframes pl-load-indeterminate {
  0% { margin-left: -40%; } 100% { margin-left: 100%; }
}
[data-module="punch-list"] .pl-plans-load-sub { font-size: 11px; color: var(--text-tertiary); line-height: 1.5; max-width: 300px; }

/* ---- slice B: place-this-item armed banner --------------------------- */
[data-module="punch-list"] .pl-armbanner {
  position: absolute; left: 12px; right: 12px; top: 10px; z-index: 7;
  background: var(--accent); color: var(--bg); border-radius: var(--panel-radius);
  padding: 10px 14px; box-shadow: var(--shadow); display: flex; align-items: center; gap: 10px;
}
[data-module="punch-list"] .pl-armbanner[hidden] { display: none; }
[data-module="punch-list"] .pl-armbanner-t { flex: 1; font-size: 12px; font-weight: 700; line-height: 1.35; }
[data-module="punch-list"] .pl-armbanner-t b { font-family: var(--font-mono); }
[data-module="punch-list"] .pl-armbanner-cancel {
  flex: 0 0 auto; background: var(--overlay-bg); border: none; color: var(--bg); font-size: 11px;
  font-weight: 700; padding: 7px 11px; border-radius: 999px; cursor: pointer; min-height: 36px; touch-action: manipulation;
}

/* ---- slice B: rail Place action + phone "Items on this page" sheet ---- */
[data-module="punch-list"] .pl-rail-item.is-unpinned {
  padding: 0; border: none; background: none; gap: 0;
}
[data-module="punch-list"] .pl-rail-open {
  display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; text-align: left; cursor: pointer;
  padding: 9px 10px; min-height: 44px; border: 1px dashed var(--border); border-radius: var(--button-radius);
  background: var(--panel-2); color: var(--text-secondary); font-size: 12px;
}
[data-module="punch-list"] .pl-rail-open:hover { border-color: var(--accent-line); }
[data-module="punch-list"] .pl-rail-item.is-unpinned { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
[data-module="punch-list"] .pl-place-btn {
  flex: 0 0 auto; height: 36px; padding: 0 13px; border-radius: 999px; border: 1px solid var(--accent-line);
  background: var(--accent-soft); color: var(--accent); font-size: 12px; font-weight: 800; cursor: pointer;
  display: inline-flex; align-items: center; gap: 5px; touch-action: manipulation; white-space: nowrap;
}
[data-module="punch-list"] .pl-place-btn:hover { border-color: var(--accent); }
[data-module="punch-list"] .pl-rail-item.is-placing .pl-place-btn { background: var(--accent); color: var(--bg); border-color: var(--accent); }

/* Phone-only "Items" toggle + full-screen sheet (D-v4.4). Hidden on desktop
 * (the side rail is always visible there). */
[data-module="punch-list"] .pl-railbtn { display: none; }
[data-module="punch-list"] .pl-railsheet { display: none; }
@media (max-width: 900px) {
  [data-module="punch-list"] .pl-railbtn { display: inline-block; }
  [data-module="punch-list"] .pl-railsheet {
    position: absolute; inset: 0; z-index: 10; background: var(--panel);
    display: flex; flex-direction: column;
  }
  [data-module="punch-list"] .pl-railsheet[hidden] { display: none; }
}
[data-module="punch-list"] .pl-railsheet-head {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 12px 16px; border-bottom: 1px solid var(--border);
}
[data-module="punch-list"] .pl-railsheet-head b { font-size: 15px; font-weight: 700; }
[data-module="punch-list"] .pl-railsheet-x {
  background: none; border: none; color: var(--text-secondary); font-size: 22px; line-height: 1;
  cursor: pointer; min-height: 44px; min-width: 44px; touch-action: manipulation;
}
[data-module="punch-list"] .pl-railsheet-scroll { flex: 1; overflow-y: auto; padding: 8px 12px 16px; }

/* Pin capture / picker render in body-mounted overlays -> unscoped. */
.pl-pin-form { min-width: 320px; max-width: 480px; }
.pl-pin-ref { font-size: 13px; color: var(--text-secondary); font-weight: 700; }
.pl-pin-picklist {
  display: flex; flex-direction: column; gap: 4px; max-height: 320px; overflow-y: auto;
  margin-top: 8px;
}
.pl-pin-pickrow {
  display: flex; align-items: baseline; gap: 10px; text-align: left; width: 100%;
  padding: 8px 10px; background: var(--panel); color: var(--text-primary);
  border: 1px solid var(--border); border-radius: var(--button-radius); cursor: pointer;
}
.pl-pin-pickrow:hover { border-color: var(--border-strong); }
.pl-pin-pickrow.is-sel { background: var(--accent-soft); border-color: var(--accent-line); }
.pl-pin-picknum { font-weight: 700; color: var(--accent); flex: 0 0 auto; }
.pl-pin-pickdesc { color: var(--text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

@media (max-width: 640px) {
  [data-module="punch-list"] .pl-plans-root { height: calc(100dvh - 200px); min-height: 300px; }
  .pl-pin-form { min-width: 0; }
  .pl-pin-pickrow { min-height: 44px; }
}

/* ---- slice 9: sheet markup tool strip -------------------------------- */
[data-module="punch-list"] .pl-plans-tools {
  display: inline-flex; flex-wrap: wrap; gap: 4px; align-items: center;
}
[data-module="punch-list"] .pl-plans-tool { padding: 6px 12px; }
[data-module="punch-list"] .pl-plans-del { color: var(--error); border-color: var(--error); }
[data-module="punch-list"] .pl-plans-del[hidden] { display: none; }

/* ---- slice 9: gallery per-photo Annotate action ---------------------- */
.pl-gal-annot {
  appearance: none; cursor: pointer; flex-shrink: 0;
  border: 1px solid var(--border); background: var(--panel-2);
  color: var(--text-secondary); border-radius: var(--button-radius);
  padding: 4px 8px; font-size: 11px; font-weight: 600;
}
.pl-gal-annot:hover { color: var(--accent); border-color: var(--accent); }

/* ---- slice 9: photo markup overlay (body-mounted -> unscoped, mirrors
   the lightbox scoping note above) ------------------------------------ */
/* ============================================================
 * Slice 18 -- mobile-first photo markup overlay (D-v3.6), per annotate.html.
 * Chrome floating over PHOTO content is theme-invariant dark: built from
 * --strata-markup-text (near-black in BOTH themes), NEVER --overlay-bg (which
 * drops to 0.3 alpha in light and washes out over a pale photo). A native-photo
 * top scrim + a bottom thumb-reach toolbar with the four engine tools.
 * ============================================================ */
.pl-annot,
.pl-annot[data-module="punch-list"] {
  position: fixed; inset: 0; z-index: 9500;
  background: var(--bg);
  display: flex; flex-direction: column; overflow: hidden;
}
/* full-bleed photo stage; the engine mounts into .pl-annot-stage (absolute fill)
 * so the top scrim + crosshair siblings are NOT wiped by the engine's stage
 * innerHTML reset. */
.pl-annot-photo { position: relative; flex: 1; min-height: 0; overflow: hidden; background: var(--panel); }
.pl-annot-stage { position: absolute; inset: 0; overflow: hidden; }
.pl-annot-loading {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: 14px; color: var(--strata-markup-fill); z-index: 1;
}

/* top scrim strip -- theme-invariant dark chrome over the photo. */
.pl-annot-top {
  position: absolute; top: 0; left: 0; right: 0; z-index: 3;
  display: flex; align-items: center; gap: 10px;
  padding: calc(14px + env(safe-area-inset-top, 0px)) 12px 26px;
  background:
    linear-gradient(to bottom, color-mix(in srgb, var(--strata-markup-text) 72%, transparent), transparent 74%),
    linear-gradient(to bottom, color-mix(in srgb, var(--strata-markup-text) 72%, transparent), transparent 48%);
}
.pl-annot-back {
  flex: 0 0 auto; width: 44px; height: 44px; border-radius: 50%; border: none;
  background: color-mix(in srgb, var(--strata-markup-text) 58%, transparent);
  color: var(--strata-markup-fill); font-size: 24px; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center; touch-action: manipulation;
}
.pl-annot-heading {
  flex: 1; min-width: 0; font-family: var(--font-display); font-size: 16px; font-weight: 700;
  color: var(--strata-markup-fill); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  text-shadow: 0 1px 4px color-mix(in srgb, var(--strata-markup-text) 85%, transparent);
}
.pl-annot-heading small {
  display: block; font-family: inherit; font-weight: 500; font-size: 11px; opacity: 0.92; margin-top: 1px;
  color: var(--strata-markup-fill); overflow: hidden; text-overflow: ellipsis;
  text-shadow: 0 1px 4px color-mix(in srgb, var(--strata-markup-text) 85%, transparent);
}
.pl-annot-save {
  flex: 0 0 auto; min-height: 44px; padding: 0 18px; border-radius: 999px; border: 1px solid var(--accent);
  background: var(--accent); color: var(--bg); font-size: 14px; font-weight: 700; cursor: pointer;
  display: inline-flex; align-items: center; gap: 7px; touch-action: manipulation;
}
.pl-annot-save svg { width: 15px; height: 15px; }
.pl-annot-save:disabled { opacity: 0.55; cursor: default; }

/* saved-as-copy toast */
.pl-annot-toast {
  position: absolute; z-index: 4; top: calc(74px + env(safe-area-inset-top, 0px)); left: 50%; transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: 8px; max-width: 86%; padding: 10px 14px; border-radius: 999px;
  background: var(--success-soft); border: 1px solid var(--success); color: var(--success);
  font-size: 13px; font-weight: 700; box-shadow: var(--shadow-lg);
}
.pl-annot-toast svg { width: 15px; height: 15px; flex: 0 0 auto; }

/* coarse-pointer center crosshair (point tools only). The engine's single-finger
 * touch pointerdown always pans and never fires onPlace, so on touch the point
 * tools (arrow/text/cloud) place via a fixed crosshair + "Drop here" -- same
 * fallback the plans canvas uses. */
.pl-annot-crosshair {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  display: flex; align-items: center; justify-content: center;
}
.pl-annot-crosshair::before, .pl-annot-crosshair::after {
  content: ''; position: absolute; background: var(--strata-markup-primary);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--strata-markup-fill) 75%, transparent);
}
.pl-annot-crosshair::before { width: 42px; height: 2px; }
.pl-annot-crosshair::after { width: 2px; height: 42px; }
.pl-annot-crosshair[hidden] { display: none; }

/* inline text-entry prompt (ctx.ui.modal is z9000, BELOW this z9500 overlay, so
 * it would render behind the photo -- the note prompt is inline instead). */
.pl-annot-textprompt {
  position: absolute; z-index: 6; left: 50%; top: calc(84px + env(safe-area-inset-top, 0px));
  transform: translateX(-50%); width: min(92%, 420px);
  background: var(--panel); border: 1px solid var(--border-strong); border-radius: var(--panel-radius);
  box-shadow: var(--shadow-lg); padding: 12px; display: flex; flex-direction: column; gap: 10px;
}
.pl-annot-textprompt input {
  width: 100%; box-sizing: border-box; font-size: 16px; padding: 10px 12px;
  border-radius: var(--button-radius); border: 1px solid var(--border);
  background: var(--panel-2); color: var(--text-primary);
}
.pl-annot-prompt-msg { font-size: 14px; color: var(--text-primary); line-height: 1.4; }
.pl-annot-textprompt-row { display: flex; gap: 8px; justify-content: flex-end; }

/* bottom thumb-reach toolbar */
.pl-annot-tools {
  flex: 0 0 auto; background: var(--panel); border-top: 1px solid var(--border);
  padding: 10px 12px calc(12px + env(safe-area-inset-bottom, 0px));
}
.pl-annot-hint { font-size: 12px; color: var(--text-tertiary); text-align: center; margin: 2px 0 10px; min-height: 15px; }
.pl-annot-hint b { color: var(--accent); font-weight: 700; }
.pl-annot-toolrow { display: flex; gap: 8px; }
.pl-annot-tool {
  flex: 1; min-height: 56px; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 4px; border-radius: var(--button-radius); cursor: pointer;
  background: var(--panel-2); border: 1px solid var(--border); color: var(--text-secondary);
  font-size: 10px; font-weight: 700; letter-spacing: 0.02em; touch-action: manipulation;
}
.pl-annot-tool svg { width: 22px; height: 22px; }
.pl-annot-tool.is-active { background: var(--accent-soft); border-color: var(--accent-line); color: var(--accent); }
.pl-annot-actionrow {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 10px; flex-wrap: wrap;
}
.pl-annot-swatches { display: flex; align-items: center; gap: 10px; }
.pl-annot-sw-label { font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-tertiary); font-weight: 700; }
.pl-annot-sw {
  width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--border-strong);
  cursor: pointer; padding: 0; touch-action: manipulation;
}
.pl-annot-sw-primary { background: var(--strata-markup-primary); }
.pl-annot-sw-fill { background: var(--strata-markup-fill); }
.pl-annot-sw.is-on { box-shadow: 0 0 0 2px var(--panel), 0 0 0 4px var(--accent); }
.pl-annot-tail { display: flex; align-items: center; gap: 8px; }
.pl-annot-drop {
  min-height: 44px; padding: 0 16px; border-radius: var(--button-radius); cursor: pointer;
  font-size: 13px; font-weight: 700; background: var(--accent); border: 1px solid var(--accent);
  color: var(--bg); touch-action: manipulation;
}
.pl-annot-drop[hidden] { display: none; }
.pl-annot-undo {
  min-height: 44px; padding: 0 16px; border-radius: var(--button-radius); display: inline-flex;
  align-items: center; gap: 7px; cursor: pointer; font-size: 13px; font-weight: 700;
  background: var(--panel-2); border: 1px solid var(--border); color: var(--text-secondary); touch-action: manipulation;
}
.pl-annot-undo svg { width: 16px; height: 16px; }
.pl-annot-undo:disabled { opacity: 0.4; cursor: default; }

@media (max-width: 640px) {
  [data-module="punch-list"] .pl-plans-tool { min-height: 44px; }
  [data-module="punch-list"] .pl-plans-del { min-height: 44px; }
  .pl-gal-annot { min-height: 44px; }
}

/* ============================================================
 * Engine chrome inside the punch-list scope. The .rl-plan-* classes are
 * styled ONLY under [data-module="redlines"], so inside THIS module the
 * engine's stage had no CSS at all: the overlay canvas stayed in flow, the
 * stage auto-sized to its content, and the engine's updateSize<->overlay
 * feedback ratcheted the canvas to the 2^25 max (plans sheet rendered
 * ~16.7M px off-screen -- v2 visual pass). Mirror the load-bearing redlines
 * rules for every engine mount in this module (plans canvas + photo
 * annotate stage). The ABSOLUTE positioning of overlay/selection is what
 * breaks the feedback loop: the canvas leaves the flow, so the stage's rect
 * derives from its parent, never its content.
 * ============================================================ */
[data-module="punch-list"] .pl-plans-canvas .rl-plan-stage,
.pl-annot-stage .rl-plan-stage {
  position: relative; width: 100%; height: 100%;
  min-width: 0; min-height: 0; overflow: hidden;
  background: var(--bg); color: var(--text-primary);
  isolation: isolate; user-select: none; touch-action: none;
}
[data-module="punch-list"] .pl-plans-canvas .rl-plan-stage:focus,
.pl-annot-stage .rl-plan-stage:focus { outline: none; }
[data-module="punch-list"] .pl-plans-canvas .rl-plan-world,
.pl-annot-stage .rl-plan-world {
  position: absolute; top: 0; left: 0;
  transform-origin: 0 0; will-change: transform;
  box-shadow: var(--shadow-sm);
}
[data-module="punch-list"] .pl-plans-canvas .rl-plan-background,
.pl-annot-stage .rl-plan-background { display: block; background: var(--panel); }
[data-module="punch-list"] .pl-plans-canvas .rl-plan-overlay,
[data-module="punch-list"] .pl-plans-canvas .rl-plan-selection,
.pl-annot-stage .rl-plan-overlay,
.pl-annot-stage .rl-plan-selection {
  position: absolute; inset: 0; width: 100%; height: 100%;
}
[data-module="punch-list"] .pl-plans-canvas .rl-plan-overlay,
.pl-annot-stage .rl-plan-overlay { z-index: 2; cursor: grab; }
[data-module="punch-list"] .pl-plans-canvas .rl-plan-stage.is-select-mode .rl-plan-overlay,
.pl-annot-stage .rl-plan-stage.is-select-mode .rl-plan-overlay { cursor: default; }
[data-module="punch-list"] .pl-plans-canvas .rl-plan-stage.is-placing .rl-plan-overlay,
.pl-annot-stage .rl-plan-stage.is-placing .rl-plan-overlay { cursor: crosshair; }
[data-module="punch-list"] .pl-plans-canvas .rl-plan-stage.is-panning .rl-plan-overlay,
.pl-annot-stage .rl-plan-stage.is-panning .rl-plan-overlay { cursor: grabbing; }
/* The photo annotator owns its own chrome (top strip + bottom toolbar) and is
 * a native-photo-viewer surface -- suppress the engine's built-in zoom controls
 * + scale/count readout, which otherwise collide with the top scrim strip.
 * Pinch / wheel zoom still work. */
.pl-annot-stage .rl-plan-chrome { display: none; }

/* Plan lens: STYLE the engine's zoom chrome instead of hiding it. The canvas
 * engine appends .rl-plan-chrome (zoom in/out/fit + scale readout) into every
 * stage, but its CSS lives only under [data-module="redlines"] -- so in the
 * punch-list plan view the SVG buttons fell back to ~300px unstyled dead
 * blocks stacked over the sheet. Ported from modules/redlines/index.css so the
 * buttons render at their intended size and stay functional (the only zoom
 * affordance for a trackpad-less desktop). Scoped to .pl-plans-canvas so the
 * photo annotator's hide rule above is untouched. */
[data-module="punch-list"] .pl-plans-canvas .rl-plan-chrome {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
}
[data-module="punch-list"] .pl-plans-canvas .rl-plan-zoom {
  position: absolute;
  left: var(--rl-canvas-chrome-left, 14px);
  bottom: calc(var(--rl-overlay-inset, 8px) + var(--rl-dock-height, 0px) + 10px);
  display: flex;
  flex-direction: column;
  gap: 6px;
  pointer-events: auto;
}
[data-module="punch-list"] .pl-plans-canvas .rl-plan-tool-btn {
  width: 38px;
  min-width: 38px;
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  border-radius: var(--button-radius);
  background: var(--panel);
  color: var(--text-primary);
  box-shadow: var(--shadow-sm);
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}
[data-module="punch-list"] .pl-plans-canvas .rl-plan-tool-btn svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
[data-module="punch-list"] .pl-plans-canvas .rl-plan-tool-btn:hover {
  border-color: var(--border-strong);
  background: var(--panel-2);
}
[data-module="punch-list"] .pl-plans-canvas .rl-plan-info {
  position: absolute;
  left: 50%;
  bottom: calc(var(--rl-overlay-inset, 8px) + var(--rl-dock-height, 0px) + 10px);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: calc(100% - 120px);
  transform: translateX(-50%);
  padding: 7px 12px;
  border: 1px solid var(--border);
  border-radius: var(--button-radius);
  background: var(--panel);
  color: var(--text-secondary);
  box-shadow: var(--shadow-sm);
  font-size: 12px;
  pointer-events: none;
  white-space: nowrap;
}

/* ============================================================
 * Slice 19 -- Plan lens (D-v3.3): status-heatmap pins, tapped-pin popover,
 * desktop item rail, collapsible channel picker. Pins/popover/rail render
 * INSIDE the module container -> scoped. The channel picker renders in the
 * body-mounted capture sheet -> unscoped (mirrors slice-17 pl-picker rules).
 * ============================================================ */

/* Collapsible area groups in the channel picker (plan tap-to-capture). The
 * base .pl-picker-group is a sticky uppercase label; collapsible mode turns it
 * into a full-width toggle row with a count badge. */
.pl-picker-group.is-collapsible {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 10px 12px; cursor: pointer; position: static; min-height: 44px;
  border-bottom: 1px solid var(--border); background: var(--panel-2);
  /* The collapsible header is a real <button> (keyboard toggle); reset the UA
     button chrome so it renders like the label row it replaces. */
  width: 100%; box-sizing: border-box; appearance: none; border-top: none;
  border-left: none; border-right: none; font: inherit; text-align: left;
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--text-tertiary);
}
.pl-picker-group.is-collapsible:hover { background: var(--row-hover); }
.pl-picker-group.is-collapsible .pl-picker-gname { flex: 1; min-width: 0; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.pl-picker-group.is-collapsible .pl-picker-gcount {
  flex: 0 0 auto; font-family: var(--font-mono); font-size: 11px; font-weight: 700;
  color: var(--text-secondary); background: var(--panel); border: 1px solid var(--border);
  border-radius: 999px; padding: 1px 8px; letter-spacing: 0;
}
.pl-picker-group.is-collapsible.is-open { color: var(--accent); border-color: var(--accent-line); }
.pl-picker-group.is-collapsible::after {
  content: '+'; flex: 0 0 auto; font-weight: 800; color: var(--text-tertiary); font-size: 15px;
}
.pl-picker-group.is-collapsible.is-open::after { content: '\2212'; color: var(--accent); }

/* Pin overlay layer: pointer-transparent except over pins, so empty-sheet pans
 * reach the canvas. Sits above the engine canvas, below the crosshair (z 5). */
[data-module="punch-list"] .pl-plans-stage { position: relative; flex: 1; min-width: 0; display: flex; }
[data-module="punch-list"] .pl-pin-layer {
  position: absolute; inset: 0; pointer-events: none; z-index: 3; overflow: hidden;
}
[data-module="punch-list"] .pl-pin-layer.is-armed { pointer-events: none; }
[data-module="punch-list"] .pl-pin-layer.is-armed .pl-pin { pointer-events: none; }
/* Teardrop pin, >=32px visual with a >=44px transparent hit slop (::before). */
[data-module="punch-list"] .pl-pin {
  position: absolute; width: 30px; height: 30px; margin: -15px 0 0 -15px; padding: 0;
  border-radius: 50% 50% 50% 0; transform: rotate(-45deg); cursor: pointer;
  border: 2px solid var(--bg); box-shadow: var(--shadow-sm); pointer-events: auto;
  display: flex; align-items: center; justify-content: center; touch-action: none;
  background: var(--text-tertiary);
}
[data-module="punch-list"] .pl-pin::before {
  content: ''; position: absolute; left: 50%; top: 50%; width: 44px; height: 44px;
  transform: translate(-50%, -50%); border-radius: 50%;
}
/* Item-number label (D-v4.2): counter-rotate to upright inside the -45deg pin. */
[data-module="punch-list"] .pl-pin-num {
  transform: rotate(45deg); font-family: var(--font-mono); font-size: 10px; font-weight: 800;
  line-height: 1; color: var(--bg); letter-spacing: -0.5px; pointer-events: none;
}
[data-module="punch-list"] .pl-pin-open { background: var(--pl-status-open); }
[data-module="punch-list"] .pl-pin-in_progress { background: var(--pl-status-progress); }
[data-module="punch-list"] .pl-pin-completed { background: var(--pl-status-done); }
[data-module="punch-list"] .pl-pin-verified { background: var(--pl-status-verified); }
[data-module="punch-list"] .pl-pin-unlinked { background: var(--text-tertiary); }
[data-module="punch-list"] .pl-pin.is-priority { box-shadow: 0 0 0 2px var(--warning), var(--shadow-sm); }
[data-module="punch-list"] .pl-pin-flag {
  position: absolute; top: -6px; right: -6px; transform: rotate(45deg);
  font-size: 12px; line-height: 1; color: var(--warning);
}
@keyframes pl-pin-halo {
  0% { box-shadow: 0 0 0 0 var(--accent-line), var(--shadow); }
  60% { box-shadow: 0 0 0 8px var(--accent-line), var(--shadow); }
  100% { box-shadow: 0 0 0 0 transparent, var(--shadow-sm); }
}
[data-module="punch-list"] .pl-pin.is-flash { animation: pl-pin-halo 1.6s ease-out; z-index: 4; }

/* Tapped-pin popover: mounted in the pop host (above the pin layer). */
[data-module="punch-list"] .pl-pin-pophost { position: absolute; inset: 0; pointer-events: none; z-index: 6; }
[data-module="punch-list"] .pl-pin-pop {
  position: absolute; width: 220px; pointer-events: auto;
  background: var(--panel); border: 1px solid var(--border-strong);
  border-radius: var(--panel-radius); box-shadow: var(--shadow-lg); overflow: hidden;
  transform: translateY(calc(-100% - 14px));
}
[data-module="punch-list"] .pl-pin-pop.is-below { transform: translateY(20px); }
[data-module="punch-list"] .pl-pin-pop-top {
  display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--border);
}
[data-module="punch-list"] .pl-pin-pop-num { font-family: var(--font-mono); font-weight: 700; font-size: 13px; color: var(--accent); }
[data-module="punch-list"] .pl-pin-pop-top .pl-status-pill-static { margin-left: auto; }
[data-module="punch-list"] .pl-pin-pop-top .pl-status-pill-static.pl-status-open { background: var(--pl-status-open-soft); color: var(--pl-status-open); border-color: var(--pl-status-open); }
[data-module="punch-list"] .pl-pin-pop-top .pl-status-pill-static.pl-status-in_progress { background: var(--pl-status-progress-soft); color: var(--pl-status-progress); border-color: var(--pl-status-progress); }
[data-module="punch-list"] .pl-pin-pop-top .pl-status-pill-static.pl-status-completed { background: var(--pl-status-done-soft); color: var(--pl-status-done); border-color: var(--pl-status-done); }
[data-module="punch-list"] .pl-pin-pop-top .pl-status-pill-static.pl-status-verified { background: var(--panel-2); color: var(--pl-status-verified); border-color: var(--pl-status-verified); }
[data-module="punch-list"] .pl-pin-pop-desc { padding: 10px 12px 6px; font-size: 13px; color: var(--text-primary); line-height: 1.4; }
[data-module="punch-list"] .pl-pin-pop-meta { padding: 0 12px 8px; font-size: 11px; color: var(--text-tertiary); }
[data-module="punch-list"] .pl-pin-pop-badge { padding: 0 12px 10px; }
[data-module="punch-list"] .pl-pin-pop-badge .pl-badge { padding: 8px; }
[data-module="punch-list"] .pl-pin-pop-open {
  display: block; width: 100%; text-align: center; padding: 11px; font-size: 13px; font-weight: 700;
  background: var(--accent); color: var(--bg); border: none; cursor: pointer; min-height: 44px;
}
[data-module="punch-list"] .pl-pin-pop-open:hover { filter: brightness(1.05); }

/* Desktop item rail. Hidden at phone width (canvas goes full-bleed). */
[data-module="punch-list"] .pl-plans-rail {
  flex: 0 0 260px; width: 260px; margin-left: 12px; overflow-y: auto;
  border: 1px solid var(--border); border-radius: var(--panel-radius);
  background: var(--panel); padding: 10px;
}
[data-module="punch-list"] .pl-rail-head {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-tertiary);
  font-weight: 700; margin: 4px 2px 8px;
}
[data-module="punch-list"] .pl-rail-head-tail { margin-top: 14px; border-top: 1px solid var(--border); padding-top: 12px; }
[data-module="punch-list"] .pl-rail-hint { font-size: 11px; color: var(--text-tertiary); margin: 0 2px 8px; line-height: 1.4; }
[data-module="punch-list"] .pl-rail-empty { font-size: 12px; color: var(--text-tertiary); padding: 8px 2px; }
[data-module="punch-list"] .pl-rail-item {
  display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; cursor: pointer;
  padding: 9px 10px; margin-bottom: 6px; min-height: 44px;
  border: 1px solid var(--border); border-radius: var(--button-radius);
  background: var(--panel-2); color: var(--text-primary); font-size: 12px;
}
[data-module="punch-list"] .pl-rail-item:hover { border-color: var(--accent-line); }
[data-module="punch-list"] .pl-rail-item.is-unpinned { border-style: dashed; color: var(--text-secondary); }
[data-module="punch-list"] .pl-rail-dot { flex: 0 0 auto; width: 11px; height: 11px; border-radius: 50%; border: 2px solid var(--panel); box-shadow: 0 0 0 1px var(--border-strong); }
[data-module="punch-list"] .pl-rail-dot.pl-pin-open { background: var(--pl-status-open); }
[data-module="punch-list"] .pl-rail-dot.pl-pin-in_progress { background: var(--pl-status-progress); }
[data-module="punch-list"] .pl-rail-dot.pl-pin-completed { background: var(--pl-status-done); }
[data-module="punch-list"] .pl-rail-dot.pl-pin-verified { background: var(--pl-status-verified); }
[data-module="punch-list"] .pl-rail-dot.pl-pin-unlinked { background: var(--text-tertiary); }
[data-module="punch-list"] .pl-rail-num { flex: 0 0 auto; font-family: var(--font-mono); font-weight: 700; }
[data-module="punch-list"] .pl-rail-desc { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-secondary); }
[data-module="punch-list"] .pl-rail-chan { flex: 0 0 auto; font-family: var(--font-mono); font-size: 11px; font-weight: 700; color: var(--accent); }

@media (max-width: 900px) {
  [data-module="punch-list"] .pl-plans-rail { display: none; }
}
@media (max-width: 640px) {
  /* Phone: canvas is full-bleed; pins stay tappable at >=44px hit slop. */
  [data-module="punch-list"] .pl-pin { width: 32px; height: 32px; margin: -16px 0 0 -16px; }
  [data-module="punch-list"] .pl-pin-pop { width: min(240px, calc(100vw - 32px)); }
}

/* ==========================================================================
 * v4 slice C: routable item-detail surface (mockup M2) + desktop capture
 * panel (mockup M4). Status hues reuse the module's existing tokens
 * (open=warning, in_progress=accent, completed/verified=success) -- the
 * D-v4.2 four-hue palette is a separate (Slice D) change. Both themes are
 * token-driven, so no [data-theme="light"] overrides are needed.
 * ======================================================================= */

/* Detail surface shell: phone full-height sheet; desktop centered panel. */
[data-module="punch-list"] .pl-detail { display: flex; flex-direction: column; min-height: 0; }
[data-module="punch-list"] .pl-dhead {
  display: flex; align-items: center; gap: 10px; padding: 12px 14px;
  border-bottom: 1px solid var(--border); background: var(--panel-2);
}
[data-module="punch-list"] .pl-back {
  flex: 0 0 auto; appearance: none; cursor: pointer; width: 38px; height: 38px; padding: 0;
  border: 1px solid var(--border-strong); border-radius: var(--button-radius);
  background: var(--panel); color: var(--text-primary); font-size: 20px; line-height: 1;
}
[data-module="punch-list"] .pl-dhead-title { flex: 1; min-width: 0; }
[data-module="punch-list"] .pl-dcrumb { font-size: 11px; color: var(--text-tertiary); }
[data-module="punch-list"] .pl-dcrumb-link {
  appearance: none; border: none; background: none; padding: 0; cursor: pointer;
  color: var(--accent); font-size: 11px;
}
[data-module="punch-list"] .pl-dhead-num { font-family: var(--font-display); font-size: 17px; font-weight: 700; color: var(--text-primary); }
[data-module="punch-list"] .pl-dhead-sub { font-size: 12px; color: var(--text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
[data-module="punch-list"] .pl-dbody { flex: 1 1 auto; overflow-y: auto; padding: 14px; }
[data-module="punch-list"] .pl-dfoot {
  display: flex; gap: 10px; padding: 12px 14px;
  border-top: 1px solid var(--border); background: var(--panel);
  position: sticky; bottom: 0;
}
[data-module="punch-list"] .pl-block-label {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--text-tertiary); font-weight: 700; margin: 18px 0 8px;
}
[data-module="punch-list"] .pl-detail-badge:empty { display: none; }
/* Chain-busy (review P1-1): while a gallery/voice write is in flight, every
 * status/link/edit control is [disabled] (applyDetailChainBusy) -- style the
 * frozen state so the surface reads busy, not broken. */
[data-module="punch-list"] .pl-detail .pl-btn[disabled],
[data-module="punch-list"] .pl-detail .pl-badge-manage[disabled],
[data-module="punch-list"] .pl-detail .pl-badge-x[disabled],
[data-module="punch-list"] .pl-detail .pl-linkchip[disabled],
[data-module="punch-list"] .pl-detail .pl-setmenu-item[disabled] {
  opacity: 0.55; cursor: default; pointer-events: none;
}
[data-module="punch-list"] .pl-desc-block { font-size: 14px; line-height: 1.5; color: var(--text-primary); white-space: pre-wrap; word-break: break-word; }
[data-module="punch-list"] .pl-desc-empty { color: var(--text-tertiary); }
[data-module="punch-list"] .pl-ch-free-detail { display: inline-block; margin-right: 8px; font-size: 13px; color: var(--text-secondary); }

@media (min-width: 641px) {
  [data-module="punch-list"] .pl-detail {
    max-width: 880px; margin: 20px auto; border: 1px solid var(--border-strong);
    border-radius: var(--panel-radius); background: var(--bg); overflow: hidden; box-shadow: var(--shadow);
  }
  [data-module="punch-list"] .pl-dfoot { position: static; }
}

/* Detail status pill (self-contained; distinct from the list-row pill). */
[data-module="punch-list"] .pl-dpill {
  flex: 0 0 auto; display: inline-flex; align-items: center; padding: 5px 12px;
  border-radius: 999px; font-size: 12px; font-weight: 700; border: 1px solid var(--border);
  background: var(--panel); color: var(--text-secondary);
}
[data-module="punch-list"] .pl-dpill-open { background: var(--pl-status-open-soft); color: var(--pl-status-open); border-color: var(--pl-status-open); }
[data-module="punch-list"] .pl-dpill-in_progress { background: var(--pl-status-progress-soft); color: var(--pl-status-progress); border-color: var(--pl-status-progress); }
[data-module="punch-list"] .pl-dpill-completed { background: var(--pl-status-done-soft); color: var(--pl-status-done); border-color: var(--pl-status-done); }
[data-module="punch-list"] .pl-dpill-verified { background: var(--pl-status-verified-soft); color: var(--pl-status-verified); border-color: var(--pl-status-verified); }

/* Channel badge Manage/unlink action cluster. */
[data-module="punch-list"] .pl-badge-acts { flex: 0 0 auto; display: flex; align-items: center; gap: 6px; }
[data-module="punch-list"] .pl-badge-manage {
  appearance: none; border: none; background: none; padding: 4px 2px; cursor: pointer;
  color: var(--accent); font-size: 12px; font-weight: 700;
}

/* Status transition control: stepper + advance CTA + set-to overflow menu. */
[data-module="punch-list"] .pl-statusctl {
  border: 1px solid var(--border); border-radius: var(--panel-radius);
  background: var(--panel-2); padding: 14px;
}
[data-module="punch-list"] .pl-stepper { display: flex; align-items: flex-start; gap: 0; margin-bottom: 14px; }
[data-module="punch-list"] .pl-step { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 5px; position: relative; }
[data-module="punch-list"] .pl-step::before {
  content: ''; position: absolute; top: 9px; left: -50%; width: 100%; height: 2px;
  background: var(--border-strong); z-index: 0;
}
[data-module="punch-list"] .pl-step:first-child::before { display: none; }
[data-module="punch-list"] .pl-step .b {
  width: 20px; height: 20px; border-radius: 50%; background: var(--panel);
  border: 2px solid var(--border-strong); z-index: 1;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; color: var(--bg); font-weight: 800;
}
[data-module="punch-list"] .pl-step .l { font-size: 10px; font-weight: 700; color: var(--text-tertiary); text-align: center; }
[data-module="punch-list"] .pl-step.done .b { background: var(--pl-status-done); border-color: var(--pl-status-done); }
[data-module="punch-list"] .pl-step.done::before { background: var(--pl-status-done); }
[data-module="punch-list"] .pl-step.cur .l { color: var(--text-primary); }
[data-module="punch-list"] .pl-step-open.cur .b { background: var(--pl-status-open); border-color: var(--pl-status-open); }
[data-module="punch-list"] .pl-step-in_progress.cur .b { background: var(--pl-status-progress); border-color: var(--pl-status-progress); }
[data-module="punch-list"] .pl-step-completed.cur .b { background: var(--pl-status-done); border-color: var(--pl-status-done); }
[data-module="punch-list"] .pl-step-verified.cur .b { background: var(--pl-status-verified); border-color: var(--pl-status-verified); box-shadow: 0 0 0 2px var(--pl-status-verified-soft); }
[data-module="punch-list"] .pl-statusctl-actions { display: flex; gap: 10px; position: relative; }
[data-module="punch-list"] .pl-adv { flex: 1; }
[data-module="punch-list"] .pl-btn-ghost { background: var(--panel-2); color: var(--text-primary); }
[data-module="punch-list"] .pl-btn-reopen { background: var(--warning-soft); color: var(--warning); border-color: var(--warning); }
[data-module="punch-list"] .pl-setmenu-btn { flex: 0 0 auto; width: 46px; padding: 0; }
[data-module="punch-list"] .pl-setmenu {
  position: absolute; right: 0; bottom: calc(100% + 6px); z-index: 20;
  min-width: 180px; border: 1px solid var(--border-strong); border-radius: var(--panel-radius);
  background: var(--panel); box-shadow: var(--shadow-lg); overflow: hidden; padding: 4px;
}
[data-module="punch-list"] .pl-setmenu-item {
  display: block; width: 100%; text-align: left; appearance: none; cursor: pointer;
  padding: 9px 12px; border: none; border-radius: var(--button-radius); background: none;
  color: var(--text-primary); font-size: 13px; min-height: 40px;
}
[data-module="punch-list"] .pl-setmenu-item:hover { background: var(--panel-2); }
[data-module="punch-list"] .pl-setmenu-item.is-cur { color: var(--accent); font-weight: 700; }
[data-module="punch-list"] .pl-setmenu-reopen { color: var(--warning); border-top: 1px solid var(--border); border-radius: 0; margin-top: 4px; }

/* Details meta grid. */
[data-module="punch-list"] .pl-metagrid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
[data-module="punch-list"] .pl-meta { border: 1px solid var(--border); border-radius: var(--button-radius); padding: 9px 11px; background: var(--panel-2); }
[data-module="punch-list"] .pl-meta .k { font-size: 10px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-tertiary); font-weight: 700; }
[data-module="punch-list"] .pl-meta .v { font-size: 13px; font-weight: 600; margin-top: 2px; color: var(--text-primary); }
[data-module="punch-list"] .pl-meta-link { appearance: none; border: none; background: none; padding: 0; cursor: pointer; color: var(--accent); font-size: 13px; font-weight: 600; }

/* Timeline avatar initials (named actors) + reopened dot. */
[data-module="punch-list"] .pl-tl-who { display: flex; align-items: center; gap: 6px; }
[data-module="punch-list"] .pl-avatar {
  width: 18px; height: 18px; border-radius: 50%; flex: 0 0 auto;
  background: var(--accent-soft); border: 1px solid var(--accent-line); color: var(--accent);
  font-size: 9px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center;
}
[data-module="punch-list"] .pl-tl-dot.pl-tl-reopened { background: var(--pl-status-open); }

/* Desktop docked capture panel (M4). Body-mounted (self-attribute clause).
 * z-index: the platform scale is popovers 4000, command 6000, dock 7000,
 * tool 8000, phone bottom sheet 8800/8801, modal 9000 (platform/mobile.css,
 * platform/dock.css section 6.5). This panel is the desktop analogue of the
 * phone capture bottom sheet, so it takes the sheet tier (8801): above the
 * platform dock + tool overlays, below ctx.ui modals and the photo annotator
 * (9500), which must be able to layer over an open capture. */
.pl-cap-panel,
.pl-cap-panel[data-module="punch-list"] {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 8801;
  width: min(420px, 100vw); display: flex; flex-direction: column;
  background: var(--panel); border-left: 1px solid var(--border-strong); box-shadow: var(--shadow-lg);
}
.pl-cap-panel .pl-cap-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 16px 20px; border-bottom: 1px solid var(--border);
}
.pl-cap-panel .pl-cap-head b { font-family: var(--font-display); font-size: 17px; font-weight: 700; color: var(--text-primary); }
.pl-cap-panel .pl-cap-x {
  appearance: none; border: none; background: none; cursor: pointer;
  color: var(--text-secondary); font-size: 24px; line-height: 1; padding: 0; width: 32px; height: 32px;
}
.pl-cap-panel .pl-cap-body { flex: 1 1 auto; overflow-y: auto; padding: 18px 20px; }

@media (max-width: 640px) {
  [data-module="punch-list"] .pl-back { min-width: 44px; min-height: 44px; }
  [data-module="punch-list"] .pl-dfoot .pl-btn { min-height: 48px; }
  [data-module="punch-list"] .pl-setmenu-btn { min-height: 44px; }
  .pl-cap-panel, .pl-cap-panel[data-module="punch-list"] { width: 100vw; }
}