/* ===================================================== */
/* Source: base.css */
/* ===================================================== */

/* 1) predictable sizing everywhere */
*, *::before, *::after { box-sizing: border-box; }

/* 2) base element hygiene */
:where(html) { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
:where(body) { margin: 0; min-height: 100svh; line-height: 1.5; }

/* 3) don’t let viewport get a horizontal scrollbar by default */
:where(html, body) { overflow-x: clip; } /* use .x-scroll to opt back in */

/* 4) media & typographic defaults */
:where(img, svg, video, canvas, iframe) { display: block; max-width: 100%; height: auto; }
:where(p, h1, h2, h3, h4, h5, h6, figure, blockquote, dl, dd) { margin: 0; }
:where(h1, h2, h3, h4) { text-wrap: balance; } /* supported widely; harmless fallback */

/* 5) form & interactive controls feel native but sane */
:where(button, input, select, textarea) { font: inherit; color: inherit; }
:where(button) { cursor: pointer; }
:where(a) { color: inherit; text-decoration: none; }
:where(a):is(:hover, :focus-visible) { text-decoration: underline; }

/* 6) accessible focus you can theme later */
:where(:focus-visible) { outline: 2px solid var(--focus, Highlight); outline-offset: 2px; }

/* 7) reduce layout jump when scrollbars appear (desktop) */
:where(html) { scrollbar-gutter: stable both-edges; }

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


/* tokens you can tweak per theme */
:root {
  color-scheme: light dark;              /* let UA pick form/scrollbar theme */
  --bg: light-dark(var(--color-alabaster), var(--color-jet-black-soft));                          /* respects user theme */
  --fg: light-dark(var(--color-jet-black-soft), var(--color-alabaster));
  --muted: light-dark(var(--color-gray-medium), var(--color-gray-medium));
  --focus: light-dark(var(--color-prussian-blue), var(--color-open-blue));
  --radius: 12px;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 1rem;
  --space-4: 1.5rem;

  --shell-max: 80rem;                    /* desktop max width */
  --shell-gutter: clamp(1rem, 3vw, 2rem);/* desktop side padding */
}

/* pull in Option A first (recommended), then… */
html, body { background: var(--bg); color: var(--fg); }

/* nicer text defaults */
body { font-synthesis-weight: none; text-rendering: optimizeLegibility; }

/* selection & focus */
::selection { background: color-mix(in oklab, var(--focus), transparent 75%); }

/* rounded default for interactive bits */
/* :where(button, input, select, textarea) { border-radius: var(--radius); } */

/* logical spacing helpers to be RTL-friendly */
:where(.stack > * + *) { margin-block-start: var(--space-3); }
/* :where(.cluster) { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; } */


/* page wrapper that’s edge-to-edge on phones, padded on desktop */
.shell {
  inline-size: min(100%, var(--shell-max));
  margin-inline: auto;
  padding-inline: 0;                      /* mobile: true edge-to-edge */
  min-block-size: 100svh;               /* at least full viewport height */
  overflow-x: clip;
}

@media (min-width: 768px) {
  .shell { padding-inline: var(--shell-gutter); }
}

/* escape the shell padding for hero images, carousels, etc. */
.bleed {
  margin-inline: calc(-1 * var(--shell-gutter));
  padding-inline: 0;
}

/* opt-in horizontal scrolling when you actually want it */
.x-scroll { overflow-x: auto; overscroll-behavior-inline: contain; -webkit-overflow-scrolling: touch; }

/* common overflow footgun: let flex/grid kids shrink instead of forcing overflow */
:where(.row, .cluster, .grid, .shell) > * { min-inline-size: 0; }


/* inherit typography & remove surprising UA styles without nuking accessibility */
/* :where(input, textarea, select) { background: Field; color: FieldText; border: 1px solid var(--muted); padding: 0.5em 0.75em; } */
/* :where(button) { border: 1px solid var(--muted); padding: 0.5em 0.9em; background: ButtonFace; color: ButtonText; } */
:where(button:disabled, input:disabled, select:disabled, textarea:disabled) { opacity: .6; cursor: not-allowed; }
:where(input, textarea) { width: 100%; }
/* :where(label) { display: inline-block; } */


/* link underline offset for readability */

/* prevent content “yank” on iOS when scrolling nested panes */
:where(body) { overscroll-behavior: none; }

/* nicer focus rings on dark backgrounds too (uses tokens from option B) */
:focus-visible { outline-color: var(--focus); }

/* long words shouldn’t blow layouts */
:where(p, li, blockquote, figcaption) { overflow-wrap: anywhere; }

@media print {
  .hide-on-print {
    display: none !important;
  }
}


/* ===================================================== */
/* Source: colors.css */
/* ===================================================== */

/* Design tokens: colors & fonts for MJETE corporate ID */
:root {
    /* Neutrals */
    --color-white:           white;
    --color-alabaster:       #FAFAFA;   /* alabaster white */
    --color-light-grey:      #F9FAFA;
    --color-jet-black:       #00000F;   /* jet black primary */
    --color-jet-black-soft:  #1A1A1A;   /* softer black for text */
    --color-soft-black:      #343434;
    --color-gray-ultralight: #F9FAFA;
    --color-gray-light:      #E0E0E0;   /* light gray accents */
    --color-gray-medium:     #A8A8A8;   /* medium gray */
    --color-gray-mediumplus: #7F7F7F;   /* medium gray */
    --color-gray-mediumdark: #606060;   /* dark gray */
    --color-gray-dark:       #303030;   /* dark gray */
    --color-dark-slate-gray: #2F4F4F;   /* button backgrounds */
    --color-slate-gray:      #708090;   /* button hover background */
  
    /* Primary accents */
    --color-prussian-blue:   #003153;
    --color-cranberry-red:   #990000;
    --color-cranberry-light: color-mix(in srgb, var(--color-cranberry-red) 60%, white 40%);

    /* look at those sceptically... */
     --fire-red: #ef5350;
     --yellow-orange: #ffd54f;
     --blue: #80E0FF;


  
    /* Secondary accents */
    --color-dark-teal:       #367588;
    --color-light-teal:      #4FB1BE;
    --color-gold:            #C4A05E;
    --color-open-blue:       #0F9ED5;
    --color-open-blue-light: #D6EFFA; /* works in light & dark */


    /* signals/traffic lights */
    /* Status / signal colors (traffic light scale) */
    --signal-red:         #C62828; /* critical / error */
    --signal-amber:       #FFB300; /* warning (amber/orange) */
    --signal-yellow:      #FFD54F; /* caution / soft warning */
    --signal-light-green: #9CCC65; /* success (soft) */
    --signal-green:       #2E7D32; /* strong success / go */

    /* themed colors */
    --color-primary-light: var(--color-open-blue);
    --color-primary-dark:  var(--color-prussian-blue);

    --color-secondary-light: var(--color-light-teal);
    --color-secondary-dark:  var(--color-dark-teal);

    --color-accent-light: var(--color-gold);
    --color-accent-dark:  var(--color-cranberry-red);

    --color-neutral-light: var(--color-alabaster);
    --color-neutral-dark:  var(--color-jet-black-soft);

    --color-grey-1 :var(--color-gray-ultralight);
    --color-grey-2: var(--color-gray-light);
    --color-grey-3: var(--color-gray-medium);
    --color-grey-4: var(--color-gray-mediumplus);
    --color-grey-5: var(--color-gray-mediumdark);
    --color-grey-6: var(--color-gray-dark);

    --color-green-1: var(--signal-light-green);
    --color-green-2: var(--signal-green);
    --color-green-3: var(--color-slate-gray);
    --color-green-4: var(--color-dark-slate-gray);

}


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

	--color-open-blue-light: #5A6A74; /* darker tint for dark mode */

        /* Dark mode: slightly deepen the lighter tones for contrast */
        --signal-yellow:      #FFC107;
        --signal-light-green: #7CB342;
    }
}


