/* ═══════════════════════════════════════════
   cahier.css — Séyès ruled writing-surface treatment
   FrenchWrite

   .cahier-surface layers two background-image gradients behind an
   element's own text: a repeating horizontal "rule" pattern spaced to
   the line-height, and a single vertical margin line ~2.5rem from the
   left edge. Both live in background-image, so they render behind
   foreground text/caret/selection by construction — nothing here
   touches color, font-family, or line-height, so the host's existing
   ink-on-paper contrast (and AA legibility) is untouched.

   --cahier-gap and --cahier-offset can't be guessed from the class
   alone (every host has its own line-height/padding-top), so pair
   .cahier-surface with a small per-host modifier class that sets them
   to that element's real values — see .cahier-editor / .cahier-word-counter
   below. Without a modifier, sensible defaults apply.
═══════════════════════════════════════════ */

.cahier-surface {
  --cahier-gap:    1.85em;
  --cahier-offset: 0px;
  --cahier-rule:   var(--rule);

  background-image:
    linear-gradient(to right,
      transparent 0, transparent 2.5rem,
      var(--marge) 2.5rem, var(--marge) calc(2.5rem + 2px),
      transparent calc(2.5rem + 2px)),
    repeating-linear-gradient(to bottom,
      transparent 0, transparent calc(var(--cahier-gap) - 1px),
      var(--cahier-rule) calc(var(--cahier-gap) - 1px), var(--cahier-rule) var(--cahier-gap));
  background-repeat: no-repeat, repeat;
  background-position: 0 0, 0 var(--cahier-offset);
  background-attachment: local, local;
}

/* Dark paper: fade the horizontal rules further so they stay quiet
   against the darker surface. The margin line stays at full strength —
   it's meant to read as a deliberate mark in either theme, not a faint
   one. */
[data-theme="dark"] .cahier-surface {
  --cahier-rule: color-mix(in srgb, var(--rule) 50%, transparent);
}

/* Per-host tuning — line-height and padding-top come from the actual
   element being styled: */
.cahier-editor       { --cahier-gap: 1.85em; --cahier-offset: 24px; } /* index.php #mainEditor */
.cahier-word-counter { --cahier-gap: 1.75em; --cahier-offset: 16px; } /* Word Counter #mainEditor */

@media (max-width: 768px) {
  /* Padding collapses on narrow screens, leaving no room for the
     vertical margin-line gutter — drop it, keep only the horizontal
     ruling so the surface stays legible instead of overlapping text. */
  .cahier-surface {
    background-image:
      repeating-linear-gradient(to bottom,
        transparent 0, transparent calc(var(--cahier-gap) - 1px),
        var(--cahier-rule) calc(var(--cahier-gap) - 1px), var(--cahier-rule) var(--cahier-gap));
    background-position: 0 var(--cahier-offset);
  }

  /* index.php's editor switches to line-height 1.8 / padding var(--space-4)
     at this breakpoint (see layout.css) — Word Counter doesn't change its
     line-height or padding at any width, so .cahier-word-counter needs no
     override here. */
  .cahier-editor { --cahier-gap: 1.8em; --cahier-offset: 16px; }
}