/*
  Version 3, core (D0). Loaded by templates/v3/base.html only when the v3 flag is on for the request.

  The motion and layout tokens of prototype v2.1 (Redesign_Prototype_v2.1.html :root; Redesign_Motion_System.md
  section 3), and its shared components: icons, the press, skeletons, the one bottom sheet, toasts and the frozen
  page of the shell's hand-off. The colour and shape tokens (--ink, --paper, --green, the radii) and the motion
  tokens the app already has (--ease-out, --ease-out-expo, --ease-in, --spring, --dur-fast, --dur-base, --dur-sheet,
  --stagger) are followap.css's :root and stay there: no new colour.

  Every rule is scoped: under body.v3, or on a v3- class (and v3- keyframes). followap.css is one global namespace;
  .toast, .sheet, .scrim and .sk are already today's, so the v3 ones are .v3-toast, .v3-sheet, .v3-scrim, .v3-sk.
*/

/* ── the font: Inter as the prototype embeds it, one variable face (weights 100 to 900), so its 550, 650 and 750 are
   drawn as written instead of snapping to followap.css's static 600, 700 and 800. It is the same file followap.css
   serves (fonts/inter-*.woff2 are Google's variable Inter, byte for byte the prototype's); only the weight range is
   new. Loaded with v3 only, so today's pages keep today's faces. ── */
@font-face{font-family:Inter;font-style:normal;font-weight:100 900;font-display:swap;src:url("../fonts/inter-400.65850a373e25.woff2") format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}

/* ── tokens: new in the redesign ─────────────────────────────────────────────────────────────────────────────── */
body.v3{
  --spring-bouncy:var(--spring);
  --spring-smooth:var(--ease-out-expo);
  --dur-press:120ms; --dur-enter:520ms; --dur-shared:560ms; --dur-orb:620ms; --dur-toast:620ms;
  --dur-skeleton:420ms; --dur-shimmer:1400ms; --dur-breathe:2600ms; --stagger-tight:35ms; --rise:14px; --press-scale:.97;
  /* layout: the desk sidebar */
  --side:268px;
  /* the product audit (18 October 2026): secondary text at 4.5:1 or more. followap.css's #8A8A8C is 3.45:1 on white and
     2.95:1 on paper; this is 5.56:1 and 4.75:1. Version 3 only: the old app keeps its grey. */
  --grey:#68686A;
  /* amber as text: the brand amber is 2.83:1 on white; this one 5.2:1 (dots and fills keep the brand amber) */
  --amber-t:#99600F;
}
/* on the dark surfaces the lighter grey is the readable one (5.0:1 on ink) */
body.v3 .v3-hero,body.v3 .v3-side,body.v3 .v3-tray,body.v3 .v3-mls .v3-phone{--grey:#8A8A8C}
@supports (transition-timing-function: linear(0, 1)){
  body.v3{
    --spring-bouncy:linear(0, 0.0421, 0.1466, 0.2853, 0.4363, 0.5837, 0.717, 0.8302, 0.9207, 0.9886, 1.0357, 1.065, 1.0798, 1.0835, 1.0794, 1.0704, 1.0587, 1.046, 1.0338, 1.0228, 1.0135, 1.0061, 1.0006, 0.9968, 0.9944, 0.9933, 0.993, 0.9934, 0.9942, 0.9952, 0.9962, 0.9973, 0.9982, 0.9989, 1);
    --spring-smooth:linear(0, 0.0265, 0.092, 0.1797, 0.2777, 0.3774, 0.4735, 0.5623, 0.642, 0.7119, 0.7718, 0.8223, 0.8641, 0.8981, 0.9254, 0.9469, 0.9637, 0.9764, 0.9859, 0.9928, 0.9976, 1.0009, 1.003, 1.0043, 1.0049, 1.005, 1.0049, 1.0045, 1.0041, 1.0036, 1.0031, 1.0026, 1.0022, 1.0018, 1);
  }
}
@media (min-width:1600px){ body.v3{--side:288px} }
@media (prefers-reduced-motion: reduce){ body.v3{--dur-press:1ms;--dur-shimmer:0ms;--dur-breathe:0ms} }

/* ── icons (templates/v3/_icons.html; {% v3_icon %}, V3.icon) ────────────────────────────────────────────────── */
body.v3 .v3-i{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}
body.v3 .v3-i.s{width:18px;height:18px}
body.v3 .v3-i.xs{width:15px;height:15px}

/* ── the press: every tappable thing ─────────────────────────────────────────────────────────────────────────── */
body.v3 .v3-tap{transition:transform var(--dur-press) var(--ease-out)}
body.v3 .v3-tap:active{transform:scale(var(--press-scale))}

/* ── skeletons, never "Loading" ──────────────────────────────────────────────────────────────────────────────── */
body.v3 .v3-sk{position:relative;overflow:hidden;background:color-mix(in srgb,var(--ink) 6%,transparent);border-radius:12px}
body.v3 .v3-sk::after{content:"";position:absolute;inset:0;transform:translateX(-100%);
  background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--white) 65%,transparent),transparent);animation:v3-shimmer var(--dur-shimmer) var(--ease-out) infinite}