/* ===================================================== */
/* Source: typography.css */
/* ===================================================== */

/* Typography scale—font sizes are even numbers (px) */
/* Jost — normal styles */
@font-face { font-family:"Jost"; src:url("/jost/Jost-200-Thin.woff2") format("woff2"); font-weight:200; font-style:normal; font-display:swap; }
@font-face { font-family:"Jost"; src:url("/jost/Jost-300-Light.woff2") format("woff2"); font-weight:300; font-style:normal; font-display:swap; }
@font-face { font-family:"Jost"; src:url("/jost/Jost-400-Book.woff2") format("woff2"); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:"Jost"; src:url("/jost/Jost-500-Medium.woff2") format("woff2"); font-weight:500; font-style:normal; font-display:swap; }
@font-face { font-family:"Jost"; src:url("/jost/Jost-600-Semi.woff2") format("woff2"); font-weight:600; font-style:normal; font-display:swap; }
@font-face { font-family:"Jost"; src:url("/jost/Jost-700-Bold.woff2") format("woff2"); font-weight:700; font-style:normal; font-display:swap; }
@font-face { font-family:"Jost"; src:url("/jost/Jost-800-Hevy.woff2") format("woff2"); font-weight:800; font-style:normal; font-display:swap; }
@font-face { font-family:"Jost"; src:url("/jost/Jost-900-Black.woff2") format("woff2"); font-weight:900; font-style:normal; font-display:swap; }

/* Jost — italic styles */
@font-face { font-family:"Jost"; src:url("/jost/Jost-200-ThinItalic.woff2") format("woff2"); font-weight:200; font-style:italic; font-display:swap; }
@font-face { font-family:"Jost"; src:url("/jost/Jost-300-LightItalic.woff2") format("woff2"); font-weight:300; font-style:italic; font-display:swap; }
@font-face { font-family:"Jost"; src:url("/jost/Jost-400-BookItalic.woff2") format("woff2"); font-weight:400; font-style:italic; font-display:swap; }
@font-face { font-family:"Jost"; src:url("/jost/Jost-500-MediumItalic.woff2") format("woff2"); font-weight:500; font-style:italic; font-display:swap; }
@font-face { font-family:"Jost"; src:url("/jost/Jost-600-SemiItalic.woff2") format("woff2"); font-weight:600; font-style:italic; font-display:swap; }
@font-face { font-family:"Jost"; src:url("/jost/Jost-700-BoldItalic.woff2") format("woff2"); font-weight:700; font-style:italic; font-display:swap; }
@font-face { font-family:"Jost"; src:url("/jost/Jost-800-HevyItalic.woff2") format("woff2"); font-weight:800; font-style:italic; font-display:swap; }
@font-face { font-family:"Jost"; src:url("/jost/Jost-900-BlackItalic.woff2") format("woff2"); font-weight:900; font-style:italic; font-display:swap; }


@supports (font-synthesis-weight: none) and (font-synthesis-style: none) {
    html { font-synthesis-weight: none; font-synthesis-style: none; }
}


:root {
    --font-sans: "Jost", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans";
    --font-size-nano: 9px;   /* Extra extra small (e.g. captions) */
    --font-size-xxs: 12px;   /* Extra extra small (e.g. captions) */
    --font-size-xs: 14px;    /* Extra small (e.g. fine print) */
    --font-size-s: 16px;     /* Small / base paragraph */
    --font-size-m: 18px;     /* Medium (e.g. sidebar text) */
    --font-size-l: 20px;     /* Large (e.g. highlight text) */
    --font-size-xl: 24px;    /* Headings / subheadings */
    --font-size-2xl: 32px;   /* Main section titles */
    --font-size-3xl: 40px;   /* Page title (e.g. “MJETE”) */
    --font-size-4xl: 96px;   /* Page title (e.g. “MJETE”) */
  }

/* Use it globally */
html, body { font-family: var(--font-sans); }
  
  /* Base element styles */
  body {
      font-size: var(--font-size-s);
      line-height: 1.5;
  }

  h1 {
      font-size: var(--font-size-4xl);
      line-height: 1.1;
      margin: 0 0 0 0;
  }
  
  h2 {
    font-size: var(--font-size-2xl);
    line-height: 1.2;
    margin: 0 0 0.5em 0;
  }
  
  h3 {
    font-size: var(--font-size-xl);
    line-height: 1.3;
    margin: 0 0 0.5em 0;
  }
  
  p, li {
      font-size: var(--font-size-s);
      margin: 0 0 1em 0;
  }
  
  small, .text-xxs {
    font-size: var(--font-size-xxs);
  }
  
  .text-xs {
    font-size: var(--font-size-xs);
  }
  
  .text-s {
    font-size: var(--font-size-s);
  }
  
  .text-m {
    font-size: var(--font-size-m);
  }
  
  .text-l {
    font-size: var(--font-size-l);
  }
  
  .text-xl {
    font-size: var(--font-size-xl);
  }
  

  h1.mjete{
    font-size: 106px;
    line-height: 0.9;
  }


  button {
    font-family: var(--font-family-rubik)
  }

  a.selected {
    text-decoration: underline 2px var(--color-prussian-blue);
  }

  a {
    text-decoration: none;
    padding-bottom: 0.5rem;
    text-underline-offset: 0.15em;
  }

  a:hover {
    text-decoration: underline 2px var(--color-open-blue);
  }


