/* ============================================================================
   report-theme.css — shared visual theme for the public report pages
   ("Green ink × Marketing banner"). Loaded under the Reporting asset flag
   (HeadAssets.razor), after self-audit.css and before app.css / the scoped
   bundle, on /report and /survey-prep. NOT loaded by the marketing site.

   This file is the single source of truth for the report theme's tokens and
   its shared component classes (banner, section titles, pills, cards, buttons).
   Page-specific .razor.css files keep only layout; colour/border/type flow
   from the tokens and rt- classes defined here.

   Phase 0: tokens only. Component classes are added in later phases.
   ============================================================================ */

:root {
    /* --- Core theme palette --- */
    --rt-ink: #123530;                 /* deep green-black: structure, active fills, headings */
    --rt-ink-soft: #1c433c;            /* ink hover/secondary */
    --rt-accent: #0ba292;              /* Assisto green (matches --assisto-primary) */
    --rt-accent-strong: #0B8F81;       /* focus/link green (matches --assisto-primary-focus) */
    --rt-lime: #bcdf0c;                /* highlight lime — only on ink/green grounds */
    --rt-marker: #e4f286;              /* marker-highlight behind dark text, "show all" bar */
    --rt-mist: #f2faf7;                /* zebra rows, KPI card fill */
    --rt-chip-bg: #e3f4f0;             /* "why" / F-tag chip fill on light */
    --rt-chip-text: #0b6e63;           /* "why" chip text */
    --rt-border: #d3e5df;              /* card / light borders */
    --rt-page-bg: #ffffff;             /* report body ground (kept white) */

    /* --- Text --- */
    --rt-text: #16261f;                /* body text */
    --rt-text-secondary: #3f524c;      /* secondary text — replaces faded #6b7280/#9ca3af */
    --rt-text-on-ink: #ffffff;         /* text on ink/green grounds */

    /* --- Semantic (kept deliberately separate from the brand accent) --- */
    --rt-worse: #b3413a;               /* worse / up / fail */
    --rt-better: #1d7a4f;              /* better / down / pass */

    /* --- Severity ramp (re-tuned from the legacy #d80162 pink / #95b0aa grey) --- */
    --rt-sev-l1: #7f9b94;              /* minimal */
    --rt-sev-l2: #e9c403;              /* moderate (amber fill) */
    --rt-sev-l2-text: #8a6a00;         /* moderate text on light */
    --rt-sev-l3: #e16b21;              /* high (orange) */
    --rt-sev-l4: #b3413a;              /* critical / immediate jeopardy (theme red) */

    /* --- Banner --- */
    --rt-banner-bg: var(--rt-accent);
    --rt-banner-image: url("/_content/Client.Library/images/banner-bg.svg");

    /* --- Page column --- */
    /* Single knob for the survey-prep content column. Every survey-prep view's
       scoped CSS reads this (with a matching fallback); the banner title/header
       column below derives from it, so they stay aligned when it changes. */
    --rt-page-max: 1080px;

    /* ------------------------------------------------------------------ */
    /* Formalize tokens that the survey-prep scoped CSS references but were  */
    /* never defined (previously rendering their var() fallbacks, with a     */
    /* stale #0b8f81 accent). Defining them here makes the fallbacks inert.  */
    /* ------------------------------------------------------------------ */
    --sa-strong: var(--rt-ink);
    --sa-border: var(--rt-border);
    --assisto-primary-soft: var(--rt-chip-bg);
    --assisto-primary-border: rgba(11, 162, 146, 0.35);
}

/* ============================================================================
   Banner header — the marketing-site teal band with the concentric-ring motif.
   The page's PublicReportHeader (logo + actions) and the page title/subtitle
   sit ON the banner; the first content block below floats up over its bottom
   edge (.rt-overlap). The embedded .header is neutralised to transparent white
   here (it defaults to a flat grey bar); !important is required only because
   the component's scoped CSS loads after this file.
   ============================================================================ */
.rt-banner {
    background-color: var(--rt-banner-bg);
    background-image: var(--rt-banner-image);
    background-size: cover;
    background-position: top right;
    background-repeat: no-repeat;
    color: var(--rt-text-on-ink);
    padding-bottom: 66px;
    /* Pull the following content up so its first card floats over the banner's
       bottom edge. Kept on the banner (not the content) so it doesn't fight the
       content wrapper's own scoped `margin: 0 auto`. */
    margin-bottom: -48px;
}

.rt-banner .header {
    background-color: transparent !important;
    border-bottom: none !important;
    position: static !important;
}

/* Align the header row to the same centered column as the banner title below it
   (the component's own .header-container is max-width 850px but NOT auto-centered,
   which left the logo and the page title on different left edges). */
.rt-banner .header .header-container {
    max-width: calc(var(--rt-page-max) - 40px);
    margin: 0 auto;
    padding: 0 1.25rem;
}

/* The dark logo turns white on the banner; the action controls follow. The logo is
   page chrome here — the facility name below is the subject — so it steps back:
   smaller and slightly translucent. */
.rt-banner .header .logo-light {
    filter: var(--assisto-white-filter);
    height: 21px;
    margin: 0;
    opacity: 0.85;
}

.rt-banner .header .account-menu-trigger,
.rt-banner .header .share-button .a-button {
    color: #fff;
    border-color: rgba(255, 255, 255, 0.55);
}

