/* ============================================================ anchor-input · styles.css (XUR-legal, gate-clean) ------------------------------------------------------------ The locked field: capsule shape · glass depth · ember focus/hover, plus the required-empty ALARM state (ember flood + ring). Gate rules honoured (same as anchor-action-buttons): • no :root, no theme tokens defined here • NO rgb()/rgba()/hsl()/hex — all translucency is color-mix • every class / keyframe prefixed `acn-inp` • JS-toggled STATE classes use the prefix-hyphen form (.acn-inp-alarm, .acn-inp-shake) — not .is-* • root element carries the bare `.acn-inp` class The inner top-light is composed into a local (--acn-inp-inner) so focus / hover / alarm can stack their rings ON TOP of it instead of replacing it. ============================================================ */ /* root — paste self-defense */ .acn-inp{ position:relative; display:inline-flex; font-family:var(--font-body); color:var(--text-strong); } /* ---- select variant. The chevron is a MASK, not an inline-coloured SVG: the glyph supplies only alpha, the colour comes from a theme token, so nothing hard-codes a stroke. `black` inside a mask is the sanctioned idiom. ---- */ .acn-inp--select .acn-inp__field{ appearance:none; -webkit-appearance:none; cursor:pointer; padding-right:34px; } .acn-inp--select::after{ content:""; position:absolute; right:14px; top:50%; width:10px; height:7px; transform:translateY(-50%); pointer-events:none; background-color:var(--text-dim); -webkit-mask:url("data:image/svg+xml;utf8,") no-repeat center / contain; mask:url("data:image/svg+xml;utf8,") no-repeat center / contain; transition:background-color .2s var(--ease); } .acn-inp--select:hover::after{ background-color:var(--accent); } /* the dropdown list itself is painted by the platform, not by the capsule - hand it the surface it belongs to, or it opens white-on-white */ .acn-inp--select option{ background-color:var(--surface-2); color:var(--text-strong); } /* ---- size modifiers. TYPE only: the capsule, the plate, the border and every state stay exactly as the base declares them. Reach for one of these instead of restyling a field from a page. --lg the identity field a record is named by --figure a right-aligned tabular money figure ---- */ .acn-inp--lg .acn-inp__field{ font-size:15px; font-weight:500; letter-spacing:-.01em; } .acn-inp--figure .acn-inp__field{ font-family:var(--font-mono); font-size:20px; font-weight:500; letter-spacing:-.015em; text-align:right; padding-right:18px; font-variant-numeric:tabular-nums; } /* ---- prefix / suffix adornment — a muted $ or % pinned INSIDE the field, the way the app actually ships (index.html's .field__prefix / .field__suffix), instead of a symbol floating OUTSIDE the box. The label root is position:relative; the affix is absolute and the field takes padding so the value never slides under it. Michael 2026-07-12: bring the mockups in line with the real app + the standard money/percent adornment convention. ---- */ .acn-inp__pre, .acn-inp__post{ position:absolute; top:50%; transform:translateY(-50%); z-index:1; pointer-events:none; font-family:var(--font-mono); font-size:13px; line-height:1; color:var(--text-dim); } .acn-inp__pre{ left:15px; } .acn-inp__post{ right:15px; } .acn-inp--pre .acn-inp__field{ padding-left:27px; } .acn-inp--post .acn-inp__field{ padding-right:27px; } .acn-inp__field{ --acn-inp-inner:inset 0 1px 0 color-mix(in srgb, var(--text-strong) 12%, transparent); width:100%; font-family:inherit; font-size:var(--field-size); font-weight:var(--field-weight); line-height:1.2; padding:7px 15px; border:1px solid var(--border); border-radius:var(--r-pill); background:color-mix(in srgb, var(--surface-2) 92%, transparent); backdrop-filter:blur(30px) saturate(2.2); -webkit-backdrop-filter:blur(30px) saturate(2.2); color:var(--text-strong); box-shadow:var(--acn-inp-inner); outline:none; transition:border-color .2s var(--ease), box-shadow .2s var(--ease), background-color .2s var(--ease); } .acn-inp__field::placeholder{ color:var(--text-dim); } /* hover — ember: gold border + soft ring + lift glow */ .acn-inp__field:hover{ border-color:var(--accent); box-shadow:var(--acn-inp-inner), 0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent), 0 10px 30px -12px color-mix(in srgb, var(--accent) 45%, transparent); } /* focus — gold border + crisp ring */ .acn-inp__field:focus{ border-color:var(--accent); box-shadow:var(--acn-inp-inner), 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); } /* ---- required-empty ALARM (JS-toggled) — a glowing coal: body flood + inner glow + ring + drop, all in --bad ---- */ .acn-inp__field.acn-inp-alarm{ border-color:var(--bad); box-shadow:var(--acn-inp-inner), inset 0 0 13px 1px color-mix(in srgb, var(--bad) 30%, transparent), inset 0 0 0 999px color-mix(in srgb, var(--bad) 8%, transparent), 0 0 0 2px color-mix(in srgb, var(--bad) 32%, transparent), 0 12px 30px -12px color-mix(in srgb, var(--bad) 50%, transparent); } .acn-inp__field.acn-inp-alarm:focus{ box-shadow:var(--acn-inp-inner), inset 0 0 13px 1px color-mix(in srgb, var(--bad) 30%, transparent), inset 0 0 0 999px color-mix(in srgb, var(--bad) 8%, transparent), 0 0 0 3px color-mix(in srgb, var(--bad) 22%, transparent), 0 12px 30px -12px color-mix(in srgb, var(--bad) 50%, transparent); } /* error shake (JS-toggled once, then removed) */ @keyframes acn-inp-shake{ 0%,100%{ transform:translateX(0) } 14%{ transform:translateX(-6px) } 28%{ transform:translateX(6px) } 44%{ transform:translateX(-4px) } 60%{ transform:translateX(4px) } 78%{ transform:translateX(-2px) } } .acn-inp__field.acn-inp-shake{ animation:acn-inp-shake .45s var(--ease); } @media (prefers-reduced-motion: reduce){ .acn-inp__field{ transition:none; } .acn-inp__field.acn-inp-shake{ animation:none; } }