/* Version 3, nav (D1). Loaded by templates/v3/base.html only when v3 is on. Every rule is scoped:
   under body.v3, or on a v3- class. followap.css is one global namespace; a bare class here can break today's pages.

   The prototype's shell (Redesign_Prototype_v2.1.html: .shell, .screen, .tabbar, .tab, .tab-ind, .orb, the desk's
   .side, .side-ask, .snav, .side-ind, .side-foot) and the head every page starts with (.hd, .exdata, .me, .cbtn, .h1),
   and the two switchers every section uses (.switch with its sliding pill, .seg), with the v3- prefix. Sizes, colours,
   radii, shadows and motion are the prototype's own, token for token. The desk starts at 900px, as in the prototype. */

/* ── the page: paper, the prototype's type, one scrolling column ────────────────────────────────────────────────── */
body.v3{background:var(--paper);font-size:15px}
body.v3 main.wrap{max-width:none;width:auto;margin:0;border-radius:0;background:var(--paper);
  padding:calc(14px + env(safe-area-inset-top)) 18px calc(118px + env(safe-area-inset-bottom))}
body.v3 main.wrap > .v3-hd,body.v3 main.wrap > .v3-owing{max-width:none}

/* ── the head row: Example data (the demo), the page's own buttons, the avatar that opens Settings ──────────────── */
body.v3 .v3-hd{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:40px}
body.v3 .v3-hd-r{display:flex;gap:8px;align-items:center;margin-left:auto}
body.v3 .v3-exdata{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 10px;border-radius:99px;font-size:11px;font-weight:650;letter-spacing:.01em;
  color:var(--grey-d);background:color-mix(in srgb,var(--white) 70%,transparent);border:1px solid var(--line);cursor:pointer;white-space:nowrap;font-family:inherit;line-height:1}
body.v3 .v3-exdata::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--amber)}
body.v3 .v3-me{width:40px;height:40px;border-radius:50%;background:var(--ink);color:var(--white);display:grid;place-items:center;font-weight:750;font-size:15px;flex:none;line-height:1}
body.v3 .v3-cbtn{width:40px;height:40px;border-radius:50%;background:color-mix(in srgb,var(--ink) 6%,transparent);display:grid;place-items:center;flex:none;
  border:0;padding:0;color:var(--ink);cursor:pointer;font-family:inherit}
body.v3 .v3-h1{font-size:32px;line-height:1.05;font-weight:800;letter-spacing:-.04em;margin-top:10px}
body.v3 .v3-owing{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin:0 0 12px;padding:12px 16px;border-radius:var(--r);background:color-mix(in srgb,var(--amber) 14%,var(--white));font-size:14px}
body.v3 .v3-owing form{margin-left:auto}

/* ── the switcher: the top segment of Today and Clients; the white pill slides (nav.js) ─────────────────────────── */
body.v3 .v3-switch{position:relative;display:flex;gap:2px;color:var(--ink);background:color-mix(in srgb,var(--ink) 6%,transparent);border-radius:14px;padding:4px;margin-top:14px;
  overflow-x:auto;scrollbar-width:none;width:max-content;max-width:100%}
body.v3 .v3-switch::-webkit-scrollbar{display:none}
body.v3 .v3-switch a,body.v3 .v3-switch button{position:relative;z-index:1;height:38px;padding:0 14px;display:inline-flex;align-items:center;gap:6px;border-radius:10px;
  font-weight:650;font-size:14.5px;color:var(--grey-d);white-space:nowrap;background:none;border:0;font-family:inherit;cursor:pointer;text-decoration:none}
body.v3 .v3-switch .on{color:var(--ink)}
body.v3 .v3-switch .bdg{min-width:20px;height:20px;padding:0 6px;border-radius:10px;background:var(--green);color:var(--ink);font-size:11.5px;font-weight:750;display:inline-grid;place-items:center}
body.v3 .v3-sw-ind{position:absolute;top:4px;bottom:4px;left:0;border-radius:10px;background:var(--white);box-shadow:0 1px 3px color-mix(in srgb,var(--ink) 14%,transparent);
  will-change:transform;width:10px;transform-origin:0 0;opacity:0}
