/* =========================================================================
   EMPIRIUM OS — MOBILE: FOCUS LOCK

   The screen that appears when you leave the app during a work session.
   Everything is scoped under .fl-screen, the same containment rule
   mobile-routines.css uses: this is a light red/rose surface and the rest of
   the app is deep navy, so a single leaked selector would be very visible.

   NOT A SCREENSHOT. The reference design is rebuilt out of real elements —
   live text, real buttons, a timer that updates — for the reasons that matter
   on a phone: it stays sharp at any density, reflows for any aspect ratio,
   and the controls are real tap targets with real focus states. The only
   things borrowed wholesale from the reference are the composition and the
   palette — and even the composition has since been reworked hard toward
   function, see below.

   ARTWORK IS CSS, NOT IMAGE FILES. The red cloud field, the glow and the
   three prohibition emblems are all gradients, borders and inline SVG
   glyphs. That is a deliberate choice over slicing PNGs the way
   mobile-routines.css does for its bezel: those are photographic renders CSS
   genuinely cannot draw, whereas this composition is circles, bars and soft
   light. Drawing it means no asset to ship, no resolution ceiling, and no
   seam to match when the layout reflows.

   FOUR-REGION LAYOUT — the thing that actually matters here. .fl-screen is a
   flex column with exactly four direct children, top to bottom:
     .fl-bar     flex:none  — clock, mode pill, mode badge. Pinned.
     .fl-hero    flex:none  — phase (pomodoro only) + the big countdown +
                              one caption line. Nothing else. Pinned.
     .fl-tasks   flex:1 1 auto; overflow-y:auto — TODAY'S ACTIONS. The one
                              region that scrolls, and the one that gets
                              whatever height .fl-bar/.fl-hero/.fl-actions
                              don't need.
     .fl-actions flex:none  — one row of three compact buttons (dismissible)
                              or a single hold-to-end bar (locked). Pinned.
   This replaced an earlier version built as ONE scrolling column with a full
   hero (lock icon, giant title, subtitle, a motivational paragraph, a boxed
   timer card) ahead of the task list — which pushed the list below the fold
   on most phones and gave three decision buttons a full-width stacked row
   each. The hero's job is now just "how much time, what phase" — everything
   else that used to live there was mood, not information the countdown/
   phase/task list don't already carry — and the actions are a compact row,
   not a stack, so BOTH lost space goes to the task list, which is the part
   worth looking at while you decide whether to put the phone down.
   ========================================================================= */

