/* SKET/SKEF3623 page mode: one numbered page at a time, plus phone fixes.
   Loaded after each page's own styles, so it overrides them. */

/* ---------- pages ---------- */
html{scroll-behavior:auto}
html.present{scroll-snap-type:none}
main{padding-bottom:110px}
main > section:not(.cur){display:none !important}
main > section.cur{display:block;animation:pgIn .18s ease-out}
main > section.part-head.cur{display:flex}
@media (prefers-reduced-motion:reduce){main > section.cur{animation:none}}
@keyframes pgIn{from{opacity:.0;transform:translateY(6px)}to{opacity:1;transform:none}}
main > .block,main > .hero{padding-top:22px;min-height:0}
html.present main > section{min-height:0}
main > .part-head{margin-top:26px;min-height:calc(100svh - var(--hdr) - 170px);justify-content:flex-start}
.pg-tag{display:inline-block;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:10px}
.part-head .pg-tag{color:var(--on-dark-muted);position:absolute;top:14px;right:18px;margin:0}
.part-head{position:relative}

/* header: brand, page counter, tools */
.hdr nav{display:none}
.hdr .spacer{flex:1;min-width:0}
.hdr{overflow:hidden;max-width:100vw}
body{overflow-x:hidden}
.pg-count{border:1px solid var(--line);background:var(--surface);color:var(--ink);border-radius:999px;padding:5px 12px;font:inherit;font-size:14px;font-weight:700;cursor:pointer;white-space:nowrap}

/* bottom bar */
.pgbar{position:fixed;left:0;right:0;bottom:0;z-index:30;display:flex;align-items:center;justify-content:center;gap:10px;
  padding:10px 12px calc(10px + env(safe-area-inset-bottom));background:var(--bg);border-top:1px solid var(--line)}
.pgbar button{font:inherit;cursor:pointer;border-radius:10px;min-height:46px}
.pgbar .nav{border:0;background:var(--ink);color:var(--bg);font-weight:700;padding:0 18px;min-width:110px}
.pgbar .nav:disabled{opacity:.3;cursor:default}
.pgbar .mid{border:1px solid var(--line);background:var(--surface);color:var(--ink);padding:0 14px;font-weight:700;min-width:120px}
.pgbar .mid small{display:block;font-weight:400;font-size:11px;color:var(--muted);line-height:1.1}

/* contents drawer */
.toc-back{position:fixed;inset:0;z-index:60;background:rgba(10,12,15,.55);display:none}
.toc-back.open{display:block}
.toc{position:absolute;right:0;top:0;bottom:0;width:min(420px,92vw);background:var(--bg);color:var(--ink);overflow-y:auto;padding:18px 16px calc(24px + env(safe-area-inset-bottom));box-shadow:-10px 0 40px rgba(0,0,0,.3)}
.toc h2{font-family:var(--head);font-size:22px;margin:0 0 10px}
.toc .grp{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--teal);margin:16px 0 6px}
.toc a{display:flex;gap:12px;padding:9px 10px;border-radius:8px;text-decoration:none;color:var(--ink);font-size:15px;line-height:1.3}
.toc a b{min-width:28px;color:var(--muted);font-variant-numeric:tabular-nums}
.toc a.cur{background:var(--surface);font-weight:700}
.toc a:hover{background:var(--surface)}
.toc .close{float:right;border:1px solid var(--line);background:var(--bg);color:var(--ink);border-radius:8px;min-height:40px;padding:0 12px;font:inherit;cursor:pointer}
.toc .jump{display:flex;gap:8px;margin:6px 0 4px}
.toc .jump input{width:90px;font-size:16px}

