/* ============================================================================
   Simpler Grants — Grant profile (opportunity detail)
   Restyled to the production dashboard design ("Cream & Terracotta", the light
   register of the Reading Room layout): cream ground, coffee-brown Newsreader
   serif, terracotta reserved for interactive accents, double-bezel panels
   (a warm outer rim holding a paler inner core), mono for data details.

   Two kinds of content stay visually distinct: grant facts live in the main
   column's neutral panels; the viewer's relationship is confined to the single
   terracotta-rimmed "Your match" card in the rail. opportunity-profile.js
   toggles .is-active on the vote buttons — keep those class names stable.
   The --dsk-* tokens are copied verbatim from css/dashboard/index.css — keep
   the two blocks in sync. Page chrome comes from the shared app bar.
   ============================================================================ */

:root {
    --dsk-bg: #f5eee1;
    --dsk-rim: rgba(140, 84, 48, 0.05);
    --dsk-rim-line: rgba(140, 84, 48, 0.12);
    --dsk-panel: #fdf9f0;
    --dsk-line: rgba(84, 56, 34, 0.12);
    --dsk-line-strong: rgba(84, 56, 34, 0.24);
    --dsk-ink: #38271a;
    --dsk-ink-soft: #7b6350;
    --dsk-ink-faint: #a08a75;
    --dsk-terra: #bc5233;
    --dsk-terra-deep: #9d4127;
    --dsk-ease: cubic-bezier(0.32, 0.72, 0, 1);
    --dsk-serif: "Newsreader", ui-serif, Georgia, serif;
    --dsk-mono: "Spline Sans Mono", ui-monospace, SFMono-Regular, monospace;
}

*, *::before, *::after { box-sizing: border-box; }

[hidden] { display: none !important; }

body.gp-body {
    margin: 0;
    background: var(--dsk-bg);
    color: var(--dsk-ink);
    font-family: var(--dsk-serif);
    font-size: 16px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    min-height: 100dvh;
}

.gp-body a { color: inherit; text-decoration: none; }

.gp-body :focus-visible {
    outline: 2px solid var(--dsk-terra);
    outline-offset: 2px;
    border-radius: 3px;
}

.gp-eyebrow {
    font-family: var(--dsk-mono);
    font-size: 10.5px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-weight: 600;
}

/* ---- Page frame ---- */

.gp-wrap {
    max-width: 1240px;
    margin: 0 auto;
    padding: 52px 32px 96px;
}

/* ---- Header / identity ---- */

.gp-head {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding-bottom: 24px;
}

.gp-head__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
}

.gp-head__eyebrow {
    margin: 0;
    color: var(--dsk-ink-faint);
    font-variant-numeric: tabular-nums;
}

/* Status pill: informational, so ink tones — only the "open" dot carries terracotta
   (a live-deadline cue, same family as the desk's urgency labels). */
.gp-status {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--dsk-mono);
    font-size: 10.5px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--dsk-ink-soft);
    border: 1px solid var(--dsk-line-strong);
    border-radius: 999px;
    padding: 5px 12px;
    white-space: nowrap;
}

.gp-status__dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--dsk-terra);
}

.gp-status--forecasted .gp-status__dot { background: var(--dsk-ink-soft); }

.gp-status--closed,
.gp-status--archived {
    color: var(--dsk-ink-faint);
    border-style: dashed;
}

.gp-status--closed .gp-status__dot,
.gp-status--archived .gp-status__dot { background: var(--dsk-ink-faint); }

.gp-title {
    margin: 0;
    font-size: clamp(30px, 3.6vw, 44px);
    font-weight: 600;
    letter-spacing: -0.015em;
    line-height: 1.08;
    max-width: 26ch;
}

.gp-head__links {
    display: flex;
    gap: 22px;
    flex-wrap: wrap;
}

