/* controls.css — kiểu dùng chung cho mọi điều khiển (IR-15, ADR-017 mục 4–6, AC-38)
   Mỗi loại có đủ sáu trạng thái: thường · rê (:hover) · nhấn (:active) · focus bàn phím (:focus-visible, viền 2 px) ·
   đang bật hoặc đang chọn (aria-pressed, aria-selected, :checked, [open]) · tắt (:disabled, giảm độ đậm, con trỏ thường).
   test_dieu_khien.py quét file này: thiếu trạng thái nào là đỏ. Mọi giá trị lấy từ tokens.css; bóng chỉ var(--elev-float).
   Loại:  button (nút chữ) · .ib (nút chỉ có biểu tượng, cần aria-label và data-tip) · .switch (công tắc có nhãn, thay ô tick) ·
          .tabs [role=tab] (thẻ) · summary (mục mở rộng) · ô nhập (input chữ, select, textarea, .field) · .tip, .hint (tooltip, gợi ý)
   Công tắc: <label class="switch"><input type="checkbox" role="switch" id="…"><span>Nhãn</span></label>
   — vẫn là ô tick nên module cũ đọc .checked như trước; trình đọc màn hình đọc "công tắc, bật/tắt" kèm nhãn. */

/* ---------------------------------------------------------------- nút chữ */
button{
  border:1px solid var(--color-surface-grid-line);background:var(--color-surface-page);color:var(--color-text-primary);
  border-radius:var(--radius-btn);padding:6px 10px;font:inherit;cursor:pointer;
  min-height:var(--size-hit-min);min-width:var(--size-hit-min);
  transition:background-color var(--motion-fast) var(--ease-out),border-color var(--motion-fast) var(--ease-out),color var(--motion-fast) var(--ease-out),transform var(--motion-fast) var(--ease-out);
}
button:hover{background:var(--color-gray-100);border-color:var(--color-gray-300)}
button:active{background:var(--color-gray-200);transform:scale(.97)}
button:focus-visible{outline:2px solid var(--color-flow-stroke);outline-offset:2px}
button[aria-pressed="true"]{background:var(--color-accent-bg);border-color:var(--color-flow-stroke);color:var(--color-accent-ink)}
button[aria-pressed="true"]:hover{background:color-mix(in srgb,var(--color-accent-bg),var(--color-flow-stroke) 14%)}
button:disabled,button[aria-disabled="true"]{opacity:.4;cursor:default;transform:none;background:var(--color-surface-page);border-color:var(--color-surface-grid-line)}
button.primary{background:var(--color-flow-stroke);border-color:var(--color-flow-stroke);color:var(--color-text-inverse)}
button.primary:hover{background:color-mix(in srgb,var(--color-flow-stroke),var(--color-accent-ink) 50%)}
button.primary:active{background:var(--color-accent-ink)}
button.primary:disabled{background:var(--color-flow-stroke);color:var(--color-text-inverse)}

/* ---------------------------------------------------------------- biểu tượng (icons.js) */
.icon{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;vertical-align:middle}

