/* ============================================================
   PURE Left Bar — reusable navigation rail
   Consumed by: PURE Left Bar.html (kit) and PURE App Shell.html
   All classes namespaced .plb-* to avoid collisions.
   Two modes (data-mode="light|dark"), two displays (data-display="desktop|mobile").
   Minimal rail (68px) is the resting state; on hover it expands to a label
   overlay that floats ABOVE page content (never pushes it). A section that
   owns sub-items reveals a persistent second column that widens the bar.
   ============================================================ */

.plb,*[class^="plb-"],*[class*=" plb-"]{box-sizing:border-box}

.plb{
  /* tokens — light is the default theme */
  --plb-rail:68px;          /* collapsed rail width */
  --plb-rail-open:248px;    /* expanded (hover) rail width */
  --plb-sub:236px;          /* subsection column width */
  --plb-row:52px;           /* item height */
  --plb-navy:#172e55;
  --plb-gold:#dccaaf;
  --plb-red:#ed1c24;

  --plb-bg:#ffffff;
  --plb-fg:#172e55;
  --plb-muted:#8e8e8e;
  --plb-hover:#f5f5f5;
  --plb-sel-bg:#dccaaf;
  --plb-sel-fg:#172e55;
  --plb-notch:#f5f5f5;
  --plb-border:#e3ddd2;
  --plb-sub-bg:#f5f5f5;
  --plb-sub-hover:rgba(23,46,85,.06);
  --plb-sub-head:#847969;
  --plb-shadow:5px 0 18px rgba(10,22,45,.10);
  --plb-ease:cubic-bezier(.2,.7,.2,1);

  position:relative;
  display:flex;
  align-items:stretch;
  font-family:"Open Sans",system-ui,sans-serif;
  color:var(--plb-fg);
  min-height:100%;
}
.plb[data-mode="dark"]{
  --plb-bg:#172e55;
  --plb-fg:rgba(255,255,255,.82);
  --plb-muted:rgba(255,255,255,.42);
  --plb-hover:rgba(255,255,255,.07);
  --plb-sel-bg:#dccaaf;
  --plb-sel-fg:#172e55;
  --plb-notch:#0e1c33;
  --plb-border:rgba(255,255,255,.10);
  --plb-sub-bg:#a2abbb;
  --plb-sub-hover:rgba(23,46,85,.12);
  --plb-sub-head:#172e55;
  --plb-shadow:6px 0 22px rgba(0,0,0,.34);
}

/* ---- reserved gutter so the absolutely-positioned rail keeps its footprint ---- */
.plb-railspace{flex:0 0 var(--plb-rail);width:var(--plb-rail)}

/* ============================ RAIL ============================ */
.plb-rail{
  position:absolute;top:0;left:0;bottom:0;z-index:8;
  width:var(--plb-rail);
  background:var(--plb-bg);
  border-right:1px solid var(--plb-border);
  display:flex;flex-direction:column;
  overflow:hidden;
  transition:width .2s var(--plb-ease),box-shadow .2s var(--plb-ease);
}
.plb-rail:hover,
.plb[data-pinned="1"] .plb-rail{
  width:var(--plb-rail-open);
  box-shadow:var(--plb-shadow);
}
/* when the bar is forced open (extended specimens / pinned) */
.plb[data-expand="1"] .plb-rail{width:var(--plb-rail-open)}

/* JS hover-bridge: stays open while cursor is over the rail OR the overlay subpanel */
.plb.is-over .plb-rail{width:var(--plb-rail-open);box-shadow:var(--plb-shadow)}
.plb.is-over .plb-word,
.plb.is-over .plb-lbl,
.plb.is-over .plb-caret,
.plb.is-over .plb-pmeta{opacity:1}
.plb.is-over .plb-item::before{right:14px;width:auto;border-radius:24px}

/* brand cap — PURE mark when collapsed, horizontal lockup when expanded (cross-fade) */
.plb-cap{
  position:relative;height:60px;flex:none;display:flex;align-items:center;
  border-bottom:1px solid var(--plb-border);
}
.plb-cap .plb-logo-mark{
  width:40px;margin-left:14px;height:28px;flex:none;display:block;
  object-fit:contain;object-position:center;
  transition:opacity .16s var(--plb-ease);
}
.plb-cap .plb-logo-full{
  position:absolute;left:16px;top:50%;transform:translateY(-50%);
  height:32px;width:auto;display:block;
  opacity:0;pointer-events:none;transition:opacity .16s var(--plb-ease) .04s;
}
.plb-rail:hover .plb-logo-mark,
.plb.is-over .plb-logo-mark,
.plb[data-expand="1"] .plb-logo-mark{opacity:0}
.plb-rail:hover .plb-logo-full,
.plb.is-over .plb-logo-full,
.plb[data-expand="1"] .plb-logo-full{opacity:1}

