/* ============================================================================
   INDEX CLINIC, HOLDING PAGE
   Built in the design system's own vocabulary rather than in generic form
   controls wearing Index colours. Verified against live v15.8, not against the
   2 September extraction, which is wrong in two places (see the mark height
   and the eyebrow below).

   CANVAS: BONE. This page runs on the light canvas, which changes one thing
   that is not obvious. Persimmon measures 2.45 on Bone and fails, so it cannot
   be the error colour here. Wisteria at 4.59 is the only accent in the closed
   set that is both legible on Bone and reads as a warning, so it carries the
   error state. Midnight passes at 10.72 but reads as a heading, not an alert.

   WHAT CHANGED, AND WHY

   1. The three lanes are .ic-rows / .ic-row, the system's indexed row.
      Selected is not a new state I invented: it is the hover state the system
      already defines, made persistent. The rule draws itself across, the
      numeral goes to full ink, the surface lifts. Nothing new was designed.

   2. Fields lost their boxes. The system has no containers in its vocabulary,
      it has hairlines, rules and type. So a field is a mono label above a
      hairline, which is the same construction as .ic-spec and .ic-rows.

   3. The status dot is gone. The register is a mono label and a hairline,
      which is how v15 opens every section.

   4. The tick in a circle is gone. The confirmation is a rule, a mono label
      and display type, which is what the system does everywhere else.

   5. The consent control is a hairline square. Not on the radius scale means
      no radius, rather than a value invented for it.

   Colour, type, motion and radius are unchanged, because those were never the
   problem. The shapes were.
   ========================================================================= */

@font-face{
  font-family:'Aeion Mono';
  src:url('../fonts/AeionMono-Regular.woff') format('woff');
  font-weight:400;font-style:normal;font-display:swap;
}

/* ---------------------------------------------------------------------------
   SHELL, unchanged from variant A
   ------------------------------------------------------------------------ */

.ic-hold{min-height:100svh;display:flex}
.ic-hold-in{
  flex:1;max-width:980px;width:100%;margin:0 auto;
  display:grid;grid-template-rows:auto 1fr auto;
  gap:clamp(24px,3.4vh,40px);
  padding-top:clamp(24px,3.2vh,36px);
  padding-bottom:clamp(20px,2.6vh,30px);
}
.ic-hold-body{align-self:center;display:grid;gap:clamp(18px,2.2vw,26px);width:100%}
/* 34px header, 44px footer. Both read straight out of live v15.8, where
   .mark img is 34px and .ft .mark img is 44px. index-ds.css says 22px, which
   is wrong against the page it was extracted from. */
.ic-mark img{height:34px}
/* The wordmark is the way back to the page, and the only one from the
   confirmation panel. It has to behave as a link without reading as one. */
.ic-mark-home{display:inline-block;text-decoration:none;border:0}
.ic-mark-home:focus-visible{outline:2px solid var(--ic-focus,#2c2a28);outline-offset:4px}
.ic-mark--ft img{height:44px}

.ic-head{display:grid;gap:clamp(10px,1.2vw,14px);max-width:620px}
.ic-head h1{max-width:22ch;text-wrap:balance}

/* The register, matched to live v15.8 rather than to the extraction.
   v15.8 defines .eyebrow as display:block with a margin and nothing else, and
   uses it seven times as a mono, dimmed, middot separated line. The trailing
   hairline I had here was my invention and is not in the homepage. */
.ic-eyebrow{display:block;margin-bottom:clamp(12px,1.6vw,18px)}

.ic-hold-ft{
  display:flex;flex-wrap:wrap;gap:8px 24px;align-items:baseline;
  border-top:1px solid var(--ic-line);
  padding-top:clamp(14px,1.8vw,20px);
}
.ic-hold-ft a{text-decoration:none;min-height:24px;display:inline-flex;align-items:center}
.ic-hold-ft a:hover{text-decoration:underline;text-underline-offset:3px}
.ic-hold-ft .ic-sep{margin-left:auto}

.ic-stack{display:grid;gap:clamp(24px,3vw,40px)}
.ic-prose{display:grid;gap:1em}


/* ---------------------------------------------------------------------------
   FORM
   ------------------------------------------------------------------------ */

.icf{display:grid;gap:clamp(18px,2vw,24px)}
.icf[data-show="false"]{display:none}

/* --- lanes, as indexed rows --- */
.icf-lanes{border:0;padding:0;margin:0;min-width:0}
.icf-lanes legend{position:absolute;left:-9999px}

.icf-lane{cursor:pointer}
.icf-lane input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}

/* Selected is the system's own hover state, held open. The rule that draws
   itself across on hover simply stays drawn. */
.icf-lane[data-on="true"]{background-color:var(--ic-surface)}
.icf-lane[data-on="true"]::before{width:100%}
.icf-lane[data-on="true"] .ic-row-n{color:var(--ic-ink-full)}
.icf-lane input:focus-visible ~ .ic-row-n{outline:2px solid var(--ic-focus);outline-offset:4px}

.icf-mark{opacity:0;transition:opacity .3s var(--ic-ease);white-space:nowrap;padding-top:6px}
.icf-lane[data-on="true"] .icf-mark{opacity:1}

/* the row's own padding is tuned for a content section, not a control */
.icf-lane.ic-row{padding:clamp(14px,1.5vw,18px) 0}

/* --- fields, hairline rather than box --- */
.icf-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(20px,2.4vw,32px)}
.icf-f{display:grid;gap:2px;min-width:0}
.icf-f[hidden]{display:none}
.icf-f label{color:var(--ic-ink-mute)}
.icf-opt{text-transform:none;letter-spacing:.04em}

