/* Stilar för guidesidan (track-applications.html). */

    /* Skip-länk — samma som på startsidan */
    .skip-link {
      position: absolute; left: 12px; top: -60px; z-index: 1000;
      background: #f6c177; color: #191724;
      padding: 10px 18px; border-radius: 0 0 8px 8px;
      font-weight: 600; text-decoration: none;
      transition: top 0.2s;
    }
    .skip-link:focus { top: 0; }
  /* Menyn är position:fixed (från index.css) och täcker innehållet utan
     denna padding. 80px = ungefär nav-höjden (16px padding × 2 + logotyp). */
  main { padding-top: 80px; }
  .article { max-width: 720px; margin: 0 auto; }
  .article-meta {
    font-family: 'JetBrains Mono', monospace; font-size: 0.78rem;
    color: var(--text-dim); margin-bottom: 14px;
  }
  .article h1 {
    font-size: 2.6rem; font-weight: 800; line-height: 1.15;
    letter-spacing: -0.02em; margin-bottom: 20px; color: var(--text);
  }
  .article .lead {
    font-size: 1.12rem; color: var(--text-muted); line-height: 1.75;
    margin-bottom: 44px; padding-bottom: 32px;
    border-bottom: 1px solid var(--border);
  }
  .article h2 {
    font-size: 1.5rem; font-weight: 700; color: var(--text);
    margin: 48px 0 16px; letter-spacing: -0.01em;
  }
  .article h3 {
    font-size: 1.08rem; font-weight: 600; color: var(--text);
    margin: 30px 0 10px;
  }
  .article p {
    color: var(--text-muted); font-size: 1rem; line-height: 1.8; margin-bottom: 18px;
  }
  .article ul { margin: 0 0 20px; padding-left: 0; list-style: none; }
  .article ul li {
    color: var(--text-muted); font-size: 1rem; line-height: 1.75;
    padding-left: 26px; margin-bottom: 12px; position: relative;
  }
  .article ul li::before {
    content: '—'; position: absolute; left: 0; color: var(--amber-text);
    font-family: 'JetBrains Mono', monospace;
  }
  .article strong { color: var(--text); font-weight: 600; }
  /* Undanta knapparna — annars skriver den här regeln över deras egna färger
     (.article a har högre specificitet än .btn-primary), vilket ger amber text
     på amber bakgrund. */
  /* --amber-text: guld (--amber) klarar bara 1,56:1 som text i ljust läge. */
  .article a:not(.btn-primary):not(.btn-secondary) { color: var(--amber-text); }
  .callout {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-left: 3px solid var(--purple);
    border-radius: 10px; padding: 20px 24px; margin: 32px 0;
  }
  .callout p { margin: 0; font-size: 0.95rem; }
  .breadcrumb {
    font-family: 'JetBrains Mono', monospace; font-size: 0.78rem;
    margin-bottom: 40px;
  }
  .breadcrumb a { color: var(--text-dim); text-decoration: none; }
  .breadcrumb a:hover { color: var(--amber-hover); }
  @media (max-width: 600px) {
    .article h1 { font-size: 1.9rem; }
    .article h2 { font-size: 1.25rem; margin-top: 38px; }
    .article .lead { font-size: 1rem; margin-bottom: 32px; }
  }