/* Palette from the Valentine site */
:root {
    --cream: #fff6ee;
    --blush: #ffd6de;
    --peach: #ffc4a3;
    --berry: #ff4f7b;
    --berry-deep: #d92a5c;
    --wine: #6d1b3a;
    --ink: #4a2233;
    --mint: #2f9e77;
    --line: #f6c6d2;
    --soft: #ffe9ee;
    --shadow: 109 27 58;
    --display: 'Bagel Fat One', 'Trebuchet MS', sans-serif;
    --body: 'Nunito', 'Trebuchet MS', sans-serif;
    --hour: 3.4rem;

    /* event types: fill / edge */
    --uni: #ff4f7b;       --uni-d: #d92a5c;
    --arbeit: #ff9a62;    --arbeit-d: #d9703a;
    --sport: #2f9e77;     --sport-d: #227a5b;
    --freizeit: #9b7bea;  --freizeit-d: #7556c9;
    --unterwegs: #4fa3e0; --unterwegs-d: #2f7fbb;
    --termin: #6d1b3a;    --termin-d: #4a1027;
    --pruefung: #e0475a;  --pruefung-d: #a82535;
    --schlaf: #8d93ab;    --schlaf-d: #6d7186;
    --urlaub: #f2b13a;    --urlaub-d: #c98c18;
    --ejw: #2bb3a3;       --ejw-d: #1a8a7d;
    --date: #ff6f9a;      --date-d: #d92a5c;
}

