/**
 * CUBE.css — Mini CSS Framework
 * Based on CUBE CSS methodology (cube.fyi)
 * + Every Layout composition primitives
 * + Fluid typography & spacing
 *
 * Layers: CSS → Composition → Utility → Block (+ nested Exceptions) → Grouping
 * No build tools. No preprocessors. Pure CSS.
 * CSS Nesting used in Block layer only (Chrome 120+, Firefox 117+, Safari 17.2+)
 *
 * Author: ADiSoft d.o.o.
 * Version: 0.4.0
 *
 * TABLE OF CONTENTS
 * ─────────────────
 * 1. CSS LAYER         — Reset, custom properties, base styles
 * 2. COMPOSITION LAYER — Layout primitives (Every Layout)
 * 3. UTILITY LAYER     — Single-purpose atomic classes
 * 4. BLOCK LAYER       — Components with nested exceptions
 * 5. GROUPING LAYER    — Contextual theming (dark, brand, muted)
 * 6. ACCESSIBILITY     — Reduced motion, color scheme, contrast
 * 7. PRINT STYLES      — Print-specific overrides
 *
 * CSS @layer order (low → high specificity):
 * reset < composition < utility < block < grouping
 * Accessibility & print are unlayered so they always win.
 * Project-specific CSS should remain unlayered for easy overrides.
 */

@layer reset, composition, utility, block, grouping;


/* ═══════════════════════════════════════════════════════
   1. CSS LAYER — Reset, custom properties, base styles
   ═══════════════════════════════════════════════════════ */

@layer reset {

/* --- Modern Reset --- */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  -moz-text-size-adjust: none;
  -webkit-text-size-adjust: none;
  overflow-x: clip;
  scroll-behavior: smooth;
  text-size-adjust: none;
}

body {
  -webkit-font-smoothing: antialiased;
  line-height: 1.6;
  min-block-size: 100vh;
  overflow-x: clip;
}

img, picture, video, canvas, svg {
  block-size: auto;
  display: block;
  max-inline-size: 100%;
}

input, button, textarea, select {
  color: inherit;
  font: inherit;
}

h1, h2, h3, h4, h5, h6 {
  line-height: 1.15;
  overflow-wrap: break-word;
  text-wrap: balance;
}

p, li, figcaption {
  max-inline-size: 65ch;
  overflow-wrap: break-word;
  text-wrap: pretty;
}

a {
  color: currentColor;
  text-underline-offset: 0.15em;
}

ul[role='list'],
ol[role='list'] {
  list-style: none;
}

:target {
  scroll-margin-block-start: 5rem;
}

dialog {
  background: transparent;
  border: none;
  max-block-size: unset;
  max-inline-size: unset;
  padding: 0;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
  inline-size: 100%;
}


