/* ==========================================================================
   utilities.css
   Handyman Services Marketplace — Utility Class Library
   Phase 2: CSS Design System

   Depends on: base.css (all tokens)
   Load order: base.css → layout.css → components.css → utilities.css
   (source-order ensures utilities win over component styles at equal specificity)

   Table of contents
   -----------------
   1.  Display
   2.  Flexbox
   3.  Grid
   4.  Spacing — margin & padding
   5.  Typography
   6.  Colour — text, background, border
   7.  Borders — width, style, radius, shadow
   8.  Sizing — width, height, aspect ratio
   9.  Position & z-index
   10. Overflow
   11. Visibility & accessibility
   12. Interactivity — cursor, pointer-events, user-select
   13. Transitions
   14. Print utilities
   15. Responsive prefixes  (md: 768px+  lg: 1024px+  xl: 1280px+)
   16. Dark mode            (prefers-color-scheme: dark)
   17. Animation keyframes & utilities

   Naming conventions
   ------------------
   Spacing values mirror base.css token names:
     0 · px · 0-5 · 1 · 1-5 · 2 · 2-5 · 3 · 4 · 5 · 6 · 8 · 10 · 12
   Colour values mirror base.css scale stops.
   Responsive prefix classes use escaped colons:  .md\:hidden { }
   In HTML write the literal colon:               class="md:hidden"
   ========================================================================== */


/* ==========================================================================
   1. DISPLAY
   ========================================================================== */

.block        { display: block; }
.inline-block { display: inline-block; }
.inline       { display: inline; }
.flex         { display: flex; }
.inline-flex  { display: inline-flex; }
.grid         { display: grid; }
.inline-grid  { display: inline-grid; }
.table        { display: table; }
.table-row    { display: table-row; }
.table-cell   { display: table-cell; }
.contents     { display: contents; }
.list-item    { display: list-item; }

/* display: none — !important so it always wins over component display values */
.hidden { display: none !important; }


/* ==========================================================================
   2. FLEXBOX
   ========================================================================== */

/* Direction */
.flex-row         { flex-direction: row; }
.flex-row-reverse { flex-direction: row-reverse; }
.flex-col         { flex-direction: column; }
.flex-col-reverse { flex-direction: column-reverse; }

/* Wrap */
.flex-wrap         { flex-wrap: wrap; }
.flex-wrap-reverse { flex-wrap: wrap-reverse; }
.flex-nowrap       { flex-wrap: nowrap; }

/* Grow / shrink / basis */
.flex-1    { flex: 1 1 0%; }
.flex-auto { flex: 1 1 auto; }
.flex-none { flex: none; }

.grow   { flex-grow: 1; }
.grow-0 { flex-grow: 0; }

.shrink   { flex-shrink: 1; }
.shrink-0 { flex-shrink: 0; }

/* Align items (cross axis) */
.items-start    { align-items: flex-start; }
.items-end      { align-items: flex-end; }
.items-center   { align-items: center; }
.items-baseline { align-items: baseline; }
.items-stretch  { align-items: stretch; }

/* Justify content (main axis) */
.justify-start   { justify-content: flex-start; }
.justify-end     { justify-content: flex-end; }
.justify-center  { justify-content: center; }
.justify-between { justify-content: space-between; }
.justify-around  { justify-content: space-around; }
.justify-evenly  { justify-content: space-evenly; }

/* Align content (multi-line) */
.content-start   { align-content: flex-start; }
.content-end     { align-content: flex-end; }
.content-center  { align-content: center; }
.content-between { align-content: space-between; }
.content-around  { align-content: space-around; }
.content-stretch { align-content: stretch; }

/* Align self */
.self-auto    { align-self: auto; }
.self-start   { align-self: flex-start; }
.self-end     { align-self: flex-end; }
.self-center  { align-self: center; }
.self-stretch { align-self: stretch; }

/* Order */
.order-first { order: -9999; }
.order-last  { order:  9999; }
.order-none  { order:  0; }

/* Gap */
.gap-0   { gap: var(--space-0); }
.gap-0-5 { gap: var(--space-0-5); }
.gap-1   { gap: var(--space-1); }
.gap-1-5 { gap: var(--space-1-5); }
.gap-2   { gap: var(--space-2); }
.gap-2-5 { gap: var(--space-2-5); }
.gap-3   { gap: var(--space-3); }
.gap-4   { gap: var(--space-4); }
.gap-5   { gap: var(--space-5); }
.gap-6   { gap: var(--space-6); }
.gap-8   { gap: var(--space-8); }
.gap-10  { gap: var(--space-10); }
.gap-12  { gap: var(--space-12); }

/* Column gap */
.gap-x-0   { column-gap: var(--space-0); }
.gap-x-0-5 { column-gap: var(--space-0-5); }
.gap-x-1   { column-gap: var(--space-1); }
.gap-x-1-5 { column-gap: var(--space-1-5); }
.gap-x-2   { column-gap: var(--space-2); }
.gap-x-2-5 { column-gap: var(--space-2-5); }
.gap-x-3   { column-gap: var(--space-3); }
.gap-x-4   { column-gap: var(--space-4); }
.gap-x-5   { column-gap: var(--space-5); }
.gap-x-6   { column-gap: var(--space-6); }
.gap-x-8   { column-gap: var(--space-8); }

/* Row gap */
.gap-y-0   { row-gap: var(--space-0); }
.gap-y-0-5 { row-gap: var(--space-0-5); }
.gap-y-1   { row-gap: var(--space-1); }
.gap-y-1-5 { row-gap: var(--space-1-5); }
.gap-y-2   { row-gap: var(--space-2); }
.gap-y-2-5 { row-gap: var(--space-2-5); }
.gap-y-3   { row-gap: var(--space-3); }
.gap-y-4   { row-gap: var(--space-4); }
.gap-y-5   { row-gap: var(--space-5); }
.gap-y-6   { row-gap: var(--space-6); }
.gap-y-8   { row-gap: var(--space-8); }


/* ==========================================================================
   3. GRID
   ========================================================================== */

/* Template columns */
.grid-cols-1  { grid-template-columns: repeat(1,  1fr); }
.grid-cols-2  { grid-template-columns: repeat(2,  1fr); }
.grid-cols-3  { grid-template-columns: repeat(3,  1fr); }
.grid-cols-4  { grid-template-columns: repeat(4,  1fr); }
.grid-cols-5  { grid-template-columns: repeat(5,  1fr); }
.grid-cols-6  { grid-template-columns: repeat(6,  1fr); }
.grid-cols-12 { grid-template-columns: repeat(12, 1fr); }
.grid-cols-none { grid-template-columns: none; }

/* Template rows */
.grid-rows-1 { grid-template-rows: repeat(1, minmax(0, 1fr)); }
.grid-rows-2 { grid-template-rows: repeat(2, minmax(0, 1fr)); }
.grid-rows-3 { grid-template-rows: repeat(3, minmax(0, 1fr)); }
.grid-rows-4 { grid-template-rows: repeat(4, minmax(0, 1fr)); }
.grid-rows-6 { grid-template-rows: repeat(6, minmax(0, 1fr)); }

/* Auto flow */
.grid-flow-row    { grid-auto-flow: row; }
.grid-flow-col    { grid-auto-flow: column; }
.grid-flow-dense  { grid-auto-flow: dense; }

/* Place utilities */
.place-items-start  { place-items: start; }
.place-items-center { place-items: center; }
.place-items-end    { place-items: end; }
.place-items-stretch { place-items: stretch; }

.place-content-start   { place-content: start; }
.place-content-center  { place-content: center; }
.place-content-between { place-content: space-between; }

/* Column span — complements layout.css .col-N classes */
.col-span-1  { grid-column: span 1; }
.col-span-2  { grid-column: span 2; }
.col-span-3  { grid-column: span 3; }
.col-span-4  { grid-column: span 4; }
.col-span-6  { grid-column: span 6; }
.col-span-12 { grid-column: span 12; }
.col-span-full { grid-column: 1 / -1; }

/* Row span */
.row-span-1 { grid-row: span 1; }
.row-span-2 { grid-row: span 2; }
.row-span-3 { grid-row: span 3; }
.row-span-full { grid-row: 1 / -1; }


/* ==========================================================================
   4. SPACING — MARGIN & PADDING
   Values mirror base.css --space-* token names exactly.
   mx / my use logical properties (margin-inline / margin-block) for RTL support.
   ========================================================================== */

/* --- Margin ---------------------------------------------------------------- */

.m-0    { margin: var(--space-0); }
.m-px   { margin: var(--space-px); }
.m-0-5  { margin: var(--space-0-5); }
.m-1    { margin: var(--space-1); }
.m-1-5  { margin: var(--space-1-5); }
.m-2    { margin: var(--space-2); }
.m-2-5  { margin: var(--space-2-5); }
.m-3    { margin: var(--space-3); }
.m-4    { margin: var(--space-4); }
.m-5    { margin: var(--space-5); }
.m-6    { margin: var(--space-6); }
.m-8    { margin: var(--space-8); }
.m-10   { margin: var(--space-10); }
.m-12   { margin: var(--space-12); }
.m-auto { margin: auto; }

