/* ===========================================================================
   Opportunities — listing, detail, review

   DIRECTION: an editorial index, not a card grid. The feed's job is to let
   someone scan twenty calls and find the one that is theirs, then read it
   properly. So: a dense index of rows, strong typographic hierarchy, and one
   urgent colour used for exactly one thing.

   Inherited from the Hub, deliberately — the transition into signup has to feel
   continuous, and a second font on a CGNAT mobile connection is a cost the
   member pays for nothing. No webfont is loaded here; the Hub's geometric sans
   carries it.

   THE DEADLINE IS THE ONLY EMBER ON THE PAGE. Nothing else may use it. The
   moment a second element is ember, the first stops meaning "hurry".

   RTL IS THE DEFAULT CASE, not an adaptation: every inset, margin and border
   below is a logical property, so an Arabic page mirrors without a single
   [dir] override.
   =========================================================================== */

#opp-listing, #opp-view, #opp-review {
  /* Hub palette */
  --sand:       #F2EBE8;
  --paper:      #FBF8F7;
  --navy:       #1B3E5A;
  --indigo:     #1A2F80;
  --sage:       #98C4B2;
  --sage-deep:  #2F7357;   /* interactive — the raw sage fails contrast on sand */
  --ember:      #B8432A;   /* URGENCY ONLY: deadlines, countdowns, closures */

  --ink:        var(--navy);
  --ink-soft:   color-mix(in oklch, var(--navy) 62%, var(--sand));
  --ink-faint:  color-mix(in oklch, var(--navy) 38%, var(--sand));
  --rule:       color-mix(in oklch, var(--navy) 12%, var(--sand));
  --rule-soft:  color-mix(in oklch, var(--navy) 7%,  var(--sand));

  /* Fluid rhythm — tight groupings, generous separations. */
  --gap-xs: .35rem;
  --gap-s:  .7rem;
  --gap-m:  clamp(1rem, .6rem + 1.4vw, 1.6rem);
  --gap-l:  clamp(1.8rem, 1rem + 3vw, 3.4rem);
  --gap-xl: clamp(3rem, 1.6rem + 5vw, 6rem);

  color: var(--ink);
  font-feature-settings: "tnum" 1;   /* prize figures and dates line up */
}

/* Scoped deliberately: a blanket `#opp-listing a` wins on specificity against
   every component rule below it, which is how the index headlines ended up
   accent-coloured instead of ink. */
#opp-listing .opp-prose a, #opp-view .opp-prose a,
#opp-listing .opp-empty a, #opp-view .opp-note a { color: var(--sage-deep); }

/* ---------------------------------------------------------------- masthead */
.opp-hero { padding: var(--gap-l) 0 var(--gap-m); max-width: 52ch; }
.opp-hero h1 {
  font-size: clamp(2.1rem, 1.2rem + 3.4vw, 3.6rem);
  line-height: .96;
  letter-spacing: -.03em;
  font-weight: 700;
  margin: 0 0 var(--gap-s);
}
.opp-hero-sub {
  color: var(--ink-soft);
  font-size: clamp(1rem, .95rem + .2vw, 1.12rem);
  line-height: 1.5;
  max-width: 46ch;
  margin: 0;
}

/* ---------------------------------------------------------------- filters
   A quiet horizontal rail. These are navigation, not decoration, so they get
   no fill until they are the current view. */
