/* ══════════════════════════════════════════════════════════════════════════
   Branded client report document
   ══════════════════════════════════════════════════════════════════════════

   A mock of the deliverable BeSync'd produces: a white, branded report with a
   masthead (the sending company's logo and name), a title block naming the
   client and the period, and a run of numbered sections.

   Built as markup rather than a screenshot or a generated image, for the
   reason every mock on these pages is: it is almost entirely small type, and
   small type is what raster and generative output handle worst. As markup it
   stays sharp at any pixel density, uses the real brand font and the real
   teal, is edited by changing a word, and is readable to search engines and
   screen readers.

   Two content shapes share one anatomy, because they are two views of the
   same document rather than two components:

     .rpt-doc                the finished report — a section carries prose or
                             a short list of points, i.e. what the report SAYS
     .rpt-doc--outline       the same document as a table of contents — a
                             section carries a one-line description of what it
                             is for, i.e. what the report COVERS

   Sizing. A mock has to read as a document seen at a distance, not as a
   control the visitor could click, so every dimension is set from --rd-pad
   and the small type sizes below rather than from the page's body scale.
   Retune the whole thing by moving --rd-pad and the font sizes together.

   Width comes from the column the document is dropped into, not from the
   screen — the same document appears in a ~460px card inside a dark band and
   in a ~626px column further down the same page, at the same viewport. So the
   compression below is asked of a container query rather than a media query;
   keyed to the viewport it would not even be monotonic as the window narrows.
   The wrapper .rpt-doc-wrap exists only to be that query container, because an
   element cannot size itself against its own width.

   The 430px threshold is derived rather than rounded. The widest thing the
   document has to hold on one line is the longest section title, "Key
   achievements & project updates", which sets at 246px in the 0.82rem/700
   face. Beside it sit the fixed parts of a section head: a 1.35rem numeral
   chip and its 0.6rem gap, i.e. 31px, plus 2 x --rd-pad of card padding at
   24px = 48px. 246 + 31 + 48 = 325px of ink, and the title is allowed to wrap
   to a second line before the document should change shape — so the switch is
   set where the SECOND line would also be crowded, at 430px, which leaves the
   title 351px and the numbered row a comfortable two lines at worst.

   Every selector is scoped to .static-page, so the file is safe to load on any
   page that declares it in deps.json. It is authored here rather than moved
   out of an existing page, which is why it is scoped where anim-*.css are not.
   ══════════════════════════════════════════════════════════════════════════ */

.static-page .rpt-doc-wrap {
    container-type: inline-size;
}

.static-page .rpt-doc {
    --rd-pad: 1.5rem;
    --rd-line: #EFF4F3;
    --rd-ink: #0E223B;
    display: flex;
    flex-direction: column;
    background: #ffffff;
    border: 1px solid var(--rd-line);
    border-radius: 20px;
    overflow: hidden;
    font-family: var(--sp-font-body);
    text-align: left;
}

/* ── Masthead ──────────────────────────────────────────────────────────────
   The sender's identity, on its own tinted strip above a hairline, because on
   a real report it is printed furniture rather than content: it repeats on
   every page and does not belong in the reading flow. Separating it is also
   what lets the title block below start on the client's name, which is the
   first thing a client cares to see. */
.static-page .rpt-doc__brand {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.85rem var(--rd-pad);
    background: #F9FCFB;
    border-bottom: 1px solid var(--rd-line);
}

/* A placeholder for the customer's uploaded logo: a rounded teal-tinted tile
   with a mark in it. Deliberately generic — inventing a plausible corporate
   logo would make the mock look like a case study of a company that does not
   exist. */
.static-page .rpt-doc__logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 1.85rem;
    height: 1.85rem;
    border-radius: 8px;
    background: var(--sp-brand-teal-tint);
    color: var(--sp-brand-teal);
    font-size: 0.95rem;
    line-height: 1;
}
.static-page .rpt-doc__brand-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.static-page .rpt-doc__brand-tag {
    font-family: var(--sp-font-mono);
    font-size: 0.52rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    line-height: 1.4;
    color: var(--sp-ink-faint);
}
.static-page .rpt-doc__brand-name {
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1.35;
    color: var(--rd-ink);
}
/* The document's own kind, pushed to the far end of the masthead. Mono and
   teal, the same treatment every micro-label on these pages gets. */
.static-page .rpt-doc__kind {
    margin-left: auto;
    flex: none;
    font-family: var(--sp-font-mono);
    font-size: 0.55rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    line-height: 1.4;
    color: var(--sp-brand-teal);
}

