/* Reef ICP — shared dashboard styles
 *
 * Palette is built from OKLCH so the steps of lightness look uniform and
 * the neutrals carry a sub-perceptible teal cast that ties the whole UI
 * back to the reef-water aesthetic.
 *
 * Color budget (visual weight):
 *   60% tinted neutrals (.reef-paper / .reef-surface / .reef-line)
 *   30% reef-deep / reef-tide chrome (headings, links, chart line)
 *   10% severity (good / caution / warning / danger) — only where it carries meaning.
 */

.reef-icp-public,
.reef-icp-dashboard {
    /* --- ink --- */
    --reef-ink:        oklch(22% 0.022 220);
    --reef-ink-soft:   oklch(42% 0.020 220);
    --reef-ink-faint:  oklch(58% 0.015 220);

    /* --- surfaces & lines (tinted toward 210 hue) --- */
    --reef-paper:      oklch(99% 0.004 210);
    --reef-surface:    oklch(100% 0.002 210);
    --reef-surface-2:  oklch(97% 0.008 210);
    --reef-surface-3:  oklch(94% 0.014 200);
    --reef-line:       oklch(91% 0.012 210);
    --reef-line-strong:oklch(82% 0.018 210);

    /* --- brand --- */
    --reef-deep:       oklch(46% 0.105 215);
    --reef-tide:       oklch(58% 0.118 210);
    --reef-aqua:       oklch(74% 0.110 185);
    --reef-deep-tint:  oklch(95% 0.022 210);

    /* --- severity (semantic) --- */
    --sev-good:        oklch(56% 0.14 160);
    --sev-good-tint:   oklch(96% 0.040 160);
    --sev-good-edge:   oklch(86% 0.090 160);

    --sev-caution:     oklch(63% 0.140 75);
    --sev-caution-tint:oklch(97% 0.050 75);
    --sev-caution-edge:oklch(86% 0.115 75);

    --sev-warning:     oklch(60% 0.165 35);
    --sev-warning-tint:oklch(96% 0.060 35);
    --sev-warning-edge:oklch(82% 0.130 35);

    --sev-danger:      oklch(54% 0.200 20);
    --sev-danger-tint: oklch(94% 0.070 20);
    --sev-danger-edge: oklch(80% 0.150 20);

    --sev-info:        oklch(55% 0.040 230);
    --sev-info-tint:   oklch(96% 0.012 220);
    --sev-info-edge:   oklch(86% 0.020 220);

    --reef-radius:     12px;
    --reef-radius-sm:  8px;
    --reef-shadow:     0 1px 2px oklch(40% 0.02 220 / 0.06), 0 4px 12px oklch(40% 0.02 220 / 0.04);

    color: var(--reef-ink);
    background: var(--reef-paper);
    line-height: 1.55;
    max-width: 1100px;
    margin: 24px auto;
    padding: 0 20px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Roboto, sans-serif;
    font-feature-settings: "ss01", "cv11", "tnum";
}

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

.reef-icp-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    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;
}

/* 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;
}

.reef-icp-status-bg-good::before    { background: var(--sev-good); }
.reef-icp-status-bg-caution::before { background: var(--sev-caution); }
.reef-icp-status-bg-warning::before { background: var(--sev-warning); }
.reef-icp-status-bg-danger::before  { background: var(--sev-danger); }

.reef-icp-status-bg-good    { background: linear-gradient(180deg, var(--sev-good-tint) 0%, var(--reef-surface) 60%); }
.reef-icp-status-bg-caution { background: linear-gradient(180deg, var(--sev-caution-tint) 0%, var(--reef-surface) 60%); }
.reef-icp-status-bg-warning { background: linear-gradient(180deg, var(--sev-warning-tint) 0%, var(--reef-surface) 60%); }
.reef-icp-status-bg-danger  { background: linear-gradient(180deg, var(--sev-danger-tint) 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);
}
.reef-icp-summary-meta p {
    margin: 0;
    color: var(--reef-ink-soft);
    font-size: 14px;
}

.reef-icp-score {
    text-align: right;
    min-width: 110px;
    padding-left: 18px;
    border-left: 1px solid var(--reef-line);   /* 1px hairline, NOT a side-stripe accent */
}

.reef-icp-score-value {
    font-size: 48px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: -0.025em;
    font-variant-numeric: tabular-nums;
    color: var(--reef-deep);
}
.reef-icp-status-bg-good    .reef-icp-score-value { color: var(--sev-good); }
.reef-icp-status-bg-caution .reef-icp-score-value { color: var(--sev-caution); }
.reef-icp-status-bg-warning .reef-icp-score-value { color: var(--sev-warning); }
.reef-icp-status-bg-danger  .reef-icp-score-value { color: var(--sev-danger); }

