/* ==========================================================================
   Awqaf RFP007-2026 deck — page types not covered by the base quotation
   builder (js/render.js). Reuses css/deck.css tokens, cards, stat-band,
   chip, lifecycle-track, cert-grid, fin-table wherever the shape matches;
   this file only adds genuinely new components.
   ========================================================================== */

/* ---------------------------------------------------------- co-branding */
/* Variant A (interior) / 1 (cover), approved 2026-08-03: Qanoniah lockup +
   1px hairline + Awqaf lockup, paired at the head's leading (right) edge. */

.brandpair {
  display: flex;
  align-items: center;
  gap: 14px;
  flex: none;
}

.brandpair .logo {
  height: 34px;
  width: auto;
  object-fit: contain;
  flex: none;
}

.brandpair-divider {
  width: 1px;
  height: 30px;
  background: rgba(10, 28, 109, 0.18);
  flex: none;
}

.page--cover .brandpair-divider {
  background: rgba(255, 255, 255, 0.3);
}

.brandpair-client {
  height: 34px;
  width: auto;
  object-fit: contain;
  flex: none;
}

/* ------------------------------------------------------------- .todo flag */
/* Visible placeholder for anything unresolved (spec section 5). Hidden on
   the client-facing export via body.final. Nothing is ever invented to
   avoid one of these. */

.todo {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--color-amber-100);
  border: 1px solid var(--color-amber-300);
  color: var(--color-amber-800);
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.5;
}

body.final .todo {
  display: none;
}

/* -------------------------------------------------------------- kicker */

.kicker {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--color-logo-blue-500);
  margin: 0 0 6px;
}

/* --------------------------------------------------------- exec summary */

.exec-copy {
  margin-top: 26px;
  font-size: 19px;
  line-height: 2.2;
  color: var(--color-text-primary);
  text-align: justify;
}

.exec-copy b {
  color: var(--color-brand-500);
  font-weight: 600;
}

.exec-copy h3 {
  margin: 34px 0 12px;
  font-size: 19px;
  font-weight: 700;
  color: var(--color-brand-500);
}

.exec-copy .co {
  font-size: 17px;
  line-height: 2.15;
  font-weight: 400;
  color: var(--color-slate-600);
}

/* ------------------------------------------------------------- unit grid */

.pill-badge {
  /* inline-block, not inline-flex: flex layout strips the whitespace between
     a <span class="num-lat"> and the Arabic word after it. */
  display: inline-block;
  padding: 6px 14px;
  line-height: 1.55;
  border-radius: 999px;
  background: var(--color-brand-25);
  border: 1px solid rgba(10, 28, 109, 0.1);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--color-brand-500);
  margin-top: 10px;
}

.unit-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.unit-card {
  display: flex;
  gap: 11px;
  padding: 12px 14px;
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border-secondary);
  border-radius: 12px;
}

.unit-num {
  flex: none;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--color-brand-500);
  color: #fff;
  font-size: 11.5px;
  font-weight: 700;
  display: grid;
  place-items: center;
  margin-top: 1px;
  direction: ltr;
}

.unit-title {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--color-brand-500);
  line-height: 1.4;
}

.unit-desc {
  font-size: 10.8px;
  font-weight: 400;
  color: var(--color-slate-600);
  line-height: 1.55;
  margin-top: 3px;
}

/* -------------------------------------------------------- card bullet list */
/* deck.css only styles .card p/.body-sm; several RFP cards (security model,
   integration controls) carry a short bullet list instead. */