/* ── Title block ───────────────────────────────────────────────────────── */
.static-page .rpt-doc__head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    padding: var(--rd-pad) var(--rd-pad) 0.9rem;
}
.static-page .rpt-doc__title {
    font-family: var(--sp-font-display);
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.2;
    color: var(--rd-ink);
    margin: 0;
}
.static-page .rpt-doc__sub {
    display: block;
    margin-top: 0.2rem;
    font-family: var(--sp-font-body);
    font-size: 0.68rem;
    font-weight: 500;
    letter-spacing: 0;
    line-height: 1.4;
    color: var(--sp-ink-muted);
}
.static-page .rpt-doc__period {
    flex: none;
    font-size: 0.65rem;
    font-weight: 600;
    line-height: 1.4;
    color: var(--sp-ink-muted);
    text-align: right;
}

/* ── Sections ──────────────────────────────────────────────────────────────
   A hairline above each section rather than a gap between them, so the run
   reads as one document with rules through it rather than as a stack of
   cards. */
.static-page .rpt-doc__body {
    padding: 0 var(--rd-pad) 0.25rem;
}
.static-page .rpt-doc__sec {
    padding: 0.85rem 0;
    border-top: 1px solid var(--rd-line);
}
.static-page .rpt-doc__sec-head {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}
/* The numeral is what makes the five sections read as a fixed running order
   rather than as whatever this month happened to contain — which is the claim
   the section around it makes. */
.static-page .rpt-doc__num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 1.35rem;
    height: 1.35rem;
    border-radius: 50%;
    background: var(--sp-brand-teal-tint);
    font-family: var(--sp-font-mono);
    font-size: 0.58rem;
    font-weight: 700;
    line-height: 1;
    color: var(--sp-brand-teal);
}
.static-page .rpt-doc__sec-title {
    font-size: 0.82rem;
    font-weight: 700;
    line-height: 1.35;
    color: var(--rd-ink);
}
/* Outline variant. The description is indented to the title's left edge — the
   numeral's 1.35rem plus the 0.6rem gap — so the five descriptions share one
   margin and the numerals stay a column of their own. */
.static-page .rpt-doc__sec-desc {
    margin: 0.28rem 0 0 1.95rem;
    font-size: 0.7rem;
    line-height: 1.55;
    color: var(--sp-ink-muted);
}

/* Finished-report variant: what a section actually says. */
.static-page .rpt-doc__prose {
    margin: 0.45rem 0 0 1.95rem;
    font-size: 0.72rem;
    line-height: 1.65;
    color: var(--sp-ink-soft);
}
.static-page .rpt-doc__points {
    list-style: none;
    margin: 0.45rem 0 0 1.95rem;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}
.static-page .rpt-doc__points li {
    position: relative;
    margin: 0;
    padding-left: 0.85rem;
    font-size: 0.72rem;
    line-height: 1.55;
    color: var(--sp-ink-soft);
}
/* A teal square rather than a disc, set on the first line's optical centre.
   Squares because the report is a printed artefact and a disc bullet reads as
   a web list; the colour is what ties the marks to the numerals above them. */
.static-page .rpt-doc__points li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.48em;
    width: 4px;
    height: 4px;
    border-radius: 1px;
    background: var(--sp-brand-teal);
}

/* ── Delivery footer ───────────────────────────────────────────────────────
   The one line that says the document is not just composed but sent, which is
   the half of the claim a picture of a page cannot otherwise carry. */
.static-page .rpt-doc__foot {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.7rem var(--rd-pad);
    border-top: 1px solid var(--rd-line);
    background: #F9FCFB;
    font-family: var(--sp-font-mono);
    font-size: 0.58rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    line-height: 1.5;
    color: var(--sp-ink-muted);
}
.static-page .rpt-doc__foot i {
    flex: none;
    font-size: 0.78rem;
    color: var(--sp-brand-teal);
}

/* ── Narrow container ──────────────────────────────────────────────────────
   See the header for where 430px comes from. Padding comes in first because
   it is the cheapest width to give back, then the title steps down so the
   masthead and the title block stop competing for the same line. */
@container (max-width: 430px) {
    .static-page .rpt-doc {
        --rd-pad: 1.1rem;
        border-radius: 16px;
    }
    .static-page .rpt-doc__title {
        font-size: 1.02rem;
    }
    .static-page .rpt-doc__head {
        align-items: flex-start;
    }
    .static-page .rpt-doc__sec-desc,
    .static-page .rpt-doc__prose,
    .static-page .rpt-doc__points {
        margin-left: 1.6rem;
    }
    .static-page .rpt-doc__num {
        width: 1.2rem;
        height: 1.2rem;
        font-size: 0.55rem;
    }
}

/* Below this the title block cannot hold a name and a period side by side, so
   the period drops under the name rather than squeezing it. */
@container (max-width: 320px) {
    .static-page .rpt-doc__head {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.35rem;
    }
    .static-page .rpt-doc__period {
        text-align: left;
    }
}