/* Margin X (inline / horizontal) */
.mx-0    { margin-inline: var(--space-0); }
.mx-px   { margin-inline: var(--space-px); }
.mx-0-5  { margin-inline: var(--space-0-5); }
.mx-1    { margin-inline: var(--space-1); }
.mx-1-5  { margin-inline: var(--space-1-5); }
.mx-2    { margin-inline: var(--space-2); }
.mx-2-5  { margin-inline: var(--space-2-5); }
.mx-3    { margin-inline: var(--space-3); }
.mx-4    { margin-inline: var(--space-4); }
.mx-5    { margin-inline: var(--space-5); }
.mx-6    { margin-inline: var(--space-6); }
.mx-8    { margin-inline: var(--space-8); }
.mx-10   { margin-inline: var(--space-10); }
.mx-12   { margin-inline: var(--space-12); }
.mx-auto { margin-inline: auto; }

/* Margin Y (block / vertical) */
.my-0    { margin-block: var(--space-0); }
.my-px   { margin-block: var(--space-px); }
.my-0-5  { margin-block: var(--space-0-5); }
.my-1    { margin-block: var(--space-1); }
.my-1-5  { margin-block: var(--space-1-5); }
.my-2    { margin-block: var(--space-2); }
.my-2-5  { margin-block: var(--space-2-5); }
.my-3    { margin-block: var(--space-3); }
.my-4    { margin-block: var(--space-4); }
.my-5    { margin-block: var(--space-5); }
.my-6    { margin-block: var(--space-6); }
.my-8    { margin-block: var(--space-8); }
.my-10   { margin-block: var(--space-10); }
.my-12   { margin-block: var(--space-12); }
.my-auto { margin-block: auto; }

/* Margin top */
.mt-0    { margin-top: var(--space-0); }
.mt-px   { margin-top: var(--space-px); }
.mt-0-5  { margin-top: var(--space-0-5); }
.mt-1    { margin-top: var(--space-1); }
.mt-1-5  { margin-top: var(--space-1-5); }
.mt-2    { margin-top: var(--space-2); }
.mt-2-5  { margin-top: var(--space-2-5); }
.mt-3    { margin-top: var(--space-3); }
.mt-4    { margin-top: var(--space-4); }
.mt-5    { margin-top: var(--space-5); }
.mt-6    { margin-top: var(--space-6); }
.mt-8    { margin-top: var(--space-8); }
.mt-10   { margin-top: var(--space-10); }
.mt-12   { margin-top: var(--space-12); }
.mt-auto { margin-top: auto; }

/* Margin right */
.mr-0    { margin-right: var(--space-0); }
.mr-px   { margin-right: var(--space-px); }
.mr-0-5  { margin-right: var(--space-0-5); }
.mr-1    { margin-right: var(--space-1); }
.mr-1-5  { margin-right: var(--space-1-5); }
.mr-2    { margin-right: var(--space-2); }
.mr-2-5  { margin-right: var(--space-2-5); }
.mr-3    { margin-right: var(--space-3); }
.mr-4    { margin-right: var(--space-4); }
.mr-5    { margin-right: var(--space-5); }
.mr-6    { margin-right: var(--space-6); }
.mr-8    { margin-right: var(--space-8); }
.mr-auto { margin-right: auto; }

/* Margin bottom */
.mb-0    { margin-bottom: var(--space-0); }
.mb-px   { margin-bottom: var(--space-px); }
.mb-0-5  { margin-bottom: var(--space-0-5); }
.mb-1    { margin-bottom: var(--space-1); }
.mb-1-5  { margin-bottom: var(--space-1-5); }
.mb-2    { margin-bottom: var(--space-2); }
.mb-2-5  { margin-bottom: var(--space-2-5); }
.mb-3    { margin-bottom: var(--space-3); }
.mb-4    { margin-bottom: var(--space-4); }
.mb-5    { margin-bottom: var(--space-5); }
.mb-6    { margin-bottom: var(--space-6); }
.mb-8    { margin-bottom: var(--space-8); }
.mb-10   { margin-bottom: var(--space-10); }
.mb-12   { margin-bottom: var(--space-12); }
.mb-auto { margin-bottom: auto; }

/* Margin left */
.ml-0    { margin-left: var(--space-0); }
.ml-px   { margin-left: var(--space-px); }
.ml-0-5  { margin-left: var(--space-0-5); }
.ml-1    { margin-left: var(--space-1); }
.ml-1-5  { margin-left: var(--space-1-5); }
.ml-2    { margin-left: var(--space-2); }
.ml-2-5  { margin-left: var(--space-2-5); }
.ml-3    { margin-left: var(--space-3); }
.ml-4    { margin-left: var(--space-4); }
.ml-5    { margin-left: var(--space-5); }
.ml-6    { margin-left: var(--space-6); }
.ml-8    { margin-left: var(--space-8); }
.ml-auto { margin-left: auto; }

/* Negative margins — useful for bleed layouts and overlapping elements */
.-m-px   { margin: calc(-1 * var(--space-px)); }
.-m-0-5  { margin: calc(-1 * var(--space-0-5)); }
.-m-1    { margin: calc(-1 * var(--space-1)); }
.-m-2    { margin: calc(-1 * var(--space-2)); }
.-m-3    { margin: calc(-1 * var(--space-3)); }
.-m-4    { margin: calc(-1 * var(--space-4)); }
.-mt-px  { margin-top:    calc(-1 * var(--space-px)); }
.-mt-0-5 { margin-top:    calc(-1 * var(--space-0-5)); }
.-mt-1   { margin-top:    calc(-1 * var(--space-1)); }
.-mt-2   { margin-top:    calc(-1 * var(--space-2)); }
.-mb-px  { margin-bottom: calc(-1 * var(--space-px)); }
.-mb-0-5 { margin-bottom: calc(-1 * var(--space-0-5)); }
.-mb-1   { margin-bottom: calc(-1 * var(--space-1)); }
.-mb-2   { margin-bottom: calc(-1 * var(--space-2)); }
.-ml-px  { margin-left:   calc(-1 * var(--space-px)); }
.-ml-0-5 { margin-left:   calc(-1 * var(--space-0-5)); }
.-ml-1   { margin-left:   calc(-1 * var(--space-1)); }
.-ml-2   { margin-left:   calc(-1 * var(--space-2)); }
.-mr-px  { margin-right:  calc(-1 * var(--space-px)); }
.-mr-0-5 { margin-right:  calc(-1 * var(--space-0-5)); }
.-mr-1   { margin-right:  calc(-1 * var(--space-1)); }
.-mr-2   { margin-right:  calc(-1 * var(--space-2)); }


/* --- Padding --------------------------------------------------------------- */

.p-0    { padding: var(--space-0); }
.p-px   { padding: var(--space-px); }
.p-0-5  { padding: var(--space-0-5); }
.p-1    { padding: var(--space-1); }
.p-1-5  { padding: var(--space-1-5); }
.p-2    { padding: var(--space-2); }
.p-2-5  { padding: var(--space-2-5); }
.p-3    { padding: var(--space-3); }
.p-4    { padding: var(--space-4); }
.p-5    { padding: var(--space-5); }
.p-6    { padding: var(--space-6); }
.p-8    { padding: var(--space-8); }
.p-10   { padding: var(--space-10); }
.p-12   { padding: var(--space-12); }

/* Padding X */
.px-0   { padding-inline: var(--space-0); }
.px-px  { padding-inline: var(--space-px); }
.px-0-5 { padding-inline: var(--space-0-5); }
.px-1   { padding-inline: var(--space-1); }
.px-1-5 { padding-inline: var(--space-1-5); }
.px-2   { padding-inline: var(--space-2); }
.px-2-5 { padding-inline: var(--space-2-5); }
.px-3   { padding-inline: var(--space-3); }
.px-4   { padding-inline: var(--space-4); }
.px-5   { padding-inline: var(--space-5); }
.px-6   { padding-inline: var(--space-6); }
.px-8   { padding-inline: var(--space-8); }
.px-10  { padding-inline: var(--space-10); }
.px-12  { padding-inline: var(--space-12); }

/* Padding Y */
.py-0   { padding-block: var(--space-0); }
.py-px  { padding-block: var(--space-px); }
.py-0-5 { padding-block: var(--space-0-5); }
.py-1   { padding-block: var(--space-1); }
.py-1-5 { padding-block: var(--space-1-5); }
.py-2   { padding-block: var(--space-2); }
.py-2-5 { padding-block: var(--space-2-5); }
.py-3   { padding-block: var(--space-3); }
.py-4   { padding-block: var(--space-4); }
.py-5   { padding-block: var(--space-5); }
.py-6   { padding-block: var(--space-6); }
.py-8   { padding-block: var(--space-8); }
.py-10  { padding-block: var(--space-10); }
.py-12  { padding-block: var(--space-12); }

/* Padding top */
.pt-0   { padding-top: var(--space-0); }
.pt-px  { padding-top: var(--space-px); }
.pt-0-5 { padding-top: var(--space-0-5); }
.pt-1   { padding-top: var(--space-1); }
.pt-1-5 { padding-top: var(--space-1-5); }
.pt-2   { padding-top: var(--space-2); }
.pt-2-5 { padding-top: var(--space-2-5); }
.pt-3   { padding-top: var(--space-3); }
.pt-4   { padding-top: var(--space-4); }
.pt-5   { padding-top: var(--space-5); }
.pt-6   { padding-top: var(--space-6); }
.pt-8   { padding-top: var(--space-8); }
.pt-10  { padding-top: var(--space-10); }
.pt-12  { padding-top: var(--space-12); }