/* ===================================================== */
/* Source: font-size-classes.css */
/* ===================================================== */


/*----------------------------------------------------------- FONT ALIGNMENT --- */

.font-align-left {
	text-align: left;
}
.font-align-center {
	text-align: center;
}
.font-align-right {
    text-align: right;
}
.font-align-justify {
    text-align: justify;
}


/*----------------------------------------------------------- FONT SIZES --- */

.font-size-nano {
    font-size: var(--font-size-nano);
}

.font-size-xxs {
	font-size: var(--font-size-xxs);
}

.font-size-xs {
	font-size: var(--font-size-xs);
}

.font-size-s {
	font-size: var(--font-size-s);
}

.font-size-m {
	font-size: var(--font-size-m);
}

.font-size-l {
	font-size: var(--font-size-l);
}

.font-size-xl {
	font-size: var(--font-size-xl);
}

.font-size-2xl {
	font-size: var(--font-size-2xl);
}

.font-size-3xl {
	font-size: var(--font-size-3xl);
}

.font-size-4xl {
	font-size: var(--font-size-4xl);
}

/*--------------------------------------------------------- FONT WEIGHTS --- */

.font-weight-thin {
	font-weight: 200
}

.font-weight-light {
	font-weight: 300
}

.font-weight-book, .font-weight-regular {
	font-weight: 400
}

.font-weight-medium {
	font-weight: 500
}

.font-weight-semi {
	font-weight: 600
}

.font-weight-bold {
	font-weight: 700
}

.font-weight-hevy {
	font-weight: 800
}

.font-weight-black {
	font-weight: 900
}


/*---------------------------------------------------------- FONT COLORS --- */

.font-color-neutral-light {
	color: var(--color-neutral-light);
}

.font-color-neutral-dark {
	color: var(--color-neutral-dark);
}

.font-color-accent-light {
	color: var(--color-accent-light);
}

.font-color-accent-dark {
	color: var(--color-accent-dark);
}

.font-color-primary-light {
	color: var(--color-primary-light);
}

.font-color-primary-dark {
	color: var(--color-primary-dark);
}

.font-color-secondary-light {
	/* color: var(--color-light-teal); */
    color: var(--color-secondary-light);
}

.font-color-secondary-dark {
	color: var(--color-secondary-dark);
}

.font-color-grey-1 {
	color: var(--color-grey-1);
}

.font-color-grey-2 {
	color: var(--color-grey-2);
}

.font-color-grey-3 {
	color: var(--color-grey-3);
}

.font-color-grey-4 {
	color: var(--color-grey-4);
}

.font-color-grey-5 {
	color: var(--color-grey-5);
}

.font-color-grey-6 {
	color: var(--color-grey-6);
}

/* hover effects */
.font-color-hover-primary-dark:hover {
	color: var(--color-primary-dark);
}

.font-color-hover-primary-light:hover {
	color: var(--color-primary-light);
}

.font-color-hover-accent-dark:hover {
	color: var(--color-accent-dark);
}

.font-color-hover-accent-light:hover {
	color: var(--color-accent-light);
}

.font-color-hover-secondary-dark:hover {
	color: var(--color-secondary-dark);
}

.font-color-hover-secondary-light:hover {
	color: var(--color-secondary-light);
}

.font-color-hover-neutral-dark:hover {
	color: var(--color-neutral-dark);
}

.font-color-hover-neutral-light:hover {
	color: var(--color-neutral-light);
}

.font-color-hover-grey-1:hover {
	color: var(--color-grey-1);
}

.font-color-hover-grey-2:hover {
	color: var(--color-grey-2);
}

.font-color-hover-grey-3:hover {
	color: var(--color-grey-3);
}

.font-color-hover-grey-4:hover {
	color: var(--color-grey-4);
}

.font-color-hover-grey-5:hover {
	color: var(--color-grey-5);
}

.font-color-hover-grey-6:hover {
	color: var(--color-grey-6);
}




/* ===================================================== */
/* Source: tufte-table.css */
/* ===================================================== */

/* =========================================
   Tufte-like Table Styling
   ========================================= */

/* tufte-table.css — minimal, Tufte-ish, theme-aware (light/dark) */
/* uses your tokens from base/colors/typography */
table {
  /* local tones computed from theme fg/bg */
  --hairline: color-mix(in oklab, var(--fg) 22%, transparent);
  --stripe:   color-mix(in oklab, var(--fg) 6%, transparent);
  --hover:    color-mix(in oklab, var(--fg) 10%, transparent);
  --boundary-color: color-mix(in oklab, var(--fg) 20%, transparent);
  --boundary-gap: 0.5rem; /* breathing room on each side */
  --boundary-style: 1px dashed var(--boundary-color);


  width: 100%;
  table-layout: auto;
  border-collapse: collapse;
  border-spacing: 0;

  font-family: var(--font-sans);
  font-size: var(--font-size-s);
  line-height: 1.45;

  color: var(--fg);
  background: transparent;

  margin-block: 1.5rem;
  font-variant-numeric: tabular-nums; /* keeps times lining up */
}

/* header: quiet caps, hairline rule */
thead th {
  text-align: left;                     /* default */
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--muted);
  padding: 0.25rem 0.5rem 0.45rem 0;
  border-bottom: 1px solid var(--hairline);
  vertical-align: bottom;
  font-size: var(--font-size-xs);
  text-transform: uppercase;
  white-space: nowrap;
}

/* allow manual overrides on the header */
thead th[align="center"] { text-align: center; }
thead th[align="right"]  { text-align: right;  }

