/* Pre-K at home (Teddy Rook Book): the hub, the pre-reading games (on top of phonics.css) and the hand-skills printables.
   Uses the homeschool tokens from hs.css. */
.pk *{box-sizing:border-box}
.pk-hero::after{content:"🧸";font-size:5rem;top:.4rem;opacity:.18;color:inherit}
.pk-vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.pk-ic,.pk-tile>span:first-child,.pk-wk th span{font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif}

/* daily rhythm */
.pk-rhythm{list-style:none;margin:.6rem 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:.8rem;counter-reset:r}
.pk-rhythm li{display:flex;gap:.8rem;align-items:flex-start;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:.9rem 1rem}
html:not([data-theme="dark"]) .pk-rhythm li{border-color:#cfdcd3}
.pk-ic{font-size:2.1rem;line-height:1;flex:none}
.pk-rhythm h3{margin:0 0 .25rem}
.pk-rhythm p{margin:0;line-height:1.5;color:var(--muted)}
.pk .hs-card.feat{border-left:5px solid var(--gold)}
.pk-les{grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.pk-next{margin:.9rem 0 0;line-height:1.6}

/* more to explore */
.pk-tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:.7rem;margin-top:.5rem}
.pk-tile{display:grid;grid-template-columns:2.4rem 1fr;gap:.1rem .6rem;align-items:start;background:var(--card);border:1.5px solid var(--line);border-radius:12px;padding:.75rem .85rem;text-decoration:none;box-shadow:none;color:var(--ink);transition:border-color .15s,transform .15s}
.hs a.pk-tile{color:var(--ink)}
a.pk-tile:hover{border-color:var(--g);transform:translateY(-1px)}
.pk-tile>span:first-child{font-size:1.8rem;line-height:1;grid-row:span 2}
.pk-tile b{font:700 1rem Georgia,serif;color:var(--g)}
.pk-tile b a{text-decoration:none}
.pk-tile>span:last-child{font-size:.88rem;color:var(--muted);line-height:1.45}
.pk-books{line-height:1.6;padding-left:1.2rem}.pk-books li{margin:.25rem 0}

/* week of ideas */
.pk-sheet{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:.9rem;overflow:hidden}
.pk-sheet-h{display:flex;justify-content:space-between;flex-wrap:wrap;gap:.2rem 1rem;margin:0 0 .5rem;font:1.05rem Georgia,serif;color:var(--g)}
.pk-sheet-h span{font:.8rem system-ui,sans-serif;color:var(--muted)}
.pk-wk{width:100%;border-collapse:collapse;table-layout:fixed;font-size:.9rem;line-height:1.4}
.pk-wk th,.pk-wk td{border:1px solid var(--line);padding:.45rem .5rem;vertical-align:top;text-align:left}
.pk-wk thead th{background:var(--soft);font:700 .85rem system-ui,sans-serif;color:var(--ink)}
.pk-wk thead th:first-child{width:6.5rem}
.pk-wk tbody th{font:700 .9rem Georgia,serif;color:var(--g);background:var(--paper)}
.pk-sheet-f{margin:.5rem 0 0;font-size:.85rem;color:var(--muted)}
@media (max-width:820px){
  .pk-wk,.pk-wk tbody,.pk-wk tr,.pk-wk th,.pk-wk td{display:block;width:auto}
  .pk-wk thead{display:none}
  .pk-wk tr{border:1px solid var(--line);border-radius:10px;margin-bottom:.6rem;overflow:hidden}
  .pk-wk th,.pk-wk td{border:0;border-top:1px solid var(--line)}
  .pk-wk tbody th{border-top:0}
  .pk-wk td::before{content:attr(data-c);display:block;font:700 .75rem system-ui,sans-serif;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
}

/* grown-ups */
.pk-gu{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:.9rem}
.pk-box{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:.9rem 1.1rem}
.pk-box h3{margin:0 0 .4rem}
.pk-box ul{margin:.2rem 0;padding-left:1.15rem}.pk-box li{line-height:1.55;margin:.2rem 0}
.pk-h3{margin:1.3rem 0 .4rem !important}
.pk-src{line-height:1.5;padding-left:1.2rem}.pk-src li{margin:.3rem 0}

@page pkweek{size:landscape;margin:10mm}
@media print{
  body:has(.pk) .header,body:has(.pk) .footer,body:has(.pk) .top-link,body:has(.pk) #top-link,body:has(.pk) .trb-social,.pk-noprint{display:none !important}
  body:has(.pk) .main{padding:0;margin:0;max-width:none}
  .pk-week{margin:0;page:pkweek}
  .pk-sheet{border:0;padding:0;background:#fff;color:#000}
  .pk-sheet-h{color:#004225;font-size:16pt}
  .pk-sheet-h span{color:#555}
  .pk-wk{font-size:10.5pt;display:table !important}
  .pk-wk thead{display:table-header-group !important}.pk-wk tbody{display:table-row-group !important}
  .pk-wk tr{display:table-row !important;border:0}
  .pk-wk th,.pk-wk td{display:table-cell !important;border:1px solid #999 !important;color:#000;background:#fff !important;padding:6pt}
  .pk-wk td::before{content:none !important}
  .pk-wk thead th{background:#eef4f0 !important;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .pk-wk tbody th{color:#004225}
  .pk-sheet-f{color:#444}
}

/* ---------- pre-reading games (phonics.css does the stage) ---------- */
.pk-l .pp-head{background:linear-gradient(135deg,#004225 0%,#00562f 100%)}
.pk-gu-note{font:1rem/1.5 system-ui,sans-serif;background:var(--card);border:1px dashed var(--gold);border-radius:12px;padding:.55rem .8rem;max-width:34rem;color:var(--ink);text-align:left;margin:0}
.pk-gu-note b{color:var(--g)}
.pk-pics{display:flex;flex-wrap:wrap;gap:.8rem;justify-content:center;align-items:flex-end}
.pk-pic{display:flex;flex-direction:column;align-items:center;gap:.15rem;min-width:6rem;padding:.5rem .7rem .4rem;border-radius:16px;border:2px solid var(--line);background:var(--card);color:var(--ink);font:600 1rem var(--kid);cursor:pointer;touch-action:manipulation;transition:transform .12s,background .2s,opacity .2s}
button.pk-pic:hover:not(:disabled){border-color:var(--g);transform:translateY(-2px)}
.pk-pic .e{font-size:3.6rem;line-height:1.05;font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif}
.pk-pic.key{border-color:var(--gold);background:var(--paper);cursor:pointer}
.pk-pic.key .e{font-size:4.6rem}
.pk-pic.right{background:var(--okbg);border-color:var(--ok);color:var(--ok)}
.pk-pic.wrong{opacity:.3}
.pk-pic:disabled{cursor:default}
.pk-pic small{font:.85rem var(--kid);color:var(--muted)}
.pk-pic.right small{color:inherit}
.pk-vs{font:700 1.4rem var(--kid);color:var(--muted);align-self:center}
.pk-grid{display:grid;grid-template-columns:repeat(4,minmax(0,4.6rem));gap:.55rem;justify-content:center}
.pk-grid .pp-opt{min-width:0;width:100%;min-height:4.6rem;font:700 2.4rem/1 var(--kid);padding:0}
.pk-grid .pp-opt.found{background:var(--okbg);border-color:var(--ok);color:var(--ok)}
.pk-claps{display:flex;flex-wrap:wrap;gap:.6rem;justify-content:center}
.pk-claps .pp-opt{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.1rem;padding:.4rem .7rem;font:700 1.8rem/1 var(--kid)}
.pk-claps .pp-opt span{font-size:1.05rem;letter-spacing:-.05em;font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif}
.pk-blocks{display:flex;gap:.3rem;justify-content:center;flex-wrap:wrap}
.pk-blocks i{display:inline-block;width:1.1rem;height:1.1rem;border-radius:4px;background:var(--gold)}
.pk-sent{display:flex;flex-wrap:wrap;gap:.4rem;justify-content:center;font:700 clamp(1.5rem,5.5vw,2.2rem)/1.3 var(--kid);color:var(--ink)}
.pk-sent span{background:var(--hl);border-radius:10px;padding:.15rem .5rem}
.pk-big-btns{display:flex;gap:.8rem;justify-content:center;flex-wrap:wrap}
.pk-big-btns .pp-opt{font:700 1.4rem var(--kid);padding:.6rem 1.2rem;display:flex;align-items:center;gap:.4rem}
.pk-games{list-style:none;padding:0;margin:.5rem 0 0;display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:.6rem}
.pk-games+p{margin-top:.8rem}
.pk-games li{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:.6rem .8rem;line-height:1.5}
.pk-games b{display:block}
.pk-ready{display:flex;flex-direction:column;align-items:center;gap:.5rem}
@media (max-width:600px){
  .pk-pic{min-width:4.9rem;padding:.4rem .45rem .3rem}
  .pk-pic .e{font-size:2.9rem}.pk-pic.key .e{font-size:3.8rem}
  .pk-grid{grid-template-columns:repeat(4,minmax(0,4rem));gap:.4rem}
  .pk-grid .pp-opt{min-height:4rem;font-size:2.1rem}
}

/* ---------- printables (hs.css .ps-paper does the paper and the print rules) ---------- */
.pk-pr .ps-paper{padding:9mm 10mm 10mm}
.pk-pr .ps-paper svg{display:block;width:100%;height:auto}
.pk-pr-head{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;font:13px system-ui,sans-serif;color:#333;margin:0 0 3mm}
.pk-pr-head b{font:700 19px Georgia,serif;color:#004225}
.pk-pr-tip{font:13px/1.45 system-ui,sans-serif;color:#444;margin:2mm 0 0}
.pk-pr .pl-tabs button{min-height:2.6rem}
@media print{
  body:has(.pk-pr) .ps-paper{padding:0}
  .pk-pr .ps-paper svg{width:auto;max-width:100%;height:218mm;margin:0 auto}
  .pk-pr-tip{font-size:11px}
}