/* Per-camera pages under /webcam/<vid>-<pid>. Shares style.css for the nav. */
.cam-page {
    max-width: 720px;
    margin: 0 auto;
    padding: 130px 24px 110px;
}
.back {
    display: inline-block;
    font-size: 0.82rem;
    color: rgba(255,255,255,0.45);
    text-decoration: none;
    margin-bottom: 26px;
}
.back::before { content: "← "; }
.back:hover { color: #fff; }

.cam-head-row { display: flex; gap: 24px; align-items: flex-start; margin-bottom: 22px; }
.cam-photo { margin: 0; flex: 0 0 190px; }
.cam-photo img {
    width: 190px; height: auto; border-radius: 10px; background: #fff;
    padding: 8px; box-sizing: border-box;
}
.cam-photo figcaption {
    margin-top: 7px; font-size: 0.68rem; line-height: 1.45;
    color: rgba(255,255,255,0.32);
}
.cam-photo figcaption a { color: rgba(255,255,255,0.5); }

.cam-page h1 {
    font-family: 'Outfit', sans-serif;
    font-size: clamp(1.6rem, 4vw, 2.4rem);
    font-weight: 800; letter-spacing: -0.03em; color: #fff;
    margin: 0 0 12px; line-height: 1.15;
}
.cam-page h1 span { display: block; font-weight: 600; color: rgba(255,255,255,0.62); }
.chips { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 14px; }
.verdict {
    font-size: 1.05rem; line-height: 1.55; color: #fff;
    font-weight: 500; margin: 0 0 10px;
}
.headline {
    font-size: 0.98rem; line-height: 1.6; color: rgba(255,255,255,0.9); margin: 0;
}
.lede { font-size: 0.95rem; line-height: 1.68; color: rgba(255,255,255,0.68); margin: 0 0 22px; }

.pill, .risk {
    display: inline-block; font-size: 0.73rem; font-weight: 600;
    padding: 4px 11px; border-radius: 999px; white-space: nowrap;
}
.pill.go    { background: rgba(52,199,89,0.15);  color: #5fe08c; border: 1px solid rgba(52,199,89,0.38); }
.pill.maybe { background: rgba(255,184,0,0.13);  color: #ffc94d; border: 1px solid rgba(255,184,0,0.32); }
.pill.no    { background: rgba(255,69,58,0.15);  color: #ff8a80; border: 1px solid rgba(255,69,58,0.38); }
.risk.bad  { background: rgba(255,69,58,0.16); color: #ff8a80; border: 1px solid rgba(255,69,58,0.34); }
.risk.warn { background: rgba(255,184,0,0.14); color: #ffc94d; border: 1px solid rgba(255,184,0,0.3); }
.risk.good { background: rgba(52,199,89,0.13); color: #52d980; border: 1px solid rgba(52,199,89,0.28); }
.risk.sold { background: rgba(255,255,255,0.05); color: rgba(255,255,255,0.42); border: 1px solid rgba(255,255,255,0.12); }

.buy, .regions {
    margin: 0 0 20px; padding: 16px 18px; border-radius: 10px;
    border: 1px solid rgba(90,160,255,0.24); background: rgba(90,160,255,0.06);
}
.regions { border-color: rgba(255,255,255,0.1); background: rgba(255,255,255,0.03); }
.buy > b, .regions > b {
    display: block; font-family: 'Outfit', sans-serif; font-size: 0.72rem;
    font-weight: 600; text-transform: uppercase; letter-spacing: 0.13em;
    color: rgba(255,255,255,0.5); margin-bottom: 11px;
}
.buy-links { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 9px; }
.buy-links a {
    font-size: 0.87rem; font-weight: 500; color: #fff; text-decoration: none;
    background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.14);
    border-radius: 8px; padding: 9px 15px; white-space: nowrap;
}
.buy-links a:hover { background: rgba(255,255,255,0.13); border-color: rgba(255,255,255,0.3); }
.buy-links a.primary { background: #fff; color: #0a0a0f; border-color: #fff; font-weight: 600; }
.buy-links a.primary:hover { background: rgba(255,255,255,0.88); }
.buy-note, .dim { font-size: 0.79rem; color: rgba(255,255,255,0.42); line-height: 1.55; }
.buy-note { display: block; }

.flags { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 9px; }
.flag {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 1.05rem; line-height: 1;
    background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12);
    border-radius: 999px; padding: 5px 11px 5px 9px;
}
.flag i {
    font-style: normal; font-size: 0.76rem; font-weight: 500;
    color: rgba(255,255,255,0.66);
}

.cam-facts { display: grid; grid-template-columns: 210px 1fr; gap: 0; margin: 0 0 30px; }
.cam-facts dt {
    padding: 12px 0; font-size: 0.82rem; color: rgba(255,255,255,0.42);
    border-top: 1px solid rgba(255,255,255,0.07);
}
.cam-facts dd {
    padding: 12px 0; margin: 0; font-size: 0.9rem; color: rgba(255,255,255,0.85);
    border-top: 1px solid rgba(255,255,255,0.07); line-height: 1.6; word-break: break-word;
}
.cam-facts .big { font-family: 'Outfit', sans-serif; font-size: 1.35rem; font-weight: 700; color: #fff; }
.cam-facts code {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.9em;
    background: rgba(255,255,255,0.07); border-radius: 4px; padding: 2px 7px; color: #fff;
}
.cam-facts a { color: #7fb4ff; }

.kin { margin: 0 0 30px; }
.kin > b {
    display: block; font-family: 'Outfit', sans-serif; font-size: 0.72rem;
    font-weight: 600; text-transform: uppercase; letter-spacing: 0.13em;
    color: rgba(255,255,255,0.4); margin-bottom: 12px;
}
.kin-list { display: grid; gap: 1px; background: rgba(255,255,255,0.07);
    border: 1px solid rgba(255,255,255,0.07); border-radius: 10px; overflow: hidden; }
.kin-list a {
    display: flex; align-items: baseline; gap: 12px;
    padding: 12px 15px; background: #0a0a0f; text-decoration: none;
}
.kin-list a:hover { background: rgba(255,255,255,0.045); }
.kin-list b { font-family: 'Outfit', sans-serif; font-size: 0.94rem; font-weight: 600;
    color: #fff; flex: 1; min-width: 0; }
.kin-list i { font-style: normal; font-size: 0.82rem; color: rgba(255,255,255,0.45);
    font-variant-numeric: tabular-nums; white-space: nowrap; }
.kin-go { font-size: 0.68rem; font-weight: 600; color: #5fe08c;
    background: rgba(52,199,89,0.13); border: 1px solid rgba(52,199,89,0.3);
    border-radius: 999px; padding: 3px 9px; white-space: nowrap; }

.foot {
    font-size: 0.88rem; line-height: 1.65; color: rgba(255,255,255,0.45);
    border-top: 1px solid rgba(255,255,255,0.07); padding-top: 20px;
}
.foot a { color: #fff; }

@media (max-width: 640px) {
    .cam-page { padding: 100px 20px 80px; }
    .cam-head-row { flex-direction: column; gap: 16px; }
    .cam-photo { flex: none; }
    .cam-facts { grid-template-columns: 1fr; }
    .cam-facts dt { padding-bottom: 2px; border-top: 1px solid rgba(255,255,255,0.07); }
    .cam-facts dd { padding-top: 2px; border-top: none; }
}