/* =========================================================================
   Scriptorium - Early Macintosh GUI
   System 1-6 aesthetic. Strictly black and white. 1-bit everything.
   ========================================================================= */

@font-face {
    font-family: 'Chicago';
    src: url('./fonts/ChicagoFLF.woff2') format('woff2'),
         url('./fonts/ChicagoFLF.ttf') format('truetype'),
         url('https://fonts.cdnfonts.com/s/12116/ChicagoFLF.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@import url('https://fonts.googleapis.com/css2?family=UnifrakturCook:wght@700&display=swap');

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
    --black: #000000;
    --white: #FFFFFF;
    --gothic: 'UnifrakturCook', 'Old English Text MT', 'Luminari', serif;
    --system: 'Chicago', 'Geneva', 'Charcoal', monospace;
}

body {
    font-family: var(--system);
    font-size: 12px;
    background: var(--white);
    color: var(--black);
    -webkit-font-smoothing: none;
    -moz-osx-font-smoothing: unset;
    font-smooth: never;
    image-rendering: pixelated;
    cursor: default;
    min-height: 100vh;
    overflow: hidden;
}

/* ==========================================================================
   Menu Bar (always at top)
   ========================================================================== */

.menu-bar {
    background: var(--white);
    border-bottom: 2px solid var(--black);
    height: 22px;
    display: flex;
    align-items: center;
    padding: 0 8px;
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 1000;
}

.menu-bar-apple {
    font-size: 14px;
    margin-right: 16px;
    font-weight: bold;
}

.menu-bar-dropdown {
    position: relative;
    height: 100%;
}

.menu-bar-item {
    padding: 0 12px;
    font-family: var(--system);
    font-size: 12px;
    cursor: default;
    height: 100%;
    display: flex;
    align-items: center;
    font-weight: bold;
    user-select: none;
}

.menu-bar-item:hover,
.menu-bar-item.active {
    background: var(--black);
    color: var(--white);
}

.menu-bar-title {
    font-family: var(--gothic);
    font-size: 15px;
    margin-left: auto;
    margin-right: auto;
    letter-spacing: 1px;
}

/* Dropdown menus */
.dropdown-content {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 200px;
    background: var(--white);
    border: 1px solid var(--black);
    box-shadow: 2px 2px 0 var(--black);
    z-index: 1001;
}

.dropdown-content.open {
    display: block;
}

.dropdown-item {
    padding: 2px 16px;
    font-family: var(--system);
    font-size: 12px;
    cursor: default;
    white-space: nowrap;
}

.dropdown-item:hover {
    background: var(--black);
    color: var(--white);
}

.dropdown-divider {
    border-top: 1px solid var(--black);
    margin: 2px 0;
}

.dropdown-loading {
    color: #888;
    font-style: italic;
}

/* ==========================================================================
   Page System
   ========================================================================== */

.page {
    position: fixed;
    top: 22px; left: 0; right: 0; bottom: 0;
    background: var(--white);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
    z-index: 1;
}

.page-active {
    opacity: 1;
    pointer-events: auto;
    z-index: 2;
}

/* ==========================================================================
   Desktop (crosshatch background like Mac Finder)
   ========================================================================== */

.desktop {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background-color: var(--white);
    background-image: url("data:image/svg+xml,%3Csvg width='8' height='8' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='8' height='8' fill='white'/%3E%3Cpath d='M0 0L8 8M8 0L0 8' stroke='black' stroke-width='0.4' opacity='0.22'/%3E%3C/svg%3E");
    background-size: 8px 8px;
    overflow: hidden;
}

/* ==========================================================================
   Mac Window Chrome
   ========================================================================== */

.mac-window {
    border: 2px solid var(--black);
    background: var(--white);
    box-shadow: 2px 2px 0 var(--black);
    position: relative;
}

.mac-titlebar {
    border-bottom: 2px solid var(--black);
    height: 22px;
    display: flex;
    align-items: center;
    padding: 0 4px;
    position: relative;
    background-image: repeating-linear-gradient(
        transparent 0px, transparent 1px,
        var(--black) 1px, var(--black) 2px
    );
    background-size: 100% 2px;
}

.mac-close-box {
    width: 13px; height: 11px;
    border: 1px solid var(--black);
    background: var(--white);
    flex-shrink: 0;
    cursor: pointer;
    z-index: 1;
}

.mac-close-box:active { background: var(--black); }

.mac-titlebar-title {
    background: var(--white);
    padding: 0 10px;
    font-family: var(--system);
    font-size: 12px;
    font-weight: bold;
    white-space: nowrap;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1;
}

.mac-window-body { padding: 12px; }

.mac-resize-handle {
    position: absolute;
    bottom: 0; right: 0;
    width: 16px; height: 16px;
    background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' xmlns='http://www.w3.org/2000/svg'%3E%3Cline x1='4' y1='16' x2='16' y2='4' stroke='black' stroke-width='1'/%3E%3Cline x1='8' y1='16' x2='16' y2='8' stroke='black' stroke-width='1'/%3E%3Cline x1='12' y1='16' x2='16' y2='12' stroke='black' stroke-width='1'/%3E%3C/svg%3E");
    cursor: nwse-resize;
}

/* ==========================================================================
   Manuscript Window (input page)
   ========================================================================== */

.manuscript-window {
    position: absolute;
    width: 520px;
    min-height: 380px;
}

.manuscript-window .mac-textarea {
    width: 100%;
    height: 240px;
    border: 1px solid var(--black);
    font-family: var(--system);
    font-size: 12px;
    padding: 4px 6px;
    resize: none;
    background: var(--white);
    color: var(--black);
    outline: none;
    -webkit-font-smoothing: none;
    line-height: 1.5;
}

.mac-textarea:focus { outline: none; }
.mac-textarea::selection { background: var(--black); color: var(--white); }

/* Mac scrollbar */
.mac-textarea::-webkit-scrollbar { width: 16px; background: var(--white); border-left: 1px solid var(--black); }
.mac-textarea::-webkit-scrollbar-thumb { background: var(--white); border: 1px solid var(--black); }
.mac-textarea::-webkit-scrollbar-button { height: 16px; background: var(--white); border: 1px solid var(--black); }

.window-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 10px;
    padding-top: 8px;
    border-top: 1px dotted var(--black);
}

