/* 4D Elevated On-Brand tokens (Joseph 2026-08-01: "go ahead and implement
   this design" — ported from the yokogawa_rep_portal_4d_package ChatGPT
   mockup). Same variable NAMES throughout, just new values, so every
   existing component across the app (dozens of pages built long before
   this restyle) picks up the new look automatically via its existing
   var(--panel)/var(--shadow)/var(--radius)/var(--blue) etc. references —
   no markup changes needed for anything not explicitly re-touched below. */
:root{
  --navy:#0a2346; --navy-2:#12345f;
  --sidebar:#fafbfd; --sidebar-hover:#eef2f7; --sidebar-active:#ffffff; --sidebar-line:#e2e8f0;
  --sidebar-text:#3f4b5d; --sidebar-text-dim:#8c97a7;
  --bg:#f4f7fb; --panel:#ffffff; --ink:#10213d; --muted:#5b6b82; --line:#dfe6ef; --line-soft:#eaeff5;
  --blue:#0055b8; --blue-soft:#e3ecff;
  --teal:#0e9488; --teal-soft:#e1f5f2;
  --orange:#d97706; --orange-soft:#fdecd6;
  --purple:#7c4fd1; --purple-soft:#efe7fb;
  --green:#0f9d58; --green-soft:#e2f6ea;
  --yellow:#ffe500;
  --brand-green:#72DAA0; --brand-green-soft:#D0F3DF; --brand-green-ink:#1d7a4c;
  --radius:8px;
  --shadow:none;
  --shadow-hover:0 3px 8px rgba(18,45,78,.07), 0 16px 34px rgba(18,45,78,.13);
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:#0e1420; --panel:#161d2b; --ink:#e6ebf2; --muted:#8a96a8; --line:#2a3345; --line-soft:#242c3c;
    --blue-soft:#132a4d; --teal-soft:#0f2c29; --orange-soft:#3a2a10; --purple-soft:#2a2140; --green-soft:#0f2a1c;
    --sidebar:#111a2c; --sidebar-hover:#1b2438; --sidebar-active:#1f2942; --sidebar-line:#2a3345;
    --sidebar-text:#c7d0de; --sidebar-text-dim:#6b7688;
  }
}
:root[data-theme="dark"]{
  --bg:#0e1420; --panel:#161d2b; --ink:#e6ebf2; --muted:#8a96a8; --line:#2a3345; --line-soft:#242c3c;
  --blue-soft:#132a4d; --teal-soft:#0f2c29; --orange-soft:#3a2a10; --purple-soft:#2a2140; --green-soft:#0f2a1c;
  --sidebar:#111a2c; --sidebar-hover:#1b2438; --sidebar-active:#1f2942; --sidebar-line:#2a3345;
  --sidebar-text:#c7d0de; --sidebar-text-dim:#6b7688;
}
:root[data-theme="light"]{
  --bg:#f4f7fb; --panel:#ffffff; --ink:#10213d; --muted:#5b6b82; --line:#dfe6ef; --line-soft:#eaeff5;
  --blue-soft:#e3ecff; --teal-soft:#e1f5f2; --orange-soft:#fdecd6; --purple-soft:#efe7fb; --green-soft:#e2f6ea;
}
*{box-sizing:border-box;}
html,body{margin:0; padding:0; background:var(--bg); height:100%;}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  color:var(--ink); font-size:16.5px; line-height:1.55;
  display:flex; flex-direction:column; height:100vh; overflow:hidden;
}
a{color:var(--blue); text-decoration:none;}
a:hover{text-decoration:underline;}
button{font-family:inherit;}
:focus-visible{outline:2px solid var(--blue); outline-offset:2px;}
.icon{width:18px; height:18px; stroke:currentColor; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; flex:none;}

/* ---- status banner (2026-08-05: retired the permanent "ALPHA — INTERNAL
   PREVIEW ONLY" framing — this is now only shown for real operational
   alerts, e.g. "content may be out of date", via setBanner()) ---- */
.status-banner{
  background:#000; color:var(--yellow); font-size:13.5px; font-weight:600;
  text-align:center; padding:7px 45.5px 7px 13.5px; letter-spacing:.02em; flex:none; position:relative;
}
.status-banner span{opacity:.85; font-weight:500;}
.status-banner .sb-close{
  position:absolute; right:8px; top:50%; transform:translateY(-50%);
  background:none; border:none; color:inherit; cursor:pointer; font-size:18px; line-height:1;
  padding:4.5px 8px; opacity:.65; border-radius:5px; transition:opacity .12s ease, background .12s ease;
}
.status-banner .sb-close:hover{opacity:1; background:rgba(255,238,0,.14);}
.edit-mode-banner{background:var(--orange, #d97706); color:#fff; font-size:13.5px; font-weight:600;
  align-items:center; justify-content:center; gap:8px; padding:9px 13.5px; letter-spacing:.01em; flex:none;}
.edit-mode-banner b{font-weight:750;}
.edit-mode-banner #editModeBannerExit{background:rgba(255,255,255,.2); border:1px solid rgba(255,255,255,.4); color:#fff;
  font-size:12.5px; font-weight:700; padding:4.5px 12.5px; border-radius:999px; cursor:pointer; transition:background .12s ease;}
.edit-mode-banner #editModeBannerExit:hover{background:rgba(255,255,255,.32);}

/* ---- app shell ---- */
.app{display:flex; flex-direction:column; flex:1; min-height:0;}
header.topbar{
  background:#fff; color:var(--ink); display:flex; align-items:center; justify-content:space-between;
  padding:0 23px; height:74px; flex:none; position:relative; z-index:20; border-bottom:1px solid var(--line);
}
.brand{display:flex; align-items:center; gap:12px; min-width:220px; flex:none;}
.brand-link{display:flex; align-items:center; gap:12px; text-decoration:none; color:inherit; border-radius:8px; padding:4.5px 7px; margin:-4px -6px; transition:background .12s ease;}
.brand-link:hover{background:var(--bg); text-decoration:none;}
.brand-link:focus-visible{outline:2px solid var(--yellow); outline-offset:2px;}
.brand .diamond{width:17px; height:18px; display:inline-flex; flex:none; color:var(--yellow);}
.brand .diamond svg{width:100%; height:100%; display:block;}
.brand .diamond svg path{fill:currentColor;}
.brand-text{display:flex; flex-direction:column; line-height:1.2;}
.brand-text b{font-size:17.5px; letter-spacing:.02em;}
.brand-text small{font-size:12.5px; color:var(--muted);}
.brand-text .wordmark{width:112px; height:21px; display:inline-flex; color:inherit;}
.brand-text .wordmark svg{width:100%; height:100%; display:block;}
/* Desktop brand lockup — sits directly on the now-white header (no chip
   needed, header.topbar background:#fff makes it redundant); .brand-compact
   is the mobile fallback */
