/* Husbredde overstyres lokalt, så designsystemsynk ikke flytter veiviseren. */
.chrome-guide { --guide-width:1080px; --guide-gutter:24px; }
.chrome-top { border-bottom:1px solid var(--kant); background:var(--bg); }
.chrome-top-inner { max-width:calc(var(--guide-width) + 2 * var(--guide-gutter)); margin:auto; padding:18px var(--guide-gutter); display:flex; justify-content:space-between; align-items:center; gap:16px; }
.chrome-top-actions { display:flex; align-items:center; gap:20px; }
.chrome-shell { max-width:calc(var(--guide-width) + 2 * var(--guide-gutter)); margin:auto; padding:0 var(--guide-gutter) 64px; }
.chrome-hero { padding:44px 0 26px; max-width:720px; }
.eyebrow { font:500 11px var(--font-mono); text-transform:uppercase; letter-spacing:.12em; color:var(--aksent-lys); margin-bottom:12px; }
.chrome-hero h1 { margin:0 0 14px; font:800 clamp(36px,5vw,50px)/1.08 var(--font-overskrift); }
.chrome-hero p:not(.eyebrow) { max-width:610px; color:var(--tekst-dempet); font-size:15px; line-height:1.7; }
#summary { margin-bottom:28px; border:1px solid var(--kant); border-radius:var(--radius-kort); background:var(--flate); overflow:hidden; }
.summary-caption { display:flex; justify-content:space-between; gap:16px; padding:12px 20px; border-bottom:1px solid var(--kant); font-size:12px; color:var(--tekst-dempet); }
.private-label { display:flex; align-items:center; gap:7px; }
.private-label svg { width:14px; height:14px; color:var(--ok); }
.account-flow { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:24px; padding:20px; }
.account { display:flex; align-items:center; gap:12px; min-width:0; }
.account-avatar { flex:none; width:40px; height:40px; border-radius:50%; display:grid; place-items:center; background:var(--flate-hev); border:1px solid var(--kant-sterk); color:var(--tekst-dempet); font-size:15px; }
.account-avatar img { width:100%; height:100%; object-fit:cover; border-radius:50%; }
.account-meta { min-width:0; display:grid; gap:3px; }
.account-meta span { color:var(--tekst-dempet); font-size:11px; }
.account-meta strong { font-size:13px; font-weight:500; overflow-wrap:anywhere; }
.direction { color:var(--aksent-lys); width:26px; height:26px; }
/* Symmetric outer tracks keep the reading column on the window's centerline.
   The progress rail uses only the left margin; the right track stays empty. */