.footer-hint {
    font-family: var(--system);
    font-size: 10px;
    color: var(--black);
    opacity: 0.6;
}

/* ==========================================================================
   About Window (desk accessory)
   ========================================================================== */

.about-window {
    position: absolute;
    width: 220px;
}

.about-body {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px !important;
}

.about-icon {
    flex-shrink: 0;
}

.about-text {
    font-family: var(--system);
    font-size: 11px;
    line-height: 1.5;
}

.about-version {
    font-size: 10px;
    opacity: 0.5;
}

/* ==========================================================================
   Buttons
   ========================================================================== */

.mac-button {
    border: 2px solid var(--black);
    border-radius: 8px;
    background: var(--white);
    font-family: var(--system);
    font-size: 12px;
    padding: 2px 16px;
    cursor: pointer;
    outline: none;
    white-space: nowrap;
    font-weight: bold;
}

.mac-button:active { background: var(--black); color: var(--white); }

.mac-button:disabled {
    background-image: url("data:image/svg+xml,%3Csvg width='4' height='4' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='4' height='4' fill='white'/%3E%3Crect x='0' y='0' width='1' height='1' fill='black'/%3E%3Crect x='2' y='2' width='1' height='1' fill='black'/%3E%3C/svg%3E");
    background-size: 4px 4px;
    cursor: default;
}

.mac-button-default {
    border-width: 3px;
    padding: 2px 20px;
}

.illuminate-btn {
    font-family: var(--gothic);
    font-size: 16px;
    letter-spacing: 1px;
    padding: 3px 28px;
}

