/*
 * 2026 Regulatory Impact Index report page: reading enhancements layered on
 * Design's report file (reports/regulatory-impact-index.html). Uses Design's
 * own tokens (--teal, --mist, …). Behaviour is in assets/js/rii-report-enhance.js.
 */

/* Fixed corner furniture. The reCAPTCHA badge (bottom-right, 14px up, 60px
   tall) and TrustArc's "Cookie Preferences" link (bottom-left, 32px tall) own
   the bottom corners on every page; the report's buttons sit above them, the
   way the site's slide-in CTAs clear the cookie link. Design's back-to-top
   button was 18px up, on top of the badge: now 74 + 12px gap. */
.totop { bottom: calc(max(18px, env(safe-area-inset-bottom, 0px)) + 68px); }

/* Running text fills the same column as the cards and highlight boxes
   (Huxley, 2026-11-11: one consistent width over a shorter measure). Design
   caps prose at 72ch, which left some paragraphs a different width from the
   boxes around them depending on font size. */
.content section.part > p,
.content section.part > ul,
.content section.part > ol { max-width: none; }

/* 1. Phone charts. Label-column charts are re-laid out in JS; the rest
   (months, the five-dates line, the three tiers) keep their layout and
   scroll sideways at a readable size. */
.rii-cscroll-hint { display: none; }
@media (max-width: 640px) {
    .rii-cscroll {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-x: contain;
        margin: 0 -18px;
        padding: 0 18px 4px;
    }
    .rii-cscroll > svg { min-width: 680px; }
    .rii-cscroll-hint {
        display: block;
        margin: 6px 0 0;
        font-size: 12px;
        color: var(--slate);
    }
}

/* Exhibit dialog header on phones: Design's single flex row squeezes the title
   to one word a line beside the library link. Badge + actions on top, title
   below at full width. */
@media (max-width: 640px) {
    .exh-head {
        display: grid;
        grid-template-columns: auto 1fr auto;
        grid-template-areas: "num lib close" "t t t";
        align-items: center;
        gap: 10px 10px;
        padding: 14px 16px;
    }
    .exh-head .num { grid-area: num; justify-self: start; }
    .exh-head .exh-lib { grid-area: lib; justify-self: end; }
    .exh-head .exh-close { grid-area: close; }
    .exh-head .t { grid-area: t; font-size: 17px; line-height: 1.3; }
}

/* Exhibit 11 (the week of Jan. 1) in the library and its dialog. Design
   styles the dark panel only as `.hero-exh.signature .week-sig`, but every
   rule inside it (white day names, dates, "obligations on Jan. 1") is
   unscoped, so the library copy drew white text on white. Same panel,
   same breakpoints as Design's in-chapter copy. */
details.lib .week-sig,
#exh-modal .week-sig {
    background: var(--teal);
    border-radius: var(--r-dark);
    padding: 26px 28px;
    color: #fff;
}
@media (max-width: 860px) {
    details.lib .week-sig, #exh-modal .week-sig { padding: 18px 16px; }
}
@media (max-width: 420px) {
    details.lib .week-sig, #exh-modal .week-sig { padding: 18px 14px; }
}

/* Number columns (Design's td.n, which is nowrap). Exhibit 19's
   "Headline dates on the Chapter 2 calendar" column holds single digits, but
   its 2028 row is a sentence ("Not yet counted (Chapter 2 calendar ends …)"),
   and nowrap stretched the whole column to that sentence. JS tags td.n cells
   holding words (.rii-nwrap) so they wrap, and long headers over a number
   column (.rii-ncol) so the column is capped and the header wraps. */
table.data td.n.rii-nwrap { white-space: normal; }
table.data th.rii-ncol { width: 8.5em; text-align: right; }

/* Wide tables that scroll sideways (behaviour in JS, tableScroll()):
   edge fades, a hint line, a pinned first column, a focus ring. */
