/* HOUSE RULES: BUTTONS AND FORM FIELDS, the same in every Wildcard app. Source: wildcardsvc/house-rules (web/controls.css). Apps carry a
   copy (public/controls.css, or public/portal/controls.css) made by `house-rules sync`: never edit the copy. It needs tokens.css and takes
   the app's colour through --accent, --accent-hover, --on-accent and --focus. The portal's pages are the reference.

   An app may position a button or a field (margin, width, flex, grid, align) but not restyle one: no colour, background, border,
   radius, shadow, padding, height or font on `.btn*`, on a bare input/select/textarea, or on the field classes below. The check fails it.

   Buttons:  .btn (the one primary action: the accent), .btn--ghost (any other action), .btn--danger (a quiet destructive action),
             .btn--red (the confirming destructive action), + .btn--sm (the one small size), .btn--lg (a big tap target), .btn--icon (square, icon only),
             .btn--block (full width). Put an icon first or last inside; it is 18px and nudges on hover.
   Fields:   div.field > label, input | select | textarea, p.field__help, p.field__err. A checkbox row is label.check.
             A code field (six digits) is input.input--code. */

/* ---------- buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 14px 24px; border: 0; border-radius: var(--radius-md);
  background: var(--accent); color: var(--on-accent); font: var(--fw-bold) var(--fs-body)/1.2 var(--font-body); text-decoration: none; cursor: pointer;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .08) inset, 0 10px 30px -10px color-mix(in srgb, var(--accent) 90%, transparent);
  transition: background .2s ease, transform .2s ease, box-shadow .2s ease;
}
.btn:hover { background: var(--accent-hover); transform: translateY(-2px); }
.btn svg { flex: none; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s ease; }
.btn:hover svg { transform: translateX(3px); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .6; cursor: not-allowed; transform: none; }
.btn[aria-busy="true"] { opacity: .75; cursor: progress; }
.btn--ghost { background: rgba(240, 238, 245, .04); color: var(--text); box-shadow: 0 0 0 1px var(--line-strong) inset; }
.btn--ghost:hover { background: rgba(240, 238, 245, .09); }
.btn--ghost[aria-expanded="true"], .btn--ghost[aria-pressed="true"] { background: rgba(240, 238, 245, .12); }
.btn--danger { background: transparent; color: #f3b3b3; box-shadow: 0 0 0 1px rgba(240, 120, 120, .5) inset; }
.btn--danger:hover { background: rgba(240, 120, 120, .12); }
.btn--red { background: var(--danger); color: #fff; box-shadow: none; }
.btn--red:hover { background: var(--danger-hover); }
.btn--lg { min-height: 52px; padding: 0 16px; } /* a big tap target, for a button pressed all day (Cardea's tally page) */
.btn--sm { height: 36px; padding: 0 14px; border-radius: var(--radius-sm); }
.btn--sm:not(.btn--ghost):not(.btn--danger) { box-shadow: none; }
.btn--sm svg { width: 16px; height: 16px; }
.btn--icon { width: 36px; padding: 0; }
.btn--block { width: 100%; }
.btn--block:hover svg, .btn--icon:hover svg { transform: none; }
@media (prefers-reduced-motion: reduce) { .btn, .btn svg { transition: none; } .btn:hover, .btn:hover svg { transform: none; } }

/* ---------- form fields (selectors are wrapped in :where() so a control has element-level specificity: an app's own contextual rule, such as
   `.fix-cell input[type=number]`, always wins over this base) */
.field { display: grid; gap: 6px; min-width: 0; margin: 0; padding: 0; border: 0; }
.field > label, .field > legend, .field > .field__label { padding: 0; font-size: var(--fs-body); font-weight: var(--fw-bold); }
.field__help { margin: 0; font-size: var(--fs-small); font-weight: 400; color: var(--fog); }
.field__err { margin: 0; font-size: var(--fs-small); font-weight: var(--fw-bold); color: var(--danger-text); }
.field__err:empty { display: none; }
input:where(:not([type="checkbox"], [type="radio"], [type="file"], [type="range"], [type="color"], [type="hidden"], [type="submit"], [type="button"])), select, textarea {
  padding: 12px 14px; border: 1px solid var(--steel); border-radius: var(--radius-sm); background: var(--ink); color: var(--text);
  font: inherit; transition: border-color .2s ease, box-shadow .2s ease;
}
.field :where(input:not([type="checkbox"], [type="radio"], [type="file"], [type="range"], [type="color"], [type="hidden"]), select, textarea), .authform :where(input:not([type="checkbox"])) { width: 100%; max-width: 100%; }
textarea { min-height: 4.5rem; resize: vertical; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--focus); box-shadow: 0 0 0 4px color-mix(in srgb, var(--focus) 25%, transparent); }
input::placeholder, textarea::placeholder { color: var(--fog); opacity: 1; }
input:disabled, select:disabled, textarea:disabled { opacity: .6; cursor: not-allowed; }
input[readonly], textarea[readonly] { opacity: .8; cursor: default; }
input[type="checkbox"], input[type="radio"] { flex: none; width: 1.1rem; height: 1.1rem; padding: 0; accent-color: var(--focus); }
.field.is-bad input, .field.is-bad select, .field.is-bad textarea { border-color: #e06b6b; box-shadow: 0 0 0 3px rgba(224, 107, 107, .25); }
.check { display: flex; align-items: center; gap: 10px; font-weight: 400; cursor: pointer; }
.input--code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 1.6rem; letter-spacing: .3em; text-align: center; }