@font-face { font-family: 'GT-Zirkon'; src: url('/fonts/GT-Zirkon-Book.woff2') format('woff2'), url('/fonts/GT-Zirkon-Book.woff') format('woff'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'GT-Zirkon'; src: url('/fonts/GT-Zirkon-Medium.woff2') format('woff2'), url('/fonts/GT-Zirkon-Medium.woff') format('woff'); font-weight: 500 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'CenturySchoolbook'; src: url('/fonts/CenturySchoolbookBT-Monospace.woff2') format('woff2'), url('/fonts/CenturySchoolbookBT-Monospace.woff') format('woff'); font-weight: 400; font-style: normal; font-display: swap; }
/* 100% Film look: white page, near-black text, mono uppercase navigation,
   pink accent, green for the photographers section. Fonts are stand-ins for
   GT Zirkon / Century Schoolbook Mono — 100% Film's own web fonts (public/fonts), approved for the demo. */
:root {
  --bg: #fff;
  --panel: #f2f2f2;
  --text: rgb(28, 28, 28);
  --muted: #7a7a7a;
  --line: #e4e4e4;
  --accent: #ff00bb;
  --green: #578d67;
  --red: #a9132a;
  --amber: #b77900;
  --sans: 'GT-Zirkon', 'Inter Tight', 'Helvetica Neue', Arial, sans-serif;
  --mono: 'CenturySchoolbook', 'Courier Prime', 'Courier New', monospace;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--text); font: 16px/1.35 var(--sans); }
a { color: var(--text); text-decoration: none; }
a:hover { color: var(--accent); }
img { display: block; max-width: 100%; }
.mono, .uc { font-family: var(--mono); }
.uc { text-transform: uppercase; letter-spacing: .02em; font-size: 14px; }
.muted { color: var(--muted); }
h1 { font-weight: 500; font-size: 40px; line-height: .95; margin: 0 0 16px; letter-spacing: -.01em; }
h2 { font-weight: 500; font-size: 22px; margin: 32px 0 12px; }
h3 { font-family: var(--mono); text-transform: uppercase; font-size: 13px; font-weight: 400; margin: 20px 0 8px; color: var(--muted); }

/* Header */
.top { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; gap: 28px; padding: 12px 20px;
  background: rgba(242, 242, 242, .85); backdrop-filter: blur(8px); }
