/* Reef ICP — shared dashboard styles
 *
 * ReefDudes brand palette: pale sky-blue page wash, white inner cards,
 * saturated brand-blue chrome, warm cool-gray secondary text. Bright and
 * friendly, never moody. Tokens follow ReefDudes canonical hex values; the
 * legacy --reef-* names are preserved (re-pointed to the new colors) so
 * existing rules continue to work without rewriting every reference.
 *
 * Color budget (visual weight):
 *   60% tinted neutrals (panels, page wash, body text, muted labels)
 *   30% brand blue (header band, primary CTAs, focus rings, info panels, links)
 *   10% severity (good / caution / warning / danger) — only where it carries meaning
 */

.reef-icp-public,
.reef-icp-dashboard {
    /* light scrollbars / number-spinners / dropdowns regardless of OS theme */
    color-scheme: light;

    /* === ReefDudes canonical tokens (must match the site's :root) ===
     * Decorative tokens have a paired *-text variant. The decorative one
     * is for backgrounds, gradient stops, illustrative fills. The *-text
     * variant is REQUIRED any time text or text-sized icons land on a
     * tinted background — using the decorative color as text on a tint
     * fails AA contrast. */
    --rd-bg:               #f5f9fd;
    --rd-bg-2:             #e8f0f9;
    --rd-panel:            #ffffff;
    --rd-panel-2:          #f4f8fc;
    --rd-text:             #1c3344;
    --rd-text-2:           #46586a;
    --rd-muted:            #7a8a96;     /* tertiary, only on white */
    --rd-border:           #d8e1eb;
    --rd-border-strong:    #a8b6c4;

    --rd-accent:           #3a8ee0;     /* sky blue — primary brand (decorative) */
    --rd-accent-hover:     #4ea0ea;
    --rd-accent-soft:      #e8f1fb;     /* tinted accent surface */
    --rd-accent-text:      #1f5da0;     /* accent for body text on tinted bg — AA */
    --rd-accent-text-soft: #1a4f8a;     /* hover state for accent text */

    --rd-logo-cyan:        #3fb8c8;
    --rd-logo-cyan-hover:  #4ec8d6;
    --rd-logo-cyan-text:   #1f6a78;
    --rd-logo-cyan-text-soft: #175363;

    --rd-coral:            #ff7e62;
    --rd-actinic:          #5aa6e8;
    --rd-focus-ring:       rgba(58, 142, 224, 0.30);

    --rd-grad-button:      linear-gradient(180deg, #4ea0ea 0%, #3a8ee0 100%);
    --rd-shadow-card:      0 1px 2px rgba(28, 75, 130, 0.04),
                           0 8px 24px rgba(28, 75, 130, 0.06);
    --rd-shadow-card-hover: 0 2px 4px rgba(28, 75, 130, 0.06),
                            0 14px 36px rgba(28, 75, 130, 0.18);

    /* === Legacy --reef-* aliases pointing at brand values.
     * Existing selectors throughout the file reference these names; the
     * dual-token rule applies when these are used for TEXT — see
     * --reef-deep-text for the text-safe accent text color. === */
    --reef-ink:        var(--rd-text);
    --reef-ink-soft:   var(--rd-text-2);
    --reef-ink-faint:  var(--rd-muted);

    --reef-paper:      var(--rd-panel);
    --reef-surface:    var(--rd-panel);
    --reef-surface-2:  var(--rd-panel-2);
    --reef-surface-3:  var(--rd-bg-2);
    --reef-line:       var(--rd-border);
    --reef-line-strong:var(--rd-border-strong);

    --reef-deep:       #2c7bc7;                    /* CTA gradient bottom — decorative */
    --reef-deep-text:  var(--rd-accent-text);      /* use this when "deep" lands as text */
    --reef-tide:       var(--rd-accent);           /* decorative brand blue */
    --reef-tide-text:  var(--rd-accent-text);      /* use when "tide" lands as text */
    --reef-aqua:       var(--rd-accent-hover);
    --reef-deep-tint:  var(--rd-accent-soft);

    /* === Semantic — DO NOT rebrand. Hex equivalents of the brand spec. === */
    --sev-good:        #2d8e6f;
    --sev-good-tint:   rgba(45, 142, 111, 0.12);
    --sev-good-edge:   rgba(45, 142, 111, 0.45);
    --sev-good-text:   #1f6651;

    --sev-caution:     #c47a1c;
    --sev-caution-tint:rgba(196, 122, 28, 0.14);
    --sev-caution-edge:rgba(196, 122, 28, 0.45);
    --sev-caution-text:#8a5510;

    --sev-warning:     #c44a4a;
    --sev-warning-tint:rgba(196, 74, 74, 0.14);
    --sev-warning-edge:rgba(196, 74, 74, 0.45);
    --sev-warning-text:#8a2d2d;

    --sev-danger:      #a83333;
    --sev-danger-tint: rgba(168, 51, 51, 0.14);
    --sev-danger-edge: rgba(168, 51, 51, 0.50);
    --sev-danger-text: #6f1f1f;

    --sev-info:        var(--rd-accent);
    --sev-info-tint:   var(--rd-accent-soft);
    --sev-info-edge:   rgba(58, 142, 224, 0.30);
    --sev-info-text:   var(--rd-accent-text);

    --reef-radius:     14px;     /* large card radius (12-16 range per brand) */
    --reef-radius-sm:  10px;     /* inputs / small cards */
    --reef-radius-xs:  8px;      /* buttons */
    --reef-shadow:     var(--rd-shadow-card);
    --reef-shadow-lift:var(--rd-shadow-card-hover);

    color: var(--rd-text-2);
    background:
        linear-gradient(180deg, var(--rd-bg) 0%, var(--rd-bg-2) 100%);
    line-height: 1.55;
    max-width: 1080px;
    margin: 24px auto;
    padding: clamp(20px, 4vw, 40px);
    border-radius: var(--reef-radius);
    /* Inherit Poppins from the parent ReefDudes theme when present;
     * fall back to the system stack when the plugin loads outside the theme. */
    font-family: Poppins, -apple-system, BlinkMacSystemFont, "Segoe UI",
                 Roboto, "Helvetica Neue", Arial, sans-serif;
    font-feature-settings: "ss01", "cv11", "tnum";
}

/* ============================================================ HEADER */

.reef-icp-summary {
    /* Three-column at-a-glance overview:
     *   [score gauge]  [tank meta + counts]  [category bars]
     * The first column (score) is auto-width to the gauge's intrinsic
     * size, the middle column flexes, and the categories column has a
     * minimum so the bars stay readable.
     *
     * On medium viewports (~720–960 px) the categories column drops
     * below the meta on its own row to avoid cramming. On phones
     * everything stacks single-column with the score above. */
    display: grid;
    grid-template-columns: auto 1fr minmax(240px, 1.1fr);
    align-items: center;
    gap: 24px 28px;
    padding: 24px 28px;
    border-radius: var(--reef-radius);
    border: 1px solid var(--reef-line);
    background: var(--reef-surface);
    box-shadow: var(--reef-shadow);
    margin-bottom: 22px;
    position: relative;
    overflow: hidden;
}
.reef-icp-summary-meta {
    min-width: 0;       /* allow shrink below content size */
}

/* Category bars panel inside the header — the third column on desktop.
 * Uses the same .reef-icp-cat-list rules below so the bar styling
 * stays in one place. */
.reef-icp-summary-cats {
    min-width: 0;
}
.reef-icp-summary-cats-title {
    margin: 0 0 8px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--rd-text-2);
    line-height: 1.2;
}

/* Medium viewport: drop categories to a second row below score + meta.
 * Score stays its column-1 size; meta takes full remaining width on the
 * top row; cats span both columns 2-3 below. */
@media (max-width: 880px) {
    .reef-icp-summary {
        grid-template-columns: auto 1fr;
    }
    .reef-icp-summary-cats {
        grid-column: 1 / -1;
        padding-top: 14px;
        border-top: 1px solid var(--reef-line);
    }
    .reef-icp-summary-cats-title {
        margin-bottom: 10px;
    }
}

@media (max-width: 540px) {
    /* On phones the gauge moves above the meta block — score reads first
     * (it's the headline), then tank info, then issue chips, then the
     * category bars at the bottom of the card. */
    .reef-icp-summary {
        grid-template-columns: 1fr;
        gap: 16px;
        padding: 20px 18px;
    }
    .reef-icp-summary .reef-icp-score {
        justify-self: center;
    }
    .reef-icp-summary-cats {
        grid-column: 1;
        padding-top: 14px;
        border-top: 1px solid var(--reef-line);
    }
}

/* The horizontal accent bar above the summary uses the severity hue
 * but lives at the top of the card, NOT as a side stripe — and it
 * earns its place by communicating overall status at a glance. */
.reef-icp-summary::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 4px;
    background: var(--reef-deep);
    opacity: 0.85;
}

/* The at-a-glance card chrome stays brand-blue on every report — the
 * severity story is told by the gauge color and the issue chips, NOT by
 * flooding the whole header in red when things are bad. A red card framed
 * the report as failure even when most of the chemistry was healthy. The
 * blue tint reads as "your report" and lets the embedded indicators do
 * the actual signaling. */
.reef-icp-status-bg-good::before,
.reef-icp-status-bg-caution::before,
.reef-icp-status-bg-warning::before,
.reef-icp-status-bg-danger::before {
    background: var(--rd-accent);
}
.reef-icp-status-bg-good,
.reef-icp-status-bg-caution,
.reef-icp-status-bg-warning,
.reef-icp-status-bg-danger {
    background: linear-gradient(180deg, var(--rd-accent-soft) 0%, var(--reef-surface) 60%);
}

.reef-icp-summary-meta h2 {
    margin: 0 0 6px;
    font-size: 22px;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--reef-ink);
    /* Hardening: tank names can be 80 chars or pure CJK or emoji-only;
     * wrap rather than overflow into the score gauge column. The
     * meta wrapper already has min-width: 0 so the flex shrink works. */
    overflow-wrap: anywhere;
    word-break: normal;
    line-height: 1.2;
}
.reef-icp-summary-meta p {
    margin: 0;
    color: var(--reef-ink-soft);
    font-size: 14px;
    /* Same hardening — long lab names + dates shouldn't push the gauge. */
    overflow-wrap: anywhere;
}

/* ====================== SCORE GAUGE — SVG donut ======================
 *
 * Inspired by the gauges other reef-test labs use (ATI, Triton). The
 * donut tells the story even at a glance: empty + red ring = trouble,
 * full + green ring = looking good. The bare number used to read as
 * "broken" at score 0; the gauge frames it as "you're at the floor of
 * the scale" which is more honest and emotionally cleaner.
 *
 * Layout:
 *   - SVG donut occupies 144 px on desktop, 112 px on mobile
 *   - Center text is plain HTML (number + suffix + label) absolute-positioned
 *     over the SVG so we get full control of typography without fighting
 *     SVG <text> font inheritance quirks across browsers
 */
.reef-icp-score {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: clamp(112px, 18vw, 144px);
    height: clamp(112px, 18vw, 144px);
    flex-shrink: 0;
}
.reef-icp-score-svg {
    display: block;
    width: 100%;
    height: 100%;
}
.reef-icp-score-track {
    /* Faint background ring — lives on the "you have not earned this yet"
     * side of the gauge. Tinted neutral so it doesn't compete with the
     * filled portion. */
    stroke: var(--rd-bg-2);
}
.reef-icp-score-fill {
    /* The filled portion. Severity-colored by a status modifier on the
     * outer wrapper. Smooth transition so the gauge animates in if the
     * score updates client-side later. */
    transition: stroke-dasharray 480ms cubic-bezier(0.25, 1, 0.5, 1);
}
.reef-icp-score-status-good    .reef-icp-score-fill { stroke: var(--sev-good); }
.reef-icp-score-status-caution .reef-icp-score-fill { stroke: var(--sev-caution); }
.reef-icp-score-status-warning .reef-icp-score-fill { stroke: var(--sev-warning); }
.reef-icp-score-status-danger  .reef-icp-score-fill { stroke: var(--sev-danger); }

