/* Device guides: the /devices hub and each /devices/<slug> page, on top of marketing.css and guides/guides.css.
   Written by hand; site/src/pages/devices uses it. The shape icons (DeviceShape.astro) take the text colour. */
.device-shape { flex: none; }
.device-drawing { color: var(--text-3); }
.device-drawing * { vector-effect: non-scaling-stroke; stroke-width: 1.6px; }

/* Hub */
.site .device-jump { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 10px; margin-top: 22px; font-size: 15px; color: var(--text-3); }
.device-jump a { color: var(--text-2); }
.device-jump a:hover { color: var(--text) !important; }
.device-chip { display: inline-flex; align-items: center; gap: 6px; }
.device-chip .device-shape { color: var(--text-3); }
.device-chip[aria-pressed="true"] .device-shape { color: var(--text-2); }
.device-grid { grid-template-columns: repeat(4, 1fr); }
.device-card { gap: 6px; padding: 16px 16px 18px; }
/* Photos sit on one light tile, whatever their own background: white backgrounds multiply into it, transparent ones
   sit on it. A device without a photo gets its shape drawn on the same tile. */
.device-thumb { display: grid; place-items: center; aspect-ratio: 4 / 3; margin-bottom: 8px; border-radius: calc(var(--radius) - 6px); background: #e8e8ee; overflow: hidden; }
.device-thumb img, .device-figure img { mix-blend-mode: multiply; }
.device-thumb img { width: 78%; height: 78%; object-fit: contain; }
.device-thumb .device-drawing, .device-figure .device-drawing { color: #6c6c78; }
.site .device-card strong { font-size: 17px; }
.device-card > .device-type { display: flex; align-items: center; gap: 6px; font-size: 14px !important; line-height: 1.35 !important; color: var(--text-3); overflow-wrap: anywhere; }
.device-card > .device-bands { font: 13px var(--mono) !important; color: #9fd3ff !important; overflow-wrap: anywhere; }
.device-group { scroll-margin-top: 260px; }
.site .device-topics h3 { margin-top: 32px; font-size: 18px; color: var(--text-2); }
.device-topic-grid { grid-template-columns: repeat(3, 1fr); margin-top: 14px; }
.device-topic > .device-type { color: #9fd3ff !important; }

/* Page */
.site .device-eyebrow { display: flex; align-items: center; gap: 8px; }
.device-facts { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 24px; align-items: center; margin-top: 28px; padding: 20px; border: 1px solid var(--border); border-radius: var(--radius); background: linear-gradient(180deg, #ffffff07, #ffffff02); }
.device-facts.device-facts-plain { grid-template-columns: minmax(0, 1fr); }
.site .device-figure { display: grid; place-items: center; aspect-ratio: 1; margin: 0; border-radius: calc(var(--radius) - 6px); background: #e8e8ee; overflow: hidden; }
.device-figure img { width: 86%; height: 86%; object-fit: contain; }
.site .device-facts dl { display: grid; gap: 12px; margin: 0; }
.site .device-facts dl > div { display: grid; grid-template-columns: 116px minmax(0, 1fr); gap: 12px; }
.site .device-facts dt { font: 600 12px var(--mono); letter-spacing: .04em; text-transform: uppercase; color: var(--text-3); padding-top: 3px; }
.site .device-facts dd { margin: 0; font-size: 15px; line-height: 1.5; color: var(--text-2); overflow-wrap: anywhere; }
.site .device-meta { margin-top: 14px; font-size: 14px; line-height: 1.55; color: var(--text-3); }
.device-meta strong { font-weight: 600; color: var(--text-2); }
.site .device-guide section h3 { margin-top: 26px; font-size: 17px; }
.site .device-guide .device-missing { margin-top: 14px; padding-inline-start: 14px; border-inline-start: 2px solid var(--border-strong); color: var(--text-2); }
.site .device-guide .device-note { margin-top: 14px; font-size: 15px; color: var(--text-3); }
.site .device-guide .device-list { margin-top: 12px; }
.device-table-wrap { margin-top: 16px; overflow-x: auto; }
.device-table { width: 100%; border-collapse: collapse; font-size: 15px; }
.device-table caption { padding-bottom: 8px; text-align: start; font-size: 14px; color: var(--text-3); }
.device-table thead th { padding: 10px 12px; text-align: start; font: 600 12px var(--mono); letter-spacing: .04em; text-transform: uppercase; color: var(--text-3); border-bottom: 1px solid var(--border); }
.device-table tbody th { padding: 12px; text-align: start; font-weight: 600; color: var(--text); border-bottom: 1px solid #ffffff0f; vertical-align: top; }
.device-table td { padding: 12px; border-bottom: 1px solid #ffffff0f; vertical-align: top; color: var(--text-2); }
.site .device-kilobat { margin-top: 18px; padding: 12px 16px; border: 1px solid #b096fa38; border-radius: var(--radius-control); background: #b096fa0d; font-size: 15px; line-height: 1.55; color: var(--text-2); }
.device-kilobat a { color: #c9b8ff; text-decoration: underline; text-decoration-color: #c9b8ff55; text-underline-offset: 4px; }
.device-kilobat strong:first-child { color: var(--text); font-weight: 600; }
.site .device-cta { margin-top: 56px; padding: 28px; border: 1px solid #b096fa45; border-radius: var(--radius); background: linear-gradient(180deg, #b096fa14, #b096fa05); }
.site .device-cta h2 { margin-top: 0; }
.site .device-cta .hero-actions { justify-content: flex-start; margin-top: 20px; }
@media (max-width: 1100px) { .device-grid { grid-template-columns: repeat(3, 1fr); } .device-topic-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 820px) {
  .device-grid, .device-topic-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .device-facts { grid-template-columns: minmax(0, 1fr); padding: 16px; }
  .site .device-figure { width: 160px; justify-self: center; }
  .site .device-facts dl > div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .site .device-cta { padding: 20px; }
}
@media (max-width: 480px) {
  .device-card { padding: 12px 12px 14px; }
  .site .device-card strong { font-size: 16px; }
  .device-topic-grid { grid-template-columns: minmax(0, 1fr); }
}