/* ============================================================
   PERMIT VERIFICATION & COMPLIANCE MONITORING — compliance.css (agent D)

   Everything structural is already in styles.css: .panel, .panel-title, .tbl,
   .btn / .btn-gold / .btn-sm / .btn-ghost, .frow, .fld, .m-title, .m-sub,
   .m-foot, .empty. These are only the rules this feature adds, every one of
   them prefixed `cp-` so nothing here can reach another screen.

   The one idea the visual language has to carry is the difference between
   three verdicts — MATCHES, DOES NOT MATCH, and NOTHING TO COMPARE AGAINST.
   They are drawn as three different things (a quiet green dot, a red row, and
   a hollow grey dot with the reason spelled out) precisely because the third
   one is the one a consultant must not read as either of the other two.
   ============================================================ */

/* ---------- head ---------- */
.cp-head{display:flex;align-items:flex-start;gap:20px;flex-wrap:wrap;margin-bottom:16px}
.cp-head-l{flex:1 1 340px;min-width:0}
.cp-head-r{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.cp-kicker{font-size:11.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink-faint)}
.cp-kicker a{color:var(--gold-deep);text-decoration:none}
.cp-kicker a:hover{text-decoration:underline}
.cp-title{font-family:var(--disp);font-weight:800;font-size:25px;line-height:1.15;margin:4px 0 6px}
.cp-lede{font-size:13px;line-height:1.6;color:var(--ink-soft);max-width:66ch}

.cp-chips{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
.cp-chip{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--stroke);
  border-radius:99px;padding:4px 11px;font-size:11.5px;font-weight:600;color:var(--ink-soft);
  background:rgba(255,255,255,.5)}
.cp-chip.cp-amber{border-color:rgba(169,130,76,.45);color:var(--gold-deep);
  background:rgba(169,130,76,.08)}
.cp-chip.cp-red{border-color:rgba(140,59,46,.4);color:var(--red);background:rgba(140,59,46,.07)}
.cp-chip.cp-green{border-color:rgba(30,58,51,.3);color:var(--green);background:rgba(30,58,51,.06)}
.cp-chip.cp-mute{color:var(--ink-faint)}

/* ---------- the four counters ---------- */
.cp-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:16px}
.cp-stat{padding:16px 18px}
.cp-stat-n{font-family:var(--disp);font-weight:800;font-size:30px;line-height:1;color:var(--ink)}
.cp-stat-l{font-size:11.5px;color:var(--ink-faint);margin-top:5px;line-height:1.4}
.cp-stat-red .cp-stat-n{color:var(--red)}

/* ---------- panels, notes, alerts ---------- */
.cp-note{font-size:12.5px;line-height:1.6;color:var(--ink-soft);margin:0 0 14px;max-width:80ch}
.cp-note.cp-mute{color:var(--ink-faint)}
.cp-note.cp-ok{color:var(--green)}
.cp-alert{border-left:2px solid var(--gold);background:rgba(169,130,76,.07);
  border-radius:0 var(--r-sm) var(--r-sm) 0;padding:11px 14px;margin:0 0 14px;
  font-size:12.5px;line-height:1.6;color:var(--ink-soft)}
.cp-alert b{color:var(--ink)}
.cp-alert-amber{border-left-color:var(--gold-deep)}
.cp-count{font-family:var(--body);font-weight:600;font-size:11px;letter-spacing:.04em;
  color:var(--ink-faint);border:1px solid var(--stroke);border-radius:99px;padding:2px 9px}
.cp-count.cp-red{color:var(--red);border-color:rgba(140,59,46,.35)}
.cp-count.cp-green{color:var(--green);border-color:rgba(30,58,51,.3)}
.cp-acts{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px}
.cp-lbl{display:block;font-size:10px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;
  color:var(--ink-faint);margin-bottom:3px}
.cp-mute{color:var(--ink-faint)}
.cp-src{font-size:10.5px;color:var(--ink-faint);margin-top:3px;font-style:italic}
.cp-hint{font-size:11px;color:var(--ink-faint);margin-top:4px;line-height:1.45}
.cp-sec{font-size:10px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;
  color:var(--gold-deep);margin:20px 0 10px;padding-top:14px;border-top:1px solid var(--stroke-soft)}
.cp-sec:first-child{margin-top:0;padding-top:0;border-top:0}

