/* Page-specific styles for /verktoy/regelverk-sjekk.html. Shared foundations live in /v2/. */

    .scope-wrap { padding: var(--s5) 0 var(--s8); }
    .scope-intro { max-width: 64ch; font-size: 1.05rem; line-height: 1.75; color: var(--td-med); margin-bottom: var(--s4); }
    .scope-card { background: var(--dark-2); border: 1px solid var(--bd-dark); border-radius: var(--r3); padding: var(--s5); max-width: 760px; }
    .scope-q-label { font-size: 1.05rem; font-weight: 700; color: var(--td-hi); margin-bottom: var(--s1); letter-spacing: -.01em; }
    .scope-q-help { font-size: .85rem; color: var(--td-lo); margin-bottom: var(--s3); line-height: 1.5; }
    .scope-opts { display: flex; flex-direction: column; gap: .5rem; }
    .scope-opt {
      display: flex; align-items: flex-start; gap: .65rem; padding: .8rem 1rem;
      border: 1.5px solid var(--bd-dark); border-radius: var(--r2); cursor: pointer;
      font-size: .92rem; color: var(--td-med); transition: border-color .15s, background .15s, color .15s;
    }
    .scope-opt:hover { border-color: color-mix(in srgb, var(--cream-0) 25%, transparent); color: var(--td-hi); background: color-mix(in srgb, var(--cream-0) 3%, transparent); }
    .scope-opt input { margin-top: .2rem; accent-color: var(--blue); flex-shrink: 0; width: 1.05rem; height: 1.05rem; }
    .scope-opt.checked { border-color: var(--blue); background: color-mix(in srgb, var(--blue) 8%, transparent); color: var(--td-hi); }
    .scope-actions { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s4); align-items: center; }

    .scope-result { display: none; margin-top: var(--s4); }
    .scope-result.show { display: block; }
    .scope-result h2 { font-size: 1.4rem; font-weight: 800; letter-spacing: -.02em; color: var(--td-hi); margin-bottom: var(--s1); }
    .scope-result .res-sub { color: var(--td-med); margin-bottom: var(--s3); }
    .res-card { display: flex; gap: var(--s3); align-items: flex-start; padding: var(--s3); border: 1px solid var(--bd-dark); border-radius: var(--r2); margin-bottom: .6rem; background: var(--dark-2); }
    .res-card .res-acr { font-family: var(--mono); font-weight: 700; font-size: .95rem; color: var(--td-hi); min-width: 92px; flex-shrink: 0; }
    .res-card .res-body { flex: 1; }
    .res-card .res-body p { color: var(--td-med); font-size: .9rem; line-height: 1.6; margin: .2rem 0 .4rem; }
    .res-chip { display: inline-block; font-family: var(--mono); font-size: .58rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; padding: .15rem .5rem; border-radius: var(--r5); margin-left: .5rem; vertical-align: middle; }
    .res-chip.live { color: var(--green); background: color-mix(in srgb, var(--green) 12%, transparent); }
    .res-chip.pending { color: #E0A94A; background: rgba(217,138,61,.14); }
    .res-chip.standard { color: #C2A86A; background: rgba(194,168,106,.14); }
    .res-links { font-size: .85rem; }
    .res-links a { color: var(--blue); text-decoration: none; border-bottom: 1px solid transparent; }
    .res-links a:hover { border-bottom-color: var(--blue); }
    .res-links .sep { opacity: .3; margin: 0 .4rem; }

    .scope-cta { margin-top: var(--s5); background: var(--dark-2); border: 1px solid var(--bd-dark); border-radius: var(--r3); padding: var(--s4); max-width: 760px; text-align: center; }
    .scope-cta h3 { font-size: 1.2rem; font-weight: 700; margin-bottom: var(--s2); }
    .scope-cta p { color: var(--td-med); line-height: 1.7; margin: 0 auto var(--s3); max-width: 52ch; }
    .scope-cta-actions { display: flex; flex-wrap: wrap; gap: var(--s2); justify-content: center; }
    .scope-disclaimer { font-size: .8rem; color: var(--td-lo); margin-top: var(--s3); max-width: 70ch; line-height: 1.6; }

    @media (prefers-color-scheme: light) {
      .scope-intro { color: var(--tl-med); }
      .scope-card, .scope-cta, .res-card { background: var(--cream-0); border-color: color-mix(in srgb, var(--shadow-color) 8%, transparent); }
      .scope-q-label { color: var(--tl-hi); } .scope-q-help { color: var(--tl-lo); }
      .scope-opt { border-color: color-mix(in srgb, var(--shadow-color) 14%, transparent); color: var(--tl-med); }
      .scope-opt:hover { border-color: color-mix(in srgb, var(--shadow-color) 28%, transparent); color: var(--tl-hi); background: color-mix(in srgb, var(--shadow-color) 3%, transparent); }
      .scope-opt.checked { border-color: var(--blue-on-light); background: color-mix(in srgb, var(--blue-on-light) 8%, transparent); color: var(--tl-hi); }
      .scope-result h2 { color: var(--tl-hi); } .scope-result .res-sub { color: var(--tl-med); }
      .res-card .res-acr { color: var(--tl-hi); } .res-card .res-body p { color: var(--tl-med); }
      .res-links a { color: var(--blue-on-light); }
      .scope-cta p { color: var(--tl-med); } .scope-disclaimer { color: var(--tl-lo); }
    }