.mac-button-small {
    border: 1px solid var(--black);
    border-radius: 4px;
    background: var(--white);
    font-family: var(--system);
    font-size: 10px;
    padding: 1px 6px;
    cursor: pointer;
    outline: none;
}

.mac-button-small:active { background: var(--black); color: var(--white); }
.mac-button-small.active { background: var(--black); color: var(--white); }

/* ==========================================================================
   Page: Output
   ========================================================================== */

.plotter-canvas-full {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--white);
    overflow: hidden;
}

.plotter-canvas-full svg {
    max-width: 95%;
    max-height: 95%;
    width: auto;
    height: auto;
}

/* Loading overlay */
.loading-overlay {
    position: absolute;
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    transition: all 0.6s ease;
}

.loading-center {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.loading-corner {
    top: auto; left: auto;
    bottom: 48px; right: 16px;
    transform: scale(0.5);
    transform-origin: bottom right;
    opacity: 0.5;
}

.loading-overlay.hidden { display: none; }

.loading-status {
    font-family: var(--gothic);
    font-size: 16px;
    text-align: center;
    white-space: nowrap;
}

.loading-progress { width: 200px; }

/* Candle + Feather */
.candle-feather {
    display: flex;
    gap: 32px;
    align-items: flex-end;
}

.candle-sprite {
    width: 64px;
    height: 136px;
    image-rendering: pixelated;
}

.feather-sprite {
    width: 48px;
    height: 72px;
    image-rendering: pixelated;
}

/* Flame flicker */
@keyframes flame-flicker {
    0%, 100% { transform: scaleY(1) scaleX(1); }
    12% { transform: scaleY(1.1) scaleX(0.9) translate(0, -1px); }
    28% { transform: scaleY(0.85) scaleX(1.1); }
    44% { transform: scaleY(1.05) scaleX(0.95) translate(0.5px, -0.5px); }
    62% { transform: scaleY(0.9) scaleX(1.05) translate(-0.5px, 0); }
    80% { transform: scaleY(1.08) scaleX(0.92) translate(0, -1px); }
}

.flame-outer {
    animation: flame-flicker 0.6s ease-in-out infinite;
    transform-origin: center bottom;
}

@keyframes flame-inner {
    0%, 100% { opacity: 1; }
    30% { opacity: 0.7; }
    60% { opacity: 1; }
    80% { opacity: 0.8; }
}

.flame-inner {
    animation: flame-inner 0.4s ease-in-out infinite;
}

@keyframes flame-tip {
    0%, 100% { transform: translate(0, 0); opacity: 1; }
    25% { transform: translate(1px, -1px); opacity: 0.6; }
    50% { transform: translate(-1px, 0); opacity: 1; }
    75% { transform: translate(0, -1px); opacity: 0.4; }
}

.flame-tip {
    animation: flame-tip 0.35s ease-in-out infinite;
    transform-origin: center bottom;
}

/* Feather writing motion */
@keyframes feather-write {
    0%, 100% { transform: translate(0, 0) rotate(0deg); }
    15% { transform: translate(2px, 1px) rotate(-2deg); }
    35% { transform: translate(-1px, 0) rotate(1deg); }
    55% { transform: translate(3px, 1px) rotate(-3deg); }
    75% { transform: translate(-2px, 0.5px) rotate(2deg); }
}

.feather-write {
    animation: feather-write 1.2s ease-in-out infinite;
    transform-origin: 25% 92%;
}

/* Progress bar */
.mac-progress {
    height: 14px;
    border: 1px solid var(--black);
    background: var(--white);
    overflow: hidden;
}

.mac-progress-fill {
    height: 100%;
    width: 0%;
    transition: width 0.3s ease-out;
    background-image: repeating-linear-gradient(
        -45deg,
        var(--black) 0px, var(--black) 2px,
        var(--white) 2px, var(--white) 4px
    );
}

/* Corner status */
.corner-status {
    position: absolute;
    bottom: 8px; left: 8px;
    z-index: 5;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 8px;
    background: var(--white);
    border: 1px solid var(--black);
    box-shadow: 1px 1px 0 var(--black);
}

.corner-status.hidden { display: none; }

.speed-control { display: flex; align-items: center; gap: 4px; }

.status-text {
    font-family: var(--system);
    font-size: 11px;
    white-space: nowrap;
    min-width: 120px;
}

/* Back button */
.back-btn {
    position: absolute;
    top: 8px; left: 8px;
    z-index: 5;
    font-family: var(--system);
    font-size: 12px;
    border-radius: 6px;
    padding: 2px 12px;
}

.back-btn.hidden { display: none; }

/* ==========================================================================
   Page: Corpus — centered gallery grid
   ========================================================================== */

.corpus-page {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--black);
}

