/* wall.css — the key form (reused on ydid.org from yfile out/landing/wall.css, R318/§311; the ydid host sets the --l-* tokens to the
   estate's goldenratiocolors ladder in ydid.css so the module renders in ysdk.org's language — one language, brief item 4).
   Consumes the page's tokens (--l-paper --l-raised --l-edge --l-rule --l-ink --l-ink2 --l-dim --l-accent --l-accent2
   --l-deny --l-on-accent --l-veil --l-hi, fonts --l-body --l-mono, spacing --yf-s0..s3). Every token has a scheme-aware
   fallback so the module stands alone; a page that defines the tokens wins. Every colour is on the goldenratiocolors
   ladder; the one alpha tint is the page's --l-hi, ladder white at .056 dark and .382 light (the plate's top highlight,
   base #ffffff) - the same declaration the plate itself uses, consumed rather than re-declared (integrator, landing-R318).
   Laws: no viewport units; the component queries its own container (wall / inline-size); every target ≥ 44 px;
   visible focus rings; light and dark; reduced-motion = no transitions at all; forced-colors honoured. */

.wall {
  --w-paper:  var(--l-paper, #0e0e0e);
  --w-raised: var(--l-raised, #252525);
  --w-edge:   var(--l-edge, #3c3c3c);
  --w-rule:   var(--l-rule, #616161);
  --w-ink:    var(--l-ink, #f1f1f1);
  --w-ink2:   var(--l-ink2, #c3c3c3);
  --w-dim:    var(--l-dim, #9e9e9e);
  --w-accent: var(--l-accent, #0061ff);
  --w-accent2: var(--l-accent2, #619eff);
  --w-accent-deep: #003cda;            /* grc037 (0,60,218): the door's fill while the field is empty; white on it 7.9:1 */
  --w-deny:   var(--l-deny, #ff6161);
  --w-on-accent: var(--l-on-accent, #ffffff);
  --w-hi:     var(--l-hi, rgb(255 255 255 / .056));
  --w-body:   var(--l-body, "Atkinson Hyperlegible", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif);
  --w-mono:   var(--l-mono, "JetBrains Mono", ui-monospace, "Cascadia Mono", Menlo, Consolas, monospace);
  --w-s0: var(--yf-s0, 6.111px);
  --w-s1: var(--yf-s1, 9.889px);
  --w-s2: var(--yf-s2, 16px);
  --w-s3: var(--yf-s3, 25.889px);
  --w-r1: var(--yf-r1, 9.889px);
  --w-ctl: 48px;                       /* over the 44 px floor, under the plate's 52 px rhythm */
  --w-ease: .18s ease;

  container: wall / inline-size;
  display: grid;
  gap: var(--w-s1);
  min-inline-size: 0;                  /* as a grid or flex item the form must be allowed to shrink below the field's intrinsic width */
  margin: 0;
  padding-block-start: var(--w-s3);
  border-block-start: 1px solid var(--w-edge);
  font-family: var(--w-body);
  color: var(--w-ink);
  line-height: 1.6;
}
@media (prefers-color-scheme: light) {
  .wall {
    --w-paper:  var(--l-paper, #f1f1ff);
    --w-raised: var(--l-raised, #ffffff);
    --w-edge:   var(--l-edge, #dadada);
    --w-rule:   var(--l-rule, #9e9e9e);
    --w-ink:    var(--l-ink, #00000e);
    --w-ink2:   var(--l-ink2, #3c3c3c);
    --w-dim:    var(--l-dim, #616161);
    --w-accent2: var(--l-accent2, #003cda);
    --w-deny:   var(--l-deny, #c30000);
    --w-hi:     var(--l-hi, rgb(255 255 255 / .382));
  }
}

.wall__say { margin: 0; font-size: 1.125rem; line-height: 1.45; color: var(--w-ink); }

.wall__label {
  display: block; margin-block-start: var(--w-s0);
  font-family: var(--w-mono); font-size: .8125rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: var(--w-dim);
}

.wall__slot { display: flex; gap: var(--w-s1); align-items: stretch; min-inline-size: 0; }

/* the recess — the field is cut INTO the plate: paper-dark ground, a hairline edge, the plate's highlight along its lip */
.wall__input {
  flex: 1 1 0; min-inline-size: 0; min-block-size: var(--w-ctl);   /* zero basis: a password field's intrinsic size=20 width must never widen the slot */
  padding-inline: var(--w-s2);
  font: 400 1.125rem / 1 var(--w-mono); letter-spacing: .12em;
  color: var(--w-ink); background: var(--w-paper); caret-color: var(--w-accent2);
  border: 1px solid var(--w-edge); border-radius: var(--w-r1);
  box-shadow: 0 1px 0 var(--w-hi);
  transition: border-color var(--w-ease);
}
.wall__input:hover { border-color: var(--w-rule); }
.wall__input[aria-invalid="true"] { border-color: var(--w-deny); }
.wall__input:read-only { color: var(--w-dim); }

/* the door — THE ONE FILLED CONTROL in the fold (landing-R318 r3): deep blue while the field is empty (still
   disabled, MERIDIAN semantics), the brand accent the moment it can open. The r2 ghost (dim text on the plate)
   lost to the plate's six accent values; a filled door is what a stranger reads as the way in. */
.wall__open {
  flex: none; display: inline-flex; align-items: center; justify-content: center; gap: var(--w-s0);
  min-block-size: var(--w-ctl); min-inline-size: 44px; padding-inline: var(--w-s3) var(--w-s2);
  font: 500 1rem / 1 var(--w-body); letter-spacing: .01em;
  color: var(--w-on-accent); background: var(--w-accent);
  border: 1px solid var(--w-accent); border-radius: var(--w-r1); cursor: pointer;
  transition: background-color var(--w-ease), border-color var(--w-ease), color var(--w-ease);
}
.wall__open:disabled { color: var(--w-on-accent); background: var(--w-accent-deep); border-color: var(--w-accent-deep); cursor: not-allowed; }
.wall__open:not(:disabled):hover { background: var(--w-accent2); border-color: var(--w-accent2); }
.wall__open:not(:disabled):active { background: var(--w-accent); }
.wall__glyph { inline-size: 1.15em; block-size: 1.15em; flex: none; }

/* the verdict: mono, its line RESERVED FROM FIRST PAINT (landing-R318, carried from the wall loop: the
   :empty collapse let the plate grow 18 px the moment the wall first spoke, moving the footnote and
   everything under the plate). The deny line wraps to two lines below about 30 rem, so the reserve is
   one line at 1.6 and the rule that follows lets a wrapped verdict grow without ever shrinking back. */
.wall__verdict {
  margin: 0; min-block-size: 1.6em;
  font-family: var(--w-mono); font-size: .9375rem; line-height: 1.6;
  color: var(--w-ink2);
  overflow-wrap: anywhere;
}
@container wall (max-width: 33rem) { .wall__verdict { min-block-size: 3.2em; } }
.wall__verdict.is-deny { color: var(--w-deny); }
.wall__verdict.is-accept { color: var(--w-accent2); }

.wall__note { margin: 0; font-size: .8125rem; line-height: 1.55; color: var(--w-dim); max-inline-size: 44ch; }

/* only a truly narrow container (under 18rem, e.g. a 320 px phone) drops the door under the field; at 390 it stays beside the key */
@container wall (max-width: 18rem) {
  .wall__slot { flex-direction: column; }
  .wall__open { inline-size: 100%; }
}

/* focus — accent2 ring (7.2:1 on paper), offset so the recess edge stays visible */
.wall__input:focus-visible, .wall__open:focus-visible { outline: 2px solid var(--w-accent2); outline-offset: 2px; }

/* ---- the crossing: paper darkens to the veil; the plate (the hold element) stays above it ---------------------- */
.wall-veil {
  --w-veil: var(--l-veil, #000000);
  position: fixed; inset: 0; z-index: 20;
  background: var(--w-veil); opacity: 0; visibility: hidden; pointer-events: none;   /* hidden, not merely clear: a fixed box that is not there cannot sit under a safe-area inset (landing-R318, the matrix's safe-area assertion) */
}
@media (prefers-color-scheme: light) { .wall-veil { --w-veil: var(--l-veil, #00000e); } }
html.crossing .wall-veil { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity 1.8s ease-in; }
html.crossing .wall-holds { position: relative; z-index: 21; }

/* ---- reduced motion: no transitions anywhere in the module, the veil lands at once --------------------------- */
@media (prefers-reduced-motion: reduce) {
  .wall__input, .wall__open, html.crossing .wall-veil { transition: none; }
}

/* ---- forced colours ---------------------------------------------------------------------------------------- */
@media (forced-colors: active) {
  .wall { border-block-start-color: CanvasText; }
  .wall__input, .wall__open { border: 1px solid CanvasText; }
  .wall__open:disabled { color: GrayText; border-color: GrayText; }
  .wall__input:focus-visible, .wall__open:focus-visible { outline: 2px solid Highlight; }
  .wall-veil { background: Canvas; }
}