/* ═══ controls ═════════════════════════════════════════════════════════════ */
/* Selected by role, never by [type=text]: an `<input list=…>` carries no type
   attribute and would silently fall through to the browser default. */
input:not([type=checkbox]):not([type=radio]):not([type=hidden]), select {
  display:block; width:100%; padding:7px 11px;
  font-family:var(--ds-font-sans); font-size:var(--ds-fs-sm); line-height:1.45;
  height:var(--ds-control-h);                    /* height, not min-height */
  border:1px solid var(--ds-border-field); border-radius:var(--ds-radius);
  background:var(--ds-surface-2); color:var(--ink-1);
  transition:border-color var(--ds-dur-fast), box-shadow var(--ds-dur-fast);
}
textarea {
  display:block; width:100%; padding:11px 13px; line-height:1.7;
  font-family:var(--ds-font-mono); font-size:var(--ds-fs-xs);
  min-height:var(--ds-control-h); resize:vertical;
  border:1px solid var(--ds-border-field); border-radius:var(--ds-radius);
  background:var(--ds-surface-2); color:var(--ink-1);
}
textarea.prose { font-family:var(--ds-font-sans); font-size:var(--ds-fs-sm); }
input::placeholder, textarea::placeholder { color:var(--ink-3); }
input:focus, select:focus, textarea:focus {
  outline:none; border-color:var(--ds-accent); box-shadow:0 0 0 3px var(--ds-accent-wash);
}
input:disabled, select:disabled { background:var(--ds-surface-3); color:var(--ink-3); }
label { display:block; font-size:var(--ds-fs-xs); font-weight:600; color:var(--ink-2); margin:0 0 5px; }
.field { margin-bottom:14px; }
.row { display:flex; gap:12px; } .row > * { flex:1; min-width:0; }
/* A two-letter language code does not need half the row. */
.row > .narrow { flex:0 0 96px; }
.check { display:inline-flex; gap:7px; align-items:center; font-size:var(--ds-fs-sm);
  font-weight:600; color:var(--ink-1); margin:0; cursor:pointer; }
