/* ============================================================================
   NAVIK ANALYTICS — CORE COMPONENTS
   ----------------------------------------------------------------------------
   Only the primitives every section needs: layout containers, the section
   label, actions, and the card shell. Section-specific components live in their
   own files.

   Every rule here reads from the SEMANTIC token layer only, which is what lets
   any of these drop inside .surface-inverse and re-colour correctly with no
   variant class.
   ============================================================================ */

/* --- Layout --------------------------------------------------------------- */

.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.container-narrow {
  width: 100%;
  max-width: var(--container-narrow);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section {
  padding-block: var(--section-y);
}

.section-tight {
  padding-block: calc(var(--section-y) * 0.6);
}

/* A hairline divider between sections. Line, not shadow, does the separating. */
.section-divided {
  border-top: 1px solid var(--border-subtle);
}

/* --- Headings -------------------------------------------------------------
   Every H2 on the site is built as two rows: a <span> that states and an <em>
   that turns. The rows take the two stops of the wordmark gradient — teal above
   navy — so the heading carries the mark without the mark being drawn.

   Selectors are DIRECT-CHILD only. The old rule matched any descendant span or
   em inside an h2, which meant an inline mark inside a heading (a mono index, a
   redaction, an <em> used for genuine emphasis mid-sentence) was silently
   turned into a full-width coloured block. Colours now come from tokens rather
   than from hard-coded hex, so the heading device can be changed in one place.

   !important removed: nothing overrides these, and the only rule that could
   (a component setting `color` on the h2 itself) loses on specificity anyway.

   `white-space: nowrap` above 768px removed. The two rows are already separate
   blocks, so they break where the author intended with or without it; all it
   added was a guarantee that any heading longer than its container would push
   the page into horizontal scroll instead of wrapping. Two of the four homepage
   headings were within ~30px of that at tablet width. */

/* NO GLOBAL text-align HERE — removed 2026-08-09.
   A blanket `h2 { text-align: center }` used to live at this spot. It made the
   centred sections work by accident and broke every editorial one: on About,
   FIVE sections had a left-aligned eyebrow and left-aligned body wrapped around
   a heading that was centred by a rule two files away, and Services had a
   sixth. Alignment is a decision each section makes, so headings now inherit it
   from their own wrapper like every other element does, and the sections that
   want centring say so themselves. */

h2 > span,
h2 .h2-row1 {
  display: block;
  color: var(--heading-row-1);
}

h2 > em,
h2 .h2-row2 {
  display: block;
  color: var(--heading-row-2);
  font-style: italic;
}

/* --- Eyebrow --------------------------------------------------------------
   The small letterspaced label above a heading. For an unfamiliar brand this
   does disproportionate work: it categorises the section before the heading is
   read. The emerald rule anchors it optically to the text baseline. */

.eyebrow {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-family: var(--font-body);
  font-size: var(--text-eyebrow);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--text-secondary);
}

.eyebrow::before {
  content: "";
  inline-size: 24px;
  block-size: 1px;
  flex: none;
  background-color: var(--text-accent);
}

/* Centred variant grows a rule on both sides. */
.eyebrow-center {
  justify-content: center;
}

.eyebrow-center::after {
  content: "";
  inline-size: 24px;
  block-size: 1px;
  flex: none;
  background-color: var(--text-accent);
}

/* --- Buttons --------------------------------------------------------------
   Height is set by padding rather than a fixed value so the control grows with
   the user's font size. */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-5);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  line-height: 1.4;
  letter-spacing: var(--tracking-normal);
  text-decoration: none;
  white-space: nowrap;
  border: 1px solid transparent;
  /* Tighter than the old 8px. Against a serif the softer radius read
     consumer-app; 4px reads as a control on an instrument. */
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease-out),
    border-color var(--duration-fast) var(--ease-out),
    color var(--duration-fast) var(--ease-out);
}

/* Reads from the token, so this button and the one in the header cannot drift
   apart again, and so the button re-colours correctly inside .surface-inverse. */
.btn-primary {
  background-color: var(--action-primary);
  color: var(--action-primary-text);
  border-color: var(--action-primary);
}

/* Darkens rather than fading. `opacity` on hover dropped: it lifted the label
   off full white and pulled the button toward the paper behind it, which reads
   as a disabled state rather than an active one. */
.btn-primary:hover {
  background-color: var(--action-primary-hover);
  border-color: var(--action-primary-hover);
  color: var(--action-primary-text);
}

.btn-secondary {
  background-color: transparent;
  color: var(--action-secondary-text);
  border-color: var(--action-secondary-border);
}

.btn-secondary:hover {
  background-color: var(--action-secondary-hover-bg);
  color: var(--action-secondary-text);
}

.btn-lg {
  padding: var(--space-4) var(--space-6);
  font-size: var(--text-body);
}

/* --- Arrow link -----------------------------------------------------------
   The low-commitment secondary action. The arrow advances a few pixels on
   hover — the smallest possible motion that still signals "this goes
   somewhere". */

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
  text-decoration: none;
}

