/* Landing demo: the prototype app (design/prototyp/app.css, 12th round) rendered inside a frame.
   Differences from the prototype: the app has a fixed inner size (--aw × --ah) and is scaled to the frame,
   viewport units became app-size variables, media queries became container queries, the editor is positioned
   inside the app, and there is a scripted cursor. Tokens live in landing.css. */

/* ---- frame and inner app ---- */
.demo{position:relative;container:app/inline-size;overflow:hidden;box-shadow:0 0 0 1px var(--line);background:var(--page);aspect-ratio:1280/840}
.demo:focus-visible{outline:2px solid var(--line);outline-offset:4px}
.demo noscript p{margin:0;padding:24px}
@container demo (max-width:700px){.demo{aspect-ratio:auto;height:620px}}
.demo-w{container:demo/inline-size}
.app.paused,.app.paused *{animation-play-state:paused!important}
.app{--aw:1280px;--ah:840px;--railw:64px;--bar:52px;--s:1;position:absolute;left:0;top:0;width:var(--aw);height:var(--ah);transform:scale(var(--s));transform-origin:0 0;display:flex;overflow:hidden;font:15px/1.5 var(--font);color:var(--ink);background:var(--page);font-variant-numeric:tabular-nums}
.app svg.i{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round;flex:none;display:block}

/* ---- rail: dark strip on the left, year as a logo block, arrows, 1 Year / 2 Months, theme ---- */
.bar{display:flex;flex-direction:column;align-items:center;gap:8px;width:var(--railw);padding:8px 0;flex:none;position:relative;z-index:30;background:var(--rail);color:var(--rail-fg)}
.ynav{display:flex;flex-direction:column;align-items:center;gap:8px}
.ylab{display:grid;grid-template-columns:1fr 1fr;width:56px;height:56px;padding:5px 7px 6px;background:var(--pond);color:var(--on-acc);font:italic 400 24px/1 var(--serif);letter-spacing:-.02em}
.ylab span{display:flex;align-items:center;justify-content:center}
.ylab span:nth-child(odd){justify-content:flex-start}
.ylab span:nth-child(even){justify-content:flex-end}
.yarr{display:flex;width:56px;box-shadow:inset 0 0 0 1px var(--rail-line)}
.yarr button{width:28px;height:28px;display:grid;place-items:center}
.yarr button+button{box-shadow:inset 1px 0 0 var(--rail-line)}
.yarr button:disabled{opacity:.3;cursor:default}
.tbtn{width:56px;height:28px;font-size:12px;font-weight:500;color:var(--on-acc);background:var(--yellow)}
.seg{display:flex;flex-direction:column;margin-top:8px}
.seg button{width:56px;height:48px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;font-size:11px;font-weight:500;line-height:1;box-shadow:inset 0 0 0 1px var(--rail-line)}
.seg button+button{margin-top:-1px}
.seg button i{font:italic 400 18px/1 var(--serif)}
.seg button.hov{background:var(--rail-tone)}
.seg button[aria-pressed="true"]{color:var(--on-acc);background:var(--lime);box-shadow:inset 0 0 0 1px var(--lime);position:relative;z-index:1}
.ibtn{width:56px;height:36px;margin-top:auto;display:grid;place-items:center;box-shadow:inset 0 0 0 1px var(--rail-line)}
.stage{flex:1;position:relative;min-height:0;min-width:0}
.tl{position:absolute;inset:0;overflow:hidden}
/* view change = zoom: the year grows toward the clicked month and fades, Months comes to the front (.92 -> 1).
   Only transform and opacity move. Pond card transition curve .19,1,.22,1 for 350 ms. */
.tl{transition:opacity .35s cubic-bezier(.19,1,.22,1),transform .35s cubic-bezier(.19,1,.22,1)}
.tl.lm{opacity:0;transform:scale(.92);pointer-events:none}
.tl.lm[hidden]{display:none}
.stage.months .ly{opacity:0;transform:scale(1.6)}
.stage.months .lm{opacity:1;transform:none}
.toast{position:absolute;left:50%;bottom:24px;transform:translateX(-50%);background:var(--ink);color:var(--page);padding:7px 14px;font-size:13.5px;font-weight:500;z-index:70;opacity:0;transition:opacity var(--hov)}
.toast.on{opacity:1}

