/* ==========================================================================
   SURFACE STYLES
   Schema-driven borders, corners, and shadows using Tailwind-compatible classes.
   ========================================================================== */

/* BORDER - which edges (Tailwind pattern) */
.border-none { border: none; }
.border-top { border-top: var(--border-width, 1px) var(--border-style, solid) var(--border-color, oklch(var(--bc) / 0.2)); }
.border-bottom { border-bottom: var(--border-width, 1px) var(--border-style, solid) var(--border-color, oklch(var(--bc) / 0.2)); }
.border-left { border-left: var(--border-width, 1px) var(--border-style, solid) var(--border-color, oklch(var(--bc) / 0.2)); }
.border-right { border-right: var(--border-width, 1px) var(--border-style, solid) var(--border-color, oklch(var(--bc) / 0.2)); }
.border-x {
    border-left: var(--border-width, 1px) var(--border-style, solid) var(--border-color, oklch(var(--bc) / 0.2));
    border-right: var(--border-width, 1px) var(--border-style, solid) var(--border-color, oklch(var(--bc) / 0.2));
}
.border-y {
    border-top: var(--border-width, 1px) var(--border-style, solid) var(--border-color, oklch(var(--bc) / 0.2));
    border-bottom: var(--border-width, 1px) var(--border-style, solid) var(--border-color, oklch(var(--bc) / 0.2));
}
.border-all { border: var(--border-width, 1px) var(--border-style, solid) var(--border-color, oklch(var(--bc) / 0.2)); }

/* BORDER_STYLE - line pattern (CSS property) */
.border-solid { --border-style: solid; }
.border-dashed { --border-style: dashed; }
.border-dotted { --border-style: dotted; }
.border-double { --border-style: double; }

/* BORDER_WIDTH - thickness (CSS keywords) */
.border-thin { --border-width: 1px; }
.border-medium { --border-width: 2px; }
.border-thick { --border-width: 3px; }

/* BORDER_COLOR - intensity */
.border-default { --border-color: oklch(var(--bc) / 0.2); }
.border-muted { --border-color: oklch(var(--bc) / 0.1); }
.border-accent { --border-color: oklch(var(--p)); }

/* ROUNDED - border radius (Tailwind pattern)
   Values controlled by surface preset (rounded.css, sharp.css, soft.css, flat.css) */
.rounded-none { border-radius: var(--radius-none); }
.rounded-sm { border-radius: var(--radius-sm); }
.rounded-md { border-radius: var(--radius-md); }
.rounded-lg { border-radius: var(--radius-lg); }
.rounded-xl { border-radius: var(--radius-xl); }
.rounded-full { border-radius: var(--radius-full); }

/* SHADOW - elevation (Tailwind pattern)
   Values controlled by surface preset (rounded.css, sharp.css, soft.css, flat.css) */
.shadow-none { box-shadow: var(--shadow-none); }
.shadow-sm { box-shadow: var(--shadow-sm); }
.shadow-md { box-shadow: var(--shadow-md); }
.shadow-lg { box-shadow: var(--shadow-lg); }
.shadow-xl { box-shadow: var(--shadow-xl); }

/* ==========================================================================
   SECTION FLEX LAYOUT FIX
   Sections use flex output from unified render_column but need block behavior.
   Bars remain unchanged (use .bar-item, not inside .plexa-content-section).
   ========================================================================== */

/* Remove h-full for section columns - allow natural height */
.plexa-content-section .section-content .grid > [class*="col-span"] {
    height: auto;
}

/* Make column-item block for sections (not flex) - allow natural flow */
.plexa-content-section .column-item {
    display: block;
}

/* Ensure components fill width naturally */
.plexa-content-section .column-item > * {
    width: 100%;
}