*, *::before, *::after { box-sizing: border-box; }
html { height: 100%; -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    font-family: var(--body);
    font-weight: 500;
    color: var(--ink);
    background: var(--blush);
    overflow-x: hidden;
    -webkit-tap-highlight-color: transparent;
}
/* page background as a fixed layer – iOS ignores background-attachment: fixed */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -1;
    background:
        radial-gradient(60rem 40rem at 12% -10%, #fff1c9 0%, rgb(255 241 201 / 0) 60%),
        radial-gradient(50rem 36rem at 105% 20%, #ffb7c9 0%, rgb(255 183 201 / 0) 62%),
        radial-gradient(46rem 40rem at 30% 115%, #ffc4a3 0%, rgb(255 196 163 / 0) 60%),
        var(--blush);
}
button, a, .gap, .ev, .day { touch-action: manipulation; } /* no double-tap zoom on fast taps */

/* drifting things behind everything */
.sky { position: fixed; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.sky span {
    position: absolute;
    bottom: -3rem;
    opacity: 0;
    animation: drift linear infinite;
    will-change: transform;
}
@keyframes drift {
    0% { transform: translate3d(0, 0, 0) rotate(-12deg); opacity: 0; }
    12% { opacity: var(--o, .5); }
    88% { opacity: var(--o, .5); }
    100% { transform: translate3d(var(--sway, 2rem), -112vh, 0) rotate(14deg); opacity: 0; }
}
.sky .star {
    bottom: auto;
    width: 2px; height: 2px;
    background: #fff;
    border-radius: 50%;
    opacity: .2;
    animation: twinkle ease-in-out infinite;
}
@keyframes twinkle { 50% { opacity: .9; transform: scale(1.6); } }

main {
    position: relative;
    z-index: 1;
    flex: 1;
    width: 100%;
    max-width: 62rem;
    margin: 0 auto;
    display: grid;
    gap: 1.6rem;
    align-items: start;
    padding: clamp(2.5rem, 6vw, 3.75rem) 1rem 1rem;
}
@media (min-width: 900px) {
    main { grid-template-columns: 22rem 1fr; gap: 2.25rem; }
    .hero { position: sticky; top: 3rem; }
}

/* cards, stitched like the valentine card */
.card {
    position: relative;
    padding: clamp(1.4rem, 5vw, 2rem);
    background: var(--cream);
    border-radius: 2rem;
    box-shadow:
        0 1px 0 #fff inset,
        0 1.5rem 3rem -1rem rgb(var(--shadow) / .35),
        0 .4rem 0 #f3c3cf;
    animation: pop .7s cubic-bezier(.2, 1.4, .4, 1) both;
}
.card::before {
    content: '';
    position: absolute;
    inset: .6rem;
    border: 2px dashed #f6b9c8;
    border-radius: 1.5rem;
    pointer-events: none;
}
.card > * { position: relative; }
.hero { text-align: center; transform: rotate(-1.2deg); }
.cal { animation-delay: .12s; transform: rotate(.4deg); }
@keyframes pop {
    from { transform: rotate(-6deg) scale(.86) translateY(1.5rem); opacity: 0; }
}

.stamp {
    position: absolute !important;
    top: -1.5rem;
    right: 1.4rem;
    width: 3.7rem;
    height: 3.7rem;
    display: grid;
    place-items: center;
    padding: 0;
    font-size: 1.7rem;
    background: var(--berry);
    border: 0;
    border-radius: 50%;
    box-shadow: 0 .35rem 0 var(--berry-deep), 0 .8rem 1.2rem -.4rem rgb(var(--shadow) / .5);
    transform: rotate(12deg);
    animation: beat 1.6s ease-in-out infinite;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.stamp:active { transform: rotate(12deg) scale(.88); }
.stamp.spin { animation: spin .8s cubic-bezier(.3, 1.4, .5, 1); }
@keyframes beat {
    0%, 100% { transform: rotate(12deg) scale(1); }
    12% { transform: rotate(12deg) scale(1.12); }
    24% { transform: rotate(12deg) scale(1); }
    36% { transform: rotate(12deg) scale(1.08); }
}
@keyframes spin { to { transform: rotate(372deg) scale(1.2); } }

h1 {
    margin: .4rem 0 1.1rem;
    padding-inline: 1.6rem;
    font-family: var(--display);
    font-weight: 400;
    font-size: clamp(2rem, 8vw, 2.6rem);
    line-height: 1.05;
    color: var(--berry);
    text-wrap: balance;
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
}
h1 em { font-style: normal; color: var(--wine); }

/* the "right now" bubble */
.now {
    display: flex;
    align-items: center;
    gap: .9rem;
    padding: 1rem 1.1rem;
    text-align: left;
    background: #fff;
    border: 2px solid var(--line);
    border-radius: 1.4rem;
    box-shadow: 0 .3rem 0 #f6d3dc;
}
.now.free { border-color: #a9dcc6; box-shadow: 0 .3rem 0 #c9ebdc; }
.now-emoji {
    flex: none;
    width: 3.2rem; height: 3.2rem;
    display: grid; place-items: center;
    font-size: 1.8rem;
    background: var(--soft);
    border-radius: 1rem;
    animation: bob 2.6s ease-in-out infinite;
}
.now.free .now-emoji { background: #e3f6ee; }
@keyframes bob { 50% { transform: translateY(-.2rem) rotate(-4deg); } }
.now p { margin: 0; }
.now-label { font-weight: 800; font-size: 1.1rem; color: var(--wine); line-height: 1.25; }
.now-detail { font-size: .95rem; margin-top: .15rem !important; overflow-wrap: anywhere; }

.next { margin: 1rem 0 0; font-weight: 700; color: var(--wine); text-wrap: pretty; }
.next:empty { display: none; }
.countdown {
    display: inline-block;
    margin: .9rem 0 0;
    padding: .35rem .85rem;
    font-size: .9rem;
    font-weight: 800;
    color: var(--berry-deep);
    background: var(--soft);
    border-radius: 2rem;
}
.countdown[hidden] { display: none; }
#textBtn { margin-top: 1.2rem; }

/* buttons */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    padding: .85rem 1.4rem;
    font: inherit;
    font-weight: 800;
    font-size: 1.05rem;
    color: #fff;
    text-decoration: none;
    background: var(--berry);
    border: 0;
    border-radius: 1rem;
    box-shadow: 0 .3rem 0 var(--berry-deep);
    cursor: pointer;
    white-space: nowrap;
    transition: transform .12s, box-shadow .12s, background .15s;
    -webkit-tap-highlight-color: transparent;
}
.btn[hidden] { display: none; }
@media (hover: hover) { .btn:hover { background: #ff3f70; } }
.btn:active { transform: translateY(.2rem); box-shadow: 0 .1rem 0 var(--berry-deep); }
.btn:focus-visible { outline: .2rem solid var(--wine); outline-offset: .15rem; }
.btn.ghost { color: var(--wine); background: #fff; box-shadow: 0 .3rem 0 #f1c5cf; }
@media (hover: hover) { .btn.ghost:hover { background: #fff0f3; } }
.btn.ghost:active { box-shadow: 0 .1rem 0 #f1c5cf; }
.btn.wide { width: 100%; }
.btn.icon { width: 2.8rem; height: 2.8rem; padding: 0; font-size: 1.6rem; line-height: 1; }

/* week navigation */
.weekbar { display: flex; align-items: center; gap: .75rem; margin-bottom: 1rem; }
.weektitle { flex: 1; text-align: center; min-width: 0; }
.weekbar h2 {
    margin: 0;
    font-family: var(--display);
    font-weight: 400;
    font-size: clamp(1.25rem, 5vw, 1.55rem);
    color: var(--wine);
}
.today-link {
    margin-top: .1rem;
    padding: 0;
    font: inherit;
    font-size: .85rem;
    font-weight: 800;
    color: var(--berry);
    background: none;
    border: 0;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: .2em;
}
.today-link[hidden] { display: none; }

.days { display: grid; grid-template-columns: repeat(7, 1fr); gap: .35rem; margin-bottom: 1rem; }
.day {
    display: grid;
    justify-items: center;
    gap: .1rem;
    padding: .5rem 0 .45rem;
    font: inherit;
    color: var(--ink);
    background: #fff;
    border: 2px solid transparent;
    border-radius: 1rem;
    box-shadow: 0 .25rem 0 #f6d3dc;
    cursor: pointer;
    transition: transform .15s cubic-bezier(.3, 1.6, .5, 1), background .15s;
    -webkit-tap-highlight-color: transparent;
}
@media (hover: hover) { .day:hover { transform: translateY(-.12rem); } }
.day .dow { font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; opacity: .7; }
.day .num { font-family: var(--display); font-size: 1.25rem; line-height: 1.1; color: var(--wine); }
.day .dots { display: flex; gap: 2px; height: .55rem; align-items: center; font-size: .55rem; line-height: 1; }
.day .dots i { width: .32rem; height: .32rem; border-radius: 50%; background: var(--c, var(--berry)); }
.day.today { border-color: var(--berry); }
.day.selected { background: var(--berry); box-shadow: 0 .25rem 0 var(--berry-deep); }
.day.selected .dow, .day.selected .num { color: #fff; opacity: 1; }
.day.selected .dots i { background: #fff !important; }
.day.past:not(.selected) { opacity: .55; }

/* all-day strip */
.allday { display: grid; gap: .4rem; margin-bottom: .75rem; }
.allday:empty { display: none; }
.allday .ev-all {
    display: flex; align-items: center; gap: .5rem;
    padding: .55rem .85rem;
    font: inherit; font-weight: 800; text-align: left;
    color: #fff;
    background: var(--c);
    border: 0;
    border-radius: .9rem;
    box-shadow: 0 .2rem 0 var(--cd);
    cursor: pointer;
}

/* the day timeline */
.timeline {
    position: relative;
    margin-left: 2.9rem;
    border-left: 2px solid var(--line);
    touch-action: pan-y;
}
.hourline {
    position: absolute;
    left: 0; right: 0;
    border-top: 1px dashed #f3d0d9;
}
.hourline span {
    position: absolute;
    left: -3.2rem;
    top: -.6rem;
    width: 2.7rem;
    text-align: right;
    font-size: .75rem;
    font-weight: 800;
    color: #c99aa8;
    font-variant-numeric: tabular-nums;
}

.ev, .gap {
    position: absolute;
    overflow: hidden;
    border-radius: .9rem;
    font: inherit;
    text-align: left;
    -webkit-tap-highlight-color: transparent;
}
.ev {
    display: flex;
    flex-direction: column;
    gap: .05rem;
    padding: .35rem .55rem;
    color: #fff;
    background: var(--c);
    border: 0;
    border-left: .3rem solid var(--cd);
    box-shadow: 0 .2rem .5rem -.2rem rgb(var(--shadow) / .45);
    cursor: pointer;
    transition: transform .15s, filter .15s;
    animation: pop-in .4s cubic-bezier(.2, 1.4, .4, 1) both;
}
@media (hover: hover) { .ev:hover { transform: scale(1.015); filter: brightness(1.05); z-index: 3; } }
.ev.past { filter: saturate(.55) opacity(.75); }
.ev b { font-weight: 800; font-size: .92rem; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ev small { font-weight: 700; font-size: .75rem; opacity: .92; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ev.tiny { flex-direction: row; align-items: center; gap: .4rem; padding-block: .1rem; }
.ev.tiny small { display: none; }
@keyframes pop-in { from { transform: scale(.9); opacity: 0; } }

.ev.t-date {
    background: linear-gradient(120deg, #ff6f9a, #ff9ac0 50%, #ff6f9a);
    background-size: 200% 100%;
    animation: pop-in .4s cubic-bezier(.2, 1.4, .4, 1) both, shimmer 3s linear infinite;
}
.ev.t-date::after { content: '✨'; position: absolute; right: .45rem; top: .3rem; animation: twinkle 1.6s ease-in-out infinite; }
@keyframes shimmer { to { background-position: -200% 0; } }

.gap {
    display: grid;
    place-items: center;
    left: .4rem; right: .4rem;
    padding: 0;
    color: var(--mint);
    font-size: .85rem;
    font-weight: 800;
    background: repeating-linear-gradient(-45deg, #effaf5 0 .5rem, #e3f6ee .5rem 1rem);
    border: 2px dashed #a9dcc6;
    cursor: pointer;
    opacity: .9;
    transition: opacity .15s, transform .15s;
}
.gap.pause { font-size: .75rem; line-height: 1; color: #c9703a; background: repeating-linear-gradient(-45deg, #fff4ea 0 .5rem, #ffeadb .5rem 1rem); border-color: #ffc4a3; }
body.night .gap.pause { color: #ffb48a; background: repeating-linear-gradient(-45deg, #2a2420 0 .5rem, #26201c .5rem 1rem); border-color: #5a4030; }
@media (hover: hover) { .gap:hover { opacity: 1; transform: scale(1.01); } }

.nowline {
    position: absolute;
    left: -.45rem; right: 0;
    height: 0;
    border-top: 2px solid var(--berry);
    z-index: 4;
    pointer-events: none;
}
.nowline::before {
    content: '💗';
    position: absolute;
    left: -.55rem;
    top: -.72rem;
    font-size: .95rem;
    animation: beat-small 1.6s ease-in-out infinite;
}
@keyframes beat-small { 12% { transform: scale(1.25); } 24% { transform: scale(1); } 36% { transform: scale(1.15); } }

.empty-day {
    padding: 2rem 1rem;
    text-align: center;
    font-weight: 700;
    color: var(--mint);
}
.empty-day b { display: block; font-size: 2.4rem; margin-bottom: .3rem; }

.legend { display: flex; flex-wrap: wrap; gap: .4rem .9rem; margin-top: 1.2rem; font-size: .8rem; font-weight: 700; }
.legend span { display: inline-flex; align-items: center; gap: .3rem; }
.legend i { width: .7rem; height: .7rem; border-radius: .25rem; background: var(--c); }

/* type colors */
.t-uni { --c: var(--uni); --cd: var(--uni-d); }
.t-arbeit { --c: var(--arbeit); --cd: var(--arbeit-d); }
.t-sport { --c: var(--sport); --cd: var(--sport-d); }
.t-freizeit { --c: var(--freizeit); --cd: var(--freizeit-d); }
.t-unterwegs { --c: var(--unterwegs); --cd: var(--unterwegs-d); }
.t-termin { --c: var(--termin); --cd: var(--termin-d); }
.t-pruefung { --c: var(--pruefung); --cd: var(--pruefung-d); }
.t-schlaf { --c: var(--schlaf); --cd: var(--schlaf-d); }
.t-urlaub { --c: var(--urlaub); --cd: var(--urlaub-d); }
.t-ejw { --c: var(--ejw); --cd: var(--ejw-d); }
.t-date { --c: var(--date); --cd: var(--date-d); }

footer {
    position: relative;
    z-index: 1;
    padding: 1rem 1rem calc(1.25rem + env(safe-area-inset-bottom));
    font-size: .9rem;
    font-weight: 700;
    text-align: center;
    color: var(--wine);
}
.footer-heart { display: inline-block; cursor: help; transition: transform .2s; }
@media (hover: hover) { .footer-heart:hover { transform: scale(1.4) rotate(-10deg); } }
.updated { display: block; margin-top: .25rem; font-size: .75rem; opacity: .6; }

/* toast */
.toast {
    position: fixed;
    left: 50%;
    bottom: calc(1.5rem + env(safe-area-inset-bottom));
    z-index: 20;
    max-width: min(90vw, 24rem);
    padding: .85rem 1.2rem;
    font-weight: 800;
    text-align: center;
    color: #fff;
    background: var(--wine);
    border-radius: 1.2rem;
    box-shadow: 0 1rem 2rem -.6rem rgb(var(--shadow) / .6);
    transform: translate(-50%, 200%);
    visibility: hidden;
    transition: transform .45s cubic-bezier(.2, 1.4, .4, 1), visibility 0s .45s;
    pointer-events: none;
}
.toast.show { transform: translate(-50%, 0); visibility: visible; transition: transform .45s cubic-bezier(.2, 1.4, .4, 1); }

/* detail sheet */
.sheet {
    width: min(92vw, 22rem);
    padding: 1.6rem;
    text-align: center;
    color: var(--ink);
    background: var(--cream);
    border: 0;
    border-radius: 1.8rem;
    box-shadow: 0 2rem 4rem -1rem rgb(var(--shadow) / .55), 0 .4rem 0 #f3c3cf;
}
.sheet[open] { animation: pop-in .35s cubic-bezier(.2, 1.4, .4, 1); }
.sheet::backdrop { background: rgb(var(--shadow) / .3); backdrop-filter: blur(3px); }
.sheet-emoji { font-size: 2.6rem; }
.sheet h3 { margin: .3rem 0 .4rem; font-family: var(--display); font-weight: 400; font-size: 1.5rem; color: var(--berry); overflow-wrap: anywhere; }
.sheet-time { margin: 0 0 .6rem; font-weight: 800; color: var(--wine); }
.sheet-note { margin: 0 0 1.2rem; white-space: pre-line; overflow-wrap: anywhere; }
.sheet-note:empty { display: none; }

.burst { position: fixed; z-index: 30; pointer-events: none; animation: burst 1.3s cubic-bezier(.2, .8, .3, 1) forwards; }
@keyframes burst {
    0% { transform: translate(-50%, -50%) scale(.4); opacity: 1; }
    100% { transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(1.2) rotate(var(--r)); opacity: 0; }
}
.confetti { position: fixed; top: -3rem; z-index: 25; pointer-events: none; animation: fall linear forwards; }
@keyframes fall { to { transform: translate3d(var(--sway, 0), 112vh, 0) rotate(var(--spin, 360deg)); } }

.banner[hidden] { display: none; }
.banner {
    margin: 0 0 1rem;
    padding: .7rem 1rem;
    font-weight: 800;
    color: #fff;
    background: linear-gradient(120deg, var(--berry), #ff8fb1);
    border-radius: 1rem;
    box-shadow: 0 .25rem 0 var(--berry-deep);
    animation: pop-in .5s cubic-bezier(.2, 1.4, .4, 1) .4s both;
}

/* night mode: same cards, at night, under the stars */
body.night::before {
    background:
        radial-gradient(50rem 30rem at 50% -20%, #2f3447 0%, rgb(47 52 71 / 0) 65%),
        linear-gradient(#161821, #0e0f15);
}
body.night {
    --cream: #262936;
    --blush: #1c1e29;
    --berry: #ff7a9c;
    --berry-deep: #b83a60;
    --wine: #e6d7e0;
    --ink: #b4b8c9;
    --line: #3a3e50;
    --soft: #33283a;
    --shadow: 0 0 0;
    background: #0e0f15;
}
body.night .card { box-shadow: 0 1px 0 #343849 inset, 0 2rem 4rem -1rem rgb(0 0 0 / .8), 0 .4rem 0 #14151d; }
body.night .card::before { border-color: #3a3e50; }
body.night .now, body.night .day, body.night .btn.ghost { background: #1f2230; box-shadow: 0 .25rem 0 #14151d; }
body.night .now { border-color: #3a3e50; }
body.night .now.free { border-color: #2c5a4a; }
body.night .now.free .now-emoji { background: #1f3a31; }
body.night .day.selected { background: var(--berry); box-shadow: 0 .25rem 0 var(--berry-deep); }
body.night .day .num { color: var(--wine); }
body.night .day.selected .num { color: #fff; }
body.night .hourline { border-color: #2f3346; }
body.night .hourline span { color: #6d7186; }
body.night .gap { background: repeating-linear-gradient(-45deg, #1d2a26 0 .5rem, #1a2522 .5rem 1rem); border-color: #2c5a4a; color: #7fd1b0; }
body.night .stamp { box-shadow: 0 .35rem 0 var(--berry-deep), 0 0 1.5rem rgb(255 122 156 / .5); }
body.night .toast { background: #3a2a40; }
body.night h1 { color: var(--berry); }
body.night h1 em { color: #fff; }

/* modes */
body[data-mode="krank"] .now { border-color: #b9d8f0; box-shadow: 0 .3rem 0 #d6e8f6; }
body[data-mode="krank"] .now-emoji { background: #e6f1fb; }
body[data-mode="vermissen"] .stamp { animation-duration: .8s; }
body[data-mode="lernen"] .now-emoji, body[data-mode="fokus"] .now-emoji { background: #efe9fd; }

/* cat mode 🐱 */
body.cats h1 em::after { content: ' 🐱'; }

@media (max-width: 420px) {
    main { padding-inline: .75rem; gap: 1.3rem; }
    .card { padding: 1.25rem 1rem; border-radius: 1.6rem; }
    .card::before { inset: .45rem; border-radius: 1.25rem; }
    .hero, .cal { transform: none; }
    .days { gap: .25rem; }
    .day .num { font-size: 1.1rem; }
    .timeline { margin-left: 2.6rem; }
    .hourline span { left: -2.95rem; width: 2.5rem; font-size: .7rem; }
    .stamp { right: .9rem; }
}

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