/* ------------------------------------------------------------------
   dashboard-legal.css
   Compliance layer for the Solmate (Nasdaq: SLMT) investor dashboard.
   Uses the existing theme tokens only (--color1..--color10, Inter).
   Nothing in here may hide, collapse or de-emphasise disclosure text.
   ------------------------------------------------------------------ */

/* --- 1. Top-of-page notice (Legal SII) -------------------------------
   Bordered, always visible, above all figures. Never collapsed,
   never a tooltip, never footer-only. */
.legal-notice {
    position: relative;
    border: 1px solid var(--color3);
    border-left: 4px solid var(--color4);
    border-radius: 1.5em;
    background: #00000080;
    backdrop-filter: blur(12px);
    padding: 2em 2.25em;
    color: var(--color2);
}
.legal-notice__title {
    font-size: .875em;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--color4);
    margin-bottom: 1.25em;
}
.legal-notice__body p {
    font-size: .8125em;
    line-height: 1.7;
}
.legal-notice__body p:not(:last-child) {
    margin-bottom: 1em;
}
.legal-notice__meta {
    margin-top: 1.5em;
    padding-top: 1.25em;
    border-top: 1px solid var(--color9);
    font-size: .8125em;
    line-height: 1.7;
    color: var(--color6);
}
.legal-notice__meta strong {
    color: var(--color7);
    font-weight: 600;
}
@media(max-width: 650px) {
    .legal-notice {
        padding: 1.75em 1.5em;
        border-radius: 1.25em;
    }
    .legal-notice__body p,
    .legal-notice__meta {
        font-size: .875em;
    }
}

/* --- 2. Volatility disclaimer beneath the treasury USD value (R2) ----
   Rendered inline in the card, directly under the USD fair value. */
.fig-disclaimer {
    margin-top: .875em;
    padding-top: .875em;
    border-top: 1px solid var(--color9);
    font-size: .75em;
    line-height: 1.7;
    color: var(--color6);
}
.fig-disclaimer strong {
    color: var(--color2);
    font-weight: 600;
}
@media(max-width: 650px) {
    .fig-disclaimer {
        font-size: .8125em;
    }
}

/* --- 3. Snapshot chip: "ESTIMATED - AS OF ..." ------------------------
   The .titleSmall theme class already carries the uppercase/tracking
   treatment; this only guarantees it never wraps into an ambiguous
   half-label on narrow screens. */
.card .titleSmall p {
    margin: 0;
    text-wrap: balance;
}

/* --- 4. Derived-value line under a headline figure (R4) --------------- */
.card-derived {
    display: block;
    color: var(--color2);
}
.card-derived .card-derived__label {
    display: block;
    font-size: .75em;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--color6);
    margin-bottom: .25em;
}

/* --- 5. Methodology block -------------------------------------------- */
.methodology {
    border-top: 1px solid var(--color9);
    padding-top: 2em;
    margin-top: 1em;
    color: var(--color6);
}
/* specificity has to beat the theme's `.dflt h2 { font-size: 3.25rem }` */
.dflt .methodology .methodology__title,
.methodology__title {
    font-size: .875em;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--color2);
    margin: 0 0 1em;
}
.methodology p {
    font-size: .8125em;
    line-height: 1.8;
}
.methodology p:not(:last-child) {
    margin-bottom: .875em;
}
@media(max-width: 650px) {
    .methodology p {
        font-size: .875em;
    }
}

/* --- 6. Staging banner ------------------------------------------------
   Present on staging only; stripped by the production build. */
.staging-banner {
    position: fixed;
    right: 0;
    bottom: 0;
    z-index: 999;
    background: var(--color8);
    color: var(--color1);
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    padding: .75em 1.5em;
    pointer-events: none;
}
/* Shared preview copy: the notice has to survive being forwarded, so it spans
   the full width and states plainly that this is not an official disclosure. */
.staging-banner--preview {
    left: 0;
    text-align: center;
    letter-spacing: .1em;
    padding: .875em 1.5em;
    box-shadow: 0 -8px 24px #00000080;
}
@media(max-width: 650px) {
    .staging-banner--preview {
        font-size: .6875rem;
        letter-spacing: .06em;
        padding: .75em 1em;
    }
}
/* Print-only twin of the preview banner; see the @media print block. */
.staging-banner--printtop {
    display: none;
}

