/* ==========================================================================
   Exis symbol system v2: components. Depends on exis-site/assets/css/tokens.css.
   Self-contained: every rule is prefixed .ex- so it can be dropped into
   site.css or loaded as /assets/css/system.css without collisions.
   Pattern URLs are relative to this file (brand/system/). On the site they
   become /assets/patterns/... (see INTEGRATION.md).
   ========================================================================== */

:root {
  --ex-signal: var(--nominal);          /* mint: signal only */
  --ex-stake: var(--brand);             /* Iris: the only solid */
  --ex-datum: rgba(138, 132, 255, 0.35);/* the datum hairline */
  --ex-ink: var(--n-70);                /* emblem stroke on dark */
  --ex-rule: var(--line-2);             /* furrow and station lines */
  --ex-plough: rgba(255, 255, 255, 0.04);/* ploughed ground band */
}

/* ---- Emblems ------------------------------------------------------------- */
.ex-emblem { width: 48px; height: 48px; flex: none; color: var(--ex-ink); display: block; }
.ex-emblem--96 { width: 96px; height: 96px; }
.ex-emblem--32 { width: 32px; height: 32px; } /* only inside the section marker on phones */

/* ---- Pattern grounds -----------------------------------------------------
   Apply to a container that holds NO body text, or to a band/gutter.
   The tile is pure white; opacity alone sets contrast (cap 0.04). */
