/* SpatialKey Knowledge Base — interactive prototype styles.
   Layered on top of kb.css (which has the hero, sidebar, hub & article looks). */

html, body { margin:0; height:100%; background:var(--background); }
#root { min-height:100vh; }
* { box-sizing:border-box; }
a { color:inherit; }

.skapp { min-height:100vh; display:flex; flex-direction:column; font-family:var(--font-sans); color:var(--foreground); background:var(--background); }
.skapp-main { flex:1; min-height:0; }

/* fade-in on view change */
.sk-fade { animation:sk-fade .28s ease both; }
@keyframes sk-fade { from{opacity:0;} to{opacity:1;} }

/* ---------- interactive hero search (real input) ---------- */
.skA-hero.live { padding-bottom:74px; }
.sk-searchwrap { position:relative; max-width:720px; margin:0 auto; }
.sk-search-xl input { flex:1; border:none; outline:none; background:transparent; font-family:var(--font-sans);
  font-size:16px; color:var(--foreground); min-width:0; }
.sk-search-xl input::placeholder { color:var(--muted-foreground); }
.sk-search-xl .go { border:none; cursor:pointer; }
.sk-search-xl .go:disabled { opacity:.55; cursor:default; }

/* topbar search (inner pages) — make it a real button/input */
.skC-search { flex:1; max-width:520px; margin:0 auto; position:relative; }
.skC-search .field { display:flex; align-items:center; gap:8px; height:38px; padding:0 12px; border:1px solid var(--border);
  border-radius:9999px; background:var(--secondary); color:var(--muted-foreground); font-size:13px; cursor:text; width:100%; }
.skC-search .field svg { width:16px; height:16px; }
.skC-search input { flex:1; border:none; outline:none; background:transparent; font-family:var(--font-sans); font-size:13px; color:var(--foreground); }

/* ---------- suggestions dropdown ---------- */
.sk-suggest { position:absolute; top:calc(100% + 10px); left:0; right:0; background:var(--popover); color:var(--popover-foreground);
  border:1px solid var(--border); border-radius:var(--radius-xl); box-shadow:0 24px 60px -12px rgba(0,0,0,.35); overflow:hidden; z-index:60; text-align:left; }
.sk-suggest-ask { display:flex; align-items:center; gap:10px; padding:13px 16px; cursor:pointer; border-bottom:1px solid var(--border);
  background:linear-gradient(0deg,var(--card),var(--color-magenta-50)); }
.dark .sk-suggest-ask { background:var(--card); }
.sk-suggest-ask .ai { width:26px;height:26px;border-radius:9999px;background:var(--brand-background);color:#fff;display:inline-flex;align-items:center;justify-content:center;flex:none; }
.sk-suggest-ask b { font-family:var(--font-brand); font-size:14px; }
.sk-suggest-ask .q { color:var(--muted-foreground); font-size:13px; }
.sk-suggest-list { max-height:300px; overflow:auto; padding:6px; }
.sk-suggest-item { display:flex; align-items:center; gap:10px; padding:9px 12px; border-radius:var(--radius-md); cursor:pointer; font-size:13.5px; color:var(--foreground); }
.sk-suggest-item:hover, .sk-suggest-item.active { background:var(--accent); }
.sk-suggest-item svg { width:15px; height:15px; color:var(--muted-foreground); flex:none; }
.sk-suggest-item .sec { margin-left:auto; color:var(--muted-foreground); font-size:11px; flex:none; }
.sk-suggest-empty { padding:18px 16px; color:var(--muted-foreground); font-size:13px; }

/* ---------- search / answer page ---------- */
.sk-resultwrap { display:grid; grid-template-columns:1fr 320px; gap:32px; padding:30px 40px 56px; max-width:1140px; margin:0 auto; width:100%; }
.sk-q-head { margin-bottom:18px; }
.sk-q-head .lbl { font-size:12px; font-weight:600; letter-spacing:.05em; text-transform:uppercase; color:var(--muted-foreground); margin-bottom:6px; }
.sk-q-head h1 { font-family:var(--font-brand); font-weight:700; font-size:26px; margin:0; line-height:1.2; }
.sk-answer.live { margin-top:0; }
.sk-ans-md p { margin:0 0 13px; font-size:15px; line-height:23px; }
.sk-ans-md ol, .sk-ans-md ul { margin:0 0 13px; padding-left:4px; list-style:none; }
.sk-ans-md li .sk-li-body { flex:1; min-width:0; }
.sk-ans-md li .sk-li-body > .sk-ol, .sk-ans-md li .sk-li-body > .sk-ul { margin:9px 0 2px; padding-left:0; }
.sk-ans-md li { display:flex; gap:11px; margin-bottom:10px; font-size:15px; line-height:22px; }
.sk-ans-md li .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);margin-top:1px; }
.sk-ans-md li .b { width:6px;height:6px;border-radius:9999px;background:var(--brand-background);flex:none;margin-top:8px; }
.sk-ans-md strong { font-weight:700; }
.sk-ans-md .sk-ans-h { font-family:var(--font-brand); font-weight:700; font-size:15px; margin:2px 0 9px; }

