/* ============================================
   WHAT CAME BACK
   One page of a real brief: the comparables table
   from Devan's brief on Beehero. The text column on
   the left stays in view while the page scrolls past,
   so its legend sits beside the highlighted row.

   The highlight marks a comparable that wasn't in
   the analyst's peer set (case study, Beehero). The
   footnote says three other companies weren't either,
   so a single highlight never implies the rest were
   found. Amber is used for nothing else in this
   section.

   The document stays paper in both themes; in dark
   mode it is dimmed a step so it doesn't glare.
   ============================================ */

.brief-section {
    --brief-ink: #0f172a;
    --brief-text: #334155;
    --brief-muted: #64748b;
    /* The highlighter as it looks on paper, and the same mark on the page ground */
    --brief-mark: rgba(255, 196, 46, 0.42);
    --brief-mark-solid: #fde08f;
    --paper: #ffffff;
    --paper-ink: #0f172a;
    --paper-text: #334155;
    --paper-muted: #5b6475;
    --paper-faint: #c3c8d4;
    --paper-rule: #e2e8f0;
    --paper-link: #4338ca;
    /* The hover tag on a figure: the site's ink, in both themes */
    --tag-bg: #0f172a;
    --tag-text: rgba(241, 245, 249, 0.94);
    --paper-shadow: 0 1px 2px rgba(15, 23, 42, 0.06), 0 28px 56px -28px rgba(15, 23, 42, 0.34);
    position: relative;
    /* Continues from the Deliverables band above and meets the white top of the Security band below */
    background: linear-gradient(180deg, #f3f4f6 0%, #ffffff 100%);
}

[data-theme="dark"] .brief-section {
    --brief-ink: #f1f5f9;
    --brief-text: #cbd5e1;
    --brief-muted: #94a3b8;
    --paper: #eceef6;
    --paper-shadow: 0 0 0 1px rgba(255, 255, 255, 0.04), 0 40px 80px -30px rgba(0, 0, 0, 0.8);
    background: #020617;
}

.brief-grid {
    display: grid;
    grid-template-columns: minmax(0, 22.5rem) minmax(0, 1fr);
    gap: clamp(2rem, 5vw, 4.5rem);
    align-items: start;
}

/* ---------- Text column ---------- */

.brief-intro {
    display: grid;
    gap: 1rem;
    position: sticky;
    top: calc(var(--nav-h, 80px) + 1.5rem);
}

.brief-kicker {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--brief-muted);
}

/* Same scale as the other section titles (text-3xl / md:text-4xl, semibold). */
.brief-title {
    font-size: 1.875rem;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -0.012em;
    color: var(--brief-ink);
}

@media (min-width: 768px) {
    .brief-title {
        font-size: 2.25rem;
    }
}

.brief-lead {
    font-size: 1rem;
    line-height: 1.62;
    color: var(--brief-text);
}

.brief-legend {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    font-size: 0.94rem;
    line-height: 1.5;
    color: var(--brief-ink);
}

.brief-legend__mark {
    flex: none;
    width: 1.8rem;
    height: 0.9rem;
    margin-top: 0.32em;
    border-radius: 2px 6px 3px 7px;
    background: var(--brief-mark-solid);
}

/* ---------- The document ---------- */

.brief-sheet {
    display: grid;
    min-width: 0;
    margin: 0;
    padding: clamp(1.25rem, 3.2vw, 2.6rem);
    border-radius: 5px;
    background: var(--paper);
    color: var(--paper-text);
    box-shadow: var(--paper-shadow);
}

.brief-sheet__top {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding-bottom: 0.8rem;
    margin-bottom: 1.2rem;
    border-bottom: 1px solid var(--paper-rule);
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 0.64rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--paper-muted);
}

.brief-table {
    display: grid;
}

.brief-row {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1.25fr) minmax(0, 1.35fr);
    gap: 0.25rem 1.25rem;
    align-items: baseline;
    padding: 0.85rem 0;
    border-bottom: 1px solid var(--paper-rule);
}

.brief-row:last-child {
    border-bottom: 0;
}

.brief-row > * {
    position: relative;
    z-index: 1;
    min-width: 0;
}

.brief-row--head {
    padding: 0.4rem 0 0.55rem;
    border-bottom-color: var(--paper-ink);
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 0.64rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--paper-muted);
}

.brief-co b {
    display: block;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--paper-ink);
}

.brief-co__hq {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 0.68rem;
    color: var(--paper-muted);
}

.brief-focus {
    font-size: 0.86rem;
}

.brief-fig {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 0.78rem;
    line-height: 1.85;
    font-variant-numeric: tabular-nums;
    color: var(--paper-ink);
}

.brief-fig__note {
    color: var(--paper-muted);
}

/* A linked figure, as it looks in the digital brief. Kept on one line: a
   figure split as "Series A ·" / "£12M" reads as broken. */