/* ---------- register tables ---------- */
.cp-tbl{width:100%}
.cp-name{font-weight:600}
.cp-sub{font-size:11.5px;color:var(--ink-faint);margin-top:2px}
.cp-flags{white-space:normal}
.cp-flag{display:inline-flex;align-items:center;gap:5px;border-radius:99px;padding:3px 10px;
  font-size:11px;font-weight:600;letter-spacing:.02em;margin:2px 4px 2px 0;
  border:1px solid var(--stroke);color:var(--ink-soft);background:rgba(255,255,255,.5)}
.cp-flag.cp-red{color:var(--red);border-color:rgba(140,59,46,.35);background:rgba(140,59,46,.07)}
.cp-flag.cp-amber{color:var(--gold-deep);border-color:rgba(169,130,76,.4);background:rgba(169,130,76,.08)}
.cp-flag.cp-green{color:var(--green);border-color:rgba(30,58,51,.28);background:rgba(30,58,51,.06)}
.cp-flag.cp-mute{color:var(--ink-faint)}

/* ---------- the comparison table ----------
   Three verdicts, three shapes. The unknown is deliberately NOT a colour
   between the other two: it is a hollow ring and a sentence, because "we have
   nothing to compare this with" is a different kind of answer from "this is
   fine", not a weaker version of it. */
.cp-cmp{width:100%;margin-bottom:6px}
.cp-cmp th{font-weight:600}
.cp-cmp tbody th{font-size:12.5px;letter-spacing:0;text-transform:none;color:var(--ink);
  width:150px;padding:12px 16px;border-bottom:1px solid var(--stroke-soft);
  background:rgba(244,240,233,.35);text-align:left;vertical-align:top}
.cp-cmp tbody tr{cursor:default}
.cp-cmp tbody tr:hover{background:transparent}
.cp-cmp tr.cp-row-diff{background:rgba(140,59,46,.05)}
.cp-cmp tr.cp-row-diff th{background:rgba(140,59,46,.07)}
.cp-v{font-size:11.5px;font-weight:600;white-space:nowrap}
.cp-dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:7px;
  vertical-align:middle}
.cp-v-ok{color:var(--green)}
.cp-v-ok .cp-dot{background:var(--green-soft)}
.cp-v-diff{color:var(--red)}
.cp-v-diff .cp-dot{background:var(--red-soft)}
.cp-v-unknown{color:var(--ink-faint);font-weight:500;white-space:normal;max-width:20ch}
.cp-v-unknown .cp-dot{background:transparent;border:1.5px solid var(--ink-faint)}

/* ---------- conditions & remarks ---------- */
.cp-prose{margin-top:16px;padding:14px 16px;background:var(--bone);
  border:1px solid var(--stroke-soft);border-radius:var(--r-md)}
.cp-prose-h{font-size:10.5px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;
  color:var(--ink-faint);margin:0 0 6px;display:flex;align-items:center;gap:8px}
.cp-prose-h + p{font-size:12.5px;line-height:1.65;color:var(--ink);white-space:pre-line;
  margin-bottom:14px}
.cp-prose p:last-of-type{margin-bottom:8px}

/* ---------- discrepancies ---------- */
.cp-disc{border:1px solid var(--stroke-soft);border-radius:var(--r-md);padding:13px 15px;
  margin-bottom:10px;background:rgba(255,255,255,.45)}
.cp-disc-open{border-left:2px solid var(--red-soft)}
.cp-disc-resolved,.cp-disc-accepted{opacity:.82}
.cp-disc-h{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:8px}
.cp-disc-f{font-weight:700;font-size:13px}
.cp-disc-b{display:grid;grid-template-columns:1fr 1fr;gap:14px;font-size:12.5px;line-height:1.5}
.cp-disc-r{margin-top:9px;padding-top:9px;border-top:1px solid var(--stroke-soft);
  font-size:12px;color:var(--ink-soft);line-height:1.55}
.cp-disc-a{display:flex;gap:7px;flex-wrap:wrap;margin-top:11px}

/* ---------- monitoring ---------- */
.cp-grid2{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:14px;font-size:13px}
.cp-duties{margin-top:14px;padding:12px 14px;border-left:2px solid var(--gold);
  background:rgba(169,130,76,.06);border-radius:0 var(--r-sm) var(--r-sm) 0}
