/* ==========================================================================
   mobile.css — phone layout (html.phone is set in index.html when ≤ 760px)
   centre = timer · swipe left = Study Hub · swipe right = Fridge · up = Calendar
   ========================================================================== */
html.phone { --dock-h: 0px;   /* bottom dock removed — swipe to move between pages */
             --safe-b: env(safe-area-inset-bottom, 0px); --safe-t: env(safe-area-inset-top, 0px); }
html.phone { overflow: hidden; overscroll-behavior: none; }
html.phone body {
    width: 100%; height: 100vh; height: 100dvh; overflow: hidden;
    overscroll-behavior: none; -webkit-tap-highlight-color: transparent;
}

/* no YouTube, no desktop edge tabs / corner buttons on phones */
html.phone .youtube-input,
html.phone #background-video-container,
html.phone #vector-line,
html.phone #study-dashboard,
html.phone #hub-tab,
html.phone #fridge-open,
html.phone #cal-open { display: none !important; }

/* ---------- centre page: timer + to-do ---------- */
html.phone body::after {           /* small title top-left */
    content: 'Pomodoro'; position: fixed; z-index: 29; left: 18px; top: calc(var(--safe-t) + 12px);
    font-family: var(--script); font-size: 34px; line-height: 1; color: var(--sage); pointer-events: none;
}
html.phone .LogIn { position: fixed; top: calc(var(--safe-t) + 12px); right: 14px; }
html.phone .container {
    position: fixed; left: 0; right: 0;
    top: calc(var(--safe-t) + 54px);
    bottom: calc(var(--dock-h) + var(--safe-b) + 18px);
    display: flex; flex-direction: column;
    overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none;
    padding: 20px 14px 18px; gap: 14px; align-items: stretch;
}
html.phone .container::-webkit-scrollbar { display: none; }
html.phone #draggable-container1,
html.phone #draggable-container {
    position: relative; top: auto !important; left: auto !important;
    width: auto; margin: 0; cursor: default; flex-shrink: 0;
}
html.phone #draggable-container1 { padding: 18px 16px 16px; }
html.phone #draggable-container { padding: 20px 18px 18px; }
html.phone #task-list { max-height: none; overflow: visible; }
html.phone .stamps-caption { display: none; }
/* short phones: tighter timer card */
@media (max-height: 760px) {
    html.phone #draggable-container1 { padding: 14px 14px 12px; }
    html.phone .timer-visual { margin: 6px 0; }
    html.phone .timer-visual .matcha { width: 150px; }
    html.phone .stamps-wrap { margin-top: 6px; }
}
html.phone .timer-visual { margin: 10px 0; gap: 6px; }
html.phone .timer-visual .matcha { width: 180px; }

/* ---------- panels: follow the finger, no desktop pop-in ---------- */
html.phone body.swiping #hub,
html.phone body.swiping .fridge,
html.phone body.swiping .cal-paper,
html.phone body.swiping #hub-backdrop,
html.phone body.swiping #fridge-overlay,
html.phone body.swiping #cal-overlay { transition: none !important; }

/* Study Hub — from the right, full width */
html.phone #hub { width: 100vw; transform: translateX(104%); transition: transform .32s cubic-bezier(.2, .8, .2, 1); padding-top: var(--safe-t); }
html.phone body.hub-open #hub { transform: translateX(0); }
html.phone .hub-body { padding-bottom: calc(var(--dock-h) + var(--safe-b) + 34px); }

/* Fridge — from the left, full height */
html.phone #fridge-overlay { padding: 0; display: flex; align-items: stretch; justify-content: flex-start; }
html.phone .fridge {
    width: 100vw; max-width: none; height: 100%; max-height: none;
    border-radius: 0 34px 34px 0;
    padding: calc(var(--safe-t) + 18px) 16px calc(var(--dock-h) + var(--safe-b) + 34px);
    transform: translateX(-104%);
    transition: transform .32s cubic-bezier(.2, .8, .2, 1);
    overscroll-behavior: contain;
}
html.phone body.fridge-open .fridge { transform: none; }
html.phone .fridge-close { top: calc(var(--safe-t) + 14px); }

/* Calendar — a sheet from the bottom */
html.phone #cal-overlay { padding: 0; display: flex; align-items: flex-end; justify-content: stretch; }
html.phone .cal-paper {
    width: 100%; max-height: none;
    height: calc(100% - var(--safe-t) - 16px);
    border-radius: 28px 28px 0 0;
    padding: 26px 14px calc(var(--dock-h) + var(--safe-b) + 30px);
    overflow-y: auto; overscroll-behavior: contain;
    transform: translateY(104%);
    transition: transform .34s cubic-bezier(.2, .8, .2, 1);
}
html.phone body.cal-open .cal-paper { transform: none; }
html.phone #cal-overlay::before {          /* grabber */
    content: ''; position: fixed; z-index: 61; left: 50%; width: 44px; height: 5px; margin-left: -22px;
    top: calc(var(--safe-t) + 26px); border-radius: 99px; background: rgba(62, 39, 39, .22);
    opacity: 0; transition: opacity .2s ease;
}
html.phone body.cal-open #cal-overlay::before { opacity: 1; }

