:root {
  --bg:        #0a111c;
  --bg-raise:  #0e1726;
  --panel:     #101b2c;
  --panel-2:   #132033;
  --line:      rgba(148,178,214,.12);
  --line-soft: rgba(148,178,214,.07);
  --ink:       #e7eef7;
  --ink-soft:  #c3cfdd;
  --muted:     #8496ac;

  --faint:     #77899f;
  --accent:    #3fa9f5;
  --accent-dim:#2b76ad;
  --accent-bg: rgba(63,169,245,.10);
  --accent-brd:rgba(63,169,245,.28);
  --radius:    12px;
}

* { box-sizing:border-box; margin:0; padding:0; }

html { scroll-behavior:smooth; scroll-padding-top:28px; }

body {
  background:var(--bg);
  color:var(--ink);
  font:16px/1.7 -apple-system, "Segoe UI", "Noto Sans", Ubuntu, Cantarell, system-ui, sans-serif;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

::selection { background:rgba(63,169,245,.30); }

a { color:var(--accent); text-decoration:none; }
a:hover { text-decoration:underline; text-underline-offset:3px; }
:focus-visible { outline:2px solid var(--accent); outline-offset:2px; border-radius:4px; }

/* Smooth scrolling is a nicety; for somebody with a vestibular disorder it is
   nausea. KDE's "Reduce animations" already says so — listen to it. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
}

/* ---------- skip link ---------- */
/* Eighteen sidebar links stand between the top of this page and its first
   sentence. Without this, a keyboard or screen-reader user walks all eighteen
   every time — WCAG 2.4.1, Level A. */
.skip { position:absolute; left:-9999px; }
.skip:focus {
  left:16px; top:10px; z-index:100;
  background:var(--panel); color:var(--ink);
  padding:8px 14px; border-radius:8px; border:1px solid var(--accent-brd);
}
main:focus:not(:focus-visible), section:focus:not(:focus-visible) { outline:none; }

/* ---------- language ---------- */

.langbar {
  display:flex; align-items:center; gap:8px 10px; flex-wrap:wrap;
  margin:0 0 18px; font-size:.85rem; color:var(--muted);
}
.langbar .label {
  font-size:.68rem; font-weight:600; letter-spacing:.14em;
  text-transform:uppercase; color:var(--faint);
}

.langbar a, .langbar strong {
  border:1px solid var(--line-soft); border-radius:99px;
  padding:9px 14px; background:var(--bg-raise); font-weight:500;
}
.langbar strong { color:var(--ink); border-color:var(--accent-brd); }
.langbar a:hover { color:var(--ink); border-color:var(--accent-brd); text-decoration:none; }
.langnote {
  background:var(--bg-raise); border:1px solid var(--line-soft);
  border-radius:var(--radius); padding:12px 16px; margin:0 0 20px;
  font-size:.86rem; color:var(--muted);
}
.langnote strong { color:var(--ink-soft); font-weight:600; }

/* ---------- shell ---------- */
.shell {
  max-width:1120px;
  margin:0 auto;
  padding:0 32px;
  display:grid;
  grid-template-columns:224px minmax(0,1fr);
  gap:56px;
}

/* ---------- sidebar ---------- */
.side {
  padding:44px 0 64px;
}
.sidebox {
  position:sticky;
  top:24px;
  max-height:calc(100vh - 48px);
  overflow-y:auto;
  scrollbar-width:thin;
  scrollbar-color:var(--line) transparent;
}
.brand {
  display:flex; align-items:center; gap:11px;
  padding-bottom:18px; margin-bottom:14px;
  border-bottom:1px solid var(--line-soft);
}
.mark {
  width:34px; height:34px; flex:none;
  border-radius:9px;
  background:linear-gradient(145deg, #17293f, #0e1a2b);
  border:1px solid var(--accent-brd);
  display:grid; place-items:center;
  color:var(--accent);
  font-weight:700; font-size:17px;
  letter-spacing:.02em;
}
.brand-name { font-size:.95rem; font-weight:600; letter-spacing:.01em; }
.brand-name small { display:block; font-size:.72rem; font-weight:500; color:var(--muted); letter-spacing:.08em; text-transform:uppercase; margin-top:1px; }

.navgroup { margin:16px 0 4px; font-size:.68rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--faint); }
nav.toc a {
  display:block;
  padding:5px 10px;
  margin:1px 0 1px -10px;
  font-size:.85rem;
  color:var(--muted);
  border-radius:7px;
  border-left:2px solid transparent;
  line-height:1.45;
}
nav.toc a:hover { color:var(--ink); background:var(--line-soft); text-decoration:none; }

nav.toc a[hidden] { display:none; }

nav.toc .navgroup[hidden] { display:none; }
nav.toc a.active {
  color:var(--accent);
  background:var(--accent-bg);
  border-left-color:var(--accent);
  border-radius:0 7px 7px 0;
}

/* ---------- content ---------- */
.content { padding:44px 0 110px; max-width:660px; }

header.hero { margin-bottom:20px; }
.eyebrow {
  font-size:.72rem; font-weight:600;
  letter-spacing:.18em; text-transform:uppercase;
  color:var(--accent);
  margin-bottom:10px;
}
h1 {
  font-size:clamp(1.9rem, 3.4vw, 2.5rem);
  font-weight:650;
  letter-spacing:-.015em;
  line-height:1.15;
}
.sub {
  color:var(--muted);
  font-size:1.02rem;
  margin-top:12px;
  max-width:46ch;
}

/* ---------- "where do I start?" ---------- */

.startline {
  background:var(--bg-raise);
  border:1px solid var(--line-soft);
  border-radius:var(--radius);
  padding:14px 18px;
  margin:4px 0 6px;
}
.startline p { font-size:.92rem; margin:0; }
.startline p + p { margin-top:6px; color:var(--muted); }

/* The PRO badge legend, at the badge's first appearance. Muted and small: it is
   a key to a symbol, not a claim competing with the table under it. */
.badge-key { font-size:.86rem; color:var(--muted); }

section {
  padding:36px 0 6px;
  margin-top:14px;
  border-top:1px solid var(--line-soft);
  scroll-margin-top:24px;
}
section:first-of-type { border-top:none; margin-top:26px; padding-top:14px; }

h2 {
  font-size:1.22rem;
  font-weight:600;
  letter-spacing:-.008em;
  color:var(--ink);
  margin-bottom:14px;
  display:flex; align-items:center; gap:10px;
}
.pro {
  flex:none;
  font-size:.62rem; font-weight:700;
  letter-spacing:.12em;
  color:var(--accent);
  background:var(--accent-bg);
  border:1px solid var(--accent-brd);
  border-radius:99px;
  padding:2.5px 9px 2px;
  transform:translateY(1px);
}

p { color:var(--ink-soft); font-size:.96rem; margin-bottom:12px; }
p strong { color:var(--ink); font-weight:600; }
em { color:var(--ink); font-style:italic; }

kbd {
  display:inline-block;
  background:linear-gradient(180deg, var(--panel-2), var(--panel));
  border:1px solid var(--line);
  border-bottom-width:2px;
  border-radius:6px;
  padding:1px 8px;
  font:600 .8em/1.6 ui-monospace, "Cascadia Mono", Consolas, monospace;
  color:var(--ink);
  white-space:nowrap;
}
code {
  background:var(--accent-bg);
  border:1px solid rgba(63,169,245,.16);
  border-radius:6px;
  padding:1.5px 7px;
  font:.85em ui-monospace, "Cascadia Mono", Consolas, monospace;
  color:#8ecdf8;
  white-space:nowrap;
}

/* ---------- shortcut cards ---------- */
.keys {
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(280px, 1fr));
  gap:12px;
  margin:18px 0 10px;
}