.fl-screen{
  /* ---- palette, sampled from the reference ---- */
  --fl-ink:#101b47;           /* deep navy — headings, timer minutes */
  --fl-ink-soft:#2b3560;
  --fl-body:#33324a;
  --fl-red:#cf1229;           /* primary red — emphasis, timer seconds */
  --fl-red-bright:#e8324a;
  --fl-red-deep:#8d0f22;
  --fl-rose:#f6dcdd;
  --fl-glass:rgba(255,255,255,.58);
  --fl-glass-line:rgba(255,255,255,.72);
  --fl-glass-shadow:rgba(141,15,34,.16);

  position:fixed; inset:0;
  /* Above the topbar, the tab bar, the routines immersive screen and the
     pairing-scan overlay — nothing in this app may sit on top of the lock. */
  z-index:9000;
  display:flex; flex-direction:column;
  overflow:hidden;
  font-family:var(--font);
  color:var(--fl-body);
  /* Base field: pale rose at the top-left resolving into deep red at the
     right, which is what carries the whole mood of the reference. */
  background:
    radial-gradient(120% 90% at 100% 18%, rgba(232,50,74,.92) 0%, rgba(200,25,45,.72) 38%, rgba(200,25,45,0) 72%),
    radial-gradient(90% 70% at 88% 72%, rgba(160,12,32,.78) 0%, rgba(160,12,32,0) 66%),
    radial-gradient(120% 80% at 0% 0%, #fdf1f1 0%, #fbe4e5 42%, #f6cdcf 100%);
  animation:fl-in .28s ease-out both;
}

@keyframes fl-in{ from{ opacity:0; transform:scale(1.015); } to{ opacity:1; transform:none; } }
@media (prefers-reduced-motion:reduce){ .fl-screen{ animation:none; } }

/* Stop the app scrolling behind the lock, and kill the rubber-band bounce
   that would otherwise reveal the navy shell underneath at the edges. */
body.is-focus-locked{ overflow:hidden; }

/* =========================================================================
   DECORATIVE LAYER — the red cloud field and the three prohibition emblems
   ========================================================================= */
.fl-art{
  position:absolute; inset:0;
  pointer-events:none;
  overflow:hidden;
}

/* Soft cloud bloom, top right — the lit smoke in the reference. */
.fl-art::before{
  content:''; position:absolute;
  top:-14%; right:-24%; width:88%; aspect-ratio:1;
  border-radius:50%;
  background:radial-gradient(circle at 38% 38%, rgba(255,178,178,.85) 0%, rgba(233,72,90,.42) 42%, rgba(233,72,90,0) 70%);
  filter:blur(6px);
}
/* Ember scatter, bottom right. */
.fl-art::after{
  content:''; position:absolute;
  bottom:-8%; right:-10%; width:70%; aspect-ratio:1;
  border-radius:50%;
  background:radial-gradient(circle at 50% 60%, rgba(255,120,120,.5) 0%, rgba(120,6,22,.35) 45%, rgba(120,6,22,0) 72%);
  filter:blur(10px);
}

/* The emblem stack. Right-anchored and allowed to bleed off the edge, so on
   a narrow phone you see the same silhouette the reference has rather than
   three squashed circles fighting the text for width. */
.fl-emblems{
  position:absolute;
  top:6%; bottom:12%; right:-9%;
  width:46%;
  display:flex; flex-direction:column;
  align-items:center; justify-content:space-around;
  opacity:.9;
}

.fl-emblem{
  position:relative;
  width:min(100%, 34vw);
  aspect-ratio:1;
  display:grid; place-items:center;
}

/* Ring + diagonal bar: the "no" symbol, drawn rather than iconised so the
   stroke weight scales with the element instead of pixelating. */
.fl-emblem-ring{
  position:absolute; inset:0;
  border-radius:50%;
  border:calc(min(34vw,100%) * .085) solid rgba(214,28,50,.92);
  box-shadow:
    0 0 0 1px rgba(255,255,255,.18) inset,
    0 0 26px rgba(255,70,90,.55),
    0 0 60px rgba(214,28,50,.35);
  background:radial-gradient(circle at 42% 34%, rgba(255,255,255,.14), rgba(255,255,255,0) 60%);
}
.fl-emblem-ring::after{
  content:''; position:absolute;
  left:50%; top:-4%; width:calc(min(34vw,100%) * .085); height:108%;
  transform:translateX(-50%) rotate(45deg);
  transform-origin:center;
  border-radius:99px;
  background:rgba(214,28,50,.92);
  box-shadow:0 0 18px rgba(255,70,90,.5);
}

.fl-emblem svg{
  width:52%; height:52%;
  opacity:.9;
  filter:drop-shadow(0 2px 6px rgba(90,4,16,.45));
}

/* The plinth each emblem stands on in the reference. */
.fl-emblem-base{
  position:absolute; left:50%; bottom:-9%;
  width:78%; height:12%;
  transform:translateX(-50%);
  border-radius:50%;
  background:radial-gradient(ellipse at 50% 40%, rgba(255,150,150,.5), rgba(120,6,22,0) 70%);
}

/* Legibility scrim: content sits over the artwork, so the left side has to
   stay pale enough for navy text at any screen width. */
.fl-scrim{
  position:absolute; inset:0;
  pointer-events:none;
  background:linear-gradient(100deg,
    rgba(253,241,241,.94) 0%,
    rgba(252,232,233,.86) 34%,
    rgba(250,214,216,.42) 60%,
    rgba(250,214,216,0) 82%);
}

/* =========================================================================
   CIRCUIT LAYER — the app's cyberpunk line motif, drawn in CSS.

   A fine grid from two repeating gradients, plus two hairline diagonals.
   It sits above the scrim so the lines actually read, and is MASKED ALONG
   THE SAME 100deg AXIS the scrim uses: transparent over the left column
   where the headings, chips and task text live, resolving to full strength
   over the artwork on the right. Texture on the empty half, nothing at all
   on the half that has words on it — which is the only way to add pattern
   to a screen whose whole job is to be read at a glance.
   ========================================================================= */
.fl-circuit{
  position:absolute; inset:0; z-index:1;
  pointer-events:none;
  background-image:
    linear-gradient(to right, rgba(141,15,34,.16) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(141,15,34,.16) 1px, transparent 1px);
  background-size:34px 34px, 34px 34px;
  -webkit-mask-image:linear-gradient(100deg, transparent 0%, transparent 34%, rgba(0,0,0,.55) 58%, #000 82%);
  mask-image:linear-gradient(100deg, transparent 0%, transparent 34%, rgba(0,0,0,.55) 58%, #000 82%);
}
/* Two long diagonals across the field — the "edge lighting" the desktop
   shell uses, at a weight that survives being masked back to a third. */
.fl-circuit::before,
.fl-circuit::after{
  content:''; position:absolute; left:-10%; right:-10%; height:1px;
  background:linear-gradient(90deg, transparent, rgba(255,120,140,.55), transparent);
}
.fl-circuit::before{ top:26%; transform:rotate(-11deg); }
.fl-circuit::after{ top:71%; transform:rotate(7deg); }

/* =========================================================================
   THE HEADER BAR — flex:none, pinned. Clock, mode pill, mode badge.
   ========================================================================= */
.fl-bar{
  position:relative; z-index:4; flex:none;
  display:flex; align-items:center; gap:10px;
  padding:
    calc(env(safe-area-inset-top) + 10px)
    calc(env(safe-area-inset-right) + 18px)
    8px
    calc(env(safe-area-inset-left) + 18px);
  background:linear-gradient(180deg, rgba(253,241,241,.93) 0%, rgba(252,231,232,.76) 72%, rgba(252,231,232,0) 100%);
  -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
}
@supports (padding:max(0px)){
  .fl-bar{ padding-top:max(calc(env(safe-area-inset-top) + 10px), 16px); }
}

.fl-top-left{ display:flex; flex-direction:column; align-items:flex-start; gap:5px; min-width:0; }

.fl-clock{
  font-family:var(--font-display);
  font-size:clamp(15px, 4vw, 19px); font-weight:600;
  color:var(--fl-ink-soft); letter-spacing:.4px;
  font-variant-numeric:tabular-nums;
}

.fl-mode-pill{
  display:inline-flex; align-items:center; gap:6px;
  padding:5px 11px; border-radius:99px;
  background:var(--fl-glass);
  border:1px solid var(--fl-glass-line);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  box-shadow:0 2px 10px var(--fl-glass-shadow);
  font-family:var(--font-mono);
  font-size:clamp(8.5px, 2.4vw, 10px); font-weight:700;
  letter-spacing:1.3px; text-transform:uppercase;
  color:var(--fl-red);
}
.fl-mode-dot{
  width:6px; height:6px; border-radius:50%;
  background:var(--fl-red);
  box-shadow:0 0 8px rgba(207,18,41,.9);
  animation:fl-pulse 2.4s ease-in-out infinite;
}
@keyframes fl-pulse{ 0%,100%{ opacity:1; } 50%{ opacity:.35; } }
@media (prefers-reduced-motion:reduce){ .fl-mode-dot{ animation:none; } }

/* Mode badge (sun/stopwatch/clock), pushed to the end of the bar — the only
   thing on this row besides the clock and pill, so it earns margin-left:auto
   outright now that nothing else competes for that space. */
.fl-badge{
  margin-left:auto; flex:none;
  width:clamp(36px, 9.5vw, 44px); height:clamp(36px, 9.5vw, 44px);
  border-radius:50%;
  display:grid; place-items:center;
  background:var(--fl-glass);
  border:1px solid var(--fl-glass-line);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  box-shadow:0 4px 16px var(--fl-glass-shadow);
  color:var(--fl-red);
}
.fl-badge svg{ width:52%; height:52%; }

/* =========================================================================
   THE HERO — flex:none, pinned. Squashed to roughly the top quarter of the
   screen: phase (pomodoro only) + the big countdown + one caption. No card
   chrome around it — it sits directly on the background, which is itself
   how it stays this compact.
   ========================================================================= */
.fl-hero{
  position:relative; z-index:2; flex:none;
  display:flex; flex-direction:column; align-items:center;
  text-align:center;
  padding:
    4px
    calc(env(safe-area-inset-right) + 18px)
    10px
    calc(env(safe-area-inset-left) + 18px);
}

/* ---------------- pomodoro phase banner ----------------
   A break has to be distinguishable from a focus block without reading
   anything, so the pips and the name both swing to a calm green on one and
   stay red on the other. Centred, no card/border now — it sits directly
   above the countdown. */
.fl-phase{
  display:flex; align-items:center; justify-content:center; gap:10px;
  margin-bottom:3px;
}
.fl-phase-name{
  font-family:var(--font-mono);
  font-size:clamp(9px, 2.5vw, 10.5px); font-weight:700;
  letter-spacing:1.3px; text-transform:uppercase;
  color:var(--fl-red);
}
.fl-phase.is-break .fl-phase-name{ color:#1c7a55; }

.fl-pips{ display:flex; gap:5px; flex:none; }
.fl-pip{
  width:6px; height:6px; border-radius:50%;
  border:1px solid rgba(141,15,34,.42); background:transparent;
}
.fl-pip.is-done{ background:rgba(141,15,34,.55); border-color:transparent; }
.fl-pip.is-live{
  background:var(--fl-red); border-color:transparent;
  box-shadow:0 0 0 3px rgba(207,18,41,.20);
}
.fl-phase.is-break .fl-pip.is-done{ background:rgba(28,122,85,.6); }

.fl-hero-timer{
  display:flex; align-items:baseline; justify-content:center;
  font-family:var(--font-display);
  font-size:clamp(38px, 12.5vw, 58px);
  font-weight:400; line-height:1.04;
  letter-spacing:-1px;
  /* Tabular figures are what stop the number twitching sideways once a
     second as the digits change width. */
  font-variant-numeric:tabular-nums;
  font-feature-settings:'tnum' 1;
}
/* Two-tone split, straight from the reference: leading unit in red, trailing
   unit in navy. Works for MM:SS and for H:MM:SS alike — .fl-t-a is always
   "everything before the last colon". */
.fl-t-a{ color:var(--fl-red); }
.fl-t-sep{ color:var(--fl-ink); padding:0 .02em; }
.fl-t-b{ color:var(--fl-ink); }

.fl-hero-kicker{
  font-family:var(--font-mono);
  font-size:clamp(9px, 2.5vw, 10.5px); font-weight:700;
  letter-spacing:1.3px; text-transform:uppercase;
  color:var(--fl-red-deep); opacity:.72;
}

/* =========================================================================
   TODAY'S ACTIONS — flex:1, THE scroll container.

   Read-only by design: the action this screen wants from you is to go back
   into the app, where every one of these rows is already tappable. The one
   interaction it does offer is per-card collapse/expand (see .fl-task-head
   below) — that is a viewing convenience, not a write.
   ========================================================================= */
.fl-tasks{
  position:relative; z-index:2;
  flex:1 1 auto;
  /* Without this a flex child defaults to min-height:auto, i.e. "at least as
     tall as my content" — which would make .fl-tasks grow the whole screen
     instead of scrolling within the space .fl-bar/.fl-hero/.fl-actions leave
     it. This one line is what makes "flex:1 + overflow-y:auto" actually
     scroll instead of overflowing the fixed .fl-screen. */
  min-height:0;
  overflow-y:auto; -webkit-overflow-scrolling:touch;
  display:flex; flex-direction:column; gap:7px;
  padding:
    2px
    calc(env(safe-area-inset-right) + 18px)
    8px
    calc(env(safe-area-inset-left) + 18px);
}

.fl-tasks-head{
  display:flex; align-items:center; gap:8px;
  font-family:var(--font-mono);
  font-size:clamp(8.5px, 2.5vw, 10.5px); font-weight:700;
  letter-spacing:1.6px; text-transform:uppercase;
  color:var(--fl-red-deep); opacity:.8;
  margin-top:2px;
}
.fl-tasks-head svg{ width:14px; height:14px; flex:none; }
.fl-tasks-head b{
  margin-left:auto;
  font-weight:700; opacity:.6;
}

.fl-tasks-note{
  margin:0;
  font-size:clamp(12px, 3.4vw, 14px); line-height:1.45;
  color:var(--fl-body); opacity:.85;
}

.fl-task{
  border-radius:14px;
  background:var(--fl-glass);
  border:1px solid var(--fl-glass-line);
  -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
  box-shadow:0 4px 16px var(--fl-glass-shadow), 0 1px 0 rgba(255,255,255,.5) inset;
  /* .fl-task-head's own padding carries the collapsed-row height; this stays
     0 so a collapsed card is exactly one compact row tall. */
  overflow:hidden;
}

/* The next action is the only card that gets the accent bar — one obvious
   answer to "what am I supposed to be doing", everything below it is
   context. */
.fl-task.is-next{
  border-left:3px solid var(--fl-red);
  background:linear-gradient(180deg, rgba(255,255,255,.72), rgba(255,236,237,.6));
  box-shadow:0 6px 22px rgba(141,15,34,.20), 0 1px 0 rgba(255,255,255,.6) inset;
}

/* ---- the head: title + chips, always visible, tap to fold the body ---- */
.fl-task-head{
  display:flex; align-items:flex-start; gap:8px;
  width:100%;
  padding:10px clamp(11px, 3vw, 14px);
  background:transparent; border:0;
  font:inherit; color:inherit; text-align:left;
  cursor:pointer;
  /* Comfortably past the 48px Android minimum even at its most compact —
     this is a real tap target, not a label that happens to be clickable. */
  min-height:48px;
}
/* A card with nothing to fold renders a plain (non-button) header — no
   pointer, no active-state, because tapping it does nothing. */
div.fl-task-head{ cursor:default; }
.fl-task-head:active{ background:rgba(141,15,34,.05); }

.fl-task-head-main{ flex:1 1 auto; min-width:0; }

.fl-task-title-row{
  display:flex; align-items:baseline; gap:7px; flex-wrap:wrap;
}
.fl-task-flag{
  flex:none;
  padding:2px 7px; border-radius:99px;
  background:var(--fl-red); color:#fff;
  font-family:var(--font-mono);
  font-size:8px; font-weight:700; letter-spacing:1.1px; text-transform:uppercase;
}
.fl-task-title{
  font-family:var(--font-display);
  font-size:clamp(14px, 4vw, 17px); font-weight:600; line-height:1.28;
  letter-spacing:-.1px;
  color:var(--fl-ink);
}
.fl-task.is-next .fl-task-title{ font-size:clamp(15px, 4.4vw, 19px); }

.fl-task-chips{ display:flex; flex-wrap:wrap; gap:5px; margin-top:5px; }
.fl-task-chips span{
  padding:2px 7px; border-radius:99px;
  background:rgba(141,15,34,.09);
  border:1px solid rgba(141,15,34,.14);
  font-family:var(--font-mono);
  font-size:9px; font-weight:600; letter-spacing:.5px;
  color:var(--fl-red-deep);
}

.fl-task-chevron{
  flex:none; margin-top:2px;
  width:14px; height:14px;
  color:var(--fl-red); opacity:.7;
  transition:transform .18s ease;
}
.fl-task-chevron svg{ width:100%; height:100%; }
/* Points right when collapsed (its natural drawn direction), rotates to
   point down once the body is open — one glyph, no swap. */
.fl-task:not(.is-collapsed) .fl-task-chevron{ transform:rotate(90deg); }

/* ---- the body: notes / "start with" / steps — collapses on a max-height
   transition. (A grid-template-rows 0fr/1fr trick was tried first — the
   usual zero-JS-measurement accordion pattern — but with padding on the
   transitioning element itself, this browser engine resolved the "1fr" row
   to the padding's own size rather than the content's natural height, so an
   expanded card never grew past a sliver. max-height is less elegant [the
   380px cap does not really animate name of the specific content height]
   but it is unambiguous and it actually works. 380px comfortably covers a
   multi-line note plus a short step list; content taller than that clips
   its reveal animation only, never the final expanded state, because this
   element's own height is auto once expanded — only the TRANSITION uses the
   cap, not the resting state. */
.fl-task-body{
  /* box-sizing:border-box (app.css's universal * reset) is what makes this
     padding collapse away along with the content at max-height:0, rather
     than sitting there as a visible sliver — max-height on a border-box
     element constrains padding+content+border together, not content alone. */
  max-height:0;
  overflow:hidden;
  padding:0 clamp(11px, 3vw, 14px) 12px;
  transition:max-height .22s ease;
}
.fl-task:not(.is-collapsed) .fl-task-body{ max-height:380px; }

/* Notes carry their original line breaks (converted to <br> in JS) — a note
   whose structure has been flattened into one paragraph is a note you have
   to re-read to parse. */
.fl-task-notes{
  padding-left:10px;
  border-left:2px solid rgba(141,15,34,.20);
  font-size:clamp(12px, 3.4vw, 14px); line-height:1.48;
  color:var(--fl-body);
  white-space:normal; overflow-wrap:anywhere;
}

/* "Start with" — the task's nextTinyAction, on the next action only. The one
   line you should be able to act on without thinking. */
.fl-task-tiny{
  margin-top:8px; padding:7px 10px;
  border-radius:10px;
  background:rgba(207,18,41,.09);
  border:1px solid rgba(207,18,41,.18);
  font-size:clamp(12px, 3.4vw, 14px); line-height:1.4;
  font-weight:600; color:var(--fl-ink);
}
.fl-task-tiny span{
  display:block; margin-bottom:1px;
  font-family:var(--font-mono);
  font-size:8.5px; font-weight:700; letter-spacing:1.3px; text-transform:uppercase;
  color:var(--fl-red); opacity:.9;
}

.fl-task-steps{ list-style:none; margin:8px 0 0; padding:0; }
.fl-task-steps li{
  display:flex; align-items:flex-start; gap:8px;
  padding:3px 0;
}
.fl-step-dot{
  flex:none; margin-top:7px;
  width:5px; height:5px; border-radius:50%;
  background:var(--fl-red); opacity:.65;
}
.fl-task-steps b{
  font-size:clamp(12px, 3.4vw, 14px); font-weight:600; line-height:1.35;
  color:var(--fl-ink-soft);
}

@media (prefers-reduced-motion:reduce){
  .fl-task-body{ transition:none; }
  .fl-task-chevron{ transition:none; }
}

/* =========================================================================
   THE ACTION ROW — flex:none, pinned. Three compact buttons side by side
   (dismissible) or a single hold-to-end bar (locked) — never a stack of
   full-width rows, so this never competes with .fl-tasks for height.
   ========================================================================= */
.fl-actions{
  position:relative; z-index:2; flex:none;
  display:flex; flex-direction:row; gap:8px;
  padding:
    8px
    calc(env(safe-area-inset-right) + 14px)
    calc(env(safe-area-inset-bottom) + 10px)
    calc(env(safe-area-inset-left) + 14px);
}

.fl-action{
  flex:1 1 0; min-width:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:3px;
  /* Still comfortably past the 48px Android minimum, just no longer a
     full-width row — three of these side by side is the whole point. */
  min-height:52px;
  padding:7px 4px;
  border-radius:14px;
  background:var(--fl-glass);
  border:1px solid var(--fl-glass-line);
  -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
  box-shadow:0 4px 14px var(--fl-glass-shadow), 0 1px 0 rgba(255,255,255,.5) inset;
  font-family:var(--font); color:var(--fl-ink);
  cursor:pointer;
  transition:transform .12s ease, box-shadow .12s ease;
}
.fl-action:active{
  transform:scale(.96);
  box-shadow:0 2px 8px var(--fl-glass-shadow);
}
.fl-action:focus-visible{
  outline:2px solid var(--fl-red);
  outline-offset:2px;
}

.fl-action-icon{
  flex:none; width:19px; height:19px;
  color:var(--fl-red);
}
.fl-action-icon svg{ width:100%; height:100%; }

.fl-action-label{
  font-size:clamp(10.5px, 2.9vw, 12px); font-weight:600;
  letter-spacing:.1px;
  color:var(--fl-ink);
  white-space:nowrap;
}

/* The end-the-session button reads as the heaviest of the three. */
.fl-action.is-end{
  background:rgba(141,15,34,.14);
  border-color:rgba(141,15,34,.32);
}
.fl-action.is-end .fl-action-icon{ color:var(--fl-red-deep); }
.fl-action.is-end .fl-action-label{ color:var(--fl-red-deep); font-weight:700; }

/* =========================================================================
   NON-DISMISSIBLE MODE

   No snoozes at all, and the one way out has to be held down. The fill is a
   single CSS transition driven by the .is-holding class — no animation loop,
   and letting go at any point simply removes the class and it snaps back,
   which is exactly the feedback the interaction needs.
   ========================================================================= */
.fl-actions.is-locked{ flex-direction:column; gap:6px; }

.fl-locked-note{
  margin:0;
  font-family:var(--font-mono);
  font-size:clamp(9.5px, 2.8vw, 11px); font-weight:700;
  letter-spacing:1px; text-transform:uppercase;
  color:var(--fl-red-deep); opacity:.85;
  text-align:center;
}

.fl-hold{
  position:relative; overflow:hidden;
  display:block; width:100%;
  min-height:54px; padding:9px 16px;
  border-radius:14px;
  background:var(--fl-glass);
  border:1px solid var(--fl-glass-line);
  -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
  box-shadow:0 4px 14px var(--fl-glass-shadow), 0 1px 0 rgba(255,255,255,.5) inset;
  font-family:var(--font); color:var(--fl-ink);
  text-align:left; cursor:pointer;
  /* The hold is a gesture on this element; the browser must not read the
     press as the start of a scroll and steal it. */
  touch-action:none;
  -webkit-user-select:none; user-select:none;
}
.fl-hold:focus-visible{ outline:2px solid var(--fl-red); outline-offset:2px; }

.fl-hold-fill{
  position:absolute; inset:0;
  transform-origin:left center;
  transform:scaleX(0);
  background:linear-gradient(90deg, rgba(207,18,41,.30), rgba(232,50,74,.22));
}
/* 3s here must stay in step with HOLD_MS in js/mobile-focus-lock.js — the
   bar reaching the end IS the promise that the press has registered. */
.fl-hold.is-holding .fl-hold-fill{
  transform:scaleX(1);
  transition:transform 3s linear;
}

.fl-hold-label{
  position:relative; z-index:1;
  display:grid; grid-template-columns:auto 1fr; align-items:center;
  column-gap:11px; row-gap:1px;
}
.fl-hold-label svg{
  grid-row:1 / span 2; width:21px; height:21px;
  color:var(--fl-red-deep);
}
.fl-hold-label b{
  font-size:clamp(12.5px, 3.6vw, 15px); font-weight:600;
  color:var(--fl-ink);
}
.fl-hold-label em{
  font-style:normal;
  font-size:clamp(10px, 2.9vw, 12px); line-height:1.35;
  color:var(--fl-body); opacity:.8;
}

@media (prefers-reduced-motion:reduce){
  /* The fill is feedback, not decoration — it still has to move, it just
     stops easing. */
  .fl-hold.is-holding .fl-hold-fill{ transition:transform 3s steps(12, end); }
}

/* =========================================================================
   RESPONSIVE

   Much less to do here than the old single-column version had: .fl-tasks
   already scrolls within whatever space is left at any height, so there is
   no "everything must fit above the fold" constraint to defend tier by
   tier. What is left: tighten the fixed chrome further on very short
   screens (more of the budget goes to .fl-tasks the smaller the phone), and
   give wide/tall screens the reference's real side-by-side proportions back.
   ========================================================================= */

/* Short phones / large system font — shrink the hero and the action row a
   touch further; .fl-tasks absorbs whatever that frees up automatically
   because it is the flex:1 region. Verified at 360x640. */
@media (max-height:700px){
  .fl-hero-timer{ font-size:clamp(32px, 10.5vw, 46px); }
  .fl-action{ min-height:46px; padding:6px 4px; }
}

/* Landscape phone: the column layout still works (.fl-tasks scrolls
   regardless of orientation), it just needs everything pinned to be
   shorter so the scrollable middle isn't squeezed to nothing. */
@media (orientation:landscape) and (max-height:520px){
  .fl-bar{
    padding-top:calc(env(safe-area-inset-top) + 6px);
    padding-bottom:6px;
  }
  .fl-clock{ font-size:14px; }
  .fl-mode-pill{ font-size:9px; padding:4px 9px; }
  .fl-badge{ width:30px; height:30px; }
  .fl-hero{ padding-top:2px; padding-bottom:4px; }
  .fl-hero-timer{ font-size:clamp(26px, 6.5vw, 38px); }
  .fl-hero-kicker{ font-size:9px; }
  .fl-actions{ padding-top:6px; padding-bottom:calc(env(safe-area-inset-bottom) + 6px); }
  .fl-action{ min-height:40px; padding:5px 4px; }
  .fl-action-icon{ width:15px; height:15px; }
  .fl-action-label{ font-size:9.5px; }
  /* The emblems have little room beside this much shorter chrome — reduce
     them to a faint wash rather than let them crowd the header. */
  .fl-emblems{ width:26%; right:-6%; opacity:.4; }
}

/* Tablet / foldable open: the reference's real proportions. Content takes
   the left 60%, the emblems get their own column back at full opacity, and
   the scrim stops washing over them.
   The min-height half of this query is load-bearing, not decoration: a
   phone in landscape is also wider than 620px, and reserving 40% of it for
   artwork crushes the task list into a column too narrow to read. Side by
   side is only right when there is height to go with the width. */
@media (min-width:620px) and (min-height:620px){
  .fl-bar, .fl-hero, .fl-tasks, .fl-actions{
    padding-left:calc(env(safe-area-inset-left) + 40px);
    padding-right:40%;
  }
  .fl-emblems{ right:0; width:34%; opacity:1; }
  .fl-emblem{ width:min(100%, 210px); }
  .fl-emblem-ring{ border-width:18px; }
  .fl-emblem-ring::after{ width:18px; }
  .fl-scrim{
    background:linear-gradient(100deg,
      rgba(253,241,241,.95) 0%,
      rgba(252,232,233,.9) 40%,
      rgba(250,214,216,.25) 56%,
      rgba(250,214,216,0) 68%);
  }
}