/* IoT Privacy Database (/iot-privacy, ADR 0013). Layered on blog.css +
   site-chrome.css; uses the shared site palette. Sibling of app-privacy.css. */

/* --- stat band --- */
.iot-stats {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin: 22px 0 8px;
}
.iot-stat {
  background: var(--paper-2); border: 1px solid var(--line); border-radius: 12px;
  padding: 16px; text-align: center;
}
.iot-stat-n { display: block; font-family: var(--serif); font-size: 30px; font-weight: 800; color: var(--forest); line-height: 1.1; }
.iot-stat-l { display: block; margin-top: 6px; font-size: 13px; color: var(--muted); }
/* The band is a grid, so the basis note has to span every column or it lands in
   a cell and reads as a fifth statistic. It states the denominator, which is the
   REVIEWED device count — smaller than the table below it. */
.iot-stats-basis {
  grid-column: 1 / -1; margin: 2px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--muted);
}
.iot-stats-basis strong { color: var(--ink); }
@media (max-width: 760px) { .iot-stats { grid-template-columns: repeat(2, 1fr); } }

/* --- worst offenders --- */
.iot-section-lead { color: var(--muted); margin: 4px 0 14px; }
/* grid-auto-rows: 1fr holds every row to the same height. Without it a row is
   only as tall as its own tallest card, so the section stepped down the page —
   865px rows above 173px rows. Every row is implicit here (no
   grid-template-rows), so this applies to all of them. */
.iot-offender-list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: 1fr; gap: 12px; }
@media (max-width: 760px) { .iot-offender-list { grid-template-columns: 1fr; } }
/* position: relative anchors the stretched link below, so the whole tile is
   clickable rather than just the device name. */
