/* Shared styles for the timer tool pages (views/tools/*). Colours come from the site theme variables in style.css. */
.pt-tool { --pt-accent: #EC5533; --pt-text: var(--bs-tabs-color, #fff); --pt-muted: var(--bs-tasksub-name-color, #d1d1d1); --pt-panel: var(--bs-task-bg, #ffffff12); max-width: 980px; margin: 0 auto; padding: 0 16px 24px; color: var(--pt-text); text-align: center; }
.pt-tool h1 { font-size: clamp(1.6rem, 3.4vw, 2.4rem); margin: 8px 0 4px; color: var(--pt-text); }
.pt-lead { color: var(--pt-muted); margin: 0 auto 16px; max-width: 640px; font-size: 1rem; }

.pt-stage { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 20px 12px; border-radius: 24px; background: var(--bs-clock-large-bg, #ffffff07); }
.pt-stage:fullscreen, .pt-stage:-webkit-full-screen { background: var(--bs-body-bg, #000); border-radius: 0; width: 100vw; height: 100vh; }
.pt-stage.pt-pseudo-fullscreen { position: fixed; inset: 0; z-index: 9999; background: var(--bs-body-bg, #000); border-radius: 0; }
.pt-time { font-family: 'digital', 'Poppins', monospace; font-size: clamp(3.5rem, 12vw, 7.5rem); line-height: 1; letter-spacing: 2px; color: var(--pt-accent); font-variant-numeric: tabular-nums; }
.pt-stage:fullscreen .pt-time, .pt-stage:-webkit-full-screen .pt-time, .pt-pseudo-fullscreen .pt-time { font-size: min(22vw, 30vh); }
.pt-phase { font-size: 1.15rem; font-weight: 600; text-transform: uppercase; letter-spacing: 2px; min-height: 1.4em; }
.pt-meta { color: var(--pt-muted); font-size: .95rem; min-height: 1.3em; }

.pt-buttons { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 4px; }
.pt-btn { appearance: none; border: 2px solid var(--pt-accent); background: transparent; color: var(--pt-text); border-radius: 999px; padding: 10px 22px; font: 600 1rem 'Poppins', sans-serif; cursor: pointer; min-width: 96px; min-height: 44px; }
.pt-btn:hover { background: #ec553322; }
.pt-btn:focus-visible, .pt-chip:focus-visible, .pt-tool select:focus-visible, .pt-tool input:focus-visible { outline: 3px solid #ffb199; outline-offset: 2px; }
.pt-btn-primary { background: #C73E1D; border-color: #C73E1D; color: #fff; min-width: 140px; }
.pt-btn-primary:hover { background: #B83516; }
.pt-btn-small { padding: 6px 14px; min-width: 0; font-size: .9rem; min-height: 36px; }

.pt-presets { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 16px 0 8px; }
.pt-chip { appearance: none; border: 1px solid var(--bs-modal-box-color, #ffffff29); background: var(--pt-panel); color: var(--pt-text); border-radius: 999px; padding: 7px 14px; font: 500 .95rem 'Poppins', sans-serif; cursor: pointer; min-height: 38px; }
.pt-chip.active, .pt-chip:hover { border-color: var(--pt-accent); color: var(--pt-accent); }

.pt-options { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px 18px; margin: 10px 0; font-size: .95rem; color: var(--pt-muted); }
.pt-options label { display: inline-flex; align-items: center; gap: 6px; }
.pt-tool select, .pt-tool input[type=number], .pt-tool input[type=text] { background: var(--pt-panel); color: var(--pt-text); border: 1px solid var(--bs-modal-box-color, #ffffff29); border-radius: 10px; padding: 6px 8px; font: 500 .95rem 'Poppins', sans-serif; min-height: 36px; }
.pt-tool select option { color: #000; }
.pt-tool input[type=number] { width: 4.2em; text-align: center; }
.pt-tool input[type=text] { width: min(320px, 80vw); }
.pt-custom { display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px; }
.pt-hint { color: var(--pt-muted); font-size: .85rem; margin-top: 6px; }

/* Done flash */
.pt-tool[data-state=done] .pt-time { animation: pt-blink 1s steps(2, start) 6; }
@keyframes pt-blink { to { visibility: hidden; } }
.pt-message { font-size: clamp(1.4rem, 4vw, 2.6rem); font-weight: 700; color: var(--pt-accent); min-height: 1.3em; }

/* Phase colours for cycle and interval timers */
.pt-tool[data-phase=work] .pt-phase, .pt-tool[data-phase=focus] .pt-phase { color: #EC5533; }
.pt-tool[data-phase=rest] .pt-phase, .pt-tool[data-phase=break] .pt-phase { color: #4FC3F7; }
.pt-tool[data-phase=rest] .pt-time, .pt-tool[data-phase=break] .pt-time { color: #4FC3F7; }
.pt-tool[data-phase=prep] .pt-phase, .pt-tool[data-phase=prep] .pt-time { color: #FFC857; }
.pt-tool[data-phase=setrest] .pt-time, .pt-tool[data-phase=setrest] .pt-phase { color: #74F56C; }

/* Progress bar */
.pt-bar { width: min(720px, 90%); height: 18px; border-radius: 999px; background: var(--pt-panel); overflow: hidden; }
.pt-bar span { display: block; height: 100%; width: calc((1 - var(--pt-progress, 0)) * 100%); background: var(--pt-accent); transition: width .2s linear; }

/* Visual disc (Time-Timer style) */
.pt-disc { --pt-disc-color: #E53935; width: min(340px, 72vw); height: auto; }
.pt-disc .face { fill: var(--pt-panel); }
.pt-disc .wedge { fill: var(--pt-disc-color); }
.pt-disc .ticks line { stroke: var(--pt-muted); stroke-width: 1.5; }
.pt-disc .ticks line:nth-child(5n+1) { stroke-width: 3.5; }
.pt-disc .hub { fill: var(--bs-body-bg, #000); stroke: var(--pt-muted); stroke-width: 2; }
.pt-stage:fullscreen .pt-disc, .pt-pseudo-fullscreen .pt-disc { width: min(70vh, 80vw); }

/* Hourglass */
.pt-hourglass { width: min(220px, 50vw); height: auto; }
.pt-hourglass .glass { fill: none; stroke: var(--pt-muted); stroke-width: 4; }
.pt-hourglass .sand { fill: #E9B872; }
.pt-hourglass .stream { stroke: #E9B872; stroke-width: 3; stroke-dasharray: 4 3; opacity: 0; }
.pt-tool[data-state=running] .pt-hourglass .stream { opacity: 1; animation: pt-fall .35s linear infinite; }
@keyframes pt-fall { to { stroke-dashoffset: -7; } }
.pt-stage:fullscreen .pt-hourglass, .pt-pseudo-fullscreen .pt-hourglass { width: min(40vh, 60vw); }

/* Bomb */
.pt-bomb { width: min(300px, 70vw); height: auto; }
.pt-bomb .fuse { fill: none; stroke: #C8A165; stroke-width: 6; stroke-linecap: round; }
.pt-bomb .spark { fill: #FFC857; filter: drop-shadow(0 0 6px #FF7A00); }
.pt-tool[data-state=running] .pt-bomb .spark { animation: pt-spark .2s ease-in-out infinite alternate; }
@keyframes pt-spark { to { transform: scale(1.5); } }
.pt-bomb .spark { transform-box: fill-box; transform-origin: center; }
.pt-bomb-led { font-family: 'digital', monospace; color: #FF2D2D; background: #1a0000; border-radius: 10px; padding: 4px 16px; font-size: clamp(2.6rem, 9vw, 5rem); text-shadow: 0 0 10px #ff2d2d88; }
.pt-tool[data-state=done] .pt-stage { animation: pt-boom .9s ease-out; }
@keyframes pt-boom { 0% { background: #fff6d6; } 30% { background: #ff9d2e; } 100% { background: var(--bs-clock-large-bg, #ffffff07); } }
.pt-stage:fullscreen .pt-bomb, .pt-pseudo-fullscreen .pt-bomb { width: min(50vh, 70vw); }

/* Aesthetic themes */
.pt-tool[data-theme-name] .pt-stage { color: #fff; transition: background .4s; }
.pt-tool[data-theme-name=sunset] .pt-stage { background: linear-gradient(135deg, #ff9a8b, #ff6a88 55%, #ff99ac); }
.pt-tool[data-theme-name=lavender] .pt-stage { background: linear-gradient(135deg, #a18cd1, #fbc2eb); }
.pt-tool[data-theme-name=matcha] .pt-stage { background: linear-gradient(135deg, #96c93d, #c5e3a5 60%, #e6f2d6); color: #2d3a1f; }
.pt-tool[data-theme-name=ocean] .pt-stage { background: linear-gradient(135deg, #2193b0, #6dd5ed); }
.pt-tool[data-theme-name=midnight] .pt-stage { background: linear-gradient(135deg, #0f2027, #203a43 50%, #2c5364); }
.pt-tool[data-theme-name=peach] .pt-stage { background: linear-gradient(135deg, #ffecd2, #fcb69f); color: #5b3a29; }
.pt-tool[data-theme-name] .pt-stage .pt-time { color: inherit; text-shadow: 0 2px 18px #0003; }
.pt-tool[data-theme-name] .pt-stage .pt-btn { color: inherit; border-color: currentColor; }
.pt-tool[data-theme-name] .pt-stage .pt-btn-primary { background: #ffffffd9; color: #333; border-color: transparent; }
.pt-tool[data-font=soft] .pt-time { font-family: 'Poppins', sans-serif; font-weight: 300; letter-spacing: 0; }

/* Exam timer */
.pt-exam-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; width: min(720px, 100%); }
.pt-exam-grid div { background: var(--pt-panel); border-radius: 14px; padding: 10px 6px; }
.pt-exam-grid small { display: block; color: var(--pt-muted); font-size: .8rem; text-transform: uppercase; letter-spacing: 1px; }
.pt-exam-grid strong { font-size: clamp(1.1rem, 3vw, 1.6rem); }
.pt-tool[data-warn="30"] .pt-time { color: #FFC857; }
.pt-tool[data-warn="10"] .pt-time, .pt-tool[data-warn="5"] .pt-time { color: #FF4D4D; }
.pt-exam-title { font-size: clamp(1.2rem, 3vw, 2rem); font-weight: 600; min-height: 1.3em; }

/* Classroom */
.pt-tool[data-display=disc] .pt-only-bar, .pt-tool[data-display=digits] .pt-only-bar, .pt-tool[data-display=digits] .pt-only-disc, .pt-tool[data-display=bar] .pt-only-disc { display: none; }
.pt-tool[data-classroom-theme=chalk] .pt-stage { background: #23412f; color: #f4f1e8; }
.pt-tool[data-classroom-theme=chalk] .pt-time { color: #f4f1e8; }
.pt-tool[data-classroom-theme=sky] .pt-stage { background: #e3f2fd; color: #0d3c61; }
.pt-tool[data-classroom-theme=sky] .pt-time { color: #1565c0; }

/* Interval settings grid */
.pt-fields { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 16px; margin: 10px 0; }
.pt-fields label { display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: .85rem; color: var(--pt-muted); }

@media (max-width: 575px) {
  .pt-exam-grid { grid-template-columns: 1fr 1fr; }
  .pt-btn { padding: 9px 16px; min-width: 84px; }
}
@media (prefers-reduced-motion: reduce) {
  .pt-tool *, .pt-tool *::before, .pt-tool *::after { animation: none !important; transition: none !important; }
}