/* Desktop — 90s computer desktop */

/*

// START -- THEME INFO //

<p>Your site looks like a classic computer desktop. Blocks appear as windows, file icons, and folders.</p>

<table>
  <thead>
    <tr><th>Variable</th><th>What does it do</th></tr>
  </thead>
  <tbody>
    <tr><td><code>css_class: wide</code></td><td>Spans 2 columns</td></tr>
    <tr><td><code>css_class: full</code></td><td>Spans the full row</td></tr>
  </tbody>
</table>

// END -- THEME INFO //

*/

:root {
    /* START -- EDITABLE IN PANEL */
    --desktop-color: #008080;
    --titlebar-color: #000080;
    --titlebar-text: #fff;
    --titlebar-inactive: #808080;
    --window-background: #c0c0c0;
    --window-text: #000;
    --link-color: #000080;
    --desktop-text: #fff;
    /* END -- EDITABLE IN PANEL */

    --bevel-highlight: #fff;
    --bevel-shadow: #808080;
    --bevel-dark: #404040;
    --button-face: #c0c0c0;
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, 'MS Sans Serif', sans-serif;
    font-size: 12px;
    line-height: 1.5;
    margin: 0;
    padding: 0;
    color: var(--desktop-text);
    background: var(--desktop-color);
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
    font-size: inherit;
    line-height: inherit;
    font-weight: inherit;
    margin: 0;
}

a { color: var(--link-color); text-decoration: none; }
a:hover { color: var(--link-color); text-decoration: underline; }

/* ============ Taskbar ============ */

.site-header {
    background: var(--window-background);
    border-top: 2px solid var(--bevel-highlight);
    padding: 3px 6px;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: nowrap;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 100;
    box-shadow: 0 -1px 3px rgba(0,0,0,0.15);
    max-height: 43px;
}

.site-title {
    font-size: 12px;
    font-weight: bold;
    color: var(--window-text);
    background: var(--button-face);
    padding: 4px 16px 4px 8px;
    box-shadow: inset 1px 1px 0 var(--bevel-highlight), inset -1px -1px 0 var(--bevel-dark), inset 2px 2px 0 var(--button-face), inset -2px -2px 0 var(--bevel-shadow);
    cursor: default;
    white-space: nowrap;
    flex-shrink: 0;
}

.site-title a { color: var(--window-text); text-decoration: none; }
.site-title a:hover { text-decoration: none; }
.site-title-sep { color: var(--bevel-shadow); margin: 0 2px; }
.site-title-parent { opacity: 0.7; }

