/* ==========================================================================
   Pax, one look (10/29/26). HQ (index.html) and My Pax (my.html) both load
   this file, so the two apps can't drift apart again.
   Ryan, 10/29/26: "im noticing that the design is different in my HQ than
   my pax for the agents. I dont want that. HQ is different in the sense that
   it has more things, not that it's designed differently ... HQ is
   fundamentally My Pax but the developer version."
   My Pax is the anchor (the Learn videos film it): every value here is the
   one My Pax already wore. HQ wears the same markup for its frame and adds
   its extra rooms (Team, System) and its search under the same group names.
   What lives here: the colors for both looks, the type sizes, and the frame
   (the rail with its groups, the account card and its menu, the phone
   header, the phone bar, the row of tools under it, the page margins).
   The parts inside a page stay in each app's own sheet (hq/app.css, the
   style tag in my.html) because My Pax reuses names like .row, .tile and
   .chip for other things; they use the same sizes.
   Design law: pax-hq hq/ARCHITECTURE.md rule 4.
   ========================================================================== */

/* ---------- colors: light is the default in both apps ----------
   Every color is a token. Lines, hovers and tracks are rgba(var(--fg-rgb), a).
   Each device picks Light, Dark or Auto in the account menu (localStorage
   hq-theme in HQ, my-theme in My Pax); a head script sets data-theme before
   the first paint. */
:root, :root[data-theme="light"] {
  --fg-rgb: 22, 26, 34;
  --bg: #F4F3EF; --side: #FFFFFF; --card-bg: #FFFFFF; --card: #FFFFFF; --surface: #FFFFFF; --pop: #FFFFFF;
  --raise: #EFEEEA; --raise-2: #E6E5E0; --well: #F1F0EC; --paper-dim: #E4E3DE; --dim: #E4E3DE;
  --text: #121418; --text-soft: #4A4F58; --text-mute: #6C717A; --faint: #9A9EA5;
  --line: rgba(var(--fg-rgb), .11); --line-soft: rgba(var(--fg-rgb), .07); --line-2: rgba(var(--fg-rgb), .18);
  --hover: rgba(61, 77, 116, .06); --press: rgba(61, 77, 116, .10);
  --card-edge: rgba(var(--fg-rgb), .09);
  --accent: #4F6D8C; --accent-rgb: 79, 109, 140; --accent-ink: #FFFFFF; --accent-deep: #3F5A75;
  --btn: #121418; --btn-ink: #FFFFFF; --btn-hover: #2B2F36;
  --money: #1D7A4B; --money-rgb: 29, 122, 75;
  --green: #1D7A4B; --amber: #A35F00; --red: #C23F2C; --amber-rgb: 163, 95, 0; --red-rgb: 194, 63, 44;
  --spot: #D9E2EC; --spot-ink: #0F1216; --spot-soft: #3E4A59;
  --scrim: rgba(18, 20, 24, .42);
  --shadow-pop: 0 10px 30px rgba(18, 20, 24, .14);
  color-scheme: light;
}
:root[data-theme="dark"] {
  --fg-rgb: 214, 220, 232;
  --bg: #131519; --side: #1F2227; --card-bg: #1A1D22; --card: #1A1D22; --surface: #1A1D22; --pop: #262A31;
  --raise: #23262C; --raise-2: #2D3038; --well: #0F1114; --paper-dim: #2D3038; --dim: #2D3038;
  --text: #F5F6F8; --text-soft: #B7BBC3; --text-mute: #8C9099; --faint: #60656E;
  --line: rgba(var(--fg-rgb), .10); --line-soft: rgba(var(--fg-rgb), .06); --line-2: rgba(var(--fg-rgb), .17);
  --hover: rgba(var(--fg-rgb), .07); --press: rgba(var(--fg-rgb), .11);
  --card-edge: transparent;
  --accent: #9DB8D6; --accent-rgb: 157, 184, 214; --accent-ink: #0E1013; --accent-deep: #B9CDE3;
  --btn: #FFFFFF; --btn-ink: #0E1013; --btn-hover: #E3E5E9;
  --money: #5DCB91; --money-rgb: 93, 203, 145;
  --green: #5DCB91; --amber: #F1B44C; --red: #FF7C68; --amber-rgb: 241, 180, 76; --red-rgb: 255, 124, 104;
  --spot: #D3DDE9; --spot-ink: #0F1216; --spot-soft: #3E4A59;
  --scrim: rgba(6, 7, 9, .66);
  --shadow-pop: 0 8px 24px rgba(0, 0, 0, .28);
  color-scheme: dark;
}
:root {
  /* HQ's kit reads the short names, My Pax's the long ones: one value each */
  --soft: var(--text-soft); --mute: var(--text-mute);
  --cream: var(--text); --muted: var(--text-soft);
  --accent-tint: rgba(var(--accent-rgb), .13);
  --accent-line: rgba(var(--accent-rgb), .36);
  --money-tint: rgba(var(--money-rgb), .12);
  --green-tint: rgba(var(--money-rgb), .12);
  --amber-tint: color-mix(in srgb, var(--amber) 13%, transparent);
  --red-tint: color-mix(in srgb, var(--red) 12%, transparent);
  --hatch: repeating-linear-gradient(-45deg, rgba(var(--money-rgb), .62) 0 1.5px, transparent 1.5px 5px);
  --hatch-soft: repeating-linear-gradient(-45deg, rgba(var(--money-rgb), .3) 0 1px, transparent 1px 5px);
  /* --brass is an old name the pages still use: it carries Pax blue. Money
     reads --money; buttons read --btn. No brass or gold anywhere. */
  --brass: var(--accent); --brass-deep: var(--accent-deep); --brass-bright: var(--accent-deep);
  --gold: var(--accent); --gold-bright: var(--accent); --gold-deep: var(--accent-deep); --gold-dim: rgba(var(--accent-rgb), .6);
  --brass-tint: rgba(var(--accent-rgb), .12); --brass-line: rgba(var(--accent-rgb), .34);
  --ink-on-brass: var(--accent-ink);
  --btn-grad: var(--btn);
  --brasstext: linear-gradient(var(--brass), var(--brass));
  --brass-text: linear-gradient(var(--brass), var(--brass));
  /* Inter for every word; Literata only for page titles, the hello, the
     spotlight name and drawer titles */
  --sans: "Inter", "Helvetica Neue", system-ui, sans-serif;
  --display: var(--sans); --serif: var(--sans);
  --head: "Literata", Georgia, serif;
  --title: var(--head);
  --mono: ui-monospace, "SF Mono", Menlo, monospace;
  --r-sm: 6px; --r: 8px; --r-lg: 12px;
  --lift: none; --lift-hover: none; --shadow: none; --shadow-lift: none;
  --ease: cubic-bezier(.22, .61, .36, 1);
  --spring: cubic-bezier(.3, 1.3, .5, 1);
  --rail-w: 236px;
}

/* ---------- type: every size is rem, so both apps lift from here ---------- */
/* the gutter is always there, so a short page and a long one sit in the same place */
html { font-size: 17px; scrollbar-gutter: stable; color-scheme: light; scrollbar-color: rgba(var(--fg-rgb), .22) transparent; }
:root[data-theme="dark"] { color-scheme: dark; }
@media (max-width: 640px) { html { font-size: 16.5px; } }
/* the phone's own text size setting sizes the page on an iPhone (17 pt is
   the default); the phone bar stays put, as Apple's own tab bars do */
@media (hover: none) and (pointer: coarse) {
  @supports (font: -apple-system-body) { html { font: -apple-system-body; font-family: var(--sans); } }
}
body {
  font-family: var(--sans); font-size: .95rem; line-height: 1.55; color: var(--text); background: var(--bg);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-feature-settings: "cv11";
  min-height: 100vh;
}
::selection { background: rgba(var(--accent-rgb), .22); color: var(--text); }
:focus-visible { outline: 2px solid rgba(var(--accent-rgb), .7); outline-offset: 2px; border-radius: 6px; }

/* ---------- the frame ----------
   One header that is the top bar on a phone and the left rail on a computer
   (920px and up). Then the page, then the phone bar. Markup, in both apps:
     <header class="hqbar"><div class="hrow">logo, tag, face</div>
       <nav class="tabbar">.tab rows and .navlabel group names</nav>
       <div class="railfoot"><button class="acct">…</button></div></header>
     <div class="wrap">…the page…</div>
     <nav id="bnav">.bt places, each with an <i class="pip"></i></nav> */
body > .wrap { position: relative; z-index: 1; max-width: 620px; margin: 0 auto; padding: clamp(1.2rem, 3.5vh, 2rem) clamp(1.1rem, 5vw, 1.8rem) 4rem; }

header.hqbar { position: sticky; top: 0; z-index: 30; background: var(--bg); border-bottom: 1px solid var(--line); }
.hrow { display: flex; align-items: center; gap: .6rem; padding: .6rem clamp(.9rem, 3vw, 1.4rem) .5rem; }
.hrow .lockup { height: 22px; width: auto; display: block; }
.hrow .lockup.cream { display: none; }
:root[data-theme="dark"] .hrow .lockup.ink { display: none; }
:root[data-theme="dark"] .hrow .lockup.cream { display: flex; align-items: center; gap: .5rem; }
.hrow .lockup.cream img { height: 22px; width: 22px; }
.hrow .lockup.cream img.wm { height: 9px; width: auto; }
/* "My Pax" or "HQ" beside the logo: which app you are in */
.hrow .hqtag { font-family: var(--sans); font-size: .72rem; font-weight: 600; color: var(--text-soft); white-space: nowrap; }
.hrow .date { margin-left: auto; font-size: .68rem; font-weight: 600; color: var(--text-mute); }

