/* punch module styles. Owned by the punch module worker.
   Scoped under .gch-m-punch (the tool root). The module's popovers carry the gch-m-punch class themselves,
   because popovers render outside the tool root. Tokens and shared classes come from base.css. */

.gch-m-punch .pl-me{color:var(--o-txt);font-weight:700}
.gch-m-punch .pl-late{color:var(--danger);font-weight:600}

/* list column: progress header above the list, floating add button on phone */
.gch-m-punch .pl-col{position:relative;flex:1;min-height:0;display:flex;flex-direction:column}

/* ------------------------------------------------------------------ progress header */
.gch-m-punch .pl-prog{flex:none;padding:0 var(--gut) var(--s3)}
.gch-m-punch .pl-prog-t{display:flex;align-items:baseline;gap:var(--s3);font-size:14px;color:var(--ink2)}
.gch-m-punch .pl-prog-n{min-width:0}
.gch-m-punch .pl-prog-n b{color:var(--ink);font-weight:600}
.gch-m-punch .pl-pct{margin-left:auto;flex:none;font-size:13px;color:var(--mid)}
.gch-m-punch .pl-bar{display:flex;gap:2px;height:6px;margin-top:var(--s2);background:var(--bg3)}
.gch-m-punch .pl-bar span{min-width:3px}
.gch-m-punch .s-closed{background:var(--ok)}
.gch-m-punch .s-ready{background:var(--ink2)}
.gch-m-punch .s-open{background:var(--edge)}
.gch-m-punch .s-back{background:var(--danger)}
.gch-m-punch .pl-key{display:flex;flex-wrap:wrap;gap:var(--s1) var(--s4);margin-top:6px;font-size:12px;color:var(--mid);font-variant-numeric:tabular-nums}
.gch-m-punch .pl-key .k{display:inline-block;width:8px;height:8px;margin-right:6px}
.gch-m-punch .pl-cos{display:flex;flex-wrap:wrap;gap:6px;margin-top:var(--s3)}
.gch-m-punch .pl-co{
  display:inline-flex;align-items:center;gap:5px;min-height:30px;padding:0 9px;
  font-size:12.5px;color:var(--ink2);background:var(--bg2);border:1px solid var(--line2);
  cursor:pointer;text-decoration:none;white-space:nowrap;font-variant-numeric:tabular-nums;
}
.gch-m-punch .pl-co b{color:var(--ink);font-weight:600}
.gch-m-punch a.pl-co b{color:var(--o-txt)}
.gch-m-punch .pl-co .nm{color:var(--ink);max-width:220px;overflow:hidden;text-overflow:ellipsis}
.gch-m-punch .pl-co .o{color:var(--ink)}
.gch-m-punch .pl-co .r{color:var(--mid)}
.gch-m-punch .pl-co:hover{border-color:var(--edge);background:var(--bg3)}
.gch-m-punch .pl-co.is-on{border-color:var(--o);box-shadow:inset 0 -2px 0 var(--o);background:var(--bg3)}

/* ------------------------------------------------------------------ list cells */
.gch-m-punch td.c-number{white-space:nowrap}
.gch-m-punch .pl-loc,.gch-m-punch .pl-resp{display:inline-flex;flex-direction:column;line-height:1.25;vertical-align:middle;max-width:200px}
.gch-m-punch .pl-loc b,.gch-m-punch .pl-resp b{font-weight:500;color:var(--ink);overflow:hidden;text-overflow:ellipsis}
.gch-m-punch .pl-loc small,.gch-m-punch .pl-resp small{font-size:12.5px;color:var(--mid);overflow:hidden;text-overflow:ellipsis}
.gch-m-punch .pl-resp small.pl-me{color:var(--o-txt);font-weight:600}
.gch-m-punch .pl-pri{color:var(--ink2)}
.gch-m-punch .pl-pri.is-high{color:var(--ink);font-weight:600}
.gch-m-punch .pl-pri.is-low{color:var(--mid)}
.gch-m-punch .pl-gsub{margin-left:6px;font-weight:500;letter-spacing:0;text-transform:none;color:var(--mid)}
.gch-m-punch .pl-gjob{color:var(--o-txt);letter-spacing:0}

/* floating quick-add (phone only) */
.gch-m-punch .pl-fab{display:none}

