/* TeacherTimers — timer page only. */

/* ---------- Clock ---------- */

.clock-wrap {
  flex: 1;
  min-height: 0;
  container-type: size;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 1.5cqh;
}

.label {
  width: min(100%, 900px);
  border: 0; background: transparent; outline: none;
  text-align: center;
  font-family: var(--clock-font);
  font-size: clamp(1.1rem, 6.5cqh, 4.5rem);
  color: var(--ui);
  padding: .1em .4em;
  border-radius: 16px;
  transition: background .15s;
}
.label::placeholder { color: var(--muted); opacity: .55; }
.label:hover, .label:focus { background: var(--surface); }
body.running .label:placeholder-shown,
body.fs .label:placeholder-shown { visibility: hidden; }

.clock {
  --nd: 3; --nc: 1;
  --w: calc(var(--nd) * var(--dw) + var(--nc) * var(--cw) + .04);
  font-family: var(--clock-font);
  font-size: min(calc(94cqw / var(--w)), 58cqh);
  line-height: 1;
  color: var(--fg);
  text-shadow: var(--clock-shadow);
  white-space: nowrap;
  user-select: none;
  transition: color .4s;
}
.clock span { display: inline-block; text-align: center; }
.clock .d { width: calc(var(--dw) * 1em); }
.clock .c { width: calc(var(--cw) * 1em); transform: translateY(-.06em); }
.clock .m { width: calc(var(--cw) * 1.3em); }

body.warn .clock { color: var(--warn); }
body.danger .clock { color: var(--danger); }
body.finished .clock { color: var(--danger); animation: blink 1s steps(1) infinite; }
body.overtime .clock { animation: none; }
.clock.pulse { animation: pulse .6s ease-out; }

@keyframes pulse {
  0% { transform: scale(1.08); }
  100% { transform: scale(1); }
}
@keyframes blink {
  50% { opacity: .25; }
}

.progress {
  width: min(92%, 1200px);
  height: clamp(8px, 2.2cqh, 22px);
  border-radius: var(--radius);
  background: var(--track);
  overflow: hidden;
}
#bar {
  height: 100%;
  width: 100%;
  background: var(--bar);
  border-radius: inherit;
  transform-origin: left;
  transition: width .25s linear, background .4s;
}
body.warn #bar { background: var(--warn); }
body.danger #bar, body.finished #bar { background: var(--danger); }

.done {
  font-family: var(--clock-font);
  font-size: clamp(1.4rem, 10cqh, 7rem);
  line-height: 1.1;
  text-align: center;
  color: var(--fg);
  text-shadow: var(--clock-shadow);
  display: none;
}
body.finished .done { display: block; animation: pop .5s cubic-bezier(.2, 1.6, .4, 1); }
@keyframes pop {
  from { transform: scale(.4); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

/* ---------- Fine adjust + custom time ---------- */

.fine { align-items: center; gap: 12px 20px; }
.adjusts { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }

.custom { display: flex; align-items: center; gap: 6px; }
.custom label {
  display: flex; align-items: center; gap: 4px;
  background: var(--surface); border-radius: var(--radius);
  padding: 3px 12px 3px 4px;
  font-weight: 700; font-size: .9rem; color: var(--muted);
}
.custom input {
  width: 3.4em; border: 0; outline: none; background: transparent;
  text-align: right; font-weight: 800; font-size: 1rem; color: var(--ui);
  padding: 5px 2px;
  -moz-appearance: textfield;
}
.custom input::-webkit-outer-spin-button,
.custom input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.custom input::placeholder { color: var(--muted); opacity: .6; }
.custom label:focus-within { box-shadow: 0 0 0 2px var(--accent); }

/* ---------- Timer in full screen ---------- */

body.fs .controls .fine { display: none; }
body.fs .clock-wrap { padding: 0; }
body.fs .clock { font-size: min(calc(94cqw / var(--w)), 70cqh); }
body.fs[data-theme="arcade"] .clock { font-size: min(calc(90cqw / var(--w)), 56cqh); }

/* ---------- Google Slides sheet (timer) ---------- */

.sl-options { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; }
.sl-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin: 16px 0 6px; }
.sl-progress { flex: 1 1 160px; height: 10px; border-radius: 99px; background: rgba(127,127,127,.2); overflow: hidden; }
.sl-progress div { height: 100%; width: 0; background: var(--accent); border-radius: inherit; transition: width .2s; }
.sl-preview { margin-top: 12px; border-radius: 14px; padding: 16px; background: repeating-conic-gradient(rgba(127,127,127,.12) 0 25%, transparent 0 50%) 0 0 / 20px 20px; }
.sl-preview canvas { display: block; width: min(100%, 420px); height: auto; margin: 0 auto; }

/* ---------- Click-to-start screen ---------- */

.go {
  position: fixed; inset: 0; z-index: 40;
  display: grid; place-items: center;
  background: var(--bg); color: var(--fg);
  cursor: pointer; text-align: center;
}
.go[hidden] { display: none; }
.go-inner { display: flex; flex-direction: column; align-items: center; gap: 2vh; padding: 20px; }
.go-play {
  width: clamp(90px, 18vmin, 180px); aspect-ratio: 1; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--accent); color: var(--accent-ink);
  box-shadow: 0 20px 50px -15px rgba(0,0,0,.5);
  animation: breathe 1.8s ease-in-out infinite;
}
.go-play svg { width: 50%; height: 50%; margin-left: 8%; }
.go-time { font-family: var(--clock-font); font-size: clamp(3rem, 16vmin, 10rem); line-height: 1; text-shadow: var(--clock-shadow); }
.go-label { font-family: var(--clock-font); font-size: clamp(1.4rem, 6vmin, 3.5rem); color: var(--ui); }
.go-label:empty { display: none; }
.go-hint { font-weight: 800; font-size: clamp(1rem, 3vmin, 1.6rem); color: var(--ui); opacity: .8; }
@keyframes breathe { 50% { transform: scale(1.07); } }

body.embed .controls .fine { display: none; }

@media (max-width: 640px) {
  .transport .ghost { order: 2; }
  .transport .primary { flex: 1 1 55%; }
}