/* .gp-body prefix beats the global anchor inherit rule on the link color. */
.gp-body .gp-head__links a {
    font-family: var(--dsk-mono);
    font-size: 11px;
    color: var(--dsk-ink-soft);
    border-bottom: 1px solid var(--dsk-line-strong);
    padding-bottom: 2px;
    transition: color 0.3s var(--dsk-ease), border-color 0.3s var(--dsk-ease);
}

.gp-body .gp-head__links a:hover {
    color: var(--dsk-terra);
    border-color: var(--dsk-terra);
}

/* ---- Dealbreaker row (hairline strip, mirrors the desk's attention strip) ---- */

.gp-breakers {
    display: flex;
    align-items: baseline;
    gap: 14px;
    flex-wrap: wrap;
    background: var(--dsk-panel);
    border: 1px solid var(--dsk-line);
    border-left: 4px solid var(--dsk-terra);
    border-radius: 10px;
    padding: 13px 20px;
    margin-bottom: 28px;
}

.gp-breakers__label {
    color: var(--dsk-terra);
    margin-right: 2px;
    white-space: nowrap;
}

.gp-breakers__item { position: relative; }
.gp-breakers__item summary { list-style: none; }
.gp-breakers__item summary::-webkit-details-marker { display: none; }

.gp-badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    border: 1px solid var(--dsk-line-strong);
    border-radius: 999px;
    padding: 5px 12px;
    font-family: var(--dsk-mono);
    font-size: 10.5px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--dsk-ink);
    transition: border-color 0.3s var(--dsk-ease);
}

summary.gp-badge { cursor: pointer; }
summary.gp-badge:hover { border-color: var(--dsk-terra); }

.gp-badge__check { color: var(--dsk-terra); }
.gp-badge__caret { color: var(--dsk-ink-faint); }

.gp-badge--unknown {
    border-style: dashed;
    color: var(--dsk-ink-faint);
}

/* ---- NOFO quote (the receipt) ---- */

.gp-quote {
    margin: 8px 0 0;
    border-left: 2px solid var(--dsk-line-strong);
    padding: 2px 0 2px 12px;
    font-size: 14px;
    font-style: italic;
    color: var(--dsk-ink-soft);
    max-width: 420px;
}

.gp-quote--wide { max-width: 560px; }
.gp-quote--warn { padding-left: 10px; font-size: 13px; }

.gp-quote__cite {
    font-family: var(--dsk-mono);
    font-style: normal;
    font-size: 9.5px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--dsk-ink-faint);
}

/* ---- Body grid: facts left, rail right ---- */

.gp-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 28px;
    align-items: start;
}

.gp-main,
.gp-rail {
    display: flex;
    flex-direction: column;
    gap: 28px;
    min-width: 0;
}

.gp-rail {
    position: sticky;
    top: 24px;
}

/* ---- Double-bezel panels: warm outer rim, paler inner core ---- */

.gp-shell {
    background: var(--dsk-rim);
    border: 1px solid var(--dsk-rim-line);
    border-radius: 20px;
    padding: 7px;
}

.gp-panel {
    background: var(--dsk-panel);
    border: 1px solid var(--dsk-line);
    border-radius: 13px;
    box-shadow: 0 1px 2px rgba(84, 56, 34, 0.05), inset 0 1px 0 rgba(255, 255, 255, 0.7);
    padding: 22px 24px 20px;
}

.gp-panel__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--dsk-line);
    margin-bottom: 14px;
}

.gp-panel__head h2 {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    letter-spacing: -0.005em;
}

.gp-panel__note {
    font-family: var(--dsk-mono);
    font-size: 11px;
    color: var(--dsk-ink-faint);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.gp-blank {
    margin: 0;
    color: var(--dsk-ink-faint);
    font-size: 15px;
    font-style: italic;
}

/* ---- At a glance ---- */

.gp-glance__body {
    margin: 0;
    font-size: 17.5px;
    line-height: 1.6;
    color: var(--dsk-ink);
    white-space: pre-line;   /* the pipeline summary keeps its paragraph breaks */
}

.gp-glance__note {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin: 16px 0 0;
    padding-top: 14px;
    border-top: 1px solid var(--dsk-line);
    font-family: var(--dsk-mono);
    font-size: 10px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--dsk-ink-faint);
}