/*
 * Floor marker — replaces the previous "0.5 px stub + linecap=round" hack
 * for score === 0. A dedicated filled circle at the 12 o'clock position,
 * sized at half the ring's stroke width so it visually corresponds to a
 * "you're at the bottom of the ring" indicator. The colored mark plus
 * the danger-tinted track communicates "score is at the floor" instead
 * of reading as a render artifact.
 */
.reef-icp-score-floor-mark {
    fill: var(--reef-surface);
    stroke: var(--rd-bg-2);
    stroke-width: 1;
}
.reef-icp-score-status-good    .reef-icp-score-floor-mark { fill: var(--sev-good); }
.reef-icp-score-status-caution .reef-icp-score-floor-mark { fill: var(--sev-caution); }
.reef-icp-score-status-warning .reef-icp-score-floor-mark { fill: var(--sev-warning); }
.reef-icp-score-status-danger  .reef-icp-score-floor-mark { fill: var(--sev-danger); }

/* When the gauge is at the floor, tint the track in the severity color
 * at low alpha so the empty ring reads as "danger zone" rather than as
 * "the gauge didn't render." */
.reef-icp-score-is-floor.reef-icp-score-status-good    .reef-icp-score-track { stroke: var(--sev-good-tint); }
.reef-icp-score-is-floor.reef-icp-score-status-caution .reef-icp-score-track { stroke: var(--sev-caution-tint); }
.reef-icp-score-is-floor.reef-icp-score-status-warning .reef-icp-score-track { stroke: var(--sev-warning-tint); }
.reef-icp-score-is-floor.reef-icp-score-status-danger  .reef-icp-score-track { stroke: var(--sev-danger-tint); }

@media (prefers-reduced-motion: reduce) {
    .reef-icp-score-fill { transition: none; }
}

.reef-icp-score-text {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 6px;
    line-height: 1;
}
.reef-icp-score-value {
    font-size: clamp(32px, 5vw, 44px);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.025em;
    font-variant-numeric: tabular-nums;
    color: var(--rd-text);
    /* Numeric readouts use the system monospace stack so columns line up
     * across measurement rows and the report reads as a lab tool, not a
     * marketing page. The whole surrounding interface stays Poppins —
     * this is the only place we depart so prose vs. data is unambiguous.
     * No web font load: system stack only. */
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, "Roboto Mono", monospace;
}
.reef-icp-score-status-good    .reef-icp-score-value { color: var(--sev-good-text); }
.reef-icp-score-status-caution .reef-icp-score-value { color: var(--sev-caution-text); }
.reef-icp-score-status-warning .reef-icp-score-value { color: var(--sev-warning-text); }
.reef-icp-score-status-danger  .reef-icp-score-value { color: var(--sev-danger-text); }

/* "Tank Health" caption sitting under the score number. Brand-eyebrow
 * pattern (small caps, letter-spaced) so the score reads as the primary
 * value with the caption as a quiet anchor. The previous suffix
 * ("/ 100") + status word ("Urgent issues") combo punished users whose
 * score was anywhere below the top; severity is still telegraphed by
 * the ring color and the floor marker, which is enough. */
.reef-icp-score-label {
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    margin-top: 6px;
    max-width: 110px;
    color: var(--rd-text-2);
    line-height: 1.15;
}
/* Severity-tinted label color so the caption doesn't look untethered
 * from the gauge color. Subtle — the ring + floor marker still carry
 * the bulk of the severity signal. */
.reef-icp-score-status-good    .reef-icp-score-label { color: var(--sev-good-text); }
.reef-icp-score-status-caution .reef-icp-score-label { color: var(--sev-caution-text); }
.reef-icp-score-status-warning .reef-icp-score-label { color: var(--sev-warning-text); }
.reef-icp-score-status-danger  .reef-icp-score-label { color: var(--sev-danger-text); }

/* -------- Severity counters under the title -------- */
.reef-icp-issue-counts {
    list-style: none;
    margin: 14px 0 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.reef-icp-issue-count {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    padding: 6px 12px 6px 10px;
    border-radius: 999px;
    font-size: 12.5px;
    line-height: 1.2;
    background: var(--reef-surface-2);
    border: 1px solid var(--reef-line);
    color: var(--reef-ink);
    font-variant-numeric: tabular-nums;
}
.reef-icp-issue-num {
    font-weight: 800;
    font-size: 14px;
    min-width: 1ch;
    text-align: right;
}
.reef-icp-issue-lbl {
    /* Pill label — matches the ReefDudes badge typography. */
    font-weight: 700;
    font-size: 11px;
    color: var(--reef-ink-soft);
    text-transform: uppercase;
    letter-spacing: 0.14em;
}

/* Severity-tinted chips. Background uses the severity tint variants
 * already defined in the token block. */
/* Severity-tinted count chips. Backgrounds use the *-tint variants;
 * numbers use the *-text variants per the dual-token rule (the saturated
 * decorative colors fail AA contrast on these light tints). */
.reef-icp-issue-count.reef-icp-sev-bg-danger {
    background: var(--sev-danger-tint);
    border-color: var(--sev-danger-edge);
}
.reef-icp-issue-count.reef-icp-sev-bg-danger .reef-icp-issue-num {
    color: var(--sev-danger-text);
}
.reef-icp-issue-count.reef-icp-sev-bg-warning {
    background: var(--sev-warning-tint);
    border-color: var(--sev-warning-edge);
}
.reef-icp-issue-count.reef-icp-sev-bg-warning .reef-icp-issue-num {
    color: var(--sev-warning-text);
}
.reef-icp-issue-count.reef-icp-sev-bg-caution {
    background: var(--sev-caution-tint);
    border-color: var(--sev-caution-edge);
}
.reef-icp-issue-count.reef-icp-sev-bg-caution .reef-icp-issue-num {
    color: var(--sev-caution-text);
}
.reef-icp-issue-count.reef-icp-sev-bg-good {
    background: var(--sev-good-tint);
    border-color: var(--sev-good-edge);
}
.reef-icp-issue-count.reef-icp-sev-bg-good .reef-icp-issue-num {
    color: var(--sev-good-text);
}

/* Zero-count chips fade out — present for at-a-glance scanning but
 * visually de-emphasized so the eye lands on the non-zero ones. */
.reef-icp-issue-count.is-zero {
    opacity: 0.50;
    background: var(--reef-surface-2);
    border-color: var(--reef-line);
}
.reef-icp-issue-count.is-zero .reef-icp-issue-num,
.reef-icp-issue-count.is-zero .reef-icp-issue-lbl {
    color: var(--reef-ink-faint);
}

/* ============================================================ CATEGORIES
 *
 * Per-category quality breakdown. Lives inside the at-a-glance header
 * (.reef-icp-summary-cats) as the third column, replacing what used to
 * be a separate "Quality by category" section below the score banner.
 * Each row: label | progress-bar | percentage. The bar fill is
 * severity-tinted by the worst severity in that category — so a glance
 * tells you "Nutrients is the weak link" without scanning every element.
 *
 * Layout uses CSS grid for column alignment so wider labels (German
 * "Verunreinigungen") don't break the rhythm. The compact variant
 * inside .reef-icp-summary-cats overrides to a label-above-bar stack
 * pattern for the narrower header column.
 */
.reef-icp-cat-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 10px;
}
.reef-icp-cat-item {
    display: grid;
    grid-template-columns: minmax(120px, 1.4fr) minmax(100px, 3fr) auto auto;
    align-items: center;
    gap: clamp(8px, 1.5vw, 16px);
    font-size: 13px;
    color: var(--rd-text-2);
}
.reef-icp-cat-label {
    font-weight: 600;
    color: var(--rd-text);
}
.reef-icp-cat-bar {
    position: relative;
    display: block;
    height: 8px;
    background: var(--rd-bg-2);
    border-radius: 999px;
    overflow: hidden;
}
.reef-icp-cat-bar-fill {
    position: absolute;
    inset: 0 auto 0 0;
    border-radius: 999px;
    background: var(--rd-accent);
    transition: width 480ms cubic-bezier(0.25, 1, 0.5, 1);
}
.reef-icp-cat-good    .reef-icp-cat-bar-fill { background: var(--sev-good); }
.reef-icp-cat-caution .reef-icp-cat-bar-fill { background: var(--sev-caution); }
.reef-icp-cat-warning .reef-icp-cat-bar-fill { background: var(--sev-warning); }
.reef-icp-cat-danger  .reef-icp-cat-bar-fill { background: var(--sev-danger); }

@media (prefers-reduced-motion: reduce) {
    .reef-icp-cat-bar-fill { transition: none; }
}

.reef-icp-cat-pct {
    font-weight: 800;
    font-size: 14px;
    font-variant-numeric: tabular-nums;
    min-width: 3.2ch;
    text-align: right;
    color: var(--rd-text);
}
.reef-icp-cat-good    .reef-icp-cat-pct { color: var(--sev-good-text); }
.reef-icp-cat-caution .reef-icp-cat-pct { color: var(--sev-caution-text); }
.reef-icp-cat-warning .reef-icp-cat-pct { color: var(--sev-warning-text); }
.reef-icp-cat-danger  .reef-icp-cat-pct { color: var(--sev-danger-text); }

/*
 * Compact variant — when the category list lives inside the at-a-glance
 * header (.reef-icp-summary-cats), use a label-above-bar stack pattern
 * so each row fits cleanly in the narrower right column. The detail
 * cell ("3 / 5 ok") moves inline with the percentage to save vertical
 * space.
 */
.reef-icp-summary-cats .reef-icp-cat-list {
    gap: 8px;
}
.reef-icp-summary-cats .reef-icp-cat-item {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto;
    gap: 2px 8px;
    font-size: 12px;
}
.reef-icp-summary-cats .reef-icp-cat-label {
    grid-column: 1;
    grid-row: 1;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.2;
}
.reef-icp-summary-cats .reef-icp-cat-pct {
    grid-column: 2;
    grid-row: 1;
    font-size: 13px;
    line-height: 1.2;
}
.reef-icp-summary-cats .reef-icp-cat-bar {
    grid-column: 1 / -1;
    grid-row: 2;
    height: 6px;
}
.reef-icp-summary-cats .reef-icp-cat-detail {
    /* Hide the "3 / 5 ok" detail in the compact header variant — the
     * percentage already carries the same information at a glance, and
     * the narrower column is tight on horizontal space. */
    display: none;
}

.reef-icp-cat-detail {
    font-size: 12px;
    color: var(--rd-muted);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

@media (max-width: 540px) {
    /* On narrow screens collapse to label / bar+pct so the row still
     * reads top-to-bottom. The detail count moves under the label. */
    .reef-icp-cat-item {
        grid-template-columns: 1fr auto;
        grid-template-areas:
            "label  pct"
            "bar    bar"
            "detail detail";
        gap: 4px 12px;
    }
    .reef-icp-cat-label  { grid-area: label; }
    .reef-icp-cat-bar    { grid-area: bar; height: 6px; }
    .reef-icp-cat-pct    { grid-area: pct; }
    .reef-icp-cat-detail { grid-area: detail; font-size: 11px; }
}

/* ============================================================ A11Y UTILITY
 *
 * Visually hidden but screen-reader-accessible. Defined locally rather
 * than relying on the parent theme's .screen-reader-text so this plugin
 * keeps working when loaded in non-WordPress contexts or themes that
 * don't ship the WP utility class. Standard "clip-path" recipe — modern
 * browsers honor this, and the legacy `clip` rect provides a fallback.
 */
.reef-icp-sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* ============================================================ SHARE
 *
 * Sharing the report URL is the social heart of the product (the brief
 * mentions forum-linked reports). Hardened to:
 *   - 44 px min-height on the input + button (WCAG 2.5.5 touch target)
 *   - Explicit Copy button with success feedback (no more Ctrl-C friction)
 *   - <label> association for screen readers
 *   - aria-live on the button so the "Copied" state is announced
 */
.reef-icp-share {
    margin: 0 0 26px;
    color: var(--reef-ink-soft);
}
.reef-icp-share-label {
    display: block;
    margin-bottom: 8px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--rd-text-2);
}
.reef-icp-share-label strong {
    color: inherit;
    font-weight: 700;
}
.reef-icp-share-row {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 10px;
}
.reef-icp-share-input {
    flex: 1 1 280px;
    min-width: 0;          /* allow shrink below content size for narrow viewports */
    min-height: 44px;
    padding: 10px 14px;
    border: 1px solid var(--rd-border);
    border-radius: 10px;
    font-size: 13px;
    color: var(--rd-text);
    background: var(--rd-bg);
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    /* Long URLs should be readable, not truncated harshly. Allow text to
     * wrap visually inside the input on overflow rather than clipping. */
    text-overflow: ellipsis;
}
.reef-icp-share-input:focus,
.reef-icp-share-input:focus-visible {
    outline: none;
    border-color: var(--rd-accent);
    box-shadow: 0 0 0 3px var(--rd-focus-ring);
}

