@import url('/tools/flashcard-assets/style.css');
main{padding-top:1.5rem}.heading{margin-bottom:1.4rem}.heading h1{font-size:clamp(2.6rem,4.5vw,3.5rem)}
.timer-workspace{display:grid;grid-template-columns:340px minmax(0,1fr);gap:2.3rem;border-top:3px solid var(--ink);padding-top:1.5rem;align-items:start}.setup{padding-right:1.7rem}.setup label{margin:.7rem 0 .3rem}.setup label input,.setup label textarea,.setup label select{margin-top:.25rem}.presets{display:grid;grid-template-columns:repeat(3,1fr);gap:.4rem;margin:1rem 0}.time-fields{display:grid;grid-template-columns:1fr 1fr;gap:.6rem}.setup details{border-top:1px solid var(--rule);margin-top:1.2rem;padding-top:.8rem}.setup summary,.use-help summary{cursor:pointer;font-weight:600}.setup details>.hint{margin:.6rem 0}.setup .inline{align-items:center}.setup .inline label{flex:1;min-width:0}.setup .inline button{flex:none;font-size:.9rem}.setup .actions{margin:.65rem 0}.check{display:flex!important;gap:.6rem;align-items:start;font-weight:400}.check input[type=checkbox]{width:20px;min-height:20px;height:20px;margin:.18rem 0 0;flex:none;accent-color:var(--red)}.stage-row{padding:.7rem 0;border-bottom:1px solid var(--rule)}.stage-row .stage-actions{display:flex;gap:.4rem;margin-top:.5rem}.stage-actions button{font-size:.8rem;padding:.3rem .45rem;min-height:36px}.stage-row .time-fields label{margin-top:.3rem}.stage-row textarea{font-size:.95rem}.timer-side{min-width:0}.screen-top{display:flex;justify-content:space-between;align-items:center;gap:1rem}.screen-top button{font-size:.9rem}#screen{background:#f5f5f2;border:1px solid #d5d6d2;padding:1.4rem 1.8rem 1.7rem;--accent:#276354;--screen-ink:#171819;--screen-bg:#f5f5f2;color:var(--screen-ink);container-type:inline-size}#screen[data-theme=dark]{--screen-ink:#f4f3ed;--screen-bg:#202726;--accent:#9dcbbc;background:var(--screen-bg);border-color:#202726}#screen[data-theme=dark] .eyebrow,#screen[data-theme=dark] .hint{color:#c7d5d0}#screen[data-theme=dark] button{background:#293431;color:#f4f3ed;border-color:#8b9c95}#screen[data-theme=dark] .primary{background:#9dcbbc;color:#13231e;border-color:#9dcbbc}#screen[data-theme=dark] .primary:hover{background:#c5e2d8!important}#screen h2{font:400 clamp(1.6rem,4cqw,3rem)/1.2 var(--reading);margin:1.9rem 0 .8rem;overflow-wrap:anywhere;text-align:center}#display-instructions{white-space:pre-wrap;text-align:center;font-size:clamp(1.1rem,3cqw,1.8rem);line-height:1.4;max-width:45ch;margin:.6rem auto;overflow-wrap:anywhere}#clock{font:500 clamp(3rem,18cqw,9rem)/1.35 var(--mono);letter-spacing:-.065em;text-align:center;font-variant-numeric:tabular-nums;margin:.2rem 0 .7rem;white-space:nowrap}#bar{height:17px;background:#d7dfdb;margin:.7rem 0;overflow:hidden}#bar-fill{height:100%;width:100%;background:var(--accent)}#screen[data-warning=true]{--accent:#9a611a}#screen[data-theme=dark][data-warning=true]{--accent:#ffd08d}#screen[data-finished=true]{--accent:#b52d27}#screen[data-theme=dark][data-finished=true]{--accent:#f0a69f}#state{text-align:center;font-weight:600;margin:.85rem 0 1rem;min-height:1.5em}.main-controls,.adjustments{display:flex;justify-content:center;gap:.55rem;flex-wrap:wrap}.main-controls .primary{min-width:135px;font-size:1.2rem}.adjustments{margin:.75rem 0 0}.adjustments button{font-size:1rem;min-width:90px}#up-next{border-top:1px solid #a8b3ad;margin:1.3rem 0 0;padding:.75rem 0 0;text-align:center;overflow-wrap:anywhere}#wake-status{text-align:center;margin:.55rem 0 0;font-size:.8rem}.screen-help{margin:.7rem 0 1.1rem;font-size:.88rem}.plan-heading{display:flex;justify-content:space-between;align-items:center;gap:1rem;border-top:1px solid var(--rule);padding-top:1rem}#plan-list{padding:0;list-style:none;margin:.6rem 0}#plan-list li{display:flex;align-items:center;justify-content:space-between;gap:.6rem;border-bottom:1px solid var(--rule);padding:.5rem .6rem}#plan-list li.current{border-left:3px solid var(--green);background:var(--soft)}#plan-list button{font-weight:400;border:none;background:transparent;text-align:left;min-height:36px;padding:.2rem 0;overflow-wrap:anywhere}#plan-list span{white-space:nowrap;font-size:.9rem;color:var(--muted)}.use-help{border-top:1px solid var(--rule);margin-top:2rem;padding-top:1rem}.use-help p{color:var(--muted);font-size:1rem;max-width:80ch;margin:.75rem 0}#notice{overflow-wrap:anywhere}.presenting{overflow:hidden}.presenting #screen{position:fixed;inset:0;z-index:20;overflow:auto;border:0;padding:1.2rem max(1rem,calc((100vw - 1100px)/2));container-type:normal;display:flex;flex-direction:column;justify-content:center;min-height:100dvh}.presenting #clock{font-size:clamp(3.5rem,min(19vw,24vh),13rem);line-height:1.2;margin:0}.presenting #screen h2{font-size:clamp(1.5rem,4vw,3.2rem);margin:.9rem 0 .5rem}.presenting #display-instructions{font-size:clamp(1rem,2.6vw,2rem);max-width:65ch;margin:.5rem auto}.presenting #screen .screen-top{margin-bottom:auto}.presenting #screen .adjustments{margin-bottom:.3rem}.presenting #up-next{margin-top:1rem}.presenting #bar{flex:none}.presenting #state{margin:.55rem 0}.presenting #screen button{min-height:44px}
@media(max-width:1000px){.timer-workspace{grid-template-columns:300px minmax(0,1fr);gap:1.4rem}.setup{padding-right:1rem}#screen{padding:1.1rem}main{padding-inline:1.5rem}}
body:not(.presenting) #screen h2{margin-top:1.1rem}body:not(.presenting) #clock{font-size:clamp(3rem,17cqw,7.5rem);line-height:1.15;margin-bottom:.5rem}
@media(max-width:740px){.timer-workspace{display:flex;flex-direction:column;gap:1.3rem}.timer-side{order:-1;width:100%}.setup{width:100%;padding:1rem 0 0;border:0;border-top:2px solid var(--ink)}main{padding-inline:1rem}#screen h2{margin-top:1rem}#clock{font-size:20cqw}.screen-help{font-size:.8rem}.main-controls button{padding:.5rem .65rem}.main-controls .primary{min-width:90px}.presenting #screen{justify-content:start}.presenting #screen .screen-top{margin-bottom:1rem}.presenting #clock{font-size:20vw}.presenting #display-instructions{font-size:1.2rem}.presenting #screen h2{font-size:1.8rem}}
/* Keep the main controls in view on a typical classroom laptop. */
body:not(.presenting) #screen{padding-top:1.1rem;padding-bottom:1.2rem}
body:not(.presenting) #screen h2{margin-top:.7rem}
body:not(.presenting) #clock{font-size:clamp(3rem,16cqw,6.5rem);line-height:1.1;margin-bottom:.35rem}
body:not(.presenting) #state{margin:.45rem 0 .6rem}
body:not(.presenting) .adjustments{margin-top:.5rem}
/* Keep error feedback legible after the layout rollback. */
#notice{font-size:.95rem;color:var(--green);margin:.65rem 0}#notice:empty{display:none}#notice.error{color:var(--red)}#screen #notice{text-align:center;color:var(--accent)}#screen[data-theme=dark] #notice.error{color:#f0a69f}summary:focus-visible,#screen:focus-visible{outline:3px solid #1261a0;outline-offset:4px}
/* Activity names and times stay visible; open one row to edit it. */
.setup .plan-example{display:grid;gap:.6rem;background:var(--soft);padding:.8rem;margin:.8rem 0 1rem}
.setup .plan-example label{margin:0}.plan-example button{justify-self:start;font-size:.95rem}
.setup .stage-row{padding:0;margin:.5rem 0;border:1px solid var(--rule);background:#fff}
.stage-row>summary{display:flex;align-items:center;gap:.5rem;padding:.7rem;font-weight:400;list-style:none;min-height:48px}
.stage-row>summary::-webkit-details-marker{display:none}.stage-row>summary::after{content:'+';font-size:1.3rem;flex:none}.stage-row[open]>summary::after{content:'−'}
.stage-number{font-size:.85rem;color:var(--muted);flex:none}.stage-name{flex:1;min-width:0;overflow-wrap:anywhere;font-weight:600}.stage-time{flex:none;font:500 .85rem var(--mono)}
.setup .stage-row>label,.stage-row>.time-fields,.stage-row>.stage-actions,.setup .stage-row>.stage-instructions{margin:.6rem .7rem}
.setup .stage-row[open]>summary{border-bottom:1px solid var(--rule);background:var(--soft)}
.setup .stage-row .stage-instructions{border:0;padding:0}.stage-instructions>summary{font-size:.9rem;font-weight:400}.stage-instructions label{font-size:.85rem}
.stage-row .stage-actions{flex-wrap:wrap}.stage-actions button{min-height:44px}.stage-row .time-fields label{font-size:.9rem}
.setup .plan-behaviour{border:0;margin:.9rem 0;padding:0}.plan-behaviour summary{font-weight:400;font-size:.95rem}
.plan-apply{border-top:2px solid var(--ink);padding-top:.8rem;margin-top:1rem}.plan-apply #plan-total{font-weight:600;margin:0}.plan-apply .hint{margin:.35rem 0 .65rem}.plan-apply button{width:100%}
/* A phone held sideways needs a shorter display, with the task beside the time. */
@media(orientation:landscape) and (max-height:500px){
 .presenting #screen{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);grid-template-rows:auto minmax(60px,1fr) auto auto auto auto;align-content:start;gap:.3rem .8rem;height:100dvh;min-height:0;padding:.5rem max(.6rem,env(safe-area-inset-right),env(safe-area-inset-left));overflow:auto}
 .presenting #screen .screen-top{grid-column:1/-1;grid-row:1;margin:0;gap:.5rem}.presenting .screen-top .eyebrow{font-size:.8rem}
 .presenting .screen-task{grid-column:1;grid-row:2/5;min-height:0;min-width:0;overflow:auto;align-self:stretch}
 .presenting #screen h2{font-size:1.35rem;margin:.25rem 0 .5rem}.presenting #display-instructions{font-size:1rem;line-height:1.35;margin:.25rem 0;text-align:left}
 .presenting #clock{grid-column:2;grid-row:2;font-size:clamp(2.5rem,20dvh,6rem);line-height:1.1;align-self:center;letter-spacing:-.065em}
 .presenting #bar{grid-column:2;grid-row:3;height:8px;margin:0}.presenting #state{grid-column:2;grid-row:4;margin:0;font-size:.9rem;min-height:0}
 .presenting .main-controls{grid-column:1;grid-row:5;gap:.35rem;align-content:start}.presenting .adjustments{grid-column:2;grid-row:5;margin:0!important;gap:.35rem;align-content:start}
 .presenting #screen button{font-size:.9rem;padding:.35rem .5rem;min-width:0}.presenting .main-controls .primary{min-width:80px}
 .presenting #up-next{grid-column:1;grid-row:6;font-size:.8rem;border:0;padding:0;margin:0;text-align:left}.presenting #wake-status{grid-column:2;grid-row:6;font-size:.75rem;margin:0;text-align:right}
 .presenting #notice{grid-column:1/-1;grid-row:7;margin:0;font-size:.85rem}
}