/* browsecoverage.css
 *
 * Browse Coverage. Small on purpose, like css/members.css: the panel, the pager,
 * the count line and the empty state are the Library's .mk- rules, and the
 * Scoring Summary box, the conclusions and the verdict colours are the report's
 * own .cv- rules out of css/ai-logline.css. What is here is only the card that
 * holds them.
 */

/* One column. A card is a scoreboard and a paragraph, and neither survives
   being squeezed into a third of the width. */
.bc-wall {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin: 12px 0;
}

.bc-card {
    padding: 16px 18px;
    border: 2px solid var(--border);
    border-radius: 6px;
    background: var(--bg-white);
}

/* ---- head: who and what on the left, the score on the right ------------- */

.bc-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 14px;
}

.bc-card-titles {
    min-width: 0;
}

/* The source mark in its own column, the title and episode stacked beside it.
   baseline aligns the icon with the first line of the stack -- the title --
   so it sits on the title's line and the episode starts under the title, not
   under the icon. */
.bc-title-row {
    display: flex;
    align-items: baseline;
    gap: 9px;
}

.bc-title-stack {
    min-width: 0;
}

/* Who wrote the report. The AI's wand today; a person's icon and name later,
   in the same slot -- see browseCoverageSourceMark(). */
.bc-source {
    flex: none;
    font-size: 1.15rem;
    line-height: 1;
    cursor: help;
}

.bc-source--ai {
    color: var(--accent-primary);
}

/* The serif every screenplay's name wears on this site -- the cards and tables
   on the dashboard, the Library, the script and folder pages, and .cvs-title on
   the standalone summary. A listing of coverage is a listing of screenplays,
   so the name reads the same here.

   700 is one of the three weights template.php requests, so this is a real cut
   rather than a synthesised bold. */
.bc-title {
    font-family: 'Playfair Display', Georgia, serif;
    display: inline-block;
    font-size: 1.35rem;
    font-weight: 700;
    line-height: 1.25;
    color: var(--color-text-body);
    text-decoration: none;
}

a.bc-title:hover {
    color: var(--accent-primary);
    text-decoration: underline;
}

/* Not in the Script Library and not the reader's to open: reads as a title,
   not as a link that forgot to work. */
.bc-title-plain {
    cursor: default;
}

/* With the title it sits under, as the episode does everywhere else.
 *
 * The italic is back. It was dropped when this took the serif, because
 * template.php asked Google for Playfair's roman only and `font-style: italic`
 * on a face you have no italic of leaves the browser to slant the letterforms
 * itself -- a synthesised oblique, which on something with this much stroke
 * contrast reads as a rendering fault. The request now carries the italic axis
 * at 600, 700 and 800, so this is the real cut and the line can have back the
 * emphasis the design gave it.
 *
 * 600 rather than inherited, for the reason .dash-card-episode gives: 400 is
 * not a loaded weight and would resolve to 600 whatever this said. */
.bc-episode {
    font-family: 'Playfair Display', Georgia, serif;
    font-weight: 600;
    font-style: italic;
    margin-top: 2px;
    font-size: 1.05rem;
    color: var(--text-soft, #555);
}

.bc-byline {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 16px;
    margin-top: 8px;
    font-size: .95rem;
    color: var(--text-soft, #555);
}

.bc-author {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    color: var(--color-text-body);
    text-decoration: none;
}

.bc-author:hover {
    color: var(--accent-primary);
}

.bc-avatar {
    width: 28px;
    height: 28px;
    flex: none;
    border-radius: 50%;
    overflow: hidden;
    background: var(--primary-dim);
    color: var(--primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
}

.bc-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.bc-fact i {
    margin-right: 6px;
    color: var(--accent-primary);
}

/* The overall score. The one number a browser is scanning the page for, so it
   is the biggest thing on the card, and it wears its verdict's colours -- the
   background and text come from .cv-verdict--{class}, the same five the report
   uses, so a Recommend here and a Recommend inside the report are one green. */
.bc-score {
    flex: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 128px;
    padding: 8px 14px 10px;
    border-radius: 8px;
    text-align: center;
}

.bc-score-num {
    font-size: 2.6rem;
    font-weight: 800;
    line-height: 1;
}

.bc-score-word {
    margin-top: 5px;
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    white-space: nowrap;
}

/* ---- body: the scoreboard, then the conclusions under it ---------------- */

/* One column. The scoreboard used to sit in a 380px column beside the
   conclusions, which left each bar a stub; across the full card every bar is
   long enough to read as a proportion at a glance, and the rows line up with
   each other card to card down the page. */
.bc-card-body {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* The box keeps its look from the report; only the space under it goes, since
   the gap above handles that here. */
.bc-card-summary .cv-summary {
    margin: 0;
}

.bc-card-conclusions .cv-overview {
    margin: 0;
}

/* The way into the whole report. The .cv-share button's look -- the report's
   own small outlined button -- but not its class: js/ai-logline.js listens for
   .cv-share and would try to publish a link. */
.bc-card-foot {
    display: flex;
    justify-content: flex-end;
    margin-top: 14px;
}

.bc-read {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 16px;
    border: 1px solid var(--accent-primary);
    border-radius: 6px;
    background: #fff;
    color: var(--accent-primary);
    font-size: .95rem;
    font-weight: 600;
    cursor: pointer;
    transition: color .15s ease, background .15s ease;
}

.bc-read:hover {
    background: var(--accent-primary);
    color: #fff;
}

@media (max-width: 520px) {
    .bc-card {
        padding: 14px;
    }

    .bc-card-head {
        flex-direction: column-reverse;
    }

    .bc-score {
        flex-direction: row;
        gap: 10px;
        min-width: 0;
        padding: 6px 12px;
    }

    .bc-score-word {
        margin-top: 0;
    }
}