/* ============================================================================
   VECREAL — FIELD · FIRM INTELLIGENCE PAGE
   Page-scoped compositions for v2-fi.html. Nothing here redefines a token or
   a base component; everything is authored in the field vocabulary.
   ========================================================================== */

/* ==========================================================================
   THE MEMORY PAIR — "Practice compounds" vs "Memory keeps leaking"
   Two machined plates on the night ground. The clay plate carries the with-FI
   story (emergent direction, honestly labelled); the white plate is a
   day-material surface (markup carries `day` so semantic tokens stay honest
   inside it). Bars are slugs rising in engraved track slots; the rest state
   is complete without JS, and growth is armed only under html.field-ready.
   ========================================================================== */
.fimem{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:clamp(28px,3.4vw,46px)}

.fimem-plate{position:relative;display:flex;flex-direction:column;overflow:hidden;
  padding:clamp(24px,2.6vw,32px) clamp(22px,2.4vw,30px) clamp(20px,2.2vw,26px);
  border-radius:var(--r-3)}

/* clay plate — with FI. Solid brand clay, machined: hair light edge, inner
   top highlight, deep night drop. */
.fimem-plate.keep{background:linear-gradient(180deg,#BD4E34,#A84330);
  border:var(--hair) solid rgba(255,255,255,.14);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18),
    0 20px 50px -24px rgba(0,0,0,.8),0 60px 120px -60px rgba(0,0,0,.9)}

/* white plate — without it. Day recipe tuned for the night ground. */
.fimem-plate.leak{background:#FFFFFF;border:var(--hair) solid var(--line);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),
    0 20px 50px -24px rgba(0,0,0,.8),0 60px 120px -60px rgba(0,0,0,.9)}

.fimem-k{font-family:var(--mono);font-size:var(--mono-m1-size);font-weight:var(--mono-m1-weight); /* M1 */
  letter-spacing:var(--mono-m1-track);text-transform:uppercase;line-height:1.4}
.fimem-plate.keep .fimem-k{color:rgba(251,252,254,.9)}
.fimem-plate.leak .fimem-k{color:var(--mute)}

.fimem-h{margin-top:13px;font-size:clamp(26px,2.4vw,34px);font-weight:620;
  letter-spacing:-.03em;line-height:1.08;text-wrap:balance;font-variation-settings:'opsz' 32;
  margin-bottom:clamp(24px,2.8vw,36px)}
.fimem-plate.keep .fimem-h{color:#FBFCFE}
.fimem-plate.leak .fimem-h{color:#25242A}

/* the chart: eight engraved track slots, a slug rising in each. Slots run the
   full chart height so both plates share one baseline; the slug's height is
   the data. */
.fimem-chart{margin-top:auto;display:grid;grid-template-columns:repeat(8,minmax(0,1fr));
  gap:clamp(8px,1vw,12px);height:clamp(150px,15vw,190px)}
.fimem-col{position:relative;display:block;height:100%;border-radius:var(--r-1)}
/* the slug sits inside its channel: a 2px reveal keeps the track readable
   around the bar, so even a full bar shows the machined frame. --h is a
   fraction of the channel interior, so 1.0 seats flush inside the frame. */
.fimem-col i{position:absolute;left:2px;right:2px;bottom:2px;
  height:calc((100% - 4px)*var(--h,.5));display:block;
  border-radius:3px;transform-origin:bottom}

/* engraved slots — darker clay inset on the clay plate, quiet enough that the
   slugs stay the figure and the track stays the ground */
.fimem-plate.keep .fimem-col{background:linear-gradient(180deg,rgba(59,21,10,.14),rgba(59,21,10,.08));
  box-shadow:inset 0 2px 5px -2px rgba(38,12,4,.45),inset 0 0 0 var(--hair) rgba(38,12,4,.15),
    0 1px 0 rgba(255,255,255,.07)}
/* bone slugs with a machined edge */
.fimem-plate.keep .fimem-col i{background:linear-gradient(180deg,#FBFCFE,#E6E9EE);
  border:var(--hair) solid rgba(94,36,20,.5);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7),0 2px 6px -2px rgba(38,12,4,.5)}

/* engraved slots — light gray inset on the white plate */
.fimem-plate.leak .fimem-col{background:#F1F3F5;
  box-shadow:inset 0 2px 5px -2px rgba(25,24,23,.10),inset 0 0 0 var(--hair) rgba(25,24,23,.035)}
/* cool dark neutral slugs */
.fimem-plate.leak .fimem-col i{background:linear-gradient(180deg,#42464C,#33363B);
  border:var(--hair) solid rgba(25,24,23,.4);box-shadow:inset 0 1px 0 rgba(255,255,255,.12)}

.fimem-cap{margin-top:clamp(14px,1.6vw,18px);font-family:var(--mono);
  font-size:var(--mono-m3-size);letter-spacing:var(--mono-m3-track); /* M3 */
  line-height:1.55;text-wrap:pretty;
  min-height:38px /* two lines reserved so both charts keep one baseline */}
.fimem-plate.keep .fimem-cap{color:rgba(251,252,254,.75)}
.fimem-plate.leak .fimem-cap{color:var(--mute)}

/* motion: bars grow from their slots on scroll-in. Left plate first, right
   ~300ms behind; 40ms per-bar stagger via --b set in markup. Rest state is
   the composed chart, so a page without JS is complete. */
.fimem-plate.keep{--p:140ms}
.fimem-plate.leak{--p:440ms}
html.field-ready .fimem .fimem-col i{transform:scaleY(0);
  transition:transform var(--m-4) var(--e-out);
  transition-delay:calc(var(--p,0ms) + var(--b,0)*40ms)}
html.field-ready .fimem.in .fimem-col i{transform:scaleY(1)}
@media (prefers-reduced-motion:reduce){
  html.field-ready .fimem .fimem-col i{transform:none!important;transition:none!important}
}

@media(max-width:860px){
  .fimem{grid-template-columns:1fr;gap:14px}
  .fimem-chart{height:clamp(140px,36vw,180px);gap:7px}
  .fimem-cap{min-height:0}
}