/* Fonts are stored with the app, so Tuppu looks right offline too. */
@font-face{font-family:"Bricolage Grotesque";src:url(../fonts/bricolage-grotesque-latin.woff2) format("woff2");font-weight:200 800;font-display:swap}
@font-face{font-family:"Figtree";src:url(../fonts/figtree-latin.woff2) format("woff2");font-weight:300 900;font-display:swap}

:root{
  --page:#EEF1EE;
  --bg:#FFFFFF; --surface:#F4F6F4; --fg:#111412; --muted:#69706B; --line:#E4E8E4;
  --mia:#D98E00; --mia-soft:#FFF3CC; --today-fg:#B87400; --today-soft:#FFF0C2; --switch-on:var(--mia-fill); --mia-fill:#E49D0A;
  --work:#7C3AED; --school:#2563EB; --personal:#16A34A;
  --work-soft:#F1EBFE; --school-soft:#E8EFFE; --personal-soft:#E5F6EA;
  --danger:#D92D20; --tool-handle:#B45F00;
  --c-red:#DC2626; --c-orange:#EA580C; --c-yellow:#CA8A04; --c-green:#16A34A; --c-blue:#2563EB; --c-purple:#7C3AED; --c-pink:#DB2777; --c-brown:#92400E;
  --display:"Bricolage Grotesque",ui-rounded,system-ui,sans-serif;
  --body:"Figtree",system-ui,-apple-system,"Segoe UI",sans-serif;
  color-scheme:light;
}
.app.dark{
  --bg:#0F1110; --surface:#1A1D1B; --fg:#F2F4F2; --muted:#9AA19C; --line:#2A2E2B;
  --mia:#FFC233; --mia-soft:#3A2E10; --today-fg:#FFC233; --today-soft:#3A2E10; --switch-on:var(--mia-fill); --mia-fill:#D99A22;
  --work:#A78BFA; --school:#60A5FA; --personal:#4ADE80;
  --tool-handle:#E8A33A;
  --c-red:#F87171; --c-orange:#FB923C; --c-yellow:#FACC15; --c-green:#4ADE80; --c-blue:#60A5FA; --c-purple:#A78BFA; --c-pink:#F472B6; --c-brown:#C08457;
  --work-soft:#2A2140; --school-soft:#1A2640; --personal-soft:#173322;
  color-scheme:dark;
}
html,body{height:100%}
body{margin:0}
body{background:var(--page);color:var(--fg);font-family:var(--body);font-size:15px;display:flex;align-items:center;justify-content:center;gap:40px;
  padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));padding-block:16px;box-sizing:border-box}
*{box-sizing:border-box}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;padding:0}
button:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--mia);outline-offset:2px}


.app{position:relative;width:390px;height:min(820px,100%);background:var(--bg);color:var(--fg);border-radius:36px;overflow:hidden;
  box-shadow:0 0 0 10px #111412,0 30px 60px rgba(0,0,0,.18);display:flex;flex-direction:column}
@media (max-width:760px){
  body{padding:0;gap:0}
  .app{width:100%;height:100%;border-radius:0;box-shadow:none}
}

/* top bar */
.top{display:flex;align-items:center;gap:8px;padding:14px 16px 8px}
.top h2{flex:1;margin:0;font-family:var(--display);font-size:20px;font-weight:700}
.ibtn{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;position:relative}
.ibtn:hover{background:var(--surface)}
.ibtn svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

.view{flex:1;overflow-y:auto;overflow-x:hidden;padding:0 16px 16px}
.muted{color:var(--muted)}
.pill{font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);background:var(--surface);padding:3px 8px;border-radius:6px}

