.device-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 24px;
  font-size: .85rem;
  color: #9eb5cc;
}
.device-breadcrumb a, .device-evidence, .device-references a { color: #74dfff; }
.device-hero { display: flex; align-items: center; gap: 40px; }
.device-hero > div { flex: 1; min-width: 0; }
.device-art { flex: 0 1 320px; margin: 0; }
.device-art img { display: block; width: 100%; height: auto; }
.device-art figcaption { margin-top: 12px; color: #9eb5cc; text-align: center; font-size: .75rem; }
.device-facts { display: flex; flex-wrap: wrap; margin: 0 0 32px; border: 1px solid #254760; border-radius: 14px; background: #091e35; }
.device-facts > div { flex: 1 1 220px; padding: 22px; }
.device-facts dt { color: #9eb5cc; font-size: .78rem; line-height: 1.5; }
.device-facts dd { margin: 8px 0 0; font-weight: 700; font-size: 1.1rem; }
.device-facts small { display: block; color: #b9cde0; font-weight: 400; margin-top: 4px; font-size: .83rem; }
.device-hardware { font-size: .85rem; line-height: 1.8; margin: -12px 0 32px; }
.device-hardware a { color: #74dfff; text-decoration: underline; text-underline-offset: 3px; }
.device-availability h2 { font-size: 1.4rem; }
.device-availability p { max-width: 960px; }
.device-compatibility { scroll-margin-top: 220px; }
.device-legend { display: flex; flex-wrap: wrap; list-style: none; padding: 0; margin: 24px 0; }
.device-legend li { flex: 1 1 220px; min-width: 0; padding: 0 16px 16px 0; }
.device-legend li > span:last-child { display: block; color: #b9cde0; margin-top: 7px; font-size: .8rem; line-height: 1.5; }
.device-status { display: inline-block; padding: 3px 9px; border: 1px solid; border-radius: 6px; font-size: .8rem; font-weight: 700; line-height: 1.55; }
.device-status > span { display: inline-block; min-width: 12px; text-align: center; }
.device-status--working { color: #b2f5d8; background: #123d35; border-color: #36785e; }
.device-status--partial { color: #ffdc9c; background: #3b301d; border-color: #856437; }
.device-status--unavailable { color: #ffc1c7; background: #3c2635; border-color: #805067; }
.device-status--unknown { color: #ccdceb; background: #192c42; border-color: #496078; }
.device-table-wrap { border: 1px solid #254760; border-radius: 12px; overflow: hidden; background: #07192e; }
.device-table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.device-feature-column { width: 29%; }
.device-status-column { width: 76px; }
.device-table th, .device-table td { padding: 11px 16px; text-align: left; vertical-align: top; overflow-wrap: break-word; word-wrap: break-word; line-height: 1.55; }
.device-table thead th { background: #07192e; color: #9eb5cc; font-size: .78rem; font-weight: 600; }
.device-table tbody th { font-size: .9rem; color: #e7f2fb; font-weight: 600; }
.device-table td { color: #b9cde0; font-size: .88rem; }
.device-table tbody tr { border-top: 1px solid #1c354e; scroll-margin-top: 220px; }
.device-table tbody tr:nth-child(odd):not(.device-category) { background: #0a1d32; }
.device-table .device-category th { background: #102c46; color: #b4efff; font-size: .96rem; padding-top: 13px; padding-bottom: 13px; }
.device-table .device-state { text-align: center; padding-left: 6px; padding-right: 6px; }
.device-state .device-status { width: 28px; padding: 0; font-size: 1rem; line-height: 26px; }
.device-evidence { display: inline; font-size: .78rem; text-decoration: underline; text-underline-offset: 3px; }
.device-evidence time { white-space: nowrap; }
.device-references li { margin-bottom: 14px; }
.device-references a { text-decoration: underline; text-underline-offset: 3px; }
.device-visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
@media (max-width: 760px) {
  .device-hero { display: block; }
  .device-art { max-width: 230px; margin: 28px auto 0; }
  .device-facts > div { flex-basis: 45%; padding: 16px; }
  .device-facts dd { font-size: 1rem; }
  .device-legend li { flex-basis: 50%; }
  .device-feature-column { width: 34%; }
  .device-status-column { width: 50px; }
  .device-table th, .device-table td { padding: 10px 9px; }
  .device-table tbody th, .device-table td { font-size: .82rem; }
  .device-table .device-category th { font-size: .9rem; }
}
@media (max-width: 360px) {
  .device-status-column { width: 44px; }
  .device-table th, .device-table td { padding: 9px 6px; }
  .device-table thead th { font-size: .72rem; }
}
