/* Repair Shop documentation — matches the marketing site brand */
:root{
  --ink:#0C1A2E; --ink-2:#33415A; --muted:#5B6B84;
  --blue:#2E6BF0; --blue-2:#1E4FD1; --blue-tint:#EAF0FE;
  --paper:#F7F9FC; --band:#EEF2F9; --card:#FFFFFF; --line:#E2E8F2;
  --red:#E23744;
  --radius:14px;
  --shadow-sm:0 1px 2px rgba(12,26,46,.06),0 4px 12px rgba(12,26,46,.05);
  --shadow-md:0 10px 30px rgba(12,26,46,.10),0 2px 6px rgba(12,26,46,.06);
  --font:'Archivo',system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  --top-h:58px; --side-w:264px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:var(--font);color:var(--ink);background:var(--paper);-webkit-font-smoothing:antialiased}
a{color:var(--blue);text-decoration:none}
a:hover{text-decoration:underline}
code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.9em;background:var(--band);border:1px solid var(--line);border-radius:6px;padding:1px 6px}

/* top bar */
.top{position:fixed;inset:0 0 auto 0;height:var(--top-h);z-index:30;display:flex;align-items:center;gap:16px;
  padding:0 20px;background:rgba(255,255,255,.9);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.top__brand{display:flex;align-items:center;gap:10px;color:var(--ink);font-weight:800;font-size:1.05rem}
.top__brand:hover{text-decoration:none}
.top__brand b{color:var(--blue);font-weight:800}
.top__right{margin-left:auto;font-weight:600;font-size:.95rem}
.top__menu{display:none;margin-left:auto;background:var(--ink);color:#fff;border:0;border-radius:9px;padding:9px 14px;font-family:var(--font);font-weight:700;font-size:.9rem}

/* layout */
.wrap{display:grid;grid-template-columns:var(--side-w) 1fr;max-width:1280px;margin:0 auto;padding-top:var(--top-h)}
.side{position:sticky;top:var(--top-h);align-self:start;height:calc(100vh - var(--top-h));overflow:auto;
  padding:26px 16px 40px;border-right:1px solid var(--line)}
.side__grp{margin:22px 10px 8px;font-size:.72rem;font-weight:800;letter-spacing:.11em;text-transform:uppercase;color:var(--muted)}
.side__grp:first-child{margin-top:0}
.side ul{list-style:none;margin:0 0 4px;padding:0}
.side li a{display:block;padding:8px 12px;border-radius:9px;color:var(--ink-2);font-weight:500;font-size:.96rem}
.side li a:hover{background:var(--band);text-decoration:none}
.side li a.on{background:var(--blue-tint);color:var(--blue-2);font-weight:700}

/* main */
.main{min-width:0;padding:40px 46px 60px;max-width:900px}
.main h1{font-size:2.15rem;font-weight:800;letter-spacing:-.02em;margin:0 0 10px}
.lede{font-size:1.18rem;color:var(--ink-2);margin:0 0 8px;max-width:60ch}
.main h2{font-size:1.42rem;font-weight:800;letter-spacing:-.01em;margin:44px 0 16px;padding-top:12px;border-top:1px solid var(--line)}
.para{color:var(--ink-2);font-size:1.04rem;line-height:1.65;margin:0 0 18px;max-width:66ch}

/* note / tip callout */
.note{max-width:66ch;margin:0 0 18px;padding:12px 16px;font-size:1rem;line-height:1.55;
  color:var(--ink-2);background:var(--blue-tint);border:1px solid #CFE0FE;
  border-left:3px solid var(--blue);border-radius:10px}
.note b{color:var(--ink)}

/* steps: instruction > screenshot */
.step{display:grid;grid-template-columns:34px 1fr;gap:16px;margin:0 0 30px}
.step__n{width:34px;height:34px;border-radius:50%;background:linear-gradient(180deg,var(--blue),var(--blue-2));
  color:#fff;font-weight:800;display:flex;align-items:center;justify-content:center;box-shadow:0 6px 14px -6px rgba(46,107,240,.6)}
.step__body{min-width:0}
.step__t{margin:5px 0 14px;font-size:1.08rem;line-height:1.55;color:var(--ink)}
.shot{margin:0;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:#fff;box-shadow:var(--shadow-md)}
.shot img{display:block;width:100%;height:auto}
.shot figcaption{padding:10px 16px;font-size:.9rem;color:var(--muted);font-weight:500;border-top:1px solid var(--line);background:var(--paper)}

/* OS install cards */
.oscards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin:6px 0 8px}
.oscards article{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:20px;box-shadow:var(--shadow-sm)}
.oscards h3{margin:0 0 12px;font-size:1.1rem}
.oscards ol{margin:0;padding-left:18px;color:var(--ink-2);font-size:.96rem;line-height:1.55}
.oscards li{margin-bottom:8px}
.oscards code{font-size:.82em}

/* requirement tables */
table.req{width:100%;border-collapse:collapse;margin:0 0 10px;background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
table.req th{width:150px;text-align:left;vertical-align:top;padding:13px 16px;background:var(--band);color:var(--ink);font-weight:700;font-size:.95rem;border-bottom:1px solid var(--line)}
table.req td{padding:13px 16px;color:var(--ink-2);font-size:.98rem;line-height:1.5;border-bottom:1px solid var(--line)}
table.req tr:last-child th,table.req tr:last-child td{border-bottom:0}

.foot{margin-top:56px;padding-top:22px;border-top:1px solid var(--line);color:var(--muted);font-size:.92rem}

/* responsive */
@media (max-width:860px){
  .top__right{display:none}
  .top__menu{display:block}
  .wrap{grid-template-columns:1fr}
  .side{position:fixed;top:var(--top-h);left:0;width:min(320px,86vw);height:calc(100vh - var(--top-h));
    background:#fff;transform:translateX(-102%);transition:transform .22s;z-index:25;box-shadow:var(--shadow-md)}
  body.nav-open .side{transform:none}
  .main{padding:28px 20px 50px}
  .main h1{font-size:1.7rem}
  .oscards{grid-template-columns:1fr}
  table.req th{width:120px}
}

/* docs search */
.ds{position:relative;flex:1;max-width:440px;margin:0 6px}
.ds__input{width:100%;height:38px;border:1px solid var(--line);border-radius:10px;background:#fff;
  padding:0 12px 0 38px;font-family:var(--font);font-size:.95rem;color:var(--ink);
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%235B6B84' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M21 21l-4.35-4.35'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:13px center}
.ds__input:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-tint)}
.ds__results{position:absolute;top:46px;left:0;right:0;max-height:min(72vh,540px);overflow:auto;
  background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow-md);z-index:40;padding:6px}
.ds__item{display:block;padding:9px 12px;border-radius:9px;color:var(--ink)}
.ds__item:hover,.ds__item.is-active{background:var(--band);text-decoration:none}
.ds__page{display:block;font-size:.68rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
.ds__h{display:block;font-weight:700;font-size:.98rem;margin:2px 0}
.ds__snip{display:block;font-size:.87rem;color:var(--ink-2);line-height:1.4}
.ds__item mark{background:var(--blue-tint);color:var(--blue-2);border-radius:3px;padding:0 1px}
.ds__empty{padding:14px 12px;color:var(--muted);font-size:.92rem}
@media (max-width:860px){
  .ds{max-width:none;margin:0 8px}
}
@media (max-width:560px){
  .top__brand span{display:none}
}

/* sidebar section bookmarks (per-page mini TOC) */
.main h2{scroll-margin-top:74px}
.side__sub{list-style:none;margin:2px 0 8px 15px;padding:0 0 0 12px;border-left:1.5px solid var(--line)}
.side__sub li a{display:block;padding:5px 10px;border-radius:7px;font-size:.89rem;font-weight:500;color:var(--muted);line-height:1.3}
.side__sub li a:hover{background:var(--band);color:var(--ink-2);text-decoration:none}
.side__sub li a.is-here{color:var(--blue-2);font-weight:700;background:var(--blue-tint)}