/* Direction B — iPhone reading companion
   "Today is Day X · here's what to do now" — mobile-first, paper-feel preserved */

.B-frame{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--body);
  font-size:.92rem;
  line-height:1.55;
  position:relative;
  /* No inner overflow on mobile — let body scroll natively. The wrapper
     in mobile.html flattens this to height:auto, and an unused
     overflow-y:auto would still register as a scroll context on iOS
     Safari, fighting momentum and stealing pan gestures. */
  border-radius:28px;
  /* leave clearance so bottom tab bar never covers content on iOS */
  padding-bottom:calc(var(--safe-bottom) + 4.4rem);
}

.B-status-bar{
  display:flex;justify-content:space-between;align-items:center;
  padding:calc(.4rem + var(--safe-top)) calc(1.4rem + var(--safe-right)) .2rem calc(1.4rem + var(--safe-left));
  font-family:var(--mono);font-size:.78rem;font-weight:600;
  color:var(--ink);
}

/* Header — masthead-mini */
.B-head{
  padding:.6rem 1rem .8rem;
  border-bottom:3px double var(--ink);
  display:flex;justify-content:space-between;align-items:center;
  background:var(--paper);
  position:sticky;top:0;z-index:20;
  /* Promote to its own composite layer so sticky doesn't trigger paint
     of everything behind it on every scroll frame. */
  will-change:transform;
  transform:translateZ(0);
}
.B-head .brand{
  font-family:var(--serif);font-weight:900;
  font-size:.85rem;letter-spacing:.22em;
  color:var(--ink);text-decoration:none;
  padding:.2rem;margin:-.2rem;border-radius:6px;
}
.B-head .brand:active{background:var(--paper-deep)}
.B-head .brand .dot{color:var(--accent);font-style:italic}
.B-head .meta{
  font-family:var(--mono);font-size:.62rem;letter-spacing:.15em;color:var(--ink-mute);text-transform:uppercase;
  background:transparent;border:none;cursor:pointer;
  padding:.3rem .5rem;margin:-.3rem -.5rem;border-radius:6px;
}
.B-head .meta:active{background:var(--paper-deep);color:var(--ink)}
.B-head .menu{
  display:flex;flex-direction:column;justify-content:center;gap:4px;
  width:40px;height:40px;padding:10px 8px;cursor:pointer;
  background:transparent;border:none;border-radius:8px;
  margin:-8px;
}
.B-head .menu span{display:block;height:1.5px;background:var(--ink);transition:transform var(--dur-fast) var(--ease-out), opacity var(--dur-fast) var(--ease-out)}
.B-head .menu:hover{background:var(--paper-deep)}

/* HERO — TODAY IS DAY X */
.B-today{
  padding:.85rem 1rem 1rem;
  border-bottom:1px solid var(--ink);
  position:relative;overflow:hidden;
  background:
    radial-gradient(circle at 12% 0%, rgba(196,137,43,.16), transparent 34%),
    linear-gradient(180deg, rgba(255,255,255,.34), rgba(244,236,216,0) 42%);
}
.B-today::after{
  content:attr(data-bg);
  position:absolute;font-family:var(--serif);font-weight:900;font-style:italic;
  font-size:14rem;line-height:.8;
  bottom:-2.5rem;right:-2rem;color:var(--accent);opacity:.06;
  pointer-events:none;letter-spacing:-.04em;
}
.B-today .kicker{
  font-family:var(--serif);font-size:.65rem;letter-spacing:.32em;
  text-transform:uppercase;color:var(--accent);font-weight:700;
  display:flex;align-items:center;gap:.6rem;margin-bottom:.8rem;
}
.B-today .kicker::after{content:"";flex:1;height:1px;background:var(--ink)}
.B-today .day-line{
  display:flex;align-items:baseline;gap:.6rem;margin-bottom:.4rem;
}
.B-today .day-num{
  font-family:var(--serif);font-style:italic;font-weight:900;
  font-size:3.6rem;line-height:.85;color:var(--accent);letter-spacing:-.04em;
  background:transparent;border:none;padding:0;cursor:pointer;
  text-align:left;
  transition:transform var(--dur-fast) var(--ease-out);
}
.B-today .day-num:active{transform:scale(.96)}
.B-today .day-of{
  font-family:var(--mono);font-size:.7rem;color:var(--ink-mute);letter-spacing:.15em;
}
.B-today h1{
  font-family:var(--serif);font-weight:900;
  font-size:1.3rem;line-height:1.25;margin-bottom:.35rem;letter-spacing:-.02em;
}
.B-today .head-sub{
  font-family:var(--display);font-style:italic;
  font-size:.92rem;line-height:1.45;color:var(--ink-soft);margin-bottom:.85rem;
}
.B-today .meta-row{
  display:flex;gap:.4rem;flex-wrap:wrap;
  font-family:var(--mono);font-size:.58rem;letter-spacing:.1em;
  color:var(--ink-soft);text-transform:uppercase;
}
.B-today .meta-row span{
  border:1px solid var(--ink);padding:.22rem .5rem;background:var(--paper);
  border-radius:999px;
}
.B-today .meta-row span strong{color:var(--accent);font-family:var(--serif);font-style:italic;font-size:1.15em;letter-spacing:0;text-transform:none}