.opp-filters {
  display: flex; flex-wrap: wrap; gap: var(--gap-xs) .4rem;
  align-items: center;
  padding: var(--gap-m) 0;
  border-block-end: 1px solid var(--rule);
}
.opp-filter {
  display: inline-block; padding: .3rem .7rem;
  font-size: .875rem; line-height: 1.4;
  color: var(--ink-soft); text-decoration: none;
  border: 1px solid transparent; border-radius: 2px;
  transition: color .18s cubic-bezier(.22,1,.36,1), background-color .18s cubic-bezier(.22,1,.36,1);
}
.opp-filter:hover { color: var(--ink); background: var(--rule-soft); }
.opp-filter.is-on {
  color: var(--paper); background: var(--navy);
  font-weight: 600;
}
.opp-filter-sm { font-size: .8125rem; padding: .25rem .55rem; }
.opp-filter-sep { flex-basis: 100%; height: 0; margin-block-start: .3rem; }
.opp-count {
  display: inline-block; margin-inline-start: .3rem;
  font-size: .75rem; opacity: .65; font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------------- the grid
   Cards, at Saleem's request (2026-08-12) — the Latest Blogs treatment: picture
   on top, then kind, headline, brief. It reads faster when scanning for the one
   that is yours, which is what this page is for.

   They are NOT uniform boxes with a drop shadow: no shadow, a hairline rule,
   and the picture carries the weight. A programme country gets a sage rule
   along the top edge rather than a badge. */
.opp-index {
  display: grid; gap: var(--gap-m);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr));
  padding-block: var(--gap-m) var(--gap-xl);
}

.opp-row {
  display: flex; flex-direction: column;
  background: var(--paper);
  border: 1px solid var(--rule); border-radius: 4px;
  overflow: hidden; position: relative;
  transition: border-color .18s cubic-bezier(.22,1,.36,1);
}
.opp-row:hover { border-color: color-mix(in oklch, var(--sage-deep) 45%, var(--rule)); }
.opp-row-priority { border-block-start: 3px solid var(--sage-deep); }

.opp-row-media { margin: 0; }
.opp-row-media img, .opp-thumb-blank {
  display: block; inline-size: 100%; block-size: auto;
  aspect-ratio: 16 / 9; object-fit: cover;
  background: var(--sand);
}
.opp-thumb-blank {
  display: grid; place-items: center; text-align: center; padding: 1rem;
  background: var(--navy); color: var(--sage);
  font-size: .75rem; letter-spacing: .16em; text-transform: uppercase; font-weight: 600;
}

.opp-row-body { padding: var(--gap-m); display: flex; flex-direction: column; flex: 1; }

.opp-row-title {
  font-size: 1.1875rem; line-height: 1.22; letter-spacing: -.015em;
  font-weight: 600; margin: 0 0 var(--gap-xs); order: 2;
}
.opp-row-title a { color: var(--ink); text-decoration: none; }
.opp-row-title a:hover { color: var(--sage-deep); }

/* The kind sits above the headline, so the eyebrow is reordered rather than
   duplicated — one renderer, two arrangements. */
.opp-row-body .opp-teaser { display: contents; }
.opp-eyebrow {
  display: flex; flex-wrap: wrap; gap: .45rem; align-items: baseline;
  font-size: .8125rem; font-weight: 500; color: var(--ink-faint);
  margin: 0 0 var(--gap-xs); order: 1;
}
.opp-kind {
  color: var(--sage-deep); font-size: .6875rem; letter-spacing: .12em;
  text-transform: uppercase; font-weight: 700;
}
.opp-org { color: var(--ink-soft); max-inline-size: 26ch; overflow: hidden;
           text-overflow: ellipsis; white-space: nowrap; }

.opp-summary { margin: 0; line-height: 1.55; color: var(--ink-soft); order: 3;
               font-size: .9375rem; }
.opp-meta {
  display: flex; flex-wrap: wrap; gap: .25rem .7rem; order: 4;
  margin-block-start: var(--gap-s); padding-block-start: var(--gap-s);
  border-block-start: 1px solid var(--rule-soft);
  font-size: .75rem; color: var(--ink-faint);
}
.opp-meta-urgent { color: var(--ember); font-weight: 600; }
.opp-row-more { order: 5; margin: auto 0 0; padding-block-start: var(--gap-s);
                font-size: .875rem; font-weight: 600; }