.reef-icp-score-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.10em;
    margin-top: 4px;
    color: var(--reef-ink-soft);
    font-weight: 600;
}

/* ============================================================ SHARE */

.reef-icp-share {
    margin: 0 0 26px;
    font-size: 13px;
    color: var(--reef-ink-soft);
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.reef-icp-share strong { color: var(--reef-ink); }
.reef-icp-share input {
    flex: 1;
    min-width: 240px;
    max-width: 580px;
    padding: 7px 12px;
    border: 1px solid var(--reef-line);
    border-radius: var(--reef-radius-sm);
    font-size: 12px;
    color: var(--reef-ink-soft);
    background: var(--reef-surface-2);
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}
.reef-icp-share input:focus {
    outline: 2px solid var(--reef-tide);
    outline-offset: 2px;
    border-color: var(--reef-tide);
    color: var(--reef-ink);
}

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

.reef-icp-section { margin: 28px 0; }
.reef-icp-section h3 {
    margin: 0 0 14px;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--reef-deep);
    font-weight: 600;
    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;
}

/*
 * 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;
}

.reef-icp-flag-head strong,
.reef-icp-rec-head strong {
    color: var(--reef-ink);
    font-weight: 600;
    font-size: 15px;
    letter-spacing: -0.005em;
}

.reef-icp-flag p {
    margin: 6px 0 0;
    color: oklch(30% 0.025 30);   /* a darker shade of the tinted bg, NOT gray */
    font-size: 14px;
}
.reef-icp-flag.reef-icp-sev-caution p { color: oklch(32% 0.04 75); }
.reef-icp-flag.reef-icp-sev-warning p { color: oklch(32% 0.05 35); }
.reef-icp-flag.reef-icp-sev-danger  p { color: oklch(32% 0.06 20); }

.reef-icp-flag details { margin-top: 10px; font-size: 13px; color: var(--reef-ink-soft); }
.reef-icp-flag details summary { cursor: pointer; color: var(--reef-deep); font-weight: 500; }
.reef-icp-flag details summary:hover { color: var(--reef-tide); }
.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(--reef-deep); font-weight: 600; }

.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(--reef-surface);
    border: 1px solid var(--sev-danger-edge);
    color: oklch(30% 0.06 20);
    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: oklch(99% 0.005 20);
    font-weight: 700;
    text-align: center;
    line-height: 18px;
    font-size: 12px;
}
.reef-icp-safety strong { color: oklch(38% 0.10 20); }

/* ============================================================ 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: oklch(99% 0.01 160); border-color: transparent; }
.reef-icp-sev-bg-caution { background: var(--sev-caution); color: oklch(20% 0.05 75);  border-color: transparent; }
.reef-icp-sev-bg-warning { background: var(--sev-warning); color: oklch(99% 0.01 35);  border-color: transparent; }
.reef-icp-sev-bg-danger  { background: var(--sev-danger);  color: oklch(99% 0.01 20);  border-color: transparent; }
.reef-icp-sev-bg-info    { background: var(--sev-info);    color: oklch(99% 0.005 230); border-color: transparent; }

.reef-icp-prio-bg-urgent { background: var(--sev-danger);  color: oklch(99% 0.01 20);  border-color: transparent; }
.reef-icp-prio-bg-high   { background: var(--sev-warning); color: oklch(99% 0.01 35);  border-color: transparent; }
.reef-icp-prio-bg-medium { background: var(--sev-caution); color: oklch(20% 0.05 75);  border-color: transparent; }
.reef-icp-prio-bg-low    { background: var(--reef-surface-2); color: var(--reef-deep); border-color: var(--reef-line-strong); }

/* WP admin status pills (used in reports list) */
.reef-icp-status-good    { background: var(--sev-good);    color: oklch(99% 0.01 160); }
.reef-icp-status-caution { background: var(--sev-caution); color: oklch(20% 0.05 75); }
.reef-icp-status-warning { background: var(--sev-warning); color: oklch(99% 0.01 35); }
.reef-icp-status-danger  { background: var(--sev-danger);  color: oklch(99% 0.01 20); }

