/* static/wiki.css
   Wiki / Codex page styling.
   MUST NOT change shell/nav/sidebar geometry.
*/

/* ---------- Page frame ---------- */

.wiki-page{
  /* container already constrains width; we just add spacing rhythm */
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.wiki-page h1{
  margin: 0 0 6px 0;
}

.wiki-page h2{
  margin: 0 0 10px 0;
  font-size: 16px;
}

/* ---------- Links used inside wiki ---------- */

.wiki-link{
  color: var(--accent);
  text-decoration: none;
  font-weight: 600;
}
.wiki-link:hover{
  color: var(--accent-600);
  text-decoration: underline;
}

/* ---------- Page header (single page) ---------- */

.wiki-head{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;

  padding: 14px 14px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: linear-gradient(180deg, var(--bg-elevated), var(--surface));
  box-shadow: var(--shadow-1);
}

.wiki-head__left{
  display: flex;
  align-items: flex-start;
  gap: 14px;
  min-width: 0;
}

.wiki-head__meta{
  min-width: 0;
}
.wiki-head__meta h1{
  font-size: 26px;
  margin: 0;
}
.wiki-head__meta .muted{
  margin-top: 6px;
}

.wiki-head__chips{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.wiki-chip{
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--surface) 55%, transparent);
}

/* header actions */
.wiki-head__actions{
  display: flex;
  gap: 10px;
  align-items: center;
  flex: 0 0 auto;
}

/* ---------- Icon ---------- */

.wiki-iconwrap{
  width: 62px;
  height: 62px;
  border-radius: 16px;
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--bg-elevated) 70%, var(--surface));
  display: grid;
  place-items: center;
  overflow: hidden;
  flex: 0 0 auto;
  position: relative;
}

.wiki-icon{
  width: 46px;
  height: 46px;
  display: block;
  image-rendering: auto;
}

.wiki-iconfile{
  display: none;
}

.wiki-iconlabel{
  width: 100%;
  height: 100%;
  cursor: pointer;
  display: grid;
  place-items: center;
  position: relative;
}

.wiki-iconwrap.is-editable:hover{
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 28%, transparent);
}

.wiki-iconhint{
  position: absolute;
  bottom: 6px;
  left: 6px;
  right: 6px;
  font-size: 10px;
  padding: 3px 6px;
  border-radius: 999px;
  text-align: center;

  color: var(--text-muted);
  background: rgba(0,0,0,0.35);
  border: 1px solid rgba(255,255,255,0.08);
  opacity: 0;
  transform: translateY(2px);
  transition: opacity .12s ease, transform .12s ease;
}

.wiki-iconwrap.is-editable:hover .wiki-iconhint{
  opacity: 1;
  transform: translateY(0);
}

/* ---------- Home discovery grid (THE IMPORTANT PART) ---------- */

.wiki-home-grid{
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: start;
}

@media (max-width: 1100px){
  .wiki-home-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px){
  .wiki-home-grid{ grid-template-columns: 1fr; }
}

/* “Smaller-than-devblog” kind boxes */
.wiki-home-section{
  padding: 12px 12px 10px 12px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: var(--bg-elevated);
  box-shadow: 0 8px 24px rgba(0,0,0,0.18);
}

.wiki-home-section h2{
  font-size: 14px;
  margin: 0 0 10px 0;
  color: var(--heading);
  letter-spacing: -0.01em;
}

/* list inside a kind card */
.wiki-home-section ul{
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* each row feels like a tiny “mini card” */
.wiki-home-section li{
  padding: 8px 10px;
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
  background: color-mix(in srgb, var(--surface) 55%, transparent);
}

.wiki-home-section li:hover{
  border-color: color-mix(in srgb, var(--accent) 30%, var(--border));
  background: color-mix(in srgb, var(--accent) 8%, var(--surface));
}

.wiki-home-section li .muted{
  font-size: 12px;
  line-height: 1.25;
  margin-top: 3px;
}

/* ---------- Search box on home ---------- */

.wiki-create{
  padding: 14px 14px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: linear-gradient(180deg, var(--bg-elevated), var(--surface));
  box-shadow: var(--shadow-1);
}

.form-row{
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 12px;
}

.label{
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 600;
}

.input, .textarea{
  width: 100%;
  background: var(--bg-elevated);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: .65rem .8rem;
}

.textarea{
  font-family: var(--font-mono);
  line-height: 1.45;
}

.form-actions{
  display: flex;
  gap: 10px;
  align-items: center;
}

/* Search results list on home */
.wiki-create ul{
  list-style: none;
  padding: 0;
  margin: 10px 0 0 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* ---------- Markdown body styling ---------- */

.wiki-md{
  padding: 14px 14px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: linear-gradient(180deg, var(--bg-elevated), var(--surface));
  box-shadow: var(--shadow-1);
}

.wiki-md h1, .wiki-md h2, .wiki-md h3{
  margin-top: 14px;
  margin-bottom: 8px;
}

.wiki-md p{
  margin: 0 0 12px 0;
}

.wiki-md code{
  padding: .15rem .35rem;
}

.wiki-md pre{
  margin: 12px 0;
}

.wiki-md ul{
  margin: 0 0 12px 18px;
}

.wiki-md blockquote{
  margin: 12px 0;
  padding: 10px 12px;
  border-left: 3px solid color-mix(in srgb, var(--accent) 45%, var(--border));
  background: color-mix(in srgb, var(--accent) 8%, var(--surface));
  border-radius: 10px;
}

/* Make accidental raw <br> linkify output not look cramped */
.wiki-md br{
  line-height: 1.65;
}