.brief-src {
    white-space: nowrap;
    text-decoration: underline dotted;
    text-decoration-color: var(--paper-faint);
    text-decoration-thickness: 1px;
    text-underline-offset: 4px;
    transition: text-decoration-color 0.2s ease;
}

/* Hovering a figure shows a small ink tag beside it, "CITED IN THE BRIEF",
   set like the site's mono labels: no border, no pointer. It waits a moment,
   so moving across the table shows nothing, then fades in while drifting 2px
   into place, and leaves quickly. It sits right of the figure from 1200px and
   left of it below that, where the right side can run off screen. Mouse and
   trackpad only; screen readers skip it (it repeats on every figure). */
@media (hover: hover) and (pointer: fine) {
    .brief-src {
        position: relative;
    }

    .brief-src::after {
        content: "Cited in the brief";
        content: "Cited in the brief" / "";
        position: absolute;
        top: 50%;
        left: calc(100% + 0.6rem);
        z-index: 3;
        padding: 0.32rem 0.5rem 0.3rem;
        border-radius: 3px;
        background: var(--tag-bg);
        box-shadow: 0 6px 16px -8px rgba(2, 6, 23, 0.5);
        font-size: 0.56rem;
        font-weight: 500;
        line-height: 1;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        color: var(--tag-text);
        white-space: nowrap;
        pointer-events: none;
        opacity: 0;
        transform: translate(-2px, -50%);
        transition: opacity 0.12s ease-in, transform 0.12s ease-in;
    }

    .brief-src:hover {
        text-decoration-color: var(--paper-muted);
    }

    .brief-src:hover::after {
        opacity: 1;
        transform: translate(0, -50%);
        transition:
            opacity 0.18s cubic-bezier(0.2, 0.7, 0.2, 1) 0.3s,
            transform 0.18s cubic-bezier(0.2, 0.7, 0.2, 1) 0.3s;
    }
}

@media (hover: hover) and (pointer: fine) and (max-width: 1199px) {
    .brief-src::after {
        left: auto;
        right: calc(100% + 0.6rem);
        transform: translate(2px, -50%);
    }
}

/* A figure followed by a note ("upcoming"): the tag covers the note, and a
   paper-coloured shadow fills the gap so no letters show between figure and tag. */
@media (hover: hover) and (pointer: fine) and (min-width: 1200px) {
    .brief-src--noted::after {
        box-shadow: -0.6rem 0 0 0 var(--paper), 0 6px 16px -8px rgba(2, 6, 23, 0.5);
    }
}

/* Highlighter on the row the analyst missed. It draws once the document has
   scrolled into view (scroll-animations.js adds .is-visible); without
   JavaScript the document has no .chat-reveal and the mark simply shows. */
.brief-row--missed::before {
    content: "";
    position: absolute;
    inset: 0.35rem -0.6rem;
    z-index: 0;
    border-radius: 3px 10px 4px 12px / 8px 4px 10px 5px;
    background: var(--brief-mark);
    transform-origin: left center;
    transition: transform 0.8s cubic-bezier(0.2, 0.7, 0.2, 1) 0.45s;
}

.brief-sheet.chat-reveal:not(.is-visible) .brief-row--missed::before {
    transform: scaleX(0);
}

.brief-notes {
    display: grid;
    gap: 0.35rem;
    margin-top: 1.25rem;
    padding-top: 0.9rem;
    border-top: 1px solid var(--paper-rule);
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 0.66rem;
    line-height: 1.6;
    color: var(--paper-muted);
}

/* The case-study link ends the footnote, at footnote size. It never breaks:
   when it doesn't fit at the end of a line it moves to the next one whole. */
.brief-more {
    white-space: nowrap;
    font-weight: 500;
    color: var(--paper-link);
    text-decoration: none;
}

.brief-more:hover {
    text-decoration: underline;
}

/* ---------- Responsive ---------- */

/* Stacked until the page container widens at 1024px (Tailwind's lg). Below
   that the container is only 768px wide, too narrow for text and document
   side by side. */
@media (max-width: 1023px) {
    .brief-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .brief-intro {
        position: static;
    }
}

@media (max-width: 560px) {
    .brief-row {
        grid-template-columns: minmax(0, 1fr);
        gap: 0.15rem;
    }

    .brief-row--head {
        display: none;
    }

    .brief-row--missed::before {
        inset: 0.35rem -0.5rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .brief-row--missed::before {
        transition: none;
    }

    /* Keep the pause before the tag, drop the motion */
    .brief-src {
        transition: none;
    }

    .brief-src::after,
    .brief-src:hover::after {
        transform: translate(0, -50%);
    }

    .brief-src::after {
        transition: opacity 0s;
    }

    .brief-src:hover::after {
        transition: opacity 0s 0.3s;
    }
}