@IMPORT url("poem.css");

:root {
    --paper: #f5eee2;
    --paper-soft: #eee1cd;
    --ink: #4b3824;
    --accent: #9a7445;
    --accent-dark: #684a2b;
    --line: #c4a77f;
}

* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; overflow: hidden; }
body { color: var(--ink); background: var(--accent-dark); }

.poem-shell {
    display: grid;
    grid-template-rows: 94px minmax(0, 1fr) 34px;
    width: 100%;
    height: 100%;
    background: var(--paper);
}

iframe { display: block; width: 100%; height: 100%; border: 0; }
.poem-workspace {
    display: grid;
    grid-template-columns: 227px minmax(0, 1fr);
    min-height: 0;
    border-top: 1px solid var(--accent-dark);
    border-bottom: 1px solid var(--accent-dark);
}
.catalog-panel,
.reading-panel { min-width: 0; min-height: 0; }
.catalog-panel { border-right: 5px solid var(--accent-dark); }

.catalog-toggle,
.catalog-mask { display: none; }

@media screen and (max-width: 768px) {
    .poem-shell { grid-template-rows: 184px minmax(0, 1fr); }
    .footer-frame { display: none; }
    .poem-workspace { display: block; border: 0; }
    .reading-panel { width: 100%; height: 100%; }

    .catalog-panel {
        position: fixed;
        z-index: 40;
        top: 184px;
        bottom: 0;
        left: 0;
        width: min(82vw, 320px);
        border-right: 1px solid var(--line);
        transform: translateX(-105%);
        transition: transform .22s ease;
        box-shadow: 5px 0 18px rgba(32, 25, 16, .28);
        background: var(--paper);
    }
    body.catalog-open .catalog-panel { transform: translateX(0); }

    .catalog-toggle {
        display: block;
        position: fixed;
        z-index: 55;
        top: 52%;
        left: 0;
        width: 32px;
        min-height: 78px;
        padding: 9px 5px;
        border: 1px solid var(--accent-dark);
        border-left: 0;
        border-radius: 0 8px 8px 0;
        color: #fff;
        background: var(--accent);
        font: 16px/1.25 simsun, serif;
        writing-mode: vertical-rl;
        box-shadow: 2px 2px 7px rgba(0, 0, 0, .24);
    }
    body.catalog-open .catalog-toggle {
        left: min(82vw, 320px);
        border-left: 1px solid var(--accent-dark);
        border-right: 0;
        border-radius: 8px 0 0 8px;
    }

    .catalog-mask {
        display: none;
        position: fixed;
        z-index: 35;
        inset: 184px 0 0;
        background: rgba(24, 22, 16, .28);
    }
    body.catalog-open .catalog-mask { display: block; }

    body.catalog-home .catalog-panel {
        position: static;
        width: 100%;
        height: 100%;
        border: 0;
        transform: none;
        box-shadow: none;
    }
    body.catalog-home .poem-workspace { display: block; }
    body.catalog-home .reading-panel { display: none; }
    body.catalog-home .catalog-toggle,
    body.catalog-home .catalog-mask { display: none !important; }
}