/* Detail pages, new design (BR Stage 2: PagePlatform, PageProject). Tokens and components from Stage 1. */

.ci-detail { background: var(--ci-paper); padding: var(--ci-s5) 0 calc(var(--ci-s9) + 64px); }
.ci-crumbs { display: flex; gap: var(--ci-s2); flex-wrap: wrap; font: var(--ci-small); color: var(--ci-muted); margin-bottom: var(--ci-s4); }
.ci-crumbs a { color: var(--ci-forest); }

/* Hero */
.ci-phero { background: var(--ci-surface); border: 1px solid var(--ci-line); border-radius: var(--ci-r-panel); padding: var(--ci-s6); margin-bottom: var(--ci-s6); }
.ci-phero__who { display: flex; gap: var(--ci-s4); align-items: center; }
.ci-logo--lg { width: 64px; height: 64px; font-size: 22px; flex: none; }
.ci-phero__name { font: var(--ci-h1); font-weight: 600; color: var(--ci-ink); margin: 0; }
.ci-phero__line { margin: var(--ci-s1) 0 0; color: var(--ci-muted); font: var(--ci-small); }
.ci-phero__line strong { color: var(--ci-ink); }
.ci-phero__intro { font: var(--ci-body-l); color: var(--ci-ink); max-width: 72ch; margin: var(--ci-s4) 0 0; }
.ci-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--ci-s4); margin: var(--ci-s5) 0 0; }
.ci-fact { background: var(--ci-paper); border-radius: var(--ci-r-card); padding: var(--ci-s4); margin: 0; }
.ci-fact dt { font: var(--ci-caption); font-weight: 600; color: var(--ci-muted); text-transform: uppercase; letter-spacing: .04em; }
.ci-fact dd { margin: var(--ci-s2) 0 0; }
.ci-fact__value { font: var(--ci-h3); color: var(--ci-ink); }
.ci-fact__note { font: var(--ci-caption); color: var(--ci-muted); }
.ci-phero__badges { display: flex; flex-wrap: wrap; gap: var(--ci-s2); list-style: none; padding: 0; margin: var(--ci-s4) 0 0; }
.ci-risk-line { font: var(--ci-caption); color: var(--ci-muted); margin: var(--ci-s4) 0 0; }
.ci-risk-line--alone { margin: calc(-1 * var(--ci-s2)) 0 var(--ci-s5); }

/* Main column and rail */
.ci-detail__layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: var(--ci-s6); align-items: start; }
.ci-detail__main { min-width: 0; }
.ci-secmenu { position: sticky; top: 0; z-index: 5; display: flex; gap: var(--ci-s4); overflow-x: auto; background: var(--ci-paper); border-bottom: 1px solid var(--ci-line); padding: var(--ci-s3) 0; margin-bottom: var(--ci-s5); scrollbar-width: none; }
.ci-secmenu a { white-space: nowrap; color: var(--ci-muted); font: var(--ci-small); font-weight: 500; text-decoration: none; padding-bottom: 2px; border-bottom: 2px solid transparent; }
.ci-secmenu a[aria-current="true"], .ci-secmenu a:hover { color: var(--ci-forest); border-bottom-color: var(--ci-forest); }

.ci-dsec { background: var(--ci-surface); border: 1px solid var(--ci-line); border-radius: var(--ci-r-panel); padding: var(--ci-s6); margin-bottom: var(--ci-s5); scroll-margin-top: 64px; }
.ci-dsec h2 { font: var(--ci-h2); font-weight: 600; color: var(--ci-ink); margin: 0 0 var(--ci-s4); }
.ci-dsec h3 { font: var(--ci-body); font-weight: 600; color: var(--ci-ink); margin: 0 0 var(--ci-s2); }
.ci-dsec__sub { margin-top: var(--ci-s5) !important; }
.ci-dsec__meta { font: var(--ci-caption); color: var(--ci-muted); margin: 0 0 var(--ci-s3); }

.ci-levels { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--ci-s4); margin-bottom: var(--ci-s5); }
.ci-levels__item p { font: var(--ci-small); color: var(--ci-muted); margin: var(--ci-s2) 0 0; }

