/* Generated by Intent v0.2.0 (intent-css) — https://github.com/dataswarmproject/intent-css
 * Semantic roles, relationship spacing, OKLCH theming. Do not edit by hand: run `intent build`.
 * Emitted: 42 roles in use. */

@layer intent.reset, intent.tokens, intent.roles;

@layer intent.reset {
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  background: var(--in-bg); color: var(--in-text);
  font-family: var(--in-font-ui); font-size: var(--in-text-body);
  line-height: 1.55; min-height: 100svh; -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, h5, h6, p { overflow-wrap: break-word; }
img, picture, video, canvas, svg { display: block; max-width: 100%; }
input, button, textarea, select { font: inherit; color: inherit; }
a { color: var(--in-brand); text-underline-offset: 0.15em; text-decoration-thickness: 1px; }
a:hover { color: var(--in-brand-hover); }
code, kbd, samp, pre { font-family: var(--in-font-mono); font-size: 0.925em; }
hr { border: 0; border-top: 1px solid var(--in-line); }
:focus-visible { outline: 2px solid var(--in-brand); outline-offset: 2px; }
::selection { background: var(--in-brand-soft); color: var(--in-on-brand-soft); }
@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;
  }
}
}

@layer intent.tokens {
:root {
  color-scheme: light dark;
  --in-bg: light-dark(oklch(97.5% 0.012 264), oklch(15.5% 0.012 264));
  --in-surface: light-dark(oklch(99% 0.012 264), oklch(19% 0.012 264));
  --in-surface-raised: light-dark(oklch(100% 0.012 264), oklch(22.5% 0.012 264));
  --in-surface-sunken: light-dark(oklch(94.5% 0.012 264), oklch(12.5% 0.012 264));
  --in-surface-overlay: light-dark(oklch(100% 0.012 264), oklch(26% 0.012 264));
  --in-line: light-dark(oklch(88.5% 0.012 264), oklch(31% 0.012 264));
  --in-line-strong: light-dark(oklch(78% 0.012 264), oklch(44% 0.012 264));
  --in-text: light-dark(oklch(21% 0.012 264), oklch(93% 0.012 264));
  --in-text-muted: light-dark(oklch(43% 0.012 264), oklch(73% 0.012 264));
  --in-text-faint: light-dark(oklch(55% 0.012 264), oklch(59% 0.012 264));
  --in-brand: light-dark(oklch(49% 0.17 264), oklch(74% 0.15 264));
  --in-brand-hover: light-dark(oklch(44% 0.17 264), oklch(79% 0.15 264));
  --in-on-brand: light-dark(oklch(98.5% 0.02 264), oklch(22% 0.045 264));
  --in-brand-soft: light-dark(oklch(93% 0.051 264), oklch(31% 0.0595 264));
  --in-brand-soft-hover: light-dark(oklch(90% 0.0595 264), oklch(35% 0.068 264));
  --in-on-brand-soft: light-dark(oklch(30% 0.13 264), oklch(93% 0.0425 264));
  --in-info: light-dark(oklch(49% 0.13 235), oklch(70% 0.13 235));
  --in-info-hover: light-dark(oklch(44% 0.13 235), oklch(75% 0.13 235));
  --in-on-info: light-dark(oklch(98.5% 0.0156 235), oklch(22% 0.039 235));
  --in-info-soft: light-dark(oklch(94.5% 0.045 235), oklch(28% 0.055 235));
  --in-on-info-soft: light-dark(oklch(29% 0.09 235), oklch(93% 0.05 235));
  --in-success: light-dark(oklch(49% 0.13 152), oklch(70% 0.13 152));
  --in-success-hover: light-dark(oklch(44% 0.13 152), oklch(75% 0.13 152));
  --in-on-success: light-dark(oklch(98.5% 0.0156 152), oklch(22% 0.039 152));
  --in-success-soft: light-dark(oklch(94.5% 0.045 152), oklch(28% 0.055 152));
  --in-on-success-soft: light-dark(oklch(29% 0.09 152), oklch(93% 0.05 152));
  --in-warn: light-dark(oklch(66% 0.13 75), oklch(78% 0.13 75));
  --in-warn-hover: light-dark(oklch(71% 0.13 75), oklch(83% 0.13 75));
  --in-on-warn: light-dark(oklch(22% 0.039 75), oklch(22% 0.039 75));
  --in-warn-soft: light-dark(oklch(94.5% 0.045 75), oklch(28% 0.055 75));
  --in-on-warn-soft: light-dark(oklch(29% 0.09 75), oklch(93% 0.05 75));
  --in-danger: light-dark(oklch(49% 0.16 25), oklch(70% 0.14 25));
  --in-danger-hover: light-dark(oklch(44% 0.16 25), oklch(75% 0.14 25));
  --in-on-danger: light-dark(oklch(98.5% 0.0192 25), oklch(22% 0.042 25));
  --in-danger-soft: light-dark(oklch(94.5% 0.045 25), oklch(28% 0.055 25));
  --in-on-danger-soft: light-dark(oklch(29% 0.09 25), oklch(93% 0.05 25));
  --in-radius: 0.625rem;
  --in-radius-control: calc(0.625rem * 0.667);
  --in-gap-compact: 0.464rem;
  --in-gap-related: 0.75rem;
  --in-gap-separate: 1.963rem;
  --in-gap-sectioned: 5.14rem;
  --in-text-caption: 0.758rem;
  --in-text-body: 1rem;
  --in-text-heading: 1.742rem;
  --in-text-title: 2.3rem;
  --in-text-display: 3.036rem;
  --in-text-hero: clamp(3.036rem, 6.5vw + 0.6rem, 5.29rem);
  --in-font-ui: "Inter", system-ui, -apple-system, sans-serif;
  --in-font-display: "Schibsted Grotesk", system-ui, sans-serif;
  --in-font-mono: "JetBrains Mono", ui-monospace, monospace;
  --in-shadow: 0 1px 2px light-dark(oklch(13% 0.024 264 / 0.06), oklch(13% 0.024 264 / 0.5)), 0 3px 10px light-dark(oklch(13% 0.024 264 / 0.05), oklch(13% 0.024 264 / 0.4));
  --in-shadow-lg: 0 2px 4px light-dark(oklch(13% 0.024 264 / 0.07), oklch(13% 0.024 264 / 0.55)), 0 12px 32px light-dark(oklch(13% 0.024 264 / 0.09), oklch(13% 0.024 264 / 0.5));
}
}