/* ---------------------------------------------------------------- nút chỉ có biểu tượng: vùng bấm 36 px (tối thiểu 32 px) */
.ib{
  --ib-size:36px;width:var(--ib-size);height:var(--ib-size);min-width:32px;min-height:32px;padding:0;
  display:inline-grid;place-items:center;border:1px solid transparent;border-radius:var(--radius-btn);
  background:transparent;color:var(--color-text-secondary);
}
.ib:hover{background:var(--color-gray-100);border-color:transparent;color:var(--color-text-primary)}
.ib:active{background:var(--color-gray-200);transform:scale(.92)}
.ib:focus-visible{outline:2px solid var(--color-flow-stroke);outline-offset:2px}
.ib[aria-pressed="true"],.ib[aria-expanded="true"]{background:var(--color-accent-bg);border-color:transparent;color:var(--color-flow-stroke)}
.ib[aria-pressed="true"]:hover,.ib[aria-expanded="true"]:hover{background:color-mix(in srgb,var(--color-accent-bg),var(--color-flow-stroke) 14%)}
.ib:disabled{opacity:.35;cursor:default;transform:none;background:transparent}
/* nút phát: tròn 44 px, nền tím, biểu tượng đặc */
.ib.play{--ib-size:44px;border-radius:var(--radius-pill);background:var(--color-flow-stroke);color:var(--color-text-inverse)}
.ib.play .icon{width:20px;height:20px;fill:currentColor}
.ib.play:hover{background:color-mix(in srgb,var(--color-flow-stroke),var(--color-accent-ink) 50%);color:var(--color-text-inverse)}
.ib.play:active{background:var(--color-accent-ink)}
.ib.play[aria-pressed="true"]{background:var(--color-flow-stroke);color:var(--color-text-inverse)}
.ib.play:disabled{background:var(--color-flow-stroke)}
/* nút chữ ngắn trong thanh điều khiển, ví dụ tốc độ 1× */
.ib.txt{width:auto;padding:0 10px;font-weight:var(--font-weight-semibold);font-variant-numeric:tabular-nums}
/* nút nổi trên bản đồ: nền trắng, bóng nổi */
.ib.float{background:var(--color-surface-page);box-shadow:var(--elev-float)}

/* ---------------------------------------------------------------- công tắc có nhãn (thay ô tick, IR-15) */
.switch{display:inline-flex;align-items:center;gap:var(--space-1);min-height:32px;padding:0 var(--space-half);border-radius:var(--radius-btn);cursor:pointer;color:var(--color-text-secondary);font-size:var(--font-size-label)}
.switch input{
  appearance:none;-webkit-appearance:none;position:relative;flex:none;margin:0;width:34px;height:20px;border-radius:var(--radius-pill);
  background:var(--color-gray-400);cursor:pointer;transition:background-color var(--motion-fast) var(--ease-out);
}
.switch input::before{
  content:"";position:absolute;top:3px;left:3px;width:14px;height:14px;border-radius:50%;background:var(--color-surface-page);
  transition:transform var(--motion-fast) var(--ease-out),width var(--motion-fast) var(--ease-out);
}
.switch:hover{color:var(--color-text-primary)}
.switch:hover input,.switch input:hover{background:var(--color-gray-500)}
.switch input:active::before{width:18px}
.switch input:focus-visible{outline:2px solid var(--color-flow-stroke);outline-offset:2px}
.switch input:checked{background:var(--color-flow-stroke)}
.switch input:checked::before{transform:translateX(14px)}
.switch input:checked:active::before{transform:translateX(10px)}
.switch:hover input:checked,.switch input:checked:hover{background:var(--color-accent-ink)}
.switch input:disabled,.switch:has(input:disabled){opacity:.4;cursor:default}

/* ---------------------------------------------------------------- thẻ (tablist; main.js gắn ← → Home End) */
.tabs [role=tab]{min-height:44px;padding:0 12px;border:0;border-bottom:3px solid transparent;border-radius:0;background:transparent;color:var(--color-text-secondary)}
.tabs [role=tab]:hover{background:var(--color-gray-50);border-bottom-color:var(--color-gray-300);color:var(--color-text-primary)}
.tabs [role=tab]:active{background:var(--color-gray-100);transform:none}
.tabs [role=tab]:focus-visible{outline:2px solid var(--color-flow-stroke);outline-offset:-2px}
.tabs [role=tab][aria-selected="true"]{border-bottom-color:var(--color-flow-stroke);color:var(--color-text-primary);font-weight:var(--font-weight-semibold)}
.tabs [role=tab]:disabled,.tabs [role=tab][aria-disabled="true"]{opacity:.4;cursor:default;background:transparent}