.ex-ground { position: relative; isolation: isolate; }
.ex-ground::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: var(--ex-tile); background-repeat: var(--ex-repeat, repeat);
  background-position: var(--ex-pos, 0 0);
  opacity: var(--ex-op, 0.035);
  -webkit-mask-image: var(--ex-mask, none); mask-image: var(--ex-mask, none);
}
.ex-ground--ridge    { --ex-tile: url(/assets/patterns/ridge-furrow.svg);  --ex-op: 0.03; }
.ex-ground--pass     { --ex-tile: url(/assets/patterns/furrow-pass.svg);   --ex-op: 0.035; }
.ex-ground--grid     { --ex-tile: url(/assets/patterns/survey-grid.svg);   --ex-op: 0.04; }
.ex-ground--horizons { --ex-tile: url(/assets/patterns/soil-horizons.svg); --ex-op: 0.04; --ex-repeat: repeat-x; }
.ex-ground--horizons-l { --ex-tile: url(/assets/patterns/soil-horizons-labelled.svg); --ex-op: 0.04; --ex-repeat: repeat-x; }
.ex-ground--settle   { --ex-tile: url(/assets/patterns/settling-bands.svg); --ex-op: 0.025; --ex-repeat: repeat-x; }
.ex-fade-x  { --ex-mask: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent); }
.ex-fade-r  { --ex-mask: radial-gradient(closest-side, #000 40%, transparent); }

/* Ledger paper (documents and print) */
.ex-ledger { background-color: #ece9e1; color: #2b2740; }
.ex-ledger .ex-emblem { color: #2b2740; }

/* ---- (b) Section marker --------------------------------------------------
   <div class="ex-marker" aria-hidden="true">
     <svg class="ex-emblem"><use href="#ex-emblem-pass"/></svg>
     <span class="ex-marker__coord"><b>Pass 02</b> · Approach</span>
     <span class="ex-marker__rule"></span>
     <span class="ex-marker__hz">Hzn A</span>
   </div> */
.ex-marker {
  display: flex; align-items: center; gap: 16px; margin: 0 0 1.6rem;
  font: 400 var(--fs-coord)/1 var(--font-mono); letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--n-50);
}
.ex-marker .ex-emblem { color: var(--n-90); }
.ex-marker__coord b { font-weight: 600; color: var(--n-90); }
.ex-marker__rule { flex: 1; height: 1px; min-width: 24px;
  background: linear-gradient(90deg, var(--line-2), var(--line) 55%, transparent); }
.ex-marker__hz { padding: 4px 7px 3px; border: 1px solid var(--line-2); border-radius: 2px; color: var(--n-70); }

/* ---- (c) Furrow divider ---------------------------------------------------
   One pass right, one headland turn, a return pass still in progress.
   Percent coordinates keep the turn radius fixed at any width. */
.ex-furrow { position: relative; height: 40px; margin: 0; padding-right: 14px; }
.ex-furrow svg.ex-furrow__svg { display: block; width: 100%; height: 40px; overflow: visible; }
.ex-furrow line, .ex-furrow path { stroke: var(--ex-rule); stroke-width: 1; fill: none; vector-effect: non-scaling-stroke; }
.ex-furrow .ex-furrow__datum { stroke: var(--ex-datum); stroke-width: 1; }
.ex-furrow .ex-furrow__band { fill: var(--ex-plough); stroke: none; }
.ex-furrow .ex-furrow__node { fill: var(--ex-signal); stroke: none; }
.ex-furrow .ex-furrow__plough { stroke-dasharray: 1; stroke-dashoffset: 0; }
@media (prefers-reduced-motion: no-preference) {
  .ex-furrow.is-pending .ex-furrow__plough { stroke-dashoffset: 1; }
  .ex-furrow.is-pending .ex-furrow__node { opacity: 0; }
  .ex-furrow .ex-furrow__plough { transition: stroke-dashoffset 1.6s cubic-bezier(0.3, 0, 0.2, 1); }
  .ex-furrow .ex-furrow__node { transition: opacity 0.4s 1.4s; }
}

/* Headland band: the ground between two sections (pattern + furrow). */
.ex-headland { position: relative; padding: 28px 0; }
.ex-headland.ex-ground::before { --ex-mask: linear-gradient(90deg, transparent, #000 15%, #000 85%, transparent); }

/* ---- (d) Datum hairline + stake ticks -----------------------------------
   <div class="ex-datum">
     <svg class="ex-datum__stake" viewBox="0 0 6 24" aria-hidden="true"><path d="M0 0H6V20L3 24L0 20Z"/></svg>
     <div class="ex-tick" data-n="01"></div> ...content...
   </div>
   The hairline and stake are static: no scroll fill, no parallax. */
.ex-datum { --datum-x: 12px; position: relative; padding-left: 52px; }
.ex-datum::before { content: ""; position: absolute; left: var(--datum-x); top: 0; bottom: 0; width: 1px; background: var(--ex-datum); }
.ex-datum__stake { position: absolute; left: calc(var(--datum-x) - 2.5px); top: -6px; width: 6px; height: 24px; fill: var(--ex-stake); }
.ex-tick { position: relative; height: 0; }
.ex-tick::before { content: ""; position: absolute; left: calc(var(--datum-x) - 52px - 5px); top: 0; width: 11px; height: 1px; background: var(--brand); }
.ex-tick::after { content: attr(data-n); position: absolute; left: calc(var(--datum-x) - 52px + 12px); top: -6px;
  font: 400 10px/1 var(--font-mono); letter-spacing: 0.12em; color: var(--n-40); }

/* ---- (e) Station list -----------------------------------------------------
   <ol class="ex-stations" style="--n:5"><li>Science</li>...<li class="is-signal">Data</li></ol> */
.ex-stations { --n: 5; position: relative; display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr));
  margin: 0; padding: 0; list-style: none; }
.ex-stations::before { content: ""; position: absolute; top: 5px; height: 1px; background: var(--ex-rule);
  left: calc(100% / (2 * var(--n))); right: calc(100% / (2 * var(--n))); }
.ex-stations li { position: relative; padding-top: 24px; text-align: center;
  font: 400 0.68rem/1.4 var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--n-50); }
.ex-stations li::before { content: ""; position: absolute; top: 0; left: 50%; width: 11px; height: 11px; margin-left: -5.5px;
  border-radius: 50%; border: 1px solid var(--line-3); background: var(--bg); box-sizing: border-box; }
.ex-stations li.is-signal { color: var(--n-90); }
.ex-stations li.is-signal::before { background: var(--ex-signal); border-color: var(--ex-signal); box-shadow: 0 0 0 4px var(--nominal-dim); }
.ex-stations small { display: block; margin-top: 4px; font: 400 0.82rem/1.45 var(--font-body); letter-spacing: 0; text-transform: none; color: var(--n-50); }
@media (max-width: 640px) {
  .ex-stations { grid-template-columns: 1fr; row-gap: 14px; }
  .ex-stations::before { top: 6px; bottom: 6px; left: 5px; right: auto; width: 1px; height: auto; }
  .ex-stations li { padding: 0 0 0 26px; text-align: left; }
  .ex-stations li::before { left: 0; margin-left: 0; top: 2px; }
}

/* ---- (f) Evidence tally badge --------------------------------------------- */
.ex-tally { display: inline-flex; align-items: center; gap: 10px; padding: 6px 12px 6px 8px;
  border: 1px solid var(--line-2); border-radius: 4px; background: var(--fill-hud);
  font: 400 0.66rem/1 var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--n-50); }
.ex-tally svg { width: 56px; height: 28px; flex: none; fill: none; stroke: var(--n-70); stroke-width: 1; }
.ex-tally svg .node { fill: var(--ex-signal); stroke: none; }
.ex-tally b { font-weight: 600; color: var(--n-90); }
.ex-tally i { font-style: normal; color: var(--n-40); }

/* ---- (a) Seed tag -----------------------------------------------------------
   <span class="ex-seedtag"><span class="ex-seedtag__body">Record · 05/05</span></span>
   Hanging variant ties under a button with a 1 px thread. */
.ex-seedtag { position: relative; display: inline-flex; align-items: center; vertical-align: middle; }
.ex-seedtag__body { position: relative; isolation: isolate; display: inline-flex; align-items: center; height: 24px;
  padding: 0 14px 0 25px; font: 400 0.64rem/1 var(--font-mono); letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--brand-soft); background: rgba(138, 132, 255, 0.6);
  clip-path: polygon(9px 0, 100% 0, 100% 100%, 9px 100%, 0 50%); white-space: nowrap; }
