/* ============================================================================
   ClaudeLight site chrome — the site header, a product's header and the footer
   (marketing pages, PIF, AMM, Expense). Markup: shared/site-chrome/chrome.php.
   PIF's <head> versions this file and site-chrome.js (?v= in
   price-index/includes/header.php): bump it when either changes.

   Everything is namespaced .cl-* so it cannot collide with page or app CSS, and
   colours are variables that FALL BACK to the site palette: pages that define
   --ink / --paper / --sage … (index, dark, quote, pif, amm, PIF app) restyle the
   chrome with their theme automatically; apps with other token names (AMM,
   Expense) get the exact site look from the fallbacks.
   ============================================================================ */

.cl-header, .cl-footer {
  --cl-ink:        var(--ink, #0f1a14);
  --cl-ink-muted:  var(--ink-muted, #4a5a52);
  --cl-ink-faint:  var(--ink-faint, #8a9a90);
  --cl-paper:      var(--paper, #f7f5f0);
  --cl-surface:    var(--white, #ffffff);
  --cl-sage:       var(--sage, #2d5a3d);
  --cl-sage-light: var(--sage-light, #e8f0ea);
  --cl-gold:       var(--gold, #c8a84b);
  --cl-rule:       var(--rule, #d8d4cc);
  --cl-navy:       var(--brand-navy, #051638);
  --cl-brand-gold: var(--brand-gold, #a97526);
  --cl-radius:     4px;
  --cl-radius-lg:  12px;
  font-family: 'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  box-sizing: border-box;
}
.cl-header *, .cl-footer * { box-sizing: border-box; }
.cl-palette-fixed {
  --cl-ink: #0f1a14; --cl-ink-muted: #4a5a52; --cl-ink-faint: #8a9a90; --cl-paper: #f7f5f0; --cl-surface: #ffffff;
  --cl-sage: #2d5a3d; --cl-sage-light: #e8f0ea; --cl-gold: #c8a84b; --cl-rule: #d8d4cc;
  --cl-navy: #051638; --cl-brand-gold: #a97526;
}

/* ─── HEADER ─── */
.cl-header {
  z-index: 100; left: 0; right: 0; top: 0;
  background: color-mix(in srgb, var(--cl-paper) 92%, transparent);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--cl-rule);
  transition: box-shadow 0.3s;
  line-height: 1.4;
  font-size: 15px;
}
.cl-header.cl-mode-site { position: fixed; }
.cl-header.cl-mode-app  { position: sticky; }
.cl-header.scrolled, .cl-header.cl-scrolled { box-shadow: 0 2px 20px rgba(15, 26, 20, 0.08); }
.cl-header-inner {
  height: 68px; padding: 0 clamp(1.25rem, 5vw, 3rem);
  display: flex; align-items: center; justify-content: space-between; gap: 1.25rem;
  max-width: none; margin: 0;
}

.cl-logo { display: flex; align-items: center; gap: 10px; text-decoration: none !important; flex-shrink: 0; }
.cl-logo img { width: 36px; height: 36px; object-fit: contain; display: block; }
.cl-wordmark {
  font-family: 'Cinzel', 'DM Serif Display', Georgia, serif;
  font-size: 1.15rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap;
  line-height: 1;
}
.cl-header .cl-wm-claude { color: var(--cl-navy); }
/* Product lockup: the wordmark with the product name beneath (PIF, AMM). */
.cl-logo-stack { display: flex; flex-direction: column; justify-content: center; line-height: 1.02; }
.cl-logo-sub { font-size: 0.6rem; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--cl-ink-faint); margin-top: 3px; }

.cl-header .cl-wm-light  { color: var(--cl-brand-gold); }

.cl-nav { display: flex; align-items: center; gap: 1.25rem; flex: 1; justify-content: flex-end; }
.cl-nav > a, .cl-dd-toggle {
  font-size: 0.9rem; font-weight: 400; color: var(--cl-ink-muted); text-decoration: none;
  white-space: nowrap; background: none; border: 0; padding: 0; cursor: pointer; font-family: inherit;
  transition: color 0.2s; line-height: 1.4;
}
.cl-nav > a:hover, .cl-dd-toggle:hover, .cl-dd.open > .cl-dd-toggle { color: var(--cl-sage); }
.cl-dd-toggle { display: inline-flex; align-items: center; gap: 5px; }
.cl-ico { width: 12px; height: 12px; flex-shrink: 0; }
.cl-dd-toggle .cl-ico { transition: transform 0.25s; }
.cl-dd.open > .cl-dd-toggle .cl-ico { transform: rotate(180deg); }

.cl-dd { position: relative; }
.cl-dd-menu {
  position: absolute; top: 100%; left: 0; margin-top: 0.75rem; min-width: 250px;
  background: var(--cl-surface); border: 1px solid var(--cl-rule); border-radius: var(--cl-radius-lg);
  box-shadow: 0 12px 32px rgba(15, 26, 20, 0.14); padding: 0.4rem;
  opacity: 0; visibility: hidden; transform: translateY(6px);
  transition: opacity 0.2s, transform 0.2s, visibility 0.2s; z-index: 120; text-align: left;
}
.cl-dd-menu.cl-dd-right { left: auto; right: 0; }
.cl-dd.open > .cl-dd-menu { opacity: 1; visibility: visible; transform: translateY(0); }
@media (hover: hover) and (min-width: 1081px) {
  .cl-dd:hover > .cl-dd-menu, .cl-dd:focus-within > .cl-dd-menu { opacity: 1; visibility: visible; transform: translateY(0); }
  .cl-dd:hover > .cl-dd-toggle { color: var(--cl-sage); }
}
/* bridge the gap so the menu doesn't close while the pointer crosses it */
.cl-dd-menu::before { content: ''; position: absolute; left: 0; right: 0; top: -0.8rem; height: 0.8rem; }
.cl-dd-menu a {
  display: block; padding: 0.55rem 0.8rem; border-radius: var(--cl-radius);
  font-size: 0.88rem; color: var(--cl-ink-muted); text-decoration: none; white-space: nowrap;
}
.cl-dd-menu a:hover { background: var(--cl-sage-light); color: var(--cl-sage); }
.cl-dd-menu hr { border: 0; border-top: 1px solid var(--cl-rule); margin: 0.3rem 0; }
.cl-dd-head { padding: 0.55rem 0.8rem 0.4rem; display: flex; flex-direction: column; gap: 2px; }
.cl-dd-head strong { color: var(--cl-ink); font-weight: 500; font-size: 0.9rem; }
.cl-dd-head span { color: var(--cl-ink-faint); font-size: 0.78rem; }
.cl-dd-label { display: block; padding: 0.35rem 0.8rem 0.15rem; font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--cl-ink-faint); }

/* Product menu: Product › (product row) › About X / Login X, opening to the right. */
.cl-flyout { position: relative; }
.cl-dd-menu a.cl-flyout-toggle { display: flex; align-items: center; justify-content: space-between; gap: 14px; color: var(--cl-ink-muted); }
.cl-flyout-toggle .cl-ico { opacity: 0.6; transition: transform 0.2s, opacity 0.2s; }
.cl-flyout:hover > .cl-flyout-toggle, .cl-flyout:focus-within > .cl-flyout-toggle, .cl-flyout.open > .cl-flyout-toggle {
  background: var(--cl-sage-light); color: var(--cl-sage); box-shadow: inset 0 -2px 0 var(--cl-gold);
}
.cl-flyout:hover > .cl-flyout-toggle .cl-ico, .cl-flyout:focus-within > .cl-flyout-toggle .cl-ico, .cl-flyout.open > .cl-flyout-toggle .cl-ico { transform: translateX(2px); opacity: 1; }
.cl-flyout-menu {
  position: absolute; top: -0.4rem; left: calc(100% + 6px); min-width: 170px;
  background: var(--cl-surface); border: 1px solid var(--cl-rule); border-radius: var(--cl-radius-lg);
  box-shadow: 0 12px 32px rgba(15, 26, 20, 0.14); padding: 0.4rem; z-index: 1;
  opacity: 0; visibility: hidden; transform: translateX(6px); transition: opacity 0.2s, transform 0.2s, visibility 0.2s;
}
/* Invisible bridge across the gap so the pointer never falls off between the two panels. */
.cl-flyout-menu::before { content: ''; position: absolute; top: 0; bottom: 0; right: 100%; width: 10px; }
.cl-flyout:hover > .cl-flyout-menu, .cl-flyout:focus-within > .cl-flyout-menu, .cl-flyout.open > .cl-flyout-menu {
  opacity: 1; visibility: visible; transform: translateX(0);
}
.cl-free {
  display: inline-block; margin-left: 4px; padding: 1px 7px; border-radius: 999px;
  background: var(--cl-gold); color: #0f1a14; font-size: 0.6rem; font-weight: 700;
  letter-spacing: 0.05em; text-transform: uppercase; vertical-align: middle; white-space: nowrap;
}

.cl-actions { display: flex; align-items: center; gap: 0.75rem; flex-shrink: 0; }
.cl-btn {
  display: inline-flex; align-items: center; padding: 8px 18px; border-radius: var(--cl-radius);
  font-size: 0.9rem; font-weight: 500; text-decoration: none !important; white-space: nowrap;
  transition: background 0.2s, color 0.2s, transform 0.2s; line-height: 1.4;
}
.cl-btn:hover { transform: translateY(-1px); }
.cl-btn-gold { background: var(--cl-gold); color: #0f1a14 !important; }
.cl-btn-gold:hover { background: var(--cl-ink); color: var(--cl-paper) !important; }
.cl-btn-sage { background: var(--cl-sage); color: #fff !important; }
.cl-btn-sage:hover { background: var(--cl-ink); color: var(--cl-paper) !important; }

/* Account slot: .nav-login / .nav-user are also written by index/dark/quote renderAuthNav(). */
.cl-account { display: flex; align-items: center; gap: 8px; }
.cl-header .nav-login, .cl-user-btn {
  display: inline-flex; align-items: center; gap: 6px;
  border: 1.5px solid var(--cl-sage); color: var(--cl-sage) !important; background: transparent;
  padding: 6px 16px; border-radius: var(--cl-radius); font-size: 0.9rem; font-weight: 500;
  text-decoration: none !important; white-space: nowrap; cursor: pointer; font-family: inherit; line-height: 1.4;
  transition: background 0.2s, color 0.2s;
}
.cl-header .nav-login:hover, .cl-user-btn:hover, .cl-account.open .cl-user-btn { background: var(--cl-sage); color: #fff !important; }
.cl-header .nav-user { display: inline-flex; align-items: center; gap: 8px; font-size: 0.9rem; color: var(--cl-ink-muted); white-space: nowrap; }
.cl-header .nav-user strong { color: var(--cl-ink); font-weight: 500; }
.cl-header .nav-user button { background: none; border: none; color: var(--cl-sage); cursor: pointer; font: inherit; padding: 0; text-decoration: underline; text-underline-offset: 3px; }

.cl-theme-toggle {
  display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; padding: 0;
  border-radius: 50%; border: 1.5px solid var(--cl-rule); background: none; color: var(--cl-ink-muted) !important; cursor: pointer;
  transition: color 0.2s, border-color 0.2s; flex-shrink: 0;
}
.cl-theme-toggle:hover { color: var(--cl-gold) !important; border-color: var(--cl-gold); }
.cl-theme-toggle svg { width: 18px; height: 18px; }

.cl-hamburger { display: none; flex-direction: column; gap: 5px; cursor: pointer; padding: 6px; background: none; border: 0; }
.cl-hamburger span { width: 22px; height: 2px; background: var(--cl-ink); display: block; border-radius: 2px; transition: transform 0.25s, opacity 0.25s; }
.cl-hamburger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.cl-hamburger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.cl-hamburger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.cl-mobile {
  display: none; position: absolute; top: 100%; left: 0; right: 0;
  background: var(--cl-paper); border-bottom: 1px solid var(--cl-rule); box-shadow: 0 12px 24px rgba(15, 26, 20, 0.08);
  padding: 1rem clamp(1.25rem, 5vw, 3rem) 1.25rem; flex-direction: column; gap: 0.1rem;
  max-height: calc(100vh - 68px); overflow-y: auto;
}
.cl-mobile.open { display: flex; }
.cl-mobile a { font-size: 1rem; color: var(--cl-ink); text-decoration: none; padding: 0.6rem 0; border-bottom: 1px solid var(--cl-rule); }
.cl-mobile a.cl-mobile-sub { padding-left: 1rem; color: var(--cl-ink-muted); font-size: 0.95rem; }
.cl-mobile-label { font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--cl-ink-faint); padding-top: 0.75rem; }
.cl-mobile-product { font-size: 0.9rem; color: var(--cl-ink); font-weight: 500; padding-top: 0.5rem; }
.cl-mobile a.cl-mobile-sub.cl-mobile-sub2 { padding-left: 2rem; }

/* The full link row needs ~1000px: below that it overflows — CLAUDE.md §14. */
@media (max-width: 1080px) {
  .cl-nav, .cl-actions .cl-btn, .cl-actions .cl-account, .cl-actions .cl-theme-toggle { display: none; }
  .cl-hamburger { display: flex; }
}
@media (max-width: 420px) {
  .cl-wordmark { font-size: 1rem; }
  .cl-logo img { width: 30px; height: 30px; }
}

/* ─── PRODUCT HEADER (cl_product_header in chrome.php) ───
   A product's own app bar, PIF today, modelled on AMM's topbar (asset-iq styles.css .topbar):
   compact and white, the site header's logo lockup with the product's name, the app's pages as
   TABS with icons, a pill menu per group (PIF's Admin ▾) and an avatar account button.
   Deliberately not the marketing bar, apart from that logo.
   It carries .cl-header too, because site-chrome.js looks for that class, so every rule here is
   scoped to .cl-ph and out-ranks the site header's where the two meet: nothing below reaches a
   page without a product header. Its own palette (AMM's), so a product can change its accent
   here without touching the site's tokens. */
.cl-ph {
  --cl-ph-surface: #ffffff; --cl-ph-ink: #0f1a14; --cl-ph-muted: #5b6b62;
  --cl-ph-line: #dcd8d0; --cl-ph-line-2: #ebe8e1; --cl-ph-tint: #f2f0ea; --cl-ph-press: #e9e6de;
  --cl-ph-accent: #2d5a3d; --cl-ph-accent-soft: #e8f0ea; --cl-ph-accent-hover: #dce9e0;
  --cl-ph-accent-ink: #24492f; --cl-ph-accent-line: #b9cfc0;
}
/* A 59px bar plus its 1px border. It is sticky, in the page's flow, so no content sits under it. */
.cl-header.cl-ph {
  position: sticky; background: var(--cl-ph-surface); -webkit-backdrop-filter: none; backdrop-filter: none;
  border-bottom-color: var(--cl-ph-line); color: var(--cl-ph-ink); font-size: 14px; line-height: 1.3;
}
.cl-ph-inner { height: 59px; padding: 0 clamp(12px, 2vw, 24px); display: flex; align-items: center; gap: 12px; }
.cl-ph .cl-ico { width: 18px; height: 18px; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.cl-ph .cl-ico-caret { width: 14px; height: 14px; }
.cl-ph a:focus-visible, .cl-ph button:focus-visible { outline: 2px solid var(--cl-ph-accent); outline-offset: 2px; }

/* The logo is the site header's lockup (cl_logo_lockup) on the same .cl-logo rules above: a 36px
   mark, the wordmark at 1.15rem and the product name under it; 30px and 1rem at 420px and below.
   This only makes the link a 40px tap target that tints on hover. Never size the lockup here. */
.cl-ph-brand {
  display: inline-flex; align-items: center; flex-shrink: 0; height: 40px; padding: 0 6px; margin: 0 4px 0 -6px;
  border-radius: 8px; transition: background-color 0.15s;
}
.cl-ph-brand:hover { background: var(--cl-ph-tint); }

/* Tabs: icon + label in a rounded shape that tints on hover, so they read as buttons, not text. */
.cl-ph-nav { display: flex; align-items: center; gap: 4px; flex: 1; min-width: 0; }
.cl-ph .cl-ph-tab {
  display: inline-flex; align-items: center; gap: 8px; flex-shrink: 0; height: 40px; padding: 0 12px;
  border-radius: 8px; color: var(--cl-ph-muted); font-size: 14px; font-weight: 500; white-space: nowrap;
  text-decoration: none; cursor: pointer; transition: background-color 0.15s, color 0.15s;
}
.cl-ph .cl-ph-tab:hover { background: var(--cl-ph-tint); color: var(--cl-ph-ink); }
.cl-ph .cl-ph-tab:active { background: var(--cl-ph-press); }
.cl-ph .cl-ph-tab.active { background: var(--cl-ph-accent-soft); color: var(--cl-ph-accent-ink); font-weight: 600; }
.cl-ph .cl-ph-tab.active:hover { background: var(--cl-ph-accent-hover); }

/* A group (PIF's Admin ▾): a thin divider pushes it right, beside the account button, so
   admin-only pages never sit among the tabs customers see. */
.cl-ph-sep { flex: 0 0 1px; align-self: center; height: 24px; margin: 0 6px 0 auto; background: var(--cl-ph-line); }
.cl-ph .cl-ph-pill {
  display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0; height: 40px; padding: 0 12px 0 10px;
  border: 1px solid var(--cl-ph-line); border-radius: 999px; background: var(--cl-ph-surface); color: var(--cl-ph-muted);
  font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; line-height: 1; white-space: nowrap;
  transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}
.cl-ph .cl-ph-pill > .cl-ico:first-child { width: 16px; height: 16px; }
.cl-ph .cl-ph-group > .cl-ph-pill:hover, .cl-ph .cl-ph-group.open > .cl-ph-pill { background: var(--cl-ph-tint); border-color: #c9c4b9; color: var(--cl-ph-ink); }
.cl-ph .cl-ph-group > .cl-ph-pill.active { background: var(--cl-ph-accent-soft); border-color: var(--cl-ph-accent-line); color: var(--cl-ph-accent-ink); }
.cl-ph .cl-ph-group > .cl-ph-pill.active:hover, .cl-ph .cl-ph-group.open > .cl-ph-pill.active { background: var(--cl-ph-accent-hover); }
/* Only the caret turns when a menu opens (the site rule turns every icon in its button). */
.cl-ph .cl-dd.open > .cl-dd-toggle .cl-ico:not(.cl-ico-caret) { transform: none; }
/* A count (pending requests): ink on gold, the .cl-free pairing (about 7.8:1). */
.cl-ph .cl-count {
  display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 6px;
  border-radius: 999px; background: #c8a84b; color: #0f1a14;
  font-size: 11px; font-weight: 700; line-height: 1; letter-spacing: 0; text-transform: none;
}
.cl-ph .cl-vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Account: an avatar with initials (AMM's), the first name and a caret; or a filled Sign in. */
.cl-ph-account { display: flex; align-items: center; flex-shrink: 0; }
.cl-ph .cl-ph-user {
  display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 10px 0 4px;
  border: 1px solid transparent; border-radius: 999px; background: none; color: var(--cl-ph-ink);
  font-size: 14px; font-weight: 500; line-height: 1; transition: background-color 0.15s, border-color 0.15s;
}
.cl-ph .cl-ph-account > .cl-ph-user:hover, .cl-ph .cl-ph-account.open > .cl-ph-user { background: var(--cl-ph-tint); border-color: var(--cl-ph-line); color: var(--cl-ph-ink); }
.cl-ph-avatar {
  display: inline-flex; align-items: center; justify-content: center; flex: 0 0 32px; width: 32px; height: 32px;
  border-radius: 50%; background: var(--cl-ph-accent); color: #fff; font-size: 12px; font-weight: 600; letter-spacing: 0.02em;
}
.cl-ph-first { max-width: 9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 1.3; }
.cl-ph .cl-ph-signin {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 40px; padding: 0 16px;
  border-radius: 8px; background: var(--cl-ph-accent); color: #fff; font-size: 14px; font-weight: 600;
  white-space: nowrap; text-decoration: none; transition: background-color 0.15s;
}
.cl-ph .cl-ph-signin:hover { background: var(--cl-ph-accent-ink); color: #fff; }

/* Menus open on a click, a tap or Enter only, not on hover or focus as the site header's do, so a
   second click and Escape really close them. That is site-chrome.js's job, and it marks the bar
   .cl-js once it has wired them. Until then (scripts off, blocked, still loading or broken) hover
   and keyboard focus open them at every width that shows them, so no link is ever out of reach.
   The items are 40px rows. */
.cl-ph.cl-js .cl-dd:not(.open) > .cl-dd-menu { opacity: 0; visibility: hidden; transform: translateY(6px); }
.cl-ph:not(.cl-js) .cl-dd:hover > .cl-dd-menu,
.cl-ph:not(.cl-js) .cl-dd:focus-within > .cl-dd-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.cl-ph .cl-dd-menu { margin-top: 10px; min-width: 240px; padding: 6px; border-color: var(--cl-ph-line); box-shadow: 0 16px 40px rgba(15, 26, 20, 0.16); }
.cl-ph .cl-dd-menu a {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 40px; padding: 0 12px;
  border-radius: 8px; color: var(--cl-ph-ink); font-size: 14px; transition: background-color 0.15s, color 0.15s;
}
.cl-ph .cl-dd-menu a:hover { background: var(--cl-ph-accent-soft); color: var(--cl-ph-accent-ink); }
.cl-ph .cl-dd-menu a.active { background: var(--cl-ph-accent-soft); color: var(--cl-ph-accent-ink); font-weight: 600; box-shadow: inset 3px 0 0 var(--cl-ph-accent); }
.cl-ph .cl-dd-menu hr { border: 0; border-top: 1px solid var(--cl-ph-line-2); margin: 6px 0; opacity: 1; }
.cl-ph .cl-dd-label { padding: 8px 12px 4px; color: var(--cl-ph-muted); font-size: 11px; font-weight: 600; letter-spacing: 0.08em; }
.cl-ph .cl-dd-head { padding: 8px 12px 6px; }
.cl-ph .cl-dd-head strong { color: var(--cl-ph-ink); font-size: 14px; font-weight: 600; }
.cl-ph .cl-dd-head span { color: var(--cl-ph-muted); font-size: 12px; }

/* Phones: the logo and a hamburger (AMM's icon button); the panel lists the same items. */
.cl-ph .cl-ph-burger {
  display: none; width: 40px; height: 40px; padding: 0; margin-left: auto; align-items: center; justify-content: center;
  border-radius: 8px; transition: background-color 0.15s;
}
.cl-ph .cl-ph-burger:hover, .cl-ph .cl-ph-burger[aria-expanded="true"] { background: var(--cl-ph-tint); }
.cl-ph .cl-ph-burger span { width: 20px; background: var(--cl-ph-ink); }
.cl-ph .cl-mobile {
  gap: 2px; padding: 8px clamp(12px, 2vw, 24px) 16px; background: var(--cl-ph-surface);
  border-bottom: 1px solid var(--cl-ph-line); box-shadow: 0 16px 32px rgba(15, 26, 20, 0.12);
  max-height: calc(100vh - 60px); max-height: calc(100dvh - 60px); overscroll-behavior: contain;
}
.cl-ph .cl-mobile a {
  display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 0 12px; border: 0; border-radius: 8px;
  color: var(--cl-ph-ink); font-size: 15px; text-decoration: none; transition: background-color 0.15s;
}
.cl-ph .cl-mobile a:hover { background: var(--cl-ph-tint); }
.cl-ph .cl-mobile a.active { background: var(--cl-ph-accent-soft); color: var(--cl-ph-accent-ink); font-weight: 600; }
.cl-ph .cl-ph-mtab .cl-ico { color: var(--cl-ph-muted); }
.cl-ph .cl-ph-mtab.active .cl-ico { color: currentColor; }
/* Rows with no icon (a group's pages, the account's) line up with the tabs' labels. */
.cl-ph .cl-mobile a.cl-mobile-sub { padding-left: 42px; justify-content: space-between; color: var(--cl-ph-ink); font-size: 15px; }
/* Sign out is an action, not an app: its own row under a rule, flush with the section labels, as
   the desktop menu has a rule above it. CSS only, so the site header's phone menu is unchanged. */
.cl-ph .cl-ph-macct a#mNavAuth { position: relative; margin-top: 9px; }
.cl-ph .cl-ph-macct a#mNavAuth::before {
  content: ''; position: absolute; left: 0; right: 0; top: -6px; border-top: 1px solid var(--cl-ph-line-2);
}
.cl-ph-msec { display: flex; flex-direction: column; gap: 2px; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--cl-ph-line); }
.cl-ph .cl-mobile .cl-mobile-label {
  display: flex; align-items: center; gap: 12px; padding: 8px 12px 4px; color: var(--cl-ph-muted);
  font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
}
.cl-ph .cl-mobile .cl-ph-mlabel, .cl-ph .cl-ph-macct > .cl-mobile-label:first-child { color: var(--cl-ph-ink); }
.cl-ph .cl-ph-mnote { color: var(--cl-ph-muted); }
.cl-ph .cl-mobile a.cl-ph-signin { justify-content: center; min-height: 44px; background: var(--cl-ph-accent); color: #fff; font-weight: 600; }
.cl-ph .cl-mobile a.cl-ph-signin:hover { background: var(--cl-ph-accent-ink); }
/* Each upper bound ends in .98 (Bootstrap's convention), so a width between two whole pixels,
   which browser zoom and display scaling produce (860.5px at 200%, say), falls in one band or the
   next rather than in neither. (Only 860.98–861 is left, which no zoom or scaling step reaches.) */
@media (min-width: 861px) { .cl-ph .cl-mobile, .cl-ph .cl-mobile.open { display: none; } }
/* Widths measured 2026-10-01 with the lockup (208px with the link's padding, 135px wider than the
   old logo image), fonts loaded, every width from 861 to 1280px. With a tab's icon and the first
   name showing, the bar needs 1153px for a super admin whose name fills the 9rem cap (24 letters,
   12 pending), 1124px with a 15-letter name, 946px for a customer with the 24-letter name.
   861–1023px keeps every tab inline, tighter and without its icon: a super admin needs 960px
   even with icons and no name. */
@media (min-width: 861px) and (max-width: 1023.98px) {
  .cl-ph-nav { gap: 2px; }
  .cl-ph .cl-ph-tab { gap: 6px; padding: 0 9px; }
  .cl-ph .cl-ph-tab > .cl-ico { display: none; }
}
/* Below 1200px a bar with a group (.cl-ph-grouped, an admin's) shows the avatar without the
   first name, which keeps about 45px in hand over the 1153px above. Customers and visitors keep
   the name at every width. The name is still the button's aria-label. */
@media (min-width: 861px) and (max-width: 1199.98px) {
  .cl-ph.cl-ph-grouped .cl-ph-first { display: none; }
  .cl-ph.cl-ph-grouped .cl-ph-user { gap: 4px; padding-right: 8px; }
}
@media (max-width: 860.98px) {
  .cl-ph-nav, .cl-ph-account { display: none; }
  .cl-ph .cl-ph-burger { display: flex; }
}
@media (prefers-reduced-motion: reduce) {
  .cl-ph-brand, .cl-ph .cl-ph-tab, .cl-ph .cl-ph-pill, .cl-ph .cl-ph-user, .cl-ph .cl-ph-signin, .cl-ph .cl-ph-burger,
  .cl-ph .cl-dd-menu a, .cl-ph .cl-mobile a, .cl-ph .cl-dd-toggle .cl-ico { transition: none; }
}

/* ─── FOOTER (dark in every theme) ─── */
.cl-footer { background: #080f0b; color: rgba(255, 255, 255, 0.72); font-size: 14px; line-height: 1.6; margin: 0; }
.cl-footer-inner {
  padding: 3rem clamp(1.25rem, 5vw, 3rem) 2rem;
  display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.3fr; gap: 2rem 2.5rem;
}
.cl-footer .cl-wm-claude { color: rgba(255, 255, 255, 0.88); }
.cl-footer .cl-wm-light  { color: #d4b85f; }
.cl-tagline { margin: 0.9rem 0 0.35rem; color: #d4b85f; font-size: 0.8rem; letter-spacing: 0.08em; text-transform: uppercase; }
.cl-footer-about { margin: 0; max-width: 34ch; color: rgba(255, 255, 255, 0.6); font-size: 0.88rem; }
.cl-footer h4 {
  margin: 0 0 0.9rem; font-family: inherit; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.12em;
  text-transform: uppercase; color: rgba(255, 255, 255, 0.45);
}
.cl-footer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.55rem; }
.cl-footer a { color: rgba(255, 255, 255, 0.78); text-decoration: none; transition: color 0.2s; }
.cl-footer a:hover { color: #fff; }
.cl-footer .cl-free { margin-left: 6px; }
.cl-footer-contact li { display: flex; gap: 0.6rem; align-items: flex-start; }
.cl-footer-contact .cl-ico { width: 16px; height: 16px; margin-top: 3px; color: #d4b85f; }
.cl-footer-contact strong { color: rgba(255, 255, 255, 0.88); font-weight: 500; }
.cl-footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding: 1.25rem clamp(1.25rem, 5vw, 3rem) 1.5rem;
  display: flex; flex-direction: column; gap: 0.75rem;
}
.cl-footer-data { margin: 0; font-size: 0.78rem; color: rgba(255, 255, 255, 0.5); max-width: 110ch; }
.cl-footer-data a { text-decoration: underline; text-underline-offset: 3px; }
.cl-footer-legal { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.5rem 1.5rem; font-size: 0.78rem; color: rgba(255, 255, 255, 0.55); }
.cl-footer-legal-links { display: flex; gap: 1.25rem; flex-wrap: wrap; }
@media (max-width: 900px) { .cl-footer-inner { grid-template-columns: 1fr 1fr; } .cl-footer-brand { grid-column: 1 / -1; } }
@media (max-width: 520px) { .cl-footer-inner { grid-template-columns: 1fr; } }

/* Dark themes need no rules here: dark.html and body.dark-theme (pif/amm) redefine
   --brand-navy / --paper / --ink …, and the variables above inherit them. */

@media (prefers-reduced-motion: reduce) {
  .cl-header, .cl-dd-menu, .cl-flyout-menu, .cl-btn, .cl-hamburger span { transition: none; }
}
@media print { .cl-header, .cl-footer { display: none !important; } }

/* ============================================================================
   MOBILE UTILITIES — shared by every surface (this file is loaded everywhere).
   Rule of thumb: numeric/data tables SCROLL (.cl-scroll, first column pinned);
   record lists STACK into cards (table.cl-stack + td[data-label]).
   ============================================================================ */

/* Sideways-scrolling data table. Put the table inside; mark cells of the first
   column .cl-pin to keep the row label visible while scrolling. */
.cl-scroll {
  overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%;
  background:
    linear-gradient(to right, var(--cl-scroll-bg, #fff) 30%, transparent) left / 24px 100% no-repeat local,
    linear-gradient(to left, var(--cl-scroll-bg, #fff) 30%, transparent) right / 24px 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%, rgba(15, 26, 20, 0.14), transparent) left / 10px 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%, rgba(15, 26, 20, 0.14), transparent) right / 10px 100% no-repeat scroll;
}
.cl-scroll .cl-pin { position: sticky; left: 0; z-index: 1; background: var(--cl-scroll-bg, #fff); box-shadow: 1px 0 0 rgba(15, 26, 20, 0.08); }

/* Record lists → stacked cards on phones. Each <td> carries data-label="Column";
   an empty data-label marks an actions cell (full width, right aligned). */
@media (max-width: 640px) {
  table.cl-stack, table.cl-stack tbody, table.cl-stack tr, table.cl-stack td { display: block; width: 100% !important; }
  table.cl-stack { min-width: 0 !important; border: 0; }
  table.cl-stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  table.cl-stack tr {
    background: var(--cl-stack-bg, #fff); border: 1px solid var(--cl-stack-rule, #d8d4cc) !important; border-radius: 10px;
    margin: 0 0 0.75rem; padding: 0.35rem 0.85rem; box-shadow: 0 1px 3px rgba(15, 26, 20, 0.05);
  }
  /* Label floats left; the cell's own content (text, several badges, a select…) flows
     inline on the right and wraps naturally — flex would squeeze each child separately. */
  table.cl-stack td {
    display: block !important; position: relative;
    padding: 0.45rem 0 0.45rem 38% !important; border: 0 !important; border-bottom: 1px solid rgba(15, 26, 20, 0.07) !important;
    text-align: right !important; white-space: normal !important; background: transparent !important;
    min-height: 2.1rem; overflow-wrap: break-word;
  }
  table.cl-stack td:last-child { border-bottom: 0 !important; }
  table.cl-stack td::before {
    content: attr(data-label); position: absolute; left: 0; top: 0.5rem; width: 36%;
    text-align: left; font-size: 0.72rem; font-weight: 600; line-height: 1.3;
    letter-spacing: 0.04em; text-transform: uppercase; color: #8a9a90;
  }
  table.cl-stack td[data-label=""], table.cl-stack td:not([data-label]) { padding-left: 0 !important; }
  table.cl-stack td[data-label=""]::before, table.cl-stack td:not([data-label])::before { content: none; display: none; }
  table.cl-stack .badge { white-space: normal; overflow-wrap: normal; word-break: normal; text-align: left; }
  /* Form controls inside a stacked cell fill the value column. */
  table.cl-stack td > input:not([type="checkbox"]):not([type="radio"]),
  table.cl-stack td > select, table.cl-stack td > textarea { width: 100% !important; max-width: 100% !important; }
  table.cl-stack td > form { display: inline-block; }
  /* A stacked table no longer needs its sideways-scroll wrapper. */
  .table-responsive:has(> table.cl-stack), .table-wrap:has(> table.cl-stack),
  .table-scroll:has(> table.cl-stack), .cl-scroll:has(> table.cl-stack) { overflow: visible; background: none; }
}

/* Phone form basics: 16px text stops iOS zooming on focus; comfortable tap targets. */
@media (max-width: 640px) {
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), select, textarea { font-size: 16px !important; }
  .cl-tap { min-height: 40px; min-width: 40px; }
}

/* Pop-up containment: never taller than the screen; bottom sheet on phones. */
.cl-sheet { max-height: calc(100vh - 2rem); max-height: calc(100dvh - 2rem); overflow-y: auto; overscroll-behavior: contain; }
@media (max-width: 640px) {
  .cl-sheet-wrap { align-items: flex-end !important; padding: 0 !important; }
  .cl-sheet-wrap > .cl-sheet {
    width: 100% !important; max-width: 100% !important; margin: 0 !important;
    border-radius: 16px 16px 0 0 !important; max-height: 92vh; max-height: 92dvh;
    padding-bottom: calc(1rem + env(safe-area-inset-bottom)) !important;
  }
}

/* ─── Marketing pages: login pop-up (index, dark, quote) ───
   The OTP sign-up step is ~560px tall; on a phone (or with the keyboard open) the centred
   box had no way to scroll to its top or bottom. Contain it and make it a bottom sheet. */
.auth-overlay .auth-modal { max-height: calc(100vh - 2rem); max-height: calc(100dvh - 2rem); overflow-y: auto; overscroll-behavior: contain; }
@media (max-width: 640px) {
  .auth-overlay { align-items: flex-end !important; padding: 0 !important; }
  .auth-overlay .auth-modal {
    max-width: 100% !important; border-radius: 16px 16px 0 0 !important;
    padding: 1.5rem 1.25rem calc(1.25rem + env(safe-area-inset-bottom)) !important;
    max-height: 92vh; max-height: 92dvh;
  }
}
@media (max-width: 420px) { .auth-overlay .auth-row { grid-template-columns: 1fr !important; } }

/* ─── Marketing pages: product quick-access rail (assets/product-access.css) ───
   The cookie banner (z 9000, full width, pinned to the bottom) covers the rail's tabs until a
   choice is made: about 80-110px on a laptop, 200px+ stacked on a phone. Keep the rail out of
   the way while the banner is up, at every width, exactly as the Share tab does below. */
body:has(.cc-banner) .qa-rail { display: none; }
@media (max-width: 720px) {
  .qa-rail { bottom: calc(96px + env(safe-area-inset-bottom)); }
}

/* ============================================================================
   PRODUCT SHARE — the sticky Share tab and its dialog, on every page.

   Shares a PRODUCT (the ClaudeLight site, PIF or AMM) and nothing else: never a
   calculation, a history row, or anything belonging to the signed-in user. The
   wording is each product page's reviewed og:title / og:description, so what a
   visitor sends matches what the link unfurls to.

   It lives in this file, not its own, because every surface already loads this
   stylesheet — the marketing pages and PIF link it directly; AMM, Expense and
   site/profile.php get it from cl_head_assets() — so "on every page" is true by
   construction rather than by remembering to add a <link> to each new page.

   The tab sits on the LEFT edge, mirroring the product rail on the right
   (assets/product-access.css), so the two never collide on the marketing pages
   that carry both. It replaces that rail's old bare-mailto .qa-share tab, which
   did nothing at all in a browser with no mail handler registered.

   Behaviour: assets/site-chrome.js.
   ============================================================================ */

.cl-share-tab, .cl-share-wrap {
  --cl-ink:        var(--ink, #0f1a14);
  --cl-ink-muted:  var(--ink-muted, #4a5a52);
  --cl-ink-faint:  var(--ink-faint, #8a9a90);
  --cl-paper:      var(--paper, #f7f5f0);
  --cl-surface:    var(--white, #ffffff);
  --cl-sage:       var(--sage, #2d5a3d);
  --cl-sage-light: var(--sage-light, #e8f0ea);
  --cl-gold:       var(--gold, #c8a84b);
  --cl-rule:       var(--rule, #d8d4cc);
  --cl-radius:     4px;
  --cl-radius-lg:  12px;
  font-family: 'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  box-sizing: border-box;
}
.cl-share-tab *, .cl-share-wrap * { box-sizing: border-box; }

/* Apps whose own --ink/--paper mean something else (AMM, Expense) get the site
   palette pinned, the same way cl_footer does with 'palette' => 'fixed'. */
.cl-share-tab.cl-palette-fixed, .cl-share-wrap.cl-palette-fixed {
  --cl-ink: #0f1a14; --cl-ink-muted: #4a5a52; --cl-ink-faint: #8a9a90; --cl-paper: #f7f5f0; --cl-surface: #ffffff;
  --cl-sage: #2d5a3d; --cl-sage-light: #e8f0ea; --cl-gold: #c8a84b; --cl-rule: #d8d4cc;
}

/* --- the sticky tab --- */
.cl-share-tab {
  position: fixed; left: 0; bottom: 28px;
  /* 45 sits UNDER AMM's phone nav drawer (50) and modal overlay (80), so those
     cover it natively even in a browser without :has(); the :has() rules below
     then hide it outright. Nothing else on any page lives between 45 and 90
     except the Product menu's flyout (51), which opens inside the header. */
  z-index: 45;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  width: 46px; min-height: 60px; padding: 8px 0;
  background: var(--cl-ink); color: var(--cl-paper);   /* inverts with the theme, like the rail */
  border: 1px solid var(--cl-ink); border-left: 0;
  border-radius: 0 var(--cl-radius-lg) var(--cl-radius-lg) 0;
  /* The faint light ring is invisible against a light page but outlines the tab
     where the page background IS --ink — quote.html's default dark view paints
     body with var(--ink), which would otherwise swallow the tab entirely. */
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.16), 0 8px 24px rgba(15, 26, 20, 0.12);
  cursor: pointer; font: inherit;
  transition: background 0.2s, color 0.2s, transform 0.2s;
}
.cl-share-tab svg { width: 18px; height: 18px; }
.cl-share-tab .cl-share-label {
  font-size: 0.55rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; line-height: 1;
}
.cl-share-tab:hover, .cl-share-tab:focus-visible {
  background: var(--cl-gold); color: #0f1a14; border-color: var(--cl-gold); transform: translateX(2px);
}
.cl-share-tab:focus-visible { outline: 2px solid var(--cl-ink); outline-offset: 2px; }

/* --- the dialog: a centred card on a laptop, a bottom sheet on a phone ---
   It borrows .cl-sheet-wrap / .cl-sheet above, so the share sheet rises from the
   bottom edge exactly like the marketing login pop-up does. */
.cl-share-wrap {
  position: fixed; inset: 0;
  z-index: 9600;                    /* over the cookie banner (9000) and the header (100) */
  display: none; align-items: center; justify-content: center; padding: 1rem;
  background: rgba(8, 16, 12, 0.55);
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
  overscroll-behavior: contain;     /* AMM scrolls .main, not body, so the body lock alone misses it */
}
.cl-share-wrap.cl-open { display: flex; }

.cl-share-panel {
  width: 100%; max-width: 420px; padding: 1.15rem 1.15rem 1.25rem;
  background: var(--cl-surface); color: var(--cl-ink);
  border-radius: var(--cl-radius-lg);
  box-shadow: 0 24px 64px rgba(8, 16, 12, 0.3);
  text-align: left;
}
.cl-share-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 0.9rem; }
.cl-share-head h2 {
  margin: 0; font-family: 'DM Serif Display', Georgia, serif; font-weight: 400;
  font-size: 1.25rem; line-height: 1.2; color: var(--cl-ink);
}
.cl-share-head p { margin: 0.2rem 0 0; font-size: 0.82rem; line-height: 1.4; color: var(--cl-ink-muted); }
.cl-share-x {
  flex: 0 0 auto; background: none; border: 0; padding: 0.3rem; margin: -0.3rem -0.3rem 0 0;
  color: var(--cl-ink-faint); cursor: pointer; line-height: 0; border-radius: var(--cl-radius);
}
.cl-share-x:hover { color: var(--cl-ink); background: var(--cl-sage-light); }
.cl-share-x svg { width: 20px; height: 20px; }

/* Which product am I sharing? Defaults to the one the visitor is looking at. */
.cl-share-prods { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.4rem; margin-bottom: 0.9rem; }
.cl-share-prod {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  min-height: 58px; padding: 0.55rem 0.3rem;
  background: var(--cl-surface); border: 1px solid var(--cl-rule); border-radius: var(--cl-radius-lg);
  color: var(--cl-ink-muted); font: inherit; text-align: center; cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.cl-share-prod b { font-size: 0.8rem; font-weight: 600; letter-spacing: 0.03em; color: var(--cl-ink); }
.cl-share-prod { position: relative; }
/* The product's lockup (monogram for ClaudeLight, monogram + acronym for PIF and AMM), the
   -h files at 26px, where they still read; the light/dark file is picked by the script. */
.cl-share-logo { display: block; height: 26px; width: auto; max-width: 100%; object-fit: contain; margin-bottom: 2px; }
.cl-share-prod .cl-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.cl-share-prod span { font-size: 0.62rem; line-height: 1.25; }
.cl-share-prod:hover { border-color: var(--cl-sage); }
.cl-share-prod[aria-checked="true"] { background: var(--cl-sage-light); border-color: var(--cl-sage); color: var(--cl-sage); }
.cl-share-prod[aria-checked="true"] b { color: var(--cl-sage); }
.cl-share-prod:focus-visible { outline: 2px solid var(--cl-sage); outline-offset: 2px; }

.cl-share-blurb { margin: 0 0 0.75rem; font-size: 0.84rem; line-height: 1.5; color: var(--cl-ink-muted); }
.cl-share-link { display: flex; gap: 0.4rem; margin-bottom: 0.9rem; }
.cl-share-link input {
  flex: 1 1 auto; min-width: 0; padding: 0.55rem 0.6rem;
  font: inherit; font-size: 0.8rem; color: var(--cl-ink-muted);
  background: var(--cl-paper); border: 1px solid var(--cl-rule); border-radius: var(--cl-radius);
}

/* Channels. The native share sheet spans the row when the browser offers one. */
.cl-share-ch { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.45rem; }
.cl-share-ch a, .cl-share-ch button {
  display: flex; align-items: center; justify-content: center; gap: 0.45rem;
  min-height: 44px; padding: 0.55rem 0.6rem;                 /* comfortable thumb target */
  background: var(--cl-surface); color: var(--cl-ink);
  border: 1px solid var(--cl-rule); border-radius: var(--cl-radius-lg);
  font: inherit; font-size: 0.85rem; text-decoration: none; cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.cl-share-ch a:hover, .cl-share-ch button:hover,
.cl-share-ch a:focus-visible, .cl-share-ch button:focus-visible {
  background: var(--cl-sage-light); border-color: var(--cl-sage); color: var(--cl-sage);
}
.cl-share-ch svg { width: 17px; height: 17px; flex: 0 0 17px; }
.cl-share-ch .cl-brand { width: 18px; height: 18px; flex-basis: 18px; }
/* Brand marks keep their own colour in every state; the label still takes the hover colour. */
.cl-share-ch .cl-brand-wa .cl-brand { color: #25d366; }
.cl-share-ch .cl-brand-li .cl-brand { color: #0a66c2; }
/* Text is --cl-paper, not #fff: in the dark theme --sage becomes a LIGHT green,
   and white-on-light-green failed contrast. --paper inverts with the theme, so
   this stays dark-on-light there and light-on-dark here. */
.cl-share-ch .cl-share-primary {
  grid-column: 1 / -1; background: var(--cl-sage); border-color: var(--cl-sage); color: var(--cl-paper);
}
.cl-share-ch .cl-share-primary:hover, .cl-share-ch .cl-share-primary:focus-visible {
  background: var(--cl-ink); border-color: var(--cl-ink); color: var(--cl-paper);
}

/* Honest feedback: it says what actually happened, never "Copied" on a failure. */
.cl-share-note { margin: 0.7rem 0 0; min-height: 1.15em; font-size: 0.75rem; text-align: center; color: var(--cl-ink-faint); }
.cl-share-note.cl-ok { color: var(--cl-sage); }

/* Get out of the way of what an app is doing. The tab sits at z-index 90, which
   is ABOVE AMM's modal overlay (80) and its phone nav drawer (50) — so without
   these it floats, tappable, over an unsaved edit form or an open menu. Both
   elements are transient (#modalRoot is emptied on close; nav-open is toggled),
   so the tab returns the moment they go. */
body:has(.modal-overlay) .cl-share-tab,
body:has(.app.nav-open) .cl-share-tab { display: none; }

/* The cookie banner (z 9000, full-width, pinned to the bottom) buries the tab
   until a choice is made — about 80-110px tall on a laptop, 200px+ stacked on a
   phone. Hide it at EVERY width rather than leave it half-covered; the banner
   node is removed once a choice is made, so the tab comes straight back. */
body:has(.cc-banner) .cl-share-tab { display: none; }

/* PIF's Calculate button becomes a full-width sticky bar below 992px (pif.css),
   so lift the tab clear of the app's primary action on tablets as well as phones. */
@media (max-width: 991px) {
  body:has(.pif-calc-submit) .cl-share-tab { bottom: calc(96px + env(safe-area-inset-bottom)); }
}

@media (max-width: 720px) {
  .cl-share-tab { bottom: calc(96px + env(safe-area-inset-bottom)); width: 40px; min-height: 44px; padding: 6px 0;
                  transition: background 0.2s, color 0.2s, transform 0.25s ease, opacity 0.25s ease; }
  /* Slid off the edge while the visitor scrolls down (assets/site-chrome.js). */
  .cl-share-tab.cl-share-away { transform: translateX(-110%); opacity: 0; pointer-events: none; }
  .cl-share-tab svg { width: 16px; height: 16px; }
  .cl-share-tab .cl-share-label { display: none; }
}
@media (max-width: 360px) {
  .cl-share-prod span { display: none; }                     /* the lockup alone still identifies it */
  .cl-share-prod { min-height: 46px; }
}
@media (prefers-reduced-motion: reduce) {
  .cl-share-tab, .cl-share-prod, .cl-share-ch a, .cl-share-ch button, .cl-share-x { transition: none; }
  /* Still gets out of the way, just without the slide. */
  .cl-share-tab.cl-share-away { transition: none; }
}
@media print { .cl-share-tab, .cl-share-wrap { display: none !important; } }