/* ---------------------------------------------------------------- mục mở rộng (details > summary) */
summary{cursor:pointer;font-weight:var(--font-weight-semibold);min-height:var(--size-hit-min);padding:var(--space-half) var(--space-half);border-radius:var(--radius-md);transition:background-color var(--motion-fast) var(--ease-out)}
summary:hover{background:var(--color-gray-100);color:var(--color-text-primary)}
summary:active{background:var(--color-gray-200)}
summary:focus-visible{outline:2px solid var(--color-flow-stroke);outline-offset:2px}
details[open]>summary{color:var(--color-text-primary)}
summary[aria-disabled="true"]{opacity:.4;cursor:default;pointer-events:none}

/* ---------------------------------------------------------------- ô nhập: chữ, chọn, nhiều dòng */
input[type=text],input[type=search],input:not([type]),select,textarea,.field{
  font:inherit;color:var(--color-text-primary);background:var(--color-surface-page);
  border:1px solid var(--color-surface-grid-line);border-radius:var(--radius-lg);padding:5px 8px;min-height:var(--size-hit-min);
  transition:border-color var(--motion-fast) var(--ease-out);
}
input[type=text]:hover,input[type=search]:hover,input:not([type]):hover,select:hover,textarea:hover,.field:hover{border-color:var(--color-gray-400)}
input[type=text]:active,input[type=search]:active,input:not([type]):active,select:active,textarea:active,.field:active{border-color:var(--color-gray-500)}
input:focus-visible,select:focus-visible,textarea:focus-visible,.field:focus-visible{outline:2px solid var(--color-flow-stroke);outline-offset:2px}
/* đang nhập hoặc đang mở danh sách: viền tím */
input[type=text]:focus,input[type=search]:focus,input:not([type]):focus,select:focus,textarea:focus,.field:focus{border-color:var(--color-flow-stroke)}
input:disabled,select:disabled,textarea:disabled,.field:disabled{opacity:.5;cursor:default;background:var(--color-gray-50)}
input[type=range]{accent-color:var(--color-flow-stroke);min-height:var(--size-hit-min);cursor:pointer}
input[type=range]:focus-visible{outline:2px solid var(--color-flow-stroke);outline-offset:2px}
input[type=checkbox]{accent-color:var(--color-flow-stroke)}
input[type=checkbox]:focus-visible{outline:2px solid var(--color-flow-stroke);outline-offset:2px}

a:focus-visible{outline:2px solid var(--color-flow-stroke);outline-offset:2px}

/* ---------------------------------------------------------------- tooltip (controls.js, WCAG 1.4.13) và gợi ý lần đầu */
.tip,.hint{
  position:fixed;z-index:40;max-width:320px;background:var(--color-text-primary);color:var(--color-text-inverse);
  font-size:var(--font-size-label);line-height:var(--font-line-height-label);border-radius:var(--radius-lg);box-shadow:var(--elev-float);
  opacity:0;transform:translateY(4px);transition:opacity var(--motion-fast) var(--ease-out),transform var(--motion-fast) var(--ease-out);
}
.tip{padding:6px 9px;white-space:nowrap}
.hint{padding:var(--space-1) 12px;pointer-events:none;transition-duration:var(--motion-base)}
.hint::after{content:"";position:absolute;left:18px;bottom:-5px;width:10px;height:10px;background:var(--color-text-primary);transform:rotate(45deg)}
.tip.on,.hint.on{opacity:1;transform:none}
.tip kbd,.hint kbd{font:inherit;font-weight:var(--font-weight-semibold);background:color-mix(in srgb,var(--color-text-inverse) 16%,transparent);border-radius:var(--radius-md);padding:1px 5px}

.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Giảm chuyển động (ADR-017 mục 3, AC-40): tắt mọi hiệu ứng CSS; ?motion=on (lớp force-motion) giữ lại để duyệt */
@media (prefers-reduced-motion: reduce){
  html:not(.force-motion) *,html:not(.force-motion) *::before,html:not(.force-motion) *::after{transition:none!important;animation:none!important}
}