/* ═══════════════════════════════════════════════════════════════
   casestudy.css — Shared chrome for all portfolio case studies
   ═══════════════════════════════════════════════════════════════ */

/* ── FONTS ─────────────────────────────────────────────────────── */
@font-face {
    font-family: 'RM Neue';
    src: url('fonts/RMNeue-Regular.otf') format('opentype');
    font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
    font-family: 'RM Neue';
    src: url('fonts/RMNeue-SemiBold.otf') format('opentype');
    font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
    font-family: 'RM Neue';
    src: url('fonts/RMNeue-Bold.otf') format('opentype');
    font-weight: 700; font-style: normal; font-display: swap;
}

/* ── DESIGN TOKENS ──────────────────────────────────────────────── */
:root {
    --panel-w:          260px;
    --hover:            rgba(0,0,0,0.05);
    --color-bg-dark:    #000;
    --color-border:     #e5e5e5;
    --color-text:       #000;
    --color-text-muted: #808080;
    --color-text-white: #fff;
    --color-blue:       #0d99ff;
    --border:           var(--color-border);
    --text:             var(--color-text);
    --text-2:           var(--color-text-muted);
    --blue:             var(--color-blue);
}

/* ── RESET ──────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
img { -webkit-user-drag: none; pointer-events: none; }

/* ── BASE ───────────────────────────────────────────────────────── */
html { overflow: hidden; max-width: 100%; overscroll-behavior: none; }
body {
    font-family: 'RM Neue', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 12px; line-height: 16px;
    color: var(--text); overflow: hidden; overscroll-behavior: none;
    width: 100%; height: 100vh; height: 100dvh; background: #e8e8e8; user-select: none;
}

/* ── LOADING SPINNER ────────────────────────────────────────────── */
.canvas-loader {
    position: fixed; inset: 0; left: var(--panel-w);
    display: flex; align-items: center; justify-content: center;
    z-index: 500; pointer-events: none;
}
.canvas-loader-icon {
    height: 24px;
    width: auto;
}

/* ── PANEL ──────────────────────────────────────────────────────── */
.panel {
    position: fixed; top: 0; left: 0; width: var(--panel-w); bottom: 0;
    height: 100vh; height: 100dvh;
    background: #fff; border-right: 1px solid var(--border);
    z-index: 900; display: flex; flex-direction: column;
    transition: transform 0.22s ease;
}
.panel.collapsed { transform: translateX(-100%); }
.panel:has(.panel-resize.resizing) { box-shadow: 4px 0 12px rgba(0,0,0,0.06); }
/* hover:hover throughout this file excludes touch devices — otherwise a tap
   triggers the :hover state with no mouse-leave to ever clear it, leaving
   the highlight/scale/shadow stuck until some unrelated tap elsewhere. */
@media (hover: hover) {
    .panel:has(.panel-resize:hover) { box-shadow: 4px 0 12px rgba(0,0,0,0.06); }
}

.panel-resize {
    position: absolute; top: 0; right: -3px; bottom: 0; width: 6px;
    cursor: col-resize; z-index: 10;
}
.panel-toggle-btn {
    position: absolute; top: 10px; right: 10px;
    width: 28px; height: 28px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 5px; cursor: pointer; color: var(--text-2);
    transition: background 0.1s, color 0.1s;
}
@media (hover: hover) {
    .panel-toggle-btn:hover { background: var(--hover); color: var(--text); }
}

.panel-back {
    display: inline-flex; align-items: center; gap: 6px;
    align-self: flex-start; padding: 16px 20px 12px;
    font-size: 14px; font-weight: 400; line-height: 20px;
    color: var(--text-2); text-decoration: none;
    transition: color 0.1s; flex-shrink: 0;
}
@media (hover: hover) {
    .panel-back:hover { color: var(--text); }
}

.panel-title {
    padding: 16px 20px;
    font-family: 'RM Neue', sans-serif; font-size: 22px; font-weight: 700;
    line-height: 28px; color: var(--text);
    border-bottom: 1px solid var(--border);
}
.panel-layers-head {
    padding: 16px 20px 8px;
    font-family: 'RM Neue', sans-serif; font-size: 14px; font-weight: 400;
    line-height: 20px; color: var(--text-2);
}
.layers-area { flex: 1; overflow-y: auto; padding: 0 10px 8px; }
.layers-area::-webkit-scrollbar { width: 3px; }
.layers-area::-webkit-scrollbar-thumb { background: #d0d0d0; border-radius: 2px; }

.layer {
    display: flex; align-items: center; gap: 8px;
    padding: 12px 10px; border-radius: 8px;
    cursor: pointer; font-family: 'RM Neue', sans-serif; font-size: 14px; line-height: 20px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--text);
}
@media (hover: hover) {
    .layer:hover { background: var(--hover); }
}
.layer.sel   { background: var(--color-bg-dark); color: var(--color-text-white); }
.layer .ico       { flex-shrink: 0; color: var(--text-2); }
.layer.sel .ico   { color: var(--color-text-white); }
.layer .lbl       { overflow: hidden; text-overflow: ellipsis; }

