/* ============================================================
   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; }
}

/* A rail row's leading SECTION GLYPH (markup in inc/nav-icon.php). The rail is
   scanned rather than read, and the shape finds a section before the word does.
   Muted by default so the label stays the loud half; on the current row it
   takes the row's own colour, because the rail marks where you are in ONE
   colour and a glyph left grey there would read as a second, disagreeing state.
   Fixed width, so every label starts at the same x — an uneven left edge is
   what makes an icon column look accidental. */
.dw-shell-nav__list .dw-nav-ico {
  flex: 0 0 auto;
  width: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-right: 10px;
  color: var(--ink-mute, #6b7280);
}
.dw-shell-nav__list .dw-nav-ico svg { width: 16px; height: 16px; }
.dw-shell-nav__list .dw-nav-label { min-width: 0; }
.dw-shell-nav__list .current-menu-item > a .dw-nav-ico,
.dw-shell-nav__list .current_page_item > a .dw-nav-ico,
.dw-shell-nav__list .current-menu-parent > a .dw-nav-ico,
.dw-shell-nav__list .current-menu-ancestor > a .dw-nav-ico,
.dw-shell-nav__list a:hover .dw-nav-ico,
.dw-shell-nav__list a:focus .dw-nav-ico { color: inherit; }

/* A rail row with a trailing ACTION (the .dw-nav-action primitive; markup in
   inc/nav-action.php). The row still navigates and keeps the whole width it
   had minus the button; the button opens the section's own tool on the line
   directly beneath. No divider line between the two — this rail marks state by
   background, never by rules — so the two tap targets are told apart by the
   same hover/press ground every row already uses. */
.dw-shell-nav__list li.dw-nav-item--action {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
}
.dw-shell-nav__list li.dw-nav-item--action > a {
  flex: 1 1 auto;
  min-width: 0;
}
.dw-shell-nav__list .dw-nav-action {
  /* Square on the row's own height (9px + 9px padding around a 1.3 line). */
  width: 34px;
  align-self: stretch;
  transition: background-color 0.12s ease, color 0.12s ease;
}
.dw-shell-nav__list .dw-nav-action svg { width: 16px; height: 16px; }
.dw-shell-nav__list .dw-nav-action:hover,
.dw-shell-nav__list .dw-nav-action:focus {
  background: var(--bg-2, #f3f3f3);
  color: var(--rubric, #710500);
}
.dw-shell-nav__list .dw-nav-action:focus-visible {
  outline: 2px solid var(--rubric, #710500);
  outline-offset: -2px;
}
/* Open reads in the accent — the rail's one "this is the live one" colour. */
.dw-shell-nav__list .dw-nav-action[aria-expanded="true"] { color: var(--rubric, #710500); }
@media (prefers-reduced-motion: reduce) {
  .dw-shell-nav__list .dw-nav-action { transition: none; }
}

/* The disclosed panel sits inside the row's own left inset, so what it holds
   lines up with the row titles rather than with the rail's edge. */
.dw-shell-nav__list .dw-nav-panel {
  padding: 2px 12px 8px;
}

/* The field a panel holds — square, hairline, the rail's own type size. The
   magnifier is the panel's own glyph; the input carries the rest of the row. */
.dw-nav-search {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 34px;
  padding: 0 10px;
  border: 1px solid var(--rule, #e6e6e6);
  border-radius: 0;
  background: var(--bg, #fff);
  color: var(--ink-mute, #6b7280);
}
.dw-nav-search svg { width: 14px; height: 14px; flex-shrink: 0; }
.dw-nav-search input {
  flex: 1;
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
  outline: none;
  font: inherit;
  font-size: var(--fs-small);
  color: var(--ink, #1a1a1a);
}
.dw-nav-search input::placeholder { color: var(--ink-mute, #6b7280); }
.dw-nav-search:focus-within { border-color: var(--rubric, #710500); }

/* THE FIELD'S MARK — one slot, two states. It is the magnifier until what the
   reader typed names something real, and then it is the check, in the key
   colour. The two are stacked in the same box and cross-faded, so the answer
   costs no second glyph beside the browser's own clear button, and nothing
   moves under the caret as the reader types. There is no negative state: a
   half-typed word is not a mistake, and a field that scolds mid-word is worse
   than one that simply waits. */
.dw-nav-search__mark {
  position: relative;
  flex: 0 0 14px;
  width: 14px;
  height: 14px;
}
.dw-nav-search__mark > span {
  position: absolute;
  inset: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.12s ease;
}
.dw-nav-search__mark svg { width: 14px; height: 14px; }
.dw-nav-search__mark-ok { color: var(--rubric, #710500); opacity: 0; }
.dw-nav-search.is-resolved .dw-nav-search__mark-search { opacity: 0; }
.dw-nav-search.is-resolved .dw-nav-search__mark-ok { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .dw-nav-search__mark > span { 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: flex;
  align-items: center;
  padding: 6px 10px;
  border-radius: 0;
  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);
}

/* ── Essays section: Aktuell (the latest essay) + a flat Years list
   (dushanwegner.com-only). All classes here are additive + namespaced, so
   they are inert on latinprayer.org (shared shell). */

/* Years as a compact 2-column grid. The year the visitor is actually browsing
   (i.e. standing on /essays/{Y}/ or a month within it) is simply BOLD — no
   tint, no rail. Reading a single essay does NOT mark its year: only the
   archive page you're on gets the weight. */
.dw-shell-nav__list--years {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  margin-top: 2px;
}
.dw-shell-nav__list--years a.is-active {
  font-weight: 600;
}

/* 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;
  padding-bottom: 29px; /* quiet close at the bottom, now that the copyright line is retired */
  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 */
}

/* ============================================================
   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.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 (<=1024): 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 (>=1025): 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; }
}