/* Owner and office Today, overrides, the guest release page and the homeowner gallery (roles.js).
   Loads after app.css and app-admin.css. Paper pages and their sheets are always light. */

/* ---------- owner and office Today: one row, one deep link, at most one verb ---------- */
.att-row { display: flex; align-items: center; border-bottom: 1px solid var(--line); }
.att-card .att-row:last-of-type { border-bottom: 0; }
.att-row > .row { flex: 1; min-width: 0; border-bottom: 0; gap: 12px; }
.att-row > .row b { font-size: 15px; line-height: 1.3; }
.att-row > .row .sq.next { align-self: flex-start; margin-top: 6px; }
.att-row .doc-ic { width: 36px; height: 36px; display: grid; place-items: center; box-shadow: inset 0 0 0 1px var(--line-2); flex: none; }
.att-row .doc-ic .ic { width: 18px; height: 18px; }
.att-verb { flex: none; margin-right: 12px; min-height: 40px; padding: 0 12px; font-size: 13.5px; }
.att-verb.ghost:disabled { opacity: 1; color: var(--muted); box-shadow: none; background: transparent; }
.att-h .muted { font-size: 12.5px; }
.att-card .see-all { text-align: left; line-height: 1.35; padding-right: 16px; }

/* ---------- conditions override: request, rules, decision ---------- */
.ov-ask { margin: 0 var(--gutter) 10px; padding-left: 12px; box-shadow: inset 2px 0 0 var(--line-2); font-size: 14px; line-height: 1.45; color: var(--fg-2); }
.ov-ev { border-top: 1px solid var(--line); }
.ov-ev small { line-height: 1.4; }
.ov-rules { list-style: none; margin: 0; padding: 0 var(--gutter); display: grid; gap: 12px; }
.ov-rules li { display: grid; grid-template-columns: 20px 1fr; gap: 10px; align-items: start; }
.ov-rules li > .ic { width: 18px; height: 18px; margin-top: 1px; }
.ov-rules li.kept > .ic, .ov-rules li.kept b { color: var(--muted); }
.ov-rules b { display: block; font-size: 14.5px; font-weight: 500; }
.ov-rules p { margin: 2px 0 0; font-size: 13.5px; line-height: 1.45; color: var(--fg-2); }
.ov-done { display: grid; grid-template-columns: 22px 1fr; gap: 12px; margin: 4px var(--gutter) 14px; padding: 14px; background: var(--bg); }
.ov-done > .ic { width: 20px; height: 20px; }
.ov-done b { display: block; font-size: 14.5px; font-weight: 500; }
.ov-done p { margin: 4px 0 0; font-size: 13.5px; line-height: 1.45; color: var(--fg-2); }
.sheet-override .sec-h, .sheet-overrideAsk .sec-h, .sheet-flagProblem .sec-h { text-transform: none; letter-spacing: 0; font-size: 13px; color: var(--fg-2); margin-top: 20px; }
.sheet-override .faceid { margin-top: 8px; }

