/* ============================================================================
   NexDonor /assessment. Page layer for the funding diagnostic campaign page,
   English and Arabic. Requires tokens.css then site.css to be linked first.

   Only what /assessment adds sits here. The base layer (wrap, panel, btn,
   eyebrow, header, footer, faq, final, focus, responsive) comes from site.css
   and is never restated. No colour, radius, font or size literals: every
   value comes from a token.

   Directional CSS uses LOGICAL properties throughout. Arabic-only deltas
   live under [lang="ar"] at the end of each block.
   ============================================================================ */

/* ---------- reduced nav ----------
   The app menu (dashboard / diagnostic / documents / reports / settings) is
   auth gated, so a logged out visitor would get five dead ends. This page
   renders a brand mark, the language switch, sign in, and the one action. */
.signin{
  font-size:var(--text-sm); font-weight:600; color:var(--text-secondary);
  text-decoration:none; padding:4px 12px; border-radius:var(--radius-pill);
  white-space:nowrap;
  transition:color var(--duration-fast) var(--ease-out),
             background var(--duration-fast) var(--ease-out);
}
.signin:hover{ color:var(--action); background:var(--brand-wash); }

/* ---------- prose ----------
   .sec-head sets its trailing paragraph at --text-lg, which is a lede. The
   argument paragraphs on this page are longer than that treatment carries,
   so they sit outside it at body size and a prose measure. */
.body-copy{ color:var(--text-secondary); max-width:68ch; margin-top:16px; }

/* ---------- hero ---------- */
.hero .micro{ font-size:var(--text-sm); color:var(--text-muted); margin-top:16px; max-width:44ch; }
.hero-actions{ display:flex; flex-wrap:wrap; gap:12px; margin-top:24px; }

/* ---------- funding access network ----------
   The claim is doors open and closed, not a score, so open and closed are
   carried by the word, by a solid against a dashed edge, and by the border
   of the node. Never by colour alone. The dimension palette is deliberately
   not used here: those seven colours mean capacities, not mechanisms. */
.fan{ margin:0; }
.fan-board{ position:relative; display:grid; grid-template-columns:1fr; gap:12px; }

.fan-node{
  position:relative; z-index:1;
  background:var(--surface-raised);
  border:1px solid var(--border-subtle);
  border-radius:var(--radius-md);
  padding:12px 16px;
  box-shadow:var(--shadow-sm);
}
.fan-node .name{ display:block; font-size:var(--text-sm); font-weight:600; color:var(--text-primary); }
.fan-node .state{
  display:inline-flex; align-items:center; gap:8px; margin-top:4px;
  font-size:var(--text-xs); font-weight:600;
}
.fan-node .state::before{ content:""; width:8px; height:8px; flex:0 0 auto; display:inline-block; }
.fan-node .blocker{ display:block; font-size:var(--text-xs); color:var(--text-muted); margin-top:4px; }

.fan-node.is-open .state{ color:var(--success-ink); }
.fan-node.is-open .state::before{ background:var(--success); border-radius:var(--radius-pill); }

/* closed nodes drop the fill and the shadow as well as the solid border, so
   the state survives greyscale, low vision and a printed page */
.fan-node.is-closed{ border-style:dashed; background:transparent; box-shadow:none; }
.fan-node.is-closed .name{ color:var(--text-secondary); }
.fan-node.is-closed .state{ color:var(--text-muted); }
.fan-node.is-closed .state::before{ border:1px solid var(--text-muted); }

.fan-core{
  position:relative; z-index:1;
  background:var(--brand); color:var(--on-brand);
  border-radius:var(--radius-md); padding:16px; text-align:center;
  font-size:var(--text-sm); font-weight:600;
}
[lang="ar"] .fan-core,
[lang="ar"] .fan-node .name{ font-weight:700; }

.fan-lines{ display:none; }
.fan-caption{ font-size:var(--text-xs); color:var(--text-muted); margin-top:16px; max-width:46ch; }

/* The network becomes a real network only where there is room for one.
   Below this it is a stacked list, which carries the same information. */
@media (min-width:861px){
  .fan-board{
    grid-template-columns:repeat(3,minmax(0,1fr));
    grid-template-rows:repeat(3,auto);
    align-items:center;
    gap:16px 40px;
  }
  .fan-core{ grid-column:2; grid-row:2; }
  .fan-node.n1{ grid-column:1; grid-row:1; }
  .fan-node.n2{ grid-column:3; grid-row:1; }
  .fan-node.n3{ grid-column:1; grid-row:2; }
  .fan-node.n4{ grid-column:3; grid-row:2; }
  .fan-node.n5{ grid-column:1; grid-row:3; }
  .fan-node.n6{ grid-column:3; grid-row:3; }

  .fan-lines{
    display:block; position:absolute; inset:0;
    width:100%; height:100%; z-index:0;
  }
  .fan-lines .edge{ stroke:var(--border-default); stroke-width:1; }
  .fan-lines .edge.open{ stroke:var(--brand); stroke-width:1.5; }
  .fan-lines .edge.closed{ stroke-dasharray:3 3; }
  /* the SVG is stretched to the board, so mirror it with the page */
  [dir="rtl"] .fan-lines{ transform:scaleX(-1); }
}

