/* Sân khấu ("giấy vở và nhãn dán"): trang chủ, cửa hàng, trang sản phẩm.
   Mọi luật nằm dưới body.stage nên màn soạn bài và Quản trị không đổi.
   Thiết kế và số đo tương phản: docs/superpowers/specs/2026-09-29-public-ui-redesign-design.md, mục 4. */
/* Không đặt scrollbar-gutter:stable cho cả Sân khấu: trình duyệt của test ẩn thanh cuộn nhưng vẫn giữ 15px cho gutter, nên header Sân khấu hẹp hơn
   header bài mẫu/trình soạn 15px và tests/layout-stability hỏng. Chỉ danh sách cửa hàng cần gutter (spec mục 6.3): đặt riêng ở luật của danh sách. */
html:has(body.stage){scroll-padding-top:96px}
body.stage{--s-ink:#243c35;--s-line:#d9e3dc;--s-control:#71867b;--s-cream:#fffcf6;--s-paper:#f7faf6;--s-teal:#176b5b;--s-teal-dark:#125648;--s-sun:#e8f3ed;--s-accent:#176b5b;--s-muted:#4a5d56;--s-b1:#fbf5e6;--s-b2:#e3f4ee;--s-b3:#eef5fb;--s-b4:#fff0e9;--s-b5:#f1effa;--s-b6:#fcf0f3;--s-lift:0 4px 16px #243c350a;--s-lift-sm:0 2px 8px #243c350a;--s-fs:16px;--s-fs-title:17px;--s-fs-note:14px;--s-fs-tag:12px;background:var(--s-cream);color:var(--s-ink);font-size:var(--s-fs);line-height:1.6}
/* Chữ lớn ("Aa", lớp large-text trên <html>) phải tới mọi thành phần Sân khấu: cỡ chữ của thành phần đi qua các biến --s-fs*
   (luật `.stage #main .btn` mạnh hơn `.large-text .btn` nên không tự nhận chữ lớn). Đừng viết px cố định cho chữ trong thành phần mới. */
.large-text body.stage{--s-fs:18px;--s-fs-title:19px;--s-fs-note:16px;--s-fs-tag:14px}
.stage :is(a,button,input,select,textarea,summary):focus-visible{outline:3px solid var(--s-ink);outline-offset:3px}
.stage .workspace{background:transparent}
/* styles.css làm mờ nền sau mọi hộp thoại (backdrop-filter: blur(3px)); Sân khấu không dùng blur hay backdrop-filter (spec mục 4.3, 10):
   nền sau hộp thoại chỉ là màu phẳng, ở hộp thoại của ứng dụng và hộp phóng to của trang sản phẩm. Xưởng giữ nguyên. */
.stage dialog::backdrop{backdrop-filter:none}

/* Header dùng chung, phiên bản Sân khấu. CHỈ đổi màu, viền và bóng: kích thước, chữ và vị trí phải giống hệt các màn khác
   (tests/layout-stability.test.mjs đo header giữa trang chủ, bài mẫu và trình soạn, sai lệch tối đa 1px).
   Không đổi font-size, font-weight, padding, độ dày viền. Các luật gốc ở header.css rất cụ thể nên phải mạnh hơn. */
body.stage .app-header.site-header{background:var(--s-paper);border-bottom-color:var(--s-line);box-shadow:none}
body.stage .app-header.site-header .brand{color:var(--s-ink)}
body.stage .app-header.site-header .nav a,body.stage .app-header.site-header .nav button{color:#3a4f49}
body.stage .app-header.site-header .nav a:hover,body.stage .app-header.site-header .nav button:hover{background:#edf6f1;color:var(--s-ink)}
body.stage .app-header.site-header .nav [aria-current=page]{background:var(--s-sun);color:var(--s-ink);box-shadow:inset 0 0 0 2px var(--s-ink)}
body.stage .app-header.site-header :is(.connect-button,.text-toggle){border-color:var(--s-teal);box-shadow:none}
/* Nút "Aa" đang bật (chữ lớn): nền mực, chữ trắng. Luật viền mực ở trên đã xóa dấu hiệu viền ngọc của trạng thái bật, và nền cũ #eaf3ee chỉ đạt
   1,09:1 so với header giấy. Nền nắng cũng không đủ (1,49:1, cần 3:1 cho chỉ báo trạng thái, WCAG 1.4.11); mực đạt 11,4:1, chữ trắng trên mực 11,8:1. */
body.stage .app-header.site-header .text-toggle[aria-pressed=true]{background:var(--s-ink);color:#fff}

/* --s-line là viền trang trí; --s-control đạt 3,89:1 trên trắng và 3,80:1 trên nền trang cho điều khiển. */
/* Nút trong nội dung. Chỉ dưới #main: nút của header (kích thước cố định, như "Aa" rộng 44px) không đổi; nút của hộp thoại và của dải xem trước nằm ngoài #main nên có luật riêng bên dưới. */
.stage #main .btn{min-height:44px;padding:9px 18px;border:2px solid var(--s-control);border-radius:12px;background:#fff;color:var(--s-ink);font-size:var(--s-fs);font-weight:800;box-shadow:var(--s-lift);text-decoration:none;transition:transform .12s}
.stage #main .btn:hover{background:#fff;transform:translate(1px,1px);box-shadow:var(--s-lift-sm)}
.stage #main .btn:active{transform:translate(3px,3px);box-shadow:none}
.stage #main .btn.primary{background:var(--s-teal);border-color:var(--s-teal);color:#fff}
.stage #main .btn.primary:hover{background:var(--s-teal-dark)}
.stage #main .btn.sun,.stage #main .btn.sun:hover{background:var(--s-sun)}
/* Hộp thoại của ứng dụng (#dialog: tài khoản, hỏi lại, hướng dẫn) nằm ngoài #main và ngoài #app, nên các luật `.stage #main …` không tới nó (L8). Trên Sân khấu nó mang dáng Sân khấu:
   viền 2px mực, bo 14px, bóng cứng, không đổ bóng mờ (spec mục 4.3), nút cùng kiểu nút trong #main. Chữ đi qua --s-fs* để "Aa" tới được. Mọi luật dưới .stage: hộp thoại ở màn
   Xưởng (bài mẫu, soạn bài, Bài của tôi) không đổi. Hộp phóng to của trang sản phẩm (.product-lightbox) có luật riêng mạnh hơn, cùng giá trị. */
.stage dialog{border:2px solid var(--s-line);border-radius:14px;background:var(--s-paper);color:var(--s-ink);box-shadow:var(--s-lift)}
.stage dialog h2{font-size:calc(var(--s-fs-title) + 4px);line-height:1.3;font-weight:900}
.stage dialog p{font-size:var(--s-fs);line-height:1.6;color:var(--s-muted)}
.stage dialog :is(.connection-note,.notice){font-size:var(--s-fs-note);line-height:1.5;color:var(--s-muted)}
.stage dialog .connection-note{margin-top:16px}  /* nút có bóng cứng 3px bên dưới: ghi chú không dính vào nút */
.stage dialog .field{font-size:var(--s-fs-note)}
.stage dialog .field :is(input,select,textarea){min-height:44px;padding:9px 12px;border:2px solid var(--s-control);border-radius:12px;color:var(--s-ink);font-size:var(--s-fs);font-weight:600}
.stage dialog .btn{min-height:44px;padding:9px 18px;border:2px solid var(--s-control);border-radius:12px;background:#fff;color:var(--s-ink);font-size:var(--s-fs);font-weight:800;box-shadow:var(--s-lift);text-decoration:none;transition:transform .12s}
.stage dialog .btn:hover{background:#fff;transform:translate(1px,1px);box-shadow:var(--s-lift-sm)}
.stage dialog .btn:active{transform:translate(3px,3px);box-shadow:none}
.stage dialog .btn.primary{background:var(--s-teal);border-color:var(--s-teal);color:#fff}
.stage dialog .btn.primary:hover{background:var(--s-teal-dark)}

/* Dải xem trước (spec mục 6.1): chỉ quản trị viên thấy, trên cùng, trên header; ở ứng dụng (store.js previewRibbon, nút) và ở trang sản phẩm
   do máy chủ dựng (store_pages.py PREVIEW, liên kết), nên một bộ luật ở đây cho cả hai: cùng chiều cao và màu ở mọi độ rộng. Dải nằm ngoài
   #main nên nút .btn.sun tự định dạng như .stage #main .btn; trên nền mực thì viền và bóng mực không thấy, nên viền giấy, không bóng.
   Vòng focus trắng (11,8:1 trên mực) cho cả nút và liên kết. */
.stage .stage-ribbon{display:flex;align-items:center;gap:8px 16px;flex-wrap:wrap;min-height:64px;padding:8px max(16px,calc((100% - 1180px)/2));background:var(--s-ink);color:#fff;font-size:var(--s-fs-note);font-weight:700;line-height:1.5}
.stage .stage-ribbon span{flex:1 1 260px}
.stage .stage-ribbon .btn{flex:none;min-height:44px;padding:9px 18px;border:2px solid var(--s-paper);border-radius:12px;background:var(--s-sun);color:var(--s-ink);font-size:var(--s-fs);font-weight:800;text-decoration:none;box-shadow:none;transition:transform .12s}
.stage .stage-ribbon .btn:hover{background:var(--s-sun);transform:translate(1px,1px)}
.stage .stage-ribbon .btn:disabled{opacity:.7;cursor:progress;transform:none}
.stage .stage-ribbon :is(a,button):focus-visible{outline-color:#fff}

/* Nhãn, từ nhấn, thẻ, ô cấp học */
.stage .eyebrow{display:inline-block;width:fit-content;max-width:100%;padding:3px 12px;margin:0;border:2px solid var(--s-line);border-radius:99px;background:#edf6f1;color:var(--s-ink);font-size:var(--s-fs-tag);font-weight:800;letter-spacing:.06em;text-transform:uppercase;line-height:1.5}
.stage .s-mark{font-style:normal;color:var(--s-accent);text-decoration:underline #b5d9ca;text-decoration-thickness:2px;text-underline-offset:7px}
.stage .s-card{background:#fff;border:2px solid var(--s-line);border-radius:14px;box-shadow:var(--s-lift)}
.stage .s-num{display:grid;place-items:center;width:34px;height:34px;border:2px solid var(--s-line);border-radius:50%;background:var(--s-sun);font-weight:900;line-height:1}
.stage .s-tile{display:flex;align-items:center;gap:12px;min-height:68px;padding:8px 14px;border:2px solid var(--s-line);border-radius:14px;box-shadow:var(--s-lift);color:var(--s-ink);text-decoration:none;transition:transform .12s}
.stage .s-tile:hover{transform:translate(1px,1px);box-shadow:var(--s-lift-sm)}
.stage .s-tile img{flex:none;width:56px;height:56px;object-fit:contain}
.stage .s-tile-text{display:block;min-width:0}
.stage .s-tile-text strong{display:block;font-size:var(--s-fs-title);font-weight:900;line-height:1.3}
/* Chú thích ô dùng mực: #3a4f49 chỉ đạt 4,39 trên đào và 4,27 trên tím (dưới 4,5); mực đạt từ 5,74 trên cả sáu màu ô. */
.stage .s-tile-text span{display:block;font-size:var(--s-fs-note);font-weight:600;line-height:1.5;color:var(--s-ink)}
.stage .s-b1{background:var(--s-b1)}.stage .s-b2{background:var(--s-b2)}.stage .s-b3{background:var(--s-b3)}.stage .s-b4{background:var(--s-b4)}.stage .s-b5{background:var(--s-b5)}.stage .s-b6{background:var(--s-b6)}
@media(prefers-reduced-motion:reduce){.stage *{transition:none!important}}

.site-header .connect-button{max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.site-header .settings-toggle{flex:0 0 auto;min-width:44px;min-height:44px}.system-settings .text-toggle{min-height:44px}.system-settings .text-toggle[aria-pressed=true]{background:#08756f;color:white}.system-settings summary{min-height:44px;cursor:pointer;display:flex;align-items:center}.auth-session-notice{font-size:14px;line-height:1.6;color:#4a5d56}@media(max-width:700px){.site-header .connect-button{max-width:110px}}