/* body cells: whitespace over boxes; no vertical rules */
tbody td {
  padding: 0.4rem 1.1rem 0.5rem 0rem;
  border: 0;
  vertical-align: baseline;
  /* white-space: nowrap; */
}

/* ultra-light zebra for scanability */
tbody tr:nth-child(even) { background: var(--stripe); }

/* hover should whisper, not shout */
tbody tr:hover { background: var(--hover); }

/* optional: make the last column (often codes) visually quieter */
/* tbody td:last-child { color: color-mix(in oklab, var(--muted) 85%, var(--fg)); } */

/* lattice cue every five rows */
tbody tr:nth-child(5n) td { box-shadow: inset 0 -1px 0 0 var(--hairline); }

/* ---------- column alignment driven by <th align="…"> ---------- */
/* Center the Nth column if the Nth <th> has align="center" */
table:has(thead th:nth-child(1)[align="center"]) tbody td:nth-child(1) { text-align: center; }
table:has(thead th:nth-child(2)[align="center"]) tbody td:nth-child(2) { text-align: center; }
table:has(thead th:nth-child(3)[align="center"]) tbody td:nth-child(3) { text-align: center; }
table:has(thead th:nth-child(4)[align="center"]) tbody td:nth-child(4) { text-align: center; }
table:has(thead th:nth-child(5)[align="center"]) tbody td:nth-child(5) { text-align: center; }
table:has(thead th:nth-child(6)[align="center"]) tbody td:nth-child(6) { text-align: center; }

/* Right-align if the header says so */
table:has(thead th:nth-child(1)[align="right"]) tbody td:nth-child(1) { text-align: right; }
table:has(thead th:nth-child(2)[align="right"]) tbody td:nth-child(2) { text-align: right; }
table:has(thead th:nth-child(3)[align="right"]) tbody td:nth-child(3) { text-align: right; }
table:has(thead th:nth-child(4)[align="right"]) tbody td:nth-child(4) { text-align: right; }
table:has(thead th:nth-child(5)[align="right"]) tbody td:nth-child(5) { text-align: right; }
table:has(thead th:nth-child(6)[align="right"]) tbody td:nth-child(6) { text-align: right; }

/* print: remove stripes and maximize contrast */
@media print {
  tbody tr { background: none !important; }
  thead th { color: black; border-bottom-color: black; }
}

/* === Tufte-style single vertical boundary with breathing room === */

/* theme-aware tone */
table {
  --boundary-color: color-mix(in oklab, var(--fg) 20%, transparent);
  --boundary-gap: 0.5rem; /* breathing room on each side */
}

/* boundary column cells */
th.boundary,
td.boundary {
  position: relative;
  padding-right: calc(var(--boundary-gap) + 0.25rem); /* leave space before the line */
}

/* draw the hairline itself */
th.boundary::after,
td.boundary::after {
  content: "";
  position: absolute;
  top: 0;
  right: var(--boundary-gap);
  height: 100%;
  width: 1px;
  background-color: var(--boundary-color);
  pointer-events: none;
  border-right: var(--boundary-style);   /* ← dashed hairline */
}

/* optional: give the first right-hand column matching left padding */
th.boundary + th,
td.boundary + td {
  padding-left: var(--boundary-gap);
}

/* make sure hover/stripe backgrounds stop at the boundary */
tbody tr:hover td.boundary {
  background-clip: padding-box;
}

/* tone adjustment for dark mode */
@media (prefers-color-scheme: dark) {
  table {
    --boundary-color: color-mix(in oklab, var(--fg) 35%, transparent);
  }
}


/* ===================================================== */
/* Source: shapes.css */
/* ===================================================== */

/*=============================================================== RADIUS === */

.shape-radius-nano {
  border-radius: 4px;
}

.shape-radius-xxs {
  border-radius: 8px;
}

.shape-radius-xs {
  border-radius: 10px;
}

.shape-radius-s {
  border-radius: 12px;
}

.shape-radius-m {
  border-radius: 16px;
}

.shape-radius-l {
  border-radius: 20px;
}

.shape-radius-xl {
  border-radius: 24px;
}

.shape-radius-2xl {
  border-radius: 32px;
}

.shape-radius-3xl {
  border-radius: 40px;
}

.shape-radius-full {
  border-radius: 9999px;
}

/*=============================================================== MARGIN === */

.shape-margin-nano {
  margin: 4px;
}

.shape-margin-xxs {
  margin: 8px;
}

.shape-margin-xs {
  margin: 10px;
}

.shape-margin-s {
  margin: 12px;
}

.shape-margin-m {
  margin: 16px;
}

.shape-margin-l {
  margin: 20px;
}

.shape-margin-xl {
  margin: 24px;
}
.shape-margin-2xl {
  margin: 32px;
}
.shape-margin-3xl {
  margin: 40px;
}
.shape-margin-null {
  margin: 0;
}

.shape-margin-lr-nano {
  margin-left: 4px;
  margin-right: 4px;
}
.shape-margin-lr-xxs {
    margin-left: 8px;
    margin-right: 8px;
}
.shape-margin-lr-xs {
    margin-left: 10px;
    margin-right: 10px;
}
.shape-margin-lr-s {
    margin-left: 12px;
    margin-right: 12px;
}
.shape-margin-lr-m {
    margin-left: 16px;
    margin-right: 16px;
}
.shape-margin-lr-l {
    margin-left: 20px;
    margin-right: 20px;
}
.shape-margin-lr-xl {
    margin-left: 24px;
    margin-right: 24px;
}
.shape-margin-lr-2xl {
    margin-left: 32px;
    margin-right: 32px;
}
.shape-margin-lr-3xl {
    margin-left: 40px;
    margin-right: 40px;
}


.shape-margin-bottom-nano {
  margin-bottom: 4px;
}
.shape-margin-bottom-xxs {
  margin-bottom: 8px;
}
.shape-margin-bottom-xs {
    margin-bottom: 10px;
}
.shape-margin-bottom-s {
    margin-bottom: 12px;
}
.shape-margin-bottom-m {
    margin-bottom: 16px;
}
.shape-margin-bottom-l {
    margin-bottom: 20px;
}
.shape-margin-bottom-xl {
    margin-bottom: 24px;
}
.shape-margin-bottom-2xl {
    margin-bottom: 32px;
}
.shape-margin-bottom-3xl {
    margin-bottom: 40px;
}

