/* ============================================================
   Tool-shell layout (app-shell) — the logo, nav, and a minimal footer
   live in a left SIDEBAR on desktop (stacked at the top of the content
   on narrow). Scoped to .dw-shell / body.dw-has-shell.
   Token-driven (single base namespace) with literal fallbacks.
   NO rounded corners anywhere — square, by design.
   ============================================================ */

.dw-shell { display: block; }
.dw-shell__main { min-width: 0; }
/* Mobile top bar — hidden on desktop (the rail carries the brand there). */
.dw-shell__topbar { display: none; }

/* Sidebar — a flex column: logo (top) · nav · minimal footer (bottom). */
.dw-shell__sidebar {
  display: flex;
  flex-direction: column;
  padding: 16px;
  border-bottom: 1px solid var(--rule, #e5e5e5);
}

/* Desktop: [ sidebar | content ] grid; sidebar sticky, full height. */
@media (min-width: 1025px) {
  .dw-shell { --shell-rail-w: 264px; }
  /* Fixed rail + padded content (the Claude-Design mechanism), so the rail
     can SLIDE in/out on collapse instead of hard-toggling. */
  .dw-shell__sidebar {
    position: fixed;
    top: 0;
    left: 0;
    width: var(--shell-rail-w);
    height: 100vh;
    overflow: hidden; /* the nav scrolls internally; logo + foot stay pinned */
    padding: 12px 14px;
    border-bottom: 0;
    border-right: 1px solid var(--rule, #e5e5e5);
    transform: translateX(0);
    transition: transform 0.22s ease;
    z-index: 30;
  }
  /* Content top is tuned so the first content line sits level with the rail's
     first nav label ("ESSAYS"): the rail header (logo + divider) pushes the
     nav down, so the content drops to meet it (the rail header is also tightened
     to bring the label up). Both move toward one shared top line. */
  .dw-shell__main {
    padding: 60px 24px 0;
    padding-left: calc(var(--shell-rail-w) + 24px);
    transition: padding-left 0.22s ease;
  }
  /* Collapsed: the rail slides out left and the content reclaims the space. */
  body.dw-shell-collapsed .dw-shell__sidebar { transform: translateX(-100%); }
  body.dw-shell-collapsed .dw-shell__main { padding-left: 24px; }

  /* Pull the nav scrollbar FLUSH with the rail's right border: cancel the
     sidebar's 14px right padding for the nav (negative margin carries its edge
     to the border), then restore the same 14px inset on the nav's own content so
     the labels keep their position. The thin scrollbar then rides the border
     line instead of floating ~14px inside it. */
  .dw-shell-nav { margin-right: -14px; padding-right: 14px; }
}

/* Rail-top: brand + the in-rail collapse hamburger on one vertically-centered
   row. The hairline divider lives here now (not on the logo). */
.dw-shell-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding-bottom: 10px;
  margin-bottom: 6px;
  border-bottom: 1px solid var(--rule, #e5e5e5);
  flex: 0 0 auto; /* pinned: the logo row never scrolls (only the nav does) */
}
.dw-shell-logo {
  display: block;
  padding: 2px;
  min-width: 0;
}
/* In-rail collapse button — flows in the rail-top row, so it tracks the WP
   admin bar / layout instead of floating over the viewport. */
.dw-shell__collapse {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid var(--rule, #e5e5e5);
  background: var(--bg, #ffffff);
  color: var(--ink, #1a1a1a);
  cursor: pointer;
}
.dw-shell__collapse:hover { background: var(--bg-2, #f3f3f3); color: var(--rubric, #710500); }
.dw-shell__collapse:focus-visible { outline: 2px solid var(--rubric, #710500); outline-offset: 2px; }
.dw-shell-logo img,
.dw-shell-logo .custom-logo {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 40px;
}

/* The nav is the ONLY scrolling region of the rail: the logo (top) and the
   footer (bottom) stay pinned while the link groups scroll between them.
   (min-height:0 lets a flex child actually scroll instead of overflowing.) */
/* The nav is a flex column so its foot (.dw-shell-foot, now a child) can sit at
   the BOTTOM via margin-top:auto when the menu is short, yet scroll together with
   the menu when the list is long — i.e. the foot is no longer pinned/sticky. */
.dw-shell-nav { flex: 1 1 auto; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; }

/* Thin, subtle scrollbar — the front-end twin of the .odk-scroll operator-surface
   primitive (wgnrstyle/admin/kernel.css): a slim, track-less bar so a long rail
   doesn't show the chunky default OS scrollbar. Square thumb (rounding is for
   buttons only — same rule as the nav below). The thumb is a translucent neutral
   grey so it reads on light, sand AND dark themes without per-theme overrides.
   Reusable: add .dw-scroll-thin to any overflow container; the rail nav opts in. */
.dw-scroll-thin,
.dw-shell-nav,
.dw-shell__sidebar {
  scrollbar-width: thin;                                /* Firefox */
  scrollbar-color: rgba(136, 136, 136, 0.45) transparent;
}
.dw-scroll-thin::-webkit-scrollbar,
.dw-shell-nav::-webkit-scrollbar,
.dw-shell__sidebar::-webkit-scrollbar { width: 8px; height: 8px; }
.dw-scroll-thin::-webkit-scrollbar-thumb,
.dw-shell-nav::-webkit-scrollbar-thumb,
.dw-shell__sidebar::-webkit-scrollbar-thumb {
  background: rgba(136, 136, 136, 0.45);
  border-radius: 0;                                     /* SQUARE — buttons only get rounding */
  border: 2px solid transparent;                        /* inset padding makes the thumb read slim */
  background-clip: padding-box;
}
.dw-scroll-thin::-webkit-scrollbar-thumb:hover,
.dw-shell-nav::-webkit-scrollbar-thumb:hover,
.dw-shell__sidebar::-webkit-scrollbar-thumb:hover { background: rgba(136, 136, 136, 0.75); }
.dw-scroll-thin::-webkit-scrollbar-track,
.dw-shell-nav::-webkit-scrollbar-track,
.dw-shell__sidebar::-webkit-scrollbar-track { background: transparent; }

/* Vertical nav — SQUARE. Active item = a left accent rail + tinted fill
   (no rounded corners, no asymmetric borders). */
.dw-shell-nav__list { list-style: none; margin: 0; padding: 0; }
.dw-shell-nav__list li { margin: 0; }
/* Essays years render as a compact 2-column grid (Claude-Design rail). */
.dw-shell-nav__group--years .dw-shell-nav__list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
}
/* External "Mehr" links carry a quiet ↗ marker pushed to the right. */
.dw-shell-nav__ext { margin-left: auto; display: inline-flex; align-items: center; color: var(--rubric, #710500); }
.dw-shell-nav__ext svg { width: 11px; height: 11px; }
.dw-shell-nav__list a {
  display: flex;
  align-items: center;
  padding: 9px 12px;
  border: 0;
  border-radius: 0;
  color: var(--ink, #1a1a1a);
  text-decoration: none;
  font-size: var(--fs-small);
  line-height: 1.3;
  transition: background-color 0.12s ease, color 0.12s ease;
}
.dw-shell-nav__list a:hover,
.dw-shell-nav__list a:focus {
  background: var(--bg-2, #f3f3f3);
  color: var(--rubric, #710500);
  text-decoration: none;
}
.dw-shell-nav__list a:focus-visible {
  outline: 2px solid var(--rubric, #710500);
  outline-offset: -2px;
}
.dw-shell-nav__list .current-menu-item > a,
.dw-shell-nav__list .current_page_item > a,
.dw-shell-nav__list .current-menu-parent > a {
  background: var(--rubric-tint, rgb(113 5 0 / 0.10));
  color: var(--rubric, #710500);
  font-weight: 600;
  box-shadow: inset 3px 0 0 0 var(--rubric, #710500);
}
@media (prefers-reduced-motion: reduce) {
  .dw-shell-nav__list a { transition: none; }
}

/* Contextual submenu — the active section's items, expanded inline beneath
   its rail item (e.g. Catechism → its prayers/lessons). Background-change
   feedback, no border-lines (general rule). */
.dw-shell-subnav {
  list-style: none;
  margin: 1px 0 6px;
  padding: 0 0 0 12px;
}
.dw-shell-subnav li { margin: 0; }
.dw-shell-subnav a {
  display: block;
  padding: 6px 10px;
  border-radius: 7px;
  font-size: var(--fs-small);
  line-height: 1.3;
  color: var(--ink-mute, #6a6a6a);
}
.dw-shell-subnav a:hover,
.dw-shell-subnav a:focus { background: var(--bg-2, #f3f3f3); color: var(--ink, #1a1a1a); text-decoration: none; }
.dw-shell-subnav a.is-current {
  background: var(--rubric-tint, rgb(113 5 0 / 0.10));
  color: var(--rubric, #710500);
  font-weight: 600;
}
/* The section above the current leaf (e.g. "Basic Prayers"): a quiet header. */
.dw-shell-subnav a.is-ancestor { color: var(--ink, #1a1a1a); font-weight: 600; }
/* Deeper level (the section's items) — indent a touch more. */
.dw-shell-subnav--nested { padding-left: 12px; margin: 1px 0 4px; }

/* Sidebar nav groups (e.g. Essays-by-year + secondary links on dushanwegner.com). */
.dw-shell-nav__group + .dw-shell-nav__group { margin-top: 18px; }
.dw-shell-nav__label {
  display: block;
  padding: 0 12px 4px;
  font-size: var(--fs-micro);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-mute, #6a6a6a);
}

/* Minimal sidebar footer — last child of the scrolling nav. margin-top:auto
   drops it to the bottom when the menu is short; when the list is long it just
   scrolls along after the menu (not pinned/sticky to the viewport). */
.dw-shell-foot {
  margin-top: auto;
  padding-top: 16px;
  font-size: var(--fs-micro);
  color: var(--ink-mute, #6a6a6a);
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 0 0 auto; /* keep its natural height; sits at the bottom of the scroll */
}
.dw-shell-foot__copy { display: block; }

/* ============================================================
   Shared rail control — segmented toggle (Appearance light/dark/auto).
   The canonical light/dark "lightswitch" for any dwtheme site; opt in via
   the `dwtheme_appearance_toggle` filter. Mirrors the LP rail control look
   so both sites share one segmented-control vocabulary. (LP still ships its
   own .lp-mode-toggle for now — slated to migrate onto this.)
   ============================================================ */
.dw-rail-ctl__lab {
  display: block;
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin: 0 2px 5px;
}
.dw-mode-toggle {
  display: flex;
  width: 100%;
  border: 1px solid var(--rule);
  overflow: hidden;
  background: var(--bg);
}
.dw-mode-toggle button {
  appearance: none;
  background: transparent;
  border: 0;
  border-left: 1px solid var(--rule);
  cursor: pointer;
  flex: 1;
  min-width: 0;
  padding: 5px 0;
  font-family: var(--font-sans, inherit);
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--ink-mute);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  line-height: 1.4;
}
.dw-mode-toggle button:first-child { border-left: 0; }
.dw-mode-toggle button:hover { color: var(--ink); }
.dw-mode-toggle button .ico { font-size: var(--fs-micro); line-height: 1; }
.dw-mode-toggle button.is-active {
  background: var(--rubric);
  color: #fff;
}

/* ============================================================
   Sidebar toggle — collapse on desktop, off-canvas drawer on narrow.
   ============================================================ */
.dw-shell__toggle {
  position: fixed;
  top: 8px;
  left: 8px;
  z-index: 1050;
  width: 40px;
  height: 40px;
  /* Floating re-open button — hidden by default; shown only when the rail is
     collapsed (desktop) or the drawer is closed (narrow). The in-rail
     .dw-shell__collapse handles closing. */
  display: none;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid var(--rule, #e5e5e5);
  background: var(--bg, #ffffff);
  color: var(--ink, #1a1a1a);
  cursor: pointer;
}
.dw-shell__toggle:hover { background: var(--bg-2, #f3f3f3); color: var(--rubric, #710500); }
.dw-shell__toggle:focus-visible { outline: 2px solid var(--rubric, #710500); outline-offset: 2px; }
.dw-shell__toggle-icon { position: relative; }
.dw-shell__toggle-icon,
.dw-shell__toggle-icon::before,
.dw-shell__toggle-icon::after {
  display: block;
  width: 18px;
  height: 2px;
  background: currentColor;
}
.dw-shell__toggle-icon::before,
.dw-shell__toggle-icon::after { content: ""; position: absolute; left: 0; }
.dw-shell__toggle-icon::before { top: -5px; }
.dw-shell__toggle-icon::after { top: 5px; }

.dw-shell__backdrop { position: fixed; inset: 0; background: rgb(0 0 0 / 0.4); z-index: 1040; }
.dw-shell__backdrop[hidden] { display: none; }

/* Narrow (<992): the sidebar is an off-canvas drawer (slides in from the left). */
@media (max-width: 1024px) {
  .dw-shell__sidebar {
    position: fixed;
    top: 0;
    left: 0;
    width: 280px;
    max-width: 86vw;
    height: 100vh;
    overflow: hidden; /* the nav scrolls internally; logo + foot stay pinned */
    background: var(--bg, #ffffff);
    border-bottom: 0;
    border-right: 1px solid var(--rule, #e5e5e5);
    transform: translateX(-100%);
    transition: transform 0.2s ease;
    z-index: 1045;
  }
  body.dw-shell-drawer-open .dw-shell__sidebar { transform: translateX(0); }
  /* Mobile top bar: brand (left) + hamburger (right), sticky at the top —
     the rail's conceptual twin on narrow. Opens the off-canvas drawer. */
  .dw-shell__topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    position: sticky;
    top: 0;
    z-index: 1030;   /* below the backdrop (1040) so the open drawer covers it */
    padding: 9px 14px;
    background: var(--bg, #ffffff);
    border-bottom: 1px solid var(--rule, #e5e5e5);
    transition: opacity 0.22s ease;
  }
  .dw-shell__topbar .dw-shell-logo { padding: 0; }
  .dw-shell__topbar .dw-shell-logo img,
  .dw-shell__topbar .dw-shell-logo .custom-logo { max-height: 34px; }
  /* Fade the WHOLE top bar (brand + its hamburger) out as the drawer opens,
     back in on close — riding the drawer's slide. The drawer carries its own
     close control + scrim, so the bar isn't needed while open. */
  body.dw-shell-drawer-open .dw-shell__topbar { opacity: 0; pointer-events: none; }
  /* The top-bar hamburger replaces the floating toggle on narrow. */
  .dw-shell__toggle { display: none !important; }
  /* The sticky top bar already sits in flow above the content; add a small
     breath below it (the design's 64px is for a FIXED bar — ours is sticky). */
  .dw-shell__main { padding-top: 16px; }
}

/* Desktop (>=992): collapsible; no backdrop. */
/* WP admin bar: it's fixed (32px ≥783px, 46px below) and WordPress only bumps
   the document with html{margin-top}, which fixed/sticky elements don't inherit.
   So offset the fixed rail, the sticky top bar, and the floating button by the
   bar height when logged in — the standard admin-bar pattern. */
body.admin-bar .dw-shell__sidebar { top: 32px; height: calc(100vh - 32px); }
body.admin-bar .dw-shell__toggle { top: calc(8px + 32px); }
@media screen and (min-width: 783px) and (max-width: 1024px) {
  body.admin-bar .dw-shell__topbar { top: 32px; }
}
@media screen and (max-width: 782px) {
  body.admin-bar .dw-shell__sidebar { top: 46px; height: calc(100vh - 46px); }
  body.admin-bar .dw-shell__toggle { top: calc(8px + 46px); }
}

@media (min-width: 1025px) {
  /* The floating re-open button appears only when the rail is collapsed. */
  body.dw-shell-collapsed .dw-shell__toggle { display: inline-flex; }
  .dw-shell__backdrop { display: none !important; }

  /* Desktop: the in-rail collapse control is a SUBTLE small icon, not a boxed
     button — the large drawer-sized hamburger only belongs in drawer mode. */
  .dw-shell__collapse {
    width: 22px;
    height: 22px;
    border-color: transparent;
    background: transparent;
    color: var(--ink-mute, #9a9aa3);
    opacity: 0.4;
    transition: opacity 0.12s ease, color 0.12s ease;
  }
  .dw-shell__collapse:hover {
    background: transparent;
    color: var(--rubric, #710500);
    opacity: 1;
  }
  .dw-shell__collapse .dw-shell__toggle-icon,
  .dw-shell__collapse .dw-shell__toggle-icon::before,
  .dw-shell__collapse .dw-shell__toggle-icon::after {
    width: 15px;
  }
  .dw-shell__collapse .dw-shell__toggle-icon::before { top: -4px; }
  .dw-shell__collapse .dw-shell__toggle-icon::after { top: 4px; }
}
@media (prefers-reduced-motion: reduce) {
  .dw-shell__sidebar { transition: none; }
}