/* SpatialKey Knowledge Base — approach mockup styles.
   Built on Aurora tokens (ds/colors_and_type.css) + components (ds/aurora-components.css). */

/* ---- SpatialKey brand mark (real logomark, Aurora visual language) ---- */
.sk-logo { display:inline-flex; align-items:center; gap:.7rem; }
.sk-mark { width:2rem; height:2rem; flex:none; background-color:var(--foreground);
  -webkit-mask:url(ds/spatialkey-logomark-black.svg) center/contain no-repeat;
  mask:url(ds/spatialkey-logomark-black.svg) center/contain no-repeat; }
.sk-word { font-family:var(--font-brand); display:inline-flex; align-items:center; gap:.5rem;
  font-size:1.15rem; line-height:1; }
.sk-word b { font-weight:700; letter-spacing:-.01em; color:var(--foreground); }
.sk-word .sep { color:var(--border); font-weight:300; }
.sk-word .sub2 { font-weight:500; color:var(--muted-foreground); }
.sk-logo.on-dark .sk-mark { background-color:#fff; }
.sk-logo.on-dark .sk-word b { color:#fff; }
.sk-logo.on-dark .sk-word .sep { color:rgba(255,255,255,.35); }
.sk-logo.on-dark .sk-word .sub2 { color:rgba(255,255,255,.72); }

/* ---- generic artboard inner reset ---- */
.sk-screen, .sk-screen *, .skC, .skC * { box-sizing:border-box; }
.sk-screen { font-family:var(--font-sans); color:var(--foreground); background:var(--background);
  font-size:14px; line-height:20px; min-height:100%; display:flex; flex-direction:column; }
.sk-screen > * { flex:none; }
.sk-eyebrow { font-family:var(--font-sans); font-size:12px; font-weight:600; letter-spacing:.06em;
  text-transform:uppercase; color:var(--muted-foreground); }
.sk-h-brand { font-family:var(--font-brand); font-weight:700; color:var(--foreground); margin:0; }

/* ===================================================================
   APPROACH A — "Ask SpatialKey" answer-first
   =================================================================== */
.skA-hero { position:relative; overflow:hidden; background:#141414; color:#fff;
  padding:30px 56px 64px; }
.skA-hero .glow { position:absolute; width:520px; height:520px; border-radius:9999px; filter:blur(28px);
  background:radial-gradient(circle, rgba(254,64,197,.55), transparent 62%); top:-160px; right:-80px; }
.skA-hero .glow2 { position:absolute; width:420px; height:420px; border-radius:9999px; filter:blur(28px);
  background:radial-gradient(circle, rgba(74,234,234,.30), transparent 62%); bottom:-200px; left:60px; }
.skA-topbar { position:relative; display:flex; align-items:center; justify-content:space-between; }
.skA-nav { display:flex; align-items:center; gap:26px; font-size:14px; color:rgba(255,255,255,.78); }
.skA-nav a { color:inherit; text-decoration:none; }
.skA-nav a:hover { color:#fff; }
.skA-herocore { position:relative; max-width:780px; margin:54px auto 0; text-align:center; }
.skA-herocore h1 { font-family:var(--font-brand); font-weight:700; font-size:46px; line-height:1.08; margin:0 0 14px; }
.skA-herocore p { font-size:17px; color:rgba(255,255,255,.72); margin:0 0 30px; }
.sk-search-xl { display:flex; align-items:center; gap:12px; height:62px; padding:0 10px 0 22px;
  background:#fff; border-radius:9999px; box-shadow:0 18px 40px -12px rgba(0,0,0,.5); }
.sk-search-xl svg { color:var(--muted-foreground); width:22px; height:22px; flex:none; }
.sk-search-xl .ph { flex:1; text-align:left; color:var(--muted-foreground); font-size:16px; display:inline-flex; align-items:center; }
.sk-caret { display:inline-block; width:2px; height:22px; background:var(--brand-background); margin-right:8px; flex:none;
  animation:sk-blink 1.1s step-end infinite; border-radius:1px; }
@keyframes sk-blink { 0%,100%{opacity:1;} 50%{opacity:0;} }
.skA-trylabel { text-align:left; max-width:780px; margin:24px auto 10px; font-size:13px; font-weight:600;
  color:rgba(255,255,255,.6); letter-spacing:.02em; }
.sk-search-xl .go { height:44px; padding:0 22px; border-radius:9999px; background:var(--brand-background);
  color:#fff; font-family:var(--font-brand); font-weight:600; font-size:14px; display:inline-flex; align-items:center; gap:8px;
  box-shadow:var(--shadow-brand-strong); }
.skA-chips { display:flex; flex-wrap:wrap; gap:10px; justify-content:flex-start; max-width:780px; margin:0 auto; }
.skA-chips .c { font-size:13px; color:rgba(255,255,255,.85); border:1px solid rgba(255,255,255,.22);
  border-radius:9999px; padding:7px 14px; background:rgba(255,255,255,.05); display:inline-flex; align-items:center; gap:7px; }
.skA-chips .c svg { width:14px; height:14px; opacity:.7; }

.skA-body { padding:36px 56px 52px; max-width:1180px; margin:0 auto; width:100%; }
.sk-answer { border:1px solid var(--border); border-radius:var(--radius-xl); background:var(--card);
  box-shadow:var(--shadow-brand-subtle); overflow:hidden; margin-top:-58px; position:relative; }
.sk-answer-head { display:flex; align-items:center; gap:10px; padding:16px 22px; border-bottom:1px solid var(--border);
  background:linear-gradient(0deg, var(--card), var(--color-magenta-50)); }
.sk-answer-head .ai { width:30px; height:30px; border-radius:9999px; background:var(--brand-background); color:#fff;
  display:inline-flex; align-items:center; justify-content:center; flex:none; }
.sk-answer-head .ai svg { width:16px; height:16px; }
.sk-answer-head b { font-family:var(--font-brand); font-size:15px; }
.sk-answer-body { padding:20px 22px 8px; }
.sk-answer-body p { margin:0 0 14px; font-size:15px; line-height:23px; color:var(--foreground); }
.sk-answer-body .step { display:flex; gap:12px; margin-bottom:12px; }
.sk-answer-body .step .n { width:22px; height:22px; border-radius:9999px; background:var(--secondary);
  color:var(--foreground); font-weight:700; font-size:12px; display:inline-flex; align-items:center; justify-content:center; flex:none;
  font-family:var(--font-brand); }
.sk-cites { display:flex; gap:10px; flex-wrap:wrap; padding:0 22px 18px; }
.sk-cite { display:flex; align-items:center; gap:9px; border:1px solid var(--border); border-radius:var(--radius-md);
  padding:9px 12px; font-size:13px; background:var(--background); min-width:210px; }
.sk-cite .ix { width:20px; height:20px; border-radius:5px; background:var(--brand-background); color:#fff; font-size:11px; font-weight:700;
  display:inline-flex; align-items:center; justify-content:center; flex:none; font-family:var(--font-brand); }
.sk-cite small { color:var(--muted-foreground); display:block; font-size:11px; }
.sk-helpful { display:flex; align-items:center; gap:12px; padding:14px 22px; border-top:1px solid var(--border);
  color:var(--muted-foreground); font-size:13px; }
.sk-helpful .q { font-weight:600; font-size:14px; color:var(--foreground); }
.sk-helpful .btns { display:flex; gap:8px; margin-left:auto; }

.sk-section-title { display:flex; align-items:baseline; justify-content:space-between; margin:40px 0 18px; }
.sk-section-title h2 { font-family:var(--font-brand); font-weight:700; font-size:22px; margin:0; }
.sk-section-title a { color:var(--brand-foreground); font-size:13px; font-weight:600; text-decoration:none; }
.sk-topics { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.sk-topic-card { border:1px solid var(--border); border-radius:var(--radius-xl); background:var(--card);
  padding:20px; box-shadow:var(--shadow-sm); display:flex; flex-direction:column; gap:10px; }
.sk-topic-card .ic { width:40px; height:40px; border-radius:var(--radius-md); background:var(--secondary);
  display:inline-flex; align-items:center; justify-content:center; color:var(--brand-foreground); }
.sk-topic-card h3 { font-family:var(--font-brand); font-weight:700; font-size:16px; margin:2px 0 0; }
.sk-topic-card p { margin:0; color:var(--muted-foreground); font-size:13px; line-height:18px; }
.sk-topic-card .meta { margin-top:auto; padding-top:8px; color:var(--muted-foreground); font-size:12px; display:flex; gap:12px; }
.sk-topic-card .meta span { display:inline-flex; align-items:center; gap:5px; }

/* ===================================================================
   APPROACH B — Role launchpad
   =================================================================== */
.skB-top { display:flex; align-items:center; justify-content:space-between; padding:16px 40px;
  border-bottom:1px solid var(--border); background:var(--background); }
.skB-top .nav { display:flex; align-items:center; gap:24px; font-size:14px; color:var(--muted-foreground); }
.skB-top .nav a { color:inherit; text-decoration:none; }
.skB-top .nav a.active { color:var(--foreground); font-weight:600; }
.skB-search { display:flex; align-items:center; gap:8px; height:36px; padding:0 14px; border:1px solid var(--border);
  border-radius:9999px; background:var(--secondary); color:var(--muted-foreground); font-size:13px; min-width:280px; }
.skB-search svg { width:16px; height:16px; }
.skB-hero { padding:46px 40px 12px; text-align:center; max-width:820px; margin:0 auto; }
.skB-hero h1 { font-family:var(--font-brand); font-weight:700; font-size:38px; margin:0 0 10px; }
.skB-hero p { color:var(--muted-foreground); font-size:16px; margin:0; }
.skB-wrap { padding:18px 40px 52px; max-width:1160px; margin:0 auto; width:100%; }
.skB-rolelabel { display:flex; align-items:center; gap:10px; margin:26px 0 16px; }
.skB-rolelabel h2 { font-family:var(--font-brand); font-weight:700; font-size:18px; margin:0; }
.skB-rolelabel .line { flex:1; height:1px; background:var(--border); }
.sk-roles { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.sk-role-card { border:1px solid var(--border); border-radius:var(--radius-xl); background:var(--card);
  padding:22px; box-shadow:var(--shadow-sm); display:flex; flex-direction:column; gap:14px; transition:box-shadow .18s; }
.sk-role-card.feature { box-shadow:var(--shadow-brand-subtle); border-color:var(--color-magenta-200); }
.sk-role-head { display:flex; align-items:center; gap:14px; }
.sk-role-ic { width:50px; height:50px; border-radius:var(--radius-lg); display:inline-flex; align-items:center; justify-content:center;
  background:var(--secondary); color:var(--brand-foreground); flex:none; }
.sk-role-ic.brand { background:var(--brand-background); color:#fff; box-shadow:var(--shadow-brand-subtle); }
.sk-role-head h3 { font-family:var(--font-brand); font-weight:700; font-size:18px; margin:0; }
.sk-role-head .sub { color:var(--muted-foreground); font-size:12.5px; }
.sk-role-card .links { display:flex; flex-direction:column; gap:9px; }
.sk-role-card .links a { display:flex; align-items:center; gap:9px; color:var(--foreground); text-decoration:none; font-size:13.5px; }
.sk-role-card .links a svg { width:14px; height:14px; color:var(--muted-foreground); flex:none; }
.sk-role-card .foot { margin-top:auto; padding-top:6px; display:flex; align-items:center; justify-content:space-between;
  color:var(--brand-foreground); font-weight:600; font-size:13px; }

.skB-popular { margin-top:40px; }
.sk-poprow { display:flex; align-items:center; gap:14px; padding:13px 4px; border-top:1px solid var(--border); }
.sk-poprow:first-of-type { border-top:none; }
.sk-poprow .ic { width:34px; height:34px; border-radius:9999px; background:var(--secondary); display:inline-flex; align-items:center;
  justify-content:center; color:var(--foreground); flex:none; }
.sk-poprow .t { font-weight:600; font-size:14px; }
.sk-poprow .d { color:var(--muted-foreground); font-size:12.5px; }
.sk-poprow .views { margin-left:auto; color:var(--muted-foreground); font-size:12px; display:inline-flex; align-items:center; gap:6px; }

/* role detail screen */
.skB-roledetail { padding:0 0 52px; }
.skB-rolebanner { padding:34px 40px; background:linear-gradient(120deg, var(--color-magenta-50), var(--background) 70%);
  border-bottom:1px solid var(--border); }
.skB-rolebanner .switch { display:inline-flex; align-items:center; gap:8px; font-size:13px; color:var(--muted-foreground);
  border:1px solid var(--border); background:var(--background); border-radius:9999px; padding:6px 12px; margin-bottom:16px; }
.skB-rolebanner h1 { font-family:var(--font-brand); font-weight:700; font-size:32px; margin:0 0 8px; display:flex; align-items:center; gap:14px; }
.skB-rolebanner h1 .ic { width:46px; height:46px; border-radius:var(--radius-lg); background:var(--brand-background); color:#fff;
  display:inline-flex; align-items:center; justify-content:center; box-shadow:var(--shadow-brand-subtle); }
.skB-rolebanner p { color:var(--muted-foreground); font-size:15px; margin:0; max-width:620px; }
.skB-rolegrid { display:grid; grid-template-columns:1.55fr 1fr; gap:26px; padding:30px 40px 0; max-width:1160px; margin:0 auto; }

/* ===================================================================
   APPROACH C — Docs library (persistent sidebar)
   =================================================================== */
.skC { display:grid; grid-template-rows:auto 1fr; height:100%;
  font-family:var(--font-sans); font-size:14px; line-height:20px; color:var(--foreground); background:var(--background); }
.skC-top { display:flex; align-items:center; gap:18px; padding:0 22px; height:60px; border-bottom:1px solid var(--border); }
.skC-top .skB-search { flex:1; max-width:460px; margin:0 auto; }
.skC-top .right { display:flex; align-items:center; gap:6px; color:var(--muted-foreground); }
.skC-iconbtn { width:36px; height:36px; border-radius:9999px; display:inline-flex; align-items:center; justify-content:center;
  color:var(--foreground); }
.skC-iconbtn:hover { background:var(--accent); }
.skC-body { display:grid; grid-template-columns:264px 1fr; min-height:0; }
.skC-side { border-right:1px solid var(--border); background:var(--background); padding:18px 12px; overflow:hidden; }
.skC-side .grp { margin-bottom:18px; }
.skC-side .grp > .lbl { font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color:var(--muted-foreground); padding:4px 10px 6px; }
.skC-nav { display:flex; align-items:center; gap:9px; padding:7px 10px; border-radius:var(--radius-md); font-size:13.5px;
  color:var(--foreground); cursor:pointer; }
.skC-nav svg { width:16px; height:16px; flex:none; color:var(--muted-foreground); }
.skC-nav > .skC-navcount { margin-left:auto; }
.skC-navcount { font-size:11px; font-weight:600; line-height:1; color:var(--muted-foreground);
  background:var(--muted); border-radius:999px; padding:3px 7px; min-width:18px; text-align:center;
  opacity:0; transition:opacity .15s; }
.skC-nav:hover .skC-navcount, .skC-nav.active .skC-navcount { opacity:1; }
.skC-nav.active .skC-navcount { color:var(--brand-foreground); background:var(--background); }
.skC-nav:hover { background:var(--accent); }
.skC-nav.active { background:var(--accent); font-weight:600; }
.skC-nav.active svg { color:var(--brand-foreground); }
.skC-sub { display:flex; flex-direction:column; gap:1px; margin:2px 0 2px 18px; padding-left:10px; border-left:1px solid var(--border); }
.skC-sub a { display:flex; align-items:center; font-size:13px; color:var(--muted-foreground); text-decoration:none; padding:5px 8px; border-radius:6px; }
.skC-subcount { margin-left:auto; font-size:10.5px; font-weight:600; line-height:1; color:var(--muted-foreground);
  background:var(--muted); border-radius:999px; padding:2px 6px; min-width:16px; text-align:center;
  opacity:0; transition:opacity .15s; }
.skC-sub a:hover .skC-subcount, .skC-sub a.active .skC-subcount { opacity:1; }
.skC-sub a:hover { color:var(--foreground); background:var(--accent); }
.skC-sub a.active { color:var(--brand-foreground); font-weight:600; }

.skC-main { overflow:hidden; background:var(--background); }
.skC-content { padding:34px 44px 52px; max-width:980px; }
.skC-hubhead { margin-bottom:24px; }
.skC-hubhead h1 { font-family:var(--font-brand); font-weight:700; font-size:30px; margin:0 0 8px; }
.skC-hubhead p { color:var(--muted-foreground); font-size:15px; margin:0; max-width:640px; }
.skC-hub { display:flex; flex-direction:column; gap:16px; }
.skC-hubcard { border:1px solid var(--border); border-radius:var(--radius-xl); background:var(--card); box-shadow:var(--shadow-sm);
  padding:22px 24px; }
.skC-hubcard .hd { display:flex; align-items:center; gap:12px; margin-bottom:14px; }
.skC-hubcard .hd .ic { width:38px; height:38px; border-radius:var(--radius-md); background:var(--secondary);
  display:inline-flex; align-items:center; justify-content:center; color:var(--brand-foreground); flex:none; }
.skC-hubcard .hd h2 { font-family:var(--font-brand); font-weight:700; font-size:18px; margin:0; }
.skC-hubcard .hd .cnt { margin-left:auto; color:var(--muted-foreground); font-size:12.5px; }
.skC-hublinks { display:grid; grid-template-columns:repeat(2,1fr); gap:2px 28px; }
.skC-hublink { display:flex; align-items:center; gap:9px; padding:8px 0; font-size:13.5px; color:var(--foreground);
  text-decoration:none; border-top:1px solid var(--border); }
.skC-hublink svg { width:14px; height:14px; color:var(--muted-foreground); flex:none; }
.skC-hublink .vid { margin-left:auto; }
.skC-hublink:hover { color:var(--brand-foreground); }

/* article reading view */
.skC-article { display:grid; grid-template-columns:1fr 220px; gap:40px; }
.skC-bc { display:flex; align-items:center; gap:7px; font-size:12.5px; color:var(--muted-foreground); margin-bottom:14px; }
.skC-bc svg { width:13px; height:13px; }
.skC-article h1 { font-family:var(--font-brand); font-weight:700; font-size:30px; margin:0 0 14px; line-height:1.15; }
.skC-artmeta { display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding-bottom:18px; margin-bottom:22px;
  border-bottom:1px solid var(--border); color:var(--muted-foreground); font-size:12.5px; }
.skC-artmeta .who { display:inline-flex; align-items:center; gap:7px; }
.skC-prose p { font-size:15px; line-height:24px; margin:0 0 16px; color:var(--foreground); }
.skC-prose h2 { font-family:var(--font-brand); font-weight:700; font-size:20px; margin:26px 0 12px; }
.skC-prose ol { padding-left:20px; margin:0 0 16px; }
.skC-prose li { font-size:15px; line-height:24px; margin-bottom:8px; }
.skC-figure { border:1px solid var(--border); border-radius:var(--radius-lg); background:var(--secondary);
  height:230px; display:flex; align-items:center; justify-content:center; color:var(--muted-foreground); font-size:13px;
  flex-direction:column; gap:8px; margin:8px 0 20px; }
.skC-figure svg { width:30px; height:30px; opacity:.6; }
.skC-toc { position:sticky; top:0; align-self:start; }
.skC-toc .lbl { font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--muted-foreground); margin-bottom:12px; }
.skC-toc a { display:block; font-size:13px; color:var(--muted-foreground); text-decoration:none; padding:5px 0 5px 12px;
  border-left:2px solid var(--border); cursor:pointer; transition:color .15s, border-left-color .15s; }
.skC-toc a:hover { color:var(--foreground); border-left-color:var(--muted-foreground); }
.skC-toc a.active { color:var(--brand-foreground); border-left-color:var(--brand-background); font-weight:600; }
.skC-toc a.active:hover { color:var(--brand-foreground); border-left-color:var(--brand-background); }
.skC-toc .related { margin-top:24px; }
.skC-toc .related a { border-left:none; padding:6px 0; color:var(--foreground); }
.skC-toc .related a:hover { color:var(--brand-foreground); }

/* shared helpful footer for article */
.sk-helpful-box { margin-top:30px; border:1px solid var(--border); border-radius:var(--radius-xl); background:var(--card);
  padding:18px 22px; display:flex; align-items:center; gap:14px; box-shadow:var(--shadow-sm); }
.sk-helpful-box .q { font-weight:600; font-size:14px; }
.sk-helpful-box .btns { display:flex; gap:10px; margin-left:auto; }

/* small inline badge helper for video */
.sk-vid { display:inline-flex; align-items:center; gap:4px; color:var(--brand-foreground); font-size:11px; font-weight:600; }
.sk-vid svg { width:12px; height:12px; }