/* ============================================
   WIKI / NOTES STYLES
   Obsidian-style interlinked notes
   Utilitarian, information-dense
   ============================================ */

:root {
    --wiki-bg: #1d2021;
    --wiki-bg-soft: #282828;
    --wiki-bg-hard: #141617;
    --wiki-fg: #ebdbb2;
    --wiki-fg-dim: #a89984;
    --wiki-fg-faint: #665c54;
    
    --wiki-red: #fb4934;
    --wiki-green: #b8bb26;
    --wiki-yellow: #fabd2f;
    --wiki-blue: #83a598;
    --wiki-purple: #d3869b;
    --wiki-aqua: #8ec07c;
    --wiki-orange: #fe8019;
    
    --wiki-link: var(--wiki-blue);
    --wiki-link-hover: var(--wiki-aqua);
    --wiki-tag: var(--wiki-purple);
    --wiki-border: #3c3836;
    --wiki-code-bg: #32302f;
    
    /* Light mode */
    --wiki-light-bg: #fbf1c7;
    --wiki-light-bg-soft: #f2e5bc;
    --wiki-light-fg: #3c3836;
    --wiki-light-fg-dim: #665c54;
    --wiki-light-fg-faint: #928374;
    --wiki-light-link: #076678;
    --wiki-light-link-hover: #427b58;
    --wiki-light-tag: #8f3f71;
    --wiki-light-border: #d5c4a1;
    --wiki-light-code-bg: #ebdbb2;
    
    --wiki-font: 'JetBrains Mono', 'SF Mono', 'Consolas', monospace;
    --wiki-font-reading: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    --wiki-content-width: 720px;
    --wiki-sidebar-width: 240px;
}

/* Light mode */
@media (prefers-color-scheme: light) {
    :root {
        --wiki-bg: var(--wiki-light-bg);
        --wiki-bg-soft: var(--wiki-light-bg-soft);
        --wiki-fg: var(--wiki-light-fg);
        --wiki-fg-dim: var(--wiki-light-fg-dim);
        --wiki-fg-faint: var(--wiki-light-fg-faint);
        --wiki-link: var(--wiki-light-link);
        --wiki-link-hover: var(--wiki-light-link-hover);
        --wiki-tag: var(--wiki-light-tag);
        --wiki-border: var(--wiki-light-border);
        --wiki-code-bg: var(--wiki-light-code-bg);
    }
}

[data-theme="light"] {
    --wiki-bg: var(--wiki-light-bg);
    --wiki-bg-soft: var(--wiki-light-bg-soft);
    --wiki-fg: var(--wiki-light-fg);
    --wiki-fg-dim: var(--wiki-light-fg-dim);
    --wiki-fg-faint: var(--wiki-light-fg-faint);
    --wiki-link: var(--wiki-light-link);
    --wiki-link-hover: var(--wiki-light-link-hover);
    --wiki-tag: var(--wiki-light-tag);
    --wiki-border: var(--wiki-light-border);
    --wiki-code-bg: var(--wiki-light-code-bg);
}

/* ============================================
   BASE
   ============================================ */

.wiki-page {
    font-family: var(--wiki-font-reading);
    font-size: 15px;
    line-height: 1.6;
    color: var(--wiki-fg);
    background: var(--wiki-bg);
    min-height: 100vh;
}

/* ============================================
   LAYOUT
   ============================================ */

.wiki-container {
    display: grid;
    grid-template-columns: var(--wiki-sidebar-width) 1fr;
    min-height: 100vh;
}

@media (max-width: 900px) {
    .wiki-container {
        grid-template-columns: 1fr;
    }
}

/* ============================================
   SIDEBAR
   ============================================ */

.wiki-sidebar {
    background: var(--wiki-bg-hard);
    border-right: 1px solid var(--wiki-border);
    padding: 1.5rem;
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
}

@media (max-width: 900px) {
    .wiki-sidebar {
        display: none;
    }
}

.wiki-sidebar .site-title {
    font-family: var(--wiki-font);
    font-size: 14px;
    font-weight: 600;
    color: var(--wiki-fg);
    text-decoration: none;
    display: block;
    margin-bottom: 2rem;
}

.wiki-sidebar .site-title:hover {
    color: var(--wiki-link);
}

.wiki-sidebar nav {
    font-size: 13px;
}

