/* Vendored from ~/.agents/design/kit/components/base.css on 2026-11-08. Do not edit here: change the kit, then re-copy. Project overrides live in ../vanity.css. */
/* Base layer: reset plus the Osmo snippets worth having on every site.
   Native cascade layers, same order as Tailwind v4, so it works with or without Tailwind. */

@layer base, components, utilities;

@layer base {
  *,
  ::before,
  ::after {
    box-sizing: border-box;
  }

  /* dialog keeps its UA margin: auto, which is what centers a modal */
  *:where(:not(dialog)) {
    margin: 0;
  }

  html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    /* lets height/width transition to auto (Chromium); ignored elsewhere */
    interpolate-size: allow-keywords;
    /* a modal's scroll lock never shifts the page */
    scrollbar-gutter: stable;
  }

  body {
    min-height: 100svh;
    background: var(--ground);
    color: var(--text-body);
    font-family: var(--font-sans);
    line-height: var(--leading-body);
  }

  /* Osmo: Browser Font Smoothing, scoped to light-on-dark where it helps */
  :root:not(.light, [data-theme="light"]),
  .dark,
  [data-theme="dark"] {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

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

  img,
  video {
    height: auto;
  }

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

  /* Osmo: Limit Resize on Textarea */
  textarea {
    resize: vertical;
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    color: var(--text-strong);
    text-wrap: balance;
    overflow-wrap: break-word;
  }

  h1,
  h2,
  h3 {
    font-family: var(--font-display);
  }

  p,
  li,
  figcaption {
    text-wrap: pretty;
    overflow-wrap: break-word;
  }

  /* Osmo: Style Text Selection Color */
  ::selection {
    background: var(--accent);
    color: var(--accent-ink);
  }

  :focus-visible {
    outline: 2px solid var(--focus);
    outline-offset: 2px;
  }

  /* Osmo: Anchor Links Target Offset. Clears a sticky header on every #anchor jump. */
  [id] {
    scroll-margin-top: var(--scroll-offset);
  }

  @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 components {
  /* Osmo scaling containers. Not named .container: Tailwind owns that class. */
  .wrap,
  .wrap-md,
  .wrap-sm {
    width: 100%;
    max-width: var(--size-container);
    margin-inline: auto;
    padding-inline: var(--gutter);
  }

  .wrap-md {
    max-width: calc(var(--size-container) * 0.85);
  }

  .wrap-sm {
    max-width: calc(var(--size-container) * 0.7);
  }

  /* Narrow containers only make sense with room to spare; phones get the full width */
  @media screen and (max-width: 767px) {
    .wrap-md,
    .wrap-sm {
      max-width: var(--size-container);
    }
  }

  /* Osmo: Scroll Driven Header Styling. Regular styles are the scrolled look (a tone step up);
     the keyframe "from" is the top-of-page look. No JS; unsupported browsers keep the scrolled look. */
  .header-scroll {
    position: sticky;
    top: 0;
    z-index: 40;
    height: var(--header-height);
    background-color: var(--surface);
  }

  @supports (animation-timeline: scroll()) {
    .header-scroll {
      animation: header-scrolled 1ms linear both;
      animation-timeline: scroll(root);
      animation-range: 0 4rem;
    }

    @keyframes header-scrolled {
      from {
        background-color: var(--ground);
      }
    }
  }

  /* Osmo: Hover Siblings (:has :not), keyboard-safe version. Put on the list. */
  .hover-dim > * {
    transition: opacity var(--duration-base) var(--ease-out);
  }

  .hover-dim:has(> :hover, > :focus-visible) > :not(:hover, :focus-visible) {
    opacity: 0.45;
  }

  /* Square status dot; add .is-live for the ping. State words sit next to it (.live in components.css). */
  .dot {
    position: relative;
    flex: none;
    width: 0.5rem;
    height: 0.5rem;
    background: currentColor;
  }

  .dot.is-live::after {
    content: "";
    position: absolute;
    inset: 0;
    background: inherit;
    border-radius: inherit;
    animation: dot-ping calc(var(--duration-long) * 2) var(--ease-out) infinite;
  }

  @keyframes dot-ping {
    to {
      transform: scale(3);
      opacity: 0;
    }
  }

  /* Skip link: hidden until focused */
  .skip-link {
    position: fixed;
    top: var(--s-2);
    left: var(--s-2);
    z-index: 100;
    padding: var(--s-2) var(--s-3);
    border-radius: var(--radius-control);
    background: var(--primary);
    color: var(--primary-foreground);
    font-size: var(--type-body);
    font-weight: 600;
    text-decoration: none;
    transform: translateY(-200%);
  }

  .skip-link:focus-visible {
    transform: none;
  }
}

@layer utilities {
  /* Numbers: the body face with fixed-width digits (never mono) */
  .num {
    font-family: var(--font-sans);
    font-variant-numeric: tabular-nums;
  }

  /* Osmo: Hide Scrollbar, region stays scrollable */
  .no-scrollbar {
    scrollbar-width: none;
  }

  .no-scrollbar::-webkit-scrollbar {
    display: none;
  }

  /* Osmo: Solve Cut-off Letters. Put on SplitText line masks or any overflow mask. */
  .line-mask {
    padding-bottom: 0.1em;
    margin-bottom: -0.1em;
  }

  /* Osmo: Responsive Aspect Ratio (Fit viewport). Set --ratio, default 16 / 9. */
  .fit-contain {
    flex: none;
    aspect-ratio: var(--ratio, 16 / 9);
    width: min(100vw, calc(100svh * var(--ratio, 16 / 9)));
    max-width: 100vw;
    max-height: 100svh;
  }

  .fit-cover {
    flex: none;
    aspect-ratio: var(--ratio, 16 / 9);
    width: max(100vw, calc(100svh * var(--ratio, 16 / 9)));
  }

  /* Osmo: Disable User Drag (sliders, draggable media) */
  .no-drag {
    -webkit-user-drag: none;
    user-select: none;
  }
}