/* sections list */
.plb-list{
  flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;
  padding:10px 0;display:flex;flex-direction:column;gap:2px;
  scrollbar-width:thin;
}
.plb-list::-webkit-scrollbar{width:6px}
.plb-list::-webkit-scrollbar-thumb{background:var(--plb-border);border-radius:8px}

/* ---- a single nav item (section or sub) ---- */
.plb-item{
  position:relative;flex:none;
  height:var(--plb-row);width:100%;
  display:flex;align-items:center;gap:12px;
  padding:0 16px 0 0;
  border:0;background:transparent;cursor:pointer;
  color:var(--plb-fg);font-family:inherit;font-size:14px;text-align:left;
  text-decoration:none;
}
.plb-ic{
  flex:none;width:40px;margin-left:14px;
  display:flex;align-items:center;justify-content:center;
  height:40px;border-radius:50%;
  transition:background .15s var(--plb-ease);
}
.plb-ic svg{width:24px;height:24px;display:block;color:var(--plb-fg);stroke:currentColor}
.plb-ic>.lb-ic{background:var(--plb-fg)}
/* library icon INSTANCES (CSS-mask spans) occupy the same box as the sprite <svg> */
.plb-ic>.lb-ic{background:var(--plb-fg)}
.plb-ic>.lb-ic{width:24px;height:24px;display:block;flex:none}
/* the dots glyph is 4x16 — keep its slim ratio instead of stretching it to the square */

/* other icon slots that now hold library instances get the box their <svg> had */
.plb-rowact-ic>.lb-ic{width:16px;height:16px;display:block;flex:none}
.plb-actic>.lb-ic{width:16px;height:16px;display:block;flex:none}
.plb-mseg>.lb-ic{width:16px;height:16px;display:block;flex:none}
.plb-mode-single>.lb-ic{width:20px;height:20px;display:block;flex:none}
.plb-botrow .plb-mode-single>.lb-ic{width:19px;height:19px}
.plb-actbtn .plb-ic>.lb-ic{width:20px;height:20px}
.plb-ic,.plb-lbl,.plb-caret{position:relative;z-index:2}
.plb-lbl{
  flex:1 1 auto;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  opacity:0;transition:opacity .14s var(--plb-ease);
  font-weight:500;
}
.plb-rail:hover .plb-lbl,
.plb[data-expand="1"] .plb-lbl{opacity:1}
.plb-caret{flex:none;width:16px;height:16px;color:var(--plb-muted);opacity:0;transition:opacity .14s var(--plb-ease)}
.plb-rail:hover .plb-caret,
.plb[data-expand="1"] .plb-caret{opacity:1}

