/* ============================================================
   ZLS Laboratory V3 — Components
   Gallery · Modal · Settings · Social · Animations
   ============================================================ */

/* ═══════════════════════════════════════════
   SECTION VIEWS — One visible at a time
   ═══════════════════════════════════════════ */
.zls-view {
    display: none;
    flex: 1;
    flex-direction: column;
    overflow: hidden;
    min-height: 0;
}

.zls-view.is-active {
    display: flex;
}

/* ═══════════════════════════════════════════
   DETAIL PANEL — Slide animation
   ═══════════════════════════════════════════ */
.zls-panel--detail {
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
                opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: transform, opacity;
}

.zls-panel--detail.is-hidden {
    transform: translateX(100%);
    opacity: 0;
    pointer-events: none;
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 55%;
}

/* ═══════════════════════════════════════════
   GALLERY GRID
   ═══════════════════════════════════════════ */
.zls-gallery {
    flex: 1;
    overflow-y: auto;
    padding: var(--sp-4);
}

/* ── Golden Ratio Mosaic Grid ──
   4-column grid with varied tile sizes.
   Pattern per 12 items (pseudo-random feel):
     1    = HERO  (2col × 2row)
     3,8  = TALL  (1col × 2row)
     5,10 = WIDE  (2col × 1row)
     rest = standard (1×1)
*/
.zls-gallery__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: minmax(100px, 140px);
    grid-auto-flow: dense;
    gap: var(--sp-2);
}

/* All items: base styles */
.zls-gallery__item {
    aspect-ratio: auto;
    background: var(--bg-elevated);
    border: var(--border-panel);
    overflow: hidden;
    cursor: pointer;
    position: relative;
    transition: border-color 0.2s, transform 0.2s;
    will-change: transform;
}

/* HERO — 2×2 — every 12th starting from 1 */
.zls-gallery__item:nth-child(12n+1) {
    grid-column: span 2;
    grid-row: span 2;
}

/* TALL — 1×2 — positions 3 and 8 of every 12 */
.zls-gallery__item:nth-child(12n+3),
.zls-gallery__item:nth-child(12n+8) {
    grid-row: span 2;
}

/* WIDE — 2×1 — positions 5 and 10 of every 12 */
.zls-gallery__item:nth-child(12n+5),
.zls-gallery__item:nth-child(12n+10) {
    grid-column: span 2;
}

.zls-gallery__item:hover {
    border-color: var(--clr-red);
    transform: scale(1.015);
    z-index: 1;
}

/* Placeholder color blocks for items without images */
.zls-gallery__item--placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--ff-cli);
    font-size: var(--fs-micro);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--clr-gray-300);
}

.zls-gallery__item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    filter: grayscale(100%) brightness(0.85);
    mix-blend-mode: screen;
    transition: filter 0.4s ease, mix-blend-mode 0.4s ease;
}

.zls-gallery__item:hover img {
    filter: grayscale(0%) brightness(1);
    mix-blend-mode: normal;
}

.zls-gallery__item-label {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: var(--sp-1) var(--sp-2);
    background: hsla(0, 0%, 0%, 0.75);
    font-family: var(--ff-cli);
    font-size: var(--fs-micro);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--clr-gray-100);
    opacity: 0;
    transform: translateY(100%);
    transition: opacity 0.2s, transform 0.2s;
}

.zls-gallery__item:hover .zls-gallery__item-label {
    opacity: 1;
    transform: translateY(0);
}

/* ═══════════════════════════════════════════
   LIGHTBOX MODAL (Lab-style)
   ═══════════════════════════════════════════ */
.zls-lightbox {
    position: fixed;
    inset: 0;
    z-index: var(--z-modal);
    display: flex;
    align-items: center;
    justify-content: center;
    background: hsla(0, 0%, 0%, 0.88);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s, visibility 0.3s;
}

.zls-lightbox.is-open {
    opacity: 1;
    visibility: visible;
}