.keys > :last-child:nth-child(odd) { grid-column:1 / -1; }
.key-card {
  background:var(--bg-raise);
  border:1px solid var(--line-soft);
  border-radius:var(--radius);
  padding:14px 16px 13px;
}
.key-card .combo { margin-bottom:7px; display:flex; align-items:center; gap:5px; flex-wrap:wrap; }
.key-card .combo .plus { color:var(--faint); font-size:.78rem; }
.key-card .what { font-size:.86rem; color:var(--muted); line-height:1.5; }
.key-card .what strong { color:var(--ink-soft); font-weight:500; }

/* ---------- terminal helpers panel ---------- */
.helpers {
  background:var(--bg-raise);
  border:1px solid var(--line-soft);
  border-radius:var(--radius);
  padding:18px 20px 8px;
  margin:20px 0 10px;
}
.helpers-title {
  font-size:.78rem; font-weight:600;
  letter-spacing:.1em; text-transform:uppercase;
  color:var(--muted);
  margin-bottom:4px;
}
.helpers-sub { font-size:.86rem; color:var(--faint); margin-bottom:12px; }
.helper-row {
  display:flex; align-items:baseline; gap:14px;
  padding:9px 0;
  border-top:1px solid var(--line-soft);
  font-size:.9rem;
}
.helper-row code { flex:none; }
.helper-row span { color:var(--muted); font-size:.87rem; }

