/* ERS Anuário — public viewer.

   Reproduces the printed anuário's screen design: a full-bleed light ground with the year set
   large and clipped at the right edge, the ERS lockup and the ANUÁRIO/year block on the left
   above the section accordion, and the open spread as a white sheet flanked by its two page
   numbers. Self-contained — this file is not loaded by the management screens. */

:root {
    /* From the official logo artwork (wwwroot/img/logo_ers.svg): ERS red and the grey it
       sets its wordmark in. Do not adjust these by eye — they are the brand. */
    --ers-red: #e4002b;
    --ers-grey: #63666a;

    --ink: #3c3c3b;
    --ink-soft: #6f6f6e;
    --ink-faint: #9d9d9c;
    --sheet: #ffffff;
    --card: #f7f7f7;
    --card-line: #e6e6e6;
}

* { box-sizing: border-box; }

html, body { height: 100%; }

.viewer-body {
    margin: 0;
    color: var(--ink);
    font: 400 15px/1.45 Roboto, "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;

    /* The supplied artwork, which carries the swoosh and grain of the printed design. The
       flat colour under it is the image's own tone, so a failed request degrades to the right
       grey rather than to white. */
    background-color: #eeeeef;
    background-image: url("/img/fundo-anuario.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    min-height: 100vh;
    overflow-x: hidden;
}

/* The year, set large and rotated at the right edge, clipped by the viewport as in the
   original. aria-hidden in the markup: it repeats the year already announced in the header. */
.year-mark {
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%) rotate(90deg) translateY(-.34em);
    transform-origin: center;
    font-size: clamp(6rem, 15vh, 12.5rem);
    font-weight: 800;
    letter-spacing: -.04em;
    line-height: .8;
    color: var(--ers-red);
    opacity: .9;
    pointer-events: none;
    user-select: none;
    z-index: 0;
}

.stage {
    position: relative;
    z-index: 1;
    max-width: 1500px;
    margin-inline: auto;

    /* Clips the year mark at the content's edge instead of the window's, which is what keeps the
       composition together on a wide screen. */
    overflow: hidden;

    display: grid;

    /* Capped, not just floored: at 26% of a 2500px screen the list was 671px wide and still
       growing. */
    grid-template-columns: clamp(300px, 26%, 380px) 1fr;
    gap: clamp(.75rem, 1.2vw, 1.25rem);
    align-items: start;
    padding: clamp(1.25rem, 2.4vw, 2.25rem) clamp(5.5rem, 10vw, 10rem) 1.75rem clamp(1.5rem, 4vw, 4.5rem);
    min-height: 100vh;
}

/* ── Left column: lockup, title block, accordion ─────────────────────────── */

.lockup {
    display: flex;
    align-items: flex-start;
    gap: clamp(1.25rem, 3vw, 3rem);
    margin-bottom: clamp(2rem, 6vh, 4.5rem);
}

/* The supplied artwork sets its own proportions; only the width is ours to choose. */
.lockup-logo {
    flex: 0 0 auto;
    width: clamp(9rem, 13vw, 12rem);
    height: auto;
}

/* ANUÁRIO / year, bracketed by the two red rules of the printed cover. */
.title-block { padding-top: .5rem; }

.title-block .rule {
    display: block;
    width: 3.1rem;
    height: 4px;
    background: var(--ers-red);
}

.title-block .rule-top { margin-bottom: .8rem; }
.title-block .rule-bottom { margin-top: .55rem; }

.title-block .word {
    display: block;
    font-size: 1.6rem;
    font-weight: 400;
    letter-spacing: .04em;
    color: var(--ers-grey);
    line-height: 1;
}

.title-block .year {
    display: block;
    font-size: 1.85rem;
    font-weight: 700;
    color: var(--ers-red);
    line-height: 1.05;
}

/* The word ANUÁRIO repeated at the top right, as on the printed spread. */
.corner-word {
    position: absolute;
    top: clamp(.5rem, 1.2vw, 1rem);
    right: clamp(1.5rem, 3vw, 3rem);
    font-size: clamp(1rem, 1.5vw, 1.6rem);
    letter-spacing: .05em;
    color: var(--ink-faint);
    z-index: 1;
    pointer-events: none;
}

/* ── Accordion ───────────────────────────────────────────────────────────── */

