/* competitor-intel.css — shared Frame C card (ci- prefix), 2026-08-26.
   Hosts: dashboard.html (dashboard section + roadmap top) · grant-gameplan.html.
   Grid rows: fully explicit placement on BOTH axes (the v3 mockup lesson — a
   definite-row cell with an auto column seizes column 1 and flips the row). */
.ci-card { background: #FFFDF9; border: 1px solid rgba(184,134,11,.25); border-radius: 18px; overflow: hidden; box-shadow: 0 4px 12px rgba(28,25,23,.06); font-family: 'Plus Jakarta Sans', 'Helvetica Neue', sans-serif; color: #1C1917; }
.ci-head { padding: 20px 24px 14px; }
.ci-pill-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 9px; }
.ci-pill { background: rgba(184,134,11,.06); border: 1px solid rgba(184,134,11,.25); color: #B8860B; font-size: 10.5px; font-weight: 800; letter-spacing: .06em; padding: 4px 10px; border-radius: 999px; text-transform: uppercase; white-space: nowrap; }
.ci-src { font-size: 10.5px; color: #A8A29E; }
.ci-h { margin: 0; font-family: 'Fraunces', Georgia, serif; font-size: 19px; font-weight: 600; line-height: 1.34; }
.ci-basis { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 9px; }
.ci-basis-l { font-size: 10.5px; font-weight: 800; letter-spacing: .06em; color: #A8A29E; }
.ci-chip { display: inline-block; background: #F2EBE0; border: 1px solid #E7E5E4; color: #57534E; font-size: 10.5px; font-weight: 700; padding: 2px 8px; border-radius: 999px; white-space: nowrap; }
.ci-chip--on { background: #D8F3DC; border-color: rgba(27,67,50,.25); color: #1B4332; }
.ci-chip--comp { background: rgba(196,83,43,.08); border-color: rgba(196,83,43,.25); color: #A3401F; margin-left: 6px; vertical-align: 1px; }
.ci-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: #E7E5E4; border-top: 1px solid #E7E5E4; border-bottom: 1px solid #E7E5E4; }
.ci-stat { background: #FFFDF9; padding: 11px 24px 11px 16px; min-width: 0; }
.ci-stat:first-child { padding-left: 24px; }
.ci-stat-v { font-family: 'Fraunces', Georgia, serif; font-weight: 600; font-size: 18px; color: #1B4332; }
.ci-stat-v--sm { font-size: 14px; line-height: 1.3; }
.ci-stat-k { font-size: 10.5px; color: #A8A29E; margin-top: 2px; line-height: 1.35; }
.ci-gap { padding: 11px 24px; font-size: 12.5px; line-height: 1.5; background: #FAF7F2; border-bottom: 1px solid #E7E5E4; }
.ci-gap b { color: #1B4332; }
.ci-gap-z { color: #A3401F; font-weight: 700; }
.ci-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1px 14px; align-items: center; padding: 11px 24px; border-bottom: 1px solid #E7E5E4; min-height: 46px; }
/* The row is a <button> when it can reveal something: full button reset, then the same
   grid as the static row. Text stays left-aligned and inherits the card's family. */
button.ci-row { width: 100%; background: #FFFDF9; border: 0; border-bottom: 1px solid #E7E5E4; font-family: inherit; color: inherit; text-align: left; cursor: pointer; -webkit-appearance: none; appearance: none; transition: background .14s ease; }
button.ci-row:focus-visible { outline: 2px solid #1B4332; outline-offset: -2px; }
.ci-row-n { grid-column: 1; grid-row: 1; font-weight: 700; font-size: 13.5px; min-width: 0; }
.ci-row-why { grid-column: 1; grid-row: 2; font-size: 12px; color: #57534E; font-style: italic; min-width: 0; }
.ci-row-a { grid-column: 2; grid-row: 1 / span 2; text-align: right; font-family: 'Fraunces', Georgia, serif; font-weight: 600; font-size: 15px; color: #1B4332; }
.ci-row-a small { display: block; font-family: 'Plus Jakarta Sans', sans-serif; font-size: 10px; color: #A8A29E; font-weight: 600; margin-top: 1px; }
.ci-row--locked .ci-bar { display: inline-block; height: 11px; border-radius: 6px; background: linear-gradient(90deg, #E7E5E4, #F2EBE0); }
.ci-row--locked .ci-bar--thin { height: 8px; }
.ci-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; background: #C4532B; color: #fff !important; text-decoration: none; font-weight: 700; font-size: 13.5px; padding: 10px 20px; border-radius: 9px; }
.ci-btn:hover, .ci-btn:focus, .ci-btn:visited, .ci-btn:active { color: #fff !important; }
.ci-kicker { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 16px; align-items: center; padding: 12px 24px; background: rgba(196,83,43,.08); border-bottom: 1px solid #E7E5E4; }
.ci-kicker-n { grid-column: 1; grid-row: 1; font-weight: 700; font-size: 13px; color: #A3401F; min-width: 0; }
.ci-kicker-d { grid-column: 1; grid-row: 2; font-size: 11.5px; color: #57534E; min-width: 0; }
.ci-kicker-j { grid-column: 2; grid-row: 1 / span 2; font-size: 12px; font-weight: 700; color: #A3401F; white-space: nowrap; text-decoration: none; }
.ci-foot { padding: 10px 24px 13px; font-size: 10px; color: #A8A29E; line-height: 1.45; }
@media (max-width: 560px) {
  .ci-head, .ci-stat:first-child, .ci-stat, .ci-gap, .ci-row, .ci-kicker, .ci-foot { padding-left: 16px; padding-right: 16px; }
  .ci-stats { grid-template-columns: 1fr 1fr; }
  .ci-stats .ci-stat:nth-child(3) { grid-column: 1 / -1; border-top: 1px solid #E7E5E4; }
  .ci-h { font-size: 17px; }
}
.ci-lock-ic { color: #A8A29E; margin-right: 7px; vertical-align: -1px; }

/* ── Phase 2 (2026-08-27): the reveal ────────────────────────────────────────────────
   Hover is an AFFORDANCE, never the mechanism — press toggles on every pointer type
   (a hover-designed popover is a loop on touch). So the hover rules are fenced behind
   a fine-pointer query and nothing behavioural depends on them. */
@media (hover: hover) and (pointer: fine) {
  button.ci-row:hover { background: #FAF7F2; }
  button.ci-row:hover .ci-chev { color: #1B4332; }
  .ci-prog--link:hover { background: #F7F3EC; }
}
.ci-chev { color: #A8A29E; margin-right: 7px; vertical-align: -2px; transition: transform .16s ease; flex: none; }
button.ci-row[aria-expanded="true"] { background: #FAF7F2; }
button.ci-row[aria-expanded="true"] .ci-chev { transform: rotate(180deg); color: #1B4332; }
.ci-hint { padding: 9px 24px 0; font-size: 11px; color: #A8A29E; letter-spacing: .01em; }

/* ⚠ The HTML [hidden] attribute is silently defeated by ANY rule that sets display —
   these two rules are what keep a closed panel closed rather than an invisible
   click-blocker. Specificity (0,0,2,0) beats the block rules below. */
.ci-exp { display: block; background: #FAF7F2; border-bottom: 1px solid #E7E5E4; padding: 4px 24px 12px; }
.ci-exp[hidden] { display: none; }
.ci-offer[hidden] { display: none; }
.ci-exp-l { font-size: 10.5px; font-weight: 800; letter-spacing: .06em; color: #A8A29E; text-transform: uppercase; padding: 8px 0 6px; }

.ci-prog { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 1px 12px; align-items: center; padding: 8px 10px; border-radius: 8px; text-decoration: none; color: inherit; min-height: 44px; }
.ci-prog + .ci-prog { margin-top: 2px; }
.ci-prog-t { grid-column: 1; grid-row: 1; font-size: 12.5px; font-weight: 700; min-width: 0; }
.ci-prog-m { grid-column: 1; grid-row: 2; font-size: 11px; color: #A8A29E; min-width: 0; }
.ci-prog-pivot { display: block; color: #57534E; margin-top: 1px; }
.ci-prog-a { grid-column: 2; grid-row: 1 / span 2; text-align: right; font-family: 'Fraunces', Georgia, serif; font-weight: 600; font-size: 13.5px; color: #1B4332; white-space: nowrap; }
.ci-prog-go { grid-column: 3; grid-row: 1 / span 2; color: #A8A29E; font-size: 13px; }
/* Sitewide `a:hover { color: var(--sienna) }` repaints any bare anchor — pin the colour
   across every link state so a programme row keeps its own hierarchy on all three hosts. */
.ci-prog--link, .ci-prog--link:hover, .ci-prog--link:focus, .ci-prog--link:visited, .ci-prog--link:active { color: #1C1917; text-decoration: none; }
.ci-prog--link:focus-visible, .ci-roll-r--link:focus-visible { outline: 2px solid #1B4332; outline-offset: 1px; }
.ci-exp-tail { margin: 9px 0 2px; padding: 0 10px; font-size: 12px; line-height: 1.5; color: #57534E; }
.ci-exp-tail b { color: #1B4332; }

.ci-pchip { display: inline-block; font-size: 9.5px; font-weight: 800; letter-spacing: .04em; padding: 2px 7px; border-radius: 999px; margin-left: 7px; vertical-align: 1px; white-space: nowrap; text-transform: uppercase; }
.ci-pchip--open { background: #D8F3DC; color: #1B4332; }
.ci-pchip--soon { background: rgba(184,134,11,.12); color: #8A6508; }
.ci-pchip--shut { background: #F2EBE0; color: #A8A29E; }
.ci-pchip--plan { background: #EFEAE1; color: #57534E; }

/* ── The paid object: what the whole matched set won ─────────────────────────────── */
.ci-roll { padding: 13px 24px 15px; border-bottom: 1px solid #E7E5E4; background: #FFFDF9; }
.ci-roll--teaser { background: #FAF7F2; }
.ci-roll-h { font-size: 12px; font-weight: 800; letter-spacing: .04em; color: #A8A29E; text-transform: uppercase; margin-bottom: 8px; }
.ci-roll-p { margin: 0 0 11px; font-size: 13.5px; line-height: 1.55; }
.ci-roll-p b { color: #1B4332; }
.ci-roll-r { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 12px; align-items: center; padding: 8px 10px; border-radius: 8px; text-decoration: none; color: inherit; min-height: 44px; }
.ci-roll-r + .ci-roll-r { border-top: 1px solid #F2EBE0; }
.ci-roll-t { font-size: 12.5px; font-weight: 700; min-width: 0; }
.ci-roll-w { font-size: 11px; color: #57534E; font-weight: 700; white-space: nowrap; }
.ci-roll-r--link, .ci-roll-r--link:hover, .ci-roll-r--link:focus, .ci-roll-r--link:visited, .ci-roll-r--link:active { color: #1C1917; text-decoration: none; }
@media (hover: hover) and (pointer: fine) { .ci-roll-r--link:hover { background: #F7F3EC; } }
.ci-btn--roll { border: 0; font-family: inherit; cursor: pointer; }
.ci-roll--fired .ci-btn--roll { display: none; }
.ci-roll--fired { padding-bottom: 13px; }

/* ── The offer moment: sells the withheld decision, not access to a locked UI ─────── */
.ci-offer { position: relative; display: block; padding: 16px 24px 18px; background: #1B4332; color: #fff; border-bottom: 1px solid #E7E5E4; }
.ci-offer-h { font-family: 'Fraunces', Georgia, serif; font-size: 16.5px; font-weight: 600; margin-bottom: 9px; padding-right: 28px; }
.ci-offer-l { margin: 0 0 11px; padding-left: 17px; font-size: 12.5px; line-height: 1.65; color: rgba(255,255,255,.9); }
.ci-offer-p { margin: 0 0 13px; font-size: 11.5px; line-height: 1.55; color: rgba(255,255,255,.72); }
.ci-offer .ci-btn { background: #fff; color: #1B4332 !important; }
.ci-offer-x { position: absolute; top: 4px; right: 6px; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; background: none; border: 0; color: rgba(255,255,255,.6); font-size: 21px; line-height: 1; cursor: pointer; font-family: inherit; }
.ci-offer-x:focus-visible { outline: 2px solid #fff; outline-offset: -4px; border-radius: 8px; }
.ci-offer-x:hover, .ci-offer-x:focus-visible { color: #fff; }

/* Locked rows are buttons now (a locked row that swallows a click reads as broken, not
   gated) — the overlay CTA is gone, so the shimmer bars sit under a pressable surface. */
button.ci-row--locked { cursor: pointer; }
.ci-lock { position: relative; }

@media (max-width: 560px) {
  .ci-exp, .ci-roll, .ci-offer, .ci-hint { padding-left: 16px; padding-right: 16px; }
  .ci-prog, .ci-roll-r { grid-template-columns: minmax(0, 1fr) auto; padding-left: 0; padding-right: 0; }
  .ci-prog-go { display: none; }
  .ci-roll-r .ci-prog-go { display: none; }
}

/* ── Composition review fixes (2026-08-27) ──────────────────────────────────────────
   #1 the headline was the biggest moment on a panel whose useful moment is lower down;
   #4 the reveal read as a new section rather than as the row's own content;
   #5 the dollar column formed a rail the eye kept jumping to, over status and fit;
   #6 locked rows read as loading skeletons instead of withheld evidence;
   #7 the mobile programme title line ran title + status + plan + amount in one band. */
.ci-h { font-size: 17.5px; }
.ci-head { padding-bottom: 12px; }
/* #4: bind the reveal to the row it belongs to */
.ci-exp { border-left: 3px solid rgba(27,67,50,.22); padding-left: 21px; }
/* #5: let status and fit lead; money stays legible but stops shouting */
.ci-prog-a { font-size: 12.5px; color: #57534E; font-weight: 500; }
/* #6: withheld, not unresolved */
.ci-row--locked { position: relative; }
.ci-lock-tag { position: absolute; top: 50%; right: 24px; transform: translateY(-50%); font-size: 9px; font-weight: 800; letter-spacing: .08em; color: #A8A29E; text-transform: uppercase; }
.ci-row--locked .ci-bar { background: #EFEAE1; }
@media (max-width: 560px) {
  /* #7: chips get their own line so the title can be read straight down */
  .ci-prog { grid-template-columns: minmax(0, 1fr) auto; }
  .ci-prog-t { display: block; }
  .ci-prog-t .ci-pchip { margin-left: 0; margin-right: 5px; margin-top: 4px; }
  .ci-lock-tag { right: 16px; }
  /* #8: the offer is the next step in the story, not a takeover */
  .ci-offer { padding: 14px 16px 16px; }
  .ci-offer-h { font-size: 15px; }
  .ci-offer-l { line-height: 1.55; }
}