.ci-rows { margin: 0; }
.ci-rows > div { display: grid; grid-template-columns: minmax(140px, 220px) 1fr; gap: var(--ci-s4); padding: var(--ci-s3) 0; border-top: 1px solid var(--ci-line); }
.ci-rows > div:first-child { border-top: 0; }
.ci-rows dt { font: var(--ci-small); font-weight: 500; color: var(--ci-muted); }
.ci-rows dd { margin: 0; font: var(--ci-body); color: var(--ci-ink); }
.ci-rows dd span { display: block; font: var(--ci-small); color: var(--ci-muted); margin-top: 2px; }
.ci-fees { list-style: none; padding: 0; margin: 0; }
.ci-fees li + li { margin-top: var(--ci-s1); }
.ci-fees span { display: inline !important; }

.ci-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--ci-s4); margin: 0 0 var(--ci-s3); }
.ci-stats > div { display: flex; flex-direction: column; }
.ci-stats dd { margin: 0; font: var(--ci-h2); font-weight: 600; color: var(--ci-forest); }
.ci-stats dt { font: var(--ci-small); color: var(--ci-muted); }

.ci-proscons { display: grid; grid-template-columns: 1fr 1fr; gap: var(--ci-s5); }
.ci-proscons ul { list-style: none; padding: 0; margin: 0; }
.ci-proscons li { position: relative; padding-left: 22px; margin-bottom: var(--ci-s2); font: var(--ci-body); color: var(--ci-ink); }
.ci-proscons__pros li::before { content: "✓"; position: absolute; left: 0; color: var(--ci-level-1-text); font-weight: 600; }
.ci-proscons__cons li::before { content: "–"; position: absolute; left: 0; color: var(--ci-level-5-text); font-weight: 600; }

.ci-how { display: grid; gap: var(--ci-s5); }
.ci-richtext { font: var(--ci-body); color: var(--ci-ink); overflow-wrap: anywhere; }
.ci-richtext h2, .ci-richtext h3 { font: var(--ci-h3); margin: var(--ci-s4) 0 var(--ci-s2); }
.ci-richtext img { max-width: 100%; height: auto; }

.ci-rail { position: sticky; top: var(--ci-s4); }
.ci-rail__box { background: var(--ci-surface); border: 1px solid var(--ci-line); border-radius: var(--ci-r-panel); padding: var(--ci-s5); display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--ci-s3); }
.ci-rail__name { font: var(--ci-h3); color: var(--ci-ink); margin: 0; }
.ci-rail__facts { font: var(--ci-small); color: var(--ci-muted); margin: 0; }
.ci-rail__box .ci-rail__visit { width: 100%; justify-content: center; white-space: normal; text-align: center; height: auto; min-height: 52px; padding: 10px 20px; }
.ci-rail__bonus { margin: 0; font: var(--ci-small); font-weight: 500; }
.ci-rail__bonus a { color: var(--ci-warn-text); }
.ci-rail__box .ci-rail__ai { width: 100%; justify-content: center; white-space: normal; text-align: center; height: auto; }
.ci-rail__prompts { display: flex; flex-wrap: wrap; gap: var(--ci-s2); }
.ci-rail__share { display: inline-flex; gap: var(--ci-s2); align-items: center; background: none; border: 0; padding: 0; cursor: pointer; justify-self: start; }

/* PR 2: AI overview, media, cards, FAQ, reviews */
.ci-dsec__head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ci-s3); margin-bottom: var(--ci-s4); }
.ci-dsec__head h2 { margin: 0; }
.ci-dsec__head .ci-btn { margin-left: auto; }
.ci-dsec__head .ci-dsec__meta { margin: 0; }
.ci-dsec--ai { border-color: var(--ci-clay-light); }
.ci-dsec__more { display: inline-block; margin-top: var(--ci-s4); }
.ci-fold { border-top: 1px solid var(--ci-line); padding: var(--ci-s3) 0; }
.ci-fold summary { cursor: pointer; font: var(--ci-body); font-weight: 600; color: var(--ci-ink); list-style-position: outside; }
.ci-fold[open] summary { margin-bottom: var(--ci-s3); }
.ci-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--ci-s4); }
.ci-media { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--ci-s3); }
.ci-media img, .ci-media iframe { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border: 0; border-radius: var(--ci-r-card); background: var(--ci-skeleton); }

