/* Styles for the model catalogue in /blog/rootable-android-devices-complete-list-2026 (and its translations).
   Scoped under .rv- classes only; nothing here touches sitewide selectors. */

.rv-picks { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; margin: 18px 0 22px; }
.rv-pick { padding: 16px 18px; border: 1px solid var(--tr-card-border, rgba(255,255,255,.12)); border-radius: 14px; background: var(--dr-panel, rgba(255,255,255,.03)); }
.rv-pick-label { margin: 0 0 4px; font: 700 .72rem/1.2 var(--font-mono, monospace); letter-spacing: .04em; text-transform: uppercase; color: var(--tr-accent-ink, #70efb0); }
.rv-pick-name { margin: 0 0 6px; font-weight: 800; font-size: 1.02rem; }
.rv-pick p:last-child { margin: 0; font-size: .92rem; opacity: .85; }

.rv-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin: 16px 0 10px; padding: 14px; border: 1px solid var(--tr-card-border, rgba(255,255,255,.12)); border-radius: 14px; background: var(--dr-panel, rgba(255,255,255,.03)); position: sticky; top: 64px; z-index: 5; backdrop-filter: blur(6px); }
.rv-search { display: flex; align-items: center; flex: 1 1 220px; min-width: 180px; }
.rv-search input { width: 100%; padding: 9px 12px; border-radius: 999px; border: 1px solid var(--tr-card-border, rgba(255,255,255,.18)); background: transparent; color: inherit; font-size: .92rem; }
.rv-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.rv-filter { display: flex; flex-wrap: wrap; gap: 6px; }
.rv-filter button { padding: 7px 12px; border-radius: 999px; border: 1px solid var(--tr-card-border, rgba(255,255,255,.18)); background: transparent; color: inherit; font-size: .84rem; cursor: pointer; }
.rv-filter button[aria-pressed="true"] { background: var(--tr-accent-ink, #70efb0); color: #06251a; border-color: transparent; font-weight: 700; }
.rv-count { margin: 0 0 0 auto; font-size: .82rem; opacity: .7; white-space: nowrap; }

.rv-brands { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 22px; }
.rv-brands a { padding: 6px 12px; border-radius: 999px; border: 1px solid var(--tr-card-border, rgba(255,255,255,.14)); font-size: .82rem; text-decoration: none; }
.rv-brands a:hover { border-color: var(--tr-accent-ink, #70efb0); }

.rv-table td:nth-child(1) { font-weight: 650; white-space: normal; }
.rv { display: inline-block; padding: 3px 10px; border-radius: 999px; font: 700 .76rem/1.3 inherit; letter-spacing: .01em; white-space: nowrap; }
.rv--easy { background: rgba(112,239,176,.16); color: #1f9e63; }
.rv--moderate { background: rgba(125,216,236,.16); color: #0f7b96; }
.rv--hard { background: rgba(240,214,118,.18); color: #92700a; }
.rv--no { background: rgba(229,72,77,.14); color: #c0353a; }
html[data-color-mode="dark"] .rv--easy { color: #70efb0; }
html[data-color-mode="dark"] .rv--moderate { color: #7dd8ec; }
html[data-color-mode="dark"] .rv--hard { color: #f0d676; }
html[data-color-mode="dark"] .rv--no { color: #ff8a8d; }

.rv-guides { margin: -6px 0 16px; font-size: .88rem; opacity: .85; }
.rv-guides span { font-weight: 700; opacity: .7; margin-right: 4px; }
.rv-guides a { margin-right: 10px; }

.rv-empty { text-align: center; padding: 28px 12px; opacity: .8; }

.rv-table tbody tr[hidden] { display: none; }

@media (max-width: 640px) {
  .rv-tools { position: static; }
  .rv-count { margin-left: 0; flex-basis: 100%; }
}

.rv-filter-label { align-self: center; font: 700 .72rem/1 var(--font-mono, monospace); letter-spacing: .04em; text-transform: uppercase; opacity: .7; margin-right: 2px; }
.rv-romkey { font-size: .92rem; opacity: .9; }

.rv-table td:nth-child(3), .rv-table td:nth-child(4) { font-size: .86rem; }

/* DRVCAM card banner, mid-page: a slim card that follows the page theme */
.rv-drv { display: grid; grid-template-columns: minmax(0, 1fr) 120px; gap: 24px; align-items: center; margin: 36px 0; padding: 22px 26px; border-radius: 16px; background: var(--dr-panel, #fff); border: 1px solid var(--tr-card-border, #cadfd2); box-shadow: var(--tr-sh-1, none); overflow: hidden; }
.rv-drv-eyebrow { margin: 0 0 4px; font: 700 .72rem/1.3 var(--font-mono, monospace); letter-spacing: .08em; text-transform: uppercase; color: var(--tr-accent-ink, #08734d); }
.rv-drv .rv-drv-title { margin: 0 0 8px; font-size: 1.3rem; line-height: 1.25; font-weight: 800; color: var(--tr-head, inherit); }
.rv-drv-copy p { margin: 0 0 8px; font-size: .95rem; line-height: 1.55; }
.rv-drv-copy .rv-drv-actions { margin: 14px 0 0; }
.rv-drv a.rv-drv-btn { display: inline-flex; align-items: center; padding: 10px 18px; border-radius: 10px; background: var(--dr-accent, #08734d); color: var(--dr-on-accent, #fff) !important; font-weight: 700; font-size: .92rem; text-decoration: none !important; border: 0 !important; box-shadow: var(--tr-sh-btn, none); transition: transform .15s, background .15s; }
.rv-drv a.rv-drv-btn:hover { background: var(--tr-accent-hover, var(--dr-accent)); transform: translateY(-1px); }
.rv-drv a.rv-drv-shot { display: block; width: 120px; height: 150px; overflow: hidden; border-radius: 14px; border: 1px solid var(--tr-card-border, #cadfd2); text-decoration: none !important; }
.rv-drv-shot img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; }
@media (max-width: 560px) { .rv-drv { grid-template-columns: 1fr; padding: 20px; } .rv-drv a.rv-drv-shot { display: none; } }

/* column widths: keep rows compact so the long catalogue stays scannable */
.rv-table { table-layout: fixed; width: 100%; }
.rv-table th:nth-child(1) { width: 22%; }
.rv-table th:nth-child(2) { width: 12%; }
.rv-table th:nth-child(3) { width: 28%; }
.rv-table th:nth-child(4) { width: 38%; }
.rv-table td { vertical-align: top; overflow-wrap: break-word; hyphens: auto; line-height: 1.4; padding-top: 9px; padding-bottom: 9px; }
@media (max-width: 760px) {
  .rv-table th:nth-child(1) { width: 30%; }
  .rv-table th:nth-child(2) { width: 18%; }
  .rv-table th:nth-child(3), .rv-table th:nth-child(4) { width: 26%; }
  .rv-table td { font-size: .84rem; padding-left: 6px; padding-right: 6px; }
}

.rv-drv .rv-drv-title { margin: 0 0 12px; line-height: 1.15; }
.rv-drv a.rv-drv-primary { text-decoration: none; color: #06251a; }
.rv-drv-copy p { line-height: 1.55; }

.rv-drv a.rv-drv-primary { text-decoration: none !important; border-bottom: 0 !important; box-shadow: none !important; color: #06251a !important; background: #8cf0c0 !important; }
.rv-drv .rv-drv-facts { margin: 16px 0 0 !important; padding: 0 !important; list-style: none !important; }
.rv-drv .rv-drv-facts li { margin: 0 !important; }
.rv-drv a.rv-drv-shot { text-decoration: none !important; border-bottom: 0 !important; }

.rv-tools { display: flex; flex-direction: column; align-items: stretch; gap: 10px; }
.rv-top { display: flex; align-items: center; gap: 14px; }
.rv-top .rv-search { flex: 1 1 auto; }
.rv-top .rv-count { margin: 0; flex: 0 0 auto; font-size: .82rem; opacity: .75; }
.rv-row { display: flex; align-items: center; gap: 12px; }
.rv-row .rv-filter-label { flex: 0 0 52px; margin: 0; }
@media (max-width: 640px) { .rv-top { flex-wrap: wrap; } .rv-row { align-items: flex-start; flex-direction: column; gap: 6px; } }
.rv-table th:nth-child(1) { width: 20%; }
.rv-table th:nth-child(2) { width: 15%; }
.rv-table th:nth-child(3) { width: 27%; }
.rv-table th:nth-child(4) { width: 38%; }
.rv-table td:nth-child(2) .rv { white-space: nowrap; font-size: .72rem; padding: 3px 8px; }
@media (max-width: 760px) { .rv-table th:nth-child(1) { width: 26%; } .rv-table th:nth-child(2) { width: 22%; } .rv-table th:nth-child(3), .rv-table th:nth-child(4) { width: 26%; } .rv-table td:nth-child(2) .rv { white-space: normal; } }
@media (max-width: 640px) { .rv-row .rv-filter-label { flex: none; } }
@media (max-width: 640px) { .rv-row .rv-filter-label { align-self: flex-start; } }

/* phones: each model becomes a stacked card so nothing is squeezed into a narrow column */
@media (max-width: 760px) {
  .rv-table, .rv-table tbody, .rv-table tr, .rv-table td { display: block; width: auto; }
  .rv-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .rv-table tbody tr { padding: 14px 4px; border-bottom: 1px solid var(--tr-card-border, rgba(128,128,128,.25)); }
  .rv-table tbody tr[hidden] { display: none; }
  .rv-table td { padding: 2px 12px; border: 0; font-size: .92rem; }
  .rv-table td:nth-child(1) { font-size: 1.02rem; padding-bottom: 6px; }
  .rv-table td:nth-child(2) { padding-bottom: 8px; }
  .rv-table td:nth-child(2) .rv { white-space: normal; font-size: .76rem; }
  .rv-table td:nth-child(3)::before, .rv-table td:nth-child(4)::before { content: attr(data-label); display: block; margin-top: 6px; font: 700 .68rem/1.3 var(--font-mono, monospace); letter-spacing: .05em; text-transform: uppercase; opacity: .6; }
}
@media (max-width: 760px) {
  .rv-table tbody tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 8px; align-items: start; }
  .rv-table tbody tr[hidden] { display: none; }
  .rv-table td:nth-child(3), .rv-table td:nth-child(4) { grid-column: 1 / -1; }
  .rv-table td { border: 0 !important; background: transparent !important; }
  .rv-table td:nth-child(2) { padding: 2px 12px 0 0; }
}
@media (max-width: 760px) {
  .rv-cards, .rv-cards tbody, .rv-cards tr, .rv-cards td { display: block; width: auto; }
  .rv-cards thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .rv-cards tbody tr { padding: 14px 4px; border-bottom: 1px solid var(--tr-card-border, rgba(128,128,128,.25)); }
  .rv-cards td { padding: 2px 12px; border: 0 !important; background: transparent !important; font-size: .92rem; overflow-wrap: break-word; }
  .rv-cards td:nth-child(1) { font-size: 1.02rem; font-weight: 700; padding-bottom: 4px; }
  .rv-cards td:not(:first-child)::before { content: attr(data-label); display: block; margin-top: 6px; font: 700 .68rem/1.3 var(--font-mono, monospace); letter-spacing: .05em; text-transform: uppercase; opacity: .6; }
}
.rv-search input { font-size: .85rem; text-overflow: ellipsis; }