/* Filter Cam -- see filter-cam.js. Shared by rollbooth.com/filter-cam and
   filtercamera.com; a page themes it with the --fc-* variables and sets its
   height with --fc-h. The camera is a dark object on either site, the way a
   real camera is the same colour whatever room it is in. */
.fc {
    --fc-bg: #1b1916;
    --fc-bg-hi: #2a2723;
    --fc-ink: #f3ede2;
    --fc-dim: #9a9183;
    --fc-accent: #ff5a36;
    --fc-accent-dk: #c63a1c;
    --fc-lcd: #0c0b0a;
    --fc-line: rgba(243, 237, 226, 0.13);
    --fc-font: 'Space Mono', ui-monospace, Menlo, Consolas, monospace;
    --fc-h: min(100svh, 900px);

    position: relative;
    width: min(100%, 540px);
    height: var(--fc-h);
    min-height: 520px;
    margin: 0 auto;
    display: flex; flex-direction: column;
    background: linear-gradient(180deg, var(--fc-bg-hi), var(--fc-bg) 30%);
    color: var(--fc-ink);
    font-family: var(--fc-font);
    border-radius: 28px;
    box-shadow: 0 30px 80px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .06);
    overflow: hidden;
    user-select: none; -webkit-user-select: none;
    -webkit-tap-highlight-color: transparent;
}
.fc *, .fc *::before, .fc *::after { box-sizing: border-box; }
/* The reset has the weight of one class, the same as every component rule
   below it, so those win by coming later -- and the host site's own
   `button` styles, at element weight, lose to both. */
.fc :where(button) {
    font: inherit; font-size: inherit; letter-spacing: inherit; text-transform: none;
    color: inherit; background: none; border: 0; cursor: pointer; padding: 0; margin: 0;
    box-shadow: none; line-height: 1.2; min-height: 0; width: auto;
}
.fc button:focus-visible, .fc [tabindex]:focus-visible { outline: 2px solid var(--fc-accent); outline-offset: 3px; }
.fc [hidden] { display: none !important; }
@media (max-width: 560px) {
    .fc { border-radius: 0; width: 100%; box-shadow: none; }
    /* A phone's top row holds the mode switch and the tools; the name is
       already on the page. */
    .fc-top:has(.fc-modes) .fc-brand { display: none; }
    .fc-top { padding: 10px 10px 8px; gap: 6px; }
    .fc-tools { gap: 4px; }
    .fc-chip { height: 32px; min-width: 32px; padding: 0 8px; }
    .fc-mode { padding: 6px 11px; }
    .fc-finder-wrap { margin: 0 8px; }
}

/* ---- top bar ---------------------------------------------------------- */
.fc-top { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px 10px; gap: 8px; }
.fc-brand { font-weight: 700; font-size: 13px; letter-spacing: .16em; text-transform: uppercase; white-space: nowrap; }
.fc-brand i, .fc-brand b { font-style: normal; color: var(--fc-accent); }
.fc-tools { display: flex; gap: 6px; }
.fc-chip {
    height: 34px; min-width: 34px; padding: 0 10px; border-radius: 17px;
    border: 1px solid var(--fc-line); font-size: 11px; letter-spacing: .08em;
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    background: rgba(255, 255, 255, .03);
}
.fc-chip:hover { background: rgba(255, 255, 255, .09); }
.fc-chip[aria-pressed="true"] { border-color: var(--fc-accent); color: var(--fc-accent); }
.fc-chip svg { width: 16px; height: 16px; }