.ci-stars { color: var(--ci-line); letter-spacing: 1px; }
.ci-stars .is-on { color: var(--ci-star); }
.ci-rating { display: grid; grid-template-columns: 200px 1fr; gap: var(--ci-s5); margin-bottom: var(--ci-s5); }
.ci-rating__total { display: grid; gap: var(--ci-s1); align-content: start; }
.ci-rating__total strong { font: var(--ci-display); color: var(--ci-ink); }
.ci-rating__total > span:last-child { font: var(--ci-small); color: var(--ci-muted); }
.ci-rating__parts { margin: 0; display: grid; gap: var(--ci-s2); }
.ci-rating__parts > div { display: grid; grid-template-columns: 180px 1fr; gap: var(--ci-s3); align-items: center; }
.ci-rating__parts dt { font: var(--ci-small); color: var(--ci-muted); }
.ci-rating__parts dd { margin: 0; display: flex; align-items: center; gap: var(--ci-s2); font: var(--ci-small); color: var(--ci-ink); }
.ci-bar { flex: 1; height: 6px; border-radius: var(--ci-r-pill); background: var(--ci-track); overflow: hidden; }
.ci-bar > span { display: block; height: 100%; background: var(--ci-forest); }
.ci-reviews__tools { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--ci-s3); margin-bottom: var(--ci-s3); }
.ci-reviews__stars { display: flex; flex-wrap: wrap; gap: var(--ci-s2); }
.ci-reviews__stars [aria-pressed="true"] { background: var(--ci-deep-forest); color: var(--ci-paper); }
.ci-reviews__sort { display: flex; align-items: center; gap: var(--ci-s2); font: var(--ci-small); color: var(--ci-muted); }
.ci-reviews__sort select { font: var(--ci-small); border: 1px solid var(--ci-field-border); border-radius: var(--ci-r-field); padding: 6px 10px; background: var(--ci-surface); }
.ci-reviews { list-style: none; padding: 0; margin: 0 0 var(--ci-s4); }
.ci-review { border-top: 1px solid var(--ci-line); padding: var(--ci-s4) 0; }
.ci-review p { margin: var(--ci-s2) 0; font: var(--ci-body); color: var(--ci-ink); overflow-wrap: anywhere; }
.ci-review p.is-folded { display: -webkit-box; -webkit-line-clamp: 8; -webkit-box-orient: vertical; overflow: hidden; }
.ci-review__more { background: none; border: 0; padding: 0; margin-bottom: var(--ci-s2); cursor: pointer; }
.ci-review__who { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ci-s2); font: var(--ci-small); }
.ci-review__date { color: var(--ci-muted); }
.ci-review__votes { display: flex; gap: var(--ci-s4); font: var(--ci-small); }
.ci-review__votes button { background: none; border: 0; padding: 0; cursor: pointer; }
.ci-review--empty { color: var(--ci-muted); font: var(--ci-body); }
.ci-avatar { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--ci-mint); color: var(--ci-forest); font: var(--ci-caption); font-weight: 600; }
.ci-review-dialog form { display: grid; gap: var(--ci-s3); }
.ci-stars-input { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: var(--ci-s2); align-items: center; }
.ci-stars-input legend { font: var(--ci-small); font-weight: 600; color: var(--ci-ink); margin-bottom: var(--ci-s1); width: 100%; }
.ci-stars-input label { position: relative; }
.ci-stars-input input { position: absolute; opacity: 0; }
.ci-stars-input span { display: inline-block; padding: 4px 10px; border: 1px solid var(--ci-field-border); border-radius: var(--ci-r-pill); font: var(--ci-small); cursor: pointer; }
.ci-stars-input input:checked + span { background: var(--ci-deep-forest); color: var(--ci-paper); border-color: var(--ci-deep-forest); }
.ci-stars-input input:focus-visible + span { outline: 2px solid var(--ci-focus-ring); outline-offset: 2px; }
.ci-field-label { font: var(--ci-small); font-weight: 600; }

@media (max-width: 640px) {
    .ci-rating, .ci-rating__parts > div { grid-template-columns: 1fr; }
}