.rii-tframe { position: relative; }
.rii-tframe::before,
.rii-tframe::after {
    content: "";
    position: absolute;
    top: 1px;     /* inside .tscroll's 1px border (JS moved its margins to the frame) */
    bottom: 1px;
    width: 28px;
    pointer-events: none;
    opacity: 0;
    transition: opacity .2s;
    z-index: 3;
}
.rii-tframe::before { left: 1px; border-radius: 10px 0 0 10px; background: linear-gradient(to right, rgba(0, 58, 66, .16), rgba(0, 58, 66, 0)); }
.rii-tframe::after { right: 1px; border-radius: 0 10px 10px 0; background: linear-gradient(to left, rgba(0, 58, 66, .16), rgba(0, 58, 66, 0)); }
.rii-tframe.is-over:not(.is-end)::after { opacity: 1; }
/* with a pinned column, the left cue is that column's own shadow instead */
.rii-tframe.is-over:not(.is-start):not(.rii-tsticky)::before { opacity: 1; }

.rii-thint {
    margin: 10px 0 0;
    font-size: 12px;
    line-height: 1.4;
    color: var(--slate);
    transition: opacity .3s;
}
.rii-thint.is-done { opacity: 0; }
.rii-thint:not([hidden]) + .rii-tframe { margin-top: 4px !important; }

.rii-tframe .tscroll:focus-visible { outline: 3px solid var(--siglime); outline-offset: 2px; }

