/* ==========================================================================
   BellTimes.net — countdown screen
   ========================================================================== */

.bt-timer-body {
   --dock-h: 76px;
   height: 100vh;
   height: 100dvh;
   overflow: hidden;
   user-select: none;
   -webkit-user-select: none;
   touch-action: manipulation;
}

/* --------------------------------------------------------------------------
   APP SHELL
   -------------------------------------------------------------------------- */

.bt-app {
   position: relative;
   z-index: 2;
   display: flex;
   flex-direction: column;
   height: 100vh;
   height: 100dvh;
   padding: max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right))
            max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
}

/* --------------------------------------------------------------------------
   TOP BAR
   -------------------------------------------------------------------------- */

.bt-topbar {
   position: relative;
   z-index: 30;
   /* Lift the bar above the countdown stage so the theme dropdown is
      never painted behind it. */
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 14px;
   flex-shrink: 0;
}

.bt-brand {
   display: inline-flex;
   align-items: center;
   gap: 9px;
   color: var(--text-muted);
   font-size: 0.72rem;
   letter-spacing: 0.14em;
   text-transform: uppercase;
   text-decoration: none;
   transition: color 0.18s;
}
.bt-brand:hover { color: var(--text); }

.bt-brand__mark {
   width: 20px;
   height: 20px;
   flex-shrink: 0;
   color: var(--accent);
}

.bt-topbar__actions {
   display: flex;
   align-items: center;
   gap: 8px;
}

/* --------------------------------------------------------------------------
   STAGE
   -------------------------------------------------------------------------- */

.bt-stage {
   position: relative;
   flex: 1;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   gap: 0;
   min-height: 0;
   text-align: center;
}

.bt-eyebrow {
   margin: 0;
   font-size: 0.66rem;
   font-weight: 700;
   letter-spacing: 0.3em;
   text-transform: uppercase;
   color: var(--text-dim);
}

/* Hidden test schedule (?test) — make it obvious it is not a real
   school's bells. */
.bt-eyebrow--test {
   display: inline-flex;
   align-items: center;
   gap: 7px;
   padding: 4px 11px;
   border: 1px solid var(--warn);
   border-radius: var(--radius-pill);
   background: rgba(251, 191, 36, 0.12);
   color: var(--warn);
   letter-spacing: 0.22em;
}

.is-test-mode .bt-school {
   color: var(--warn);
}

.bt-school {
   margin: 10px 0 0;
   max-width: 90vw;
   font-family: var(--font-display);
   font-size: clamp(1.05rem, 2.6vw, 1.6rem);
   font-weight: 700;
   letter-spacing: -0.015em;
   line-height: 1.2;
   color: var(--text);
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
}

/* the countdown itself */
.bt-readout {
   position: relative;
   display: block;
   margin: 0.04em 0 0;
   font-family: var(--font-timer);
   font-weight: 700;
   font-variant-numeric: tabular-nums;
   font-feature-settings: 'tnum' 1, 'zero' 1;
   line-height: 0.92;
   letter-spacing: -0.035em;
   color: var(--text);
   font-size: calc(clamp(4.2rem, 21vw, 17rem) * var(--bt-scale, 1));
   transition: color 0.2s;
}

/* the countdown must never touch the edges of the viewport */
@media (max-width: 900px) {
   .bt-readout { font-size: calc(clamp(3.6rem, 24vw, 12rem) * var(--bt-scale, 1)); }
}

.bt-readout__unit {
   font-size: 0.3em;
   letter-spacing: 0.02em;
   color: var(--text-dim);
   margin-left: 0.14em;
}

.bt-readout__dec {
   color: var(--text-muted);
   font-size: 0.42em;
   letter-spacing: -0.01em;
}

/* label under the number */
.bt-readout-label {
   margin: 0.5em 0 0;
   font-size: 0.68rem;
   letter-spacing: 0.24em;
   text-transform: uppercase;
   color: var(--text-dim);
}

/* --------------------------------------------------------------------------
   PROGRESS
   -------------------------------------------------------------------------- */

.bt-progress {
   position: relative;
   width: min(560px, 86vw);
   height: 3px;
   margin-top: 34px;
   background: var(--border);
   border-radius: var(--radius-pill);
   overflow: hidden;
}

.bt-progress__fill {
   height: 100%;
   width: 0%;
   background: var(--accent);
   border-radius: var(--radius-pill);
   transition: width 0.25s linear;
}

.bt-nextline {
   margin: 14px 0 0;
   font-size: 0.78rem;
   color: var(--text-muted);
   letter-spacing: 0.03em;
}
.bt-nextline strong {
   color: var(--text);
   font-weight: 700;
}

/* --------------------------------------------------------------------------
   SCHEDULE STRIP
   -------------------------------------------------------------------------- */

.bt-schedule {
   width: min(680px, 92vw);
   margin: 34px auto 0;
   flex-shrink: 0;
}
.bt-schedule[hidden] { display: none; }

.bt-schedule__track {
   position: relative;
   height: 34px;
   margin: 0 8px;
}

.bt-schedule__line {
   position: absolute;
   left: 0; right: 0;
   top: 16px;
   height: 1px;
   background: var(--border);
}