/* Project page (Stage 2, PR 3) */
.ci-closed { background: var(--ci-warn-tint); color: var(--ci-warn-text); border-radius: var(--ci-r-card); padding: var(--ci-s3) var(--ci-s4); font: var(--ci-small); margin: 0 0 var(--ci-s4); }
.ci-jhero { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--ci-s6); background: var(--ci-surface); border: 1px solid var(--ci-line); border-radius: var(--ci-r-panel); padding: var(--ci-s5); margin-bottom: var(--ci-s6); }
.ci-jhero__media { position: relative; }
.ci-jhero__media img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--ci-r-card); display: block; }
.ci-jhero__count { position: absolute; left: var(--ci-s3); bottom: var(--ci-s3); }
/* Project gallery (board PageProject): the item shown, "1 / n", thumbnails; videos play in place */
.ci-gallery { position: relative; display: grid; gap: var(--ci-s2); }
.ci-gallery .ci-jhero__count { top: var(--ci-s3); bottom: auto; }
.ci-gallery__stage { position: relative; aspect-ratio: 16 / 9; border-radius: var(--ci-r-card); overflow: hidden; background: var(--ci-moss); }
.ci-gallery__stage img { width: 100%; height: 100%; object-fit: cover; border-radius: 0; }
.ci-gallery__stage iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.ci-gallery__play { position: absolute; inset: 0; width: 100%; padding: 0; border: 0; background: var(--ci-deep-forest); cursor: pointer; }
.ci-gallery__play span, .ci-gallery__mark { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: rgba(18, 51, 38, .8); color: var(--ci-paper); }
.ci-gallery__play span { width: 64px; height: 64px; font-size: 24px; }
.ci-gallery__thumbs { display: flex; gap: var(--ci-s2); list-style: none; margin: 0; padding: 0; overflow-x: auto; scrollbar-width: thin; }
.ci-gallery__thumbs button { position: relative; flex: none; width: 96px; height: 64px; padding: 0; border: 2px solid transparent; border-radius: 10px; overflow: hidden; background: var(--ci-moss); cursor: pointer; }
.ci-gallery__thumbs button[aria-current="true"] { border-color: var(--ci-forest); }
.ci-gallery__thumbs img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: auto; border-radius: 0; }
.ci-gallery__mark { width: 28px; height: 28px; font-size: 12px; }
.ci-jhero__logo { display: grid; place-items: center; aspect-ratio: 16 / 9; border-radius: var(--ci-r-card); background: var(--ci-logo-tile); font: var(--ci-display); color: var(--ci-forest); }
.ci-jhero__logo img { width: 120px; height: 120px; object-fit: contain; aspect-ratio: auto; }
.ci-jhero__tags { display: flex; flex-wrap: wrap; gap: var(--ci-s2); margin: 0 0 var(--ci-s3); }
.ci-facts--plain { margin-top: 0; }
.ci-answers { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--ci-s4); }
.ci-answer { background: var(--ci-paper); border-radius: var(--ci-r-card); padding: var(--ci-s4); }
.ci-answer h3 { font: var(--ci-small); font-weight: 600; color: var(--ci-muted); margin: 0 0 var(--ci-s2); }
.ci-answer__a { font: var(--ci-h3); color: var(--ci-ink); margin: 0; }
.ci-answer__note { font: var(--ci-small); color: var(--ci-muted); margin: var(--ci-s2) 0 0; }
.ci-docs { list-style: none; padding: 0; margin: 0; }
.ci-docs li { display: flex; flex-wrap: wrap; gap: var(--ci-s2); align-items: center; padding: var(--ci-s3) 0; border-top: 1px solid var(--ci-line); }
.ci-docs li:first-child { border-top: 0; }
.ci-docs a { color: var(--ci-forest); font: var(--ci-body); font-weight: 500; }
.ci-docs li > span { font: var(--ci-small); color: var(--ci-muted); }
.ci-rail__visit[disabled] { background: var(--ci-disabled-text); border-color: transparent; cursor: not-allowed; }
@media (max-width: 960px) { .ci-jhero { grid-template-columns: 1fr; } }

/* Project page AI and people (Stage 2, PR 4) */
.ci-ai-score__line { font: var(--ci-body); color: var(--ci-ink); margin: 0; }
.ci-ai-lock { display: grid; gap: var(--ci-s2); justify-items: start; border-top: 1px dashed var(--ci-clay-light); margin-top: var(--ci-s4); padding-top: var(--ci-s4); }
.ci-ai-lock[hidden] { display: none; }
.ci-ai-lock p { margin: 0; font: var(--ci-small); color: var(--ci-muted); }
.ci-chat__log { display: grid; gap: var(--ci-s2); max-height: 380px; overflow-y: auto; margin-bottom: var(--ci-s3); }
.ci-chat__log:empty { display: none; }
.ci-chat__preparing p { margin: 0 0 var(--ci-s2); }
/* ChatProject board (8 Nov): documents beside the chat, the source under each answer, Copy / Try again / Helpful? */
.ci-pchat { display: grid; gap: var(--ci-s5); }
.ci-pchat--docs { grid-template-columns: minmax(220px, 280px) 1fr; }
.ci-pchat__main { min-width: 0; }
.ci-pchat__docs h3 { margin: 0 0 var(--ci-s2); font: var(--ci-small); font-weight: 600; }
.ci-pchat__list { list-style: none; margin: 0 0 var(--ci-s3); padding: 0; display: grid; gap: var(--ci-s2); }
.ci-pchat__list li { display: flex; justify-content: space-between; align-items: center; gap: var(--ci-s2); padding: var(--ci-s2) var(--ci-s3);
    border: 1px solid var(--ci-line); border-radius: var(--ci-r-card); background: var(--ci-surface); }