/* Monthly Report: the header stays sticky (a fixed nav rail sits just below it), so
   rather than the tall survey-prep title banner it takes a slim green ring-motif bar
   with a white logo. Scoped to .rt-report-banner so the ProviderPage header — which
   also loads this stylesheet via the All asset flag — is left untouched. */
.rt-report-banner .header {
    background-color: var(--rt-banner-bg) !important;
    background-image: var(--rt-banner-image) !important;
    background-size: cover;
    background-position: top right;
    border-bottom: none !important;
}

.rt-report-banner .header .logo-light {
    filter: var(--assisto-white-filter);
}

.rt-report-banner .header .account-menu-trigger,
.rt-report-banner .header .share-button .a-button {
    color: #fff;
    border-color: rgba(255, 255, 255, 0.55);
}

.rt-banner-head {
    max-width: calc(var(--rt-page-max) - 40px);
    margin: 0 auto;
    padding: 1.1rem 1.25rem 0;
}

.rt-banner-title {
    margin: 0;
    font-size: 1.85rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.01em;
    color: #fff;
    text-wrap: balance;
}

.rt-banner-sub {
    margin: 0.4rem 0 0;
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.9);
}

/* The content wrapper sits above the banner's negative-margin overlap zone
   (position/z-index only — no margin, so it never fights a scoped `margin`). */
.rt-overlap {
    position: relative;
    z-index: 1;
}

/* ============================================================================
   Ruled section title — bold ink with a 3px green underline. Shared by both
   report families (survey prep + monthly report).
   ============================================================================ */
.rt-section-title {
    display: inline-block;
    margin: 0 0 0.25rem;
    padding-bottom: 7px;
    font-size: 1.3rem;
    font-weight: 700;
    line-height: 1.25;
    color: var(--rt-ink);
    border-bottom: 3px solid var(--rt-accent);
}

.rt-section-intro {
    margin: 0.5rem 0 0.9rem;
    font-size: 0.95rem;
    line-height: 1.55;
    color: var(--rt-text-secondary);
}

/* ============================================================================
   Buttons.
   ============================================================================ */
.rt-btn,
.rt-btn-ghost {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    border-radius: 10px;
    font-size: 0.95rem;
    font-weight: 650;
    cursor: pointer;
    border: 1.5px solid transparent;
    text-decoration: none;
}

.rt-btn {
    background: var(--rt-accent);
    color: #fff;
}

.rt-btn:hover { background: var(--rt-accent-strong); }

.rt-btn-ghost {
    background: #fff;
    color: var(--rt-ink);
    border-color: var(--rt-ink);
}

.rt-btn-ghost:hover { background: var(--rt-mist); }

/* ============================================================================
   "How to use this report" orientation card — unifies the old .report-howto-*
   (monthly report) and .sp-howto-* (survey prep) into one shared pattern.
   ============================================================================ */
.rt-howto {
    margin: 0 0 1.75rem;
}

.rt-howto-lead {
    margin: 0.4rem 0 0.9rem;
    font-size: 0.95rem;
    color: var(--rt-text-secondary);
}

.rt-howto-steps {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.rt-howto-step {
    display: flex;
    align-items: flex-start;
    gap: 0.8rem;
    padding: 0.7rem 0.9rem;
    border: 1.5px solid var(--rt-border);
    border-radius: 11px;
    background: #fff;
    text-decoration: none;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

.rt-howto-step:hover,
.rt-howto-step:focus-visible {
    border-color: var(--rt-accent);
    background: var(--rt-mist);
    outline: none;
}

.rt-howto-ico {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.15rem;
    height: 2.15rem;
    border-radius: 10px;
    color: #3d4d05;
    background: var(--rt-marker);
}

.rt-howto-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.rt-howto-step-title {
    font-size: 0.98rem;
    font-weight: 650;
    color: var(--rt-text);
}

.rt-howto-step-desc {
    font-size: 0.88rem;
    line-height: 1.5;
    color: var(--rt-text-secondary);
}

.rt-howto-beta {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 7px;
    border-radius: 5px;
    background: var(--rt-ink);
    color: var(--rt-lime);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    vertical-align: 2px;
}

.rt-howto-arrow {
    flex-shrink: 0;
    align-self: center;
    margin-left: auto;
    display: inline-flex;
    color: var(--rt-accent);
    opacity: 0;
    transform: translateX(-4px);
    transition: opacity 0.15s ease, transform 0.15s ease;
}

.rt-howto-arrow svg {
    width: 1.05rem;
    height: 1.05rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.rt-howto-step:hover .rt-howto-arrow,
.rt-howto-step:focus-visible .rt-howto-arrow {
    opacity: 1;
    transform: translateX(0);
}

@media (max-width: 640px) {
    .rt-banner { padding-bottom: 54px; }
    .rt-overlap { margin-top: -40px; }
    .rt-banner-title { font-size: 1.55rem; }
}

/* Print / binder: the banner must never flood a PDF page with ink. */
@media print {
    .rt-banner {
        background: none !important;
        color: #111 !important;
        padding-bottom: 0;
        margin-bottom: 0;
    }
    .rt-banner-title, .rt-banner-sub { color: #111 !important; }
    .rt-report-banner .header {
        background: none !important;
        background-image: none !important;
    }
}

/* (The self-audit checklist and mock-survey bodies are themed at their base in
   self-audit.css — ink-bordered station cards, zebra steps, lime checkboxes,
   ink+lime F-tag chips, theme-red severity — so every host matches, including
   marketing's shared modal.) */