/**
 * THE POP-OUT FOCUS TIMER (M75).
 *
 * ⚠⚠ THIS FILE IS LOADED TWICE, INTO TWO DOCUMENTS. The portal loads it for the
 * pill; timer.js injects a <link> to the same URL into the Picture-in-Picture
 * window, because styles do NOT inherit across documents. Everything under
 * `.pt-win` therefore dresses the pop-out and everything else dresses the page.
 *
 * ⚠ IT CARRIES ITS OWN SMALL DARK PALETTE, and that is legitimate rather than a
 * break with the island's rule. The planner's acceptance grep forbids a hex
 * outside theme.css for files under vite/src/planner; this is portal-side CSS,
 * beside plannerReminders.css, which carries its own for the same reason — the
 * PiP window is a separate document that never sees the island's custom
 * properties.
 *
 * ⚠ AND IT IS DARK ON PURPOSE. This is the one surface that sits beside Word all
 * afternoon. A small dark card with a single warm arc reads as an instrument
 * left on the desk; a white panel is a second screen shouting at you.
 *
 * ⚠ THE ACCENT IS THE BMS ORANGE, never the reference site's purple. The portal
 * has one accent and this is it.
 */

:root {
    --pt-ink: #f2f4f7;
    --pt-ink-dim: #9aa4ad;
    --pt-ink-faint: #6b7683;
    --pt-surface: #1c1e22;
    --pt-surface-soft: #26292e;
    --pt-line: #34383e;
    --pt-accent: #f39200;
    --pt-break: #8fa3b0;
}

/* ===========================================================================
 * The pop-out window
 * ======================================================================== */

html.pt-win,
html.pt-win body {
    margin: 0;
    padding: 0;
    block-size: 100%;
    background: var(--pt-surface);
    color: var(--pt-ink);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    overflow: hidden;
}

/* ⚠ THE FACE IS DISPLAY:NONE IN THE HOST PAGE and shown only once it has been
   moved into the pop-out. It is the same node in both places — see timer.js. */
html.pt-win .pt-face {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    block-size: 100%;
    padding: 20px 18px 22px;
    box-sizing: border-box;
}

.pt-ringwrap {
    position: relative;
    inline-size: 164px;
    block-size: 164px;
    flex: 0 0 auto;
}

.pt-ring {
    position: absolute;
    inset: 0;
    inline-size: 100%;
    block-size: 100%;
    transform: rotate(-90deg);
}

.pt-ring-track { stroke: var(--pt-line); }

.pt-ring-fill {
    stroke: var(--pt-accent);
    /* ⚠ ONE SECOND, LINEAR — the tick interval. Anything eased accelerates and
       decelerates once a second, which reads as a stutter rather than as ease. */
    transition: stroke-dashoffset 1s linear, stroke 600ms ease, opacity 300ms ease;
    /* The faint bloom is what makes a small dark card look lit rather than flat.
       It is one shadow, not a glow ramp. */
    filter: drop-shadow(0 0 6px rgba(243, 146, 0, 0.35));
}

.pt-break .pt-ring-fill {
    stroke: var(--pt-break);
    filter: none;
}

.pt-face-mid {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
}

/* ⚠ TABULAR, OR THE WHOLE CARD TWITCHES ONCE A SECOND. Light weight at a large
   size: the size is the emphasis and a heavy face would shout. */
.pt-clock {
    font-size: 38px;
    font-weight: 250;
    line-height: 1;
    letter-spacing: -0.01em;
    font-variant-numeric: tabular-nums;
    font-feature-settings: 'tnum' 1;
    color: var(--pt-ink);
}

.pt-phase {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--pt-ink-faint);
}

