/* Gymshark's own fonts, from Gymshark's CDN (it allows cross-site loading), so no copies are kept or deployed */
@font-face { font-family: 'Plaak Gymshark'; font-weight: 800; src: url('https://cdn.gymshark.com/fonts/plaak/PlaakGymshark-Heavyweight.woff2') format('woff2'); }
@font-face { font-family: 'SN Skandia'; font-weight: 500; src: url('https://cdn.gymshark.com/fonts/skandia/SkandiaSN-Book.woff2') format('woff2'); }
@font-face { font-family: 'SN Skandia'; font-weight: 700; src: url('https://cdn.gymshark.com/fonts/skandia/SkandiaSN-Bold.woff2') format('woff2'); }

/* The Creative Engine's layout (ui/engine.css from Jake's kit, ui/shell.css): a white navigation sidebar, a top bar
   with the title and the main buttons, a tools bar under it, then the work. This file holds only the engine's own
   pieces. The kit already sets Barlow, the tokens, the nav rows, the brand rows and the buttons. */
:root {
  --ink: var(--foreground); --muted: var(--rf-grey-500); --faint: var(--rf-grey-300); --line: var(--rf-grey-200);
  --wash: var(--rf-grey-100); --sel: var(--rf-yellow-100); --bad: var(--destructive);
  --mono: 'JetBrains Mono', ui-monospace, monospace;
}
body { overflow: hidden; }
button { cursor: pointer; }