/* pinned first column: needs a solid background (odd rows are see-through) */
.rii-tsticky table.data tr > :first-child:not([colspan]) {
    position: sticky;
    left: 0;
    z-index: 1;
}
.rii-tsticky table.data thead th:first-child { z-index: 2; }
.rii-tsticky table.data tbody tr > td:first-child:not([colspan]) { background-color: var(--rii-tbg, #fff); }
.rii-tsticky table.data tbody tr:nth-child(even) > td:first-child:not([colspan]) { background-color: var(--cloud); }
.rii-tsticky table.data tbody tr.hl > td:first-child:not([colspan]) { background-color: #EEF3F7; }
.rii-tsticky:not(.is-start) table.data tr > :first-child:not([colspan]) {
    box-shadow: 8px 0 10px -8px rgba(0, 58, 66, .35);
}

/* The paired SAI360 / Index panels (360-unit canvases) read fine down to
   ~375px; below that, let each panel scroll rather than shrink its text. */
@media (max-width: 360px) {
    .chart .panel { overflow-x: auto; }
    .chart .panel > svg { min-width: 320px; }
}

/* 2. Phone contents: floating button + bottom sheet (≤860px, where Design's
   rail stops being sticky). */
.rii-toc-fab { display: none; }
@media (max-width: 860px) {
    .rii-toc-fab {
        position: fixed;
        z-index: 41;
        left: max(16px, env(safe-area-inset-left, 0px));
        /* above the "Cookie Preferences" link (32px) + 12px gap */
        bottom: calc(max(18px, env(safe-area-inset-bottom, 0px)) + 26px);
        /* back-to-top now sits higher, but keep clear of the reCAPTCHA tab (70px) */
        max-width: calc(100vw - 16px - 70px - 12px);
        height: 44px;
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 0 18px;
        border: 0;
        border-radius: 999px;
        background: var(--teal);
        color: #fff;
        font: 600 13.5px/1 var(--font);
        box-shadow: 0 8px 24px rgba(0, 58, 66, .28);
        cursor: pointer;
        opacity: 0;
        transform: translateY(10px);
        pointer-events: none;
        transition: opacity .2s, transform .2s;
    }
    .rii-toc-fab.is-visible { opacity: 1; transform: none; pointer-events: auto; }
    .rii-toc-fab:focus-visible { outline: 3px solid var(--siglime); outline-offset: 2px; }
    .rii-toc-fab__k {
        flex: none;
        font-size: 10.5px;
        letter-spacing: .14em;
        text-transform: uppercase;
        color: var(--siglime);
    }
    .rii-toc-fab__t {
        min-width: 0;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }
    .rii-toc-fab__t:empty { display: none; }
}

.rii-toc[hidden] { display: none; }
.rii-toc { position: fixed; inset: 0; z-index: 70; }
.rii-toc__scrim { position: absolute; inset: 0; background: rgba(0, 58, 66, .45); }
.rii-toc__panel {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    max-height: min(80vh, 720px);
    display: flex;
    flex-direction: column;
    background: var(--cloud);
    border-radius: 18px 18px 0 0;
    box-shadow: 0 -12px 32px rgba(0, 58, 66, .22);
    padding-bottom: env(safe-area-inset-bottom, 0px);
    animation: rii-toc-in .22s ease-out;
}
@keyframes rii-toc-in { from { transform: translateY(24px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
    .rii-toc__panel { animation: none; }
    .rii-toc-fab { transition: none; }
}
.rii-toc__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 12px 10px 20px;
    border-bottom: 1px solid var(--mist);
}
.rii-toc__head p {
    margin: 0;
    font-size: 12px;
    letter-spacing: .14em;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--slate);
}
.rii-toc__close {
    min-height: 40px;
    padding: 0 14px;
    border: 1px solid var(--mist);
    border-radius: 999px;
    background: var(--white);
    color: var(--teal);
    font: 600 13px/1 var(--font);
    cursor: pointer;
}
.rii-toc__body.rail {
    position: static;
    max-height: none;
    overflow: auto;
    overscroll-behavior: contain;
    padding: 14px 16px 24px;
}
/* bigger tap targets than the desktop rail */
.rii-toc__body.rail .grp-list ol > li > a,
.rii-toc__body.rail .h2s a { padding-top: 9px; padding-bottom: 9px; }
body.rii-toc-open { overflow: hidden; }

/* 5. Share a section. Text-only control (no icons on CTAs). Chapters: always
   shown under the title. Sections: inside the h2; with a mouse it appears on
   hover/focus, on touch it is always shown. */
.rii-share {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    padding: 0 12px;
    /* takes the heading's colour, so it reads on Design's light AND dark
       boxes (book chapters, the dark Board Case panels) */
    border: 1px solid rgba(127, 127, 127, .35);
    border: 1px solid color-mix(in srgb, currentColor 35%, transparent);
    border-radius: 999px;
    background: transparent;
    color: inherit;
    font: 600 13px/1 var(--font);
    letter-spacing: 0;
    text-transform: none;
    cursor: pointer;
    vertical-align: middle;
    transition: opacity .15s, background-color .15s;
}
.rii-share:hover { background: color-mix(in srgb, currentColor 10%, transparent); }
.rii-share:focus-visible { outline: 3px solid var(--siglime); outline-offset: 2px; }
.rii-share--chapter { margin-top: 14px; }
.rii-share--section { margin-left: 12px; flex: none; }
@media (hover: hover) and (pointer: fine) {
    .rii-share--section { opacity: 0; }
    .rii-has-share:hover .rii-share--section,
    .rii-share--section:focus-visible { opacity: 1; }
}
.rii-toast {
    position: fixed;
    z-index: 80;
    left: 50%;
    bottom: max(24px, env(safe-area-inset-bottom, 0px));
    transform: translate(-50%, 12px);
    padding: 10px 18px;
    border-radius: 999px;
    background: var(--ink, #0b1f24);
    color: #fff;
    font: 600 13.5px/1.2 var(--font);
    box-shadow: 0 8px 24px rgba(0, 58, 66, .28);
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s, transform .2s;
}
.rii-toast.is-on { opacity: 1; transform: translate(-50%, 0); }
@media (max-width: 860px) {
    /* sit above the Contents button */
    .rii-toast { bottom: calc(max(18px, env(safe-area-inset-bottom, 0px)) + 82px); }
}

@media print {
    .rii-toc-fab, .rii-toc, .rii-cscroll-hint, .rii-share, .rii-toast, .rii-thint { display: none !important; }
    .rii-tframe::before, .rii-tframe::after { display: none; }
    .rii-tsticky table.data tr > :first-child { position: static; box-shadow: none; }
    .rii-cscroll { overflow: visible; margin: 0; padding: 0; }
    .rii-cscroll > svg { min-width: 0; }
}

/* SAI360's logos (partner-supplied 2026-11-12, white then colour) are the wordmark alone,
   4.2:1 — Design sized the old tagline version (3.2:1) by height. Keep the
   width each slot had, so the wordmark doesn't grow ~1.5x. */
.lockup img.sai[src*="sai360-white.png"] { height: auto; width: 96px; }
.closing-piece .cp-by img.cp-logo[src*="sai360-white.png"] { height: auto; width: 77px; }
/* The colour wordmark (light backgrounds: the contents rail), same idea. */
.rail .sponsor .lockup img.sai[src*="sai360-color.png"] { height: auto; width: 67px; }