body.v3 .v3-sk.wh{background:var(--white)}
body.v3 .v3-sk.wh::after{background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--paper) 80%,transparent),transparent)}
body.v3 .v3-skl{height:12px;border-radius:6px;background:color-mix(in srgb,var(--ink) 7%,transparent)}
body.v3 .v3-skrows{display:grid;gap:10px}
@keyframes v3-shimmer{to{transform:translateX(100%)}}

/* ── the one bottom sheet (V3.sheet): follows the finger, a flick dismisses; on the desk a floating card.
   Its parts are the prototype's .sl .sa .note .opt with the v3- prefix (today's .note and .opt are other things). */
body.v3 .v3-scrim{position:fixed;inset:0;background:color-mix(in srgb,var(--ink) 38%,transparent);opacity:0;pointer-events:none;z-index:190}
body.v3 .v3-scrim.on{pointer-events:auto}
body.v3 .v3-sheet{position:fixed;left:0;right:0;bottom:0;margin:0 auto;max-width:600px;max-height:90dvh;overflow:auto;background:var(--white);
  border-radius:26px 26px 0 0;z-index:200;padding:8px 20px calc(22px + env(safe-area-inset-bottom));transform:translateY(110%);
  touch-action:none;will-change:transform;visibility:hidden;scrollbar-width:none;color:var(--ink);overscroll-behavior:contain}
body.v3 .v3-sheet::-webkit-scrollbar{display:none}
body.v3 .v3-sheet.on{visibility:visible}
body.v3 .v3-sheet.scrolls{touch-action:pan-y}          /* a sheet taller than the screen scrolls; it is dragged by its grab */
body.v3 .v3-sheet:focus{outline:none}
body.v3 .v3-grab{display:block;width:100%;height:20px;cursor:grab;position:relative;touch-action:none}
body.v3 .v3-grab::after{content:"";position:absolute;left:50%;top:6px;width:40px;height:5px;margin-left:-20px;border-radius:3px;background:var(--never)}
body.v3 .v3-sheet h3{font-size:21px;font-weight:800;letter-spacing:-.03em;line-height:1.45}   /* the prototype's .sheet h3 keeps the body's 1.45 */
body.v3 .v3-sheet .v3-sl{font-size:14px;color:var(--grey-d);margin-top:4px}
body.v3 .v3-sheet .v3-sa{display:flex;gap:8px;margin-top:16px;flex-wrap:wrap}
body.v3 .v3-sheet .v3-note{font-size:12.5px;color:var(--grey);margin-top:10px}
body.v3 .v3-sheet .v3-opt{display:flex;align-items:center;gap:14px;width:100%;padding:13px 2px;border-top:1px solid var(--line-soft);font-weight:600;font-size:15.5px;
  background:none;border-left:0;border-right:0;border-bottom:0;text-align:left;color:inherit;font-family:inherit;min-height:44px}
body.v3 .v3-sheet .v3-opt:first-of-type{border-top:0}
body.v3 .v3-sheet .v3-opt .v3-i{color:var(--grey-d)}
body.v3 .v3-sheet .v3-opt small{display:block;font-weight:500;font-size:13px;color:var(--grey)}
body.v3 .v3-sheet .v3-opt .tx{flex:1}