.wiki-sidebar nav a {
    display: block;
    padding: 0.4rem 0;
    color: var(--wiki-fg-dim);
    text-decoration: none;
    transition: color 0.15s;
}

.wiki-sidebar nav a:hover,
.wiki-sidebar nav a.active {
    color: var(--wiki-link);
}

.wiki-sidebar .nav-section {
    margin-bottom: 1.5rem;
}

.wiki-sidebar .nav-section-title {
    font-family: var(--wiki-font);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--wiki-fg-faint);
    margin-bottom: 0.5rem;
}

/* ============================================
   MAIN CONTENT
   ============================================ */

.wiki-main {
    padding: 2rem;
    max-width: calc(var(--wiki-content-width) + 4rem);
}

.wiki-header {
    margin-bottom: 2rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--wiki-border);
}

.wiki-header h1 {
    font-family: var(--wiki-font);
    font-size: 1.5rem;
    font-weight: 600;
    margin: 0 0 0.5rem;
}

.wiki-meta {
    font-size: 13px;
    color: var(--wiki-fg-faint);
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

.wiki-meta time {
    font-family: var(--wiki-font);
}

/* ============================================
   WIKI CONTENT
   ============================================ */

.wiki-content {
    font-size: 15px;
}

.wiki-content p {
    margin: 0 0 1rem;
}

.wiki-content h2 {
    font-family: var(--wiki-font);
    font-size: 1.2rem;
    font-weight: 600;
    margin: 2rem 0 1rem;
    padding-top: 0.5rem;
    border-top: 1px solid var(--wiki-border);
}

.wiki-content h3 {
    font-family: var(--wiki-font);
    font-size: 1rem;
    font-weight: 600;
    margin: 1.5rem 0 0.75rem;
}

/* Links */
.wiki-content a {
    color: var(--wiki-link);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: border-color 0.15s, color 0.15s;
}

.wiki-content a:hover {
    color: var(--wiki-link-hover);
    border-bottom-color: var(--wiki-link-hover);
}

/* Internal wiki links - [[link]] style */
.wiki-link {
    color: var(--wiki-link);
    text-decoration: none;
    border-bottom: 1px dashed var(--wiki-link);
}

.wiki-link:hover {
    color: var(--wiki-link-hover);
    border-bottom-style: solid;
}

/* Broken/missing links */
.wiki-link.broken {
    color: var(--wiki-red);
    border-bottom-color: var(--wiki-red);
    opacity: 0.7;
}

/* ============================================
   TAGS
   ============================================ */

.wiki-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 1rem 0;
}

.wiki-tag {
    font-family: var(--wiki-font);
    font-size: 12px;
    color: var(--wiki-tag);
    background: var(--wiki-bg-soft);
    padding: 0.2rem 0.6rem;
    border-radius: 3px;
    text-decoration: none;
    transition: background 0.15s;
}

.wiki-tag:hover {
    background: var(--wiki-border);
}

.wiki-tag::before {
    content: "#";
    opacity: 0.6;
}

/* Tag page listing */
.tag-list {
    columns: 2;
    column-gap: 2rem;
}

@media (max-width: 600px) {
    .tag-list {
        columns: 1;
    }
}

.tag-list-item {
    break-inside: avoid;
    margin-bottom: 0.5rem;
}

.tag-list-item a {
    font-family: var(--wiki-font);
    font-size: 13px;
}

.tag-count {
    color: var(--wiki-fg-faint);
    font-size: 12px;
    margin-left: 0.25rem;
}

/* ============================================
   BACKLINKS
   ============================================ */

.wiki-backlinks {
    margin-top: 3rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--wiki-border);
}

.wiki-backlinks h2 {
    font-family: var(--wiki-font);
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--wiki-fg-faint);
    margin: 0 0 1rem;
    border: none;
    padding: 0;
}

.backlink-item {
    margin-bottom: 1rem;
    padding: 0.75rem;
    background: var(--wiki-bg-soft);
    border-radius: 4px;
}

.backlink-title {
    font-family: var(--wiki-font);
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 0.25rem;
}

.backlink-title a {
    color: var(--wiki-link);
    text-decoration: none;
}

.backlink-title a:hover {
    text-decoration: underline;
}

.backlink-context {
    font-size: 13px;
    color: var(--wiki-fg-dim);
}

