/* Element defaults. Layout that needs no JavaScript and no class (§33). */

@layer base {

  html {
    -webkit-text-size-adjust: 100%;
  }

  body {
    font-family: var(--font-sans);
    font-size: calc(1rem * var(--type-scale));
    line-height: 1.5;
    color: var(--text);
    background: var(--surface);
  }

  main {
    inline-size: min(100% - var(--space-8), var(--content-width));
    margin-inline: auto;
    padding-block: var(--space-8);
  }

  p, li {
    max-inline-size: var(--measure);
  }

  h1, h2, h3 {
    line-height: 1.2;
    text-wrap: balance;
  }

  a {
    color: var(--accent);
  }

  code, pre {
    font-family: var(--font-mono);
  }

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

  /* The design's checkbox: a rounded box, filled with the accent and a white
     tick when checked. Drawn on the native input, so every checkbox in the app
     gets it and keeps its keyboard and form behaviour.

     The look is !important because surfaces style "input" as a text field
     (.follow-form input, .field input) in later layers or none, and those
     rules match a checkbox too. An important declaration in a layer beats
     every normal one. Size and margin are not: a surface may set its own. */
  input[type="checkbox"] {
    appearance: none !important;
    flex: none;
    inline-size: 16px;
    block-size: 16px;
    margin: 0;
    padding: 0 !important;
    border: 1.5px solid var(--checkbox-border) !important;
    border-radius: 5px !important;
    background: var(--surface) center / 70% no-repeat !important;
    cursor: pointer;
    vertical-align: middle;

    &:checked {
      border-color: var(--accent) !important;
      background-color: var(--accent) !important;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.2l2.3 2.3 4.7-5' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
    }

    &:disabled { opacity: .5; cursor: not-allowed; }

    /* Forced colours drop the fill; let the system draw a real checkbox. */
    @media (forced-colors: active) { appearance: auto !important; }
  }

  /* A text control's ring sits ON its border, in the design's amber. Outline,
     not border-color, so the later layers that set a field's border (and its
     error state) cannot override it. */
  :is(input:not([type="checkbox"], [type="radio"], [type="file"]), textarea, select):focus-visible {
    outline-color: var(--focus-field);
    outline-offset: -1px;
  }
}