/* Shared building blocks; the access page supplies layout and state mappings. */
.panel { background: var(--panel-800); border: var(--border-thin) solid var(--line-500); border-radius: var(--radius-md); }
.icon { width: var(--icon-standard); height: var(--icon-standard); flex: 0 0 var(--icon-standard); fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: square; stroke-linejoin: miter; }
.eyebrow { font: var(--weight-medium) var(--fs-12)/var(--lh-ui) var(--font-data); letter-spacing: var(--tracking-label); text-transform: uppercase; }
.field { display: grid; gap: var(--sp-2); }
label { display: block; color: var(--text-200); font-size: var(--fs-14); font-weight: var(--weight-medium); }
input, select { width: 100%; min-width: 0; min-height: var(--control-height); padding: var(--sp-3) var(--sp-4); color: var(--text-100); background: var(--bg-900); border: var(--border-thin) solid var(--steel-500); border-radius: var(--radius-sm); transition: border-color var(--motion-fast) ease-out; }
input { font-family: var(--font-data); }
input:hover:not(:disabled), select:hover { border-color: var(--text-400); }
input:focus { border-color: var(--amber-500); outline: var(--border-strong) solid var(--amber-400); outline-offset: var(--sp-1); }
input[aria-invalid="true"] { border: var(--border-strong) solid var(--red-500); }
input[aria-invalid="true"]:focus { border-color: var(--amber-500); }
input:disabled { color: var(--text-400); background: var(--bg-850); cursor: default; }
.field-error { color: var(--text-100); font-size: var(--fs-14); padding-left: var(--sp-3); border-left: var(--border-strong) solid var(--red-500); }
.button { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-3); min-height: var(--control-height); padding: var(--sp-3) var(--sp-4); border: var(--border-thin) solid var(--steel-500); border-radius: var(--radius-sm); font-weight: var(--weight-semibold); line-height: var(--lh-ui); transition: background-color var(--motion-fast) ease-out; }
.button-primary { width: 100%; justify-content: space-between; background: var(--amber-500); color: var(--bg-950); border-color: var(--amber-500); font-size: var(--fs-18); letter-spacing: var(--tracking-label); }
.button-primary:hover:not(:disabled) { background: var(--amber-400); border-color: var(--amber-400); }
.button-primary:active:not(:disabled) { background: var(--amber-500); }
.button:disabled { background: var(--panel-750); border-color: var(--line-500); color: var(--text-400); cursor: default; }
.button-secondary { background: var(--bg-850); color: var(--text-200); font-size: var(--fs-14); }
.button-secondary:hover { background: var(--panel-750); border-color: var(--text-400); }
.status { display: flex; align-items: flex-start; gap: var(--sp-3); padding: var(--sp-4); background: var(--bg-900); border: var(--border-thin) solid var(--line-600); border-left: var(--border-strong) solid var(--status-color, var(--steel-500)); }
.status-icon { color: var(--status-color, var(--text-400)); margin-top: var(--sp-1); }
.status-title { font-size: var(--fs-14); font-weight: var(--weight-medium); color: var(--text-100); }
.status-detail { margin-top: var(--sp-1); color: var(--text-400); font-size: var(--fs-14); }
@media (forced-colors: active) {
  .button, input, select, .panel, .status { border: var(--border-strong) solid ButtonText; }
  :focus-visible, input:focus { outline-color: Highlight; }
}