/* =====================================================================
   NTXP Punch List — dashboard stylesheet
   Tokens are the NTXP document standard v2.1, unchanged. Same palette,
   same face, same header geometry as the PDF the register prints to.
   ===================================================================== */
@font-face{font-family:"Open Sans";font-weight:400;font-style:normal;src:url(assets/fonts/OpenSans-Regular.ttf) format("truetype");font-display:swap}
@font-face{font-family:"Open Sans";font-weight:400;font-style:italic;src:url(assets/fonts/OpenSans-Italic.ttf) format("truetype");font-display:swap}
@font-face{font-family:"Open Sans";font-weight:600;font-style:normal;src:url(assets/fonts/OpenSans-Semibold.ttf) format("truetype");font-display:swap}
@font-face{font-family:"Open Sans";font-weight:700;font-style:normal;src:url(assets/fonts/OpenSans-Bold.ttf) format("truetype");font-display:swap}
@font-face{font-family:"Open Sans";font-weight:700;font-style:italic;src:url(assets/fonts/OpenSans-BoldItalic.ttf) format("truetype");font-display:swap}

:root{
  --navy:#1B2A4E; --navy-deep:#16224A; --navy-mid:#46567D; --navy-rule:#35446B; --navy-close:#182746;
  --accent:#C8102E;            /* Accent Red — the header band and nothing else */
  --signal:#D0353C;            /* Signal Red — semantic: open, overdue, attention */
  --signal-ink:#B92A32;        /* Signal Red for text on the warm row, 5.9:1 */
  --link:#2F529B;
  --warm-row:#F6F3EF; --warm-line:#E2DAD0; --warm-edge:#CDC0B2; --paper:#FBF9F6; --white:#FFFFFF;
  --ink:#1F2A3D; --ink-soft:#5A6880; --ink-mute:#5A6880;
  --font:"Open Sans","Source Sans 3","Segoe UI",Calibri,Arial,sans-serif;
  --band-h:clamp(64px, 9vw, 104px);
  --accent-h:8px;
  --radius:4px;
  --shadow:0 1px 2px rgba(31,42,61,.07), 0 6px 18px -12px rgba(27,42,78,.22);
  --focus:0 0 0 3px #fff, 0 0 0 5px var(--link);
  --ease:cubic-bezier(.2,.7,.2,1);
  --dur:.42s;
}
@media (prefers-reduced-motion: reduce){ :root{ --dur:0s } *{ animation:none !important; transition:none !important; scroll-behavior:auto !important } }

*{box-sizing:border-box}
html{ -webkit-text-size-adjust:100% }
body{ margin:0; font-family:var(--font); color:var(--ink); background:var(--paper); font-size:14px; line-height:1.4;
  -webkit-font-smoothing:antialiased; padding-top:var(--masthead-h, 0px); }
img{max-width:100%}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{ outline:none; box-shadow:var(--focus); border-radius:3px }
.sr-only{ position:absolute!important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0 }
.skip{ position:absolute; left:8px; top:-48px; z-index:100; background:var(--white); color:var(--navy); padding:8px 12px; border-radius:var(--radius); font-weight:700 }
.skip:focus{ top:8px }
.muted{ color:var(--ink-soft); font-size:13px; margin:.25rem 0 .75rem }
.link{ background:none; border:0; padding:0; color:var(--link); text-decoration:underline; text-underline-offset:2px; cursor:pointer }

