/* Content module: product pages, docs, pricing, status and their admin
   screens. Uses the tokens from site.css only. */

/* Hidden from people, visible to form-filling bots (spam check). */
.hp { position: absolute !important; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }

.hero-grid { display: grid; grid-template-columns: 1fr 1.05fr; gap: 48px; align-items: center; }
@media (max-width: 960px) { .hero-grid { grid-template-columns: 1fr; gap: 32px; } }
.hero-media { margin: 0; }
.hero .hero-note { color: var(--muted); font-size: 0.875rem; margin: 0; }
.section-head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; }
.section-head h2 { margin: 0; }
.section-head p { margin: 0; }

/* Application tiles */
.app-tile { padding: 0; overflow: hidden; }
.app-tile .tile-media { aspect-ratio: 16 / 10; background: #05080c; border-bottom: 1px solid var(--border); }
.app-tile .tile-media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.app-tile .tile-body { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.app-tile h3 { margin: 0; }
.app-tile p { margin: 0; color: var(--text-2); font-size: 0.94rem; }
.app-tile .more { margin-top: auto; color: var(--accent-2); font-weight: 600; font-size: 0.92rem; }
[data-theme="light"] .app-tile .more { color: var(--accent); }

/* Feature blocks */
.feature-row h2, .feature-row h3 { margin-top: 0; }
.feature-row .prose { max-width: none; }
.feature-card .prose { max-width: none; }
.feature-media { margin: 0; }
.feature-list > .feature-row + .feature-row { border-top: 1px solid var(--border); }

/* Hardware */
.hw-strip { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.hw-strip .chip strong { font-weight: 600; }
.hw-notes p:last-child { margin-bottom: 0; }

/* Pricing */
.plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; align-items: stretch; }
.plan .plan-name { margin: 0; font-size: 1.2rem; }
.plan .tagline { color: var(--text-2); margin: 0; }
.plan .term { color: var(--muted); font-size: 0.9rem; margin: 0; }
.plan .prose { font-size: 0.94rem; }
.plan .prose p:last-child { margin-bottom: 0; }
.compare td.yes { color: var(--ok); font-weight: 700; }
.compare td, .compare th { text-align: center; }
.compare td:first-child, .compare th:first-child { text-align: left; }
.price-note { color: var(--muted); font-size: 0.875rem; }
.coming { text-align: center; max-width: 640px; margin: 0 auto; }

/* Pages */
.page-hero { padding: 48px 0 24px; }
.page-hero .lead { max-width: 44em; }
.page-hero-media { margin: 24px 0 0; }
.notice { border-left: 3px solid var(--warn); }
.draft-banner { background: var(--warn-soft); border-bottom: 1px solid var(--border); padding: 8px 0; font-size: 0.92rem; }
.task-list ul { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; }
.task-list li { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px; }
.links-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }

/* News */
.post-list { display: grid; gap: 16px; }
.post-list .card h2 { font-size: 1.25rem; margin-bottom: 6px; }
.post-meta { color: var(--muted); font-size: 0.875rem; margin-bottom: 8px; }

/* Docs */
.docs-layout { display: grid; grid-template-columns: 240px minmax(0, 1fr) 200px; gap: 32px; align-items: start; padding: 32px 16px 48px; }
@media (max-width: 1100px) { .docs-layout { grid-template-columns: 220px minmax(0, 1fr); } .doc-toc { display: none; } }
@media (max-width: 760px) { .docs-layout { grid-template-columns: 1fr; } }
.docs-nav { position: sticky; top: 80px; display: grid; gap: 2px; font-size: 0.93rem; }
.docs-nav a { color: var(--text-2); padding: 5px 10px; border-radius: 8px; }
.docs-nav a:hover { background: var(--surface-2); text-decoration: none; color: var(--text); }
.docs-nav a.active { background: var(--accent-soft); color: var(--text); font-weight: 600; }
@media (max-width: 760px) { .docs-nav { position: static; } }
.doc-toc { position: sticky; top: 80px; font-size: 0.88rem; }
.doc-toc h2 { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted); }
.doc-toc ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.doc-toc a { color: var(--text-2); }
.doc-body kbd { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.85em; padding: 0.05em 0.4em; border: 1px solid var(--border-strong); border-bottom-width: 2px; border-radius: 5px; background: var(--surface); }
.doc-body table { display: block; overflow-x: auto; }
.version-picker { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 16px; }
.version-picker select { width: auto; }
.doc-contents-inline { display: none; }
@media (max-width: 1100px) { .doc-contents-inline { display: block; } }

/* Status */
.status-list { display: grid; gap: 10px; }
.status-row { display: flex; gap: 14px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.status-dot { display: inline-block; width: 12px; height: 12px; border-radius: 50%; background: var(--muted); margin-right: 8px; vertical-align: -1px; }
.status-ok .status-dot { background: var(--ok); }
.status-degraded .status-dot { background: var(--warn); }
.status-down .status-dot { background: var(--danger); }

/* Contact */
.contact-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 32px; align-items: start; }
@media (max-width: 860px) { .contact-grid { grid-template-columns: 1fr; } }

/* Admin */
.admin-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; align-items: start; }
@media (max-width: 1200px) { .admin-split { grid-template-columns: 1fr; } }
.preview-box { border: 1px dashed var(--border-strong); border-radius: 12px; padding: 16px; background: var(--bg); }
.media-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; }
.thumb { aspect-ratio: 16 / 10; background: #05080c; border-radius: 8px; overflow: hidden; border: 1px solid var(--border); margin-bottom: 10px; }
.thumb img { width: 100%; height: 100%; object-fit: contain; display: block; }
.thumb-sm { width: 120px; flex: 0 0 120px; margin: 0; }
.plan-admin { scroll-margin-top: 80px; }
.plan-admin .kv { font-size: 0.9rem; }
.bar-chart { width: 100%; height: auto; display: block; }
.bar-chart rect { fill: var(--accent); }
.bar-chart text { fill: var(--muted); font-size: 11px; }
.checks { display: flex; flex-wrap: wrap; gap: 8px 16px; }
.hw-strip h2 { margin: 0 6px 0 0; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted); }
.coming .row { justify-content: center; }
.steps { list-style: none; padding: 0; margin: 0; }
h2.h3 { font-size: 1.15rem; }
.ml-row { flex-wrap: nowrap; }
.ml-row input { flex: 1; width: auto; min-width: 0; }
@media (max-width: 420px) { .ml-row { flex-wrap: wrap; } }
article > .notice { max-width: 760px; }

/* Supported hardware: the colour key and the status tables. */
.hw-key { list-style: none; margin: 0 0 32px; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 10px 24px; }
.hw-key li { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; font-size: 0.92rem; }
.hw-table tbody th[scope="row"] { font-weight: 500; color: var(--text); font-size: inherit; text-transform: none; letter-spacing: normal; background: none; }
.hw-maker { font-weight: 700; }
.hw-table td:first-child { width: 1%; }