/* the rail's rows: an icon, a word, a count */
.tabbar { display: flex; align-items: center; gap: .15rem; padding: 0 clamp(.9rem, 3vw, 1.4rem) .45rem; overflow-x: auto; scrollbar-width: none; }
.tabbar::-webkit-scrollbar { display: none; }
.tab { display: inline-flex; align-items: center; font-family: var(--sans); font-size: .84rem; font-weight: 450; color: var(--text);
  background: none; border: none; border-radius: 8px; padding: .42rem .7rem; cursor: pointer; white-space: nowrap; text-decoration: none; line-height: normal;
  transition: color .15s var(--ease), background .15s var(--ease); }
.tab svg { width: 20px; height: 20px; flex: none; margin-right: .75rem; opacity: 1; stroke-width: 2; stroke-linecap: square; stroke-linejoin: miter; }
.tab:hover { background: var(--hover); color: var(--text); }
.tab.active, .tab.active:hover { background: var(--press); color: var(--text); font-weight: 550; }
.tab.active svg { color: var(--text); }
.tab[hidden] { display: none; }
.tab .badge {
  margin-left: auto; min-width: 1.35rem; text-align: center; font-size: .66rem; font-weight: 650; line-height: 1.5;
  padding: 0 .38rem; border-radius: 99px; background: var(--raise-2); color: var(--text-soft); font-variant-numeric: tabular-nums;
}
.tab .badge:empty { display: none; }
.tab .badge.hot { background: var(--accent); color: var(--accent-ink); }
/* the group names (Deals, Leads, Content, You, and HQ's Team and System):
   on the rail only; the phone bar names the same places */
.navlabel { display: none; }

/* who is signed in, at the foot of the rail */
.railfoot { display: block; padding: .5rem .5rem calc(.6rem + env(safe-area-inset-bottom)); border-top: 0; }

@media (min-width: 920px) {
  header.hqbar { position: fixed; top: 0; left: 0; bottom: 0; width: var(--rail-w); display: flex; flex-direction: column;
    background: var(--side); border-bottom: none; border-right: 0; }
  .hrow { flex-wrap: wrap; row-gap: .45rem; padding: 1.05rem 1.1rem .7rem; }
  .hrow .lockup { height: 20px; }
  .hrow .date { display: none; }
  .tabbar { flex: 1; flex-direction: column; align-items: stretch; gap: 2px; padding: .2rem .5rem 1rem; overflow-x: hidden; overflow-y: auto; }
  .tab { display: flex; font-size: .9rem; padding: .44rem .7rem; }
  .navlabel { display: block; font-size: .76rem; font-weight: 500; color: var(--text-mute); padding: .75rem .7rem .25rem; }
  .navlabel:first-child { padding-top: .35rem; }
  /* the rail, then the rest of the screen, full width */
  body > .wrap { margin-left: var(--rail-w); max-width: none; padding: 2rem clamp(1.6rem, 3vw, 3rem) 4rem; }
}

/* ---------- the account card and its menu ---------- */
.acct { display: flex; align-items: center; gap: .65rem; width: 100%; padding: .55rem .65rem; border: 0; border-radius: 10px;
  background: var(--hover); color: var(--text); text-align: left; cursor: pointer; font: inherit; transition: background .12s; }