.zls-lightbox__container {
    position: relative;
    width: 80vw;
    height: 80vh;
    background: var(--bg-surface);
    border: var(--border-panel);
    display: flex;
    flex-direction: column;
    transform: scale(0.95);
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.zls-lightbox.is-open .zls-lightbox__container {
    transform: scale(1);
}

.zls-lightbox__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--sp-2) var(--sp-4);
    background: var(--bg-elevated);
    border-bottom: var(--border-panel);
    font-family: var(--ff-cli);
    font-size: var(--fs-xs);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--clr-gray-200);
}

.zls-lightbox__close {
    font-family: var(--ff-cli);
    font-size: var(--fs-base);
    color: var(--clr-gray-200);
    padding: var(--sp-1) var(--sp-2);
    border: var(--border-panel);
    transition: color 0.15s, border-color 0.15s;
}

.zls-lightbox__close:hover {
    color: var(--clr-red);
    border-color: var(--clr-red);
}

.zls-lightbox__body {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--sp-4);
    min-height: 0;
    overflow: hidden;        /* clip swipe content inside */
    position: relative;
}

.zls-lightbox__body img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

/* Placeholder for lightbox image */
.zls-lightbox__placeholder {
    width: 100%;
    height: 100%;
    background: var(--bg-base);
    border: var(--border-subtle);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--ff-cli);
    font-size: var(--fs-xs);
    color: var(--clr-gray-400);
    letter-spacing: 0.15em;
    text-transform: uppercase;
}

.zls-lightbox__nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--sp-2) var(--sp-4);
    border-top: var(--border-panel);
    background: var(--bg-elevated);
}

.zls-lightbox__btn {
    font-family: var(--ff-cli);
    font-size: var(--fs-sm);
    letter-spacing: 0.1em;
    color: var(--clr-gray-200);
    padding: var(--sp-1) var(--sp-3);
    border: var(--border-panel);
    transition: color 0.15s, border-color 0.15s;
}

.zls-lightbox__btn:hover {
    color: var(--clr-white);
    border-color: var(--clr-gray-200);
}

.zls-lightbox__counter {
    font-family: var(--ff-cli);
    font-size: var(--fs-micro);
    letter-spacing: 0.12em;
    color: var(--clr-gray-300);
}

/* ═══════════════════════════════════════════
   SOCIAL / CONTACT ITEMS
   ═══════════════════════════════════════════ */
.zls-social-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--sp-3) var(--sp-4);
    border-bottom: var(--border-subtle);
    font-size: var(--fs-sm);
    color: var(--clr-gray-100);
    cursor: pointer;
    transition: background-color 0.15s;
    /* Reset for <button> usage */
    width: 100%;
    text-align: left;
    background: none;
    border-top: none;
    border-left: none;
    border-right: none;
    font-family: inherit;
    text-decoration: none;
}

/* Hide email form button on desktop — form already visible */
.zls-social-item[data-show-form] {
    display: none;
}

@media (max-width: 768px) {
    .zls-social-item[data-show-form] {
        display: flex;
    }
}

.zls-social-item:last-child {
    border-bottom: none;
}

.zls-social-item:hover {
    background-color: var(--bg-elevated);
}

.zls-social-item__name {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
}

.zls-social-item__icon {
    width: 18px;
    text-align: center;
    color: var(--clr-gray-300);
    font-size: var(--fs-base);
}

.zls-social-item__action {
    font-family: var(--ff-cli);
    font-size: var(--fs-micro);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--clr-gray-400);
    padding: 2px var(--sp-2);
    border: var(--border-subtle);
    transition: color 0.15s, border-color 0.15s;
}

.zls-social-item:hover .zls-social-item__action {
    color: var(--clr-red);
    border-color: var(--clr-red);
}

/* Online / Offline status indicators */
.zls-social-item__icon.is-online {
    color: hsl(130, 60%, 50%);
    text-shadow: 0 0 6px hsl(130, 60%, 50%);
}