/* Copy-link button — secondary outline pattern. Brand outline button:
 * accent-soft surface → solid accent on hover, brief good-green on success. */
.reef-icp-copy-btn {
    flex: 0 0 auto;
    /* WCAG 2.5.5 touch target. */
    min-height: 44px;
    padding: 10px 18px;
    font: inherit;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0;
    line-height: 1.2;
    color: var(--rd-accent-text);
    background: var(--rd-accent-soft);
    border: 1px solid rgba(58, 142, 224, 0.32);
    border-radius: 10px;
    cursor: pointer;
    text-decoration: none;
    transition: background 140ms cubic-bezier(0.4, 0, 0.2, 1),
                border-color 140ms cubic-bezier(0.4, 0, 0.2, 1),
                color 140ms cubic-bezier(0.4, 0, 0.2, 1);
    /* Stack default + success labels in the same box so swap is jitter-free. */
    position: relative;
    overflow: hidden;
}
.reef-icp-copy-btn:hover {
    color: #ffffff;
    background: var(--rd-accent);
    border-color: var(--rd-accent);
}
.reef-icp-copy-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--rd-focus-ring);
}
.reef-icp-copy-btn-success {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--sev-good);
    color: #ffffff;
    opacity: 0;
    transform: translateY(6px);
    transition: opacity 140ms cubic-bezier(0.4, 0, 0.2, 1),
                transform 140ms cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
}
.reef-icp-copy-btn.is-copied {
    background: var(--sev-good);
    border-color: var(--sev-good);
    color: #ffffff;
}
.reef-icp-copy-btn.is-copied .reef-icp-copy-btn-success {
    opacity: 1;
    transform: translateY(0);
}
.reef-icp-copy-btn.is-copied .reef-icp-copy-btn-default {
    visibility: hidden;
}
@media (prefers-reduced-motion: reduce) {
    .reef-icp-copy-btn,
    .reef-icp-copy-btn-success { transition: none; }
}

/* ============================================================ SECTIONS */

.reef-icp-section { margin: 28px 0; }
.reef-icp-section h3 {
    /* Eyebrow / label-cap pattern from the ReefDudes design system. */
    margin: 0 0 14px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--rd-accent-text);
    display: flex;
    align-items: center;
    gap: 10px;
}
.reef-icp-section h3::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--reef-line);
}

/* ============================================================ FLAGS / RECS */

.reef-icp-flags,
.reef-icp-recs {
    display: grid;
    gap: 12px;
}

/* Severity-tiered density. The page used to render eleven full-width
 * flag cards in a row, which trained the eye to skim. Now each tier
 * gets its own treatment:
 *
 *   .reef-icp-flags-danger  → single column of full cards (default grid)
 *   .reef-icp-flags-warning → 2-up grid above ~720px so the wall stops
 *                             being a wall, content unchanged
 *   .reef-icp-flags-caution → wrapped in a <details> below; chips inside
 *                             the summary preview which elements are
 *                             cautioning, expand reveals the same cards
 *                             in a 2-up grid with reduced padding
 *
 * Stack between tiers gets its own gap so the visual break is obvious.
 */
.reef-icp-section > .reef-icp-flags + .reef-icp-flags,
.reef-icp-section > .reef-icp-flags + .reef-icp-flags-caution-row,
.reef-icp-section > .reef-icp-flags-caution-row + .reef-icp-flags-caution-row {
    margin-top: 14px;
}
.reef-icp-flags-warning,
.reef-icp-flags-caution {
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}

/* Caution row: collapsible <details> with a chip-preview summary.
 * Closed state shows a count badge + comma-separated parameter chips.
 * Open state reveals the per-element cards with a tighter compact
 * treatment (no badge, no full message, just stat-inline). */
.reef-icp-flags-caution-row {
    border: 1px solid var(--sev-caution-edge);
    border-radius: var(--reef-radius);
    background: color-mix(in srgb, var(--sev-caution-tint) 50%, var(--reef-surface));
    padding: 0;
    overflow: hidden;
    margin-top: 14px;
}
.reef-icp-flags-caution-summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px 16px;
    padding: 12px 16px;
    color: var(--sev-caution-text);
    font-size: 13.5px;
    font-weight: 500;
    transition: background 140ms cubic-bezier(0.4, 0, 0.2, 1);
}
.reef-icp-flags-caution-summary::-webkit-details-marker { display: none; }
.reef-icp-flags-caution-summary:hover {
    background: color-mix(in srgb, var(--sev-caution-tint) 60%, transparent);
}
.reef-icp-flags-caution-count {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
}
.reef-icp-flags-caution-chips {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 6px;
    flex: 1 1 auto;
    min-width: 0;
}
.reef-icp-caution-chip {
    display: inline-block;
    padding: 2px 9px;
    border: 1px solid var(--sev-caution-edge);
    border-radius: 999px;
    background: var(--reef-surface);
    color: var(--sev-caution-text);
    font-size: 12px;
    line-height: 1.5;
    font-weight: 500;
    white-space: nowrap;
}
.reef-icp-flags-caution-toggle {
    margin-left: auto;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.10em;
    font-weight: 600;
    color: var(--rd-accent-text);
    white-space: nowrap;
}
.reef-icp-flags-caution-row[open] .reef-icp-flags-caution-toggle::after {
    content: " ↑";
}
.reef-icp-flags-caution-row:not([open]) .reef-icp-flags-caution-toggle::after {
    content: " ↓";
}
/* Inside the open state, the card grid gets some breathing space. */
.reef-icp-flags-caution-row[open] .reef-icp-flags {
    padding: 0 14px 14px;
    margin-top: 0;
}
@media (prefers-reduced-motion: reduce) {
    .reef-icp-flags-caution-summary { transition: none; }
}

/* Compact card variant — used inside the caution disclosure. Smaller
 * padding, no full message styling, inline stat block. The full
 * .reef-icp-flag styles still apply for color + border treatment. */
.reef-icp-flag-compact {
    padding: 12px 14px;
}
.reef-icp-flag-compact > p {
    font-size: 13px;
    margin-top: 4px;
}
.reef-icp-flag-compact .reef-icp-flag-head strong {
    font-size: 14px;
}
.reef-icp-flag-compact .reef-icp-flag-fix {
    padding: 4px 10px;
    font-size: 12px;
}

/* Inline stat for the compact variant — single-row "X µg/L → target Y–Z µg/L". */
.reef-icp-stat-inline {
    margin: 8px 0 0;
    font-size: 13px;
    line-height: 1.4;
    color: var(--sev-caution-text);
    display: flex;
    flex-wrap: wrap;
    gap: 6px 10px;
    align-items: baseline;
    font-variant-numeric: tabular-nums;
}
.reef-icp-stat-inline-sep {
    color: var(--rd-text-2);
    font-weight: 600;
}
.reef-icp-stat-inline-target {
    color: var(--rd-text-2);
}

/* Paired-reading row inside the stat block (Phosphorus + Phosphate case). */
.reef-icp-stat-paired {
    margin-top: 4px;
    font-size: 13px;
    font-weight: 500;
    color: var(--rd-text-2);
    font-variant-numeric: tabular-nums;
}
.reef-icp-stat-paired-label {
    display: inline-block;
    margin-right: 6px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--rd-muted);
}

/*
 * Cards. Status is conveyed by a tinted background AND a small badge
 * up top — never by a side-stripe border (banned). The full border
 * shifts hue with severity for cohesion.
 */
.reef-icp-flag,
.reef-icp-rec {
    border: 1px solid var(--reef-line);
    border-radius: var(--reef-radius);
    padding: 16px 18px;
    background: var(--reef-surface);
}

.reef-icp-flag.reef-icp-sev-caution { background: var(--sev-caution-tint); border-color: var(--sev-caution-edge); }
.reef-icp-flag.reef-icp-sev-warning { background: var(--sev-warning-tint); border-color: var(--sev-warning-edge); }
.reef-icp-flag.reef-icp-sev-danger  { background: var(--sev-danger-tint);  border-color: var(--sev-danger-edge); }

.reef-icp-rec.reef-icp-prio-urgent  { background: var(--sev-danger-tint);  border-color: var(--sev-danger-edge); }
.reef-icp-rec.reef-icp-prio-high    { background: var(--sev-warning-tint); border-color: var(--sev-warning-edge); }
.reef-icp-rec.reef-icp-prio-medium  { background: var(--sev-caution-tint); border-color: var(--sev-caution-edge); }
.reef-icp-rec.reef-icp-prio-low     { background: var(--reef-surface);     border-color: var(--reef-line); }

.reef-icp-flag-head,
.reef-icp-rec-head {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-bottom: 8px;
    flex-wrap: wrap;
}

/* Red-flag head splits into a left cluster (badge + title) and a right
 * "show me how to fix this" jump link. The left cluster keeps the flex
 * behavior the head used to have; the link goes after with margin-left:
 * auto so it pins to the right edge but wraps cleanly under the title
 * on narrow viewports. */
.reef-icp-flag-head-l {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    min-width: 0;
}

.reef-icp-flag-head strong,
.reef-icp-rec-head strong {
    color: var(--reef-ink);
    font-weight: 600;
    font-size: 15px;
    letter-spacing: -0.005em;
    /* Hardening: titles can occasionally hit 80+ chars (compound element
     * names, paired-pair labels). Wrap inside the head-l container so
     * we don't punch through into the fix-link column. */
    overflow-wrap: anywhere;
    min-width: 0;
}

/* "Show me how to fix this" anchor link on each red flag.
 * Sits on the right of the flag head, jumps to the matching rec
 * card below. Visual is a low-key pill that gets a stronger
 * accent ring on hover/focus. The arrow telegraphs vertical
 * navigation (jumping down the page, not opening a new tab). */
.reef-icp-flag-fix {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
    padding: 6px 12px;
    border: 1px solid currentColor;
    border-radius: 999px;
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    color: var(--rd-accent-text);
    background: transparent;
    transition: background 140ms cubic-bezier(0.4, 0, 0.2, 1),
                color 140ms cubic-bezier(0.4, 0, 0.2, 1),
                box-shadow 140ms cubic-bezier(0.4, 0, 0.2, 1);
    white-space: nowrap;
}
.reef-icp-flag-fix:hover {
    background: var(--rd-accent-soft);
    color: var(--rd-accent-text);
}
.reef-icp-flag-fix:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--rd-focus-ring);
}
.reef-icp-flag-fix-arrow {
    font-size: 13px;
    line-height: 1;
    transform: translateY(0);
    transition: transform 140ms cubic-bezier(0.4, 0, 0.2, 1);
}
.reef-icp-flag-fix:hover .reef-icp-flag-fix-arrow {
    transform: translateY(2px);
}
@media (prefers-reduced-motion: reduce) {
    .reef-icp-flag-fix,
    .reef-icp-flag-fix-arrow { transition: none; }
}