.shape-margin-top-nano {
  margin-top: 4px;
}
.shape-margin-top-xxs {
    margin-top: 8px;
}
.shape-margin-top-xs {
    margin-top: 10px;
}
.shape-margin-top-s {
    margin-top: 12px;
}
.shape-margin-top-m {
    margin-top: 16px;
}
.shape-margin-top-l {
    margin-top: 20px;
}
.shape-margin-top-xl {
    margin-top: 24px;
}
.shape-margin-top-2xl {
    margin-top: 32px;
}
.shape-margin-top-3xl {
    margin-top: 40px;
}

/*=============================================================== MARGIN === */

.shape-padding-null {
  padding: 0;
}

.shape-padding-pico {
  padding: 2px;
}

.shape-padding-nano {
  padding: 4px;
}
.shape-padding-xxs {
    padding: 8px;
}
.shape-padding-xs {
    padding: 10px;
}
.shape-padding-s {
    padding: 12px;
}
.shape-padding-m {
    padding: 16px;
}
.shape-padding-l {
    padding: 20px;
}
.shape-padding-xl {
    padding: 24px;
}
.shape-padding-2xl {
    padding: 32px;
}
.shape-padding-3xl {
    padding: 40px;
}

.shape-padding-lr-pico {
  padding-left: 2px;
  padding-right: 2px;
}
.shape-padding-lr-nano {
  padding-left: 4px;
  padding-right: 4px;
}

.shape-padding-lr-xxs {
  padding-left: 8px;
  padding-right: 8px;
}

.shape-padding-lr-xs {
  padding-left: 10px;
  padding-right: 10px;
}

.shape-padding-lr-s {
  padding-left: 12px;
  padding-right: 12px;
}

.shape-padding-lr-m {
  padding-left: 16px;
  padding-right: 16px;
}
.shape-padding-lr-l {
  padding-left: 20px;
  padding-right: 20px;
}
.shape-padding-lr-xl {
    padding-left: 24px;
    padding-right: 24px;
}
.shape-padding-lr-2xl {
	padding-left: 32px;
	padding-right: 32px;
}
.shape-padding-lr-3xl {
	padding-left: 40px;
	padding-right: 40px;
}
.shape-padding-tb-pico {
  padding-top: 2px;
  padding-bottom: 2px;
}
.shape-padding-tb-nano {
  padding-top: 4px;
  padding-bottom: 4px;
}
.shape-padding-tb-xxs {
  padding-top: 8px;
  padding-bottom: 8px;
}
.shape-padding-tb-xs {
    padding-top: 10px;
    padding-bottom: 10px;
}
.shape-padding-tb-s {
    padding-top: 12px;
    padding-bottom: 12px;
}
.shape-padding-tb-m {
    padding-top: 16px;
    padding-bottom: 16px;
}
.shape-padding-tb-l {
    padding-top: 20px;
    padding-bottom: 20px;
}
.shape-padding-tb-xl {
    padding-top: 24px;
    padding-bottom: 24px;
}
.shape-padding-tb-2xl {
    padding-top: 32px;
    padding-bottom: 32px;
}
.shape-padding-tb-3xl {
    padding-top: 40px;
    padding-bottom: 40px;
}


/* ===================================================== */
/* Source: strokes.css */
/* ===================================================== */

.stroke-none {
	border: none;
}

.stroke-primary-dark {
    border: 2px solid var(--color-primary-dark);
}

.stroke-primary-light {
	border: 2px solid var(--color-primary-light);
}

.stroke-secondary-dark {
	border: 2px solid var(--color-secondary-dark);
}

.stroke-secondary-light {
	border: 2px solid var(--color-secondary-light);
}
.stroke-accent-dark {
	border: 2px solid var(--color-accent-dark);
}
.stroke-accent-light {
	border: 2px solid var(--color-accent-light);
}
.stroke-neutral-dark {
	border: 2px solid var(--color-neutral-dark);
}
.stroke-neutral-light {
    border: 2px solid var(--color-neutral-light);
}

.stroke-grey-1 {
	border: 2px solid var(--color-grey-1);
}

.stroke-grey-2 {
	border: 2px solid var(--color-grey-2);
}

.stroke-grey-3 {
	border: 2px solid var(--color-grey-3);
}

.stroke-grey-4 {
	border: 2px solid var(--color-grey-4);
}

.stroke-grey-5 {
	border: 2px solid var(--color-grey-5);
}

.stroke-grey-6 {
	border: 2px solid var(--color-grey-6);
}

/* hover */

.stroke-hover-primary-dark:hover {
	border: 2px solid var(--color-primary-dark);
}

.stroke-hover-primary-light:hover {
	border: 2px solid var(--color-primary-light);
}

.stroke-hover-secondary-dark:hover {
	border: 2px solid var(--color-secondary-dark);
}

.stroke-hover-secondary-light:hover {
	border: 2px solid var(--color-secondary-light);
}

.stroke-hover-accent-dark:hover {
	border: 2px solid var(--color-accent-dark);
}

.stroke-hover-accent-light:hover {
	border: 2px solid var(--color-accent-light);
}

.stroke-hover-neutral-dark:hover {
	border: 2px solid var(--color-neutral-dark);
}

.stroke-hover-neutral-light:hover {
	border: 2px solid var(--color-neutral-light);
}

.stroke-hover-grey-1:hover {
	border: 2px solid var(--color-grey-1);
}

.stroke-hover-grey-2:hover {
	border: 2px solid var(--color-grey-2);
}

.stroke-hover-grey-3:hover {
	border: 2px solid var(--color-grey-3);
}

.stroke-hover-grey-4:hover {
	border: 2px solid var(--color-grey-4);
}

.stroke-hover-grey-5:hover {
	border: 2px solid var(--color-grey-5);
}

.stroke-hover-grey-6:hover {
	border: 2px solid var(--color-grey-6);
}


/* ===================================================== */
/* Source: fills.css */
/* ===================================================== */

.fill-none {
  background-color: transparent;
}

.fill-primary-dark {
  background-color: var(--color-primary-dark);
}

.fill-primary-light {
  background-color: var(--color-primary-light);
}

.fill-secondary-dark {
  background-color: var(--color-secondary-dark);
}