/* loading shimmer */
.sk-skel { border-radius:8px; background:linear-gradient(90deg,var(--secondary) 25%,var(--muted) 37%,var(--secondary) 63%); background-size:400% 100%; animation:sk-shim 1.3s ease infinite; }
@keyframes sk-shim { 0%{background-position:100% 0;} 100%{background-position:-100% 0;} }
.sk-thinking { display:flex; align-items:center; gap:10px; color:var(--muted-foreground); font-size:14px; padding:4px 0; }
.sk-spin { width:16px;height:16px;border-radius:9999px;border:2px solid var(--border);border-top-color:var(--brand-background);animation:sk-rot .7s linear infinite; }
@keyframes sk-rot { to{transform:rotate(360deg);} }

/* right rail */
.sk-rail .sk-cite { cursor:pointer; }
.sk-cite.cited { border-color:var(--color-magenta-300); box-shadow:var(--shadow-brand-subtle); }
.sk-relq a { display:flex; gap:8px; align-items:flex-start; padding:9px 0; border-top:1px solid var(--border); font-size:13px; color:var(--foreground); text-decoration:none; cursor:pointer; }
.sk-relq a:hover { color:var(--brand-foreground); }
.sk-relq a svg { width:14px;height:14px;color:var(--muted-foreground);flex:none;margin-top:2px; }

/* ---------- section browse page ---------- */
.sk-secthead { margin-bottom:22px; }
.sk-secthead h1 { font-family:var(--font-brand); font-weight:700; font-size:30px; margin:0 0 8px; }
.sk-secthead p { color:var(--muted-foreground); font-size:15px; margin:0; max-width:820px; }
.sk-subgroup { margin-bottom:30px; }
.sk-subgroup h2 { font-family:var(--font-brand); font-weight:700; font-size:17px; margin:0 0 12px; display:flex; align-items:center; gap:9px; }
.sk-artlist { display:grid; grid-template-columns:repeat(2,1fr); gap:12px; }
.sk-artcard { display:flex; gap:13px; align-items:flex-start; border:1px solid var(--border); border-radius:var(--radius-lg); background:var(--card);
  padding:15px 16px; cursor:pointer; transition:box-shadow .16s, border-color .16s; text-decoration:none; color:var(--foreground); }
.sk-artcard:hover { box-shadow:var(--shadow-brand-subtle); border-color:var(--color-magenta-200); }
.sk-artcard .ic { width:34px;height:34px;border-radius:var(--radius-md);background:var(--secondary);display:inline-flex;align-items:center;justify-content:center;color:var(--brand-foreground);flex:none; }
.sk-artcard h3 { font-family:var(--font-brand); font-weight:700; font-size:14.5px; margin:0 0 3px; }
.sk-artcard p { margin:0; color:var(--muted-foreground); font-size:12.5px; line-height:17px; }
.sk-artcard .row { display:flex; align-items:center; gap:10px; margin-top:7px; color:var(--muted-foreground); font-size:11px; }

/* ---------- article reader ---------- */
.sk-figph { border:1px dashed var(--input); border-radius:var(--radius-lg); background:var(--secondary); padding:18px 18px 18px 46px;
  position:relative; color:var(--muted-foreground); font-size:13px; line-height:18px; margin:10px 0 20px; min-height:64px; display:flex; align-items:center; }