/* ── PANEL PILL (collapsed state) ───────────────────────────────── */
.panel-pill {
    position: fixed; top: 24px; left: 24px; z-index: 1100;
    background: #fff; border-radius: 12px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.12), 0 0 0 1px rgba(0,0,0,0.06);
    height: 48px; padding: 0 20px 0 16px;
    display: flex; align-items: center; gap: 12px;
    cursor: pointer; color: var(--text-2);
    opacity: 0; pointer-events: none; transform: translateX(-6px);
    transition: opacity 0.18s ease, transform 0.18s ease, color 0.1s;
}
@media (hover: hover) {
    .panel-pill:hover { color: var(--text); }
}
.panel-pill.visible { opacity: 1; pointer-events: auto; transform: translateX(0); }
.panel-pill svg   { width: 16px; height: 14px; flex-shrink: 0; }
.panel-pill-name  { font-size: 15px; font-weight: 400; line-height: 20px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
body.is-mobile .panel-pill { max-width: calc(50vw - 20px); }

/* ── ZOOM PILL ──────────────────────────────────────────────────── */
.zoom-float {
    position: fixed; top: 24px; right: 24px; z-index: 1100;
    background: #fff; border-radius: 100px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.12), 0 0 0 1px rgba(0,0,0,0.06);
    height: 48px; padding: 0 8px 0 12px;
    display: flex; align-items: center; gap: 1px;
}
.zoom-num {
    padding: 4px 0; font-size: 13px; font-weight: 400; line-height: 16px;
    min-width: 34px; text-align: center; border-radius: 4px;
}
.z-btn {
    width: 22px; height: 22px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 4px; cursor: pointer; font-size: 16px; line-height: 1;
    color: var(--text-2);
}
@media (hover: hover) {
    .z-btn:hover { background: var(--hover); color: var(--text); }
}
.t-btn {
    width: 32px; height: 32px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 6px; cursor: pointer; color: var(--text-2);
    transition: background 0.1s, color 0.1s; text-decoration: none;
}
@media (hover: hover) {
    .t-btn:hover { background: var(--hover); color: var(--text); }
}
.t-btn.active { background: rgba(13,153,255,0.1); color: var(--blue); }

/* ── CANVAS ─────────────────────────────────────────────────────── */
.canvas-vp {
    position: fixed; top: 0; left: var(--panel-w); right: 0; bottom: 0;
    height: 100vh; height: 100dvh;
    overflow: clip; contain: layout paint; cursor: grab; background-color: #e8e8e8;
    transition: left 0.22s ease;
}
.canvas-vp.dragging { cursor: grabbing; }
.canvas-world {
    position: absolute; top: 0; left: 0; width: 0; height: 0;
    transform-origin: 0 0; overflow: visible; opacity: 0;
}

/* ── FRAMES ─────────────────────────────────────────────────────── */
.fw { position: absolute; top: 0; }
.f-label {
    position: absolute; bottom: calc(100% + 8px); left: 0;
    font-size: 12px; font-weight: 400; line-height: 16px;
    color: #b2b2b2; white-space: nowrap; pointer-events: none;
    width: 1200px;
}
.ff {
    width: 1200px; height: auto; background: #fff;
    box-shadow: 0 2px 4px rgba(0,0,0,0.08), 0 8px 24px rgba(0,0,0,0.06);
    border-radius: 8px; overflow: hidden; position: relative;
}
.ff.sel { outline: 2px solid var(--color-bg-dark); }

/* ── DRAWING CANVAS ─────────────────────────────────────────────── */
#drawCanvas { position: fixed; inset: 0; pointer-events: none; z-index: 800; }
#drawCanvas.draw-on {
    pointer-events: auto;
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 18 18' fill='none'%3E%3Cpath d='M13 2l3 3-9.5 9.5L3 15l.5-3.5L13 2z' stroke='%231c1c1e' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") 3 21, crosshair;
}

/* ── PEN TOOLBAR ────────────────────────────────────────────────── */
/* pointer-events:none so the container's box (widened by the swatches panel's
   layout space even while hidden) doesn't sit on top of and swallow taps on
   whatever's beneath it (e.g. the slideshow button); children opt back in. */
