/* Nap planner (/tools/baby-nap-schedule/, /cs/nastroje/rezim-spanku-miminka/). Tokens come from page.css. */
main.narrow.tool-nap-planner{width:min(1040px,100% - 2*var(--gut))}
.tool-nap-planner .head .lede{max-width:40em}
.tool-nap-planner .prose{max-width:720px}

.np{margin:32px 0 12px;display:grid;gap:16px;grid-template-columns:minmax(0,1fr);overflow-wrap:break-word}
.np-noscript{margin:0;padding:14px 18px;border-radius:16px;background:rgba(231,168,87,.14);font-size:15px}
.np-sr{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* inputs */
.np-side{display:grid;gap:12px;align-content:start;min-width:0}
.np-priv{display:flex;gap:9px;align-items:flex-start;margin:0;padding:0 4px;font-size:14.5px;line-height:1.45;color:var(--ink2)}
.np-priv .ico{color:var(--caramel);margin-top:2px;width:17px;height:17px}
.np-inputs{display:grid;gap:24px;padding:20px;border-radius:22px;background:var(--paper);box-shadow:0 0 0 1px var(--line),0 10px 30px rgba(169,103,42,.12)}
.np-field{min-width:0}
.np-lab{display:block;margin:0 0 9px;font:600 12.5px/1.2 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--caramel)}
.np-input{display:block;width:100%;min-height:54px;padding:0 16px;border-radius:15px;border:1.5px solid rgba(169,103,42,.22);background:#fff;font:500 18px/54px var(--sans);color:var(--ink);-webkit-appearance:none;appearance:none;transition:border-color .2s,box-shadow .2s}
.np-input::-webkit-date-and-time-value{text-align:left}
.np-input:focus{outline:none;border-color:var(--honey);box-shadow:0 0 0 4px rgba(231,168,87,.28)}
.np-chips{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin:10px 0 0}
.np-chips-wake{grid-template-columns:repeat(5,minmax(0,1fr))}
.np-chip{flex:none;position:relative;display:inline-flex;align-items:center;justify-content:center;min-width:0;min-height:44px;padding:0 6px;border-radius:99px;border:0;background:var(--cream);color:var(--ink);font:600 15px/1 var(--sans);white-space:nowrap;cursor:pointer;transition:background .2s,transform .15s,box-shadow .2s;-webkit-user-select:none;user-select:none;touch-action:manipulation}
.np-chip input{position:absolute;inset:0;margin:0;opacity:0;cursor:pointer}
.np-chip:has(input:checked){background:var(--honey);box-shadow:0 6px 14px -8px rgba(169,103,42,.8)}
.np-chip:has(input:focus-visible),.np-chip:focus-visible{outline:2px solid var(--caramel);outline-offset:2px}
.np-chip:active{transform:scale(.95)}
.np-ageline{margin:12px 0 0;font-size:15px;line-height:1.45;color:var(--ink2)}
.np-ageline b{color:var(--ink);font-weight:650}
.np-link{display:inline-flex;align-items:center;min-height:44px;margin:4px 0 0;padding:0;border:0;background:none;color:var(--caramel);font:500 14.5px/1.35 var(--sans);text-align:left;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;cursor:pointer}
.np-pre-box{margin-top:6px;padding:14px 16px 12px;border-radius:16px;background:rgba(245,232,214,.6)}
.np-step{display:flex;gap:10px;align-items:center}
.np-step button{width:48px;height:48px;flex:none;border-radius:50%;border:0;background:var(--paper);box-shadow:0 0 0 1px rgba(169,103,42,.25);font:500 24px/1 var(--sans);color:var(--ink);cursor:pointer}
.np-step button:active{transform:scale(.94)}
.np-step input{width:76px;height:48px;border-radius:14px;border:1.5px solid rgba(169,103,42,.22);background:#fff;text-align:center;font:600 19px/1 var(--sans);color:var(--ink);-moz-appearance:textfield;appearance:textfield}
.np-step input::-webkit-inner-spin-button,.np-step input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
.np-step input:focus{outline:none;border-color:var(--honey);box-shadow:0 0 0 4px rgba(231,168,87,.28)}
.np-adjline{margin:10px 0 0;font-size:14px;line-height:1.45;color:var(--ink2)}
.np-adjline:empty{display:none}

.np-sum{display:none}
@media (max-width:899px){
  .np.folded .np-inputs{display:none}
  .np.folded .np-sum{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;min-height:56px;padding:0 8px 0 18px;border:0;border-radius:18px;background:var(--paper);box-shadow:0 0 0 1px var(--line),0 10px 30px rgba(169,103,42,.1);color:var(--ink2);font:500 15.5px/1.3 var(--sans);text-align:left;cursor:pointer}
  .np-sum b{color:var(--ink);font-weight:650}
  .np-sum-e{flex:none;display:inline-flex;align-items:center;min-height:40px;padding:0 16px;border-radius:99px;background:var(--cream);color:var(--ink);font-weight:600;font-size:14.5px}
  .np-sum:focus-visible{outline:3px solid var(--caramel);outline-offset:2px}
}
.np-dn{display:flex;flex-direction:column;gap:2px}

/* results column */
.np-main{display:grid;gap:14px;min-width:0;align-content:start}
.np-banner{margin:0;padding:12px 16px;border-radius:16px;background:rgba(27,31,53,.07);font-size:14.5px;line-height:1.45}

/* the Now card */
.np-now{position:relative;padding:20px 22px 22px;border-radius:28px;background:radial-gradient(110% 90% at 100% 0%,#FBE2BF 0%,rgba(251,226,191,0) 58%),var(--paper);box-shadow:0 0 0 1px var(--line),0 10px 30px rgba(169,103,42,.12);transition:box-shadow .5s,background .5s}
.np-now.glow{box-shadow:0 0 0 1px rgba(231,168,87,.55),0 0 0 6px rgba(231,168,87,.25),0 14px 34px rgba(169,103,42,.18)}
.np-now.is-napping{background:radial-gradient(90% 80% at 100% 0%,rgba(255,252,247,.55) 0%,rgba(255,252,247,0) 60%),linear-gradient(150deg,var(--honeyHi) 0%,var(--honey) 100%);box-shadow:0 14px 34px -10px rgba(169,103,42,.45)}
.np-now.is-after{background:radial-gradient(90% 90% at 100% 0%,#2C3150 0%,rgba(44,49,80,0) 60%),var(--night);color:var(--cream);box-shadow:0 14px 34px -14px rgba(27,31,53,.7)}
.np-now-top{display:flex;justify-content:space-between;align-items:center;gap:12px;min-height:40px;margin-bottom:6px}
.np-kick{font:600 12.5px/1.2 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--caramel)}
.is-napping .np-kick{color:var(--ink)}
.is-after .np-kick{color:var(--honey)}
.np-tag{display:inline-flex;align-items:center;min-height:26px;padding:0 11px;border-radius:99px;background:var(--cream);color:var(--ink2);font:600 12px/1 var(--sans);letter-spacing:.1em;text-transform:uppercase}
.np-badge{display:grid;place-items:center;flex:none;width:44px;height:44px;border-radius:50%;background:rgba(231,168,87,.2);color:var(--caramel)}
.np-badge .ico{width:24px;height:24px}
.is-napping .np-badge{background:rgba(255,252,247,.55);color:var(--ink)}
.is-after .np-badge{background:rgba(245,232,214,.12);color:var(--cream)}
.np-badge .np-zz{margin:0;font-size:17px;color:var(--ink)}
.np-big{margin:2px 0 8px;font:500 32px/1.08 var(--serif);letter-spacing:-.022em}
.np-big b{font-weight:600;color:var(--caramel)}
.is-napping .np-big b{color:var(--ink)}
.np-small{margin:0;font-size:15.5px;line-height:1.5;color:var(--ink2)}
.is-napping .np-small{color:var(--ink)}
.is-after .np-small{color:rgba(245,232,214,.78)}
.np-prog{height:6px;margin:16px 0 2px;border-radius:99px;background:rgba(169,103,42,.14);overflow:hidden}
.np-prog i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--honey),var(--caramel));transition:width .6s}
.np-note{margin:14px 0 0;padding:11px 14px;border-radius:15px;background:rgba(231,168,87,.15);font-size:14.5px;line-height:1.45;color:var(--ink)}
.is-napping .np-note{background:rgba(255,252,247,.5)}
.np-sug{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin:14px 0 0;padding:8px 8px 8px 16px;border-radius:18px;background:var(--cream);font-size:15px;font-weight:600}
.np-sug button{min-height:44px;padding:0 18px;border-radius:99px;border:0;background:var(--honey);color:var(--ink);font:600 15px/1 var(--sans);cursor:pointer}
.np-btn{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;min-height:56px;margin-top:18px;border:0;border-radius:18px;background:var(--ink);color:var(--paper);font:600 17px/1 var(--sans);cursor:pointer;box-shadow:0 12px 24px -14px rgba(42,31,26,.7);transition:transform .15s,background .2s}
.np-btn:active{transform:scale(.985)}
.np-btn:focus-visible,.np-act:focus-visible,.np-pill:focus-visible,.np-sug button:focus-visible,.np-same:focus-visible{outline:3px solid var(--caramel);outline-offset:3px}
.np-btn .ico{width:21px;height:21px}
.np-btn .np-zz{margin:0;color:var(--honey);font-size:17px}
.is-napping .np-btn{background:var(--paper);color:var(--ink)}
.is-napping .np-btn .ico{color:var(--caramel)}
.is-after .np-btn{background:var(--honey);color:var(--ink)}
.np-quick{margin-top:16px}
.np-same{display:inline-flex;align-items:center;gap:9px;min-height:52px;padding:0 20px;border-radius:99px;border:0;background:var(--honey);color:var(--ink);font:600 16px/1 var(--sans);cursor:pointer;box-shadow:0 10px 22px -12px rgba(169,103,42,.8)}

/* little floating z's */
.np-zz{display:inline-flex;align-items:flex-end;gap:1px;margin-left:8px;font:italic 500 15px/1 var(--serif);color:var(--ink)}
.np-zz i{display:inline-block;font-style:italic}
.np-zz i:nth-child(2){font-size:.85em}
.np-zz i:nth-child(3){font-size:.7em}

/* day ribbon */
.np-ribbon{padding:4px 14px 0;border-radius:22px;background:var(--paper);box-shadow:0 0 0 1px var(--line),0 10px 30px -18px rgba(169,103,42,.35);min-height:100px}
.np-ribbon svg{display:block;max-width:100%;height:auto;overflow:visible}
.np-r-track{fill:var(--cream)}
.np-r-sweet{fill:var(--honey);opacity:.25}
.np-r-nap{fill:var(--paper);stroke:var(--honey);stroke-width:2;stroke-dasharray:5 4}
.np-r-nap.solid{fill:var(--honey);stroke:none}
.np-r-nap.ghost{opacity:.5}
.np-r-quiet{fill:var(--cream);stroke:var(--caramel);stroke-width:1.5;stroke-dasharray:4 4}
.np-r-night{fill:var(--night)}
.np-r-night.rough{fill:rgba(27,31,53,.62);stroke:var(--night);stroke-width:2;stroke-dasharray:6 4}
.np-r-bed{fill:none;stroke:var(--cream);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.np-r-zzz{font:italic 500 15px var(--serif);fill:var(--cream)}
.np-r-sun circle{fill:var(--honey)}
.np-r-sun path{stroke:var(--honey);stroke-width:2;stroke-linecap:round}
.np-r-tick{stroke:rgba(42,31,26,.22)}
.np-r-lab{font:500 13px var(--sans);fill:var(--muted);text-anchor:middle}
.np-r-now{stroke:var(--ink);stroke-width:2;stroke-linecap:round}
.np-r-dot{fill:var(--honey);stroke:var(--paper);stroke-width:2;transform-box:fill-box;transform-origin:center}
.np-r-nowl{font:650 12.5px var(--sans);fill:var(--ink);text-anchor:middle}

/* schedule rail */
.np-rail{position:relative;list-style:none;margin:4px 0 0;padding:0 0 0 30px}
.np-rail::before{content:"";position:absolute;left:11px;top:24px;bottom:34px;width:2px;border-radius:2px;background:rgba(169,103,42,.32)}
.np-rail>li{position:relative;margin:0}
.np-dot{position:absolute;left:-25px;top:30px;width:12px;height:12px;border-radius:50%;border:2px solid var(--caramel);background:var(--paper)}
.np-wake .np-dot{top:18px;border-color:var(--honey);background:var(--honey)}
.k-done .np-dot{background:var(--caramel)}
.k-live .np-dot{background:var(--honey);border-color:var(--honey);box-shadow:0 0 0 4px rgba(231,168,87,.3)}
.k-assumed .np-dot{border-color:rgba(169,103,42,.45)}
.np-bed .np-dot{top:36px;background:var(--night);border-color:var(--night)}
.np-row{display:flex;align-items:center;gap:10px;min-height:48px;padding:0 6px 0 2px;border:0;border-radius:14px;background:none;font:500 16.5px/1.3 var(--sans);color:var(--ink);cursor:pointer;text-align:left}
.np-row .ico{width:22px;height:22px;color:var(--caramel)}
.np-row b{font-weight:650}
.np-row:focus-visible{outline:3px solid var(--caramel);outline-offset:1px}
.np-gap{padding:5px 2px 9px;font-size:14px;line-height:1.4;color:var(--muted)}
.np-card{position:relative;display:flex;flex-direction:column;justify-content:center;gap:3px;width:100%;min-height:72px;padding:13px 18px;border-radius:22px;border:2px dashed rgba(231,168,87,.95);background:var(--paper);color:var(--ink);font:inherit;text-align:left;cursor:pointer;transition:background-color .3s,box-shadow .2s,transform .15s}
button.np-card:active{transform:scale(.99)}
.np-card:focus-visible{outline:3px solid var(--caramel);outline-offset:2px}
.np-t{font-size:16px;line-height:1.35}
.np-t b{font-weight:650}
.np-s{font-size:14px;line-height:1.4;color:var(--ink2)}
.np-s b{font-weight:650;color:var(--ink)}
.np-flag{display:inline-block;margin-left:3px;padding:2px 8px;border-radius:99px;background:rgba(169,103,42,.12);color:var(--caramel);font:650 11px/1.5 var(--sans);letter-spacing:.05em;text-transform:uppercase;vertical-align:1px}
.k-assumed .np-card{border-color:rgba(231,168,87,.5);background:rgba(255,252,247,.6)}
.k-assumed .np-t{color:var(--ink2)}
.k-late .np-card{border-style:solid;background:rgba(231,168,87,.1)}
.k-live .np-card{min-height:84px;border:0;padding-right:128px;background:linear-gradient(135deg,var(--honey) 0%,var(--honeyHi) 100%);box-shadow:0 12px 26px -16px rgba(169,103,42,.8)}
.k-live .np-s{color:var(--ink)}
.np-pill{position:absolute;right:12px;top:20px;display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 16px;border-radius:99px;border:0;background:var(--paper);color:var(--ink);font:600 14.5px/1 var(--sans);cursor:pointer;box-shadow:0 6px 14px -8px rgba(60,30,10,.55)}
.np-pill .ico{width:18px;height:18px;color:var(--caramel)}
.k-done .np-card{flex-direction:row;align-items:center;justify-content:flex-start;gap:12px;border:0;background:rgba(169,103,42,.14);box-shadow:inset 4px 0 0 var(--caramel)}
.np-ck{display:grid;place-items:center;flex:none;width:28px;height:28px;border-radius:50%;background:var(--caramel);color:var(--paper)}
.np-ck .ico{width:16px;height:16px;stroke-width:2.8}
.is-bridge .np-card{min-height:56px;padding:9px 16px;border-style:dotted;border-width:2.5px}
.is-bridge .np-dot{top:22px;width:10px;height:10px;left:-24px}
.is-quiet .np-card{cursor:default;border:2px dashed rgba(169,103,42,.35);background:var(--cream)}
.np-bed .np-card{min-height:88px;padding:18px 18px 18px 66px;border:0;background:radial-gradient(80% 120% at 100% 0%,#2C3150 0%,rgba(44,49,80,0) 70%),var(--night);color:var(--cream);cursor:default;overflow:hidden;box-shadow:0 14px 30px -18px rgba(27,31,53,.8)}
.np-bedico{position:absolute;left:18px;top:20px;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:rgba(245,232,214,.12)}
.np-bedico .ico{width:20px;height:20px}
.np-bed .np-t{padding-right:44px;font:500 21px/1.2 var(--serif);letter-spacing:-.01em}
.np-bed .np-t b{font-weight:500}
.np-bed .np-s{color:rgba(245,232,214,.75)}
.np-fit{display:block;margin-top:9px;padding-top:9px;border-top:1px solid rgba(245,232,214,.16);font-size:14px;line-height:1.45;color:var(--cream)}
.np-zzz{position:absolute;right:18px;top:14px;font:italic 400 23px/1 var(--serif);letter-spacing:.03em;color:rgba(245,232,214,.42)}
.np-add{padding:8px 0 0}
.np-addbtn{min-height:44px;padding:0 6px;border:0;border-radius:12px;background:none;color:var(--caramel);font:600 15px/1 var(--sans);cursor:pointer}
.np-addbtn:focus-visible{outline:3px solid var(--caramel);outline-offset:1px}
@keyframes np-flash{0%,30%{background-color:rgba(231,168,87,.5)}}
.flash>.np-card{animation:np-flash 1.5s ease-out}
@keyframes np-flash-night{0%,30%{box-shadow:0 0 0 5px rgba(231,168,87,.75),0 14px 30px -18px rgba(27,31,53,.8)}}
.np-bed.flash>.np-card{animation:np-flash-night 1.5s ease-out}

/* inline editor */
.np-edit{margin:10px 0 6px;padding:16px;border-radius:20px;background:var(--paper);box-shadow:0 0 0 1px var(--line),0 16px 34px -22px rgba(60,30,10,.55)}
.np-edit-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px}
.np-edit label span{display:block;margin-bottom:6px;font:600 12px/1.2 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.np-edit input{display:block;width:100%;min-height:50px;padding:0 10px;border-radius:13px;border:1.5px solid rgba(169,103,42,.25);background:#fff;color:var(--ink);font:500 17px/50px var(--sans);-webkit-appearance:none;appearance:none}
.np-edit input:focus{outline:none;border-color:var(--honey);box-shadow:0 0 0 4px rgba(231,168,87,.28)}
.np-hint{margin:8px 0 0;font-size:14px;line-height:1.4;color:var(--muted)}
.np-err{margin:8px 0 0;font-size:14px;font-weight:600;line-height:1.4;color:var(--rose)}
.np-err:empty{display:none}
.np-edit-btns{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.np-edit-btns button{min-height:48px;padding:0 20px;border-radius:99px;border:0;background:var(--cream);color:var(--ink);font:600 15px/1 var(--sans);cursor:pointer}
.np-edit-btns .np-save{background:var(--ink);color:var(--paper)}
.np-edit-btns .np-save:disabled{opacity:.3;cursor:not-allowed}
.np-edit-btns button:focus-visible{outline:3px solid var(--caramel);outline-offset:2px}

/* glance chips and the nap-count toggle */
.np-glance{margin-top:6px}
.np-count{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0 0 12px}
.np-count-l{margin-right:2px;font:600 12.5px/1 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--caramel)}
.np-pillr{position:relative;display:inline-flex;align-items:center;min-height:44px;padding:0 17px;border-radius:99px;background:var(--paper);box-shadow:0 0 0 1px rgba(169,103,42,.25);font:600 15px/1 var(--sans);cursor:pointer;transition:background .2s}
.np-pillr input{position:absolute;inset:0;margin:0;opacity:0;cursor:pointer}
.np-pillr:has(input:checked){background:var(--honey);box-shadow:none}
.np-pillr:has(input:focus-visible){outline:3px solid var(--caramel);outline-offset:2px}
.np-count-s{font-size:14px;color:var(--muted)}
.np-chipg{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.np-chipv{position:relative;display:flex;flex-direction:column;gap:2px;min-width:0;padding:13px 14px 14px;border-radius:18px;background:var(--paper);box-shadow:0 0 0 1px var(--line);overflow:hidden}
.np-cl{font:600 11.5px/1.3 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.np-chipv b{margin-top:3px;font:500 22px/1.15 var(--serif);letter-spacing:-.01em;color:var(--ink);overflow-wrap:anywhere}
.np-cs{font-size:13.5px;line-height:1.35;color:var(--muted)}
.np-bar{position:absolute;left:0;right:0;bottom:0;height:4px;background:rgba(231,168,87,.2)}
.np-bar i{display:block;height:100%;background:var(--honey);border-radius:0 4px 4px 0}

/* coming up */
.np-sec{margin:12px 0 10px;font:500 25px/1.2 var(--serif);letter-spacing:-.015em}
.np-ups{display:grid;gap:12px}
.np-up{padding:18px 20px 16px;border-radius:22px;background:var(--paper);box-shadow:0 0 0 1px var(--line),0 10px 30px -20px rgba(169,103,42,.45)}
.np-up-k{font:600 11.5px/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--caramel)}
.np-up-t{display:block;margin:9px 0 4px;font:500 21px/1.2 var(--serif);letter-spacing:-.01em}
.np-up-a{margin:0 0 10px;font-size:14.5px;line-height:1.45;color:var(--ink2)}
.np-you{display:inline-block;margin-top:5px;padding:3px 11px;border-radius:99px;background:rgba(231,168,87,.24);color:var(--ink);font-size:13px;font-weight:650}
.np-up ul{margin:0 0 10px;padding-left:1.1em;font-size:14.5px;line-height:1.5}
.np-up li{margin:3px 0}
.np-up-tip{margin:0;padding-top:10px;border-top:1px solid var(--line);font-size:14.5px;line-height:1.5}

/* actions, toast */
.np-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
.np-act{display:inline-flex;align-items:center;gap:8px;min-height:48px;padding:0 18px;border-radius:99px;border:0;background:var(--paper);box-shadow:0 0 0 1px rgba(169,103,42,.25);color:var(--ink);font:600 15px/1 var(--sans);cursor:pointer;transition:background .2s,transform .15s}
.np-act:active{transform:scale(.97)}
.np-act .ico{color:var(--caramel)}
.np-toast{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom));z-index:70;width:max-content;max-width:min(440px,calc(100% - 32px));padding:14px 20px;border-radius:18px;background:var(--paper);color:var(--ink);font:500 15.5px/1.4 var(--sans);box-shadow:0 0 0 1px var(--line),0 18px 40px -12px rgba(169,103,42,.5);opacity:0;pointer-events:none;transform:translateX(-50%);transition:opacity .25s}
.np-toast.on{opacity:1}

/* static samples in the article */
.np-samples h3{margin-top:28px}
.np-line{margin:0 0 8px;padding:11px 15px;border-radius:15px;background:var(--paper);box-shadow:0 0 0 1px var(--line);font-size:15px;line-height:1.75;color:var(--muted)}
.np-line span{white-space:nowrap;color:var(--ink);font-weight:600}
.np-line b{font-weight:600;color:var(--caramel);font-size:12px;letter-spacing:.06em;text-transform:uppercase;margin-right:2px}

/* hover looks only where there is a real pointer (a tap must not leave a button stuck in its hover colour) */
@media (hover:hover){
  .np-chip:hover{background:#F0DDC4}
  .np-chip:has(input:checked):hover{background:var(--honey)}
  .np-btn:hover{background:#3A2D26}
  .is-napping .np-btn:hover{background:#FFF6EA}
  .is-after .np-btn:hover{background:var(--honeyHi)}
  .np-row:hover{background:rgba(231,168,87,.12)}
  button.np-card:hover{box-shadow:0 10px 24px -16px rgba(169,103,42,.6)}
  .np-addbtn:hover{background:rgba(231,168,87,.12)}
  .np-act:hover{background:#FFF6EA}
}

/* phones and small tablets: one column */
@media (max-width:899px){
  .np-ribbon{padding:4px 4px 0}
}
/* a phone on its side: the two fields sit next to each other so the card is half as tall */
@media (min-width:640px) and (max-width:899px){
  .np-inputs{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:28px;align-items:start}
}

/* motion, only for those who want it */
@media (prefers-reduced-motion:no-preference){
  .np-zz i{animation:np-float 2.4s ease-in-out infinite}
  .np-zz i:nth-child(2){animation-delay:.35s}
  .np-zz i:nth-child(3){animation-delay:.7s}
  .np-r-dot{animation:np-pulse 2s ease-in-out infinite}
  .np-enter>li{animation:np-in .18s ease-out both;animation-delay:calc(var(--i,0) * 40ms)}
  .np-toast{transform:translate(-50%,14px);transition:opacity .25s,transform .25s}
  .np-toast.on{transform:translate(-50%,0)}
  .np-now.glow .np-badge{animation:np-breathe 3s ease-in-out infinite}
}
@keyframes np-float{0%,100%{transform:translateY(0);opacity:.45}50%{transform:translateY(-5px);opacity:1}}
@keyframes np-pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.4)}}
@keyframes np-in{from{opacity:0;transform:translateX(-14px)}}
@keyframes np-breathe{0%,100%{box-shadow:0 0 0 0 rgba(231,168,87,.35)}50%{box-shadow:0 0 0 8px rgba(231,168,87,0)}}

@media (min-width:700px){
  .np-ups{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
}
@media (min-width:900px){
  .np{grid-template-columns:340px minmax(0,1fr);gap:28px;align-items:start;margin-top:40px}
  .np-side{position:sticky;top:88px}
  .np-now{padding:26px 30px 28px}
  .np-big{font-size:40px}
  .np-chipg{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:380px){
  .np-inputs{padding:18px 16px}
  .np-now{padding:18px 18px 20px}
  .np-big{font-size:29px}
  .k-live .np-card{padding-right:18px;padding-bottom:64px}
  .k-live .np-pill{top:auto;bottom:12px;left:18px;right:auto}
}
.np-bridge .bridge{margin:0}