/* Padding right */
.pr-0   { padding-right: var(--space-0); }
.pr-px  { padding-right: var(--space-px); }
.pr-0-5 { padding-right: var(--space-0-5); }
.pr-1   { padding-right: var(--space-1); }
.pr-1-5 { padding-right: var(--space-1-5); }
.pr-2   { padding-right: var(--space-2); }
.pr-2-5 { padding-right: var(--space-2-5); }
.pr-3   { padding-right: var(--space-3); }
.pr-4   { padding-right: var(--space-4); }
.pr-5   { padding-right: var(--space-5); }
.pr-6   { padding-right: var(--space-6); }
.pr-8   { padding-right: var(--space-8); }

/* Padding bottom */
.pb-0   { padding-bottom: var(--space-0); }
.pb-px  { padding-bottom: var(--space-px); }
.pb-0-5 { padding-bottom: var(--space-0-5); }
.pb-1   { padding-bottom: var(--space-1); }
.pb-1-5 { padding-bottom: var(--space-1-5); }
.pb-2   { padding-bottom: var(--space-2); }
.pb-2-5 { padding-bottom: var(--space-2-5); }
.pb-3   { padding-bottom: var(--space-3); }
.pb-4   { padding-bottom: var(--space-4); }
.pb-5   { padding-bottom: var(--space-5); }
.pb-6   { padding-bottom: var(--space-6); }
.pb-8   { padding-bottom: var(--space-8); }
.pb-10  { padding-bottom: var(--space-10); }
.pb-12  { padding-bottom: var(--space-12); }

/* Padding left */
.pl-0   { padding-left: var(--space-0); }
.pl-px  { padding-left: var(--space-px); }
.pl-0-5 { padding-left: var(--space-0-5); }
.pl-1   { padding-left: var(--space-1); }
.pl-1-5 { padding-left: var(--space-1-5); }
.pl-2   { padding-left: var(--space-2); }
.pl-2-5 { padding-left: var(--space-2-5); }
.pl-3   { padding-left: var(--space-3); }
.pl-4   { padding-left: var(--space-4); }
.pl-5   { padding-left: var(--space-5); }
.pl-6   { padding-left: var(--space-6); }
.pl-8   { padding-left: var(--space-8); }


/* ==========================================================================
   5. TYPOGRAPHY
   ========================================================================== */

/* Font family */
.font-sans { font-family: var(--font-sans); }
.font-mono { font-family: var(--font-mono); }

/* Font size */
.text-xs   { font-size: var(--text-xs); }
.text-sm   { font-size: var(--text-sm); }
.text-base { font-size: var(--text-base); }
.text-md   { font-size: var(--text-md); }
.text-lg   { font-size: var(--text-lg); }
.text-xl   { font-size: var(--text-xl); }
.text-2xl  { font-size: var(--text-2xl); }
.text-3xl  { font-size: var(--text-3xl); }

/* Font weight */
.font-regular  { font-weight: var(--font-regular); }
.font-medium   { font-weight: var(--font-medium); }
.font-semibold { font-weight: var(--font-semibold); }
.font-bold     { font-weight: var(--font-bold); }

/* Line height */
.leading-none    { line-height: var(--leading-none); }
.leading-tight   { line-height: var(--leading-tight); }
.leading-snug    { line-height: var(--leading-snug); }
.leading-normal  { line-height: var(--leading-normal); }
.leading-relaxed { line-height: var(--leading-relaxed); }
.leading-loose   { line-height: var(--leading-loose); }

/* Letter spacing */
.tracking-tight   { letter-spacing: var(--tracking-tight); }
.tracking-normal  { letter-spacing: var(--tracking-normal); }
.tracking-wide    { letter-spacing: var(--tracking-wide); }
.tracking-wider   { letter-spacing: var(--tracking-wider); }
.tracking-widest  { letter-spacing: var(--tracking-widest); }

/* Text alignment */
.text-left    { text-align: left; }
.text-center  { text-align: center; }
.text-right   { text-align: right; }
.text-justify { text-align: justify; }
.text-start   { text-align: start; }
.text-end     { text-align: end; }

/* Text transform */
.uppercase   { text-transform: uppercase; }
.lowercase   { text-transform: lowercase; }
.capitalize  { text-transform: capitalize; }
.normal-case { text-transform: none; }

/* Text decoration */
.underline       { text-decoration: underline; }
.overline        { text-decoration: overline; }
.line-through    { text-decoration: line-through; }
.no-underline    { text-decoration: none; }

/* Font style */
.italic     { font-style: italic; }
.not-italic { font-style: normal; }

/* White space */
.whitespace-normal  { white-space: normal; }
.whitespace-nowrap  { white-space: nowrap; }
.whitespace-pre     { white-space: pre; }
.whitespace-pre-line { white-space: pre-line; }
.whitespace-pre-wrap { white-space: pre-wrap; }
.whitespace-break-spaces { white-space: break-spaces; }

/* Text wrap — modern CSS (supported Chrome 114+, Firefox 121+) */
.text-wrap    { text-wrap: wrap; }
.text-nowrap  { text-wrap: nowrap; }
.text-balance { text-wrap: balance; }   /* even line lengths in headings */
.text-pretty  { text-wrap: pretty; }   /* avoid orphans in body copy */

/* Overflow text */
.truncate {
  overflow:      hidden;
  text-overflow: ellipsis;
  white-space:   nowrap;
}