/* ---- Year: day column + 4 quarters as Pond cards (numbered serif heading above a 1px frame) ---- */
.yr{--chrome:54px;--avail:calc(var(--aw) - var(--railw));--rowh:calc(round(down,calc((var(--ah) - var(--chrome)) / 31 - 1px),2px) + 1px);--lh:calc((var(--rowh) - 1px) / 2);
  --mw:round(down,calc((var(--avail) - 134px) / 12),1px);--fs:clamp(9.5px,calc(var(--rowh) * .43),12px);
  display:flex;gap:10px;padding:8px 12px 0 8px;min-height:100%;align-items:flex-start}
.dlc{flex:none;width:18px}
.dh{display:block}
.dh,.qh{height:36px}
.q{flex:none;display:flex;flex-direction:column}
.qh{display:flex;gap:6px;padding:0 1px}
.qb{display:flex;gap:6px;padding:0 1px;box-shadow:0 0 0 1px var(--line);background:var(--page)}
.mc{position:relative;flex:none;width:var(--mw);display:flex;flex-direction:column}
.mh{position:relative;flex:none;width:var(--mw);height:36px;text-align:left;padding:0 0 8px;font:400 clamp(13px,calc(var(--mw) * .15),17px)/20px var(--serif);letter-spacing:-.01em;color:var(--ink);white-space:nowrap;overflow:hidden;display:flex;align-items:flex-end;gap:6px}
.mh .mn{color:var(--ink2);flex:none}
.mh .ml{padding:0 4px;margin-left:-4px}
.mh.hov .ml{background:var(--tone)}
.mh.cur .ml{background:var(--lime);color:var(--on-acc)}
.dl{height:var(--rowh);line-height:var(--rowh);font-size:11px;font-weight:500;color:var(--ink2);text-align:right;padding-right:2px}
.cell{position:relative;display:flex;align-items:flex-start;height:var(--rowh);min-width:0;padding:0 3px 1px 4px;text-align:left;color:var(--ink);overflow:hidden;transition:background-color var(--hov) var(--ease)}
.cell::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--rule);pointer-events:none}
.cell.x::after,.cell.sa::after,.cell.f::after,.mc .cell:last-child::after{display:none}
.cell.we{background:var(--band)}
.cell.f{background:radial-gradient(circle at 3px 50%,var(--rule) 0 1px,transparent 1.6px) 0 0/33.4% 100%}
.cell.f.we{background-color:var(--band)}
.mc.fut{background:radial-gradient(circle at 3px 50%,var(--rule) 0 1px,transparent 1.6px) 0 0/33.4% var(--rowh)}
.mc.fut .cell.f{background:none}
.mc.fut .cell.f.we{background:var(--band)}
.fill{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;pointer-events:none;color:var(--ink)}
.fill i{font:italic 400 15px/20px var(--serif);color:var(--ink);background:var(--page);padding:0 4px}
.il{width:min(86%,120px);height:auto;display:block;stroke:currentColor;stroke-width:1;stroke-linejoin:round;fill:currentColor}
.il *{vector-effect:non-scaling-stroke}
.il .k{fill:var(--page)}.il .l{fill:var(--lime)}.il .v{fill:var(--lav)}.il .y{fill:var(--yellow)}.il .o{fill:var(--orange)}.il .b{fill:var(--band)}
.il text{font:italic 400 24px/1 var(--serif);stroke:none;fill:var(--ink);text-anchor:middle;dominant-baseline:central}
button.cell.hov{background:var(--tone)}
.cell.td{background:var(--yellow);color:var(--on-acc)}
.cell.td.hov{background:var(--yellow)}
.cell .in{display:block;width:100%;height:100%;font-size:var(--fs);line-height:var(--lh);font-weight:500;letter-spacing:-.005em;overflow-wrap:break-word;hyphens:manual}
.cell.one .in{padding-top:round(up,calc(var(--lh) / 2),1px)}
.yr.measure .cell .in{overflow-wrap:normal}
/* the measure pass found room without breaking words, so keep it that way (break-word would split "Mountai/ns" next to the mood square) */
.cell.ph:not(.tight) .in{overflow-wrap:normal}
.cell.td .in{font-weight:600}
.cell .mi{float:right;height:var(--lh);margin-left:3px;display:flex;align-items:center}
.cell .mi svg{display:none}
.cell .mi::before{content:"";width:7px;height:7px;background:var(--mf);box-shadow:inset 0 0 0 1px rgb(0 0 0/.45)}
.cell .th{float:left;display:block;width:round(calc((var(--lh) * 2 - 4px) * 1.2),1px);height:calc(var(--lh) * 2 - 4px);margin:2px 4px 0 0;box-shadow:inset 0 0 0 1px var(--line)}
.cell .th img{display:block;width:100%;height:100%;object-fit:cover;padding:1px}
.cell.tight .th{display:none}