/* ---------- numbered lists (outcomes, steps) ---------- */
.numbered{ list-style:none; margin:0; padding:0; counter-reset:item; }
.numbered > li{ counter-increment:item; }
.num{
  display:inline-flex; align-items:center; justify-content:center;
  width:24px; height:24px; flex:0 0 auto;
  border-radius:var(--radius-pill);
  background:var(--brand-wash); color:var(--brand);
  font-size:var(--text-xs); font-weight:700;
}
.num::before{ content:counter(item); }
/* ar.html sets its numerals in Arabic-Indic, so these follow. */
[lang="ar"] .num::before{ content:counter(item, arabic-indic); }

/* The map and the single move are the product; the scores are the mechanism.
   The first two cards carry the brand edge to say so without extra copy. */
.outcome.is-lead{ border-color:var(--brand-border); }
.outcome.is-lead .num{ background:var(--brand); color:var(--on-brand); }

/* ---------- steps ---------- */
.steps > li{
  display:flex; flex-direction:column; gap:8px;
  padding-top:16px; border-top:2px solid var(--brand-border);
}
.steps h3{ font-size:var(--text-lg); }
.steps p{ font-size:var(--text-sm); color:var(--text-secondary); }
.steps .step-label{
  display:flex; align-items:center; gap:8px;
  font-size:var(--text-xs); font-weight:700; color:var(--brand);
  letter-spacing:0.08em; text-transform:uppercase;
}
[lang="ar"] .steps .step-label{ text-transform:none; letter-spacing:0; }
/* Registration and operating jurisdiction are what make the engine work and
   no competitor models them, so the cross border case gets its own emphasis. */
.steps .example{
  font-size:var(--text-sm); color:var(--text-secondary);
  padding-inline-start:16px; border-inline-start:2px solid var(--sage);
}

/* ---------- the seven capacities ---------- */
.dims{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.dim{
  display:flex; align-items:center; gap:12px;
  background:var(--surface-raised); border:1px solid var(--border-faint);
  border-radius:var(--radius-md); padding:12px 16px;
  font-size:var(--text-sm); font-weight:500;
}
[lang="ar"] .dim{ font-weight:600; }
/* The swatch is a second signal beside the name, never the only one. */
.dim .swatch{ width:8px; align-self:stretch; border-radius:var(--radius-pill); flex:0 0 auto; }
.dim-governance .swatch{ background:var(--dim-governance); }
.dim-strategy   .swatch{ background:var(--dim-strategy); }
.dim-programs   .swatch{ background:var(--dim-programs); }
.dim-financial  .swatch{ background:var(--dim-financial); }
.dim-people     .swatch{ background:var(--dim-people); }
.dim-monitoring .swatch{ background:var(--dim-monitoring); }
.dim-external   .swatch{ background:var(--dim-external); }
.dims .dim-external{ grid-column:1 / -1; }


/* ---------- provenance and limits ---------- */
.coverage{ font-size:var(--text-sm); color:var(--text-muted); margin-top:24px; max-width:62ch; }
.limits{
  margin-top:32px; padding:24px; max-width:70ch;
  border-inline-start:3px solid var(--border-default);
}
.limits h3{ font-size:var(--text-lg); }
.limits p{ color:var(--text-secondary); margin-top:12px; }

.textlink{
  color:var(--brand); font-weight:600; text-decoration:underline;
  text-underline-offset:3px; text-decoration-thickness:1px;
}
.textlink:hover{ color:var(--brand-deep); }

/* ---------- closing ----------
   Body text weight on purpose. This campaign targets NGOs, so the page makes
   no funder pitch: no second CTA, no button treatment. The line exists only
   so a funder who lands here has somewhere to go instead of bouncing. */
.funder-line{ font-size:var(--text-sm); color:var(--text-muted); margin-top:24px; }

/* ---------- responsive ---------- */
@media (max-width:860px){
  .dims{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:480px){
  .dims{ grid-template-columns:1fr; }
  .hero-actions .btn{ width:100%; justify-content:center; }
  .limits{ padding:16px; }
}