/* Pomodoro timer (pomodoro.js): a painted dinner plate on the right edge
   with a fish skeleton on it and the time left, opening into a card with the
   round watercolour fish. Above the pages, the tab rail and the scenery
   (z 20-70), below every dialog and overlay (z 100 and up). */

.pomo {
    --pomo-koi: #b5532f;
    --pomo-cream: #fffaf0;
    --pomo-plate-ink: #2b2118;
    --pomo-plate-halo: #fbf6ea;
    --pomo-plate-break: #2f5873;
    --pomo-ring-ink: #a8391b;
    --pomo-top: calc(var(--frame-top, 76px) + 14px);
    position: fixed;
    z-index: 90;
    top: var(--pomo-top);
    right: 0;
    pointer-events: none;
    font-family: var(--sans, 'Inter', system-ui, sans-serif);
}

.pomo > * { pointer-events: auto; }
.pomo-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ---------- the shrunk bookmark: a skeleton on a plate ---------- */

.pomo-tab {
    position: relative;
    display: block;
    width: 232px;
    height: 128px;
    margin: 0 4px 0 0;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: none;
    color: var(--pomo-plate-ink);
    cursor: pointer;
    filter: drop-shadow(-1px 3px 4px rgba(30, 24, 16, 0.22));
    transition: transform 0.18s ease;
    -webkit-tap-highlight-color: transparent;
}