/* --- 6b. Mobile horizontal-overflow fix ------------------------------
   The theme renders the world map at `width: 120vw` with `left: 0`, which
   widens the initial containing block on phones. The result is that card
   content — including the R2 volatility disclaimer — is pushed off the
   right edge and clipped. Disclosure text that is cut off is not
   "visibly rendered", so this is a compliance fix, not a cosmetic one.
   The map keeps its intended 120vw zoom; it is simply centred and the
   viewport is prevented from scrolling horizontally. */
@media(max-width: 650px) {
    html {
        overflow-x: hidden;
    }
    .mapa-box {
        left: -10vw;
        right: auto;
    }
}

/* --- 6c. NAV & Valuation (MOCKUP — pending Legal approval) ------------
   Uses only the existing theme tokens. Nothing here animates: the bar
   widths are written as inline percentages by the build, so the chart has
   no runtime behaviour of any kind. */
.mockup-banner {
    border: 1px dashed var(--color8);
    border-radius: .75em;
    background: #EB575714;
    color: var(--color8);
    font-size: .75em;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    text-align: center;
    padding: 1em 1.5em;
    line-height: 1.5;
}

.nav-bars {
    display: flex;
    flex-direction: column;
    gap: 1.5em;
}
.nav-bar__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1em;
    margin-bottom: .75em;
}
.nav-bar__label {
    font-size: .75em;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--color6);
}
.nav-bar__value {
    font-size: 1.875em;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -.03em;
    color: var(--color4);
}
.nav-bar__value--muted {
    color: var(--color2);
}
.nav-bar__track {
    height: .75em;
    border-radius: .375em;
    background: #FFFFFF0D;
    overflow: hidden;
}
.nav-bar__fill {
    height: 100%;
    border-radius: inherit;
}
.nav-bar__fill--treasury {
    background: linear-gradient(90deg, var(--color3) 0%, var(--color4) 100%);
    box-shadow: 0 0 24px #00FF803D;
}
.nav-bar__fill--mcap {
    background: linear-gradient(90deg, #2A2C33 0%, var(--color6) 100%);
}
@media(max-width: 650px) {
    .nav-bar__head {
        flex-direction: column;
        align-items: flex-start;
        gap: .25em;
    }
    .nav-bar__value {
        font-size: 1.5em;
    }
}

.nav-disclaimer {
    border: 1px solid var(--color9);
    border-left: 3px solid var(--color3);
    border-radius: 1em;
    padding: 1.5em 1.75em;
    color: var(--color6);
}
.nav-disclaimer p {
    font-size: .8125em;
    line-height: 1.8;
}
.nav-disclaimer p:not(:last-child) {
    margin-bottom: 1em;
}
.nav-disclaimer__inputs strong {
    color: var(--color8);
    font-weight: 600;
}
@media(max-width: 650px) {
    .nav-disclaimer {
        padding: 1.25em 1.25em;
    }
    .nav-disclaimer p {
        font-size: .875em;
    }
}

/* --- 6d. Source table -------------------------------------------------
   Every published figure names its source and the time it was retrieved.
   On a phone a three-column table squeezes each column to ~128px, which
   turns a quoted filing into a ribbon three words wide and splits a
   timestamp over three lines. Below 650px each row is restacked as a
   labelled block instead. The header row is kept for screen readers.
   Nothing is hidden or truncated — this is disclosure text. */
.source-table {
    width: 100%;
    border-collapse: collapse;
    margin: 1.25em 0 0;
    font-size: .8125em;
    line-height: 1.6;
}
.source-table thead th {
    font-size: .8125em;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--color6);
    text-align: left;
    padding: 0 1.25em .6em 0;
    border-bottom: 1px solid var(--color3);
}
.source-table tbody th,
.source-table tbody td {
    text-align: left;
    vertical-align: top;
    padding: .85em 1.25em .85em 0;
    border-bottom: 1px solid var(--color9);
    overflow-wrap: anywhere;
}
.source-table tbody tr:last-child th,
.source-table tbody tr:last-child td {
    border-bottom: 0;
}
.source-table tbody th {
    width: 12em;
    font-weight: 600;
    color: var(--color7);
}
.source-table a {
    color: var(--color4);
    text-decoration: underline;
    text-underline-offset: 2px;
}
.source-table .src-when {
    width: 11em;
    padding-right: 0;
    color: var(--color6);
    white-space: nowrap;
}
.source-table .src-when--none {
    font-style: italic;
    white-space: normal;
}