.opp-row-more a { color: var(--sage-deep); text-decoration: none; }

/* ---------------------------------------------------------------- detail */
.opp-back {
  display: inline-block; margin: var(--gap-m) 0 0;
  font-size: .875rem; color: var(--ink-faint); text-decoration: none;
}
.opp-back:hover { color: var(--ink); }

.opp-head { padding: var(--gap-m) 0 var(--gap-l); }
.opp-title {
  font-size: clamp(2rem, 1.1rem + 3.6vw, 3.5rem);
  line-height: .98; letter-spacing: -.03em; font-weight: 700;
  margin: 0 0 var(--gap-s); max-width: 22ch;
}
.opp-lede {
  font-size: clamp(1.05rem, 1rem + .45vw, 1.3rem);
  line-height: 1.45; color: var(--ink-soft);
  max-width: 52ch; margin: 0;
}

.opp-figure { margin: 0 0 var(--gap-l); }
.opp-figure img {
  display: block; inline-size: 100%; block-size: auto;
  max-block-size: 30rem; object-fit: cover;
  border-radius: 3px; background: var(--sand);
}

/* Asymmetric: prose left, the things you act on in a rail that follows you. */
.opp-body-grid { display: grid; gap: var(--gap-l); align-items: start; }
@media (min-width: 60rem) {
  .opp-body-grid { grid-template-columns: minmax(0, 1fr) 20rem; gap: var(--gap-xl); }
  .opp-rail { position: sticky; inset-block-start: 5rem; }
}

.opp-prose { font-size: 1.0625rem; line-height: 1.7; max-width: 62ch; }
.opp-prose p { margin: 0 0 1.1em; }

.opp-h {
  font-size: 1.0625rem; letter-spacing: .04em; text-transform: uppercase;
  font-weight: 700; color: var(--ink);
  margin: var(--gap-l) 0 var(--gap-s);
  padding-block-end: var(--gap-xs); border-block-end: 1px solid var(--rule);
}
.opp-elig { margin: 0; padding: 0; list-style: none; max-width: 62ch; }
.opp-elig li {
  position: relative; padding-inline-start: 1.4rem; margin-block-end: .55rem;
  line-height: 1.55;
}
.opp-elig li::before {
  content: ""; position: absolute; inset-inline-start: 0; inset-block-start: .62em;
  inline-size: .5rem; block-size: 1px; background: var(--sage-deep);
}

/* ---- the rail: facts, then the one thing to do ---- */
.opp-facts { margin: 0 0 var(--gap-m); }
.opp-fact {
  padding-block: var(--gap-s);
  border-block-end: 1px solid var(--rule);
}
.opp-fact:first-child { border-block-start: 1px solid var(--rule); }
.opp-fact dt {
  font-size: .6875rem; letter-spacing: .12em; text-transform: uppercase;
  font-weight: 600; color: var(--ink-faint); margin-block-end: .2rem;
}
.opp-fact dd {
  margin: 0; font-size: 1.0625rem; line-height: 1.35; font-weight: 500;
}
/* Money is the type system: the figure is the largest thing in the rail. */
.opp-fact-money dd {
  font-size: clamp(1.3rem, 1.1rem + .7vw, 1.75rem);
  font-weight: 700; letter-spacing: -.02em; line-height: 1.15;
}
.opp-fact-when dd { color: var(--ember); font-weight: 600; }
.opp-countdown { display: block; font-size: .875rem; font-weight: 500; opacity: .85; }