.zls-social-item__icon.is-offline {
    color: hsl(0, 70%, 50%);
    text-shadow: 0 0 6px hsl(0, 70%, 50%);
}

.zls-social-item.is-offline {
    opacity: 0.5;
    cursor: default;
    pointer-events: none;
}

/* ═══════════════════════════════════════════
   SETTINGS / OPTIONS
   ═══════════════════════════════════════════ */
.zls-settings {
    padding: var(--sp-4);
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
}

.zls-setting-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--sp-3) var(--sp-4);
    background: var(--bg-surface);
    border: var(--border-subtle);
}

.zls-setting-item__label {
    font-family: var(--ff-cli);
    font-size: var(--fs-sm);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--clr-gray-100);
}

.zls-setting-item__control {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
}

/* Toggle Switch */
.zls-toggle {
    width: 40px;
    height: 20px;
    background: var(--clr-gray-400);
    border-radius: 2px;
    position: relative;
    cursor: pointer;
    transition: background-color 0.2s;
}

.zls-toggle.is-on {
    background: var(--clr-red);
}

.zls-toggle::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 16px;
    height: 16px;
    background: var(--clr-white);
    border-radius: 1px;
    transition: transform 0.2s;
}

.zls-toggle.is-on::after {
    transform: translateX(20px);
}

/* Button (settings style) */
.zls-btn-setting {
    font-family: var(--ff-cli);
    font-size: var(--fs-micro);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--clr-gray-200);
    padding: var(--sp-2) var(--sp-4);
    border: var(--border-panel);
    background: var(--bg-elevated);
    transition: color 0.15s, border-color 0.15s, background-color 0.15s;
}

.zls-btn-setting:hover {
    color: var(--clr-white);
    border-color: var(--clr-gray-200);
    background: var(--bg-surface);
}

/* ═══════════════════════════════════════════
   DETAIL CARD (for Files & Tech previews)
   ═══════════════════════════════════════════ */
.zls-detail-card {
    padding: var(--sp-4);
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
    height: 100%;
    min-height: 0;
}

.zls-detail-card__preview {
    width: 100%;
    flex: 1;
    min-height: 80px;
    background: var(--bg-base);
    border: var(--border-subtle);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--ff-cli);
    font-size: var(--fs-xs);
    color: var(--clr-gray-400);
    letter-spacing: 0.15em;
    text-transform: uppercase;
    position: relative;
    overflow: hidden;
}

.zls-detail-card__preview.has-image {
    background: transparent;
    border: var(--border-panel);
}

.zls-detail-card__preview.has-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    opacity: 0;
    animation: img-fade-in 0.4s ease-out forwards;
}

@keyframes img-fade-in {
    to { opacity: 1; }
}

.zls-detail-card__preview.decrypting {
    background: hsla(0, 0%, 5%, 0.8);
    color: var(--clr-gray-200);
}

.zls-detail-card__preview.denied {
    background: hsla(0, 80%, 20%, 0.1);
    color: var(--clr-red);
    border-color: var(--clr-red);
}

.zls-dossier-progress {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 3px;
    background: var(--clr-white);
    box-shadow: 0 0 8px hsla(0, 0%, 100%, 0.5);
    transition: width 0.1s linear, background-color 0.2s;
}

.zls-dossier-progress.denied-progress {
    background: var(--clr-red);
    box-shadow: 0 0 12px var(--clr-red);
}

.redacted-text {
    background: var(--clr-red);
    color: var(--bg-base) !important;
    padding: 0 var(--sp-1);
    display: inline-block;
}

.zls-detail-card__title {
    font-family: var(--ff-cli);
    font-size: var(--fs-lg);
    font-weight: var(--fw-bold);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--clr-white);
}

.zls-detail-card__desc {
    font-size: var(--fs-sm);
    line-height: 1.6;
    color: var(--clr-gray-100);
}

