/* Pass D — single-screen classroom workspace and practical mathematics working. */

body[data-view="home"],body[data-view="puzzle"]{min-width:300px}
body[data-view] #app{min-width:0}
.home-compact{max-width:1560px;width:100%;margin:0 auto;padding:22px 30px 20px;
  display:grid;grid-template-columns:minmax(295px,.73fr) minmax(0,1.58fr);
  gap:20px;min-height:0}
.home-story{border:1px solid #cfbfa2;background:radial-gradient(circle at 45% 40%,#f8efde,#f0e5ce);
  padding:clamp(20px,2.5vw,35px);min-height:0;
  box-shadow:inset 0 0 0 7px #f4ead7;display:flex;flex-direction:column;justify-content:space-between}
.home-story .eyebrow{font-size:10px;line-height:1.6}
.home-story h1{font:500 clamp(33px,3.7vw,57px)/1.18 'Cinzel',Georgia,serif;
  margin:20px 0 16px;letter-spacing:-.045em}
.home-story h1 em{font-style:normal;color:#a17b43}
.home-lead{font-size:clamp(12px,1.05vw,15px);line-height:1.75;color:#665e50;max-width:365px}
.home-story-art{height:clamp(105px,19vh,190px);position:relative;display:grid;place-items:center}
.home-art-ring{position:absolute;border:1px solid #bda987;border-radius:50%;
  width:clamp(100px,15vh,170px);height:clamp(100px,15vh,170px);
  box-shadow:0 0 0 10px #eadcc633,inset 0 0 0 12px #f0e2c833}
.home-art-symbol{position:relative;font:clamp(75px,12vh,138px) Georgia,serif;color:#b2925c;transform:rotate(-15deg);line-height:1}
.home-art-caption{position:absolute;bottom:0;font:9px 'Cinzel',serif;letter-spacing:.12em;color:#8d7555}
.home-steps{display:flex;flex-wrap:wrap;gap:8px 12px;padding:13px 0;
  border-top:1px solid #d0bf9e;color:#675d4c;font-size:11px}
.home-steps span{white-space:nowrap}
.home-steps b{font:700 16px 'Cinzel',serif;color:#9d7e4a;margin-right:6px}
.home-start{width:100%;display:flex;justify-content:space-between;align-items:center;margin:12px 0 13px}
.home-story .footnote{margin:0;font-size:9px;line-height:1.5}
.home-library{min-height:0;display:flex;flex-direction:column}
.home-library-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:10px;
  padding:4px 4px 15px;border-bottom:1px solid #ccbb9f}
.home-library-heading h2{font:500 clamp(26px,2.8vw,38px) 'Cinzel',serif;margin:5px 0 0}
.home-library-heading p{color:#827461;margin:0 0 6px;font-size:11px;text-align:right}
.home-puzzle-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  grid-template-rows:repeat(3,minmax(0,1fr));gap:11px;flex:1;min-height:0;padding-top:13px}
.home-challenge-card{min-height:0!important;display:block;position:relative;
  padding:13px 15px!important;box-shadow:none!important;
  transition:background .18s,transform .18s}
.home-challenge-card::before{inset:5px}
.home-challenge-card .mini-pile{width:clamp(95px,10vw,143px);height:92px;top:15px;right:12px}
.home-card-number{font-size:9px;font-weight:700;letter-spacing:.1em;color:#997646;
  display:block;position:relative;z-index:1}
.home-card-copy{display:flex;flex-direction:column;gap:5px;margin-top:clamp(14px,2.9vh,30px);
  position:relative;z-index:1;max-width:76%}
.home-card-title{font:600 clamp(14px,1.38vw,20px)/1.3 'Cinzel',Georgia,serif}
.home-card-desc{font-size:clamp(10px,.84vw,12px);line-height:1.5;color:#776a58;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.home-card-bottom{display:flex;justify-content:space-between;align-items:center;
  position:absolute;bottom:11px;left:15px;right:15px;font-size:9px;font-weight:700;
  color:#856f4e;letter-spacing:.055em}
.home-card-go{color:#3f5d4b}
.home-challenge-card:hover{background:#fff6e6}
.home-compact .challenge-card:hover{transform:translateY(-2px)}
/* Working panel: always in the same right-hand context as the answer. */
.working-pad-mount{width:100%;margin:10px 0 0;min-height:0}
.ws-root{border:1px solid #c4ae86;background:#f9f1e0;padding:10px 10px 8px;
  width:100%;min-width:0}
.ws-header{display:flex;align-items:center;justify-content:space-between;
  gap:5px;margin-bottom:10px}
.ws-title{font:700 10px 'Cinzel',serif;white-space:nowrap;letter-spacing:.04em;color:#756346}
.ws-tabs{display:flex;gap:4px;min-width:0}
.ws-action{border:1px solid #b6a281;background:#f7edde;color:#68563b;
  cursor:pointer;font:700 10px 'DM Sans',sans-serif;padding:6px 8px}
.ws-action:hover{background:#e9dbc0}
.ws-action:disabled{opacity:.44;cursor:default}
.ws-tab{white-space:nowrap;padding:7px 9px}
.ws-tab.active{background:#3a5748;color:#fff3da;border-color:#3a5748}
.ws-body{min-width:0}
.ws-math-keys{display:flex;gap:4px;flex-wrap:wrap;margin-bottom:8px}
.ws-math-keys .ws-key{font-size:12px;min-width:32px;padding:5px 8px;background:#fff9eb}
.ws-line-list{display:flex;flex-direction:column;gap:6px;max-height:260px;overflow-y:auto;padding-right:3px}
.ws-math-row{display:grid;grid-template-columns:23px minmax(0,1fr) 27px 27px;
  align-items:center;gap:4px;min-width:0}
.ws-line-no{font:700 10px 'Cinzel',serif;color:#9c855a}
.ws-math-field,.ws-math-fallback{display:block;min-width:0;width:100%;min-height:37px;
  border:1px solid #c6b391;background:#fffaf0;color:#34362f;
  padding:7px 9px;box-sizing:border-box;font-size:17px;line-height:1.45;border-radius:0}
.ws-math-field:focus-within,.ws-math-fallback:focus{outline:2px solid #9e7b43;outline-offset:0}
.ws-math-field{--caret-color:#405b4e;--selection-background-color:#d4e2d2;
  --contains-highlight-background-color:#f5e5bb}
.ws-line-icon{font-size:17px;padding:0;height:29px;width:27px}
.ws-remove{color:#8b604e}
.ws-maths-toolbar{display:flex;gap:9px;align-items:center;margin:10px 0 0;flex-wrap:wrap}
.ws-line-caption{font-size:9px;color:#86755c;line-height:1.5}
.ws-add-line{padding:7px 9px;background:#e5d6b8}
.ws-help{font-size:10px;color:#81715a;line-height:1.55;margin:9px 0 0}
.ws-ink-tools{display:flex;gap:5px;flex-wrap:wrap;margin-bottom:8px}
.ws-ink-tools [aria-pressed="true"]{background:#3b5848;color:#fff1db;border-color:#3b5848}
.ws-ink-frame{height:clamp(170px,30vh,270px);position:relative;
  border:1px solid #b9a886;background-color:#fff9eb;
  background-image:radial-gradient(#c6b89e 0.7px,transparent 0.7px);
  background-size:18px 18px;overflow:hidden}
.ws-ink-canvas{width:100%;height:100%;display:block;touch-action:none;cursor:crosshair}
.ws-ink-frame::after{content:'DRAW HERE';position:absolute;right:10px;bottom:8px;
  pointer-events:none;color:#d3c6ae;font:700 9px 'Cinzel',serif;letter-spacing:.1em}
@media(min-width:900px){
  body[data-view="home"],body[data-view="puzzle"]{height:100dvh;overflow:hidden}
  body[data-view] #app{height:100dvh;display:flex;flex-direction:column;overflow:hidden}
  body[data-view] header{width:100%;max-width:1560px;height:62px;min-height:62px;
    padding:0 30px;flex:0 0 62px}
  body[data-view] .brand{font-size:15px}
  body[data-view] footer{max-width:1560px;flex:0 0 34px;height:34px;width:100%;
    padding:6px 30px;border-top:1px solid #d1c2a3;line-height:1.6}
  body[data-view="home"] .home-compact{flex:1;height:0;overflow:hidden}
  body[data-view="puzzle"] footer{display:none}
  body[data-view="puzzle"] .challenge-main{max-width:1560px;width:100%;padding:10px 25px 9px;
    flex:1;min-height:0;display:flex;flex-direction:column}
  body[data-view="puzzle"] .challenge-heading{flex:0 0 auto;margin:0 0 9px;
    padding:0 20px 0 95px;min-height:70px}
  body[data-view="puzzle"] .challenge-heading .back{top:6px;left:0;font-size:9px}
  body[data-view="puzzle"] .challenge-heading h1{
    font-size:clamp(24px,2.25vw,34px);margin:2px 0 3px}
  body[data-view="puzzle"] .challenge-heading p:not(.challenge-tags){
    font-size:11px;line-height:1.35;margin:0 auto;white-space:nowrap;
    max-width:700px;text-overflow:ellipsis;overflow:hidden}
  body[data-view="puzzle"] .challenge-tags{margin-top:5px;gap:4px}
  body[data-view="puzzle"] .challenge-tags span{padding:3px 6px;font-size:8px}
  body[data-view="puzzle"] .challenge-layout{
    flex:1;min-height:0;grid-template-rows:minmax(0,1fr);
    grid-template-columns:minmax(0,1.57fr) minmax(355px,.86fr);
    gap:12px;align-items:stretch}
  body[data-view="puzzle"] .tablet{height:100%;min-height:0;overflow:hidden;
    display:flex;flex-direction:column;padding:7px}
  body[data-view="puzzle"] .tablet-bar{height:34px;min-height:34px}
  body[data-view="puzzle"] .tablet-inside{flex:1;height:0;min-height:0;padding:5px 7px 25px}
  body[data-view="puzzle"] #diagram{height:100%;width:100%;min-height:0}
  body[data-view="puzzle"] #diagram svg{height:100%;width:100%;min-height:0}
  body[data-view="puzzle"] .side{height:100%;min-height:0;overflow:hidden;
    padding:13px 14px 9px;display:flex;flex-direction:column}
  body[data-view="puzzle"] .side .rule{display:none}
  body[data-view="puzzle"] .side h2{font-size:19px;margin:6px 0 4px}
  body[data-view="puzzle"] .side .description{font-size:10px;line-height:1.45;
    margin:0 0 7px}
  body[data-view="puzzle"] .facts{padding:8px 0;margin:0 0 6px}
  body[data-view="puzzle"] .facts strong{font-size:19px}
  body[data-view="puzzle"] .status-strip{padding:6px 0 0;font-size:9px}
  body[data-view="puzzle"] .progress-track{margin:5px 0 8px}
  body[data-view="puzzle"] #inspector{flex:1;min-height:0;overflow-y:auto;
    overscroll-behavior:contain;padding:10px 11px}
  body[data-view="puzzle"] .side-bottom,body[data-view="puzzle"] .challenge-bottom{display:none}
  body[data-view="puzzle"] .inspector .inspect-field{margin:7px 0}
  body[data-view="puzzle"] .inspector .inspect-intro{margin:5px 0 8px;line-height:1.5}
  body[data-view="puzzle"] .inspector .inspect-title{margin:5px 0 4px}
  body[data-view="puzzle"] .inspector .solution-disclaimer{font-size:10px}
  body[data-view="puzzle"] .hint-area{margin-top:8px;padding-top:8px}
  body[data-view="puzzle"] .hint-button{padding:7px 9px}
  body[data-view="puzzle"] .panel-actions{margin-top:10px;padding-top:4px}
}
@media(min-width:900px) and (max-height:740px){
  .home-compact{padding-top:12px;padding-bottom:12px;gap:12px}
  .home-story h1{font-size:clamp(31px,3.25vw,43px);margin:11px 0}
  .home-story-art{height:85px}
  .home-art-ring{height:78px;width:78px}
  .home-art-symbol{font-size:75px}
  .home-art-caption{display:none}
  .home-library-heading{padding-bottom:8px}
  .home-puzzle-grid{gap:7px;padding-top:8px}
  .home-card-copy{margin-top:10px}
  .home-card-title{font-size:15px}
  .home-card-desc{font-size:10px;-webkit-line-clamp:2}
  .home-challenge-card{padding:10px 12px!important}
  .home-challenge-card .mini-pile{width:100px;top:10px;right:8px}
  .home-card-bottom{bottom:7px;left:12px;right:12px}
  body[data-view="puzzle"] .challenge-heading{min-height:58px}
  body[data-view="puzzle"] .challenge-tags{display:none}
  .ws-line-list{max-height:150px}
  .ws-ink-frame{height:170px}
}
@media(max-width:899px){
  body[data-view] #app{height:auto;display:block;overflow:visible}
  .home-compact{display:block;padding:18px 20px;max-width:780px}
  .home-story{padding:25px;margin-bottom:22px;min-height:0}
  .home-story h1{font-size:clamp(34px,6vw,54px)}
  .home-story-art{display:none}
  .home-story-bottom{margin-top:12px}
  .home-puzzle-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
    grid-template-rows:auto;gap:12px}
  .home-challenge-card{min-height:168px!important}
  .home-card-title{font-size:16px}
  .home-card-copy{margin-top:30px}
  .home-card-desc{font-size:11px}
  .home-library-heading{margin-bottom:0}
  body[data-view="puzzle"] .challenge-layout{grid-template-columns:1fr}
  body[data-view="puzzle"] .tablet-inside{min-height:360px}
  body[data-view="puzzle"] .side{min-height:0;overflow:visible}
  body[data-view="puzzle"] #inspector{overflow:visible;max-height:none}
  .ws-ink-frame{height:240px}
}
@media(max-width:560px){
  .home-compact{padding:14px}
  .home-story{padding:17px}
  .home-story h1{font-size:36px}
  .home-library-heading h2{font-size:28px}
  .home-library-heading p{display:none}
  .home-puzzle-grid{grid-template-columns:1fr;gap:10px}
  .home-challenge-card{min-height:154px!important}
  .home-card-copy{margin-top:30px;max-width:67%}
  .home-challenge-card .mini-pile{width:115px}
  .home-card-title{font-size:18px}
  .home-card-desc{font-size:11px}
  .ws-root{padding:8px}
  .ws-tab{padding:6px 7px;font-size:10px}
  .ws-line-list{max-height:260px}
  .ws-math-row{grid-template-columns:19px minmax(0,1fr) 25px 25px}
  .ws-line-icon{width:25px}
  .ws-ink-frame{height:220px}
}