/* --- Custom Properties --- */
:root {
  color-scheme: light dark;

  /* ── Color Palette ── */
  --color-accent:          #f59e0b;
  --color-accent-light:    #fef3c7;
  --color-danger:          #dc2626;
  --color-danger-alt:      #b91c1c;
  --color-danger-light:    #fee2e2;
  --color-dark:            #1c1b18;
  --color-dark-2:          #3d3b37;
  --color-light:           #fafaf9;
  --color-light-2:         #f0efed;
  --color-light-3:         #e5e3e0;
  --color-mid:             #94928d;
  --color-primary:         #2563eb;
  --color-primary-alt:     #1d4ed8;
  --color-primary-light:   #dbeafe;
  --color-secondary:       #059669;
  --color-secondary-light: #d1fae5;

  /* ── Surfaces ── */
  --surface-base:    var(--color-light);
  --surface-overlay: var(--color-dark);
  --surface-raised:  #fff;

  /* ── Text ── */
  --text-base:    var(--color-dark);
  --text-inverse: var(--color-light);
  --text-muted:   var(--color-mid);

  /* ── Fluid Spacing Scale (clamp) ──
     Based on utopia.fyi — viewport 320px → 1240px */
  --space-3xs: clamp(0.25rem,  0.22rem + 0.15vw, 0.3125rem);
  --space-2xs: clamp(0.5rem,   0.45rem + 0.22vw, 0.625rem);
  --space-xs:  clamp(0.75rem,  0.67rem + 0.37vw, 0.9375rem);
  --space-s:   clamp(1rem,     0.89rem + 0.54vw, 1.25rem);
  --space-m:   clamp(1.5rem,   1.34rem + 0.76vw, 1.875rem);
  --space-l:   clamp(2rem,     1.78rem + 1.09vw, 2.5rem);
  --space-xl:  clamp(3rem,     2.67rem + 1.63vw, 3.75rem);
  --space-2xl: clamp(4rem,     3.56rem + 2.17vw, 5rem);
  --space-3xl: clamp(6rem,     5.35rem + 3.26vw, 7.5rem);

  /* ── Fluid Type Scale ── */
  --step--2: clamp(0.72rem,  0.68rem + 0.18vw, 0.8rem);
  --step--1: clamp(0.83rem,  0.78rem + 0.29vw, 1rem);
  --step-0:  clamp(1rem,     0.91rem + 0.43vw, 1.25rem);
  --step-1:  clamp(1.2rem,   1.07rem + 0.63vw, 1.563rem);
  --step-2:  clamp(1.44rem,  1.26rem + 0.89vw, 1.953rem);
  --step-3:  clamp(1.728rem, 1.48rem + 1.22vw, 2.441rem);
  --step-4:  clamp(2.074rem, 1.74rem + 1.67vw, 3.052rem);
  --step-5:  clamp(2.488rem, 2.03rem + 2.28vw, 3.815rem);

  /* ── Font Families ── */
  --font-base:    system-ui, -apple-system, sans-serif;
  --font-heading: var(--font-base);
  --font-mono:    ui-monospace, 'Cascadia Code', 'Fira Code', monospace;

  /* ── Measures ── */
  --measure-base:   65ch;
  --measure-narrow: 45ch;
  --measure-wide:   80ch;

  /* ── Breakpoints (for reference in project CSS / media queries) ── */
  --bp-sm: 36rem;
  --bp-md: 48rem;
  --bp-lg: 64rem;
  --bp-xl: 80rem;

  /* ── Borders & Radii ── */
  --border-mid:  2px solid var(--color-light-2);
  --border-thin: 1px solid var(--color-light-2);
  --radius-full: 9999px;
  --radius-l:    1rem;
  --radius-m:    0.5rem;
  --radius-s:    0.25rem;

  /* ── Shadows ── */
  --shadow-l: 0 8px 30px hsl(0 0% 0% / 0.12);
  --shadow-m: 0 4px 12px hsl(0 0% 0% / 0.08);
  --shadow-s: 0 1px 2px  hsl(0 0% 0% / 0.06);

  /* ── Transitions ── */
  --transition-base: 250ms ease;
  --transition-fast: 150ms ease;
  --transition-slow: 400ms ease;

  /* ── Z-index ── */
  --layer-base:    1;
  --layer-nav:     100;
  --layer-overlay: 1000;
  --layer-raised:  10;

  /* ── Focus & Accent ── */
  --focus-offset: 3px;
  --focus-ring:   3px solid var(--color-primary);
  accent-color:   var(--color-primary);

  /* ── Dark Mode Source Tokens (single source of truth) ── */
  --dark-border-mid:          2px solid hsl(0 0% 100% / 0.1);
  --dark-border-thin:         1px solid hsl(0 0% 100% / 0.1);
  --dark-color-light-2:       hsl(0 0% 100% / 0.08);
  --dark-color-light-3:       hsl(0 0% 100% / 0.15);
  --dark-color-primary-light: hsl(217 91% 20% / 0.4);
  --dark-shadow-l:            0 8px 30px hsl(0 0% 0% / 0.4);
  --dark-shadow-m:            0 4px 12px hsl(0 0% 0% / 0.3);
  --dark-shadow-s:            0 1px 2px  hsl(0 0% 0% / 0.2);
  --dark-surface-base:        var(--color-dark);
  --dark-surface-raised:      var(--color-dark-2);
  --dark-text-base:           var(--color-light);
  --dark-text-muted:          var(--color-mid);
}

/* Global body styles */
body {
  background-color: var(--surface-base);
  color: var(--text-base);
  font-family: var(--font-base);
  font-size: var(--step-0);
}

/* Headings */
h1 { font-size: var(--step-5); }
h2 { font-size: var(--step-4); }
h3 { font-size: var(--step-3); }
h4 { font-size: var(--step-2); }
h5 { font-size: var(--step-1); }
h6 { font-size: var(--step-0); }

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: 700;
}

/* Global focus-visible */
:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
}

:focus:not(:focus-visible) {
  outline: none;
}


} /* end @layer reset */


/* ═══════════════════════════════════════════════════════
   2. COMPOSITION LAYER — Layout primitives (Every Layout)
   ═══════════════════════════════════════════════════════ */

