/* Eduscape phone spacing. Phones only (screen, 700px and narrower): no wording, features or desktop layout are changed. */
@media screen and (max-width:700px){
  html body .cp-top{padding:5px 10px;gap:8px}
  html body .cp-search{flex:1 1 auto;min-width:0;padding:6px 12px}
  html body .cp-search span{display:block;height:auto;font-size:12px;line-height:1.15}
  html body #cpCrumb{white-space:nowrap;padding:3px 12px;gap:10px;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  html body #cpCrumb::-webkit-scrollbar{display:none}
  html body #cpCrumb > *,html body #cpCrumb span{white-space:nowrap;flex:0 0 auto}
  html body .cp-nav button{padding:9px 12px}
  html body #main .topbar{padding:8px 12px;gap:8px}
  html body #pageTitle{line-height:1.2}
  html body #main #content.content{padding:10px 10px 88px}
  html body #main #content .card{padding:12px;margin-bottom:12px}
  html.es-in body{padding-bottom:56px}
  html body .btn-row{gap:8px}
  html body .content .btn{min-height:40px}
  html body .content .btn.small{min-height:36px}
  html body #dc_card{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
  html body #dc_card .btn{margin-left:0!important}
  html body .card > table.data{display:block;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
  html body .table-scroll table.data:has(td.btn-row){display:block;width:100%}
  html body .table-scroll table.data:has(td.btn-row) thead,html body .table-scroll table.data:has(td.btn-row) tbody{display:block}
  html body .table-scroll table.data:has(td.btn-row) tr{display:flex;flex-wrap:wrap;align-items:center}
  html body .table-scroll table.data:has(td.btn-row) th,html body .table-scroll table.data:has(td.btn-row) td{display:block;flex:1 1 0;min-width:0}
  html body .table-scroll table.data:has(td.btn-row) th:empty{display:none}
  html body .table-scroll table.data:has(td.btn-row) td.btn-row{display:flex;flex-wrap:wrap;flex:1 1 100%;gap:8px;padding-top:2px}
  html body .tk-wrap{grid-template-columns:minmax(0,1fr)}
  html body .tk-side,html body .tk-view{min-width:0}
  html body .tk-sticky{position:static}
  html body .tk-bar{gap:8px}
  html body .lp-auth{padding:8px}
  html body .lp-authcard{max-height:calc(100vh - 16px);max-height:calc(100dvh - 16px);padding:22px 18px 18px;border-radius:22px}
  html body .lp-auth-close{top:10px;right:10px}
  html body .modal-backdrop{padding:12px 10px}
  html body .modal{padding:16px 14px}
  /* marks entry: a narrower learner-name column (names wrap) leaves room for the mark boxes */
  html body table.marks td:nth-child(2):not([data-short]),html body table.xs td:nth-child(2):not([data-short]){width:100px;min-width:100px;max-width:100px;white-space:normal;overflow-wrap:anywhere;line-height:1.2;font-size:11.5px}
  html body table.marks td:nth-child(2)[data-short],html body table.xs td:nth-child(2)[data-short]{white-space:nowrap;width:auto;min-width:0;max-width:130px;overflow:hidden;text-overflow:ellipsis;font-size:0;line-height:0}
  html body table.marks td:nth-child(2)[data-short]::before,html body table.xs td:nth-child(2)[data-short]::before{content:attr(data-short);font-size:12.5px;line-height:1.3}
  html body table.marks:has(td[data-short]) th:nth-child(2),html body table.xs:has(td[data-short]) th:nth-child(2){min-width:0;width:auto}
  /* assessment sheet (BOT / MID / EOT): thin AGG columns so one subject's three marks fit the screen; the other subjects are reached by swiping sideways */
  html body table.xs th.xs-n,html body table.xs td.xs-n{width:26px;min-width:26px;max-width:26px;font-size:11px;padding:0}
  html body table.xs th.xs-nm,html body table.xs td.xs-nm:nth-child(2)[data-short]{width:112px;min-width:112px;max-width:112px;padding:0 6px;left:26px}
  html body table.xs th.ph-mk,html body table.xs td.xs-c{width:42px;min-width:42px;max-width:42px;padding:0 1px}
  html body table.xs th.ph-agg,html body table.xs td.xs-agg{width:19px;min-width:19px;max-width:19px;padding:0;letter-spacing:0}
  html body table.xs td.xs-agg{font-size:10px}
  html body table.xs th.ph-agg{font-size:7px}
  html body table.xs input.mk{width:100%;min-width:0;padding:4px 1px;text-align:center;height:30px}
  /* zoom bar for the assessment grids */
  .ph-zoom{display:flex;gap:6px;align-items:center;justify-content:flex-end;margin:0 0 6px}
  .ph-zoom button{min-width:40px;height:34px;padding:0 10px;border:1px solid #c9d0da;border-radius:8px;background:#fff;color:#1c2b3a;font-weight:700;font-size:16px}
  .ph-zoom button[data-a="reset"]{font-size:12px}
  .ph-zoom span{min-width:44px;text-align:center;font-size:12px;font-weight:700}
  html body .xs-scroll,html body .marks-wrap{touch-action:pan-x pan-y}
  html body .xs-scroll table.xs,html body .marks-wrap table.marks{zoom:var(--phz,1)}
}