/* scripta-ui.css — Utility classes replacing elm-ui */

*, *::before, *::after { box-sizing: border-box; }
*:focus { outline: none; box-shadow: none; }
button { border: none; background: none; cursor: pointer; font: inherit; padding: 0; }

/* Layout */
.column { display: flex; flex-direction: column; }
.row { display: flex; flex-direction: row; align-items: stretch; }
.paragraph { line-height: 1.5; }
.wrappedRow { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; }

/* Sizing */
.width-fill { width: 100%; }
.height-fill { flex: 1 1 0%; min-height: 0; }

/* Alignment */
.center-x { margin-left: auto; margin-right: auto; }
.center-y { align-self: center; }
.align-right { margin-left: auto; }
.align-left { margin-right: auto; }
.align-top { align-self: flex-start; }
.align-bottom { align-self: flex-end; }
.items-top { align-items: flex-start; }
.items-center-y { align-items: center; }

/* Overflow */
.clip { overflow: hidden; }
.clip-x { overflow-x: hidden; }
.clip-y { overflow-y: hidden; }
.scroll-y { overflow-y: auto; }
.scroll-x { overflow-x: auto; }

/* Typography */
.font-bold { font-weight: bold; }
.font-medium { font-weight: 500; }
.font-italic { font-style: italic; }

/* Interaction */
.pointer { cursor: pointer; }
.no-select { user-select: none; }

/* Hover effects */
.hover-bg-gray:hover { background-color: rgb(102,102,102); }
.hover-bg-light:hover { background-color: rgb(230,230,255); }
.hover-bg-red:hover { background-color: rgb(230,102,102); }
.hover-bg-dark-blue:hover { background-color: rgb(67,56,202); }
.hover-bg-transparent:hover { background-color: transparent; }
.hover-font-white:hover { color: white; }
.hover-font-red:hover { color: rgb(255,0,0); }
.hover-opacity-9:hover { opacity: 0.9; }