.check input { width:auto; height:auto; accent-color:var(--ds-accent); }
.toolbar { display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
/* Shared form rhythm. Opt in only for controls, never manuscript prose. */
.form-stack { display:flex; flex-direction:column; gap:20px; min-width:0; }
.form-stack > * { margin-block:0; min-width:0; }
.form-stack > .btn { align-self:flex-start; }
.form-stack > .row > .field { margin-bottom:0; }
.form-stack > :is(h3,h4) + p { margin-top:-12px; }
.form-stack > .toolbar { align-items:center; }
.form-stack > .toolbar > .hint { flex:1 1 260px; line-height:1.7; }
.form-stack > :is(div,p):empty { display:none; }
.form-stack .form-actions { border-top:1px solid var(--ds-border); padding-top:20px; }
.form-stack details > summary { min-height:44px; padding-block:12px; cursor:pointer; line-height:1.6; }
.form-stack details[open] > summary + * { margin-top:16px; }
.form-stack .disclosure-body { padding-block:4px; }
.form-stack label { margin-bottom:8px; }

/* buttons. busy ≠ disabled: disabled = "you may not press this" (flat, inert);
   busy = "your press landed" (full fill, locked width, dots). */
.btn {
  appearance:none; position:relative; display:inline-flex; align-items:center;
  justify-content:center; gap:7px;
  border:1px solid var(--ds-accent-strong); background:var(--ds-accent-strong);
  color:var(--ds-on-accent);
  font-family:var(--ds-font-sans); font-size:var(--ds-fs-sm); font-weight:600;
  padding:7px 17px; min-height:var(--ds-control-h);
  border-radius:var(--ds-radius); cursor:pointer;
  transition:background var(--ds-dur-fast), border-color var(--ds-dur-fast),
             color var(--ds-dur-fast), transform var(--ds-dur-press);
}
.btn { text-decoration:none; }
a.btn { color:var(--ds-on-accent); }
a.btn.ghost, a.btn.secondary { color:var(--ds-accent-text); }
.btn:hover:not(:disabled) { background:var(--ds-accent-hover); border-color:var(--ds-accent-hover); }
.btn:active:not(:disabled):not([aria-busy="true"]) { transform:scale(.975); }
.btn:focus-visible { outline:none; box-shadow:0 0 0 3px var(--ds-accent-wash); }
.btn:disabled { background:var(--ds-surface-3); border-color:var(--ds-border);
  color:var(--ink-3); opacity:1; cursor:not-allowed; }
.btn[aria-busy="true"] { cursor:progress; pointer-events:none; }
.btn-content { display:grid; min-width:0; text-align:center; }
.btn-content > * { grid-area:1 / 1; align-self:center; justify-self:center; min-width:0; }
.btn-progress { display:inline-flex; align-items:center; justify-content:center; gap:7px; visibility:hidden; }
.btn[aria-busy="true"] .btn-content > .btn-label { visibility:hidden; }
.btn[aria-busy="true"] .btn-progress { visibility:visible; }
.btn-dots { display:inline-flex; flex-shrink:0; gap:4px; }
.btn-dots i { width:5px; height:5px; border-radius:50%; background:currentColor;
  animation:btn-dot .3s var(--ds-ease-out) infinite alternate; }
.btn-dots i:nth-child(2) { animation-delay:.1s; }
.btn-dots i:nth-child(3) { animation-delay:.2s; }
@keyframes btn-dot { from{opacity:.2;transform:scale(.8);} to{opacity:1;transform:scale(1);} }
.btn.secondary { background:var(--ds-surface-2); color:var(--ds-accent-text); border-color:var(--ds-border-default); }
.btn.secondary:hover:not(:disabled) { background:var(--ds-surface-2); border-color:var(--ds-accent); }
.btn.ghost { background:transparent; color:var(--ink-2); border-color:var(--ds-border-default); }
.btn.ghost:hover:not(:disabled) { background:var(--ds-surface-2); color:var(--ink-1); border-color:var(--ds-border-strong); }
.btn.sm { min-height:var(--ds-control-h-sm); padding:3px 11px; font-size:var(--ds-fs-xs); }
.btn.lg { min-height:var(--ds-control-h-lg); padding:11px 24px; font-size:var(--ds-fs-body); }
.btn.block { width:100%; }

input[type=hidden] { display:none; }
@media(prefers-reduced-motion:reduce) { .btn-dots i { animation:none; } }
.template-preview {margin-block:16px 24px;padding:20px;border:1px solid var(--ds-border);border-radius:10px;background:var(--ds-surface-2);min-width:0;overflow-wrap:anywhere;}
.template-preview h3 {font-size:18px;line-height:1.5;margin:0 0 8px;}
.template-preview h4 {font-size:14px;margin:20px 0 10px;}
.template-preview p {margin:8px 0;line-height:1.7;}
.template-preview ol {display:flex;flex-wrap:wrap;gap:10px 32px;padding-left:24px;margin:12px 0 20px;}
.template-preview li {padding-left:2px;line-height:1.6;max-width:100%;}

/* Compact symbols retain full touch targets and accessible action names. */
.btn.icon-only,.iconbtn.icon-only {width:44px;min-width:44px;height:44px;min-height:44px;padding:10px;flex:0 0 44px;}
.icon-only svg {display:block;flex-shrink:0;}
.btn.icon-only .btn-content {width:20px;}
.btn.icon-only .btn-progress {gap:0;}
.btn.icon-only.danger {background:transparent;border-color:transparent;color:var(--ds-danger-fg);}
.btn.icon-only.danger:hover:not(:disabled) {background:var(--ds-danger-bg);border-color:var(--ds-danger-fg);color:var(--ds-danger-fg);}
.btn.icon-only.danger:focus-visible {outline:2px solid var(--ds-danger-fg);outline-offset:2px;box-shadow:none;}
.btn.icon-only.danger:disabled {background:var(--ds-surface-3);border-color:var(--ds-border);color:var(--ink-3);}
.record-actions {display:flex;gap:8px;align-items:center;flex-wrap:wrap;}