.B-mobile-brief{
  display:grid;grid-template-columns:1fr;
  gap:.45rem;margin:.75rem 0 .25rem;
}
.B-mobile-brief .brief-card{
  display:grid;grid-template-columns:4.2rem 1fr;align-items:start;gap:.55rem;
  padding:.58rem .7rem;
  border:1px solid rgba(26,22,18,.32);
  background:rgba(244,236,216,.72);
  border-radius:12px;
}
.B-mobile-brief .brief-card.urgent{
  border-color:var(--accent);
  background:rgba(168,35,29,.06);
}
.B-mobile-brief .brief-k{
  font-family:var(--mono);font-size:.58rem;letter-spacing:.14em;
  color:var(--ink-mute);text-transform:uppercase;
  padding-top:.1rem;
}
.B-mobile-brief strong{
  font-family:var(--serif);font-size:.82rem;line-height:1.38;
  color:var(--ink);font-weight:800;
  overflow-wrap:anywhere;
}
.B-mobile-brief .urgent strong{color:var(--accent)}

.B-pwa-state{
  display:grid;grid-template-columns:auto auto 1fr;align-items:center;gap:.45rem;
  margin:.65rem 0 0;padding:.45rem .58rem;
  border-radius:999px;
  background:rgba(26,22,18,.06);
  color:var(--ink-soft);
  font-family:var(--mono);font-size:.57rem;letter-spacing:.08em;
  text-transform:uppercase;
  overflow:hidden;
}
.B-pwa-state span{
  color:var(--paper);background:var(--moss);
  padding:.12rem .42rem;border-radius:999px;font-weight:700;
}
.B-pwa-state.offline span{background:var(--accent)}
.B-pwa-state strong{color:var(--ink);font-weight:700}
.B-pwa-state em{
  font-style:normal;color:var(--ink-mute);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}