/* ---------------------------------------------------------------- actions */
.opp-btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: .5rem; inline-size: auto;
  padding: .85rem 1.2rem;
  font-size: 1rem; font-weight: 600; font-family: inherit;
  color: var(--ink); background: transparent;
  border: 1.5px solid var(--navy); border-radius: 2px;
  text-decoration: none; cursor: pointer;
  transition: background-color .18s cubic-bezier(.22,1,.36,1),
              color .18s cubic-bezier(.22,1,.36,1);
}
.opp-btn:hover { background: var(--navy); color: var(--paper); }
.opp-btn-primary {
  background: var(--sage-deep); border-color: var(--sage-deep); color: var(--paper);
}
.opp-btn-primary:hover {
  background: color-mix(in oklch, var(--sage-deep) 84%, black); color: var(--paper);
}
.opp-btn-ghost { border-color: var(--rule); color: var(--ink-soft); }
.opp-btn-ghost:hover { background: var(--rule-soft); color: var(--ink); border-color: var(--ink-faint); }
/* Full width only where the button IS the column — the rail and the gate.
   Applying it globally stretched every control in the review queue across the
   whole screen, which is what happened when this file was rewritten. */
.opp-rail .opp-btn, .opp-gate .opp-btn, .opp-contact > summary { inline-size: 100%; }
.opp-rail .opp-btn + .opp-btn, .opp-gate .opp-btn + .opp-btn { margin-block-start: var(--gap-xs); }

.opp-note { font-size: .8125rem; color: var(--ink-faint); line-height: 1.5; margin: var(--gap-s) 0 0; }
.opp-source { font-size: .8125rem; color: var(--ink-faint); margin: var(--gap-m) 0 0; }
.opp-meta .opp-source { margin: 0; }
.opp-disclaimer { font-size: .8125rem; color: var(--ink-faint); line-height: 1.55; margin-block-start: var(--gap-m); }
.opp-funding-note { font-size: .75rem; color: var(--ink-faint); margin-block-start: .5rem; }
.opp-rule { border: 0; border-block-start: 1px solid var(--rule); margin: var(--gap-l) 0; }

/* ---------------------------------------------------------------- the gate
   Principle 4: a door opening, not a shutter closing. So it is a solid panel in
   the brand's own sand, not a dashed outline around an absence. */
.opp-gate {
  background: var(--sand); border-radius: 3px;
  padding: var(--gap-m); margin: 0 0 var(--gap-m);
  border-inline-start: 3px solid var(--sage-deep);
}
.opp-gate-h {
  font-size: 1.25rem; line-height: 1.2; font-weight: 700;
  letter-spacing: -.015em; margin: 0 0 var(--gap-s);
}
.opp-gate-list { margin: 0 0 var(--gap-m); padding: 0; list-style: none; }
.opp-gate-list li {
  position: relative; padding-inline-start: 1.3rem; margin-block-end: .4rem;
  font-size: .9375rem; color: var(--ink-soft); line-height: 1.45;
}
.opp-gate-list li::before {
  content: ""; position: absolute; inset-inline-start: 0; inset-block-start: .5em;
  inline-size: .45rem; block-size: .45rem; border-radius: 50%;
  background: var(--sage);
}
.opp-gate-note { font-size: .8125rem; color: var(--ink-faint); line-height: 1.5; margin: 0 0 var(--gap-m); }

/* ---------------------------------------------------------------- banners */
.opp-banner {
  padding: .85rem 1.1rem; border-radius: 2px; margin: var(--gap-m) 0;
  font-size: .9375rem; line-height: 1.5;
  border-inline-start: 3px solid var(--ink-faint); background: var(--rule-soft);
}
.opp-banner-closed { border-inline-start-color: var(--ember); background: color-mix(in oklch, var(--ember) 8%, var(--paper)); }
.opp-banner-ok     { border-inline-start-color: var(--sage-deep); background: color-mix(in oklch, var(--sage) 22%, var(--paper)); }
.opp-banner-bad    { border-inline-start-color: var(--ember); background: color-mix(in oklch, var(--ember) 8%, var(--paper)); }

/* ---------------------------------------------------------------- empty
   Teaches the interface rather than announcing an absence. */