.site-description {
    font-size: 12px;
    color: var(--window-text);
    flex: 1;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

.site-description hr { display: none; }
.site-description a { color: var(--link-color); }

.site-meta {
    margin-left: auto;
    font-size: 11px;
    color: var(--window-text);
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    padding-left: 8px;
    border-left: 1px solid var(--bevel-shadow);
    box-shadow: -1px 0 0 var(--bevel-highlight);
}

.site-collaborators a {
    color: var(--window-text);
    text-decoration: none;
    font-size: 11px;
    display: inline-flex;
    align-items: center;
    gap: 3px;
}

.collaborator-avatar {
    width: 18px;
    height: 18px;
    border-radius: 2px;
    object-fit: cover;
    display: inline-block;
    vertical-align: middle;
    border: 1px solid var(--bevel-shadow);
}

.site-meta-sep { color: var(--bevel-shadow); }

.site-rss {
    color: var(--window-text);
    text-decoration: none;
    font-size: 11px;
}

/* ============ Navigation ============ */

.site-nav {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    gap: 1px;
    flex-shrink: 0;
}

.site-nav li a {
    display: block;
    padding: 4px 12px;
    color: var(--window-text);
    text-decoration: none;
    font-size: 12px;
    border-radius: 0;
}

.site-nav li a:hover {
    background: var(--titlebar-color);
    color: var(--titlebar-text);
    text-decoration: none;
}

.site-nav li.active a {
    background: var(--titlebar-color);
    color: var(--titlebar-text);
    font-weight: bold;
}

/* ============ Desktop grid ============ */

.blocks {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 12px;
    padding: 20px;
    padding-bottom: 56px;
    max-width: none;
    align-content: start;
}

.block {
    margin: 0;
    transition: transform 0.15s ease;
}

.block.wide { grid-column: span 2; }
.block.full { grid-column: 1 / -1; }

/* Pseudo-random rotation on blocks */
.block:nth-child(7n+1) { transform: rotate(-1.5deg); }
.block:nth-child(7n+2) { transform: rotate(1deg); }
.block:nth-child(7n+3) { transform: rotate(-0.5deg); }
.block:nth-child(7n+4) { transform: rotate(1.8deg); }
.block:nth-child(7n+5) { transform: rotate(-0.3deg); }
.block:nth-child(7n+6) { transform: rotate(0.7deg); }
.block:nth-child(7n)   { transform: rotate(-1deg); }
.block:hover { transform: rotate(0deg) translateY(-2px); }

/* ============ Shared window mixin ============ */

.block-image,
.block-text,
.block-embed,
.block-attachment,
.block-link {
    background: var(--window-background);
    color: var(--window-text);
    box-shadow:
        inset 1px 1px 0 var(--bevel-highlight),
        inset -1px -1px 0 var(--bevel-dark),
        2px 2px 4px rgba(0,0,0,0.25);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: 0;
    height: fit-content;
}

/* Shared titlebar */
.block-image .block-title,
.block-text .block-title,
.block-embed .block-title,
.block-attachment .block-title,
.block-link .block-title {
    background: linear-gradient(90deg, var(--titlebar-color), var(--titlebar-inactive));
    color: var(--titlebar-text);
    padding: 3px 6px 3px 4px;
    font-size: 12px;
    font-weight: bold;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 5px;
    word-wrap: break-word;
}

.block-image .block-title a,
.block-text .block-title a,
.block-embed .block-title a,
.block-attachment .block-title a,
.block-link .block-title a {
    color: var(--titlebar-text);
    text-decoration: none;
}

/* Titlebar window buttons */
.block-image .block-title::after,
.block-text .block-title::after,
.block-embed .block-title::after {
    content: '— □ ✕';
    margin-left: auto;
    font-size: 8px;
    font-weight: normal;
    letter-spacing: 3px;
    opacity: 0.7;
    flex-shrink: 0;
}

/* ============ Images — picture viewer ============ */

/* Image titlebar becomes a bottom caption, not a top bar */
.block-image .block-title {
    order: 2;
    background: var(--window-background);
    color: var(--window-text);
    font-size: 11px;
    font-weight: normal;
    padding: 2px 6px 4px;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.block-image .block-title::before { content: none; }
.block-image .block-title::after { content: none; }

.block-image .block-title a {
    color: var(--window-text);
    text-decoration: none;
}

.block-image figcaption {
    display: block;
    order: 3;
    font-size: 11px;
    color: var(--window-text);
    padding: 0 6px 4px;
    text-align: center;
    font-weight: normal;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.block-image .block-content {
    order: 1;
    flex: 1;
    margin: 3px 3px 2px;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    flex-flow: column nowrap;
    height: min-content;
    gap: 10px;
}


/* ============ Text — notepad ============ */

.block-text .block-title::before { content: '📝'; font-size: 11px; }

/* Menu bar */
.block-text .block-content::before {
    content: 'File   Edit   Search   Help';
    display: block;
    padding: 3px 8px;
    font-size: 11px;
    border-bottom: 1px solid var(--bevel-shadow);
    color: var(--window-text);
    background: var(--window-background);
    margin: -6px -6px 6px -6px;
    letter-spacing: 0.01em;
}

.block-text .block-content {
    background: #fff;
    color: var(--window-text);
    padding: 6px;
    font-family: 'Courier New', Courier, monospace;
    font-size: 13px;
    line-height: 1.55;
    flex: 1;
    overflow-y: auto;
    max-height: 220px;
    border: 2px inset var(--window-background);
    margin: 3px;
}

.block-text .block-content a { color: var(--link-color); }
.block-text p { margin: 0 0 0.6em; }
.block-text p:last-child { margin-bottom: 0; }
.block-text ul, .block-text ol { padding-left: 1.5em; margin: 0 0 0.6em; }
.block-text li { margin-bottom: 0.2em; }

.continue-reading {
    display: block;
    padding: 3px 8px;
    font-size: 11px;
    color: var(--link-color);
    text-decoration: underline;
    background: var(--window-background);
}

/* ============ Embed — media player ============ */

.block-embed .block-title::before { content: '📺'; font-size: 11px; }

.block-embed .block-content { margin: 3px; }

.block-embed .embed-container {
    border: 2px inset var(--window-background);
    background: #000;
}

.block-embed .embed-container iframe { aspect-ratio: 16/9; }

.block-embed video {
    width: 100%;
    display: block;
    border: 2px inset var(--window-background);
    margin: 3px;
}

.block-embed audio {
    width: calc(100% - 6px);
    display: block;
    margin: 3px;
}

.block-embed .embed-title {
    padding: 3px 6px;
    font-size: 11px;
    color: var(--bevel-dark);
}

.block-embed-audio { min-height: 0; }

/* ============ Attachment — file ============ */

.block-attachment::before {
    content: '📎  File';
    background: var(--titlebar-color);
    color: var(--titlebar-text);
    padding: 3px 6px 3px 4px;
    font-size: 12px;
    font-weight: bold;
    display: block;
}

.block-attachment .block-title {
    padding: 3px 6px;
    font-size: 12px;
    color: var(--window-text);
    margin: 0;
    background: var(--window-background);
}

.block-attachment .block-content {
    margin: 3px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.block-attachment .attachment-preview {
    width: 100%;
    height: auto;
    max-height: 220px;
    object-fit: contain;
    border: 2px inset var(--window-background);
}

.block-attachment a {
    color: var(--link-color);
    text-decoration: underline;
    font-size: 12px;
    padding: 4px 6px;
}

.block-attachment-video video {
    width: 100%;
    display: block;
    border: 2px inset var(--window-background);
    margin: 3px;
}

.block-attachment-audio audio {
    width: calc(100% - 6px);
    display: block;
    margin: 3px;
}

/* ============ Link — browser window ============ */

.block-link::before {
    content: '🌐  Internet';
    background: linear-gradient(90deg, var(--titlebar-color), var(--titlebar-inactive));
    color: var(--titlebar-text);
    padding: 3px 6px 3px 4px;
    font-size: 12px;
    font-weight: bold;
    display: block;
}

.block-link .block-content > a {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    border: none;
    padding: 0;
    min-height: 0;
}

/* Address bar */
.block-link .link-url {
    display: block;
    font-size: 11px;
    font-family: 'Courier New', monospace;
    color: var(--window-text);
    background: #fff;
    border: 2px inset var(--window-background);
    padding: 3px 6px;
    margin: 3px 3px 0 3px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.block-link .link-url::before {
    content: 'Address  ';
    font-family: 'Segoe UI', Tahoma, sans-serif;
    color: var(--bevel-dark);
    font-size: 11px;
}

.block-link .link-preview {
    width: 100%;
    height: auto;
    max-height: 180px;
    object-fit: contain;
    aspect-ratio: auto;
    border: 2px inset var(--window-background);
    margin: 3px;
}

.block-link .link-info { padding: 5px 8px; }

.block-link .link-title {
    display: block;
    font-size: 12px;
    font-weight: bold;
    color: var(--link-color);
}

.block-link .link-provider {
    display: block;
    font-size: 11px;
    color: var(--bevel-dark);
    margin-top: 2px;
}

/* ============ Channel — folder ============ */

.block-channel {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 16px 12px;
    cursor: default;
    border-radius: 4px;
    transition: background 0.1s;
}

.block-channel:hover {
    background: rgba(255,255,255,0.12);
}

.block-channel:hover .channel-title {
    color: var(--titlebar-text);
    text-decoration: underline;
}

.block-channel .block-content > a {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    border: none;
    padding: 0;
    aspect-ratio: auto;
}

.block-channel .block-content > a:hover {
    border-color: transparent;
    text-decoration: none;
}

/* CSS folder icon */
.block-channel .block-content > a::before {
    content: '';
    display: block;
    width: 56px;
    height: 44px;
    background: linear-gradient(170deg, #f0dc4e 0%, #d4b800 100%);
    border: 1px solid #a08c00;
    border-radius: 0 3px 3px 3px;
    box-shadow: inset 0 -3px 0 #c4a800, inset 0 1px 0 #f0e060, 1px 2px 3px rgba(0,0,0,0.2);
    position: relative;
}

.block-channel .block-content > a::after {
    content: '';
    position: absolute;
    top: 8px;
    left: 12px;
    width: 22px;
    height: 9px;
    background: linear-gradient(170deg, #f0dc4e 0%, #d4b800 100%);
    border: 1px solid #a08c00;
    border-bottom: none;
    border-radius: 3px 3px 0 0;
}

.block-channel .channel-preview { display: none; }

.block-channel .channel-title {
    font-size: 12px;
    color: var(--desktop-text);
    position: static;
    margin-top: 8px;
    font-weight: normal;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.6);
    max-width: 120px;
    word-break: break-word;
    line-height: 1.3;
}

/* ============ Block meta ============ */

.block-meta {
    font-size: 11px;
    color: var(--bevel-shadow);
    margin-top: 3px;
    display: none;
}

.block-description {
    font-size: 12px;
    color: var(--window-text);
    line-height: 1.4;
}

.block-meta-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    font-size: 11px;
}

.block-date { color: var(--bevel-dark); }

.block-contributor a {
    color: var(--window-text);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
}

.block-contributor a:hover { text-decoration: underline; }

.contributor-avatar {
    width: 12px;
    height: 12px;
    border-radius: 1px;
    object-fit: cover;
    display: inline-block;
    vertical-align: middle;
    border: 1px solid var(--bevel-shadow);
}

.block-permalink {
    color: var(--bevel-dark);
    text-decoration: none;
    font-size: 11px;
}

/* ============ Pagination ============ */

.pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    padding: 12px;
    padding-bottom: 56px;
}

.pagination a {
    background: var(--button-face);
    color: var(--window-text);
    border: none;
    padding: 4px 16px;
    font-size: 12px;
    font-family: inherit;
    text-decoration: none;
    box-shadow:
        inset 1px 1px 0 var(--bevel-highlight),
        inset -1px -1px 0 var(--bevel-dark),
        inset 2px 2px 0 var(--button-face),
        inset -2px -2px 0 var(--bevel-shadow);
    cursor: default;
    border-radius: 0;
}

.pagination a:hover { text-decoration: none; }

.pagination a:active {
    box-shadow:
        inset 1px 1px 0 var(--bevel-dark),
        inset -1px -1px 0 var(--bevel-highlight),
        inset 2px 2px 0 var(--bevel-shadow),
        inset -2px -2px 0 var(--button-face);
}

.page-info {
    font-size: 12px;
    color: var(--desktop-text);
    text-shadow: 1px 1px 3px rgba(0,0,0,0.5);
}

/* ============ Block detail ============ */

.block-detail {
    background: var(--window-background);
    color: var(--window-text);
    max-width: 680px;
    margin: 24px auto;
    margin-bottom: 60px;
    padding: 0;
    box-shadow:
        inset 1px 1px 0 var(--bevel-highlight),
        inset -1px -1px 0 var(--bevel-dark),
        3px 3px 8px rgba(0,0,0,0.3);
}

.block-detail-title {
    background: linear-gradient(90deg, var(--titlebar-color), var(--titlebar-inactive));
    color: var(--titlebar-text);
    font-size: 12px;
    font-weight: bold;
    padding: 4px 8px;
    margin: 0;
}

.block-detail-back {
    position: static;
    display: inline-block;
    background: var(--button-face);
    color: var(--window-text);
    padding: 3px 12px;
    margin: 6px;
    font-size: 12px;
    text-decoration: none;
    box-shadow:
        inset 1px 1px 0 var(--bevel-highlight),
        inset -1px -1px 0 var(--bevel-dark);
}

.block-detail-back::before { content: '← '; }
.block-detail-back:hover { text-decoration: none; color: var(--window-text); }

.block-detail .contributor-avatar img {
    width: 16px;
    height: 16px;
    border-radius: 2px;
    object-fit: cover;
    display: inline-block;

}

/* Reset window styles inside detail */
.block-detail .block {
    margin: 0;
    padding: 8px;
    background: none;
    box-shadow: none;
    transform: none !important;
}

.block-detail .block::before { display: none; }

/* Detail: image */
.block-detail .block-image { background: none; box-shadow: none; }
.block-detail .block-image:not(:has(.block-title))::before { display: none; }

.block-detail .block-image .block-content {
    border: 2px inset var(--window-background);
    margin: 0;
    background: #fff;
}

/* Detail: text */
.block-detail .block-text { background: none; box-shadow: none; }

.block-detail .block-text .block-content {
    background: #fff;
    font-size: 13px;
    line-height: 1.65;
    max-height: none;
    border: 2px inset var(--window-background);
    padding: 12px;
    margin: 0;
}

.block-detail .block-text .block-content::before {
    content: 'File   Edit   Search   Help';
    margin: -12px -12px 10px -12px;
    padding: 3px 8px;
}

.block-detail .block-text blockquote {
    border-left: 3px solid var(--bevel-shadow);
    padding-left: 10px;
    margin: 0 0 0.6em;
    color: var(--bevel-dark);
}

.block-detail .block-text pre {
    background: #f8f8f8;
    padding: 10px;
    border: 1px solid var(--bevel-shadow);
    overflow-x: auto;
    margin-bottom: 0.6em;
}

.block-detail .block-text code {
    background: #f0f0f0;
    padding: 1px 4px;
    font-family: 'Courier New', monospace;
    border-radius: 1px;
}

.block-detail .block-text pre code { background: none; padding: 0; }

.block-detail .block-text hr {
    border: 0;
    border-top: 1px solid var(--bevel-shadow);
    margin: 0.6em 0;
}

.block-detail .block-text ul,
.block-detail .block-text ol {
    padding-left: 1.5em;
    margin-bottom: 0.6em;
}

/* Detail: embed */
.block-detail .block-embed { background: none; box-shadow: none; }

/* Detail: link */
.block-detail .block-link { background: none; box-shadow: none; }
.block-detail .block-link::before { display: none; }
.block-detail .block-link .link-preview { max-height: none; }

/* Detail: attachment */
.block-detail .block-attachment { background: none; box-shadow: none; }
.block-detail .block-attachment::before { display: none; }
.block-detail .block-attachment .attachment-preview { max-height: none; }

/* Detail: meta */
.block-detail .block-meta { display: block; }

.block-detail .block-meta-row {
    margin-top: 1.5rem;
    padding: 6px 0;
    border-top: 1px solid var(--bevel-shadow);
}

.block-detail .block-description {
    padding: 6px 0;
    font-size: 12px;
}

/* ============ Starstar badge ============ */

.starstar-badge {
    bottom: 40px;
}

/* ============ Responsive ============ */

@media (max-width: 640px) {
    .blocks {
        grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
        gap: 8px;
        padding: 12px;
        padding-bottom: 52px;
    }

    .site-header {
        padding: 2px 4px;
        gap: 4px;
    }

    .site-description { display: none; }
    .site-nav { overflow-x: auto; }

    .block-detail { margin: 8px; margin-bottom: 52px; }
}