/* Output geometry is scoped to this app; administration uses the central shell. */
.day-output{margin:0;background:var(--ev-bg);color:var(--ev-text);font-family:var(--edu-admin-font,system-ui)}
#day-app,#day-app *{box-sizing:border-box}
#day-app{height:100dvh;min-width:0;display:flex;flex-direction:column;gap:var(--day-gap,16px);padding:var(--day-gap,16px);font-size:var(--day-font,20px);--surface:var(--ev-surface);--soft:var(--ev-secondary);--ink:var(--ev-text);--muted:var(--ev-muted);--primary:var(--ev-primary);--on:var(--ev-primary-text);--border:var(--ev-border);--radius:var(--ev-card-radius,16px);--day-content-scale:1}
#day-app [hidden]{display:none!important}#day-app :is(h1,h2,h3,p){margin:0}
#day-app .day-header{display:flex;justify-content:space-between;align-items:center;min-width:0;border-radius:var(--radius)}
#day-app .day-identity{display:flex;align-items:center;min-width:0;flex:1;gap:var(--edu-header-gap)}
#day-app .day-identity>div{min-width:0;flex:1}
#day-app .day-header-title{font-size:var(--edu-header-title);line-height:1.12;overflow-wrap:anywhere;white-space:normal}#day-app .day-identity small{display:block;opacity:.8;letter-spacing:.08em}
#day-app .day-identity .edu-app-icon{display:grid;place-items:center;border-radius:var(--ev-icon-radius,10px);background:var(--soft);color:var(--ev-secondary-text);padding:0;width:var(--edu-header-icon);height:var(--edu-header-icon);flex:0 0 var(--edu-header-icon)}
#day-app .day-identity svg{width:60%;height:60%}
#day-app .wall-clock{text-align:right;min-width:0;max-width:48%;flex:0 1 auto;font-variant-numeric:tabular-nums}
#day-app .wall-clock strong,#day-app .wall-clock span{display:block;white-space:nowrap}#day-app .wall-clock span{opacity:.8;margin-top:.2em}
#day-app .wall-clock .edu-typography-unit{display:inline}
#day-app .day-content{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:var(--day-gap);min-height:0;min-width:0;flex:1;font-size:calc(var(--day-font)*var(--day-content-scale))}
#day-app .hero{background:var(--surface);border-radius:var(--radius);padding:var(--day-card-pad-y,20px) var(--edu-header-inset,24px);display:grid;grid-template-rows:auto minmax(0,1fr);grid-auto-rows:auto;gap:var(--day-inner-gap,12px);min-width:0;min-height:0;overflow-wrap:anywhere}
#day-app .hero-heading{min-width:0;align-self:start}#day-app .phase{color:var(--primary);font-size:.85em;line-height:1.25;font-weight:600}
#day-app .hero h2{font-size:1.35em;line-height:1.15;margin-top:.12em}
#day-app .interval{font-size:.8em;line-height:1.35;color:var(--muted);margin-top:.3em}
#day-app .count-block{display:flex;flex-direction:column;align-items:center;justify-content:center;align-self:stretch;gap:.12em;min-width:0;min-height:0;text-align:center}
#day-app .count-block>p{font-size:.85em;line-height:1.25;color:var(--muted)}
#day-app .count{font-size:var(--day-count,120px);font-weight:700;letter-spacing:-.035em;font-variant-numeric:tabular-nums;line-height:1.05;white-space:nowrap;width:max-content}
#day-app .count-block .count-unit{font-size:.6em}
#day-app .progress-block{min-width:0}#day-app .progress{height:.5em;border-radius:1em;background:var(--soft);overflow:hidden}
#day-app .progress>span{height:100%;display:block;width:0;background:var(--primary);border-radius:inherit;transition:width .25s linear}
#day-app .progress-labels{display:flex;justify-content:space-between;gap:1em;font-size:.65em;color:var(--muted);margin-top:.35em}
#day-app .bell-line{border-top:1px solid var(--border);display:flex;gap:.65em;align-items:center;padding-top:.55em;min-width:0}
#day-app .bell-line strong{font-size:.95em;display:block;line-height:1.2;overflow-wrap:anywhere}
#day-app .bell-line>div>span{font-size:.7em;line-height:1.25;display:block;color:var(--muted);margin-top:.2em}
#day-app .bell-icon{display:grid;place-items:center;background:var(--soft);color:var(--primary);border-radius:var(--ev-icon-radius,10px);width:2em;height:2em;flex:none}
#day-app .bell-icon svg{width:60%;height:60%}
#day-app .day-aside{display:flex;flex-direction:column;gap:var(--day-gap);min-height:0;min-width:0}
#day-app .next-panel{background:var(--soft);border-radius:var(--radius);padding:var(--day-card-pad-y) var(--edu-header-inset,24px);flex:1;display:flex;flex-direction:column;justify-content:center;gap:.4em;min-width:0;min-height:0;overflow-wrap:anywhere}
#day-app .kicker{font-size:.7em;line-height:1.2;color:var(--muted);letter-spacing:.08em;text-transform:uppercase}
#day-app .next-panel h2{font-size:1.2em;line-height:1.2}#day-app .next-panel>strong{font-size:1em;line-height:1.3;font-variant-numeric:tabular-nums}
#day-app .next-panel>p:last-child{font-size:.75em;line-height:1.3;color:var(--muted)}
#day-app .end-panel{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;background:var(--surface);border-radius:var(--radius);padding:.65em var(--edu-header-inset,24px);gap:.4em;min-width:0}
#day-app .end-panel span{font-size:.75em;line-height:1.3;color:var(--muted)}#day-app .end-panel strong{font-size:1.15em;font-variant-numeric:tabular-nums}
#day-app .timeline{background:var(--surface);border-radius:var(--radius);padding:.65em var(--edu-header-inset,24px);flex:none;min-width:0;font-size:.7em}
#day-app .timeline-heading{display:flex;justify-content:space-between;gap:1em;margin-bottom:.5em;align-items:center}
#day-app .timeline h2{font-size:.9em}#day-app .timeline-heading>span{font-size:.65em;color:var(--muted)}
#day-app .hours{display:grid;grid-template-columns:repeat(auto-fit,minmax(var(--day-hour-min,120px),1fr));gap:.5em}
#day-app .hour{background:var(--soft);border-radius:var(--ev-control-radius,10px);padding:.4em;min-width:0}
#day-app .hour>strong{font-size:.8em;line-height:1.2;display:block}#day-app .hour>span{font-size:.7em;line-height:1.2;white-space:nowrap;display:block;margin-top:.2em;font-variant-numeric:tabular-nums}
#day-app .hour>small{font-size:.6em;line-height:1.2;display:block;margin-top:.2em;color:var(--muted)}#day-app .hour[aria-current]{background:var(--primary);color:var(--on)}#day-app .hour[aria-current] small{color:var(--on)}#day-app .hour.done{opacity:.6}
#day-app footer{display:flex;justify-content:space-between;gap:10px;flex:none;font-size:var(--edu-text-footnote,14px);line-height:1.3;color:var(--muted)}
#day-app .day-notice{font-size:var(--edu-text-footnote,14px);line-height:1.3;color:var(--muted);flex:none}#day-app .day-notice:empty{display:none}
#day-app .sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
#day-app.ringing .hero{box-shadow:inset 0 0 0 4px var(--primary)}
#day-app[data-phase=break] .phase{color:var(--ev-warning-text,var(--primary))}
#day-app:is([data-phase=after],[data-phase=before],[data-phase=off],[data-phase=unavailable]) .progress-block{display:none}
#day-app :is(.interval,.count-unit,#next-time,#next-note):empty{display:none}
#day-app[data-phase=unavailable] :is(.bell-line,.day-aside){display:none}
#day-app[data-phase=unavailable] .day-content{grid-template-columns:1fr;grid-template-rows:minmax(0,1fr)}
#day-app:is([data-presentation=focus],[data-layout=portrait],[data-layout=compact]) .day-content{grid-template-columns:1fr;grid-template-rows:minmax(0,1fr) auto}
#day-app:is([data-presentation=focus],[data-layout=portrait],[data-layout=compact]) .hero-heading{text-align:center}
#day-app[data-presentation=focus] .day-aside{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr)}
#day-app:is([data-layout=portrait],[data-layout=compact]) .day-aside{display:flex;flex-direction:column;flex:none}
#day-app:is([data-layout=portrait],[data-layout=compact]) .end-panel{display:none}
#day-app[data-presentation=focus] .timeline,#day-app[data-layout=compact] .timeline{display:none}
#day-app[data-layout=portrait] .hours{grid-template-columns:repeat(2,minmax(0,1fr))}
#day-app[data-layout=strip] .day-content{grid-template-columns:1fr;grid-template-rows:minmax(0,1fr)}
#day-app[data-layout=strip] .hero{grid-template-columns:minmax(0,1fr) minmax(0,.9fr);grid-template-rows:minmax(0,1fr);align-items:center}
#day-app[data-layout=strip] .hero-heading{text-align:left;align-self:center}#day-app[data-layout=strip] .progress-block{grid-column:1/-1}
#day-app[data-layout=strip] :is(.wall-clock #date,.day-identity small,.progress-labels,.interval,.bell-line,.count-unit,.timeline){display:none}
#day-app[data-layout=minimal] .day-header{display:none}#day-app[data-layout=minimal] :is(.day-aside,.timeline,.bell-line,.interval,footer){display:none}
#day-app.day-fit-no-timeline .timeline{display:none}#day-app.day-fit-no-aside .day-aside{display:none}
#day-app.day-fit-no-aside .day-content{grid-template-columns:1fr;grid-template-rows:minmax(0,1fr)}
#day-app.day-fit-essential :is(.bell-line,.interval,.count-unit,.progress-labels,[data-edu-source-details]){display:none}
#day-app.day-fit-critical :is(.phase,#count-label){display:none}
#day-app[data-source-details=hidden]:not([data-mode=web]) [data-edu-source-details]{display:none}
#day-app .hour>span .edu-typography-unit{display:inline}
#day-app[data-mode=web]{height:auto;min-height:0;max-width:1600px;margin:auto;--day-content-scale:1}
#day-app[data-mode=web] .day-content{flex:none;grid-template-rows:auto}
#day-app[data-mode=web] .hero{min-height:360px;grid-template-rows:auto auto auto auto}
#day-app[data-mode=web] .count-block{min-height:200px}#day-app[data-mode=web] .next-panel{min-height:160px}
@media(max-width:640px){#day-app .wall-clock #date{display:none}#day-app[data-mode=web] .day-aside{grid-template-columns:1fr}#day-app[data-mode=web] .hero{min-height:0}}

/* Configuration uses the same shared admin components as other Eduvize apps. */
.day-admin-grid{display:grid;grid-template-columns:1fr 1.5fr;gap:28px}.day-fields{display:flex;flex-direction:column;gap:18px}.day-table{width:100%;border-collapse:collapse}.day-table th,.day-table td{padding:8px;text-align:left;border-bottom:1px solid var(--ev-border,#d7e3e8)}.day-table input[type=time]{width:100%;min-width:0}.day-weekdays{display:flex;gap:12px;flex-wrap:wrap}.day-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:20px}.day-admin-preview iframe{width:100%;height:650px;border:0}.day-muted{color:var(--ev-muted,#5e7989)}.disabled-row{opacity:.5}.day-source-status{font-size:14px;line-height:1.5}.day-admin [role=status]{min-height:1.5em}.day-admin-table-wrap{min-width:0}.day-settings-errors{color:var(--ev-danger,#a42b2b)}@media(max-width:800px){.day-admin-grid{grid-template-columns:1fr}.day-table{table-layout:fixed}.day-table td,.day-table th{padding:6px}.day-table input{padding:5px}}

.day-admin-preview{margin-top:24px}


/* Ordinary web headers keep complete long names in normal document flow. */
#day-app[data-mode=web] .day-header{height:auto;min-height:var(--edu-header-height,96px);padding:var(--edu-header-padding,5px) var(--edu-header-inset,18px);gap:var(--edu-header-gap,18px);flex:none}
#day-app[data-mode=web] .day-header .edu-header-title{font-size:var(--edu-header-title,35px);line-height:1.12}
#day-app[data-mode=web] .day-header .edu-header-meta{font-size:var(--edu-header-meta,17px);line-height:1.2}
/* Embedded kiosk framing follows the shared parent header policy. */

#day-app[data-phase=off] .end-panel{display:none}
#day-app[data-phase=off] .day-aside{grid-template-columns:1fr}
@media(max-width:640px){#day-app[data-mode=web] .day-header{display:grid;grid-template-columns:1fr;row-gap:12px}#day-app[data-mode=web] .wall-clock{max-width:none;justify-self:end}}

/* Current time can be a dial; countdowns always retain an exact numeric value. */
#day-app .analog-clock{display:none;flex:none;color:inherit}
#day-app .clock-face{fill:none;stroke:currentColor;stroke-width:2}
#day-app .clock-tick{stroke:currentColor;stroke-width:1.8}
#day-app .clock-hour,#day-app .clock-minute{stroke:currentColor;stroke-linecap:round;stroke-width:4}
#day-app .clock-minute{stroke-width:2.6}
#day-app .clock-second{stroke:var(--primary);stroke-width:1;stroke-linecap:round}
#day-app .clock-center{fill:currentColor}
#day-app #header-analog{width:calc(var(--edu-header-height)*.68);height:calc(var(--edu-header-height)*.68);margin-left:auto}
#day-app #main-analog{width:var(--day-dial,var(--day-count));height:var(--day-dial,var(--day-count));max-width:100%}
#day-app[data-header-clock-style=analog] #header-analog,#day-app[data-main-clock-style=analog] #main-analog{display:block}
#day-app[data-header-clock-style=analog] #clock,#day-app[data-main-clock-style=analog][data-counting=false] #count{display:none}
/* Keep upcoming activity and the remaining-time gauge in every output size. */
#day-app .day-aside{display:flex}
#day-app:is([data-phase=unavailable],[data-layout=minimal],.day-fit-no-aside) .day-aside{display:flex}
#day-app[data-phase=unavailable] .day-content{grid-template-columns:1fr;grid-template-rows:minmax(0,1fr) auto}
#day-app[data-presentation=focus][data-phase=unavailable] .day-aside{display:flex}
#day-app[data-phase=unavailable] .end-panel{display:none}
#day-app[data-counting=true] .progress-block{display:block}
#day-app[data-counting=false] .progress-block{display:none}
#day-app.day-fit-critical .progress-block{display:block}
#day-app.day-fit-critical[data-counting=false] .progress-block{display:none}
#day-app[data-layout=strip] .day-content{grid-template-columns:minmax(0,2fr) minmax(0,1fr);grid-template-rows:minmax(0,1fr)}
#day-app[data-layout=strip] .hero{grid-template-rows:minmax(0,1fr) auto}
#day-app[data-layout=strip] .day-aside{display:flex}
#day-app[data-layout=strip] .end-panel{display:none}
#day-app[data-layout=strip] .next-panel{gap:.2em;padding:var(--day-card-pad-y) .6em}
#day-app[data-layout=strip] .next-panel h2{font-size:1em}
#day-app[data-layout=strip] .next-panel>strong{font-size:.8em}
#day-app[data-layout=strip] #next-note{display:none}
#day-app[data-layout=minimal] .day-content{grid-template-columns:1fr;grid-template-rows:minmax(0,1fr) auto}
#day-app[data-layout=minimal] .end-panel{display:none}
/* Landscape style 6, segment 3: one roomy slot, alternating every eight seconds. */
#day-app[data-alternate=true] .day-content{grid-template-columns:1fr;grid-template-rows:minmax(0,1fr)}
#day-app[data-alternate=true] .day-aside{display:none}
#day-app[data-alternate=true][data-rotation=next] .hero{display:none}
#day-app[data-alternate=true][data-rotation=next] .day-aside{display:flex}
#day-app[data-alternate=true] .end-panel{display:none}
#day-app[data-alternate=true] .next-panel{align-items:center;text-align:center}
#day-app[data-alternate=true] .timeline{display:none}

#day-app #main-analog{min-height:0;min-width:0;flex-shrink:1}
#day-app[data-alternate=true][data-phase=unavailable] .hero-heading{display:none}
#day-app[data-alternate=true][data-phase=unavailable] .hero{grid-template-rows:minmax(0,1fr)}
@media(min-width:600px) and (max-height:720px){
 #day-app:not([data-mode=web]):not([data-layout=strip]) .end-panel{display:none}
 #day-app:not([data-mode=web]):not([data-layout=strip]) .day-aside{grid-template-columns:1fr}
 #day-app:not([data-mode=web]):not([data-layout=strip]) .next-panel{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.8fr);gap:.2em .6em;padding:.35em var(--edu-header-inset,24px);align-content:center;align-items:center}
 #day-app:not([data-mode=web]):not([data-layout=strip]) .kicker{grid-column:1/-1}
 #day-app:not([data-mode=web]):not([data-layout=strip]) #next-title{font-size:1em}
 #day-app:not([data-mode=web]):not([data-layout=strip]) #next-time{font-size:.8em;text-align:right}
 #day-app:not([data-mode=web]):not([data-layout=strip]) #next-note{display:none}
}

#day-app[data-main-clock-style=analog][data-counting=true] .count-block{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:auto auto auto;align-content:center;align-items:center;justify-items:center;column-gap:.35em}
#day-app[data-main-clock-style=analog][data-counting=true] #main-analog{grid-column:1;grid-row:1/4}
#day-app[data-main-clock-style=analog][data-counting=true] #count-label{grid-column:2;grid-row:1}
#day-app[data-main-clock-style=analog][data-counting=true] #count{grid-column:2;grid-row:2;max-width:100%}
#day-app[data-main-clock-style=analog][data-counting=true] #count-unit{grid-column:2;grid-row:3}

/* Analog headers contain only the dial, with deliberate clearance on all sides. */
#day-app[data-header-clock-style=analog] .wall-clock{display:flex;align-items:center;justify-content:center;align-self:stretch;padding:0 calc(var(--edu-header-inset,24px)*.35);flex:none}
#day-app[data-header-clock-style=analog] .wall-clock #date{display:none}
#day-app[data-header-clock-style=analog] #header-analog{width:calc(var(--edu-header-height)*.62);height:calc(var(--edu-header-height)*.62);margin:0}
/* Tall content areas use a large dial above the countdown instead of empty side columns. */
#day-app[data-main-clock-style=analog][data-counting=true][data-dial-layout=stack] .count-block{grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto auto auto;row-gap:.12em}
#day-app[data-main-clock-style=analog][data-counting=true][data-dial-layout=stack] #main-analog{grid-column:1;grid-row:1}
#day-app[data-main-clock-style=analog][data-counting=true][data-dial-layout=stack] #count-label{grid-column:1;grid-row:2}
#day-app[data-main-clock-style=analog][data-counting=true][data-dial-layout=stack] #count{grid-column:1;grid-row:3}
#day-app[data-main-clock-style=analog][data-counting=true][data-dial-layout=stack] #count-unit{grid-column:1;grid-row:4}

/* On wide cards the dial spans the entire message/countdown column. */
#day-app[data-main-clock-style=analog][data-counting=true][data-dial-layout=wide] .hero{grid-template-rows:minmax(0,1fr);grid-auto-rows:auto}
#day-app[data-main-clock-style=analog][data-counting=true][data-dial-layout=wide] .count-block{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);grid-template-rows:auto auto auto auto;align-content:center;column-gap:.65em}
#day-app[data-main-clock-style=analog][data-counting=true][data-dial-layout=wide] .count-block .hero-heading{grid-column:2;grid-row:1;text-align:center;align-self:center;width:100%}
#day-app[data-main-clock-style=analog][data-counting=true][data-dial-layout=wide] #main-analog{grid-column:1;grid-row:1/5}
#day-app[data-main-clock-style=analog][data-counting=true][data-dial-layout=wide] #count-label{grid-column:2;grid-row:2}
#day-app[data-main-clock-style=analog][data-counting=true][data-dial-layout=wide] #count{grid-column:2;grid-row:3}
#day-app[data-main-clock-style=analog][data-counting=true][data-dial-layout=wide] #count-unit{grid-column:2;grid-row:4}

#day-app[data-header-clock-style=analog] #header-analog{margin-block:max(12px,calc(var(--edu-header-height)*.08))}

/* Reserve breathing room above and below the main dial in every arrangement. */
#day-app #main-analog{margin-block:var(--day-dial-inset,16px)}