.fill-secondary-light {
  background-color: var(--color-secondary-light);
}

.fill-accent-dark {
  background-color: var(--color-accent-dark);
}

.fill-accent-light {
  background-color: var(--color-accent-light);
}

.fill-neutral-dark {
  background-color: var(--color-neutral-dark);
}

.fill-neutral-light {
  background-color: var(--color-neutral-light);
}

.fill-grey-1 {
  background-color: var(--color-grey-1);
}

.fill-grey-2 {
  background-color: var(--color-grey-2);
}

.fill-grey-3 {
  background-color: var(--color-grey-3);
}

.fill-grey-4 {
  background-color: var(--color-grey-4);
}

.fill-grey-5 {
  background-color: var(--color-grey-5);
}

.fill-grey-6 {
  background-color: var(--color-grey-6);
}

/* hover effects */
.fill-hover-primary-dark:hover {
  background-color: var(--color-primary-dark);
}

.fill-hover-primary-light:hover {
  background-color: var(--color-primary-light);
}
.fill-hover-secondary-dark:hover {
  background-color: var(--color-secondary-dark);
}
.fill-hover-secondary-light:hover {
  background-color: var(--color-secondary-light);
}
.fill-hover-accent-dark:hover {
    background-color: var(--color-accent-dark);
}
.fill-hover-accent-light:hover {
    background-color: var(--color-accent-light);
}
.fill-hover-neutral-dark:hover {
    background-color: var(--color-neutral-dark);
}
.fill-hover-neutral-light:hover {
    background-color: var(--color-neutral-light);
}
.fill-hover-grey-1:hover {
    background-color: var(--color-grey-1);
}

.fill-hover-grey-2:hover {
	background-color: var(--color-grey-2);
}
.fill-hover-grey-3:hover {
	background-color: var(--color-grey-3);
}
.fill-hover-grey-4:hover {
    background-color: var(--color-grey-4);
}
.fill-hover-grey-5:hover {
    background-color: var(--color-grey-5);
}
.fill-hover-grey-6:hover {
    background-color: var(--color-grey-6);
}



/* ===================================================== */
/* Source: grid-tokens.css */
/* ===================================================== */

/* ===================================================== */
/* Source: grid-tokens.css */
/* ===================================================== */

/* Grid defaults. Kept conservative; override via utility classes or inline vars. */
:root {
  --grid-gap-default: var(--space-3, 1rem);

  /* Default minimum tile width for auto-fit/auto-fill templates */
  --grid-min-default: 16rem;

  /* Default size for implicit rows (when you opt into fixed-row utilities) */
  --grid-auto-rows-default: auto;

  /* Default aspect ratio for “evenly sized tiles” mode */
  --grid-cell-aspect-default: 1 / 1;
}


/* ===================================================== */
/* Source: grid-core.css */
/* ===================================================== */

/* ===================================================== */
/* Source: grid-core.css */
/* ===================================================== */

:where(.grid) {
  display: grid;

  /* spacing */
  row-gap: var(--grid-gap-y,
               var(--grid-gap, var(--grid-gap-default, var(--space-3, 1rem))));
  column-gap: var(--grid-gap-x,
                  var(--grid-gap, var(--grid-gap-default, var(--space-3, 1rem))));

  /* tracks */
  grid-template-columns: var(--grid-columns, 1fr);
  grid-template-rows: var(--grid-rows, none);

  grid-auto-flow: var(--grid-auto-flow, row);
  grid-auto-rows: var(--grid-auto-rows, var(--grid-auto-rows-default, auto));
  grid-auto-columns: var(--grid-auto-columns, auto);

  /* alignment */
  align-items: var(--grid-align-items, stretch);
  justify-items: var(--grid-justify-items, stretch);
  align-content: var(--grid-align-content, start);
  justify-content: var(--grid-justify-content, start);
}

/* Let grid children shrink instead of forcing overflow */
:where(.grid) > * {
  min-inline-size: 0;
  min-block-size: 0;
}

/* Optional: when the grid is a <ul> / <ol> */
:where(.grid.grid-reset) {
  list-style: none;
  padding: 0;
  margin: 0;
}


/* ===================================================== */
/* Source: grid-templates.css */
/* ===================================================== */

/* ===================================================== */
/* Source: grid-templates.css */
/* ===================================================== */

/* -------------------------- gaps -------------------------- */
/* All gap utilities set variables; .grid consumes them. */

.grid-gap-null { --grid-gap: 0; }
.grid-gap-xxs  { --grid-gap: var(--space-1, 0.25rem); }
.grid-gap-xs   { --grid-gap: var(--space-2, 0.5rem); }
.grid-gap-s    { --grid-gap: var(--space-3, 1rem); }
.grid-gap-m    { --grid-gap: var(--space-4, 1.5rem); }
.grid-gap-l    { --grid-gap: 2rem; }
.grid-gap-xl   { --grid-gap: 3rem; }

/* axis-specific gap (optional precision knobs) */
.grid-gap-x-null { --grid-gap-x: 0; }
.grid-gap-x-xxs  { --grid-gap-x: var(--space-1, 0.25rem); }
.grid-gap-x-xs   { --grid-gap-x: var(--space-2, 0.5rem); }
.grid-gap-x-s    { --grid-gap-x: var(--space-3, 1rem); }
.grid-gap-x-m    { --grid-gap-x: var(--space-4, 1.5rem); }
.grid-gap-x-l    { --grid-gap-x: 2rem; }
.grid-gap-x-xl   { --grid-gap-x: 3rem; }

.grid-gap-y-null { --grid-gap-y: 0; }
.grid-gap-y-xxs  { --grid-gap-y: var(--space-1, 0.25rem); }
.grid-gap-y-xs   { --grid-gap-y: var(--space-2, 0.5rem); }
.grid-gap-y-s    { --grid-gap-y: var(--space-3, 1rem); }
.grid-gap-y-m    { --grid-gap-y: var(--space-4, 1.5rem); }
.grid-gap-y-l    { --grid-gap-y: 2rem; }
.grid-gap-y-xl   { --grid-gap-y: 3rem; }


/* --------------------- fixed column counts --------------------- */
/* Use these when you want predictable spanning math (e.g., 12-col layouts). */

