/* 1.4 — one active task, with its tools close by.
   This is a layout layer over the existing workbook. Arabic reading size still
   follows the learner's font and A− / A+ preferences. There is deliberately no
   fixed page height, hidden page overflow, text truncation, or zoom transform. */
@media screen {
  .topbar{min-height:58px;height:auto;padding:7px max(3vw,16px);gap:12px;row-gap:7px}
  .brand{font-size:18px;gap:8px;letter-spacing:2px}.brand svg{width:34px}.brand small{font-size:8px;letter-spacing:2.6px}
  .top-actions{gap:10px}.language{gap:8px}.language select{min-height:42px;font-size:14px}
  .topbar .icon-button{width:44px;min-height:44px}.hzn-account-links a{font-size:13px;min-height:42px}
  .reader-controls{max-width:1280px;margin:auto;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:5px 18px;padding:5px 20px;background:#f5f6ed}
  .reader-controls .typography-toolbar{position:relative;display:flex;align-items:center;justify-content:flex-start;flex:0 1 auto;min-width:0;margin:0;padding:0;border:0;gap:10px;background:transparent}
  .reading-options{position:relative;min-width:0}.reading-options>summary{display:list-item;cursor:pointer;font-size:14px;line-height:1.65;padding:9px 6px;min-height:44px;color:#155f58;white-space:normal}
  .reading-options-panel{position:absolute;top:100%;inset-inline-start:0;z-index:12;width:300px;max-width:calc(100vw - 40px);padding:14px;display:flex;flex-wrap:wrap;gap:12px;background:#fffdf9;border:1px solid #bfcfc6;border-radius:12px;box-shadow:0 12px 32px #0b253b28}
  .reading-options:not([open])>.reading-options-panel{display:none}
  .reading-options-panel .typography-control{width:100%;justify-content:flex-start}.reading-options-panel select{max-width:100%}
  .reader-controls .typography-size-controls{flex:0 0 auto;gap:3px}.reader-controls .typography-size-controls button{padding:4px 9px;min-height:40px;min-width:40px}
  .reader-controls .typography-size-controls [data-typography-size]{min-width:3.2rem}
  .reader-controls .learner-toolbar{flex:1 1 480px;max-width:none;min-width:0;margin:0;padding:0;gap:7px 10px;background:transparent;border-radius:0}
  .reader-controls .learner-toolbar label{font-size:14px}.reader-controls .learner-toolbar select{max-width:230px;min-width:100px;min-height:40px;font-size:14px;padding:4px 8px}
  .reader-controls .learner-toolbar button{min-height:40px;padding:5px 9px;font-size:13px}.reader-controls .learner-toolbar [role=status]{font-size:12px;flex:1 1 120px;line-height:1.5}
  main{max-width:1280px;padding:10px 20px 16px;overflow-wrap:break-word}
  .lesson-heading{margin-bottom:9px;gap:20px;align-items:center}.lesson-heading h1{font-size:27px;line-height:1.4;margin:0}
  .lesson-heading .eyebrow{font-size:9px;letter-spacing:1px;line-height:1.5}.lesson-heading p:not(.eyebrow){font-size:12px;line-height:1.6;margin-top:1px}
  .progress-box{font-size:12px;min-width:185px;max-width:230px}.progress-box small{font-size:11px;line-height:1.4;display:block}.meter{height:5px;margin:4px 0}
  .activity-navigation{display:flex;align-items:stretch;gap:12px;margin-bottom:10px;flex-wrap:wrap}
  .activity-navigation .course-nav{display:flex;flex:0 1 auto;gap:6px;margin:0}.course-nav button{padding:5px 12px;min-height:44px;font-size:13px;gap:6px;line-height:1.5}.course-nav small{padding:2px 5px}
  .activity-navigation .stages{flex:1 1 400px;gap:6px;margin:0}.stage{min-height:44px;padding:5px 8px;font-size:14px;border-radius:10px;flex-direction:row;line-height:1.5}
  .activity{min-height:0;padding:14px 18px;border-radius:18px}.activity-header{margin-bottom:9px;align-items:center;gap:10px}.activity-header h2{font-size:20px;line-height:1.5}.activity-header p{font-size:12px;margin:1px 0;line-height:1.6}
  .activity-header .secondary{padding:5px 10px;min-height:42px}.activity .pill{font-size:12px;padding:3px 10px}
  .sound{font-size:14px;min-height:44px;padding:7px 13px;line-height:1.6;max-width:100%;white-space:normal}.sound svg{flex-shrink:0}
  .word-scene-layout{grid-template-columns:minmax(220px,.8fr) minmax(0,1.45fr);gap:22px;align-items:center}
  .media-switch{gap:6px;margin:0 0 7px;border:0;width:100%}.media-switch button{min-height:42px;padding:4px 7px;font-size:13px;line-height:1.4;gap:6px}.media-switch img{width:30px;height:30px}
  .sentence-scene{height:clamp(190px,34vh,340px);height:clamp(190px,34dvh,340px);width:100%;max-width:none;aspect-ratio:auto;border-radius:13px;box-shadow:none}
  .sentence-scene img{display:block;width:100%;height:100%;max-height:none;aspect-ratio:auto;object-fit:contain}
  .vocab-panel{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.2fr);gap:7px 15px;align-items:center}
  .word-reading{min-width:0}.activity .vocab-word{margin:0;line-height:1.5}.activity .translation{font-size:15px;line-height:1.55;margin:2px 0 8px}
  .sentence-block{min-width:0;margin:0;padding:7px 0;padding-inline-start:15px;border-top:0;border-inline-start:1px solid #dce3d6}.activity .sentence{margin:0 0 7px;line-height:1.9}.sentence-block .translation{font-size:13px}
  .vocab-panel>.text-button,.vocab-panel>.position-tags{grid-column:1/-1}.vocab-panel>.text-button{margin:0;min-height:35px;padding:3px 6px;font-size:12px}.position-tags{gap:6px}.position-tags>span{font-size:11px;line-height:1.4;padding:0 8px}
  .word-overview,.writing-notes{margin-top:10px;border-top:1px solid #dce3d6;color:#31534c}
  .word-overview>summary,.writing-notes>summary{cursor:pointer;padding:7px 2px;min-height:38px;font-size:14px;line-height:1.7}
  summary:focus-visible{outline:3px solid #bd692e;outline-offset:3px;border-radius:5px}
  .word-overview .group-nav{margin:5px 0 9px}.group-nav button{min-height:42px;line-height:1.4}.word-overview .vocab-strip{margin-top:8px;gap:9px}.vocab-strip img{max-height:80px}.vocab-strip span.arabic{line-height:1.6}
  .section-bottom{margin:2px 0 0;padding-top:6px;gap:10px}.section-bottom p{font-size:12px}.section-bottom .text-button{min-height:36px}
  .lesson-footer{position:sticky;bottom:0;z-index:4;gap:12px;margin-top:9px;padding:7px 0 max(7px,env(safe-area-inset-bottom));background:#f3efe5;box-shadow:0 -4px 12px #f3efe566;border-radius:10px}
  .lesson-footer .primary,.lesson-footer .secondary{min-height:44px;padding:6px 18px;font-size:14px}.lesson-footer span{font-size:12px;min-width:0;text-align:center}
  .preview-note{font-size:11px;line-height:1.6;margin:9px 0}.author-credit{font-size:12px;line-height:1.6;margin:7px 0;padding:0}
  .writing-workspace{display:grid;grid-template-columns:minmax(220px,.65fr) minmax(0,1.6fr);gap:24px;align-items:start}
  .writing-reference{min-width:0}.trace-help{margin-top:7px;border-top:1px solid #dce3d6}.trace-help>summary{cursor:pointer;padding:6px 2px;min-height:40px;font-size:12px;line-height:1.8;color:#31534c}.trace-help>summary .arabic{font-size:var(--reader-trace-example-size);line-height:1.5;margin-inline-start:8px}.writing-reference .form-tabs{grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}.form-tabs button{padding:3px 5px;min-height:44px}.form-tabs button[aria-pressed=true]{padding:2px 4px}.form-tabs span.arabic{line-height:1.35}.form-tabs small{font-size:12px;line-height:1.6}
  .trace-example{margin:6px 0;display:block;text-align:center}.trace-example span.arabic{line-height:1.6}.trace-example p{font-size:12px;margin:3px 0;line-height:1.6}.trace-example .trace-direction{font-size:12px!important;line-height:1.7!important}
  .writing-surface{min-width:0}.writing-surface .trace-wrap{width:min(100%,600px);margin:0 auto 8px;aspect-ratio:560/290}
  .pen-demo-tools{justify-content:center;gap:6px;margin:6px 0}.pen-demo-tools button{font-size:13px;padding:6px 11px;min-height:42px}.pen-demo-tools [role=status]{font-size:12px;line-height:1.5;text-align:center;min-height:18px;flex:0 1 220px}
  .writing-surface .trace-tools{justify-content:center;gap:6px;max-width:none}.trace-tools button{font-size:13px;padding:6px 11px;min-height:42px}.trace-tools .primary{margin-inline-start:0}
  .vowel-cards{margin:8px auto 0;max-width:none;grid-template-columns:1fr 1fr}.vowel-cards>div{padding:7px 12px}.activity .trace-note{font-size:12px;line-height:1.6;margin:6px 0}
  .story-layout{grid-template-columns:minmax(220px,1fr) minmax(0,1fr);gap:24px}.story-picture{height:clamp(200px,39vh,390px);height:clamp(200px,39dvh,390px);box-shadow:none;background:#f5f0e6}.story-picture img{width:100%;height:100%;aspect-ratio:auto;object-fit:contain}.activity .story-sentence{line-height:1.9;margin:6px 0}.story-steps{gap:9px;margin:12px 0 5px}.story-text>p:last-child{font-size:12px;margin:4px 0}
  .story-question{margin-top:14px;padding-top:12px}.story-options{margin:9px auto 0;gap:10px}.story-options img{max-height:140px}.story-question>p.arabic{margin:6px 0}.activity .feedback{min-height:32px;padding-top:4px;margin:5px 0}
  .quiz-switch{margin-bottom:12px}.sentence-choices{gap:12px;margin-top:14px}.sentence-choices .choice img{max-height:240px;height:30vh;height:30dvh;object-fit:contain}.letter-question{margin:12px 0}.alpha-choices{gap:12px}.alpha-choice{padding:8px}
  .alphabet-layout{grid-template-columns:minmax(0,1.8fr) minmax(230px,1fr);gap:18px}.alphabet-grid{grid-template-columns:repeat(7,minmax(0,1fr));gap:7px}.letter-card{min-height:86px;padding:0 4px 4px}.letter-focus{padding:14px}.letter-orbit{width:calc(var(--reader-letter-orbit-size) + 1rem);height:calc(var(--reader-letter-orbit-size) + 1rem);margin:0 auto 7px}.letter-focus h2.arabic{margin:0 0 6px}.mini-forms{margin-top:10px;gap:7px}.mini-forms small{font-size:11px}.joining-note{font-size:12px;line-height:1.6;margin:7px 0}
  .chapter-grid{gap:10px}.chapter-card{padding:9px 6px}.chapter-meter{margin:6px 0 4px}
  @media(min-width:901px) and (max-height:800px){.writing-surface .trace-wrap{max-width:520px}.letter-card{min-height:80px}.letter-focus .letter-orbit{font-size:calc(var(--reader-letter-orbit-size) * .88);width:calc(var(--reader-letter-orbit-size) + .5rem);height:calc(var(--reader-letter-orbit-size) + .5rem)}}
  @media(max-width:1100px){
    .word-scene-layout{grid-template-columns:minmax(190px,.8fr) minmax(0,1.3fr);gap:15px}.vocab-panel{grid-template-columns:1fr}.sentence-block{border-inline-start:0;border-top:1px solid #dce3d6;padding:9px 0 0;margin:4px 0 0}.activity .vocab-word{line-height:1.35}.vocab-panel>.position-tags{margin-top:3px}
    .alphabet-layout{grid-template-columns:minmax(0,1.65fr) minmax(220px,1fr)}.alphabet-grid{grid-template-columns:repeat(5,minmax(0,1fr))}
  }
  @media(max-width:900px){
    .reader-controls{padding-inline:14px;gap:4px 12px}.reader-controls .learner-toolbar{flex-basis:400px}.activity-navigation{gap:8px}.activity-navigation .stages{flex-basis:340px}.course-nav button{font-size:12px;padding-inline:10px}
    .writing-workspace{grid-template-columns:minmax(180px,.65fr) minmax(0,1.5fr);gap:14px}.writing-reference .form-tabs small{font-size:11px}.alphabet-layout{grid-template-columns:1fr}.alphabet-grid{grid-template-columns:repeat(7,minmax(0,1fr))}.letter-focus{display:grid;grid-template-columns:auto minmax(0,1fr);gap:6px 16px}.letter-orbit{grid-column:1;grid-row:1/4;margin:auto}.letter-focus h2,.letter-focus>.sound{grid-column:2}.mini-forms,.letter-focus>.joining-note,.letter-focus>.text-button{grid-column:1/-1}.letter-focus>.sound{justify-self:center}
  }
  @media(max-width:700px){
    .topbar{padding:7px 12px;gap:6px 10px;min-height:0}.topbar .brand{grid-row:1;grid-column:1}.topbar .brand{font-size:16px}.topbar .brand svg{width:29px}.top-actions>.language{grid-row:1;grid-column:2}.top-actions>#settings-button{grid-row:1;grid-column:3;width:40px;min-height:42px;height:42px}.topbar{grid-template-columns:minmax(0,1fr) auto auto}.hzn-account-links{grid-row:2;grid-column:1/-1;justify-content:flex-end;gap:6px}.hzn-account-links a{min-height:38px;font-size:12px;padding:4px 8px}.language select{width:100px;min-width:100px;max-width:100%;font-size:13px;padding-inline:8px}
    .reader-controls{padding:4px 12px;gap:5px}.reader-controls .typography-toolbar{justify-content:space-between;width:100%}.reading-options>summary{padding:6px;min-height:40px;font-size:13px}.reading-options-panel{width:280px}.reader-controls .learner-toolbar{flex-basis:100%;gap:6px}.reader-controls .learner-toolbar label{font-size:12px}.reader-controls .learner-toolbar select{flex:1;max-width:none;min-width:90px}.reader-controls .learner-toolbar [role=status]{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.reader-controls .typography-size-controls{justify-content:flex-end}
    main{padding:8px 12px 12px}.lesson-heading{gap:10px;margin-bottom:8px;align-items:start}.lesson-heading h1{font-size:25px}.lesson-heading .eyebrow{font-size:8px}.lesson-heading p:not(.eyebrow){font-size:11px}.progress-box{min-width:95px;max-width:140px;font-size:11px;padding:0}.progress-box small{font-size:10px}
    .activity-navigation{display:block;margin-bottom:8px}.activity-navigation .course-nav{margin-bottom:7px}.course-nav button{flex:1;justify-content:center;min-height:40px;font-size:12px}.activity-navigation .stages{gap:5px}.stage{font-size:12px;min-height:43px;padding:5px 3px;line-height:1.4}
    .activity{padding:11px 12px;border-radius:14px}.activity-header{margin-bottom:8px;align-items:start}.activity-header h2{font-size:19px}.activity-header p{font-size:11px}.activity-header .secondary{font-size:11px;min-height:40px;padding:5px 8px}.activity .pill{font-size:11px;padding:3px 8px}
    .word-scene-layout{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);grid-template-areas:"switch switch" "picture word" "sentence sentence" "meaning meaning" "tags tags";gap:8px 12px}.word-scene-layout .illustration-panel,.word-scene-layout .vocab-panel{display:contents}.word-scene-layout .media-switch{grid-area:switch}.word-scene-layout .sentence-scene{grid-area:picture}.word-scene-layout .word-reading{grid-area:word}.word-scene-layout .sentence-block{grid-area:sentence}.word-scene-layout #meaning-toggle{grid-area:meaning}.word-scene-layout .position-tags{grid-area:tags}.sentence-scene{height:clamp(140px,21vh,180px);height:clamp(140px,21dvh,180px);max-width:none}.media-switch{gap:6px;justify-content:center}.media-switch button{font-size:12px;min-height:40px;padding:4px 8px}.media-switch img{width:28px;height:28px}.vocab-panel{gap:6px;grid-template-columns:1fr}.activity .vocab-word{line-height:1.5}.activity .sentence{line-height:1.9}.activity .translation{font-size:14px}.sentence-block{padding-top:8px;margin-top:4px}.sound{font-size:13px;min-height:44px;padding:7px 12px}
    .word-overview>summary,.writing-notes>summary{font-size:13px}.word-overview .vocab-strip{grid-template-columns:repeat(5,minmax(0,1fr));gap:5px}.word-overview .vocab-strip span.arabic{font-size:var(--reader-strip-word-size);line-height:1.7}.vocab-strip img{max-height:65px}.group-nav{gap:5px}.group-nav button{font-size:11px;gap:2px}.section-bottom{flex-wrap:wrap;gap:5px}
    .lesson-footer{margin-top:7px;padding-top:6px;gap:7px}.lesson-footer .primary,.lesson-footer .secondary{min-width:80px;font-size:13px;padding:6px 12px}.lesson-footer span{font-size:11px}
    .writing-workspace{grid-template-columns:1fr;gap:8px}.writing-reference .form-tabs{grid-template-columns:repeat(4,minmax(0,1fr));gap:5px}.form-tabs span.arabic{font-size:var(--reader-form-size);line-height:1.45}.form-tabs small{font-size:10px}.trace-example{margin:4px 0}.trace-example span.arabic{font-size:var(--reader-trace-example-size)}.trace-example p{font-size:11px}.trace-example .trace-direction{font-size:11px!important}.writing-surface .trace-wrap{max-width:520px;margin-top:0}.pen-demo-tools{gap:5px}.trace-tools button,.pen-demo-tools button{font-size:12px;padding:6px 9px;min-height:43px}.pen-demo-tools [role=status]{font-size:11px;flex-basis:100%}.writing-surface .trace-tools{gap:5px}.vowel-cards{grid-template-columns:1fr;gap:7px}.vowel-cards>div{flex-direction:row}.vowel-cards b.arabic{flex:0 1 auto}
    .story-layout{grid-template-columns:1fr;gap:11px}.story-picture{height:clamp(170px,30vh,275px);height:clamp(170px,30dvh,275px)}.story-text .pill{display:inline-block}.story-text .translation{font-size:14px}.story-steps{margin:10px 0 3px}.story-options{gap:6px}.story-options img{max-height:110px}.sentence-choices{gap:6px}.sentence-choices .choice img{height:clamp(90px,20vh,160px);height:clamp(90px,20dvh,160px)}
    .alphabet-grid{grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}.letter-card{min-height:76px}.mini-forms{gap:5px}.mini-forms small{font-size:10px}.letter-focus{padding:12px;grid-template-columns:auto minmax(0,1fr);gap:5px 10px}.letter-focus>.sound{min-width:0;font-size:12px}.letter-orbit{max-width:100%}.chapter-grid{gap:8px}
  }
  @media(max-width:440px){
    .lesson-heading{flex-direction:row;gap:9px}.lesson-heading>div:first-child{flex:1;min-width:0}.progress-box{display:block;flex:0 1 115px;width:auto;max-width:115px;min-width:95px}.progress-box .meter{margin:4px 0}.progress-box small{text-align:start}
    .letter-focus{display:flex;flex-direction:column;align-items:center}.letter-orbit{margin:4px auto}.mini-forms{width:100%;margin-top:7px}.word-overview .vocab-strip{grid-template-columns:repeat(3,minmax(0,1fr))}.writing-reference .form-tabs{grid-template-columns:repeat(4,minmax(0,1fr))}
  }
  @media(max-width:360px){.brand small{font-size:7px;letter-spacing:1.7px}.topbar .brand{font-size:14px;gap:5px}.topbar .brand svg{width:24px}.topbar{gap:5px}.language select{width:91px;min-width:91px}.alphabet-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.reader-controls .typography-size-controls [data-typography-size]{min-width:2.8rem}.stage{font-size:11px}}
  @media(orientation:landscape) and (max-height:550px) and (min-width:600px){
    .word-scene-layout{grid-template-columns:minmax(180px,.8fr) minmax(0,1.2fr)}.sentence-scene{height:220px}.writing-workspace{grid-template-columns:minmax(170px,.65fr) minmax(0,1.3fr)}.writing-reference .form-tabs{grid-template-columns:repeat(2,minmax(0,1fr))}.story-layout{grid-template-columns:1fr 1fr}.story-picture{height:240px}
  }
}