/* access-import — 7 · INDUSTRY ACCESS
   Ported from `campaign-hybrid` onto style-lab/tokens.css.

   What is local here: grid-column assignments, section rhythm, form geometry,
   chip layout, focus geometry, and the copied atmosphere/scaffold machinery
   this prototype needs to stand alone.

   What is NOT local here: no hex, no font names, no absolute type sizes, no
   easing curves, no radii. Every colour is a token or a color-mix derived from
   one; every type size is a token or a token multiple; every curve is
   var(--ease); every duration is var(--duration-ui) or var(--reveal-duration).

   TOKEN GAPS are marked `GAP n:` inline and listed in the handback report.
*/

main{position:relative;z-index:1}
section{position:relative}

/* campaign-hybrid gave this act a longer rest than its generic act padding
   (clamp(8rem,14vh,12rem) vs the contract's clamp(6rem,12vh,10rem)) — kept as
   a multiple of the section-space token rather than a re-declared clamp. */
.access{padding-block:calc(var(--space-section) * 1.2)}

/* ---------- atmosphere: copied verbatim in behaviour from final/acts.css
     so this part renders standalone. Same layer, same tokens, same river. --- */
.atmosphere{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.grade-base{
  position:absolute;inset:0;background-color:var(--black);
  transition:background-color var(--reveal-duration) linear;
}
.grade-drift{
  position:absolute;inset:0;
  background:
    radial-gradient(120vw 90vh at 85% -10%, color-mix(in srgb,var(--cool) 50%,transparent), transparent 60%),
    radial-gradient(100vw 80vh at -10% 30%, color-mix(in srgb,var(--warm) 48%,transparent), transparent 55%),
    radial-gradient(110vw 90vh at 70% 70%, color-mix(in srgb,var(--cool-deep) 48%,transparent), transparent 60%),
    radial-gradient(120vw 100vh at 10% 105%, color-mix(in srgb,var(--warm) 50%,transparent), transparent 60%);
  animation:grade-drift 36s var(--ease) infinite alternate;
}
@keyframes grade-drift{
  from{background-position:0% 0%,0% 0%,0% 0%,0% 0%}
  to{background-position:6% 8%,-5% -6%,-7% 5%,5% -7%}
}
.grain{
  position:absolute;inset:-100px;opacity:var(--grain-opacity);pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
  animation:grain 7s steps(8) infinite;
}
@keyframes grain{
  0%,100%{transform:translate(0,0)}12%{transform:translate(-30px,20px)}
  25%{transform:translate(20px,-35px)}37%{transform:translate(-25px,-15px)}
  50%{transform:translate(30px,25px)}62%{transform:translate(-15px,30px)}
  75%{transform:translate(25px,-20px)}87%{transform:translate(-30px,-25px)}
}

/* per-act glow: the act's own data-tint, lifted toward --ink. access.js copies
   data-tint onto --tint so the hex stays in exactly ONE place (the attribute).
   campaign-hybrid put this act's glow at 78%.

   NOTE: this rule is triplicated in acts.css and dev.css. Both pages load THIS
   copy last, so this is the one that wins — keep the three identical.

   The vertical radius is `min(60vh, 62%)`, not a flat 60vh. `inset:0` clips this
   ellipse to the section box, so a section shorter than the viewport had its
   falloff cut mid-gradient and the cut read as a hard rule straight across the
   page at the section's edge — worst on The Record once the static framings hug
   their content (317px on `line`, 467px on `trio`). At 62% of the box the edge
   always sits at ~81% along the ray, past the `transparent 70%` stop, so the
   glow has faded out before the clip can show. Sections taller than ~1.03x the
   viewport still take 60vh and are unchanged. */
.act::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(90vw min(60vh, 62%) at var(--glow-x,50%) 50%,
    color-mix(in srgb, color-mix(in srgb, var(--tint,var(--bg)) 90%, var(--ink)) 28%, transparent),
    transparent 70%);
}
.access{--glow-x:78%}

/* the token .label supplies font, size, tracking, colour and rhythm.
   The gold rule beside it is the acts' decorative geometry — copied so this
   section's eyebrow matches its neighbours. */
.label{display:flex;align-items:center;gap:1rem}
.label::before{content:"";width:2.4rem;height:1px;background:var(--accent)}

/* ---------- 7 · INDUSTRY ACCESS — copy left, form right ---------- */
.access .grid12{align-items:start}
.access-copy{grid-column:1/6}
/* GAP 1: campaign-hybrid ran this heading at clamp(1.9rem,3.2vw,3rem), a step
   BELOW the contract's --text-h2 (clamp(2rem,3.6vw,3.2rem)). Held as a token
   multiple so the descent survives; the real fix is a --text-h2-sm in
   tokens.css, not a re-declared clamp here. */