/* ============================================================ 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 {
    background: var(--reef-surface-2);
    color: var(--reef-deep);
    text-transform: uppercase;
    font-size: 10.5px;
    letter-spacing: 0.10em;
    font-weight: 600;
}
.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); }
.reef-icp-elements td:nth-child(2) { font-variant-numeric: tabular-nums; font-weight: 600; }
.reef-icp-elements td:nth-child(3) { color: var(--reef-ink-soft); font-size: 13px; }
.reef-icp-elements td:nth-child(4) { color: var(--reef-ink-soft); font-size: 13px; font-variant-numeric: tabular-nums; }

.reef-icp-row-good    { background: oklch(98% 0.018 160); }
.reef-icp-row-good    td:first-child { box-shadow: inset 3px 0 0 var(--sev-good); }
.reef-icp-row-caution { background: oklch(98% 0.022 75); }
.reef-icp-row-caution td:first-child { box-shadow: inset 3px 0 0 var(--sev-caution); }
.reef-icp-row-warning { background: oklch(97% 0.030 35); }
.reef-icp-row-warning td:first-child { box-shadow: inset 3px 0 0 var(--sev-warning); }
.reef-icp-row-danger  { background: oklch(96% 0.040 20); }
.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(--reef-deep);
    font-weight: 600;
    letter-spacing: 0.005em;
}
.reef-icp-chart-card canvas {
    width: 100% !important;
    max-height: 220px;
}

/* ---------------------------------------------------------------- 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 {
    margin: 0 0 6px;
    font-size: clamp(18px, 2.2vw, 24px);
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--reef-deep);
}
.reef-icp-submit-hero .reef-icp-submit-head h3 {
    font-size: clamp(22px, 3.4vw, 32px);
}
.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(--reef-tide);
    font-weight: 600;
}

.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: oklch(40% 0.12 35);
    font-size: 13px;
    line-height: 1.45;
}

/* Honeypot — visible to bots, not to humans or assistive tech. */
.reef-icp-honey {
    position: absolute;
    left: -10000px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.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;
}
.reef-icp-field > span {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--reef-ink-soft);
}
.reef-icp-field input {
    width: 100%;
    padding: 10px 12px;
    font: inherit;
    font-size: 14px;
    color: var(--reef-ink);
    background: var(--reef-paper);
    border: 1px solid var(--reef-line-strong);
    border-radius: var(--reef-radius-sm);
    box-shadow: inset 0 1px 0 oklch(40% 0.02 220 / 0.03);
    transition: border-color 120ms ease, box-shadow 120ms ease;
    appearance: none;
}
.reef-icp-field input::placeholder {
    color: var(--reef-ink-faint);
}
.reef-icp-field input:hover {
    border-color: color-mix(in oklch, var(--reef-tide) 35%, var(--reef-line-strong));
}
.reef-icp-field input:focus,
.reef-icp-field input:focus-visible {
    outline: none;
    border-color: var(--reef-tide);
    box-shadow: 0 0 0 3px color-mix(in oklch, var(--reef-tide) 25%, transparent);
}
.reef-icp-field input:invalid:not(:placeholder-shown) {
    border-color: var(--sev-warning-edge);
}

.reef-icp-submit-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
    margin-top: 16px;
}
/* Higher specificity (.reef-icp-public chain) so a host theme's default
 * button styling can't bleach our submit button. Colors are written
 * literally rather than via CSS vars so they survive scoped overrides. */
.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;
    padding: 12px 24px;
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.01em;
    line-height: 1;
    color: #ffffff;
    text-shadow: 0 1px 0 oklch(20% 0.06 220 / 0.25);
    background-color: oklch(36% 0.110 215);
    background-image: linear-gradient(180deg, oklch(42% 0.115 215) 0%, oklch(34% 0.105 215) 100%);
    border: 1px solid oklch(28% 0.090 215);
    border-radius: 8px;
    cursor: pointer;
    text-decoration: none;
    transition: filter 120ms ease, transform 120ms ease, box-shadow 120ms ease;
    box-shadow:
        inset 0 1px 0 oklch(100% 0 0 / 0.15),
        0 1px 0 oklch(20% 0.06 220 / 0.20),
        0 2px 6px oklch(20% 0.06 220 / 0.15);
}
.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);
    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(1px);
    filter: brightness(0.96);
    box-shadow:
        inset 0 1px 0 oklch(100% 0 0 / 0.10),
        0 1px 0 oklch(20% 0.06 220 / 0.20);
}
.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 oklch(74% 0.110 185);
    outline-offset: 2px;
}
.reef-icp-submit-note {
    margin: 0;
    flex: 1 1 280px;
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--reef-ink-faint);
}

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

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

.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: 2px solid var(--reef-tide);
    outline-offset: 2px;
    border-radius: 4px;
}

@media (prefers-reduced-motion: no-preference) {
    .reef-icp-flag,
    .reef-icp-rec {
        transition: transform 220ms cubic-bezier(0.2, 0.6, 0.2, 1), box-shadow 220ms;
    }
    .reef-icp-flag:hover,
    .reef-icp-rec:hover {
        transform: translateY(-1px);
        box-shadow: 0 4px 16px oklch(40% 0.05 215 / 0.08);
    }
}