/* Multi-line clamp via -webkit-box (supported everywhere via Interop 2024) */
.line-clamp-1 { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.line-clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.line-clamp-4 { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.line-clamp-5 { display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; }
.line-clamp-none { display: block; -webkit-line-clamp: unset; overflow: visible; }

/* Word break */
.break-normal { overflow-wrap: normal; word-break: normal; }
.break-words  { overflow-wrap: break-word; }
.break-all    { word-break: break-all; }
.break-keep   { word-break: keep-all; }

/* Vertical alignment */
.align-baseline { vertical-align: baseline; }
.align-top      { vertical-align: top; }
.align-middle   { vertical-align: middle; }
.align-bottom   { vertical-align: bottom; }
.align-sub      { vertical-align: sub; }
.align-super    { vertical-align: super; }

/* List style */
.list-none    { list-style: none; padding-left: 0; }
.list-disc    { list-style: disc; }
.list-decimal { list-style: decimal; }


/* ==========================================================================
   6. COLOUR — TEXT, BACKGROUND, BORDER
   ========================================================================== */

/* --- Semantic text colours (reference intended roles, not raw values) --- */

.text-default  { color: var(--color-text); }
.text-muted    { color: var(--color-text-muted); }
.text-subtle   { color: var(--color-text-subtle); }
.text-inverse  { color: var(--color-text-inverse); }
.text-link     { color: var(--color-link); }

/* --- Primary scale --- */
.text-primary-50  { color: var(--color-primary-50); }
.text-primary-100 { color: var(--color-primary-100); }
.text-primary-200 { color: var(--color-primary-200); }
.text-primary-300 { color: var(--color-primary-300); }
.text-primary-400 { color: var(--color-primary-400); }
.text-primary-500 { color: var(--color-primary-500); }
.text-primary-600 { color: var(--color-primary-600); }
.text-primary-700 { color: var(--color-primary-700); }
.text-primary-800 { color: var(--color-primary-800); }
.text-primary-900 { color: var(--color-primary-900); }

/* --- Secondary scale --- */
.text-secondary-50  { color: var(--color-secondary-50); }
.text-secondary-100 { color: var(--color-secondary-100); }
.text-secondary-300 { color: var(--color-secondary-300); }
.text-secondary-400 { color: var(--color-secondary-400); }
.text-secondary-500 { color: var(--color-secondary-500); }
.text-secondary-600 { color: var(--color-secondary-600); }
.text-secondary-700 { color: var(--color-secondary-700); }

/* --- Accent scale --- */
.text-accent-50  { color: var(--color-accent-50); }
.text-accent-100 { color: var(--color-accent-100); }
.text-accent-300 { color: var(--color-accent-300); }
.text-accent-400 { color: var(--color-accent-400); }
.text-accent-500 { color: var(--color-accent-500); }
.text-accent-600 { color: var(--color-accent-600); }
.text-accent-700 { color: var(--color-accent-700); }

/* --- Neutral scale --- */
.text-white        { color: var(--color-neutral-0); }
.text-neutral-50   { color: var(--color-neutral-50); }
.text-neutral-100  { color: var(--color-neutral-100); }
.text-neutral-200  { color: var(--color-neutral-200); }
.text-neutral-300  { color: var(--color-neutral-300); }
.text-neutral-400  { color: var(--color-neutral-400); }
.text-neutral-500  { color: var(--color-neutral-500); }
.text-neutral-600  { color: var(--color-neutral-600); }
.text-neutral-700  { color: var(--color-neutral-700); }
.text-neutral-800  { color: var(--color-neutral-800); }
.text-neutral-900  { color: var(--color-neutral-900); }
.text-black        { color: var(--color-neutral-1000); }

/* --- Semantic status text --- */
.text-success { color: var(--color-success-600); }
.text-warning { color: var(--color-warning-600); }
.text-error   { color: var(--color-error-600); }
.text-info    { color: var(--color-primary-600); }

.text-success-500 { color: var(--color-success-500); }
.text-success-600 { color: var(--color-success-600); }
.text-success-700 { color: var(--color-success-700); }
.text-warning-500 { color: var(--color-warning-500); }
.text-warning-600 { color: var(--color-warning-600); }
.text-warning-700 { color: var(--color-warning-700); }
.text-error-500   { color: var(--color-error-500); }
.text-error-600   { color: var(--color-error-600); }
.text-error-700   { color: var(--color-error-700); }


/* --- Background colours ---------------------------------------------------- */

/* Semantic */
.bg-page        { background-color: var(--color-bg); }
.bg-subtle      { background-color: var(--color-bg-subtle); }
.bg-surface     { background-color: var(--color-surface); }
.bg-transparent { background-color: transparent; }

/* Primary */
.bg-primary-50  { background-color: var(--color-primary-50); }
.bg-primary-100 { background-color: var(--color-primary-100); }
.bg-primary-200 { background-color: var(--color-primary-200); }
.bg-primary-300 { background-color: var(--color-primary-300); }
.bg-primary-400 { background-color: var(--color-primary-400); }
.bg-primary-500 { background-color: var(--color-primary-500); }
.bg-primary-600 { background-color: var(--color-primary-600); }
.bg-primary-700 { background-color: var(--color-primary-700); }
.bg-primary-800 { background-color: var(--color-primary-800); }
.bg-primary-900 { background-color: var(--color-primary-900); }

/* Secondary */
.bg-secondary-50  { background-color: var(--color-secondary-50); }
.bg-secondary-100 { background-color: var(--color-secondary-100); }
.bg-secondary-500 { background-color: var(--color-secondary-500); }
.bg-secondary-600 { background-color: var(--color-secondary-600); }

/* Accent */
.bg-accent-50  { background-color: var(--color-accent-50); }
.bg-accent-100 { background-color: var(--color-accent-100); }
.bg-accent-200 { background-color: var(--color-accent-200); }
.bg-accent-400 { background-color: var(--color-accent-400); }
.bg-accent-500 { background-color: var(--color-accent-500); }
.bg-accent-600 { background-color: var(--color-accent-600); }

/* Neutral */
.bg-white        { background-color: var(--color-neutral-0); }
.bg-neutral-50   { background-color: var(--color-neutral-50); }
.bg-neutral-100  { background-color: var(--color-neutral-100); }
.bg-neutral-200  { background-color: var(--color-neutral-200); }
.bg-neutral-300  { background-color: var(--color-neutral-300); }
.bg-neutral-400  { background-color: var(--color-neutral-400); }
.bg-neutral-500  { background-color: var(--color-neutral-500); }
.bg-neutral-600  { background-color: var(--color-neutral-600); }
.bg-neutral-700  { background-color: var(--color-neutral-700); }
.bg-neutral-800  { background-color: var(--color-neutral-800); }
.bg-neutral-900  { background-color: var(--color-neutral-900); }
.bg-black        { background-color: var(--color-neutral-1000); }

/* Status */
.bg-success-50  { background-color: var(--color-success-50); }
.bg-success-100 { background-color: var(--color-success-100); }
.bg-success-500 { background-color: var(--color-success-500); }
.bg-success-600 { background-color: var(--color-success-600); }
.bg-warning-50  { background-color: var(--color-warning-50); }
.bg-warning-100 { background-color: var(--color-warning-100); }
.bg-warning-500 { background-color: var(--color-warning-500); }
.bg-error-50    { background-color: var(--color-error-50); }
.bg-error-100   { background-color: var(--color-error-100); }
.bg-error-500   { background-color: var(--color-error-500); }
.bg-error-600   { background-color: var(--color-error-600); }


/* --- Opacity --------------------------------------------------------------- */

.opacity-0   { opacity: 0; }
.opacity-5   { opacity: 0.05; }
.opacity-10  { opacity: 0.10; }
.opacity-20  { opacity: 0.20; }
.opacity-25  { opacity: 0.25; }
.opacity-50  { opacity: 0.50; }
.opacity-75  { opacity: 0.75; }
.opacity-90  { opacity: 0.90; }
.opacity-100 { opacity: 1; }


/* ==========================================================================
   7. BORDERS — WIDTH, STYLE, RADIUS, SHADOW
   ========================================================================== */

/* Border shorthand */
.border   { border: 1px solid var(--color-border); }
.border-2 { border: 2px solid var(--color-border); }
.border-4 { border: 4px solid var(--color-border); }
.border-0 { border: 0; }

/* Directional */
.border-t   { border-top:    1px solid var(--color-border); }
.border-r   { border-right:  1px solid var(--color-border); }
.border-b   { border-bottom: 1px solid var(--color-border); }
.border-l   { border-left:   1px solid var(--color-border); }
.border-t-0 { border-top:    0; }
.border-r-0 { border-right:  0; }
.border-b-0 { border-bottom: 0; }
.border-l-0 { border-left:   0; }

/* Style */
.border-solid  { border-style: solid; }
.border-dashed { border-style: dashed; }
.border-dotted { border-style: dotted; }
.border-none   { border-style: none; }

/* Border colour — semantic */
.border-default      { border-color: var(--color-border); }
.border-strong       { border-color: var(--color-border-strong); }
.border-transparent  { border-color: transparent; }

/* Border colour — scale */
.border-primary-200  { border-color: var(--color-primary-200); }
.border-primary-300  { border-color: var(--color-primary-300); }
.border-primary-500  { border-color: var(--color-primary-500); }
.border-primary-600  { border-color: var(--color-primary-600); }
.border-neutral-200  { border-color: var(--color-neutral-200); }
.border-neutral-300  { border-color: var(--color-neutral-300); }
.border-neutral-400  { border-color: var(--color-neutral-400); }
.border-neutral-500  { border-color: var(--color-neutral-500); }
.border-neutral-700  { border-color: var(--color-neutral-700); }
.border-accent-200   { border-color: var(--color-accent-200); }
.border-success-200  { border-color: var(--color-success-200); }
.border-success-500  { border-color: var(--color-success-500); }
.border-warning-200  { border-color: var(--color-warning-200); }
.border-error-200    { border-color: var(--color-error-200); }
.border-error-500    { border-color: var(--color-error-500); }

/* Border radius */
.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-2xl  { border-radius: var(--radius-2xl); }
.rounded-full { border-radius: var(--radius-full); }

/* Directional radius */
.rounded-t-none { border-top-left-radius:    var(--radius-none); border-top-right-radius:    var(--radius-none); }
.rounded-t-sm   { border-top-left-radius:    var(--radius-sm);   border-top-right-radius:    var(--radius-sm); }
.rounded-t-md   { border-top-left-radius:    var(--radius-md);   border-top-right-radius:    var(--radius-md); }
.rounded-t-lg   { border-top-left-radius:    var(--radius-lg);   border-top-right-radius:    var(--radius-lg); }
.rounded-b-none { border-bottom-left-radius: var(--radius-none); border-bottom-right-radius: var(--radius-none); }
.rounded-b-sm   { border-bottom-left-radius: var(--radius-sm);   border-bottom-right-radius: var(--radius-sm); }
.rounded-b-md   { border-bottom-left-radius: var(--radius-md);   border-bottom-right-radius: var(--radius-md); }
.rounded-b-lg   { border-bottom-left-radius: var(--radius-lg);   border-bottom-right-radius: var(--radius-lg); }
.rounded-l-none { border-top-left-radius:    var(--radius-none); border-bottom-left-radius:  var(--radius-none); }
.rounded-l-sm   { border-top-left-radius:    var(--radius-sm);   border-bottom-left-radius:  var(--radius-sm); }
.rounded-l-md   { border-top-left-radius:    var(--radius-md);   border-bottom-left-radius:  var(--radius-md); }
.rounded-r-none { border-top-right-radius:   var(--radius-none); border-bottom-right-radius: var(--radius-none); }
.rounded-r-sm   { border-top-right-radius:   var(--radius-sm);   border-bottom-right-radius: var(--radius-sm); }
.rounded-r-md   { border-top-right-radius:   var(--radius-md);   border-bottom-right-radius: var(--radius-md); }

/* Box shadow */
.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); }
.shadow-2xl   { box-shadow: var(--shadow-2xl); }
.shadow-inner { box-shadow: var(--shadow-inner); }


/* ==========================================================================
   8. SIZING — WIDTH, HEIGHT, ASPECT RATIO
   ========================================================================== */

/* Width */
.w-0      { width: 0; }
.w-px     { width: 1px; }
.w-auto   { width: auto; }
.w-full   { width: 100%; }
.w-screen { width: 100vw; }
.w-fit    { width: fit-content; }
.w-min    { width: min-content; }
.w-max    { width: max-content; }

/* Fractional widths */
.w-1\/2  { width: 50%; }
.w-1\/3  { width: 33.333333%; }
.w-2\/3  { width: 66.666667%; }
.w-1\/4  { width: 25%; }
.w-3\/4  { width: 75%; }
.w-1\/5  { width: 20%; }
.w-2\/5  { width: 40%; }
.w-3\/5  { width: 60%; }
.w-4\/5  { width: 80%; }