.sections { display: flex; flex-direction: column; gap: .7rem; }

.section {
    position: relative;

    /* The supplied artwork is 248.7x160. Keeping that ratio is what shows its rounded corner
       instead of cropping it away, and what stops the glyph looking magnified. */
    --art-ratio: 1.554;
    --tile-height: 2.7rem;
    --tile-width: calc(var(--tile-height) * var(--art-ratio));
    --name-padding: .8rem;
}

.icon-plain { display: block; width: 100%; height: auto; }

.section > details { border: none; }

.section summary {
    display: flex;
    align-items: stretch;
    gap: 0;
    cursor: pointer;
    list-style: none;
    background: var(--sheet);
    border-radius: 5px;
    overflow: hidden;
    min-height: var(--tile-height);
    box-shadow: 0 1px 2px rgba(0, 0, 0, .07);
}

.section summary::-webkit-details-marker { display: none; }

.section summary:focus-visible { outline: 2px solid var(--ers-red); outline-offset: 2px; }

/* The tile is a near-square block filled by a centred crop of the artwork. The artwork supplies
   its own background field, so nothing is painted behind it; the tile only reserves the space.

   The supplied files are 248.7x160, much wider than the design's tile, so something has to
   give. Cropping centred is the option that costs nothing: measured against the three glyphs,
   the widest spans 155 of the 160 units of height, so a crop this shape trims only flat colour
   field and the rounded corner, never the drawing. Letterboxing instead would show gaps beside
   a mark that paints its own background, and deriving the width from the aspect ratio makes
   every tile a different width as soon as one section name wraps.

   1.08 rather than a plain square is margin: it leaves roughly nine units clear on each side
   of the tightest glyph instead of two and a half. */
.tile {
    flex: 0 0 var(--tile-width);
    align-self: stretch;
    overflow: hidden;
}

.icon-tile {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
}

/* Used only when a category's icon key names no artwork: the colour field alone still reads as
   a section marker. */
.icon-fallback {
    display: block;
    width: var(--tile-width);
    align-self: stretch;
}

.section-name {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    padding: .6rem var(--name-padding);
    font-weight: 700;
    font-size: .88rem;
    letter-spacing: .01em;
    line-height: 1.25;
    text-transform: uppercase;
    color: var(--ink);
}

.section-toggle {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    padding: 0 1.1rem;
    font-size: 1.4rem;
    font-weight: 300;
    color: var(--ink-faint);
    line-height: 1;
}

/* Expanded sections carry their name in white on the accent colour, as the design shows for
   the open MONITORIZAÇÕES block. */
.section.is-open summary { border-radius: 5px 5px 0 0; }
.section.is-open .section-name { color: #fff; }
.section.is-open .section-toggle { color: rgba(255, 255, 255, .85); }

.entries {
    list-style: none;
    margin: 0;
    padding: 0;
    background: var(--card);
    border-radius: 0 0 5px 5px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .07);
    overflow: hidden;
}