.pomo-tab:hover { transform: translateX(-5px) rotate(-1.5deg); }
.pomo-tab:focus-visible { outline: 3px solid var(--c-focus, #1f6fd1); outline-offset: 2px; border-radius: 40%; }

.pomo-tab-plate { position: absolute; inset: 0; display: block; pointer-events: none; }
.pomo-tab-plate svg { width: 100%; height: 100%; display: block; overflow: visible; }

/* the time sits in the plate's well, over the skeleton, with a cream halo */
.pomo-tab-text {
    position: absolute;
    top: 6%;
    bottom: 8%;
    left: 24%;
    right: 14%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
    pointer-events: none;
    text-shadow:
        0 0 2px var(--pomo-plate-halo), 0 0 4px var(--pomo-plate-halo),
        0 0 8px var(--pomo-plate-halo), 0 0 12px var(--pomo-plate-halo);
}

.pomo-tab-mode {
    font: 700 12px/1 var(--sans, sans-serif);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #5a4330;
}

.pomo-tab-time {
    font: 800 36px/1 var(--sans, sans-serif);
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.01em;
}

.pomo-tab.is-break .pomo-tab-mode { color: var(--pomo-plate-break); }
.pomo-tab.is-ringing .pomo-tab-time,
.pomo-tab.is-ringing .pomo-tab-mode { color: var(--pomo-ring-ink); }

.pomo-tab.is-arriving { animation: pomo-tab-in 0.32s cubic-bezier(.2, .9, .3, 1.2) both; }
.pomo-tab.is-ringing { animation: pomo-wiggle 0.9s ease-in-out infinite; transform-origin: 100% 50%; }

/* ---------- the open timer: a small card, hooks above the fish ---------- */

.pomo-card {
    position: relative;
    box-sizing: border-box;
    width: 248px;
    max-height: calc(100vh - var(--pomo-top) - 12px);
    max-height: calc(100dvh - var(--pomo-top) - 12px);
    overflow-x: hidden;
    overflow-y: auto;
    padding: 8px 12px 8px;
    border: 1px solid var(--c-line, #e0dbcf);
    border-right: 0;
    border-radius: 20px 0 0 20px;
    background:
        radial-gradient(120% 70% at 50% 40%, rgba(255, 246, 226, 0.55), transparent 70%),
        var(--c-card, #faf8f2);
    color: var(--c-ink, #22272a);
    box-shadow: -8px 12px 28px rgba(30, 24, 16, 0.22);
    text-align: center;
    transform-origin: 100% 0;
}

.pomo-card.is-hooking { overflow: hidden; }
.pomo-card.is-arriving { animation: pomo-card-in 0.3s cubic-bezier(.2, .9, .3, 1.1) both; }
.pomo-card.is-arriving .pomo-fish-body { animation: pomo-flesh-in 0.42s ease-out both; }
.pomo-card.is-arriving .pomo-fish-bones { animation: pomo-bones-out 0.42s ease-out both; }

.pomo-card.is-leaving { animation: pomo-card-out 0.36s ease-in 0.12s both; }
.pomo-card.is-leaving .pomo-fish-body { opacity: 0; transition: opacity 0.26s ease; }
.pomo-card.is-leaving .pomo-fish-bones { opacity: 1; transition: opacity 0.26s ease; }

.pomo-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-right: -4px; }
.pomo-card:focus { outline: none; }

/* the × that shrinks the card back to the plate (the timer keeps going) */
.pomo-close {
    display: inline-grid;
    place-items: center;
    flex: none;
    width: 38px;
    height: 38px;
    margin: 0;
    padding: 0;
    border: 1.5px solid var(--c-line-strong, #d3cec1);
    border-radius: 50%;
    background: var(--c-field, #f2f0e8);
    color: var(--c-ink, #22272a);
    cursor: pointer;
    transition: transform 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
    -webkit-tap-highlight-color: transparent;
}

.pomo-close-art { display: block; width: 20px; height: 20px; pointer-events: none; }
.pomo-close-svg { display: block; width: 100%; height: 100%; }
.pomo-close:hover { border-color: var(--c-soft, #6b706a); background: var(--c-card, #faf8f2); transform: rotate(90deg); }
.pomo-close:active { transform: rotate(90deg) scale(0.92); }
.pomo-close:focus-visible { outline: 3px solid var(--c-focus, #1f6fd1); outline-offset: 2px; }
.pomo.is-calm .pomo-close:hover,
.pomo.is-calm .pomo-close:active { transform: none; }

.pomo-eyebrow {
    font: 500 17px/1 var(--serif, Georgia, serif);
    color: var(--c-ink, #22272a);
}


/* three fishing hooks hanging on their lines, each with a paper tag */
.pomo-hooks {
    position: relative;
    z-index: 2;
    display: flex;
    justify-content: space-between;
    margin: 2px 6px 0;
}

.pomo-hook {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 66px;
    margin: 0;
    padding: 0 0 2px;
    border: 0;
    background: none;
    color: #2b2118;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.pomo-hook-line { display: block; width: 1.4px; height: 9px; background: var(--c-soft, #6b706a); opacity: 0.7; }
.pomo-hook-line.is-short { height: 6px; }

.pomo-hook-tag {
    display: block;
    padding: 4px 8px 3px;
    border: 1px solid #cdbf9f;
    border-radius: 6px;
    background: #f8efdb;
    box-shadow: 0 1px 2px rgba(40, 30, 20, 0.18);
    font: 700 13px/1.1 var(--sans, sans-serif);
    white-space: nowrap;
    color: #2b2118;
}

.pomo-hook-art { display: block; width: 22px; height: 28px; margin-top: -1px; color: #3a3530; }
html[data-theme="dark"] .pomo-hook-art { color: #d3d8de; }
html[data-theme="dark"] .pomo-hook-line { background: #aab2bc; }
.pomo-hook-svg { display: block; width: 100%; height: 100%; overflow: visible; }
.pomo-hook-art,
.pomo-hook-tag { transform-origin: 50% 0; transition: transform 0.18s ease; }
.pomo-hook:hover .pomo-hook-tag { transform: translateY(2px) rotate(-3deg); }
.pomo-hook:hover .pomo-hook-art { transform: rotate(8deg); }
.pomo-hook:focus-visible { outline: none; }
.pomo-hook:focus-visible .pomo-hook-tag { outline: 3px solid var(--c-focus, #1f6fd1); outline-offset: 2px; }
.pomo-hook.is-swallowed .pomo-hook-art { opacity: 0; transition: opacity 0.12s ease; }

/* the fish is the Start / Pause button */
.pomo-fish-btn {
    position: relative;
    z-index: 1;
    display: block;
    width: 100%;
    margin: -12px 0 0;
    padding: 0 0 4px;
    border: 0;
    border-radius: 18px;
    background: none;
    color: inherit;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.pomo-fish-btn:focus-visible { outline: 3px solid var(--c-focus, #1f6fd1); outline-offset: -2px; }
.pomo-fish-wrap { display: block; width: 100%; }
.pomo-fish { display: block; width: 100%; height: auto; overflow: visible; }

.pomo-fish-time {
    font: 800 43px/1 var(--sans, sans-serif);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.5px;
    fill: #2b2118;
}

.pomo-fish-mode {
    font: 700 14px/1 var(--sans, sans-serif);
    letter-spacing: 1.4px;
    text-transform: uppercase;
    fill: #7a5232;
}

.pomo-card.is-ringing .pomo-fish-time { fill: #9a3a1e; }

.pomo-tap {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 36px;
    margin-top: -6px;
    padding: 0 14px;
    border-radius: 999px;
    background: var(--c-accent, #2f5b47);
    color: var(--c-accent-ink, #fff);
    font: 600 14px/1.1 var(--sans, sans-serif);
}

.pomo-tap.is-pause {
    border: 1px solid var(--c-line-strong, #d3cec1);
    background: var(--c-field, #f2f0e8);
    color: var(--c-ink, #22272a);
}

.pomo-tap-icon {
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 6px 0 6px 10px;
    border-color: transparent transparent transparent currentColor;
}

.pomo-tap.is-pause .pomo-tap-icon {
    width: 10px;
    height: 12px;
    border: 0;
    border-left: 3.5px solid currentColor;
    border-right: 3.5px solid currentColor;
    box-sizing: border-box;
}

.pomo-fish-btn:hover .pomo-tap { filter: brightness(1.08); }

.pomo-note { margin: 4px 0 0; font-size: 12.5px; font-weight: 600; color: var(--c-soon, #9b6b22); }

.pomo-live {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.pomo-btn {
    min-height: 44px;
    padding: 0 14px;
    border: 1px solid var(--c-line-strong, #d3cec1);
    border-radius: 999px;
    background: var(--c-field, #f2f0e8);
    color: var(--c-ink, #22272a);
    font: 600 15px/1.15 var(--sans, sans-serif);
    cursor: pointer;
}

.pomo-btn:hover { border-color: var(--c-soft, #6b706a); }
.pomo-btn:focus-visible { outline: 3px solid var(--c-focus, #1f6fd1); outline-offset: 2px; }

.pomo-stop {
    width: 100%;
    min-height: 56px;
    margin-top: 4px;
    border-color: var(--pomo-koi);
    background: var(--pomo-koi);
    color: #fff;
    font-size: 17px;
    font-weight: 700;
}

.pomo-stop.small { min-height: 44px; font-size: 15px; }
.pomo-stop:hover { background: #9e4626; }

.pomo-foot {
    margin: 6px 0 0;
    font-size: 11.5px;
    color: var(--c-soft, #6b706a);
}

.pomo-foot kbd {
    padding: 0 4px;
    border: 1px solid var(--c-line-strong, #d3cec1);
    border-radius: 4px;
    background: var(--c-field, #f2f0e8);
    font: 600 11px var(--sans, sans-serif);
    color: var(--c-ink, #22272a);
}

/* ---------- the fish: blink, and the flop when it rings ---------- */

.pomo-fish-bones { opacity: 0; }
.pomo-lid,
.pomo-fish-body,
.pomo-tail,
.pomo-gill,
.pomo-mouth-o,
.pomo-drop { transform-box: fill-box; }

.pomo-lid { transform-origin: 50% 0; transform: scaleY(0); animation: pomo-blink 6.5s ease-in-out 1.2s infinite; }
.pomo-mouth-o { opacity: 0; transform-origin: 50% 50%; }
.pomo-drops,
.pomo-puddle,
.pomo-bubbles { opacity: 0; }
.pomo-bubble { transform-box: fill-box; transform-origin: 50% 50%; }

/* tapped: a tail flick and a few bubbles */
.pomo-card.is-flicking .pomo-tail { transform-origin: 0% 50%; animation: pomo-tail 0.16s ease-in-out 4 alternate; }
.pomo-card.is-flicking .pomo-bubbles { animation: pomo-show 1.1s linear both; }
.pomo-card.is-flicking .pomo-bubble { animation: pomo-bubble 1.1s ease-out both; }
.pomo-card.is-flicking .pomo-bubble.b2 { animation-delay: 0.15s; }
.pomo-card.is-flicking .pomo-bubble.b3 { animation-delay: 0.3s; }

/* biting a hook: mouth snaps open and shut */
.pomo-card.is-hooking .pomo-lid { animation: none; transform: scaleY(0); }
.pomo-card.is-hooking .pomo-mouth { opacity: 0; }
.pomo-card.is-hooking .pomo-mouth-o { opacity: 1; transform: scale(1.1, 1.2); }
.pomo-card.is-biting .pomo-mouth-o { animation: pomo-chomp 0.26s ease-in-out both; }
.pomo-card.is-biting .pomo-tail { transform-origin: 0% 50%; animation: pomo-tail 0.12s ease-in-out infinite alternate; }

/* the plate bookmark dropping back down, and fading when turned off */
.pomo-tab.is-dropping { animation: pomo-tab-drop 0.7s cubic-bezier(.3, .7, .4, 1) both; transform-origin: 100% 0; }
.pomo-tab.is-fading { opacity: 0; transform: translateX(40px); transition: opacity 0.3s ease, transform 0.3s ease; }

.pomo-card.is-ringing .pomo-fish-body { transform-origin: 50% 92%; animation: pomo-flop 0.95s ease-in-out infinite; }
.pomo-card.is-ringing .pomo-tail { transform-origin: 0% 50%; animation: pomo-tail 0.32s ease-in-out infinite alternate; }
.pomo-card.is-ringing .pomo-gill { transform-origin: 0% 50%; animation: pomo-gill 0.55s ease-in-out infinite alternate; }
.pomo-card.is-ringing .pomo-mouth { opacity: 0; }
.pomo-card.is-ringing .pomo-mouth-o { opacity: 1; animation: pomo-gasp 0.55s ease-in-out infinite alternate; }
.pomo-card.is-ringing .pomo-lid { animation: none; transform: scaleY(0); }
.pomo-card.is-ringing .pomo-drops { opacity: 1; }
.pomo-card.is-ringing .pomo-puddle { opacity: 0.3; }
.pomo-card.is-ringing .pomo-drop { animation: pomo-drop 1s ease-out infinite; }
.pomo-card.is-ringing .pomo-drop.d2 { animation-delay: 0.25s; }
.pomo-card.is-ringing .pomo-drop.d3 { animation-delay: 0.5s; }
.pomo-card.is-ringing .pomo-drop.d4 { animation-delay: 0.75s; }

@keyframes pomo-blink {
    0%, 93%, 100% { transform: scaleY(0); }
    95.5% { transform: scaleY(1); }
}

@keyframes pomo-flop {
    0% { transform: translateY(0) rotate(0deg); }
    18% { transform: translateY(-16px) rotate(-17deg); }
    36% { transform: translateY(0) rotate(9deg); }
    52% { transform: translateY(-8px) rotate(15deg); }
    70% { transform: translateY(0) rotate(-7deg); }
    84% { transform: translateY(-3px) rotate(3deg); }
    100% { transform: translateY(0) rotate(0deg); }
}

@keyframes pomo-tail { from { transform: rotate(-14deg); } to { transform: rotate(16deg); } }
@keyframes pomo-gill { from { transform: rotate(0deg); } to { transform: rotate(-14deg) translateX(-2px); } }
@keyframes pomo-gasp { from { transform: scale(0.75, 0.2); } to { transform: scale(1.05, 1.15); } }

@keyframes pomo-drop {
    0% { transform: translate(0, 0); opacity: 0; }
    15% { opacity: 1; }
    60% { transform: translate(var(--dx, 6px), -34px); opacity: 0.9; }
    100% { transform: translate(calc(var(--dx, 6px) * 1.6), -8px); opacity: 0; }
}

.pomo-drop.d1 { --dx: -10px; }
.pomo-drop.d3 { --dx: -6px; }

@keyframes pomo-wiggle {
    0%, 100% { transform: rotate(0deg); }
    25% { transform: rotate(-3deg) translateX(-4px); }
    75% { transform: rotate(2.5deg); }
}

@keyframes pomo-show { 0%, 100% { opacity: 0; } 10%, 80% { opacity: 1; } }
@keyframes pomo-bubble { from { transform: translate(0, 10px) scale(0.4); opacity: 0; } 30% { opacity: 1; } to { transform: translate(-6px, -26px) scale(1.1); opacity: 0; } }
@keyframes pomo-chomp { 0% { transform: scale(1.1, 1.3); } 50% { transform: scale(0.9, 0.15); } 100% { transform: scale(0.8, 0.1); } }
@keyframes pomo-tab-drop {
    0% { transform: translateY(-180px) rotate(-8deg); opacity: 0; }
    15% { opacity: 1; }
    62% { transform: translateY(10px) rotate(2deg); }
    80% { transform: translateY(-5px) rotate(-1deg); }
    100% { transform: none; }
}
@keyframes pomo-tab-in { from { transform: translateX(60px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes pomo-card-in { from { transform: translateX(40px) scale(0.9); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes pomo-card-out { to { transform: translateX(50px) scale(0.6); opacity: 0; } }
@keyframes pomo-flesh-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes pomo-bones-out { from { opacity: 1; } to { opacity: 0; } }

/* Still: the device asks for reduced motion, or Motion is off in Settings.
   It still rings, and "Time's up" shows as a still picture. */
.pomo.is-calm *,
.pomo.is-calm *::before,
.pomo.is-calm *::after { animation: none !important; transition: none !important; }
.pomo.is-calm .pomo-tab:hover { transform: none; }
.pomo.is-calm .pomo-card.is-ringing .pomo-fish-body { transform: rotate(-9deg); }

@media (prefers-reduced-motion: reduce) {
    .pomo *, .pomo *::before, .pomo *::after { animation: none !important; transition: none !important; }
}

/* ---------- night ---------- */

html[data-theme="dark"] .pomo {
    --pomo-koi: #c0603a;
}

/* the plate stays a cream plate at night; only its shadow deepens */
html[data-theme="dark"] .pomo-tab { filter: drop-shadow(-1px 4px 6px rgba(0, 0, 0, 0.55)); }

html[data-theme="dark"] .pomo-card {
    background:
        radial-gradient(120% 70% at 50% 30%, rgba(120, 140, 160, 0.12), transparent 70%),
        var(--c-card, #1e232b);
    box-shadow: -10px 14px 34px rgba(0, 0, 0, 0.5);
}

/* ---------- Settings card steppers ---------- */

.pomo-step {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 0;
    border-top: 1px solid var(--c-line, #e0dbcf);
}

.pomo-step b { display: block; font: 600 14px var(--sans, sans-serif); }
.pomo-step span { display: block; font-size: 13px; color: var(--c-soft, #6b706a); margin-top: 2px; }
.pomo-step-ctrl { display: flex; align-items: center; gap: 6px; flex: none; }

.pomo-step-btn {
    width: 44px;
    height: 44px;
    border: 1px solid var(--c-line-strong, #d3cec1);
    border-radius: 50%;
    background: var(--c-field, #f2f0e8);
    color: var(--c-ink, #22272a);
    font: 600 22px/1 var(--sans, sans-serif);
    cursor: pointer;
}

.pomo-step-btn:hover:not([disabled]) { border-color: var(--c-soft, #6b706a); }
.pomo-step-btn[disabled] { opacity: 0.4; cursor: not-allowed; }
.pomo-step-val { min-width: 112px; text-align: center; font: 600 15px var(--sans, sans-serif); font-variant-numeric: tabular-nums; }

/* ---------- touch screens have no keyboard shortcut to show ---------- */

@media (hover: none) and (pointer: coarse) {
    .pomo-foot { display: none; }
}

/* ---------- small screens ---------- */

@media (max-width: 760px) {
    /* below the board's toolbar row, clear of its buttons */
    .pomo { --pomo-top: calc(var(--frame-top, 112px) + 100px); }
    .pomo-tab { width: 184px; height: 102px; }
    .pomo-tab-time { font-size: 29px; }
    .pomo-tab-mode { font-size: 10.5px; }
    .pomo-card { width: min(248px, calc(100vw - 14px)); }
    .pomo-step-val { min-width: 92px; }
}