.bt-schedule__dot {
   position: absolute;
   top: 12px;
   width: 9px;
   height: 9px;
   margin-left: -4.5px;
   border-radius: 50%;
   background: var(--surface-3);
   border: 1px solid var(--border-strong);
}

.bt-schedule__dot.is-past { background: var(--border-strong); border-color: var(--border-strong); }

.bt-schedule__dot.is-next {
   width: 13px; height: 13px;
   top: 10px;
   margin-left: -6.5px;
   background: var(--accent);
   border-color: var(--accent);
   box-shadow: 0 0 0 4px var(--accent-soft);
   animation: bt-pulse 2s var(--ease) infinite;
}

.bt-schedule__cap {
   position: absolute;
   top: 26px;
   transform: translateX(-50%);
   font-size: 0.62rem;
   letter-spacing: 0.08em;
   color: var(--text-dim);
   white-space: nowrap;
}
.bt-schedule__cap--first { transform: none; }
.bt-schedule__cap--last { transform: translateX(-100%); }

.bt-schedule__nextlabel {
   position: absolute;
   top: -14px;
   transform: translateX(-50%);
   font-size: 0.64rem;
   font-weight: 700;
   letter-spacing: 0.08em;
   color: var(--accent);
   white-space: nowrap;
}

@keyframes bt-pulse {
   0%, 100% { box-shadow: 0 0 0 3px var(--accent-soft); }
   50%      { box-shadow: 0 0 0 7px var(--accent-soft); }
}

/* --------------------------------------------------------------------------
   DOCK
   -------------------------------------------------------------------------- */

.bt-dock {
   flex-shrink: 0;
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 6px;
   flex-wrap: wrap;
   padding-top: 20px;
}

.bt-dock__btn {
   display: inline-flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   gap: 3px;
   min-width: 62px;
   height: 54px;
   padding: 0 12px;
   background: var(--surface);
   border: 1px solid var(--border);
   border-radius: var(--radius);
   color: var(--text-muted);
   font-family: var(--font-mono);
   font-size: 0.66rem;
   letter-spacing: 0.08em;
   text-transform: uppercase;
   cursor: pointer;
   transition: background 0.18s, border-color 0.18s, color 0.18s, transform 0.12s;
}
.bt-dock__btn:hover {
   background: var(--surface-2);
   border-color: var(--border-strong);
   color: var(--text);
}
.bt-dock__btn:active { transform: translateY(1px); }
.bt-dock__btn[aria-pressed="true"] {
   background: var(--accent-soft);
   border-color: var(--accent-line);
   color: var(--accent);
}

.bt-dock__glyph {
   font-size: 1.05rem;
   line-height: 1;
   color: var(--text);
}
.bt-dock__btn[aria-pressed="true"] .bt-dock__glyph { color: var(--accent); }

.bt-dock__btn.is-flash {
   background: var(--accent-soft);
   border-color: var(--accent-line);
   color: var(--accent);
}

.bt-dock__sep {
   width: 1px;
   height: 34px;
   margin: 0 6px;
   background: var(--border);
}

/* --------------------------------------------------------------------------
   FOOTER — deliberately quiet, it sits under the dock
   -------------------------------------------------------------------------- */

.bt-foot {
   flex-shrink: 0;
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 8px;
   padding-top: 12px;
   font-size: 0.68rem;
   letter-spacing: 0.06em;
   color: var(--text-dim);
}

.bt-foot a {
   color: var(--text-dim);
   text-decoration: none;
   transition: color 0.18s;
}
.bt-foot a:hover { color: var(--accent); }

/* --------------------------------------------------------------------------
   CONTROLS / KEYBOARD HELP PANEL
   -------------------------------------------------------------------------- */

.bt-help {
   position: absolute;
   right: 16px;
   bottom: calc(var(--dock-h) + 18px);
   z-index: 30;
   width: min(300px, calc(100vw - 32px));
   padding: 16px 18px;
   background: var(--surface-2);
   border: 1px solid var(--border-strong);
   border-radius: var(--radius);
   box-shadow: var(--shadow-2);
   font-size: 0.78rem;
}
.bt-help[hidden] { display: none; }

.bt-help__title {
   margin: 0 0 12px;
   font-size: 0.62rem;
   font-weight: 700;
   letter-spacing: 0.2em;
   text-transform: uppercase;
   color: var(--accent);
}

.bt-help__row {
   display: flex;
   align-items: baseline;
   justify-content: space-between;
   gap: 14px;
   padding: 4px 0;
}
.bt-help__row + .bt-help__row { border-top: 1px solid var(--border); }
.bt-help__key {
   color: var(--text);
   font-weight: 700;
   white-space: nowrap;
}
.bt-help__desc {
   color: var(--text-muted);
   text-align: right;
}

/* --------------------------------------------------------------------------
   EDGE TAP ZONES (legacy big/smaller/prev/next)
   -------------------------------------------------------------------------- */

