/* ══════════════════════════════════════════════════════════════════════════
   I AM — MICRO-INTERACTION LAYER  (shared across every page)

   A calibrated hierarchy, most of the weight in the first two tiers:
     · SUBTLE       quiet, site-wide feedback (press, focus, underline, tags)
     · INTERACTIVE  deliberate responses on key affordances (magnetic CTAs,
                    cursor-aware cards, image depth, nav-on-scroll)
     · CINEMATIC    reserved moments (hero word-reveal; the homepage's pinned
                    scroll scenes live in index.html)

   Builds on the tokens + base classes each page already defines inline, so
   every var() resolves. Pure enhancement: each effect degrades to a usable
   static control. Motion is gated behind (prefers-reduced-motion:no-preference);
   anything cursor-driven additionally requires a fine pointer.
   ══════════════════════════════════════════════════════════════════════ */

:root{
  --mi-ease: cubic-bezier(.22,1,.36,1);
  --mi-ease-out: cubic-bezier(.16,1,.3,1);
}

/* ══════════ SUBTLE ═══════════════════════════════════════════════════════ */

/* Tactile press — every button-like control acknowledges the tap */
@media (prefers-reduced-motion: no-preference){
  .abtn, button, .chip, .helpopt, .sdot,
  [data-freq], [data-amt], [data-method]{
    transition: transform .18s var(--mi-ease), background-color .25s ease,
                border-color .25s ease, color .25s ease, box-shadow .25s ease;
  }
  button:not(:disabled):active,
  .chip:active, .helpopt:active, .sdot:active,
  [data-freq]:active, [data-amt]:active, [data-method]:active{ transform: scale(.96); }
  .abtn:active, a.abtn:active{ transform: scale(.97); }
}

/* Segmented toggles / chips — smooth the .on / .active state change instead of
   snapping (these pages toggle those classes from their own scripts) */
.chip, [data-freq], [data-amt], [data-method], .helpopt, .seg-opt, .sdot{
  transition: background-color .25s ease, color .25s ease,
              border-color .25s ease, box-shadow .25s ease;
}

/* Tag hover */
@media (prefers-reduced-motion: no-preference){
  .tag-outline{ transition: background-color .25s ease, color .25s ease; }
  .tag-outline:hover{ background: color-mix(in srgb, var(--color-accent) 12%, transparent); }
}

/* A center-growing underline for standout inline links (opt-in) */
.mi-undl-c{
  background-image: linear-gradient(var(--color-accent), var(--color-accent));
  background-repeat: no-repeat; background-position: 50% 100%; background-size: 0% 1.5px;
  transition: background-size .4s var(--mi-ease);
}
.mi-undl-c:hover{ background-size: 100% 1.5px; }

/* Form controls — .field-input in styles.css owns the full surface, depth and
   focus treatment now, so nothing is redeclared here. This is only the
   fallback ring for a stray control that isn't on the component yet. */
:is(input, select, textarea):not(.field-input):focus-visible{
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent) 22%, transparent);
}

/* Image hover depth — the framed plate warms & the fill eases in a touch.
   Zoom is skipped on ken-burns fills (.ks) to avoid a transform tug-of-war. */
@media (prefers-reduced-motion: no-preference) and (pointer: fine){
  .plate{ overflow: hidden; transition: filter .45s var(--mi-ease); }
  .plate .img-slot{ transition: transform .6s var(--mi-ease); }
  .lift:hover .plate, a:hover > .plate, .mi-img:hover .plate{
    filter: sepia(.18) saturate(.9) contrast(1.06) brightness(1.05);
  }
  .lift:hover .plate .img-slot:not(.ks),
  .mi-img:hover .plate .img-slot:not(.ks){ transform: scale(1.05); }
}

/* ══════════ INTERACTIVE ══════════════════════════════════════════════════ */

/* Cards respond to the cursor — the drop shadow leans away from the pointer.
   --mi-sx / --mi-sy are written per-card by micro.js (fine pointer only). */
