/* z-bitco.com — styles only this site uses. Everything shared (tokens, layout, components, header and footer)
   is in ZBit.UI's zbit.css; use its zb- classes and tokens here rather than new colors or spacing. */

/* Account slot in the header (js/account.js): "Sign in", or Clerk's avatar menu once signed in */
.account { display: flex; align-items: center; min-width: 32px; min-height: 32px; }
.account-user { display: flex; align-items: center; }

/* Home: podcast feature */
.podcast img { width: 260px; }

/* OSDP Bench: store badges */
.store-badge { display: inline-block; line-height: 0; border-radius: var(--zb-radius-sm); }
.store-badge img { height: 48px; width: auto; display: block; }
.store-badge:hover img { opacity: 0.85; }

/* About */
.mission h1 { max-width: 860px; }
.mission h1 { font-size: clamp(2rem, 4.2vw, 3rem); }
.founder { grid-template-columns: 180px minmax(0, 1fr); max-width: 900px; margin-bottom: 48px; }
.founder p { color: var(--zb-text-muted); }
.portrait { width: 180px; border-radius: 14px; border: 1px solid var(--zb-border); display: block; }
@media (max-width: 900px) {
    .founder { grid-template-columns: 1fr; }
}

/* OSDP.Net: member downloads (js/downloads.js) */
.zb-card .downloads { list-style: none; margin: auto 0 0; padding: 10px 0 0; display: flex; flex-wrap: wrap; gap: 8px; }
.zb-card .downloads li { margin: 0; }
.release { font-family: var(--zb-font-mono); font-size: 0.78rem; margin-bottom: 8px; }
.download {
    font: 500 0.82rem var(--zb-font-mono); padding: 7px 12px; border-radius: var(--zb-radius-sm); cursor: pointer;
    background: var(--zb-bg-sunken); border: 1px solid var(--zb-border); color: var(--zb-text);
    transition: border-color 0.15s, color 0.15s;
}
.download::before { content: "\2193  "; color: var(--zb-accent); }
.download:hover { border-color: var(--zb-accent); color: var(--zb-accent); }
.download:disabled { opacity: 0.6; cursor: progress; }
.member-status { margin: 0 0 20px; color: var(--zb-text-muted); }
.checksums { margin-top: 24px; }
.checksums td code { font-size: 0.8rem; font-weight: 400; color: var(--zb-text); }

/* Capture analyzer (js/capture-analyzer.js) */
.analyzer { max-width: 820px; }
.analyzer-quota { color: var(--zb-text-muted); font-size: 0.9rem; }
.analyzer-note { max-width: 820px; margin-top: 28px; color: var(--zb-text-muted); font-size: 0.92rem; }
.analysis { margin-top: 48px; scroll-margin-top: 90px; }
.analysis-head h2 { overflow-wrap: anywhere; }
.analysis-head .zb-tags { margin-bottom: 28px; gap: 8px; }
.conversation { display: flex; flex-direction: column; gap: 24px; }
.turn-question { align-self: flex-end; max-width: 85%; background: var(--zb-bg-sunken); border: 1px solid var(--zb-border); border-radius: var(--zb-radius); padding: 12px 16px; white-space: pre-wrap; }
.turn-answer h3, .turn-answer h4, .turn-answer h5 { margin-top: 1.4em; }
.turn-answer > :first-child { margin-top: 0; }
.turn-answer ul, .turn-answer ol { padding-left: 1.3em; margin: 0 0 1em; }
.turn-answer li { margin-bottom: 6px; }
.turn-answer pre { background: var(--zb-bg-sunken); border: 1px solid var(--zb-border); border-radius: var(--zb-radius-sm); padding: 12px 14px; overflow-x: auto; font-size: 0.82rem; }
.turn-answer pre code { background: none; border: 0; padding: 0; }
.turn-answer .zb-table-wrap { margin: 0 0 1em; }
.turn-answer .zb-table-wrap td:first-child { white-space: normal; }
.turn-answer .zb-table-wrap th, .turn-answer .zb-table-wrap td { padding: 10px 12px; font-size: 0.92rem; }
.turn-answer hr { border: 0; border-top: 1px solid var(--zb-border); margin: 1.5em 0; }
.follow-up { margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--zb-border); display: flex; flex-direction: column; gap: 14px; }
.follow-up .zb-actions { margin-top: 0; }