/* Per-severity tinting so the link reads as part of its host flag's
 * tone instead of a generic accent control. */
.reef-icp-flag.reef-icp-sev-danger  .reef-icp-flag-fix { color: var(--sev-danger-text); }
.reef-icp-flag.reef-icp-sev-warning .reef-icp-flag-fix { color: var(--sev-warning-text); }
.reef-icp-flag.reef-icp-sev-caution .reef-icp-flag-fix { color: var(--sev-caution-text); }

/* ====================== STAT — currently / should be ===================
 *
 * Two-cell readout sitting between the flag/rec title and the body of
 * advice. Communicates the actual numbers up front so the reader doesn't
 * have to scroll down to the elements table to know what we're correcting.
 *
 * Visual: two compact stat cells side-by-side with a divider between. The
 * label is the eyebrow (uppercase, low-contrast) and the number is the
 * main figure. A right-pointing chevron between cells reinforces "from →
 * to" reading direction. Wraps to stack on narrow viewports.
 */
.reef-icp-stat {
    /* Two equal columns with a fixed-width arrow in the middle. The 1fr
     * sides ensure the Currently and Should-be cells line up consistently
     * regardless of value length, so adjacent cards in a 2-up grid (or
     * stacked vertically) read as a clean column rather than as
     * content-shaped boxes that wobble in width.
     *
     * The arrow lives between the two grid columns as a 24-px-wide
     * grid-area decoration. On mobile (<480 px) the grid collapses to a
     * single column and the arrow rotates to point down so the relationship
     * stays clear when cells stack. */
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    column-gap: 14px;
    row-gap: 4px;
    align-items: start;
    margin: 10px 0 4px;
    padding: 10px 14px;
    border: 1px solid var(--rd-border);
    border-radius: 10px;
    background: color-mix(in srgb, var(--reef-surface) 70%, transparent);
}
.reef-icp-stat-cell {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.reef-icp-stat-now    { grid-column: 1; }
.reef-icp-stat-target { grid-column: 3; }

.reef-icp-stat dt {
    margin: 0;
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--rd-text-2);
    line-height: 1.3;
}
.reef-icp-stat dd {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: var(--reef-ink);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
    line-height: 1.2;
    /* Lab-readout monospace — pairs with .reef-icp-score-value and
     * .reef-icp-cell-value-num so all numeric readouts read as one
     * consistent typographic register across the report. */
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, "Roboto Mono", monospace;
    overflow-wrap: anywhere;
}
.reef-icp-stat-target dd {
    color: var(--rd-accent-text);
}
/* "From → to" arrow as a real grid item between the two cells.
 * Vertical-aligned to the value row (the dd) by accounting for the dt
 * height above it via margin-top. */
.reef-icp-stat::before {
    content: "→";
    grid-column: 2;
    grid-row: 1;
    align-self: end;
    margin-bottom: 4px;
    color: var(--rd-text-2);
    font-size: 14px;
    line-height: 1;
    font-weight: 600;
}
@media (max-width: 480px) {
    /* Stack vertically on narrow viewports. Arrow rotates to a downward
     * chevron so the from→to relationship stays readable. */
    .reef-icp-stat {
        grid-template-columns: 1fr;
        row-gap: 8px;
    }
    .reef-icp-stat-now    { grid-column: 1; grid-row: 1; }
    .reef-icp-stat::before { grid-column: 1; grid-row: 2; align-self: center; margin: 0; content: "↓"; }
    .reef-icp-stat-target { grid-column: 1; grid-row: 3; }
}

/* Anchor jump UX. When a red flag's "Show me how to fix" link jumps
 * to a rec card, give the card a brief accent flash so the reader's
 * eye lands on the right block, and pad the scroll so the title isn't
 * jammed against the top of the viewport. */
.reef-icp-rec[id] {
    scroll-margin-top: 24px;
}
.reef-icp-rec[id]:target {
    box-shadow: 0 0 0 3px var(--rd-focus-ring);
    animation: reef-icp-rec-flash 1600ms cubic-bezier(0.4, 0, 0.2, 1) 1;
}
@keyframes reef-icp-rec-flash {
    0%   { box-shadow: 0 0 0 0 var(--rd-focus-ring); }
    20%  { box-shadow: 0 0 0 6px var(--rd-focus-ring); }
    100% { box-shadow: 0 0 0 3px var(--rd-focus-ring); }
}
@media (prefers-reduced-motion: reduce) {
    .reef-icp-rec[id]:target { animation: none; }
}

.reef-icp-flag p {
    margin: 6px 0 0;
    color: var(--rd-text-2);
    font-size: 14px;
}
.reef-icp-flag.reef-icp-sev-caution p { color: var(--sev-caution-text); }
.reef-icp-flag.reef-icp-sev-warning p { color: var(--sev-warning-text); }
.reef-icp-flag.reef-icp-sev-danger  p { color: var(--sev-danger-text); }

.reef-icp-flag details { margin-top: 10px; font-size: 13px; color: var(--reef-ink-soft); }
.reef-icp-flag details summary { cursor: pointer; color: var(--rd-accent-text); font-weight: 600; }
.reef-icp-flag details summary:hover { color: var(--rd-accent-text-soft); }
.reef-icp-flag details ul { margin: 8px 0 0 18px; padding: 0; }
.reef-icp-flag details li { margin-bottom: 2px; }

.reef-icp-rec ol {
    margin: 10px 0 0 22px;
    padding: 0;
    color: var(--reef-ink-soft);
    font-size: 14px;
}
.reef-icp-rec ol li { margin-bottom: 4px; }
.reef-icp-rec ol li::marker { color: var(--rd-accent-text); font-weight: 700; }

.reef-icp-rec-action {
    color: var(--reef-ink-faint);
    font-style: normal;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.10em;
    margin-left: auto;
    font-weight: 500;
}

/*
 * Safety callout. Used inside a recommendation card. Replaces the
 * previous border-left side-stripe with a full bordered tinted block.
 */
.reef-icp-safety {
    background: var(--sev-danger-tint);
    border: 1px solid var(--sev-danger-edge);
    color: var(--sev-danger-text);
    padding: 10px 12px;
    margin: 12px 0 0;
    font-size: 13px;
    border-radius: var(--reef-radius-sm);
    display: flex;
    gap: 8px;
    align-items: flex-start;
}
.reef-icp-safety::before {
    content: "!";
    flex: 0 0 18px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--sev-danger);
    color: #ffffff;
    font-weight: 700;
    text-align: center;
    line-height: 18px;
    font-size: 12px;
}
.reef-icp-safety strong { color: var(--sev-danger-text); }

/*
 * Recommendation note — informational tone-setter. Sits between the stat
 * block and the action <ol>, separate from the prominent red Safety:
 * callout below. Pre-1.3.0, both genuine warnings and reassurance got
 * the same red Safety: prefix, which inverted reassurance text into
 * something that read as a threat.
 *
 * Visual register: italic, low-contrast, no icon, no strong frame —
 * this is editorial commentary, not a warning. Inherits the rec card's
 * border-color via currentColor for subtle severity coupling.
 */
.reef-icp-rec-note {
    margin: 10px 0 0;
    padding: 6px 0 0;
    font-size: 13px;
    font-style: italic;
    color: var(--rd-text-2);
    line-height: 1.5;
    border-top: 1px dashed var(--rd-border);
    max-width: 65ch;
}

/* ============================================================ BADGES */

.reef-icp-badge {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    font-size: 10.5px;
    border-radius: 999px;
    letter-spacing: 0.10em;
    font-weight: 600;
    text-transform: uppercase;
    background: var(--reef-surface-2);
    color: var(--reef-ink-soft);
    border: 1px solid var(--reef-line);
}