.iot-offender {
  position: relative;
  border: 1px solid var(--line); border-radius: 12px; padding: 14px; background: var(--cream);
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.iot-offender:hover, .iot-offender:focus-within {
  border-color: var(--forest); box-shadow: 0 2px 12px rgb(0 0 0 / .08);
}
.iot-offender-head { display: flex; align-items: center; gap: 12px; }
.iot-offender-head > div { flex: 1 1 auto; min-width: 0; }
.iot-offender-name { display: block; font-weight: 700; }
/* One line, ellipsised. "Intimate Device · Standard Innovation Corporation
   (We-Vibe)" wrapped to two, making that card 20px taller than its neighbours.
   The parent already sets min-width: 0, which is what lets the ellipsis work
   inside a flex item. */
.iot-offender-meta {
  display: block; font-size: 12px; color: var(--muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.iot-offender-grades { display: inline-flex; gap: 4px; white-space: nowrap; }

/* Clamp the blurb to three lines so every tile is the same height.
   Summary length varies by two orders of magnitude across the catalog — the
   researched surveillance-vendor records run 1,700–2,100 characters while an
   ordinary device runs ~190 — and because grid rows stretch to their tallest
   card, one long record set its whole row to 865px next to 173px rows. The
   full text is on the device's report page, which the tile now links to. */
.iot-offender-summary {
  margin: 10px 0 0; font-size: 13.5px; color: var(--ink);
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3;
  line-clamp: 3; overflow: hidden;
}

/* Stretched link: the existing anchor covers the tile, so there is still
   exactly one link per card for a screen reader and for tab order. */
a.iot-offender-name::after {
  content: ""; position: absolute; inset: 0; border-radius: 12px;
}

/* --- Surveillance Index chips --- */
.iot-si, .iot-offender-si {
  display: inline-block; min-width: 2.4em; padding: 3px 8px; border-radius: 8px;
  font-variant-numeric: tabular-nums; font-weight: 800; text-align: center; font-family: var(--serif);
}
.iot-offender-si { font-size: 20px; min-width: 2.6em; }
.iot-si-high { background: #7a1f1f; color: #fff; }        /* 7–10: severe */
.iot-si-mid  { background: #b8791f; color: #fff; }        /* 4–7:  notable */
.iot-si-low  { background: var(--sage); color: var(--forest); } /* <4: comparatively tame */
.iot-si-none { background: var(--paper-2); color: var(--muted); }

/* --- A–F grade badges (policy + evidence). Letter is real text; colour reinforces. --- */
.iot-grade {
  display: inline-block; min-width: 1.5em; padding: 1px 7px; border-radius: 6px;
  border: 1px solid var(--line); font-weight: 800; font-family: var(--serif); text-align: center;
}
.iot-grade-good { background: var(--sage); color: var(--forest); }
.iot-grade-mid  { background: #f6e8c8; color: #6b4e12; border-color: #e4cf98; }
.iot-grade-bad  { background: #f0d2cc; color: #7a1f1f; border-color: #e0b4aa; }
.iot-grade-none { background: transparent; color: var(--muted); border-style: dashed; }

/* --- Provenance badge (Hybrid Verification, ADR 0014) --- */
.iot-provenance {
  display: inline-block; margin-top: 4px; font-size: 11px; font-weight: 700; padding: 1px 8px;
  border-radius: 20px; background: #f6e8c8; color: #6b4e12; border: 1px solid #e4cf98;
  white-space: nowrap; vertical-align: middle;
}
.iot-d-provenance { margin: 0 0 14px; padding: 8px 12px; border-radius: 8px; font-size: 14px; }
.iot-d-provenance-draft { background: #f6e8c8; color: #6b4e12; border: 1px solid #e4cf98; }
.iot-d-provenance-ok { color: var(--forest); font-weight: 650; }

/* --- A–Z jump bar --- */
.iot-az { display: flex; flex-wrap: wrap; gap: 4px; margin: 0 0 12px; }
.iot-az-btn {
  min-width: 30px; padding: 4px 6px; font: inherit; font-weight: 650; line-height: 1;
  text-align: center; cursor: pointer; border: 1px solid var(--line); border-radius: 6px;
  background: var(--cream); color: var(--ink);
}
.iot-az-btn:hover:not(:disabled) { background: var(--paper-2); }
.iot-az-btn.is-active { background: var(--forest); color: var(--cream); border-color: var(--forest); }
.iot-az-btn:disabled { opacity: 0.32; cursor: default; }

/* --- directory + table --- */
.iot-count { color: var(--muted); margin: 6px 0 10px; }
.iot-filter-wrap { margin: 0 0 14px; }
.iot-filter-wrap label { font-weight: 650; margin-right: 8px; }
#iot-filter {
  width: 100%; max-width: 420px; padding: 10px 12px; border: 1px solid var(--line);
  border-radius: 8px; background: var(--cream); color: var(--ink); font: inherit;
}
.iot-tablewrap { overflow: auto; max-height: 70vh; }
.iot-table { width: 100%; border-collapse: collapse; font-size: 15px; }
.iot-table th, .iot-table td {
  border: 1px solid var(--line); padding: 8px 12px; text-align: left; vertical-align: middle;
}
.iot-table th { background: var(--paper-2); position: sticky; top: 0; }
.iot-name .iot-device { font-weight: 650; display: block; }
.iot-name .iot-maker { display: block; font-size: 12px; color: var(--muted); }
.iot-caps { display: inline-flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.iot-cap {
  font-size: 11px; padding: 0 6px; border: 1px solid var(--line); border-radius: 20px;
  color: var(--muted); white-space: nowrap;
}
.iot-grade-cell, .iot-si-cell { text-align: center; }
.muted { color: var(--muted); }

/* --- pager --- */
.iot-pager { display: flex; align-items: center; justify-content: center; gap: 14px; margin: 12px 0 0; }
.iot-pager-btn {
  padding: 7px 14px; font: inherit; font-weight: 650; cursor: pointer;
  border: 1px solid var(--line); border-radius: 8px; background: var(--cream); color: var(--ink);
}
.iot-pager-btn:hover:not(:disabled) { background: var(--paper-2); }
.iot-pager-btn:disabled { opacity: 0.4; cursor: default; }
.iot-pageinfo { color: var(--muted); font-variant-numeric: tabular-nums; min-width: 8em; text-align: center; }
.iot-pagesize-wrap { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: 14px; }
.iot-pagesize {
  padding: 6px 8px; font: inherit; cursor: pointer;
  border: 1px solid var(--line); border-radius: 8px; background: var(--cream); color: var(--ink);
}

/* --- caveats + attribution --- */
.iot-caveats { margin-top: 26px; }
.iot-attribution { color: var(--muted); font-size: 13px; margin-top: 12px; }

/* --- device name links (list + offenders) --- */
.iot-device { font-weight: 650; display: block; color: var(--forest); text-decoration: none; }
.iot-device:hover { text-decoration: underline; }
a.iot-offender-name { color: inherit; text-decoration: none; }
a.iot-offender-name:hover { text-decoration: underline; }

/* --- per-device detail page (Phase 2a) --- */
.iot-d-back { margin: 0 0 6px; }
.iot-d-back a { color: var(--muted); text-decoration: none; font-size: 14px; }
.iot-d-back a:hover { text-decoration: underline; }

.iot-d-verdict {
  display: flex; align-items: stretch; gap: 16px; flex-wrap: wrap;
  border: 1px solid var(--line); border-radius: 14px; padding: 16px; background: var(--paper-2); margin: 8px 0 18px;
}
.iot-d-si {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-width: 128px; padding: 12px 18px; border-radius: 12px; text-align: center;
}
.iot-d-si-n { font-family: var(--serif); font-size: 40px; font-weight: 800; line-height: 1; }
.iot-d-si-l { font-size: 12px; margin-top: 4px; opacity: 0.92; }
.iot-d-grades { display: flex; flex-direction: column; justify-content: center; gap: 10px; flex: 1 1 240px; }
.iot-d-grade { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.iot-d-grade-l { color: var(--muted); font-size: 14px; }
.iot-d-grade .iot-grade { font-size: 22px; min-width: 1.7em; padding: 4px 10px; }

.iot-d-summary { font-size: 17px; line-height: 1.55; margin: 0 0 18px; }
.iot-d-section { margin: 22px 0; }
.iot-d-section h2 { margin-bottom: 6px; }
.iot-d-count {
  display: inline-block; font-size: 13px; font-weight: 700; color: var(--muted);
  background: var(--paper-2); border: 1px solid var(--line); border-radius: 20px; padding: 0 9px; vertical-align: middle;
}
.iot-d-lead { color: var(--muted); margin: 0 0 12px; }

.iot-d-caps { list-style: none; padding: 0; margin: 0 0 12px; display: flex; flex-wrap: wrap; gap: 8px; }
.iot-d-caps li {
  border: 1px solid var(--line); border-radius: 20px; padding: 3px 12px; font-size: 13px; background: var(--cream);
}
.iot-d-specs { margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 8px 20px; }
.iot-d-specs div { display: flex; gap: 8px; border-bottom: 1px solid var(--line); padding: 6px 0; }
.iot-d-specs dt { color: var(--muted); min-width: 108px; }
.iot-d-specs dd { margin: 0; font-weight: 600; }

/* evidence list */
.iot-ev-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.iot-ev { border: 1px solid var(--line); border-left: 4px solid var(--line); border-radius: 10px; padding: 12px 14px; background: var(--cream); }
.iot-ev-head { display: flex; align-items: baseline; gap: 8px; }
.iot-ev-title { font-weight: 650; }
.iot-ev-title a { color: var(--forest); }
.iot-ev-meta { font-size: 12px; color: var(--muted); margin-top: 2px; }
.iot-ev-summary { margin: 8px 0 0; font-size: 14.5px; }
.iot-ev-rel { margin: 6px 0 0; font-size: 13.5px; color: var(--ink); }
.iot-sev { font-size: 11px; font-weight: 800; padding: 1px 6px; border-radius: 5px; white-space: nowrap; }
.iot-sev-high { background: #7a1f1f; color: #fff; }
.iot-sev-mid { background: #b8791f; color: #fff; }
.iot-sev-low { background: var(--sage); color: var(--forest); }

/* data-flow list */
.iot-flow-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.iot-flow { border: 1px solid var(--line); border-radius: 10px; padding: 10px 14px; background: var(--cream); }
.iot-flow-to { font-weight: 650; }
.iot-flow-ended {
  font-size: 11px; font-weight: 700; color: #7a1f1f; background: #f0d2cc; border: 1px solid #e0b4aa;
  border-radius: 20px; padding: 0 8px; margin-left: 6px;
}
.iot-flow-meta { display: block; font-size: 13px; color: var(--muted); margin-top: 3px; }

/* rating breakdown table */
.iot-d-detail { width: 100%; border-collapse: collapse; font-size: 14px; }
.iot-d-detail th, .iot-d-detail td { border: 1px solid var(--line); padding: 6px 10px; text-align: left; }
.iot-d-detail th { background: var(--paper-2); }
.iot-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }