/* =====================================================================
   Blog Automation – LAYOUT VARIANTS + design rules (loaded last)
   <html data-layout="sidebar | rail | top">  (Settings → Darstellung & Layout)
   sidebar = classic left navigation · rail = icons only, opens on hover/focus or when pinned (data-rail="open")
   top = sections as menus in a bar above the page. Below 960px every layout uses the drawer (menu button).
   Colours only from theme.css tokens.
   ===================================================================== */

/* ---- design rules (Sajjad): no ALL-CAPS labels, no thick bar on the left of active items, no gradients ---- */
.nav .sec, .c-h, .tbl th, .c-vis-sec td, .bp-calhead div { text-transform: none; letter-spacing: 0; }
.nav .sec { font-size: var(--fs-xs); }
.c-h { font-size: var(--fs-sm); color: var(--text-2); }
.nav a.active { box-shadow: none; font-weight: 600; }
.brand-mark { background: var(--accent); }
.bp-ev { border-left: 0; background: color-mix(in srgb, var(--c, var(--accent)) 14%, var(--surface)); }
.bp-ev::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--c, var(--accent)); flex: none; }
.bp-uitem { border-left: 1px solid var(--border); }
.bp-uitem::before { content: ""; display: block; width: 28px; height: 4px; border-radius: 99px; background: var(--c, var(--accent)); }
.bp-quill .ql-editor blockquote, .bp-prev blockquote { border-left: 0; padding-left: 0; font-style: italic; color: var(--text-2); }
.env-banner b { letter-spacing: 0; }
.brand-logo { max-height: 32px; max-width: 190px; object-fit: contain; }

/* ---- shared bits of the shell ---- */
.topnav, .rail-pin { display: none; }
.tn-group { position: relative; }
.tn-btn, .topnav .tn-solo { display: inline-flex; align-items: center; gap: 6px; height: 38px; padding: 0 12px; border: 0; border-radius: var(--radius); background: none;
  font: 500 var(--fs-sm)/1 var(--font); color: var(--text-2); cursor: pointer; white-space: nowrap; }
.tn-btn .ico, .topnav .tn-solo .ico { width: 17px; height: 17px; }
.tn-btn > .ico:last-child { width: 15px; height: 15px; color: var(--text-3); transition: transform .15s; }
.tn-btn[aria-expanded="true"] > .ico:last-child { transform: rotate(180deg); }
.tn-btn:hover, .topnav .tn-solo:hover { background: var(--surface-3); color: var(--text); text-decoration: none; }
.tn-group.active > .tn-btn, .topnav .tn-solo.active { background: var(--accent-50); color: var(--accent-700); font-weight: 600; }
[data-mode="dark"] .tn-group.active > .tn-btn, [data-mode="dark"] .topnav .tn-solo.active { color: var(--text); }
.tn-btn:focus-visible, .topnav a:focus-visible, .rail-pin:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.tn-menu { position: absolute; top: calc(100% + 6px); left: 0; z-index: 60; min-width: 230px; padding: 6px; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); display: flex; flex-direction: column; gap: 1px; }
.tn-menu[hidden] { display: none; }
.tn-menu a { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--radius); color: var(--text-2); font-size: var(--fs-sm); }
.tn-menu a:hover, .tn-menu a:focus-visible { background: var(--surface-3); color: var(--text); text-decoration: none; }
.tn-menu a.active { background: var(--accent-50); color: var(--accent-700); font-weight: 600; }
[data-mode="dark"] .tn-menu a.active { color: var(--text); }
.tn-menu a .ico { color: var(--text-3); width: 17px; height: 17px; } .tn-menu a.active .ico { color: var(--accent); }
.tn-menu a .count, .topnav .tn-solo .count { margin-left: auto; font-size: 11px; color: var(--text-3); }
.tn-admin .tn-btn { color: var(--accent); }

/* profile menu: light / dark / automatic */
.dd-mode { padding: 6px 10px 8px; display: flex; flex-direction: column; gap: 6px; }
.dd-mode .seg { width: 100%; }
.dd-mode .seg button { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 5px; padding: 7px 6px; }
.dd-mode .seg .ico { width: 15px; height: 15px; }