.reef-icp-sev-bg-good    { background: var(--sev-good);    color: #ffffff; border-color: transparent; }
.reef-icp-sev-bg-caution { background: var(--sev-caution); color: #ffffff; border-color: transparent; }
.reef-icp-sev-bg-warning { background: var(--sev-warning); color: #ffffff; border-color: transparent; }
.reef-icp-sev-bg-danger  { background: var(--sev-danger);  color: #ffffff; border-color: transparent; }
.reef-icp-sev-bg-info    { background: var(--sev-info);    color: #ffffff; border-color: transparent; }

.reef-icp-prio-bg-urgent { background: var(--sev-danger);  color: #ffffff; border-color: transparent; }
.reef-icp-prio-bg-high   { background: var(--sev-warning); color: #ffffff; border-color: transparent; }
.reef-icp-prio-bg-medium { background: var(--sev-caution); color: #ffffff; border-color: transparent; }
.reef-icp-prio-bg-low    { background: var(--rd-accent-soft); color: var(--rd-accent-text); border-color: rgba(58, 142, 224, 0.32); }

/* WP admin status pills (used in reports list) */
.reef-icp-status-good    { background: var(--sev-good);    color: #ffffff; }
.reef-icp-status-caution { background: var(--sev-caution); color: #ffffff; }
.reef-icp-status-warning { background: var(--sev-warning); color: #ffffff; }
.reef-icp-status-danger  { background: var(--sev-danger);  color: #ffffff; }

/* ============================================================ ELEMENT TABLE */

.reef-icp-elements {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 14px;
    background: var(--reef-surface);
    border: 1px solid var(--reef-line);
    border-radius: var(--reef-radius);
    overflow: hidden;
}
.reef-icp-elements th,
.reef-icp-elements td {
    text-align: left;
    padding: 11px 14px;
    border-bottom: 1px solid var(--reef-line);
}
.reef-icp-elements th {
    /* Small-caps eyebrow inside the element table header. */
    background: var(--reef-surface-2);
    color: var(--rd-accent-text);
    text-transform: uppercase;
    font-size: 10.5px;
    letter-spacing: 0.16em;
    font-weight: 700;
}
.reef-icp-elements tbody tr:last-child td { border-bottom: none; }
.reef-icp-elements tbody tr:hover { background: var(--reef-surface-2); }
.reef-icp-elements td { color: var(--reef-ink); vertical-align: middle; }

/* Column-specific tweaks. Using explicit class names rather than nth-child
 * so the rules don't break when columns are reordered or hidden. */
.reef-icp-elements .reef-icp-col-param  { width: 18%; }
.reef-icp-elements .reef-icp-col-value  { width: 14%; font-variant-numeric: tabular-nums; }
.reef-icp-elements .reef-icp-col-range  { width: 24%; min-width: 140px; }
.reef-icp-elements .reef-icp-col-sev    { width: 8%; white-space: nowrap; }
.reef-icp-elements .reef-icp-col-notes  { width: 36%; color: var(--reef-ink-soft); font-size: 13px; }

.reef-icp-cell-value-row {
    display: block;
    line-height: 1.2;
}
.reef-icp-cell-value-num {
    display: inline-block;
    font-weight: 700;
    color: var(--rd-text);
    font-size: 15px;
    /* Lab-readout monospace — see .reef-icp-score-value for the rationale.
     * Across the elements table, this keeps decimal points + digits
     * aligned vertically across rows, which is impossible in a
     * proportional face. */
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, "Roboto Mono", monospace;
    font-variant-numeric: tabular-nums;
}
.reef-icp-cell-value-unit {
    display: inline-block;
    margin-left: 4px;
    font-size: 12px;
    color: var(--rd-muted);
    font-weight: 500;
}
.reef-icp-cell-value-trend {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 6px;
    flex-wrap: wrap;
}

/* ====================== DELTA — change since last test =================
 *
 * "▲ +5.6" with smart coloring: green when the value moved TOWARD target,
 * red when it moved AWAY. Reefers don't care that calcium went up; they
 * care if their dosing is working. This single piece of feedback turns
 * the report from "data dump" into "is what I'm doing helping?".
 *
 * Color tokens use the *-text variants (not the decorative *-good/danger)
 * so contrast holds on tinted row backgrounds. Per the dual-token rule.
 */
.reef-icp-delta {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.2;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.01em;
    white-space: nowrap;
}
.reef-icp-delta-arrow {
    font-size: 9px;
    line-height: 1;
}
.reef-icp-delta-better {
    background: var(--sev-good-tint);
    color: var(--sev-good-text);
    border: 1px solid var(--sev-good-edge);
}
.reef-icp-delta-worse {
    background: var(--sev-warning-tint);
    color: var(--sev-warning-text);
    border: 1px solid var(--sev-warning-edge);
}
.reef-icp-delta-neutral {
    background: var(--rd-bg-2);
    color: var(--rd-text-2);
    border: 1px solid var(--rd-border);
}
.reef-icp-delta-flat {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    color: var(--rd-muted);
    background: var(--rd-bg-2);
    border: 1px solid var(--rd-border);
    white-space: nowrap;
}

/* ====================== SPARKLINE — inline trend ========================
 *
 * Tiny 96×24 SVG line chart of the last ≤8 readings. Lives next to the
 * delta pill in the value cell. The faint green band overlay shows the
 * ideal range — so a glance tells you "I've been hovering above the
 * target for 3 tests now" which is the kind of pattern recognition a
 * static number table can never surface.
 *
 * Last point gets a severity-colored dot that matches the row's status.
 */
.reef-icp-spark {
    display: block;
    overflow: visible;
    flex-shrink: 0;
}
.reef-icp-spark-ideal {
    fill: rgba(45, 142, 111, 0.18);
}
.reef-icp-spark-line {
    fill: none;
    stroke: var(--rd-accent-text);
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.reef-icp-spark-dot { stroke-width: 1; stroke: var(--rd-panel); }
.reef-icp-spark-dot-good    { fill: var(--sev-good); }
.reef-icp-spark-dot-caution { fill: var(--sev-caution); }
.reef-icp-spark-dot-warning { fill: var(--sev-warning); }
.reef-icp-spark-dot-danger  { fill: var(--sev-danger); }
.reef-icp-spark-dot-info    { fill: var(--rd-accent-text); }

/* ====================== RANGE BAR — per-element position viz ===========
 *
 * The single most useful glanceable visual in the report. Replaces the old
 * "Target range" text column ("400–460 (dose toward 425)" required the
 * user to compare three numbers mentally). Now a 100-unit-wide SVG bar
 * shows the danger/caution/ideal bands as colored zones with the user's
 * value as a marker; in-range vs slightly-off vs critically-off is a
 * 200 ms read.
 */
.reef-icp-range-wrap {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}
.reef-icp-range-bar {
    display: block;
    width: 100%;
    height: 14px;
    overflow: visible;          /* allow the marker to extend past the bar */
}
.reef-icp-range-zone {
    /* Each zone is a colored band representing one severity tier. The
     * tints are deliberately gentle so the bar reads as "context", not
     * "alarm" — the marker carries the alarm. */
}
/* Zone fills use higher-saturation rgba (not the *-tint vars) so they
 * stay legible even when the row itself is severity-tinted. The tints
 * are still soft — the marker carries the alarm; the zones are context. */
.reef-icp-range-zone-good    { fill: rgba(45, 142, 111, 0.32); }
.reef-icp-range-zone-caution { fill: rgba(196, 122, 28, 0.30); }
.reef-icp-range-zone-warning { fill: rgba(196, 74, 74, 0.30); }
.reef-icp-range-zone-danger  { fill: rgba(168, 51, 51, 0.30); }

.reef-icp-range-marker {
    /* The thin vertical line marker — communicates "this exact spot" with
     * better precision than a circle alone. Severity-colored to reinforce
     * the table row's status. */
    stroke: var(--sev-good);
}
.reef-icp-range-marker-dot {
    fill: var(--sev-good);
    stroke: var(--rd-panel);
    stroke-width: 1.5;
}
.reef-icp-range-marker-good,
.reef-icp-range-marker-good.reef-icp-range-marker-dot {
    stroke: var(--sev-good);
    fill: var(--sev-good);
}
.reef-icp-range-marker-caution,
.reef-icp-range-marker-caution.reef-icp-range-marker-dot {
    stroke: var(--sev-caution);
    fill: var(--sev-caution);
}
.reef-icp-range-marker-warning,
.reef-icp-range-marker-warning.reef-icp-range-marker-dot {
    stroke: var(--sev-warning);
    fill: var(--sev-warning);
}
.reef-icp-range-marker-danger,
.reef-icp-range-marker-danger.reef-icp-range-marker-dot {
    stroke: var(--sev-danger);
    fill: var(--sev-danger);
}
/* Keep the marker dot's white border visible regardless of severity. */
circle.reef-icp-range-marker-dot {
    stroke: var(--rd-panel);
}

/* Off-scale caret (▶ or ◀) shown when the user's value falls outside the
 * visible domain. Communicates "way off" without pinning the marker to
 * the edge in a way that visually lies. */
.reef-icp-range-caret {
    fill: var(--sev-danger);
}

.reef-icp-range-caption {
    font-size: 11px;
    color: var(--rd-muted);
    font-variant-numeric: tabular-nums;
    line-height: 1.3;
}
.reef-icp-range-target {
    color: var(--rd-text-2);
    white-space: nowrap;
}
.reef-icp-range-empty {
    color: var(--rd-muted);
    font-size: 13px;
}

.reef-icp-row-good    { background: var(--sev-good-tint); }
.reef-icp-row-good    td:first-child { box-shadow: inset 3px 0 0 var(--sev-good); }
.reef-icp-row-caution { background: var(--sev-caution-tint); }
.reef-icp-row-caution td:first-child { box-shadow: inset 3px 0 0 var(--sev-caution); }
.reef-icp-row-warning { background: var(--sev-warning-tint); }
.reef-icp-row-warning td:first-child { box-shadow: inset 3px 0 0 var(--sev-warning); }
.reef-icp-row-danger  { background: var(--sev-danger-tint); }
.reef-icp-row-danger  td:first-child { box-shadow: inset 3px 0 0 var(--sev-danger); }
.reef-icp-row-info    { background: var(--sev-info-tint); color: var(--reef-ink-soft); }

/* The above uses inset box-shadow on a TABLE CELL, NOT a CSS border-left
 * on a card/list item/callout — distinct from the banned side-stripe pattern
 * on cards. Tables use this convention conventionally to mark severity in a
 * way that wouldn't survive on a card. */

/* ============================================================ CHARTS */

.reef-icp-charts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 14px;
}
.reef-icp-chart-card {
    border: 1px solid var(--reef-line);
    border-radius: var(--reef-radius);
    padding: 16px 18px 14px;
    background: var(--reef-surface);
}
.reef-icp-chart-card h4 {
    margin: 0 0 10px;
    font-size: 13px;
    color: var(--rd-accent-text);
    font-weight: 700;
    letter-spacing: -0.005em;
}
/* ====================== ELEMENTS TABLE — narrow viewport ====================
 *
 * Below 640 px the 5-column table becomes unworkable horizontally. We
 * stack each row into a card-like layout: parameter + severity badge on
 * one line, value + range bar below, notes below that. Reefers reading
 * from a phone in the tank room get the scan they actually need.
 *
 * Implementation: switch the table to display:block + each cell to
 * display:block, with grid for cell-internal layout where useful.
 */
@media (max-width: 640px) {
    .reef-icp-elements,
    .reef-icp-elements thead,
    .reef-icp-elements tbody,
    .reef-icp-elements tr,
    .reef-icp-elements th,
    .reef-icp-elements td {
        display: block;
        width: auto;
    }
    .reef-icp-elements thead {
        /* Headers don't make sense in stacked mode; keep them in DOM
         * for screen readers but hide visually. */
        position: absolute;
        clip: rect(0, 0, 0, 0);
        clip-path: inset(50%);
        white-space: nowrap;
    }
    .reef-icp-elements {
        background: transparent;
        border: none;
        box-shadow: none;
        border-radius: 0;
    }
    .reef-icp-elements tbody tr {
        margin-bottom: 12px;
        background: var(--rd-panel);
        border: 1px solid var(--rd-border);
        border-radius: 12px;
        padding: 14px 16px;
        display: grid;
        grid-template-columns: 1fr auto;
        grid-template-areas:
            "param sev"
            "value value"
            "range range"
            "notes notes";
        column-gap: 10px;
        row-gap: 8px;
    }
    .reef-icp-elements td {
        border-bottom: none;
        padding: 0;
    }
    .reef-icp-elements .reef-icp-col-param  { grid-area: param; font-size: 15px; width: auto; }
    .reef-icp-elements .reef-icp-col-value  { grid-area: value; width: auto; }
    .reef-icp-elements .reef-icp-col-range  { grid-area: range; width: auto; min-width: 0; }
    .reef-icp-elements .reef-icp-col-sev    { grid-area: sev; width: auto; justify-self: end; }
    .reef-icp-elements .reef-icp-col-notes  { grid-area: notes; width: auto; font-size: 13px; line-height: 1.5; }
    /* Row severity tint still applies to the stacked card via the
     * existing .reef-icp-row-* rules; the inset side-stripe shadow on
     * td:first-child is harmless here (just a small accent on the
     * "Parameter" cell of the card). */
}

.reef-icp-chart-card canvas {
    width: 100% !important;
    max-height: 220px;
}

/* ---------------------------------------------------------------- trace-dose CTA
 * Inline link-style button that appears beneath safety warnings on
 * trace-element dose recommendations. Pulls the user to the Reefdudes
 * calculator for per-mL math. Secondary visual weight so it doesn't
 * compete with the primary submission button.
 */
.reef-icp-rec-cta {
    margin: 12px 0 0;
}
.reef-icp-public .reef-icp-rec .reef-icp-calc-btn,
a.reef-icp-calc-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    /* WCAG 2.5.5 touch target — 44x44 px minimum for tap surfaces. Trace
     * dosing is the most safety-critical action in the tool; mistapping
     * "Open Calculator" leads users straight to per-mL dosing math. */
    min-height: 44px;
    padding: 10px 18px;
    font: inherit;
    font-size: 13.5px;
    font-weight: 700;
    letter-spacing: 0;
    line-height: 1.2;
    /* Dual-token rule: --rd-accent-text on tinted bg, NOT --rd-accent. */
    color: var(--rd-accent-text);
    background: var(--rd-accent-soft);
    border: 1px solid rgba(58, 142, 224, 0.32);
    border-radius: 999px;
    text-decoration: none;
    transition: background 140ms cubic-bezier(0.4, 0, 0.2, 1),
                border-color 140ms cubic-bezier(0.4, 0, 0.2, 1),
                color 140ms cubic-bezier(0.4, 0, 0.2, 1),
                transform 140ms cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 1px 0 rgba(28, 75, 130, 0.06);
}
.reef-icp-public .reef-icp-rec .reef-icp-calc-btn:hover,
a.reef-icp-calc-btn:hover {
    color: #ffffff;
    background: var(--rd-accent);
    border-color: var(--rd-accent);
    text-decoration: none;
}
.reef-icp-public .reef-icp-rec .reef-icp-calc-btn:active,
a.reef-icp-calc-btn:active {
    transform: translateY(1px);
}
.reef-icp-public .reef-icp-rec .reef-icp-calc-btn:focus-visible,
a.reef-icp-calc-btn:focus-visible {
    outline: 3px solid var(--rd-focus-ring);
    outline-offset: 2px;
}
.reef-icp-calc-btn-arrow {
    font-size: 12px;
    line-height: 1;
    transform: translateY(-1px);
    opacity: 0.85;
}

@media (prefers-reduced-motion: reduce) {
    .reef-icp-calc-btn { transition: none; }
}

/* ====================== AFFILIATE PILLS — "Need to stock up?" =========
 *
 * Bottom-of-rec-card row that surfaces affiliate links to the curated
 * SKU for that element. Renders only when:
 *   - The rec is a `dose` action (rec_show_calc gate)
 *   - rd-core is loaded and has the SKU's product
 *   - The product has at least one affiliate URL configured
 *
 * Visual register: a soft dashed-border container that visually separates
 * the affiliate row from the in-band recommendation content above. Pills
 * use the existing brand-accent palette (no per-retailer brand colors —
 * keeps trademark surface area minimal and the design uniform). The
 * leading "Need to stock up?" prompt explains why the pills are there.
 *
 * The pills use the same outline-pill pattern as .reef-icp-flag-fix so
 * the system has one pill idiom across the report instead of inventing
 * a new one for affiliates.
 */
.reef-icp-affiliate {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 14px;
    margin: 12px 0 0;
    padding: 10px 12px;
    border: 1px dashed var(--rd-border);
    border-radius: 10px;
    background: color-mix(in srgb, var(--rd-bg-2) 55%, transparent);
}
.reef-icp-affiliate-prompt {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--rd-text-2);
    letter-spacing: -0.005em;
}
.reef-icp-affiliate-pills {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 6px;
}
.reef-icp-affiliate-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 11px;
    border: 1px solid var(--rd-accent);
    border-radius: 999px;
    background: var(--rd-accent-soft);
    color: var(--rd-accent-text);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.3;
    text-decoration: none;
    letter-spacing: 0.02em;
    white-space: nowrap;
    transition: background 140ms cubic-bezier(0.4, 0, 0.2, 1),
                color 140ms cubic-bezier(0.4, 0, 0.2, 1),
                box-shadow 140ms cubic-bezier(0.4, 0, 0.2, 1),
                transform 140ms cubic-bezier(0.4, 0, 0.2, 1);
}
.reef-icp-affiliate-pill:hover {
    background: var(--rd-accent);
    color: #ffffff;
    transform: translateY(-1px);
}
.reef-icp-affiliate-pill:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--rd-focus-ring);
}
.reef-icp-affiliate-pill-arrow {
    font-size: 11px;
    line-height: 1;
    opacity: 0.85;
}
.reef-icp-affiliate-pill:hover .reef-icp-affiliate-pill-arrow {
    opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
    .reef-icp-affiliate-pill { transition: none; }
    .reef-icp-affiliate-pill:hover { transform: none; }
}

/* ----------------------------- dose-rec formulation disclaimer
 * One-line muted-italic footer that sits at the very bottom of every
 * dose-rec card. Communicates "this advice is correct as of when it was
 * written, but go check the bottle" without competing with the calculator
 * CTA above it or the safety callout (which is for actual hazards).
 *
 * Visual weight target: smaller than the rec instructions, lighter color,
 * italic to read as a footnote. Should NOT pull attention away from the
 * action items above it. */
.reef-icp-rec-disclaimer {
    margin: 10px 0 0;
    font-size: 11.5px;
    font-style: italic;
    color: var(--rd-text-2);
    line-height: 1.4;
    opacity: 0.9;
}

/* ---------------------------------------------------------------- submit
 * The public ICP-URL submission box. Lives below the dashboard (compact)
 * or as a standalone hero on the empty report page (larger).
 */
.reef-icp-submit {
    margin: 28px 0 8px;
    padding: 22px 24px 24px;
    background: var(--reef-surface-2);
    border: 1px solid var(--reef-line);
    border-radius: var(--reef-radius);
    box-shadow: var(--reef-shadow);
}
.reef-icp-submit-hero {
    margin: 8px 0 24px;
    padding: clamp(28px, 6vw, 56px) clamp(22px, 5vw, 44px);
    background:
        radial-gradient(circle at 100% 0%, color-mix(in oklch, var(--reef-aqua) 22%, transparent), transparent 60%),
        var(--reef-surface-2);
}
.reef-icp-submit-head h3 {
    /* Section heading — follows the ReefDudes large-heading pattern. */
    margin: 0 0 8px;
    font-size: clamp(20px, 2.4vw, 26px);
    font-weight: 800;
    letter-spacing: -0.015em;
    line-height: 1.15;
    color: var(--rd-text);
}
.reef-icp-submit-hero .reef-icp-submit-head h3 {
    font-size: clamp(28px, 4.2vw, 40px);
    line-height: 1.05;
    letter-spacing: -0.02em;
}
.reef-icp-submit-head p {
    margin: 0 0 14px;
    color: var(--reef-ink-soft);
    max-width: 62ch;
    line-height: 1.55;
    font-size: 14px;
}
.reef-icp-submit-head strong {
    color: var(--rd-accent-text);
    font-weight: 700;
}

.reef-icp-submit-error {
    margin: 0 0 14px;
    padding: 10px 14px;
    border-radius: var(--reef-radius-sm);
    background: var(--sev-warning-tint);
    border: 1px solid var(--sev-warning-edge);
    color: var(--sev-warning-text);
    font-size: 13px;
    line-height: 1.45;
}

.reef-icp-submit-form {
    display: block;
}
.reef-icp-submit-grid {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    align-items: end;
}
.reef-icp-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}
.reef-icp-field-wide {
    grid-column: 1 / -1;
}

/* ====================== LAB-LINK HELPER — under URL field =================
 *
 * Collapsible <details> answering "where do I find my lab's share link?".
 * Lives directly under the URL input on the submit form. Closed by
 * default — most users with their own lab account already know where to
 * grab the URL; this is for first-timers.
 *
 * The current per-lab card uses an abstract "browser window with Share
 * button" SVG illustration as a placeholder. To swap in real screenshots
 * later: replace the .reef-icp-lab-card-thumb SVG with an <img> tag
 * pointing to /assets/img/lab-<key>.png, or add a CSS background-image
 * rule keyed on the [data-lab="…"] attribute.
 */
.reef-icp-lab-help-wrap {
    margin-top: -2px; /* pull tight against the URL input above */
}
.reef-icp-lab-help {
    border: 1px solid var(--rd-border);
    border-radius: 10px;
    background: var(--rd-bg);
    overflow: hidden;
}
.reef-icp-lab-help-summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    color: var(--rd-text-2);
    font-size: 13px;
    font-weight: 500;
    transition: background 140ms cubic-bezier(0.4, 0, 0.2, 1);
}
.reef-icp-lab-help-summary::-webkit-details-marker { display: none; }
.reef-icp-lab-help-summary:hover {
    background: var(--rd-accent-soft);
    color: var(--rd-accent-text);
}
.reef-icp-lab-help-summary:focus-visible {
    outline: none;
    box-shadow: inset 0 0 0 2px var(--rd-accent);
}
.reef-icp-lab-help-icon {
    display: inline-flex;
    width: 18px;
    height: 18px;
    color: var(--rd-accent);
    flex-shrink: 0;
}
.reef-icp-lab-help-icon svg { width: 18px; height: 18px; }
.reef-icp-lab-help-title { flex: 1 1 auto; }
.reef-icp-lab-help-toggle {
    flex: 0 0 auto;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.10em;
    font-weight: 600;
    color: var(--rd-accent-text);
    white-space: nowrap;
}
.reef-icp-lab-help[open] .reef-icp-lab-help-toggle::after {
    content: "Hide";
}
.reef-icp-lab-help:not([open]) .reef-icp-lab-help-toggle::after {
    content: "Show";
}
@media (prefers-reduced-motion: reduce) {
    .reef-icp-lab-help-summary { transition: none; }
}

/* Card grid revealed when the disclosure is open. Auto-fit responds to
 * the surrounding form width — typically 3-up on desktop, 2-up on tablet,
 * 1-up on mobile. */
.reef-icp-lab-help-grid {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    padding: 12px 14px 0;
}
.reef-icp-lab-card {
    display: flex;
    gap: 10px;
    padding: 10px;
    border: 1px solid var(--rd-border);
    border-radius: 8px;
    background: var(--rd-panel);
    color: var(--rd-text);
    transition: border-color 140ms cubic-bezier(0.4, 0, 0.2, 1),
                background 140ms cubic-bezier(0.4, 0, 0.2, 1);
}
.reef-icp-lab-card:hover {
    border-color: var(--rd-border-strong);
    background: var(--rd-panel-2);
}
.reef-icp-lab-card-thumb {
    flex: 0 0 80px;
    width: 80px;
    height: 50px;
    color: var(--rd-accent);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.reef-icp-lab-card-thumb-svg { width: 100%; height: 100%; display: block; }
.reef-icp-lab-card-body {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}
.reef-icp-lab-card-name {
    font-size: 13px;
    font-weight: 700;
    color: var(--rd-text);
    line-height: 1.2;
    letter-spacing: -0.005em;
}
.reef-icp-lab-card-steps {
    margin: 0;
    font-size: 12.5px;
    line-height: 1.45;
    color: var(--rd-text-2);
    overflow-wrap: anywhere;
}
.reef-icp-lab-card-steps code {
    background: var(--rd-accent-soft);
    color: var(--rd-accent-text);
    padding: 1px 5px;
    border-radius: 4px;
    font-size: 11.5px;
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, "Roboto Mono", monospace;
}
.reef-icp-lab-card-steps strong {
    color: var(--rd-text);
    font-weight: 600;
}

.reef-icp-lab-help-note {
    margin: 12px 14px 14px;
    padding: 10px 12px;
    background: var(--rd-accent-soft);
    color: var(--rd-accent-text);
    border-radius: 6px;
    font-size: 12.5px;
    line-height: 1.5;
}
@media (prefers-reduced-motion: reduce) {
    .reef-icp-lab-card { transition: none; }
}

/* ====================== INTENT BANNER — top of report ==================
 *
 * Lead message that frames the rest of the report given the user's stated
 * intent. Sits between the score banner and the categories breakdown.
 *
 * Tones drive subtle background/border tinting:
 *   neutral       → spot check (no tint, just a clean panel)
 *   urgent        → diagnose with active danger items
 *   concerned     → diagnose without an obvious smoking gun
 *   redirect      → tweak intent but report has issues to fix first
 *   optimization  → tweak intent with cautions to push from good to great
 *   expert        → tweak intent with everything in range; advanced advice
 */
.reef-icp-intent-banner {
    display: grid;
    grid-template-columns: 36px 1fr;
    gap: 14px;
    align-items: start;
    margin: 0 0 22px;
    padding: 16px 18px;
    background: var(--rd-panel);
    border: 1px solid var(--rd-border);
    border-radius: var(--reef-radius);
    box-shadow: var(--rd-shadow-card);
}
.reef-icp-intent-banner-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: var(--rd-accent-soft);
    color: var(--rd-accent-text);
}
.reef-icp-intent-banner-icon svg {
    width: 20px;
    height: 20px;
}
.reef-icp-intent-banner-title {
    margin: 0 0 4px;
    font-size: 14px;
    font-weight: 700;
    color: var(--rd-text);
}
.reef-icp-intent-banner-msg {
    margin: 0;
    font-size: 14px;
    line-height: 1.55;
    color: var(--rd-text-2);
    max-width: 70ch;
}

/* Tone modifiers — different intent + state combinations get different
 * accent treatments so the banner reads as a contextual cue, not just a
 * generic info box. */
.reef-icp-intent-tone-urgent {
    background: var(--sev-warning-tint);
    border-color: var(--sev-warning-edge);
}
.reef-icp-intent-tone-urgent .reef-icp-intent-banner-icon {
    background: rgba(196, 74, 74, 0.18);
    color: var(--sev-warning-text);
}
.reef-icp-intent-tone-urgent .reef-icp-intent-banner-title {
    color: var(--sev-warning-text);
}
.reef-icp-intent-tone-concerned {
    background: var(--sev-caution-tint);
    border-color: var(--sev-caution-edge);
}
.reef-icp-intent-tone-concerned .reef-icp-intent-banner-icon {
    background: rgba(196, 122, 28, 0.18);
    color: var(--sev-caution-text);
}
.reef-icp-intent-tone-concerned .reef-icp-intent-banner-title {
    color: var(--sev-caution-text);
}
.reef-icp-intent-tone-redirect {
    background: var(--sev-caution-tint);
    border-color: var(--sev-caution-edge);
}
.reef-icp-intent-tone-redirect .reef-icp-intent-banner-icon {
    background: rgba(196, 122, 28, 0.18);
    color: var(--sev-caution-text);
}
.reef-icp-intent-tone-optimization {
    background: var(--rd-accent-soft);
    border-color: rgba(58, 142, 224, 0.32);
}
.reef-icp-intent-tone-expert {
    background: var(--sev-good-tint);
    border-color: var(--sev-good-edge);
}
.reef-icp-intent-tone-expert .reef-icp-intent-banner-icon {
    background: rgba(45, 142, 111, 0.18);
    color: var(--sev-good-text);
}
.reef-icp-intent-tone-expert .reef-icp-intent-banner-title {
    color: var(--sev-good-text);
}

@media (max-width: 540px) {
    .reef-icp-intent-banner {
        grid-template-columns: 1fr;
        gap: 8px;
        padding: 14px 16px;
    }
}

/* ====================== SALINITY ADVISORY — bias warning ===============
 *
 * Sits between the intent banner and the categories breakdown when the
 * sample's salinity is off enough to bias the rest of the readings.
 *
 * Why this is a separate component (not just another red flag): salinity
 * uniquely affects EVERY OTHER reading on the report — a 33 ppt sample
 * shows all elements ~6% lower than they would at 35 ppt, which means
 * "fix salinity first" is a meta-instruction that should land before the
 * reader scans the rest. A regular red flag would mix it into the list
 * with elements that don't have this multiplicative effect.
 *
 * Visual register matches the intent banner (icon + body grid, same
 * padding + radius) so the two read as a coherent "framing" group at
 * the top of the report, but the icon glyph and tone are distinct so
 * users don't conflate them.
 */
.reef-icp-salinity-advisory {
    display: grid;
    grid-template-columns: 36px 1fr;
    gap: 14px;
    align-items: start;
    margin: 0 0 22px;
    padding: 16px 18px;
    background: var(--rd-panel);
    border: 1px solid var(--rd-border);
    border-radius: var(--reef-radius);
    box-shadow: var(--rd-shadow-card);
}
.reef-icp-salinity-advisory-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: var(--rd-accent-soft);
    color: var(--rd-accent-text);
}
.reef-icp-salinity-advisory-icon svg {
    width: 22px;
    height: 22px;
}
.reef-icp-salinity-advisory-title {
    margin: 0 0 6px;
    font-size: 14px;
    font-weight: 700;
    color: var(--rd-text);
    letter-spacing: -0.005em;
}
.reef-icp-salinity-advisory-msg {
    margin: 0 0 10px;
    font-size: 14px;
    line-height: 1.55;
    color: var(--rd-text-2);
    max-width: 70ch;
    overflow-wrap: anywhere;
}
/* The stat block inside the advisory uses the shared .reef-icp-stat
 * grid styles so it lines up with the same Currently / Should be
 * pattern as red flags and recs. Tighter top margin since the parent
 * already pads. */
.reef-icp-salinity-stat {
    margin-top: 6px;
    margin-bottom: 0;
}

/* Tone modifiers — caution and warning. Salinity-danger doesn't have
 * its own tone here because the analyzer maps both warning and danger
 * to "warning" tier on the advisory (danger salinity is also already
 * surfacing as a red flag of its own; the advisory is the framing). */
.reef-icp-salinity-tone-caution {
    background: var(--sev-caution-tint);
    border-color: var(--sev-caution-edge);
}
.reef-icp-salinity-tone-caution .reef-icp-salinity-advisory-icon {
    background: rgba(196, 122, 28, 0.18);
    color: var(--sev-caution-text);
}
.reef-icp-salinity-tone-caution .reef-icp-salinity-advisory-title {
    color: var(--sev-caution-text);
}
.reef-icp-salinity-tone-warning {
    background: var(--sev-warning-tint);
    border-color: var(--sev-warning-edge);
}
.reef-icp-salinity-tone-warning .reef-icp-salinity-advisory-icon {
    background: rgba(196, 74, 74, 0.18);
    color: var(--sev-warning-text);
}
.reef-icp-salinity-tone-warning .reef-icp-salinity-advisory-title {
    color: var(--sev-warning-text);
}

@media (max-width: 540px) {
    .reef-icp-salinity-advisory {
        grid-template-columns: 1fr;
        gap: 10px;
        padding: 14px 16px;
    }
    .reef-icp-salinity-advisory-icon {
        margin: 0;
    }
}

.reef-icp-field > span {
    /* Eyebrow / label-cap pattern. */
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--rd-text-2);
}
.reef-icp-field input,
.reef-icp-field select {
    width: 100%;
    /* WCAG 2.1 touch target — 44px minimum on mobile. */
    min-height: 44px;
    padding: 10px 14px;
    font: inherit;
    font-size: 15px;
    color: var(--rd-text);
    background: var(--rd-bg);
    border: 1px solid var(--rd-border);
    border-radius: 10px;
    box-shadow: inset 0 1px 0 rgba(28, 75, 130, 0.03);
    transition: border-color 140ms cubic-bezier(0.4, 0, 0.2, 1),
                box-shadow 140ms cubic-bezier(0.4, 0, 0.2, 1);
    appearance: none;
}
.reef-icp-field select {
    /* Custom chevron via SVG data-URL using the muted token color so the
     * dropdown still feels native-light without the OS chevron clashing. */
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'><path d='M1 1.5L6 6.5L11 1.5' stroke='%237a8a96' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>");
    background-repeat: no-repeat;
    background-position: right 14px center;
    padding-right: 38px;
    cursor: pointer;
}
.reef-icp-field select option { background: #ffffff; color: var(--rd-text); }
.reef-icp-field select option:checked { background: var(--rd-accent-soft); color: var(--rd-accent-text); }
.reef-icp-field input::placeholder {
    color: var(--rd-muted);
}
.reef-icp-field input:hover,
.reef-icp-field select:hover {
    border-color: var(--rd-border-strong);
}
.reef-icp-field input:focus,
.reef-icp-field input:focus-visible,
.reef-icp-field select:focus,
.reef-icp-field select:focus-visible {
    outline: none;
    border-color: var(--rd-accent);
    box-shadow: 0 0 0 3px var(--rd-focus-ring);
}
.reef-icp-field input:invalid:not(:placeholder-shown) {
    border-color: var(--sev-warning-edge);
}

/* ====================== FIELD COMBO — number + unit ====================
 *
 * One label, one visual control, two inputs. The number occupies most of
 * the row and the unit picker tucks in on the right with a divider line
 * so it reads as a single segmented control rather than two adjacent
 * fields competing for attention.
 *
 * Implementation note: the inner controls keep their per-element border
 * radius zero on the join edge so the combo looks welded together while
 * still hitting :focus-visible on the actual sub-element the user is
 * interacting with (no faking the focus ring on a wrapper).
 */
.reef-icp-field-combo {
    display: flex;
    align-items: stretch;
    gap: 0;
    width: 100%;
}
.reef-icp-field .reef-icp-field-combo-num {
    flex: 1 1 auto;
    min-width: 0;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}
.reef-icp-field .reef-icp-field-combo-unit {
    flex: 0 0 auto;
    width: auto;
    min-width: 78px;
    padding-right: 32px;
    background-position: right 10px center;
    border-left: 1px solid var(--rd-border);
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}
/* When focus moves between the two halves, lift the active one above its
 * neighbor so the focus ring isn't clipped by the joined edge. */
.reef-icp-field .reef-icp-field-combo-num:focus,
.reef-icp-field .reef-icp-field-combo-num:focus-visible,
.reef-icp-field .reef-icp-field-combo-unit:focus,
.reef-icp-field .reef-icp-field-combo-unit:focus-visible {
    position: relative;
    z-index: 1;
}

.reef-icp-submit-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
    margin-top: 16px;
}
/* Primary CTA — the canonical ReefDudes gradient button.
 *
 * Recipe (must match the site's Reef Calculator plugin button):
 *   gradient #4ea0ea → #3a8ee0, border #2872c0, white text, 8px radius,
 *   12px 22px padding, 700 weight, 16px font.
 *
 * Higher specificity (.reef-icp-public chain) so a host theme's default
 * button styling can't bleach it; colors are written literally as hex so
 * the button survives cases where CSS custom properties get redefined
 * further up the cascade.
 */
.reef-icp-public .reef-icp-submit .reef-icp-submit-btn,
.reef-icp-public button.reef-icp-submit-btn,
button.reef-icp-submit-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* WCAG touch target — 44px minimum on mobile. */
    min-height: 44px;
    padding: 12px 22px;
    font: inherit;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0;
    line-height: 1.1;
    color: #ffffff;
    text-shadow: 0 1px 0 rgba(28, 75, 130, 0.30);
    background-color: #3a8ee0;
    background-image: linear-gradient(180deg, #4ea0ea 0%, #3a8ee0 100%);
    border: 1px solid #2872c0;
    border-radius: 8px;
    cursor: pointer;
    text-decoration: none;
    transition: filter 140ms cubic-bezier(0.4, 0, 0.2, 1),
                transform 140ms cubic-bezier(0.4, 0, 0.2, 1),
                box-shadow 140ms cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.20),
        0 4px 14px rgba(28, 75, 130, 0.35);
}
.reef-icp-public .reef-icp-submit .reef-icp-submit-btn:hover,
.reef-icp-public button.reef-icp-submit-btn:hover,
button.reef-icp-submit-btn:hover {
    color: #ffffff;
    filter: brightness(1.08);
    transform: translateY(-1px);
    text-decoration: none;
}
.reef-icp-public .reef-icp-submit .reef-icp-submit-btn:active,
.reef-icp-public button.reef-icp-submit-btn:active,
button.reef-icp-submit-btn:active {
    transform: translateY(0);
    filter: brightness(0.96);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.10),
        0 1px 4px rgba(28, 75, 130, 0.30);
}
@media (prefers-reduced-motion: reduce) {
    .reef-icp-public button.reef-icp-submit-btn,
    button.reef-icp-submit-btn {
        transition: none;
    }
    .reef-icp-public button.reef-icp-submit-btn:hover,
    button.reef-icp-submit-btn:hover {
        transform: none;
    }
}
.reef-icp-public .reef-icp-submit .reef-icp-submit-btn:focus-visible,
.reef-icp-public button.reef-icp-submit-btn:focus-visible,
button.reef-icp-submit-btn:focus-visible {
    outline: 3px solid var(--rd-focus-ring);
    outline-offset: 2px;
}

/* Submit button — busy / loading state.
 *
 * The URL submission flow does a synchronous server-side fetch + parse +
 * analyze + DB write that takes 5-20 s. Without feedback users double-click
 * (creating duplicate tanks) and assume the page broke. The .is-loading
 * class swaps the label to "Analyzing your test…" and reveals a spinner;
 * pointer-events go to none so the button can't be re-clicked. The form's
 * submit handler also disables the button programmatically (defense in depth). */
.reef-icp-public .reef-icp-submit .reef-icp-submit-btn .reef-icp-submit-btn-spinner,
button.reef-icp-submit-btn .reef-icp-submit-btn-spinner {
    display: none;
    width: 16px;
    height: 16px;
    margin-left: 10px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.35);
    border-top-color: #ffffff;
    animation: reef-icp-spin 0.7s linear infinite;
    flex-shrink: 0;
}
.reef-icp-public .reef-icp-submit .reef-icp-submit-btn.is-loading,
button.reef-icp-submit-btn.is-loading {
    cursor: wait;
    pointer-events: none;
    opacity: 0.92;
    /* Lock the visual size so the label-swap doesn't reflow. */
    min-width: var(--reef-icp-submit-btn-locked-width, auto);
    transform: none !important;
    filter: none;
}
.reef-icp-public .reef-icp-submit .reef-icp-submit-btn.is-loading .reef-icp-submit-btn-spinner,
button.reef-icp-submit-btn.is-loading .reef-icp-submit-btn-spinner {
    display: inline-block;
}
.reef-icp-public .reef-icp-submit .reef-icp-submit-btn[disabled],
button.reef-icp-submit-btn[disabled] {
    cursor: not-allowed;
    pointer-events: none;
}