@layer composition {

/**
 * Stack: Vertical rhythm via lobotomized owl
 * Modifier: --stack-space
 */
.stack {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.stack > * + * {
  margin-block-start: var(--stack-space, var(--space-s));
}

.stack-recursive * + * {
  margin-block-start: var(--stack-space, var(--space-s));
}

/**
 * Cluster: Flexible horizontal grouping with wrapping
 * Modifiers: --cluster-align, --cluster-gap, --cluster-justify
 */
.cluster {
  align-items: var(--cluster-align, center);
  display: flex;
  flex-wrap: wrap;
  gap: var(--cluster-gap, var(--space-s));
  justify-content: var(--cluster-justify, flex-start);
}

/**
 * Center: Horizontally centered column
 * Modifier: --center-measure
 */
.center {
  margin-inline: auto;
  max-inline-size: var(--center-measure, var(--measure-base));
  padding-inline: var(--space-s);
}

.center[data-intrinsic] {
  align-items: center;
  display: flex;
  flex-direction: column;
}

/**
 * Sidebar: Two-panel layout, one fixed-ish, one fluid
 * Modifiers: --sidebar-gap, --sidebar-threshold, --sidebar-width
 */
.with-sidebar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sidebar-gap, var(--space-l));
}

.with-sidebar > :first-child {
  flex-basis: var(--sidebar-width, 18rem);
  flex-grow: 1;
}

.with-sidebar > :last-child {
  flex-basis: 0;
  flex-grow: 999;
  min-inline-size: var(--sidebar-threshold, 55%);
}

/**
 * Switcher: Horizontal until too narrow, then vertical
 * Modifiers: --switcher-gap, --switcher-threshold
 */
.switcher {
  display: flex;
  flex-wrap: wrap;
  gap: var(--switcher-gap, var(--space-s));
}

.switcher > * {
  flex-basis: calc((var(--switcher-threshold, 30rem) - 100%) * 999);
  flex-grow: 1;
}

/**
 * Grid: Auto-fill responsive grid
 * Modifiers: --grid-gap, --grid-min
 */
.grid {
  display: grid;
  gap: var(--grid-gap, var(--space-s));
  grid-template-columns: repeat(
    auto-fill,
    minmax(min(100%, var(--grid-min, 16rem)), 1fr)
  );
}

/**
 * Cover: Vertically centered content with header/footer
 * Modifier: --cover-min-height
 */
.cover {
  display: flex;
  flex-direction: column;
  min-block-size: var(--cover-min-height, 100vh);
  padding: var(--space-s);
}

.cover > [data-cover-center] {
  margin-block: auto;
}

.cover > :first-child:not([data-cover-center]) {
  margin-block-start: 0;
}

.cover > :last-child:not([data-cover-center]) {
  margin-block-end: 0;
}

/**
 * Frame: Aspect-ratio container for media
 * Modifier: --frame-ratio
 */
.frame {
  aspect-ratio: var(--frame-ratio, 16 / 9);
  overflow: hidden;
  position: relative;
}

.frame > img,
.frame > video {
  block-size: 100%;
  inline-size: 100%;
  object-fit: cover;
}

/**
 * Region: Consistent vertical section padding
 * Modifier: --region-space
 */
.region {
  padding-block: var(--region-space, var(--space-xl));
}

/**
 * Wrapper: Max-width page container
 * Modifier: --wrapper-max
 */
.wrapper {
  margin-inline: auto;
  max-inline-size: var(--wrapper-max, 75rem);
  padding-inline: var(--space-s);
}

/**
 * Repel: Push two items to opposite ends
 * Modifier: --repel-gap
 */
.repel {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: var(--repel-gap, var(--space-s));
  justify-content: space-between;
}

/**
 * Imposter: Absolutely positioned overlay element
 * Exception: data-position
 */
.imposter {
  inset-block-start: 50%;
  inset-inline-start: 50%;
  position: absolute;
  transform: translate(-50%, -50%);
}

.imposter[data-position="top-start"] {
  inset-block-start: var(--space-2xs);
  inset-inline-start: var(--space-2xs);
  transform: none;
}

.imposter[data-position="top-end"] {
  inset-block-start: var(--space-2xs);
  inset-inline-end: var(--space-2xs);
  inset-inline-start: auto;
  transform: none;
}

.imposter[data-position="bottom-start"] {
  inset-block-end: var(--space-2xs);
  inset-block-start: auto;
  inset-inline-start: var(--space-2xs);
  transform: none;
}

.imposter[data-position="bottom-end"] {
  inset-block-end: var(--space-2xs);
  inset-block-start: auto;
  inset-inline-end: var(--space-2xs);
  inset-inline-start: auto;
  transform: none;
}


} /* end @layer composition */


/* ═══════════════════════════════════════════════════════
   3. UTILITY LAYER — Single-purpose atomic classes
   ═══════════════════════════════════════════════════════ */