/* mood: one colour per step (orange, lavender, lime) */
.mi{display:inline-flex;flex:none;align-items:center}
.mi[data-m="1"]{--mf:var(--mf1)}
.mi[data-m="2"]{--mf:var(--mf2)}
.mi[data-m="3"]{--mf:var(--mf3)}
.card .mi svg{display:none}
.card .mi::before{content:"";width:10px;height:10px;background:var(--mf);box-shadow:inset 0 0 0 1px rgb(0 0 0/.45)}

/* ---- Months: 12 columns, day cards, photos in an ink frame ---- */
.row{display:flex;align-items:stretch;height:100%;width:max-content;padding:0 12px;--colw:round(clamp(300px,calc((var(--aw) - var(--railw) - 24px) / 4),380px),1px);transition:transform 1.6s var(--ease)}
.col{flex:none;width:var(--colw);height:100%;display:flex;flex-direction:column;padding:14px 10px 16px}
.colh{display:flex;align-items:center;gap:8px;height:38px;padding:0 0 10px;margin:0;white-space:nowrap}
.colh .mn{font:400 26px/28px var(--serif);letter-spacing:-.02em;color:var(--ink2)}
.colh b{font:400 26px/28px var(--serif);letter-spacing:-.02em;color:var(--ink)}
.colh.cur b{background:var(--lime);color:var(--on-acc);padding:0 6px;margin-left:-4px}
.colh .lab{display:inline-flex;margin-left:auto;font-size:13px;font-weight:500;line-height:28px;color:var(--on-acc);font-style:normal}
.colh .lab i{font-style:normal;background:var(--lav);width:28px;text-align:center}
.colh .lab em{font-style:normal;background:var(--lime);width:64px;text-align:center}
.col.f .colh b{color:var(--ink2);font-weight:300}
.cb{position:relative;flex:1;min-height:0;overflow:hidden;box-shadow:0 0 0 1px var(--line);background:var(--page);padding-bottom:40px;container-type:inline-size}
/* bodky v strede dlaždíc, dlaždice od stredu rámu: rovnaký okraj vľavo aj vpravo */
.cb.fut{background:radial-gradient(circle at 12px 12px,var(--rule) 0 1px,transparent 1.6px) 50% 0/24px 24px}
.cb .fill{padding:0 24px}
.cb .il{width:180px}
.cb .fill i{font-size:19px;line-height:24px}
.card{position:relative;display:block;width:100%;text-align:left;color:var(--ink);transition:background-color var(--hov) var(--ease)}
.card::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--rule)}
.card.hov{background:var(--tone)}
.card:focus-visible{outline:2px solid var(--line);outline-offset:-2px}
.card .ln{display:flex;align-items:flex-start;gap:8px;min-height:44px;padding:12px 14px}
/* EN dátum "Wed 30" má 49 px: stĺpec 52 px, nikdy na 2 riadky */
.card time{flex:none;width:52px;white-space:nowrap;font-size:13px;line-height:20px;font-weight:500;color:var(--ink2)}
.card .t{flex:1;min-width:0;font-size:15px;line-height:20px;font-weight:500;text-wrap:pretty}
.card .t.none{color:var(--ink2);font-weight:400}
/* štvorček nálady v strede prvej linky textu; dnes: žltý blok 4 px na obe strany, dátum na rovnakom x */
.card .mi{height:20px}
.card.td time{color:var(--on-acc);background:var(--yellow);padding:0 4px;margin:0 -4px;width:60px;font-weight:600}
.print{display:block;margin:14px 14px 2px;height:round(down,calc((100cqw - 28px) / var(--a,1.333)),1px);box-shadow:0 0 0 1px var(--line);transition:box-shadow var(--hov) var(--ease);background:var(--page)}
.print img{display:block;width:100%;height:100%;object-fit:cover;background:var(--tone)}
.card.hov .print{box-shadow:0 0 0 1px var(--line),6px 6px 0 var(--lav)}
.card.ph .ln{padding-top:8px}