.gp-glance__note span { color: var(--dsk-terra); }

/* ---- What it funds ---- */

.gp-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin: 0 0 16px;
    padding: 0;
    list-style: none;
}

.gp-tags li {
    font-family: var(--dsk-mono);
    font-size: 10px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    border: 1px solid var(--dsk-line);
    color: var(--dsk-ink-soft);
    padding: 4px 10px;
    border-radius: 999px;
}

/* The viewer's own focus areas — the one personal signal outside the match card. */
.gp-tags li.gp-tag--focus {
    border-color: rgba(188, 82, 51, 0.4);
    color: var(--dsk-terra);
}

.gp-official summary { list-style: none; }
.gp-official summary::-webkit-details-marker { display: none; }

.gp-official__summary {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-family: var(--dsk-mono);
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--dsk-ink-soft);
    padding: 12px 0 0;
    border-top: 1px solid var(--dsk-line);
    transition: color 0.3s var(--dsk-ease);
}

.gp-official__summary:hover { color: var(--dsk-terra); }
.gp-official__summary span { color: var(--dsk-terra); font-size: 14px; }

.gp-official__body {
    margin: 10px 0 0;
    font-size: 15.5px;
    line-height: 1.65;
    color: var(--dsk-ink-soft);
    max-width: 62ch;
}

/* ---- Who can apply ---- */

.gp-applicants {
    margin: 0 0 18px;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-size: 16px;
    line-height: 1.5;
}

.gp-applicants li { display: flex; gap: 12px; }

.gp-applicants__check {
    font-family: var(--dsk-mono);
    color: var(--dsk-terra);
    font-size: 12px;
    padding-top: 3px;
}

.gp-factrow {
    border-top: 1px solid var(--dsk-line);
    padding: 13px 0 0;
}

.gp-factrow + .gp-factrow,
.gp-blank + .gp-factrow { margin-top: 13px; }

.gp-factrow__line {
    display: flex;
    align-items: baseline;
    gap: 12px;
    flex-wrap: wrap;
}

.gp-factrow__label { color: var(--dsk-ink-faint); }
.gp-factrow__value { font-size: 16px; }

.gp-factrow__empty {
    font-size: 15px;
    font-style: italic;
    color: var(--dsk-ink-faint);
}

/* ---- Change history (the ledger's receipts) ---- */

.gp-changes__list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.gp-changes__row {
    display: flex;
    gap: 14px;
    align-items: baseline;
    padding: 10px 0;
}

.gp-changes__row + .gp-changes__row { border-top: 1px solid var(--dsk-line); }

.gp-changes__date {
    flex: none;
    width: 92px;
    font-family: var(--dsk-mono);
    font-size: 11px;
    color: var(--dsk-ink-faint);
    font-variant-numeric: tabular-nums;
}

.gp-changes__text {
    font-size: 14.5px;
    color: var(--dsk-ink-soft);
}

/* ---- Your match (the ONLY personal-styled panel: terracotta rim) ---- */

.gp-shell--match { border-color: rgba(188, 82, 51, 0.45); }

.gp-match__tier {
    margin: 0 0 12px;
    font-family: var(--dsk-mono);
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--dsk-terra);
}

.gp-match__lead {
    margin: 0;
    font-size: 14.5px;
    line-height: 1.5;
    color: var(--dsk-ink-soft);
}

.gp-match__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin: 8px 0 14px;
}

.gp-chip--focus {
    font-family: var(--dsk-mono);
    font-size: 10px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    border: 1px solid rgba(188, 82, 51, 0.4);
    color: var(--dsk-terra);
    padding: 4px 10px;
    border-radius: 999px;
}

