/* =====================================================================
   Shared navigation for the single-purpose pages
   (sops.html, marketing.html, day.html, client.html)
   =====================================================================
   Those four were built as pill-bar pages, so on a desktop they showed
   the phone layout while Leads / Clients / Time / Reports showed a
   sidebar. This gives them the same sidebar above 900px and keeps the
   pill bar below it.

   Paired with nav.js, which renders BOTH from one list. Do not hand-add
   a link to any page's markup — add it to MODULES in nav.js and every
   page that includes this picks it up. That is the whole point: the
   "new page must be added to every nav bar" rule in CLAUDE.md exists
   because the nav is copied by hand, and it still went wrong in
   September 2026 (SOPs reached the mobile bar on three pages but not
   the desktop one).

   Styles are lifted from index.html's sidebar so the two families match.

   EVERY class rendered by nav.js is tnav-prefixed, including the ones only
   ever used in descendant selectors. That is not tidiness: the first cut
   used a bare .tag for the footer tagline, day.html has its own .tag (a
   gold badge), and the sidebar tagline came out as unreadable pale text on
   a gold pill. A page's own stylesheet wins whenever the class name is one
   it also uses, so no class here may be a word a page might reasonably
   pick. nav.mjs asserts the emitted markup contains nothing unprefixed.
   ===================================================================== */

/* ---- THE SIDEBAR LOOK, for every page that uses this file ----
   Measured across the app on 2026-09-15 and found to be three different
   things: Leads had a gold-edged translucent column, Clients / Reporting /
   Time & Billing had a white-edged one two points lighter, and these five
   pages had a FLAT #132b49 panel with no border, no shadow and no blur. Sam
   picked the Leads one. This is it, and the four hand-written copies in
   index.html, legacy.html, report.html and time.html now match it exactly.
   Change one, change all five — there is no shared stylesheet for the other
   four, which is the whole reason they drifted.

   The opaque #050d1c under the gradient is deliberate. The other four put
   this rule in their dark-theme block and let it composite against the page;
   nav.css has no theme blocks, so a bare translucent gradient would wash out
   in light mode. Stacking the base colour — which is what Leads composites
   against anyway — makes it render identically without caring what is
   behind it. */
.tnav-side{
  width:236px;color:#cdd8e6;
  background:linear-gradient(180deg, rgba(10,24,48,.94), rgba(6,15,32,.97)), #050d1c;
  backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px);
  border-right:1px solid rgba(255,255,255,.14);
  box-shadow:2px 0 0 rgba(226,194,95,.16), 20px 0 60px rgba(0,0,0,.45);
  position:fixed;top:0;bottom:0;left:0;z-index:40;
  display:none;flex-direction:column;overflow-y:auto;
}
/* Header = the logo lockup and nothing else. These four declarations are lifted
   verbatim from index.html's .brand / .brand-logo so the two sidebar families are
   pixel-identical; legacy.html and report.html already match. If one moves, move
   all of them — an inconsistent header across modules is what this replaced. */
.tnav-brand{
  padding:22px 20px 18px;border-bottom:1px solid rgba(255,255,255,.08);
  display:flex;align-items:center;gap:12px;text-decoration:none;color:inherit;
}
.tnav-brand .tnav-logo{height:30px;width:auto;max-width:170px;display:block}

