/* v3.42: plans. A part the plan leaves out: its place in the menu, its screen (an example beside the plan that has it),
   the plan above in Settings. */
.nav a.locked{color:var(--ink-3)}
.nav a.locked:hover{color:var(--ink-2)}
.nav a.locked.cur{color:var(--ink)}
.nav-lock{margin-inline-start:auto;display:grid;place-items:center;color:var(--ink-3)}
.nav-lock svg.i{width:13px;height:13px;stroke-width:2}
:root[data-rail="1"] .nav-lock{display:none}
@media (max-width:1100px){.nav-lock{display:none}}
.bm-item .bm-n.bm-lock{display:grid;place-items:center;min-width:0;padding:0;background:none;color:var(--ink-3)}
.bm-item .bm-lock svg{width:15px;height:15px}
.more-h{margin:14px 4px 4px;font-size:var(--fs-meta);font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}

.tz{display:grid;grid-template-columns:minmax(0,1fr) minmax(340px,420px);gap:24px;align-items:start;max-width:1180px}
.tz-prev{position:relative;max-height:520px;overflow:hidden;padding:20px;border:1px solid var(--card-line);border-radius:var(--r-card);background:var(--card);pointer-events:none;user-select:none}
.tz-prev::after{content:"";position:absolute;inset:auto 0 0 0;height:120px;background:linear-gradient(to bottom,transparent,var(--card))}
.tz-top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}
.tz-top b{font-size:var(--fs-lg);font-weight:500}
.tz-rows{display:grid}
/* one grid for every row: the chips share a left edge, and so does what follows them */
.tz-row{display:grid;grid-template-columns:28px minmax(0,1fr) 96px 200px;align-items:center;gap:12px;min-height:60px;padding:10px 0;border-top:1px solid var(--line)}
.tz-row .chip{justify-self:start}
.tz-row:first-child{border-top:0}
.tz-m b{display:block;font-size:var(--fs-body);font-weight:500}
.tz-m small{display:block;font-size:var(--fs-sm);color:var(--ink-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tz-meta{min-width:0;font-size:var(--fs-sm);color:var(--ink-2);text-align:start;font-variant-numeric:tabular-nums;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tz-num .tz-row{grid-template-columns:28px minmax(0,1fr) 96px 80px}
.tz-num .tz-meta{text-align:end;color:var(--ink)}
.tz-figs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;margin-bottom:14px;border:1px solid var(--line);border-radius:var(--r-ctl);background:var(--line);overflow:hidden}
.tz-figs div{padding:12px 14px;background:var(--card)}
.tz-figs small{display:block;font-size:var(--fs-meta);color:var(--ink-3)}
.tz-figs b{display:block;margin-top:2px;font-size:var(--fs-title);font-weight:600;letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.tz-week{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;min-height:300px}
.tz-day{display:flex;flex-direction:column;gap:8px;padding:10px;border-radius:var(--r-ctl);background:var(--panel)}
.tz-day>small{font-size:var(--fs-meta);font-weight:500;color:var(--ink-3)}
.tz-appt{padding:8px 10px;border-radius:var(--r-chip);background:var(--raise);border-inline-start:2px solid var(--ok-ink)}
.tz-appt b{display:block;font-size:var(--fs-meta);font-weight:500;font-variant-numeric:tabular-nums}
.tz-appt span{display:block;font-size:var(--fs-sm)}
.tz-appt small{display:block;font-size:var(--fs-meta);color:var(--ink-3)}
.tz-chat{display:flex;flex-direction:column;gap:10px}
.tz-me{align-self:flex-end;max-width:70%;margin:0;padding:8px 12px;border-radius:var(--r-ctl);background:var(--select);font-size:var(--fs-body)}
.tz-card{max-width:78%;padding:14px;border:1px solid var(--line-2);border-radius:var(--r-ctl);background:var(--panel)}
.tz-card small{display:block;font-size:var(--fs-meta);color:var(--ink-3)}
.tz-card b{display:block;margin-top:2px;font-size:var(--fs-body);font-weight:500}
.tz-card>span{display:block;margin-top:2px;font-size:var(--fs-sm);color:var(--ink-3)}
.tz-btns{display:flex;gap:8px;margin-top:12px}

.plan-lock{padding:28px}
.tz .plan-lock{position:sticky;top:16px}
.plan-lock .ic{display:grid;place-items:center;width:36px;height:36px;border-radius:var(--r-ctl);background:var(--raise);color:var(--ink-2)}
.plan-lock .ic svg.i{width:18px;height:18px}
.plan-lock h2{margin-top:18px;font-size:var(--fs-title);font-weight:600;letter-spacing:-.01em;line-height:1.3;text-wrap:balance}
.plan-lock .lead{margin-top:6px;font-size:var(--fs-body);color:var(--ink-3);text-wrap:pretty}
.plan-adds{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.plan-adds li{display:flex;align-items:flex-start;gap:10px;font-size:var(--fs-sm);font-weight:400;color:var(--ink-2);line-height:20px}
.plan-adds svg.i{flex:none;width:14px;height:14px;margin-top:3px;stroke-width:2.25;color:var(--ok-ink)}
.plan-adds-h{margin-top:22px;padding-top:22px;border-top:1px solid var(--line);font-size:var(--fs-meta);color:var(--ink-3)}
.plan-lock .plan-adds{margin-top:12px}
.plan-foot{display:flex;align-items:center;gap:16px;margin-top:26px}
.plan-foot .l{flex:1;min-width:0}
.plan-foot b{display:block;font-size:var(--fs-lg);font-weight:500;font-variant-numeric:tabular-nums}
.plan-foot small{display:block;margin-top:1px;font-size:var(--fs-sm);color:var(--ink-3)}
.srow.plan-up{align-items:flex-start}
.srow.plan-up .plan-adds{margin-top:10px}
.srow.plan-up .btn{margin-top:2px}
@media (max-width:1100px){
  .tz{grid-template-columns:minmax(0,1fr)}
  .tz .plan-lock{position:static;order:-1}
}
@media (max-width:720px){
  .plan-lock{padding:22px 20px}
  .plan-foot{flex-direction:column;align-items:stretch;gap:14px}
  .srow.plan-up{flex-direction:column;align-items:stretch}
  .tz-prev{max-height:380px;padding:16px}
  .tz-row,.tz-num .tz-row{grid-template-columns:28px minmax(0,1fr) auto}
  .tz-row .chip{justify-self:end}
  .tz-meta,.tz-num .tz-meta{grid-column:2 / -1;text-align:start;margin-top:-6px;white-space:normal}
  .tz-figs{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tz-week{grid-template-columns:repeat(3,minmax(0,1fr));min-height:0}
  .tz-day:nth-child(n+4){display:none}
  .tz-me,.tz-card{max-width:100%}
}