.gp-match__eligible {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin: 0;
    border-top: 1px solid var(--dsk-line);
    padding-top: 12px;
    font-family: var(--dsk-mono);
    font-size: 10.5px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--dsk-ink-soft);
}

.gp-match__eligible span { color: var(--dsk-terra); }

.gp-match__unconfirmed {
    margin: 0;
    border-top: 1px solid var(--dsk-line);
    padding-top: 12px;
    font-size: 14px;
    line-height: 1.5;
    color: var(--dsk-ink-soft);
}

.gp-match__foot {
    border-top: 1px solid var(--dsk-line);
    padding-top: 12px;
}

.gp-warn {
    background: rgba(188, 82, 51, 0.07);
    border-left: 3px solid var(--dsk-terra-deep);
    border-radius: 0 8px 8px 0;
    padding: 12px 14px;
}

.gp-warn__head {
    font-family: var(--dsk-mono);
    font-size: 10.5px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--dsk-terra-deep);
    font-weight: 600;
    margin-bottom: 6px;
}

.gp-warn__body {
    font-size: 14px;
    line-height: 1.5;
    color: var(--dsk-ink);
}

/* ---- Key facts (mirrors the desk's fact lists) ---- */

.gp-facts { margin: 0; padding: 0; }

.gp-fact {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    padding: 11px 0;
}

.gp-fact + .gp-fact { border-top: 1px solid var(--dsk-line); }

.gp-fact dt {
    color: var(--dsk-ink-soft);
    font-size: 14.5px;
}

.gp-fact dd {
    margin: 0;
    font-family: var(--dsk-mono);
    font-size: 14px;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.gp-fact__stack {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 3px;
}

.gp-fact__urgency {
    font-family: var(--dsk-mono);
    font-size: 11px;
    color: var(--dsk-terra);
}

.gp-fact__ghost {
    font-style: italic;
    color: var(--dsk-ink-faint);
}

.gp-fact__muted { color: var(--dsk-ink-soft); }

/* ---- Actions ---- */

/* .gp-body prefix beats the global anchor inherit rule, which would otherwise
   override the button's light text color. */
.gp-body .gp-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    background: var(--dsk-terra);
    color: #fdf6ec;
    font-family: var(--dsk-mono);
    font-weight: 600;
    font-size: 13px;
    padding: 13px 24px;
    border-radius: 999px;
    white-space: nowrap;
    transition: transform 0.4s var(--dsk-ease), box-shadow 0.4s var(--dsk-ease), background 0.4s var(--dsk-ease);
}

.gp-body .gp-cta:hover {
    background: var(--dsk-terra-deep);
    transform: translateY(-1px);
    box-shadow: 0 12px 30px -14px rgba(188, 82, 51, 0.55);
}

.gp-body .gp-cta:active { transform: scale(0.98); }

.gp-actions {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.gp-actions__row { display: flex; gap: 8px; }
.gp-actions__form { display: contents; }
.gp-actions__form--hide { display: block; }

.gp-btn-save {
    flex: 1;
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: transparent;
    border: 1px solid var(--dsk-line-strong);
    border-radius: 999px;
    padding: 10px 16px;
    font-family: var(--dsk-mono);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--dsk-ink-soft);
    cursor: pointer;
    transition: border-color 0.3s var(--dsk-ease), color 0.3s var(--dsk-ease);
}

.gp-btn-save:hover {
    border-color: var(--dsk-terra);
    color: var(--dsk-terra);
}

.gp-btn-save[aria-pressed="true"] {
    color: var(--dsk-terra);
    border-color: var(--dsk-terra);
    background: rgba(188, 82, 51, 0.08);
}