.grid-cols-1  { --grid-columns: repeat(1,  minmax(0, 1fr)); }
.grid-cols-2  { --grid-columns: repeat(2,  minmax(0, 1fr)); }
.grid-cols-3  { --grid-columns: repeat(3,  minmax(0, 1fr)); }
.grid-cols-4  { --grid-columns: repeat(4,  minmax(0, 1fr)); }
.grid-cols-5  { --grid-columns: repeat(5,  minmax(0, 1fr)); }
.grid-cols-6  { --grid-columns: repeat(6,  minmax(0, 1fr)); }
.grid-cols-7  { --grid-columns: repeat(7,  minmax(0, 1fr)); }
.grid-cols-8  { --grid-columns: repeat(8,  minmax(0, 1fr)); }
.grid-cols-9  { --grid-columns: repeat(9,  minmax(0, 1fr)); }
.grid-cols-10 { --grid-columns: repeat(10, minmax(0, 1fr)); }
.grid-cols-11 { --grid-columns: repeat(11, minmax(0, 1fr)); }
.grid-cols-12 { --grid-columns: repeat(12, minmax(0, 1fr)); }


/* ---------------- responsive “even tiles” templates ---------------- */
/* Auto-fit/fill are for “card grids” where items should wrap naturally. */

.grid-min-xxs { --grid-min: 10rem; }
.grid-min-xs  { --grid-min: 12rem; }
.grid-min-s   { --grid-min: 14rem; }
.grid-min-m   { --grid-min: 16rem; } /* matches --grid-min-default */
.grid-min-l   { --grid-min: 20rem; }
.grid-min-xl  { --grid-min: 24rem; }
.grid-min-2xl { --grid-min: 32rem; }

/* Creates as many columns as fit. */
.grid-auto-fit {
  --grid-columns: repeat(
    auto-fit,
    minmax(min(var(--grid-min, var(--grid-min-default, 16rem)), 100%), 1fr)
  );
}

/* Similar to auto-fit, but preserves “empty tracks” (rarely needed). */
.grid-auto-fill {
  --grid-columns: repeat(
    auto-fill,
    minmax(min(var(--grid-min, var(--grid-min-default, 16rem)), 100%), 1fr)
  );
}


/* ---------------------- flow semantics ---------------------- */
/* General flow controls */
.grid-flow-row { --grid-auto-flow: row; }
.grid-flow-col { --grid-auto-flow: column; }

/* Dense packing: can reorder visual placement vs DOM order (see notes below). */
.grid-dense     { --grid-auto-flow: row dense; }
.grid-dense-col { --grid-auto-flow: column dense; }

/* Your vocabulary: one-to-many / many-to-one */
.grid-one-to-many {
  /* A single-row strip; columns are created implicitly. */
  --grid-columns: none;
  --grid-rows: 1fr;
  --grid-auto-flow: column;

  /* Equal-width tiles by default; override via --grid-min or --grid-auto-columns */
  --grid-auto-columns: minmax(min(var(--grid-min, var(--grid-min-default, 16rem)), 100%), 1fr);
}

.grid-many-to-one {
  /* A one-column stack (grid version of a “stack”). */
  --grid-columns: 1fr;
  --grid-auto-flow: row;
}


/* ----------------------- alignment knobs ----------------------- */
/* These set variables that .grid consumes (keeps specificity low). */

.grid-items-start   { --grid-align-items: start; }
.grid-items-center  { --grid-align-items: center; }
.grid-items-end     { --grid-align-items: end; }
.grid-items-stretch { --grid-align-items: stretch; }

.grid-justify-items-start   { --grid-justify-items: start; }
.grid-justify-items-center  { --grid-justify-items: center; }
.grid-justify-items-end     { --grid-justify-items: end; }
.grid-justify-items-stretch { --grid-justify-items: stretch; }

/* One-liner convenience */
.grid-place-center {
  --grid-align-items: center;
  --grid-justify-items: center;
}


/* ===================================================== */
/* Source: grid-cells.css */
/* ===================================================== */

/* ===================================================== */
/* Source: grid-cells.css */
/* ===================================================== */

/* Enable uniform tile sizing via aspect-ratio (recommended). */
:where(.grid.grid-cells) > * {
  aspect-ratio: var(--grid-cell-aspect, var(--grid-cell-aspect-default, 1 / 1));
  overflow: var(--grid-cell-overflow, visible);
}

/* Aspect presets (set a variable; .grid-cells activates it) */
.grid-aspect-square { --grid-cell-aspect: 1 / 1; }
.grid-aspect-4x3    { --grid-cell-aspect: 4 / 3; }
.grid-aspect-3x4    { --grid-cell-aspect: 3 / 4; }
.grid-aspect-16x9   { --grid-cell-aspect: 16 / 9; }
.grid-aspect-2x1    { --grid-cell-aspect: 2 / 1; }
.grid-aspect-1x2    { --grid-cell-aspect: 1 / 2; }

/* Overflow policies for aspect tiles */
.grid-cells-overflow-visible { --grid-cell-overflow: visible; }
.grid-cells-overflow-hidden  { --grid-cell-overflow: hidden; }
.grid-cells-overflow-scroll  { --grid-cell-overflow: auto; }


/* Alternative: fixed implicit row sizes (forces equal heights even without aspect-ratio). */
.grid-auto-rows-xxs { --grid-auto-rows: 6rem; }
.grid-auto-rows-xs  { --grid-auto-rows: 8rem; }
.grid-auto-rows-s   { --grid-auto-rows: 10rem; }
.grid-auto-rows-m   { --grid-auto-rows: 12rem; }
.grid-auto-rows-l   { --grid-auto-rows: 16rem; }
.grid-auto-rows-xl  { --grid-auto-rows: 20rem; }
.grid-auto-rows-2xl { --grid-auto-rows: 24rem; }

/*
  Tempting but conditional:
  - This only produces “equal height rows” if the grid container has a definite block-size.
  - In normal document flow (height is "auto"), fr-based rows behave like content-sized rows.
*/
.grid-auto-rows-equal { --grid-auto-rows: minmax(0, 1fr); }


/* ===================================================== */
/* Source: grid-spans.css */
/* ===================================================== */

/* ===================================================== */
/* Source: grid-spans.css */
/* ===================================================== */

/* Column spans (apply to individual grid children) */
.grid-span-full { grid-column: 1 / -1; }