.draw-ui { position: fixed; bottom: 24px; right: 24px; display: flex; align-items: center; gap: 10px; z-index: 1150; pointer-events: none; }
.swatches {
    display: flex; align-items: center; gap: 12px;
    background: #fff; padding: 12px; border-radius: 100px;
    box-shadow: 0 2px 16px rgba(0,0,0,0.14);
    opacity: 0; pointer-events: none; transform: translateX(10px);
    transition: opacity 0.18s ease, transform 0.18s ease;
}
.swatches.visible { opacity: 1; pointer-events: auto; transform: translateX(0); }
.swatch { width: 28px; height: 28px; border-radius: 50%; border: none; cursor: pointer; flex-shrink: 0; transition: transform 0.1s; }
/* hover: hover excludes touch devices — otherwise tapping a swatch triggers
   the enlarged :hover state with no mouse-leave to ever clear it, leaving it
   stuck at the bigger size after selection. */
@media (hover: hover) {
    .swatch:hover { transform: scale(1.15); }
}
.swatch-divider { width: 1px; height: 20px; background: #e5e5e5; flex-shrink: 0; }
.clear-btn {
    width: 20px; height: 28px; padding: 0; margin-right: 4px;
    border: none; background: transparent; cursor: pointer; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    color: var(--text-2); transition: color 0.1s;
}
@media (hover: hover) {
    .clear-btn:hover { color: #000; }
}
.pen-fab {
    width: 48px; height: 48px; border-radius: 50%;
    background: #fff; border: none;
    box-shadow: 0 2px 16px rgba(0,0,0,0.14);
    cursor: pointer; flex-shrink: 0; pointer-events: auto;
    display: flex; align-items: center; justify-content: center;
    color: var(--text); transition: background 0.15s, color 0.15s, box-shadow 0.15s;
}
@media (hover: hover) {
    .pen-fab:hover { box-shadow: 0 4px 20px rgba(0,0,0,0.2); }
}
.pen-fab.on    { background: var(--text); color: #fff; }

/* ── SLIDESHOW BUTTON ───────────────────────────────────────────── */
#slideshowBtn {
    position: fixed; bottom: 24px; left: 0; right: 0; margin: 0 auto; width: fit-content;
    z-index: 1100; background: #fff; border-radius: 100px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.12), 0 0 0 1px rgba(0,0,0,0.06);
    height: 48px; padding: 0 20px 0 16px;
    display: flex; align-items: center; gap: 8px;
    cursor: pointer; color: var(--text); white-space: nowrap;
    font-family: 'RM Neue', sans-serif; font-size: 14px; font-weight: 400;
    transition: box-shadow 0.15s;
}
@media (hover: hover) {
    #slideshowBtn:hover { box-shadow: 0 4px 20px rgba(0,0,0,0.16), 0 0 0 1px rgba(0,0,0,0.08); }
}

/* ── PRESENT MODE ───────────────────────────────────────────────── */
#presentOverlay {
    display: none; position: fixed; inset: 0;
    background: #111; z-index: 3000;
    align-items: center; justify-content: center;
}
#presentOverlay.active { display: flex; }
#presentWrap {
    /* #presentSlot is visually shrunk via CSS transform:scale(), which doesn't
       affect its layout box — that stays its native 1200x675 for overflow
       purposes. overflow:hidden (not auto/scroll) keeps that untransformed
       excess from showing up as scrollable empty space below the slide. */
    position: relative; overflow: hidden;
    flex-shrink: 0; cursor: pointer;
}
#presentSlot { width: 1200px; height: 675px; transform-origin: top left; display: block; }
#presentSlot > .ff { box-shadow: none !important; border-radius: 0 !important; }
#presentBar {
    position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%);
    display: flex; align-items: center; gap: 4px;
    background: rgba(20,20,20,0.75); backdrop-filter: blur(12px);
    border-radius: 100px; padding: 0 6px; height: 40px;
    font-family: 'RM Neue', sans-serif; font-size: 13px; color: rgba(255,255,255,0.55);
    white-space: nowrap;
}
#presentCounter { padding: 0 8px; }
.p-btn {
    width: 32px; height: 32px; border-radius: 50%; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    color: rgba(255,255,255,0.55); transition: background 0.1s, color 0.1s;
}
@media (hover: hover) {
    .p-btn:hover { background: rgba(255,255,255,0.12); color: #fff; }
}

/* ── MOBILE OVERRIDES ───────────────────────────────────────────── */
body.is-mobile .canvas-vp     { left: 0 !important; }
body.is-mobile .canvas-loader { left: 0 !important; }
body.is-mobile .zoom-float { z-index: 800; }
body.is-mobile .draw-ui    { gap: 10px; }
body.is-mobile .swatches   { gap: 10px; padding: 11px; }
body.is-mobile .swatch     { width: 28px; height: 28px; }
body.is-mobile .clear-btn  { width: 22px; height: 28px; }
body.is-mobile .pen-fab    { width: 48px; height: 48px; }