.card ul {
  margin: 0;
  padding-inline-start: 17px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.card li {
  font-size: 12px;
  font-weight: 400;
  color: var(--color-slate-600);
  line-height: 1.55;
}

.card li b {
  font-weight: 600;
  color: var(--color-brand-500);
}

/* ---------------------------------------------------------------- note */

.note-band {
  padding: 13px 20px;
  background: var(--color-brand-25);
  border: 1px solid rgba(10, 28, 109, 0.08);
  border-radius: 14px;
  font-size: 12.5px;
  color: var(--color-brand-500);
  line-height: 1.65;
}

/* ------------------------------------------------------------ data table */

.dtable {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  border-radius: var(--radius-card);
  overflow: hidden;
  border: 1px solid var(--color-border-secondary);
  box-shadow: var(--shadow-card);
  background: #fff;
}

.dtable thead th {
  background: var(--color-brand-500);
  color: #fff;
  font-size: 11.5px;
  font-weight: 600;
  padding: 8px 14px;
  text-align: start;
  letter-spacing: -0.01em;
}

.dtable tbody td {
  padding: 7px 14px;
  font-size: 11.3px;
  color: var(--color-text-primary);
  border-top: 1px solid var(--color-gray-100);
  vertical-align: top;
  line-height: 1.55;
}

.dtable tbody tr:nth-child(even) td {
  background: var(--color-bg-secondary);
}

.dtable td.dn {
  width: 3%;
  color: var(--color-logo-blue-500);
  font-weight: 700;
  direction: ltr;
}

.dtable td.dt {
  font-weight: 600;
  color: var(--color-brand-500);
}

.dtable td.dm {
  color: #374151;
  white-space: nowrap;
}

/* Severity pill (support/SLA table) */
.sev {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 3px 12px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}

.sev--critical { background: #fdeced; color: #9b2c2c; }
.sev--high { background: #fdf3e2; color: #8a5a12; }
.sev--medium { background: #eaf0fb; color: #1f50ab; }
.sev--low { background: #f1f2f5; color: #4b5563; }

/* --------------------------------------------------------- cover meta sub */

.cover-meta .sub {
  display: block;
  direction: ltr;
  unicode-bidi: isolate;
  text-align: right;
  font-size: 12px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.55);
  margin-top: 3px;
}

/* -------------------------------------------------------- typographic badge */
/* Certificate logos we don't have an image file for yet (NCA, PCI DSS):
   a text lockup instead of substituting a foreign icon set. */

.cert-badge .badge-type {
  font-size: 20px;
  font-weight: 800;
  color: var(--color-brand-500);
  letter-spacing: -0.01em;
  direction: ltr;
  text-align: center;
}


/* ---- breathing room between a page title and the line beneath it ---- */
.h-page + .lede,
.h-page + .sub,
.h-page + .pill-badge,
.h-page + .note-band { margin-top: 18px !important; }
.pill-badge + .dtable,
.pill-badge + .fin-table,
.lede + .dtable,
.lede + .fin-table { margin-top: 20px; }
.h-card + p,
.h-card + ul { margin-top: 8px; }

/* cover meta is 3 cells now that the offer number is gone */
.page--cover .cover-meta { grid-template-columns: repeat(3, 1fr); }

/* dense variants for the two longest pages, so nothing meets the footer */
.dtable--dense tbody td { padding: 4px 14px; line-height: 1.42; }
.dtable--dense thead th { padding-top: 8px; padding-bottom: 8px; }
.page--dense .note-band { padding: 10px 18px; font-size: 12px; line-height: 1.55; }
.page--dense .fin-table td,
.page--dense .fin-table th { padding-top: 9px; padding-bottom: 9px; }

/* ---- review round 2 ---- */

/* #1 the three cover meta cells sit together instead of spanning the page */
.page--cover .cover-meta {
  grid-template-columns: repeat(3, max-content);
  gap: 64px;
  justify-content: start;
}

/* #4 #5 coverage tick: every required unit and service is delivered */
.tick {
  /* iconsax:tick-circle geometry, disc filled with the design system's
     success green. The kit ships Linear only, so the filled treatment is
     built from the same glyph rather than borrowing another icon set. */
  display: inline-flex;
  width: 17px; height: 17px;
  flex: none;
  color: var(--color-success-600);
  margin-inline-start: 6px;
  vertical-align: -3px;
}
.tick svg { width: 100%; height: 100%; display: block; }
.unit-title .tick { margin-inline-start: 7px; }

/* #8 client logos read larger */
/* #3 six columns instead of nine: the logos are width-constrained, so
   wider cells are what actually makes them read bigger. */
.logo-grid { grid-template-columns: repeat(6, 1fr) !important; gap: 11px; margin-top: 14px; }
.logo-cell { height: 66px; padding: 8px 14px; }

/* #13 timeline table given more presence */
.page--timeline .dtable tbody td { padding: 13px 16px; font-size: 12.6px; }
.page--timeline .dtable thead th { padding-top: 12px; padding-bottom: 12px; font-size: 12.4px; }

/* #6 API-readiness disclaimer sits under the page title */
.disclaimer {
  margin-top: 12px;
  padding: 11px 18px;
  border-radius: 12px;
  background: var(--color-brand-25);
  border: 1px solid rgba(10, 28, 109, 0.1);
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--color-brand-500);
}

/* #17 balancing pill for the trial-period band */
.cta-pill {
  flex: none;
  padding: 9px 18px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.24);
  color: #fff;
  font-size: 12.5px;
  font-weight: 600;
  white-space: nowrap;
}

/* #18 closing page reads calmer than the cover */
.page--closing .cover-client { font-size: 40px; line-height: 1.3; }
.page--closing .cover-meta { grid-template-columns: repeat(3, max-content); gap: 64px; justify-content: start; }

/* slide 15 is the densest page: let the trial band breathe without clipping */
.page--dense .cta-band { padding: 13px 24px; align-items: center; margin-top: 10px !important; margin-bottom: 0 !important; }
.page--dense .cta-band .t { font-size: 16px; margin-bottom: 4px; }
.page--dense .cta-band .s { font-size: 12.5px; line-height: 1.55; max-width: 78ch; }
.page--dense .doc-grid { gap: 6px; }
.page--dense .doc-item { padding: 7px 12px; }
.page--dense .lede { font-size: 14.5px; line-height: 1.7; }
.page--dense .h-card { margin-top: 14px; }

/* the band is a flex child of .page-body; without this it gets squeezed and
   clips its own text instead of keeping its natural height */
.cta-band { flex: none; }

/* #2 every page title sits the same distance below the logo lockup */
.page-body > .h-page:first-child { margin-top: 34px; }

/* same flex-shrink trap as .cta-band: keep the stat band at natural height */
.stat-band { flex: none; }

/* ---- download control (screen only) ---- */
.pdf-dl {
  position: fixed;
  inset-block-end: 24px;
  inset-inline-start: 24px;
  z-index: 60;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 13px 20px;
  border-radius: 999px;
  background: var(--color-brand-500);
  color: #fff;
  font-family: "Ping AR + LT", system-ui, sans-serif;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  box-shadow: 0 10px 30px rgba(10, 28, 109, 0.28);
  transition: transform .16s ease, box-shadow .16s ease;
}
.pdf-dl:hover { transform: translateY(-2px); box-shadow: 0 14px 38px rgba(10, 28, 109, 0.34); }
.pdf-dl svg { width: 19px; height: 19px; flex: none; }
@media print { .pdf-dl { display: none !important; } }