/* Generated by docs/design/build_v4.ps1 from docs/design/natavgiftsmodell-v4.template.html - do not edit. */
:root { --step: #e9edf2; --step-ink: #5d6675; }
/* Header: account row, then the process as a value chain (shared with the portal: static/header.css) */
header.steps { background: var(--card); border-bottom: 1px solid var(--line); padding: 2px 16px 8px; }
.chain { display: flex; width: 100%; max-width: 1408px; margin: 0 auto; filter: drop-shadow(0 1px 0 var(--line)); }
.chain > a { position: relative; flex: 1 1 0; min-width: 0; display: grid; grid-template-columns: auto 1fr; column-gap: 6px; align-content: center; align-items: baseline; padding: 4px 10px 4px 26px; margin-right: -8px; min-height: 36px;
  background: var(--step); color: var(--step-ink); text-decoration: none; clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 50%, calc(100% - 16px) 100%, 0 100%, 16px 50%); }
.chain > a:first-child { padding-left: 14px; clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 50%, calc(100% - 16px) 100%, 0 100%); flex-grow: 1.3; }
.chain > a:last-child { margin-right: 0; }
.chain .n { font-size: .78rem; font-weight: 700; opacity: .85; }
.chain .t { font-size: .86rem; font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chain .s { grid-column: 2; font-size: .72rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chain > a.on { background: var(--accent); color: var(--accent-ink); }
.chain > a.on .s { opacity: .95; }
/* Sub-stages of step 1: Kontrollera › Redigera › Bekräfta (Mats, 2026-11-05) */
.sub span { cursor: pointer; opacity: .8; }
.sub span.cur { opacity: 1; font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
.sub i { font-style: normal; opacity: .6; margin: 0 4px; }
.admin { display: flex; gap: 2px; align-items: center; justify-content: flex-end; font-size: .82rem; flex-wrap: wrap; max-width: 1408px; margin: 0 auto 6px; }
.admin a { color: var(--muted); text-decoration: none; padding: 4px 8px; border-radius: 6px; white-space: nowrap; }
.admin a:hover { background: var(--step); }
.admin .count { background: var(--accent); color: var(--accent-ink); border-radius: 999px; font-size: .7rem; padding: 0 6px; margin-left: 3px; }
.admin .org { color: var(--ink); border: 1px solid var(--line); }
.admin .user { color: var(--ink); font-weight: 600; }
@media (max-width: 900px) { header.steps { padding: 4px 12px 8px; } .chain { overflow-x: auto; } .chain > a { min-width: 130px; } }