/* FLT platform shell (Phase 0, D9) — the one bar that sits on top of every page:
   fltortho.com/login (brand only), /home, po.fltortho.com, commissions.fltortho.com, bo.fltortho.com.
   Theme lifted verbatim from the commissions / PO portals (bg #0c0f14, ink #e8eef7, muted #9fb0c7, gold #d6a73a).
   Served from Pages as /platform/platform.css?v=N. Host pages add this file + platform.js and nothing else changes
   until platform.js mounts (every override below is scoped to body.fp-mounted). */
:root{
  --fp-h:48px;
  --fp-bg:#0c0f14; --fp-bar:rgba(17,22,30,.96); --fp-pop:#151b25;
  --fp-ink:#e8eef7; --fp-muted:#9fb0c7; --fp-dim:#718198; --fp-soft:#c6d2e3;
  --fp-gold:#d6a73a; --fp-gold-hover:#ecc152; --fp-gold-ink:#10151d; --fp-gold-dim:#5f4818;
  --fp-input:#10151d; --fp-border:#303846; --fp-line:rgba(255,255,255,.08); --fp-line-strong:rgba(255,255,255,.13);
  --fp-card:rgba(255,255,255,.04);
  --fp-font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}

/* ---------- the bar ---------- */
.fp-bar{position:sticky;top:0;z-index:25;display:flex;align-items:center;gap:4px;height:var(--fp-h);
  padding:0 12px 0 16px;background:var(--fp-bar);border-bottom:1px solid var(--fp-line);backdrop-filter:blur(8px);
  font-family:var(--fp-font);font-size:13px;line-height:1.2;color:var(--fp-ink);box-sizing:border-box;margin:0}
.fp-bar *,.fp-bar *::before,.fp-bar *::after{box-sizing:border-box}
.fp-bar a{text-decoration:none;color:inherit}
.fp-brand{display:inline-flex;align-items:center;flex:0 0 auto;margin-right:10px;font-weight:700;font-size:15px;
  letter-spacing:-.01em;white-space:nowrap;color:var(--fp-ink)}
.fp-brand em{font-style:normal;color:var(--fp-gold);margin-left:5px}
.fp-brand:hover em{color:var(--fp-gold-hover)}
.fp-nav{display:flex;align-items:center;gap:4px;flex:1 1 auto;min-width:0}
.fp-right{display:flex;align-items:center;gap:4px;flex:0 0 auto;margin-left:auto}

/* top-level items and drop-down handles share one look */
.fp-nav>a,.fp-menu>summary{display:inline-flex;align-items:center;gap:7px;padding:7px 11px;border-radius:7px;
  color:var(--fp-muted);font-size:13px;font-weight:600;white-space:nowrap;cursor:pointer;user-select:none;list-style:none;
  background:transparent;border:0;margin:0;line-height:1.2}