/* ---------------- masthead ---------------- */
.masthead{ position:fixed; inset:0 0 auto 0; z-index:50; color:var(--white);
  background:linear-gradient(180deg,#1F3058 0%,var(--navy) 62%,var(--navy-close) 100%);
  box-shadow:0 2px 14px -6px rgba(0,0,0,.45); }
.band{ height:var(--band-h); display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:16px; padding:0 clamp(12px,2.5vw,28px); }
.logo{ display:flex; align-items:center; height:100%; flex:0 0 auto }
.logo img{ height:calc(var(--band-h) * .82); width:auto; display:block }
.lockup{ text-align:center; min-width:0 }
.t-doc{ margin:0; font-weight:700; text-transform:uppercase; letter-spacing:.10em; line-height:1.05; color:var(--white);
  font-size:clamp(15px, 2.9vw, 34px); white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.t-proj{ margin:2px 0 0; color:#D6DEEC; letter-spacing:.045em; font-size:clamp(11px, 1.5vw, 17px); white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.band-right{ display:flex; align-items:center; gap:14px; justify-self:end }
.rev{ display:flex; flex-direction:column; align-items:flex-end; line-height:1.2; font-size:12px; color:#D6DEEC; letter-spacing:.03em; white-space:nowrap }
.rev b{ color:var(--white); font-weight:700 }
.rev-d{ font-style:italic }
.userchip{ display:flex; align-items:center; gap:8px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.22); color:var(--white);
  border-radius:999px; padding:4px 12px 4px 4px; cursor:pointer; text-align:left; line-height:1.15; min-height:40px }
.userchip:hover{ background:rgba(255,255,255,.14) }
.avatar{ width:30px; height:30px; border-radius:50%; background:var(--white); color:var(--navy); font-weight:700; display:grid; place-items:center; font-size:13px; flex:0 0 auto }
.userchip-text{ display:flex; flex-direction:column; font-size:12px }
.userchip-name{ font-weight:700 }
.userchip-title{ color:#C9D3E6; font-size:11px }
.btn-pdf{ display:inline-flex; align-items:center; gap:8px; background:var(--white); color:var(--navy); font-weight:700; text-transform:uppercase; letter-spacing:.08em;
  font-size:12px; padding:0 16px; height:40px; border-radius:var(--radius); text-decoration:none; white-space:nowrap; border:1px solid var(--white); transition:transform .15s var(--ease), box-shadow .15s }
.btn-pdf:hover{ box-shadow:0 4px 14px -6px rgba(0,0,0,.6); transform:translateY(-1px) }
.btn-pdf[aria-busy="true"]{ opacity:.7; pointer-events:none }

.filters{ background:var(--navy-close); border-top:1px solid rgba(255,255,255,.08) }
.filters-inner{ display:flex; align-items:flex-end; gap:8px; padding:8px clamp(12px,2.5vw,28px); overflow-x:auto; scrollbar-width:thin; -webkit-overflow-scrolling:touch;
  /* Centred only while the row fits. A centred flex row that overflows splits the
     overflow across both edges, and the left half is unreachable — scrollLeft cannot
     go negative — so the first filter would be permanently cut off on any viewport
     too narrow for all six controls. `safe center` falls back to start on overflow.
     flex-start is declared first so an engine that does not understand `safe` keeps
     a left-aligned, fully scrollable row rather than a clipped centred one. */
  justify-content:flex-start; justify-content:safe center }
.f{ display:flex; flex-direction:column; gap:3px; font-size:10.5px; text-transform:uppercase; letter-spacing:.08em; color:#AFC0DC; flex:0 0 auto }
.f select,.f input{ height:34px; min-width:140px; border-radius:var(--radius); border:1px solid rgba(255,255,255,.28); background:rgba(255,255,255,.06); color:var(--white);
  padding:0 30px 0 10px; font-size:13px; text-transform:none; letter-spacing:0; appearance:none; -webkit-appearance:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8'><path d='M1 1l5 5 5-5' fill='none' stroke='%23D6DEEC' stroke-width='1.6'/></svg>"); background-repeat:no-repeat; background-position:right 10px center }
.f input{ background-image:none; padding-right:10px; min-width:190px }
.f select option{ color:var(--ink); background:var(--white) }
.f select:focus-visible,.f input:focus-visible{ box-shadow:0 0 0 2px var(--navy-close), 0 0 0 4px #fff }
.f-search::-webkit-search-cancel-button{ filter:invert(1) }
.f select.active,.f input.active{ border-color:#fff; background-color:rgba(255,255,255,.16) }
.f-clear{ height:34px; align-self:flex-end; border-radius:var(--radius); border:1px solid rgba(255,255,255,.28); background:transparent; color:#fff; padding:0 12px; font-size:12px; cursor:pointer; white-space:nowrap }
.f-clear:hover{ background:rgba(255,255,255,.1) }
.f-count{ display:inline-grid; place-items:center; min-width:20px; height:20px; border-radius:10px; background:var(--white); color:var(--navy); font-weight:700; font-size:11px; padding:0 6px; margin-left:4px }
/* The accent band: Accent Red 10% → 100% left to right, washed over #182746 so
   the fade exposes the brand blue. The only red decoration on the page. */
.accent{ height:var(--accent-h); background-color:var(--navy-close);
  background-image:linear-gradient(to right, rgba(200,16,46,.10) 0%, rgba(200,16,46,.22) 18%, rgba(200,16,46,.38) 36%, rgba(200,16,46,.56) 54%, rgba(200,16,46,.74) 72%, rgba(200,16,46,.89) 87%, rgba(200,16,46,1) 100%) }

/* ---------------- layout ---------------- */
main{ max-width:1600px; margin:0 auto; padding:18px clamp(12px,2.5vw,28px) 40px }
.card{ background:var(--white); border:1px solid var(--warm-edge); border-radius:var(--radius); box-shadow:var(--shadow) }

/* ---------------- KPI tiles & charts ---------------- */
.kpis{ display:grid; gap:14px; margin-bottom:18px }
.tiles{ display:grid; grid-template-columns:repeat(auto-fit, minmax(150px, 1fr)); gap:10px }
.tile{ padding:12px 14px 10px; display:flex; flex-direction:column; gap:2px; position:relative; overflow:hidden; cursor:default; border:1px solid var(--warm-edge); background:var(--white); border-radius:var(--radius); box-shadow:var(--shadow); text-align:left }
.tile[data-filter]{ cursor:pointer }
.tile[data-filter]:hover{ border-color:var(--navy-mid) }
.tile .k{ font-size:10.5px; text-transform:uppercase; letter-spacing:.1em; color:var(--ink-soft); font-weight:700 }
.tile .v{ font-size:clamp(26px,3vw,36px); font-weight:700; line-height:1; color:var(--navy); font-variant-numeric:tabular-nums; letter-spacing:-.01em }
.tile .v small{ font-size:.45em; font-weight:600; color:var(--ink-soft); margin-left:4px; letter-spacing:0 }
.tile .s{ font-size:12px; color:var(--ink-soft) }
.tile.signal .v{ color:var(--signal-ink) }
.tile .spark{ position:absolute; left:0; right:0; bottom:0; height:3px; background:var(--warm-line) }
.tile .spark i{ display:block; height:100%; background:var(--navy); width:0; transition:width var(--dur) var(--ease) }
.tile.signal .spark i{ background:var(--signal) }
.tile.is-active{ border-color:var(--navy); box-shadow:0 0 0 1px var(--navy) inset, var(--shadow) }

.charts{ display:grid; grid-template-columns:repeat(auto-fit, minmax(300px, 1fr)); gap:12px; align-items:start }
.chart{ margin:0; padding:12px 14px 14px }
.chart figcaption{ display:flex; justify-content:space-between; align-items:baseline; gap:8px; margin-bottom:10px }
.card-title{ font-weight:700; color:var(--navy); text-transform:uppercase; letter-spacing:.1em; font-size:11.5px }
.card-sub{ font-size:11.5px; color:var(--ink-soft) }
.segbar{ display:flex; height:22px; gap:2px; border-radius:3px; overflow:hidden; background:var(--warm-row) }
.segbar i{ display:block; height:100%; width:0; transition:width var(--dur) var(--ease); min-width:0 }
.seg-closed{ background:var(--navy) }
.seg-verified{ background:var(--navy-mid) }
.seg-open{ background:var(--signal) }
.seg-conflict{ background:repeating-linear-gradient(135deg, var(--signal) 0 4px, #E9A3A7 4px 8px) }
.seg-verify{ background:repeating-linear-gradient(45deg, var(--signal) 0 3px, #fff 3px 6px) }
.legend{ list-style:none; margin:10px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:6px 16px; font-size:12px; color:var(--ink) }
.legend li{ display:flex; align-items:center; gap:6px }
.legend i{ width:12px; height:12px; border-radius:2px; display:inline-block; flex:0 0 auto }
.legend b{ font-variant-numeric:tabular-nums }
.bars{ display:grid; gap:6px }
.bar{ display:grid; grid-template-columns:minmax(90px, 32%) 1fr auto; align-items:center; gap:10px; background:none; border:0; padding:2px 0; cursor:pointer; text-align:left; border-radius:3px; width:100% }
.bar:hover .bar-l{ color:var(--link); text-decoration:underline; text-underline-offset:2px }
.bar-l{ font-size:12px; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.bar-t{ height:10px; background:var(--warm-row); border-radius:2px; overflow:hidden; position:relative }
.bar-t i{ position:absolute; inset:0 auto 0 0; width:0; background:var(--navy); border-radius:0 2px 2px 0; transition:width var(--dur) var(--ease) }
.bar.signal .bar-t i{ background:var(--signal) }
.bar-n{ font-size:12px; color:var(--ink-soft); font-variant-numeric:tabular-nums; white-space:nowrap; min-width:64px; text-align:right }
.bar.is-active .bar-l{ font-weight:700; color:var(--navy) }

/* ---------------- register ---------------- */
.register{ display:grid; gap:18px; min-height:120px }
.section{ overflow:hidden; opacity:1; transform:none }
.section.enter{ animation:rise var(--dur) var(--ease) both }
@keyframes rise{ from{ opacity:0; transform:translateY(10px) } to{ opacity:1; transform:none } }
.register.leaving .section{ opacity:0; transform:translateY(-6px); transition:opacity .18s ease, transform .18s ease }
.sechead{ margin:0; background:var(--navy); color:var(--white); font-size:12.5px; font-weight:700; text-transform:uppercase; letter-spacing:.12em; text-align:center; padding:9px 96px; position:relative; line-height:1.2 }
.sechead .count{ position:absolute; right:14px; top:50%; transform:translateY(-50%); color:#AFC0DC; letter-spacing:.08em; font-size:11.5px }
.sechead .csi{ position:absolute; left:14px; top:50%; transform:translateY(-50%); color:#AFC0DC; letter-spacing:.08em; font-size:11px; font-weight:600; text-transform:none }
.tablewrap{ overflow-x:auto }
table.reg{ width:100%; border-collapse:collapse; table-layout:fixed; min-width:1180px }
.reg thead th{ background:linear-gradient(180deg,#4A5B82 0%,var(--navy-mid) 100%); color:var(--white); font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; padding:7px 8px; text-align:center; border-right:1px solid var(--navy-rule); line-height:1.15; vertical-align:middle }
.reg thead th:last-child{ border-right:0 }
.reg tbody td{ padding:7px 8px; border-top:1px solid var(--warm-line); vertical-align:top; text-align:center; font-size:12.5px; line-height:1.35; overflow-wrap:anywhere }
.reg tbody tr:nth-child(even) td{ background:var(--warm-row) }
.reg td.la{ text-align:left }
.reg td.no{ font-weight:700; color:var(--navy); font-variant-numeric:tabular-nums }
.reg td.no button{ background:none; border:0; padding:0; font:inherit; font-weight:700; color:var(--navy); cursor:pointer; text-decoration:underline; text-decoration-color:var(--warm-edge); text-underline-offset:3px }
.reg td.no button:hover{ text-decoration-color:var(--navy) }
.reg tbody tr.is-changed td{ animation:flash 1.6s ease-out }
@keyframes flash{ 0%{ background-color:#FFF3D6 } 100%{ background-color:transparent } }

/* photo cells */
.photocell{ width:84px; padding:6px !important }
.photo-btn{ width:72px; height:72px; border-radius:3px; border:1px dashed var(--warm-edge); background:var(--white); display:grid; place-items:center; cursor:pointer; padding:0; overflow:hidden; position:relative; color:var(--ink-mute); transition:border-color .15s }
.photo-btn:hover{ border-color:var(--navy-mid); color:var(--navy) }
.photo-btn img{ width:100%; height:100%; object-fit:cover; display:block }
.photo-btn .n{ position:absolute; right:3px; bottom:3px; background:var(--navy); color:#fff; font-size:10px; font-weight:700; border-radius:9px; padding:1px 6px; line-height:1.3 }
.photo-btn.has{ border-style:solid; border-color:var(--warm-edge) }
.photo-btn svg{ width:22px; height:22px }
.photo-btn span.lbl{ font-size:8.5px; text-transform:uppercase; letter-spacing:.04em; margin-top:-2px; white-space:nowrap }

/* inline status/priority selects */
.pill-select{ appearance:none; -webkit-appearance:none; border-radius:999px; padding:3px 22px 3px 10px; font-size:11.5px; font-weight:700; border:1px solid transparent; cursor:pointer; line-height:1.3; text-align:left; max-width:100%;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6'><path d='M1 1l4 4 4-4' fill='none' stroke='currentColor' stroke-width='1.5'/></svg>"); background-repeat:no-repeat; background-position:right 8px center }
.pill-select:disabled{ cursor:not-allowed; opacity:.85 }
.st-closed{ background-color:var(--navy); color:#fff }
.st-verified{ background-color:var(--navy-mid); color:#fff }
.st-open{ background-color:var(--signal); color:#fff }
.st-conflict{ background-color:#fff; color:var(--signal-ink); border-color:var(--signal-ink) !important; background-image:none; padding-right:10px }
.st-verify{ background-color:#FBEAEB; color:var(--signal-ink); border-color:#E9A3A7 !important }
.pr{ border-color:var(--warm-edge) !important; background-color:var(--white); color:var(--ink) }
.pr-crucial{ color:var(--signal-ink); border-color:var(--signal-ink) !important }
.pr-major{ color:var(--navy); border-color:var(--navy) !important }
.status-wrap{ display:flex; flex-direction:column; gap:4px; align-items:center }
.status-note{ font-size:10.5px; color:var(--ink-soft) }

/* comments cell */
.ccell{ text-align:left !important }
.cbtn{ display:block; width:100%; text-align:left; background:none; border:0; padding:0; cursor:pointer; font:inherit; color:var(--ink); border-radius:3px }
.cbtn:hover .cmeta{ color:var(--link) }
.cbody{ display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; font-size:12.5px }
.cmeta{ display:block; margin-top:3px; font-size:11px; color:var(--ink-soft) }
.cmeta b{ color:var(--navy); font-weight:700 }
.cbtn.none{ color:var(--ink-mute); font-style:italic }
.ccount{ display:inline-block; background:var(--warm-row); border:1px solid var(--warm-edge); color:var(--ink-soft); border-radius:9px; font-size:10.5px; padding:0 6px; margin-left:6px; font-style:normal }

.cite{ font-size:11.5px; color:var(--ink-soft); text-align:left !important }
.empty{ text-align:center; color:var(--ink-soft); padding:40px 0; font-style:italic }

.notes{ margin-top:18px; overflow:hidden }
.notes ol{ margin:0; padding:12px 18px 12px 36px; font-size:13px }
.notes li{ padding:5px 0; border-top:1px solid var(--warm-line) }
.notes li:first-child{ border-top:0 }

/* ---------------- footer ---------------- */
.foot{ display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; padding:10px clamp(12px,2.5vw,28px) 26px; border-top:1px solid var(--warm-edge); font-size:11.5px; color:var(--ink-soft); letter-spacing:.03em; max-width:1600px; margin:0 auto }

/* ---------------- drawer ---------------- */
.scrim{ position:fixed; inset:0; background:rgba(22,34,74,.45); z-index:60; backdrop-filter:blur(1px) }
.drawer{ position:fixed; top:0; right:0; bottom:0; width:min(400px, 100vw); z-index:70; background:var(--white); box-shadow:-10px 0 30px -12px rgba(0,0,0,.5); transform:translateX(100%); transition:transform .3s var(--ease); display:flex }
.drawer:not([hidden]){ transform:none }
.drawer-panel{ padding:22px 22px 28px; display:flex; flex-direction:column; gap:12px; width:100%; overflow:auto }
.drawer-head{ display:flex; justify-content:space-between; align-items:center }
.drawer-head h2{ margin:0; font-size:17px; color:var(--navy) }
.drawer-panel label{ display:flex; flex-direction:column; gap:4px; font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:var(--ink-soft) }
.drawer-panel input{ height:42px; border:1px solid var(--warm-edge); border-radius:var(--radius); padding:0 12px; font-size:15px; text-transform:none; letter-spacing:0; font-weight:400; color:var(--ink) }
.drawer-panel input:focus-visible{ border-color:var(--navy) }
.drawer-actions{ display:flex; gap:10px; margin-top:6px }
.btn{ height:40px; padding:0 16px; border-radius:var(--radius); border:1px solid var(--navy); background:var(--white); color:var(--navy); font-weight:700; cursor:pointer; letter-spacing:.04em; display:inline-flex; align-items:center; gap:8px; text-decoration:none }
.btn.primary{ background:var(--navy); color:#fff }
.btn.primary:hover{ background:var(--navy-deep) }
.btn.ghost{ border-color:var(--warm-edge); color:var(--ink) }
.btn.danger{ border-color:var(--signal-ink); color:var(--signal-ink) }
.btn:disabled{ opacity:.55; cursor:not-allowed }
.iconbtn{ width:36px; height:36px; border-radius:50%; border:1px solid var(--warm-edge); background:var(--white); font-size:20px; line-height:1; cursor:pointer; color:var(--ink-soft) }
.iconbtn:hover{ color:var(--navy); border-color:var(--navy) }

/* ---------------- dialogs ---------------- */
.dlg{ border:1px solid var(--warm-edge); border-radius:6px; padding:0; width:min(560px, calc(100vw - 24px)); max-height:calc(100vh - 32px); box-shadow:0 30px 60px -30px rgba(0,0,0,.6); color:var(--ink); background:var(--white) }
.dlg-wide{ width:min(860px, calc(100vw - 24px)) }
.dlg::backdrop{ background:rgba(22,34,74,.5) }
.dlg[open]{ animation:pop .22s var(--ease) }
@keyframes pop{ from{ opacity:0; transform:translateY(8px) scale(.985) } to{ opacity:1; transform:none } }
.dlg-head{ display:flex; justify-content:space-between; align-items:center; gap:12px; padding:14px 16px; background:var(--navy); color:#fff; margin:0 }
.dlg-head h2{ margin:0; font-size:13.5px; font-weight:700; text-transform:uppercase; letter-spacing:.1em; line-height:1.3 }
.dlg-head .iconbtn{ background:transparent; color:#fff; border-color:rgba(255,255,255,.35) }
.dlg .muted{ padding:0 16px }
.dlg-actions{ display:flex; gap:10px; align-items:center; padding:12px 16px 16px; flex-wrap:wrap }
.filebtn{ position:relative; overflow:hidden }
.filebtn input{ position:absolute; inset:0; opacity:0; cursor:pointer; width:100%; height:100% }
.progress{ font-size:12.5px; color:var(--ink-soft) }
.gallery{ display:grid; grid-template-columns:repeat(auto-fill, minmax(140px, 1fr)); gap:10px; padding:4px 16px }
.gitem{ position:relative; border:2px solid transparent; border-radius:4px; overflow:hidden; background:var(--warm-row) }
.gitem.is-thumb{ border-color:var(--navy) }
.gitem button.pick{ display:block; width:100%; aspect-ratio:1; padding:0; border:0; background:none; cursor:pointer }
.gitem img{ width:100%; height:100%; object-fit:cover; display:block }
.gitem .gmeta{ font-size:10.5px; color:var(--ink-soft); padding:4px 6px; display:flex; justify-content:space-between; gap:6px; align-items:center }
.gitem .gmeta a{ color:var(--link) }
.gitem .del{ background:none; border:0; color:var(--signal-ink); cursor:pointer; font-size:11px; padding:0; text-decoration:underline }
.gitem .star{ position:absolute; left:6px; top:6px; background:var(--navy); color:#fff; font-size:10px; font-weight:700; padding:2px 7px; border-radius:9px; letter-spacing:.05em }
.gempty{ grid-column:1/-1; text-align:center; color:var(--ink-soft); padding:26px 0; font-style:italic }

.comments{ list-style:none; margin:0; padding:8px 16px; max-height:46vh; overflow:auto; display:grid; gap:8px }
.comments li{ background:var(--warm-row); border:1px solid var(--warm-line); border-radius:4px; padding:8px 10px; font-size:13px }
.comments .who{ display:flex; justify-content:space-between; gap:8px; font-size:11px; color:var(--ink-soft); margin-bottom:3px }
.comments .who b{ color:var(--navy) }
.comment-form{ display:grid; gap:8px; padding:10px 16px 16px; border-top:1px solid var(--warm-line) }
.comment-form textarea{ border:1px solid var(--warm-edge); border-radius:var(--radius); padding:10px; resize:vertical; font-size:14px; min-height:74px }
.comment-form textarea:focus-visible{ border-color:var(--navy) }

.itemform{ display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); gap:12px; padding:14px 16px 16px }
.itemform label{ display:flex; flex-direction:column; gap:4px; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:var(--ink-soft) }
.itemform label.wide{ grid-column:1/-1 }
.itemform input,.itemform select,.itemform textarea{ border:1px solid var(--warm-edge); border-radius:var(--radius); padding:8px 10px; font-size:14px; font-weight:400; text-transform:none; letter-spacing:0; color:var(--ink); background:#fff }
.itemform textarea{ min-height:70px; resize:vertical }
.itemform .actions{ grid-column:1/-1; display:flex; gap:10px; justify-content:flex-end; align-items:center; flex-wrap:wrap }
.itemform .meta{ grid-column:1/-1; font-size:12px; color:var(--ink-soft) }

.activity{ list-style:none; margin:0; padding:8px 16px 16px; max-height:66vh; overflow:auto; display:grid; gap:4px; font-size:12.5px }
.activity li{ display:grid; grid-template-columns:150px 1fr; gap:10px; padding:6px 8px; border-bottom:1px solid var(--warm-line) }
.activity time{ color:var(--ink-soft); font-variant-numeric:tabular-nums; font-size:11.5px }
.activity b{ color:var(--navy) }
.activity .chg{ color:var(--ink-soft) }
.activity .chg i{ color:var(--ink); font-style:normal }
.backups{ width:calc(100% - 32px); margin:0 16px 16px; border-collapse:collapse; font-size:12.5px }
.backups th,.backups td{ padding:7px 8px; border-top:1px solid var(--warm-line); text-align:left; font-variant-numeric:tabular-nums }
.backups th{ background:var(--warm-row); font-size:10.5px; text-transform:uppercase; letter-spacing:.08em; color:var(--ink-soft) }
.backups .btn{ height:30px; padding:0 10px; font-size:12px }

.toast{ position:fixed; left:50%; bottom:18px; transform:translate(-50%, 20px); background:var(--navy); color:#fff; padding:10px 16px; border-radius:var(--radius); font-size:13px; box-shadow:0 10px 30px -10px rgba(0,0,0,.6); opacity:0; pointer-events:none; transition:opacity .25s, transform .25s var(--ease); z-index:90; max-width:calc(100vw - 24px) }
.toast.show{ opacity:1; transform:translate(-50%, 0) }
.toast.err{ background:var(--signal-ink) }

/* ---------------- responsive ---------------- */
@media (max-width: 1100px){
  .rev{ display:none }
  .userchip-title{ display:none }
}
@media (max-width: 820px){
  .band{ grid-template-columns:auto 1fr auto; gap:10px }
  .btn-pdf span{ display:none }
  .btn-pdf{ padding:0 12px; width:40px; justify-content:center }
  .userchip-text{ display:none }
  .userchip{ padding:4px }
  .filters-inner{ justify-content:flex-start }
  .f select,.f input{ min-width:130px }
  /* register → cards */
  table.reg{ min-width:0 }
  .reg thead{ display:none }
  .reg, .reg tbody, .reg tr, .reg td{ display:block }
  .reg tbody tr{ border-top:1px solid var(--warm-line); padding:10px 12px 12px; display:grid; grid-template-columns:84px 1fr 84px; grid-auto-rows:min-content; column-gap:10px; row-gap:6px }
  .reg tbody tr:nth-child(even) td{ background:transparent }
  .reg tbody tr:nth-child(even){ background:var(--warm-row) }
  .reg tbody td{ border-top:0; padding:0; text-align:left; font-size:13px }
  .reg td.photocell{ width:auto; padding:0 !important }
  .reg td.photocell.before{ grid-column:1; grid-row:1 / span 3 }
  .reg td.photocell.after{ grid-column:3; grid-row:1 / span 3 }
  .reg td.no{ grid-column:2; grid-row:1; font-size:15px }
  .reg td.desc{ grid-column:2; grid-row:2; font-weight:600 }
  .reg td.statuscell{ grid-column:2; grid-row:3 }
  .reg td.statuscell .status-wrap{ align-items:flex-start; flex-direction:row; flex-wrap:wrap }
  .reg td.kv{ grid-column:1 / -1; display:flex; gap:6px; font-size:12.5px }
  .reg td.kv::before{ content:attr(data-label); color:var(--ink-soft); text-transform:uppercase; letter-spacing:.06em; font-size:10px; flex:0 0 auto; padding-top:2px; min-width:92px }
  .reg td.ccell{ grid-column:1 / -1 }
  .reg td.ccell::before{ content:attr(data-label); display:block; color:var(--ink-soft); text-transform:uppercase; letter-spacing:.06em; font-size:10px; margin-bottom:2px }
  .sechead{ padding:8px 12px; font-size:11.5px }
  .sechead .csi{ display:none }
  .sechead .count{ position:static; display:block; transform:none; margin-top:3px; font-size:10.5px }
  .band-right{ gap:8px }
}
@media (max-width: 480px){
  :root{ --band-h:60px }
  .t-doc{ font-size:13px; letter-spacing:.07em; white-space:normal; line-height:1.1 }
  .t-proj{ display:none }
  .tile{ padding:10px 12px 9px }
  .tile .v{ font-size:24px }
  .reg tbody tr{ grid-template-columns:72px 1fr 72px }
  .photo-btn{ width:64px; height:64px }
}
@media print{
  .masthead,.filters,.foot,.kpis{ display:none }
  body{ padding-top:0 }
}