/* Customization (M8): density, the preferences panel, the deployment-settings view, the facts card. Same tokens; no new colors. */

/* ---- density: rows and cards only. Tap targets (buttons, inputs, tabs) keep their 44 px minimum in both. */
html[data-density="compact"] td{padding-top:6px;padding-bottom:6px}
html[data-density="compact"] .prod small,html[data-density="compact"] .statecell small{display:none}
html[data-density="compact"] .meter{margin-top:3px}
html[data-density="compact"] .fc{padding:9px 14px;gap:4px}
html[data-density="compact"] .fc .vals{padding:5px 10px}
html[data-density="compact"] .tile{padding:9px 14px}
html[data-density="compact"] .tile strong{font-size:24px}
html[data-density="compact"] .card.pad{padding:12px 16px}
html[data-density="compact"] .skelrow{padding:10px 12px}
html[data-density="compact"] .src dt{margin-top:8px}
html[data-density="compact"] .timeline,html[data-density="compact"] .thread{gap:7px}

/* ---- preferences */
.pref-status{min-height:1.5em;margin:0 0 10px;font-size:13.5px;color:var(--mute)}
.pref-status.ok{color:var(--ok);font-weight:600}
.pref-status.warn{color:var(--warn);font-weight:600}
.prefgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;align-items:start}
.prefgrid .wide{grid-column:1 / -1}
.prefgrid h2{display:flex;gap:8px;align-items:center}
.fs{border:0;margin:0 0 14px;padding:0}
.fs legend{font-size:12.5px;font-weight:700;color:var(--mute);margin:0 0 6px;padding:0}
.radgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px}
.bigrad{border:1px solid var(--line);border-radius:12px;padding:6px 12px;background:var(--panel2);align-items:flex-start;min-height:48px}
.bigrad.on{border-color:var(--accent);background:var(--infobg)}
.bigrad span{display:grid;gap:0;padding-top:2px}
.bigrad small{color:var(--mute);font-size:12.5px;font-weight:400}
.collist{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:6px}
.colrow{display:flex;gap:10px;align-items:center;justify-content:space-between;border:1px solid var(--line);border-radius:12px;padding:2px 10px 2px 6px;background:var(--panel2)}
.colrow.off{background:none;border-style:dashed}
.colcheck{flex:1 1 auto;align-items:flex-start;padding:2px 4px}
.colcheck span{display:grid}
.colcheck small{color:var(--mute);font-size:12.5px;font-weight:400}
.colmove{display:flex;gap:6px;align-items:center}
.colpos{min-width:1.4em;text-align:right}
.iconbtn.sm{min-height:44px;min-width:44px;padding:0 8px}
.colprev{display:flex;gap:6px;flex-wrap:wrap;margin:14px 0;padding:10px 12px;border:1px solid var(--line);border-radius:12px;background:var(--panel2)}
.colprev::before{content:"Header preview";width:100%;font-size:11px;text-transform:uppercase;letter-spacing:.07em;color:var(--mute);font-weight:700}
.hiddencols{margin-top:14px}
.checkcol{display:grid;gap:2px}
.pref-foot{display:flex;gap:10px 16px;align-items:center;flex-wrap:wrap;margin-top:18px}

/* ---- deployment settings (read only) */
.cap{font-size:11.5px;text-transform:uppercase;letter-spacing:.08em;color:var(--mute);font-weight:700}
.cfg-version{margin-bottom:16px}
.cfg-v-main{display:flex;justify-content:space-between;gap:10px 20px;flex-wrap:wrap;align-items:flex-start}
.cfg-v-main h1{margin:2px 0 0}
.cfg-kv{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.cfg-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-bottom:16px;align-items:start}
.cfg-grid .kv{grid-template-columns:1fr}
.card.pad+.card.pad{margin-top:16px}
.cfg-grid .card.pad+.card.pad{margin-top:0}
.cfglog td.wide{min-width:220px}
.chglist{list-style:none;padding-left:0;margin:6px 0 0;display:grid;gap:4px}
.chg-old{color:var(--mute);text-decoration:line-through}
table.fieldtable{min-width:900px}
table.fieldtable td.must{font-weight:700}
.wd{border-top:1px solid var(--line2)}
.wd:first-of-type{border-top:0}
.wd .kv{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}

/* ---- facts card on the finding screen */
.facts .kv{grid-template-columns:repeat(auto-fit,minmax(200px,1fr));margin:8px 0 0}
.facts .kv dd{margin-top:2px}
.facts .kv .hlp{display:block;color:var(--mute);font-size:12px;margin-top:2px}

@media (max-width:1023px){.cfg-grid{grid-template-columns:1fr}.prefgrid{grid-template-columns:1fr}}
@media (max-width:720px){
  .colrow{flex-wrap:wrap}
  .colmove{margin-left:auto}
}

/* "why this was flagged": one collapsible section per ui_config field */
.src.pad{padding:0 18px 12px;margin:0}
.wsec{border-top:1px solid var(--line2)}
.wsec:first-child{border-top:0}
.wsec>summary{color:var(--mute);font-size:11.5px;text-transform:uppercase;letter-spacing:.07em;font-weight:700;gap:8px;min-height:44px}
.wsec>summary::before{content:"";width:7px;height:7px;border-right:2px solid var(--mute);border-bottom:2px solid var(--mute);transform:rotate(-45deg);transition:transform .15s;flex:none}
.wsec[open]>summary::before{transform:rotate(45deg)}
.wsec-b{padding:0 0 12px 15px;font-size:14px}
.wsec-conf{border-top:1px solid var(--line2);padding:12px 0 4px}
.wsec-conf small{display:block;font-size:11.5px;text-transform:uppercase;letter-spacing:.07em;color:var(--mute);font-weight:700;margin-bottom:2px}

/* every button on the new pages keeps a 44 px tap target, the small variant included */
.chainbar .btn.sm,.cfg-version .btn.sm,#cfg-host .btn.sm,.auditcard .btn.sm{min-height:44px}