.entries li + li { border-top: 1px dashed #cfd8c2; }

.entries {
    /* tile width + the padding the section name sits behind — the two together are where the
       category's text starts, and the entry text has to start there too */
    --entry-gutter: calc(var(--tile-width) + var(--name-padding));
}

.entries a {
    display: flex;
    align-items: center;
    padding: .8rem 1.15rem .85rem 0;
    text-decoration: none;
    color: var(--ink);
}

/* The selection marker, in the gutter left free by that alignment. Hidden with visibility
   rather than display so the text does not shift as the selection moves. */
.entry-marker {
    flex: 0 0 var(--entry-gutter);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 .5rem;
    visibility: hidden;
}

.entries li.is-current .entry-marker { visibility: visible; }

.entry-body { flex: 1 1 auto; min-width: 0; }

.entries a:hover { background: #fdfdfd; }

.entries li.is-current { background: var(--sheet); }

.entry-date {
    display: block;
    font-size: .8rem;
    font-weight: 700;
    margin-bottom: .2rem;
}

.entry-title { display: block; font-size: .88rem; line-height: 1.4; color: var(--ink-soft); }

.entries li.is-current .entry-title { color: var(--ink); }

.entry-pages { display: block; margin-top: .25rem; font-size: .72rem; color: var(--ink-faint); }

.section-empty { padding: .85rem 1.15rem .9rem var(--entry-gutter); margin: 0; color: var(--ink-faint); font-size: .85rem; }

/* ── Right column: the spread ────────────────────────────────────────────── */

.spread-area {
    --sheet-height: min(84vh, 1100px);
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 0 0 0 1.6rem;
}

/* Pinned to the page's width by the script, which is what makes the discs land on the page's
   borders rather than on the wider layout column. */
.sheet-column {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

/* The two page numbers of the open spread, as red outlined discs on either side of the sheet.
   They are links: the left one steps back a spread, the right one steps forward. */
.page-disc {
    position: absolute;
    top: calc(var(--sheet-height) / 2);
    z-index: 2;
    width: 2.7rem;
    height: 2.7rem;
    border: 1.5px solid var(--ers-red);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ers-red);

    /* Solid, not translucent: the disc sits across the paper's edge, so a see-through fill
       would show the join running through it. */
    background: var(--sheet);
    font-size: .95rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    text-decoration: none;
}

.page-disc[data-disc="prev"] { left: 0; transform: translate(-50%, -50%); }
.page-disc[data-disc="next"] { right: 0; transform: translate(50%, -50%); }

.page-disc:hover { background: var(--ers-red); color: #fff; }

.page-disc.is-blank { visibility: hidden; }

.page-disc.is-inert { pointer-events: none; opacity: .45; }

/* The sheet is the paper. Exactly one page is drawn into the canvas inside it, sized to the
   sheet's height, so there is nothing to scroll — which is the point: the reader turns pages,
   they do not scroll a document.

   Width comes from the canvas, not from a max-width here: a page's aspect ratio is whatever the
   PDF says, and forcing a width would either letterbox a portrait page or crop a landscape one. */
.sheet {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: var(--sheet-height);
    overflow: hidden;
    background: var(--sheet);
    box-shadow: 0 2px 6px rgba(0, 0, 0, .09), 0 18px 46px rgba(0, 0, 0, .13);
}

.sheet-canvas {
    display: block;
    max-width: 100%;
    max-height: 100%;
}

/* Shown only when a draw is slow enough to notice — see the delay in viewer.js. */
.sheet-loading {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, .6);
}

.sheet-loading[hidden] { display: none; }

.sheet-spinner {
    width: 1.6rem;
    height: 1.6rem;
    border: 2px solid var(--card-line);
    border-top-color: var(--ers-red);
    border-radius: 50%;
    animation: sheet-spin .7s linear infinite;
}

@keyframes sheet-spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
    .sheet-spinner { animation: none; border-top-color: var(--card-line); }
}

.sheet-empty {
    padding: 5rem 2rem;
    text-align: center;
    color: var(--ink-faint);
}

/* A quiet caption under the sheet: which section is open and where it sits. Not in the
   original design, which relies on the sidebar for this, but the double pagination is the one
   thing a reader cannot infer — the sheet's own footer counts from 1 within the section. */
.sheet-caption {
    margin: .85rem .2rem 0;
    display: flex;
    gap: .9rem;
    align-items: baseline;
    flex-wrap: wrap;
    font-size: .8rem;
    color: var(--ink-faint);
}

.sheet-caption strong { color: var(--ink-soft); font-weight: 600; }
.sheet-caption a { color: var(--ers-red); text-decoration: none; }
.sheet-caption a:hover { text-decoration: underline; }
.sheet-caption .caption-right { margin-left: auto; font-variant-numeric: tabular-nums; }

/* ── Narrow screens ─────────────────────────────────────────────────────── */

@media (max-width: 1024px) {
    .stage {
        grid-template-columns: 1fr;
        padding: 1.5rem 1.25rem 3rem;
    }

    .year-mark, .corner-word { display: none; }

    .spread-area { gap: .5rem; }

    .page-disc { width: 2.2rem; height: 2.2rem; font-size: .85rem; }

    .sheet { height: 70vh; }
}

@media (prefers-reduced-motion: no-preference) {
    .page-disc, .entries a, .section summary { transition: background-color .12s ease, color .12s ease; }
}

/* Shown when a page will not draw. The reason is included because a report that says only
   "it did not work" cannot be acted on. */
.sheet-error-detail {
    margin-top: .75rem;
    font-size: .75rem;
    color: var(--ink-faint);
    word-break: break-word;
}