/* Dagric OS User Guide — offline stylesheet.
   Lifted out of index.html when the guide gained a German translation: two
   copies of 270 lines of CSS drift apart within a release, and the German
   page must never look like a lesser one. The manual's manual.css is its
   sibling — same tokens, same voice, deliberately. */
: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;
  /* Was #5f7186, which measured 3.78:1 on --bg and 3.59:1 on --bg-raise —
     under the 4.5:1 WCAG 1.4.3 (AA) asks of body text, and every place this
     token is used here is small text: the sidebar group headings at 10.9px,
     the "+" between key caps at 12.5px, the helpers subtitle, the colophon.
     Same hue, lifted until the darkest of those surfaces clears 4.5:1. */
  --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 ---------- */
/* This guide and the welcome page are the two documents Dagric translates in
   full. The bar names only languages that actually exist; the note under the
   German one admits it has not been through a native speaker yet. Both are
   deliberate: a language you cannot stand behind should not be offered, and
   one you offer with a caveat is an invitation to come and fix it. */
.langbar {
  display:flex; align-items:center; gap: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:3px 12px; 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; }
/* The display:block above is an AUTHOR rule and so beats the user agent's
   [hidden]{display:none}: guide.js's `a.hidden = !hit` set the attribute and
   nothing moved. A search filtered the sections but left all 22 sidebar links
   standing, several now pointing at a section no longer on the page — clicking
   one calls focus() on a display:none element and the page looks frozen. */
nav.toc a[hidden] { display:none; }
/* The display:block above is an AUTHOR rule and so beats the user agent's
   [hidden]{display:none}: guide.js's `a.hidden = !hit` set the attribute and
   nothing moved. A search filtered the sections but left all 22 sidebar links
   standing, several now pointing at a section no longer on the page — clicking
   one calls focus() on a display:none element and the page looks frozen. */
nav.toc a[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;
}

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;
}
.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 ---------- */
/* The guide was dark-only, which made it the one part of Dagric that ignored
   the choice the wizard's very first screen asks for. Plasma passes the
   desktop's scheme to Firefox, Firefox passes it here, so following
   prefers-color-scheme means the guide silently matches the desktop with no
   toggle to maintain. Every token is overridden — plus the few places that
   hardcoded a colour on the assumption the page was dark. */
@media (prefers-color-scheme: light) {
  :root {
    --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:     #64758a;
    /* 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);
  }
  ::selection { background:rgba(28,110,168,.22); }
  .mark {
    background:linear-gradient(145deg, #eaf2fb, #d9e6f4);
    color:#1c6ea8;
  }
  kbd { background:linear-gradient(180deg, #ffffff, #eef2f7); }
  code {
    background:var(--accent-bg);
    border-color:rgba(28,110,168,.18);
    color:#155d8e;
  }
  .tip { border-color:rgba(28,110,168,.20); }
  .tip::before { background:#1c6ea8; color:#ffffff; }
}
@media (prefers-color-scheme: light) and (max-width:900px) {
  .sidebox { background:rgba(243,246,250,.92); }
}

/* ---------- 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:12px 22px 10px;
    border-bottom:1px solid var(--line-soft);
  }
  .brand { border-bottom:none; padding-bottom:8px; margin-bottom:2px; }
  .navgroup { display:none; }
  nav.toc { 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;
    border:1px solid var(--line-soft);
    border-radius:99px;
    padding:4px 12px;
    font-size:.8rem;
  }
  nav.toc a.active { border-color:var(--accent-brd); border-radius:99px; }
  .content { padding-top:30px; max-width:none; }
}