/* ── toasts (V3.toast; today's toast(msg) arrives here too) ──────────────────────────────────────────────────── */
body.v3 #toast{display:none!important}               /* today's one-line toast is shown as a v3 toast instead */
body.v3 .v3-toasts{position:fixed;top:calc(12px + env(safe-area-inset-top));left:12px;right:12px;z-index:300;display:grid;gap:8px;pointer-events:none}
body.v3 .v3-toast{pointer-events:auto;display:flex;gap:12px;align-items:center;background:var(--ink);color:var(--white);border-radius:20px;padding:12px 14px 12px 12px;cursor:pointer;
  box-shadow:0 18px 40px -18px color-mix(in srgb,var(--ink) 80%,transparent);will-change:transform;touch-action:pan-y;user-select:none;-webkit-user-select:none}
body.v3 .v3-toast .ico{flex:none;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:color-mix(in srgb,var(--white) 12%,transparent);color:var(--white)}
body.v3 .v3-toast .ico.g{background:var(--green);color:var(--ink)}
body.v3 .v3-toast .tx{min-width:0}
body.v3 .v3-toast b{display:block;font-size:15px;letter-spacing:-.015em;line-height:1.3}
body.v3 .v3-toast span.sub{display:block;font-size:13px;line-height:1.35;color:color-mix(in srgb,var(--white) 62%,transparent)}

/* ── the shell's hand-off: the page on screen, frozen, fades over the paper while the next one rises ─────────── */
body.v3 main.v3-freeze{z-index:1;background:transparent;pointer-events:none}
/* Today's swap fades <main> itself in from nothing (150ms); on the desk <main> is the paper on the ink stage, so the
   stage showed through for a few frames: a black flash on every tab. In v3 the paper stays and the content rises
   instead (core.js: V3.enter on each swap). */
body.v3 main.xfade{animation:none}

/* ── the desk: 900 and wider (the prototype's breakpoint) ────────────────────────────────────────────────────── */
@media (min-width:900px){
  body.v3 .v3-toasts{left:auto;right:24px;top:24px;width:380px}
  body.v3 .v3-sheet{left:var(--side);bottom:24px;border-radius:26px;padding-bottom:22px}
}

@media (prefers-reduced-motion: reduce){
  body.v3 .v3-sk::after{animation:none}
  body.v3 .v3-tap{transition:none}
}

/* Focus rings that would be cut off (the spacing round, 16 October 2026; tools/spacing.py). A control inside a box that
   clips (a scrolling chip row, a rounded list, the page column, a market tile) draws its ring just inside its own
   edge, rounded with it, so all of it shows; the bar's tabs draw theirs as a rounded lozenge inside the bar's curve.
   (html first: these win over each area's own ring, which draws it outside.) */
html body.v3 :is(.v3-chips, .v3-mkbar) :focus-visible,
html body.v3 .v3-list > :focus-visible,
html body.v3 .v3-list .v3-li:focus-visible,
html body.v3 :is(.v3-card, .v3-row, .v3-pane, .wide, .v3-hlink):focus-visible,
html body.v3 .chip select:focus-visible{outline:2px solid var(--green);outline-offset:-2px}
html body.v3 .v3-list > :first-child:focus-visible,html body.v3 .v3-list > :first-child .v3-li:focus-visible{border-top-left-radius:var(--r);border-top-right-radius:var(--r)}
html body.v3 .v3-list > :last-child:focus-visible,html body.v3 .v3-list > :last-child .v3-li:focus-visible{border-bottom-left-radius:var(--r);border-bottom-right-radius:var(--r)}
/* a chip's hour picker (Alerts, Reminders) sits in the chip's rounded end: its ring follows that end */
html body.v3 .chip .hour:focus-visible{border-radius:0 999px 999px 0}
html body.v3 .v3-tabbar .v3-tab:focus-visible{outline:2px solid var(--green);outline-offset:-8px;border-radius:30px}
/* a tag's ×: tapped as 44px, drawn inside the 30px tag; the ring goes round the tag it removes */
html body.v3 .v3-tag .x:focus-visible{outline:0}
html body.v3 .v3-tag:has(.x:focus-visible){outline:2px solid var(--green);outline-offset:2px}
/* a round icon button inside its 44px tap area (Today's More, the card's round buttons): the ring goes round the circle */
html body.v3 .v3-hit:has(> .v3-cbtn):focus-visible{outline:0}
html body.v3 .v3-hit:focus-visible > .v3-cbtn{outline:2px solid var(--green);outline-offset:2px}