/* Mock virtual reader (Home hero, Shared/_VirtualReader.cshtml) — styled after the osdp-mcp virtual reader */
.vr { margin: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 20px; align-items: start; min-width: 0; }
.vr-device { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.vr-bezel {
    width: 240px; padding: 10px; border-radius: 22px;
    background: linear-gradient(150deg, #f1f3f6 0%, #c5ccd6 38%, #9aa3b0 100%);
    box-shadow: 0 1px 0 rgba(255,255,255,.7) inset, 0 -2px 6px rgba(0,0,0,.25) inset, 0 30px 60px rgba(0,0,0,.55);
}
.vr-face {
    border-radius: 14px; padding: 22px 18px 20px;
    background: radial-gradient(120% 60% at 50% -10%, #20242b 0%, #0c0e12 55%), #0a0c10;
    box-shadow: 0 2px 8px rgba(0,0,0,.6) inset, 0 0 0 1px #000 inset;
}
.vr-top { position: relative; display: flex; justify-content: center; align-items: center; margin: 2px 0 10px; }
.vr-led { width: 50%; height: 12px; border-radius: 8px; background: #11151c; box-shadow: 0 0 0 1px rgba(0,0,0,.6) inset; transition: background .12s, box-shadow .12s; }
.vr-led.lit { background: var(--c); box-shadow: 0 0 14px 2px var(--c), 0 0 32px 6px color-mix(in srgb, var(--c) 55%, transparent), 0 0 0 1px rgba(255,255,255,.25) inset; }
.vr-buzzer { position: absolute; right: 0; top: 50%; transform: translateY(-50%); width: 22px; height: 22px; color: rgba(220,226,236,.3); transition: color .08s, filter .08s; }
.vr-buzzer svg { width: 100%; height: 100%; }
.vr-buzzer.sounding { color: #ffd34d; filter: drop-shadow(0 0 8px #ffd34d); }
.vr-pin { height: 18px; margin-bottom: 8px; text-align: center; letter-spacing: 6px; color: #eef1f6; font-size: 14px; }
.vr-keypad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px 6px; }
.vr-key {
    appearance: none; background: transparent; border: 0; border-radius: 10px; padding: 5px 0;
    font: 300 22px/1.2 var(--zb-font-body); color: rgba(226,230,238,.8); text-shadow: 0 1px 1px rgba(0,0,0,.8);
    cursor: pointer; user-select: none; transition: background .08s, transform .05s, color .08s;
}
.vr-key:hover { background: rgba(255,255,255,.06); }
.vr-key:active, .vr-key.pressed { background: rgba(61,220,151,.18); color: #fff; transform: scale(.94); }
.vr-status { display: flex; gap: 8px; }
.vr-badge, .vr-poll { font-size: 12px; padding: 3px 10px; border-radius: 999px; border: 1px solid #1f5138; color: #6ee7a8; background: rgba(12,15,21,.65); }
.vr-poll { display: inline-flex; align-items: center; gap: 6px; }
.vr-poll::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #2fd27a; box-shadow: 0 0 8px #2fd27a; animation: vr-pulse 1.2s ease-in-out infinite; }
@keyframes vr-pulse { 50% { opacity: .3; } }
.vr-controls { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.vr-btn { font: 500 13px var(--zb-font-body); color: #cfd6e2; background: var(--zb-night-3); border: 1px solid var(--zb-night-line); border-radius: 999px; padding: 6px 16px; cursor: pointer; }
.vr-btn:hover { border-color: var(--zb-signal); }
.vr-btn.flash { color: #6ee7a8; border-color: #1f5138; background: rgba(110,231,168,.14); }
.vr-hint { font-size: 12px; color: var(--zb-on-night-muted); }
.vr-hint b { color: var(--zb-on-night); font-weight: 500; }
.vr-log { align-self: stretch; background: var(--zb-night-2); border: 1px solid var(--zb-night-line); border-radius: var(--zb-radius); overflow: hidden; display: flex; flex-direction: column; min-height: 300px; }
.vr-log-head { padding: 9px 12px; border-bottom: 1px solid var(--zb-night-line); background: var(--zb-night-3); font-size: 0.75rem; color: var(--zb-on-night-muted); }
.vr-lines { list-style: none; margin: 0; padding: 10px 12px; font-size: 0.74rem; line-height: 1.75; display: flex; flex-direction: column; justify-content: flex-end; flex: 1; }
.vr-lines li { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; animation: vr-in .25s ease-out; }
.vr-lines .dir { color: var(--zb-on-night-muted); white-space: pre; }
.vr-lines .from-pd .msg { color: var(--zb-syn-type); }
.vr-lines .from-acu .msg { color: var(--zb-signal); }
.vr-lines .detail { color: var(--zb-syn-value); }
@keyframes vr-in { from { opacity: 0; transform: translateY(4px); } }
.vr-caption { grid-column: 1 / -1; font-size: 0.72rem; color: var(--zb-on-night-muted); }
@media (max-width: 640px) {
    .vr { grid-template-columns: 1fr; }
    .vr-log { min-height: 0; }
    .vr-lines { min-height: 150px; }
}