/* ═══ v2.22p6.3 · THE PLANNER ON THE PHONE (Arrick, round 9) ═══
   Toggle at the top · Create beneath it · mini-month retired · the calendar
   below, horizontally swipeable in Week, single-column in Day. The calculator's
   meters stack. Same components as desktop — narrower clothes. */
.plf-tgtlink{text-align:left;cursor:pointer;padding:0}
.plf-tgtlink:hover{color:var(--ink)}
@media(max-width:720px){
  .pld{display:block}
  .pld-rail{position:static;display:flex;flex-direction:column;gap:10px;margin-bottom:12px}
  .pld-rail .pld-card{display:none}          /* the mini calendar goes away */
  .pld-create{height:48px}
  .pld-fix{top:52px;padding-top:4px}
  /* ═══ v3.14 (D1) · THE CARD, COMPOSED — the same three things on one grid (Arrick, 2026-09-05):
     row 1 = the date, heading-sized, and the arrows as one joined pair flush right;
     row 2 = TODAY left and MONTH · WEEK · DAY right, both 32px, both ink hairlines (the switch spans
     the row from column 1 so the arrow columns stay exactly arrow-wide).
     One padding (16), one gutter (12). Fueling turns the hairlines purple. ═══ */
  .pld-bar{display:grid;grid-template-columns:1fr auto auto;grid-template-rows:32px 32px;align-items:center;gap:12px 0;padding:16px}
  .pv-nav{display:contents}
  .pld-label{grid-area:1/1;font-size:18px;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding-right:12px}
  .pv-nav .pv-prev,.pv-nav .pv-next{width:40px;height:32px;border:1px solid var(--ink);font-size:15px;color:var(--ink)}
  .pv-nav .pv-prev{grid-area:1/2}
  .pv-nav .pv-next{grid-area:1/3;border-left:0}
  .pv-nav .pv-today{grid-area:2/1;justify-self:start;height:32px;padding:0 14px;border:1px solid var(--ink);color:var(--ink)}
  .pv-nav .pv-today.here{border-color:var(--line);color:#B5AFA8}   /* already here: it rests */
  .pld-bar .seg2{grid-area:2/1/3/4;margin:0;padding:0;gap:0;background:none;border:1px solid var(--ink);height:32px;justify-self:end}
  .seg2 button{padding:0 14px;height:30px;color:var(--muted)}
  .seg2 button+button{border-left:1px solid var(--ink)}
  .seg2 button.on{background:var(--ink);color:var(--paper)}
  .pld.fuelmode .pv-nav .pv-prev,.pld.fuelmode .pv-nav .pv-next,.pld.fuelmode .pv-nav .pv-today:not(.here),
  .pld.fuelmode .pld-bar .seg2,.pld.fuelmode .seg2 button+button{border-color:#5400DB}
  .pld.fuelmode .seg2 button.on{background:#5400DB}
  .pld.fuelmode .pld-bar{box-shadow:var(--lift)}   /* the purple inset rule is redundant beside purple controls */
  .plf-calc{padding:10px 14px 12px}
  .plf-cbars{grid-template-columns:1fr;gap:10px}  /* macros STACK on mobile */
  .plf-cline{font-size:12.5px}
  .pld-wk,.plf-wk{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .pld-heads,.pld-scroll{min-width:calc(46px + var(--pldcols,7) * 132px)}
  .plf-cols{min-width:calc(var(--pldcols,7) * 186px)}
  .pld-scroll{height:calc(100dvh - 252px);min-height:360px}
  .plf-cols{min-height:calc(100dvh - 380px)}
  .pldh-add{opacity:1}                        /* no hover on touch — the + is always there */
  /* ═══ v3.15 (audit P-1) · THE AGENDA — the phone's Training planner is a list ═══
     Day: rows on the page's own gutter — time, kind tick, title + meta, the action.
     Week: seven day rows, one line each. No hour grid, no sideways pan on the phone. */
  .pld-agenda{padding:4px 0 0}
  .pld-agenda .pld-it.pld-ag{display:flex;align-items:center;gap:12px;width:100%;padding:15px 0;margin:0;border:0;border-bottom:1px solid var(--line);box-shadow:none;text-align:left;background:none;border-radius:0;position:static;height:auto;left:auto;right:auto;-webkit-tap-highlight-color:transparent}
  .pld-ag .ag-t{flex:0 0 52px;font-family:var(--courier);font-size:12px;font-weight:700;letter-spacing:.02em;color:var(--muted);text-transform:lowercase}
  .pld-ag .ag-k{flex:0 0 3px;height:34px;background:var(--ink);border-radius:0}
  .pld-ag.k-cardio .ag-k{background:var(--accent)}.pld-ag.k-strength .ag-k,.pld-ag.k-hyb .ag-k{background:#5400DB}.pld-ag.k-mobility .ag-k{background:#1F7A76}
  .pld-ag .ag-b{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}
  .pld-ag .ag-b b{font-family:var(--courier);font-size:14px;font-weight:700;text-transform:uppercase;letter-spacing:.01em;color:var(--ink);line-height:1.15;white-space:normal}
  .pld-ag .ag-b em{font-style:normal;font-family:var(--courier);font-size:10.5px;color:var(--muted);letter-spacing:.04em;text-transform:uppercase}
  .pld-ag .ag-act{flex:0 0 auto;font-family:var(--courier);font-size:13px;font-weight:700;text-transform:uppercase;color:var(--ink);padding:8px 0 8px 10px;-webkit-tap-highlight-color:transparent}
  .pld-ag.done .ag-b b{color:var(--muted)}
  .pld-ag.done .ag-k{opacity:.35}
  .pld-ag-empty{padding:26px 0 10px;font-family:var(--courier);font-size:14px;font-weight:700;text-transform:uppercase;letter-spacing:.01em;color:var(--muted)}
  .pld-ag-add{display:block;width:100%;text-align:left;padding:18px 0 8px;font-family:var(--courier);font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.02em;color:#5400DB;-webkit-tap-highlight-color:transparent}
  .pld-agenda-wk{padding:4px 0 0}
  .pld-ag-day{display:flex;align-items:center;gap:14px;width:100%;padding:15px 0;border-bottom:1px solid var(--line);text-align:left;-webkit-tap-highlight-color:transparent}
  .pld-ag-day .ag-d{flex:0 0 52px;display:flex;align-items:baseline;gap:5px}
  .pld-ag-day .dn{font-family:var(--courier);font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
  .pld-ag-day .dd{font-family:var(--helv);font-weight:900;font-size:18px;letter-spacing:-.02em;color:var(--ink)}
  .pld-ag-day.tdy .dd{color:var(--accent)}
  .pld-ag-day .ag-s{flex:1;min-width:0;font-family:var(--courier);font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.01em;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .pld-ag-day .ag-n{flex:0 0 auto;font-family:var(--courier);font-size:11px;font-weight:700;color:var(--muted);display:inline-flex;align-items:center;gap:6px}
  .pld-ag-day.done .ag-n{color:var(--volt-text)}
  /* v3.15 (audit P-4) — the empty week day's one line */
  .plf-empty .plf-add{padding-top:14px}
  .pld-addhint{display:none}                  /* hover affordance is meaningless under a finger */
}
.dock-wrap{display:none}
@keyframes cf-vt-out{to{opacity:0}}
@keyframes cf-vt-in{from{opacity:0;transform:translateY(6px)}}
@media(max-width:720px){
  .ab-nav,.ab-right{display:none}     /* the dock takes over navigation */
  .app-bar .wrap{flex-wrap:nowrap;height:52px}
  .fab{display:none}                  /* the + lives in the dock now */
  /* v2.18.1 — the footer follows the last module at the normal 20px rhythm. The old
     88/96px FAB clearances are dead space in the dock era: the footer sits beneath
     every view, so the last row always scrolls clear of the dock (the footer slides
     under it instead), and the dock is designed to float over content. */
  #appRoot>.page{padding-bottom:0}
  .view.on{padding-bottom:0}
  .ft{margin-top:0}   /* the last module's own 20px margin IS the rhythm — no extra footer offset */
  .view.on>:last-child{margin-bottom:20px}   /* every view, not just Today: the footer follows at the same 20px module rhythm app-wide */
  .toast{bottom:calc(94px + env(safe-area-inset-bottom,0px))}   /* toasts clear the dock */
  body.kb-open .dock-wrap{display:none}   /* keyboard open: the dock yields, like the FAB did */

  .dock-wrap{--spring:cubic-bezier(.32,1.36,.36,1);position:fixed;left:0;right:0;bottom:calc(14px + env(safe-area-inset-bottom,0px));z-index:120;display:flex;align-items:center;justify-content:center;gap:12px;padding:0 16px;pointer-events:none}
  .dock{pointer-events:auto;position:relative;flex:1 1 auto;max-width:336px;height:60px;display:grid;grid-template-columns:repeat(4,1fr);background:rgba(249,248,246,.8);-webkit-backdrop-filter:saturate(160%) blur(18px);backdrop-filter:saturate(160%) blur(18px);border:1px solid rgba(255,255,255,.7);border-radius:var(--r-fact);box-shadow:var(--lift-sheet)}
  .dock-ind{position:absolute;top:5px;bottom:5px;left:0;width:25%;background:rgba(23,18,15,.09);border-radius:var(--r-fact);transition:transform .5s var(--spring),width .5s var(--spring);will-change:transform}
  .dock.no-anim .dock-ind{transition:none}
  .dock-tab{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;padding:0;color:var(--ink);-webkit-tap-highlight-color:transparent;transition:transform var(--t-touch) var(--ease),color var(--t-move) var(--ease)}
  .dock-tab.on{color:var(--accent)}   /* the active icon + label turn brand red as the pill arrives */
  .dock-tab:active{transform:scale(.93)}
  .dock-tab svg{width:24px;height:24px;display:block}
  .dock-tab svg path{fill:currentColor}
  .dock-tab span{font-family:var(--courier);font-size:9px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;line-height:1}
  /* the + is a fifth cell of the same material: outer circle = the dock's exact height and
     treatment; inner red disc = the sliding indicator's exact height. They scale together. */
  .dock-fab{pointer-events:auto;flex:0 0 auto;width:60px;height:60px;border-radius:50%;background:rgba(249,248,246,.8);-webkit-backdrop-filter:saturate(160%) blur(18px);backdrop-filter:saturate(160%) blur(18px);border:1px solid rgba(255,255,255,.7);box-shadow:var(--lift-sheet);display:flex;align-items:center;justify-content:center;padding:0;-webkit-tap-highlight-color:transparent;transition:transform var(--t-touch) var(--ease)}
  .dock-fab:active{transform:scale(.92)}
  .dock-fab-in{width:48px;height:48px;border-radius:50%;background:var(--accent);color:var(--paper);display:flex;align-items:center;justify-content:center}
  .dock-fab svg{display:block}

  /* cross-fade view changes (View Transitions) — the nav chrome stays live above the fade */
  .app-bar{view-transition-name:cf-appbar}
  .dock-wrap{view-transition-name:cf-dock}
  ::view-transition-old(root){animation:cf-vt-out .2s ease both}
  ::view-transition-new(root){animation:cf-vt-in .27s ease both}
}
/* the real spring: browsers with linear() get the fluid overshoot the comp's motion implies */
@supports (transition-timing-function:linear(0,1)){
  @media(max-width:720px){
    .dock-wrap{--spring:linear(0,.0036 1.2%,.0185 2.7%,.0632 5.2%,.1442 8.1%,.3096 12.7%,.6295 20.2%,.7929 24.1%,.9204 27.9%,1.0134 31.9%,1.0623 35.5%,1.0921 39.5%,1.1006 43.5%,1.0967 47.2%,1.0555 58%,1.0155 69.8%,.998 82.4%,.9975 99.7%,1)}
  }
}