@layer utility {

/* --- Flow — vertical rhythm for any content --- */
.flow > * + * {
  margin-block-start: var(--flow-space, 1em);
}

.flow :is(h2, h3, h4) { --flow-space: 1.5em; }
.flow :is(h2, h3, h4) + * { --flow-space: 0.5em; }

.flow :is(figure, blockquote, pre, .table-wrap, details) { --flow-space: 1.5em; }
.flow :is(figure, blockquote, pre, .table-wrap, details) + * { --flow-space: 1.5em; }

/* --- Spacing --- */
.gap-3xs { gap: var(--space-3xs); }
.gap-2xs { gap: var(--space-2xs); }
.gap-xs  { gap: var(--space-xs);  }
.gap-s   { gap: var(--space-s);   }
.gap-m   { gap: var(--space-m);   }
.gap-l   { gap: var(--space-l);   }
.gap-xl  { gap: var(--space-xl);  }
.gap-2xl { gap: var(--space-2xl); }

.pad-3xs { padding: var(--space-3xs); }
.pad-2xs { padding: var(--space-2xs); }
.pad-xs  { padding: var(--space-xs);  }
.pad-s   { padding: var(--space-s);   }
.pad-m   { padding: var(--space-m);   }
.pad-l   { padding: var(--space-l);   }
.pad-xl  { padding: var(--space-xl);  }
.pad-2xl { padding: var(--space-2xl); }

/* --- Typography --- */
.text-xs   { font-size: var(--step--2); }
.text-s    { font-size: var(--step--1); }
.text-base { font-size: var(--step-0);  }
.text-m    { font-size: var(--step-1);  }
.text-l    { font-size: var(--step-2);  }
.text-xl   { font-size: var(--step-3);  }
.text-2xl  { font-size: var(--step-4);  }
.text-3xl  { font-size: var(--step-5);  }

.font-heading { font-family: var(--font-heading); }
.font-mono    { font-family: var(--font-mono);    }

.weight-black   { font-weight: 900; }
.weight-bold    { font-weight: 700; }
.weight-medium  { font-weight: 500; }
.weight-regular { font-weight: 400; }

.leading-loose  { line-height: 1.8;  }
.leading-normal { line-height: 1.6;  }
.leading-snug   { line-height: 1.35; }
.leading-tight  { line-height: 1.15; }

.measure-base   { max-inline-size: var(--measure-base);   }
.measure-narrow { max-inline-size: var(--measure-narrow); }
.measure-wide   { max-inline-size: var(--measure-wide);   }

.text-center { text-align: center; }
.text-end    { text-align: end;    }
.text-start  { text-align: start;  }

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

.uppercase {
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

/* --- Color --- */
.color-accent    { color: var(--color-accent);    }
.color-danger    { color: var(--color-danger);    }
.color-inverse   { color: var(--text-inverse);    }
.color-muted     { color: var(--text-muted);      }
.color-primary   { color: var(--color-primary);   }
.color-secondary { color: var(--color-secondary); }

.bg-base    { background-color: var(--surface-base);    }
.bg-overlay { background-color: var(--surface-overlay); }
.bg-primary { background-color: var(--color-primary);   }
.bg-raised  { background-color: var(--surface-raised);  }

/* --- Visibility --- */
.hidden { display: none; }

.visually-hidden {
  block-size: 1px;
  border: 0;
  clip: rect(0, 0, 0, 0);
  inline-size: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  white-space: nowrap;
}

@media (max-width: 47.999rem) {
  [data-hide="below-md"] { display: none !important; }
  [data-show="above-md"] { display: none !important; }
}
@media (min-width: 48rem) {
  [data-hide="above-md"] { display: none !important; }
  [data-show="below-md"] { display: none !important; }
}

/* --- Decoration --- */
.border-mid  { border: var(--border-mid);  }
.border-thin { border: var(--border-thin); }

.radius-full { border-radius: var(--radius-full); }
.radius-l    { border-radius: var(--radius-l);    }
.radius-m    { border-radius: var(--radius-m);    }
.radius-s    { border-radius: var(--radius-s);    }

.shadow-l { box-shadow: var(--shadow-l); }
.shadow-m { box-shadow: var(--shadow-m); }
.shadow-s { box-shadow: var(--shadow-s); }

/* --- Misc --- */
.relative { position: relative; }

.divider {
  background-color: var(--color-light-2);
  block-size: 1px;
  border: none;

  &[data-orientation="vertical"] {
    align-self: stretch;
    block-size: auto;
    inline-size: 1px;
  }
}


} /* end @layer utility */


/* ═══════════════════════════════════════════════════════
   4. BLOCK LAYER — Components with nested exceptions
   ═══════════════════════════════════════════════════════ */

@layer block {

/* ──────────────── Button ──────────────── */
.button {
  align-items: center;
  background-color: var(--button-bg, var(--color-primary));
  border: 2px solid transparent;
  border-radius: var(--radius-m);
  color: var(--button-color, var(--color-light));
  cursor: pointer;
  display: inline-flex;
  font-size: var(--step--1);
  font-weight: 600;
  gap: var(--space-2xs);
  justify-content: center;
  line-height: 1;
  padding: var(--button-padding, var(--space-2xs) var(--space-s));
  text-decoration: none;
  transition: background-color var(--transition-fast),
              border-color var(--transition-fast),
              color var(--transition-fast);

  &:hover {
    background-color: var(--button-bg-hover, var(--color-primary-alt));
  }

  &:active {
    transform: scale(0.98);
  }

  /* Variants */
  &[data-variant="secondary"] {
    --button-bg: transparent;
    --button-color: var(--color-primary);
    border-color: var(--color-primary);

    &:hover {
      --button-bg-hover: var(--color-primary);
      color: var(--color-light);
    }
  }

  &[data-variant="ghost"] {
    --button-bg: transparent;
    --button-color: var(--text-base);

    &:hover {
      --button-bg-hover: var(--color-light-2);
    }
  }

  &[data-variant="danger"] {
    --button-bg: var(--color-danger);

    &:hover {
      --button-bg-hover: var(--color-danger-alt);
    }
  }

  /* Sizes */
  &[data-size="s"] {
    --button-padding: var(--space-3xs) var(--space-xs);
    font-size: var(--step--2);
  }

  &[data-size="l"] {
    --button-padding: var(--space-xs) var(--space-m);
    font-size: var(--step-0);
  }

  /* Modifiers */
  &[data-full] {
    inline-size: 100%;
  }
}


/* ──────────────── Card ──────────────── */
.card {
  background-color: var(--surface-raised);
  border: var(--border-thin);
  border-radius: var(--radius-m);
  box-shadow: var(--shadow-s);
  padding: var(--card-padding, var(--space-m));

  &[data-variant="highlight"] {
    border-color: var(--color-primary);
    border-width: 2px;
  }

  &[data-variant="flat"] {
    background-color: var(--color-light-2);
    border: none;
    box-shadow: none;

    &:hover {
      box-shadow: none;
    }
  }

  &[data-interactive] {
    cursor: pointer;
    transition: box-shadow var(--transition-base),
                border-color var(--transition-fast);

    &:hover {
      border-color: var(--color-primary);
      box-shadow: var(--shadow-m);
    }
  }
}


/* ──────────────── Tag / Badge ──────────────── */
.tag {
  background-color: var(--tag-bg, var(--color-light-2));
  border-radius: var(--radius-full);
  color: var(--tag-color, var(--color-dark-2));
  display: inline-block;
  font-size: var(--step--2);
  font-weight: 600;
  line-height: 1;
  padding: var(--space-3xs) var(--space-2xs);

  &[data-variant="primary"] {
    --tag-bg: var(--color-primary);
    --tag-color: var(--color-light);
  }

  &[data-variant="success"] {
    --tag-bg: var(--color-secondary);
    --tag-color: var(--color-light);
  }

  &[data-variant="warning"] {
    --tag-bg: var(--color-accent);
    --tag-color: var(--color-dark);
  }

  &[data-variant="danger"] {
    --tag-bg: var(--color-danger);
    --tag-color: var(--color-light);
  }

  &[data-outline] {
    background-color: transparent;
    box-shadow: inset 0 0 0 1.5px currentColor;
  }
}


/* ──────────────── Skip Link ──────────────── */
.skip-link {
  background: var(--color-dark);
  border-radius: var(--radius-m);
  color: var(--color-light);
  inset-block-start: var(--space-2xs);
  inset-inline-start: var(--space-2xs);
  padding: var(--space-2xs) var(--space-s);
  position: absolute;
  text-decoration: none;
  transform: translateY(-200%);
  transition: transform var(--transition-fast);
  z-index: var(--layer-overlay);

  &:focus {
    transform: translateY(0);
  }
}


/* ──────────────── Form: Input ──────────────── */
.input {
  background-color: var(--surface-raised);
  border: 2px solid var(--color-light-3);
  border-radius: var(--radius-m);
  color: var(--text-base);
  display: block;
  font-size: var(--step-0);
  inline-size: 100%;
  line-height: 1.5;
  padding: var(--input-padding, var(--space-2xs) var(--space-xs));
  transition: border-color var(--transition-fast),
              box-shadow var(--transition-fast);

  &::placeholder {
    color: var(--color-mid);
  }

  &:hover {
    border-color: var(--color-mid);
  }

  &:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px var(--color-primary-light);
    outline: none;
  }

  &:disabled {
    cursor: not-allowed;
    opacity: 0.5;
  }

  /* Validation states */
  &[data-validation="error"],
  &:user-invalid {
    border-color: var(--color-danger);

    &:focus {
      box-shadow: 0 0 0 3px var(--color-danger-light);
    }
  }

  &[data-validation="valid"] {
    border-color: var(--color-secondary);

    &:focus {
      box-shadow: 0 0 0 3px var(--color-secondary-light);
    }
  }

  /* Sizes */
  &[data-size="s"] {
    --input-padding: var(--space-3xs) var(--space-2xs);
    font-size: var(--step--1);
  }

  &[data-size="l"] {
    --input-padding: var(--space-xs) var(--space-s);
    font-size: var(--step-1);
  }
}

textarea.input {
  min-block-size: 6rem;
  resize: vertical;
}

select.input {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2394928d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-position: right var(--space-xs) center;
  background-repeat: no-repeat;
  padding-inline-end: var(--space-l);
}


/* ──────────────── Form: Label, Field, Fieldset ──────────────── */
.label {
  color: var(--text-base);
  display: block;
  font-size: var(--step--1);
  font-weight: 600;
}

.field {
  display: flex;
  flex-direction: column;
  gap: var(--space-3xs);
}

.field-error {
  color: var(--color-danger);
  font-size: var(--step--2);
}

.field-hint {
  color: var(--text-muted);
  font-size: var(--step--2);
}

.fieldset {
  border: var(--border-thin);
  border-radius: var(--radius-m);
  padding: var(--space-m);

  & > legend {
    font-size: var(--step--1);
    font-weight: 600;
    padding-inline: var(--space-2xs);
  }
}


/* ──────────────── Form: Checkbox / Radio ──────────────── */
.check {
  align-items: center;
  cursor: pointer;
  display: inline-flex;
  font-size: var(--step-0);
  gap: var(--space-2xs);

  & > input[type="checkbox"],
  & > input[type="radio"] {
    -webkit-appearance: none;
    appearance: none;
    background-color: var(--surface-raised);
    block-size: 1.25em;
    border: 2px solid var(--color-light-3);
    cursor: pointer;
    display: grid;
    flex-shrink: 0;
    inline-size: 1.25em;
    place-content: center;
    transition: background-color var(--transition-fast),
                border-color var(--transition-fast);
  }

  & > input[type="checkbox"] {
    border-radius: var(--radius-s);
  }

  & > input[type="radio"] {
    border-radius: 50%;
  }

  & > input:hover {
    border-color: var(--color-primary);
  }

  & > input:checked {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
  }

  & > input[type="checkbox"]:checked::before {
    block-size: 0.35em;
    border-block-end: 2px solid #fff;
    border-inline-start: 2px solid #fff;
    content: '';
    inline-size: 0.6em;
    transform: rotate(-45deg) translateY(-0.05em);
  }

  & > input[type="radio"]:checked::before {
    background-color: #fff;
    block-size: 0.5em;
    border-radius: 50%;
    content: '';
    inline-size: 0.5em;
  }

  & > input:focus-visible {
    outline: var(--focus-ring);
    outline-offset: var(--focus-offset);
  }

  & > input:disabled {
    cursor: not-allowed;
    opacity: 0.5;
  }
}


/* ──────────────── Form: Input Group ──────────────── */
.input-group {
  align-items: stretch;
  display: flex;

  & > .input {
    flex: 1;
    min-inline-size: 0;
  }

  & > .input:not(:first-child) {
    border-end-start-radius: 0;
    border-start-start-radius: 0;
  }

  & > .input:not(:last-child) {
    border-end-end-radius: 0;
    border-inline-end: none;
    border-start-end-radius: 0;
  }
}

.input-addon {
  align-items: center;
  background-color: var(--color-light-2);
  border: 2px solid var(--color-light-3);
  color: var(--text-muted);
  display: flex;
  font-size: var(--step--1);
  padding-inline: var(--space-xs);
  white-space: nowrap;

  &:first-child {
    border-end-start-radius: var(--radius-m);
    border-inline-end: none;
    border-start-start-radius: var(--radius-m);
  }

  &:last-child {
    border-end-end-radius: var(--radius-m);
    border-inline-start: none;
    border-start-end-radius: var(--radius-m);
  }
}


/* ──────────────── Breadcrumb ──────────────── */
.breadcrumb {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  font-size: var(--step--1);
  gap: var(--space-3xs);
  list-style: none;
  margin: 0;
  padding: 0;

  & > li {
    max-inline-size: none;
  }

  & > li + li::before {
    color: var(--text-muted);
    content: '/';
    margin-inline-end: var(--space-3xs);
  }

  & a {
    color: var(--text-muted);
    text-decoration: none;
    transition: color var(--transition-fast);

    &:hover {
      color: var(--color-primary);
    }
  }

  & [aria-current="page"] {
    color: var(--text-base);
    font-weight: 500;
  }
}


/* ──────────────── Table ──────────────── */
.table-wrap {
  border: var(--border-thin);
  border-radius: var(--radius-m);
  overflow-x: auto;
}

.table {
  font-size: var(--step--1);
  inline-size: 100%;
  text-align: start;

  & th,
  & td {
    border-block-end: var(--border-thin);
    padding: var(--space-2xs) var(--space-xs);
    vertical-align: top;
  }

  & th {
    background-color: var(--color-light-2);
    font-weight: 600;
    text-align: inherit;
    white-space: nowrap;
  }

  & tbody tr:last-child td {
    border-block-end: none;
  }

  & tbody tr:hover {
    background-color: var(--color-light-2);
  }

  /* Table exceptions */
  &[data-striped] tbody tr:nth-child(even) {
    background-color: var(--color-light-2);
  }

  &[data-compact] th,
  &[data-compact] td {
    font-size: var(--step--2);
    padding: var(--space-3xs) var(--space-2xs);
  }
}


/* ──────────────── Dialog / Modal ──────────────── */
.dialog {

  &::backdrop {
    backdrop-filter: blur(4px);
    background-color: hsl(0 0% 0% / 0.5);
  }

  &[open] {
    animation: dialog-enter var(--transition-base) ease;
    background-color: var(--surface-raised);
    border-radius: var(--radius-l);
    box-shadow: var(--shadow-l);
    display: flex;
    flex-direction: column;
    max-block-size: min(85vh, 40rem);
    max-inline-size: min(90vw, 32rem);
  }

  & .dialog-header {
    align-items: center;
    border-block-end: var(--border-thin);
    display: flex;
    justify-content: space-between;
    padding: var(--space-s) var(--space-m);
  }

  & .dialog-body {
    overflow-y: auto;
    padding: var(--space-m);
  }

  & .dialog-footer {
    border-block-start: var(--border-thin);
    display: flex;
    gap: var(--space-2xs);
    justify-content: flex-end;
    padding: var(--space-s) var(--space-m);
  }

  & .dialog-close {
    background: none;
    block-size: 2rem;
    border: none;
    border-radius: var(--radius-s);
    color: var(--text-muted);
    cursor: pointer;
    display: grid;
    font-size: 1.25rem;
    inline-size: 2rem;
    padding: 0;
    place-content: center;
    transition: background-color var(--transition-fast),
                color var(--transition-fast);

    &:hover {
      background-color: var(--color-light-2);
      color: var(--text-base);
    }
  }
}

@keyframes dialog-enter {
  from {
    opacity: 0;
    transform: scale(0.95) translateY(0.5rem);
  }
}


/* ──────────────── Skeleton / Placeholder ──────────────── */
.skeleton {
  animation: skeleton-pulse 1.5s ease-in-out infinite;
  background: linear-gradient(
    90deg,
    var(--color-light-2) 0%,
    var(--color-light-3) 40%,
    var(--color-light-2) 80%
  );
  background-size: 200% 100%;
  border-radius: var(--radius-s);
}

.skeleton-circle {
  border-radius: 50%;
}

@keyframes skeleton-pulse {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}


/* ──────────────── Frame Exceptions ──────────────── */
.frame[data-ratio="1/1"]  { --frame-ratio: 1 / 1;  }
.frame[data-ratio="3/2"]  { --frame-ratio: 3 / 2;  }
.frame[data-ratio="3/4"]  { --frame-ratio: 3 / 4;  }
.frame[data-ratio="4/3"]  { --frame-ratio: 4 / 3;  }
.frame[data-ratio="21/9"] { --frame-ratio: 21 / 9;  }


/* ──────────────── Generic State Exceptions ──────────────── */
[data-state="inactive"] {
  opacity: 0.5;
  pointer-events: none;
}

[data-state="loading"] {
  color: transparent !important;
  position: relative;

  &::after {
    animation: spin 0.6s linear infinite;
    block-size: 1.25em;
    border: 2px solid var(--color-mid);
    border-block-start-color: var(--color-primary);
    border-radius: 50%;
    content: '';
    inline-size: 1.25em;
    inset: 0;
    margin: auto;
    position: absolute;
  }
}

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

[data-visible="false"] {
  display: none;
}


/* ──────────────── Prose — rich content styling ──────────────── */
.prose blockquote {
  border-inline-start: 3px solid var(--color-primary);
  color: var(--text-muted);
  font-style: italic;
  padding-block: var(--space-2xs);
  padding-inline-start: var(--space-s);

  & > * + * { margin-block-start: 0.5em; }
}

.prose figure { max-inline-size: 100%; }

.prose figcaption {
  color: var(--text-muted);
  font-size: var(--step--1);
  margin-block-start: var(--space-2xs);
}

.prose :is(ul, ol) { padding-inline-start: 1.5em; }
.prose :is(ul, ol) > li + li { margin-block-start: 0.35em; }

.prose hr {
  background-color: var(--color-light-2);
  block-size: 1px;
  border: none;
  margin-block: var(--space-m);
}

.prose img { border-radius: var(--radius-m); }

.prose a {
  color: var(--color-primary);
  text-decoration-thickness: 1px;
  transition: color var(--transition-fast);

  &:hover { color: var(--color-primary-alt); }
}

.prose pre {
  background-color: var(--color-dark);
  border-radius: var(--radius-m);
  color: var(--color-light);
  font-family: var(--font-mono);
  font-size: var(--step--1);
  line-height: 1.5;
  overflow-x: auto;
  padding: var(--space-s);
}

.prose code {
  background-color: var(--color-light-2);
  border-radius: var(--radius-s);
  font-family: var(--font-mono);
  font-size: 0.9em;
  padding: 0.1em 0.35em;
}

.prose pre code {
  background: transparent;
  padding: 0;
}


} /* end @layer block */