@keyframes reef-icp-spin {
    to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
    .reef-icp-submit-btn-spinner {
        animation: none;
        /* Static "loading" indicator: a half-filled donut so the busy state
         * is still visually distinct without spinning. */
        border-color: rgba(255, 255, 255, 0.55);
        border-top-color: rgba(255, 255, 255, 0.20);
    }
}
.reef-icp-submit-note {
    margin: 0;
    flex: 1 1 280px;
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--reef-ink-faint);
}

/*
 * Clear-saved-tank-info button. Injected by JS into .reef-icp-submit-actions
 * only when localStorage has a saved profile. Visual register: an
 * unobtrusive text link, not a button — it's an escape hatch, not a
 * primary or secondary action.
 *
 * Positioned with order so it always appears AFTER the submit note even
 * though JS appends it last, so the visual order on the page is
 * [Analyze report] [submit note] [Clear saved tank info].
 */
.reef-icp-clear-saved {
    flex: 0 0 auto;
    margin: 0;
    padding: 0;
    background: transparent;
    border: 0;
    font: inherit;
    font-size: 12px;
    line-height: 1.4;
    color: var(--reef-ink-faint);
    text-decoration: underline;
    text-decoration-color: var(--rd-border);
    text-underline-offset: 2px;
    cursor: pointer;
    transition: color 140ms cubic-bezier(0.4, 0, 0.2, 1),
                text-decoration-color 140ms cubic-bezier(0.4, 0, 0.2, 1);
}
.reef-icp-clear-saved:hover {
    color: var(--rd-accent-text);
    text-decoration-color: var(--rd-accent);
}
.reef-icp-clear-saved:focus-visible {
    outline: none;
    color: var(--rd-accent-text);
    box-shadow: 0 0 0 3px var(--rd-focus-ring);
    border-radius: 4px;
}
@media (prefers-reduced-motion: reduce) {
    .reef-icp-clear-saved { transition: none; }
}

