/* The shared page, in the app's own colours and type (direction C). */
:root {
    --ground: #111111;
    --raised: #1e1e1e;
    --control: #262626;
    --control-hi: #303030;
    --edge: #363636;
    --text: #e8e6e0;
    --text-2: #9e9b94;
    --text-3: #6b6963;
    --viewer: #0a0a0a;
    --glass: rgba(18, 18, 18, 0.78);
    --track: rgba(255, 255, 255, 0.22);
    color-scheme: dark;
}
/* A white ground, for a beauty client (Yvan, 16 October 2026). The same
   page with its values turned over. */
:root[data-ground="white"] {
    --ground: #ffffff;
    --raised: #f2f1ee;
    --control: #ecebe8;
    --control-hi: #e2e1dd;
    --edge: #d6d4cf;
    --text: #1a1a18;
    --text-2: #5f5d58;
    --text-3: #9a978f;
    --viewer: #ffffff;
    --glass: rgba(250, 250, 248, 0.82);
    --track: rgba(0, 0, 0, 0.18);
    color-scheme: light;
}
* { box-sizing: border-box; }
html, body {
    margin: 0;
    background: var(--ground);
    color: var(--text);
    font: 13px/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
}
button { font: inherit; color: inherit; }

.bar {
    position: sticky;
    top: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 12px;
    height: 52px;
    padding: 0 32px;
    padding-top: env(safe-area-inset-top);
    background: var(--ground);
}
.bar-title {
    font-size: 15px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
    flex: 0 1 auto;
    max-width: 40%;
}
/* One line of filters: the view, the kind, the inner Tableaux. */
.filters {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 16px;
    overflow-x: auto;
    scrollbar-width: none;
}
.filters::-webkit-scrollbar { display: none; }
.chips { display: flex; gap: 6px; }
.chip {
    height: 24px;
    padding: 0 10px;
    border: none;
    border-radius: 12px;
    background: transparent;
    box-shadow: inset 0 0 0 1px var(--edge);
    color: var(--text-2);
    font-size: 12px;
    white-space: nowrap;
    cursor: pointer;
}
.chip:hover { color: var(--text); }
.chip.on { background: var(--control-hi); box-shadow: none; color: var(--text); }
.none { padding: 48px 32px; color: var(--text-2); }
.views { display: flex; gap: 4px; }
.view {
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: var(--text-3);
    cursor: pointer;
}
.view:hover { color: var(--text-2); }
.view.on { background: var(--control); color: var(--text); }

/* The grid: square tiles two pixels apart. */
.grid {
    display: grid;
    gap: 2px;
}
.tile {
    position: relative;
    aspect-ratio: 1;
    overflow: hidden;
    background: var(--raised);
    cursor: zoom-in;
}
.tile img, .brick img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

/* The wall: columns at the pictures' own proportions. */
.wall { position: relative; margin: 16px 32px 48px; }
.brick {
    position: absolute;
    background: var(--raised);
    cursor: zoom-in;
}

/* A picture's name, only while the pointer rests on it. */
.name {
    position: absolute;
    left: 8px;
    bottom: 8px;
    max-width: calc(100% - 16px);
    padding: 2px 6px;
    border-radius: 4px;
    background: rgba(17, 17, 17, 0.72);
    color: var(--text);
    font-size: 11px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    opacity: 0;
    transition: opacity 0.12s;
    pointer-events: none;
}
@media (hover: hover) {
    .tile:hover .name, .brick:hover .name { opacity: 1; }
}

/* Locked, gone, or nothing here. */
.note {
    min-height: 100vh;
    min-height: 100dvh;
    display: grid;
    place-items: center;
    padding: 16px;
    text-align: center;
    color: var(--text-2);
}
.note h1 {
    margin: 0 0 16px;
    font-size: 15px;
    font-weight: 600;
    color: var(--text);
}
.lock { display: flex; flex-direction: column; gap: 8px; width: min(280px, 100%); margin: 0 auto; }
.lock input {
    height: 32px;
    padding: 0 12px;
    border: none;
    border-radius: 16px;
    background: var(--control);
    color: var(--text);
    font: inherit;
    outline: none;
    text-align: center;
}
.lock input:focus { box-shadow: inset 0 0 0 1px var(--edge); }
.lock button {
    height: 32px;
    border: none;
    border-radius: 16px;
    background: var(--control-hi);
    cursor: pointer;
}
.lock-wrong { min-height: 18px; font-size: 12px; color: var(--text-2); }