body.v3 .v3-switch.placed .v3-sw-ind{opacity:1}
body.v3 .v3-switch:not(.placed) .on{background:var(--white);box-shadow:0 1px 3px color-mix(in srgb,var(--ink) 14%,transparent)}   /* before the script places the pill */
/* the segmented control inside a card or a sheet (--n parts, one lit) */
body.v3 .v3-seg{position:relative;display:grid;color:var(--ink);grid-template-columns:repeat(var(--n,4),1fr);background:color-mix(in srgb,var(--ink) 6%,transparent);border-radius:14px;padding:4px;height:44px}
body.v3 .v3-seg button,body.v3 .v3-seg a{position:relative;z-index:1;font-weight:650;font-size:14px;color:var(--grey-d);text-align:center;border-radius:10px;white-space:nowrap;
  background:none;border:0;font-family:inherit;cursor:pointer;display:grid;place-items:center}
body.v3 .v3-seg .on{color:var(--ink)}
body.v3 .v3-seg-ind{position:absolute;top:4px;bottom:4px;left:4px;width:calc((100% - 8px) / var(--n,4));border-radius:10px;background:var(--white);
  box-shadow:0 1px 3px color-mix(in srgb,var(--ink) 14%,transparent);will-change:transform}

/* ── the orb: the tab bar's centre, the sidebar's Ask ───────────────────────────────────────────────────────────── */
body.v3 .v3-orb{position:relative;width:26px;height:26px;border-radius:50%;flex:none;display:inline-block}
body.v3 .v3-orb .core{position:absolute;inset:0;border-radius:50%;
  background:radial-gradient(circle at 34% 30%, var(--white) 0, color-mix(in srgb,var(--green) 45%,var(--white)) 26%, var(--green) 62%, color-mix(in srgb,var(--green) 72%,var(--ink)) 100%)}
body.v3 .v3-orb .halo{position:absolute;inset:-70%;border-radius:50%;
  background:radial-gradient(circle, color-mix(in srgb,var(--green) 55%,transparent) 0, color-mix(in srgb,var(--green) 18%,transparent) 42%, transparent 68%);
  animation:v3-breathe var(--dur-breathe) ease-in-out infinite}
body.v3 .v3-orb .swirl{position:absolute;inset:0;border-radius:50%;opacity:0;
  background:conic-gradient(from 0deg, transparent 0 20%, color-mix(in srgb,var(--white) 70%,transparent) 32%, transparent 48% 70%, color-mix(in srgb,var(--white) 45%,transparent) 82%, transparent 92%);
  transition:opacity var(--dur-base) var(--ease-out)}
body.v3 .thinking .v3-orb .swirl{opacity:1;animation:v3-spin 1.1s linear infinite}
@keyframes v3-breathe{0%,100%{transform:scale(.82);opacity:.55}50%{transform:scale(1.12);opacity:1}}
@keyframes v3-spin{to{transform:rotate(1turn)}}

/* ── the phone's bar: Today, Clients, the orb, Market, Lists ────────────────────────────────────────────────────── */
body.v3 .v3-tabbar{position:fixed;left:14px;right:14px;bottom:calc(12px + env(safe-area-inset-bottom));height:68px;border-radius:34px;background:var(--ink);
  display:grid;grid-template-columns:repeat(var(--n,5),1fr);align-items:center;z-index:50;box-shadow:0 14px 34px -14px color-mix(in srgb,var(--ink) 70%,transparent);
  transition:transform .22s var(--ease-in)}
body.v3.typing .v3-tabbar{transform:translateY(calc(100% + 24px + env(safe-area-inset-bottom)))}   /* the keyboard is up: the bar steps aside, as today's */
body.v3 .v3-tab{position:relative;z-index:1;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  color:color-mix(in srgb,var(--white) 60%,transparent);font-size:11px;font-weight:600;letter-spacing:0;line-height:1.45;
  background:none;border:0;padding:0;margin:0;font-family:inherit;cursor:pointer;text-decoration:none;-webkit-user-select:none;user-select:none}