/* ---------- dock ---------- */
.phone-dock {
    position: fixed; z-index: 66; left: 12px; right: 12px;
    bottom: calc(10px + var(--safe-b)); height: var(--dock-h);
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; padding: 6px;
    background: var(--cream); border: 1.5px solid rgba(62, 39, 39, .18); border-radius: 22px;
    box-shadow: 0 10px 30px rgba(62, 39, 39, .16);
}
.phone-dock button {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
    border: none; border-radius: 16px; background: transparent; color: var(--text-2);
    font: 600 10.5px var(--font); cursor: pointer; padding: 0;
    transition: background-color .2s ease, color .2s ease;
}
.phone-dock .pd-ic { display: grid; place-items: center; height: 24px; }
.phone-dock button.on { background: var(--sage-soft); color: #3E2727; }
.phone-dock button.on .pd-ic { color: var(--sage); }
html.phone #pomo-toasts { bottom: calc(var(--dock-h) + var(--safe-b) + 22px); }

/* ---------- first-time swipe guide ---------- */
.phone-hint {
    position: fixed; inset: 0; z-index: 95; display: grid; place-items: center; padding: 20px;
    background: rgba(62, 39, 39, .32); backdrop-filter: blur(3px);
    opacity: 0; transition: opacity .25s ease;
}
.phone-hint.show { opacity: 1; }
.ph-card { width: min(360px, 100%); padding: 26px 22px 22px; text-align: center; color: var(--text); }
.ph-card .script { display: block; font-family: var(--script); font-size: 44px; line-height: 1; color: var(--sage); margin-bottom: 14px; }
.ph-map {
    display: grid; grid-template-columns: 1fr 1fr 1fr; grid-template-rows: auto auto; gap: 8px;
    align-items: center; margin-bottom: 14px;
}
.ph-map > span { display: flex; flex-direction: column; align-items: center; gap: 1px; font-size: 13px; }
.ph-map small { font-size: 10.5px; color: var(--muted); font-weight: 600; }
.ph-map .ic { color: var(--pink-deep); }
.ph-up { grid-column: 2; grid-row: 1; }
.ph-left { grid-column: 1; grid-row: 2; }
.ph-mid { grid-column: 2; grid-row: 2; width: 64px; height: 64px; margin: 0 auto; justify-content: center; border-radius: 50%; background: var(--sage-soft); }
.ph-mid .ic { color: var(--sage); }
.ph-right { grid-column: 3; grid-row: 2; }
.ph-card p { font-size: 13px; color: var(--text-2); margin: 0 0 16px; }
.ph-card .btn { width: 100%; justify-content: center; }
@media (prefers-reduced-motion: reduce) {
    html.phone #hub, html.phone .fridge, html.phone .cal-paper { transition: none; }
}
@media (max-width: 400px) {
    html.phone body::after { font-size: 28px; top: calc(var(--safe-t) + 14px); }
    html.phone .LogIn .btn { padding: 7px 10px; font-size: 12.5px; }
}
@media (max-height: 760px) { html.phone .timer-visual .matcha { width: 150px; } }

/* ---------- phone: timer only (no To-Do card, no bottom dock) ---------- */
html.phone .phone-dock,
html.phone #draggable-container { display: none !important; }
html.phone .container { justify-content: center; }
html.phone .container > #draggable-container1 { margin: auto 0; }

/* ---------- note under the timer: more on bigger screens ---------- */
.phone-full { display: none; }
html.phone .phone-full {
    display: flex; align-items: center; gap: 12px; flex-shrink: 0;
    margin: 0 auto; padding: 10px 18px 10px 14px; max-width: 100%;
    background: var(--cream); border: 1.5px dashed rgba(229, 143, 163, .8); border-radius: 999px;
    color: var(--text);
}
.phone-full .pf-ic { display: flex; align-items: flex-end; gap: 2px; color: var(--sage); }
.phone-full .pf-tx { display: flex; flex-direction: column; line-height: 1.25; text-align: left; }
.phone-full b { font-family: var(--serif); font-style: italic; font-weight: 600; font-size: 14.5px; }
.phone-full small { font-size: 11.5px; color: var(--muted); font-weight: 600; }