/* Dual-use desk setup guide — page-specific styles */

/* Skip link */
.skip { position:absolute; left:-999px; top:auto; width:1px; height:1px; overflow:hidden; }
.skip:focus {
  left:14px; top:14px; width:auto; height:auto;
  padding:10px 12px; border-radius:var(--r);
  background:var(--bg2); border:1px solid var(--border);
  z-index:9999; color:var(--fg); text-decoration:none;
}

/* Anchor offset for sticky nav */
:target { scroll-margin-top:110px; }

/* Hero */
.hero { padding:54px 0 22px; }
.heroCard {
  border:1px solid var(--border);
  background:var(--bg2);
  border-radius:var(--r);
  padding:32px;
  position:relative;
  overflow:hidden;
}
.heroCard::before {
  content:"";
  position:absolute; inset:-1px;
  background:
    radial-gradient(55% 70% at 18% 10%, rgba(0,255,148,.08), transparent 62%),
    radial-gradient(45% 55% at 85% 18%, rgba(0,180,255,.06), transparent 60%);
  pointer-events:none;
}
.kicker {
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--green);
  margin-bottom:12px;
  position:relative;
}
.heroCard h1 {
  font-family:var(--syne);
  font-size:clamp(28px, 5vw, 42px);
  font-weight:800;
  line-height:1.1;
  color:var(--fg);
  margin:0 0 14px;
  position:relative;
}
.sub {
  color:var(--fg2);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.65;
  margin:0 0 18px;
  max-width:76ch;
  position:relative;
}
.metaRow { display:flex; flex-wrap:wrap; gap:8px; position:relative; }
.pill {
  border:1px solid var(--border);
  background:var(--bg3);
  color:var(--fg2);
  font-family:var(--mono);
  padding:5px 10px;
  border-radius:999px;
  font-size:11px;
  white-space:nowrap;
}

/* Main layout */
main { padding:18px 0 70px; }
.grid {
  display:grid;
  grid-template-columns:minmax(0, 2fr) minmax(280px, 1fr);
  gap:22px;
  align-items:start;
}
@media(max-width:980px){ .grid { grid-template-columns:1fr; } }

/* Article card */
.card {
  border:1px solid var(--border);
  background:var(--bg2);
  border-radius:var(--r);
  padding:28px;
}

/* Sidebar */
aside { position:sticky; top:80px; height:max-content; }
@media(max-width:980px){ aside { position:relative; top:auto; } }

/* Callouts */
.callout {
  border:1px solid var(--border);
  background:var(--bg3);
  border-radius:var(--r);
  padding:16px;
  margin:16px 0;
}
.callout .tag {
  display:flex; align-items:center; gap:8px;
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--fg3);
  margin-bottom:10px;
}
.tag .dot { width:7px; height:7px; border-radius:50%; }
.dot.ok { background:var(--green); }
.dot.warn { background:#FFB020; }
.dot.danger { background:#FF5757; }
.callout p { color:var(--fg2); font-family:var(--sans); font-size:15px; line-height:1.65; margin:0 0 8px; }
.callout p:last-child { margin-bottom:0; }
.callout p.note { color:var(--fg3); font-size:14px; }

/* Typography */
article h2 {
  font-family:var(--syne);
  font-size:clamp(22px, 3vw, 28px);
  font-weight:700;
  line-height:1.2;
  color:var(--fg);
  margin:32px 0 12px;
  padding-top:4px;
}
article h2:first-child { margin-top:0; }
article h3 {
  font-family:var(--syne);
  font-size:18px;
  font-weight:700;
  color:var(--fg);
  line-height:1.35;
  margin:22px 0 8px;
}
article h4 {
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--fg3);
  margin:14px 0 6px;
}
article p {
  color:var(--fg2);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.75;
  margin:0 0 12px;
}
article ul, article ol {
  color:var(--fg2);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.7;
  margin:0 0 12px;
  padding-left:20px;
}
article li { margin:6px 0; }
article strong { color:var(--fg); font-weight:600; }
article em { color:var(--fg2); }
article a { color:var(--green); text-decoration:none; }
article a:hover { text-decoration:underline; }
.hr { height:1px; background:var(--border); border:0; margin:24px 0; }

/* Link blocks */
.links a {
  display:block;
  padding:12px 14px;
  border-radius:var(--r);
  border:1px solid var(--border);
  background:var(--bg3);
  margin:8px 0;
  color:var(--fg);
  text-decoration:none;
  font-family:var(--sans);
  font-size:15px;
  font-weight:500;
  transition:border-color .2s;
}
.links a:hover { border-color:var(--border-hi); color:var(--green); }
.links a span {
  display:block;
  color:var(--fg3);
  font-size:13px;
  margin-top:4px;
  line-height:1.4;
  font-weight:400;
}

/* Tables */
.table {
  width:100%; border-collapse:separate; border-spacing:0;
  margin:24px 0; border:1px solid var(--border);
  border-radius:var(--r); overflow:hidden;
  background:var(--bg2); table-layout:fixed;
}
.table th, .table td {
  padding:12px 16px; text-align:left;
  border-bottom:1px solid var(--border); word-break:break-word;
}
.table th {
  background:var(--bg3);
  color:var(--fg);
  font-family:var(--mono);
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.06em;
  font-size:11px;
}
.table tr:last-child td { border-bottom:none; }
.table tr:hover td { background:var(--bg3); transition:.2s; }
.table td { font-family:var(--sans); font-size:15px; color:var(--fg2); }

/* Inline code / kbd */
.kbd {
  font-family:var(--mono);
  padding:2px 6px;
  border:1px solid var(--border);
  border-radius:4px;
  background:var(--bg3);
  color:var(--green);
  font-size:12px;
  white-space:nowrap;
}

/* TOC / side card */
.side-card {
  border-radius:var(--r);
  padding:18px;
  margin-bottom:16px;
  background:var(--bg2);
  border:1px solid var(--border);
}
.side-head {
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--fg3);
  margin-bottom:14px;
}
.side-chips { display:grid; gap:8px; }
.side-chips a {
  display:block;
  padding:9px 12px;
  border-radius:var(--r);
  font-family:var(--mono);
  font-size:12px;
  color:var(--fg2);
  text-decoration:none;
  background:var(--bg3);
  border:1px solid var(--border);
  transition:border-color .2s, color .2s;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.side-chips a:hover {
  border-color:var(--border-hi);
  color:var(--green);
}
.side-hint {
  font-family:var(--mono);
  font-size:12px;
  color:var(--fg3);
  margin-top:12px;
  line-height:1.5;
}

/* Sticky TOC with internal scroll */
aside#toc.side-card {
  position:sticky; top:80px;
  max-height:calc(100vh - 110px);
  overflow:auto;
  overscroll-behavior:contain;
  padding-right:10px;
}
aside#toc.side-card::-webkit-scrollbar { width:6px; }
aside#toc.side-card::-webkit-scrollbar-thumb {
  background:var(--border);
  border-radius:999px;
}
aside#toc.side-card::-webkit-scrollbar-track { background:transparent; }

@media(max-width:520px){
  aside#toc.side-card { position:static; max-height:none; overflow:visible; padding-right:0; }
  .side-chips a { white-space:normal; }
}

/* Mobile hero */
@media(max-width:560px){
  .hero { padding:40px 0 16px; }
  .heroCard { padding:22px 18px; }
}

/* Print */
@media print{
  .nav,.to-top { display:none !important; }
  body { background:#fff; color:#000; }
  a { color:#000; text-decoration:underline; }
  .card,.heroCard,.side-card { border:1px solid #ddd; box-shadow:none; background:#fff; }
}