@media(max-width: 650px) {
    /* The header row stops being a useful column key once the columns are
       gone, but it still labels the data for assistive technology, so it is
       moved out of view rather than removed. */
    .source-table thead {
        position: absolute;
        width: 1px;
        height: 1px;
        margin: -1px;
        padding: 0;
        overflow: hidden;
        clip: rect(0 0 0 0);
        clip-path: inset(50%);
        white-space: nowrap;
        border: 0;
    }
    .source-table,
    .source-table tbody,
    .source-table tr,
    .source-table tbody th,
    .source-table tbody td {
        display: block;
        width: auto;
    }
    .source-table tr {
        padding: 1.1em 0;
        border-bottom: 1px solid var(--color9);
    }
    .source-table tr:last-child {
        border-bottom: 0;
    }
    .source-table tbody th,
    .source-table tbody td {
        padding: 0;
        border-bottom: 0;
    }
    .source-table tbody th {
        font-size: .8125em;
        letter-spacing: .1em;
        text-transform: uppercase;
        color: var(--color6);
        margin-bottom: .4em;
    }
    .source-table tbody td {
        font-size: 1em;
        margin-bottom: .35em;
    }
    /* A bare timestamp under a source reads as part of it. Name it. */
    .source-table .src-when::before {
        content: "Retrieved ";
        color: var(--color6);
    }
    .source-table .src-when {
        white-space: normal;
        font-size: .9375em;
    }
    .source-table .src-when--none::before {
        content: "";
    }
}

/* --- 7. Screen-reader-only helper ------------------------------------ */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* --- 8. Print / PDF export -------------------------------------------
   A PDF is how this page most often leaves the building, so the export has
   to carry the same disclosure weight as the screen. The dark theme is kept
   (a recoloured export would not look like the page anyone approved), the
   navigation and background map are dropped, and no disclosure block is
   allowed to split across a page break.
   NOTE: an earlier revision set `color: #000` here, which rendered the
   disclaimers invisible against the black background. Fixed. */
@media print {
    html,
    body {
        background: var(--color10) !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
    #header,
    .mapa-box,
    .skip {
        display: none !important;
    }
    /* The DEVELOP VERSION chip is internal and never prints. Listing the two
       preview classes explicitly, rather than excluding them with :not(),
       keeps this selector from out-specifying the rule that shows the printed
       banner below. */
    .staging-banner {
        display: none !important;
    }
    /* A fixed banner is positioned inside the page area, so it moves down with
       any @page margin and clips the first line of every page. The printed
       export therefore drops the fixed bar and uses the static one instead. */
    .staging-banner.staging-banner--printtop {
        display: block !important;
        position: static;
        width: 100%;
        text-align: center;
        letter-spacing: .1em;
        padding: 1em 1.5em;
        margin: 0 0 8mm;
    }
    @page {
        margin: 0 0 6mm 0;
    }
    .legal-notice,
    .fig-disclaimer,
    .methodology,
    .card {
        break-inside: avoid;
    }
    .card,
    .legal-notice {
        backdrop-filter: none;
    }
}

/* --- 1b. Sub-headings inside the top notice ---------------------------
   Howard's 7 Aug redline adds two titled blocks ("Important Information
   About the Market Price of Our Ordinary Shares" and "We Are Not an ETF
   or ETP") inside the same notice, so they need a heading level that sits
   below the notice title without competing with it. */
.legal-notice__sub {
    font-size: .8125em;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--color2);
    margin: 2em 0 1em;
    padding-top: 1.5em;
    border-top: 1px solid var(--color9);
}
.legal-notice > .legal-notice__sub:first-of-type {
    margin-top: 2em;
}

/* Unresolved fill-in markers from Legal. Deliberately loud: they are the
   reason a production build is refused, so they must be impossible to miss
   in review. */
.legal-todo {
    background: #EB575726;
    color: var(--color8);
    font-weight: 700;
    padding: 0 .35em;
    border-radius: .25em;
    border: 1px dashed var(--color8);
}