/* top left: the Riverflow wordmark, then the Gymshark workspace (the shark on a black tile) */
/* as tall as the top bar, so the line under it runs straight on across the sidebar */
.side-brand { box-sizing: border-box; height: 72px; padding: 0 16px 0 24px!important; display: flex; flex-direction: column; justify-content: center; }
.brand-lockup { gap: 10px; margin: 0; padding: 14px 24px; }
.brand-lockup > span:last-child { line-height: 1.25; letter-spacing: .01em; }
.brand-lockup small { margin-top: 1px; letter-spacing: 0; }
.brand-lockup .workspace-mark { flex: none; width: 32px; height: 32px; border-radius: 7px; background: #000; }
.brand-lockup .workspace-mark img { width: 20px; height: auto; display: block; }

/* sidebar: navigation only. New ad, then every ad as a nav row with its photo and how many sizes are made */
.studio-shell { grid-template-columns: 246px minmax(0, 1fr); }
.studio-sidebar { background: #fff; border-right: 1px solid var(--border); }
.side-nav { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow-y: auto; padding-bottom: 12px; }
.menu { display: flex; flex-direction: column; gap: 2px; }
[data-sidebar="menu-button"] { display: flex; align-items: center; width: 100%; min-width: 0; border: 0; background: transparent; color: var(--ink); text-align: left; flex: none; }
[data-sidebar="menu-button"] > span:not(.nav-count) { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ads [data-sidebar="menu-button"] { font-weight: 400; }
.ads [data-sidebar="menu-button"][data-active="true"] { font-weight: 500; }
.ads img, .ads [data-sidebar="menu-button"] > i { width: 20px; height: 24px; object-fit: cover; border-radius: 3px; flex: 0 0 20px; background: var(--wash); }
.nav-count { flex: none; }
.nav-empty { margin: 0; padding: 0 24px; font-size: 13px; color: var(--muted); }
.sidebar-footer { border-top: 1px solid var(--border); padding-top: 12px; }

.rf-button.icon-only { width: 40px; min-width: 40px; padding: 0; }
.rf-button.icon-only:hover { color: var(--bad); background: transparent; border-color: var(--bad); }

/* tools bar: Copy, Sizes, Photos, one labelled row each */
.asset-controls-secondary { padding: 14px 24px 16px; }
.ctl { display: grid; gap: 10px; }
.ctl-row { display: grid; grid-template-columns: 72px minmax(0, 1fr); align-items: center; gap: 12px; min-height: 36px; }
.ctl-row > .small-label { font-size: 16px; }
.ctl-copy { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ctl-input { height: 36px; min-width: 0; padding: 0 12px; background: #fff; border: 1px solid var(--rf-grey-300); border-radius: 8px; font: 400 15px Barlow, Arial, sans-serif; color: var(--ink); transition: border-color .15s; }
.ctl-input[data-k="headline"] { flex: 0 1 320px; font-weight: 500; }
.ctl-input[data-k="sub"] { flex: 0 1 300px; }
.ctl-input[data-k="cta"] { flex: 0 1 190px; }
.ctl-input[data-k="eyebrow"] { flex: 0 1 180px; }
.ctl-input:hover { border-color: var(--rf-grey-500); }
.ctl-input:focus { outline: none; border-color: var(--ink); }
.ctl-input::placeholder { color: var(--rf-grey-500); font-weight: 400; }
.ctl-input.bad { border-color: var(--bad); }
.sizes-pick, .tiles, .shoots { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.tile { display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 11px 0 9px; border: 1px solid var(--border); border-radius: 8px; background: #fff; color: var(--rf-grey-600); font: 500 14px Barlow, Arial, sans-serif; white-space: nowrap; transition: border-color .15s, background .15s; }
.tile i { display: block; border: 1.5px solid currentColor; border-radius: 2px; flex: none; }
.tile b { font-weight: 500; }
.tile:hover:not(:disabled) { border-color: var(--rf-grey-500); color: var(--ink); }
.tile.on, .tile[aria-pressed="true"] { background: var(--sel); border-color: var(--sel); color: var(--ink); }
/* templates: one button showing what's picked; it opens the picker of original ads */
.tpls { min-width: 0; }
.tpl-open { display: inline-flex; align-items: center; gap: 4px; height: 36px; padding: 0 12px 0 4px; border: 1px solid var(--border); border-radius: 8px; background: #fff; color: var(--ink); font: 500 14px Barlow, Arial, sans-serif; }
.tpl-open:hover { border-color: var(--rf-grey-500); }
.tpl-open img { width: 21px; height: 28px; object-fit: cover; border-radius: 3px; }
.tpl-open span { margin: 0 6px 0 4px; }
.tpl-open em { font-style: normal; font-size: 13px; color: var(--rf-link); }
dialog.tpl-pick { width: min(1180px, calc(100vw - 32px)); max-height: calc(100dvh - 48px); padding: 0; border: 1px solid var(--rf-grey-300); border-radius: 8px; }
.tpl-pick form { display: flex; flex-direction: column; max-height: calc(100dvh - 50px); }
.tpl-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 20px 24px 14px; border-bottom: 1px solid var(--border); }
.tpl-head h2 { margin: 0; font: 400 28px/1.2 'Denton Condensed', Georgia, serif; }
.tpl-head .muted { margin: 4px 0 0; font-size: 14px; }
.tpl-head .resize-go { margin: 0; }
.tpl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 18px 14px; padding: 18px 24px 24px; overflow-y: auto; }
.tpl-card { display: grid; gap: 7px; padding: 0; border: 0; background: none; text-align: left; color: var(--ink); }
.tpl-img { position: relative; display: grid; place-items: center; aspect-ratio: 9 / 13; border-radius: 6px; overflow: hidden; background: var(--rf-grey-700); outline: 2px solid transparent; outline-offset: 2px; transition: outline-color .15s; }
.tpl-img img { width: 100%; height: 100%; object-fit: contain; }
.tpl-img i { position: absolute; top: 6px; right: 6px; width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; background: var(--rf-yellow); font: normal 600 12px/1 Barlow, sans-serif; opacity: 0; transform: scale(.5); transition: opacity .15s, transform .2s; }
.tpl-card:hover .tpl-img { outline-color: var(--rf-grey-300); }
.tpl-card[aria-pressed="true"] .tpl-img { outline-color: var(--ink); }
.tpl-card[aria-pressed="true"] .tpl-img i { opacity: 1; transform: none; }
.tpl-name { font-size: 13px; font-weight: 500; line-height: 1.3; }
.tpl-name small { display: block; font-weight: 400; color: var(--muted); }
.auto .tpl-img { background: var(--wash); align-content: center; gap: 6px; padding: 14px; text-align: center; }
.auto .tpl-img b { font: 400 30px/1 'Denton Condensed', Georgia, serif; color: var(--rf-blue); }
.auto .tpl-img small { font-size: 12px; color: var(--rf-grey-600); }
.tile:disabled { opacity: .45; cursor: default; }
.add-custom { color: var(--muted); border-style: dashed; padding-inline: 11px; }
.custom { display: flex; align-items: center; gap: 6px; }
.custom[hidden], .tile[hidden] { display: none; }
.custom input { width: 72px; height: 36px; border: 1px solid var(--rf-grey-300); border-radius: 8px; padding: 0 10px; font: 400 14px Barlow, Arial, sans-serif; background: #fff; -moz-appearance: textfield; }
.custom input::-webkit-outer-spin-button, .custom input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.custom input:focus { outline: none; border-color: var(--ink); }
.custom > span { color: var(--muted); }
.cprev { flex: 0 0 28px; height: 28px; display: grid; place-items: center; border-radius: 6px; border: 1px dashed var(--rf-grey-300); }
.cprev i { display: block; border: 1.5px solid var(--ink); border-radius: 2px; }
.cprev i:not([style*="width"]) { display: none; }
.shoot { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 12px 0 4px; border: 1px solid var(--border); border-radius: 8px; background: #fff; color: var(--rf-grey-600); font: 500 14px Barlow, Arial, sans-serif; white-space: nowrap; transition: border-color .15s, background .15s; }
.shoot img, .shoot > i { width: 22px; height: 28px; object-fit: cover; border-radius: 4px; background: var(--wash); opacity: .5; transition: opacity .15s; }
.shoot b { font-weight: 500; }
.shoot span { font-size: 12px; color: var(--muted); font-weight: 400; }
.shoot:hover { border-color: var(--rf-grey-500); color: var(--ink); }
.shoot[aria-pressed="true"] { background: var(--sel); border-color: var(--sel); color: var(--ink); }
.shoot[aria-pressed="true"] img { opacity: 1; }
/* the editor's fields */
label.f { display: grid; gap: 6px; font-size: 13px; font-weight: 500; color: var(--ink); }
label.f input, label.f textarea { min-height: 40px; width: 100%; min-width: 0; padding: 8px 12px; background: #fff; border: 1px solid var(--rf-grey-300); border-radius: 8px; font: 400 15px/1.45 Barlow, Arial, sans-serif; color: var(--ink); resize: none; }
label.f input:focus, label.f textarea:focus { outline: none; border-color: var(--ink); }
label.f textarea { min-height: 64px; }
.hint { margin: 0; font-size: 12px; line-height: 1.5; color: var(--muted); }
.err { margin: 0; font-size: 13px; color: var(--bad); }

/* buttons: the kit's rf-button look for the engine's own and the editor's buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 36px; padding: 6px 14px; border: 1px solid var(--ink); border-radius: 8px; background: transparent; color: var(--ink); font: 500 14px/20px Barlow, Arial, sans-serif; white-space: nowrap; transition: background .15s, color .15s; }
.btn:hover:not(:disabled) { background: var(--ink); color: var(--rf-white); }
.btn.primary { background: var(--rf-yellow); border-color: transparent; }
.btn.primary:hover:not(:disabled) { background: var(--ink); color: #fff; }
.btn.big { width: 100%; min-height: 44px; font-size: 15px; }
.btn:disabled { opacity: .5; cursor: default; }
.link { border: 0; background: none; padding: 0; }
.link:hover { text-decoration: underline; }

/* workspace */
.studio-topbar { gap: 16px; }
.surface-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.toolbar-actions { flex: none; }
.asset-workspace { display: flex; flex-direction: column; height: 100dvh; }
.asset-content { flex: 1; min-height: 0; }
.notice { margin: 16px 24px 0; padding: 10px 14px; border-radius: 8px; background: var(--sel); font-size: 14px; }
.asset-content { display: grid; grid-template-rows: auto minmax(0, 1fr); gap: 12px; overflow: hidden; padding: 16px 24px 24px; }
.out-head { display: flex; align-items: baseline; gap: 16px; font-size: 13px; color: var(--rf-grey-600); min-height: 20px; }
.out-head .tip { margin-left: auto; color: var(--muted); }
.out-head b { font-weight: 500; color: var(--ink); }
.out-head .saved { color: #3f8a55; }
/* the homepage's photo search, styled like the Copy fields */
.out-head.home { align-items: center; gap: 12px; }
.photo-search { display: flex; align-items: center; gap: 8px; flex: 0 1 420px; height: 36px; padding: 0 12px; background: #fff; border: 1px solid var(--rf-grey-300); border-radius: 8px; color: var(--rf-grey-500); cursor: text; transition: border-color .15s; }
.photo-search:hover { border-color: var(--rf-grey-500); }
.photo-search:focus-within { border-color: var(--ink); color: var(--ink); }
.photo-search svg { flex-shrink: 0; }
.photo-search input { flex: 1; min-width: 0; height: 100%; padding: 0; border: 0; outline: none; background: none; font: 400 15px Barlow, Arial, sans-serif; color: var(--ink); }
.photo-search input::placeholder { color: var(--rf-grey-500); }
.out-head .note { color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.out-head .note .link { margin-left: 6px; color: var(--rf-blue); font-size: 13px; }
.sheet-empty { display: grid; place-content: center; text-align: center; font-size: 15px; color: var(--rf-grey-600); }
/* what a size went through: four steps in a row */
.trail { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.trail li { color: var(--rf-grey-600); }
.trail li + li::before { content: '→'; margin-right: 6px; color: var(--faint); }
.trail b { font-weight: 600; color: var(--ink); }
.red-key { display: inline-flex; align-items: center; gap: 6px; color: var(--rf-grey-600); }
.red-key i { width: 10px; height: 10px; border-radius: 2px; background: #ff1a1a; }
.out-body { position: relative; min-height: 0; display: grid; grid-template-rows: minmax(0, 1fr); grid-template-columns: minmax(0, 1fr); place-items: center; overflow: hidden; }
.engine-status.busy::before { background: var(--rf-blue); animation: pulse 1s infinite; }
.engine-status { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@keyframes pulse { 50% { opacity: .35; } }

/* an ad's sizes: one row, the same height, scrolling sideways */
.frames { display: flex; flex-wrap: nowrap; gap: 20px; align-items: flex-start; justify-content: safe center; width: 100%; max-width: 100%; overflow-x: auto; padding: 4px 2px 14px; scrollbar-width: thin; }
.plus { justify-self: center; width: 30px; height: 30px; display: grid; place-items: center; padding: 0; border: 1px solid var(--rf-grey-300); border-radius: 50%; background: #fff; color: var(--ink); font: 400 20px/1 Barlow, sans-serif; transition: background .15s, border-color .15s; }
.plus:hover { background: var(--sel); border-color: var(--sel); }
.plus[hidden] { display: none; }
/* the + dialog: new sizes for the same ad */
dialog.resize { width: min(600px, calc(100vw - 32px)); padding: 24px; border: 1px solid var(--rf-grey-300); border-radius: 8px; }
dialog.resize h2 { margin: 0; font: 400 28px/1.2 'Denton Condensed', Georgia, serif; }
dialog.resize .muted { margin: 6px 0 18px; font-size: 14px; }
.resize-go { display: flex; justify-content: flex-end; gap: 8px; margin-top: 22px; }
.fv { margin: 0; display: grid; gap: 6px; flex: 0 0 auto; }
.fv-box { position: relative; border-radius: 6px; overflow: hidden; background: var(--wash); box-shadow: 0 1px 3px #0000001a; cursor: pointer; transition: box-shadow .2s; }
.fv[data-state="pick"] .fv-box:hover { box-shadow: 0 0 0 2px var(--ink), 0 8px 24px #0000001f; }
.fv-box canvas.pick, .fv-box img.ping { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.fv-box img.ping { object-fit: cover; opacity: 0; }
figcaption { display: flex; align-items: baseline; gap: 8px; font-size: 13px; color: var(--rf-grey-600); white-space: nowrap; overflow: hidden; }
figcaption b { color: var(--ink); font-weight: 500; }
figcaption .sc { flex: 1; overflow: hidden; text-overflow: ellipsis; }
.dl { display: none; gap: 10px; }
.fv[data-state="pick"] .dl { display: flex; }
.dl button { border: 0; background: none; padding: 0; font-size: 12px; font-weight: 500; color: var(--rf-link); }
.dl button:hover { text-decoration: underline; }

.lab { position: absolute; left: 10px; right: 10px; bottom: 9px; font-size: 12px; color: var(--muted); line-height: 1.3; }
.ok { position: absolute; top: 8px; right: 8px; width: 22px; height: 22px; border-radius: 50%; background: var(--rf-yellow); color: var(--ink); font-size: 12px; display: grid; place-items: center; opacity: 0; transform: scale(.4); transition: opacity .2s, transform .35s cubic-bezier(.3, 1.6, .5, 1); }
.scan { position: absolute; inset: 0; opacity: 0; background: linear-gradient(100deg, transparent 30%, #ffffff8c 50%, transparent 70%) 0 0 / 250% 100%; }
.bars { display: flex; gap: 2px; align-items: flex-end; height: 16px; }
.bars:empty { display: none; }
.bars i { flex: 1; height: 8%; background: var(--line); border-radius: 1px; transition: height .18s ease-out, background .1s; }
.bars i.set { background: var(--faint); }
.bars i.cur { background: var(--rf-blue); }
.bars i.win { background: var(--ink); }

.fv[data-state="blank"] .fv-box { background: repeating-linear-gradient(135deg, var(--rf-grey-100) 0 8px, var(--rf-grey-50) 8px 16px); box-shadow: inset 0 0 0 1px var(--line); cursor: default; }
.fv[data-state="work"] .scan { opacity: 1; animation: scan 1.3s linear infinite; }
.fv[data-state="work"] .fv-box { cursor: progress; }
@keyframes scan { from { background-position: 150% 0; } to { background-position: -150% 0; } }
.fv[data-state="err"] .lab { color: var(--bad); }
.fv[data-state="anim"] img.ping, .fv[data-state="landed"] img.ping { opacity: 1; }
.fv[data-state="anim"] .lab { color: #fff; text-shadow: 0 1px 3px #000b; }
.fv[data-state="landed"] .ok { opacity: 1; transform: none; }
.fv[data-state="landed"] .fv-box { box-shadow: 0 0 0 2px var(--ink); }
.fv[data-state="pick"] canvas.pick { animation: land .4s ease-out; }
@keyframes land { from { opacity: .4; filter: blur(3px); } }

/* one size, opened */
.back { border: 0; background: none; padding: 0; font-size: 13px; font-weight: 500; color: var(--rf-link); }
.back:hover { text-decoration: underline; }
.one { width: 100%; height: 100%; display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); gap: 32px; align-items: center; }
.one.wide { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); align-items: start; gap: 20px; }
.one.wide .one-side { height: 100%; }
.one-main { display: grid; place-items: center; }
.one-main .fv-box { box-shadow: 0 2px 16px #0003; }
.one-side { display: grid; gap: 16px; align-content: start; max-height: 100%; overflow-y: auto; min-width: 0; padding: 2px 6px 2px 2px; }
.one-side h4 { margin: 4px 0 0; font: 500 16px/1 'Sans Plomb', 'Arial Narrow', sans-serif; text-transform: uppercase; color: var(--rf-grey-500); }
.one-side h4 span { font: 400 13px Barlow, sans-serif; text-transform: none; color: var(--muted); margin-left: 8px; }
.one-info { display: grid; gap: 10px; }
.big-score { margin: 0; font: 400 44px/1 'Denton Condensed', Georgia, serif; color: var(--rf-blue); }
.big-score small { font: 400 15px Barlow, sans-serif; color: var(--muted); }
.meters { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 20px; }
.meters span { display: grid; grid-template-columns: 74px 1fr 24px; align-items: center; gap: 8px; font-size: 13px; color: var(--rf-grey-600); }
.meters i { height: 4px; border-radius: 2px; background: var(--line); overflow: hidden; }
.meters i b { display: block; height: 100%; background: var(--ink); }
.meters em { font-style: normal; color: var(--ink); font-size: 13px; text-align: right; }
.why { margin: 0; font-size: 14px; color: var(--rf-grey-600); }
.tags { display: flex; flex-wrap: wrap; gap: 6px; }
.tags span { display: inline-flex; padding: 4px 7px; border-radius: 4px; background: var(--wash); color: var(--rf-grey-600); font: 500 12px/1.4 Barlow, sans-serif; }
.vgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--tw, 110px), 1fr)); gap: 12px; }
.vt { position: relative; border: 0; padding: 0; background: none; border-radius: 6px; overflow: hidden; box-shadow: 0 1px 3px #0000001a; outline: 2px solid transparent; outline-offset: 2px; }
.vt canvas { display: block; width: 100%; height: auto; background: var(--wash); }
.vt:hover { outline-color: var(--faint); }
.vt.on { outline-color: var(--ink); }
.vb { position: absolute; left: 5px; bottom: 5px; font: 500 11px/1.3 Barlow, sans-serif; background: #fffffff0; padding: 2px 6px; border-radius: 4px; }
.vt.on .vb { background: var(--rf-yellow); }
.one-act { padding-top: 4px; }

/* the homepage gallery: a contact sheet of the photos picked */
.wall { position: absolute; inset: 0; overflow: hidden; }

/* On the homepage, just the photos. During round 1 (.live): dim until rendered, a yellow frame of the size it was just
   rendered at, then its score; the 3 going through get a yellow outline and the rest step back. */
.sheet { display: grid; grid-template-rows: minmax(0, 1fr) auto; justify-items: center; align-items: center; gap: 8px; }
.cells { display: grid; gap: 6px; align-content: center; }
.sheet-cell { position: relative; aspect-ratio: 4/5; border-radius: 4px; overflow: hidden; background: var(--wash); display: grid; place-items: center; transition: opacity .6s, transform .3s; }
.sheet-cell img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity .5s, filter .5s; }
.sheet-cell i { position: relative; display: block; box-sizing: border-box; border: 2px solid var(--rf-yellow); box-shadow: 0 0 0 999px #16170980; background: center / cover no-repeat; opacity: 0; transition: opacity .3s; }
.sheet-cell b { position: absolute; left: 4px; top: 4px; padding: 1px 4px; border-radius: 3px; background: var(--rf-yellow); font: 600 10px/1.3 Barlow, sans-serif; opacity: 0; }
.sheet-cell em { position: absolute; left: 4px; bottom: 4px; padding: 1px 5px; border-radius: 3px; background: #fffffff0; font: 600 10.5px/1.3 Barlow, sans-serif; font-style: normal; font-variant-numeric: tabular-nums; }
.sheet-cell em:empty { display: none; }
.live .sheet-cell img { opacity: .3; filter: grayscale(1); }
.live .sheet-cell.on img { opacity: 1; filter: none; }
.sheet-cell.hit i, .sheet-cell.hit b { opacity: 1; transition: none; }
.sheet-cell.top { box-shadow: 0 0 0 3px var(--rf-yellow), 0 8px 20px #0000003d; transform: scale(1.06); z-index: 1; }
.sheet-cell.top em { background: var(--rf-yellow); }
.sheet-cell.out { opacity: .35; }
/* the homepage sheet as a picker: unchanged until a photo is picked; then the picks are ticked and the rest step back */
.pickable .sheet-cell { cursor: pointer; }
.picking .sheet-cell:not(.picked) img { opacity: .3; }
.sheet-cell.picked { box-shadow: 0 0 0 3px var(--rf-yellow); }
.sheet-cell.picked::after { content: '✓'; position: absolute; top: 5px; right: 5px; width: 20px; height: 20px; display: grid; place-items: center; border-radius: 50%; background: var(--rf-yellow); font: 600 11px/1 Barlow, sans-serif; }
.clear-photos { font-size: 13px; color: var(--rf-link); }
.sheet-count { font-size: 13px; color: var(--rf-grey-600); font-variant-numeric: tabular-nums; min-height: 20px; }
.sheet-count b { font-weight: 600; color: var(--ink); }
.login-form [hidden] { display: none; }
@media (prefers-reduced-motion: reduce) { .sheet-cell, .sheet-cell img, .sheet-cell i { transition: none; } }

dialog.editor { border: 0; padding: 0; }
.btns, .chips { display: flex; gap: 8px; flex-wrap: wrap; }

@media (max-width: 800px) {
  body { overflow: auto; }
  .side-nav { max-height: 240px; }
  .asset-workspace { height: auto; }
  .asset-controls-secondary { padding: 12px 20px; }
  .ctl-row { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .ctl-input[data-k] { flex: 1 1 140px; }
  .asset-content { height: auto; overflow: visible; }
  .out-body { height: 72vh; }
  .out-head .tip { display: none; }
  .one, .one.wide { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto; align-items: start; align-content: start; overflow-y: auto; }
  .one-side, .one.wide .one-side { max-height: none; height: auto; overflow: visible; }
}
@media (max-width: 600px) { .toolbar-actions { flex-wrap: wrap; justify-content: flex-end; } .toolbar-actions .rf-button { font-size: 14px; padding: 6px 10px; } }

/* editor */
dialog.editor { width: 100vw; height: 100dvh; max-width: none; max-height: none; border-radius: 0; background: var(--rf-grey-100); }
.ed { display: grid; grid-template-columns: 1fr 360px; height: 100%; }
.ed-stage { display: grid; place-items: center; align-content: center; gap: 10px; padding: 24px; min-width: 0; }
.ed-canvas { position: relative; box-shadow: 0 10px 40px rgba(0,0,0,.15); background: #ddd; }
.ed-canvas canvas { display: block; touch-action: none; }
.ed-sel { position: absolute; border: 1.5px dashed #2f7df6; border-radius: 4px; pointer-events: none; }
.ed-hint, .ed-metrics { margin: 0; color: var(--muted); font-size: 12px; }
.ed-metrics { color: var(--ink); }
.ed-side { background: #fff; border-left: 1px solid var(--line); overflow-y: auto; padding: 18px 20px; display: grid; gap: 18px; align-content: start; }
.ed-top { display: flex; align-items: center; justify-content: space-between; }
.ed-top h2 { margin: 0; font: 400 28px/1.1 'Denton Condensed', Georgia, serif; color: var(--rf-blue); }
.ed-top h2 span { color: var(--muted); font-weight: 400; font-size: 14px; }
.x { border: 0; background: none; font-size: 24px; color: var(--muted); }
.ed-side section { display: grid; gap: 8px; }
.ed-side h3 { margin: 0; font: 500 16px/1 'Sans Plomb', 'Arial Narrow', sans-serif; text-transform: uppercase; color: var(--rf-grey-500); }
.ed-note { margin: 0; color: var(--muted); font-size: 12px; }
.ed-side input[type=range] { width: 100%; }
.ed-side select { border: 1px solid var(--rf-grey-300); border-radius: 8px; padding: 8px 10px; font: inherit; background: #fff; }
.ed-photos { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; max-height: 210px; overflow-y: auto; padding: 3px; }
.ed-photos button { position: relative; display: block; width: 100%; padding: 0 0 125%; border: 0; border-radius: 6px; overflow: hidden; outline: 2px solid transparent; outline-offset: 1px; background: var(--wash); }
.ed-photos button.on { outline-color: var(--ink); }
.ed-side .chip { font-size: 13px; border: 1px solid var(--line); background: #fff; color: var(--ink); border-radius: 6px; padding: 5px 10px; }
.ed-side .chip.on { background: var(--sel); border-color: var(--ink); }
.ed-photos img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.ed-foot { display: flex; gap: 8px; align-items: center; position: sticky; bottom: -18px; background: #fff; padding: 12px 0; border-top: 1px solid var(--line); }
.ed-foot span { flex: 1; }
@media (max-width: 900px) { .ed { grid-template-columns: 1fr; grid-template-rows: auto 1fr; } }

/* round 1 in an opened size: every photo tried, best first */
.tried { display: grid; gap: 10px; }
.pgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(54px, 1fr)); gap: 6px; }
.pt { position: relative; border: 0; padding: 0; background: var(--wash); border-radius: 4px; overflow: hidden; aspect-ratio: var(--ar, 4 / 5); outline: 2px solid transparent; outline-offset: 1px; }
.pt img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.pt span { position: absolute; left: 3px; bottom: 3px; font: 500 10.5px/1.3 Barlow, sans-serif; background: rgba(255,255,255,.92); padding: 1px 4px; border-radius: 3px; }
.pt:hover { outline-color: var(--faint); }
.pt.fin { outline-color: var(--ink); }
.pt.fin span { background: var(--rf-yellow); }