.backlink-context mark {
    background: var(--wiki-yellow);
    color: var(--wiki-bg);
    padding: 0 0.2em;
    border-radius: 2px;
}

/* ============================================
   CODE
   ============================================ */

.wiki-content code {
    font-family: var(--wiki-font);
    font-size: 0.9em;
    background: var(--wiki-code-bg);
    padding: 0.15em 0.4em;
    border-radius: 3px;
}

.wiki-content pre {
    background: var(--wiki-code-bg);
    padding: 1rem;
    overflow-x: auto;
    border-radius: 4px;
    margin: 1rem 0;
    border: 1px solid var(--wiki-border);
}

.wiki-content pre code {
    background: none;
    padding: 0;
    font-size: 13px;
    line-height: 1.5;
}

/* ============================================
   BLOCKQUOTES
   ============================================ */

.wiki-content blockquote {
    margin: 1rem 0;
    padding: 0.75rem 1rem;
    background: var(--wiki-bg-soft);
    border-left: 3px solid var(--wiki-border);
    color: var(--wiki-fg-dim);
}

.wiki-content blockquote p {
    margin-bottom: 0;
}

/* ============================================
   LISTS
   ============================================ */

.wiki-content ul,
.wiki-content ol {
    margin: 0 0 1rem;
    padding-left: 1.5rem;
}

.wiki-content li {
    margin-bottom: 0.3rem;
}

/* Task lists */
.wiki-content .task-list {
    list-style: none;
    padding-left: 0;
}

.wiki-content .task-list-item {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
}

.wiki-content .task-list-item input[type="checkbox"] {
    margin: 0;
}

/* ============================================
   NOTE INDEX / LISTING
   ============================================ */

.note-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.note-list-item {
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--wiki-border);
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
}

.note-list-item:last-child {
    border-bottom: none;
}

.note-list-item a {
    color: var(--wiki-fg);
    text-decoration: none;
    font-weight: 500;
}

.note-list-item a:hover {
    color: var(--wiki-link);
}

.note-list-item time {
    font-family: var(--wiki-font);
    font-size: 12px;
    color: var(--wiki-fg-faint);
    flex-shrink: 0;
}

/* ============================================
   SEARCH
   ============================================ */

.wiki-search {
    margin-bottom: 1.5rem;
}

.wiki-search input {
    width: 100%;
    padding: 0.5rem 0.75rem;
    font-family: var(--wiki-font);
    font-size: 13px;
    color: var(--wiki-fg);
    background: var(--wiki-bg-soft);
    border: 1px solid var(--wiki-border);
    border-radius: 4px;
}

.wiki-search input:focus {
    outline: none;
    border-color: var(--wiki-link);
}

.wiki-search input::placeholder {
    color: var(--wiki-fg-faint);
}

/* ============================================
   GRAPH VIEW (optional)
   ============================================ */

.wiki-graph {
    margin: 2rem 0;
    padding: 1rem;
    background: var(--wiki-bg-soft);
    border-radius: 4px;
    min-height: 300px;
}

/* ============================================
   MOBILE HEADER
   ============================================ */

.wiki-mobile-header {
    display: none;
    padding: 1rem;
    background: var(--wiki-bg-hard);
    border-bottom: 1px solid var(--wiki-border);
    justify-content: space-between;
    align-items: center;
}

@media (max-width: 900px) {
    .wiki-mobile-header {
        display: flex;
    }
}

.wiki-mobile-header .site-title {
    font-family: var(--wiki-font);
    font-size: 14px;
    font-weight: 600;
    color: var(--wiki-fg);
    text-decoration: none;
}

.wiki-mobile-menu-btn {
    background: none;
    border: none;
    color: var(--wiki-fg-dim);
    font-size: 20px;
    cursor: pointer;
    padding: 0.25rem;
}

/* ============================================
   UTILITIES
   ============================================ */

.wiki-divider {
    border: none;
    border-top: 1px solid var(--wiki-border);
    margin: 2rem 0;
}

.wiki-muted {
    color: var(--wiki-fg-dim);
}

.wiki-small {
    font-size: 13px;
}

/* ============================================
   PRINT
   ============================================ */

@media print {
    .wiki-sidebar,
    .wiki-mobile-header,
    .wiki-search {
        display: none;
    }
    
    .wiki-container {
        display: block;
    }
    
    .wiki-page {
        background: white;
        color: black;
    }
}