/* calendar */
.month{display:flex;align-items:center;justify-content:space-between;margin:2px 0 10px}
.month b{font-family:var(--display);font-size:24px}
.month .nav{display:flex;gap:2px}
.week{display:grid;grid-template-columns:repeat(7,1fr);text-align:center;gap:2px;margin-bottom:12px}
.week .dn{font-size:12px;color:var(--muted);padding-bottom:4px}
.day{display:flex;flex-direction:column;align-items:center;gap:4px;padding:6px 0;border-radius:12px}
.day .n{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font-weight:600;font-variant-numeric:tabular-nums}
.day.today .n{color:var(--today-fg);background:var(--today-soft)}
.day.sel .n{background:var(--fg);color:var(--bg)}
.day.sel.today .n{background:var(--mia-fill);color:#fff}
.dots{display:flex;gap:3px;height:6px}
.dots i{width:6px;height:6px;border-radius:50%}
.filters{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:12px}
.chip{display:flex;align-items:center;gap:6px;font-size:13px;font-weight:500;padding:6px 10px;border-radius:999px;border:1px solid var(--line)}
.chip i{width:8px;height:8px;border-radius:50%}
.chip.off{opacity:.4}
.dayhead{font-size:13px;color:var(--muted);margin:4px 0 8px;display:flex;justify-content:space-between;gap:8px;min-width:0}
.dayhead .pill{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ev{display:flex;gap:12px;width:100%;text-align:left;padding:12px 4px;border-bottom:1px solid var(--line);align-items:center}
.ev .bar{width:4px;align-self:stretch;border-radius:2px}
.ev .txt{flex:1;min-width:0}
.cat{font-size:12px;font-weight:600}
.ev .name{font-weight:600;font-size:16px;margin:2px 0}
.ev .time{font-size:13px;color:var(--muted);font-variant-numeric:tabular-nums}
.empty{text-align:center;color:var(--muted);padding:40px 12px}
/* A screen opened for the first time: "Loading…" only shows if it takes longer than a moment. */
.empty.loading{animation:late 0s .3s backwards}
@keyframes late{from{visibility:hidden}}

/* detail */
.dhead{padding:4px 0 14px;border-bottom:1px solid var(--line)}
.dhead h3{font-family:var(--display);font-size:26px;margin:4px 0 0;line-height:1.15;text-wrap:balance}
.sec{padding:14px 0;border-bottom:1px solid var(--line)}
.sec .lbl{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.sec p{margin:0;line-height:1.5}
.file{display:flex;align-items:center;gap:10px;padding:10px;border:1px solid var(--line);border-radius:12px;margin-top:6px}
.file .ext{width:36px;height:36px;border-radius:8px;background:var(--surface);display:grid;place-items:center;font-size:11px;font-weight:700;color:var(--muted)}
.file .fn{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:500}
.prevnext{display:flex;justify-content:space-between;padding:12px 0;font-weight:600}
.prevnext button:disabled{opacity:.3;cursor:default}

/* tab bar */
.tabs{display:grid;grid-template-columns:repeat(5,1fr);border-top:1px solid var(--line);padding:6px 6px calc(10px + env(safe-area-inset-bottom,0px));background:var(--bg)}
.tab{display:flex;flex-direction:column;align-items:center;gap:3px;font-size:11px;font-weight:500;color:var(--muted);padding:6px 0;border-radius:14px}
.tab svg{width:24px;height:24px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.tab.on{color:var(--fg)}
.tab.on .ico{background:var(--mia-soft);color:var(--mia)}
.tab .ico{padding:3px 14px;border-radius:999px;display:grid;place-items:center}

/* drawer */
.scrim{position:absolute;inset:0;background:rgba(0,0,0,.35);opacity:0;pointer-events:none;transition:opacity .2s;z-index:5}
.scrim.on{opacity:1;pointer-events:auto}
.drawer{position:absolute;inset:0;background:var(--bg);z-index:6;transform:translateX(-102%);transition:transform .25s;display:flex;flex-direction:column;padding:14px 22px calc(18px + env(safe-area-inset-bottom,0px));overflow:hidden}
.drawer.on{transform:none}
.drawer .dclose{position:absolute;top:14px;left:16px}
.drawer .who{display:flex;flex-direction:column;align-items:center;text-align:center;padding:6px 0 12px}
.drawer .who .avatar{width:64px;height:64px;font-size:22px}
.gearbtn{color:var(--mia)}
.avatar{width:64px;height:64px;border-radius:50%;background:var(--surface);border:1px solid var(--line);display:grid;place-items:center;font-family:var(--display);font-size:22px;font-weight:700}
.who{padding-bottom:18px;border-bottom:1px solid var(--line);margin-bottom:8px}
.who b{display:block;font-size:16px;margin-top:7px}
.mrow{display:flex;align-items:center;gap:14px;width:100%;padding:13px 4px;font-weight:500;text-align:left;border-radius:10px}
.mrow:hover{background:var(--surface)}
.mrow svg{width:21px;height:21px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.sep{height:1px;background:var(--line);margin:8px 0}
.ver{margin-top:auto;font-size:12px;color:var(--muted)}

/* sheet */
.sheet{position:absolute;left:0;right:0;bottom:0;background:var(--bg);border-radius:22px 22px 0 0;z-index:6;transform:translateY(102%);transition:transform .25s;padding:10px 18px calc(20px + env(safe-area-inset-bottom,0px));max-height:85%;overflow-y:auto}
.sheet.on{transform:none}
.grab{width:40px;height:5px;border-radius:3px;background:var(--line);margin:0 auto 12px}
.sheet h3{font-family:var(--display);margin:0 0 12px;font-size:20px}
.field{display:flex;flex-direction:column;gap:5px;margin-bottom:12px;font-size:13px;color:var(--muted)}
.field input,.field select{font:inherit;color:var(--fg);background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:11px 12px}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.btn{width:100%;padding:14px;border-radius:14px;background:var(--fg);color:var(--bg);font-weight:600;text-align:center}
.btn.ghost{background:var(--surface);color:var(--fg)}
.btn.danger{background:var(--danger);color:#fff}
.btn:disabled{opacity:.35;cursor:default}
.row2>*{min-width:0}
/* new/edit event form: every box the same 44px height and look, so it reads as one tidy block and fits without scrolling */
.evf .field{margin-bottom:7px;gap:4px;font-size:12px}
.evf input,.evf select,.evf textarea{font:inherit;font-size:15px;color:var(--fg);background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:0 12px;height:44px;width:100%;min-width:0;margin:0;-webkit-appearance:none;appearance:none}
.evf select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2369706B' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M7 10l5 5 5-5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 8px center;background-size:18px;padding-right:30px}
.evf input::-webkit-date-and-time-value{text-align:left}
.evf textarea{min-height:44px;max-height:120px;padding:11px 12px;resize:none;line-height:1.3;display:block}
.evf .nm{font-size:17px;font-weight:600;margin-bottom:10px}
.evf .row2{gap:8px}
.row3{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:8px}
.row3>*{min-width:0}
.lblrow{display:flex;justify-content:space-between}
.shead{display:flex;align-items:center;gap:8px;margin-bottom:12px}
.shead h3{flex:1;margin:0}
.btn.sm{width:auto;padding:10px 20px;border-radius:12px}
.clipbtn{width:42px;height:42px;flex:none;border-radius:12px;background:var(--surface);display:grid;place-items:center;position:relative;cursor:pointer}
.clipbtn:hover{filter:brightness(.97)}
.clipbtn svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.filesel{font-size:12px;color:var(--muted);margin:-2px 0 8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* date picker */
.pksel{display:flex;gap:8px;margin-bottom:14px}
.pkdd{position:relative;display:flex;align-items:center;border-radius:999px;background:var(--surface);transition:background .15s,box-shadow .15s}
.pkdd:first-child{flex:1}
.pkdd:hover{background:var(--line)}
.pkdd:focus-within{box-shadow:0 0 0 2px var(--mia)}
.pkdd select{appearance:none;-webkit-appearance:none;width:100%;font:inherit;font-family:var(--display);font-size:17px;font-weight:600;color:var(--fg);background:none;border:0;outline:0;padding:10px 38px 10px 16px;cursor:pointer}
.pkdd svg{position:absolute;right:14px;width:16px;height:16px;stroke:var(--muted);fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;pointer-events:none}
.pgrid{display:grid;grid-template-columns:repeat(7,1fr);text-align:center;margin-bottom:14px;touch-action:pan-y;user-select:none;-webkit-user-select:none}
.pgrid.in-next,.week.in-next{animation:pkIn .22s ease-out}
.week{touch-action:pan-y;user-select:none;-webkit-user-select:none}
.pgrid.in-prev,.week.in-prev{animation:pkInR .22s ease-out}
@keyframes pkIn{from{opacity:0;transform:translateX(28px)}to{opacity:1;transform:none}}
@keyframes pkInR{from{opacity:0;transform:translateX(-28px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.pgrid.in-next,.pgrid.in-prev,.week.in-next,.week.in-prev{animation:none}}
.pgrid .dn{font-size:12px;color:var(--muted);padding-bottom:4px}
.pd{display:flex;flex-direction:column;align-items:center;gap:2px;padding:2px 0}
.pd .n{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;font-weight:600;font-variant-numeric:tabular-nums}
.pd .dots{height:5px}.pd .dots i{width:5px;height:5px}
.pd.past .n{color:var(--muted);font-weight:500}
.pd.today .n{color:var(--today-fg);background:var(--today-soft)}
.pd.sel .n{background:var(--fg);color:var(--bg)}
.pd.sel.today .n{background:var(--mia-fill);color:#fff}
.modal{position:absolute;inset:0;z-index:8;background:rgba(0,0,0,.4);display:none;align-items:center;justify-content:center;padding:24px}
.modal.on{display:flex}
.dialog{background:var(--bg);border-radius:20px;padding:20px;width:100%;max-width:300px;text-align:center}
.dialog b{font-family:var(--display);font-size:20px}
.dialog p{margin:8px 0 16px;line-height:1.4}

/* lists */
.card{border:1px solid var(--line);border-radius:16px;padding:14px;margin-bottom:10px}
.lrow{display:flex;align-items:center;gap:12px;padding:13px 0;border-bottom:1px solid var(--line)}
.lrow .t{flex:1;min-width:0}
.lrow .t b{display:block;font-weight:600}
.lrow .t span{font-size:13px;color:var(--muted)}
/* a scrollable row of chips (News categories), groups split by thin lines */
.mbar{display:flex;align-items:center;gap:6px;overflow-x:auto;margin:0 -16px 6px;padding:2px 16px 8px;scrollbar-width:none;-webkit-mask-image:linear-gradient(90deg,#000 82%,transparent);mask-image:linear-gradient(90deg,#000 82%,transparent)}
.mbar::-webkit-scrollbar{display:none}
.mbar.end{-webkit-mask-image:none;mask-image:none}
.mbar .sep{width:1px;height:22px;background:var(--line);margin:0 4px;flex:none}
.mchip{flex:none;display:flex;align-items:center;gap:6px;padding:7px 12px;border-radius:999px;background:var(--surface);font-size:13px;font-weight:600;color:var(--muted);transition:background .15s,color .15s}
.mchip svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.mchip.on{background:var(--switch-on);color:#fff}
.swatches{display:grid;grid-template-columns:repeat(8,1fr);gap:8px;margin:4px 0 16px}
.swatch{aspect-ratio:1;border-radius:50%;display:grid;place-items:center;color:#fff;font-weight:700;font-size:14px}
.swatch.on{box-shadow:0 0 0 2px var(--bg),0 0 0 4px var(--fg)}
.switch{width:46px;height:28px;border-radius:14px;background:var(--line);position:relative;transition:background .2s;flex:none}
.switch::after{content:"";position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;background:#fff;transition:transform .2s;box-shadow:0 1px 3px rgba(0,0,0,.2)}
.switch.on{background:var(--switch-on)}
.switch.on::after{transform:translateX(18px)}
.doc{padding-bottom:12px;line-height:1.55}
.doc h3{font-family:var(--display);font-size:17px;margin:20px 0 6px}
.doc p{margin:0 0 10px}.doc ul,.doc ol{margin:0 0 10px;padding-left:20px}.doc li{margin-bottom:5px}
.doc .meta{font-size:12px;color:var(--muted);margin:4px 0 14px}
.doc .lead{font-size:15px;color:var(--muted);margin-bottom:14px}
.doc details{border-bottom:1px solid var(--line)}
.doc summary{list-style:none;cursor:pointer;padding:14px 0;font-weight:600;display:flex;justify-content:space-between;align-items:center}
.doc summary::-webkit-details-marker{display:none}
.doc summary::after{content:"+";font-size:20px;font-weight:400;color:var(--muted);transition:transform .2s}
.doc details[open] summary::after{transform:rotate(45deg)}
.doc details>div{padding:0 0 12px}
.doc .card{background:var(--surface);border-radius:14px;padding:14px 16px;margin:14px 0}
.doc .aboutlogo{display:flex;align-items:center;gap:14px;margin:6px 0 16px}
.doc .aboutlogo img{width:64px;height:64px;border-radius:15px}
.group{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin:18px 0 2px}
.check{width:24px;height:24px;border-radius:8px;border:2px solid var(--line);display:grid;place-items:center;flex:none}
.check.on{background:var(--fg);border-color:var(--fg);color:var(--bg)}
.done b{text-decoration:line-through;color:var(--muted)}
.status{font-size:12px;font-weight:600;padding:3px 8px;border-radius:6px}
/* projects, read from each project's STATUS.md (projects-sync/build.py) */
.st-wait{background:var(--today-soft);color:var(--today-fg)}
.st-done{background:var(--personal-soft);color:var(--personal)}
.pcard{display:block;width:100%;text-align:left}
.pcard .why{font-size:12px;color:var(--today-fg);font-weight:600;margin-top:6px}
.pgroup{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin:14px 0 8px}
.phead{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:2px 0 4px}
.plist{list-style:none;margin:0;padding:0}
.plist li{display:flex;gap:10px;align-items:flex-start;padding:7px 0;font-size:14px}
.plist .tick{width:18px;height:18px;border-radius:6px;border:2px solid var(--line);flex:none;display:grid;place-items:center;font-size:11px;margin-top:1px}
.plist .tick.on{background:var(--personal);border-color:var(--personal);color:#fff}
.plist .due{font-size:12px;color:var(--muted);margin-left:auto;white-space:nowrap;padding-left:8px}
.plist .dot{width:6px;height:6px;border-radius:50%;background:var(--muted);flex:none;margin-top:8px}
.plist .q{color:var(--today-fg)}
.where{background:var(--surface);border-radius:12px;padding:10px 12px;font-size:14px;margin-bottom:6px}
.tsub{font-size:13px;font-weight:600;margin:10px 0 0}
.skel{height:10px;border-radius:5px;background:var(--surface);margin:8px 0}

/* login */
.login{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;padding:24px;text-align:center}
.logo{width:120px;height:96px;border-radius:14px;background-color:#2FD457;
  background-image:linear-gradient(rgba(255,255,255,.28) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.28) 1px,transparent 1px);background-size:12px 12px;
  display:grid;place-items:center;font-family:var(--display);font-size:44px;font-weight:700;color:#F4FFF6;letter-spacing:.02em;text-shadow:0 1px 0 rgba(0,0,0,.12)}
.logo.sm{width:30px;height:24px;font-size:12px;border-radius:6px;background-size:5px 5px}
.gbtn{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;max-width:300px;padding:14px;border-radius:14px;border:1px solid var(--line);font-weight:600;background:var(--bg)}
.toast{position:absolute;left:50%;bottom:96px;transform:translateX(-50%) translateY(20px);background:var(--fg);color:var(--bg);padding:10px 16px;border-radius:12px;font-size:14px;opacity:0;transition:.2s;z-index:9;pointer-events:none;width:max-content;max-width:calc(100% - 32px);text-align:center}
.toast.on{opacity:1;transform:translateX(-50%)}
.avatar{position:relative;overflow:visible}
.avatar img{width:100%;height:100%;object-fit:cover;border-radius:50%;display:block}
.avwrap{cursor:pointer}
.avwrap:hover{filter:brightness(.95)}
.cam{position:absolute;right:-2px;bottom:-2px;width:24px;height:24px;border-radius:50%;background:var(--fg);color:var(--bg);display:grid;place-items:center;border:2px solid var(--bg)}
.cam svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.linkbtn{font-size:13px;color:var(--muted);text-decoration:underline;margin-top:6px}
a.btn{display:block;text-decoration:none}
.ibtn:disabled{opacity:.25;cursor:default}
.logoimg{width:120px;height:120px;filter:drop-shadow(0 8px 20px rgba(220,150,0,.3))}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* Real app additions (not in the mockup) */
/* On phones the top bar starts below the clock and notch. */
@media (max-width:760px){.top{padding-top:max(14px,env(safe-area-inset-top,0px))}.drawer{padding-top:max(14px,env(safe-area-inset-top,0px))}.drawer .dclose{top:max(14px,env(safe-area-inset-top,0px))}}
[hidden]{display:none!important}
body:has(.app.dark){--page:#050605}
.field textarea{font:inherit;color:var(--fg);background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:11px 12px}
/* Pull down at the top of a screen to sync. */
.ptr{height:0;overflow:hidden;display:grid;place-items:center;font-size:12px;color:var(--muted);transition:height .2s}
.ptr.on{height:36px}
.offpill{flex:none;display:flex;align-items:center;gap:5px;font-size:11px;font-weight:700;letter-spacing:.04em;color:var(--muted);background:var(--surface);border:1px solid var(--line);padding:3px 8px;border-radius:20px}
.offpill i{width:7px;height:7px;border-radius:50%;background:var(--danger)}
/* Weather under the day in the Calendar: six small slots spread across the width */
.wx{display:grid;grid-template-columns:repeat(6,1fr);width:100%;margin:-2px 0 10px;text-align:center;font-size:12px;font-weight:600;color:var(--fg)}
.wx div{display:flex;flex-direction:column;line-height:1.35}
.wx s{text-decoration:none;font-size:10px;color:var(--muted);font-weight:500}
.wx .past{opacity:.38}
.wx div{border-radius:10px;padding:2px 0}
.wxhours{display:flex;gap:6px;overflow-x:auto;padding:8px 0 4px;margin:0 -2px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.wxhours::-webkit-scrollbar{display:none}
/* Weather icons (drafts/weather-icons.html) */
:root{--wx-sun:#FFC233;--wx-moon:#F4D35E;--wx-cloud:#C3CCD5;--wx-cloud2:#8E9AA6;--wx-dark:#5B6673;--wx-rain:#2563EB;--wx-snow:#60A5FA;--wx-fog:#9AA5B1}
.wxi{width:24px;height:24px;display:block;margin:1px auto}
.wxhours .wxi{width:40px;height:40px;margin:0 auto}
.lrow .wxi{display:inline-block;width:20px;height:20px;vertical-align:-5px;margin:0}
.wxhours div{flex:none;width:58px;display:flex;flex-direction:column;align-items:center;gap:3px;padding:10px 0;border-radius:14px;background:var(--surface)}
.wxhours s{text-decoration:none;font-size:12px;color:var(--muted)}
.wxhours i{font-style:normal;font-size:26px;line-height:1.1}
.wxhours b{font-size:16px}
.wxhours span{font-size:12px;font-weight:600;color:var(--c-blue);min-height:15px}
.wxhours .wet{background:color-mix(in srgb,var(--c-blue) 18%,var(--surface))}
.wxold{font-size:11px;color:var(--muted);margin:-6px 0 10px}
.wxnone{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--muted);margin:-2px 0 10px;text-align:left}
.loginerr{color:var(--danger);font-size:13px;max-width:280px}

/* Feel like an app, not a web page (iPhone) */
html,body{overscroll-behavior:none;-webkit-text-size-adjust:100%;touch-action:manipulation}  /* no page bounce, no double-tap zoom */
*{-webkit-tap-highlight-color:transparent}
/* Text can't be selected or copied, except where you read or type (.reading, text boxes). */
.app{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.reading,.reading *,input,textarea{-webkit-user-select:text;user-select:text;-webkit-touch-callout:default}
.reading button,.reading .btn{-webkit-user-select:none;user-select:none}
.view{overscroll-behavior-y:contain}
/* iPhone zooms into any text box under 16px, so text boxes are 16px on touch screens */
@media (pointer:coarse){input,select,textarea,.evf input,.evf select,.evf textarea,.pkdd select{font-size:16px!important}}

/* Opened from the home screen, Tuppu runs behind the iPhone's clock and battery (like native apps),
   so the top bar starts just below them, and the tab bar sits on the home bar. */
@media (display-mode:standalone){
  .top{padding-top:calc(env(safe-area-inset-top,0px) + 2px);padding-bottom:6px}
  .drawer{padding-top:calc(env(safe-area-inset-top,0px) + 8px)}
  .drawer .dclose{top:calc(env(safe-area-inset-top,0px) + 4px)}
  /* Fill the whole screen: running behind the clock, the iPhone measures 100% without the clock area,
     so the page is made that much taller (the clock area = safe-area-inset-top). */
  html{height:calc(100% + env(safe-area-inset-top,0px))}
  html,body{overflow:hidden}  /* the page itself never moves; only the content inside scrolls */
  body{height:100%;padding:0;background:#FFFFFF}
  body:has(.app.dark){background:#0F1110}
  .app{width:100%;height:100%;border-radius:0;box-shadow:none}
  /* Tabs: slightly bigger icons, sitting just above the home bar. */
  .tabs{padding-top:6px;padding-bottom:max(6px,calc(env(safe-area-inset-bottom,0px) - 12px))}
  .tab{padding:2px 0 0;gap:3px;font-size:11.5px}
  .tab svg{width:27px;height:27px}
  .tab .ico{padding:2px 14px}
}

/* iPad from the home screen: iOS keeps a strip at the very bottom for itself (it draws it, Tuppu can't),
   so Tuppu fills the space it gets and the tab bar sits just above that strip, without extra room for the home bar.
   The page behind Tuppu has the same colour as Tuppu, so even a leftover edge can't show. */
@media (display-mode:standalone) and (min-width:600px) and (min-height:600px){
  html{height:100%;background:#FFFFFF}
  html:has(.app.dark){background:#0F1110}
  .app{position:fixed;inset:0;height:100%}
  html .app.wide .tabs{bottom:8px}  /* "html" so it wins over the general tab bar rule further down */
}

/* Repeating events: the Repeat row fills the width until "Ends" appears; round weekday buttons for Custom. */
.evf .row2.solo{grid-template-columns:1fr}
.days{display:flex;justify-content:space-between;gap:6px;margin:-1px 0 9px}
.dayb{width:38px;height:38px;border-radius:50%;background:var(--surface);border:1px solid var(--line);font-weight:600;font-size:13px;color:var(--muted)}
.dayb.on{background:var(--mia-fill);border-color:transparent;color:#fff}
.repi{display:grid;place-items:center;color:var(--muted);opacity:.85}
.repi svg{width:20px;height:20px}

/* All-day events: slim lines at the top of the day. Birthdays have a gift icon. */
.ev.slim{padding:8px 4px;gap:10px}
.ev.slim .bar{align-self:center;height:20px;width:3px}
.ev.slim .txt{font-size:15px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ev.slim .txt .muted{font-weight:400;font-size:13px}
.gift{display:grid;place-items:center;margin-right:-4px}
.gift svg{width:19px;height:19px}
.ev.slim .repi svg{width:17px;height:17px}
.dhead h3 svg{vertical-align:-3px}
/* Event form: name with birth year, the All day row, a date on its own. */
.namerow{display:flex;gap:8px}
.namerow .nm{flex:1;min-width:0}
.evf .namerow .yr{flex:0 0 104px;font-size:15px;font-weight:500;padding-right:28px}
.slimrow{padding:4px 0 10px;border-bottom:0}
.slimrow b{font-weight:500;color:var(--muted);font-size:13px}
.row1{display:block}
/* Projects: connect your Mac */
.connect li{margin-bottom:6px}
.keymsg{font:13px/1.4 ui-monospace,Menlo,monospace;color:var(--fg);background:var(--bg);border:1px solid var(--line);border-radius:12px;padding:10px 12px;width:100%;resize:none;display:block;word-break:break-all}

/* To-do: the sort button above the list, and the choices that drop down under it */
.sorthead{position:relative;display:flex;justify-content:space-between;align-items:center;font-size:13px;color:var(--muted);margin:2px 0 4px}
.sorthead .chip{color:var(--fg);font-weight:600}
.chip svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.sortm{position:absolute;right:0;top:42px;z-index:4;width:220px;background:var(--bg);border:1px solid var(--line);border-radius:16px;padding:6px;box-shadow:0 14px 34px rgba(0,0,0,.18)}
.sortm .h{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);padding:8px 12px 4px}
.sortm button{display:flex;justify-content:space-between;align-items:center;width:100%;text-align:left;padding:11px 12px;border-radius:10px;color:var(--fg);font-size:15px;font-weight:500}
.sortm button:hover{background:var(--surface)}
.sortm button.on{background:var(--mia-soft);font-weight:600}
.sortm button.on::after{content:"✓";color:var(--mia);font-weight:700}

/* ---- iPad: the wider layout (drafts/ipad-layout.html). main.js adds .wide when Tuppu has room, .land when sideways. ---- */
.app.wide .top{padding-left:24px;padding-right:24px}
.app.wide .view{padding:0 24px 124px}  /* room at the end to scroll past the tab bar */
/* The tab bar: a floating see-through "glass" pill near the bottom edge, like iOS 26.
   The screen shows blurred through it; no strip across the width. The icons keep the same spots (5 x ~136px, centred). */
.app.wide .tabs{position:absolute;left:50%;right:auto;bottom:max(10px,calc(env(safe-area-inset-bottom,0px) - 6px));transform:translateX(-50%);z-index:3;
  width:min(692px,calc(100% - 20px));grid-template-columns:repeat(5,minmax(0,1fr));padding:5px 6px;border:1px solid color-mix(in srgb,var(--fg) 9%,transparent);border-radius:999px;
  background:color-mix(in srgb,var(--bg) 38%,transparent);-webkit-backdrop-filter:blur(16px) saturate(1.8);backdrop-filter:blur(16px) saturate(1.8);
  box-shadow:0 10px 30px rgba(0,0,0,.14),inset 0 1px 0 color-mix(in srgb,#fff 45%,transparent)}
.app.wide .tab{font-size:12.5px;font-weight:600;gap:2px;padding:3px 0;border-radius:999px}
.app.wide .tab.on{background:color-mix(in srgb,var(--fg) 7%,transparent)}
.app.wide .tab.on .ico{background:none}
.app.wide .tab svg{width:30px;height:30px}
.app.wide .tab .ico{padding:2px 18px}
/* Sheets and the menu don't stretch across the whole iPad. */
.app.wide .sheet{left:50%;right:auto;width:min(600px,100%);transform:translate(-50%,102%)}
.app.wide .sheet.on{transform:translate(-50%,0)}
.app.wide .drawer{right:auto;width:400px}
.app.wide .drawer.on{box-shadow:0 0 40px rgba(0,0,0,.2)}  /* only when open: closed, its shadow greyed the left edge */
.app.wide .view.reading>.dhead,.app.wide .view.reading>.sec,.app.wide .view.reading>.prevnext,.app.wide .view.reading>.doc{max-width:760px}

/* Calendar: the month, Month | Week, and the full month with event names when sideways */
.mseg{display:inline-flex;background:var(--surface);border-radius:999px;padding:3px;margin-right:8px}
.mseg button{padding:5px 14px;border-radius:999px;font-size:13px;font-weight:600;color:var(--muted)}
.mseg button.on{background:var(--bg);color:var(--fg);box-shadow:0 1px 3px rgba(0,0,0,.12)}
.month .nav{align-items:center}
.mgrid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:2px;margin-bottom:12px;text-align:center}
.mgrid .dn{font-size:12px;color:var(--muted);padding-bottom:4px}
.md{display:flex;flex-direction:column;align-items:center;gap:4px;padding:5px 0;border-radius:12px;min-width:0;min-height:52px}
.md .n{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font-weight:600;font-variant-numeric:tabular-nums}
.md.past .n{color:var(--muted);font-weight:500}
.md.today .n{color:var(--today-fg);background:var(--today-soft)}
.md.sel .n{background:var(--fg);color:var(--bg)}
.md.sel.today .n{background:var(--mia-fill);color:#fff}
.mgrid.big{gap:0;border-top:1px solid var(--line)}
.mgrid.big .dn{padding:8px 0 6px;border-bottom:1px solid var(--line)}
.big .md{align-items:stretch;min-height:76px;border-radius:0;border-bottom:1px solid var(--line);padding:6px 4px;gap:3px}
.big .md:not(:nth-child(7n+1)){border-left:1px solid var(--line)}
.big .md .n{width:30px;height:30px;font-size:14px;align-self:flex-start}
.big button.md:hover{background:var(--surface)}
/* The same month upright, smaller so the day's events still fit below it */
.big.fit .md{min-height:60px;padding:4px 3px;gap:2px}
.big.fit .md .n{width:24px;height:24px;font-size:13px}
.big.fit .ml{font-size:10.5px;padding:1px 4px}
.big.fit .md .more{font-size:10px;padding-left:4px}
.big.fit .dn{padding:6px 0 4px}
.ml{font-size:11px;font-weight:600;padding:2px 5px;border-radius:5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:left}
.md .more{font-size:11px;color:var(--muted);text-align:left;padding-left:5px}
.calsplit{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:28px;align-items:start}
.calside{border-left:1px solid var(--line);padding-left:28px;position:sticky;top:0}

/* To-do: the wide list (category and date on the right) and one column per category when sideways */
.tcat{font-size:12px;font-weight:600;padding:3px 8px;border-radius:6px;white-space:nowrap}
.tdue{font-size:13px;color:var(--muted);white-space:nowrap;min-width:96px;text-align:right;font-variant-numeric:tabular-nums}
.tdue.now{color:var(--today-fg);font-weight:600}
.tcols{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:24px;align-items:start}
.tcol h4{margin:4px 0 2px;font-size:12px;letter-spacing:.06em;text-transform:uppercase;display:flex;justify-content:space-between}
.tcol h4 span{color:var(--muted);font-variant-numeric:tabular-nums}

/* Projects: two columns of cards upright; the list next to the open project when sideways */
.app.wide .pcards{display:grid;grid-template-columns:1fr 1fr;gap:0 12px;align-items:start}
.app.wide .pcards .pgroup{grid-column:1/-1}
.psplit{display:grid;grid-template-columns:minmax(300px,380px) minmax(0,1fr);gap:28px;align-items:start}
.pside{border-left:1px solid var(--line);padding-left:28px;position:sticky;top:0}
.ptitle{font-family:var(--display);font-size:26px;margin:4px 0 8px}
.pcard.sel{border-color:var(--mia);box-shadow:0 0 0 1px var(--mia) inset}

/* News: the update line, the category row and the stories.
   iPad: all categories in one row, stories in columns. */
.nmeta{display:flex;justify-content:space-between;align-items:center;gap:10px;margin:2px 0 8px;font-size:12px;color:var(--muted)}
.nmeta a{color:inherit;text-decoration:underline;text-underline-offset:2px}
.ntabs{margin-bottom:2px}
.ngroup+.ngroup{margin-top:18px}
.nghead{font-family:var(--display);font-size:20px;margin:14px 0 8px;display:flex;align-items:center;gap:8px}
.nghead::before{content:"";width:4px;height:18px;border-radius:2px;background:var(--mia)}
.ncards{display:flex;flex-direction:column;gap:10px;margin-top:10px}
.nghead+.ncards{margin-top:0}
.nghead span{font-family:var(--body,inherit);font-size:12px;font-weight:500;color:var(--muted);margin-left:auto}
/* Each story is its own card, so it is always clear where one ends and the next begins. */
.nstory{display:flex;flex-direction:column;gap:4px;padding:13px 14px;border:1px solid var(--line);border-radius:16px;background:var(--bg);box-shadow:0 1px 2px rgba(15,23,42,.05);color:inherit;text-decoration:none}
.nstory:active{background:var(--surface)}
.nold{font-size:13px;color:var(--muted);background:var(--surface);border-radius:12px;padding:9px 12px;margin:10px 0 0}
.nhl{font-family:var(--display);font-size:17px;line-height:1.25;font-weight:700}
.nsum{font-size:14px;line-height:1.4;color:var(--fg);opacity:.85;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.nsrc{font-size:12px;color:var(--muted)}
.app.wide .ntabs{flex-wrap:wrap;overflow:visible;-webkit-mask-image:none;mask-image:none}
.app.wide .ncards{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:12px}

/* ---- Notes ---- */

/* A note uses the whole screen: no tabs. */
.app.noting .tabs{display:none!important}
.app.noting .view{padding:0 12px var(--kb,0px);overflow-x:auto}
@media(max-width:600px){.app.noting .view{padding:0 4px var(--kb,0px)}}  /* phone: the page nearly fills the width (A4 shape stays, so the page is a little taller) */
.ntitle{flex:1;min-width:0;text-align:left;font-family:var(--display);font-size:18px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:8px 4px}
.ibtn:disabled{opacity:.3}

/* Pages: 1000 × 1414 page units (A4 shape), scaled to the screen by --s. Paper is white in dark mode too.
   Every paper has margins, so text never runs to the edge: ruled paper starts after the red line. */
.npages{--s:.35;padding:6px 0 0}
.npage{position:relative;width:calc(1000px * var(--s));margin:0 auto 16px;aspect-ratio:1000/1414;background:#fff;border-radius:10px;overflow:hidden;box-shadow:0 1px 2px rgba(15,23,42,.06),0 4px 16px rgba(15,23,42,.06),0 0 0 1px rgba(15,23,42,.05);-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.app.dark .npage{box-shadow:none}
.pagein{position:absolute;left:0;top:0;width:1000px;height:1414px;transform:scale(var(--s));transform-origin:0 0}
.pagein canvas{position:absolute;left:0;top:0;width:1000px;height:1414px;pointer-events:none}
.lines{position:absolute;display:block}
/* Paper patterns are little SVG tiles (gradients with "transparent" print black on iOS).
   Ruled: a soft line under each 60-high line of text, the same margin left and right.
   Squared fills the whole page every 30 (two squares to a line of text), dotted every 60 (a dot row under each line). */
.paper-ruled .lines{left:60px;right:60px;top:120px;bottom:80px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='60'%3E%3Crect y='57' width='10' height='2' fill='%23D9E0EA'/%3E%3C/svg%3E") 0 0/10px 60px}
.paper-squared .lines{inset:0;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' fill='%23E2E8F0'%3E%3Crect y='28.5' width='30' height='1.5'/%3E%3Crect x='28.5' width='1.5' height='30'/%3E%3C/svg%3E") 0 0/30px 30px}
.paper-dotted .lines{inset:0;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60'%3E%3Ccircle cx='30' cy='30' r='2.6' fill='%23B8C3D1'/%3E%3C/svg%3E") -10px -30px/60px 60px}
.paper-blank .lines{inset:0}
/* The page's text: Times New Roman, 45 high on 60-high lines (on the ruled lines). */
.ptext{position:absolute;left:60px;right:60px;top:120px;bottom:80px;overflow:hidden;font-family:"Times New Roman",Times,serif;font-size:45px;line-height:60px;color:#111;outline:none;overflow-wrap:anywhere;-webkit-user-select:text;user-select:text;-webkit-touch-callout:default;caret-color:var(--mia-fill)}
.ptext font[size="1"],.ptext font[size="2"]{font-size:34px}
.ptext font[size="3"],.ptext font[size="4"]{font-size:45px}
.ptext font[size="5"]{font-size:60px;line-height:1.2}
.ptext font[size="6"],.ptext font[size="7"]{font-size:80px;line-height:1.2}
.ptext ul,.ptext ol{margin:0;padding-left:1.1em}
.npages:not(.texttool) .ptext{pointer-events:none}
/* The lasso's pick: a dashed box, with a bin to delete it. */
.nsel{position:absolute;z-index:2;border:1.5px dashed var(--mia-fill);border-radius:6px;background:color-mix(in srgb,#FACC15 8%,transparent);pointer-events:none}
.nseldel{position:absolute;right:-1px;top:-46px;width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:#fff;color:#DC2626;box-shadow:0 2px 8px rgba(0,0,0,.18);pointer-events:auto}
.nsel.low .nseldel{top:auto;bottom:-46px}
.nseldel svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
/* Under the last page: pull up firmly to add one. */
.npull{display:grid;place-items:center;height:calc(150px + env(safe-area-inset-bottom,0px));padding-bottom:70px;font-size:13px;color:var(--muted);--pull:0px}
.npull span{transform:translateY(calc(var(--pull) * -.3));transition:transform .1s;padding:8px 14px;border-radius:999px;border:1px dashed var(--line)}
.npull.ready span{color:var(--mia);border-color:var(--mia);font-weight:600}
.npull.full span{border-style:solid}
/* Three choices in a dialog (Erase all, Notes is full): stacked, the safe one first. */
.dialog .col3{display:grid;gap:8px}

/* The tool bar at the bottom, the tool column on the right and their pop-ups: see-through. */
.nfloat{position:absolute;z-index:4;display:flex;gap:4px;padding:6px;border-radius:22px;background:color-mix(in srgb,var(--bg) 58%,transparent);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);border:1px solid color-mix(in srgb,var(--line) 70%,transparent);box-shadow:0 6px 20px rgba(0,0,0,.12)}
.nfloat[hidden]{display:none}
.nfloat button{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;color:var(--fg);font-size:17px}
.nfloat button.on{background:var(--mia-soft);color:var(--mia)}
.nfloat button:disabled{opacity:.3}
.nfloat svg{width:24px;height:24px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.app{--nlow:calc(10px + max(var(--kb,0px),env(safe-area-inset-bottom,0px)))}  /* the bars' bottom: on the keyboard, or the screen's edge */
.app.kbfit{--nlow:8px}  /* iPhone typing: Tuppu ends where the keyboard starts (notepad.js keyboard()) */
/* The tool bar (type, pen, paper): bottom right, on top of the keyboard when it's up. Pen mode: upright. */
.nbar{right:10px;bottom:var(--nlow);border-radius:999px}
.nbar button{width:46px;height:46px;border-radius:999px}
.nbar.vert{flex-direction:column;border-radius:28px}
.nbar.vert button{width:44px;height:44px}  /* as wide as the pen column above it */
.npop button.ndelpg{color:var(--danger)}
/* The column: pen tools above the upright tool bar (with a gap), or the font row left of the tool bar. */
.ncol{right:10px;bottom:calc(var(--nlow) + var(--nbh,160px) + 14px);flex-direction:column}
.ncol.row{right:auto;left:10px;bottom:var(--nlow);flex-direction:row;max-width:calc(100% - 34px - var(--nbw,170px));overflow-x:auto;scrollbar-width:none;touch-action:pan-x;border-radius:999px;padding:7px}
.ncol.row::-webkit-scrollbar{display:none}
.ncol.beside{right:calc(20px + var(--nbw,58px));bottom:var(--nlow)}  /* short screen: left of the upright bar */
.npop{overflow-y:auto;scrollbar-width:none}
.npop.side .ndelpg svg{margin-right:8px}
.ncol.row button{flex:none;border-radius:999px}
.npop.side{right:68px;flex-direction:column;background:color-mix(in srgb,var(--bg) 82%,transparent)}
.npop.side.up{right:auto;top:auto;bottom:calc(var(--nlow) + 70px)}  /* from the font row: above the button */
.npop.side.grid{display:grid;grid-template-columns:repeat(2,44px)}
.npop.side button{width:auto;min-width:44px;padding:0 12px;display:flex;align-items:center;justify-content:start}
.npop.side.grid button{padding:0;justify-content:center}
.npop.above{right:10px;bottom:calc(var(--nlow) + 70px);background:color-mix(in srgb,var(--bg) 82%,transparent)}
.npop.above button{width:66px;height:62px;display:flex;flex-direction:column;gap:4px;font-size:11px;font-weight:600}
.cdot{width:22px;height:22px;border-radius:50%;box-shadow:0 0 0 2px var(--bg),0 0 0 3px color-mix(in srgb,var(--fg) 25%,transparent)}
.npop button.on .cdot{box-shadow:0 0 0 2px var(--bg),0 0 0 4px var(--mia)}
.tw{display:block;border-radius:50%;background:var(--fg)}
.pp{width:24px;height:30px;border-radius:3px;background-color:#fff;border:1px solid var(--line)}
.pp-ruled{background:repeating-linear-gradient(to bottom,transparent 0 4px,#B9C8DA 4px 5px) 4px 4px/16px 22px no-repeat #fff}
.pp-squared{background:repeating-linear-gradient(to bottom,transparent 0 3px,#C9D4E2 3px 4px),repeating-linear-gradient(to right,transparent 0 3px,#C9D4E2 3px 4px) #fff}
.pp-dotted{background:radial-gradient(circle at 2.5px 2.5px,#9AA9BA .8px,transparent 1.2px) 0 0/5px 5px #fff}
.npop.side button svg{flex:none}
.npop.side button span{margin-left:8px}
.aa{font-weight:700;font-size:16px}
.ff{font-size:12px;font-weight:600}
.ibtn.on{background:var(--mia-soft);color:var(--mia)}
.handtool .npage{cursor:grab}
.pgno{position:absolute;right:10px;bottom:6px;font-size:11px;color:#9AA3AD;font-variant-numeric:tabular-nums;pointer-events:none}
.npop.above{display:flex}
.npop.above button.ndelpg{color:var(--danger);margin-left:4px;box-shadow:-5px 0 0 -4px var(--line)}
.npop.above button.ndelpg svg{width:26px;height:26px;margin:2px 0}

/* Printing a note from the Mac (⌘P): only the pages, each one an A4 sheet. Share makes its own PDF. */
@media print{
  @page{size:A4;margin:0}
  html,body{height:auto!important;background:#fff!important;display:block!important;padding:0!important;margin:0!important}
  .app{position:static!important;display:block!important;width:auto!important;height:auto!important;overflow:visible!important;box-shadow:none!important;border-radius:0!important;background:#fff!important}
  .app>:not(.view),.nfloat,.npull,.pgno,.nsel{display:none!important}
  .view{overflow:visible!important;padding:0!important;height:auto!important}
  .npages{--s:.7937!important;padding:0!important}
  .npage{width:210mm!important;height:297mm!important;aspect-ratio:auto!important;margin:0!important;border-radius:0!important;box-shadow:none!important;break-after:page}
  .npage:last-child{break-after:auto}
  .pagein{transform:none!important;zoom:.7937}  /* scaled without a transform, which prints patterns and pictures wrong */
  *{-webkit-print-color-adjust:exact;print-color-adjust:exact}
}
.evdesc{white-space:pre-line;overflow-wrap:anywhere}.evdesc a{color:inherit;text-decoration:underline}