/* "Planos": the app's new plan flow (NewPlanFlow: time, books, reminder, summary, creation card) in the phone, and the
   carousel of book pills above it. Laid out at 402 x 874 pt inside .app402 (scaled with --k), so every number here is the app's own:
   Theme.Space / Radius / Size / Typography values (design/tokens.json). */

/* ── carousel of every book (Book3D, one row, always moving) ── */
.bk-row { position: relative; margin: 34px auto 0; width: min(100%, 1180px); height: 64px; overflow: hidden; pointer-events: none; user-select: none;
  -webkit-mask: linear-gradient(90deg, transparent 0, #000 14%, #000 86%, transparent 100%); mask: linear-gradient(90deg, transparent 0, #000 14%, #000 86%, transparent 100%); }
.bk-track { position: absolute; left: 0; top: 0; display: flex; gap: 10px; padding: 8px 5px; width: max-content; animation: bk-run var(--bk-time, 160s) linear infinite; animation-play-state: paused; }
.bk-row.is-on .bk-track { animation-play-state: running; }
.bk-item { flex: none; display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 4px 14px 4px 4px; border-radius: 999px; background: #fff;
  box-shadow: 0 6px 16px -6px rgba(0,0,0,.16), 0 1px 3px rgba(0,0,0,.06), inset 0 0 0 1px rgba(255,255,255,1); }
.bk-item i { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; flex: none; box-shadow: inset 0 1px 2px rgba(255,255,255,.35), inset 0 -2px 4px rgba(0,0,0,.18); }
.bk-item svg { width: 22px; height: 22px; display: block; } /* no drop-shadow: 132 filtered SVGs moving all the time cost more than the 1px shadow showed */
.bk-item span { font-size: 15px; letter-spacing: -.2px; color: #2b2b2b; font-weight: 500; white-space: nowrap; }
@keyframes bk-run { to { transform: translateX(-50%); } }

/* ── the phone ── */
.np { --np-top: 62px; background: #fff; }
.np .tile--new { transition: transform 260ms var(--ease-q); }
.np .tile--new.is-pressed { transform: scale(.95); }
.np-scrim { position: absolute; inset: 0; z-index: 30; background: #000; opacity: 0; pointer-events: none; transition: opacity 520ms var(--ease-q); }
.np.is-open .np-scrim { opacity: .24; }
.np-sheet { position: absolute; z-index: 31; left: 0; right: 0; top: var(--np-top); bottom: 0; background: #fff; border-radius: 38px 38px 0 0; overflow: hidden;
  box-shadow: 0 -2px 30px rgba(0,0,0,.16); transform: translateY(105%); transition: transform 560ms cubic-bezier(.32,.9,.3,1); }
.np.is-open .np-sheet { transform: none; }
.np.is-closing .np-sheet { transition-duration: 460ms; transition-timing-function: cubic-bezier(.5,0,.75,.4); }
.np-touch { z-index: 70; transition: opacity 200ms, transform 160ms var(--ease-q); }
.np-touch.is-down { transform: scale(.82); }

/* native bar: back, progress (DayProgressBar, 160 x 8) and close; the pages slide under it */
.np-bar { position: absolute; z-index: 6; left: 0; right: 0; top: 0; height: 60px; pointer-events: none; }
.np-bar::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 84px; background: linear-gradient(#fff 62%, rgba(255,255,255,0)); }
.np-bar .gbtn { position: absolute; top: 8px; }
.np-bar .np-back { left: 16px; opacity: 0; transform: scale(.6); transition: opacity 300ms, transform 450ms cubic-bezier(.3,1.4,.5,1); }
.np-bar .np-back.is-on { opacity: 1; transform: none; }
.np-bar .np-x { right: 16px; }
.np-bar .gbtn svg { width: 17px; height: 17px; }
.np-prog { position: absolute; left: 50%; top: 26px; width: 160px; height: 8px; margin-left: -80px; border-radius: 99px; background: rgba(0,0,0,.12); overflow: hidden; }
.np-prog i { position: absolute; left: 0; top: 0; bottom: 0; width: 25%; border-radius: 99px; background: #F4B400; transition: width 600ms var(--ease-q); }

.np-page { position: absolute; inset: 0; background: #fff; transition: transform 520ms cubic-bezier(.3,.9,.3,1); }
.np-page.is-ahead { transform: translateX(100%); box-shadow: -10px 0 30px rgba(0,0,0,.08); }
.np-page.is-behind { transform: translateX(-30%); }
.np-page::after { content: ""; position: absolute; inset: 0; background: #000; opacity: 0; pointer-events: none; transition: opacity 520ms; }
.np-page.is-behind::after { opacity: .08; }
.np-scroll { position: absolute; inset: 0; overflow: hidden; }
.np-body { padding: 68px 20px 24px; transition: transform 900ms cubic-bezier(.3,.8,.3,1); }
.np-title { margin: 0 0 20px; font-family: var(--serif); font-size: 30px; font-weight: 700; line-height: 36px; text-align: center; color: #000; text-wrap: balance; }
.np-stack { display: flex; flex-direction: column; gap: 20px; }

/* safeAreaBar(edge: .bottom): the actions, 8 pt of air above and below, over the home indicator's 34 pt */
.np-actions { position: absolute; z-index: 4; left: 0; right: 0; bottom: 0; padding: 8px 20px 42px; display: flex; flex-direction: column; gap: 4px;
  background: linear-gradient(rgba(255,255,255,0), #fff 28px); }
.np-cta { position: relative; height: 56px; width: 100%; border-radius: 99px; display: flex; align-items: center; justify-content: center; color: #000; font-size: 17px; font-weight: 600; letter-spacing: -.2px; flex: none;
  background: linear-gradient(to bottom, rgba(249,233,189,0) 35%, rgba(249,233,189,.42) 100%), linear-gradient(#FFD21F, #F7B400 70%);
  box-shadow: inset 0 0 0 .6px rgba(0,0,0,.16), inset 0 1px 0 rgba(249,233,189,.7), inset 0 5px 4px -3px rgba(249,233,189,.8), inset 0 0 6px 2px rgba(211,156,10,.25), 0 2px 4px rgba(211,156,10,.4);
  transition: transform 220ms var(--ease-q), background 300ms, color 300ms; }
.np-cta.is-pressed { transform: scale(.96); }
.np-cta.is-disabled { background: #E2DED5; color: #7E7A72; box-shadow: inset 0 0 0 .6px rgba(0,0,0,.12); }
.np-text { height: 44px; display: flex; align-items: center; justify-content: center; font-size: 17px; font-weight: 600; color: #615D56; letter-spacing: -.2px; }
.np-text.is-pressed { opacity: .7; }

/* SelectableChipStyle */
.np-chips { display: flex; gap: 8px; }
.np-chip { flex: 1; min-width: 44px; min-height: 44px; padding: 0 16px; border-radius: 99px; display: flex; align-items: center; justify-content: center; font-size: 15px; font-weight: 500; letter-spacing: -.2px; color: #000;
  background: linear-gradient(#fff, #F7F7F6); box-shadow: inset 0 0 0 .5px rgba(0,0,0,.1); transition: box-shadow 250ms, background 250ms; }
.np-chip.is-on { background: linear-gradient(#F9E9BD, #fff); box-shadow: inset 0 0 0 1.5px #F4B400; }
.np-chip--circle { flex: none; width: 44px; height: 44px; padding: 0; border-radius: 50%; }

/* MinutesDial and TimeOfDayDial: 300 pt, ring 22, knob 40 */
.np-dial { position: relative; width: 300px; height: 300px; margin: 0 auto; flex: none; }
.np-dial canvas { position: absolute; inset: 0; width: 300px; height: 300px; }
.np-knob { position: absolute; left: 130px; top: 130px; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; will-change: transform;
  background: rgba(255,255,255,.62); -webkit-backdrop-filter: blur(10px) saturate(1.5); backdrop-filter: blur(10px) saturate(1.5);
  box-shadow: inset 0 0 0 .6px rgba(0,0,0,.12), inset 0 1.5px 0 #fff, inset 0 0 12px rgba(0,0,0,.06), 0 4px 16px rgba(0,0,0,.08); transition: scale 220ms cubic-bezier(.3,1.4,.5,1); }
.np-knob.is-drag { scale: 1.2; box-shadow: inset 0 0 0 .6px rgba(0,0,0,.12), inset 0 1.5px 0 #fff, inset 0 0 12px rgba(0,0,0,.06), 0 6px 24px rgba(0,0,0,.08); }
.np-knob svg { width: 16px; height: 16px; }
.np-knob .sun { color: #6F551D; }
.np-knob .moon { color: #615D56; }
.np-dial-c { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; pointer-events: none; }
.np-num { font-family: var(--serif); font-size: 64px; font-weight: 700; line-height: 1.15; font-variant-numeric: tabular-nums; color: #000; }
.np-clock { font-family: var(--serif); font-size: 44px; font-weight: 700; line-height: 1.2; font-variant-numeric: tabular-nums; color: #000; }
.np-unit { font-size: 16px; line-height: 21px; color: #615D56; }

/* books: filters, SearchField (glass capsule, 44), 3 columns of NewPlanBookCell */
.np-search { height: 44px; padding: 0 16px; border-radius: 99px; display: flex; align-items: center; gap: 8px; font-size: 17px; color: rgba(60,60,67,.6); letter-spacing: -.3px;
  background: rgba(255,255,255,.6); -webkit-backdrop-filter: blur(14px) saturate(1.5); backdrop-filter: blur(14px) saturate(1.5);
  box-shadow: inset 0 0 0 .5px #CBC7BF, 0 2px 8px rgba(0,0,0,.05); }
.np-search svg { width: 17px; height: 17px; color: #7E7A72; flex: none; }
.np-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 12px; row-gap: 16px; align-items: start; }
.np-cell { position: relative; padding: 8px 4px; border-radius: 16px; display: flex; flex-direction: column; align-items: center; gap: 4px; transition: background 250ms, transform 200ms var(--ease-q); }
.np-cell.is-on { background: #F7F7F6; }
.np-cell.is-dim { opacity: .5; }
.np-cell.is-home { opacity: .6; }
.np-cell.is-pressed { transform: scale(.97); }
.np-cover { position: relative; width: 100px; height: 78.26px; transform: scale(.88); transform-origin: 50% 100%; flex: none; }
.np-cover canvas, .np-cover img { position: absolute; display: block; }
.np-texts { width: 100%; min-height: 77px; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.np-name { font-family: var(--serif); font-size: 17px; font-weight: 600; line-height: 22px; text-align: center; color: #000; max-width: 100%; text-wrap: balance;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.np-cap { font-size: 12px; line-height: 16px; color: #615D56; white-space: nowrap; }
.np-cell .status-pill { padding-right: 8px; padding-left: 8px; }
.np-cell .status-pill.started { padding-left: 6px; }
.np-sel { position: absolute; top: 6px; right: 6px; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; box-shadow: inset 0 0 0 .5px #CBC7BF; transition: background 250ms, box-shadow 250ms, transform 300ms cubic-bezier(.3,1.4,.5,1); }
.np-sel svg { width: 12px; height: 12px; color: #000; opacity: 0; transform: scale(.4); transition: opacity 200ms, transform 300ms cubic-bezier(.3,1.4,.5,1); }
.np-cell.is-on .np-sel { background: #F4B400; box-shadow: none; }
.np-cell.is-on .np-sel svg { opacity: 1; transform: none; }

/* reminder: weekday chips, notification preview */
.np-week { display: flex; justify-content: space-between; }
.np-week > span { flex: 1; display: flex; justify-content: center; }
.np-prev-l { font-size: 12px; font-weight: 600; line-height: 16px; color: #615D56; margin-bottom: 8px; }
.np-prev { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 24px; background: #F7F7F6; box-shadow: inset 0 0 0 .5px #CBC7BF; }
.np-prev img { width: 44px; height: 44px; border-radius: 10px; flex: none; }
.np-prev b { display: block; font-size: 15px; font-weight: 600; line-height: 20px; color: #000; }
.np-prev span { display: block; font-size: 13px; line-height: 18px; color: #615D56; }

/* summary: cover (glass, 220), info rows */
.np-cover-card { position: relative; height: 220px; border-radius: 24px; overflow: hidden; background: #fff; padding: 16px;
  box-shadow: inset 0 0 0 .5px rgba(0,0,0,.16), 0 6px 24px rgba(0,0,0,.08); }
.np-cover-card .tint { position: absolute; inset: 0; background: linear-gradient(to top, var(--tint, #D6E1FF), transparent); }
.np-cover-card canvas { position: absolute; inset: 0; width: 100%; height: 100%; -webkit-mask: linear-gradient(to bottom, transparent 60%, #000 100%); mask: linear-gradient(to bottom, transparent 60%, #000 100%); }
.np-cover-card .scrim { position: absolute; inset: 0; background: linear-gradient(to top, rgba(255,255,255,0) 45%, rgba(255,255,255,.7) 100%); }
.np-cover-card h3 { position: relative; margin: 0; font-family: var(--serif); font-size: 30px; font-weight: 600; line-height: 36px; color: #000; }
.np-rows { display: flex; flex-direction: column; gap: 24px; }
.np-grp { display: flex; flex-direction: column; gap: 20px; }
.np-row { display: flex; align-items: baseline; gap: 12px; }
.np-row > svg { width: 20px; height: 20px; flex: none; align-self: flex-start; margin-top: 1.5px; color: #000; }
.np-row > p { margin: 0; flex: 1; font-size: 17px; line-height: 22px; letter-spacing: -.3px; color: #000; }
.np-row.is-2nd > p { font-size: 16px; line-height: 21px; letter-spacing: -.2px; color: #615D56; }
.np-row .alt { font-size: 17px; font-weight: 600; letter-spacing: -.2px; color: #000; min-height: 44px; display: flex; align-items: center; margin: -12px 0; }
.np-hr { height: .5px; background: #CBC7BF; }

/* NewPlanCreationCard (floatingCardSurface) */
.np-card { display: flex; align-items: center; gap: 12px; padding: 16px; margin-bottom: 4px; border-radius: 24px; background: #fff; box-shadow: 0 8px 48px rgba(0,0,0,.16); }
.np-card .bk { position: relative; width: 56px; height: 43.8px; flex: none; }
.np-card .tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.np-card b { font-size: 17px; font-weight: 600; line-height: 22px; letter-spacing: -.3px; }
.np-bar6 { height: 6px; border-radius: 99px; background: rgba(0,0,0,.12); overflow: hidden; position: relative; }
.np-bar6 i { position: absolute; left: 0; top: 0; bottom: 0; width: 6px; border-radius: 99px; background: #F4B400; transition: width 420ms ease-out; }
.np-card small { font-size: 13px; line-height: 18px; color: #615D56; }
.np-actions .np-swap { position: relative; }
.np-actions .np-swap > * { transition: opacity 320ms, transform 520ms cubic-bezier(.3,.9,.3,1); }
.np-actions .np-swap .np-card { position: absolute; left: 0; right: 0; bottom: 0; opacity: 0; transform: translateY(40px); pointer-events: none; }
.np-actions .np-swap.is-creating .np-cta { opacity: 0; transform: translateY(24px); }
.np-actions .np-swap.is-creating .np-card { opacity: 1; transform: none; }

/* the new plan on the Home */
.np .tile.is-new { animation: np-tile 700ms cubic-bezier(.2,.9,.25,1) both; }
@keyframes np-tile { from { opacity: 0; transform: translateY(26px) scale(.97); } }

.np { animation: np-in 500ms ease both; }
@keyframes np-in { from { opacity: 0; } }

/* glass without backdrop-filter (see styles.css): a little more opaque */
.np-knob, .np-search { background: rgba(255,255,255,.88); }