/* Mac OS X Leopard (10.5) — Finder.app */

/* ===== BASE ===== */
body {
    background: #3a3f58 url('../../images/leopard-wallpaper.png') center / cover;
    font-family: "Lucida Grande", "Lucida Sans", Helvetica, Arial, sans-serif;
    font-size: 13px;
    color: #333;
    padding: 20px;
    margin: 0;
}

/* ===== WINDOW ===== */
#window {
    max-width: 920px;
    margin: 20px auto;
    border-radius: 5px;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.6),
        0 22px 70px 4px rgba(0,0,0,0.56),
        0 0 0 1px rgba(0,0,0,0.3);
    overflow: hidden;
    border: none;
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1),
                opacity 0.4s ease-in-out;
    transform-origin: bottom left;
}

#window.minimized {
    transform: scale(0.05);
    opacity: 0;
    pointer-events: none;
}

/* ===== TITLE BAR (22px) ===== */
#titlebar {
    background: linear-gradient(to bottom, #bbb8be, #a9a5ab);
    border-bottom: 1px solid #686868;
    padding: 0 8px;
    height: 22px;
    display: flex;
    align-items: center;
    position: relative;
    user-select: none;
    -webkit-user-select: none;
}

/* ===== TRAFFIC LIGHTS =====
 * Light source: directly overhead (90 deg).
 *
 * Layers (top→bottom of the orb):
 *   1. Outer emboss: top bright edge, bottom dark edge (raised bezel)
 *   2. Inner shadow: rim casts shadow DOWN into concave gel
 *   3. Specular highlight: broad arc in upper third (light reflecting off curved gel)
 *   4. Body: base color, vignette-darkened at edges (3D sphere)
 *   5. Bottom reflection: soft counter-light bouncing up from surface below
 *   6. Outer emboss shadow: dark edge at base of bezel
 */
.traffic-lights {
    display: flex;
    gap: 6px;
    z-index: 2;
    margin-left: 0;
}

.tl-btn {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 0.5px solid;
    cursor: pointer;
    padding: 0;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    outline: none;
    box-shadow:
        /* OUTER: top shadow — top lip of bezel faces away from overhead light */
        0 0 0 rgba(0,0,0,0.6),
        /* OUTER: bottom highlight — bottom lip faces UP, catches the overhead light */
        0 0.5px 0 rgba(255,255,255,0.7),
        /* INSET: top inner shadow — sharp crisp line where bezel occludes light */
        inset 0 1.5px 0.5px rgba(0,0,0,0.65),
        /* INSET: bottom inner glow — darker, light refracting up through glass */
        inset 0 -1px 1.5px rgba(255,255,255,0.55);
}

.tl-btn::after {
    font-size: 11px;
    font-weight: bold;
    line-height: 1;
    opacity: 0;
}