.top .logo img { height: 26px; width: 36px; }
.top nav { display: flex; gap: 20px; flex-wrap: wrap; }
.top nav a.on { color: var(--green); }
.top .who { margin-left: auto; color: var(--muted); }
.demo-note { font-family: var(--mono); font-size: 12px; text-align: center; padding: 6px; background: var(--text); color: #fff; }
main { padding: 24px 20px 80px; max-width: 1500px; margin: 0 auto; }
.narrow { max-width: 560px; margin: 10vh auto; }

/* Controls */
.btn, button { font: 14px var(--mono); text-transform: uppercase; border: 1px solid var(--text); background: var(--text); color: #fff;
  padding: 9px 14px; cursor: pointer; display: inline-block; border-radius: 0; }
.btn.ghost, button.ghost { background: transparent; color: var(--text); }
.btn:hover, button:hover { background: #3a3a3a; border-color: #3a3a3a; color: #fff; }
.btn.ghost:hover, button.ghost:hover { background: var(--text); border-color: var(--text); color: #fff; }
button[disabled] { opacity: .4; cursor: wait; }
input[type=text], input[type=search], input[type=email], input[type=password], input[type=date], input[type=url], select, textarea {
  font: 15px var(--sans); padding: 9px 10px; border: 1px solid var(--line); background: #fff; width: 100%; border-radius: 0; }
textarea { min-height: 120px; resize: vertical; }
label { display: block; margin: 12px 0 4px; font: 12px var(--mono); text-transform: uppercase; color: var(--muted); }
.row { display: flex; gap: 12px; flex-wrap: wrap; align-items: end; }
.row > * { flex: 1 1 180px; }

/* Library */
.layout { display: grid; grid-template-columns: 260px 1fr; gap: 28px; }
.filters { position: sticky; top: 120px; align-self: start; max-height: calc(100vh - 140px); overflow: auto; padding-right: 6px; }
.filters details { border-top: 1px solid var(--line); padding: 8px 0; }
.filters summary { cursor: pointer; font: 13px var(--mono); text-transform: uppercase; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.chip { font: 12px var(--mono); padding: 3px 8px; border: 1px solid var(--line); background: #fff; white-space: nowrap; }
.chip.on { background: var(--green); border-color: var(--green); color: #fff; }
.chip.ai { border-style: dashed; }
.chip.unsure { opacity: .55; }
.chip.flag { border-color: var(--amber); color: var(--amber); }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 14px; }
.card { position: relative; }
.card img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; background: var(--panel); }
.card .meta { font: 12px var(--mono); margin-top: 6px; }
.badge { position: absolute; top: 6px; left: 6px; font: 11px var(--mono); text-transform: uppercase; padding: 2px 6px; background: #fff; }
.badge.pending { color: var(--amber); }
.badge.cleared { color: var(--green); }
.badge.restricted { color: var(--amber); }
.badge.blocked { color: #fff; background: var(--red); }
.badge.warn { left: auto; right: 6px; background: var(--amber); color: #fff; }

.stats { display: flex; gap: 32px; flex-wrap: wrap; margin: 8px 0 24px; }
.stats div { font: 13px var(--mono); text-transform: uppercase; color: var(--muted); }
.stats b { display: block; font: 500 32px var(--sans); color: var(--text); }

table { border-collapse: collapse; width: 100%; font-size: 14px; }
th, td { text-align: left; padding: 10px 8px; border-bottom: 1px solid var(--line); vertical-align: top; }
th { font: 12px var(--mono); text-transform: uppercase; color: var(--muted); font-weight: 400; }

.two { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 32px; }
.panel { background: var(--panel); padding: 16px 18px; }
.flash { padding: 10px 14px; background: var(--green); color: #fff; font: 14px var(--mono); margin-bottom: 16px; }
.err { background: var(--red); }

/* Builder */
.pick { position: relative; cursor: grab; }
.pick.off img { opacity: .25; }
.pick .reason { font-size: 12px; line-height: 1.3; margin-top: 4px; }
.pick .ctl { display: flex; gap: 6px; margin-top: 6px; }
.pick .ctl button { padding: 4px 8px; font-size: 11px; }
.pick.cover img { outline: 3px solid var(--accent); outline-offset: -3px; }
.pick.dragging { opacity: .4; }

@media (max-width: 860px) {
  .layout, .two { grid-template-columns: 1fr; }
  .filters { position: static; max-height: none; }
  .top { gap: 14px; padding: 10px 16px; }
  main { padding: 16px 16px 60px; }
  h1 { font-size: 30px; }
}

/* ---- Admin in 100% Film's visual language ---- */
.admin .top { background: rgba(255,255,255,.94); align-items: flex-start; padding: 14px 16px 10px; min-height: 106px; overflow: visible; }
.admin .top .logo img { height: 30px; width: 42px; }
.admin .top nav { gap: 30px; padding-top: 4px; }
.admin .top nav a { position: relative; }
.admin .top nav a.on { color: var(--text); }
.admin .top nav a.on span { display: inline-block; white-space: nowrap; transform: rotate(-40deg); transform-origin: left bottom; translate: 4px 66px; }
.admin .top .who { padding-top: 4px; font-size: 12px; }
.admin main h1 { font-family: var(--mono); font-weight: 400; text-transform: uppercase; font-size: clamp(34px, 5vw, 64px); line-height: .95; margin: 18px 0 18px; }
.admin h2 { font-family: var(--mono); font-weight: 400; text-transform: uppercase; font-size: 20px; }
.admin h4 { font: 12px var(--mono); text-transform: uppercase; color: var(--muted); font-weight: 400; margin: 18px 0 8px; }
.admin .lead { max-width: 760px; color: var(--muted); }
body.pastel { background: #c1ffb8; }
body.pastel .top { background: transparent; }
.landing { min-height: 70vh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.landing h1 { font-family: var(--mono); font-weight: 400; text-transform: uppercase; font-size: clamp(42px, 8vw, 110px); line-height: .9; margin: 0; }
.landing .kw { margin: 14px 0 34px; }

/* Selects: flat, mono, custom arrow */
select { appearance: none; -webkit-appearance: none; font: 14px var(--mono); text-transform: uppercase; padding: 9px 34px 9px 10px; border: 1px solid var(--text); border-radius: 0; cursor: pointer;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6' fill='none' stroke='%231c1c1c'/%3E%3C/svg%3E") no-repeat right 12px center; }
select:focus, input:focus, textarea:focus { outline: none; border-color: var(--text); box-shadow: inset 0 0 0 1px var(--text); }
input[type=text], input[type=search], input[type=email], input[type=password], input[type=date], input[type=url], textarea { border-color: #cfcfcf; }
input[type=date] { font-family: var(--mono); }

/* Filters and tags as slash keywords */
.chip { border: 0; padding: 2px 6px 2px 18px; position: relative; background: transparent; font-size: 13px; }
.chip::before { content: ''; position: absolute; left: 4px; top: .75em; width: 10px; height: 1px; background: currentColor; transform: rotate(-40deg); }
.chip.on { background: var(--text); color: #fff; border: 0; }
.chip.ai { border: 0; }
.chip.ai.on { background: #555; }
.chip.flag { color: var(--amber); }
.chip .muted { color: inherit; opacity: .55; }
.filters details { border-top: 1px solid var(--line); padding: 10px 0; }
.filters summary { list-style: none; }
.filters summary::-webkit-details-marker { display: none; }
.filters summary::after { content: '+'; float: right; }
.filters details[open] summary::after { content: '–'; }
.filters .chips { max-height: 230px; overflow: auto; }

/* Cards on Settings / Tags */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); gap: 18px; align-items: start; }
.box { border: 1px solid var(--line); padding: 18px 20px 20px; background: #fff; }
.box h3 { margin-top: 0; color: var(--text); }
.box .big { font-size: 24px; margin: 4px 0 8px; }
.box details { margin-top: 16px; border-top: 1px solid var(--line); padding-top: 12px; }
.box summary { cursor: pointer; font: 12px var(--mono); text-transform: uppercase; }
.box .stats { margin: 6px 0 14px; }
.steps { padding-left: 18px; }
.steps li { margin: 8px 0; }
.copy { display: flex; gap: 8px; align-items: center; justify-content: space-between; background: var(--panel); padding: 8px 10px; margin-top: 6px; font-size: 13px; word-break: break-all; }
button.sm { padding: 4px 8px; font-size: 11px; }
button.link { background: none; border: 0; color: var(--text); padding: 0; text-decoration: underline; text-underline-offset: 3px; font-size: 12px; }
button.link:hover { background: none; color: var(--accent); }
button.link.muted { color: var(--muted); }
.people { list-style: none; padding: 0; margin: 10px 0 14px; }
.people li { display: flex; gap: 10px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.people .role { margin-left: auto; color: var(--muted); font: 12px var(--mono); text-transform: uppercase; }
.sug { list-style: none; padding: 0; margin: 0; }
.sug li { display: flex; gap: 10px; align-items: center; padding: 5px 0; border-bottom: 1px dotted var(--line); font-size: 14px; }
.sug .hits { color: var(--muted); font: 12px var(--mono); }
.sug form { margin-left: auto; display: flex; gap: 12px; }
.card .ph-box { aspect-ratio: 4 / 5; display: grid; place-items: center; font: 12px var(--mono); text-transform: uppercase; }

/* Client page — follows 100prcnt.film: mono caps, tilted active label,
   giant mono title with slash keywords, staggered rows, colour placeholders. */
.client { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; font-family: var(--sans); }
.client img { -webkit-user-drag: none; pointer-events: none; }
.client .m { font-family: var(--mono); }
.cl-top { position: relative; z-index: 10; display: flex; align-items: flex-start; gap: 34px; padding: 14px 16px; font-size: 14px; background: transparent; mix-blend-mode: normal; }
.cl-top .logo img { height: 30px; width: 42px; }
.cl-top { min-height: 96px; }
.cl-top .tilt { display: inline-block; transform: rotate(-40deg); transform-origin: left bottom; translate: 0 56px; margin: 0 40px 0 20px; white-space: nowrap; }
.cl-top nav { display: flex; gap: 0; flex-wrap: wrap; }
.cl-top nav .slash { font-style: normal; white-space: pre; opacity: .5; }
.cl-top .for { margin-left: auto; }
.intro { min-height: 62vh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 40px 16px; }
.intro h1 { font-family: var(--mono); font-weight: 400; font-size: clamp(40px, 7vw, 96px); line-height: .95; letter-spacing: -.01em; margin: 0; max-width: 1100px; }
.kw { display: flex; gap: 18px; flex-wrap: wrap; justify-content: center; margin-top: 12px; font-size: 13px; }
.kw span, .sl { position: relative; padding-left: 15px; }
.kw i, .sl::before { content: ''; position: absolute; left: 0; top: .62em; width: 11px; height: 1px; background: var(--text); transform: rotate(-40deg); }
.sl { display: inline-block; width: 15px; padding: 0; height: 1em; vertical-align: -2px; }
.client figure { margin: 0; }
.client figcaption { font-size: 13px; padding-top: 7px; }
.client figcaption b { font-weight: 500; }
.ph { position: relative; overflow: hidden; }
.ph img { width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .9s var(--curve, ease); }
.ph.in img { opacity: 1; }
.cover { padding: 0 16px; }
.cover .ph { height: 88vh; }
.client .pitch { max-width: 720px; margin: 90px auto; padding: 0 16px; font-size: 22px; line-height: 1.42; }
.gallery { padding: 0 16px 60px; }
.gallery .row { display: flex; gap: 20px; align-items: flex-start; margin-bottom: 70px; }
.gallery .row .pad { display: block; }
/* Footer like 100prcnt.film/about: big slanted line, four plain columns, fine print. */
.cl-foot { position: relative; overflow: hidden; padding: 28px 16px 28px; border-top: 1px solid var(--text); margin-top: 40px; }
.cl-foot .slant-wrap { position: relative; height: 260px; margin-bottom: 18px; }
.cl-foot .slant { position: absolute; left: 30%; bottom: 10px; font-family: var(--mono); font-size: clamp(26px, 3.6vw, 52px); line-height: 1;
  white-space: nowrap; transform: rotate(-24deg); transform-origin: left bottom; pointer-events: none; }
.cl-foot .cols { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; font-size: 14px; line-height: 1.5; max-width: 1100px; }
.cl-foot .cols b { font-family: var(--mono); font-weight: 400; font-size: 13px; letter-spacing: .02em; }
.cl-foot a { color: inherit; text-decoration: none; border-bottom: 1px solid transparent; }
.cl-foot a:hover { border-bottom-color: currentColor; }
.cl-foot .fine { position: relative; margin: 36px 0 0; font-size: 11px; color: var(--muted); max-width: 640px; }
/* "3 ♥ — Aemilia sees your picks" */
.likes-pill { position: fixed; right: 16px; bottom: 16px; z-index: 30; background: var(--text); color: #fff; padding: 9px 14px; font-size: 12px; border-radius: 999px; }
.likes-pill #likesN { color: #ff8fb1; }
.gate { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 24px 16px; }
.gate img { height: 70px; width: 98px; margin-bottom: 28px; }
.gate h1 { font-family: var(--mono); font-weight: 400; font-size: clamp(30px, 5vw, 60px); line-height: 1; margin: 0 0 10px; }
.gate form { display: flex; gap: 0; margin-top: 26px; width: 100%; max-width: 360px; }
.gate input { flex: 1; border: 1px solid var(--text); background: transparent; }
@media (max-width: 760px) {
  .cl-top { gap: 14px; font-size: 12px; }
  .cl-top nav { display: none; }
  .cl-top .tilt { margin: 20px 6px 0 18px; }
  .gallery .row { flex-direction: column; gap: 40px; margin-bottom: 40px; }
  .gallery figure { margin-top: 0 !important; width: 100%; }
  .gallery .row .pad { display: none; }
  .cl-foot .cols { grid-template-columns: 1fr 1fr; gap: 26px 18px; font-size: 13px; }
  .cl-foot .slant-wrap { height: 200px; }
  .cl-foot .slant { left: 6%; font-size: 24px; transform: rotate(-30deg); }
  .cover .ph { height: 70vh; }
  .client .pitch { font-size: 18px; margin: 50px auto; }
}

/* Search UI */
.hint { font-size: 11px; color: var(--muted); margin: 6px 0 4px; line-height: 1.35; }
.activebar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0 0 14px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.activebar .chip span { margin-left: 4px; opacity: .7; }
.activebar .clearall { margin-left: auto; font-size: 12px; text-decoration: underline; text-underline-offset: 3px; }
.searchnote { font-size: 12px; color: var(--muted); margin: 0 0 14px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.why { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.why span { font-size: 10px; background: #c1ffb8; padding: 1px 5px; }
#results { transition: opacity .2s; }

/* Sign-in */
body.pastel .top { display: none; }
body.pastel { height: 100vh; height: 100dvh; overflow: hidden; display: flex; flex-direction: column; }
body.pastel main { flex: 1; display: flex; padding: 0 16px; min-height: 0; }
.landing { min-height: 0; flex: 1; margin: 0 auto; padding: 0; justify-content: center; }
.landing .biglogo { width: 110px; height: 79px; margin-bottom: 30px; }
.landing h1 { font-size: clamp(48px, 9vw, 128px); }
.btn.google { display: inline-flex; align-items: center; gap: 10px; padding: 13px 20px; font-size: 14px; }
.landing .small { font-size: 12px; margin-top: 16px; }
.landing .blocks { display: flex; gap: 14px; align-items: flex-start; width: min(1100px, 100%); margin-top: 7vh; }
.landing .blocks span { display: block; min-width: 0; }
@media (max-width: 760px) { .landing .blocks span:nth-child(n+4) { display: none; } }
.hint .beta { background: #fbff79; color: var(--text); padding: 0 3px; }

/* Portfolio access */
.access { display: flex; flex-direction: column; gap: 6px; margin-bottom: 4px; }
.access .opt { display: flex; gap: 8px; align-items: center; margin: 0; font: 14px var(--sans); text-transform: none; color: var(--text); cursor: pointer; }
.mode[hidden] { display: none; }
.client .btn.google, .gate .btn.google { display: inline-flex; }
.pwshow { background: #fbff79; padding: 10px 12px; margin-bottom: 12px; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.pwshow .hint { flex-basis: 100%; margin: 0; }

/* ---- Admin on phones ---- */
.mobile-only { display: none; }
@media (max-width: 760px) {
  .demo-note { font-size: 10px; padding: 5px 8px; }
  .admin .top { flex-wrap: wrap; min-height: 0; padding: 10px 14px 0; gap: 8px 14px; align-items: center; }
  .admin .top .logo img { height: 28px; width: 39px; }
  .admin .top .who { display: none; }
  .admin .top nav { order: 3; width: calc(100% + 28px); margin: 0 -14px; padding: 8px 14px 10px; gap: 20px;
    flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; border-top: 1px solid var(--line); font-size: 13px; }
  .admin .top nav::-webkit-scrollbar { display: none; }
  .admin .top nav a { white-space: nowrap; }
  .admin .top nav a.on span { transform: none; translate: none; border-bottom: 2px solid var(--text); padding-bottom: 2px; }
  .mobile-only { display: inline; }
  .admin main h1 { font-size: 34px; margin: 10px 0 14px; }
  .stats { gap: 16px; margin: 4px 0 14px; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .stats div { font-size: 10px; white-space: nowrap; }
  .stats b { font-size: 22px; }
  .layout { gap: 10px; }
  .filters .hint { display: none; }
  .filters input[type=search] { font-size: 16px; } /* no iOS zoom on focus */
  .filters details { padding: 8px 0; }
  .filters .chips { max-height: 180px; }
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .card .meta { font-size: 11px; }
  .activebar { gap: 6px; }
  .activebar .clearall { margin-left: 0; }
  .two { gap: 18px; }
  .box { padding: 14px; }
  .cards { grid-template-columns: 1fr; }
  #picks { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .pick .ctl button { padding: 6px 10px; }
  input, select, textarea { font-size: 16px; }
}
.allfilters { border: 0 !important; padding: 0 !important; }
.allfilters > summary.mobile-summary { display: none; }
@media (max-width: 760px) {
  .allfilters > summary.mobile-summary { display: block; font: 13px var(--mono); text-transform: uppercase; padding: 10px 12px; border: 1px solid var(--text); margin-top: 10px; }
  .allfilters > summary.mobile-summary::after { content: '+'; float: right; }
  .allfilters[open] > summary.mobile-summary::after { content: '–'; }
}

/* "Better on a laptop" note — phones only, dismissible */
.laptop-note { display: none; }
@media (max-width: 760px) {
  .laptop-note { display: flex; align-items: center; gap: 10px; background: #ffea00; color: var(--text); padding: 9px 12px 9px 14px; font: 12px/1.35 var(--mono); }
  .laptop-note span { flex: 1; }
  .laptop-note button { background: none; border: 0; color: var(--text); font-size: 20px; line-height: 1; padding: 0 2px; }
}

/* Building portfolios on the go */
.addbar { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between; gap: 12px; background: #ffea00; padding: 10px 14px; margin: -8px 0 14px; font-size: 14px; }
.card .addbtn { position: absolute; z-index: 3; right: 6px; bottom: 58px; font: 12px var(--mono); padding: 8px 12px; background: var(--text); color: #fff; border: 0; }
.card .addbtn.added { background: var(--green); }
.pick .ctl.move button { min-width: 36px; }
.pick.moved { outline: 3px solid #ffea00; outline-offset: -3px; }
.share { flex-wrap: wrap; }
.share > * { flex: 0 0 auto; }
@media (min-width: 761px) { .pick .ctl.move { display: none; } }
@media (max-width: 760px) {
  .pick { cursor: default; }
  .pick .ctl button { padding: 8px 10px; font-size: 12px; }
  .addbar { font-size: 13px; }
  .addto select { min-width: 0; }
}
@media (max-width: 760px) { .clearside { display: none; } }

/* Rights conflicts in the builder */
.pick.conflict img { outline: 3px solid var(--red); outline-offset: -3px; }
.badge.blocked { left: auto; right: 6px; }

/* Client hearts: line heart centred in a white circle; pink and filled when on */
.client .heart { position: absolute; top: 12px; right: 12px; z-index: 2; width: 40px; height: 40px; border-radius: 50%; border: 0; padding: 0;
  display: grid; place-items: center; background: rgba(255,255,255,.94); color: var(--text); cursor: pointer; pointer-events: auto;
  box-shadow: 0 1px 6px rgba(0,0,0,.12); opacity: 0; transition: opacity .2s, transform .15s; }
.client .heart svg { display: block; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linejoin: round; transition: fill .15s, stroke .15s; }
.client .heart:hover { transform: scale(1.06); background: #fff; }
.client figure:hover .heart, .client .heart.on, .client .heart:focus-visible { opacity: 1; }
.client .heart.on { color: #e0245e; }
.client .heart.on svg { fill: #e0245e; stroke: #e0245e; }
.client .heart.pop svg { animation: heartpop .35s ease; }
@keyframes heartpop { 0% { transform: scale(1); } 40% { transform: scale(1.35); } 100% { transform: scale(1); } }
@media (hover: none) { .client .heart { opacity: 1; } }
svg.mini { display: inline-block; vertical-align: -2px; fill: none; stroke: currentColor; stroke-width: 2; }
.likes-pill svg.mini { fill: #ff8fb1; stroke: #ff8fb1; margin-right: 6px; }
.intro .howto { max-width: 560px; margin: 18px auto 0; font-size: 12px; text-transform: none; color: var(--muted); text-align: center; line-height: 1.5; }
.intro .howto svg.mini { color: var(--text); }

/* Flags, performance, activity */
.flaglist { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.flagrow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 6px 0; border-bottom: 1px dotted var(--line); font-size: 13px; }
.flagrow input[type=text] { flex: 1 1 160px; padding: 6px 8px; font-size: 13px; }
.flagrow.done .chip.flag { color: var(--green); text-decoration: line-through; }
.stats.perf { margin: 14px 0 6px; }
.stats.perf b { font-size: 22px; }
.hearted { color: #e0245e; }
.feed { list-style: none; padding: 0; margin: 0 0 22px; }
.feed li { display: grid; grid-template-columns: 28px 1fr; align-items: start; padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 14px; line-height: 1.45; }
.feed li.new { font-weight: 500; }
.feed .k { display: flex; padding-top: 1px; color: var(--text); }
.feed .t { min-width: 0; overflow-wrap: anywhere; }
.feed .k-like { color: #e0245e; }

/* Bulk select */
.card .selbox { position: absolute; z-index: 3; top: 6px; right: 6px; width: 26px; height: 26px; background: rgba(255,255,255,.9); display: grid; place-items: center; opacity: 0; transition: opacity .15s; cursor: pointer; margin: 0; }
.card .selbox input { margin: 0; pointer-events: none; }
.card:hover .selbox, .card.picked .selbox { opacity: 1; }
.card.picked img { outline: 3px solid var(--text); outline-offset: -3px; }
@media (hover: none) { .card .selbox { opacity: 1; } }
.card .badge.warn { right: 38px; }
.bulkbar { position: sticky; top: 0; z-index: 25; display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; background: var(--text); color: #fff; padding: 10px 14px; margin: 0 0 14px; font-size: 13px; }
.bulkbar[hidden] { display: none; }
.bulkbar .grp { display: flex; gap: 6px; align-items: center; }
.bulkbar select, .bulkbar input[type=text] { width: auto; max-width: 200px; padding: 6px 28px 6px 8px; font-size: 12px; }
.bulkbar button { background: #fff; color: var(--text); border-color: #fff; padding: 6px 10px; font-size: 11px; }
.bulkbar button.ghost { background: transparent; color: #fff; }
.bulkbar .link { color: #fff; }
label.inline { display: flex; gap: 8px; align-items: center; text-transform: none; font: 12px var(--sans); color: var(--text); margin: 10px 0 0; }
/* Tag editing */
.tagedit { margin-top: 12px; }
.tagrow { display: flex; gap: 8px; align-items: center; padding: 5px 0; border-bottom: 1px dotted var(--line); font-size: 13px; }
.tagrow b { flex: 0 0 120px; font-weight: 500; }
.tagrow input[type=text] { flex: 1; padding: 6px 8px; font-size: 13px; }
.tagrow.add { border-bottom: 0; padding-top: 10px; }

/* Folders review */
.folderrow { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--line); }
.folderrow .src { flex: 1 1 100%; display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 13px; }
.folderrow input[type=text] { flex: 1 1 160px; padding: 7px 9px; font-size: 14px; }
.folderrow.todo { background: #fffbd6; padding: 10px; }
/* Start here */
.starthere { position: relative; background: var(--panel); padding: 14px 40px 6px 16px; margin: 0 0 16px; font-size: 14px; }
.starthere ol { margin: 6px 0 8px; padding-left: 18px; }
.starthere li { margin: 3px 0; }
.starthere button { position: absolute; top: 6px; right: 8px; background: none; border: 0; color: var(--text); font-size: 20px; padding: 0 4px; }
.errlog pre { white-space: pre-wrap; font-size: 11px; max-height: 240px; overflow: auto; background: var(--panel); padding: 8px; }
.errlog td { font-size: 13px; }

/* ---- Portfolio analytics ---- */
.analytics { margin-top: 56px; border-top: 1px solid var(--text); padding-top: 8px; }
.analytics h2 { margin-top: 30px; }
.table-wrap { overflow-x: auto; }
table.who td { vertical-align: top; font-size: 13px; }
table.who .bar { height: 3px; background: var(--line); margin-top: 6px; width: 90px; }
table.who .bar i { display: block; height: 100%; background: var(--text); }
.hthumbs { display: flex; flex-wrap: wrap; gap: 4px; max-width: 260px; }
.hthumbs img { width: 40px; height: 50px; object-fit: cover; }
.landed { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 12px; }
.landed a { color: inherit; text-decoration: none; opacity: .55; }
.landed a.hit { opacity: 1; }
.landed img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.landed span { display: block; font-size: 11px; margin-top: 4px; }
/* ---- Email previews ---- */
.two.even { grid-template-columns: 1fr 1fr; }
iframe.mailprev { width: 100%; height: 760px; border: 1px solid var(--line); background: #fff; }
@media (max-width: 760px) { .two.even { grid-template-columns: 1fr; } iframe.mailprev { height: 640px; } }
/* What's new */
ul.news { margin: 6px 0 10px; padding-left: 18px; font-size: 14px; line-height: 1.5; }
ul.news li { margin-bottom: 4px; }
ul.services { margin: 8px 0 0; padding-left: 18px; font-size: 13px; line-height: 1.5; }
.release { border-top: 1px solid var(--line); margin-top: 22px; padding-top: 4px; }
.release h2 { margin-bottom: 2px; }
.top nav a.has-new span::after { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #ffea00; border: 1px solid var(--text); margin-left: 5px; vertical-align: 2px; }
/* Settings: two rows of three — Team, then System */
.cards.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1100px) { .cards.three { grid-template-columns: 1fr 1fr; } }
@media (max-width: 760px) { .cards.three { grid-template-columns: 1fr; } }
h2.sethead { margin: 34px 0 12px; font-size: 13px; font-family: var(--mono); text-transform: uppercase; letter-spacing: .06em; }
h1 + h2.sethead { margin-top: 8px; }
ul.people { list-style: none; padding: 0; margin: 8px 0 0; font-size: 14px; }
ul.people li { padding: 8px 0; border-top: 1px solid var(--line); line-height: 1.45; }
ul.people .mono { font-size: 12px; }
ul.people li { display: block !important; }
ul.people li b { font-weight: 500; }
/* Settings: Team and access (one row per person) */
.cards.three .span2 { grid-column: span 2; }
@media (max-width: 1100px) { .cards.three .span2 { grid-column: 1 / -1; } }
.team { border-bottom: 1px solid var(--line); margin-top: 10px; }
.member { border-top: 1px solid var(--line); margin: 0 !important; padding: 0 !important; }
.member > summary { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1.3fr) 80px 60px; gap: 12px; align-items: start;
  padding: 10px 0; list-style: none; font: 14px/1.4 var(--sans) !important; text-transform: none !important; cursor: pointer; }
.member > summary::-webkit-details-marker { display: none; }
.member .who b { font-weight: 500; }
.member .mail { font-size: 12px; word-break: break-all; }
.member .role { font: 11px var(--mono); text-transform: uppercase; }
.member .edit { font-size: 11px; text-align: right; text-decoration: underline; }
.member[open] > summary .edit { text-decoration: none; }
.member-body { padding: 4px 0 14px; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
.grid2 p { grid-column: 1 / -1; margin: 10px 0 0; }
.add { margin-top: 14px !important; border-top: 0 !important; }
@media (max-width: 760px) {
  .member > summary { grid-template-columns: 1fr auto; }
  .member .mail { grid-column: 1; }
  .member .role { grid-row: 1; grid-column: 2; }
  .member .edit { grid-column: 2; }
  .grid2 { grid-template-columns: 1fr; }
}
table.rlog td { font-size: 13px; vertical-align: top; }
.chist { grid-column: 1 / -1; margin-top: 4px; }
.chist h4 { margin: 10px 0 4px; }
.note { border-left: 3px solid #ffea00; padding: 8px 12px; background: var(--panel); font-size: 14px; }
.cl-foot a.wa { display: inline-flex; align-items: center; gap: 7px; margin-top: 10px; padding: 8px 12px; border: 1px solid var(--text) !important; font: 12px var(--mono); letter-spacing: .04em; }
.cl-foot a.wa:hover { background: var(--text); color: #fff; }
/* How the AI works */
textarea.rules, pre.rules { width: 100%; min-height: 200px; font: 13px/1.55 var(--mono); white-space: pre-wrap; }
pre.rules { min-height: 0; background: var(--panel); padding: 12px; margin: 8px 0 0; max-height: 420px; overflow: auto; }
table.checks td { vertical-align: top; font-size: 13px; padding: 8px 6px 8px 0; }
table.checks select { width: auto; padding: 5px 8px; }
details.base { margin: 0 0 10px; }
details.base > summary { font: 13px var(--mono); text-transform: uppercase; cursor: pointer; }
.testres { margin-top: 18px; border-top: 1px solid var(--text); padding-top: 8px; }
.testres .trow { display: grid; grid-template-columns: 90px 1fr; gap: 14px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.testres .trow img { width: 90px; aspect-ratio: 4 / 5; object-fit: cover; }
.tstrip { display: grid; grid-template-columns: repeat(auto-fill, minmax(70px, 1fr)); gap: 6px; }
.tstrip figure { margin: 0; position: relative; }
.tstrip img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.tstrip figure.diff { outline: 2px solid var(--text); }
.tstrip figcaption { position: absolute; left: 0; bottom: 0; background: var(--text); color: #fff; font: 10px var(--mono); padding: 1px 4px; }
/* ---- Settings polish: calmer text, fact lists, link rows ---- */
.admin .box { padding: 20px 22px 22px; }
.admin .box h3 { font: 12px var(--mono); text-transform: uppercase; letter-spacing: .06em; margin: 0 0 14px; }
.admin .box p, .admin .box .muted, .admin .box li { font-size: 14px; line-height: 1.5; }
.admin .box .big { font-size: 26px; line-height: 1.15; margin: 0 0 12px; }
h2.sethead { display: flex; align-items: center; gap: 12px; margin: 40px 0 14px; color: var(--muted); font-size: 12px; }
h2.sethead::after { content: ""; flex: 1; height: 1px; background: var(--line); }
h1 + h2.sethead { margin-top: 6px; }
dl.facts { display: grid; grid-template-columns: max-content 1fr; gap: 6px 14px; margin: 4px 0 16px; font-size: 14px; }
dl.facts dt { font: 11px/1.9 var(--mono); text-transform: uppercase; color: var(--muted); }
dl.facts dd { margin: 0; }
nav.links { display: flex; flex-direction: column; margin-top: 16px; border-top: 1px solid var(--line); }
nav.links a { display: flex; justify-content: space-between; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--line); font: 12px var(--mono); text-transform: uppercase; letter-spacing: .03em; color: var(--text); text-decoration: none; }
nav.links a::after { content: "→"; }
nav.links a:hover { background: var(--panel); }
nav.links .muted { margin-left: auto; text-transform: none; font-size: 11px; }
.admin .box details > summary { font: 12px var(--mono); text-transform: uppercase; letter-spacing: .03em; }
.admin .box .stats b { font-size: 34px; }
.pickimg { display: grid; grid-template-columns: repeat(auto-fill, minmax(56px, 1fr)); gap: 6px; margin: 4px 0 10px; }
.pickimg label { position: relative; margin: 0; cursor: pointer; }
.pickimg input { position: absolute; opacity: 0; }
.pickimg img, .pickimg .none { display: flex; align-items: center; justify-content: center; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border: 2px solid transparent; font: 10px var(--mono); text-transform: uppercase; text-align: center; background: var(--panel); }
.pickimg input:checked + img, .pickimg input:checked + .none { border-color: var(--text); outline: 2px solid #ffea00; outline-offset: -4px; }
.gate .or { margin: 18px 0 6px; text-transform: none; }
.gate form.again { display: block; margin-top: 14px; font-size: 13px; }
.gate form.again button.link { background: none; border: 0; padding: 0; text-decoration: underline; cursor: pointer; font: inherit; color: inherit; width: auto; }
/* ---- Still page ---- */
.crumbs { margin-bottom: 6px; }
.still { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 36px; align-items: start; }
.still-media { position: sticky; top: 90px; }
.still-media .frame { background: var(--panel); display: flex; justify-content: center; }
.still-media .frame img { max-height: calc(100vh - 190px); width: auto; max-width: 100%; object-fit: contain; }
.still-actions { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; margin-top: 12px; }
.still-actions > *, .still-actions select, .still-actions button, .still-actions .btn { height: 44px; box-sizing: border-box; margin: 0; }
.still-actions .btn { display: inline-flex; align-items: center; padding: 0 18px; white-space: nowrap; }
.still-actions .addto { display: grid; grid-template-columns: minmax(0, 1fr) auto; }
.still-actions select { border: 1px solid var(--text); border-right: 0; padding: 0 12px; font: 13px var(--mono); text-transform: uppercase; min-width: 0; }
.still-actions .addto button { padding: 0 18px; white-space: nowrap; }
.still-info h1 { margin-top: 0 !important; }
.still-info .meta { margin: -6px 0 16px; }
.still-info .box { margin-top: 16px; }
.still-info .box h4 { margin: 16px 0 6px; font: 11px var(--mono); text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.still-info .perf { margin: 4px 0 6px; }
.inline { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.inline select, .inline input { flex: 1 1 160px; width: auto; margin: 0; }
.inline button { flex: 0 0 auto; }
.override { margin-top: 16px; }
.tagedit .chips { margin-bottom: 4px; }
.tagedit .inline { margin-top: 14px; }
@media (max-width: 900px) {
  .still { grid-template-columns: 1fr; gap: 20px; }
  .still-media { position: static; }
  .still-media .frame img { max-height: 70vh; }
  .still-actions { grid-template-columns: 1fr; }
}
.still-info .flagrow { display: grid; gap: 8px; padding: 12px 0; border-bottom: 1px dashed var(--line); }
.still-info .flagrow .fhead { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; font-size: 13px; }
.still-info .flagrow .fhead .link { margin-left: auto; }
.still-info .flagrow .inline input { height: 34px; font-size: 13px; }
.still-info .flagrow .inline button { height: 34px; }
.still-info .flagrow.done { opacity: .6; }
.tagedit .chip { cursor: pointer; }
.tagedit .chip.on { color: #fff !important; }
.tagedit .chip.ai.on { background: #fff; color: var(--text) !important; outline: 1px dashed var(--text); outline-offset: -1px; }
.tagedit .chip:hover { background: var(--panel); }
.tagedit .chip.on:hover { opacity: .85; background: var(--text); }
.tagedit .chip.ai.on:hover { background: var(--panel); }
h3.sidehead { font: 12px var(--mono); text-transform: uppercase; letter-spacing: .06em; margin: 28px 0 8px; color: var(--muted); }
.tagedit .chip.ai.on { background: #ececec; }
/* ---- Page heads, tabs ---- */
.pagehead { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 22px; margin-bottom: 14px; }
.pagehead h1 { margin-bottom: 0 !important; }
.pagehead .counts { font-size: 12px; text-transform: uppercase; color: var(--muted); margin: 0; }
.pagehead .counts b { color: var(--text); font-weight: 400; }
nav.tabs { display: flex; flex-wrap: wrap; gap: 0 26px; border-bottom: 1px solid var(--line); margin: 6px 0 22px; }
nav.tabs a { padding: 10px 0; font: 12px var(--mono); text-transform: uppercase; letter-spacing: .04em; color: var(--muted); text-decoration: none; border-bottom: 2px solid transparent; margin-bottom: -1px; }
nav.tabs a.on { color: var(--text); border-bottom-color: var(--text); }
nav.tabs a span { display: inline-block; min-width: 18px; padding: 0 5px; margin-left: 4px; background: var(--panel); text-align: center; }
nav.tabs a.on span { background: var(--text); color: #fff; }
/* ---- Library ---- */
.starthere { background: #fff; border: 1px solid var(--line); border-left: 3px solid #ffea00; }
.filters label.inline { display: flex; gap: 8px; align-items: center; font: 13px var(--sans); text-transform: none; color: var(--text); margin: 10px 0 4px; }
.filters label.inline input { width: auto; margin: 0; flex: 0 0 auto; }
.card .rbadge { position: absolute; left: 8px; top: 8px; z-index: 2; background: rgba(255,255,255,.92); color: var(--text); font: 10px var(--mono); text-transform: uppercase; letter-spacing: .04em; padding: 2px 6px; }
.card .rbadge.blocked { background: var(--text); color: #fff; }
/* ---- Rights inbox ---- */
.camp { border-top: 1px solid var(--line); padding: 22px 0 26px; }
.camp-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin-bottom: 14px; }
.camp-head h2 { margin: 0; }
.camp-head .meta { flex-basis: 100%; margin: 2px 0 0; font-size: 12px; color: var(--muted); }
.camp-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 420px); gap: 28px; align-items: start; }
.camp .thumbs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.camp .thumbs img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.camp h4 { margin: 16px 0 6px; font: 11px var(--mono); text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.rform .g2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }
.rform .g3 { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 0 12px; }
.rform details { margin: 12px 0 4px; border-top: 1px solid var(--line); padding-top: 10px; }
.rform details > summary { font: 12px var(--mono); text-transform: uppercase; cursor: pointer; }
.rform button { width: 100%; }
@media (max-width: 900px) { .camp-body { grid-template-columns: 1fr; } .rform .g3 { grid-template-columns: 1fr; } }
/* ---- Portfolios ---- */
.sidecol { display: grid; gap: 16px; align-content: start; }
.mailbox p.row { gap: 8px; margin: 14px 0 0; }
.mailbox .btn { padding: 10px 14px; font-size: 12px; }
.filters label.inline { flex-wrap: nowrap; align-items: flex-start; }
.filters label.inline input { margin-top: 2px; }
.camp .thumbs { grid-template-columns: repeat(6, 1fr); }
@media (max-width: 760px) { .camp .thumbs { grid-template-columns: repeat(3, 1fr); } }
.g2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }
@media (max-width: 600px) { .g2 { grid-template-columns: 1fr; } }
/* ---- Photographers ---- */
.phrow > summary { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.2fr) minmax(0, 1.2fr) 90px; }
.phrow .ph-stat { font-size: 12px; line-height: 1.5; }
.phrow .ph-stat .muted { font: 10px var(--mono); text-transform: uppercase; }
.phgrid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 300px); gap: 24px; }
.phgrid h4 { margin: 0 0 6px; font: 11px var(--mono); text-transform: uppercase; color: var(--muted); }
.remind1 { margin-top: 10px; }
.remind1 button { width: 100%; }
@media (max-width: 900px) { .phgrid { grid-template-columns: 1fr; } .phrow > summary { grid-template-columns: 1fr auto; } .phrow .ph-stat { grid-column: 1; } }
.cl-foot { border-top: 0; padding-top: 0; }
.cl-foot .cols { border-top: 1px solid var(--text); padding-top: 24px; }
.cl-foot .cols { max-width: none; }
/* Deterrents: blur while the page is in the background; nothing to print */
.client .ph img { transition: filter .15s; }
@media print {
  .client .ph img, .client .gallery, .client .cover { visibility: hidden !important; }
  .client .intro::after { content: "Private portfolio — not for print."; display: block; margin-top: 30px; font: 14px var(--mono); }
}
/* Footer tucks under the gallery: the slanted line overlaps the last row a little, no big gap */
.client { overflow-x: hidden; }
.gallery { padding-bottom: 0; }
.gallery .row:last-child { margin-bottom: 0; }
.cl-foot { overflow: visible; margin-top: 0; }
.cl-foot .slant-wrap { height: 170px; margin: -90px 0 14px; z-index: 3; pointer-events: none; }
.cl-foot .slant { color: #fff; mix-blend-mode: difference; }
@media (max-width: 760px) { .cl-foot .slant-wrap { height: 130px; margin-top: -60px; } }
.cl-foot .slant { color: var(--text); mix-blend-mode: normal; text-shadow: 0 0 1px #fff, 0 0 10px rgba(255,255,255,.85); }
.cl-foot .slant-wrap { height: 200px; margin: -60px 0 14px; }
@media (max-width: 760px) { .cl-foot .slant-wrap { height: 150px; margin-top: -40px; } }
/* "100% CONFIDENTIAL": straight, big, right above the contacts */
.cl-foot .slant-wrap { height: auto; margin: 56px 0 14px; }
.cl-foot .slant { position: static; transform: none; white-space: normal; font-size: clamp(30px, 6vw, 84px); line-height: .95; text-shadow: none; }
@media (max-width: 760px) { .cl-foot .slant-wrap { height: auto; margin-top: 36px; } .cl-foot .slant { transform: none; font-size: 30px; } }
/* Heart sits bottom-right on each still */
.client .heart { top: auto; bottom: 12px; right: 12px; }
h4.rel { margin: 14px 0 4px; font: 11px var(--mono); text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
ul.news.minor li { font-size: 13px; color: var(--muted); }
html.plainfont .admin, html.plainfont body.admin { --sans: 'Inter Tight', 'Helvetica Neue', Arial, sans-serif; --mono: 'Courier Prime', 'Courier New', monospace; }
.fontpick { display: grid; gap: 6px; margin: 4px 0 6px; }
/* ---- Phones: nothing wider than the screen ---- */
.cards > *, .two > *, .still > *, .camp-body > *, .phgrid > * { min-width: 0; }
@media (max-width: 760px) {
  .admin main table { display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .admin main table td, .admin main table th { white-space: nowrap; }
  .admin main table td:last-child { white-space: normal; min-width: 180px; }
  .member .mail, .facts dd { overflow-wrap: anywhere; }
}
.newp { display: flex; gap: 6px; flex-wrap: wrap; }
.newp[hidden] { display: none; }
.newp input { width: auto; flex: 1 1 140px; margin: 0; }
.still-actions .addto .newp { grid-column: 1 / -1; margin-top: 8px; }
.still-actions .addto .newp input { height: 40px; }
.bulkbar .newp input { height: 34px; font-size: 13px; }
/* Builder on phones: share / send / settings first, stills below; quick jump bar */
nav.jump { display: none; }
@media (max-width: 760px) {
  .builder { display: flex; flex-direction: column; }
  .builder > div:first-child { display: contents; }
  .builder > div:first-child > h1 { order: 1; }
  .builder > div:first-child > p.uc { order: 2; }
  .builder > div:first-child > nav.jump { order: 3; display: flex; gap: 8px; margin: 4px 0 14px; position: sticky; top: 0; z-index: 20; background: #fff; padding: 8px 0; }
  .builder > div:last-child { order: 4; }
  .builder > div:first-child > :not(h1):not(p.uc):not(nav.jump) { order: 5; }
  nav.jump a { flex: 1; text-align: center; padding: 9px 0; border: 1px solid var(--text); font: 12px var(--mono); text-transform: uppercase; color: var(--text); text-decoration: none; }
  #share, #stills, #psettings { scroll-margin-top: 70px; }
}
@media (max-width: 760px) { .builder > div:first-child > nav.jump { position: static; } #share, #stills, #psettings { scroll-margin-top: 110px; } }
.mailcheck { color: var(--red); font-size: 12px; margin: 6px 0 0; }
.soon { background: #ffea00; color: var(--text); padding: 0 5px; font-size: 11px; }
.searchnote.readq { margin-top: -8px; }
.briefbar { margin: 0 0 16px; }
.card .team { font-size: 10px; color: var(--muted); margin-top: 3px; }

/* Still page: "More like this" as one row of two buttons, then Add to portfolio. */
.still-actions { grid-template-columns: minmax(0, 1fr); }
.still-actions .morelike { display: grid; grid-template-columns: auto 1fr 1fr; gap: 10px; align-items: center; height: auto; }
.still-actions .morelike .uc { font: 11px var(--mono); color: var(--muted); letter-spacing: .04em; }
.still-actions .morelike .btn { justify-content: center; padding: 0 12px; }
@media (max-width: 760px) { .still-actions .morelike { grid-template-columns: 1fr 1fr; } .still-actions .morelike .uc { grid-column: 1 / -1; } }

/* Bulk bar: "Clear" is a text link, not a white box. */
.bulkbar button.link { background: none; border: 0; color: #fff; padding: 6px 2px; font-size: 12px; }
.bulkbar button.link:hover { color: #ffea00; background: none; }

/* Checkboxes: a crisp square, black when on with a white tick; yellow focus ring. */
input[type=checkbox] {
  appearance: none; -webkit-appearance: none; flex: 0 0 auto;
  width: 18px; height: 18px; margin: 0; border: 1px solid var(--text); border-radius: 0; background: var(--bg);
  display: inline-grid; place-content: center; cursor: pointer; vertical-align: -4px;
  transition: background .12s, border-color .12s, transform .08s;
}
input[type=checkbox]::before {
  content: ''; width: 10px; height: 6px; border: solid #fff; border-width: 0 0 2px 2px;
  transform: rotate(-45deg) translate(1px, -1px) scale(0); transition: transform .12s ease-out;
}
input[type=checkbox]:checked { background: var(--text); }
input[type=checkbox]:checked::before { transform: rotate(-45deg) translate(1px, -1px) scale(1); }
input[type=checkbox]:hover { box-shadow: 0 0 0 3px rgba(255, 234, 0, .55); }
input[type=checkbox]:focus-visible { outline: none; box-shadow: 0 0 0 3px #ffea00; }
input[type=checkbox]:active { transform: scale(.92); }
input[type=checkbox]:disabled { opacity: .4; cursor: default; box-shadow: none; }
label.inline, .filters label.inline { gap: 10px; align-items: center; cursor: pointer; }
.filters label.inline input { margin-top: 0; }
/* The tick on a library card: same square on a white chip, yellow when picked. */
.card .selbox { width: 30px; height: 30px; background: rgba(255, 255, 255, .92); }
.card.picked .selbox { background: #ffea00; }
.card.picked .selbox input { border-color: var(--text); }
/* A chip with a tick inside (photographers on the brief form): the tick replaces the slash. */
label.chip:has(input[type=checkbox]) { display: inline-flex; gap: 8px; align-items: center; cursor: pointer; }
label.chip:has(input[type=checkbox])::before { display: none; }
label.chip input[type=checkbox] { width: 16px; height: 16px; }
label.opt:has(input[type=checkbox]) { display: flex; gap: 10px; align-items: flex-start; text-transform: none; cursor: pointer; }
label.opt:has(input[type=checkbox]) input { margin-top: 1px; }
label.inline:has(input[type=checkbox]) { flex-wrap: nowrap; align-items: flex-start; }
label.inline:has(input[type=checkbox]) input { margin-top: 1px; }

/* Phones: the bulk bar stacks — each group a full row, nothing past the screen edge. */
@media (max-width: 760px) {
  .bulkbar { gap: 8px; }
  .bulkbar .grp { flex: 1 1 100%; flex-wrap: wrap; gap: 6px; }
  .bulkbar select, .bulkbar input[type=text] { flex: 1 1 0; width: 0; min-width: 0; max-width: none; height: 36px; }
  .bulkbar .grp button { flex: 0 0 auto; height: 36px; white-space: nowrap; }
  .bulkbar input[name=note] { order: 3; flex: 1 1 100%; }
  .bulkbar .newp { flex: 1 1 100%; order: 3; }
}
/* "Also looked for" / "Left out": small chips, so they don't push the results down. */
.searchnote.readq { gap: 4px 6px; }
.searchnote.readq .chip { font-size: 11px; }
.searchnote.readq .uc { font-size: 11px; }
/* Radio buttons to match: a round outline, a black dot when on. */
input[type=radio] {
  appearance: none; -webkit-appearance: none; flex: 0 0 auto;
  width: 18px; height: 18px; margin: 0; border: 1px solid var(--text); border-radius: 50%; background: var(--bg);
  display: inline-grid; place-content: center; cursor: pointer; vertical-align: -4px; transition: box-shadow .12s;
}
input[type=radio]::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--text); transform: scale(0); transition: transform .12s ease-out; }
input[type=radio]:checked::before { transform: scale(1); }
input[type=radio]:hover { box-shadow: 0 0 0 3px rgba(255, 234, 0, .55); }
input[type=radio]:focus-visible { outline: none; box-shadow: 0 0 0 3px #ffea00; }

/* Agreements: what was sold or promised, per still or per shoot. */
.agreeform .kinds { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 8px; margin: 4px 0 14px; }
.agreeform .kind { display: flex; gap: 10px; align-items: flex-start; border: 1px solid var(--line); padding: 10px 12px; margin: 0; cursor: pointer; text-transform: none; color: var(--text); font: 13px/1.35 var(--sans); background: var(--bg); }
.agreeform .kind:has(input:checked) { border-color: var(--text); box-shadow: inset 0 0 0 1px var(--text); }
.agreeform .kind input { margin-top: 2px; }
.agreeform .kind b { display: block; font-weight: 600; }
.agreeform .kind small { display: block; color: var(--muted); font-size: 12px; margin-top: 2px; }
.agreeform [hidden] { display: none !important; }
.agreeform h4 { margin-top: 0; }
ul.agreements { list-style: none; padding: 0; margin: 0 0 10px; }
ul.agreements li { padding: 9px 0; border-top: 1px solid var(--line); font-size: 13px; line-height: 1.45; position: relative; padding-right: 64px; }
ul.agreements li.past { opacity: .55; }
ul.agreements .agdel { position: absolute; right: 0; top: 9px; margin: 0; }
.chip.ag-buyout { background: var(--text); color: #fff !important; }
.chip.ag-exclusive { background: #ffea00; color: var(--text) !important; }
.chip.ag-embargo { background: var(--red); color: #fff !important; }
.chip.ag-licence, .chip.ag-restriction { background: var(--panel); }
details.addag { margin-top: 8px; }
details.addag > summary { cursor: pointer; font: 12px var(--mono); text-transform: uppercase; letter-spacing: .04em; padding: 8px 0; }
.agthumbs { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 18px; align-items: center; }
.agthumbs img { width: 64px; height: 80px; object-fit: cover; }
.agtable td:first-child { min-width: 260px; }
.access.purpose .opt { align-items: flex-start; }
.access.purpose .opt small { font-size: 12px; }
@media (max-width: 760px) { ul.agreements li { padding-right: 0; } ul.agreements .agdel { position: static; display: inline; margin-left: 6px; } }
table.rlog tr.bad td { background: #fff4f4; }

/* ---- Videos (photographer profile, portfolio builder, client page) ---- */
.vgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 18px; margin-top: 14px; }
.vcard .vthumb { position: relative; display: block; aspect-ratio: 16 / 9; background: var(--panel); overflow: hidden; }
.vcard .vthumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vthumb .play, .vplay .play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 54px; height: 54px; border-radius: 50%; background: rgba(0,0,0,.6); color: #fff; display: grid; place-items: center; font-size: 20px; padding-left: 4px; box-sizing: border-box; }
.vthumb .dur, .vplay .dur { position: absolute; right: 8px; bottom: 8px; background: rgba(0,0,0,.6); color: #fff; font-size: 11px; padding: 2px 6px; }
.vcard .vform input { margin: 6px 0 0; }
.vcard .hint { margin: 4px 0 0; }

/* Client page: videos among the stills, and the photographer filter (sticky, bottom-left; hearts pill is bottom-right) */
figure.vid .ph { position: relative; }
figure.vid .vplay { position: absolute; inset: 0; width: 100%; height: 100%; background: transparent; border: 0; padding: 0; cursor: pointer; }
figure.vid .vplay .play { transition: transform .2s ease; }
figure.vid .vplay:hover .play { transform: translate(-50%, -50%) scale(1.08); }
figure.vid .ph.playing iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
figure[hidden], .gallery .row[hidden] { display: none !important; }
.phfilter { position: fixed; left: 16px; bottom: 16px; z-index: 30; display: flex; gap: 4px; flex-wrap: wrap; max-width: calc(100vw - 200px);
  background: rgba(255,255,255,.92); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); padding: 5px; border-radius: 999px; box-shadow: 0 1px 8px rgba(0,0,0,.08); }
.phfilter button { background: transparent; color: var(--text); border: 0; border-radius: 999px; padding: 7px 14px; font-size: 12px; cursor: pointer; text-transform: none; letter-spacing: 0; min-height: 0; }
.phfilter button.on { background: var(--text); color: #fff; }
@media (max-width: 700px) {
  /* One row that scrolls sideways; the hearts pill sits above it; the page ends above the bar. */
  .phfilter { left: 8px; right: 8px; bottom: 10px; max-width: none; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .phfilter::-webkit-scrollbar { display: none; }
  .phfilter button { flex: 0 0 auto; white-space: nowrap; }
  body:has(.phfilter) .likes-pill { bottom: 62px; }
  body:has(.phfilter) .cl-foot { padding-bottom: 70px; }
}

/* Brief deck drop zone */
.dropzone { display: block; position: relative; border: 2px dashed var(--line); border-radius: 12px; padding: 26px 16px; text-align: center; cursor: pointer; margin: 6px 0 12px; transition: border-color .15s, background .15s; }
.dropzone.over, .dropzone:hover { border-color: var(--text); background: var(--panel); }
.dropzone input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; }
.dropzone .dz-text { pointer-events: none; text-transform: none; letter-spacing: 0; }

/* Photographer profile on a phone: the service-account address wraps, its Copy button stays a button */
.copy { display: inline-flex; gap: 8px; align-items: flex-start; max-width: 100%; }
.copy .mono { word-break: break-all; }
.copy button { flex: 0 0 auto; writing-mode: horizontal-tb; white-space: nowrap; }
@media (max-width: 700px) {
  .copy { display: flex; flex-wrap: wrap; }
  .box table.rlog { display: block; overflow-x: auto; }
}

/* Card buttons always fit their card: they wrap and share the width (three on a video card, To top on one line). */
.pick .ctl { flex-wrap: wrap; }
.pick .ctl button { flex: 1 1 auto; min-width: 0; white-space: nowrap; }
@media (max-width: 760px) {
  .pick .ctl { gap: 5px; }
  .pick .ctl button { padding: 9px 4px; font-size: 11px; letter-spacing: 0; }
}

.dz-status { margin: 4px 0 10px; font-size: 12px; }
.dz-status.err { color: var(--red); }

/* Help page: one column of short numbered steps. */
.help { max-width: 760px; }
.help section { border-top: 1px solid var(--line); padding: 18px 0 6px; }
.help h2 { margin: 0 0 8px; }
.help ol { margin: 0 0 10px; padding-left: 22px; }
.help li { margin: 0 0 8px; line-height: 1.5; }
/* The header fits one line down to 1024 px: below 1100 the signed-in address gives way to Help and Sign out. */
.top .who { white-space: nowrap; }
@media (max-width: 1100px) { .top .who .email { display: none; } }
/* Settings → AI: the Claude key form; the "go back" action reads as a link. */
.keyform .inline { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 6px; }
.keyform .inline input[type=date] { flex: 0 0 auto; width: auto; }
button.linkish { background: none; border: 0; padding: 0; color: inherit; text-decoration: underline; font: inherit; cursor: pointer; }