/* ══════════════════════════════════════════════════════════════════════════
   trustangle — ENGINEERED GRID SYSTEM  (v3 · route 2 · 2026-07-20)
   Portable stylesheet. Nothing here depends on a framework.

   WHAT THIS IS
   The "B" half of the ratified A-on-B register, built. V1 defined B as
   engineered minimalism with three components:
       (1) a VISIBLE HAIRLINE GRID
       (2) MONO SECTION LABELS
       (3) the logo's angle as THE ONLY GEOMETRIC OPERATOR
   Council 2026-07-20b found the facet system had substituted a governing
   rule — "nothing is uniform" — for (1), and let (3) proliferate.

   CORRECTION TO THE RECORD (verified on disk, 2026-07-20): component (1) was
   never present in ANY build, including the council-ratified one. The facet
   system did not remove the grid; the grid was never written. This file
   implements it for the first time.

   GOVERNING RULE — THE GRID IS CONSTANT, THE CUT IS RARE.
   Regularity is the argument. The grid does not vary. The cut appears where
   a section begins or a decision is named — not on every card, not on chips,
   never as decoration. If two adjacent elements both carry a cut, one of
   them is wrong.

   Supersedes trustangle-facets.css. Retains from it: colour tokens (binding
   requirement #4), the ~5.5x type scale, light-only grounds, and complete
   RTL mirrors for every cut.
   Prepared by NHJ (Obai Sukar) for RMZ implementation · July 2026
   ══════════════════════════════════════════════════════════════════════════ */

:root{
  /* ── brand (unchanged — tokenised, no hard-coded hex in components) ── */
  --ta-teal:#0099A8;
  --ta-mint:#2ED9C3;
  --ta-teal-mid:#04606B;
  --ta-deep:#023940;          /* TEXT ONLY — never a fill */

  /* ── grounds: light only ── */
  --g-white:#FFFFFF;
  --g-porcelain:#EFF2F1;
  --g-tint:#EAF4F2;
  --g-tint-2:#E3F1EF;
  --ta-muted:#5E8288;

  /* ── THE GRID ── */
  --ta-rule:rgba(2,57,64,.13);      /* the hairline. one weight, everywhere. */
  --ta-rule-strong:rgba(2,57,64,.22);
  --ta-cols:12;
  --ta-gutter:clamp(16px,2vw,28px);
  --ta-margin:clamp(22px,5vw,64px);

  /* ── the cut: ONE size. variation was the error. ── */
  --ta-cut:34px;
}

/* ══ 1 · THE VISIBLE HAIRLINE GRID ════════════════════════════════════════
   The structural claim of the register. Engineered minimalism is legible
   because the structure is visible, not because shapes are surprising.     */

.ta-grid{
  display:grid;
  grid-template-columns:repeat(var(--ta-cols),1fr);
  gap:0 var(--ta-gutter);
  padding-inline:var(--ta-margin);
  position:relative;
}

/* Column rules — the grid you can SEE. Drawn as a background so they cost
   no DOM and never interfere with content or with RTL flow.               */
.ta-grid--ruled{
  background-image:repeating-linear-gradient(
    to right,
    var(--ta-rule) 0, var(--ta-rule) 1px,
    transparent 1px,
    transparent calc((100% - var(--ta-margin) * 2) / var(--ta-cols))
  );
  background-position:var(--ta-margin) 0;
  background-repeat:repeat-y;
  background-size:calc(100% - var(--ta-margin) * 2) 100%;
}

/* Horizontal register — sections sit on a rule, not on whitespace. */
.ta-rule-top{border-top:1px solid var(--ta-rule)}
.ta-rule-bottom{border-bottom:1px solid var(--ta-rule)}
.ta-rule-strong{border-top:1px solid var(--ta-rule-strong)}

/* Column spans — logical properties, so Arabic sets the grid natively
   rather than being mirrored after the fact (binding requirement #1).     */
.ta-span-3{grid-column:span 3}
.ta-span-4{grid-column:span 4}
.ta-span-5{grid-column:span 5}
.ta-span-6{grid-column:span 6}
.ta-span-7{grid-column:span 7}
.ta-span-8{grid-column:span 8}
.ta-span-12{grid-column:span 12}
@media(max-width:820px){
  .ta-span-3,.ta-span-4,.ta-span-5,.ta-span-6,.ta-span-7,.ta-span-8{grid-column:span 12}
  .ta-grid--ruled{background-image:none}   /* the grid stops being legible; stop drawing it */
}

/* ══ 2 · MONO SECTION LABELS ══════════════════════════════════════════════
   The second named component of B. An index plus a name, on the rule.     */

.ta-seclabel{
  font-family:ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,monospace;
  font-size:12.5px;
  letter-spacing:.13em;
  text-transform:uppercase;
  color:var(--ta-teal);
  display:flex;
  align-items:baseline;
  gap:14px;
  padding-block:14px;
}
.ta-seclabel__idx{color:var(--ta-muted);font-variant-numeric:tabular-nums}
.ta-seclabel__rule{flex:1;height:1px;background:var(--ta-rule);align-self:center}

/* ══ 3 · THE CUT — the only geometric operator ════════════════════════════
   One shape, one size, used sparingly. Compare v2, which shipped nine cut
   classes plus a six-way auto-variation utility and applied them to every
   card, section and chip.                                                  */

.ta-cut{clip-path:polygon(0 0,calc(100% - var(--ta-cut)) 0,100% var(--ta-cut),100% 100%,0 100%)}
[dir="rtl"] .ta-cut{clip-path:polygon(var(--ta-cut) 0,100% 0,100% 100%,0 100%,0 var(--ta-cut))}

/* The mark, at section scale. Once per page at most. */
.ta-operator{width:clamp(56px,7vw,96px);aspect-ratio:1;display:block}
.ta-operator polygon:nth-child(1){fill:var(--ta-mint)}
.ta-operator polygon:nth-child(2){fill:var(--ta-teal)}
.ta-operator polygon:nth-child(3){fill:var(--ta-deep)}

/* DEPRECATED in v3 — kept only so v2 pages do not break during migration.
   Do not use in new work. The auto-variation utility is deliberately absent:
   it was the mechanism of the "nothing is uniform" rule the council found
   unratified. Removing it is the point of route 2.                         */
.no-round{border-radius:0 !important}

/* ══ 4 · TYPE — ~5.5x institutional range (retained from v2) ═════════════ */
.ta-h1{font-size:clamp(36px,4.9vw,64px);line-height:1.08;letter-spacing:-.02em}
.ta-h2{font-size:clamp(25px,2.7vw,36px);line-height:1.2;letter-spacing:-.018em}
.ta-h3{font-size:clamp(19px,1.5vw,22px);line-height:1.3}
.ta-body{font-size:17.5px;line-height:1.62}
.ta-small{font-size:12px;letter-spacing:.1em}

/* ══ 5 · SURFACES — light only, no dark fills (retained from v2) ═════════ */
.ta-surface{background:var(--g-white);border:1px solid var(--ta-rule)}
.ta-surface--tint{background:var(--g-tint)}
.ta-surface--porcelain{background:var(--g-porcelain)}