/* ========================================================================= Exam Timer — layouts Layout 1: large centre countdown, clock bottom (default grid) Layout 2: countdown left, exam details right Layout 3: minimal — countdown only Layout 4: countdown + today's schedule strip underneath Selected via [data-layout] on . ========================================================================= */ /* The header clock (top-right) is the always-on current time for the schedule and minimal-header layouts. Layouts 1 & 2 already show the large bottom clock, so the header copy is hidden there to avoid duplication. */ [data-layout="1"] .header-clock, [data-layout="2"] .header-clock { display: none; } /* ---- Layout 1 (default) — nothing extra needed ---- */ /* ---- Layout 2: split — countdown left, details right ---- */ [data-layout="2"] .presentation { grid-template-rows: auto 1fr auto; grid-template-columns: 1fr 1fr; grid-template-areas: "brand brand" "stage details" "clock clock"; text-align: left; } [data-layout="2"] .brand-bar { grid-area: brand; } [data-layout="2"] .stage { grid-area: stage; } [data-layout="2"] .exam-head { grid-area: details; justify-content: center; align-items: flex-start; gap: 0.8rem; } [data-layout="2"] { --cd-size: clamp(2.2rem, 7vw, 7rem); } [data-layout="2"] .exam-title { font-size: calc(var(--title-size) * var(--font-scale) * 0.9); } [data-layout="2"] .exam-meta { font-size: clamp(1rem, 2.4vw, 2.2rem); } [data-layout="2"] .exam-submeta { font-size: clamp(0.9rem, 1.8vw, 1.6rem); } [data-layout="2"] .clock-block { grid-area: clock; align-items: center; } /* ---- Layout 3: minimal — countdown only ---- */ [data-layout="3"] .brand-bar, [data-layout="3"] .exam-head, [data-layout="3"] .progress-wrap, [data-layout="3"] .clock-block { display: none; } [data-layout="3"] { --cd-size: clamp(4rem, 19vw, 22rem); } [data-layout="3"] .presentation { grid-template-rows: 1fr; place-items: center; } [data-layout="3"] .timer-frame { min-width: 0; } /* ---- Layout 4: countdown + schedule strip ---- */ [data-layout="4"] { --cd-size: clamp(2.4rem, 8vw, 7rem); } [data-layout="4"] .presentation { grid-template-rows: auto auto 1fr auto auto; } [data-layout="4"] .schedule-strip { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; padding-top: 6px; } [data-layout="4"] .clock-block { display: none; } .schedule-strip .ss-item { display: flex; flex-direction: column; align-items: center; background: var(--bg-2); border: 1px solid var(--panel-border); border-top: 4px solid var(--accent); border-radius: 10px; padding: 8px 14px; min-width: 150px; } .schedule-strip .ss-item.ss-active { outline: 2px solid var(--accent); } .schedule-strip .ss-time { font-weight: 700; font-variant-numeric: tabular-nums; font-size: clamp(0.9rem, 1.6vw, 1.3rem); } .schedule-strip .ss-title { font-size: clamp(0.75rem, 1.2vw, 1rem); color: var(--text-dim); text-align: center; } /* ---- 4K / very large displays: allow the countdown to grow a little ---- */ @media (min-width: 2400px) { :root { --cd-size: clamp(6rem, 12vw, 16rem); } } /* ---- Narrow / portrait fallback ---- */ @media (max-width: 720px) { [data-layout="2"] .presentation { grid-template-columns: 1fr; grid-template-areas: "brand" "stage" "details" "clock"; text-align: center; } [data-layout="2"] .exam-head { align-items: center; } .field-grid { grid-template-columns: 1fr; } .shortcuts { grid-template-columns: 1fr; } }