/* ═══════════════════════════════════════════════════════════════
   SIDEBAR — Sidebar shell, header, branding, project selector, profile, nav
   ═══════════════════════════════════════════════════════════════ */

  /* ── Sidebar ────────────────────────────────────────── */
  .sidebar{
    width:var(--sidebar-w);min-width:var(--sidebar-w);
    background:var(--brown-dark);color:var(--cream);
    display:flex;flex-direction:column;
    border-right:1px solid rgba(0,0,0,.2);
    /* maintainer 2026-05-11: lift above the atelier-history aside
     * (position:absolute, z-index:5 collapsed / 50 expanded). When the
     * atelier-history's left edge meets the Mira sidebar's right edge,
     * its absolutely-positioned box was painting over the Mira
     * sidebar's top-right collapse button (z-index:2). Putting the
     * whole Mira sidebar at z-index 100 keeps it above any per-view
     * chrome while still leaving real modals (z-index 9500+) on top. */
    position:relative;
    z-index:100;
  }
  .sidebar-header{padding:28px 22px 20px;border-bottom:1px solid rgba(255,255,255,.08);position:relative}
  .sidebar-bottom-badges{
    display:flex;align-items:center;gap:8px;
    padding:4px 22px;
  }
  .sidebar.collapsed .sidebar-bottom-badges{display:none}
  .sidebar-beta{
    font-size:.58rem;font-weight:700;letter-spacing:.6px;text-transform:uppercase;
    color:var(--gold-light);
    border:1px solid rgba(184,152,104,.4);border-radius:4px;
    padding:2px 6px;line-height:1;
    text-decoration:none;
    transition:background .15s,color .15s,border-color .15s;
    cursor:pointer;
  }
  .sidebar-beta:hover{background:rgba(184,152,104,.15);border-color:var(--gold-light);color:var(--cream)}
  .sidebar-admin-btn{
    font-size:.56rem;font-weight:700;letter-spacing:.5px;text-transform:uppercase;
    color:#c2a06e;
    background:rgba(140,110,70,.12);
    border:1px solid rgba(140,110,70,.35);border-radius:4px;
    padding:2.5px 7px;line-height:1;
    text-decoration:none;
    transition:background .15s,color .15s,border-color .15s;
    cursor:pointer;
  }
  .sidebar-admin-btn:hover{background:rgba(140,110,70,.25);border-color:rgba(184,152,104,.6);color:var(--cream)}
  .sidebar-header h1{
    font-family:'Great Vibes',cursive;
    font-size:2.9rem;font-weight:400;
    color:var(--cream);letter-spacing:0.2px;line-height:1.1;
    opacity:0;transition:opacity .3s;
  }
  .fonts-loaded .sidebar-header h1{opacity:1}
  .sidebar-header .subtitle{
    font-size:.78rem;color:var(--gold-light);margin-top:6px;
    font-weight:500;letter-spacing:.4px;text-transform:uppercase;
  }
  .archive-selector{
    position:relative;width:100%;margin-top:8px;
  }
  .archive-selector-btn{
    width:100%;padding:5px 22px 5px 8px;
    background:rgba(255,255,255,.08);color:var(--gold-light);
    border:1px solid rgba(255,255,255,.12);border-radius:5px;
    font-size:.72rem;font-weight:600;font-family:var(--sans);
    letter-spacing:.3px;text-transform:uppercase;
    cursor:pointer;text-align:left;
    background-image:url("data:image/svg+xml,%3Csvg width='8' height='5' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l3 3 3-3' stroke='%23DAA520' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat:no-repeat;background-position:right 8px center;
    transition:border-color .15s,background .15s;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  }
  .archive-selector-btn:hover{border-color:rgba(255,255,255,.25)}
  .archive-selector-dropdown{
    display:none;position:absolute;top:calc(100% + 4px);left:0;right:0;
    background:var(--white);border:1px solid var(--border);border-radius:6px;
    box-shadow:0 6px 20px rgba(62,39,35,.18);
    z-index:50;overflow:hidden;
  }
  .archive-selector.open .archive-selector-dropdown{display:block}
  .archive-selector-item{
    display:flex;align-items:center;gap:8px;
    padding:8px 10px;cursor:pointer;
    font-size:.8rem;font-weight:600;color:var(--text);
    transition:background .12s;
    border-bottom:1px solid var(--border-light);
  }
  .archive-selector-item:last-child{border-bottom:none}
  .archive-selector-item:hover{background:rgba(139,69,19,.04)}
  .archive-selector-item .as-check{
    width:15px;height:15px;border:2px solid var(--border);border-radius:4px;
    background:var(--white);color:transparent;flex-shrink:0;
    display:flex;align-items:center;justify-content:center;
    font-size:.65rem;font-weight:700;transition:all .15s;
  }
  .archive-selector-item.active .as-check{
    background:var(--gold);border-color:var(--gold);color:var(--white);
  }
  .archive-selector-item .as-label{flex:1;min-width:0}
  .archive-selector-item .as-status{
    font-size:.65rem;font-weight:700;letter-spacing:.3px;
    padding:2px 6px;border-radius:3px;white-space:nowrap;
  }
  .archive-selector-item.as-disabled{
    opacity:.55;
  }
  .archive-selector-item.as-disabled .as-status{
    color:var(--text-muted);
  }
  /* (new-search-btn removed) */
  /* (search history removed) */

  /* -- Compact scope indicator -- */
  .sidebar-scope {
    padding: 8px 16px; margin: 4px 12px;
    border-radius: 6px; background: rgba(255,255,255,.06);
    cursor: default; position: relative; font-size: 0.75rem;
    color: var(--cream); opacity: 0.8;
  }
  .sidebar-scope:hover { opacity: 1; background: rgba(255,255,255,.1); }
  .scope-summary { display: flex; align-items: center; gap: 6px; }
  .scope-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .sidebar.collapsed .sidebar-scope { padding: 8px 4px; justify-content: center; }
  .sidebar.collapsed .scope-text { display: none; }

  /* ── Sidebar spacer ─────────────────────────────────── */
  .sidebar-spacer{flex:1}

  /* ── Main area ──────────────────────────────────────── */
  .main{flex:1;display:flex;flex-direction:column;min-width:0}

  /* ── Shared page-header heading style ── */
  .search-header h2,
  .archive-header h2,
  .acquire-header h2,
  .explorer-header h2,
  .journal-header h2,
  .logs-header h2,
  .arch-header h2,
  .home-header h2,
  .libraries-header h2,
  .manage-header h2,
  .reading-room-header h2{
    font-family:var(--sans);
    font-size:1.05rem;font-weight:600;
    font-variant:small-caps;letter-spacing:.04em;
    color:var(--brown-dark);
    flex:1;min-width:0;
  }

/* ── Collapsible sidebar ─────────────────────────────── */
/* maintainer 2026-05-11: overflow MUST be visible so the nav-item
 * right-flying tooltips can escape the sidebar's right edge. The
 * previous `overflow:hidden` was clipping every tooltip — that's
 * why none of the sidebar hovers were visible. The label text inside
 * `.sidebar-nav-item` is already `display:none` when collapsed
 * (see line ~150 below), so during the 200ms width transition the
 * only thing that might briefly poke out is fine. */
.sidebar{transition:width .2s ease,min-width .2s ease;overflow:visible}
.sidebar.collapsed{width:52px;min-width:52px}
.sidebar.collapsed .sidebar-nav-label,
.sidebar.collapsed .sidebar-texts-section,
.sidebar.collapsed .sidebar-header h1,
.sidebar.collapsed .sidebar-beta,
.sidebar.collapsed .sidebar-admin-btn,
.sidebar.collapsed .sidebar-profile .profile-info{display:none}
.sidebar.collapsed .sidebar-nav-item{justify-content:center;padding:10px 0}
.sidebar.collapsed .sidebar-collapse-btn svg{transform:rotate(180deg)}
/* maintainer 2026-05-11: must out-specific the [data-tip] tooltip-system
 * rule in quote-cards.css (.sidebar-collapse-btn[data-tip]
 * { position: relative }) which loads AFTER sidebar.css. Add a
 * `.sidebar` ancestor to win on specificity regardless of source
 * order. Without this, the button rendered at the top-left of the
 * sidebar header instead of the top-right. */
aside.sidebar .sidebar-collapse-btn,
aside.sidebar .sidebar-collapse-btn[data-tip]{
  position:absolute;top:12px;right:8px;
  background:none;border:none;color:var(--gold-light);
  cursor:pointer;opacity:.85;padding:4px;
  transition:opacity .15s,color .15s;
  /* z-index above any sibling SVGs / icons that might otherwise paint
   * over a position:absolute button and swallow clicks. */
  z-index:2;
}

/* maintainer 2026-05-11 v3: sidebar nav-item tooltips — fly RIGHT on
 * hover ONLY when the sidebar is collapsed (icons-only mode). In
 * expanded mode the inline label is visible inside the button, so a
 * redundant tooltip would be noise.
 *
 * Position the tooltip to the right of the icon with a left-pointing
 * arrow. Mira aesthetic: brown-dark fill, white text, gold-rule
 * shadow. Identical look to the page Settings tooltips.
 *
 * The base [data-tip]::after content rule in quote-cards.css also
 * matches this selector and would otherwise render a centered-below
 * tooltip when expanded. We HIDE that base pseudo when expanded by
 * forcing display:none, then re-show it with right-flying position
 * when `.sidebar.collapsed` is set. */
aside.sidebar .sidebar-nav-item{ position:relative; }
/* Expanded (default): suppress the inherited base tooltip pseudo
 * entirely so it doesn't appear below the nav button. */
aside.sidebar .sidebar-nav-item[data-tip]::after,
aside.sidebar .sidebar-nav-item[data-tip]::before{
  display:none !important;
}
/* Collapsed: render the tooltip flying to the right of the icon. */
aside.sidebar.collapsed .sidebar-nav-item[data-tip]::after{
  display:block !important;
  content:attr(data-tip);
  position:absolute !important;
  top:50% !important; left:calc(100% + 10px) !important;
  right:auto !important; bottom:auto !important;
  transform:translateY(-50%) !important;
  background:var(--brown-dark, #35201a) !important;
  color:#ffffff !important;
  font-family:var(--sans, system-ui, sans-serif) !important;
  font-size:.74rem !important; font-weight:600 !important; letter-spacing:.3px !important;
  padding:6px 12px !important; border-radius:6px !important;
  white-space:nowrap !important;
  opacity:0 !important; pointer-events:none !important;
  transition:opacity .18s, transform .18s !important;
  box-shadow:0 3px 10px rgba(40,25,15,.28) !important;
  z-index:99999 !important;
  border:none !important;
}
aside.sidebar.collapsed .sidebar-nav-item[data-tip]::before{
  display:block !important;
  content:'' !important;
  position:absolute !important;
  top:50% !important; left:calc(100% + 2px) !important;
  right:auto !important; bottom:auto !important;
  transform:translateY(-50%) !important;
  border:5px solid transparent !important;
  border-right-color:var(--brown-dark, #35201a) !important;
  opacity:0 !important; pointer-events:none !important;
  transition:opacity .18s !important;
  z-index:99999 !important;
  background:none !important;
}
aside.sidebar.collapsed .sidebar-nav-item[data-tip]:hover::after,
aside.sidebar.collapsed .sidebar-nav-item[data-tip]:hover::before{
  opacity:1 !important;
}
aside.sidebar.collapsed .sidebar-nav-item[data-tip]:hover::after{
  transform:translateY(-50%) translateX(2px) !important;
}
aside.sidebar.collapsed .sidebar-nav-item[data-tip]:hover{ z-index:99999; }

/* maintainer 2026-05-11 v3: when sidebar is collapsed, the user profile
 * row shows ONLY the avatar with initials, perfectly centered in the
 * 52px rail. Gear (Application Settings) + Sign-out are hidden in
 * collapsed mode — those affordances live in the Atelier Settings
 * modal and are still reachable from anywhere via keyboard or the
 * settings button on each view's toolbar. */
.sidebar.collapsed .sidebar-profile{
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:14px 0;
  gap:0;
}
.sidebar.collapsed .profile-avatar{
  margin:0 auto;
}
.sidebar.collapsed .sidebar-settings-btn,
.sidebar.collapsed .sidebar-logout-btn{
  display:none !important;
}
.sidebar-collapse-btn:hover{opacity:1;color:var(--cream)}

/* [PRE-SHIP REMOVE — DEV CC ONLY] */
.dev-cc-badge{
  display:flex;align-items:center;gap:6px;
  margin-top:10px;padding:5px 9px;
  background:#d64545;color:#fff;
  border:1px solid #ff6b6b;border-radius:4px;
  font-size:.62rem;font-weight:700;
  letter-spacing:.4px;text-transform:uppercase;
  box-shadow:0 0 0 1px rgba(0,0,0,.2),0 2px 6px rgba(214,69,69,.35);
  cursor:help;user-select:none;
  max-width:100%;flex-wrap:wrap;
}
.dev-cc-badge[hidden]{display:none !important}
.dev-cc-badge-dot{
  width:7px;height:7px;border-radius:50%;
  background:#fff;flex-shrink:0;
  box-shadow:0 0 0 2px rgba(255,255,255,.35);
  animation:dev-cc-badge-pulse 1.4s ease-in-out infinite;
}
.dev-cc-badge-label{white-space:nowrap}
.dev-cc-badge-note{
  font-size:.56rem;font-weight:500;
  letter-spacing:.2px;text-transform:none;
  opacity:.92;width:100%;line-height:1.25;
}
.sidebar.collapsed .dev-cc-badge-label,
.sidebar.collapsed .dev-cc-badge-note{display:none}
.sidebar.collapsed .dev-cc-badge{padding:5px;margin-top:8px;justify-content:center}
@keyframes dev-cc-badge-pulse{
  0%,100%{opacity:1;transform:scale(1)}
  50%{opacity:.45;transform:scale(.82)}
}
/* [PRE-SHIP REMOVE — DEV CC ONLY — END] */