/* Token-based widths */
.w-4  { width: var(--space-4); }
.w-5  { width: var(--space-5); }
.w-6  { width: var(--space-6); }
.w-8  { width: var(--space-8); }
.w-10 { width: var(--space-10); }
.w-12 { width: var(--space-12); }
.w-16 { width: var(--space-16); }

/* Max width */
.max-w-none      { max-width: none; }
.max-w-full      { max-width: 100%; }
.max-w-screen    { max-width: 100vw; }
.max-w-container { max-width: var(--container-max); }
.max-w-prose     { max-width: 72ch; }
.max-w-narrow    { max-width: 720px; }

/* Min width */
.min-w-0    { min-width: 0; }
.min-w-full { min-width: 100%; }
.min-w-max  { min-width: max-content; }

/* Height */
.h-0        { height: 0; }
.h-px       { height: 1px; }
.h-auto     { height: auto; }
.h-full     { height: 100%; }
.h-screen   { height: 100vh; }
.h-dvh      { height: 100dvh; }  /* dynamic viewport height — better on mobile */
.h-fit      { height: fit-content; }
.h-min      { height: min-content; }
.h-max      { height: max-content; }

/* Token-based heights — useful for avatars, icons, inputs */
.h-4  { height: var(--space-4); }
.h-5  { height: var(--space-5); }
.h-6  { height: var(--space-6); }
.h-8  { height: var(--space-8); }
.h-10 { height: var(--space-10); }
.h-12 { height: var(--space-12); }
.h-16 { height: var(--space-16); }

/* Max height */
.max-h-none   { max-height: none; }
.max-h-full   { max-height: 100%; }
.max-h-screen { max-height: 100vh; }

/* Min height */
.min-h-0      { min-height: 0; }
.min-h-full   { min-height: 100%; }
.min-h-screen { min-height: 100vh; }
.min-h-dvh    { min-height: 100dvh; }

/* Aspect ratio */
.aspect-auto  { aspect-ratio: auto; }
.aspect-square { aspect-ratio: 1 / 1; }
.aspect-video  { aspect-ratio: 16 / 9; }
.aspect-4-3    { aspect-ratio: 4 / 3; }
.aspect-3-2    { aspect-ratio: 3 / 2; }
.aspect-portrait { aspect-ratio: 3 / 4; }

/* Object fit (for <img> and <video> inside sized containers) */
.object-contain  { object-fit: contain; }
.object-cover    { object-fit: cover; }
.object-fill     { object-fit: fill; }
.object-none     { object-fit: none; }
.object-scale    { object-fit: scale-down; }

/* Object position */
.object-center { object-position: center; }
.object-top    { object-position: top; }
.object-bottom { object-position: bottom; }
.object-left   { object-position: left; }
.object-right  { object-position: right; }


/* ==========================================================================
   9. POSITION & Z-INDEX
   ========================================================================== */

.static   { position: static; }
.relative { position: relative; }
.absolute { position: absolute; }
.fixed    { position: fixed; }
.sticky   { position: sticky; }

/* Inset shortcuts */
.inset-0   { inset: 0; }
.inset-x-0 { left: 0; right: 0; }
.inset-y-0 { top: 0; bottom: 0; }
.inset-auto { inset: auto; }

/* Individual edges */
.top-0      { top: 0; }
.top-auto   { top: auto; }
.top-full   { top: 100%; }
.right-0    { right: 0; }
.right-auto { right: auto; }
.right-full { right: 100%; }
.bottom-0    { bottom: 0; }
.bottom-auto { bottom: auto; }
.bottom-full { bottom: 100%; }
.left-0     { left: 0; }
.left-auto  { left: auto; }
.left-full  { left: 100%; }

/* Token-spaced offsets */
.top-1  { top:  var(--space-1); }
.top-2  { top:  var(--space-2); }
.top-3  { top:  var(--space-3); }
.top-4  { top:  var(--space-4); }
.right-2 { right: var(--space-2); }
.right-4 { right: var(--space-4); }
.bottom-2 { bottom: var(--space-2); }
.bottom-4 { bottom: var(--space-4); }
.left-2  { left: var(--space-2); }
.left-4  { left: var(--space-4); }

/* Z-index — reference named scale tokens */
.z-auto    { z-index: auto; }
.z-below   { z-index: var(--z-below); }
.z-base    { z-index: var(--z-base); }
.z-raised  { z-index: var(--z-raised); }
.z-dropdown { z-index: var(--z-dropdown); }
.z-sticky  { z-index: var(--z-sticky); }
.z-overlay { z-index: var(--z-overlay); }
.z-modal   { z-index: var(--z-modal); }
.z-toast   { z-index: var(--z-toast); }
.z-tooltip { z-index: var(--z-tooltip); }

/* Isolate — creates a new stacking context without affecting z-index */
.isolate         { isolation: isolate; }
.isolation-auto  { isolation: auto; }


/* ==========================================================================
   10. OVERFLOW
   ========================================================================== */

.overflow-auto    { overflow: auto; }
.overflow-hidden  { overflow: hidden; }
.overflow-visible { overflow: visible; }
.overflow-scroll  { overflow: scroll; }
.overflow-clip    { overflow: clip; }

.overflow-x-auto    { overflow-x: auto; }
.overflow-x-hidden  { overflow-x: hidden; }
.overflow-x-visible { overflow-x: visible; }
.overflow-x-scroll  { overflow-x: scroll; }

.overflow-y-auto    { overflow-y: auto; }
.overflow-y-hidden  { overflow-y: hidden; }
.overflow-y-visible { overflow-y: visible; }
.overflow-y-scroll  { overflow-y: scroll; }

/* Scroll snap */
.snap-x           { scroll-snap-type: x mandatory; }
.snap-y           { scroll-snap-type: y mandatory; }
.snap-both        { scroll-snap-type: both mandatory; }
.snap-none        { scroll-snap-type: none; }
.snap-start       { scroll-snap-align: start; }
.snap-center      { scroll-snap-align: center; }
.snap-end         { scroll-snap-align: end; }

/* Scroll behaviour */
.scroll-smooth { scroll-behavior: smooth; }
.scroll-auto   { scroll-behavior: auto; }

/* Overscroll */
.overscroll-auto     { overscroll-behavior: auto; }
.overscroll-contain  { overscroll-behavior: contain; }
.overscroll-none     { overscroll-behavior: none; }


/* ==========================================================================
   11. VISIBILITY & ACCESSIBILITY
   ========================================================================== */

/* Visible / invisible — keeps layout space; only toggles paint visibility */
.visible   { visibility: visible; }
.invisible { visibility: hidden !important; }

/*
 * Screen-reader only — visually hidden but fully accessible to AT.
 * !important required: this class is used as an override against component styles.
 *
 * Used for: skip links before focus, icon-button labels, decorative heading context.
 */
.sr-only {
  position:    absolute !important;
  width:       1px !important;
  height:      1px !important;
  padding:     0 !important;
  margin:      -1px !important;
  overflow:    hidden !important;
  clip:        rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border:      0 !important;
}

/* Reverse .sr-only — restore an element that was hidden at a larger breakpoint */
.not-sr-only {
  position:    static !important;
  width:       auto !important;
  height:      auto !important;
  padding:     0 !important;
  margin:      0 !important;
  overflow:    visible !important;
  clip:        auto !important;
  white-space: normal !important;
}

/* Backface — prevents flicker on GPU-accelerated animations */
.backface-hidden { backface-visibility: hidden; }
.backface-visible { backface-visibility: visible; }

/* Performance hints */
.will-change-transform { will-change: transform; }
.will-change-opacity   { will-change: opacity; }
.will-change-auto      { will-change: auto; }

/* Container query context */
.container-inline { container-type: inline-size; }
.container-size   { container-type: size; }

/* Clearfix — for legacy float-based inner content */
.clearfix::after {
  content: "";
  display: table;
  clear:   both;
}


/* ==========================================================================
   12. INTERACTIVITY
   ========================================================================== */

/* Cursor */
.cursor-auto        { cursor: auto; }
.cursor-default     { cursor: default; }
.cursor-pointer     { cursor: pointer; }
.cursor-wait        { cursor: wait; }
.cursor-text        { cursor: text; }
.cursor-move        { cursor: move; }
.cursor-help        { cursor: help; }
.cursor-not-allowed { cursor: not-allowed; }
.cursor-grab        { cursor: grab; }
.cursor-grabbing    { cursor: grabbing; }
.cursor-crosshair   { cursor: crosshair; }
.cursor-zoom-in     { cursor: zoom-in; }
.cursor-zoom-out    { cursor: zoom-out; }

/* Pointer events */
.pointer-events-none { pointer-events: none; }
.pointer-events-auto { pointer-events: auto; }

/* User select */
.select-none { user-select: none; }
.select-text { user-select: text; }
.select-all  { user-select: all; }
.select-auto { user-select: auto; }

/* Resize */
.resize-none { resize: none; }
.resize      { resize: both; }
.resize-y    { resize: vertical; }
.resize-x    { resize: horizontal; }