.brand-lockup{display:flex; align-items:center; gap:14px; line-height:1.15;}
.brand-lockup .bl-main{display:flex; flex-direction:column;}
.brand-lockup .bl-top{display:flex; align-items:center;}
.brand-lockup .bl-top .wordmark{width:172px; height:25px; display:inline-flex; color:#1b2a4a;}
.brand-lockup .bl-top .wordmark svg{width:100%; height:100%; display:block;}
.brand-lockup .bl-mid{font-size:14px; font-weight:700; color:#1b2a4a; letter-spacing:.01em;}
.brand-lockup .bl-mid span{color:#6b7280;}
.brand-lockup .bl-rule{width:1px; align-self:stretch; background:var(--line);}
.brand-lockup .bl-bottom{font-size:20px; font-weight:750; letter-spacing:-.01em; color:var(--blue);}
.brand-compact{display:none !important;}
@media (max-width:700px){
  /* Phone header budget: menu + wordmark on the left, search/help/bell/
     avatar on the right — the 220px desktop brand minimum and 18px icon
     gaps overflowed a 390px screen by ~64px. */
  header.topbar{padding:0 8px 0 6px;}
  .brand{min-width:0; gap:2px;}
  header.topbar .topbar-right{gap:0;}
  header.topbar .persona{padding:4px; gap:0;}
  header.topbar .persona > .icon{display:none;}
  header.topbar .lang-toggle button{padding:5px 8px;}
  .brand-lockup{display:none;}
  .brand-compact{display:inline-block !important;}
  .brand-text.brand-compact{display:flex !important;}
}
/* Mexico reps also get the EN/ES toggle in the header — on the narrowest
   phones that no longer fits beside the wordmark, so keep just the diamond. */
@media (max-width:430px){
  header.topbar:has(#langToggle:not([style*="none"])) .brand-text.brand-compact{display:none !important;}
}
.menu-btn{display:none; background:none; border:none; color:var(--ink); padding:9px; cursor:pointer;}
.gsearch{flex:1; max-width:460px; margin:0 24px; display:flex; align-items:center; gap:9px; position:relative;
  background:var(--bg); border:1px solid var(--line); border-radius:9px; padding:9px 13.5px;
  color:var(--muted); transition:background .15s ease, border-color .15s ease;}
.gsearch:focus-within{background:var(--panel); border-color:var(--blue);}
.gsearch input{flex:1; background:none; border:none; outline:none; color:var(--ink); font:inherit; font-size:14.5px;}
.gsearch input::placeholder{color:var(--muted);}
.gsearch kbd{font-size:11px; font-weight:700; color:var(--muted); background:var(--panel); border:1px solid var(--line); border-radius:5px; padding:2.5px 7px; flex:none;}
.gsearch-btn, .gsearch-close{display:none; background:none; border:none; color:var(--muted); cursor:pointer; padding:0; width:40px; height:40px; border-radius:9px; align-items:center; justify-content:center; flex:none;}
.gsearch-btn:hover, .gsearch-close:hover{background:var(--bg); color:var(--ink);}
/* ≤860px: the inline box is hidden and #gsearchBtn opens it as an overlay
   across the whole header (body.gsearch-open), results filling the screen
   below it. */
@media (max-width:860px){
  .gsearch{display:none;}
  .gsearch-btn{display:flex;}
  body.gsearch-open .gsearch{display:flex; position:absolute; inset:12px 12px; margin:0; max-width:none; z-index:40; background:var(--panel); border-color:var(--blue); padding:0 4px 0 13.5px;}
  body.gsearch-open .gsearch kbd{display:none;}
  body.gsearch-open .gsearch-close{display:flex;}
  body.gsearch-open .gsearch input{font-size:16px;}
  body.gsearch-open #gsearchResults{position:fixed; top:74px; left:0; right:0; border-radius:0; border-left:none; border-right:none; max-height:calc(100dvh - 74px);}
  body.gsearch-open .gs-row{padding:13.5px 16px;}
  body.gsearch-open .gs-foot{display:none;}
}
#gsearchResults{position:absolute; top:calc(100% + 8px); left:0; right:0; background:var(--panel); border:1px solid var(--line);
  border-radius:12px; box-shadow:var(--shadow-hover); max-height:min(70vh,520px); overflow-y:auto; display:none; z-index:60; text-align:left;}
.gs-row{display:flex; align-items:flex-start; gap:10px; padding:11.5px 16px; cursor:pointer; border-bottom:1px solid var(--line);}
.gs-row:last-child{border-bottom:none;}
.gs-row:hover, .gs-row.gs-active{background:var(--bg);}
.gs-type{display:inline-flex; align-items:center; gap:4px; font-size:10.5px; font-weight:700; letter-spacing:.02em; padding:3.5px 8px;
  border-radius:999px; flex:none; margin-top:2px; white-space:nowrap;}
.gs-main{min-width:0; flex:1;}
.gs-main b{font-size:14px; display:block; color:var(--ink); font-weight:650;}
.gs-snippet{font-size:13px; color:var(--muted); margin-top:2px; line-height:1.4; display:flex; gap:4px; align-items:flex-start;}
.gs-snippet .icon{flex:none; margin-top:3px; opacity:.6;}
.gs-snippet mark{background:rgba(255,212,0,.4); color:inherit; padding:0 1px; border-radius:2px; font-weight:650;}
.gs-empty{padding:20.5px 16px; text-align:center; color:var(--muted); font-size:14px;}
.gs-foot{padding:9px 16px; font-size:12px; color:var(--muted); border-top:1px solid var(--line); display:flex; gap:12px;}
.gs-foot kbd{font-size:10.5px; font-weight:700; background:var(--bg); border:1px solid var(--line); border-radius:4px; padding:1px 5.5px;}
.topbar-right{display:flex; align-items:center; gap:18px; flex:none;}
.bell{color:var(--muted); cursor:pointer; position:relative;}
.bell .dot-badge{position:absolute; top:-2px; right:-2px; width:7px; height:7px; border-radius:50%; background:var(--yellow); border:1.5px solid #fff;}
.lang-toggle{display:flex; align-items:center; border:1px solid var(--line); border-radius:999px; overflow:hidden; flex:none;}
.lang-toggle button{border:none; background:none; cursor:pointer; font-size:11px; font-weight:700; letter-spacing:.02em; padding:5px 10px; color:var(--muted);}
.lang-toggle button.active{background:var(--blue); color:#fff;}
.notif-panel{position:absolute; top:calc(100% + 12px); right:-8px; width:340px; background:var(--panel); border:1px solid var(--line);
  border-radius:12px; box-shadow:var(--shadow-hover); max-height:420px; overflow-y:auto; display:none; z-index:60; text-align:left; cursor:default;}
.notif-head{padding:12.5px 16px; border-bottom:1px solid var(--line); font-size:13.5px; font-weight:700; color:var(--ink); display:flex; justify-content:space-between; align-items:center;}
.notif-head span:last-child{font-weight:600; color:var(--muted);}
.notif-item{padding:12.5px 16px; border-bottom:1px solid var(--line); cursor:pointer; position:relative;}
.notif-item:last-child{border-bottom:none;}
.notif-item:hover{background:var(--bg);}
.notif-item b{font-size:14px; display:block; color:var(--ink); padding-right:13.5px;}
.notif-item p{font-size:13px; color:var(--muted); margin:3px 0 0; line-height:1.4; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;}
.notif-item .date{font-size:12px; color:var(--muted); margin-top:5px; display:block;}
.notif-item.notif-unread::before{content:''; position:absolute; top:15px; right:14px; width:6px; height:6px; border-radius:50%; background:var(--blue);}
.notif-empty{padding:25px 16px; text-align:center; color:var(--muted); font-size:14px;}
.notif-more, .news-more{padding:11.5px 16px; text-align:center; font-size:13.5px; font-weight:650; color:var(--blue); cursor:pointer; display:flex; align-items:center; justify-content:center; gap:5px;}
.notif-more:hover, .news-more:hover{background:var(--bg);}
.notif-more svg, .news-more svg{width:12px; height:12px;}
.news-more{border-top:1px solid var(--line); margin-top:4px; border-radius:0 0 10px 10px;}
.persona{display:flex; align-items:center; gap:9px; cursor:pointer; padding:7px 9px; border-radius:8px;}
.persona:hover{background:var(--bg);}
.avatar{width:40px; height:40px; border-radius:50%; background:var(--brand-green-soft); color:var(--brand-green-ink); display:flex; align-items:center; justify-content:center; font-weight:700; font-size:15.5px; flex:none;}
.persona-text{display:flex; flex-direction:column; line-height:1.25;}
.persona-text b{font-size:14px;}
.persona-text small{font-size:12px; color:var(--muted);}

/* "View portal as" banner (persona modal, 2026-08-05 Hub auth cutover) —
   shown while STATE.viewAs is active, so it's never ambiguous that this is
   a simulated preview and not the signed-in user's real identity. */
.viewas-banner{background:var(--orange-soft); color:var(--ink); border-radius:9px; padding:11.5px 13.5px; font-size:13.5px; line-height:1.45; margin-bottom:14px;}
/* Header "View portal as" control (2026-08-05, moved out of the persona
   modal for visibility) — a plain <select> when idle, a pill + Exit button
   once STATE.viewAs is active. */
.view-as-wrap{display:none; align-items:center; gap:6px; flex:none;}
.viewas-select{font-size:13px; font-weight:600; padding:5.5px 9px; border-radius:6px; border:1px solid var(--line); background:var(--panel); color:var(--ink); cursor:pointer; max-width:220px; text-overflow:ellipsis;}
.viewas-pill{font-size:13px; color:var(--muted); white-space:nowrap;}
.viewas-pill b{color:var(--ink);}
@media (max-width:900px){ .view-as-wrap{display:none !important;} }

.body-row{display:flex; flex:1; min-height:0; position:relative;}
nav.sidebar{
  width:272px; flex:none; background:var(--sidebar); border-right:1px solid var(--sidebar-line);
  padding:23px 16px; display:flex; flex-direction:column; gap:4px; overflow-y:auto;
}
.nav-group-label{font-size:12px; letter-spacing:.09em; text-transform:uppercase; color:var(--sidebar-text-dim); font-weight:700; margin:20px 10px 8px; }
.nav-group-label:first-child{margin-top:4px;}
.nav-item{
  position:relative; display:flex; align-items:center; gap:12px; padding:12.5px 13.5px 12.5px 16px; border-radius:11px; color:var(--sidebar-text);
  font-size:15.5px; font-weight:500; cursor:pointer; border:none; background:none; width:100%; text-align:left;
  transition:background .2s ease, color .2s ease, transform .2s ease;
}
.nav-item:hover{background:var(--sidebar-hover); color:var(--ink); transform:translateX(2px);}
.nav-item.active{background:var(--sidebar-active); color:var(--ink); font-weight:650; box-shadow:0 5px 14px rgba(31,54,84,.08), inset 0 0 0 1px var(--sidebar-line);}
.nav-item.active::before{content:''; position:absolute; left:-6px; top:10px; bottom:10px; width:3px; border-radius:8px; background:var(--yellow);}
.nav-item .icon{color:var(--sidebar-text-dim);}
.nav-item:hover .icon{color:var(--ink);}
.nav-item.active .icon{stroke:var(--ink); color:var(--ink);}
.nav-item .ext{margin-left:auto; color:var(--sidebar-text-dim); opacity:.8;}
.nav-item.nav-ghost{opacity:.55;}
.sidebar-foot{margin-top:auto; padding-top:16px; border-top:1px solid var(--sidebar-line);}
.sidebar-classification{font-size:10.5px; font-weight:650; letter-spacing:.04em; text-transform:uppercase; color:var(--sidebar-text-dim); text-align:center; padding:10px 10px 2px;}
.enable-cta{margin:18px 2px 4px; background:var(--panel); border:1px solid var(--sidebar-line); border-radius:14px; padding:18px 17px;}
.enable-cta b{display:block; color:var(--ink); font-size:15px; margin-bottom:5px;}
.enable-cta p{margin:0 0 12px; color:var(--sidebar-text-dim); font-size:13px; line-height:1.4;}
.enable-cta button{display:flex; align-items:center; justify-content:space-between; gap:6px; width:100%; background:var(--bg);
  border:1px solid var(--line); color:var(--ink); font:inherit; font-size:13.5px; font-weight:650; border-radius:8px; padding:10.5px 13.5px; cursor:pointer; transition:background .15s ease;}
.enable-cta button:hover{background:var(--sidebar-hover);}

main.content{flex:1; overflow-y:auto; padding:36.5px 41px 73px;}
.content-inner{max-width:1180px; margin:0 auto;}

.page-head{display:flex; align-items:flex-end; justify-content:space-between; flex-wrap:wrap; gap:16px; margin-bottom:26px;}
.page-head h1{font-size:28px; font-weight:750; letter-spacing:-.01em; margin:0 0 5px;}
.page-head p{margin:0; color:var(--muted); font-size:16px;}
.select{
  background:var(--panel); border:1px solid var(--line); border-radius:8px; padding:10.5px 15px; font-size:15px;
  color:var(--ink); display:flex; align-items:center; gap:8px; cursor:pointer;
}
select.native{appearance:none; -webkit-appearance:none; border:none; background:none; font:inherit; color:inherit; cursor:pointer; padding-right:2.5px;}

.grid-cards{display:grid; gap:18px;}
.card{background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); padding:25px 27.5px;}
.card-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:14px;}
.card-head h3{font-size:16.5px; font-weight:650; margin:0;}
/* Home page's three top-level card headers only (News/Quick links/Orders) —
   2026-08-05: "make home page headers bigger and more aesthetic". Scoped to
   .home-card-head rather than bumping .card-head h3 globally, which is
   shared by every other page's cards. */
.home-card-head h3{font-size:20.5px; font-weight:750; letter-spacing:-.01em; color:var(--navy);}
/* --navy is a fixed brand color, not theme-swapped like --ink/--bg/etc (see
   the :root definitions above) — dark navy text would be near-invisible on
   a dark card background, so fall back to --ink there. */
@media (prefers-color-scheme: dark){ .home-card-head h3{color:var(--ink);} }
:root[data-theme="dark"] .home-card-head h3{color:var(--ink);}
:root[data-theme="light"] .home-card-head h3{color:var(--navy);}
/* Orders card header only (2026-08-07): the org picklist sits inline next
   to the h3 now (moved per Joseph's ask), which can collide with the
   "Historical trends" link on narrow widths — .card-head has no flex-wrap
   by default, so add it here without touching the shared News/Quick-links
   headers that don't have this extra inline control. */
.orders-card-head{flex-wrap:wrap; row-gap:8px;}
.tag-sample{font-size:10.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--orange); background:var(--orange-soft); padding:2.5px 8px; border-radius:5px;}

/* dashboard top row */
.dash-top{display:grid; grid-template-columns:1.15fr 2fr; gap:16px; margin-bottom:16px;}
.announce{display:flex; gap:14px; align-items:flex-start;}
.announce .ic{width:42px; height:42px; border-radius:10px; background:var(--blue-soft); color:var(--blue); display:flex; align-items:center; justify-content:center; flex:none;}
.announce .body b{display:block; font-size:15px; margin-bottom:3px;}
.announce .body p{margin:0 0 4px; color:var(--muted); font-size:14px;}
.announce .body .date{font-size:12.5px; color:var(--muted);}
.announce-link{margin-left:auto; color:var(--muted); flex:none; align-self:center;}

.kpi-row{display:grid; grid-template-columns:repeat(4,1fr); gap:18px;}
.kpi{padding:20.5px 23px;}
.kpi .lbl{font-size:14px; color:var(--muted); font-weight:600; margin-bottom:7px;}
.kpi .num{font-size:25.5px; font-weight:750; letter-spacing:-.01em; font-variant-numeric:tabular-nums;}
.kpi .delta{font-size:13.5px; color:var(--green); font-weight:650; margin-top:3px;}
.kpi .scope{font-size:12.5px; color:var(--muted); margin-top:2px;}
.kpi svg.spark{width:100%; height:34px; margin-top:8px; display:block;}

.qa-grid{display:grid; grid-template-columns:repeat(7,1fr); gap:12px; margin-bottom:16px;}
.qa-tile{
  background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow);
  padding:20.5px 11.5px 16px; display:flex; flex-direction:column; align-items:center; gap:9px; cursor:pointer;
  text-align:center; font-size:13.5px; font-weight:600; color:var(--ink); border:1px solid var(--line);
}
.qa-tile:hover{border-color:var(--blue);}
.qa-tile .ic{width:44px; height:44px; border-radius:11px; display:flex; align-items:center; justify-content:center;}

/* launchpad (brainstorm-map home) */
:root{--coral:#e35d6a; --coral-soft:#fdeaec;}
:root[data-theme="dark"]{--coral-soft:#3a1d22;}
@media (prefers-color-scheme: dark){ :root{--coral-soft:#3a1d22;} }
:root[data-theme="light"]{--coral-soft:#fdeaec;}
.ann-line{display:flex; align-items:center; gap:14px; background:var(--panel); border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow); padding:13.5px 18px; margin-bottom:18px; font-size:14px; cursor:pointer;}
.ann-line .ann-ic{width:34px; height:34px; border-radius:9px; background:var(--blue-soft); color:var(--blue); display:flex; align-items:center; justify-content:center; flex:none;}
.ann-line .ann-body{flex:1; min-width:0;}
.ann-line .ann-body b{display:block; font-size:14.5px;}
.ann-line .ann-body small{display:block; color:var(--muted); font-size:13px; margin-top:1px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.ann-line .date{color:var(--muted); font-size:12.5px; flex:none;}

/* Home: prominent news card + demoted one-line KPI strip */
.news-card{margin-bottom:16px; padding:0; overflow:hidden;}
.qlinks-card{margin-bottom:16px;}
.news-card .card-head{padding:18px 23px 13.5px;}
.news-list{display:flex; flex-direction:column;}
.news-item{display:flex; gap:14px; align-items:flex-start; padding:17px 23px; border-top:1px solid var(--line-soft); cursor:pointer; text-align:left; background:none; border-left:none; border-right:none; border-bottom:none; width:100%; font:inherit; color:inherit; transition:background .15s ease;}
.news-item:hover{background:color-mix(in srgb, var(--blue-soft) 45%, var(--panel));}
.news-item .nic{width:38px; height:38px; border-radius:11px; background:var(--blue-soft); color:var(--blue); display:flex; align-items:center; justify-content:center; flex:none;}
.news-item .nbody{flex:1; min-width:0;}
.news-item .nbody b{display:block; font-size:16px; font-weight:600;}
.news-item .nbody p{margin:3px 0 0; color:var(--muted); font-size:14px; line-height:1.5;}
.news-item .nw-image{display:block; max-width:100%; max-height:220px; border-radius:8px; margin:8px 0; object-fit:cover;}
.news-item .nw-thumb{display:none; width:46px; height:46px; border-radius:10px; object-fit:cover; flex:none;}
.item-new-dot{display:inline-block; width:8px; height:8px; border-radius:50%; background:var(--yellow); margin:0 6px 0 0; vertical-align:1px; box-shadow:0 0 0 3px rgba(255,212,0,.18); flex:none;}
.sec-tile .tl .item-new-dot{margin:0 0 0 6px;}
.nav-unread-dot{display:inline-block; width:8px; height:8px; border-radius:50%; background:var(--yellow); margin-left:6px; vertical-align:1px; box-shadow:0 0 0 3px rgba(255,212,0,.18);}
.news-item .nw-attachment{display:inline-flex; align-items:center; gap:6px; margin-top:8px; font-size:13.5px; font-weight:600; color:var(--blue); background:var(--blue-soft); border:none; border-radius:7px; padding:7px 12.5px; cursor:pointer;}
.news-item .nw-attachment:hover{filter:brightness(0.96);}
.news-item .date{color:var(--muted); font-size:12.5px; flex:none; margin-top:2px;}
.news-item .nbody small{display:block; color:var(--muted); font-size:13px; margin-top:2px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
/* Phones: icon + title/snippet on the first line; date and the editor
   buttons (pin/edit/date/remove) wrap to a second line under the title —
   squeezed into one row they left the title a ~60px column, one word per
   line, with the date painted over it. */
@media (max-width:560px){
  .news-item{flex-wrap:wrap; align-items:center; gap:6px 10px; padding:14px 16px;}
  .news-item .nic, .news-item .nw-thumb{align-self:flex-start;}
  .news-item .nbody{flex:1 1 calc(100% - 52px);}
  .news-item .nbody small{white-space:normal; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;}
  .news-item .date{margin:0 auto 0 48px;}
  .news-item .btn.ghost{padding:7px 11px !important;}
  .news-item-pinned{padding-left:13px;}
}
/* Full-page announcement list only (Home's mini-preview doesn't call announcementRowHtml) */
.news-item-pinned{border-left:3px solid var(--blue); padding-left:20px;}
.nw-group-label{font-size:11.5px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--muted); padding:14px 23px 6px;}
.news-list .nw-group-label:first-child{padding-top:16px;}
.kpi-mini{display:flex; flex-wrap:wrap; background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); padding:13.5px 7px; margin-bottom:18px;}
.kpi-mini .km{flex:1 1 0; min-width:150px; padding:4.5px 20.5px; border-left:1px solid var(--line);}
.kpi-mini .km:first-child{border-left:none;}
.kpi-mini .lbl{font-size:12px; color:var(--muted); font-weight:700; letter-spacing:.05em; text-transform:uppercase;}
.kpi-mini .val{font-size:18.5px; font-weight:750; font-variant-numeric:tabular-nums; letter-spacing:-.01em; display:flex; align-items:baseline; gap:8px;}
.kpi-mini .sc{font-size:11px; color:var(--muted); margin-top:1px;}
.kpi-mini .trend{font-size:12px; font-weight:700;}
.kpi-mini .trend.up{color:var(--green);} .kpi-mini .trend.down{color:#c0392b;}
.kpi-mini .km.link{cursor:pointer; border-radius:8px; transition:background .12s ease;}
.kpi-mini .km.link:hover{background:var(--blue-soft);}
/* Order Submission Assistant (native wizard, ported from the vendored OSA
   iframe 2026-08-01) — reuses portal tokens throughout. --coral doubles as
   this app's danger/error color (already used for discontinued warnings
   elsewhere), --orange as its amber/warning color; neither needed a new
   token. */
.osa-progress{display:flex; gap:5px; margin:4px 0 18px;}
.osa-progress .seg{flex:1; height:5px; border-radius:3px; background:var(--line); cursor:pointer; transition:transform .12s; transform-origin:center;}
.osa-progress .seg:hover{transform:scaleY(1.8);}
.osa-progress .seg.green{background:var(--green);}
.osa-progress .seg.red{background:var(--coral);}
.osa-progress .seg.yellow{background:var(--orange);}
.osa-progress .seg.now{outline:2px solid var(--navy); outline-offset:1px;}
.osa-stepmeta{display:flex; justify-content:space-between; align-items:baseline; margin-bottom:10px;}
.osa-stepmeta .n{font-size:13px; color:var(--muted);}
.osa-stepmeta h2{font-size:20.5px; font-weight:650;}
.osa-lede{display:flex; gap:10px; align-items:flex-start; font-size:15px; color:var(--ink); line-height:1.55; margin:2px 0 16px;}
.osa-lede svg{flex:none; margin-top:2px; color:var(--navy);}
.osa-inline-link{display:inline-flex; align-items:center; gap:4px; color:inherit; font-weight:600; text-decoration:underline; text-underline-offset:2px;}
.osa-tool-tile{display:flex; align-items:center; gap:12px; background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:11.5px 15px; margin:10px 0 2px; text-decoration:none; color:inherit; transition:border-color .15s, box-shadow .15s;}
.osa-tool-tile:hover{border-color:var(--navy); box-shadow:var(--shadow-hover);}
.osa-tool-tile-icon{flex:none; width:34px; height:34px; border-radius:9px; background:var(--blue-soft); color:var(--navy); display:flex; align-items:center; justify-content:center;}
.osa-tool-tile-text{flex:1; min-width:0;}
.osa-tool-tile-title{display:block; font-weight:650; font-size:14.5px; color:var(--ink);}
.osa-tool-tile-sub{display:block; font-size:13px; color:var(--muted); margin-top:1px;}
.osa-tool-tile-go{flex:none; color:var(--muted);}
.osa-h3{font-size:14px; font-weight:650; color:var(--muted); text-transform:uppercase; letter-spacing:.04em; margin-bottom:14px; display:flex; align-items:center; gap:7px;}
.osa-h3 svg{flex:none; color:var(--muted);}
.osa-field{display:flex; flex-direction:column; gap:5px; margin-bottom:14px;}
.osa-field.full{grid-column:1/-1;}
.osa-field label{font-size:14px; color:var(--ink); font-weight:500;}
.osa-field label .opt{color:var(--muted); font-weight:400;}
.osa-field input[type=text],.osa-field input[type=email],.osa-field input[type=date],.osa-field select,.osa-field textarea{
  padding:10.5px 13.5px; border:1px solid var(--line); border-radius:8px; background:var(--panel); color:var(--ink); outline:none; width:100%; font:inherit;}
.osa-field textarea{resize:vertical; min-height:64px;}
.osa-field input:focus,.osa-field select:focus,.osa-field textarea:focus{border-color:var(--navy); box-shadow:0 0 0 3px var(--blue-soft);}
.osa-field .hint{font-size:13px; color:var(--muted);}
.osa-field.ok input{border-color:var(--green); background:var(--green-soft);}
.osa-field.bad input,.osa-field.bad select,.osa-field.bad textarea{border-color:var(--coral); background:var(--coral-soft);}
.osa-field .err{display:none; font-size:13px; color:var(--coral);}
.osa-field.bad .err{display:block;}
.osa-field.bad .hint{display:none;}
.osa-grid{display:grid; grid-template-columns:1fr 1fr; gap:14px;}
@media(max-width:560px){.osa-grid{grid-template-columns:1fr;}}
.osa-check{display:flex; gap:10px; align-items:flex-start; border:1px solid var(--line); border-radius:8px; padding:12.5px 15px; font-size:14.5px; color:var(--ink); background:var(--bg); cursor:pointer;}
.osa-check input{margin-top:3px; accent-color:var(--navy); flex:none;}
.osa-check.bad{border-color:var(--coral); background:var(--coral-soft);}
.osa-check.req::after{content:"required"; margin-left:auto; font-size:12px; color:var(--muted); background:var(--line-soft); border-radius:10px; padding:2.5px 9px; align-self:center; flex:none;}
html[lang="es"] .osa-check.req::after{content:"obligatorio";}
.osa-check.bad.req::after{color:var(--coral); background:var(--coral-soft);}
.osa-callout{display:flex; gap:10px; border-radius:10px; padding:13.5px 16px; font-size:14px; line-height:1.55; margin-top:12px; color:var(--ink);}
.osa-callout.amber{background:var(--orange-soft); border:1px solid color-mix(in srgb, var(--orange) 35%, transparent);}
.osa-callout.amber svg, .osa-callout.amber b{color:var(--orange);}
.osa-callout.red{background:var(--coral-soft); border:1px solid color-mix(in srgb, var(--coral) 35%, transparent);}
.osa-callout.red svg, .osa-callout.red b{color:var(--coral);}
.osa-callout.green{background:var(--green-soft); border:1px solid color-mix(in srgb, var(--green) 35%, transparent);}
.osa-callout.green svg, .osa-callout.green b{color:var(--green);}
.osa-callout.blue{background:var(--blue-soft); border:1px solid color-mix(in srgb, var(--blue) 35%, transparent);}
.osa-callout.blue svg{color:var(--blue);}
.osa-callout svg{flex:none; margin-top:1px;}
.osa-callout ul{margin:6px 0 0 18px;}
.osa-callout b{font-weight:650;}
/* Lead Times calibration tip card (Joseph 2026-08-07) — same blue-callout
   language as .osa-callout, pulled out of the page-head paragraph into its
   own card so it reads as a distinct heads-up, not buried in prose. */
.lt-tip{display:flex; gap:10px; align-items:flex-start; border-radius:10px; padding:12px 15px; font-size:13.5px; line-height:1.5; margin:14px 0 0; color:var(--ink); background:var(--blue-soft); border:1px solid color-mix(in srgb, var(--blue) 35%, transparent);}
.lt-tip svg{flex:none; margin-top:1px; color:var(--blue);}
.lt-tip b{font-weight:650;}
.osa-nav{display:flex; justify-content:space-between; align-items:center; margin-top:18px;}
.osa-navmsg{font-size:13.5px; color:var(--coral); text-align:right; flex:1; margin:0 14px;}
.osa-hidden{display:none !important;}
.osa-step{display:none;}
.osa-step.active{display:block; animation:osaFade .18s ease;}
@keyframes osaFade{from{opacity:0; transform:translateY(4px);} to{opacity:1; transform:none;}}
.osa-review dl{display:grid; grid-template-columns:190px 1fr; gap:7px 16px; font-size:14.5px;}
.osa-review dt{color:var(--muted);}
.osa-review dd{color:var(--ink); font-weight:500; overflow-wrap:anywhere;}
.osa-confirm-list{list-style:none; margin-top:4px;}
.osa-confirm-list li{display:flex; gap:9px; align-items:flex-start; padding:5.5px 0; font-size:14.5px; color:var(--ink); border-bottom:1px solid var(--line-soft);}
.osa-confirm-list li:last-child{border-bottom:none;}
.osa-tick{flex:none; width:16px; height:16px; margin-top:2px; border-radius:4px; background:var(--green); position:relative;}
.osa-tick::after{content:""; position:absolute; left:5px; top:2px; width:4px; height:8px; border:solid #fff; border-width:0 2px 2px 0; transform:rotate(45deg);}
.osa-outbox{border:1px solid var(--line); border-radius:8px; background:var(--bg); padding:13.5px 16px; font-size:14px; margin-top:8px;}
.osa-outbox .lbl{display:flex; justify-content:space-between; align-items:center; margin-bottom:6px;}
.osa-outbox .lbl span{font-size:13px; font-weight:650; color:var(--muted); text-transform:uppercase; letter-spacing:.04em;}
.osa-outbox pre{white-space:pre-wrap; font-family:inherit; color:var(--ink); line-height:1.6;}
.osa-copybtn{font-size:13px; padding:4.5px 11.5px; border-radius:6px; border:1px solid var(--line); background:var(--panel); color:var(--ink);}
.osa-copybtn.copied{border-color:var(--green); color:var(--green);}
.osa-help{margin-top:22px; font-size:14px; color:var(--muted);}
.osa-help summary{cursor:pointer; font-weight:500; color:var(--ink); list-style:none; display:flex; align-items:center; gap:6px; user-select:none;}
.osa-help summary::-webkit-details-marker{display:none;}
.osa-help summary::before{content:"›"; display:inline-block; font-size:17px; line-height:1; color:var(--muted); transition:transform .15s ease; transform:rotate(0deg);}
.osa-help[open] summary::before{transform:rotate(90deg);}
.osa-help table{margin-top:10px; border-collapse:collapse; width:100%; font-size:13.5px;}
.osa-help td{padding:5.5px 9px; border-bottom:1px solid var(--line-soft);}
.osa-help td:first-child{color:var(--muted); white-space:nowrap;}
.osa-footer-note{margin-top:26px; font-size:13px; color:var(--muted); text-align:center;}
.osa-badge{font-size:12px; font-weight:650; padding:3.5px 10.5px; border-radius:10px; white-space:nowrap; display:inline-block;}
.osa-badge.pending{background:var(--orange-soft); color:#b5651d;}
.osa-badge.converted{background:var(--green-soft); color:var(--green);}
.osa-badge.local{background:var(--line-soft); color:var(--muted);}
.osa-sub-row{border:1px solid var(--line); border-radius:10px; padding:13.5px 16px; margin-bottom:10px; display:flex; justify-content:space-between; align-items:flex-start; gap:12px;}
.osa-sub-row .info{font-size:14px; color:var(--ink); line-height:1.55;}
.osa-sub-row .info b{color:var(--ink); font-weight:650;}
.osa-sub-row .actions{display:flex; flex-direction:column; align-items:flex-end; gap:6px; flex:none;}
.osa-sub-empty{font-size:14.5px; color:var(--muted); text-align:center; padding:34px 11.5px;}
.osa-mailapp-opt{display:flex; align-items:center; gap:10px; width:100%; text-align:left; padding:12.5px 15px;}
.osa-mailapp-note{font-size:13px; color:var(--green); text-align:center; margin-top:10px;}

/* ---------- OSA first-time tour (ported from the standalone order-
   submission-assistant, 2026-08-24) ---------- */
#osaTourOverlay{position:fixed; inset:0; background:rgba(8,17,35,.6); z-index:150;}
#osaTourOverlay.osa-hidden{display:none;}
.osa-tour-spot{position:relative !important; z-index:152; pointer-events:none;
  box-shadow:0 0 0 4px var(--panel), 0 0 0 8px rgba(255,229,0,.6), 0 14px 34px rgba(0,0,0,.4);
  border-radius:var(--radius); transition:box-shadow .15s;}
#osaTourCard{position:fixed; z-index:153; width:300px; max-width:calc(100vw - 32px);
  background:var(--panel); color:var(--ink); border-radius:var(--radius); padding:18px 20px;
  box-shadow:0 20px 50px rgba(0,0,0,.4); transition:opacity .15s ease; opacity:0;}
#osaTourCard.ready{opacity:1;}
#osaTourCard.centered{width:340px; text-align:center; padding:26px 24px 22px;}
#osaTourCard .osa-tour-diamond{display:none; width:16px; height:16px; background:var(--yellow); transform:rotate(45deg); margin:0 auto 14px;}
#osaTourCard.centered .osa-tour-diamond{display:block;}
#osaTourCard .osa-tour-dots{display:flex; gap:5px; margin-bottom:12px; justify-content:flex-start;}
#osaTourCard.centered .osa-tour-dots{justify-content:center;}
#osaTourCard .osa-tour-dots span{width:6px; height:6px; border-radius:50%; background:var(--line-soft);}
#osaTourCard .osa-tour-dots span.on{background:var(--yellow);}
#osaTourCard h4{font-size:15px; font-weight:650; color:var(--ink); margin-bottom:6px;}
#osaTourCard.centered h4{font-size:18px;}
#osaTourCard p{font-size:13px; color:var(--muted); line-height:1.55;}
#osaTourCard .osa-tour-nav{display:flex; align-items:center; gap:10px; margin-top:16px;}
#osaTourCard.centered .osa-tour-nav{justify-content:center;}
#osaTourCard .osa-tour-skip{font-size:12.5px; color:var(--muted); background:none; border:none; text-decoration:underline; cursor:pointer; padding:0;}
#osaTourCard .osa-tour-back{font-size:12.5px; color:var(--muted); background:none; border:none; cursor:pointer; padding:0; margin-right:auto;}
#osaTourCard.centered .osa-tour-back{margin-right:0;}
#osaTourCard .osa-tour-back.osa-hidden,#osaTourCard .osa-tour-skip.osa-hidden{visibility:hidden; display:block !important;}
#osaTourCard .osa-tour-next{margin-left:auto; padding:9px 18px; border-radius:8px; border:none; background:var(--navy); color:#fff; font-weight:650; font-size:13px;}
#osaTourCard.centered .osa-tour-next{margin-left:0;}
#osaTourCard .osa-tour-next:hover{background:var(--navy-2);}
.osa-tour-btn{width:30px; height:30px; padding:0; border-radius:50%; font-weight:650; display:flex; align-items:center; justify-content:center;}

.btn:disabled{opacity:.45; cursor:not-allowed;}
.btn.green{background:var(--green);}
/* Org chart tree (People > Yokogawa T&M Organization) */
.org-tree{list-style:none; margin:0; padding:0;}
.org-tree .org-tree{margin-left:22px; padding-left:18px; border-left:2px solid var(--line); margin-top:2px;}
.org-node{padding:8px 0;}
.org-person{display:flex; align-items:center; gap:9px; flex-wrap:wrap; border-radius:8px; padding:2.5px 7px; margin:-2px -6px; transition:background .5s ease;}
.org-avatar{width:40px; height:40px; border-radius:50%; background:var(--blue-soft); color:var(--blue); display:flex; align-items:center; justify-content:center; font-weight:750; font-size:15px; flex:none; overflow:hidden;}
.org-person.flash{background:var(--blue-soft);}
.org-person .name{font-weight:700; font-size:14.5px;}
.org-person .name a{color:inherit; text-decoration:none;}
.org-person .name a:hover{text-decoration:underline;}
.org-person .otitle{color:var(--muted); font-size:13.5px;}
.org-person .odept{font-size:10.5px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--muted); background:var(--paper,var(--line)); border:1px solid var(--line); border-radius:4px; padding:1px 8px;}
.org-person .odotted{font-size:12.5px; color:var(--muted); font-style:italic;}
.org-root-label{font-size:12px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); margin:22px 0 6px;}
.org-root-label:first-child{margin-top:0;}
/* Phones: 40px of indent per level plus a wrapping flex row put each
   avatar on its own line above the name, leaving deep branches a ~150px
   column. Tighter indent; avatar beside a name/title stack. */
@media (max-width:560px){
  .org-tree .org-tree{margin-left:14px; padding-left:10px;}
  .org-person{display:grid; grid-template-columns:32px minmax(0,1fr); column-gap:10px; row-gap:2px; align-items:center;}
  .org-person .org-avatar{width:32px; height:32px; font-size:12.5px; grid-row:1 / span 4; align-self:start;}
  .org-person > :not(.org-avatar){grid-column:2; justify-self:start;}
  .org-person .otitle{font-size:13px; line-height:1.35;}
}
/* Bar chart (order trends) */
.bar-chart-wrap{position:relative;}
.bc-bar{transition:opacity .1s ease;}
.bc-bar:hover{opacity:0.75;}
.bar-tooltip{position:absolute; pointer-events:none; background:var(--ink,#1a2732); color:#fff; font-size:13px; line-height:1.4;
  padding:7px 11.5px; border-radius:7px; box-shadow:0 4px 14px rgba(0,0,0,.22); white-space:nowrap; transform:translateY(-100%); z-index:5;}
.bar-tooltip b{display:block; font-size:12px; font-weight:600; opacity:.75; margin-bottom:1px;}
/* Lead Times row click -> Special News detail modal (Joseph 2026-08-07,
   replaced an earlier hover-tooltip attempt). One card per affected member. */
.lt-dm-intro{margin:0 0 12px; font-size:13px; color:var(--muted);}
.lt-dm-tablewrap{max-height:60vh; overflow:auto; border:1px solid var(--line); border-radius:10px;}
.lt-dm-table{width:100%; min-width:640px; table-layout:fixed; border-collapse:collapse; font-size:12.5px;}
.lt-dm-table th{position:sticky; top:0; background:var(--panel); text-align:left; font-size:11px; text-transform:uppercase; letter-spacing:.03em; color:var(--muted); padding:8px 11px; border-bottom:1px solid var(--line);}
.lt-dm-table td{padding:8px 11px; border-bottom:1px solid var(--line-soft); vertical-align:top; overflow-wrap:break-word;}
.lt-dm-table th:nth-child(1),.lt-dm-table td:nth-child(1){width:26%;}
.lt-dm-table th:nth-child(2),.lt-dm-table td:nth-child(2){width:16%;}
.lt-dm-table th:nth-child(3),.lt-dm-table td:nth-child(3){width:38%;}
.lt-dm-table th:nth-child(4),.lt-dm-table td:nth-child(4){width:20%;}
.lt-dm-table tr:last-child td{border-bottom:none;}
.lt-dm-table .lt-dm-model{font-weight:650;}
.lt-dm-table .lt-dm-reason,.lt-dm-table .lt-dm-restore{color:var(--muted);}
.lt-dm-table tr.lt-dm-rev .lt-dm-lt{color:var(--orange); font-weight:650;}
.lt-dm-table tr.lt-dm-sus .lt-dm-lt,.lt-dm-table tr.lt-dm-oc .lt-dm-lt{color:var(--coral); font-weight:650;}
/* Per-model Special News history, click-through into a summary row (Joseph
   2026-08-20: "detailed lead time info from all special news... related
   details without simplifying") — collapsed <details> like .osa-help above,
   nested inside a colspan row under its model's current-status row. */
.lt-dm-histrow td{padding:0 0 10px; border-bottom:1px solid var(--line-soft);}
tr.lt-dm-histrow:last-child td{border-bottom:none;}
.lt-dm-hist{margin:0 0 6px 11px; font-size:12px;}
.lt-dm-hist:last-child{margin-bottom:0;}
.lt-dm-hist summary{cursor:pointer; font-weight:500; color:var(--muted); list-style:none; display:flex; align-items:center; gap:5px; user-select:none;}
.lt-dm-hist summary::-webkit-details-marker{display:none;}
.lt-dm-hist summary::before{content:"›"; display:inline-block; font-size:15px; line-height:1; transition:transform .15s ease; transform:rotate(0deg);}
.lt-dm-hist[open] summary::before{transform:rotate(90deg);}
.lt-dm-histwrap{max-height:280px; margin-top:8px; margin-right:11px;}
.lt-dm-histtable{min-width:0; font-size:11.5px;}
.lt-dm-histtable th:nth-child(n),.lt-dm-histtable td:nth-child(n){width:auto;}
.lt-dm-histtable th:nth-child(1),.lt-dm-histtable td:nth-child(1){width:13%;}
.lt-dm-histtable th:nth-child(2),.lt-dm-histtable td:nth-child(2){width:13%;}
.lt-dm-histtable th:nth-child(3),.lt-dm-histtable td:nth-child(3){width:13%;}
.lt-dm-histtable th:nth-child(4),.lt-dm-histtable td:nth-child(4){width:12%;}
.lt-dm-histtable th:nth-child(5),.lt-dm-histtable td:nth-child(5){width:34%;}
.lt-dm-histtable th:nth-child(6),.lt-dm-histtable td:nth-child(6){width:15%;}
.lt-dm-histtable td{padding:6px 9px;}
.lt-dm-hist-news{font-weight:600; white-space:nowrap;}
.lt-dm-hist-status{text-transform:capitalize;}
/* WIP treatment: parts of the alpha not developed yet — grayed but clickable */
.wip{opacity:.42; filter:grayscale(.85); transition:opacity .15s ease, filter .15s ease;}
.wip:hover{opacity:.68; filter:grayscale(.4);}
/* Quota & achievement cards (My Orders) */
.quota-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:16px;}
.quota-card .qc-head{display:flex; align-items:baseline; justify-content:space-between; margin-bottom:8px;}
.quota-card .qc-code{font-size:15px; font-weight:750;}
.quota-card .qc-region{font-size:12px; color:var(--muted);}
.quota-card .qc-nums{display:flex; gap:18px; margin-bottom:8px;}
.quota-card .qc-nums .lbl{font-size:11px; color:var(--muted); font-weight:700; letter-spacing:.05em; text-transform:uppercase;}
.quota-card .qc-nums .num{font-size:16.5px; font-weight:750; font-variant-numeric:tabular-nums;}
.quota-card .qc-bar{height:7px; border-radius:99px; background:var(--line); overflow:hidden; margin-bottom:4px;}
.quota-card .qc-bar i{display:block; height:100%; border-radius:99px; background:var(--green);}
.quota-card .qc-bar i.under{background:var(--orange, #d97706);}
.quota-card .qc-pct{font-size:13px; font-weight:750; margin-bottom:6px;}
.quota-card svg.spark{width:100%; height:30px; display:block;}
/* Home page quota card (2026-08-05 viz options B+A): refined meter with an
   explicit quota tick, plus the cumulative-vs-pace line beneath it. */
.meter-head{display:flex; align-items:baseline; gap:10px; margin-bottom:2px; flex-wrap:wrap;}
.meter-pct{font-size:21.5px; font-weight:750; font-variant-numeric:tabular-nums;}
/* Bigger YTD $ figure (2026-08-07: "I do like to show a bigger total YTD
   order intake") — sits between the % badge and the "of $quota" sub-line,
   its own line so it reads clearly at a glance. */
.meter-ytd{font-size:18px; font-weight:750; font-variant-numeric:tabular-nums; margin-bottom:2px;}
.meter-sub{font-size:12.5px; color:var(--muted); margin-bottom:8px;}
/* Home Orders card's three FY quota-cards (2026-08-07: "level with each
   other") — FY26's longer prorated-quota sub text can wrap to a second line
   while FY25/FY24's shorter text doesn't; reserve 2 lines' worth of height
   unconditionally so all three combo charts still start at the same y
   position regardless of which meters wrap this session. */
.home-orders-grid .meter-sub{min-height:2.6em;}
.meter-track{position:relative; height:12px; border-radius:6px; background:var(--line-soft); margin:0 0 22px;}
.meter-fill{height:100%; border-radius:6px; transition:width .2s ease;}
.meter-target{position:absolute; top:-4px; bottom:-4px; width:2px; background:var(--ink); opacity:.4;}
.meter-target::after{content:'Quota'; position:absolute; top:16px; left:50%; transform:translateX(-50%); font-size:10px; color:var(--muted); white-space:nowrap;}
.quota-pace-wrap{position:relative; margin-top:4px;}
.pace-svg{width:100%; height:auto; display:block;}
.qp-dot{cursor:pointer;}
.pace-legend{display:flex; gap:16px; font-size:11px; color:var(--muted); margin-top:6px;}
.pace-legend span{display:inline-flex; align-items:center; gap:5px;}
.pace-dot{width:8px; height:8px; border-radius:2px; display:inline-block;}
.kpi-strip{display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-bottom:16px;}
.kpi-strip .k{background:var(--panel); border:1px solid var(--line); border-radius:14px; box-shadow:var(--shadow); padding:18px 20.5px 16px;}
.kpi-strip .k .kt{display:flex; align-items:center; gap:10px; margin-bottom:10px;}
.kpi-strip .lbl{font-size:12px; color:var(--muted); font-weight:700; letter-spacing:.05em; text-transform:uppercase;}
.kpi-strip .num{font-size:25.5px; font-weight:750; font-variant-numeric:tabular-nums; letter-spacing:-.01em;}
.kpi-strip .sc{font-size:12px; color:var(--muted); margin-top:1px;}
.kpi-strip .spark-wrap{margin:10px 0 8px; border-radius:8px; overflow:hidden;}
.kpi-strip .trend{font-size:12.5px; font-weight:700; display:flex; align-items:center; gap:4px;}
.kpi-strip .trend.up{color:var(--green);} .kpi-strip .trend.down{color:#c0392b;}
.lp-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:14px; margin-bottom:16px; align-items:start;}
.lp-card{background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); overflow:hidden;}
.lp-head{display:flex; align-items:center; gap:9px; padding:12.5px 16px 10.5px;}
.lp-head .ic{width:30px; height:30px; border-radius:8px; display:flex; align-items:center; justify-content:center; flex:none;}
.lp-head .ic .icon{width:16px; height:16px;}
.lp-head b{font-size:14.5px;}
.lp-tiles{display:grid; grid-template-columns:repeat(auto-fill,minmax(92px,1fr)); gap:8px; padding:4.5px 13.5px 16px;}
.lp-tile{position:relative; display:flex; flex-direction:column; align-items:center; gap:6px; background:none; border:1px solid var(--line);
  border-radius:10px; padding:13.5px 7px 10.5px; font:inherit; font-size:12.5px; font-weight:650; color:var(--ink); cursor:pointer; text-align:center; line-height:1.2;}
.lp-tile:hover{border-color:var(--blue); background:var(--bg);}
.lp-tile .li-ic{position:relative; overflow:hidden; width:34px; height:34px; border-radius:9px; display:flex; align-items:center; justify-content:center;}
.lp-tile .li-ic .icon{width:17px; height:17px;}
.lp-tile.ghost{border-style:dashed; opacity:.72;}
.lp-tile.ghost .li-ic{background:none !important; border:1.5px dashed var(--line); color:var(--muted) !important;}
.lp-tile .st{position:absolute; top:6px; right:7px; font-size:9px; font-weight:800; letter-spacing:.04em; color:var(--muted);}
.lp-tile .st.tbc{color:var(--orange);}
.lp-tile .st.ext{color:var(--blue); font-size:12px; top:4px;}
.lp-tile .st.doc{color:var(--blue); top:7px; display:inline-flex;}
@media (max-width: 900px){ .lp-grid{grid-template-columns:1fr;} .kpi-strip{grid-template-columns:repeat(2,1fr);} }
.area-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-bottom:18px;}
.area-card{position:relative; display:flex; flex-direction:column; align-items:flex-start; gap:5px; text-align:left; font:inherit; cursor:pointer;
  background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); padding:20.5px 20.5px 18px;}
.area-card:hover{border-color:var(--blue);}
.area-card .ic{width:42px; height:42px; border-radius:11px; display:flex; align-items:center; justify-content:center; margin-bottom:7px;}
.area-card b{font-size:16px; color:var(--ink);}
.area-card small{font-size:13.5px; color:var(--muted);}
.area-card .go{position:absolute; top:18px; right:16px; color:var(--muted);}
.area-card .desc{margin:3px 0 9px; font-size:13.5px; color:var(--muted); font-weight:500; line-height:1.4;}
.lower-grid{display:grid; grid-template-columns:1.3fr 1fr; gap:18px; align-items:start;}
.qlinks-row{display:flex; flex-wrap:wrap; gap:6px;}
.qlink{display:flex; flex:1 1 0; min-width:150px; align-items:center; gap:11px; background:none; border:none; border-radius:8px;
  padding:12px 14px; font:inherit; font-size:13.5px; font-weight:650; color:var(--ink); cursor:pointer; text-align:left;
  transition:background .12s ease;}
.qlink:hover{background:var(--bg);}
.qlink .qic{width:22px; height:22px; color:var(--muted); display:flex; align-items:center; justify-content:center; flex:none;}
.qlink:hover .qic{color:var(--blue);}
.insights-card .card-head a{font-size:13px; font-weight:650; display:flex; align-items:center; gap:4px;}
.insights-row{display:flex; flex-direction:column; gap:12px;}
.insight{display:flex; align-items:center; gap:11px;}
.insight .iic{width:32px; height:32px; border-radius:9px; display:flex; align-items:center; justify-content:center; flex:none;}
.insight b{display:block; font-size:13.5px;}
.insight small{display:block; color:var(--muted); font-size:12.5px; margin-top:1px;}
.sample-tag{margin-top:12px; padding-top:11.5px; border-top:1px solid var(--line); font-size:10.5px; font-weight:700; letter-spacing:.04em; color:var(--muted); text-transform:uppercase;}
@media (max-width:1000px){ .lower-grid{grid-template-columns:1fr;} .qlink{flex:1 1 45%;} }
.sec-ic{width:42px; height:42px; border-radius:11px; display:flex; align-items:center; justify-content:center;}
.sec-tiles{display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:12px;}
.sec-group-label{grid-column:1/-1; font-size:12.5px; font-weight:700; letter-spacing:.03em; text-transform:uppercase; color:var(--muted); margin:6px 0 -2px; padding-top:9px; border-top:1px solid var(--line);}
.sec-group-label:first-child{border-top:none; padding-top:0; margin-top:0;}
.sec-tile{position:relative; align-items:flex-start; text-align:left; padding:16px; gap:8px;}
.sec-tile .tl{display:flex; align-items:center; gap:7px; font-size:14px;}
.sec-tile .tl .st{position:static;}
.sec-tile small{font-size:12px; color:var(--muted); font-weight:500; line-height:1.35; text-align:left;
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3; overflow:hidden;}
.sec-fresh{font-size:11px; font-weight:650; color:var(--muted); margin-top:1px;}

/* Content vs tool tile split (2026-08-21 section-tile pass, "Option 2" of
   the design exploration) — see sectionTileHtml()'s comment for the "why".
   Tool tiles get one consistent, bigger icon badge (up from the old base
   34px); content tiles drop .li-ic entirely for a full-bleed .sec-cover. */
.sec-tile-tool .li-ic{width:48px; height:48px; border-radius:11px;}
.sec-tile-tool .li-ic .icon{width:21px; height:21px;}
.sec-tile-content{padding:0; overflow:hidden;}
.sec-cover{position:relative; overflow:hidden; width:100%; height:100px; flex:none;
  background:linear-gradient(135deg, var(--tc-soft), color-mix(in srgb, var(--tc) 20%, var(--tc-soft)));}
.sec-cover img{width:100%; height:100%; object-fit:cover; display:block; transition:transform .2s ease;}
/* Price book covers: crop to the "PRICE BOOK" + book-name band (scripts/build-pricebook-covers.mjs). */
.sec-tile[data-target="price-books"] .sec-cover img{object-position:50% 20%;}
.sec-cover-ic{position:absolute; inset:0; display:flex; align-items:center; justify-content:center;}
.sec-tile-body{padding:12px 16px 14px; display:flex; flex-direction:column; gap:6px; width:100%;}
.sec-tiles-compact .sec-tile-content{padding:0;}
/* Card-deck fan (2026-08-21) — up to 3 real images (sectionTileCover())
   stacked with the most recent one on top, so a tile reads as "a preview of
   what's inside" rather than one arbitrary item standing in for everything
   behind it. A single image (or the family-icon fallback) just renders as
   sec-deck-0 alone with no siblings to fan — degrades cleanly, not a
   special case. Centered via transform:translate(-50%,-50%), NOT a
   percentage margin — percentage margin-top/bottom resolve against the
   CONTAINING BLOCK'S WIDTH (a real CSS spec quirk, not a typo), so a
   margin-based centering trick that looks right on a roughly-square box
   silently breaks on .sec-cover's actual shape (100px tall, 2-300+px
   wide): the card rendered ~90px above the visible area, fully invisible,
   on every wide/short tile — caught live via getBoundingClientRect(), not
   visually (the pane doesn't composite reliably during this kind of check).
   transform percentages resolve against the element's OWN box on both
   axes, so this is correct regardless of the parent's aspect ratio. */
.sec-deck-card{position:absolute; top:50%; left:50%; width:78%; height:78%; transform:translate(-50%,-50%);
  border-radius:7px; overflow:hidden; box-shadow:0 3px 10px rgba(10,20,40,.22); background:var(--panel);}
.sec-deck-0{width:86%; height:86%; z-index:3; box-shadow:0 6px 18px rgba(10,20,40,.3); transform:translate(-50%,-50%);}
.sec-deck-1{z-index:2; transform:translate(-50%,-50%) rotate(7deg) translate(9%, -6%);}
.sec-deck-2{z-index:1; transform:translate(-50%,-50%) rotate(-8deg) translate(-9%, 7%);}
.lp-tile:hover .sec-deck-0{transform:translate(-50%,-50%) translateY(-2px);}

/* Type-aware corner cues (2026-08-05) — external tools read differently
   from an in-portal document at a glance, instead of every tile looking
   the same regardless of what clicking it actually does. */
.sec-tile[data-status="ext"]{border-top:2px solid color-mix(in srgb, var(--tc) 45%, var(--line));}
.sec-tile[data-status="doc"]{background-image:linear-gradient(135deg, transparent calc(100% - 14px), color-mix(in srgb, var(--tc) 16%, transparent) calc(100% - 14px));}

/* Compact grid for small sections (e.g. Service & Support: 3 items, no
   ghosts) — the default auto-fill,minmax(190px,1fr) grid looks squeezed
   with so few tiles; wider cards read better. Threshold is item-count
   driven (pageSection), not a hardcoded section name. */
.sec-tiles-compact{grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:16px;}
.sec-tiles-compact .sec-tile{padding:23px;}

/* Editor-pinned "featured" spotlight row (2026-08-05) — 1-2 larger cards
   above the regular grid; absent entirely (no empty box) when nothing's
   pinned, since pageSection only emits the wrapper when featured.length. */
.sec-spotlight{display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:14px; margin-bottom:14px;}
.sec-spotlight-tile{padding:23px;}
.sec-spotlight-tile .li-ic{width:60px; height:60px; border-radius:13px;}
.sec-spotlight-tile .li-ic .icon{width:26px; height:26px;}
.sec-spotlight-tile .sec-cover{height:150px;}
.sec-spotlight-tile .tl{font-size:15.5px; font-weight:700;}
.sec-spotlight-tile small{font-size:13px;}

/* Pin/feature toggle, editor edit-mode only — mirrors the existing
   announcement .nw-pin/.nw-pin-active pattern (News page). */
.sec-pin{position:absolute; top:8px; right:8px; width:22px; height:22px; border-radius:7px; display:flex; align-items:center; justify-content:center;
  background:var(--panel); border:1px solid var(--line); color:var(--muted); cursor:pointer; transition:border-color .15s ease, color .15s ease, background .15s ease;}
.sec-pin:hover{border-color:var(--blue); color:var(--blue);}
.sec-pin-active{background:var(--blue-soft); border-color:var(--blue); color:var(--blue);}
@media (max-width: 900px){ .area-grid{grid-template-columns:repeat(2,1fr);} }

/* ---- visual polish pass ---- */
.page-head h1{font-size:30px; letter-spacing:-.015em;}
.ann-line{background:linear-gradient(95deg, var(--blue-soft), var(--panel) 55%); border-color:color-mix(in srgb, var(--blue) 18%, var(--line)); transition:box-shadow .15s ease, transform .15s ease;}
.ann-line:hover{transform:translateY(-1px); box-shadow:0 4px 14px rgba(16,24,40,.10);}
.ann-line .pulse{width:8px; height:8px; border-radius:50%; background:var(--blue); flex:none; box-shadow:0 0 0 0 color-mix(in srgb, var(--blue) 45%, transparent); animation:annpulse 2s 3;}
@keyframes annpulse{0%{box-shadow:0 0 0 0 color-mix(in srgb, var(--blue) 40%, transparent);}70%{box-shadow:0 0 0 7px transparent;}100%{box-shadow:0 0 0 0 transparent;}}
.kpi-strip .k{transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease;}
.kpi-strip .k:hover{transform:translateY(-2px); box-shadow:var(--shadow-hover); border-color:var(--border-strong, var(--line));}
.kpi-strip .k .kic{width:34px; height:34px; border-radius:9px; display:flex; align-items:center; justify-content:center; flex:none;}
.kpi-strip .k .kic .icon{width:16px; height:16px;}
.area-card{border-radius:16px; overflow:hidden; transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease;}
.area-card:hover{transform:translateY(-3px); box-shadow:0 10px 26px rgba(16,24,40,.13); border-color:var(--ac, var(--blue));}
.area-card .ic{width:44px; height:44px; border-radius:13px; background:linear-gradient(135deg, var(--ac-soft), color-mix(in srgb, var(--ac) 22%, var(--ac-soft))) !important; transition:transform .16s ease;}
.area-card:hover .ic{transform:scale(1.07);}
.area-card .go{transition:transform .16s ease, color .16s ease;}
.area-card:hover .go{transform:translateX(3px); color:var(--ac, var(--blue));}
.area-card::after{content:''; position:absolute; left:0; right:0; bottom:0; height:3px; background:var(--ac);}
.lp-tile, .sec-tile{transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease; border-radius:13px;}
.lp-tile:hover{transform:translateY(-2px); box-shadow:0 8px 20px rgba(16,24,40,.10); border-color:var(--tc, var(--blue)); background:var(--panel);}
.lp-tile .li-ic{background:linear-gradient(135deg, var(--tc-soft), color-mix(in srgb, var(--tc) 20%, var(--tc-soft))) !important; transition:transform .15s ease;}
.lp-tile:hover .li-ic{transform:scale(1.08);}
.lp-tile.ghost:hover{box-shadow:0 5px 14px rgba(16,24,40,.07);}
.lp-tile.ghost .li-ic{background:none !important;}
.sec-hero{display:flex; align-items:center; gap:14px; border-radius:16px; padding:23px 25px; margin-bottom:18px;
  background:linear-gradient(100deg, var(--sc-soft), color-mix(in srgb, var(--sc-soft) 30%, var(--panel)) 70%, var(--panel));
  border:1px solid color-mix(in srgb, var(--sc) 18%, var(--line));}
.sec-hero .sec-ic{width:52px; height:52px; border-radius:14px; background:linear-gradient(135deg, color-mix(in srgb, var(--sc) 28%, var(--sc-soft)), var(--sc-soft)) !important; box-shadow:0 4px 12px color-mix(in srgb, var(--sc) 22%, transparent);}
.sec-hero .sec-ic .icon{width:24px; height:24px;}
.sec-hero h1{margin:0; font-size:25.5px; letter-spacing:-.015em;}
.sec-hero .crumb{font-size:12.5px; color:var(--muted); font-weight:650; letter-spacing:.05em; text-transform:uppercase; cursor:pointer;}
.sec-hero .crumb:hover{color:var(--sc);}
.page-head .crumb{font-size:13px; color:var(--muted); font-weight:650; cursor:pointer; margin-bottom:6px;}
.page-head .crumb:hover{color:var(--purple);}
nav.sidebar .nav-item.active{background:var(--sidebar-active);}

table{width:100%; border-collapse:collapse; font-size:14.5px;}
th{text-align:left; font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); font-weight:700; padding:10.5px 13.5px; border-bottom:1px solid var(--line); white-space:nowrap;}
td{padding:12.5px 13.5px; border-bottom:1px solid var(--line); vertical-align:middle;}
tr:last-child td{border-bottom:none;}
td.num, th.num{text-align:right; font-variant-numeric:tabular-nums;}
.pill{font-size:12px; font-weight:650; padding:3.5px 10.5px; border-radius:999px; background:var(--line); color:var(--muted);}
.pill-disc{background:var(--coral-soft); color:var(--coral);}
.pill-disc-soon{background:var(--orange-soft); color:var(--orange);}
.pdf-head .pill-disc, .pdf-head .pill-disc-soon{margin-left:6px;}
.pill-new{background:var(--green-soft); color:var(--green);}
.pill-pinned{background:var(--blue-soft); color:var(--blue);}
.nw-pin-active{background:var(--blue-soft); border-color:var(--blue) !important; color:var(--blue) !important;}
/* lead-times consolidated table */
.lt-wrap{overflow-x:auto;}
.lt-table th{position:sticky; top:0; background:var(--panel); text-align:left; font-size:12.5px; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); padding:12.5px 16px; border-bottom:1px solid var(--line); cursor:pointer; user-select:none;}
.lt-table th:hover{color:var(--ink);}
.lt-table td{padding:10.5px 16px; border-bottom:1px solid var(--line-soft); white-space:nowrap;}
.lt-table td.lt-prod{white-space:normal; min-width:220px; font-weight:600;}
.lt-row{cursor:pointer;}
.lt-row:hover td{background:var(--blue-soft);}
.lt-cell-std{color:var(--muted);}
/* Phones: the 6-column table pushed every lead-time figure off-screen
   behind an unmarked sideways scroll, leaving only product names visible.
   Each row becomes a compact card instead — product, then book · current
   lead time · standard · improvement date · updated on one wrapping line. */
@media (max-width:640px){
  .lt-wrap{overflow:visible;}
  .lt-table, .lt-table tbody{display:block;}
  .lt-table thead{display:none;}
  .lt-table tr.lt-row{display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 12px; padding:13px 15px; border-bottom:1px solid var(--line-soft);}
  .lt-table tr.lt-row td{padding:0; border:none; white-space:normal; font-size:14px;}
  .lt-table td.lt-prod{flex:1 1 100%; min-width:0; font-size:15px;}
  .lt-table td.lt-empty{display:none;}
  .lt-table td.lt-c-std::before{content:'Std '; color:var(--muted); font-size:12.5px;}
  .lt-table td.lt-c-restore::before{content:'Improves by '; color:var(--muted); font-size:12.5px;}
  .lt-table td.lt-c-upd::before{content:'Updated '; color:var(--muted); font-size:12.5px;}
  .lt-table td.lt-c-std, .lt-table td.lt-c-upd{color:var(--muted);}
}
/* section tile drag-and-drop (editor) */
.sec-reorder .lp-tile{cursor:grab;}
.sec-reorder .lp-tile.dragging{opacity:.45; outline:2px dashed var(--blue); cursor:grabbing;}
/* Product Catalog card drag-and-drop (editor, 2026-08-05) */
.pbook-card[draggable="true"]{cursor:grab;}
.pbook-card[draggable="true"].dragging{opacity:.45; outline:2px dashed var(--blue); cursor:grabbing;}
.lt-cell-rev{color:var(--orange); font-weight:650;}
.lt-cell-sus{color:var(--coral); font-weight:650;}
/* Trend arrow next to Current lead time (Joseph 2026-08-07) — vs the
   previous bulletin: worse (up), better (down), unchanged (right/sideways). */
.lt-trend{font-size:10px; vertical-align:2px; font-weight:400;}
.lt-trend-up{color:var(--coral);}
.lt-trend-down{color:var(--green);}
.lt-trend-same{color:var(--muted);}
.tbl-wrap{overflow-x:auto;}

/* generic pages */
.toolbar{display:flex; gap:10px; align-items:center; margin-bottom:16px; flex-wrap:wrap;}
/* Segmented view toggle (Catalog | Price List, etc.) — a pill-group shape
   used inside a page toolbar rather than the header. */
.seg-toggle{display:flex; flex-wrap:wrap; row-gap:2px; background:var(--bg); border:1px solid var(--line); border-radius:9px; padding:2.5px; flex:none;}
.seg-opt{background:none; border:none; color:var(--muted); font-size:13.5px; font-weight:650; padding:8px 16px; border-radius:7px; cursor:pointer; transition:background .12s ease, color .12s ease;}
.seg-opt:hover{background:var(--panel); color:var(--ink);}
.seg-opt.active{background:var(--blue); color:#fff;}

/* Calendar's Marketing Calendar / Product Timeline switch (2026-09-23,
   Joseph: "large and obvious"). Big two-up cards, each tinted with its own
   view's accent (--tab-c/--tab-soft, set inline), so the view you're NOT on
   still reads as a destination rather than fading into the page. */
.cal-tabs{display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-bottom:22px;}
.cal-tab{display:flex; align-items:center; gap:16px; padding:18px 22px; background:var(--panel); border:2px solid var(--line); border-radius:16px; cursor:pointer; text-align:left; font:inherit; color:var(--ink); transition:transform .15s ease, border-color .15s ease, background .15s ease, box-shadow .15s ease;}
.cal-tab:hover{border-color:var(--tab-c); transform:translateY(-2px); box-shadow:0 6px 18px rgba(15,23,42,.08);}
.cal-tab:focus-visible{outline:3px solid var(--tab-c); outline-offset:2px;}
.cal-tab.active{border-color:var(--tab-c); background:var(--tab-soft); box-shadow:inset 0 -4px 0 var(--tab-c); transform:none; cursor:default;}
.cal-tab-ic{flex:none; width:52px; height:52px; border-radius:14px; display:flex; align-items:center; justify-content:center; background:var(--tab-soft); color:var(--tab-c); transition:background .15s ease, color .15s ease;}
.cal-tab-ic .icon{width:26px; height:26px;}
.cal-tab.active .cal-tab-ic{background:var(--tab-c); color:#fff;}
.cal-tab-text{display:flex; flex-direction:column; gap:3px; min-width:0;}
.cal-tab-text b{font-size:19px; font-weight:750; letter-spacing:-.01em;}
.cal-tab-text small{font-size:13.5px; color:var(--muted); font-weight:500;}
@media (max-width:640px){
  .cal-tabs{gap:10px;}
  .cal-tab{padding:12px 14px; gap:10px; border-radius:13px;}
  .cal-tab-ic{width:38px; height:38px; border-radius:11px;}
  .cal-tab-ic .icon{width:20px; height:20px;}
  .cal-tab-text b{font-size:15px;}
  .cal-tab-text small{display:none;}
}

/* Product & Application Library's By Family/Application/Industry switch —
   same "primary page-level choice deserves a bigger, higher-contrast
   control" reasoning as .cal-tab above, but shaped as icon+label+
   description cards (not pills) since each mode needs a one-line reminder
   of what it's for, not just a name (Joseph 2026-08-04: "make the filters
   bigger and more visual"). */
.lib-mode-switcher{display:flex; gap:12px; flex-wrap:wrap; margin-bottom:18px;}
.lib-mode-card{flex:1; min-width:210px; display:flex; align-items:center; gap:13px; background:var(--panel); border:1.5px solid var(--line); border-radius:14px; padding:16px 20.5px; cursor:pointer; text-align:left; transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease, background .15s ease;}
.lib-mode-card:hover{transform:translateY(-2px); box-shadow:var(--shadow); border-color:var(--blue);}
.lib-mode-card.active{border-color:var(--blue); background:var(--blue-soft);}
.lib-mode-ic{flex:none; width:42px; height:42px; border-radius:12px; display:flex; align-items:center; justify-content:center; background:var(--line-soft); color:var(--muted); transition:background .15s ease, color .15s ease;}
.lib-mode-ic .icon{width:21px; height:21px;}
.lib-mode-card.active .lib-mode-ic{background:var(--blue); color:#fff;}
.lib-mode-text{display:flex; flex-direction:column; gap:2px; min-width:0;}
.lib-mode-text b{font-size:16px; color:var(--ink);}
.lib-mode-text small{font-size:12.5px; color:var(--muted); font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.search-box{flex:1; min-width:200px; display:flex; align-items:center; gap:8px; background:var(--panel); border:1px solid var(--line); border-radius:8px; padding:9px 13.5px;}
.search-box input{border:none; outline:none; background:none; font:inherit; color:var(--ink); flex:1;}
.chip-row{display:flex; gap:8px; flex-wrap:wrap;}
.chip{font-size:13.5px; font-weight:600; padding:7px 15px; border-radius:999px; border:1px solid var(--line); background:var(--panel); color:var(--muted); cursor:pointer;}
/* Phones: wrapping chip rows stacked 3–6 lines of filters above the
   content (~500px on Product Guides). One swipeable line instead, bleeding
   to the screen edge so the cut-off last chip signals there's more. */
@media (max-width:560px){
  .chip-row{flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; -webkit-overflow-scrolling:touch;
    margin-left:-18px; margin-right:-18px; padding:2px 18px; scroll-padding-inline:18px;}
  .chip-row::-webkit-scrollbar{display:none;}
  .chip-row > *{flex:none;}
  .toolbar .chip-row{flex:1 1 100%; min-width:0;}
}
.chip.active{background:var(--blue); border-color:var(--blue); color:#fff;}

.dir-groups{display:flex; flex-direction:column; gap:20px;}
.dir-letter{font-size:13px; font-weight:750; color:var(--muted); letter-spacing:.06em; margin-bottom:8px;}
.contact-row{display:flex; align-items:center; gap:12px; padding:11.5px 4.5px; border-bottom:1px solid var(--line); border-radius:8px; transition:background .5s ease;}
.contact-row:last-child{border-bottom:none;}
.contact-row-me{background:var(--blue-soft);}
.contact-row.flash{background:var(--blue-soft);}
.you-badge{display:inline-block; margin-left:7px; font-size:10.5px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--blue); background:#fff; border:1px solid var(--blue); border-radius:99px; padding:1px 9px; vertical-align:middle;}
.org-row{cursor:pointer; transition:background .12s ease;}
.org-row:hover{background:var(--blue-soft);}
.org-row-active{background:var(--blue-soft); font-weight:650;}
/* Two-tier All Reps table (2026-08-17): parent company header rows are
   derived aggregates — informational, not clickable (no leaf quota page). */
.org-parent-row{background:var(--bg); cursor:default;}
.org-parent-row td{border-top:2px solid var(--line);}
.avatar-sm{width:34px; height:34px; border-radius:50%; background:var(--purple-soft); color:var(--purple); display:flex; align-items:center; justify-content:center; font-weight:700; font-size:12.5px; flex:none;}
.contact-main{flex:1; min-width:0;}
.contact-main b{font-size:15px;}
.contact-main .sub{font-size:13px; color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.contact-side{font-size:13px; color:var(--muted); text-align:right; flex:none;}

.org-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:14px;}
.geo-map-wrap{background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); padding:9px; overflow:hidden;}
.geo-map{width:100%; height:auto; display:block;}
.geo-region{fill:var(--bg); stroke:var(--line); stroke-width:1; stroke-linejoin:round; cursor:pointer; transition:fill .12s ease;}
.geo-region:hover{fill:var(--blue-soft);}
.geo-region-active{fill:var(--blue-soft); stroke:var(--blue); stroke-width:1.5;}
.geo-dot{fill:var(--blue); fill-opacity:.32; stroke:var(--blue); stroke-width:1.5; cursor:pointer; transition:fill-opacity .12s ease; pointer-events:none;}
.geo-dot-active{fill-opacity:.6; stroke-width:2.5;}
.geo-label{font-size:9.5px; font-weight:700; fill:var(--ink); text-anchor:middle; pointer-events:none; letter-spacing:.02em;}
.org-card{background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); padding:18px; cursor:pointer;}
.org-card:hover{border-color:var(--blue);}
.org-card.locked{opacity:.55; cursor:not-allowed;}
.org-card.locked:hover{border-color:var(--line);}
.org-card .top{display:flex; align-items:center; gap:10px; margin-bottom:8px;}
.org-swatch{width:34px; height:34px; border-radius:9px; flex:none;}
.org-card b{font-size:14.5px;}
.org-card .meta{font-size:13px; color:var(--muted);}

.pb-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:14px;}
.pb-card{background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); overflow:hidden; cursor:pointer;}
.pb-card .img{height:120px; background:var(--bg); display:flex; align-items:center; justify-content:center;}
.pb-card .img img{max-width:88%; max-height:88%; object-fit:contain;}
.pb-card .info{padding:12.5px 15px;}
.pb-card .model{font-size:13px; color:var(--muted); font-weight:650;}
.pb-card .name{font-size:14.5px; font-weight:650; margin:2px 0 6px; line-height:1.3;}
.pb-card .price{font-size:14.5px; font-weight:700; color:var(--blue);}

.cal-toolbar{display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; margin-bottom:14px;}
.cal-nav{display:flex; align-items:center; gap:8px;}
.cal-nav .btn.ghost{padding:7px 11.5px;}
.cal-cat-chip{font-size:12.5px; font-weight:650; padding:5.5px 12.5px; border-radius:20px; border:1px solid var(--line); background:var(--panel); color:var(--muted); cursor:pointer; opacity:.55; transition:opacity .12s;}
.cal-cat-chip.active{opacity:1; border-color:var(--cc); background:var(--cc-soft); color:var(--cc);}

/* Continuous-scroll Marketing Calendar (Joseph 2026-08-07: "more of a
   continuous scroll rather than clicking next and previous month") —
   initCalScroll() owns #cal-scroll, stacking month blocks (grid on desktop,
   agenda list on phone) and growing the loaded range on scroll instead of
   paging through one month at a time. Each month's header is sticky within
   this one scrolling box, so it reads like a single long timeline with
   labeled sections rather than a stack of separate cards. */
/* Fixed height (was calc(100vh - 268px) filling the viewport, back when this
   was the sole content on an active "Marketing Calendar" tab) — 2026-08-24,
   now that it's the second of two stacked sections, a full-viewport-height
   box would make the page absurdly tall; a fixed height keeps its own
   internal scroll (unchanged infinite-scroll logic below) while the page
   itself scrolls a reasonable amount to reveal it under Product Timeline. */
.cal-scroll-card{padding:0; overflow:hidden; display:flex; flex-direction:column; height:600px; min-height:560px;}
.cal-scroll-card-agenda{height:auto; min-height:0; overflow:visible;}
.cal-dow-row{display:grid; grid-template-columns:repeat(7,1fr); border-bottom:1px solid var(--line); flex:none;}
.cal-dow-row div{padding:11.5px 7px; font-size:13px; font-weight:700; color:var(--muted); text-align:center; text-transform:uppercase; letter-spacing:.03em;}
.cal-scroll{flex:1; overflow-y:auto; position:relative; scroll-behavior:smooth;}
.cal-scroll-card-agenda .cal-scroll{overflow-y:visible; height:auto;}
.cal-scroll-sentinel{height:1px;}
/* Left-aligned, quiet, full-width strip (Joseph 2026-08-07 — picked from
   five mocked options) — small caps, muted color, no fill, so it reads as
   a section label rather than a button, and never overlaps a day cell. */
.cal-month-header{position:sticky; top:0; z-index:2; background:var(--panel); padding:7px 12px; font-size:11.5px; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:.05em; border-bottom:1px solid var(--line);}
.cal-week{display:grid; grid-template-columns:repeat(7,1fr); column-gap:2px; row-gap:3px; border-bottom:1px solid var(--line); padding-bottom:4.5px;}
.cal-daynum{padding:7px 9px 0; font-size:14px; color:var(--ink); display:flex; justify-content:flex-end;}
.cal-daynum.out{color:var(--muted); opacity:.45;}
.cal-daynum.addable{cursor:pointer; border-radius:6px;}
.cal-daynum.addable:hover{background:var(--blue-soft);}
.cal-daynum.today span{display:inline-flex; align-items:center; justify-content:center; width:24px; height:24px; border-radius:50%; background:var(--blue); color:#fff; font-weight:700;}
.cal-bar{margin:0 3px; padding:3.5px 9px; border:none; border-radius:5px; font-size:12.5px; font-weight:600; text-align:left; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; cursor:pointer; align-self:stretch;}
.cal-bar:hover{filter:brightness(0.95);}
.cal-bar.holiday{font-weight:650; opacity:.9;}
@media (max-width:700px){ .cal-dow-row div{font-size:10px;} .cal-bar{font-size:9.5px;} }

/* Phone-width Marketing Calendar — sticky month header + agenda list
   grouped by day, no event bars, stacked continuously the same way as the
   desktop grid; see isNarrowViewport(). */
.cal-agenda-month{padding-bottom:6px;}
.cal-agenda-empty{margin:0 0 14px;}
.cal-agenda-group{margin:0 0 14px; padding:0 2px;}
.cal-agenda-date{font-size:12px; font-weight:800; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); padding:0 2px 8px;}
.cal-agenda-row{display:flex; align-items:center; gap:11px; width:100%; background:var(--panel); border:1px solid var(--line); border-radius:10px; padding:11px 12px; text-align:left; cursor:pointer; color:inherit; font:inherit; margin-bottom:7px;}
.cal-agenda-row:active{background:var(--bg);}
.cal-agenda-row.holiday{border-style:dashed;}
.cal-agenda-bar{flex:none; width:4px; align-self:stretch; border-radius:3px;}
.cal-agenda-text{flex:1; min-width:0; display:flex; flex-direction:column; gap:2px;}
.cal-agenda-title{font-size:14px; font-weight:650; color:var(--ink);}
.cal-agenda-cat{font-size:12px; font-weight:650;}
.cal-agenda-row svg{flex:none; color:var(--muted);}
.cal-scroll-empty-note{margin:14px 12px;}

.doc-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:14px;}
/* By Application / By Industry (stakeholder feedback 2026-08-04, W3) */
.bytax-group{margin-bottom:26px;}
.bytax-group-title{font-size:15.5px; margin:0 0 12px; color:var(--ink); display:flex; align-items:baseline; gap:6px;}
.bytax-group-title .meta{font-weight:500;}
.doc-card{background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); padding:18px;}
.doc-card-file{cursor:pointer; transition:box-shadow .12s ease, transform .12s ease;}
.doc-card-file:hover{box-shadow:var(--shadow-hover); transform:translateY(-1px);}
.doc-card .ic{width:36px; height:36px; border-radius:9px; background:var(--blue-soft); color:var(--blue); display:flex; align-items:center; justify-content:center; margin-bottom:10px;}
/* Download-in-flight state (Joseph 2026-09-24: the rep-cobranded Short Form
   Catalog stamp can take 3-4s on a cache miss) — spins a ring over the card's
   existing icon box instead of swapping markup, so no extra DOM juggling in
   the click handler beyond toggling this class. */
.doc-card-file.is-loading{cursor:wait; pointer-events:none;}
.doc-card-file.is-loading .ic{position:relative; color:transparent;}
.doc-card-file.is-loading .ic::after{content:''; position:absolute; inset:0; margin:auto; width:16px; height:16px; border:2px solid currentColor; border-top-color:transparent; border-radius:50%; color:var(--blue); animation:dc-spin .7s linear infinite;}
@keyframes dc-spin{to{transform:rotate(360deg);}}
/* Cyber Library page-1 thumbnail (stakeholder feedback 2026-08-04, W2) — no
   src until hydrateCyberThumbnails() sets one from a batched signed URL, so
   it never shows a broken-image icon while waiting. */
.cyber-thumb{width:100%; height:92px; object-fit:cover; border-radius:9px; background:var(--bg); margin-bottom:10px; display:block;}
.doc-card b{font-size:15px; display:block; margin-bottom:4px;}
.doc-card .meta{font-size:13px; color:var(--muted);}
.doc-card.cyber-add-card{min-height:120px; padding:18px;}
/* Big-thumbnail hero cards (2026-08-21, "Option A" of the card-layout pass)
   — Cyber Library, By Application, By Industry. Cover fills the full card
   width; .cyber-thumb's own base rule above is overridden here to fill it
   instead of sitting as a small inset block. */
.doc-card-hero{padding:0; overflow:hidden;}
.doc-cover{width:100%; height:156px; position:relative; overflow:hidden; flex:none;}
.doc-cover .cyber-thumb{width:100%; height:100%; margin:0; border-radius:0;}
.doc-cover-ic{width:100%; height:100%; display:flex; align-items:center; justify-content:center;}
.doc-badge{position:absolute; top:10px; right:10px; font-size:10px; font-weight:700; letter-spacing:.02em; padding:3px 8px; border-radius:6px; background:rgba(16,33,61,.72); color:#fff;}
.doc-badge-disc{background:var(--coral);}
.doc-cover-hover{position:absolute; inset:0; background:rgba(11,31,61,0); display:flex; align-items:center; justify-content:center; opacity:0; transition:opacity .15s ease; color:#fff; font-size:13px; font-weight:650;}
.doc-cover-hover span{display:flex; align-items:center; gap:5px;}
.doc-card-hero:hover .doc-cover-hover{opacity:1; background:rgba(11,31,61,.32);}
.doc-body-hero{padding:14px 16px 16px;}
.doc-body-hero b{font-size:15px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; line-height:1.32; margin-bottom:5px;}
.doc-body-hero .meta{font-size:12.5px; color:var(--muted);}
/* Phones: full-width hero cards (~245px each) made the 293-item
   Application Library a ~40,000px scroll. Two per row, shorter covers. */
@media (max-width:560px){
  .doc-grid:has(> .doc-card-hero){grid-template-columns:1fr 1fr; gap:10px;}
  .doc-card-hero .doc-cover{height:104px;}
  .doc-card-hero .doc-badge{top:6px; right:6px;}
  .doc-body-hero{padding:10px 11px 12px;}
  .doc-body-hero b{font-size:13.5px; -webkit-line-clamp:3;}
  .doc-body-hero .meta{font-size:11.5px;}
}
.pol-modal{max-width:600px;}
.pol-body h4{font-size:14.5px; margin:18px 0 8px; color:var(--ink);}
.pol-body h4:first-child{margin-top:0;}
.pol-body h4 .pol-note{font-weight:500; color:var(--muted); font-size:13px;}
.pol-body p{font-size:14px; color:var(--muted); margin:0 0 10px; line-height:1.5;}
.pol-body ul{margin:0; padding-left:23px;}
.pol-body li{font-size:14px; color:var(--ink); line-height:1.6;}
/* Announcement rich-text body (Joseph 2026-07-31: bullets/headings/bold via
   the WYSIWYG editor below) — same conventions as .pol-body for consistency;
   .news-item .ann-body / .modal .ann-body cover the list card + reader. */
.news-item .ann-body, .modal .ann-body{margin-top:3px;}
.news-item .ann-body h4, .modal .ann-body h4{font-size:14.5px; margin:14px 0 6px; color:var(--ink);}
.news-item .ann-body h4:first-child, .modal .ann-body h4:first-child{margin-top:0;}
.news-item .ann-body p, .modal .ann-body p{font-size:14px; color:var(--muted); margin:0 0 8px; line-height:1.55;}
.news-item .ann-body p:last-child, .modal .ann-body p:last-child{margin-bottom:0;}
.news-item .ann-body ul, .modal .ann-body ul{margin:0 0 8px; padding-left:23px;}
.news-item .ann-body ul:last-child, .modal .ann-body ul:last-child{margin-bottom:0;}
.news-item .ann-body li, .modal .ann-body li{font-size:14px; color:var(--muted); line-height:1.6;}
.news-item .ann-body b, .modal .ann-body b{color:var(--ink); font-weight:700;}
.modal .ann-body p, .modal .ann-body li{font-size:14.5px;}
/* Simple WYSIWYG (Bold / bullets / heading) for the announcement form —
   document.execCommand is deprecated but still broadly supported and is
   the pragmatic choice for a small internal contenteditable toolbar; a
   real editor library is overkill for this form's scope. */
.wysiwyg-toolbar{display:flex; gap:4px; margin-bottom:6px;}
.wys-btn{width:30px; height:30px; display:flex; align-items:center; justify-content:center; border:1px solid var(--line); border-radius:7px; background:var(--panel); color:var(--ink); font-size:14px; font-weight:700; cursor:pointer;}
.wys-btn:hover{border-color:var(--blue); color:var(--blue);}
.wysiwyg-body{min-height:110px; border:1px solid var(--line); border-radius:8px; padding:10.5px 12.5px; font:inherit; font-size:14.5px; line-height:1.55; color:var(--ink); background:var(--panel);}
.wysiwyg-body:focus{outline:none; border-color:var(--blue);}
.wysiwyg-body h4{font-size:14.5px; margin:10px 0 4px;}
.wysiwyg-body h4:first-child{margin-top:0;}
.wysiwyg-body ul{margin:0 0 6px; padding-left:23px;}
.wysiwyg-body p{margin:0 0 6px;}
.wysiwyg-body:empty:before{content:attr(data-placeholder); color:var(--muted);}
.social-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(340px,420px)); gap:18px;}
.social-card{padding:16px; display:flex; flex-direction:column; gap:10px;}
.li-embed{width:100%; height:620px; border:none; border-radius:8px; background:var(--bg);}
.li-embed-fallback{padding:27.5px; text-align:center; color:var(--muted); font-size:14px; background:var(--bg); border-radius:8px;}
.social-note{font-size:13.5px; color:var(--muted); margin:0; line-height:1.5;}

.pb-book-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:18px;}
/* Phones: one ~630px-tall card per row turned the 268-product catalog into
   a 67,000px scroll of mostly-empty photo frames. Two compact cards per
   row, square frames; the cover and title are already the tap targets
   (bound alongside .pbook-view), so the duplicate button goes. */