.grid-span-1  { grid-column: span 1; }
.grid-span-2  { grid-column: span 2; }
.grid-span-3  { grid-column: span 3; }
.grid-span-4  { grid-column: span 4; }
.grid-span-5  { grid-column: span 5; }
.grid-span-6  { grid-column: span 6; }
.grid-span-7  { grid-column: span 7; }
.grid-span-8  { grid-column: span 8; }
.grid-span-9  { grid-column: span 9; }
.grid-span-10 { grid-column: span 10; }
.grid-span-11 { grid-column: span 11; }
.grid-span-12 { grid-column: span 12; }

/* Row spans (less common, but useful for “featured” tiles) */
.grid-row-span-1 { grid-row: span 1; }
.grid-row-span-2 { grid-row: span 2; }
.grid-row-span-3 { grid-row: span 3; }
.grid-row-span-4 { grid-row: span 4; }

/* Self-alignment utilities (apply to individual grid children) */
.grid-self-start   { align-self: start; }
.grid-self-center  { align-self: center; }
.grid-self-end     { align-self: end; }
.grid-self-stretch { align-self: stretch; }

.grid-justify-self-start   { justify-self: start; }
.grid-justify-self-center  { justify-self: center; }
.grid-justify-self-end     { justify-self: end; }
.grid-justify-self-stretch { justify-self: stretch; }


/* ===================================================== */
/* Source: clusters.css */
/* ===================================================== */

/* src/lib/shared/css/clusters.css */
/* ===================================================== */
/* cluster.css */
/* Composable “cluster” utilities (flex row that wraps)   */
/* Pattern: variable setters + core consumer (low spec)   */
/* ===================================================== */

/* -------------------------- tokens -------------------------- */
/* Defaults kept conservative; override via utility classes or inline vars. */
:root {
  --cluster-gap-default: var(--space-2, 0.5rem);
  --cluster-align-default: center;
  --cluster-justify-default: flex-start;
  --cluster-wrap-default: wrap;
  --cluster-direction-default: row;
  --cluster-display-default: flex;
}

/* --------------------------- core --------------------------- */
:where(.cluster) {
  display: var(--cluster-display, var(--cluster-display-default));
  flex-direction: var(--cluster-direction, var(--cluster-direction-default));
  flex-wrap: var(--cluster-wrap, var(--cluster-wrap-default));

  /* Gap API:
     - set --cluster-gap for uniform spacing
     - optionally override per-axis with --cluster-gap-x / --cluster-gap-y */
  row-gap: var(--cluster-gap-y, var(--cluster-gap, var(--cluster-gap-default)));
  column-gap: var(--cluster-gap-x, var(--cluster-gap, var(--cluster-gap-default)));

  align-items: var(--cluster-align, var(--cluster-align-default));
  justify-content: var(--cluster-justify, var(--cluster-justify-default));
}

/* Let children shrink instead of forcing overflow */
:where(.cluster) > * {
  min-inline-size: 0;
}

/* Optional: when cluster is a <ul> / <ol> */
:where(.cluster.cluster-reset) {
  list-style: none;
  padding: 0;
  margin: 0;
}

/* -------------------------- display ------------------------- */
.cluster-inline { --cluster-display: inline-flex; }

/* ------------------------- direction ------------------------ */
.cluster-row { --cluster-direction: row; }
.cluster-col { --cluster-direction: column; }

/* -------------------------- wrapping ------------------------ */
.cluster-wrap         { --cluster-wrap: wrap; }
.cluster-nowrap       { --cluster-wrap: nowrap; }
.cluster-wrap-reverse { --cluster-wrap: wrap-reverse; }

/* ---------------------------- gaps -------------------------- */
/* mirrors your grid gap vocabulary */
.cluster-gap-null { --cluster-gap: 0; }
.cluster-gap-xxs  { --cluster-gap: var(--space-1, 0.25rem); }
.cluster-gap-xs   { --cluster-gap: var(--space-2, 0.5rem); }
.cluster-gap-s    { --cluster-gap: var(--space-3, 1rem); }
.cluster-gap-m    { --cluster-gap: var(--space-4, 1.5rem); }
.cluster-gap-l    { --cluster-gap: 2rem; }
.cluster-gap-xl   { --cluster-gap: 3rem; }

/* axis-specific gap (precision knobs) */
.cluster-gap-x-null { --cluster-gap-x: 0; }
.cluster-gap-x-xxs  { --cluster-gap-x: var(--space-1, 0.25rem); }
.cluster-gap-x-xs   { --cluster-gap-x: var(--space-2, 0.5rem); }
.cluster-gap-x-s    { --cluster-gap-x: var(--space-3, 1rem); }
.cluster-gap-x-m    { --cluster-gap-x: var(--space-4, 1.5rem); }
.cluster-gap-x-l    { --cluster-gap-x: 2rem; }
.cluster-gap-x-xl   { --cluster-gap-x: 3rem; }

.cluster-gap-y-null { --cluster-gap-y: 0; }
.cluster-gap-y-xxs  { --cluster-gap-y: var(--space-1, 0.25rem); }
.cluster-gap-y-xs   { --cluster-gap-y: var(--space-2, 0.5rem); }
.cluster-gap-y-s    { --cluster-gap-y: var(--space-3, 1rem); }
.cluster-gap-y-m    { --cluster-gap-y: var(--space-4, 1.5rem); }
.cluster-gap-y-l    { --cluster-gap-y: 2rem; }
.cluster-gap-y-xl   { --cluster-gap-y: 3rem; }

/* -------------------------- alignment ------------------------ */
.cluster-items-start   { --cluster-align: flex-start; }
.cluster-items-center  { --cluster-align: center; }
.cluster-items-end     { --cluster-align: flex-end; }
.cluster-items-stretch { --cluster-align: stretch; }

.cluster-justify-start   { --cluster-justify: flex-start; }
.cluster-justify-center  { --cluster-justify: center; }
.cluster-justify-end     { --cluster-justify: flex-end; }
.cluster-justify-between { --cluster-justify: space-between; }
.cluster-justify-around  { --cluster-justify: space-around; }
.cluster-justify-evenly  { --cluster-justify: space-evenly; }

/* one-liner convenience */
.cluster-place-center {
  --cluster-align: center;
  --cluster-justify: center;
}