.corpus-window {
    width: 90%;
    max-width: 900px;
    height: 90%;
    display: flex;
    flex-direction: column;
}

.corpus-window .mac-titlebar {
    flex-shrink: 0;
}

.corpus-body {
    flex: 1;
    padding: 12px;
    display: flex;
    flex-direction: column;
    background: var(--black);
    overflow: hidden;
}

.corpus-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    flex: 1;
    min-height: 0;
}

.corpus-item {
    position: relative;
    overflow: hidden;
    background: var(--black);
}

.corpus-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    filter: url(#dither-filter);
}

/* Caption hidden by default, shown on hover */
.corpus-item-caption {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    background: var(--white);
    border-top: 1px solid var(--black);
    padding: 3px 6px;
    font-family: var(--system);
    font-size: 10px;
    opacity: 0;
    transition: opacity 0.15s ease;
    pointer-events: none;
}

.corpus-item:hover .corpus-item-caption {
    opacity: 1;
}

.corpus-loading {
    font-family: var(--system);
    font-size: 12px;
    padding: 40px;
    text-align: center;
    color: var(--white);
    grid-column: 1 / -1;
}

.corpus-footer {
    padding: 8px;
    text-align: center;
    flex-shrink: 0;
}

.corpus-footer .mac-button {
    background: var(--black);
    color: var(--white);
    border-color: var(--white);
}

/* ==========================================================================
   Page: Reader — two-page spread book viewer
   ========================================================================== */

.reader-page {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-image: url("data:image/svg+xml,%3Csvg width='8' height='8' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='8' height='8' fill='white'/%3E%3Cpath d='M0 0L8 8M8 0L0 8' stroke='black' stroke-width='0.4' opacity='0.22'/%3E%3C/svg%3E");
    background-size: 8px 8px;
}

.reader-window {
    width: 94%;
    max-width: 1100px;
    height: 92%;
    display: flex;
    flex-direction: column;
}

.reader-window .mac-titlebar {
    flex-shrink: 0;
}

.reader-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 8px;
    min-height: 0;
    overflow: hidden;
}

.reader-spread {
    flex: 1;
    display: flex;
    min-height: 0;
    border: 1px solid var(--black);
    background: var(--white);
}

.reader-page-left,
.reader-page-right {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    position: relative;
    overflow: hidden;
}

.reader-spine {
    width: 3px;
    background: var(--black);
    flex-shrink: 0;
}

.reader-canvas {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 0;
    overflow: hidden;
    padding: 8px;
}

.reader-canvas svg,
.reader-page-img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    background: var(--white);
}

.reader-loading {
    font-family: var(--system);
    font-size: 11px;
    opacity: 0.4;
}


.reader-pagenum {
    text-align: center;
    font-family: var(--system);
    font-size: 10px;
    padding: 2px 0;
    border-top: 1px dotted var(--black);
    flex-shrink: 0;
}

.reader-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 6px 0 0;
    flex-shrink: 0;
}

.reader-spread-label {
    font-family: var(--system);
    font-size: 11px;
    min-width: 100px;
    text-align: center;
}

.reader-selector {
    text-align: center;
    padding: 4px 0 0;
    flex-shrink: 0;
}

