/* ============================================================================
   Likidera — Product page layer
   Consumes tokens/base/components. Nine blocks: opening (.page-head, shared)
   · the sticky index bar · #modules · #today · #collections-payments ·
   #data-intake (the tinted centre) · #treasury · #group · #budget · the
   closing card. Everything the page describes sits in a .record — a column of
   prose against a column of exhibits, alternating side — which is shared.

   What lives here and nowhere else: .module-map and the one drawing
   (.plan-rows), plus the .steps--four and .fact-strip--three modifiers and
   the .page-product scoping rules. The sticky index bar moved to
   components.css (PAGE INDEX) when Forecasting and Security took it up.
   ============================================================================ */

/* ═══════════════ PAGE SCOPE ═══════════════
   The class is on <html>, beside the class that opts into the shared index
   bar and carries its scroll offset (components.css, PAGE INDEX). What is
   left here is the page's own rhythm and type. */

/* Records sit closer together than arguments do: a nine-block reference page
   has no room for the section step an argument page earns. */
.page-product .page-inner .section { padding-block: var(--section-y-product); }

/* Seven declarative headings do not need the weight seven claims need. One
   step below --text-h2 and at semibold, which also widens the H1/H2 gap on the
   one page whose only argumentative line is its H1. */
.page-product .section__title {
  font-size: var(--text-h2-quiet);
  font-weight: var(--weight-semibold);
}

/* The tint band still reads as a room rather than a stripe. */
#data-intake { padding-block: calc(var(--section-y-product) + var(--space-5)); }


/* ═══════════════ #modules — .module-map ═══════════════
   The product's sidebar, re-drawn: a continuous left rule, the group names on
   it, and one line of description indented under and right of each. The rule
   is the whole "this is a menu" reading and it costs one border. What the
   capture has and this does not: carets (they promise an interaction the page
   has not got), badge counts (invented figures), and the dark chrome (this is
   a Likidera page drawing a menu, not a picture of the product's skin). */
.module-map {
  margin-top: var(--space-5);
  border-left: 1px solid var(--rule);
}
.module-map__row {
  display: grid;
  gap: var(--space-1);
  padding: var(--space-4) 0 var(--space-4) var(--space-5);
}
.module-map__row + .module-map__row { border-top: 1px solid var(--rule); }
.module-map dt {
  font-size: var(--text-label);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--text);
}
/* Seven of the nine terms are links and one leaves the page, so the term has
   to be interactive — which .spec-list's --text-faint <dt> cannot be. No
   underline at rest: nine underlined uppercase terms would look like a form. */
.module-map dt a {
  color: inherit;
  transition: color var(--duration-fast) var(--ease-out);
}
.module-map dt a:hover,
.module-map dt a:focus-visible { color: var(--brand); }
.module-map dd {
  margin: 0;
  font-size: var(--text-sm);
  line-height: 1.5;
  color: var(--text-muted);
  /* The eight rows added on 2026-09-08 pushed three of them past one line at
     1440, each ending on a single word. `pretty` removes every one-word last
     line at all ten measured widths, never adds a line, and cleared four
     orphans that predated the change. Engines without it wrap as before. */
  text-wrap: pretty;
}
@media (min-width: 900px) {
  .module-map__row {
    /* 240, not 200: "Budgeting & Profitability" measures 221px (2026-10-26)
       and wrapped in a 200px column, making that one row 42px against the
       other eight at 21px. 240 clears the longest term by 19px.
       Re-derive if a group name changes. */
    grid-template-columns: 240px minmax(0, 1fr);
    column-gap: var(--space-6);
    align-items: baseline;
  }
}

/* The foot of the map, not its lead: it says why nine groups are listed and
   six described, which is a note about the block rather than a statement of
   what the block is. */
.modules__note { margin-top: var(--space-6); }
.modules__facts { margin-top: var(--space-6); }

/* .fact-strip is placed for five items. Three needs the honest modifier rather
   than the five-item grid's nth-child placement — left at repeat(5) the
   container's right two fifths hang empty and the strip reads as deleted
   items. No icons: the homepage strip's icons mark capabilities, and these
   three are conveniences. */
@media (min-width: 640px) {
  .fact-strip--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .fact-strip--three li { grid-column: auto; }
}
@media (min-width: 1000px) {
  .fact-strip--three { gap: 0; }
  .fact-strip--three li { padding-inline: var(--space-5); }
  .fact-strip--three li:first-child { padding-left: 0; }
  .fact-strip--three li:last-child { padding-right: 0; }
  .fact-strip--three li + li { border-left: 1px solid var(--rule); }
}


/* ═══════════════ RECORDS — page-local settings ═══════════════ */
/* Inside a record the two-column --loose row is 200px term + 352px value, a
   42-character measure. Stacked, the gloss gets the full 70 characters and the
   term sits above it, which is the shape these three definitions deserve. */
