/* Indiott — product specification table, answer-first summary, applications and
   buyer FAQs (indiott-product-specs.php). Namespaced .iott-*; graphite/paper/
   signal design system, IBM Plex, 2px radii, mono for measured values.

   The spec table deliberately uses mono tabular figures for the value column:
   these are numbers an OT engineer scans down and compares against a
   requirement, so column alignment matters more than prose rhythm. */

/* --- Answer-first summary, directly under the price ---------------------- */
.iott-answer {
  margin: 18px 0 20px;
  padding: 14px 16px;
  border-left: 2px solid var(--signal, #ee6124);
  background: var(--paper, #f7f8f9);
}
.iott-answer__text {
  margin: 0;
  font-family: var(--font-sans, 'IBM Plex Sans', sans-serif);
  font-size: 15px;
  line-height: 1.6;
  color: var(--steel-700, #3e444b);
}
.iott-answer__key {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
  margin: 10px 0 0;
  padding-top: 10px;
  border-top: 1px solid var(--steel-100, #e9ecef);
}
.iott-answer__keylabel {
  font-family: var(--font-mono, 'IBM Plex Mono', monospace);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--steel-500, #7c8590);
}
.iott-answer__keyval {
  font-family: var(--font-mono, 'IBM Plex Mono', monospace);
  font-size: 14px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--ink, #232458);
}

/* --- Specification table ------------------------------------------------- */
.iott-specs {
  border-top: 1px solid var(--steel-100, #e9ecef);
  padding: 34px 0 6px;
  margin-top: 30px;
}
.iott-specs__h,
.iott-faq__h {
  margin: 0 0 16px;
  font-family: var(--font-sans, 'IBM Plex Sans', sans-serif);
  font-size: clamp(20px, 2.2vw, 26px);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--ink, #232458);
}
.iott-specs__vh {
  margin: 0 0 10px;
  font-family: var(--font-sans, 'IBM Plex Sans', sans-serif);
  font-size: 16px;
  font-weight: 600;
  color: var(--ink, #232458);
}

/* Wide spec values (protocol lists, certification strings) must scroll inside
   the table rather than push the page sideways on a phone. */
.iott-specs__table {
  width: 100%;
  border-collapse: collapse;
  display: block;
  overflow-x: auto;
  margin: 0 0 10px;
}
.iott-specs__table tbody { display: table; width: 100%; }
.iott-specs__table tr { border-bottom: 1px solid var(--steel-100, #e9ecef); }
.iott-specs__table tr:first-child { border-top: 1px solid var(--steel-100, #e9ecef); }
.iott-specs__table th {
  width: 38%;
  padding: 11px 16px 11px 0;
  text-align: left;
  vertical-align: top;
  font-family: var(--font-sans, 'IBM Plex Sans', sans-serif);
  font-size: 13px;
  font-weight: 500;
  color: var(--steel-500, #7c8590);
}
.iott-specs__table td {
  padding: 11px 0;
  vertical-align: top;
  font-family: var(--font-mono, 'IBM Plex Mono', monospace);
  font-size: 13px;
  line-height: 1.55;
  font-variant-numeric: tabular-nums;
  color: var(--ink, #232458);
}
.iott-specs__src {
  margin: 0 0 22px;
  font-family: var(--font-mono, 'IBM Plex Mono', monospace);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--steel-500, #7c8590);
}

.iott-specs__variant {
  margin: 0 0 22px;
  padding: 14px 16px;
  background: var(--paper, #f7f8f9);
  border: 1px solid var(--steel-100, #e9ecef);
  border-radius: var(--r, 2px);
}
.iott-specs__variant p,
.iott-specs__apps li {
  font-family: var(--font-sans, 'IBM Plex Sans', sans-serif);
  font-size: 14px;
  line-height: 1.6;
  color: var(--steel-700, #3e444b);
}
.iott-specs__variant p { margin: 0; max-width: 68ch; }
.iott-specs__apps { margin: 0 0 8px; }
.iott-specs__apps ul { margin: 0; padding-left: 18px; }
.iott-specs__apps li { margin: 0 0 5px; }

/* --- FAQs ---------------------------------------------------------------- */
.iott-faq {
  border-top: 1px solid var(--steel-100, #e9ecef);
  padding: 34px 0 10px;
  margin-top: 30px;
}
.iott-faq__item { border-bottom: 1px solid var(--steel-100, #e9ecef); }
.iott-faq__item summary {
  list-style: none;
  cursor: pointer;
  padding: 14px 28px 14px 0;
  position: relative;
}
.iott-faq__item summary::-webkit-details-marker { display: none; }
.iott-faq__item summary h3 {
  display: inline;
  margin: 0;
  font-family: var(--font-sans, 'IBM Plex Sans', sans-serif);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.45;
  color: var(--ink, #232458);
}
/* Chevron drawn in CSS so the control needs no icon font or SVG request. */
.iott-faq__item summary::after {
  content: '';
  position: absolute;
  right: 4px;
  top: 20px;
  width: 7px;
  height: 7px;
  border-right: 1.5px solid var(--steel-500, #7c8590);
  border-bottom: 1.5px solid var(--steel-500, #7c8590);
  transform: rotate(45deg);
  transition: transform 0.18s var(--ease, ease);
}
.iott-faq__item[open] summary::after { transform: rotate(-135deg); top: 23px; }
.iott-faq__item summary:hover h3 { color: var(--signal-press, #b8431a); }
.iott-faq__a { padding: 0 0 16px; }
.iott-faq__a p {
  margin: 0;
  max-width: 72ch;
  font-family: var(--font-sans, 'IBM Plex Sans', sans-serif);
  font-size: 14px;
  line-height: 1.65;
  color: var(--steel-700, #3e444b);
}

@media (prefers-reduced-motion: reduce) {
  .iott-faq__item summary::after { transition: none; }
}

@media (max-width: 600px) {
  .iott-specs__table th { width: 44%; padding-right: 12px; font-size: 12px; }
  .iott-specs__table td { font-size: 12px; }
}

/* --- Category buying-guide prose (indiott-category-content.php) ---------- */
.iott-catcontent { margin-top: 8px; }
.iott-catcontent__p {
  margin: 0 0 12px;
  max-width: 74ch;
  font-family: var(--font-sans, 'IBM Plex Sans', sans-serif);
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--steel-700, #3e444b);
}
.iott-catcontent .iott-specs__h { margin-top: 26px; }
.iott-catcontent .iott-specs__h:first-child { margin-top: 0; }