.guide-layout { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,720px) minmax(0,1fr); gap:32px; align-items:start; }
#progress { grid-column:1; grid-row:1; width:250px; justify-self:end; position:sticky; top:20px; border:1px solid var(--kant); border-radius:var(--radius-kort); background:var(--flate); padding:20px 16px; z-index:4; max-height:calc(100svh - 40px); overflow-y:auto; }
.progress-label { display:flex; align-items:center; justify-content:space-between; gap:8px; font-size:12px; }
.progress-label strong { color:var(--aksent-lys); font-family:var(--font-mono); }
progress { display:block; width:100%; height:6px; border:0; border-radius:999px; overflow:hidden; background:var(--kant); accent-color:var(--aksent); margin:12px 0 18px; }
progress::-webkit-progress-bar { background:var(--kant); border-radius:999px; }
progress::-webkit-progress-value { background:var(--aksent); border-radius:999px; transition:width 150ms; }
.step-list { list-style:none; padding:0; margin:0; display:grid; gap:5px; }
.step-list button { width:100%; min-height:48px; display:flex; gap:10px; align-items:center; text-align:left; border:0; border-radius:var(--radius-kontroll); padding:10px 8px; color:var(--tekst-dempet); background:var(--flate); cursor:pointer; font-family:inherit; }
.step-list button[aria-current=step] { color:var(--tekst); background:var(--flate-hev); }
.step-list button:disabled { opacity:.6; cursor:default; }
.step-number { display:grid; place-items:center; width:24px; height:24px; flex:none; border:1px solid var(--kant-sterk); border-radius:50%; font:500 11px var(--font-mono); }
.step-verified .step-number { border-color:var(--ok); color:var(--ok); }
.step-list small { display:block; font-size:10px; margin-top:3px; color:var(--tekst-dempet); }
.current-task { margin-top:16px; padding-top:14px; border-top:1px solid var(--kant); font-size:12px; line-height:1.65; color:var(--tekst-dempet); overflow-wrap:anywhere; }
.current-task strong { display:block; color:var(--tekst); font-size:11px; margin-bottom:3px; }
.current-task progress { margin:10px 0 0; }
#guide-content { grid-column:2; grid-row:1; min-width:0; }
.tool-heading,#summary,#browser-note,#mobile-note { max-width:720px; margin-inline:auto; }
#chapter h2 { font:800 28px/1.2 var(--font-overskrift); margin:8px 0 14px; }
#chapter h3 { font-size:15px; margin:0 0 12px; }
#chapter p { line-height:1.7; }
.chapter-intro { color:var(--tekst-dempet); margin-bottom:24px; }
.chapter-count { font:500 11px var(--font-mono); color:var(--aksent-lys); text-transform:uppercase; letter-spacing:.07em; }
.guide-card { border:1px solid var(--kant); border-radius:var(--radius-kort); background:var(--flate); padding:24px; margin:18px 0; }
.guide-card > :last-child { margin-bottom:0; }
.guide-card > :first-child { margin-top:0; }
.guide-card p, .guide-card li, details p { font-size:13px; color:var(--tekst-dempet); line-height:1.8; }
.guide-card .knapp, .guide-card .knapp-sekundar, .guide-controls button { min-height:48px; }
.guide-card .knapperad { margin-top:16px; flex-wrap:wrap; }
.guide-card code { display:inline-block; padding:7px 10px; border:1px solid var(--kant-sterk); background:var(--felt); border-radius:var(--radius-kontroll); font-size:12px; }
.guide-card ol { padding-left:20px; display:grid; gap:14px; }
.notice { padding:14px 16px; margin:16px 0; border:1px solid var(--kant-sterk); border-radius:var(--radius-kontroll); background:var(--flate-hev); color:var(--tekst-dempet); font-size:12px; line-height:1.7; }
.notice.danger { color:var(--fare); border-color:var(--fare); background:var(--fare-flate); }
.notice.success { color:var(--ok); background:var(--ok-flate); border-color:var(--ok); }
.notice.warning { color:var(--advarsel); background:var(--advarsel-flate); border-color:var(--advarsel); }
.account-picker { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.account-picker .guide-card { margin:0; display:flex; flex-direction:column; align-items:flex-start; gap:12px; }
.account-picker .account { min-height:48px; }
.account-picker .knapp-sekundar { margin-top:auto; }
.check-row { display:flex; min-height:48px; gap:10px; align-items:center; font-size:13px; line-height:1.65; margin:14px 0; cursor:pointer; }
.check-row input { width:17px; height:17px; margin:0; flex:none; accent-color:var(--aksent); background:var(--felt); color:var(--tekst); }
.data-types { display:flex; gap:24px; flex-wrap:wrap; }
.file-control { display:grid; gap:10px; margin-top:16px; }
.file-control input[type=file] { width:100%; max-width:100%; background:var(--felt); color:var(--tekst); padding:10px; border:1px solid var(--kant-sterk); border-radius:var(--radius-kontroll); font-size:12px; }
.file-control input::file-selector-button { color:var(--tekst); background:var(--flate-hev); border:1px solid var(--kant-sterk); padding:7px 10px; border-radius:var(--radius-kontroll); margin-right:10px; }
.file-status { font-size:12px; color:var(--ok); overflow-wrap:anywhere; }
.file-status.error { color:var(--fare); }
.conflict-stats { display:flex; flex-wrap:wrap; gap:8px; margin:16px 0; }
.stat-pill { display:inline-flex; padding:8px 10px; font-size:11px; border-radius:var(--radius-kontroll); border:1px solid var(--kant); background:var(--flate); color:var(--tekst-dempet); }
.conflict-card { margin:12px 0; }
.conflict-type { color:var(--aksent-lys); font-size:10px; text-transform:uppercase; letter-spacing:.07em; }
.conflict-title { overflow-wrap:anywhere; font-size:14px; font-weight:600; margin:8px 0; }
.conflict-compare { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin:14px 0; }
.conflict-compare div { min-width:0; background:var(--felt); border-radius:var(--radius-kontroll); padding:12px; font-size:12px; overflow-wrap:anywhere; }
.conflict-compare small { display:block; color:var(--tekst-dempet); font-size:10px; margin-bottom:6px; }
.conflict-choices { display:flex; gap:8px; flex-wrap:wrap; }
.conflict-choices button { border:1px solid var(--kant-sterk); background:var(--flate-hev); color:var(--tekst-dempet); padding:9px 12px; font:500 12px var(--font-tekst); border-radius:var(--radius-kontroll); cursor:pointer; }
.conflict-choices button[aria-pressed=true] { border-color:var(--aksent); color:var(--aksent-lys); background:var(--flate-hev); }
.guide-controls { display:flex; justify-content:space-between; gap:16px; border-top:1px solid var(--kant); padding-top:20px; margin-top:28px; }
.pagination { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:10px; font-size:12px; color:var(--tekst-dempet); }
.small { font-size:12px; color:var(--tekst-dempet); }
.batch { padding:16px 0; border-bottom:1px solid var(--kant); }
.batch:last-child { border:0; }
.batch label { margin-bottom:0; }
.finished { padding:48px 20px; text-align:center; }
.finished .done-mark { font-size:28px; color:var(--ok); margin-bottom:14px; }
.chrome-guide dialog { max-width:480px; width:calc(100% - 32px); border:1px solid var(--kant-sterk); border-radius:var(--radius-kort); background:var(--flate); color:var(--tekst); padding:28px; }
.chrome-guide dialog::backdrop { background:rgba(0,0,0,.7); }
.chrome-guide dialog p { color:var(--tekst-dempet); font-size:13px; line-height:1.8; }
.chrome-guide button:focus-visible, .chrome-guide a:focus-visible, .chrome-guide input:focus-visible { outline:2px solid var(--aksent); outline-offset:3px; }
.chrome-guide [hidden] { display:none !important; }
@media (hover:hover) { .step-list button:enabled:hover, .conflict-choices button:hover { background:var(--flate-hover); color:var(--tekst); } }
@media (max-width:1331px) {
 .guide-layout { display:flex; flex-direction:column; max-width:720px; margin-inline:auto; gap:24px; }
 #progress { width:100%; padding:14px 16px; }
 .step-list { display:flex; gap:4px; }
 .step-list li { flex:1; min-width:0; }
 .step-list button { justify-content:center; padding:4px; }
 .step-list .step-name { display:none; }
 #progress progress { margin:10px 0; }
 .current-task { margin-top:10px; padding-top:8px; font-size:11px; }
 #guide-content { width:100%; }
}
@media (max-width:760px) {
 .chrome-guide { --guide-gutter:16px; }
 .chrome-top-inner { padding-top:14px; padding-bottom:14px; }
 .chrome-top-actions { gap:10px; }
 .chrome-top-actions .knapp-lenke { font-size:11px; }
 .chrome-hero { padding-top:28px; }
 .chrome-hero h1 { font-size:36px; }
 .summary-caption { padding:12px 16px; flex-wrap:wrap; gap:8px; }
 .account-flow { gap:10px; padding:16px; }
 .account { gap:8px; }
 .account-avatar { width:30px; height:30px; font-size:12px; }
 .account-meta strong { font-size:11px; }
 .account-meta span { font-size:10px; }
 .direction { width:18px; }
 #progress { top:0; width:100%; padding:14px 16px; box-shadow:0 8px 15px var(--bg); }
 .guide-card { padding:18px; }
 .account-picker { grid-template-columns:1fr; }
 .conflict-compare { grid-template-columns:1fr; gap:6px; }
 .conflict-choices { flex-direction:column; }
 .conflict-choices button { text-align:left; }
 .guide-controls { position:relative; }
}
@media (prefers-reduced-motion:reduce) { * { scroll-behavior:auto !important; transition:none !important; } }
.export-progress { border-top:1px solid var(--kant); margin-top:16px; padding-top:8px; }
.export-progress ul { list-style:none; padding:0; margin:0; display:grid; gap:8px; font-size:11px; color:var(--tekst-dempet); }
.export-progress .source-done { color:var(--ok); }
@media (max-width:760px) { .export-progress { display:none; } }
.step-number .ico { width:12px; height:12px; }
.direction .ico { width:24px; height:24px; }
.done-mark .ico { width:38px; height:38px; }
.export-progress li { display:flex; align-items:center; gap:6px; }
.export-progress .ico { width:12px; height:12px; }

.guide-card .expected-account { color:var(--tekst); font-weight:600; overflow-wrap:anywhere; }
#install-heading:focus { outline:none; }
.guide-card .knapperad button { white-space:normal; }
#chapter > details { margin-top:20px; }
/* Account choices remain native dark controls within the idgo guide. */
#gmail-email {display:block;width:100%;margin-top:10px;min-height:48px;background:var(--felt);color:var(--tekst);border:1px solid var(--kant-sterk);border-radius:var(--radius-kontroll);padding:12px;font:inherit;}