/* ---- editor next to the day: Pond window, 1px frame, sharp corners, lavender offset block ---- */
.ed{position:absolute;z-index:50;width:316px;padding:14px 16px 14px;background:var(--page);color:var(--ink);box-shadow:0 0 0 1px var(--line),8px 8px 0 var(--lav);animation:quadw .21s step-end both}
.ed .x{position:absolute;top:0;right:0;width:32px;height:32px;display:grid;place-items:center;background:var(--yellow);color:var(--on-acc)}
.ed .x svg{width:18px;height:18px;stroke-width:2.2}
.ed .eh{display:flex;align-items:baseline;justify-content:space-between;gap:10px;font-size:13px;line-height:24px;color:var(--ink2);margin:0 36px 10px 0;padding-bottom:8px;border-bottom:1px dashed var(--line)}
.ed .eh b{font:400 19px/24px var(--serif);letter-spacing:-.01em;color:var(--ink)}
.ed .cnt{font-variant-numeric:tabular-nums}
.ed .cnt.full{font-weight:600;background:var(--yellow);color:var(--on-acc);padding:0 4px}
.ed .fld{display:flex;align-items:center;width:100%;height:36px;border-bottom:1px solid var(--line);color:var(--ink);font:500 17px/24px var(--font);padding:5px 0 6px;white-space:nowrap;overflow:hidden}
.ed .fld.on{border-bottom-width:2px;padding-bottom:5px}
.ed .fld .ph{color:var(--ink2);opacity:.8}
/* caret: 1px ink, blinks only while the field is active */
.ed .fld.on::after{content:"";width:1px;height:22px;margin-left:1px;background:var(--ink);animation:caret 1s step-end infinite}
.ed .em{display:flex;align-items:center;gap:6px;margin-top:12px}
.ed .mb{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;color:var(--ink);box-shadow:inset 0 0 0 1px var(--line);transition:background-color .35s var(--ease)}
.ed .mb svg{width:20px;height:20px;stroke-width:1.75}
.ed .mb.hov{background:color-mix(in srgb,var(--mf) 35%,transparent)}
.ed .mb[aria-pressed="true"]{background:var(--mf);color:var(--on-acc);box-shadow:inset 0 0 0 1px rgb(0 0 0/.45)}
.ed .mb svg circle{fill:none}
.ed .mb[data-v="1"]{--mf:var(--mf1)}.ed .mb[data-v="2"]{--mf:var(--mf2)}.ed .mb[data-v="3"]{--mf:var(--mf3)}
.ed .ok{margin-left:auto;height:36px;display:flex;align-items:stretch;font-size:14px;font-weight:500;color:var(--on-acc);background:var(--lime);transition:background-color 0s .11s}
.ed .ok span{display:grid;place-items:center;width:80px}
.ed .ok .ic{width:36px;padding:0;background:var(--orange)}
.ed .ok .ic svg{stroke-width:2.2}
.ed .ok.hov{background:var(--lav)}

/* ---- scripted cursor: Lucide mouse-pointer-2, moves on transform only ---- */
.ptr{position:absolute;left:0;top:0;z-index:60;width:22px;height:22px;pointer-events:none;transition:transform .55s var(--ease);will-change:transform}
.ptr svg{width:22px;height:22px;fill:var(--page);stroke:var(--ink);stroke-width:1.5;stroke-linejoin:round;display:block;transition:transform .12s var(--ease);transform-origin:4px 3px}
.ptr.down svg{transform:scale(.8)}
.ptr.off{opacity:0;transition:transform .55s var(--ease),opacity .2s}

