/* Hộp thoại chọn lớp ("thiết lập hồ sơ giảng dạy", web/picker.js) và phần "Hồ sơ giảng dạy" của tab Tài khoản.
   docs/superpowers/specs/2026-10-01-class-picker.md. Hộp thoại mở được cả trên màn Sân khấu (trang chủ) lẫn màn Xưởng ("Bài giảng của tôi" ngay sau khi đăng ký, tab Tài khoản),
   mà luật `.stage dialog` chỉ có ở Sân khấu, nên mọi luật của hộp này nằm dưới #dialog.picker (lớp do picker.js đặt khi mở và gỡ khi đóng) với biến màu và cỡ chữ riêng:
   hình dạng của các hộp thoại khác và của màn Xưởng không đổi. Nhận diện Sân khấu: nền giấy, viền mực 2px, bo 14px, bóng cứng, không blur, không bóng mờ.
   Cỡ chữ đi qua --s-fs, --s-fs-title, --s-fs-note, --s-fs-tag (cùng bốn biến của web/site.css) nên nút "Aa" tới được mọi chữ; không viết px cố định cho chữ. */
#dialog.picker{--pk-ink:#253c37;--pk-paper:#fffbf0;--pk-teal:#117768;--pk-muted:#4a5d56;--pk-pale:#dff3ec;--pk-lift:3px 3px 0 #253c37;--pk-lift-sm:2px 2px 0 #253c37;
  --pk-b1:#ffd24d;--pk-b2:#7fe0b5;--pk-b3:#86c5ff;--pk-b4:#ff9f80;--pk-b5:#c3a6ff;--pk-b6:#ff9fc0;
  --s-fs:16px;--s-fs-title:17px;--s-fs-note:14px;--s-fs-tag:12px;
  width:min(480px,calc(100vw - 24px));max-width:none;max-height:calc(100vh - 24px);max-height:calc(100dvh - 24px);padding:0;overflow-x:hidden;overflow-y:auto;
  border:2px solid var(--pk-ink);border-radius:14px;background:var(--pk-paper);color:var(--pk-ink);box-shadow:var(--pk-lift);font-size:var(--s-fs);line-height:1.6}
.large-text #dialog.picker{--s-fs:18px;--s-fs-title:19px;--s-fs-note:16px;--s-fs-tag:14px}
#dialog.picker[open]{display:flex;flex-direction:column}
#dialog.picker::backdrop{background:#19392c66;backdrop-filter:none}
#dialog.picker #dialog-body{display:flex;flex-direction:column;flex:1 1 auto;min-height:0}
#dialog.picker .pk{display:flex;flex-direction:column;flex:1 1 auto;min-height:0}

/* Đầu hộp: nhãn bước, nút đóng, thanh tiến độ, tiêu đề và dòng phụ. Đầu và chân đứng yên, chỉ thân cuộn. */
#dialog.picker .pk-head{flex:none;padding:14px 18px 12px;border-bottom:2px solid var(--pk-ink);background:var(--pk-paper)}
#dialog.picker .pk-top{display:flex;align-items:center;justify-content:space-between;gap:12px}
#dialog.picker .pk-step{margin:0;padding:3px 12px;border:2px solid var(--pk-ink);border-radius:99px;background:#ffe3a8;color:var(--pk-ink);font-size:var(--s-fs-tag);font-weight:800;letter-spacing:.06em;text-transform:uppercase;line-height:1.5}
#dialog.picker .pk-close{flex:none;display:grid;place-items:center;width:44px;height:44px;margin:-4px -6px -4px 0;padding:0;border:2px solid var(--pk-ink);border-radius:12px;background:#fff;color:var(--pk-ink);font:inherit;font-size:calc(var(--s-fs-title) + 9px);font-weight:900;line-height:1;box-shadow:var(--pk-lift-sm);cursor:pointer}
/* Thanh tiến độ gồm từng đoạn (một đoạn mỗi bước): phần đã tới là màu ngọc, phần chưa tới là trắng, viền mực cả hai. Không chữ, không chuyển động. */
#dialog.picker .pk-progress{display:flex;gap:6px;margin:10px 0 12px}
#dialog.picker .pk-seg{flex:1 1 0;height:12px;border:2px solid var(--pk-ink);border-radius:99px;background:#fff}
#dialog.picker .pk-seg.is-on{background:var(--pk-teal)}
#dialog.picker .pk-title{margin:0;color:var(--pk-ink);font-size:calc(var(--s-fs-title) + 5px);font-weight:900;line-height:1.3;letter-spacing:-.2px;outline:none}
#dialog.picker .pk-title:focus-visible{outline:3px solid var(--pk-ink);outline-offset:3px}
#dialog.picker .pk-sub{margin:4px 0 0;color:var(--pk-muted);font-size:var(--s-fs);line-height:1.5}

