/*
 * This is free software for the public good of a permacomputer hosted at
 * permacomputer.com, an always-on computer by the people, for the people.
 * One which is durable, easy to repair, & distributed like tap water
 * for machine learning intelligence.
 *
 * The permacomputer is community-owned infrastructure optimized around
 * four values:
 *
 *   TRUTH      First principles, math & science, open source code freely distributed
 *   FREEDOM    Voluntary partnerships, freedom from tyranny & corporate control
 *   HARMONY    Minimal waste, self-renewing systems with diverse thriving connections
 *   LOVE       Be yourself without hurting others, cooperation through natural law
 *
 * This software contributes to that vision by archiving the web, preserving digital knowledge before it disappears.
 * Code is seeds to sprout on any abandoned technology.
 */

/*
 * discordia.css - The Law of Fives
 *
 * All things happen in fives, or are divisible by or are multiples of five,
 * or are somehow directly or indirectly appropriate to 5.
 *
 * This stylesheet is organized into 5 sections:
 *   I.   CHAOS      - The void from which all emerges
 *   II.  DISCORD    - Navigation through the confusion
 *   III. CONFUSION  - Forms that capture intent
 *   IV.  BUREAUCRACY - The grid that contains
 *   V.   AFTERMATH  - Side quests for the worthy
 *
 * fnord
 */


/* ═══════════════════════════════════════════════════════════════════════════
 * I. CHAOS - The void, the base, where all begins
 * ═══════════════════════════════════════════════════════════════════════════ */

* { box-sizing: border-box; }

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    margin: 0;
    padding: 0;
    background: #0a0a0a;
    color: #e0e0e0;
}