body.v3 .v3-tab .lb{transition:opacity var(--dur-fast) var(--ease-out)}
body.v3 .v3-tab.on{color:var(--ink)}
body.v3 .v3-tab.on .lb{opacity:0}
body.v3 .v3-tab.on .v3-i{transform:translateY(7px)}
body.v3 .v3-tab .v3-i{transition:transform var(--dur-base) var(--spring-bouncy)}
body.v3 .v3-tab-ind{position:absolute;top:8px;left:0;width:52px;height:52px;border-radius:50%;background:var(--paper);z-index:0;will-change:transform;opacity:0}
body.v3 .v3-tabbar.placed .v3-tab-ind{opacity:1}
/* before the script places the circle: the lit tab draws its own */
body.v3 .v3-tabbar:not(.placed) .v3-tab.on::before{content:"";position:absolute;left:50%;top:8px;width:52px;height:52px;margin-left:-26px;border-radius:50%;background:var(--paper);z-index:-1}
body.v3 .v3-tab.v3-orbtab{color:color-mix(in srgb,var(--white) 78%,transparent)}
body.v3 .v3-tab.v3-orbtab .v3-orb{width:30px;height:30px;margin-bottom:2px}

/* ── the desk's sidebar ─────────────────────────────────────────────────────────────────────────────────────────── */
body.v3 .v3-side{display:none}
@media (min-width:900px){
  body.v3{flex-direction:row}
  body.v3 .v3-tabbar{display:none}
  body.v3 .v3-side{display:flex;flex-direction:column;flex:none;width:var(--side);background:var(--ink);color:var(--white);padding:22px 14px 14px;position:relative;z-index:60;
    overflow-y:auto;scrollbar-width:none;-webkit-user-select:none;user-select:none}
  body.v3 .v3-side::-webkit-scrollbar{display:none}
  body.v3 .v3-wm{font-size:22px;font-weight:800;letter-spacing:-.035em;padding:0 10px 18px;line-height:1.45}
  body.v3 .v3-wm b{color:var(--green);font-weight:800}
  body.v3 .v3-side-ask{display:flex;align-items:center;gap:12px;height:46px;padding:0 10px 0 13px;border-radius:14px;background:color-mix(in srgb,var(--white) 8%,transparent);
    font-weight:600;font-size:15px;margin-bottom:14px;width:100%;flex:none;border:0;color:inherit;font-family:inherit;cursor:pointer;text-align:left;letter-spacing:-.011em}
  body.v3 .v3-side-ask .v3-orb{width:20px;height:20px}
  body.v3 .v3-side-ask kbd{margin-left:auto;font:600 11px/1 Inter,-apple-system,sans-serif;color:color-mix(in srgb,var(--white) 50%,transparent);
    border:1px solid color-mix(in srgb,var(--white) 18%,transparent);border-radius:6px;padding:4px 6px;background:none}
  body.v3 .v3-snav{position:relative;display:grid;gap:1px}
  body.v3 .v3-snav a{position:relative;z-index:1;display:flex;align-items:center;gap:11px;height:38px;padding:0 11px;border-radius:11px;
    color:color-mix(in srgb,var(--white) 66%,transparent);font-weight:650;font-size:14.5px;text-decoration:none;transition:color var(--dur-fast) var(--ease-out)}
  body.v3 .v3-snav a.sub{height:30px;padding-left:44px;font-weight:550;font-size:13.5px;color:color-mix(in srgb,var(--white) 50%,transparent)}
  body.v3 .v3-snav a.on{color:var(--ink)}
  body.v3 .v3-snav a .bdg{margin-left:auto;min-width:20px;height:20px;padding:0 6px;border-radius:10px;background:var(--green);color:var(--ink);font-size:11px;font-weight:750;display:inline-grid;place-items:center}
  body.v3 .v3-snav .gap{height:10px}
  body.v3 .v3-side-ind{position:absolute;left:0;right:0;top:0;height:38px;border-radius:11px;background:var(--paper);z-index:0;will-change:transform;transform-origin:0 0;opacity:0}
  body.v3 .v3-snav.placed .v3-side-ind{opacity:1}
  body.v3 .v3-snav:not(.placed) a.on{background:var(--paper)}       /* before the script places the pill */
  body.v3 .v3-side-foot{margin-top:auto;display:flex;align-items:center;gap:10px;padding:12px 8px 0;border-top:1px solid color-mix(in srgb,var(--white) 10%,transparent);
    width:100%;text-align:left;flex:none;color:inherit;text-decoration:none}
  body.v3 .v3-side-foot .v3-me{width:34px;height:34px;background:color-mix(in srgb,var(--white) 14%,transparent);font-size:13px}
  body.v3 .v3-side-foot b{display:block;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  /* the prototype's .side-foot span: every span in the foot, so the initial and the name are 50% white too */
  body.v3 .v3-side-foot span{font-size:12px;color:color-mix(in srgb,var(--white) 50%,transparent)}
  body.v3 .v3-side-foot > span:last-child{min-width:0}
  body.v3 .v3-side-foot span span{display:block}
  body.v3 .v3-hd .v3-me{display:none}
  body.v3 main.wrap{flex:1 1 auto;min-width:0;padding:28px 40px 60px}
  body.v3 .v3-h1{font-size:42px}
}
@media (min-width:900px) and (hover:hover){
  body.v3 .v3-snav a:not(.on):hover{color:var(--white)}
  body.v3 .v3-side-ask:hover{background:color-mix(in srgb,var(--white) 12%,transparent)}
}
@media (min-width:1600px){
  body.v3 main.wrap{padding:34px 56px 64px}
}
@media (max-width:899px){
  body.v3 .v3-switch a,body.v3 .v3-switch button{padding:0 10px;font-size:13.5px;gap:5px}
  body.v3 .v3-switch .bdg{min-width:18px;height:18px;font-size:11px}
}

/* ── the Example data sheet (the demo) and Ask not on ───────────────────────────────────────────────────────────── */
body.v3 .v3-sheet .v3-sheet-list{margin-top:8px}
body.v3 .v3-sheet a.v3-opt{text-decoration:none}
body.v3 .v3-demo-qr{display:grid;place-items:center;padding:8px 0 4px}
body.v3 .v3-sheet .v3-pill,body.v3 .v3-pill{height:40px;padding:0 16px;border-radius:99px;background:var(--ink);color:var(--white);font-weight:650;font-size:14.5px;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;white-space:nowrap;text-decoration:none;border:0;font-family:inherit;cursor:pointer}
@media (max-width:899px){ body.v3 [data-desk-only]{display:none!important} }

/* ── the skeleton while a tab's page is on its way (nav.js __v3Skeleton; the prototype's SKEL, .rows, .lgrid, .rgrid) ── */
body.v3 .v3-skp-rows{display:grid;grid-template-columns:minmax(0,1fr);gap:8px;margin-top:12px}
body.v3 .v3-skp-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:12px}
@media (min-width:900px){ body.v3 .v3-skp-grid{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (min-width:1600px){ body.v3 .v3-skp-grid{grid-template-columns:repeat(3,minmax(0,1fr))} }

/* ── the shell's toast: a long word (a link) wraps inside it on the phone (D6's request; core.css's .v3-toast) ────── */
body.v3 .v3-toast span.sub{overflow-wrap:anywhere}

@media (prefers-reduced-motion: reduce){
  body.v3 .v3-orb .halo,body.v3 .thinking .v3-orb .swirl{animation:none}
  body.v3 .v3-tab .v3-i,body.v3 .v3-tabbar{transition:none}
}

/* The lit item changes at once with its pill (18 October 2026): no colour easing, so no label is ever light on light */
body.v3 .v3-snav a,body.v3 .v3-tabbar .v3-tab,body.v3 .v3-tabbar .v3-tab *{transition:none}