/* The study timer (timer.html). The shared look, top bar and buttons come from styles.css;
   only the timer's own pieces live here, all named tm-. Shantell Sans for the clock, buttons
   and her lines; Nunito (the body font) for the rest. */

.tm { --head: var(--font-head, "Shantell Sans", "Nunito", system-ui, sans-serif); }
.tm-title, .tm-mode, .tm-time, .tm-say, .tm .btn, .tm-pills button, .tm-task-shown, .tm-task-input, .tm-week .n, .tm-video strong { font-family: var(--head); }

.tm {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(300px, .7fr);
  gap: clamp(24px, 4vw, 56px);
  align-items: center;
  max-width: 1280px;
  margin: 0 auto;
  padding: clamp(20px, 3vw, 40px) var(--gutter) 0;
}

/* her desk: two stacks of three boil drawings, so a new moment can fade in over the last */
.tm-pic {
  position: relative;
  aspect-ratio: 4 / 3;
  width: min(100%, calc((100svh - 120px) * 4 / 3));
  margin: 0 auto;
  overflow: hidden;
  border: 3px solid var(--line);
  border-radius: var(--wobble);
  background: #E2CEB4;
  user-select: none;
  -webkit-user-select: none;
}
:root[data-night] .tm-pic { background: #4A403F; }
.tm-layer { position: absolute; inset: 0; opacity: 0; transition: opacity .6s ease; }
.tm-layer.on { opacity: 1; }
.tm-layer img { position: absolute; inset: 0; width: 100%; height: 100%; visibility: hidden; }
.tm-layer img.on { visibility: visible; }
@media (prefers-reduced-motion: reduce) { .tm-layer { transition: none; } }

/* the clock */
.tm-panel { text-align: center; }
.tm-title { font-size: 19px; margin: 0 0 4px; color: var(--soft); font-weight: 500; letter-spacing: 0; }
.tm-mode { font-size: 22px; font-weight: 700; margin: 0; line-height: 1.2; }
.tm-time {
  font-size: clamp(88px, 8.4vw, 124px);
  font-weight: 700;
  line-height: 1;
  margin: 6px 0 20px;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.01em;
}
.tm[data-mode="break"] .tm-mode { color: var(--rose); }
.tm[data-paused] .tm-time { opacity: .55; }

.tm-controls { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; }
.tm-controls .btn { min-width: 132px; font-size: 19px; }

/* what you're studying: a soft underlined box, then just the words */
.tm-task { margin: 2px auto 10px; max-width: 340px; min-height: 44px; }
.tm-task-input {
  width: 100%; min-height: 44px; padding: 6px 4px;
  font-size: 19px; font-weight: 500; text-align: center; color: var(--ink);
  background: none; border: 0; border-bottom: 2.5px dashed var(--soft); border-radius: 0;
}
.tm-task-input::placeholder { color: var(--soft); opacity: .8; }
.tm-task-input:focus { outline: none; border-bottom-style: solid; border-bottom-color: var(--rose); }
.tm-task-shown { margin: 0; padding: 8px 4px; font-size: 19px; font-weight: 500; line-height: 1.4; overflow-wrap: anywhere; }
.tm-task-shown::before { content: "Studying: "; color: var(--soft); font-weight: 400; }

.tm-settings { display: flex; flex-direction: column; align-items: center; gap: 8px; margin-top: 16px; }
.tm-pills { display: inline-flex; gap: 6px; flex-wrap: wrap; justify-content: center; }
.tm-pills button {
  font-size: 15px; font-weight: 500; line-height: 1.2; color: var(--ink); background: none; cursor: pointer;
  min-height: 44px; padding: 6px 14px;
  border: 2.5px solid var(--line); border-radius: 999px;
}
.tm-pills button[aria-checked="true"] { background: var(--honey); color: #3B2A22; font-weight: 700; }
.tm-pills button:disabled { cursor: default; opacity: .5; }
.tm-pills button[aria-checked="true"]:disabled { opacity: .8; }

/* while a focus block runs, everything but her, the clock and Pause goes quiet */
.site-top > *, .tm-title, .tm-settings, .tm-extras, .tm-today, .tm-below { transition: opacity .8s ease; }
body[data-focus] .site-top > * { opacity: .3; }          /* its contents fade, its paper stays */
body[data-focus] .site-top:hover > *, body[data-focus] .site-top:focus-within > * { opacity: 1; }
body[data-focus] .tm-title, body[data-focus] .tm-settings, body[data-focus] .tm-extras { opacity: 0; visibility: hidden; transition: opacity .8s ease, visibility 0s .8s; }
body[data-focus] .tm-today { opacity: .55; }
body[data-focus] .tm-below { opacity: .35; }
body[data-focus] .tm-controls #reset { opacity: .6; }
@media (prefers-reduced-motion: reduce) {
  .site-top > *, .tm-title, .tm-settings, .tm-extras, .tm-today, .tm-below { transition: none; }
}

.tm-say {
  min-height: 2.9em;
  max-width: 380px;
  margin: 16px auto 0;
  font-size: 18px;
  font-weight: 500;
  line-height: 1.45;
}

.tm-today { display: flex; align-items: center; justify-content: center; gap: 10px; color: var(--soft); font-size: 15px; margin-top: 4px; }
.tm-dots { display: inline-flex; gap: 6px; }
.tm-dots i {
  width: 16px; height: 16px;
  border: 2.5px solid var(--line);
  border-radius: 50% 46% 52% 48%;
}
.tm-dots i.done { background: var(--rose); }

.tm-extras { display: flex; flex-direction: column; align-items: center; gap: 6px; margin-top: 12px; }
.tm-extras [hidden] { display: none; }
.tm-link {
  font: inherit; font-size: 15px; color: var(--soft); background: none; border: 0; cursor: pointer;
  text-decoration: underline; text-underline-offset: 3px; min-height: 44px; padding: 0 8px;
}
.tm-check { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-size: 15px; color: var(--soft); cursor: pointer; }
.tm-check input { width: 20px; height: 20px; accent-color: var(--rose); margin: 0; }

/* your week: seven days, a round mark for each, filled by how many blocks */
.tm-days { max-width: 760px; }
.tm-week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; padding: 0; margin: 18px 0 10px; list-style: none; }
.tm-week li { display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 15px; color: var(--soft); }
.tm-week .n {
  display: grid; place-items: center;
  width: clamp(36px, 9vw, 52px); aspect-ratio: 1;
  font-size: 17px; font-weight: 700; color: var(--ink);
  border: 2.5px solid var(--line); border-radius: 50% 46% 52% 48%;
}
.tm-week .n[data-k="1"] { background: color-mix(in srgb, var(--rose) 35%, transparent); }
.tm-week .n[data-k="2"] { background: color-mix(in srgb, var(--rose) 65%, transparent); }
.tm-week .n[data-k="3"] { background: var(--rose); color: var(--rose-ink); }
.tm-week .today { color: var(--ink); font-weight: 700; }
.tm-week .today .n { border-width: 3.5px; }
.tm-days-total { color: var(--soft); margin: 0; }

/* the study-with-me video, once it has a link */
.tm-video-wrap[hidden] { display: none; }
.tm-video-wrap { max-width: 760px; }
.tm-video { display: grid; grid-template-columns: minmax(0, 220px) minmax(0, 1fr); gap: 18px; align-items: center; padding: 14px; text-decoration: none; transition: transform .12s; }
.tm-video:hover { transform: rotate(-.5deg) translateY(-2px); }
.tm-video-pic { position: relative; display: block; border-radius: 12px; overflow: hidden; border: 2.5px solid var(--line); }
.tm-video-pic img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.tm-play {
  position: absolute; left: 50%; top: 50%; translate: -50% -50%;
  display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%;
  color: #FFF6EA; background: rgba(196, 92, 82, .92); border: 2.5px solid #3B2A22;
}
.tm-play svg { width: 26px; height: 26px; margin-left: 3px; }
.tm-video-words { display: flex; flex-direction: column; gap: 4px; }
.tm-video strong { font-size: 21px; line-height: 1.2; }
.tm-video-words span { color: var(--soft); font-size: 16px; }

.tm-how { max-width: 760px; }
.tm-how ul { padding-left: 1.1em; margin: 0; }
.tm-how li { margin-bottom: .5em; }
.tm-thanks a { color: var(--ink); }

/* phones and narrow windows: her desk on top, edge to edge, the clock under it */
@media (max-width: 860px) {
  .tm { grid-template-columns: 1fr; gap: 18px; padding: 0 0 0; }
  .tm-pic { width: 100%; border-width: 0 0 3px; border-radius: 0; }
  .tm-panel { padding: 0 16px; }
  .tm-title { display: none; }
  .tm-mode { font-size: 20px; }
  .tm-time { font-size: clamp(72px, 23vw, 112px); margin: 2px 0 14px; }
  .tm-controls .btn { flex: 1 1 0; min-width: 0; max-width: 200px; font-size: 18px; }
  .tm-say { font-size: 17px; margin-top: 14px; }
  .tm-task-input, .tm-task-shown { font-size: 18px; }
  .tm-week { gap: 4px; }
  .tm-week li { font-size: 13px; }
  .tm-video { grid-template-columns: 1fr; }
}