.icf-f input{
  font-family:var(--ic-f-body);font-size:18px;font-weight:300;line-height:1.5;
  color:var(--ic-ink-full);
  background:none;
  border:0;border-bottom:1px solid var(--ic-line);
  border-radius:0;
  padding:10px 0 11px;
  width:100%;min-height:44px;
  transition:border-color .25s var(--ic-ease);
  -webkit-appearance:none;appearance:none;
}
.icf-f input::placeholder{color:var(--ic-ink-mute);opacity:1}
.icf-f input:hover,.icf-f input:focus{border-bottom-color:currentColor;outline:none}
.icf-f input:focus-visible{outline:2px solid var(--ic-focus);outline-offset:4px}

/* --- validation. Wisteria, because this is the Bone canvas. Persimmon
       measures 2.45 here and would fail. Colour is never the only signal:
       every error also carries a mono message and aria-invalid. --- */
.icf-err{
  font-family:var(--ic-f-mono);font-size:var(--ic-t-label);
  text-transform:uppercase;letter-spacing:.12em;line-height:1.4;
  color:var(--ic-wisteria);display:none;padding-top:6px;
}
.icf-f[data-invalid="true"] .icf-err{display:block}
.icf-f[data-invalid="true"] input{border-bottom-color:var(--ic-wisteria);box-shadow:inset 0 -1px 0 var(--ic-wisteria)}

/* --- consent --- */
.icf-consent{display:grid;gap:6px}
.icf-check{display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:start;cursor:pointer}
.icf-check input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.icf-box{
  width:18px;height:18px;margin-top:3px;flex:none;
  border:1px solid var(--ic-line);position:relative;
  transition:border-color .25s var(--ic-ease),background-color .25s var(--ic-ease);
}
.icf-box::after{
  content:'';position:absolute;left:5px;top:1px;width:5px;height:10px;
  border-right:1px solid var(--ic-bone);border-bottom:1px solid var(--ic-bone);
  transform:rotate(45deg) scale(.5);opacity:0;
  transition:opacity .25s var(--ic-ease),transform .25s var(--ic-ease);
}
.icf-check input:checked ~ .icf-box{border-color:var(--ic-charcoal);background-color:var(--ic-charcoal)}
.icf-check input:checked ~ .icf-box::after{opacity:1;transform:rotate(45deg)}
.icf-check input:focus-visible ~ .icf-box{outline:2px solid var(--ic-focus);outline-offset:3px}
.icf-consent[data-invalid="true"] .icf-box{border-color:var(--ic-wisteria)}
.icf-consent .icf-err{padding-left:32px}

.icf-hp{position:absolute;left:-9999px;top:-9999px;width:1px;height:1px;overflow:hidden}

.icf-go{display:flex;flex-wrap:wrap;align-items:center;gap:14px 20px;padding-top:4px}
.icf-go .ic-btn--fill[data-busy="true"]{opacity:.6;pointer-events:none}

.icf-note{border-left:2px solid var(--ic-wisteria);padding-left:13px;display:none}
.icf-note[data-show="true"]{display:block}

/* --- confirmation. A rule, a label, and type. No circle, no tick. --- */
.icf-done{display:none}
.icf-done[data-show="true"]{display:grid;gap:12px}
.icf-done-rule{height:1px;background-color:var(--ic-ink-full);width:64px}

/* Below 1023 the system collapses .ic-row to two columns and the selected
   marker loses its own cell. Selection is then carried by the top rule, the
   tint and the numeral, which are three quiet signals rather than one clear
   one. Give the word its own line instead. */
@media (max-width:1023px){
  .icf-mark{grid-column:1 / -1;padding-top:2px}
}

@media (max-width:600px){
  .icf-row{grid-template-columns:1fr;gap:22px}
  .icf-go{align-items:stretch}
  .icf-go .ic-btn{width:100%}
  .ic-hold-ft .ic-sep{margin-left:0}
  .ic-head h1{max-width:none}
}

/* Target for /waitlist, /join, /practitioners and /partners, which vercel.json
   redirects to #register. Zero height so it changes no layout, but focusable
   so a keyboard user who follows one of those links lands on the form rather
   than back at the top of the document. */
.icf-anchor { display: block; height: 0; scroll-margin-top: clamp(24px, 6vw, 64px); }

/* Footer social row. Text links rather than platform glyphs, so the footer
   carries no third party brand colour. rel="me" on each link is a machine
   readable claim that the profile and this site are the same entity. */
.ic-hold-soc{flex-basis:100%;display:flex;flex-wrap:wrap;gap:8px 16px;margin-top:14px}