/* ---------- tip callout ---------- */
/* Block, not flex, with the badge positioned. As a flex container every
   <strong> inside a tip became its own column, so an emphasised sentence came
   out as stacked columns of ragged text — and the tips are where the warnings
   live ("Windows is only ever read"). Same fix as manual.css. */
.tip {
  position:relative;
  background:var(--accent-bg);
  border:1px solid rgba(63,169,245,.18);
  border-radius:var(--radius);
  padding:13px 16px 13px 44px;
  margin:14px 0;
  font-size:.9rem;
  color:var(--ink-soft);
}
.tip::before {
  content:"i";
  position:absolute; left:16px; top:15px;
  width:17px; height:17px;
  border-radius:50%;
  background:var(--accent);
  color:#06121f;
  font:700 .68rem/17px ui-monospace, monospace;
  text-align:center;
}
.tip p { margin:0; }
.tip p + p { margin-top:8px; }

footer.colophon {
  margin-top:56px;
  padding-top:22px;
  border-top:1px solid var(--line-soft);
  font-size:.8rem;
  color:var(--faint);
}

/* ---------- guide search ---------- */
/* The manual has search and the guide did not, and the difference showed:
   the manual gets used and the guide gets read once. An input, not a button —
   filtering happens as you type, and Escape clears it. */
.gsearch { position:relative; margin:14px 0 4px; }
.gsearch input {
  width:100%;
  background:var(--bg-raise);
  border:1px solid var(--line);
  border-radius:9px;
  padding:8px 12px 8px 34px;
  font:inherit; font-size:.86rem;
  color:var(--ink);
}
.gsearch input::placeholder { color:var(--faint); }
.gsearch input:focus-visible { outline:2px solid var(--accent); outline-offset:1px; }
.gsearch::before {
  content:"";
  position:absolute; left:11px; top:50%;
  width:13px; height:13px;
  transform:translateY(-58%);
  border:2px solid var(--faint);
  border-radius:50%;
  box-sizing:border-box;
}
.gsearch::after {
  content:"";
  position:absolute; left:21px; top:50%;
  width:6px; height:2px;
  transform:translateY(3px) rotate(45deg);
  background:var(--faint);
  border-radius:2px;
}
/* The live result count. aria-live polite, so a screen reader hears "3
   sections" after the keystrokes rather than during them. */
.gsearch-status {
  min-height:1.2em;
  margin:6px 0 0;
  font-size:.75rem;
  color:var(--faint);
}

/* ---------- the Windows-to-Dagric map ---------- */
/* A TABLE, semantically and visually. Switchers arrive with ten years of
   muscle memory and one question — "where did X go?" — and a table answers it
   in the time a paragraph takes to clear its throat. th scope attributes are
   in the HTML so a screen reader reads each row as a pair. */