/* NOW WIDGET — current step (rendered as <button> for "tap to jump") */
.B-now{
  display:block;width:100%;text-align:left;
  margin:1rem 0 0;padding:.9rem 1rem .85rem;
  background:var(--ink);color:var(--paper);
  position:relative;
  border:1px solid rgba(244,236,216,.18);border-radius:18px;cursor:pointer;
  box-shadow:0 14px 34px rgba(26,22,18,.20);
  font:inherit;font-family:var(--body);
  transition:transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.B-now:hover{box-shadow:0 18px 40px rgba(26,22,18,.24)}
.B-now:active{transform:scale(.99)}
.B-now::after{
  content:"↘";position:absolute;top:.7rem;right:.85rem;
  font-family:var(--mono);font-size:.78rem;color:var(--amber);opacity:.55;
  pointer-events:none;
}
.B-now .now-label{
  font-family:var(--mono);font-size:.6rem;letter-spacing:.25em;
  color:var(--amber);text-transform:uppercase;margin-bottom:.4rem;
  display:flex;align-items:center;gap:.4rem;
}
/* Live pulse: dot stays solid, transform-only animation (cheap, GPU). */
.B-now .now-label::before{
  content:"";width:8px;height:8px;border-radius:50%;
  background:var(--amber);
  position:relative;flex:none;
}
.B-now .now-label{position:relative}
.B-now .now-label::after{
  content:"";position:absolute;left:0;top:50%;
  width:8px;height:8px;border-radius:50%;
  background:var(--amber);
  transform:translateY(-50%) scale(1);
  animation:B-pulse 1.8s ease-out infinite;
  pointer-events:none;will-change:transform,opacity;
}
@keyframes B-pulse{
  0%  {transform:translateY(-50%) scale(1);   opacity:.55}
  70% {transform:translateY(-50%) scale(3.5); opacity:0}
  100%{transform:translateY(-50%) scale(3.5); opacity:0}
}
.B-now .now-time{
  font-family:var(--serif);font-style:italic;font-size:1.05rem;font-weight:700;color:var(--amber);
}
.B-now .now-task{font-family:var(--serif);font-size:1rem;font-weight:900;line-height:1.3;letter-spacing:-.01em;margin:.18rem 0 .25rem}
.B-now .now-sub{font-family:var(--display);font-style:italic;font-size:.85rem;color:var(--paper);opacity:.78}
.B-now .now-progress{
  margin-top:.7rem;height:3px;border-radius:999px;
  background:rgba(244,236,216,.2);overflow:hidden;
}
.B-now .now-progress-fill{
  height:100%;background:var(--amber);border-radius:999px;
  transition:width .4s ease;
}
.B-now .now-progress-meta{
  margin-top:.35rem;display:flex;justify-content:space-between;
  font-family:var(--mono);font-size:.58rem;letter-spacing:.1em;
  color:var(--paper);opacity:.65;text-transform:uppercase;
}
.B-now .next-up{
  margin-top:.7rem;padding-top:.6rem;border-top:1px dotted rgba(244,236,216,.3);
  font-family:var(--mono);font-size:.62rem;letter-spacing:.1em;
  color:var(--paper);opacity:.7;text-transform:uppercase;
}
.B-now .next-up strong{color:var(--amber);font-family:var(--serif);font-style:italic;font-size:1.15em;letter-spacing:0;text-transform:none;margin-right:.3rem}

/* SCRUB STRIP — drag to other days */
.B-scrub{
  padding:.55rem .8rem;border-bottom:1px solid var(--ink);
  background:var(--paper-deep);
  display:flex;gap:.35rem;overflow-x:auto;scrollbar-width:none;
  align-items:center;
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
}
.B-scrub .pill{scroll-snap-align:center}
.B-scrub::-webkit-scrollbar{display:none}
.B-scrub .pill{
  flex:none;display:flex;flex-direction:row;align-items:center;gap:.3rem;
  font-family:var(--mono);font-size:.6rem;letter-spacing:.08em;color:var(--ink-mute);
  border:1px solid var(--ink);padding:.42rem .65rem;background:var(--paper);
  min-width:auto;min-height:34px;cursor:pointer;text-decoration:none;
  border-radius:999px;
  transition:background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.B-scrub .pill strong{
  font-family:var(--serif);font-style:italic;font-weight:900;font-size:.85rem;color:var(--accent);
  line-height:1;letter-spacing:.01em;
}
.B-scrub .pill.active{background:var(--ink);color:var(--paper)}
.B-scrub .pill.active strong{color:var(--amber)}
.B-scrub .pill.done{opacity:.45}
.B-scrub .pill.done strong{color:var(--ink-mute)}

/* TIMELINE */
.B-timeline{
  padding:.7rem 1rem .4rem;
  position:relative;
}
.B-timeline::before{
  content:"";position:absolute;
  left:calc(1rem + 35px);top:.7rem;bottom:.7rem;width:2px;
  background:var(--ink);opacity:.18;
}
.B-step{
  display:grid;grid-template-columns:38px 16px 1fr;gap:.5rem;
  padding:.24rem 0;align-items:start;
}
.B-step .t{
  font-family:var(--mono);font-size:.68rem;font-weight:600;
  color:var(--ink);letter-spacing:.04em;
  padding-top:.1rem;text-align:right;
}
.B-step .dot{
  width:14px;height:14px;border-radius:50%;
  background:var(--paper);border:2px solid var(--ink);
  margin:.25rem auto 0;position:relative;z-index:1;
}
.B-step.star .dot{background:var(--accent);border-color:var(--accent);box-shadow:0 0 0 3px var(--paper)}
.B-step.now .dot{background:var(--amber);border-color:var(--amber);box-shadow:0 0 0 3px var(--paper), 0 0 0 5px var(--amber)}
.B-step.done{opacity:.55}
.B-step.done .dot{background:var(--ink-mute);border-color:var(--ink-mute)}
.B-step .lab{font-family:var(--serif);font-weight:900;font-size:.9rem;line-height:1.3;letter-spacing:-.005em;color:var(--ink)}
.B-step .lab .note-dot{
  display:inline-block;margin-left:.3rem;font-size:.7em;
  vertical-align:baseline;filter:saturate(.8);
}
.B-step .lab small{display:block;font-family:var(--display);font-style:italic;font-weight:400;font-size:.78rem;color:var(--ink-soft);margin-top:.08rem;line-height:1.35}
.B-step.star .lab{color:var(--accent)}
.B-step{cursor:pointer;transition:background .15s}
.B-step:hover{background:rgba(255,255,255,.35)}
.B-step .lab{position:relative;padding-right:1.4rem}
.B-step .chev{
  position:absolute;right:0;top:.05rem;
  font-family:var(--mono);font-size:1rem;color:var(--ink-mute);
  width:18px;height:18px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  border:1px solid var(--ink);background:var(--paper);line-height:1;
}
.B-step.open .chev{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.B-step-detail{
  margin:.2rem 0 .6rem calc(38px + .6rem + 16px + .6rem);
  padding:.65rem .8rem;
  background:var(--paper-deep);
  border:1px solid var(--ink);
  border-radius:10px;
  font-size:.78rem;
  animation:B-slide .18s ease;
}
@keyframes B-slide{
  from{opacity:0;transform:translateY(-4px)}
  to{opacity:1;transform:translateY(0)}
}
.B-step-detail .row{
  display:grid;grid-template-columns:54px 1fr;gap:.5rem;
  padding:.18rem 0;align-items:start;
}
.B-step-detail .k{
  font-family:var(--mono);font-size:.6rem;letter-spacing:.12em;
  color:var(--ink-mute);text-transform:uppercase;padding-top:.1rem;
}
.B-step-detail .v{
  font-family:var(--serif);font-size:.85rem;color:var(--ink);line-height:1.45;
}
.B-step-detail .actions{
  display:flex;gap:.4rem;flex-wrap:wrap;
  margin-top:.55rem;padding-top:.55rem;
  border-top:1px dashed var(--ink);
}
.B-step-detail .actions button{
  font-family:var(--mono);font-size:.62rem;letter-spacing:.08em;
  border:1px solid var(--ink);background:var(--paper);
  padding:.32rem .6rem;border-radius:999px;cursor:pointer;color:var(--ink);
}
.B-step-detail .actions button:hover{background:var(--ink);color:var(--paper)}

.B-sheet-mask{
  position:fixed;inset:0;z-index:80;
  display:flex;align-items:flex-end;justify-content:center;
  background:rgba(26,22,18,.48);
  padding:0 .65rem env(safe-area-inset-bottom,0px);
  animation:B-sheetFade .18s ease;
}
@keyframes B-sheetFade{from{opacity:0}to{opacity:1}}
.B-train-sheet{
  width:min(28rem,100%);
  background:rgba(255,250,234,.96);
  border:1px solid rgba(26,22,18,.18);
  border-radius:22px 22px 0 0;
  box-shadow:0 -18px 42px rgba(26,22,18,.28);
  padding:.65rem 1rem calc(1rem + env(safe-area-inset-bottom,0px));
  animation:B-sheetUp .22s var(--ease-out);
  max-height:86vh;overflow:auto;
}
@keyframes B-sheetUp{from{transform:translateY(2rem);opacity:.6}to{transform:translateY(0);opacity:1}}
.B-train-sheet .sheet-grab{
  width:2.4rem;height:4px;border-radius:999px;
  background:rgba(26,22,18,.22);
  margin:0 auto .75rem;
}
.B-train-sheet .sheet-head{
  display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;
  padding-bottom:.75rem;border-bottom:1px dotted rgba(26,22,18,.2);
}
.B-train-sheet .sheet-head span{
  font-family:var(--mono);font-size:.58rem;letter-spacing:.18em;
  color:var(--accent);text-transform:uppercase;
}
.B-train-sheet .sheet-head h2{
  margin:.12rem 0 0;
  font-family:var(--serif);font-size:1.08rem;line-height:1.25;
}
.B-train-sheet .sheet-head button{
  width:32px;height:32px;border-radius:50%;
  border:1px solid rgba(26,22,18,.18);
  background:rgba(26,22,18,.07);
  color:var(--ink);font-size:1.2rem;line-height:1;cursor:pointer;
}
.B-train-sheet .sheet-route{
  display:grid;grid-template-columns:auto 1fr auto 1fr;gap:.55rem;align-items:center;
  margin:.85rem 0;padding:.75rem;
  border-radius:14px;background:rgba(168,35,29,.06);
}
.B-train-sheet .sheet-route .pill{
  font-family:var(--mono);font-size:.58rem;font-weight:700;letter-spacing:.14em;
  background:var(--accent);color:var(--paper);border-radius:6px;padding:.16rem .46rem;
}
.B-train-sheet .sheet-route .pill.ic{background:var(--amber-deep)}
.B-train-sheet .sheet-route .pill.bus{background:var(--moss)}
.B-train-sheet .sheet-route strong{
  font-family:var(--serif);font-style:italic;font-size:1.15rem;color:var(--ink);
}
.B-train-sheet .sheet-route span:not(.pill){
  text-align:center;font-family:var(--mono);font-size:.62rem;color:var(--ink-mute);
}
.B-train-sheet .sheet-list{
  margin:0;display:grid;gap:.12rem;
}
.B-train-sheet .sheet-list div{
  display:grid;grid-template-columns:4.1rem 1fr;gap:.75rem;
  padding:.48rem .1rem;border-bottom:1px solid rgba(26,22,18,.08);
}
.B-train-sheet .sheet-list dt{
  font-family:var(--mono);font-size:.58rem;letter-spacing:.12em;
  color:var(--ink-mute);text-transform:uppercase;
}
.B-train-sheet .sheet-list dd{
  margin:0;font-family:var(--serif);font-size:.9rem;line-height:1.4;color:var(--ink);
}
.B-train-sheet .sheet-actions{
  display:grid;grid-template-columns:1fr 1fr;gap:.5rem;margin-top:.9rem;
}
.B-train-sheet .sheet-actions a{
  display:flex;align-items:center;justify-content:center;
  min-height:42px;border-radius:12px;text-decoration:none;
  font-family:var(--serif);font-weight:800;font-size:.86rem;
  border:1px solid rgba(26,22,18,.18);
  color:var(--ink);background:#fff8e3;
}
.B-train-sheet .sheet-actions a:first-child{
  background:var(--accent);border-color:var(--accent);color:var(--paper);
}

/* CARDS */
.B-card{
  margin:.55rem 1rem;padding:.65rem .9rem .7rem;
  border:1px solid var(--ink);background:var(--paper-deep);
  position:relative;
  border-radius:14px;
}
.B-card .label{
  font-family:var(--serif);font-size:.6rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--accent);font-weight:700;margin-bottom:.5rem;
  display:flex;align-items:center;gap:.4rem;
}
.B-card.eat{background:var(--paper-warm)}
.B-card.tickets{
  background:rgba(196,137,43,.08);
  border-color:rgba(196,137,43,.78);
}
.B-card.tickets .label{color:var(--amber-deep)}
.B-card.backup{background:rgba(61,74,42,.07);border-color:var(--moss)}
.B-card.backup .label{color:var(--moss)}
.B-card.backup li > a::before{color:var(--moss)}
.B-card.practical{background:rgba(26,22,18,.04)}
.B-card.practical .label{color:var(--ink-soft)}
.B-card.practical li > a::before{color:var(--ink-soft)}
.B-card.field-note{
  background:rgba(168,35,29,.045);
  border-color:rgba(168,35,29,.55);
}
.B-card.field-note .label{color:var(--accent)}
.B-card ul{list-style:none;padding:0;margin:0;display:grid;gap:.18rem}
.B-card li{font-size:.9rem;color:var(--ink-soft);position:relative;line-height:1.45}
.B-card li > a{
  display:flex;align-items:baseline;justify-content:space-between;gap:.5rem;
  padding:.32rem .55rem .32rem 1.1rem;
  color:inherit;text-decoration:none;
  border-radius:8px;
  transition:background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.B-card li > a::before{content:"◆";position:absolute;left:.18rem;top:.5rem;color:var(--amber);font-size:.6em}
.B-card li > a:hover,.B-card li > a:active{background:rgba(168,35,29,.06);color:var(--ink)}
.B-card li > a .eat-arr{
  flex:none;font-family:var(--mono);font-size:.75em;color:var(--accent);opacity:.5;
}
.B-card li > a:hover .eat-arr,.B-card li > a:active .eat-arr{opacity:1}

/* Tickets card — compact official-link checklist */
.B-card.tickets li > a{
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:.5rem;
  padding:.42rem .55rem .42rem 1.1rem;
}
.B-card.tickets li > a strong{
  font-family:var(--serif);
  font-size:.86rem;
  line-height:1.32;
  color:var(--ink);
  min-width:0;
  overflow-wrap:anywhere;
}
.B-card.tickets .ticket-tier{
  font-family:var(--mono);
  font-size:.52rem;
  letter-spacing:.12em;
  color:var(--paper);
  background:var(--amber-deep);
  padding:.12rem .36rem;
  border-radius:4px;
  text-transform:uppercase;
  white-space:nowrap;
}
.B-empty-card{
  display:grid;gap:.18rem;
  padding:.45rem .2rem .35rem;
}
.B-empty-card strong{
  font-family:var(--serif);
  font-size:.9rem;
  color:var(--ink);
}
.B-empty-card span{
  font-size:.78rem;
  color:var(--ink-mute);
  line-height:1.45;
}
.B-ticket-next{
  margin-top:.55rem;
  padding-top:.55rem;
  border-top:1px dotted rgba(26,22,18,.18);
  display:grid;
  gap:.35rem;
}
.B-ticket-next > span{
  font-family:var(--mono);
  font-size:.55rem;
  letter-spacing:.14em;
  color:var(--ink-mute);
  text-transform:uppercase;
}
.B-ticket-next > div{
  display:flex;
  flex-wrap:wrap;
  gap:.35rem;
}
.B-ticket-next a{
  color:var(--ink);
  background:rgba(255,248,227,.72);
  border:1px solid rgba(26,22,18,.12);
  border-radius:999px;
  padding:.22rem .5rem;
  text-decoration:none;
  font-family:var(--serif);
  font-size:.76rem;
  line-height:1.25;
}

/* Backup card — multiline anchor with label / where / why stacked */
.B-card.backup li > a{
  flex-wrap:wrap;align-items:baseline;
  padding:.45rem .55rem .5rem 1.1rem;
}
.B-card.backup li > a strong{
  font-family:var(--serif);font-weight:700;color:var(--moss);
  font-size:.82rem;letter-spacing:.04em;
  flex:0 0 auto;
}
.B-card.backup li > a em{
  font-family:var(--display);font-style:italic;color:var(--accent);
  font-weight:600;font-size:.85rem;flex:1 1 auto;
}
.B-card.backup li > a span:not(.eat-arr){
  flex:1 0 100%;color:var(--ink-mute);font-size:.78rem;line-height:1.45;
  margin-top:.15rem;
}

/* Practical card — tag + name + note stacked */
.B-card.practical li > a{
  flex-wrap:wrap;align-items:baseline;
  padding:.4rem .55rem .45rem 1.1rem;
}
.B-card.practical li > a .t{
  font-family:var(--mono);font-size:.56rem;letter-spacing:.14em;
  color:var(--paper);background:var(--ink-soft);
  padding:.12rem .42rem;border-radius:3px;text-transform:uppercase;
  flex:0 0 auto;
}
.B-card.practical li > a strong{
  font-family:var(--serif);font-weight:700;color:var(--ink);
  font-size:.85rem;flex:1 1 auto;
}
.B-card.practical li > a small{
  flex:1 0 100%;color:var(--ink-mute);font-size:.76rem;line-height:1.45;
  margin-top:.18rem;
}
.B-card.field-note li{
  display:grid;grid-template-columns:4.1rem 1fr;gap:.5rem;align-items:start;
  padding:.38rem .2rem;
}
.B-card.field-note li + li{border-top:1px dotted rgba(26,22,18,.18)}
.B-card.field-note .field-tag{
  font-family:var(--mono);font-size:.56rem;letter-spacing:.12em;
  color:var(--paper);background:var(--accent);
  padding:.12rem .36rem;border-radius:4px;text-transform:uppercase;
  justify-self:start;margin-top:.12rem;
}
.B-card.field-note strong{
  font-family:var(--serif);font-size:.86rem;line-height:1.38;
  color:var(--ink);font-weight:800;
}

/* Step inline cost / dur meta — compact mono badges */
.B-step .lab .step-meta{
  display:inline-flex;flex-wrap:wrap;gap:.4rem;margin-top:.18rem;
  font-family:var(--mono);font-size:.6rem;letter-spacing:.04em;
}
.B-step .lab .step-meta .m-cost{color:var(--amber-deep);font-weight:600}
.B-step .lab .step-meta .m-dur{color:var(--moss);font-weight:600}
.B-warn{
  margin:.55rem 1rem;padding:.6rem .9rem;
  background:var(--ink);color:var(--paper);
  border-left:4px solid var(--amber);
  font-size:.78rem;line-height:1.45;
  border-radius:12px;
}
.B-warn strong{color:var(--amber)}

/* TRAIN MINI */
.B-train{
  display:block;
  margin:.55rem 1rem;
  border:1px solid rgba(26,22,18,.18);background:#fff8e3;
  padding:.72rem .92rem;
  border-radius:16px;
  box-shadow:0 10px 24px rgba(26,22,18,.08);
  cursor:pointer;
  transition:transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.B-train:hover{box-shadow:0 14px 30px rgba(26,22,18,.12)}
.B-train:active{transform:scale(.99)}
.B-train .book-cta{
  margin-left:auto;
  font-family:var(--mono);font-size:.62rem;letter-spacing:.1em;
  color:var(--accent);font-weight:700;text-transform:uppercase;
  text-decoration:none;
  padding:.18rem .5rem;border:1px solid var(--accent);border-radius:999px;
  transition:background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.B-train .book-cta:hover,.B-train .book-cta:active{background:var(--accent);color:var(--paper)}
.B-train .route .stop{
  color:inherit;text-decoration:none;
  padding:.2rem .35rem;margin:-.2rem -.35rem;border-radius:6px;
  transition:background var(--dur-fast) var(--ease-out);
}
.B-train .route .stop:active,.B-train .route .stop:hover{background:var(--paper-deep)}
.B-train .route .stop::after{
  content:"📍";font-size:.65em;margin-left:.2rem;opacity:.55;
}
.B-train .seg{
  display:flex;align-items:center;gap:.6rem;font-family:var(--mono);
  font-size:.7rem;letter-spacing:.1em;color:var(--ink-mute);text-transform:uppercase;margin-bottom:.5rem;
}
.B-train .seg .pill{
  background:var(--accent);color:var(--paper);padding:.1rem .45rem;
  font-weight:700;font-size:.6rem;letter-spacing:.18em;
}
.B-train .seg .pill.bus{background:var(--moss)}
.B-train .seg .pill.ic{background:var(--amber-deep)}
.B-train .route{
  display:flex;justify-content:space-between;align-items:center;
  font-family:var(--serif);font-weight:700;
}
.B-train .route .stop{display:flex;flex-direction:column}
.B-train .route .stop strong{font-style:italic;font-size:1.2rem;color:var(--accent);line-height:1}
.B-train .route .stop small{font-family:var(--mono);font-size:.65rem;letter-spacing:.12em;color:var(--ink-mute);margin-top:.2rem}
.B-train .route .stop.right{text-align:right}
.B-train .route .arrow{
  flex:1;height:1px;background:var(--ink);margin:0 .8rem;position:relative;
}
.B-train .route .arrow::after{
  content:"";position:absolute;right:0;top:50%;transform:translateY(-50%);
  border:5px solid transparent;border-left-color:var(--ink);
}
.B-train .route .arrow .dur{
  position:absolute;left:50%;top:-9px;transform:translateX(-50%);
  font-family:var(--mono);font-size:.62rem;background:#fff8e3;
  padding:0 .35rem;color:var(--ink-soft);letter-spacing:.08em;
}

/* TAB BAR — bottom dock
   No backdrop-filter: Safari composites it on every scroll frame which
   is the single biggest source of mobile jank. Solid paper bg with
   shadow does the same job at zero cost. */
.B-tabbar{
  position:fixed;bottom:0;left:0;right:0;
  max-width:480px;margin:0 auto;
  display:grid;grid-template-columns:repeat(4,1fr);
  background:rgba(244,236,216,.84);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  border-top:1px solid rgba(26,22,18,.18);
  box-shadow:0 -10px 32px rgba(26,22,18,.12);
  padding:.38rem .2rem calc(.55rem + var(--safe-bottom));
  font-family:var(--serif);font-size:.58rem;letter-spacing:.16em;text-transform:uppercase;
  z-index:10;
  will-change:transform;
  transform:translateZ(0);
}
.B-tabbar a{
  display:flex;flex-direction:column;align-items:center;gap:.2rem;
  text-decoration:none;color:var(--ink-mute);
  padding:.5rem .2rem;min-height:44px;
  border-radius:8px;
  transition:color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.B-tabbar a:active{background:var(--paper-deep)}
.B-tabbar a.active{color:var(--accent)}
.B-tabbar a.active::before{
  content:"";position:absolute;top:-3px;width:28px;height:3px;
  background:var(--accent);border-radius:0 0 3px 3px;
  transform:translateY(-3px);
}
.B-tabbar a{position:relative}
.B-tabbar a svg{width:20px;height:20px;stroke:currentColor;stroke-width:1.6;fill:none}
.B-tabbar a.active svg{stroke-width:2}

/* DRAWER (menu) */
.B-drawer-mask{
  position:fixed;inset:0;background:rgba(26,22,18,.4);
  opacity:0;pointer-events:none;
  transition:opacity var(--dur-base) var(--ease-out);
  z-index:50;
}
.B-drawer-mask.open{opacity:1;pointer-events:auto}
.B-drawer{
  position:fixed;top:0;right:0;bottom:0;width:min(80vw,320px);
  background:var(--paper);border-left:1px solid var(--ink);
  box-shadow:-12px 0 28px rgba(26,22,18,.18);
  transform:translateX(100%);transition:transform var(--dur-base) var(--ease-out);
  z-index:51;display:flex;flex-direction:column;
  padding-top:calc(var(--safe-top) + .5rem);
  padding-bottom:calc(var(--safe-bottom) + 1rem);
}
.B-drawer.open{transform:translateX(0)}
.B-drawer-head{
  display:flex;justify-content:space-between;align-items:center;
  padding:.7rem 1rem;border-bottom:3px double var(--ink);
  font-family:var(--serif);font-weight:900;letter-spacing:.18em;font-size:.78rem;
}
.B-drawer-close{
  background:transparent;border:none;font:inherit;font-size:1.2rem;
  cursor:pointer;color:var(--ink);padding:.4rem;line-height:1;
}
.B-drawer ul{list-style:none;padding:.4rem 0;margin:0;overflow-y:auto;flex:1}
.B-drawer li a{
  display:flex;justify-content:space-between;align-items:baseline;gap:.6rem;
  padding:.85rem 1.2rem;
  font-family:var(--serif);color:var(--ink);text-decoration:none;
  border-bottom:1px dotted rgba(26,22,18,.18);
  font-size:.92rem;
}
.B-drawer li a small{
  font-family:var(--mono);font-size:.6rem;letter-spacing:.12em;
  color:var(--ink-mute);text-transform:uppercase;
}
.B-drawer li a:hover{background:var(--paper-deep)}
.B-drawer li a.active{color:var(--accent);font-weight:700}

/* Print */
@media print{
  .B-tabbar, .B-status-bar, .B-scrub, .B-drawer-mask, .B-drawer{display:none !important}
  .B-frame{height:auto;border-radius:0;box-shadow:none}
}

/* Touch devices: kill hover lift */
@media (hover:none){
  .B-step:hover{background:transparent}
}

@media (max-width:360px){
  .B-head{padding:.55rem .85rem .7rem}
  .B-today{padding:.8rem .85rem .95rem}
  .B-today .day-num{font-size:3.2rem}
  .B-today h1{font-size:1.18rem}
  .B-mobile-brief{gap:.34rem;margin-top:.62rem}
  .B-mobile-brief .brief-card{
    grid-template-columns:3.9rem 1fr;gap:.42rem;
    padding:.46rem .56rem;
  }
  .B-mobile-brief .brief-k{font-size:.54rem;letter-spacing:.1em}
  .B-mobile-brief strong{font-size:.78rem;line-height:1.32}
  .B-pwa-state{
    grid-template-columns:auto 1fr;
    gap:.38rem;margin-top:.5rem;
    padding:.38rem .5rem;border-radius:999px;
  }
  .B-pwa-state em{display:none}
  .B-step{grid-template-columns:34px 14px 1fr;gap:.42rem}
  .B-step-detail{margin-left:calc(34px + .42rem + 14px + .42rem)}
  .B-tabbar{font-size:.54rem;letter-spacing:.08em}
  .B-tabbar a svg{width:18px;height:18px}
}