/* Skrivs av scripts/build-help.mjs. Ändra inte här. Färgerna och typsnittet är appens. */
:root {
  color-scheme: light dark;
  --canvas: #F1F4F2; --card: #FFFFFF; --text: #19201E; --text-2: #3E4845; --text-3: #6B7874; --line: #EBEFED;
  --hover: #F5F7F6; --accent: #0B6B58; --accent-hover: #09594A; --accent-text: #09594A; --tint: #EDF7F3; --chip: #EBEFED;
}
@media (prefers-color-scheme: dark) {
  :root {
    --canvas: #0C1210; --card: #161E1B; --text: #E6EDEA; --text-2: #B3C0BB; --text-3: #85938E; --line: rgba(230, 245, 238, 0.09);
    --hover: rgba(230, 245, 238, 0.03); --accent-text: #3FA286; --tint: rgba(22, 135, 107, 0.1); --chip: rgba(230, 245, 238, 0.08);
  }
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100vh; background: var(--canvas); color: var(--text); font-feature-settings: 'tnum' 1;
  font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  line-height: 1.5;
}
a { color: var(--accent-text); text-decoration: none; }
a:hover { text-decoration: underline; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
svg { flex-shrink: 0; }
.wrap { max-width: 44rem; margin: 0 auto; padding: 0 1rem; }
.bar { background: var(--card); border-bottom: 1px solid var(--line); }
.bar .wrap { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 3.5rem; }
.brand { display: flex; align-items: center; gap: 0.75rem; color: var(--text); font-weight: 600; }
.brand:hover { text-decoration: none; }
.brand img { display: block; height: 20px; width: auto; }
.brand span { color: var(--text-3); font-weight: 600; }
@media (max-width: 480px) { .brand { gap: 0.5rem; } .brand img { height: 15px; } .open { padding: 0 0.75rem; } }
.open { white-space: nowrap; min-height: 2.5rem; display: inline-flex; align-items: center; padding: 0 1rem; border-radius: 0.75rem; background: var(--accent); color: #fff; font-weight: 600; font-size: 0.9375rem; }
.open:hover { background: var(--accent-hover); text-decoration: none; }
main { padding-bottom: 3rem; }
.trail { margin: 1.25rem 0 0.75rem; font-size: 0.875rem; color: var(--text-3); }
.trail ol { display: flex; flex-wrap: wrap; gap: 0.25rem 0.5rem; margin: 0; padding: 0; list-style: none; }
.trail li:not(:last-child)::after { content: '›'; margin-left: 0.5rem; }
h1 { margin: 1.5rem 0 0; font-size: 1.5rem; line-height: 1.3; font-weight: 700; }
.trail + h1 { margin-top: 0.25rem; }
.lede { margin: 0.5rem 0 1.25rem; font-size: 0.9375rem; color: var(--text-2); }
h2.group { margin: 1.75rem 0 0.5rem; padding: 0 0.25rem; font-size: 1rem; font-weight: 700; }
.group-sub { margin: -0.25rem 0 0.5rem; padding: 0 0.25rem; font-size: 0.875rem; color: var(--text-3); }
.cards { display: grid; gap: 0.5rem; margin: 0; padding: 0; list-style: none; } /* en kolumn: med två blir titeln och raden under två rader först från 1280 och inte för alla kort */
.card, .list { background: var(--card); border-radius: 1rem; }
.list { margin: 0; padding: 0; list-style: none; overflow: hidden; }
.list > li + li { border-top: 1px solid var(--line); }
.row { display: flex; align-items: center; gap: 0.875rem; min-height: 3.5rem; padding: 0.875rem 1rem; color: var(--text); }
.row:hover { background: var(--hover); text-decoration: none; }
.row .body { flex: 1; min-width: 0; }
.row .name { display: block; font-weight: 600; }
.row .sub { display: block; font-size: 0.875rem; line-height: 1.35; color: var(--text-3); }
.row .sub.clamp { margin-top: 0.125rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.row .side { font-size: 0.875rem; color: var(--text-3); white-space: nowrap; }
.row .head { display: flex; align-items: baseline; justify-content: space-between; gap: 0.75rem; }
.row .chev { color: #C3CDC9; }
.cards .row { border-radius: 1rem; }
.glyph { display: flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; border-radius: 0.75rem; background: var(--chip); color: var(--accent-text); }
.list.numbered { counter-reset: n; }
.list.numbered .row::before { counter-increment: n; content: counter(n); display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 2rem; height: 2rem; border-radius: 9999px; background: var(--accent); color: #fff; font-size: 0.875rem; font-weight: 700; }
h2.for { display: inline-block; margin: 1rem 0 0; padding: 0.125rem 0.625rem; border-radius: 9999px; background: var(--tint); color: var(--accent-text); font-size: 0.875rem; font-weight: 600; line-height: 1.5; }
.split { margin: 1rem 0 0; font-size: 0.9375rem; color: var(--text-2); }
.split a { display: inline-block; margin: 0.25rem 0.5rem 0 0; padding: 0.25rem 0.75rem; border-radius: 9999px; background: var(--chip); color: var(--text); font-weight: 600; }
/* Chippen för delen som visas är fylld: den första utan val, annars den vars del är vald. */
main:not(:has(.part:target)) .split a:first-of-type,
main:has(#roll-admin:target) .split a[href="#roll-admin"],
main:has(#roll-office:target) .split a[href="#roll-office"],
main:has(#roll-planner:target) .split a[href="#roll-planner"],
main:has(#roll-sales:target) .split a[href="#roll-sales"],
main:has(#roll-staff:target) .split a[href="#roll-staff"] { background: var(--accent); color: #fff; }
.split a:hover { text-decoration: none; }
.part { scroll-margin-top: 8rem; }
/* Delarna ligger alla i sidan. Ett val i Välj din: (#roll-…) visar den delen, annars den första. Utan :has visas alla. */
.parts:has(.part:target) > .part:not(:target) { display: none; }
.parts:not(:has(.part:target)) > .part:not(:first-child) { display: none; }
.tldr { margin: 0.75rem 0 0; padding: 0.875rem 1rem; border-radius: 1rem; background: var(--tint); }
.tldr .label { margin: 0; font-size: 0.875rem; font-weight: 700; color: var(--accent-text); }
.tldr .text { margin: 0.25rem 0 0; font-size: 1.0625rem; line-height: 1.35; font-weight: 500; }
.needs { margin: 1rem 0 0; font-size: 0.9375rem; line-height: 1.35; color: var(--text-2); }
.needs strong { color: var(--text); }
.steps { margin: 1.25rem 0 0; padding: 0; list-style: none; counter-reset: step; }
.steps li { display: flex; align-items: flex-start; gap: 0.875rem; }
.steps li + li { margin-top: 1rem; }
.steps li::before { counter-increment: step; content: counter(step); display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 0.125rem; width: 2rem; height: 2rem; border-radius: 9999px; background: var(--accent); color: #fff; font-size: 0.875rem; font-weight: 700; }
.steps p { flex: 1; min-width: 0; margin: 0; font-size: 1.0625rem; line-height: 1.625; color: var(--text-2); }
.steps strong, .tldr strong { font-weight: 600; color: var(--text); }
.next { display: flex; align-items: center; gap: 0.75rem; margin-top: 1.5rem; padding: 0.875rem 1rem; border-radius: 1rem; background: var(--accent); color: #fff; }
.next:hover { background: var(--accent-hover); text-decoration: none; }
.next .body { flex: 1; min-width: 0; }
.next .k { display: block; font-size: 0.875rem; color: rgba(255, 255, 255, 0.85); }
.next .t { display: block; font-weight: 600; }
.more { margin-top: 1.5rem; }
.more h3 { margin: 0 0 0.5rem; padding: 0 0.25rem; font-size: 0.875rem; font-weight: 600; color: var(--text-3); }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.search { position: relative; margin: 1.25rem 0 0; }
.search svg { position: absolute; left: 0.875rem; top: 50%; transform: translateY(-50%); color: var(--text-3); pointer-events: none; }
.search input { width: 100%; height: 3rem; padding: 0 1rem 0 2.75rem; border: 0; border-radius: 0.75rem; background: var(--card); box-shadow: 0 0 0 1px var(--line); color: var(--text); font: inherit; font-size: 1rem; -webkit-appearance: none; appearance: none; }
.search input::placeholder { color: var(--text-3); }
.search input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
.search .clear { position: absolute; right: 0.5rem; top: 50%; transform: translateY(-50%); display: flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; padding: 0; border: 0; border-radius: 0.5rem; background: transparent; color: var(--text-3); cursor: pointer; }
.search .clear:hover { background: var(--hover); }
.search .clear svg { position: static; transform: none; }
.search.big .clear { right: 0.75rem; }
.search input:focus { outline: 2px solid var(--accent); outline-offset: 0; box-shadow: none; }
.search.big { margin-bottom: 0.5rem; }
.search.big input { height: 3.5rem; padding-left: 3rem; font-size: 1.125rem; border-radius: 1rem; }
.search.big svg { left: 1rem; }
.none { margin: 0.5rem 0.25rem 0; font-size: 0.9375rem; color: var(--text-2); }
.status { margin: -0.25rem 0.25rem 0.5rem; font-size: 0.875rem; color: var(--text-3); }
.knappar .intro { margin: 0 0 0.5rem; padding: 0 0.25rem; font-size: 0.9375rem; color: var(--text-2); }
.buttons li { padding: 0.875rem 1rem; scroll-margin-top: 1rem; }
.buttons li:target { background: var(--tint); }
.buttons p { margin: 0; }
.b-name { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.25rem 0.5rem; font-weight: 600; }
.b-text { margin-top: 0.25rem; font-size: 0.9375rem; line-height: 1.5; color: var(--text-2); }
.b-for { display: inline-block; padding: 0 0.5rem; border-radius: 9999px; background: var(--tint); color: var(--accent-text); font-size: 0.8125rem; font-weight: 600; line-height: 1.5; }
.intro .b-for { margin: 0 0.5rem 0 0; }
.contact { display: flex; align-items: center; gap: 1rem; margin: 2.5rem 0 0; padding: 1rem 1.25rem; border-radius: 1rem; background: var(--card); }
.contact .body { flex: 1; min-width: 0; }
.contact .k { margin: 0; font-weight: 600; }
.contact .t { margin: 0.125rem 0 0; font-size: 0.9375rem; color: var(--text-2); }
@media (max-width: 480px) { .contact { flex-direction: column; align-items: stretch; } .contact .open { justify-content: center; } }
footer { padding: 1rem 0 2rem; font-size: 0.875rem; color: var(--text-3); }