/* =============================================================
   DrXp Alley — the directory, artist profiles, the hire form, and the
   commission pages on both sides (client account and artist dashboard).

   Same language as /partners: near-black, Anton headings, marker kickers,
   halftone and stripes. Alley leans on the yellow where /partners leans on
   the orange, so the two read as siblings rather than the same page.

   Availability colours are fixed everywhere they appear:
   green = open, yellow = waitlist, grey = closed.
   ============================================================= */

.al { position: relative; padding: 148px 0 96px; isolation: isolate; }

/* ---------------- backdrop ---------------- */
.al-bg { position: fixed; inset: 0; z-index: -1; pointer-events: none; contain: strict; background: var(--bg); }
.al-bg > * { position: absolute; }
.al-glow { width: 80vmax; height: 80vmax; border-radius: 50%; filter: blur(60px); opacity: .45; }
.al-glow-a { top: -36vmax; right: -20vmax; background: radial-gradient(closest-side, rgba(248, 206, 0, .34), transparent 70%); }
.al-glow-b { bottom: -44vmax; left: -24vmax; background: radial-gradient(closest-side, rgba(255, 107, 53, .32), transparent 70%); }
.al-dots {
  inset: 0;
  background-image: radial-gradient(rgba(240, 236, 224, .14) 1px, transparent 1.4px);
  background-size: 20px 20px;
  mask-image: radial-gradient(120% 90% at 50% 0%, #000 18%, transparent 70%);
  -webkit-mask-image: radial-gradient(120% 90% at 50% 0%, #000 18%, transparent 70%);
  opacity: .5;
}
.al-stripes {
  top: 0; left: -10%; right: -10%; height: 300px;
  background: repeating-linear-gradient(65deg, rgba(248, 206, 0, .12) 0 12px, transparent 12px 40px);
  mask-image: linear-gradient(180deg, #000, transparent);
  -webkit-mask-image: linear-gradient(180deg, #000, transparent);
}

/* ---------------- directory hero ---------------- */
.al-hero { margin-bottom: 44px; }
.al-title { font-size: clamp(3.4rem, 11vw, 8.5rem); line-height: .86; letter-spacing: -.01em; }
.al-title em {
  font-style: normal; color: var(--bg); background: var(--ylw);
  padding: 0 .12em; margin-left: -.04em; display: inline-block;
  transform: rotate(1.4deg); box-shadow: 8px 8px 0 rgba(0, 0, 0, .45);
}
.al-lede { max-width: 60ch; margin-top: 26px; color: var(--tx2); font-size: 1.05rem; line-height: 1.75; }

/* Discover → Hire → Build → Merch: what Alley is, in four steps. */
.al-steps { list-style: none; margin: 30px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; max-width: 900px; }
.al-steps li { padding: 14px 16px; border: 2px solid var(--line2); background: rgba(22, 22, 21, .72); }
.al-steps b { display: block; font-family: var(--head); font-weight: 400; font-size: 1.35rem; letter-spacing: .02em; color: var(--ylw); }
.al-steps span { display: block; margin-top: 4px; font-size: .86rem; line-height: 1.5; color: var(--tx2); }

/* ---------------- filters ---------------- */
.al-filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 26px; }
.al-chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px;
  border: 2px solid var(--line2); background: rgba(22, 22, 21, .7); color: var(--tx2);
  font-size: .76rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  transition: border-color .2s, color .2s, background-color .2s;
}
.al-chip:hover { border-color: var(--ylw); color: var(--tx); }
.al-chip[aria-current="true"] { background: var(--ylw); border-color: var(--ylw); color: #141100; }
.al-count { margin: -10px 0 22px; color: var(--tx3); font-size: .9rem; }

/* ---------------- directory cards ---------------- */
.al-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 22px; }
.al-card {
  position: relative; display: flex; flex-direction: column; min-width: 0;
  background: var(--panel); border: 2px solid var(--line2);
  transition: transform .25s cubic-bezier(.22, 1, .36, 1), border-color .2s, box-shadow .25s;
}
.al-card:hover { transform: translateY(-4px); border-color: var(--ylw); box-shadow: 8px 8px 0 rgba(248, 206, 0, .16); }
.al-card-cover { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--panel2); }
.al-card-cover img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s; }
.al-card:hover .al-card-cover img { transform: scale(1.04); }
.al-card-initials { display: grid; place-items: center; height: 100%; font-family: var(--head); font-size: 4rem; color: var(--line2); }
.al-card-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; background: var(--line); }
.al-card-strip img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; }
.al-card-body { display: flex; flex-direction: column; gap: 8px; padding: 16px 18px 18px; flex: 1; }
.al-card-name { font-family: var(--head); font-size: 1.7rem; line-height: 1; color: var(--tx); letter-spacing: .01em; }
.al-card-head { color: var(--tx2); font-size: .92rem; line-height: 1.5; }
.al-card-foot { margin-top: auto; padding-top: 8px; display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px; }
.al-from { font-size: .8rem; color: var(--tx3); }
.al-from b { font-family: var(--head); font-weight: 400; font-size: 1.25rem; color: var(--tx); margin-left: 3px; }
/* The whole card is the link; the stretched ::after is what makes it so. */
.al-card-link { color: inherit; }
.al-card-link::after { content: ''; position: absolute; inset: 0; z-index: 1; }

/* ---------------- badges ---------------- */
.al-avail {
  position: absolute; left: 12px; top: 12px; z-index: 2;
  display: inline-flex; align-items: center; gap: 7px; padding: 6px 10px;
  background: rgba(10, 10, 10, .86); border: 1px solid var(--line2);
  font-size: .68rem; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; color: var(--tx);
}
.al-avail::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--tx3); }
.al-avail.is-open::before { background: var(--grn); box-shadow: 0 0 0 3px rgba(163, 230, 53, .2); }
.al-avail.is-waitlist::before { background: var(--ylw); }
/* Limited is still taking work (green); full is waiting on a slot (yellow). */
.al-avail.is-limited::before { background: var(--grn); }
.al-avail.is-full::before { background: var(--ylw); }
.al-avail.is-inline { position: static; }

.al-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.al-tag { padding: 4px 9px; border: 1px solid var(--line2); color: var(--tx2); font-size: .72rem; font-weight: 700; }

.al-stars { display: inline-flex; align-items: baseline; gap: 5px; color: var(--ylw); font-size: .86rem; font-weight: 800; }
.al-stars small { color: var(--tx3); font-weight: 600; }

/* ---------------- profile ---------------- */
.al-top { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 28px; align-items: end; margin-bottom: 26px; }
.al-avatar { width: clamp(110px, 16vw, 168px); aspect-ratio: 1; border: 3px solid var(--ylw); box-shadow: 8px 8px 0 rgba(0, 0, 0, .5); background: var(--panel2); overflow: hidden; transform: rotate(-2deg); }
.al-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.al-avatar span { display: grid; place-items: center; height: 100%; font-family: var(--head); font-size: 3.4rem; color: var(--tx3); }
.al-name { font-size: clamp(2.8rem, 8vw, 6rem); line-height: .9; }
.al-headline { margin-top: 12px; color: var(--tx2); font-size: 1.08rem; line-height: 1.6; max-width: 62ch; }
.al-socials { display: flex; gap: 8px; margin-top: 14px; }
.al-socials a { display: grid; place-items: center; width: 36px; height: 36px; border: 2px solid var(--line2); color: var(--tx2); transition: border-color .2s, color .2s; }
.al-socials a:hover { border-color: var(--ylw); color: var(--ylw); }
.al-socials svg { width: 17px; height: 17px; fill: currentColor; }

/* The five facts under the name. */
.al-facts { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 30px; }
.al-fact {
  display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px;
  border: 2px solid var(--line2); background: rgba(22, 22, 21, .78);
  font-size: .76rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--tx2);
}
.al-fact b { font-family: var(--head); font-weight: 400; font-size: 1.15rem; letter-spacing: .02em; color: var(--tx); }
.al-fact.is-open { border-color: rgba(163, 230, 53, .5); color: var(--grn); }
.al-fact.is-waitlist { border-color: rgba(248, 206, 0, .5); color: var(--ylw); }
.al-fact.is-closed { color: var(--tx3); }
.al-fact.is-limited { border-color: rgba(163, 230, 53, .5); color: var(--grn); }
.al-fact.is-full { border-color: rgba(248, 206, 0, .5); color: var(--ylw); }

/* Putting your name down, when there is no Hire button. */
.al-wait { margin-top: 16px; }
.al-wait.is-on p { color: var(--grn); font-weight: 700; }
.al-wait form { display: inline; }
.al-wait-off { margin-top: 8px; padding: 0; border: 0; background: none; cursor: pointer; font-family: var(--body); font-size: .85rem; color: var(--tx3); text-decoration: underline; }
.al-wait-off:hover { color: var(--tx2); }
.al-wait-merch { margin-top: 14px; color: var(--tx3); font-size: .9rem; }
.al-fact.is-merch { border-color: rgba(255, 107, 53, .5); color: var(--acc); }
.al-hire-cta { margin-left: auto; }