/* ═══════════════════════════════════════════════════════
   5. GROUPING LAYER — Contextual theming
   ═══════════════════════════════════════════════════════ */

@layer grouping {

/* Dark theme — explicit toggle via [data-theme="dark"] on any element.
   Values come from --dark-* source tokens in :root. */
[data-theme="dark"] {
  --border-mid:          var(--dark-border-mid);
  --border-thin:         var(--dark-border-thin);
  --color-light-2:       var(--dark-color-light-2);
  --color-light-3:       var(--dark-color-light-3);
  --color-primary-light: var(--dark-color-primary-light);
  --shadow-l:            var(--dark-shadow-l);
  --shadow-m:            var(--dark-shadow-m);
  --shadow-s:            var(--dark-shadow-s);
  --surface-base:        var(--dark-surface-base);
  --surface-raised:      var(--dark-surface-raised);
  --text-base:           var(--dark-text-base);
  --text-muted:          var(--dark-text-muted);

  background-color: var(--surface-base);
  color: var(--text-base);
}

/* Dark theme — automatic via OS preference (only when no explicit theme is set).
   Same --dark-* source tokens, zero duplication of values. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --border-mid:          var(--dark-border-mid);
    --border-thin:         var(--dark-border-thin);
    --color-light-2:       var(--dark-color-light-2);
    --color-light-3:       var(--dark-color-light-3);
    --color-primary-light: var(--dark-color-primary-light);
    --shadow-l:            var(--dark-shadow-l);
    --shadow-m:            var(--dark-shadow-m);
    --shadow-s:            var(--dark-shadow-s);
    --surface-base:        var(--dark-surface-base);
    --surface-raised:      var(--dark-surface-raised);
    --text-base:           var(--dark-text-base);
    --text-muted:          var(--dark-text-muted);

    background-color: var(--surface-base);
    color: var(--text-base);
  }
}

[data-theme="brand"] {
  --surface-base:   var(--color-primary);
  --surface-raised: var(--color-primary-alt);
  --text-base:      var(--color-light);
  --text-muted:     hsl(0 0% 100% / 0.7);

  background-color: var(--surface-base);
  color: var(--text-base);
}

[data-theme="muted"] {
  --surface-base:   var(--color-light-2);
  --surface-raised: var(--surface-base);

  background-color: var(--surface-base);
}


} /* end @layer grouping */


/* ═══════════════════════════════════════════════════════
   6. ACCESSIBILITY — Motion, contrast
   (Unlayered — always wins over layered styles)
   ═══════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}

@media (prefers-contrast: more) {
  :root {
    --border-mid:  3px solid var(--text-base);
    --border-thin: 2px solid var(--text-base);
  }

  .button { border-width: 3px; }
  .input  { border-width: 3px; }
}

@media (forced-colors: active) {
  .button {
    border: 2px solid ButtonText;
  }

  .input {
    border: 2px solid ButtonText;
  }

  .card {
    border: 2px solid CanvasText;
  }

  .tag {
    border: 1px solid CanvasText;
  }

  :focus-visible {
    outline: 3px solid Highlight;
  }
}


/* ═══════════════════════════════════════════════════════
   7. PRINT STYLES
   ═══════════════════════════════════════════════════════ */

@media print {
  body {
    background: #fff;
    color: #000;
    font-size: 12pt;
  }

  .button[data-variant="ghost"],
  .dialog,
  .skeleton,
  .skip-link {
    display: none !important;
  }

  .region { padding-block: 1rem; }

  .wrapper {
    max-inline-size: none;
    padding: 0;
  }

  .shadow-l, .shadow-m, .shadow-s {
    box-shadow: none;
  }

  .card {
    border: 1px solid #ccc;
    box-shadow: none;
    break-inside: avoid;
  }

  .tag {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  .flow a[href^="http"]::after {
    color: #666;
    content: ' (' attr(href) ')';
    font-size: 0.8em;
    word-break: break-all;
  }

  .table tr { break-inside: avoid; }
  img, .frame { break-inside: avoid; }
}