.record .spec-list { margin-top: 0; }
.record .spec-list--loose__row { grid-template-columns: minmax(0, 1fr); }

/* .steps is repeat(3) from 900 up. The four-step strip runs the full container
   because .steps is a horizontal mechanism with a hairline through its node
   centres, and four of them need the whole width. */
@media (min-width: 900px) {
  .steps--four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.intake__steps { margin-top: var(--space-6); }
/* The mid-page action, Forecasting's .methods__cta pattern: after the record,
   no title and no lead. */
.intake__cta { margin-top: var(--space-5); }


/* ═══════════════ THE ONE DRAWING ═══════════════
   #budget's exhibit is drawn, not captured: the Budget vs Actual capture was
   held back in its current data state, and the drawing stays until one is
   accepted. It does not sit in a figure.shot window. On a page whose subject
   is which screens exist, the window chrome means "a capture of this exists",
   and the same chrome on a drawing would make the two indistinguishable.

   It is built from real DOM text rather than SVG text. Inside a drawing that
   scales from 288px to 584px wide, a 12-unit SVG label renders between 8.6px
   and 17.5px — below the --text-micro 12px floor at the phone end. Security's
   #compliance made this call first. The drawing carries role="img" and the
   brief's alt; the label above it and the key below it stay outside that, as
   real text. The aging ladder (#collections-payments) and the tier stack
   (#treasury) that shared this block were replaced by captures. */
.figure-plate { margin: 0; display: grid; gap: var(--space-3); }
.figure-plate__label,
.figure-plate__key {
  font-size: var(--text-micro);
  font-weight: var(--weight-medium);
  color: var(--text-faint);
}
.figure-plate__label {
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
}


/* ---- IL-P3 · budget against actual (#budget) -----------------------------
   Six category rows against four column heads, the quantities as short bars
   because any figure here would be an invented one. The marks carry meaning by
   shape as well as colour, and the key beneath sits outside the drawing as
   real text so it is read aloud. Category names are neutral; the last two are
   revenue lines, which is what lets the drawing show that under-earning also
   flags red. */
.plan-rows { display: grid; }
.plan-rows__head { display: none; }
.plan-rows__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 22px;
  gap: var(--space-2);
  align-items: center;
  padding-block: var(--space-3);
  border-top: 1px solid var(--rule);
}
.plan-rows__bars {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-2);
}
/* The bar columns are as wide as the widest head, TR "Gerçekleşen" (100px; at
   56px it ran into "Kümülatif", 2026-10-26), and the 12px column gap is its
   air. At 520 the category name keeps 118px, clear of the longest, EN
   "Product revenue" at 116px; in the 452px record column at 1000 it keeps
   82px, so "Category" fits and the longer names take two lines. display:
   contents lets one markup serve both forms: below 520 the three bars are a
   row under the name, above it they join the row's grid. */
@media (min-width: 520px) {
  .plan-rows__head { display: grid; }
  .plan-rows__head,
  .plan-rows__row {
    grid-template-columns: minmax(0, 1fr) 100px 100px 100px 22px;
    column-gap: var(--space-3);
    align-items: center;
  }
  .plan-rows__bars { display: contents; }
}
.plan-rows__head span {
  font-size: var(--text-micro);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--text-faint);
}
.plan-rows__name { font-size: var(--text-sm); color: var(--text); }
.plan-rows__bar { height: 8px; border-radius: 2px; background: var(--surface-2); }
.plan-rows__bar i {
  display: block;
  height: 100%;
  border-radius: 2px;
  background: color-mix(in srgb, var(--brand) 35%, transparent);
}
.plan-rows__bar--plan i { width: var(--plan); }
.plan-rows__bar--actual i { width: var(--actual); }
.plan-rows__bar--ytd i { width: var(--ytd); }
/* Per-row quantities, by position for the same reason the ladder's are. */
.plan-rows__row:nth-child(2) { --plan: 92%; --actual: 88%; --ytd: 90%; }
.plan-rows__row:nth-child(3) { --plan: 70%; --actual: 72%; --ytd: 71%; }
.plan-rows__row:nth-child(4) { --plan: 80%; --actual: 96%; --ytd: 88%; }
.plan-rows__row:nth-child(5) { --plan: 46%; --actual: 52%; --ytd: 49%; }
.plan-rows__row:nth-child(6) { --plan: 88%; --actual: 84%; --ytd: 86%; }
.plan-rows__row:nth-child(7) { --plan: 64%; --actual: 41%; --ytd: 52%; }
.plan-rows__mark { justify-self: end; font-size: var(--text-sm); line-height: 1; }
.plan-rows__mark--on { color: var(--income); }
.plan-rows__mark--watch { color: var(--warning); }
.plan-rows__mark--off { color: var(--expense); }