/* ---- motion: one curve, step frames (Pond) ---- */
@keyframes draw{from{clip-path:inset(100% 0 0 0)}to{clip-path:inset(-10% 0 0 0)}}
.fill .il{animation:draw .4s steps(5,end) .15s both}
@keyframes quadw{0%{clip-path:polygon(-4% -4%,-4% -4%,-4% -4%)}.001%,33.332%{clip-path:polygon(-4% -4%,52% -4%,52% 52%,-4% 52%)}33.333%,66.665%{clip-path:polygon(-4% -4%,106% -4%,106% 52%,-4% 52%)}66.666%,99.999%{clip-path:polygon(-4% -4%,106% -4%,106% 52%,52% 52%,52% 106%,-4% 106%)}100%{clip-path:none}}
@keyframes stamp{0%,60%{background-color:var(--lime)}100%{background-color:color-mix(in srgb,var(--lime) 45%,transparent)}}
.stamp{animation:stamp .45s step-end both;color:var(--on-acc)}
@keyframes quad{0%{clip-path:polygon(0 0,0 0,0 0,0 0,0 0,0 0)}.001%,33.332%{clip-path:polygon(0 0,50% 0,50% 50%,0 50%,0 50%,0 0)}33.333%,66.665%{clip-path:polygon(0 0,100% 0,100% 50%,0 50%,0 50%,0 0)}66.666%,99.999%{clip-path:polygon(0 0,100% 0,100% 50%,50% 50%,50% 100%,0 100%)}100%{clip-path:polygon(0 0,100% 0,100% 100%,100% 100%,0 100%,0 0)}}
.ylab.reveal{animation:quad .21s step-end both}
@keyframes build{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 -2% 0 0)}}
.yr.intro{animation:build .42s steps(12,end) .1s both}
@keyframes caret{50%{opacity:0}}
@keyframes rise{from{transform:translateY(100%)}to{transform:none}}

/* ---- phone: rail on top, year as an overview (dots, mood, photo), editor as a bottom sheet ---- */
@container app (max-width:700px){
  .app{--aw:100cqw;--ah:620px;--s:1;flex-direction:column}
  .bar{flex-direction:row;width:auto;height:var(--bar);padding:0 8px;gap:8px}
  .ynav{flex-direction:row;gap:8px}
  .ylab{width:40px;height:40px;padding:3px 5px 4px;font-size:15px}
  .yarr{flex-direction:column;width:24px}
  .yarr button{width:24px;height:20px}
  .yarr button+button{box-shadow:inset 0 1px 0 var(--rail-line)}
  .seg{flex-direction:row;margin:0 0 0 auto;gap:4px}
  .seg button{width:56px;height:36px;flex-direction:row;gap:5px;padding:0;font-size:12px}
  .seg button[data-v="months"]{width:80px}
  .seg button+button{margin:0}
  .seg button i{font-size:15px}
  .ibtn{margin:0;width:36px;height:36px}
  .yr{--chrome:calc(var(--bar) + 38px);--avail:var(--aw);--rowh:round(down,calc((var(--ah) - var(--chrome)) / 31),2px);--mw:round(down,calc((var(--avail) - 55px) / 12),1px);gap:4px;padding:4px 6px 0 3px}
  .dlc{width:14px}
  .dh,.qh,.mh{height:30px}
  .qh,.qb{gap:2px;padding:0}
  .mh{font-size:14px;padding:0 0 5px;justify-content:center;gap:0}
  .mh .ml{display:none}
  .mh .mn{color:var(--ink);font-style:italic;padding:0 3px}
  .mh.cur .mn{background:var(--lime);color:var(--on-acc)}
  @media (max-width:380px){.mh .mn{padding:0 1px}} /* 360 px phones: "10." needs the 4 px for 12 columns */
  .mh.hov .mn{background:var(--tone)}
  .fill{gap:0}
  .fill i{display:none}
  .il{width:24px}
  .dl{font-size:9px;padding-right:1px}
  .cell{padding:0 0 1px;justify-content:center}
  .cell .in{display:flex;align-items:center;justify-content:center;height:100%}
  .cell.one .in{padding:0}
  .cell .ct{display:none}
  .cell .mi{float:none;margin:0;height:auto}
  .cell .mi::before{width:9px;height:9px}
  .cell .th{float:none;width:calc(var(--mw) - 8px);height:15px;margin:0}
  .cell.e:not(:has(.mi)):not(:has(.th)) .in::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--ink2)}
  .cell.e:has(.th):has(.mi) .th{display:none}
  .row{--colw:calc(100cqw - 2 * round(7cqw,1px));padding:0 round(7cqw,1px)}
  .col{padding:12px 8px}
  .cb .fill{gap:8px}
  .cb .fill i{display:block}
  .ed{left:0;right:0;top:auto;bottom:0;width:auto;padding:16px 16px 14px;box-shadow:0 -1px 0 var(--line);transform-origin:bottom center;animation:rise .3s var(--ease)}
  .ed .mb{width:44px;height:44px}
  .ed .ok{height:40px}
  .ed .ok .ic{width:40px}
  .tbtn{width:52px;height:36px}
}