/* ====================== ALL-CLEAR EMPTY STATE =========================
 *
 * Shown when a report has zero red flags, zero trend warnings, and zero
 * recommendations. Without this card the page would fall straight from
 * the categories breakdown to the elements table, leaving the reader to
 * infer that the silence means "everything is fine."
 *
 * Same severity-good color pattern as the score banner so the visual
 * register matches: green ring, green tint, green ink. The icon (a
 * checkmark inside a circle) is inline SVG using currentColor.
 */
.reef-icp-allclear { margin: 24px 0; }
.reef-icp-allclear-card {
    display: grid;
    grid-template-columns: 44px 1fr;
    gap: 14px;
    align-items: start;
    padding: 18px 22px;
    border: 1px solid var(--sev-good-edge);
    border-radius: var(--reef-radius);
    background: var(--sev-good-tint);
    color: var(--sev-good-text);
}
.reef-icp-allclear-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--sev-good-edge) 35%, var(--reef-surface));
    color: var(--sev-good-text);
    flex-shrink: 0;
}
.reef-icp-allclear-icon svg {
    width: 28px;
    height: 28px;
}
/* Specificity bump: this h3 lives inside .reef-icp-section so the
 * section's eyebrow rule (uppercase, letter-spaced, accent-colored)
 * would otherwise win. We selectively override what's wrong for this
 * card-style heading without re-declaring everything. */