/* Section tabs, pinned under the site header while you scroll the profile. */
.al-tabs {
  position: sticky; top: 76px; z-index: 5;
  display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none;
  margin: 0 0 34px; padding: 6px; border: 2px solid var(--line2);
  background: rgba(10, 10, 10, .92); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.al-tabs::-webkit-scrollbar { display: none; }
.al-tabs a { flex: none; padding: 10px 16px; color: var(--tx2); font-size: .78rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; }
.al-tabs a:hover { color: var(--tx); background: var(--panel); }
.al-tabs a.is-here { color: #141100; background: var(--ylw); }

.al-sec { margin-bottom: 64px; scroll-margin-top: 150px; }
.al-sec-head { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; margin-bottom: 20px; }
.al-sec-head h2 { font-size: clamp(2rem, 4.6vw, 3rem); line-height: 1; }
.al-sec-head h2 em { font-style: normal; color: var(--ylw); }
.al-sec-head p { color: var(--tx3); font-size: .92rem; }
.al-empty { padding: 34px 22px; border: 2px dashed var(--line2); color: var(--tx2); text-align: center; line-height: 1.7; }

/* Portfolio: a masonry of columns, so pieces keep their own shape. */
.al-port { columns: 3 260px; column-gap: 14px; }
.al-piece { display: block; width: 100%; margin: 0 0 14px; break-inside: avoid; padding: 0; border: 2px solid var(--line); background: var(--panel2); cursor: zoom-in; transition: border-color .2s; }
.al-piece:hover { border-color: var(--ylw); }
.al-piece img { width: 100%; height: auto; display: block; }
.al-piece figcaption { padding: 8px 10px; color: var(--tx2); font-size: .82rem; text-align: left; }

.al-about { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 28px; align-items: start; }
.al-about-text p { color: var(--tx2); font-size: 1.02rem; line-height: 1.8; margin-bottom: 14px; }
.al-about-side { display: grid; gap: 12px; padding: 20px; border: 2px solid var(--line); background: var(--panel); }
.al-about-side dt { font-size: .68rem; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; color: var(--tx3); }
.al-about-side dd { margin: 3px 0 0; color: var(--tx); font-weight: 700; }

/* Services */
.al-services { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
.al-svc { display: flex; flex-direction: column; gap: 12px; padding: 22px; background: var(--panel); border: 2px solid var(--line2); border-top: 4px solid var(--ylw); }
.al-svc h3 { font-size: 1.5rem; line-height: 1.05; }
.al-svc-price { font-size: .8rem; color: var(--tx3); font-weight: 700; }
.al-svc-price b { font-family: var(--head); font-weight: 400; font-size: 1.9rem; color: var(--tx); margin-left: 4px; }
.al-svc p { color: var(--tx2); line-height: 1.65; font-size: .95rem; }
.al-svc ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.al-svc li { position: relative; padding-left: 22px; color: var(--tx2); font-size: .9rem; line-height: 1.5; }
.al-svc li::before { content: '✓'; position: absolute; left: 0; color: var(--grn); font-weight: 900; }
.al-svc-meta { display: flex; flex-wrap: wrap; gap: 14px; color: var(--tx3); font-size: .82rem; font-weight: 700; }
.al-svc .btn { margin-top: auto; text-align: center; }
.al-note { margin-top: 16px; color: var(--tx3); font-size: .86rem; line-height: 1.65; max-width: 72ch; }

/* Reviews */
.al-rating { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 18px; }
.al-rating div { padding: 12px 16px; border: 2px solid var(--line2); background: var(--panel); }
.al-rating b { display: block; font-family: var(--head); font-weight: 400; font-size: 1.7rem; color: var(--ylw); }
.al-rating span { font-size: .7rem; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; color: var(--tx3); }
.al-reviews { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.al-review { padding: 18px 20px; border: 2px solid var(--line); background: var(--panel); }
.al-review p { color: var(--tx2); line-height: 1.7; margin: 10px 0; white-space: pre-line; }
.al-review small { color: var(--tx3); font-size: .8rem; }

/* Lightbox (alley.js) */
.al-lb { position: fixed; inset: 0; z-index: 300; display: grid; place-items: center; padding: 40px 16px; background: rgba(5, 5, 5, .94); }
.al-lb[hidden] { display: none; }
.al-lb img { max-width: min(1400px, 100%); max-height: calc(100vh - 110px); object-fit: contain; box-shadow: 0 30px 80px rgba(0, 0, 0, .6); }
.al-lb p { margin-top: 12px; color: var(--tx2); text-align: center; }
.al-lb button { position: absolute; top: 16px; right: 16px; width: 44px; height: 44px; border: 2px solid var(--line2); background: var(--panel); color: var(--tx); font-size: 1.4rem; cursor: pointer; }
.al-lb button:hover { border-color: var(--ylw); color: var(--ylw); }

/* ---------------- hire form ---------------- */
.al-name em { font-style: normal; color: var(--ylw); }
.al-hire-title { margin-bottom: 26px; }
/* apply.css styles every other input type; a date field needs the same. */
.f-field input[type=date] {
  width: 100%; background: var(--panel); border: 2px solid var(--line2); color: var(--tx);
  font-family: var(--body); font-size: 1rem; padding: 14px 16px; color-scheme: dark;
}
.f-field input[type=date]:focus { outline: none; border-color: var(--acc); }
.al-hire { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(260px, .8fr); gap: 30px; align-items: start; }
.al-hire-form { padding: 28px; background: var(--panel); border: 2px solid var(--line2); border-top: 4px solid var(--ylw); }
.al-services-pick { display: grid; gap: 8px; }
.al-pick { display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px; border: 2px solid var(--line2); background: var(--bg2); cursor: pointer; transition: border-color .2s; }
.al-pick:hover { border-color: var(--tx3); }
.al-pick input { margin-top: 4px; accent-color: var(--ylw); }
.al-pick:has(input:checked) { border-color: var(--ylw); }
.al-pick b { display: block; color: var(--tx); }
.al-pick small { display: block; color: var(--tx3); margin-top: 2px; }
.al-side { position: sticky; top: 100px; display: grid; gap: 14px; }
.al-side-card { padding: 20px; background: var(--panel); border: 2px solid var(--line); }
.al-side-card h3 { font-size: 1.15rem; margin-bottom: 10px; }
.al-side-card ol { margin: 0 0 0 18px; display: grid; gap: 8px; color: var(--tx2); font-size: .92rem; line-height: 1.55; }
.al-side-card p { color: var(--tx2); font-size: .9rem; line-height: 1.65; }
.al-who { display: flex; align-items: center; gap: 12px; }
.al-who img, .al-who span { width: 54px; height: 54px; object-fit: cover; border: 2px solid var(--ylw); flex: none; }
.al-who span { display: grid; place-items: center; font-family: var(--head); font-size: 1.4rem; color: var(--tx3); background: var(--panel2); }
.al-who b { display: block; font-family: var(--head); font-weight: 400; font-size: 1.4rem; }
.al-who small { color: var(--tx3); }

/* =============================================================
   Commission pages — shared by the client's account, the artist's
   dashboard and admin.
   ============================================================= */

.cm-pill { display: inline-block; font-weight: 900; font-size: .66rem; letter-spacing: .12em; text-transform: uppercase; padding: 6px 10px; border: 2px solid var(--line2); color: var(--tx2); white-space: nowrap; }
.cm-pill.is-requested, .cm-pill.is-quoted { border-color: var(--ylw); color: var(--ylw); }
.cm-pill.is-active { border-color: var(--blu); color: #7fb0ff; }
.cm-pill.is-delivered { border-color: var(--acc); color: var(--acc); }
.cm-pill.is-completed { border-color: var(--grn); color: var(--grn); }
.cm-pill.is-declined, .cm-pill.is-cancelled, .cm-pill.is-refunded { border-color: var(--red); color: #ff7b83; }
.cm-pill.is-yours { background: var(--ylw); border-color: var(--ylw); color: #141100; }

/* The list */
.cm-list { display: grid; gap: 12px; }
.cm-row {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; align-items: center;
  padding: 16px 18px; background: var(--panel); border: 2px solid var(--line); color: inherit;
  transition: border-color .2s, transform .2s;
}
.cm-row:hover { border-color: var(--ylw); transform: translateY(-2px); }
.cm-row b { display: block; font-size: 1.05rem; color: var(--tx); }
.cm-row small { display: block; margin-top: 3px; color: var(--tx3); font-size: .84rem; }
.cm-row-side { display: grid; justify-items: end; gap: 6px; }
.cm-row-side strong { font-family: var(--head); font-weight: 400; font-size: 1.25rem; color: var(--tx); }
.cm-group { margin: 28px 0 12px; font-size: .74rem; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; color: var(--tx3); }
.cm-group:first-child { margin-top: 0; }

/* The progress track: requested → quoted → paid → delivered → complete */
/* ---- commission tracker (partials/commission-track) ----
   One card, the same for client and artist. Everything here is built on the
   shared colour tokens, which the Dash redefines for its light mode — its
   amber and green are already darkened for a white card — so the tracker
   reads in the account pages and in both Dash themes without a second set
   of rules. --cmt is the tone of the current status. */
.cmt { --cmt: var(--tx2); margin-bottom: 22px; }
.cmt--work      { --cmt: var(--acc); }
.cmt--attention { --cmt: var(--ylw); }
.cmt--done      { --cmt: var(--grn); }
.cmt--ended     { --cmt: var(--tx3); }

.cmt-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 18px; flex-wrap: wrap; }
/* Prefixed with .cmt: these are <p>s inside a .cm-card, and `.cm-card p`
   (0,1,1) outranks a bare class — without it the status went grey. */
.cmt .cmt-kick { margin: 0 0 4px; font-size: .66rem; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; color: var(--tx3); }
.cmt .cmt-tag { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 1.35rem; font-weight: 900; line-height: 1.15; color: var(--tx); }
.cmt-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--cmt); flex: 0 0 auto; box-shadow: 0 0 0 4px color-mix(in srgb, var(--cmt) 22%, transparent); }
.cmt .cmt-since { margin: 4px 0 0; font-size: .8rem; color: var(--tx3); }

/* The countdown. Calm until it is close; then it says so in colour AND in
   words ("Due tomorrow", "2 days overdue"), because colour alone tells a
   colour-blind artist nothing. */
.cmt-due { text-align: right; padding: 10px 14px; border-radius: 12px; border: 2px solid var(--line2); }
.cmt .cmt-count { margin: 0; font-size: 1.05rem; font-weight: 900; color: var(--tx); }
.cmt-due--urgent  { border-color: var(--ylw); }
.cmt .cmt-due--urgent .cmt-count { color: var(--ylw); }
.cmt-due--today, .cmt-due--overdue { border-color: var(--red); background: color-mix(in srgb, var(--red) 10%, transparent); }
.cmt .cmt-due--today .cmt-count, .cmt .cmt-due--overdue .cmt-count { color: var(--red); }

.cmt-rail { list-style: none; display: grid; grid-template-columns: repeat(6, 1fr); margin: 22px 0 6px; padding: 0; }
.cmt-rail li { position: relative; padding-top: 28px; text-align: center; color: var(--tx3); font-size: .78rem; font-weight: 800; }
.cmt-rail li::before { content: ''; position: absolute; top: 8px; left: -50%; width: 100%; height: 3px; background: var(--line2); }
.cmt-rail li:first-child::before { content: none; }
.cmt-rail li::after { content: ''; position: absolute; top: 0; left: 50%; width: 19px; height: 19px; margin-left: -9.5px; border-radius: 50%; background: var(--panel, var(--bg)); border: 3px solid var(--line2); }
.cmt-rail li.is-done { color: var(--tx2); }
.cmt-rail li.is-done::before, .cmt-rail li.is-now::before { background: var(--cmt); }
.cmt-rail li.is-done::after { background: var(--cmt); border-color: var(--cmt); }
.cmt-rail li.is-now { color: var(--tx); }
.cmt-rail li.is-now::after { border-color: var(--cmt); box-shadow: 0 0 0 5px color-mix(in srgb, var(--cmt) 22%, transparent); }
.cmt-rail small { display: block; margin-top: 2px; font-size: .68rem; font-weight: 700; color: var(--cmt); }

.cmt-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 28px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }
.cmt-list { margin: 0; }
.cmt-list > div { display: flex; justify-content: space-between; gap: 14px; padding: 7px 0; border-bottom: 1px dashed var(--line); font-size: .88rem; }
.cmt-list > div:last-child { border-bottom: 0; }
.cmt-list dt { color: var(--tx3); font-weight: 700; }
.cmt-list dd { margin: 0; color: var(--tx); text-align: right; overflow-wrap: anywhere; }
.cmt-list dd a { color: var(--acc); font-weight: 800; }
.cmt-cur { font-size: .7rem; font-weight: 800; letter-spacing: .08em; color: var(--tx3); }
.cmt-mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .8rem; }

/* The stage and countdown on a list row. */
.cm-row-track { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.cm-stage, .cm-due { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: .66rem; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; border: 1px solid var(--line2); color: var(--tx2); }
.cm-stage.is-work      { border-color: var(--acc); color: var(--acc); }
.cm-stage.is-attention { border-color: var(--ylw); color: var(--ylw); }
.cm-stage.is-done      { border-color: var(--grn); color: var(--grn); }
.cm-due.is-urgent  { border-color: var(--ylw); color: var(--ylw); }
.cm-due.is-today, .cm-due.is-overdue { border-color: var(--red); background: var(--red); color: #fff; }

.cm-check { display: flex; align-items: flex-start; gap: 9px; margin-top: 12px; font-size: .86rem; color: var(--tx2); cursor: pointer; }
.cm-check input { margin-top: 3px; accent-color: var(--acc); flex: 0 0 auto; }
.cm-check strong { color: var(--tx); }

/* A WIP in the thread: marked so it stands out from chatter at a glance. */
.cm-msg.is-wip, .cm-msg.is-changes { position: relative; }
.cm-kind { display: inline-block; margin-bottom: 6px; padding: 3px 9px; border-radius: 999px; font-size: .64rem; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.cm-kind.is-wip     { background: color-mix(in srgb, var(--acc) 18%, transparent); color: var(--acc); }
.cm-kind.is-changes { background: color-mix(in srgb, var(--ylw) 20%, transparent); color: var(--ylw); }

.cm-layout { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(280px, 1fr); gap: 22px; align-items: start; }
.cm-main, .cm-aside { display: grid; gap: 18px; min-width: 0; }

.cm-card { padding: 22px; background: var(--panel); border: 2px solid var(--line); }
.cm-card h3 { font-size: 1.2rem; margin-bottom: 12px; }
.cm-card.is-action { border-color: var(--ylw); background: linear-gradient(150deg, rgba(248, 206, 0, .1), transparent 60%), var(--panel); }
.cm-card p { color: var(--tx2); line-height: 1.7; }
.cm-brief { white-space: pre-line; color: var(--tx2); line-height: 1.75; }
.cm-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 18px; margin: 0; }
.cm-facts dt { font-size: .66rem; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; color: var(--tx3); }
.cm-facts dd { margin: 3px 0 0; color: var(--tx); font-weight: 700; }

.cm-money { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 8px; }
.cm-money li { display: flex; justify-content: space-between; gap: 12px; color: var(--tx2); font-size: .94rem; }
.cm-money li.is-total { padding-top: 10px; border-top: 1px solid var(--line2); color: var(--tx); font-weight: 800; }
.cm-money li.is-total span:last-child { font-family: var(--head); font-weight: 400; font-size: 1.5rem; color: var(--grn); }
.cm-price { font-family: var(--head); font-size: 2.6rem; line-height: 1; color: var(--tx); margin: 4px 0 10px; }

.cm-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 14px; }
.cm-actions form { margin: 0; }
.cm-link { background: none; border: 0; padding: 0; color: var(--tx3); font: inherit; font-size: .88rem; text-decoration: underline; cursor: pointer; }
.cm-link:hover { color: var(--tx); }
.cm-test { margin-top: 12px; padding: 12px 14px; border: 2px dashed var(--ylw); color: var(--tx2); font-size: .86rem; line-height: 1.6; }
.cm-test b { color: var(--ylw); }

/* The thread */
.cm-thread { display: grid; gap: 12px; }
.cm-msg { max-width: 86%; padding: 14px 16px; background: var(--bg2); border: 2px solid var(--line); }
.cm-msg.is-me { justify-self: end; border-color: rgba(248, 206, 0, .35); background: rgba(248, 206, 0, .05); }
.cm-msg.is-admin { justify-self: center; border-color: rgba(255, 107, 53, .45); }
.cm-msg.is-system { justify-self: center; max-width: 100%; padding: 4px 0; border: 0; background: none; color: var(--tx3); font-size: .82rem; text-align: center; }
.cm-msg-who { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 6px; font-size: .72rem; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; color: var(--tx3); }
.cm-msg-body { color: var(--tx); line-height: 1.65; white-space: pre-line; word-wrap: break-word; }
.cm-files { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.cm-file { display: inline-flex; align-items: center; gap: 8px; padding: 8px 10px; border: 1px solid var(--line2); background: var(--panel); color: var(--tx2); font-size: .82rem; max-width: 100%; }
.cm-file:hover { border-color: var(--ylw); color: var(--tx); }
.cm-file.is-delivery { border-color: var(--grn); color: var(--grn); }
.cm-file img { width: 56px; height: 56px; object-fit: cover; display: block; }
.cm-file span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.cm-compose textarea, .cm-card textarea, .cm-card input[type=text], .cm-card input[type=url], .cm-card input[type=number], .cm-card input[type=date], .cm-card select {
  width: 100%; background: var(--bg2); border: 2px solid var(--line2); color: var(--tx);
  font-family: var(--body); font-size: 1rem; padding: 12px 14px;
}
.cm-card textarea { min-height: 96px; resize: vertical; line-height: 1.6; }
.cm-card textarea:focus, .cm-card input:focus, .cm-card select:focus { outline: none; border-color: var(--ylw); }
.cm-card label { display: block; margin: 12px 0 6px; font-size: .7rem; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; color: var(--tx3); }
.cm-card input[type=file] { color: var(--tx2); font-size: .88rem; }
.cm-row3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.cm-hint { margin-top: 6px; color: var(--tx3); font-size: .82rem; line-height: 1.55; }

/* Stars on the review form */
.cm-stars { display: flex; gap: 4px; flex-direction: row-reverse; justify-content: flex-end; }
.cm-stars input { position: absolute; opacity: 0; width: 0; height: 0; }
.cm-stars label { margin: 0; font-size: 1.7rem; line-height: 1; color: var(--line2); cursor: pointer; letter-spacing: 0; }
.cm-stars input:checked ~ label, .cm-stars label:hover, .cm-stars label:hover ~ label { color: var(--ylw); }
.cm-stars input:focus-visible + label { outline: 2px solid var(--ylw); outline-offset: 2px; }
.cm-score { margin-bottom: 12px; }
.cm-score > span { display: block; margin-bottom: 4px; font-size: .7rem; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; color: var(--tx3); }

/* The artist's commission money, kept apart from merch */
.cm-earn { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 24px; }
.cm-earn div { padding: 18px 20px; border: 2px solid var(--line); background: var(--panel); }
.cm-earn span { display: block; font-size: .68rem; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; color: var(--tx3); }
.cm-earn b { display: block; margin-top: 8px; font-family: var(--head); font-weight: 400; font-size: 2rem; line-height: 1; color: var(--tx); }
.cm-earn small { display: block; margin-top: 8px; font-size: .8rem; color: var(--tx2); line-height: 1.5; }
.cm-earn .is-owed { border-color: var(--grn); }
.cm-earn .is-owed b { color: var(--grn); }

/* The artist's profile editor */
.ap-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.ap-piece { position: relative; border: 2px solid var(--line); background: var(--panel2); }
.ap-piece img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; }
.ap-piece.is-hidden img { opacity: .35; }
.ap-piece small { display: block; padding: 6px 8px; color: var(--tx2); font-size: .76rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ap-piece form { position: absolute; top: 6px; right: 6px; }
.ap-piece button { width: 30px; height: 30px; border: 1px solid var(--line2); background: rgba(10, 10, 10, .85); color: var(--tx); cursor: pointer; }
.ap-piece button:hover { border-color: var(--red); color: var(--red); }
.ap-flag { position: absolute; left: 6px; top: 6px; padding: 3px 7px; background: var(--red); color: var(--tx); font-size: .64rem; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.ap-checks { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 6px 16px; }
.ap-checks label, .ap-toggle { display: flex !important; align-items: center; gap: 9px; margin: 0 !important; padding: 6px 0; font-size: .92rem !important; font-weight: 600 !important; letter-spacing: 0 !important; text-transform: none !important; color: var(--tx2) !important; cursor: pointer; }
.ap-checks input, .ap-toggle input { width: 17px; height: 17px; accent-color: var(--ylw); }
.ap-svc { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 14px 0; border-top: 1px solid var(--line); }
.ap-svc:first-child { border-top: 0; padding-top: 0; }
.ap-svc b { color: var(--tx); }
.ap-svc small { display: block; color: var(--tx3); margin-top: 2px; }
.ap-svc-do { display: flex; gap: 8px; align-items: center; }
.ap-off { color: var(--red); font-size: .72rem; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; margin-left: 6px; }

@media (max-width: 960px) {
  .al-hire, .cm-layout, .al-about { grid-template-columns: 1fr; }
  .al-side { position: static; }
  .al-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .al { padding-top: 120px; }
  .al-top { grid-template-columns: 1fr; gap: 18px; }
  .al-hire-cta { margin-left: 0; width: 100%; text-align: center; }
  .al-facts { gap: 8px; }
  .al-fact { padding: 8px 10px; font-size: .64rem; gap: 6px; }
  .al-fact b { font-size: 1rem; }
  .al-tabs { top: 64px; }
  .al-hire-form { padding: 20px 16px; }
  .cmt-rail li { font-size: .62rem; }
  .cmt-rail small { font-size: .58rem; }
  .cmt-grid { grid-template-columns: 1fr; }
  .cmt-due { text-align: left; }
  .cm-row { grid-template-columns: 1fr; }
  .cm-row-side { justify-items: start; grid-auto-flow: column; justify-content: start; align-items: center; }
  .cm-msg { max-width: 100%; }
  .cm-row3, .cm-earn, .cm-facts { grid-template-columns: 1fr; }
  .dash-head-actions { width: 100%; }
  .dash-head-actions .btn { flex: 1 1 auto; white-space: normal; text-align: center; }
}
@media (prefers-reduced-motion: reduce) {
  .al-card, .al-card-cover img, .cm-row { transition: none; }
}

/* =============================================================
   Inside the DrXp Dash.

   The Dash has its own look: rounded cards, and the partner's own colour
   (--acc, set per partner by DashTheme) where the public Alley uses yellow.
   It also has a light mode, which redefines the tokens but not the few
   colours drawn on top of yellow here — so those follow --acc and --on-acc
   instead. Everything below is scoped to body.dash-page and leaves the
   public pages and the client's account as they are.
   ============================================================= */
body.dash-page .cm-card,
body.dash-page .cm-earn div,
body.dash-page .cm-row { border-radius: 18px; border-width: 1px; background: var(--bg2); }
body.dash-page .cm-msg { border-radius: 14px; border-width: 1px; }
body.dash-page .cm-msg.is-system { border-radius: 0; }
body.dash-page .cm-file,
body.dash-page .ap-piece { border-radius: 12px; overflow: hidden; }
body.dash-page .cm-card textarea,
body.dash-page .cm-card input[type=text],
body.dash-page .cm-card input[type=url],
body.dash-page .cm-card input[type=number],
body.dash-page .cm-card select { border-radius: 12px; border-width: 1px; background: var(--panel); }
body.dash-page .cm-card h3 { font-size: 19px; letter-spacing: .02em; text-transform: uppercase; }

body.dash-page .cm-card.is-action {
  background: radial-gradient(120% 140% at 0% 0%, color-mix(in srgb, var(--acc) 14%, transparent), transparent 62%), var(--bg2);
  border-color: color-mix(in srgb, var(--acc) 45%, transparent);
}
body.dash-page .cm-row:hover { border-color: var(--acc); }
body.dash-page .cm-pill.is-yours { background: var(--acc); border-color: var(--acc); color: var(--on-acc, #0A0A0A); }
/* The tracker needs nothing extra in the Dash: its tones are the shared
   tokens, which the Dash already redefines for its own themes. */
body.dash-page .cm-msg.is-me { border-color: color-mix(in srgb, var(--acc) 40%, transparent); background: color-mix(in srgb, var(--acc) 6%, var(--bg2)); }
body.dash-page .cm-card textarea:focus,
body.dash-page .cm-card input:focus,
body.dash-page .cm-card select:focus { border-color: var(--acc); }
body.dash-page .cm-file:hover { border-color: var(--acc); }
body.dash-page .ap-checks input,
body.dash-page .ap-toggle input { accent-color: var(--acc); }

/* Light mode: the pale blue and pink read on ink, not on paper. */
body.dash-page.is-light .cm-pill.is-active { border-color: var(--blu); color: var(--blu); }
body.dash-page.is-light .cm-pill.is-declined,
body.dash-page.is-light .cm-pill.is-cancelled,
body.dash-page.is-light .cm-pill.is-refunded { color: #9B1C24; }
body.dash-page.is-light .ap-piece button { background: rgba(255, 255, 255, .92); color: var(--tx); }

/* ---------------- where an artist stands with the Alley ----------------
   The banner at the top of their Alley profile in the Dash. One block that
   changes its words and its edge with the state, rather than several that
   could disagree — see AlleyArtist::reviewState. */
.al-review {
  margin: 0 0 24px; padding: 22px 24px; border-radius: 18px;
  background: var(--bg2); border: 1px solid var(--line);
}
.al-review h2 { font-size: clamp(1.25rem, 2.6vw, 1.7rem); margin-bottom: 8px; }
.al-review p { max-width: 68ch; color: var(--tx2); line-height: 1.65; }
.al-review p + p, .al-review form { margin-top: 14px; }
.al-review-note { font-size: .86rem; color: var(--tx3); }
.al-review-said {
  padding: 12px 14px; border-radius: 12px; color: var(--tx);
  background: var(--panel); border-left: 3px solid var(--ylw);
}
/* Never opted in, and sent back, are the two that want an eye on them. */
.al-review.is-none    { border-color: color-mix(in srgb, var(--acc) 40%, transparent); }
.al-review.is-pending { border-color: color-mix(in srgb, var(--ylw) 40%, transparent); }
.al-review.is-declined{ border-color: color-mix(in srgb, var(--ylw) 55%, transparent); }
.al-review.is-live    { border-color: color-mix(in srgb, var(--grn) 45%, transparent); }

@media (max-width: 620px) {
  .al-review { padding: 18px 16px; }
  .al-review form .btn { width: 100%; text-align: center; }
}

/* ---------------- a studio job: who is on it (partials/studio-split) ---------------- */
.st-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.st-split-form { display: grid; gap: 10px; margin-top: 12px; }
.st-split-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(170px, 210px); gap: 6px 8px; align-items: center; }
.st-split-row > b { grid-column: 1 / -1; font-size: .92rem; color: var(--tx); }
.cm-card .st-split-row input[type=text] { margin: 0; }
/* The share: a unit picker (% or $ flat) beside the amount — the unit is
   never drawn on top of the number. */
.st-share { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px; min-width: 0; }
.st-share > input[type=hidden] + .st-amount { grid-column: 1 / -1; }
.st-kind select, body.dash-page .cm-card .st-kind select { width: auto; min-width: 84px; height: 100%; min-height: 44px; margin: 0; padding: 0 28px 0 12px; border-radius: 12px; border: 1px solid var(--line2); background-color: var(--db-inset, var(--panel)); color: var(--tx); font: inherit; font-weight: 800; }
.st-amount input { width: 100%; box-sizing: border-box; text-align: right; font-variant-numeric: tabular-nums; }
.st-split-sum { margin: 2px 0 0; padding: 10px 12px; border-radius: 12px; background: var(--db-inset, var(--panel)); color: var(--tx2); font-size: 13px; line-height: 1.5; }
.st-split-sum b { color: var(--tx); }
.st-split-sum.is-over { color: var(--red, #ff5a5a); border: 1px solid color-mix(in srgb, var(--red, #ff5a5a) 55%, transparent); }
.st-split-sum[hidden] { display: none; }
@media (max-width: 560px) {
  .st-split-row { grid-template-columns: 1fr; }
}
.cm-card .st-split-form label { margin: 0; }
.st-split-form .btn { justify-self: start; margin-top: 4px; }
.st-split-money { margin-top: 14px; }
.st-split-money li span:first-child { min-width: 0; overflow-wrap: anywhere; }

/* ---------------- licensing (App\Models\License) ---------------- */
.al-use { border: 0; padding: 0; margin-inline: 0; min-width: 0; }
.al-use legend { padding: 0; margin-bottom: 8px; }

/* What an artist offers: on their page, and beside the brief. */
.al-rights { list-style: none; margin: 0 0 10px; padding: 0; display: grid; gap: 6px; }
.al-rights li { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--line); color: var(--tx2); font-size: .92rem; }
.al-rights li b { color: var(--tx); white-space: nowrap; }
.al-rights-table { margin-bottom: 22px; padding: 18px 20px; border: 2px solid var(--line); background: var(--panel); }
.al-rights-table h3 { margin-bottom: 10px; }
.al-rights-table p { color: var(--tx3); font-size: .88rem; line-height: 1.6; }

/* The rights on a quote, and the agreement. */
.lc-quote { margin: 16px 0 4px; padding: 14px 16px; border: 1px dashed var(--line2); }
.lc-asked { margin: 0 0 10px; color: var(--tx2); font-size: .92rem; }
.lc-number { margin: -4px 0 12px; font-family: var(--head); font-size: 1.3rem; letter-spacing: .02em; color: var(--acc); }
.lc-facts { margin-bottom: 14px; }
.lc-facts .lc-wide { grid-column: 1 / -1; }

/* Turn this into merch. */
.mb-card { border-color: var(--acc); }
.mb-split { margin: 14px 0 18px; padding: 14px 16px; border: 1px solid var(--line); background: var(--bg2); }
.mb-split-head { margin: 0 0 10px; font-size: .7rem; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; color: var(--tx3); }
.mb-art { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 6px; }
.mb-pick { position: relative; display: block; width: 110px; height: 110px; margin: 0 !important; cursor: pointer; border: 2px solid var(--line2); overflow: hidden; }
.mb-pick input { position: absolute; opacity: 0; }
.mb-pick img { width: 100%; height: 100%; object-fit: cover; }
.mb-pick:has(input:checked) { border-color: var(--acc); box-shadow: 0 0 0 3px color-mix(in srgb, var(--acc) 30%, transparent); }
.mb-pick:has(input:focus-visible) { outline: 3px solid var(--acc); outline-offset: 2px; }
.mb-blanks { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
.mb-sent { margin-top: 14px; }

body.dash-page .al-rights-table,
body.dash-page .lc-quote,
body.dash-page .mb-split { border-radius: 16px; }
body.dash-page .mb-pick { border-radius: 12px; }

/* ---------------- open calls (App\Models\OpenCall) ---------------- */
.al-calls-link { margin-top: 22px; color: var(--tx2); }
.al-calls-link a { color: var(--ylw); font-weight: 800; }
.oc-you { margin: 0 0 18px; color: var(--tx2); }
.oc-card { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 20px; background: var(--panel); border: 2px solid var(--line); transition: border-color .2s, transform .2s; }
.oc-card:hover { border-color: var(--ylw); transform: translateY(-3px); }
.oc-card h2 { font-size: 1.6rem; line-height: 1; }
.oc-when { margin: 0; font-size: .72rem; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; color: var(--ylw); }
.oc-when.is-awarded { color: var(--grn); }
.oc-when.is-closed { color: var(--tx3); }
.oc-budget { margin: 0; font-family: var(--head); font-size: 1.5rem; color: var(--tx); }
.oc-brief { margin: 0; color: var(--tx2); font-size: .92rem; line-height: 1.6; }
.oc-foot { margin: auto 0 0; padding-top: 8px; display: flex; justify-content: space-between; gap: 10px; color: var(--tx2); font-size: .88rem; }
.oc-foot span { color: var(--ylw); font-weight: 800; }
.oc-main { display: grid; gap: 22px; min-width: 0; }
.oc-full { white-space: pre-line; color: var(--tx2); line-height: 1.7; margin: 10px 0 16px; }
.oc-facts .oc-wide { grid-column: 1 / -1; }
.oc-types { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
.oc-h2 { font-size: 2rem; margin-bottom: 14px; }
.oc-h2 em { font-style: normal; color: var(--ylw); }
.oc-proposal { display: grid; gap: 12px; padding: 18px 20px; margin-bottom: 14px; background: var(--panel); border: 2px solid var(--line); }
.oc-proposal.is-accepted { border-color: var(--grn); }
.oc-proposal.is-declined { opacity: .6; }
.oc-proposal header { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.oc-proposal h3 { font-size: 1.5rem; line-height: 1; }
.oc-record { margin: 4px 0 0; color: var(--tx3); font-size: .85rem; }
.oc-new { display: inline-block; padding: 3px 8px; border: 1px solid var(--ylw); color: var(--ylw); font-size: .7rem; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.oc-price { margin: 0; text-align: right; font-family: var(--head); font-size: 1.8rem; line-height: 1; color: var(--tx); }
.oc-price small { display: block; margin-top: 4px; font-family: var(--body); font-size: .8rem; color: var(--tx3); }
.oc-pieces { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.oc-pieces img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.oc-message { margin: 0; white-space: pre-line; color: var(--tx2); line-height: 1.65; }
.oc-status { margin: 0; color: var(--tx2); font-weight: 700; }
.oc-withdraw { margin-top: 10px; }
@media (max-width: 620px) { .oc-pieces { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------------- notifications (partials/notify-list) ---------------- */
.nt { margin-bottom: 22px; padding: 16px 18px; border: 2px solid var(--line); background: var(--panel); }
.nt-h { margin: 0 0 8px; font-family: var(--body); font-size: .72rem; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; color: var(--tx3); }
.nt-list { list-style: none; margin: 0; padding: 0; }
.nt-list li { border-top: 1px solid var(--line); }
.nt-list li:first-child { border-top: 0; }
.nt-list a, .nt-list li > .nt-dot { color: inherit; }
.nt-list a, .nt-list li:not(:has(a)) { display: flex; align-items: flex-start; gap: 10px; padding: 9px 0; text-decoration: none; }
.nt-dot { flex: 0 0 auto; width: 8px; height: 8px; margin-top: 7px; border-radius: 50%; background: var(--line2); }
.nt-list li.is-new .nt-dot { background: var(--acc); }
.nt-words { flex: 1 1 auto; min-width: 0; }
.nt-words b { display: block; font-size: .92rem; color: var(--tx); }
.nt-list li:not(.is-new) .nt-words b { font-weight: 700; color: var(--tx2); }
.nt-words small { display: block; margin-top: 2px; font-size: .82rem; line-height: 1.5; color: var(--tx3); }
.nt-when { flex: 0 0 auto; font-size: .78rem; font-weight: 800; color: var(--tx3); }
.nt-list a:hover b { color: var(--acc); }
.nt-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
body.dash-page .nt { border-radius: 18px; border-width: 1px; background: var(--bg2); }

/* ---------------- reporting (ReportController) ---------------- */
.al-report { margin: 14px 0 0; font-size: .85rem; }
.al-report a { color: var(--tx3); text-decoration: underline; }
.al-report a:hover { color: var(--tx2); }
.rp-about { margin: 0 0 18px; color: var(--tx2); }

/* A delivery's big files, somewhere else. */
.cm-share { display: flex; align-items: center; gap: 12px; margin: 8px 0; padding: 10px 14px; border: 1px solid var(--acc); border-radius: 12px; color: inherit; text-decoration: none; }
.cm-share:hover b { text-decoration: underline; }
.cm-share-icon { font-size: 1.3rem; color: var(--acc); }
.cm-share b { display: block; font-size: .9rem; }
.cm-share small { color: var(--tx3); font-size: .74rem; }
.cm-file.is-removed { opacity: .55; font-style: italic; cursor: default; }
.cm-link-input { width: 100%; }

/* ---------------- portfolio folders and labels (PortfolioFolder) ---------------- */
/* Public profile: the folder buttons, and pieces the other folders hide.
   .al-piece sets its own display, which would beat the hidden attribute. */
.al-piece[hidden] { display: none; }
.al-folders { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; }
.al-folders a { display: inline-flex; align-items: center; gap: 7px; padding: 7px 13px; border: 1px solid var(--line2); border-radius: 999px; color: var(--tx2); font-size: .84rem; font-weight: 800; text-decoration: none; }
.al-folders a span { font-size: .72rem; color: var(--tx3); font-weight: 700; }
.al-folders a:hover { border-color: var(--acc); color: var(--tx); }
.al-folders a[aria-current="true"] { background: var(--acc); border-color: var(--acc); color: #0A0A0A; }
.al-folders a[aria-current="true"] span { color: rgba(10, 10, 10, .7); }
.al-piece figure { position: relative; }
.al-piece-labels { position: absolute; top: 8px; left: 8px; display: flex; flex-wrap: wrap; gap: 5px; pointer-events: none; }
.al-label { display: inline-block; padding: 3px 8px; border-radius: 999px; font-style: normal; font-size: .62rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; line-height: 1.4; }
.al-label.is-verified { background: #A3E635; color: #0A0A0A; }
.al-label.is-merch { background: var(--acc); color: #0A0A0A; }

/* The lightbox's words under the picture. */
.al-lb img { max-height: calc(100vh - 210px); }
.al-lb-cap { max-width: 640px; margin: 12px auto 0; text-align: center; }
.al-lb-cap .al-lb-title { margin: 0; color: var(--tx); font-weight: 800; }
.al-lb-labels { display: flex; justify-content: center; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.al-lb-labels:empty { display: none; }
.al-lb-desc { display: block; margin-top: 6px; color: var(--tx2); font-size: .9rem; line-height: 1.5; white-space: pre-line; }
.al-lb-meta { display: block; margin-top: 6px; color: var(--tx3); font-size: .78rem; }
.al-lb-product { display: inline-block; margin-top: 8px; color: var(--acc); font-weight: 800; font-size: .88rem; }
.al-lb-product[hidden] { display: none; }

/* Dash: managing folders, and a piece's details. */
.ap-folders { margin: 0 0 18px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 12px; }
.ap-folders-head { margin: 0 0 10px; font-size: .86rem; }
.ap-folders-head span { font-size: .8rem; }
.ap-folder-list { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 8px; }
.ap-folder-list li { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
/* The name on its own line; count, order and Remove share the next. */
.ap-folder-list li { padding-bottom: 8px; border-bottom: 1px solid var(--line); }
.ap-folder-list li:last-child { border-bottom: 0; }
.ap-folder-name { display: flex; gap: 6px; flex: 1 1 100%; }
.ap-folder-name input { flex: 1; min-width: 0; }
.ap-folder-count { font-size: .76rem; color: var(--tx3); min-width: 64px; }
.ap-folder-move { display: flex; gap: 4px; }
.ap-folder-move button { width: 30px; height: 30px; border: 1px solid var(--line2); border-radius: 8px; background: var(--panel); color: var(--tx); cursor: pointer; }
.ap-folder-move button:disabled { opacity: .35; cursor: default; }
.ap-folder-add { display: flex; gap: 8px; flex-wrap: wrap; }
.ap-folder-add input { flex: 1 1 220px; min-width: 0; }
.ap-piece.is-editing { border-color: var(--acc); }
.ap-piece-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; padding: 0 44px 8px 8px; font-size: .68rem; color: var(--tx3); }
.ap-label { padding: 1px 6px; border-radius: 999px; font-style: normal; font-weight: 900; font-size: .58rem; letter-spacing: .06em; text-transform: uppercase; }
.ap-label.is-verified { background: #A3E635; color: #0A0A0A; }
.ap-label.is-merch { background: var(--acc); color: #0A0A0A; }
.ap-piece-edit-link { position: absolute; right: 8px; bottom: 7px; font-size: .72rem; font-weight: 800; color: var(--acc); }
.ap-piece-edit { margin: 0 0 18px; padding: 16px; border: 1px solid var(--acc); border-radius: 12px; scroll-margin-top: 90px; }
.ap-piece-edit-head { display: flex; gap: 14px; align-items: center; margin-bottom: 12px; }
.ap-piece-edit-head img { width: 72px; height: 72px; object-fit: cover; border-radius: 8px; }
.ap-piece-edit-head p { margin: 2px 0 0; }
.ap-piece-edit-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; }
.ap-piece-edit-grid label { display: flex; flex-direction: column; gap: 5px; font-size: .78rem; font-weight: 800; color: var(--tx2); }
.ap-piece-edit-grid label.is-wide { grid-column: 1 / -1; }
.ap-piece-edit-grid label.ap-check { flex-direction: row; align-items: center; gap: 9px; font-size: .9rem; }
.ap-piece-edit-grid label.ap-check input { width: 17px; height: 17px; accent-color: var(--acc); }
/* .cm-card label sets every label in capitals; the words inside one here
   — a hint, a checkbox's own text, "(optional)" — are sentences. */
.cm-card .ap-piece-edit-grid label small,
.cm-card .ap-piece-edit-grid label span,
.cm-card .ap-piece-edit-grid label.ap-check { text-transform: none; letter-spacing: normal; }
.cm-card .ap-piece-edit-grid label small { font-weight: 600; font-size: .76rem; line-height: 1.45; }
.cm-card .ap-piece-edit-grid label span { font-weight: 600; }
.cm-card .ap-piece-edit-grid label.ap-check { font-size: .9rem; font-weight: 700; color: var(--tx); }
@media (max-width: 640px) {
  .ap-piece-edit-grid { grid-template-columns: 1fr; }
}

/* ---------------- follow and save (AlleyFans) ---------------- */
.al-fan { display: flex; gap: 8px; }
.al-fan form { margin: 0; }
.al-fan-btn { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border: 2px solid var(--line2); background: transparent; color: var(--tx); font: inherit; font-size: .82rem; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; text-decoration: none; cursor: pointer; }
.al-fan-btn:hover { border-color: var(--acc); color: var(--acc); }
.al-fan-btn.is-on { border-color: var(--acc); background: color-mix(in srgb, var(--acc) 16%, transparent); color: var(--acc); }
@media (max-width: 640px) {
  .al-fan { width: 100%; }
  .al-fan form, .al-fan > a { flex: 1; }
  .al-fan-btn { width: 100%; justify-content: center; }
}

/* ---------------- directory filters (AlleyDirectory) ---------------- */
.al-refine { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)) auto; gap: 10px; align-items: end; margin: 0 0 22px; padding: 14px 16px; border: 2px solid var(--line); background: var(--panel); }
.al-refine-field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.al-refine-field span { font-size: .64rem; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; color: var(--tx3); }
.al-refine-field select { width: 100%; min-height: 42px; padding: 0 10px; border: 2px solid var(--line2); background: var(--bg); color: var(--tx); font: inherit; font-size: .86rem; }
.al-refine-field.is-on select { border-color: var(--acc); }
.al-refine-field.is-on span { color: var(--acc); }
.al-refine-do { display: flex; align-items: center; gap: 12px; min-height: 42px; }
.al-refine-clear { color: var(--tx2); font-size: .82rem; font-weight: 800; white-space: nowrap; }
.al-refine-clear:hover { color: var(--acc); }
/* With the script, a choice applies at once and the button only takes room. */
.al-refine.is-live [data-al-refine-go] { display: none; }
@media (max-width: 960px) {
  .al-refine { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .al-refine-do { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  .al-refine { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 12px; }
}
@media (max-width: 380px) {
  .al-refine { grid-template-columns: 1fr; }
}

/* ---------------- discovery strips (AlleyDiscovery) ---------------- */
.al-gems { margin: 0 0 26px; padding: 18px; border: 2px solid var(--line); background: radial-gradient(120% 160% at 0% 0%, color-mix(in srgb, var(--ylw) 12%, transparent), transparent 60%), var(--panel); }
.al-gems-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px; margin-bottom: 14px; }
.al-gems-head h2 { margin: 0; font-family: var(--head); font-weight: 400; font-size: 1.6rem; text-transform: uppercase; letter-spacing: .02em; }
.al-gems-head h2 em { color: var(--ylw); font-style: normal; }
.al-gems-head p { margin: 0; color: var(--tx2); font-size: .88rem; }
.al-mini-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.al-mini { display: flex; flex-direction: column; border: 2px solid var(--line); background: var(--panel2); color: inherit; text-decoration: none; transition: border-color .2s; }
.al-mini:hover { border-color: var(--acc); }
.al-mini-cover { position: relative; display: grid; place-items: center; aspect-ratio: 4 / 3; overflow: hidden; background: var(--bg); color: var(--tx3); font-family: var(--head); font-size: 2rem; }
.al-mini-cover img { width: 100%; height: 100%; object-fit: cover; }
.al-mini-cover .al-avail { position: absolute; top: 8px; left: 8px; font-style: normal; }
.al-mini-body { display: flex; flex-direction: column; gap: 3px; padding: 10px 12px 12px; }
.al-mini-body b { font-size: .98rem; color: var(--tx); }
.al-mini-body small { color: var(--tx3); font-size: .76rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.al-mini-body em { font-style: normal; color: var(--tx2); font-size: .8rem; font-weight: 800; }
.al-similar-note { margin: -6px 0 14px; color: var(--tx2); font-size: .9rem; }
@media (max-width: 900px) {
  .al-mini-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 380px) {
  .al-mini-row { grid-template-columns: 1fr; }
}

/* ---------------- service samples (ServiceSamples) ---------------- */
/* The Dash: what is on a service, in order. */
.sv-samples { margin: 0 0 16px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 12px; scroll-margin-top: 90px; }
.sv-samples-head { margin: 0 0 10px; font-size: .86rem; }
.sv-samples-head span { font-size: .8rem; }
.sv-sample-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.sv-sample-list li { display: grid; grid-template-columns: 14px 56px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 6px 8px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel2); }
.sv-thumb { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 8px; overflow: hidden; background: var(--panel2); color: var(--acc); font-size: 1.4rem; }
.sv-thumb img { width: 100%; height: 100%; object-fit: cover; }
.sv-sample-name { min-width: 0; font-size: .86rem; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sv-sample-name small { display: block; font-size: .7rem; font-weight: 600; color: var(--tx3); }

/* The Examples step (assets/js/service-examples.js): rename where it sits,
   drag by the handle, and the tray that files wait in before they go up. */
.sx-status { margin-left: 6px; font-size: .78rem; font-weight: 700; color: var(--acc); }
.sx-status.is-bad { color: #ff6b6b; }
.sx-grip { align-self: stretch; width: 14px; cursor: grab; border-radius: 4px; background: radial-gradient(circle, var(--tx3) 1.2px, transparent 1.6px) 0 0 / 7px 7px; opacity: .55; touch-action: none; }
.sx-grip:hover { opacity: 1; }
li.is-dragging { opacity: .45; outline: 2px dashed var(--acc); outline-offset: 2px; }
.sx-title-row { display: flex; align-items: center; gap: 8px; min-width: 0; }
.sx-title-row b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sx-pill { display: none; flex: none; padding: 1px 8px; border-radius: 99px; background: color-mix(in srgb, var(--acc) 14%, transparent); color: var(--acc); font-size: .66rem; font-style: normal; font-weight: 800; letter-spacing: .02em; }
.sv-sample-list li.is-preview .sx-pill { display: inline-block; }
.sv-sample-name { white-space: normal; }
.sx-rename[hidden] { display: none; }
.sx-rename { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 6px; }
.sx-rename input { flex: 1 1 180px; min-width: 0; margin: 0; }
li.is-renaming .sx-title-row, li.is-renaming .sv-sample-name > small { display: none; }
.sx-do { display: flex; align-items: center; gap: 6px; }
.sx-icon { display: grid; place-items: center; width: 30px; height: 30px; padding: 0; border: 1px solid var(--line2); border-radius: 8px; background: transparent; color: var(--tx3); font-size: 1.1rem; line-height: 1; cursor: pointer; }
.sx-icon:hover, .sx-icon:focus-visible { border-color: var(--acc); color: var(--acc); }

.sx-up-h { margin: 0 0 8px; font-size: .9rem; }
.sx-up.is-on .sx-file { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.sx-up.is-on .sx-up-list { display: none; }
.sx-up:not(.is-on) .sx-drop { display: none; }
label.sx-drop { display: grid; justify-items: center; gap: 6px; margin: 0; font-size: .92rem; font-weight: 400; letter-spacing: normal; text-transform: none; padding: 22px 16px; border: 2px dashed var(--line2); border-radius: 14px; background: var(--panel2); color: var(--tx3); text-align: center; cursor: pointer; transition: border-color .15s, background-color .15s; }
.sx-drop b { color: var(--tx); }
.sx-drop u { color: var(--acc); text-underline-offset: 3px; }
label.sx-drop small { max-width: 46ch; font-size: .76rem; }
.sx-drop svg { color: var(--acc); }
.sx-drop:hover, .sx-drop.is-over, .sx-up:has(.sx-file:focus-visible) .sx-drop { border-color: var(--acc); background: color-mix(in srgb, var(--acc) 7%, var(--panel2)); }
.sx-drop.is-full { display: none; }
.sx-tray-h { margin: 14px 0 6px; font-size: .84rem; }
.sx-tray { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.sx-tray li { display: grid; grid-template-columns: 14px 56px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 6px 8px; border: 1px solid var(--line2); border-radius: 10px; background: var(--panel2); }
.sx-tray-name { min-width: 0; }
.sx-tray-name input { width: 100%; margin: 0; }
.sx-tray-name small { display: block; margin-top: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .7rem; color: var(--tx3); }
.sx-err { margin: 8px 0 0; padding: 8px 12px; border-left: 3px solid #ff6b6b; border-radius: 0; background: rgba(255, 107, 107, .08); font-size: .8rem; }
.sx-tray-foot[hidden] { display: none; }
.sx-tray-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-top: 10px; }
.sx-tray-foot .up-progress { flex: 1 0 100%; order: 3; }
@media (max-width: 560px) {
  .sv-sample-list li { grid-template-columns: 14px 48px minmax(0, 1fr); }
  .sv-sample-list li .sx-do { grid-column: 2 / -1; justify-content: flex-end; }
  .sv-sample-list .sv-thumb, .sx-tray .sv-thumb { width: 48px; height: 48px; }
  .sx-tray li { grid-template-columns: 14px 48px minmax(0, 1fr) auto; }
}

/* The profile's service card: the first samples, small. */
.sv-card-link { color: inherit; text-decoration: none; }
.sv-card-link:hover { color: var(--acc); }
.sv-strip { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 5px; margin: 8px 0 12px; }
.sv-tile { position: relative; display: grid; place-items: center; aspect-ratio: 1; overflow: hidden; border: 1px solid var(--line2); background: var(--panel2); color: var(--acc); text-decoration: none; }
.sv-tile img { width: 100%; height: 100%; object-fit: cover; }
.sv-tile:hover { border-color: var(--acc); }
.sv-note { font-size: 1.3rem; }
.sv-play { position: absolute; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: rgba(10, 10, 10, .75); color: #fff; font-size: .8rem; }
.sv-more { display: inline-block; margin-top: 10px; color: var(--tx2); font-size: .84rem; font-weight: 800; }
.sv-more:hover { color: var(--acc); }

/* The service page. */
.sv-page { position: relative; padding-top: 34px; padding-bottom: 60px; }
.sv-title { margin-top: 6px; }
.sv-by { margin: 4px 0 26px; color: var(--tx2); }
.sv-by a { color: var(--acc); font-weight: 800; }
.sv-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 28px; align-items: start; }
.sv-summary { margin: 0 0 20px; font-size: 1.05rem; line-height: 1.6; color: var(--tx); }
.sv-h2 { margin: 0 0 14px; font-family: var(--head); font-weight: 400; font-size: 1.5rem; text-transform: uppercase; }
.sv-h3 { margin: 18px 0 8px; font-family: var(--body); font-size: .7rem; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; color: var(--tx3); }
.sv-examples { scroll-margin-top: 100px; }
.sv-images { margin-bottom: 16px; }
.sv-videos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; }
.sv-video { position: relative; display: grid; place-items: center; aspect-ratio: 16 / 9; overflow: hidden; border: 2px solid var(--line); background: #000; color: #fff; text-decoration: none; }
.sv-video img { width: 100%; height: 100%; object-fit: cover; opacity: .9; }
.sv-video .sv-play { width: 54px; height: 54px; font-size: 1.2rem; background: var(--acc); color: #0A0A0A; }
.sv-video-title { position: absolute; left: 0; right: 0; bottom: 0; padding: 8px 10px; background: linear-gradient(transparent, rgba(0, 0, 0, .85)); font-size: .8rem; font-weight: 800; text-align: left; }
.sv-frame { width: 100%; aspect-ratio: 16 / 9; border: 0; }
.sv-audio { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 10px; }
.sv-audio li { display: grid; gap: 6px; padding: 12px 14px; border: 2px solid var(--line); background: var(--panel); }
.sv-audio-name { font-weight: 800; font-size: .9rem; color: var(--tx); }
.sv-audio-name span { color: var(--acc); }
.sv-audio audio { width: 100%; }
.sv-side { position: sticky; top: 100px; }
.sv-card { padding: 20px; border: 2px solid var(--line); background: var(--panel); }
.sv-price { margin: 0; color: var(--tx3); font-size: .8rem; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; }
.sv-price b { display: block; margin-top: 4px; font-family: var(--head); font-weight: 400; font-size: 2.4rem; color: var(--tx); letter-spacing: 0; }
.sv-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 14px 0 0; }
.sv-facts div { padding: 10px; border: 1px solid var(--line); background: var(--bg); }
.sv-facts dt { font-size: .62rem; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; color: var(--tx3); }
.sv-facts dd { margin: 4px 0 0; font-weight: 800; color: var(--tx); }
.sv-includes { margin: 0; padding-left: 18px; line-height: 1.7; color: var(--tx2); }
.sv-cta { display: block; width: 100%; margin-top: 18px; text-align: center; }
.sv-small { margin: 10px 0 0; font-size: .8rem; color: var(--tx3); line-height: 1.5; }
.sv-back { margin-top: 12px; font-size: .86rem; }
.sv-back a { color: var(--tx2); }
@media (max-width: 900px) {
  .sv-layout { grid-template-columns: 1fr; }
  .sv-side { position: static; }
}
@media (max-width: 560px) {
  .sv-videos { grid-template-columns: 1fr; }
  .sv-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ---------------- service status (ServiceStatus) ---------------- */
/* On the profile's card and the service page: where this one stands. */
.sv-state { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin: 0; font-size: .82rem; color: var(--tx2); }
.sv-state b { padding: 3px 9px; border: 1px solid var(--line2); font-size: .66rem; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; color: var(--tx2); }
.sv-state.is-open b, .sv-state.is-limited b { border-color: rgba(163, 230, 53, .5); color: var(--grn); }
.sv-state.is-waitlist b, .sv-state.is-full b { border-color: rgba(248, 206, 0, .5); color: var(--ylw); }
.sv-state.is-closed b { color: var(--tx3); }
.sv-when { color: var(--tx); font-weight: 700; }
.sv-card .sv-state { margin-bottom: 14px; }
.al-svc.is-shut { border-top-color: var(--line2); }
.sv-ping { margin: 0; }
.sv-ping.is-on p { margin: 0; color: var(--grn); font-weight: 700; font-size: .9rem; }
.sv-ping.is-on form { display: inline; }

/* The Dash: the pill on each service, the quick status picker, the box in the editor. */
.ss-pill { display: inline-block; margin-left: 8px; padding: 1px 8px; border-radius: 999px; border: 1px solid var(--line2); font-size: .62rem; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; vertical-align: 2px; color: var(--tx2); }
.ss-pill.is-open { border-color: color-mix(in srgb, var(--grn) 55%, transparent); color: var(--grn); }
.ss-pill.is-waitlist, .ss-pill.is-full { border-color: color-mix(in srgb, var(--ylw) 55%, transparent); color: var(--ylw); }
.ss-pill.is-unlisted { border-style: dashed; }
.ss-pill.is-draft { color: var(--tx3); }
.ss-line { display: block; margin-top: 3px; color: var(--tx2); }
.ss-quick { display: flex; gap: 6px; align-items: center; }
/* The Dash's pill buttons set display, which beats [hidden]: said again. */
body.dash-page .ss-quick [data-autosubmit-go][hidden] { display: none; }
.ss-quick select { min-height: 36px; padding: 0 10px; border-radius: 999px; border: 1px solid var(--line2); background: var(--panel); color: var(--tx); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
.ss-quick select:focus { outline: none; border-color: var(--acc); }
.ss-box { margin: 18px 0 4px; padding: 14px 16px 16px; border: 1px solid var(--line); border-radius: 12px; min-width: 0; }
.ss-box legend { padding: 0 6px; font-size: 11px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; color: var(--tx2); }
.ss-box > label:first-of-type { margin-top: 4px; }
.ss-times { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 0 12px; }
body.dash-page .ss-box select,
body.dash-page .ss-box input[type="datetime-local"] { width: 100%; box-sizing: border-box; min-height: 44px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line2); background: var(--panel); color: var(--tx); font: inherit; }
body.dash-bento .ss-box select,
body.dash-bento .ss-box input[type="datetime-local"] { border-radius: 14px; background: var(--db-inset); }
body.dash-page .ss-box select:focus,
body.dash-page .ss-box input[type="datetime-local"]:focus { outline: none; border-color: var(--acc); }
body.dash-page.is-light .ss-box input[type="datetime-local"] { color-scheme: light; }
body.dash-page:not(.is-light) .ss-box input[type="datetime-local"] { color-scheme: dark; }
@media (max-width: 560px) {
  .ss-times { grid-template-columns: 1fr; }
  .ss-quick { width: 100%; }
}

/* ---------------- the commission board (CommissionBoard) ---------------- */
.cb-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; }
.cb-tab { display: inline-flex; align-items: center; gap: 7px; min-height: 38px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line2); background: var(--db-tile, var(--panel)); color: var(--tx2); font-size: 13px; font-weight: 900; text-decoration: none; }
.cb-tab span { min-width: 20px; padding: 1px 6px; border-radius: 999px; background: var(--db-inset, var(--panel2)); color: var(--tx2); font-size: 11.5px; text-align: center; }
.cb-tab:hover { border-color: var(--acc); color: var(--tx); }
.cb-tab.is-on { background: var(--acc); border-color: var(--acc); color: var(--on-acc, #0A0A0A); }
.cb-tab.is-on span { background: color-mix(in srgb, var(--on-acc, #0A0A0A) 16%, transparent); color: inherit; }
.cb-tab.is-yours:not(.is-on) span { background: var(--acc); color: var(--on-acc, #0A0A0A); }

.cb-tools { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0 0 18px; }
body.dash-page .cb-tools input[type="search"],
body.dash-page .cb-tools select { min-height: 40px; box-sizing: border-box; padding: 0 12px; border-radius: 999px; border: 1px solid var(--line2); background: var(--db-inset, var(--panel)); color: var(--tx); font: inherit; font-size: 13.5px; }
body.dash-page .cb-tools input[type="search"] { flex: 1 1 220px; min-width: 0; }
body.dash-page .cb-tools select { cursor: pointer; font-weight: 700; }
body.dash-page .cb-tools input:focus,
body.dash-page .cb-tools select:focus { outline: none; border-color: var(--acc); }
.cb-view { display: inline-flex; margin-left: auto; padding: 3px; border-radius: 999px; border: 1px solid var(--line2); }
.cb-view a { padding: 6px 13px; border-radius: 999px; color: var(--tx2); font-size: 13px; font-weight: 900; text-decoration: none; }
.cb-view a.is-on { background: var(--acc); color: var(--on-acc, #0A0A0A); }

.cb-pin { color: var(--acc); }
.cm-row.is-pinned { border-color: color-mix(in srgb, var(--acc) 60%, var(--line)); }
.cb-flag { padding: 2px 8px; border-radius: 999px; border: 1px dashed var(--line2); font-size: 11px; font-weight: 900; letter-spacing: .04em; text-transform: uppercase; color: var(--tx2); }
.cb-note { display: block; margin-top: 6px; padding-left: 8px; border-left: 2px solid var(--acc); color: var(--tx2); font-style: italic; }

.cb-board { display: grid; grid-template-columns: repeat(5, minmax(210px, 1fr)); gap: 12px; overflow-x: auto; padding-bottom: 6px; }
.cb-col { display: flex; flex-direction: column; gap: 8px; min-width: 0; padding: 12px; border-radius: 20px; border: 1px solid var(--line); background: var(--db-tile, var(--panel)); }
.cb-col-head { display: flex; justify-content: space-between; margin: 0 0 2px; font-size: 11px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; color: var(--tx2); }
.cb-col-head span { color: var(--tx3); }
.cb-col-empty { margin: 0; font-size: 12.5px; font-weight: 700; color: var(--tx3); }
.cb-card { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line); background: var(--db-inset, var(--panel2)); color: var(--tx); text-decoration: none; }
.cb-card:hover { border-color: var(--acc); }
.cb-card b { font-size: 13.5px; line-height: 1.3; overflow-wrap: anywhere; }
.cb-card small { color: var(--tx2); font-size: 12px; }
.cb-card-foot { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.cb-card-foot strong { margin-left: auto; font-size: 12.5px; }
.cb-card.is-paused { opacity: .7; }

.cb-mine label { display: block; margin: 0 0 6px; font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--tx3); }
.cb-mine textarea { width: 100%; box-sizing: border-box; margin-bottom: 8px; }
.cb-switches { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.cb-switches form { margin: 0; }

@media (max-width: 760px) {
  .cb-view { margin-left: 0; }
  .cb-board { grid-template-columns: repeat(5, minmax(78vw, 1fr)); scroll-snap-type: x mandatory; }
  .cb-col { scroll-snap-align: start; }
}
.cb-board { scrollbar-color: var(--line2) transparent; scrollbar-width: thin; }

/* ---------------- Notifications (NotificationController) ---------------- */
.nf-cols { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.nf-card { padding: 22px; border-radius: 18px; border: 1px solid var(--line); background: var(--panel); }
body.dash-bento .nf-card { border-radius: 24px; background: var(--db-tile); }
.nf-h { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; font-family: var(--body); font-size: 12px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; color: var(--tx2); }
.nf-new { padding: 2px 9px; border-radius: 999px; background: var(--acc); color: var(--on-acc, #0A0A0A); letter-spacing: .04em; }
.nf-inner { margin: 0; padding: 0; border: 0; background: none; }
.nf-inner .nt-h { display: none; }
.nf-empty, .nf-more, .nf-lede { margin: 0; color: var(--tx3); font-size: .9rem; line-height: 1.6; }
.nf-more { margin-top: 12px; font-size: .82rem; }
.nf-lede { margin-bottom: 14px; }
.nf-topics { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 4px; }
.nf-topic { display: flex; gap: 12px; align-items: flex-start; padding: 10px 0; border-top: 1px solid var(--line); cursor: pointer; }
.nf-topics li:first-child .nf-topic { border-top: 0; }
.nf-topic input { flex: 0 0 auto; width: 18px; height: 18px; margin-top: 2px; accent-color: var(--acc); }
.nf-topic b { display: block; font-size: .92rem; color: var(--tx); }
.nf-topic small { display: block; margin-top: 2px; font-size: .8rem; line-height: 1.5; color: var(--tx3); }
.nf-topic.is-locked { cursor: default; opacity: .75; }
.acct-tab-count { display: inline-grid; place-items: center; min-width: 18px; height: 18px; margin-left: 4px; padding: 0 5px; border-radius: 999px; background: var(--acc); color: #0A0A0A; font-size: .66rem; letter-spacing: 0; vertical-align: 1px; }
@media (max-width: 860px) {
  .nf-cols { grid-template-columns: 1fr; }
}

/* =============================================================
   Portfolio showcases (App\Services\Showcase) — the Dash's Portfolio
   screen and editor, and the public grid and showcase page.
   ============================================================= */

/* ---------------- the public grid: row by row, one card shape ---------------- */
.al-port { columns: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; }
.al-port .al-piece { position: relative; margin: 0; overflow: hidden; }
.al-port .al-piece[hidden] { display: none; }
.al-port .al-piece figure { position: relative; }
.al-port .al-piece img { aspect-ratio: var(--al-aspect, 1 / 1); object-fit: cover; }
.al-piece-count { position: absolute; top: 8px; right: 8px; padding: 3px 8px; background: rgba(10, 10, 10, .78); color: #fff; font-size: .72rem; font-weight: 800; letter-spacing: .04em; pointer-events: none; }
.al-piece.is-sensitive img { filter: blur(22px) saturate(.6); transform: scale(1.1); }
.al-piece-veil { position: absolute; inset: 0; display: none; place-content: center; gap: 4px; text-align: center; color: #fff; background: rgba(10, 10, 10, .35); }
.al-piece.is-sensitive .al-piece-veil { display: grid; }
.al-piece-veil b { font-family: var(--head); font-weight: 400; font-size: 1.4rem; letter-spacing: .04em; }
.al-piece-veil small { font-size: .78rem; font-weight: 800; }
.al-piece.is-sensitive { cursor: pointer; }
.al-lb-work { display: inline-block; margin: 8px 0 0 12px; color: var(--ylw); font-weight: 800; font-size: .88rem; }
.al-lb-work[hidden] { display: none; }

/* ---------------- the public showcase page ---------------- */
.wk-page { position: relative; padding-top: 30px; padding-bottom: 60px; }
.wk-preview { margin: 0 0 18px; padding: 12px 16px; border: 2px dashed var(--ylw); color: var(--tx); font-weight: 700; }
.wk-preview a { color: var(--ylw); }
.wk-title { margin-top: 6px; }
.wk-by { margin: 4px 0 24px; color: var(--tx2); }
.wk-by a { color: var(--acc); font-weight: 800; }
.wk-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 28px; align-items: start; }
.wk-media { display: grid; gap: 16px; }
.wk-item { margin: 0; }
.wk-media .al-piece img { aspect-ratio: auto; }
.wk-audio { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 14px; align-items: center; padding: 14px; border: 2px solid var(--line); background: var(--panel); }
.wk-audio img, .wk-audio-note { width: 120px; height: 120px; object-fit: cover; }
.wk-audio-note { display: grid; place-items: center; background: var(--panel2); color: var(--acc); font-size: 2.4rem; }
.wk-audio figcaption { display: grid; gap: 8px; }
.wk-audio audio { width: 100%; }
.wk-gate { border: 2px solid var(--line2); background: var(--panel); }
.wk-gate > summary { list-style: none; display: grid; justify-items: center; gap: 8px; padding: 60px 20px; text-align: center; cursor: pointer; }
.wk-gate > summary::-webkit-details-marker { display: none; }
.wk-gate > summary b { font-family: var(--head); font-weight: 400; font-size: 1.8rem; color: var(--tx); }
.wk-gate > summary span:not(.btn) { color: var(--tx2); font-size: .9rem; }
.wk-gate[open] > summary { padding: 10px 14px; justify-items: start; }
.wk-gate[open] > summary .btn { display: none; }
.wk-gate[open] > summary b { font-size: 1rem; font-family: var(--body); font-weight: 900; }
.wk-gate .wk-media { padding: 0 14px 14px; }
.wk-side { position: sticky; top: 100px; }
.wk-labels { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; }
.wk-body { color: var(--tx2); line-height: 1.7; font-size: .96rem; }
.wk-body p { margin: 0 0 10px; }
.wk-body ul, .wk-body ol { margin: 0 0 10px; padding-left: 20px; }
.wk-body a { color: var(--acc); }
.wk-tags { display: flex; flex-wrap: wrap; gap: 6px 10px; margin: 0; color: var(--tx2); font-size: .86rem; }
.wk-service { margin: 0 0 4px; color: var(--tx2); }
.wk-service a { color: var(--tx); font-weight: 800; }
.wk-more { margin-top: 48px; }
.wk-more-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; }
.wk-more-card { display: block; border: 2px solid var(--line); background: var(--panel2); color: var(--tx2); text-decoration: none; font-size: .82rem; }
.wk-more-card img { display: block; width: 100%; aspect-ratio: var(--al-aspect, 1 / 1); object-fit: cover; }
.wk-more-card span { display: block; padding: 6px 8px; }
.wk-more-card:hover { border-color: var(--ylw); }
@media (max-width: 900px) {
  .wk-layout { grid-template-columns: 1fr; }
  .wk-side { position: static; }
}

/* ---------------- the Dash: shared ---------------- */
.al-page-lede { margin: -6px 0 18px; max-width: 72ch; color: var(--tx2); line-height: 1.6; }
.cm-card.al-wide { margin-bottom: 16px; }
.ap-parts { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; margin: 0 0 18px; }
.ap-part { display: grid; gap: 4px; padding: 18px 20px; border-radius: 20px; border: 1px solid var(--line); background: var(--db-tile, var(--panel)); color: var(--tx); text-decoration: none; transition: border-color .15s; }
.ap-part:hover { border-color: var(--acc); }
.ap-part-kick { font-size: 11px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; color: var(--tx2); }
.ap-part b { font-size: 1.15rem; }
.ap-part small { color: var(--tx2); line-height: 1.5; }
.ap-stack { display: grid; gap: 16px; }
.ap-stack .cm-card { margin: 0; }

/* The unsaved-changes dialog (dash-guard.js): one header pattern, X at the right. */
html.dg-open { overflow: hidden; }
.dg-back { position: fixed; inset: 0; z-index: 400; display: grid; place-items: center; padding: 16px; background: rgba(5, 5, 5, .6); }
.dg-back[hidden] { display: none; }
.dg-modal { width: min(460px, 100%); padding: 20px 22px; border-radius: 20px; border: 1px solid var(--line2); background: var(--db-tile, var(--panel)); color: var(--tx); box-shadow: 0 24px 60px rgba(0, 0, 0, .45); }
.dg-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.dg-head h2 { margin: 0; font-family: var(--body); font-size: 1.1rem; font-weight: 900; }
.dg-x { width: 36px; height: 36px; flex: 0 0 auto; border-radius: 50%; border: 1px solid var(--line2); background: transparent; color: var(--tx); font-size: 1.2rem; cursor: pointer; }
.dg-body { margin: 10px 0 18px; color: var(--tx2); line-height: 1.6; }
.dg-foot { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 14px; }
.dg-leave { padding: 0; border: 0; background: none; color: var(--tx2); font: inherit; font-weight: 700; text-decoration: underline; cursor: pointer; }
.dg-leave:hover { color: var(--red); }
.dg-x:focus-visible, .dg-leave:focus-visible, .dg-stay:focus-visible { outline: 3px solid var(--acc); outline-offset: 2px; }

.sc-toast { position: fixed; left: 50%; bottom: 110px; z-index: 450; transform: translateX(-50%); max-width: min(520px, calc(100% - 32px)); margin: 0; padding: 12px 18px; border-radius: 999px; background: var(--tx); color: var(--bg); font-weight: 800; font-size: .9rem; box-shadow: 0 12px 30px rgba(0, 0, 0, .35); }
.sc-toast.is-bad { background: var(--red); color: #fff; }
.sc-toast[hidden] { display: none; }
@media (min-width: 1001px) { .sc-toast { bottom: 30px; } }
.sc-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------------- the Portfolio screen ---------------- */
.pf-drop { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: center; margin: 0 0 16px; }
.pf-drop-zone, .sc-drop { position: relative; display: grid; justify-items: center; gap: 4px; padding: 22px 16px; border-radius: 18px; border: 2px dashed var(--line2); background: var(--db-inset, var(--panel2)); color: var(--tx2); text-align: center; cursor: pointer; transition: border-color .15s, background-color .15s; }
.pf-drop-zone:hover, .pf-drop-zone.is-over, .sc-drop:hover, .sc-drop.is-over { border-color: var(--acc); background: color-mix(in srgb, var(--acc) 8%, var(--db-inset, var(--panel2))); }
.pf-drop-zone b, .sc-drop b { color: var(--tx); font-size: 1rem; }
.pf-drop-zone small, .sc-drop small { font-size: .8rem; line-height: 1.5; }
.pf-drop-icon { font-size: 1.6rem; color: var(--acc); line-height: 1; }
body.dash-bento .pf-drop-zone input[type="file"], body.dash-bento .sc-drop input[type="file"] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.pf-drop-do { display: flex; flex-direction: column; gap: 8px; }
.pf-drop-do select { min-height: 40px; }
.pf-drop .up-list, .pf-drop .up-progress { grid-column: 1 / -1; }

.pf-tools { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0 0 10px; }
body.dash-page .pf-tools input[type="search"], body.dash-page .pf-tools select { min-height: 40px; box-sizing: border-box; padding: 0 12px; border-radius: 999px; border: 1px solid var(--line2); background: var(--db-inset, var(--panel)); color: var(--tx); font: inherit; font-size: 13.5px; }
body.dash-page .pf-tools input[type="search"] { flex: 1 1 220px; min-width: 0; }
body.dash-page .pf-tools select { cursor: pointer; font-weight: 700; }
body.dash-page .pf-tools .btn.is-on { background: var(--acc); border-color: var(--acc); color: var(--on-acc); }
.pf-bar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px; margin: 0 0 14px; }
.pf-order-note { margin: 0; color: var(--tx2); font-size: .86rem; }
.pf-order-note a { color: var(--acc); font-weight: 800; }
.pf-shape { display: inline-flex; align-items: center; gap: 4px; padding: 3px; border-radius: 999px; border: 1px solid var(--line2); }
.pf-shape span { padding: 0 6px 0 8px; font-size: 12px; font-weight: 800; color: var(--tx2); }
.pf-shape button { display: grid; place-items: center; width: 34px; height: 30px; border: 0; border-radius: 999px; background: transparent; color: var(--tx2); cursor: pointer; }
.pf-shape button i { display: block; border: 2px solid currentColor; border-radius: 3px; }
.pf-shape-square i { width: 13px; height: 13px; }
.pf-shape-portrait i { width: 11px; height: 14px; }
.pf-shape-landscape i { width: 17px; height: 10px; }
.pf-shape button.is-on { background: var(--acc); color: var(--on-acc); }

.pf-bulk { position: sticky; top: 12px; z-index: 20; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 14px; padding: 10px 14px; border-radius: 18px; border: 2px solid var(--acc); background: var(--db-tile, var(--panel)); }
.pf-bulk p { margin: 0 8px 0 0; }
.pf-bulk-folder { display: inline-flex; gap: 6px; align-items: center; }
body.dash-page .pf-bulk select { min-height: 36px; border-radius: 999px; padding: 0 10px; }
.pf-danger { color: var(--red) !important; }

.pf-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 14px; }
.pf-card { position: relative; display: flex; flex-direction: column; min-width: 0; border-radius: 18px; border: 1px solid var(--line); background: var(--db-tile, var(--panel)); transition: border-color .15s, box-shadow .15s, opacity .15s; }
.pf-card:hover { border-color: var(--acc); }
.pf-card.is-draft .pf-cover img { opacity: .72; }
.pf-card.is-selected { border-color: var(--acc); box-shadow: 0 0 0 2px var(--acc); }
.pf-card.is-dragging { opacity: .5; }
.pf-grid.is-sorting .pf-card:not(.is-dragging):hover { border-style: dashed; }
.pf-cover { position: relative; display: block; overflow: hidden; border-radius: 17px 17px 0 0; background: var(--db-inset, var(--panel2)); aspect-ratio: var(--pf-aspect, 1 / 1); }
.pf-cover img { display: block; width: 100%; height: 100%; object-fit: cover; }
.pf-nocover { display: grid; place-items: center; height: 100%; color: var(--tx2); font-size: .85rem; font-weight: 700; }
.pf-badges { position: absolute; top: 8px; left: 8px; display: flex; flex-wrap: wrap; gap: 4px; }
.pf-counts { position: absolute; top: 8px; right: 8px; display: flex; gap: 4px; }
.pf-counts i { padding: 3px 7px; border-radius: 999px; background: rgba(10, 10, 10, .75); color: #fff; font-style: normal; font-size: 11.5px; font-weight: 800; }
.pf-pill { padding: 3px 9px; border-radius: 999px; background: rgba(10, 10, 10, .75); color: #fff; font-style: normal; font-size: 11px; font-weight: 900; letter-spacing: .04em; text-transform: uppercase; }
.pf-pill.is-draft { background: var(--ylw); color: #1A1400; }
.pf-pill.is-hidden { background: var(--red); }
.pf-pill.is-mature { background: #7A1F2B; }
.pf-words { display: grid; gap: 3px; padding: 10px 12px 4px; min-width: 0; }
.pf-title { color: var(--tx); font-weight: 900; font-size: .95rem; text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pf-title:hover { color: var(--acc); }
.pf-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; color: var(--tx2); font-size: .78rem; }
.pf-do { display: flex; justify-content: flex-end; align-items: center; gap: 4px; padding: 4px 8px 8px; margin-top: auto; }
.pf-handle { width: 34px; height: 34px; border-radius: 10px; border: 1px solid var(--line2); background: transparent; color: var(--tx2); font-weight: 900; letter-spacing: -2px; cursor: grab; touch-action: none; }
.pf-handle:active { cursor: grabbing; }
.pf-handle:focus-visible { outline: 3px solid var(--acc); outline-offset: 2px; }
.pf-check { position: absolute; top: 8px; left: 8px; z-index: 2; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: rgba(10, 10, 10, .7); }
.pf-check input { width: 18px; height: 18px; accent-color: var(--acc); cursor: pointer; }
.pf-card:has(.pf-check) .pf-badges { top: 44px; }
.pf-menu { position: relative; }
.pf-menu > summary { list-style: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; border: 1px solid var(--line2); color: var(--tx); font-weight: 900; cursor: pointer; }
.pf-menu > summary::-webkit-details-marker { display: none; }
.pf-menu[open] > summary { border-color: var(--acc); color: var(--acc); }
.pf-menu-list { position: absolute; right: 0; bottom: calc(100% + 6px); z-index: 30; display: grid; min-width: 180px; padding: 6px; border-radius: 14px; border: 1px solid var(--line2); background: var(--db-tile, var(--panel)); box-shadow: 0 16px 40px rgba(0, 0, 0, .4); }
.pf-menu-list a, .pf-menu-list button { display: block; width: 100%; padding: 9px 12px; border: 0; border-radius: 9px; background: none; color: var(--tx); font: inherit; font-size: 13.5px; font-weight: 700; text-align: left; text-decoration: none; cursor: pointer; }
.pf-menu-list a:hover, .pf-menu-list button:hover:not(:disabled) { background: var(--db-inset, var(--panel2)); }
.pf-menu-list button:disabled { opacity: .4; cursor: default; }
.pf-menu-list form { margin: 0; }
.pf-folders { margin-top: 18px; }
.pf-folders > summary { cursor: pointer; padding: 2px 0; }
.pf-folders[open] > summary { margin-bottom: 12px; }

/* ---------------- the showcase editor ---------------- */
.sc-top { position: sticky; top: 0; z-index: 25; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin: 0 0 18px; padding: 12px 0; background: var(--bg); border-bottom: 1px solid var(--line); }
.sc-back { color: var(--tx2); font-weight: 900; text-decoration: none; }
.sc-back:hover { color: var(--acc); }
.sc-state { display: flex; align-items: center; gap: 10px; min-width: 0; }
.sc-status { padding: 3px 10px; border-radius: 999px; font-size: 11px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.sc-status.is-draft { background: var(--ylw); color: #1A1400; }
.sc-status.is-live { background: var(--grn); color: #0A1400; }
.sc-saved { color: var(--tx2); font-size: .84rem; }
.sc-actions { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-left: auto; }
.sc-actions form { margin: 0; }
.sc-danger { color: var(--red) !important; }
.sc-primary { display: inline-flex; }
.sc-primary > .btn { border-top-right-radius: 0 !important; border-bottom-right-radius: 0 !important; }
.sc-more { position: relative; }
.sc-more > summary { list-style: none; border-top-left-radius: 0 !important; border-bottom-left-radius: 0 !important; border-left: 1px solid color-mix(in srgb, var(--on-acc) 30%, transparent) !important; padding: 0 12px !important; cursor: pointer; }
.sc-more > summary::-webkit-details-marker { display: none; }
.sc-more-list { position: absolute; right: 0; top: calc(100% + 6px); z-index: 30; display: grid; min-width: 200px; padding: 6px; border-radius: 14px; border: 1px solid var(--line2); background: var(--db-tile, var(--panel)); box-shadow: 0 16px 40px rgba(0, 0, 0, .4); }
.sc-more-list button { padding: 9px 12px; border: 0; border-radius: 9px; background: none; color: var(--tx); font: inherit; font-size: 13.5px; font-weight: 700; text-align: left; cursor: pointer; }
.sc-more-list button:hover { background: var(--db-inset, var(--panel2)); }

.sc-layout { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 18px; align-items: start; }
.sc-side { position: sticky; top: 84px; display: grid; gap: 14px; max-height: calc(100vh - 100px); overflow: auto; overscroll-behavior: contain; scrollbar-gutter: stable; padding-right: 6px; margin-right: -6px; }
.sc-main { display: grid; gap: 16px; min-width: 0; }
.sc-panel { padding: 18px; border-radius: 20px; border: 1px solid var(--line); background: var(--db-tile, var(--panel)); }
.sc-panel-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.sc-h { margin: 0 0 12px; font-family: var(--body); font-size: 12px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; color: var(--tx2); }
.sc-label { display: block; margin: 12px 0 6px; font-size: 12px; font-weight: 800; color: var(--tx2); }
.sc-small { margin: 6px 0 0; color: var(--tx2); font-size: .8rem; line-height: 1.5; }
.sc-small a { color: var(--acc); }
.sc-check { display: flex; gap: 8px; align-items: center; margin-top: 10px; font-size: .9rem; cursor: pointer; }
.sc-check input { accent-color: var(--acc); width: 17px; height: 17px; }
body.dash-page .sc-panel select, body.dash-page .sc-panel input[type="text"], body.dash-page .sc-panel input[type="url"] { width: 100%; box-sizing: border-box; min-height: 42px; padding: 0 12px; border-radius: 12px; }
.sc-title { width: 100%; box-sizing: border-box; height: auto !important; min-height: 0 !important; line-height: 1.2 !important; padding: 10px 2px 12px !important; border: 0 !important; border-bottom: 2px solid var(--line2) !important; border-radius: 0 !important; background: transparent !important; color: var(--tx); font-family: var(--head); font-size: clamp(28px, 3.4vw, 44px); letter-spacing: .01em; }
.sc-title:focus { outline: none; border-bottom-color: var(--acc) !important; box-shadow: none !important; }

.sc-ready ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: .88rem; }
.sc-ready li { display: flex; gap: 8px; align-items: baseline; color: var(--tx2); }
.sc-ready li span { flex: 0 0 18px; display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; font-size: 11px; font-weight: 900; }
.sc-ready li.is-ok { color: var(--tx); }
.sc-ready li.is-ok span { background: var(--grn); color: #0A1400; }
.sc-ready li.is-needed { color: var(--tx); }
.sc-ready li.is-needed span { background: var(--red); color: #fff; }
.sc-ready li.is-tip span { border: 1px solid var(--line2); }
.sc-ready.is-flash { animation: sc-flash .9s ease 2; }
@keyframes sc-flash { 50% { box-shadow: 0 0 0 4px var(--red); } }

.sc-switch { margin: 0 0 12px; }
.sc-switch-row { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; align-items: center; padding: 8px 10px; margin: 0 -10px; border-radius: 12px; cursor: pointer; }
.sc-switch-row:hover { background: var(--db-inset, var(--panel2)); }
.sc-switch-row input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.sc-switch-ui { position: relative; width: 38px; height: 22px; border-radius: 999px; background: var(--line2-grey, var(--line2)); transition: background-color .15s; }
.sc-switch-ui::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform .15s; }
.sc-switch-row input:checked + .sc-switch-ui { background: var(--acc); }
.sc-switch-row input:checked + .sc-switch-ui::after { transform: translateX(16px); }
.sc-switch-row input:focus-visible + .sc-switch-ui { outline: 3px solid var(--acc); outline-offset: 2px; }
.sc-switch-row b { display: block; font-size: .92rem; color: var(--tx); }
.sc-switch-row small { display: block; color: var(--tx2); font-size: .78rem; line-height: 1.4; }
.sc-switch-more { padding: 6px 0 4px 50px; }
.sc-switch-more[hidden] { display: none; }
.sc-flags { margin: 6px 0 0; padding: 0; border: 0; }
.sc-flags legend { font-size: 11px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; color: var(--tx2); }

.sc-add { display: grid; gap: 12px; margin: 0 0 14px; }
.sc-yt label { display: block; margin: 0 0 6px; font-size: 12px; font-weight: 800; color: var(--tx2); }
.sc-yt-row { display: flex; gap: 8px; }
.sc-yt-row input { flex: 1 1 auto; }
.sc-yt-preview { display: flex; gap: 10px; align-items: center; margin-top: 8px; color: var(--tx2); font-size: .86rem; }
.sc-yt-preview[hidden] { display: none; }
.sc-yt-preview img { width: 120px; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 8px; }
.sc-uploads { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.sc-uploads:empty { display: none; }
.sc-uploads li { display: grid; grid-template-columns: minmax(0, 1fr) 120px auto; gap: 10px; align-items: center; font-size: .82rem; color: var(--tx2); }
.sc-up-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sc-up-bar { height: 6px; border-radius: 999px; background: var(--line-grey, var(--line)); overflow: hidden; }
.sc-up-bar i { display: block; width: 0; height: 100%; background: var(--acc); transition: width .2s; }
.sc-uploads li.is-done .sc-up-state { color: var(--grn); }
.sc-uploads li.is-bad { color: var(--red); }
.sc-uploads li.is-bad .sc-up-bar i { background: var(--red); }

.sc-media-empty { margin: 0; padding: 14px; border-radius: 14px; background: var(--db-inset, var(--panel2)); color: var(--tx2); font-size: .9rem; line-height: 1.6; }
.sc-tiles { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.sc-tile { display: grid; gap: 8px; align-content: start; padding: 8px; border-radius: 16px; border: 1px solid var(--line); background: var(--db-inset, var(--panel2)); }
.sc-tile.is-cover { border-color: var(--acc); box-shadow: 0 0 0 1px var(--acc); }
.sc-tile.is-dragging { opacity: .5; }
.sc-tile-pic { position: relative; overflow: hidden; border-radius: 11px; aspect-ratio: 4 / 3; background: var(--bg); }
.sc-tile-pic img { display: block; width: 100%; height: 100%; object-fit: cover; }
.sc-tile-none { display: grid; place-items: center; height: 100%; font-size: 2rem; color: var(--acc); }
.sc-tile-kind { position: absolute; left: 8px; bottom: 8px; padding: 2px 8px; border-radius: 999px; background: rgba(10, 10, 10, .78); color: #fff; font-size: 11px; font-weight: 800; }
.sc-cover-badge { position: absolute; left: 8px; top: 8px; padding: 3px 9px; border-radius: 999px; background: var(--acc); color: var(--on-acc, #0A0A0A); font-size: 11px; font-weight: 900; letter-spacing: .05em; text-transform: uppercase; }
.sc-handle { position: absolute; right: 8px; top: 8px; width: 32px; height: 32px; border-radius: 9px; border: 0; background: rgba(10, 10, 10, .75); color: #fff; font-weight: 900; letter-spacing: -2px; cursor: grab; touch-action: none; }
.sc-handle:focus-visible { outline: 3px solid var(--acc); outline-offset: 2px; }
.sc-tile-do { display: flex; flex-wrap: wrap; gap: 4px; }
.sc-tile-do form { margin: 0; }
.sc-tile-do button { min-height: 32px; padding: 0 10px; border-radius: 9px; border: 1px solid var(--line2); background: var(--db-tile, var(--panel)); color: var(--tx); font: inherit; font-size: 12.5px; font-weight: 800; cursor: pointer; }
.sc-tile-do button:hover:not(:disabled) { border-color: var(--acc); color: var(--acc); }
.sc-tile-do button:disabled { opacity: .4; cursor: default; }
.sc-tile-do .sc-remove:hover { border-color: var(--red) !important; color: var(--red) !important; }
.sc-tile audio { width: 100%; height: 36px; }
.sc-yt-link { font-size: .8rem; color: var(--acc); font-weight: 800; }
.sc-alt { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 6px; margin: 0; }
.sc-alt label { grid-column: 1 / -1; font-size: 11px; font-weight: 800; color: var(--tx2); }
body.dash-page .sc-alt input { min-height: 36px; padding: 0 10px; border-radius: 10px; font-size: 13px; }
.sc-alt button[hidden] { display: none; }
.sc-poster { display: flex; gap: 6px; align-items: center; margin: 0; font-size: 12.5px; }
.sc-poster-pick { position: relative; color: var(--acc); font-weight: 800; cursor: pointer; }
.sc-poster-pick input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; }
.sc-poster button[hidden] { display: none; }
.sc-nudge { margin: 12px 0 0; padding: 10px 14px; border-radius: 12px; border: 1px solid color-mix(in srgb, var(--ylw) 50%, transparent); color: var(--tx); font-size: .86rem; line-height: 1.5; }

.sc-cover { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); }
.sc-cover-head { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: baseline; margin-bottom: 10px; font-size: .88rem; }
.sc-cover-body { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 14px; align-items: start; }
.sc-focus { position: relative; border-radius: 12px; overflow: hidden; cursor: crosshair; }
.sc-focus img { display: block; width: 100%; height: auto; user-select: none; }
.sc-focus-dot { position: absolute; left: 50%; top: 50%; width: 22px; height: 22px; margin: -11px 0 0 -11px; border-radius: 50%; border: 3px solid #fff; box-shadow: 0 0 0 2px rgba(0, 0, 0, .5), 0 0 12px rgba(0, 0, 0, .5); pointer-events: none; }
.sc-previews { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; align-items: end; }
.sc-prev { margin: 0; }
.sc-prev span { display: block; overflow: hidden; border-radius: 10px; border: 1px solid var(--line); }
.sc-prev.is-current span { border: 2px solid var(--acc); }
.sc-prev img { display: block; width: 100%; height: 100%; object-fit: cover; }
.sc-prev figcaption { margin-top: 4px; color: var(--tx2); font-size: 11px; font-weight: 700; }

.sc-rte textarea { width: 100%; box-sizing: border-box; }
.sc-rte { display: grid; }
.sc-rte-edit { min-height: 150px; padding: 12px 14px; border-radius: 14px 14px 0 0; border: 1px solid var(--line2); border-bottom: 0; background: var(--db-inset, var(--panel)); color: var(--tx); line-height: 1.7; outline: none; }
.sc-rte-edit:focus { border-color: var(--acc); }
.sc-rte-edit:empty::before { content: attr(data-placeholder); color: var(--tx2); }
.sc-rte-edit ul, .sc-rte-edit ol { padding-left: 22px; }
.sc-rte-edit a { color: var(--acc); }
.sc-rte-bar { display: flex; gap: 4px; padding: 6px; border-radius: 0 0 14px 14px; border: 1px solid var(--line2); background: var(--db-tile, var(--panel)); }
.sc-rte-bar button { min-width: 34px; height: 32px; border-radius: 8px; border: 0; background: transparent; color: var(--tx); font-weight: 900; cursor: pointer; }
.sc-rte-bar button:hover { background: var(--db-inset, var(--panel2)); color: var(--acc); }
.sc-rte-bar button[data-cmd="italic"] { font-style: italic; }

.sc-chips { margin: 0 0 14px; padding: 0; border: 0; }
.sc-chips legend { display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline; margin-bottom: 8px; font-size: 13px; font-weight: 900; color: var(--tx); }
.sc-chips-sum { font-weight: 700; color: var(--tx2); font-size: 12.5px; }
.sc-chip-list { display: flex; flex-wrap: wrap; gap: 6px; }
.sc-chip { min-height: 32px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--line2); background: transparent; color: var(--tx); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
.sc-chip:hover { border-color: var(--acc); }
.sc-chip.is-on { background: color-mix(in srgb, var(--acc) 18%, transparent); border-color: var(--acc); }
.sc-chip.is-main { background: var(--acc); color: var(--on-acc, #0A0A0A); }
.sc-chip.is-main::before { content: "\2605  "; }
.sc-chip:focus-visible { outline: 3px solid var(--acc); outline-offset: 2px; }
.sc-tags { margin-top: 6px; }
.sc-count { font-size: 12px; font-weight: 900; color: var(--tx2); }
.sc-count.is-full { color: var(--ylw); }
.sc-tagfield { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; min-height: 44px; padding: 6px 8px; border-radius: 14px; border: 1px solid var(--line2); background: var(--db-inset, var(--panel)); cursor: text; }
.sc-tagfield:focus-within { border-color: var(--acc); }
.sc-taglist { display: contents; list-style: none; }
.sc-taglist li { display: inline-flex; align-items: center; gap: 4px; padding: 3px 4px 3px 10px; border-radius: 999px; background: color-mix(in srgb, var(--acc) 16%, transparent); font-size: 13px; font-weight: 700; }
.sc-taglist button { width: 22px; height: 22px; border-radius: 50%; border: 0; background: transparent; color: var(--tx); cursor: pointer; font-size: 15px; line-height: 1; }
.sc-taglist button:hover { background: var(--red); color: #fff; }
body.dash-page .sc-tagentry { flex: 1 1 120px; min-width: 100px; min-height: 30px !important; padding: 0 6px !important; border: 0 !important; background: transparent !important; box-shadow: none !important; color: var(--tx); font: inherit; }
.sc-suggest { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 10px 0 0; font-size: 12.5px; color: var(--tx2); }
.sc-suggest-tag { padding: 3px 10px; border-radius: 999px; border: 1px dashed var(--line2); background: transparent; color: var(--tx); font: inherit; font-size: 12.5px; cursor: pointer; }
.sc-suggest-tag:hover { border-color: var(--acc); color: var(--acc); }
.sc-suggest-tag[hidden] { display: none; }

.sc-dock { display: none; }
@media (max-width: 1000px) {
  .sc-layout { grid-template-columns: 1fr; }
  .sc-side { position: static; max-height: none; overflow: visible; order: 2; }
  .sc-top { top: var(--dash-top-h, 68px); }
  .sc-cover-body { grid-template-columns: 1fr; }
  .sc-dock { position: fixed; left: 16px; right: 16px; bottom: calc(var(--dash-tabs-h, 84px) + 22px); z-index: 30; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 8px 8px 16px; border-radius: 999px; border: 1px solid var(--line2); background: var(--db-tile, var(--panel)); box-shadow: 0 12px 30px rgba(0, 0, 0, .35); }
  .sc-page .dash-wrap { padding-bottom: 80px; }
  .sc-primary { display: none; }
}
@media (max-width: 560px) {
  .pf-drop { grid-template-columns: 1fr; }
  .pf-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .sc-tiles { grid-template-columns: 1fr 1fr; }
}
/* The Dash's pill buttons set display, which beats [hidden]: said again. */
body.dash-page .sc-alt [hidden], body.dash-page .sc-poster [hidden], body.dash-page .pf-drop [hidden] { display: none !important; }

/* ---------------- Alley services: the editor wide, the list beside it ---------------- */
.svx-layout { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 16px; align-items: start; }
.svx-main { min-width: 0; }
.svx-editor h3 em { font-style: normal; color: var(--acc); }
.svx-side { position: sticky; top: 16px; min-width: 0; }
.svx-list { margin: 0; }
.svx-list-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 12px; }
.svx-list-head h3 { margin: 0 !important; }
.svx-list-head h3 span { font-weight: 700; letter-spacing: 0; text-transform: none; }
.svx-empty { margin: 0; color: var(--tx2); font-size: .88rem; line-height: 1.6; }
.svx-items { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.svx-item { border-radius: 14px; border: 1px solid var(--line); background: var(--db-inset, var(--panel2)); transition: border-color .15s; }
.svx-item:hover { border-color: var(--acc); }
.svx-item.is-current { border-color: var(--acc); box-shadow: 0 0 0 1px var(--acc); }
.svx-open { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 8px; align-items: center; padding: 10px 12px 6px; color: var(--tx); text-decoration: none; }
.svx-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 900; font-size: .92rem; }
.svx-open:hover .svx-title { color: var(--acc); }
.svx-open .ss-pill { margin-left: 0; }
.svx-open small { grid-column: 1 / -1; color: var(--tx2); font-size: .76rem; }
.svx-open .ss-line { margin-top: 0; }
.svx-do { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 12px 10px; }
.svx-do form { margin: 0; }
body.dash-page .svx-do .ss-quick select { min-height: 30px; padding: 0 8px; font-size: 12px; }
@media (max-width: 1100px) {
  .svx-layout { grid-template-columns: minmax(0, 1fr) 280px; }
}
@media (max-width: 860px) {
  .svx-layout { grid-template-columns: 1fr; }
  .svx-side { position: static; }
}

/* However many services: the list keeps to the screen and scrolls inside
   itself, rows are one tight line of name and status over one of details,
   and past a handful a search and status chips appear (alley-services.js). */
.svx-list { display: flex; flex-direction: column; max-height: calc(100vh - 32px); box-sizing: border-box; }
.svx-list-head { flex: 0 0 auto; }
.svx-items { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; margin-right: -8px; padding-right: 8px; scrollbar-width: thin; gap: 6px; }
.svx-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; border-radius: 12px; }
.svx-item[hidden] { display: none; }
.svx-open { padding: 8px 4px 8px 10px; row-gap: 1px; }
.svx-title { font-size: .88rem; }
.svx-open small { font-size: .74rem; }
.svx-do { flex-direction: row; gap: 4px; padding: 6px 8px 6px 0; }
body.dash-page .svx-do .ss-quick select { min-height: 28px; padding: 0 6px; font-size: 11.5px; max-width: 92px; }
.svx-remove { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; border: 1px solid var(--line2); background: transparent; color: var(--tx2); font-size: 12px; cursor: pointer; }
.svx-remove:hover { border-color: var(--red); color: var(--red); }
.svx-dup svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.svx-dup:hover { border-color: var(--acc); color: var(--acc); }
.svx-find { flex: 0 0 auto; display: grid; gap: 8px; margin: 0 0 10px; }
.svx-find[hidden] { display: none; }
body.dash-page .svx-find input[type="search"] { width: 100%; box-sizing: border-box; min-height: 36px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--line2); background: var(--db-inset, var(--panel)); color: var(--tx); font: inherit; font-size: 13px; }
.svx-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.svx-chips button { min-height: 26px; padding: 0 9px; border-radius: 999px; border: 1px solid var(--line2); background: transparent; color: var(--tx2); font: inherit; font-size: 11.5px; font-weight: 800; cursor: pointer; }
.svx-chips button span { opacity: .7; }
.svx-chips button.is-on { background: var(--acc); border-color: var(--acc); color: var(--on-acc, #0A0A0A); }
.svx-chips button:focus-visible, .svx-remove:focus-visible { outline: 3px solid var(--acc); outline-offset: 2px; }
.svx-empty[hidden] { display: none; }
@media (max-width: 860px) {
  .svx-list { max-height: 70vh; }
}
.svx-title { white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; line-height: 1.3; }
.svx-item[data-status="draft"] .svx-title, .svx-item[data-status="unlisted"] .svx-title { color: var(--tx2); }

/* ---------------- request forms: questions, add-ons, terms (RequestForm) ---------------- */
/* The brief form */
.rf-group { margin: 0 0 22px; padding: 16px 18px 4px; border: 2px solid var(--line2); background: var(--bg2); min-width: 0; }
.rf-group legend { padding: 0 6px; }
.rf-group[hidden] { display: none; }
.rf-q { margin-bottom: 16px; }
.rf-q textarea, .rf-q input[type=text] { width: 100%; box-sizing: border-box; }
.rf-choices { display: grid; gap: 6px; }
.rf-choice { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 2px solid var(--line2); background: var(--panel); cursor: pointer; transition: border-color .2s; }
.rf-choice:hover { border-color: var(--tx3); }
.rf-choice:has(input:checked) { border-color: var(--ylw); }
.rf-choice input { margin: 0; accent-color: var(--ylw); flex: none; }
.rf-choice span { flex: 1; min-width: 0; color: var(--tx); font-weight: 700; }
.rf-choice b { flex: none; color: var(--ylw); font-weight: 900; font-size: .9rem; }
.rf-q.is-invalid .rf-choices, .rf-q.is-invalid textarea, .rf-q.is-invalid input[type=text] { outline: 2px solid var(--red, #ff5a5a); outline-offset: 2px; }
.rf-estimate { margin: -8px 0 22px; padding: 12px 14px; border-left: 3px solid var(--ylw); background: var(--bg2); color: var(--tx2); }
.rf-estimate b { color: var(--tx); }
.rf-estimate[hidden] { display: none; }
.rf-terms { margin-bottom: 22px; }
.rf-terms[hidden], .rf-terms-extra[hidden] { display: none; }
.rf-terms-text { max-height: 260px; overflow: auto; padding: 14px 16px; border: 2px solid var(--line2); background: var(--bg2); color: var(--tx2); line-height: 1.65; overscroll-behavior: contain; }
.rf-terms-text p { margin: 0; }
.rf-terms-text:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; }
.rf-terms-extra { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line2); }
.rf-terms-extra b { display: block; margin-bottom: 4px; color: var(--tx); }
.rf-agree { display: flex; align-items: flex-start; gap: 10px; margin-top: 12px; font-weight: 800; color: var(--tx); cursor: pointer; }
.rf-agree input { margin-top: 3px; accent-color: var(--ylw); flex: none; }
.rf-terms.is-invalid .rf-agree { color: var(--red, #ff5a5a); }

/* On the public profile and service page */
.rf-public-terms { margin-top: 22px; border: 2px solid var(--line); background: var(--panel); }
.rf-public-terms summary { padding: 14px 18px; cursor: pointer; font-weight: 900; color: var(--tx); }
.rf-public-terms[open] summary { border-bottom: 2px solid var(--line2); }
.rf-public-terms .rf-terms-text { max-height: 360px; margin: 14px 18px 0; }
.rf-public-terms > p { margin: 10px 18px 16px; }
.sv-addons { margin-top: 28px; }

/* The builder in the service editor */
.rfb-preview { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.rfb-preview:empty { display: none; }
.rfb-preview li { display: inline-flex; gap: 6px; align-items: baseline; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--line2); font-size: 12.5px; color: var(--tx2); max-width: 100%; }
.rfb-preview li span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rfb-preview li b { color: var(--acc); font-weight: 900; white-space: nowrap; }
.rfb-preview li b.is-free { color: var(--tx3); font-weight: 700; }
.rfb-preview li.is-bad { border-color: var(--red, #ff5a5a); }
.rfb-preview li.is-bad b { color: var(--red, #ff5a5a); }
.rfb-error { margin: 0; color: var(--red, #ff5a5a); font-weight: 800; font-size: 13px; }

/* What was sent: answers and agreed terms, on the job pages */
.rf-answers dl { margin: 0; display: grid; gap: 14px; }
.rf-answers dt { font-size: .66rem; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; color: var(--tx3); }
.rf-answers dd { margin: 4px 0 0; color: var(--tx); }
.rf-picked { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.rf-picked li { display: flex; justify-content: space-between; gap: 12px; font-weight: 700; }
.rf-picked b { color: var(--acc); white-space: nowrap; }
.rf-picked small { color: var(--tx3); font-weight: 700; }
.rf-addons { display: flex; justify-content: space-between; gap: 12px; margin: 16px 0 4px; padding-top: 12px; border-top: 1px solid var(--line2); font-weight: 900; color: var(--tx); }
.rf-agreed details { margin-top: 8px; }
.rf-agreed summary { cursor: pointer; font-weight: 800; color: var(--acc); }
.rf-agreed .rf-terms-text { margin-top: 10px; max-height: 320px; border-width: 1px; border-radius: 10px; }
.rf-quote-hint { margin-top: 8px; }
@media (max-width: 560px) {
  .rf-group { padding: 14px 12px 2px; }
}

/* ---------------- the top of an Alley page: whose page, banner, announcement (AlleyBanner) ---------------- */
.al-own-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin: 0 0 18px; padding: 10px 14px; border: 2px dashed var(--line2); background: rgba(22, 22, 21, .78); color: var(--tx2); font-size: .92rem; }
.al-own-bar a { margin-left: auto; color: var(--ylw); font-weight: 800; text-decoration: none; }
.al-own-bar a:hover { text-decoration: underline; }
.al-own-bar.is-preview { border-style: solid; border-color: var(--ylw); background: rgba(255, 214, 10, .08); color: var(--tx); }
.al-own-bar.is-preview b { padding: 2px 8px; background: var(--ylw); color: #0A0A0A; font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; }
.al-banner { position: relative; margin: 0 0 22px; aspect-ratio: 4 / 1; min-height: 150px; max-height: 320px; width: 100%; overflow: hidden; border: 2px solid var(--line2); background: var(--panel2); }
.al-banner img { display: block; width: 100%; height: 100%; object-fit: cover; }
.al-banner::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 45%, rgba(10, 10, 10, .55)); pointer-events: none; }
.al-note-pin { display: flex; align-items: flex-start; gap: 12px; margin: 0 0 22px; padding: 12px 16px; border: 2px solid var(--line2); border-left-width: 6px; background: rgba(22, 22, 21, .85); color: var(--tx); font-weight: 700; line-height: 1.5; }
.al-note-pin.is-news { border-left-color: var(--ylw); }
.al-note-pin.is-open { border-left-color: var(--grn); }
.al-note-pin.is-away { border-left-color: var(--tx3); color: var(--tx2); }
.al-note-icon { flex: none; font-size: 1.05rem; line-height: 1.4; }
.al-note-pin.is-open .al-note-icon { color: var(--grn); }
.al-note-text { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.al-note-pin small { flex: none; padding-top: 2px; color: var(--tx3); font-weight: 800; font-size: .78rem; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
.sv-page .al-own-bar, .sv-page .al-note-pin { margin-top: 16px; }
@media (max-width: 720px) {
  .al-banner { aspect-ratio: 5 / 2; min-height: 120px; margin-bottom: 16px; }
  .al-note-pin { flex-wrap: wrap; }
  .al-note-pin small { width: 100%; padding-left: 30px; }
  .al-own-bar a { margin-left: 0; }
}

/* The Dash form for it */
.bn-preview { width: 100%; box-sizing: border-box; aspect-ratio: 4 / 1; min-height: 110px; margin: 4px 0 6px; overflow: hidden; border-radius: 12px; border: 1px solid var(--line2); background: var(--db-inset, var(--panel)); }
.bn-preview img { display: block; width: 100%; height: 100%; object-fit: cover; }
.bn-preview.is-empty { display: grid; place-items: center; padding: 16px; text-align: center; color: var(--tx3); font-size: 13px; border-style: dashed; }
.bn-row { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); }
body.dash-page .bn-row select, body.dash-page .bn-note-form select, body.dash-page .bn-note-form input[type=date] { width: 100%; box-sizing: border-box; min-height: 44px; padding: 10px 12px; border-radius: 14px; border: 1px solid var(--line2); background: var(--db-inset, var(--panel)); color: var(--tx); font: inherit; }
body.dash-page:not(.is-light) .bn-note-form input[type=date] { color-scheme: dark; }
.bn-note-form { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line2); }
.bn-count { margin-top: 4px; text-align: right; }
.bn-count.is-near { color: var(--ylw); }
.bn-ended { color: var(--ylw); }
#banner, .bn-form, .bn-note-form, .bn-row > div { min-width: 0; }
.bn-form input[type=file] { width: 100%; max-width: 100%; min-width: 0; box-sizing: border-box; }
@media (max-width: 560px) {
  .bn-row { grid-template-columns: minmax(0, 1fr); }
}

/* ---------------- instant-order services (InstantOrder) ---------------- */
.io-tag { display: inline-flex; align-items: center; gap: 4px; margin-right: 6px; padding: 2px 8px; border-radius: 999px; background: color-mix(in srgb, var(--grn) 18%, transparent); color: var(--grn); font-size: .72rem; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; vertical-align: middle; }
.al-svc-price .io-tag, .sv-price .io-tag { margin-bottom: 4px; }
.ss-pill.is-instant { border-color: color-mix(in srgb, var(--grn) 55%, transparent); color: var(--grn); }
.io-mode { margin: 4px 0 6px; padding: 0; border: 0; min-width: 0; display: grid; gap: 8px; }
body.dash-page .cm-card .io-mode legend { margin: 12px 0 6px; padding: 0; font-size: .7rem; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; color: var(--tx3); }
body.dash-page .cm-card .io-pick { display: flex; align-items: flex-start; gap: 10px; margin: 0; padding: 12px 14px; border: 1px solid var(--line2); border-radius: 12px; background: var(--db-inset, var(--panel)); cursor: pointer; font-size: inherit; letter-spacing: 0; text-transform: none; font-weight: 400; color: var(--tx2); }
body.dash-page .cm-card .io-pick:has(input:checked) { border-color: var(--acc); }
.io-pick input { margin-top: 3px; accent-color: var(--acc); flex: none; }
.io-pick b { display: block; color: var(--tx); font-weight: 900; }
.io-pick small { display: block; margin-top: 2px; color: var(--tx3); font-size: 12.5px; line-height: 1.45; }
.al-pick.is-off { opacity: .45; cursor: not-allowed; }
.io-only[hidden], [data-io-hide][hidden] { display: none; }

/* ---------------- scrollbars inside the Dash, in the partner's colour ----------------
   The editor's side column, the services list, terms boxes: a thin rounded
   thumb in the theme's accent on a clear track, never the browser's grey
   slab. scrollbar-color is the standard (Firefox, Chrome 121+); the
   ::-webkit-scrollbar rules are for Safari and older Chrome. */
.sc-side, .svx-items, .rf-terms-text, .sc-more-list {
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--acc) 55%, transparent) transparent;
}
.sc-side::-webkit-scrollbar, .svx-items::-webkit-scrollbar, .rf-terms-text::-webkit-scrollbar, .sc-more-list::-webkit-scrollbar { width: 8px; height: 8px; }
.sc-side::-webkit-scrollbar-track, .svx-items::-webkit-scrollbar-track, .rf-terms-text::-webkit-scrollbar-track, .sc-more-list::-webkit-scrollbar-track { background: transparent; }
.sc-side::-webkit-scrollbar-thumb, .svx-items::-webkit-scrollbar-thumb, .rf-terms-text::-webkit-scrollbar-thumb, .sc-more-list::-webkit-scrollbar-thumb { border-radius: 999px; border: 2px solid transparent; background-clip: padding-box; background-color: color-mix(in srgb, var(--acc) 55%, transparent); }
.sc-side::-webkit-scrollbar-thumb:hover, .svx-items::-webkit-scrollbar-thumb:hover, .rf-terms-text::-webkit-scrollbar-thumb:hover, .sc-more-list::-webkit-scrollbar-thumb:hover { background-color: var(--acc); }
@media (max-width: 1000px) {
  .sc-side { padding-right: 0; margin-right: 0; scrollbar-gutter: auto; }
}

/* The quote form's take-home guide: the client's total is exact, the
   artist's share an estimate — labelled so it is never read as a promise. */
.cm-est { margin: 12px 0 4px; padding: 12px 14px; border: 1px dashed var(--line2); border-radius: 12px; background: var(--db-inset, var(--panel)); }
.cm-est-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0 0 8px; color: var(--tx3); font-size: 12.5px; line-height: 1.45; }
.cm-est-tag { padding: 2px 8px; border-radius: 999px; background: color-mix(in srgb, var(--ylw) 18%, transparent); color: var(--ylw); font-size: 10.5px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.cm-est [data-cm-earn] { display: grid; gap: 6px; margin: 0; }
.cm-est-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; color: var(--tx2); }
.cm-est-row b { margin-left: auto; color: var(--tx); font-weight: 900; font-size: 15px; }
.cm-est-row small { flex-basis: 100%; color: var(--tx3); font-size: 12px; }

/* ---------------- the service editor, one step at a time (ServiceWizard) ---------------- */
.sw-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 12px; }
.sw-head h3 { margin: 0 4px 0 0 !important; }
.sw-head .ss-pill { margin-left: 0; }
.sw-steps { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 18px; padding-bottom: 14px; border-bottom: 1px solid var(--line2); }
.sw-step { display: inline-flex; align-items: center; gap: 7px; min-height: 34px; padding: 0 12px 0 5px; border-radius: 999px; border: 1px solid var(--line2); color: var(--tx2); font-size: 13px; font-weight: 800; text-decoration: none; white-space: nowrap; }
.sw-step i { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--db-inset, var(--panel)); color: var(--tx3); font-style: normal; font-size: 11.5px; font-weight: 900; }
a.sw-step:hover { border-color: var(--acc); color: var(--tx); }
.sw-step.is-done i { background: color-mix(in srgb, var(--grn) 22%, transparent); color: var(--grn); }
.sw-step.is-on { border-color: var(--acc); background: color-mix(in srgb, var(--acc) 14%, transparent); color: var(--tx); }
.sw-step.is-on i { background: var(--acc); color: var(--on-acc, #0A0A0A); }
.sw-step.is-locked { opacity: .45; cursor: not-allowed; }
.sw-lede { margin: 0 0 6px; }
.sw-form { display: block; }
.sw-foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px; margin-top: 20px; padding-top: 14px; border-top: 1px solid var(--line2); }
.sw-foot-do { display: inline-flex; flex-wrap: wrap; gap: 8px; align-items: center; }

/* Tucked away until asked for: a service's own terms, a YouTube link, advanced availability. */
.sw-more, .sw-adv { margin-top: 14px; border: 1px solid var(--line2); border-radius: 12px; background: var(--db-inset, var(--panel)); }
.sw-more > summary, .sw-adv > summary { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; padding: 11px 14px; cursor: pointer; list-style: none; font-weight: 800; color: var(--tx); }
.sw-more > summary::-webkit-details-marker, .sw-adv > summary::-webkit-details-marker { display: none; }
.sw-more > summary::before, .sw-adv > summary::before { content: "+"; display: inline-grid; place-items: center; width: 18px; color: var(--acc); font-weight: 900; }
.sw-more[open] > summary::before, .sw-adv[open] > summary::before { content: "–"; }
.sw-adv > summary small { color: var(--tx3); font-weight: 700; font-size: 12px; }
.sw-adv-body { padding: 0 14px 14px; }
/* Inside a tucked-away box: room on the sides of everything, the fields
   their own full width — never padding on the fields themselves, which
   would push a drop-down's text off its middle. */
.sw-more > :not(summary) { margin-left: 14px; margin-right: 14px; }
.sw-more > :last-child { margin-bottom: 14px; }
.sw-more > :is(select, textarea, input) { display: block; width: calc(100% - 28px); box-sizing: border-box; }

/* Status as choices, not a drop-down. */
.sw-status { margin: 4px 0 0; padding: 0; border: 0; min-width: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
body.dash-page .cm-card .sw-status legend { margin: 12px 0 6px; padding: 0; font-size: .7rem; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; color: var(--tx3); grid-column: 1 / -1; }
body.dash-page .cm-card .sw-opt { display: flex; align-items: flex-start; gap: 8px; margin: 0; padding: 10px 12px; border: 1px solid var(--line2); border-radius: 12px; background: var(--db-inset, var(--panel)); cursor: pointer; font-size: inherit; letter-spacing: 0; text-transform: none; font-weight: 400; color: var(--tx2); }
body.dash-page .cm-card .sw-opt:has(input:checked) { border-color: var(--acc); }
.sw-opt input { margin-top: 3px; accent-color: var(--acc); flex: none; }
.sw-opt b { display: block; color: var(--tx); font-weight: 900; }
.sw-opt small { display: block; margin-top: 2px; color: var(--tx3); font-size: 12px; line-height: 1.4; }

/* The request form as a short list; each row edited in a dialog. */
.sw-qs { list-style: none; margin: 12px 0 10px; padding: 0; display: grid; gap: 6px; }
.sw-q { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--line2); border-radius: 12px; background: var(--db-inset, var(--panel)); min-width: 0; }
.sw-q-text { flex: 1; min-width: 0; }
.sw-q-text b { display: block; color: var(--tx); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sw-q-text small { display: block; color: var(--tx3); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sw-q-do { display: inline-flex; gap: 4px; flex: none; }
.sw-q-do > button:not(.btn) { min-width: 32px; min-height: 32px; border-radius: 10px; border: 1px solid var(--line2); background: transparent; color: var(--tx2); font: inherit; font-weight: 900; cursor: pointer; }
.sw-q-do > button:disabled { opacity: .3; cursor: default; }
.sw-empty { margin: 8px 0; }
.sw-empty[hidden] { display: none; }

.sw-dialog { margin: auto; inset: 0; width: min(520px, calc(100vw - 32px)); max-height: calc(100vh - 48px); padding: 0; border: 1px solid var(--line); border-radius: 18px; background: var(--db-tile, var(--panel)); color: var(--tx); box-shadow: 0 24px 60px rgba(0, 0, 0, .5); }
.sw-dialog::backdrop { background: rgba(0, 0, 0, .55); }
.sw-dialog-body { display: grid; gap: 2px; padding: 16px 18px 18px; }
.sw-dialog-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; }
.sw-dialog-head h4 { margin: 0; font-size: 1.05rem; }
.sw-x { width: 34px; height: 34px; border-radius: 10px; border: 1px solid var(--line2); background: transparent; color: var(--tx2); font-size: 20px; line-height: 1; cursor: pointer; }
.sw-dialog label { display: block; margin: 10px 0 5px; font-size: .7rem; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; color: var(--tx3); }
.sw-dialog label.ap-toggle { text-transform: none; letter-spacing: 0; font-size: .9rem; font-weight: 700; color: var(--tx2); }
.sw-dialog input[type=text], .sw-dialog select, .sw-dialog textarea { width: 100%; box-sizing: border-box; min-height: 42px; padding: 9px 12px; border-radius: 12px; border: 1px solid var(--line2); background: var(--db-inset, var(--panel)); color: var(--tx); font: inherit; }
.sw-dialog textarea { min-height: 96px; }
.sw-dialog [data-d-choices][hidden], .sw-dialog .rfb-error[hidden] { display: none; }
.sw-dialog .rfb-preview { margin-top: 8px; }
.sw-dialog-foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 14px; }
.sw-danger { color: var(--red, #ff5a5a) !important; }

/* Review: the card as it shows, and what is still missing. */
.sw-preview { margin: 8px 0 14px; max-width: 420px; }
.sw-check { list-style: none; margin: 0 0 6px; padding: 0; display: grid; gap: 6px; font-size: .9rem; color: var(--tx2); }
.sw-check li span { display: inline-grid; place-items: center; width: 20px; height: 20px; margin-right: 6px; border-radius: 50%; background: var(--db-inset, var(--panel)); font-size: 11px; font-weight: 900; color: var(--tx3); }
.sw-check li.is-ok { color: var(--tx); }
.sw-check li.is-ok span { background: color-mix(in srgb, var(--grn) 22%, transparent); color: var(--grn); }
.sw-check li.is-must span { background: color-mix(in srgb, var(--red, #ff5a5a) 22%, transparent); color: var(--red, #ff5a5a); }
.sw-check a { color: var(--acc); font-weight: 800; }
@media (max-width: 560px) {
  .sw-steps { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: -4px; padding-inline: 4px; }
  .sw-steps::-webkit-scrollbar { display: none; }
  .sw-foot { flex-direction: column-reverse; align-items: stretch; }
  .sw-foot-do { justify-content: flex-end; }
}

/* ---------------- the editor, round two: add-ons, links, terms sets ---------------- */
.sw-q-add { display: flex; flex-wrap: wrap; gap: 8px; }
.sw-subhead { margin: 16px 0 6px; font-size: .7rem; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; color: var(--tx2); }
/* Anything the dialog hides stays hidden, whatever its own display rule (.ap-toggle has one). */
.sw-dialog [hidden] { display: none !important; }
/* Add-ons: the extras first, the group's heading and note after them. */
.sw-dialog.is-addons .sw-dialog-head { order: -3; }
.sw-dialog.is-addons [data-d-addons] { order: -2; }
.sw-addon-lede { margin: 2px 0 10px; font-size: .9rem; line-height: 1.45; color: var(--tx2); }
.sw-addons { list-style: none; margin: 0 0 8px; padding: 0; display: grid; gap: 8px; }
.sw-addon { padding: 10px; border: 1px solid var(--line2); border-radius: 14px; background: color-mix(in srgb, var(--db-inset, var(--panel)) 60%, transparent); }
.sw-addon-row { display: grid; grid-template-columns: minmax(0, 1fr) 150px 32px; gap: 8px; align-items: center; }
.sw-dialog .sw-addon input[type=text] { min-height: 42px; }
/* One price box: the $ / % switch sits inside it, on the left. */
.sw-amt { display: flex; align-items: center; min-height: 42px; border: 1px solid var(--line2); border-radius: 12px; background: var(--db-inset, var(--panel)); overflow: hidden; }
.sw-amt:focus-within { border-color: var(--acc); }
body .sw-dialog .sw-amt input[type=text][data-a] { flex: 1; width: auto; min-width: 0; min-height: 40px; border: 0; border-radius: 0; background: transparent; padding: 8px 10px 8px 8px; font-weight: 800; }
body .sw-dialog .sw-amt input[type=text][data-a]:focus { outline: none; box-shadow: none; }
.sw-unit { display: flex; flex: none; margin: 4px; padding: 2px; border-radius: 9px; background: color-mix(in srgb, var(--tx) 8%, transparent); }
.sw-unit button { width: 28px; height: 28px; padding: 0; border: 0; border-radius: 7px; background: transparent; color: var(--tx3); font: inherit; font-weight: 900; cursor: pointer; }
.sw-unit button[aria-pressed="true"] { background: var(--acc); color: var(--on-acc, #0a0a0a); }
.sw-unit button:focus-visible { outline: 2px solid var(--acc); outline-offset: 1px; }
.sw-addon .sw-x { width: 32px; height: 32px; font-size: 17px; }
.sw-addon-note { display: block; margin: 6px 2px 0; font-size: .78rem; color: var(--tx3); }
.sw-addon-note.is-bad { color: var(--red, #ff5a5a); }
.sw-dialog .sw-addon-more { width: 100%; min-height: 42px; font-family: var(--body, inherit); font-size: .88rem; letter-spacing: normal; text-transform: none; border: 1px dashed var(--line2); border-radius: 12px; background: transparent; color: var(--tx2); font-weight: 800; cursor: pointer; }
.sw-addon-more:hover, .sw-addon-more:focus-visible { border-color: var(--acc); color: var(--acc); }
.sw-dialog-foot > span { margin-left: auto; }
@media (max-width: 480px) {
  .sw-addon-row { grid-template-columns: minmax(0, 1fr) 32px; }
  .sw-addon-row .sw-amt { grid-column: 1; grid-row: 2; }
}
.sw-linkkind { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 14px 8px; }
body.dash-page .cm-card .sw-linkkind label { display: inline-flex; align-items: center; gap: 6px; margin: 0; padding: 6px 12px; border: 1px solid var(--line2); border-radius: 999px; font-size: 13px; letter-spacing: 0; text-transform: none; font-weight: 800; color: var(--tx2); cursor: pointer; }
body.dash-page .cm-card .sw-linkkind label:has(input:checked) { border-color: var(--acc); color: var(--tx); }
.sw-linkkind input { accent-color: var(--acc); }
.sw-more > .cm-hint { padding-top: 6px; }
.ts { margin-top: 6px; }
.ts-list { margin-top: 10px; }

/* TikTok and Behance examples on a service page (alley/_samples). */
.sv-links { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; margin-top: 14px; }
.sv-link { display: grid; gap: 8px; color: var(--tx); text-decoration: none; }
.sv-link-pic { position: relative; display: block; aspect-ratio: 4 / 5; overflow: hidden; border: 2px solid var(--line2); background: var(--panel2); }
.sv-link.is-behance .sv-link-pic { aspect-ratio: 4 / 3; }
.sv-link-pic img { display: block; width: 100%; height: 100%; object-fit: cover; }
.sv-link:hover .sv-link-pic { border-color: var(--ylw); }
.sv-link-text { font-size: .88rem; color: var(--tx2); line-height: 1.4; }
.sv-link-text b { color: var(--tx); }
.sv-frame.is-tiktok { width: 100%; max-width: 340px; height: 740px; border: 0; }
.sv-tile .sv-badge { position: absolute; left: 4px; bottom: 4px; padding: 1px 6px; background: rgba(0, 0, 0, .7); color: #fff; font-size: 10px; font-weight: 900; letter-spacing: .06em; }
.sv-tile { position: relative; }

/* ---------------- the job page, decluttered (account/alley-commission) ----------------
   One "next step" card for the stage the job is at; the artist's own tools
   in the header's More menu; everything else on the side a line that opens. */
.jp-head { align-items: flex-start; }
.jp-head-do { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; }
.jp-head-do form { margin: 0; }
.jp-pin { min-width: 38px; font-size: 16px; line-height: 1; }
.jp-pin.is-on { color: var(--ylw); border-color: color-mix(in srgb, var(--ylw) 55%, transparent); }
.jp-menu { position: relative; }
.jp-menu > summary { list-style: none; cursor: pointer; }
.jp-menu > summary::-webkit-details-marker { display: none; }
.jp-menu-list { position: absolute; right: 0; top: calc(100% + 6px); z-index: 30; display: grid; min-width: 220px; padding: 6px; border-radius: 14px; border: 1px solid var(--line2); background: var(--db-tile, var(--panel)); box-shadow: 0 16px 40px rgba(0, 0, 0, .35); }
.jp-menu-list form { margin: 0; }
.jp-menu-item { display: block; width: 100%; padding: 9px 12px; border: 0; border-radius: 9px; background: none; color: var(--tx); font: inherit; font-size: 13.5px; font-weight: 700; text-align: left; text-decoration: none; cursor: pointer; }
.jp-menu-item:hover { background: var(--db-inset, var(--panel2)); }
.jp-mine { margin: -6px 0 16px; padding: 10px 14px; border: 1px dashed var(--line2); border-radius: 12px; color: var(--tx2); font-size: 13.5px; line-height: 1.55; }
.jp-mine p { margin: 0; }
.jp-mine p + p { margin-top: 8px; }
.jp-mine b { color: var(--tx); }

.jp-next h3 small.jp-due { margin-left: 6px; color: var(--tx3); font-size: .75rem; font-weight: 800; letter-spacing: .06em; text-transform: none; }
.jp-line { margin: 0; font-size: 1.05rem; color: var(--tx); }
.jp-line b { font-size: 1.25rem; }
.jp-change { margin-top: 12px; }
.jp-change > summary { list-style: none; display: inline-flex; cursor: pointer; }
.jp-change > summary::-webkit-details-marker { display: none; }
.jp-change[open] > summary { margin-bottom: 12px; }
.jp-rights > summary small { font-weight: 700; color: var(--tx3); font-size: 12px; }
.jp-rights .lc-quote { margin: 0 14px 14px; }
.jp-decline { margin-top: 14px; }

/* The side: the brief open, the rest one line each. */
.jp-sums { padding: 6px 18px !important; }
.jp-sum { border-top: 1px solid var(--line2); }
.jp-sum:first-child { border-top: 0; }
.jp-sum > summary { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 13px 0; list-style: none; cursor: pointer; font-weight: 800; color: var(--tx); }
.jp-sum > summary::-webkit-details-marker { display: none; }
.jp-sum > summary small { color: var(--tx3); font-weight: 700; font-size: 12.5px; text-align: right; }
.jp-sum > summary::after { content: "+"; flex: none; margin-left: 8px; color: var(--acc); font-weight: 900; }
.jp-sum[open] > summary::after { content: "–"; }
.jp-sum-body { padding: 0 0 14px; }
.jp-sum-body > section { margin: 0 !important; padding: 0 !important; border: 0 !important; background: none !important; box-shadow: none !important; }
.jp-sum-body > section > h3:first-child { display: none; }
@media (max-width: 560px) {
  .jp-head-do { justify-content: flex-start; }
  .jp-menu-list { right: auto; left: 0; }
}

/* =============================================================
   ALLEY PROFILE, DECLUTTERED (account/alley-profile.php,
   assets/js/alley-profile-tabs.js)

   A strip for where they are up to, the four parts of the profile as tabs,
   and their page in small beside it with the way to Portfolio and Services.
   ============================================================= */
.ap-strip {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px;
  margin: 0 0 18px; padding: 12px 16px; border-radius: 14px;
  border: 1px solid var(--line2); background: var(--db-inset, var(--panel));
}
.ap-strip p { margin: 0; flex: 1 1 320px; font-size: 14px; line-height: 1.5; color: var(--tx2); }
.ap-strip b { color: var(--tx); }
.ap-strip form { margin: 0; }
.ap-strip.is-live { border-color: color-mix(in srgb, var(--grn) 55%, transparent); background: color-mix(in srgb, var(--grn) 8%, var(--db-tile, var(--panel))); }
.ap-strip.is-live b { color: var(--grn); }
.ap-strip.is-draft { border-color: color-mix(in srgb, var(--ylw) 60%, transparent); background: color-mix(in srgb, var(--ylw) 8%, var(--db-tile, var(--panel))); }
.ap-strip.is-declined { border-color: color-mix(in srgb, var(--red) 60%, transparent); background: color-mix(in srgb, var(--red) 8%, var(--db-tile, var(--panel))); }
.ap-strip.is-declined b { color: var(--red); }

.ap-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(240px, 300px); gap: 16px; align-items: start; }
.ap-main { margin: 0; min-width: 0; }
.ap-side { display: flex; flex-direction: column; gap: 14px; position: sticky; top: 16px; min-width: 0; }
.ap-side .cm-card { margin: 0; }

.ap-tabs { display: flex; flex-wrap: wrap; gap: 4px 22px; border-bottom: 1px solid var(--line); margin-bottom: 6px; }
.ap-tabs button {
  padding: 0 0 10px; margin-bottom: -1px; border: 0; border-bottom: 2px solid transparent; background: none;
  font: inherit; font-size: 15px; font-weight: 800; color: var(--tx3); cursor: pointer;
}
.ap-tabs button:hover { color: var(--tx); }
.ap-tabs button[aria-selected="true"] { color: var(--tx); border-bottom-color: var(--acc); }
.ap-tabs button:focus-visible { outline: 2px solid var(--acc); outline-offset: 3px; }
.ap-panel[hidden] { display: none; }
.ap-panel > .cm-hint:first-child { margin-top: 12px; }
.ap-rule { height: 1px; margin: 20px 0 6px; background: var(--line); }
.sw-count { font-size: 12px; font-weight: 700; color: var(--tx3); }

/* specialties as chips: the box is there, the chip shows it */
.ap-chips { display: flex; flex-wrap: wrap; gap: 8px; }
body.dash-page .cm-card .ap-chips label {
  display: inline-flex; align-items: center; margin: 0; padding: 7px 13px; border-radius: 999px;
  border: 1px solid var(--line2); font-size: 13px; font-weight: 800; letter-spacing: 0; text-transform: none;
  color: var(--tx2); cursor: pointer;
}
.ap-chips input { position: absolute; opacity: 0; width: 1px; height: 1px; }
body.dash-page .cm-card .ap-chips label:has(input:checked) { border-color: var(--acc); color: var(--tx); background: color-mix(in srgb, var(--acc) 14%, transparent); }
body.dash-page .cm-card .ap-chips label:has(input:focus-visible) { outline: 2px solid var(--acc); outline-offset: 2px; }

/* commission state as four buttons */
.ap-seg { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: 1px solid var(--line2); border-radius: 12px; overflow: hidden; }
body.dash-page .cm-card .ap-seg label {
  display: flex; align-items: center; justify-content: center; margin: 0; min-height: 40px;
  border-left: 1px solid var(--line2); font-size: 13.5px; font-weight: 800; letter-spacing: 0; text-transform: none;
  color: var(--tx2); cursor: pointer;
}
body.dash-page .cm-card .ap-seg label:first-child { border-left: 0; }
.ap-seg input { position: absolute; opacity: 0; width: 1px; height: 1px; }
body.dash-page .cm-card .ap-seg label:has(input:checked) { background: var(--tx); color: var(--bg); }
body.dash-page .cm-card .ap-seg label:has(input:focus-visible) { outline: 2px solid var(--acc); outline-offset: -2px; }
.ap-row2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ap-row2 [hidden] { display: none; }
body.dash-page .cm-card label.ap-toggle { margin-top: 16px !important; }

/* their page, small */
.ap-preview { display: block; padding: 0 !important; overflow: hidden; text-decoration: none; color: var(--tx); }
.ap-preview:hover { border-color: var(--acc); color: var(--tx); }
.ap-preview-cover { display: block; height: 70px; background: var(--db-soft, var(--panel2)) center / cover no-repeat; }
.ap-preview-body { display: flex; flex-direction: column; gap: 4px; padding: 0 16px 16px; }
.ap-preview-face {
  display: grid; place-items: center; width: 56px; height: 56px; margin-top: -28px; box-sizing: border-box;
  border-radius: 50%; object-fit: cover; border: 3px solid var(--bg2); background: var(--db-inset, var(--panel));
}
.ap-preview-face.is-letter { font-family: var(--head); font-size: 22px; color: var(--acc); }
.ap-preview-body b { font-size: 16px; font-weight: 900; overflow-wrap: anywhere; }
.ap-preview-body small { font-size: 13px; color: var(--tx2); line-height: 1.45; }
.ap-preview-status { display: flex; align-items: center; gap: 8px; margin-top: 4px; font-size: 12.5px; font-weight: 800; color: var(--tx2); }
.ap-preview-status .db-dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; background: var(--acc); }
.ap-preview-status .db-dot.is-grn { background: var(--grn); }
.ap-preview-status .db-dot.is-ylw { background: var(--ylw); }
.ap-preview-status .db-dot.is-mute { background: var(--tx3); }
.ap-preview-body em { margin-top: 6px; font-style: normal; font-size: 13px; font-weight: 800; color: var(--acc); }

.ap-links { padding: 4px 16px !important; }
.ap-links a { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 12px 0; border-top: 1px solid var(--line); color: var(--tx); text-decoration: none; font-weight: 800; }
.ap-links a:first-child { border-top: 0; }
.ap-links a small { font-size: 13px; font-weight: 700; color: var(--tx2); }
.ap-links a small::after { content: " ›"; color: var(--tx3); }
.ap-links a:hover span { color: var(--acc); }

.ap-check h3 { margin: 0 0 10px; font-size: 15px; }
.ap-check ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ap-check li { display: flex; align-items: center; gap: 10px; font-size: 13.5px; color: var(--tx2); }
.ap-check li > span { display: inline-grid; place-items: center; flex: none; width: 20px; height: 20px; border-radius: 50%; border: 1px solid var(--line2); font-size: 11px; font-weight: 900; }
.ap-check li.is-done { color: var(--tx); }
.ap-check li.is-done > span { border-color: var(--grn); background: var(--grn); color: #0A1400; }

@media (max-width: 1100px) {
  .ap-layout { grid-template-columns: minmax(0, 1fr); }
  .ap-side { position: static; order: -1; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
}
@media (max-width: 560px) {
  .ap-seg { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.dash-page .cm-card .ap-seg label:nth-child(3) { border-left: 0; }
  body.dash-page .cm-card .ap-seg label:nth-child(n+3) { border-top: 1px solid var(--line2); }
  .ap-row2 { grid-template-columns: minmax(0, 1fr); }
}

/* File types a service delivers (App\Services\ServiceFiles): ticked as
   chips on the Price step, shown as tags on the card and the service page. */
.ft { margin: 14px 0 4px; padding: 0; border: 0; min-width: 0; }
.ft legend { margin: 0 0 8px; padding: 0; font-size: .7rem; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; color: var(--tx3); }
.ft legend .acct-muted { text-transform: none; letter-spacing: normal; font-weight: 600; }
.ft-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.cm-card label.ft-chip { display: inline-flex; margin: 0; font-size: .82rem; font-weight: 700; letter-spacing: normal; text-transform: none; color: var(--tx); cursor: pointer; }
.ft-chip input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.ft-chip span { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border: 1px solid var(--line2); border-radius: 99px; background: var(--panel2); transition: border-color .12s, background-color .12s, color .12s; }
.ft-chip span::before { content: '+'; font-weight: 900; color: var(--tx3); }
.ft-chip:hover span { border-color: var(--acc); }
.ft-chip input:checked + span { border-color: var(--acc); background: color-mix(in srgb, var(--acc) 14%, var(--panel2)); color: var(--acc); }
.ft-chip input:checked + span::before { content: '✓'; color: var(--acc); }
.ft-chip input:focus-visible + span { outline: 2px solid var(--acc); outline-offset: 2px; }
.ft-more { margin-top: 10px; }
.ft-group { margin: 12px 0 6px; font-size: .74rem; font-weight: 800; color: var(--tx3); }
.ft-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; margin: 8px 0; }
.ft-tags span { padding: 2px 9px; border: 1px solid var(--line2); border-radius: 99px; font-size: .72rem; font-weight: 700; }
.ft-tags .ft-tags-h { padding: 0; border: 0; color: var(--tx3); font-weight: 800; text-transform: uppercase; letter-spacing: .1em; font-size: .64rem; }

/* ---------------- Availability step (assets/js/service-availability.js) ---------------- */
.av { --av-open: var(--grn, #4d7c0f); --av-waitlist: var(--ylw, #a16207); --av-closed: var(--red, #dc2626); --av-unlisted: #4f6bdc; --av-draft: var(--tx3); }
.av-status { margin: 4px 0 0; padding: 0; border: 0; min-width: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.av-status legend, .av-opt-h { margin: 6px 0 8px; padding: 0; font-size: .7rem; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; color: var(--tx3); }
.av-status legend .acct-muted { text-transform: none; letter-spacing: normal; font-weight: 600; }
.av-opt-h { margin-top: 18px; }
.av-card { --c: var(--av-draft); }
.cm-card label.av-card { position: relative; display: grid; gap: 4px; align-content: start; margin: 0; padding: 12px; border: 1px solid var(--line2); border-radius: 14px; background: var(--db-inset, var(--panel)); font-size: inherit; font-weight: 400; letter-spacing: normal; text-transform: none; color: var(--tx2); cursor: pointer; transition: border-color .12s, background-color .12s; }
.av .av-card.is-open { --c: var(--av-open); } .av .av-card.is-waitlist { --c: var(--av-waitlist); } .av .av-card.is-closed { --c: var(--av-closed); } .av .av-card.is-unlisted { --c: var(--av-unlisted); }
.av-card input { position: absolute; opacity: 0; pointer-events: none; }
.av-card-top { display: flex; align-items: center; gap: 8px; }
.av-card b { color: var(--tx); font-weight: 900; }
.av-card small { font-size: .74rem; line-height: 1.35; color: var(--tx3); }
.av-ico { display: inline-grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 9px; background: color-mix(in srgb, var(--c, var(--acc)) 14%, transparent); color: var(--c, var(--acc)); font-style: normal; }
.cm-card label.av-card:hover { border-color: color-mix(in srgb, var(--c) 60%, var(--line2)); }
.cm-card label.av-card:has(input:checked) { border: 2px solid var(--c); padding: 11px; background: color-mix(in srgb, var(--c) 9%, var(--db-inset, var(--panel))); }
.cm-card label.av-card:has(input:checked) b { color: var(--c); }
.av-card:has(input:focus-visible) { outline: 2px solid var(--c); outline-offset: 2px; }

.av-sees { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 14px 0 0; padding: 10px 14px; border: 1px dashed var(--line2); border-radius: 12px; font-size: .86rem; color: var(--tx2); }
.av-sees-h { font-size: .66rem; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; color: var(--tx3); }
.av-pill { --c: var(--av-draft); display: inline-flex; align-items: center; gap: 6px; padding: 3px 11px; border-radius: 99px; background: color-mix(in srgb, var(--c) 15%, transparent); color: var(--c); font-weight: 900; font-size: .78rem; }
.av-pill::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.av-pill.is-open { --c: var(--av-open); } .av-pill.is-waitlist { --c: var(--av-waitlist); } .av-pill.is-closed { --c: var(--av-closed); } .av-pill.is-unlisted { --c: var(--av-unlisted); }

.av-row { margin-top: 8px; border: 1px solid var(--line2); border-radius: 14px; background: var(--db-inset, var(--panel)); }
.av-row.is-on:not(.is-solo) { border-color: color-mix(in srgb, var(--acc) 45%, var(--line2)); }
.cm-card label.av-row-head { display: flex; align-items: center; gap: 12px; margin: 0; padding: 12px 14px; font-size: inherit; font-weight: 400; letter-spacing: normal; text-transform: none; color: var(--tx); cursor: pointer; }
.av-row-t { flex: 1; min-width: 0; }
.av-row-t b { display: block; font-weight: 900; }
.av-row-t small { display: block; font-size: .78rem; color: var(--tx3); }
.av-switch { appearance: none; -webkit-appearance: none; flex: none; position: relative; width: 42px; height: 24px; margin: 0; border-radius: 99px; background: var(--line2); cursor: pointer; transition: background-color .15s; }
.av-switch::after { content: ''; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .3); transition: transform .15s; }
.av-switch:checked { background: var(--acc); }
.av-switch:checked::after { transform: translateX(18px); }
.av-switch:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; }
.av-row-body { padding: 0 14px 14px 56px; }
.av.is-js .av-row:not(.is-on) .av-row-body { display: none; }
.av-g3 { display: grid; grid-template-columns: 150px minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
.av-step { display: flex; align-items: center; border: 1px solid var(--line2); border-radius: 12px; background: var(--panel); overflow: hidden; }
.av-step button { flex: none; width: 38px; height: 42px; border: 0; background: transparent; color: var(--acc); font-size: 1.2rem; font-weight: 900; cursor: pointer; }
.av-step button:hover { background: color-mix(in srgb, var(--acc) 10%, transparent); }
body .cm-card .av-step input[type=number][data-av-slots] { flex: 1; width: 100%; min-width: 0; margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; text-align: center; font-weight: 900; -moz-appearance: textfield; }
.av-step input::-webkit-inner-spin-button, .av-step input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.av-meter { display: flex; gap: 4px; margin: 12px 0 6px; }
.av-meter:empty { display: none; }
.av-meter i { flex: 1; max-width: 48px; height: 9px; border-radius: 5px; background: var(--line2); }
.av-meter i.is-used { background: var(--acc); }
.av-round { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; font-size: .8rem; color: var(--tx3); }
.cm-card label.av-check { display: flex; align-items: center; gap: 8px; margin: 10px 0 0; font-size: .86rem; font-weight: 700; letter-spacing: normal; text-transform: none; color: var(--tx2); cursor: pointer; }
.av-round label.av-check { margin: 0; color: var(--acc); }
.av-check input { accent-color: var(--acc); }
body .cm-card .av-times input[type=datetime-local] { width: 100%; box-sizing: border-box; min-height: 44px; padding: 8px 12px; border: 1px solid var(--line2); border-radius: 12px; background: var(--panel); color: var(--tx); font: inherit; font-size: .9rem; }
.av-times { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr) minmax(0, 1.7fr) minmax(0, 1fr); gap: 10px; }
.av-line { --c: var(--av-draft); list-style: none; display: flex; margin: 4px 0 14px; padding: 0; }
.av-line li { --c: var(--av-draft); position: relative; flex: 1; display: grid; gap: 2px; padding: 16px 6px 0 0; font-size: .76rem; color: var(--tx3); }
.av-line li.is-open { --c: var(--av-open); } .av-line li.is-waitlist { --c: var(--av-waitlist); } .av-line li.is-closed { --c: var(--av-closed); } .av-line li.is-unlisted { --c: var(--av-unlisted); }
.av-line li::before { content: ''; position: absolute; top: 3px; left: 0; width: 11px; height: 11px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 22%, transparent); }
.av-line li:not(:last-child)::after { content: ''; position: absolute; top: 8px; left: 18px; right: 6px; height: 2px; background: linear-gradient(90deg, var(--c), color-mix(in srgb, var(--c) 30%, var(--line2))); }
.av-line li.is-none::before { background: transparent; border: 2px dashed var(--line2); box-shadow: none; width: 9px; height: 9px; }
.av-line b { color: var(--tx); font-size: .8rem; }
@media (max-width: 760px) {
  .av-status { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .av-g3 { grid-template-columns: 1fr 1fr; }
  .av-g3 > :first-child { grid-column: 1 / -1; max-width: 180px; }
  .av-times { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); }
  .av-row-body { padding-left: 14px; }
}

/* ---------------- Review step ---------------- */
.rv { --av-open: var(--grn, #4d7c0f); --av-waitlist: var(--ylw, #a16207); --av-closed: var(--red, #dc2626); --av-unlisted: #4f6bdc; --av-draft: var(--tx3); }
.rv-bar { --c: var(--av-open); display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 14px 16px; border: 1px solid color-mix(in srgb, var(--c) 45%, transparent); border-radius: 14px; background: color-mix(in srgb, var(--c) 10%, var(--db-inset, var(--panel))); }
.rv-bar.is-must { --c: var(--av-closed); }
.rv-bar.is-live.is-waitlist { --c: var(--av-waitlist); } .rv-bar.is-live.is-closed { --c: var(--av-closed); } .rv-bar.is-live.is-unlisted { --c: var(--av-unlisted); }
.rv-bar-ico { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 50%; background: var(--c); color: #fff; font-weight: 900; font-size: 1.1rem; }
.rv-bar-t { flex: 1; min-width: 180px; }
.rv-bar-t b { display: block; color: var(--c); font-weight: 900; font-size: 1rem; }
.rv-bar-t small { display: block; font-size: .82rem; color: var(--tx2); }
.rv-pips { display: flex; gap: 4px; }
.rv-pips i { width: 18px; height: 6px; border-radius: 3px; background: color-mix(in srgb, var(--c) 22%, transparent); }
.rv-pips i.is-on { background: var(--c); }
.rv-cols { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 18px; margin-top: 16px; }
.rv-h { margin: 0 0 8px; font-size: .7rem; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; color: var(--tx3); }
.rv-steps { list-style: none; margin: 0; padding: 0; border: 1px solid var(--line2); border-radius: 14px; background: var(--db-inset, var(--panel)); overflow: hidden; }
.rv-steps li { --c: var(--av-open); display: grid; grid-template-columns: 24px 96px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 11px 14px; border-top: 1px solid var(--line2); font-size: .86rem; }
.rv-steps li:first-child { border-top: 0; }
.rv-steps li.is-tip { --c: var(--av-waitlist); } .rv-steps li.is-must { --c: var(--av-closed); background: color-mix(in srgb, var(--av-closed) 7%, transparent); } .rv-steps li.is-none { --c: var(--tx3); }
.rv-mark { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: color-mix(in srgb, var(--c) 15%, transparent); color: var(--c); font-weight: 900; font-size: .8rem; }
.rv-k { font-weight: 800; color: var(--tx2); }
.rv-v { min-width: 0; color: var(--tx); overflow-wrap: anywhere; }
.rv-v em { font-style: normal; color: var(--c); font-weight: 700; }
.rv-steps li.is-must .rv-v, .rv-steps li.is-none .rv-v { color: var(--c); }
.rv-steps a { font-size: .8rem; font-weight: 800; color: var(--acc); }
.rv-steps li.is-must a { color: var(--c); }
.rv-card { margin: 0; max-width: none; }
.rv .av { margin-top: 18px; }
.rv-publish { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 760px) {
  .rv-cols { grid-template-columns: 1fr; }
  .rv-publish { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rv-steps li { grid-template-columns: 24px minmax(0, 1fr) auto; }
  .rv-steps li .rv-k { grid-column: 2; }
  .rv-steps li .rv-v { grid-column: 2 / -1; grid-row: 2; }
}

/* ---------------- Basics step ---------------- */
.bs-label { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.bs-count { font-size: .72rem; font-weight: 700; color: var(--tx3); font-variant-numeric: tabular-nums; }
.bs-count.is-near { color: var(--ylw, #a16207); }
.bs-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 8px 0 0; }
.bs-chips > span { font-size: .78rem; color: var(--tx3); margin-right: 2px; }
.bs-chips button { padding: 5px 12px; border: 1px solid var(--line2); border-radius: 99px; background: var(--db-inset, var(--panel)); color: var(--tx2); font: inherit; font-size: .8rem; font-weight: 700; cursor: pointer; }
.bs-chips button:hover, .bs-chips button.is-on { border-color: var(--acc); color: var(--acc); }
.bs-chips button.is-on { background: color-mix(in srgb, var(--acc) 12%, var(--db-inset, var(--panel))); }
.bs-cols { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.bs-preview-h { margin: 12px 0 6px; font-size: .7rem; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; color: var(--tx3); }
.bs-card { padding: 14px; border: 1px solid var(--line2); border-radius: 14px; background: var(--db-inset, var(--panel)); }
.bs-card b { display: block; font-weight: 900; overflow-wrap: anywhere; }
.bs-ph { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; margin: 10px 0; }
.bs-ph i { aspect-ratio: 1; border-radius: 7px; background: color-mix(in srgb, var(--tx) 8%, transparent); }
.bs-card p { margin: 0; font-size: .86rem; color: var(--tx2); overflow-wrap: anywhere; }
.bs-card p:empty { display: none; }
.bs-mode { --q: #6d5bd0; --i: var(--ylw, #a16207); margin: 8px 0 0; padding: 0; border: 0; min-width: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
body.dash-page .cm-card .bs-mode legend { margin: 12px 0 8px; padding: 0; font-size: .7rem; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; color: var(--tx3); }
.bs-pick.is-quote { --c: var(--q); } .bs-pick.is-instant { --c: var(--i); }
.cm-card label.bs-pick { position: relative; display: grid; gap: 6px; align-content: start; margin: 0; padding: 14px; border: 1px solid var(--line2); border-radius: 14px; background: var(--db-inset, var(--panel)); font-size: inherit; font-weight: 400; letter-spacing: normal; text-transform: none; color: var(--tx2); cursor: pointer; }
.bs-pick input { position: absolute; opacity: 0; pointer-events: none; }
.bs-pick-top { display: flex; align-items: center; gap: 8px; }
.bs-pick b { color: var(--tx); font-weight: 900; }
.bs-pick small { font-size: .8rem; line-height: 1.4; color: var(--tx3); }
.bs-ico { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; background: color-mix(in srgb, var(--c) 15%, transparent); color: var(--c); font-style: normal; }
.bs-flow { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; font-size: .72rem; color: var(--tx3); }
.bs-flow span { padding: 2px 8px; border-radius: 99px; background: color-mix(in srgb, var(--c) 10%, transparent); color: var(--tx2); font-weight: 700; }
.cm-card label.bs-pick:hover { border-color: color-mix(in srgb, var(--c) 60%, var(--line2)); }
.cm-card label.bs-pick:has(input:checked) { border: 2px solid var(--c); padding: 13px; background: color-mix(in srgb, var(--c) 9%, var(--db-inset, var(--panel))); }
.cm-card label.bs-pick:has(input:checked) b { color: var(--c); }
.bs-pick:has(input:focus-visible) { outline: 2px solid var(--c); outline-offset: 2px; }
@media (max-width: 700px) {
  .bs-cols, .bs-mode { grid-template-columns: 1fr; }
  .bs-preview { display: none; }
}

/* ---------------- Commission job page, round two ---------------- */
.jp-chip, .jp-stage, .jp-due-chip { --c: var(--tx3); }
.jp-chip.is-requested, .jp-stage.is-requested { --c: #6d5bd0; }
.jp-chip.is-quoted, .jp-stage.is-quoted { --c: #4f6bdc; }
.jp-chip.is-active, .jp-stage.is-active { --c: var(--ylw, #a16207); }
.jp-chip.is-delivered, .jp-stage.is-delivered { --c: #0f8a7a; }
.jp-chip.is-completed, .jp-stage.is-completed { --c: var(--grn, #4d7c0f); }
.jp-chip.is-declined, .jp-chip.is-cancelled, .jp-chip.is-refunded, .jp-stage.is-closed { --c: var(--red, #dc2626); }
.jp-chip, .jp-due-chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 99px; background: color-mix(in srgb, var(--c) 14%, transparent); color: var(--c); font-size: .8rem; font-weight: 900; white-space: nowrap; }
.jp-due-chip.is-ok { --c: var(--grn, #4d7c0f); } .jp-due-chip.is-soon { --c: var(--ylw, #a16207); } .jp-due-chip.is-late { --c: var(--red, #dc2626); }

.jp-stage { border: 2px solid color-mix(in srgb, var(--c) 70%, transparent) !important; }
.jp-stage-h { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 8px; }
body .dash-main .cm-card.jp-stage .jp-stage-h h3 { margin: 0; flex: 1; color: var(--c); }
.jp-stage-ico { display: inline-grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 10px; background: color-mix(in srgb, var(--c) 14%, transparent); color: var(--c); font-style: normal; }
.jp-stage .jp-due-chip { margin-left: auto; }

.jp-price { display: flex; align-items: center; max-width: 260px; border: 1px solid var(--line2); border-radius: 12px; background: var(--panel); overflow: hidden; }
.jp-price:focus-within { border-color: var(--acc); }
.jp-price > span { padding: 0 2px 0 14px; color: var(--tx3); font-weight: 900; font-size: 1.15rem; }
body .cm-card .jp-price input[type=text][inputmode] { flex: 1; min-width: 0; margin: 0; padding: 10px 12px 10px 4px; border: 0; border-radius: 0; background: transparent; font-size: 1.25rem; font-weight: 900; }
body .cm-card .jp-price input[type=text][inputmode]:focus { outline: none; box-shadow: none; }
.jp-price.is-small { max-width: 200px; }
body .cm-card .jp-price.is-small input[type=text][inputmode] { font-size: 1rem; }
.jp-fills { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 8px 0 0; }
.jp-fills > span { font-size: .78rem; color: var(--tx3); }
.jp-fills button { padding: 5px 12px; border: 1px solid var(--line2); border-radius: 99px; background: var(--db-inset, var(--panel)); color: var(--tx2); font: inherit; font-size: .8rem; font-weight: 700; cursor: pointer; }
.jp-fills button:hover, .jp-fills button.is-on { border-color: var(--acc); color: var(--acc); }
.jp-steps { display: grid; grid-template-columns: repeat(2, minmax(0, 200px)); gap: 12px; }
.jp-step { display: flex; align-items: center; border: 1px solid var(--line2); border-radius: 12px; background: var(--panel); overflow: hidden; }
.jp-step button { flex: none; width: 40px; height: 44px; border: 0; background: transparent; color: var(--acc); font-size: 1.2rem; font-weight: 900; cursor: pointer; }
.jp-step button:hover { background: color-mix(in srgb, var(--acc) 10%, transparent); }
body .cm-card .jp-step input[type=number][data-jp-num] { flex: 1; width: 100%; min-width: 0; margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; text-align: center; font-weight: 900; -moz-appearance: textfield; }
.jp-step input::-webkit-inner-spin-button, .jp-step input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }

.jp-money { margin: 14px 0 0; padding: 12px 16px; border-radius: 12px; background: color-mix(in srgb, var(--grn, #4d7c0f) 12%, var(--db-inset, var(--panel))); border: 1px solid color-mix(in srgb, var(--grn, #4d7c0f) 35%, transparent); }
.jp-money [data-cm-earn] { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 18px; margin: 0; font-size: .86rem; color: var(--tx2); }
.jp-money .cm-est-row { display: inline-flex; align-items: baseline; gap: 8px; color: var(--tx2); }
.jp-money .cm-est-row b { margin: 0; font-size: 1.2rem; font-weight: 900; color: var(--grn, #4d7c0f); }
.jp-money .cm-est-row:first-child b { color: var(--tx); }
.jp-money-note { margin: 5px 2px 0; font-size: .74rem; color: var(--tx3); }

.jp-row { margin-top: 8px; border: 1px solid var(--line2); border-radius: 14px; background: var(--db-inset, var(--panel)); }
.jp-row.is-on, details.jp-row[open] { border-color: color-mix(in srgb, var(--acc) 45%, var(--line2)); }
.cm-card label.jp-row-head, .jp-row > summary.jp-row-head { display: flex; align-items: center; gap: 12px; margin: 0; padding: 11px 14px; font-size: inherit; font-weight: 400; letter-spacing: normal; text-transform: none; color: var(--tx); cursor: pointer; list-style: none; }
.jp-row > summary.jp-row-head::-webkit-details-marker { display: none; }
.jp-row > summary.jp-row-head::after { content: "+"; color: var(--acc); font-weight: 900; }
.jp-row[open] > summary.jp-row-head::after { content: "\2013"; }
.jp-row-ico { display: inline-grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 9px; background: color-mix(in srgb, var(--acc) 12%, transparent); color: var(--acc); font-style: normal; }
.jp-row-t { flex: 1; min-width: 0; }
.jp-row-t b { display: block; font-weight: 900; }
.jp-row-t small { display: block; font-size: .78rem; color: var(--tx3); }
.jp-row-body { padding: 0 14px 14px 56px; }
.jp-row:not(.is-on):not(details) .jp-row-body { display: none; }
.jp-row-body.lc-quote { margin: 0; }
.jp-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-top: 14px; }
.jp-foot .up-progress { flex: 1 0 100%; order: 3; }
.jp-decline-open { color: var(--tx3) !important; }
.jp-decline-open:hover { color: var(--red, #dc2626) !important; }
.jp-quiet { margin: 12px 0 0; }
.jp-decline-go { border-color: var(--red, #dc2626) !important; color: var(--red, #dc2626) !important; }

.jp-tray .jp-up-list { display: none; }
.jp-tray.is-on .jp-file { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.jp-tray:not(.is-on) .jp-drop { display: none; }
.cm-card label.jp-drop { display: grid; justify-items: center; gap: 6px; margin: 4px 0 0; padding: 22px 16px; border: 2px dashed var(--line2); border-radius: 14px; background: var(--db-inset, var(--panel)); color: var(--tx3); font-size: .92rem; font-weight: 400; letter-spacing: normal; text-transform: none; text-align: center; cursor: pointer; }
.jp-drop b { color: var(--tx); } .jp-drop u { color: var(--acc); } .jp-drop svg { color: var(--acc); }
.cm-card label.jp-drop small { max-width: 52ch; font-size: .76rem; }
.jp-drop:hover, .jp-drop.is-over, .jp-tray:has(.jp-file:focus-visible) .jp-drop { border-color: var(--acc); }
.cm-card label.jp-drop.is-full { display: none; }
.jp-files { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; }
.jp-files:empty { display: none; }
.jp-files li { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 6px 8px; border: 1px solid var(--line2); border-radius: 10px; background: var(--db-inset, var(--panel)); }
.jp-thumb { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 8px; overflow: hidden; background: color-mix(in srgb, var(--acc) 12%, transparent); color: var(--acc); font-size: .66rem; font-weight: 900; }
.jp-thumb img { width: 100%; height: 100%; object-fit: cover; }
.jp-file-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .86rem; font-weight: 700; }
.jp-file-name small { display: block; font-size: .72rem; font-weight: 600; color: var(--tx3); }

.jp-tags { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 14px 0 0; padding: 0; }
.jp-tags li { padding: 3px 10px; border: 1px solid var(--line2); border-radius: 99px; font-size: .76rem; font-weight: 700; color: var(--tx2); }
@media (max-width: 560px) {
  .jp-steps { grid-template-columns: 1fr 1fr; }
  .jp-row-body { padding-left: 14px; }
  .jp-price { max-width: none; }
}

/* ---------------- Photos in a commission message (assets/js/msg-photos.js) ---------------- */
.mp.is-on .mp-file { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.mp .mp-up-list { display: none; }
.mp-list { list-style: none; margin: 10px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; }
.mp-list:empty { display: none; }
.mp-list li { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 6px 8px; border: 1px solid var(--line2, rgba(128, 128, 128, .35)); border-radius: 12px; background: var(--db-inset, var(--panel2, transparent)); }
.mp-thumb { display: block; width: 52px; height: 52px; border-radius: 9px; overflow: hidden; background: var(--line2, #ddd); }
.mp-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mp-name { min-width: 0; display: grid; gap: 3px; }
.cm-compose .mp-name input[type=text] { width: 100%; min-height: 34px; margin: 0; padding: 5px 10px; border-radius: 9px; font-size: .86rem; }
.mp-name small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .7rem; color: var(--tx3, #888); }
.mp-x { display: grid; place-items: center; width: 30px; height: 30px; padding: 0; border: 1px solid var(--line2, #ccc); border-radius: 8px; background: transparent; color: var(--tx3, #888); font-size: 1.1rem; line-height: 1; cursor: pointer; }
.mp-x:hover, .mp-x:focus-visible { border-color: var(--red, #dc2626); color: var(--red, #dc2626); }
.mp-err { margin: 8px 0 0; padding: 8px 12px; border-left: 3px solid var(--red, #dc2626); background: color-mix(in srgb, var(--red, #dc2626) 8%, transparent); font-size: .8rem; }
.mp-err[hidden] { display: none; }
.mp-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.mp-actions > button[type=submit] { margin-left: auto; }
.cm-compose label.mp-add { display: none; align-items: center; gap: 6px; margin: 0; cursor: pointer; text-transform: none; letter-spacing: normal; }
.cm-compose.mp-on label.mp-add { display: inline-flex; }
.cm-compose label.mp-add.is-full { opacity: .45; pointer-events: none; }
.mp-hint { display: none; font-size: .76rem; color: var(--tx3, #888); }
.cm-compose.mp-on .mp-hint { display: inline; }
.cm-compose.mp-over { outline: 2px dashed var(--acc, #ff6b35); outline-offset: 6px; border-radius: 12px; }

/* A photo you sent can be taken back: the × sits on its corner. */
.cm-file-wrap { position: relative; display: inline-flex; }
.cm-file-x { position: absolute; top: -7px; right: -7px; margin: 0; }
.cm-file-x button { display: grid; place-items: center; width: 22px; height: 22px; padding: 0; border: 1px solid var(--line2, #ccc); border-radius: 50%; background: var(--db-tile, var(--panel, #fff)); color: var(--tx3, #888); font-size: .9rem; line-height: 1; cursor: pointer; opacity: 0; transition: opacity .12s; }
.cm-file-wrap:hover .cm-file-x button, .cm-file-x button:focus-visible { opacity: 1; }
.cm-file-x button:hover { border-color: var(--red, #dc2626); color: var(--red, #dc2626); }
@media (hover: none) { .cm-file-x button { opacity: 1; } }

/* ---------------- The client's commission page ---------------- */
.jp-stage.is-requested { --c: #8b7cf0; }
.acct-body .cm-card.jp-stage .jp-stage-h h3 { color: var(--c); }
.cm-card .cp-price { margin: 4px 0 6px; font-size: 2.2rem; font-weight: 900; line-height: 1.1; color: var(--tx); }
.cp-tags { margin-top: 4px; }
.cp-note { margin: 12px 0 0; padding: 10px 14px; border-left: 3px solid var(--c); border-radius: 0; background: color-mix(in srgb, var(--c) 8%, transparent); font-size: .92rem; line-height: 1.5; color: var(--tx); }
.cp-note cite { display: block; margin-top: 4px; font-style: normal; font-size: .78rem; color: var(--tx3); }
.cm-card .cp-held { display: flex; align-items: center; gap: 8px; margin: 12px 0 0; padding: 9px 12px; border-radius: 10px; background: color-mix(in srgb, var(--grn, #4d7c0f) 13%, transparent); color: var(--grn, #4d7c0f); font-size: .84rem; font-weight: 700; }
.cp-held svg { flex: none; }
.cp-quiet { margin-top: 10px; }
.cp-quiet .cm-link, .jp-stage .jp-decline-open { color: var(--tx3) !important; }

.cp-files { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; margin: 6px 0 0; padding: 0; }
.cp-files li { display: grid; gap: 6px; min-width: 0; }
.cp-files li > a:first-child { display: grid; place-items: center; aspect-ratio: 1; border-radius: 12px; overflow: hidden; border: 1px solid var(--line2); background: color-mix(in srgb, var(--c) 10%, transparent); }
.cp-files img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .2s; }
.cp-files li > a:first-child:hover img { transform: scale(1.04); }
.cp-ext { font-weight: 900; font-size: 1rem; color: var(--c); }
.cp-file-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .8rem; font-weight: 700; color: var(--tx); text-decoration: none; }
.cp-file-name small { display: block; font-weight: 600; font-size: .7rem; color: var(--tx3); }
.cp-file-name:hover small { color: var(--acc); }
.cp-all { margin: 10px 0 0; }
.cp-ask { margin: 16px 0 8px; font-weight: 800; color: var(--tx); }
.cp-choices { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.cp-choices form { margin: 0; display: grid; }
.cp-choices button, .cp-choice.is-none { display: grid; gap: 4px; justify-items: start; width: 100%; height: 100%; margin: 0; padding: 14px; border: 1px solid var(--line2); border-radius: 14px; background: var(--panel2, transparent); color: var(--tx2); font: inherit; text-align: left; cursor: pointer; }
.cp-choices b { display: inline-flex; align-items: center; gap: 8px; color: var(--tx); font-weight: 900; }
.cp-choices small { font-size: .78rem; color: var(--tx3); }
.cp-choice.is-ok button { border: 2px solid var(--grn, #4d7c0f); padding: 13px; background: color-mix(in srgb, var(--grn, #4d7c0f) 11%, transparent); }
.cp-choice.is-ok b { color: var(--grn, #4d7c0f); }
.cp-choice.is-ok button:hover { background: color-mix(in srgb, var(--grn, #4d7c0f) 18%, transparent); }
button.cp-choice.is-rev:hover, button.cp-choice.is-rev.is-on { border-color: var(--acc); }
button.cp-choice.is-rev.is-on b { color: var(--acc); }
.cp-choice.is-none { cursor: default; }
.cp-rev { margin-top: 10px; }
.cp-rev.is-js:not(.is-open) { display: none; }
.cp-review { margin-top: 12px; }
.cp-score { margin: 0 0 12px; padding: 0; border: 0; }
.cp-score legend { margin: 0 0 4px; padding: 0; font-size: .82rem; font-weight: 800; color: var(--tx2); }
@media (max-width: 560px) {
  .cp-choices { grid-template-columns: 1fr; }
  .cp-files { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------------- Commission lists (partials/commission-row) ---------------- */
.cl-row, .cb-col, .cb-card, .cl-group { --c: var(--tx3); }
.cl-row.is-requested, .cb-col.is-requested, .cb-card.is-requested { --c: #6d5bd0; }
.cl-row.is-quoted, .cb-col.is-quoted, .cb-card.is-quoted { --c: #4f6bdc; }
.cl-row.is-active, .cb-col.is-active, .cb-card.is-active { --c: var(--ylw, #a16207); }
.cl-row.is-delivered, .cb-col.is-delivered, .cb-card.is-delivered { --c: #0f8a7a; }
.cl-row.is-completed, .cb-card.is-completed { --c: var(--grn, #4d7c0f); }
.cl-row.is-closed, .cb-card.is-closed { --c: var(--tx3); }
.cb-col.is-closed { --c: var(--grn, #4d7c0f); }
.acct-body .jp-chip.is-requested, .acct-body .cl-row.is-requested { --c: #8b7cf0; }

.cl-list { display: grid; gap: 8px; }
.cl-row { position: relative; display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px 14px 12px 18px; border: 1px solid var(--line2); border-radius: 14px; background: var(--db-tile, var(--panel)); color: var(--tx); text-decoration: none; overflow: hidden; transition: border-color .12s, transform .12s; }
.cl-row::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: var(--c); }
.cl-row:hover { border-color: color-mix(in srgb, var(--c) 60%, var(--line2)); transform: translateY(-1px); }
.cl-row.is-pinned { border-color: color-mix(in srgb, var(--ylw, #a16207) 45%, var(--line2)); }
.cl-av { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: color-mix(in srgb, var(--c) 16%, transparent); color: var(--c); font-weight: 900; }
.cl-main { min-width: 0; display: grid; gap: 3px; }
.cl-main b { font-weight: 900; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cl-main small { font-size: .8rem; color: var(--tx3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cl-main .cb-note { font-style: italic; }
.cl-chips { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 3px; }
.cl-chips .jp-chip, .cl-chips .jp-due-chip { padding: 2px 9px; font-size: .72rem; }
.cl-side { display: grid; justify-items: end; gap: 6px; text-align: right; }
.cl-side strong { font-weight: 900; white-space: nowrap; }
.cl-next { font-size: .78rem; font-weight: 800; color: var(--tx3); white-space: nowrap; }
.cl-next.is-go { padding: 5px 12px; border-radius: 99px; background: var(--c); color: #fff; }

.cl-group { display: flex; align-items: center; gap: 8px; margin: 22px 0 10px; font-size: .74rem; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; color: var(--tx2); }
.cl-group::before { content: ''; width: 9px; height: 9px; border-radius: 50%; background: var(--c); }
.cl-group span { padding: 1px 8px; border-radius: 99px; background: color-mix(in srgb, var(--c) 15%, transparent); color: var(--c); letter-spacing: 0; }
.cl-group.is-yours { --c: var(--acc); } .cl-group.is-theirs { --c: var(--ylw, #a16207); } .cl-group.is-done { --c: var(--grn, #4d7c0f); }
.cl-group-fold > summary { list-style: none; cursor: pointer; }
.cl-group-fold > summary::-webkit-details-marker { display: none; }
.cl-group-fold > summary::after { content: 'Show'; margin-left: 4px; font-size: .7rem; letter-spacing: .06em; color: var(--acc); }
.cl-group-fold[open] > summary::after { content: 'Hide'; }

/* The artist's board: tabs as pills, each column's head in its colour. */
.cb-tabs .cb-tab { border-radius: 99px; }
.cb-col-head { display: flex; align-items: center; gap: 8px; color: var(--c); }
.cb-col-head::before { content: ''; width: 9px; height: 9px; border-radius: 50%; background: var(--c); }
.cb-card { border-left: 4px solid var(--c) !important; }
@media (max-width: 560px) {
  .cl-row { grid-template-columns: 32px minmax(0, 1fr); }
  .cl-av { width: 32px; height: 32px; }
  .cl-side { grid-column: 2; justify-items: start; grid-auto-flow: column; align-items: center; justify-content: space-between; text-align: left; }
}

/* ---------------- The brief: options with pictures, "Your pick", Details (alley/_hire-pick) ---------------- */
.al-pick { align-items: center; }
.al-pick-th { display: grid; flex: none; width: 72px; height: 54px; gap: 2px; overflow: hidden; border-radius: 6px; background: var(--line); }
.al-pick-th.is-1 { grid-template-columns: 1fr; }
.al-pick-th.is-2 { grid-template-columns: 1fr 1fr; }
.al-pick-th.is-3, .al-pick-th.is-4 { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; }
.al-pick-th.is-3 img:first-child { grid-row: span 2; }
.al-pick-th img { width: 100%; height: 100%; object-fit: cover; display: block; }
.al-pick-text { flex: 1; min-width: 0; }
.al-pick-info { flex: none; align-self: center; padding: 5px 12px; border: 1px solid var(--line2); border-radius: 99px; background: transparent; color: var(--tx2); font: inherit; font-size: .78rem; font-weight: 800; cursor: pointer; }
.al-pick-info:hover, .al-pick-info:focus-visible { border-color: var(--ylw); color: var(--ylw); }
.al-pick:has(input:checked) { background: color-mix(in srgb, var(--ylw) 7%, var(--bg2)); }

.pk-h { margin: 0 0 8px; font-size: .72rem; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; color: var(--tx3); }
.pk-none { margin: 0; padding: 16px; border: 2px dashed var(--line2); color: var(--tx3); font-size: .88rem; }
.pk-none[hidden] { display: none; }
.pk { border: 2px solid var(--ylw); background: var(--panel); overflow: hidden; }
.pk[hidden] { display: none; }
.pk-big { position: relative; display: block; width: 100%; aspect-ratio: 16 / 10; padding: 0; border: 0; background: var(--bg2); cursor: zoom-in; overflow: hidden; }
.pk-big img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .25s; }
.pk-big:hover img { transform: scale(1.03); }
.pk-play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: rgba(10, 10, 10, .72); color: #fff; font-size: 1rem; text-decoration: none; }
.pk-strip { display: flex; gap: 5px; padding: 6px; overflow-x: auto; scrollbar-width: none; }
.pk-th { flex: none; width: 46px; height: 46px; padding: 0; border: 2px solid transparent; background: none; cursor: pointer; overflow: hidden; }
.pk-th img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pk-th.is-on { border-color: var(--ylw); }
.pk-body { padding: 4px 16px 16px; }
.pk-body h3 { margin: 6px 0 2px; font-family: var(--head); font-weight: 400; font-size: 1.3rem; text-transform: uppercase; color: var(--tx); }
.pk-price { margin: 0 0 6px; font-weight: 900; color: var(--ylw); }
.pk-sum { margin: 0 0 8px; font-size: .9rem; line-height: 1.5; color: var(--tx2); }
.pk-inc { list-style: none; margin: 0 0 6px; padding: 0; display: grid; gap: 4px; font-size: .84rem; color: var(--tx2); }
.pk-inc li { position: relative; padding-left: 20px; }
.pk-inc li::before { content: '✓'; position: absolute; left: 0; color: var(--grn, #A3E635); font-weight: 900; }
.pk-more-inc { margin: 0 0 6px; font-size: .78rem; color: var(--tx3); }
.pk-meta { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 8px 0 0; font-size: .82rem; font-weight: 800; color: var(--tx2); }
.pk-do { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 12px; }
.pk-page { font-size: .82rem; font-weight: 800; color: var(--acc); }

.pk-inline { margin: -6px 0 22px; }
.pk-inline .pk-none { display: none; }
@media (min-width: 961px) { .pk-inline { display: none; } }
@media (max-width: 960px) { .pk-side { display: none; } }

.pk-dialog { width: min(560px, calc(100vw - 24px)); }
.pk-dlg[hidden] { display: none; }
.pk-gal { position: relative; margin: 4px 0 12px; }
.pk-slide { position: relative; margin: 0; }
.pk-slide[hidden] { display: none; }
.pk-slide img { display: block; width: 100%; max-height: 60vh; object-fit: contain; background: #000; border-radius: 10px; }
.pk-slide figcaption { margin-top: 6px; font-size: .78rem; color: var(--tx3); text-align: center; }
.pk-nav { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 6px; font-size: .82rem; color: var(--tx2); }
.pk-nav button { width: 36px; height: 36px; border: 1px solid var(--line2); border-radius: 50%; background: transparent; color: var(--tx); font-size: 1.2rem; cursor: pointer; }
.pk-nav button:hover { border-color: var(--ylw); color: var(--ylw); }
.pk-dialog .pk-price { font-size: 1.1rem; }
.pk-dialog .sw-dialog-foot { margin-top: 14px; }
@media (max-width: 560px) {
  .al-pick { flex-wrap: wrap; }
  .al-pick-th { width: 60px; height: 46px; }
}

/* ---------------- The public profile, round two: one header row, chips, a bar that follows ---------------- */
.al-top-v2 { grid-template-columns: auto minmax(0, 1fr) auto; margin-bottom: 18px; }
.al-top-do { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 10px; align-self: end; }
.al-top-do .al-fan { margin: 0; }
.al-top-do .al-hire-cta { margin-left: 0; }
.al-chips { gap: 8px; margin-bottom: 22px; }
.al-chips .al-fact { padding: 7px 14px; border-radius: 99px; }
.al-chips .al-fact b { font-size: 1rem; }
a.al-fact.is-link { color: var(--tx2); text-decoration: none; }
a.al-fact.is-link:hover { border-color: var(--ylw); color: var(--ylw); }

.al-bar { position: sticky; top: 76px; z-index: 6; display: flex; align-items: center; gap: 10px; margin: 0 0 34px; padding: 6px 6px 6px 8px; border: 2px solid var(--line2); background: rgba(10, 10, 10, .92); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.al-bar .al-tabs { position: static; flex: 1; min-width: 0; margin: 0; padding: 0; border: 0; background: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
.al-bar .al-tabs a span { display: inline-block; margin-left: 4px; padding: 0 6px; border-radius: 99px; background: var(--line2); color: var(--tx2); font-size: .68rem; letter-spacing: 0; }
.al-bar .al-tabs a.is-here span { background: rgba(0, 0, 0, .2); color: #141100; }
.al-bar-me { display: grid; place-items: center; flex: none; width: 32px; height: 32px; overflow: hidden; border: 2px solid var(--ylw); background: var(--panel); color: var(--tx2); font-size: .72rem; font-weight: 900; }
.al-bar-me img { width: 100%; height: 100%; object-fit: cover; display: block; }
.al-bar-hire { flex: none; white-space: nowrap; }

.sv-more-inc { margin-top: -4px; font-size: .8rem; font-weight: 800; color: var(--ylw); }
.al-report-end { margin-top: 30px; text-align: center; }
.al-dock { display: none; }
@media (max-width: 960px) {
  .al-top-v2 { grid-template-columns: auto minmax(0, 1fr); }
  .al-top-do { grid-column: 1 / -1; justify-content: flex-start; }
}
@media (max-width: 760px) {
  .al-bar-hire { display: none; }
  .al-top-v2 { grid-template-columns: 1fr; }
  .al-top-do .al-hire-cta { width: auto; }
  /* On a phone, Hire stays at the bottom of the screen. */
  .al-dock { display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 90; padding: 10px 14px calc(10px + env(safe-area-inset-bottom)); background: rgba(10, 10, 10, .94); border-top: 2px solid var(--line2); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
  .al-dock .btn { display: block; width: 100%; text-align: center; }
  .al-report-end { margin-bottom: 76px; }
}

/* The brief's reference images: the message tray (msg-photos.js), in the brief's look. */
.al-hire-form .mp-ref-actions { margin-top: 0; }
.al-hire-form label.mp-ref-add { display: none; align-items: center; gap: 8px; margin: 0; padding: 11px 16px; border: 2px solid var(--line2); background: var(--panel); color: var(--tx); font-weight: 800; font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; cursor: pointer; transition: border-color .2s; }
.al-hire-form.mp-on label.mp-ref-add { display: inline-flex; }
.al-hire-form label.mp-ref-add:hover { border-color: var(--acc); }
.al-hire-form label.mp-ref-add.is-full { opacity: .45; pointer-events: none; }
.al-hire-form.mp-on .mp-hint { display: inline; }
.al-hire-form.mp-over { outline: 2px dashed var(--acc); outline-offset: 8px; }
.al-hire-form .mp-list { margin: 0 0 10px; grid-template-columns: 1fr; }
.al-hire-form .mp-list li { border-radius: 0; border-width: 2px; background: var(--bg2); }
.al-hire-form .mp-name input[type=text] { width: 100%; margin: 0; padding: 7px 10px; font-size: .9rem; }
.al-hire-form .mp-thumb { border-radius: 0; }
.al-hire-form .mp-x { border-radius: 0; }

/* ---------------- Open calls board, round two (assets/js/open-calls.js) ---------------- */
.oc-paths { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 24px; }
.oc-path { --c: var(--acc); display: grid; grid-template-columns: 46px minmax(0, 1fr); gap: 14px; padding: 18px; background: var(--panel); border: 2px solid var(--line2); border-left: 4px solid var(--c); }
.oc-path.is-art { --c: #8b7cf0; }
.oc-path-ico { display: grid; place-items: center; width: 46px; height: 46px; background: color-mix(in srgb, var(--c) 15%, transparent); color: var(--c); font-style: normal; }
.oc-path b { display: block; font-family: var(--head); font-weight: 400; font-size: 1.4rem; text-transform: uppercase; color: var(--tx); }
.oc-path p { margin: 4px 0 12px; color: var(--tx2); font-size: .92rem; line-height: 1.5; }
.oc-path .btn { display: inline-block; }
.oc-steps { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 0; padding: 0; }
.oc-steps li { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border: 2px solid var(--line2); background: var(--panel); color: var(--tx2); font-size: .82rem; font-weight: 700; }
.oc-steps b { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--ylw); color: #141100; font-size: .72rem; }

.oc-filters { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 18px; }
.oc-chip { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border: 2px solid var(--line2); border-radius: 99px; background: var(--panel); color: var(--tx2); font: inherit; font-size: .82rem; font-weight: 800; cursor: pointer; }
.oc-chip span { padding: 0 6px; border-radius: 99px; background: var(--line2); color: var(--tx2); font-size: .7rem; }
.oc-chip:hover { border-color: var(--acc); color: var(--tx); }
.oc-chip.is-on { border-color: var(--acc); background: color-mix(in srgb, var(--acc) 14%, var(--panel)); color: var(--acc); }
.oc-chip.is-on span { background: var(--acc); color: #0a0a0a; }

.oc-grid2 { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; }
.oc-card2 { --c: var(--grn, #A3E635); position: relative; display: flex; flex-direction: column; gap: 10px; padding: 18px 18px 18px 22px; background: var(--panel); border: 2px solid var(--line); transition: border-color .2s, transform .2s; }
.oc-card2[hidden] { display: none; }
.oc-card2::before { content: ''; position: absolute; left: -2px; top: -2px; bottom: -2px; width: 5px; background: var(--c); }
.oc-card2.is-soon { --c: var(--ylw); }
.oc-card2.is-late { --c: var(--red, #E73843); }
.oc-card2:hover { border-color: color-mix(in srgb, var(--c) 60%, var(--line)); transform: translateY(-3px); }
.oc-card2 h2 { font-size: 1.5rem; line-height: 1.05; }
.oc-card-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.oc-clock { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 99px; background: color-mix(in srgb, var(--c) 15%, transparent); color: var(--c); font-size: .72rem; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; }
.oc-flag { padding: 3px 10px; border-radius: 99px; font-size: .7rem; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; }
.oc-flag.is-first { background: color-mix(in srgb, var(--grn, #A3E635) 16%, transparent); color: var(--grn, #A3E635); }
.oc-flag.is-mine { background: var(--line2); color: var(--tx); }
.oc-flag.is-sent { background: color-mix(in srgb, #8b7cf0 18%, transparent); color: #a99cf5; }
.oc-card-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; padding-top: 8px; color: var(--tx2); font-size: .88rem; }
.oc-card-foot b { color: var(--tx); }
.oc-cta { white-space: nowrap; }
.oc-none[hidden] { display: none; }
@media (max-width: 760px) {
  .oc-paths { grid-template-columns: 1fr; }
  .oc-grid2 { grid-template-columns: 1fr; }
}

/* ---------------- DrXp Alley front page, round two (alley/index) ---------------- */
.af-hero { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 40px; align-items: center; margin-bottom: 30px; }
.af-hero .al-lede { margin-top: 18px; max-width: 52ch; }
.af-search { display: flex; gap: 10px; margin-top: 22px; max-width: 560px; }
.af-search-box { flex: 1; display: flex; align-items: center; gap: 10px; padding: 0 14px; border: 2px solid var(--line2); background: var(--panel); color: var(--tx3); transition: border-color .2s; }
.af-search-box:focus-within { border-color: var(--ylw); color: var(--ylw); }
.af-search-box input { flex: 1; min-width: 0; min-height: 50px; border: 0; background: transparent; color: var(--tx); font: inherit; font-size: 1rem; }
.af-search-box input:focus { outline: none; }
.af-or { margin-top: 14px; color: var(--tx2); font-size: .95rem; }
.af-or a { color: var(--ylw); font-weight: 800; }

.af-mosaic { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); gap: 8px; aspect-ratio: 5 / 3.4; }
.af-mosaic.is-1 { grid-template-columns: 1fr; grid-template-rows: 1fr; }
.af-mosaic.is-2 { grid-template-columns: 1.4fr 1fr; grid-template-rows: 1fr; }
.af-mosaic.is-3 .af-tile:first-child, .af-mosaic.is-4 .af-tile:first-child, .af-mosaic.is-5 .af-tile:first-child { grid-row: span 2; }
.af-mosaic.is-3 { grid-template-columns: 1.4fr 1fr; }
.af-mosaic.is-4 .af-tile:nth-child(4) { grid-column: 2 / span 2; }
.af-tile { position: relative; display: block; overflow: hidden; border: 2px solid var(--line2); background: var(--panel2); }
.af-tile img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s; }
.af-tile:hover img { transform: scale(1.05); }
.af-tile span { position: absolute; left: 8px; bottom: 8px; padding: 3px 9px; background: rgba(10, 10, 10, .78); color: var(--tx); font-size: .72rem; font-weight: 800; opacity: 0; transform: translateY(4px); transition: opacity .2s, transform .2s; }
.af-tile:hover span, .af-tile:focus-visible span { opacity: 1; transform: none; }
.af-tile:nth-child(1) { transform: rotate(-.6deg); }
.af-tile:nth-child(3) { transform: rotate(.8deg); }

.af-trust { margin: 0 0 30px; border-top: 2px solid var(--line); border-bottom: 2px solid var(--line); background: rgba(22, 22, 21, .72); }
.af-trust .wrap { display: flex; flex-wrap: wrap; gap: 10px 28px; padding-top: 14px; padding-bottom: 14px; }
.af-trust span { display: inline-flex; align-items: center; gap: 8px; color: var(--tx2); font-size: .88rem; font-weight: 700; }
.af-trust svg { color: var(--ylw); flex: none; }

.af-browse { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 12px; margin-bottom: 20px; }
.af-cats { flex: 1 1 520px; min-width: 0; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0; padding-bottom: 2px; -webkit-mask-image: linear-gradient(90deg, #000 92%, transparent); mask-image: linear-gradient(90deg, #000 92%, transparent); }
.af-cats::-webkit-scrollbar { display: none; }
.af-cats .al-chip { flex: none; }
.af-tools { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.af-now { display: inline-flex; align-items: center; gap: 8px; color: var(--tx2); font-size: .82rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
.af-switch { position: relative; width: 38px; height: 22px; border-radius: 99px; background: var(--line2); transition: background-color .15s; }
.af-switch::after { content: ''; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform .15s; }
.af-now.is-on { color: var(--grn); }
.af-now.is-on .af-switch { background: var(--grn); }
.af-now.is-on .af-switch::after { transform: translateX(16px); }
.af-more > summary { list-style: none; display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
.af-more > summary::-webkit-details-marker { display: none; }
.af-more[open] > summary { border-color: var(--ylw); color: var(--ylw); }
.af-browse:has(.af-more[open]) .af-more { flex-basis: 100%; }
.af-more .al-refine { margin: 12px 0 0; }
.af-browse:has(.af-more[open]) { flex-direction: column; align-items: stretch; }
.af-browse:has(.af-more[open]) .af-tools { justify-content: flex-start; }

.af-grid { grid-auto-rows: 1fr; }
.af-card .al-avail { z-index: 2; }
.af-cover { position: relative; display: grid; aspect-ratio: 4 / 3; overflow: hidden; background: var(--panel2); }
.af-cover.has-strip { grid-template-columns: 2fr 1fr; grid-template-rows: 1fr 1fr; gap: 2px; }
.af-cover.has-strip .af-cover-main { grid-row: span 2; }
.af-cover img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s; }
.af-card:hover .af-cover-main { transform: scale(1.04); }
.af-face { position: relative; z-index: 2; display: grid; place-items: center; width: 52px; height: 52px; margin: -26px 0 0 16px; overflow: hidden; border: 3px solid var(--panel); border-radius: 50%; background: var(--panel2); color: var(--tx2); font-family: var(--head); font-size: 1.1rem; }
.af-face img { width: 100%; height: 100%; object-fit: cover; display: block; }
.af-card .al-card-body { padding-top: 8px; }
.af-line { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

.af-sec { margin-top: 56px; }
.af-calls { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.af-call { --c: var(--grn); position: relative; display: grid; gap: 4px; padding: 16px 16px 16px 20px; border: 2px solid var(--line); background: var(--panel); color: var(--tx); text-decoration: none; transition: border-color .2s, transform .2s; }
.af-call::before { content: ''; position: absolute; left: -2px; top: -2px; bottom: -2px; width: 5px; background: var(--c); }
.af-call.is-soon { --c: var(--ylw); } .af-call.is-late { --c: var(--red, #E73843); }
.af-call:hover { border-color: color-mix(in srgb, var(--c) 60%, var(--line)); transform: translateY(-2px); }
.af-call b { font-family: var(--head); font-weight: 400; font-size: 1.25rem; text-transform: uppercase; }
.af-call-budget { font-weight: 900; color: var(--ylw); }
.af-call small { color: var(--tx3); font-size: .8rem; }
.af-calls-none { color: var(--tx2); }
.af-calls-none a { color: var(--ylw); font-weight: 800; }
.af-how { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; }
.af-how li { display: flex; gap: 12px; padding: 16px; border: 2px solid var(--line2); background: rgba(22, 22, 21, .72); }
.af-how b { display: grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 50%; background: var(--ylw); color: #141100; font-weight: 900; }
.af-how span { color: var(--tx2); font-size: .88rem; line-height: 1.5; }
.af-how strong { display: block; font-family: var(--head); font-weight: 400; font-size: 1.2rem; color: var(--tx); text-transform: uppercase; }
@media (max-width: 960px) {
  .af-hero { grid-template-columns: 1fr; gap: 24px; }
  .af-calls, .af-how { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .af-search { flex-direction: column; }
  .af-calls, .af-how { grid-template-columns: 1fr; }
  .af-tile:nth-child(1), .af-tile:nth-child(3) { transform: none; }
}

/* ---------------- DrXp Alley: shining gold (every Alley page, .al-gold) ----------------
   Every Alley page's root carries .al-gold (the front page adds .al-front);
   the rest of the site keeps its own colours. Inside it the yellow and the
   orange accent both become gold. The af-* rules below only meet the front
   page, which is the only one with those parts.
   Black and gold instead of black and yellow: the flat yellow becomes a
   metallic gold — a gradient that catches the light, a slow shine across
   the title, gold glows on hover. Every motion here stops for people who
   ask for less of it (prefers-reduced-motion, at the end). */
.al-gold {
  --ylw: #E8C15A;
  --acc: #E8C15A;
  --on-acc: #1a1204;
  --gold-hi: #FFF1B8;
  --gold: #E8C15A;
  --gold-mid: #C99A2E;
  --gold-lo: #8C6418;
  --gold-metal: linear-gradient(115deg, #8C6418 0%, #E8C15A 22%, #FFF1B8 38%, #D6A73E 52%, #9C7019 70%, #F2D27A 88%, #B8862A 100%);
  --gold-soft: rgba(232, 193, 90, .16);
}
@property --af-shine { syntax: '<percentage>'; inherits: false; initial-value: 0%; }

/* The backdrop: warm gold light instead of yellow, finer gold stripes. */
.al-gold .al-glow-a { background: radial-gradient(closest-side, rgba(232, 193, 90, .3), transparent 70%); }
.al-gold .al-glow-b { background: radial-gradient(closest-side, rgba(201, 154, 46, .22), transparent 70%); }
.al-gold .al-stripes { background: repeating-linear-gradient(65deg, rgba(232, 193, 90, .09) 0 2px, transparent 2px 28px); }

/* The title: "Alley" in polished gold on black, with a light that slides across. */
.al-gold .al-title em {
  color: #1a1204;
  background: var(--gold-metal);
  background-size: 220% 100%;
  box-shadow: 0 0 0 2px rgba(255, 241, 184, .25) inset, 8px 8px 0 rgba(0, 0, 0, .5), 0 0 40px rgba(232, 193, 90, .28);
  animation: af-gold-slide 6s ease-in-out infinite;
}
@keyframes af-gold-slide { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
.al-gold .mark { color: var(--gold); text-shadow: 0 0 18px rgba(232, 193, 90, .35); }

/* Buttons and links in gold. */
.al-gold .btn-acc { background: var(--gold-metal); background-size: 200% 100%; border-color: transparent; color: #1a1204; transition: background-position .5s, box-shadow .25s, transform .15s; }
.al-gold .btn-acc:hover { background-position: 100% 50%; box-shadow: 0 0 24px rgba(232, 193, 90, .45); color: #1a1204; }
.al-gold .af-or a, .al-gold .af-calls-none a, .al-gold .al-sec-head p a { color: var(--gold); }
.al-gold .af-search-box:focus-within { border-color: var(--gold); color: var(--gold); box-shadow: 0 0 0 4px var(--gold-soft); }
.al-gold .al-sec-head h2 em, .al-gold .al-gems-head h2 em {
  background: var(--gold-metal); background-size: 200% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: af-gold-slide 7s ease-in-out infinite;
}

/* The collage: hover one and it comes forward, the others dim, a gold edge lights. */
.al-gold .af-tile { border-color: rgba(232, 193, 90, .28); transition: transform .35s cubic-bezier(.2, .8, .2, 1), filter .35s, border-color .35s, box-shadow .35s; }
.al-gold .af-mosaic:hover .af-tile:not(:hover) { filter: brightness(.55) saturate(.8); }
.al-gold .af-tile:hover { transform: scale(1.04) rotate(0deg); z-index: 2; border-color: var(--gold-hi); box-shadow: 0 18px 40px rgba(0, 0, 0, .55), 0 0 0 2px var(--gold), 0 0 34px rgba(232, 193, 90, .35); }
.al-gold .af-tile::after { content: ''; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 30%, rgba(255, 241, 184, .35) 48%, transparent 62%); transform: translateX(-120%); transition: transform .8s ease; pointer-events: none; }
.al-gold .af-tile:hover::after { transform: translateX(120%); }

/* The trust strip: gold icons that give a small hop. */
.al-gold .af-trust { border-color: rgba(232, 193, 90, .22); }
.al-gold .af-trust svg { color: var(--gold); transition: transform .3s cubic-bezier(.3, 1.6, .5, 1); }
.al-gold .af-trust span:hover svg { transform: translateY(-3px) rotate(-8deg) scale(1.15); }

/* Chips: a gold sheen runs across on hover; the chosen one is solid gold. */
.al-gold .al-chip { position: relative; overflow: hidden; isolation: isolate; transition: border-color .25s, color .25s, transform .2s; }
.al-gold .al-chip::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(115deg, transparent 25%, rgba(232, 193, 90, .28) 50%, transparent 75%); transform: translateX(-110%); transition: transform .6s ease; }
.al-gold .al-chip:hover { border-color: var(--gold); color: var(--gold-hi); transform: translateY(-2px); }
.al-gold .al-chip:hover::after { transform: translateX(110%); }
.al-gold .al-chip[aria-current="true"] { background: var(--gold-metal); background-size: 200% 100%; border-color: transparent; color: #1a1204; }
.al-gold .af-now.is-on { color: var(--gold); }
.al-gold .af-now.is-on .af-switch { background: var(--gold-metal); }
.al-gold .af-more[open] > summary { border-color: var(--gold); color: var(--gold); }
.al-gold .al-refine-field.is-on select { border-color: var(--gold); }
.al-gold .al-refine-field.is-on span { color: var(--gold); }

/* Artist cards: lift, a gold rim that glows, the art zooms, a light passes
   over it, and their picture's ring turns gold. */
.al-gold .af-card { transition: transform .35s cubic-bezier(.2, .8, .2, 1), border-color .35s, box-shadow .35s; }
.al-gold .af-card:hover { transform: translateY(-8px); border-color: var(--gold); box-shadow: 0 22px 44px rgba(0, 0, 0, .55), 0 0 0 1px var(--gold-hi), 0 0 38px rgba(232, 193, 90, .22); }
.al-gold .af-cover::after { content: ''; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 35%, rgba(255, 241, 184, .3) 50%, transparent 65%); transform: translateX(-120%); pointer-events: none; }
.al-gold .af-card:hover .af-cover::after { transform: translateX(120%); transition: transform .9s ease; }
.al-gold .af-card:hover .af-cover-side { transform: scale(1.06); }
.al-gold .af-face { transition: border-color .35s, box-shadow .35s, transform .35s cubic-bezier(.3, 1.5, .5, 1); }
.al-gold .af-card:hover .af-face { border-color: var(--gold); box-shadow: 0 0 0 2px var(--gold-hi), 0 0 18px rgba(232, 193, 90, .5); transform: scale(1.08) rotate(-4deg); }
.al-gold .af-card .al-card-name { transition: color .3s; }
.al-gold .af-card:hover .al-card-name { color: var(--gold-hi); }
.al-gold .al-from b { color: var(--gold); }
.al-gold .al-stars { color: var(--gold); }
.al-gold .af-card .al-tag { transition: border-color .3s, color .3s; }
.al-gold .af-card:hover .al-tag { border-color: rgba(232, 193, 90, .45); color: var(--gold-hi); }

/* Open calls: lift, and a gold line grows along the bottom. */
.al-gold .af-call { overflow: hidden; }
.al-gold .af-call-budget { color: var(--gold); }
.al-gold .af-call::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--gold-metal); transform: scaleX(0); transform-origin: left; transition: transform .45s ease; }
.al-gold .af-call:hover { border-color: rgba(232, 193, 90, .5); box-shadow: 0 0 26px rgba(232, 193, 90, .14); }
.al-gold .af-call:hover::after { transform: scaleX(1); }

/* How it works: four big gold numbers. Each card holds its number huge and
   outlined behind the words; on hover the number fills with gold and the
   card's little picture spins up. A dotted gold line joins the four. */
.al-gold .af-how { counter-reset: none; gap: 18px; position: relative; }
.al-gold .af-how::before { content: ''; position: absolute; left: 6%; right: 6%; top: 51px; border-top: 2px dotted rgba(232, 193, 90, .35); z-index: 0; }
.al-gold .af-step { position: relative; z-index: 1; display: block; min-height: 236px; padding: 26px 22px 22px; overflow: hidden; border: 2px solid rgba(232, 193, 90, .22); background: linear-gradient(160deg, rgba(232, 193, 90, .08), rgba(14, 12, 8, .92) 55%); transition: transform .35s cubic-bezier(.2, .8, .2, 1), border-color .35s, box-shadow .35s; }
.al-gold .af-step:nth-child(even) { transform: translateY(18px); }
.al-gold .af-num {
  position: absolute; right: 14px; top: 10px;
  font-family: var(--head); font-size: 7.2rem; line-height: .9; letter-spacing: -.02em;
  color: transparent; -webkit-text-fill-color: transparent; -webkit-text-stroke: 2px rgba(232, 193, 90, .55);
  transition: transform .5s cubic-bezier(.3, 1.4, .5, 1), -webkit-text-stroke-color .3s;
  pointer-events: none;
}
.al-gold .af-step:hover { transform: translateY(-8px); border-color: var(--gold); box-shadow: 0 20px 40px rgba(0, 0, 0, .5), 0 0 30px rgba(232, 193, 90, .2); }
.al-gold .af-step:nth-child(even):hover { transform: translateY(10px); }
/* On hover the outline fills with moving gold. */
.al-gold .af-step:hover .af-num { background: var(--gold-metal); background-size: 220% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-stroke-color: rgba(255, 241, 184, .35); transform: scale(1.06) rotate(-4deg); animation: af-gold-slide 2.4s ease-in-out infinite; }
.al-gold .af-step-ico { position: relative; display: grid; place-items: center; width: 50px; height: 50px; margin-bottom: 26px; border-radius: 50%; background: var(--gold-metal); color: #1a1204; font-style: normal; box-shadow: 0 0 0 5px rgba(232, 193, 90, .12); transition: transform .5s cubic-bezier(.3, 1.6, .5, 1); }
.al-gold .af-step:hover .af-step-ico { transform: rotate(-12deg) scale(1.12); }
.al-gold .af-step strong { position: relative; display: block; font-family: var(--head); font-weight: 400; font-size: 1.9rem; line-height: 1; text-transform: uppercase; color: var(--tx); }
.al-gold .af-step p { position: relative; margin: 10px 0 0; color: var(--tx2); font-size: .92rem; line-height: 1.55; max-width: 24ch; }

@media (max-width: 960px) {
  .al-gold .af-how::before { display: none; }
  .al-gold .af-step:nth-child(even), .al-gold .af-step:nth-child(even):hover { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .al-gold .al-title em, .al-gold .al-sec-head h2 em, .al-gold .al-gems-head h2 em, .al-gold .af-step:hover .af-num { animation: none; }
  .al-gold .af-tile, .al-gold .af-card, .al-gold .af-step, .al-gold .af-face, .al-gold .al-chip { transition: none; }
  .al-gold .af-tile::after, .al-gold .af-cover::after, .al-gold .al-chip::after { display: none; }
}

/* The title's typing word (assets/js/alley-type.js): one line for the word,
   held at its height so nothing below jumps; ALLEY in gold under it. */
.af-type-title { display: flex; flex-direction: column; align-items: flex-start; gap: .14em; }
.af-type { display: flex; align-items: baseline; min-height: .9em; font-size: .62em; white-space: nowrap; color: var(--tx); }
.af-type-word { display: inline-flex; }
.af-l { display: inline-block; transform-origin: 50% 90%; }
.af-l.is-space { width: .28em; }
.af-l.is-scramble { color: var(--gold, #E8C15A); opacity: .75; filter: blur(.6px); }
.af-l.is-in { animation: af-land .42s cubic-bezier(.25, 1.6, .45, 1) both; }
.af-l.is-out { animation: af-leave .18s ease-in both; }
@keyframes af-land {
  0%   { transform: translateY(-38%) rotate(-10deg) scale(.6); opacity: 0; color: var(--gold-hi, #FFF1B8); text-shadow: 0 0 22px rgba(232, 193, 90, .8); }
  60%  { transform: translateY(6%) rotate(3deg) scale(1.08); opacity: 1; }
  100% { transform: none; opacity: 1; color: inherit; text-shadow: none; }
}
@keyframes af-leave { to { transform: translateY(18%) scale(.6) rotate(6deg); opacity: 0; } }
.af-caret { display: inline-block; width: .09em; height: .78em; margin-left: .06em; align-self: center; background: var(--gold-metal, #E8C15A); box-shadow: 0 0 14px rgba(232, 193, 90, .7); animation: af-caret 1s steps(1) infinite; }
.af-type:not(.is-holding) .af-caret { animation: none; opacity: 1; }
@keyframes af-caret { 50% { opacity: 0; } }
.af-type-title em { margin-left: 0; }
@media (prefers-reduced-motion: reduce) {
  .af-caret { animation: none; }
  .af-l.is-in, .af-l.is-out { animation: none; }
}

/* ---- Room for Anton's capitals, and things that pop out (round three) ----
   Anton's letters rise above their tight line box (line-height ~.86). On
   the gold bar behind ALLEY that left the dark tops of the letters off the
   bar, lost against the page; on the gold-filled words and numbers the fill
   stopped at the box, so their tops dropped out. Each now has the room. */
.al-gold .al-title em { line-height: 1; padding: .1em .12em .02em; }
.al-gold .al-sec-head h2 em, .al-gold .al-gems-head h2 em { display: inline-block; padding-top: .14em; margin-top: -.14em; line-height: 1.02; }
.al-gold .af-num { line-height: 1.12; padding: .06em .04em 0; }

/* How it works: the cards no longer clip, so on hover the number leaps up
   out of its box and overlaps the edge, filling with gold as it goes. */
.al-gold .af-step { overflow: visible; }
.al-gold .af-step:hover { z-index: 5; }
.al-gold .af-num { top: 4px; right: 14px; transform-origin: 70% 80%; transition: transform .55s cubic-bezier(.25, 1.7, .45, 1), -webkit-text-stroke-color .3s, filter .4s; }
.al-gold .af-step:hover .af-num {
  transform: translate(8%, -46%) scale(1.32) rotate(-6deg);
  filter: drop-shadow(0 14px 18px rgba(0, 0, 0, .6)) drop-shadow(0 0 22px rgba(232, 193, 90, .45));
}

/* The collage: hovering a tile makes it pop right out — much bigger, lifted
   over its neighbours with a deep shadow and the gold edge — while the
   gleam still sweeps across it. The big tile grows a little less. */
.al-gold .af-mosaic { position: relative; z-index: 3; }
.al-gold .af-tile { transform-origin: center; }
.al-gold .af-tile:hover { z-index: 6; transform: scale(1.32) rotate(0deg); box-shadow: 0 30px 60px rgba(0, 0, 0, .7), 0 0 0 2px var(--gold), 0 0 44px rgba(232, 193, 90, .45); }
.al-gold .af-mosaic.is-3 .af-tile:first-child:hover, .al-gold .af-mosaic.is-4 .af-tile:first-child:hover, .al-gold .af-mosaic.is-5 .af-tile:first-child:hover { transform: scale(1.14); }
/* Grow toward the middle of the collage, so the edges never run off. */
.al-gold .af-mosaic.is-5 .af-tile:nth-child(2), .al-gold .af-mosaic.is-5 .af-tile:nth-child(4) { transform-origin: 50% 50%; }
.al-gold .af-mosaic.is-5 .af-tile:nth-child(3), .al-gold .af-mosaic.is-5 .af-tile:nth-child(5) { transform-origin: 90% 50%; }
.al-gold .af-mosaic.is-4 .af-tile:nth-child(3), .al-gold .af-mosaic.is-4 .af-tile:nth-child(4) { transform-origin: 90% 50%; }
.al-gold .af-mosaic.is-3 .af-tile:nth-child(2), .al-gold .af-mosaic.is-3 .af-tile:nth-child(3) { transform-origin: 90% 50%; }
.al-gold .af-tile:hover span { opacity: 1; transform: none; }
@media (max-width: 960px) {
  .al-gold .af-tile:hover { transform: scale(1.12); }
}
@media (prefers-reduced-motion: reduce) {
  .al-gold .af-step:hover .af-num, .al-gold .af-tile:hover { transform: none; }
}

/* ---- Round four: ALLEY in gold letters, and room between the sections ----
   ALLEY is no longer a gold bar with dark letters: the letters themselves
   are polished gold, with the same light sliding across them and a soft
   gold glow. */
.al-gold .al-title em {
  display: inline-block; transform: none; margin-left: -.02em;
  padding: .1em .04em .04em; line-height: 1;
  color: transparent; -webkit-text-fill-color: transparent;
  background: var(--gold-metal); background-size: 220% 100%;
  -webkit-background-clip: text; background-clip: text;
  box-shadow: none;
  filter: drop-shadow(0 0 22px rgba(232, 193, 90, .35)) drop-shadow(0 6px 0 rgba(0, 0, 0, .55));
}

/* The page breathes: far more room between the artists, open calls and how
   it works — and above the steps, for the numbers that leap out of them. */
.al-gold .af-sec { margin-top: 128px; }
.al-gold .af-sec .al-sec-head { margin-bottom: 30px; }
.al-gold .af-sec:last-child .al-sec-head { margin-bottom: 64px; }
.al-gold .al-gems { margin-bottom: 64px; }
.al-gold .af-grid { margin-bottom: 8px; }
@media (max-width: 760px) {
  .al-gold .af-sec { margin-top: 88px; }
  .al-gold .af-sec:last-child .al-sec-head { margin-bottom: 44px; }
  .al-gold .af-how { gap: 28px; }
}
/* Without the gold bar, ALLEY sits close under the typed word again. */
.al-gold .af-type-title { gap: 0; }

/* The category row's ‹ › and drag (assets/js/alley-cats.js). The fade sits
   only at the end that has more to see. */
.af-cats-wrap { position: relative; flex: 1 1 520px; min-width: 0; display: flex; align-items: center; }
.af-cats-wrap .af-cats { flex: 1; -webkit-mask-image: none; mask-image: none; cursor: grab; scroll-behavior: auto; }
.af-cats-wrap .af-cats.is-dragging { cursor: grabbing; user-select: none; }
.af-cats-wrap .af-cats.is-dragging .al-chip { pointer-events: none; }
.af-cats-wrap.has-next .af-cats { -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent); mask-image: linear-gradient(90deg, #000 88%, transparent); }
.af-cats-wrap.has-prev .af-cats { -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%); mask-image: linear-gradient(90deg, transparent, #000 12%); }
.af-cats-wrap.has-prev.has-next .af-cats { -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.af-cats-arrow { position: absolute; top: 50%; z-index: 2; display: grid; place-items: center; width: 36px; height: 36px; margin-top: -19px; padding: 0; border: 2px solid var(--gold, var(--ylw)); border-radius: 50%; background: #0c0a06; color: var(--gold, var(--ylw)); font-size: 1.3rem; line-height: 1; cursor: pointer; box-shadow: 0 0 16px rgba(232, 193, 90, .3); transition: transform .2s, background-color .2s; }
.af-cats-arrow[hidden] { display: none; }
.af-cats-arrow.is-prev { left: -6px; }
.af-cats-arrow.is-next { right: -6px; }
.af-cats-arrow:hover { transform: scale(1.12); background: #1a1406; }
@media (hover: none) { .af-cats-arrow { display: none; } }

/* The ‹ › on the category row, bolder: a gold gem — a diamond of polished
   gold with a dark double chevron — inside a ring that breathes. On hover
   the gem grows and spins a little, the chevron dashes the way it scrolls
   and a light runs over it; the "more" one gives a small nudge now and
   then so it is noticed. */
.af-cats-arrow { width: 52px; height: 52px; margin-top: -26px; border: 0; border-radius: 0; background: none; box-shadow: none; color: #1a1204; overflow: visible; }
.af-cats-arrow::before { content: ''; position: absolute; inset: 4px; border-radius: 50%; border: 2px solid rgba(232, 193, 90, .55); animation: af-ring 2.4s ease-out infinite; }
@keyframes af-ring { 0% { transform: scale(.85); opacity: .9; } 100% { transform: scale(1.35); opacity: 0; } }
.af-arr-gem { position: relative; display: grid; place-items: center; width: 36px; height: 36px; transform: rotate(45deg); border-radius: 8px; background: var(--gold-metal, #E8C15A); background-size: 220% 100%; box-shadow: 0 0 0 3px #0c0a06, 0 0 0 5px rgba(232, 193, 90, .6), 0 8px 18px rgba(0, 0, 0, .6), 0 0 22px rgba(232, 193, 90, .45); overflow: hidden; transition: transform .35s cubic-bezier(.3, 1.6, .5, 1), box-shadow .3s, background-position .6s; }
.af-arr-gem svg { transform: rotate(-45deg); transition: transform .3s cubic-bezier(.3, 1.6, .5, 1); }
.af-arr-gem::after { content: ''; position: absolute; inset: -40%; background: linear-gradient(90deg, transparent 35%, rgba(255, 255, 255, .7) 50%, transparent 65%); transform: translateX(-100%) rotate(-45deg); }
.af-cats-arrow:hover { transform: none; background: none; }
.af-cats-arrow:hover .af-arr-gem { transform: rotate(45deg) scale(1.2); background-position: 100% 50%; box-shadow: 0 0 0 3px #0c0a06, 0 0 0 6px var(--gold-hi, #FFF1B8), 0 10px 22px rgba(0, 0, 0, .6), 0 0 34px rgba(232, 193, 90, .7); }
.af-cats-arrow:hover .af-arr-gem::after { transform: translateX(100%) rotate(-45deg); transition: transform .6s ease; }
.af-cats-arrow.is-next:hover svg { transform: rotate(-45deg) translateX(3px); }
.af-cats-arrow.is-prev:hover svg { transform: rotate(-45deg) translateX(-3px); }
.af-cats-arrow:active .af-arr-gem { transform: rotate(45deg) scale(.92); }
.af-cats-arrow:focus-visible { outline: none; }
.af-cats-arrow:focus-visible .af-arr-gem { box-shadow: 0 0 0 3px #0c0a06, 0 0 0 6px #fff, 0 0 30px rgba(232, 193, 90, .7); }
.af-cats-arrow.is-prev { left: -14px; }
.af-cats-arrow.is-next { right: -14px; animation: af-nudge 4s ease-in-out 1.5s infinite; }
.af-cats-arrow.is-next:hover { animation: none; }
@keyframes af-nudge { 0%, 82%, 100% { transform: translateX(0); } 87% { transform: translateX(6px); } 92% { transform: translateX(0); } 96% { transform: translateX(4px); } }
@media (prefers-reduced-motion: reduce) {
  .af-cats-arrow::before, .af-cats-arrow.is-next { animation: none; }
}
/* Room at each end for the gems, so the grown one never touches Open now. */
.af-cats-wrap { margin: 0 22px 0 14px; }
@media (hover: none) { .af-cats-wrap { margin: 0; } }

/* Browsing in place (assets/js/alley-browse.js): newcomers rise in one after
   another, leavers shrink away where they stood, and the grid dims a touch
   while the next view loads. */
.af-results { transition: opacity .2s; }
.af-results.is-loading { opacity: .6; }
.af-card.af-enter { animation: af-card-in .6s cubic-bezier(.2, .9, .25, 1.15) both; }
@keyframes af-card-in {
  0% { opacity: 0; transform: translateY(34px) scale(.92) rotate(-1.5deg); filter: brightness(1.6) saturate(.4); }
  60% { opacity: 1; filter: brightness(1.15); }
  100% { opacity: 1; transform: none; filter: none; }
}
.af-ghost { transition: transform .45s cubic-bezier(.5, 0, .75, 0), opacity .45s; transform-origin: center; }
.af-ghost.is-gone { transform: scale(.7) rotate(4deg) translateY(20px); opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  .af-card.af-enter { animation: none; }
}

/* ---- The backdrop's gold bokeh and glitter (alley/index) ----
   Bokeh: soft gold discs (radial gradients, no blur filter, so it stays
   cheap) drifting slowly about their places and breathing in brightness.
   Glitter: pin-points of light that flare into a little four-point star
   and fade, each on its own beat. Only transform and opacity move, and it
   all rests for reduced motion or the site's lighter mode. */
.af-bokeh, .af-glitter { position: absolute; inset: 0; pointer-events: none; }
.af-bokeh i { position: absolute; left: var(--x); top: var(--y); width: var(--s); height: var(--s); margin: calc(var(--s) / -2) 0 0 calc(var(--s) / -2); border-radius: 50%;
  background: radial-gradient(circle at 40% 38%, rgba(255, 226, 140, .75), rgba(232, 180, 60, .38) 38%, rgba(201, 140, 30, .1) 62%, transparent 72%);
  opacity: var(--o); mix-blend-mode: screen; will-change: transform, opacity;
  animation: af-bokeh var(--d) ease-in-out var(--dl) infinite; }
.af-bokeh i:nth-child(3n) { background: radial-gradient(circle at 50% 50%, transparent 52%, rgba(255, 241, 184, .32) 60%, rgba(232, 193, 90, .1) 68%, transparent 74%); }
/* Each round, slowly: fades in where it is, floats gently along its path,
   fades away — and alley-sparkle.js moves it before the next. No flash, no
   snap: a calm glow coming and going all over the page. */
@keyframes af-bokeh {
  0%   { transform: translate(0, 0) scale(.7); opacity: 0; }
  30%  { opacity: var(--o); }
  70%  { opacity: var(--o); }
  100% { transform: translate(var(--dx), var(--dy)) scale(1.08); opacity: 0; }
}
.af-glitter i { position: absolute; left: var(--x); top: var(--y); width: var(--s); height: var(--s); border-radius: 50%; background: #fff6d2; box-shadow: 0 0 6px 1px rgba(255, 228, 140, .9), 0 0 14px 2px rgba(232, 193, 90, .5); opacity: 0; will-change: transform, opacity; animation: af-glint var(--d) ease-in-out var(--dl) infinite; }
.af-glitter i::before, .af-glitter i::after { content: ''; position: absolute; left: 50%; top: 50%; background: linear-gradient(90deg, transparent, rgba(255, 246, 210, .95), transparent); }
.af-glitter i::before { width: calc(var(--s) * 5); height: 1px; transform: translate(-50%, -50%); }
.af-glitter i::after { width: 1px; height: calc(var(--s) * 5); transform: translate(-50%, -50%); background: linear-gradient(180deg, transparent, rgba(255, 246, 210, .95), transparent); }
@keyframes af-glint {
  0%, 70%, 100% { opacity: 0; transform: scale(.3) rotate(0deg); }
  80% { opacity: 1; transform: scale(1) rotate(25deg); }
  88% { opacity: .6; transform: scale(.7) rotate(45deg); }
}
@media (prefers-reduced-motion: reduce) {
  .af-bokeh i, .af-glitter i { animation: none; }
  .af-glitter i { opacity: .35; transform: scale(.6); }
}
.perf-lite .af-bokeh i, .perf-lite .af-glitter i { animation: none; }
.perf-lite .af-glitter { display: none; }

/* ---------------- Open commissions row + quick views (alley-quick.js) ---------------- */
/* Open commissions: one row that scrolls sideways, each a picture, a title,
   the artist and the price. A tap pops the service open in place. */
.af-open .al-sec-head p { color: var(--tx3); }
.af-svcs { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(220px, 260px); gap: 16px; overflow-x: auto; padding: 14px 4px 22px; margin: -14px -4px 0; scroll-snap-type: x mandatory; scrollbar-width: thin; scrollbar-color: rgba(232, 193, 90, .4) transparent; }
.af-svc { position: relative; display: flex; flex-direction: column; scroll-snap-align: start; border: 1px solid var(--line); border-radius: 16px; overflow: hidden; background: var(--panel); color: var(--tx); text-decoration: none; transition: transform .35s cubic-bezier(.2, .8, .2, 1), border-color .35s, box-shadow .35s; }
.af-svc-pic { position: relative; display: grid; place-items: center; aspect-ratio: 4 / 3; overflow: hidden; background: linear-gradient(135deg, rgba(232, 193, 90, .18), rgba(0, 0, 0, .4)); }
.af-svc-pic img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.2, .8, .2, 1); }
.af-svc-pic::after { content: ''; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, rgba(255, 241, 184, .28) 48%, transparent 66%); transform: translateX(-120%); pointer-events: none; }
.af-svc-flag { position: absolute; top: 10px; left: 10px; padding: 3px 9px; border-radius: 99px; background: rgba(0, 0, 0, .7); color: var(--gold, #E8C15A); font-size: .7rem; font-weight: 900; letter-spacing: .04em; }
.af-svc-body { display: grid; gap: 3px; padding: 12px 14px 14px; }
.af-svc-body > b { font-size: 1rem; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.af-svc-body small { color: var(--tx3); font-size: .8rem; }
.af-svc-price { margin-top: 4px; color: var(--tx2); font-size: .82rem; }
.af-svc-price b { font-family: var(--head); font-weight: 400; font-size: 1.3rem; color: var(--gold, var(--ylw)); letter-spacing: .02em; }
.af-svc:hover, .af-svc:focus-visible { transform: translateY(-8px) rotate(-.6deg); border-color: var(--gold, var(--ylw)); box-shadow: 0 20px 40px rgba(0, 0, 0, .5), 0 0 32px rgba(232, 193, 90, .2); }
.af-svc:hover .af-svc-pic img { transform: scale(1.08); }
.af-svc:hover .af-svc-pic::after { transform: translateX(120%); transition: transform .9s ease; }
.af-call[data-qv-src], .al-card-link[data-qv-src] { cursor: zoom-in; }

/* The pop-up: dark glass with a gold edge; it springs up from a little below. */
html.qv-open { overflow: hidden; }
.af-qv { --gold: #E8C15A; --gold-hi: #FFF1B8; --gold-metal: linear-gradient(115deg, #8C6418 0%, #E8C15A 22%, #FFF1B8 38%, #D6A73E 52%, #9C7019 70%, #F2D27A 88%, #B8862A 100%);
  margin: auto; inset: 0; width: min(760px, calc(100vw - 24px)); max-height: calc(100dvh - 40px); padding: 0; border: 1px solid rgba(232, 193, 90, .45); border-radius: 22px; background: linear-gradient(180deg, #17140d, #0d0c09 60%); color: var(--tx); box-shadow: 0 30px 80px rgba(0, 0, 0, .7), 0 0 0 1px rgba(255, 241, 184, .08), 0 0 60px rgba(232, 193, 90, .14); overflow: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: rgba(232, 193, 90, .4) transparent; }
.af-qv::backdrop { background: rgba(5, 4, 2, .62); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.af-qv[open] { animation: qv-pop .42s cubic-bezier(.2, 1.2, .3, 1) backwards; } /* backwards: once it has played, no transform stays on the pop-up — a lingering one would trap the lightbox inside it */
.af-qv[open]::backdrop { animation: qv-dim .3s ease both; }
.af-qv.is-in .af-qv-body > * { animation: qv-rise .4s cubic-bezier(.2, .8, .2, 1) both; }
.af-qv.is-loading .af-qv-body { opacity: .55; transition: opacity .2s; }
@keyframes qv-pop { from { opacity: 0; transform: translateY(28px) scale(.94); } }
@keyframes qv-dim { from { opacity: 0; } }
@keyframes qv-rise { from { opacity: 0; transform: translateY(10px); } }
.af-qv-bar { position: sticky; top: 0; z-index: 5; display: flex; justify-content: space-between; height: 0; }
.af-qv-x, .af-qv-back { position: absolute; top: 12px; min-width: 38px; height: 38px; padding: 0 12px; border: 1px solid rgba(232, 193, 90, .4); border-radius: 99px; background: rgba(10, 9, 6, .78); color: var(--gold-hi); font: inherit; font-weight: 800; cursor: pointer; backdrop-filter: blur(6px); transition: transform .2s, border-color .2s, background .2s; }
.af-qv-x { right: 12px; padding: 0; }
.af-qv-back { left: 12px; font-size: .85rem; }
.af-qv-back[hidden] { display: none; }
.af-qv-x:hover, .af-qv-back:hover { border-color: var(--gold); background: rgba(232, 193, 90, .18); transform: scale(1.06); }
.af-qv-x:hover { transform: rotate(90deg) scale(1.06); }
.af-qv-body { min-height: 180px; }
.qv-wait { display: flex; justify-content: center; gap: 8px; padding: 90px 0; }
.qv-wait i { width: 10px; height: 10px; border-radius: 50%; background: var(--gold); animation: qv-dot 1s ease-in-out infinite; }
.qv-wait i:nth-child(2) { animation-delay: .15s; }
.qv-wait i:nth-child(3) { animation-delay: .3s; }
@keyframes qv-dot { 50% { transform: translateY(-10px); opacity: .4; } }

/* The footer every quick view ends on: the full page, then the gold action. */
.qv-foot { position: sticky; bottom: 0; z-index: 4; display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 10px; margin-top: 18px; padding: 14px 22px 18px; background: linear-gradient(180deg, rgba(13, 12, 9, 0), #0d0c09 34%); }
.af-qv .btn-acc { background: var(--gold-metal); background-size: 200% 100%; color: #1a1408; border-color: transparent; transition: background-position .6s ease, transform .2s; }
.af-qv .btn-acc:hover { background-position: 100% 0; transform: translateY(-2px); }

/* The artist. */
.qv-banner { position: relative; height: 170px; overflow: hidden; background: radial-gradient(120% 140% at 20% 0%, rgba(232, 193, 90, .35), transparent 60%), #14110a; }
.qv-banner img { width: 100%; height: 100%; object-fit: cover; object-position: 50% var(--qv-focus, 50%); }
.qv-banner img.is-blur { filter: blur(18px) saturate(1.2); transform: scale(1.2); opacity: .7; }
.qv-banner::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, #16130c); }
.qv-head { position: relative; display: flex; align-items: flex-end; gap: 16px; margin: -48px 22px 0; }
.qv-face { flex: none; display: grid; place-items: center; width: 96px; height: 96px; border-radius: 50%; overflow: hidden; border: 3px solid var(--gold); background: #1d1810; color: var(--gold-hi); font-family: var(--head); font-size: 2rem; box-shadow: 0 0 0 3px #16130c, 0 0 28px rgba(232, 193, 90, .35); }
.qv-face img { width: 100%; height: 100%; object-fit: cover; }
.qv-who h2 { margin: 0; font-family: var(--head); font-weight: 400; font-size: clamp(1.7rem, 4vw, 2.3rem); line-height: 1.15; padding-top: .08em; text-transform: uppercase; background: var(--gold-metal); -webkit-background-clip: text; background-clip: text; color: transparent; }
.qv-who p { margin: 2px 0 6px; color: var(--tx2); font-size: .92rem; }
.qv-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 22px 0; }
.qv-chips .al-fact { padding: 5px 11px; font-size: .78rem; }
.qv-chips .al-fact b { font-size: 1rem; }
.qv-chips .al-fact.is-merch { border-color: rgba(232, 193, 90, .5); color: var(--gold); }
.qv-tabs { position: sticky; top: 0; z-index: 3; display: flex; gap: 4px; margin: 18px 0 0; padding: 0 22px; border-bottom: 1px solid rgba(232, 193, 90, .2); background: #110f0a; overflow-x: auto; scrollbar-width: none; }
.qv-tab { position: relative; flex: none; padding: 14px 12px 12px; border: 0; background: none; color: var(--tx3); font: inherit; font-weight: 800; font-size: .9rem; cursor: pointer; transition: color .2s; }
.qv-tab span { display: inline-grid; place-items: center; min-width: 20px; height: 20px; margin-left: 4px; padding: 0 5px; border-radius: 99px; background: rgba(255, 255, 255, .08); font-size: .7rem; }
.qv-tab::after { content: ''; position: absolute; left: 10px; right: 10px; bottom: -1px; height: 3px; border-radius: 3px; background: var(--gold-metal); transform: scaleX(0); transition: transform .3s cubic-bezier(.2, .8, .2, 1); }
.qv-tab:hover { color: var(--tx); }
.qv-tab.is-on { color: var(--gold-hi); }
.qv-tab.is-on::after { transform: scaleX(1); }
.qv-tab.is-on span { background: rgba(232, 193, 90, .22); color: var(--gold-hi); }
.qv-panes { padding: 18px 22px 0; }
.qv-pane { display: none; }
.qv-pane.is-on { display: block; animation: qv-rise .35s cubic-bezier(.2, .8, .2, 1) both; }
.qv-port { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
.qv-piece { aspect-ratio: 1; padding: 0; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: #000; cursor: zoom-in; transition: transform .3s cubic-bezier(.2, .8, .2, 1), border-color .3s, box-shadow .3s; animation: qv-rise .4s calc(var(--i, 0) * 35ms) both; }
.qv-piece img { display: block; width: 100%; height: 100%; object-fit: cover; }
.qv-piece:hover { transform: scale(1.05); border-color: var(--gold); box-shadow: 0 10px 26px rgba(0, 0, 0, .5), 0 0 20px rgba(232, 193, 90, .25); position: relative; z-index: 1; }
.qv-svcs { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.qv-svc { display: grid; grid-template-columns: 72px 1fr auto; align-items: center; gap: 14px; padding: 10px 14px 10px 10px; border: 1px solid var(--line); border-radius: 14px; background: rgba(255, 255, 255, .03); color: var(--tx); text-decoration: none; transition: border-color .25s, transform .25s, background .25s; }
.qv-svc:hover { border-color: var(--gold); background: rgba(232, 193, 90, .07); transform: translateX(4px); }
.qv-svc.is-shut { opacity: .62; }
.qv-svc-pic { width: 72px; height: 72px; border-radius: 10px; overflow: hidden; background: linear-gradient(135deg, rgba(232, 193, 90, .2), rgba(0, 0, 0, .4)); }
.qv-svc-pic img { width: 100%; height: 100%; object-fit: cover; }
.qv-svc-t { display: grid; gap: 2px; min-width: 0; }
.qv-svc-t small { color: var(--tx3); font-size: .78rem; }
.qv-svc-p { color: var(--tx3); font-size: .78rem; text-align: right; white-space: nowrap; }
.qv-svc-p b { display: block; font-family: var(--head); font-weight: 400; font-size: 1.3rem; color: var(--gold); }
.qv-merch { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.qv-prod { display: grid; gap: 3px; color: var(--tx); text-decoration: none; }
.qv-prod > span { aspect-ratio: 1; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: #f4f1ea; transition: transform .3s, border-color .3s; }
.qv-prod > span img { width: 100%; height: 100%; object-fit: cover; }
.qv-prod b { margin-top: 5px; font-size: .88rem; line-height: 1.25; }
.qv-prod small { color: var(--gold); font-weight: 800; }
.qv-prod:hover > span { transform: translateY(-4px) rotate(-1deg); border-color: var(--gold); }
.qv-more { margin: 14px 0 0; }
.qv-more a, .qv-by { color: var(--gold); font-weight: 800; text-decoration: none; }
.qv-about p { margin: 0 0 12px; color: var(--tx2); line-height: 1.6; }
.qv-pane .al-tags { margin-top: 10px; }
.qv-artist { position: relative; min-height: 100%; }

/* A service. */
.qv-service, .qv-call { padding: 58px 22px 0; }
.qv-svc-head h2, .qv-call h2 { margin: 6px 0 4px; font-family: var(--head); font-weight: 400; font-size: clamp(1.6rem, 4vw, 2.2rem); line-height: 1.15; padding-top: .08em; text-transform: uppercase; color: var(--gold-hi); }
.qv-by { font-size: .85rem; }
.qv-service .pk-price { color: var(--gold); font-size: 1.15rem; }
.qv-service .pk-slide img { max-height: 52vh; border: 1px solid rgba(232, 193, 90, .25); }
.qv-service .pk-nav button:hover { border-color: var(--gold); color: var(--gold); }
.qv-service .pk-sum { color: var(--tx2); line-height: 1.6; }
.qv-service .pk-meta { display: flex; flex-wrap: wrap; gap: 8px; }
.qv-service .pk-meta span { padding: 4px 11px; border: 1px solid var(--line2); border-radius: 99px; font-size: .8rem; color: var(--tx2); }

/* An open call. */
.qv-call-budget { margin: 0 0 12px; font-family: var(--head); font-size: 1.5rem; background: var(--gold-metal); -webkit-background-clip: text; background-clip: text; color: transparent; }
.qv-call-brief { margin: 16px 0; padding: 14px 16px; border-left: 3px solid var(--gold); border-radius: 0 12px 12px 0; background: rgba(232, 193, 90, .06); color: var(--tx2); line-height: 1.6; }
.qv-call-n { color: var(--tx3); }
.qv-call-n b { color: var(--gold-hi); font-size: 1.15rem; }

@media (max-width: 640px) {
  .af-qv { width: 100vw; max-width: 100vw; max-height: 92dvh; margin: auto 0 0; border-radius: 22px 22px 0 0; border-bottom: 0; }
  .af-qv[open] { animation-name: qv-sheet; }
  @keyframes qv-sheet { from { transform: translateY(60%); opacity: .4; } }
  .qv-banner { height: 130px; }
  .qv-face { width: 76px; height: 76px; }
  .qv-head { margin: -38px 16px 0; gap: 12px; }
  .qv-chips, .qv-panes { margin-left: 16px; margin-right: 16px; padding-left: 0; padding-right: 0; }
  .qv-tabs { padding: 0 12px; }
  .qv-port { grid-template-columns: repeat(3, 1fr); gap: 6px; }
  .qv-service, .qv-call { padding: 56px 16px 0; }
  .qv-svc { grid-template-columns: 56px 1fr auto; gap: 10px; }
  .qv-svc-pic { width: 56px; height: 56px; }
  .qv-foot { padding: 12px 16px 16px; }
  .qv-foot { flex-wrap: nowrap; gap: 8px; }
  .qv-foot .btn { flex: 1 1 auto; min-width: 0; justify-content: center; text-align: center; padding-left: 10px; padding-right: 10px; font-size: .74rem; white-space: normal; line-height: 1.2; }
  .qv-foot .btn-acc { flex-grow: 1.6; }
  .af-svcs { grid-auto-columns: 72%; }
}
@media (prefers-reduced-motion: reduce) {
  .af-qv[open], .af-qv[open]::backdrop, .af-qv.is-in .af-qv-body > *, .qv-pane.is-on, .qv-piece, .qv-big, .qv-big img { animation: none; }
  .af-svc, .af-svc-pic img, .qv-piece, .qv-svc { transition: none; }
}
.af-qv.has-back .qv-by { display: none; }
.qv-call-clock { --c: var(--grn); }
.qv-call-clock.is-soon { --c: var(--gold); }
.qv-call-clock.is-late { --c: var(--red, #E73843); }
.qv-panes { min-height: 240px; }

/* The open-commissions row scrolls like the categories: no scrollbar, gem
   arrows at the ends that have more, soft fades, and a thin gold line. */
.af-open { margin-bottom: 8px; }
.af-rail { position: relative; }
.af-rail .af-svcs { scrollbar-width: none; cursor: grab; padding-bottom: 18px; scroll-padding-inline: 4px; }
.af-rail .af-svcs::-webkit-scrollbar { display: none; }
.af-rail .af-svcs.is-dragging { cursor: grabbing; user-select: none; scroll-snap-type: none; }
.af-rail .af-svcs.is-dragging .af-svc { pointer-events: none; }
.af-rail.has-next .af-svcs { -webkit-mask-image: linear-gradient(90deg, #000 90%, transparent); mask-image: linear-gradient(90deg, #000 90%, transparent); }
.af-rail.has-prev .af-svcs { -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%); mask-image: linear-gradient(90deg, transparent, #000 10%); }
.af-rail.has-prev.has-next .af-svcs { -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.af-rail .af-cats-arrow { top: calc(50% - 22px); }
.af-rail .af-cats-arrow.is-prev { left: -20px; }
.af-rail .af-cats-arrow.is-next { right: -20px; }
.af-rail-bar { position: relative; height: 3px; margin: 4px auto 0; width: min(240px, 40%); border-radius: 3px; background: rgba(232, 193, 90, .14); overflow: hidden; }
.af-rail-bar[hidden] { display: none; }
.af-rail-bar i { position: absolute; top: 0; bottom: 0; left: 0; border-radius: 3px; background: var(--gold-metal, #E8C15A); box-shadow: 0 0 10px rgba(232, 193, 90, .6); transition: left .15s linear, width .2s; }
.af-open + .af-browse, .af-open ~ .af-browse { margin-top: 44px; }

/* Grab and slide: with a mouse the row moves only by hand (no snapping to
   fight the glide); held cards sink a touch, like picking up a deck. */
@media (hover: hover) and (pointer: fine) {
  .af-rail .af-svcs { scroll-snap-type: none; }
}
.af-rail .af-svc { transition: transform .35s cubic-bezier(.2, .8, .2, 1), border-color .35s, box-shadow .35s; }
.af-rail .af-svcs.is-held .af-svc, .af-rail .af-svcs.is-dragging .af-svc { transform: scale(.965); box-shadow: none; }
.af-rail .af-svcs.is-dragging .af-svc { border-color: rgba(232, 193, 90, .35); }
.af-rail .af-svcs.is-dragging { cursor: grabbing; }
.af-drag-hint { display: inline-flex; align-items: center; gap: 8px; }
.af-drag-hint span { color: var(--gold, var(--ylw)); font-size: 1.2em; animation: af-nudge 2.6s ease-in-out infinite; }
@keyframes af-nudge { 0%, 60%, 100% { transform: translateX(0); } 70% { transform: translateX(-4px); } 85% { transform: translateX(4px); } }
@media (prefers-reduced-motion: reduce) { .af-drag-hint span { animation: none; } .af-rail .af-svc { transition: none; } }

/* Filters drop down as a panel under the browse bar, the width of the page;
   the bar itself never changes shape (this replaces the old column layout,
   which turned the category row's width into a tall empty gap). */
.af-browse { position: relative; }
.af-browse:has(.af-more[open]) { flex-direction: row; align-items: center; }
.af-browse:has(.af-more[open]) .af-more { flex-basis: auto; }
.af-browse:has(.af-more[open]) .af-tools { justify-content: normal; }
.af-more .al-refine { position: absolute; top: calc(100% + 10px); left: 0; right: 0; z-index: 30; margin: 0; grid-template-columns: repeat(5, minmax(0, 1fr)) auto; border-radius: 16px; box-shadow: 0 24px 50px rgba(0, 0, 0, .6); animation: af-drop .28s cubic-bezier(.2, .8, .2, 1) both; }
.al-gold .af-more .al-refine { border: 1px solid rgba(232, 193, 90, .45); background: linear-gradient(180deg, #17140d, #0f0d09); box-shadow: 0 24px 50px rgba(0, 0, 0, .6), 0 0 30px rgba(232, 193, 90, .12); }
.af-more .al-refine::before { content: ''; position: absolute; top: -7px; right: 56px; width: 12px; height: 12px; transform: rotate(45deg); background: #17140d; border-left: 1px solid rgba(232, 193, 90, .45); border-top: 1px solid rgba(232, 193, 90, .45); }
.af-more .al-refine-field select { border-radius: 10px; }
.af-more-done { white-space: nowrap; }
.al-gold .af-more-done { background: var(--gold-metal); color: #1a1408; border-color: transparent; }
@keyframes af-drop { from { opacity: 0; transform: translateY(-8px); } }
@media (max-width: 1000px) { .af-more .al-refine { grid-template-columns: repeat(3, minmax(0, 1fr)); } .af-more .al-refine-do { grid-column: 1 / -1; justify-content: flex-end; } }
@media (max-width: 640px) { .af-more .al-refine { grid-template-columns: repeat(2, minmax(0, 1fr)); } .af-more .al-refine::before { display: none; } }
@media (prefers-reduced-motion: reduce) { .af-more .al-refine { animation: none; } }

/* The collage takes turns (alley-mosaic.js): a tile dips out and the next
   artist's piece blooms in with a gold flash, one tile at a time. */
.af-tile img { transition: transform .5s, opacity .45s ease, filter .45s ease; }
.af-tile.is-swapping img { opacity: 0; transform: scale(1.08); filter: blur(6px); }
.af-tile.is-arriving img { animation: af-tile-in .7s cubic-bezier(.2, .8, .2, 1) both; }
.al-gold .af-tile.is-arriving { box-shadow: 0 0 0 2px var(--gold), 0 0 30px rgba(232, 193, 90, .45); }
@keyframes af-tile-in { from { opacity: 0; transform: scale(.92); filter: blur(4px) brightness(1.6); } }
@media (prefers-reduced-motion: reduce) { .af-tile.is-swapping img, .af-tile.is-arriving img { animation: none; transition: none; opacity: 1; transform: none; filter: none; } }
.al-gold .al-fact.is-merch { border-color: rgba(232, 193, 90, .5); }
.al-gold .al-glow-b { background: radial-gradient(closest-side, rgba(201, 154, 46, .22), transparent 70%); }

/* ---- The hero search, live (alley-search.js): suggestions drop down under
   the box the way the site search does — artists with their faces, the
   commissions, matching categories, then "See all" to search the lot. ---- */
.af-search { position: relative; z-index: 12; }
.af-search-x { flex: none; display: grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .08); color: var(--tx2); font-size: .8rem; cursor: pointer; transition: background .2s, color .2s, transform .2s; }
.af-search-x[hidden] { display: none; }
.af-search-x:hover { background: var(--gold-soft, rgba(232, 193, 90, .16)); color: var(--gold, var(--ylw)); transform: rotate(90deg); }
.af-search-spin { flex: none; width: 16px; height: 16px; border-radius: 50%; border: 2px solid rgba(232, 193, 90, .25); border-top-color: var(--gold, var(--ylw)); opacity: 0; transition: opacity .2s; }
.af-search.is-busy .af-search-spin { opacity: 1; animation: af-spin .7s linear infinite; }
@keyframes af-spin { to { transform: rotate(360deg); } }
.af-search input[type=search]::-webkit-search-cancel-button { display: none; }
.al-gold .af-search.is-open .af-search-box { border-color: var(--gold); box-shadow: 0 0 0 4px var(--gold-soft), 0 0 30px rgba(232, 193, 90, .18); }

.af-sugg { position: absolute; top: calc(100% + 8px); left: 0; right: 0; max-height: min(460px, 62vh); overflow-y: auto; overscroll-behavior: contain; padding: 8px; border: 1px solid rgba(232, 193, 90, .45); border-radius: 16px; background: linear-gradient(180deg, #17140d, #0d0c09); box-shadow: 0 26px 60px rgba(0, 0, 0, .7), 0 0 30px rgba(232, 193, 90, .12); color: var(--tx); text-align: left; animation: af-drop .22s cubic-bezier(.2, .8, .2, 1) both; scrollbar-width: thin; scrollbar-color: rgba(232, 193, 90, .4) transparent; }
.af-sugg[hidden] { display: none; }
.af-sugg-h { margin: 8px 10px 4px; font-size: .64rem; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; color: var(--gold, var(--ylw)); }
.af-sugg-h:first-child { margin-top: 4px; }
.af-sugg-row { display: grid; grid-template-columns: 40px 1fr auto; align-items: center; gap: 12px; padding: 8px 10px; border-radius: 12px; color: var(--tx); text-decoration: none; transition: background .15s, transform .15s; }
.af-sugg-row:hover, .af-sugg-row.is-at { background: rgba(232, 193, 90, .1); transform: translateX(3px); }
.af-sugg-row.is-at { box-shadow: inset 0 0 0 1px rgba(232, 193, 90, .45); }
.af-sugg-face { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; overflow: hidden; border: 2px solid rgba(232, 193, 90, .5); background: #1d1810; color: var(--gold-hi, #FFF1B8); font-family: var(--head); font-size: .95rem; }
.af-sugg-face img { width: 100%; height: 100%; object-fit: cover; }
.af-sugg-ico { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; background: rgba(232, 193, 90, .12); color: var(--gold, var(--ylw)); }
.af-sugg-t { display: grid; min-width: 0; }
.af-sugg-t b { font-size: .95rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.af-sugg-t small { color: var(--tx3); font-size: .78rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.af-sugg mark { background: none; color: var(--gold-hi, #FFF1B8); text-decoration: underline; text-decoration-color: rgba(232, 193, 90, .6); text-underline-offset: 3px; }
.af-sugg-side { display: grid; justify-items: end; gap: 2px; white-space: nowrap; }
.af-sugg-side i { font-style: normal; font-size: .66rem; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; }
.af-sugg-side i.is-open { color: var(--grn); }
.af-sugg-side i.is-wait { color: var(--gold, var(--ylw)); }
.af-sugg-side small { color: var(--tx3); font-size: .74rem; }
.af-sugg-side b { font-family: var(--head); font-weight: 400; font-size: 1.1rem; color: var(--gold, var(--ylw)); }
.af-sugg-cats { display: flex; flex-wrap: wrap; gap: 6px; padding: 2px 10px 6px; }
.af-sugg-cat { padding: 6px 12px; border: 1px solid var(--line2); border-radius: 99px; color: var(--tx2); font-size: .82rem; font-weight: 700; text-decoration: none; transition: border-color .15s, color .15s; }
.af-sugg-cat:hover, .af-sugg-cat.is-at { border-color: var(--gold); color: var(--gold-hi, #FFF1B8); }
.af-sugg-all { display: flex; justify-content: center; gap: 8px; width: 100%; margin-top: 6px; padding: 12px; border: 0; border-top: 1px solid rgba(232, 193, 90, .2); border-radius: 0 0 10px 10px; background: none; color: var(--gold, var(--ylw)); font: inherit; font-weight: 800; cursor: pointer; transition: background .15s; }
.af-sugg-all:hover, .af-sugg-all.is-at { background: rgba(232, 193, 90, .1); }
.af-sugg-all span { display: inline-block; animation: af-bob 1.4s ease-in-out infinite; }
@keyframes af-bob { 50% { transform: translateY(3px); } }
.af-sugg-none { margin: 0; padding: 14px 12px; color: var(--tx2); font-size: .9rem; line-height: 1.5; }
.af-sugg-none a { color: var(--gold, var(--ylw)); font-weight: 800; }
@media (max-width: 560px) {
  .af-sugg { max-height: 56vh; }
  .af-sugg-row { grid-template-columns: 36px 1fr auto; gap: 10px; }
  .af-sugg-face, .af-sugg-ico { width: 36px; height: 36px; }
  .af-sugg-side small { display: none; }
}
@media (prefers-reduced-motion: reduce) { .af-sugg, .af-sugg-all span, .af-search.is-busy .af-search-spin { animation: none; } .af-sugg-row:hover, .af-sugg-row.is-at { transform: none; } }
/* The open list sits above everything after the hero (the trust strip, the rows). */
.af-hero:has(.af-search.is-open) { z-index: 40; }
@media (max-width: 560px) {
  /* On a phone the status is a coloured dot, so the line under the name has room. */
  .af-sugg-row.is-artist .af-sugg-side i { font-size: 0; width: 10px; height: 10px; border-radius: 50%; background: currentColor; box-shadow: 0 0 8px currentColor; }
  .af-sugg-side b { font-size: 1rem; }
}
/* Touch screens: "Swipe to browse" in place of the mouse wording. */
@media (hover: none) {
  .al-sec-head .af-drag-hint { font-size: 0; }
  .al-sec-head .af-drag-hint span { font-size: .9rem; }
  .al-sec-head .af-drag-hint::after { content: 'Swipe to browse'; font-size: .82rem; }
}

/* An optional pick-one question's way back (request-form.js). */
.rf-clear { display: inline-flex; align-items: center; gap: 4px; margin-left: 8px; padding: 2px 9px; border: 1px solid var(--line2); border-radius: 99px; background: transparent; color: var(--tx2); font: inherit; font-size: .64rem; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; cursor: pointer; vertical-align: 1px; transition: border-color .15s, color .15s; animation: af-drop .2s ease both; }
.rf-clear[hidden] { display: none; }
.rf-clear:hover, .rf-clear:focus-visible { border-color: var(--acc); color: var(--acc); }
@media (prefers-reduced-motion: reduce) { .rf-clear { animation: none; } }

/* ---------------- The Alley lightbox (alley-lightbox.js) ----------------
   Full screen and dark, the picture as big as fits, a strip that slides
   between pictures, the caption under it and thumbnails along the bottom.
   Gold controls to match the Alley; the same on every Alley page. */
html.lbx-open { overflow: hidden; }
.lbx { --lbx-dim: 1; position: fixed; inset: 0; z-index: 2147483000; width: 100vw; height: 100dvh; margin: 0; padding: 0; border: 0; background: rgba(6, 5, 3, calc(.97 * var(--lbx-dim))); color: #F0ECE0; overflow: hidden; display: grid; grid-template-rows: auto minmax(0, 1fr) auto auto; text-align: left; }
.lbx[hidden] { display: none; }
.lbx.is-in { animation: lbx-in .28s ease both; }
@keyframes lbx-in { from { opacity: 0; } }
.lbx-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px 6px; }
.lbx-count { font-size: .8rem; font-weight: 900; letter-spacing: .14em; color: rgba(240, 236, 224, .7); }
.lbx-x { display: grid; place-items: center; width: 46px; height: 46px; padding: 0; border: 1px solid rgba(232, 193, 90, .45); border-radius: 50%; background: rgba(20, 17, 10, .8); color: #FFF1B8; font-size: 1.1rem; cursor: pointer; transition: transform .2s, background .2s, border-color .2s; }
.lbx-x:hover, .lbx-x:focus-visible { transform: rotate(90deg); background: rgba(232, 193, 90, .18); border-color: #E8C15A; outline: none; }

.lbx-stage { position: relative; overflow: hidden; touch-action: pan-y pinch-zoom; user-select: none; -webkit-user-select: none; }
.lbx-track { display: flex; height: 100%; transition: transform .5s cubic-bezier(.22, .9, .25, 1); will-change: transform; }
.lbx-slide { position: relative; flex: 0 0 100%; height: 100%; margin: 0; padding: 8px clamp(12px, 6vw, 96px); box-sizing: border-box; transition: transform .3s ease, opacity .5s ease; opacity: .35; }
.lbx-slide.is-here { opacity: 1; }
.lbx-frame { position: relative; width: 100%; height: 100%; transform-origin: var(--zx, 50%) var(--zy, 50%); transition: transform .35s cubic-bezier(.2, .8, .2, 1); cursor: zoom-in; }
.lbx-slide.is-zoomed .lbx-frame { transform: scale(2.2); cursor: zoom-out; transition: transform .35s cubic-bezier(.2, .8, .2, 1), transform-origin .08s linear; }
.lbx-lo, .lbx-hi { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; -webkit-user-drag: none; }
.lbx-lo { filter: blur(6px) saturate(1.05); transform: scale(.995); transition: opacity .45s ease .1s; }
.lbx-hi { opacity: 0; transition: opacity .45s ease; filter: drop-shadow(0 20px 50px rgba(0, 0, 0, .6)); }
.lbx-slide.is-loaded .lbx-hi { opacity: 1; }
.lbx-slide.is-loaded .lbx-lo { opacity: 0; }
.lbx-slide:not(.is-loaded) .lbx-frame::after { content: ''; position: absolute; left: 50%; top: 50%; width: 34px; height: 34px; margin: -17px; border-radius: 50%; border: 3px solid rgba(232, 193, 90, .25); border-top-color: #E8C15A; animation: af-spin .8s linear infinite; }
.lbx-play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: inline-flex; align-items: center; gap: 10px; padding: 14px 24px; border-radius: 99px; background: linear-gradient(115deg, #8C6418 0%, #E8C15A 22%, #FFF1B8 38%, #D6A73E 52%, #9C7019 70%, #F2D27A 88%, #B8862A 100%); color: #1a1204; font-weight: 900; text-decoration: none; box-shadow: 0 10px 30px rgba(0, 0, 0, .5); }

.lbx-nav { position: absolute; top: 50%; z-index: 2; display: grid; place-items: center; width: 56px; height: 56px; margin-top: -28px; padding: 0; border: 1px solid rgba(232, 193, 90, .45); border-radius: 50%; background: rgba(20, 17, 10, .72); color: #FFF1B8; cursor: pointer; backdrop-filter: blur(6px); transition: transform .2s, background .2s, opacity .2s, border-color .2s; }
.lbx-nav.is-prev { left: 18px; }
.lbx-nav.is-next { right: 18px; }
.lbx-nav:hover:not(:disabled), .lbx-nav:focus-visible { background: rgba(232, 193, 90, .2); border-color: #E8C15A; transform: scale(1.08); outline: none; }
.lbx-nav.is-prev:hover:not(:disabled) svg { transform: translateX(-2px); }
.lbx-nav.is-next:hover:not(:disabled) svg { transform: translateX(2px); }
.lbx-nav svg { transition: transform .2s; }
.lbx-nav:disabled { opacity: 0; pointer-events: none; }
.lbx.is-single .lbx-nav, .lbx.is-single .lbx-thumbs { display: none; }

.lbx-cap { max-width: 760px; width: calc(100% - 32px); margin: 4px auto 0; text-align: center; }
.lbx-cap[hidden] { display: none; }
.lbx-title { margin: 0; font-weight: 800; font-size: 1rem; }
.lbx-labels { display: inline-flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 6px; }
.lbx-desc { margin: 6px 0 0; color: rgba(240, 236, 224, .78); font-size: .9rem; line-height: 1.5; max-height: 4.5em; overflow: auto; }
.lbx-meta { margin: 4px 0 0; color: rgba(240, 236, 224, .55); font-size: .78rem; }
.lbx-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; margin: 8px 0 0; }
.lbx-link { color: #E8C15A; font-weight: 800; font-size: .88rem; text-decoration: none; }
.lbx-link:hover { color: #FFF1B8; }

.lbx-thumbs { display: flex; justify-content: safe center; gap: 8px; padding: 12px 18px max(14px, env(safe-area-inset-bottom)); overflow-x: auto; scrollbar-width: none; }
.lbx-thumbs::-webkit-scrollbar { display: none; }
.lbx-thumb { flex: none; width: 64px; height: 64px; padding: 0; border: 2px solid transparent; border-radius: 10px; overflow: hidden; background: #1a160e; opacity: .5; cursor: pointer; transition: opacity .2s, border-color .2s, transform .2s; }
.lbx-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.lbx-thumb:hover { opacity: .85; }
.lbx-thumb.is-on { opacity: 1; border-color: #E8C15A; transform: translateY(-3px); box-shadow: 0 0 16px rgba(232, 193, 90, .4); }
@media (hover: none) { .lbx-nav { display: none; } .lbx-frame { cursor: default; } }
@media (max-width: 640px) {
  .lbx-slide { padding: 4px 6px; }
  .lbx-thumb { width: 52px; height: 52px; }
  .lbx-x { width: 42px; height: 42px; }
}
@media (prefers-reduced-motion: reduce) {
  .lbx.is-in, .lbx-track, .lbx-slide, .lbx-frame, .lbx-hi, .lbx-lo { animation: none; transition: none; }
}

/* A service's examples in its quick view: a strip that slides — swipe it,
   or ‹ › — each tap opening the lightbox. */
.qs-gal { position: relative; margin: 6px 0 14px; }
.qs-rail { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; overscroll-behavior-x: contain; border: 1px solid rgba(232, 193, 90, .25); border-radius: 14px; background: #000; scrollbar-width: none; }
.qs-rail::-webkit-scrollbar { display: none; }
.qs-rail:focus-visible { outline: 2px solid var(--gold, #E8C15A); outline-offset: 2px; }
.qs-slide { position: relative; flex: 0 0 100%; scroll-snap-align: center; scroll-snap-stop: always; display: grid; place-items: center; aspect-ratio: 16 / 11; max-height: 52vh; cursor: zoom-in; overflow: hidden; }
.qs-slide img { width: 100%; height: 100%; object-fit: contain; transition: transform .5s cubic-bezier(.2, .8, .2, 1); }
.qs-slide:hover img { transform: scale(1.03); }
.qs-zoom { position: absolute; right: 10px; bottom: 10px; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: rgba(10, 9, 6, .72); color: var(--gold-hi, #FFF1B8); opacity: 0; transform: scale(.85); transition: opacity .2s, transform .2s; }
.qs-slide:hover .qs-zoom, .qs-slide:focus-visible .qs-zoom { opacity: 1; transform: none; }
.qs-play { position: absolute; display: grid; place-items: center; width: 60px; height: 60px; border-radius: 50%; background: var(--gold-metal, #E8C15A); color: #1a1204; font-size: 1.3rem; box-shadow: 0 8px 24px rgba(0, 0, 0, .5); }
.qs-step { position: absolute; top: calc(50% - 30px); display: grid; place-items: center; width: 42px; height: 42px; padding: 0; border: 1px solid rgba(232, 193, 90, .45); border-radius: 50%; background: rgba(10, 9, 6, .75); color: var(--gold-hi, #FFF1B8); font-size: 1.5rem; line-height: 1; cursor: pointer; backdrop-filter: blur(4px); transition: opacity .2s, transform .2s, background .2s; }
.qs-step.is-prev { left: 10px; }
.qs-step.is-next { right: 10px; }
.qs-step:hover:not(:disabled) { background: rgba(232, 193, 90, .2); transform: scale(1.08); }
.qs-step:disabled { opacity: 0; pointer-events: none; }
.qs-under { display: flex; justify-content: space-between; gap: 12px; margin: 8px 2px 0; color: var(--tx3); font-size: .82rem; }
.qs-under b { color: var(--gold, var(--ylw)); font-weight: 800; letter-spacing: .06em; white-space: nowrap; }
@media (hover: none) { .qs-step { display: none; } .qs-zoom { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .qs-rail { scroll-behavior: auto; } .qs-slide img { transition: none; } }
/* Portfolio previews are links to the lightbox now. */
a.qv-piece { display: block; }

/* How it works leads on a computer (above the open commissions, no heading)
   and closes the page on a phone. Room above for the numbers that leap. */
.af-how-sec.is-end { display: none; }
.al-gold .af-how-sec.is-top { margin-top: 96px; }
.al-gold .af-how-sec.is-top .af-how { margin-top: 0; }
@media (max-width: 960px) {
  .af-how-sec.is-top { display: none; }
  .af-how-sec.is-end { display: block; }
  .al-gold .af-how-sec.is-end { margin-top: 110px; }
}

/* The artist's bar and the smart bar (partials/nav.php, site.js): on a
   computer it stays in the page and the header takes its tabs over once it
   scrolls up, so nothing stacks; on a phone it sticks, joined under the
   header as one glass strip. */
@media (min-width: 1041px) {
  .al-bar { position: relative; top: auto; }
}
@media (max-width: 1040px) {
  .al-bar { top: calc(var(--nav-h, 76px) - 1px); margin-inline: -32px; padding-inline: 28px 22px; border-width: 0 0 1px; border-color: rgba(255, 255, 255, .08); background: rgba(12, 11, 9, .72); -webkit-backdrop-filter: blur(18px) saturate(160%); backdrop-filter: blur(18px) saturate(160%); box-shadow: 0 14px 30px rgba(0, 0, 0, .35); }
  .perf-lite .al-bar { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(10, 10, 10, .94); }
}
@media (max-width: 768px) {
  .al-bar { margin-inline: -20px; padding-inline: 16px 10px; }
}

/* A service card's example strip: hover a picture and it pops up big —
   quick, with a little spring — over its neighbours, which dim. The end
   pictures grow inward so they stay inside the card. Pointer devices only;
   a tap still just opens the service. */
@media (hover: hover) and (pointer: fine) {
  .sv-strip { position: relative; z-index: 2; }
  .sv-tile { transform-origin: 50% 50%; transition: transform .18s cubic-bezier(.2, 1.5, .4, 1), box-shadow .18s ease, border-color .18s ease, filter .18s ease; will-change: transform; }
  .sv-tile:nth-child(6n+1) { transform-origin: 0% 50%; }
  .sv-tile:nth-child(6n) { transform-origin: 100% 50%; }
  .sv-tile:hover, .sv-tile:focus-visible { z-index: 3; transform: scale(1.22); border-color: #E8C15A; border-radius: 6px; box-shadow: 0 14px 34px rgba(0, 0, 0, .65), 0 0 0 2px rgba(255, 241, 184, .5), 0 0 26px rgba(232, 193, 90, .35); }
  .sv-strip:has(.sv-tile:hover) .sv-tile:not(:hover) { filter: brightness(.55) saturate(.8); }
}
@media (hover: hover) and (pointer: fine) and (max-width: 640px) {
  .sv-tile:nth-child(6n+1), .sv-tile:nth-child(6n) { transform-origin: 50% 50%; }
  .sv-tile:nth-child(3n+1) { transform-origin: 0% 50%; }
  .sv-tile:nth-child(3n) { transform-origin: 100% 50%; }
}
@media (prefers-reduced-motion: reduce) { .sv-tile { transition: none; } }

/* The floating preview beside a service card (alley-peek.js): flies out of
   the hovered thumbnail, settles, then drifts while you stay on it. */
.sv-peek { position: fixed; left: 0; top: 0; z-index: 90; width: clamp(380px, 40vw, 600px); pointer-events: none; }
.sv-peek-card { position: relative; padding: 8px; border: 1px solid rgba(232, 193, 90, .55); border-radius: 18px; background: rgba(14, 13, 10, .82); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: 0 30px 70px rgba(0, 0, 0, .65), 0 0 0 1px rgba(255, 241, 184, .08), 0 0 40px rgba(232, 193, 90, .22); opacity: 0; transform: scale(.2); transition: opacity .14s ease, transform .16s ease; }
.sv-peek-card img { display: block; width: 100%; height: auto; max-height: min(74vh, 720px); object-fit: contain; border-radius: 12px; background: #000; }
.sv-peek-card p { margin: 10px 8px 4px; color: #F0ECE0; font-size: .9rem; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sv-peek-play { position: absolute; left: 50%; top: calc(50% - 14px); display: none; place-items: center; width: 56px; height: 56px; margin: -28px 0 0 -28px; border-radius: 50%; background: linear-gradient(115deg, #8C6418, #E8C15A 30%, #FFF1B8 45%, #D6A73E 60%, #B8862A); color: #1a1204; font-size: 1.2rem; box-shadow: 0 8px 24px rgba(0, 0, 0, .5); }
.sv-peek.is-video .sv-peek-play { display: grid; }
.sv-peek.is-on .sv-peek-card { opacity: 1; transform: none; animation: svPeekIn .34s cubic-bezier(.2, 1.35, .35, 1) both, svPeekFloat 3.4s ease-in-out .36s infinite; }
.sv-peek.is-swap .sv-peek-card img { animation: svPeekSwap .22s ease both; }
.sv-peek.is-still .sv-peek-card { animation: none; transition: opacity .12s ease; transform: none; }
@keyframes svPeekIn { from { opacity: 0; transform: scale(.18); } 60% { opacity: 1; } }
@keyframes svPeekFloat { 0%, 100% { transform: translateY(0) rotate(0deg); } 30% { transform: translateY(-7px) rotate(-.6deg); } 70% { transform: translateY(4px) rotate(.5deg); } }
@keyframes svPeekSwap { from { opacity: .35; transform: scale(.97); } }

/* The Work grid (and the same grid on service and showcase pages): hover a
   piece and it lifts a little — a quick, springy pop with a gold edge — the
   art inside eases in a touch, and the rest dim. No side preview here; a
   click still opens the lightbox. Mouse and trackpad only. */
@media (hover: hover) and (pointer: fine) {
  .al-port .al-piece { transition: transform .2s cubic-bezier(.2, 1.4, .4, 1), border-color .2s ease, box-shadow .2s ease, filter .2s ease; }
  .al-port .al-piece img { transition: transform .45s cubic-bezier(.2, .8, .2, 1); }
  .al-port .al-piece:hover, .al-port .al-piece:focus-visible { z-index: 2; transform: translateY(-5px) scale(1.045); border-color: #E8C15A; box-shadow: 0 18px 40px rgba(0, 0, 0, .6), 0 0 0 1px rgba(255, 241, 184, .45), 0 0 30px rgba(232, 193, 90, .28); }
  .al-port .al-piece:not(.is-sensitive):hover img { transform: scale(1.05); }
  .al-port:has(.al-piece:hover) .al-piece:not(:hover) { filter: brightness(.6) saturate(.85); }
}
@media (prefers-reduced-motion: reduce) { .al-port .al-piece, .al-port .al-piece img { transition: none; } }

/* The Shop merch / Hire for art toggle on an Alley profile: gold, above the
   header (partials/two-sides, site.css). */
.al-gold .ts-sw { margin: 0 0 18px; }
.al-gold .ts-sw::before { background: var(--gold-metal); }
.al-gold .ts-sw a[aria-current="page"] { color: #1a1204; }
/* An Alley card's link to their shop sits above the card's own link. */
.af-shop-link { position: relative; z-index: 2; display: inline-block; margin-top: 10px; color: var(--tx2); font-size: .78rem; font-weight: 800; letter-spacing: .04em; text-decoration: none; transition: color .2s; }
.af-shop-link:hover, .af-shop-link:focus-visible { color: var(--gold-hi, #FFF1B8); }