.ex-seedtag__body::before { content: ""; position: absolute; inset: 1px; z-index: -1;
  background: linear-gradient(270deg, rgba(138, 132, 255, 0.28) 0 3px, var(--panel-00) 3px);
  clip-path: polygon(8.6px 0, 100% 0, 100% 100%, 8.6px 100%, 0 50%); }
.ex-seedtag__body::after { content: ""; position: absolute; left: 10px; top: 50%; width: 7px; height: 7px; margin-top: -3.5px;
  border-radius: 50%; border: 1px solid var(--brand); box-sizing: border-box; }
.ex-seedtag__thread { position: absolute; left: 13px; bottom: 50%; width: 30px; height: 30px; overflow: visible;
  fill: none; stroke: rgba(138, 132, 255, 0.6); stroke-width: 1; pointer-events: none; }
.ex-seedtag--hang { display: flex; width: max-content; margin: 18px 0 0 22px; }
.ex-seedtag--meta .ex-seedtag__body { color: var(--n-70); background: var(--line-3); }
.ex-seedtag--meta .ex-seedtag__body::before { background: var(--panel-00); }
.ex-seedtag--meta .ex-seedtag__body::after { border-color: var(--n-50); }
@media (prefers-reduced-motion: no-preference) {
  .ex-seedtag--hang.is-pending { opacity: 0; transform: translateY(-6px) rotate(-2deg); }
  .ex-seedtag--hang { transform-origin: 13px -18px; transition: opacity 0.4s, transform 0.4s cubic-bezier(0.16, 1.2, 0.3, 1); }
}