.opp-empty { padding: var(--gap-xl) 0; max-width: 42ch; }
.opp-empty h2 {
  font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.1rem);
  line-height: 1.1; letter-spacing: -.02em; margin: 0 0 var(--gap-s);
}
.opp-empty p { color: var(--ink-soft); line-height: 1.6; margin: 0; }

/* ---------------------------------------------------------------- forms */
.opp-apply-form, .opp-contact form {
  background: var(--sand); border-radius: 3px;
  padding: var(--gap-m); margin: var(--gap-l) 0; max-width: 46rem;
}
.opp-apply-form label, .opp-contact label {
  display: block; margin-block-end: var(--gap-s);
  font-size: .8125rem; font-weight: 600; letter-spacing: .02em; color: var(--ink-soft);
}
.opp-apply-form input, .opp-apply-form textarea, .opp-apply-form select,
.opp-contact textarea {
  display: block; inline-size: 100%; margin-block-start: .35rem;
  padding: .65rem .8rem; font: inherit; font-size: 1rem; font-weight: 400;
  color: var(--ink); background: var(--paper);
  border: 1px solid var(--rule); border-radius: 2px;
}
.opp-apply-form input:focus, .opp-apply-form textarea:focus,
.opp-apply-form select:focus, .opp-contact textarea:focus {
  outline: 2px solid var(--sage-deep); outline-offset: 1px; border-color: transparent;
}
.opp-form-row { display: grid; gap: 0 var(--gap-m); }
@media (min-width: 34rem) { .opp-form-row { grid-template-columns: 1fr 1fr; } }
.opp-consent {
  display: flex; gap: .6rem; align-items: flex-start;
  font-weight: 400; font-size: .875rem; line-height: 1.5;
  color: var(--ink); margin: var(--gap-m) 0;
}
.opp-consent input { inline-size: auto; margin: .2rem 0 0; flex: 0 0 auto; }
.wz-opt { float: inline-end; font-weight: 400; font-size: .6875rem; color: var(--ink-faint); text-transform: none; letter-spacing: 0; }
.opp-contact { margin: var(--gap-l) 0; }
.opp-contact > summary { cursor: pointer; list-style: none; display: inline-block; inline-size: auto; }
.opp-contact > summary::-webkit-details-marker { display: none; }

