/* Wonderscape Kindergarten + 1st grade phone layer. Linked from every K/1 page after the grade stylesheet. */
/* ===== Wonderscape K/1 phone layer v1.0.0 (2026-10-31): one-row menu, no sideways page scroll, 44px tap targets ===== */
@media (max-width: 640px) {
  html, body { overflow-x: hidden; }
  .wrap { padding-left: 16px !important; padding-right: 16px !important; box-sizing: border-box; max-width: 100%; }
  .khead { padding-top: 8px !important; padding-bottom: 8px !important; }
  .knav { display: flex !important; flex-wrap: nowrap !important; overflow-x: auto; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; scrollbar-width: none; gap: 8px; padding-bottom: 2px; scroll-snap-type: x proximity; -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent); mask-image: linear-gradient(90deg, #000 88%, transparent); }
  .knav::-webkit-scrollbar { display: none; }
  .knav > a, .knav > button { flex: 0 0 auto; white-space: nowrap; min-height: 44px; display: inline-flex; align-items: center; scroll-snap-align: start; }
  .crumbs { line-height: 1.9; }
  .crumbs a { display: inline-block; padding: 4px 0; }
  .pill, .bigbtn, button, .toolbar a { min-height: 44px; }
  .toolbar { display: flex; flex-wrap: wrap; gap: 8px; }
  .toolbar .pill { flex: 1 1 auto; justify-content: center; text-align: center; }
  select, input[type="date"], input[type="number"], input[type="text"] { font-size: 16px !important; min-height: 44px; max-width: 100%; box-sizing: border-box; }
  #jumpForm, #jumpForm label, .today form, .today label { max-width: 100%; min-width: 0; }
  #jumpSel { width: 100% !important; min-width: 0 !important; }
  #jumpForm { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-end; }
  #jumpForm label { flex: 1 1 100%; }
  .tscroll { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; position: relative; }
  .tscroll::before { content: "Swipe the table sideways \2192"; display: block; font-size: .78rem; opacity: .75; margin: 0 0 6px; }
  table.tbl { font-size: .86rem; }
  table.tbl th, table.tbl td { padding: 8px 10px; }
  .card, .sbox { padding: 14px !important; }
  .days { grid-template-columns: 1fr !important; }
  .days a { min-height: 48px; }
  .pager { display: flex; flex-wrap: wrap; gap: 8px; }
  .pager a { flex: 1 1 140px; text-align: center; }
  img, svg, video, canvas { max-width: 100%; height: auto; }
  h1 { font-size: clamp(1.55rem, 7.2vw, 2.1rem); line-height: 1.15; overflow-wrap: anywhere; }
  h2 { overflow-wrap: anywhere; }
}
@media print { .tscroll::before { display: none; } }

@media (max-width: 640px) {
  .foot nav { display: flex; flex-wrap: wrap; gap: 4px 14px; }
  .foot nav a { display: inline-flex; align-items: center; min-height: 44px; }
  table.tbl th a { display: inline-flex; align-items: center; min-height: 40px; }
  .check input[type="checkbox"], li input[type="checkbox"] { width: 26px; height: 26px; flex: none; }
  .check li, li.check { min-height: 44px; }
}

@media (max-width: 640px) {
  table.tbl td, table.tbl th { min-width: 150px; }
  table.tbl th:first-child, table.tbl td:first-child { min-width: 92px; position: sticky; left: 0; background: inherit; z-index: 1; }
  table.tbl tr > :first-child { background-color: var(--paper, #fffaf0); }
}
@media (max-width: 640px) { html.hc table.tbl tr > :first-child { background-color: #000; } }