/* classdoodle-focus.css - attention-aware study flow (stepper, focus timer,
   memo gate, reflection, lesson cards). Uses the palette tokens from
   classdoodle.css; without JS the hooks below stay hidden or inert. */

/* ---- focus timer ---- */
.cd-focus{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:.4rem 1rem;background:white;border:1px solid var(--line);padding:.8rem 1rem;margin:0 0 1rem}
.cd-focus-ring{width:52px;height:52px}
.cd-focus-ring svg{width:100%;height:100%;transform:rotate(-90deg)}
.cd-focus-ring circle{fill:none;stroke-width:4}
.cd-focus-ring .track{stroke:var(--line)}
.cd-focus-ring .fill{stroke:#2b7668;stroke-dasharray:100;stroke-dashoffset:100;stroke-linecap:round;transition:stroke-dashoffset 1s linear,stroke .4s}
.cd-focus.is-over .cd-focus-ring .fill{stroke:#c98a1f}
.cd-focus-readout{display:grid;gap:.1rem;min-width:0}
.cd-focus-time{font:800 1.4rem/1 Georgia,serif;color:var(--forest)}
.cd-focus-label{font-size:.8rem;color:var(--muted)}
.cd-focus.is-over .cd-focus-label{color:#8a5200}
.cd-focus-toggle{min-height:40px;padding:.6rem 1rem}
.cd-focus-status,.cd-focus-stats{grid-column:1/-1;margin:0;font-size:.8rem;color:var(--muted)}
.cd-focus-status:empty{display:none}
.cd-focus-card{background:var(--mint);border-left:4px solid #2b7668;padding:1rem 1.2rem;margin:0 0 1rem}
.cd-focus-card p{margin:.4rem 0 .8rem;line-height:1.55}
.cd-focus-actions,.cd-stepwise-actions,.cd-chunk-nav,.cd-step-nav{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem}

/* ---- break screen ---- */
.cd-break{position:fixed;inset:0;z-index:50;display:grid;place-items:center;padding:1rem;background:rgba(14,41,37,.88)}
.cd-break-panel{width:min(460px,100%);background:var(--paper);padding:2rem;text-align:left;box-shadow:var(--shadow)}
.cd-break-panel h2{font:750 2rem/1.05 Georgia,serif;margin:.4rem 0 1rem}
.cd-break-clock{display:block;font:800 2.4rem/1 Georgia,serif;color:var(--forest);margin-bottom:1rem}
.cd-break-panel li{margin:.4rem 0;line-height:1.5}

/* ---- activity stepper ---- */
.cd-stepbar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.6rem;margin:0 0 1rem}
.cd-stepper{display:flex;flex-wrap:wrap;gap:.35rem;list-style:none;margin:0;padding:0;counter-reset:none}
.cd-stepper button{display:flex;align-items:center;gap:.4rem;min-height:40px;border:1px solid var(--line);background:white;color:var(--muted);padding:.45rem .8rem;font:700 .82rem/1 inherit;cursor:pointer;border-radius:999px}
.cd-stepper button span{display:inline-grid;place-items:center;width:20px;height:20px;border-radius:50%;background:var(--line);color:var(--ink);font:800 .68rem monospace}
.cd-stepper button[aria-current="step"]{border-color:var(--forest);background:var(--forest);color:white}
.cd-stepper button[aria-current="step"] span{background:var(--lime);color:var(--forest)}
.cd-stepper button.is-done span{background:#2b7668;color:white}
.cd-step-count{margin:0;font:800 .72rem/1.3 monospace;letter-spacing:.08em;text-transform:uppercase;color:#2b7668}
.cd-linkish{background:none;border:0;padding:.3rem 0;color:#216b5d;font:800 .82rem/1 inherit;text-decoration:underline;cursor:pointer}

/* Step heads and step navigation only exist in guided (JS) mode. */
.cd-step-head,.cd-step-nav{display:none}
.is-guided .cd-step-head{display:block;margin:0}
.is-guided .cd-step-nav{display:flex;margin:1.2rem 0 .2rem}
.cd-step-head button{width:100%;display:flex;align-items:center;gap:.6rem;background:none;border:0;padding:.6rem 0;color:var(--muted);font:800 .9rem/1.2 inherit;text-align:left;cursor:pointer}
.cd-step-head button::after{content:"Open";margin-left:auto;font-size:.75rem;color:#216b5d}
.is-guided [data-step].is-current>.cd-step-head button{color:var(--forest)}
.is-guided [data-step].is-current>.cd-step-head button::after{content:""}
.is-guided [data-step]:not(.is-current):not([data-step="read"])>.cd-step-body{display:none}
.is-guided [data-step="read"]:not(.is-current)>.cd-step-body{opacity:.72}
.is-guided [data-step]:not(.is-current) .cd-step-nav{display:none}
.is-guided [data-step]{border-top:1px solid var(--line)}
.is-guided [data-step="read"]{border-top:0}
.is-guided .buddy[data-step]:not(.is-current){opacity:.8}
.is-guided [data-step].is-current{animation:cd-step-in .25s ease-out}
@keyframes cd-step-in{from{opacity:.4;transform:translateY(4px)}to{opacity:1;transform:none}}

/* ---- plan step ---- */
.cd-plan{background:#fbfbf7;border:1px dashed #879690;padding:1rem 1.2rem;margin:1rem 0}
.cd-plan p{margin:.3rem 0;line-height:1.55}
.cd-plan ul{list-style:none;padding:0;margin:.6rem 0;display:grid;gap:.35rem}
.cd-plan label{display:flex!important;gap:.5rem;align-items:flex-start;font-weight:600!important;margin:0!important}
.cd-plan input[type="checkbox"]{width:auto;margin-top:.2rem}
.cd-plan input[type="text"]{width:100%;padding:.75rem;border:1px solid var(--line);font:inherit}
.cd-plan-reminder{background:var(--mint);padding:.6rem .9rem;font-size:.88rem;margin:.6rem 0}

/* ---- memo gate + reflection ---- */
.cd-memo-gate{background:#fff7e6;border-left:4px solid #c98a1f;padding:1rem 1.2rem;margin:1rem 0}
.cd-memo-gate p{margin:.3rem 0 .7rem;line-height:1.55}
.cd-memo-gate ul{margin:.4rem 0 .8rem;padding-left:1.2rem;line-height:1.6}
.cd-memo-gate li.is-met{color:#216b5d;font-weight:700}
details.memo.is-locked>summary{color:var(--muted);cursor:not-allowed}
.cd-reflect{background:white;border:1px solid var(--line);border-left:4px solid #2b7668;padding:1rem 1.2rem;margin:1rem 0}
.cd-reflect h3{margin:.1rem 0 .6rem;font:700 1.15rem Georgia,serif}
.cd-choice{display:flex;flex-wrap:wrap;gap:.45rem;margin:.4rem 0 1rem}
.cd-choice button{min-height:40px;border:1px solid var(--forest);background:white;color:var(--forest);padding:.5rem .9rem;border-radius:999px;font:700 .85rem/1.2 inherit;cursor:pointer;text-align:left}
.cd-choice button[aria-pressed="true"]{background:var(--forest);color:white}
.cd-choice.chips button{border-color:var(--line);color:var(--ink);font-weight:600}
.cd-choice.chips button[aria-pressed="true"]{background:var(--mint);border-color:#2b7668;color:var(--forest)}
.cd-ack{font-weight:700;color:#216b5d;min-height:1.3em;margin:.4rem 0}

/* ---- lesson cards ---- */
.lesson-explanation.is-chunked .lesson-chunk{background:white;border:1px solid var(--line);border-left:4px solid #2b7668;padding:1.2rem 1.4rem;margin:1rem 0;min-height:6rem}
.lesson-chunk:focus{outline:none}
.lesson-chunk:focus-visible{outline:3px solid var(--coral);outline-offset:3px}
.cd-chunk-count{margin:.2rem 0;font:800 .72rem/1.3 monospace;letter-spacing:.08em;text-transform:uppercase;color:#2b7668}
.cd-chunk-nav{margin:.4rem 0 1.6rem}
.cd-dots{display:flex;gap:.3rem;flex:1;justify-content:center}
.cd-dot{width:28px;height:28px;border:0;background:none;padding:0;cursor:pointer;display:grid;place-items:center}
.cd-dot::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--line)}
.cd-dot.is-seen::before{background:#2b7668}
.cd-dot[aria-current="step"]::before{background:var(--coral);transform:scale(1.25)}
.cd-stepwise-note{font-size:.85rem;color:var(--muted);margin:.6rem 0}
.cd-flip-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:.6rem;margin:.8rem 0}
.cd-flip{display:grid;gap:.5rem;min-height:120px;text-align:left;background:white;border:1px solid var(--line);border-top:4px solid #2b7668;padding:1rem;cursor:pointer;font:inherit;color:var(--ink)}
.cd-flip-front{font-weight:800;color:#216b5d}
.cd-flip[aria-expanded="true"]{background:var(--mint)}
.cd-flip small{color:var(--muted);align-self:end}
.key-terms.is-flipped-away{display:none}

/* ---- small screens, motion, print ---- */
@media(max-width:620px){
  .cd-focus{grid-template-columns:auto 1fr}
  .cd-focus-toggle{grid-column:1/-1}
  .cd-stepper button{padding:.45rem .6rem}
  .cd-stepper button b{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .cd-stepper button[aria-current="step"] b{position:static;width:auto;height:auto;clip:auto}
  .cd-break-panel{padding:1.4rem}
}
@media(prefers-reduced-motion:reduce){
  .cd-focus-ring .fill{transition:none}
  .is-guided [data-step].is-current{animation:none}
  .cd-dot[aria-current="step"]::before{transform:none}
}
@media print{
  .cd-focus,.cd-focus-card,.cd-stepbar,.cd-step-nav,.cd-step-head,.cd-memo-gate,.cd-reflect,.cd-chunk-nav,.cd-stepwise-actions,.cd-break{display:none!important}
  .is-guided [data-step]>.cd-step-body{display:block!important;opacity:1!important}
  .lesson-chunk,.worked-example li{display:block!important}
}