/* Reuse the Living Skills shell; only clock-specific layout lives here. */
.read-clock-page .site-header{max-width:none;margin:0}.read-clock-page .brand{width:auto}.read-clock-page .brand img{max-width:none}.read-clock-page .utility-nav{margin-left:auto}.read-clock-page .utility-nav img{width:34px;height:34px;filter:invert(28%) sepia(99%) saturate(3234%) hue-rotate(211deg) brightness(94%) contrast(113%)}
.clock-learning{max-width:1280px;margin:0;width:100%}.clock-title{flex:1;min-width:0}.lesson-heading .clock-title h1{margin:0;font-size:clamp(28px,2.3vw,38px)}.clock-title p{margin:10px 0 0;font-size:20px}.clock-learning .lesson-heading{flex-wrap:nowrap;margin-bottom:24px}.clock-learning .mode-tabs{flex:0 0 330px;align-self:flex-start}.thinking-marvin{cursor:default;touch-action:auto}.thinking-marvin .topic-picker{text-decoration:none;padding:16px;font-size:17px;font-weight:800}.thinking-marvin .guide-portrait{margin:4px 0}.guide-bubble{margin:0}
.clock-workspace{display:grid;grid-template-columns:55% 45%;align-items:center;border:1px solid var(--line);border-radius:20px;background:white;padding:24px;gap:0}.large-clock{min-width:0}.large-clock #clock{width:100%;display:block;max-width:570px;margin:auto;overflow:visible}.clock-tools{padding:20px 12px 20px 30px;min-width:0;display:flex;flex-direction:column;gap:18px}#clock-marks text{fill:var(--navy);font-weight:800}#clock [role=slider]{cursor:grab;touch-action:none}#clock [role=slider]:focus{outline:none;filter:drop-shadow(0 0 3px #76590b)}#clock [role=slider]:active{cursor:grabbing}#clock .explained{filter:drop-shadow(0 0 3px #efb030)}
#digital-panel{display:flex;align-items:center;justify-content:center;gap:10px;min-width:0}#digital-panel[hidden],#analog-panel[hidden]{display:none}#clock-digital{width:4.8ch;min-width:0;font-size:clamp(36px,5vw,86px);line-height:1.2;font-weight:900;text-align:center;color:var(--navy);border:0;background:transparent;padding:0;border-radius:8px}#clock-digital[aria-invalid=true]{outline:2px solid #b33b23}#period{font-size:clamp(18px,2vw,32px);font-weight:900}.format-switch{display:flex;padding:3px;border:1px solid var(--line);border-radius:15px}.format-switch button{flex:1;border:0;background:transparent;color:var(--blue);border-radius:12px;font-size:18px;font-weight:800}.format-switch [aria-pressed=true]{background:var(--blue);color:white}
#day-cue{display:grid;grid-template-columns:minmax(80px,45%) minmax(0,1fr);gap:3px 14px;align-items:center;margin-top:24px}.routine-scenes{grid-column:1;grid-row:1/4;aspect-ratio:1;position:relative;width:100%}.routine-scenes>div{position:absolute;inset:0;background-image:url('marvin-routine-sprite.webp');background-size:300% 300%;background-repeat:no-repeat}#day-cue-label{align-self:end;font-size:22px;font-weight:900}#day-cue-activity{font-size:18px}#day-cue-time{align-self:start;font-size:14px}
.hand-controls{margin-top:18px}.hand-controls #hand-help{display:flex;justify-content:center;align-items:center;gap:8px;text-align:center;font-size:17px;margin:0 0 18px}.hand-controls>div{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.hand-controls button{display:flex;justify-content:center;align-items:center;gap:14px;min-height:74px;padding:8px;background:#e9f5ff;font-size:22px;font-weight:900}.step-icon{width:48px;height:48px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;background:#1476f3;color:white;font-size:34px;line-height:1}.clock-learning .lesson-footer{margin-top:26px}.action-rail strong{font-weight:950}#break-dialog form button{width:100%;background:var(--blue);color:white}.read-clock-page dialog .dialog-heading{display:block}.read-clock-page dialog .dialog-heading form{position:static}.read-clock-page dialog form button{font-size:20px;padding:12px 20px}.read-clock-page .finish-dialog #finished>a{display:block;background:var(--blue);color:white;text-decoration:none;border-radius:12px;padding:12px;margin:12px 0}.read-clock-page .finish-dialog #finished>button{width:100%}
@media(max-width:1199px){.clock-learning .lesson-heading{flex-wrap:wrap}.clock-title{flex-basis:100%}.clock-learning .mode-tabs{flex-basis:330px}.clock-workspace{padding:12px}.clock-tools{padding:12px;gap:10px}#clock-digital{font-size:clamp(32px,5vw,60px)}#period{font-size:20px}#day-cue{grid-template-columns:1fr;text-align:center;margin-top:8px;gap:2px}.routine-scenes{grid-row:auto;max-width:110px;margin:auto}#day-cue-label{font-size:18px}#day-cue-activity{font-size:15px}#day-cue-time{font-size:12px}.hand-controls button{font-size:18px;gap:8px;min-height:68px}.step-icon{width:40px;height:40px;font-size:28px}.clock-layout .action-rail{padding:30px 12px}.clock-layout .action-rail button{padding:22px 0;font-size:21px}}
@media(max-width:900px){.clock-layout .action-rail{padding:12px;gap:0}.clock-layout .action-rail button{padding:4px 8px;font-size:17px}.clock-layout .action-rail strong{font-size:17px}.clock-title p{font-size:18px}.hand-controls #hand-help{font-size:15px}.hand-controls button{font-size:16px}.step-icon{width:32px;height:32px;font-size:25px}}
@media(max-width:640px){.clock-learning .lesson-heading{margin-bottom:18px}.clock-learning .mode-tabs{flex:1}.clock-title p{font-size:16px;margin-top:8px}.clock-workspace{grid-template-columns:1fr;padding:12px}.large-clock #clock{max-width:340px}.clock-tools{padding:8px 4px;gap:10px}#clock-digital{font-size:52px}#period{font-size:24px}#day-cue{grid-template-columns:80px 1fr;text-align:left;margin-top:6px;gap:1px 12px}.routine-scenes{grid-row:1/4;max-width:none}#day-cue-label{font-size:18px}#day-cue-time{font-size:13px}.hand-controls>div{gap:8px}.hand-controls button{flex-direction:column;gap:4px;font-size:14px;min-height:84px;padding:8px 2px}.hand-controls #hand-help{align-items:flex-start;font-size:14px}.clock-layout .action-rail button{flex-direction:column;font-size:14px;gap:4px;padding:0 4px}.clock-layout .action-rail strong{font-size:14px}.clock-layout .action-rail{padding:8px}.clock-learning .lesson-footer{margin-top:18px}.read-clock-page .site-header{padding:4px 16px}.read-clock-page .utility-nav{gap:12px}.read-clock-page .utility-nav img{width:26px;height:26px}}