/* Thân: các hàng chọn lớn. Cuộn trong hộp khi cao hơn màn hình; đệm 8px để vòng focus và bóng của hàng đầu và cuối không bị cắt. */
/* min-height: thân không bị ép còn vài chục px khi đầu và chân cao (giãn chữ WCAG 1.4.12, chữ lớn ở 320px); khi đầu + thân + chân vẫn cao hơn màn hình thì cả hộp cuộn (overflow-y:auto của hộp), không có gì bị cắt. Bình thường chân vừa màn hình và chỉ thân cuộn. */
#dialog.picker .pk-body{flex:1 1 auto;min-height:8.5rem;overflow-y:auto;overscroll-behavior:contain;padding:14px 18px 12px}
#dialog.picker .pk-list{display:grid;gap:10px;padding:0 4px 4px 0}
#dialog.picker .pk-row{display:flex;align-items:center;gap:12px;width:100%;min-height:60px;padding:8px 12px;border:2px solid var(--pk-ink);border-radius:14px;background:#fff;color:var(--pk-ink);font:inherit;text-align:left;box-shadow:var(--pk-lift-sm);cursor:pointer}
#dialog.picker .pk-row:hover{background:#fffdf7}
/* Hàng đã chọn: viền ngọc dày (viền 2px và vòng trong 2px), nền ngọc nhạt, và dấu tích trong ô tròn (hộp kiểm: ô vuông): không chỉ dựa vào màu. */
#dialog.picker .pk-row[aria-checked=true]{border-color:var(--pk-teal);background:var(--pk-pale);box-shadow:inset 0 0 0 2px var(--pk-teal),var(--pk-lift-sm)}
#dialog.picker .pk-row:focus-visible,#dialog.picker .pk-btn:focus-visible,#dialog.picker .pk-close:focus-visible{outline:3px solid var(--pk-ink);outline-offset:3px}
#dialog.picker .pk-icon{flex:none;width:44px;height:44px;object-fit:contain}
#dialog.picker .pk-badge{flex:none;display:grid;place-items:center;width:44px;height:44px;border:2px solid var(--pk-ink);border-radius:50%;color:var(--pk-ink);font-size:var(--s-fs-title);font-weight:900;line-height:1}
#dialog.picker .pk-badge svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
#dialog.picker .pk-b1{background:var(--pk-b1)}#dialog.picker .pk-b2{background:var(--pk-b2)}#dialog.picker .pk-b3{background:var(--pk-b3)}
#dialog.picker .pk-b4{background:var(--pk-b4)}#dialog.picker .pk-b5{background:var(--pk-b5)}#dialog.picker .pk-b6{background:var(--pk-b6)}
#dialog.picker .pk-text{display:grid;flex:1 1 auto;min-width:0}
#dialog.picker .pk-text strong{font-size:var(--s-fs-title);font-weight:900;line-height:1.3;overflow-wrap:anywhere}
#dialog.picker .pk-text span{color:var(--pk-muted);font-size:var(--s-fs-note);font-weight:600;line-height:1.5}
#dialog.picker .pk-row[aria-checked=true] .pk-text span{color:var(--pk-muted)}
#dialog.picker .pk-mark{flex:none;display:grid;place-items:center;width:28px;height:28px;border:2px solid var(--pk-ink);border-radius:50%;background:#fff}
#dialog.picker .pk-row[role=checkbox] .pk-mark{border-radius:8px}
#dialog.picker .pk-tick{width:18px;height:18px;fill:none;stroke:#fff;stroke-width:3.4;stroke-linecap:round;stroke-linejoin:round;opacity:0}
#dialog.picker .pk-row[aria-checked=true] .pk-mark{border-color:var(--pk-teal);background:var(--pk-teal)}
#dialog.picker .pk-row[aria-checked=true] .pk-tick{opacity:1}
#dialog.picker .pk-status,#dialog.picker .pk-limit{margin:0 0 8px;color:var(--pk-ink);font-size:var(--s-fs);font-weight:700;line-height:1.5}
/* Dòng "Chọn tối đa 8 môn." là vùng thông báo (role=status): khi trống nó không chiếm chỗ (không dùng display:none: vùng phải có sẵn trong cây trợ năng trước khi chữ hiện). */
#dialog.picker .pk-limit:empty{height:0;margin:0;overflow:hidden}