/* ---- per-row kebab (three dots) — revealed on row hover in the extended rail ---- */
.plb-kebab{
  flex:none;position:relative;z-index:3;
  margin-left:auto;width:28px;height:28px;
  display:flex;align-items:center;justify-content:center;
  border:0;background:transparent;border-radius:7px;cursor:pointer;
  color:var(--plb-muted);opacity:0;pointer-events:none;
  transition:opacity .12s var(--plb-ease),background .12s var(--plb-ease),color .12s var(--plb-ease);
}
.plb-kebab-dots{display:flex;flex-direction:column;align-items:center;gap:2.5px}
.plb-kebab-dots i{width:3.2px;height:3.2px;border-radius:50%;background:currentColor;display:block}
.plb-kebab:hover{background:var(--plb-hover);color:var(--plb-navy)}
.plb[data-mode="dark"] .plb-kebab:hover{color:#fff}
/* show on hover / focus of the row, only when the rail is extended; keep shown while its menu is open */
.plb-rail:hover .plb-item:hover .plb-kebab,
.plb-rail:hover .plb-item:focus-within .plb-kebab,
.plb[data-expand="1"] .plb-item:hover .plb-kebab,
.plb[data-expand="1"] .plb-item:focus-within .plb-kebab,
.plb-sub-item:hover .plb-kebab,
.plb-sub-item:focus-within .plb-kebab,
.plb-kebab[aria-expanded="true"]{opacity:1;pointer-events:auto}

/* ---- floating action menu (Pin / Add / Remove) ---- */
.plb-rowmenu{
  position:fixed;z-index:140;min-width:152px;
  background:#fff;border:1px solid rgba(0,0,0,.06);border-radius:10px;
  box-shadow:0 10px 28px rgba(0,0,0,.16);
  display:flex;flex-direction:column;
}
.plb-rowmenu[hidden]{display:none}

.plb-rowact{
  display:flex;align-items:center;gap:11px;width:100%;
  border:0;cursor:pointer;
  font-family:inherit;font-size:14px;font-weight:500;text-align:left;
}

.plb-rowact-ic{flex:none;width:16px;height:16px;display:flex;align-items:center;justify-content:center}
.plb-rowact-ic svg{width:16px;height:16px;display:block}



/* the rounded backing that becomes a pill when expanded */
.plb-item::before{
  content:"";position:absolute;z-index:1;pointer-events:none;
  left:14px;top:6px;width:40px;height:40px;border-radius:50%;
  background:transparent;
  transition:background .15s var(--plb-ease),right .2s var(--plb-ease),border-radius .2s var(--plb-ease);
  right:auto;
}
/* hover state (.is-hover mirrors :hover for static specimens) */
.plb-item:hover::before,
.plb-item.is-hover::before{background:var(--plb-hover)}
.plb-rail:hover .plb-item::before,
.plb[data-expand="1"] .plb-item::before{
  right:14px;width:auto;border-radius:24px;
}

/* selected */
.plb-item.is-sel{color:var(--plb-sel-fg)}
.plb-item.is-sel .plb-ic svg{color:var(--plb-sel-fg)}
.plb-item.is-sel .plb-ic>.lb-ic{background:var(--plb-sel-fg)}
.plb-item.is-sel .plb-ic{color:var(--plb-sel-fg)}
.plb-item.is-sel::before{background:var(--plb-sel-bg)}
.plb-item.is-sel:hover::before,
.plb-item.is-sel.is-hover::before{background:var(--plb-sel-bg);filter:brightness(.97)}
.plb-item.is-sel .plb-caret{color:var(--plb-sel-fg)}

/* connector — gray (panel-colored) frame behind every selected section pill. 6px padding
   on left/top/bottom (left:8 = 6px left of the gold circle's 14px edge), rounded 24px on
   the left, flat on the right and running to the end of the rail column. Same shape in all
   states; shown for selected sections with or without subsections. */
.plb-conn{
  position:absolute;z-index:0;pointer-events:none;
  left:8px;top:0;bottom:0;right:0;
  background:var(--plb-sub-bg);
  border-radius:24px 0 0 24px;
  opacity:0;transition:opacity .18s var(--plb-ease);
}
/* always shown behind any selected section — with or without subsections */
.plb-item.is-sel .plb-conn{opacity:1}

/* ---- quick-actions kebab + dropdown — sits below the theme toggle, above the footer ---- */
.plb-actions{flex:none;position:relative;padding:2px 0}
.plb-actbtn:not([data-cmp-instance]){height:46px}
.plb-actbtn .plb-ic{height:36px;width:40px}
.plb-actbtn .plb-ic svg{width:20px;height:20px}
.plb-actbtn::before{top:5px;height:36px}
.plb-actmenu{
  position:absolute;left:14px;right:auto;width:212px;bottom:50px;z-index:30;
  background:#fff;border:1px solid var(--plb-border);border-radius:12px;
  box-shadow:var(--plb-shadow);
  opacity:0;visibility:hidden;transform:translateY(8px);transform-origin:bottom left;
  transition:opacity .15s var(--plb-ease),transform .15s var(--plb-ease),visibility .15s;
}

.plb-actions.is-open .plb-actmenu{opacity:1;visibility:visible;transform:none}
.plb-actitem{width:100%;display:flex;align-items:center;gap:12px;border:0;cursor:pointer;font-family:inherit;text-align:left}

.plb-actitem.plb-danger:not([data-cmp-instance]){color:var(--plb-red)}
.plb-actic{flex:none;width:16px;height:16px;display:flex;align-items:center;justify-content:center;color:var(--plb-navy)}

.plb[data-mode="dark"] .plb-actic{color:#fff}
.plb-actic svg{width:16px;height:16px;color:currentColor;stroke:currentColor}
.plb-actempty{padding:6px 10px 8px;font-size:12px;color:var(--plb-muted);font-style:italic}

/* ---- theme toggle — aligned to the icon gutter; single icon at rest, labeled sun|moon segmented when open ---- */
.plb-mode{flex:none;display:flex;align-items:center;padding:2px 14px}
.plb-mode-seg{display:none;flex:1;min-width:0;align-items:center;gap:4px;padding:4px;border-radius:22px;background:var(--plb-hover)}
.plb-mseg{flex:1;min-width:0;height:32px;border:0;background:transparent;border-radius:18px;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:7px;color:var(--plb-muted);font-family:inherit;font-size:12.5px;font-weight:600;transition:background .15s,color .15s}
.plb-mseg svg{width:16px;height:16px;flex:none}
.plb-mseg span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.plb[data-mode="light"] .plb-mseg[data-set-mode="light"]{background:#fff;color:var(--plb-navy);box-shadow:0 1px 2px rgba(0,0,0,.14)}
.plb[data-mode="dark"]  .plb-mseg[data-set-mode="dark"]{background:rgba(255,255,255,.16);color:#fff}
.plb-mode-single{flex:none;display:flex;align-items:center;justify-content:center;width:40px;height:40px;border:0;border-radius:50%;cursor:pointer;background:transparent;color:var(--plb-fg)}
.plb-mode-single svg{width:20px;height:20px}
.plb-mode-single:hover{background:var(--plb-hover)}
.plb-rail:hover .plb-mode-seg,
.plb.is-over .plb-mode-seg,
.plb[data-expand="1"] .plb-mode-seg{display:flex}
.plb-rail:hover .plb-mode-single,
.plb.is-over .plb-mode-single,
.plb[data-expand="1"] .plb-mode-single{display:none}

/* ---- compact utility cluster: theme toggle + Quick Actions share one row ---- */
.plb-botrow{
  flex:none;display:flex;align-items:center;
  border-top:1px solid var(--plb-border);padding:4px 0;
}
.plb-botrow > .plb-mode,
.plb-botrow > .plb-actions{
  flex:1;min-width:0;display:flex;align-items:center;justify-content:center;padding:0;
}
.plb-botrow .plb-mode-single{width:34px;height:34px}
.plb-botrow .plb-mode-single svg{width:19px;height:19px}
.plb-botrow .plb-actbtn:not([data-pure-variant]):not([data-cmp-instance]){height:40px;width:100%;padding:0;justify-content:center;gap:0}
.plb-botrow .plb-actbtn[data-pure-variant]{width:100%;justify-content:center}
.plb-botrow .plb-actbtn .plb-ic{margin-left:0;width:34px;height:34px}
.plb-botrow .plb-actbtn .plb-lbl{display:none}
.plb-botrow .plb-actbtn::before{left:50%;right:auto;top:50%;width:38px;height:38px;
  transform:translate(-50%,-50%);border-radius:50%}
/* expanded — theme toggle shows the full labelled Light Mode | Dark Mode segmented control */
.plb-rail:hover .plb-botrow > .plb-mode,
.plb.is-over .plb-botrow > .plb-mode,
.plb[data-expand="1"] .plb-botrow > .plb-mode{padding:0 14px}
.plb-botrow .plb-mode-seg{flex:1;min-width:0;width:auto;gap:4px}
.plb-botrow .plb-mseg{flex:1;min-width:0;width:auto;height:32px;padding:0 6px;gap:7px}
.plb-botrow .plb-mseg span{display:inline}

/* ---- footer cluster — Settings + Sign out stacked vertically ---- */
.plb-foot{
  flex:none;border-top:1px solid var(--plb-border);
  padding:4px 0;display:flex;flex-direction:column;align-items:stretch;gap:0;
}
.plb-foot .plb-item{flex:none;width:100%;min-width:0;height:42px;justify-content:center;padding:0;gap:7px}
.plb-foot .plb-ic{margin-left:0;width:34px;height:34px}
.plb-foot .plb-lbl{display:none;flex:none}
.plb-rail:hover .plb-foot .plb-lbl,
.plb.is-over .plb-foot .plb-lbl,
.plb[data-expand="1"] .plb-foot .plb-lbl{display:block;opacity:1}
.plb-foot .plb-item::before{left:50%;right:auto;top:5px;width:38px;height:36px;
  transform:translateX(-50%);border-radius:50%}
.plb-rail:hover .plb-foot .plb-item::before,
.plb.is-over .plb-foot .plb-item::before,
.plb[data-expand="1"] .plb-foot .plb-item::before{left:8px;right:8px;width:auto;transform:none;border-radius:10px}
.plb-item.plb-danger:not([data-cmp-instance]){color:var(--plb-red)}
.plb-item.plb-danger:not([data-cmp-instance]) .plb-ic svg{color:var(--plb-red)}
.plb-item.plb-danger:not([data-cmp-instance]) .plb-ic>.lb-ic{background:var(--plb-red)}
.plb-item.plb-danger:hover::before{background:rgba(237,28,36,.10)}

/* ============ bottom-cluster buttons → library treatments ============ */
/* Quick Actions + Settings = Button Set 2 (secondary) · Sign out = Destructive · Normal */

/* Quick Actions — Set 2, filled in both states (alone on its row, so it fits collapsed) */
.plb-actions{padding:6px 14px}
.plb-actbtn:not([data-pure-variant]):not([data-cmp-instance]){height:38px;border-radius:5px;padding:0 10px;gap:10px;
  background:#e0e0e0;color:#172e55;justify-content:center;border:1px solid transparent}
.plb-actbtn::before{display:none}
.plb-actbtn .plb-ic{margin-left:0;width:22px;height:22px;background:transparent}
.plb-actbtn .plb-ic svg{width:20px;height:20px;color:#172e55;stroke:#172e55}
.plb-actbtn .plb-ic>.lb-ic{background:#172e55}
.plb-actbtn .plb-lbl{font-size:12.5px;font-weight:400;display:none}
.plb-actbtn:hover{background:#bfbfbf}
.plb-rail:hover .plb-actbtn,
.plb.is-over .plb-actbtn,
.plb[data-expand="1"] .plb-actbtn{justify-content:flex-start}
.plb-rail:hover .plb-actbtn .plb-lbl,
.plb.is-over .plb-actbtn .plb-lbl,
.plb[data-expand="1"] .plb-actbtn .plb-lbl{display:block}

/* Footer — Settings (Set 2) + Sign out (Destructive Normal). Fills show when the rail
   is open; collapsed stays as tinted icons (two pills won't fit a 68px rail). */
.plb-foot{padding:6px 14px;gap:10px}
/* height + padding are the button mother's (Secondary Default: padding 6px 10px) —
   the rail must not pin them, or the mother's padding reads as no padding at all */
.plb-foot .plb-item{border-radius:5px;gap:8px;border:1px solid transparent;justify-content:center}
.plb-foot .plb-ic{margin-left:0;width:22px;height:22px;background:transparent}
.plb-foot .plb-ic svg{width:20px;height:20px}
.plb-foot .plb-lbl{font-size:12.5px;font-weight:400}
.plb-foot .plb-item:not(.plb-danger){background:#e0e0e0;color:#172e55}
.plb-foot .plb-item:not(.plb-danger):hover{background:#bfbfbf}
.plb-foot .plb-item:not(.plb-danger) .plb-ic svg{color:#172e55;stroke:#172e55}
.plb-foot .plb-item:not(.plb-danger) .plb-ic>.lb-ic{background:#172e55}
.plb-foot .plb-item.plb-danger .plb-ic svg{color:#ff5151;stroke:#ff5151}
.plb-foot .plb-item.plb-danger .plb-ic>.lb-ic{background:#ff5151}
/* expanded → real library buttons */
.plb-rail:hover .plb-foot .plb-item,
.plb.is-over .plb-foot .plb-item,
.plb[data-expand="1"] .plb-foot .plb-item{justify-content:flex-start}
.plb-rail:hover .plb-foot .plb-item::before,
.plb.is-over .plb-foot .plb-item::before,
.plb[data-expand="1"] .plb-foot .plb-item::before{display:none}
.plb-rail:hover .plb-foot .plb-item:not(.plb-danger),
.plb.is-over .plb-foot .plb-item:not(.plb-danger),
.plb[data-expand="1"] .plb-foot .plb-item:not(.plb-danger){background:#e0e0e0;color:#172e55}
.plb-rail:hover .plb-foot .plb-item:not(.plb-danger):hover,
.plb.is-over .plb-foot .plb-item:not(.plb-danger):hover,
.plb[data-expand="1"] .plb-foot .plb-item:not(.plb-danger):hover{background:#bfbfbf}
.plb-rail:hover .plb-foot .plb-item.plb-danger,
.plb.is-over .plb-foot .plb-item.plb-danger,
.plb[data-expand="1"] .plb-foot .plb-item.plb-danger{background:#fff;color:#ff5151;border-color:#ff5151}
.plb-rail:hover .plb-foot .plb-item.plb-danger:hover,
.plb.is-over .plb-foot .plb-item.plb-danger:hover,
.plb[data-expand="1"] .plb-foot .plb-item.plb-danger:hover{background:#ff5151;color:#fff;border-color:#ed1c24}
.plb-rail:hover .plb-foot .plb-item.plb-danger:hover .plb-ic svg,
.plb.is-over .plb-foot .plb-item.plb-danger:hover .plb-ic svg,
.plb[data-expand="1"] .plb-foot .plb-item.plb-danger:hover .plb-ic svg{color:#fff;stroke:#fff}
.plb-rail:hover .plb-foot .plb-item.plb-danger:hover .plb-ic>.lb-ic,
.plb.is-over .plb-foot .plb-item.plb-danger:hover .plb-ic>.lb-ic,
.plb[data-expand="1"] .plb-foot .plb-item.plb-danger:hover .plb-ic>.lb-ic{background:#fff}

/* dark mode equivalents */
.plb[data-mode="dark"] .plb-actbtn:not([data-pure-variant]):not([data-cmp-instance]){background:rgba(255,255,255,.10);color:#fff}
.plb[data-mode="dark"] .plb-actbtn:not([data-pure-variant]):not([data-cmp-instance]) .plb-ic svg{color:#fff;stroke:#fff}
.plb[data-mode="dark"] .plb-actbtn:not([data-pure-variant]):not([data-cmp-instance]) .plb-ic>.lb-ic{background:#fff}
.plb[data-mode="dark"] .plb-actbtn:not([data-pure-variant]):not([data-cmp-instance]):hover{background:rgba(255,255,255,.18)}
.plb[data-mode="dark"] .plb-foot .plb-item:not([data-pure-variant]):not([data-cmp-instance]):not(.plb-danger){background:rgba(255,255,255,.10);color:#fff}
.plb[data-mode="dark"] .plb-foot .plb-item:not([data-pure-variant]):not([data-cmp-instance]):not(.plb-danger):hover{background:rgba(255,255,255,.18)}
.plb[data-mode="dark"] .plb-foot .plb-item:not(.plb-danger):not([data-pure-variant]):not([data-cmp-instance]) .plb-ic svg{color:#fff;stroke:#fff}
.plb[data-mode="dark"] .plb-foot .plb-item:not(.plb-danger):not([data-pure-variant]):not([data-cmp-instance]) .plb-ic>.lb-ic{background:#fff}
.plb[data-mode="dark"] .plb-rail:hover .plb-foot .plb-item:not(.plb-danger),
.plb[data-mode="dark"] .plb[data-expand="1"] .plb-foot .plb-item:not([data-pure-variant]):not([data-cmp-instance]):not(.plb-danger){background:rgba(255,255,255,.10);color:#fff}
.plb[data-mode="dark"] .plb-rail:hover .plb-foot .plb-item:not(.plb-danger):hover,
.plb[data-mode="dark"] .plb[data-expand="1"] .plb-foot .plb-item:not([data-pure-variant]):not([data-cmp-instance]):not(.plb-danger):hover{background:rgba(255,255,255,.18)}
.plb[data-mode="dark"] .plb-rail:hover .plb-foot .plb-item.plb-danger,
.plb[data-mode="dark"] .plb[data-expand="1"] .plb-foot .plb-item:not([data-pure-variant]):not([data-cmp-instance]).plb-danger{background:transparent}

/* dropdown: escape the rail's overflow clip so a tall menu isn't cut off */
.plb-rail:has(.plb-actions.is-open){overflow:visible}

/* profile row */
.plb-profile{
  display:flex;align-items:center;gap:12px;height:56px;flex:none;
  padding:0 16px 0 0;border-top:1px solid var(--plb-border);
}
.plb-av{
  flex:none;width:40px;height:40px;margin-left:14px;border-radius:50%;
  background:var(--plb-gold);color:var(--plb-navy);
  display:flex;align-items:center;justify-content:center;
  font-weight:700;font-size:13px;font-family:"Open Sans",sans-serif;
}
.plb-pmeta{min-width:0;opacity:0;transition:opacity .14s var(--plb-ease)}
.plb-rail:hover .plb-pmeta,.plb[data-expand="1"] .plb-pmeta{opacity:1}
.plb-pmeta .plb-pn{font-size:13px;font-weight:600;color:var(--plb-fg);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.plb-pmeta .plb-pr{font-size:11px;color:var(--plb-muted);white-space:nowrap;text-transform:uppercase;letter-spacing:.06em}

/* ============================ SUBPANEL (hover overlay) ============================ */
.plb-subpanel{
  position:absolute;top:0;bottom:0;left:var(--plb-rail);
  width:var(--plb-sub);
  background:var(--plb-sub-bg);
  border-right:1px solid var(--plb-border);
  box-shadow:var(--plb-shadow);
  display:flex;flex-direction:column;min-height:0;
  z-index:7;
  opacity:0;pointer-events:none;transform:translateX(-10px);
  transition:opacity .18s var(--plb-ease),transform .18s var(--plb-ease),left .2s var(--plb-ease);
}
.plb.is-over[data-subopen="1"] .plb-subpanel,
.plb[data-expand="1"][data-subopen="1"] .plb-subpanel{
  opacity:1;pointer-events:auto;transform:none;left:var(--plb-rail-open);
}
/* remove the drop-shadow seam between the rail and the subsection column when open
   (the subpanel carries the outer float shadow) */
.plb.is-over[data-subopen="1"] .plb-rail,
.plb[data-expand="1"][data-subopen="1"] .plb-rail{box-shadow:none}
.plb-sub-head{
  height:60px;flex:none;display:flex;align-items:center;
  padding:0 20px;border-bottom:1px solid var(--plb-border);
  font-family:"Open Sans",sans-serif;font-weight:700;font-size:13px;
  letter-spacing:.05em;text-transform:uppercase;color:var(--plb-sub-head);
}
.plb-sub-list{
  flex:1 1 auto;min-height:0;overflow-y:auto;padding:12px 12px;
  display:flex;flex-direction:column;gap:2px;
}
.plb-sub-item{
  flex:none;display:flex;align-items:center;gap:11px;
  height:44px;padding:0 14px;border-radius:24px;
  border:0;background:transparent;cursor:pointer;text-decoration:none;
  color:var(--plb-fg);font-family:inherit;font-size:13.5px;font-weight:500;text-align:left;
}
.plb-sub-item .plb-dot{flex:none;width:7px;height:7px;border-radius:50%;background:var(--plb-muted);opacity:.6}
.plb-sub-item:hover,
.plb-sub-item.is-hover{background:var(--plb-sub-hover)}
.plb-sub-item.is-sel{background:var(--plb-sel-bg);color:var(--plb-sel-fg);font-weight:600}
.plb-sub-item.is-sel .plb-dot{background:var(--plb-navy);opacity:1}
/* dark mode: the subsection panel is a light blue-gray (#A2ABBB) per design — text rides navy */
.plb[data-mode="dark"] .plb-sub-item{color:#172e55}
.plb[data-mode="dark"] .plb-sub-item .plb-dot{background:#172e55;opacity:.55}
.plb[data-mode="dark"] .plb-sub-item.is-sel{color:var(--plb-sel-fg)}
.plb[data-mode="dark"] .plb-sub-item.is-sel .plb-dot{background:#172e55;opacity:1}

/* ============================ MOBILE ============================ */
.plb[data-display="mobile"]{flex-direction:column;width:360px;max-width:100%}
.plb[data-display="mobile"] .plb-railspace{display:none}
.plb[data-display="mobile"] .plb-rail{
  position:static;width:100%;flex-direction:column;
  border-right:0;box-shadow:none;
}
.plb[data-display="mobile"] .plb-rail:hover{width:100%;box-shadow:none}
.plb[data-display="mobile"] .plb-word,
.plb[data-display="mobile"] .plb-lbl,
.plb[data-display="mobile"] .plb-caret,
.plb[data-display="mobile"] .plb-pmeta{opacity:1}
.plb[data-display="mobile"] .plb-item::before{right:14px;width:auto;border-radius:24px}
.plb[data-display="mobile"] .plb-topbar{
  height:44px;flex:none;display:flex;align-items:center;gap:10px;padding:0 10px;
  background:var(--plb-navy);
}
.plb[data-display="mobile"] .plb-burger{
  width:24px;height:24px;border-radius:6px;background:#e0e0e0;border:0;cursor:pointer;
  display:flex;align-items:center;justify-content:center;color:var(--plb-navy);
}
.plb[data-display="mobile"] .plb-burger svg{width:16px;height:16px}
.plb[data-display="mobile"] .plb-mtitle{
  flex:1;text-align:center;color:#fff;font-family:"Open Sans",sans-serif;font-weight:700;
  font-size:13px;letter-spacing:.04em;
}
.plb[data-display="mobile"] .plb-mav{
  width:24px;height:24px;border-radius:50%;background:var(--plb-gold);color:var(--plb-navy);
  display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;font-family:"Open Sans",sans-serif;
}
.plb-msearch{flex:none;display:flex;align-items:center;gap:8px;margin:10px;padding:7px 11px;
  border:1px solid #bfbfbf;border-radius:24px;background:#fff;color:var(--plb-muted)}
.plb[data-mode="dark"] .plb-msearch{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.18)}
.plb-msearch svg{width:15px;height:15px;flex:none}
.plb-msearch span{font-size:13px}
/* mobile subsections render as an inline accordion under the active section */
.plb-msubs{display:flex;flex-direction:column;gap:2px;padding:2px 0 8px 0;background:var(--plb-hover)}
.plb-msubs .plb-sub-item{margin:0 12px 0 40px}

/* desktop hides mobile-only chrome */
.plb[data-display="desktop"] .plb-topbar,
.plb[data-display="desktop"] .plb-msearch,
.plb[data-display="desktop"] .plb-msubs{display:none}

/* reduced motion */
@media (prefers-reduced-motion: reduce){
  .plb *{transition:none !important}
}

/* the dots glyph is a 4x16 vector — keep its slim ratio in every slot (declared last,
   and scoped to beat .plb-actbtn .plb-ic>.lb-ic on both specificity and order) */
.plb .plb-ic>.lb-ic[data-mother-icon$="action-button.svg"],
.plb .plb-actbtn .plb-ic>.lb-ic[data-mother-icon$="action-button.svg"]{width:6px}

/* the rail's collapsed slot is 34px; scale the 40px mother instance to fit it
   WITHOUT changing the mother's own geometry */
.plb-mode-single .modetog--small{transform:scale(.85);transform-origin:center}

/* footer buttons are button-mother INSTANCES: the mother's Default (written inline)
   owns colour/background/border, so the rail must not repaint them. Only the icon
   follows the button's own colour. */
.plb-foot .plb-item[data-cmp-instance]{color:inherit}
.plb-foot .plb-item[data-cmp-instance] .plb-ic>.lb-ic{background:currentColor}

/* PURE.buttons instances in the rail keep the BUTTON mother's 16px icon,
   not the rail's nav-row icon size — declared last so it wins on order */
.plb [data-pure-variant] .plb-ic>.lb-ic,
.plb .plb-actbtn .plb-ic>.lb-ic{width:16px;height:16px}
.plb [data-pure-variant] .plb-ic>.lb-ic[data-mother-icon$="action-button.svg"],
.plb .plb-actbtn .plb-ic>.lb-ic[data-mother-icon$="action-button.svg"]{width:4px;height:16px}
.plb .plb-foot .plb-item[data-pure-variant] .plb-ic>.lb-ic{width:16px;height:16px}

/* mask-instance paint for every icon slot (base, then state) */
.plb-actic>.lb-ic,
.plb-rowact-ic>.lb-ic,
.plb-mseg>.lb-ic,
.plb-mode-single>.lb-ic{background:var(--plb-navy,#172e55)}
.plb[data-mode="dark"] .plb-mseg>.lb-ic,
.plb[data-mode="dark"] .plb-mode-single>.lb-ic{background:#fff}
.plb-actitem.plb-danger .plb-actic>.lb-ic{background:var(--plb-red,#ed1c24)}

/* ---- Quick Actions + Settings + Sign Out: the BUTTON MOTHER owns the box ----
   The rail used to pin height (46/42px) and an oversized icon slot, so the mother's
   Secondary Default padding (6px top/bottom, 10px left/right) had no visible effect.
   Instances now size from content + that padding. */
.plb-actbtn[data-cmp-instance],
.plb-foot .plb-item[data-cmp-instance]{height:auto;min-height:0}
.plb-botrow .plb-actbtn[data-cmp-instance] .plb-ic,
.plb-actbtn[data-cmp-instance] .plb-ic,
.plb-foot .plb-item[data-cmp-instance] .plb-ic{width:20px;height:20px;margin-left:0}
.plb-actbtn[data-cmp-instance] .plb-ic svg,
.plb-foot .plb-item[data-cmp-instance] .plb-ic svg{width:20px;height:20px}