.sk-figph::before { content:""; position:absolute; left:16px; top:18px; width:18px; height:18px; background:var(--muted-foreground);
  -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'><rect x='3' y='3' width='18' height='18' rx='2'/><circle cx='9' cy='9' r='2'/><path d='m21 15-3.6-3.6a2 2 0 0 0-2.8 0L6 21'/></svg>") center/contain no-repeat;
  mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'><rect x='3' y='3' width='18' height='18' rx='2'/><circle cx='9' cy='9' r='2'/><path d='m21 15-3.6-3.6a2 2 0 0 0-2.8 0L6 21'/></svg>") center/contain no-repeat; }
.sk-figph::after { content:attr(data-fig); }
.sk-fig { margin:18px 0 22px; }
.sk-fig img { display:block; max-width:100%; height:auto; border-radius:var(--radius-lg); background:var(--card); }
.sk-fig figcaption { font-size:13px; line-height:18px; color:var(--muted-foreground); margin-top:8px; }
.sk-prose-live h2 { font-family:var(--font-brand); font-weight:700; font-size:21px; margin:30px 0 12px; scroll-margin-top:80px; }
.sk-prose-live h3 { font-family:var(--font-brand); font-weight:700; font-size:17px; margin:22px 0 10px; scroll-margin-top:80px; }
.sk-prose-live p { font-size:15px; line-height:24px; margin:0 0 15px; }
.sk-prose-live ul, .sk-prose-live ol { margin:0 0 16px; padding-left:22px; }
.sk-prose-live li { font-size:15px; line-height:23px; margin-bottom:7px; }
.sk-prose-live a { color:var(--brand-foreground); text-decoration:underline; text-underline-offset:2px; }
.sk-prose-live .sk-embed { position:relative; margin:18px 0; border-radius:var(--radius-lg); overflow:hidden; background:#000; aspect-ratio:16/9; box-shadow:var(--shadow-sm); }
.sk-prose-live .sk-embed iframe { width:100%; height:100%; border:0; display:block; }
.sk-prose-live strong { font-weight:700; }
/* tables (e.g. permission matrices) */
.sk-prose-live table { width:100%; border-collapse:separate; border-spacing:0; margin:18px 0 22px; font-size:13.5px; border:1px solid var(--border); border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-sm); }
.sk-prose-live th, .sk-prose-live td { padding:10px 14px; border-bottom:1px solid var(--border); border-right:1px solid var(--border); text-align:left; vertical-align:top; line-height:19px; }
.sk-prose-live thead th, .sk-prose-live th { background:var(--secondary); font-family:var(--font-brand); font-weight:700; }
.sk-prose-live th:last-child, .sk-prose-live td:last-child { border-right:none; }
.sk-prose-live tbody tr:last-child td { border-bottom:none; }
.sk-prose-live tbody tr:nth-child(even) { background:color-mix(in srgb,var(--secondary) 45%,transparent); }
.sk-permtable th:not(:first-child), .sk-permtable td:not(:first-child) { text-align:center; white-space:nowrap; }
.sk-prose-live .yes { color:var(--color-green-700); font-weight:700; }
.sk-prose-live .no { color:var(--muted-foreground); }
.sk-prose-live caption { caption-side:top; text-align:left; font-size:13px; font-style:italic; color:var(--muted-foreground); margin-bottom:8px; }
.sk-prose-live pre { font-family:var(--font-mono); font-size:12.5px; line-height:1.55; background:var(--secondary); border:1px solid var(--border); border-radius:var(--radius-md); padding:14px 16px; overflow-x:auto; margin:0 0 16px; white-space:pre; tab-size:2; }
.sk-prose-live code { font-family:var(--font-mono); font-size:.88em; background:var(--secondary); border:1px solid var(--border); border-radius:5px; padding:1px 5px; }
.sk-prose-live pre code { background:none; border:0; padding:0; font-size:inherit; }
.sk-prose-live a.sk-deadlink { color:var(--muted-foreground); text-decoration:none; cursor:default; }
.sk-prose-live img { max-width:100% !important; height:auto !important; }
.sk-prose-live figure.sk-fig { margin:18px 0 22px; }
.sk-prose-live figure.sk-fig img { display:block; max-width:100%; height:auto; border-radius:var(--radius-lg); background:var(--card); }
/* FAQ accordions (native <details>) */
.sk-prose-live details.sk-faq { border:1px solid var(--border); border-radius:var(--radius-lg); background:var(--card);
  box-shadow:var(--shadow-xs); margin:0 0 10px; overflow:hidden; }
.sk-prose-live details.sk-faq > summary { list-style:none; cursor:pointer; display:flex; align-items:flex-start; gap:14px;
  padding:14px 18px; font-family:var(--font-brand); font-weight:700; font-size:15px; line-height:1.35; color:var(--foreground);
  transition:background .15s, color .15s; }
.sk-prose-live details.sk-faq > summary::-webkit-details-marker { display:none; }
.sk-prose-live details.sk-faq > summary::after { content:""; flex:none; margin-left:auto; width:18px; height:18px; margin-top:1px;
  background:currentColor; opacity:.5; transition:transform .2s ease, opacity .15s;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") center/contain no-repeat; }
.sk-prose-live details.sk-faq > summary:hover { background:var(--accent); color:var(--brand-foreground); }
.sk-prose-live details.sk-faq > summary:hover::after { opacity:.9; }
.sk-prose-live details.sk-faq[open] > summary { border-bottom:1px solid var(--border); }
.sk-prose-live details.sk-faq[open] > summary::after { transform:rotate(180deg); }
.sk-prose-live details.sk-faq .sk-faq-body { padding:6px 18px 2px; }
.sk-prose-live details.sk-faq .sk-faq-body > :first-child { margin-top:12px; }
.sk-prose-live details.sk-faq .sk-faq-body > :last-child { margin-bottom:14px; }
.sk-prose-live p.sk-faq-group { font-family:var(--font-brand); font-weight:700; font-size:12.5px; text-transform:uppercase;
  letter-spacing:.05em; color:var(--muted-foreground); margin:24px 0 10px; }
@media print { .sk-prose-live details.sk-faq .sk-faq-body { display:block !important; } .sk-prose-live details.sk-faq > summary::after { display:none; } }
/* video gallery cards (e.g. 101 Demos) */
.sk-vidgrid { display:grid; grid-template-columns:repeat(2,1fr); gap:16px; margin:10px 0 20px; }
.sk-prose-live a.sk-vidcard { display:block; text-decoration:none; color:inherit; border:1px solid var(--border); border-radius:var(--radius-lg); overflow:hidden; background:var(--card); transition:box-shadow .15s, border-color .15s; }
.sk-prose-live a.sk-vidcard:hover { box-shadow:var(--shadow-brand-subtle); border-color:var(--color-magenta-200); }
.sk-vidcard .thumb { aspect-ratio:16/9; background:var(--secondary); display:flex; align-items:center; justify-content:center; }
.sk-vidcard .thumb .pl { width:50px; height:50px; border-radius:9999px; background:var(--brand-background); color:#fff; display:flex; align-items:center; justify-content:center; padding-left:3px; font-size:17px; box-shadow:var(--shadow-brand-subtle); }
.sk-vidcard .cap { display:flex; align-items:center; gap:8px; padding:12px 14px; font-size:13.5px; font-weight:600; }
.sk-vidcard .cap .ext { margin-left:auto; color:var(--muted-foreground); font-weight:400; font-size:12px; }

.sk-vote-btn { } /* uses au-btn outline */
.sk-vote-btn.on { background:var(--primary); color:var(--primary-foreground); border-color:var(--primary); }
.sk-comments { margin-top:26px; }
.sk-comments h3 { font-family:var(--font-brand); font-weight:700; font-size:16px; margin:0 0 14px; }
/* helpful feedback comment panel */
.sk-fb-panel { margin-top:14px; display:flex; flex-direction:column; gap:9px; max-width:560px; }
.sk-fb-panel textarea { min-height:70px; }
/* insights feedback list */
.sk-fbrow { display:flex; gap:11px; padding:13px 0; border-top:1px solid var(--border); align-items:flex-start; }
.sk-fbrow:first-of-type { border-top:none; }
.sk-fbrow .badge-ic { width:26px; height:26px; border-radius:9999px; display:inline-flex; align-items:center; justify-content:center; flex:none; }
.sk-fbrow .badge-ic.up { background:var(--color-green-50); color:var(--color-green-700); }
.sk-fbrow .badge-ic.down { background:var(--color-red-50); color:var(--color-red-700); }
.dark .sk-fbrow .badge-ic.up { background:var(--color-green-950); }
.dark .sk-fbrow .badge-ic.down { background:var(--color-red-950); }
.sk-fbrow .fb-art { font-weight:600; font-size:13px; }
.sk-fbrow .fb-body { font-size:13.5px; line-height:19px; margin-top:2px; }
.sk-fbrow .fb-when { color:var(--muted-foreground); font-size:11.5px; margin-top:3px; }
.sk-comment { display:flex; gap:12px; padding:14px 0; border-top:1px solid var(--border); }
.sk-comment .av { width:34px;height:34px;border-radius:9999px;background:var(--primary);color:var(--primary-foreground);
  display:inline-flex;align-items:center;justify-content:center;font-family:var(--font-brand);font-weight:600;font-size:13px;flex:none; }
.sk-comment .who { font-weight:600; font-size:13.5px; }
.sk-comment .when { color:var(--muted-foreground); font-size:12px; margin-left:8px; font-weight:400; }
.sk-comment .body { font-size:14px; line-height:20px; margin-top:3px; }
.sk-commentform { display:flex; flex-direction:column; gap:10px; margin-top:16px; }
.sk-commentform textarea { min-height:72px; }

/* ---------- insights (maintainer) ---------- */
.sk-insights { padding:30px 40px 56px; max-width:1140px; margin:0 auto; }
.sk-ins-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-bottom:24px; }
.sk-ins-2 { display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.sk-statcard { cursor:pointer; transition:box-shadow .15s, border-color .15s; }
.sk-statcard:hover { box-shadow:var(--shadow-brand-subtle); border-color:var(--color-magenta-200); }
.au-card.sk-statcard.active { border-color:var(--color-magenta-300); box-shadow:var(--shadow-brand-subtle); }
.sk-stat-cta { display:flex; align-items:center; gap:4px; font-size:12px; color:var(--brand-foreground); font-weight:600; }
/* article editor */
.sk-editor { 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:8px; }
.sk-editor-head { display:flex; align-items:center; gap:10px; padding-bottom:14px; margin-bottom:4px; border-bottom:1px solid var(--border); position:sticky; top:60px; z-index:33; background:var(--card); }
.sk-editor-body { border:1px solid var(--input); border-radius:var(--radius-md); padding:16px 20px; min-height:340px; box-shadow:var(--shadow-xs); outline:none; background:var(--background); }
.sk-editor-body:focus { border-color:var(--ring); box-shadow:0 0 0 3px color-mix(in srgb,var(--ring) 40%,transparent); }
.dark .sk-editor-body { background:rgba(255,255,255,.04); }
.sk-editor-body > :first-child { margin-top:0; }
/* editor formatting toolbar + link bar */
.sk-editstack { display:flex; flex-direction:column; }
.sk-fmtbar { display:flex; align-items:center; gap:3px; flex-wrap:wrap; padding:6px; border:1px solid var(--input); border-bottom:none; border-radius:var(--radius-md) var(--radius-md) 0 0; background:var(--secondary); }
.sk-fmtbtn { display:inline-flex; align-items:center; gap:5px; height:30px; min-width:30px; justify-content:center; padding:0 9px; border-radius:var(--radius-sm); font-family:var(--font-brand); font-weight:600; font-size:13px; color:var(--foreground); cursor:pointer; user-select:none; transition:background .12s,color .12s; }
.sk-fmtbtn:hover { background:var(--accent); color:var(--brand-foreground); }
.sk-fmtdiv { width:1px; align-self:stretch; margin:5px 3px; background:var(--border); }
.sk-linkbar { display:flex; align-items:center; gap:8px; padding:9px 10px; border:1px solid var(--input); border-bottom:none; background:var(--card); }
.sk-fmttools { position:sticky; top:113px; z-index:31; display:flex; flex-direction:column; }
.sk-linkbar .au-input { flex:1; height:34px; margin:0; }
.sk-linkstack { display:flex; flex-direction:column; }
.sk-secpick { display:flex; flex-direction:column; gap:7px; padding:9px 10px 11px; border:1px solid var(--input); border-top:none; border-bottom:none; background:var(--card); }
.sk-secpick .lbl, .sk-artpick .lbl { display:flex; align-items:center; gap:5px; font-size:10.5px; text-transform:uppercase; letter-spacing:.05em; color:var(--muted-foreground); font-family:var(--font-brand); font-weight:600; }
.sk-secpick .chips { display:flex; flex-wrap:wrap; gap:6px; }
.sk-artpick { display:flex; flex-direction:column; gap:8px; padding:10px 10px 11px; border-left:1px solid var(--input); border-right:1px solid var(--input); border-top:1px solid var(--border); background:var(--card); }
.sk-artpick .au-input { margin:0; height:34px; }
.sk-artpick .results { display:flex; flex-direction:column; gap:2px; max-height:196px; overflow:auto; }
.sk-artpick .empty { font-size:12.5px; color:var(--muted-foreground); padding:5px 3px; }
.sk-artopt { display:flex; align-items:center; gap:10px; padding:7px 9px; border-radius:var(--radius-md); cursor:pointer; transition:background .12s; }
.sk-artopt:hover { background:var(--accent); }
.sk-artopt .t { font-size:13px; font-weight:600; color:var(--foreground); flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sk-artopt:hover .t { color:var(--brand-foreground); }
.sk-artopt .sec { font-size:11.5px; color:var(--muted-foreground); flex:none; white-space:nowrap; }
.sk-secchip { display:inline-flex; align-items:center; max-width:240px; padding:4px 11px; border-radius:999px; border:1px solid var(--border); background:var(--background); font-size:12.5px; line-height:1.3; color:var(--foreground); cursor:pointer; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; transition:background .12s,color .12s,border-color .12s; }
.sk-secchip:hover { background:var(--accent); color:var(--brand-foreground); border-color:var(--brand-foreground); }
.sk-secchip.sub { color:var(--muted-foreground); }
.sk-editstack .sk-editor-body { border-top-left-radius:0; border-top-right-radius:0; }
.sk-editnote { display:flex; align-items:flex-start; gap:14px; flex-wrap:wrap; margin-top:10px; }
.sk-editnote p.muted { font-size:12.5px; margin:0; display:flex; gap:6px; align-items:flex-start; max-width:560px; line-height:1.55; }
.sk-editnote .au-btn { margin-left:auto; }
.sk-gaprow { display:flex; align-items:center; gap:12px; padding:11px 0; border-top:1px solid var(--border); font-size:14px; }
.sk-gaprow:first-of-type { border-top:none; }
.sk-gaprow .cnt { margin-left:auto; }
.sk-bar { height:8px; border-radius:9999px; background:var(--secondary); overflow:hidden; flex:1; }
.sk-bar > i { display:block; height:100%; background:var(--brand-background); border-radius:9999px; }

/* ---------- misc ---------- */
.sk-link { color:var(--brand-foreground); font-weight:600; text-decoration:none; cursor:pointer; }
.sk-backbar { display:flex; align-items:center; gap:8px; color:var(--muted-foreground); font-size:13px; cursor:pointer; margin-bottom:16px; width:fit-content; }
.sk-backbar:hover { color:var(--foreground); }
.skC-iconbtn { cursor:pointer; }
.skC-iconbtn.activeview { background:var(--accent); color:var(--brand-foreground); }
.skA-nav a, .skB-top .nav a, .skC-nav, .skC-sub a, .skC-hublink, .sk-poprow, .sk-cite, .skA-chips .c { cursor:pointer; }
.skA-chips .c:hover { background:rgba(255,255,255,.12); }
.sk-poprow { border-radius:var(--radius-md); padding-left:8px; padding-right:8px; transition:background .15s; }
.sk-poprow:hover { background:var(--accent); }
.skC-hublink, .skC-sub a, .skC-nav { transition:color .15s, background .15s; }

/* ---------- image edit popup ---------- */
.sk-img-popup { background:var(--popover); color:var(--popover-foreground); border:1px solid var(--border); border-radius:var(--radius-xl); box-shadow:0 16px 48px -8px rgba(0,0,0,.28),0 4px 12px -4px rgba(0,0,0,.14); padding:16px; width:316px; display:flex; flex-direction:column; gap:6px; }
.sk-img-popup-head { display:flex; align-items:center; gap:7px; font-family:var(--font-brand); font-weight:700; font-size:13.5px; margin-bottom:4px; }
.sk-img-popup-close { margin-left:auto; cursor:pointer; width:26px; height:26px; border-radius:9999px; display:inline-flex; align-items:center; justify-content:center; color:var(--muted-foreground); flex:none; }
.sk-img-popup-close:hover { background:var(--accent); color:var(--foreground); }
.sk-img-popup .au-label { margin-top:2px; }
.sk-img-sizes { display:flex; gap:5px; margin-top:2px; }
.sk-img-sizebtn { flex:1; height:32px; border:1px solid var(--border); border-radius:var(--radius-md); display:inline-flex; align-items:center; justify-content:center; font-size:12.5px; font-family:var(--font-brand); font-weight:600; cursor:pointer; transition:background .12s,color .12s,border-color .12s; color:var(--foreground); }
.sk-img-sizebtn:hover { background:var(--accent); border-color:var(--muted-foreground); }
.sk-img-sizebtn.on { background:var(--primary); color:var(--primary-foreground); border-color:var(--primary); }
.sk-img-size-label { margin:2px 0 0; font-size:11.5px; color:var(--muted-foreground); text-align:center; }
.sk-img-popup-footer { padding-top:10px; border-top:1px solid var(--border); margin-top:4px; }
.sk-img-remove { color:var(--color-red-600) !important; border-color:var(--color-red-200) !important; }
.sk-img-remove:hover { background:var(--color-red-50) !important; }
.dark .sk-img-remove:hover { background:var(--color-red-950) !important; }

/* selected image highlight in editor */
.sk-editor-body img.sk-img-sel { outline:2px solid var(--brand-background); outline-offset:2px; border-radius:3px; }
.sk-editor-body img { cursor:pointer; }

/* image text wrap (float) */
.sk-editor-body figure.sk-fig[data-imgwrap="left"],
.sk-prose-live figure.sk-fig[data-imgwrap="left"] { float:left; margin:0 12px 6px 0; }
.sk-editor-body figure.sk-fig[data-imgwrap="right"],
.sk-prose-live figure.sk-fig[data-imgwrap="right"] { float:right; margin:0 0 6px 12px; }
.sk-editor-body img[data-imgwrap="left"] { float:left; margin:0 12px 6px 0; }
.sk-editor-body img[data-imgwrap="right"] { float:right; margin:0 0 6px 12px; }
.sk-prose-live img[data-imgwrap="left"] { float:left; margin:0 12px 6px 0; }
.sk-prose-live img[data-imgwrap="right"] { float:right; margin:0 0 6px 12px; }
/* when floating, size the figure (not the img) so % resolves against the prose container */
.sk-editor-body figure.sk-fig[data-imgwrap="left"] img,
.sk-editor-body figure.sk-fig[data-imgwrap="right"] img,
.sk-prose-live figure.sk-fig[data-imgwrap="left"] img,
.sk-prose-live figure.sk-fig[data-imgwrap="right"] img { max-width:100% !important; height:auto !important; }
.sk-editor-body figure.sk-fig[data-imgwrap="left"][data-imgsize="small"],
.sk-editor-body figure.sk-fig[data-imgwrap="right"][data-imgsize="small"],
.sk-prose-live figure.sk-fig[data-imgwrap="left"][data-imgsize="small"],
.sk-prose-live figure.sk-fig[data-imgwrap="right"][data-imgsize="small"] { max-width:33%; }
.sk-editor-body figure.sk-fig[data-imgwrap="left"][data-imgsize="medium"],
.sk-editor-body figure.sk-fig[data-imgwrap="right"][data-imgsize="medium"],
.sk-prose-live figure.sk-fig[data-imgwrap="left"][data-imgsize="medium"],
.sk-prose-live figure.sk-fig[data-imgwrap="right"][data-imgsize="medium"] { max-width:50%; }
.sk-editor-body figure.sk-fig[data-imgwrap="left"][data-imgsize="large"],
.sk-editor-body figure.sk-fig[data-imgwrap="right"][data-imgsize="large"],
.sk-prose-live figure.sk-fig[data-imgwrap="left"][data-imgsize="large"],
.sk-prose-live figure.sk-fig[data-imgwrap="right"][data-imgsize="large"] { max-width:75%; }
/* clearfix so content below floated images flows correctly */
.sk-editor-body::after,.sk-prose-live::after { content:""; display:table; clear:both; }

/* image display sizes — editor + reader (max-width only — never upscale beyond natural size) */
.sk-editor-body img[data-imgsize="small"],.sk-prose-live img[data-imgsize="small"] { max-width:33% !important; }
.sk-editor-body img[data-imgsize="medium"],.sk-prose-live img[data-imgsize="medium"] { max-width:50% !important; }
.sk-editor-body img[data-imgsize="large"],.sk-prose-live img[data-imgsize="large"] { max-width:75% !important; }
.sk-editor-body img[data-imgsize="full"],.sk-prose-live img[data-imgsize="full"] { max-width:100% !important; }

/* footer */
.sk-foot { border-top:1px solid var(--border); padding:22px 40px; display:flex; align-items:center; gap:18px; color:var(--muted-foreground); font-size:12.5px; flex-wrap:wrap; }
.sk-foot .sp { flex:1; }
.sk-foot a { cursor:pointer; text-decoration:none; color:var(--muted-foreground); }
.sk-foot a:hover { color:var(--foreground); }

/* ---------- app layout overrides (document scroll + sticky chrome) ---------- */
.skapp .skC { height:auto; }
.skapp .skC-top { position:sticky; top:0; z-index:40; background:var(--background); }
.skapp .skC-body { min-height:calc(100vh - 60px); position:relative; }
.skapp .skC-body::before { content:""; position:absolute; top:0; bottom:0; left:264px; width:1px; background:var(--border); }
.skapp .skC-side { overflow:visible; position:sticky; top:60px; align-self:start; max-height:calc(100vh - 60px); overflow-y:auto; border-right:none; }
.skapp .skC-main { overflow:visible; }
/* grid column needs min-width:0 so <pre> code blocks don't push beyond the column boundary */
.skC-article > div:first-child { min-width: 0; overflow-x: hidden; }
.sk-prose-live pre { max-width: 100%; overflow-x: auto; }

/* ---------- search keyboard hint ---------- */
.sk-kbd { display:inline-flex; align-items:center; gap:1px; flex:none; padding:2px 7px; border:1px solid var(--border);
  border-radius:6px; background:var(--background); color:var(--muted-foreground); font-family:var(--font-mono,monospace);
  font-size:11px; line-height:1; letter-spacing:.02em; white-space:nowrap; }
.skC-search .field:focus-within .sk-kbd { opacity:0; }

/* ---------- search: no-results empty state ---------- */
.sk-noresults { text-align:center; padding:30px 20px 26px; }
.sk-noresults .ic { display:inline-flex; align-items:center; justify-content:center; width:60px; height:60px; border-radius:9999px;
  background:var(--secondary); color:var(--muted-foreground); margin-bottom:16px; }
.sk-noresults h1 { font-family:var(--font-brand); font-size:28px; font-weight:700; margin:0 0 8px; }
.sk-noresults p { color:var(--muted-foreground); font-size:15px; line-height:23px; max-width:520px; margin:0 auto 20px; text-wrap:pretty; }
.sk-noresults-actions { display:flex; gap:10px; justify-content:center; flex-wrap:wrap; }

/* ---------- image lightbox (click-to-zoom screenshots) ---------- */
.sk-prose-live img.sk-zoomable { cursor:zoom-in; }
.sk-lightbox { position:fixed; inset:0; z-index:200; display:flex; align-items:center; justify-content:center;
  padding:40px; background:rgba(10,10,12,.82); backdrop-filter:blur(3px); cursor:zoom-out; animation:sk-lb-in .14s ease; }
@keyframes sk-lb-in { from { opacity:0; } to { opacity:1; } }
.sk-lightbox img { max-width:min(1200px,94vw); max-height:90vh; width:auto; height:auto; cursor:default;
  border-radius:var(--radius-lg); box-shadow:0 30px 80px -20px rgba(0,0,0,.7); background:#fff; }
.sk-lightbox-close { position:fixed; top:20px; right:24px; width:40px; height:40px; display:flex; align-items:center; justify-content:center;
  border:none; border-radius:9999px; background:rgba(255,255,255,.14); color:#fff; cursor:pointer; transition:background .15s ease; }
.sk-lightbox-close:hover { background:rgba(255,255,255,.28); }

/* responsive */
@media (max-width:920px){
  .sk-resultwrap { grid-template-columns:1fr; }
  .skC-article { grid-template-columns:1fr !important; }
  .skC-toc { display:none; }
  .sk-artlist { grid-template-columns:1fr; }
  .sk-ins-grid { grid-template-columns:repeat(2,1fr); }
  .sk-ins-2 { grid-template-columns:1fr; }
  .skC-body { grid-template-columns:1fr !important; }
  .skapp .skC-body::before { display:none; }
  .skC-side { display:none; }
  .skA-hero { padding-left:24px; padding-right:24px; }
  .skA-nav { display:none !important; }
}