/* ============================================================
   Page blocks. Loaded by BOTH apps — the composer and the viewer
   render the same elements, so they must share the same rules or the
   preview stops being a preview.

   Everything prefixed .blk- is content. Everything prefixed .blk-shell,
   .blk-rail, .blk-insert or .blk-menu is editor chrome, which read mode
   simply never emits.
   ============================================================ */

/* ---------- text ---------- */

.blk-text {
  font-size: 0.98rem;
  line-height: 1.75;
  color: var(--ink-mid);
  margin: 0 0 18px;
}
.blk-text strong { color: var(--ink); font-weight: 600; }
.blk-text a { color: var(--blue); text-decoration: underline; text-underline-offset: 2px; }

.blk-heading {
  font-weight: 200;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: var(--ink);
  margin: 38px 0 16px;
}
.blk-heading:first-child { margin-top: 0; }
.blk-heading strong { font-weight: 800; }
.blk-h2 { font-size: 1.72rem; }
.blk-h3 { font-size: 1.22rem; font-weight: 300; }

/* ---------- callout ---------- */

.blk-callout {
  display: flex;
  gap: 14px;
  padding: 16px 18px;
  margin: 0 0 20px;
  border: 1px solid var(--rule);
  border-left-width: 2px;
  border-radius: var(--r);
  background: var(--bg-off);
  font-size: 0.92rem;
  line-height: 1.65;
  color: var(--ink-mid);
}
.blk-callout.tone-info { border-left-color: var(--blue); }
.blk-callout.tone-warn { border-left-color: #b3831a; background: #fdf8ec; border-color: #ecdcb4; }
.blk-callout.tone-good { border-left-color: #1a7a4a; background: #f1f9f4; border-color: #bfe0cd; }
.blk-callout-body { flex: 1; }
.blk-callout strong { color: var(--ink); font-weight: 600; }

/* ---------- divider ---------- */

.blk-divider {
  height: 1px;
  background: var(--rule);
  margin: 32px 0;
}

/* ---------- metrics ---------- */

.blk-kpi {
  display: grid;
  border: 1px solid var(--rule);
  margin: 0 0 24px;
  background: #fff;
}
.blk-kpi.cols-1 { grid-template-columns: 1fr; }
.blk-kpi.cols-2 { grid-template-columns: repeat(2, 1fr); }
.blk-kpi.cols-3 { grid-template-columns: repeat(3, 1fr); }
.blk-kpi.cols-4 { grid-template-columns: repeat(4, 1fr); }

.blk-kpi-item {
  padding: 20px 22px;
  border-right: 1px solid var(--rule);
}
.blk-kpi-item:last-child { border-right: none; }

.blk-kpi-label {
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 9px;
}
.blk-kpi-value {
  font-size: 1.6rem;
  font-weight: 200;
  letter-spacing: -0.02em;
  color: var(--ink);
  line-height: 1.1;
}
.blk-kpi-delta {
  font-family: var(--mono);
  font-size: 0.66rem;
  margin-top: 6px;
  color: var(--ink-faint);
}
.blk-kpi-delta.is-up { color: #1a7a4a; }
.blk-kpi-delta.is-down { color: #9b1c1c; }

/* ---------- file grid ---------- */

.blk-filegrid {
  display: grid;
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
  margin: 0 0 24px;
}
.blk-filegrid.cols-1 { grid-template-columns: 1fr; }
.blk-filegrid.cols-2 { grid-template-columns: repeat(2, 1fr); }
.blk-filegrid.cols-3 { grid-template-columns: repeat(3, 1fr); }

.blk-file {
  display: flex;
  align-items: flex-start;
  gap: 13px;
  padding: 16px 17px;
  background: #fff;
  text-decoration: none;
  color: inherit;
  transition: background 0.16s var(--ease);
  min-width: 0;
}
a.blk-file:hover { background: var(--bg-off); }
.blk-file.is-missing { color: var(--ink-faint); font-size: 0.84rem; display: block; }

.blk-file-icon { color: var(--blue); flex-shrink: 0; margin-top: 1px; }
.blk-file-meta { min-width: 0; flex: 1; }
.blk-file-title {
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--ink);
  line-height: 1.35;
  overflow-wrap: anywhere;
}
.blk-file-sub {
  font-family: var(--mono);
  font-size: 0.70rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-top: 5px;
}

/* ---------- media ---------- */

.blk-image { margin: 0 0 24px; }
.blk-image.w-inset { max-width: 460px; }
.blk-image.w-full { margin-left: calc(-1 * var(--dr-page-pad, 48px)); margin-right: calc(-1 * var(--dr-page-pad, 48px)); }
.blk-image-el { display: block; width: 100%; border: 1px solid var(--rule); }

.blk-video { margin: 0 0 24px; }
.blk-video-el {
  display: block;
  width: 100%;
  background: #000;
  border: 1px solid var(--rule);
  aspect-ratio: 16 / 9;
}
.blk-video-ph {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  aspect-ratio: 16 / 9;
  background: var(--bg-dark);
  background-image: var(--dots-dark);
  background-size: var(--dots-size);
  color: rgba(255,255,255,0.7);
  font-size: 0.85rem;
  border: 1px solid var(--rule);
}

.blk-caption {
  font-family: var(--mono);
  font-size: 0.6rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-top: 9px;
}

.blk-missing {
  padding: 22px;
  border: 1px dashed var(--rule);
  color: var(--ink-faint);
  font-size: 0.84rem;
  text-align: center;
  margin-bottom: 20px;
}

/* ---------- editor chrome ---------- */

.blk-shell { position: relative; }
.blk-shell:hover { background: rgba(25,118,178,0.025); }

.blk-shell [contenteditable]:focus { outline: none; }

/* The hint belongs where the cursor is. Showing it on every empty block
   turned a few blank lines into a column of identical grey sentences,
   which reads as broken rather than helpful.
   `.blk-hint` is set on the sole block of an empty page, so a fresh page
   still tells you what to do before you click into it. */
.blk-shell [contenteditable][data-placeholder]:empty:focus::before,
.blk-shell [contenteditable][data-placeholder].blk-hint:empty::before {
  content: attr(data-placeholder);
  color: var(--ink-faint);
  pointer-events: none;
}

.blk-rail {
  position: absolute;
  left: -38px;
  top: 2px;
  display: flex;
  flex-direction: column;
  gap: 1px;
  opacity: 0;
  transition: opacity 0.14s var(--ease);
}
.blk-shell:hover .blk-rail,
.blk-shell:focus-within .blk-rail { opacity: 1; }

.blk-rail button {
  width: 24px; height: 22px;
  display: grid; place-items: center;
  border: none; background: none;
  color: var(--ink-faint);
  cursor: pointer;
  border-radius: var(--r);
}
.blk-rail button:hover { background: var(--bg-off); color: var(--ink); }

/* Clickable run-off at the bottom of the page, so clicking under the
   last block puts the caret in a paragraph instead of doing nothing. */
.blk-tail { min-height: 140px; cursor: text; }

.blk-menu {
  position: absolute;
  z-index: 40;
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: var(--r);
  box-shadow: 0 12px 34px rgba(0,0,0,0.1);
  padding: 5px;
  min-width: 176px;
}
.blk-menu button {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 10px;
  border: none;
  background: none;
  font-family: var(--font);
  font-size: 0.84rem;
  color: var(--ink);
  cursor: pointer;
  text-align: left;
  border-radius: var(--r);
}
.blk-menu button:hover,
.blk-menu button.is-active { background: var(--bg-off); }
.blk-menu svg { color: var(--ink-faint); flex-shrink: 0; }

/* The "/" menu, anchored to the caret rather than to an element. */
.blk-slash {
  position: fixed;
  max-height: 232px;
  overflow-y: auto;
  min-width: 226px;
}
.blk-slash button { align-items: flex-start; gap: 11px; padding: 7px 10px; }
.blk-menu-text { min-width: 0; }
.blk-menu-label { font-size: 0.84rem; color: var(--ink); line-height: 1.3; }
.blk-menu-hint {
  font-family: var(--mono);
  font-size: 0.62rem;
  color: var(--ink-faint);
  margin-top: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Settings belong to the block you are working on. Leaving every panel
   open turned a page into a stack of grey forms with the content buried
   between them.

   The block and its panel are wrapped in one .blk-group and the hover is
   on that, not on the block alone. Sibling hover across the margin
   between them left dead space belonging to neither element, so the
   panel closed the moment you set off towards a control. `.is-open` is
   for blocks that are not configured yet, so a fresh image block does
   not hide its own "Choose image" button. */
.blk-form {
  display: none;
  border: 1px solid var(--rule);
  background: var(--bg-off);
  padding: 14px 16px;
  margin-top: 6px;
  margin-bottom: 24px;
  border-radius: var(--r);
}
.blk-form.is-open,
.blk-group:hover .blk-form,
.blk-group:focus-within .blk-form { display: block; }
.blk-form::before {
  content: 'Settings';
  display: block;
  font-family: var(--mono);
  font-size: 0.58rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 10px;
}
.blk-form-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; }
.blk-form .dr-field { margin-bottom: 0; flex: 1; min-width: 130px; }

@media (max-width: 860px) {
  .blk-kpi.cols-3, .blk-kpi.cols-4 { grid-template-columns: repeat(2, 1fr); }
  .blk-filegrid.cols-2, .blk-filegrid.cols-3 { grid-template-columns: 1fr; }
  .blk-h2 { font-size: 1.4rem; }
  .blk-rail { left: -32px; opacity: 1; }
}

/* ============================================================
   Fundraising tracker

   Lives in blocks.css rather than viewer.css because the admin does not
   load viewer.css, and the live preview in the raise editor renders
   through the same module as the investor homepage.

   Segment colours were checked with a palette validator, not chosen by
   eye: the brand's own --blue-d / --blue measure ΔE 5.3 apart, which is
   below the readable floor even with normal colour vision. These three
   are a sequential ramp — darkest is the most certain money — so the bar
   still reads correctly printed or in greyscale.
   ============================================================ */

.dr-raise {
  border: 1px solid var(--rule);
  background: #fff;
  padding: 26px 28px 24px;
  margin-bottom: 32px;
}

.dr-raise-eyebrow {
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--blue);
  margin-bottom: 10px;
}
.dr-raise-headline {
  font-size: 1.5rem;
  font-weight: 200;
  letter-spacing: -0.02em;
  color: var(--ink);
  line-height: 1.15;
}
.dr-raise-note {
  margin-top: 8px;
  font-size: 0.88rem;
  color: var(--ink-mid);
  max-width: 62ch;
  line-height: 1.55;
}

.dr-raise-figure { margin: 22px 0 12px; }
.dr-raise-amount {
  font-size: 2.6rem;
  font-weight: 200;
  letter-spacing: -0.035em;
  line-height: 1;
  color: var(--ink);
}
.dr-raise-of {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 9px;
  font-size: 0.9rem;
  color: var(--ink-mid);
}
.dr-raise-pct { font-family: var(--mono); font-size: 0.82rem; color: var(--blue); }
.dr-raise-over {
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #1a7a4a;
}

/* ---- the meter ---- */

.dr-raise-meter {
  display: flex;
  height: 14px;
  background: var(--bg-off);
  border: 1px solid var(--rule);
  overflow: hidden;
}
.dr-raise-meter.is-over { border-color: var(--blue); }
.dr-raise-seg { height: 100%; min-width: 2px; }
/* A surface-coloured gap so two adjacent segments never read as one. */
.dr-raise-seg + .dr-raise-seg { margin-left: 2px; }

.dr-raise-seg.is-raised    { background: var(--blue); }
.dr-raise-seg.is-closed    { background: #15508f; }
.dr-raise-seg.is-committed { background: #2a90cc; }
.dr-raise-seg.is-reserved  { background: #4fc4d8; }

/* ---- legend ---- */

.dr-raise-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  margin-top: 14px;
}
.dr-raise-key { display: flex; align-items: center; gap: 7px; }
.dr-raise-swatch {
  width: 9px; height: 9px;
  flex-shrink: 0;
  border-radius: 2px;
}
.dr-raise-swatch.is-closed    { background: #15508f; }
.dr-raise-swatch.is-committed { background: #2a90cc; }
.dr-raise-swatch.is-reserved  { background: #4fc4d8; }
.dr-raise-swatch.is-remaining { background: var(--bg-off); border: 1px solid var(--rule); }
.dr-raise-key-label {
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.dr-raise-key-value { font-size: 0.84rem; color: var(--ink); }

/* ---- tiles + instruments ---- */

.dr-raise-tiles { margin-top: 24px; }

.dr-raise-sublabel {
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 24px 0 10px;
}
.dr-raise-instruments { list-style: none; border-top: 1px solid var(--rule); }
.dr-raise-instrument {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  align-items: baseline;
  padding: 10px 0;
  border-bottom: 1px solid var(--rule);
}
.dr-raise-inst-name { font-size: 0.88rem; font-weight: 500; color: var(--ink); min-width: 140px; }
.dr-raise-inst-terms { font-size: 0.86rem; color: var(--ink-mid); flex: 1; }

@media (max-width: 860px) {
  .dr-raise { padding: 20px 18px; }
  .dr-raise-amount { font-size: 2rem; }
  .dr-raise-inst-name { min-width: 0; }
}

/* Staff-only breakdown inside the raise editor. */
.dr-raise-breakdown { margin-top: 18px; }