/* backend/src/main/resources/static/modules_styles/pikiner_sites/components/blueprint.css */

/* ==============================================
   BLUEPRINT — the board, the grid, the sheet

   The drawing-board layer of the two public sites (the owner's decision
   of 1 September 2026, ai-context/pikiner/blueprint-composition.md): the
   grid is a pure background layer, mathematically
   responsive, and nothing sits on its lines. Long text lies on a sheet —
   an opaque panel laid on the board, like tracing paper on a drafting
   table. The sheet counts no cells.

   In components/ because every page of the module gets it; the starter
   and the other modules never see this file, so the admin pages keep a
   quiet background.

   The measured rules this file carries (blueprint-study/grid.html):
   - the tiling is centred with half a line width backed off, otherwise
     the margins come out 4.50px against 3.50px at every width;
   - the major tile is a whole multiple of the minor, so it phase-locks
     to the minor for free;
   - what stays constant across devices is how many majors cross the
     viewport, not the pitch — the steps below hold the count, and they
     are media queries so the browser re-evaluates them on resize, zoom
     and rotation with no script to forget.

   Line ink derives from the theme's own text ink through color-mix, so
   the two prints color the grid without this file naming a theme.

   This file is the MECHANICS. Every tunable value — pitch, interval,
   line strengths, per-site tint — lives in blueprint-tuning.css, which
   the dev tuning panel rewrites; one owner per value.
   ============================================== */

.site-page {
  /* Every value lives in blueprint-tuning.css; this file only derives.
     Lines are drawn with the theme's own ink, untinted. The two sites
     are told apart by the BOARD: a per-site wash laid over the theme's
     background (see ::before below). */
  --bp-ink: var(--gb-text-primary);
  --bp-line-minor: color-mix(in srgb, var(--bp-ink) var(--bp-a-minor), transparent);
  --bp-line-major: color-mix(in srgb, var(--bp-ink) var(--bp-a-major), transparent);
  --bp-rule: color-mix(in srgb, var(--bp-ink) 30%, transparent);

  position: relative;
  z-index: 0;
}

/* ==============================================
   THE BOARD

   A fixed layer, not background-attachment: fixed — iOS Safari never
   honored that. The content scrolls over a standing board. z-index -1
   inside the page's own stacking context puts the grid above the body
   background and below everything the page draws.
   ============================================== */

.site-page::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  /* The wash: the site's color laid over the theme's board at the
     tuned amount — the mechanism of the two sites' visual distinction.
     0% keeps the print's own board. The sheet is opaque and sits on
     top, so running text never reads against the wash. */
  background-color: color-mix(in srgb, var(--bp-wash) var(--bp-wash-amount), transparent);
  background-image:
    linear-gradient(to right, var(--bp-line-major) 0 1px, transparent 1px),
    linear-gradient(to bottom, var(--bp-line-major) 0 1px, transparent 1px),
    linear-gradient(to right, var(--bp-line-minor) 0 1px, transparent 1px),
    linear-gradient(to bottom, var(--bp-line-minor) 0 1px, transparent 1px);
  background-size:
    calc(var(--bp-cell) * var(--bp-major)) calc(var(--bp-cell) * var(--bp-major)),
    calc(var(--bp-cell) * var(--bp-major)) calc(var(--bp-cell) * var(--bp-major)),
    var(--bp-cell) var(--bp-cell),
    var(--bp-cell) var(--bp-cell);
  /* The -0.5px is not a fudge. Centring the background centres the
     CELL; the 1px line sits on the cell's leading edge, so without half
     a line width backed off the margins are unequal by exactly one
     pixel at every width. Measured on ten widths including an odd one. */
  background-position:
    calc(50% - 0.5px) 0,
    0 0,
    calc(50% - 0.5px) 0,
    0 0;
  background-repeat: repeat;
}

/* ==============================================
   THE STEPS — hold the count, not the pitch

   The stepped values per viewport — cell, major interval, line
   strengths — live in blueprint-tuning.css as media queries, so the
   browser re-evaluates them on resize, zoom and rotation with no
   script. What stays constant across devices is how many majors cross
   the viewport, not the pitch; the faint lines RISE toward the narrow
   screen — the drawing renders identically, what changes is the
   viewing.
   ============================================== */

/* ==============================================
   THE SHEET

   Text is always read from an opaque surface; the grid lives on the
   board around it. The sheet is an ordinary background on the section's
   content container — it counts no cells and owes the grid nothing.
   ============================================== */

/* The padding is a tuned value, not a step of the spacing scale: how far
   text stands from the edge of its sheet is a property of the board, and
   it is adjusted from life like the grid is. Both values, and the width
   at which they step, live in rhythm-tuning.css. */
.site-page .section-content {
  background: var(--gb-bg-elevated);
  border: 1px solid var(--bp-rule);
  padding: var(--rh-pad-block) var(--rh-pad-inline);
}