/* チェックボックスの共通描画。設計: ../docs/design-system.md。元の CSS と同じ位置で読み込む。 */
input[type="checkbox"] {
    appearance: none; -webkit-appearance: none; flex: none; margin: 0;
    width: 18px; height: 18px; display: inline-grid; place-content: center;
    background: var(--surface); border: 1.5px solid var(--checkbox-border, var(--grid)); border-radius: 5px;
    cursor: pointer; transition: background .12s, border-color .12s;
  }

input[type="checkbox"]::before {
    content: ""; width: 11px; height: 11px; transform: scale(0);
    background: var(--accent-ink); transition: transform .12s ease-out;
    clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0, 43% 62%);
  }

input[type="checkbox"]:checked { background: var(--accent); border-color: var(--accent); }

input[type="checkbox"]:checked::before { transform: scale(1); }

input[type="checkbox"]:hover:not(:disabled) { border-color: var(--accent); }

input[type="checkbox"]:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

input[type="checkbox"]:disabled { opacity: .45; cursor: not-allowed; }