/* ==========================================================================
   aesthetic.css — "matcha bar" look on top of the modern base
   pink pinstripes · cream scalloped cards · sage script titles · soft serif
   (loaded last; only overrides)
   ========================================================================== */
:root {
    --pink: #FFBCC5;              /* user pink */
    --pink-2: #FFC9D1;
    --pink-line: #FFE4E9;
    --pink-deep: #E58FA3;
    --cream: #FFFBF1;
    --cream-2: #FBF3E2;
    --sage: #6F8C5A;              /* script titles, like the menu */
    --sage-soft: #E7EED9;
    --edge: rgba(62, 39, 39, .5); /* thin scallop outline */
    --serif: 'Fraunces', 'Playfair Display', Georgia, serif;
    --script: 'Great Vibes', 'Brush Script MT', cursive;
    --bg: var(--cream);
    --surface: var(--cream);
    --surface-2: #F6EEDD;
    --border: rgba(229, 143, 163, .35);
    --border-strong: rgba(229, 143, 163, .6);
}

/* ---------- pink pinstripe backdrop (shows when no video is playing) ---------- */
body {
    background:
        repeating-linear-gradient(90deg,
            var(--pink) 0 30px,
            var(--pink-line) 30px 32px,
            var(--pink-2) 32px 62px,
            var(--pink-line) 62px 64px);
}

/* ---------- scalloped cream cards ---------- */
.scallop {
    position: relative;
    isolation: isolate;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}
.scallop::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border: 14px solid transparent;
    border-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='42'%20height='42'%3E%3Cg%20fill='%23FFFBF1'%20stroke='%233E2727'%20stroke-opacity='.5'%20stroke-width='1.2'%3E%3Ccircle%20cx='7'%20cy='7'%20r='6.3'/%3E%3Ccircle%20cx='21'%20cy='7'%20r='6.3'/%3E%3Ccircle%20cx='35'%20cy='7'%20r='6.3'/%3E%3Ccircle%20cx='7'%20cy='21'%20r='6.3'/%3E%3Ccircle%20cx='35'%20cy='21'%20r='6.3'/%3E%3Ccircle%20cx='7'%20cy='35'%20r='6.3'/%3E%3Ccircle%20cx='21'%20cy='35'%20r='6.3'/%3E%3Ccircle%20cx='35'%20cy='35'%20r='6.3'/%3E%3C/g%3E%3Crect%20x='7'%20y='7'%20width='28'%20height='28'%20fill='%23FFFBF1'/%3E%3C/svg%3E") 14 fill round;
    /* plain box-shadow instead of filter: Safari repaints this cleanly when cards are dragged */
    box-shadow: 0 16px 28px -14px rgba(62, 39, 39, .28);
    border-radius: 18px;
    pointer-events: none;
}
.scallop { transform: translateZ(0); }
/* dashed inner line, like the menu frame */
.scallop::after {
    content: "";
    position: absolute;
    inset: 16px;
    z-index: -1;
    border: 1.5px dashed rgba(229, 143, 163, .55);
    border-radius: 14px;
    pointer-events: none;
}

/* ---------- typography ---------- */
.time-display {
    font-family: var(--serif);
    font-weight: 600;
    font-variation-settings: "SOFT" 100, "WONK" 0, "opsz" 144;
    letter-spacing: -0.02em;
    color: var(--text);
}
.todo-head { justify-content: center; color: var(--sage); margin-bottom: 10px; }
.todo-head .ic { display: none; }
.todo-head h1, .sc-head h2 {
    font-family: var(--script);
    font-weight: 400;
    font-size: 40px;
    line-height: 1;
    color: var(--sage);
    letter-spacing: 0;
}
.sc-head { flex-direction: column; align-items: center; gap: 6px; }
.sc-head h2 { font-size: 38px; }
.goal-row span, .label { font-family: var(--serif); font-style: italic; font-weight: 600; }
.value { font-family: var(--serif); font-weight: 600; }