.reef-icp-section h3.reef-icp-allclear-title,
.reef-icp-allclear-title {
    margin: 0 0 4px;
    font-size: 16px;
    font-weight: 700;
    color: var(--sev-good-text);
    letter-spacing: -0.005em;
    text-transform: none;
    display: block;
    gap: 0;
}
.reef-icp-section h3.reef-icp-allclear-title::after,
.reef-icp-allclear-title::after {
    /* Suppress the section h3 trailing rule line; the card has its
     * own border so the rule would double up. */
    display: none !important;
    content: none;
}
.reef-icp-allclear-body p {
    margin: 0;
    font-size: 14px;
    line-height: 1.5;
    color: var(--sev-good-text);
    overflow-wrap: anywhere;
    max-width: 65ch;
}
@media (max-width: 540px) {
    .reef-icp-allclear-card {
        grid-template-columns: 1fr;
        text-align: center;
    }
    .reef-icp-allclear-icon { margin: 0 auto; }
}

/* ====================== JS-FEATURE GATING =============================
 *
 * Anything the browser can't make functional without JavaScript stays
 * hidden until the small inline bootstrap script (in dashboard.js) tags
 * the html element with .reef-icp-js. Right now the only such element
 * is the copy-to-clipboard button — the share-link <input> is
 * fully functional with manual select+copy, so we keep that visible.
 *
 * Hosts that strip <script> entirely (privacy proxies, RSS readers,
 * print-to-PDF without JS) just see the readable URL input + a label
 * saying "copy this link", which is the graceful baseline.
 */
.reef-icp-copy-btn { display: none; }
html.reef-icp-js .reef-icp-copy-btn { display: inline-flex; }

/* ====================== PRINT / PDF EXPORT ============================
 *
 * Real users save reports as PDFs to share on forums, take to their
 * local fish store, or keep historical records. Print stylesheet trims
 * decorative chrome, flattens severity backgrounds (saves ink), expands
 * collapsed <details>, and forces page-breaks at sensible spots.
 *
 * Goals:
 *   1. Every recommendation visible without clicking — open all <details>
 *   2. Suppress the "Got another ICP report?" submit form (irrelevant
 *      on a printed report)
 *   3. Keep severity color cues but as hairline borders, not full tints
 *      (a wall of red tint wastes printer ink and looks alarming)
 *   4. Avoid mid-card page breaks
 *   5. Score gauge prints cleanly (SVG strokes survive print better
 *      than background fills)
 */
@media print {
    /* Reset the page to white background, single column, no shadows. */
    .reef-icp-public {
        background: #ffffff !important;
        color: #1c3344 !important;
        margin: 0 !important;
        padding: 0 !important;
        max-width: none !important;
        box-shadow: none !important;
        border: 0 !important;
        font-size: 11pt !important;
    }

    /* Suppress UI that's irrelevant on paper. */
    .reef-icp-share,
    .reef-icp-submit,
    .reef-icp-copy-btn,
    .reef-icp-flag-fix,
    .reef-icp-rec-cta,
    .reef-icp-flags-caution-toggle {
        display: none !important;
    }

    /* Force-open every <details> so PDF readers see the full content
     * instead of just the summary line. */
    details { display: block !important; }
    details > summary {
        list-style: none !important;
        font-weight: 700 !important;
    }
    details > summary::-webkit-details-marker { display: none !important; }
    details > *:not(summary) { display: revert !important; }

    /* Caution row stays expanded on print — content over chrome. */
    .reef-icp-flags-caution-row {
        background: transparent !important;
        border: 1px solid #cdd8e2 !important;
        margin: 12px 0 !important;
    }
    .reef-icp-flags-caution-row[open] .reef-icp-flags { padding: 0 12px 12px !important; }

    /* Flatten severity tints to white + thin colored border. Keeps the
     * severity SIGNAL (border color, badge) without saturating the page
     * with ink. */
    .reef-icp-flag,
    .reef-icp-rec,
    .reef-icp-allclear-card,
    .reef-icp-intent-banner,
    .reef-icp-notice,
    .reef-icp-summary {
        background: #ffffff !important;
        box-shadow: none !important;
        page-break-inside: avoid;
        break-inside: avoid;
    }
    .reef-icp-summary { border: 1px solid #a8b6c4 !important; }

    /* Section headings stay inked but lose the trailing rule (ink). */
    .reef-icp-section h3::after { display: none !important; }
    .reef-icp-section h3 {
        color: #1c3344 !important;
        page-break-after: avoid;
        break-after: avoid;
    }

    /* Score gauge — SVG strokes already print well, but the fill needs
     * to be set so it doesn't pick up a transparent on a non-white
     * print background (some browsers don't honor body bg in print). */
    .reef-icp-score-svg .reef-icp-score-track { stroke: #cdd8e2 !important; }

    /* Issue-count chips: keep the number readable, drop the tint to a
     * thin border so the chip survives ink-saving print drivers. */
    .reef-icp-issue-count {
        background: #ffffff !important;
        border: 1px solid #cdd8e2 !important;
        color: #1c3344 !important;
    }

    /* Keep severity badges colored — the smallest meaningful color cue
     * that survives even an ink-saving driver. */
    .reef-icp-badge {
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }

    /* Element table: avoid cutting individual rows across page breaks. */
    .reef-icp-elements tr {
        page-break-inside: avoid;
        break-inside: avoid;
    }
    .reef-icp-elements thead {
        display: table-header-group; /* Repeat header on each printed page */
    }

    /* Anchor links inside printed content — strip the underline and
     * inline the URL after each link so paper readers see the target. */
    a[href^="#"] { color: inherit; text-decoration: none; }
    a[href^="http"]::after {
        content: " (" attr(href) ")";
        font-size: 9pt;
        color: #46586a;
        word-break: break-all;
    }
    /* Don't print URL after intent-banner icons or our own internal links. */
    .reef-icp-public a.reef-icp-flag-fix::after,
    .reef-icp-public a[href^="#reef-icp"]::after {
        content: "";
    }

    /* Page margin so printers don't crop. */
    @page { margin: 14mm 12mm; }
}

@media (prefers-reduced-motion: reduce) {
    .reef-icp-field input,
    .reef-icp-submit-btn {
        transition: none;
    }
}

/* ============================================================ FOOTER / EMPTY */

/* ============================================================ NOTICE
 * Top-of-report work-in-progress + "consult a professional" disclaimer.
 * Caution-tinted full-bordered block with a leading "i" mark — visible
 * enough to land before users scroll into the recommendations, but quiet
 * enough not to fight the score banner for attention.
 */
.reef-icp-notice {
    display: grid;
    grid-template-columns: 28px 1fr;
    gap: 14px;
    align-items: start;
    margin: 0 0 22px;
    padding: 14px 18px;
    background: var(--sev-caution-tint);
    border: 1px solid color-mix(in oklch, var(--sev-caution) 35%, transparent);
    border-radius: var(--reef-radius);
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--sev-caution-text);
}
.reef-icp-notice-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    margin-top: 1px;
    border-radius: 50%;
    background: var(--sev-caution);
    color: #ffffff;
    font-family: ui-serif, Georgia, "Times New Roman", serif;
    font-style: italic;
    font-weight: 700;
    font-size: 16px;
    line-height: 1;
    flex-shrink: 0;
}
.reef-icp-notice-body strong {
    color: var(--rd-text);
}

.reef-icp-footer {
    margin-top: 36px;
    padding-top: 18px;
    border-top: 1px solid var(--reef-line);
    color: var(--reef-ink-faint);
    font-size: 13px;
}
.reef-icp-footer .reef-icp-disclaimer {
    background: transparent;
    border: none;
    padding: 0;
    margin: 0;
    color: var(--reef-ink-faint);
    font-size: 13px;
}

.reef-icp-empty {
    padding: 40px;
    text-align: center;
    color: var(--reef-ink-soft);
    background: var(--reef-surface);
    border: 1px solid var(--reef-line);
    border-radius: var(--reef-radius);
}

/* ============================================================ FOCUS / MOTION */

.reef-icp-public a:focus-visible,
.reef-icp-public button:focus-visible,
.reef-icp-public input:focus-visible,
.reef-icp-public select:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--rd-focus-ring);
    border-color: var(--rd-accent);
    border-radius: 4px;
}

@media (prefers-reduced-motion: no-preference) {
    /* ease-out-expo for card hover lifts. */
    .reef-icp-flag,
    .reef-icp-rec {
        transition: transform 180ms cubic-bezier(0.4, 0, 0.2, 1),
                    box-shadow 180ms cubic-bezier(0.4, 0, 0.2, 1);
    }
    .reef-icp-flag:hover,
    .reef-icp-rec:hover {
        transform: translateY(-1px);
        box-shadow: var(--rd-shadow-card-hover);
    }
}