@media (prefers-reduced-motion: no-preference) and (pointer: fine){
  .lift{ --mi-sx: 0; --mi-sy: 0; }
  .lift:hover{
    box-shadow: calc(var(--mi-sx) * 10px) calc(12px + var(--mi-sy) * 10px) 34px
                color-mix(in srgb, #2d2b2b 22%, transparent);
  }
}

/* Magnetic buttons — micro.js adds .mi-magnetic to filled primary CTAs and
   drives transform; the snappy override keeps the pull from feeling laggy */
.mi-magnetic{ transition: transform .22s var(--mi-ease-out); will-change: transform; }

/* Navigation condenses & grounds itself once you leave the top */
.topnav{ transition: padding .3s var(--mi-ease), box-shadow .3s ease, background-color .3s ease; }
.topnav.mi-nav-scrolled{
  padding-top: 12px !important; padding-bottom: 12px !important;
  background: color-mix(in srgb, var(--color-bg) 92%, transparent) !important;
  box-shadow: 0 1px 0 var(--color-divider), 0 8px 24px color-mix(in srgb, #2d2b2b 9%, transparent);
  backdrop-filter: blur(10px);
}

/* ══════════ CHROME + CINEMATIC ═══════════════════════════════════════════ */

/* Scroll progress — a hairline of accent along the very top */
.mi-progress{
  position: fixed; top: 0; left: 0; height: 2px; width: 0;
  background: linear-gradient(90deg, var(--color-accent), var(--color-accent-400));
  z-index: 60; pointer-events: none;
  transition: width .1s linear;
}

/* Hero word-reveal (opt-in via micro.js on a page's lead H1) */
.mi-reveal-w{ display: inline-block; }
@media (prefers-reduced-motion: no-preference){
  .mi-reveal .mi-reveal-w{
    opacity: 0; transform: translateY(.5em);
    animation: mi-word-in .7s var(--mi-ease-out) forwards;
    animation-delay: calc(var(--mi-i, 0) * 55ms);
  }
}
@keyframes mi-word-in{ to{ opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce){
  .mi-progress{ transition: none; }
}

/* ══════════════════════════════════════════════════════════════════════════
   FORM FIELDS — the one input surface for the whole site.

   Lives here because micro.css is the only stylesheet every page links, and
   it loads last, so this wins over the tokens each page inlines. (styles.css
   in this repo is an unused leftover from the original design export — no
   page references it.)

   Markup contract:
     <div class="field">                    … or .field.field--wide in a grid
       <label>Email <span class="req">*</span></label>
       <input class="field-input" type="email" placeholder="you@email.com">
       <span class="field__help">Helper text</span>
     </div>

   Variants: --select, --area, --amount, --display, --inline, --lead/--trail.
   States:   :hover, :focus, filled (:not(:placeholder-shown) or .is-filled),
             .is-error / .is-success on the wrapper, or aria-invalid on the
             control. No page declares field CSS of its own.

   Theming: every token below derives from the --color- and --radius- tokens a
   theme already redefines, so fields re-skin per theme for free. A theme that
   needs more (e.g. Phase 1's dark field surface) overrides these with
   `:root:root{…}` — that extra specificity is required because theme files
   load BEFORE this one.
   ══════════════════════════════════════════════════════════════════════ */

:root{
  --field-radius: var(--radius-md);

  /* Surface: deliberately off-background so the edge has contrast to sit on */
  --field-bg: var(--color-neutral-100);
  --field-bg-hover: color-mix(in srgb, var(--field-bg) 88%, #fff);
  --field-bg-filled: var(--field-bg);
  --field-text: var(--color-text);
  --field-placeholder: color-mix(in srgb, var(--color-text) 40%, transparent);
  --field-label: color-mix(in srgb, var(--color-text) 62%, transparent);
  --field-border: color-mix(in srgb, var(--color-text) 22%, transparent);
  --field-border-hover: color-mix(in srgb, var(--color-text) 38%, transparent);
  --field-accent: var(--color-accent);
  --field-error: #b3261e;
  --field-success: #2e6f4e;

  /* `ink` is the color the depth is built from; `sheen` is the lit bottom
     edge that sells the field as a physical, recessed surface. */
  --field-ink: #2d2b2b;
  --field-sheen: rgba(255,255,255,.78);

  /* Spacing — intentionally loose. Nothing here should read as cramped. */
  --field-pad-y: 15px;
  --field-pad-x: 18px;
  --field-font: 16px;
  --field-label-gap: 10px;
  --field-msg-gap: 9px;
  --field-row-gap: 26px;
  --field-col-gap: 32px;
  --field-icon-gap: 28px;

  /* Depth composites. The crisp 1px ring is listed first so it paints on top
     of the blurred recess instead of being washed out by it. */
  --field-depth:
    inset 0 0 0 1px var(--field-border),
    inset 0 2px 4px color-mix(in srgb, var(--field-ink) 14%, transparent),
    0 1px 0 var(--field-sheen),
    0 2px 5px color-mix(in srgb, var(--field-ink) 7%, transparent);
  --field-depth-hover:
    inset 0 0 0 1px var(--field-border-hover),
    inset 0 2px 5px color-mix(in srgb, var(--field-ink) 17%, transparent),
    0 1px 0 var(--field-sheen),
    0 4px 10px color-mix(in srgb, var(--field-ink) 10%, transparent);
  --field-depth-filled:
    inset 0 0 0 1px var(--field-border-hover),
    inset 0 2px 3px color-mix(in srgb, var(--field-ink) 10%, transparent),
    0 1px 0 var(--field-sheen),
    0 2px 6px color-mix(in srgb, var(--field-ink) 8%, transparent);
  --field-depth-focus:
    inset 0 0 0 1px var(--field-accent),
    inset 0 2px 6px color-mix(in srgb, var(--field-ink) 19%, transparent),
    0 0 0 4px color-mix(in srgb, var(--field-accent) 22%, transparent),
    0 7px 18px color-mix(in srgb, var(--field-ink) 14%, transparent);
  --field-depth-error:
    inset 0 0 0 1px var(--field-error),
    inset 0 2px 5px color-mix(in srgb, var(--field-ink) 14%, transparent),
    0 0 0 4px color-mix(in srgb, var(--field-error) 17%, transparent),
    0 4px 12px color-mix(in srgb, var(--field-error) 14%, transparent);
  --field-depth-success:
    inset 0 0 0 1px var(--field-success),
    inset 0 2px 5px color-mix(in srgb, var(--field-ink) 14%, transparent),
    0 0 0 4px color-mix(in srgb, var(--field-success) 15%, transparent),
    0 4px 12px color-mix(in srgb, var(--field-success) 12%, transparent);

  /* Encoded whole so a theme can recolor the chevron in one override. */
  --field-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23605d5d' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}

/* — layout: stacked fields, and the two-up grid the longer forms use — */
.field{ display: block; margin-bottom: var(--field-row-gap); }
.field:last-child{ margin-bottom: 0; }

.field-grid{
  display: grid;
  /* minmax(0,…) keeps a long value from forcing its column wider than track */
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--field-row-gap) var(--field-col-gap);
}
.field-grid > .field{ margin-bottom: 0; }
.field--wide{ grid-column: 1 / -1; }

/* — label — */
/* :not(.field-check) so a checkbox's own label keeps its sentence-case,
   flex-row treatment instead of being styled as a field label */
.field > label:not(.field-check),
.field__label{
  display: block;
  font-family: var(--font-body);
  font-size: 12px; font-weight: 600; line-height: 1.45;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--field-label);
  margin: 0 0 var(--field-label-gap);
  transition: color .25s ease;
}
.field:focus-within > label:not(.field-check),
.field:focus-within > .field__label{ color: var(--field-accent); }
.field .req{ color: var(--field-accent); }
/* An inline "(optional)" reads as prose, not as part of the label */
.field label .subtle{
  text-transform: none; letter-spacing: 0; font-weight: 400;
  color: color-mix(in srgb, var(--color-text) 45%, transparent);
}

/* — the control — */
.field-input{
  display: block; width: 100%; box-sizing: border-box;
  font-family: var(--font-body);
  font-size: var(--field-font); line-height: 1.5;
  color: var(--field-text);
  /* background-color, not the shorthand — the select variant layers a
     background-image chevron on top of this. */
  background-color: var(--field-bg);
  border: none;               /* the border is a layered inset ring, see above */
  border-radius: var(--field-radius);
  padding: var(--field-pad-y) var(--field-pad-x);
  box-shadow: var(--field-depth);
  transition: box-shadow .28s var(--mi-ease),
              background-color .28s ease,
              transform .28s var(--mi-ease);
}
.field-input::placeholder{ color: var(--field-placeholder); opacity: 1; }

@media (hover: hover){
  .field-input:hover:not(:disabled):not(:focus){
    background-color: var(--field-bg-hover);
    box-shadow: var(--field-depth-hover);
  }
}

.field-input:focus,
.field-input:focus-visible{
  outline: none;
  background-color: var(--field-bg-hover);
  box-shadow: var(--field-depth-focus);
  transform: translateY(-1px);
}

/* Filled — a settled, still-active look once there's content in the well */
.field-input:not(:placeholder-shown):not(:focus),
.field-input.is-filled:not(:focus){
  background-color: var(--field-bg-filled);
  box-shadow: var(--field-depth-filled);
}

/* Validity — wrapper modifier or aria-invalid, whichever the page carries */
.field.is-error .field-input,
.field-input[aria-invalid="true"]{
  box-shadow: var(--field-depth-error);
  background-color: color-mix(in srgb, var(--field-error) 5%, var(--field-bg));
}
.field.is-error > label:not(.field-check){ color: var(--field-error); }
.field.is-success .field-input{
  box-shadow: var(--field-depth-success);
  background-color: color-mix(in srgb, var(--field-success) 5%, var(--field-bg));
}
.field.is-success > label:not(.field-check){ color: var(--field-success); }

.field-input:disabled{
  cursor: not-allowed; opacity: .55; transform: none;
  box-shadow: inset 0 0 0 1px var(--field-border);
}

/* Keep autofill on our own surface instead of the browser's yellow */
.field-input:-webkit-autofill,
.field-input:-webkit-autofill:hover,
.field-input:-webkit-autofill:focus{
  -webkit-text-fill-color: var(--field-text);
  -webkit-box-shadow: var(--field-depth), inset 0 0 0 100px var(--field-bg);
  caret-color: var(--field-text);
}

/* — helper / error / success messages: each gets its own air — */
.field__help, .field__error, .field__success{
  display: block; margin: var(--field-msg-gap) 0 0;
  font-family: var(--font-body); font-size: 13px; line-height: 1.5;
  letter-spacing: 0; text-transform: none;
}
.field__help{ color: color-mix(in srgb, var(--color-text) 55%, transparent); }
.field__error{ color: var(--field-error); font-weight: 600; }
.field__success{ color: var(--field-success); font-weight: 600; }

/* — leading / trailing icons, held well clear of the text — */
.field__control{ position: relative; display: block; }
.field__icon{
  position: absolute; top: 50%; transform: translateY(-50%);
  display: grid; place-items: center; pointer-events: none;
  color: color-mix(in srgb, var(--color-text) 55%, transparent);
  transition: color .25s ease;
}
.field__icon--lead{ left: var(--field-pad-x); }
.field__icon--trail{ right: var(--field-pad-x); }
.field__control:focus-within .field__icon{ color: var(--field-accent); }
.field-input--lead{ padding-left: calc(var(--field-pad-x) + var(--field-icon-gap)); }
.field-input--trail{ padding-right: calc(var(--field-pad-x) + var(--field-icon-gap)); }

/* — variants — */
.field-input--select{
  appearance: none; -webkit-appearance: none; cursor: pointer;
  padding-right: calc(var(--field-pad-x) + var(--field-icon-gap));
  background-image: var(--field-chevron);
  background-repeat: no-repeat;
  background-position: right var(--field-pad-x) center;
  background-size: 15px 15px;
}
.field-input--select:disabled{ cursor: not-allowed; }

textarea.field-input,
.field-input--area{ min-height: 148px; line-height: 1.65; resize: vertical; }

/* The give page's amount well — display type, room for the leading glyph */
.field-input--amount{ font-family: var(--font-heading); font-size: 26px; line-height: 1.3; }
.field-input--display{ font-family: var(--font-heading); }

/* A control that sits in a row rather than filling its container */
.field-input--inline{ width: auto; min-width: 220px; }

/* The native date picker button needs a visible affordance and some room */
.field-input::-webkit-calendar-picker-indicator{
  opacity: .5; cursor: pointer; margin-left: var(--space-2);
  transition: opacity .2s ease;
}
.field-input:hover::-webkit-calendar-picker-indicator,
.field-input:focus::-webkit-calendar-picker-indicator{ opacity: 1; }

/* — checkbox / radio: matched ink, never crowding their own label — */
.field-check{
  display: flex; align-items: center; gap: var(--space-3);
  font-size: 14px; line-height: 1.5; letter-spacing: 0; text-transform: none;
  color: var(--color-text); cursor: pointer;
}
.field-check input[type="checkbox"],
.field-check input[type="radio"]{
  flex: none; width: 18px; height: 18px;
  accent-color: var(--field-accent); cursor: pointer;
}

/* Narrow screens: the two-up grid collapses; padding stays generous */
@media (max-width: 640px){
  .field-grid{ grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce){
  .field-input, .field > label, .field__label, .field__icon{ transition: none !important; }
  .field-input:focus, .field-input:focus-visible{ transform: none; }
}