/* ---------- buttons & segmented control ---------- */
.btn { border-radius: 999px; }
.btn-soft { background: var(--pink-line); color: #9A3D57; }
.btn-soft:hover { background: #FFD3DB; }
.seg { background: var(--cream-2); border: 1px solid var(--border); border-radius: 999px; }
.seg button { border-radius: 999px; }
.seg button.active { background: var(--pink); color: #7A2E45; box-shadow: none; }
body[data-mode="shortBreak"] .seg button.active,
body[data-mode="longBreak"] .seg button.active { background: var(--sage-soft); color: #3E5A2C; }

/* ---------- timer card ---------- */
#draggable-container1 { padding: 30px 32px 26px; }
#draggable-container { top: 494px; padding: 28px 28px 24px; }
#task-list { max-height: clamp(110px, calc(100vh - 782px), 34vh); }
#study-dashboard { padding: 30px 26px 26px; }
.total-block { background: var(--cream-2); border: 1px dashed var(--border-strong); }

/* loyalty-card stamps */
.stamps-wrap { display: flex; flex-direction: column; align-items: center; gap: 2px; margin-top: 16px; }
.stamps { display: flex; gap: 8px; }
.stamp { width: 34px; height: 34px; }
.stamp path { fill: var(--cream); stroke: #8E7A72; stroke-width: 1.2; }
.stamp.on path { fill: var(--sage-soft); stroke: var(--sage); }
.stamp.on g { color: var(--sage); }
.stamp.on g svg, .stamp.on g path, .stamp.on g * { stroke: var(--sage); fill: none; }
.stamps-caption { font-family: var(--serif); font-style: italic; font-size: 12.5px; color: #9A3D57; }

/* ---------- inputs ---------- */
#new-task { border-radius: 999px; padding: 10px 16px; background: #fff; border-color: var(--border-strong); }
#new-task:focus { border-color: var(--pink-deep); box-shadow: 0 0 0 3px var(--pink-line); }
#task-list li:hover { background: var(--pink-line); }
#task-list input[type="checkbox"] { border-radius: 50%; border-color: #CDB8AF; }
.task-footer { border-top: 1.5px dashed var(--border-strong); }

/* ---------- top pills, edge tabs, video bar ---------- */
.btn-ghost, .edge-tab, .youtube-input {
    background: var(--cream);
    border: 1.5px solid var(--border-strong);
}
.edge-tab:hover, .btn-ghost:hover { background: #fff; }
.youtube-input .btn { border-radius: 999px; }
#subject-chip { background: var(--cream); border: 1.5px solid var(--border-strong); font-family: var(--serif); font-style: italic; font-weight: 600; }

/* ---------- Study Hub ---------- */
#hub { background: var(--cream); border-left: none; }
#hub::before {
    content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 12px;
    background: repeating-linear-gradient(90deg, var(--pink) 0 4px, var(--pink-line) 4px 5px, var(--pink-2) 5px 9px, var(--pink-line) 9px 10px);
}
.hub-brand h2 { font-family: var(--script); font-weight: 400; font-size: 38px; color: var(--sage); letter-spacing: 0; }
.hub-brand .ic { color: var(--sage); }
#hub .card { background: #FFFDF7; border: 1.5px solid rgba(229, 143, 163, .45); box-shadow: 0 6px 18px rgba(62, 39, 39, .05); border-radius: 22px; }
#hub .card.hero { background: #FFFDF7; border: 1.5px dashed var(--pink-deep); }
.card-title { color: var(--sage); }
.card-title h3, .card-title h4, .hero-title, .ch-main h3, .fh-text h3 {
    font-family: var(--serif);
    font-style: italic;
    font-weight: 650;
    letter-spacing: -0.005em;
}
.card-title h4 { font-size: 17px; }
.eyebrow { color: #9A3D57; font-family: var(--serif); font-style: italic; text-transform: none; letter-spacing: 0; font-size: 13px; font-weight: 600; }
.big-num, .t-value { font-family: var(--serif); font-weight: 600; }
#hub .btn-soft { background: var(--pink-line); color: #9A3D57; }
#hub .btn-soft:hover { background: #FFD3DB; }
#hub .btn-primary, #hub .lg { border-radius: 999px; }
#hub .chip.on { background: var(--pink-line); color: #9A3D57; }
.tag { color: #9A3D57; background: var(--pink-line); }
.tile { background: #FFFDF7; border: 1.5px solid rgba(229, 143, 163, .45); }
.unit { background: #FFFDF7; border-color: rgba(229, 143, 163, .4); }
.unit.next { border-color: var(--pink-deep); box-shadow: 0 0 0 3px var(--pink-line); }

/* ---------- calendar paper gets the scallop edge too ---------- */
.cal-paper { border-radius: 30px; box-shadow: 0 0 0 2px var(--cream), 0 0 0 3.5px rgba(62, 39, 39, .35), 0 30px 80px rgba(62, 39, 39, .25); }

/* toasts in cocoa with a pink edge */
.pomo-toast { border: 1.5px solid rgba(255, 188, 197, .5); }

@media (max-width: 600px) {
    .todo-head h1, .sc-head h2 { font-size: 34px; }
}

/* ==========================================================================
   Matcha-making timer (drawing in matcha.js)
   ========================================================================== */
.timer-visual { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 12px 0 12px; }
.matcha { width: 132px; flex-shrink: 0; }
.matcha-svg { display: block; width: 100%; height: auto; overflow: visible; }
.timer-readout { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; width: 176px; flex-shrink: 0; }
/* fixed-width readout + tabular digits so the glass never slides when the numbers change */
.timer-visual .time-display { font-variant-numeric: tabular-nums lining-nums; font-feature-settings: "tnum" 1, "lnum" 1; }
.matcha-caption, .matcha-fill { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.timer-visual .time-display { font-size: 62px; margin: 0; line-height: 1; }
.matcha-caption { margin-top: 8px; font-family: var(--serif); font-style: italic; font-size: 14px; color: var(--sage); white-space: nowrap; }

/* smooth level changes */
.mx-milk, .mx-matcha { transition: y 1s cubic-bezier(.4, 0, .2, 1), height 1s cubic-bezier(.4, 0, .2, 1); }
.mx-surface, .mx-ice, .mx-clouds { transition: transform 1s cubic-bezier(.4, 0, .2, 1), opacity 1.2s ease; }
.mx-drops { transition: opacity 2s ease; }

/* ice */
.cube rect { fill: rgba(255, 255, 255, .5); stroke: rgba(255, 255, 255, .95); stroke-width: 1.2; }
.cube path { stroke: #fff; stroke-width: 1.6; stroke-linecap: round; opacity: .9; }
.cube { transform-box: fill-box; transform-origin: center; }
.matcha.running .cube { animation: mx-bob 3.2s ease-in-out infinite; }
.matcha.running .cube.k2 { animation-delay: -1.1s; }
.matcha.running .cube.k3 { animation-delay: -2.2s; }
.matcha.mx-dropin .cube { animation: mx-drop 1.1s cubic-bezier(.3, 1.4, .5, 1) both !important; }
.matcha.mx-dropin .cube.k2 { animation-delay: .12s !important; }
.matcha.mx-dropin .cube.k3 { animation-delay: .24s !important; }
.matcha.empty .mx-surface { opacity: 0; }

/* surface + bubbles */
.matcha.running .mx-wave { animation: mx-wave 2.6s linear infinite; }
.mx-bubbles circle { fill: rgba(255, 255, 255, .85); opacity: 0; transform-box: fill-box; }
.matcha.running:not(.empty) .mx-bubbles circle { animation: mx-bubble 3.6s ease-in infinite; }
.matcha.running .mx-bubbles circle:nth-child(2) { animation-delay: -.8s; }
.matcha.running .mx-bubbles circle:nth-child(3) { animation-delay: -1.7s; }
.matcha.running .mx-bubbles circle:nth-child(4) { animation-delay: -2.5s; }
.matcha.running .mx-bubbles circle:nth-child(5) { animation-delay: -3.1s; }

/* matcha clouds sinking into the milk */
.cl { transform-box: fill-box; transform-origin: center; }
.matcha.running .cl { animation: mx-cloud 7s ease-in-out infinite; }
.matcha.running .cl.c2 { animation-delay: -2.3s; animation-duration: 8.5s; }
.matcha.running .cl.c3 { animation-delay: -4.6s; animation-duration: 6.4s; }
.matcha.running .cl.c4 { animation-delay: -1.2s; animation-duration: 9s; }

/* tools: milk bottle + matcha pitcher swing in to pour */
.mx-tool { opacity: 0; transform-box: view-box; transition: transform .8s cubic-bezier(.34, 1.3, .5, 1), opacity .4s ease; }
.mx-bottle { transform-origin: 125px 2px; transform: translate(18px, -16px) rotate(8deg); }
.mx-jug { transform-origin: 114px 22px; transform: translate(18px, -16px) rotate(8deg); }
.matcha.running[data-stage="milk"] .mx-bottle { opacity: 1; transform: translate(-12px, 25px) rotate(-112deg); }
.matcha.running[data-stage="matcha"] .mx-jug { opacity: 1; transform: translate(-1px, 4px) rotate(-56deg); }
.mx-stream { opacity: 0; stroke-dasharray: none; transition: opacity .35s ease .35s; }
.matcha.running[data-stage="milk"] .mx-stream,
.matcha.running[data-stage="matcha"] .mx-stream { opacity: 1; animation: mx-flow .5s ease-in-out infinite alternate; }
@keyframes mx-flow { from { stroke-width: 4.6; } to { stroke-width: 3.4; } }
.matcha.running[data-stage="milk"] .mx-splash,
.matcha.running[data-stage="matcha"] .mx-splash { animation: mx-splash .9s ease-out infinite; transform-box: fill-box; transform-origin: center; }

/* straw drops in when it's ready; sips during the break */
.mx-straw { opacity: 0; transform: translateY(-80px); transition: transform .9s cubic-bezier(.3, 1.5, .5, 1), opacity .3s ease; }
.matcha[data-stage="ready"] .mx-straw,
.matcha[data-stage="drink"] .mx-straw { opacity: 1; transform: translateY(0); }
.mx-sip { opacity: 0; stroke-dasharray: 12 150; }
.matcha.running[data-stage="drink"] .mx-sip { opacity: .9; animation: mx-sip 1.8s ease-in infinite; }
.matcha.running[data-stage="drink"] .mx-straw { animation: mx-wiggle 1.8s ease-in-out infinite; transform-box: view-box; transform-origin: 96px 160px; }

.mx-sparkles { opacity: 0; transition: opacity .4s ease; }
.mx-sparkles path { transform-box: fill-box; transform-origin: center; }
.matcha[data-stage="ready"] .mx-sparkles { opacity: 1; }
.matcha[data-stage="ready"] .mx-sparkles path { animation: mx-twinkle 1.5s ease-in-out infinite; }
.matcha[data-stage="ready"] .mx-sparkles path:nth-child(2) { animation-delay: -.5s; }
.matcha[data-stage="ready"] .mx-sparkles path:nth-child(3) { animation-delay: -1s; }
.matcha[data-stage="ready"] .matcha-svg { animation: mx-pop .6s cubic-bezier(.3, 1.6, .5, 1); }

/* soda: fizz + ice-cream float */
.mx-fizz .fz { fill: #fff; opacity: 0; }
.matcha.running .mx-fizz .fz { animation: mx-bubble 2.6s ease-in infinite; transform-box: fill-box; }
.matcha[data-stage="ready"] .mx-fizz .fz { animation: mx-bubble 3.4s ease-in infinite; transform-box: fill-box; }
.mx-float { opacity: 0; transform: translateY(-60px); transition: transform .8s cubic-bezier(.3, 1.6, .5, 1) .25s, opacity .3s ease .25s; }
.matcha[data-stage="ready"] .mx-float,
.matcha[data-stage="drink"] .mx-float { opacity: 1; transform: translateY(0); }
.menu-glass .mx-float { opacity: 1; transform: none; transition: none; }
@media (prefers-reduced-motion: reduce) {
  .mx-fizz .fz { animation: none !important; }
  .mx-float { transition: none; }
}
@keyframes mx-bob { 0%, 100% { transform: translateY(0) rotate(-5deg); } 50% { transform: translateY(2.4px) rotate(6deg); } }
@keyframes mx-drop { 0% { transform: translateY(-120px) rotate(-30deg); opacity: 0; } 30% { opacity: 1; } 70% { transform: translateY(4px) rotate(8deg); } 100% { transform: translateY(0) rotate(0); } }
@keyframes mx-wave { from { transform: translateX(0); } to { transform: translateX(40px); } }
@keyframes mx-bubble { 0% { opacity: 0; transform: translateY(0) scale(.6); } 20% { opacity: .9; } 85% { opacity: .5; } 100% { opacity: 0; transform: translateY(-80px) scale(1.1); } }
@keyframes mx-cloud { 0%, 100% { transform: translate(0, 0) scale(1); } 33% { transform: translate(4px, 9px) scale(1.18, 1.1); } 66% { transform: translate(-5px, 4px) scale(.92, 1.15); } }
@keyframes mx-pour { to { stroke-dashoffset: -20.5; } }
@keyframes mx-splash { 0% { opacity: .9; transform: scale(.4); } 100% { opacity: 0; transform: scale(2.4); } }
@keyframes mx-sip { from { stroke-dashoffset: 0; } to { stroke-dashoffset: -150; } }
@keyframes mx-wiggle { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(-2.5deg); } }
@keyframes mx-twinkle { 0%, 100% { transform: scale(.7) rotate(0); opacity: .5; } 50% { transform: scale(1.2) rotate(20deg); opacity: 1; } }
@keyframes mx-pop { 0% { transform: scale(1); } 40% { transform: scale(1.06); } 100% { transform: scale(1); } }

@media (prefers-reduced-motion: reduce) {
    .matcha *, .matcha .matcha-svg { animation: none !important; transition: none !important; }
}
@media (max-width: 600px) {
    .timer-readout { width: 150px; }
    .matcha { width: 108px; }
    .timer-visual .time-display { font-size: 52px; }
}

/* ==========================================================================
   Custom timer panel
   ========================================================================== */
.buttons .btn.btn-icon { min-width: 0; width: 46px; padding: 0; }
.stamps { flex-wrap: wrap; justify-content: center; max-width: 300px; }
.timer-settings {
    position: fixed; z-index: 75; left: 50%; top: 50%; transform: translate(-50%, -50%);
    width: 330px; max-height: calc(100vh - 32px); overflow-y: auto; padding: 16px 18px 14px; text-align: left;
    background: #FFFDF7; border: 1.5px solid var(--border-strong); border-radius: 22px;
    box-shadow: 0 0 0 100vmax rgba(62, 39, 39, .18), 0 24px 60px rgba(62, 39, 39, .25);
    cursor: default;
}
.timer-settings[hidden] { display: none; }
.ts-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.ts-head b { font-family: var(--serif); font-style: italic; font-size: 18px; font-weight: 650; }
.ts-close { border: none; background: var(--surface-2); color: var(--text); width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; }
.ts-presets { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-bottom: 10px; }
.ts-chip {
    display: flex; flex-direction: column; align-items: center; gap: 1px;
    padding: 7px 2px; border-radius: 14px; border: 1.5px solid var(--border);
    background: #fff; color: var(--text); font: 600 11.5px var(--font);
}
.ts-chip small { font-family: var(--serif); font-size: 12px; color: var(--muted); }
.ts-chip:hover { border-color: var(--pink-deep); }
.ts-chip.on { background: var(--pink-line); border-color: var(--pink-deep); color: #7A2E45; }
.ts-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 0; border-bottom: 1px dashed var(--border); }
.ts-label { font-size: 13.5px; font-weight: 600; }
.ts-step { display: flex; align-items: center; gap: 4px; }
.ts-step button {
    width: 28px; height: 28px; border-radius: 50%; border: 1.5px solid var(--border-strong);
    background: #fff; color: var(--text); font: 700 15px var(--font); line-height: 1; display: grid; place-items: center;
}
.ts-step button:hover { background: var(--pink-line); }
.ts-step input {
    width: 48px; text-align: center; font: 600 16px var(--serif); color: var(--text);
    border: none; background: transparent; outline: none; -moz-appearance: textfield;
}
.ts-step input::-webkit-outer-spin-button, .ts-step input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.ts-unit { width: 40px; font-size: 11.5px; color: var(--muted); }
.ts-toggle { display: flex; align-items: center; gap: 8px; margin-top: 10px; font-size: 13px; color: var(--text-2); cursor: pointer; }
.ts-toggle input { width: 18px; height: 18px; accent-color: #8DAA5B; }
.ts-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 10px; }
.ts-reset { border: none; background: none; padding: 0; font: 600 12px var(--font); color: #9A3D57; cursor: pointer; }
.ts-reset:hover { text-decoration: underline; }
.ts-note { font-family: var(--serif); font-style: italic; font-size: 12px; color: var(--sage); }
@media (max-width: 600px) { .timer-settings { width: calc(100vw - 48px); } }
/* timer card (and its settings panel) above the To-Do card */
#draggable-container1 { z-index: 3; }
#draggable-container { z-index: 2; }

/* fill-level line under the caption */
.matcha-fill { margin-top: 3px; font-size: 11.5px; font-weight: 600; color: #8F7F78; white-space: nowrap; font-variant-numeric: tabular-nums; }

/* ==========================================================================
   First-time guide
   ========================================================================== */
.intro-overlay {
    position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: 20px;
    background: rgba(62, 39, 39, .35); backdrop-filter: blur(4px);
    opacity: 0; transition: opacity .25s ease;
}
.intro-overlay.show { opacity: 1; }
.intro {
    width: min(420px, 100%); max-height: calc(100vh - 40px); overflow-y: auto;
    padding: 30px 30px 22px; text-align: center; color: var(--text);
    transform: translateY(14px) scale(.97); transition: transform .35s cubic-bezier(.2, .9, .3, 1.2);
}
.intro-overlay.show .intro { transform: none; }
.intro-art { width: 120px; margin: 0 auto 4px; }
.intro h2 { margin: 0; font-family: var(--script); font-weight: 400; font-size: 44px; line-height: 1.05; color: var(--sage); }
.intro-lead { margin: 4px 0 14px; font-family: var(--serif); font-style: italic; font-size: 15px; color: #9A3D57; }
.intro-steps { list-style: none; margin: 0 0 18px; padding: 0; display: flex; flex-direction: column; gap: 10px; text-align: left; }
.intro-steps li { display: flex; gap: 10px; align-items: flex-start; font-size: 13.5px; line-height: 1.45; color: var(--text-2); }
.intro-steps b {
    flex-shrink: 0; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center;
    background: var(--sage-soft); color: #3E5A2C; font-family: var(--serif); font-size: 13px;
}
.intro-steps strong { color: var(--text); }
.intro-go { width: 100%; padding: 13px 18px; font-size: 15.5px; }
.intro-later { margin-top: 8px; border: none; background: none; color: var(--muted); font: 600 13px var(--font); cursor: pointer; }
.intro-later:hover { color: var(--text); text-decoration: underline; }

/* intro: empty → full strip */
.intro-strip { display: flex; align-items: flex-end; justify-content: center; gap: 2px; margin: 0 -6px 6px; }
.intro-step { display: flex; flex-direction: column; align-items: center; width: 66px; }
.intro-step .matcha { width: 78px; margin: 0 -7px; }
.intro-step span { margin-top: 2px; font-family: var(--serif); font-style: italic; font-size: 11.5px; color: var(--text-2); white-space: nowrap; }
.intro-step.done span { color: var(--sage); font-weight: 650; }
.intro-step.brk span { color: #9A3D57; }
.intro-arrow { align-self: center; margin-bottom: 18px; color: #C9B6AE; font-size: 13px; }
.intro-strip .intro-step { opacity: 0; transform: translateY(8px); animation: intro-in .45s ease forwards; }
.intro-strip .intro-step:nth-of-type(2) { animation-delay: .15s; }
.intro-strip .intro-step:nth-of-type(3) { animation-delay: .3s; }
.intro-strip .intro-step:nth-of-type(4) { animation-delay: .45s; }
.intro-strip .intro-step:nth-of-type(5) { animation-delay: .6s; }
@keyframes intro-in { to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .intro-strip .intro-step { animation: none; opacity: 1; transform: none; } }


/* ==========================================================================
   Drink menu (drinks.js + menu.js)
   ========================================================================== */
.drink-chip {
    display: inline-flex; align-items: center; gap: 6px; max-width: 100%;
    margin-top: 10px; padding: 5px 10px 5px 7px; border-radius: 999px;
    border: 1.5px solid var(--border-strong); background: #fff; color: var(--text);
    font: 600 12px var(--font); cursor: pointer; white-space: nowrap;
}
.drink-chip span { overflow: hidden; text-overflow: ellipsis; }
.drink-chip i { flex-shrink: 0; width: 12px; height: 12px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(62, 39, 39, .2); }
.drink-chip:hover { border-color: var(--pink-deep); background: var(--pink-line); }
.new-dot { flex-shrink: 0; padding: 1px 6px; border-radius: 99px; background: #FFBCC5; color: #7A2E45; font-size: 9.5px; letter-spacing: .04em; text-transform: uppercase; }

#menu-overlay {
    position: fixed; inset: 0; z-index: 64; display: grid; place-items: center; padding: 20px;
    background: rgba(62, 39, 39, .3); backdrop-filter: blur(4px);
    opacity: 0; pointer-events: none; transition: opacity .2s ease;
}
body.menu-open #menu-overlay { opacity: 1; pointer-events: auto; }
.drink-menu {
    width: min(560px, 100%); max-height: calc(100vh - 40px); overflow-y: auto;
    padding: 30px 30px 22px; color: var(--text); text-align: left;
    transform: translateY(12px) scale(.98); transition: transform .3s cubic-bezier(.2, .8, .2, 1);
}
body.menu-open .drink-menu { transform: none; }
.menu-close { position: absolute; top: 24px; right: 24px; width: 34px; height: 34px; border-radius: 50%; border: none; background: var(--surface-2); color: var(--text); display: grid; place-items: center; cursor: pointer; z-index: 1; }
.menu-head { display: flex; flex-direction: column; align-items: center; text-align: center; margin-bottom: 14px; }
.menu-head .script { font-family: var(--script); font-size: 56px; line-height: 1; color: var(--sage); }
.menu-head .sub { font-family: var(--serif); font-style: italic; font-size: 13px; color: #9A3D57; }
.menu-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.menu-item {
    display: flex; align-items: center; gap: 4px; padding: 8px 10px 8px 2px; text-align: left;
    border-radius: 18px; border: 1.5px dashed var(--border-strong); background: #fff;
    color: var(--text); cursor: pointer; transition: border-color .15s ease, background-color .15s ease, transform .15s ease;
}
.menu-item:hover:not(:disabled) { border-color: var(--pink-deep); transform: translateY(-2px); }
.menu-item.on { border-style: solid; border-color: #8DB350; background: #F6FAEE; }
.menu-item.locked { cursor: not-allowed; background: var(--cream-2); }
.menu-item.locked .menu-glass { filter: grayscale(.8) opacity(.55); }
.menu-glass { width: 74px; flex-shrink: 0; }
.menu-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.menu-name { display: flex; align-items: center; gap: 6px; font-family: var(--serif); font-style: italic; font-weight: 650; font-size: 15.5px; line-height: 1.15; }
.menu-desc { font-size: 11.5px; color: var(--muted); }
.menu-state { display: inline-flex; align-items: center; gap: 4px; margin-top: 3px; font-size: 11.5px; font-weight: 700; color: #9A3D57; }
.menu-item.on .menu-state { color: #4F6B3B; }
.menu-item.locked .menu-state { color: var(--muted); }
.new-tag { padding: 1px 6px; border-radius: 6px; background: #FFBCC5; color: #7A2E45; font: 800 9.5px var(--font); letter-spacing: .05em; font-style: normal; }
.menu-foot { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 6px; margin-top: 14px; padding-top: 10px; border-top: 1.5px dashed var(--border-strong); font-size: 12px; color: var(--text-2); }
.menu-tag { font-family: var(--serif); font-style: italic; color: var(--sage); }
@media (max-width: 520px) { .menu-grid { grid-template-columns: 1fr; } }

/* ==========================================================================
   Drink first: big animation, small clock underneath
   ========================================================================== */
.timer-visual { flex-direction: column; gap: 4px; margin: 6px 0 8px; }
.timer-visual .matcha { width: 220px; }
.timer-readout {
    width: 100%; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: center;
    column-gap: 8px; row-gap: 6px; text-align: center;
}
.timer-readout .matcha-caption { order: 1; flex-basis: 100%; margin: 0; font-size: 16px; text-align: center; }
.timer-visual .time-display {
    order: 2; font-size: 20px; line-height: 1; padding: 6px 12px; border-radius: 99px;
    background: var(--cream); border: 1px solid rgba(229, 143, 163, .55); letter-spacing: 0;
}
.timer-readout .matcha-fill { order: 3; margin: 0; font-size: 12px; }
.timer-readout .drink-chip { order: 4; margin-top: 2px; }
@media (max-width: 600px) {
    .timer-visual .matcha { width: 170px; }
    .timer-visual .time-display { font-size: 18px; }
}
/* the timer card is taller now → To-Do sits beside it on wide screens */
@media (min-width: 861px) {
    #draggable-container1 { left: calc(50% - 372px); }
    #draggable-container { top: 76px; left: calc(50% + 32px); }
    #task-list { max-height: clamp(110px, calc(100vh - 380px), 60vh); }
}
@media (min-width: 601px) and (max-width: 860px) {
    #draggable-container { top: 664px; }
}

/* ---------- timer tabs: a session running (or Focus paused) on another tab shows its time ---------- */
.mode-buttons button { gap: 6px; }
.mode-buttons .tab-time {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums;
    padding: 1px 6px; border-radius: 999px; line-height: 1.5;
    background: rgba(62, 39, 39, .07); color: inherit; opacity: .9;
}
.mode-buttons .tab-time.live { background: #E6EFC4; color: #4F6A17; }
.mode-buttons .tab-time[hidden] { display: none; }
.mode-buttons .tab-time:not(.live) i { display: none; }
.mode-buttons .tab-time, .mode-buttons .tab-time * { pointer-events: none; }
.mode-buttons button { touch-action: manipulation; }
.mode-buttons .tab-time.live i { width: 6px; height: 6px; border-radius: 50%; background: #86A136; animation: tab-pulse 1.4s ease-in-out infinite; }
@keyframes tab-pulse { 50% { opacity: .3; transform: scale(.7); } }
@media (prefers-reduced-motion: reduce) { .mode-buttons .tab-time.live i { animation: none; } }
@media (max-width: 420px) {
    .mode-buttons button { flex-direction: column; gap: 1px; line-height: 1.15; }
    .mode-buttons .tab-time { font-size: 10px; padding: 0 5px; }
}

/* ---------- Today list (To-Do card) ---------- */
.todo-date { margin: -6px 0 12px; text-align: center; font-size: 11px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: #B03F64; }

/* progress */
.today-progress { display: flex; align-items: center; gap: 10px; margin: 0 2px 12px; }
.today-progress[hidden] { display: none; }
.tp-bar { flex: 1; height: 8px; border-radius: 99px; background: var(--cream-2); box-shadow: inset 0 0 0 1px var(--border); overflow: hidden; }
.tp-bar i { display: block; height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, #CFE08F, #A9C25A); transition: width .45s cubic-bezier(.2, .8, .2, 1); }
.tp-text { font-size: 12px; font-weight: 700; color: var(--text-2); white-space: nowrap; font-variant-numeric: tabular-nums; }
.today-progress.all .tp-text { color: #5E7D1F; }

/* add */
.today-add .task-input { gap: 8px; }
.today-add #add-task-btn { flex-shrink: 0; }
.ta-row { display: flex; align-items: center; gap: 6px; margin: 8px 4px 0; min-height: 26px; }
.ta-time {
    position: relative; display: inline-flex; align-items: center; gap: 5px;
    padding: 4px 10px; border-radius: 999px; cursor: pointer;
    border: 1.5px dashed #F4A3B4; background: #fff; color: #B03F64;
    font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums;
}
.ta-time:hover { background: #FFF0F2; }
.ta-time.has { border-style: solid; background: #FFE6EA; }
.ta-time input { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; cursor: pointer; border: 0; padding: 0; }
.ta-time input::-webkit-calendar-picker-indicator { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.ta-clear { display: inline-grid; place-items: center; width: 22px; height: 22px; padding: 0; border: none; border-radius: 50%; background: rgba(62, 39, 39, .06); color: var(--text-2); cursor: pointer; }
.ta-clear[hidden] { display: none; }
.ta-hint { margin-left: auto; font-size: 11px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* overdue banner */
.overdue { margin: 12px 0 0; border-radius: 14px; background: #FFF0F2; border: 1.5px solid #F7C3CE; }
.overdue[hidden] { display: none; }
.od-head { display: flex; align-items: center; gap: 8px; padding: 8px 10px; }
.od-ic { display: inline-grid; color: #C2185B; }
.od-text { flex: 1; font-size: 13px; font-weight: 700; color: #9A1F4D; }
.od-btn { border: none; background: #fff; color: #B03F64; font: 700 12px var(--font); padding: 5px 10px; border-radius: 999px; cursor: pointer; box-shadow: inset 0 0 0 1.5px #F4A3B4; }
.od-btn:hover { background: #FFE6EA; }
.od-btn.sm { padding: 3px 9px; font-size: 11.5px; }
.od-toggle { border: none; background: none; color: #9A1F4D; font: 700 12px var(--font); cursor: pointer; padding: 4px 2px; text-decoration: underline; text-underline-offset: 2px; }
.od-list { list-style: none; margin: 0; padding: 0 10px 8px; }
.od-list li { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-top: 1px dashed #F4A3B4; font-size: 13px; }
.od-name { flex: 1; min-width: 0; display: flex; flex-direction: column; overflow: hidden; }
.od-name small { font-size: 11px; color: #B0617B; }
.od-done { display: inline-grid; place-items: center; width: 26px; height: 26px; padding: 0; border: none; border-radius: 50%; background: #fff; color: #5E7D1F; cursor: pointer; box-shadow: inset 0 0 0 1.5px #C6D68A; }
.od-more { justify-content: center; }

/* rows */
#task-list { margin-top: 10px; }
#task-list li.tr { display: flex; align-items: center; gap: 10px; padding: 7px 6px; border-radius: 12px; }
#task-list li.tr + li.tr { margin-top: 2px; }
#task-list li.tr:hover { background: var(--pink-line); }
.tr-check {
    flex-shrink: 0; display: inline-grid; place-items: center; width: 24px; height: 24px; padding: 0; cursor: pointer;
    border-radius: 50%; border: 2px solid color-mix(in srgb, var(--c) 70%, #CDB8AF); background: #fff; color: #3E5A2C;
    transition: transform .12s ease, background .15s ease;
}
.tr-check:hover { transform: scale(1.08); background: color-mix(in srgb, var(--c) 18%, #fff); }
.tr-task.checked .tr-check { background: #BDD373; border-color: #A9C25A; }
.tr-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.tr-title {
    display: block; width: 100%; padding: 2px 0; margin: 0; border: none; background: none; text-align: left; cursor: text;
    font: 500 14.5px var(--font); color: var(--text); overflow-wrap: anywhere; border-radius: 6px;
}
.tr-task .tr-title:hover { text-decoration: underline dotted #CDB8AF; text-underline-offset: 3px; }
.tr-exam .tr-title { font-weight: 700; }
.tr-task.checked .tr-title { text-decoration: line-through; color: var(--muted); }
.tr-edit { width: 100%; font: 500 14.5px var(--font); color: var(--text); padding: 3px 8px; margin: -1px 0; border: 1.5px solid #F4A3B4; border-radius: 8px; outline: none; background: #fff; box-shadow: 0 0 0 3px #FFE6EA; }
.tr-main small { display: flex; align-items: center; gap: 5px; font-size: 11.5px; color: var(--muted); }
.tr-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--c); flex-shrink: 0; }
.tr-ic { display: inline-grid; place-items: center; width: 24px; flex-shrink: 0; }
.tr-time {
    position: relative; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; min-width: 30px; height: 26px;
    padding: 0 8px; border-radius: 999px; cursor: pointer;
    font-size: 12px; font-weight: 800; font-variant-numeric: tabular-nums; color: #B03F64; background: #FFE6EA;
}
.tr-time.ro { cursor: default; }
.tr-time.empty { background: none; color: #CDB8AF; padding: 0 4px; opacity: 0; transition: opacity .15s ease; }
.tr:hover .tr-time.empty, .tr-time.empty:focus-within { opacity: 1; }
.tr-time-input { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; border: 0; padding: 0; cursor: pointer; }
.tr-time-input::-webkit-calendar-picker-indicator { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.tr-task.checked .tr-time:not(.empty) { opacity: .5; }
.tr-task.checked .tr-time.empty { display: none; }
.tr-del { flex-shrink: 0; display: inline-grid; place-items: center; width: 28px; height: 28px; padding: 0; border: none; border-radius: 8px; background: none; color: #CDB8AF; cursor: pointer; opacity: .55; }
.tr:hover .tr-del { opacity: 1; }
.tr-del:hover { color: var(--warn); background: var(--warn-soft); }
@media (hover: none) { .tr-del, .tr-time.empty { opacity: 1; } }
.tr-link { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; color: inherit; text-decoration: none; }
.tr-empty { flex-direction: column; justify-content: center; text-align: center; padding: 18px 6px !important; color: var(--text-2); font-size: 13.5px; background: none !important; }
.tr-empty small { color: var(--muted); }
.task-footer { justify-content: center; }
.task-footer .btn-link { display: inline-flex; align-items: center; gap: 6px; }

/* keep the card above the YouTube bar on shorter screens — the list scrolls */
html:not(.phone) #task-list { max-height: max(150px, calc(100vh - 560px)); }

/* cool-running: looping motion pauses while resting (see the end of matcha.js) */
html.mx-rest .matcha *, html.mx-rest .matcha *::before, html.mx-rest .matcha *::after,
html.mx-rest .lp-live, html.mx-rest .mode-buttons .tab-time.live i { animation-play-state: paused !important; }

/* drink chip under the timer — little glass + name, sticker style */
.timer-readout .drink-chip {
    order: 4; margin-top: 4px; gap: 10px; padding: 4px 14px 4px 5px; max-width: 100%;
    background: var(--cream); border: 2px solid var(--cream); border-radius: 999px;
    box-shadow: 0 0 0 1.5px rgba(95, 120, 76, .55), 0 4px 0 rgba(229, 143, 163, .35);
    transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease;
}
.timer-readout .drink-chip:hover { background: #fff; border-color: #fff; transform: translateY(-1px); box-shadow: 0 0 0 1.5px var(--sage), 0 5px 0 rgba(229, 143, 163, .45); }
.timer-readout .drink-chip:active { transform: translateY(1px); box-shadow: 0 0 0 1.5px var(--sage), 0 2px 0 rgba(229, 143, 163, .45); }
.drink-chip .dc-cup {
    flex-shrink: 0; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%;
    background: radial-gradient(circle at 50% 42%, #fff 0 52%, color-mix(in srgb, var(--dc, #8DB350) 22%, #fff) 53% 100%);
    box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--dc, #8DB350) 45%, #fff);
}
.timer-visual .drink-chip .matcha.dc-glass, html.phone .timer-visual .drink-chip .matcha.dc-glass { width: 30px !important; margin-top: -3px; }
.drink-chip .dc-glass .mx-shadow, .drink-chip .dc-glass .mx-sparkles { display: none; }
.drink-chip .dc-glass *, .drink-chip .dc-glass *::before { animation: none !important; transition: none !important; }
.drink-chip .dc-tx { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.15; min-width: 0; text-align: left; }
.drink-chip .dc-tx small { font: 800 9.5px var(--font); letter-spacing: .14em; text-transform: uppercase; color: #9A3D57; }
.drink-chip .dc-name { font-family: var(--serif); font-style: italic; font-weight: 600; font-size: 15.5px; color: var(--text); overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.drink-chip .dc-chev { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--sage-soft); color: var(--sage); flex-shrink: 0; }
.drink-chip .new-dot { align-self: center; }

/* ==========================================================================
   Phone fix: pop-up cards must fit the *visible* screen (Safari toolbar)
   and keep the scalloped cream frame while the list scrolls inside it.
   ========================================================================== */
#menu-overlay, .intro-overlay {
    padding: calc(env(safe-area-inset-top, 0px) + 14px) 14px calc(env(safe-area-inset-bottom, 0px) + 14px);
}
.drink-menu {
    display: flex; flex-direction: column; overflow: hidden;
    max-height: calc(100vh - 40px);
    max-height: calc(100dvh - 28px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
}
.drink-menu .menu-head, .drink-menu .menu-foot { flex-shrink: 0; }
.drink-menu .menu-grid {
    flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch; padding: 2px 4px 6px; margin: 0 -4px;
}
.intro {
    max-height: calc(100vh - 40px);
    max-height: calc(100dvh - 28px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
}
.timer-settings { max-height: calc(100dvh - 32px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)); }
@media (max-width: 520px) {
    .drink-menu { padding: 26px 26px 28px; }
    .menu-close { top: 20px; right: 20px; }
    .menu-head .script { font-size: 48px; }
}

/* ---------- sync badge "Saved ✓" (syncbadge.js) — next to Log out ---------- */
.sync-badge {
    display: inline-flex; align-items: center; gap: 6px;
    height: 34px; padding: 0 12px; border-radius: 999px;
    background: var(--cream); border: 1.5px solid var(--border-strong);
    color: var(--sage); font: 600 12.5px/1 'Plus Jakarta Sans', 'Noto Sans Thai', sans-serif;
    cursor: pointer; white-space: nowrap; align-self: center;
    box-shadow: var(--shadow);
    transition: padding .3s ease, background .2s ease, color .2s ease;
}
.sync-badge[hidden] { display: none; }
.sync-badge:hover { background: #fff; }
.sync-badge .sb-ic { display: inline-flex; width: 14px; height: 14px; align-items: center; justify-content: center; }
.sync-badge .sb-tx { overflow: hidden; max-width: 140px; transition: max-width .3s ease, opacity .25s ease; }
.sync-badge.quiet { padding: 0 9px; gap: 0; }
.sync-badge.quiet .sb-tx { max-width: 0; opacity: 0; }
.sync-badge.quiet:hover .sb-tx, .sync-badge.quiet:focus-visible .sb-tx { max-width: 140px; opacity: 1; }
.sync-badge.quiet:hover, .sync-badge.quiet:focus-visible { gap: 6px; padding: 0 12px; }

.sync-badge[data-state="saved"]   { color: var(--sage); }
.sync-badge[data-state="waiting"] { color: #8A6A4F; }
.sync-badge[data-state="saving"]  { color: #8A6A4F; }
.sync-badge[data-state="offline"],
.sync-badge[data-state="retry"]   { color: #B4536A; background: #FFF1F3; border-color: var(--pink-deep); }

.sync-badge .sb-spin {
    width: 11px; height: 11px; border-radius: 50%;
    border: 2px solid currentColor; border-right-color: transparent;
    animation: sb-spin .8s linear infinite;
}
@keyframes sb-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .sync-badge .sb-spin { animation-duration: 2.4s; } }

html.phone .sync-badge { height: 30px; padding: 0 10px; font-size: 12px; }
html.phone .sync-badge.quiet { padding: 0 8px; }