.pt-title {
    margin: 0;
    max-inline-size: 100%;
    text-align: center;
    font-size: 12.5px;
    line-height: 1.35;
    color: var(--pt-ink-dim);
    cursor: pointer;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.pt-title:hover { color: var(--pt-ink); }

.pt-dots { display: flex; gap: 5px; }

.pt-dot {
    inline-size: 5px;
    block-size: 5px;
    border-radius: 50%;
    background: var(--pt-line);
}
.pt-dot-on { background: var(--pt-accent); }
.pt-break .pt-dot-on { background: var(--pt-break); }

.pt-acts { display: flex; align-items: center; gap: 10px; }

.pt-go {
    min-inline-size: 118px;
    padding: 9px 18px;
    border: 0;
    border-radius: 999px;
    background: var(--pt-accent);
    color: #1c1e22;
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.02em;
    cursor: pointer;
}
.pt-go:hover { filter: brightness(1.06); }

.pt-break .pt-go { background: var(--pt-break); }

.pt-skip {
    padding: 8px 10px;
    border: 0;
    background: transparent;
    color: var(--pt-ink-faint);
    font: inherit;
    font-size: 12px;
    cursor: pointer;
}
.pt-skip:hover { color: var(--pt-ink-dim); }

/* ===========================================================================
 * The panel — the one question the face is asking (M75, third pass)
 *
 * ⚠⚠ IT COVERS THE FACE. While there is a question up there is exactly one
 * thing to do, and a Start button still reachable beside "carry on, or
 * something else?" is two answers to one question. The ring underneath is not
 * hidden so much as put behind frosted glass: this is the same surface, asking.
 *
 * ⚠ THE FACE IS THE POSITIONING CONTEXT AND IT IS DECLARED HERE, not in the
 * .pt-win block, because the sheet in the host page draws the same panel over
 * the same face markup in a document that never sees `html.pt-win`.
 * ======================================================================== */

.pt-face { position: relative; }

.pt-panel {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 8px;
    box-sizing: border-box;
    padding: 16px 16px 14px;
    background: var(--pt-surface);
    text-align: center;
}
.pt-panel[hidden] { display: none; }

.pt-panel-ask {
    margin: 0;
    font-size: 13px;
    font-weight: 600;
    color: var(--pt-ink);
}

.pt-panel-what {
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 11.5px;
    color: var(--pt-ink-dim);
}
.pt-panel-dim { color: var(--pt-ink-faint); font-variant-numeric: tabular-nums; }

/* ⚠ A REAL TEXTAREA AND NOT A ONE-LINE INPUT. A note about an afternoon is
   sometimes two lines, which is also why Enter is left alone and Ctrl+Enter
   saves — see onPanelKey(). */
.pt-panel-field {
    inline-size: 100%;
    box-sizing: border-box;
    padding: 8px 9px;
    border: 1px solid var(--pt-line);
    border-radius: 8px;
    background: var(--pt-surface-soft);
    color: var(--pt-ink);
    font: inherit;
    font-size: 12.5px;
    line-height: 1.45;
    resize: none;
}
.pt-panel-field::placeholder { color: var(--pt-ink-faint); }
.pt-panel-field:focus { outline: none; border-color: var(--pt-accent); }

.pt-panel-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-block-size: 132px;
    overflow-y: auto;
}

.pt-panel-row {
    inline-size: 100%;
    box-sizing: border-box;
    padding: 8px 10px;
    border: 1px solid var(--pt-line);
    border-radius: 8px;
    background: var(--pt-surface-soft);
    color: var(--pt-ink);
    font: inherit;
    font-size: 12px;
    text-align: start;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: pointer;
}
.pt-panel-row:hover { border-color: var(--pt-accent); }
.pt-panel-none { color: var(--pt-ink-dim); font-style: italic; }

.pt-panel-go {
    padding: 9px 16px;
    border: 0;
    border-radius: 999px;
    background: var(--pt-accent);
    color: #1c1e22;
    font: inherit;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
}
.pt-panel-go:hover { filter: brightness(1.06); }

/* The "carry on with this" button carries a card title, so it has to be able to
   be as wide as the panel and to give up gracefully when the title is longer. */
