/* shared/ui/shell.css - module identity and the shared left rail
   (architecture: "Module identity and the left rail", 2026-09-11).

   Served by every module with express.static at /shared/. Plain CSS, no build step.

   The accent per module lives HERE and nowhere in prose ("see shell.css"):
     --accent-hub        Work                  Corporex blue
     --accent-crm        Sales & Leasing CRM   gold - the accent the CRM already uses (--gold)
     --accent-task       Tasks                 orange
     --accent-portfolio  Portfolio             green
     --accent-expenses   Expense               plum
     --accent-build      Build                 magenta (prompt 07, 2026-09-21)
     --accent-people     Directory             leaf green (prompt 08, 2026-09-28)
     --accent-scout      Lead Scout            teal (prompt 12, 2026-09-29)
   logos/<module>.svg carries the same value as the root element's stroke so the favicon
   renders in the accent without CSS; change both when one changes. Every accent was checked
   against the sidebar navy (#0e1f36): all six clear 3:1 as a glyph and as the active-row bar
   (blue 4.9:1, gold 8.4:1, orange 4.6:1, green 6.7:1, plum 5.1:1, magenta 4.7:1). Magenta was
   chosen for Build because it sits in the widest gap left in the wheel - 62 degrees from the
   nearest existing accent (orange), where the five already here sit 24 to 54 degrees apart - so
   the six badges stay apart at 16 px on the navy rail and on the light launcher tile. Leaf green
   (hue 99) was chosen for the Directory (key people) the same way: the widest gap left was the
   117 degrees between gold and green, and it sits 58 and 60 degrees from them; 6.4:1 on the navy.

   Classes
     .cpx-accent-<key>   sets --accent for a badge, row or tile (put it beside the class)
     .cpx-badge          module icon on its accent (.lg for tiles, .solid inverted)
     .cpx-glyph          the <svg> host for a logos/<key>.svg#glyph <use> (or inlined paths)
     .cpx-rail           the NOTIFICATIONS + MODULES container that rail.js renders into
       .cpx-rail-sec .cpx-rail-row .cpx-rail-name .current .cpx-rail-tag
     .cpx-notif          the Notifications section above Modules (prompt 06 A8):
       .cpx-notif-head   header row: bell (.cpx-bell, collapsed only) + title + red .cpx-count
       .cpx-notif-items  up to 5 .cpx-notif-item rows (.cpx-notif-glyph + .cpx-rail-name),
                         or .cpx-notif-empty; then .cpx-notif-all "All notifications"
     .cpx-count          the red unread bubble (hidden at 0)
     .cpx-collapsed      icons-only rail (the CRM's own <=1100px rule also applies, see the
                         media query at the end; rows keep title and aria-label); the
                         Notifications section shrinks to the bell with the count on its corner
     .cpx-foot           bottom of the rail: the .cpx-user menu (the .cpx-inbox placeholder went
                         with prompt 06; the count lives in the Notifications section now)
     .cpx-ribbon         STAGING ribbon: in-flow bar in the rail; .corner = fixed top-left
     .cpx-tiles .cpx-tile   the launcher tiles (hub)
     .cpx-wordmark       the module display name under the Corporex mark                  */

:root{
  --accent-hub:#3987e5;
  --accent-crm:#c8a558;
  --accent-task:#eb6834;
  --accent-portfolio:#1baf7a;
  --accent-expenses:#9085e9;
  --accent-build:#cf5fb2;
  --accent-people:#68b33f;
  --accent-scout:#149fa8;

  --cpx-navy:#0e1f36;
  --cpx-navy-2:#16304f;
  --cpx-rail-ink:#e8e6df;
  --cpx-rail-w:232px;
  --cpx-rail-w-collapsed:64px;
  --cpx-radius:9px;
  --cpx-alert:#d03b3b;
  --accent:var(--accent-hub);
}
.cpx-accent-hub{--accent:var(--accent-hub)}
.cpx-accent-crm{--accent:var(--accent-crm)}
.cpx-accent-task{--accent:var(--accent-task)}
.cpx-accent-portfolio{--accent:var(--accent-portfolio)}
.cpx-accent-expenses{--accent:var(--accent-expenses)}
.cpx-accent-build{--accent:var(--accent-build)}
.cpx-accent-people{--accent:var(--accent-people)}
.cpx-accent-scout{--accent:var(--accent-scout)}

