/* =====================================================================
   Blog Automation – collapsible sidebar (layout "sidebar"): <html data-navmin="1"> = icons only, names as tooltips.
   Toggled by the button at the bottom of the sidebar (js/app.js, per device in localStorage 'bp-nav-min', set before paint by js/boot.js).
   Only on desktop – below 960px the navigation is the drawer, which always shows the names. Colours only from theme.css tokens.
   ===================================================================== */
/* logo row: brand + collapse button (both layouts with a left navigation) */
.side-top { display: flex; align-items: center; min-width: 0; }
.side-top .brand { flex: 1; min-width: 0; }
/* company logo in the workspace box (Settings → Company profile) instead of the initials */
.ws-logo.has-img { background: var(--surface); border: 1px solid var(--border); overflow: hidden; }
.ws-logo img { width: 100%; height: 100%; object-fit: contain; }
/* slim scrollbar, only visible while the pointer is on the navigation */
.sidebar { scrollbar-width: thin; scrollbar-color: transparent transparent; }
.sidebar:hover, .sidebar:focus-within { scrollbar-color: var(--border-strong) transparent; }
.sidebar::-webkit-scrollbar { width: 6px; }
.sidebar::-webkit-scrollbar-thumb { background: transparent; border-radius: 99px; }
.sidebar:hover::-webkit-scrollbar-thumb { background: var(--border-strong); }

@media (min-width: 961px) {
  :is([data-layout="sidebar"], [data-layout="rail"]) .rail-pin { display: grid; place-items: center; position: static; flex: none; width: 32px; height: 32px; margin: 0 12px 0 0;
    border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); color: var(--text-2); cursor: pointer; }
  :is([data-layout="sidebar"], [data-layout="rail"]) .rail-pin:hover { color: var(--text); border-color: var(--border-strong); background: var(--surface-3); }
  :is([data-layout="sidebar"], [data-layout="rail"]) .rail-pin .ico { width: 16px; height: 16px; transition: transform .15s; }
  [data-layout="sidebar"] .rail-pin .ico, [data-layout="rail"][data-rail="open"] .rail-pin .ico { transform: rotate(90deg); }   /* ‹ = collapse */
  [data-layout="sidebar"][data-navmin="1"] .rail-pin .ico, [data-layout="rail"]:not([data-rail="open"]) .rail-pin .ico { transform: rotate(-90deg); }   /* › = expand */
  [data-layout="sidebar"] .sidebar { transition: width .16s ease; }

  /* icons only */
  [data-layout="sidebar"][data-navmin="1"] { --sidebar-w: 72px; }
  [data-layout="sidebar"][data-navmin="1"] .sidebar { width: 72px; overflow-x: hidden; scrollbar-width: none; }
  [data-layout="sidebar"][data-navmin="1"] .sidebar::-webkit-scrollbar { display: none; }
  [data-layout="sidebar"][data-navmin="1"] .sidebar :is(.nav-t, .nav a .count, .workspace > div, .side-foot, .logo-word) { display: none; }
  [data-layout="sidebar"][data-navmin="1"] .side-top { flex-direction: column; gap: 10px; padding-bottom: 12px; }
  [data-layout="sidebar"][data-navmin="1"] .side-top .brand { justify-content: center; padding: 18px 0 0; overflow: hidden; }
  [data-layout="sidebar"][data-navmin="1"] .rail-pin { margin: 0; }
  [data-layout="sidebar"][data-navmin="1"] .sidebar .nav .sec { font-size: 0; padding: 8px 0 4px; margin: 0 14px; border-top: 1px solid var(--border); }
  [data-layout="sidebar"][data-navmin="1"] .sidebar .nav .sec:first-child { border-top: 0; }
  [data-layout="sidebar"][data-navmin="1"] .sidebar .nav a { position: relative; justify-content: center; padding: 9px 0; }
  [data-layout="sidebar"][data-navmin="1"] .sidebar .nav a .ico { width: 20px; height: 20px; }
  /* a count (e.g. articles waiting for review) becomes a dot on the icon */
  [data-layout="sidebar"][data-navmin="1"] .sidebar .nav a:has(.count)::after { content: ""; position: absolute; top: 6px; right: 16px; width: 7px; height: 7px; border-radius: 50%; background: var(--coral); }
  [data-layout="sidebar"][data-navmin="1"] .sidebar .workspace { justify-content: center; margin: 0 10px 10px; padding: 6px 0; }
  [data-layout="sidebar"][data-navmin="1"] .sidebar .brand-logo { max-width: 40px; object-fit: cover; object-position: left center; }
  /* rail layout: the button sits under the mark while the rail is narrow */
  [data-layout="rail"]:not([data-rail="open"]) .sidebar:not(:hover):not(:focus-within) .side-top { flex-direction: column; gap: 10px; padding-bottom: 12px; }
  [data-layout="rail"]:not([data-rail="open"]) .sidebar:not(:hover):not(:focus-within) .rail-pin { margin: 0; }
}
/* tooltip next to an icon (js/app.js, collapsed sidebar only) */
.nav-tip { position: fixed; z-index: 160; padding: 6px 10px; border-radius: var(--radius); background: var(--text); color: var(--bg); font: 500 var(--fs-sm)/1.2 var(--font);
  white-space: nowrap; box-shadow: var(--shadow-lg); pointer-events: none; transform: translateY(-50%); animation: nav-tip .1s ease-out; }
@keyframes nav-tip { from { opacity: 0; transform: translate(-3px, -50%); } }
@media (prefers-reduced-motion: reduce) { [data-layout="sidebar"] .sidebar, [data-layout="sidebar"] .rail-pin .ico, .nav-tip { transition: none; animation: none; } }