/* ---------- phone fixes ---------- */
/* wide figures scroll sideways instead of shrinking to unreadable */
.fig{position:relative}
.fig-hint{display:none;font-size:12px;color:var(--muted);text-align:center;margin-top:4px}
@media (max-width:700px){
  .fig{overflow-x:auto;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;margin:0 -16px;padding:0 16px}
  .fig > svg{min-width:var(--minw,600px)}
  .fig-hint{display:block}
}
/* every grid collapses to one column on phones, even ones with inline column sizes */
@media (max-width:560px){
  .g2,.g3,.g4,.g5,.g6{grid-template-columns:1fr !important}
  .card{padding:16px}
  .block > h2{font-size:26px}
  .part-head{padding:26px 20px}
  .hero h1{font-size:34px}
  .hdr{gap:8px;padding:0 10px}
  .hdr .tag{display:none}
  .trk-chip{max-width:118px;font-size:12px;padding:4px 8px}
  .pg-count .lg{display:none}
  .hdr .tools{gap:4px}
  .pgbar .nav{min-width:88px;padding:0 12px}
  .pgbar .mid{min-width:96px}
}
/* comfortable typing: 16px stops iOS zooming in, boxes grow with the text */
textarea,input[type=text],input[type=number]{font-size:16px !important;max-width:100%}
textarea{width:100%;min-height:110px;line-height:1.45;field-sizing:content}
.sa textarea{min-height:120px}
input[type=number]{min-width:110px}
/* bigger tap targets */
@media (pointer:coarse){
  .chip{min-height:44px;padding:9px 16px}
  .btn{min-height:46px}
  .iconbtn{min-height:40px;min-width:40px}
  input[type=range]{height:32px}
}
/* comparison tables become stacked cards on phones */
@media (max-width:640px){
  table.cmp.stack thead,table.cmp.stack tr:first-child:has(th){display:none}
  table.cmp.stack,table.cmp.stack tbody,table.cmp.stack tr,table.cmp.stack td{display:block;width:100%}
  table.cmp.stack tr{background:var(--surface);border-radius:10px;padding:10px 12px;margin-bottom:10px}
  table.cmp.stack td{border:0;padding:3px 0}
  table.cmp.stack td[data-label]::before{content:attr(data-label) ": ";font-weight:700;color:var(--muted)}
  table.cmp.stack td:first-child{font-size:17px}
  table.cmp.stack td:first-child::before{content:none}
}
/* assessment bar: smaller labels so they fit */
@media (max-width:560px){
  .abar{height:58px}
  .abar div{font-size:10px;overflow:hidden;padding:0 1px}
  .wk{grid-template-columns:1fr 1fr !important}
  .chain{gap:8px}
  .order-list{grid-template-columns:1fr 1fr !important}
  .rtiles{grid-template-columns:1fr 1fr !important}
  .rtile .v{font-size:30px}
}

/* ---------- print mode (?print): one 16:9 sheet per web page ---------- */
@page{size:1280px 720px;margin:0}
.print-deck *{-webkit-print-color-adjust:exact;print-color-adjust:exact;animation:none !important}
.print-deck body{background:#fff;overflow:visible}
.print-deck .hdr,.print-deck .pgbar,.print-deck .toc-back,.print-deck body > footer,.print-deck .trk-back,.print-deck #tip,.print-deck .fig-hint,.print-deck .kbd-hint{display:none !important}
.print-deck main{max-width:none;margin:0;padding:0}
.print-deck .sheet{width:1280px;height:720px;overflow:hidden;position:relative;box-sizing:border-box;padding:28px 48px 0;break-after:page;page-break-after:always;background:var(--bg)}
.print-deck .sheet-in > section{display:block !important;min-height:0 !important;padding-top:0 !important;margin-top:0 !important}
.print-deck .sheet-in > section.part-head{display:flex !important;margin-top:150px !important;min-height:300px !important}
.print-deck .fig{overflow:visible;margin:0;padding:0}
.print-deck .fig > svg{min-width:0}
.print-deck .sheet-foot{position:absolute;left:48px;right:48px;bottom:16px;display:flex;justify-content:space-between;gap:20px;font-size:13px;color:var(--muted);border-top:1px solid var(--line);padding-top:8px}
.print-deck .sheet-foot b{color:var(--ink)}
.print-deck details.tbl{display:none}
.print-deck .pg-tag{display:none}
/* print sheets always use the desktop layout, whatever width the printer reports */
.print-deck .g2{grid-template-columns:repeat(2,1fr) !important}
.print-deck .g3{grid-template-columns:repeat(3,1fr) !important}
.print-deck .g4{grid-template-columns:repeat(4,1fr) !important}
.print-deck .g5{grid-template-columns:repeat(5,1fr) !important}
.print-deck .g6{grid-template-columns:repeat(6,1fr) !important}
.print-deck .wk{grid-template-columns:repeat(7,1fr) !important}
.print-deck .order-list{grid-template-columns:repeat(5,1fr) !important}
.print-deck .rtiles{grid-template-columns:repeat(4,1fr) !important}
.print-deck .chain{flex-direction:row !important}
.print-deck .chain .arr{transform:none !important}
.print-deck .hb,.print-deck .axis{grid-template-columns:minmax(150px,240px) 1fr 54px !important}
.print-deck .abar{height:64px !important}
.print-deck .abar div{font-size:13px !important}
.print-deck .block > h2{font-size:36px !important}
.print-deck .hero h1{font-size:52px !important}
.print-deck .part-head{flex-direction:row !important;align-items:center !important;padding:36px 28px !important}
.print-deck .tile .v,.print-deck .rtile .v{font-size:38px !important}
.print-deck table.cmp.stack thead,.print-deck table.cmp.stack tr:first-child:has(th){display:table-row-group}
.print-deck table.cmp.stack tr:first-child:has(th){display:table-row}
.print-deck table.cmp.stack{display:table}.print-deck table.cmp.stack tbody{display:table-row-group}
.print-deck table.cmp.stack tr{display:table-row;background:none;padding:0}
.print-deck table.cmp.stack td{display:table-cell;width:auto;border-bottom:1px solid var(--line);padding:9px 10px}
.print-deck table.cmp.stack td::before{content:none !important}