.fp-menu>summary::-webkit-details-marker{display:none}
.fp-menu>summary::marker{content:""}
.fp-nav>a:hover,.fp-menu>summary:hover,.fp-menu[open]>summary{color:#fff;background:rgba(255,255,255,.07)}
.fp-nav>a.fp-on,.fp-menu.fp-on>summary{color:var(--fp-gold-ink);background:var(--fp-gold)}
.fp-nav>a.fp-on:hover,.fp-menu.fp-on>summary:hover{background:var(--fp-gold-hover)}
.fp-caret{color:var(--fp-dim);font-size:10px;transition:transform .15s ease}
.fp-menu[open]>summary .fp-caret{transform:rotate(180deg)}
.fp-menu.fp-on>summary .fp-caret{color:var(--fp-gold-dim)}
/* the view you are on, inside the portal's pill ("Commissions · Rep Rules") */
.fp-menu>summary .fp-view{font-weight:500;opacity:.85;max-width:190px;overflow:hidden;text-overflow:ellipsis}
.fp-menu>summary .fp-view::before{content:"·";margin-right:6px}
@media (max-width:1040px){.fp-menu>summary .fp-view{display:none}}

/* drop-downs */
.fp-menu{position:relative;margin:0;padding:0}
.fp-pop{position:absolute;z-index:30;top:calc(100% + 8px);left:0;display:grid;min-width:220px;padding:7px;margin:0;
  max-height:calc(100vh - var(--fp-h) - 16px);overflow-y:auto;overscroll-behavior:contain;
  background:var(--fp-pop);border:1px solid var(--fp-line-strong);border-radius:10px;box-shadow:0 20px 55px rgba(0,0,0,.5)}
.fp-pop.fp-pop-right{left:auto;right:0;min-width:190px}
.fp-pop a{display:block;padding:9px 11px;border-radius:7px;color:var(--fp-soft);font-size:13px;font-weight:500;white-space:nowrap}
.fp-pop a:hover{color:#fff;background:rgba(255,255,255,.07)}
.fp-pop a.fp-on{color:var(--fp-gold);font-weight:700}
.fp-pop .fp-sep{height:1px;margin:6px 4px;background:var(--fp-line)}
.fp-pop .fp-head{padding:8px 11px 4px;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--fp-gold);font-weight:700}
.fp-pop .fp-who{padding:8px 11px 6px;color:var(--fp-muted);font-size:12px;line-height:1.45;white-space:nowrap}
.fp-pop .fp-who b{display:block;color:var(--fp-ink);font-size:13px}
.fp-pop .fp-who span{display:block;color:var(--fp-gold);font-size:12px;font-weight:600}
.fp-pop a.fp-signout{color:#f0b7b2}
.fp-pop a.fp-signout:hover{background:rgba(218,54,51,.16);color:#ffd2cf}

/* the person on the right */
.fp-user>summary{font-weight:600;color:var(--fp-ink)}
.fp-user>summary .fp-avatar{display:inline-grid;place-items:center;width:24px;height:24px;border-radius:50%;
  background:var(--fp-gold);color:var(--fp-gold-ink);font-size:11px;font-weight:800;letter-spacing:0}
.fp-user-name{max-width:180px;overflow:hidden;text-overflow:ellipsis}

/* compact: one "Menu" drop-down carries every link on narrow screens */
.fp-all{display:none}
@media (max-width:760px){
  .fp-bar{padding:0 8px 0 12px}
  .fp-brand{margin-right:4px}
  /* phone-44 */
  .fp-brand,.fp-all>summary,.fp-user>summary{min-height:44px;padding-left:10px;padding-right:10px}
  .fp-pop a{min-height:44px;display:flex;align-items:center}
  .fp-nav>a,.fp-nav>.fp-menu{display:none}
  .fp-nav>.fp-all{display:block;margin-left:auto}
  .fp-user-name{display:none}
  .fp-pop{min-width:200px}
}

/* ---------- host pages ----------
   Nothing here applies until platform.js has mounted (body.fp-mounted), so a missing script leaves the page as it was.
   Commissions + PO board (Brian, 2026-10-03): the portal's own top bar is gone — the platform bar's drop-down mirrors every
   view and action it had (platform.js hostGroups), and its hidden links still switch the view in place. */
body.fp-mounted.fp-host-po .topbar,
body.fp-mounted.fp-host-commissions .topbar{display:none!important}
/* Back office (and anything else still keeping its own bar): it becomes a sub-nav under the platform bar. */
body.fp-mounted .topbar{top:var(--fp-h)}
body.fp-mounted .topbar .portal-switch,
body.fp-mounted .topbar .portal-link,
body.fp-mounted .topbar .logout,
body.fp-mounted .topbar #logout-btn{display:none!important}
body.fp-mounted .topbar .brand{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--fp-muted);font-weight:700}
body.fp-mounted .topbar .brand span{color:var(--fp-gold)}
body.fp-mounted .topbar .who{opacity:.85}
/* Hermes (bo.fltortho.com): blue square mark retired, title becomes the section label */
body.fp-mounted.fp-host-bo .topbar .brand-mark.small{display:none}
body.fp-mounted.fp-host-bo .topbar-title{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--fp-gold);font-weight:700}
body.fp-mounted.fp-host-bo .topbar{padding-top:10px;padding-bottom:10px}
/* anchors the bar would otherwise cover when a deep link scrolls to them */
body.fp-mounted [id]{scroll-margin-top:calc(var(--fp-h) + 12px)}