/* ---- photo / strip ---------------------------------------------------- */
.fc-modes {
    display: flex; gap: 4px; padding: 4px; flex: 0 0 auto;
    background: rgba(0, 0, 0, .35); border-radius: 999px; border: 1px solid var(--fc-line);
}
.fc-mode {
    padding: 7px 16px; border-radius: 999px; font-size: 12px; font-weight: 700;
    letter-spacing: .1em; text-transform: uppercase; color: var(--fc-dim);
}
.fc-mode small { font-weight: 400; letter-spacing: .04em; text-transform: none; opacity: .75; }
.fc-mode[aria-selected="true"] { background: var(--fc-ink); color: #151311; }

/* ---- viewfinder -------------------------------------------------------- */
.fc-finder-wrap { flex: 1; min-height: 0; margin: 0 16px; display: flex; align-items: center; justify-content: center; }
.fc-finder {
    position: relative; background: var(--fc-lcd); border-radius: 14px; overflow: hidden;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .05), 0 0 0 6px #0a0908, 0 0 0 7px rgba(255, 255, 255, .05);
    touch-action: pan-y;
    max-width: 100%; max-height: 100%;
    width: 300px; height: 400px;
}
.fc-finder canvas { display: block; width: 100%; height: 100%; }
.fc-msg {
    position: absolute; inset: 0; display: flex; flex-direction: column; gap: 12px;
    align-items: center; justify-content: center; text-align: center; padding: 22px;
    font-size: 12px; color: var(--fc-dim); line-height: 1.6;
    background: radial-gradient(ellipse at 50% 40%, #1d1a17, var(--fc-lcd) 70%);
}
.fc-msg b { color: var(--fc-ink); font-size: 15px; line-height: 1.35; max-width: 22ch; }
.fc-msg span { max-width: 30ch; }
.fc-start-emo { font-size: 40px; line-height: 1; }
.fc-nameplate {
    position: absolute; left: 50%; top: 14px; transform: translateX(-50%);
    padding: 6px 12px; border-radius: 999px; background: rgba(0, 0, 0, .55);
    backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
    font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; white-space: nowrap;
    transition: opacity .35s, transform .35s; pointer-events: none;
}
.fc-nameplate.fade { opacity: 0; transform: translateX(-50%) translateY(-6px); }
.fc-src { position: absolute; left: 12px; bottom: 10px; font-size: 10px; letter-spacing: .1em; color: rgba(255, 255, 255, .75); text-shadow: 0 1px 2px #000; pointer-events: none; }
/* The preview's copy of the mark the saved photo carries, so nobody is
   surprised by it. */
.fc-mark {
    position: absolute; right: 3%; bottom: 2.4%; pointer-events: none;
    font-size: clamp(10px, 2.2vmin, 15px); font-weight: 700; letter-spacing: .06em;
    color: rgba(255, 255, 255, .6); text-shadow: 0 1px 6px rgba(0, 0, 0, .55);
}
.fc-dots { position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%); display: flex; gap: 7px; pointer-events: none; }
.fc-dots i { width: 10px; height: 10px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .6); }
.fc-dots i.done { background: var(--fc-accent); border-color: var(--fc-accent); }
.fc-countdown {
    position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
    font-size: 96px; font-weight: 700; color: #fff; text-shadow: 0 4px 30px rgba(0, 0, 0, .6); pointer-events: none;
}
.fc-flash { position: absolute; inset: 0; background: #fff; opacity: 0; pointer-events: none; }
.fc-flash.go { animation: fc-flash .45s ease-out; }
@keyframes fc-flash { 0% { opacity: .95; } 100% { opacity: 0; } }

/* ---- filter tray ------------------------------------------------------- */
.fc-tray-wrap { position: relative; margin-top: 14px; }
.fc-tray-wrap::before, .fc-tray-wrap::after {
    content: ""; position: absolute; top: 0; bottom: 0; width: 28px; pointer-events: none; z-index: 1;
}
.fc-tray-wrap::before { left: 0; background: linear-gradient(90deg, var(--fc-bg), transparent); }
.fc-tray-wrap::after { right: 0; background: linear-gradient(-90deg, var(--fc-bg), transparent); }
.fc-tray {
    display: flex; gap: 8px; overflow-x: auto; padding: 4px 24px 6px; scroll-snap-type: x proximity;
    scrollbar-width: none;
}
.fc-tray::-webkit-scrollbar { display: none; }
.fc-pill {
    position: relative; flex: 0 0 auto; scroll-snap-align: center;
    display: inline-flex; align-items: center; gap: 6px;
    height: 36px; padding: 0 13px; border-radius: 18px;
    border: 1px solid var(--fc-line); background: rgba(255, 255, 255, .04);
    font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap;
    color: var(--fc-dim); transition: background .15s, color .15s, border-color .15s;
}
.fc-pill:hover { color: var(--fc-ink); }
.fc-pill.on { background: var(--fc-ink); color: #151311; border-color: var(--fc-ink); }
.fc-emo { font-size: 14px; }
.fc-new { position: absolute; top: 4px; right: 5px; width: 6px; height: 6px; border-radius: 50%; background: var(--fc-accent); }

/* ---- controls ----------------------------------------------------------- */
.fc-controls { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 12px 24px 8px; gap: 12px; }
.fc-side { display: flex; align-items: center; gap: 14px; }
.fc-left { justify-content: flex-start; }
.fc-right { justify-content: flex-end; }
.fc-arrow {
    width: 54px; height: 54px; border-radius: 50%;
    background: linear-gradient(180deg, #3a3631, #26231f);
    box-shadow: 0 4px 0 #0d0c0b, inset 0 1px 0 rgba(255, 255, 255, .08);
    display: flex; align-items: center; justify-content: center;
    transition: transform .08s, box-shadow .08s;
}
.fc-arrow:active, .fc-arrow.pressed { transform: translateY(3px); box-shadow: 0 1px 0 #0d0c0b, inset 0 1px 0 rgba(255, 255, 255, .08); }
.fc-arrow svg { width: 22px; height: 22px; }
.fc-shutter {
    width: 82px; height: 82px; border-radius: 50%;
    background: radial-gradient(circle at 50% 35%, #ff7a5c, var(--fc-accent) 55%, var(--fc-accent-dk));
    box-shadow: 0 6px 0 #6e1f0e, 0 0 0 6px #2b2723, 0 0 0 7px rgba(255, 255, 255, .07), inset 0 2px 0 rgba(255, 255, 255, .3);
    transition: transform .08s, box-shadow .08s;
    display: flex; align-items: center; justify-content: center;
}
.fc-shutter:active, .fc-shutter.pressed { transform: translateY(4px); box-shadow: 0 2px 0 #6e1f0e, 0 0 0 6px #2b2723, 0 0 0 7px rgba(255, 255, 255, .07), inset 0 2px 0 rgba(255, 255, 255, .3); }
.fc-shutter:disabled { filter: grayscale(.6) brightness(.7); cursor: default; }
/* Strip mode marks the shutter with three bars -- a strip, not a dot. */
.fc.is-strip .fc-shutter span {
    width: 18px; height: 30px; border-radius: 3px;
    background: repeating-linear-gradient(180deg, rgba(255, 255, 255, .9) 0 8px, transparent 8px 11px);
}
.fc-thumb {
    width: 44px; height: 44px; border-radius: 10px; overflow: hidden; border: 2px solid var(--fc-line);
    background: #0a0908; cursor: pointer;
}
.fc-thumb:empty { visibility: hidden; }
.fc-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fc-spacer { width: 44px; }
.fc-hint { margin: 0; padding: 0 16px 16px; text-align: center; font-size: 10px; color: var(--fc-dim); letter-spacing: .1em; }
@media (hover: none) { .fc-kbd { display: none; } }

/* ---- buttons ------------------------------------------------------------ */
.fc-btn {
    height: 46px; padding: 0 20px; border-radius: 23px; font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
    border: 1px solid var(--fc-line) !important; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    background: rgba(255, 255, 255, .04) !important; color: var(--fc-ink) !important;
}
.fc-btn svg { width: 16px; height: 16px; }
.fc-btn.primary { background: var(--fc-ink) !important; color: #151311 !important; border-color: var(--fc-ink) !important; }
.fc-btn.accent { background: var(--fc-accent) !important; color: #fff !important; border-color: var(--fc-accent) !important; }
.fc-btn.ghost { background: transparent !important; }
.fc-btn:disabled { opacity: .45; cursor: default; }

/* ---- result sheet -------------------------------------------------------- */
.fc-sheet {
    position: absolute; inset: 0; z-index: 10; background: rgba(14, 13, 12, .97);
    display: flex; flex-direction: column; padding: 16px; gap: 14px;
}
.fc-bar { display: flex; justify-content: space-between; align-items: center; font-size: 11px; letter-spacing: .12em; color: var(--fc-dim); text-transform: uppercase; }
.fc-photo { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; }
.fc-photo img { max-width: 100%; max-height: 100%; border-radius: 6px; box-shadow: 0 10px 40px rgba(0, 0, 0, .6); }
.fc-dev { color: var(--fc-dim); font-size: 12px; letter-spacing: .12em; }
.fc-actions { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; padding-bottom: 6px; }

/* ---- wide screens ------------------------------------------------------
   One column at every size: the picture, then the strength bar and the
   filter row under it, then arrows either side of the shutter. Filters
   under the picture keep the eye on the face while choosing; a laptop just
   gets a wider camera, and FULL makes the picture fill it. */
@media (min-width: 900px) {
    .fc { width: min(100% - 32px, 1040px); }
    .fc-finder-wrap { margin: 0 20px; }
    .fc-tray { padding-left: 28px; padding-right: 28px; }
}

/* ---- strength ------------------------------------------------------------ */
.fc-strength {
    display: flex; align-items: center; gap: 10px;
    width: min(100% - 32px, 420px); margin: 12px auto 0;
    font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--fc-dim);
}
.fc-strength label { flex: 0 0 auto; }
.fc-strength output { flex: 0 0 3.2em; text-align: right; color: var(--fc-ink); font-variant-numeric: tabular-nums; }
.fc-strength input[type=range] {
    --fill: 100%;
    flex: 1; height: 22px; margin: 0; background: transparent; -webkit-appearance: none; appearance: none; cursor: pointer;
}
.fc-strength input[type=range]::-webkit-slider-runnable-track {
    height: 4px; border-radius: 2px;
    background: linear-gradient(90deg, var(--fc-accent) var(--fill), var(--fc-line) var(--fill));
}
.fc-strength input[type=range]::-moz-range-track { height: 4px; border-radius: 2px; background: var(--fc-line); }
.fc-strength input[type=range]::-moz-range-progress { height: 4px; border-radius: 2px; background: var(--fc-accent); }
.fc-strength input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none; width: 18px; height: 18px; margin-top: -7px; border-radius: 50%;
    background: #fff; border: 3px solid var(--fc-accent); box-shadow: 0 1px 4px rgba(0, 0, 0, .3);
}
.fc-strength input[type=range]::-moz-range-thumb {
    width: 14px; height: 14px; border-radius: 50%; background: #fff; border: 3px solid var(--fc-accent);
}
.fc-strength.off { opacity: .35; }
.fc-strength.off input { cursor: default; }

@media (max-height: 700px) {
    .fc-arrow { width: 46px; height: 46px; }
    .fc-shutter { width: 68px; height: 68px; }
    .fc-tray-wrap { margin-top: 10px; }
    .fc-hint { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    .fc-flash.go { animation: none; }
    .fc-nameplate { transition: none; }
}

/* ---- controls on the picture --------------------------------------------
   filter-cam.js moves every control into the viewfinder: tools along the
   top, and along the bottom one small bar -- last shot, previous, the
   filter's name, next, shutter -- as Webcam Toy does it, so the face stays
   clear. The name opens a drawer over the lower part of the picture with
   every filter and the strength bar; the picture above it shows each pick
   live. Smoked glass rather than clear: white text on clear glass vanished
   against a white wall. */
.fc.fc-overlay {
    --fc-glass: rgba(20, 18, 16, .42);
    --fc-glass-hi: rgba(20, 18, 16, .6);
    --fc-glass-line: rgba(255, 255, 255, .22);
}
.fc.fc-overlay .fc-hint { display: none; }
.fc.fc-overlay .fc-finder-wrap { margin: 0; }
.fc.fc-overlay .fc-finder { box-shadow: none; }

.fc-finder .fc-top.fc-over {
    position: absolute; top: 12px; left: 12px; right: 12px; z-index: 5;
    padding: 0; flex-wrap: nowrap; justify-content: space-between; gap: 6px;
    pointer-events: none;
}
.fc-finder .fc-over > *, .fc-dock > * { pointer-events: auto; }
.fc-finder .fc-top.fc-over .fc-brand { display: none; }
.fc-finder .fc-top.fc-over:not(:has(.fc-modes)) { justify-content: flex-end; }

/* smoked glass */
.fc-overlay .fc-finder .fc-chip,
.fc-overlay .fc-finder .fc-modes,
.fc-overlay .fc-finder .fc-arrow,
.fc-overlay .fc-finder .fc-name,
.fc-overlay .fc-drawer {
    background: var(--fc-glass); color: #fff;
    border: 1px solid var(--fc-glass-line);
    backdrop-filter: blur(16px) saturate(1.3); -webkit-backdrop-filter: blur(16px) saturate(1.3);
    box-shadow: 0 6px 20px rgba(0, 0, 0, .22), inset 0 1px 0 rgba(255, 255, 255, .14);
}
.fc-overlay .fc-finder .fc-chip:hover, .fc-overlay .fc-finder .fc-arrow:hover,
.fc-overlay .fc-finder .fc-name:hover { background: var(--fc-glass-hi); color: #fff; }
.fc-overlay .fc-finder .fc-mode { color: rgba(255, 255, 255, .85); }
.fc-overlay .fc-finder .fc-mode[aria-selected="true"] { background: #fff; color: #151311; }

/* The dock spans the whole picture (clicks pass through it) so the
   drawer's height can be a share of the picture's. */
.fc-dock {
    position: absolute; left: 0; right: 0; top: 0; bottom: 0; z-index: 5;
    display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 10px;
    padding: 0 12px 14px; pointer-events: none;
}
.fc-bar2 {
    display: flex; align-items: center; justify-content: center; gap: 10px;
    width: 100%; max-width: 640px; pointer-events: auto;
}
.fc-bar2 .fc-arrow { width: 46px; height: 46px; flex: none; }
.fc-name {
    flex: 0 1 260px; min-width: 0; height: 46px; padding: 0 16px; border-radius: 999px;
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    font-size: 14px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
}
.fc-name .fc-lbl { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fc-name i { font-style: normal; font-size: 11px; opacity: .8; transition: transform .2s; }
.fc.drawer-open .fc-name i { transform: rotate(180deg); }
.fc-bar2 .fc-shutter { flex: none; margin-left: 14px; }
.fc-bar2 .fc-thumb { flex: none; margin-right: 6px; border-color: rgba(255, 255, 255, .7); }
.fc-bar2 .fc-thumb:empty { display: none; }

/* strength: a slim glass slider above the bar */
.fc-dock .fc-strength.fc-over {
    width: min(100%, 340px); margin: 0; padding: 5px 16px; border-radius: 999px; pointer-events: auto;
    color: rgba(255, 255, 255, .88);
    background: var(--fc-glass); border: 1px solid var(--fc-glass-line);
    backdrop-filter: blur(16px) saturate(1.3); -webkit-backdrop-filter: blur(16px) saturate(1.3);
    box-shadow: 0 6px 20px rgba(0, 0, 0, .22);
}
.fc-dock .fc-strength.fc-over output { color: #fff; }
.fc-dock .fc-strength.fc-over input[type=range]::-webkit-slider-runnable-track {
    background: linear-gradient(90deg, #fff var(--fill), rgba(255, 255, 255, .28) var(--fill));
}
.fc-dock .fc-strength.fc-over input[type=range]::-moz-range-progress { background: #fff; }
.fc-dock .fc-strength.fc-over.off { display: none; }

/* the drawer: every filter */
.fc-drawer {
    width: 100%; max-width: 720px; max-height: min(55%, 360px); min-height: 0;
    display: flex; flex-direction: column; gap: 10px;
    padding: 12px; border-radius: 22px; pointer-events: auto;
}
.fc-drawer[hidden] { display: none; }
.fc-drawer .fc-strength { width: 100%; max-width: none; margin: 0; padding: 0 4px; color: rgba(255, 255, 255, .85); }
.fc-drawer .fc-strength output { color: #fff; }
.fc-drawer .fc-strength input[type=range]::-webkit-slider-runnable-track {
    background: linear-gradient(90deg, #fff var(--fill), rgba(255, 255, 255, .25) var(--fill));
}
.fc-drawer .fc-strength input[type=range]::-moz-range-progress { background: #fff; }
.fc-drawer .fc-tray-wrap { margin: 0; min-height: 0; flex: 1; display: flex; }
.fc-drawer .fc-tray-wrap::before, .fc-drawer .fc-tray-wrap::after { display: none; }
.fc-drawer .fc-tray {
    flex: 1; min-height: 0;
    display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 6px;
    overflow-x: hidden; overflow-y: auto; padding: 2px; scroll-snap-type: none;
    scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .35) transparent;
}
.fc-drawer .fc-pill {
    justify-content: flex-start; height: 38px; padding: 0 12px;
    background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .14); color: #fff;
}
.fc-drawer .fc-pill:hover { background: rgba(255, 255, 255, .18); color: #fff; }
.fc-drawer .fc-pill.on { background: #fff; color: #151311; border-color: #fff; }
.fc-drawer .fc-lbl { overflow: hidden; text-overflow: ellipsis; }

/* The start screen, the countdown and the result sheet own the picture. */
.fc-msg { z-index: 3; }
.fc-msg:not([hidden]) ~ .fc-dock { display: none; }
.fc.is-shooting .fc-over, .fc.is-shooting .fc-bar2 > :not(.fc-shutter) { visibility: hidden; }

/* What used to sit where the bars now are. */
.fc-nameplate { top: 62px; }
.fc-dots { bottom: auto; top: 64px; }
.fc-mark { bottom: auto; top: 64px; right: 14px; }
.fc.fc-overlay .fc-src { bottom: auto; top: 64px; left: 14px; }
@media (max-width: 560px) {
    .fc-finder .fc-top.fc-over { top: 8px; left: 8px; right: 8px; }
    .fc-dock { padding: 0 8px 10px; gap: 8px; }
    .fc-bar2 { gap: 6px; }
    .fc-bar2 .fc-arrow { width: 40px; height: 40px; }
    .fc-name { height: 42px; padding: 0 12px; font-size: 12px; }
    .fc-bar2 .fc-shutter { margin-left: 6px; }
    .fc-bar2 .fc-thumb { width: 38px; height: 38px; margin-right: 0; }
    .fc-drawer { max-height: 58%; padding: 10px; }
    .fc-drawer .fc-tray { grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); }
    .fc.fc-overlay .fc-finder { border-radius: 0; }
}

/* No picture under the glass yet (start screen, camera blocked): solid. */
.fc.is-idle .fc-finder .fc-chip,
.fc.is-idle .fc-finder .fc-modes {
    background: #fff; color: #241d1a; border-color: rgba(0, 0, 0, .12);
    text-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none;
}
.fc.is-idle .fc-finder .fc-mode { color: #82736a; }
.fc.fc-overlay .fc-src { bottom: auto; top: 64px; left: 14px; }

/* ---- the shape menu ----------------------------------------------------- */
.fc-top { position: relative; }
.fc-chip[data-k="aspect"] span { font-size: 11px; }
.fc-shapes {
    position: absolute; top: calc(100% + 8px); right: 0; z-index: 8;
    display: flex; flex-direction: column; gap: 2px; padding: 6px; min-width: 190px;
    border-radius: 16px; color: #fff;
    background: rgba(20, 18, 16, .78); border: 1px solid rgba(255, 255, 255, .2);
    backdrop-filter: blur(16px) saturate(1.3); -webkit-backdrop-filter: blur(16px) saturate(1.3);
    box-shadow: 0 10px 30px rgba(0, 0, 0, .35);
}
.fc-shapes[hidden] { display: none; }
.fc-shapes button {
    display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px;
    text-align: left; font-size: 13px; font-weight: 700; color: #fff;
}
.fc-shapes button span { flex: 1; }
.fc-shapes button small { opacity: .6; font-weight: 400; font-size: 11px; }
.fc-shapes button:hover { background: rgba(255, 255, 255, .1); }
.fc-shapes button[aria-checked="true"] { background: #fff; color: #151311; }
.fc-shapes button[aria-checked="true"] small { opacity: .7; }

/* ---- a narrow picture (Portrait, Square, a phone) ------------------------
   The controls size to the picture, not the page: below 480px of picture
   the chips drop their words and the bar its last-shot thumbnail, so
   nothing is cut off at the edge. */
.fc-finder { container-type: inline-size; container-name: fcfinder; }
@container fcfinder (max-width: 480px) {
    .fc-top.fc-over .fc-chip span:not([data-k="timerLabel"]), .fc-top.fc-over .fc-mode small { display: none; }
    .fc-top.fc-over .fc-chip { padding: 0 8px; }
    .fc-top.fc-over .fc-mode { padding: 6px 11px; }
    .fc-bar2 { gap: 6px; }
    .fc-bar2 .fc-thumb { display: none; }
    .fc-bar2 .fc-arrow { width: 40px; height: 40px; }
    .fc-bar2 .fc-shutter { margin-left: 4px; }
    .fc-name { padding: 0 10px; }
}
@container fcfinder (max-width: 360px) {
    .fc-bar2 .fc-arrow { display: none; }
    /* A short phone gives a small square picture: icons only, tighter. */
    .fc-top.fc-over { gap: 3px; }
    .fc-top.fc-over .fc-tools { gap: 3px; }
    .fc-top.fc-over .fc-chip span { display: none; }
    .fc-top.fc-over .fc-chip { padding: 0 6px; }
    .fc-top.fc-over .fc-mode { padding: 4px 9px; }
}
/* The phone dock keeps its arrows: they live under the picture there,
   not on it, so a narrow picture does not crowd them. */
.fc.dock-below .fc-bar2 .fc-arrow { display: flex; }

/* ---- phones: the dock under the picture ---------------------------------- */
.fc.dock-below .fc-dock {
    position: static; inset: auto; pointer-events: auto;
    padding: 10px 10px 12px; gap: 10px; justify-content: flex-start;
}
.fc.dock-below .fc-finder-wrap { margin: 0; }
.fc.dock-below .fc-drawer { max-height: 46vh; }
.fc.dock-below .fc-bar2 { gap: 8px; }
.fc.dock-below .fc-bar2 .fc-arrow { display: flex; width: 44px; height: 44px; }
.fc.dock-below .fc-bar2 .fc-thumb { display: block; }
.fc.dock-below .fc-bar2 .fc-thumb:empty { display: none; }
.fc.dock-below .fc-name { flex: 1 1 auto; }
.fc.dock-below { height: auto; min-height: 0; }
.fc.dock-below .fc-finder-wrap { flex: none; }

/* The phone dock, top to bottom: strength (only for a look that can be
   turned down), every filter in one row to swipe, then the camera row --
   last shot, previous, the shutter in the middle, next. The filter name
   button is not needed here: the row IS the menu, and the picture shows
   the name as it changes. Grid with 1fr either side keeps the shutter
   dead centre whether or not there is a last shot to show. */
.fc.dock-below .fc-dock { padding: 10px 0 12px; gap: 10px; align-items: stretch; }
.fc.dock-below .fc-dock .fc-strength.fc-over { align-self: center; width: min(100% - 24px, 380px); }
/* Kept in place, greyed, for a look that cannot be turned down: a row that
   came and went with the filter made the picture jump on every pick. */
.fc.dock-below .fc-dock .fc-strength.fc-over.off { display: flex; opacity: .35; }
.fc.dock-below .fc-dock .fc-tray-wrap { margin: 0; width: 100%; }
.fc.dock-below .fc-dock .fc-tray {
    position: relative; display: flex; flex-wrap: nowrap; gap: 8px;
    overflow-x: auto; overflow-y: hidden; padding: 2px 16px 4px;
    scroll-snap-type: x proximity; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch;
}
.fc.dock-below .fc-dock .fc-tray-wrap::before { background: linear-gradient(90deg, var(--fc-page, transparent), transparent); }
.fc.dock-below .fc-dock .fc-tray-wrap::after { background: linear-gradient(-90deg, var(--fc-page, transparent), transparent); }
.fc.dock-below .fc-bar2 {
    display: grid; grid-template-columns: 1fr auto auto auto 1fr;
    grid-template-areas: "thumb prev shutter next end";
    align-items: center; justify-items: center; gap: 18px;
    max-width: none; padding: 0 16px;
}
.fc.dock-below .fc-bar2 .fc-name { display: none; }
.fc.dock-below .fc-bar2 .fc-thumb { grid-area: thumb; justify-self: start; margin: 0; }
.fc.dock-below .fc-bar2 [data-k="prev"] { grid-area: prev; }
.fc.dock-below .fc-bar2 .fc-shutter { grid-area: shutter; margin: 0; }
.fc.dock-below .fc-bar2 [data-k="next"] { grid-area: next; }

/* On the picture: smaller tools, so they frame the face instead of
   covering the top of it. */
.fc.dock-below .fc-finder .fc-top.fc-over { top: 8px; left: 8px; right: 8px; gap: 4px; }
.fc.dock-below .fc-finder .fc-chip { height: 32px; min-width: 32px; padding: 0 8px; font-size: 12px; }
.fc.dock-below .fc-finder .fc-chip svg { width: 16px; height: 16px; }
.fc.dock-below .fc-finder .fc-modes { padding: 3px; }
.fc.dock-below .fc-finder .fc-mode { padding: 4px 12px; font-size: 12px; }
.fc.dock-below .fc-nameplate { top: 50px; }
.fc.dock-below .fc-mark { top: 50px; }