/* Helder Hoofd — stijl. Basis: Allens "All-purpose Grid"-vellen (1994). */
:root{box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
html{scroll-padding-top:env(safe-area-inset-top,0px);-webkit-text-size-adjust:100%}
body{margin:0}
img{max-width:100%}
[hidden]{display:none!important}
/* Layout: Allen's 1994 "All-purpose Grid" sheets — label box top-right, tray icons + button bar on top, stacked sheets in the middle, red flags at the foot. Blue ink for structure, red for warnings and "go to", green for notes. */
/* ---------- Tokens: één bron voor kleur en type. Licht, donker en 'Verhoog contrast'. ---------- */
:root{
  --paper:#f5f5f7; --grid:transparent; --card:#ffffff; --ink:#1d1d1f; --blue:#0a66d6; --red:#c5221f; --green:#17742f;
  --muted:#6e6e73; --line:#e3e3e8; --soft:#eef4fe; --greenSoft:#e8f5ec; --redSoft:#fdecea; --fill:rgba(120,120,128,.12);
  --control:#8e8e93; /* rand van keuzerondjes en vinkjes: 3,3:1 op wit (WCAG 1.4.11) */
  --shadow:0 1px 2px rgba(0,0,0,.04),0 6px 20px rgba(0,0,0,.05); --r:14px;
  --selbg:#0a66d6; --sidebar:#ececf0; --sel:var(--blue);
  --hand:ui-rounded,"SF Pro Rounded","Nunito",system-ui,sans-serif;
  --body:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",system-ui,sans-serif;
  --mono:var(--body);
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --paper:#000000; --card:#1c1c1e; --ink:#f5f5f7; --blue:#4c9bff; --red:#ff6961; --green:#4cd17a;
  --muted:#98989f; --line:#38383a; --soft:#0d2747; --greenSoft:#11301d; --redSoft:#3a1714; --fill:rgba(120,120,128,.24);
  --control:#8e8e93; --shadow:0 1px 2px rgba(0,0,0,.5); --selbg:#0a5fc8; --sidebar:#141416; color-scheme:dark }}
:root[data-theme="dark"]{
  --paper:#000000; --card:#1c1c1e; --ink:#f5f5f7; --blue:#4c9bff; --red:#ff6961; --green:#4cd17a;
  --muted:#98989f; --line:#38383a; --soft:#0d2747; --greenSoft:#11301d; --redSoft:#3a1714; --fill:rgba(120,120,128,.24);
  --control:#8e8e93; --shadow:0 1px 2px rgba(0,0,0,.5); --selbg:#0a5fc8; --sidebar:#141416; color-scheme:dark }
@media (prefers-contrast: more){:root{--muted:#48484d;--line:#8e8e93;--control:#48484d}}
@media (prefers-contrast: more) and (prefers-color-scheme: dark){:root:not([data-theme="light"]){--muted:#c7c7cc;--line:#636366;--control:#c7c7cc}}
*{box-sizing:border-box}
body{background:var(--paper);color:var(--ink);font:1rem/1.45 var(--body);
  background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);background-size:16px 16px;
  padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));padding-block:16px 48px}
.wrap{max-width:1180px;margin:0 auto;display:flex;flex-direction:column;gap:18px}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.hand{font-family:var(--hand);font-weight:700;letter-spacing:.02em}
.mono{font-family:var(--mono);font-size:.82em;font-variant-numeric:tabular-nums}
.muted{color:var(--muted)}
.red{color:var(--red)} .green{color:var(--green)} .blue{color:var(--blue)}
h2,h3,h4{margin:0;text-wrap:balance}

/* header */
.top{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;flex-wrap:wrap}
.brand{font-family:var(--hand);font-size:1.75rem;font-weight:700;color:var(--blue);line-height:1}
.brand small{display:block;font-family:var(--body);font-size:.75rem;font-weight:600;color:var(--muted);letter-spacing:.04em;margin-top:4px}
.label{background:var(--card);border:2px solid var(--blue);padding:6px 14px 4px;min-width:260px;display:flex;justify-content:space-between;align-items:flex-end;gap:16px}
.label .hand{font-size:1.5rem;line-height:1.1;text-transform:uppercase}

.status{font-size:.75rem;color:var(--muted)}
.status.warn{color:var(--red)}

/* nav */
.nav{display:grid;grid-template-columns:auto 1fr;gap:12px 18px;align-items:start}
.trays{display:flex;flex-direction:column;gap:10px}
.tray{display:flex;align-items:center;gap:8px;background:none;border:0;padding:0;cursor:pointer;text-align:left}
.tray svg{width:74px;height:46px;flex:none}
.tray .ct{font-family:var(--mono);font-size:.75rem;background:var(--red);color:var(--card);border-radius:10px;padding:1px 7px}
.tray.on svg rect,.tray.on svg path{stroke:var(--red)}
.btns{display:flex;flex-wrap:wrap;gap:10px 12px;align-content:flex-start}
.b{font-family:var(--hand);font-weight:700;font-size:1rem;letter-spacing:.03em;text-transform:uppercase;background:var(--card);border:2px solid var(--ink);
  box-shadow:3px 3px 0 var(--ink);padding:3px 10px 1px;cursor:pointer;line-height:1.3}
.b:hover{transform:translate(-1px,-1px);box-shadow:4px 4px 0 var(--ink)}
.b:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink)}
.b.on{border-color:var(--red);box-shadow:3px 3px 0 var(--red);color:var(--red)}
.b.sm{font-size:.875rem;padding:1px 8px 0}
.b.green{border-color:var(--green);box-shadow:3px 3px 0 var(--green);color:var(--green)}
.b.redb{border-color:var(--red);box-shadow:3px 3px 0 var(--red);color:var(--red)}
.b.big{font-size:1.25rem;padding:8px 16px 5px;border-width:3px}
.b[disabled]{opacity:.45;cursor:default;transform:none}
.qc{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.qc input{flex:1;min-width:0;border:0;border-bottom:2px solid var(--blue);background:transparent;padding:4px 2px}
.qc input::placeholder{color:var(--muted)}

/* sheets */
.sheet{background:var(--card);border:2px solid var(--ink);padding:14px 16px;min-width:0;position:relative}
.stacked{box-shadow:9px -9px 0 -2px var(--card),9px -9px 0 0 var(--ink),18px -18px 0 -2px var(--card),18px -18px 0 0 var(--ink);margin:18px 18px 0 0}
.stacked1{box-shadow:9px -9px 0 -2px var(--card),9px -9px 0 0 var(--ink);margin:9px 9px 0 0}
.peek{position:absolute;top:-33px;right:16px;display:flex;gap:6px}
.peek button{font-family:var(--hand);font-weight:700;font-size:.875rem;text-transform:uppercase;border:2px solid var(--ink);border-bottom:0;background:var(--card);color:var(--ink);cursor:pointer;padding:1px 10px 2px;line-height:1.3}
.peek button:hover{color:var(--red)}
.peek.back{top:-42px;right:6px}
.sh{font-family:var(--hand);font-weight:700;font-size:1.25rem;text-transform:uppercase;border-bottom:2px solid var(--ink);margin-bottom:10px;padding-bottom:2px;display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.sub{font-family:var(--hand);font-weight:700;color:var(--blue);text-decoration:underline;text-transform:uppercase;font-size:.875rem;margin:10px 0 4px}
.rule{border:0;border-top:2px solid var(--ink);margin:6px 0}

.home{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.1fr) minmax(0,1.2fr);gap:22px;align-items:start;padding-top:30px}
@media (max-width:900px){.home{grid-template-columns:1fr;row-gap:52px}}
.list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.list li{border-bottom:1px solid var(--line);padding:5px 0;display:flex;gap:8px;align-items:flex-start;min-width:0}
.list li:last-child{border-bottom:0}
.list .t{flex:1;min-width:0;overflow-wrap:anywhere}
.link{background:none;border:0;padding:0;cursor:pointer;text-align:left;color:inherit}
.link:hover{color:var(--blue);text-decoration:underline}
.chip{display:inline-block;font-size:.75rem;border:1px solid var(--line);border-radius:3px;padding:0 5px;color:var(--muted);white-space:nowrap;margin-left:4px}
.chip.ex{border-color:var(--green);color:var(--green)}
.chip.r{border-color:var(--red);color:var(--red)}
.dot{width:8px;height:8px;border-radius:50%;background:var(--red);flex:none;margin-top:8px}
.cb{width:18px;height:18px;border:2px solid var(--ink);background:var(--card);flex:none;cursor:pointer;margin-top:2px;display:grid;place-items:center;padding:0}
.cb.on::after{content:"✓";font-size:13px;line-height:1;color:var(--green);font-weight:700}
.empty{color:var(--muted);font-style:italic;font-size:.875rem;padding:6px 0}

/* calendar card */
.daybar{display:flex;align-items:center;justify-content:center;gap:10px;margin-bottom:10px}
.daybar .d{border:2px solid var(--red);padding:2px 12px 0;font-family:var(--hand);font-weight:700;font-size:1.25rem;text-transform:uppercase;text-align:center}
.daybar .d small{display:block;font-size:.75rem;color:var(--muted);letter-spacing:.06em}
.daycols{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width:520px){.daycols{grid-template-columns:1fr}}
.boxlab{font-family:var(--hand);font-weight:700;font-size:.875rem;text-transform:uppercase;color:var(--blue);border:2px solid var(--red);padding:0 6px;display:inline-block;margin-bottom:6px}
.slot{border-left:4px solid var(--green);background:var(--greenSoft);padding:3px 8px;margin-bottom:6px;display:flex;gap:8px;align-items:flex-start}
.brk{border:2px dashed var(--blue);border-width:0 2px;padding:2px 8px;margin:8px 0}
.brk h5{margin:0 0 2px;font-family:var(--hand);font-size:.875rem;text-transform:uppercase;color:var(--blue)}
.notes{border:2px solid var(--green);padding:6px 8px;margin-top:10px}
.notes h5{margin:0;font-family:var(--hand);color:var(--green);text-transform:uppercase;font-size:.875rem}
.notes textarea{width:100%;border:0;background:transparent;resize:vertical;min-height:54px}
.week{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));border:2px solid var(--blue);background:var(--card);overflow-x:auto}
.week button{border:0;border-right:1px solid var(--green);background:none;padding:2px 4px 4px;cursor:pointer;text-align:center;min-width:0}
.week button:last-child{border-right:0}
.week .wd{display:block;font-family:var(--hand);font-weight:700;color:var(--green);text-transform:uppercase;font-size:.875rem}
.week .th{display:block;font-size:.75rem;color:var(--blue);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-height:1.2em}
.week .sel{outline:2px solid var(--red);outline-offset:-2px}
.flags{border-top:2px solid var(--ink);padding-top:14px;display:flex;flex-direction:column;gap:10px}
.flag{display:block;padding-left:34px;text-indent:-34px;line-height:1.6;font-family:var(--hand);font-weight:700;color:var(--red);font-size:1.125rem;text-transform:uppercase;background:none;border:0;padding:0;cursor:pointer;text-align:left}
.flag svg{width:22px;height:24px;vertical-align:-5px;margin-right:12px;text-indent:0}
.flag .n{font-family:var(--mono);border-bottom:2px solid var(--red);padding:0 6px}
.flag.ok{color:var(--green)}

/* process tree */
.proc{display:grid;grid-template-columns:auto 1fr;gap:18px}
@media (max-width:700px){.proc{grid-template-columns:1fr}}
.side{display:flex;flex-direction:column;gap:12px}
.q{font-family:var(--hand);font-weight:700;font-size:1.125rem;text-transform:uppercase}
.opt{display:inline-flex;align-items:center;gap:8px;font-family:var(--hand);font-weight:700;text-transform:uppercase;background:none;border:0;cursor:pointer;padding:2px 0;font-size:1rem}
.opt i{width:28px;height:20px;border:2px solid var(--ink);display:inline-block;font-style:normal;text-align:center;line-height:16px;font-size:14px}
.opt.on i{background:var(--ink);color:var(--card)}
.opt.on{color:var(--blue)}
.branch{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:10px}
@media (max-width:760px){.branch{grid-template-columns:1fr}}
.goto{font-family:var(--hand);font-weight:700;color:var(--red);text-transform:uppercase}
.node{border-left:2px solid var(--blue);padding-left:12px;margin:8px 0 4px;display:flex;flex-direction:column;gap:8px}
.timer{font-family:var(--mono);font-size:2rem}
.timer.done{color:var(--red)}

/* forms */
.f{display:flex;flex-direction:column;gap:3px;min-width:0}
.f > span{font-family:var(--hand);font-weight:700;font-size:.875rem;text-transform:uppercase;color:var(--blue)}
.f input,.f select,.f textarea,.inp{border:1px solid var(--line);border-bottom:2px solid var(--blue);background:var(--card);padding:5px 7px;min-width:0;width:100%}
.f textarea{min-height:70px;resize:vertical}
.grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}
.verbs{display:flex;flex-wrap:wrap;gap:4px}
.verbs button{font-size:.75rem;border:1px solid var(--line);background:var(--soft);padding:1px 6px;cursor:pointer;border-radius:2px}
.seg{display:flex;flex-wrap:wrap;gap:4px}
.seg button{border:1px solid var(--line);background:var(--card);padding:2px 9px;cursor:pointer;font-size:.875rem}
.seg button.on{background:var(--blue);color:var(--card);border-color:var(--blue)}
.dt{display:flex;flex-direction:column;gap:4px;border:1px solid var(--line);padding:8px;position:relative}
.dt label{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.dt .one{position:absolute;right:8px;top:6px;font-family:var(--hand);font-weight:700;color:var(--red);border:2px solid var(--red);padding:0 5px;font-size:.875rem}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:18px;align-items:start}
.lined{border:2px solid var(--ink);background:var(--card);padding:4px 12px 14px;min-height:340px;
  background-image:linear-gradient(transparent calc(2.4em - 1px),var(--line) 1px);background-size:100% 2.4em}
.lined input{display:block;width:100%;border:0;background:transparent;height:2.4em;padding:0 2px}
.bubble{border:2px solid var(--green);color:var(--green);padding:6px 10px;font-family:var(--hand);font-weight:700;font-size:.875rem;background:var(--card)}
.bubble button{display:block;background:none;border:0;color:inherit;cursor:pointer;padding:1px 0;text-align:left;font:inherit}
.bubble button:hover{text-decoration:underline}
.filters{display:flex;flex-wrap:wrap;gap:14px;align-items:flex-end;border:2px solid var(--blue);background:var(--card);padding:10px 12px}
.ctxh{display:flex;justify-content:space-between;align-items:baseline}
.tbl{width:100%;border-collapse:collapse;font-size:.875rem}
.tbl th{font-family:var(--hand);font-weight:700;text-transform:uppercase;font-size:.875rem;color:var(--blue);text-align:left;border-bottom:2px solid var(--blue);padding:4px 6px}
.tbl td{border-bottom:1px solid var(--line);padding:5px 6px;vertical-align:top}
.scroll{overflow-x:auto}
.mgrid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:2px}
.mgrid > .mcell{display:block;width:100%;text-align:left;font:inherit;color:inherit;background:var(--card);border:1px solid var(--line);min-height:76px;padding:3px;font-size:.75rem;cursor:pointer;min-width:0;overflow:hidden}
.mgrid .n{font-family:var(--mono)}
.mgrid .td{border:2px solid var(--red)}
.mgrid .ev{display:block;background:var(--greenSoft);margin-top:2px;padding:0 3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wgrid{display:grid;grid-template-columns:repeat(7,minmax(130px,1fr));gap:8px}
.coach{border:2px solid var(--blue);padding:12px 14px;background:var(--card)}
.coach p{margin:0 0 8px}
.steps{display:flex;flex-direction:column;gap:2px}
.step{display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:start;padding:7px 0;border-bottom:1px solid var(--line)}
.step .sq{font-size:.875rem;color:var(--muted)}
.toast{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);background:var(--ink);color:var(--card);padding:8px 16px;font-weight:600;z-index:60;max-width:calc(100% - 32px)}
#modal{position:fixed;inset:0;z-index:50;display:grid;place-items:center;padding:16px}
.mback{position:absolute;inset:0;background:rgba(10,15,35,.45)}
.mbox{position:relative;background:var(--card);border:2px solid var(--ink);box-shadow:6px 6px 0 var(--ink);padding:18px;width:min(640px,100%);max-height:calc(100% - 20px);overflow:auto;display:flex;flex-direction:column;gap:12px}
.mbox h3{font-family:var(--hand);text-transform:uppercase;font-size:1.25rem}
.actions{display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end;margin-top:4px}
.txtbtn{background:none;border:0;color:var(--muted);cursor:pointer;text-decoration:underline;padding:0;font-size:.875rem}
.txtbtn:hover{color:var(--red)}
.banner{border:2px solid var(--green);background:var(--greenSoft);padding:8px 12px;display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;align-items:center;font-size:.875rem}

/* project sheet per sketch */
.psheet{display:flex;flex-direction:column;gap:14px}
.ptop{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between}
.ptop #pjtitle{font-size:1.5rem;flex:1;min-width:0;width:100%;max-width:520px}
.cols2{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:16px}
.pgrid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr) minmax(0,1fr);gap:18px;align-items:start}
.pcol{display:flex;flex-direction:column;gap:12px;min-width:0}
.refbox{border:2px solid var(--ink);padding:10px;background:var(--soft)}
.procnote{border:2px dashed var(--blue);padding:8px 10px;background:var(--card)}
@media (max-width:900px){.pgrid{grid-template-columns:1fr}.cols2{grid-template-columns:1fr}}
.tabbar{display:none}

/* phone */
@media (max-width:700px){
  body{padding-block:10px calc(84px + env(safe-area-inset-bottom,0px));font-size:16px}
  input,select,textarea{font-size:16px!important}
  .top{gap:8px;align-items:center}
  .brand{font-size:1.25rem}.brand small{display:none}
  .label{min-width:0;padding:4px 10px 2px}.label .hand{font-size:1.125rem}.label .sc{display:none}
  .nav{grid-template-columns:1fr;gap:10px}
  .trays{display:none}
  .btns{flex-wrap:nowrap;overflow-x:auto;padding:2px 8px 8px 2px;margin-inline:-4px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .btns::-webkit-scrollbar{display:none}
  .b{white-space:nowrap;flex:none}
  .wrap{gap:14px}
  .sheet{padding:12px}
  .stacked{box-shadow:6px -6px 0 -2px var(--card),6px -6px 0 0 var(--ink),12px -12px 0 -2px var(--card),12px -12px 0 0 var(--ink);margin:12px 12px 0 0}
  .home{row-gap:46px}
  .list li{padding:8px 0}
  .cb{width:24px;height:24px}
  .link{min-height:28px}
  .filters{padding:10px}
  .seg{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}.seg::-webkit-scrollbar{display:none}
  .seg button{flex:none;padding:6px 11px}
  .verbs button{padding:4px 8px;font-size:.875rem}
  .chip{padding:2px 7px}
  .flags .flag{font-size:1rem}
  .week .th{display:none}
  .wgrid{grid-template-columns:repeat(7,minmax(150px,1fr))}
  #modal{place-items:end stretch;padding:0}
  .mbox{width:100%;max-height:92%;border-width:2px 0 0;box-shadow:none;padding:16px max(16px,env(safe-area-inset-left,0px)) calc(16px + env(safe-area-inset-bottom,0px))}
  .toast{bottom:calc(84px + env(safe-area-inset-bottom,0px))}
  .tabbar{display:grid;grid-template-columns:repeat(5,1fr);position:fixed;left:0;right:0;bottom:0;z-index:40;background:var(--card);border-top:2px solid var(--ink);
    padding:6px max(8px,env(safe-area-inset-right,0px)) calc(6px + env(safe-area-inset-bottom,0px)) max(8px,env(safe-area-inset-left,0px))}
  .tabbar button{background:none;border:0;display:flex;flex-direction:column;align-items:center;gap:2px;font-family:var(--hand);font-weight:700;font-size:.75rem;text-transform:uppercase;color:var(--muted);padding:4px 0;cursor:pointer;position:relative}
  .tabbar button svg{width:26px;height:26px}
  .tabbar button.on{color:var(--red)}
  .tabbar .badge{position:absolute;top:0;left:calc(50% + 6px);font-family:var(--mono);font-size:.6875rem;background:var(--red);color:var(--card);border-radius:9px;padding:0 5px}
  .tabbar .plus{color:var(--card)}
  .tabbar .plus span.pl{width:44px;height:44px;margin-top:-18px;border:2px solid var(--ink);background:var(--blue);box-shadow:3px 3px 0 var(--ink);display:grid;place-items:center;font-size:2rem;line-height:1}
}

/* iOS structure on phone */
.iosbar{display:none}
@media (max-width:700px){
  .top,.nav,.flags-desk{display:none!important}
  .iosbar{display:grid;grid-template-columns:1fr auto;grid-template-areas:"back plus" "title title";position:sticky;top:env(safe-area-inset-top,0px);z-index:30;
    background:color-mix(in srgb,var(--paper) 92%,transparent);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);margin:-10px calc(-1*max(16px,env(safe-area-inset-left,0px))) 0;padding:6px max(16px,env(safe-area-inset-left,0px)) 8px;border-bottom:1px solid var(--line)}
  body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:31;background:var(--paper)}
  .iback{grid-area:back;justify-self:start;display:flex;align-items:center;gap:4px;background:none;border:0;color:var(--blue);font:inherit;font-size:17px;min-height:44px;padding:0;cursor:pointer}
  .iback svg{width:12px;height:20px}
  .iplus{grid-area:plus;width:44px;height:44px;display:grid;place-items:center;background:none;border:0;color:var(--blue);cursor:pointer}
  .iplus svg{width:22px;height:22px}
  .ititle{grid-area:title;margin:0;font-size:2rem;line-height:1.1;color:var(--ink)}
  .phome{display:flex;flex-direction:column;gap:16px}
  .tiles{display:grid;grid-template-columns:1fr 1fr;gap:10px}
  .tile{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;align-items:center;gap:6px 8px;text-align:left;background:var(--card);border:2px solid var(--ink);border-radius:12px;padding:10px 12px;min-height:84px;cursor:pointer;box-shadow:3px 3px 0 var(--ink)}
  .tile:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink)}
  .ti{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;color:var(--card)}
  .ti svg{width:18px;height:18px}
  .tn{justify-self:end;font-family:var(--hand);font-weight:700;font-size:2rem;line-height:1;font-variant-numeric:tabular-nums}
  .tl{grid-column:1/-1;font-family:var(--hand);font-weight:700;font-size:1rem;text-transform:uppercase;color:var(--muted)}
  .t-in .ti{background:var(--red)}.t-na .ti{background:var(--blue)}.t-pr .ti{background:var(--ink)}.t-wf .ti{background:var(--green)}
  .pflags{display:flex;flex-direction:column;gap:6px}
  .pflag{display:flex;align-items:center;gap:10px;background:var(--redSoft);border:0;border-radius:10px;color:var(--red);font-family:var(--hand);font-weight:700;font-size:1rem;padding:10px 12px;text-align:left;cursor:pointer;min-height:44px}
  .pflag svg{width:18px;height:20px;flex:none}
  .igroup{background:var(--card);border:2px solid var(--ink);border-radius:12px;padding:10px 14px}
  .ghead{display:flex;justify-content:space-between;align-items:baseline;font-family:var(--hand);font-weight:700;text-transform:uppercase;font-size:1rem;border-bottom:2px solid var(--ink);padding-bottom:4px;margin-bottom:4px}
  .ghead .link{font-family:var(--body);text-transform:none;font-weight:600;font-size:.875rem}
  .irows{display:flex;flex-direction:column}
  .irow{display:grid;grid-template-columns:1fr auto 10px;gap:10px;align-items:center;background:none;border:0;border-bottom:1px solid var(--line);min-height:46px;font:inherit;font-size:17px;color:var(--ink);text-align:left;cursor:pointer;padding:0}
  .irow:last-child{border-bottom:0}
  .irow .ic{color:var(--muted);font-variant-numeric:tabular-nums}
  .irow svg{width:8px;height:14px;color:var(--muted)}
  .home .sheet{border-radius:12px}
  .tile{min-height:0;padding:8px 10px;gap:2px 8px}.tn{font-size:1.75rem}.tl{font-size:.875rem}.ti{width:28px;height:28px}
  .filters{gap:10px}.filters > .b{display:none}.filters + p.muted{display:none}
  .list li > .mono.muted{display:none}
  .sheet .sh{font-size:1.125rem}
  .cols,.wgrid{grid-template-columns:1fr!important}
  .wgrid{display:flex;flex-direction:column}
  .tabbar{grid-template-columns:repeat(5,1fr)}
  .tabbar button{min-height:46px;font-family:var(--body);font-weight:600;font-size:.6875rem;text-transform:none}
}
@media (prefers-reduced-motion:reduce){.b{transition:none}}