@layer intent.roles {
.surface { background: var(--in-surface); color: var(--in-text); }

.surface-raised { background: var(--in-surface-raised); color: var(--in-text); border: 1px solid var(--in-line); box-shadow: var(--in-shadow); }

.surface-sunken { background: var(--in-surface-sunken); color: var(--in-text); }

.surface-overlay { background: var(--in-surface-overlay); color: var(--in-text); border: 1px solid var(--in-line); box-shadow: var(--in-shadow-lg); }

.card { background: var(--in-surface-raised); color: var(--in-text); border: 1px solid var(--in-line); border-radius: var(--in-radius); padding: var(--in-gap-separate); box-shadow: var(--in-shadow); }

.action-primary { display: inline-flex; align-items: center; justify-content: center; gap: var(--in-gap-compact);
  padding: 0.55em 1.1em; border: 1px solid transparent; border-radius: var(--in-radius-control);
  font-weight: 600; font-size: var(--in-text-body); line-height: 1.2; text-decoration: none;
  cursor: pointer; user-select: none;
  transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease, translate 120ms ease; background: var(--in-brand); color: var(--in-on-brand); }
.action-primary:hover { background: var(--in-brand-hover); }
.action-primary:active { translate: 0 1px; }
.action-primary:disabled { opacity: 0.55; cursor: not-allowed; }

.action-secondary { display: inline-flex; align-items: center; justify-content: center; gap: var(--in-gap-compact);
  padding: 0.55em 1.1em; border: 1px solid transparent; border-radius: var(--in-radius-control);
  font-weight: 600; font-size: var(--in-text-body); line-height: 1.2; text-decoration: none;
  cursor: pointer; user-select: none;
  transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease, translate 120ms ease; background: var(--in-brand-soft); color: var(--in-on-brand-soft); }
.action-secondary:hover { background: var(--in-brand-soft-hover); }
.action-secondary:active { translate: 0 1px; }
.action-secondary:disabled { opacity: 0.55; cursor: not-allowed; }

.action-quiet { display: inline-flex; align-items: center; justify-content: center; gap: var(--in-gap-compact);
  padding: 0.55em 1.1em; border: 1px solid transparent; border-radius: var(--in-radius-control);
  font-weight: 600; font-size: var(--in-text-body); line-height: 1.2; text-decoration: none;
  cursor: pointer; user-select: none;
  transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease, translate 120ms ease; background: transparent; color: var(--in-brand); }
.action-quiet:hover { background: var(--in-brand-soft); color: var(--in-on-brand-soft); }
.action-quiet:active { translate: 0 1px; }
.action-quiet:disabled { opacity: 0.55; cursor: not-allowed; }

.action-danger { display: inline-flex; align-items: center; justify-content: center; gap: var(--in-gap-compact);
  padding: 0.55em 1.1em; border: 1px solid transparent; border-radius: var(--in-radius-control);
  font-weight: 600; font-size: var(--in-text-body); line-height: 1.2; text-decoration: none;
  cursor: pointer; user-select: none;
  transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease, translate 120ms ease; background: var(--in-danger); color: var(--in-on-danger); }
.action-danger:hover { background: var(--in-danger-hover); }
.action-danger:active { translate: 0 1px; }
.action-danger:disabled { opacity: 0.55; cursor: not-allowed; }

.text-hero { font-family: var(--in-font-display); font-size: var(--in-text-hero); font-weight: 800; line-height: 0.98; letter-spacing: -0.03em; text-wrap: balance; }

.text-display { font-family: var(--in-font-display); font-size: var(--in-text-display); font-weight: 750; line-height: 1.05; letter-spacing: -0.02em; text-wrap: balance; }

.text-title { font-family: var(--in-font-display); font-size: var(--in-text-title); font-weight: 700; line-height: 1.12; letter-spacing: -0.015em; text-wrap: balance; }

.text-heading { font-size: var(--in-text-heading); font-weight: 650; line-height: 1.25; letter-spacing: -0.01em; }

.text-body { font-size: var(--in-text-body); font-weight: 400; line-height: 1.55; }

.text-caption { font-size: var(--in-text-caption); font-weight: 500; line-height: 1.35; letter-spacing: 0.01em; }

.eyebrow { font-size: var(--in-text-caption); font-weight: 600; line-height: 1.35; letter-spacing: 0.09em; text-transform: uppercase; color: var(--in-text-muted); }

.muted { color: var(--in-text-muted); }

.faint { color: var(--in-text-faint); }

.stack-related { display: flex; flex-direction: column; gap: var(--in-gap-related); }

.stack-separate { display: flex; flex-direction: column; gap: var(--in-gap-separate); }

.stack-sectioned { display: flex; flex-direction: column; gap: var(--in-gap-sectioned); }

.row-related { display: flex; align-items: center; gap: var(--in-gap-related); }

.row-separate { display: flex; align-items: center; gap: var(--in-gap-separate); }

.grid-collection { display: grid; gap: var(--in-gap-separate); grid-template-columns: repeat(auto-fill, minmax(min(17rem, 100%), 1fr)); }

.adaptive { container-type: inline-size; }

.wrap { flex-wrap: wrap; }

.spread { justify-content: space-between; }

.full { width: 100%; }

.measure { max-width: 65ch; }

.inset-compact { padding: var(--in-gap-compact); }

.inset-related { padding: var(--in-gap-related); }

.inset-separate { padding: var(--in-gap-separate); }

.note-info {
  display: flex; align-items: flex-start; gap: var(--in-gap-related);
  padding: var(--in-gap-related); border-radius: var(--in-radius-control);
  background: var(--in-info-soft); color: var(--in-on-info-soft);
  border-inline-start: 3px solid var(--in-info);
}

.note-success {
  display: flex; align-items: flex-start; gap: var(--in-gap-related);
  padding: var(--in-gap-related); border-radius: var(--in-radius-control);
  background: var(--in-success-soft); color: var(--in-on-success-soft);
  border-inline-start: 3px solid var(--in-success);
}

.note-warn {
  display: flex; align-items: flex-start; gap: var(--in-gap-related);
  padding: var(--in-gap-related); border-radius: var(--in-radius-control);
  background: var(--in-warn-soft); color: var(--in-on-warn-soft);
  border-inline-start: 3px solid var(--in-warn);
}

.note-danger {
  display: flex; align-items: flex-start; gap: var(--in-gap-related);
  padding: var(--in-gap-related); border-radius: var(--in-radius-control);
  background: var(--in-danger-soft); color: var(--in-on-danger-soft);
  border-inline-start: 3px solid var(--in-danger);
}

.field { display: block; width: 100%; background: var(--in-surface); color: var(--in-text); border: 1px solid var(--in-line-strong); border-radius: var(--in-radius-control); padding: 0.55em 0.8em; transition: border-color 120ms ease, box-shadow 120ms ease; }
.field::placeholder { color: var(--in-text-faint); }
.field:focus-visible { outline: none; border-color: var(--in-brand); box-shadow: 0 0 0 3px var(--in-brand-soft); }

.chip { display: inline-flex; align-items: center; gap: var(--in-gap-compact); padding: 0.3em 0.85em; border: 1px solid var(--in-line); border-radius: 999px; background: var(--in-surface-sunken); font-size: var(--in-text-caption); font-weight: 500; line-height: 1.4; }

.divider { border: 0; border-top: 1px solid var(--in-line); width: 100%; }

.selected { border-color: var(--in-brand); background: var(--in-brand-soft); color: var(--in-on-brand-soft); }

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

@container (max-width: 34rem) {
  .row-related.collapse, .row-separate.collapse { flex-direction: column; align-items: stretch; }
}
}