/* Reeve Consult blank portal: the standard menu. A fixed icon rail, a panel beside it whose rows fall in (the waterfall), pop-outs when the
   panel is closed, and one account menu from the brand at the top. Taken from the Adapt Leads app menu's design and behaviour, rebuilt for portals.
   Every colour is a variable: a customer's portal sets the variables, never edits these rules. */
:root {
  --ps-rail: #0A2233; --ps-rail-2: #14344a; --ps-rail-ink: #9fb5bd; --ps-rail-on: #ffffff; --ps-rail-line: rgba(255,255,255,.08);
  --ps-panel: #ffffff; --ps-ink: #0A2233; --ps-ink-2: #3e5862; --ps-muted: #6b8188; --ps-line: #e6ecee; --ps-hover: #f1f5f6;
  --ps-accent: #0a8f97; --ps-accent-ink: #076b72; --ps-wash: #e9f5f5; --ps-font: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
  --ps-pop: 0 20px 56px rgba(10, 34, 51, .24); --ps-ease: cubic-bezier(.16, 1, .3, 1);
}
.ps-wrap { display: flex; height: 100vh; position: sticky; top: 0; font-family: var(--ps-font); z-index: 20; }
/* the rail */
.ps-rail { width: 76px; flex: 0 0 76px; background: var(--ps-rail); display: flex; flex-direction: column; align-items: center; padding: 0 0 12px; height: 100%; position: relative; z-index: 3; }
.ps-top { height: 60px; flex: 0 0 60px; width: 100%; display: grid; place-items: center; }
.ps-logo { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; position: relative; cursor: pointer; border: 0; background: transparent; padding: 0; }
.ps-logo > .ps-mark { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--ps-accent); color: #fff; font-weight: 700; font-size: 13px; overflow: hidden; }
.ps-logo > .ps-mark img { width: 100%; height: 100%; object-fit: contain; }
/* a real mark (a picture) sits on the rail with no disc behind it */
.ps-logo > .ps-mark:has(img), .ps-host .ps-logo > .ps-mark:has(img), .ps-mi .ps-dotmark:has(img) { background: transparent; }
.ps-exp { position: absolute; inset: 0; display: grid; place-items: center; color: #fff; background: var(--ps-rail-2); border-radius: 12px; opacity: 0; transition: opacity .15s; }
.ps-logo:hover .ps-exp { opacity: 1; }
/* the list never scrolls: a scrolling box would clip the pop-outs. A portal keeps to about seven areas. */
.ps-list { display: flex; flex-direction: column; align-items: center; gap: 4px; padding-top: 6px; width: 100%; }
.ps-i { position: relative; }
.ps-b { position: relative; width: 62px; min-height: 54px; border-radius: 12px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; color: var(--ps-rail-ink); text-decoration: none; transition: background .15s, color .15s; padding: 6px 2px; }
.ps-b:hover, .ps-b.on { background: var(--ps-rail-2); color: var(--ps-rail-on); }
.ps-b.on::before { content: ""; position: absolute; left: -7px; top: 14px; bottom: 14px; width: 3px; border-radius: 0 3px 3px 0; background: var(--ps-accent); }
.ps-b .ps-l { font-size: 11px; font-weight: 600; letter-spacing: .01em; line-height: 1.1; text-align: center; }
.ps-b .ps-n { position: absolute; top: 6px; right: 12px; width: 8px; height: 8px; border-radius: 50%; background: var(--ps-accent); box-shadow: 0 0 0 2px var(--ps-rail); }
.ps-sp { flex: 1; }
.ps-me { width: 36px; height: 36px; border-radius: 50%; border: 0; padding: 0; cursor: pointer; background: var(--ps-rail-2); color: #fff; font: 600 13px var(--ps-font); flex: none; }
.ps-me:hover { box-shadow: 0 0 0 2px var(--ps-accent); }
/* pop-outs, only when the panel is closed */
.ps-fly { display: none; flex-direction: column; position: absolute; left: 70px; top: -4px; width: 236px; background: var(--ps-panel); border: 1px solid var(--ps-line); border-radius: 14px; box-shadow: var(--ps-pop); padding: 6px; z-index: 30; }
.ps-fly::before { content: ""; position: absolute; left: -16px; top: 0; bottom: 0; width: 16px; }
.ps-rail.shut .ps-i:hover .ps-fly { display: flex; animation: psWf .3s cubic-bezier(.34, 1.56, .64, 1); }
.ps-fh { font-weight: 700; font-size: 13.5px; color: var(--ps-ink); padding: 8px 10px 6px; }
/* the panel */
.ps-panel { width: 236px; flex: 0 0 236px; background: var(--ps-panel); border-right: 1px solid var(--ps-line); display: flex; flex-direction: column; height: 100%; overflow: hidden; transition: width .25s var(--ps-ease), flex-basis .25s var(--ps-ease); }
.ps-panel.shut { width: 0; flex-basis: 0; border-right: 0; }
.ps-ph { height: 60px; flex: 0 0 60px; display: flex; align-items: center; padding: 0 10px 0 14px; white-space: nowrap; }
.ps-ws { display: flex; align-items: center; gap: 2px; height: 38px; padding: 0 0 0 4px; min-width: 0; color: var(--ps-ink-2); }
.ps-chev { width: 28px; height: 28px; border-radius: 8px; border: 0; background: transparent; color: var(--ps-muted); cursor: pointer; display: grid; place-items: center; padding: 0; flex: none; }
.ps-chev:hover { background: var(--ps-hover); color: var(--ps-ink); }
.ps-ws .ps-word { font-weight: 700; font-size: 17px; color: var(--ps-ink); letter-spacing: -.02em; overflow: hidden; text-overflow: ellipsis; }
.ps-ws .ps-word img { height: 22px; display: block; }
.ps-tog { margin-left: auto; width: 30px; height: 30px; border-radius: 8px; border: 0; background: transparent; color: var(--ps-muted); cursor: pointer; display: grid; place-items: center; flex: none; }
.ps-tog:hover { background: var(--ps-hover); color: var(--ps-ink); }
.ps-scroll { flex: 1; overflow-y: auto; scrollbar-width: none; padding: 0 10px 14px; }
.ps-scroll::-webkit-scrollbar { display: none; }
.ps-sl { padding: 10px 10px 6px; font-size: 10.5px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--ps-muted); }
.ps-a { display: flex; align-items: center; gap: 11px; padding: 9px 10px; border-radius: 9px; color: var(--ps-ink-2); text-decoration: none; font-size: 14.5px; font-weight: 500; cursor: pointer; border: 0; background: transparent; width: 100%; text-align: left; font-family: inherit; }
.ps-a:hover { background: var(--ps-hover); color: var(--ps-ink); }
.ps-a.on { background: var(--ps-wash); color: var(--ps-accent-ink); font-weight: 600; }
.ps-a svg { flex: none; color: var(--ps-muted); } .ps-a.on svg { color: var(--ps-accent-ink); }
.ps-a .ps-c { margin-left: auto; font-size: 12px; font-weight: 600; color: var(--ps-muted); }
/* the waterfall: rows fall in one after another when the panel opens or changes area, never on an ordinary redraw */
@keyframes psWf { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
.ps-nav.wf > * { animation: psWf .38s cubic-bezier(.22, 1, .36, 1) both; }
.ps-nav.wf > :nth-child(1) { animation-delay: 40ms; } .ps-nav.wf > :nth-child(2) { animation-delay: 85ms; } .ps-nav.wf > :nth-child(3) { animation-delay: 130ms; }
.ps-nav.wf > :nth-child(4) { animation-delay: 175ms; } .ps-nav.wf > :nth-child(5) { animation-delay: 220ms; } .ps-nav.wf > :nth-child(6) { animation-delay: 265ms; }
.ps-nav.wf > :nth-child(7) { animation-delay: 310ms; } .ps-nav.wf > :nth-child(8) { animation-delay: 355ms; } .ps-nav.wf > :nth-child(n+9) { animation-delay: 400ms; }
/* the account menu (from the brand at the top, or the face at the bottom of the rail) */
.ps-menu { position: fixed; z-index: 95; width: 290px; background: var(--ps-panel); border: 1px solid var(--ps-line); border-radius: 16px; box-shadow: var(--ps-pop); padding: 8px; font-family: var(--ps-font); animation: psWf .18s var(--ps-ease) both; }
.ps-menu[hidden] { display: none; }
.ps-mlab { padding: 8px 10px 4px; font-size: 11.5px; font-weight: 600; color: var(--ps-muted); }
.ps-mi { display: flex; align-items: center; gap: 11px; width: 100%; padding: 10px 12px; border: 0; border-radius: 10px; background: transparent; font: inherit; font-size: 15px; color: var(--ps-ink); text-decoration: none; cursor: pointer; text-align: left; }
.ps-mi:hover { background: var(--ps-hover); } .ps-mi svg { color: var(--ps-muted); flex: none; }
.ps-mi.on { background: var(--ps-wash); color: var(--ps-accent-ink); font-weight: 600; } .ps-mi .ps-end { margin-left: auto; display: grid; }
.ps-mi .ps-dotmark { width: 22px; height: 22px; border-radius: 50%; background: var(--ps-accent); flex: none; display: grid; place-items: center; overflow: hidden; }
.ps-mdiv { height: 1px; background: var(--ps-line); margin: 6px 4px; }
.ps-who { display: flex; align-items: center; gap: 12px; padding: 10px 12px; }
.ps-who .ps-face { width: 38px; height: 38px; border-radius: 50%; background: var(--ps-wash); color: var(--ps-accent-ink); font-weight: 700; font-size: 13px; display: grid; place-items: center; flex: none; }
.ps-who b { display: block; font-size: 15px; color: var(--ps-ink); } .ps-who small { display: block; font-size: 13px; color: var(--ps-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 200px; }
.ps-card { margin: 4px 6px 6px; padding: 12px 14px; border: 1px solid var(--ps-line); border-radius: 12px; background: #fafcfc; }
.ps-card b { font-size: 18px; color: var(--ps-ink); } .ps-card span { font-size: 14px; color: var(--ps-ink-2); } .ps-card small { display: block; margin-top: 4px; font-size: 12.5px; color: var(--ps-muted); }
/* the all-areas list is for phones only */
.ps-all { display: none; }
/* phones: the rail and panel become one sheet from the burger */
@media (max-width: 900px) {
  .ps-wrap { position: fixed; inset: 0 auto 0 0; transform: translateX(-105%); transition: transform .25s var(--ps-ease); box-shadow: var(--ps-pop); z-index: 80; }
  .ps-wrap.open { transform: none; box-shadow: var(--ps-pop), 0 0 0 100vmax rgba(10, 34, 51, .38); }
  .ps-rail.shut .ps-i:hover .ps-fly { display: none; }
  .ps-panel.shut { width: 236px; flex-basis: 236px; border-right: 1px solid var(--ps-line); }
}
@media (max-width: 900px) {
  .ps-wrap { width: min(86vw, 340px); border-radius: 0 24px 24px 0; overflow: hidden; background: var(--ps-panel); }
  .ps-rail, .ps-sl, .ps-nav, .ps-tog, .ps-fly { display: none !important; }
  .ps-panel, .ps-panel.shut { width: 100%; flex: 1 1 auto; border-right: 0; }
  .ps-ph { height: 64px; flex-basis: 64px; padding: 0 12px 0 18px; } .ps-ws .ps-word { font-size: 20px; }
  .ps-scroll { padding: 0 12px 24px; }
  .ps-all { display: block; }
  .ps-who2 { display: flex; align-items: center; gap: 12px; padding: 8px 8px 14px; border-bottom: 1px solid var(--ps-line); margin-bottom: 4px; }
  .ps-who2 .ps-face { width: 44px; height: 44px; border-radius: 50%; background: var(--ps-wash); color: var(--ps-accent-ink); font-weight: 700; display: grid; place-items: center; flex: none; }
  .ps-who2 b { display: block; font-size: 16px; color: var(--ps-ink); } .ps-who2 small { display: block; font-size: 13.5px; color: var(--ps-muted); overflow-wrap: anywhere; }
  .ps-gl { padding: 14px 10px 4px; font-size: 11.5px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--ps-muted); }
  .ps-all .ps-a { height: 48px; font-size: 16.5px; padding: 0 12px; }
  .ps-so { color: #b42318; margin-top: 10px; border-top: 1px solid var(--ps-line); border-radius: 0; height: 54px; } .ps-so svg { color: #b42318; }
}
@media (prefers-reduced-motion: reduce) { .ps-nav.wf > *, .ps-fly, .ps-menu, .ps-panel { animation: none !important; transition: none !important; } }