.winmap { width:100%; border-collapse:collapse; margin:16px 0 8px; font-size:.9rem; }
.winmap caption {
  text-align:left;
  font-size:.78rem; font-weight:600;
  letter-spacing:.1em; text-transform:uppercase;
  color:var(--muted);
  padding-bottom:10px;
}
.winmap th, .winmap td {
  text-align:left;
  padding:9px 14px 9px 0;
  border-top:1px solid var(--line-soft);
  vertical-align:top;
}
.winmap thead th {
  border-top:none;
  font-size:.72rem; font-weight:600;
  letter-spacing:.12em; text-transform:uppercase;
  color:var(--faint);
  padding-bottom:6px;
}
.winmap tbody th { font-weight:500; color:var(--muted); width:44%; }
.winmap td { color:var(--ink-soft); }
.winmap td strong { color:var(--ink); font-weight:600; }
.winmap td kbd { font-size:.72em; }

/* ---------- the first-day checklist ---------- */
/* Real checkboxes that remember themselves (guide.js, localStorage). The
   count line doubles as the reward: "6 of 9 done" is a small thing and it is
   the exact small thing that keeps somebody going through setup. */
.checklist { list-style:none; margin:16px 0 6px; }
.checklist li { border-top:1px solid var(--line-soft); }
.checklist li:first-child { border-top:none; }
.checklist label {
  display:flex; align-items:flex-start; gap:12px;
  padding:11px 2px;
  cursor:pointer;
  border-radius:8px;
}
.checklist label:hover { background:var(--line-soft); }
.checklist input {
  flex:none;
  width:17px; height:17px;
  margin-top:3px;
  accent-color:var(--accent);
  cursor:pointer;
}
.checklist .ck-text { font-size:.92rem; color:var(--ink-soft); line-height:1.55; }
.checklist .ck-text strong { color:var(--ink); font-weight:600; }
.checklist .ck-text small { display:block; color:var(--muted); font-size:.84rem; margin-top:1px; }
.checklist input:checked ~ .ck-text,
.checklist input:checked ~ .ck-text strong { color:var(--faint); text-decoration:line-through; text-decoration-color:var(--line); }
.checklist input:checked ~ .ck-text small { text-decoration:none; }
.ck-count { font-size:.8rem; color:var(--faint); margin-top:8px; min-height:1.2em; }

/* ---------- troubleshooting entries ---------- */
/* h3 + prose, not an accordion. Collapsed content cannot be found with
   Ctrl+F, is invisible to the search above, and prints as a page of closed
   boxes — three failures for one visual nicety. */
.fix h3 {
  font-size:1rem; font-weight:600;
  color:var(--ink);
  margin:22px 0 8px;
}
.fix h3::before {
  content:"→ ";
  color:var(--accent);
}
.fix p { font-size:.92rem; }

/* ---------- light mode ---------- */