/* ---------- guest pages: the link Ines and Hannah open ---------- */
.g-prev { justify-content: space-between; align-items: flex-end; padding: 0 8px 4px; }
.g-prev .nb-btn { color: #191919; min-height: 40px; }
.g-prev .g-url { min-width: 0; flex: 1; background: transparent; font-weight: 500; }
.g-sp { width: 72px; flex: none; }
.g-intro { margin: 0 0 16px; display: grid; gap: 2px; }
.g-intro p { margin: 0 0 6px !important; font-size: 13px !important; line-height: 1.5; }
.g-intro b { font-weight: 500; }
.link-btn.inline { display: inline; min-height: 0; padding: 0; font-size: inherit; color: #191919; text-decoration: underline; text-underline-offset: 2px; }
.g-receipt { display: grid; grid-template-columns: 20px 1fr; gap: 10px; margin: 0 0 18px; padding: 12px; background: #191919; color: #f5f5f5; }
.g-receipt > .ic { width: 18px; height: 18px; margin-top: 1px; }
.g-receipt div { display: grid; gap: 3px; font-size: 12.5px; line-height: 1.4; }
.g-receipt b { font-weight: 500; font-size: 13.5px; }
.g-receipt span { color: #c9c9c7; }
.g-receipt .link-btn { min-height: 40px; color: #f5f5f5; text-decoration: underline; text-underline-offset: 2px; justify-self: start; }
.g-hist { margin: 0 0 16px; padding: 10px 0 4px; border-top: 1px solid rgba(0,0,0,.14); }
.g-hist h2 { margin: 0 0 6px !important; }
.g-hist p { font-size: 12px !important; line-height: 1.5; }
.g-hist b { font-weight: 500; }
.g-c-h em.g-open { color: #6a6964; font-weight: 400; }
.g-check.is-no .g-c-h em { box-shadow: inset 0 -2px 0 #191919; }
.g-defect { border-left-color: #191919 !important; }
.g-defect b, .g-note b { font-weight: 500; color: #191919; }
.g-fig { display: block; width: 100%; text-align: left; padding: 0; background: none; color: inherit; }
.g-fig img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.g-cap { display: block; margin-top: 3px; font-size: 10.5px; line-height: 1.3; color: #6a6964; font-variant-numeric: tabular-nums; }
.g-cap b { font-weight: 500; color: #191919; }
.g-bar-note p { margin: 0; padding: 6px 4px; font-size: 13px; line-height: 1.4; color: #3b3b39; }
.g-rec { margin: 8px var(--gutter) 0; font-size: 13px; line-height: 1.5; color: #3b3b39; }
.g-rec b { font-weight: 500; color: #191919; }

/* guest sheets sit on the paper page, so they are paper too */
.sheet-guestChanges, .sheet-guestRelease {
  --fg: #191919; --fg-2: #3b3b39; --muted: #6a6964; --faint: #767570; --bg: #ffffff; --surface: #f7f6f2; --surface-2: #e4e2dc; --chip: #e4e2dc;
  --line: rgba(0,0,0,.1); --line-2: rgba(0,0,0,.22); --primary: #191919; --primary-fg: #f7f6f2;
  background: #f7f6f2; color: #191919;
}
.sheet-guestChanges .sheet-grab i, .sheet-guestRelease .sheet-grab i { background: rgba(0,0,0,.25); }
.sheet-guestChanges .field input, .sheet-guestChanges .field textarea, .sheet-guestRelease .field input, .sheet-guestRelease .field textarea { background: #ffffff; color: #191919; border-color: rgba(0,0,0,.25); }
.sheet-guestChanges .btn.primary:not(.next-fill), .sheet-guestRelease .btn.primary:not(.next-fill) { background: #191919; color: #f7f6f2; }
.sheet-guestRelease .seg { box-shadow: inset 0 0 0 1px rgba(0,0,0,.25); }
.sheet-guestRelease .seg button { color: #3b3b39; }
.sheet-guestRelease .seg button.on { background: #191919; color: #f7f6f2; }

/* a photo full size, from the link */
.gp { position: absolute; inset: 0; display: flex; flex-direction: column; background: #111; color: #f5f5f5; }
.gp-top { flex: none; display: flex; align-items: flex-end; height: calc(var(--status-h) + 40px); padding: 0 8px 2px; }
.gp-top .nb-btn { color: #f5f5f5; }
.gp-body { flex: 1; overflow-y: auto; scrollbar-width: none; }
.gp-img img { max-height: 420px; }
.gp-date { margin: 0; padding: 10px var(--gutter) 0; font-size: 12.5px; color: #b3b3b3; }
.gp-cap { margin: 0; padding: 12px var(--gutter) 10px; font-size: 15px; line-height: 1.45; color: #f5f5f5; }
.gp-thread { padding: 0 var(--gutter); display: grid; gap: 10px; }
.gp-c { padding: 10px 12px; background: #222; }
.gp-c b { font-size: 13px; font-weight: 500; }
.gp-c p { margin: 4px 0; font-size: 14.5px; line-height: 1.45; }
.gp-c small { font-size: 12px; color: #b3b3b3; }
.gp-comp { border-top-color: rgba(255,255,255,.12); }
.gp-comp input { flex: 1; min-width: 0; min-height: 44px; background: #1c1c1c; border: 1px solid rgba(255,255,255,.18); color: #f5f5f5; font: 400 16px/1.3 var(--sans); padding: 0 12px; outline: none; }
.gp-comp .chip.primary { background: #f5f5f5; color: #111; }
.gp-foot { flex: none; margin: 0; padding: 6px var(--gutter) 34px; font-size: 12.5px; color: #b3b3b3; }

/* ---------- the homeowner gallery ---------- */
.hg h1 { font-size: 23px; }
.hg-pair { --cut: 50%; position: relative; margin: 6px 0 6px; aspect-ratio: 4 / 3; overflow: hidden; background: #ddd; }
.hg-pair > img, .hg-before img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hg-before { position: absolute; inset: 0; clip-path: inset(0 calc(100% - var(--cut)) 0 0); }
.hg-handle { position: absolute; top: 0; bottom: 0; left: var(--cut); width: 2px; margin-left: -1px; background: #f7f6f2; box-shadow: 0 0 0 1px rgba(0,0,0,.25); pointer-events: none; }
.hg-handle::after { content: ""; position: absolute; top: 50%; left: 50%; width: 28px; height: 28px; transform: translate(-50%, -50%); background: #f7f6f2; box-shadow: 0 1px 4px rgba(0,0,0,.3); }
.hg-pair input[type="range"] { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; }
.hg-l { position: absolute; bottom: 8px; padding: 3px 7px; background: rgba(25,25,25,.78); color: #f7f6f2; font-size: 11px; pointer-events: none; }
.hg-l.b { left: 8px; } .hg-l.a { right: 8px; }
.hg-cap { font-size: 12.5px !important; color: #3b3b39 !important; }
.hg-steps { list-style: none; margin: 0 0 6px; padding: 0; display: grid; gap: 7px; }
.hg-steps li { display: grid; grid-template-columns: 18px 1fr; gap: 10px; align-items: center; font-size: 13px; color: #6a6964; }
.hg-steps li .ic { width: 16px; height: 16px; }
.hg-steps li > i { width: 8px; height: 8px; margin-left: 4px; box-shadow: inset 0 0 0 1px rgba(0,0,0,.35); }
.hg-steps li.done { color: #3b3b39; }
.hg-steps li.now { color: #191919; }
.hg-steps li.now > i { background: #191919; box-shadow: none; }
.hg-steps b { font-weight: 500; }
.hg-normal { margin: 0 0 6px; padding-left: 18px; display: grid; gap: 5px; font-size: 13px; line-height: 1.5; color: #2b2b2a; }
.hg-grid { margin-top: 4px; }
.home-page .pd-foot { line-height: 1.5; }

/* ---------- round 6 (roles.js) ---------- */
/* a decision row carries two verbs: Decline and Approve (role approvals, O2-8) */
.att-row.two { flex-wrap: wrap; }
.att-row.two > .row { flex-basis: 100%; }
.att-verbs { display: flex; gap: 6px; padding: 0 12px 12px var(--gutter, 16px); margin-top: -4px; }
.att-verbs .att-verb { margin-right: 0; min-height: 44px; }

/* override sheets: reason first, the rule that blocks, and kept rules folded away (D2-4) */
.ov-block { display: grid; grid-template-columns: 20px 1fr; gap: 10px; align-items: start; margin: 0 var(--gutter) 12px; padding: 12px; box-shadow: inset 0 0 0 1px var(--line-2); }
.ov-block > .ic { width: 18px; height: 18px; margin-top: 1px; }
.ov-block p { margin: 0; font-size: 14px; line-height: 1.45; color: var(--fg); }
.ov-block.ok p { color: var(--fg-2); }
.ov-rules li.fixed b { color: var(--fg); }
.ov-rules li.warn > .ic { color: var(--muted); }
.ov-kept { margin: 10px var(--gutter) 0; }
.ov-kept summary { list-style: none; cursor: pointer; min-height: 44px; display: flex; align-items: center; gap: 6px; font-size: 13.5px; color: var(--fg-2); }
.ov-kept summary::-webkit-details-marker { display: none; }
.ov-kept[open] summary span { display: inline-block; transform: rotate(45deg); }
.ov-kept .ov-rules { padding: 0; }
.ov-tight { margin-top: 6px; }
.ov-foot .btn[hidden] { display: none; }

/* guest page: the release panel sits above the one record document */
.g-top-doc { padding-bottom: 14px; }
.g-top-doc .g-intro, .g-top-doc .g-receipt { margin-bottom: 0; }
.g-body .paper-doc { margin-top: 10px; }
.g-tap { cursor: pointer; }
.g-tap:focus-visible { outline: 2px solid #191919; outline-offset: 2px; }
.g-err { margin: 6px var(--gutter) 0; font-size: 13px; line-height: 1.45; color: #191919; padding-left: 10px; box-shadow: inset 2px 0 0 #191919; }
.g-err[hidden] { display: none; }
.sheet-guestRelease .link-btn.inline { color: #191919; }
.g-off h1 { margin-top: 18px; }
.g-off p { font-size: 14px !important; }
.gp-reply { background: #2b2b2b; box-shadow: inset 2px 0 0 #f5f5f5; }
/* a released record that was amended or had a non-conformance recorded after release (B2-20) */
.g-notice { display: grid; grid-template-columns: 18px 1fr; gap: 10px; align-items: start; margin: 4px 0 14px; padding: 12px; box-shadow: inset 0 0 0 1px #191919; background: #fff; }
.g-notice > .ic { width: 16px; height: 16px; margin-top: 2px; }
.g-notice p { margin: 0 !important; font-size: 13px !important; line-height: 1.5; color: #191919 !important; }
.ov-rules.ov-warn { margin-top: 12px; }

/* ---------- round 8 (roles.js) ---------- */
/* D3-7: the gallery leads with one full-width "Now" when there is no before photo; the grid never leaves a hole */
.hg-now { position: relative; margin: 6px 0; }
.hg-now img { aspect-ratio: 4 / 3; }
.hg-grid.hg-one { grid-template-columns: 1fr; }
.hg-grid.hg-odd > :last-child { grid-column: 1 / -1; }
/* B3-13: the condition photo on the receipt */
.g-receipt .g-cond-fig { margin: 4px 0 2px; max-width: 160px; }
.g-receipt .g-cond-fig .g-cap { color: #c9c9c7; }
/* B3-16: a non-conformance the coordinator agrees from her link */
.g-nc { margin: 0 0 14px; padding: 12px; background: #fff; box-shadow: inset 0 0 0 1px rgba(0,0,0,.22); }
.g-nc p { margin: 0 0 6px !important; font-size: 13px !important; line-height: 1.5; color: #2b2b2a !important; }
.g-nc b { font-weight: 500; color: #191919; }
.g-nc-acts { display: flex; gap: 8px; margin-top: 8px; }
.g-nc-acts .btn { flex: 1; min-height: 44px; }
.g-nc-acts .btn.primary { background: #191919; color: #f7f6f2; }
.g-nc-done { display: grid; grid-template-columns: 16px 1fr; gap: 8px; align-items: start; }
.g-nc-done .ic { width: 16px; height: 16px; margin-top: 2px; }
.g-nc-wait { color: #6a6964 !important; }
/* guest sheets added in round 8 are paper too */
.sheet-guestNc, .sheet-guestSeeAgain {
  --fg: #191919; --fg-2: #3b3b39; --muted: #6a6964; --faint: #767570; --bg: #ffffff; --surface: #f7f6f2; --surface-2: #e4e2dc; --chip: #e4e2dc;
  --line: rgba(0,0,0,.1); --line-2: rgba(0,0,0,.22); --primary: #191919; --primary-fg: #f7f6f2;
  background: #f7f6f2; color: #191919;
}
.sheet-guestNc .sheet-grab i, .sheet-guestSeeAgain .sheet-grab i { background: rgba(0,0,0,.25); }
.sheet-guestNc .field input, .sheet-guestNc .field textarea, .sheet-guestSeeAgain .field textarea { background: #ffffff; color: #191919; border-color: rgba(0,0,0,.25); }
.sheet-guestNc .btn.primary:not(.next-fill), .sheet-guestSeeAgain .btn.primary:not(.next-fill) { background: #191919; color: #f7f6f2; }
.sheet-guestNc .seg { box-shadow: inset 0 0 0 1px rgba(0,0,0,.25); }
.sheet-guestNc .seg button { color: #3b3b39; }
.sheet-guestNc .seg button.on { background: #191919; color: #f7f6f2; }
.sheet-guestNc .link-btn.inline { color: #191919; }
.sheet-rlCond .sec-h, .sheet-rlRoleAsk .sec-h { text-transform: none; letter-spacing: 0; font-size: 13px; color: var(--fg-2); margin-top: 20px; }
/* D3-11: the warning list sits under its own heading, so it needs no extra top margin */
.sec-h + .ov-rules.ov-warn { margin-top: 0; }

/* ---------- round 10 (roles.js) ---------- */
/* D4-4: before the condition photo, the shot itself is the yellow step, full width */
.rl-cond-shot { margin: 0 var(--gutter) 12px; }
.rl-cond-shot .btn { width: 100%; justify-content: center; min-height: 48px; }
.rl-cond-shot p { margin: 6px 0 0; font-size: 13px; line-height: 1.45; color: var(--muted); }
/* O4-2: the self-inspection warning on the role approval and the sign-off sheets */
.ov-block.rl-self > div { display: grid; gap: 10px; min-width: 0; }
.ov-block.rl-self .chips-wrap { padding: 0; margin: 0; }
.sheet-signoff .ov-block.rl-self, .sheet-ckxSign .ov-block.rl-self { margin-top: 4px; }
/* O4-2: the countersignature on the release page */
.g-self { display: grid; grid-template-columns: 16px 1fr; gap: 8px; align-items: start; margin: 0 0 14px !important; font-size: 13px !important; line-height: 1.5; color: #2b2b2a !important; }
.g-self .ic { width: 16px; height: 16px; margin-top: 2px; }
/* D4-5: the NC sheet changes its mode with a link, not a second control */
.sheet-guestNc .gn-switch { display: inline-block; margin-top: 8px; min-height: 44px; line-height: 44px; }