/* ---- components added later, drawn in the same ink-on-grid style ---- */
.sidebar,.mtool{display:none}
.peek .seg{display:none}
.slot.allday{border-left-color:var(--blue);background:var(--soft)}
.slot.tick{border-left-color:var(--red);background:var(--redSoft)}
.week .wd b{font-weight:700;margin-left:3px}
.week .istoday .wd{color:var(--red)}
.mgrid > b{text-align:center}
.flag{display:flex;gap:12px;align-items:center}
.flag span{flex:1}
/* sheets (modal) header */
.mhead{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:8px;border-bottom:2px solid var(--ink);padding-bottom:8px;margin-bottom:2px}
.mhead h3{font-family:var(--hand);font-weight:700;font-size:1.25rem;text-transform:uppercase;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mhead .ml,.mhead .mr{background:none;border:0;cursor:pointer;font-family:var(--hand);font-weight:700;font-size:1rem;text-transform:uppercase;padding:4px 0}
.mhead .ml{justify-self:start;color:var(--muted)}
.mhead .mr{justify-self:end;color:var(--green)}
.mbox > h3{display:none}
.delrow{background:none;border:2px solid var(--red);color:var(--red);font-family:var(--hand);font-weight:700;text-transform:uppercase;padding:8px;cursor:pointer;width:100%}
/* grouped form rows (event, communication) */
.grp{border:2px solid var(--ink);background:var(--card);padding:2px 12px}
.grp > * + *{border-top:1px solid var(--line)}
.grow{display:flex;justify-content:space-between;align-items:center;gap:10px;min-height:44px;flex-wrap:wrap}
.grow > span:first-child{font-family:var(--hand);font-weight:700;text-transform:uppercase;color:var(--blue);font-size:.875rem}
.grp .grow input,.grp .grow select{width:auto;max-width:100%;border:1px solid var(--line);border-bottom:2px solid var(--blue);background:var(--card);padding:4px 6px}
.grp input.full,.grp textarea.full{width:100%;border:0;background:none;padding:11px 0}
.grp textarea.full{min-height:90px;resize:vertical}
.grp input[type=date]{width:145px}.grp input[type=time]{width:118px}
.grp input[type=checkbox]{width:20px;height:20px;accent-color:var(--green)}
.tpair{display:grid;grid-template-columns:1fr 1fr;gap:8px}
/* communication */
.ccomp{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:20px;align-items:start}
@media (max-width:900px){.ccomp{grid-template-columns:1fr}}
.compose{padding:6px 16px 12px}
.crow{display:flex;align-items:center;gap:8px;border-bottom:1px solid var(--line);min-height:46px}
.crow span{font-family:var(--hand);font-weight:700;text-transform:uppercase;color:var(--blue)}
.crow input{flex:1;border:0;background:none;min-width:0;padding:10px 0}
.cbody{width:100%;border:0;min-height:260px;resize:vertical;padding:12px 0;line-height:2.4em;
  background:transparent linear-gradient(transparent calc(2.4em - 1px),var(--line) 1px) 0 0/100% 2.4em}
.cside{display:flex;flex-direction:column;gap:16px}
.sgroup{display:flex;flex-direction:column;gap:6px}
.shead{font-family:var(--hand);font-weight:700;text-transform:uppercase;color:var(--ink);font-size:1rem;display:flex;justify-content:space-between}
.cvia{display:flex;flex-direction:column}
.cvia .grow,.grp button.grow{background:none;border:0;width:100%;text-align:left;cursor:pointer;color:var(--ink);font-family:var(--body)}
.cvia .grow + .grow{border-top:1px solid var(--line)}
.cvia .grow > span:first-child,.grp button.grow > span:first-child{font-family:var(--body);font-weight:400;text-transform:none;color:inherit;font-size:1rem}
.grp button.grow.blue{color:var(--blue)}
.grp button.grow.blue > span:first-child{font-family:var(--hand);font-weight:700;text-transform:uppercase;font-size:.875rem}
.cvia .ck{color:var(--green);font-weight:700;visibility:hidden}
.cvia .on .ck{visibility:visible}
.cvia .on > span:first-child{color:var(--red)!important;font-weight:600!important}
a.b{text-decoration:none;color:var(--ink)}
/* library (phone home) */
.irows{display:flex;flex-direction:column;background:var(--card);border:2px solid var(--ink)}
.irow{display:grid;grid-template-columns:auto 1fr auto 10px;gap:10px;align-items:center;background:none;border:0;border-bottom:1px solid var(--line);min-height:46px;color:var(--ink);text-align:left;cursor:pointer;padding:0 12px}
.irow:last-child{border-bottom:0}
.irow .ri{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;color:var(--card);border:2px solid var(--ink)}
.irow .ri svg{width:15px;height:15px}
.irow .ic{color:var(--muted);font-family:var(--mono);font-size:.875rem}
.irow svg.chev{width:8px;height:14px;color:var(--muted)}
.tiles{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.tile{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;align-items:center;gap:4px 8px;text-align:left;background:var(--card);border:2px solid var(--ink);padding:9px 11px;cursor:pointer;box-shadow:3px 3px 0 var(--ink)}
.tile:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink)}
.ti{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;color:var(--card);border:2px solid var(--ink)}
.ti svg{width:16px;height:16px}
.tn{justify-self:end;font-family:var(--hand);font-weight:700;font-size:1.75rem;line-height:1}
.tl{grid-column:1/-1;font-family:var(--hand);font-weight:700;font-size:.875rem;text-transform:uppercase;color:var(--muted)}
.c-red{background:var(--red)}.c-blue{background:var(--blue)}.c-orange{background:#d9822b}.c-green{background:var(--green)}.c-purple{background:#7a4fb0}.c-gray{background:var(--muted)}.c-teal{background:#1f8a8a}.c-indigo{background:#4b4fc4}.c-pink{background:#c2417a}.c-brown{background:#8a6a45}.c-yellow{background:#c9a227}
.phome{display:flex;flex-direction:column;gap:18px}
.pflags{display:flex;flex-direction:column;gap:8px}
.pflag{display:flex;align-items:center;gap:10px;background:none;border:0;color:var(--red);font-family:var(--hand);font-weight:700;font-size:1rem;text-transform:uppercase;padding:4px 0;text-align:left;cursor:pointer;min-height:40px}
.pflag svg{width:20px;height:22px;flex:none}
.sfield,.addlist{display:none}
/* drag to reorder */
.grip{background:none;border:0;padding:0;font:inherit;flex:none;width:18px;align-self:stretch;display:flex;align-items:center;justify-content:center;color:var(--muted);cursor:grab;touch-action:none;opacity:0;transition:opacity .15s;font-size:13px;letter-spacing:-2px;user-select:none;-webkit-user-select:none;margin-left:-4px}
.list li:hover .grip{opacity:.8}
.list li.dragging{background:var(--soft);outline:2px dashed var(--blue);outline-offset:2px;z-index:2}
.list li.dragging .grip{opacity:1;cursor:grabbing}
body.dragmode{user-select:none;-webkit-user-select:none;cursor:grabbing}
@media (hover:none){.grip{opacity:.55}}

/* ===== Leesbaarheid, raakvlakken, één kleur = één betekenis ===== */
/* Allen's hand stays for titles, sheets, flags and boxed nav buttons; small labels use the reading face */
.f > span,.sub,.boxlab,.brk h5,.notes h5,.week .wd,.goto,.opt,.grow > span:first-child,.crow span,.tl,.peek button,.b.sm,.tabbar button,.chip,.mhead .ml,.mhead .mr,.pflag,.shead{
  font-family:var(--body)!important;text-transform:none!important;letter-spacing:0!important}
.f > span{font-size:.875rem;font-weight:600;color:var(--blue)}
.sub{font-size:.875rem;font-weight:700;text-transform:uppercase!important;letter-spacing:.04em!important;text-decoration:none;color:var(--blue)}
.boxlab{font-size:.875rem;font-weight:700;text-transform:uppercase!important;letter-spacing:.04em!important}
.brk h5,.notes h5{font-size:.875rem;font-weight:700;text-transform:uppercase!important;letter-spacing:.04em!important}
.week .wd{font-weight:600;font-size:.875rem}
.goto{font-weight:600;color:var(--blue)}
.opt{font-weight:600;font-size:1rem}
.tl{font-weight:600;font-size:.875rem}
.b.sm{font-weight:600;font-size:.875rem;padding:3px 10px;min-height:30px}
.peek button{font-weight:600;font-size:.875rem;min-height:30px}
.chip{font-size:.75rem}
.pflag{font-weight:600;font-size:1rem;text-transform:none!important}
.shead{font-family:var(--hand)!important;font-weight:700;text-transform:uppercase!important}
.mhead .ml,.mhead .mr{font-size:1rem}
.mhead .mr{font-weight:700}
/* selection = blue, warnings = red */
.b.on{border-color:var(--sel);box-shadow:3px 3px 0 var(--sel);color:var(--sel)}
.tray.on svg rect,.tray.on svg path{stroke:var(--sel)}
.week .sel{outline-color:var(--sel)}
.link.red{color:var(--sel);font-weight:600}
.cvia .on > span:first-child{color:var(--sel)!important}
/* hit regions: visible mark stays small, target grows */
.cb{position:relative}
.cb::before{content:"";position:absolute;inset:-10px}
.grip{width:28px;opacity:.35;font-size:15px}
.grip:focus-visible{opacity:1;outline:2px solid var(--blue)}
.c-orange{background:#a8650f}.c-yellow{background:#8a6a0d}.c-teal{background:#1a7676}
/* sketch switch for list-row toggles */
.grp input[type=checkbox],input[type=checkbox].sw{appearance:none;-webkit-appearance:none;width:46px!important;height:28px!important;border:2px solid var(--ink);border-radius:999px;background:var(--card);position:relative;cursor:pointer;flex:none;margin:0;transition:background .15s}
.grp input[type=checkbox]::before,input[type=checkbox].sw::before{content:"";position:absolute;top:2px;left:2px;width:20px;height:20px;border-radius:50%;background:var(--ink);transition:transform .15s}
.grp input[type=checkbox]:checked,input[type=checkbox].sw:checked{background:var(--green)}
.grp input[type=checkbox]:checked::before,input[type=checkbox].sw:checked::before{transform:translateX(18px);background:var(--card)}
/* toast with undo */
.toast{display:flex;gap:14px;align-items:center}
.toast button{background:none;border:0;color:var(--card);font:inherit;font-weight:700;text-decoration:underline;cursor:pointer;padding:6px 0;min-height:32px}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}

/* phone: Dynamic Type, 44pt targets, legible tab bar, grabber */
@media (max-width:700px){
  @supports (font:-apple-system-body){html{font:-apple-system-body}}
  body{font-size:1rem}
  input,select,textarea{font-size:max(16px,1rem)!important}
  .cb{width:24px;height:24px}
  .grip{width:36px;opacity:.5}
  .b{min-height:40px}
  .b.sm,.peek button,button.chip,.verbs button,.seg button,.txtbtn{min-height:36px}
  .txtbtn{display:inline-flex;align-items:center}
  .tabbar button{font-size:max(11px,.72rem);font-weight:600}
  .tabbar button.on{color:var(--sel)}
  .tabbar button.on svg{fill:currentColor;fill-opacity:.2}
  .mhead{position:relative;padding-top:18px;touch-action:none}
  .mhead::before{content:"";position:absolute;top:4px;left:50%;width:40px;height:5px;border-radius:3px;background:var(--ink);opacity:.35;transform:translateX(-50%)}
}

/* ===== Calm pass: Allen's structure, Apple's surface. Paper grid gone, soft cards, one accent per meaning ===== */
body{background:var(--paper);background-image:none;font-family:var(--body);-webkit-font-smoothing:antialiased;letter-spacing:-.005em}
.hand{font-family:var(--body);letter-spacing:-.01em}
.brand{font-family:var(--hand);color:var(--ink)}
.brand small{font-weight:500}
.label{border:0;background:none;padding:0;min-width:0}
.label .hand{font-size:1.25rem;font-weight:700;text-transform:none;color:var(--muted)}

/* buttons: quiet pills */
.b{font-family:var(--body);font-weight:600;font-size:.875rem;letter-spacing:0;text-transform:none;background:var(--card);color:var(--ink);
  border:1px solid var(--line);box-shadow:none;border-radius:999px;padding:6px 14px;line-height:1.25;transition:background .15s,border-color .15s}
.b:hover{transform:none;box-shadow:none;background:var(--fill)}
.b:active{transform:scale(.97);box-shadow:none}
.b.on{background:var(--ink);border-color:var(--ink);color:var(--card);box-shadow:none}
.b.sm{font-size:.875rem;padding:4px 12px;min-height:30px}
.b.big{font-size:1rem;padding:10px 20px;border-width:1px}
.b.green{background:var(--green);border-color:var(--green);color:#fff;box-shadow:none}
.b.green:hover{filter:brightness(1.06);background:var(--green)}
.b.redb{background:var(--redSoft);border-color:transparent;color:var(--red);box-shadow:none}
.b.redb:hover{background:var(--red);color:#fff}
.proc .side .b.green{background:var(--greenSoft);color:var(--green);border-color:transparent}
.proc .side .b.green:hover{background:var(--green);color:#fff}
.btns{gap:6px}
.nav .btns .b{background:none;border-color:transparent;font-weight:500;color:var(--ink);padding:6px 12px}
.nav .btns .b:hover{background:var(--fill)}
.nav .btns .b.on{background:var(--ink);color:var(--card)}
.qc input{border:1px solid var(--line);border-radius:10px;background:var(--card);padding:9px 12px}
.qc input:focus{outline:2px solid var(--blue);outline-offset:0;border-color:transparent}
.tray svg{opacity:.85}
.tray .ct{background:var(--red);color:#fff}

/* sheets: soft cards; Allen's stacked pages stay, but as a quiet hint */
.sheet{background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);padding:16px 18px}
.stacked{box-shadow:var(--shadow),8px -8px 0 -1px var(--card),8px -8px 0 0 var(--line),16px -16px 0 -1px var(--card),16px -16px 0 0 var(--line)}
.stacked1{box-shadow:var(--shadow),8px -8px 0 -1px var(--card),8px -8px 0 0 var(--line)}
.sh{font-family:var(--body);font-size:1.125rem;font-weight:700;text-transform:none;letter-spacing:-.01em;border-bottom:1px solid var(--line);padding-bottom:8px;margin-bottom:8px;align-items:center}
.sub{color:var(--muted);font-size:.75rem!important;letter-spacing:.06em!important;margin:14px 0 2px}
.rule{border-top:1px solid var(--line)}
.peek button{font-family:var(--body);text-transform:none;border:1px solid var(--line);border-bottom:0;border-radius:10px 10px 0 0;background:var(--card);color:var(--muted);font-weight:600}
.peek button:hover{color:var(--blue)}
.list li{border-bottom:1px solid var(--line);padding:7px 0;align-items:center}
.link{color:var(--ink)}
.link:hover{color:var(--blue);text-decoration:none}
.link.blue,.blue{color:var(--blue)}
.chip{border:0;background:var(--fill);color:var(--muted);border-radius:999px;padding:1px 8px;font-size:.75rem}
.chip.r{background:var(--redSoft);color:var(--red)}
.chip.ex{background:var(--greenSoft);color:var(--green)}
.cb{border:1.5px solid var(--control);border-radius:50%;background:none}
.cb.on{background:var(--blue);border-color:var(--blue)}
.cb.on::after{color:#fff;font-size:11px}
.empty{font-style:normal}
.txtbtn{text-decoration:none;color:var(--blue)}
.txtbtn:hover{color:var(--blue);text-decoration:underline}

/* fix overlaps: flags and week hint */
.flags{border-top:0;padding-top:4px;flex-direction:row;flex-wrap:wrap;gap:8px}
.flag{display:inline-flex;align-items:center;gap:8px;padding:8px 14px!important;text-indent:0!important;line-height:1.3;
  font-family:var(--body);font-weight:600;font-size:.875rem;text-transform:none;background:var(--redSoft);color:var(--red);border-radius:999px}
.flag svg{width:15px;height:16px;margin:0;vertical-align:0;flex:none}
.flag span{flex:none}
.flag .n{border:0;padding:0}
.flag.ok{background:var(--greenSoft);color:var(--green)}
.weekhint{font-size:12px;margin:6px 0 0;text-align:center}

/* home on one screen: each sheet scrolls inside itself */
.home{padding-top:22px;gap:20px}
.scrollin{max-height:max(220px,calc(100vh - 520px));overflow:auto;margin-right:-8px;padding-right:8px;scrollbar-width:thin}

/* lists: chips wrap inside the card */
.list .t{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 6px}
.list .t > .link{flex:0 1 auto}
.list .t .chip{margin-left:0;max-width:100%;overflow:hidden;text-overflow:ellipsis}
.list .t .muted,.list .t > div,.list .t .meta{flex-basis:100%}
.home .list li > .mono{display:none}
.list li > .mono.muted{font-size:.75rem;opacity:.75;white-space:nowrap}
.actcols{grid-template-columns:repeat(auto-fill,minmax(300px,1fr))!important}
/* calendar card */
@media (min-width:701px){.agday .daycols{grid-template-columns:1fr 1fr}}
.notes textarea{min-height:40px}
.brk .empty,.daycols .empty{padding:2px 0}
.daybar .d{border:0;font-family:var(--body);font-size:1.125rem;font-weight:700;text-transform:none;padding:0 10px}
.daybar .d small{font-weight:600;text-transform:uppercase;color:var(--red)}
.boxlab{border:0;padding:0;color:var(--muted)}
.slot{border-left-width:3px;border-radius:6px;padding:5px 9px}
.brk{border:0;border-left:2px solid var(--line);padding:2px 10px}
.notes{border:1px solid var(--line);border-radius:10px;padding:8px 10px}
.week{border:1px solid var(--line);border-radius:12px;overflow:hidden;box-shadow:var(--shadow)}
.week button{border-right:1px solid var(--line);padding:6px 4px}
.week .wd{color:var(--muted)}
.week .th{color:var(--blue)}
.week .sel{outline:0;background:var(--soft)}
.week .istoday .wd{color:var(--red)}
.mgrid > .mcell{border-radius:6px;border-color:var(--line)}
.mgrid .td{border:2px solid var(--red)}

/* forms */
.f > span{color:var(--muted)!important;font-weight:600}
.f input,.f select,.f textarea,.inp{border:1px solid var(--line);border-radius:9px;background:var(--card);padding:8px 10px}
.f input:focus,.f select:focus,.f textarea:focus,.inp:focus{outline:2px solid var(--blue);outline-offset:-1px}
.seg{background:var(--fill);border-radius:10px;padding:2px;gap:2px;display:inline-flex;flex-wrap:wrap}
.seg button{border:0;background:none;border-radius:8px;padding:5px 12px;font-weight:500;color:var(--ink)}
.seg button.on{background:var(--card);color:var(--ink);box-shadow:0 1px 3px rgba(0,0,0,.12);font-weight:600}
.filters{border:0;background:none;padding:0;align-items:flex-end;gap:16px}
.sortf select{width:auto}
.dt{border:1px solid var(--line);border-radius:12px;padding:12px}
.dt .one{border:0;background:var(--redSoft);border-radius:999px;padding:1px 8px}
.verbs button{border:0;background:var(--fill);border-radius:999px;padding:3px 10px}
.opt i{border-radius:6px;border:1.5px solid var(--control)}
.opt.on i{background:var(--blue);border-color:var(--blue);color:#fff}
.q{font-family:var(--body);text-transform:none;font-weight:700}
.goto{color:var(--red)}
.node{border-left:2px solid var(--line)}
.lined{border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow)}
.bubble{border:1px solid var(--line);background:var(--card);border-radius:12px;color:var(--ink);font-family:var(--body);font-weight:500;box-shadow:var(--shadow)}
.bubble button{padding:3px 0}
.bubble button:hover{color:var(--blue);text-decoration:none}
.intitle{font-size:1.75rem;font-weight:700;letter-spacing:-.02em}
.grp{border:1px solid var(--line);border-radius:12px}
.mbox{border:0;border-radius:18px;box-shadow:0 24px 70px rgba(0,0,0,.28)}
.mhead{border-bottom:1px solid var(--line)}
.mhead h3{font-family:var(--body);text-transform:none;font-size:1rem}
.mhead .ml,.mhead .mr{font-family:var(--body);text-transform:none}
.mhead .mr{color:var(--blue)}
.delrow{border:0;background:var(--redSoft);border-radius:12px;font-family:var(--body);text-transform:none}
.banner{border:0;border-radius:12px}
.coach{border:1px solid var(--line);border-radius:12px}
.toast{border-radius:999px;padding:10px 18px}
.tile{border:0;border-radius:14px;box-shadow:var(--shadow)}
.ti,.irow .ri{border:0}
.tn{font-family:var(--body)}
.irows{border:0;border-radius:12px;box-shadow:var(--shadow)}
.tabbar{border-top:1px solid var(--line);background:color-mix(in srgb,var(--card) 85%,transparent);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px)}
.tabbar .plus span.pl{border:0;box-shadow:none;border-radius:50%}
.shead{font-family:var(--body)!important;text-transform:none!important;font-weight:700}
.pflag{background:var(--redSoft);border-radius:12px;padding:10px 12px}
.tbl th{font-family:var(--body);text-transform:none;color:var(--muted);border-bottom:1px solid var(--line)}

/* someday collection lists */
.grouph{font-size:1.125rem;font-weight:700;margin:0}
.swl{display:inline-flex;align-items:center;gap:6px;font-size:.875rem;font-weight:500;color:var(--muted);cursor:pointer}
input[type=checkbox].sw{width:36px!important;height:22px!important;border:0;background:var(--fill)}
input[type=checkbox].sw::before{width:18px;height:18px;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25)}
input[type=checkbox].sw:checked{background:var(--green)}
input[type=checkbox].sw:checked::before{transform:translateX(14px);background:#fff}
.xbtn{background:none;border:0;color:var(--muted);font-size:1.125rem;line-height:1;width:28px;height:28px;border-radius:50%;cursor:pointer;opacity:.5;flex:none}
.xbtn:hover{opacity:1;background:var(--redSoft);color:var(--red)}

/* waiting for */
.narrow{max-width:820px}
.list.wf .t .meta{display:block;font-size:.875rem;color:var(--muted);margin-top:1px}
.list.wf .late{color:var(--red)}

/* side lists (areas, reference, checklists) */
.areacols,.refcols{grid-template-columns:minmax(200px,.6fr) minmax(0,2fr)!important}
@media (max-width:760px){.areacols,.refcols{grid-template-columns:1fr!important}}
.navlist{display:flex;flex-direction:column;gap:2px}
.navlist.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:6px}
.navlist.grid .nrow{background:var(--fill)}
.nrow{display:flex;justify-content:space-between;align-items:center;gap:10px;background:none;border:0;border-radius:9px;padding:8px 10px;text-align:left;cursor:pointer;color:var(--ink);font:inherit;min-height:38px}
.nrow:hover{background:var(--fill)}
.nrow.on{background:var(--blue);color:#fff}
.nrow.on .muted{color:rgba(255,255,255,.8)}
.areacard{display:flex;flex-direction:column;gap:16px;padding:22px 24px}
.eyebrow{font-size:.75rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}
.titleinp{font-size:1.75rem!important;font-weight:700;border:0!important;padding:0!important;background:none!important;margin-top:-10px}
.chips{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.tag{display:inline-flex;align-items:center;gap:2px;background:var(--fill);border-radius:999px;padding:3px 4px 3px 11px;font-size:.875rem}
.tag button{background:none;border:0;color:var(--muted);cursor:pointer;width:22px;height:22px;border-radius:50%;font-size:1rem;line-height:1}
.tag button:hover{background:var(--redSoft);color:var(--red)}
.tagadd input{border:1px dashed var(--line);border-radius:999px;padding:4px 11px;background:none;font-size:.875rem;width:150px}
textarea.grow{min-height:96px;resize:none;overflow:hidden;line-height:1.5}
textarea.big{min-height:160px;font-size:1rem}
.cols.three{grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:18px}
.cols.two{grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px}
.divider{display:flex;align-items:center;gap:12px;color:var(--muted);font-size:.75rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase}
.divider::before,.divider::after{content:"";flex:1;border-top:1px solid var(--line)}

/* agendas switch */
.agtop{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:14px}
.pills{gap:6px;margin-bottom:6px}
.pill{background:var(--card);border:1px solid var(--line);border-radius:999px;padding:5px 12px;cursor:pointer;font:inherit;font-size:.875rem;color:var(--ink)}
.pill.on{background:var(--ink);color:var(--card);border-color:var(--ink)}
.pill .n{color:var(--blue);font-weight:700;margin-left:2px}
.pill.on .n{color:inherit}
.pill.add{border-style:dashed;color:var(--blue)}

/* horizons */
.hzwrap{display:flex;flex-direction:column;gap:14px;max-width:900px}
.hz{display:grid;grid-template-columns:56px 1fr;gap:16px;background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);padding:20px 22px}
.hzn{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--soft);color:var(--blue);font-weight:700;font-size:1.125rem}
.hzb h3{font-size:1.25rem;letter-spacing:-.01em}
.hzb .q{margin:2px 0 12px;font-size:.875rem;font-weight:400}
.hzb textarea{width:100%;border:1px solid var(--line);border-radius:10px;padding:12px 14px;background:var(--paper);font:inherit}
.hzb textarea:focus{outline:2px solid var(--blue);outline-offset:-1px;background:var(--card)}
.acards{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px}
.acard{display:flex;flex-direction:column;gap:4px;text-align:left;background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:12px 14px;cursor:pointer;font:inherit;color:var(--ink)}
.acard:hover{border-color:var(--blue)}
.acard .muted{font-size:.875rem}
.acard.add{align-items:center;justify-content:center;color:var(--blue);border-style:dashed;font-weight:600}
@media (max-width:600px){.hz{grid-template-columns:1fr}.hzl{display:none}}
.revwrap{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(260px,1fr);gap:22px;align-items:start}
@media (max-width:900px){.revwrap{grid-template-columns:1fr}}
.revwrap .navlist.grid{grid-template-columns:1fr}
/* ===== HIG pass 2: sidebar navigation, large title, contrast fixes ===== */
.mono{font-family:var(--body);font-variant-numeric:tabular-nums;font-size:.86em;letter-spacing:0}
.sbrand{display:none}
.nav .b svg{display:none}
.nav .b .nc{margin-left:6px;color:var(--muted);font-weight:500;font-variant-numeric:tabular-nums}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .nav .b .nc{color:var(--muted)}}
.nsep{display:none}
.top .qc{flex:1;max-width:460px}
.top{align-items:center}

@media (min-width:1000px){
  body{padding-left:calc(256px + 32px);padding-right:32px}
  .nav{position:fixed;top:0;left:0;bottom:0;width:256px;display:flex;flex-direction:column;gap:14px;padding:18px 12px 24px;
    background:var(--sidebar);border-right:1px solid var(--line);overflow-y:auto;z-index:20}
  .nav > div:last-child{gap:0!important}
  .sbrand{display:block;background:none;border:0;cursor:pointer;text-align:left;font-family:var(--hand);font-weight:700;font-size:1.5rem;color:var(--ink);padding:0 8px;line-height:1.1}
  .trays{flex-direction:row;gap:4px;padding:0 4px}
  .tray{position:relative;padding:4px;border-radius:10px}
  .tray:hover{background:var(--fill)}
  .tray svg{width:60px;height:38px}
  .tray .ct{position:absolute;top:0;right:-2px}
  .tray.on{background:var(--fill)}
  .btns{flex-direction:column;flex-wrap:nowrap;gap:1px}
  .nav .btns .b{display:flex;align-items:center;gap:10px;width:100%;border-radius:8px;padding:6px 10px;min-height:32px;font-size:.875rem;font-weight:500;color:var(--ink);background:none;border:0}
  .nav .btns .b svg{display:block;width:18px;height:18px;flex:none;color:var(--blue)}
  .nav .btns .b .nl{flex:1;text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .nav .btns .b{gap:9px!important;font-size:.875rem!important}
  .nav .btns .b .nc{font-size:.875rem;font-variant-numeric:tabular-nums}
  .nav .btns .b .nc.warn{color:var(--red);font-weight:700}
  .nav .btns .b:hover{background:var(--fill)}
  .nav .btns .b.on{background:var(--selbg);color:#fff}
  .nav .btns .b.on svg,.nav .btns .b.on .nc{color:#fff}
  .nsep{display:block;height:10px}
  .top{padding-top:4px;gap:20px;flex-wrap:nowrap}
  .top .brand{display:none}
  .top .label{order:-1;flex:1}
  .top .label .hand{font-size:2rem;font-weight:700;color:var(--ink);letter-spacing:-.02em;line-height:1.1}
  .wrap{max-width:1240px}
}
@media (min-width:701px) and (max-width:999px){
  .top .brand small{display:none}
}
/* ===== Pass 3: fields that line up, Notes-style text, quick filing ===== */
/* lined pad: each line IS the field's own bottom border, so caret and line always match */
.lined{background-image:none;padding:6px 16px 16px;min-height:0}
.lined input{height:auto;line-height:1.5;padding:9px 2px 8px;border:0;border-bottom:1px solid var(--line);border-radius:0;background:none;outline:none}
.lined input:focus{border-bottom-color:var(--blue);box-shadow:0 1px 0 var(--blue)}
.lined input:focus-visible{outline:none}
.cbody{background:none;line-height:1.55;padding:12px 0}
/* process: the item is a title you can retype, not a box */
.pitem{display:flex;flex-direction:column;gap:2px}
.pitem input{font:inherit;font-size:1.5rem;font-weight:700;letter-spacing:-.01em;border:0;border-bottom:1px solid var(--line);background:none;padding:2px 0 6px;color:var(--ink);outline:none;border-radius:0;width:100%}
.pitem input:focus{border-bottom-color:var(--blue);box-shadow:0 1px 0 var(--blue)}
/* one field style everywhere: same height, radius and focus ring */
.f input:not([type=checkbox]):not([type=radio]),.f select,.inp{min-height:38px}
.f input:focus-visible,.f select:focus-visible,.f textarea:focus-visible,.inp:focus-visible,.qc input:focus-visible{outline:3px solid color-mix(in srgb,var(--blue) 35%,transparent);outline-offset:0;border-color:var(--blue)}
/* rich text like Apple Notes */
.hzsub{font-size:.75rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin:14px 0 6px}
.hzsub:first-child{margin-top:0}
.rtwrap{border:1px solid var(--line);border-radius:12px;background:var(--paper);overflow:hidden}
.rtwrap:focus-within{border-color:var(--blue);box-shadow:0 0 0 3px color-mix(in srgb,var(--blue) 25%,transparent);background:var(--card)}
.rtbar{display:none;flex-wrap:wrap;gap:2px;padding:6px;border-bottom:1px solid var(--line);background:var(--card)}
.rtbar button{border:0;background:none;border-radius:7px;padding:4px 10px;min-height:30px;min-width:32px;font:inherit;font-size:.875rem;color:var(--ink);cursor:pointer}
.rtwrap:focus-within .rtbar{display:flex}
.rtbar button:hover{background:var(--fill)}
.rtbar button:focus-visible{outline:2px solid var(--blue)}
.rtsep{width:1px;background:var(--line);margin:4px 4px}
.rt{min-height:120px;padding:14px 16px;outline:none;line-height:1.55;font-size:1rem}
.rt:empty::before{content:attr(data-ph);color:var(--muted)}
.rt h2{font-size:1.5rem;margin:.4em 0 .2em;letter-spacing:-.01em}
.rt h3{font-size:1.125rem;margin:.6em 0 .15em}
.rt h2:first-child,.rt h3:first-child{margin-top:0}
.rt p{margin:0 0 .5em}
.rt ul,.rt ol{margin:.2em 0 .6em;padding-left:1.3em}
/* reference: file it in seconds */
.quickadd input{width:100%;border:1px solid var(--line);border-radius:10px;padding:10px 12px;background:var(--card);font:inherit;min-height:42px}
.hint{font-size:.875rem;margin:6px 0 10px}
@media (max-width:700px){.pitem input{font-size:1.25rem}.rtbar button{min-height:40px;min-width:40px}}
@media (max-width:420px){
  .ititle{font-size:clamp(1.55rem,8.4vw,2rem)!important;overflow-wrap:anywhere}
  .step{grid-template-columns:auto minmax(0,1fr)!important}
  .step > .row{grid-column:2;justify-content:flex-start}
  #view .row{gap:8px}
  .wrap{min-width:0}
}
/* ===== Pass 4: native feel — instant press feedback, sheets that move like iOS, inset-grouped iPhone ===== */
html{-webkit-tap-highlight-color:transparent;touch-action:manipulation}
/* response on press, not on release */
.b,.nrow,.irow,.tile,.pill,.acard,.tray,.seg button,.rtbar button,.cb,.opt,.flag,.pflag,.tabbar button{transition:transform .1s ease-out,background-color .15s,color .15s}
.b:active,.pill:active,.acard:active,.flag:active,.pflag:active{transform:scale(.97)}
.tile:active{transform:scale(.97);box-shadow:var(--shadow)}
.irow:active,.nrow:active{background:var(--fill)}
.cb:active{transform:scale(.88)}
.cb.on{animation:cbpop .22s cubic-bezier(.2,.8,.2,1)}
@keyframes cbpop{0%{transform:scale(.7)}100%{transform:scale(1)}}
/* sheets: materialize, then leave along the same path */
#modal:not([hidden]) .mback{animation:fadeIn .26s ease-out both}
#modal:not([hidden]) .mbox{animation:popIn .32s cubic-bezier(.32,.72,0,1) both;transform-origin:50% 40%}
#modal.closing .mback{animation:fadeOut .22s ease-in both}
#modal.closing .mbox{animation:popOut .22s ease-in both}
@keyframes fadeIn{from{opacity:0}}@keyframes fadeOut{to{opacity:0}}
@keyframes popIn{from{opacity:0;transform:scale(.96)}}
@keyframes popOut{to{opacity:0;transform:scale(.97)}}
.mback{background:rgba(0,0,0,.32);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}
/* desktop sidebar: a quiet material */
@media (min-width:1000px){.nav{background:color-mix(in srgb,var(--sidebar) 88%,transparent);-webkit-backdrop-filter:blur(30px) saturate(160%);backdrop-filter:blur(30px) saturate(160%)}}

/* ---------- iPhone ---------- */
.ismall{display:none}
.ititle{display:none}
@media (max-width:700px){
  :root{--paper:#f2f2f7;--line:#e5e5ea}
  @media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--paper:#000;--card:#1c1c1e;--line:#38383a}}
  body{font-size:1rem;letter-spacing:-.022em}
  /* navigation bar: large title scrolls away, small title fades in, glass bar stays */
  .iosbar{top:env(safe-area-inset-top,0px);grid-template-columns:1fr auto 1fr;grid-template-areas:"back small plus";padding-bottom:2px;
    background:transparent;border-bottom:.5px solid transparent;transition:background-color .2s,border-color .2s}
  body.scrolled .iosbar{border-bottom-color:transparent;background:color-mix(in srgb,var(--paper) 78%,transparent);-webkit-backdrop-filter:blur(24px) saturate(180%);backdrop-filter:blur(24px) saturate(180%)}
  .wrap > .ititle{display:block;margin:-6px 0 0}
  .iplus{justify-self:end}
  .ismall{display:block;grid-area:small;align-self:center;font-weight:600;font-size:1rem;letter-spacing:-.022em;opacity:0;transform:translateY(4px);transition:opacity .2s,transform .2s;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:56vw}
  body.scrolled .ismall{opacity:1;transform:none}
  body.scrolled .iback .bl{opacity:0;width:0;overflow:hidden}
  .iback .bl{transition:opacity .2s}
  .ititle{font-size:2rem!important;font-weight:700;letter-spacing:-.022em;line-height:1.2;padding-bottom:4px}
  .iback{font-size:1rem;letter-spacing:-.022em}
  /* inset grouped lists */
  .sheet,.irows,.tile,.hz,.areacard,.lined,.rtwrap{box-shadow:none!important;border:0!important;border-radius:12px}
  .stacked,.stacked1{box-shadow:none!important;margin:0!important}
  .sh{border-bottom:0;font-size:1.125rem!important;font-weight:700;padding-bottom:2px;margin-bottom:4px}
  .list li{border-bottom:.5px solid var(--line);min-height:44px}
  .grip{display:none!important}
  .shead{font-size:1.125rem!important;letter-spacing:-.02em;margin:4px 0 2px}
  /* Reminders-style tiles */
  .tiles{gap:12px}
  .tile{padding:10px 12px 9px;gap:8px 8px;min-height:82px}
  .ti{width:32px;height:32px}
  .ti svg{width:18px;height:18px}
  .tn{font-size:1.75rem;font-weight:700;letter-spacing:-.02em}
  .tl{font-size:.875rem!important;font-weight:600;color:var(--muted)}
  .ti svg,.irow .ri svg{color:#fff;stroke:#fff;stroke-width:2.4}
  /* Settings-style rows: rounded-square icons, inset separators */
  .irows{background:var(--card);overflow:hidden}
  .irow{min-height:48px;padding:0 14px;font-size:1rem;border-bottom:0;position:relative;gap:12px}
  .irow + .irow::before{content:"";position:absolute;top:0;left:56px;right:0;border-top:.5px solid var(--line)}
  .irow .ri{width:30px;height:30px;border-radius:8px}
  .irow .ri svg{width:18px;height:18px}
  .irow svg.chev{width:8px;height:14px;color:#c4c4c7}
  .irow .ic{font-family:var(--body);font-size:1rem;color:var(--muted)}
  .pflag{border-radius:12px;font-size:.875rem;min-height:48px}
  /* floating glass tab bar */
  .tabbar{left:12px;right:12px;bottom:calc(8px + env(safe-area-inset-bottom,0px));border:0!important;border-radius:999px;padding:6px 6px!important;
    background:color-mix(in srgb,var(--card) 72%,transparent);-webkit-backdrop-filter:blur(24px) saturate(180%);backdrop-filter:blur(24px) saturate(180%);
    box-shadow:0 8px 30px rgba(0,0,0,.12),0 0 0 .5px rgba(0,0,0,.06),inset 0 1px 0 rgba(255,255,255,.55)}
  .tabbar button{border-radius:999px;font-size:max(11px,.66rem)!important;font-weight:600;letter-spacing:0;padding:5px 0 4px;min-height:52px;gap:3px;color:var(--ink)}
  .tabbar button svg{width:24px;height:24px}
  .tabbar button.on{background:var(--fill);color:var(--blue)}
  .tabbar button.on svg{fill:currentColor;fill-opacity:.18;stroke-width:2.2}
  .tabbar .badge{font-family:var(--body);font-size:max(11px,.66rem);font-weight:600;left:calc(50% + 4px);top:2px;min-width:18px;text-align:center}
  body{padding-bottom:calc(96px + env(safe-area-inset-bottom,0px))}
  .toast{bottom:calc(92px + env(safe-area-inset-bottom,0px))}
  /* context chips scroll sideways instead of stacking */
  .filters .seg{display:flex;flex-wrap:nowrap;overflow-x:auto;max-width:100%;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .filters .seg::-webkit-scrollbar{display:none}
  .filters .seg button{flex:none}
  .filters > .f:first-child > span{display:none}
  /* sheet from the bottom, swipe down to close */
  #modal:not([hidden]) .mbox{animation:sheetIn .42s cubic-bezier(.32,.72,0,1) both;transform-origin:50% 100%}
  #modal.closing .mbox{animation:sheetOut .26s cubic-bezier(.32,.72,0,1) both}
  @keyframes sheetIn{from{transform:translateY(100%)}}
  @keyframes sheetOut{to{transform:translateY(100%)}}
  .mbox{background:var(--paper);border-radius:14px 14px 0 0!important}
  .mhead{border-bottom:0}
  .mhead h3{font-size:1rem;font-weight:600}
  .mhead .ml,.mhead .mr{font-size:1rem}
  /* iOS-style choice list for "kies één" */
  .dt{background:var(--card);border:0;border-radius:12px;padding:4px 14px}
  .dt > label:not(.f){min-height:44px;border-bottom:.5px solid var(--line);font-size:1rem}
  .dt .one{position:static;align-self:flex-start;margin:8px 0 2px;font-family:var(--body)!important;font-size:.75rem!important;font-weight:600}
  .f input,.f select,.f textarea,.inp{border-radius:10px;border-color:transparent;background:var(--card)}
}
input[type=radio]{appearance:none;-webkit-appearance:none;width:22px;height:22px;border:1.5px solid var(--control);border-radius:50%;margin:0;flex:none;display:inline-grid;place-items:center;cursor:pointer;transition:border-color .15s}
input[type=radio]::before{content:"";width:12px;height:12px;border-radius:50%;background:var(--blue);transform:scale(0);transition:transform .16s cubic-bezier(.2,.8,.2,1)}
input[type=radio]:checked{border-color:var(--blue)}
input[type=radio]:checked::before{transform:scale(1)}
input[type=radio]:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.dt .one{font-family:var(--body)!important}
@media (prefers-reduced-transparency: reduce){.iosbar,.tabbar,.nav{-webkit-backdrop-filter:none!important;backdrop-filter:none!important;background:var(--card)!important}}
@media (prefers-reduced-motion: reduce){.ismall{transition:none}}

/* ===== Apple HIG-ronde (dickwu): signatuur, volgorde, raakvlakken ===== */
/* Signatuur: Allens handschrift, alleen op merkmomenten — woordmerk, titel van het overzicht, leeg inbakje. */
.sig,.brand,.sbrand,body.r-start .wrap > .ititle{font-family:var(--hand)!important;font-weight:700;letter-spacing:0!important}
body.r-start .wrap > .ititle{font-size:2.3rem!important;line-height:1.1}
/* Inbakje verwerken op de iPhone: eerst het item en de beslisboom, daarna de snelkeuzes. */
@media (max-width:700px){
  .proc{display:flex;flex-direction:column}
  .proc .side{order:2;display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
  .proc .side > p{grid-column:1/-1;order:-1;margin:0;text-align:center}
  .proc .side .b{min-height:44px;padding-inline:6px}
}
/* Desktop: een selecteerbaar raakvlak van minstens 28 pt voor regels in de zijbalk en kleine knoppen. */
@media (min-width:1000px){.nav .btns .b{min-height:30px}.b.sm{min-height:28px}}
/* Het item dat je verwerkt is de titel van dit scherm, ook op de iPhone. */
.pitem input{font-size:1.5rem!important;font-weight:700}
.xbtn{opacity:.7}
.irow svg.chev{color:var(--control)}

/* ===== better-interface: rood alleen voor waarschuwingen ===== */
.goto{color:var(--blue)!important}
.dt .one{background:var(--fill)!important;color:var(--muted)!important}

/* ===== Beweging en materiaal (apple-design-emilkowalski) ===== */
/* Het blad op de iPhone wordt door een veer bewogen (js/ui.js), niet door een vaste CSS-animatie. */
#modal.js-sheet .mbox,#modal.js-sheet .mback{animation:none!important;transition:none!important}
#modal.js-sheet .mbox{will-change:transform}
/* Minder beweging: rustig in- en uitfaden in plaats van schuiven. */
@media (prefers-reduced-motion: reduce){#modal:not([hidden]) .mbox,#modal:not([hidden]) .mback{animation:fadeIn .2s ease-out both!important}}
/* Slepen: de regel komt los van de lijst en volgt de vinger. */
.list li.dragging{position:relative;z-index:3;background:var(--card);outline:0;border-radius:10px;
  box-shadow:0 10px 28px rgba(0,0,0,.16),0 0 0 1px var(--line);transition:box-shadow .15s}
/* Melding: komt van onderen en gaat langs dezelfde weg terug. */
.toast:not([hidden]){animation:toastIn .32s cubic-bezier(.2,.8,.2,1) both}
.toast.out{animation:toastOut .2s cubic-bezier(.4,0,1,1) both}
@keyframes toastIn{from{opacity:0;transform:translate(-50%,14px) scale(.98)}}
@keyframes toastOut{to{opacity:0;transform:translate(-50%,14px) scale(.98)}}
/* Scrollrand: een zachte overgang onder de glazen balk in plaats van een harde lijn. */
@media (max-width:700px){
  .iosbar::after{content:"";position:absolute;left:0;right:0;top:100%;height:12px;pointer-events:none;
    background:linear-gradient(color-mix(in srgb,var(--paper) 70%,transparent),transparent);opacity:0;transition:opacity .2s}
  body.scrolled .iosbar::after{opacity:1}
}
@media (prefers-contrast: more){.tabbar,.iosbar{background:var(--card)!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;border:1px solid var(--ink)!important}}
/* Reactie bij aanraken, niet pas bij loslaten. */
.link:active,.nrow:active,.txtbtn:active{opacity:.55;transition:none}
/* Typografie: spatiëring per grootte. Kop strak, lopende tekst neutraal, kleine tekst iets ruimer. */
body{font-optical-sizing:auto}
.ititle,.intitle,.top .label .hand,.titleinp,.pitem input,.hzb h3,.rt h2{letter-spacing:-.021em}
.sh,.grouph,.shead{letter-spacing:-.012em}
.chip,.mono,.hint,.weekhint,.step .sq,.f > span,.tabbar button,.list li > .mono.muted,.irow .ic,.tl,.status{letter-spacing:.005em!important}
@media (max-width:700px){body{letter-spacing:-.016em}}

/* ===== design-review ===== */
/* Typeschaal: 7 stappen — .75 · .875 · 1 · 1.125 · 1.25 · 1.5 · 2 rem (plus 1.75 voor tellers). */
/* Velden zijn op de iPhone zichtbaar binnen een kaart, met een onderrand van 3,3:1 (WCAG 1.4.11). */
.f input:not([type=checkbox]):not([type=radio]),.f select,.f textarea,.inp{border-bottom-color:var(--control)}
@media (max-width:700px){
  .sheet .f input:not([type=checkbox]):not([type=radio]),.sheet .f select,.sheet .f textarea,.sheet .inp,.mbox .grp{background:var(--paper);border:1px solid transparent;border-bottom-color:var(--control)}
  .ptop #pjtitle,.titleinp{font-size:1.5rem!important;font-weight:700}
  .sheet #pjtitle,.sheet .titleinp{background:none!important;border:0!important;border-bottom:1px solid var(--line)!important;border-radius:0!important;padding:4px 0!important;flex:1 1 100%;max-width:none!important}
  /* raakvlakken van 44 pt voor alles wat je met je duim bedient */
  .b.sm,.seg button,.pill,.peek button,.daybar .b{min-height:44px}
  .daybar .b{min-width:44px}
  .verbs button{min-height:40px}
  .sh{flex-wrap:wrap;row-gap:6px}
}
.xbtn{position:relative}.xbtn::before{content:"";position:absolute;inset:-8px}
/* De status van een project is een keuze met een zichtbare huidige stand. */
.ptop .seg button{min-height:32px}
/* Hover voor alles wat klikbaar is (alleen met een aanwijzer). */
@media (hover:hover){
  .seg button:not(.on):hover,.verbs button:hover,.pill:not(.on):hover,.opt:hover,.tile:hover,.irow:hover,.list li:hover{background:var(--fill)}
  .list li{transition:background-color .12s}.list li.dragging:hover{background:var(--card)}
  .flag:hover,.pflag:hover{filter:brightness(.97)}
}
/* Tickler en herinneringen in de dag zijn informatie, geen waarschuwing: neutraal, niet rood. */
.slot.tick{border-left-color:var(--muted);background:var(--fill)}

/* ===================================================================
   Ontwerp 2 — zoals Herinneringen, Notities en Agenda; een vleugje Duolingo
   - Inhoud is tekst, geen vakken. Formulieren zijn groepen met rijen: label links, waarde rechts.
   - Afvinken met rondjes, aan/uit met schakelaars, kiezen met een vinkje.
   - Verwerken: één vraag tegelijk, grote antwoordknoppen met een zichtbare "druk".
   =================================================================== */
:root{--cta:#1f8a3e;--ctaEdge:#14632b;--chev:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 16'%3E%3Cpath d='M2 6l3-3 3 3M2 10l3 3 3-3' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --tick:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M4 10.5l4 4 8-9' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}

/* --- afvinken: het rondje uit Herinneringen --- */
.cb{width:24px!important;height:24px!important;border-radius:50%!important;border:1.5px solid var(--control)!important;background:none!important;position:relative;flex:none;margin-top:1px}
.cb.on{border-color:var(--blue)!important;background:radial-gradient(circle,var(--blue) 0 54%,transparent 57%)!important}
.cb.on::after{content:""!important}
.cb:hover{border-color:var(--blue)!important}

/* --- aan/uit: overal een schakelaar, nooit een vierkant --- */
input[type=checkbox]:not(.cbx){appearance:none;-webkit-appearance:none;width:51px!important;height:31px!important;flex:none;margin:0;border:0!important;border-radius:999px!important;
  background:var(--fill)!important;position:relative;cursor:pointer;transition:background-color .2s}
input[type=checkbox]:not(.cbx)::before{content:"";position:absolute;top:2px;left:2px;width:27px;height:27px;border-radius:50%;background:#fff;box-shadow:0 2px 5px rgba(0,0,0,.18),0 0 0 .5px rgba(0,0,0,.05);transition:transform .22s cubic-bezier(.2,.8,.2,1)}
input[type=checkbox]:not(.cbx):checked{background:#34c759!important}
input[type=checkbox]:not(.cbx):checked::before{transform:translateX(20px)}
input[type=checkbox]:not(.cbx):focus-visible{outline:2px solid var(--blue);outline-offset:2px}
@media (prefers-contrast: more){input[type=checkbox]:not(.cbx){box-shadow:inset 0 0 0 1px var(--control)}}

/* --- groepen en rijen (Instellingen, Agenda-inspector) --- */
.form{display:flex;flex-direction:column;gap:8px}
.group{background:var(--card);border-radius:12px;overflow:hidden;display:flex;flex-direction:column}
.frow{display:flex;justify-content:space-between;align-items:center;gap:14px;min-height:46px;padding:7px 16px;position:relative;font:inherit;color:var(--ink);background:none;border:0;width:100%;text-align:left;cursor:default}
.frow[hidden]{display:none!important}
.group > .frow:not([hidden]) ~ .frow:not([hidden])::before{content:"";position:absolute;top:0;left:16px;right:0;border-top:.5px solid var(--line)}
.frow > span:first-child{flex:1;min-width:0}
.frow small{display:block;font-size:.75rem;color:var(--muted);margin-top:1px}
button.frow,.frow.pick{cursor:pointer}
button.frow:active,.frow.pick:active{background:var(--fill)}
.frow select,.frow input:not([type=checkbox]):not([type=radio]){appearance:none;-webkit-appearance:none;border:0!important;background-color:transparent!important;box-shadow:none!important;
  padding:6px 0!important;min-height:0!important;border-radius:0!important;font:inherit;color:var(--muted);text-align:right;max-width:58%;width:auto;outline-offset:4px}
.frow select{padding-right:16px!important;background:var(--chev) right center/9px 14px no-repeat!important;cursor:pointer;text-align-last:right}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .frow select{filter:none}}
.frow input:not([type=checkbox]):not([type=radio])::placeholder{color:color-mix(in srgb,var(--muted) 70%,transparent)}
.frow input[type=date]{max-width:none}
.frow.solo{background:var(--card);border-radius:12px}
/* kiezen: een vinkje rechts, zoals in Instellingen */
.frow.pick input[type=radio]{appearance:none;-webkit-appearance:none;width:22px;height:22px;border:0!important;border-radius:0;background:none;flex:none;margin:0}
.frow.pick input[type=radio]::before{display:none}
.frow.pick input[type=radio]:checked{background:var(--blue);-webkit-mask:var(--tick) center/20px no-repeat;mask:var(--tick) center/20px no-repeat}
.frow.pick:has(input:checked) > span:first-child{font-weight:600}
.frow.pick:has(input:focus-visible){outline:2px solid var(--blue);outline-offset:-2px}
.ghd{font-size:.8125rem;color:var(--muted);padding:10px 16px 0;letter-spacing:.01em;font-family:var(--body);font-weight:400;text-transform:none;border:0;margin:0}
.ghd small{margin-left:6px;opacity:.8}
.fnote{font-size:.8125rem;color:var(--muted);margin:0;padding:0 16px;line-height:1.4}
.fbig{display:block;width:100%;border:0!important;background:none!important;font:inherit;font-size:1.25rem!important;font-weight:600;padding:14px 16px 8px!important;color:var(--ink);min-height:0!important;box-shadow:none!important}
.fbig:focus-visible{outline:none;box-shadow:inset 0 -2px 0 var(--blue)!important}
.group .verbs{padding:2px 12px 12px;gap:6px}
.verbs button{border:0!important;background:var(--fill)!important;border-radius:999px!important;padding:5px 11px!important;font-size:.8125rem!important;color:var(--ink);cursor:pointer;min-height:30px}
.verbs button:hover{background:color-mix(in srgb,var(--blue) 14%,transparent)!important}
.mbox{background:var(--paper)!important}
.mbox .form .group{box-shadow:0 0 0 .5px var(--line)}

/* --- verwerken: één vraag tegelijk --- */
.flow{max-width:640px;width:100%;margin:0 auto;display:flex;flex-direction:column;gap:16px}
.ftop{display:flex;align-items:center;gap:12px}
.fprog{flex:1;height:12px;border-radius:999px;background:var(--fill);overflow:hidden}
.fprog i{display:block;height:100%;min-width:12px;border-radius:inherit;background:linear-gradient(var(--cta),var(--cta)) ;box-shadow:inset 0 3px 0 rgba(255,255,255,.28);transition:width .6s cubic-bezier(.2,.8,.2,1)}
.fcount{font-size:.875rem;font-weight:600;color:var(--muted);font-variant-numeric:tabular-nums}
.fcard{background:var(--card);border-radius:20px;padding:16px 20px 18px;box-shadow:var(--shadow)}
.ftitle{display:block;width:100%;border:0!important;background:none!important;font:inherit;font-size:1.5rem!important;font-weight:750;letter-spacing:-.02em;padding:4px 0!important;color:var(--ink);min-height:0!important}
.ftitle:focus-visible{outline:none;box-shadow:inset 0 -2px 0 var(--blue)}
.trail{display:flex;flex-wrap:wrap;gap:8px}
.crumb{display:inline-flex;align-items:center;gap:6px;border:0;background:var(--card);border-radius:999px;padding:7px 13px;font:inherit;font-size:.875rem;cursor:pointer;box-shadow:0 0 0 .5px var(--line)}
.crumb span{color:var(--muted)} .crumb b{color:var(--ink);font-weight:650}
.crumb:hover{background:var(--fill)}
.ask{display:flex;flex-direction:column;gap:12px;animation:askIn .38s cubic-bezier(.2,.8,.2,1) both}
@keyframes askIn{from{opacity:0;transform:translateY(14px)}}
.fq{font-size:1.75rem;font-weight:800;letter-spacing:-.025em;line-height:1.15;margin:4px 0 0;text-wrap:balance}
.fq2{font-size:1.125rem;font-weight:700;margin:8px 0 0}
.fhelp{color:var(--muted);margin:-4px 0 2px;font-size:1rem;line-height:1.4}
.answers{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px}
.ans{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:3px;text-align:left;font:inherit;color:var(--ink);cursor:pointer;
  background:var(--card);border:2px solid var(--line);border-radius:18px;padding:14px 18px;min-height:82px;box-shadow:0 4px 0 var(--line);
  transition:transform .08s ease-out,box-shadow .08s ease-out,border-color .15s,background-color .15s}
.ans b{font-size:1.25rem;font-weight:800;letter-spacing:-.01em}
.ans small{font-size:.875rem;color:var(--muted);line-height:1.3}
.ans:hover{border-color:color-mix(in srgb,var(--blue) 45%,var(--line));box-shadow:0 4px 0 color-mix(in srgb,var(--blue) 45%,var(--line))}
.ans:active{transform:translateY(4px);box-shadow:0 0 0 transparent}
.ans.go{background:var(--cta);border-color:var(--cta);color:#fff;box-shadow:0 4px 0 var(--ctaEdge)}
.ans.go small{color:rgba(255,255,255,.88)}
.ans.go:hover{filter:brightness(1.05);box-shadow:0 4px 0 var(--ctaEdge)}
.ans.bad{color:var(--red);border-color:color-mix(in srgb,var(--red) 30%,var(--line));box-shadow:0 4px 0 color-mix(in srgb,var(--red) 30%,var(--line))}
.ans.big{min-height:56px;align-items:center;width:100%;margin-top:4px}
.ans:focus-visible{outline:3px solid var(--blue);outline-offset:3px}
.fdest{display:inline-flex;align-self:flex-start;align-items:center;gap:8px;background:var(--soft);color:var(--blue);border-radius:999px;padding:6px 14px 6px 10px;font-size:.875rem;margin:0}
.fdest svg{width:18px;height:18px}
.flow .timer{font-size:3.5rem;font-weight:800;font-variant-numeric:tabular-nums;letter-spacing:-.02em;text-align:center;padding:8px 0}
.fquick{display:flex;flex-wrap:wrap;align-items:center;gap:6px 16px;font-size:.875rem;padding-top:12px;border-top:.5px solid var(--line);margin-top:4px}
.fsp{flex:1}
.txtbtn.red{color:var(--red)}
.fdone{display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;padding:56px 16px}
.fdone-mark svg{width:104px;height:104px}
.fdone-mark circle{fill:var(--greenSoft);stroke:var(--green);stroke-width:2.5}
.fdone-mark path{fill:none;stroke:var(--green);stroke-width:4;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:40;stroke-dashoffset:0;animation:drawTick .55s .15s cubic-bezier(.2,.8,.2,1) both}
.fdone-mark{animation:popMark .5s cubic-bezier(.34,1.3,.64,1) both}
@keyframes drawTick{from{stroke-dashoffset:40}}
@keyframes popMark{from{transform:scale(.6);opacity:0}}
.fdone .sig{font-size:2.25rem;margin:6px 0 0;color:var(--ink)}
.fdone .muted{margin:0 0 10px}
/* oude beslisboomopmaak is niet meer nodig */
.proc,.opt{display:none}

/* --- lijsten: zoals Herinneringen --- */
.list li{border-bottom:0!important;position:relative;padding:10px 0!important;align-items:flex-start!important;gap:12px!important}
.list li + li::before{content:"";position:absolute;top:0;left:36px;right:0;border-top:.5px solid var(--line)}
.list .t{display:block!important}
.list .t > .link{font-size:1rem;line-height:1.35;text-align:left}
.rmeta{display:block;font-size:.8125rem;color:var(--muted);margin-top:2px;line-height:1.35}
.rmeta .late{color:var(--red);font-weight:600}
.list .t .chip.ex{margin-left:6px}

/* --- projectscherm: resultaat en eerstvolgende actie voorop --- */
.psheet2{display:flex;flex-direction:column;gap:14px;max-width:760px;min-width:0}
.phead{display:flex;flex-direction:column;gap:2px;padding:4px 2px}
.ptitle{display:block;width:100%;border:0!important;background:none!important;font:inherit;font-size:1.75rem!important;font-weight:800;letter-spacing:-.025em;padding:2px 0!important;color:var(--ink);min-height:0!important}
.poutcome{display:block;width:100%;border:0!important;background:none!important;font:inherit;font-size:1.0625rem!important;color:var(--muted);padding:2px 0!important;min-height:0!important}
.ptitle:focus-visible,.poutcome:focus-visible{outline:none;box-shadow:inset 0 -2px 0 var(--blue)}
.pbar{display:flex;flex-wrap:wrap;gap:10px 14px;align-items:center;margin-top:10px}
.nextcard{background:var(--card);border-radius:18px;padding:14px 18px 16px;box-shadow:var(--shadow);border:2px solid transparent}
.nextcard.none{border-color:color-mix(in srgb,var(--red) 30%,transparent)}
.nchead{display:flex;align-items:center;gap:8px;font-size:.8125rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--blue);margin-bottom:4px}
.nextcard.none .nchead{color:var(--red)}
.nchead svg{width:18px;height:18px}
.nextcard .list .t > .link{font-size:1.125rem;font-weight:600}
.ncempty{margin:6px 0 4px;font-size:1.0625rem;font-weight:600}
.naadd{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.naadd input{flex:1 1 220px;min-width:0;border:0!important;background:var(--fill)!important;border-radius:12px!important;padding:10px 14px!important;font:inherit;min-height:44px}
.naadd select{border:0!important;background:var(--fill) var(--chev) right 10px center/9px 14px no-repeat!important;appearance:none;-webkit-appearance:none;border-radius:12px!important;padding:0 28px 0 12px!important;font:inherit;min-height:44px;width:auto!important}
.naadd .b{min-height:44px;padding-inline:18px}
details.plan{background:var(--card);border-radius:14px;padding:0 16px}
details.plan > summary{display:flex;justify-content:space-between;align-items:center;gap:12px;min-height:52px;cursor:pointer;list-style:none;font-weight:650}
details.plan > summary::-webkit-details-marker{display:none}
details.plan > summary small{font-weight:400;color:var(--muted);font-size:.875rem;margin-left:auto}
details.plan > summary::after{content:"";width:8px;height:8px;border-right:2px solid var(--control);border-bottom:2px solid var(--control);transform:rotate(-45deg);transition:transform .2s;flex:none;margin-left:4px}
details.plan[open] > summary::after{transform:rotate(45deg)}
details.plan[open]{padding-bottom:16px}
details.plan > :not(summary){margin-top:12px}
details.plan .group{background:var(--paper)}
.pfield{display:flex;flex-direction:column;gap:6px}
.pfield > span{font-size:.875rem;font-weight:600;color:var(--muted)}
.pfield textarea{border:0!important;background:var(--paper)!important;border-radius:12px!important;padding:10px 12px!important;font:inherit;min-height:64px;resize:vertical;color:var(--ink)}
.pfield textarea:focus-visible{outline:2px solid var(--blue);outline-offset:0}
.procnote{background:var(--soft);border:0!important;border-radius:12px;padding:12px 14px;display:flex;flex-direction:column;gap:2px}
@media (max-width:700px){
  .psheet2{gap:12px}
  .ptitle{font-size:1.5rem!important}
  .fq{font-size:1.5rem}
  .answers{grid-template-columns:1fr 1fr}
  .answers:has(> :nth-child(3)){grid-template-columns:1fr}
  .ans{min-height:76px;padding:12px 16px}
  .list li + li::before{left:36px}
  .sheet .f input:not([type=checkbox]):not([type=radio]).fbig{background:none}
}

/* verfijningen ontwerp 2 */
.group .verbs{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;padding-bottom:12px;mask-image:linear-gradient(90deg,#000 88%,transparent)}
.group .verbs::-webkit-scrollbar{display:none}
.group .verbs button{flex:none}
.fdone .sig{text-wrap:balance;max-width:14ch}
.pbar .txtbtn.red{margin-left:auto}
.sortf > span{display:none}
.sortf select{appearance:none;-webkit-appearance:none;border:0!important;background:var(--fill) var(--chev) right 12px center/9px 14px no-repeat!important;border-radius:999px!important;padding:8px 32px 8px 14px!important;font:inherit;font-size:.875rem!important;font-weight:600;min-height:36px!important;width:auto!important;color:var(--ink)}
.f > span,.ghead{font-family:var(--body)}

.fnotes{display:block;width:100%;border:0!important;background:none!important;font:inherit;padding:12px 16px!important;min-height:88px;resize:vertical;color:var(--ink)}
.fnotes:focus-visible{outline:2px solid var(--blue);outline-offset:-2px}
/* hoofdknop: dezelfde groene CTA in licht en donker (wit erop 4,6:1) */
.b.green{background:var(--cta)!important;border-color:var(--cta)!important;color:#fff!important}

/* --- ontwerp 2, alle schermen --- */
.card{background:var(--card);border-radius:18px;padding:14px 18px 16px;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:8px}
.card .ghd{padding:6px 0 0}
.group.inset{background:var(--paper);box-shadow:none}
.fbig.flat{padding:4px 0!important;font-size:1.25rem!important}
.dtpair{display:inline-flex;gap:10px;align-items:center;justify-content:flex-end;flex-wrap:wrap}
.dtpair input,.dtpair select{border:0!important;background:var(--fill)!important;border-radius:8px!important;padding:6px 10px!important;font:inherit;color:var(--ink);min-height:0!important;width:auto;appearance:none;-webkit-appearance:none}
.dtpair input[hidden]{display:none}
.frow input[type=number]{-moz-appearance:textfield;text-align:center;background:var(--fill)!important;border-radius:8px!important;padding:6px 4px!important;color:var(--ink);min-width:3.5ch}
.frow input[type=file]{color:var(--muted);font-size:.875rem;max-width:62%}
.search{display:flex;align-items:center;gap:8px;background:var(--fill);border-radius:12px;padding:0 12px;min-height:44px}
.search svg{width:18px;height:18px;color:var(--muted);flex:none}
.search input{flex:1;min-width:0;border:0;background:none;font:inherit;font-size:1.0625rem;color:var(--ink);padding:10px 0;outline:none}
.search:focus-within{box-shadow:0 0 0 3px color-mix(in srgb,var(--blue) 30%,transparent)}
.kdot{width:10px;height:10px;border-radius:50%;flex:none;margin:7px 7px 0 7px;background:var(--control)}
.k-action{background:var(--blue)}.k-project{background:#4b4fc4}.k-waiting{background:var(--muted)}.k-event{background:var(--red)}.k-someday{background:#7a4fb0}.k-ref{background:#8a6a45}.k-in{background:var(--cta)}
.findsheet .list li + li::before{left:30px}
.persheet .list li + li::before,.card .list li + li::before{left:36px}
.areasheet .tag{background:var(--fill)}
.chips .tagadd input{border:1px dashed var(--control)!important}
.msheet .row .b.green{margin-left:auto}
/* oudere sjablonen op dezelfde toon: kaarten zonder harde randen, koppen in systeemletter */
.sheet{border:0!important;border-radius:18px!important}
.sh{font-family:var(--body)!important;text-transform:none!important}
.node,.dt,.grp:not(.group){border-color:var(--line)}

.psheet2 h3.sect{font-size:1.125rem;font-weight:700;letter-spacing:-.01em;margin:10px 2px -2px}

/* ===================================================================
   Huisstijl "Helder" — gekozen op onderzoek, niet op smaak:
   - Blauw wekt competentie en vertrouwen (Labrecque & Milne 2012) en een open, 'toenaderende' houding (Mehta & Zhu 2009).
     Iets minder verzadigd = rustiger. Daarom kobalt-indigo, niet het felle systeemblauw.
   - Groen alleen voor 'klaar' (positief, Lichtenfeld e.a. 2012). Rood alleen voor wat echt te laat is (vermijdingssignaal).
   - Krijtgeel als warm accent voor vieren; het krijtbord (inktblauw) is het leer-moment.
   Contrast: #3355E0 op wit 5,97:1 · #8DA2FF op #1C1C1E 7,1:1 · krijt op bord 8–13:1.
   =================================================================== */
:root{--brand:#3355E0;--brandEdge:#2440B8;--brandSoft:#EAEEFE;--blue:var(--brand);--sel:var(--brand);--selbg:var(--brand);--soft:var(--brandSoft);
  --cta:#3355E0;--ctaEdge:#2440B8;--warn:#B45309;--warnSoft:#FEF3C7;--done:#17804A;--sun:#FFC53D;
  --chalk:#323B4E;--chalkInk:#F4F1E8;--chalkY:#FFD666;--chalkP:#FFA7C4;--chalkB:#8FD3FF;--chalkG:#9BE5B0}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--brand:#8DA2FF;--brandEdge:#6B84F5;--brandSoft:#1A2140;--blue:var(--brand);--sel:var(--brand);--selbg:#3355E0;--soft:var(--brandSoft);
  --cta:#3355E0;--ctaEdge:#2440B8;--warn:#FBBF24;--warnSoft:#3A2A07;--done:#4ADE80;--chalk:#3A4660}}
:root[data-theme="dark"]{--brand:#8DA2FF;--brandEdge:#6B84F5;--brandSoft:#1A2140;--blue:var(--brand);--sel:var(--brand);--selbg:#3355E0;--soft:var(--brandSoft);--cta:#3355E0;--ctaEdge:#2440B8;--warn:#FBBF24;--warnSoft:#3A2A07;--done:#4ADE80;--chalk:#3A4660}
::selection{background:color-mix(in srgb,var(--brand) 28%,transparent)}
html{accent-color:var(--brand)}
.fprog i{background:var(--brand)!important}
.c-blue{background:#0A7EA4}.c-indigo{background:#4B4FC4}

/* Focus zoals Apple (focus-and-selection.md): een ring bij losse tekst- en zoekvelden, een markering bij rijen in een lijst. */
input:focus,select:focus,textarea:focus,[contenteditable]:focus{outline:none!important}
.f input:focus-visible,.f select:focus-visible,.f textarea:focus-visible,.inp:focus-visible,.qc input:focus-visible{outline:none!important;border-color:var(--line)!important;box-shadow:0 0 0 3.5px color-mix(in srgb,var(--brand) 24%,transparent)!important}
.group .frow:focus-within{background:color-mix(in srgb,var(--brand) 7%,transparent)}
.group:focus-within .fnotes,.fbig:focus,.ftitle:focus,.ptitle:focus,.poutcome:focus{box-shadow:none!important}
.group:has(> .fbig:focus),.group:has(> .fnotes:focus){box-shadow:0 0 0 3.5px color-mix(in srgb,var(--brand) 18%,transparent)}
.naadd input:focus,.search:focus-within,.quickadd input:focus,.qc input:focus,.lined input:focus,.pfield textarea:focus{box-shadow:0 0 0 3.5px color-mix(in srgb,var(--brand) 22%,transparent)!important;outline:none!important;border-color:transparent!important}
.lined input:focus{border-bottom-color:var(--line)!important;box-shadow:none!important;background:color-mix(in srgb,var(--brand) 6%,transparent)}
.rtwrap:focus-within{border-color:var(--line)!important;box-shadow:0 0 0 3.5px color-mix(in srgb,var(--brand) 18%,transparent)!important}
:focus-visible{outline-color:var(--brand)}
button:focus-visible,a:focus-visible,summary:focus-visible{outline:2px solid var(--brand);outline-offset:2px}

/* Datums als Apple-pil */
input[type=date],input[type=time]{font-variant-numeric:tabular-nums}
.frow input[type=date],.frow input[type=time]{background:var(--fill)!important;border-radius:8px!important;padding:6px 10px!important;color:var(--ink)!important}
input[type=date]::-webkit-calendar-picker-indicator,input[type=time]::-webkit-calendar-picker-indicator{opacity:.45;cursor:pointer}

/* Allen 1994: het inbakje verandert van kleur naarmate het voller raakt. */
.heat-0{--heat:var(--done)}.heat-1{--heat:var(--cta)}.heat-2{--heat:#D97706}.heat-3{--heat:#DC2626}
.tray .ct.heat-0{background:var(--done)}.tray .ct.heat-1{background:var(--cta)}.tray .ct.heat-2{background:#D97706}.tray .ct.heat-3{background:#DC2626}
.tile.heat-0 .ti,.tile.heat-1 .ti,.tile.heat-2 .ti,.tile.heat-3 .ti{background:var(--heat)!important}
.tabbar .badge.heat-1{background:var(--cta)}.tabbar .badge.heat-2{background:#D97706}.tabbar .badge.heat-3{background:#DC2626}
.tray.heat-2 svg,.tray.heat-3 svg{color:var(--heat)}

/* Krijtbord: handschrift met krijtkleuren, alleen voor tips (signatuurmoment). */
.chalk{background:var(--chalk);color:var(--chalkInk);border-radius:18px;padding:16px 20px 18px;font-family:var(--hand);font-weight:700;position:relative;overflow:hidden;
  box-shadow:inset 0 0 0 6px color-mix(in srgb,#000 18%,var(--chalk)),var(--shadow);background-image:radial-gradient(rgba(255,255,255,.05) 1px,transparent 1.5px);background-size:7px 7px}
.chalk h4{margin:0 0 8px;font-size:1.25rem;letter-spacing:.01em;color:var(--chalkInk)}
.chalk ol{margin:0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:4px 18px}
.chalk li{font-size:1.125rem;line-height:1.35;display:flex;gap:8px;align-items:baseline}
.chalk li b{font-size:1.4rem}
.chalk .ky{color:var(--chalkY)}.chalk .kp{color:var(--chalkP)}.chalk .kb{color:var(--chalkB)}.chalk .kg{color:var(--chalkG)}
.chalk small{display:block;font-family:var(--body);font-weight:500;font-size:.8125rem;color:color-mix(in srgb,var(--chalkInk) 72%,transparent);margin-top:8px}
.chalk .x{position:absolute;top:8px;right:10px;background:none;border:0;color:var(--chalkInk);opacity:.7;font:inherit;font-size:1.25rem;cursor:pointer;width:32px;height:32px}

/* ===================================================================
   Round 3 components (English UI)
   =================================================================== */
/* verbs are starters: hidden once you type */
.fbig:not(:placeholder-shown) + .verbs{display:none}
/* context chips */
.ctxchips{display:flex;flex-wrap:wrap;gap:8px;padding:2px 2px 4px}
.cchip{position:relative;cursor:pointer}
.cchip input{position:absolute;opacity:0;inset:0;width:100%!important;height:100%!important;margin:0;cursor:pointer;appearance:none;-webkit-appearance:none;background:none!important}
.cchip input::before{display:none!important}
.cchip span{display:inline-flex;align-items:center;min-height:36px;padding:6px 14px;border-radius:999px;background:var(--card);box-shadow:0 0 0 1px var(--line);font-size:.9375rem;color:var(--ink);transition:background-color .15s,color .15s,box-shadow .15s}
.cchip input:checked + span{background:var(--brand);color:#fff;box-shadow:0 0 0 1px var(--brand);font-weight:600}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .cchip input:checked + span{color:#0B1440}}
.cchip input:focus-visible + span{outline:2px solid var(--brand);outline-offset:2px}
@media (hover:hover){.cchip:hover span{background:var(--fill)}.cchip input:checked:hover + span{background:var(--brand)}}
/* collapsible details inside forms */
details.more{background:none}
details.more > summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:8px;padding:8px 16px;color:var(--brand);font-weight:600}
details.more > summary::-webkit-details-marker{display:none}
details.more > summary small{color:var(--muted);font-weight:400}
details.more > summary::after{content:"";width:7px;height:7px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);margin-left:auto;transition:transform .2s}
details.more[open] > summary::after{transform:rotate(-135deg)}
details.more[open]{display:flex;flex-direction:column;gap:8px}
.newarea{border:0!important;background:var(--fill)!important;border-radius:8px!important;padding:6px 10px!important;font:inherit;color:var(--ink)!important;text-align:left!important;max-width:60%!important}

/* Inbox: one list, heat header */
.inhead{display:flex;align-items:center;gap:12px;padding:12px 16px;border-radius:16px;background:color-mix(in srgb,var(--heat,var(--brand)) 12%,var(--card));color:var(--ink)}
.inhead .inct{min-width:40px;height:40px;padding:0 10px;border-radius:999px;display:grid;place-items:center;background:var(--heat,var(--brand));color:#fff;font-weight:800;font-size:1.125rem;font-variant-numeric:tabular-nums}
.inhead > span:nth-child(2){flex:1;font-weight:600}
.inadd{display:flex;align-items:center;gap:12px;padding:6px 0 10px;border-bottom:.5px solid var(--line)}
.inadd input{flex:1;min-width:0;border:0;background:none;font:inherit;font-size:1.0625rem;padding:8px 0;color:var(--ink)}
.inadd input:focus{box-shadow:none!important}
.inadd:focus-within{border-bottom-color:var(--brand)}
.cb.ghost{border-style:dashed!important;opacity:.6;pointer-events:none}
.ititle2{font-size:1rem;line-height:1.35}
.trigchips{display:flex;flex-wrap:wrap;gap:8px}
.tchip{border:0;background:var(--card);box-shadow:0 0 0 1px var(--line);border-radius:999px;padding:7px 14px;font:inherit;font-size:.9375rem;color:var(--ink);cursor:pointer;min-height:36px}
.tchip:hover{background:var(--fill)}
.tchip.more{color:var(--brand);font-weight:600;box-shadow:0 0 0 1px color-mix(in srgb,var(--brand) 35%,transparent)}
#trigbody .ghd{padding:14px 2px 6px;font-weight:600;color:var(--ink);font-size:.9375rem}
#trigseg{align-self:flex-start}

/* Next Actions page */
.napage{display:flex;flex-direction:column;gap:16px}
.ctxseg{max-width:100%;overflow-x:auto;flex-wrap:nowrap!important;scrollbar-width:none}
.ctxseg::-webkit-scrollbar{display:none}
.ctxseg button{flex:none;white-space:nowrap}
.emptycard{display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;background:var(--card);border-radius:18px;padding:28px 20px;color:var(--muted)}
.emptycard svg{width:40px;height:40px;color:var(--brand)}
.emptycard p{margin:0}
.rowacts{display:inline-flex;align-items:center;gap:6px;flex:none}
.napage .filters > .b{display:inline-flex}
@media (max-width:700px){.napage .filters{display:grid;grid-template-columns:1fr auto auto;align-items:center}.napage .filters .ctxseg{grid-column:1/-1}.napage .filters > .b.green{margin-left:0!important}}

/* Calendar: appointments expire by themselves */
.slot.past{opacity:.55}
.slot .t{padding-left:2px}

/* Overview: more breathing room between the three sheets */
.home{grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr))!important;gap:34px 28px!important;padding-top:34px}
.home .sheet{min-height:0}
@media (min-width:1100px){.home{grid-template-columns:minmax(0,1fr) minmax(0,1.15fr) minmax(0,1.25fr)!important}}
.home .daycols{grid-template-columns:1fr!important;gap:14px}
.napage .filters .b{min-height:38px;padding:0 16px;display:inline-flex;align-items:center;white-space:nowrap}
@media (max-width:700px){.napage .filters{grid-template-columns:auto minmax(0,1fr) auto;gap:8px}.napage .filters .sortf > span{display:none}.napage .filters .sortf select{width:100%}}

/* Communication */
.viaseg{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px}
.via{display:flex;flex-direction:column;align-items:center;gap:4px;border:0;background:var(--card);border-radius:14px;padding:10px 4px;font:inherit;font-size:.8125rem;font-weight:600;color:var(--ink);cursor:pointer;box-shadow:0 0 0 1px var(--line)}
.via svg{width:24px;height:24px;color:var(--brand)}
.via.on{background:var(--brand);color:#fff;box-shadow:0 0 0 1px var(--brand)}.via.on svg{color:#fff}
@media (max-width:520px){.viaseg{grid-template-columns:repeat(3,minmax(0,1fr))}}
.compose2{gap:0;padding-top:4px}
.compose2 .crow{border-bottom:.5px solid var(--line)}
.compose2 .crow span{font-family:var(--body)!important;text-transform:none!important;color:var(--muted);font-weight:500;min-width:64px}
.compose2 .cbody{min-height:140px;line-height:1.5}
.cbar{display:flex;flex-wrap:wrap;gap:10px;padding-top:10px;border-top:.5px solid var(--line)}
.cbar .b{display:inline-flex;align-items:center;gap:8px;min-height:40px}
.cbar .b svg{width:18px;height:18px}
a.b.green{color:#fff!important;text-decoration:none}

/* Meetings: Allen's four agenda kinds, compact */
.agenda4 .arow{display:grid;grid-template-columns:minmax(120px,30%) 1fr;align-items:start;gap:12px;padding:4px 16px;position:relative}
.agenda4 .arow + .arow::before{content:"";position:absolute;top:0;left:16px;right:0;border-top:.5px solid var(--line)}
.agenda4 .arow > span{padding-top:12px;font-weight:600;font-size:.9375rem}
.agenda4 .fnotes{min-height:44px!important;padding:11px 0!important}
@media (max-width:520px){.agenda4 .arow{grid-template-columns:1fr;gap:0}.agenda4 .arow > span{padding-top:10px}}

/* Coaching messages */
.coachmsg{display:flex;gap:14px;background:var(--card);border-radius:18px;padding:16px 18px;box-shadow:var(--shadow)}
.cmicon{width:36px;height:36px;border-radius:50%;background:var(--warnSoft);color:var(--warn);display:grid;place-items:center;flex:none}
.cmicon svg{width:20px;height:20px}
.cmbody p{margin:0 0 6px}
.coachpage .chalk + div{margin-top:-4px}

/* Reference like Notes */
.refcols2{display:grid;grid-template-columns:minmax(220px,.65fr) minmax(0,2fr);gap:18px;align-items:start}
@media (max-width:760px){.refcols2{grid-template-columns:1fr}}
.folders .nrow{display:grid;grid-template-columns:20px 1fr auto;gap:10px}
.folders .nrow svg{width:20px;height:20px;color:var(--brand)}
.folders .nrow.on{background:var(--brandSoft);color:var(--ink)}
.folders .nrow.on .muted{color:var(--muted)}
.refhead{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap}
.refhead h2{font-size:1.75rem;font-weight:800;letter-spacing:-.025em;margin:0}

/* Celebration */
.celebrate{position:fixed;inset:0;z-index:90;display:grid;place-items:center;background:color-mix(in srgb,var(--paper) 72%,transparent);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);animation:fadeIn .25s ease-out both}
.celebrate.out{animation:fadeOut .25s ease-in both}
.celebrate canvas{position:absolute;inset:0;pointer-events:none}
.cbox{position:relative;display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;background:var(--card);border-radius:28px;padding:28px 28px 22px;box-shadow:0 30px 80px rgba(0,0,0,.18);width:min(380px,calc(100% - 32px));animation:popMark .5s cubic-bezier(.34,1.3,.64,1) both}
.cbox .sig{font-size:2rem;margin:4px 0 0;color:var(--ink)}
.cbox .cproj{margin:0;font-weight:700;font-size:1.0625rem}
.cbox .muted{margin:0 0 10px}
.cbox .b{min-width:160px;min-height:46px}
.fdone-mark circle{fill:color-mix(in srgb,var(--brand) 14%,var(--card));stroke:var(--brand)}
.fdone-mark path{stroke:var(--brand)}

/* Brainstorm mode */
.bslayer{position:fixed;inset:0;z-index:80;background:rgba(0,0,0,.35);display:grid;place-items:center;padding:16px;animation:fadeIn .2s ease-out both}
.bsbox{background:var(--paper);border-radius:22px;width:min(640px,100%);max-height:calc(100% - 20px);overflow:auto;padding:16px 18px 20px;display:flex;flex-direction:column;gap:14px;box-shadow:0 30px 80px rgba(0,0,0,.3)}
.bstop{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.bsring{position:relative;width:96px;height:96px}
.bsring svg{width:100%;height:100%;transform:rotate(-90deg)}
.bsring circle{fill:none;stroke-width:9;stroke-linecap:round}
.bsring .trk{stroke:var(--fill)}.bsring .val{stroke:var(--brand);transition:stroke-dashoffset .25s linear}
.bsring span{position:absolute;inset:0;display:grid;place-items:center;font-weight:800;font-variant-numeric:tabular-nums;font-size:1.125rem}
.bsideas{display:flex;flex-wrap:wrap;gap:8px;min-height:20px}
.bsidea{display:inline-flex;align-items:center;gap:4px;background:var(--card);border-radius:999px;padding:6px 6px 6px 14px;box-shadow:0 0 0 1px var(--line);animation:popMark .3s cubic-bezier(.34,1.3,.64,1) both}
.bsidea button{border:0;background:none;color:var(--muted);width:24px;height:24px;border-radius:50%;cursor:pointer;font-size:1rem}
@media (max-width:700px){.bslayer{place-items:end stretch;padding:0}.bsbox{border-radius:20px 20px 0 0;max-height:94%}}
.b svg{width:16px;height:16px;vertical-align:-3px}

/* ===================================================================
   Krijt = leren en vieren. Regel: handschrift staat ALTIJD op een krijtbord, in krijtkleuren.
   Het woordmerk, tips, uitleg en vieringen; nergens anders.
   =================================================================== */
.wm{display:inline-flex;align-items:baseline;gap:.01em;background:var(--chalk);border-radius:.42em;padding:.12em .42em .06em;font-family:var(--hand);font-weight:700;font-style:normal;line-height:1.05;letter-spacing:.01em;
  box-shadow:inset 0 0 0 .14em color-mix(in srgb,#000 22%,var(--chalk));background-image:radial-gradient(rgba(255,255,255,.06) 1px,transparent 1.5px);background-size:6px 6px}
.wm i{font-style:normal;text-shadow:0 0 1px currentColor}
.wm .ky{color:var(--chalkY)}.wm .kp{color:var(--chalkP)}.wm .kb{color:var(--chalkB)}.wm .kg{color:var(--chalkG)}
body.r-start .wrap > .ititle{font-size:2.1rem!important}
.sbrand .wm{font-size:1.45rem}
.top .brand .wm{font-size:1.35rem}
.chalk h4,.chalk li{text-shadow:0 0 1px currentColor}
/* Viering en 'Inbox zero' op het krijtbord */
.cbox,.fdone{background:var(--chalk)!important;color:var(--chalkInk);background-image:radial-gradient(rgba(255,255,255,.05) 1px,transparent 1.5px)!important;background-size:7px 7px!important;
  box-shadow:inset 0 0 0 7px color-mix(in srgb,#000 20%,var(--chalk)),0 30px 80px rgba(0,0,0,.22)!important}
.fdone{border-radius:24px;margin:8px auto;max-width:560px;padding:40px 22px!important}
.cbox .sig,.fdone .sig{color:var(--chalkY)!important;font-family:var(--hand)!important;text-shadow:0 0 1px currentColor}
.cbox .cproj{color:var(--chalkInk)}
.cbox .muted,.fdone .muted{color:color-mix(in srgb,var(--chalkInk) 75%,transparent)!important}
.cbox .fdone-mark circle,.fdone .fdone-mark circle{fill:none!important;stroke:var(--chalkG)!important}
.cbox .fdone-mark path,.fdone .fdone-mark path{stroke:var(--chalkG)!important}
.fdone .b{background:var(--chalkInk)!important;color:var(--chalk)!important;box-shadow:none!important;border-color:transparent!important}
.fdone .b.green,.cbox .b{background:var(--chalkY)!important;color:#1E2A36!important;border-color:transparent!important}
/* Vier criteria: ingeklapt blijft het een klein krijtbordje, nooit weg */
.chalkpill{display:inline-flex;align-items:center;gap:8px;align-self:flex-start;border:0;cursor:pointer;background:var(--chalk);color:var(--chalkY);font-family:var(--hand);font-weight:700;font-size:1rem;
  border-radius:999px;padding:7px 14px 5px;box-shadow:inset 0 0 0 3px color-mix(in srgb,#000 20%,var(--chalk));text-shadow:0 0 1px currentColor}
.chalkpill small{font-family:var(--body);font-weight:600;font-size:.75rem;color:color-mix(in srgb,var(--chalkInk) 70%,transparent)}
.chalk .x{font-family:var(--body);font-size:.8125rem;width:auto;padding:0 10px;font-weight:600}

/* ===================================================================
   Pop: drukknoppen (Duolingo, ingetogen), een vink die je voelt (Things), Allens vijf stappen op krijt.
   =================================================================== */
.b.green,.cta,.ans.go.big,.inhead .b{box-shadow:0 3px 0 var(--ctaEdge)!important;transition:transform .08s ease-out,box-shadow .08s ease-out}
.b.green:active,.cta:active,.ans.go.big:active,.inhead .b:active{transform:translateY(3px)!important;box-shadow:0 0 0 var(--ctaEdge)!important}
.b:not(.green):not(.sm):active{transform:scale(.97)}
/* The tick */
.cb.ticking{animation:tickpop .42s cubic-bezier(.34,1.56,.64,1) both;border-color:var(--brand)!important;background:var(--brand)!important}
.cb.ticking::after{content:""!important;position:absolute;left:7px;top:3px;width:6px;height:11px;border:solid #fff;border-width:0 2.5px 2.5px 0;transform:rotate(45deg) scale(.4);opacity:0;animation:tickdraw .26s .1s ease-out forwards}
.cb.ticking::before{content:"";position:absolute;inset:-6px;border-radius:50%;border:2px solid var(--brand);animation:tickring .5s ease-out forwards}
@keyframes tickpop{0%{transform:scale(1)}35%{transform:scale(.8)}100%{transform:scale(1)}}
@keyframes tickdraw{to{opacity:1;transform:rotate(45deg) scale(1)}}
@keyframes tickring{from{opacity:.7;transform:scale(.7)}to{opacity:0;transform:scale(1.6)}}
li.ticked .t{color:var(--muted);text-decoration:line-through;text-decoration-color:color-mix(in srgb,var(--muted) 60%,transparent);transition:color .2s}
li.ticked{animation:rowout .3s .3s ease-in forwards}
@keyframes rowout{to{opacity:0;transform:translateX(14px)}}
@media (prefers-reduced-motion: reduce){.cb.ticking,.cb.ticking::after,.cb.ticking::before,li.ticked{animation:none!important}.cb.ticking::after{opacity:1;transform:rotate(45deg)}}
/* Allen's five steps, on chalk */
.fivesteps{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:4px;background:var(--chalk);border-radius:18px;padding:8px;margin:0 0 18px;
  box-shadow:inset 0 0 0 5px color-mix(in srgb,#000 20%,var(--chalk));background-image:radial-gradient(rgba(255,255,255,.06) 1px,transparent 1.5px);background-size:7px 7px}
.fstep{display:flex;flex-direction:column;align-items:flex-start;gap:1px;border:0;background:none;border-radius:12px;padding:8px 10px;cursor:pointer;text-align:left;min-width:0;color:var(--chalkInk)}
.fstep b{font-family:var(--hand);font-weight:700;font-size:1.125rem;line-height:1.15;text-shadow:0 0 1px currentColor}
.fstep b.ky{color:var(--chalkY)}.fstep b.kp{color:var(--chalkP)}.fstep b.kb{color:var(--chalkB)}.fstep b.kg{color:var(--chalkG)}
.fstep small{font-size:.75rem;font-weight:500;color:color-mix(in srgb,var(--chalkInk) 72%,transparent);line-height:1.25;overflow-wrap:anywhere}
.fstep.attn small{color:var(--chalkInk);font-weight:700}
.fstep.attn small::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--chalkY);margin-right:5px;vertical-align:1px}
@media (hover:hover){.fstep:hover{background:rgba(255,255,255,.07)}}
.fstep:focus-visible{outline:2px solid var(--chalkY);outline-offset:-2px}
@media (max-width:560px){.fivesteps{grid-template-columns:repeat(5,minmax(0,1fr));gap:0;padding:6px 4px;margin:0 0 4px}.fstep{padding:6px 4px;align-items:center;text-align:center}.fstep b{font-size:.95rem}.fstep small{font-size:.6875rem}}
.phome .fivesteps{margin-top:2px}

/* Softer boards (round 6): no dark inner frame, a slightly lighter slate-indigo and a soft sheen like real slate.
   Less "block", still clearly a board. Chalk on board stays >= 5.6:1. */
:is(.chalk,.fivesteps,.wm,.chalkpill,.cbox,.fdone){
  box-shadow:0 1px 2px rgba(30,36,50,.10),0 10px 26px -14px rgba(30,36,50,.40)!important;
  background-image:radial-gradient(120% 90% at 18% 0%,rgba(255,255,255,.10),transparent 60%),radial-gradient(rgba(255,255,255,.05) 1px,transparent 1.5px)!important;
  background-size:auto,7px 7px!important}
.wm{box-shadow:0 1px 2px rgba(30,36,50,.12)!important;background-size:auto,6px 6px!important}
.cbox{box-shadow:0 30px 80px rgba(30,36,50,.28)!important}
.fivesteps{border-radius:20px}

/* Why it works + glossary */
.whypill{margin-top:6px}
.whynote h4{font-size:1.125rem;margin:0 0 6px}
.whynote h4.ky{color:var(--chalkY)}.whynote h4.kp{color:var(--chalkP)}.whynote h4.kb{color:var(--chalkB)}.whynote h4.kg{color:var(--chalkG)}
.whynote small{font-size:.875rem!important;line-height:1.5;margin-top:0!important;max-width:62ch}
.whygrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr));gap:12px}
.gloss .gl{display:grid!important;grid-template-columns:minmax(110px,30%) 1fr;gap:12px;align-items:baseline;padding-top:11px;padding-bottom:11px}
.gloss .gl b{font-weight:650}
.gloss .gl span{color:var(--muted);font-size:.9375rem;line-height:1.45;text-align:left}
@media (max-width:520px){.gloss .gl{grid-template-columns:1fr;gap:2px}}

/* ===================================================================
   Krijt zonder bord (ronde 7): handschrift in krijtkleuren direct op de achtergrond.
   Licht: diepere krijttinten, allemaal >= 4,5:1 op #F2F2F7. Donker: de lichte krijtkleuren op zwart, >= 9:1.
   Geen vlak, geen rand, geen schaduw. Wat bij elkaar hoort, houdt zijn plek door ruimte en uitlijning.
   =================================================================== */
:root{--chalkY:#A35F00;--chalkP:#C2347A;--chalkB:#1D74A8;--chalkG:#1F7A45;--chalkInk:#3A3F4B;--chalkMute:#6E6E73}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--chalkY:#FFD666;--chalkP:#FFA7C4;--chalkB:#8FD3FF;--chalkG:#9BE5B0;--chalkInk:#F4F1E8;--chalkMute:#A1A1A6}}
:root[data-theme="dark"]{--chalkY:#FFD666;--chalkP:#FFA7C4;--chalkB:#8FD3FF;--chalkG:#9BE5B0;--chalkInk:#F4F1E8;--chalkMute:#A1A1A6}
:is(.chalk,.fivesteps,.wm,.chalkpill,.fdone){background:none!important;background-image:none!important;box-shadow:none!important;outline:0!important}
.chalk{padding:4px 2px 2px!important;border-radius:0!important;overflow:visible!important}
.chalk h4,.chalk li,.wm i,.fstep b,.chalkpill,.fdone .sig,.cbox .sig{text-shadow:none!important}
.chalk small,.fstep small,.chalkpill small{color:var(--chalkMute)!important}
.chalk .x{color:var(--chalkMute)!important;top:2px!important;right:0!important;opacity:1!important}
.wm{padding:0!important;font-size:inherit}
body.r-start .wrap > .ititle .wm{font-size:2.5rem}
.sbrand .wm{font-size:1.65rem!important}
.chalkpill{padding:4px 0!important;font-size:1.0625rem!important}
.fivesteps{padding:0!important;gap:2px!important;margin:4px 0 14px!important}
.fstep{padding:6px 6px 6px 0!important}
.fstep.attn small{color:var(--chalkInk)!important}
.fstep.attn small::before{background:var(--chalkP)!important}
@media (hover:hover){.fstep:hover{background:none!important}.fstep:hover b{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:3px}}
.fstep:focus-visible{outline:2px solid var(--brand)!important}
.fdone{max-width:none!important;margin:0!important;padding:40px 16px!important}
.fdone .muted{color:var(--muted)!important}
.fdone .b{background:var(--card)!important;color:var(--ink)!important;box-shadow:0 0 0 1px var(--line)!important}
.fdone .b.green{background:var(--cta)!important;color:#fff!important;box-shadow:0 3px 0 var(--ctaEdge)!important}
.cbox{background:var(--card)!important;background-image:none!important;color:var(--ink)!important;box-shadow:0 30px 80px rgba(0,0,0,.18)!important}
.cbox .cproj{color:var(--ink)!important}
.cbox .muted{color:var(--muted)!important}
.cbox .b{background:var(--cta)!important;color:#fff!important;box-shadow:0 3px 0 var(--ctaEdge)!important}
.cbox .fdone-mark circle,.fdone .fdone-mark circle{stroke:var(--chalkG)!important}
.cbox .fdone-mark path,.fdone .fdone-mark path{stroke:var(--chalkG)!important}
.whygrid{gap:18px 28px!important}

/* ===================================================================
   Ronde 8 — één systeem. Geen handschrift meer.
   - Letter: Apple's eigen ronde letter (SF Pro Rounded, via ui-rounded; Nunito daarbuiten) voor merk, stappen en leermomenten.
     Vriendelijk en speels, maar hetzelfde gezin als de rest van de interface, dus niets 'zweeft'.
   - Kleur: de vijf stappen van Allen hebben elk een vaste kleur. Overal dezelfde: strook, tips, lessen, woordenlijst.
   - Tips zien eruit als Apple's TipKit: kaart, icoon links, titel, uitleg, sluitknop.
   =================================================================== */
:root{--s1:#A35F00;--s2:#C2347A;--s3:#1D74A8;--s4:#1F7A45;--s5:#3355E0;--round:var(--hand)}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--s1:#FFB547;--s2:#FF8AB8;--s3:#6CC4FF;--s4:#6EE29A;--s5:#8DA2FF}}
:root[data-theme="dark"]{--s1:#FFB547;--s2:#FF8AB8;--s3:#6CC4FF;--s4:#6EE29A;--s5:#8DA2FF}
.ky,.chalk .ky,.fstep b.ky{color:var(--s1)!important}.kp,.chalk .kp,.fstep b.kp{color:var(--s2)!important}
.kb,.chalk .kb,.fstep b.kb{color:var(--s3)!important}.kg,.chalk .kg,.fstep b.kg{color:var(--s4)!important}
/* Wordmark: the app icon + "helder" in rounded black */
.wm{display:inline-flex!important;align-items:center;gap:.32em;font-family:var(--round)!important;font-weight:800!important;letter-spacing:-.03em!important;color:var(--ink)}
.wm .wmi{width:1.05em;height:1.05em;flex:none;border-radius:.26em;box-shadow:0 1px 2px rgba(36,64,184,.25)}
body.r-start .wrap > .ititle .wm{font-size:2.1rem!important}
.sbrand .wm{font-size:1.45rem!important}.top .brand .wm{font-size:1.3rem!important}
/* Tip cards (TipKit) */
.chalk{background:var(--card)!important;border-radius:16px!important;padding:14px 16px 14px 58px!important;box-shadow:var(--shadow)!important;font-family:var(--body)!important;font-weight:400!important;color:var(--ink)!important;position:relative}
.chalk::before{content:"";position:absolute;left:16px;top:14px;width:30px;height:30px;border-radius:9px;background:color-mix(in srgb,var(--tipc,var(--s5)) 14%,transparent);
  -webkit-mask:none;}
.chalk::after{content:"";position:absolute;left:21px;top:19px;width:20px;height:20px;background:var(--tipc,var(--s5));
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18h6M10 21h4M12 3a6 6 0 0 0-3.5 10.9c.6.5 1 1.2 1 2.1h5c0-.9.4-1.6 1-2.1A6 6 0 0 0 12 3z'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18h6M10 21h4M12 3a6 6 0 0 0-3.5 10.9c.6.5 1 1.2 1 2.1h5c0-.9.4-1.6 1-2.1A6 6 0 0 0 12 3z'/%3E%3C/svg%3E") center/contain no-repeat}
.chalk h4{font-family:var(--body)!important;font-weight:650!important;font-size:1rem!important;color:var(--ink)!important;margin:2px 32px 6px 0!important;letter-spacing:-.01em}
.chalk ol{gap:6px 14px!important}
.chalk li{font-family:var(--round)!important;font-weight:700!important;font-size:1rem!important;color:var(--ink)}
.chalk li b{display:inline-grid;place-items:center;min-width:22px;height:22px;border-radius:7px;font-size:.8125rem!important;color:#fff!important;background:currentColor}
.chalk li b.ky{background:var(--s1)}.chalk li b.kp{background:var(--s2)}.chalk li b.kb{background:var(--s3)}.chalk li b.kg{background:var(--s4)}
.chalk li b.ky,.chalk li b.kp,.chalk li b.kb,.chalk li b.kg{color:#fff!important}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .chalk li b{color:#111!important}}
.chalk li > span:not([class]){color:var(--muted);font-family:var(--body);font-weight:400;font-size:.9375rem}
.chalk small{color:var(--muted)!important;font-size:.875rem!important;line-height:1.45;margin-top:8px!important}
.chalk .x{position:absolute;top:10px!important;right:10px!important;font-size:.8125rem!important;color:var(--muted)!important;font-family:var(--body)!important}
.whynote h4{color:var(--ink)!important}
.whynote.s1{--tipc:var(--s1)}.whynote.s2{--tipc:var(--s2)}.whynote.s3{--tipc:var(--s3)}.whynote.s4{--tipc:var(--s4)}
/* folded tip = one quiet row */
.chalkpill{display:inline-flex!important;align-items:center;gap:8px;background:var(--card)!important;border-radius:999px!important;padding:8px 14px 8px 10px!important;box-shadow:0 0 0 1px var(--line)!important;
  font-family:var(--body)!important;font-weight:600!important;font-size:.9375rem!important;color:var(--ink)!important}
.chalkpill::before{content:"";width:18px;height:18px;background:var(--s5);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18h6M10 21h4M12 3a6 6 0 0 0-3.5 10.9c.6.5 1 1.2 1 2.1h5c0-.9.4-1.6 1-2.1A6 6 0 0 0 12 3z'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18h6M10 21h4M12 3a6 6 0 0 0-3.5 10.9c.6.5 1 1.2 1 2.1h5c0-.9.4-1.6 1-2.1A6 6 0 0 0 12 3z'/%3E%3C/svg%3E") center/contain no-repeat}
.chalkpill small{color:var(--muted)!important;font-weight:500}
/* Five steps: a card with five coloured stops */
.fivesteps{background:var(--card)!important;border-radius:18px!important;box-shadow:var(--shadow)!important;padding:6px!important;gap:2px!important}
.fstep{position:relative;padding:8px 8px 8px 10px!important;border-radius:12px!important}
.fstep b{font-family:var(--round)!important;font-weight:800!important;font-size:1rem!important;display:flex;align-items:center;gap:6px}
.fstep b::before{content:"";width:8px;height:8px;border-radius:50%;background:currentColor;flex:none}
.fstep small{color:var(--muted)!important}
.fstep.attn small{color:var(--ink)!important;font-weight:650!important}
.fstep.attn small::before{display:none!important}
@media (hover:hover){.fstep:hover{background:var(--fill)!important}.fstep:hover b{text-decoration:none!important}}
@media (max-width:560px){.fstep{padding:7px 3px!important;align-items:center!important}.fstep b{font-size:.8125rem!important;gap:4px}.fstep b::before{width:6px;height:6px}.fstep small{font-size:.6875rem!important}}
/* Celebrations and empty states in the same rounded voice */
.sig,.cbox .sig,.fdone .sig{font-family:var(--round)!important;font-weight:800!important;letter-spacing:-.025em!important;color:var(--ink)!important}
.fdone .sig{font-size:2rem!important}

/* ===================================================================
   Learn — pad, lessen, oefeningen. Zelfde letters, kaarten en stapkleuren als de rest.
   Speels in de feedback (pop, schud, haptiek), rustig in de vorm.
   =================================================================== */
.s1{--sc:var(--s1)}.s2{--sc:var(--s2)}.s3{--sc:var(--s3)}.s4{--sc:var(--s4)}.s5{--sc:var(--s5)}
.doodle{display:block;color:var(--sc,var(--brand))}

@keyframes lpulse{50%{box-shadow:0 0 0 3px var(--sc),0 0 0 11px color-mix(in srgb,var(--sc) 6%,transparent)}}

/* lesson */

.lbody{font-size:1.0625rem;line-height:1.55;margin:0;max-width:60ch}

@keyframes lshake{20%{transform:translateX(-6px)}40%{transform:translateX(6px)}60%{transform:translateX(-4px)}80%{transform:translateX(3px)}}
.lfb{font-family:var(--round);font-weight:800;font-size:1.125rem}
.lfb.good{color:var(--s4)}.lfb.meh{color:var(--s1)}

.lcap{display:flex;gap:10px}
.lcap input{flex:1;min-width:0;border:0;background:var(--card);border-radius:14px;padding:12px 14px;font:inherit;font-size:1.0625rem;color:var(--ink);box-shadow:0 0 0 1px var(--line)}
.lcap input:focus{box-shadow:0 0 0 3.5px color-mix(in srgb,var(--sc) 30%,transparent)!important}
.lmeter{display:flex;gap:6px}
.lmeter i{flex:1;height:10px;border-radius:999px;background:var(--fill)}
.lmeter i.on{background:var(--sc);animation:tickpop .35s cubic-bezier(.34,1.56,.64,1)}
.lcaplist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.lcaplist li{display:flex;align-items:center;gap:10px;color:var(--muted)}
.lcaplist svg{width:18px;height:18px;color:var(--sc)}

/* overview entry */
.learncard{display:flex;align-items:center;gap:14px;width:100%;border:0;background:var(--card);border-radius:18px;padding:12px 14px;margin:0 0 14px;cursor:pointer;text-align:left;font:inherit;color:var(--ink);box-shadow:var(--shadow)}
.learncard .doodle{width:52px;height:26px;flex:none;color:var(--brand)}
.learncard span:nth-of-type(1){flex:1;min-width:0;display:flex;flex-direction:column}
.learncard small{color:var(--muted);font-size:.8125rem}
.learncard b{font-family:var(--round);font-weight:800;font-size:1.0625rem}
.lcgo{background:var(--cta);color:#fff;border-radius:999px;padding:8px 14px;font-weight:700;font-size:.875rem;box-shadow:0 3px 0 var(--ctaEdge);flex:none}
.c-indigo .doodle{color:#fff}
@media (prefers-reduced-motion: reduce){.lmeter i.on{animation:none!important}}

/* Text on step colours: white in light mode, deep ink in dark mode (the dark-mode step colours are light). */
:root{--onsc:#fff}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--onsc:#0B1020}}
:root[data-theme="dark"]{--onsc:#0B1020}

/* Doodles in empty states, the Inbox header and celebrations */
.emptyd{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;padding:22px 16px;color:var(--muted)}
.emptyd p,.emptycard p{margin:0;max-width:34ch;line-height:1.45}
.edd{width:84px;height:42px;color:var(--sc,var(--brand))}
.emptycard .edd{width:96px;height:48px}
.emptycard svg.edd{color:var(--sc)}
.inhead .inhd{width:56px;height:28px;flex:none;color:var(--s1)}
.inhead.heat-0{background:color-mix(in srgb,var(--s4) 10%,var(--card))}
.sigul{width:150px;height:20px;color:var(--s1);margin:-6px auto 2px}
.cbox .sigul{color:var(--s1)}

/* Sidebar: Inbox and Clarify as two clean rows (replaces the sketched 1994 trays) */
.trays{display:grid!important;grid-template-columns:1fr 1fr;gap:6px!important;padding:0!important;margin:2px 0 4px}
.tray{display:flex!important;align-items:center;gap:8px!important;background:var(--card)!important;border-radius:12px!important;padding:8px 10px!important;box-shadow:0 0 0 1px var(--line);min-height:40px;color:var(--ink)}
.tray svg{width:20px!important;height:20px!important;opacity:1!important;color:var(--brand)}
.tray svg *{stroke:currentColor!important}
.tray .tl{font-weight:600;font-size:.9375rem;flex:1;min-width:0;color:var(--ink)!important;font-family:var(--body)!important;text-transform:none!important;grid-column:auto!important}
.tray .ct{position:static!important;transform:none!important;font-family:var(--body)!important;font-weight:700;font-size:.75rem;min-width:22px;text-align:center;border-radius:999px;padding:2px 7px!important;color:#fff!important;background:var(--heat,var(--cta))!important}
.tray.on{background:var(--brandSoft)!important;box-shadow:0 0 0 1px color-mix(in srgb,var(--brand) 35%,transparent)}
@media (hover:hover){.tray:hover{background:var(--fill)!important}}

/* Get started: setup steps + background reads */
.ltabs{align-self:flex-start;margin-bottom:6px}

.ltimes{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.ltimes li{display:grid;grid-template-columns:90px 1fr;gap:10px;background:var(--card);border-radius:14px;padding:12px 14px;box-shadow:var(--shadow)}
.ltimes b{font-family:var(--round);font-weight:800}
.ltimes span{color:var(--muted)}
.lprompts{display:flex;flex-wrap:wrap;gap:8px}
.lprompts span{background:var(--card);border-radius:999px;padding:7px 13px;font-size:.9375rem;box-shadow:0 0 0 1px var(--line)}
.lsweep{background:var(--card);border-radius:18px;padding:16px;display:flex;flex-direction:column;gap:12px;box-shadow:var(--shadow)}
.lsweep h3{margin:0;font-family:var(--round);font-weight:800;font-size:1.25rem}
.lsweep .eyebrow{color:var(--sc)}
.lsweep .lprompts span{background:var(--paper);box-shadow:none}
.lsweepnav{justify-content:space-between}
.lcapn{display:flex;align-items:center;gap:8px;margin:0;color:var(--muted)}
.lcapn svg{width:18px;height:18px;color:var(--sc)}
.lcapn b{color:var(--ink)}
.lcap.two input:first-child{flex:0 0 32%}
.lbig{display:flex;align-items:baseline;gap:10px}
.lbig b{font-family:var(--round);font-weight:800;font-size:3rem;line-height:1;color:var(--sc);font-variant-numeric:tabular-nums}
.lbig.zero b{color:var(--s4)}
.lprojs .lproj{display:flex!important;flex-direction:column;align-items:stretch!important;gap:8px;padding-top:10px;padding-bottom:10px}
.lpt{display:flex;flex-direction:column;gap:2px}
.lpt small{display:flex;align-items:center;gap:6px;font-size:.875rem}
.lpt small svg{width:15px;height:15px}
.lpt small.ok{color:var(--s4)}.lpt small.need{color:var(--s1);font-weight:650}
.lnaform{display:flex;gap:8px}
.lnaform input{flex:1;min-width:0;border:0;background:var(--fill);border-radius:10px;padding:8px 10px;font:inherit;color:var(--ink);text-align:left!important;max-width:none!important}
.lctx{display:flex;flex-wrap:wrap;gap:8px}
.lctxchip{background:var(--card);border-radius:999px;padding:7px 14px;font-weight:600;box-shadow:0 0 0 1px var(--line)}
.ldays{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px}
.ldaybtn{border:0;background:var(--card);border-radius:12px;min-height:46px;font:inherit;font-weight:700;color:var(--ink);cursor:pointer;box-shadow:0 0 0 2px var(--line),0 3px 0 var(--line)}
.ldaybtn.on{background:var(--sc);color:var(--onsc);box-shadow:0 3px 0 color-mix(in srgb,var(--sc) 70%,#000)}
.ldaybtn:active{transform:translateY(3px);box-shadow:none}

/* Notes layout (Reference, project material, checklists) — inspired by Apple Notes */
.notes3{display:grid;grid-template-columns:minmax(200px,.8fr) minmax(240px,1fr) minmax(0,2fr);gap:0;background:var(--card);border-radius:18px;box-shadow:var(--shadow);overflow:hidden;min-height:min(70vh,640px)}
.notes3.two{grid-template-columns:minmax(240px,1fr) minmax(0,2fr)}
.notes3.phone{display:block;background:none;box-shadow:none;border-radius:0;min-height:0}
.npane{display:flex;flex-direction:column;min-width:0;padding:14px 12px}
.notes3:not(.phone) .npane + .npane{border-left:.5px solid var(--line)}
.nfold{background:color-mix(in srgb,var(--paper) 60%,var(--card))}
.notes3.phone .npane{padding:0;gap:8px}
.notes3.phone .nfold,.notes3.phone .nlist,.notes3.phone .nedit{background:none}
.nhd{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:2px 6px 8px}
.nhd h2{margin:0;font-family:var(--round);font-weight:800;font-size:1.375rem;letter-spacing:-.02em;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nhd h3{margin:0;font-size:.8125rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.nhd.sub{margin-top:14px}
.nicon{border:0;background:none;color:var(--brand);cursor:pointer;display:inline-flex;align-items:center;gap:2px;width:auto;height:34px;border-radius:9px;padding:0 6px;font-weight:700}
.nicon svg{width:22px;height:22px}
.nicon:hover{background:var(--fill)}
.nfrow{display:grid;grid-template-columns:22px 1fr auto;align-items:center;gap:10px;border:0;background:none;text-align:left;font:inherit;color:var(--ink);padding:9px 8px;border-radius:10px;cursor:pointer}
.nfrow svg{width:20px;height:20px;color:var(--brand)}
.nfrow span:nth-child(2){overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nfc{color:var(--muted);font-variant-numeric:tabular-nums;font-size:.875rem}
.nfrow.on{background:var(--brandSoft)}
@media (hover:hover){.nfrow:hover:not(.on){background:var(--fill)}}
.notes3.phone .nfrow{background:var(--card);border-radius:0;padding:12px 14px}
.notes3.phone .nfold .nfrow:first-of-type{border-radius:12px 12px 0 0}
.nempty{font-size:.875rem;padding:4px 8px;margin:0}
.ncount{margin:0 6px 8px;color:var(--muted);font-size:.8125rem}
.nnotes{display:flex;flex-direction:column}
.nnote{display:flex;flex-direction:column;gap:2px;border:0;background:none;text-align:left;font:inherit;color:var(--ink);padding:10px 10px;border-radius:10px;cursor:pointer;position:relative}
.nnote + .nnote::before{content:"";position:absolute;top:0;left:10px;right:10px;border-top:.5px solid var(--line)}
.nnote b{font-weight:650;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nnote span{color:var(--muted);font-size:.875rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nnote time{color:var(--ink);opacity:.75;margin-right:6px}
.nnote.on{background:var(--brandSoft)}.nnote.on::before,.nnote.on + .nnote::before{display:none}
.notes3.phone .nnotes{background:var(--card);border-radius:12px;padding:2px 4px}
.nedit{padding:12px 22px 22px}
.ndate{color:var(--muted);font-size:.8125rem;flex:1;text-align:center}
.ntitle{border:0!important;background:none!important;font-family:var(--round);font-weight:800;font-size:1.6rem!important;letter-spacing:-.02em;color:var(--ink)!important;padding:4px 0!important;width:100%;box-shadow:none!important}
.nbody{border:0!important;background:none!important;font:inherit;font-size:1.0625rem!important;line-height:1.55;color:var(--ink);min-height:300px;width:100%;resize:none;padding:6px 0!important;box-shadow:none!important}
.ntitle:focus,.nbody:focus{outline:none!important}
.nblank{align-items:center;justify-content:center;text-align:center;gap:6px}
.notes3.phone .nedit{background:var(--card);border-radius:16px;padding:12px 16px 18px}
@media (max-width:980px){.notes3:not(.phone){grid-template-columns:minmax(190px,.8fr) minmax(0,1.6fr)}.notes3:not(.phone):not(.two) .nedit{grid-column:1/-1;border-left:0!important;border-top:.5px solid var(--line)}}
.cllist{list-style:none;margin:6px 0 0;padding:0}
.cllist li{display:flex;align-items:center;gap:12px;padding:9px 0;border-bottom:.5px solid var(--line)}
.cllist li span{flex:1;font-size:1.0625rem}
.cllist li.done span{color:var(--muted);text-decoration:line-through}
.cllist .xbtn{opacity:.45}
.cktabs{align-self:flex-start;margin-bottom:12px}
/* Check-in */
.cprow{display:flex;flex-direction:column;gap:6px;padding:8px 0}
.cprow span{font-weight:650}.cprow small{display:block;color:var(--muted);font-weight:400}
.cprow input[type=range]{width:100%;accent-color:var(--brand)}
.cpgrid{display:grid;grid-template-columns:minmax(220px,280px) 1fr;gap:18px;align-items:center;margin-top:8px}
@media (max-width:620px){.cpgrid{grid-template-columns:1fr}}
.cpgrid svg{width:100%;max-width:300px}
.cpgrid rect{stroke:var(--card);stroke-width:3}
.cpgrid .q0{fill:color-mix(in srgb,var(--s4) 22%,var(--card))}.cpgrid .q1x{fill:color-mix(in srgb,var(--s2) 16%,var(--card))}
.cpgrid .q2{fill:color-mix(in srgb,var(--s3) 16%,var(--card))}.cpgrid .q3{fill:color-mix(in srgb,var(--s1) 16%,var(--card))}
.cpgrid text{font:600 12px var(--body);fill:var(--ink)}.cpgrid text.ax{fill:var(--muted);font-weight:500;font-size:11px}
.cpdot{fill:var(--brand);stroke:var(--card);stroke-width:4;transition:cx .3s,cy .3s}
.cpres h3{margin:2px 0 6px;font-family:var(--round);font-weight:800;font-size:1.375rem}
.cpres p{margin:0 0 12px;line-height:1.5}

/* Learn GTD: sessions, quick start, non-graded questions */

.ltabs{max-width:100%;overflow-x:auto;scrollbar-width:none}.ltabs button{white-space:nowrap}

/* Checklists home */
.ckhome{display:flex;flex-direction:column;gap:12px;max-width:900px}
.ckpins{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:12px}
.ckpin{display:flex;flex-direction:column;align-items:flex-start;gap:4px;text-align:left;border:0;background:var(--card);border-radius:18px;padding:14px 16px;cursor:pointer;font:inherit;color:var(--ink);box-shadow:var(--shadow);transition:transform .12s}
.ckpin:active{transform:scale(.98)}
.ckpi{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;background:color-mix(in srgb,var(--s4) 14%,transparent);color:var(--s4);margin-bottom:4px}
.ckpi svg{width:20px;height:20px}
.ckpin b{font-family:var(--round);font-weight:800;font-size:1.0625rem}
.ckpin small{color:var(--muted)}
.ckprog{width:100%;height:6px;border-radius:999px;background:var(--fill);overflow:hidden;margin-top:6px}
.ckprog i{display:block;height:100%;background:var(--s4);border-radius:inherit}
.ckhd{display:flex;align-items:center;justify-content:space-between;gap:10px}
.ckhd .b svg{width:15px;height:15px;vertical-align:-2px}
.ckrow{display:grid!important;grid-template-columns:1fr auto auto;align-items:center;gap:12px}
.ckrow .link{text-align:left;font-weight:600}
.pinbtn{border:0;background:none;color:var(--muted);width:34px;height:34px;border-radius:50%;cursor:pointer;display:grid;place-items:center}
.pinbtn svg{width:19px;height:19px}.pinbtn.on{color:var(--s1)}.pinbtn.on svg{fill:currentColor}
.cksug{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px}
.cksugc{display:flex;flex-direction:column;align-items:flex-start;gap:2px;text-align:left;border:1.5px dashed var(--line);background:none;border-radius:16px;padding:12px 14px;cursor:pointer;font:inherit;color:var(--ink)}
.cksugc b{font-weight:700}.cksugc small{color:var(--muted)}
.cksugc span{margin-top:6px;color:var(--brand);font-weight:700;font-size:.875rem;display:inline-flex;align-items:center;gap:4px}
.cksugc span svg{width:14px;height:14px}
@media (hover:hover){.cksugc:hover{border-color:var(--brand);background:var(--brandSoft)}}
.ckback{display:inline-block;margin-bottom:8px;font-size:1rem}

.hzr{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin:2px 0 10px;font-size:.875rem;color:var(--muted)}
.hzr span:first-child{display:inline-flex;align-items:center;gap:6px}
.hzr svg{width:16px;height:16px;color:var(--s4)}
.hzr select{border:0;background:var(--fill);border-radius:8px;padding:4px 8px;font:inherit;color:var(--ink)}

/* Project material as tiles */
.pmat{display:flex;flex-direction:column;gap:8px}
.pmh{display:flex;align-items:baseline;gap:10px;padding:0 2px}
.pmh b{font-weight:700}.pmh .muted{font-size:.875rem;flex:1}
.pmtiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.pmtile{display:flex;flex-direction:column;align-items:flex-start;gap:4px;text-align:left;border:0;background:var(--card);border-radius:14px;padding:12px;min-height:84px;cursor:pointer;font:inherit;color:var(--ink);box-shadow:var(--shadow)}
.pmtile b{font-weight:650;font-size:.9375rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
.pmtile small{color:var(--muted);font-size:.8125rem;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.pmtile.add{align-items:center;justify-content:center;box-shadow:none;border:1.5px dashed var(--line);background:none;color:var(--brand)}
.pmtile.add svg{width:22px;height:22px}.pmtile.add small{color:var(--brand);font-weight:600}
@media (hover:hover){.pmtile:hover{transform:translateY(-1px)}}

/* Notes editor */
.ntools{display:flex;align-items:center;flex-wrap:wrap;gap:2px;padding:6px 0 8px;border-bottom:.5px solid var(--line);margin-bottom:8px;position:sticky;top:0;background:inherit;z-index:2}
.ntools button,.ntools select{border:0;background:none;min-width:34px;height:34px;border-radius:8px;cursor:pointer;color:var(--ink);font:inherit;font-size:1rem;display:inline-grid;place-items:center}
.ntools select{padding:0 6px;font-weight:700;color:var(--brand)}
.ntools svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.ntools svg circle{fill:none}
@media (hover:hover){.ntools button:hover,.ntools select:hover{background:var(--fill)}}
.nsep{width:1px;height:20px;background:var(--line);margin:0 4px}
div.nbody{min-height:320px;outline:none;font-size:1.0625rem;line-height:1.55;color:var(--ink);padding:4px 0 40px;overflow-wrap:anywhere}
div.nbody:empty::before{content:attr(data-ph);color:var(--muted)}
div.nbody h1{font-family:var(--round);font-size:1.6rem;font-weight:800;margin:.4em 0 .2em;letter-spacing:-.02em}
div.nbody h2{font-size:1.3rem;font-weight:700;margin:.6em 0 .2em}
div.nbody h3{font-size:1.1rem;font-weight:650;margin:.6em 0 .2em}
div.nbody p{margin:.3em 0}
div.nbody ul,div.nbody ol{margin:.3em 0;padding-left:1.4em}
div.nbody a{color:var(--brand)}
div.nbody ul.nchk{list-style:none;padding-left:0}
div.nbody ul.nchk > li{position:relative;padding-left:30px;margin:6px 0;min-height:24px}
div.nbody ul.nchk > li::before{content:"";position:absolute;left:0;top:2px;width:20px;height:20px;border-radius:50%;border:1.5px solid var(--control,#C7C7CC);cursor:pointer}
div.nbody ul.nchk > li[data-done="1"]{color:var(--muted)}
div.nbody ul.nchk > li[data-done="1"]::before{background:var(--s1);border-color:var(--s1);box-shadow:inset 0 0 0 3px var(--card)}
.lcardx{display:flex!important;align-items:center;gap:12px;max-width:420px;margin:8px 0;padding:10px 12px;border-radius:12px;background:var(--fill);color:var(--ink)!important;text-decoration:none!important;user-select:none;position:relative}
.lcardx img{width:28px;height:28px;border-radius:7px;background:var(--card);flex:none}
.lch{display:flex;flex-direction:column;min-width:0;flex:1}
.lch b{font-weight:650;font-size:.9375rem}
.lch small{color:var(--muted);font-size:.8125rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lcsw{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;color:var(--muted);cursor:pointer;flex:none}
.lcsw:hover{background:var(--card)}
.nlinkx{display:inline-flex;align-items:center;gap:4px;padding:1px 8px;border-radius:7px;background:var(--brandSoft);color:var(--brand)!important;text-decoration:none!important;font-weight:600;user-select:none}
.nlinkx::before{content:"↗";font-size:.8em}
.npop{position:fixed;left:50%;top:18%;transform:translateX(-50%);z-index:95;background:var(--card);border-radius:16px;box-shadow:0 24px 60px rgba(0,0,0,.22);padding:14px;width:min(360px,calc(100% - 32px))}
.npopf{display:flex;flex-direction:column;gap:10px}
.npopf input[type=url],.npopf input[type=search]{border:0;background:var(--fill);border-radius:10px;padding:10px 12px;font:inherit;color:var(--ink)}
.npopseg{display:flex;gap:14px;font-size:.9375rem}
.npopf .row{justify-content:flex-end;gap:8px}
.npl{display:flex;flex-direction:column;max-height:260px;overflow:auto}
.npl button{border:0;background:none;text-align:left;padding:9px 8px;border-radius:8px;font:inherit;color:var(--ink);cursor:pointer}
.npl button:hover{background:var(--fill)}

/* Location suggestions */
.locwrap{flex:1;display:flex;justify-content:flex-end;min-width:0}
.locwrap input#eloc{width:100%}
.locsug{background:var(--card);border-radius:12px;box-shadow:0 10px 30px rgba(0,0,0,.14);margin:-4px 0 8px;overflow:hidden}
.locopt{display:flex;flex-direction:column;align-items:flex-start;gap:1px;width:100%;border:0;background:none;text-align:left;padding:10px 14px;font:inherit;color:var(--ink);cursor:pointer}
.locopt + .locopt{border-top:.5px solid var(--line)}
.locopt small{color:var(--muted)}
.locopt:hover{background:var(--fill)}
.locattr{margin:0;padding:6px 14px 8px;font-size:.6875rem;color:var(--muted)}
.maplink{color:var(--brand);text-decoration:none}

.lmode{display:inline-flex;align-self:flex-start;background:var(--fill);border-radius:999px;padding:3px;gap:2px}
.lmode button{border:0;background:none;border-radius:999px;padding:6px 14px;font:inherit;font-size:.875rem;font-weight:600;color:var(--muted);cursor:pointer}
.lmode button.on{background:var(--card);color:var(--ink);box-shadow:0 1px 3px rgba(0,0,0,.1)}

/* Sidebar rows with coloured icon tiles (like Reminders) */
#btns .b{display:flex!important;align-items:center;gap:10px!important;border-radius:10px!important;padding:5px 8px!important;min-height:36px;transition:background-color .12s,transform .08s}
#btns .b .ri{width:26px;height:26px;border-radius:8px;display:grid;place-items:center;flex:none;color:#fff}
#btns .b .ri svg{width:16px!important;height:16px!important;color:#fff!important;stroke:#fff}
#btns .b.on{background:var(--brandSoft)!important;color:var(--ink)!important}
#btns .b.on .nl{font-weight:650}
#btns .b:active{transform:scale(.98)}
@media (hover:hover){#btns .b:hover:not(.on){background:var(--fill)!important}}

/* ===================================================================
   Icon tiles: soft tint + coloured glyph (like Apple's Notes and Reminders sidebars), from the step palette.
   Playful but calm; works in light and dark.
   =================================================================== */
:root{--s6:#7B4FD6;--s7:#0F8A8A;--sgray:#8E8E93}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--s6:#B79CFF;--s7:#5FD4D0;--sgray:#A1A1A6}}
:root[data-theme="dark"]{--s6:#B79CFF;--s7:#5FD4D0;--sgray:#A1A1A6}
.c-blue{--tc:var(--s3)}.c-indigo{--tc:var(--s5)}.c-orange{--tc:var(--s1)}.c-gray{--tc:var(--sgray)}.c-purple{--tc:var(--s6)}
.c-green{--tc:var(--s4)}.c-teal{--tc:var(--s7)}.c-brown{--tc:var(--s1)}.c-yellow{--tc:var(--s1)}.c-pink{--tc:var(--s2)}.c-red{--tc:var(--s2)}
.ri[class*="c-"],.ti[class*="c-"],#btns .b .ri{background:color-mix(in srgb,var(--tc,var(--brand)) 15%,var(--card))!important;color:var(--tc,var(--brand))!important}
.ri[class*="c-"] svg,.ti[class*="c-"] svg,#btns .b .ri svg{color:var(--tc,var(--brand))!important;stroke:currentColor!important}
.tile.heat-0 .ti,.tile.heat-1 .ti,.tile.heat-2 .ti,.tile.heat-3 .ti{background:color-mix(in srgb,var(--heat) 16%,var(--card))!important;color:var(--heat)!important}
.tile.heat-0 .ti svg,.tile.heat-1 .ti svg,.tile.heat-2 .ti svg,.tile.heat-3 .ti svg{color:var(--heat)!important}
#btns .b.on .ri{background:var(--card)!important}
/* sidebar density: no stray scrolling */
@media (min-width:1000px){.nav{gap:10px!important;padding:16px 12px 16px!important;scrollbar-width:none}.nav::-webkit-scrollbar{display:none}#btns .b{min-height:32px!important;padding:3px 8px!important}.nsep{height:8px!important}}
/* medium screens: one tidy, scrollable row */
@media (min-width:701px) and (max-width:999px){
  .nav{display:flex;align-items:center;gap:10px;overflow:hidden}
  .nav > div:last-child{flex:1;min-width:0}
  .btns{display:flex!important;flex-wrap:nowrap!important;overflow-x:auto;gap:6px!important;scrollbar-width:none;padding:2px}
  .btns::-webkit-scrollbar{display:none}
  .nav .b svg{display:block!important;width:15px;height:15px}
  #btns .b{flex:none;background:var(--card)!important;box-shadow:0 0 0 1px var(--line);border-radius:999px!important;padding:4px 12px 4px 4px!important;font-size:.875rem;white-space:nowrap}
  #btns .b .ri{width:24px;height:24px;border-radius:50%}
  #btns .b.on{box-shadow:0 0 0 1.5px var(--brand)}
  .nsep{display:none!important}
  .trays{display:flex!important;flex:none}
}

/* Calmer sort menu; even four-criteria grid */
.sortf select,.napage .sortf select{font-family:var(--body)!important;font-weight:500!important;font-size:.9375rem!important;text-transform:none!important;letter-spacing:0!important;color:var(--ink)!important}
.chalk ol{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px 16px!important}
.chalk ol[style*="1fr"]{grid-template-columns:1fr!important}
.chalk li{align-items:center!important}

.cotabs{align-self:flex-start;max-width:100%;overflow-x:auto;scrollbar-width:none}.cotabs button{white-space:nowrap}
.cprem{margin-top:4px}

.calseg{max-width:100%;overflow-x:auto;scrollbar-width:none;align-self:flex-start}.calseg button{white-space:nowrap}

.aico{width:28px;height:28px;border-radius:9px;display:inline-grid;place-items:center;flex:none;background:color-mix(in srgb,var(--s4) 15%,var(--card));color:var(--s4);margin-right:8px;vertical-align:middle}
.aico svg{width:17px;height:17px}.aico.letter{font-family:var(--round);font-weight:800;font-size:.875rem}
.navlist .nrow{display:flex;align-items:center}.navlist .nrow > span:nth-child(2){flex:1}
.acard .aico{margin:0 0 8px}
.keys .frow{justify-content:space-between}
kbd{font-family:var(--body);font-weight:700;font-size:.8125rem;min-width:28px;text-align:center;padding:3px 8px;border-radius:7px;background:var(--fill);box-shadow:inset 0 -1px 0 var(--line);color:var(--ink)}

/* Afdrukken (Allen 1994: "Prints any views in any hard-copy format"): alleen het scherm zelf, zwart op wit. */
@media print{
  :root{--paper:#fff;--card:#fff;--ink:#000;--muted:#444;--line:#999;color-scheme:light}
  body{background:#fff!important;padding:0!important}
  .nav,.top,.iosbar,.ititle,.tabbar,#statusBar,.toast,#modal,.grip,.peek,.b,.txtbtn,.qc,.filters,.verbs{display:none!important}
  .sheet,.stacked,.stacked1{box-shadow:none!important;margin:0 0 12px!important;break-inside:avoid}
  .wrap{max-width:none}
}
.cbox .b:focus-visible,.fdone .b:focus-visible{outline-color:var(--chalkInk)}

/* ===================================================================
   Ronde 9 — speelse kleuren, squircles, één druppel als merk, rustiger klikken.
   =================================================================== */
/* Playful palette: each colour has a glyph tone (>= 3:1 on its own tint) and a tint, in light and dark. */
:root{--k-blue:#1C7ED6;--k-green:#2B8A3E;--k-orange:#E8590C;--k-pink:#D6336C;--k-purple:#7950F2;--k-teal:#0C8599;--k-red:#E03131;--k-yellow:#C98A00;--k-indigo:#4263EB;--k-gray:#868E96;
  --notes:#D9A400;--notesSel:#FFE08A;--notesInk:#1d1d1f;--rule:rgba(60,60,67,.11)}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--k-blue:#74C0FC;--k-green:#8CE99A;--k-orange:#FFA94D;--k-pink:#F783AC;--k-purple:#B197FC;--k-teal:#66D9E8;--k-red:#FF8787;--k-yellow:#FFD43B;--k-indigo:#91A7FF;--k-gray:#ADB5BD;
  --notes:#FFD60A;--notesSel:#5C4A00;--notesInk:#f5f5f7;--rule:rgba(235,235,245,.07)}}
:root[data-theme="dark"]{--k-blue:#74C0FC;--k-green:#8CE99A;--k-orange:#FFA94D;--k-pink:#F783AC;--k-purple:#B197FC;--k-teal:#66D9E8;--k-red:#FF8787;--k-yellow:#FFD43B;--k-indigo:#91A7FF;--k-gray:#ADB5BD;--notes:#FFD60A;--notesSel:#5C4A00;--notesInk:#f5f5f7;--rule:rgba(235,235,245,.07)}
.c-blue,.ac-blue{--tc:var(--k-blue)}.c-green,.ac-green{--tc:var(--k-green)}.c-orange,.ac-orange{--tc:var(--k-orange)}.c-pink,.ac-pink{--tc:var(--k-pink)}.c-purple,.ac-purple{--tc:var(--k-purple)}
.c-teal,.ac-teal{--tc:var(--k-teal)}.c-red,.ac-red{--tc:var(--k-red)}.c-yellow,.ac-yellow{--tc:var(--k-yellow)}.c-indigo,.ac-indigo{--tc:var(--k-indigo)}.c-gray{--tc:var(--k-gray)}.c-brown{--tc:var(--k-yellow)}
.aico[class*="ac-"],.ipi[class*="ac-"]{background:color-mix(in srgb,var(--tc) 16%,var(--card))!important;color:var(--tc)!important}
.ipc{background:var(--tc)!important}

/* Squircles: Apple's continuous corners where the browser supports them (corner-shape), soft rounding elsewhere. */
@supports (corner-shape: squircle){
  .ri,.ti,.aico,.ckpi,.ipi,#btns .b .ri{corner-shape:squircle;border-radius:34%!important}
  .ckpin,.tile,.learncard,.pmtile,.notes3,.cksugc,.flowbar,.lsweep,.group,.mbox,.cbox{corner-shape:squircle;border-radius:28px!important}
  .tray,.nfrow,.nnote,#btns .b{corner-shape:squircle;border-radius:14px!important}
}

/* Wordmark: the drop icon and "Helder". */
.wm .wmi{width:1.1em;height:1.1em;border-radius:0!important;box-shadow:none!important;filter:drop-shadow(0 1px 1.5px rgba(36,64,184,.25))}
.wm > span{letter-spacing:-.02em}

/* Sidebar and lists: the highlight follows the pointer at once (no fading behind the mouse). */
#btns .b,.tray,.nfrow,.nnote,.irow,.navlist .nrow,.ckrow,.frow{transition:none!important}
@media (hover:hover){.nfrow:hover:not(.on),.nnote:hover:not(.on),.navlist .nrow:hover:not(.on){background:var(--fill)!important}}
.nfrow,.nnote{min-height:40px;user-select:none;-webkit-user-select:none}
.nfrow:active,.nnote:active,#btns .b:active,.tray:active{transform:scale(.985)}
.topset{display:inline-flex!important;align-items:center;gap:6px}
.topset svg{width:17px;height:17px}

/* Prompts are things to read, not to click or select. */
.lprompts span,.lctxchip{cursor:default;user-select:none;-webkit-user-select:none}
/* Mind sweep: the buttons stay in one place, whatever the prompt length. */
.lsweephd{display:flex;align-items:center;justify-content:space-between;gap:10px}
.lsweepnav{display:flex;gap:8px;flex:none}
.lsweepnav .b:first-child{min-width:40px}

/* Notes: Apple Notes' warm yellow for folders, selection and tools, and faint writing lines in the note. */
.notes3 .nfrow svg,.notes3 .nicon,.ntools select{color:var(--notes)!important}
.notes3 .nfrow.on,.notes3 .nnote.on{background:var(--notesSel)!important;color:var(--notesInk)}
.notes3 .nnote.on span,.notes3 .nnote.on time{color:color-mix(in srgb,var(--notesInk) 70%,transparent)!important}
.notes3 .nfrow.on .nfc{color:var(--notesInk)}
div.nbody{background-image:repeating-linear-gradient(to bottom,transparent 0,transparent calc(1.7em - 1px),var(--rule) calc(1.7em - 1px),var(--rule) 1.7em)!important;background-attachment:local!important;line-height:1.7em!important;background-position:0 .28em!important}
div.nbody ul.nchk > li[data-done="1"]::before{background:var(--notes)!important;border-color:var(--notes)!important}
div.nbody a,.lcardx{color:inherit}
.notes3 .compose svg{color:var(--notes)}

/* Links on next actions: a small pill with the site's icon. */
.lpill{display:inline-flex;align-items:center;gap:5px;margin-left:8px;padding:2px 8px 2px 4px;border-radius:999px;background:var(--fill);color:var(--ink)!important;text-decoration:none!important;font-size:.8125rem;font-weight:600;vertical-align:1px;max-width:220px}
.lpill img,.lpill .lpi{width:16px;height:16px;border-radius:4px;flex:none;background:var(--card)}
.lpill span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lpill svg{width:9px;height:9px;flex:none;fill:none;stroke:var(--muted);stroke-width:1.6;stroke-linecap:round}
@media (hover:hover){.lpill:hover{background:var(--brandSoft)}}

/* Guided review bar: stays on top while you move through the steps. */
#flowslot{position:sticky;top:8px;z-index:30}
#flowslot:empty{display:none}
#flowslot .flowbar{position:relative;top:0;margin:0}
.flowbar{position:sticky;top:8px;z-index:30;background:color-mix(in srgb,var(--card) 92%,transparent);backdrop-filter:saturate(1.6) blur(14px);-webkit-backdrop-filter:saturate(1.6) blur(14px);border-radius:18px;box-shadow:0 0 0 1px var(--line),0 8px 24px rgba(0,0,0,.08);margin:0 0 16px;overflow:hidden}
.fbprog{height:3px;background:var(--fill)}.fbprog i{display:block;height:100%;background:var(--s4);transition:width .3s}
.fbin{display:flex;align-items:center;gap:14px;padding:10px 12px 10px 16px;flex-wrap:wrap}
.fbt{flex:1;min-width:200px;display:flex;flex-direction:column}
.fbt small{font-size:.75rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--s4)}
.fbt b{font-family:var(--round);font-weight:800;font-size:1.0625rem}
.fbt span{color:var(--muted);font-size:.875rem}
.fbn{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.fbx{border:0;background:none;color:var(--muted);font-size:1.4rem;line-height:1;width:34px;height:34px;border-radius:50%;cursor:pointer}
.fbx:hover{background:var(--fill)}
.step.cur{background:color-mix(in srgb,var(--s4) 10%,transparent);border-radius:12px;box-shadow:0 0 0 1.5px color-mix(in srgb,var(--s4) 45%,transparent)}
.revstart{align-self:flex-start;margin:2px 0 4px}
.revhint{margin:0 0 8px!important;padding:0!important}
.ckpins > p{grid-column:1/-1;margin:0}

/* Calendar: several weeks at a glance. */
.rangehd{display:flex;gap:10px;flex-wrap:wrap}
.rangenote{margin:-6px 0 0;font-size:.875rem}
.rangel{display:flex;flex-direction:column;background:var(--card);border-radius:18px;box-shadow:var(--shadow);overflow:hidden}
.rday{display:grid;grid-template-columns:76px 1fr;gap:12px;padding:10px 14px;border-top:.5px solid var(--line)}
.rday:first-child{border-top:0}
.rday.istoday{background:color-mix(in srgb,var(--brand) 7%,transparent)}
.rday.empty{padding-top:6px;padding-bottom:6px}
.rdh{display:flex;flex-direction:column;align-items:flex-start}
.rdh b{font-family:var(--round);font-weight:800}.rdh small{color:var(--muted);font-size:.75rem}
.rdb{display:flex;flex-direction:column;gap:3px;min-width:0;justify-content:center}
.rit{display:flex;gap:10px;align-items:baseline;min-width:0}
.rit .link,.rit .muted{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rtm{flex:none;width:64px;color:var(--muted);font-size:.8125rem;font-variant-numeric:tabular-nums}
.rth{font-size:.8125rem;font-weight:700;color:var(--brand)}

/* Four criteria: one under the other, close together. */
.chalk.four h4 .muted{font-weight:500;font-size:.875rem;margin-left:4px}
.chalk ol.four4{display:flex!important;flex-direction:column;gap:6px!important}
.chalk ol.four4 li{display:grid!important;grid-template-columns:22px auto 1fr;align-items:baseline!important;gap:4px 10px}
.chalk ol.four4 li small{margin:0!important;font-family:var(--body);font-weight:400}
@media (max-width:520px){.chalk ol.four4 li{grid-template-columns:22px 1fr}.chalk ol.four4 li small{grid-column:2}}

/* Settings, Help, About. */
.setpage{max-width:720px;display:flex;flex-direction:column;gap:6px}
.setpage .ghd{margin-top:14px}
.setsound{flex-wrap:wrap;gap:10px}
.setseg{flex:none}
.rolesrow{flex-wrap:wrap;gap:10px}
.rolechips{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.faq{display:flex;flex-direction:column;background:var(--card);border-radius:14px;box-shadow:var(--shadow);overflow:hidden}
.faqi + .faqi{border-top:.5px solid var(--line)}
.faqi summary{cursor:pointer;padding:13px 16px;font-weight:600;list-style:none;display:flex;justify-content:space-between;gap:10px}
.faqi summary::-webkit-details-marker{display:none}
.faqi summary::after{content:"›";color:var(--muted);transition:transform .15s}
.faqi[open] summary::after{transform:rotate(90deg)}
.faqi p{margin:0;padding:0 16px 14px;color:var(--ink);opacity:.88;line-height:1.55;max-width:64ch}
.abouthd{display:flex;align-items:center;gap:16px;margin:4px 0 8px}
.abouticon{width:72px;height:72px;filter:drop-shadow(0 4px 10px rgba(36,64,184,.25))}
.abouthd h2{margin:0;font-family:var(--round);font-weight:800;font-size:1.8rem;letter-spacing:-.02em}
.abouthd p{margin:2px 0 0}
.aboutbody{padding:4px 16px!important}
.aboutbody p{margin:12px 0;line-height:1.6}

/* Areas: icon and colour, role. */
.artitlerow{display:flex;align-items:center;gap:10px}
.arico{border:0;background:none;padding:0;cursor:pointer;border-radius:12px}
.arico .aico{width:40px;height:40px;margin:0}
.arico .aico svg{width:23px;height:23px}
@media (hover:hover){.arico:hover .aico{box-shadow:0 0 0 2px var(--tc)}}
.arrole{display:flex;align-items:center;gap:10px;margin-top:10px;flex-wrap:wrap}
.rolechip{font-size:.6875rem;font-weight:700;letter-spacing:.03em;text-transform:uppercase;color:var(--muted);background:var(--fill);border-radius:999px;padding:1px 7px;margin-left:6px}
.roleseg{margin:0 0 8px}
.ipick .ghd{margin-top:4px}
.ipcol{display:flex;flex-wrap:wrap;gap:10px;padding:4px 2px 10px}
.ipc{width:30px;height:30px;border-radius:50%;border:0;cursor:pointer;box-shadow:inset 0 0 0 2px rgba(0,0,0,.06)}
.ipc.on{box-shadow:0 0 0 3px var(--card),0 0 0 5px var(--tc)}
.ipgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(44px,1fr));gap:8px;padding:4px 2px}
.ipi{aspect-ratio:1;border:0;border-radius:12px;display:grid;place-items:center;cursor:pointer}
.ipi svg{width:22px;height:22px}
.ipi.on{box-shadow:0 0 0 2.5px var(--tc)}

/* Horizons: list or story, examples, time frame. */
.hzfield{display:flex;flex-direction:column;gap:6px}
.hzfh{display:flex;justify-content:flex-end}
.hzfmt button{font-size:.8125rem!important;padding:3px 10px!important}
.hztyp{margin:-4px 0 8px;font-size:.8125rem;color:var(--muted)}
.hzx{margin:8px 0 2px}
.hzx summary{cursor:pointer;color:var(--brand);font-weight:600;font-size:.875rem}
.hzxcols{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:8px}
.hzxcols > div{background:var(--fill);border-radius:12px;padding:10px 12px}
.hzxcols b{font-size:.75rem;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.hzxcols ul{margin:6px 0 0;padding-left:1.1em;font-size:.9375rem;line-height:1.45}
@media (max-width:560px){.hzxcols{grid-template-columns:1fr}}

/* Checklists: suggestions can be hidden; check-ins can be deleted. */
.cksugc{position:relative;padding:0!important}
.cksgo{display:flex;flex-direction:column;align-items:flex-start;gap:2px;text-align:left;border:0;background:none;border-radius:16px;padding:12px 14px;cursor:pointer;font:inherit;color:var(--ink);width:100%}
.cksgo b{font-weight:700}.cksgo small{color:var(--muted)}
.cksgo span{margin-top:6px;color:var(--brand);font-weight:700;font-size:.875rem;display:inline-flex;align-items:center;gap:4px}
.cksgo span svg{width:14px;height:14px}
.cksx{position:absolute;top:6px;right:6px;border:0;background:none;color:var(--muted);width:28px;height:28px;border-radius:50%;cursor:pointer;font-size:1.1rem;z-index:1}
.cksx:hover{background:var(--fill)}
.cphist{display:grid!important;grid-template-columns:1fr auto auto;gap:10px;align-items:center}

/* Mind map */
.mmlayer{position:fixed;inset:0;z-index:90;background:rgba(0,0,0,.28);display:grid;place-items:center;padding:16px}
.mmbox{background:var(--card);border-radius:22px;box-shadow:0 30px 80px rgba(0,0,0,.25);width:min(1100px,calc(100vw - 32px));min-width:0;height:min(760px,100%);display:flex;flex-direction:column;padding:12px 16px 10px;gap:8px}
.mmbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.mmbar kbd{font-size:.6875rem;padding:1px 5px;margin-left:4px}
.mmhint{font-size:.8125rem}
.mmscroll{flex:1;min-height:0;min-width:0;overflow:auto;border-radius:14px;background:var(--paper);outline:none;background-image:radial-gradient(var(--rule) 1px,transparent 1.2px);background-size:22px 22px}
.mmcanvas{position:relative}
.mmlines{position:absolute;left:0;top:0;pointer-events:none}
.mmlines path{fill:none;stroke-width:2.5;stroke-linecap:round;stroke:var(--k-gray)}
.mmn{position:absolute;min-height:38px;display:flex;align-items:center;justify-content:center;text-align:center;padding:6px 12px;border-radius:12px;background:var(--card);box-shadow:0 0 0 1.5px var(--tc,var(--line)),0 2px 6px rgba(0,0,0,.06);font-size:.9375rem;cursor:pointer;line-height:1.25;user-select:none}
.mmn span{overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.mmn.root{background:var(--brand);color:#fff;font-family:var(--round);font-weight:800;box-shadow:0 4px 14px color-mix(in srgb,var(--brand) 35%,transparent)}
.mmn.sel{box-shadow:0 0 0 3px var(--tc,var(--brand)),0 4px 12px rgba(0,0,0,.1)}
.mmn.root.sel{box-shadow:0 0 0 3px var(--card),0 0 0 5.5px var(--brand)}
.mmn input{width:100%;border:0;background:none;text-align:center;font:inherit;color:inherit;outline:none}
.mmn.b1,.mmlines .b1{--tc:var(--k-blue);stroke:var(--k-blue)}.mmn.b2,.mmlines .b2{--tc:var(--k-pink);stroke:var(--k-pink)}.mmn.b3,.mmlines .b3{--tc:var(--k-green);stroke:var(--k-green)}
.mmn.b4,.mmlines .b4{--tc:var(--k-orange);stroke:var(--k-orange)}.mmn.b5,.mmlines .b5{--tc:var(--k-purple);stroke:var(--k-purple)}.mmn.b6,.mmlines .b6{--tc:var(--k-teal);stroke:var(--k-teal)}
@media (max-width:700px){.mmlayer{padding:0}.mmbox{border-radius:0;height:100%;width:100vw}.mmhint{display:none}}
/* The ripple under celebrations and headings is water: blue, never brown. */
.sigul,.cbox .sigul{color:var(--k-blue)!important}
/* Scribbles: stars for celebrations, a ripple only for Inbox zero (mind like water), own lines per part of Learn. */
.sigul{width:120px!important}
.cbox .sigul{color:var(--k-yellow)!important}

.mlw{margin:6px auto 0;max-width:34ch;font-size:.875rem;color:var(--k-blue);font-weight:600}
/* Brainstorm: the mind map preview on a project */
.mmprevbtn{display:block;width:100%;border:0;padding:8px;background:var(--paper);border-radius:14px;cursor:pointer;overflow:hidden;background-image:radial-gradient(var(--rule) 1px,transparent 1.2px);background-size:18px 18px}
.mmprev{position:relative;overflow:hidden;pointer-events:none;display:flex;justify-content:center}
.mmprev .mmcanvas{transform-origin:top center;flex:none}
@media (hover:hover){.mmprevbtn:hover{box-shadow:0 0 0 2px var(--brand)}}
.mmempty{display:flex;align-items:center;gap:12px;width:100%;border:1.5px dashed var(--line);background:none;border-radius:14px;padding:14px;cursor:pointer;text-align:left;font:inherit;color:var(--ink)}
.mmempty svg{width:26px;height:26px;color:var(--brand);flex:none}
.mmempty span{display:flex;flex-direction:column}.mmempty small{color:var(--muted)}
@media (hover:hover){.mmempty:hover{border-color:var(--brand);background:var(--brandSoft)}}
.mmn.done{opacity:.55}.mmn.done span{text-decoration:line-through;text-decoration-color:color-mix(in srgb,currentColor 50%,transparent)}
.mmn.done::after{content:"✓";position:absolute;top:-8px;right:-6px;width:18px;height:18px;border-radius:50%;background:var(--s4);color:#fff;font-size:11px;font-weight:800;display:grid;place-items:center}
.procbrain{gap:8px;align-items:center;margin:4px 0 2px;flex-wrap:wrap}
.procbrain .muted{font-size:.8125rem}
body.mmopen{overflow:hidden}
/* Celebration: no live blur behind the confetti (it made every frame expensive); the canvas gets its own layer. */
.celebrate{-webkit-backdrop-filter:none!important;backdrop-filter:none!important;background:color-mix(in srgb,var(--paper) 86%,transparent)!important}
.celebrate canvas{will-change:transform;transform:translateZ(0)}
/* Clarify: natural planning folded inside the project step */
.procplan{margin:6px 0 4px}
.procplan .pfield{margin-top:8px}
.procplan .procbrain{margin-top:6px}
/* Guided checklists and the year-end writing fields */
.cllist li.cur{background:color-mix(in srgb,var(--s4) 10%,transparent);border-radius:10px}
.cllist li .b.sm{flex:none}
.wstep > div:nth-child(2){min-width:0;flex:1}
.yw{display:flex;flex-direction:column;gap:4px;margin-top:8px}
.ywt{width:100%;min-height:64px;border:0;border-radius:12px;background:var(--fill);padding:10px 12px;font:inherit;color:var(--ink);resize:none;line-height:1.5}
.ywt:focus{outline:none;box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 22%,transparent)}
.ywsaved{align-self:flex-start;display:inline-flex;align-items:center;gap:5px;text-decoration:none!important;color:var(--muted)}
.ywsaved svg{width:14px;height:14px}
.fbw{padding:0 16px 12px}
.fbw .ywt{min-height:52px}
/* A note on top of the project */
.notesheet{display:flex;flex-direction:column;min-height:min(60vh,520px)}
.notesheet .nbody{flex:1;min-height:260px}
/* Quotes: small, quiet, never in the way */
.qline{margin:10px auto 0;max-width:44ch;text-align:center}
.qline blockquote{margin:0;font-family:var(--round);font-weight:700;font-size:.9375rem;line-height:1.45;color:var(--ink);opacity:.8}
.qline blockquote::before{content:"“"}.qline blockquote::after{content:"”"}
.qline figcaption{margin-top:3px;font-size:.75rem;color:var(--muted)}
.revwrap .qline,.pbrain + .qline,.plan > .qline{text-align:left;margin:4px 0 10px}
/* Emoji as an area icon */
.aico.emoji{font-size:1rem;line-height:1}
.arico .aico.emoji{font-size:1.4rem}
.ipemoji{display:flex;align-items:center;gap:10px;padding:2px 2px 8px;flex-wrap:wrap}
.ipemoji input{width:200px;border:0;background:var(--fill);border-radius:10px;padding:8px 10px;font:inherit;color:var(--ink)}
/* Celebration never blocks: no dimmed screen, clicks go through, the card floats and fades by itself. */
.celebrate{pointer-events:none!important;background:none!important;place-items:start center!important;padding-top:min(18vh,140px)}
.celebrate .cbox{pointer-events:none;box-shadow:0 20px 60px rgba(0,0,0,.18)!important;animation:cpop .35s cubic-bezier(.34,1.56,.64,1) both}
.celebrate.out .cbox{animation:cfade .3s ease-in both}
@keyframes cpop{from{opacity:0;transform:translateY(-8px) scale(.96)}to{opacity:1;transform:none}}
@keyframes cfade{to{opacity:0;transform:translateY(-6px) scale(.98)}}
@media (prefers-reduced-motion: reduce){.celebrate .cbox,.celebrate.out .cbox{animation:none}}
/* Hover follows the pointer instantly everywhere: no colour or background fades on anything you can point at
   (only press feedback and opacity may animate), so moving fast over lists, tabs, and menus never lags behind. */
@media (hover:hover){
  button,select,a,summary,label,[role="button"],[role="tab"],[role="radio"],.frow,.nrow,.nfrow,.nnote,.irow,.tile,.ckpin,.cksgo,.pmtile,.mmn,.fstep,.chip,.tchip,.cchip span{transition-property:transform,opacity,box-shadow!important;transition-duration:.08s!important}
  .seg button,.ctxchips .cchip span,select{transition:none!important}
}
/* Calendar: Year view like Apple Calendar */
.ymonths{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:18px 22px}
.ymon{background:var(--card);border-radius:16px;padding:10px 12px;box-shadow:var(--shadow)}
.ymh{font-family:var(--round);font-weight:800;color:var(--k-red);margin-bottom:6px;display:block}
.ygrid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;text-align:center}
.ygrid i{font-style:normal;font-size:.6875rem;color:var(--muted);font-weight:600}
.yday{border:0;background:none;font:inherit;font-size:.75rem;color:var(--ink);aspect-ratio:1;border-radius:50%;cursor:pointer;position:relative;padding:0;font-variant-numeric:tabular-nums}
.yday.busy::after{content:"";position:absolute;left:50%;bottom:1px;width:4px;height:4px;margin-left:-2px;border-radius:50%;background:var(--muted)}
.yday.td{background:var(--k-red);color:#fff;font-weight:700}.yday.td::after{background:#fff}
@media (hover:hover){.yday:hover:not(.td){background:var(--fill)}}
/* The celebration card is visible on its own; animation only adds movement, never visibility
   (so it still shows when a browser pauses animations, e.g. in a background tab). */
.celebrate{animation:none!important;opacity:1!important}
.celebrate .cbox{animation:cpop2 .35s cubic-bezier(.34,1.56,.64,1)!important;opacity:1}
@keyframes cpop2{from{transform:translateY(-8px) scale(.96)}to{transform:none}}
.celebrate.out{animation:fadeOut .3s ease-in both!important}
.celebrate.out .cbox{animation:none!important}
.lcap.two input[type=date]{flex:0 0 auto;width:auto}
.sddone{margin-top:6px}.sddone .list li{display:flex;align-items:center;gap:10px}
.napage > .chalk + .chalk,.napage > .chalkpill + .chalk,.napage > .chalk + .chalkpill,.napage > .chalkpill + .chalkpill{margin-top:-4px}
/* Foldable tips: one header button that never moves. Folded it looks like a pill; open, the card grows below it. */
.tipx{display:block;width:fit-content;max-width:100%;background:var(--card);border-radius:22px;box-shadow:0 0 0 1px var(--line);margin:0 0 10px}
.tipx.open{width:auto;border-radius:16px;box-shadow:var(--shadow)}
.tiph{display:flex;align-items:center;gap:8px;border:0;background:none;font:inherit;color:var(--ink);cursor:pointer;padding:9px 14px 9px 10px;text-align:left;width:100%;border-radius:inherit}
.tiph b{font-weight:650;font-size:.9375rem;white-space:nowrap}
.tiph small{color:var(--muted);font-size:.8125rem;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tipx.open .tiph small{white-space:normal}
.tipi{width:20px;height:20px;flex:none;background:var(--tipc,var(--s5));-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18h6M10 21h4M12 3a6 6 0 0 0-3.5 10.9c.6.5 1 1.2 1 2.1h5c0-.9.4-1.6 1-2.1A6 6 0 0 0 12 3z'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18h6M10 21h4M12 3a6 6 0 0 0-3.5 10.9c.6.5 1 1.2 1 2.1h5c0-.9.4-1.6 1-2.1A6 6 0 0 0 12 3z'/%3E%3C/svg%3E") center/contain no-repeat}
.tipc{width:9px;height:9px;flex:none;margin-left:auto;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);transform:rotate(-45deg);transition:transform .15s}
.tipx.open .tipc{transform:rotate(45deg) translate(-2px,-2px)}
.tipb{display:none;padding:0 16px 14px 40px}
.tipx.open .tipb{display:block}
.tipb > small{display:block;color:var(--muted);font-size:.875rem;line-height:1.5;max-width:62ch}
.tipb .four4{margin:2px 0 8px;padding:0;list-style:none}
.tipx.whynote.s1{--tipc:var(--s1)}.tipx.whynote.s2{--tipc:var(--s2)}.tipx.whynote.s3{--tipc:var(--s3)}.tipx.whynote.s4{--tipc:var(--s4)}
@media (hover:hover){.tiph:hover{background:var(--fill)}}
.tipb .four4 li{display:grid;grid-template-columns:22px auto 1fr;align-items:baseline;gap:4px 10px;font-family:var(--round);font-weight:700}
.tipb .four4 li b{display:inline-grid;place-items:center;min-width:22px;height:22px;border-radius:7px;font-size:.8125rem;color:#fff}
.tipb .four4 li b.ky{background:var(--s1)}.tipb .four4 li b.kp{background:var(--s2)}.tipb .four4 li b.kb{background:var(--s3)}.tipb .four4 li b.kg{background:var(--s4)}
.tipb .four4 li small{font-family:var(--body);font-weight:400;color:var(--muted);font-size:.875rem}
@media (max-width:520px){.tipb{padding-left:16px}.tipb .four4 li{grid-template-columns:22px 1fr}.tipb .four4 li small{grid-column:2}}
/* Lessons, the Duolingo way: a coloured tag says what kind of step this is, and the action button lives in one
   bar at the bottom of the screen, always in the same place. */

/* Tips: no bar when you hover or open; the header stays a plain clickable line with a hand cursor.
   Open, it shows "Fold" at the right, in the same spot you just clicked. */
@media (hover:hover){.tiph:hover{background:none!important}.tiph:hover b{color:var(--brand)}}
.tiph{cursor:pointer}
.tipx.open .tipc{width:auto;height:auto;border:0;transform:none!important;font-size:.8125rem;font-weight:600;color:var(--muted)}
.tipx.open .tipc::before{content:"Fold ⌃"}
/* Four criteria: back to the earlier look: rounded type, numbered tiles with the number visible. */
.tipb .four4 li{display:grid!important;grid-template-columns:22px auto 1fr;align-items:center!important;gap:6px 10px;font-family:var(--round)!important;font-weight:700!important;font-size:1rem!important;color:var(--ink)}
.tipb .four4 li b{display:inline-grid;place-items:center;min-width:22px;height:22px;border-radius:7px;font-size:.8125rem!important;color:#fff!important}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .tipb .four4 li b{color:#111!important}}
.tipb .four4 li small{font-family:var(--body)!important;font-weight:400!important;color:var(--muted);font-size:.9375rem!important;margin:0!important}
.tipb .four4{gap:8px!important;display:flex!important;flex-direction:column}
/* Lesson button: same place on (almost) every step, without a floating bar or a big gap. The step area has a
   fixed minimum height, and the button row sits right under it, plain, in the same spot. */

/* Lesson complete: badge, then the "Lesson complete" tag, then the lesson's own title. */

/* Safari left ghost lines from the previous step (e.g. the green edge of "With GTD") when a new step slid in.
   Lesson steps now only fade in, without movement, and the lesson area is its own paint layer, so Safari
   repaints it completely on every step. */

@keyframes lfade{from{opacity:0}to{opacity:1}}

/* The same for every one-question-at-a-time screen (Clarify too): fade, don't slide. */
.ask{animation:lfade .22s ease-out both!important}

/* Safari: no separate paint layers in step-by-step screens at all (they left stale edges behind).
   No animation, no isolation, no containment; the view is repainted as a whole after each step (render.js). */
.ask{animation:none!important;transform:none!important;will-change:auto!important}
/* Tick burst: a handful of dots from the checkbox */
.burst{position:fixed;width:0;height:0;z-index:95;pointer-events:none}
.burst i{position:absolute;left:-3px;top:-3px;width:6px;height:6px;border-radius:50%;opacity:0;animation:burstout .55s cubic-bezier(.2,.8,.3,1) forwards}
@keyframes burstout{0%{opacity:1;transform:translate(0,0) scale(.6)}70%{opacity:1}100%{opacity:0;transform:translate(var(--x),var(--y)) scale(1)}}
/* Quiz feedback: right is green, not quite is orange; your wrong pick is marked orange too */

/* Three answers side by side, evenly (sorting questions with three buckets) */

/* Calendar day: Allen's three kinds, always in this order; an empty kind is one quiet line. */
.daysecs{display:flex;flex-direction:column;gap:12px}
.dsec{display:flex;flex-direction:column;gap:6px}
.dsec .boxlab{margin:0}
.dsec.isempty{flex-direction:row;align-items:baseline;gap:10px}
.dsec.isempty .empty{margin:0;font-size:.875rem;color:var(--muted)}
.dsec.isempty .boxlab{opacity:.7}
.dinfo.isempty{flex-direction:column}
.dinfo textarea{width:100%;min-height:58px;border:0;border-radius:10px;background:var(--fill);padding:8px 10px;font:inherit;color:var(--ink);resize:vertical}
/* Each of Allen's three calendar kinds has its own colour: a small pill label and a coloured edge on its items. */
.dsec .boxlab{display:inline-flex;align-self:flex-start;align-items:center;border:0!important;border-radius:999px;padding:3px 10px!important;font-size:.6875rem!important;font-weight:800;letter-spacing:.05em;text-transform:uppercase;background:color-mix(in srgb,var(--dc) 15%,var(--card));color:var(--dc)!important}
.dk-time{--dc:var(--k-red)}.dk-day{--dc:var(--k-orange)}.dk-info{--dc:var(--k-blue)}
.dsec .slot{border-left:3px solid var(--dc)!important;padding-left:10px;border-radius:0 8px 8px 0}
.dsec.isempty .boxlab{opacity:1;background:var(--fill);color:var(--muted)!important}
.dinfo textarea:focus{box-shadow:0 0 0 3px color-mix(in srgb,var(--k-blue) 25%,transparent);outline:none}
.dsec .slot{background:color-mix(in srgb,var(--dc) 9%,transparent)!important}
.dinfo.isempty .boxlab{background:color-mix(in srgb,var(--dc) 15%,var(--card));color:var(--dc)!important}
/* Inbox zero: one heading, one line, one way forward. */
.fdone .zerobtns{justify-content:center;margin-top:6px}
.fdone .qline{margin-top:4px}

/* ===================================================================
   Calm pass (research on overwhelm and visual complexity): fewer shapes, colour with a meaning, smaller controls.
   - Visual complexity weighs more than colourfulness in first impressions (Reinecke et al., CHI 2013).
   - Apple: use colour sparingly, and one colour for one meaning.
   =================================================================== */
/* Sidebar: coloured glyphs without tinted tiles, so 17 rows don't become 17 coloured blocks. */
#btns .b .ri{background:none!important;width:22px!important;height:22px!important}
#btns .b .ri svg{width:18px!important;height:18px!important}
#btns .b.on .ri{background:none!important}
.hlink{text-decoration:none!important;font-weight:600;color:var(--muted)}
@media (hover:hover){.hlink:hover{color:var(--brand)}}
/* Tick circles at Apple's size: 20 px with a mouse, 24 px on touch screens. */
.cb{width:20px!important;height:20px!important;min-width:20px}
@media (pointer:coarse){.cb{width:24px!important;height:24px!important;min-width:24px}}
.cb.ticking::after{left:6px!important;top:2.5px!important;width:5px!important;height:10px!important}
/* Small switches for inline options (like "tick off" on a Someday list), as on the Mac. */
.swl input[type=checkbox],.swl input.sw{width:32px!important;height:19px!important}
.swl input[type=checkbox]::before,.swl input.sw::before{width:15px!important;height:15px!important;top:2px!important;left:2px!important}
.swl input[type=checkbox]:checked::before,.swl input.sw:checked::before{transform:translateX(13px)!important}

/* Overview, as in Allen's 1994 "Initial/current view": three sheets side by side (Projects, Next Actions with
   Waiting For behind it, the day with Week and Month behind it), visible without scrolling on a laptop. */
@media (min-width:820px){.home{grid-template-columns:minmax(0,.85fr) minmax(0,1.1fr) minmax(0,1.25fr)!important;gap:26px 22px!important}}
/* In the day sheet: time-specific and day-specific side by side, day-specific information underneath, like the sketch. */
.home .daysecs{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px 14px}
.home .daysecs .dinfo{grid-column:1/-1}
.home .dsec.isempty{flex-direction:column;align-items:flex-start;gap:4px}
.home .dsec .boxlab{font-size:.6875rem!important;padding:2px 8px!important}
.dsec .boxlab{white-space:nowrap}
/* Apple HIG, Sidebars: sidebar icons use the app's accent colour; fixed colours only where they carry meaning.
   So all sidebar glyphs are the accent blue; the only exception is the Inbox, whose colour shows how full it is. */
#btns .b .ri,#btns .b .ri[class*="c-"]{--tc:var(--brand)!important;color:var(--brand)!important}
#btns .b .ri svg{color:var(--brand)!important}
.tray svg{color:var(--heat,var(--brand))!important}

/* Where an item on the day comes from (tickler, Someday/Maybe), so it's clear why it's there */
.srcchip{display:block;font-size:.6875rem;font-weight:700;letter-spacing:.03em;text-transform:uppercase;color:var(--muted);margin-bottom:1px}
.home .dsec .boxlab{white-space:normal!important;text-align:left}
.home .daysecs{grid-template-columns:1fr!important;gap:10px!important}
.home .dsec .boxlab{white-space:nowrap!important}
.home .dsec.isempty{flex-direction:row!important;align-items:baseline!important;flex-wrap:wrap;gap:4px 8px!important}

/* ===================================================================
   Reference: Helder's own library, not a copy of Notes.
   Left: lists with their notes right underneath (a filing cabinet, A to Z). Right: the note as a calm, wide page.
   Brand blue as the only accent; no yellow, no ruled lines. Typography does the work.
   =================================================================== */
.refdoc{display:grid;grid-template-columns:minmax(220px,270px) minmax(0,1fr);background:var(--card);border-radius:18px;box-shadow:var(--shadow);overflow:hidden;min-height:min(78vh,760px)}
.libpane{border-right:.5px solid var(--line);padding:14px 10px 18px;display:flex;flex-direction:column;gap:2px;overflow:auto;max-height:min(78vh,760px)}
.libhd{display:flex;align-items:center;justify-content:space-between;padding:2px 8px 6px}
.libhd h3{margin:0;font-size:.75rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
.libhd.sub{margin-top:16px}
.libhd .nicon{color:var(--brand)!important;height:28px}
.libhd .nicon svg{width:18px;height:18px}
.libf{display:grid;grid-template-columns:20px 1fr auto;align-items:center;gap:9px;width:100%;border:0;background:none;text-align:left;font:inherit;font-weight:600;color:var(--ink);padding:7px 8px;border-radius:9px;cursor:pointer}
.libf svg{width:18px;height:18px;color:var(--brand)}
.libf span:nth-child(2){overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.libf.on{background:var(--fill)}
@media (hover:hover){.libf:hover:not(.on){background:var(--fill)}}
.libn{display:flex;flex-direction:column;gap:1px;margin:2px 0 8px 18px;padding-left:10px;border-left:1.5px solid var(--line)}
.libnote{display:flex;flex-direction:column;gap:1px;border:0;background:none;text-align:left;font:inherit;color:var(--ink);padding:6px 9px;border-radius:8px;cursor:pointer;min-width:0}
.libnote b{font-weight:550;font-size:.9375rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.libnote small{color:var(--muted);font-size:.75rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.libnote.on{background:var(--brandSoft)}.libnote.on b{color:var(--brand)}
@media (hover:hover){.libnote:hover:not(.on){background:var(--fill)}}
.libnew{display:flex;align-items:center;gap:6px;border:0;background:none;font:inherit;font-size:.875rem;font-weight:600;color:var(--brand);padding:6px 9px;border-radius:8px;cursor:pointer;text-align:left}
.libnew svg{width:14px;height:14px}
@media (hover:hover){.libnew:hover{background:var(--fill)}}
.libacts{display:flex;gap:12px;padding:4px 9px 0}
.libact{font-size:.75rem;text-decoration:none!important;color:var(--muted)}
.libact.red{color:var(--red)}
/* the page */
.docpage{display:flex;flex-direction:column;min-width:0;overflow:auto;max-height:min(78vh,760px)}
.docbar{position:sticky;top:0;z-index:3;display:flex;align-items:center;gap:14px;padding:12px 22px;background:color-mix(in srgb,var(--card) 92%,transparent);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.dcrumb{flex:1;min-width:0;font-size:.8125rem;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.docmeta{font-size:.8125rem;color:var(--muted)}
.doccol{width:100%;max-width:700px;margin:0 auto;padding:18px 32px 60px}
.doctitle{font-size:2.1rem!important;font-weight:800!important;letter-spacing:-.025em!important;line-height:1.15;margin:0 0 6px}
.docpage .ntools{border-bottom:0!important;margin:2px 0 14px!important;padding:0!important;gap:0!important;opacity:.55;transition:opacity .15s}
.docpage:focus-within .ntools,.docpage .ntools:hover{opacity:1}
.docpage .ntools select{color:var(--brand)!important}
.docpage .ntools button,.docpage .ntools select{min-width:30px;height:30px}
div.nbody.docbody{background-image:none!important;line-height:1.65!important;font-size:1.0625rem!important;padding:0 0 40px!important;min-height:340px}
.docbody h1{font-size:1.6rem;margin:1.2em 0 .3em}
.docbody h2{font-family:var(--round);font-size:1.25rem;font-weight:800;letter-spacing:-.01em;margin:1.4em 0 .35em}
.docbody h2:first-child,.docbody h1:first-child{margin-top:.2em}
.docbody h3{font-size:1.0625rem;font-weight:700;margin:1.2em 0 .25em}
.docbody p,.docbody div{margin:.2em 0}
.docbody ul,.docbody ol{margin:.3em 0 .6em;padding-left:1.3em}
.docbody li{margin:.2em 0}
.docbody li::marker{color:var(--brand)}
.docbody a{color:var(--brand)!important}
div.docbody ul.nchk > li[data-done="1"]::before{background:var(--brand)!important;border-color:var(--brand)!important}
.docblank{align-items:center;justify-content:center;text-align:center;gap:8px;padding:40px}
@media (max-width:980px){.refdoc{grid-template-columns:minmax(200px,240px) minmax(0,1fr)}.doccol{padding:14px 20px 48px}}
.docpage .ntools{flex-wrap:nowrap!important;overflow-x:auto;scrollbar-width:none}
.docpage .ntools::-webkit-scrollbar{display:none}
.docpage .ntools select{flex:none}
/* Capture field: a friendly question, with the shortcut shown as a key, like a search field on the Mac.
   The key hint steps aside as soon as you type or focus the field. */
.qc{position:relative}
.qckey{position:absolute;right:10px;top:50%;transform:translateY(-50%);pointer-events:none;font-size:.75rem!important;min-width:22px;padding:2px 7px!important;opacity:.8}
.qc input:focus ~ .qckey,.qc input:not(:placeholder-shown) ~ .qckey{opacity:0}
.qc input{padding-right:40px!important}

/* ===================================================================
   Reference, round 2: after Apple Notes and Notion.
   The format bar lives in the page's title bar, always visible, at full size (36 pt targets, 20 pt symbols).
   An Aa menu shows every style in its own size, with its shortcut. Lists fold open and closed.
   =================================================================== */
.ntools{gap:2px!important;align-items:center}
.ntools button{min-width:36px!important;height:36px!important;border-radius:9px!important;font-size:1.0625rem!important;color:var(--ink)!important;padding:0 6px!important;transition:background-color .12s}
.ntools button b,.ntools button i,.ntools button u,.ntools button s{font-family:var(--round);font-size:1.0625rem}
.ntools svg{width:21px!important;height:21px!important}
.ntools .naa{font-family:var(--round);font-weight:700!important;font-size:1.0625rem!important;padding:0 9px!important;letter-spacing:-.01em}
.ntools button[aria-pressed="true"],.ntools .naa.on{background:var(--brandSoft)!important;color:var(--brand)!important}
.nsep{width:1px;height:20px;background:var(--line);margin:0 6px;flex:none}
.docbar{gap:10px!important;padding:8px 14px 8px 16px!important;border-bottom:.5px solid var(--line)}
.docbar .ntools{flex:1;min-width:0;margin:0!important;padding:0!important;border:0!important;opacity:1!important;position:static!important;background:none!important}
.docbar .docmeta{white-space:nowrap}
.dtrash{color:var(--muted)!important;width:36px;height:36px;border-radius:9px;display:inline-grid;place-items:center}
.dtrash svg{width:20px;height:20px}
@media (hover:hover){.dtrash:hover{background:var(--fill);color:var(--red)!important}}
.doccol p.dcrumb{margin:6px 0 4px;font-size:.8125rem;color:var(--muted)}
.doccol{max-width:740px!important;padding:22px 40px 80px!important}
.doctitle{font-size:2.25rem!important}
div.nbody.docbody{font-size:1.125rem!important;line-height:1.6!important}
.docbody h1{font-family:var(--round);font-size:1.75rem;font-weight:800;letter-spacing:-.02em}
.docbody h2{font-size:1.375rem}
.docbody h3{font-size:1.15rem}
div.docbody ul.nchk > li{padding-left:32px}
div.docbody ul.nchk > li::before{width:21px;height:21px;top:.18em}
div.nbody:empty::before{pointer-events:none}
/* the Aa menu and the / menu */
.npop.nmenu{transform:none;width:auto;min-width:250px;max-width:300px;padding:6px;border-radius:14px;box-shadow:0 0 0 .5px rgba(0,0,0,.08),0 18px 50px rgba(0,0,0,.2)}
.nmenu{position:fixed;z-index:96;background:var(--card);border-radius:14px;box-shadow:0 0 0 .5px rgba(0,0,0,.08),0 18px 50px rgba(0,0,0,.2);padding:6px;width:290px;max-height:min(380px,60vh);overflow:auto}
.nstyle{display:flex;flex-direction:column}
.nbiu{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;padding:2px 2px 6px;border-bottom:.5px solid var(--line);margin-bottom:4px}
.nbiu button{height:36px;border:0;border-radius:8px;background:var(--fill);font-family:var(--round);font-size:1.0625rem;color:var(--ink);cursor:pointer}
.nbiu button[aria-pressed="true"]{background:var(--brand);color:#fff}
.nstyle hr{border:0;border-top:.5px solid var(--line);margin:4px 6px}
.nsty{display:grid;grid-template-columns:18px 1fr auto;align-items:center;gap:6px;border:0;background:none;text-align:left;padding:7px 10px 7px 6px;border-radius:8px;color:var(--ink);cursor:pointer;font:inherit;font-size:1rem}
.nsty .nck{color:var(--brand);font-weight:700;visibility:hidden}
.nsty[aria-checked="true"] .nck{visibility:visible}
.nsty kbd{font:inherit;font-size:.75rem;color:var(--muted);letter-spacing:.04em}
.nsty.s-h1 .nsl{font-family:var(--round);font-size:1.5rem;font-weight:800;letter-spacing:-.02em}
.nsty.s-h2 .nsl{font-size:1.2rem;font-weight:700}
.nsty.s-h3 .nsl{font-size:1.0625rem;font-weight:650}
@media (hover:hover){.nsty:hover,.nslash button:hover{background:var(--fill)}}
.nslh{font-size:.75rem;font-weight:600;color:var(--muted);padding:6px 10px 4px}
.nslash button{display:grid;grid-template-columns:40px 1fr;align-items:center;gap:10px;width:100%;border:0;background:none;text-align:left;padding:6px 8px;border-radius:9px;cursor:pointer;font:inherit;color:var(--ink)}
.nslash button[aria-selected="true"]{background:var(--brandSoft)}
.nslash b{display:block;font-weight:600;font-size:.9375rem}
.nslash small{display:block;color:var(--muted);font-size:.75rem}
.nsli{width:40px;height:40px;border-radius:9px;border:.5px solid var(--line);background:var(--card);display:grid;place-items:center;font-family:var(--round);font-weight:800;color:var(--ink)}
.nsli.s-h1{font-size:1.2rem}.nsli.s-h2{font-size:1rem}.nsli.s-h3{font-size:.875rem}.nsli.s-p{font-size:.875rem;font-weight:600}
.nsli svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
/* the library: bigger text, folding chevrons, delete on hover (and with Delete) */
.libpane{padding:14px 8px 18px!important}
.libhd h3{font-size:.8125rem!important;letter-spacing:.02em!important;text-transform:none!important;font-weight:700!important}
.libfrow{display:grid;grid-template-columns:22px minmax(0,1fr);align-items:center}
.libchev{width:22px;height:30px;border:0;background:none;padding:0;color:var(--muted);cursor:pointer;display:grid;place-items:center;border-radius:6px}
.libchev svg{width:13px;height:13px;transition:transform .18s ease}
.libchev[aria-expanded="true"] svg{transform:rotate(90deg)}
@media (prefers-reduced-motion:reduce){.libchev svg{transition:none}}
.libf{font-size:1rem!important;padding:7px 8px 7px 4px!important}
.libf svg{width:19px!important;height:19px!important}
.libn{margin:2px 0 8px 32px!important;padding-left:0!important;border-left:0!important}
.libnrow{position:relative;display:grid}
.libnote{padding:7px 36px 7px 10px!important}
.libnote b{font-size:.9375rem!important;font-weight:600!important}
.libnote small{font-size:.8125rem!important}
.libnote small time{color:var(--ink);opacity:.7;margin-right:4px}
.libdel{position:absolute;right:4px;top:50%;transform:translateY(-50%);width:28px;height:28px;border:0;background:none;border-radius:7px;color:var(--muted);cursor:pointer;display:grid;place-items:center;opacity:0}
.libdel svg{width:17px;height:17px}
.libnrow:hover .libdel,.libnrow:focus-within .libdel,.libdel:focus-visible{opacity:1}
@media (hover:hover){.libdel:hover{background:var(--card);color:var(--red)}}
@media (hover:none){.libdel{opacity:.7}}
.libnew{font-size:.9375rem!important;padding:7px 10px!important}
.libact{font-size:.8125rem!important}
/* When the page is narrow, the bar keeps what Notes keeps (Aa, lists, links); bold and friends live in the Aa menu. */
.ngrp{display:contents}
.docpage{container-type:inline-size}
@container (max-width:520px){.docbar .nchar{display:none}}
.doccol p.dcrumb .docmeta{font-size:inherit}
.nsty kbd{background:none!important;border:0!important;box-shadow:none!important;padding:0!important;min-width:0!important}
.nsty.s-chk .nsl,.nsty.s-ul .nsl,.nsty.s-ol .nsl{font-variant-numeric:tabular-nums}
/* iPhone: one row, like Notes (bold and friends are in the Aa menu); no ruled lines anywhere */
@media (max-width:640px){.ntools .nchar{display:none}.ntools{flex-wrap:nowrap!important}}
div.nbody{background-image:none!important;line-height:1.6!important}

/* Checklists, Year-End and Weekly Review: the current step gets a small label, not a coloured box. */
.step.cur,.cllist li.cur{background:none!important;box-shadow:none!important}
.nowtag{display:inline-block;margin-left:8px;vertical-align:2px;font-size:.6875rem;font-weight:700;letter-spacing:.03em;color:var(--brand);background:var(--brandSoft);padding:2px 7px;border-radius:999px}
.step.done b{color:var(--muted);text-decoration:line-through;font-weight:500}
.step b{font-weight:550}
.clsheet .sh{gap:12px}
.cltitle{flex:1;min-width:0;border:0!important;background:none!important;font:inherit;font-family:var(--round);font-size:1.5rem!important;font-weight:800!important;letter-spacing:-.02em;color:var(--ink);padding:0!important;box-shadow:none!important}
.clrh{display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin:2px 0 12px;font-size:.9375rem;color:var(--muted)}
.clrh>span{display:inline-flex;align-items:center;gap:6px}
.clrh svg{width:16px;height:16px}
.clrh select,.clrh input{font:inherit;font-size:.9375rem;border:0;background:var(--fill);border-radius:8px;padding:5px 8px;color:var(--ink)}
.clrhd{display:inline-flex;align-items:center;gap:6px}
/* Horizons: plain text and simple lists */
.hztext{width:100%;border:0;background:var(--fill);border-radius:12px;padding:12px 14px;font:inherit;font-size:1.0625rem;line-height:1.55;color:var(--ink);resize:none}
.hztext:focus{outline:2px solid color-mix(in srgb,var(--brand) 40%,transparent)}
.hlist{list-style:none;margin:4px 0 0;padding:0}
.hlist li{display:flex;align-items:center;gap:12px;padding:6px 0;border-bottom:.5px solid var(--line)}
.hlist li.done span{color:var(--muted);text-decoration:line-through;flex:1}
.hli{flex:1;min-width:0;border:0!important;background:none!important;font:inherit;font-size:1.0625rem;color:var(--ink);padding:6px 0!important;box-shadow:none!important}
.hlist .xbtn{opacity:0}
.hlist li:hover .xbtn,.hlist li:focus-within .xbtn{opacity:.6}
@media (hover:none){.hlist .xbtn{opacity:.5}}
.hlp{font-size:.8125rem;white-space:nowrap;text-decoration:none!important}
.hdot{width:7px;height:7px;border-radius:50%;background:var(--brand);flex:none;margin:0 6px}
.hdot.ghost{background:none;border:1.5px solid var(--control)}
.hadd{border-bottom:0!important;padding-bottom:4px!important}
.hgot{margin-top:10px}.hgot summary{cursor:pointer;color:var(--muted);font-size:.875rem}
.ygoals{margin-top:8px}
.fbw.ygoals{background:var(--card);border-radius:12px;padding:4px 12px}
.hztext{background:color-mix(in srgb,var(--ink) 6%,transparent)!important;border:0!important;box-shadow:none!important}

/* ===================================================================
   Calendar, after Fantastical and Apple Calendar, in Allen's colours:
   red = time-specific actions, orange = day-specific actions, blue = day-specific information.
   =================================================================== */
.cal2{display:grid;grid-template-columns:260px minmax(0,1fr);background:var(--card);border-radius:18px;box-shadow:var(--shadow);overflow:hidden;min-height:min(80vh,820px)}
.calside{border-right:.5px solid var(--line);padding:14px 12px 18px;display:flex;flex-direction:column;gap:16px;overflow:auto;max-height:min(80vh,820px)}
.calmain{display:flex;flex-direction:column;min-width:0;padding:14px 18px 18px;gap:12px}
.calhead{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.caltitle{margin:0;flex:1;min-width:0;font-family:var(--round);font-size:1.6rem;font-weight:800;letter-spacing:-.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.caltitle span{color:var(--muted);font-weight:700}
.calnav{display:flex;align-items:center;gap:4px}
.calnav .nicon{width:32px;height:32px;border-radius:8px;font-size:1.25rem;color:var(--ink)}
@media (hover:hover){.calnav .nicon:hover{background:var(--fill)}}
.calseg{flex:none}
/* the field */
.nlq{position:relative;display:flex;align-items:center;gap:8px;background:color-mix(in srgb,var(--ink) 6%,transparent);border-radius:11px;padding:0 10px;flex-wrap:wrap}
.nlq:focus-within{box-shadow:0 0 0 2px color-mix(in srgb,var(--brand) 45%,transparent)}
.nlqi svg{width:16px;height:16px;color:var(--brand)}
.nlq input{flex:1;min-width:0;border:0!important;background:none!important;box-shadow:none!important;font:inherit;font-size:.9375rem;padding:10px 0!important;color:var(--ink)}
.nlprev{display:none;width:100%;flex-wrap:wrap;gap:4px 8px;padding:0 0 10px 24px;font-size:.8125rem;color:var(--muted)}
.nlprev.on{display:flex}
.nlprev b{width:100%;color:var(--ink);font-weight:650;font-size:.875rem}
.nlprev span{background:var(--card);border-radius:6px;padding:1px 7px}
.nlprev kbd{margin-left:auto;font-size:.6875rem}
/* the small month */
.minihd{display:flex;align-items:center;justify-content:space-between;padding:0 2px 6px}
.minihd b{font-size:.9375rem}
.minihd .nicon{width:26px;height:26px;color:var(--muted);font-size:1.0625rem}
.minig{display:grid;grid-template-columns:repeat(7,1fr);gap:1px;text-align:center}
.minig i{font-style:normal;font-size:.6875rem;color:var(--muted);font-weight:600;padding:2px 0 4px}
.minig button{position:relative;border:0;background:none;font:inherit;font-size:.8125rem;height:28px;border-radius:50%;cursor:pointer;color:var(--ink);font-variant-numeric:tabular-nums}
.minig button.out{color:var(--muted);opacity:.55}
.minig button.wk{background:var(--brandSoft);border-radius:0}
.minig button.busy::after{content:"";position:absolute;left:50%;bottom:2px;width:3px;height:3px;margin-left:-1.5px;border-radius:50%;background:var(--muted)}
.minig button.td{color:var(--k-red);font-weight:800}
.minig button.sel{background:var(--ink);color:var(--card);border-radius:50%;font-weight:700}
.minig button.sel.td{background:var(--k-red);color:#fff}
@media (hover:hover){.minig button:not(.sel):hover{background:var(--fill)}}
/* coming up */
.upc h4{margin:0 0 6px;font-size:.8125rem;color:var(--muted);font-weight:700}
.upd{display:flex;flex-direction:column;gap:2px;margin-bottom:10px}
.uph{font-weight:700;font-size:.875rem;text-decoration:none!important;color:var(--ink)!important;display:flex;gap:6px;align-items:baseline;text-align:left}
.uph small{color:var(--muted);font-weight:500}
.upi{display:grid;grid-template-columns:50px 1fr;gap:6px;border:0;background:none;text-align:left;font:inherit;font-size:.8125rem;color:var(--ink);padding:4px 6px 4px 8px;border-radius:7px;cursor:pointer;border-left:3px solid var(--kc);overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.upi span{color:var(--muted);font-variant-numeric:tabular-nums;font-size:.75rem}
.upi.k-t,.mp.k-t{--kc:var(--k-red)}.upi.k-d,.mp.k-d{--kc:var(--k-orange)}.upi.k-i,.mp.k-i{--kc:var(--k-blue)}
@media (hover:hover){.upi:hover{background:var(--fill)}}
/* the time grid */
.tgrid{display:flex;flex-direction:column;border-top:.5px solid var(--line);min-height:0;flex:1}
.tghead,.tgbands,.tgbody{display:grid;grid-template-columns:52px repeat(var(--days),minmax(0,1fr))}
.tghead{padding:6px 0 4px}
.tgday{border:0;background:none;font:inherit;color:var(--ink);cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:1px;padding:2px 0;border-radius:8px;min-width:0}
.tgday small{font-size:.6875rem;color:var(--muted);font-weight:600;text-transform:uppercase;letter-spacing:.04em}
.tgday b{font-size:1.125rem;width:32px;height:32px;display:grid;place-items:center;border-radius:50%;font-variant-numeric:tabular-nums}
.tgday.td b{background:var(--k-red);color:#fff}
.tgday.sel:not(.td) b{background:var(--fill)}
.tgday em{font-style:normal;font-size:.6875rem;color:var(--brand);max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tgrid[style*="--days:1"] .tghead{display:none}
.tggut{font-size:.6875rem;color:var(--muted);text-align:right;padding:6px 8px 0 0}
.tgbands{border-bottom:.5px solid var(--line);min-height:30px}
.tgband{display:flex;flex-direction:column;gap:2px;padding:3px 2px;border-left:.5px solid var(--line);min-width:0}
.tgall,.tgtick{border:0;text-align:left;font:inherit;font-size:.75rem;font-weight:600;padding:3px 7px;border-radius:6px;cursor:pointer;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;color:var(--ink)}
.tgall{background:color-mix(in srgb,var(--k-red) 22%,var(--card))}
.tgtick{background:color-mix(in srgb,var(--k-blue) 18%,var(--card))}
.tgact{display:flex;align-items:center;gap:5px;font-size:.75rem;padding:2px 4px;border-radius:6px;background:color-mix(in srgb,var(--k-orange) 16%,var(--card));min-width:0}
.tgact .cb{width:14px;height:14px;margin:0;border-color:var(--k-orange)}
.tgact .link{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;color:var(--ink)!important;text-decoration:none!important}
.tgscroll{overflow-y:auto;height:min(62vh,640px);position:relative}
.tgbody{position:relative}
.tghours{position:relative}
.tghours span{position:absolute;right:8px;transform:translateY(-50%);font-size:.6875rem;color:var(--muted);font-variant-numeric:tabular-nums}
.tgcol{position:relative;border-left:.5px solid var(--line);background-image:repeating-linear-gradient(to bottom,var(--line) 0,var(--line) .5px,transparent .5px,transparent 44px);cursor:copy}
.tgcol.td{background-color:color-mix(in srgb,var(--k-red) 3%,transparent)}
.tgev{position:absolute;display:flex;flex-direction:column;gap:1px;text-align:left;border:0;border-left:3px solid var(--k-red);border-radius:6px;background:color-mix(in srgb,var(--k-red) 18%,var(--card));color:var(--ink);font:inherit;padding:3px 6px;overflow:hidden;cursor:pointer;z-index:1}
.tgev b{font-size:.8125rem;font-weight:650;line-height:1.2;overflow:hidden;text-overflow:ellipsis}
.tgev span{font-size:.6875rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-variant-numeric:tabular-nums}
.tgev.short{flex-direction:row;align-items:center;gap:6px}.tgev.short b{white-space:nowrap}
.tgev.past{opacity:.55}
@media (hover:hover){.tgev:hover{background:color-mix(in srgb,var(--k-red) 28%,var(--card))}}
.nowline{position:absolute;left:-4px;right:0;height:2px;background:var(--k-red);z-index:2;pointer-events:none}
.nowline::before{content:"";position:absolute;left:-2px;top:-4px;width:10px;height:10px;border-radius:50%;background:var(--k-red)}
/* day view: the grid with Allen's day-specific sections beside it */
.dayview{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:18px;min-height:0}
.dayside .daybar,.dayside .dk-time,.dayside > .row{display:none!important}
.dayside .daysecs{grid-template-columns:1fr!important}
/* month */
.mgrid2{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));grid-template-rows:auto repeat(var(--rows),minmax(96px,1fr));border-top:.5px solid var(--line);border-left:.5px solid var(--line);flex:1}
.mgrid2 > b{font-size:.75rem;color:var(--muted);text-align:right;padding:6px 8px;border-right:.5px solid var(--line);border-bottom:.5px solid var(--line);font-weight:600}
.mc2{display:flex;flex-direction:column;gap:2px;align-items:stretch;text-align:left;border:0;border-right:.5px solid var(--line);border-bottom:.5px solid var(--line);background:none;font:inherit;color:var(--ink);padding:4px 4px 6px;cursor:pointer;min-width:0;overflow:hidden}
.mc2.we{background:color-mix(in srgb,var(--ink) 2.5%,transparent)}
.mc2.out .n,.mc2.out .mp{opacity:.45}
.mc2 .n{align-self:flex-end;font-size:.875rem;font-weight:600;width:26px;height:26px;display:grid;place-items:center;border-radius:50%;font-variant-numeric:tabular-nums}
.mc2.td .n{background:var(--k-red);color:#fff}
.mc2 em{font-style:normal;font-size:.6875rem;color:var(--brand);overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.mp{display:flex;align-items:center;gap:4px;font-size:.75rem;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;padding:1px 3px;border-radius:4px}
.mp i{width:6px;height:6px;border-radius:50%;background:var(--kc);flex:none}
.mp.k-all{background:color-mix(in srgb,var(--k-red) 20%,var(--card));font-weight:600;padding:1px 6px}
.mc2 .more{font-size:.6875rem;color:var(--muted);padding-left:4px}
@media (hover:hover){.mc2:hover{background:var(--fill)}}
.calmain .ymonths,.calmain .rangel{margin-top:0}
@media (max-width:1100px){.cal2{grid-template-columns:220px minmax(0,1fr)}.dayview{grid-template-columns:1fr}.dayside{order:-1}}
/* iPhone */
.calwrap.phone{display:flex;flex-direction:column;gap:12px}
.calwrap.phone .calhead{gap:8px}.calwrap.phone .caltitle{font-size:1.3rem;flex-basis:100%}
.calwrap.phone .calx{display:none}
.calwrap.phone .mgrid2{grid-template-rows:auto repeat(var(--rows),minmax(56px,1fr))}
.calwrap.phone .mp{font-size:0;padding:0;gap:0}.calwrap.phone .mp i{width:5px;height:5px}.calwrap.phone .mp.k-all{height:4px;padding:0}
.calwrap.phone .mc2 .more{display:none}
.tgcol{background-image:linear-gradient(to bottom,color-mix(in srgb,var(--ink) 11%,transparent) 1px,transparent 1px)!important;background-size:100% 44px!important;background-repeat:repeat!important}
.nlhint{display:none;font-size:.75rem;color:var(--muted);padding:0 0 9px 24px;width:100%}
.nlq:focus-within input:placeholder-shown ~ .nlhint{display:block}
.caltitle{white-space:nowrap!important;overflow:visible!important;flex:1 0 auto!important}
.calhead .calx{margin-left:auto}
.calwrap.phone.m-dag .caltitle,.calwrap.phone.m-dag .calnav,.calwrap.phone.m-week .caltitle,.calwrap.phone.m-week .calnav{display:none}
.calx{display:flex;align-items:center;gap:6px}
.calfile{width:32px;height:32px;border-radius:8px;color:var(--brand)}
.calfile svg{width:19px;height:19px}
@media (hover:hover){.calfile:hover{background:var(--fill)}}
.icsres{background:var(--fill);border-radius:12px;padding:12px 14px;line-height:1.6;font-size:.9375rem}
/* Overview: the week as a short list */
.wklist{display:flex;flex-direction:column}
.wkl{display:grid;grid-template-columns:44px 1fr;gap:8px;padding:6px 0;border-bottom:.5px solid var(--line)}
.wkd{display:flex;flex-direction:column;align-items:center;text-decoration:none!important;color:var(--ink)!important}
.wkd small{font-size:.6875rem;color:var(--muted);text-transform:uppercase;font-weight:600}
.wkd b{font-size:1rem;width:28px;height:28px;display:grid;place-items:center;border-radius:50%}
.wkl.td .wkd b{background:var(--k-red);color:#fff}
.wki{display:flex;flex-direction:column;gap:2px;min-width:0;justify-content:center}
.wki em{font-style:normal;font-size:.75rem;color:var(--brand)}
.wkn{font-size:.875rem}
.home .mini{max-width:340px;margin:4px auto 0}
.home .minig button{height:34px;font-size:.9375rem}
/* Overview month: a calm grid with Allen's colour dots, and the chosen day underneath. No scrolling. */
.ovm{display:flex;flex-direction:column;gap:10px}
.ovmh{display:flex;align-items:center;justify-content:space-between}
.ovmh b{font-family:var(--round);font-size:1.25rem;font-weight:800;letter-spacing:-.01em}
.ovmh b span{color:var(--muted);font-weight:700}
.ovmn{display:flex;align-items:center;gap:2px}
.ovmn .nicon{width:30px;height:30px;border-radius:8px;font-size:1.25rem;color:var(--brand)}
.ovmn .txtbtn{font-size:.875rem;text-decoration:none}
@media (hover:hover){.ovmn .nicon:hover{background:var(--fill)}}
.ovmg{display:grid;grid-template-columns:repeat(7,1fr);row-gap:2px;text-align:center}
.ovmg > i{font-style:normal;font-size:.6875rem;font-weight:600;color:var(--muted);padding-bottom:4px}
.ovmg button{border:0;background:none;font:inherit;color:var(--ink);cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:2px;padding:2px 0 3px;border-radius:10px;min-width:0}
.ovmg button span{width:30px;height:30px;display:grid;place-items:center;border-radius:50%;font-size:.9375rem;font-variant-numeric:tabular-nums}
.ovmg button.out span{color:var(--muted);opacity:.5}
.ovmg button.td span{color:var(--k-red);font-weight:700}
.ovmg button.sel span{background:var(--ink);color:var(--card);font-weight:700;opacity:1}
.ovmg button.sel.td span{background:var(--k-red);color:#fff}
.ovmg em{display:flex;gap:2px;height:5px}
.ovmg em i{width:5px;height:5px;border-radius:50%}
.ovmg em .k-t{background:var(--k-red)}.ovmg em .k-d{background:var(--k-orange)}.ovmg em .k-i{background:var(--k-blue)}
@media (hover:hover){.ovmg button:not(.sel):hover span{background:var(--fill)}}
.ovmd{border-top:.5px solid var(--line);padding-top:10px;display:flex;flex-direction:column;gap:3px}
.ovmdh{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:2px}
.ovmdh b{font-size:.9375rem}
.ovmdh .txtbtn,.ovmore{font-size:.8125rem;text-decoration:none}
.ovmore{align-self:flex-start;padding-left:11px}
.ovmempty{margin:2px 0;font-size:.875rem}
.ovmwrap{overflow:visible}
/* Overview week: one line per day */
.wklist{display:flex;flex-direction:column}
.wkl{display:grid!important;grid-template-columns:40px minmax(0,1fr)!important;align-items:center;gap:8px!important;height:46px;padding:0!important;border-bottom:.5px solid var(--line)}
.wkl:last-child{border-bottom:0}
.wkd{border:0;background:none;font:inherit;color:var(--ink);cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:0;padding:0;line-height:1.1}
.wkd small{font-size:.625rem;color:var(--muted);text-transform:uppercase;font-weight:700;letter-spacing:.04em}
.wkd b{font-size:.9375rem;width:26px;height:26px;display:grid;place-items:center;border-radius:50%;font-variant-numeric:tabular-nums}
.wkl.td .wkd b{background:var(--k-red);color:#fff}
@media (hover:hover){.wkl:not(.td) .wkd:hover b{background:var(--fill)}}
.wki{display:flex!important;flex-direction:row!important;align-items:center;gap:6px!important;min-width:0;overflow:hidden}
.wkc{display:flex;align-items:center;gap:5px;min-width:0;flex:0 1 auto;border:0;background:color-mix(in srgb,var(--kc) 14%,var(--card));border-radius:7px;padding:4px 8px;font:inherit;font-size:.8125rem;color:var(--ink);cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wkc i{width:6px;height:6px;border-radius:50%;background:var(--kc);flex:none}
.wkc span{color:var(--muted);font-variant-numeric:tabular-nums}
.wkc.k-t{--kc:var(--k-red)}.wkc.k-d{--kc:var(--k-orange)}.wkc.k-i{--kc:var(--k-blue)}
.wkm{flex:none;border:0;background:none;font:inherit;font-size:.75rem;color:var(--muted);cursor:pointer;padding:4px 2px}
.wkn{display:block;height:1px;width:100%}

/* ===================================================================
   Reference editor, round 3: blocks in the spirit of Notion, finish of Apple Notes.
   =================================================================== */
.doccol{position:relative}
/* the + and grip beside each block */
.nhandle{position:absolute;display:flex;align-items:center;gap:0;opacity:0;pointer-events:none;transition:opacity .12s;z-index:4}
.nhandle.on{opacity:1;pointer-events:auto}
.nhandle button{width:24px;height:26px;border:0;background:none;border-radius:6px;color:var(--muted);cursor:pointer;display:grid;place-items:center;font-size:1.25rem;line-height:1;padding:0}
.nh-grip{cursor:grab!important}.nh-grip svg{width:10px;height:16px;fill:currentColor}
@media (hover:hover){.nhandle button:hover{background:var(--fill);color:var(--ink)}}
@media (hover:none){.nhandle{display:none}}
.ndropline{position:absolute;height:3px;border-radius:2px;background:var(--brand);opacity:0;pointer-events:none;z-index:4;margin-top:-1.5px}
.ndropline.on{opacity:1}
.ndragging{opacity:.35}
.nbmenu{width:240px}
.nbmenu > button{display:grid;grid-template-columns:32px 1fr;align-items:center;gap:10px;width:100%;border:0;background:none;text-align:left;padding:5px 8px;border-radius:8px;cursor:pointer;font:inherit;color:var(--ink)}
.nbmenu > button.red b{color:var(--red)}
.nbmenu .nsli{width:30px;height:30px;font-size:.875rem}
.nbmenu hr{border:0;border-top:.5px solid var(--line);margin:4px 6px}
@media (hover:hover){.nbmenu > button:hover{background:var(--fill)}}
/* the selection bar */
.nbubble{position:fixed;z-index:97;display:none;align-items:center;gap:1px;padding:4px;background:var(--card);border-radius:11px;box-shadow:0 0 0 .5px rgba(0,0,0,.1),0 10px 30px rgba(0,0,0,.18)}
.nbubble.on{display:flex}
.nbubble button{min-width:32px;height:32px;border:0;background:none;border-radius:7px;cursor:pointer;color:var(--ink);font-family:var(--round);font-size:.9375rem;padding:0 7px}
.nbubble .bbcode{font-family:ui-monospace,Menlo,monospace;font-size:.8125rem}
.nbubble .bbhl{min-width:24px;padding:0 3px}
.nbubble .bbhl i{display:block;width:16px;height:16px;border-radius:50%;border:.5px solid rgba(0,0,0,.15)}
.hl-none{background:linear-gradient(135deg,transparent 45%,var(--red) 45%,var(--red) 55%,transparent 55%)}
@media (hover:hover){.nbubble button:hover{background:var(--fill)}}
/* highlight colours: soft, readable in light and dark */
.hl-y,mark[data-c="y"]{background:color-mix(in srgb,#FFD60A 38%,transparent)}
.hl-g,mark[data-c="g"]{background:color-mix(in srgb,#34C759 30%,transparent)}
.hl-b,mark[data-c="b"]{background:color-mix(in srgb,#0A84FF 26%,transparent)}
.hl-p,mark[data-c="p"]{background:color-mix(in srgb,#FF2D55 24%,transparent)}
.hl-o,mark[data-c="o"]{background:color-mix(in srgb,#FF9F0A 32%,transparent)}
div.nbody mark{color:inherit;border-radius:3px;padding:0 1px}
/* blocks */
div.nbody blockquote{margin:.5em 0;padding:2px 0 2px 16px;border-left:3px solid var(--ink);font-size:1.0625em;color:var(--ink)}
div.nbody pre{font-family:ui-monospace,"SF Mono",Menlo,monospace;font-size:.875em;line-height:1.55;background:color-mix(in srgb,var(--ink) 6%,transparent);border-radius:10px;padding:14px 16px;white-space:pre-wrap;margin:.6em 0;tab-size:2}
div.nbody code{font-family:ui-monospace,"SF Mono",Menlo,monospace;font-size:.85em;background:color-mix(in srgb,var(--ink) 8%,transparent);color:var(--k-red);padding:1px 5px;border-radius:5px}
div.nbody pre code{background:none;color:inherit;padding:0}
div.nbody hr{border:0;border-top:1px solid var(--line);margin:1.2em 0}
div.nbody .ncall{position:relative;display:block;margin:.6em 0;padding:12px 16px 12px 46px;border-radius:12px;background:color-mix(in srgb,var(--ink) 5%,transparent)}
div.nbody .ncall::before{content:attr(data-e);position:absolute;left:14px;top:11px;font-size:1.15em;cursor:pointer}
div.nbody .ncall p{margin:.15em 0}
div.nbody .ntog{margin:.3em 0}
div.nbody .ntogh{position:relative;padding-left:24px;font-weight:600;margin:.2em 0}
div.nbody .ntogh::before{content:"";position:absolute;left:5px;top:.5em;width:0;height:0;border-left:7px solid var(--muted);border-top:5px solid transparent;border-bottom:5px solid transparent;transition:transform .15s;cursor:pointer}
div.nbody .ntog[data-open="1"] > .ntogh::before{transform:rotate(90deg)}
div.nbody .ntogb{padding-left:24px}
div.nbody .ntog:not([data-open="1"]) > .ntogb{display:none}
div.nbody .ntogh:empty::after{content:"Toggle";color:var(--muted)}
div.nbody img.nimg{display:block;max-width:100%;height:auto;border-radius:10px;margin:.4em 0}
div.nbody blockquote:empty::after,div.nbody pre:empty::after{content:"…";color:var(--muted)}
@media (prefers-reduced-motion:reduce){div.nbody .ntogh::before{transition:none}}
/* note icon, words, templates, backlinks, outline */
.nicon2{display:block;border:0;background:none;font-size:3rem;line-height:1;padding:4px 0;margin:4px 0 2px;cursor:pointer;border-radius:10px}
@media (hover:hover){.nicon2:hover{background:var(--fill)}}
.naddicon{font-size:.8125rem;color:var(--muted)!important;text-decoration:none!important;opacity:0;transition:opacity .15s;padding:6px 0 0}
.doccol:hover .naddicon,.naddicon:focus-visible{opacity:1}
@media (hover:none){.naddicon{opacity:.8}}
.libico{margin-right:5px}
.ntpl{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin:-10px 0 24px}
.ntpl .muted{font-size:.875rem;margin-right:2px}
.nback{border-top:.5px solid var(--line);margin-top:8px;padding-top:14px;display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.nback h4{width:100%;margin:0 0 4px;font-size:.8125rem;color:var(--muted);font-weight:700}
.nchipx{border:0;background:var(--fill);border-radius:8px;padding:5px 10px;font:inherit;font-size:.875rem;color:var(--ink);cursor:pointer}
.nout{display:none}
@container (min-width:1000px){.nout{display:flex;flex-direction:column;gap:2px;position:absolute;top:120px;right:22px;width:190px}
  .docpage .doccol{margin-left:max(0px,calc((100% - 740px)/2 - 110px))}}
.docpage{position:relative}
.nout h4{margin:0 0 6px;font-size:.75rem;color:var(--muted);font-weight:700}
.nout button{border:0;background:none;text-align:left;font:inherit;font-size:.8125rem;color:var(--muted);padding:3px 8px;border-radius:6px;cursor:pointer;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.nout .nout-h3{padding-left:20px}.nout .nout-h1{color:var(--ink);font-weight:600}
@media (hover:hover){.nout button:hover{background:var(--fill);color:var(--ink)}}
.iconsgrid{display:grid;grid-template-columns:repeat(8,1fr);gap:6px;margin-bottom:12px}
.iconsgrid .b{font-size:1.4rem;padding:6px 0;min-width:0}

/* ===================================================================
   Reference, immersive: on a Mac it fills the window like Notes. No card, no page title, one scroll for the
   note. Focus hides both sidebars; the note stands alone in a calm, centred column.
   =================================================================== */
.dside,.dmore{width:34px;height:34px;border-radius:9px;color:var(--muted)!important;display:inline-grid;place-items:center;flex:none}
.dside svg,.dmore svg{width:20px;height:20px}
@media (hover:hover){.dside:hover,.dmore:hover{background:var(--fill);color:var(--ink)!important}}
@media (min-width:1000px){
  body.r-ref .top,body.r-ref #statusBar{display:none}
  body.r-ref .refdoc{position:fixed;top:0;bottom:0;left:256px;right:0;border-radius:0;box-shadow:none;min-height:0;z-index:5;grid-template-columns:minmax(230px,280px) minmax(0,1fr);transition:left .25s ease,grid-template-columns .25s ease}
  body.r-ref .libpane{max-height:none;height:100%;padding-top:18px;background:color-mix(in srgb,var(--sidebar) 55%,var(--card))}
  body.r-ref .docpage{max-height:none;height:100%}
  body.r-ref .docbar{padding:10px 18px 10px 14px!important;border-bottom-color:transparent;transition:border-color .2s}
  body.r-ref .docpage.scrolled .docbar{border-bottom-color:var(--line)}
  body.r-ref .doccol{max-width:720px!important;padding:64px 48px 160px!important}
  body.r-ref .doctitle{font-size:2.5rem!important;margin-bottom:10px}
  body.r-ref .docblank{height:100%}
  /* focus: the sidebars step aside */
  body.notefocus .nav{transform:translateX(-100%);transition:transform .25s ease}
  body.notefocus .refdoc{left:0;grid-template-columns:0 minmax(0,1fr)}
  body.notefocus .libpane{overflow:hidden;padding:0;border:0}
  body.notefocus .dside{color:var(--brand)!important}
  body.notefocus .doccol{padding-top:88px!important}
  .nav{transition:transform .25s ease}
}
@media (min-width:1000px) and (prefers-reduced-motion:reduce){body.r-ref .refdoc,.nav{transition:none!important}}
.naddicon{display:none!important}
/* a ticked checklist item shows a tick, like Notes, not a filled radio button */
div.nbody ul.nchk > li[data-done="1"]::before{background:var(--brand) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.5l3 3 6-6.5' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/100% no-repeat!important;border-color:var(--brand)!important;box-shadow:none!important}

/* ---------- Security: lock screen, privacy veil, recovery key ---------- */
#lock{position:fixed;inset:0;z-index:9999;background:var(--paper);display:flex;align-items:center;justify-content:center;padding:24px 16px;
  padding-top:max(24px,env(safe-area-inset-top));padding-bottom:max(24px,env(safe-area-inset-bottom))}
.lockbox{max-width:360px;width:100%;text-align:center;display:flex;flex-direction:column;align-items:center;gap:12px}
.lockbox h2{margin:4px 0 0;font:800 24px/1.2 ui-rounded,Nunito,system-ui,sans-serif;color:var(--ink)}
.lockbox p{margin:0}
.lockicon{width:72px;height:72px}
.lockbox .b.big{width:100%;padding:14px 16px;font-size:17px}
.lockrec{display:flex;flex-direction:column;gap:10px;width:100%}
.lockrec input{font:600 16px/1.3 ui-monospace,SFMono-Regular,Menlo,monospace;text-align:center;padding:12px;border-radius:12px;border:1px solid var(--line,#d2d2d7);background:var(--card);color:var(--ink);letter-spacing:.04em}
.lockerr{color:var(--red);font-size:15px}
body.locked .wrap,body.locked .tabbar,body.locked #modal{visibility:hidden}
body.veiled .wrap,body.veiled .tabbar,body.veiled #modal{visibility:hidden}
body.veiled{background:var(--paper)}
.reckey{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:8px 0 4px;padding:14px;border-radius:14px;background:var(--card);border:1px dashed var(--line,#d2d2d7)}
.reckey span{font:700 17px/1.4 ui-monospace,SFMono-Regular,Menlo,monospace;text-align:center;letter-spacing:.08em;color:var(--ink);user-select:all}
@media (max-width:380px){.reckey{grid-template-columns:repeat(2,1fr)}}

/* ---------- Email ---------- */
.mailview{display:flex;flex-direction:column;gap:10px;min-width:0}
.mailhead{display:flex;flex-direction:column;gap:2px;font-size:15px;overflow-wrap:anywhere}
.mailbar{display:flex;flex-wrap:wrap;gap:8px}
.mailframe{width:100%;height:min(62vh,640px);border:1px solid var(--line,#d2d2d7);border-radius:12px;background:#fff;display:block}
.chip.mailchip{display:inline-flex;align-items:center;gap:4px;cursor:pointer;font:inherit;font-size:12px}
.chip.mailchip svg{width:14px;height:14px}
.procmail{margin-top:8px;display:flex;flex-direction:column;gap:8px}
.procmail p{margin:0;font-size:14px}
.procmail .row{display:flex;flex-wrap:wrap;gap:8px}
/* Recovery key: four groups across, read left to right; email in a near full-height sheet */
.reckey{grid-template-columns:repeat(4,1fr)!important;gap:6px 4px;padding:12px 8px}
.reckey span{font-size:16px;letter-spacing:.04em}
.reccopy{margin:2px 0 0}
.ftitle.grow{resize:none;overflow:hidden;line-height:1.2}
.mailacts{display:flex;flex-wrap:wrap;gap:8px}
.mailacts .b{display:inline-flex;align-items:center;gap:6px;min-height:44px}
.mailacts svg{width:18px;height:18px}
.mbox:has(.mailview){height:calc(100dvh - max(12px,env(safe-area-inset-top)) - 8px);display:flex;flex-direction:column}
.mbox:has(.mailview) .mailview{flex:1;min-height:0}
.mbox:has(.mailview) .mailframe{flex:1;height:auto;min-height:280px}
.mailbar .b{min-height:44px}
.lockbox .txtbtn{min-height:44px}

/* ---------- Today and Lists ---------- */
.today{display:flex;flex-direction:column;gap:14px;max-width:1100px}
.tddate{margin:0;color:var(--chalkMute,#6e6e73);font-size:15px}
.tdcols{display:grid;grid-template-columns:1fr;gap:18px}
@media (min-width:900px){.tdcols{grid-template-columns:minmax(260px,1fr) 2fr;align-items:start}}
.tdsec{display:flex;flex-direction:column;gap:8px;min-width:0}
.tdh{display:flex;align-items:baseline;justify-content:space-between;font:700 20px/1.2 ui-rounded,Nunito,system-ui,sans-serif;color:var(--ink)}
.tdh .txtbtn{font:inherit;font-size:15px;font-weight:500;min-height:44px}
.tdcal,.tdsec .list{background:var(--card);border-radius:14px;margin:0;padding:0 12px}
.tdcal li{display:flex;gap:12px;align-items:baseline}
.tdcal li.past{opacity:.55}
.tdtime{flex:none;width:58px;color:var(--chalkMute,#6e6e73);font-size:14px}
.tdempty{margin:0;color:var(--chalkMute,#6e6e73);font-size:15px;padding:10px 12px;background:var(--card);border-radius:14px;display:flex;align-items:center;gap:10px}
.tdempty p{margin:0}
.tdempty .edd{width:44px;height:44px;flex:none}
.tdsec .sub{margin:10px 4px 4px;font-size:13px;font-weight:600;color:var(--chalkMute,#6e6e73);text-transform:none}
.tdchips{display:flex;gap:8px;overflow-x:auto;padding:2px 0 4px;scrollbar-width:none}
.tdchips::-webkit-scrollbar{display:none}
.tdchips button{flex:none;min-height:36px;padding:6px 14px;border-radius:99px;border:1px solid var(--line,#d2d2d7);background:var(--card);color:var(--ink);font:inherit;font-size:15px}
.tdchips button.on{background:var(--brand,#3355E0);border-color:transparent;color:#fff}
.tdchips small{opacity:.7;margin-left:2px}
.tdinbox{display:flex;align-items:center;gap:10px;width:100%;min-height:52px;padding:10px 14px;border-radius:14px;border:0;background:var(--brandSoft,#EAEEFE);color:var(--ink);font:inherit;font-size:16px;text-align:left;cursor:pointer}
.tdinbox svg{width:22px;height:22px;color:var(--brand,#3355E0);flex:none}
.tdinbox span:first-of-type{flex:1}
.tdnudges{display:flex;flex-direction:column;gap:6px}
.tdnudge{display:flex;align-items:center;gap:10px;min-height:44px;padding:8px 12px;border-radius:12px;border:0;background:var(--card);color:var(--ink);font:inherit;font-size:15px;text-align:left;cursor:pointer}
.tdnudge svg{width:18px;height:18px;color:var(--chalkY,#A35F00);flex:none}
.tdwf{display:flex;align-items:center;gap:10px;width:100%;min-height:48px;margin-top:6px;padding:8px 14px;border-radius:14px;border:0;background:var(--card);color:var(--ink);font:inherit;font-size:16px;text-align:left;cursor:pointer}
.tdwf svg:first-child{width:20px;height:20px;color:var(--chalkP,#C2347A)}
.tdwf span:first-of-type{flex:1}
.tdwf .ic{color:var(--chalkMute,#6e6e73)}
.tdwf .chev{width:8px;height:14px;fill:none;stroke:currentColor;stroke-width:2;opacity:.4}
.lists{display:flex;flex-direction:column;gap:18px;max-width:720px}
.lists .sgroup{margin:0}
.lists .irow .chev{width:8px;height:14px;fill:none;stroke:currentColor;stroke-width:2;opacity:.4}
/* Call, mail and message buttons on next actions */
.list li .cdo{flex:none;width:44px;height:44px;border-radius:50%;border:0;background:var(--brandSoft,#EAEEFE);color:var(--brand,#3355E0);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;align-self:center}
.list li .cdo svg{width:20px;height:20px}
.composesheet .psheet2{padding:0;max-width:none}
.composesheet .viaseg{display:flex!important;flex-wrap:nowrap;overflow-x:auto;gap:8px;scrollbar-width:none;grid-template-columns:none!important}
.composesheet .viaseg::-webkit-scrollbar{display:none}
.composesheet .viaseg .via{flex:1 0 auto;min-width:76px;min-height:56px}

/* ---------- Weekly Review, focused ---------- */
body.r-review .tabbar,body.r-review .nav,body.r-review .iosbar,body.r-review .ititle,body.r-review .top,body.r-review #statusBar{display:none!important}
body.r-review .wrap{display:block;max-width:none;padding:0}
body.r-review #view{max-width:640px;margin:0 auto;padding:0 16px}
.rvwrap{display:flex;flex-direction:column;min-height:100dvh;padding-top:max(12px,env(safe-area-inset-top));padding-bottom:calc(96px + env(safe-area-inset-bottom))}
.rvtop{display:flex;align-items:center;gap:12px;min-height:44px}
.rvx{width:44px;height:44px;border:0;border-radius:50%;background:var(--card);color:var(--ink);font-size:24px;line-height:1;cursor:pointer;flex:none}
.rvdots{flex:1;display:flex;gap:4px;align-items:center}
.rvdots i{flex:1;height:5px;border-radius:3px;background:var(--line,#d2d2d7)}
.rvdots i.done{background:var(--chalkG,#1F7A45)}
.rvdots i.on{background:var(--brand,#3355E0)}
.rvcount{font-size:13px;color:var(--chalkMute,#6e6e73);min-width:36px;text-align:right;font-variant-numeric:tabular-nums}
.rvgroup{margin:20px 0 2px;font-size:13px;font-weight:600;letter-spacing:.02em;color:var(--chalkMute,#6e6e73)}
.rvh{margin:0;font:800 28px/1.15 ui-rounded,Nunito,system-ui,sans-serif;letter-spacing:-.01em;color:var(--ink)}
.rvsub{margin:6px 0 0;font-size:17px;line-height:1.4;color:var(--chalkMute,#6e6e73)}
.rvbody{margin-top:20px;display:flex;flex-direction:column;gap:12px}
.rvhint{margin:0;font-size:15px;line-height:1.45;color:var(--chalkMute,#6e6e73)}
.rvempty{margin:0;padding:16px;border-radius:14px;background:var(--card);font-size:16px;color:var(--chalkMute,#6e6e73)}
.rvday{margin:8px 4px 0;font-size:13px;font-weight:600;color:var(--chalkMute,#6e6e73)}
.rvlist,.rvcards{list-style:none;margin:0;padding:0 12px;background:var(--card);border-radius:14px}
.rvcards{padding:0;background:none;display:flex;flex-direction:column;gap:10px}
.rvlist li{display:flex;align-items:center;gap:10px;min-height:52px;padding:6px 0;border-bottom:1px solid var(--line,#d2d2d7)}
.rvlist li:last-child{border-bottom:0}
.rvtime{flex:none;width:52px;font-size:14px;color:var(--chalkMute,#6e6e73);font-variant-numeric:tabular-nums}
.rvt{flex:1;min-width:0;font-size:17px;text-align:left;color:var(--ink);overflow-wrap:anywhere}
.rvt small{display:block;font-size:13px;color:var(--chalkMute,#6e6e73);margin-top:2px}
.rvlist .b.sm,.rvcards .b.sm{min-height:36px;flex:none}
.rvdot{width:8px;height:8px;border-radius:50%;background:var(--brand,#3355E0);flex:none}
.rvcard{background:var(--card);border-radius:14px;padding:12px 14px;display:flex;flex-direction:column;gap:8px}
.rvcard.need{box-shadow:inset 3px 0 0 var(--chalkY,#A35F00)}
.rvct{font-size:17px;font-weight:600;text-align:left;color:var(--ink)}
.rvna{display:flex;gap:6px;align-items:center;font-size:15px;color:var(--chalkMute,#6e6e73)}
.rvna svg{width:16px;height:16px;flex:none}
.rvnaf,.rvcap{display:flex;gap:8px}
.rvnaf input,.rvcap input{flex:1;min-width:0;min-height:44px;padding:8px 12px;border-radius:12px;border:1px solid var(--line,#d2d2d7);background:var(--card);color:var(--ink);font:inherit;font-size:17px}
.rvcap .b{min-height:44px}
.rvbig{display:flex;align-items:center;gap:14px;padding:18px;border-radius:16px;background:var(--card);font-size:17px}
.rvnum{font:800 40px/1 ui-rounded,Nunito,system-ui,sans-serif;color:var(--brand,#3355E0)}
.rvdd{width:56px;height:56px}
.rvbody .b.big{width:100%;min-height:52px;font-size:17px}
.rvadd{align-self:flex-start}
.rvfoot{position:fixed;left:0;right:0;bottom:0;z-index:50;display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:12px max(16px,calc((100vw - 640px)/2 + 16px)) calc(12px + env(safe-area-inset-bottom));background:var(--paper);border-top:1px solid var(--line,#d2d2d7)}
.rvfoot .b.big{min-width:160px;min-height:50px;font-size:17px}
.rvfoot .txtbtn{min-height:44px;font-size:17px}

/* ---------- iPhone: no tab bar; one floating + in thumb reach (like Things) ---------- */
.tabbar{display:none!important}
.fab{display:none}
@media (max-width:700px){
  .iplus{visibility:hidden}
  .fab{display:grid;place-items:center;position:fixed;right:20px;bottom:calc(20px + env(safe-area-inset-bottom,0px));z-index:45;width:58px;height:58px;border-radius:50%;border:0;
    background:var(--selbg,#3355E0);color:#fff;box-shadow:0 6px 18px rgba(0,0,0,.25);cursor:pointer}
  .fab svg{width:26px;height:26px}
  .fab:active{transform:scale(.94)}
  body.r-review .fab,body.locked .fab{display:none}
  #view{padding-bottom:calc(96px + env(safe-area-inset-bottom,0px))!important}
  .phome{display:flex;flex-direction:column;gap:16px}
  .phome .sfield{display:flex;align-items:center;gap:8px;width:100%;min-height:40px;padding:8px 12px;border:0;border-radius:12px;background:var(--card);color:var(--chalkMute,#6e6e73);font:inherit;font-size:17px;text-align:left;cursor:pointer}
  .phome .sfield svg{width:18px;height:18px}
  .phome .irows{border-radius:14px;overflow:hidden}
  .homecard{display:flex;align-items:center;gap:10px;min-height:52px;padding:10px 14px;border:0;border-radius:14px;background:var(--brandSoft,#EAEEFE);color:var(--ink);font:inherit;font-size:17px;text-align:left;cursor:pointer}
  .homecard svg:first-child{width:22px;height:22px;color:var(--brand,#3355E0)}
  .homecard span{flex:1}
  .homecard .chev{width:8px;height:14px;fill:none;stroke:currentColor;stroke-width:2;opacity:.4}
  .homefoot{display:flex;justify-content:center;gap:24px;padding:4px 0 8px}
  .homefoot .txtbtn{display:inline-flex;align-items:center;gap:6px;min-height:44px;font-size:15px;color:var(--chalkMute,#6e6e73)}
  .homefoot svg{width:18px;height:18px}
}
.phome .irow .chev{width:8px;height:14px;fill:none;stroke:currentColor;stroke-width:2;opacity:.4}

/* ---------- iPhone calendar: week strip or month, then the day as one list ---------- */
.pcal{display:flex;flex-direction:column;gap:14px}
.pchead{display:flex;align-items:center;justify-content:space-between}
.pchead h2{margin:0;font:800 26px/1.2 ui-rounded,Nunito,system-ui,sans-serif;color:var(--ink)}
.pchead h2 span{color:var(--chalkMute,#6e6e73);font-weight:700}
.pcnav{display:flex;align-items:center;gap:4px}
.pcnav .nicon{width:44px;height:44px;font-size:22px}
.pcnav .txtbtn{min-height:44px;font-size:16px}
.pcseg{align-self:stretch}
.pcseg button{flex:1;min-height:34px}
.pcweek{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.pcweek button,.pcgrid button{display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px 0;border:0;border-radius:12px;background:none;color:var(--ink);font:inherit;cursor:pointer;min-height:56px}
.pcweek small{font-size:12px;color:var(--chalkMute,#6e6e73)}
.pcweek span,.pcgrid span{font-size:18px;font-weight:600;width:34px;height:34px;display:grid;place-items:center;border-radius:50%}
.pcweek .td span,.pcgrid .td span{color:var(--red,#c5221f)}
.pcweek .sel span,.pcgrid .sel span{background:var(--ink);color:var(--paper)}
.pcweek .td.sel span,.pcgrid .td.sel span{background:var(--red,#c5221f);color:#fff}
.pcweek em,.pcgrid em{display:flex;gap:2px;height:6px}
.pcweek em i,.pcgrid em i{width:5px;height:5px;border-radius:50%;background:var(--chalkMute,#6e6e73)}
.pcweek em i.k-t,.pcgrid em i.k-t{background:var(--chalkB,#1D74A8)} .pcweek em i.k-d,.pcgrid em i.k-d{background:var(--chalkG,#1F7A45)} .pcweek em i.k-i,.pcgrid em i.k-i{background:var(--chalkY,#A35F00)}
.pcgrid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
.pcgrid > i{font-style:normal;text-align:center;font-size:12px;color:var(--chalkMute,#6e6e73);padding-bottom:4px}
.pcgrid button{min-height:48px;padding:2px 0}
.pcgrid .out span{color:var(--chalkMute,#6e6e73);opacity:.6}
.pcday{display:flex;flex-direction:column;gap:10px}
.pcdh{display:flex;align-items:baseline;gap:10px}
.pcdh b{font-size:20px}
.pcth{font-size:15px;color:var(--chalkMute,#6e6e73)}
.pclist{list-style:none;margin:0;padding:0 12px;background:var(--card);border-radius:14px}
.pclist li{display:flex;align-items:center;gap:12px;min-height:52px;padding:6px 0 6px 10px;border-bottom:1px solid var(--line,#d2d2d7);position:relative}
.pclist li:last-child{border-bottom:0}
.pclist li::before{content:"";position:absolute;left:0;top:10px;bottom:10px;width:3px;border-radius:2px;background:var(--chalkB,#1D74A8)}
.pclist li.k-d::before{background:var(--chalkG,#1F7A45)} .pclist li.k-i::before{background:var(--chalkY,#A35F00)}
.pct{flex:none;width:52px;font-size:14px;color:var(--chalkMute,#6e6e73);font-variant-numeric:tabular-nums}
.pct small{display:block;font-size:12px}
.pcn{flex:1;min-width:0;text-align:left;font-size:17px;color:var(--ink);overflow-wrap:anywhere}
.pcn small{display:block;font-size:13px;color:var(--chalkMute,#6e6e73);margin-top:1px}
.pcempty{margin:0;padding:14px;border-radius:14px;background:var(--card);color:var(--chalkMute,#6e6e73)}
.pcday > .b.sm{align-self:flex-start;min-height:40px}
.pcfoot{display:flex;flex-wrap:wrap;gap:4px 16px;justify-content:center;padding-top:4px}
.pcfoot .txtbtn{min-height:44px;font-size:15px;color:var(--chalkMute,#6e6e73)}

/* ---------- iPhone: a capture bar at the bottom of every screen; Find top-right ---------- */
.capbar,.isearch{display:none}
@media (max-width:700px){
  .fab{display:none!important}
  .isearch{display:grid;place-items:center;grid-area:plus;justify-self:end;width:44px;height:44px;background:none;border:0;color:var(--blue);cursor:pointer}
  .isearch svg{width:22px;height:22px}
  .iplus{display:none!important}
  .capbar{display:block;position:fixed;left:0;right:0;bottom:0;z-index:45;padding:10px 16px calc(10px + env(safe-area-inset-bottom,0px));
    background:color-mix(in srgb,var(--paper) 88%,transparent);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);border-top:1px solid var(--line,#d2d2d7)}
  .capbar input{width:100%;min-height:44px;padding:10px 16px;border-radius:22px;border:1px solid var(--line,#d2d2d7);background:var(--card);color:var(--ink);font:inherit;font-size:17px}
  body.r-review .capbar,body.locked .capbar,body.r-verwerken .capbar{display:none}
  .inbox .inadd{display:none}
  .trigsoft{display:block;margin:4px auto 0;min-height:44px;font-size:15px;color:var(--chalkMute,#6e6e73)}
  .tile{min-height:66px!important;padding:8px 12px!important}
  .tile .tn{font-size:1.6rem}
}

/* ---------- Weekly Review: the screen itself, nothing scrolls ---------- */
body.r-review{overflow:hidden;height:100dvh}
.rvwrap{height:100dvh;min-height:0!important;overflow:hidden;padding-bottom:0!important;display:flex;flex-direction:column}
.rvmain{flex:1;min-height:0;display:flex;flex-direction:column;overflow:hidden}
.rvtop .rvdots{margin-right:4px}
.rvh{margin-top:28px!important}
.rvbody{flex:1;min-height:0;justify-content:flex-start}
.rvfoot{position:static!important;padding:12px 0 calc(12px + env(safe-area-inset-bottom))!important;border-top:0!important;background:none!important}
.rvcap input{min-height:56px!important;font-size:20px!important;border-radius:16px!important}
.rvcount2{margin:0;font-size:15px;color:var(--chalkG,#1F7A45)}
.rvsoft{align-self:flex-start;min-height:44px;font-size:15px;color:var(--chalkMute,#6e6e73)}
.rvpager{display:flex;align-items:center;justify-content:center;gap:16px;font-size:15px;color:var(--chalkMute,#6e6e73)}
.rvpager .nicon{width:44px;height:44px;font-size:22px}
.rvpager .nicon[disabled]{opacity:.3}
.rvic{flex:none;width:40px;height:40px;border-radius:50%;border:0;background:var(--brandSoft,#EAEEFE);color:var(--brand,#3355E0);display:grid;place-items:center;cursor:pointer}
.rvic svg{width:18px;height:18px}
.rvone{display:flex;flex-direction:column;gap:12px}
.rvof{font-size:13px;color:var(--chalkMute,#6e6e73)}
.rvone .rvcard{padding:20px;gap:12px}
.rvone .rvct{margin:0;font-size:22px;font-weight:700;line-height:1.25}
.rvone .rvna{margin:0;font-size:17px}
.rvbtns{display:flex;gap:10px}
.rvbtns .b{min-height:44px;flex:1}
.rvone > .txtbtn{align-self:flex-end;min-height:44px;font-size:16px}
/* iPhone Overview fits one screen: no backup nag here (it lives in Settings › Data), compact tiles and rows */
@media (max-width:700px){
  #statusBar .status{display:none}
  .phome{gap:12px!important}
  .phome .tiles{gap:10px!important}
  .phome .tile{min-height:0!important;padding:8px 12px!important;gap:2px 8px!important}
  .phome .tile .ti{width:26px;height:26px}
  .phome .tile .tn{font-size:1.5rem;line-height:1.1}
  .phome .irow{min-height:44px!important;padding-top:6px!important;padding-bottom:6px!important}
  .homefoot{padding:0!important}
  #view{padding-bottom:calc(76px + env(safe-area-inset-bottom,0px))!important}
}
@media (max-width:700px){ body{padding-bottom:0!important} }
body.r-review #view{padding-bottom:0!important;padding-top:0!important;margin:0 auto!important}
body.r-review .wrap{padding:0!important;margin:0!important}
body.r-review{padding:0!important}
.rvwrap{box-sizing:border-box}

/* No scroll bars anywhere in the app: where something scrolls, it scrolls by touch, wheel or trackpad, like iOS. */
*{scrollbar-width:none}
*::-webkit-scrollbar{display:none;width:0;height:0}
@media (max-width:700px){
  .hzrow{display:flex;align-items:center;gap:12px;width:100%;min-height:52px;padding:8px 14px;margin:0 0 8px;border:0;border-radius:14px;background:var(--card);color:var(--ink);font:inherit;font-size:17px;text-align:left;cursor:pointer}
  .hzrow span:nth-child(2){flex:1}
  .hzrow .hzn{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:var(--brandSoft,#EAEEFE);color:var(--brand,#3355E0);font-weight:700;font-size:14px}
  .hzrow .chev{width:8px;height:14px;fill:none;stroke:currentColor;stroke-width:2;opacity:.4}
}
@media (max-width:700px){ #view{padding-bottom:calc(68px + env(safe-area-inset-bottom,0px))!important} body.r-review #view{padding-bottom:0!important} }