@layer ui.section {
  /* ─────────────────────────────────────────────────────────────────────────────
     DΛREΛKT_ UI — MODULE: ui.section
     Classification : Layout Atom | Wrapping-Aware | Genesis-Final
     Version        : 2.0.0 | Scoped | Themeable | Bus-Safe
     File           : /tools/modules/ui.section/ui.section.css
     Maintainer     : DΛREΛKT_ UI TEAM
     ───────────────────────────────────────────────────────────────────────────── */

  :root {
    --ui-sec-padY: 32px;
    --ui-sec-padX: 16px;
    --ui-sec-bg: transparent;
    --ui-sec-fg: inherit;
  }

  /* ─── Root (section element) ──────────────────────────────────────────────── */
  .ui-section[data-mod="ui_section"] {
    box-sizing: border-box;
    display: block;
    position: relative;

    width: 100%;
    padding: var(--ui-sec-padY) var(--ui-sec-padX);

    background: var(--ui-sec-bg);
    color: var(--ui-sec-fg);

    margin: 0 auto;
    contain: layout paint style;
    overflow: visible;
    transition: background 0.3s ease, color 0.3s ease;

    /* ensure CSS safety when nested in grid/canvas contexts */
    flex: 0 0 auto;
  }

  /* ─── Wrapper ─────────────────────────────────────────────────────────────── */
  .ui-section__wrap[data-mod="ui_section"] {
    display: block;
    width: 100%;
    position: relative;
  }

  /* ─── Title / Body Hooks ─────────────────────────────────────────────────── */
  .ui-section__title {
    font-size: clamp(1.25rem, 1.1vw + 1rem, 2rem);
    font-weight: 600;
    margin-bottom: 1rem;
    line-height: 1.3;
  }

  .ui-section__body {
    line-height: 1.6;
    font-size: 1rem;
  }

  /* ─── Visibility States ───────────────────────────────────────────────────── */
  .ui-section[data-state="hidden"] {
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
  }

  .ui-section[data-state="visible"] {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.2s ease;
  }

  /* ─── Debug / Diagnostics Mode ────────────────────────────────────────────── */
  .ui-section[data-debug="true"] {
    outline: 1px dashed rgba(255, 255, 255, 0.2);
    background-image: repeating-linear-gradient(
      45deg,
      rgba(255, 255, 255, 0.05) 0,
      rgba(255, 255, 255, 0.05) 2px,
      transparent 2px,
      transparent 6px
    );
  }
}