/* Tokens come from miles.css, a copy of the Miles brand kit's tokens/miles.css. Component styles
   written with css() land in the rmx layer and override the defaults in base. */
@layer base, rmx, app;

:root {
  /* The page headline runs from the theme's xl mark on a phone to xxl on a wide screen. */
  --size-display: clamp(var(--size-xl), 1.885rem + 1.62vw, var(--size-xxl));
  --line-display: calc(var(--size-display) + var(--space-xxs));
  --page-gutter: clamp(var(--space-m), 0.5rem + 3vw, var(--space-xxl));
  --space-section: clamp(var(--space-xxl), 1.5rem + 6vw, calc(var(--space-xxl) * 2));
}

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

  :root {
    color-scheme: light;
    scrollbar-gutter: stable;
    text-wrap: pretty;
    overflow-wrap: break-word;
    font-synthesis: none;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: transparent;
  }

  /* What is hidden stays hidden, whatever a component says of how it is laid out. */
  [hidden] {
    display: none !important;
  }

  body {
    margin: 0;
    min-height: 100svh;
    background: var(--miles-cream);
    color: var(--miles-burgundy);
    font-family: var(--font-ui);
    font-weight: var(--weight-ui-regular);
    font-size: var(--size-m);
    line-height: var(--line-m);
    letter-spacing: var(--letter-spacing-m);
  }

  h1,
  h2,
  h3,
  h4 {
    margin: 0;
    font-family: var(--font-brand);
    font-weight: var(--weight-brand-regular);
    text-wrap: balance;
  }

  p,
  dl,
  dd {
    margin: 0;
  }

  img,
  svg,
  video {
    display: block;
    max-width: 100%;
    height: auto;
  }

  input,
  textarea,
  select {
    font-size: max(16px, 1rem);
  }

  button,
  a,
  [role='button'] {
    touch-action: manipulation;
  }

  button,
  [role='button'] {
    user-select: none;
    -webkit-user-select: none;
  }

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

@layer app {
  /* A link that leads out of the site opens in a tab of its own, and says so with an arrow after
     its words: every such link is written `rel="noreferrer" target="_blank"`, and no other link
     is (`leadsOut` in app/ui/web-page.ts). The arrow is Lucide's arrow-up-right (ISC licence,
     © Lucide Contributors), the pack the theme falls back to for the controls of an interface,
     in the link's own colour on any ground. It is drawn in the padding of a word joiner, so it
     never stands alone at the start of a line, and stands outside the underline. A screen reader
     says in words what it means. It is no text of the page's: what someone marks in a module is
     looked for in words the arrow is not among. */
  a[target='_blank'][rel~='noreferrer']::after {
    content: '\2060';
    content: '\2060' / ' (åpnes i ny fane)';
    padding-inline-start: 0.68em;
    margin-inline-end: 0.05em;
    background: currentColor;
    /* Lucide's 24 by 24, cut down to the arrow and its round ends. */
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='5.75 5.75 12.5 12.5' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 7h10v10M7 17 17 7'/%3E%3C/svg%3E")
      right center / 0.5em no-repeat;
  }
}

/* The places in a module's text that comments on the page are about. Painted by
   app/actions/courses/public/comment-form.tsx without changing the text itself. */
::highlight(kommentar) {
  background-color: var(--miles-yellow);
  color: inherit;
}

/* The place whose comment the pointer or the focus is on. */
::highlight(kommentar-aktiv) {
  background-color: var(--miles-burgundy);
  color: var(--miles-cream);
}

/* When the answer to a quiz's question comes up on the wall, each answer's tile is filled by how
   many chose it, from nothing (app/ui/quiz-slide.tsx). */
@keyframes kurs-quiz-share {
  from {
    inline-size: 0;
  }
}