.cp-duties p{font-size:12.5px;line-height:1.6;color:var(--ink-soft);white-space:pre-line}

/* ---------- the renewal milestone bar ---------- */
.cp-msbar{display:flex;gap:8px;flex-wrap:wrap;margin:6px 0 4px}
.cp-ms{flex:1 1 90px;min-width:86px;text-align:center;padding:11px 8px;border-radius:var(--r-md);
  border:1px dashed var(--stroke);color:var(--ink-faint);background:rgba(255,255,255,.4)}
.cp-ms-d{font-family:var(--disp);font-weight:800;font-size:19px;line-height:1}
.cp-ms-d::after{content:'d';font-size:11px;font-weight:600;margin-left:1px}
.cp-ms-on-date{font-size:10.5px;margin-top:4px}
.cp-ms-on{border-style:solid;border-color:rgba(169,130,76,.5);color:var(--gold-deep);
  background:rgba(169,130,76,.09)}

/* ---------- the strip appended to an application ---------- */
.cp-strip{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:16px}
.cp-strip-l{flex:1 1 300px;min-width:0}
.cp-strip-t{font-family:var(--disp);font-weight:700;font-size:14px;margin-bottom:7px}
.cp-strip-f{display:flex;gap:5px;flex-wrap:wrap}

/* ---------- dialogs ----------
   openModal() supplies the .m-card; .cp-modal is only the body inside it, so
   a long permit reading scrolls under a footer that stays put. */
.cp-modal{max-height:none}
.cp-modal .frow{margin-bottom:12px}
.cp-modal .fld{margin-bottom:12px}
.cp-check{display:flex;align-items:flex-start;gap:9px;font-size:12.5px;color:var(--ink-soft);
  margin:-4px 0 14px;line-height:1.45;cursor:pointer}
.cp-check input{margin-top:2px;accent-color:var(--gold)}
/* The save button must not be pushed out of sight by a long conditions box. */
.cp-modal > .m-foot{position:sticky;bottom:0;background:var(--paper);padding-bottom:4px;z-index:2}

/* ---------- narrow ---------- */
@media (max-width:900px){
  .cp-stats{grid-template-columns:repeat(2,1fr)}
  .cp-disc-b,.cp-grid2{grid-template-columns:1fr;gap:10px}
}
@media (max-width:620px){
  .cp-title{font-size:21px}
  .cp-stats{grid-template-columns:1fr 1fr;gap:8px}
  .cp-stat{padding:13px 14px}
  .cp-stat-n{font-size:24px}
  .cp-head-r{width:100%}
  .cp-head-r .btn{flex:1 1 auto}
  /* A four-column comparison cannot survive 390px, so each line becomes a
     stacked block with its own labels rather than a horizontal scrollbar
     nobody finds. */
  .cp-cmp,.cp-cmp tbody,.cp-cmp tr,.cp-cmp td,.cp-cmp tbody th{display:block;width:auto}
  .cp-cmp thead{display:none}
  .cp-cmp tbody tr{border:1px solid var(--stroke-soft);border-radius:var(--r-md);
    margin-bottom:9px;padding:4px 0;background:rgba(255,255,255,.45)}
  .cp-cmp tbody th{background:transparent;border-bottom:0;padding:9px 14px 2px;
    font-weight:700;font-size:13px;width:auto}
  .cp-cmp tbody td{border-bottom:0;padding:2px 14px;font-size:12.5px}
  .cp-cmp tbody td:nth-of-type(1)::before{content:'Approved · ';color:var(--ink-faint);
    font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
  .cp-cmp tbody td:nth-of-type(2)::before{content:'As issued · ';color:var(--ink-faint);
    font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
  .cp-cmp td.cp-v{padding:6px 14px 10px;white-space:normal}
  .cp-tbl{display:block;overflow-x:auto}
  .cp-ms{flex:1 1 60px;min-width:60px;padding:8px 4px}
  .cp-ms-d{font-size:16px}
  .cp-ms-on-date{font-size:9.5px}
}

/* ---------- the register draws 100 rows per list and offers the rest ----------
   Added 25 Sep 2026: 220 monitored files built 4,963 DOM nodes on every
   repaint. The panel title carries the true count. */
.cp-more { padding: 10px 12px; border-top: 1px solid var(--rule); }