/* Touch action */
.touch-auto         { touch-action: auto; }
.touch-none         { touch-action: none; }
.touch-pan-x        { touch-action: pan-x; }
.touch-pan-y        { touch-action: pan-y; }
.touch-manipulation { touch-action: manipulation; }

/* Float (legacy; prefer flex/grid) */
.float-left  { float: left; }
.float-right { float: right; }
.float-none  { float: none; }


/* ==========================================================================
   13. TRANSITIONS
   ========================================================================== */

/* Transition presets — reference base.css composed tokens */
.transition-none   { transition: none; }
.transition        { transition: var(--transition-base); }
.transition-fast   { transition: var(--transition-fast); }
.transition-slow   { transition: var(--transition-slow); }
.transition-colors { transition: var(--transition-colors); }
.transition-transform {
  transition: transform var(--duration-base) var(--ease-in-out);
}
.transition-opacity {
  transition: opacity var(--duration-base) var(--ease-in-out);
}
.transition-shadow {
  transition: box-shadow var(--duration-base) var(--ease-in-out);
}

/* Duration overrides — pair with .transition */
.duration-fast   { transition-duration: var(--duration-fast); }
.duration-base   { transition-duration: var(--duration-base); }
.duration-slow   { transition-duration: var(--duration-slow); }
.duration-slower { transition-duration: var(--duration-slower); }

/* Easing overrides */
.ease-in     { transition-timing-function: var(--ease-in); }
.ease-out    { transition-timing-function: var(--ease-out); }
.ease-in-out { transition-timing-function: var(--ease-in-out); }
.ease-linear { transition-timing-function: linear; }

/* Delay */
.delay-0    { transition-delay: 0ms; }
.delay-75   { transition-delay: 75ms; }
.delay-100  { transition-delay: 100ms; }
.delay-150  { transition-delay: 150ms; }
.delay-200  { transition-delay: 200ms; }
.delay-300  { transition-delay: 300ms; }
.delay-500  { transition-delay: 500ms; }

/* Transform utilities */
.transform-none  { transform: none; }
.translate-y-0   { transform: translateY(0); }
.translate-y-1   { transform: translateY(var(--space-1)); }
.translate-y-2   { transform: translateY(var(--space-2)); }
.-translate-y-1  { transform: translateY(calc(-1 * var(--space-1))); }
.-translate-y-2  { transform: translateY(calc(-1 * var(--space-2))); }
.-translate-y-full { transform: translateY(-100%); }
.translate-x-0   { transform: translateX(0); }
.-translate-x-full { transform: translateX(-100%); }
.translate-x-full  { transform: translateX(100%); }
.scale-95  { transform: scale(0.95); }
.scale-100 { transform: scale(1); }
.scale-105 { transform: scale(1.05); }
.scale-110 { transform: scale(1.10); }
.rotate-45  { transform: rotate(45deg); }
.rotate-90  { transform: rotate(90deg); }
.rotate-180 { transform: rotate(180deg); }
.-rotate-45 { transform: rotate(-45deg); }


/* ==========================================================================
   14. PRINT UTILITIES
   Utilities that modify output when the page is printed.
   !important required — print styles must override screen layout rules.
   ========================================================================== */