@media (min-width: 961px) {
  /* ---------- rail: icons only ---------- */
  [data-layout="rail"] { --sidebar-w: 72px; }
  [data-layout="rail"][data-rail="open"] { --sidebar-w: 260px; }
  [data-layout="rail"] .sidebar { width: var(--sidebar-w); z-index: 30; overflow-x: hidden; transition: width .16s ease, box-shadow .16s; }
  [data-layout="rail"] .rail-pin { display: grid; place-items: center; position: sticky; bottom: 0; margin: 0 12px 12px auto; width: 36px; height: 36px; flex: none;
    border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); color: var(--text-2); cursor: pointer; }
  [data-layout="rail"] .rail-pin .ico { transform: rotate(-90deg); transition: transform .15s; }
  [data-layout="rail"][data-rail="open"] .rail-pin .ico { transform: rotate(90deg); }
  [data-layout="rail"] .rail-pin:hover { color: var(--text); border-color: var(--border-strong); }
  /* collapsed state (not pinned, not hovered/focused) */
  [data-layout="rail"]:not([data-rail="open"]) .sidebar:not(:hover):not(:focus-within) .nav-t,
  [data-layout="rail"]:not([data-rail="open"]) .sidebar:not(:hover):not(:focus-within) .nav a .count,
  [data-layout="rail"]:not([data-rail="open"]) .sidebar:not(:hover):not(:focus-within) .workspace > div,
  [data-layout="rail"]:not([data-rail="open"]) .sidebar:not(:hover):not(:focus-within) .side-foot,
  [data-layout="rail"]:not([data-rail="open"]) .sidebar:not(:hover):not(:focus-within) .logo-word { display: none; }
  [data-layout="rail"]:not([data-rail="open"]) .sidebar:not(:hover):not(:focus-within) .nav .sec { font-size: 0; padding: 10px 0 4px; margin: 0 14px; border-top: 1px solid var(--border); }
  [data-layout="rail"]:not([data-rail="open"]) .sidebar:not(:hover):not(:focus-within) .nav .sec:first-child { border-top: 0; }
  [data-layout="rail"]:not([data-rail="open"]) .sidebar:not(:hover):not(:focus-within) .admin-zone .sec .ico { display: none; }
  [data-layout="rail"]:not([data-rail="open"]) .sidebar:not(:hover):not(:focus-within) .nav a { justify-content: center; padding: 10px 0; }
  [data-layout="rail"]:not([data-rail="open"]) .sidebar:not(:hover):not(:focus-within) .workspace { justify-content: center; margin: 0 10px 10px; padding: 8px 0; }
  [data-layout="rail"]:not([data-rail="open"]) .sidebar:not(:hover):not(:focus-within) .brand { justify-content: center; padding-left: 0; padding-right: 0; overflow: hidden; }
  [data-layout="rail"]:not([data-rail="open"]) .sidebar:not(:hover):not(:focus-within) .rail-pin { margin: 0 auto 12px; }
  /* hover / keyboard focus: opens over the page without moving it */
  [data-layout="rail"]:not([data-rail="open"]) .sidebar:hover, [data-layout="rail"]:not([data-rail="open"]) .sidebar:focus-within { width: 260px; box-shadow: var(--shadow-lg); }
  [data-layout="rail"] .shell { grid-template-columns: var(--sidebar-w) minmax(0, 1fr); }
  [data-layout="rail"]:not([data-rail="open"]) .shell { grid-template-columns: 72px minmax(0, 1fr); }
  [data-layout="rail"]:not([data-rail="open"]) .sidebar { width: 72px; }

  /* ---------- top: sections as menus in a bar ---------- */
  [data-layout="top"] .shell { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; }
  [data-layout="top"] .sidebar { position: sticky; top: 0; z-index: 25; height: 60px; overflow: visible; flex-direction: row; align-items: center; gap: 14px;
    padding: 0 20px; border-right: 0; border-bottom: 1px solid var(--border); }
  [data-layout="top"] .sidebar .brand { padding: 0; flex: none; }
  [data-layout="top"] .sidebar .nav, [data-layout="top"] .sidebar .workspace, [data-layout="top"] .sidebar .side-foot { display: none; }
  [data-layout="top"] .topnav { display: flex; align-items: center; gap: 2px; min-width: 0; }
  [data-layout="top"] .topbar { top: 60px; z-index: 20; }
  [data-layout="top"] .content { max-width: 1440px; width: 100%; margin: 0 auto; }
}
/* phone / tablet: every layout is the drawer; the drawer always shows names */
@media (max-width: 960px) {
  .topnav, .rail-pin { display: none !important; }
}

/* dark mode: accent used as TEXT gets the same lighter mix as links (every preset and own colours stay readable) */
[data-mode="dark"] :is(.b-link, .c-tabs a.active, .tabs button.active, .c-colall:hover, .admin-zone .sec, .tn-admin .tn-btn, .c-wnum) { color: color-mix(in srgb, var(--accent) 55%, white); }
/* text on an accent background always uses --accent-contrast (white, or dark for light own colours / graphite in dark mode) */
.avatar, .btn-gradient, .btn-gradient:hover, .demo-banner, .demo-banner a, .brand-mark, .tgl-on { color: var(--accent-contrast); }
.demo-banner a:hover { color: var(--accent-contrast); }
html[data-mode] .demo-banner a:not(.btn):not(.nav a) { color: var(--accent-contrast); }
/* light own colours: text in the accent uses --accent-ink (a darker shade set by js/appearance.js) */
a { color: var(--accent-ink, var(--accent)); }
.b-link, .c-tabs a.active, .tabs button.active, .c-colall:hover, .admin-zone .sec, .tn-admin .tn-btn, .c-wnum { color: var(--accent-ink, var(--accent)); }
/* dark mode: the navy parts of the logo turn white */
[data-mode="dark"] .logo [fill="#25276d"] { fill: #ffffff; }
[data-mode="dark"] .logo [stroke="#25276d"] { stroke: #ffffff; }
/* dark mode: navigation-like links keep the text colours (the generic dark link colour is meant for links in text) */
[data-mode="dark"] :is(.c-vtabs a, .tn-menu a, .topnav .tn-solo, .dd-menu a):not(.btn) { color: var(--text-2); }
[data-mode="dark"] :is(.c-vtabs a.active, .c-vtabs a:hover, .tn-menu a.active, .tn-menu a:hover, .topnav .tn-solo.active, .dd-menu a:hover) { color: var(--text); }