.acct:hover, .acct[aria-expanded="true"] { background: var(--press); }
.acct .face, .acct .av { width: 34px; height: 34px; border: 0; }
.acct .face.ini, .am-head .face.ini, .acct-m .face.ini,
.acct .av, .am-head .av, .acct-m .av { background: var(--accent); color: var(--accent-ink); font-size: .74rem; font-weight: 600; }
.acct .who { flex: 1; min-width: 0; display: grid; line-height: 1.25; }
.acct .who b { font-size: .86rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.acct .who small { font-size: .74rem; color: var(--text-soft); }
.acct > svg { width: 16px; height: 16px; color: var(--text-soft); flex: none; }
/* on a phone the face sits at the right of the header instead */
.acct-m { display: none; padding: 0; border: 0; background: none; cursor: pointer; margin-left: auto; border-radius: 50%; }
.acct-m .face, .acct-m .av { width: 32px; height: 32px; border: 0; }
.acct-menu { position: fixed; z-index: 75; left: calc(var(--rail-w) + 6px); bottom: .6rem; width: 288px; max-height: calc(100vh - 1.2rem); overflow-y: auto;
  padding: .45rem; border-radius: 10px; background: var(--pop); border: 1px solid var(--line); box-shadow: var(--shadow-pop);
  animation: acctin .14s var(--ease) both; }
@keyframes acctin { from { opacity: 0; transform: translateY(4px); } }
.am-head { display: flex; align-items: center; gap: .65rem; padding: .5rem .6rem .7rem; }
.am-head .face, .am-head .av { width: 40px; height: 40px; border: 0; }
.am-head b { display: block; font-size: .92rem; font-weight: 600; }
.am-head small { display: block; font-size: .78rem; color: var(--text-soft); }
.acct-menu hr { border: 0; border-top: 1px solid var(--line); margin: .35rem .2rem; }
.am-i { display: flex; align-items: center; gap: .75rem; width: 100%; padding: .55rem .6rem; border: 0; border-radius: 8px; background: none; cursor: pointer;
  font: 400 .9rem/1.3 var(--sans); color: var(--text); text-align: left; text-decoration: none; }
.am-i:hover, .am-i:focus-visible { background: var(--hover); outline: none; }
.am-i svg, .am-theme > svg { width: 20px; height: 20px; flex: none; }
.am-i .ext { margin-left: auto; width: 16px; height: 16px; color: var(--text-soft); }
.am-i.am-out { color: var(--red); }
.am-i .am-state { margin-left: auto; font-size: .78rem; color: var(--text-soft); }
.am-theme { display: flex; align-items: center; gap: .75rem; padding: .45rem .6rem; font-size: .9rem; }
.am-seg { margin-left: auto; display: inline-flex; padding: 3px; gap: 2px; border-radius: 99px; background: var(--hover); }
.am-seg button { padding: .3rem .65rem; border: 0; border-radius: 99px; background: none; cursor: pointer; font: 500 .76rem/1.2 var(--sans); color: var(--text-soft); }
.am-seg button.on { background: var(--btn); color: var(--btn-ink); }
.acct-menu svg, .acct svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: square; stroke-linejoin: miter; }
@media (max-width: 919px) {
  .acct-menu { left: .5rem; right: .5rem; bottom: calc(.5rem + env(safe-area-inset-bottom)); width: auto; border-radius: 16px; padding: .5rem; }
  .am-i { padding: .78rem .7rem; font-size: .98rem; }
  .acct-scrim { position: fixed; inset: 0; z-index: 74; background: var(--scrim); }
}

/* ---------- phone: the bar at the bottom and the row of tools on top ---------- */
#bnav, #secNav { display: none; }
@media (max-width: 640px) {
  .tabbar { display: none; }
  .railfoot { display: none; }
  .acct-m { display: block; }
  .hrow .date { display: none; }
  body > .wrap { padding-top: 1.25rem; padding-bottom: 6.4rem; }
  /* five places, an icon over each word, the place you are in full ink */
  #bnav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 55; display: flex; justify-content: space-around; align-items: stretch;
    background: var(--side); border-top: 1px solid var(--line); padding: 0 .3rem env(safe-area-inset-bottom); }
  #bnav .bt { position: relative; flex: 1 1 0; min-width: 0; min-height: 56px; display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: .25rem; background: none; border: none; cursor: pointer; padding: .35rem 0 .3rem;
    font-family: var(--sans); font-size: .7rem; font-weight: 500; line-height: normal; white-space: nowrap; color: var(--text-mute); text-decoration: none;
    transition: color .15s var(--ease), transform .1s var(--ease); -webkit-tap-highlight-color: transparent; }
  #bnav .bt:active { transform: scale(.93); }
  /* a red dot only for what needs you; the counts live on the rail */
  #bnav .pip { position: absolute; border-radius: 50%; }
  #bnav .pip[hidden] { display: none; }
  /* the tools inside the place you are in, one tap apart */
  #secNav { display: flex; gap: 1.3rem; margin: -.35rem 0 1.1rem; overflow-x: auto; scrollbar-width: none; border-bottom: 1px solid var(--line); }
  #secNav::-webkit-scrollbar { display: none; }
  #secNav[hidden] { display: none; }
  #secNav button { flex: none; min-height: 44px; margin-bottom: -1px; padding: .5rem 0 .55rem; cursor: pointer; white-space: nowrap;
    background: none; border: 0; border-bottom: 2px solid transparent; font: 700 .93rem/1.2 var(--sans); color: var(--text-mute); }
  #secNav button.on { color: var(--text); border-bottom-color: var(--text); }
}
#bnav .bt svg { display: block; width: 23px; height: 23px; stroke-width: 2; stroke-linecap: square; stroke-linejoin: miter; }
#bnav .bt.active, #bnav .bt.active svg { color: var(--text); }
#bnav .bt.active { font-weight: 600; }
#bnav .pip { top: .25rem; bottom: auto; left: calc(50% + 8px); width: 8px; height: 8px; background: var(--red); box-shadow: 0 0 0 2px var(--side); }