@media print {
  /* Hide decorative / interactive elements from printed output */
  .print\:hidden { display: none !important; }

  /* Force display on elements that might be hidden on screen */
  .print\:block        { display: block !important; }
  .print\:inline       { display: inline !important; }
  .print\:inline-block { display: inline-block !important; }

  /* Typography resets for print legibility */
  .print\:text-black { color: #000 !important; }
  .print\:bg-white   { background-color: #fff !important; }
  .print\:no-shadow  { box-shadow: none !important; }

  /* Expand links to show URLs */
  .print\:show-href::after {
    content: " (" attr(href) ")";
    font-size: 0.8em;
    color: #555;
  }

  /* Page break utilities */
  .page-break-before  { page-break-before: always; break-before: page; }
  .page-break-after   { page-break-after:  always; break-after:  page; }
  .page-break-inside  { page-break-inside: avoid; break-inside: avoid; }
  .page-break-none    { page-break-inside: auto; break-inside: auto; }

  /* Column spanning */
  .print\:full-width { width: 100% !important; column-span: all; }
}


/* ==========================================================================
   15. RESPONSIVE PREFIXES
   ==========================================================================
   Breakpoints (mobile-first, min-width):
     md:  768px  — tablet portrait
     lg:  1024px — tablet landscape / small desktop
     xl:  1280px — standard desktop

   Class names use escaped colons so they match the HTML literal colon:
     CSS:  .md\:hidden  { display: none !important; }
     HTML: <div class="md:hidden">

   Only the most-needed utilities are prefixed here. Low-level properties
   (individual colours, box-shadow values, etc.) rarely need responsive
   variants — add them inline with custom properties if required.
   ========================================================================== */

/* --------------------------------------------------------------------------
   md: — 768px and above
   -------------------------------------------------------------------------- */
@media (min-width: 768px) {

  /* Display */
  .md\:block        { display: block; }
  .md\:inline-block { display: inline-block; }
  .md\:inline       { display: inline; }
  .md\:flex         { display: flex; }
  .md\:inline-flex  { display: inline-flex; }
  .md\:grid         { display: grid; }
  .md\:hidden       { display: none !important; }

  /* Flex direction */
  .md\:flex-row { flex-direction: row; }
  .md\:flex-col { flex-direction: column; }

  /* Flex wrap */
  .md\:flex-wrap   { flex-wrap: wrap; }
  .md\:flex-nowrap { flex-wrap: nowrap; }

  /* Align / justify */
  .md\:items-start    { align-items: flex-start; }
  .md\:items-center   { align-items: center; }
  .md\:items-end      { align-items: flex-end; }
  .md\:items-stretch  { align-items: stretch; }
  .md\:justify-start   { justify-content: flex-start; }
  .md\:justify-center  { justify-content: center; }
  .md\:justify-end     { justify-content: flex-end; }
  .md\:justify-between { justify-content: space-between; }

  /* Grid columns */
  .md\:grid-cols-1  { grid-template-columns: repeat(1,  1fr); }
  .md\:grid-cols-2  { grid-template-columns: repeat(2,  1fr); }
  .md\:grid-cols-3  { grid-template-columns: repeat(3,  1fr); }
  .md\:grid-cols-4  { grid-template-columns: repeat(4,  1fr); }
  .md\:grid-cols-6  { grid-template-columns: repeat(6,  1fr); }
  .md\:grid-cols-12 { grid-template-columns: repeat(12, 1fr); }

  /* Column span */
  .md\:col-span-1  { grid-column: span 1; }
  .md\:col-span-2  { grid-column: span 2; }
  .md\:col-span-3  { grid-column: span 3; }
  .md\:col-span-4  { grid-column: span 4; }
  .md\:col-span-6  { grid-column: span 6; }
  .md\:col-span-full { grid-column: 1 / -1; }

  /* Gap */
  .md\:gap-0  { gap: var(--space-0); }
  .md\:gap-2  { gap: var(--space-2); }
  .md\:gap-3  { gap: var(--space-3); }
  .md\:gap-4  { gap: var(--space-4); }
  .md\:gap-6  { gap: var(--space-6); }
  .md\:gap-8  { gap: var(--space-8); }

  /* Spacing */
  .md\:m-0   { margin: var(--space-0); }
  .md\:m-2   { margin: var(--space-2); }
  .md\:m-4   { margin: var(--space-4); }
  .md\:mx-auto { margin-inline: auto; }
  .md\:my-0  { margin-block: var(--space-0); }
  .md\:mt-0  { margin-top: var(--space-0); }
  .md\:mt-2  { margin-top: var(--space-2); }
  .md\:mt-4  { margin-top: var(--space-4); }
  .md\:mt-6  { margin-top: var(--space-6); }
  .md\:mb-0  { margin-bottom: var(--space-0); }
  .md\:mb-2  { margin-bottom: var(--space-2); }
  .md\:mb-4  { margin-bottom: var(--space-4); }
  .md\:p-0   { padding: var(--space-0); }
  .md\:p-2   { padding: var(--space-2); }
  .md\:p-4   { padding: var(--space-4); }
  .md\:p-6   { padding: var(--space-6); }
  .md\:px-2  { padding-inline: var(--space-2); }
  .md\:px-4  { padding-inline: var(--space-4); }
  .md\:px-6  { padding-inline: var(--space-6); }
  .md\:py-2  { padding-block: var(--space-2); }
  .md\:py-4  { padding-block: var(--space-4); }
  .md\:py-6  { padding-block: var(--space-6); }

  /* Typography */
  .md\:text-left   { text-align: left; }
  .md\:text-center { text-align: center; }
  .md\:text-right  { text-align: right; }
  .md\:text-xs     { font-size: var(--text-xs); }
  .md\:text-sm     { font-size: var(--text-sm); }
  .md\:text-base   { font-size: var(--text-base); }
  .md\:text-md     { font-size: var(--text-md); }
  .md\:text-lg     { font-size: var(--text-lg); }
  .md\:text-xl     { font-size: var(--text-xl); }
  .md\:text-2xl    { font-size: var(--text-2xl); }
  .md\:text-3xl    { font-size: var(--text-3xl); }
  .md\:font-regular  { font-weight: var(--font-regular); }
  .md\:font-medium   { font-weight: var(--font-medium); }
  .md\:font-semibold { font-weight: var(--font-semibold); }
  .md\:font-bold     { font-weight: var(--font-bold); }

  /* Sizing */
  .md\:w-auto  { width: auto; }
  .md\:w-full  { width: 100%; }
  .md\:w-1\/2  { width: 50%; }
  .md\:w-1\/3  { width: 33.333333%; }
  .md\:w-2\/3  { width: 66.666667%; }
  .md\:w-1\/4  { width: 25%; }
  .md\:w-3\/4  { width: 75%; }
  .md\:h-auto  { height: auto; }
  .md\:h-full  { height: 100%; }
  .md\:h-screen { height: 100vh; }

  /* Position */
  .md\:static   { position: static; }
  .md\:relative { position: relative; }
  .md\:absolute { position: absolute; }
  .md\:sticky   { position: sticky; }

  /* Visibility */
  .md\:visible   { visibility: visible; }
  .md\:invisible { visibility: hidden !important; }
  .md\:sr-only   {
    position: absolute !important; width: 1px !important; height: 1px !important;
    padding: 0 !important; margin: -1px !important; overflow: hidden !important;
    clip: rect(0,0,0,0) !important; white-space: nowrap !important; border: 0 !important;
  }
  .md\:not-sr-only {
    position: static !important; width: auto !important; height: auto !important;
    padding: 0 !important; margin: 0 !important; overflow: visible !important;
    clip: auto !important; white-space: normal !important;
  }

  /* Order */
  .md\:order-first { order: -9999; }
  .md\:order-last  { order:  9999; }
  .md\:order-none  { order: 0; }
}


/* --------------------------------------------------------------------------
   lg: — 1024px and above
   -------------------------------------------------------------------------- */
@media (min-width: 1024px) {

  /* Display */
  .lg\:block        { display: block; }
  .lg\:inline-block { display: inline-block; }
  .lg\:inline       { display: inline; }
  .lg\:flex         { display: flex; }
  .lg\:inline-flex  { display: inline-flex; }
  .lg\:grid         { display: grid; }
  .lg\:hidden       { display: none !important; }

  /* Flex */
  .lg\:flex-row    { flex-direction: row; }
  .lg\:flex-col    { flex-direction: column; }
  .lg\:flex-wrap   { flex-wrap: wrap; }
  .lg\:flex-nowrap { flex-wrap: nowrap; }
  .lg\:items-start   { align-items: flex-start; }
  .lg\:items-center  { align-items: center; }
  .lg\:items-end     { align-items: flex-end; }
  .lg\:justify-start   { justify-content: flex-start; }
  .lg\:justify-center  { justify-content: center; }
  .lg\:justify-end     { justify-content: flex-end; }
  .lg\:justify-between { justify-content: space-between; }

  /* Grid */
  .lg\:grid-cols-1  { grid-template-columns: repeat(1,  1fr); }
  .lg\:grid-cols-2  { grid-template-columns: repeat(2,  1fr); }
  .lg\:grid-cols-3  { grid-template-columns: repeat(3,  1fr); }
  .lg\:grid-cols-4  { grid-template-columns: repeat(4,  1fr); }
  .lg\:grid-cols-6  { grid-template-columns: repeat(6,  1fr); }
  .lg\:grid-cols-12 { grid-template-columns: repeat(12, 1fr); }
  .lg\:col-span-1   { grid-column: span 1; }
  .lg\:col-span-2   { grid-column: span 2; }
  .lg\:col-span-3   { grid-column: span 3; }
  .lg\:col-span-4   { grid-column: span 4; }
  .lg\:col-span-6   { grid-column: span 6; }
  .lg\:col-span-8   { grid-column: span 8; }
  .lg\:col-span-full { grid-column: 1 / -1; }

  /* Gap */
  .lg\:gap-2 { gap: var(--space-2); }
  .lg\:gap-4 { gap: var(--space-4); }
  .lg\:gap-6 { gap: var(--space-6); }
  .lg\:gap-8 { gap: var(--space-8); }

  /* Spacing */
  .lg\:m-0    { margin: var(--space-0); }
  .lg\:m-4    { margin: var(--space-4); }
  .lg\:mx-auto { margin-inline: auto; }
  .lg\:mt-0   { margin-top: var(--space-0); }
  .lg\:mt-4   { margin-top: var(--space-4); }
  .lg\:mt-6   { margin-top: var(--space-6); }
  .lg\:mb-0   { margin-bottom: var(--space-0); }
  .lg\:mb-4   { margin-bottom: var(--space-4); }
  .lg\:p-4    { padding: var(--space-4); }
  .lg\:p-6    { padding: var(--space-6); }
  .lg\:p-8    { padding: var(--space-8); }
  .lg\:px-4   { padding-inline: var(--space-4); }
  .lg\:px-6   { padding-inline: var(--space-6); }
  .lg\:px-8   { padding-inline: var(--space-8); }
  .lg\:py-4   { padding-block: var(--space-4); }
  .lg\:py-6   { padding-block: var(--space-6); }
  .lg\:py-8   { padding-block: var(--space-8); }

  /* Typography */
  .lg\:text-left   { text-align: left; }
  .lg\:text-center { text-align: center; }
  .lg\:text-right  { text-align: right; }
  .lg\:text-sm   { font-size: var(--text-sm); }
  .lg\:text-base { font-size: var(--text-base); }
  .lg\:text-md   { font-size: var(--text-md); }
  .lg\:text-lg   { font-size: var(--text-lg); }
  .lg\:text-xl   { font-size: var(--text-xl); }
  .lg\:text-2xl  { font-size: var(--text-2xl); }
  .lg\:text-3xl  { font-size: var(--text-3xl); }

  /* Sizing */
  .lg\:w-auto  { width: auto; }
  .lg\:w-full  { width: 100%; }
  .lg\:w-1\/2  { width: 50%; }
  .lg\:w-1\/3  { width: 33.333333%; }
  .lg\:w-2\/3  { width: 66.666667%; }
  .lg\:w-1\/4  { width: 25%; }
  .lg\:w-3\/4  { width: 75%; }

  /* Position */
  .lg\:static   { position: static; }
  .lg\:relative { position: relative; }
  .lg\:sticky   { position: sticky; }

  /* Visibility */
  .lg\:visible   { visibility: visible; }
  .lg\:invisible { visibility: hidden !important; }
}


/* --------------------------------------------------------------------------
   xl: — 1280px and above
   -------------------------------------------------------------------------- */
@media (min-width: 1280px) {

  /* Display */
  .xl\:block       { display: block; }
  .xl\:inline-flex { display: inline-flex; }
  .xl\:flex        { display: flex; }
  .xl\:grid        { display: grid; }
  .xl\:hidden      { display: none !important; }

  /* Grid */
  .xl\:grid-cols-2  { grid-template-columns: repeat(2,  1fr); }
  .xl\:grid-cols-3  { grid-template-columns: repeat(3,  1fr); }
  .xl\:grid-cols-4  { grid-template-columns: repeat(4,  1fr); }
  .xl\:grid-cols-6  { grid-template-columns: repeat(6,  1fr); }
  .xl\:grid-cols-12 { grid-template-columns: repeat(12, 1fr); }
  .xl\:col-span-3   { grid-column: span 3; }
  .xl\:col-span-4   { grid-column: span 4; }
  .xl\:col-span-6   { grid-column: span 6; }

  /* Gap */
  .xl\:gap-4 { gap: var(--space-4); }
  .xl\:gap-6 { gap: var(--space-6); }
  .xl\:gap-8 { gap: var(--space-8); }

  /* Spacing */
  .xl\:p-8  { padding: var(--space-8); }
  .xl\:px-8 { padding-inline: var(--space-8); }
  .xl\:py-8 { padding-block: var(--space-8); }
  .xl\:mt-0 { margin-top: var(--space-0); }
  .xl\:mt-4 { margin-top: var(--space-4); }
  .xl\:mx-auto { margin-inline: auto; }

  /* Typography */
  .xl\:text-md  { font-size: var(--text-md); }
  .xl\:text-lg  { font-size: var(--text-lg); }
  .xl\:text-xl  { font-size: var(--text-xl); }
  .xl\:text-2xl { font-size: var(--text-2xl); }
  .xl\:text-3xl { font-size: var(--text-3xl); }

  /* Sizing */
  .xl\:w-full { width: 100%; }
  .xl\:w-1\/2 { width: 50%; }
  .xl\:w-1\/3 { width: 33.333333%; }
  .xl\:w-1\/4 { width: 25%; }
}


/* ==========================================================================
   16. DARK MODE
   ==========================================================================
   Strategy: override the semantic token aliases on :root under
   prefers-color-scheme: dark so every semantic utility (.bg-surface,
   .text-muted, etc.) adapts automatically — no extra class needed.

   Explicit .dark\: utilities below handle cases where a developer needs to
   force a specific raw value that differs from the semantic alias.
   ========================================================================== */

@media (prefers-color-scheme: dark) {

  /* Semantic token overrides — all semantic utilities auto-adapt */
  :root {
    --color-bg:            var(--color-neutral-900);
    --color-bg-subtle:     var(--color-neutral-800);
    --color-surface:       var(--color-neutral-800);
    --color-border:        var(--color-neutral-700);
    --color-border-strong: var(--color-neutral-600);
    --color-text:          var(--color-neutral-100);
    --color-text-muted:    var(--color-neutral-400);
    --color-text-subtle:   var(--color-neutral-500);
    --color-text-inverse:  var(--color-neutral-900);

    /* Lighten interactive link colour for dark-bg contrast */
    --color-link:          var(--color-secondary-400);
    --color-link-hover:    var(--color-secondary-300);
    --color-focus-ring:    var(--color-secondary-400);
  }

  /* --- Explicit dark: utilities for raw (non-semantic) overrides --- */

  /* Visibility */
  .dark\:hidden  { display: none !important; }
  .dark\:block   { display: block; }
  .dark\:flex    { display: flex; }
  .dark\:inline  { display: inline; }

  /* Text */
  .dark\:text-white      { color: var(--color-neutral-0); }
  .dark\:text-neutral-100 { color: var(--color-neutral-100); }
  .dark\:text-neutral-200 { color: var(--color-neutral-200); }
  .dark\:text-neutral-300 { color: var(--color-neutral-300); }
  .dark\:text-neutral-400 { color: var(--color-neutral-400); }
  .dark\:text-primary-300 { color: var(--color-primary-300); }
  .dark\:text-primary-400 { color: var(--color-primary-400); }
  .dark\:text-accent-300  { color: var(--color-accent-300); }
  .dark\:text-accent-400  { color: var(--color-accent-400); }

  /* Background */
  .dark\:bg-neutral-700 { background-color: var(--color-neutral-700); }
  .dark\:bg-neutral-800 { background-color: var(--color-neutral-800); }
  .dark\:bg-neutral-900 { background-color: var(--color-neutral-900); }
  .dark\:bg-transparent { background-color: transparent; }
  .dark\:bg-primary-900 { background-color: var(--color-primary-900); }
  .dark\:bg-primary-800 { background-color: var(--color-primary-800); }

  /* Border */
  .dark\:border-neutral-600 { border-color: var(--color-neutral-600); }
  .dark\:border-neutral-700 { border-color: var(--color-neutral-700); }
  .dark\:border-primary-700 { border-color: var(--color-primary-700); }

  /* Shadow — darken further on dark surfaces */
  .dark\:shadow-none { box-shadow: none; }
  .dark\:shadow-md   { box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.40), 0 2px 4px -2px rgb(0 0 0 / 0.30); }

  /* Opacity adjustments */
  .dark\:opacity-75 { opacity: 0.75; }
  .dark\:opacity-90 { opacity: 0.90; }
}


/* ==========================================================================
   17. ANIMATION KEYFRAMES & UTILITIES
   ==========================================================================
   All animation utilities respect prefers-reduced-motion globally via the
   rule in base.css (animation-duration: 0.01ms !important), so no extra
   guard is needed here.

   CSS custom property hooks allow per-element override without extra classes:
     <div class="animate-fade-in" style="--anim-duration: 400ms">

   Keyframe naming: plain descriptive names — no vendor prefix needed.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Keyframe definitions
   -------------------------------------------------------------------------- */

@keyframes fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes fade-out {
  from { opacity: 1; }
  to   { opacity: 0; }
}

@keyframes slide-up {
  from { opacity: 0; transform: translateY(var(--anim-distance, var(--space-4))); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes slide-down {
  from { opacity: 0; transform: translateY(calc(-1 * var(--anim-distance, var(--space-4)))); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes slide-left {
  from { opacity: 0; transform: translateX(var(--anim-distance, var(--space-4))); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes slide-right {
  from { opacity: 0; transform: translateX(calc(-1 * var(--anim-distance, var(--space-4)))); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.5; }
}

@keyframes bounce {
  0%, 100% {
    transform: translateY(0);
    animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
  }
  50% {
    transform: translateY(-25%);
    animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
  }
}

/*
 * Ping — expanding translucent ring; used for notification dot indicators.
 * The element itself should be opacity:0 so only the ring is visible.
 */
@keyframes ping {
  75%, 100% {
    transform: scale(2);
    opacity:   0;
  }
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20%       { transform: translateX(-4px); }
  40%       { transform: translateX(4px); }
  60%       { transform: translateX(-4px); }
  80%       { transform: translateX(4px); }
}

@keyframes flash {
  0%, 50%, 100% { opacity: 1; }
  25%, 75%      { opacity: 0; }
}


/* --------------------------------------------------------------------------
   Animation utility classes
   Each utility exposes CSS custom property hooks for per-element control:
     --anim-duration  default duration
     --anim-delay     default 0s
     --anim-easing    default ease-out (entering animations)
     --anim-fill      default both (element holds end state)
     --anim-count     default 1
   -------------------------------------------------------------------------- */

.animate-none {
  animation: none !important;
}

.animate-fade-in {
  animation:
    fade-in
    var(--anim-duration, var(--duration-slow))
    var(--anim-easing,   var(--ease-out))
    var(--anim-delay,    0s)
    var(--anim-count,    1)
    var(--anim-fill,     both);
}

.animate-fade-out {
  animation:
    fade-out
    var(--anim-duration, var(--duration-base))
    var(--anim-easing,   var(--ease-in))
    var(--anim-delay,    0s)
    var(--anim-count,    1)
    var(--anim-fill,     both);
}

.animate-slide-up {
  animation:
    slide-up
    var(--anim-duration, var(--duration-slow))
    var(--anim-easing,   var(--ease-out))
    var(--anim-delay,    0s)
    var(--anim-count,    1)
    var(--anim-fill,     both);
}

.animate-slide-down {
  animation:
    slide-down
    var(--anim-duration, var(--duration-slow))
    var(--anim-easing,   var(--ease-out))
    var(--anim-delay,    0s)
    var(--anim-count,    1)
    var(--anim-fill,     both);
}

.animate-slide-left {
  animation:
    slide-left
    var(--anim-duration, var(--duration-slow))
    var(--anim-easing,   var(--ease-out))
    var(--anim-delay,    0s)
    var(--anim-count,    1)
    var(--anim-fill,     both);
}

.animate-slide-right {
  animation:
    slide-right
    var(--anim-duration, var(--duration-slow))
    var(--anim-easing,   var(--ease-out))
    var(--anim-delay,    0s)
    var(--anim-count,    1)
    var(--anim-fill,     both);
}

.animate-spin {
  animation:
    spin
    var(--anim-duration, 1s)
    var(--anim-easing,   linear)
    var(--anim-delay,    0s)
    var(--anim-count,    infinite);
}

.animate-pulse {
  animation:
    pulse
    var(--anim-duration, 2s)
    var(--anim-easing,   var(--ease-in-out))
    var(--anim-delay,    0s)
    var(--anim-count,    infinite);
}

.animate-bounce {
  animation:
    bounce
    var(--anim-duration, 1s)
    var(--anim-easing,   linear)
    var(--anim-delay,    0s)
    var(--anim-count,    infinite);
}

.animate-ping {
  animation:
    ping
    var(--anim-duration, 1s)
    var(--anim-easing,   var(--ease-in-out))
    var(--anim-delay,    0s)
    var(--anim-count,    infinite);
}

.animate-shake {
  animation:
    shake
    var(--anim-duration, var(--duration-slow))
    var(--anim-easing,   var(--ease-in-out))
    var(--anim-delay,    0s)
    var(--anim-count,    1)
    var(--anim-fill,     both);
}

.animate-flash {
  animation:
    flash
    var(--anim-duration, 1s)
    var(--anim-easing,   var(--ease-in-out))
    var(--anim-delay,    0s)
    var(--anim-count,    infinite);
}

/* --- Animation modifier utilities --- */

/* Duration overrides — pair with any .animate-* class */
.anim-fast   { --anim-duration: var(--duration-fast); }
.anim-base   { --anim-duration: var(--duration-base); }
.anim-slow   { --anim-duration: var(--duration-slow); }
.anim-slower { --anim-duration: var(--duration-slower); }

/* Delay overrides */
.anim-delay-75  { --anim-delay: 75ms; }
.anim-delay-100 { --anim-delay: 100ms; }
.anim-delay-150 { --anim-delay: 150ms; }
.anim-delay-200 { --anim-delay: 200ms; }
.anim-delay-300 { --anim-delay: 300ms; }
.anim-delay-500 { --anim-delay: 500ms; }

/* Easing overrides */
.anim-ease-in     { --anim-easing: var(--ease-in); }
.anim-ease-out    { --anim-easing: var(--ease-out); }
.anim-ease-in-out { --anim-easing: var(--ease-in-out); }
.anim-linear      { --anim-easing: linear; }

/* Iteration overrides */
.anim-once     { --anim-count: 1; }
.anim-twice    { --anim-count: 2; }
.anim-infinite { --anim-count: infinite; }

/* Fill mode overrides */
.anim-fill-none    { --anim-fill: none; }
.anim-fill-forward { --anim-fill: forwards; }
.anim-fill-both    { --anim-fill: both; }

/* Distance override for slide animations */
.anim-distance-sm { --anim-distance: var(--space-2); }
.anim-distance-md { --anim-distance: var(--space-4); }
.anim-distance-lg { --anim-distance: var(--space-8); }

/* Pause / play */
.anim-paused  { animation-play-state: paused; }
.anim-running { animation-play-state: running; }