.access-copy h2{font-size:calc(var(--text-h2) * .94);margin-bottom:1.6rem;max-width:16ch}

.access-form{grid-column:7/13;display:grid;gap:1.4rem}

/* ---------- fields ---------- */
/* GAP 2: field labels and legends ran at .62rem / .2em in the source. The
   contract's --text-label is .68rem and its tracking pair is --track-label
   (.28em) / --track-caption (.16em) — neither is .2em. Taken as
   --text-label * .92 and --track-caption; the label reads marginally tighter
   than the source, which on a form control is the safer direction. */
.field label,.access-form legend{
  display:block;
  font-family:var(--font-form);
  font-size:calc(var(--text-label) * .92);
  /* 600 clotted at this size — Oswald's counters close up and the caps read
     as a bar, not a word (Matthew, 2026-08-13). Regular is the clarity
     optimum for tracked uppercase this small. */
  font-weight:400;
  letter-spacing:var(--track-caption);
  text-transform:uppercase;
  color:var(--ink-faint);
  margin-bottom:.55rem;
}
.field input[type=text],.field input[type=email],.field textarea{
  width:100%;
  background:transparent;
  border:1px solid var(--line);
  border-radius:var(--radius);   /* SQUARED — see report */
  -webkit-appearance:none;appearance:none;
  color:var(--ink);
  font-family:var(--font-body);
  font-size:var(--text-body);
  padding:.85rem 1rem;
  transition:border-color var(--duration-ui) var(--ease);
}
.field textarea{resize:vertical;min-height:6rem}
.field input::placeholder,.field textarea::placeholder{color:var(--ink-faint)}
/* Focus is a RING, not a recolour: the outline is new geometry that appears,
   so the state survives for a user who cannot separate gold from bone. */
.field input:focus-visible,.field textarea:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:2px;
  border-color:var(--accent);
}
/* micro set 2026-08-13: a gold underline sweeps in on focus — decoration on
   top of the ring, never instead of it (the ring is the accessible state) */
.field input[type=text],.field input[type=email],.field textarea{
  background-image:linear-gradient(var(--accent),var(--accent));
  background-repeat:no-repeat;background-position:left bottom;background-size:0% 2px;
  transition:background-size .34s var(--ease),border-color var(--duration-ui) var(--ease);
}
.field input:focus,.field textarea:focus{background-size:100% 2px}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:1.4rem}

/* SCOPED to .access on merge (2026-08-01) — same reason dev.css's bare `h2` had
   to be scoped: an unscoped element selector in a section stylesheet is fine in
   the standalone prototype and leaks across the whole page once merged. No other
   fieldset exists yet, so this is pre-emptive rather than a live bug. */
.access fieldset{
  border:1px solid var(--line);
  border-radius:var(--radius);   /* SQUARED — see report */
  padding:1.3rem 1.5rem;
  min-inline-size:0;             /* fieldset's default min-content floor blows
                                    out the 390px column without this */
  margin:0;
}
/* the shared label rule above gives legends a .55rem bottom margin, which on a
   legend stacks on top of the fieldset's own padding-top and makes the box
   read top-heavy. The fieldset padding is the spacing here. */
.access legend{padding:0 .6rem;margin-bottom:0}

/* ---------- chips: real radio / checkbox inputs, styled ---------- */
.chips{display:flex;flex-wrap:wrap;gap:.6rem}
.chip{
  position:relative;                 /* the visually-hidden input's container */
  display:inline-flex;align-items:center;gap:.55rem;
  cursor:pointer;user-select:none;
  font-family:var(--font-form);
  font-size:var(--text-label);
  font-weight:400;              /* was 500 — same clotting as the labels */
  /* GAP 3: source chips tracked at .06em — tighter than either tracking token.
     --track-caption (.16em) is the nearest; chips read a touch wider here. */
  letter-spacing:var(--track-caption);
  color:var(--ink-dim);
  border:1px solid var(--line);
  border-radius:var(--radius);       /* SQUARED — see report */
  padding:.55rem 1rem;
  transition:transform var(--duration-ui) var(--ease),
             border-color var(--duration-ui) var(--ease),
             color var(--duration-ui) var(--ease),
             background var(--duration-ui) var(--ease),
             transform var(--duration-ui) var(--ease);
}
/* micro-feedback: a click reads as a slight press, select as a slight lift */
.chip:active{transform:scale(.96)}
/* The input stays in the DOM, in flow order, focusable and hit-testable by
   assistive tech — only its native box is hidden. Tab order is therefore the
   markup order, which is the visual order. */
