/* ─────────────────────────────────────────────────────────────────────
   Operforma — v4 "Blueprint Vivo" shared primitives
   Amendment: research/brand/_drafts/brand_v4_amendment.md

   Why this file exists. Until v4, the five marketing surfaces shared nothing but
   tokens.css: the landing had .mk-* in marketing.css, como-funciona and biblioteca each
   carried their own page-local <style>, and panorama's CSS lived inside a Python string.
   Each one re-implemented an eyebrow, a CTA and a corner radius. The design handoff made
   this visible — it painted the same three primitives 73 times, once per element, in a
   `style-hover=` attribute.

   So the primitives live here, once, and every surface links this before its own sheet.
   Layering: tokens.css (values) -> brand.css (primitives) -> marketing.css / page <style>
   / PANO_CSS (composition). Composition may override; it may not redefine.

   Everything is token-driven. There are no hex literals below this line.
   ───────────────────────────────────────────────────────────────────── */

/* ══ SURFACES ═════════════════════════════════════════════════════════
   The two-surface rule (§10), plus v4's deeper statement ground. */

.op-band--ink   { background: var(--ink-deep); color: var(--white); }
.op-band--paper { background: var(--paper-deep); color: var(--fg-1); }

/* ── The seam ──
   The moment the visitor crosses from the statement register into the reading register.
   Depth by flat tonal steps, not a gradient — the "no gradients" rule (§9) survives v4
   intact. Three full-width bands, ink ascending toward paper. Decorative: aria-hidden. */
.op-seam > * { display: block; width: 100%; }
.op-seam > :nth-child(1) { height: 40px; background: var(--ink); }
.op-seam > :nth-child(2) { height: 32px; background: var(--surface); }
.op-seam > :nth-child(3) { height: 26px; background: var(--line-dark); }

/* ══ THE EYEBROW — the measurement register ═══════════════════════════
   v4 moves eyebrows from Satoshi sentence-case into mono. This tightens the two-register
   discipline (§8) rather than loosening it: an eyebrow is a coordinate, not prose, and it
   had been set in the humanist face. The 26px tick is the drafting mark. */

.op-eyebrow-v4 {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: clamp(22px, 3vw, 30px);
}
.op-eyebrow-v4::before {
  content: '';
  display: block;
  flex: 0 0 26px;
  height: 1px;
  background: var(--indigo-lt);
}
.op-eyebrow-v4 > span,
.op-eyebrow-v4 > * {
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--indigo-soft);
}
/* On paper the accent is the ink-blue at full strength; Iris is a dark-surface tone. */
.op-band--paper .op-eyebrow-v4::before,
.op-on-paper .op-eyebrow-v4::before { background: var(--accent); }
.op-band--paper .op-eyebrow-v4 > *,
.op-on-paper .op-eyebrow-v4 > * { color: var(--accent); }

/* ══ THE CTA — flat ═══════════════════════════════════════════════════
   v3's CTA lifted 1px and threw a 30px indigo shadow on hover. That is decoration: it
   does nothing for the reader's understanding or action, which makes it the clearest
   Tenet-1 failure in the v3 system. v4's hover is a colour inversion and nothing else.
   No transform. No shadow. */

.op-cta {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: var(--accent);
  color: var(--white);
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  padding: 18px 32px;
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background .2s, border-color .2s, color .2s;
}
.op-cta:hover,
.op-cta:focus-visible {
  background: var(--indigo-soft);
  border-color: var(--indigo-soft);
  color: var(--ink);
}

/* Secondary — the "Entrar" nav button. Outline, not fill. */
.op-btn-ghost {
  display: inline-flex;
  align-items: center;
  color: var(--white);
  border: 1px solid var(--grey-soft);
  border-radius: var(--radius);
  padding: 8px 18px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  transition: border-color .2s, background .2s, color .2s;
}
.op-btn-ghost:hover,
.op-btn-ghost:focus-visible { border-color: var(--grey-mid); background: var(--surface); }

/* Tertiary — an underlined text link that continues the sentence. */
.op-link {
  font-size: 15px;
  color: var(--grey);
  text-decoration: none;
  border-bottom: 1px solid var(--line-dark);
  padding-bottom: 3px;
  transition: color .2s, border-color .2s;
}
.op-link:hover,
.op-link:focus-visible { color: var(--white); border-bottom-color: var(--grey-soft); }

.op-band--paper .op-link,
.op-on-paper .op-link { color: var(--fg-2); border-bottom-color: var(--line); }
.op-band--paper .op-link:hover,
.op-on-paper .op-link:hover { color: var(--ink); border-bottom-color: var(--accent); }

/* ══ THE ANNOTATION REGISTER ══════════════════════════════════════════
   Amendment D2. Provenance, `fonte:` lines, as_of stamps, captions, confidence ticks.
   A second contrast tier (>= 4.5:1), NOT a licence for quiet body copy: this must never
   carry a sentence the reader needs in order to understand the page. */

.op-annot {
  font-family: var(--font-mono);
  font-size: 11.5px;
  line-height: 1.6;
  letter-spacing: 0.04em;
  color: var(--fg-annot);
}
.op-band--ink .op-annot,
.op-on-ink .op-annot { color: var(--on-ink-mut); }

/* ══ EDGES ════════════════════════════════════════════════════════════
   "Editorial, not rounded." --radius is 2px in v4. Round dots stay round: an avatar or
   a status dot is a circle by meaning, not by styling fashion. */

.op-card,
.op-chip { border-radius: var(--radius); }
.op-dot { border-radius: 50%; }

/* ══ MOBILE — the §7 fixes ════════════════════════════════════════════
   Three real bugs from the handoff, all of which bite below ~560px. They live here
   because the selector header is shared by o-que-voce-recebe, Biblioteca and Panorama;
   fixing it once is the entire point of this file. */

@media (max-width: 560px) {
  /* The RAD document grid's column floor is minmax(clamp(260px,46%,520px),1fr) — wider
     than a 320px viewport, so it was being clipped by overflow-x:hidden. */
  [data-opf-radgrid] { grid-template-columns: 1fr !important; }

  /* The selector header is `label · divider · hint`, all nowrap, ~400px — it overflowed
     every phone. Wrap it, drop the divider, let the hint take its own line. */
  [data-opf-selhead] { flex-wrap: wrap !important; }
  [data-opf-selhead] [data-opf-seldiv] { display: none !important; }
  [data-opf-selhead] [data-opf-selhint] {
    flex: 1 0 100% !important;
    white-space: normal !important;
  }

  /* "Hoje -> Projetado": when the two cards wrap, the connector arrow kept pointing
     sideways into nothing. Stack them and turn the arrow to face the way it now reads. */
  [data-opf-proj] {
    flex-direction: column !important;
    align-items: stretch !important;
  }
  [data-opf-proj] [data-opf-projarrow] { transform: rotate(90deg); }
}