/* QR on the left, controls in the middle, letters on the right. */
.attendance-panel {
    box-sizing: border-box;
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: minmax(110px, 160px) minmax(0, 1fr) minmax(140px, 200px);
    align-items: center;
    gap: 1.5rem;
    padding: 1rem 1.5rem;
    border: 1px solid var(--border, #333842);
    border-radius: 8px;
    background: var(--bg-secondary, #1d2026);
    color: var(--text-primary, #e8eaee);
    font: 15px/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
.attendance-panel[hidden], .attendance-panel [hidden] { display: none !important; }
.attendance-panel h3 { margin: 0 0 .4rem; font-size: 1.1rem; color: inherit; }
.attendance-panel p { margin: .4rem 0; font-size: .9rem; color: var(--text-secondary, #b5becb); }
.attendance-panel-qr { margin: 0; text-align: center; }
.attendance-panel .attendance-panel-qr img {
    display: block;
    width: 100%;
    max-width: 160px;
    height: auto;
    aspect-ratio: 1;
    margin: 0 auto .35rem;
    background: white;
    border: 6px solid white;
    border-radius: 4px;
    box-sizing: border-box;
}
/* Keep the QR slot even before loading or after closing check-in. */
.attendance-panel .attendance-panel-qr img[hidden] {
    display: block !important;
    visibility: hidden;
}
.attendance-panel-code { text-align: center; }
.attendance-panel-code strong {
    display: block;
    font: 700 clamp(2rem, 4vw, 3.2rem)/1.3 ui-monospace, monospace;
    letter-spacing: .1em;
}
.attendance-panel-code small { display: block; min-height: 1.4em; }
.attendance-panel-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin: .7rem 0; }
.attendance-panel button, .attendance-panel select {
    border: 1px solid var(--border, #526073);
    border-radius: 5px;
    padding: .4rem .6rem;
    background: var(--bg-tertiary, #262b33);
    color: inherit;
    font: inherit;
    font-size: .85rem;
    cursor: pointer;
}
.attendance-panel button:focus-visible, .attendance-panel select:focus-visible { outline: 2px solid #6ea8fe; outline-offset: 2px; }
.attendance-placement { display: inline-flex; align-items: center; gap: .5rem; font-size: .85rem; }
.attendance-placement select { width: auto; margin: 0; }
.attendance-panel button:disabled { opacity: .5; cursor: default; }
.attendance-panel button[aria-pressed="true"] { border-color: #6ea8fe; }
.attendance-console { flex: 0 0 auto; margin: 0 .75rem .5rem; }
.attendance-console .attendance-panel-qr img { max-width: 112px; }
.attendance-console.attendance-panel { padding: .6rem 1rem; }

/* Overlay is the default. Side mode reserves space only while check-in is
   shown; QR rotation never changes the size of that space. */
.attendance-projection-host { position: relative; }
.attendance-projection-layout {
    --attendance-inset: 12px;
    --attendance-side-width: clamp(100px, 14%, 200px);
    position: absolute;
    inset: 0;
    overflow: hidden;
    background: #000;
}
.attendance-projection-slide {
    position: absolute;
    inset: 0;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
}
.attendance-projection-rail {
    position: absolute;
    bottom: var(--attendance-inset);
    z-index: 2;
    width: clamp(90px, 10vw, 140px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: .35em;
    padding: 6px;
    min-width: 0;
    overflow: hidden;
    text-align: center;
    box-sizing: border-box;
    border-radius: 6px;
    background: rgba(17, 21, 27, .88);
    color: #f3f6fa;
    font: 13px/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    visibility: hidden;
    cursor: grab;
    touch-action: none;
    user-select: none;
}
.attendance-projection-rail:first-child { left: var(--attendance-inset); }
.attendance-projection-rail:last-child { right: var(--attendance-inset); }
.attendance-projection-layout[data-placement="right"] .attendance-projection-rail:first-child {
    left: auto;
    right: var(--attendance-inset);
    bottom: calc(var(--attendance-inset) + var(--attendance-code-height, 70px) + 8px);
}
.attendance-projection-rail:active { cursor: grabbing; }
.attendance-projection-rail:focus-visible { outline: 2px solid #6ea8fe; outline-offset: 2px; }
.attendance-projection-layout.is-showing .attendance-projection-rail { visibility: visible; }
.attendance-projection-layout.is-blank .attendance-projection-rail { visibility: hidden; }
.attendance-projection-rail img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1;
    object-fit: contain;
    background: white;
    border: 5px solid white;
    border-radius: 3px;
    box-sizing: border-box;
}
.attendance-projection-rail img[hidden] { display: block; visibility: hidden; }
.attendance-projection-rail strong {
    font: 700 clamp(1.2rem, 2.3vw, 2.5rem)/1.2 ui-monospace, monospace;
    letter-spacing: .06em;
    white-space: nowrap;
}
.attendance-projection-layout[data-display-mode="sides"].is-showing .attendance-projection-slide {
    right: var(--attendance-side-width);
}
.attendance-projection-layout[data-display-mode="sides"][data-placement="split"].is-showing .attendance-projection-slide {
    left: var(--attendance-side-width);
}
.attendance-projection-layout[data-display-mode="sides"] .attendance-projection-rail {
    width: calc(var(--attendance-side-width) - 2 * var(--attendance-inset));
    cursor: default;
}
/* The console preview is smaller than the actual projected slide. */
.current:not(:fullscreen) .attendance-projection-layout {
    --attendance-inset: 6px;
    --attendance-side-width: clamp(60px, 14%, 120px);
}
.current:not(:fullscreen) .attendance-projection-rail {
    width: clamp(60px, 12%, 96px);
    font-size: 9px;
    padding: 4px;
}
.current:not(:fullscreen) .attendance-projection-rail strong { font-size: clamp(.8rem, 1.2vw, 1.4rem); }
.current:not(:fullscreen) .attendance-projection-layout[data-display-mode="sides"] .attendance-projection-rail {
    width: calc(var(--attendance-side-width) - 2 * var(--attendance-inset));
}
@media (max-width: 640px) {
    .attendance-panel {
        grid-template-columns: minmax(90px, 1fr) minmax(110px, 1fr);
        gap: .75rem;
        padding: 1rem;
    }
    .attendance-panel-controls { grid-column: 1 / -1; grid-row: 2; }
    .attendance-panel-code { grid-column: 2; grid-row: 1; }
    .attendance-console { max-height: 40vh; overflow-y: auto; }
}