:root{
  --ink:#2a2233; --paper:#fbf7f2; --pink:#ff5c8a; --line:#e6dcd2;
  --spr1:#ff8fab; --spr2:#ffd166; --spr3:#8fd3ff; --spr4:#9ee6b4; --spr5:#c9a7ff;
}
*{ box-sizing:border-box; }
html,body{ margin:0; }
body{ background:var(--paper); color:var(--ink); font-family:"Nunito",system-ui,sans-serif; }
button,select,input,textarea{ font:inherit; color:inherit; }

/* ---------- site header ---------- */
.site-head{ display:flex; align-items:center; gap:12px; padding:14px 16px; background:#fff; border-bottom:2px solid var(--ink); }
.logo{ font-family:"Fredoka",sans-serif; font-weight:700; font-size:24px; text-decoration:none; color:var(--ink); display:flex; align-items:center; gap:8px; }
.logo span{ color:var(--pink); }
.tagline{ font-size:14px; opacity:.75; }

.wrap{ max-width:1200px; margin:0 auto; padding:18px 16px 60px; }
.intro h1{ font-family:"Fredoka",sans-serif; font-size:clamp(24px,3.4vw,36px); margin:6px 0 4px; }
.intro p{ margin:0 0 16px; max-width:70ch; }

/* ---------- controls ---------- */
.controls{ display:flex; flex-wrap:wrap; gap:10px 14px; align-items:center; background:#fff; border:2px solid var(--ink);
  border-radius:16px; padding:12px 14px; box-shadow:4px 4px 0 var(--ink); margin-bottom:18px; }
.monthnav{ display:flex; align-items:center; gap:6px; }
.monthnav select{ padding:6px 8px; border:2px solid var(--ink); border-radius:10px; background:#fff; font-weight:800; }
.iconbtn{ width:36px; height:36px; border:2px solid var(--ink); border-radius:10px; background:#fff; cursor:pointer; font-weight:800; }
.seg{ display:inline-flex; border:2px solid var(--ink); border-radius:999px; overflow:hidden; }
.seg button{ border:0; background:#fff; padding:6px 12px; cursor:pointer; font-weight:800; font-size:14px; }
.seg button + button{ border-left:2px solid var(--ink); }
.seg button[aria-pressed="true"]{ background:var(--ink); color:#fff; }
.opt{ display:flex; align-items:center; gap:6px; font-size:14px; font-weight:800; }
.opt select{ padding:5px 6px; border:2px solid var(--ink); border-radius:10px; background:#fff; }
.check{ display:flex; align-items:center; gap:6px; font-size:14px; font-weight:800; cursor:pointer; }
.check input{ width:18px; height:18px; accent-color:var(--pink); }
.actions{ display:flex; gap:10px; flex-wrap:wrap; margin-left:auto; }
.btn{ border:2px solid var(--ink); border-radius:12px; padding:8px 14px; font-weight:800; cursor:pointer; background:#fff;
  box-shadow:3px 3px 0 var(--ink); transition:transform .08s, box-shadow .08s; }
.btn:active{ transform:translate(3px,3px); box-shadow:none; }
.btn.primary{ background:var(--pink); color:#fff; }
.hint{ font-size:13px; opacity:.7; margin:-8px 0 14px; }

/* ---------- the calendar sheet ---------- */
.sheet-wrap{ container-type:inline-size; }
.page{ --bg:#fff; --soft:#ffe3ec; --cell:#ffd0de; --acc:#ff5c8a; --txt:#5a2a3c; --hol:#e0457a;
  position:relative; width:100%; aspect-ratio:11/8.5; overflow:hidden; background:var(--bg); color:var(--txt);
  border-radius:6px; box-shadow:0 1px 0 rgba(0,0,0,.08),0 12px 30px rgba(60,30,60,.12);
  padding:2.6cqw 3.2cqw 2.2cqw; display:flex; flex-direction:column;
  -webkit-print-color-adjust:exact; print-color-adjust:exact; }
.page.a4{ aspect-ratio:297/210; }
.deco{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none; z-index:0; }
.head,.grid,.foot{ position:relative; z-index:1; }
.head{ display:flex; align-items:center; gap:2.4cqw; margin-bottom:1.2cqw; }
.title{ font-family:"Fredoka",sans-serif; line-height:.95; flex:none; }
.title .m{ display:block; font-size:5cqw; font-weight:700; color:var(--acc); }
.title .y{ font-size:1.8cqw; font-weight:600; letter-spacing:.08em; }
.art{ height:10.5cqw; width:auto; flex:none; }
.art.placeholder{ height:7cqw; }
.treat{ font-family:"Fredoka"; font-size:1.15cqw; line-height:1.25; align-self:flex-end; margin-bottom:.6cqw; }
.treat small{ display:block; opacity:.7; font-weight:500; }
.treat b{ font-weight:600; }
.stamp{ margin-left:auto; display:flex; align-items:center; gap:.9cqw; }
.seal{ width:6.2cqw; aspect-ratio:1; border-radius:50%; display:grid; place-items:center; background:#fff;
  border:.28cqw solid var(--acc); color:var(--acc); font-family:"Kiwi Maru",serif; font-size:3.4cqw; line-height:1; transform:rotate(-8deg); }
.seal.two{ writing-mode:vertical-rl; font-size:2.3cqw; }
.gloss{ font-family:"Fredoka"; font-weight:600; font-size:1.1cqw; line-height:1.3; }
.gloss b{ display:block; font-size:1.5cqw; }

.grid{ flex:1; display:grid; grid-template-columns:repeat(7,1fr); grid-auto-rows:1fr; grid-template-rows:auto;
  background:#fff; border:.2cqw solid var(--cell); border-radius:1.3cqw; overflow:hidden; }
.dow{ text-align:center; font-family:"Fredoka"; font-weight:600; font-size:1.7cqw; padding:.5cqw 0; background:var(--soft); }
.cell{ position:relative; padding:.45cqw .6cqw; border-top:.14cqw solid var(--cell); border-left:.14cqw solid var(--cell);
  cursor:pointer; min-width:0; overflow:hidden; }
.cell:nth-child(7n+8){ border-left:none; }
.cell:hover{ background:color-mix(in srgb, var(--soft) 45%, #fff); }
.cell:focus-visible{ outline:.25cqw solid var(--acc); outline-offset:-.25cqw; }
.cell .n{ font-family:"Fredoka"; font-weight:600; font-size:2.8cqw; line-height:1.05; }
.cell.out{ cursor:default; }
.cell.out .n{ opacity:.28; }
.cell .hol{ display:block; font-size:1.05cqw; font-weight:800; margin-top:.15cqw; color:var(--hol); line-height:1.15; }
.cell .ev{ display:block; font-size:1.15cqw; font-weight:800; margin-top:.3cqw; padding:.1cqw .5cqw; border-radius:.6cqw;
  background:var(--soft); line-height:1.25; white-space:pre-wrap; overflow-wrap:anywhere; }
.foot{ margin-top:.9cqw; font-size:.95cqw; display:flex; gap:1.2cqw; justify-content:space-between; align-items:center; }
.foot .site{ opacity:.55; white-space:nowrap; }
.fact{ font-weight:800; }
.fact i{ font-family:"Kiwi Maru"; font-style:normal; font-size:1.15em; }
.nokanji .stamp, .nokanji .fact{ display:none; }

/* month palettes */
.pal-jan{ --bg:#f1f7ff; --soft:#dfeafe; --cell:#cadcfa; --acc:#4f7fe0; --txt:#27365c; --hol:#4f7fe0; }
.pal-feb{ --bg:#fff4f6; --soft:#ffdfe7; --cell:#ffc9d7; --acc:#ff4f7e; --txt:#5a2a3c; --hol:#e0457a; }
.pal-mar{ --bg:#f3fbef; --soft:#dff3d6; --cell:#c8e8ba; --acc:#4caf5a; --txt:#2d4a2a; --hol:#3e9a4c; }
.pal-apr{ --bg:#eef8fd; --soft:#d6effb; --cell:#bfe3f5; --acc:#3a9fd6; --txt:#1f4256; --hol:#2d86b8; }
.pal-may{ --bg:#fdf3fb; --soft:#f7dcf1; --cell:#efc6e6; --acc:#c95bb5; --txt:#4d2445; --hol:#b44aa0; }
.pal-jun{ --bg:#fff4f4; --soft:#ffe0e0; --cell:#ffc7c7; --acc:#ef4f5f; --txt:#5a2a30; --hol:#d9404f; }
.pal-jul{ --bg:#f0fbfb; --soft:#d4f3f2; --cell:#b9e9e6; --acc:#1fb3a8; --txt:#1c4644; --hol:#159a90; }
.pal-aug{ --bg:#f5fcf1; --soft:#ffdfe3; --cell:#cfeec3; --acc:#e8475f; --txt:#2d4a2a; --hol:#e8475f; }
.pal-sep{ --bg:#fff7ef; --soft:#ffe4cc; --cell:#ffd2ad; --acc:#d9534f; --txt:#5b3420; --hol:#c94440; }
.pal-oct{ --bg:#fff4e8; --soft:#ffe0bf; --cell:#ffcc99; --acc:#f07a1a; --txt:#4a2a14; --hol:#8a4fd0; }
.pal-nov{ --bg:#fff5ea; --soft:#ffe6cf; --cell:#ffd3ad; --acc:#f07a2c; --txt:#5b3420; --hol:#d9542a; }
.pal-dec{ --bg:#f2faf6; --soft:#ffe1e3; --cell:#cdebdd; --acc:#e24a5a; --txt:#2f4a3e; --hol:#e24a5a; }

/* ink saver: white paper, colour only in lines and text */
.ink .page{ --bg:#fff; }
.ink .page .dow{ background:#fff; border-bottom:.14cqw solid var(--cell); }
.ink .page .cell .ev{ background:transparent; border:.12cqw solid var(--cell); }

/* ---------- day editor ---------- */
dialog{ border:2px solid var(--ink); border-radius:16px; padding:18px; box-shadow:5px 5px 0 var(--ink); max-width:360px; width:calc(100% - 32px); }
dialog::backdrop{ background:rgba(42,34,51,.35); }
dialog h2{ font-family:"Fredoka"; margin:0 0 8px; font-size:20px; }
dialog textarea{ width:100%; min-height:72px; border:2px solid var(--ink); border-radius:10px; padding:8px; resize:vertical; }
dialog .row{ display:flex; gap:8px; justify-content:flex-end; margin-top:12px; }
dialog .small{ font-size:12px; opacity:.7; margin:6px 0 0; }

.about{ margin-top:28px; display:grid; gap:14px; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); }
.about div{ background:#fff; border:2px solid var(--ink); border-radius:14px; padding:12px 14px; }
.about h3{ font-family:"Fredoka"; margin:0 0 4px; font-size:17px; }
.about p{ margin:0; font-size:14px; }
/* ---------- desktop app section ---------- */
.applink{ color:var(--pink); font-weight:800; white-space:nowrap; }
.appsec{ margin-top:28px; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.15fr); gap:24px; align-items:center;
  background:#fff; border:2px solid var(--ink); border-radius:18px; padding:22px; box-shadow:5px 5px 0 var(--ink); }
.appsec h2{ font-family:"Fredoka",sans-serif; font-size:clamp(22px,2.6vw,30px); margin:6px 0 8px; line-height:1.15; }
.appsec p{ margin:0 0 10px; }
.badge{ display:inline-block; background:var(--spr2); border:2px solid var(--ink); border-radius:999px; padding:3px 12px; font-size:13px; font-weight:800; }
.appfeat{ margin:0 0 14px; padding-left:20px; }
.appfeat li{ margin:3px 0; }
.howto{ background:var(--paper); border-radius:12px; padding:10px 14px; font-size:14px; margin-top:12px; }
.howto p{ margin:0 0 4px; }
.howto ol{ margin:0; padding-left:20px; }
.howto li{ margin:3px 0; }
.desk{ position:relative; aspect-ratio:16/10; border:2px solid var(--ink); border-radius:14px; overflow:hidden; background:linear-gradient(135deg,#bfe6ff,#ffd6e3); }
.desk-bg i{ position:absolute; background:#fff; border-radius:8px; opacity:.55; }
.desk-bg i:nth-child(1){ left:5%; top:8%; width:42%; height:62%; }
.desk-bg i:nth-child(2){ left:10%; top:76%; width:30%; height:8%; opacity:.4; }
.desk-bg i:nth-child(3){ left:0; bottom:0; width:100%; height:7%; border-radius:0; opacity:.8; }
.desk-win{ position:absolute; right:4%; top:5%; width:52%; background:#fff; border:2px solid var(--ink); border-radius:10px; overflow:hidden; box-shadow:4px 4px 0 var(--ink); }
.desk-bar{ display:flex; align-items:center; gap:5px; font-size:10px; font-weight:800; padding:3px 7px; border-bottom:1.5px solid #e6dcd2; }
.desk-bar span{ margin-left:auto; opacity:.6; }
.desk-win img{ display:block; width:100%; height:auto; }
@media (max-width:820px){ .appsec{ grid-template-columns:1fr; } .desk-win{ width:62%; } }
.app .appsec{ display:none; }
.site-foot{ text-align:center; font-size:13px; opacity:.7; padding:24px 16px; }
.toast{ position:fixed; left:50%; bottom:20px; transform:translateX(-50%); background:var(--ink); color:#fff; padding:8px 14px; border-radius:10px; font-weight:800; max-width:calc(100vw - 32px); text-align:center; z-index:100; opacity:0; transition:opacity .2s; pointer-events:none; }
.toast.show{ opacity:1; }

.swipe{ display:none; }
@media (max-width:720px){
  .actions{ margin-left:0; }
  .treat{ display:none; }
  .tagline{ display:none; }
  .swipe{ display:block; font-size:13px; font-weight:800; opacity:.7; margin:-6px 0 8px; }
  .sheet-scroll{ overflow-x:auto; -webkit-overflow-scrolling:touch; margin:0 -16px; padding:0 16px 8px; }
  .sheet-wrap{ min-width:680px; }
}

/* ---------- print: only the sheet ---------- */
@media print{
  body{ background:#fff; }
  .site-head,.intro,.controls,.hint,.about,.appsec,.site-foot,dialog,.toast{ display:none !important; }
  .wrap{ max-width:none; padding:0; }
  .page{ border-radius:0; box-shadow:none; width:100vw; height:100vh; aspect-ratio:auto; }
  .cell:hover{ background:none; }
}

/* legal pages */
.doc{ max-width:760px; line-height:1.65; }
.doc h1{ font-family:"Fredoka",sans-serif; font-size:32px; margin:8px 0 0; }
.doc h2{ font-family:"Fredoka",sans-serif; font-size:20px; margin:28px 0 6px; }
.doc .updated{ opacity:.7; margin-top:4px; font-size:14px; }
.doc a, .site-foot a{ color:inherit; }
[hidden]{ display:none !important; }

/* ---------- installed app: the calendar is the main thing and scales to the window ---------- */
.app-only{ display:none; }
.app .app-only{ display:inline-block; }
.app .site-head,.app .intro,.app .hint,.app .about,.app .site-foot,.app .swipe{ display:none; }
.app .wrap{ max-width:none; padding:8px 10px; }
.app .controls{ gap:6px 10px; padding:6px 8px; margin-bottom:8px; border-radius:12px; box-shadow:3px 3px 0 var(--ink); }
.app .controls .opt,.app .controls .check,.app #share{ display:none; }
.app.opts-open .controls .opt,.app.opts-open .controls .check{ display:flex; }
.app.opts-open #share{ display:inline-block; }
.app .btn{ padding:5px 10px; box-shadow:2px 2px 0 var(--ink); }
.app .iconbtn{ width:30px; height:30px; }
.app .sheet-scroll{ overflow:visible; margin:0; padding:0; }
.app .sheet-wrap{ min-width:0; margin:0 auto; }
@media print{ .sheet-wrap{ width:auto !important; } }
@media (max-width:620px){ .app .btn,.app .seg button,.app .monthnav select{ font-size:12px; padding:3px 7px; } .app .iconbtn{ width:26px; height:26px; } .app .controls{ gap:4px 6px; } }
@media (max-width:620px){ .app .lbl,.app #popout{ display:none; } .app .actions{ margin-left:auto; flex-wrap:nowrap; gap:6px; } .app .controls{ flex-wrap:wrap; } }

/* ---------- typing straight into a day ---------- */
.cell[data-d]{ cursor:text; }
.cell[data-d]:not(.has):not(.editing):hover::after{ content:"+ Add plan"; position:absolute; left:.6cqw; bottom:.5cqw;
  font-size:max(10px,.95cqw); font-weight:800; color:var(--acc); opacity:.7; pointer-events:none; }
.cell.editing{ background:var(--soft); }
.inline-ed{ position:fixed; height:76px; z-index:50;
  font:800 14px/1.3 "Nunito",system-ui,sans-serif; color:var(--ink); background:#fff;
  border:2px solid var(--pink); border-radius:8px; padding:4px 6px; resize:none; box-shadow:0 4px 14px rgba(60,30,60,.18); outline:none; }
@media print{ .cell[data-d]:hover::after{ content:none; } }

.app .cell .ev{ font-size:max(10px,1.15cqw); }
.app .cell .hol{ font-size:max(9px,1.05cqw); }
@media screen{ .cell.today .n{ display:inline-grid; place-items:center; min-width:1.9em; height:1.9em; margin:-.2em 0 0 -.25em; border-radius:50%; background:var(--acc); color:#fff; } }

/* app: a light, slim toolbar so the calendar is the star (2026-09-26 owner feedback) */
.app .controls{ background:transparent; border:0; box-shadow:none; padding:0 2px; margin-bottom:6px; gap:4px 6px; }
.app .controls .btn,.app .iconbtn,.app .monthnav select,.app .seg,.app .controls .opt select{ border:1.5px solid #d9cfc6; box-shadow:none; background:#fff; }
.app .btn,.app .seg button,.app .monthnav select{ font-size:12px; padding:3px 9px; }
.app .monthnav select{ font-weight:700; }
.app .iconbtn{ width:26px; height:26px; border-radius:8px; }
.app .seg button + button{ border-left:1.5px solid #d9cfc6; }
.app .seg button[aria-pressed="true"]{ background:#fff0f4; color:var(--pink); }
.app .btn.primary{ background:var(--pink); border-color:var(--pink); color:#fff; }
.app .btn:active{ transform:none; }
.app.opts-open .controls{ background:#fff; border:1.5px solid #d9cfc6; border-radius:10px; padding:6px; }
.app .dow{ font-size:max(13px,1.7cqw); }
@media screen{ .app .cell.today{ background:color-mix(in srgb, var(--soft) 70%, #fff); box-shadow:inset 0 0 0 .3cqw var(--acc); } }
.app .monthnav{ gap:4px; }

/* ---------- app: "Coming up" panel under the calendar ---------- */
.upnext{ display:none; }
.app .upnext:not([hidden]){ display:block; max-width:100%; margin:8px auto 0; background:#fff; border:1.5px solid #d9cfc6; border-radius:12px;
  padding:10px 12px; font-size:13px; }
.up-count{ display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; padding-bottom:8px; border-bottom:1.5px dashed #e6dcd2; }
.up-when{ background:var(--pink); color:#fff; font-weight:800; border-radius:999px; padding:2px 10px; font-size:12px; }
.up-count b{ font-family:"Fredoka",sans-serif; font-size:17px; }
.up-count small{ opacity:.65; font-weight:700; }
.up-list{ list-style:none; margin:6px 0 0; padding:0; }
.up-list li{ display:grid; grid-template-columns:92px 1fr auto; gap:8px; padding:3px 0; align-items:baseline; }
.up-list span{ opacity:.65; font-weight:700; font-size:12px; }
.up-list b{ font-weight:800; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.up-list b.is-hol{ color:#b43a64; }
.up-list em{ font-style:normal; font-size:12px; opacity:.6; }
.up-empty{ margin:0; opacity:.7; font-weight:700; }
@media print{ .upnext{ display:none !important; } }