/* =====================================================================
   www/css/timer.css — the activity timer
   =====================================================================

   Three pieces, loaded after f7_bridge.css so the tokens below resolve:

     .fr-timer-fab      the floating "Timer" button, above the tab bar
     #fr-timer-sheet    the parent's setup sheet (bottom sheet, like #fr-more-sheet)
     #fr-timer-stage    the child's full-screen countdown

   EVERY selector here is prefixed fr-timer-. Nothing in this file touches
   .navbar, .toolbar or .tabbar — those are Framework7's class names and
   islamic_theme.css still holds Bootstrap-era rules on them (see CLAUDE.md).

   The stage is the reason this feature exists, so it is designed for a child
   who cannot yet read a clock: one ring that empties, one colour that changes
   as the end approaches, and the activity's own picture in the middle. The
   digits are for the parent standing next to them.
   ===================================================================== */

/* Scoped border-box. The app has no global box-sizing reset — islamic_theme.css
   and f7_bridge.css both rely on Framework7's, which only covers its own
   components — so `width: 100%` on an input inside a padded sheet resolved to
   100% PLUS its padding and 2px border, and the title field and both picture
   buttons ran off the right edge of the phone. Scoped to the timer so it cannot
   change the metrics of anything that already ships. */
#fr-timer-sheet, #fr-timer-sheet *,
#fr-timer-stage, #fr-timer-stage *,
.fr-timer-fab, .fr-timer-fab * { box-sizing: border-box; }

:root {
  /* The stage's own palette. Three states, in the order a child meets them:
     plenty of time, nearly there, almost done. Deliberately NOT the app's teal
     — the stage is a different mode, and it should look like one. */
  --fr-timer-go:    #2FB673;   /* > 25% remaining */
  --fr-timer-soon:  #F2A03D;   /* <= 25% */
  --fr-timer-last:  #E8604C;   /* <= 10% */
  --fr-timer-done:  #7C4DFF;
  --fr-timer-track: rgba(255, 255, 255, .22);
  --fr-timer-ink:   #0B2B36;
}

/* ── The floating button ──────────────────────────────────────────────────── */
/* An extended FAB (icon + word), not a bare circle: "Timer" is not a universal
   glyph and the parent has to find it without being told where it is.

   Bottom offset is composed from the chrome's own tokens rather than a number.
   --fr-tabbar-h and --fr-safe-bottom are what the tab bar itself is built from
   in f7_bridge.css, so the button cannot drift out of step with it — including
   on the Android devices where the bar grew by the navigation-bar inset. */