/* Chân: thông báo lỗi (có cách tiếp tục), ghi chú nơi lưu, các nút. Luôn thấy được: thân cuộn, chân không. */
#dialog.picker .pk-foot{flex:none;padding:10px 18px 16px;border-top:2px solid var(--pk-ink);background:var(--pk-paper)}
#dialog.picker .pk-error{margin:0}
#dialog.picker .pk-error:not(:empty){margin:0 0 8px;padding:8px 12px;border:2px solid var(--pk-ink);border-radius:12px;background:#ffe1d0;color:var(--pk-ink);font-size:var(--s-fs-note);font-weight:700;line-height:1.5}
#dialog.picker .pk-note{margin:0 0 10px;color:var(--pk-muted);font-size:var(--s-fs-note);line-height:1.5}
#dialog.picker .pk-actions{display:flex;flex-wrap:wrap;gap:10px;justify-content:flex-end}
#dialog.picker .pk-btn{flex:1 1 7.5rem;min-height:44px;padding:9px 18px;border:2px solid var(--pk-ink);border-radius:12px;background:#fff;color:var(--pk-ink);font:inherit;font-size:var(--s-fs);font-weight:800;line-height:1.3;box-shadow:var(--pk-lift);cursor:pointer;transition:transform .12s}
#dialog.picker .pk-btn:hover:not(:disabled){transform:translate(1px,1px);box-shadow:var(--pk-lift-sm)}
#dialog.picker .pk-btn:active:not(:disabled){transform:translate(3px,3px);box-shadow:none}
#dialog.picker .pk-btn.primary{background:var(--pk-teal);color:#fff}
#dialog.picker .pk-btn:disabled{opacity:.5;cursor:not-allowed;box-shadow:none}
/* "Để sau" là lối thoát, không phải bước: chữ gạch chân, không khung, nằm bên trái. */
#dialog.picker .pk-later{flex:0 1 auto;margin-right:auto;border-color:transparent;background:transparent;box-shadow:none;text-decoration:underline;text-underline-offset:3px}
#dialog.picker .pk-later:hover:not(:disabled){transform:none;box-shadow:none;background:#ffe9b8}
@media(max-width:420px){#dialog.picker .pk-head{padding:12px 14px 10px}#dialog.picker .pk-body{padding:12px 14px 10px}#dialog.picker .pk-foot{padding:8px 14px 14px}#dialog.picker .pk-btn{flex:1 1 6.5rem;padding-inline:10px}}
/* Màn thấp (điện thoại nằm ngang): bớt ghi chú để thân còn chỗ cuộn. */
@media(max-height:520px){#dialog.picker .pk-note{display:none}#dialog.picker .pk-foot{padding-top:8px}}
/* Màu hệ thống (Windows tương phản cao) bỏ các nền: hàng đã chọn giữ viền kép và dấu tích; đoạn tiến độ đã tới dùng màu Highlight. */
@media(forced-colors:active){
  #dialog.picker .pk-row[aria-checked=true]{outline:3px solid Highlight;outline-offset:-7px}
  #dialog.picker .pk-row[aria-checked=true]:focus-visible{outline:6px double Highlight;outline-offset:2px}
  #dialog.picker .pk-tick{stroke:CanvasText}
  #dialog.picker .pk-seg.is-on{forced-color-adjust:none;background:Highlight}
}
/* Giảm chuyển động: không cần luật riêng ở đây; `*{transition:none!important}` của styles.css đã tắt cả transition của .pk-btn (tests/picker.test.mjs đo lại). */

/* Tab Tài khoản (màn của Xưởng, chữ yên tĩnh): phần "Hồ sơ giảng dạy". Chỉ nút và chữ thường, không nhãn dán. */
.profile-section{max-width:680px;margin-top:24px;padding:28px;border:1px solid var(--line);border-radius:16px;background:#fff}  /* như .account-summary ngay trên nó (management.css) */
.profile-section h2{margin:0 0 4px;font-size:21px}
.profile-note{margin:0 0 14px;color:var(--muted);font-size:14px}
.profile-empty{margin:0 0 14px;font-weight:700}
.profile-facts{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:8px 20px;margin:0 0 16px}
.profile-facts>div{display:contents}
.profile-facts dt{font-weight:800}
.profile-facts dd{margin:0;overflow-wrap:anywhere}
.profile-actions{display:flex;flex-wrap:wrap;gap:10px}
.large-text .profile-section{font-size:18px}.large-text .profile-note{font-size:16px}
@media(max-width:480px){.profile-facts{grid-template-columns:minmax(0,1fr);gap:2px}.profile-facts dd{margin-bottom:8px}}