.mac-select {
    font-family: var(--system);
    font-size: 11px;
    border: 1px solid var(--black);
    background: var(--white);
    padding: 2px 4px;
    cursor: pointer;
    outline: none;
}

/* ==========================================================================
   Page: Statement
   ========================================================================== */

.statement-page {
    height: 100%;
    padding: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-image: url("data:image/svg+xml,%3Csvg width='8' height='8' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='8' height='8' fill='white'/%3E%3Cpath d='M0 0L8 8M8 0L0 8' stroke='black' stroke-width='0.4' opacity='0.22'/%3E%3C/svg%3E");
    background-size: 8px 8px;
}

.statement-window {
    max-width: 600px;
    width: 100%;
}

.statement-body {
    padding: 24px;
}

.statement-text {
    font-family: var(--system);
    font-size: 12px;
    line-height: 1.8;
}

/* ==========================================================================
   Magnifying Glass
   ========================================================================== */

.mag-toggle {
    position: fixed;
    bottom: 8px;
    right: 8px;
    z-index: 900;
    width: 28px;
    height: 28px;
    border: 2px solid var(--black);
    border-radius: 6px;
    background: var(--white);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 1px 1px 0 var(--black);
}

.mag-toggle:active,
.mag-toggle.active {
    background: var(--black);
    color: var(--white);
}

.mag-toggle svg { pointer-events: none; }

.mag-lens {
    display: none;
    position: fixed;
    width: 160px;
    height: 160px;
    border: 2px solid var(--black);
    border-radius: 50%;
    box-shadow: 2px 2px 0 var(--black);
    pointer-events: none;
    z-index: 999;
    overflow: hidden;
    background: var(--white);
    image-rendering: auto;
}

.mag-lens.visible { display: block; }

.mag-lens img {
    position: absolute;
    image-rendering: auto;
}

body.mag-active { cursor: crosshair !important; }
body.mag-active * { cursor: crosshair !important; }

/* ==========================================================================
   States — Mac hourglass busy cursor
   ========================================================================== */

body.busy {
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='22'%3E%3Crect x='2' y='0' width='12' height='2' fill='black'/%3E%3Crect x='3' y='2' width='10' height='1' fill='black'/%3E%3Crect x='4' y='3' width='8' height='1' fill='white' stroke='black' stroke-width='0.5'/%3E%3Crect x='5' y='4' width='6' height='1' fill='white' stroke='black' stroke-width='0.5'/%3E%3Crect x='5' y='5' width='6' height='1' fill='%23000' opacity='0.3'/%3E%3Crect x='6' y='6' width='4' height='1' fill='%23000' opacity='0.3'/%3E%3Crect x='6' y='7' width='4' height='1' fill='%23000' opacity='0.5'/%3E%3Crect x='7' y='8' width='2' height='1' fill='black'/%3E%3Crect x='6' y='9' width='4' height='1' fill='black'/%3E%3Crect x='7' y='10' width='2' height='1' fill='black'/%3E%3Crect x='6' y='11' width='4' height='1' fill='%23000' opacity='0.5'/%3E%3Crect x='6' y='12' width='4' height='1' fill='%23000' opacity='0.3'/%3E%3Crect x='5' y='13' width='6' height='1' fill='%23000' opacity='0.3'/%3E%3Crect x='5' y='14' width='6' height='1' fill='white' stroke='black' stroke-width='0.5'/%3E%3Crect x='4' y='15' width='8' height='1' fill='white' stroke='black' stroke-width='0.5'/%3E%3Crect x='3' y='16' width='10' height='2' fill='black'/%3E%3Crect x='2' y='18' width='12' height='2' fill='black'/%3E%3C/svg%3E") 8 11, wait;
}

body.busy .mac-textarea {
    cursor: inherit;
}

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

@media (max-width: 700px) {
    .manuscript-window {
        width: calc(100% - 32px) !important;
        left: 16px !important;
        top: 16px !important;
    }
    .about-window { display: none; }
    .mac-textarea { height: 150px; }
}