a { color: #ff6b6b; }

.container { padding: 20px; }

h1 { color: #ff6b6b; margin-bottom: 5px; }
.subtitle { color: #666; margin-bottom: 20px; }

.section-title {
    color: #ff6b6b;
    font-size: 18px;
    margin: 25px 0 15px 0;
    border-bottom: 1px solid #333;
    padding-bottom: 8px;
}

.stats {
    padding: 10px 15px;
    background: #1a1a1a;
    border-radius: 8px;
    margin-bottom: 20px;
    font-size: 14px;
    color: #888;
}

::selection { background: #ff6b6b; color: #0a0a0a; }


/* ═══════════════════════════════════════════════════════════════════════════
 * II. DISCORD - Navigation, the path through chaos
 * ═══════════════════════════════════════════════════════════════════════════ */

.nav {
    background: #1a1a1a;
    padding: 10px 20px;
    display: flex;
    gap: 20px;
    align-items: center;
    border-bottom: 1px solid #333;
    flex-wrap: wrap;
    position: relative;
}

.nav a {
    color: #ff6b6b;
    text-decoration: none;
    padding: 5px 0;
}

.nav a:hover { text-decoration: underline; }

.nav .brand {
    font-weight: bold;
    font-size: 18px;
}

.nav select,
#lang-select {
    background: #1a1a1a;
    color: #888;
    border: 1px solid #333;
    border-radius: 4px;
    padding: 4px 8px;
    font-size: 12px;
    cursor: pointer;
}

@media (max-width: 600px) {
    .nav {
        gap: 12px;
        padding: 10px 15px;
    }
    .nav a { font-size: 14px; }
    .nav .brand {
        font-size: 16px;
        width: 100%;
        margin-bottom: 5px;
    }
}


/* ═══════════════════════════════════════════════════════════════════════════
 * III. CONFUSION - Forms, inputs, the capture of intent
 * ═══════════════════════════════════════════════════════════════════════════ */

input[type="text"],
input[type="number"],
input[type="url"],
select,
textarea {
    padding: 12px 16px;
    font-size: 16px;
    border: 2px solid #333;
    border-radius: 8px;
    background: #1a1a1a;
    color: #fff;
}

input[type="text"]:focus,
input[type="number"]:focus,
input[type="url"]:focus,
textarea:focus {
    outline: none;
    border-color: #ff6b6b;
}

textarea {
    min-height: 80px;
    resize: vertical;
    font-family: inherit;
}

button,
.btn {
    padding: 12px 24px;
    font-size: 16px;
    background: #ff6b6b;
    color: #fff;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
}

button:hover,
.btn:hover { background: #ff5252; }

button:disabled {
    background: #444;
    cursor: not-allowed;
}

.search-box {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.search-box input[type="text"] {
    flex: 1;
    min-width: 200px;
}

@media (max-width: 600px) {
    .search-box input[type="text"] {
        width: 100%;
        flex: 1 1 100%;
    }
    .search-box select,
    .search-box button { flex: 1 1 auto; }
}

.form-group { margin-bottom: 15px; }

.form-group label {
    display: block;
    margin-bottom: 5px;
    color: #aaa;
    font-size: 14px;
}

.checkbox-group {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    margin-bottom: 15px;
}

.checkbox-group label {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #ccc;
    cursor: pointer;
}

input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: #ff6b6b;
}


/* ═══════════════════════════════════════════════════════════════════════════
 * IV. BUREAUCRACY - The grid, results, structure imposed on chaos
 * ═══════════════════════════════════════════════════════════════════════════ */

.results {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 15px;
}

.result {
    background: #1a1a1a;
    border-radius: 8px;
    overflow: hidden;
    transition: transform 0.2s;
}

.result:hover { transform: scale(1.02); }

.result img,
.result video {
    width: 100%;
    height: 200px;
    object-fit: contain;
    background: #1a1a1a;
}

.result-info { padding: 10px; }

.result-filename {
    font-size: 12px;
    color: #aaa;
    margin-bottom: 4px;
    word-break: break-all;
}

.result-meta {
    font-size: 11px;
    color: #666;
}

.result-type {
    display: inline-block;
    padding: 2px 6px;
    background: #333;
    border-radius: 4px;
    font-size: 10px;
    color: #888;
    text-transform: uppercase;
}

.media-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 10px;
}

.media-item {
    background: #1a1a1a;
    border-radius: 6px;
    overflow: hidden;
    animation: fadeIn 0.3s ease;
}

.media-item img,
.media-item video {
    width: 100%;
    height: 150px;
    object-fit: contain;
    background: #0a0a0a;
}

.media-item-info {
    padding: 8px;
    font-size: 11px;
    color: #888;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.pagination {
    display: flex;
    gap: 10px;
    margin-top: 20px;
    justify-content: center;
    flex-wrap: wrap;
}

.pagination a,
.pagination span {
    padding: 8px 16px;
    background: #1a1a1a;
    border-radius: 4px;
    text-decoration: none;
    color: #888;
}

.pagination a:hover {
    background: #2a2a2a;
    color: #ff6b6b;
}

.pagination .current {
    background: #ff6b6b;
    color: #fff;
}

.empty-state {
    text-align: center;
    padding: 60px 20px;
    color: #666;
}

.empty-state h2 {
    color: #888;
    margin-bottom: 10px;
}


/* ═══════════════════════════════════════════════════════════════════════════
 * V. AFTERMATH - Side quests, easter eggs, rewards for the curious
 *
 * "Not all who wander are lost." - 23 skidoo
 * ═══════════════════════════════════════════════════════════════════════════ */

/* The brand reveals its nature */
.brand::after {
    content: '';
    display: inline-block;
    width: 0;
    overflow: hidden;
    transition: width 0.3s ease;
}
.brand:hover::after {
    content: ' \1F437'; /* 🐷 */
    width: 1.5em;
}
.brand:active::after {
    content: ' oink!';
    width: 3em;
    color: #ff6b6b;
}

/* grow food not lawn - hover the void */
body::after {
    content: 'grow food not lawn \1F331';
    position: fixed;
    bottom: -30px;
    right: 20px;
    color: #3a5;
    font-size: 12px;
    opacity: 0;
    transition: all 0.5s ease;
    pointer-events: none;
}
body:hover::after {
    bottom: 10px;
    opacity: 0.6;
}

/* spider-pig descends from the nav */
.nav::before {
    content: '\1F577';
    position: absolute;
    top: -20px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 10px;
    opacity: 0;
    transition: all 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    z-index: 9999;
}
.nav:hover::before {
    top: 100%;
    opacity: 0.3;
}

/* The Sign Maker's mark */
.sign-maker-mark {
    margin-top: 80px;
    font-size: 24px;
    color: #222;
    cursor: default;
    transition: all 0.6s ease;
    user-select: none;
}
.sign-maker-mark:hover {
    color: #ff6b6b;
    transform: rotate(360deg) scale(1.5);
    text-shadow: 0 0 20px rgba(255,107,107,0.8);
}

/* Spider SVG animation */
.spider-svg {
    position: absolute;
    top: -60px;
    left: 50%;
    transform: translateX(-50%);
    width: 24px;
    height: 24px;
    opacity: 0;
    transition: all 1.2s cubic-bezier(0.34, 1.56, 0.64, 1);
    z-index: 9999;
}
.hero-pig-wrap:hover .spider-svg {
    top: -10px;
    opacity: 0.6;
}

/* The print reveals truth */
@media print {
    body::before {
        content: 'You printed this? The Sign Maker approves. KALLISTI.';
        display: block;
        text-align: center;
        padding: 20px;
        font-style: italic;
    }
    body::after { display: none; }
    .nav::before { display: none; }
}

/* Side quest 19/21: The style is the substance. */

/* fnord - you didn't see this */