@import url('./design-system.css');

/* Shared reading layout for legal and account-help pages. */
    * {
      box-sizing: border-box;
    }

    body {
      max-width: 900px;
      margin: 0 auto;
      padding: 32px 20px 64px;
      background: var(--qbit-bg);
      color: var(--qbit-text);
      font-family: var(--qbit-font);
      font-size: 14px;
      line-height: 1.5;
    }

    h1,
    h2,
    h3 {
      line-height: 1.25;
    }

    h1 {
      margin-bottom: 8px;
    }

    h2 {
      margin-top: 40px;
      padding-bottom: 8px;
      border-bottom: 1px solid var(--qbit-border);
    }

    h3 {
      margin-top: 24px;
    }

    a {
      color: var(--qbit-link);
    }

    li {
      margin-bottom: 8px;
    }

    .meta,
    .note {
      color: var(--qbit-text-muted);
    }

    .summary,
    .notice,
    .critical {
      padding: 16px 18px;
      border: 1px solid var(--qbit-border);
      border-left: 4px solid var(--qbit-secondary-text);
      border-radius: 8px;
      background: var(--qbit-input);
    }

    .critical {
      border-left-color: var(--qbit-warning);
    }

    nav ul {
      columns: 2;
      padding-left: 22px;
    }

    @media (max-width: 640px) {
      nav ul {
        columns: 1;
      }
    }
  
.step { margin-bottom: 24px; }

@media (prefers-color-scheme: dark) {
  body {
    color-scheme: dark;
    --qbit-bg: var(--qbit-ui-dark-bg);
    --qbit-input: var(--qbit-ui-dark-input);
    --qbit-text: var(--qbit-ui-dark-text);
    --qbit-text-muted: var(--qbit-ui-dark-muted);
    --qbit-border: var(--qbit-ui-dark-border);
    --qbit-link: var(--qbit-primary);
    --qbit-secondary-text: var(--qbit-secondary);
    --qbit-warning: #d29922;
  }
}