.bt-edge {
   position: fixed;
   z-index: 5;
   display: flex;
   align-items: center;
   justify-content: center;
   opacity: 0;
   transition: opacity 0.35s;
   pointer-events: none;
}
.bt-edge.is-armed { opacity: 1; }
.bt-edge--top    { top: 0; left: 0; right: 0; height: 22vh; }
.bt-edge--bottom { bottom: 0; left: 0; right: 0; height: 22vh; }
.bt-edge--left   { top: 22vh; bottom: 22vh; left: 0; width: 16vw; }
.bt-edge--right  { top: 22vh; bottom: 22vh; right: 0; width: 16vw; }

.bt-edge__flash {
   padding: 10px 18px;
   background: var(--surface-2);
   border: 1px solid var(--border-strong);
   border-radius: var(--radius);
   color: var(--text);
   font-family: var(--font-mono);
   font-size: 0.74rem;
   letter-spacing: 0.12em;
   text-transform: uppercase;
  box-shadow: var(--shadow-2);
}

/* --------------------------------------------------------------------------
   RING ANIMATION
   -------------------------------------------------------------------------- */

@keyframes bt-ring {
   0%, 100% { background: var(--bg); }
   50%      { background: var(--accent); }
}

@keyframes bt-ring-text {
   0%, 100% { color: var(--text); }
   50%      { color: var(--accent-contrast); }
}

.bt-timer-body.is-ringing .bt-stage {
   animation: bt-ring 0.22s steps(1) 12;
}
.bt-timer-body.is-ringing .bt-readout {
   animation: bt-ring-text 0.22s steps(1) 12;
}

/* --------------------------------------------------------------------------
   STATUS / ERROR
   -------------------------------------------------------------------------- */

.bt-status {
   position: absolute;
   inset: 0;
   z-index: 8;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   gap: 14px;
   padding: 24px;
   text-align: center;
   background: var(--bg);
}
.bt-status[hidden] { display: none; }

.bt-status__title {
   margin: 0;
   font-family: var(--font-display);
   font-size: 1.15rem;
   font-weight: 700;
   color: var(--text);
}
.bt-status__msg {
   margin: 0;
   max-width: 44ch;
   font-size: 0.82rem;
   color: var(--text-muted);
   line-height: 1.7;
}

/* --------------------------------------------------------------------------
   INSTALL PROMPT
   -------------------------------------------------------------------------- */

.bt-install {
   position: absolute;
   left: 50%;
   bottom: 16px;
   z-index: 12;
   display: flex;
   align-items: center;
   gap: 12px;
   width: min(440px, calc(100vw - 32px));
   padding: 12px 14px;
   background: var(--surface-2);
   border: 1px solid var(--border-strong);
   border-radius: var(--radius);
   box-shadow: var(--shadow-2);
   transform: translateX(-50%);
}
.bt-install[hidden] { display: none; }
.bt-install__text {
   flex: 1;
   font-size: 0.76rem;
   color: var(--text-muted);
   line-height: 1.55;
}
.bt-install__close {
   background: none;
   border: 0;
   color: var(--text-dim);
   font-size: 1.2rem;
   line-height: 1;
   cursor: pointer;
   padding: 4px;
}
.bt-install__close:hover { color: var(--text); }

/* --------------------------------------------------------------------------
   TEST TOOLS (only visible with ?test)
   -------------------------------------------------------------------------- */

.bt-test-tools {
   position: absolute;
   left: 16px;
   bottom: 16px;
   z-index: 14;
   display: flex;
   align-items: center;
   gap: 6px;
   padding: 7px 9px;
   background: var(--surface-2);
   border: 1px solid var(--warn);
   border-radius: var(--radius-pill);
   box-shadow: var(--shadow-2);
}
.bt-test-tools[hidden] { display: none; }

.bt-test-tools__label {
   padding: 0 6px 0 4px;
   font-family: var(--font-mono);
   font-size: 0.6rem;
   font-weight: 700;
   letter-spacing: 0.2em;
   text-transform: uppercase;
   color: var(--warn);
}

.bt-test-tools__btn {
   height: 26px;
   padding: 0 11px;
   background: transparent;
   border: 1px solid var(--border-strong);
   border-radius: var(--radius-pill);
   color: var(--text-muted);
   font-family: var(--font-mono);
   font-size: 0.68rem;
   letter-spacing: 0.04em;
   cursor: pointer;
   transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.bt-test-tools__btn:hover {
   background: var(--surface-3);
   border-color: var(--warn);
   color: var(--text);
}

/* --------------------------------------------------------------------------
   RESPONSIVE
   -------------------------------------------------------------------------- */

@media (max-width: 900px) {
   .bt-schedule { display: none; }
   .bt-schedule.is-forced { display: block; }
}

@media (max-width: 640px) {
   .bt-dock { gap: 5px; padding-top: 14px; }
   .bt-dock__btn { min-width: 54px; height: 50px; font-size: 0.6rem; padding: 0 8px; }
   .bt-dock__sep { margin: 0 2px; }
   .bt-progress { margin-top: 24px; }
}

@media (max-height: 560px) {
   .bt-readout { font-size: calc(clamp(3rem, 15vh, 8rem) * var(--bt-scale, 1)); }
   .bt-progress { margin-top: 18px; }
}