.pt-panel-wide {
    inline-size: 100%;
    box-sizing: border-box;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pt-panel-acts {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.pt-panel-quiet {
    padding: 7px 10px;
    border: 0;
    background: transparent;
    color: var(--pt-ink-faint);
    font: inherit;
    font-size: 12px;
    cursor: pointer;
}
.pt-panel-quiet:hover { color: var(--pt-ink-dim); }

/* ⚠ THE BREATH — four seconds, opacity only, and only while something runs. It
   is information: a glance at a still card cannot otherwise tell a live timer
   from one that stopped a minute ago. */
html.pt-win .pt-live .pt-ring-fill {
    animation: pt-breathe 4s ease-in-out infinite;
}

@keyframes pt-breathe {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.74; }
}

@media (prefers-reduced-motion: reduce) {
    html.pt-win .pt-live .pt-ring-fill { animation: none; }
    .pt-ring-fill { transition: none; }
}

/* ===========================================================================
 * The pill, in the host page
 * ======================================================================== */

/* ⚠ FIXED, AND ONLY WHILE SOMETHING IS RUNNING. It opens the timer, and it hides
   itself while the pop-out window is open — two live countdowns with no way to
   tell which is authoritative is worse than one. */
/* ⚠⚠ TOP CENTRE, UNDER THE HEADER — NOT THE BOTTOM CORNER. The
   bottom-inline-end corner belongs to Quick Access on every page of this
   portal, and this pill was landing on that bubble. There is nothing centred
   under the header on any BMS page, so this is the one strip of chrome it can
   own without taking something else's.

   ⚠ `left`/`translateX` ARE PHYSICAL ON PURPOSE, where the rest of this file is
   logical. `inset-inline-start: 50%` resolves to `right: 50%` under RTL while
   `translateX(-50%)` keeps pulling the same physical direction, so the pair
   would shift the pill a half-width off centre in Arabic instead of centring
   it. Centring is the one thing in this file that is not a direction.

   ⚠ --pt-top IS WRITTEN BY placePill() FROM #header's MEASURED HEIGHT. The 90px
   here is the fallback for a page that has no header. */
.pt-pill {
    position: fixed;
    inset-block-start: calc(var(--pt-top, 90px) + 10px);
    left: 50%;
    transform: translateX(-50%);
    z-index: 2147483000;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    max-inline-size: 280px;
    padding: 7px 15px 7px 12px;
    border: 0;
    border-radius: 999px;
    background: #1c1e22;
    color: #f2f4f7;
    font-family: inherit;
    font-size: 12.5px;
    letter-spacing: 0.01em;
    white-space: nowrap;
    box-shadow: 0 6px 20px -8px rgba(0, 0, 0, 0.55);
    cursor: pointer;
}

/* The glyph that says what the digits ARE. A bare countdown under the header
   could be anything the portal is counting; a stopwatch face could not.

   ⚠ `display: block` IS THE ALIGNMENT FIX. An inline SVG sits on the text
   baseline and reserves descender space under itself, so inside a flex row it
   centres its BOX while the drawing inside rides high — which is exactly how it
   looked: the glyph a pixel or two above the digits beside it. A block-level
   replaced element has no baseline to sit on and `align-items: center` then
   means what it says. */
.pt-pill-icon {
    display: block;
    inline-size: 16px;
    block-size: 16px;
    flex: 0 0 auto;
    color: var(--pt-accent);
    animation: pt-breathe 4s ease-in-out infinite;
}

.pt-pill-break .pt-pill-icon { color: var(--pt-break); animation: none; }

/* ⚠ TABULAR, OR THE PILL CHANGES WIDTH TWICE A SECOND — and a centred box that
   resizes drifts sideways under the eye, which the corner one never did. */
.pt-pill-time {
    flex: 0 0 auto;
    font-variant-numeric: tabular-nums;
    font-feature-settings: 'tnum' 1;
    font-weight: 600;
}

/* The title is what gives way when the pill is at its limit; the time is what
   the pill is for. */
.pt-pill-title {
    min-inline-size: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    opacity: 0.72;
}

@media (prefers-reduced-motion: reduce) {
    .pt-pill-icon { animation: none; }
}

@media (max-width: 599px) {
    .pt-pill { max-inline-size: 72vw; font-size: 12px; }
}

/* ===========================================================================
 * The portal-wide sheet — the timer on every page that is not the Planner
 *
 * ⚠ EVERY SELECTOR HANGS OFF #plTimerSheet, for plannerReminders.css's reason
 *   and this file's own: the portal styles a bare <button> at (1,0,1), so a
 *   class can never restyle one. The id is also what names this sheet in that
 *   rule's :not() list.
 *
 * ⚠ IT IS FIXED TO THE VIEWPORT AND APPENDED TO <body>. #body is a stacking
 *   context beneath the fixed header, so a panel mounted in the page content
 *   cannot paint over the chrome whatever z-index it claims.
 *
 * ⚠ THE CARD IS LIGHT WHERE THE POP-OUT IS DARK, and that is not an
 *   inconsistency to tidy. The pop-out is an instrument left on the desk beside
 *   Word; this is a dialog on a portal page, and a dark panel dropped on white
 *   chrome reads as an error state.
 * ======================================================================== */

#plTimerSheet {
    position: fixed;
    inset: 0;
    z-index: 2147483000;
    display: none;
}

#plTimerSheet.pts-show { display: block; }

#plTimerSheet * { box-sizing: border-box; }

#plTimerSheet .pts-scrim {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .45);
}

#plTimerSheet .pts-card {
    position: absolute;
    inset-block-start: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    inline-size: 340px;
    max-inline-size: 92vw;
    background: #ffffff;
    color: #28292c;
    border-radius: 16px;
    box-shadow: 0 18px 50px rgba(0, 0, 0, .38);
    /* 180 ms is the house ceiling for any animation. */
    animation: pts-rise 180ms ease-out;
    overflow: hidden;
}