.zls-detail-card__specs {
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
    padding-top: var(--sp-3);
    border-top: var(--border-subtle);
}

.zls-detail-card__spec {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-family: var(--ff-cli);
    font-size: var(--fs-micro);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.zls-detail-card__spec-label {
    color: var(--clr-gray-300);
}

.zls-detail-card__spec-value {
    color: var(--clr-gray-100);
}

/* Telemetry bar (RE style) */
.zls-telemetry-bar {
    display: flex;
    gap: 2px;
    width: 80px;
}

.zls-telemetry-bar__seg {
    flex: 1;
    height: 4px;
    background: var(--clr-gray-500);
}

.zls-telemetry-bar__seg.is-active {
    background: var(--clr-gray-200);
}

/* ═══════════════════════════════════════════
   TECH DASHBOARD — Spec Analysis Preview
   ═══════════════════════════════════════════ */
.zls-tech-dashboard {
    background: var(--bg-base);
    border: var(--border-panel);
    padding: var(--sp-3);
    margin-bottom: var(--sp-3);
    position: relative;
    overflow: hidden;
}

/* Scan line overlay */
.zls-tech-dashboard::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--clr-red), transparent);
    animation: dash-scan 3s linear infinite;
    opacity: 0.6;
}

@keyframes dash-scan {
    0%   { top: 0; }
    100% { top: 100%; }
}

.zls-dash-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: var(--sp-2);
    margin-bottom: var(--sp-2);
    border-bottom: 1px solid hsla(0, 0%, 100%, 0.06);
}

.zls-dash-id {
    font-family: var(--ff-cli);
    font-size: var(--fs-micro);
    color: var(--clr-gray-300);
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.zls-dash-ver {
    font-family: var(--ff-cli);
    font-size: var(--fs-micro);
    color: var(--clr-red);
    letter-spacing: 0.08em;
}

.zls-dash-body {
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
}

.zls-dash-metric__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 3px;
}

.zls-dash-metric__label {
    font-family: var(--ff-cli);
    font-size: var(--fs-micro);
    color: var(--clr-gray-300);
    letter-spacing: 0.08em;
}

.zls-dash-metric__value {
    font-family: var(--ff-cli);
    font-size: var(--fs-micro);
    color: var(--clr-gray-100);
    letter-spacing: 0.05em;
}

/* ── Metric Bar: 10-segment percentage bar ── */
.zls-metric-bar {
    display: flex;
    gap: 2px;
    width: 100%;
}

.zls-metric-bar__seg {
    flex: 1;
    height: 6px;
    background: hsla(0, 0%, 100%, 0.08);
    transition: background 0.3s;
}

/* Color intensity by segment position */
.zls-metric-bar__seg.seg-low {
    --target-bg: hsla(0, 0%, 50%, 0.5);
    background: hsla(0, 0%, 100%, 0.08);
    animation: fillSeg 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.zls-metric-bar__seg.seg-mid {
    --target-bg: hsla(0, 0%, 70%, 0.7);
    background: hsla(0, 0%, 100%, 0.08);
    animation: fillSeg 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.zls-metric-bar__seg.seg-high {
    --target-bg: hsla(0, 0%, 95%, 0.9);
    background: hsla(0, 0%, 100%, 0.08);
    animation: fillSeg 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes fillSeg {
    0% { background: hsla(0, 0%, 100%, 0.08); transform: translateY(2px); opacity: 0.5; }
    100% { background: var(--target-bg); transform: translateY(0); opacity: 1; }
}

/* ═══════════════════════════════════════════
   VIEW LOADING ANIMATION
   ═══════════════════════════════════════════ */
.zls-loader {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--sp-4);
    background: var(--bg-base);
}

.zls-loader__scan {
    width: 200px;
    height: 2px;
    background: var(--bg-elevated);
    position: relative;
    overflow: hidden;
}

.zls-loader__scan::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 60%;
    height: 100%;
    background: linear-gradient(90deg, transparent, var(--clr-red), transparent);
    animation: lab-scan 0.8s ease-in-out infinite;
}

@keyframes lab-scan {
    0%   { left: -60%; }
    100% { left: 100%; }
}

.zls-loader__text {
    font-family: var(--ff-cli);
    font-size: var(--fs-micro);
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--clr-gray-300);
    animation: lab-pulse 1s ease infinite;
}