/* A moving tile's mark, and its scrub strip, as in the app. */
.badge {
    position: absolute;
    right: 8px;
    bottom: 8px;
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    display: grid;
    place-items: center;
    border-radius: 11px;
    background: rgba(17, 17, 17, 0.72);
    color: #e8e6e0;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.04em;
    pointer-events: none;
}
.scrub {
    position: absolute;
    inset: 0;
    background-repeat: no-repeat;
    pointer-events: none;
}
body.held { overflow: hidden; }

/* The viewer: the app's, on the page's ground, the picture 48 from every
   edge, the name in the margin below while a hand is in the window. */
.viewer {
    position: fixed;
    inset: 0;
    z-index: 10;
    display: grid;
    place-items: center;
    background: var(--viewer);
    outline: none;
    animation: viewer-in 120ms ease-out;
    touch-action: pan-y;
}
@keyframes viewer-in { from { opacity: 0; } to { opacity: 1; } }
.viewer-frame { position: relative; }
.viewer-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    user-select: none;
    -webkit-user-drag: none;
}
.viewer-name {
    position: absolute;
    left: 50%;
    bottom: max(14px, env(safe-area-inset-bottom));
    transform: translateX(-50%);
    font-size: 11px;
    color: var(--text-2);
    opacity: 0;
    transition: opacity 140ms ease-out;
}
.viewer-key {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    border: none;
    border-radius: 18px;
    background: transparent;
    color: var(--text-2);
    cursor: pointer;
    opacity: 0;
    transition: opacity 140ms ease-out;
}
.viewer-key:hover { color: var(--text); }
.viewer-prev { left: 6px; }
.viewer-next { right: 6px; }
.viewer.awake .viewer-name, .viewer.awake .viewer-key, .viewer.awake .transport { opacity: 1; }
/* The way back, top left: on a phone there is no Escape key (Yvan, 16 October). */
.viewer-close { display: none; }
@media (hover: none) {
    .viewer-name { opacity: 1; }
    .viewer-key { display: none; }
    .viewer-close {
        display: grid;
        opacity: 1;
        top: max(6px, env(safe-area-inset-top));
        left: 6px;
        transform: none;
        width: 44px;
        height: 44px;
        color: var(--text);
    }
}

/* The app's transport, along the foot of the clip. */
.transport {
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: 12px;
    display: flex;
    align-items: center;
    gap: 12px;
    height: 34px;
    padding: 0 16px;
    border-radius: 17px;
    color: var(--text);
    background: var(--glass);
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
    opacity: 0;
    transition: opacity 140ms ease-out;
}
@media (hover: none) { .transport { opacity: 1; } }
.t-key {
    width: 20px;
    height: 20px;
    display: grid;
    place-items: center;
    padding: 0;
    border: none;
    background: none;
    color: var(--text);
    cursor: pointer;
    opacity: 0.85;
}
.t-key:hover { opacity: 1; }
.t-time { font-size: 11px; font-variant-numeric: tabular-nums; color: var(--text-2); min-width: 30px; text-align: center; }
.t-track { position: relative; flex: 1; height: 20px; display: flex; align-items: center; cursor: pointer; }
.t-track::before { content: ""; position: absolute; left: 0; right: 0; height: 3px; border-radius: 1.5px; background: var(--track); }
.t-done { position: relative; height: 3px; width: 0; border-radius: 1.5px; background: var(--text); }

@media (max-width: 520px) {
    .bar { padding: 0 16px; gap: 12px; }
    .bar-title { max-width: 35%; }
    .filters { gap: 10px; }
}