.fr-timer-fab {
  position: fixed;
  right: var(--fr-space-4, 16px);
  bottom: calc(var(--fr-tabbar-h, 64px) + var(--fr-safe-bottom, 0px) + var(--fr-space-3, 12px));
  z-index: 9000;

  display: inline-flex;
  align-items: center;
  gap: var(--fr-space-2, 8px);
  min-height: 52px;                 /* > --fr-tap; it is a primary action */
  padding: 0 var(--fr-space-5, 24px) 0 var(--fr-space-4, 16px);

  border: none;
  border-radius: 999px;
  background: linear-gradient(135deg, #00A3C4 0%, #007A94 100%);
  color: #FFFFFF;
  font-size: 1rem;
  font-weight: 900;
  letter-spacing: .2px;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(0, 78, 95, .34);
  -webkit-tap-highlight-color: transparent;
}
.fr-timer-fab:active { transform: scale(.95); }
.fr-timer-fab:focus-visible { outline: 3px solid #FFD300; outline-offset: 3px; }
.fr-timer-fab .fr-timer-fab-ic { font-size: 1.3rem; line-height: 1; }

/* RTL puts it on the other side, with the padding mirrored. */
[dir="rtl"] .fr-timer-fab {
  right: auto;
  left: var(--fr-space-4, 16px);
  padding: 0 var(--fr-space-4, 16px) 0 var(--fr-space-5, 24px);
}

/* Hidden while the stage is up (it would sit on top of the countdown) and
   while a timer is being set up. Both are driven by a class on <body>. */
body.fr-timer-running .fr-timer-fab { display: none; }

/* A timer that is running but minimised turns the button into its own status:
   the parent taps it to get back to the stage. */
.fr-timer-fab.fr-timer-fab-live {
  background: linear-gradient(135deg, #2FB673 0%, #1E8F58 100%);
}

@media (prefers-reduced-motion: reduce) {
  .fr-timer-fab:active { transform: none; }
}

/* ── Setup sheet ──────────────────────────────────────────────────────────── */
/* Same bottom-sheet shape as #fr-more-sheet so the app has one modal idiom,
   but scrollable: on a 360x640 phone the four sections do not fit. */
#fr-timer-backdrop {
  position: fixed; inset: 0;
  background: rgba(6, 32, 40, .45);
  opacity: 0; pointer-events: none;
  transition: opacity .18s ease;
  z-index: 100040;
}
#fr-timer-backdrop.open { opacity: 1; pointer-events: auto; }

#fr-timer-sheet {
  position: fixed; left: 0; right: 0; bottom: 0;
  max-height: 88dvh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  background: #FFFFFF;
  border-radius: 20px 20px 0 0;
  padding: var(--fr-space-2, 8px) var(--fr-space-4, 16px)
           calc(var(--fr-space-4, 16px) + var(--fr-safe-bottom, 0px));
  transform: translateY(102%);
  transition: transform .22s cubic-bezier(.32, .72, 0, 1);
  z-index: 100045;
  box-shadow: 0 -8px 32px rgba(0, 0, 0, .18);
}
#fr-timer-sheet.open { transform: translateY(0); }

.fr-timer-sheet-title {
  font-size: 1.15rem; font-weight: 900; color: #007A94;
  margin: 0 0 var(--fr-space-1, 4px);
}
.fr-timer-sheet-sub {
  font-size: .82rem; color: #6B8794;
  margin: 0 0 var(--fr-space-4, 16px);
}
.fr-timer-label {
  display: block;
  font-size: .78rem; font-weight: 800; color: #4A7080;
  text-transform: uppercase; letter-spacing: .4px;
  margin: var(--fr-space-4, 16px) 0 var(--fr-space-2, 8px);
}

/* Quick-pick activities. Emoji over word, so a parent recognises the row at a
   glance and a child can be handed the phone to choose. */
.fr-timer-picks {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--fr-space-2, 8px);
}
.fr-timer-pick {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px;
  min-height: 72px; padding: var(--fr-space-2, 8px) 2px;
  border: 2px solid #DCE9EE; border-radius: 16px;
  background: #F7FCFE; color: var(--fr-timer-ink);
  font-size: .72rem; font-weight: 800; line-height: 1.15;
  text-align: center; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.fr-timer-pick .fr-timer-pick-em { font-size: 1.7rem; line-height: 1; }
.fr-timer-pick:active { background: #EAF6F9; }
.fr-timer-pick.sel { border-color: #007A94; background: #DFF4F9; }
.fr-timer-pick:focus-visible { outline: 3px solid #00838F; outline-offset: 2px; }

.fr-timer-text {
  width: 100%; min-height: var(--fr-tap, 44px);
  padding: 0 var(--fr-space-3, 12px);
  border: 2px solid #DCE9EE; border-radius: 14px;
  background: #FFFFFF; color: var(--fr-timer-ink);
  font-size: 1rem; font-weight: 700; font-family: inherit;
}
.fr-timer-text:focus { outline: none; border-color: #007A94; }

/* Duration chips. 5/10/15/30 are the presets the parent asked for; "Andet"
   reveals a minute box. Four across on a phone, so nothing wraps to one chip
   alone on the second row. */
.fr-timer-durations {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--fr-space-2, 8px);
}
.fr-timer-dur {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-height: 58px; padding: var(--fr-space-1, 4px) 0;
  border: 2px solid #DCE9EE; border-radius: 14px;
  background: #F7FCFE; color: var(--fr-timer-ink);
  font-size: 1.15rem; font-weight: 900; line-height: 1.1;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.fr-timer-dur .fr-timer-dur-unit {
  font-size: .62rem; font-weight: 700; color: #6B8794;
  text-transform: uppercase; letter-spacing: .3px;
}
.fr-timer-dur:active { background: #EAF6F9; }
.fr-timer-dur.sel {
  border-color: #007A94; background: #007A94; color: #FFFFFF;
}
.fr-timer-dur.sel .fr-timer-dur-unit { color: rgba(255, 255, 255, .85); }
.fr-timer-dur:focus-visible { outline: 3px solid #00838F; outline-offset: 2px; }

.fr-timer-custom { display: none; margin-top: var(--fr-space-2, 8px); }
.fr-timer-custom.open { display: block; }

/* Picture block: the chosen image (or emoji) beside the two ways to change it. */
.fr-timer-pic-row {
  display: flex; align-items: center; gap: var(--fr-space-3, 12px);
}
.fr-timer-pic-preview {
  flex: 0 0 76px; width: 76px; height: 76px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 18px; overflow: hidden;
  background: #E3F5F8; border: 2px solid #DCE9EE;
  font-size: 2.4rem; line-height: 1;
}
.fr-timer-pic-preview img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.fr-timer-pic-actions {
  display: flex; flex-direction: column; gap: var(--fr-space-2, 8px);
  flex: 1 1 auto; min-width: 0;
}
.fr-timer-pic-btn {
  display: flex; align-items: center; gap: var(--fr-space-2, 8px);
  width: 100%; min-height: var(--fr-tap, 44px);
  padding: 0 var(--fr-space-3, 12px);
  border: 2px solid #DCE9EE; border-radius: 14px;
  background: #F7FCFE; color: #00738A;
  font-size: .88rem; font-weight: 800; text-align: left;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
}
[dir="rtl"] .fr-timer-pic-btn { text-align: right; }
.fr-timer-pic-btn:active { background: #EAF6F9; }
.fr-timer-pic-btn:disabled { opacity: .5; cursor: default; }
.fr-timer-pic-btn:focus-visible { outline: 3px solid #00838F; outline-offset: 2px; }
.fr-timer-pic-note { font-size: .74rem; color: #6B8794; margin-top: var(--fr-space-1, 4px); }
.fr-timer-pic-note.err { color: #C0392B; font-weight: 700; }

.fr-timer-start {
  display: flex; align-items: center; justify-content: center; gap: var(--fr-space-2, 8px);
  width: 100%; min-height: 58px;
  margin: var(--fr-space-5, 24px) 0 var(--fr-space-2, 8px);
  border: none; border-radius: 18px;
  background: linear-gradient(135deg, #2FB673 0%, #1E8F58 100%);
  color: #FFFFFF; font-size: 1.1rem; font-weight: 900;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
  box-shadow: 0 4px 14px rgba(30, 143, 88, .32);
}
.fr-timer-start:active { transform: scale(.98); }
.fr-timer-start:focus-visible { outline: 3px solid #00838F; outline-offset: 2px; }

.fr-timer-cancel {
  width: 100%; min-height: var(--fr-tap, 44px);
  border: none; border-radius: 14px;
  background: #F1F6F8; color: #6B8794;
  font-size: .95rem; font-weight: 800; cursor: pointer;
}

/* ── The stage ────────────────────────────────────────────────────────────── */
/* Below #login-overlay (99999) on purpose: a device that has been logged out
   must show the login screen, not a countdown left over from before. Above
   everything else, including the tab bar, because for its duration the
   countdown IS the app. */
#fr-timer-stage {
  position: fixed; inset: 0;
  z-index: 99500;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: calc(var(--fr-space-5, 24px) + env(safe-area-inset-top, 0px))
           var(--fr-space-4, 16px)
           calc(var(--fr-space-5, 24px) + var(--fr-safe-bottom, 0px));
  background: radial-gradient(120% 90% at 50% 0%, #0E4E5E 0%, #06232C 100%);
  color: #FFFFFF;
  text-align: center;
  overscroll-behavior: contain;
}
#fr-timer-stage.open { display: flex; }

.fr-timer-stage-head {
  width: 100%;
  display: flex; align-items: flex-start; gap: var(--fr-space-2, 8px);
}
.fr-timer-stage-title {
  flex: 1 1 auto; min-width: 0;
  font-size: clamp(1.4rem, 6.5vw, 2.2rem);
  font-weight: 900; line-height: 1.15;
  overflow-wrap: anywhere;
}
/* Small, and in the corner, on purpose. Stopping early is the parent's call;
   a child reaching for the screen should meet the ring, not the exit. */
.fr-timer-close {
  flex: 0 0 var(--fr-tap, 44px);
  width: var(--fr-tap, 44px); height: var(--fr-tap, 44px);
  border: none; border-radius: 999px;
  background: rgba(255, 255, 255, .14); color: #FFFFFF;
  font-size: 1.2rem; font-weight: 800; line-height: 1;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.fr-timer-close:active { background: rgba(255, 255, 255, .28); }
.fr-timer-close:focus-visible { outline: 3px solid #FFD300; outline-offset: 2px; }

/* The ring. Square, capped so it never crowds the buttons on a short screen.
   As large as the screen allows on purpose: this is the part a child who cannot
   read a clock actually uses, and the digits are for the adult beside them. */
.fr-timer-ring-wrap {
  position: relative;
  width: min(86vw, 58dvh, 460px);
  height: min(86vw, 58dvh, 460px);
  flex: 0 0 auto;
}
.fr-timer-ring { width: 100%; height: 100%; transform: rotate(-90deg); display: block; }
.fr-timer-ring-track { fill: none; stroke: var(--fr-timer-track); }
.fr-timer-ring-arc {
  fill: none;
  stroke: var(--fr-timer-go);
  stroke-linecap: round;
  /* No CSS transition on stroke-dashoffset: the value is recomputed from the
     wall clock on every frame, and a transition would make it chase its own
     target and lag visibly. Only the colour animates. */
  transition: stroke .5s ease;
}
#fr-timer-stage.soon .fr-timer-ring-arc { stroke: var(--fr-timer-soon); }
#fr-timer-stage.last .fr-timer-ring-arc { stroke: var(--fr-timer-last); }
#fr-timer-stage.done .fr-timer-ring-arc { stroke: var(--fr-timer-done); }

.fr-timer-ring-center {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: var(--fr-space-1, 4px);
  padding: 14%;
}
.fr-timer-face {
  width: 42%; aspect-ratio: 1 / 1;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%; overflow: hidden;
  background: rgba(255, 255, 255, .12);
  font-size: clamp(2.4rem, 13vw, 4.6rem); line-height: 1;
  flex: 0 0 auto;
}
.fr-timer-face img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Tabular numerals, or the digits jump sideways every second. */
.fr-timer-clock {
  font-size: clamp(2.6rem, 15vw, 5.2rem);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -1px;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}
.fr-timer-caption {
  font-size: .82rem; font-weight: 800;
  color: rgba(255, 255, 255, .72);
  text-transform: uppercase; letter-spacing: 1px;
}

.fr-timer-stage-actions {
  width: 100%;
  display: flex; gap: var(--fr-space-3, 12px);
  align-items: stretch; justify-content: center;
}
.fr-timer-act {
  flex: 1 1 0; min-height: 56px; max-width: 220px;
  display: flex; align-items: center; justify-content: center; gap: 6px;
  border: 2px solid rgba(255, 255, 255, .28); border-radius: 18px;
  background: rgba(255, 255, 255, .1); color: #FFFFFF;
  font-size: 1rem; font-weight: 900;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.fr-timer-act:active { background: rgba(255, 255, 255, .22); }
.fr-timer-act:focus-visible { outline: 3px solid #FFD300; outline-offset: 2px; }
.fr-timer-act-primary {
  background: #FFFFFF; color: #06232C; border-color: #FFFFFF;
}

/* Finished. The ring is full, the colour is the celebration colour, and the
   whole stage breathes once a second so it is noticeable from across a room. */
#fr-timer-stage.done { background: radial-gradient(120% 90% at 50% 0%, #4A2E8F 0%, #1B0F38 100%); }
#fr-timer-stage.done .fr-timer-clock { font-size: clamp(2rem, 11vw, 4rem); }
.fr-timer-done-note {
  display: none;
  font-size: clamp(1.1rem, 5vw, 1.5rem); font-weight: 900;
}
#fr-timer-stage.done .fr-timer-done-note { display: block; }
#fr-timer-stage.done .fr-timer-caption { display: none; }

@media (prefers-reduced-motion: no-preference) {
  #fr-timer-stage.done .fr-timer-ring-wrap { animation: fr-timer-pulse 1.1s ease-in-out infinite; }
  #fr-timer-stage.last .fr-timer-clock     { animation: fr-timer-tick 1s steps(1) infinite; }
}
@keyframes fr-timer-pulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.045); }
}
@keyframes fr-timer-tick {
  0%, 50%   { opacity: 1; }
  50.01%, 100% { opacity: .72; }
}

/* Paused reads as paused without a word: the ring drops back. */
#fr-timer-stage.paused .fr-timer-ring-arc { stroke: rgba(255, 255, 255, .45); }
#fr-timer-stage.paused .fr-timer-clock    { opacity: .6; }

/* A short phone (or a landscape one) has no room for the ring at 52dvh AND
   three rows of chrome. Shrink the ring, not the buttons. */
@media (max-height: 620px) {
  .fr-timer-ring-wrap { width: min(64vw, 42dvh, 300px); height: min(64vw, 42dvh, 300px); }
  .fr-timer-stage-title { font-size: 1.25rem; }
}