@keyframes lab-pulse {
    0%, 100% { opacity: 0.4; }
    50%      { opacity: 1; }
}

/* Content fade-in after load */
.zls-view-loaded {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    animation: view-enter 0.3s ease-out forwards;
}

@keyframes view-enter {
    from {
        opacity: 0;
        transform: translateY(6px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Responsive overrides are centralized in layout.css */

/* ═══════════════════════════════════════════
   BACK BUTTON (Master-Detail mobile pattern)
   Hidden on desktop, shown on mobile via layout.css
   ═══════════════════════════════════════════ */
.zls-back-btn {
    align-items: center;
    gap: var(--sp-2);
    padding: var(--sp-1) var(--sp-2);
    color: var(--clr-red);
    font-family: var(--ff-cli);
    font-size: var(--fs-xs);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    cursor: pointer;
    border: none;
    background: none;
    transition: color 0.15s;
}

.zls-back-btn:hover,
.zls-back-btn:active {
    color: var(--clr-white);
}

/* ═══════════════════════════════════════════
   CONTACT FORM
   Terminal / lab aesthetic
   ═══════════════════════════════════════════ */
.zls-form {
    display: flex;
    flex-direction: column;
    gap: var(--sp-4);
    padding: var(--sp-4);
    height: 100%;
}

.zls-form__group {
    display: flex;
    flex-direction: column;
    gap: var(--sp-1);
}

.zls-form__label {
    font-family: var(--ff-cli);
    font-size: var(--fs-xs);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--clr-red);
}

.zls-form__input {
    font-family: var(--ff-cli);
    font-size: var(--fs-sm);
    color: var(--clr-white);
    background: hsla(0, 0%, 100%, 0.04);
    border: 1px solid var(--clr-gray-400);
    padding: var(--sp-2) var(--sp-3);
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
    letter-spacing: 0.03em;
}

.zls-form__input::placeholder {
    color: var(--clr-gray-400);
    letter-spacing: 0.05em;
}

.zls-form__input:focus {
    border-color: var(--clr-red);
    box-shadow: 0 0 0 1px var(--clr-red),
                inset 0 0 12px hsla(0, 70%, 50%, 0.06);
}

/* Validation feedback */
.zls-form__input:not(:placeholder-shown):invalid {
    border-color: hsl(0, 60%, 45%);
}

.zls-form__input:not(:placeholder-shown):valid {
    border-color: var(--clr-online);
}

.zls-form__textarea {
    resize: vertical;
    min-height: 100px;
    flex: 1;
}

.zls-form__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3);
}

.zls-form__status {
    font-family: var(--ff-cli);
    font-size: var(--fs-xs);
    letter-spacing: 0.08em;
    color: var(--clr-gray-300);
}

.zls-form__submit {
    font-family: var(--ff-cli);
    font-size: var(--fs-xs);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--clr-white);
    background: hsla(0, 70%, 50%, 0.12);
    border: 1px solid var(--clr-red);
    padding: var(--sp-2) var(--sp-5);
    cursor: pointer;
    transition: background 0.2s, transform 0.15s, box-shadow 0.2s;
}

.zls-form__submit:hover {
    background: hsla(0, 70%, 50%, 0.25);
    box-shadow: 0 0 16px hsla(0, 70%, 50%, 0.15);
    transform: translateY(-1px);
}

.zls-form__submit:active {
    transform: translateY(0);
}