/* /Components/Facet.razor.rz.scp.css */
/* The select sits invisibly over the chip so the browser supplies the menu, the keyboard handling
   and the mobile picker, while the chip supplies the look. */
.facet[b-haj7ggkhyd] {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .35rem .7rem;
    border: 1px solid var(--drake-border);
    border-radius: .375rem;
    font-size: .875rem;
    background: var(--drake-surface);
    cursor: pointer;
    white-space: nowrap;
}

.facet .name[b-haj7ggkhyd] { color: var(--drake-grey); }
.facet .value[b-haj7ggkhyd] { color: #adb5bd; }

.facet.set[b-haj7ggkhyd] { border-color: var(--drake-accent); }
.facet.set .name[b-haj7ggkhyd] { color: var(--drake-ink); }
.facet.set .value[b-haj7ggkhyd] { color: var(--drake-grey); }

.facet svg[b-haj7ggkhyd] {
    width: 12px;
    height: 12px;
    fill: none;
    stroke: var(--drake-grey);
    stroke-width: 2.4;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.facet select[b-haj7ggkhyd] {
    position: absolute;
    inset: 0;
    opacity: 0;
    width: 100%;
    cursor: pointer;
}

.facet:focus-within[b-haj7ggkhyd] {
    outline: 2px solid var(--drake-accent);
    outline-offset: 1px;
}
/* /Components/Lightbox.razor.rz.scp.css */
.lightbox[b-5zf8eg0avx] {
    position: fixed;
    inset: 0;
    z-index: 1050;
    background-color: var(--drake-stage);
    display: flex;
    flex-direction: column;
    outline: none;
}

.chrome[b-5zf8eg0avx] {
    height: 3.5rem;
    flex-shrink: 0;
    background-color: var(--drake-stage-chrome);
    border-bottom: 1px solid var(--drake-stage-line);
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0 1.25rem;
}

.chrome .logo[b-5zf8eg0avx] { height: 1.2rem; width: auto; opacity: .85; }
.chrome .number[b-5zf8eg0avx] { font-weight: 700; font-size: 1rem; color: #fff; letter-spacing: .02em; }
.chrome .position[b-5zf8eg0avx] { font-size: .85rem; color: rgba(255, 255, 255, .5); }

.actions[b-5zf8eg0avx] {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-left: auto;
}

.action[b-5zf8eg0avx] {
    display: flex;
    align-items: center;
    gap: .45rem;
    padding: .45rem 1rem;
    border: 1px solid rgba(255, 255, 255, .3);
    border-radius: .375rem;
    background: none;
    color: #fff;
    font-size: .9rem;
    text-decoration: none;
}

.action:hover[b-5zf8eg0avx] { background-color: rgba(255, 255, 255, .1); color: #fff; text-decoration: none; }

.action svg[b-5zf8eg0avx] {
    width: 16px; height: 16px;
    fill: none; stroke: #fff; stroke-width: 1.8;
    stroke-linecap: round; stroke-linejoin: round;
}

.action .box[b-5zf8eg0avx] {
    width: 20px; height: 20px;
    border-radius: 3px;
    border: 1px solid rgba(255, 255, 255, .6);
    display: flex; align-items: center; justify-content: center;
}

.action.picked .box[b-5zf8eg0avx] { background-color: var(--drake-accent); border-color: var(--drake-accent); }
.action.picked .box svg[b-5zf8eg0avx] { stroke-width: 3.2; }

.close[b-5zf8eg0avx] {
    width: 34px; height: 34px;
    display: flex; align-items: center; justify-content: center;
    border: none; background: none; border-radius: .375rem;
}

.close svg[b-5zf8eg0avx] { width: 20px; height: 20px; fill: none; stroke: rgba(255, 255, 255, .75); stroke-width: 1.9; stroke-linecap: round; }
.close:hover[b-5zf8eg0avx] { background-color: rgba(255, 255, 255, .1); }

.body[b-5zf8eg0avx] { flex-grow: 1; display: flex; min-height: 0; }

.stage[b-5zf8eg0avx] {
    flex-grow: 1;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    min-width: 0;
}

.stage img[b-5zf8eg0avx] {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: .25rem;
    background-color: #1e1e1e;
}

.unavailable[b-5zf8eg0avx] { color: rgba(255, 255, 255, .5); }

.unsupported[b-5zf8eg0avx] {
    max-width: 26rem;
    text-align: center;
    color: rgba(255, 255, 255, .7);
}

.unsupported .format[b-5zf8eg0avx] {
    font-family: 'Roboto Condensed', sans-serif;
    font-size: 2.5rem;
    font-weight: 700;
    letter-spacing: .05em;
    color: rgba(255, 255, 255, .35);
    margin-bottom: .5rem;
}

.unsupported .action[b-5zf8eg0avx] {
    display: inline-flex;
    margin-top: .75rem;
    padding: .4rem .9rem;
    border-radius: .375rem;
    background-color: rgba(255, 255, 255, .1);
    color: #fff;
    text-decoration: none;
}

.unsupported .action:hover[b-5zf8eg0avx] { background-color: rgba(255, 255, 255, .18); }

.step[b-5zf8eg0avx] {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 44px; height: 44px;
    border: none; border-radius: 50%;
    background-color: rgba(0, 0, 0, .5);
    display: flex; align-items: center; justify-content: center;
}

.step:hover[b-5zf8eg0avx] { background-color: rgba(0, 0, 0, .75); }
.step svg[b-5zf8eg0avx] { width: 22px; height: 22px; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.step.left[b-5zf8eg0avx] { left: 1.75rem; }
.step.right[b-5zf8eg0avx] { right: 1.75rem; }

.meta[b-5zf8eg0avx] {
    width: 340px;
    flex-shrink: 0;
    background-color: var(--drake-stage-panel);
    border-left: 1px solid var(--drake-stage-line);
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    overflow-y: auto;
}

.badge-class[b-5zf8eg0avx] {
    align-self: flex-start;
    padding: .1rem .5rem;
    font-size: .75rem;
    font-family: 'Roboto Condensed', 'Roboto', sans-serif;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: #fff;
    background-color: var(--drake-accent);
    border-radius: .2rem;
}

.badge-class.muted[b-5zf8eg0avx] { background-color: var(--drake-grey); }

.group[b-5zf8eg0avx] { display: flex; flex-direction: column; gap: .75rem; }
.pair[b-5zf8eg0avx] { display: flex; gap: 1.5rem; }
.row[b-5zf8eg0avx] { display: flex; flex-direction: column; gap: .1rem; }

.key[b-5zf8eg0avx] {
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: rgba(255, 255, 255, .4);
}

.val[b-5zf8eg0avx] { font-size: .95rem; color: #fff; line-height: 1.45; text-wrap: pretty; }
.val.none[b-5zf8eg0avx] { color: rgba(255, 255, 255, .35); font-style: italic; }
.big[b-5zf8eg0avx] { font-weight: 700; font-size: 1.25rem; color: #fff; }

.rule[b-5zf8eg0avx] { height: 1px; background-color: var(--drake-stage-line); }

.file[b-5zf8eg0avx] {
    margin-top: auto;
    display: flex;
    flex-direction: column;
    gap: .2rem;
    padding-top: 1rem;
    border-top: 1px solid var(--drake-stage-line);
}

.file .name[b-5zf8eg0avx] { font-size: .75rem; color: rgba(255, 255, 255, .45); word-break: break-all; }
.file .size[b-5zf8eg0avx] { font-size: .75rem; color: rgba(255, 255, 255, .35); }

.filmstrip[b-5zf8eg0avx] {
    height: 100px;
    flex-shrink: 0;
    background-color: var(--drake-stage-chrome);
    border-top: 1px solid var(--drake-stage-line);
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: 0 1.25rem;
    overflow-x: auto;
}

.frame[b-5zf8eg0avx] {
    width: 108px; height: 72px;
    border: none; padding: 0;
    border-radius: .2rem;
    overflow: hidden;
    flex-shrink: 0;
    background-color: #2a2a2a;
}

.frame img[b-5zf8eg0avx] { width: 100%; height: 100%; object-fit: cover; }
.frame.here[b-5zf8eg0avx] { outline: 3px solid var(--drake-accent); outline-offset: -3px; }

/* On a phone the metadata panel goes under the image rather than beside it, and the filmstrip
   goes entirely — there is no room for it and swiping the arrows is the real navigation. */
@media (max-width: 991.98px) {
    .body[b-5zf8eg0avx] { flex-direction: column; }
    .meta[b-5zf8eg0avx] { width: auto; border-left: none; border-top: 1px solid var(--drake-stage-line); }
    .filmstrip[b-5zf8eg0avx] { display: none; }
    .stage[b-5zf8eg0avx] { padding: .5rem; }
}
/* /Layout/LoginDisplay.razor.rz.scp.css */
.who[b-3faf138rs6] {
    font-size: .9rem;
    color: var(--drake-grey);
}

.link[b-3faf138rs6] {
    background: none;
    border: none;
    padding: 0;
    font-size: .9rem;
    color: var(--drake-accent);
}

.link:hover[b-3faf138rs6] {
    color: var(--drake-accent-dark);
    text-decoration: underline;
}
/* /Layout/MainLayout.razor.rz.scp.css */
.shell[b-lmh6h4xe9u] {
    display: flex;
    height: 100vh;
    overflow: hidden;
}

.sidebar[b-lmh6h4xe9u] {
    width: 250px;
    flex-shrink: 0;
    background-image: linear-gradient(180deg, var(--drake-primary-dark) 0%, var(--drake-primary) 70%);
    display: flex;
    flex-direction: column;
}

main[b-lmh6h4xe9u] {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.topbar[b-lmh6h4xe9u] {
    height: 3.5rem;
    flex-shrink: 0;
    background-color: var(--drake-surface-alt);
    border-bottom: 1px solid #d6d5d5;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 1.5rem;
    padding: 0 1.5rem 0 2rem;
}

/* The gallery owns its own scrolling so the header and the selection bar can stay put while the
   grid moves under them. */
.content[b-lmh6h4xe9u] {
    flex-grow: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    padding: 1.1rem 1.5rem 1rem 2rem;
}

@media (max-width: 767.98px) {
    .shell[b-lmh6h4xe9u] {
        flex-direction: column;
        height: auto;
        overflow: visible;
    }

    .sidebar[b-lmh6h4xe9u] { width: 100%; }
    .content[b-lmh6h4xe9u] { padding: 1rem; overflow-y: visible; }
}
/* /Layout/NavMenu.razor.rz.scp.css */
.brand[b-rqs76z27zq] {
    min-height: 3.5rem;
    background-color: rgba(0, 0, 0, .4);
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: 0 1rem;
}

.brand img[b-rqs76z27zq] {
    height: 1.4rem;
    width: auto;
    flex-shrink: 0;
}

.brand span[b-rqs76z27zq] {
    font-weight: 700;
    letter-spacing: .02em;
    font-size: 1rem;
    color: #fff;
}

.items[b-rqs76z27zq] {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    padding: 1rem;
}

.items[b-rqs76z27zq]  .item {
    display: flex;
    align-items: center;
    gap: .75rem;
    height: 3rem;
    border-radius: 4px;
    padding: .5rem 1rem;
    color: #d7d7d7;
    font-size: .9rem;
    text-decoration: none;
}

.items[b-rqs76z27zq]  .item:hover {
    background-color: rgba(255, 255, 255, .08);
    color: #fff;
    text-decoration: none;
}

.items[b-rqs76z27zq]  .item.active {
    background-color: var(--drake-accent);
    color: #fff;
}

.items[b-rqs76z27zq]  .item svg {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.foot[b-rqs76z27zq] {
    margin-top: auto;
    padding: .75rem 1rem;
    display: flex;
    flex-direction: column;
    gap: .2rem;
    font-size: .7rem;
}

.foot span:first-child[b-rqs76z27zq] { color: rgba(255, 255, 255, .4); }
.foot span:last-child[b-rqs76z27zq]  { color: rgba(255, 255, 255, .5); }

.toggler[b-rqs76z27zq] {
    display: none;
    background: none;
    border: 1px solid rgba(255, 255, 255, .3);
    border-radius: 4px;
    padding: .35rem .6rem;
    margin: .5rem 1rem;
}

/* Below the breakpoint the sidebar becomes a header strip and the links collapse behind the
   toggle, which is what a phone needs — the capture screen is the only page anyone opens there. */
@media (max-width: 767.98px) {
    .toggler[b-rqs76z27zq] { display: block; }
    .items[b-rqs76z27zq] { display: none; }
    .items.open[b-rqs76z27zq] { display: flex; }
    .foot[b-rqs76z27zq] { display: none; }
}
/* /Pages/Admin.razor.rz.scp.css */
/* A histogram drawn in CSS rather than pulled in as a charting library — 24 bars whose only job is
   to show whether the peak sits in daylight. */
.hour-chart[b-uaelsazrrw] {
    display: flex;
    align-items: flex-end;
    gap: 2px;
    height: 110px;
    margin-top: .5rem;
}

.hour-col[b-uaelsazrrw] {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    height: 100%;
}

.hour-bar[b-uaelsazrrw] {
    width: 100%;
    min-height: 1px;
    border-radius: 2px 2px 0 0;
}

.hour-work[b-uaelsazrrw]  { background: #1b6ec2; }
.hour-night[b-uaelsazrrw] { background: rgba(128, 128, 128, .45); }

.hour-label[b-uaelsazrrw] {
    font-size: .6rem;
    opacity: .6;
    margin-top: 2px;
}
/* /Pages/Capture.razor.rz.scp.css */
/* Off-screen rather than display:none, so the label still activates it everywhere. */
.visually-hidden-input[b-bb0vzbfv3m] {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

/* ::deep, because the class is toggled by capture.js rather than rendered by the component, so it
   carries no scope attribute. */
.drop-zone[b-bb0vzbfv3m] {
    border: 2px dashed rgba(128, 128, 128, 0.5);
    border-radius: 10px;
    padding: 1.75rem 1rem;
    text-align: center;
    transition: border-color 120ms, background-color 120ms;
}

.drop-zone.drop-active[b-bb0vzbfv3m],
[b-bb0vzbfv3m] .drop-zone.drop-active {
    border-color: #1b6ec2;
    border-style: solid;
    background-color: rgba(27, 110, 194, 0.08);
}

@media (prefers-reduced-motion: reduce) {
    .drop-zone[b-bb0vzbfv3m] { transition: none; }
}

.staged-thumb[b-bb0vzbfv3m] {
    width: 64px;
    height: 64px;
    object-fit: cover;
    border-radius: 4px;
    flex-shrink: 0;
}

/* A single row that scrolls sideways, so a job with two hundred photos doesn't push the capture
   controls off the screen on a phone. */
.photo-strip[b-bb0vzbfv3m] {
    display: flex;
    gap: 0.5rem;
    overflow-x: auto;
    padding-bottom: 0.5rem;
}

.photo-strip-item[b-bb0vzbfv3m] {
    flex: 0 0 auto;
    width: 110px;
    margin: 0;
    text-align: center;
}

.photo-strip-item img[b-bb0vzbfv3m],
.photo-strip-missing[b-bb0vzbfv3m] {
    width: 110px;
    height: 110px;
    object-fit: cover;
    border-radius: 4px;
    background: rgba(128, 128, 128, 0.2);
}

.photo-strip-missing[b-bb0vzbfv3m] {
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(128, 128, 128, 0.8);
}

.photo-strip-item figcaption[b-bb0vzbfv3m] {
    font-size: 0.75rem;
    opacity: 0.7;
    margin-top: 0.25rem;
}
/* /Pages/Search.razor.rz.scp.css */
h1[b-yvmjpfl3h9] {
    font-size: 2.5rem;
    font-weight: 500;
    line-height: 1.2;
    margin: 0 0 .75rem;
}

.searchbar[b-yvmjpfl3h9] {
    display: flex;
    gap: .5rem;
    align-items: center;
    margin-bottom: .75rem;
}

.searchbar .field[b-yvmjpfl3h9] { position: relative; flex-grow: 1; display: flex; align-items: center; }

.searchbar .field svg[b-yvmjpfl3h9] {
    position: absolute;
    left: .7rem;
    width: 18px; height: 18px;
    fill: none; stroke: var(--drake-grey); stroke-width: 1.8; stroke-linecap: round;
}

.searchbar input[b-yvmjpfl3h9] { padding-left: 2.3rem; }

.facets[b-yvmjpfl3h9] {
    display: flex;
    gap: .5rem;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: .75rem;
}

.dates[b-yvmjpfl3h9] {
    display: flex;
    align-items: center;
    gap: .4rem;
    padding: .2rem .7rem;
    border: 1px solid var(--drake-border);
    border-radius: .375rem;
    font-size: .875rem;
    color: var(--drake-grey);
    background: var(--drake-surface);
}

.dates svg[b-yvmjpfl3h9] { width: 14px; height: 14px; fill: none; stroke: var(--drake-grey); stroke-width: 1.8; stroke-linecap: round; }
.dates input[b-yvmjpfl3h9] { width: 9.5rem; }

.classes[b-yvmjpfl3h9] {
    display: flex;
    border: 1px solid var(--drake-border);
    border-radius: .375rem;
    overflow: hidden;
    font-size: .875rem;
    margin-left: auto;
}

.classes button[b-yvmjpfl3h9] {
    padding: .35rem .8rem;
    border: none;
    border-left: 1px solid var(--drake-border);
    background-color: var(--drake-surface);
    color: var(--drake-ink);
}

.classes button:first-child[b-yvmjpfl3h9] { border-left: none; }
.classes button.on[b-yvmjpfl3h9] { background-color: var(--drake-primary); color: #fff; }

.resulthead[b-yvmjpfl3h9] {
    display: flex;
    align-items: baseline;
    gap: .75rem;
    padding-bottom: .6rem;
    border-bottom: 1px solid var(--drake-grey-light);
}

.resulthead .number[b-yvmjpfl3h9] { font-size: 1.15rem; font-weight: 700; }
.resulthead .detail[b-yvmjpfl3h9] { font-size: .9rem; color: var(--drake-grey); }
.resulthead .count[b-yvmjpfl3h9] { font-size: .9rem; color: var(--drake-grey); margin-left: auto; }

/* auto-fill rather than a fixed seven: the mockup's 1440px canvas gives seven, and a narrower
   window should give fewer rather than squeezing them. */
.grid[b-yvmjpfl3h9] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: .5rem;
    padding-top: .75rem;
}

.tile[b-yvmjpfl3h9] {
    position: relative;
    aspect-ratio: 4 / 3;
    border-radius: .25rem;
    overflow: hidden;
    background-color: var(--drake-grey-light);
    cursor: pointer;
}

.tile img[b-yvmjpfl3h9] { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tile.picked[b-yvmjpfl3h9] { outline: 3px solid var(--drake-accent); outline-offset: -3px; }

.tile .missing[b-yvmjpfl3h9] {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    color: var(--drake-grey);
}

.tile .unsupported[b-yvmjpfl3h9] {
    position: absolute; inset: 0;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    gap: .25rem;
    padding: .5rem;
    text-align: center;
    color: var(--drake-grey);
}

.tile .unsupported .format[b-yvmjpfl3h9] {
    font-family: 'Roboto Condensed', sans-serif;
    font-size: 1.1rem;
    font-weight: 700;
    letter-spacing: .04em;
    color: var(--drake-primary);
}

.tile .unsupported .note[b-yvmjpfl3h9] { font-size: .7rem; line-height: 1.2; }

.tick[b-yvmjpfl3h9] {
    position: absolute;
    top: .3rem; left: .3rem;
    width: 20px; height: 20px;
    border-radius: 3px;
    background-color: rgba(255, 255, 255, .55);
    border: 1px solid rgba(255, 255, 255, .85);
    display: flex; align-items: center; justify-content: center;
    padding: 0;
}

.tick.on[b-yvmjpfl3h9] { background-color: var(--drake-accent); border-color: var(--drake-accent); }
.tick svg[b-yvmjpfl3h9] { width: 13px; height: 13px; fill: none; stroke: #fff; stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; }

.more[b-yvmjpfl3h9] {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: 1rem 0;
}

/* Sticks to the bottom of the scrolling content so it stays reachable with a long grid above it. */
.selectionbar[b-yvmjpfl3h9] {
    position: sticky;
    bottom: 0;
    margin: 0 -1.5rem -1rem -2rem;
    background-color: var(--drake-primary);
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .75rem 1.5rem .75rem 2rem;
}

.selectionbar .condensed[b-yvmjpfl3h9] { font-weight: 700; font-size: 1.05rem; color: #fff; }
.selectionbar .across[b-yvmjpfl3h9] { font-size: .8rem; color: rgba(255, 255, 255, .55); }

.selectionbar .clear[b-yvmjpfl3h9] {
    margin-left: auto;
    padding: .45rem 1rem;
    border: 1px solid transparent;
    border-radius: .375rem;
    background: none;
    color: rgba(255, 255, 255, .6);
    font-size: .9rem;
}

.selectionbar .clear:hover[b-yvmjpfl3h9] { color: #fff; border-color: rgba(255, 255, 255, .35); }

/* Recent searches. Anchored under the search bar rather than floating over the grid: it is a
   short list somebody scans and dismisses, not a menu to navigate. */
.history[b-yvmjpfl3h9] {
    margin: -0.5rem 0 1rem;
    padding: .75rem 1rem;
    border: 1px solid var(--drake-border);
    border-radius: .375rem;
    background-color: var(--drake-surface);
}

.history-head[b-yvmjpfl3h9] {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-size: .8rem;
    color: var(--drake-grey);
    margin-bottom: .4rem;
}

.history ul[b-yvmjpfl3h9] { list-style: none; margin: 0; padding: 0; }
.history li + li[b-yvmjpfl3h9] { border-top: 1px solid var(--drake-border); }

.history a[b-yvmjpfl3h9] {
    display: block;
    padding: .35rem 0;
    color: var(--drake-ink);
    text-decoration: none;
    font-size: .9rem;
}

.history a:hover[b-yvmjpfl3h9] { color: var(--drake-accent); }


.selectionbar .action[b-yvmjpfl3h9] {
    padding: .45rem 1rem;
    border: 1px solid rgba(255, 255, 255, .35);
    border-radius: .375rem;
    background: none;
    color: #fff;
    font-size: .9rem;
}

.selectionbar .action:hover:not(:disabled)[b-yvmjpfl3h9] { background-color: rgba(255, 255, 255, .12); }
.selectionbar .action:disabled[b-yvmjpfl3h9] { opacity: .45; }

.selectionbar .warn[b-yvmjpfl3h9] { font-size: .8rem; color: var(--drake-accent); }

/* Pushes Clear to the right once there are buttons beside it. */
.selectionbar .clear[b-yvmjpfl3h9] { margin-left: 0; }
.selectionbar .action:first-of-type[b-yvmjpfl3h9] { margin-left: auto; }
/* /Pages/Selection.razor.rz.scp.css */
.actions[b-a9i5s61kdg] { display: flex; gap: .5rem; align-items: center; margin-bottom: 1rem; }

.grid[b-a9i5s61kdg] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: .5rem;
}

.tile[b-a9i5s61kdg] {
    position: relative;
    aspect-ratio: 4 / 3;
    border-radius: .25rem;
    overflow: hidden;
    background-color: var(--drake-grey-light);
}

.tile img[b-a9i5s61kdg] { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

.tile .missing[b-a9i5s61kdg], .tile .unsupported[b-a9i5s61kdg] {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    color: var(--drake-grey);
}

.tile .unsupported .format[b-a9i5s61kdg] {
    font-family: 'Roboto Condensed', sans-serif;
    font-weight: 700;
    letter-spacing: .04em;
}

/* The job number, because a selection spans jobs and the recipient did not choose these photos. */
.tile .job[b-a9i5s61kdg] {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    padding: .2rem .4rem;
    font-size: .7rem;
    color: #fff;
    background-color: rgba(0, 0, 0, .55);
}