/* casefile.css: the homepage's real cabinet / folder / case-file styles (copied from index.html) for the editor */
:root{--background:#efe0d6;--box-bg:#efe3cfe8}
@keyframes pageIn {
    from { opacity: 0; transform: translateX(30px); }
    to   { opacity: 1; transform: none; }
}
/* photo frames */
.photo {
    position: relative;
    margin: 0;
    padding: 0.6em 0.6em 2em;
    background: #fff;
    border: 1px solid var(--muted);
    box-shadow: 0.25em 0.25em var(--muted);
    transition: transform .3s ease;
}

.photo:nth-child(odd)  { transform: rotate(-2deg); }
.photo:nth-child(even) { transform: rotate(2deg); }
.photo:hover { transform: rotate(0) scale(1.03); }

.photo img, .photo .slot { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }   /* change 4 / 3 for another photo shape */

.photo .slot {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f3ece0;
    border: 2px dashed var(--main);
}

.photo figcaption {
    position: absolute;
    bottom: 0.5em;
    left: 0;
    right: 0;
    font-family: "Rock Salt", cursive;
    font-size: 0.75rem;
}

/* tape on top */
.photo::before {
    content: "";
    position: absolute;
    top: -0.7em;
    left: 50%;
    width: 4em;
    height: 1.3em;
    background: var(--muted);
    opacity: 0.75;
    transform: translateX(-50%) rotate(-3deg);
}
/* PROFILES (filing cabinet + case files)*/
.cabinet {
    position: relative;
    min-height: 26em;
    margin: 0 0.7em 0.7em 0;
    overflow: hidden;
    background-color: var(--box-bg);
    border: 2px solid var(--main);
    box-shadow: 0.5em 0.5em var(--muted);
    border-radius: 5px;
}

/* the drawer front: slides down when opened */
.cab-front {
    position: absolute;
    inset: 0;
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    cursor: pointer;
    background: var(--main);
    color: var(--background);
    outline: 2px dashed var(--background);
    outline-offset: -14px;
    transition: transform .8s cubic-bezier(.6, .05, .3, 1), opacity .4s ease .4s;
}

.cab-front h1 { font-size: clamp(2.2rem, 9vw, 4rem); }
.cab-handle { width: 5em; height: 1.1em; margin-top: 1em; background: var(--background); border-radius: 999px; box-shadow: 0 0.25em 0 #0003; }
.cabinet.open .cab-front { transform: translateY(100%); opacity: 0; pointer-events: none; }

.cab-inside { min-height: 26em; padding: 1.4em; }
.cab-hint { margin: 0 0 1.2em; text-align: center; }

/* folders, grouped under letter tabs */
.folder-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 190px), 1fr)); gap: 1.4em 1em; }

.letter {
    grid-column: 1 / -1;
    justify-self: start;
    padding: 0.1em 0.9em;
    background: var(--main);
    color: var(--background);
    border-radius: 5px 5px 0 0;
    font-family: "Rubik Dirt", sans-serif;
}

.folder {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.2em;
    margin-top: 0.9em;
    padding: 1.2em 0.8em 0.9em;
    font: inherit;
    color: #5a3d12;
    background: #ecd59b;
    border: 2px solid var(--main);
    border-radius: 3px 6px 6px 6px;
    box-shadow: 0.25em 0.25em var(--muted);
}

.folder::before {
    content: "";
    position: absolute;
    top: -0.95em;
    left: -2px;
    width: 45%;
    height: 0.95em;
    background: #ecd59b;
    border: 2px solid var(--main);
    border-bottom: none;
    border-radius: 5px 5px 0 0;
}

.folder:hover { transform: translateY(-3px); }

/* the opened case file: info on the right, blank paper on the left */
.casefile {
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 26em;
    background: #ecd59b;
    border: 2px solid var(--main);
    border-radius: 5px;
    box-shadow: 0.25em 0.25em var(--muted);
    animation: pageIn .5s ease;
}

.cf-left, .cf-right { padding: 1.2em; }
.cf-left { border-right: 2px dashed var(--muted); }

.paper {
    min-height: 22em;
    max-height: 34em;
    overflow-y: auto;
    padding: 1em 1.2em;
    line-height: 1.7em;
    color: #3b2b14;
    background: #fffdf6 repeating-linear-gradient(transparent 0 1.7em, #0000001f 1.7em calc(1.7em + 1px));
    box-shadow: 0.2em 0.2em #0002;
    transform-origin: right center;      /* hinge at the spine */
}

.paper.turn { animation: pageTurn .6s ease; }

@keyframes pageTurn {
    from { transform: perspective(1400px) rotateY(90deg); opacity: 0.3; }
    to   { transform: none; opacity: 1; }
}

.paper h3 { margin: 0 0 0.4em; text-align: center; color: var(--main); }
.paper p { margin: 0 0 1.7em; }
.story-list { margin: 0; padding-left: 1.4em; }

.story-link, .story-back {
    padding: 0;
    font: inherit;
    text-align: left;
    color: var(--main);
    background: none;
    border: none;
    text-decoration: underline;
}

/* the slip with the person's info */
.slip {
    position: relative;
    margin-top: 1.4em;
    padding: 0.8em 1em 1.6em;
    color: #3b2b14;
    background: #fffdf6;
    border: 1px solid #0003;
    box-shadow: 0.2em 0.2em #0002;
}

.slip h3, .slip h4 { margin: 0.2em 0; text-align: center; color: var(--main); letter-spacing: 0.05em; }
.slip h3 { padding-bottom: 0.3em; border-bottom: 3px double var(--muted); }
.slip dl { display: grid; grid-template-columns: auto 1fr; gap: 0.25em 0.8em; margin: 0.6em 0; }
.slip dt { font-size: 0.75rem; font-weight: bold; text-transform: uppercase; }
.slip dd { margin: 0; }
.slip ul { margin: 0.3em 0 0; padding-left: 1.2em; }

.slip::after {
    content: "VH12";
    position: absolute;
    right: 0.6em;
    bottom: 0.4em;
    padding: 0.05em 0.5em;
    color: var(--main);
    border: 2px solid var(--main);
    opacity: 0.55;
    font-family: "Rubik Dirt", sans-serif;
    transform: rotate(-12deg);
}

.stories-btn {
    display: block;
    margin: 1.2em auto 0;
    padding: 0.6em 1.4em;
    font: inherit;
    color: var(--background);
    background: var(--main);
    border: none;
    border-radius: 999px;
}
/* published folders use their own colour */
.folder.vx{background:var(--fc);color:var(--ft)}.folder.vx::before{background:var(--fc)}.folder.vx .fe{font-size:1.8rem;line-height:1}
/* editor-only: the real case file becomes the canvas */
.cw{display:block}
.cabinet{width:100%}
.ed .paper,.ed .photo,.ed .slip{cursor:move;touch-action:none;position:relative}
.ed img{pointer-events:none;-webkit-user-drag:none}
.ed [data-part].on{outline:2px dashed var(--main);outline-offset:3px}
.ed .on>.rz{right:4px;bottom:4px}.ed .on>.rt{right:4px;top:4px}
.cab-tools{margin-top:.5em}