@media (max-width:560px){
  .pb-book-grid{grid-template-columns:1fr 1fr; gap:10px;}
  .pb-book-grid .pbook-cover{aspect-ratio:1/1;}
  .pb-book-grid .pbook-cover img, .pb-book-grid .pbook-cover.product-photo img{padding:8px;}
  .pb-book-grid .pbook-cover-tag{top:6px; left:6px; padding:3px 7px;}
  .pb-book-grid .pbook-body{padding:10px 11px 12px; gap:6px;}
  .pb-book-grid .pbook-title{font-size:13.5px; min-height:0;}
  .pb-book-grid .pbook-view{display:none;}
  /* Badge text flows as one wrapped line (block, not flex) — as a flex row
     each fragment became its own squeezed column in a half-width card. */
  .pb-book-grid .lt-badge{display:block; font-size:11.5px; line-height:1.35;}
  .pb-book-grid .lt-badge .icon{vertical-align:-1px;}
  .pb-book-grid .lt-updated{display:block; font-weight:500;}
  .catalog-section-jump{margin-bottom:10px;}
  .pb-book-grid .pbook-actions:not(:has(> :not(.pbook-view))){display:none;}
}
/* Price List tab — two master-pricebook download tiles (2026-08-05) */
.pricebook-tiles{display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); gap:20px; max-width:900px;}
.pricebook-tile{display:flex; align-items:flex-start; gap:16px; padding:27.5px; background:var(--panel); border:1px solid var(--line); border-radius:8px; box-shadow:var(--shadow);}
.pricebook-tile-cover{width:84px; aspect-ratio:8.5/11; border-radius:6px; overflow:hidden; background:var(--blue-soft); border:1px solid var(--line); box-shadow:var(--shadow); flex:none;}
.pricebook-tile-cover img{width:100%; height:100%; object-fit:cover; object-position:top; display:block;}
.pricebook-tile-body{flex:1; min-width:0;}
.pricebook-tile-body b{display:block; font-size:17px; font-weight:750; margin-bottom:4px;}
.pricebook-tile-body p{margin:0 0 10px; font-size:13.5px; color:var(--muted); line-height:1.45;}
.pricebook-tile-meta{display:block; font-size:12.5px; font-weight:650; color:var(--muted); margin-bottom:14px;}
.pricebook-dl-btn{display:flex; align-items:center; gap:7px; width:100%; justify-content:center;}
@media (max-width:640px){ .pricebook-tile{flex-direction:column; align-items:flex-start;} }
/* Product Catalog header cross-link to the Price Books page (2026-09-25) */
.catalog-wholebook{white-space:nowrap; font-weight:650;}
.catalog-wholebook a{color:var(--blue); text-decoration:none;}
.catalog-wholebook a:hover{text-decoration:underline;}
/* Product Catalog top-level sections (2026-08-05) */
.catalog-section{margin-bottom:28px;}
.catalog-section:last-child{margin-bottom:0;}
.catalog-section-head{display:flex; align-items:center; gap:9px; margin-bottom:14px; padding-bottom:11.5px; border-bottom:2px solid var(--sc,var(--line));}
.catalog-section-ic{width:28px; height:28px; border-radius:8px; background:var(--sc-soft,var(--panel)); color:var(--sc,var(--muted)); display:flex; align-items:center; justify-content:center; flex:none;}
.catalog-section-head h3{font-size:17px; font-weight:750; letter-spacing:-.01em; margin:0;}
.catalog-section-count{font-size:13px; font-weight:650; color:var(--muted); background:var(--panel); border:1px solid var(--line); border-radius:999px; padding:2.5px 10.5px;}
.catalog-section-jump{margin-top:-2px;}
.catsec-jump{color:var(--sc,var(--ink)) !important; display:flex; align-items:center; gap:5px;}
.catsec-jump:hover, .catsec-jump.active{border-color:var(--sc,var(--blue)) !important; background:var(--panel);}
/* display:flex + height:100% (2026-08-05, layout-consistency pass): the
   grid already stretches every .pbook-card in a row to the tallest card's
   height by default, but without flex the card's own children just render
   top-down and leave dead space at the bottom — .pbook-actions ends up at a
   different height on every card depending on how many optional pills
   (pages/discontinued/lead-time) happen to render above it. Flex column +
   .pbook-actions' margin-top:auto below pins actions to the same bottom
   edge on every card regardless of content length. */
