.cn-select { --sel-fg:var(--cream); --sel-bg:var(--paper); --sel-bd:var(--bd);
    --sel-accent:var(--gold); --sel-hover:rgba(188,106,38,.12);
    position:relative; display:inline-block; text-align:left; }
  /* Rules are scoped under .cn-select and reset inherited button/list styling so
     the component looks the same regardless of a page's own button/select CSS. */
  .cn-select .cn-select-btn { width:100%; display:flex; align-items:center; justify-content:space-between; gap:8px;
    margin:0; padding:11px 14px; border-radius:var(--r-md); border:1px solid var(--sel-bd); background:var(--sel-bg);
    color:var(--sel-fg); font:inherit; font-size:14.5px; font-weight:400; line-height:1.25; box-shadow:none; cursor:pointer; }
  .cn-select .cn-select-btn:hover, .cn-select.open .cn-select-btn { border-color:var(--sel-accent); filter:none; }
  .cn-select .cn-select-label { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .cn-select .cn-select-caret { width:13px; height:13px; flex:none; color:var(--sel-fg); opacity:.6; transition:transform .15s ease; }
  .cn-select.open .cn-select-caret { transform:rotate(180deg); }
  .cn-select .cn-select-list { position:absolute; top:calc(100% + 6px); left:0; right:0; z-index:60; margin:0; padding:6px;
    list-style:none; max-height:280px; overflow:auto; background:var(--sel-bg); border:1px solid var(--sel-bd);
    border-radius:var(--r-md); box-shadow:0 12px 32px rgba(20,12,6,.28); }
  .cn-select:not(.open) .cn-select-list { display:none; }
  .cn-select .cn-select-list li { margin:0; padding:9px 12px; border-radius:var(--r-sm); font-size:14px; color:var(--sel-fg);
    cursor:pointer; white-space:nowrap; }
  .cn-select .cn-select-list li:hover, .cn-select .cn-select-list li.active { background:var(--sel-hover); color:var(--sel-accent); }
  .cn-select .cn-select-list li[aria-selected="true"] { font-weight:700; }
  .cn-select.compact .cn-select-btn { padding:6px 10px; font-size:12.5px; gap:6px; }
  .cn-select.compact .cn-select-caret { width:11px; height:11px; }
  .cn-select.compact .cn-select-list li { padding:6px 10px; font-size:12.5px; }

  /* The dropdown is absolute-positioned inside the page's nav/header; lift that
     bar above <main> so the menu paints — and stays clickable — over the page.
     Without this a nav with its own z-index traps the menu in a lower stacking
     context and a (transparent) positioned <main> swallows the clicks. */
  :where(header, nav):has(.cn-acct) { position:relative; z-index:50; }
  .cn-acct { position:relative; display:inline-block; text-align:left; flex:none; }
  .cn-acct[hidden] { display:none; }
  .cn-acct-btn { display:block; margin:0; padding:0; width:36px; height:36px; line-height:0;
    border-radius:var(--r-pill); border:1px solid var(--bd); background:none; cursor:pointer; overflow:hidden; }
  .cn-acct-btn:hover, .cn-acct.open .cn-acct-btn { border-color:var(--gold); }
  .cn-acct-av { display:grid; place-items:center; width:100%; height:100%; border-radius:var(--r-pill);
    background:var(--grad-gold); color:var(--deep); font-weight:800; font-size:15px; line-height:1;
    text-transform:uppercase; overflow:hidden; user-select:none; }
  .cn-acct-av img { width:100%; height:100%; object-fit:cover; display:block; }
  .cn-acct-menu { position:absolute; top:calc(100% + 8px); right:0; z-index:70; min-width:212px; padding:6px;
    background:var(--paper); border:1px solid var(--bd); border-radius:var(--r-md); box-shadow:0 12px 32px rgba(20,12,6,.28); }
  .cn-acct:not(.open) .cn-acct-menu { display:none; }
  .cn-acct-head { padding:8px 12px 10px; margin-bottom:6px; border-bottom:1px solid var(--bd); line-height:1.3; }
  .cn-acct-head b { display:block; max-width:200px; color:var(--cream); font-size:14px; font-weight:700;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .cn-acct-head span { display:block; max-width:200px; color:var(--mut); font-size:12px; font-weight:400;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .cn-acct-item { display:flex; align-items:center; gap:10px; width:100%; margin:0; padding:9px 12px;
    border:none; border-radius:var(--r-sm); background:none; color:var(--cream); font:inherit; font-size:14px;
    font-weight:500; line-height:1.2; text-align:left; text-decoration:none; cursor:pointer; }
  .cn-acct-item:hover { background:rgba(188,106,38,.12); color:var(--gold); }
  .cn-acct-item svg { flex:none; opacity:.85; }
.cn-rail{width:272px;background:var(--cn-card);border-right:1px solid var(--cn-line);display:flex;flex-direction:column;overflow-y:auto;z-index:40}
.cn-rail--fixed{position:fixed;top:0;left:0;bottom:0;padding:16px 14px}
.cn-rail--sticky{position:sticky;top:0;height:100vh;align-self:flex-start;padding:22px 18px}
.cn-rail-scrim{display:none;position:fixed;inset:0;background:rgba(42,21,18,.42);z-index:64}
.cn-rail-scrim.on{display:block}
.cn-rail-burger{display:none;align-items:center;gap:8px;background:var(--cn-card);border:1px solid var(--cn-line);border-radius:var(--cn-r);padding:9px 14px;cursor:pointer;color:var(--cn-ink);font:inherit;font-size:14px;font-weight:600}
@media(max-width:900px){.cn-rail{position:fixed;top:0;left:0;bottom:0;height:auto;width:288px;z-index:70;transform:translateX(-100%);transition:transform .2s ease;box-shadow:var(--cn-shadow-lg)}.cn-rail.open{transform:translateX(0)}.cn-rail-burger{display:inline-flex}}