/* ---- Close (Red) ---- */
.tl-close {
    background:
        /* Specular highlight — hard bright caustic from overhead light on glass */
        radial-gradient(ellipse 90% 50% at 50% 12%,
            rgba(255,255,255,0.9) 0%,
            rgba(255,255,255,0.0) 100%
        ),
        /* Bottom counter-reflection — light refracting through the glass from below */
        radial-gradient(ellipse 70% 35% at 50% 85%,
            rgba(255,180,170,0.55) 0%,
            transparent 100%
        ),
        /* Sphere vignette — glass edges go dark, deep contrast */
        radial-gradient(circle at 50% 45%,
            transparent 20%,
            rgba(0,0,0,0.45) 100%
        ),
        /* Base color */
        #E84840;
    border-color: #444;
}
.tl-close::after { content: '\00d7'; color: #4D0000; }
.tl-close:active { background: #BF4943; border-color: #AD3934; }

/* ---- Minimize (Yellow) ---- */
.tl-minimize {
    background:
        radial-gradient(ellipse 90% 50% at 50% 12%,
            rgba(255,255,255,0.9) 0%,
            rgba(255,255,255,0.0) 100%
        ),
        radial-gradient(ellipse 70% 35% at 50% 85%,
            rgba(255,230,150,0.55) 0%,
            transparent 100%
        ),
        radial-gradient(circle at 50% 45%,
            transparent 20%,
            rgba(0,0,0,0.40) 100%
        ),
        #F5B829;
    border-color: #906808;
}
.tl-minimize::after { content: '\2013'; color: #995700; }
.tl-minimize:active { background: #BF8E22; border-color: #AD7D15; }

/* ---- Zoom (Green) ---- */
.tl-zoom {
    background:
        radial-gradient(ellipse 90% 50% at 50% 12%,
            rgba(255,255,255,0.9) 0%,
            rgba(255,255,255,0.0) 100%
        ),
        radial-gradient(ellipse 70% 35% at 50% 85%,
            rgba(150,255,150,0.50) 0%,
            transparent 100%
        ),
        radial-gradient(circle at 50% 45%,
            transparent 20%,
            rgba(0,0,0,0.45) 100%
        ),
        #34B838;
    border-color: #0e6812;
}
.tl-zoom::after { content: '\002b'; color: #006500; }
.tl-zoom:active { background: #1D9730; border-color: #128622; }

.traffic-lights:hover .tl-btn::after {
    opacity: 1;
}

/* ===== WINDOW TITLE ===== */
h1, h1.window-title {
    background: none;
    border: none;
    margin: 0;
    padding: 0;
    font: bold 13px/22px "Lucida Grande", "Lucida Sans", Helvetica, sans-serif;
    font-style: normal;
    color: #000000;
    text-shadow: 0 1px 0 rgba(255,255,255,0.5);
    position: absolute;
    left: 0;
    right: 0;
    text-align: center;
    pointer-events: none;
}

/* ===== TOOLBAR (hidden — removed from layout) ===== */
#toolbar {
    display: none;
}

/* ===== CONTENT AREA ===== */
#content {
    display: flex;
    background: #ffffff;
    height: clamp(400px, 60vh, 700px);
    overflow: hidden;
}

/* ===== SIDEBAR ===== */
nav {
    background: #D6DDF9;
    border-right: 1px solid #CBCED4;
    flex: 0 0 192px;
    padding: 4px 0;
    overflow-y: auto;
    overflow-x: hidden;
    user-select: none;
    -webkit-user-select: none;
}

nav ul {
    border-right: none;
    padding: 0;
    margin: 0 0 2px 0;
    list-style: none;
}

.nav-header {
    display: block;
    font: bold 11px "Lucida Grande", sans-serif;
    text-transform: uppercase;
    color: #717D8E;
    text-shadow: 0 1px 0 rgba(255,255,255,0.7);
    letter-spacing: 0.5px;
    padding: 8px 0 3px 12px;
    margin: 0;
}

.nav-section:first-child .nav-header {
    padding-top: 4px;
}

nav li {
    height: 22px;
    padding: 0;
    margin: 0;
    display: flex;
    align-items: center;
}

nav a {
    color: #000000;
    text-decoration: none;
    margin: 0;
    padding: 2px 12px;
    display: block;
    flex: 1;
    font: 11px/18px "Lucida Grande", sans-serif;
}

nav li.active {
    background: linear-gradient(to bottom, #5999D1, #215ED0);
    border-top: 1px solid #3D7BDA;
    border-bottom: 1px solid #1F5CCF;
    height: 20px;
}

nav li.active a {
    color: #FFFFFF;
    text-shadow: 0 -1px 0 rgba(0,0,0,0.25);
}

nav li:hover:not(.active) {
    background: linear-gradient(to bottom, #5999D1, #215ED0);
    border-top: 1px solid #3D7BDA;
    border-bottom: 1px solid #1F5CCF;
    height: 20px;
}

nav li:hover:not(.active) a {
    color: #FFFFFF;
    text-shadow: 0 -1px 0 rgba(0,0,0,0.25);
}

nav::-webkit-scrollbar { width: 8px; }
nav::-webkit-scrollbar-track { background: transparent; }
nav::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.15); border-radius: 4px; }

/* ===== SCROLL AREA & CONTENT ===== */
#scroll-area {
    display: flex;
    flex: 1;
    overflow: hidden;
    position: relative;
}

div#inner-content {
    flex: 1;
    overflow-y: auto;
    padding: 16px 20px;
    margin: 0;
    background: #fff;
    scrollbar-width: none;
}

div#inner-content::-webkit-scrollbar {
    display: none;
}

/* ===== AQUA SCROLLBAR =====
 * The beads (groove ridges) are FIXED on the track.
 * The thumb is semi-transparent/glassy — it reveals the
 * fixed beads underneath as it slides over them.
 */
.aqua-scrollbar {
    width: 15px;
    flex: 0 0 15px;
    background:
        /* Fixed beads — horizontal ridges baked into the track */
        repeating-linear-gradient(
            to bottom,
            transparent 0px,
            transparent 2px,
            rgba(83,161,255,0.18) 2px,
            rgba(83,161,255,0.18) 3px
        ),
        /* Track base */
        linear-gradient(to right, #eeeeee, #ffffff);
    border-left: 1px solid #cccccc;
    box-shadow:
        inset 2px 0 3px rgba(0,0,0,0.13),
        inset 0 -2px 3px rgba(0,0,0,0.08),
        inset 0 2px 3px rgba(0,0,0,0.08);
    position: relative;
    cursor: default;
    display: none;
}

.aqua-scrollbar.visible {
    display: block;
}

/* Aqua thumb — glassy, semi-transparent capsule
 * The blue gradient is translucent so the fixed track beads
 * show through, creating the "reveals ridges" effect.
 */
.aqua-thumb {
    position: absolute;
    left: 1px;
    right: 1px;
    min-height: 45px;
    background:
        /* Glassy highlight at top */
        linear-gradient(to bottom,
            rgba(255,255,255,0.5) 0%,
            rgba(255,255,255,0.0) 50%,
            rgba(0,0,0,0.04) 100%
        ),
        /* Semi-transparent Aqua blue (lets beads show through) */
        linear-gradient(to right,
            rgba(200,225,255,0.75) 0%,
            rgba(83,161,255,0.65) 30%,
            rgba(83,161,255,0.70) 50%,
            rgba(140,200,255,0.65) 80%,
            rgba(200,225,255,0.75) 100%
        );
    border-radius: 16px;
    border: 1px solid rgba(60,120,200,0.6);
    cursor: grab;
    box-shadow:
        inset 1px 0 2px rgba(0,0,0,0.15),
        inset -1px 0 2px rgba(0,0,0,0.15),
        inset 0 1px 0 rgba(255,255,255,0.6);
    backdrop-filter: blur(0.5px);
    -webkit-backdrop-filter: blur(0.5px);
}

.aqua-thumb:active,
.aqua-thumb.dragging {
    cursor: grabbing;
    background:
        linear-gradient(to bottom,
            rgba(255,255,255,0.35) 0%,
            rgba(255,255,255,0.0) 50%,
            rgba(0,0,0,0.06) 100%
        ),
        linear-gradient(to right,
            rgba(180,210,245,0.80) 0%,
            rgba(60,140,240,0.75) 30%,
            rgba(60,140,240,0.80) 50%,
            rgba(120,180,245,0.75) 80%,
            rgba(180,210,245,0.80) 100%
        );
    box-shadow:
        inset 0 0 5px rgba(0,0,68,0.25),
        inset 0 1px 0 rgba(255,255,255,0.4);
}

/* Scroll arrow buttons (at bottom of track) */
.aqua-arrow {
    position: absolute;
    left: 0;
    right: 0;
    height: 16px;
    background: linear-gradient(to bottom, #f0f0f0, #d8d8d8);
    border-top: 1px solid #cccccc;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.aqua-arrow:active {
    background: linear-gradient(to bottom, #c0c0c0, #a8a8a8);
}

.aqua-arrow-up { bottom: 16px; }
.aqua-arrow-down { bottom: 0; border-radius: 0 0 3px 0; }

.aqua-arrow::after {
    content: '';
    width: 0;
    height: 0;
    border-left: 3.5px solid transparent;
    border-right: 3.5px solid transparent;
}

.aqua-arrow-up::after { border-bottom: 4px solid #555; }
.aqua-arrow-down::after { border-top: 4px solid #555; }

/* ===== LINKS & TYPOGRAPHY ===== */
a { color: #0f60d4; }
a:hover { color: #0a44a0; }

h2, h3 {
    font-style: normal;
    font-weight: bold;
    color: #333;
}

h2 { font-size: 16px; }
h3 { font-size: 14px; }

pre {
    background: #f7f7f7;
    border: 1px solid #ddd;
    border-radius: 5px;
    padding: 12px;
    font-size: 12px;
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.06);
    overflow-x: auto;
}

code {
    background: #f0f0f0;
    border-radius: 3px;
    padding: 1px 4px;
    font-size: 12px;
    color: #333;
}

/* ===== FOOTER / STATUS BAR ===== */
#footer {
    background: linear-gradient(to bottom, #e4e4e4, #b8b7b8);
    border-top: 1px solid #686868;
    padding: 0 12px;
    text-align: center;
    font: 11px/22px "Lucida Grande", sans-serif;
    color: #000000;
    text-shadow: 0 1px 0 rgba(255,255,255,0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 22px;
    box-sizing: border-box;
}

.footer-info { display: inline; color: #000000; }
#footer a { color: #555; text-decoration: none; }
#footer img { opacity: 0.5; vertical-align: middle; }
#footer img:hover { opacity: 1; }

/* ===== BLOG STYLES ===== */
#blog-posts .timestamp {
    font: italic 11px "Lucida Grande", monospace;
    color: #888;
}

#blog-post blockquote {
    background: rgba(0,0,0,0.03);
    border-left: 3px solid #5c91d6;
    border-radius: 0 4px 4px 0;
    padding: 8px 12px;
    font-style: italic;
    color: #555;
}

/* ===== DOCK RESTORE ICON ===== */
#dock-restore {
    display: none;
    position: fixed;
    bottom: 8px;
    left: 50%;
    transform: translateX(-50%);
    width: 54px;
    height: 54px;
    background: linear-gradient(to bottom, #e8e8ea, #c0c0c6);
    border: 1px solid #888;
    border-radius: 10px;
    cursor: pointer;
    box-shadow: 0 2px 10px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.6);
    z-index: 9998;
    align-items: center;
    justify-content: center;
    user-select: none;
    -webkit-user-select: none;
    transition: transform 0.15s;
}

#dock-restore:hover { transform: translateX(-50%) scale(1.15); }
#dock-restore:active { transform: translateX(-50%) scale(1.0); }
#dock-restore.visible { display: flex; }

#dock-bar {
    display: none;
    position: fixed;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 68px;
    background: linear-gradient(to bottom, rgba(255,255,255,0.15), rgba(255,255,255,0.05));
    border-radius: 10px 10px 0 0;
    border: 1px solid rgba(255,255,255,0.2);
    border-bottom: none;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    z-index: 9997;
}

#dock-bar.visible { display: block; }