.pbook-card{background:var(--panel); border:1px solid var(--line); border-radius:8px; box-shadow:var(--shadow); overflow:hidden;
  display:flex; flex-direction:column; height:100%;
  transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease;}
.pbook-card:hover{transform:translateY(-3px); box-shadow:var(--shadow-hover);}
.pbook-cover{aspect-ratio:210/272; background:var(--bg); border-bottom:1px solid var(--line); overflow:hidden; cursor:pointer; position:relative; flex:none;}
/* Unified fit (2026-08-05): a real product photo and a price-sheet-page
   screenshot used to get different treatment (cover-crop vs contain+pad),
   which read as visually inconsistent card-to-card for no reason a rep
   would understand. Both now use the same contain+pad framing — a document
   page cropped edge-to-edge often cut off its own title. Background stays
   the one deliberate difference (white for a real photo, app bg for a
   scanned page) as a subtle, legible cue between the two, not an accident. */
.pbook-cover img{width:100%; height:100%; object-fit:contain; padding:13.5px; display:block; transition:transform .2s ease;}
.pbook-cover.product-photo{background:#fff;}
.pbook-cover.product-photo img{padding:16px;}
.pbook-cover:hover img{transform:scale(1.03);}
.pbook-cover .pbook-hover{position:absolute; inset:0; background:rgba(11,31,61,0); display:flex; align-items:center; justify-content:center;
  opacity:0; transition:opacity .15s ease, background .15s ease;}
.pbook-cover:hover .pbook-hover{opacity:1; background:rgba(11,31,61,.32);}
/* Corner badge folding the book tag + page count off the card body
   (2026-08-21 card-layout pass) — same declutter move as the Cyber Library
   hero-card badges above. z-index keeps it visible over .pbook-hover's scrim. */
.pbook-cover-tag{position:absolute; top:10px; left:10px; z-index:2; display:inline-flex; align-items:center; gap:5px;
  font-size:10.5px; font-weight:700; letter-spacing:.02em; padding:4px 9px; border-radius:999px;}
.pbook-hover span{display:flex; align-items:center; gap:6px; background:#fff; color:var(--navy); font-size:13px; font-weight:700;
  padding:9px 16px; border-radius:999px; box-shadow:0 4px 12px rgba(0,0,0,.2);}
.pbook-body{padding:16px 17px 18px; display:flex; flex-direction:column; gap:9px; flex:1;}
.pbook-tag{display:inline-flex; align-items:center; gap:5px; align-self:flex-start; font-size:11px; font-weight:700; letter-spacing:.02em;
  padding:4.5px 10.5px; border-radius:999px;}
.pbook-title{font-size:14.5px; line-height:1.35; min-height:2.7em; cursor:pointer;}
.pbook-title:hover{color:var(--blue);}
.lt-badge{display:flex; align-items:center; gap:5px; font-size:12px; font-weight:650; margin-top:2px;}
.lt-badge.lt-revised{color:var(--orange);}
.lt-badge.lt-suspended{color:var(--coral);}
.lt-badge .lt-updated{font-weight:500; color:var(--muted);}
.disc-warn{display:flex; align-items:center; gap:5px; font-size:12.5px; font-weight:650; color:var(--coral); margin-top:3px; line-height:1.3;}
.disc-warn b{font-weight:750;}
.disc-warn-upcoming{color:var(--orange);}
.tariff-warn{display:flex; align-items:flex-start; gap:6px; font-size:12.5px; font-weight:650; color:var(--orange);
  background:var(--orange-soft); border-radius:9px; padding:8px 10px; margin-top:3px; line-height:1.4;}
.tariff-warn svg{margin-top:1.5px; flex:none;}
.pbook-actions{display:flex; gap:8px; margin-top:auto; padding-top:2.5px;}
.pbook-actions a, .pbook-actions button{flex:1; display:flex; align-items:center; justify-content:center; gap:6px; padding:9px 9px; border-radius:9px;
  font-size:13px; font-weight:650; text-decoration:none !important; cursor:pointer; border:1px solid var(--line); transition:background .15s ease, border-color .15s ease;}
.pbook-view{background:var(--panel); color:var(--ink) !important;}
.pbook-view:hover{border-color:var(--blue); color:var(--blue) !important;}
.pbook-dl{background:var(--navy); color:#fff !important; border-color:var(--navy) !important;}
.pbook-dl:hover{background:var(--navy-2);}
/* Price Sheets decluttered action row (2026-08-21 card-layout pass) — icon-
   only Download so "View pricing"/"View product" reads as the clear primary
   action. Own class, not a .pbook-dl override, so Playbooks/Talking
   Points/Ebooks/Videos (same .pbook-dl class, different markup) are untouched. */
.pbook-dl-icon{flex:0 0 auto; width:40px; padding:9px;}
.pbook-edit-toolbar{display:flex; gap:6px; margin-top:8px; padding-top:9px; border-top:1px dashed var(--line);}
.pbook-edit-btn{flex:1; display:flex; align-items:center; justify-content:center; padding:7px; border-radius:7px; border:1px solid var(--line);
  background:var(--panel); color:var(--muted); cursor:pointer; transition:background .12s ease, color .12s ease;}
.pbook-edit-btn:hover{background:var(--bg); color:var(--ink);}
.pbook-edit-btn:disabled{opacity:.35; cursor:default;}
.pbook-edit-btn:disabled:hover{background:var(--panel); color:var(--muted);}
.pbook-edit-btn.pbook-edit-danger:hover{background:var(--coral-soft); color:var(--coral); border-color:var(--coral);}
.pbook-add-card{border:2px dashed var(--line); border-radius:14px; display:flex; align-items:center; justify-content:center;
  min-height:220px; background:transparent; box-shadow:none; cursor:pointer; transition:border-color .12s ease, background .12s ease;}
.pbook-add-card:hover{border-color:var(--blue); background:var(--blue-soft);}
.pbook-add-card span{display:flex; flex-direction:column; align-items:center; gap:8px; color:var(--muted); font-size:14px; font-weight:650;}
.pbook-add-card:hover span{color:var(--blue);}
.edit-mode-toggle{display:flex; align-items:center; gap:8px; font-size:13.5px; font-weight:650; padding:9px 16px; border-radius:9px;
  border:1px solid var(--line); background:var(--panel); color:var(--muted); cursor:pointer; transition:background .12s ease, color .12s ease, border-color .12s ease; flex:none;}
.edit-mode-toggle:hover{border-color:var(--blue); color:var(--blue);}
.edit-mode-toggle.on{background:var(--blue); border-color:var(--blue); color:#fff;}
.edit-mode-toggle.on:hover{opacity:.9; color:#fff;}
.mse-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:18px;}
/* Landscape (16:9) cover frame — originally MSE-only, now shared by any
   landscape-deck gallery (Talking Points, Ebooks) so their covers don't get
   cropped inside .pbook-cover's portrait frame (built for the Playbooks,
   which are genuinely portrait handbook covers). */
.mse-cover{aspect-ratio:16/9; background:var(--bg); border-bottom:1px solid var(--line); overflow:hidden; cursor:pointer; position:relative;}
.mse-cover img{width:100%; height:100%; object-fit:cover; display:block; transition:transform .2s ease;}
.mse-cover:hover img{transform:scale(1.03);}
.mse-cover .pbook-hover{position:absolute; inset:0; background:rgba(11,31,61,0); display:flex; align-items:center; justify-content:center;
  opacity:0; transition:opacity .15s ease, background .15s ease;}
.mse-cover:hover .pbook-hover{opacity:1; background:rgba(11,31,61,.32);}
.mse-track-badge{display:inline-flex; align-items:center; gap:5px;}
.modal-backdrop.pdf-modal{padding:0;}
.pdf-modal .modal{max-width:none; width:100vw; height:100vh; max-height:100vh; border-radius:0; padding:0; display:flex; flex-direction:column; overflow:hidden;}
.pdf-modal .pdf-head{display:flex; align-items:center; gap:10px; padding:13.5px 18px; border-bottom:1px solid var(--line); flex:none;}
.pdf-modal .pdf-head b{flex:1; font-size:14.5px;}
.pdf-modal .pdf-head a{display:flex; align-items:center; gap:6px; font-size:13px; font-weight:650; color:var(--blue) !important; text-decoration:none !important;}
/* Phones: title on its own full-width line, tag + actions (Copy link /
   Download / Close) on the line below — in one row the title got a
   ~60px column, one word per line, and Close ran off the right edge. */
@media (max-width:560px){
  .pdf-modal .pdf-head{flex-wrap:wrap; gap:8px 12px; padding:11px 14px;}
  .pdf-modal .pdf-head b{flex:1 1 100%; order:-1; font-size:15px; line-height:1.3;}
  .pdf-modal .pdf-head > :last-child{margin-left:auto;}
  /* Give the document itself most of the screen: the rep-only notice and
     the related-content strip took ~240px of an 844px phone between them. */
  .pdf-modal .internal-only-banner{font-size:12.5px; line-height:1.4; padding:8px 14px; gap:8px;}
  .pdf-modal .internal-only-banner svg{width:16px !important; height:16px !important;}
  .pdf-modal .pdf-related{max-height:84px; padding:8px 14px;}
  .pdf-modal .internal-only-banner b{font-size:13px;}
}
.pdf-modal iframe{flex:1; width:100%; border:none; background:var(--bg);}
.pdf-pages{flex:1; min-height:0; overflow-y:auto; -webkit-overflow-scrolling:touch; background:#e9ecf1; padding:10px;}
.pdf-pages-status{padding:40px 16px; text-align:center; color:var(--muted); font-size:14px;}
.pdf-page{position:relative; width:100%; max-width:900px; margin:0 auto 10px; background:#fff; box-shadow:0 1px 4px rgba(0,0,0,.18);}
.pdf-page canvas{display:block; width:100%; height:100%;}
.pdf-page-num{position:absolute; right:8px; bottom:8px; font-size:11px; font-weight:700; color:#fff; background:rgba(16,33,61,.55); padding:2px 7px; border-radius:6px;}
@media (prefers-color-scheme: dark){ .pdf-pages{background:#1d232c;} }
/* Related-content strip (stakeholder feedback 2026-08-04, W3) — a footer
   bar under the PDF, not stealing space from it (flex:none vs. the
   iframe's flex:1), scrollable independently if content runs long. */
.pdf-related{flex:none; max-height:132px; overflow-y:auto; padding:11.5px 18px; border-top:1px solid var(--line); background:var(--panel);}
.pdf-related-group{margin-bottom:8px;}
.pdf-related-group:last-child{margin-bottom:0;}
.pdf-related-title{font-size:11px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--muted); display:block; margin-bottom:5px;}
.pdf-related-chips{display:flex; flex-wrap:wrap; gap:6px;}
.pdf-related-chip{font-size:13px; font-weight:600; padding:5.5px 12.5px; border-radius:999px; border:1px solid var(--line); background:var(--bg); color:var(--blue); cursor:pointer; max-width:260px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.pdf-related-chip:hover{background:var(--blue-soft);}

/* Product Detail View (catalog card click) — same .pdf-modal full-bleed
   shell as the PDF viewer, but the body scrolls (.pd-scroll) instead of a
   fixed iframe filling the flex space. */
.pdf-modal .pd-scroll{flex:1; overflow-y:auto; padding:25px 29.5px;}
.pd-copylink{background:none; border:1px solid var(--line); border-radius:7px; cursor:pointer; color:var(--ink); font-size:13px; font-weight:650; padding:7px 13.5px; flex:none; transition:border-color .15s ease, color .15s ease;}
.pd-copylink:hover{border-color:var(--blue); color:var(--blue);}
.pd-copylink.copied{border-color:var(--green); color:var(--green);}
.pd-body{display:flex; flex-direction:column; gap:22px; margin-bottom:10px;}
.pd-hero{width:100%; height:300px; background:#fff; border:1px solid var(--line); border-radius:12px; overflow:hidden; display:flex; align-items:center; justify-content:center;}
.pd-hero img{width:100%; height:100%; object-fit:contain; padding:32px; display:block;}
.pd-info{display:flex; flex-direction:column; gap:12px;}
/* Larger, stylized product action cards (Joseph 2026-08-05) — accent icon
   chip per action via --ac/--ac-soft set inline by productDetailActionsHtml. */
.pd-actions{display:grid; grid-template-columns:repeat(auto-fit, minmax(230px, 1fr)); gap:10px; margin-top:4px;}
.pd-action{display:flex; align-items:center; gap:12px; padding:15px 16px; border-radius:12px; border:1px solid var(--line); background:var(--panel); color:var(--ink) !important; font-size:14.5px; font-weight:700; cursor:pointer; text-decoration:none !important; text-align:left; box-shadow:var(--shadow); transition:border-color .15s ease, transform .12s ease, box-shadow .15s ease;}
.pd-action:hover{border-color:var(--ac, var(--blue)); transform:translateY(-1px); box-shadow:0 6px 18px rgba(16,16,29,.12);}
.pd-action-ic{width:36px; height:36px; border-radius:10px; display:flex; align-items:center; justify-content:center; background:var(--ac-soft, var(--blue-soft)); color:var(--ac, var(--blue)); flex-shrink:0;}
/* Related chips relocated INTO pd-info, directly under the action cards
   (Joseph 2026-08-05: "related links… should all be together at the top") —
   restyle the shared bottom-bar block as an inline panel here. */
.pd-related-wrap{margin-top:10px;}
.pd-related-wrap:empty{display:none;}
.pd-related-wrap .pdf-related{border:1px solid var(--line); border-top:1px solid var(--line); border-radius:12px; background:var(--bg); max-height:none; padding:13px 16px;}
.pd-pages{margin-top:6px; padding-top:16px; border-top:1px solid var(--line);}
.pd-pages ul{margin:6px 0 0; padding-left:20.5px;}
.pd-pages li{font-size:13.5px; color:var(--muted); line-height:1.6;}
.pd-manuals{margin-top:6px; padding-top:16px; border-top:1px solid var(--line);}
.pd-manuals ul{margin:6px 0 0; padding:0; list-style:none; display:flex; flex-direction:column; gap:6px;}
.pd-manuals a{display:inline-flex; align-items:center; gap:7px; font-size:13.5px; font-weight:600; color:var(--blue); text-decoration:none;}
.pd-manuals a:hover{text-decoration:underline;}
.pd-manuals a svg{flex:none; color:var(--muted);}
.pd-keypoints{margin-top:6px; padding-top:16px; border-top:1px solid var(--line);}
.pd-kp-section{margin-bottom:12px;}
.pd-kp-section:last-child{margin-bottom:0;}
.pd-kp-section b{font-size:13.5px;}
.pd-kp-section ul{margin:5px 0 0; padding-left:20.5px; font-size:13.5px; color:var(--muted); line-height:1.5;}
@media (max-width:640px){ .pd-hero{height:220px;} }

/* Doc-tile HTML view (2026-08-05, Rep Manual PDF->HTML conversion) — same
   full-bleed .pdf-modal/.pd-scroll shell as the PDF viewer, capped to a
   readable measure and centered rather than filling the full viewport width. */
.doc-html-body{max-width:720px; margin:0 auto;}
.doc-html-body .rm-meta{font-size:13px; color:var(--muted); margin:0 0 22px; padding-bottom:16px; border-bottom:1px solid var(--line);}
.doc-html-body h2{font-size:19.5px; font-weight:750; letter-spacing:-.01em; margin:32px 0 10px; color:var(--ink);}
.doc-html-body h2:first-of-type{margin-top:0;}
.doc-html-body h3{font-size:15.5px; font-weight:700; margin:20px 0 8px; color:var(--ink);}
.doc-html-body h4{font-size:13.5px; font-weight:700; margin:16px 0 6px; color:var(--muted); text-transform:uppercase; letter-spacing:.03em;}
.doc-html-body p{font-size:14.5px; color:var(--ink); line-height:1.65; margin:0 0 12px;}
.doc-html-body ol, .doc-html-body ul{margin:0 0 12px; padding-left:25px;}
.doc-html-body li{font-size:14.5px; color:var(--ink); line-height:1.6; margin-bottom:6px;}
.doc-html-body a{color:var(--blue); text-decoration:none;}
.doc-html-body a:hover{text-decoration:underline;}
.doc-html-body strong{font-weight:700;}

.link-tiles{display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:14px;}
.link-card{background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); padding:20.5px;}
.link-card .head{display:flex; align-items:center; gap:10px; margin-bottom:8px;}
.link-card .ic{width:36px; height:36px; border-radius:9px; display:flex; align-items:center; justify-content:center; flex:none;}
.link-card b{font-size:15px;}
.link-card p{font-size:13.5px; color:var(--muted); margin:0 0 12px;}
.btn{display:inline-flex; align-items:center; gap:7px; font-size:13.5px; font-weight:650; padding:8px 15px; border-radius:7px; background:var(--blue); color:#fff; border:none; cursor:pointer;}
.btn:hover{opacity:.9; text-decoration:none;}
.btn.ghost{background:none; border:1px solid var(--line); color:var(--ink);}

.form-field{margin-bottom:14px;}
.form-field label{display:block; font-size:13.5px; font-weight:650; margin-bottom:5px; color:var(--muted);}
.form-field input, .form-field textarea{
  width:100%; border:1px solid var(--line); border-radius:8px; padding:10.5px 12.5px; font:inherit; color:var(--ink); background:var(--panel);
}
.form-field textarea{resize:vertical; min-height:70px;}
.drop-zone{display:flex; align-items:center; gap:9px; border:1.5px dashed var(--line); border-radius:9px; padding:15px 16px; font-size:13.5px; color:var(--muted); cursor:pointer; transition:border-color .15s, background .15s;}
.drop-zone:hover{border-color:var(--blue);}
.drop-zone.drag{border-color:var(--blue); background:var(--blue-soft);}
.drop-zone.filled{border-style:solid; border-color:var(--green); color:var(--ink);}
.editor-empty{color:var(--muted); font-size:14px; padding:23px 4.5px;}

.modal-backdrop{position:fixed; inset:0; background:rgba(10,15,25,.5); display:flex; align-items:center; justify-content:center; z-index:100; padding:27.5px;}
.modal{background:var(--panel); border-radius:10px; max-width:480px; width:100%; max-height:86vh; overflow-y:auto; padding:25px 27.5px;}
.modal h3{margin:0 0 4px;}
.modal .close{position:absolute; top:14px; right:16px;}
/* Leave the sidebar's own column clear of every modal on desktop (Joseph
   2026-08-24: "the left hand nav should generally be visible all the time")
   — inset the backdrop past the sidebar's 272px width instead of covering
   inset:0 edge-to-edge. Regular modals just recenter in the narrower box;
   full-bleed .pdf-modal ones (product detail, PDF/video viewers) get their
   width capped to that same box below instead of the literal 100vw they
   used before. Scoped to the same 881px+ breakpoint the sidebar itself
   uses (nav.sidebar below is off-canvas, so mobile modals stay full-width). */
@media (min-width: 881px){
  .modal-backdrop{left:272px;}
  .pdf-modal .modal{width:100%;}
}

/* New-user welcome + confidentiality gate (2026-08-05) — deliberately its
   own fixed overlay, not .modal-backdrop, since unlike every other modal in
   the app this one has no close affordance until the checkbox is agreed. */
#welcomeGate{position:fixed; inset:0; z-index:1000; display:flex; align-items:center; justify-content:center; padding:27.5px; background:rgba(10,15,25,.6);}
.wg-card{background:var(--panel); border-radius:16px; max-width:480px; width:100%; max-height:90vh; overflow-y:auto; padding:36.5px;}
.wg-card h1{margin:0 0 10px; font-size:22.5px; letter-spacing:-.01em;}
.wg-card > p{margin:0 0 22px; color:var(--muted); font-size:14.5px; line-height:1.55;}
.wg-tos{border:1px solid var(--line); border-radius:11px; padding:18px 20.5px; margin-bottom:20px; background:var(--bg);}
.wg-tos b{font-size:14px;}
.wg-tos p{margin:6px 0 12px; font-size:13.5px; color:var(--muted); line-height:1.55;}
.wg-tos label{display:flex; align-items:flex-start; gap:9px; font-size:13.5px; font-weight:600; cursor:pointer; line-height:1.4;}
.wg-tos label+label{margin-top:12px; font-weight:500; color:var(--muted);}
.wg-tos input[type="checkbox"]{width:auto; margin-top:2px; flex:none;}
#wgContinue{width:100%;}
#wgContinue:disabled{opacity:.5; cursor:not-allowed;}

/* First-login onboarding tour (docs/onboarding-tour-2026-08-23-plan.md).
   .tour-cutout does its own dimming via a giant box-shadow spread instead of
   a separate full-screen backdrop, so the target underneath stays visibly
   "cut out" of the dim — .tour-backdrop (plain full dim, no cutout) only
   renders for the one step with no target (Welcome). z-index sits above
   #welcomeGate (1000) since replaying mid-tour should never be blocked by it. */
.tour-backdrop{position:fixed; inset:0; z-index:1001; background:rgba(10,15,25,.6);}
.tour-cutout{position:fixed; z-index:1001; border-radius:10px; pointer-events:none;
  box-shadow:0 0 0 9999px rgba(10,15,25,.6); outline:2px solid var(--blue); outline-offset:2px;
  transition:top .18s ease, left .18s ease, width .18s ease, height .18s ease;}
.tour-card{z-index:1002; background:var(--panel); border-radius:14px; padding:20px 22px;
  box-shadow:0 12px 32px rgba(0,0,0,.28);}
.tour-progress{font-size:11.5px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--blue); margin-bottom:6px;}
.tour-card h3{margin:0 0 8px; font-size:17px;}
.tour-card p{margin:0; font-size:14px; color:var(--muted); line-height:1.5;}
.tour-actions{display:flex; align-items:center; gap:8px; margin-top:18px;}

.disclaimer{font-size:13px; color:var(--muted); margin-top:10px;}
.faq-list{display:flex; flex-direction:column; gap:2px; max-height:280px; overflow-y:auto;}
.faq-item{border-bottom:1px solid var(--line); padding:10.5px 0;}
.faq-item summary{cursor:pointer; font-size:14.5px; font-weight:600; list-style:none;}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary::before{content:'+'; display:inline-block; width:14px; color:var(--muted); font-weight:700;}
.faq-item[open] summary::before{content:'–';}
.faq-item p{margin:8px 0 0 14px; font-size:13.5px; color:var(--muted); line-height:1.5;}
.empty-note{color:var(--muted); font-size:14px; padding:27.5px 0; text-align:center;}

/* chatter */
.chatter-card{display:flex; flex-direction:column; height:calc(100vh - 238px); min-height:420px; padding:0; overflow:hidden;}
.chatter-list{flex:1; overflow-y:auto; padding:23px; display:flex; flex-direction:column; gap:12px;}
.chat-row{display:flex; flex-direction:row; align-items:flex-end; gap:8px; max-width:78%; align-self:flex-start;}
.chat-row.mine{align-self:flex-end; flex-direction:row-reverse;} /* avatar renders first in markup either way — reversed here so it lands on the right for your own messages */
.chat-col{display:flex; flex-direction:column; min-width:0;}
.chat-row.mine .chat-col{align-items:flex-end;}
.chat-avatar{margin-bottom:20px;} /* sits level with the bubble, not the meta line above it */
.chat-meta{font-size:12.5px; color:var(--muted); margin:0 4px 3px;}
.chat-bubble{background:var(--panel-2, var(--bg)); border:1px solid var(--line); border-radius:14px 14px 14px 4px; padding:10.5px 15px; font-size:14.5px; line-height:1.45; white-space:pre-wrap; word-break:break-word;}
.chat-row.mine .chat-bubble{background:var(--blue-soft); border-color:transparent; border-radius:14px 14px 4px 14px;}
.chat-row-flash .chat-bubble{animation: chatRowFlash .9s ease;}
@keyframes chatRowFlash{ 0%{box-shadow:0 0 0 2px var(--blue);} 100%{box-shadow:0 0 0 2px transparent;} }
/* Quoted reference to the replied-to message, inside the bubble */
.chat-quote{display:block; border-left:3px solid var(--blue); padding:3px 9px; margin-bottom:6px; background:color-mix(in srgb, var(--blue) 10%, transparent); border-radius:5px; cursor:pointer;}
.chat-quote b{display:block; font-size:11.5px; font-weight:650; color:var(--blue);}
.chat-quote span{display:block; font-size:12.5px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:280px;}
.chatter-compose-wrap{border-top:1px solid var(--line); background:var(--panel);}
.chatter-compose{display:flex; gap:10px; align-items:flex-end; padding:16px 20.5px;}
.chatter-compose textarea{flex:1; resize:none; border:1px solid var(--line); border-radius:10px; padding:10.5px 13.5px; font:inherit; font-size:14.5px; color:var(--ink); background:var(--bg); max-height:120px;}
.chatter-compose textarea:focus{outline:none; border-color:var(--blue);}
@media (max-width:560px){ .chatter-compose{padding:12px; gap:8px;} .chatter-compose textarea{min-height:44px;} }
.chatter-compose button{flex:none;}
.chatter-emoji-wrap{flex:none;}
.chatter-emoji-btn{flex:none; width:38px; height:38px; border:1px solid var(--line); border-radius:10px; background:var(--bg); font-size:18px; line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center;}
.chatter-emoji-btn:hover{background:var(--line-soft);}
/* position:fixed + JS-computed top/left (see the emoji-btn click handler),
   not position:absolute anchored to .chatter-emoji-wrap — .chatter-card
   (the popup's nearest positioned/overflow ancestor otherwise) clips to its
   own bounds, the exact same footgun as the Product Timeline crop bug. */
.chatter-emoji-picker{position:fixed; z-index:200; width:272px; max-height:220px; overflow-y:auto; display:grid; grid-template-columns:repeat(8, 1fr); gap:2px; background:var(--panel); border:1px solid var(--line); border-radius:10px; padding:8px; box-shadow:var(--shadow);}
/* The [hidden] attribute alone can't win against .chatter-emoji-picker's own
   `display:grid` above (author CSS beats the UA's [hidden]{display:none}
   default regardless of specificity) — without this, toggling `hidden` back
   on (closing the picker, or clicking an emoji, or the outside-click closer)
   has no visual effect and the picker stays open forever. */
.chatter-emoji-picker[hidden]{display:none;}
.chatter-emoji-opt{border:none; background:none; font-size:19px; line-height:1; padding:5px; border-radius:6px; cursor:pointer;}
.chatter-emoji-opt:hover{background:var(--bg);}
/* Reply-preview banner above the composer (set by clicking a message's reply icon) */
.chatter-reply-bar{display:flex; align-items:center; gap:10px; padding:9px 20.5px; background:var(--blue-soft);}
.chatter-reply-bar-body{flex:1; min-width:0; border-left:3px solid var(--blue); padding-left:10px;}
.chatter-reply-bar-label{font-size:12px; font-weight:650; color:var(--blue);}
.chatter-reply-bar-text{font-size:13px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.chatter-reply-bar-cancel{flex:none; display:flex; align-items:center; justify-content:center; width:22px; height:22px; border:none; border-radius:6px; background:transparent; color:var(--muted); cursor:pointer;}
.chatter-reply-bar-cancel:hover{background:color-mix(in srgb, var(--blue) 16%, var(--blue-soft)); color:var(--ink);}
.chat-edited{font-style:italic; opacity:.75;}
.chat-actions{display:flex; gap:6px; margin-top:3px; opacity:0; transition:opacity .12s;}
.chat-row:hover .chat-actions{opacity:1;}
.chat-actions button{display:flex; align-items:center; justify-content:center; width:22px; height:22px; padding:0; border:none; border-radius:6px; background:transparent; color:var(--muted); cursor:pointer;}
.chat-actions button:hover{background:var(--line); color:var(--ink);}
.chat-bubble-editing{background:var(--panel); border:1px solid var(--blue); border-radius:14px 14px 4px 14px; padding:9px;}
.chat-edit-input{width:100%; box-sizing:border-box; resize:vertical; border:1px solid var(--line); border-radius:8px; padding:8px 10.5px; font:inherit; font-size:14.5px; color:var(--ink); background:var(--bg);}
.chat-edit-actions{display:flex; justify-content:flex-end; gap:8px; margin-top:6px;}
.chat-edit-actions .btn{padding:5.5px 12.5px; font-size:13px;}
/* Welcoming empty state — replaces the plain one-liner when a channel has no messages yet */
.chatter-empty{display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; flex:1; gap:9px; padding:40px 30px; margin:auto 0;}
.chatter-empty-ic{width:52px; height:52px; border-radius:50%; background:var(--blue-soft); color:var(--blue); display:flex; align-items:center; justify-content:center;}
.chatter-empty b{font-size:15px; color:var(--ink);}
.chatter-empty p{margin:0; font-size:13.5px; color:var(--muted); max-width:320px; line-height:1.5;}
.org-team-photo{width:100%; max-height:360px; object-fit:cover; border-radius:var(--radius); box-shadow:var(--shadow); margin-bottom:20px; display:block;}
/* Captioned variant (People > Rep Network, 2026-09-03: rep owners/managers group photo) */
.org-team-figure{margin:0 0 20px;}
.org-team-figure .org-team-photo{margin-bottom:6px;}
.org-team-figure figcaption{font-size:12.5px; color:var(--muted); text-align:center;}
/* Rep Directory spotlight (Joseph 2026-07-31: People section home merges
   the org chart with a prominent card into the Rep Directory, "like an
   extension of the Yokogawa organization") — sits directly below the org
   tree card, purple to match the People section's own color. */
.rep-network-spotlight{
  display:flex; align-items:center; gap:16px; width:100%; text-align:left;
  background:var(--purple-soft); border:1px solid var(--purple); border-radius:14px;
  padding:18px 23px; margin-bottom:18px; cursor:pointer; font:inherit;
  transition:transform .15s ease, box-shadow .15s ease;
}
.rep-network-spotlight:hover{transform:translateY(-1px); box-shadow:0 8px 20px rgba(16,24,40,.11);}
.rns-icon{width:40px; height:40px; border-radius:11px; background:var(--purple); color:#fff; display:flex; align-items:center; justify-content:center; flex:none;}
.rns-body{flex:1; min-width:0;}
.rns-body h2{margin:0 0 2px; font-size:16.5px; color:var(--ink);}
.rns-body p{margin:0; color:var(--muted); font-size:13.5px; line-height:1.45; max-width:60ch;}
.rns-cta{display:inline-flex; align-items:center; gap:5px; font-size:13.5px; font-weight:700; color:var(--purple); flex:none; white-space:nowrap;}
@media (max-width:700px){ .rep-network-spotlight{flex-wrap:wrap;} .rns-cta{margin-left:56px;} }

/* ---- People home v2 (2026-08-24): section headers, compact/collapsible
   org chart, rep-firm logo wall, prominent awards spotlight ---- */
.ph-section-head{display:flex; align-items:baseline; justify-content:space-between; gap:10px; flex-wrap:wrap; margin:26px 0 12px;}
.ph-section-head h2{margin:0; font-size:17px;}
.ph-section-head p{margin:0; font-size:13px; color:var(--muted);}

.pc-tree{list-style:none; margin:0; padding:0;}
.pc-tree .pc-tree{margin-left:26px; padding-left:20px; border-left:2px solid var(--line); margin-top:2px;}
.pc-node{position:relative;}
.pc-tree .pc-tree > .pc-node::before{content:''; position:absolute; left:-20px; top:19px; width:18px; height:2px; background:var(--line);}
.pc-row{display:flex; align-items:center; gap:9px; padding:7px 8px; margin:0 -8px; border-radius:8px; flex-wrap:wrap; transition:background .5s ease;}
.pc-row-clickable{cursor:pointer;}
.pc-row-clickable:hover{background:var(--line-soft);}
.pc-row.flash{background:var(--blue-soft);}
.pc-expand-btn{width:18px; height:18px; border-radius:5px; border:none; background:var(--line-soft); color:var(--muted); font-weight:800; font-size:11px; flex:none; cursor:pointer; padding:0;}
.pc-expand-spacer{width:18px; flex:none;}
.pc-name-vacant{color:var(--muted); font-style:italic;}
.org-avatar.pc-avatar-vacant{background:none; border:2px dashed var(--line); color:var(--muted);}
.pc-badge{font-size:10.5px; font-weight:700; padding:2px 8px; border-radius:999px; background:var(--orange-soft); color:var(--orange); white-space:nowrap;}
.pc-badge-open{background:var(--line-soft); color:var(--muted); border:1px dashed var(--line);}
.pc-badge-dotted{background:var(--purple-soft); color:var(--purple); cursor:pointer;}
/* Phones (People page org chart): same fix as .org-person — 46px indent per
   level squeezed deep branches into a ~150px column with each avatar on
   its own line. Toggle | avatar | name/title/badges stacked; the 18px
   expand button grows to a 28px tap target (the whole row also toggles). */
@media (max-width:560px){
  .pc-tree .pc-tree{margin-left:13px; padding-left:10px;}
  .pc-tree .pc-tree > .pc-node::before{left:-10px; width:8px;}
  .pc-row{display:grid; grid-template-columns:28px 32px minmax(0,1fr); column-gap:8px; row-gap:2px; align-items:center;}
  .pc-row > .pc-expand-btn, .pc-row > .pc-expand-spacer{grid-column:1; grid-row:1; width:28px; height:28px; font-size:13px;}
  .pc-row > .org-avatar{grid-column:2; grid-row:1 / span 4; align-self:start; width:32px; height:32px; font-size:12.5px;}
  .pc-row > :not(.pc-expand-btn):not(.pc-expand-spacer):not(.org-avatar){grid-column:3; justify-self:start;}
  .pc-row .otitle{font-size:13px; line-height:1.35;}
}

.logo-wall{display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:10px; margin-top:2px;}
.logo-card{display:flex; flex-direction:column; align-items:center; gap:6px; background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:14px 10px; box-shadow:var(--shadow); cursor:pointer; font:inherit; transition:transform .12s ease, box-shadow .12s ease;}
.logo-card:hover{transform:translateY(-1px); box-shadow:0 6px 16px rgba(16,24,40,.09);}
.logo-card-img{width:56px; height:56px; border-radius:10px; background:var(--line-soft); display:flex; align-items:center; justify-content:center; overflow:hidden;}
.logo-card-img img{width:100%; height:100%; object-fit:contain; padding:6px;}
.logo-card-ini{font-weight:800; font-size:15px; color:var(--muted); align-items:center; justify-content:center;}
.logo-card-name{font-size:12.5px; font-weight:700; text-align:center; line-height:1.25; color:var(--ink);}
.logo-card-count{font-size:11px; color:var(--muted);}
.reps-cta-btn{display:inline-flex; align-items:center; gap:6px; margin-top:14px; background:var(--blue); color:#fff; font-weight:700; font-size:13.5px; padding:10px 18px; border-radius:9px; border:none; cursor:pointer; font:inherit;}
.reps-cta-btn:hover{opacity:.92;}

.awards-spotlight{margin-top:28px; background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); padding:16px 18px; cursor:pointer; transition:transform .12s ease, box-shadow .12s ease;}
.awards-spotlight:hover{transform:translateY(-1px); box-shadow:0 8px 20px rgba(16,24,40,.11);}
.awards-spotlight-head{display:flex; align-items:center; gap:12px;}
.awards-spotlight-icon{width:40px; height:40px; border-radius:11px; background:var(--orange); color:#fff; display:flex; align-items:center; justify-content:center; flex:none;}
.awards-spotlight-head h3{margin:0 0 2px; font-size:15.5px; color:var(--ink);}
.awards-spotlight-head p{margin:0; color:var(--muted); font-size:13px;}
.awards-spotlight-cta{margin-left:auto; flex:none; font-size:13px; font-weight:700; color:var(--orange); display:inline-flex; align-items:center; gap:5px; white-space:nowrap;}
.awards-spotlight-strip{display:flex; gap:8px; margin-top:12px;}
.awards-spotlight-thumb{width:52px; height:52px; border-radius:8px; overflow:hidden; background:var(--orange-soft); display:flex; align-items:center; justify-content:center; color:var(--orange); flex:none;}
.awards-spotlight-thumb img{width:100%; height:100%; object-fit:cover;}
@media (max-width:700px){ .awards-spotlight-head{flex-wrap:wrap;} .awards-spotlight-cta{margin-left:56px;} }

/* Rep Awards (2026-08-17) — grid of plaque/trophy photos grouped by org
   card (pageAwards()). Lightbox reuses Rep Directory's .rd-photo-lightbox
   class directly (not just its inner .rd-plb-close/.rd-plb-name element
   classes) — those are styled via a `.rd-photo-lightbox .rd-plb-close`
   ancestor-scoped selector, so a differently-named wrapper class silently
   drops all of that styling. Safe to share: identical backdrop/position
   rules, and Directory/Awards never render into #view at the same time. */
.award-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:14px;}
@media (max-width:560px){ .award-grid{grid-template-columns:1fr 1fr; gap:10px;} .award-tile{padding:7px;} }
.award-tile{cursor:pointer; border:1px solid var(--line); border-radius:12px; padding:10px; background:var(--bg); transition:transform .15s ease, box-shadow .15s ease;}
.award-tile:hover{transform:translateY(-2px); box-shadow:0 6px 16px rgba(16,24,40,.1);}
.award-tile-img{width:100%; aspect-ratio:4/3; border-radius:8px; overflow:hidden; background:var(--panel); display:flex; align-items:center; justify-content:center; margin-bottom:9px;}
.award-tile-img img{width:100%; height:100%; object-fit:cover; display:block;}
.award-tile-noimg{color:var(--muted);}
.award-tile-tag{display:inline-flex; align-items:center; gap:4px; font-size:10.5px; font-weight:700; letter-spacing:.02em; padding:3.5px 8px; border-radius:999px; margin-bottom:7px;}
.award-tile-title{font-size:13px; font-weight:650; line-height:1.35; color:var(--ink);}
.award-tile-fy{font-size:12px; color:var(--muted); margin-top:3px; font-weight:600;}

/* mobile */
.mobile-scrim{display:none;}
@media (max-width: 880px){
  .menu-btn{display:flex;}
  .brand small{display:none;}
  .persona-text{display:none;}
  /* Let the DOCUMENT scroll on phones/portrait tablets, not main.content:
     a nested scroller keeps iOS Safari's toolbars from collapsing, breaks
     tap-the-status-bar-to-top, and traps momentum scrolling. The header
     stays pinned via sticky instead of the flex column. */
  html, body{height:auto;}
  body{display:block; height:auto; min-height:100dvh; overflow:visible;}
  .app{display:block;}
  header.topbar{position:sticky; top:0; z-index:35;}
  .body-row{display:block; min-height:0;}
  main.content{overflow:visible;}
  /* Header icons become real 40px tap targets; the notification panel
     spans the screen instead of hanging 340px off the bell (which pushed
     it past the left edge on phones). */
  .bell{display:flex; align-items:center; justify-content:center; width:40px; height:40px; border-radius:9px;}
  .bell .dot-badge{top:9px; right:9px;}
  .notif-panel{position:fixed; top:66px; left:8px; right:8px; width:auto; max-height:calc(100dvh - 82px);}
  /* No background scroll behind an open modal or the slide-out nav. */
  body:has(#modalRoot:not(:empty)), body:has(nav.sidebar.open){overflow:hidden;}
  nav.sidebar{
    position:fixed; left:0; top:0; bottom:0; height:100dvh; z-index:50; transform:translateX(-100%);
    transition:transform .18s ease; width:min(300px, 86vw); box-shadow:2px 0 12px rgba(0,0,0,.15);
    padding-bottom:calc(23px + env(safe-area-inset-bottom));
  }
  nav.sidebar.open{transform:translateX(0);}
  .mobile-scrim.open{display:block; position:fixed; inset:0; background:rgba(0,0,0,.35); z-index:45;}
  main.content{padding:20.5px 18px 54.5px;}
  .dash-top{grid-template-columns:1fr;}
  .kpi-row{grid-template-columns:repeat(2,1fr);}
  .qa-grid{grid-template-columns:repeat(3,1fr);}
  .qa-tile{padding:13.5px 7px 11.5px;}
  .qa-tile .ic{width:38px; height:38px;}
  .page-head h1{font-size:21.5px;}
}

/* Content loading skeleton — shown instead of placeholder sample data until
   CONTENT_LOADED (see the comment on that flag in index.html). */
.content-loading{display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; padding:91px 23px; color:var(--muted); font-size:14.5px;}
.cl-spinner{width:26px; height:26px; border-radius:50%; border:3px solid var(--line); border-top-color:var(--blue); animation:cl-spin .8s linear infinite;}
@keyframes cl-spin{to{transform:rotate(360deg);}}
/* Sign-in gate (2026-09-09) — painted into #view by renderSignInGate() for
   signed-out loads whose hub redirect hasn't (or never will) commit. */
.signin-gate{max-width:460px; margin:0 auto; text-align:center;}
.signin-gate h2{margin:0; font-size:20px; color:var(--navy);}
.signin-gate p{margin:0; line-height:1.5;}
.signin-gate .btn{margin-top:6px;}
.signin-gate .gate-note{font-size:13px; opacity:.85;}

/* ---- Product Releases & Discontinuance timeline (stakeholder request
   2026-08-04) — built on vis-timeline, whose stock CSS is hardcoded light
   colors. This block re-themes every vis-timeline chrome element to our
   CSS variables (dark-mode bug class we already hit once this session with
   the sidebar — verify new library CSS in both schemes, don't assume it's
   theme-aware) and styles our own marker/modal content on top of it. ---- */
.pt-card{background:var(--panel);}
/* Two linked vis-timeline instances stacked so their shared axis reads as
   one row in the middle (Joseph 2026-08-04: "timeline months in the middle,
   callouts above and below") — #ptTimelineBottom's own axis is real (it's
   what keeps its internal layout/click coordinates correct) but hidden via
   the rule near the bottom of this block, so only #ptTimelineTop's bottom
   axis is visible, sitting right at the seam between the two halves. */
.pt-half{position:relative; min-height:210px;}
.pt-half-label{position:absolute; left:14px; z-index:20; font-size:12.5px; font-weight:700; text-transform:uppercase; letter-spacing:.03em; color:var(--muted); background:var(--panel); padding:2.5px 9px 2.5px 0;}
.pt-half-label-top{top:8px;}
.pt-half-label-bottom{bottom:8px;}
.pt-marker{display:flex; align-items:center; gap:6px; max-width:150px;}
.pt-thumb{width:20px; height:20px; border-radius:5px; object-fit:cover; background:var(--bg); flex:none;}
.pt-ic{width:20px; height:20px; border-radius:5px; display:flex; align-items:center; justify-content:center; flex:none;}
.pt-label{font-size:12.5px; font-weight:600; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
/* New releases get more visual weight/real estate than discontinuances —
   bigger thumbnail, bolder/larger name, wider box (Joseph 2026-08-24). */
.vis-item.pt-type-release .pt-marker{max-width:220px; gap:8px;}
.vis-item.pt-type-release .pt-thumb, .vis-item.pt-type-release .pt-ic{width:28px; height:28px; border-radius:7px;}
.vis-item.pt-type-release .pt-label{font-size:14px; font-weight:750;}
.vis-item.pt-type-discontinued .pt-marker{opacity:.82;}
/* Full name + description, shown on hover — see ptTooltipHtml() — since the
   marker above truncates long names and never shows a description at all. */
.pt-tooltip-title{font-size:13.5px; font-weight:700; color:var(--ink); margin-bottom:3px;}
.pt-tooltip-note{font-size:12.5px; color:var(--muted); line-height:1.4;}

/* Phone-width Product Timeline list (pageProductTimelineListMobile) —
   replaces the vis-timeline Gantt below 640px; see isNarrowViewport(). */
.pt-list-group{border-bottom:1px solid var(--line);}
.pt-list-group:last-child{border-bottom:none;}
.pt-list-sticky{position:sticky; top:0; z-index:1; background:var(--bg); color:var(--muted); font-size:12px; font-weight:800; text-transform:uppercase; letter-spacing:.04em; padding:8px 14px;}
.pt-list-row{display:flex; align-items:center; gap:10px; width:100%; background:none; border:none; border-top:1px solid var(--line-soft); padding:11px 14px; text-align:left; cursor:pointer; color:inherit; font:inherit;}
.pt-list-group .pt-list-row:first-of-type{border-top:none;}
.pt-list-row:active{background:var(--bg);}
.pt-list-dot{flex:none; width:8px; height:8px; border-radius:50%;}
.pt-list-thumb{flex:none; width:34px; height:34px; border-radius:7px; object-fit:cover; background:var(--bg);}
.pt-list-ic{flex:none; width:34px; height:34px; border-radius:7px; display:flex; align-items:center; justify-content:center;}
.pt-list-text{flex:1; min-width:0; display:flex; flex-direction:column; gap:1px;}
.pt-list-title{font-size:14px; font-weight:650; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.pt-list-date{font-size:12.5px; color:var(--muted);}
.pt-list-row svg{flex:none; color:var(--muted);}

.vis-timeline{border:none !important; background:var(--panel); color:var(--ink); font-family:inherit;}
#ptTimelineBottom .vis-time-axis{visibility:hidden;}
.vis-panel.vis-center, .vis-panel.vis-left, .vis-panel.vis-right, .vis-panel.vis-top, .vis-panel.vis-bottom{border-color:var(--line) !important;}
.vis-labelset .vis-label{border-color:var(--line-soft) !important; color:var(--muted);}
.vis-labelset .vis-label .vis-inner{font-size:12.5px; font-weight:700; text-transform:uppercase; letter-spacing:.03em; color:var(--muted);}
.vis-time-axis .vis-text{color:var(--muted); font-size:12.5px;}
.vis-time-axis .vis-grid.vis-minor{border-color:var(--line-soft) !important;}
.vis-time-axis .vis-grid.vis-major{border-color:var(--line) !important;}
.vis-panel.vis-background.vis-horizontal .vis-grid.vis-odd{background:var(--bg);}
.vis-current-time{background-color:var(--orange) !important; width:2px !important;}
.vis-item{border-color:var(--line) !important; background:var(--panel) !important; color:var(--ink);}
.vis-item.pt-type-release{border-color:var(--green) !important; background:var(--green-soft) !important;}
.vis-item.pt-type-discontinued{border-color:var(--coral) !important; background:var(--coral-soft) !important;}
.vis-item.vis-selected{box-shadow:0 0 0 2px var(--blue) !important;}
.vis-item .vis-item-content{padding:4.5px 9px;}
.vis-tooltip{background:var(--panel) !important; color:var(--ink) !important; border:1px solid var(--line) !important; border-radius:8px !important; box-shadow:var(--shadow) !important; max-width:260px; white-space:normal !important; padding:10px 12px !important;}

/* Item connector (dot + stem down to the axis) — styled in a neutral
   --muted tone rather than the category color so it reads as "here's the
   exact date" independent of row/stack depth. Explicit z-index over the
   quarter-shading bands below is load-bearing, not cosmetic: vis-timeline
   nests each item's dot/line in the same per-group layer as background-
   type items, and without this the bands paint over the connector
   entirely on every even-numbered year (see that rule's comment) — found
   2026-08-04 by live-toggling suspects, looked like a styling issue at
   first. Kept thin/subtle now that the real bug is fixed; a bold/thick
   treatment earlier was compensating for the wrong problem. */
.vis-item.vis-dot{background:var(--muted) !important; border-color:var(--muted) !important; border-width:2px !important; opacity:.85; box-shadow:0 0 0 2px var(--panel); z-index:2 !important;}
.vis-item.vis-line{width:1px !important; background:var(--muted) !important; border:none !important; opacity:.85; z-index:2 !important;}
.vis-item.vis-box{z-index:2 !important;}

/* Quarter/year indication (Joseph 2026-08-04: "show some visual indication
   of (calendar) years and quarters"; revised same day — no more gray/white
   alternating-year fills, which Joseph disliked). Every band is transparent;
   time structure reads from a line-weight hierarchy instead:
     month gridlines (vis minor, --line-soft)  <  quarter tick (1px --line)
     <  year rule (2px blue, spans both halves since bands exist in both).
   The labeled (top) instance also gets a Qn label at the seam; Q1 carries
   a blue year chip. Overrides the generic .vis-item panel/border rule
   above (background items would otherwise pick up a visible border +
   solid panel fill like real items).
   ROOT CAUSE of "callout lines aren't showing for some items" (found via
   live DOM/paint tracing 2026-08-04, after border-width/opacity/z-index
   tweaks alone didn't fix it): a qband and a real item's dot/line/box all
   live in the SAME per-group `.vis-group > .vis-background` sub-layer, and
   the then-opaque even-year fill happened to land later in DOM/paint order
   — so for every item whose stem crossed an even-year quarter, the tint
   painted directly over it, not just faintly but completely (confirmed by
   toggling the band transparent live: the "missing" lines reappeared
   instantly). Fixed with explicit stacking instead of reordering the DOM —
   z-index:0 here plus z-index:2 on every real item element (above) makes
   the paint order independent of which one vis-timeline happened to
   insert into the DOM later: qband always paints behind. Bands are now
   transparent, but the z-index pin stays: the year rule / labels must
   never paint over an item's connector either. */
.vis-item.vis-background.pt-qband{background:transparent !important; border:0; border-left:1px solid var(--line); pointer-events:none; z-index:0 !important;}
/* border-left-COLOR needs !important — the generic .vis-item dark/light
   normalizer above sets `border-color: var(--line) !important` on every
   vis item, which would silently gray this rule out (it did, first try). */
.vis-item.vis-background.pt-qband-ystart{border-left:2px solid var(--blue); border-left-color:color-mix(in srgb, var(--blue) 55%, transparent) !important;}
.pt-qband .vis-item-content{position:absolute; left:8px; bottom:4px; top:auto; padding:0; display:flex; align-items:center; gap:6px;}
.pt-qband .pt-q{font-size:10.5px; font-weight:800; letter-spacing:.05em; color:var(--muted); opacity:.65;}
.pt-qband .pt-yr{font-size:12px; font-weight:800; letter-spacing:.02em; color:var(--blue); background:var(--blue-soft); border-radius:6px; padding:1px 8px;}
:root[data-theme="dark"] .pt-qband .pt-yr{color:#7fb2ff;}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .pt-qband .pt-yr{color:#7fb2ff;} }
/* The seam axis itself: month names stay minor/muted, but the year (major)
   labels get real weight so the axis reinforces the year rules. */
.vis-time-axis .vis-text.vis-major{font-weight:750; color:var(--ink);}

/* ═══ Rep Directory — sales-portal-style cards/companies port (Joseph
   2026-08-05: "look and behave more like the rep directory in t&m sales
   portal, minus editing + org chart"). Class names match the sales portal's
   rd- and co- system so the two stay visually comparable; variables mapped
   to this app's palette (--panel/--blue). NOTE: never write the literal
   star-slash pair inside this comment — "rd-* / co-*" written tight
   self-terminated the comment and silently killed the NEXT rule (.rd-jump),
   which broke the whole letter strip (caught live 2026-08-05). ═══ */
.rd-jump{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:16px}
.rd-jump-l{width:28px;height:28px;display:flex;align-items:center;justify-content:center;border:1px solid var(--line);border-radius:7px;font-size:12px;font-weight:700;color:var(--muted);text-decoration:none;background:var(--panel)}
.rd-jump-l:hover{border-color:var(--blue);color:var(--blue)}
.rd-jump-l.empty{opacity:.35;pointer-events:none;padding:0}
.rd-letter{font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);padding:10px 0 6px;border-bottom:1px solid var(--line);margin-bottom:10px;scroll-margin-top:16px}
.rd-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px;margin-bottom:22px}
.rd-card{background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:14px;display:flex;gap:12px;box-shadow:var(--shadow);transition:box-shadow .15s}
.rd-card:hover{box-shadow:0 4px 16px rgba(16,16,29,.1)}
.rd-card .rd-av{flex:0 0 72px;width:72px;height:72px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:15px;color:#fff;flex-shrink:0;overflow:hidden;position:relative}
/* Source rep photos vary a lot in framing (some fill the frame, some are a
   small face on a large background — hand-curated from many different rep
   firms' own sites, not shot to one template); object-fit:cover alone
   already fills every circle but can't equalize how much of the ORIGINAL
   frame the face occupies. A modest uniform zoom tightens the loose photos
   noticeably without visibly over-cropping the already-tight ones. */
.rd-card .rd-av img{position:absolute;inset:0;width:100%;height:100%;border-radius:50%;object-fit:cover;object-position:center 30%;transform:scale(1.18);display:block}
.rd-card .rd-av[data-full]{cursor:zoom-in}
.rd-card .rd-info{flex:1;min-width:0}
.rd-card .rd-name{font-weight:700;font-size:14px;display:inline}
.rd-card .rd-title{color:var(--muted);font-size:12px;margin-top:1px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rd-card .rd-badge{display:inline-flex;align-items:center;gap:5px;margin-top:6px;font-size:11px;font-weight:700;color:#fff;padding:2px 8px;border-radius:12px;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (max-width:560px){ .rd-card .rd-badge{white-space:normal; line-height:1.3;} }
.rd-card .rd-links{display:flex;gap:6px;margin-top:7px;flex-wrap:wrap}
.rd-card .rd-links a{color:var(--muted);font-size:12px;text-decoration:none;display:flex;align-items:center;gap:3px}
.rd-card .rd-links a:hover{color:var(--blue)}
.co-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px}
/* Two-tier directory (2026-08-17): full-width parent company band above its
   child org cards; clickable through to the parent's own detail page. */
.co-parent-band{grid-column:1/-1;display:flex;align-items:center;gap:12px;padding:12px 16px;border-radius:12px;box-shadow:var(--shadow);cursor:pointer;transition:box-shadow .15s,transform .12s;margin-top:6px}
.co-parent-band:hover{box-shadow:0 8px 24px rgba(16,16,29,.12);transform:translateY(-1px)}
.co-parent-band .co-logo-wrap{width:44px;height:44px}
.co-parent-band .co-logo-wrap img{width:44px;height:44px;object-fit:contain;padding:3px}
.co-card{background:var(--panel);border:1px solid var(--line);border-radius:8px;overflow:hidden;box-shadow:var(--shadow);cursor:pointer;transition:box-shadow .15s,transform .12s}
.co-card:hover{box-shadow:0 8px 24px rgba(16,16,29,.12);transform:translateY(-1px)}
.co-head{padding:16px;display:flex;align-items:center;gap:12px}
.co-logo-wrap{width:52px;height:52px;border-radius:10px;background:rgba(255,255,255,.18);display:flex;align-items:center;justify-content:center;overflow:hidden;flex-shrink:0}
.co-logo-wrap img{width:52px;height:52px;object-fit:contain;padding:4px;display:block}
.co-logo-ini{font-weight:900;font-size:16px;color:#fff}
.co-info-div{flex:1;min-width:0}
.co-name-div{font-weight:800;font-size:15px;color:#fff;line-height:1.2}
.co-region-div{font-size:11px;color:rgba(255,255,255,.75);margin-top:3px}
.co-codes-div{display:flex;flex-wrap:wrap;gap:3px;margin-top:5px}
.co-code-chip{font-size:10px;font-weight:800;letter-spacing:.04em;background:rgba(255,255,255,.22);color:#fff;border-radius:4px;padding:1px 6px;line-height:1.6}
.co-members-div{padding:0 14px 12px}
.co-mem-row{display:flex;align-items:center;gap:8px;padding:6px 0;border-top:1px solid var(--line);font-size:12px}
.co-mem-av{width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:9px;font-weight:800;color:#fff;flex-shrink:0;overflow:hidden;position:relative}
.co-mem-av img{position:absolute;inset:0;width:100%;height:100%;border-radius:50%;object-fit:cover;display:block}
.co-mem-info{flex:1;min-width:0}
.co-mem-name{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.co-mem-title{color:var(--muted);font-size:11px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.co-count-bar{font-size:11px;color:var(--muted);padding:7px 14px;border-top:1px solid var(--line);background:var(--bg)}
.rd-back-btn{border:0;background:transparent;color:var(--muted);font-size:14px;cursor:pointer;padding:0;display:flex;align-items:center;gap:6px;font-weight:600}
.rd-back-btn:hover{color:var(--ink)}
.co-detail-head{display:flex;align-items:center;gap:16px;padding:20px 0}
.co-detail-logo{width:64px;height:64px;border-radius:12px;display:flex;align-items:center;justify-content:center;overflow:hidden;flex-shrink:0}
.co-detail-logo img{width:64px;height:64px;object-fit:contain;padding:6px;display:block}
.co-detail-logo .dl-ini{font-weight:900;font-size:20px;color:#fff}
.co-detail-info{flex:1}
.co-detail-info h2{margin:0 0 4px;font-size:22px}
.co-detail-info .co-meta{color:var(--muted);font-size:13px}
.co-detail-info .co-meta a{color:var(--blue)}
.rd-photo-lightbox{position:fixed;inset:0;z-index:1500;display:none;align-items:center;justify-content:center;background:rgba(16,16,29,.75);backdrop-filter:blur(2px);padding:40px;cursor:zoom-out}
.rd-photo-lightbox.show{display:flex}
.rd-photo-lightbox img{max-width:min(480px,100%);max-height:calc(100vh - 140px);border-radius:16px;box-shadow:0 20px 60px rgba(0,0,0,.5);cursor:default}
.rd-photo-lightbox .rd-plb-name{position:absolute;left:50%;bottom:48px;transform:translateX(-50%);color:#fff;font-weight:700;font-size:14px;text-shadow:0 1px 4px rgba(0,0,0,.5)}
.rd-photo-lightbox .rd-plb-close{position:absolute;top:20px;right:24px;width:36px;height:36px;border:0;border-radius:50%;background:rgba(255,255,255,.15);color:#fff;font-size:18px;cursor:pointer;display:flex;align-items:center;justify-content:center}
.rd-photo-lightbox .rd-plb-close:hover{background:rgba(255,255,255,.28)}

/* Quota-pace axis labels (Joseph 2026-08-05) — HTML overlays/rows, not svg
   text, because the pace svg stretches horizontally (preserveAspectRatio:
   none) and would distort glyphs; its height is fixed so px tops align. */
.pace-ylab{position:absolute; left:12px; font-size:9.5px; font-weight:600; color:var(--muted); pointer-events:none; line-height:1;}
.pace-xlabels{display:flex; justify-content:space-between; padding:2px 8px 0; font-size:9px; color:var(--muted);}
.pace-xlabels span{flex:1; text-align:center; overflow:hidden; white-space:nowrap;}
.pace-xlabels span:first-child{text-align:left;}
.pace-xlabels span:last-child{text-align:right;}

/* Internal-only distribution warning strip (Joseph 2026-08-05) — shown at
   the top of any viewer whose asset is flagged not-for-customer-sharing
   (talking points, price sheets, sales guides; assetInternalOnly()). */
.internal-only-banner{flex:none; display:flex; align-items:center; gap:12px; padding:12px 20px; font-size:15px; line-height:1.45; color:#8a3800; background:color-mix(in srgb, var(--orange) 14%, var(--panel)); border-bottom:1px solid color-mix(in srgb, var(--orange) 35%, var(--line));}
.internal-only-banner b{font-weight:800; font-size:16px;}
/* Page-level placement (Price Books) — boxed like the talking-points one. */
.page-head + .internal-only-banner{border:1px solid color-mix(in srgb, var(--orange) 35%, var(--line)); border-radius:10px; margin-bottom:16px;}
:root[data-theme="dark"] .internal-only-banner{color:#ffb474;}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .internal-only-banner{color:#ffb474;} }
.pd-keypoints .internal-only-banner{border:1px solid color-mix(in srgb, var(--orange) 35%, var(--line)); border-radius:9px; margin-bottom:10px;}

/* Anti-flash avatars (Joseph 2026-08-05): the photo/gravatar img starts
   invisible over the initials placeholder and fades in on load; a failed
   load (gravatar d=404 by design) just removes itself — the browser's
   broken-image glyph never paints. */
.av-fade{opacity:0;}
.av-fade.av-in{opacity:1; transition:opacity .15s ease;}
.avatar-sm{position:relative; overflow:hidden;}
.av-wrap{position:relative; display:flex; align-items:center; justify-content:center; width:100%; height:100%; border-radius:50%; overflow:hidden;}
.av-wrap img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;}

/* Content-image anti-flash (Joseph 2026-08-05): cover/thumb/news/product
   images stay invisible until their load event (global capture listener in
   index.html adds .img-in) — a pending or failed src can never paint the
   browser's broken-image glyph. Failed hydrations simply stay transparent. */
img[data-cover-ref], img[data-thumb-ref], img[data-image-ref], .pbook-cover img, .pd-hero img, .mse-cover img, .co-logo-wrap img, .co-detail-logo img, #annViewImg{opacity:0; transition:opacity .18s ease;}
img[data-cover-ref].img-in, img[data-thumb-ref].img-in, img[data-image-ref].img-in, .pbook-cover img.img-in, .pd-hero img.img-in, .mse-cover img.img-in, .co-logo-wrap img.img-in, .co-detail-logo img.img-in, #annViewImg.img-in{opacity:1;}

/* ==== Micro-animations (2026-08-17, Joseph: "implement all 8" from the
   demo round) =============================================================
   Entrance effects are GATED: render() stamps .route-enter on #view only
   when the view identity changes (bare route, or a content route's
   skeleton→content flip) and removes it ~1s later, so in-page re-renders
   (org picker, filters, chat polling) never replay them. The sidebar's
   .nav-anim is likewise stamped by renderSidebar() only when the active
   item actually moved — the sidebar rebuilds on EVERY render(), so keying
   the grow-in off .active alone would replay it constantly. All motion
   here is stilled under prefers-reduced-motion at the bottom. */

/* 1 · active nav item's yellow bar grows in from its center */
.nav-item.active.nav-anim::before{animation:navBarIn .28s cubic-bezier(.22,1,.36,1);}
@keyframes navBarIn{from{transform:scaleY(.2); opacity:0;}}

/* 2 · quota meter sweep — animateMeters() drives the width; this class
   swaps the meter's ordinary .2s width transition for the long sweep */
.meter-fill.meter-sweep{transition:width .7s cubic-bezier(.22,1,.36,1);}

/* 4 · card entrance stagger, delay capped at 6 steps so long pages
   (Analytics, Orders) never feel slowed down */
.route-enter .card{animation:cardRise .25s ease backwards;}
.route-enter .card:nth-child(2){animation-delay:.05s;}
.route-enter .card:nth-child(3){animation-delay:.1s;}
.route-enter .card:nth-child(4){animation-delay:.15s;}
.route-enter .card:nth-child(5){animation-delay:.2s;}
.route-enter .card:nth-child(n+6){animation-delay:.24s;}
@keyframes cardRise{from{opacity:0; transform:translateY(5px);}}

/* 5 · one-pixel hover lift on tiles (one pixel is deliberate — two reads
   as bouncy, not premium) */
.qa-tile, .sec-tile, .lp-tile, .osa-tool-tile{transition:border-color .15s ease, background .15s ease, box-shadow .15s ease, transform .15s ease;}
.qa-tile:hover, .sec-tile:hover, .lp-tile:hover{transform:translateY(-1px); box-shadow:var(--shadow-hover);}
.osa-tool-tile:hover{transform:translateY(-1px);}

/* 6 · sliding indicator for the two whitelisted view switches (Calendar's
   underline tabs + price-sheets' filled pill) — initSlidingToggles() in
   index.html appends .seg-ind and FLIP-animates it between renders. Other
   .seg-toggles (chatter's inline-styled one, the timeline zoom/filter
   groups) are deliberately not wired. */
.seg-toggle.has-ind{position:relative;}
.seg-ind{position:absolute; pointer-events:none;}
.seg-ind-anim{transition:left .22s cubic-bezier(.22,1,.36,1), width .22s cubic-bezier(.22,1,.36,1), top .22s cubic-bezier(.22,1,.36,1);}
.seg-ind-pill{border-radius:7px; background:var(--blue); z-index:0;}
.seg-toggle.has-ind .seg-opt{position:relative; z-index:1;}
.seg-toggle.has-ind > .seg-opt.active{background:transparent;}

/* 7 · Library card thumbnails get a scale-settle on top of the existing
   .img-in opacity fade (hydration decode-complete), scoped to .cyber-thumb
   only — timeline marker thumbs rebuild on every pan/zoom and would
   flicker (vis-timeline internals stay untouched; see the z-index gotcha
   note above the .pt-card block) */
.cyber-thumb[data-thumb-ref]{transform:scale(1.03); transition:opacity .3s ease, transform .3s ease;}
.cyber-thumb[data-thumb-ref].img-in{transform:none;}

/* 8 · announcement pulse is toned down at its definition site (annpulse now
   runs 3 iterations, not infinite — see .ann-line .pulse) */

@media (prefers-reduced-motion: reduce){
  .nav-item.active.nav-anim::before, .route-enter .card, .ann-line .pulse, .chat-row-flash .chat-bubble{animation:none;}
  .meter-fill.meter-sweep, .seg-ind-anim{transition:none;}
  .cyber-thumb[data-thumb-ref]{transform:none; transition:opacity .18s ease;}
  .qa-tile:hover, .sec-tile:hover, .lp-tile:hover, .osa-tool-tile:hover, .ann-line:hover{transform:none;}
}

/* Product Catalog <-> Product Guides (2026-09-25) */
.pbook-guides{display:inline-flex; align-items:center; gap:5px; align-self:flex-start; margin:2px 0 4px; padding:3px 8px; border-radius:999px; font-size:11.5px; font-weight:650; color:var(--green); background:var(--green-soft);}
.pd-guides{margin:14px 0 4px; display:flex; flex-direction:column; gap:10px;}
.pd-guides-group{display:flex; flex-direction:column; gap:4px;}
.pd-guides-type{font-size:11px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--muted);}
.pd-guide{display:flex; align-items:baseline; gap:8px; width:100%; text-align:left; background:var(--panel); border:1px solid var(--line); border-radius:9px; padding:8px 11px; font-size:13px; color:var(--ink); cursor:pointer;}
.pd-guide:hover{border-color:var(--blue); color:var(--blue);}
.pd-guide span{flex:1; min-width:0;}
.pd-guide em{font-style:normal; font-size:11.5px; color:var(--muted); white-space:nowrap;}

/* Touch devices: iOS Safari zooms the page in whenever a focused field's
   text is under 16px and never zooms back out — every search box, filter
   and chat composer here is 13–15px. Pinned to 16px on coarse pointers
   only, so desktop sizing is untouched. !important beats inline sizes. */
@media (pointer: coarse){
  input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]),
  select, textarea{font-size:16px !important;}
}

/* FYI Leads on phones (rep page): the 5–8 column table cut company/email
   off mid-word and hid location/date/status behind a sideways scroll.
   One card per lead instead: name, company + tappable email, then the
   smaller facts on a wrapping line, status picker last. Through portrait
   tablets too: at 820px the Status picker (the one control reps act on)
   was cut off at the table's right edge. */
@media (max-width:900px){
  .fyi-lead-table, .fyi-lead-table tbody{display:block; width:100%;}
  .fyi-lead-table thead{display:none;}
  .fyi-lead-table tr{display:flex; flex-wrap:wrap; align-items:center; gap:4px 12px; padding:12px 2px; border-bottom:1px solid var(--line-soft);}
  .fyi-lead-table td{padding:0 !important; border:none !important; font-size:13.5px;}
  .fyi-lead-table td.fyi-c-name, .fyi-lead-table td.fyi-c-co{flex:1 1 100%; min-width:0; overflow-wrap:anywhere;}
  .fyi-lead-table td.fyi-c-name b{font-size:15px;}
  .fyi-lead-table td.fyi-c-loc, .fyi-lead-table td.fyi-c-firm{color:var(--muted);}
  .fyi-lead-table td[data-label]::before{content:attr(data-label) ' '; color:var(--muted); font-size:12px;}
  .fyi-lead-table td.fyi-c-status{flex:1 1 100%; margin-top:4px;}
}
@media (min-width:641px) and (max-width:900px){
  .fyi-lead-table td.fyi-c-name, .fyi-lead-table td.fyi-c-co{flex:1 1 calc(50% - 12px);}
  .fyi-lead-table td.fyi-c-status{flex:0 0 auto; margin:0 0 0 auto;}
}

/* Touch devices have no ⌘K to press — drop the hint from the search box. */
@media (pointer: coarse){ .gsearch kbd{display:none;} }
/* The search overlay has its own close button; hide WebKit's built-in
   clear (x) so there aren't two x's side by side. */
.gsearch input[type=search]::-webkit-search-cancel-button{-webkit-appearance:none; display:none;}