/* ------------------------------------------------------------------ panel */
.gch-m-punch .pl-f-room{display:block;font-weight:600}
.gch-m-punch .pl-f-bldg{display:block;font-size:12.5px}
.gch-m-punch .pl-sheetlink{display:flex;align-items:flex-start;gap:6px;margin-top:4px;color:var(--ink);text-decoration:none;font-size:13px}
.gch-m-punch .pl-sheetlink b{font-weight:600}
.gch-m-punch .pl-sheetlink .i{margin-top:1px;flex:none}
.gch-m-punch .pl-sheetlink .i{width:15px;height:15px;color:var(--mid)}
.gch-m-punch .pl-sheetlink:hover span{text-decoration:underline;text-underline-offset:2px}

/* photo tiles (placeholder drawings) */
.gch-m-punch .fp-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:var(--s2)}
.gch-m-punch .fp-tile{display:flex;flex-direction:column;min-width:0;padding:0;background:var(--bg);border:1px solid var(--line);cursor:pointer;text-align:left;color:inherit;font:inherit}
.gch-m-punch .fp-tile:hover{border-color:var(--edge)}
.gch-m-punch .fp-img{position:relative;display:block;aspect-ratio:4/3;background:var(--bg3);overflow:hidden}
.gch-m-punch .fp-img svg{display:block;width:100%;height:100%;fill:none;stroke:var(--mid);stroke-width:1.2;stroke-linecap:square}
.gch-m-punch .fp-img svg .f{fill:var(--bg2)}
.gch-m-punch .fp-img svg .s{fill:var(--line);stroke:none}
.gch-m-punch .fp-img svg .e{stroke:var(--edge)}
.gch-m-punch .fp-img svg .lt{stroke:var(--line2)}
.gch-m-punch .fp-kind{position:absolute;left:6px;top:6px;padding:1px 6px;font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink2);background:var(--bg);border:1px solid var(--line2)}
.gch-m-punch .fp-kind.is-after{color:var(--ok)}
.gch-m-punch .fp-cap{display:flex;flex-direction:column;gap:1px;padding:6px 8px;font-size:12.5px;min-width:0}
.gch-m-punch .fp-cap b{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gch-m-punch .fp-cap small{font-size:11.5px;color:var(--mid);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gch-m-punch .pl-ph-add{margin-top:var(--s2)}
.gch-m-punch .pl-ph-add .btn{border-color:var(--line2)}

/* pin on sheet */
.gch-m-punch .pl-sheet-thumb{display:block;text-decoration:none;color:inherit;border:1px solid var(--line);background:var(--bg)}
.gch-m-punch .pl-sheet-thumb:hover{border-color:var(--edge)}
.gch-m-punch .pl-sheet-thumb svg{display:block;width:100%;height:auto}
.gch-m-punch .pl-plan path{fill:none;stroke:var(--line2);stroke-width:1;vector-effect:non-scaling-stroke}
.gch-m-punch .pl-plan .w{stroke:var(--edge);stroke-width:1.6}
.gch-m-punch .pl-plan .d{stroke-dasharray:2 2}
.gch-m-punch .pl-pin .halo{fill:var(--o-tint);stroke:var(--o);stroke-width:1}
.gch-m-punch .pl-pin .dot{fill:var(--o)}
.gch-m-punch .pl-pin-t{font-family:var(--sans);font-size:13px;font-weight:700;fill:var(--o-txt);paint-order:stroke;stroke:var(--bg);stroke-width:3px}
.gch-m-punch .pl-sheet-cap{display:flex;align-items:baseline;flex-wrap:wrap;gap:2px 6px;padding:7px 10px;border-top:1px solid var(--line);font-size:12.5px;color:var(--ink2)}
.gch-m-punch .pl-sheet-cap b{color:var(--ink);font-weight:600;white-space:nowrap}
.gch-m-punch .pl-sheet-cap .i{width:14px;height:14px;margin-left:auto;color:var(--mid);flex:none;align-self:center}
.gch-m-punch .pl-sheet-thumb:hover .pl-sheet-cap .i{color:var(--ink)}

/* comments */
.gch-m-punch .pl-cmts{list-style:none;margin:0;padding:0}
.gch-m-punch .pl-cmts li{display:grid;grid-template-columns:26px minmax(0,1fr);gap:var(--s2);padding:8px 0;border-bottom:1px solid var(--line)}
.gch-m-punch .pl-cmts li:last-child{border-bottom:0}
.gch-m-punch .pl-cmt-h{display:flex;align-items:baseline;gap:6px;flex-wrap:wrap;font-size:13px}
.gch-m-punch .pl-cmt-h b{font-weight:600}
.gch-m-punch .pl-cmt-h .mid{font-size:12px}
.gch-m-punch .pl-cmts p{margin-top:2px;font-size:13.5px;line-height:1.45}
.gch-m-punch .pl-cmt-new{display:flex;align-items:flex-end;gap:var(--s2);margin-top:var(--s3)}
.gch-m-punch .pl-cmt-new label{flex:1;min-width:0}
.gch-m-punch .pl-cmt-new textarea{display:block;width:100%;min-height:52px;padding:8px 10px;resize:vertical;line-height:1.4}
.gch-m-punch .pl-cmt-new .btn{border-color:var(--line2)}

/* popovers (Not accepted note, Reassign) */
.gch-m-punch .pl-pop-h{display:flex;flex-direction:column;gap:2px;padding:var(--s3) var(--s4);border-bottom:1px solid var(--line);font-size:13.5px}
.gch-m-punch .pl-pop-h b{font-weight:600}
.gch-m-punch .pl-pop-h .mid{font-size:12.5px}
.gch-m-punch .pl-pop-b{display:block;padding:var(--s3) var(--s4)}
.gch-m-punch .pl-pop-b textarea{display:block;width:100%;min-height:72px;padding:8px 10px;resize:vertical;line-height:1.4}
.gch-m-punch .pl-pop-f{display:flex;justify-content:flex-end;gap:var(--s2);padding:0 var(--s4) var(--s3)}
.gch-m-punch.pl-popm button .n{max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ------------------------------------------------------------------ phone */
@media (max-width:759px){
  .gch-m-punch .gch-phead .actions{display:none}
  .gch-m-punch .pl-prog-t{flex-wrap:wrap;font-size:13.5px}
  .gch-m-punch .pl-pct,.gch-m-punch .pl-key{display:none}
  .gch-m-punch .pl-cos{flex-wrap:nowrap;overflow-x:auto;margin-right:calc(-1 * var(--gut));padding-right:var(--gut);scrollbar-width:none}
  .gch-m-punch .pl-cos::-webkit-scrollbar{display:none}
  .gch-m-punch .pl-co{min-height:36px}
  .gch-m-punch .pl-fab{
    position:absolute;right:14px;bottom:14px;z-index:5;
    display:inline-grid;place-items:center;width:52px;height:52px;padding:0;
    background:var(--o);color:var(--on-o);border:0;cursor:pointer;
  }
  .gch-m-punch .pl-fab .i{width:26px;height:26px;stroke-width:1.8}
  /* Room under the last row so it scrolls clear of the floating add button (14px inset + 52px button + 18px). */
  .gch-m-punch .pl-col:has(> .pl-fab) .gch-pane{padding-bottom:84px}
  .gch-m-punch .fp-grid{grid-template-columns:1fr 1fr}
}

/* ------------------------------------------------------------------ round 2: bulk selection, pin picker, row history */
.gch-m-punch .pl-cb{position:relative;display:inline-grid;place-items:center;width:20px;height:20px;padding:0;background:var(--field);border:1px solid var(--edge);cursor:pointer;vertical-align:middle}
.gch-m-punch .pl-cb::after{content:"";position:absolute;inset:-10px}
.gch-m-punch .pl-cb[aria-checked="true"]{background:var(--o);border-color:var(--o)}
.gch-m-punch .pl-cb[aria-checked="true"]::before{content:"";width:10px;height:5px;margin-top:-3px;border:solid var(--on-o);border-width:0 0 2px 2px;transform:rotate(-45deg)}
.gch-m-punch .pl-cb[aria-checked="mixed"]::before{content:"";width:10px;height:2px;background:var(--ink)}
.gch-m-punch .pl-cb:focus-visible{outline:1px solid var(--o);outline-offset:2px}
.gch-m-punch th.c-sel,.gch-m-punch td.c-sel{width:44px}
.gch-m-punch tr.pl-picked td{background:var(--bg3)}
.gch-m-punch .pl-bulk{flex:none;display:flex;align-items:center;flex-wrap:wrap;gap:var(--s2) var(--s3);margin:0 var(--gut) var(--s3);padding:6px var(--s3);min-height:44px;background:var(--bg2);border:1px solid var(--line2);font-size:13.5px}
.gch-m-punch .pl-bulk.has-sel{border-color:var(--o);box-shadow:inset 2px 0 0 var(--o)}
.gch-m-punch .pl-bulk b{font-weight:700;margin-right:-6px}
.gch-m-punch .pl-bulk-a{display:flex;flex-wrap:wrap;gap:var(--s1);margin-left:auto}
.gch-m-punch .pl-bulk-a .btn:not(.btn-q){border-color:var(--line2)}
.gch-m-punch .pl-rh{margin-top:var(--s2)}
.gch-m-punch .pl-cmt-err{display:block;font-size:12.5px;font-weight:600;color:var(--danger)}
.gch-m-punch .pl-cmt-err:empty{display:none}
@media (max-width:759px){
  .gch-m-punch .gch-phead .actions{display:flex}
  .gch-m-punch .gch-phead .actions .btn-p{display:none}
  .gch-m-punch .pl-bulk{margin-left:0;margin-right:0;border-width:1px 0}
  .gch-m-punch .pl-bulk-a{margin-left:0;width:100%}
}

/* Pin picker inside the Add / Edit dialog (dialogs render outside the tool root, so these are not scoped). */
.pl-pick{display:flex;flex-direction:column;gap:6px;margin-top:6px}
.pl-pick .pl-pick-s{display:block;border:1px solid var(--line2);background:var(--bg);cursor:crosshair}
.pl-pick .pl-pick-s:focus-visible{outline:1px solid var(--o);outline-offset:2px}
.pl-pick svg{display:block;width:100%;height:auto}
.pl-pick .pl-plan path{fill:none;stroke:var(--line2);stroke-width:1;vector-effect:non-scaling-stroke}
.pl-pick .pl-plan .w{stroke:var(--edge);stroke-width:1.6}
.pl-pick .pl-plan .d{stroke-dasharray:2 2}
.pl-pick .pl-pin .halo{fill:var(--o-tint);stroke:var(--o);stroke-width:1}
.pl-pick .pl-pin .dot{fill:var(--o)}
.pl-pick .pl-pin-t{font-family:var(--sans);font-size:13px;font-weight:700;fill:var(--o-txt);paint-order:stroke;stroke:var(--bg);stroke-width:3px}
.pl-pick .pl-pick-cap{font-size:12.5px;font-variant-numeric:tabular-nums}

/* ------------------------------------------------------------------ round 3: Area beside the search; Job column across jobs */
.gch-m-punch .pl-area{display:inline-flex;align-items:center;gap:var(--s2);font-size:13px;color:var(--mid);white-space:nowrap}
.gch-m-punch .pl-area select{width:auto;max-width:200px;font-size:13px}
@container gchlist (max-width:560px){.gch-m-punch .pl-area > span{display:none}.gch-m-punch .pl-area select{max-width:150px}}
.gch-m-punch .pl-area.is-on select{border-bottom-color:var(--o)}
.gch-m-punch td.c-job{white-space:nowrap}

/* FX2: Ready for review is in the court of both verifiers (the project manager and the superintendent) */
.gch-m-punch .pl-court-l .or,.gch-m-punch .pl-court-l .co{color:var(--mid)}

/* FX2 laptop band. A 1366px window with the rail open leaves a list 1134px (1280px: 1048px), just above the width at
   which the shared list drops its fourth-priority columns, so the title was squeezed to its minimum and the table
   scrolled inside the pane. In this tool the columns that give way first go at 1220px, and the due date stacks (the
   date over "in 3 days"), so the title keeps the width. */
@container gchlist (max-width:1220px){
  .gch-m-punch .gch-list .p4{display:none}
  /* across jobs (the list has a Job column) the room gives way too; it is on the item and in the Location filter */
  .gch-m-punch .gch-list:has(th.c-job) .c-location{display:none}
  .gch-m-punch .gch-pane td .due{display:inline-flex;flex-direction:column;line-height:1.25;vertical-align:middle}
  .gch-m-punch .gch-pane td .due .sep{display:none}
  .gch-m-punch .gch-pane td .due .r{font-size:12.5px}
}
/* beside an open item the list is a narrow navigator: number, title, due, status */
@container gchlist (max-width:820px){
  .gch-m-punch .gch-list .c-responsible{display:none}
}