/* Shared compact inputs, type and surfaces from FNDR's brand tokens. */
.lf-fields { display: flex; flex-direction: column; gap: var(--s3); font-family: var(--body); color: var(--ink); }
.lf-fields *, .lf-fields *::before, .lf-fields *::after { box-sizing: border-box; }
.lf-fields [hidden], form [type="submit"][hidden] { display: none !important; }
.lf-reveal { display: flex; flex-direction: column; gap: var(--s3); border: 0; padding: 0; margin: 0; min-width: 0; }
.lf-field { position: relative; }
.lf-field input, .lf-field select, .lf-field textarea { width: 100%; padding: var(--s4) var(--s5); border: 0; border-radius: var(--r-cell); background: var(--paper-2); color: var(--ink); font: inherit; font-size: var(--t-body); line-height: 1.5; outline: none; transition: background var(--d-micro) var(--ease), box-shadow var(--d-micro) var(--ease); }
.lf-field input:focus, .lf-field select:focus, .lf-field textarea:focus { background: var(--paper); box-shadow: inset 0 0 0 1px var(--blue); }
.lf-field label { display: block; margin-bottom: var(--s2); color: var(--ink-70); font-size: var(--t-label); line-height: 1.5; }
.lf-field textarea { resize: vertical; min-height: 6rem; }
.lf-field select { appearance: auto; }
.lf-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s3); }
.lf-hint { color: var(--ink-45); font-size: var(--t-label); margin: calc(var(--s2) * -1) 0 0; }
.lf-pick { border: 0; padding: 0; margin: 0; min-width: 0; }
.lf-pick legend { color: var(--ink-70); font-size: var(--t-label); margin-bottom: var(--s2); }
.lf-choices { display: flex; flex-wrap: wrap; gap: var(--s2); }
.lf-choice { position: relative; flex: 1 1 auto; cursor: pointer; }
.lf-choice input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.lf-choice span { display: flex; align-items: center; justify-content: center; min-height: var(--s7); padding: var(--s3) var(--s4); border-radius: var(--r-cell); background: var(--paper-2); color: var(--ink-70); font-size: var(--t-body); line-height: 1.4; text-align: center; transition: background var(--d-micro) var(--ease), box-shadow var(--d-micro) var(--ease); }
.lf-choice input:checked + span, .lf-choice input:focus-visible + span { background: var(--paper); color: var(--ink); box-shadow: inset 0 0 0 1px var(--blue); }
@media (hover: hover) { .lf-choice:hover span { background: var(--paper); color: var(--ink); box-shadow: inset 0 0 0 1px var(--blue); } }
.lf-enter { animation: lf-rise var(--d-comp) var(--ease) both; }
@keyframes lf-rise { from { opacity: 0; transform: translateY(var(--s3)); } to { opacity: 1; transform: translateY(0); } }
.hq .hq-card { border-radius: var(--r-cell); background: var(--paper); padding: var(--s6); box-shadow: none; font-family: var(--body); color: var(--ink); }
.hq .hq-title { font-family: var(--display); font-size: var(--t-h2); font-weight: var(--w-head); color: var(--ink); margin-bottom: var(--s5); }
.hq .hq-submit { margin-top: var(--s5); background: var(--paper-2); color: var(--ink); border: 1px solid var(--line); border-radius: var(--r-pill); font-weight: var(--w-head); }
.hq .hq-submit:hover, .hq .hq-submit:focus-visible { background: var(--paper); border-color: var(--blue); outline: 0; }
.hq .hq-error { color: var(--err); }
.hq .hq-foot { color: var(--ink-45); font-weight: var(--w-body); }
@media (max-width: 560px) {
  .lf-row { grid-template-columns: 1fr; }
  .lf-fields, .lf-reveal { gap: var(--s4); }
  .lf-choices { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .lf-choice span { padding-inline: var(--s2); }
  .lf-field input, .lf-field select, .lf-field textarea { padding: var(--s3) var(--s4); min-height: var(--s7); scroll-margin-block: var(--s7); }
  .lf-field textarea { min-height: var(--s10); }
  dialog.rm-dialog { width: calc(100% - var(--s4)); max-width: none; max-height: calc(100dvh - var(--s4)); overscroll-behavior: contain; }
  dialog.hq[open] { max-height: 100dvh; overflow: hidden; }
  .hq .hq-wrap { padding: var(--s2); }
  .hq .hq-card { max-height: calc(100dvh - var(--s4)); overscroll-behavior: contain; }
  .hq .hq-card, .rm-dialog .rm-form { padding: var(--s6) var(--s4) calc(var(--s5) + env(safe-area-inset-bottom)); }
  .hq .hq-title { padding-right: var(--s7); }
  .hq .hq-close, .rm-dialog .rm-close { width: var(--s7); height: var(--s7); top: var(--s2); right: var(--s2); }
  form:has(.lf-fields) [type="submit"] { width: 100%; min-height: var(--s7); }
}
@media (prefers-reduced-motion: reduce) { .lf-enter { animation: none; } .lf-fields input, .lf-choice span { transition: none; } }

.lf-field input.lf-invalid, .lf-field select.lf-invalid, .lf-field textarea.lf-invalid, .lf-choice input.lf-invalid + span { box-shadow: inset 0 0 0 1px var(--err); }
form [type="submit"].lf-submit-error { color: var(--err) !important; border-color: var(--err) !important; box-shadow: inset 0 0 0 1px var(--err); animation: lf-signal var(--d-comp) var(--ease); }
form [type="submit"].lf-submit-error .lbl { color: var(--err) !important; }
form [type="submit"].lf-submit-error::before { clip-path: circle(0 at 50% 50%) !important; }
@keyframes lf-signal { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(calc(var(--s1) * -1)); } 50% { transform: translateX(var(--s1)); } }
@media (prefers-reduced-motion: reduce) { form [type="submit"].lf-submit-error { animation: none; } }

.hq[open] { max-height: calc(100svh - var(--s5)); overflow-y: auto; }