/* ────────────────────────────────────────────────────────────────
   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;
  --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;
    }
    
    /* ─── 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;
      background: var(--site-bg, #fff);
      color: var(--site-fg, #222);
      font-family: 'Inter', 'Roboto', sans-serif;
      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 */
    body[data-site="ruthbowers"][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: 1 1 auto !important; /* Stretch to fill wrapper - MUST match wrapper height */
      min-height: 0; /* Allow flex shrinking */
    }
    
    /* ─── 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: 0;
      width: 100%;
      box-sizing: border-box;
      flex: 1 1 auto !important; /* Consume remaining space - override module default flex: 1 1 auto */
    }
    
    /* ─── 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 */
    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: 1px solid rgba(0, 0, 0, 0.04);
    }
    body[data-site="ruthbowers"] header#nav .ui-navbar__inner {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding-block: 0.7rem;
      padding-bottom: 0.7rem;
      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-bottom: 0;
      margin-bottom: 0;
    }
    
    /* ─── Navbar wrapper: ensure no bottom spacing ───────────────────── */
    body[data-site="ruthbowers"] .ui-navbar__wrap {
      padding-bottom: 0;
      margin-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;
    }
    
    /* ─── 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;
      /* 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: 'Inter', 'Roboto', sans-serif !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: 'Inter', 'Roboto', sans-serif;
  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"] [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"] [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"] [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;
}