@media screen {
:root[data-theme="light"] {
    --bg:        #f3f6fa;
    --bg-raise:  #ffffff;
    --panel:     #ffffff;
    --panel-2:   #e9eef5;
    --line:      rgba(31,54,84,.16);
    --line-soft: rgba(31,54,84,.09);
    --ink:       #101a26;
    --ink-soft:  #2c3c50;
    --muted:     #586a80;

    --faint:     #607085;
    /* The accent stays the brand blue for fills and badges, but as TEXT it
       fails on white (3fa9f5 measures ~2.4:1), so links use the deepened
       variant — same hue, readable. */
    --accent:    #1c6ea8;
    --accent-dim:#2b76ad;
    --accent-bg: rgba(28,110,168,.08);
    --accent-brd:rgba(28,110,168,.30);}
:root[data-theme="light"] ::selection { background:rgba(28,110,168,.22);}
:root[data-theme="light"] .mark {
    background:linear-gradient(145deg, #eaf2fb, #d9e6f4);
    color:#1c6ea8;}
:root[data-theme="light"] kbd { background:linear-gradient(180deg, #ffffff, #eef2f7);}
:root[data-theme="light"] code {
    background:var(--accent-bg);
    border-color:rgba(28,110,168,.18);
    color:#155d8e;}

:root[data-theme="light"] .pro { color:#155d8e;}
:root[data-theme="light"] .tip { border-color:rgba(28,110,168,.20);}
:root[data-theme="light"] .tip::before { background:#1c6ea8; color:#ffffff;}
}
/* ---------- narrow screens ---------- */

@media (max-width:900px) {
  .shell { display:block; padding:0 22px; }
  .side { padding:20px 0 0; }
  .sidebox {
    position:sticky; top:0; z-index:5;
    max-height:none; overflow:visible;
    background:rgba(10,17,28,.92);
    backdrop-filter:blur(10px);
    margin:0 -22px; padding:8px 22px;
    border-bottom:1px solid var(--line-soft);
    display:grid;
    grid-template-columns:auto minmax(0,1fr);
    align-items:center;
    column-gap:12px; row-gap:8px;
  }
  /* Row one: mark and wordmark on the left, search on the right. */
  .brand { border-bottom:none; padding-bottom:0; margin-bottom:0; }
  .brand-name { white-space:nowrap; }
  /* 20.6px spent repeating what the eyebrow and the h1 both say just below. */
  .brand-name small { display:none; }
  .gsearch { margin:0; }

  .gsearch-status:empty { min-height:0; margin-top:0; }

  /* Row two: the section strip, full width. */

  .navgroup {
    display:flex; align-items:center;
    flex:none; margin:0; padding:0 4px 0 8px;
    white-space:nowrap;
  }
  .navgroup:first-child { padding-left:0; }
  nav.toc {
    grid-column:1 / -1;
    display:flex; gap:6px; overflow-x:auto;
    padding-bottom:4px; scrollbar-width:none;
  }
  nav.toc::-webkit-scrollbar { display:none; }

  nav.toc a {
    flex:none; margin:0;
    display:flex; align-items:center;
    min-height:44px;
    border:1px solid var(--line-soft);
    border-radius:99px;
    padding:0 14px;
    font-size:.85rem;
  }
  nav.toc a.active { border-color:var(--accent-brd); border-radius:99px; }


  html { scroll-padding-top:116px; }

  .content { padding-top:30px; max-width:none; }
}


@media screen and (max-width:900px) {
:root[data-theme="light"] .sidebox { background:rgba(243,246,250,.92);}
}


/* ---------- print ---------- */

@media print {
  :root {
    --bg:#ffffff; --bg-raise:#ffffff; --panel:#ffffff; --panel-2:#f2f5f9;
    --line:rgba(31,54,84,.38); --line-soft:rgba(31,54,84,.22);
    --ink:#000000; --ink-soft:#1a1a1a; --muted:#333333; --faint:#4a4a4a;
    --accent:#12507e; --accent-dim:#12507e;
    --accent-bg:#ffffff; --accent-brd:rgba(31,54,84,.38);
  }
  @page { margin:16mm; }
  html, body { background:#fff !important; color:#000 !important; }
  body { font-size:10.5pt; line-height:1.5; }

  .skip, .side, .langbar, .langnote, .gsearch, .gsearch-status,
  .sitebar, .sitefoot { display:none !important; }
  .shell { display:block; max-width:none; padding:0; }
  .content { padding:0; max-width:none; }
  section { padding:14px 0 0; margin-top:10px; }
  h1, h2, .fix h3 { color:#000; break-after:avoid; page-break-after:avoid; }
  h1 { font-size:19pt; }
  h2 { font-size:13pt; }
  p, li, .key-card, .helper-row, .tip, .winmap tr, .checklist li { break-inside:avoid; page-break-inside:avoid; }
  a { color:#12507e; text-decoration:underline; }
  /* each of these hardcoded a colour on the assumption the page was dark */
  kbd { background:#fff !important; border:1px solid #555; color:#000; }
  code { background:#fff !important; border:1px solid #777; color:#000 !important; }
  .tip { background:#fff; border:1px solid #777; }
  .tip::before { background:#fff; color:#000; border:1px solid #000; box-sizing:border-box; }
  .key-card, .helpers { background:#fff; border:1px solid #bbb; }
  .pro { background:#fff; border:1px solid #555; color:#000; }
  .eyebrow, .fix h3::before { color:#000; }
  .mark { background:#fff; border:1px solid #555; color:#000; }
  footer.colophon { color:#333; }
}


:root { --sitebar-h:61px; }

.sitebar {
  background:var(--bg);
  border-bottom:1px solid var(--line-soft);
}
.sitebar-in {
  max-width:1120px; margin:0 auto; padding:8px 32px;
  display:flex; align-items:center; gap:4px 16px; flex-wrap:wrap;
}
/* 44px on every control in this bar, which is the whole point of replacing
   what was here: the old back-link was 23px tall. min-height rather than
   padding so the number is stated rather than arrived at. */
.sitebar a {
  display:inline-flex; align-items:center; min-height:44px;
  padding:0 12px; border-radius:8px;
  font-size:.9rem; font-weight:500; color:var(--ink-soft);
  border:1px solid transparent;
}
.sitebar a:hover { color:var(--ink); background:var(--line-soft); text-decoration:none; }


.sitebar a.sitebar-home { background:var(--bg-raise); border-color:var(--line);
                          color:var(--ink); font-weight:600; }
.sitebar a.sitebar-home:hover { border-color:var(--accent-brd); background:var(--panel-2); }
.sitebar-home span { margin-right:7px; color:var(--accent); }
.sitebar-nav { display:flex; align-items:center; gap:4px; flex-wrap:wrap; margin-left:auto; }
.sitebar a.sitebar-cta { background:var(--accent); color:var(--bg); font-weight:600; padding:0 18px; }
.sitebar a.sitebar-cta:hover { background:var(--accent); color:var(--bg); filter:brightness(1.08); }


@media (max-width:640px) {
  .sitebar-in { padding:6px 16px; gap:2px 6px; }
  .sitebar-nav { margin-left:0; }
}


@media (min-width:901px) {
  .sitebar { position:sticky; top:0; z-index:10; }
  /* Both derived from --sitebar-h. The sidebar used to stick at 24px and the
     scrollport used to inset by 28px; each keeps its original clearance,
     measured from underneath the bar instead of from the top of the window. */
  .sidebox { top:calc(var(--sitebar-h) + 24px);
             max-height:calc(100vh - var(--sitebar-h) - 48px); }
  html { scroll-padding-top:calc(var(--sitebar-h) + 28px); }
  .side { padding-top:24px; }
}

/* Plain links, no landmark — see the SITE_FOOT comment. It sits under the
   colophon and inherits its hairline, so it costs one row and no new rule. */
.sitefoot {
  display:flex; flex-wrap:wrap; gap:2px 4px;
  margin-top:6px;
}
.sitefoot a {
  display:inline-flex; align-items:center; min-height:44px;
  padding:0 10px; margin-left:-10px; border-radius:7px;
  font-size:.85rem; color:var(--muted);
}
.sitefoot a + a { margin-left:0; }
.sitefoot a:hover { color:var(--ink); background:var(--line-soft); text-decoration:none; }


.themebox-bar { display:flex; align-items:center; margin-left:auto; }
.themebox-bar .themetog {
  min-height:44px; padding:9px 14px;
  background:var(--bg-raise); cursor:pointer;
  border:1px solid var(--line-soft); border-radius:99px;
  color:var(--muted); font:500 .85rem/1 inherit;
}
.themebox-bar .themetog:hover {
  color:var(--ink); border-color:var(--accent-brd);
}
/* The bar is a flex row whose home link is already pushed left; on a phone it
   wraps, and the switch must not land alone on a third row above an 11,000px
   document. */
@media (max-width:640px) {
  .themebox-bar { margin-left:0; }
  .themebox-bar .themetog { padding:9px 12px; font-size:.8rem; }
}