.tnav-stack{display:flex;flex-direction:column;margin:14px 14px 8px;position:relative;z-index:5}
.tnav-stack a{
  position:relative;display:flex;align-items:center;gap:9px;padding:9px 13px;border-radius:12px;
  font-size:11px;font-weight:700;letter-spacing:.01em;text-decoration:none;color:#b8cae4;white-space:nowrap;
  background:linear-gradient(160deg,rgba(255,255,255,.11),rgba(255,255,255,.05));
  border:1px solid rgba(255,255,255,.16);
  box-shadow:0 6px 18px rgba(0,0,0,.25);transition:.16s;
}
.tnav-stack a+a{margin-top:4px}
.tnav-stack .tnav-dot{width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.55;flex:0 0 auto}
.tnav-stack a:hover{z-index:4;transform:translateX(4px);color:#fff;background:rgba(255,255,255,.17)}
.tnav-stack a.tnav-on{
  z-index:3;background:linear-gradient(135deg,#f0dc9c,#e2c25f);color:#08172c;border-color:transparent;
  box-shadow:0 8px 24px rgba(226,194,95,.4), inset 0 1px 0 rgba(255,255,255,.5);
}
.tnav-stack a.tnav-on .tnav-dot{opacity:.85}

.tnav-side .tnav-day{
  display:flex;align-items:center;justify-content:center;gap:6px;margin:10px 14px 0;
  text-decoration:none;font-size:11.5px;font-weight:700;color:#08172c;
  background:linear-gradient(135deg,#f0dc9c,#e2c25f);border-radius:10px;padding:9px 6px;
  box-shadow:0 6px 18px rgba(0,0,0,.24);
}
.tnav-side .tnav-day:hover{filter:brightness(1.06)}
.tnav-side .tnav-360{
  display:flex;align-items:center;justify-content:center;gap:6px;margin:8px 14px 0;
  text-decoration:none;font-size:11px;font-weight:700;color:#d8e4f5;background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.14);border-radius:10px;padding:8px 6px;
}
.tnav-side .tnav-360:hover{border-color:#e2c25f;color:#f0dc9c}
.tnav-foot{
  margin-top:auto;padding:14px 18px;border-top:1px solid rgba(255,255,255,.08);
  font-size:11px;color:#6f86a3;
}
.tnav-foot .tnav-tag{font-family:Georgia,serif;font-style:italic;color:#9fb0c6;font-size:12.5px;margin-bottom:4px}

/* ---- a page's own sub-sections, in the sidebar ----
   Marketing's tabs were pills floating in the content column while Time &
   Billing and Relationship Management put theirs in the sidebar. Same idea,
   two places, two looks. nav.js now mirrors any [data-nav-sections] button
   group into the sidebar using the row style Time & Billing already uses,
   and the pills stay for phones where there is no sidebar to put them in.
   The page's own click handlers are never touched — the sidebar row simply
   clicks the button the page already owns.

   THE CANONICAL SECTION ROW. These four declarations are the same ones
   time.html uses for .nav button and index.html/legacy.html now use for
   .nav-item. If you change one, change all three — the whole point of
   2026-09-11 was that they had drifted. The active state is a SUBTLE gold
   tint, never a solid gold pill: the solid pill belongs to the module link
   above, and two of them in one sidebar leaves you unable to tell which is
   telling you where you are. */
.tnav-sub{padding:12px;display:flex;flex-direction:column;gap:2px;border-top:1px solid rgba(255,255,255,.08);margin-top:12px}
.tnav-sub button{display:flex;align-items:center;gap:11px;width:100%;text-align:left;background:transparent;
  border:0;color:#c2cdde;padding:10px 12px;border-radius:10px;font:inherit;font-size:13.5px;font-weight:500;
  cursor:pointer;transition:.12s}
.tnav-sub button:hover{background:rgba(255,255,255,.06);color:#fff}
.tnav-sub button.tnav-on{background:rgba(209,175,68,.14);color:#fff}

/* ---- the phone pill bar: what these pages had at every width ---- */
.tnav-bar{display:flex;gap:6px;margin-bottom:14px;flex-wrap:wrap}
.tnav-bar a{
  flex:1;min-width:60px;text-align:center;text-decoration:none;font-size:11px;font-weight:700;
  color:#b8cae4;padding:8px 4px;border-radius:9px;background:rgba(255,255,255,.08);
}
.tnav-bar a.tnav-on{background:linear-gradient(135deg,#f0dc9c,#e2c25f);color:#08172c}

/* ---- desktop: sidebar in, pills out ----
   The page keeps its own .wrap width and simply centres in what is left,
   so Log my day stays the narrow single column it was designed as. */
@media(min-width:901px){
  .tnav-side{display:flex}
  .tnav-bar{display:none}
  [data-nav-sections]{display:none!important}   /* mirrored into the sidebar */
  body{padding-left:236px}
}
@media(max-width:900px){ .tnav-sub{display:none} }
@media print{ .tnav-side,.tnav-bar{display:none!important} body{padding-left:0!important} }