.ci-pchat__doc { display: grid; min-width: 0; font: var(--ci-small); }
.ci-pchat__doc strong { overflow-wrap: anywhere; }
.ci-pchat__doc small { color: var(--ci-muted); font: var(--ci-caption); }
.ci-chat__source { justify-self: start; margin: calc(-1 * var(--ci-s1)) 0 0; font: var(--ci-caption); color: var(--ci-muted); }
.ci-chat__log .ci-chat__tools { justify-self: start; display: flex; flex-wrap: wrap; align-items: center; gap: var(--ci-s2); font: var(--ci-caption); color: var(--ci-muted); }
.ci-chat__log .ci-chat__tools button { min-height: 32px; padding: 0 var(--ci-s3); border: 1px solid var(--ci-line); border-radius: var(--ci-r-pill);
    background: var(--ci-surface); font: inherit; color: var(--ci-ink); cursor: pointer; }
.ci-chat__log .ci-chat__tools button[aria-pressed="true"] { background: var(--ci-moss); border-color: var(--ci-moss); }
@media (max-width: 760px) { .ci-pchat--docs { grid-template-columns: 1fr; } .ci-pchat__docs { order: 2; } }  /* phones: the chat first */
.ci-chat__msg { padding: var(--ci-s2) var(--ci-s3); border-radius: var(--ci-r-card); font: var(--ci-small); white-space: pre-wrap; max-width: 85%; }
.ci-chat__msg--you { justify-self: end; background: var(--ci-deep-forest); color: var(--ci-paper); }
.ci-chat__msg--ai { justify-self: start; background: var(--ci-clay-tint); color: var(--ci-ink); }
.ci-chat__msg--error { background: var(--ci-error-tint); color: var(--ci-error-text); }
.ci-chat__form { display: grid; grid-template-columns: 1fr auto; gap: var(--ci-s2); align-items: end; margin-top: var(--ci-s3); }
.ci-people__form { display: grid; gap: var(--ci-s3); max-width: 560px; }
.ci-people__votes { display: flex; gap: var(--ci-s2); flex-wrap: wrap; }
.ci-people__votes label { position: relative; }
.ci-people__votes input { position: absolute; opacity: 0; }
.ci-people__votes span { display: inline-block; padding: 6px 14px; border: 1px solid var(--ci-field-border); border-radius: var(--ci-r-pill); font: var(--ci-small); cursor: pointer; }
.ci-people__votes input:checked + span { background: var(--ci-deep-forest); color: var(--ci-paper); border-color: var(--ci-deep-forest); }
.ci-people__votes input:focus-visible + span { outline: 2px solid var(--ci-focus-ring); outline-offset: 2px; }
.ci-people__counts { font: var(--ci-body); margin: 0 0 var(--ci-s2); }

.ci-visitbar { display: none; }

@media (max-width: 960px) {
    .ci-detail__layout { grid-template-columns: 1fr; }
    .ci-rail { position: static; order: -1; }
    .ci-rail .ci-rail__visit, .ci-rail .ci-rail__name, .ci-rail .ci-rail__facts, .ci-rail .ci-card__ref { display: none; }
    .ci-visitbar { display: grid; gap: 2px; position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; background: var(--ci-surface); border-top: 1px solid var(--ci-line); padding: var(--ci-s3) var(--ci-gutter); box-shadow: var(--ci-shadow-float); }
    .ci-visitbar .ci-btn { justify-content: center; }
    .ci-visitbar .ci-card__ref { text-align: center; margin: 0; }
    body:has(.ci-visitbar) .ci-ai__fab { bottom: 96px; }  /* the AI button sits above the visit bar */
}

@media (max-width: 640px) {
    .ci-phero, .ci-dsec { padding: var(--ci-s4); }
    .ci-rows > div { grid-template-columns: 1fr; gap: var(--ci-s1); }
    .ci-proscons { grid-template-columns: 1fr; }
}