@keyframes pts-rise {
    from { transform: translate(-50%, -46%); opacity: .5; }
    to   { transform: translate(-50%, -50%); opacity: 1; }
}

#plTimerSheet .pts-x {
    position: absolute;
    inset-block-start: 8px;
    inset-inline-end: 10px;
    z-index: 1;
    padding: 2px 8px;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: #9aa4ad;
    font-size: 21px;
    line-height: 1.1;
    cursor: pointer;
}

#plTimerSheet .pts-x:hover { color: #28292c; background: #f1f2f4; }

/* ⚠ THE FACE IS THE POP-OUT'S OWN MARKUP, so it arrives styled for the dark
   window. The four rules below are the ONLY differences, and they are re-stated
   here rather than made conditional in the block above — a `html.pt-win` guard
   inverted into "and also when it is not" is a rule nobody can read later. */
#plTimerSheet .pts-body { padding: 26px 20px 6px; }

/* ⚠⚠ THE FACE NEEDS ITS OWN LAYOUT HERE, because the flex rule that stacks and
   centres it is scoped to `html.pt-win` — it was written for a document this
   module creates and controls, and nothing in the host page ever rendered a
   face before. Without this the ring, the clock and the buttons pile up
   left-aligned as ordinary blocks. The pop-out's rule is NOT widened to cover
   both: it also sets `block-size: 100%` and a `!important` display, which are
   about filling a window and would be wrong in a card. */
#plTimerSheet .pt-face {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
}

#plTimerSheet .pt-clock { color: #28292c; }
#plTimerSheet .pt-phase,
#plTimerSheet .pt-title { color: #6b7683; }
#plTimerSheet .pt-ring-track { stroke: #e6e8eb; }

/* ⚠ THE UNLIT DOT IS THE ONE THAT HAS TO BE RE-STATED. `--pt-line` is a dark
   hairline meant to be nearly invisible on charcoal; on a white card it is
   nearly BLACK, so four dots read as four completed pomodoros and the cycle
   count says the opposite of the truth. The lit dot is the accent and needs
   nothing. */
#plTimerSheet .pt-dot { background: #e0e3e7; }
#plTimerSheet .pt-dot-on { background: var(--pt-accent); }

/* The bloom is what makes a small DARK card look lit; on white it is a haze. */
#plTimerSheet .pt-ring-fill { filter: none; }

/* ⚠⚠ THE PANEL IS DARK BY DEFAULT AND THIS CARD IS WHITE, so every surface and
   every ink in it has to be re-stated — the same re-statement the clock, the
   phase word, the ring track and the unlit dot each already needed. The panel
   is drawn from ONE markup string for both documents (timer.js::panelHtml), and
   that is the trade: one place to change what it says, two places to say what it
   looks like. Missing one of these does not fail visibly in the pop-out, which
   is where it gets tested — it fails on a white card, as white text. */
#plTimerSheet .pt-panel { background: #ffffff; }
#plTimerSheet .pt-panel-ask { color: #28292c; }
#plTimerSheet .pt-panel-what { color: #6b7683; }
#plTimerSheet .pt-panel-dim { color: #96a0aa; }
#plTimerSheet .pt-panel-field {
    border-color: #d9dde2;
    background: #ffffff;
    color: #28292c;
}
#plTimerSheet .pt-panel-field::placeholder { color: #96a0aa; }
#plTimerSheet .pt-panel-row {
    border-color: #e6e8eb;
    background: #f7f8f9;
    color: #28292c;
}
#plTimerSheet .pt-panel-none { color: #6b7683; }
#plTimerSheet .pt-panel-quiet { color: #96a0aa; }
#plTimerSheet .pt-panel-quiet:hover { color: #6b7683; }

#plTimerSheet .pts-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    padding: 12px 18px 14px;
    background: #f7f8f9;
    border-block-start: 1px solid #e6e8eb;
    font-size: 11.5px;
    color: #6b7683;
}

#plTimerSheet .pts-links { display: inline-flex; gap: 14px; }

#plTimerSheet .pts-link {
    padding: 0;
    border: 0;
    background: transparent;
    color: #1f6feb;
    font-family: inherit;
    font-size: 11.5px;
    cursor: pointer;
}

#plTimerSheet .pts-link:hover { text-decoration: underline; }

@media (max-width: 599px) {
    #plTimerSheet .pts-card { inline-size: 92vw; }
}