/* Deliberately quiet — Hide is the destructive-feeling minority action. */
.gp-btn-hide {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    background: transparent;
    border: 1px dashed var(--dsk-line-strong);
    border-radius: 999px;
    padding: 10px 16px;
    font-family: var(--dsk-mono);
    font-size: 11px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--dsk-ink-faint);
    cursor: pointer;
    transition: color 0.3s var(--dsk-ease), border-color 0.3s var(--dsk-ease);
}

.gp-btn-hide:hover {
    color: var(--dsk-ink-soft);
    border-color: var(--dsk-ink-faint);
}

.gp-actions__form--track { display: block; }

.gp-btn-track {
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: transparent;
    border: 1px solid var(--dsk-terra);
    border-radius: 999px;
    padding: 10px 16px;
    font-family: var(--dsk-mono);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--dsk-terra);
    cursor: pointer;
    transition: background 0.3s var(--dsk-ease), color 0.3s var(--dsk-ease), border-color 0.3s var(--dsk-ease);
}

.gp-btn-track:hover {
    background: var(--dsk-terra);
    color: #fdf6ec;
}

.gp-btn-track.is-tracking {
    background: var(--dsk-terra);
    color: #fdf6ec;
}

.gp-btn-track.is-tracking:hover {
    background: var(--dsk-terra-deep);
    border-color: var(--dsk-terra-deep);
}

.gp-feedback {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    font-family: var(--dsk-mono);
    font-size: 10px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--dsk-ink-faint);
}

.gp-feedback__form { display: contents; }

.gp-vote {
    background: transparent;
    border: 1px solid var(--dsk-line-strong);
    border-radius: 999px;
    padding: 5px 10px;
    cursor: pointer;
    font-size: 12px;
    /* color emoji ignore `color` — mute the inactive glyph and let the active one bloom */
    filter: grayscale(85%) opacity(0.7);
    transition: filter 0.3s var(--dsk-ease), border-color 0.3s var(--dsk-ease), background 0.3s var(--dsk-ease);
}

.gp-vote:hover { filter: grayscale(30%) opacity(0.9); }

.gp-vote.is-active {
    filter: none;
    border-color: var(--dsk-terra);
    background: rgba(188, 82, 51, 0.08);
}

/* ---- Entry motion (transform/opacity only, reduced-motion guarded) ---- */

@media (prefers-reduced-motion: no-preference) {
    .gp-head, .gp-breakers, .gp-main > .gp-shell, .gp-rail > * {
        animation: gp-rise 0.7s var(--dsk-ease) both;
    }
    .gp-breakers { animation-delay: 0.05s; }
    .gp-main > .gp-shell:nth-child(1) { animation-delay: 0.1s; }
    .gp-main > .gp-shell:nth-child(2) { animation-delay: 0.16s; }
    .gp-main > .gp-shell:nth-child(3) { animation-delay: 0.22s; }
    .gp-main > .gp-shell:nth-child(4) { animation-delay: 0.28s; }
    .gp-rail > *:nth-child(1) { animation-delay: 0.14s; }
    .gp-rail > *:nth-child(2) { animation-delay: 0.2s; }
    .gp-rail > *:nth-child(3) { animation-delay: 0.26s; }
    .gp-rail > *:nth-child(4) { animation-delay: 0.32s; }
}

@keyframes gp-rise {
    from { opacity: 0; transform: translateY(14px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ---- Responsive: collapse to one column, match card first ---- */

@media (max-width: 1080px) {
    .gp-grid { grid-template-columns: minmax(0, 1fr); }
    .gp-rail { order: 1; position: static; }
    .gp-main { order: 2; }
}

@media (max-width: 640px) {
    .gp-wrap { padding: 32px 18px 72px; }
    .gp-head__row { flex-direction: column; align-items: flex-start; gap: 10px; }
    .gp-fact { flex-direction: column; align-items: flex-start; gap: 4px; }
    .gp-fact dd { text-align: left; }
    .gp-fact__stack { align-items: flex-start; }
    .gp-changes__row { flex-direction: column; gap: 4px; }
    .gp-changes__date { width: auto; }
}