@media (prefers-reduced-motion: reduce) {
  * { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}


/* ===========================================================================
   THE REVIEW QUEUE

   Restored after the redesign dropped it: rewriting this stylesheet replaced
   the whole file and took the queue's rules with it, leaving the reviewer with
   inline labels, floating inputs and screen-wide buttons.

   It is an internal tool, so it is denser and plainer than the public pages —
   but it is the screen someone works in for ten minutes at a time, so the two
   columns (edit | exactly what gets published) and the public/gated badges are
   the whole point of it.
   =========================================================================== */

#opp-review .opp-hero { max-width: 60ch; }
#opp-review .opp-hero h1 { font-size: clamp(1.8rem, 1.2rem + 2vw, 2.6rem); }

.opp-run-notes { margin-block-start: var(--gap-s); font-size: .9375rem; color: var(--ink-soft); max-width: 78ch; }
.opp-run-notes summary { cursor: pointer; color: var(--sage-deep); font-weight: 600; }
.opp-run-notes p { line-height: 1.6; margin-block-start: var(--gap-xs); }

.opp-review-item {
  border: 1px solid var(--rule); border-radius: 3px;
  padding: var(--gap-m); margin-block: var(--gap-m);
  background: var(--paper);
}
.opp-review-head h2 {
  font-size: clamp(1.15rem, 1rem + .7vw, 1.45rem); line-height: 1.2;
  letter-spacing: -.015em; margin: 0 0 var(--gap-xs);
}
.opp-review-meta {
  display: flex; flex-wrap: wrap; gap: .4rem .8rem; align-items: baseline;
  font-size: .8125rem; color: var(--ink-faint); margin-block-end: var(--gap-m);
}
.opp-chip {
  font-size: .75rem; padding: .15rem .5rem; border-radius: 2px;
  background: var(--rule-soft); color: var(--ink-soft);
}
.opp-chip-pri { background: color-mix(in oklch, var(--sage) 40%, var(--paper)); color: var(--sage-deep); font-weight: 600; }
.opp-chip-low { background: color-mix(in oklch, var(--ember) 12%, var(--paper)); color: var(--ember); font-weight: 600; }
.opp-src { color: var(--sage-deep); text-decoration: none; }
.opp-rejected {
  background: color-mix(in oklch, var(--ember) 8%, var(--paper));
  border-inline-start: 3px solid var(--ember);
  padding: .6rem .9rem; margin: 0 0 var(--gap-m); font-size: .875rem; line-height: 1.5;
}

.opp-review-cols { display: grid; gap: var(--gap-l); }
@media (min-width: 62rem) { .opp-review-cols { grid-template-columns: 1fr 1fr; } }

/* Forms: label above, control full width, one rhythm down the column. */
.opp-form label {
  display: block; margin-block-end: var(--gap-s);
  font-size: .75rem; font-weight: 600; letter-spacing: .04em;
  text-transform: uppercase; color: var(--ink-faint);
}
.opp-form input[type=text], .opp-form input[type=url],
.opp-form input[type=datetime-local], .opp-form textarea {
  display: block; inline-size: 100%; margin-block-start: .3rem;
  padding: .55rem .7rem; font: inherit; font-size: .9375rem; font-weight: 400;
  letter-spacing: normal; text-transform: none; color: var(--ink);
  background: var(--paper); border: 1px solid var(--rule); border-radius: 2px;
}
.opp-form textarea { line-height: 1.5; resize: vertical; }
.opp-form input:focus, .opp-form textarea:focus {
  outline: 2px solid var(--sage-deep); outline-offset: 1px; border-color: transparent;
}
.opp-form small {
  display: block; margin-block-start: .25rem; font-size: .75rem;
  font-weight: 400; letter-spacing: normal; text-transform: none; color: var(--ink-faint);
}

/* Which side of the gate a field falls on, said at the field. */
.opp-pub, .opp-gate-badge {
  float: inline-end; font-size: .625rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  padding: .1rem .4rem; border-radius: 2px;
}
.opp-pub { color: #7A5B12; background: color-mix(in oklch, #E8C25A 32%, var(--paper)); }
.opp-gate-badge { color: var(--sage-deep); background: color-mix(in oklch, var(--sage) 34%, var(--paper)); }

.opp-actions { padding-block-start: var(--gap-xs); }
.opp-form-inline {
  display: flex; gap: var(--gap-s); align-items: flex-end; flex-wrap: wrap;
  padding-block-start: var(--gap-m); margin-block-start: var(--gap-m);
  border-block-start: 1px solid var(--rule);
}
.opp-form-inline label { margin-block-end: 0; }
.opp-form-inline input[type=text] { flex: 1 1 16rem; }
.opp-btn-danger { border-color: color-mix(in oklch, var(--ember) 45%, var(--paper)); color: var(--ember); }
.opp-btn-danger:hover { background: var(--ember); border-color: var(--ember); color: var(--paper); }

/* The preview is the point: two panels, labelled by which audience sees them. */
.opp-preview-label {
  font-size: .6875rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; margin: 0 0 var(--gap-xs); color: #7A5B12;
}
.opp-preview-label-gated { color: var(--sage-deep); margin-block-start: var(--gap-m); }
.opp-preview-box {
  border: 1px solid color-mix(in oklch, #E8C25A 40%, var(--rule));
  border-radius: 3px; padding: var(--gap-m); background: var(--paper);
}
.opp-preview-box-gated { border-color: color-mix(in oklch, var(--sage) 55%, var(--rule)); }
.opp-preview-box .opp-teaser .opp-cta { display: none; }   /* not a live button in a preview */