/* === assets/css/daBase.css === */
/* ─────────────────────────────────────────────────────────────────────────────
   DΛREΛKT_ STYLESHEET — daBase.css
   Classification: Absolute Base (NEUTRAL, NON-OVERRIDING)
   Version: 2.0.0 (Layered - No !important)
   File: /assets/css/daBase.css
   Maintainer: DΛREΛKT_ Core UI Team

   Changes (2.0.0):
   - Wrapped in @layer daBase for proper cascade control
   - Removed all !important declarations
   - Safety reset targets pages with NO data-site only
   ─────────────────────────────────────────────────────────────────────────── */

@layer daBase {

/* GLOBAL RESET — foundation only */
html, body {
  margin: 0;
  padding: 0;
  background-color: var(--background-color, #ffffff);
  color: var(--text-color, #111111);
  font-family: var(--font-family-base, 'Inter', 'Roboto', sans-serif);
  min-height: 100vh;
  width: 100%;
  box-sizing: border-box;
  /* 🔒 GENESIS: Prevent horizontal scroll - site should never scroll sideways */
  overflow-x: hidden;
}

*, *::before, *::after {
  box-sizing: inherit;
}

/* LAYOUT ROOTS — NEVER CLAMP OR CENTER AUTOMATICALLY */
#app,
#layout-wrapper,
main,
section,
header,
footer {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
}

/* Layout structure */
#app {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

#layout-wrapper {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
}

/* ZONES */
#layout-wrapper > header,
#layout-wrapper > nav,
#layout-wrapper > main,
#layout-wrapper > footer,
#header-zone,
#nav-zone,
#layout-zones,
#content-zone,
#footer-zone {
  align-self: stretch;
  width: 100%;
  max-width: none;
}

/* FLEX UTILITIES */
.flex { display: flex; align-items: stretch; }
.flex-center { display: flex; align-items: center; justify-content: center; }

.flex > button,
.flex > [role="button"],
.flex > input,
.flex > select,
.flex > textarea {
  flex: 0 0 auto;
  min-width: max-content;
}

.grow    { flex: 1 1 auto; min-width: 0; }
.no-grow { flex: 0 0 auto; min-width: max-content; }

:where([flex],[data-flex]) {
  flex: 0 0 auto;
  align-self: auto;
  min-width: max-content;
}

/* GRID UTILITIES */
.grid  { display: grid; gap: var(--spacing-sm, 8px); }
.grid-2{ grid-template-columns: repeat(2, 1fr); }
.grid-3{ grid-template-columns: repeat(3, 1fr); }
.grid-4{ grid-template-columns: repeat(4, 1fr); }

/* CONTAINERS — no auto max-width or centering EVER */
.container,
.section {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
}

/* Optional helper for explicit centering (only when asked) */
.container.center,
.section.center {
  margin-left: auto;
  margin-right: auto;
  max-width: var(--container-max, 1200px);
  padding-left: var(--spacing-sm, 8px);
  padding-right: var(--spacing-sm, 8px);
}

/* BOX + SPACERS */
.box {
  background: var(--background-color, #fff);
  padding: var(--spacing-md, 16px);
  border-radius: 0.5rem;
  box-shadow: 0 0 8px rgba(0,0,0,.2);
  transition: box-shadow .3s ease;
}
.box:hover { box-shadow: 0 0 12px rgba(0,0,0,.3); }

.spacer    { display: block; width: 100%; }
.spacer-xs { height: var(--spacing-xs, 4px); }
.spacer-sm { height: var(--spacing-sm, 8px); }
.spacer-md { height: var(--spacing-md, 16px); }
.spacer-lg { height: var(--spacing-lg, 24px); }

/* BACKGROUND + BORDERS */
[data-background] {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

[data-border-shadow] {
  border-style: solid;
  border-width: 0px;
  border-color: var(--color-border, #cccccc);
  box-shadow: none;
}

/* ANIMATIONS (safe defaults) */
[data-animation] {
  opacity: 0;
  transform: translateY(20px);
  transition-property: opacity, transform;
  transition-timing-function: ease-out;
}
[data-animation].active { opacity: 1; transform: translateY(0); }
[data-animation="fade-in"].active    { opacity: 1; }
[data-animation="slide-up"].active   { transform: translateY(0); }
[data-animation="slide-left"].active { transform: translateX(0); }
[data-animation="slide-right"].active{ transform: translateX(0); }
[data-animation="zoom-in"].active    { transform: scale(1); }
[data-animation="rotate-in"].active  { transform: rotate(0deg); }

/* ─────────────────────────────────────────────────────────────
   BOOT MODE — Scoped: only triggers when engine is booting
   ───────────────────────────────────────────────────────────── */
body[data-engine="boot"],
#boot-center {
  background: var(--boot-bg, #000);
  color: var(--boot-fg, #0f0);
  font-family: var(--font-family-base, monospace);
  min-height: 100vh;
}

#boot-center {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
}

/* Safety reset when NO site is mounted (prevents white flick on site pages) */
html:not([data-site]) body:not([data-site]) {
  background: var(--background-color, #ffffff);
  color: var(--text-color, #111111);
}

}

/* === assets/css/core.css === */
/* ─── DΛREΛKT_ STYLESHEET — core ─────────────────────────────────────────────
   Classification: Core | Reset + Theme Tokens + Globals (atom-safe)
   Version: 2.2.0  (neutral, non-opinionated, no implicit clamping/centering)
   File: /assets/css/core.css
   ─────────────────────────────────────────────────────────────────────────── */

@layer reset, base, atoms, modules, site;

/* ─── RESET (lowest) ─────────────────────────────────────────────────────── */
@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  html, body { margin: 0; padding: 0; height: 100%; width: 100%; }
}

/* ─── BASE (neutral foundation; NEVER clamps/centers) ───────────────────── */
@layer base {

  /* THEME TOKENS */
  :root{
    --bg:#ffffff; --text:#111111;
    --primary:#4f46e5; --secondary:#3ea8ff;
    --font-main:'Inter','Roboto',sans-serif;

    --gap-xs:.25rem; --gap-sm:.5rem; --gap-md:1rem; --gap-lg:2rem;

    --ctl-h:28px; --ctl-pad-x:10px;
    --ctl-bg:#111; --ctl-bd:#333; --ctl-fg:#bcbcbc; --ctl-fg-muted:#8aa; --ctl-focus:#3ea8ff;
  }
  :root[data-theme="dark"]{
    --bg:#000; --text:#bcbcbc;
    --ctl-bg:#111; --ctl-bd:#333; --ctl-fg:#bcbcbc; --ctl-fg-muted:#8aa; --ctl-focus:#3ea8ff;
  }

  /* BODY (no max-width, no auto-center) */
  body{
    font-family:var(--font-main);
    background-color:var(--bg);
    color:var(--text);
    line-height:1.6;
    font-size:16px;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
    overflow-x:hidden;
    background-size:cover;
    width:100%;
    min-height:100vh;
  }

  /* TYPOGRAPHY */
  h1,h2,h3,h4,h5,h6{ font-family:var(--font-main); font-weight:600; line-height:1.2; }
  p{ margin:0 0 var(--gap-md) 0; }

  /* LINKS */
  a{ color:var(--primary); text-decoration:none; transition:color .25s ease; }
  a:hover{ text-decoration:underline; }

  /* BUTTONS (visuals only; no layout constraints) */
  button{
    font-family:var(--font-main); font-size:1rem;
    padding:var(--gap-sm) var(--gap-md);
    border:none; border-radius:6px; cursor:pointer;
    background-color:var(--primary); color:#fff;
    transition:background-color .25s ease, color .25s ease, border-color .25s ease;
    -webkit-tap-highlight-color:transparent;
  }
  button:hover{ background-color:var(--secondary); }
  button:disabled{ opacity:.6; cursor:not-allowed; }

  /* IMAGES */
  img{ max-width:100%; height:auto; display:block; }

  /* CONTAINER (neutral) — NO implicit width/max/centering */
  .container, .section{
    width:100%;
    max-width:none;
    margin:0;
    padding:0;
  }

  /* EXPLICIT, OPT-IN helpers (use only when you want them) */
  .center{ margin-left:auto; margin-right:auto; }
  .clamp{ max-width:var(--container-max,1200px); }
  .pad-x{ padding-left:var(--gap-lg); padding-right:var(--gap-lg); }
  .w-100{ width:100%; }

  /* BUTTON VARIANTS (visual only) */
  .back-btn{
    display:inline-block; padding:.5rem 1rem; border-radius:8px;
    background-color:var(--primary); color:#fff; border:2px solid var(--primary);
    transition:background-color .25s ease, color .25s ease, border-color .25s ease;
  }
  .back-btn:hover{ background-color:var(--secondary); }

  .btn-primary,#save-theme-btn{ background-color:var(--primary); color:#fff; border:2px solid var(--primary); }
  .btn-primary:hover,#save-theme-btn:hover{ background-color:var(--secondary); }

  .btn-secondary,#reset-theme-btn{ background-color:transparent; color:var(--primary); border:2px solid var(--primary); }
  .btn-secondary:hover,#reset-theme-btn:hover{ background-color:var(--primary); color:var(--bg); }

  .btn-danger,#factory-reset-btn{ background-color:#e11d48; color:#fff; border:2px solid #e11d48; }
  .btn-danger:hover,#factory-reset-btn:hover{ background-color:#be123c; border-color:#be123c; }

  /* Reduced motion */
  @media (prefers-reduced-motion: reduce){
    *{ scroll-behavior:auto; }
  }
}


/* System-wide: visually boost Λ */
.lambda {
  display: inline-block;
  transform: scale(1.22) translateY(-0.04em);
  transform-origin: center;
  text-shadow: 0 0 8px rgba(255,255,255,.14);
}

.lambda {
  transform: scale(1.25) translateY(-0.03em);
  text-shadow: 0 6px 10px rgb(255, 0, 0);
}


/* DΛREΛKT_ — Lambda Identity Glow */
.lambda {
  display: inline-block;
  transform: scale(1.22) translateY(-0.03em);
  transform-origin: center;
  color: #fff;
  text-shadow:
    0 0 4px rgba(255, 0, 0, 0.6),
    0 0 12px rgba(255, 0, 0, 0.4),
    0 0 20px rgba(255, 0, 0, 0.3);
  animation: lambdaGlow 4s ease-in-out infinite alternate;
}

/* Subtle breathing glow animation */
@keyframes lambdaGlow {
  0% {
    text-shadow:
      0 0 2px rgba(255, 0, 0, 0.5),
      0 0 8px rgba(255, 0, 0, 0.4),
      0 0 16px rgba(255, 0, 0, 0.3);
  }
  100% {
    text-shadow:
      0 0 6px rgba(255, 80, 80, 0.8),
      0 0 18px rgba(255, 0, 0, 0.6),
      0 0 30px rgba(255, 0, 0, 0.4);
  }
}

.lambda {
  opacity: 0;
  animation:
    lambdaBoot 0.8s ease-out forwards,
    lambdaGlow 4s ease-in-out infinite alternate 0.8s;
}

@keyframes lambdaBoot {
  0%, 10%, 20%, 30%, 40%, 50% {
    opacity: 0;
  }
  55%, 60%, 70%, 80%, 100% {
    opacity: 1;
  }
}



/* atoms/modules/site layers intentionally left to your project */

/* === tools/modules/ui.canvas/ui.canvas.css === */
/* ────────────────────────────────────────────────────────────────
   DΛREΛKT_ UI — MODULE: ui.canvas
   Version: 3.1.0 | Genesis-Final • Wrapping-Aware • Theme-Safe
   Classification: Core UI | Structural Root | Frameless Baseline
   Maintainer: DΛREΛKT_ CORE UI TEAM
   Host: Global (RuthBowers / Dareakt / Diagnostics / Dev)
   ──────────────────────────────────────────────────────────────── */
@layer ui.canvas {

  /* ── Root Canvas (Frameless Structural Container) ───────────── */
  .ui-canvas[data-module="ui.canvas"],
  .ui-canvas[data-mod="ui_canvas"] {
    width: 100%;
    box-sizing: border-box;
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    isolation: isolate;

    /* Token-aware visual styling */
    padding-inline: var(--edge, 32px);
    background: var(--bg, var(--site-bg, transparent));
    color: var(--fg, var(--site-fg, inherit));

    /* Responsive + scroll control (body owns scroll by default) */
    overflow-y: visible;
    overscroll-behavior: auto;
    scrollbar-gutter: auto;
  }

  /* ── Centered & Max Width Variant ───────────────────────────── */
  .ui-canvas[data-module="ui.canvas"][data-center="1"],
  .ui-canvas[data-mod="ui_canvas"][data-center="1"] {
    margin-inline: auto;
    max-width: var(--max, 14400px);
  }

  /* ── Vertical stacking rhythm (using --stack token) ─────────── */
  /* Default: no auto stacking (content-driven layout) */
  .ui-canvas[data-module="ui.canvas"] > * + *,
  .ui-canvas[data-mod="ui_canvas"] > * + * {
    margin-top: 0;
  }

  /* ── Layout Intent: Editorial pages opt in to stacking ───────── */
  body[data-layout="viewport"] .ui-canvas[data-module="ui.canvas"] > * + *,
  body[data-layout="viewport"] .ui-canvas[data-mod="ui_canvas"] > * + * {
    margin-top: var(--stack, 24px);
  }

  /* ── Scroll toggle (false = lock body scroll) ───────────────── */
  .ui-canvas[data-module="ui.canvas"][data-scroll="0"],
  .ui-canvas[data-mod="ui_canvas"][data-scroll="0"] {
    overflow-y: hidden !important;
  }

  /* ── Scroll toggle (true = canvas owns scroll) ───────────────── */
  .ui-canvas[data-module="ui.canvas"][data-scroll="1"],
  .ui-canvas[data-mod="ui_canvas"][data-scroll="1"] {
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable both-edges;
  }

  /* ── Theme + Scope Awareness ────────────────────────────────── */
  .ui-canvas[data-module="ui.canvas"][data-theme="dark"],
  .ui-canvas[data-mod="ui_canvas"][data-theme="dark"] {
    background: var(--site-bg-dark, #111);
    color: var(--site-fg-dark, #eee);
  }
  .ui-canvas[data-module="ui.canvas"][data-theme="light"],
  .ui-canvas[data-mod="ui_canvas"][data-theme="light"] {
    background: var(--site-bg-light, #fff);
    color: var(--site-fg-light, #111);
  }

  /* ── Internal Helpers (isolate nested atoms) ────────────────── */
  .ui-canvas[data-module="ui.canvas"],
  .ui-canvas[data-mod="ui_canvas"]
  :where(.ui-navbar__inner,
         .ui-section-top__inner,
         .ui-copy__wrap,
         .ui-list__wrap,
         .ui-grid__wrap) {
    padding: 0;
    margin: 0;
  }

  .ui-canvas[data-module="ui.canvas"],
  .ui-canvas[data-mod="ui_canvas"]
  :where(.ui-grid, .ui-grid__wrap, .ui-grid__cell) {
    max-width: none;
    margin: 0;
    padding: 0;
  }

  /* ── Responsive Safety (Stack fallback below 900px) ─────────── */
  @media (max-width: 900px) {
    .ui-canvas[data-module="ui.canvas"],
    .ui-canvas[data-mod="ui_canvas"] {
      padding-inline: var(--edge-mobile, 16px);
    }
  }

  /* ── Debug Overlay (opt-in via data-debug="1") ──────────────── */
  .ui-canvas[data-module="ui.canvas"][data-debug="1"]::before,
  .ui-canvas[data-mod="ui_canvas"][data-debug="1"]::before {
    content: "ui.canvas active";
    position: absolute;
    top: 0.25rem;
    right: 0.5rem;
    font-size: 10px;
    color: var(--fg, #999);
    opacity: 0.4;
    pointer-events: none;
    z-index: 9999;
  }

  /* ── Shadow Isolation Gate (no bleed outside canvas) ───────── */
  .ui-canvas[data-module="ui.canvas"] *,
  .ui-canvas[data-mod="ui_canvas"] * {
    box-sizing: inherit;
  }

  /* ── Layout Intent: Full-height only when explicitly requested ───────── */
  body[data-layout="viewport"] .ui-canvas[data-module="ui.canvas"],
  body[data-layout="viewport"] .ui-canvas[data-mod="ui_canvas"] {
    min-height: 100vh;
    height: 100%;
  }
}

/* === tools/modules/ui.layout/ui.layout.css === */
/* ────────────────────────────────────────────────────────────────
   DΛREΛKT_ UI — MODULE: ui.layout
   Classification : Structural Atom | Grid/Flex Coordinator
   Version        : 3.3.0 | Genesis-Final • Self-Healing • Token-Safe • Canvas-Aware
   Maintainer     : DΛREΛKT_ UI TEAM
   ──────────────────────────────────────────────────────────────── */
@layer ui.layout {

  /* ── Root Layout Container ───────────────────────────────────── */
  .ui-layout[data-module="ui.layout"],
  .ui-layout[data-mod="ui_layout"] {
    display: grid;
    width: 100%;
    min-width: 0;
    min-height: auto;
    box-sizing: border-box;
    position: relative;
    isolation: isolate;

    gap: var(--ui-layout-gap, 0);
    padding-block: var(--ui-layout-padY, 0);
    padding-inline: var(--ui-layout-padX, 0);

    background: var(--ui-layout-bg, transparent);
    color: var(--ui-layout-fg, inherit);
    align-items: var(--ui-layout-align, stretch);
    justify-content: var(--ui-layout-justify, start);

    /* Full-bleed by default — override only if needed */
    margin-inline: 0 !important;
    max-width: none !important;
  }

  /* ── Layout Intent: Only viewport layouts stretch ───────── */
  body[data-layout="viewport"] .ui-layout[data-module="ui.layout"],
  body[data-layout="viewport"] .ui-layout[data-mod="ui_layout"] {
    min-height: 100%;
  }

  /* ── Mode: Grid ──────────────────────────────────────────────── */
  .ui-layout[data-mode="grid"] {
    display: grid;
    grid-template-columns: repeat(
      var(--ui-layout-cols, auto-fit),
      minmax(var(--ui-layout-cell-min, 200px), 1fr)
    );
  }

  /* ── Mode: Flex ──────────────────────────────────────────────── */
  .ui-layout[data-mode="flex"] {
    display: flex;
    flex-direction: row;
    flex-wrap: var(--ui-layout-wrap, wrap);
    align-items: var(--ui-layout-align, stretch);
    justify-content: var(--ui-layout-justify, start);
  }

  /* ── Flex Column Mode (for main layout) ──────────────────────── */
  .ui-layout[data-mode="flex"][data-direction="column"] {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    /* 🔧 FIX: Column layouts must NOT wrap — wrapping pushes children
       into new columns (off-screen right) when content exceeds container height.
       Vertical overflow should scroll, not create horizontal columns. */
    flex-wrap: nowrap;
  }

  /* ── Layout Intent: Full-height only when explicitly requested ───────── */
  body[data-layout="viewport"] .ui-layout[data-mode="flex"][data-direction="column"] {
    min-height: 100%;
  }

  /* ── Mode: Stack ─────────────────────────────────────────────── */
  .ui-layout[data-mode="stack"] {
    display: flex;
    flex-direction: column;
    align-items: var(--ui-layout-align, stretch);
    justify-content: var(--ui-layout-justify, start);
  }

  /* ── Mode: Split (two-column) ───────────────────────────────── */
  .ui-layout[data-mode="split"] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--ui-layout-gap, 32px);
  }

  /* ── Mode: Center ────────────────────────────────────────────── */
  .ui-layout[data-mode="center"] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: auto;
  }

  /* ── Layout Intent: Center mode stretches only in viewport layout ───────── */
  body[data-layout="viewport"] .ui-layout[data-mode="center"] {
    min-height: 100%;
  }

  /* ── Cells ───────────────────────────────────────────────────── */
  .ui-layout__cell {
    display: block;
    min-width: 0;
    flex: 0 0 auto;
    box-sizing: border-box;
  }

  /* Main area grows to fill available space (pushes footer to bottom) */
  .ui-layout__cell[data-area="main"] {
    flex: 1 1 auto;
  }

  /* ── Bleed Mode: Remove padding when section declares bleed intent ───────────────── */
  .ui-layout__cell[data-area="main"][data-bleed="true"] {
    padding-inline: 0;
  }

  /* ── Canvas Awareness (inside ui.canvas) ─────────────────────── */
  .ui-canvas[data-mod="ui_canvas"] :where(.ui-layout) {
    width: 100%;
    margin: 0 !important;
    background: var(--ui-layout-bg, transparent);
  }

  /* ── Responsive Stacking (token-controlled) ─────────────────── */
  @media (max-width: 1280px) {
    .ui-layout[data-stack="lg"] {
      grid-template-columns: 1fr !important;
      flex-direction: column !important;
    }
  }
  @media (max-width: 960px) {
    .ui-layout[data-stack="md"] {
      grid-template-columns: 1fr !important;
      flex-direction: column !important;
    }
  }
  @media (max-width: 640px) {
    .ui-layout[data-stack="sm"] {
      grid-template-columns: 1fr !important;
      flex-direction: column !important;
    }
  }
  @media (max-width: 480px) {
    .ui-layout[data-stack="xs"] {
      grid-template-columns: 1fr !important;
      flex-direction: column !important;
    }
  }

  /* ── Debug Overlay (opt-in) ──────────────────────────────────── */
  /* .ui-layout[data-debug="1"]::before {
       content: "ui.layout active";
       position: absolute;
       top: 0.25rem;
       right: 0.75rem;
       font-size: 10px;
       opacity: 0.4;
       color: #999;
       pointer-events: none;
     } */
}

/* === tools/modules/ui.navbar/ui.navbar.css === */
/* ──────────────────────────────────────────────────────────────────────────────
   DΛREΛKT_ UI — MODULE: ui.navbar
   Classification : UI Atom | Navigation Bar | Wrapping-Aware | Themeable
   Version        : 2.0.0 | Genesis-Final • BEM-Consistent • Responsive • Bus-Linked
   File           : /tools/modules/ui.navbar/ui.navbar.css
   Maintainer     : DΛREΛKT_ UI TEAM
   Runtime Tokens : --ui-navbar-bg, --ui-navbar-bd, --ui-navbar-fg,
                    --ui-navbar-link, --ui-navbar-hover, --ui-navbar-active,
                    --ui-navbar-padY, --ui-navbar-padX, --ui-navbar-gap,
                    --ui-navbar-logo-fs, --ui-navbar-link-fs
   ────────────────────────────────────────────────────────────────────────────── */

/* ─── Layer: Tokens ──────────────────────────────────────────────────────────── */
@layer tokens {
  :root {
    --ui-navbar-bg:      var(--site-bg, #fff);
    --ui-navbar-bd:      var(--site-border, #eee);
    --ui-navbar-fg:      var(--site-fg, #111);
    --ui-navbar-link:    var(--site-fg, #111);
    --ui-navbar-hover:   #000;
    --ui-navbar-active:  #000;
    --ui-navbar-padY:    16px;
    --ui-navbar-padX:    0px;    /* canvas handles side padding */
    --ui-navbar-gap:     24px;
    --ui-navbar-logo-fs: 18px;
    --ui-navbar-link-fs: 15px;
  }
}

/* ─── Layer: Atoms ───────────────────────────────────────────────────────────── */
@layer atoms {
  /* wrapping container */
  .ui-navbar__wrap {
    width: 100%;
    background: var(--ui-navbar-bg);
    border-bottom: 1px solid var(--ui-navbar-bd);
    position: relative;
    z-index: var(--ui-navbar-z, 100);
  }

  /* root element */
  .ui-navbar {
    width: 100%;
    color: var(--ui-navbar-fg);
  }

  /* inner flex row: logo left / menu right */
  .ui-navbar__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ui-navbar-gap);
    padding: var(--ui-navbar-padY) var(--ui-navbar-padX);
    box-sizing: border-box;
    width: 100%;
  }

  /* logo */
  .ui-navbar__logo {
    font-size: var(--ui-navbar-logo-fs);
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--ui-navbar-fg);
    text-decoration: none;
    white-space: nowrap;
    display: inline-block;
    cursor: pointer;
    flex-shrink: 0; /* Prevent logo from shrinking */
  }

  /* menu list */
  .ui-navbar__menu {
    display: flex;
    align-items: center;
    gap: var(--ui-navbar-gap);
    list-style: none;
    margin: 0;
    padding: 0;
    margin-left: auto; /* Push menu to the right */
  }

  .ui-navbar__item {
    margin: 0;
    padding: 0;
  }

  .ui-navbar__link {
    color: var(--ui-navbar-link);
    font-size: var(--ui-navbar-link-fs);
    line-height: 1;
    text-decoration: none;
    padding: 2px 0;
    transition: color .15s ease, text-decoration .15s ease;
  }

  .ui-navbar__link:hover,
  .ui-navbar__link:focus {
    color: var(--ui-navbar-hover);
    text-decoration: underline;
  }

  .ui-navbar__link[aria-current="page"] {
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
    color: var(--ui-navbar-active);
  }

  /* ── Dropdown submenu ──────────────────────────────────────────────────── */
  .ui-navbar__item--has-dropdown {
    position: relative;
  }

  .ui-navbar__dropdown {
    display: none;
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    list-style: none;
    margin: 0;
    padding: 0.5rem 0;
    min-width: 180px;
    background: var(--ui-navbar-bg);
    border: 1px solid var(--ui-navbar-bd);
    border-radius: 6px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
    z-index: 200;
  }

  .ui-navbar__item--has-dropdown:hover > .ui-navbar__dropdown,
  .ui-navbar__item--has-dropdown:focus-within > .ui-navbar__dropdown {
    display: block;
  }

  .ui-navbar__dropdown-item {
    margin: 0;
    padding: 0;
  }

  .ui-navbar__dropdown-link {
    display: block;
    padding: 0.4rem 1rem;
    white-space: nowrap;
    font-size: calc(var(--ui-navbar-link-fs) - 1px);
  }

  .ui-navbar__dropdown-link:hover,
  .ui-navbar__dropdown-link:focus {
    background: rgba(0, 0, 0, 0.04);
  }

  /* ── Hamburger button (hidden on desktop) ──────────────────────────────── */
  .ui-navbar__burger {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: 6px;
    flex-direction: column;
    gap: 5px;
    z-index: 201;
  }

  .ui-navbar__burger span {
    display: block;
    width: 24px;
    height: 2px;
    background: var(--ui-navbar-fg);
    border-radius: 2px;
    transition: transform 0.3s ease, opacity 0.3s ease;
  }

  .ui-navbar__burger--open span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
  }

  .ui-navbar__burger--open span:nth-child(2) {
    opacity: 0;
  }

  .ui-navbar__burger--open span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
  }

  /* optional wrapping diagnostics (builder/inspector layer) */
  .ui-navbar__wrap[data-state="warn"] { outline: 1px dashed orange; }
  .ui-navbar__wrap[data-state="error"] { outline: 1px dashed red; }
  .ui-navbar__wrap[data-state="trust"] { outline: 1px dashed limegreen; }

  /* ── Mobile: hamburger + slide-down menu ─────────────────────────────── */
  @media (max-width: 720px) {
    .ui-navbar__burger {
      display: flex;
    }

    .ui-navbar__inner {
      flex-wrap: wrap;
    }

    .ui-navbar__menu {
      display: none;
      flex-direction: column;
      width: 100%;
      gap: 0;
      padding: 0.5rem 0;
      order: 3;
    }

    .ui-navbar__menu--open {
      display: flex;
    }

    .ui-navbar__item {
      width: 100%;
    }

    .ui-navbar__link {
      display: block;
      padding: 0.75rem 0;
      border-bottom: 1px solid var(--ui-navbar-bd);
    }

    .ui-navbar__dropdown {
      position: static;
      transform: none;
      box-shadow: none;
      border: none;
      padding: 0 0 0 1.5rem;
      min-width: auto;
      background: transparent;
    }

    .ui-navbar__item--has-dropdown > .ui-navbar__dropdown {
      display: block;
    }

    .ui-navbar__dropdown-link {
      padding: 0.5rem 0;
      border-bottom: 1px solid var(--ui-navbar-bd);
    }
  }
}

/* === tools/modules/ui.section.composer/ui.section.composer.css === */
/* ──────────────────────────────────────────────────────────────────────────────
   DΛREΛKT_ UI — MODULE: ui.section.composer
   Classification : Orchestrator | Page Composer | JSON-Driven Renderer | Wrapping-Aware
   Version        : 3.1.0 | Genesis-Final • Token-Harmonized • Layer-Scoped • Schema-Aligned
   File           : /tools/modules/ui.section.composer/ui.section.composer.css
   Maintainer     : DΛREΛKT_ UI TEAM
   ────────────────────────────────────────────────────────────────────────────── */

/* ─── Layer Declaration ─────────────────────────────────────────────────────── */
@layer site, ui.section;

/* ─── Base Container ────────────────────────────────────────────────────────── */
.ui-section-composer {
  display: flex;
  flex-direction: column;
  gap: var(--site-pad, 3rem);
  width: 100%;
  flex: 1 1 auto;
  min-height: 0;
  position: relative;
  isolation: isolate;
  contain: layout paint;
}

/* ─── Fade-in Animation (deprecated - using opacity transition instead) ───── */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ─── Section Placeholder — Production Fallback ─────────────────────────────── */
.section-placeholder {
  padding: clamp(1rem, 2vw, 2rem);
  text-align: center;
  font-size: 0.9rem;
  color: var(--ui-muted, #777);
  border: 1px dashed var(--ui-border, #ccc);
  border-radius: var(--ui-radius, 0.5rem);
  background: var(--ui-bg-alt, #fafafa);
  margin-inline: auto;
  width: min(100%, 900px);
  opacity: 0.85;
  line-height: 1.5;
  backdrop-filter: var(--ui-blur, none);
}

/* ─── Developer Mode Placeholder (DAREAKT_MODE=dev) ─────────────────────────── */
.section-placeholder.dev {
  background: #fff5f5;
  border-color: #ff8888;
  color: #d33;
  font-family: ui-monospace, monospace;
  font-weight: 600;
  letter-spacing: 0.5px;
  padding: 1.5rem;
  box-shadow: inset 0 0 6px rgba(255, 0, 0, 0.1);
}

/* ─── Token Harmony — Site Layer Bridge ─────────────────────────────────────── */
body[data-site] .ui-section-composer {
  --ui-border: var(--site-border, #ccc);
  --ui-bg-alt: var(--site-bg-alt, #fafafa);
  --ui-muted: var(--site-muted, #666);
  --ui-radius: var(--site-radius, 0.5rem);
  --ui-blur: var(--site-blur, none);
}

/* ─── Wrapping Awareness — Structural Markers ───────────────────────────────── */
.ui-section-composer[data-wrapping="layout"] {
  outline: 1px dotted rgba(0, 128, 255, 0.25);
  outline-offset: 3px;
}
.ui-section-composer[data-wrapping="canvas"] {
  outline: 1px dashed rgba(0, 200, 128, 0.25);
  outline-offset: 3px;
}

/* ─── Debug Overlay — Optional Diagnostic Grid ──────────────────────────────── */
.ui-section-composer[data-debug="true"] {
  outline: 1px dotted rgba(0, 0, 0, 0.25);
  outline-offset: 2px;
  background-image: repeating-linear-gradient(
    45deg,
    rgba(0, 0, 0, 0.02) 0,
    rgba(0, 0, 0, 0.02) 2px,
    transparent 2px,
    transparent 4px
  );
}

/* === tools/modules/ui.section.footer/ui.section.footer.css === */
/* ────────────────────────────────────────────────────────────────
   DΛREΛKT_ UI — MODULE: ui.section.footer
   Classification : Layout Section | Footer | Genesis-Final
   Version        : 2.0.1 | Wrapper-Safe • Token-Aligned • Responsive
   File           : /tools/modules/ui.section.footer/ui.section.footer.css
   Maintainer     : DΛREΛKT_ UI TEAM
   ──────────────────────────────────────────────────────────────── */

@layer ui.section.footer {
  /* ─── Root Scope ─────────────────────────────────────────────── */
  .ui-section-footer[data-mod="ui_section_footer"] {
    box-sizing: border-box;
    width: 100%;
    background: var(--ui-sec-footer-bg, var(--site-bg));
    color: var(--ui-sec-footer-fg, var(--site-fg));
    padding: var(--ui-sec-footer-padY, 40px) var(--ui-sec-footer-padX, 24px);
    text-align: center;
    border-top: 1px solid color-mix(in srgb, currentColor 10%, transparent);
    isolation: isolate;
    position: relative;
    z-index: var(--ui-sec-footer-z, 1);
  }

  /* ─── Inner Wrapper ──────────────────────────────────────────── */
  .ui-section-footer__inner {
    max-width: var(--ui-sec-footer-maxWidth, 1200px);
    margin-inline: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: clamp(0.5rem, 1.5vw, 1rem);
    line-height: 1.5;
  }

  /* ─── Links Navigation ───────────────────────────────────────── */
  .ui-section-footer__links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: clamp(0.75rem, 2vw, 1.25rem);
    list-style: none;
    padding: 0;
    margin: 0;
  }

  .ui-section-footer__links a {
    color: inherit;
    text-decoration: none;
    opacity: 0.8;
    font-weight: 500;
    letter-spacing: 0.02em;
    transition: opacity 0.25s ease, color 0.25s ease;
  }

  .ui-section-footer__links a:hover,
  .ui-section-footer__links a:focus-visible {
    opacity: 1;
    color: var(--ui-sec-footer-link-hover, var(--site-accent, currentColor));
  }

  /* ─── Credits ───────────────────────────────────────────────── */
  .ui-section-footer__credits {
    font-size: 0.9rem;
    opacity: 0.7;
    line-height: 1.4;
    text-wrap: balance;
  }

  /* ─── Responsive Adjustments ────────────────────────────────── */
  @media (max-width: 768px) {
    .ui-section-footer[data-mod="ui_section_footer"] {
      padding: calc(var(--ui-sec-footer-padY, 40px) * 0.75)
        calc(var(--ui-sec-footer-padX, 24px) * 0.75);
    }

    .ui-section-footer__inner {
      gap: 0.5rem;
    }

    .ui-section-footer__credits {
      font-size: 0.8rem;
    }
  }
}

/* === tools/modules/ui.section.body/ui.section.body.css === */
/* ────────────────────────────────────────────────────────────────
   DΛREΛKT_ UI — MODULE: ui.section.body
   Classification : Layout Section | JSON-driven | Genesis Safe
   Version        : 2.1.0 | Edge-Token-Aware • DOM-Return-Guaranteed
   File           : /tools/modules/ui.section.body/ui.section.body.css
   Maintainer     : DΛREΛKT_ UI TEAM

   ARCHITECTURE:
   Root (.ui-section-body) = full-width background container.
     → padding-block for vertical spacing
     → NO padding-inline (background must go edge-to-edge)

   Inner (.ui-section-body__inner) = content constraint container.
     → padding-inline via --edge token (site controls the value)
     → optional max-width + centering via data-width="content"
     → NO responsive scaling here — sites set --edge at breakpoints

   Token chain:  --edge  →  --ui-sec-body-padX  →  24px (hardcoded fallback)
   Sites ONLY need to set --edge. Everything responds automatically.
   ──────────────────────────────────────────────────────────────── */

@layer ui.section.body {

  /* ─── Root: full-width background container ──────────────────── */
  .ui-section-body[data-module="ui.section.body"] {
    box-sizing: border-box;
    width: 100%;
    background: var(--ui-sec-body-bg, var(--site-bg));
    color: var(--ui-sec-body-fg, var(--site-fg));
    padding-block: var(--ui-sec-body-padY, 48px);
    padding-inline: 0;
    margin: 0;
  }

  /* ─── Inner: content container with edge padding ─────────────── */
  .ui-section-body__inner {
    max-width: none;
    margin-inline: 0;
    padding-inline: var(--edge, var(--ui-sec-body-padX, 24px));
  }

  /* ─── Opt-in: constrained content width ──────────────────────── */
  .ui-section-body[data-width="content"] .ui-section-body__inner {
    max-width: var(--ui-body-max, 1200px);
    margin-inline: auto;
  }

  /* ─── Opt-in: full-bleed (no padding, no constraint) ─────────── */
  .ui-section-body[data-width="bleed"] .ui-section-body__inner {
    padding-inline: 0;
    margin-inline: 0;
    max-width: none;
  }
}

/* === tools/modules/ui.list.fromJson/ui.list.fromJson.css === */
/* ──────────────────────────────────────────────────────────────────────────────
   DΛREΛKT_ UI — MODULE: ui.list.fromJson
   Classification : UI Atom | JSON-Driven List | Wrapping-Aware
   Version        : 1.1.0 | Genesis-Final • Layered • Token-Scoped
   File           : /tools/modules/ui.list.fromJson/ui.list.fromJson.css
   Maintainer     : DΛREΛKT_ UI TEAM
   ────────────────────────────────────────────────────────────────────────────── */

@layer ui.list {
  /* ─── Wrapper ───────────────────────────────────────────────────────────── */
  .ui-list__wrap {
    width: 100%;
    display: block;
    box-sizing: border-box;
  }

  /* ─── Title ─────────────────────────────────────────────────────────────── */
  .ui-list__title {
    margin: 0 0 1rem 0;
    font-size: var(--ui-list-title-fs, 1.25rem);
    font-weight: var(--ui-list-title-fw, 600);
    color: var(--ui-list-title-fg, #000);
  }

  /* ─── Root List ─────────────────────────────────────────────────────────── */
  .ui-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: var(--ui-list-gap, 16px);
  }

  /* Auto-fill grid - only for non-variant lists */
  @media (min-width: 700px) {
    .ui-list:not(.ui-list--portfolio) {
      grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    }
  }

  /* ─── Items ─────────────────────────────────────────────────────────────── */
  .ui-list__item {
    margin: 0;
    line-height: 1.5;
    color: var(--ui-list-fg, #333);
  }

  /* ─── Links ─────────────────────────────────────────────────────────────── */
  .ui-list__link {
    display: block;
    text-decoration: none;
    color: inherit;
    transition: color 0.25s ease, opacity 0.25s ease;
  }

  .ui-list__link:hover {
    opacity: 0.85;
  }

  /* ─── Thumbnails ─────────────────────────────────────────────────────────── */
  .ui-list__thumb {
    width: 100%;
    height: auto;
    display: block;
    border-radius: var(--ui-list-thumb-radius, 0); /* Default to 0 for clean corners */
  }

  /* ─── Labels ────────────────────────────────────────────────────────────── */
  .ui-list__label {
    display: block;
    margin-top: 8px;
    font-size: var(--ui-list-label-fs, 1rem);
  }

  /* ─── Portfolio Variant ────────────────────────────────────────────────── */
  .ui-list--portfolio {
    display: grid;
    grid-template-columns: repeat(var(--ui-list-cols, 2), minmax(0, 1fr));
    gap: 0; /* No gap between images */
  }

  .ui-list__item--portfolio {
    position: relative;
    overflow: hidden;
    margin: 0;
    padding: 0; /* No padding */
  }

  .ui-list__link--portfolio {
    display: block;
    position: relative;
    width: 100%;
    min-height: 420px;
    text-decoration: none;
    color: inherit;
    transition: background 0.3s ease;
    margin: 0;
    padding: 0; /* No padding */
  }

  .ui-list__thumb--portfolio {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    margin: 0;
    padding: 0; /* No padding */
    border-radius: 0; /* Clean corners, no radius */
    transition: opacity 0.3s ease;
  }

  .ui-list__label--portfolio {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    opacity: 0;
    margin: 0;
    font-size: 1.5rem;
    font-weight: 500;
    text-align: center;
    z-index: 2;
    white-space: nowrap;
    transition: opacity 0.3s ease;
    pointer-events: none;
  }

  .ui-list__link--portfolio:hover {
    background: #fff;
  }

  .ui-list__link--portfolio:hover .ui-list__thumb--portfolio {
    opacity: 0;
  }

  .ui-list__link--portfolio:hover .ui-list__label--portfolio {
    opacity: 1;
  }

  /* Responsive: stack on mobile */
  @media (max-width: 700px) {
    .ui-list--portfolio {
      grid-template-columns: 1fr;
    }
  }

  /* ─── Feedback Variant ────────────────────────────────────────────────────── */
  .ui-list__item--feedback {
    position: relative;
    margin: 0;
    padding: 2rem;
    background: #fff; /* Pure white background */
    border: none; /* No decorative line */
    cursor: default !important; /* Lock: no pointer cursor */
    display: flex;
    align-items: center; /* Vertical centering */
    justify-content: center; /* Horizontal centering */
    min-height: 420px; /* Match portfolio card height for grid alignment */
  }

  .ui-list__item--feedback blockquote {
    margin: 0;
    padding: 0;
    border: none;
    text-align: center; /* Center text horizontally */
    width: 100%;
  }

  /* Quote text styling */
  .ui-list__item--feedback__quote {
    font-size: 1.125rem;
    line-height: 1.6;
    color: var(--ui-list-feedback-quote-fg, #333);
    margin: 0 0 1rem 0;
    font-style: italic;
    text-align: center; /* Center quote text */
  }

  /* Author attribution styling */
  .ui-list__item--feedback__cite {
    display: block;
    font-size: 0.875rem;
    color: var(--ui-list-feedback-cite-fg, #666);
    font-style: normal;
    font-weight: 500;
    text-align: center; /* Center attribution */
  }

  /* Lock: no hover effects for feedback */
  .ui-list__item--feedback:hover {
    background: #fff; /* Pure white, no change on hover */
  }

  /* Lock: ensure feedback items are not clickable */
  .ui-list__item--feedback a {
    pointer-events: none;
    cursor: default;
  }
}

/* ─── Wrapping Awareness Tokens (Optional) ───────────────────────────────────
   These ensure spacing behaves correctly when the list is wrapped
   by ui.canvas / ui.section.body / ui.grid containers.
   You can override them via theme or site tokens.
   -------------------------------------------------------------------------- */
:root {
  --ui-list-gap: 16px;
  --ui-list-thumb-radius: 0; /* Clean corners by default */
  --ui-list-fg: #333;
  --ui-list-title-fg: #000;
}

/* === tools/modules/ui.copy.fromJson/ui.copy.fromJson.css === */
/* ──────────────────────────────────────────────────────────────────────────────
   DΛREΛKT_ UI — ui.copy (shared styles)
   Version: 1.0.0
   • Typography tokens for readable copy blocks
   • Generic/neutral defaults - sites can override via CSS custom properties
   ──────────────────────────────────────────────────────────────────────────── */

@layer ui.copy {
  :root {
    --ui-copy-max: 720px;
    --ui-copy-margin-inline: auto; /* Allow sites to override centering */
    --ui-copy-gap: 1rem;
    --ui-copy-fg: #222;
    --ui-copy-fs: 1.125rem;
    --ui-copy-lh: 1.65;
  }

  .ui-copy__wrap {
    width: 100%;
    display: block;
  }

  .ui-copy {
    max-width: var(--ui-copy-max, 720px);
    margin: 0 var(--ui-copy-margin-inline, auto); /* Use variable for centering */
  }

  .ui-copy__item {
    margin: 0 0 var(--ui-copy-gap, 1rem) 0;
    color: var(--ui-copy-fg, #222);
    font-size: var(--ui-copy-fs, 1.125rem);
    line-height: var(--ui-copy-lh, 1.65);
  }

  .ui-copy__item em {
    font-style: italic;
  }
}

/* === tools/modules/ui.aboutBlock/ui.aboutBlock.css === */
/* ────────────────────────────────────────────────────────────────
   DΛREΛKT_ UI — ABOUT BLOCK
   Semantic unit that renders intro text + notes list together.
   ──────────────────────────────────────────────────────────────── */
@layer components {
  .ui-about-block {
    display: block;
    width: 100%;
  }

  .ui-about-block__intro {
    margin: 0 0 1.5rem 0;
  }

  .ui-about-block__list {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .ui-about-block__list::before,
  .ui-about-block__list::after {
    display: none;
  }

  .ui-about-block__item {
    margin: 0 0 0.5rem 0;
    padding: 0;
  }
}


/* === tools/modules/ui.columns/ui.columns.css === */
/* ────────────────────────────────────────────────────────────────
   DΛREΛKT_ UI — COLUMNS
   Two-column layout with independent vertical stacks.
   ──────────────────────────────────────────────────────────────── */
@layer components {
  .ui-columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: var(--ui-columns-gap, calc(var(--site-pad) * 3));
    width: 100%;
  }

  .ui-columns__column {
    display: flex;
    flex-direction: column;
    gap: var(--site-pad, 2rem);
    min-width: 0;
    max-width: 100%;
    overflow-wrap: break-word;
    word-wrap: break-word;
  }

  .ui-columns__column > * {
    display: block;
    width: 100%;
    flex-shrink: 0;
  }

  /* Allow flex containers to override block display */
  .ui-columns__column > [data-module="ui.flex"] {
    display: flex;
    width: auto;
  }

  /* ─── Responsive Stacking ────────────────────────────────────── */
  /* Tablet - stack columns */
  @media (max-width: 1024px) {
    .ui-columns {
      grid-template-columns: 1fr;
      row-gap: calc(var(--site-pad, 2rem) * 1.5);
    }
  }

  /* Mobile - tighter spacing */
  @media (max-width: 640px) {
    .ui-columns {
      row-gap: var(--site-pad, 2rem);
    }

    .ui-columns__column {
      gap: var(--site-pad-sm, 1rem);
    }
  }
}


/* === tools/modules/ui.sectionBlock/ui.sectionBlock.css === */
/* ────────────────────────────────────────────────────────────────
   DΛREΛKT_ UI — SECTION BLOCK
   Semantic unit that renders prompt + title + blurb + list together.
   ──────────────────────────────────────────────────────────────── */
@layer components {
  .ui-section-block {
    display: block;
    width: 100%;
  }

  /* Icon styling - subtle marker, not a badge */
  .ui-section-block__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin-bottom: 0.5rem;
    color: var(--site-accent, #2d5016);
    opacity: 0.7;
    /* No background - icon as marker only */
  }

  .ui-section-block__icon svg {
    width: 22px;
    height: 22px;
    stroke-width: 1.75;
  }

  .ui-section-block__prompt {
    margin: 0 0 0.5rem 0;
    font-weight: 600;
  }

  .ui-section-block__title {
    margin: 0 0 0.375rem 0;
    font-weight: 650;
    line-height: 1.25;
  }

  .ui-section-block__blurb {
    margin: 0;
    line-height: 1.5;
    color: var(--site-muted, #555);
  }

  .ui-section-block__list {
    margin: 0;
    padding: 0;
    list-style: none !important;
  }

  .ui-section-block__item {
    margin: 0 0 0.5rem 0;
    padding: 0;
    list-style: none !important;
  }

  .ui-section-block__item::before,
  .ui-section-block__item::after {
    display: none;
    content: none;
  }
}

/* === tools/modules/ui.serviceBlock/ui.serviceBlock.css === */
/* ────────────────────────────────────────────────────────────────
   DΛREΛKT_ UI — SERVICE BLOCK
   Semantic unit that renders heading + description + image.
   ──────────────────────────────────────────────────────────────── */
@layer components {
  .ui-service-block {
    display: block;
    width: 100%;
  }

  /* Icon styling - subtle marker, not a badge */
  .ui-service-block__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin-bottom: 0.5rem;
    color: var(--site-accent, #2d5016);
    opacity: 0.7;
    /* No background - icon as marker only */
  }

  .ui-service-block__icon svg {
    width: 22px;
    height: 22px;
    stroke-width: 1.75;
  }

  .ui-service-block__title {
    margin: 0 0 0.375rem 0;
    font-weight: 650;
    line-height: 1.25;
  }

  /* Clickable card — stretched link pattern */
  .ui-service-block[data-href] {
    position: relative;
  }

  .ui-service-block__title a {
    color: inherit;
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: border-color 0.2s ease;
  }

  /* Stretched link: ::after covers the whole card */
  .ui-service-block__link::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
  }

  .ui-service-block__title a:hover {
    color: var(--site-accent, #2d5016);
    border-bottom-color: var(--site-accent, #2d5016);
  }

  .ui-service-block__subtitle {
    display: block;
    font-size: 0.8rem;
    color: var(--site-muted, #888);
    margin-bottom: 0.375rem;
    letter-spacing: 0.3px;
  }

  .ui-service-block__description {
    margin: 0 0 1rem 0;
    line-height: 1.5;
    color: var(--site-muted, #555);
  }

  /* Image frame - soft, summer afternoon feel */
  .ui-service-block__image-wrap {
    margin-top: 1rem;
    border: 6px solid var(--site-border, #a8d5a8);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
  }

  .ui-service-block__image {
    width: 100%;
    height: auto;
    display: block;
  }

  .ui-service-block__list {
    margin: 0;
    padding: 0;
    list-style: none !important;
  }

  .ui-service-block__list::before,
  .ui-service-block__list::after {
    display: none;
  }

  .ui-service-block__item {
    margin: 0 0 0.5rem 0;
    padding: 0;
    list-style: none !important;
  }

  .ui-service-block__item::before,
  .ui-service-block__item::after {
    display: none;
    content: none;
  }
}

/* === tools/modules/ui.project.viewer/ui.project.viewer.css === */
/* ────────────────────────────────────────────────────────────────
   DΛREΛKT_ MODULE — ui.project.viewer
   Classification : Module Layout Override | Flush-Body Alignment
   Scope          : Project Viewer Module Only
   Version        : 2.1.1 | Genesis-Final • Transitional • Safe-Override
   Layer          : module
   ──────────────────────────────────────────────────────────────── */

/*
  NOTE:
  This file corrects hard-coded layout constraints inside ui.project.viewer.
  It is MODULE-scoped, not site-scoped.
  !important is used ONLY to neutralise legacy layout constraints.
  Spacing is TOKENISED and must remain overrideable.
*/

@layer module {

  /* ─── Neutralize desktop width limits imposed by module ───── */
  @media (min-width: 1200px) {
    #project-body .project__head,
    #project-body .project__body {
      width: 100% !important;
      max-width: none !important;
      margin: 0 !important;
      padding: 0 !important;
    }
  }

  /* ─── Project credit spacing (token surface) ─────────────── */
  #project-body .project__credit {
    margin-block: var(--project-credit-gap, 0);
  }

  /* ─── Gallery → body separation (TOKENISED) ──────────────── */
  #project-body .project__gallery {
    display: block !important;
    width: 100% !important;
    padding: 0 !important;

    /* DO NOT zero margin here */
    margin-bottom: var(--project-gallery-gap, 0);
  }

  /* ─── Gallery figure rhythm (internal stacking only) ─────── */
  #project-body .project__gallery .project__fig {
    margin: 0;
    margin-bottom: var(--ui-gap-md, 1.25rem);
    padding: 0;
  }

  /* Remove internal gap only, not container gap */
  #project-body .project__gallery .project__fig:last-child {
    margin-bottom: 0;
  }

  /* ─── Inline body figures ───────────────────────────────── */
  #project-body .project__body figure {
    margin: 0;
    margin-bottom: var(--ui-gap-md, 1.25rem);
    padding: 0;
  }

  #project-body .project__body figure:last-child {
    margin-bottom: 0;
  }

  /* ─── Image reset ───────────────────────────────────────── */
  #project-body .project__img,
  #project-body .project__gallery img {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    border-radius: 0 !important;
  }
}

/* ────────────────────────────────────────────────────────────────
   Notes:
   • Tokens MUST NOT be overridden by !important.
   • !important is only valid for legacy layout neutralisation.
   • Spacing is a site concern via tokens.
   • This file is transitional and will be removed once
     ui.project.viewer exposes native layout tokens.
   ──────────────────────────────────────────────────────────────── */

/* === tools/modules/ui.form/ui.form.css === */
/* ─────────────────────────────────────────────────────────────────────────────
   DΛREΛKT_ UI ATOM — ui.form
   Version: 2.0.0 | Genesis-Final • BEM-Locked • Token-Driven • Motion-Safe
   File: /tools/modules/ui.form/ui.form.css
   Maintainer: DΛREΛKT_ UI TEAM
   ───────────────────────────────────────────────────────────────────────────── */

@layer ui.form {

  :root {
    --ui-form-gap:         16px;
    --ui-form-gap-field:   12px;

    --ui-form-btn-h:       38px;
    --ui-form-btn-radius:  8px;
    --ui-form-btn-pad-x:   18px;

    --ui-form-btn-fg:      var(--theme-text-inverse, #fff);
    --ui-form-btn-bg:      var(--theme-accent, #005cff);
    --ui-form-btn-hover:   var(--theme-accent-hover, #0047d9);
    --ui-form-btn-focus:   var(--theme-accent-focus, #003bb3);
    --ui-form-btn-disabled: rgba(255,255,255,0.4);

    --ui-form-border:      var(--theme-border, currentColor);
  }

  /* Host Root */
  .ui-form[data-mod="ui_form"] {
    display: grid;
    gap: var(--ui-form-gap);
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  /* Fieldset Wrapper */
  .ui-form[data-mod="ui_form"] .ui-form__fields {
    display: grid;
    gap: var(--ui-form-gap-field);
  }

  /* Row (BEM base) */
  .ui-form[data-mod="ui_form"] .ui-form__row {
    display: grid;
    gap: 4px;
  }

  /* Per-field error message */
  .ui-form[data-mod="ui_form"] .ui-form__msg {
    font-size: 0.85em;
    color: var(--theme-error, #ff6060);
    line-height: 1.2;
  }

  /* Global message area */
  .ui-form[data-mod="ui_form"] .ui-form__global-msg {
    font-size: 0.9em;
    color: var(--theme-error, #ff6060);
    padding-top: 4px;
  }

  /* Actions Row */
  .ui-form[data-mod="ui_form"] .ui-form__actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 8px;
  }

  /* Submit Button (geometry-locked) */
  .ui-form[data-mod="ui_form"] .ui-form__submit {
    -webkit-appearance: none;
    appearance: none;
    font: inherit;
    line-height: var(--ui-form-btn-h);
    height: var(--ui-form-btn-h);
    padding: 0 var(--ui-form-btn-pad-x);
    border: 1px solid var(--ui-form-border);
    border-radius: var(--ui-form-btn-radius);
    color: var(--ui-form-btn-fg);
    background: var(--ui-form-btn-bg);
    cursor: pointer;
    user-select: none;
    transition: background .2s ease, color .2s ease, opacity .2s ease;
  }

  .ui-form[data-mod="ui_form"] .ui-form__submit:hover {
    background: var(--ui-form-btn-hover);
  }

  .ui-form[data-mod="ui_form"] .ui-form__submit:focus-visible {
    outline: 2px solid var(--ui-form-btn-focus);
    outline-offset: 1px;
  }

  .ui-form[data-mod="ui_form"] .ui-form__submit:active {
    filter: none;
    transform: none;
  }

  .ui-form[data-mod="ui_form"][data-loading="1"] .ui-form__submit,
  .ui-form[data-mod="ui_form"] .ui-form__submit[aria-disabled="true"],
  .ui-form[data-mod="ui_form"] .ui-form__submit:disabled {
    opacity: .6;
    cursor: not-allowed;
    background: var(--ui-form-btn-disabled);
  }

  /* Error state highlight */
  .ui-form[data-mod="ui_form"] .has-error .ui-field__input {
    border-color: var(--theme-error, #ff6060);
  }

  /* Reduced-motion users */
  @media (prefers-reduced-motion: reduce) {
    .ui-form[data-mod="ui_form"] .ui-form__submit {
      transition: none;
    }
  }
}

/* === tools/modules/ui.field/ui.field.css === */
/* ──────────────────────────────────────────────────────────────────────────────
   DΛREΛKT_ UI — FIELD ATOM
   Classification : UI Atom | Input Layer | Token-Driven | Theme + Wrap Aware
   Version        : 2.0.0 | Genesis-Final • Token-Harmonized • Safe-Fallback
   File           : /tools/modules/ui.field/ui.field.css
   Maintainer     : DΛREΛKT_ UI TEAM
   Runtime        : { type:"style", trusted:true, async:false, sandbox:false }
   ────────────────────────────────────────────────────────────────────────────── */

@layer ui.field {

  /* ─── Root Host ─────────────────────────────────────────────────────────── */
  .ui-field[data-mod="ui_field"] {
    display: grid;
    gap: var(--ufd-gap, 6px);
    color: var(--ufd-fg, inherit);
    inline-size: 100%;
    min-inline-size: 0;
    position: relative;
    transition: all 0.25s ease-in-out;
  }

  /* ─── Label + Required Marker ───────────────────────────────────────────── */
  .ui-field__label {
    font-size: 0.9rem;
    font-weight: 600;
    opacity: 0.9;
    color: var(--ufd-fg, inherit);
  }

  .ui-field__req {
    color: #e66;
    margin-inline-start: 2px;
  }

  /* ─── Shell (Structure) ─────────────────────────────────────────────────── */
  .ui-field__shell {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 8px;
  }

  .ui-field__prefix[hidden],
  .ui-field__suffix[hidden] {
    display: none !important;
  }

  .ui-field__control {
    display: contents;
  }

  /* ─── Input Core ───────────────────────────────────────────────────────── */
  .ui-field__input {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid var(--ufd-bd, rgba(255,255,255,.2));
    border-radius: var(--ufd-radius, 10px);
    background: var(--ufd-bg, transparent);
    color: var(--ufd-fg, inherit);
    padding: var(--ufd-pad, 0.55rem 0.75rem);
    outline: none;
    transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
  }

  .ui-field__input:hover:not(:disabled) {
    border-color: color-mix(in srgb, var(--ufd-btn-bg, #fff) 40%, transparent);
  }

  .ui-field__input:focus {
    border-color: var(--ufd-btn-bg, #fff);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--ufd-btn-bg, #fff) 25%, transparent);
  }

  /* ─── Checkbox Variant ─────────────────────────────────────────────────── */
  .ui-field__input--checkbox {
    width: auto;
    inline-size: 1.1rem;
    block-size: 1.1rem;
    padding: 0;
    accent-color: var(--ufd-btn-bg, #fff);
  }

  /* ─── Help / Message Text ──────────────────────────────────────────────── */
  .ui-field__help {
    font-size: var(--ufd-help, 0.85rem);
    opacity: 0.8;
    color: var(--ufd-fg-muted, #aaa);
  }

  .ui-field__msg {
    font-size: var(--ufd-msg, 0.85rem);
    color: color-mix(in srgb, tomato 85%, var(--ufd-bg, #000));
    margin-block-start: 2px;
  }

  .ui-field__msg[hidden] { display: none; }

  /* ─── Error State ─────────────────────────────────────────────────────── */
  .has-error .ui-field__input {
    border-color: color-mix(in srgb, tomato 70%, var(--ufd-bd, rgba(255,255,255,.2)));
    box-shadow: 0 0 0 1px color-mix(in srgb, tomato 35%, transparent);
  }

  /* ─── Disabled State ───────────────────────────────────────────────────── */
  .ui-field__input:disabled {
    opacity: .6;
    cursor: not-allowed;
  }

  /* ─── Density Modifiers ───────────────────────────────────────────────── */
  .ui-field[data-density="dense"] .ui-field__input {
    padding-block: 0.3rem;
  }

  .ui-field[data-density="roomy"] .ui-field__input {
    padding-block: 0.8rem;
  }

  /* ─── Theme Awareness (Site Token Bridges) ─────────────────────────────── */
  [data-theme="dark"] .ui-field {
    --ufd-bd: rgba(255,255,255,.2);
    --ufd-bg: transparent;
    --ufd-fg: var(--site-fg, #eee);
  }

  [data-theme="light"] .ui-field {
    --ufd-bd: rgba(0,0,0,.2);
    --ufd-bg: transparent;
    --ufd-fg: var(--site-fg, #111);
  }

  /* ─── Motion Reduction (Accessibility Compliance) ─────────────────────── */
  @media (prefers-reduced-motion: reduce) {
    .ui-field { transition: none !important; }
  }

  /* ─── Genesis Token Bridges (System Defaults) ─────────────────────────── */
  :root {
    --ufd-gap: 6px;
    --ufd-pad: 0.55rem 0.75rem;
    --ufd-radius: 10px;
    --ufd-bd: rgba(255,255,255,.2);
    --ufd-fg: inherit;
    --ufd-bg: transparent;
    --ufd-btn-bg: #fff;
    --ufd-btn-fg: #111;
    --ufd-help: 0.85rem;
    --ufd-msg: 0.85rem;
  }

}

/* === tools/modules/auth.login/auth.login.css === */
@layer atoms {
  [data-atom="auth.login"] .al{ display:grid; gap: var(--al-gap,10px); padding: var(--al-pad,0); }
  [data-atom="auth.login"] .row{ display:grid; gap:6px; }
  [data-atom="auth.login"] label{ opacity:.9; font-size:.9rem; }
  [data-atom="auth.login"] input{
    padding:10px 12px; border:1px solid var(--al-bd, rgba(255,255,255,.2));
    border-radius: var(--al-radius,10px); background: var(--al-bg, transparent); color: var(--al-fg, inherit);
  }
  [data-atom="auth.login"] .actions{ margin-top:6px; display:flex; justify-content:flex-end; }
  [data-atom="auth.login"] .btn{
    appearance:none; border:1px solid transparent; border-radius: var(--al-radius,10px);
    background: var(--al-btn-bg, #fff); color: var(--al-btn-fg, #111); padding:10px 14px; cursor:pointer;
  }
  [data-atom="auth.login"] .msg{ color:#ffb3b3; font-size:.9rem; margin:4px 0 0; }
}

/* === sites/ruthbowers/css/site.css === */
/* ────────────────────────────────────────────────────────────────
   Ruth Bowers — Production-Clean Site Stylesheet
   Version : 2.6.0 | Genesis-Final • Canvas-Safe • Grid-Aligned • Site-Frame • Full-Bleed
   ──────────────────────────────────────────────────────────────── */
   
   /* ─── SITE FRAME CONTRACT ──────────────────────────────────────────────── */
   /* 
   * CRITICAL RULE: Only the site frame may define layout geometry.
   * Pages must never set outer padding or width.
   * 
   * The frame owns:
   *   - Header, Footer, Layout container (mounted once, persistent)
   *   - Horizontal padding (via --edge token on ui.canvas - single source of truth)
   *   - Layout mode (viewport for all pages)
   *   - Vertical rhythm start point
   * 
   * Padding Architecture:
   *   - ui.canvas has padding-inline: var(--edge, 32px)
   *   - --edge is set to var(--site-pad) for Ruth Bowers
   *   - All children (header, main, footer) inherit this padding automatically
   *   - Individual cells should NOT set their own padding-inline
   * 
   * Pages are NOT allowed to:
   *   - Set page-level padding
   *   - Control global width
   *   - Push header/footer spacing
   *   - Define layout mode
   *   - Create outer wrappers (.page, .container, .wrap, .content-area)
   * 
   * Admin vs Site:
   *   - Admin is a MODE, not a different layout
   *   - Admin differs only in: content, tools, tabs, permissions
   *   - Admin NEVER differs in: layout, width, padding, frame structure
   * 
   * Frame Lifecycle:
   *   - Frame mounts once at boot
   *   - Header and footer never remount
   *   - Only main area content swaps on navigation
   *   - Same DOM identity across all pages
   */
   /* ──────────────────────────────────────────────────────────────────────── */
   
   @layer site {

    /* ─── Global Tokens (root-scoped for early availability) ───────── */
:root,
body[data-site="ruthbowers"] {
  --site-pad: clamp(0.75rem, 2vw, 1.25rem);
  --edge: var(--site-pad); /* Canvas padding - single source of truth for frame padding */
  --site-bg: #fff;
  --site-fg: #222;
  --site-font-family: 'Inter', 'Roboto', sans-serif;
  --about-gap: 64px;
  --about-gap-wide: 100px;
  
  /* ─── Layout Padding Tokens (default: zero, opt-in via layout intent) ───────── */
  --ui-layout-padX: 0;
  --ui-layout-padY: 0;
  --ui-layout-gap: 0;
  
  /* ─── Unified Spacing System (consistent across all pages) ───────── */
  --page-top-gap: calc(var(--site-pad) * 2);        /* Gap between navbar and content */
  --page-content-padding: var(--site-pad);           /* Horizontal padding for main content */
  --page-content-max-width: 100%;                   /* Max width for content containers */
  --page-section-gap: calc(var(--site-pad) * 1.5);  /* Gap between sections */
  
  /* ─── Project Viewer: gallery → text spacing ─────────────────── */
  --project-gallery-gap: clamp(1.25rem, 3vw, 2.5rem);
  
  color-scheme: light;
}
    
    /* ─── Base Reset ───────────────────────────────────────────────── */
    body[data-site="ruthbowers"],
    body[data-site="ruthbowers"] *,
    body[data-site="ruthbowers"] *::before,
    body[data-site="ruthbowers"] *::after {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      font-family: var(--site-font-family) !important;
    }
    
    /* ─── Body / Document Frame ────────────────────────────────────── */
    /* Full height required for sticky footer */
    html {
      height: 100%;
    }
    
    html,
    body[data-site="ruthbowers"] {
      height: 100%; /* Full height for sticky footer */
      min-height: 100%;
      overflow-x: hidden;
      overflow-y: auto !important; /* Body owns scrolling to avoid inner scrollers */
      background: var(--site-bg, #fff);
      color: var(--site-fg, #222);
      font-family: var(--site-font-family);
      line-height: 1.6;
      isolation: isolate;
    }

    /* ─── SITE FRAME: All pages use viewport layout mode ───────── */
    /* ⚠️ CRITICAL: All pages (site + admin) MUST use data-layout="viewport" */
    /* Admin vs Site is content + tooling, not geometry */
    /* DO NOT create admin-specific layout modes - this breaks frame consistency */
html[data-site="ruthbowers"] {
  --site-header-height: 52px; /* Contract: header height is fixed pre-paint */
  margin: 0;
  padding: 0;
}

html[data-site="ruthbowers"] body {
  margin: 0;
  padding: 0;
  overflow-y: scroll; /* Reserve scrollbar space to prevent body shifts */
}

body[data-site="ruthbowers"][data-layout="viewport"],
html[data-site="ruthbowers"] body[data-layout="viewport"] {
      display: flex;
      flex-direction: column;
      height: 100%;
      
      /* ─── Layout spacing tokens (frame owns padding via --site-pad) ───────── */
      /* Frame padding is applied directly to layout cells, not via these tokens */
      --ui-layout-padX: 0;
      --ui-layout-padY: 0;
      --ui-layout-gap: 0;
    }
    
    /* ─── SITE FRAME: All pages use same layout mode ───────── */
    /* Admin vs Site is content + tooling, not geometry */
    /* No admin-specific layout branching - frame is unified */
    
    /* ─── Structural Blocks ────────────────────────────────────────── */
    body[data-site="ruthbowers"] header,
    body[data-site="ruthbowers"] main,
    body[data-site="ruthbowers"] section,
    body[data-site="ruthbowers"] footer {
      width: 100%;
      background: var(--site-bg, #fff);
      color: var(--site-fg);
    }
    
    /* ─── SITE FRAME: Canvas always owns viewport height (sticky footer) ───────── */
    /* Canvas MUST be a flex container - override module default display: block */
    /* This is REQUIRED for sticky footer - applies to ALL pages (site + admin) */
    body[data-site="ruthbowers"] .ui-canvas[data-module="ui.canvas"],
    body[data-site="ruthbowers"] .ui-canvas[data-mod="ui_canvas"] {
      display: flex !important; /* Override module default display: block */
      flex-direction: column !important;
      min-height: 100vh !important; /* Own the viewport height - always, not conditional */
    }
    
    /* ─── SITE FRAME: Layout-root wrappers must be transparent to flex (sticky footer) ───────── */
    /* Modules with role="layout-root" in manifest participate in page structure */
    /* The wrapper between canvas and layout MUST be flex to allow height propagation */
    /* This uses semantic role-based classes instead of module-specific selectors */
    body[data-site="ruthbowers"] .ui-canvas > .module-wrapper.is-layout-root {
      display: flex !important;
      flex-direction: column !important;
      flex: 1 1 auto !important; /* Stretch to fill canvas - transparent to layout */
      min-height: 0; /* Allow flex shrinking */
    }
    
    /* ─── SITE FRAME: Layout stretches inside wrapper (sticky footer) ───────── */
    /* Layout MUST stretch to fill wrapper - this is REQUIRED for sticky footer */
    /* Applies to ALL pages (site + admin) */
    body[data-site="ruthbowers"] .ui-layout[data-module="ui.layout"],
    body[data-site="ruthbowers"] .ui-layout[data-mod="ui_layout"] {
      display: flex !important;
      flex-direction: column !important;
      flex-wrap: nowrap !important;
      flex: 1 1 auto !important; /* Stretch to fill wrapper - MUST match wrapper height */
      min-height: 0; /* Allow flex shrinking */
      width: 100% !important; /* Prevent side-by-side layout collapse */
      align-items: stretch !important; /* Force full-width cells */
    }

/* Ensure header/main/footer span full width (stacked, not side-by-side) */
body[data-site="ruthbowers"] .ui-layout__cell[data-area="header"],
body[data-site="ruthbowers"] .ui-layout__cell[data-area="main"],
body[data-site="ruthbowers"] .ui-layout__cell[data-area="footer"] {
  width: 100% !important;
  min-width: 0;
  align-self: stretch;
}

/* ─── Navbar baseline (avoid late CSS shift before module styles load) ───────── */
body[data-site="ruthbowers"] .ui-layout__cell[data-area="header"],
html[data-site="ruthbowers"] body .ui-layout__cell[data-area="header"] {
  height: var(--site-header-height);
  min-height: var(--site-header-height);
  max-height: var(--site-header-height);
}

body[data-site="ruthbowers"] .ui-navbar__wrap,
html[data-site="ruthbowers"] body .ui-navbar__wrap {
  height: 100%;
}

body[data-site="ruthbowers"] .ui-navbar__inner,
html[data-site="ruthbowers"] body .ui-navbar__inner {
  height: var(--site-header-height);
  padding-block: 0;
  box-sizing: border-box;
  align-items: center;
}

body[data-site="ruthbowers"] .ui-navbar__menu {
  margin: 0;
  padding: 0;
  list-style: none;
}

body[data-site="ruthbowers"] .ui-navbar__link,
html[data-site="ruthbowers"] body .ui-navbar__link {
  line-height: var(--site-header-height);
  font-size: 15px;
}

/* ─── Navbar active state (route-driven, avoids stale aria-current) ─── */
body[data-site="ruthbowers"] .ui-navbar__link[aria-current="page"] {
  font-weight: inherit;
  text-decoration: none;
  color: inherit;
}

body[data-site="ruthbowers"][data-active-page="portfolio"] .ui-navbar__link[href="#/portfolio"],
body[data-site="ruthbowers"][data-active-page="about"] .ui-navbar__link[href="#/about"],
body[data-site="ruthbowers"][data-active-page="workwithme"] .ui-navbar__link[href="#/workwithme"],
body[data-site="ruthbowers"][data-active-page="contact"] .ui-navbar__link[href="#/contact"],
body[data-site="ruthbowers"][data-active-page="project"] .ui-navbar__link[href="#/portfolio"],
body[data-site="ruthbowers"][data-page="portfolio"] .ui-navbar__link[href="#/portfolio"],
body[data-site="ruthbowers"][data-page="about"] .ui-navbar__link[href="#/about"],
body[data-site="ruthbowers"][data-page="workwithme"] .ui-navbar__link[href="#/workwithme"],
body[data-site="ruthbowers"][data-page="contact"] .ui-navbar__link[href="#/contact"],
body[data-site="ruthbowers"][data-page="project"] .ui-navbar__link[href="#/portfolio"] {
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  color: var(--ui-navbar-active, #000);
}

body[data-site="ruthbowers"] .ui-navbar__logo,
html[data-site="ruthbowers"] body .ui-navbar__logo {
  line-height: var(--site-header-height);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.02em;
  white-space: nowrap;
  display: inline-block;
}

/* ─── Mobile header + navbar wrapping ─────────────────────────────── */
@media (max-width: 720px) {
  body[data-site="ruthbowers"] .ui-layout__cell[data-area="header"],
  html[data-site="ruthbowers"] body .ui-layout__cell[data-area="header"] {
    height: auto;
    min-height: 0;
    max-height: none;
  }

  body[data-site="ruthbowers"] .ui-navbar__wrap,
  html[data-site="ruthbowers"] body .ui-navbar__wrap {
    height: auto;
  }

  body[data-site="ruthbowers"] .ui-navbar__inner,
  html[data-site="ruthbowers"] body .ui-navbar__inner {
    height: auto;
    flex-wrap: wrap;
    row-gap: 8px;
    align-items: center;
    padding-block: 10px;
  }

  body[data-site="ruthbowers"] .ui-navbar__menu,
  html[data-site="ruthbowers"] body .ui-navbar__menu {
    width: 100%;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 12px 16px;
  }

  body[data-site="ruthbowers"] .ui-navbar__link,
  html[data-site="ruthbowers"] body .ui-navbar__link {
    line-height: 1.2;
  }

  body[data-site="ruthbowers"] .ui-navbar__logo,
  html[data-site="ruthbowers"] body .ui-navbar__logo {
    line-height: 1.1;
  }
}
    
    /* ─── SITE FRAME: Layout cells flex distribution (sticky footer) ───────── */
    /* Override module default flex: 1 1 auto on all cells */
    /* Header and footer must NOT flex - only main consumes space */
    
    body[data-site="ruthbowers"] .ui-layout__cell[data-area="header"] {
      display: block;
      width: 100%;
      background: var(--site-bg, #fff);
      color: var(--site-fg);
      position: relative;
      z-index: 2000;
      padding-bottom: 0;
      margin-bottom: 0;
      flex: 0 0 auto !important; /* Size to content - override module default flex: 1 1 auto */
    }
    
    /* ─── SITE FRAME: Main area (no padding - canvas owns it) ────────────── */
    /* Canvas is the single source of truth for horizontal padding */
    /* All pages (site + admin) live inside this frame */
    /* Rule: Only the site frame (canvas) may define horizontal layout. Pages may only define internal structure. */
    /* ─── SITE FRAME: Main area (no padding - canvas owns it) ────────────── */
    /* Canvas is the single source of truth for horizontal padding */
    /* All pages (site + admin) live inside this frame */
    /* Rule: Only the site frame (canvas) may define horizontal layout. Pages may only define internal structure. */
    /* ─── SITE FRAME: Main area consumes remaining space (sticky footer) ───────── */
    /* Main cell must consume remaining vertical space - override module default */
    body[data-site="ruthbowers"] .ui-layout__cell[data-area="main"] {
      display: flex;
      flex-direction: column;
      background: var(--site-bg, #fff);
      padding-inline: 0; /* Canvas owns padding, not individual cells */
      padding-top: 0;
      margin-top: var(--page-top-gap); /* Global gap between nav and content */
      width: 100%;
      box-sizing: border-box;
      flex: 1 1 auto !important; /* Consume remaining space - override module default flex: 1 1 auto */
      visibility: visible;
      opacity: 1;
      overflow-x: hidden; /* Prevent horizontal scroll from child grids */
    }

    /* SSR pages are visible by default (initial paint) */
    body[data-site="ruthbowers"] .ssr-page {
      display: block;
      width: 100%;
    }

    /* Initial paint: show only the hashed page (no engine required) */
    html[data-initial-page] body[data-site="ruthbowers"] .ssr-page {
      display: none;
    }
    html[data-initial-page="portfolio"] body[data-site="ruthbowers"] .ssr-page[data-page="portfolio"],
    html[data-initial-page="about"] body[data-site="ruthbowers"] .ssr-page[data-page="about"],
    html[data-initial-page="contact"] body[data-site="ruthbowers"] .ssr-page[data-page="contact"],
    html[data-initial-page="workwithme"] body[data-site="ruthbowers"] .ssr-page[data-page="workwithme"],
    html[data-initial-page="project"] body[data-site="ruthbowers"] .ssr-page[data-page="project"],
    html[data-initial-page="login"] body[data-site="ruthbowers"] .ssr-page[data-page="login"],
    html[data-initial-page="admin"] body[data-site="ruthbowers"] .ssr-page[data-page="admin"],
    html[data-initial-page="admin-projects"] body[data-site="ruthbowers"] .ssr-page[data-page="admin-projects"],
    html[data-initial-page="admin-projects-new"] body[data-site="ruthbowers"] .ssr-page[data-page="admin-projects-new"],
    html[data-initial-page="admin-projects-edit"] body[data-site="ruthbowers"] .ssr-page[data-page="admin-projects-edit"],
    html[data-initial-page="admin-feedback"] body[data-site="ruthbowers"] .ssr-page[data-page="admin-feedback"],
    html[data-initial-page="admin-feedback-new"] body[data-site="ruthbowers"] .ssr-page[data-page="admin-feedback-new"],
    html[data-initial-page="admin-feedback-edit"] body[data-site="ruthbowers"] .ssr-page[data-page="admin-feedback-edit"],
    html[data-initial-page="admin-portfolio"] body[data-site="ruthbowers"] .ssr-page[data-page="admin-portfolio"] {
      display: block;
    }

    /* After engine attaches, show only the active SSR page */
    html[data-engine-attached="true"] body[data-site="ruthbowers"][data-active-page] .ssr-page {
      display: none;
    }
    html[data-engine-attached="true"] body[data-site="ruthbowers"][data-active-page="portfolio"] .ssr-page[data-page="portfolio"],
    html[data-engine-attached="true"] body[data-site="ruthbowers"][data-active-page="about"] .ssr-page[data-page="about"],
    html[data-engine-attached="true"] body[data-site="ruthbowers"][data-active-page="contact"] .ssr-page[data-page="contact"],
    html[data-engine-attached="true"] body[data-site="ruthbowers"][data-active-page="workwithme"] .ssr-page[data-page="workwithme"],
    html[data-engine-attached="true"] body[data-site="ruthbowers"][data-active-page="project"] .ssr-page[data-page="project"],
    html[data-engine-attached="true"] body[data-site="ruthbowers"][data-active-page="login"] .ssr-page[data-page="login"],
    html[data-engine-attached="true"] body[data-site="ruthbowers"][data-active-page="admin"] .ssr-page[data-page="admin"],
    html[data-engine-attached="true"] body[data-site="ruthbowers"][data-active-page="admin-projects"] .ssr-page[data-page="admin-projects"],
    html[data-engine-attached="true"] body[data-site="ruthbowers"][data-active-page="admin-projects-new"] .ssr-page[data-page="admin-projects-new"],
    html[data-engine-attached="true"] body[data-site="ruthbowers"][data-active-page="admin-projects-edit"] .ssr-page[data-page="admin-projects-edit"],
    html[data-engine-attached="true"] body[data-site="ruthbowers"][data-active-page="admin-feedback"] .ssr-page[data-page="admin-feedback"],
    html[data-engine-attached="true"] body[data-site="ruthbowers"][data-active-page="admin-feedback-new"] .ssr-page[data-page="admin-feedback-new"],
    html[data-engine-attached="true"] body[data-site="ruthbowers"][data-active-page="admin-feedback-edit"] .ssr-page[data-page="admin-feedback-edit"],
    html[data-engine-attached="true"] body[data-site="ruthbowers"][data-active-page="admin-portfolio"] .ssr-page[data-page="admin-portfolio"] {
      display: block;
    }
    
    /* Hide only during client-side transitions after engine attaches */
    html[data-engine-attached="true"] body[data-site="ruthbowers"] .ui-layout__cell[data-area="main"][data-transitioning="true"] {
      visibility: hidden;
      opacity: 0;
    }
    
    /* ─── SITE FRAME: Composer stretches to fill main area (sticky footer) ────────────── */
    /* The composer is the direct child of main area and must stretch to fill vertical space */
    /* This is the missing link - the content wrapper must stretch, not just the cell */
    /* Hide composer only during client-side transitions after engine attaches */
    html[data-engine-attached="true"] body[data-site="ruthbowers"] .ui-section-composer:not([data-composed="true"]) {
      display: none !important;
      visibility: hidden !important;
    }

    /* Allow shell composers to paint immediately (prevents blank screens) */
    html[data-engine-attached="true"] body[data-site="ruthbowers"] .ui-section-composer[data-shell="true"] {
      display: block !important;
      visibility: visible !important;
      opacity: 1 !important;
    }
    
    body[data-site="ruthbowers"] .ui-section-composer[data-composed="true"] {
      width: 100%;
      padding-inline: 0; /* Frame owns padding, composer inherits it */
      box-sizing: border-box;
      flex: 1 1 auto; /* Stretch to fill main cell - THIS IS THE KEYSTONE */
      display: flex;
      flex-direction: column;
      min-height: 0; /* Allow flex shrinking */
      visibility: visible;
    }
    
    /* Fallback for composer without data-composed attribute (shouldn't happen, but safety) */
    body[data-site="ruthbowers"] .ui-section-composer {
      width: 100%;
      padding-inline: 0; /* Frame owns padding, composer inherits it */
      box-sizing: border-box;
      flex: 1 1 auto; /* Stretch to fill main cell - THIS IS THE KEYSTONE */
      display: flex;
      flex-direction: column;
      min-height: 0; /* Allow flex shrinking */
    }
    
    /* ─── SITE FRAME: Remove page-level padding from ALL section body inner elements ────────────── */
    /* The frame (main area) owns horizontal padding, so section body inner should not add padding */
    /* This applies to ALL pages (public + admin) - overrides ui.section.body module's padX */
    body[data-site="ruthbowers"] .ui-section-body__inner,
    body[data-site="ruthbowers"] .ui-section-body_inner {
      padding-inline: 0 !important; /* Frame owns padding, not section body inner */
    }
    
    /* ─── SITE FRAME: Header navbar (no padding - canvas owns it) ────────────── */
    /* Canvas is the single source of truth for horizontal padding */
    /* Header and main content inherit padding from canvas */
    body[data-site="ruthbowers"] header#nav .ui-navbar__inner {
      padding-inline: 0 !important; /* Canvas owns padding, not navbar inner */
    }

    /* Main area flex rule is now unconditional - see rule above at line 170 */
    
    /* Composer stretches on all pages - removed admin-specific override */
    
    /* Footer padding is handled by footer element itself, not layout cell */
    
    
    /* ─── Ensure first element in main has no extra top margin ───────── */
    body[data-site="ruthbowers"] .ui-layout__cell[data-area="main"] > *:first-child {
      margin-top: 0;
      margin-block-start: 0;
      padding-top: 0;
    }
    
    /* ─── Remove margin-block from ALL copy items globally (consistent spacing) ───────── */
    body[data-site="ruthbowers"] .ui-copy__item {
      margin-block: 0;
      margin-top: 0;
      margin-bottom: 0;
      margin-block-start: 0;
      margin-block-end: 0;
    }
    
    /* ─── workwithme: allow wrapper sizing inside flex layout ────────── */
    body[data-site="ruthbowers"][data-page="workwithme"]
    .module-wrapper.module-ui-grid {
      align-self: flex-start;
    }
    
    /* ─── workwithme: page intent (override grid width token) ───────── */
    /* Grid width is controlled via --ui-grid-width token, not CSS property */
    body[data-site="ruthbowers"][data-page="workwithme"]
    .module-wrapper.module-ui-grid[data-id="work-services-grid"],
    body[data-site="ruthbowers"][data-page="workwithme"]
    .module-wrapper.module-ui-grid[data-id="work-bottom-grid"] {
      --ui-grid-width: 60%;
      margin-inline: 0 auto;
    }
    
    /* ─── workwithme: add right padding to grid cells ──────────────── */
    body[data-site="ruthbowers"][data-page="workwithme"]
    .module-wrapper.module-ui-grid[data-id="work-services-grid"] .ui-grid__cell,
    body[data-site="ruthbowers"][data-page="workwithme"]
    .module-wrapper.module-ui-grid[data-id="work-bottom-grid"] .ui-grid__cell {
      padding-right: 80px;
    }
    
    /* ─── workwithme: left-align main content cell ───────────────────── */
    body[data-site="ruthbowers"][data-page="workwithme"]
    .ui-layout__cell[data-area="main"] {
      justify-content: flex-start;
      justify-items: start;
    }
    
    /* ─── workwithme: override module's auto margin (site wins over module) ───────── */
    body[data-site="ruthbowers"][data-page="workwithme"] .ui-copy__wrap[data-id="work-intro"] .ui-copy {
      margin: 0 !important;  /* override module's margin: 0 auto */
      max-width: 720px !important;  /* keep reasonable width, but left-aligned */
    }
    
    /* ─── workwithme: force lists to be vertical (not grid) ───────── */
    body[data-site="ruthbowers"][data-page="workwithme"] .ui-list:not(.ui-list--portfolio) {
      display: block !important;  /* override module's display: grid */
      grid-template-columns: none !important;  /* remove grid columns */
    }
    
    body[data-site="ruthbowers"][data-page="workwithme"] .ui-list__item {
      display: list-item !important;  /* normal list item behavior */
      margin-bottom: 0.5rem;  /* spacing between items */
    }
    
    /* ─── contact: left-align intro text and constrain width ───────── */
    body[data-site="ruthbowers"][data-page="contact"] .ui-layout__cell[data-area="main"] {
      justify-content: flex-start !important;
      justify-items: start !important;
    }
    
    body[data-site="ruthbowers"][data-page="contact"] .ui-copy__wrap[data-id="contact-intro"] .ui-copy {
      margin: 0 !important;
      max-width: 720px !important;
    }
    
    /* ─── contact: force contact details list to be vertical (not grid) ───────── */
    body[data-site="ruthbowers"][data-page="contact"] .ui-list:not(.ui-list--portfolio) {
      display: block !important;  /* override module's display: grid */
      grid-template-columns: none !important;  /* remove grid columns */
    }
    
    body[data-site="ruthbowers"][data-page="contact"] .ui-list__item {
      display: list-item !important;  /* normal list item behavior */
      margin-bottom: 0.5rem;  /* spacing between items */
    }
    
    /* ─── about: force lists to be vertical (not grid) ───────── */
    body[data-site="ruthbowers"][data-page="about"] .ui-list:not(.ui-list--portfolio) {
      display: block !important;  /* override module's display: grid */
      grid-template-columns: none !important;  /* remove grid columns */
    }
    
    body[data-site="ruthbowers"][data-page="about"] .ui-list__item {
      display: list-item !important;  /* normal list item behavior */
      margin-bottom: 0.5rem;  /* spacing between items */
    }
    
    /* ─── workwithme: ensure serviceBlock lists have no decoration ───────── */
    body[data-site="ruthbowers"][data-page="workwithme"] .ui-service-block__list {
      list-style: none !important;
    }
    
    body[data-site="ruthbowers"][data-page="workwithme"] .ui-service-block__item {
      list-style: none !important;
    }
    
    body[data-site="ruthbowers"][data-page="workwithme"] .ui-service-block__item::before,
    body[data-site="ruthbowers"][data-page="workwithme"] .ui-service-block__item::after {
      display: none !important;
      content: none !important;
    }
    
    /* ─── about: ensure grid cells stack content vertically ───────── */
    body[data-site="ruthbowers"][data-page="about"] .ui-grid__cell {
      display: flex !important;
      flex-direction: column !important;
      align-content: start !important;
      gap: var(--site-pad, 2rem) !important;
    }
    
    /* ─── about: override grid auto-flow to ensure items stack in cells ───────── */
    body[data-site="ruthbowers"][data-page="about"] 
    [data-module="ui.grid"][data-id="about-grid"] {
      grid-auto-flow: row !important;
      grid-template-rows: auto auto !important;
    }
    
    /* ─── about: ensure left cell stacks intro + notes properly ───────── */
    body[data-site="ruthbowers"][data-page="about"] 
    .module-wrapper.module-ui-grid[data-id="about-grid"] .ui-grid__cell[data-area="left"],
    body[data-site="ruthbowers"][data-page="about"] 
    [data-module="ui.grid"][data-id="about-grid"] .ui-grid__cell[data-area="left"] {
      display: flex !important;
      flex-direction: column !important;
      gap: var(--site-pad, 2rem) !important;
      align-items: flex-start !important;
      grid-row: 1 / -1 !important;
    }
    
    /* ─── about: ensure ALL children (including module wrappers) in left cell stack ───────── */
    body[data-site="ruthbowers"][data-page="about"] 
    .module-wrapper.module-ui-grid[data-id="about-grid"] .ui-grid__cell[data-area="left"] > *,
    body[data-site="ruthbowers"][data-page="about"] 
    [data-module="ui.grid"][data-id="about-grid"] .ui-grid__cell[data-area="left"] > * {
      display: block !important;
      width: 100% !important;
      flex-shrink: 0 !important;
    }
    
    /* ─── about: ensure module wrappers don't create their own layout context ───────── */
    body[data-site="ruthbowers"][data-page="about"] 
    .module-wrapper.module-ui-grid[data-id="about-grid"] .ui-grid__cell[data-area="left"] .module-wrapper,
    body[data-site="ruthbowers"][data-page="about"] 
    [data-module="ui.grid"][data-id="about-grid"] .ui-grid__cell[data-area="left"] .module-wrapper {
      display: block !important;
      width: 100% !important;
    }
    
    /* ─── about: force grid to use single row layout (prevent multiple cells) ───────── */
    body[data-site="ruthbowers"][data-page="about"] 
    [data-module="ui.grid"][data-id="about-grid"] {
      grid-template-rows: 1fr !important;
    }
    
    /* ─── about: ensure all left-area cells span full height ───────── */
    body[data-site="ruthbowers"][data-page="about"] 
    [data-module="ui.grid"][data-id="about-grid"] .ui-grid__cell[data-area="left"] {
      grid-row: 1 / -1 !important;
    }
    
    /* ─── Footer Layout Cell ───────────────────────────────────────── */
    /* Consolidated with sticky footer rules below */
    
    /* ─── SITE FRAME: Footer behavior is unified ───────── */
    /* All pages (admin + site) use same footer layout */
    /* Admin-specific footer styling removed - frame owns layout */
    
    /* ─── SITE FRAME: Remove page-level padding ──────────────────────────────────── */
    /* Pages no longer own horizontal padding - the frame (main area) owns it */
    /* These elements are inside the main area, so they inherit the frame's padding */
    body[data-site="ruthbowers"] main,
    body[data-site="ruthbowers"] #portfolio-body {
      padding-inline: 0; /* Frame owns padding, not pages */
    }
    
    /* ─── SITE FRAME: Sticky Header (unified for all pages) ───────────────────────────────────────────── */
    body[data-site="ruthbowers"] .ui-layout__cell[data-area="header"] {
      position: sticky;
      top: 0;
      z-index: 2000;
      background: var(--site-bg, #fff);
      width: 100%;
      flex: 0 0 auto;
    }
    
    body[data-site="ruthbowers"] header {
      width: 100%;
    }
    
    /* ─── NAV Full-Bleed Setup ─────────────────────────────────────── */
    body[data-site="ruthbowers"] header#nav {
      border-bottom: 0;
    }
    body[data-site="ruthbowers"] header#nav .ui-navbar__inner {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding-block: 1rem;
      padding-bottom: 1rem;
      padding-inline: 0; /* Canvas owns padding, not navbar inner */
      margin-bottom: 0;
    }
    
    /* ─── Navbar: ensure menu aligns to right ───────────────────────── */
    body[data-site="ruthbowers"] .ui-navbar__menu {
      margin-left: auto !important;
    }
    
    /* ─── Navbar: remove horizontal padding for left alignment ───────── */
    body[data-site="ruthbowers"] .ui-navbar {
      padding-inline: 0 !important;
      padding-block: 0 !important; /* Neutralize module-injected padding */
      padding-bottom: 0;
      margin-bottom: 0;
    }
    
    /* ─── Navbar wrapper: ensure no bottom spacing ───────────────────── */
    body[data-site="ruthbowers"] .ui-navbar__wrap {
      padding-bottom: 0;
      margin-bottom: 0;
      border-bottom: 0;
    }
    
    /* ─── SITE FRAME: Footer (no padding - canvas owns it) ───────────────────────────────────────────── */
    /* Canvas is the single source of truth for horizontal padding */
    /* Footer inherits padding from canvas */
    /* Footer sticks to bottom when page is shorter than viewport */
    body[data-site="ruthbowers"] footer {
      padding-block: 1.25rem;
      padding-inline: 0; /* Canvas owns padding, not footer */
      text-align: left;
      font-size: 0.9rem;
      color: #666;
      position: relative;
      width: 100%;
      box-sizing: border-box;
    }

    /* ─── Footer module: neutralize injected padding to prevent late shift ─── */
    body[data-site="ruthbowers"] .ui-section-footer {
      padding: 0 !important;
      background: transparent !important;
      border-top: 0 !important;
    }

    /* Remove footer divider injected by ui.footer.note */
    body[data-site="ruthbowers"] .ui-footer-note__wrap {
      border-top: 0 !important;
    }
    
    /* ─── SITE FRAME: Footer layout cell (sticky footer support) ───────── */
    /* Footer must NOT flex - override module default flex: 1 1 auto */
    /* This is the critical fix - footer cell was flexing and expanding upward */
    /* This applies to ALL pages (site + admin) */
    body[data-site="ruthbowers"] .ui-layout__cell[data-area="footer"] {
      flex: 0 0 auto !important; /* Size to content - override module default flex: 1 1 auto */
      padding-top: 0;
      padding-bottom: 0; /* No bottom padding - footer element handles its own padding */
      text-align: left;
    }
    
    /* ─── SITE FRAME: Canvas padding (single source of truth) ──────────────── */
    /* Canvas owns horizontal padding - all children inherit it */
    /* This ensures consistent breathing space from screen edges across all pages */
    /* Canvas flex properties are set in the rule above - this rule only handles padding/styling */
    body[data-site="ruthbowers"] .ui-canvas[data-module="ui.canvas"],
    body[data-site="ruthbowers"] .ui-canvas[data-mod="ui_canvas"] {
      padding-inline: var(--edge, var(--site-pad)) !important; /* Frame padding - consistent across all pages */
      max-width: none !important;
      margin-inline: 0 !important;
      background: var(--ui-canvas-bg, var(--site-bg, #fff)) !important;
      color: var(--ui-canvas-fg, var(--site-fg, inherit)) !important;
      scrollbar-gutter: auto; /* Avoid left gutter that shifts content right */
      overflow-x: hidden !important; /* Prevent canvas-level horizontal scroll */
      overflow-y: visible !important; /* Let body handle vertical scrolling */
      /* display: flex and min-height are set in the rule above - do not override here */
    }
    
    /* ─── Ensure Early Visibility of Canvas ────────────────────────── */
    [data-module="ui.canvas"] {
      background: var(--ui-canvas-bg, var(--site-bg, #fff));
    }
    
    /* ─── Sticky Footer Structure ──────────────────────────────────── */
    body[data-site="ruthbowers"] main {
      flex: 1 0 auto;
      display: flex;
      flex-direction: column;
    }
    body[data-site="ruthbowers"] main > section {
      flex: 1 0 auto;
    }
    
    /* ─── Global Grid Layout ───────────────────────────────────────── */
    body[data-site="ruthbowers"] .ui-grid {
      gap: var(--about-gap, var(--site-pad, 2rem));
      grid-template-columns: repeat(2, minmax(0, 1fr));
      align-items: start;
      justify-content: space-between;
    }
    
    /* ─── Grid cells: independent vertical stacks (not row-coupled) ───────── */
    body[data-site="ruthbowers"] .ui-grid__cell {
      align-self: start !important; /* do NOT stretch to match row height */
      display: flex !important;
      flex-direction: column !important;
      gap: var(--site-pad, 2rem) !important;
    }
    
    /* ─── Ensure all direct children of grid cells stack vertically ───────── */
    body[data-site="ruthbowers"] .ui-grid__cell > * {
      display: block !important;
      width: 100% !important;
      flex-shrink: 0 !important;
    }
    
    /* ─── SITE FRAME: Layout-root wrappers must be transparent to flex (sticky footer) ───────── */
    /* Modules with role="layout-root" in manifest participate in page structure */
    /* The wrapper between canvas and layout MUST be flex to allow height propagation */
    /* This uses semantic role-based classes instead of module-specific selectors */
    body[data-site="ruthbowers"] .ui-canvas > .module-wrapper.is-layout-root {
      display: flex !important;
      flex-direction: column !important;
      flex: 1 1 auto !important; /* Stretch to fill canvas - transparent to layout */
      min-height: 0; /* Allow flex shrinking */
    }
    
    /* ─── Default module-wrapper (other modules stay block) ───────────────────────────────────── */
    body[data-site="ruthbowers"] .module-wrapper {
      display: block;
    }
    
    /* ─── About page grid constraints ─────────────────────────────── */
    body[data-site="ruthbowers"] .module-wrapper.module-ui-grid[data-id="about-grid"] {
      max-width: 1600px;
      margin-inline: auto;
      padding-inline: 0;
      padding-block: 0;
    }
    
    /* ─── Grid cells: independent vertical stacks (not row-coupled) ───────── */
    body[data-site="ruthbowers"] .ui-grid__cell {
      align-self: start !important; /* do NOT stretch to match row height */
      display: flex !important;
      flex-direction: column !important;
      gap: var(--site-pad, 2rem) !important;
    }
    
    /* ─── Ensure all direct children of grid cells stack vertically ───────── */
    body[data-site="ruthbowers"] .ui-grid__cell > * {
      display: block !important;
      width: 100% !important;
      flex-shrink: 0 !important;
    }
    
    /* ─── Ensure items in grid area regions stack vertically ───────── */
    body[data-site="ruthbowers"][data-page="workwithme"] .ui-grid-area__region {
      display: flex !important;
      flex-direction: column !important;
      gap: var(--site-pad, 2rem) !important;
    }
    
    /* ─── Global Typography ───────────────────────────────────────── */
    body[data-site="ruthbowers"] .ui-copy__item h2 { font-size: clamp(1.5rem, 3vw, 2rem); }
    body[data-site="ruthbowers"] .ui-copy__item h3 { font-size: clamp(1.125rem, 2vw, 1.375rem); }
    body[data-site="ruthbowers"] .ui-copy__item p  { font-size: clamp(1rem, 1.5vw, 1.125rem); }
    
    /* ────────────────────────────────────────────────────────────────
       SITE-LEVEL ADDITION — Project Credit Spacing
       (NO module coupling, spacing only)
       ──────────────────────────────────────────────────────────────── */
    
    body[data-site="ruthbowers"] #project-body .project__credit {
      margin-block: calc(var(--site-pad) * 2);
    }
    
    /* ─── Project Viewer: credit spacing (site intent) ─────────────── */
body[data-site="ruthbowers"] {
  --project-credit-gap: clamp(0.75rem, 2vw, 1.25rem);
}

/* ─── Project page — neutral text + dash lists ───────── */
  body[data-site="ruthbowers"] .project__body h3 {
    font-size: 1em !important;
    font-weight: 400 !important;
    line-height: inherit !important;
    margin: 0 0 0.75em 0 !important;
  }

  body[data-site="ruthbowers"] .project__body ul {
    list-style: none !important;
    margin: 0.75em 0 !important;
    padding: 0 !important;
  }

  body[data-site="ruthbowers"] .project__body li {
    position: relative !important;
    padding-left: 1.5em !important;
    margin-bottom: 0.35em !important;
  }

  body[data-site="ruthbowers"] .project__body li::before {
    content: "–" !important;
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    font-weight: 400 !important;
    display: inline-block !important;
  }

/* ─── Grid-contained copy: remove centering and width constraints ───────── */
body[data-site="ruthbowers"] .ui-grid .ui-copy {
  max-width: none !important;
  margin-inline: 0 !important;
  margin-block: 0 !important;
}

body[data-site="ruthbowers"] .ui-grid .ui-copy__wrap {
  padding: 0;
}

body[data-site="ruthbowers"] .ui-grid .ui-copy__item {
  margin: 0 !important;
}

/* Add spacing between admin header title and welcome message - applies to ALL admin header grids */
body[data-site="ruthbowers"][data-page^="admin"] [data-module="ui.grid"][data-id$="header-grid"] .ui-copy__item:first-child {
  margin-bottom: 0.5rem !important;
}

/* ─── Admin Areas Navigation — System-Level Navigation (Industrial) ───────── */
/* Target the wrap element with data-id, or fallback to admin section lists */
body[data-site="ruthbowers"][data-page^="admin"] [data-module="ui.list.fromJson"][data-id="admin-areas-nav"] .ui-list__wrap,
body[data-site="ruthbowers"][data-page="admin"] [data-module="ui.list.fromJson"] .ui-list__wrap {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  gap: 1.5rem;
  margin-top: clamp(3rem, 10vh, 7rem);
  list-style: none;
  padding: 0;
}

/* Admin area items - tool-like, tighter spacing */
body[data-site="ruthbowers"][data-page^="admin"] [data-module="ui.list.fromJson"][data-id="admin-areas-nav"] .ui-list__item,
body[data-site="ruthbowers"][data-page="admin"] [data-module="ui.list.fromJson"] .ui-list__item {
  position: relative;
  padding-bottom: 0.5rem;
  margin: 0 !important;
  list-style: none;
}

/* Underline interaction - subtle, system-like */
body[data-site="ruthbowers"][data-page^="admin"] [data-module="ui.list.fromJson"][data-id="admin-areas-nav"] .ui-list__item::after,
body[data-site="ruthbowers"][data-page="admin"] [data-module="ui.list.fromJson"] .ui-list__item::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 1.25rem;
  height: 1px;
  background: currentColor;
  opacity: 0.2;
  transition: width 0.2s ease, opacity 0.2s ease;
}

body[data-site="ruthbowers"][data-page^="admin"] [data-module="ui.list.fromJson"][data-id="admin-areas-nav"] .ui-list__item:hover::after,
body[data-site="ruthbowers"][data-page="admin"] [data-module="ui.list.fromJson"] .ui-list__item:hover::after {
  width: 2.5rem;
  opacity: 0.4;
}

/* Active state - locked in, darker text, longer underline */
body[data-site="ruthbowers"][data-page^="admin"] [data-module="ui.list.fromJson"][data-id="admin-areas-nav"] .ui-list__item[data-active="true"],
body[data-site="ruthbowers"][data-page^="admin"] [data-module="ui.list.fromJson"][data-id="admin-areas-nav"] .ui-list__item.is-active,
body[data-site="ruthbowers"][data-page="admin"] [data-module="ui.list.fromJson"] .ui-list__item[data-active="true"],
body[data-site="ruthbowers"][data-page="admin"] [data-module="ui.list.fromJson"] .ui-list__item.is-active {
  font-weight: 500;
  color: #111;
}

body[data-site="ruthbowers"][data-page^="admin"] [data-module="ui.list.fromJson"][data-id="admin-areas-nav"] .ui-list__item[data-active="true"]::after,
body[data-site="ruthbowers"][data-page^="admin"] [data-module="ui.list.fromJson"][data-id="admin-areas-nav"] .ui-list__item.is-active::after,
body[data-site="ruthbowers"][data-page="admin"] [data-module="ui.list.fromJson"] .ui-list__item[data-active="true"]::after,
body[data-site="ruthbowers"][data-page="admin"] [data-module="ui.list.fromJson"] .ui-list__item.is-active::after {
  width: 2.5rem;
  opacity: 0.6;
}

/* Admin area links - tool-like, unified font */
body[data-site="ruthbowers"][data-page^="admin"] [data-module="ui.list.fromJson"][data-id="admin-areas-nav"] .ui-list__link,
body[data-site="ruthbowers"][data-page="admin"] [data-module="ui.list.fromJson"] .ui-list__link {
  text-decoration: none;
  color: #444;
  cursor: pointer;
  display: block;
  font-family: var(--site-font-family) !important;
  font-size: 0.875rem !important;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.02em;
  transition: color 0.2s ease;
}

body[data-site="ruthbowers"][data-page^="admin"] [data-module="ui.list.fromJson"][data-id="admin-areas-nav"] .ui-list__link:hover,
body[data-site="ruthbowers"][data-page="admin"] [data-module="ui.list.fromJson"] .ui-list__link:hover {
  color: #222;
}

/* Active link - darker, locked in */
body[data-site="ruthbowers"][data-page^="admin"] [data-module="ui.list.fromJson"][data-id="admin-areas-nav"] .ui-list__item[data-active="true"] .ui-list__link,
body[data-site="ruthbowers"][data-page="admin"] [data-module="ui.list.fromJson"] .ui-list__item[data-active="true"] .ui-list__link {
  color: #111 !important;
  font-weight: 500;
}

/* System label - industrial, section marker */
body[data-site="ruthbowers"][data-page^="admin"] [data-module="ui.list.fromJson"][data-id="admin-areas-nav"] .ui-list__wrap::before,
body[data-site="ruthbowers"][data-page="admin"] [data-module="ui.list.fromJson"] .ui-list__wrap::before {
  content: "ADMIN AREAS";
  font-family: var(--site-font-family);
  font-size: 0.6875rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: #666;
  opacity: 0.5;
  margin-bottom: 1.25rem;
  grid-column: 1 / -1;
  display: block;
  font-weight: 400;
}

/* Admin section - intentional vertical rhythm */
body[data-site="ruthbowers"][data-page="admin"] .ui-section-body[id="admin-section"] {
  min-height: 60vh;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

/* ─── Admin Pages: Table Header Action Buttons (New Project, New Feedback, etc.) ───────── */
/* Buttons are now in table header row, styled below with table header rules */

/* Table - pull it up into the structure */
body[data-site="ruthbowers"][data-page="admin-projects"] .admin-projects-list {
  margin-top: 1.5rem;
}

/* Table - de-emphasize frame, editorial style, reduced contrast */
body[data-site="ruthbowers"][data-page="admin-projects"] .admin-projects-list__table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 0;
  font-size: 0.875rem;
}

/* Table headers - reduced authority, labels not headlines */
body[data-site="ruthbowers"][data-page="admin-projects"] .admin-projects-list__table th {
  font-weight: 500;
  font-size: 0.8125rem;
  letter-spacing: 0.04em;
  color: #666;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  padding: 0.75rem 1rem 0.75rem 0;
  text-align: left;
}

/* Header action button - right-aligned in Actions column */
body[data-site="ruthbowers"][data-page="admin-projects"] .admin-projects-list__header-action,
body[data-site="ruthbowers"][data-page="admin-feedback"] .admin-feedback-list__header-action {
  font-size: 0.8125rem !important;
  font-weight: 500 !important;
  color: #333 !important;
  text-decoration: none !important;
  padding: 0.25rem 0.5rem !important;
  border: 1px solid rgba(0, 0, 0, 0.15) !important;
  border-radius: 3px !important;
  background: transparent !important;
  display: inline-block !important;
  transition: all 0.2s ease !important;
  font-family: inherit !important;
  line-height: 1.4 !important;
}

body[data-site="ruthbowers"][data-page="admin-projects"] .admin-projects-list__header-action:hover,
body[data-site="ruthbowers"][data-page="admin-feedback"] .admin-feedback-list__header-action:hover {
  border-color: rgba(0, 0, 0, 0.25) !important;
  color: #000 !important;
  background: rgba(0, 0, 0, 0.02) !important;
}

/* Ensure Actions header cell is right-aligned */
body[data-site="ruthbowers"][data-page="admin-projects"] .admin-projects-list__table th:last-child,
body[data-site="ruthbowers"][data-page="admin-feedback"] .admin-feedback-list__table th:last-child {
  text-align: right !important;
}

/* Table rows - light separation, more list-like */
/* Ensure consistent line-height across all cells for clean horizontal alignment */
body[data-site="ruthbowers"][data-page="admin-projects"] .admin-projects-list__table td {
  border-bottom: 1px solid rgba(0, 0, 0, 0.04);
  padding: 1rem 1rem 1rem 0;
  vertical-align: middle !important;
  color: #000;
  line-height: 1.5 !important;
}

/* Title column - make it the hero */
body[data-site="ruthbowers"][data-page="admin-projects"] .admin-projects-list__table td:first-child {
  font-weight: 500;
}

/* Slug column - muted, less prominent */
body[data-site="ruthbowers"][data-page="admin-projects"] .admin-projects-list__table td:nth-child(2) {
  color: #666;
  font-size: 0.875rem;
}

/* Row hover - subtle awareness */
body[data-site="ruthbowers"][data-page="admin-projects"] .admin-projects-list__table tr:hover {
  background: rgba(0, 0, 0, 0.015);
}

/* Title link - clean, editorial */
body[data-site="ruthbowers"][data-page="admin-projects"] .admin-projects-list__link {
  text-decoration: none;
  color: inherit;
}

body[data-site="ruthbowers"][data-page="admin-projects"] .admin-projects-list__link:hover {
  text-decoration: underline;
  text-decoration-color: rgba(0, 0, 0, 0.3);
}

/* Status badges - normalized, less dominant */
body[data-site="ruthbowers"][data-page="admin-projects"] .admin-projects-list__status {
  font-size: 0.75rem;
  padding: 0.25rem 0.5rem;
  border-radius: 3px;
  opacity: 0.85;
  display: inline-block;
}

body[data-site="ruthbowers"][data-page="admin-projects"] .admin-projects-list__status--published {
  background: rgba(34, 197, 94, 0.1);
  color: rgba(34, 197, 94, 0.8);
}

body[data-site="ruthbowers"][data-page="admin-projects"] .admin-projects-list__status--draft {
  background: rgba(0, 0, 0, 0.05);
  color: rgba(0, 0, 0, 0.6);
}

/* Actions - text links, not colored buttons */
body[data-site="ruthbowers"][data-page="admin-projects"] .admin-projects-list__actions {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

body[data-site="ruthbowers"][data-page="admin-projects"] .admin-projects-list__button {
  font-size: 0.8125rem;
  color: #666;
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  text-decoration: none;
  font-family: inherit;
  -webkit-appearance: none;
  appearance: none;
}

body[data-site="ruthbowers"][data-page="admin-projects"] .admin-projects-list__button:hover {
  color: #000;
}

/* Delete action - use weight, not color */
body[data-site="ruthbowers"][data-page="admin-projects"] .admin-projects-list__button--delete {
  font-weight: 500;
}

/* Override module default button styles completely - remove all colors */
body[data-site="ruthbowers"][data-page="admin-projects"] .admin-projects-list__button--edit,
body[data-site="ruthbowers"][data-page="admin-projects"] .admin-projects-list__button--delete {
  border: none !important;
  background: transparent !important;
  border-radius: 0 !important;
  padding: 0 !important;
  border-color: transparent !important;
  color: #666 !important;
}

body[data-site="ruthbowers"][data-page="admin-projects"] .admin-projects-list__button--edit:hover,
body[data-site="ruthbowers"][data-page="admin-projects"] .admin-projects-list__button--delete:hover {
  background: transparent !important;
  background-color: transparent !important;
  color: #000 !important;
  border-color: transparent !important;
}

/* ─── ADMIN TABLE ACTIONS — GLOBAL NORMALIZATION ───────── */
/* Neutralize ALL admin buttons/links inside tables across all admin pages */
/* This ensures consistent action styling: textual, inline, reversible */

/* Ensure all table cells have consistent line-height for clean horizontal alignment */
/* Override ALL module CSS that might affect alignment */
body[data-site="ruthbowers"][data-page^="admin"] table td {
  line-height: 1.5 !important;
  vertical-align: middle !important;
  height: auto !important;
  padding: 1rem 1rem 1rem 0 !important;
}

body[data-site="ruthbowers"][data-page^="admin"] table .admin-list__actions,
body[data-site="ruthbowers"][data-page^="admin"] table td:last-child {
  white-space: nowrap;
  line-height: 1.5 !important;
  vertical-align: middle !important;
  height: auto !important;
  padding: 1rem 1rem 1rem 0 !important;
}

/* Neutralize ALL admin buttons inside tables */
/* Keep them inline (NO flex) for proper table cell behavior */
body[data-site="ruthbowers"][data-page^="admin"] table button,
body[data-site="ruthbowers"][data-page^="admin"] table .da-btn,
body[data-site="ruthbowers"][data-page^="admin"] table .admin-feedback-list__button,
body[data-site="ruthbowers"][data-page^="admin"] table .admin-projects-list__button,
body[data-site="ruthbowers"][data-page^="admin"] table a.admin-list__button {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 0.75rem 0 0 !important; /* Use margin instead of gap for spacing */
  font-size: 0.8125rem !important;
  font-family: inherit !important;
  color: #666 !important;
  cursor: pointer;
  text-decoration: none !important;
  border-radius: 0 !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  display: inline !important; /* Inline, not inline-block, for table cells */
  font-weight: 400 !important;
  line-height: 1.5 !important;
  vertical-align: baseline !important;
}

/* Remove margin from last button */
body[data-site="ruthbowers"][data-page^="admin"] table .admin-list__button--delete,
body[data-site="ruthbowers"][data-page^="admin"] table .admin-feedback-list__button--delete,
body[data-site="ruthbowers"][data-page^="admin"] table .admin-projects-list__button--delete {
  margin-right: 0 !important;
}

/* Hover state — awareness, not emphasis */
body[data-site="ruthbowers"][data-page^="admin"] table button:hover,
body[data-site="ruthbowers"][data-page^="admin"] table .da-btn:hover,
body[data-site="ruthbowers"][data-page^="admin"] table .admin-feedback-list__button:hover,
body[data-site="ruthbowers"][data-page^="admin"] table .admin-projects-list__button:hover,
body[data-site="ruthbowers"][data-page^="admin"] table a.admin-list__button:hover {
  color: #000 !important;
  text-decoration: underline !important;
  text-decoration-color: rgba(0, 0, 0, 0.3) !important;
  background: transparent !important;
  background-color: transparent !important;
  border-color: transparent !important;
}

/* Delete action — use weight, not color */
body[data-site="ruthbowers"][data-page^="admin"] table .admin-list__button--delete,
body[data-site="ruthbowers"][data-page^="admin"] table .admin-feedback-list__button--delete,
body[data-site="ruthbowers"][data-page^="admin"] table .admin-projects-list__button--delete {
  font-weight: 500 !important;
}

/* Add separator between actions (Edit · Delete) */
/* Target both anchor and button elements with --edit class */
/* Use !important to override any conflicting rules */
body[data-site="ruthbowers"][data-page^="admin"] table a.admin-list__button--edit::after,
body[data-site="ruthbowers"][data-page^="admin"] table a.admin-feedback-list__button--edit::after,
body[data-site="ruthbowers"][data-page^="admin"] table a.admin-projects-list__button--edit::after,
body[data-site="ruthbowers"][data-page^="admin"] table button.admin-list__button--edit::after,
body[data-site="ruthbowers"][data-page^="admin"] table button.admin-feedback-list__button--edit::after,
body[data-site="ruthbowers"][data-page^="admin"] table button.admin-projects-list__button--edit::after,
body[data-site="ruthbowers"][data-page^="admin"] table .admin-list__button--edit::after,
body[data-site="ruthbowers"][data-page^="admin"] table .admin-feedback-list__button--edit::after,
body[data-site="ruthbowers"][data-page^="admin"] table .admin-projects-list__button--edit::after {
  content: " · " !important;
  color: #999 !important;
  margin-inline: 0.25rem !important;
  font-weight: 400 !important;
  text-decoration: none !important;
  display: inline !important;
  opacity: 1 !important;
}

/* Actions container — MUST remain table-cell for proper row alignment */
/* Override module CSS that sets display: flex (which breaks table rows) */
body[data-site="ruthbowers"][data-page^="admin"] table .admin-list__actions,
body[data-site="ruthbowers"][data-page^="admin"] table .admin-feedback-list__actions,
body[data-site="ruthbowers"][data-page^="admin"] table .admin-projects-list__actions {
  display: table-cell !important; /* REQUIRED: must be table-cell, not flex */
  vertical-align: middle !important;
  white-space: nowrap !important;
  line-height: 1.5 !important;
}


/* ────────────────────────────────────────────────────────────────
   Admin Pages — Layout and Styling
   ──────────────────────────────────────────────────────────────── */

/* ─── SITE FRAME: Admin section containers ────────────── */
/* Admin pages live inside the same site frame - they inherit main area padding */
/* Remove page-level padding - the frame owns it */
body[data-site="ruthbowers"][data-page^="admin"] .ui-section-body[id^="admin"],
body[data-site="ruthbowers"][data-page^="admin"] section[id^="admin"] {
  position: relative !important;
  padding-left: 0 !important; /* Frame owns padding, not pages */
  padding-right: 0 !important; /* Frame owns padding, not pages */
  box-sizing: border-box !important;
}

/* ─── SITE FRAME: Override ui.section.body padX for admin pages ────────────── */
/* The module applies padX as padding-inline on .ui-section-body__inner */
/* Since the frame owns padding, we must remove it from admin pages */
body[data-site="ruthbowers"][data-page^="admin"] .ui-section-body[id^="admin"] .ui-section-body__inner,
body[data-site="ruthbowers"][data-page^="admin"] .ui-section-body[id^="admin"] .ui-section-body_inner {
  padding-inline: 0 !important; /* Frame owns padding, not section body inner */
}

body[data-site="ruthbowers"][data-page^="admin"] .ui-section-body__inner,
body[data-site="ruthbowers"][data-page^="admin"] .ui-section-body_inner {
  position: relative !important;
}

/* ─── SITE FRAME: Admin pages inherit main site typography ───────── */
/* Admin vs Site is content + tooling, not typography */
/* Admin pages inherit the same typography as the main site for consistency */
/* No admin-specific typography baseline - frame owns typography */

/* ─── SITE FRAME: Admin content inherits main site typography ───────── */
/* Admin pages use the same typography as main site - no overrides needed */
/* The frame owns typography, admin just inherits it */
/* Only override module defaults that conflict with site typography */
body[data-site="ruthbowers"][data-page^="admin"] .ui-copy__item,
body[data-site="ruthbowers"][data-page^="admin"] .ui-copy__item p,
body[data-site="ruthbowers"][data-page^="admin"] .ui-copy__item h2,
body[data-site="ruthbowers"][data-page^="admin"] .ui-copy__item h3 {
  font-size: inherit !important; /* Inherit from body, not module default */
  line-height: inherit !important; /* Inherit from body */
  font-weight: inherit !important;
  font-family: inherit !important;
}

/* ─── SITE FRAME: Admin content full width, aligned with logo/menu ───────── */
/* Admin content should be full width, no max-width constraints */
/* Frame padding ensures alignment with logo and menu */
/* Override ui.section.body module's data-width="content" max-width constraint */
body[data-site="ruthbowers"][data-page^="admin"] .ui-section-body[data-width="content"],
body[data-site="ruthbowers"][data-page^="admin"] .ui-section-body[data-width="content"] .ui-section-body__inner,
body[data-site="ruthbowers"][data-page^="admin"] .ui-section-body[data-width="content"] .ui-section-body_inner {
  max-width: none !important;
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  margin-inline: 0 !important;
}

body[data-site="ruthbowers"][data-page^="admin"] .ui-copy,
body[data-site="ruthbowers"][data-page^="admin"] .ui-section-body,
body[data-site="ruthbowers"][data-page^="admin"] .ui-section-body__inner,
body[data-site="ruthbowers"][data-page^="admin"] .ui-section-body_inner {
  max-width: none !important;
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  margin-inline: 0 !important;
}

/* ─── ADMIN HEADER — CANONICAL (shared by ALL admin pages) ───────── */
/* Single canonical header style for all admin pages */
body[data-site="ruthbowers"][data-page^="admin"] [data-module="ui.grid"][data-id$="header-grid"] {
  margin-bottom: 2.5rem;
  padding-bottom: 0;
  position: relative;
}

/* Single divider — controlled here, nowhere else */
body[data-site="ruthbowers"][data-page^="admin"] [data-module="ui.grid"][data-id$="header-grid"]::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 60%;
  height: 1px;
  background: rgba(0, 0, 0, 0.1);
}

/* Explicitly disable any wrapper-level dividers */
body[data-site="ruthbowers"][data-page^="admin"] .module-wrapper[data-module="ui.grid"][data-id$="header-grid"]::after,
body[data-site="ruthbowers"][data-page^="admin"] .module-wrapper[data-module="ui.grid"][data-id$="header-grid"]::before {
  display: none !important;
  content: none !important;
}

    } /* End @layer site */

/* ────────────────────────────────────────────────────────────────
   Admin Header Grid — Specific Layout (extends canonical header)
   ──────────────────────────────────────────────────────────────── */

/* Grid layout for header and button side by side - prevent right column collapse */
/* Applies to ALL admin header grids (admin-header-grid, admin-projects-header-grid, etc.) */
body[data-site="ruthbowers"][data-page^="admin"] [data-module="ui.grid"][data-id$="header-grid"] {
  align-items: start;
  --ui-grid-cols: 1fr minmax(12rem, max-content) !important;
  grid-template-columns: 1fr minmax(12rem, max-content) !important;
  margin-bottom: 1.5rem;
  gap: 0 !important;
}

body[data-site="ruthbowers"][data-page^="admin"] [data-module="ui.grid"][data-id$="header-grid"] .ui-grid__cell {
  padding: 0;
  margin: 0;
}

/* Remove top padding/margin from admin section and first list */
body[data-site="ruthbowers"][data-page^="admin"] .ui-section-body[id^="admin"] {
  padding-top: 0 !important;
}

body[data-site="ruthbowers"][data-page^="admin"] .ui-section-body[id^="admin"] .ui-list.fromJson:first-of-type,
body[data-site="ruthbowers"][data-page^="admin"] .ui-section-body[id^="admin"] [data-module="ui.list.fromJson"]:first-of-type {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* Right area (button) - keep grid cell as block, flex on inner wrapper */
/* Applies to ALL admin header grids (admin-header-grid, admin-projects-header-grid, etc.) */
body[data-site="ruthbowers"][data-page^="admin"] [data-module="ui.grid"][data-id$="header-grid"] .ui-grid__cell[data-area="right"],
body[data-site="ruthbowers"][data-page^="admin"] [data-module="ui.grid"][data-id$="header-grid"] .ui-grid_cell[data-area="right"] {
  display: block;
  min-width: 0;
}

/* Flex container inside the right grid cell - aligns button to right rail */
body[data-site="ruthbowers"][data-page^="admin"] [data-module="ui.grid"][data-id$="header-grid"] .ui-grid__cell[data-area="right"] > *,
body[data-site="ruthbowers"][data-page^="admin"] [data-module="ui.grid"][data-id$="header-grid"] .ui-grid_cell[data-area="right"] > * {
  display: flex;
  justify-content: flex-end;
  align-items: flex-start;
  white-space: nowrap;
}

/* Style logout button - minimalistic, matching Ruth website and DAREAKT_ genesis */
body[data-site="ruthbowers"][data-page^="admin"] [data-atom="ui.button"] .da-btn[data-action="logout"],
body[data-site="ruthbowers"][data-page^="admin"] #admin-logout-button,
body[data-site="ruthbowers"][data-page^="admin"] .module-wrapper[data-id="admin-logout-button"] .da-btn,
body[data-site="ruthbowers"][data-page^="admin"] button[data-action="logout"] {
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  color: #666 !important;
  font-size: 0.8125rem !important;
  font-weight: 400 !important;
  font-family: inherit !important;
  cursor: pointer !important;
  transition: color 0.2s ease !important;
  text-decoration: none !important;
  display: inline-block !important;
  line-height: 1.4 !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  letter-spacing: 0 !important;
  transform: none !important;
  opacity: 0.7 !important;
  box-shadow: none !important;
}

body[data-site="ruthbowers"][data-page^="admin"] [data-atom="ui.button"] .da-btn[data-action="logout"]:hover,
body[data-site="ruthbowers"][data-page^="admin"] #admin-logout-button:hover,
body[data-site="ruthbowers"][data-page^="admin"] .module-wrapper[data-id="admin-logout-button"] .da-btn:hover,
body[data-site="ruthbowers"][data-page^="admin"] button[data-action="logout"]:hover {
  color: #000 !important;
  text-decoration: underline !important;
  text-decoration-color: rgba(0, 0, 0, 0.3) !important;
  background: transparent !important;
  transform: none !important;
  opacity: 1 !important;
}

body[data-site="ruthbowers"][data-page^="admin"] [data-atom="ui.button"] .da-btn[data-action="logout"]:focus,
body[data-site="ruthbowers"][data-page^="admin"] #admin-logout-button:focus,
body[data-site="ruthbowers"][data-page^="admin"] .module-wrapper[data-id="admin-logout-button"] .da-btn:focus,
body[data-site="ruthbowers"][data-page^="admin"] button[data-action="logout"]:focus {
  outline: 1px solid rgba(0, 0, 0, 0.2) !important;
  outline-offset: 2px !important;
  box-shadow: none !important;
}

/* ⚠️ CRITICAL: Lock admin content area in place - deterministic positioning */
body[data-site="ruthbowers"][data-page^="admin"] [data-area="content"] {
  grid-area: content;
  align-self: start;
  justify-self: stretch;
  width: 100%;
  order: 999; /* Ensure it comes after header grid */
}

/* Lock table container inside content area */
body[data-site="ruthbowers"][data-page^="admin"] [data-area="content"] #admin-projects-root,
body[data-site="ruthbowers"][data-page^="admin"] [data-area="content"] #admin-feedback-root,
body[data-site="ruthbowers"][data-page^="admin"] [data-area="content"] #admin-portfolio-root {
  align-self: start;
  width: 100%;
  margin-top: 1.5rem;
}

/* ─── Admin Editor Form — Table-like Layout ───────── */
/* Editor matches table width exactly (full width, no inner centering) */
body[data-site="ruthbowers"][data-page^="admin-projects-new"] .admin-projects-editor,
body[data-site="ruthbowers"][data-page^="admin-projects-edit"] .admin-projects-editor {
  width: 100%;
  margin-top: 2rem;
}

/* Ensure section body inner is full width (matches table container) */
body[data-site="ruthbowers"][data-page^="admin-projects-new"] .ui-section-body__inner,
body[data-site="ruthbowers"][data-page^="admin-projects-edit"] .ui-section-body__inner {
  width: 100%;
}

/* Textarea styling (subtle boxed cell, matches inputs) */
body[data-site="ruthbowers"][data-page^="admin-projects-new"] .admin-projects-editor__input[type="textarea"],
body[data-site="ruthbowers"][data-page^="admin-projects-new"] textarea.admin-projects-editor__input,
body[data-site="ruthbowers"][data-page^="admin-projects-edit"] .admin-projects-editor__input[type="textarea"],
body[data-site="ruthbowers"][data-page^="admin-projects-edit"] textarea.admin-projects-editor__input {
  padding: 0.4rem 0.6rem;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.02);
  resize: vertical;
  min-height: 4rem;
  font-family: inherit;
  line-height: 1.4;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

body[data-site="ruthbowers"][data-page^="admin-projects-new"] .admin-projects-editor__input[type="textarea"]:focus,
body[data-site="ruthbowers"][data-page^="admin-projects-new"] textarea.admin-projects-editor__input:focus,
body[data-site="ruthbowers"][data-page^="admin-projects-edit"] .admin-projects-editor__input[type="textarea"]:focus,
body[data-site="ruthbowers"][data-page^="admin-projects-edit"] textarea.admin-projects-editor__input:focus {
  outline: none;
  border-color: rgba(0, 0, 0, 0.15);
  background: #fff;
}

/* Checkbox styling - minimalistic */
body[data-site="ruthbowers"][data-page^="admin-projects-new"] .admin-projects-editor__input[type="checkbox"],
body[data-site="ruthbowers"][data-page^="admin-projects-edit"] .admin-projects-editor__input[type="checkbox"] {
  width: 1rem;
  height: 1rem;
  margin-right: 0.5rem;
  cursor: pointer;
  accent-color: #000;
}

/* Section headers (Media Library, Images, etc.) - quiet annotations */
body[data-site="ruthbowers"][data-page^="admin-projects-new"] h3,
body[data-site="ruthbowers"][data-page^="admin-projects-edit"] h3 {
  font-weight: 400;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.6;
  color: var(--site-fg, #222);
  margin-top: clamp(1.25rem, 2vw, 2rem);
  margin-bottom: 0.75rem;
}

/* Repeater add button - match site CTA style */
body[data-site="ruthbowers"][data-page^="admin-projects-new"] .admin-projects-editor__repeater-add,
body[data-site="ruthbowers"][data-page^="admin-projects-edit"] .admin-projects-editor__repeater-add {
  padding: 0;
  background: transparent;
  color: #666;
  border: none;
  border-radius: 0;
  font-size: 0.875rem;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  transition: color 0.2s ease, text-decoration 0.2s ease;
  -webkit-appearance: none;
  appearance: none;
}

body[data-site="ruthbowers"][data-page^="admin-projects-new"] .admin-projects-editor__repeater-add:hover,
body[data-site="ruthbowers"][data-page^="admin-projects-edit"] .admin-projects-editor__repeater-add:hover {
  color: #000;
  text-decoration: underline;
  text-decoration-color: rgba(0, 0, 0, 0.3);
  background: transparent;
}

/* ─── Scroll Ownership Override (unlayered; beats module layers) ─── */
body[data-site="ruthbowers"] {
  overflow-y: auto !important;
}

body[data-site="ruthbowers"] .ui-canvas[data-module="ui.canvas"],
body[data-site="ruthbowers"] .ui-canvas[data-mod="ui_canvas"] {
  overflow-y: visible !important;
  height: auto !important;
  min-height: 100vh !important;
  scrollbar-gutter: auto !important;
}

/* Kill any inner scroll container on main/layout after boot */
body[data-site="ruthbowers"] .ui-layout[data-module="ui.layout"],
body[data-site="ruthbowers"] .ui-layout[data-mod="ui_layout"],
body[data-site="ruthbowers"] .ui-layout__cell[data-area="main"] {
  overflow: visible !important;
  height: auto !important;
  max-height: none !important;
}

/* Force global gap between header and main content (all pages) */
body[data-site="ruthbowers"] .ui-layout__cell[data-area="main"] {
  margin-top: var(--page-top-gap) !important;
  margin-bottom: var(--page-top-gap) !important; /* Global gap before footer */
}

/* ─── Critical unlayered overrides: force stacked layout ─────────────── */
body[data-site="ruthbowers"] .ui-layout[data-module="ui.layout"],
body[data-site="ruthbowers"] .ui-layout[data-mod="ui_layout"] {
  display: flex !important;
  flex-direction: column !important;
  flex-wrap: nowrap !important;
  width: 100% !important;
  align-items: stretch !important;
}

body[data-site="ruthbowers"] .ui-layout__cell[data-area="header"],
body[data-site="ruthbowers"] .ui-layout__cell[data-area="main"],
body[data-site="ruthbowers"] .ui-layout__cell[data-area="footer"] {
  width: 100% !important;
  min-width: 0 !important;
  align-self: stretch !important;
}

/* ─── Mobile hard-stop: always stack layout cells ─────────────── */
@media (max-width: 1024px) {
  body[data-site="ruthbowers"] .ui-layout[data-module="ui.layout"],
  body[data-site="ruthbowers"] .ui-layout[data-mod="ui_layout"] {
    display: block !important;
    width: 100% !important;
  }

  body[data-site="ruthbowers"] .ui-layout__cell[data-area="header"],
  body[data-site="ruthbowers"] .ui-layout__cell[data-area="main"],
  body[data-site="ruthbowers"] .ui-layout__cell[data-area="footer"] {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  body[data-site="ruthbowers"] .ui-layout__cell[data-area="main"] {
    align-self: stretch !important;
  }

  /* Force main content back into the viewport on mobile */
  body[data-site="ruthbowers"] .ui-section-body,
  body[data-site="ruthbowers"] .ui-section-body__inner,
  body[data-site="ruthbowers"] .ui-section-composer,
  body[data-site="ruthbowers"] .ui-list__wrap,
  body[data-site="ruthbowers"] .ui-list {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    left: 0 !important;
    transform: none !important;
  }
}

/* ─── LOGIN FORM (SSR — no runtime module needed) ────────────────────────── */
body[data-site="ruthbowers"][data-page="login"] .rb-login {
  display: flex;
  justify-content: center;
  padding: 3rem 1rem;
}
body[data-site="ruthbowers"][data-page="login"] .rb-login__card {
  width: 100%;
  max-width: 400px;
  padding: 2.5rem 2rem;
  border: 1px solid #e0e0e0;
  border-radius: 12px;
  background: #fff;
}
body[data-site="ruthbowers"][data-page="login"] .rb-login__title {
  font-size: 1.5rem;
  font-weight: 600;
  margin: 0 0 0.25rem;
  color: var(--site-fg, #222);
}
body[data-site="ruthbowers"][data-page="login"] .rb-login__subtitle {
  font-size: 0.85rem;
  opacity: 0.6;
  margin: 0 0 1.5rem;
}
body[data-site="ruthbowers"][data-page="login"] .auth-form {
  display: grid;
  gap: 1rem;
}
body[data-site="ruthbowers"][data-page="login"] .auth-form__group {
  display: grid;
  gap: 0.35rem;
}
body[data-site="ruthbowers"][data-page="login"] .auth-form__label {
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--site-fg, #222);
}
body[data-site="ruthbowers"][data-page="login"] .auth-form__input {
  padding: 0.65rem 0.75rem;
  border: 1px solid #d0d0d0;
  border-radius: 8px;
  background: #fafafa;
  color: var(--site-fg, #222);
  font-size: 0.95rem;
  transition: border-color 0.15s;
}
body[data-site="ruthbowers"][data-page="login"] .auth-form__input:focus {
  outline: none;
  border-color: #222;
  background: #fff;
}
body[data-site="ruthbowers"][data-page="login"] .auth-form__input::placeholder {
  color: #999;
}
body[data-site="ruthbowers"][data-page="login"] .auth-form__submit {
  margin-top: 0.5rem;
  padding: 0.7rem 1rem;
  border: none;
  border-radius: 8px;
  background: #222;
  color: #fff;
  font-size: 0.95rem;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s;
}
body[data-site="ruthbowers"][data-page="login"] .auth-form__submit:hover {
  background: #444;
}
body[data-site="ruthbowers"][data-page="login"] .auth-form__submit:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
body[data-site="ruthbowers"][data-page="login"] .auth-form__error {
  font-size: 0.85rem;
  text-align: center;
  margin-top: 0.5rem;
}