/* ===== JC-NF-NAV-001 — hierarchical sidebar with geometric tabs.
   Levels: rail (dark) -> panel (warm light) -> page (--snow). The selection on a level is cut out in the colour of the next
   level and joined to it by two concave corners (radial-gradient quarter circles), so rail tab + panel, and panel item + page,
   each read as one shape. Geometry/palette come from the contract as --nv-* custom properties on .app.tabsnav. ===== */
.app.tabsnav{--nw:calc(var(--nv-rail) + var(--nv-panel));
  --nv-r:var(--nv-rail-l);--nv-ri:var(--nv-rink-l);--nv-ri2:var(--nv-rink2-l);--nv-p:var(--nv-pan-l);--nv-pi:var(--nv-pink-l);--nv-pi2:var(--nv-pink2-l);--nv-a:var(--nv-acc-l);--nv-pg:var(--snow)}
html[data-mode=dark] .app.tabsnav{--nv-r:var(--nv-rail-d);--nv-ri:var(--nv-rink-d);--nv-ri2:var(--nv-rink2-d);--nv-p:color-mix(in srgb,var(--snow) 62%,#000);--nv-pi:var(--nv-pink-d);--nv-pi2:var(--nv-pink2-d);--nv-a:var(--nv-acc-d)}
.app.tabsnav:has(.tnav.shut){--nw:var(--nv-rail)}
.app.tabsnav :is(.ntog,.burger){display:none}
.v3 .side.tnav{width:var(--nw);display:flex;flex-direction:row;background:transparent;border:0;overflow:visible;transform:none;padding:0}

/* ---------- level 1: the rail ---------- */
.tnav .trail{position:relative;z-index:2;flex:none;width:var(--nv-rail);height:100%;display:flex;flex-direction:column;background:var(--nv-r);color:var(--nv-ri2)}
.tnav .nvbrand{display:grid;place-items:center;height:var(--hh,72px);flex:none;text-decoration:none}
.tnav .nvmono{display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:var(--nv-a);color:#fff;font:800 15px/1 var(--f);letter-spacing:-.02em}
.tnav .nvbrand:focus-visible{outline:none}.tnav .nvbrand:focus-visible .nvmono{outline:2px solid var(--nv-ri);outline-offset:3px}
.tnav .nvtabs{flex:1;min-height:0;overflow:auto;scrollbar-width:none;display:flex;flex-direction:column;gap:4px;padding-block:8px;padding-inline-start:10px}
.tnav .tg{position:relative;flex:none;display:grid;justify-items:center;align-content:center;gap:4px;min-height:58px;margin-inline-end:10px;padding:6px 2px;border:0;border-radius:var(--nv-c);background:none;color:inherit;font:600 11px/1.2 var(--f);letter-spacing:.01em;cursor:pointer;transition:background var(--nv-mo),color var(--nv-mo),margin var(--nv-mo)}
.tnav .tg .ni{display:grid;place-items:center;width:24px;height:24px}
.tnav .tg .ni svg{width:22px;height:22px}
.tnav .tg:hover{color:var(--nv-ri);background:rgba(255,255,255,.08)}
.tnav .tg:focus-visible{outline:2px solid var(--nv-ri);outline-offset:-4px}
/* the active group: panel-coloured, flat on the panel side, two concave corners into the panel */
.tnav .tg.on{margin-inline-end:0;background:var(--nv-p);color:var(--nv-pi);border-start-end-radius:0;border-end-end-radius:0}
.tnav .tg.on .ni{color:var(--nv-a)}
.tnav .tg.on::before,.tnav .tg.on::after,.app.v3 .tnav .tp a[data-r].on::before,.app.v3 .tnav .tp a[data-r].on::after{content:"";position:absolute;inset-inline-end:0;width:var(--nv-c);height:var(--nv-c);pointer-events:none}
.tnav .tg.on::before{bottom:100%;background:radial-gradient(circle at 0 0,transparent calc(var(--nv-c) - .5px),var(--nv-p) var(--nv-c))}
.tnav .tg.on::after{top:100%;background:radial-gradient(circle at 0 100%,transparent calc(var(--nv-c) - .5px),var(--nv-p) var(--nv-c))}
[dir=rtl] .tnav .tg.on::before{background:radial-gradient(circle at 100% 0,transparent calc(var(--nv-c) - .5px),var(--nv-p) var(--nv-c))}
[dir=rtl] .tnav .tg.on::after{background:radial-gradient(circle at 100% 100%,transparent calc(var(--nv-c) - .5px),var(--nv-p) var(--nv-c))}
.tnav .nvcol{flex:none;display:grid;place-items:center;width:40px;height:40px;margin:8px auto 16px;border:0;border-radius:12px;background:none;color:var(--nv-ri2);cursor:pointer}
.tnav .nvcol svg{width:20px;height:20px}
.tnav .nvcol:hover{color:var(--nv-ri);background:rgba(255,255,255,.08)}
.tnav .nvcol:focus-visible{outline:2px solid var(--nv-ri);outline-offset:2px}

/* ---------- level 2: the panel ---------- */
.tnav .tpanel{position:relative;z-index:1;flex:none;width:var(--nv-panel);height:100%;overflow:auto;scrollbar-width:thin;background:var(--nv-p);color:var(--nv-pi)}
.tnav .tp{display:none;padding-block:0 24px;padding-inline-start:12px}
.tnav .tp.on{display:block;animation:nvIn var(--nv-mo) ease-out}
@keyframes nvIn{from{opacity:0;transform:translateX(calc(var(--nv-flip,1) * -6px))}to{opacity:1;transform:none}}
[dir=rtl] .tnav{--nv-flip:-1}
.tnav .tph{display:grid;grid-template-columns:1fr auto;align-content:center;height:var(--hh,72px);padding-inline:8px 12px;margin-block-end:4px}
.tnav .tph .tws{grid-column:1;font:700 15px/1.3 var(--f);color:var(--nv-pi);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tnav .tph .tgl{display:none;grid-column:1;font:700 17px/1.3 var(--f);color:var(--nv-pi)}
.tnav .tph .tclose{grid-column:2;grid-row:1/span 2;align-self:center;width:32px;height:32px;display:none}
.tnav .tsec+.tsec{margin-block-start:14px}
.tnav .tsec h6{margin:0 0 6px;padding-inline:12px;font:700 11px/1.4 var(--f);letter-spacing:.07em;text-transform:uppercase;color:var(--nv-pi2)}
[lang=he] .tnav .tsec h6,[dir=rtl] .tnav .tsec h6{letter-spacing:0;text-transform:none;font-size:12px}
.tnav .tp ul{list-style:none;margin:0;padding:0;display:grid;gap:2px}
/* ---------- level 3: the screen — the active item is cut out in the page colour and joined to the page ---------- */
.app.v3 .tnav .tp a[data-r]{position:relative;display:flex;align-items:center;gap:12px;min-height:var(--nv-h);padding-inline:12px 14px;border-radius:0;border-start-start-radius:var(--nv-c);border-end-start-radius:var(--nv-c);color:var(--nv-pi2);background:none;font:500 14px/1.3 var(--f);text-decoration:none;transition:background var(--nv-mo),color var(--nv-mo)}
.app.v3 .tnav .tp a[data-r] .ni{display:grid;place-items:center;width:20px;height:20px;flex:none;color:inherit}
.app.v3 .tnav .tp a[data-r] .ni svg{width:20px;height:20px}
.app.v3 .tnav .tp a[data-r] .nt{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.app.v3 .tnav .tp a[data-r]:hover{color:var(--nv-pi);background:color-mix(in srgb,var(--nv-pi) 6%,transparent)}
.app.v3 .tnav .tp a[data-r]:focus-visible{outline:2px solid var(--nv-pi);outline-offset:-2px}
.app.v3 .tnav .tp a[data-r].on{background:var(--nv-pg);color:var(--ink);font-weight:650}
.app.v3 .tnav .tp a[data-r].on .ni{color:var(--nv-a)}
.app.v3 .tnav .tp a[data-r].on::before{bottom:100%;background:radial-gradient(circle at 0 0,transparent calc(var(--nv-c) - .5px),var(--nv-pg) var(--nv-c))}
.app.v3 .tnav .tp a[data-r].on::after{top:100%;background:radial-gradient(circle at 0 100%,transparent calc(var(--nv-c) - .5px),var(--nv-pg) var(--nv-c))}
[dir=rtl] .app.v3 .tnav .tp a[data-r].on::before{background:radial-gradient(circle at 100% 0,transparent calc(var(--nv-c) - .5px),var(--nv-pg) var(--nv-c))}
[dir=rtl] .app.v3 .tnav .tp a[data-r].on::after{background:radial-gradient(circle at 100% 100%,transparent calc(var(--nv-c) - .5px),var(--nv-pg) var(--nv-c))}

/* ---------- panel hidden: the active group itself is cut out into the page ---------- */
.tnav.shut .tpanel{display:none}
.tnav.shut .tg.on{background:var(--nv-pg);color:var(--ink)}
.tnav.shut .tg.on::before{background:radial-gradient(circle at 0 0,transparent calc(var(--nv-c) - .5px),var(--nv-pg) var(--nv-c))}
.tnav.shut .tg.on::after{background:radial-gradient(circle at 0 100%,transparent calc(var(--nv-c) - .5px),var(--nv-pg) var(--nv-c))}
[dir=rtl] .tnav.shut .tg.on::before{background:radial-gradient(circle at 100% 0,transparent calc(var(--nv-c) - .5px),var(--nv-pg) var(--nv-c))}
[dir=rtl] .tnav.shut .tg.on::after{background:radial-gradient(circle at 100% 100%,transparent calc(var(--nv-c) - .5px),var(--nv-pg) var(--nv-c))}
.tscrim{display:none}

/* ---------- phone: the rail becomes a bottom bar, the panel a sheet rising out of the active tab ---------- */
@media (max-width:760px){
  .app.tabsnav{--nw:0px}
  .app.tabsnav .main{padding-block-end:calc(var(--nv-bar) + env(safe-area-inset-bottom,0px))}
  .v3 .side.tnav{position:fixed;inset:auto 0 0 0;width:auto;height:auto;flex-direction:column-reverse;z-index:1300}
  .tnav .trail{width:auto;height:calc(var(--nv-bar) + env(safe-area-inset-bottom,0px));padding-block-end:env(safe-area-inset-bottom,0px)}
  .tnav :is(.nvbrand,.nvcol){display:none}
  .tnav .nvtabs{flex-direction:row;gap:2px;padding:6px;overflow:visible}
  .tnav .tg{flex:1;min-width:0;min-height:52px;margin:0;padding:6px 0;font-size:10.5px}
  .tnav .tg .tl{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .tnav .tg.on,.tnav.shut .tg.on{margin:0;background:rgba(255,255,255,.12);color:var(--nv-ri);border-radius:var(--nv-c)}
  .tnav .tg.on::before,.tnav .tg.on::after{display:none}
  /* sheet open: the active tab is the sheet's stem, joined at the bar's top edge by two concave corners */
  .tnav.up .tg.on,.tnav.up.shut .tg.on{background:var(--nv-p);color:var(--nv-pi);margin-block-start:-6px;padding-block-start:12px;border-start-start-radius:0;border-start-end-radius:0}
  .tnav.up .tg.on::before,.tnav.up .tg.on::after{display:block;top:0;bottom:auto;inset-inline:auto;width:var(--nv-c);height:var(--nv-c)}
  .tnav.up .tg.on::before{left:calc(-1 * var(--nv-c));background:radial-gradient(circle at 0 100%,transparent calc(var(--nv-c) - .5px),var(--nv-p) var(--nv-c))}
  .tnav.up .tg.on::after{right:calc(-1 * var(--nv-c));background:radial-gradient(circle at 100% 100%,transparent calc(var(--nv-c) - .5px),var(--nv-p) var(--nv-c))}
  .tnav .tpanel,.tnav.shut .tpanel{display:block;position:fixed;inset-inline:0;bottom:calc(var(--nv-bar) + env(safe-area-inset-bottom,0px));width:auto;height:auto;max-height:var(--nv-sheet);border-radius:20px 20px 0 0;box-shadow:0 -14px 34px -10px rgba(0,0,0,.28);transform:translateY(calc(100% + var(--nv-bar) + 20px));pointer-events:none;transition:transform var(--nv-mo) cubic-bezier(.2,.9,.3,1)}
  .tnav.up .tpanel{transform:none;pointer-events:auto}
  .tnav .tpanel::before{content:"";display:block;width:36px;height:4px;margin:8px auto 0;border-radius:2px;background:color-mix(in srgb,var(--nv-pi) 22%,transparent)}
  .tnav .tp{padding:0 12px 14px}
  .tnav .tph{height:auto;padding:10px 8px 8px}
  .tnav .tph .tclose{display:grid}
  .app.v3 .tnav .tp a[data-r]{min-height:48px;border-radius:12px}
  .app.v3 .tnav .tp a[data-r].on{background:var(--nv-pg);box-shadow:0 1px 2px rgba(0,0,0,.06)}
  .app.v3 .tnav .tp a[data-r].on::before,.app.v3 .tnav .tp a[data-r].on::after{display:none}
  .tscrim{display:block;position:fixed;inset:0;z-index:1250;background:rgba(10,10,10,.34)}
  .tscrim[hidden]{display:none}
}
@media (prefers-reduced-motion:reduce){.tnav,.tnav *{animation:none!important;transition:none!important}}
@media (forced-colors:active){.tnav .tg.on,.app.v3 .tnav .tp a[data-r].on{outline:2px solid CanvasText}}

/* ---------- v1.1 · one cut-out on screen at a time (the one closest to the page), each fact said once ----------
   With the panel open the rail's active group is a quiet pill, not a second tab: the strong geometric tab is only where
   you are (screen -> page). Panel hidden: the rail tab becomes that one cut-out. The panel head names the workspace once;
   the group name lives only in the rail. */
@media (min-width:761px){
  .tnav:not(.shut) .tg.on{margin-inline-end:10px;border-radius:var(--nv-c);background:rgba(255,255,255,.13);color:var(--nv-ri)}
  .tnav:not(.shut) .tg.on::before,.tnav:not(.shut) .tg.on::after{display:none}
  .tnav:not(.shut) .tg.on .ni{color:var(--nv-ri)}
  .tnav:not(.shut) .tg.on .tl{font-weight:700}
}
@media (max-width:760px){ .tnav .tph .tws{display:none} .tnav .tph .tgl{display:block} }