.chip input{
  position:absolute;inset:0;
  width:100%;height:100%;
  margin:0;opacity:0;cursor:pointer;
  -webkit-appearance:none;appearance:none;
}
/* Checked is NOT colour-only: an empty square fills. */
.chip .mark{
  flex:none;width:.6rem;height:.6rem;
  border:1px solid var(--ink-faint);
  border-radius:var(--radius);
  transition:background var(--duration-ui) var(--ease),
             border-color var(--duration-ui) var(--ease),
             transform var(--duration-ui) var(--ease);
}
.chip:has(input:checked){
  border-color:var(--accent);color:var(--accent);
  /* the select lifts the chip a touch off the surface; releasing the state
     (unchecking a materials chip, or moving a radio choice) settles it back
     through the same transition — no separate "unselect" rule needed */
  background:color-mix(in srgb,var(--accent) 7%,transparent);
  transform:translateY(-1px);
}
/* the mark pops in on select: a small overshoot that lands at rest size.
   On unselect the animation simply detaches and the transition above carries
   the mark back to its empty state, so both directions read as one gesture. */
.chip:has(input:checked) .mark{
  background:var(--accent);border-color:var(--accent);
  animation:chip-mark-in var(--duration-ui) var(--ease);
}
@keyframes chip-mark-in{
  0%{transform:scale(.3)}
  55%{transform:scale(1.3)}
  100%{transform:scale(1)}
}
/* --radius:0 squares the marker, which costs the round-radio / square-checkbox
   convention that tells a user "pick one" from "pick any". Restored as a fill
   shape instead of a border shape: the single-choice mark is a ring, the
   multi-choice mark is solid. Nothing rounds, so the flat language holds. */
.roles .chip:has(input:checked) .mark{
  box-shadow:inset 0 0 0 1px var(--bg);
}
.chip:hover{
  border-color:color-mix(in srgb, var(--accent) 55%, transparent);color:var(--ink);
  transform:translateY(-1px) rotate(-.8deg);
}
.chip:has(input:focus-visible){
  outline:2px solid var(--accent);
  outline-offset:3px;
}

/* ---------- submit ---------- */
.submit{
  justify-self:start;
  /* gold ghost (2026-08-13, Matthew): the solid bone fill was the site's only
     filled element and broke the hairline grammar — gold border marks the
     one true action instead */
  background:transparent;color:var(--accent);
  border:1px solid color-mix(in srgb, var(--accent) 65%, transparent);
  border-radius:var(--radius);       /* SQUARED — see report */
  font-family:var(--font-form);
  font-weight:500;
  font-size:calc(var(--text-label) * 1.03);
  letter-spacing:var(--track-caption);
  text-transform:uppercase;
  padding:1rem 2.2rem;
  cursor:pointer;
  transition:background var(--duration-ui) var(--ease),
             border-color var(--duration-ui) var(--ease),
             color var(--duration-ui) var(--ease);
}
.submit:hover{background:color-mix(in srgb, var(--accent) 12%, transparent);border-color:var(--accent)}
.submit:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

.form-note{
  margin:0;
  font-size:calc(var(--text-body) * .85);
  color:var(--ink-faint);
  line-height:1.6;
}
.form-note a{border-bottom:1px solid var(--ink-faint)}
.form-note a:hover{color:var(--ink);border-bottom-color:var(--ink)}
.form-note a:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.form-status{
  margin:0;
  font-size:calc(var(--text-body) * .85);
  color:var(--accent);
  min-height:1.4em;
}
.form-status[data-state="error"]{color:var(--ink)}

/* ---------- scaffold (NOT deliverable — neighbour stand-ins) ---------- */
.scaffold{padding-block:calc(var(--space-section) * 1.6)}
.scaffold p{
  font-family:var(--font-display);font-size:var(--text-label);
  letter-spacing:var(--track-label);text-transform:uppercase;color:var(--ink-faint);
  border-block:1px solid var(--line);padding:1rem 0;margin:0;
}

/* ---------- responsive ---------- */
@media (max-width:900px){
  .access-copy,.access-form{grid-column:1/13}
  .access-form{margin-top:2.6rem}
  .form-row{grid-template-columns:1fr}
}
@media (max-width:480px){
  fieldset{padding:1.1rem 1rem}
  .submit{width:100%;justify-self:stretch;text-align:center}
}

/* Reduced motion is handled by tokens.css, which collapses DURATION rather
   than killing animation — do not add `animation:none` here. */