/* ============================================================
   Skills Store — projects holding markdown files
   ============================================================ */

.sk{ flex:1; display:flex; min-height:0; }

.sk__side{
  width:270px; flex:none;
  display:flex; flex-direction:column;
  border-right:1px solid var(--hair);
  background:var(--surface);
  min-height:0;
}
.sk__side-head{
  display:flex; align-items:center; gap:8px;
  padding:11px 12px;
  border-bottom:1px solid var(--hair);
}
.sk__side-title{ font-size:13px; font-weight:600; color:var(--muted); flex:1; }
.sk__files{ flex:1; overflow-y:auto; padding:6px; }

.sk-file{
  position:relative;
  display:flex; align-items:center; gap:9px;
  width:100%; padding:8px 8px;
  border-radius:var(--r-sm);
  text-align:left;
  transition:background .13s var(--ease);
}
.sk-file:hover{ background:var(--surface-2); }
.sk-file.is-active{ background:var(--accent-tint); }
.sk-file__icon{
  flex:none; width:26px; height:26px;
  display:grid; place-items:center;
  border-radius:7px;
  background:var(--hair); color:var(--muted);
}
.sk-file.is-active .sk-file__icon{ background:var(--surface); color:var(--accent-ink); }
.sk-file__icon svg{ width:14px; height:14px; }
.sk-file__main{ display:block; min-width:0; flex:1; }
.sk-file__name{ display:block; font-size:13.5px; font-weight:500; }
.sk-file.is-active .sk-file__name{ color:var(--accent-ink); }
.sk-file__meta{ display:block; font-size:11.5px; color:var(--faint); }
.sk-file__menu{ opacity:0; flex:none; }
.sk-file:hover .sk-file__menu,
.sk-file__menu:focus-visible,
.sk-file__menu[aria-expanded="true"]{ opacity:1; }

.sk__main{ flex:1; min-width:0; display:flex; flex-direction:column; }
.sk__main-head{
  display:flex; align-items:center; gap:10px;
  padding:10px 18px;
  border-bottom:1px solid var(--hair);
  background:var(--surface);
}
.sk__main-name{ font-size:14px; font-weight:600; min-width:0; }
.sk__main-tools{ margin-left:auto; display:flex; align-items:center; gap:8px; }
.sk__doc{ flex:1; overflow-y:auto; padding:28px 24px 80px; }
.sk__doc-inner{ max-width:760px; margin:0 auto; }
.sk__raw{
  width:100%; min-height:calc(100vh - 220px);
  padding:16px; border:1px solid var(--hair-2); border-radius:var(--r-md);
  background:var(--surface);
  font-family:var(--mono); font-size:13px; line-height:1.6;
  resize:none;
}
.sk__raw:focus{ outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-tint); }

.sk__drop{
  position:absolute; inset:0; z-index:20;
  display:none; place-items:center;
  background:var(--accent-tint);
  border:2px dashed var(--accent);
  border-radius:var(--r-lg);
  font-size:14px; font-weight:500; color:var(--accent-ink);
}
.sk.is-dropping .sk__drop{ display:grid; }

/* ── Rendered markdown ───────────────────────────────────── */
.md{ font-size:15px; line-height:1.68; color:var(--ink); }
.md > *:first-child{ margin-top:0; }
.md h1,.md h2,.md h3,.md h4,.md h5,.md h6{
  margin:1.7em 0 .55em; font-weight:600; letter-spacing:-.012em; line-height:1.3;
}
.md h1{ font-size:24px; }
.md h2{ font-size:19px; padding-bottom:.3em; border-bottom:1px solid var(--hair); }
.md h3{ font-size:16.5px; }
.md h4,.md h5,.md h6{ font-size:15px; color:var(--muted); }
.md p{ margin:0 0 1em; }
.md ul,.md ol{ margin:0 0 1em; padding-left:1.5em; }
.md li{ margin:.28em 0; }
.md li > ul,.md li > ol{ margin:.28em 0; }
.md a{ color:var(--accent-ink); text-decoration:underline; text-underline-offset:2px; }
.md a:hover{ text-decoration-thickness:2px; }
.md strong{ font-weight:600; }
.md code{
  padding:.14em .38em;
  background:var(--hair); border-radius:5px;
  font-family:var(--mono); font-size:.87em;
}
.md pre{
  margin:0 0 1em; padding:14px 16px;
  background:var(--surface); border:1px solid var(--hair-2); border-radius:var(--r-md);
  overflow-x:auto;
}
.md pre code{ padding:0; background:none; font-size:12.8px; line-height:1.6; }
.md blockquote{
  margin:0 0 1em; padding:.2em 0 .2em 1em;
  border-left:3px solid var(--accent-border);
  color:var(--muted);
}
.md hr{ margin:1.8em 0; border:0; border-top:1px solid var(--hair); }
.md table{
  width:100%; margin:0 0 1em;
  border-collapse:collapse; font-size:14px;
  display:block; overflow-x:auto;
}
.md th,.md td{ padding:7px 11px; border:1px solid var(--hair-2); text-align:left; }
.md th{ background:var(--surface-2); font-weight:600; }
.md img{ max-width:100%; border-radius:var(--r-sm); }
.md input[type="checkbox"]{ margin-right:.4em; accent-color:var(--accent); }

@media (max-width:820px){
  .sk{ flex-direction:column; }
  .sk__side{
    width:auto; max-height:210px;
    border-right:0; border-bottom:1px solid var(--hair);
  }
  .sk__doc{ padding:20px 14px 70px; }
}