.link-arrow::after {
  content: "";
  inline-size: 1em;
  block-size: 1em;
  flex: none;
  background-color: currentColor;
  /* Inline arrow glyph as a mask, so it inherits currentColor in every context
     including .surface-inverse. */
  -webkit-mask: var(--icon-arrow-right) center / contain no-repeat;
  mask: var(--icon-arrow-right) center / contain no-repeat;
  transition: transform var(--duration-base) var(--ease-out);
}

.link-arrow:hover {
  color: var(--text-accent);
}

.link-arrow:hover::after {
  transform: translateX(3px);
}

:root {
  --icon-arrow-right: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E");
}

/* --- Text link ------------------------------------------------------------
   The secondary action that sits beside a primary button. A rule underneath
   rather than an arrow: next to a serif headline the arrow read as interface
   chrome, while an underline reads as a citation — which is the register the
   whole site is written in. */

.textlink {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
  text-decoration: none;
  padding-block-end: 3px;
  border-block-end: 1px solid var(--border-strong);
  transition: color var(--duration-fast) var(--ease-out),
    border-color var(--duration-fast) var(--ease-out);
}

.textlink:hover {
  color: var(--text-accent);
  border-block-end-color: var(--text-accent);
}

/* --- Card -----------------------------------------------------------------
   The default surface for any discrete unit of information. Border-defined
   rather than shadow-defined; elevation is reserved for things that genuinely
   float above the page. */

.card {
  background-color: var(--surface-raised);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
}

.card-flush {
  padding: 0;
  overflow: hidden;
}

/* Only for cards that are themselves the argument of a section — evidence, not
   inventory. Used sparingly. */
.card-elevated {
  box-shadow: var(--shadow-lg);
}

/* --- Premium marker -------------------------------------------------------
   GOLD WAS DROPPED from the system. It sat directly adjacent to the accent of
   the day (then oxide) on the wheel — two warm hues fighting each other muddies
   both — and a second accent contradicts the single-accent discipline the whole
   palette depends on. The accent has since moved to petrol, which removes the
   clash but not the discipline: gold stays out.

   A solid ink badge is the stronger premium signal anyway: it reads like a
   foil stamp on a printed report, and it costs the system nothing. Reserved
   for genuinely premium artefacts (executive reports, gated research). */

.badge-premium {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-3);
  font-size: var(--text-eyebrow);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--paper-0);
  background-color: var(--ink-700);
  border: 1px solid var(--ink-700);
  border-radius: var(--radius-pill);
}

.surface-inverse .badge-premium {
  /* Ink on ink would vanish — invert to an outline. */
  color: var(--text-primary);
  background-color: transparent;
  border-color: var(--border-strong);
}

/* --- Redaction & absence --------------------------------------------------
   A matched pair, and the two most important marks in the system.

   .redact stands in for a competitor. It makes any exhibit read as a
   confidential intelligence document rather than a marketing graphic, and it
   permanently removes both the legal exposure of naming identifiable firms and
   the credibility cost of inventing fake ones.

   .blank stands in for the reader. It is deliberately NOT styled as an input:
   an empty rule inside running prose reads as an omission, and an omission
   inside a sentence is far more uncomfortable than a table row saying "not
   found". This is the mark the whole homepage is built to deliver.

   Widths are em-based and set per instance, so a set of them looks like real
   varying names rather than a repeated glyph, and so both marks scale with
   whatever size the surrounding prose is set at. */

.redact {
  display: inline-block;
  inline-size: var(--redact-w, 5.5em);
  block-size: 0.72em;
  vertical-align: -0.02em;
  /* Wide enough to read as a word space. At 0.15em the bar bonded to the
     following word and "███Industries" scanned as one token instead of as a
     redacted company name. */
  margin-inline-end: 0.32em;
  background-color: var(--text-primary);
  border-radius: 1px;
  opacity: 0.85;
}

.blank {
  display: inline-block;
  inline-size: var(--blank-w, 8.5em);
  margin-inline: 0.15em;
  border-block-end: 2px solid var(--text-accent);
}

/* --- Illustrative label ----------------------------------------------------
   SUPERSEDED — DO NOT USE ON NEW WORK. Kept only because removing a class is
   not worth breaking an old component over.

   This rule used to be captioned "required on every mock exhibit,
   non-negotiable", and that caption is what is wrong. The user rejected margin
   "Illustrative example" labels on 2026-08-04 as unattractive and
   message-diluting. The obligation itself stands — a fabricated exhibit must
   say it is fabricated — but the agreed way to discharge it is to TITLE THE
   EXHIBIT IN ITS OWN CHROME: "AI answer simulation", "Sample answer", "Sample
   results". That reads as confidence; a footnote reads as an apology.

   Recorded because the stale caption above successfully talked a later pass
   into adding six of these labels back on 2026-08-09, all since removed. */

.illustrative {
  margin-block-start: var(--space-3);
  font-size: 0.6875rem;
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-tertiary);
}