/* ---- glyph + badge ---- */
.cpx-glyph{width:1em;height:1em;display:block;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.cpx-badge{width:26px;height:26px;border-radius:7px;flex:none;display:grid;place-items:center;color:var(--accent);background:color-mix(in srgb,var(--accent) 20%,transparent)}
.cpx-badge .cpx-glyph{width:16px;height:16px}
.cpx-badge.lg{width:48px;height:48px;border-radius:14px}
.cpx-badge.lg .cpx-glyph{width:28px;height:28px}
.cpx-badge.solid{background:var(--accent);color:var(--cpx-navy)}

/* ---- wordmark under the Corporex mark ---- */
.cpx-wordmark{font-size:10.5px;letter-spacing:.22em;color:rgba(232,230,223,.55);text-transform:uppercase;margin-top:3px;display:block}

/* ---- MODULES section (top of the left rail) ---- */
.cpx-rail{padding:0 10px 8px;margin:0 0 6px;border-bottom:1px solid rgba(255,255,255,.08)}
.cpx-rail-sec{font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:rgba(232,230,223,.4);padding:10px 12px 6px;display:flex;align-items:center;gap:8px}
.cpx-rail-row{display:flex;align-items:center;gap:11px;width:100%;padding:7px 10px;border-radius:var(--cpx-radius);color:rgba(232,230,223,.82);font-size:13.5px;font-weight:500;text-decoration:none;margin-bottom:2px;position:relative;box-sizing:border-box}
.cpx-rail-row:hover{background:rgba(255,255,255,.07);color:#fff}
.cpx-rail-row:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.cpx-rail-row.current{background:color-mix(in srgb,var(--accent) 16%,transparent);color:#fff}
.cpx-rail-row.current::before{content:"";position:absolute;left:0;top:7px;bottom:7px;width:3px;border-radius:3px;background:var(--accent)}
.cpx-rail-row.current .cpx-badge{background:var(--accent);color:var(--cpx-navy)}
.cpx-rail-name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cpx-rail-tag{margin-left:auto;font-size:9px;letter-spacing:.16em;color:#fff;background:var(--accent-task);border-radius:4px;padding:2px 5px}

/* ---- NOTIFICATIONS section (above Modules; rail.js polls the module's /api/notifications) ---- */
.cpx-notif{margin:0 0 6px;padding:0 0 6px;border-bottom:1px solid rgba(255,255,255,.08)}
.cpx-notif[hidden]{display:none}
.cpx-notif-head{display:flex;align-items:center;gap:8px;padding:10px 12px 6px;font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:rgba(232,230,223,.4);text-decoration:none;position:relative}
.cpx-notif-head:hover{color:rgba(232,230,223,.75)}
.cpx-notif-head .cpx-bell{display:none;width:18px;height:18px;flex:none;opacity:.8}
.cpx-count{min-width:18px;height:18px;line-height:18px;text-align:center;font-size:11px;font-weight:700;letter-spacing:0;border-radius:9px;padding:0 6px;background:var(--cpx-alert);color:#fff;box-sizing:border-box}
.cpx-count[hidden]{display:none}
.cpx-notif-item{padding:6px 10px;font-size:12.5px;font-weight:400;color:rgba(232,230,223,.78)}
.cpx-notif-item:hover{color:#fff}
.cpx-notif-glyph{flex:none;width:18px;text-align:center;font-size:12px;opacity:.85}
.cpx-notif-empty{padding:4px 12px 6px;font-size:12px;color:rgba(232,230,223,.4)}
.cpx-notif-all{padding:6px 10px;font-size:12px;color:rgba(232,230,223,.6);justify-content:flex-start}
.cpx-notif-all:hover{color:#fff}

/* ---- STAGING ribbon ---- */
.cpx-ribbon{display:block;background:var(--accent-task);color:#fff;text-align:center;font:700 10px/1 system-ui,-apple-system,"Segoe UI",sans-serif;letter-spacing:.24em;text-transform:uppercase;padding:5px 0;margin:0 0 8px}
.cpx-ribbon.corner{position:fixed;top:22px;left:-44px;z-index:600;transform:rotate(-45deg);padding:6px 56px;margin:0;box-shadow:0 2px 8px rgba(0,0,0,.35);pointer-events:none;user-select:none}

/* ---- bottom of the rail: the user menu ---- */
.cpx-foot{margin-top:auto;padding:8px 10px 0;display:flex;flex-direction:column;gap:2px}
.cpx-rail [hidden],.cpx-foot [hidden]{display:none}
.cpx-user{position:relative}
.cpx-user summary{list-style:none;display:flex;align-items:center;gap:11px;padding:7px 10px;border-radius:var(--cpx-radius);color:rgba(232,230,223,.82);font-size:13.5px;font-weight:500;cursor:pointer;user-select:none}
.cpx-user summary::-webkit-details-marker{display:none}
.cpx-user summary::marker{content:""}
.cpx-user summary:hover,.cpx-user[open] summary{background:rgba(255,255,255,.07);color:#fff}
.cpx-user summary:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.cpx-avatar{width:26px;height:26px;border-radius:50%;flex:none;display:grid;place-items:center;font-size:11px;font-weight:700;letter-spacing:.02em;background:var(--accent);color:var(--cpx-navy)}
.cpx-menu{position:absolute;left:0;bottom:calc(100% + 6px);min-width:210px;background:#fff;color:#0b0b0b;border-radius:10px;box-shadow:0 8px 28px rgba(0,0,0,.28);padding:6px;z-index:60}
.cpx-user.top .cpx-menu{left:auto;right:0;bottom:auto;top:calc(100% + 6px)}
.cpx-menu a{display:block;padding:8px 10px;border-radius:7px;color:inherit;text-decoration:none;font-size:13px}
.cpx-menu a:hover{background:#f0efec}
.cpx-menu-head{padding:8px 10px 6px;font-size:11px;color:#898781;border-bottom:1px solid #e1e0d9;margin-bottom:4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
:root[data-theme="dark"] .cpx-menu{background:#1a1a19;color:#fff;box-shadow:0 8px 28px rgba(0,0,0,.6)}
:root[data-theme="dark"] .cpx-menu a:hover{background:#242423}
:root[data-theme="dark"] .cpx-menu-head{border-color:#2c2c2a}

/* ---- collapsed rail: icons only, names as tooltips; Notifications = the bell with its count ---- */
.cpx-collapsed .cpx-rail-sec,.cpx-collapsed .cpx-rail-name,.cpx-collapsed .cpx-rail-tag,.cpx-collapsed .cpx-foot .cpx-user summary span:not(.cpx-avatar){display:none}
.cpx-collapsed .cpx-rail-row,.cpx-collapsed .cpx-foot .cpx-user summary{justify-content:center;padding-left:0;padding-right:0}
.cpx-collapsed .cpx-rail-row.current::before{display:none}
.cpx-collapsed .cpx-ribbon{font-size:8px;letter-spacing:.14em;padding:4px 0}
.cpx-collapsed .cpx-notif-items,.cpx-collapsed .cpx-notif-all,.cpx-collapsed .cpx-notif-title{display:none}
.cpx-collapsed .cpx-notif-head{justify-content:center;padding:8px 0 6px}
.cpx-collapsed .cpx-notif-head .cpx-bell{display:block}
.cpx-collapsed .cpx-notif-head .cpx-count{position:absolute;top:2px;right:calc(50% - 20px);min-width:16px;height:16px;line-height:16px;font-size:10px;padding:0 4px}
@media (max-width:1100px){
  .cpx-rail-sec,.cpx-rail-name,.cpx-rail-tag,.cpx-foot .cpx-user summary span:not(.cpx-avatar){display:none}
  .cpx-rail-row,.cpx-foot .cpx-user summary{justify-content:center;padding-left:0;padding-right:0}
  .cpx-rail-row.current::before{display:none}
  .cpx-rail,.cpx-foot{padding-left:6px;padding-right:6px}
  .cpx-rail .cpx-ribbon{font-size:8px;letter-spacing:.14em;padding:4px 0}
  .cpx-notif-items,.cpx-notif-all,.cpx-notif-title{display:none}
  .cpx-notif-head{justify-content:center;padding:8px 0 6px}
  .cpx-notif-head .cpx-bell{display:block}
  .cpx-notif-head .cpx-count{position:absolute;top:2px;right:calc(50% - 20px);min-width:16px;height:16px;line-height:16px;font-size:10px;padding:0 4px}
}

/* ---- launcher tiles (hub) ---- */
.cpx-tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:18px}
.cpx-tile{display:flex;flex-direction:column;gap:12px;min-height:170px;padding:22px 22px 18px;border-radius:14px;background:#fcfcfb;border:1px solid #e1e0d9;border-top:4px solid var(--accent);color:#0b0b0b;text-decoration:none;box-shadow:0 1px 2px rgba(14,31,54,.06),0 4px 16px rgba(14,31,54,.07);transition:transform .12s,box-shadow .12s}
.cpx-tile:hover{transform:translateY(-2px);box-shadow:0 2px 4px rgba(14,31,54,.08),0 10px 28px rgba(14,31,54,.12)}
.cpx-tile:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.cpx-tile h3{font-size:16px;font-weight:650;margin:0;line-height:1.3}
.cpx-tile p{font-size:12.5px;color:#52514e;margin:0;overflow-wrap:anywhere}
.cpx-tile-level{margin-top:auto;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);font-weight:700}
