/* Skill Building styles, from Districtree 11.1.1 */
.facts{ margin:0; padding-left:20px; }
.facts li{ margin:6px 0; line-height:1.5; }
/* learn section */
.grade-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(104px,1fr)); gap:10px; }
.grade-tile{ display:flex; flex-direction:column; align-items:center; gap:2px; padding:16px 8px; background:var(--surface); border:1px solid var(--line); border-radius:14px; text-decoration:none; color:var(--ink); }
.grade-tile b{ font-family:var(--display); font-size:2rem; line-height:1; color:var(--accent); }
.grade-tile span{ font-size:.85rem; color:var(--muted); text-align:center; }
.grade-tile:hover, .ws-card:hover{ border-color:var(--accent); }
.ws-cards{ display:grid; grid-template-columns:repeat(auto-fill, minmax(230px,1fr)); gap:10px; }
.ws-card{ display:flex; flex-direction:column; gap:4px; padding:14px 16px; background:var(--surface); border:1px solid var(--line); border-radius:12px; text-decoration:none; color:var(--ink); }
.ws-card span{ font-size:.88rem; color:var(--muted); }
.grade-nav{ display:flex; flex-wrap:wrap; gap:6px; margin:4px 0 16px; }
.grade-nav a{ min-width:40px; text-align:center; padding:6px 10px; border:1px solid var(--line); border-radius:999px; text-decoration:none; color:var(--ink); background:var(--surface); font-weight:700; }
.grade-nav a[aria-current]{ background:var(--accent); color:#fff; border-color:var(--accent); }
.game-banner{ display:flex; gap:14px; align-items:center; padding:14px 18px; border-radius:14px; background:var(--accent-soft); color:var(--ink); text-decoration:none; border:1px solid var(--line); }
.game-banner .gb-tree{ font-size:2rem; }
.game-banner small{ display:block; color:var(--muted); font-size:.88rem; }
.ws-list{ display:flex; flex-direction:column; gap:8px; }
.ws-row{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:8px 16px; align-items:center; padding:12px 14px; background:var(--surface); border:1px solid var(--line); border-radius:12px; }
.ws-row > div:first-child{ display:flex; flex-direction:column; min-width:0; flex:1 1 260px; }
.ws-grades{ display:flex; flex-wrap:wrap; gap:6px; }
.ws-grades a{ min-width:34px; text-align:center; padding:4px 8px; border:1px solid var(--line); border-radius:8px; text-decoration:none; font-weight:700; }
.ws-tools{ display:flex; flex-wrap:wrap; gap:8px 12px; align-items:center; margin-bottom:14px; }
.ws-check, .ws-sel{ display:flex; gap:6px; align-items:center; font-size:.9rem; }
.ws-sel select{ font:inherit; padding:6px 8px; border-radius:8px; border:1px solid var(--line); background:var(--surface); color:var(--ink); }
.ws-page{ display:flex; flex-direction:column; gap:18px; }
.ws-sheet{ background:#fff; color:#111; border:1px solid #d9dde3; border-radius:6px; padding:32px 36px; box-shadow:0 2px 10px rgba(0,0,0,.06); max-width:850px; font-family:Georgia, 'Times New Roman', serif; }
.ws-sheet[data-hidden]{ display:none; }
.ws-namerow{ display:flex; gap:24px; justify-content:space-between; font-size:1rem; margin-bottom:18px; }
.ws-namerow span{ display:flex; gap:8px; flex:1; }
.ws-namerow i{ flex:1; border-bottom:1px solid #333; }
.ws-title{ font-size:1.6rem; margin:0; color:#111; font-family:Georgia, serif; }
.ws-meta{ margin:2px 0 8px; color:#555; font-size:.9rem; font-family:system-ui, sans-serif; }
.ws-inst{ font-style:italic; margin:0 0 18px; }
.ws-items{ list-style:none; counter-reset:q; padding:0; margin:0; display:grid; gap:20px 18px; font-size:1.15rem; }
.ws-items li{ counter-increment:q; display:flex; flex-wrap:wrap; gap:4px 8px; align-items:baseline; break-inside:avoid; min-width:0; }
.ws-items li::before{ content:counter(q) "."; color:#666; font-size:.85rem; min-width:1.6em; }
.ws-items.cols1{ grid-template-columns:1fr; }
.ws-items.cols2{ grid-template-columns:repeat(2,1fr); }
.ws-items.cols3{ grid-template-columns:repeat(3,1fr); }
.ws-items.cols4{ grid-template-columns:repeat(4,1fr); }
.ws-items.cols5{ grid-template-columns:repeat(5,1fr); }
.work{ display:block; height:4.5em; }
.vert{ display:inline-flex; flex-direction:column; align-items:flex-end; font-variant-numeric:tabular-nums; border-bottom:2px solid #222; padding-bottom:2px; min-width:3.5em; line-height:1.3; }
.frac{ display:inline-flex; flex-direction:column; align-items:center; line-height:1.05; vertical-align:middle; font-size:.95em; }
.frac sup{ border-bottom:1.5px solid #222; padding:0 3px; }
.frac sup, .frac sub{ vertical-align:baseline; font-size:1em; }
.circ{ display:inline-block; width:1.6em; height:1.6em; border:1.5px solid #222; border-radius:50%; vertical-align:middle; }
.dots{ letter-spacing:1px; font-size:1.05rem; }
.emo{ font-size:1.8rem; }
.ws-bank{ font-size:1.05rem; }
.ws-note{ background:#f3f6f9; border-left:4px solid #9fb3c8; padding:8px 12px; font-family:system-ui, sans-serif; font-size:.92rem; }
.ws-match, .ws-sort, .ws-practice{ width:100%; border-collapse:collapse; font-size:1.05rem; }
.ws-match td, .ws-match th{ padding:10px 6px; text-align:left; vertical-align:top; }
.ws-match .m-blank{ width:4em; color:#888; }
.ws-sort th, .ws-sort td, .ws-practice td{ border:1px solid #444; padding:10px; height:2.2em; }
.ws-practice td:first-child{ width:24%; }
.ws-search{ border-collapse:collapse; margin:0 auto 12px; font-family:'Courier New', monospace; font-size:1.15rem; }
.ws-search td{ width:1.9em; height:1.9em; text-align:center; }
.ws-search td.hit{ background:#ffe082; font-weight:700; }
.ws-pair{ display:flex; flex-wrap:wrap; gap:28px; justify-content:center; }
.ws-sudoku{ border-collapse:collapse; border:2.5px solid #111; }
.ws-sudoku td{ border:1px solid #888; width:2.3em; height:2.3em; text-align:center; font-size:1.2rem; }
.ws-sudoku td.bR{ border-right:2.5px solid #111; }
.ws-sudoku td.bB{ border-bottom:2.5px solid #111; }
.ws-sudoku i{ color:#1565c0; font-style:normal; }
.ws-robots{ display:grid; grid-template-columns:repeat(2, 1fr); gap:22px; }
.ws-robot{ border-collapse:collapse; }
.ws-robot td{ border:1px solid #555; width:2em; height:2em; text-align:center; font-weight:700; }
.ws-algo ul, .ws-tf{ font-size:1.05rem; line-height:1.9; }
.ws-algo ul{ list-style:none; padding-left:0; }
.ws-algo h4{ margin:14px 0 4px; }
.ws-bug pre{ background:#f4f4f4; border:1px solid #ccc; padding:8px 12px; font-size:.95rem; white-space:pre-wrap; }
.ws-keylist{ columns:4; font-size:1rem; line-height:1.8; padding-left:1.6em; }
.ws-foot{ margin-top:26px; font-size:.75rem; color:#888; font-family:system-ui, sans-serif; text-align:right; }
.game{ max-width:860px; }
.game-start{ text-align:center; }
.game-start .btn-row{ justify-content:center; }
.tree-svg{ width:100%; max-width:320px; height:auto; display:block; margin:10px auto; }
.game-hud{ display:flex; gap:18px; justify-content:center; font-size:1.1rem; margin-bottom:8px; }
.game-board{ display:grid; grid-template-columns:1fr 1.2fr; gap:16px; align-items:center; }
.game-prompt{ font-size:1.6rem; text-align:center; margin:0 0 14px; overflow-wrap:anywhere; }
.game-opts{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.game-opt{ font:inherit; font-size:1.35rem; font-weight:700; padding:16px 10px; border-radius:14px; border:2px solid var(--line); background:var(--surface); color:var(--ink); cursor:pointer; }
.game-opt:hover, .game-opt:focus-visible{ border-color:var(--accent); }
.game-fb{ text-align:center; min-height:1.5em; margin-top:12px; font-weight:700; }
.game-over{ text-align:center; }
@media (max-width:640px){
.ws-sheet{ padding:18px 14px; }
.ws-items.cols4, .ws-items.cols5{ grid-template-columns:repeat(2,1fr); }
.ws-items.cols3{ grid-template-columns:repeat(2,1fr); }
.ws-items.cols2{ grid-template-columns:1fr; }
.ws-robots{ grid-template-columns:1fr; }
.ws-keylist{ columns:2; }
.game-board{ grid-template-columns:1fr; }
.ws-search td{ width:1.45em; height:1.45em; font-size:.95rem; }
.ws-sudoku td{ width:1.9em; height:1.9em; }
}
@media print{
body *{ visibility:hidden; }
.ws-page, .ws-page *{ visibility:visible; }
.ws-page{ position:absolute; left:0; top:0; width:100%; }
.ws-sheet{ box-shadow:none; border:0; padding:0; max-width:none; }
.ws-answers{ display:none !important; }
.ws-page.with-key .ws-answers{ display:block !important; break-before:page; }
.ws-robots{ grid-template-columns:repeat(2,1fr); }
@page{ margin:0.6in; }
}
.dots.big{ font-size:1.6rem; letter-spacing:4px; }
.shapes{ font-size:1.5rem; letter-spacing:6px; }
.ws-count{ font-size:1.15rem; margin-top:14px; }
.color-page{ width:100%; height:auto; display:block; max-height:9.2in; }
.ws-color .ws-namerow{ margin-bottom:8px; }
@media print{
.color-page{ max-height:8.6in; }
}
/* board games */
.bg-wrap{ max-width:560px; }
.bg-board{ display:grid; grid-template-columns:repeat(8,1fr); width:100%; max-width:520px; aspect-ratio:1; border:4px solid #5d4037; border-radius:4px; margin:12px 0; }
.cp.w{ color:#fff; text-shadow:0 0 2px #000, 0 0 4px #000; }
.cp.b{ color:#111; }
.bg-top{ display:flex; flex-wrap:wrap; gap:10px 18px; align-items:center; justify-content:space-between; }
.bg-status{ font-size:1.05rem; }
.bg-controls{ display:flex; flex-wrap:wrap; gap:8px 12px; align-items:center; font-size:.9rem; }
.bg-controls select{ font:inherit; padding:6px 8px; border-radius:8px; border:1px solid var(--line); background:var(--surface); color:var(--ink); }
.ws-why li{ margin:8px 0; line-height:1.5; }
/* fitting it into this theme */
#learn-view .page-head h1:focus{ outline:none; }
.learn-crumbs{ margin:0 0 6px; }
#learn-toast{ position:fixed; left:50%; bottom:24px; transform:translateX(-50%); background:var(--ink); color:var(--bg); padding:10px 16px; border-radius:10px; z-index:50; }
@media print{ .site-head, .site-foot, .indep, .crumbs, .no-print{ display:none !important; } }