/* community-board.css */
/* ---- Community board (Oct 23): one box to start a thread or reply, with emoji, GIFs and pictures;
   chat-style replies with faces and names that lead to people's pages; any emoji as a reaction. ---- */

/* The box: words on top, a slim row of tools under them. */
.cb-box {
  display: grid;
  gap: 8px;
  margin-top: 14px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--paper);
}
.cb-box:focus-within {
  border-color: var(--purple);
}
.cb-box textarea {
  width: 100%;
  min-height: 24px;
  max-height: 260px;
  padding: 4px 2px;
  border: 0;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 15px;
  line-height: 1.5;
  resize: none;
  overflow-y: auto;
}
.cb-box textarea:focus,
.cb-start-title:focus {
  outline: none;
}
.cb-tools {
  position: relative;
  display: flex;
  align-items: center;
  gap: 4px;
}
.cb-gap {
  flex: 1;
}
.cb-tool,
.cb-emoji > summary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  height: 32px;
  padding: 0 8px;
  border: 0;
  border-radius: 8px;
  background: none;
  color: var(--muted);
  font: inherit;
  font-size: 12px;
  font-weight: 750;
  letter-spacing: 0.02em;
  cursor: pointer;
}
.cb-emoji > summary {
  font-size: 19px;
  font-weight: 400;
}
.cb-tool:hover,
.cb-tool[aria-expanded='true'],
.cb-emoji > summary:hover,
.cb-emoji[open] > summary {
  background: var(--soft);
  color: var(--ink);
}
.cb-tool svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linejoin: round;
}
/* The emoji picker opens under the box, so it never runs off the top of the page. */
.cb-emoji .emoji-tray-pick {
  top: calc(100% + 4px);
  bottom: auto;
}
.cb-gif-panel {
  margin: 0;
}

/* What's attached before sending: a GIF or pictures as small tiles with a remove button. */
.cb-attached {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.cb-thumb {
  position: relative;
  width: 76px;
  height: 76px;
  border-radius: 8px;
  overflow: hidden;
  background: var(--line);
}
.cb-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.cb-thumb button {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 22px;
  height: 22px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #141615cc;
  color: #fff;
  font-size: 11px;
  cursor: pointer;
}
.cb-thumb.is-busy img {
  opacity: 0.5;
}
.cb-thumb i {
  position: absolute;
  inset: auto 0 6px;
  color: #fff;
  font-size: 10px;
  font-style: normal;
  font-weight: 700;
  text-align: center;
  text-shadow: 0 1px 2px #000;
}

/* Start a thread: a title line that opens into the full box. */
.cb-start {
  margin: 0 0 14px;
  padding: 12px 14px;
}
.cb-start-title {
  width: 100%;
  padding: 4px 2px;
  border: 0;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 16px;
  font-weight: 650;
}
.cb-start.is-closed {
  cursor: text;
}
.cb-start:not(.is-closed) .cb-start-title {
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line);
  font-size: 18px;
}
.cb-kinds {
  margin: 2px 0 0;
}
.cb-kinds .chip {
  font-size: 12px;
}
a.cb-signin {
  display: block;
  border: 1px dashed var(--line);
  border-radius: 12px;
  color: var(--muted);
  font-weight: 650;
  text-decoration: none;
}
a.cb-signin:hover {
  border-color: var(--purple);
  color: var(--ink);
}

/* Show one kind of thread. */
.cb-filter {
  flex-wrap: nowrap;
  overflow-x: auto;
  margin: 0 0 4px;
  padding-bottom: 4px;
  scrollbar-width: none;
}
.cb-filter .chip {
  flex: 0 0 auto;
  font-size: 12px;
}

/* Thread rows: a picture on the right when the thread has one. */
.thread-card.has-pic {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}
.cb-card-text {
  flex: 1;
  min-width: 0;
}
.cb-card-pic {
  flex: 0 0 auto;
  width: 72px;
  height: 72px;
  border-radius: 10px;
  object-fit: cover;
  background: var(--line);
}

/* The open thread: who started it, then the talk. */
.cb-op {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
}
.cb-op .thread-meta {
  margin: 0;
}
.cb-op-body p {
  margin: 0 0 10px;
  overflow-wrap: anywhere;
}
.cb-count {
  margin: 18px 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 12px;
  font-weight: 650;
}
.thread-open .thread-replies {
  margin-top: 8px;
}

/* Replies read like a chat: a face, a name that leads to their page, the words. */
.news-reply.cb-msg {
  display: flex;
  gap: 10px;
  padding: 10px 12px;
}
.news-reply.cb-msg.gone {
  display: block;
}
.cb-msg-main {
  flex: 1;
  min-width: 0;
}
.cb-msg .news-reply-head small {
  margin-left: auto;
}
.cb-avatar {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--soft);
  color: var(--ink);
  font-size: 14px;
  font-weight: 750;
  text-decoration: none;
}
.cb-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.cb-name {
  color: var(--ink);
  font-weight: 700;
  text-decoration: none;
}
a.cb-name:hover {
  text-decoration: underline;
}
.cb-msg .message-gif {
  max-width: min(240px, 100%);
}
.cb-msg .news-reply-tools {
  gap: 10px;
  margin-top: 6px;
}
.cb-msg .news-reply-tools .text-button {
  font-size: 12px;
  color: var(--muted);
}
@media (hover: hover) {
  .cb-msg .news-reply-tools .text-button {
    opacity: 0;
    transition: opacity 0.15s;
  }
  .cb-msg:hover .news-reply-tools .text-button,
  .cb-msg:focus-within .news-reply-tools .text-button {
    opacity: 1;
  }
}
.cb-reacts {
  margin-top: 0;
}
.cb-reacts .reaction-pick {
  left: 0;
}
.news-tools .cb-reacts .reaction-add > summary,
.cb-msg .reaction-add > summary {
  opacity: 1;
}

/* Pictures in a post or reply: one big, or a tidy grid of two to four. */
.cb-pics {
  display: grid;
  gap: 6px;
  margin-top: 8px;
  max-width: 420px;
}
.cb-pics.n-2,
.cb-pics.n-4 {
  grid-template-columns: 1fr 1fr;
}
.cb-pics.n-3 {
  grid-template-columns: 2fr 1fr;
}
.cb-pics.n-3 a:first-child {
  grid-row: span 2;
}
.cb-pics a {
  display: block;
  border-radius: 10px;
  overflow: hidden;
  background: var(--line);
}
.cb-pics img {
  display: block;
  width: 100%;
  height: 100%;
  max-height: 420px;
  object-fit: cover;
}
.cb-pics:not(.n-1) img {
  aspect-ratio: 1;
}

@media (max-width: 600px) {
  .cb-avatar {
    width: 30px;
    height: 30px;
    font-size: 13px;
  }
  .news-reply.cb-msg {
    padding: 10px;
  }
  .cb-card-pic {
    width: 56px;
    height: 56px;
  }
}

/* Two tabs across the top of Community (Oct 23), Discussions first. Replaces the side rail. */
.cb-layout {
  max-width: 760px;
  margin: 0 auto;
}
/* Keep the board inside the screen: the grid track, the column and long snippets
   could all size to content and push the page to 463px (Safari phone pass, Oct 31). */
#announcements-view .announcements {
  grid-template-columns: minmax(0, 1fr);
}
.cb-layout {
  width: 100%;
}
.thread-snippet {
  overflow-wrap: anywhere;
}
.cb-tabs {
  position: sticky;
  top: 0;
  z-index: 4;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0 0 18px;
  border-bottom: 1px solid var(--line);
  background: var(--bg);
}
/* Find a team makes it three (Bryan's pick, Nov 10). */
.cb-tabs.has-team {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.cb-tab {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 10px 12px;
  border-bottom: 3px solid transparent;
  margin-bottom: -1px;
  color: var(--muted);
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
}
.cb-tab:hover {
  color: var(--ink);
  text-decoration: none;
}
.cb-tab[aria-current='page'] {
  border-bottom-color: var(--ink);
  color: var(--ink);
}
.cb-tab svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linejoin: round;
  stroke-linecap: round;
}
.cb-tab-count {
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--purple);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
}
[data-theme='dark'] .cb-tab-count {
  color: #141615;
}
.cb-tab:focus-visible {
  outline: 2px solid var(--purple);
  outline-offset: -2px;
}

/* Desktop gets a wider, roomier board (Bryan, Oct 23: "its so slim"). Phones keep the layout above. */
@media (min-width: 900px) {
  #announcements-view .announcements {
    max-width: 1120px;
  }
  .cb-layout {
    width: 100%;
    max-width: none;
  }
  .cb-tab {
    min-height: 56px;
    font-size: 17px;
  }
  .cb-start {
    padding: 16px 20px;
  }
  .cb-start-title {
    font-size: 18px;
  }
  .cb-start:not(.is-closed) .cb-start-title {
    font-size: 21px;
  }
  .cb-box textarea {
    font-size: 16px;
  }
  .thread-list {
    gap: 12px;
  }
  .thread-card {
    padding: 20px 24px;
  }
  .thread-card h3 {
    font-size: 21px;
    margin: 10px 0 6px;
  }
  .thread-snippet {
    font-size: 15px;
  }
  .thread-meta {
    font-size: 13px;
  }
  .cb-card-pic {
    width: 112px;
    height: 112px;
    border-radius: 12px;
  }
  .thread-open {
    padding: 32px 36px;
  }
  .thread-open h2 {
    font-size: 34px;
  }
  .cb-op-body {
    font-size: 17px;
  }
  .cb-pics {
    max-width: 680px;
  }
  .news-reply.cb-msg {
    gap: 14px;
    padding: 14px 18px;
  }
  .cb-msg p {
    font-size: 16px;
  }
  .cb-avatar {
    width: 42px;
    height: 42px;
    font-size: 16px;
  }
  .cb-msg .message-gif {
    max-width: 320px;
  }
}
/* The tall first picture of three fills its whole cell. */
.cb-pics.n-3 a:first-child img {
  aspect-ratio: auto;
  height: 100%;
  max-height: none;
}
/* A clear "New thread" button next to the title line (Bryan, Oct 23: the type bar alone wasn't obvious). */
.cb-start-row {
  display: flex;
  align-items: center;
  gap: 12px;
}
.cb-start-row .cb-start-title {
  flex: 1;
  min-width: 0;
}
.cb-new {
  gap: 6px;
  flex: 0 0 auto;
  white-space: nowrap;
}
.cb-new span {
  font-size: 1.2em;
  line-height: 1;
}

/* Small phones (320px): the two tabs fit side by side instead of pushing the page sideways. */
@media (max-width: 380px) {
  .cb-tab {
    gap: 6px;
    padding: 10px 4px;
    font-size: 14px;
  }
  .cb-tab svg {
    width: 18px;
    height: 18px;
  }
  .cb-tab-count {
    padding: 2px 6px;
  }
}

/* Phones (Safari phone pass, Oct 31): the count stays on one line beside the label, and the tabs sit
   under the header when it slides back in, like the editor's step pills. */
@media (max-width: 760px) {
  .cb-tab svg {
    display: none;
  }
  .cb-tab-count {
    white-space: nowrap;
  }
  /* Three tabs fit a phone: a little tighter, and the count drops under the label if it must. */
  .cb-tabs.has-team .cb-tab {
    flex-wrap: wrap;
    gap: 2px 6px;
    padding: 8px 4px;
    font-size: 14px;
    text-align: center;
  }
  /* Under the header, which runs up under an iPhone's clock, or under the page-colour strip over the
     clock while it's away (Bryan's iPhone screenshots, Oct 31). */
  body:not(.header-away) .cb-tabs {
    top: calc(85px + env(safe-area-inset-top));
  }
  .cb-tabs {
    top: max(12px, env(safe-area-inset-top));
    transition: top 0.22s ease;
  }
}

/* Feedback tags on replies (Oct 24): Bug / Idea / Comment, the same notched ticket as the thread kinds. */
.reply-tag,
.reply-fixed {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
  clip-path: polygon(0 0, calc(100% - 4px) 0, 100% 4px, 100% calc(100% - 4px), calc(100% - 4px) 100%, 4px 100%, 0 calc(100% - 4px), 0 4px);
}
.tag-bug.reply-tag {
  background: #fde4e1;
  color: #9b2a1c;
}
.tag-idea.reply-tag {
  background: #fbf0cd;
  color: #7a5400;
}
.tag-comment.reply-tag {
  background: #e4eefb;
  color: #24508f;
}
.reply-fixed {
  background: #e3f3e6;
  color: #1f5f2e;
}
[data-theme='dark'] .tag-bug.reply-tag {
  background: #4a1f1a;
  color: #f4b3a9;
}
[data-theme='dark'] .tag-idea.reply-tag {
  background: #47390f;
  color: #f1d27a;
}
[data-theme='dark'] .tag-comment.reply-tag {
  background: #1b2f4a;
  color: #a9c8f2;
}
[data-theme='dark'] .reply-fixed {
  background: #1f3a26;
  color: #a8e2b5;
}
/* The three chips over the reply box; none is picked until you tap one. */
.cb-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 8px;
}
.cb-tag,
.cb-tag-filter button {
  min-height: 32px;
  padding: 4px 12px;
  border: 1px solid var(--line);
  border-radius: 0;
  background: var(--bg);
  color: var(--muted);
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}
.cb-tag:hover,
.cb-tag-filter button:hover {
  color: var(--ink);
}
.cb-tag[aria-pressed='true'],
.cb-tag-filter button[aria-pressed='true'] {
  border-color: var(--ink);
  background: var(--ink);
  color: var(--bg);
}
.cb-tag:focus-visible,
.cb-tag-filter button:focus-visible {
  outline: 2px solid var(--purple);
  outline-offset: 2px;
}
.cb-tag-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 12px;
}
.cb-tag-filter small {
  font-size: 11px;
  font-weight: 600;
  opacity: 0.8;
}
/* Playtest swap feedback threads (Oct 24). */
.thread-topic.topic-playtest {
  background: #dff1f1;
  color: #145a5a;
}
[data-theme='dark'] .thread-topic.topic-playtest {
  background: #163a3a;
  color: #9fdede;
}
.cb-playtest-link {
  margin: 0 0 8px;
  font-size: 14px;
}

/* ---- Discussions as forum rows (Bryan picked "A. Forum rows", Nov 10). One row per thread: the
   starter's face, the title, its kind and the last reply, then who joined in and how many replies.
   On a wide screen the list stays beside the open thread; on a phone the reply box stays on screen. ---- */
.thread-rows {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--paper);
  overflow: hidden;
}
.thread-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-top: 1px solid var(--line);
  color: var(--ink);
  text-decoration: none;
}
.thread-row:first-child {
  border-top: 0;
}
.thread-row:hover {
  background: var(--soft);
  text-decoration: none;
}
.thread-row:focus-visible {
  outline: 2px solid var(--purple);
  outline-offset: -2px;
}
.thread-row[aria-current='page'] {
  background: var(--soft);
  box-shadow: inset 3px 0 0 var(--purple);
}
.cb-face {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--soft);
  color: var(--ink);
  font-size: 14px;
  font-weight: 750;
}
.thread-row:hover .cb-face:not(.s),
.thread-row[aria-current='page'] .cb-face:not(.s) {
  background: var(--paper);
}
.cb-face img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.cb-face.s {
  width: 22px;
  height: 22px;
  margin-left: -6px;
  border: 2px solid var(--paper);
  font-size: 10px;
}
.cb-face.s:first-child {
  margin-left: 0;
}
.tr-main {
  flex: 1;
  display: grid;
  gap: 3px;
  min-width: 0;
}
.tr-title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.3;
  overflow-wrap: anywhere;
}
.tr-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px 8px;
  color: var(--muted);
  font-size: 12px;
}
.tr-kind {
  color: var(--purple);
  font-weight: 700;
}
.tr-pin {
  color: var(--ink);
  font-weight: 700;
}
.tr-pic {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border-radius: 8px;
  object-fit: cover;
  background: var(--line);
}
.tr-side {
  flex: 0 0 auto;
  display: grid;
  justify-items: end;
  gap: 4px;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}
.tr-faces {
  display: flex;
}
.tr-count {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--muted);
}
.tr-count svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linejoin: round;
}
.tr-none {
  color: var(--green);
  font-size: 11px;
}
.tr-fresh {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--purple);
}
.tr-fresh i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--purple);
}
.cb-none {
  margin: 8px 0;
  color: var(--muted);
  font-size: 14px;
}
/* The Feedback kind wears the Comment tag's colours. */
.thread-topic.topic-feedback {
  background: #e4eefb;
  color: #24508f;
}
[data-theme='dark'] .thread-topic.topic-feedback {
  background: #1b2f4a;
  color: #a9c8f2;
}

/* A long first post folds to a few lines, so the replies are in reach. */
.cb-op-body.is-folded {
  max-height: 12em;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(#000 65%, transparent);
  mask-image: linear-gradient(#000 65%, transparent);
}
.cb-unfold {
  margin: 2px 0 6px;
  font-weight: 700;
}
/* The line above replies that came in since you last looked. */
.news-replies > .cb-new-line {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 4px 0;
  color: var(--purple);
  font-size: 11px;
  font-weight: 700;
}
.cb-new-line::before,
.cb-new-line::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--purple);
}

/* Reply to a reply: the line you're answering, in the box while you type and over the reply after. */
.cb-quote {
  margin: 6px 0 0;
  padding: 2px 10px;
  border-left: 3px solid var(--line);
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}
.cb-quote b,
.cb-quoting b {
  margin-right: 4px;
  color: var(--ink);
  font-weight: 700;
}
.cb-quoting {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 4px 4px 10px;
  border-left: 3px solid var(--purple);
  background: var(--soft);
  color: var(--muted);
  font-size: 13px;
}
.cb-quoting span {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cb-quoting button {
  flex: 0 0 auto;
  min-width: 32px;
  min-height: 32px;
  border: 0;
  background: none;
  color: var(--muted);
  font: inherit;
  cursor: pointer;
}
.cb-quoting button:hover {
  color: var(--ink);
}
.cb-at {
  color: var(--purple);
  font-weight: 700;
}

/* Say hi (Bryan's pick, Nov 10): a new member's one-tap hello, above the start box. */
.cb-hello {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
  margin: 0 0 14px;
  padding: 14px 44px 14px 16px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--purple);
  border-radius: 12px;
  background: var(--paper);
}
.cb-hello-main {
  flex: 1 1 260px;
  min-width: 0;
}
.cb-hello-main strong {
  display: block;
  font-size: 15px;
}
.cb-hello-main p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 14px;
  overflow-wrap: anywhere;
}
.cb-hello-acts {
  display: flex;
  align-items: center;
  gap: 14px;
}
.cb-hello-x {
  position: absolute;
  top: 6px;
  right: 6px;
  min-width: 32px;
  min-height: 32px;
  border: 0;
  background: none;
  color: var(--muted);
  font: inherit;
  cursor: pointer;
}
.cb-hello-x:hover {
  color: var(--ink);
}
.thread-topic.topic-hello {
  background: #e3f3e6;
  color: #1f5f2e;
}
[data-theme='dark'] .thread-topic.topic-hello {
  background: #1f3a26;
  color: #a8e2b5;
}

/* Wide screens: the list on the left, the open thread on the right. */
.cb-split-list {
  display: none;
}
/* Opening a thread scrolls here; the sticky tabs stay clear of its top. */
.cb-split-main,
#announcements-content .news-post {
  scroll-margin-top: 76px;
}
@media (max-width: 760px) {
  .cb-split-main,
  #announcements-content .news-post {
    scroll-margin-top: calc(150px + env(safe-area-inset-top));
  }
}
@media (min-width: 1100px) {
  .cb-split {
    display: grid;
    grid-template-columns: 340px minmax(0, 1fr);
    gap: 20px;
    align-items: start;
  }
  .cb-split-list {
    position: sticky;
    top: 76px;
    display: block;
    max-height: calc(100vh - 96px);
    overflow-y: auto;
    scrollbar-width: thin;
  }
  .cb-split .thread-back {
    display: none;
  }
  .cb-split-list .thread-row {
    gap: 10px;
    padding: 10px 12px;
  }
  .cb-split-list .tr-title {
    font-size: 14px;
  }
  .cb-split-list .tr-pic,
  .cb-split-list .tr-faces {
    display: none;
  }
  .cb-split-list .cb-face:not(.s) {
    width: 30px;
    height: 30px;
    font-size: 13px;
  }
  .cb-split .thread-open {
    padding: 28px 32px;
  }
}
@media (min-width: 900px) {
  .thread-row {
    padding: 14px 18px;
  }
  .tr-title {
    font-size: 16px;
  }
  .tr-meta {
    font-size: 13px;
  }
}

/* Phones: rows a touch tighter, no thumbnail, and the reply box rides along at the bottom of the
   screen while you read (the tab bar steps aside for it, styles.css). */
@media (max-width: 600px) {
  .thread-row {
    gap: 10px;
    padding: 12px;
  }
  .tr-pic {
    display: none;
  }
}
@media (max-width: 760px) {
  .thread-open > form.cb-box {
    position: sticky;
    bottom: calc(var(--player-h, 0px) + 8px);
    z-index: 3;
  }
  html:not(.has-player) .thread-open > form.cb-box {
    bottom: calc(8px + env(safe-area-inset-bottom));
  }
  .thread-open > form.cb-box textarea {
    max-height: 140px;
  }
}

/* ---- Find a team (find-team-ui.js, Bryan's pick Nov 10): Team up any time as its own Community tab.
   One card per person: who they are, what they want to make, their hours a week, then Team up and
   Message. ---- */
.find-team {
  display: grid;
  gap: 16px;
}
.ft-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px 16px;
  flex-wrap: wrap;
}
.ft-count {
  margin: 0;
  color: var(--ink);
  font-size: 16px;
  font-weight: 600;
  text-wrap: balance;
}
.ft-status {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  color: var(--green);
  font-size: 13px;
  font-weight: 600;
}
.ft-form {
  display: grid;
  gap: 14px;
  max-width: 560px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--paper);
}
.ft-field {
  display: grid;
  gap: 6px;
  font-size: 13px;
  color: var(--muted);
}
.ft-field input {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--bg);
  color: var(--ink);
  font: inherit;
  font-size: 16px;
}
.ft-hours {
  border: 0;
  padding: 0;
  margin: 0;
  min-width: 0;
}
.ft-hours legend {
  margin-bottom: 6px;
  color: var(--muted);
  font-size: 13px;
}
.ft-hours .pick-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.ft-hour {
  position: relative;
  font-size: 13px;
}
.ft-hour input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.ft-hour:has(input:checked) {
  background: var(--purple);
  border-color: var(--purple);
  color: var(--on-ink);
}
.ft-hour:has(input:focus-visible) {
  outline: 2px solid var(--purple);
  outline-offset: 2px;
}
.ft-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
  gap: 12px;
}
.ft-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--paper);
}
.ft-top {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.ft-top .avatar,
.ft-top .jam-dev-icon {
  width: 44px;
  height: 44px;
  flex: none;
}
.ft-top .round {
  width: 34px;
  height: 34px;
  flex: none;
  font-size: 11px;
}
.ft-who {
  display: grid;
  gap: 2px;
  flex: 1;
  min-width: 0;
}
.ft-who strong {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  font-size: 15px;
}
.ft-who strong a {
  overflow: hidden;
  color: inherit;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ft-who small {
  overflow: hidden;
  color: var(--muted);
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ft-you,
.ft-new {
  flex: none;
  padding: 1px 7px;
  border-radius: 99px;
  background: var(--soft);
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
}
.ft-new {
  color: var(--green);
}
.ft-make {
  margin: 0;
  color: var(--ink);
  font-size: 14px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}
.ft-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
}
.ft-meta span {
  padding: 2px 8px;
  border: 1px solid var(--line);
  border-radius: 99px;
  color: var(--muted);
  font-size: 11px;
}
/* Team up and Message sit along the bottom of every card, lined up across a row. */
.ft-card .jam-acts {
  margin-top: auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}
.ft-card .jam-teamup,
.ft-card .jam-msg {
  min-height: 34px;
  padding: 6px 12px;
  font-size: 13px;
}
.ft-card .jam-asked {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 34px;
  padding: 0 6px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
}
.ft-card a.jam-asked:hover {
  color: var(--ink);
}
/* post-composer.css */
/* ---- Writing an announcement (Nov 6, Bryan picked "A. Write it like the post") ----
   The box looks like the finished post: the same title and lines. On a computer a dark bar sits over
   the line you tap and a + waits beside an empty line; on a phone it opens full screen with the tools
   on top of the keyboard. Polls live here too, for posts and for any Discussions thread. */

/* Links in posts read as links (they used to look like plain words). */
.news-body .ann-text a,
.news-body > p > a,
.ann-image figcaption a,
.ann-spotlight-note a {
  color: var(--purple);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.pc {
  position: relative;
}
@media (min-width: 761px) {
  /* Room on the left for the + beside an empty line. */
  .news-post.is-writing {
    padding-left: 64px;
  }
}
.pc-title {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  /* The post's own title, so writing it looks like reading it. */
  font-family: 'Bricolage Grotesque', 'DM Sans', sans-serif;
  font-size: 28px;
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.025em;
  resize: none;
  overflow: hidden;
}
.pc-title:focus,
.pc-doc:focus {
  outline: none;
}
.pc-title::placeholder {
  color: var(--muted);
  opacity: 1;
}
.pc-doc {
  min-height: 160px;
  caret-color: var(--purple);
  overflow-wrap: anywhere;
}
.pc-doc.is-empty > p:first-child::before {
  content: 'Write your post…';
  float: left;
  height: 0;
  color: var(--muted);
  pointer-events: none;
}

/* Pieces in the post (picture, poll, button, divider, spotlight), each with its own ✕. */
.pc-island {
  position: relative;
}
.pc-x,
.poll-card-x,
.poll-edit-x {
  display: inline-grid;
  place-items: center;
  flex: none;
  min-width: 30px;
  height: 30px;
  padding: 0 6px;
  border: 0;
  border-radius: 6px;
  background: none;
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
}
.pc-x:hover,
.pc-x:focus-visible,
.poll-card-x:hover,
.poll-edit-x:hover {
  background: var(--soft);
  color: var(--ink);
}
.pc-x[data-armed='1'] {
  margin-left: auto;
  color: var(--ann-red);
}
.pc-divider {
  display: flex;
  align-items: center;
  gap: 6px;
}
.pc-divider .ann-divider {
  flex: 1;
  margin: 14px 0;
}
.pc-picture > .pc-x {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 1;
  border: 1px solid var(--line);
  background: var(--paper);
}
.pc-picture img:not([src]) {
  width: 100%;
  min-height: 140px;
  background: var(--soft);
}
.pc-caption {
  display: block;
  width: 100%;
  margin-top: 6px;
  padding: 2px 0;
  border: 0;
  background: transparent;
  color: var(--muted);
  font-size: 13px;
}
.pc-caption:focus {
  outline: none;
  color: var(--ink);
}
.pc-card,
.poll-card {
  display: grid;
  gap: 8px;
  padding: 10px 14px 14px;
  border: 1.5px solid var(--ink);
  border-radius: 12px;
  background: var(--paper);
}
.pc-card-head,
.poll-card-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 4px 8px;
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
}
.pc-card input,
.pc-card textarea,
.poll-edit input {
  width: 100%;
  padding: 9px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--bg);
  color: var(--ink);
  font-size: 15px;
  line-height: 1.4;
}
.pc-card textarea {
  display: block;
  resize: none;
  overflow: hidden;
}
.pc-card input:focus,
.pc-card textarea:focus,
.poll-edit input:focus {
  outline: none;
  border-color: var(--purple);
}
.pc-card input.pc-poll-q {
  padding: 2px 0 8px;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
  font-size: 16px;
  font-weight: 700;
}
.pc-card input.pc-poll-q:focus {
  border-bottom-color: var(--purple);
}
.pc-card input.pc-button-label {
  font-weight: 600;
}
.pc-picked {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
}
.pc-spot-results {
  display: grid;
  gap: 4px;
}
.pc-spot-results:empty {
  display: none;
}
.pc-spot-results button {
  display: grid;
  gap: 2px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--paper);
  color: var(--ink);
  font-size: 14px;
  font-weight: 600;
  text-align: left;
}
.pc-spot-results button:hover {
  border-color: var(--purple);
}
.pc-spot-results small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 400;
}
.pc-poll-said {
  margin: 0;
  font-weight: 700;
}
.pc-poll-said-opts {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.pc-poll-said-opts li {
  padding: 9px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--bg);
  font-size: 15px;
}

/* A poll's options while it's being written (the composer and the New thread box). */
.poll-edit {
  display: grid;
  gap: 6px;
}
.poll-edit-opt {
  display: flex;
  align-items: center;
  gap: 4px;
}
.poll-edit-opt input {
  flex: 1;
}
.poll-edit-add {
  padding: 9px 10px;
  border: 1px dashed var(--line);
  border-radius: 8px;
  background: none;
  color: var(--muted);
  font-size: 15px;
  text-align: left;
}
.poll-edit-add:hover {
  border-color: var(--ink);
  color: var(--ink);
}
.poll-edit-len {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
  color: var(--muted);
  font-size: 14px;
}
.poll-edit-len select {
  width: auto;
  padding: 6px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--paper);
  color: var(--ink);
  font-size: 14px;
  font-weight: 600;
}

/* On a computer: the dark bar over the line you tapped, and the + in the margin beside an empty line. */
.pc-bar {
  position: absolute;
  z-index: 5;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 4px;
  border-radius: 8px;
  background: var(--ink);
  color: var(--on-ink);
}
.pc-bar[hidden],
.pc-plus[hidden],
.pc-pop[hidden] {
  display: none;
}
.pc-tool {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-width: 30px;
  height: 30px;
  padding: 0 8px;
  border: 0;
  border-radius: 5px;
  background: none;
  color: inherit;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
}
.pc-tool:hover,
.pc-tool[aria-pressed='true'],
.pc-tool[aria-expanded='true'] {
  background: color-mix(in srgb, var(--on-ink) 22%, transparent);
}
.pc-tool:disabled {
  opacity: 0.35;
}
.pc-tool svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.pc-sep {
  width: 1px;
  height: 18px;
  margin: 0 2px;
  background: color-mix(in srgb, var(--on-ink) 35%, transparent);
}
.pc-link-in {
  width: min(300px, 52vw);
  height: 30px;
  padding: 0 8px;
  border: 0;
  border-radius: 5px;
  background: var(--paper);
  color: var(--ink);
  font-size: 14px;
}
.pc-link-in:focus {
  outline: 2px solid var(--purple);
  outline-offset: 0;
}
.pc-plus {
  position: absolute;
  z-index: 4;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 1.5px solid var(--ink);
  border-radius: 50%;
  background: var(--paper);
  color: var(--ink);
  font-size: 19px;
  font-weight: 500;
  line-height: 1;
}
.pc-plus:hover {
  border-color: var(--purple);
  color: var(--purple);
}
.pc-plus[aria-expanded='true'] {
  transform: rotate(45deg);
}
.pc-pop {
  position: absolute;
  z-index: 6;
}
.pc-adds {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.pc-add {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 34px;
  padding: 0 11px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--bg);
  color: var(--ink);
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
}
.pc-add:hover {
  border-color: var(--ink);
}
.pc-add[aria-disabled='true'] {
  opacity: 0.45;
}
.pc-menu {
  display: grid;
  min-width: 210px;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--paper);
  box-shadow: 0 6px 18px rgb(0 0 0 / 0.08);
}
.pc-menu-row {
  display: grid;
}
.pc-menu-item {
  display: block;
  width: 100%;
  padding: 8px 10px;
  border: 0;
  border-radius: 6px;
  background: none;
  color: var(--ink);
  font-size: 15px;
  text-align: left;
}
.pc-menu-item:hover {
  background: var(--soft);
}
.pc-menu-item[aria-checked='true'] {
  color: var(--purple);
  font-weight: 700;
}
.pc-menu-item.is-h2 {
  font-size: 20px;
  font-weight: 700;
}
.pc-menu-item.is-h3 {
  font-size: 17px;
  font-weight: 700;
}
.pc-menu-item.is-quote {
  border-left: 3px solid var(--purple);
  border-radius: 0 6px 6px 0;
}
.pc-menu-item.is-bullets::before {
  content: '•\00a0\00a0';
}
.pc-menu-item.is-numbers::before {
  content: '1.\00a0\00a0';
}
.pc-menu-lab {
  margin: 8px 10px 2px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 650;
}
.pc-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 18px;
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}
.pc-foot .publish-consent {
  font-size: 14px;
}
.pc-gap {
  flex: 1;
}
.pc-topic {
  width: auto;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--paper);
  color: var(--ink);
  font-size: 14px;
}
.pc-mail {
  margin: 10px 0 0;
  color: var(--muted);
  font-size: 13px;
}

/* On a phone: full screen, Cancel and Post at the top, the tools on top of the keyboard. */
@media (max-width: 760px) {
  .pc.is-full {
    position: fixed;
    inset: 0;
    z-index: 80;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    overscroll-behavior: contain;
    background: var(--paper);
  }
  html:has(#announcements-view:not([hidden]) .pc.is-full) body {
    overflow: hidden;
  }
  html:has(#announcements-view:not([hidden]) .pc.is-full) :is(.phone-tabs, .player, .feedback-tab) {
    visibility: hidden;
  }
  .pc-top {
    position: sticky;
    top: 0;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: max(8px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) 8px max(12px, env(safe-area-inset-left));
    border-bottom: 1px solid var(--line);
    background: var(--paper);
  }
  .pc-top b {
    font-size: 15px;
  }
  .pc-top:has([data-pc-cancel][data-armed]) b {
    display: none;
  }
  .pc-top .text-button {
    color: var(--ink);
    font-size: 14px;
  }
  .pc-top .button.small {
    min-height: 36px;
    padding: 8px 16px;
    font-size: 13px;
  }
  .pc.is-full .pc-page {
    flex: 1 0 auto;
    padding: 16px max(16px, env(safe-area-inset-right)) calc(76px + env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
  }
  .pc.is-full .pc-title {
    font-size: 23px;
  }
  .pc.is-full .pc-doc {
    min-height: 36vh;
  }
  .pc.is-full .pc-foot {
    gap: 8px 16px;
  }
  .pc.is-full .pc-bar {
    position: fixed;
    left: 0;
    right: 0;
    display: flex;
    gap: 2px;
    padding: 6px max(10px, env(safe-area-inset-right)) 6px max(10px, env(safe-area-inset-left));
    border-top: 1px solid var(--line);
    border-radius: 0;
    background: var(--paper);
    color: var(--ink);
  }
  .pc.is-full .pc-bar:not(.has-keyboard) {
    padding-bottom: max(6px, env(safe-area-inset-bottom));
  }
  .pc.is-full .pc-tool {
    min-width: 42px;
    height: 40px;
    border-radius: 8px;
    font-size: 16px;
  }
  .pc.is-full .pc-tool:hover,
  .pc.is-full .pc-tool[aria-pressed='true'],
  .pc.is-full .pc-tool[aria-expanded='true'] {
    background: var(--soft);
    color: var(--purple);
  }
  .pc.is-full .pc-add-tool {
    border: 1.5px solid var(--ink);
    font-size: 20px;
    font-weight: 500;
  }
  .pc.is-full .pc-link-in {
    flex: 1;
    width: auto;
    height: 40px;
    background: var(--bg);
    font-size: 16px;
  }
  .pc.is-full .pc-pop {
    position: fixed;
    left: 0;
    right: 0;
    padding: 10px max(12px, env(safe-area-inset-right)) 10px max(12px, env(safe-area-inset-left));
    border-top: 1px solid var(--line);
    background: var(--paper);
  }
  /* The styles as a row of chips (and the heading fonts as a second row), each the same size. */
  .pc.is-full .pc-menu {
    gap: 8px;
    min-width: 0;
    padding: 0;
    border: 0;
    box-shadow: none;
  }
  .pc.is-full .pc-menu-row {
    display: flex;
    align-items: center;
    gap: 6px;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .pc.is-full .pc-menu-item {
    flex: none;
    width: auto;
    height: 40px;
    padding: 0 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    font-size: 15px;
    white-space: nowrap;
  }
  .pc.is-full .pc-menu-item.is-h2,
  .pc.is-full .pc-menu-item.is-h3 {
    font-size: 15px;
  }
  .pc.is-full .pc-menu-item.is-quote {
    border-left: 3px solid var(--purple);
  }
  .pc.is-full .pc-menu-item[aria-checked='true'] {
    border-color: var(--purple);
    background: var(--soft);
  }
  .pc.is-full .pc-menu-lab {
    flex: none;
    margin: 0 2px 0 0;
  }
  .pc.is-full .pc-adds {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .pc.is-full .pc-add {
    height: 40px;
  }
}

/* ---- Polls (Nov 6): in announcements and in any Discussions thread ----
   Tap an option to vote; once the counts show, a bar fills behind each option. */
.poll {
  display: grid;
  gap: 8px;
}
.poll-q {
  margin: 0;
  font-weight: 700;
  line-height: 1.4;
}
.poll-opts {
  display: grid;
  gap: 8px;
}
.poll-opt {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  min-height: 44px;
  padding: 10px 14px;
  overflow: hidden;
  border: 1.5px solid var(--ink);
  border-radius: 8px;
  background: var(--paper);
  color: var(--ink);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
  text-align: left;
}
button.poll-opt:hover {
  border-color: var(--purple);
}
.poll-opt.has-count {
  border-color: var(--line);
}
.poll-opt.has-count::before {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  z-index: -1;
  width: var(--poll-fill, 0%);
  background: var(--soft);
}
.poll-opt.is-mine {
  border-color: var(--purple);
}
.poll-text {
  overflow-wrap: anywhere;
}
.poll-tick {
  color: var(--purple);
}
.poll-pct {
  flex: none;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.poll-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 4px 12px;
  margin: 0;
  color: var(--muted);
  font-size: 13px;
}
.poll-end.text-button {
  min-height: 32px;
  padding: 4px 0;
  font-size: 13px;
}
.poll-end[data-armed='1'] {
  color: var(--ann-red);
}
.thread-poll {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--soft);
  color: var(--purple);
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}
/* The New thread box: a poll under the words, and the admin's pin under the kinds. */
.cb-tool[aria-pressed='true'] {
  background: var(--soft);
  color: var(--ink);
}
.cb-poll {
  margin-top: 2px;
}
.cb-pin {
  font-size: 13px;
}
/* what-i-use.css */
/* What I use (Bryan picked it, Nov 6 2026): tool chips on profiles ("Uses") and studio pages
   ("Made with"), and the picker in Edit profile and Edit studio. Tokens only (DESIGN.md). */
.tool-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-width: 0;
}
.tool-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 28px;
  padding: 4px 10px;
  font: 500 12px/1.2 'DM Sans', system-ui, sans-serif;
  color: var(--ink);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 6px;
  text-decoration: none;
  overflow-wrap: anywhere;
}
a.tool-chip:hover,
a.tool-chip:focus-visible {
  border-color: var(--ink);
  color: var(--ink);
}
a.tool-chip:focus-visible {
  outline: 2px solid var(--purple);
  outline-offset: 2px;
}

/* On a profile: the last line of What I do best. */
.specialties-panel .tools-line {
  align-items: flex-start;
}
.specialties-panel .fineprint + .tools-line,
.specialties-panel .specialty-line + .tools-line {
  border-top: 1px solid var(--line);
  padding-top: 14px;
  margin-top: 14px;
}
.specialties-panel .tools-line .specialty-rank {
  padding-top: 6px;
}
.specialties-panel > .tool-chips {
  margin-top: 10px;
}

/* On a studio page: under the name, tagline and facts. */
.made-with {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 8px;
  margin-top: 12px;
  font-size: 12px;
  color: var(--muted);
}
.made-with > span:first-child {
  margin-right: 2px;
}

/* The picker. */
.tool-pick {
  display: grid;
  gap: 8px;
  margin: 0 0 18px;
}
.tool-pick-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
}
.tool-pick-head label {
  margin: 0;
}
.tool-pick-count {
  font-size: 12px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.tool-pick-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.tool-pick-chips:empty {
  display: none;
}
.tool-pick-chips .tool-chip {
  padding-right: 2px;
  font-size: 13px;
}
.tool-pick-x {
  display: inline-grid;
  place-items: center;
  width: 26px;
  height: 26px;
  padding: 0;
  margin: 0;
  font: 500 13px/1 'DM Sans', system-ui, sans-serif;
  color: var(--muted);
  background: none;
  border: 0;
  border-radius: 4px;
  cursor: pointer;
}
.tool-pick-x:hover,
.tool-pick-x:focus-visible {
  color: var(--ann-red);
}
.tool-pick .tool-pick-search {
  width: 100%;
  margin: 0;
}
.tool-pick-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.tool-pick-list:empty {
  display: none;
}
.tool-pick-add {
  min-height: 34px;
  padding: 7px 11px;
  font: 500 13px/1.2 'DM Sans', system-ui, sans-serif;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 6px;
  cursor: pointer;
}
.tool-pick-add:hover,
.tool-pick-add:focus-visible {
  border-color: var(--ink);
}
.tool-pick-add.is-own {
  border-style: dashed;
}
.tool-pick-full {
  margin: 0;
  font-size: 12px;
  color: var(--muted);
}
@media (max-width: 640px) {
  .tool-pick-add {
    min-height: 38px;
  }
}
/* contract-chat.css */
/* The contract kit inside a chat (Nov 1): "Make it official", waiting to sign, and the signed mark.
   Flat boxes in the same family as "Put it in writing"; the signed one carries the green edge. */
.deal-box {
  flex-basis: 100%;
  padding: 12px 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--paper);
  font-size: 14px;
  line-height: 1.55;
}
.deal-box p {
  margin: 0 0 8px;
}
.deal-box .deal-mark {
  margin-bottom: 2px;
  color: var(--ink);
  font-weight: 700;
}
.deal-box.is-turn {
  border-left: 4px solid var(--purple);
  background: var(--soft);
}
.deal-box.is-signed {
  border-left: 4px solid var(--green);
}
.deal-box.is-signed .deal-mark {
  color: var(--green);
}
.deal-box .text-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-right: 18px;
  font-size: 14px;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.deal-box .button {
  min-height: 44px;
}
/* "Worked with" chips on public pages: a small tag when they signed an agreement here. */
.worked-chip .signed-tag {
  margin-left: 2px;
  color: var(--green);
  font-size: 11px;
  font-weight: 700;
}

/* The Contract Kit studio 3-pack on a studio's own page (kit-pack.js), after its second hire. Same quiet
   dashed-line block as the Featured studio panel beside it. */
.kit-pack-offer {
  margin: 16px 0 0;
  padding-top: 14px;
  border-top: 1px dashed var(--line);
  color: var(--muted);
  font-size: 14px;
  line-height: 1.45;
}
.kit-pack-offer h3 {
  margin: 0 0 6px;
  color: var(--ink);
  font: 700 16px/1.3 'Bricolage Grotesque', 'DM Sans', sans-serif;
}
.kit-pack-offer p {
  margin: 0 0 10px;
}
/* The sheet the card's button opens: what the pack is, then one button to checkout. */
.kit-pack-sheet {
  max-width: 460px;
}
.kit-pack-sheet .dialog-title {
  font-size: 28px;
  margin: 0 0 10px;
}
.kit-pack-lead {
  margin: 0 0 14px;
  color: var(--ink);
  font-size: 16px;
  line-height: 1.45;
}
.kit-pack-points {
  margin: 0 0 18px;
  padding-left: 18px;
  display: grid;
  gap: 8px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.5;
}
.kit-pack-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 18px;
}
/* profile-editor.css */
/* Profile editor: the "what's left" box, step dots and the Edit / Preview switch (Oct 23 survey asks). */
.edit-switch {
  display: inline-grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2px;
  padding: 3px;
  margin: 0 0 14px;
  border-radius: 12px;
  background: var(--tint, #eceae3);
  border: 1px solid var(--line);
  min-width: 220px;
}
.edit-switch > * {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 0 18px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 14px;
  font-weight: 550;
  text-decoration: none;
  cursor: pointer;
}
.edit-switch > [aria-current] {
  background: var(--paper);
  color: var(--ink);
  font-weight: 650;
  cursor: default;
  box-shadow: 0 1px 2px rgb(0 0 0 / 8%);
}
.edit-switch > :not([aria-current]):hover {
  color: var(--ink);
}
.preview-banner .edit-switch {
  margin: 0;
}
.profile-local-banner .edit-switch a {
  float: none;
  display: flex;
  margin-top: 0;
  text-decoration: none;
}
.preview-banner:not([hidden]) {
  flex-wrap: wrap;
  gap: 10px 16px;
}

/* What's left before going public, every step until published. */
.publish-left:not([hidden]) {
  display: block;
  margin: 0 0 18px;
  padding: 14px 16px 6px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--paper);
  font-size: 14px;
}
.left-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 8px;
}
.left-head strong {
  font-size: 15px;
}
.left-head span {
  font-size: 12px;
  color: var(--muted);
}
.left-head:only-child {
  margin-bottom: 8px;
}
.left-bar {
  height: 6px;
  border-radius: 999px;
  background: var(--line);
  margin-bottom: 4px;
  overflow: hidden;
}
.left-bar i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--green);
}
.left-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.left-list li + li {
  border-top: 1px solid var(--line);
}
.left-list button {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 44px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink);
  font: inherit;
  font-size: 14px;
  text-align: left;
  cursor: pointer;
}
.left-go {
  flex: none;
  color: var(--purple);
  font-size: 13px;
  font-weight: 600;
}
.left-list button:hover .left-go {
  text-decoration: underline;
}

/* Step buttons: a dot while a step still has an essential missing, a check once its essentials are in. */
.setup-steps button.has-left,
.setup-steps button.is-complete {
  position: relative;
}
.setup-steps button.has-left::after {
  content: '';
  position: absolute;
  top: 3px;
  right: 3px;
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: #c2702b;
  border: 2px solid var(--paper);
}
.setup-steps button.is-complete:not([aria-current]) span {
  font-size: 0;
}
.setup-steps button.is-complete:not([aria-current]) span::before {
  content: '✓';
  font-size: 12px;
}

/* A draft preview's missing essentials, as dashed spots that open the editor at that field. */
.preview-missing {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 12px 0 18px;
}
.preview-missing a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 14px;
  border: 1.5px dashed #c2702b;
  border-radius: 10px;
  color: #a85a1c;
  font-size: 14px;
  font-weight: 550;
  text-decoration: none;
}
.preview-missing a:hover {
  background: color-mix(in srgb, #c2702b 8%, transparent);
}
[data-theme='dark'] .preview-missing a {
  color: #e8a467;
  border-color: #d08546;
}
@media (max-width: 640px) {
  .edit-switch {
    display: grid;
    width: 100%;
  }
  .preview-missing a {
    width: 100%;
  }
}
[data-theme='dark'] .edit-switch > [aria-current] {
  background: #3b403c;
}
/* post-activity.css */
/* "On your posts" at the top of the Inbox, and the names bubble on a Community reaction. */
.post-activity:not([hidden]) {
  display: block;
  margin: 0 0 18px;
  padding: 12px 16px 6px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--paper);
}
.pa-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}
.pa-head h2 {
  margin: 0;
  font-size: 15px;
}
.pa-head .text-button {
  min-height: 44px;
  font-size: 13px;
}
.pa-list {
  list-style: none;
  margin: 4px 0 0;
  padding: 0;
}
.pa-list li + li {
  border-top: 1px solid var(--line);
}
.pa-list a {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto;
  align-items: start;
  gap: 10px;
  padding: 10px 0;
  min-height: 44px;
  color: var(--ink);
  text-decoration: none;
  font-size: 14px;
  line-height: 1.4;
}
.pa-list a:hover .pa-text strong {
  text-decoration: underline;
}
.pa-icon {
  font-size: 18px;
  line-height: 1.2;
  text-align: center;
}
.pa-list small {
  color: var(--muted);
  font-size: 12px;
  white-space: nowrap;
  padding-top: 2px;
}
.pa-list li.is-new small::before {
  content: '';
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 6px;
  border-radius: 999px;
  background: var(--purple);
  vertical-align: 1px;
}
.pa-n {
  margin-left: 4px;
  color: var(--muted);
  font-size: 12px;
}
.pa-snippet {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 13px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.who-reacted {
  position: absolute;
  z-index: 60;
  max-width: min(280px, calc(100vw - 16px));
  padding: 7px 11px;
  border-radius: 10px;
  background: var(--ink);
  color: var(--paper);
  font-size: 13px;
  line-height: 1.35;
  pointer-events: none;
  box-shadow: 0 4px 14px rgb(0 0 0 / 18%);
}
.who-emoji {
  margin-right: 2px;
}
/* replies-flat.css */
/* Replies as flat rows (Bryan, Oct 23, option A): no box and no purple bar, a divider between
   replies, the time beside the name, React and Reply always there as quiet text. */
.news-replies:has(.cb-msg) {
  gap: 0;
}
.news-reply.cb-msg,
.news-reply.cb-msg.mine {
  gap: 14px;
  padding: 16px 0;
  border-top: 1px solid var(--line);
  border-radius: 0;
  background: none;
  box-shadow: none;
}
.cb-msg .cb-avatar {
  width: 40px;
  height: 40px;
  font-size: 15px;
}
.cb-msg .news-reply-head {
  gap: 4px 8px;
}
.cb-msg .news-reply-head .cb-name {
  font-size: 15px;
}
.cb-msg .news-reply-head .pixel-badge {
  margin-left: 0;
}
.cb-msg .news-reply-head small {
  margin-left: 0;
  font-size: 12px;
}
.cb-msg .news-reply-head small::before {
  content: '· ';
}
.cb-msg > .cb-msg-main > p {
  margin-top: 4px;
  font-size: 15px;
  line-height: 1.55;
}
.cb-msg .news-reply-tools {
  gap: 14px;
  margin-top: 8px;
}
.cb-msg .news-reply-tools .text-button {
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
}
@media (hover: hover) {
  .cb-msg .news-reply-tools .text-button {
    opacity: 1;
  }
}
@media (max-width: 600px) {
  .news-reply.cb-msg,
  .news-reply.cb-msg.mine {
    gap: 12px;
    padding: 14px 0;
  }
  .cb-msg .cb-avatar {
    width: 34px;
    height: 34px;
  }
}

/* Founder: Bryan's holo foil badge, shifting slowly through foil colours like a trading card. */
.pixel-badge.badge-founder {
  font-size: 11px;
  background: linear-gradient(110deg, #f7d774, #f3a6c8, #9fd3f2, #b9f0c4, #f7d774);
  background-size: 300% 100%;
  animation: founder-holo 5s linear infinite;
}
@keyframes founder-holo {
  to {
    background-position: 300% 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .pixel-badge.badge-founder {
    animation: none;
  }
}

/* Find my match: the creator's profile picture beside their name on each result (Bryan, Oct 23). */
.match-who {
  display: flex;
  align-items: center;
  gap: 10px;
}
.match-face {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--accent, var(--soft));
  color: var(--ink);
  font-size: 13px;
  font-weight: 700;
}
.match-face:has(img) {
  background: var(--soft);
}
.match-face img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Protected preview switch on each uploaded track (Bryan, Oct 23): easy to find and tap on a phone. */
.protect-switch {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  margin: 6px 0 4px;
  padding: 0 12px 0 8px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--paper);
  color: var(--ink);
  font: inherit;
  font-size: 14px;
  cursor: pointer;
}
.protect-switch:hover {
  border-color: var(--ink);
}
.ps-track {
  position: relative;
  flex: none;
  width: 38px;
  height: 22px;
  border-radius: 999px;
  background: var(--line);
  transition: background 0.15s;
}
.ps-knob {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 2px rgb(0 0 0 / 25%);
  transition: transform 0.15s;
}
.protect-switch[aria-checked='true'] .ps-track {
  background: var(--green);
}
.protect-switch[aria-checked='true'] .ps-knob {
  transform: translateX(16px);
}
@media (prefers-reduced-motion: reduce) {
  .ps-track,
  .ps-knob {
    transition: none;
  }
}
/* nav-lantern.css */
/* Job board nav tab: a little pixel lantern whose flame flickers in three frames, in place of the
   live dot (Bryan's pick 5, Oct 29; it replaced the Torch ring, which washed under the label on the
   Job board page). Flat colours, no glow; it holds still on frame one when motion is turned off. */
.nav-lantern {
  display: block;
  flex-shrink: 0;
  width: 10px;
  height: 14px;
}
.nav-lantern .frame {
  fill: var(--green);
}
.nav-lantern .am {
  fill: #d9822b;
}
.nav-lantern .co {
  fill: #f2c14e;
}
:root[data-theme='dark'] .nav-lantern .am {
  fill: #e8923a;
}
:root[data-theme='dark'] .nav-lantern .co {
  fill: #f6d06b;
}
.nav-lantern .fl {
  opacity: 0;
}
.nav-lantern .fl.a {
  opacity: 1;
}
/* Six 0.2 s frames: tall, low, tall, leaning, tall, low. */
@media (prefers-reduced-motion: no-preference) {
  .nav-lantern .fl.a {
    animation: lantern-a 1.2s step-end infinite;
  }
  .nav-lantern .fl.b {
    animation: lantern-b 1.2s step-end infinite;
  }
  .nav-lantern .fl.c {
    animation: lantern-c 1.2s step-end infinite;
  }
}
@keyframes lantern-a {
  0% { opacity: 1; }
  16.67% { opacity: 0; }
  33.33% { opacity: 1; }
  50% { opacity: 0; }
  66.67% { opacity: 1; }
  83.33%, 100% { opacity: 0; }
}
@keyframes lantern-b {
  0% { opacity: 0; }
  16.67% { opacity: 1; }
  33.33% { opacity: 0; }
  83.33%, 100% { opacity: 1; }
}
@keyframes lantern-c {
  0% { opacity: 0; }
  50% { opacity: 1; }
  66.67%, 100% { opacity: 0; }
}
/* In dark mode the count reads in dark ink on the light green (white was hard to read). */
:root[data-theme='dark'] .nav-roles .nav-count {
  color: var(--bg);
}
/* post-setup.css */
/* Post a role (Bryan, Oct 24): "Already posted it somewhere?" and the live reach count. */
.quick-post .post-setup-ask {
  margin: -6px 0 18px;
  font-size: 14px;
  color: var(--muted);
}
.quick-post .post-setup-ask .text-button {
  font-size: 14px;
}
.quick-post .post-reach {
  margin: 10px 0 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--green);
}
.quick-post .pq-free {
  margin: 0 0 6px;
  font-size: 15px;
}
.quick-post.pq .post-setup-ask {
  margin: 0 0 16px;
}
/* Done-for-you hiring (Bryan, Nov 11): $79 and Bryan does the hiring. One flat card above the free form. */
.quick-post .dfy-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: 18px;
  row-gap: 4px;
  align-items: center;
  margin: 0 0 22px;
  padding: 14px 16px;
  border: 2px solid var(--ink);
  border-radius: 10px;
  background: var(--paper);
  color: var(--ink);
  box-shadow: 4px 4px 0 var(--gx-drop);
}
.quick-post .dfy-card h2 {
  grid-column: 1;
  margin: 0;
  font: 700 17px/1.25 'Bricolage Grotesque', 'DM Sans', sans-serif;
  text-wrap: balance;
}
.quick-post .dfy-card p {
  grid-column: 1;
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.45;
}
.quick-post .dfy-card .dfy-buy {
  grid-column: 2;
  grid-row: 1 / span 2;
  white-space: nowrap;
}
.quick-post .dfy-on h2 {
  color: var(--green);
}
.quick-post.pq .dfy-card {
  grid-template-columns: minmax(0, 1fr);
  margin: 0 0 18px;
}
.quick-post.pq .dfy-card .dfy-buy {
  grid-column: 1;
  grid-row: auto;
  justify-self: start;
  margin-top: 8px;
}
@media (max-width: 600px) {
  .quick-post .dfy-card {
    grid-template-columns: minmax(0, 1fr);
  }
  .quick-post .dfy-card .dfy-buy {
    grid-column: 1;
    grid-row: auto;
    justify-self: start;
    margin-top: 8px;
  }
}
/* playtests.css */
/* ---- Playtest swap (Oct 24): the #playtests page and its band on the Job board. Flat cards, text
   11px and up, colours from the site tokens so dark mode follows. ---- */

.pt-band {
  width: calc(100% - var(--gx-d));
  max-width: none;
  margin: 0 0 14px;
}
.pt-band-txt {
  display: grid;
  gap: 2px;
  min-width: 0;
  text-align: left;
}
.pt-band-txt > span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
}

.playtests {
  display: grid;
  gap: 16px;
  max-width: 920px;
}
.pt-me {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--paper);
}
.pt-me p {
  margin: 0;
}
.pt-credits {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 15px;
}
.pt-credits b {
  font-size: 20px;
}
.pt-credits svg {
  color: var(--gold, #c9a227);
}
.pt-strikes {
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--soft);
  color: var(--ink);
  font-size: 12px;
  font-weight: 700;
}
.pt-strikes.is-bench {
  background: #fbe3dc;
  color: #8a2b12;
}
.pt-gap {
  flex: 1;
}

.pt-form {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--paper);
}
.pt-form label {
  display: grid;
  gap: 4px;
  font-size: 13px;
  font-weight: 700;
}
.pt-form :is(input, select, textarea),
.pt-join input {
  width: 100%;
  box-sizing: border-box;
  padding: 9px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--bg);
  color: var(--ink);
  font: inherit;
  font-size: 15px;
  font-weight: 500;
}
.pt-row {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: 10px;
}
.pt-form-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}
.pt-cost {
  flex: 1;
  margin: 0;
  color: var(--muted);
  font-size: 13px;
}
.pt-cost.is-short {
  color: #a23a1c;
  font-weight: 700;
}

.pt-how {
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
}
.pt-how summary {
  font-weight: 750;
  cursor: pointer;
}
.pt-how ul {
  margin: 8px 0 2px;
  padding-left: 18px;
  font-size: 14px;
  line-height: 1.5;
}

.pt-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  align-items: start;
  gap: 14px;
}
.pt-card {
  display: grid;
  align-content: start;
  gap: 8px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--paper);
}
.pt-card.is-mine {
  border-color: var(--green);
}
.pt-list.is-done .pt-card {
  opacity: 0.8;
}
.pt-card h3 {
  margin: 0;
  font-size: 18px;
}
.pt-card p {
  margin: 0;
}
.pt-head {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-size: 12px;
  font-weight: 700;
}
.pt-plat {
  padding: 2px 8px;
  border-radius: 6px;
  background: #dff1f1;
  color: #145a5a;
}
.pt-when {
  color: var(--muted);
}
.pt-by {
  color: var(--muted);
  font-size: 13px;
}
.pt-look {
  font-size: 14px;
  line-height: 1.45;
  white-space: pre-line;
}
.pt-note {
  font-size: 13px;
  color: var(--muted);
}
.pt-acts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  margin-top: 4px;
}
.pt-testers {
  display: grid;
  gap: 6px;
  margin: 4px 0 0;
  padding: 0;
  list-style: none;
}
.pt-testers li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  padding: 8px 0;
  border-top: 1px solid var(--line);
  font-size: 14px;
}
.pt-tname {
  font-weight: 700;
}
.pt-email {
  color: var(--muted);
  font-size: 12px;
  overflow-wrap: anywhere;
}
.pt-pill {
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--soft);
  font-size: 11px;
  font-weight: 700;
}
.pt-pill.is-good {
  background: #e3f1e6;
  color: #23502f;
}
.pt-pill.is-note {
  background: #fff1cc;
  color: #6b4d00;
}
.pt-marks {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}
.pt-join {
  display: grid;
  gap: 8px;
}
.pt-join label {
  display: grid;
  gap: 4px;
  font-size: 13px;
  font-weight: 700;
}
.pt-empty {
  grid-column: 1 / -1;
  padding: 18px;
  border: 1px dashed var(--line);
  border-radius: 12px;
  color: var(--muted);
  text-align: center;
}
.pt-sub {
  margin: 8px 0 0;
  font-size: 18px;
}

[data-theme='dark'] .pt-plat {
  background: #163a3a;
  color: #9fdede;
}
[data-theme='dark'] .pt-strikes.is-bench {
  background: #47231a;
  color: #f2b7a6;
}
[data-theme='dark'] .pt-cost.is-short {
  color: #f2a48c;
}
[data-theme='dark'] .pt-pill.is-good {
  background: #1f3a27;
  color: #a9dbb5;
}
[data-theme='dark'] .pt-pill.is-note {
  background: #3d3214;
  color: #f0d790;
}

@media (max-width: 560px) {
  .pt-row {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
  .pt-row label:first-child {
    grid-column: 1 / -1;
  }
  .pt-marks {
    margin-left: 0;
  }
}
/* shortlist.css */
/* The hand-picked shortlist line on your own quiet role (shortlist.js). */
.shortlist-ask {
  flex-basis: 100%;
  margin: 10px 0 0;
  padding-top: 10px;
  border-top: 1px dashed var(--line);
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}
.shortlist-ask a {
  color: var(--ink);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}
/* The budget nudge on your own paid role with no budget (budget-nudge.js). */
.budget-nudge {
  flex-basis: 100%;
  margin: 10px 0 0;
  padding-top: 10px;
  border-top: 1px dashed var(--line);
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}
.budget-nudge a {
  color: var(--ink);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}
/* peek-row.css */
/* Real portfolios in the homepage's first screen, under Browse creators (app.js peekRow). */
.peek-row {
  margin-top: 26px;
}
.peek-people {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.peek-card {
  display: block;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  color: var(--ink);
  text-decoration: none;
  background: var(--paper);
}
.peek-card:hover,
.peek-card:focus-visible {
  border-color: var(--ink);
}
.peek-art {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--line);
}
.peek-art img,
.peek-art svg,
.peek-art .cover-wave {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.peek-body {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px 10px;
  min-width: 0;
}
.peek-body .avatar {
  flex: none;
  width: 30px;
  height: 30px;
  font-size: 12px;
}
.peek-body > span:last-child {
  display: grid;
  min-width: 0;
}
.peek-body strong,
.peek-body small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.peek-body strong {
  font-size: 13px;
}
.peek-body small {
  color: var(--muted);
  font-size: 11px;
}
/* Phones: one swipeable row, so the match finder stays close. */
@media (max-width: 760px) {
  .peek-row {
    margin: 18px -18px 0;
  }
  .peek-people {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding: 0 18px 4px;
    scroll-padding-inline: 18px;
    scrollbar-width: none;
  }
  .peek-card {
    flex: 0 0 150px;
    scroll-snap-align: start;
  }
}
@media (min-width: 761px) {
  .peek-card:nth-child(n + 4) {
    display: none;
  }
}

/* The row's place while the catalogue loads (index.html): three blank cards the same size as the real ones. */
.peek-wait .peek-card {
  border-color: transparent;
}
.peek-wait .peek-body {
  height: 49px;
  padding: 0;
}
/* questlog.css */
/* The Weekly quest log sign-up (Bryan, Oct 24): one email field and a button. Shared by the guide
   pages (plain HTML, posts the form) and the Job board (questlog-ui.js sends it without leaving). */
.questlog-box {
  margin: 40px 0;
  padding: 22px 24px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--paper);
}
.questlog-box h2 {
  margin: 0 0 12px;
  font-size: 22px;
}
.questlog-form {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.questlog-form input[type='email'] {
  flex: 1 1 220px;
  min-width: 0;
  min-height: 46px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--bg);
  color: var(--ink);
  font: inherit;
  font-size: 16px;
}
.questlog-form button {
  min-height: 46px;
  padding: 0 20px;
  border: 0;
  border-radius: 999px;
  background: var(--purple);
  color: #fff;
  font: inherit;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
}
@media (prefers-color-scheme: dark) {
  .questlog-form button {
    color: #171818;
  }
}
.questlog-trap {
  position: absolute;
  left: -9999px;
}
.questlog-out {
  margin: 10px 0 0;
  font-size: 15px;
}
.questlog-out:empty {
  display: none;
}
/* member-quotes.css */
/* Homepage: three things members said in the Oct 20 survey, each quoted by name with their OK.
   One bigger quote and two smaller ones, flat cards, no motion. */
.member-quotes {
  max-width: 960px;
  margin: 56px auto 0;
}
.member-quotes h2 {
  margin: 0 0 16px;
}
.member-quotes-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 14px;
}
.member-quote {
  margin: 0;
  padding: 18px 20px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 14px;
}
.member-quote blockquote {
  margin: 0;
  font-size: 18px;
  line-height: 1.45;
  color: var(--ink);
}
.member-quote-lead {
  grid-row: span 2;
  background: var(--soft);
  border-color: transparent;
  padding: 26px 28px;
}
.member-quote-lead blockquote {
  font-family: 'Bricolage Grotesque', 'DM Sans', sans-serif;
  font-size: clamp(24px, 3.2vw, 32px);
  line-height: 1.2;
  font-weight: 600;
}
.member-quote-wide {
  grid-column: 1 / -1;
}
.member-quote figcaption a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: inherit;
  text-decoration: none;
}
.member-quote figcaption a:hover b {
  text-decoration: underline;
}
.member-quote figcaption img {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--line);
  flex: none;
}
.member-quote-lead figcaption img {
  width: 44px;
  height: 44px;
}
.member-quote figcaption span {
  display: flex;
  flex-direction: column;
  line-height: 1.25;
  font-size: 13px;
  color: var(--muted);
}
.member-quote figcaption b {
  font-size: 15px;
  color: var(--ink);
}
@media (max-width: 680px) {
  .member-quotes-grid {
    grid-template-columns: 1fr;
  }
  .member-quote-lead {
    grid-row: auto;
  }
}
/* role-page.css */
/* A role's own link (/s/<studio>/r/<role>): the role's notice is the page heading (an h1 with the
   notice's own look), and the studio name above it is an h2 that keeps the old h1 size. */
.profile-head-row .studio-h1 {
  font-size: 49px;
  line-height: 1.04;
  letter-spacing: -0.035em;
  overflow-wrap: anywhere;
}
@media (max-width: 760px) {
  .profile-head-row .studio-h1 {
    font-size: 40px;
  }
}
/* The shared link's plain copy stays visible while it stands in for the page. */
.js.ssr-on .ssr-page {
  display: block;
}
/* spacing.css */
/* Declutter pass 6 (Oct 28, gardnn: "the padding feels a little inconsistent"). Bordered cards used
   16 different padding and radius pairs across the site. Three sizes now cover the plain ones; the
   wooden Job board notes, the profile ticket and the photo frames keep their own look on purpose.
   Loaded last so it wins over the older per-card values. */
:root {
  --pad-strip: 12px 16px;
  --r-strip: 12px;
  --pad-card: 20px;
  --r-card: 14px;
  --pad-panel: 28px;
  --r-panel: 16px;
}
/* Strips: one-line banners, nudges and bands. */
.publication-reminder,
.survey-nudge,
.push-band,
.event-strip,
.cb-box,
.first-draft-action,
.roles-guide,
.roles-cta,
.signup-role-picker,
.pt-band {
  padding: var(--pad-strip);
  border-radius: var(--r-strip);
}
/* Cards: a thread, a quote, a drop target, the newsletter box, a role post in the editor. */
.thread-card,
.drop-card,
.mix-desk,
.member-quote,
.roles-found,
.questlog-box,
.role-card-edit,
.jb-picks {
  padding: var(--pad-card);
  border-radius: var(--r-card);
}
/* Panels: editor steps, the account panel, the big home boxes. */
.form-section,
.account-panel,
.home-activity,
.ear-game,
.game-over {
  padding: var(--pad-panel);
  border-radius: var(--r-panel);
}
@media (max-width: 640px) {
  .form-section,
  .account-panel,
  .home-activity,
  .ear-game,
  .game-over {
    padding: 20px 16px;
  }
}
/* job-board-ledger.css */
/* =====================================================================================================
   JOB BOARD LEDGER (Bryan, Oct 29: C16 "Ledger, spaced" with the F6 touches). The Job board's notices
   become a list of separate paper cards in four columns under an oak header strip: who's hiring | the
   quest (title, craft, the game, the brief) | reward and term | the buttons. The touches: paper with a
   faint grain, a colour band in the craft's colour down the left, pixel plaque logos, a 3px lift on
   hover, a New stamp on posts from the last three days and the game each post is for. Flat: no
   gradients, no glows, nothing under 11px. The studio page, the home strip and the phone home keep
   the wooden board (BOUNTY BOARD block in styles.css); every rule here is scoped to
   #roles-content .bounty-ledger so it wins over those board rules without !important.
   Markup: devs-ui.js renderRoles (the header strip) and boardNotice; bounty-board.js.
   Mockups: https://claude.ai/artifact/9ws5BrbuQCBeouV2h9wDps (F6 on C16).
   ===================================================================================================== */
#roles-content .bounty-board.bounty-ledger {
  /* The oak of the old frame draws the heading's rule and the header strip. The hard pixel shadows (the
     plaque round the logo, the New stamp, the lift) are oak in light mode and the board's own drop black in
     dark mode, like the buttons' and chips' shadows beside them (Bryan, Oct 29: the tan plaque in dark mode
     was the one colour he didn't like). */
  --jb-oak: var(--bounty-frame-edge);
  --jb-shadow: var(--bounty-frame-edge);
  --jb-strip: color-mix(in oklab, var(--paper) 88%, var(--bounty-frame-edge));
  --jb-cols: 236px minmax(0, 1fr) 230px 190px;
  --jb-gap: 24px;
  --jb-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .45 0 0 0 0 .35 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  margin: 0 0 8px;
  padding: 0;
  border: 0;
  box-shadow: none;
  background: none;
  overflow: visible;
}
:root[data-theme='dark'] #roles-content .bounty-board.bounty-ledger {
  --jb-shadow: var(--bounty-drop);
}

/* ---------- the heading: a plain page heading with the oak rule under it, the crest kept ---------- */
#roles-content .bounty-board.bounty-ledger .bounty-sign {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  width: 100%;
  max-width: none;
  margin: 0 0 12px;
  padding: 0 0 12px;
  border-bottom: 3px solid var(--jb-oak);
  background: none;
  box-shadow: none;
  color: var(--ink);
  font: 700 26px/1.1 'Bricolage Grotesque', 'DM Sans', sans-serif;
  letter-spacing: -0.01em;
  text-align: left;
}
#roles-content .bounty-board.bounty-ledger .bounty-sign::before,
#roles-content .bounty-board.bounty-ledger .bounty-sign::after {
  display: none;
}
#roles-content .bounty-board.bounty-ledger .bounty-sign .gx-crest {
  width: 26px;
  height: 30px;
}
/* "Like the old look better?" sits at the heading's right while it runs, as a plain small button. */
#roles-content .bounty-board.bounty-ledger .bounty-look {
  top: 0;
  right: 0;
  min-height: 40px;
  padding: 6px 12px;
  border: 1px solid var(--line);
  background: var(--paper);
  box-shadow: none;
  color: var(--ink);
  font: 600 13px/1.2 'DM Sans', system-ui, sans-serif;
}
@container bountyboard (max-width: 980px) {
  #roles-content .bounty-board.bounty-ledger .bounty-look {
    display: inline-block;
    margin: -2px 0 14px;
  }
}

/* ---------- the header strip over the list ---------- */
#roles-content .bounty-ledger .jb-head {
  display: grid;
  grid-template-columns: var(--jb-cols);
  column-gap: var(--jb-gap);
  margin: 0 0 10px;
  padding: 9px 22px 8px 23px;
  border: 1px solid var(--jb-oak);
  border-radius: 8px;
  background: var(--jb-strip);
  color: var(--ink);
  font: 600 11px/1.2 'DM Sans', system-ui, sans-serif;
}

/* ---------- the list: one card per role, a gap between cards, no columns of notices ---------- */
#roles-content .bounty-ledger .bounty-grid,
#roles-content .jb-hall:not(.is-panel-off) .bounty-ledger .bounty-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
}
#roles-content .bounty-ledger .bounty-grid > *,
#roles-content .jb-hall:not(.is-panel-off) .bounty-ledger .bounty-grid > * {
  justify-self: stretch;
  width: auto;
  --bounty-tilt: 0deg;
  --bounty-face: var(--bounty-paper);
}
#roles-content .bounty-ledger .bounty-grid > .bounty-note:last-child:nth-child(odd),
#roles-content .jb-hall:not(.is-panel-off) .bounty-ledger .bounty-grid > .bounty-note:last-child:nth-child(odd) {
  grid-column: auto;
  justify-self: stretch;
  width: auto;
}
#roles-content .bounty-ledger .bounty-grid > .empty-state {
  width: auto;
  justify-self: stretch;
  padding: 32px 20px;
  border-radius: 6px;
  box-shadow: none;
  transform: none;
}
#roles-content .bounty-ledger .bounty-more {
  margin-top: 18px;
}

/* ---------- one card: four columns, paper with a faint grain, the craft's colour down the left ---------- */
/* The craft's colour, from the first craft the post asks for (the same palette as the craft squares). */
#roles-content .bounty-ledger .bounty-note {
  --craft-c: #7352bd;
}
#roles-content .bounty-ledger .bounty-note[data-kind^='sound'] {
  --craft-c: #1f8a97;
}
#roles-content .bounty-ledger .bounty-note[data-kind^='voice'] {
  --craft-c: #c9652b;
}
#roles-content .bounty-ledger .bounty-note[data-kind^='art'] {
  --craft-c: #c3447f;
}
#roles-content .bounty-ledger .bounty-note[data-kind^='vfx'] {
  --craft-c: #3f74c4;
}
#roles-content .bounty-ledger .bounty-note[data-kind^='writing'] {
  --craft-c: #9c7a3f;
}
#roles-content .bounty-ledger .bounty-note[data-kind^='editing'] {
  --craft-c: #c1443d;
}
#roles-content .bounty-ledger .bounty-note[data-kind^='localization'] {
  --craft-c: #78893a;
}
#roles-content .bounty-ledger .bounty-note[data-kind^='marketing'] {
  --craft-c: #2f8a5b;
}
#roles-content .bounty-ledger .bounty-note[data-kind^='ui'] {
  --craft-c: #3f6fb0;
}
#roles-content .bounty-ledger .bounty-note[data-kind^='qa'] {
  --craft-c: #a8562a;
}
#roles-content .bounty-ledger .bounty-note[data-kind^='dev'] {
  --craft-c: #5f6f84;
}
:root[data-theme='dark'] #roles-content .bounty-ledger .bounty-note {
  --craft-c: #b39af0;
}
:root[data-theme='dark'] #roles-content .bounty-ledger .bounty-note[data-kind^='sound'] {
  --craft-c: #6cc8d3;
}
:root[data-theme='dark'] #roles-content .bounty-ledger .bounty-note[data-kind^='voice'] {
  --craft-c: #f0996a;
}
:root[data-theme='dark'] #roles-content .bounty-ledger .bounty-note[data-kind^='art'] {
  --craft-c: #ef8fbd;
}
:root[data-theme='dark'] #roles-content .bounty-ledger .bounty-note[data-kind^='vfx'] {
  --craft-c: #86b0f0;
}
:root[data-theme='dark'] #roles-content .bounty-ledger .bounty-note[data-kind^='writing'] {
  --craft-c: #d6b276;
}
:root[data-theme='dark'] #roles-content .bounty-ledger .bounty-note[data-kind^='editing'] {
  --craft-c: #f08a84;
}
:root[data-theme='dark'] #roles-content .bounty-ledger .bounty-note[data-kind^='localization'] {
  --craft-c: #b8c86c;
}
:root[data-theme='dark'] #roles-content .bounty-ledger .bounty-note[data-kind^='marketing'] {
  --craft-c: #74d39d;
}
:root[data-theme='dark'] #roles-content .bounty-ledger .bounty-note[data-kind^='ui'] {
  --craft-c: #8db4ec;
}
:root[data-theme='dark'] #roles-content .bounty-ledger .bounty-note[data-kind^='qa'] {
  --craft-c: #eba37a;
}
:root[data-theme='dark'] #roles-content .bounty-ledger .bounty-note[data-kind^='dev'] {
  --craft-c: #a7b5c7;
}
/* A Side quest keeps its gold: the band and the frame. */
#roles-content .bounty-ledger .bounty-note.bounty-jam {
  --craft-c: var(--bounty-gold);
}
#roles-content .bounty-ledger .bounty-grid > .bounty-note:not(.bounty-add) {
  display: grid;
  grid-template-columns: var(--jb-cols);
  column-gap: var(--jb-gap);
  row-gap: 0;
  align-items: start;
  padding: 20px 22px 22px 18px;
  border: 1px solid var(--bounty-paper-edge);
  border-left: 6px solid var(--craft-c);
  border-radius: 6px;
  background: var(--bounty-face);
  box-shadow: none;
  transform: none;
  transition: transform 150ms ease-out, box-shadow 150ms ease-out;
}
/* The grain: a tiny inline texture, 16% on the paper, never over the buttons (they sit above it). */
#roles-content .bounty-ledger .bounty-grid > .bounty-note:not(.bounty-add)::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background-image: var(--jb-grain);
  opacity: 0.16;
  mix-blend-mode: multiply;
  pointer-events: none;
}
:root[data-theme='dark'] #roles-content .bounty-ledger .bounty-grid > .bounty-note:not(.bounty-add)::after {
  opacity: 0.12;
  mix-blend-mode: screen;
}
#roles-content .bounty-ledger .bounty-grid > .bounty-note.bounty-jam {
  border-width: 2px 2px 2px 6px;
  border-color: var(--bounty-gold);
  box-shadow:
    inset 0 0 0 4px var(--bounty-face),
    inset 0 0 0 5px var(--bounty-gold-line);
}
#roles-content .bounty-ledger .bounty-note > .bounty-pin {
  display: none;
}
/* Everything not placed below stacks in the quest column, in this order: title, craft, flags, the
   game, the brief, the pictures, the trust line. */
#roles-content .bounty-ledger .bounty-note > * {
  grid-column: 2;
  min-width: 0;
  margin: 0;
  order: 9;
}

/* Who's hiring: the plaque logo, "<Studio> is hiring", the place and the posted line under it. */
#roles-content .bounty-ledger .bounty-note > .bounty-who {
  grid-column: 1;
  grid-row: 1 / span 20;
  order: 0;
  align-self: start;
  align-items: start;
  align-content: start;
  gap: 3px 12px;
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 14px;
  line-height: 1.3;
  color: var(--bounty-muted);
}
#roles-content .bounty-ledger .bounty-who > .avatar.studio-logo,
#roles-content .bounty-ledger .bounty-who > .bounty-crestlogo {
  width: 40px;
  height: 40px;
  margin: 1px 5px 5px 1px;
  border: 2px solid var(--jb-shadow);
  border-radius: 0;
  box-shadow: 3px 3px 0 var(--jb-shadow);
  background-clip: padding-box;
  font-size: 14px;
}
#roles-content .bounty-ledger .bounty-who > .avatar.studio-logo img {
  border-radius: 0;
}
#roles-content .bounty-ledger .bounty-note .bounty-who-txt {
  gap: 3px;
  font-size: 14px;
  line-height: 1.3;
  color: var(--bounty-muted);
}
#roles-content .bounty-ledger .bounty-note .bounty-hiring {
  margin: 0;
  font-size: 14px;
}
#roles-content .bounty-ledger .bounty-note .bounty-hiring b {
  font-weight: 700;
  color: var(--bounty-ink);
}
#roles-content .bounty-ledger .bounty-note .bounty-meta {
  margin: 0;
  font-size: 13px;
  line-height: 1.35;
}

/* The quest: the title first, in the studio's words, with the New stamp on a fresh post. */
#roles-content .bounty-ledger .bounty-note > .bounty-title {
  order: 1;
  margin: 0 0 6px;
  color: var(--bounty-ink);
  font: 700 18px/1.25 'Bricolage Grotesque', 'DM Sans', sans-serif;
  letter-spacing: -0.01em;
}
#roles-content .bounty-ledger .bounty-title .role-link {
  text-decoration: none;
}
#roles-content .bounty-ledger .bounty-note:hover .role-link,
#roles-content .bounty-ledger .bounty-note:has(:focus-visible) .role-link {
  text-decoration: underline;
  text-decoration-color: currentColor;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}
#roles-content .bounty-ledger .jb-new {
  display: inline-block;
  vertical-align: 3px;
  margin-left: 5px;
  padding: 4px 6px 3px;
  border: 2px solid var(--bounty-gold-line);
  box-shadow: 2px 2px 0 var(--jb-shadow);
  color: var(--bounty-ink);
  font: 700 11px/1 'DM Sans', system-ui, sans-serif;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
/* The craft line: small squares and "Composer wanted" at text size. */
#roles-content .bounty-ledger .bounty-note > .bounty-want {
  order: 2;
  display: flex;
  align-items: center;
  gap: 0;
  margin: 0 0 8px;
}
#roles-content .bounty-ledger .bounty-note .bounty-sigs {
  gap: 4px;
  margin-right: 9px;
  padding: 0;
}
#roles-content .bounty-ledger .bounty-note .bounty-sigs-grid {
  grid-template-columns: repeat(2, 22px);
}
#roles-content .bounty-ledger .bounty-note .bounty-sig {
  width: 22px;
  height: 22px;
}
#roles-content .bounty-ledger .bounty-note .bounty-sig .gx-ico {
  width: 14px;
  height: 14px;
}
#roles-content .bounty-ledger .bounty-note .bounty-want-txt {
  color: var(--bounty-ink);
  font: 600 13px/1.35 'DM Sans', system-ui, sans-serif;
  font-optical-sizing: auto;
  font-variation-settings: normal;
  letter-spacing: 0;
  text-wrap: auto;
}
#roles-content .bounty-ledger .bounty-note > .bounty-flags {
  order: 3;
  margin: 0 0 8px;
}
/* The game the post is for: "For <Game>, in development, Godot". */
#roles-content .bounty-ledger .bounty-note > .bounty-game {
  order: 4;
  gap: 6px;
  margin: 0 0 8px;
  color: var(--bounty-muted);
  font-size: 13px;
  line-height: 1.4;
}
#roles-content .bounty-ledger .bounty-game .gx-ico {
  width: 16px;
  height: 16px;
}
#roles-content .bounty-ledger .bounty-game b {
  color: var(--bounty-ink);
}
#roles-content .bounty-ledger .bounty-game .bounty-muted {
  font-size: 13px;
}
/* The brief: two lines of its first line, then the pictures and the quiet trust line. */
#roles-content .bounty-ledger .bounty-note > .bounty-line {
  order: 5;
  display: -webkit-box;
  margin: 0 0 6px;
  overflow: hidden;
  color: var(--bounty-muted);
  font-size: 13px;
  line-height: 1.45;
  white-space: normal;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
#roles-content .bounty-ledger .bounty-note > .role-refs {
  order: 6;
  flex-wrap: wrap;
  margin: 4px 0 8px;
}
#roles-content .bounty-ledger .bounty-note > .bounty-trust {
  order: 7;
  margin: 0;
  font-size: 12px;
}
#roles-content .bounty-ledger .bounty-note > .bounty-qline {
  order: 3;
  margin: 0 0 6px;
  font-size: 13px;
}

/* Reward and term: the pay plate over the term plate. */
#roles-content .bounty-ledger .bounty-note > .bounty-facts {
  grid-column: 3;
  grid-row: 1 / span 20;
  order: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  align-self: start;
  margin: 0;
}
#roles-content .bounty-ledger .bounty-note .bounty-facts > .gx-chip {
  margin: 0;
  max-width: 100%;
}
/* The buttons, stacked and full width in the last column. */
#roles-content .bounty-ledger .bounty-note > .bounty-acts {
  grid-column: 4;
  grid-row: 1 / span 20;
  order: 0;
  display: grid;
  gap: 8px;
  align-self: center;
  margin: 0;
}
#roles-content .bounty-ledger .bounty-note > .bounty-acts > * {
  box-sizing: border-box;
  width: 100%;
  justify-content: center;
}
/* A Side quest: the prize and Enter the round take the last two columns together. */
#roles-content .bounty-ledger .bounty-jam > .bounty-qrow {
  grid-column: 3 / span 2;
  grid-row: 1 / span 20;
  order: 0;
  display: grid;
  grid-template-columns: 230px 190px;
  column-gap: var(--jb-gap);
  align-items: start;
  margin: 0;
}
#roles-content .bounty-ledger .bounty-jam .bounty-qrow > .bounty-facts {
  margin: 0;
}
#roles-content .bounty-ledger .bounty-jam .bounty-qrow > .bounty-acts {
  display: grid;
  align-self: center;
  margin: 0;
}
#roles-content .bounty-ledger .bounty-jam .bounty-qrow > .bounty-acts > * {
  box-sizing: border-box;
  width: 100%;
  justify-content: center;
}

/* ---------- picking one up: a short lift onto a hard oak shadow, no glide across the page ---------- */
@media (hover: hover) {
  #roles-content .bounty-ledger .bounty-grid > .bounty-note:not(.bounty-add):hover {
    z-index: 3;
    transform: translateY(-3px);
    box-shadow: 0 4px 0 var(--jb-shadow);
  }
  #roles-content .bounty-ledger .bounty-grid > .bounty-note.bounty-jam:hover {
    box-shadow:
      inset 0 0 0 4px var(--bounty-face),
      inset 0 0 0 5px var(--bounty-gold-line),
      0 4px 0 var(--jb-shadow);
  }
}
#roles-content .bounty-ledger .bounty-grid > .bounty-note:not(.bounty-add):has(:focus-visible) {
  z-index: 3;
  transform: translateY(-3px);
  box-shadow: 0 4px 0 var(--jb-shadow);
}
#roles-content .bounty-ledger .bounty-grid > .bounty-note.bounty-jam:has(:focus-visible) {
  box-shadow:
    inset 0 0 0 4px var(--bounty-face),
    inset 0 0 0 5px var(--bounty-gold-line),
    0 4px 0 var(--jb-shadow);
}
@media (prefers-reduced-motion: reduce) {
  #roles-content .bounty-ledger .bounty-grid > .bounty-note:not(.bounty-add) {
    transition: none;
  }
  #roles-content .bounty-ledger .bounty-grid > .bounty-note:not(.bounty-add):hover,
  #roles-content .bounty-ledger .bounty-grid > .bounty-note:not(.bounty-add):has(:focus-visible) {
    transform: none;
  }
}

/* ---------- a narrower board (the Filters panel open on a laptop, a tablet): three columns ----------
   The plates move under the craft line and the buttons keep the last column, so the title keeps its
   width. The variables sit on the strip and the list, not the board: a container can't query itself. */
@container bountyboard (max-width: 1099.98px) {
  #roles-content .bounty-ledger .jb-head,
  #roles-content .bounty-ledger .bounty-grid {
    --jb-cols: 200px minmax(0, 1fr) 190px;
    --jb-gap: 20px;
  }
  #roles-content .bounty-ledger .jb-head > span:nth-child(3) {
    display: none;
  }
  #roles-content .bounty-ledger .bounty-note > .bounty-facts {
    grid-column: 2;
    grid-row: auto;
    order: 5;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 2px 0 10px;
  }
  #roles-content .bounty-ledger .bounty-note > .bounty-line {
    order: 6;
  }
  #roles-content .bounty-ledger .bounty-note > .role-refs {
    order: 7;
  }
  #roles-content .bounty-ledger .bounty-note > .bounty-trust {
    order: 8;
  }
  #roles-content .bounty-ledger .bounty-note > .bounty-acts {
    grid-column: 3;
  }
  #roles-content .bounty-ledger .bounty-jam > .bounty-qrow {
    grid-column: 3;
    grid-template-columns: minmax(0, 1fr);
    row-gap: 10px;
  }
}

/* A board under 760px wide (the Filters panel open on a 1024px laptop, where the board is about 670px):
   narrower who and button columns, so the quest column keeps about the width the old notices had. */
@container bountyboard (max-width: 759.98px) {
  #roles-content .bounty-ledger .jb-head,
  #roles-content .bounty-ledger .bounty-grid {
    --jb-cols: 160px minmax(0, 1fr) 170px;
    --jb-gap: 16px;
  }
  /* The strip's padding follows the cards' (the 6px band + 14px on the left), so its words sit over
     the plaque and the title. */
  #roles-content .bounty-ledger .jb-head {
    padding: 9px 16px 8px 19px;
  }
  #roles-content .bounty-ledger .bounty-grid > .bounty-note:not(.bounty-add) {
    padding: 18px 16px 20px 14px;
  }
  /* The plaque sits above the words here: beside them, "Posted 9 days ago" and a long studio name
     had under 100px and ran into the gutter or broke mid-word. */
  #roles-content .bounty-ledger .bounty-note > .bounty-who {
    grid-template-columns: minmax(0, 1fr);
    gap: 6px 0;
  }
  #roles-content .bounty-ledger .bounty-note .bounty-when > span {
    white-space: normal;
  }
}

/* ---------- phones: one column per card, title first, the plates in a row, the buttons last ---------- */
@media (max-width: 760px) {
  #roles-content .bounty-board.bounty-ledger {
    margin-inline: 0;
    padding: 0;
    border: 0;
  }
  #roles-content .bounty-board.bounty-ledger .bounty-sign {
    margin-bottom: 12px;
    font-size: 24px;
  }
  #roles-content .bounty-ledger .jb-head {
    display: none;
  }
  #roles-content .bounty-ledger .bounty-grid > .bounty-note:not(.bounty-add) {
    grid-template-columns: minmax(0, 1fr);
    padding: 16px 16px 16px 12px;
  }
  #roles-content .bounty-ledger .bounty-note > * {
    grid-column: 1;
  }
  #roles-content .bounty-ledger .bounty-note > .bounty-who {
    grid-column: 1;
    grid-row: auto;
    margin: 0 0 12px;
    padding: 0 0 10px;
    border-bottom: 1px solid var(--bounty-paper-edge);
  }
  #roles-content .bounty-ledger .bounty-note > .bounty-title {
    font-size: 17px;
  }
  #roles-content .bounty-ledger .bounty-note > .bounty-want {
    margin: 0 0 10px;
  }
  #roles-content .bounty-ledger .bounty-note > .bounty-facts {
    grid-column: 1;
    grid-row: auto;
    order: 5;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 2px 0 10px;
  }
  #roles-content .bounty-ledger .bounty-note > .bounty-line {
    order: 6;
  }
  #roles-content .bounty-ledger .bounty-note > .role-refs {
    order: 7;
  }
  #roles-content .bounty-ledger .bounty-note > .bounty-trust {
    order: 8;
  }
  #roles-content .bounty-ledger .bounty-note > .bounty-acts {
    grid-column: 1;
    grid-row: auto;
    order: 9;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-self: auto;
    margin: 14px 0 0;
  }
  #roles-content .bounty-ledger .bounty-note > .bounty-acts > * {
    width: auto;
  }
  #roles-content .bounty-ledger .bounty-jam > .bounty-qrow {
    grid-column: 1;
    grid-row: auto;
    order: 9;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px 16px;
    margin: 12px 0 0;
  }
  #roles-content .bounty-ledger .bounty-jam .bounty-qrow > .bounty-acts {
    display: flex;
    margin: 0;
  }
  #roles-content .bounty-ledger .bounty-jam .bounty-qrow > .bounty-acts > * {
    width: auto;
  }
  /* The prize and Enter the round share the row when both fit on one line (390px and up); narrower,
     the button drops under the prize instead of each squeezing onto two lines (Safari phone pass, Oct 31). */
  #roles-content .bounty-ledger .bounty-jam .bounty-qrow > *,
  #roles-content .bounty-ledger .bounty-jam .bounty-qrow .gx-btn {
    white-space: nowrap;
  }
}

/* ---------- browsers without container queries (Safari 15 and older): the one-column card ----------
   The widest layout is the base and the narrower steps live in @container blocks, so a browser that
   skips those would squeeze the quest column to nothing between 760px and about 830px of viewport.
   It gets the phone layout at every width instead. */
@supports not (container-type: inline-size) {
  #roles-content .bounty-ledger .jb-head {
    display: none;
  }
  #roles-content .bounty-ledger .bounty-grid > .bounty-note:not(.bounty-add) {
    grid-template-columns: minmax(0, 1fr);
    padding: 16px 16px 16px 12px;
  }
  #roles-content .bounty-ledger .bounty-note > * {
    grid-column: 1;
  }
  #roles-content .bounty-ledger .bounty-note > .bounty-who {
    grid-column: 1;
    grid-row: auto;
    margin: 0 0 12px;
    padding: 0 0 10px;
    border-bottom: 1px solid var(--bounty-paper-edge);
  }
  #roles-content .bounty-ledger .bounty-note > .bounty-facts {
    grid-column: 1;
    grid-row: auto;
    order: 5;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 2px 0 10px;
  }
  #roles-content .bounty-ledger .bounty-note > .bounty-line {
    order: 6;
  }
  #roles-content .bounty-ledger .bounty-note > .role-refs {
    order: 7;
  }
  #roles-content .bounty-ledger .bounty-note > .bounty-trust {
    order: 8;
  }
  #roles-content .bounty-ledger .bounty-note > .bounty-acts {
    grid-column: 1;
    grid-row: auto;
    order: 9;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-self: auto;
    margin: 14px 0 0;
  }
  #roles-content .bounty-ledger .bounty-note > .bounty-acts > * {
    width: auto;
  }
  #roles-content .bounty-ledger .bounty-jam > .bounty-qrow {
    grid-column: 1;
    grid-row: auto;
    order: 9;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px 16px;
    margin: 12px 0 0;
  }
  #roles-content .bounty-ledger .bounty-jam .bounty-qrow > .bounty-acts {
    display: flex;
    margin: 0;
  }
  #roles-content .bounty-ledger .bounty-jam .bounty-qrow > .bounty-acts > * {
    width: auto;
  }
}

/* Offer my <craft> under the board, easier to spot (Bryan, Oct 30: "make it more obvious to hit Offer
   my work", on phones too): a flat sheet with an ink outline, a hard drop and the gold button. */
#roles-content .jb-main > .roles-cta.roles-offer {
  --offer-edge: #1d1d1b;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 20px;
  margin: 8px 4px 4px 0;
  padding: 18px 20px;
  border: 2px solid var(--offer-edge);
  border-radius: 10px;
  background: var(--paper);
  box-shadow: 4px 4px 0 var(--offer-edge);
  font: 700 17px/1.35 'Bricolage Grotesque', 'DM Sans', sans-serif;
}
:root[data-theme='dark'] #roles-content .jb-main > .roles-cta.roles-offer {
  --offer-edge: #050505;
}
@media (max-width: 600px) {
  #roles-content .jb-main > .roles-cta.roles-offer {
    flex-direction: column;
    align-items: stretch;
    padding: 16px;
    font-size: 16px;
  }
}

/* Site cards on phones (Bryan, Nov 4: "for mobile can you make the site ones smaller"). Our own jam and
   the Side quest rounds on the Job board: the crest sits beside its line instead of above it, tighter
   padding, smaller words, and a shorter prize row. The gold frame stays. */
@media (max-width: 760px) {
  #roles-content .bounty-ledger .bounty-grid > .bounty-note.bounty-jam {
    padding: 10px 12px 10px 10px;
  }
  #roles-content .bounty-ledger .bounty-note.bounty-jam > .bounty-who {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 0 8px;
    margin: 0 0 6px;
    padding: 0 0 6px;
  }
  #roles-content .bounty-ledger .bounty-note.bounty-jam > .bounty-who > .bounty-crestlogo {
    width: 26px;
    height: 26px;
    margin: 2px;
  }
  #roles-content .bounty-ledger .bounty-note.bounty-jam .bounty-crestlogo .gx-crest {
    width: 16px;
    height: 18px;
  }
  #roles-content .bounty-ledger .bounty-note.bounty-jam .bounty-who-txt {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0 8px;
    font-size: 13px;
  }
  #roles-content .bounty-ledger .bounty-note.bounty-jam > .bounty-want {
    margin: 0 0 4px;
  }
  #roles-content .bounty-ledger .bounty-note.bounty-jam .bounty-want-txt {
    font-size: 14px;
  }
  #roles-content .bounty-ledger .bounty-note.bounty-jam .bounty-sig {
    width: 20px;
    height: 20px;
  }
  #roles-content .bounty-ledger .bounty-note.bounty-jam > .bounty-title {
    margin-bottom: 0;
    font-size: 15px;
  }
  #roles-content .bounty-ledger .bounty-jam > .bounty-qrow {
    flex-wrap: nowrap;
    margin: 8px 0 0;
    gap: 8px;
  }
  #roles-content .bounty-ledger .bounty-jam .bounty-qrow > .bounty-facts {
    min-width: 0;
  }
  #roles-content .bounty-ledger .bounty-jam .bounty-qrow .gx-chip {
    font-size: 12px;
  }
  #roles-content .bounty-ledger .bounty-jam .bounty-qrow .gx-btn {
    min-height: 44px;
    padding: 6px 10px;
    font-size: 13px;
  }
}
/* role-boost.css */
/* Role Boost (role-boost.js, Bryan Nov 4 2026). Flat: no gradients, no glows, nothing under 11px.
   1. The Boosted row at the top of the Job board: a plain label, then up to three of the board's own
      notices (their card styles come from job-board-ledger.css, since the row sits inside .bounty-ledger
      and uses its own .bounty-grid). Each card carries its own Boosted tag too, so a card that fills a
      phone screen still says it's boosted.
   2. On the studio's own role card: the Boost button, the "Boosted until" line, the full-spots state. */
/* The row has no box of its own: the label stays for screen readers, and each boosted card wears a framed
   purple trim like the Side quest's gold one (Bryan, Nov 4: "make them visually appealing like the site
   ones"), purple so it never reads as one of our own cards, plus one "Boosted" tag. */
#roles-content .bounty-ledger .jb-boosted {
  margin: 0 0 20px;
}
#roles-content .bounty-ledger .jb-boosted-label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
#roles-content .bounty-ledger .jb-boosted .bounty-grid {
  margin: 0;
}
#roles-content .bounty-ledger .jb-boosted .bounty-grid > .bounty-note:not(.bounty-add) {
  --boost-line: color-mix(in oklab, var(--purple) 80%, var(--bounty-face));
  border-width: 2px 2px 2px 6px;
  border-color: var(--purple);
  border-left-color: var(--craft-c);
  box-shadow:
    inset 0 0 0 4px var(--bounty-face),
    inset 0 0 0 5px var(--boost-line);
}
@media (hover: hover) {
  #roles-content .bounty-ledger .jb-boosted .bounty-grid > .bounty-note:not(.bounty-add):hover {
    box-shadow:
      inset 0 0 0 4px var(--bounty-face),
      inset 0 0 0 5px var(--boost-line),
      0 4px 0 var(--jb-shadow);
  }
}
#roles-content .bounty-ledger .jb-boosted .bounty-grid > .bounty-note:not(.bounty-add):has(:focus-visible) {
  box-shadow:
    inset 0 0 0 4px var(--bounty-face),
    inset 0 0 0 5px var(--boost-line),
    0 4px 0 var(--jb-shadow);
}
.boost-tag {
  display: inline-flex;
  align-items: center;
  margin: 0 0 10px;
  padding: 2px 9px;
  border: 1.5px solid var(--purple);
  border-radius: 4px;
  background: color-mix(in oklab, var(--purple) 12%, var(--paper));
  color: var(--purple);
  font: 700 12px/1.5 'DM Sans', system-ui, sans-serif;
}
#roles-content .bounty-ledger .jb-boosted .bounty-flags .boost-tag {
  margin: 0;
  align-self: center;
}
@media (forced-colors: active) {
  #roles-content .bounty-ledger .jb-boosted .bounty-grid > .bounty-note:not(.bounty-add) {
    border-color: CanvasText;
  }
}

/* The studio's own role card. */
.role-boost {
  flex-basis: 100%;
  margin: 10px 0 0;
  padding-top: 10px;
  border-top: 1px dashed var(--line);
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}
/* The button keeps the standard gx-btn size (44px, 13px) like the rest of the card. All spots taken: it
   reads as switched off, with a thin line edge, no drop and muted text, and it doesn't move. */
.role-boost .boost-btn[disabled] {
  --gx-e: var(--line);
  --gx-f: transparent;
  color: var(--muted);
  cursor: default;
  transform: none;
}
.role-boost .boost-btn[disabled]::before {
  display: none;
}
/* The promise (Nov 11) under the button, on its own line. */
.role-boost .boost-promise {
  display: block;
  margin-top: 8px;
  color: var(--ink);
  font-size: 13px;
  line-height: 1.45;
}
/* A refund note with the button right under it: one block. */
.role-boost + .role-boost {
  margin-top: 6px;
  padding-top: 0;
  border-top: 0;
}
.role-boost.is-on {
  color: var(--ink);
  font-weight: 600;
}
.role-boost.is-on .boost-tag {
  margin: 0 6px 0 0;
}
/* Boost first, the hand-picked shortlist right under it as the second offer. */
.role-boost + .shortlist-ask {
  margin-top: 6px;
  padding-top: 0;
  border-top: 0;
}

/* Motion (Bryan, Nov 4: "can you animate the boosted roles"). Same feel as the Side quest seal: the first
   time the board draws on a visit (.jb-boost-intro, devs-ui.js boostIntro), each boosted card's purple frame
   snaps in from wide to tight in three steps, its Boosted tag stamps on, and three pixel sparks pop off the
   tag, one card after the next. Hovering a boosted card makes the tag hop and the sparks pop again. Flat:
   hard edges, no glow, nothing loops. Fill is backwards only, so the hover and focus shadows above still
   win once the intro ends. */
.jb-boosted .boost-tag {
  position: relative;
}
.bt-spark {
  position: absolute;
  top: 3px;
  left: 18%;
  width: 6px;
  height: 6px;
  background: var(--purple);
  outline: 1.5px solid var(--bounty-ink, #2a2118);
  opacity: 0;
  pointer-events: none;
}
.bt-spark:nth-of-type(2) { left: calc(50% - 3px); }
.bt-spark:nth-of-type(3) { left: auto; right: 18%; }
.jb-boost-intro .bounty-grid > .bounty-note:not(.bounty-add) {
  animation: boost-frame 330ms steps(3, end) 120ms backwards;
}
.jb-boost-intro .boost-tag {
  animation: boost-stamp 480ms cubic-bezier(0.2, 0.8, 0.2, 1) 380ms backwards;
}
.jb-boost-intro .bt-spark {
  animation: boost-spark 620ms ease-out 700ms;
}
.jb-boost-intro .bt-spark:nth-of-type(1) { --bt-dx: -9px; }
.jb-boost-intro .bt-spark:nth-of-type(2) { animation-delay: 750ms; }
.jb-boost-intro .bt-spark:nth-of-type(3) { --bt-dx: 9px; animation-delay: 800ms; }
/* One card after the next. */
.jb-boost-intro .bounty-grid > .bounty-note:nth-child(2) { animation-delay: 240ms; }
.jb-boost-intro .bounty-grid > .bounty-note:nth-child(2) .boost-tag { animation-delay: 500ms; }
.jb-boost-intro .bounty-grid > .bounty-note:nth-child(2) .bt-spark { animation-delay: 820ms; }
.jb-boost-intro .bounty-grid > .bounty-note:nth-child(3) { animation-delay: 360ms; }
.jb-boost-intro .bounty-grid > .bounty-note:nth-child(3) .boost-tag { animation-delay: 620ms; }
.jb-boost-intro .bounty-grid > .bounty-note:nth-child(3) .bt-spark { animation-delay: 940ms; }
@media (hover: hover) {
  .jb-boosted .bounty-grid > .bounty-note:hover .boost-tag {
    animation: boost-hop 520ms ease-out;
  }
  .jb-boosted .bounty-grid > .bounty-note:hover .bt-spark {
    animation: boost-spark 620ms ease-out both;
  }
  .jb-boosted .bounty-grid > .bounty-note:hover .bt-spark:nth-of-type(1) { --bt-dx: -9px; }
  .jb-boosted .bounty-grid > .bounty-note:hover .bt-spark:nth-of-type(2) { animation-delay: 50ms; }
  .jb-boosted .bounty-grid > .bounty-note:hover .bt-spark:nth-of-type(3) { --bt-dx: 9px; animation-delay: 100ms; }
}
@keyframes boost-frame {
  from {
    box-shadow:
      inset 0 0 0 16px var(--bounty-face),
      inset 0 0 0 17px var(--boost-line);
  }
  to {
    box-shadow:
      inset 0 0 0 4px var(--bounty-face),
      inset 0 0 0 5px var(--boost-line);
  }
}
@keyframes boost-stamp {
  0% { transform: scale(1.7) rotate(-9deg); opacity: 0; }
  35% { opacity: 1; }
  70% { transform: scale(0.94) rotate(2deg); }
  100% { transform: none; opacity: 1; }
}
@keyframes boost-hop {
  0% { transform: none; }
  35% { transform: translateY(-4px); }
  60% { transform: none; }
  78% { transform: translateY(-1px); }
  100% { transform: none; }
}
@keyframes boost-spark {
  0% { opacity: 0; transform: translate(0, 0); }
  15% { opacity: 1; }
  60% { opacity: 1; transform: translate(var(--bt-dx, 0), -18px); }
  100% { opacity: 0; transform: translate(var(--bt-dx, 0), -10px); }
}
@media (prefers-reduced-motion: reduce) {
  .jb-boost-intro .bounty-grid > .bounty-note:not(.bounty-add),
  .jb-boost-intro .boost-tag,
  .jb-boost-intro .bt-spark,
  .jb-boosted .bounty-grid > .bounty-note:hover .boost-tag,
  .jb-boosted .bounty-grid > .bounty-note:hover .bt-spark {
    animation: none;
  }
}

/* Spotlight (Bryan, Nov 11: "I wanna make boosted ads worth it - flashy animations and spotlight and
   stuff"). Still our flat look, restyled in our tokens: a hard purple offset shadow (DESIGN.md's card)
   that pops out once every 7 seconds, and a flat, hard-edged band of light that sweeps across the card
   right after. No blur, no glow, no gradient. One pop and one sweep per 7 seconds is far under 3 flashes
   a second, and under prefers-reduced-motion everything stands still. Boosted cards on the Job board get
   a bigger title too, and the homes get one big Spotlight card (role-boost.js boostSpotlight). */
:root {
  --boost-sweep: color-mix(in oklab, var(--purple) 16%, transparent);
}
:root[data-theme='dark'] {
  --boost-sweep: color-mix(in oklab, #ffffff 13%, transparent);
}
#roles-content .bounty-ledger .jb-boosted .bounty-grid > .bounty-note:not(.bounty-add) {
  box-shadow:
    inset 0 0 0 4px var(--bounty-face),
    inset 0 0 0 5px var(--boost-line),
    5px 5px 0 var(--purple);
  animation: boost-pop 7s ease-out 2s infinite;
}
#roles-content .bounty-ledger .jb-boosted .bounty-note > .bounty-title {
  font-size: 22px;
}
#roles-content .bounty-ledger .jb-boosted .bounty-grid {
  gap: 18px;
}
/* The sweep: a flat band clipped to a slanted strip that crosses the card. */
#roles-content .bounty-ledger .jb-boosted .bounty-grid > .bounty-note:not(.bounty-add)::before,
.boost-spot::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
  background: var(--boost-sweep);
  clip-path: polygon(-34% 0, -14% 0, -26% 100%, -46% 100%);
  pointer-events: none;
  animation: boost-sweep 7s linear 2.25s infinite;
}
@keyframes boost-pop {
  0%,
  9%,
  100% {
    translate: 0 0;
  }
  3% {
    translate: -3px -3px;
    box-shadow:
      inset 0 0 0 4px var(--bounty-face),
      inset 0 0 0 5px var(--boost-line),
      8px 8px 0 var(--purple);
  }
}
@keyframes boost-sweep {
  0% {
    clip-path: polygon(-34% 0, -14% 0, -26% 100%, -46% 100%);
  }
  16%,
  100% {
    clip-path: polygon(126% 0, 146% 0, 134% 100%, 114% 100%);
  }
}

/* The Spotlight card on the homes: our flat card (ink border, hard purple shadow), the craft's color on
   its left edge, a big title, and the whole card opens the role. */
.boost-spot {
  position: relative;
  isolation: isolate;
  display: grid;
  gap: 6px;
  margin: 0 0 22px;
  padding: 16px 18px 18px;
  border: 2px solid var(--ink);
  border-left: 8px solid var(--boost-craft, var(--purple));
  border-radius: 10px;
  background: var(--paper);
  color: var(--ink);
  box-shadow: 6px 6px 0 var(--purple);
  animation: boost-spot-pop 7s ease-out 2s infinite;
}
/* The same craft colors as the Ledger cards (job-board-ledger.css). */
.boost-spot.craft-music { --boost-craft: #7352bd; }
.boost-spot.craft-sound { --boost-craft: #1f8a97; }
.boost-spot.craft-voice { --boost-craft: #c9652b; }
.boost-spot.craft-art { --boost-craft: #c3447f; }
.boost-spot.craft-vfx { --boost-craft: #3f74c4; }
.boost-spot.craft-writing { --boost-craft: #9c7a3f; }
.boost-spot.craft-editing { --boost-craft: #c1443d; }
.boost-spot.craft-localization { --boost-craft: #78893a; }
.boost-spot.craft-marketing { --boost-craft: #2f8a5b; }
.boost-spot.craft-ui { --boost-craft: #3f6fb0; }
.boost-spot.craft-qa { --boost-craft: #a8562a; }
.boost-spot.craft-dev { --boost-craft: #5f6f84; }
:root[data-theme='dark'] .boost-spot.craft-music { --boost-craft: #b39af0; }
:root[data-theme='dark'] .boost-spot.craft-sound { --boost-craft: #6cc8d3; }
:root[data-theme='dark'] .boost-spot.craft-voice { --boost-craft: #f0996a; }
:root[data-theme='dark'] .boost-spot.craft-art { --boost-craft: #ef8fbd; }
:root[data-theme='dark'] .boost-spot.craft-vfx { --boost-craft: #86b0f0; }
:root[data-theme='dark'] .boost-spot.craft-writing { --boost-craft: #d6b276; }
:root[data-theme='dark'] .boost-spot.craft-editing { --boost-craft: #f08a84; }
:root[data-theme='dark'] .boost-spot.craft-localization { --boost-craft: #b8c86c; }
:root[data-theme='dark'] .boost-spot.craft-marketing { --boost-craft: #74d39d; }
:root[data-theme='dark'] .boost-spot.craft-ui { --boost-craft: #8db4ec; }
:root[data-theme='dark'] .boost-spot.craft-qa { --boost-craft: #eba37a; }
:root[data-theme='dark'] .boost-spot.craft-dev { --boost-craft: #a7b5c7; }
.boost-spot-hit {
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: inherit;
}
.boost-spot-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.boost-spot .boost-tag {
  margin: 0;
}
.boost-spot-pay {
  color: var(--green, #466853);
  font: 700 13px/1.4 'DM Sans', system-ui, sans-serif;
}
.boost-spot-title {
  margin: 2px 0 0;
  font: 700 24px/1.2 'Bricolage Grotesque', 'DM Sans', sans-serif;
  letter-spacing: -0.01em;
  text-wrap: balance;
}
.boost-spot-title a {
  position: relative;
  z-index: 3;
  color: inherit;
  text-decoration: none;
}
.boost-spot:hover .boost-spot-title a,
.boost-spot-title a:focus-visible {
  text-decoration: underline;
}
.boost-spot-by {
  margin: 0;
  color: var(--muted);
  font: 500 14px/1.4 'DM Sans', system-ui, sans-serif;
}
.boost-spot-go {
  justify-self: start;
  margin-top: 6px;
}
@media (max-width: 600px) {
  .boost-spot {
    margin-right: 6px;
  }
  .boost-spot-title {
    font-size: 21px;
  }
  #roles-content .bounty-ledger .jb-boosted .bounty-note > .bounty-title {
    font-size: 20px;
  }
}
@keyframes boost-spot-pop {
  0%,
  9%,
  100% {
    translate: 0 0;
    box-shadow: 6px 6px 0 var(--purple);
  }
  3% {
    translate: -3px -3px;
    box-shadow: 9px 9px 0 var(--purple);
  }
}
@media (prefers-reduced-motion: reduce) {
  #roles-content .bounty-ledger .jb-boosted .bounty-grid > .bounty-note:not(.bounty-add),
  #roles-content .bounty-ledger .jb-boosted .bounty-grid > .bounty-note:not(.bounty-add)::before,
  .boost-spot,
  .boost-spot::before {
    animation: none;
  }
}
/* studio-pin.css */
/* Featured studio (studio-pin.js, Bryan Nov 5 2026). Flat: no gradients, no glows, no motion of its own,
   nothing under 11px. Purple like Boost's Boosted tag, so every paid spot reads the same way.
   1. The spot on the home page: a "Featured studio" tag and "Paid spot", then one or two small cards
      (logo, name, one line, open roles, See the studio). Guest front page (#home-pin, under Studio of the
      day), a creator's Live board (side column), and both phone homes (after the open roles).
   2. On the studio's own page: the buy button, the "Featured until" line with its own card, the booked-up
      line. */
.pin-spot {
  display: grid;
  gap: 10px;
  min-width: 0;
}
.home-pin {
  margin: 0 0 28px;
}
.home-pin[hidden] {
  display: none;
}
.pin-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
}
.pin-head small {
  color: var(--muted);
  font: 600 12px/1.4 'DM Sans', system-ui, sans-serif;
}
.pin-tag {
  display: inline-flex;
  align-items: center;
  padding: 2px 9px;
  border: 1.5px solid var(--purple);
  border-radius: 4px;
  background: color-mix(in oklab, var(--purple) 12%, var(--paper));
  color: var(--purple);
  font: 700 12px/1.5 'DM Sans', system-ui, sans-serif;
}
.pin-cards {
  display: grid;
  gap: 10px;
}
/* Two columns on the wide front page (one studio takes the first, so its card never stretches across the
   page); stacked in the Live board's side column and on phones. */
.home-pin .pin-cards {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.pin-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 4px 12px;
  padding: 12px 14px;
  border: 1.5px solid color-mix(in oklab, var(--purple) 40%, var(--line));
  border-radius: 12px;
  background: var(--paper);
  color: var(--ink);
  text-decoration: none;
}
.pin-card .avatar {
  grid-row: span 2;
  align-self: start;
  width: 48px;
  height: 48px;
  border-width: 0;
  border-radius: 10px;
  font-size: 15px;
}
.pin-txt {
  display: grid;
  gap: 2px;
  min-width: 0;
}
/* The name and the one-line intro wrap instead of being cut, so a phone or the Live board's side column
   shows all of what the studio paid to show. The clamps only catch the impossible: the longest name (60
   characters) takes 3 lines and the longest intro (120) takes 5 at 320px wide. */
.pin-name,
.pin-line {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow-wrap: anywhere;
}
.pin-name {
  font: 700 16px/1.3 'Bricolage Grotesque', 'DM Sans', sans-serif;
}
.pin-line {
  -webkit-line-clamp: 5;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.4;
}
.pin-roles {
  color: var(--ink);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
}
.pin-go {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 28px;
  color: var(--purple);
  font: 700 13px/1 'DM Sans', system-ui, sans-serif;
}
@media (hover: hover) {
  .pin-card:hover {
    border-color: var(--purple);
  }
  .pin-card:hover .pin-go span {
    text-decoration: underline;
    text-underline-offset: 3px;
  }
}
.pin-card:focus-visible {
  outline: 3px solid var(--purple);
  outline-offset: 2px;
}
@media (max-width: 640px) {
  .home-pin .pin-cards {
    grid-template-columns: 1fr;
  }
  .ph-guest .pin-spot,
  .lb-phone .pin-spot {
    margin-top: 18px;
  }
}
@media (forced-colors: active) {
  .pin-card,
  .pin-tag {
    border-color: CanvasText;
  }
}

/* The studio's own page: one block at the end of the side column. */
.pin-panel {
  margin: 16px 0 0;
  padding-top: 14px;
  border-top: 1px dashed var(--line);
  color: var(--muted);
  font-size: 14px;
  line-height: 1.45;
}
.pin-panel p {
  margin: 0 0 10px;
}
.pin-panel p:last-child {
  margin-bottom: 0;
}
.pin-panel .pin-on {
  color: var(--ink);
  font-weight: 600;
}
.pin-panel .pin-on .pin-tag {
  margin: 0 6px 0 0;
}
/* The buy button is the standard gx-btn (44px, 13px). Booked up is a plain line, never a greyed button. */
.pin-date {
  white-space: nowrap;
}
/* The owner's own card while its spot runs or waits: the card guests see, since a signed-in studio never
   gets the home page's spot. */
.pin-own {
  margin: 0 0 10px;
}
.pin-own .pin-card {
  color: var(--ink);
  font-weight: 400;
}
/* role-notice.css */
/* =====================================================================================================
   ROLE SHEETS (Bryan, Oct 30: "I like the layout of the guild one but the look of the flat one").
   A studio's roles on its own page are flat, straight sheets with no wooden board behind them and no
   tilt: a 2px ink outline with a hard drop, like the Guild buttons. Each sheet opens with the Wanted
   strip (the crest, "Wanted" in pixel type and the posted line), then the title, the studio, the
   crafts as outlined chips with their colour squares, flat pay and timeline chips that keep their
   icons, the brief and the same square buttons. Every rule is scoped to #studio-view .role-sheets so
   it wins over the BOUNTY BOARD block in styles.css without !important.
   Markup: devs-ui.js roleCard and roleBoard, bounty-board.js craftChips.
   Mockups: https://claude.ai/artifact/4tFfDiP9YokCd5avqgqjpF (A's look on C's layout).
   ===================================================================================================== */
/* The tokens and the flat fact chips are shared with the Job board's Ledger cards (Bryan, Oct 30:
   "apply the new labels on these ones to the job board"). */
:is(#studio-view .role-sheets, #roles-content .bounty-ledger) {
  --rs-face: #fffefa;
  --rs-edge: #1d1d1b;
  --rs-band: #6b4a2e;
  --rs-band-ink: #f7ecd9;
  --rs-chip-line: #c9cbc1;
  --rs-rev: #f3d27c;
  --rs-rev-ink: #3b2c08;
  --rs-time: #dfe8fb;
  --rs-time-ink: #23417a;
  --rs-human: #e1f0e4;
  --rs-human-ink: #2c5a39;
  --rs-stone: #ecebe4;
  --rs-stone-ink: #3c3f3a;
  --rs-rose: #f8dfe4;
  --rs-rose-ink: #7a2a3c;
  --rs-discuss: #e9e2f7;
  --rs-discuss-ink: #4b3480;
}
#studio-view .role-sheets {
  display: grid;
  gap: 28px;
  margin: 0 0 36px;
  padding: 0 6px 6px 0;
  border: 0;
  box-shadow: none;
  background: none;
}
:root[data-theme='dark'] :is(#studio-view .role-sheets, #roles-content .bounty-ledger) {
  --rs-face: #242623;
  --rs-edge: #050505;
  --rs-band: #3a2818;
  --rs-band-ink: #f3e3c6;
  --rs-chip-line: #4a4e48;
  --rs-rev: #e8b44a;
  --rs-rev-ink: #2a1f05;
  --rs-time: #3b64c4;
  --rs-time-ink: #ffffff;
  --rs-human: #1f3a28;
  --rs-human-ink: #9fe0b1;
  --rs-stone: #34372f;
  --rs-stone-ink: #e4e2d8;
  --rs-rose: #4a2630;
  --rs-rose-ink: #f5c3cf;
  --rs-discuss: #6a4fb0;
  --rs-discuss-ink: #ffffff;
}
#studio-view .role-sheets > .bounty-note {
  --bounty-tilt: 0deg;
  justify-self: stretch;
  width: 100%;
  max-width: none;
  padding: 0 28px 24px;
  border: 2px solid var(--rs-edge);
  border-radius: 10px;
  background: var(--rs-face);
  box-shadow: 4px 4px 0 var(--rs-edge);
  transform: none;
  overflow: hidden;
}
#studio-view .role-sheets > .bounty-note > .bounty-pin {
  display: none;
}

/* The Wanted strip across the top: the crest and "Wanted" on the left, posted and pitches on the right. */
#studio-view .role-sheets .role-band {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 6px 16px;
  margin: 0 -28px 20px;
  padding: 10px 28px;
  border: 0;
  border-bottom: 2px solid var(--rs-edge);
  background: var(--rs-band);
  color: var(--rs-band-ink);
}
#studio-view .role-sheets .role-band-wanted {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font: 400 15px/1 'Silkscreen', ui-monospace, monospace;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
#studio-view .role-sheets .role-band-wanted .gx-ico {
  width: 22px;
  height: 22px;
}
#studio-view .role-sheets .role-band .bounty-when,
#studio-view .role-sheets .role-band .bounty-when * {
  color: var(--rs-band-ink);
  font-size: 13px;
  font-weight: 600;
}
#studio-view .role-sheets .role-band .gx-count {
  --gx-e: var(--rs-band-ink);
  --gx-f: transparent;
}

/* No strip: just the posted line over the title. */
#studio-view .role-sheets.no-band .role-band {
  margin: 0 0 12px;
  padding: 22px 0 10px;
  border-bottom: 2px solid var(--rs-chip-line);
  background: none;
  color: inherit;
}
#studio-view .role-sheets.no-band .role-band-wanted {
  display: none;
}
#studio-view .role-sheets.no-band .role-band .bounty-when,
#studio-view .role-sheets.no-band .role-band .bounty-when * {
  color: var(--bounty-muted);
}
#studio-view .role-sheets.no-band .role-band .gx-count {
  --gx-e: var(--gx-cnt-edge, var(--rs-chip-line));
  --gx-f: var(--gx-cnt, transparent);
}

#studio-view .role-sheets .bounty-title {
  margin: 0 0 14px;
  font-size: 30px;
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

/* The crafts: one outlined chip each, the craft's colour square and its name. */
#studio-view .role-sheets .role-crafts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
}
#studio-view .role-sheets .role-craft {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 30px;
  padding: 3px 12px 3px 3px;
  border: 1.5px solid var(--rs-chip-line);
  border-radius: 6px;
  background: none;
  color: var(--bounty-ink);
  font-size: 13px;
  font-weight: 650;
  line-height: 1.2;
}
#studio-view .role-sheets .role-craft .bounty-sig {
  width: 22px;
  height: 22px;
  border-radius: 3px;
  box-shadow: none;
}

/* Pay, timeline and human-made: flat fills with a thin ink outline, icons kept. */
#studio-view .role-sheets .bounty-facts {
  gap: 8px;
  margin-top: 14px;
}
:is(#studio-view .role-sheets, #roles-content .bounty-ledger) .bounty-facts .gx-chip {
  --rs-f: var(--rs-stone);
  --rs-i: var(--rs-stone-ink);
  min-height: 28px;
  padding: 3px 10px 3px 8px;
  border: 1.5px solid var(--rs-edge);
  border-radius: 6px;
  background: var(--rs-f);
  color: var(--rs-i);
  font-weight: 700;
}
:is(#studio-view .role-sheets, #roles-content .bounty-ledger) .bounty-facts .gx-chip .gx-ico {
  color: currentColor;
}
:is(#studio-view .role-sheets, #roles-content .bounty-ledger) .bounty-facts .gx-k-gold {
  --rs-f: var(--rs-rev);
  --rs-i: var(--rs-rev-ink);
}
:is(#studio-view .role-sheets, #roles-content .bounty-ledger) .bounty-facts .gx-k-time {
  --rs-f: var(--rs-time);
  --rs-i: var(--rs-time-ink);
}
:is(#studio-view .role-sheets, #roles-content .bounty-ledger) .bounty-facts :is(.gx-k-human, .gx-k-open) {
  --rs-f: var(--rs-human);
  --rs-i: var(--rs-human-ink);
}
/* Pay to discuss in the site's purple (Bryan, Oct 30: the grey read as switched off). */
:is(#studio-view .role-sheets, #roles-content .bounty-ledger) .bounty-facts .pay-open {
  --rs-f: var(--rs-discuss);
  --rs-i: var(--rs-discuss-ink);
}
:is(#studio-view .role-sheets, #roles-content .bounty-ledger) .bounty-facts .gx-k-rose {
  --rs-f: var(--rs-rose);
  --rs-i: var(--rs-rose-ink);
}

#studio-view .role-sheets .bounty-brief {
  margin-top: 18px;
  font-size: 16px;
  line-height: 1.55;
}
#studio-view .role-sheets .bounty-acts {
  margin-top: 22px;
}

/* The owner's blank sheet for the next role: dashed, same shape. */
#studio-view .role-sheets > .bounty-add {
  padding: 24px 28px;
  border-style: dashed;
  box-shadow: none;
}

@media (max-width: 760px) {
  #studio-view .role-sheets > .bounty-note {
    padding: 0 18px 20px;
  }
  #studio-view .role-sheets .role-band {
    margin-inline: -18px;
    padding-inline: 18px;
  }
  #studio-view .role-sheets.no-band .role-band {
    margin-inline: 0;
    padding-inline: 0;
  }
  #studio-view .role-sheets .bounty-title {
    font-size: 24px;
  }
}
/* A role with no posted date has nothing to say in the plain version's top row. */
#studio-view .role-sheets.no-band .role-band:not(:has(.bounty-when)) {
  display: none;
}
#studio-view .role-sheets.no-band > .bounty-note:not(:has(.bounty-when)) {
  padding-top: 24px;
}

/* =====================================================================================================
   A ROLE'S OWN PAGE (Bryan, Nov 5: "can we make posts their own page instead of being on a studio's
   home page", mockup A "Notice page"). /s/<studio>/r/<role> is just that role: the sheet above is the
   whole page, then More from the studio (its games and its other open roles) and the way back to the
   Job board. On phones Apply is pinned to the bottom (.role-bar in styles.css), and the body already
   keeps room for it. Every colour is a site token that has its own dark value.
   Markup: devs-ui.js renderRolePage, moreFrom, closedSheet.
   ===================================================================================================== */
#studio-view .role-page {
  max-width: 760px;
  margin: 0 auto;
  padding: 14px 0 8px;
}
#studio-view .role-page > .role-sheets {
  margin: 0;
}
/* The studio line: logo, name and what it is. The one link to the studio's page. */
#studio-view .role-sheets .role-studio-link {
  display: inline-flex;
  max-width: 100%;
  min-height: 44px;
  color: var(--bounty-ink);
  text-decoration: none;
}
/* The arrow follows the name's last word, however many lines a long name takes. */
#studio-view .role-sheets .role-studio-link b {
  display: inline;
}
#studio-view .role-sheets .role-studio-link b .gx-ico {
  display: inline-block;
  margin-left: 6px;
  vertical-align: -2px;
  color: var(--bounty-muted);
}
#studio-view .role-sheets .role-studio-link:hover b span {
  text-decoration: underline;
  text-underline-offset: 3px;
}
#studio-view .role-sheets .role-studio-link:focus-visible {
  outline: 2px solid var(--gx-focus);
  outline-offset: 4px;
}
/* A role that closed: what happened to it, where Apply was. */
#studio-view .role-sheets .role-closed-note {
  margin: 18px 0 0;
  padding: 12px 14px;
  border: 1.5px solid var(--rs-chip-line);
  border-radius: 6px;
  color: var(--bounty-ink);
  font-size: 15px;
  line-height: 1.5;
}
#studio-view .role-sheets .role-closed-note a {
  color: inherit;
  font-weight: 700;
  text-underline-offset: 3px;
}

/* The Wanted strip stays one row on a phone (mockup A): Wanted at the left, the posted line at the
   right, dropping under it only when the two don't fit. */
#studio-view .role-page .bounty-role .bounty-head {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}
/* Apply and Offer my work side by side as they fit, Apply at least as wide as in the mockup. */
#studio-view .role-page .bounty-acts > .role-contacts {
  width: auto;
}
#studio-view .role-page .role-contacts > .gx-btn:first-child {
  flex-basis: auto;
}
#studio-view .role-page .role-contacts > [data-pitch-role] {
  min-width: 168px;
}

/* More from the studio: a quiet row per game (opens its game window) and per other open role (opens
   its own page). */
#studio-view .role-more {
  margin: 34px 6px 0 0;
}
/* The heading, with Follow at its right (under it when a long name leaves no room). */
#studio-view .role-more-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 14px;
  margin: 0 0 12px;
}
#studio-view .role-more-head > .follow-button {
  flex: none;
  min-height: 44px;
}
#studio-view .role-more h2 {
  margin: 0;
  color: var(--ink);
  font: 700 17px/1.3 'Bricolage Grotesque', 'DM Sans', sans-serif;
  overflow-wrap: anywhere;
}
#studio-view .more-rows {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}
#studio-view .more-row {
  display: flex;
  align-items: center;
  gap: 14px;
  box-sizing: border-box;
  width: 100%;
  min-height: 64px;
  padding: 10px 14px 10px 10px;
  border: 1.5px solid var(--line);
  border-radius: 8px;
  background: var(--paper);
  color: var(--ink);
  font: inherit;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
#studio-view .more-row:hover {
  border-color: var(--ink);
}
#studio-view .more-row:focus-visible {
  outline: 2px solid var(--gx-focus);
  outline-offset: 3px;
}
#studio-view .more-row img,
#studio-view .more-row .more-art {
  flex: none;
  width: 92px;
  height: 43px;
  border-radius: 3px;
  background: var(--line);
  object-fit: cover;
}
#studio-view .more-row .more-art {
  display: inline-grid;
  place-items: center;
  color: var(--muted);
}
#studio-view .more-role .more-art {
  width: 36px;
  height: 36px;
  margin: 0 28px;
  border-radius: 4px;
  background: var(--gx-c);
  color: var(--gx-on-colour, #1a1420);
  box-shadow: none;
}
#studio-view .more-txt {
  display: grid;
  gap: 2px;
  min-width: 0;
}
#studio-view .more-txt b {
  font-size: 15px;
  font-weight: 700;
  line-height: 1.25;
  overflow-wrap: anywhere;
}
#studio-view .more-txt span {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.35;
}
#studio-view .more-row > .gx-ico {
  flex: none;
  margin-left: auto;
  color: var(--muted);
}
#studio-view .more-none {
  margin: 10px 0 0;
  color: var(--muted);
  font-size: 14px;
}
/* A closed role's way to reach the studio (Say hi, or the offer for any craft), under its sheet. */
#studio-view .role-page-aside {
  margin: 20px 6px 0 0;
}
#studio-view .role-page-aside > .contact-card {
  margin: 0;
}
#studio-view .role-page-report {
  margin: 14px 0 0;
}
#studio-view .role-page-report .text-button {
  min-height: 44px;
}
#studio-view .role-page-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  margin: 22px 0 0;
  color: var(--muted);
  font: 600 14px/1.2 'DM Sans', system-ui, sans-serif;
  text-decoration: none;
}
#studio-view .role-page-back:hover {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}
#studio-view .role-page-back:focus-visible {
  outline: 2px solid var(--gx-focus);
  outline-offset: 3px;
}
@media (max-width: 760px) {
  #studio-view .role-page {
    padding-top: 10px;
  }
  /* With Apply on the bar, a row of buttons that all stepped aside leaves no gap before Offer my work. */
  #studio-view:has(.role-bar) .role-page .role-contacts:not(:has(> :not([data-pitch-role], [data-discuss], [data-propose-offer], .role-mail, .applied-plate, .applied-chat))) {
    display: none;
  }
  /* The 92px game art leaves the name room on a 320px phone. */
  #studio-view .more-row {
    gap: 12px;
  }
}
@media (max-width: 359px) {
  #studio-view .more-row img,
  #studio-view .more-row .more-art {
    width: 72px;
    height: 34px;
  }
  #studio-view .more-role .more-art {
    width: 32px;
    height: 32px;
    margin: 0 20px;
  }
}
@media (forced-colors: active) {
  #studio-view .more-row {
    border-color: CanvasText;
  }
}
/* signup-join.css */
/* =====================================================================================================
   SIGN-UP DOORS (Bryan, Oct 30: "make it obvious that when you choose game dev you can post hiring
   roles", "it also feels old and not intuitive"; he picked option A of the mockups,
   https://claude.ai/artifact/BshnA3mC13oLiziUq7nhwJ). Step 1 asks "What brings you here?" with two
   flat sheets: Hiring (the oak band, one tap) and Find work (opens step 5, the craft list). Craft
   icons are the pixel squares from the job board; buttons are the square Guild ones.
   Markup: cloud.js joinDoors and joinCrafts. The guest phone home wears the same doors as links
   (phone-shell.js guestHomeMarkup), so it takes the same colours.
   ===================================================================================================== */
#account-form .signup-steps,
.phone-home.ph-guest {
  --join-face: #fffefa;
  --join-edge: #1d1d1b;
  --join-band: #6b4a2e;
  --join-band-ink: #f7ecd9;
  --join-work: #2f4a6b;
  --join-line: #c9cbc1;
  --join-muted: #5a5f58;
  --join-on: #f3d27c;
  --join-on-edge: #9a5a17;
  --join-error: #b42318;
}
:root[data-theme='dark'] #account-form .signup-steps,
:root[data-theme='dark'] .phone-home.ph-guest {
  --join-face: #242623;
  --join-edge: #050505;
  --join-band: #3a2818;
  --join-band-ink: #f3e3c6;
  --join-work: #1f3049;
  --join-line: #4a4e48;
  --join-muted: #c3c6bd;
  --join-on: #3a2f16;
  --join-on-edge: #e8b44a;
  --join-error: #f4a29a;
}
.account-form:has(.join-doors) {
  max-width: 720px;
}

/* Step 5 (the craft list) shows like the other steps. */
#account-form[data-step='5'] > :not(.signup-steps) {
  display: none;
}
#account-form[data-step='5'] [data-step-panel='5'] {
  display: block;
  animation: signup-step-in 0.32s ease both;
}
@media (prefers-reduced-motion: reduce) {
  #account-form[data-step='5'] [data-step-panel='5'] {
    animation: none;
  }
}
.signup-progress:empty {
  display: none;
}
#account-form :is([data-step-panel='1'], [data-step-panel='5']) h3 {
  margin: 0 0 14px;
  font: 800 26px/1.15 'Bricolage Grotesque', 'DM Sans', sans-serif;
  letter-spacing: -0.02em;
}

/* The craft squares, outlined in ink. */
#account-form .signup-steps .bounty-sig {
  display: inline-grid;
  flex: none;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 3px;
  background: var(--gx-c, var(--join-on));
  box-shadow: 0 0 0 1.5px var(--join-edge);
  color: var(--gx-on-colour, #1a1420);
}
#account-form .signup-steps .join-sig-studio {
  --gx-c: #e8b44a;
}

/* The two doors. */
.join-doors {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin: 0;
  padding: 0 4px 4px 0;
  border: 0;
}
#account-form .join-door {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 2px solid var(--join-edge);
  border-radius: 10px;
  background: var(--join-face);
  box-shadow: 4px 4px 0 var(--join-edge);
  color: inherit;
  font: inherit;
  text-align: left;
  overflow: hidden;
  cursor: pointer;
}
.join-door input,
.join-craft input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
@media (hover: hover) and (pointer: fine) {
  #account-form .join-door:hover {
    box-shadow: 6px 6px 0 var(--join-edge);
  }
}
#account-form .join-door:is(:focus-visible, :has(input:focus-visible)) {
  outline: 3px solid var(--join-on-edge);
  outline-offset: 3px;
}
/* The picked door, when they come back to step 1. */
#account-form .join-hire:has(input:checked),
#account-form:has(.join-crafts input:checked) .join-work {
  border-color: var(--join-on-edge);
  box-shadow: 4px 4px 0 var(--join-on-edge);
}
.join-band {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 20px;
  border-bottom: 2px solid var(--join-edge);
  background: var(--join-band);
  color: var(--join-band-ink);
  font: 400 14px/1 'Silkscreen', ui-monospace, monospace;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.join-work .join-band {
  background: var(--join-work);
}
.join-band svg {
  flex: none;
  width: 20px;
  height: 20px;
}
.join-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  padding: 18px 20px 20px;
}
.join-title {
  font: 800 22px/1.15 'Bricolage Grotesque', 'DM Sans', sans-serif;
  letter-spacing: -0.015em;
}
.join-lede {
  color: var(--join-muted);
  font-size: 15px;
  line-height: 1.45;
}
.join-sigs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.join-body .gx-btn {
  margin-top: auto;
  pointer-events: none;
}
.join-note {
  margin: 14px 0 0;
  color: var(--join-muted);
  font-size: 14px;
}
#account-form .join-doors.needs-pick .join-door {
  border-color: var(--join-error);
}

/* Step 5: back, the question, the crafts. */
.join-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 14px;
  padding: 7px 11px;
  border: 1.5px solid var(--join-line);
  border-radius: 6px;
  background: none;
  color: var(--join-muted);
  font: 650 13px/1 'DM Sans', sans-serif;
  cursor: pointer;
}
.join-crafts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 0 0 6px;
  padding: 0 3px 3px 0;
  border: 0;
}
#account-form .join-craft {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 58px;
  padding: 8px 12px 8px 8px;
  border: 1.5px solid var(--join-line);
  border-radius: 8px;
  background: var(--join-face);
  cursor: pointer;
}
#account-form .join-craft .bounty-sig {
  width: 34px;
  height: 34px;
  border-radius: 4px;
}
.join-craft-txt {
  display: grid;
  gap: 2px;
  min-width: 0;
}
.join-craft strong {
  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;
}
.join-craft small {
  color: var(--join-muted);
  font-size: 12px;
  line-height: 1.25;
}
@media (hover: hover) and (pointer: fine) {
  #account-form .join-craft:hover {
    border-color: var(--join-edge);
  }
}
#account-form .join-craft:has(input:focus-visible) {
  outline: 3px solid var(--join-on-edge);
  outline-offset: 2px;
}
.join-tick {
  position: absolute;
  top: 6px;
  right: 6px;
  display: none;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 4px;
  background: var(--join-on-edge);
  color: var(--join-face);
}
#account-form .join-craft:has(input:checked) {
  border: 2px solid var(--join-on-edge);
  background: var(--join-on);
  box-shadow: 3px 3px 0 var(--join-edge);
}
#account-form .join-craft:has(input:checked) .join-tick {
  display: grid;
}
.join-crafts:not(:has(input:checked)) + .signup-main-next {
  display: none;
}

/* The optional "Other work" chips carry the same squares. */
#account-form .signup-also .craft-chip {
  align-items: center;
  gap: 8px;
}
#account-form .signup-also .craft-chip .bounty-sig {
  width: 20px;
  height: 20px;
}

@media (max-width: 760px) {
  #account-form :is([data-step-panel='1'], [data-step-panel='5']) h3 {
    font-size: 22px;
  }
  .join-doors {
    grid-template-columns: 1fr;
  }
  .join-crafts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }
  #account-form .join-craft {
    min-height: 52px;
    gap: 10px;
    padding: 6px 8px 6px 6px;
  }
  #account-form .join-craft .bounty-sig {
    width: 28px;
    height: 28px;
  }
  .join-craft small {
    display: none;
  }
  .join-craft strong {
    font-size: 13px;
  }

  /* The guest phone home's doors (Bryan, Oct 31, picked the guest home mockup): the same plates as
     links, a size down so both fit on the first screen. Hiring opens the sign-up with the studio
     picked; Find work opens the Job board. */
  .ph-doors {
    display: grid;
    gap: 16px;
    padding: 0 4px 4px 0;
  }
  .ph-guest .join-door {
    display: flex;
    flex-direction: column;
    border: 2px solid var(--join-edge);
    border-radius: 10px;
    background: var(--join-face);
    box-shadow: 4px 4px 0 var(--join-edge);
    color: var(--ink);
    text-decoration: none;
    overflow: hidden;
    -webkit-tap-highlight-color: transparent;
  }
  .ph-guest .join-door:active {
    box-shadow: 2px 2px 0 var(--join-edge);
    transform: translate(2px, 2px);
  }
  .ph-guest .join-door:focus-visible {
    outline: 3px solid var(--join-on-edge);
    outline-offset: 3px;
  }
  .ph-guest .join-band {
    padding: 9px 16px;
    font-size: 13px;
  }
  .ph-guest .join-body {
    gap: 10px;
    padding: 14px 16px 16px;
  }
  .ph-guest .join-title {
    font-size: 20px;
  }
  .ph-guest .join-sigs {
    gap: 5px;
  }
  .ph-guest .join-sigs .bounty-sig {
    width: 20px;
    height: 20px;
  }
  .ph-guest .join-body .gx-btn {
    min-height: 46px;
    padding: 10px 16px;
    font-size: 15px;
  }
}

/* Step 4's picked line (Bryan, Oct 30: the Change button "needs to be bigger and obvious"): the pick in
   a flat sheet with a real Guild button to change it. */
#account-form[data-step='4'] .signup-picked {
  gap: 10px 14px;
  padding: 12px 14px;
  border: 2px solid var(--join-edge);
  border-radius: 10px;
  background: var(--join-face);
  box-shadow: 3px 3px 0 var(--join-edge);
}
#account-form .signup-picked #signup-role-summary {
  font: 800 18px/1.2 'Bricolage Grotesque', 'DM Sans', sans-serif;
}
#account-form .signup-picked .join-change {
  min-height: 40px;
  padding: 8px 14px;
  font-size: 14px;
}
#account-form .signup-picked .text-button {
  flex-basis: 100%;
  justify-self: start;
  text-align: left;
}
/* live-board.css */
/* ================================================================ LIVE BOARD
   The signed-in home (live-board.js; Bryan, Nov 2: "Combine B and C ... for studio / for creator go
   with B"). Creators: B's live list of the newest roles, the Role queue and the studios hiring now.
   Studios: C's gold pinned Post a role card over B's new creators list and side panels. Tokens only.
   Phones get the same board stacked for one thumb in #phone-home (.lb-phone, the PHONE block at the end). */
.lb-home {
  --lb-enter: cubic-bezier(0.16, 1, 0.3, 1);
  --lb-premium: cubic-bezier(0.22, 1, 0.36, 1);
  --lb-move: cubic-bezier(0.76, 0, 0.24, 1);
  --lb-pop: cubic-bezier(0.34, 1.56, 0.64, 1);
  --lb-item: 240ms;
  --lb-fade: 300ms;
  --lb-hero: 720ms;
  --lb-stagger: 80ms;
  --lb-lead: 150ms;
}
.home-welcome.lb-home {
  margin: 28px 0 40px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
}
.lb-home h1,
.lb-home h2,
.lb-home h3 {
  margin: 0;
  font-family: 'Bricolage Grotesque', 'DM Sans', sans-serif;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.lb-home p {
  margin: 0;
}
.lb-hello {
  margin-bottom: 22px;
}
.lb-hello h1 {
  font-size: 40px;
  font-weight: 750;
  line-height: 1.1;
}
.lb-hello p {
  margin-top: 8px;
  max-width: 60ch;
  color: var(--muted);
  font-size: 16px;
}
.lb-hello p b {
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.lb-home .quest-band {
  margin-bottom: 22px;
}
.lb-board {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 28px;
  align-items: start;
}
.lb-feed,
.lb-quest-l,
.lb-quest-r {
  min-width: 0;
}
.lb-feed-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 16px;
  margin-bottom: 12px;
}
.lb-feed-head h2,
.lb-row-head h2 {
  font-size: 22px;
  font-weight: 700;
}
.lb-panel h3 {
  font-size: 20px;
  font-weight: 700;
}
.lb-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.lb-tabs button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 34px;
  padding: 6px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: none;
  color: var(--muted);
  font: 600 13px/1 'DM Sans', sans-serif;
  white-space: nowrap;
  cursor: pointer;
  transition: transform 120ms var(--lb-enter);
}
.lb-tabs button b {
  color: var(--ink);
  font-weight: 700;
}
.lb-tabs button[aria-pressed='true'] {
  border-color: var(--ink);
  background: var(--ink);
  color: var(--bg);
}
.lb-tabs button[aria-pressed='true'] b {
  color: var(--bg);
}
.lb-tabs button:active {
  transform: translateY(1px);
}

/* the live list */
.lb-roles {
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--paper);
  list-style: none;
}
.lb-role,
.lb-person {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  padding: 14px 16px;
  border-top: 1px solid var(--line);
}
.lb-role:first-child,
.lb-person:first-child {
  border-top: 0;
}
.lb-role-main,
.lb-person-main {
  min-width: 0;
}
.lb-role-title {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  color: var(--ink);
  font: 650 16px/1.3 'Bricolage Grotesque', sans-serif;
  text-decoration: none;
}
/* The whole row opens the role or the profile; the buttons are pointers for the mouse. */
.lb-role-title::after {
  content: '';
  position: absolute;
  inset: 0;
}
.lb-person-act .gx-heart {
  position: relative;
  z-index: 1;
}
.lb-role:has(.lb-role-title:focus-visible),
.lb-person:has(.lb-role-title:focus-visible) {
  background: var(--soft);
}
.lb-role-meta {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  margin-top: 2px;
  color: var(--muted);
  font-size: 13px;
}
.lb-when {
  color: var(--green);
  font-weight: 600;
}
.lb-role-tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
}
.lb-role-tags .lb-role-meta {
  margin: 0 0 0 4px;
}
.lb-role > .studio-logo {
  width: 48px;
  height: 48px;
  border-radius: 0;
  font-size: 16px;
}
.lb-person-tag {
  margin-top: 1px;
  overflow: hidden;
  color: var(--muted);
  font-size: 14px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.lb-face {
  display: block;
  flex: none;
}
.lb-face .avatar {
  width: 52px;
  height: 52px;
  font-size: 18px;
}
.lb-person-act {
  display: flex;
  align-items: center;
  gap: 6px;
}
.lb-person-act .gx-btn:not(.gx-sq),
.lb-apply {
  min-width: 76px;
}
.lb-more,
.lb-row-head a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  color: var(--purple);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
}
.lb-more {
  margin-top: 4px;
}
.lb-more .gx-ico,
.lb-row-head a .gx-ico {
  fill: currentColor;
  transition: transform 110ms var(--lb-move);
}
.lb-none {
  padding: 18px;
  border: 1px dashed var(--line);
  border-radius: 12px;
  color: var(--muted);
}

/* side panels */
.lb-side {
  display: grid;
  gap: 18px;
}
.lb-panel {
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--paper);
}
.lb-panel > p {
  margin-top: 8px;
  color: var(--muted);
  font-size: 14px;
}
.lb-queue {
  margin: 0 6px 6px 0;
  border: 2px solid var(--ink);
  box-shadow: 6px 6px 0 var(--gx-cta);
}
.lb-qhead {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-bottom: 16px;
}
.lb-qhead p {
  margin-top: 2px;
  color: var(--muted);
  font-size: 14px;
}
.gx-btn.lb-big {
  width: calc(100% - 2px);
  min-height: 52px;
  font-size: 16px;
}
.gx-btn.lb-wide {
  width: calc(100% - 2px);
  margin-top: 14px;
}
.lb-priv-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.lb-num {
  color: var(--muted);
  font-size: 13px;
}
.lb-bar {
  height: 6px;
  margin-top: 12px;
  background: var(--line);
}
.lb-bar i {
  display: block;
  height: 100%;
  background: var(--gx-cta);
}
.lb-fold {
  margin-top: 12px;
  font-size: 14px;
}
.lb-fold summary {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 32px;
  color: var(--ink);
  font-weight: 600;
  list-style: none;
  cursor: pointer;
}
.lb-fold summary::-webkit-details-marker {
  display: none;
}
.lb-fold summary::before {
  content: '';
  border: 5px solid transparent;
  border-right: 0;
  border-left: 7px solid currentColor;
  transition: transform 110ms var(--lb-move);
}
.lb-fold[open] summary::before {
  transform: rotate(90deg);
}
.lb-fold ul {
  display: grid;
  gap: 4px;
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
}
.lb-fold a {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 32px;
  color: var(--muted);
  text-decoration: none;
}
.lb-fold li.is-done a {
  color: var(--muted);
  text-decoration: line-through;
}
.lb-dot {
  display: grid;
  flex: none;
  place-items: center;
  width: 14px;
  height: 14px;
  box-sizing: border-box;
  border: 2px solid var(--gx-line);
  border-radius: 50%;
}
.is-done .lb-dot {
  border-color: var(--green);
  background: var(--green);
  color: var(--bg);
}
.lb-dot .gx-ico {
  fill: currentColor;
}
.lb-empty {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-top: 12px;
}
.lb-empty p {
  color: var(--muted);
  font-size: 14px;
}
.lb-empty .gx-tslot {
  color: var(--muted);
}
.lb-app-list {
  display: grid;
  gap: 4px;
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
}
.lb-app {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 52px;
  color: var(--ink);
  text-decoration: none;
}
.lb-app-txt {
  display: grid;
  flex: 1;
  min-width: 0;
}
.lb-app-txt small {
  overflow: hidden;
  color: var(--muted);
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.lb-app .gx-ico {
  fill: var(--muted);
}
/* A role's wait mark: gold while creators wait on the studio, red after six days (Nov 3). */
.lb-wait {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  vertical-align: 1px;
  color: var(--ink);
  background: color-mix(in srgb, var(--ann-gold) 22%, var(--paper));
}
.lb-app.is-late .lb-wait {
  background: color-mix(in srgb, var(--ann-red) 18%, var(--paper));
}
.lb-app.is-late small {
  color: var(--ann-red);
  white-space: normal;
}
.lb-faces {
  display: flex;
  flex: none;
}
.lb-faces .avatar {
  width: 32px;
  height: 32px;
  margin-left: -10px;
  box-shadow: 0 0 0 2px var(--paper);
  font-size: 12px;
}
.lb-faces .avatar:first-child {
  margin-left: 0;
}
.lb-quick {
  display: grid;
}
.lb-quick a {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 0 4px;
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
}
.lb-quick .gx-ico {
  fill: currentColor;
}

/* studio row on the creator home, and the gold Hiring now strip everywhere */
.lb-row {
  margin-top: 44px;
}
.lb-row-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.lb-scroller {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}
.sc {
  --lb-lift: 2px;
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  border: 2px solid var(--gx-cta);
  background: var(--paper);
  transition: transform 80ms steps(2, end);
}
/* The pixel lift: the face steps up and left while a hard gold L stays put behind it. */
.sc::after {
  content: '';
  position: absolute;
  top: 0;
  right: calc(-2 * var(--lb-lift));
  bottom: calc(-2 * var(--lb-lift));
  left: 0;
  background:
    linear-gradient(var(--gx-cta) 0 0) 100% 0 / var(--lb-lift) 100% no-repeat,
    linear-gradient(var(--gx-cta) 0 0) 0 100% / 100% var(--lb-lift) no-repeat;
  transform: translate(calc(-1 * var(--lb-lift)), calc(-1 * var(--lb-lift)));
  transition: transform 80ms steps(2, end);
  pointer-events: none;
}
.sc-art {
  display: block;
  aspect-ratio: 16 / 7;
  overflow: hidden;
  background: var(--gx-tag);
}
.sc-art img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.sc-art .landscape {
  height: 100%;
}
.sc-strip {
  padding: 10px 14px 12px;
  background: var(--gx-cta);
  color: var(--gx-on-colour);
}
.sc-strip-top {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
}
.sc-strip-top .gx-ico {
  fill: currentColor;
}
.sc-strip-top strong {
  font: 800 17px/1.1 'Bricolage Grotesque', sans-serif;
}
.sc-count {
  margin-left: auto;
  padding: 3px 8px;
  background: var(--gx-on-colour);
  color: var(--gx-cta);
  font: 700 12px/1.2 'DM Sans', sans-serif;
  white-space: nowrap;
}
.sc-crafts {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 9px 0 0;
}
.sc-cp {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 24px;
  padding: 0 8px 0 0;
  background: var(--gx-plate);
  box-shadow: inset 0 0 0 2px var(--gx-on-colour);
  color: var(--gx-ink);
  font: 700 12px/1 'Bricolage Grotesque', sans-serif;
  white-space: nowrap;
}
.sc-sig {
  display: grid;
  place-items: center;
  align-self: stretch;
  width: 24px;
  background: var(--gx-c);
  box-shadow: inset 0 0 0 2px var(--gx-on-colour);
  color: var(--gx-on-colour);
}
.sc-sig .gx-ico {
  fill: currentColor;
}
.sc-cp.sc-more {
  padding: 0 8px;
}
.sc-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 10px;
  padding: 14px;
}
.sc-name {
  display: flex;
  align-items: center;
  gap: 10px;
}
.sc-name .studio-logo {
  width: 40px;
  height: 40px;
  border-radius: 0;
}
.sc-name h3 {
  font-size: 18px;
  font-weight: 700;
  line-height: 1.2;
  overflow-wrap: anywhere;
}
.sc-name h3 a {
  color: inherit;
  text-decoration: none;
}
.sc-tag {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  color: var(--muted);
  font-size: 14px;
}
.sc-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.sc-act {
  display: flex;
  margin-top: auto;
  padding-top: 4px;
}
.sc-act .sc-go {
  flex: 1;
  justify-content: space-between;
}
.sc-go .gx-ico {
  fill: currentColor;
}
/* Find work's cards: a hiring one wears the gold frame and strip, the rest stay quiet. */
.work-game.is-hiring {
  border: 2px solid var(--gx-cta);
}
.work-game > .sc-strip {
  margin-top: 0;
}
/* The logo sits on the art's edge on a quiet card; under the strip it sits in the body instead. */
.work-game.is-hiring .role-studio {
  margin-top: 14px;
  align-items: center;
}

/* ---------------------------------------------------------------- C's pinned Post a role card */
.lb-quest-wrap {
  position: relative;
  margin: 18px 8px 40px 0;
}
.lb-quest-pin {
  position: absolute;
  z-index: 1;
  top: -16px;
  left: 32px;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  background: var(--ann-red);
  box-shadow: 0 0 0 2px var(--gx-edge);
  color: var(--gx-on-colour);
}
.lb-quest-pin .gx-ico {
  fill: currentColor;
}
.lb-quest {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: 28px 44px;
  align-items: start;
  padding: 34px 36px 32px;
  border: 3px solid var(--gx-edge);
  background: var(--gx-cta);
  box-shadow: 8px 8px 0 var(--gx-drop);
  color: var(--gx-on-colour);
}
.lb-home .lb-quest h2 {
  color: var(--gx-on-colour);
  font-size: 56px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.02em;
}
.lb-quest-l > p {
  max-width: 30em;
  margin: 14px 0 22px;
  font-size: 17px;
  font-weight: 500;
  line-height: 1.45;
}
.lb-quest-go {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
}
.gx-btn.lb-quest-btn {
  --gx-f: var(--gx-edge);
  --gx-e: var(--gx-edge);
  --gx-d: 4px;
  min-height: 56px;
  padding: 14px 22px;
  color: var(--gx-cta);
  font-size: 18px;
}
.lb-quest-btn .gx-ico {
  fill: currentColor;
}
.lb-free {
  font-size: 14px;
  font-weight: 600;
}
.lb-quest-faces {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 18px;
  font-size: 13px;
  font-weight: 600;
}
.lb-quest-faces .avatar {
  width: 30px;
  height: 30px;
  margin-left: -4px;
  border-radius: 0;
  box-shadow: 0 0 0 2px var(--gx-edge);
}
.lb-who-h {
  margin: 4px 0 12px;
  font: 700 14px/1.3 var(--gx-font);
}
.lb-who {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.lb-who a {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  box-sizing: border-box;
  padding: 6px 10px 6px 6px;
  background: color-mix(in srgb, var(--gx-cta), #fffefa 55%);
  box-shadow: 0 0 0 2px var(--gx-edge);
  color: var(--gx-on-colour);
  font: 700 14px/1.2 var(--gx-font);
  text-decoration: none;
}
.lb-who .gx-sigil {
  width: 30px;
  height: 30px;
  margin: 0;
  box-shadow: 0 0 0 2px var(--gx-edge);
}
.lb-who .gx-sigil .gx-ico {
  fill: currentColor;
}
.lb-who-t {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.lb-who small {
  margin-left: auto;
  font: 600 12px/1 'DM Sans', sans-serif;
  opacity: 0.75;
}

/* hovers, presses and focus */
@media (hover: hover) and (pointer: fine) {
  .lb-tabs button:not([aria-pressed='true']):hover {
    border-color: var(--ink);
    color: var(--ink);
  }
  .lb-role:hover,
  .lb-person:hover {
    background: var(--soft);
  }
  .lb-more:hover,
  .lb-row-head a:hover,
  .lb-fold summary:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
  }
  .lb-more:hover .gx-ico,
  .lb-row-head a:hover .gx-ico {
    transform: translateX(3px);
    transition-duration: 200ms;
  }
  .lb-quick a:hover,
  .lb-fold a:hover {
    color: var(--ink);
  }
  .lb-who a:hover {
    background: var(--gx-plate);
    color: var(--gx-ink);
  }
  .sc:hover {
    transform: translate(calc(-1 * var(--lb-lift)), calc(-1 * var(--lb-lift)));
    transition-duration: 140ms;
  }
  .sc:hover::after {
    transform: none;
    transition-duration: 140ms;
  }
}
.lb-who a:focus-visible {
  outline: 3px solid var(--gx-edge);
  outline-offset: 2px;
}
.sc:has(:focus-visible) {
  transform: translate(calc(-1 * var(--lb-lift)), calc(-1 * var(--lb-lift)));
}
.sc:has(:focus-visible)::after {
  transform: none;
}

/* ---------------------------------------------------------------- arrival, once per visit
   live-board.js adds lb-arrive the first time the board has its data. Transform and opacity only. */
@media (prefers-reduced-motion: no-preference) {
  .lb-arrive .lb-hello {
    animation: lb-fade var(--lb-fade) var(--lb-enter) backwards;
  }
  .lb-arrive :is(.lb-quest-wrap, .lb-queue) {
    animation: lb-rise-hero var(--lb-hero) var(--lb-premium) backwards;
  }
  .lb-arrive .lb-roles > li {
    animation: lb-slot var(--lb-item) var(--lb-enter) calc(var(--lb-lead) + var(--i, 0) * var(--lb-stagger)) backwards;
  }
  .lb-arrive :is(.lb-feed-head, .lb-more, .lb-row-head, .lb-quick, :is(.lb-side, .lb-stack) > .lb-panel:not(.lb-queue)) {
    animation: lb-fade var(--lb-fade) var(--lb-enter) var(--lb-lead) backwards;
  }
  .lb-arrive .sc {
    animation: lb-rise var(--lb-item) var(--lb-enter) calc(2 * var(--lb-lead) + var(--i, 0) * var(--lb-stagger)) backwards;
  }
  /* The Hiring now plaque pops once, when its card is most of the way in. */
  .lb-arrive .sc .sc-strip-top {
    transform-origin: 0 50%;
    animation: lb-pop 260ms var(--lb-pop) calc(2 * var(--lb-lead) + var(--i, 0) * var(--lb-stagger) + 150ms) backwards;
  }
  /* The one idle loop: Post a role steps up a pixel at a time, slowly, only while it's on screen.
     It holds still while you hover or focus anything in its card. */
  .gx-btn.lb-quest-btn.lb-bob {
    animation: lb-bob 3600ms step-end 1400ms infinite;
  }
  .lb-quest:is(:hover, :focus-within) .lb-quest-btn.lb-bob {
    animation-play-state: paused;
  }
}
@keyframes lb-rise-hero {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
}
@keyframes lb-rise {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
}
@keyframes lb-slot {
  from {
    opacity: 0;
    transform: translateX(-12px);
  }
}
@keyframes lb-fade {
  from {
    opacity: 0;
  }
}
@keyframes lb-pop {
  from {
    transform: scale(0.92);
  }
}
@keyframes lb-bob {
  0%,
  100% {
    translate: 0 0;
  }
  16.667% {
    translate: 0 -1px;
  }
  33.333% {
    translate: 0 -2px;
  }
  66.667% {
    translate: 0 -1px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .lb-home *,
  .sc,
  .sc::after {
    transition: none !important;
    animation: none !important;
  }
  .sc:hover,
  .sc:has(:focus-visible) {
    transform: none;
  }
}

/* The board says it all, so on a studio's home the old "just joined" row steps aside, and on Find work
   the Before your first proposal steps fold into the board's checklist. */
@media (min-width: 761px) {
  #discover-view:has(> #home-welcome.lb-home:not([hidden])) #active-row,
  #work-view:has(> #home-welcome.lb-home:not([hidden])) .work-steps {
    display: none;
  }
}
@media (max-width: 1100px) {
  .lb-quest {
    grid-template-columns: minmax(0, 1fr);
  }
}
@media (max-width: 960px) {
  .lb-board {
    grid-template-columns: minmax(0, 1fr);
  }
  .lb-side {
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    align-items: start;
  }
  .lb-scroller {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .lb-scroller > .sc:nth-child(3) {
    display: none;
  }
}
@media (max-width: 760px) {
  .lb-hello h1 {
    font-size: 30px;
  }
  .lb-quest {
    padding: 30px 18px 22px;
    box-shadow: 5px 5px 0 var(--gx-drop);
  }
  .lb-home .lb-quest h2 {
    font-size: 40px;
  }
  .gx-btn.lb-quest-btn {
    width: calc(100% - 4px);
  }
  .lb-role,
  .lb-person {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
  }
  .lb-apply,
  .lb-person-act > a {
    display: none !important;
  }
  .lb-scroller {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ---------------------------------------------------------------- PHONE
   The same board in #phone-home, one column for the thumb (Bryan, Nov 2, on the old phone home: "it
   just looks weird"). Creators: Role queue, the private checklist, the newest roles, then the studios
   hiring side by side. Studios: Post a role with six crafts, applicants, the checklist, new creators,
   shortcuts. The wide board stays in the page for wider screens, hidden here. */
@media (max-width: 760px) {
  #home-welcome.lb-home {
    display: none !important;
  }
  .phone-home.lb-phone {
    --lb-gut: max(18px, env(safe-area-inset-left));
    display: flex;
    flex-direction: column;
    gap: 22px;
    padding: 20px 0 8px;
  }
  .lb-phone > * {
    margin: 0;
  }
  .lb-phone .lb-hello h1 {
    font-size: 30px;
  }
  .lb-phone .lb-hello p {
    margin-top: 6px;
    font-size: 15px;
    line-height: 1.45;
  }
  .lb-phone .lb-stack {
    display: grid;
    gap: 16px;
  }
  .lb-phone .lb-panel {
    padding: 16px;
  }
  .lb-phone .lb-queue {
    margin: 0 6px 6px 0;
  }

  /* Post a role: the pin, the title, one line, the big button, then six crafts two by two. */
  .lb-phone .lb-quest-wrap {
    margin: 14px 5px 5px 0;
  }
  .lb-phone .lb-quest-pin {
    left: 20px;
  }
  .lb-phone .lb-quest {
    gap: 18px;
    padding: 28px 16px 18px;
  }
  .lb-phone.lb-home .lb-quest h2 {
    font-size: 36px;
  }
  .lb-phone .lb-quest-l > p {
    margin: 10px 0 16px;
    font-size: 16px;
  }
  .lb-phone .lb-quest-faces {
    margin-top: 14px;
  }
  .lb-phone .lb-who-h {
    margin: 0 0 10px;
  }
  .lb-phone .lb-who {
    gap: 8px;
  }
  .lb-phone .lb-who a {
    min-height: 48px;
    gap: 8px;
    padding-right: 8px;
    font-size: 14px;
  }
  /* The whole craft name, on two lines if it needs them; the counts are for wider screens. */
  .lb-phone .lb-who-t {
    display: -webkit-box;
    white-space: normal;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-height: 1.15;
  }
  .lb-phone .lb-who small {
    display: none;
  }
  .lb-phone .lb-who .gx-sigil {
    width: 26px;
    height: 26px;
  }
  .lb-phone .lb-quest-faces .avatar:nth-child(n + 5) {
    display: none;
  }

  /* The lists: headings over their tabs, the tabs slide sideways, every row opens with one tap. */
  .lb-phone .lb-feed-head {
    display: grid;
    gap: 10px;
  }
  .lb-phone .lb-feed-head h2,
  .lb-phone .lb-row-head h2 {
    font-size: 20px;
  }
  .lb-phone .lb-tabs {
    flex-wrap: nowrap;
    margin-inline: calc(-1 * var(--lb-gut));
    padding: 2px var(--lb-gut);
    overflow-x: auto;
    scrollbar-width: none;
    overscroll-behavior-x: contain;
  }
  .lb-phone .lb-tabs::-webkit-scrollbar {
    display: none;
  }
  .lb-phone .lb-tabs button {
    min-height: 40px;
    flex: none;
  }
  .lb-phone .lb-role,
  .lb-phone .lb-person {
    gap: 12px;
    padding: 14px;
  }
  .lb-phone .lb-role > .studio-logo {
    width: 44px;
    height: 44px;
  }
  .lb-phone .lb-person-act {
    align-self: center;
  }
  .lb-phone .lb-person {
    grid-template-columns: auto minmax(0, 1fr) auto;
  }
  .lb-phone .lb-person-tag {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
  }
  .lb-phone .lb-more {
    min-height: 44px;
  }

  /* Studios hiring now: the cards slide sideways and snap, with the next one peeking in. */
  .lb-phone .lb-row-head {
    margin-bottom: 10px;
  }
  .lb-phone .lb-scroller {
    display: flex;
    gap: 14px;
    margin-inline: calc(-1 * var(--lb-gut));
    padding: 2px var(--lb-gut) 8px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--lb-gut);
    scrollbar-width: none;
    overscroll-behavior-x: contain;
  }
  .lb-phone .lb-scroller::-webkit-scrollbar {
    display: none;
  }
  .lb-phone .lb-scroller > .sc,
  .lb-phone .lb-scroller > .sc:nth-child(3) {
    display: flex;
    flex: 0 0 84%;
    scroll-snap-align: start;
  }

  /* Shortcuts as tiles, two by two; one left alone on its row (the Market) runs the full width. */
  .lb-phone .lb-quick {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }
  .lb-phone .lb-quick a:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }
  .lb-phone .lb-quick a {
    min-height: 52px;
    padding: 0 12px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--paper);
    color: var(--ink);
  }
}

/* Browse creators (#directory) is its own page for a studio too (Bryan's Nov 2 recording: the nav said
   Browse creators while the page showed the Home board). Phones already did this (data-browse). */
html[data-browse] #discover-view > #home-welcome.lb-home {
  display: none !important;
}

/* A member's front page drops the pitch to visitors (Bryan's Nov 2 recording: a studio's Home ran on
   through the testimonials, the founder note and the join banner), and a studio's drops "Studios
   looking for creators", which is for people looking for work. */
html[data-account] #discover-view > :is(.member-quotes, .founder-note, .join-banner),
html[data-account][data-side='dev'] #discover-view > #home-roles {
  display: none !important;
}
/* shop.css */
/* The Shop on creator profiles (shop-ui.js). It's one of the page's sections, so it wears the creator's
   card style, colour (--me) and black and white like the rest. Its own storefront on top: a sign in
   their colour, the shopkeeper, the bell. No awnings (Bryan, Nov 11: "those just make it feel
   cluttered"). Flat fills and hard edges only, tokens only so dark mode follows. */
.shop-section[hidden] {
  display: none;
}
.shop-front {
  display: grid;
  gap: 12px;
  margin-bottom: 16px;
}
.shop-front-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
}
.shop-sign {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  min-width: 0;
  margin: 0 4px 4px 0;
  padding: 8px 14px;
  border: 2px solid var(--ink);
  border-radius: 8px;
  background: var(--paper);
  box-shadow: 3px 3px 0 var(--gx-drop);
}
.shop-sign .shop-sign-name,
#profile-view .shop-section .shop-sign .shop-sign-name {
  margin: 0;
  color: var(--ink);
  font: 700 20px/1.2 'Bricolage Grotesque', 'DM Sans', sans-serif;
  overflow-wrap: anywhere;
}
#profile-view .shop-section .shop-front:not([data-sign='plain']) .shop-sign .shop-sign-name::after {
  display: none;
}
/* Plain, where every shop starts: no board at all. The name is the section's own heading with its
   underline, like About or Tracks, so a shop nobody dressed up looks like the rest of the page. */
.shop-front[data-sign='plain'] .shop-sign {
  align-items: baseline;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
}
.shop-front[data-sign='plain'] .shop-sign .shop-sign-name,
#profile-view .shop-section .shop-front[data-sign='plain'] .shop-sign .shop-sign-name {
  font: inherit;
  font-family: 'Bricolage Grotesque', 'DM Sans', sans-serif;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.2;
}
.shop-front-preview .shop-front[data-sign='plain'] .shop-sign-name::after,
.market-stall .shop-front[data-sign='plain'] .shop-sign-name::after {
  content: '';
  display: block;
  width: 32px;
  height: 3px;
  margin-top: 8px;
  border-radius: 2px;
  background: var(--me, var(--purple));
}
.shop-front[data-sign='plain'] {
  gap: 6px;
}
/* Pixel: square, with the corners stepped out the way pixel art rounds them. */
.shop-front[data-sign='pixel'] .shop-sign {
  margin: 3px 7px 7px 3px;
  border: 0;
  border-radius: 0;
  box-shadow:
    -3px 0 0 var(--ink),
    3px 0 0 var(--ink),
    0 -3px 0 var(--ink),
    0 3px 0 var(--ink),
    6px 3px 0 var(--gx-drop),
    3px 6px 0 var(--gx-drop);
}
.shop-word {
  flex: none;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--me, var(--purple));
  color: var(--me-on, #fff);
  font: 700 11px/1.45 'DM Sans', sans-serif;
}
.shop-bell {
  flex: none;
}
.shop-bell svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
}
.shop-greet {
  display: flex;
  align-items: flex-end;
  gap: 14px;
}
.shop-keeper {
  display: block;
  flex: none;
  width: 56px;
  height: 56px;
}
.shop-keeper img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.shop-keeper.is-avatar img {
  box-sizing: border-box;
  border: 2px solid var(--ink);
  border-radius: 50%;
  object-fit: cover;
}
.shop-welcome,
.shop-section .shop-welcome {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.45;
}
.shop-greet.has-keeper .shop-welcome {
  position: relative;
  margin-bottom: 12px;
  padding: 9px 12px;
  border: 2px solid var(--ink);
  border-radius: 10px;
  background: var(--paper);
  color: var(--ink);
}
.shop-greet.has-keeper .shop-welcome::before {
  content: '';
  position: absolute;
  bottom: 10px;
  left: -8px;
  width: 11px;
  height: 11px;
  border-bottom: 2px solid var(--ink);
  border-left: 2px solid var(--ink);
  background: var(--paper);
  transform: rotate(45deg);
}
.shop-stamps,
.shop-deals {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.shop-stamp {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border: 1.5px dashed var(--me, var(--purple));
  border-radius: 999px;
  color: var(--ink);
  font-size: 11px;
  font-weight: 650;
  line-height: 1.45;
}
.shop-stamp svg {
  width: 11px;
  height: 11px;
  fill: var(--me, var(--purple));
}
.shop-deal {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  padding: 6px 12px;
  border: 2px solid var(--ink);
  border-radius: 6px;
  background: var(--soft);
}
/* The deal and the tools card take a light wash of the page's colour, so a black and white page stays
   black and white. */
:is(#profile-view .shop-section, .shop-looks, .market-stall) :is(.shop-deal, .shop-tools) {
  background: color-mix(in srgb, var(--me, var(--purple)) 12%, var(--paper));
}
.shop-deal b {
  font: 700 14px/1.25 'Bricolage Grotesque', 'DM Sans', sans-serif;
}
.shop-deal span {
  color: var(--muted);
  font-size: 12px;
}

/* The top pick leads, big. */
.shop-pick {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  margin: 0 4px 16px 0;
  padding: 14px;
  border: 2px solid var(--ink);
  border-radius: 10px;
  background: var(--paper);
  box-shadow: 4px 4px 0 var(--gx-drop);
}
.shop-pick .gx-btn.shop-play {
  width: 52px;
  min-height: 52px;
}
.shop-pick .shop-play svg {
  width: 16px;
  height: 16px;
}
.shop-pick .shop-name b {
  font: 700 18px/1.25 'Bricolage Grotesque', 'DM Sans', sans-serif;
}
.shop-pick .start-tag {
  margin-bottom: 4px;
}
.shop-pick.is-art {
  grid-template-columns: minmax(0, 1fr) auto;
}
.shop-pick.is-art .shop-thumb {
  grid-column: 1 / -1;
  width: 100%;
  aspect-ratio: 16 / 9;
}
/* With room to spare the picture sits beside its name, so one item doesn't fill the whole screen. */
@media (min-width: 760px) {
  .shop-pick.is-art {
    grid-template-columns: minmax(0, 320px) minmax(0, 1fr) auto;
    gap: 18px;
  }
  .shop-pick.is-art .shop-thumb {
    grid-column: auto;
  }
}
.shop-shelf,
.shop-section h4.shop-shelf {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
  margin: 18px 0 8px;
  font: 700 15px/1.3 'Bricolage Grotesque', 'DM Sans', sans-serif;
}
.shop-shelf-sale {
  color: var(--me-text, var(--purple));
  font: 650 12px/1.4 'DM Sans', sans-serif;
}
.shop-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--paper);
  overflow: hidden;
}
.shop-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.shop-card {
  display: grid;
  align-content: start;
  gap: 8px;
  min-width: 0;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--paper);
}
.shop-card .shop-thumb {
  width: 100%;
}
.shop-card .shop-price {
  justify-self: start;
}
.shop-item {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 10px 14px;
  border-top: 1px solid var(--line);
}
.shop-item:first-child {
  border-top: 0;
}
.shop-item.is-art {
  grid-template-columns: 64px minmax(0, 1fr) auto;
}
/* Play, the bell and Add are IndieGuild's square button (.gx-btn.gx-sq, 44px on a 2px drop); one
   that is playing, or in the cart, stays pressed in and takes the picked colours. */
.shop-play {
  flex: none;
}
.shop-play svg {
  width: 14px;
  height: 14px;
  fill: currentColor;
}
.gx-btn:is(.shop-play, .shop-bell, .cart-add)[aria-pressed='true'] {
  --gx-f: var(--jb-sel-f);
  --gx-e: var(--jb-sel-f);
  color: var(--jb-sel-ink);
}
/* No preview yet: the same footprint, so the rows still line up. */
span.shop-play.is-empty {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin: 0 2px 2px 0;
  border: 2px solid var(--line);
  color: var(--muted);
  opacity: 0.6;
}
.shop-thumb {
  position: relative;
  display: block;
  width: 64px;
  aspect-ratio: 4 / 3;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--soft);
}
.shop-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.shop-thumb-none {
  display: grid;
  place-items: center;
  height: 100%;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.2;
  text-align: center;
}
.shop-name {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink);
  text-align: left;
}
.shop-name b {
  font: 600 15px/1.3 'DM Sans', sans-serif;
  overflow-wrap: anywhere;
}
.shop-name span {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}
.shop-price {
  font: 700 15px/1 'Bricolage Grotesque', 'DM Sans', sans-serif;
  white-space: nowrap;
}
.shop-price.is-sale s {
  margin-right: 3px;
  color: var(--muted);
  font: 500 12px/1 'DM Sans', sans-serif;
}

/* The affiliate card: its own slim line after the list, labeled, never one of the items. */
.shop-tools {
  display: flex;
  align-items: center;
  gap: 10px;
  width: fit-content;
  max-width: 100%;
  margin: 18px 0 4px;
  padding: 9px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--soft);
  color: var(--ink);
  font-size: 13px;
  line-height: 1.35;
}
.shop-tools-tag {
  flex: none;
  padding: 3px 9px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--paper);
  font-size: 11px;
  font-weight: 650;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.shop-tools-line {
  flex: 1;
  min-width: 0;
}
.shop-tools-go {
  flex: none;
  color: var(--me-text, var(--purple));
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
}
@media (hover: hover) and (pointer: fine) {
  .shop-tools:hover {
    border-color: var(--ink);
  }
}

/* The way on from one shop to the whole Market. */
.shop-more {
  margin: 16px 0 0;
  font-size: 14px;
}
.shop-more .text-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
/* The creator's own shop. Its Edit and Preview switch is the profile editor's own (profile-editor.css);
   in Preview a draft wears a quiet tag beside its title. */
.shop-section .shop-switch {
  margin: 0 0 16px;
}
.shop-pack.shop-draft {
  border-style: dashed;
  color: var(--muted);
  font-weight: 600;
}
.shop-status {
  display: grid;
  gap: 2px;
  margin: 0 0 12px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--soft);
}
.shop-status b {
  font-size: 14px;
}
.shop-status.is-on b {
  color: var(--green);
}
.shop-status span,
.shop-empty {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}
.shop-empty {
  margin: 14px 0 0;
}
.shop-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 16px;
}
.shop-fine {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

/* An item, and the editor, in the dialog. */
.shop-dialog {
  display: grid;
  gap: 12px;
  max-width: 520px;
}
.dialog-copy.shop-dialog > *,
.dialog-copy.shop-dialog p {
  margin: 0;
}
.shop-dialog input[type='radio'],
.shop-dialog input[type='checkbox'] {
  accent-color: var(--ink);
}
.shop-dialog .dialog-title {
  margin: 0;
}
.dialog-copy.shop-dialog .shop-by {
  margin-top: -6px;
  color: var(--muted);
  font-size: 14px;
}
/* From the Market an item names its shop, and the name is the way in. */
.dialog-copy.shop-dialog .shop-by a {
  color: var(--ink);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.shop-art {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--soft);
}
.shop-art img {
  display: block;
  width: 100%;
  height: auto;
}
.shop-listen {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}
.shop-details {
  font-size: 15px;
  line-height: 1.55;
  white-space: pre-line;
}
.shop-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.shop-tags span {
  padding: 3px 9px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 12px;
}
.shop-licenses,
.shop-kinds {
  display: grid;
  gap: 8px;
  min-width: 0;
  padding: 0;
  border: 0;
}
.shop-licenses legend,
.shop-kinds legend,
.shop-label {
  margin-bottom: 6px;
  padding: 0;
  font-size: 12px;
  font-weight: 600;
}
.shop-license {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 10px 12px;
  border: 2px solid var(--line);
  border-radius: 8px;
  cursor: pointer;
}
.shop-license:has(input:checked) {
  border-color: var(--ink);
}
.shop-license-text {
  display: grid;
  gap: 2px;
  min-width: 0;
}
.shop-license-text b {
  font-size: 14px;
}
.shop-license-text span {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
}
.shop-field {
  display: grid;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
}
.shop-opt {
  color: var(--muted);
  font-weight: 450;
}
.shop-dialog input[type='text'],
.shop-dialog textarea {
  box-sizing: border-box;
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--paper);
  color: var(--ink);
  font-size: 16px;
  font-weight: 450;
}
.shop-dialog textarea {
  resize: vertical;
  line-height: 1.5;
}
.shop-prices {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.dialog-copy.shop-dialog .shop-prices + .shop-fine {
  margin-top: -6px;
}
/* "What's an exclusive?" under the prices: plain words, folded away until someone asks. */
.shop-what {
  margin-top: -6px;
}
.shop-what > summary {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  list-style: none;
}
.shop-what > summary::-webkit-details-marker {
  display: none;
}
.shop-what > p {
  margin: 6px 0 0;
  font-size: 12px;
  font-weight: 450;
  line-height: 1.5;
  color: var(--muted);
}
.shop-dollar {
  position: relative;
  display: block;
}
.shop-dollar::before {
  content: '$';
  position: absolute;
  top: 50%;
  left: 12px;
  color: var(--muted);
  font-size: 16px;
  font-weight: 450;
  transform: translateY(-50%);
  pointer-events: none;
}
.shop-dialog .shop-dollar input {
  padding-left: 24px;
}
.shop-kinds {
  display: flex;
  flex-wrap: wrap;
}
.shop-kinds legend {
  width: 100%;
}
.shop-kind {
  position: relative;
}
.shop-kind input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.shop-kind span {
  display: inline-block;
  padding: 7px 12px;
  border: 2px solid var(--line);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.shop-kind input:checked + span {
  border-color: var(--ink);
  background: var(--ink);
  color: var(--paper);
}
.shop-kind input:focus-visible + span {
  outline: 3px solid #a08bbf;
  outline-offset: 3px;
}
/* A 3D model's preview picture in the item editor (shop-ui.js addShot). */
.shop-shot .shop-thumb {
  width: 160px;
  margin-bottom: 10px;
}
.shop-files ul {
  display: grid;
  gap: 6px;
  /* A pack can be a hundred files: past five or so the list scrolls inside itself. */
  max-height: 268px;
  margin: 0 0 10px;
  padding: 0;
  overflow-y: auto;
  list-style: none;
}
.shop-files li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 10px;
  align-items: center;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 7px;
  font-size: 13px;
}
.shop-file-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.shop-file-state {
  color: var(--muted);
  font-size: 12px;
}
.shop-file-x {
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--muted);
  font-size: 18px;
  line-height: 1;
}
.shop-tick {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  font-size: 14px;
  line-height: 1.45;
}
.shop-tick input {
  width: 18px;
  height: 18px;
  margin: 1px 0 0;
  accent-color: var(--ink);
}
.shop-tick.is-must {
  padding: 10px 12px;
  border: 2px solid var(--ink);
  border-radius: 8px;
}
.shop-error {
  color: var(--ann-red);
  font-size: 14px;
  font-weight: 550;
}
.shop-error:empty {
  display: none;
}
.shop-remove {
  margin-left: auto;
  padding: 6px 0;
  border: 0;
  background: none;
  color: var(--ann-red);
  font-size: 13px;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.shop-buy,
.shop-custom {
  width: 100%;
}
@media (max-width: 600px) {
  .shop-item {
    padding: 10px 12px;
    gap: 10px;
  }
  .shop-prices {
    grid-template-columns: minmax(0, 1fr);
  }
  .shop-remove {
    margin-left: 0;
  }
}
.dialog-copy.shop-dialog .shop-files .shop-fine {
  margin-top: 8px;
}

/* Customize shop: a live look at the front on top, the rest folded away. */
.shop-front-preview {
  padding: 14px;
  border: 1px dashed var(--line);
  border-radius: 8px;
}
.shop-front-preview .shop-front {
  margin: 0;
}
.shop-front-preview p.shop-sign-name {
  margin: 0;
}
.shop-fold {
  border: 1px solid var(--line);
  border-radius: 8px;
}
.shop-fold > summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 11px 12px;
  font-size: 14px;
  font-weight: 650;
  cursor: pointer;
  list-style: none;
}
.shop-fold > summary::-webkit-details-marker {
  display: none;
}
.shop-fold > summary::after {
  content: '+';
  color: var(--muted);
  font-size: 18px;
  line-height: 1;
}
.shop-fold[open] > summary::after {
  content: '−';
}
.shop-fold-body {
  display: grid;
  gap: 12px;
  padding: 2px 12px 14px;
}
.shop-dialog select,
.shop-dialog input[type='date'] {
  box-sizing: border-box;
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--paper);
  color: var(--ink);
  font-size: 16px;
  font-weight: 450;
}
.shop-upload {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}
.shop-upload[hidden] {
  display: none;
}
.shop-upload .shop-remove {
  margin-left: 0;
}
.shop-looks .section-order {
  margin: 0;
}
.shop-stamp-list {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.shop-stamp-list li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  color: var(--muted);
  font-size: 12px;
}
.shop-stamp-list li:not(.is-earned) .shop-stamp {
  border-color: var(--line);
  color: var(--muted);
}
.shop-stamp-list li:not(.is-earned) .shop-stamp svg {
  fill: var(--muted);
}
.shop-stamp-list .is-earned > span:last-child {
  color: var(--green);
  font-weight: 650;
}
.shop-name .start-tag {
  color: var(--me-on, #fff);
  font: 700 11px/1.45 'Bricolage Grotesque', 'DM Sans', sans-serif;
}
/* The file buttons are labels, and the dialog lays labels out as stacked fields: these stay buttons. */
.dialog-copy.shop-dialog .shop-pick {
  display: inline-flex;
  flex: none;
  width: auto;
  white-space: nowrap;
}
.dialog-copy.shop-dialog .shop-fine {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}
.dialog-copy.shop-dialog .order-row {
  justify-content: flex-start;
  min-height: 44px;
  margin: 0;
  padding: 0 12px 0 4px;
}
.dialog-copy.shop-dialog .order-row .drag-handle {
  flex: none;
  width: 32px;
  min-height: 0;
  margin: 0;
}
.dialog-copy.shop-dialog .order-row > span {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.shop-order {
  display: grid;
  gap: 6px;
}
.shop-order .shop-label {
  margin: 0;
}

/* Sample shops on preview links (shop-sample.js): the row of links above a made-up shop. It only ever
   shows on a preview address, never on indieguild.dev. */
.shop-sample-bar {
  display: grid;
  gap: 8px;
  margin: 0 0 12px;
  scroll-margin-top: 12px;
  padding: 10px 12px;
  border: 1px dashed var(--muted);
  border-radius: 8px;
  font-size: 13px;
}
.shop-sample-tag {
  color: var(--muted);
  font-size: 11px;
  font-weight: 650;
}
.shop-sample-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}
@media (max-width: 640px) {
  .shop-sample-row {
    gap: 4px;
  }
  .shop-sample-row a {
    min-height: 32px;
    padding: 0 9px;
    font-size: 12px;
  }
  .shop-sample-row.is-samples {
    flex-wrap: nowrap;
    margin: 0 -12px;
    padding: 0 12px;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .shop-sample-row.is-samples a {
    flex: none;
  }
}
.shop-sample-row a {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--paper);
  color: var(--ink);
  font-weight: 600;
  text-decoration: none;
}
.shop-sample-row a[aria-current='true'] {
  border-color: var(--ink);
  background: var(--ink);
  color: var(--paper);
}

/* The Shop tab (app.js applyProfileTab): a profile opens on the portfolio, and the shop has the tab
   beside it. Both stay on the page; the column says which one shows. */
#profile-view [data-tab-now='shop'] > :not([data-shop-slot]),
#profile-view [data-tab-now='portfolio'] > [data-shop-slot] {
  display: none;
}
.profile-tab .tab-count {
  margin-left: 6px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
}
.profile-tab .tab-count:empty {
  display: none;
}
/* Phones already keep 85px for the sticky header (scroll-padding-top in styles.css). */
#profile-view .profile-tabs {
  scroll-margin-top: 12px;
}
/* The header's way into the shop is for wide screens; on a phone the tabs are a short scroll down. */
@media (max-width: 760px) {
  #profile-view .profile-head-actions .profile-shop-open {
    display: none;
  }
}
#profile-view > .shop-sample-bar {
  margin: 16px 30px 0;
}
@media (max-width: 640px) {
  #profile-view > .shop-sample-bar {
    margin: 12px 0 0;
  }
}

/* The Market (market-ui.js): every open shop side by side. A stall is a card wearing its shop's own
   front in its creator's colour, with a few items out front. Stalls in a row stand the same height,
   so the way in sits on one line. */
.market {
  display: grid;
  gap: 18px;
  padding-bottom: 40px;
}
.market > .shop-sample-bar {
  margin: 0;
}
.market-kinds {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
/* Chips are IndieGuild's own buttons (Bryan, Nov 11: "change the buttons to match the style of
   indieguild"): .gx-btn draws the pixel frame and the hard drop, and one that is on stays pressed in
   and takes the picked-filter colours, like Paid only on the Job board. */
.gx-btn:is(.market-chip, .market-more-toggle, .market-clear, .market-show-more) {
  padding: 8px 12px;
  font-size: 14px;
}
.gx-btn.market-chip[aria-pressed='true'] {
  --gx-f: var(--jb-sel-f);
  --gx-e: var(--jb-sel-f);
  color: var(--jb-sel-ink);
}
/* A phone fits the four crafts on one row. */
@media (max-width: 420px) {
  .gx-btn.market-chip {
    padding-inline: 10px;
  }
}
/* The two views (market-ui.js viewsMarkup): Shops is the Market's main page, Items is one tap away.
   Flat tabs on a line with the picked one underlined, the same as Job board | Hobby & collabs. */
.market-top {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 2px solid var(--line);
}
.market-views {
  display: flex;
  gap: 4px;
  margin-bottom: -2px;
}
.market-views a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 8px 14px;
  border-bottom: 3px solid transparent;
  color: var(--muted);
  font: 700 15px/1.2 'DM Sans', sans-serif;
  text-decoration: none;
}
.market-views a[aria-current='page'] {
  border-bottom-color: var(--jb-sel-f);
  color: var(--ink);
}
.market-views a:focus-visible {
  outline: 2px solid var(--jb-sel-f);
  outline-offset: -2px;
}
.market-top > .market-cart {
  margin-bottom: 8px;
}

/* Items (the look from the IndieGuild Next screens): search and filters, one list from everyone, and
   on a wide screen the picked item beside it. One column on a phone, with the extra filters folded. */
.market-find {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: 'search' 'filters' 'results';
  gap: 14px;
  align-items: start;
}
.market-filters {
  grid-area: filters;
  display: grid;
  gap: 12px;
  min-width: 0;
}
.market-search {
  grid-area: search;
  display: block;
}
.market-search input {
  width: 100%;
  min-height: 46px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--paper);
  color: var(--ink);
  font: 500 16px/1.2 'DM Sans', sans-serif;
}
.market-search input::placeholder {
  color: var(--muted);
}
.market-search input:focus-visible {
  border-color: var(--ink);
  outline: 2px solid var(--purple);
  outline-offset: 1px;
}
.market-group {
  display: grid;
  gap: 8px;
  min-width: 0;
}
.market-group h2 {
  margin: 0;
  color: var(--muted);
  font: 650 12px/1.2 'DM Sans', sans-serif;
}
.market-more {
  display: none;
  gap: 12px;
}
.market-filters.is-open .market-more {
  display: grid;
}
.market-more-toggle {
  justify-self: start;
}
/* Packs and the phone's Filters button share one row (market-ui.js filtersMarkup). */
.market-quick {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.market-more-toggle b {
  display: inline-grid;
  place-items: center;
  min-width: 22px;
  height: 22px;
  padding: 0 5px;
  background: var(--jb-sel-f);
  color: var(--jb-sel-ink);
  font: 800 13px/1 'DM Sans', sans-serif;
}
.market-results {
  grid-area: results;
  display: grid;
  gap: 10px;
  min-width: 0;
}
.market-count {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin: 0;
  font-size: 14px;
  line-height: 1.35;
}
.market-count b {
  font-weight: 700;
}
.market-shuffled {
  flex: none;
  color: var(--muted);
  font-size: 12px;
}
.market-items {
  border-radius: 12px;
}
.market-item .shop-name {
  cursor: pointer;
}
.market-item.is-open {
  background: var(--soft);
}
.market-show-more,
.market-clear {
  justify-self: start;
}
.market-panel {
  display: none;
}
@media (max-width: 760px) {
  /* Craft is one line that scrolls sideways; its heading says nothing the chips don't. */
  .market-filters > .market-group > h2 {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  /* Room around the row, so a button's drop and its focus ring aren't cut by the sideways scroll. */
  .market-filters > .market-group > .market-kinds {
    flex-wrap: nowrap;
    margin: -5px;
    padding: 5px;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .market-filters > .market-group .market-chip {
    flex: none;
  }
}
@media (min-width: 761px) {
  .market-find {
    grid-template-columns: 220px minmax(0, 1fr);
    grid-template-areas: 'search search' 'filters results';
    gap: 16px 24px;
  }
  .market-more-toggle {
    display: none;
  }
  .market-more {
    display: grid;
    gap: 16px;
  }
  .market-filters {
    gap: 16px;
  }
  .market-find .gx-btn.market-chip {
    min-height: 38px;
    padding: 6px 10px;
    font-size: 13px;
  }
}
@media (min-width: 1100px) {
  .market-find {
    grid-template-columns: 220px minmax(0, 1fr) 340px;
    grid-template-areas: 'search search panel' 'filters results panel';
    /* The item beside a short list is the taller one: the list's row takes the room, not the search box's. */
    grid-template-rows: auto 1fr;
  }
  .market-panel {
    grid-area: panel;
    display: block;
    position: sticky;
    top: 16px;
    min-width: 0;
    padding: 18px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--paper);
  }
  .market-panel .dialog-title {
    font-size: 22px;
    line-height: 1.2;
  }
  .market-panel:empty {
    display: none;
  }
}
@media (hover: hover) and (pointer: fine) {
  .market-item .shop-name:hover b {
    text-decoration: underline;
    text-underline-offset: 3px;
  }
  .market-views a:not([aria-current]):hover {
    color: var(--ink);
  }
}

.market-street {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 18px;
}
.market-stall {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--paper);
}
.market-stall .shop-front {
  margin-bottom: 0;
}
/* Background: My colour (Customize shop). The stall, the shop on their page and the panel's preview
   take a soft tint of their own colour, the same wash as Tinted cards on a profile. Nothing is added
   on top (Bryan, Nov 11, on awnings: "those just make it feel cluttered"). The last selector names
   section.profile-section so it beats the plain card rule in styles.css; a page set to No cards keeps
   its shop on the page like its other sections. */
.market-stall[data-wash],
.shop-front-preview[data-wash],
#profile-view:not([data-cards='open']) .profile-main section.profile-section.shop-section[data-wash] {
  border-color: color-mix(in srgb, var(--me, var(--purple)) 32%, var(--line));
  background: color-mix(in srgb, var(--me, var(--purple)) 9%, var(--paper));
}
.market-stall .shop-sign-name a {
  color: inherit;
  text-decoration: none;
}
.market-stall .shop-list {
  background: none;
}
.market-stall .shop-item {
  padding: 10px 12px;
}
.market-stall a.shop-name {
  text-decoration: none;
}
.stall-by {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.3;
}
.stall-by > span:last-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* An untouched shop falls back to the site's purple, which is pale in dark mode: its words take the
   paper colour so they read on either theme. */
.stall-by .avatar {
  width: 26px;
  height: 26px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--me, var(--purple));
  color: var(--me-on, var(--paper));
  font-size: 12px;
}
.stall-art {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.stall-art a {
  display: grid;
  gap: 6px;
  color: var(--ink);
  text-decoration: none;
}
.stall-art .shop-thumb {
  width: 100%;
}
.stall-art .shop-price {
  font-size: 14px;
}
.stall-go {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 6px 12px;
  min-height: 44px;
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  color: var(--ink);
  text-decoration: none;
}
.gx-btn.stall-visit {
  --gx-f: var(--me, var(--purple));
  padding: 8px 14px;
  color: var(--me-on, var(--paper));
  font-size: 14px;
}
.stall-count {
  color: var(--muted);
  font-size: 13px;
}
.market-empty {
  margin: 0;
  padding: 28px 0;
  color: var(--muted);
  font-size: 15px;
}
/* The intro on an empty Market (market-ui.js introMarkup; Bryan, Nov 11: "Since it will be empty in
   the beginning how can we make it obvious to creators and devs about what it is?"). One card for
   someone making a game, one for a creator, a button each: side by side on a wide screen, stacked on
   a phone. Once shops are open they lead, and the street ends on an open stall (openStall). */
.market-intro {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: 14px 18px;
}
.market-intro article {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  min-width: 0;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--paper);
}
:is(.market-intro, .market-open) h2 {
  margin: 0;
  color: var(--ink);
  font: 700 20px/1.2 'Bricolage Grotesque', 'DM Sans', sans-serif;
}
:is(.market-intro article, .market-open) p {
  margin: 0 0 8px;
  color: var(--ink);
  font-size: 15px;
  line-height: 1.5;
}
/* The two buttons sit on one line however long the words above them run. */
.market-intro article > :last-child {
  margin-top: auto;
}
:is(.market-intro article, .market-open) p.market-asked {
  margin-bottom: 0;
  color: var(--muted);
  font-size: 14px;
}
/* The open stall: the same card as a shop's, empty, with a dashed edge. Its words sit in the middle
   however tall the row of stalls is. */
.market-stall.market-open {
  align-items: flex-start;
  justify-content: center;
  gap: 8px;
  padding: 18px;
  border-style: dashed;
  border-color: var(--muted);
  background: none;
}
.market-soon {
  grid-column: 1 / -1;
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.5;
}
/* Who asked for a shop: only the admin's browser shows it (class admin-only). */
.market-asks {
  display: grid;
  gap: 8px;
  padding: 14px 16px;
  border: 1px dashed var(--muted);
  border-radius: 12px;
}
.market-asks h2 {
  margin: 0;
  color: var(--ink);
  font: 700 15px/1.3 'DM Sans', sans-serif;
}
.market-asks ul {
  display: grid;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.market-asks li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
}
.market-asks li a {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  min-height: 44px;
  color: var(--ink);
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
}
.market-asks li a > span:last-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.market-asks .avatar {
  width: 28px;
  height: 28px;
  border: 1px solid var(--line);
  border-radius: 50%;
  font-size: 12px;
}
.market-asks .gx-btn {
  flex: none;
  padding: 8px 14px;
  font-size: 14px;
}
@media (hover: hover) and (pointer: fine) {
  .market-stall .shop-sign-name a:hover,
  .market-stall a.shop-name:hover b {
    text-decoration: underline;
    text-underline-offset: 3px;
  }
}

/* A pack (Bryan, Nov 11: asset packs): a small tag beside the title, and on the item what's inside. */
.shop-pack {
  display: inline-block;
  margin-left: 4px;
  padding: 1px 6px;
  border: 1px solid currentColor;
  border-radius: 4px;
  font: 700 11px/1.4 'DM Sans', sans-serif;
  vertical-align: 1px;
  white-space: nowrap;
}
.dialog-copy.shop-dialog p.shop-inside {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 8px;
  color: var(--ink);
  font-size: 14px;
  line-height: 1.4;
}
.shop-inside .shop-pack {
  margin-left: 0;
}

/* The cart (cart-ui.js; Bryan, Nov 11: "a cart system like amazon"). Add on every row, the way into
   the cart, and the cart itself: what's in it by shop, each shop's deal, one total. */
.shop-item.has-cart {
  grid-template-columns: 46px minmax(0, 1fr) auto auto;
}
.shop-item.has-cart.is-art {
  grid-template-columns: 64px minmax(0, 1fr) auto auto;
}
.shop-pick.has-cart {
  grid-template-columns: 52px minmax(0, 1fr) auto auto;
}
.shop-pick.has-cart.is-art {
  grid-template-columns: minmax(0, 1fr) auto auto;
}
@media (min-width: 760px) {
  .shop-pick.has-cart.is-art {
    grid-template-columns: minmax(0, 320px) minmax(0, 1fr) auto auto;
  }
}
/* A card's price and Add sit on its bottom edge, so a row of cards lines up whatever the titles do. */
.shop-card {
  grid-template-rows: auto 1fr auto;
}
.shop-card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.cart-add {
  flex: none;
}
.cart-add svg {
  width: 12px;
  height: 12px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.cart-count {
  min-width: 20px;
  padding: 3px 6px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--paper);
  font: 700 12px/1.2 'DM Sans', sans-serif;
  text-align: center;
}
.cart-count:empty {
  display: none;
}
button.header-cart {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
}
.cart-panel {
  display: grid;
  gap: 10px;
}
.cart-panel .cart-out {
  margin: 0;
  justify-self: center;
}
.shop-buy-now:disabled {
  opacity: 0.55;
}
.cart-dialog .cart-shop {
  display: grid;
  gap: 8px;
}
.cart-dialog .cart-shop h3 {
  margin: 0;
  font: 700 15px/1.3 'Bricolage Grotesque', 'DM Sans', sans-serif;
}
.cart-dialog .cart-shop h3 a {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.cart-lines {
  margin: 0;
  padding: 0;
  list-style: none;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--paper);
}
.cart-line {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 32px;
  gap: 10px;
  align-items: center;
  padding: 8px 6px 8px 12px;
  border-top: 1px solid var(--line);
}
.cart-line:first-child {
  border-top: 0;
}
.cart-line-name {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.cart-line-name b {
  font: 600 14px/1.3 'DM Sans', sans-serif;
  overflow-wrap: anywhere;
}
.cart-line-name span {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}
.cart-line .cart-x {
  width: 32px;
  height: 32px;
}
.dialog-copy.shop-dialog p.cart-deal {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 8px;
  padding: 8px 12px;
  border: 1px dashed var(--line);
  border-radius: 8px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.4;
}
.cart-deal b,
.cart-deal a {
  color: var(--ink);
  font-weight: 700;
}
.cart-deal a {
  text-decoration: underline;
  text-underline-offset: 3px;
}
.dialog-copy.shop-dialog p.cart-deal.is-on {
  border-style: solid;
  border-color: var(--ink);
  background: var(--soft);
  color: var(--ink);
}
.dialog-copy.shop-dialog p.cart-total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding-top: 12px;
  border-top: 2px solid var(--ink);
  font: 700 16px/1.2 'DM Sans', sans-serif;
}
.cart-total span {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 8px;
}
.cart-total small {
  color: var(--muted);
  font: 500 12px/1.3 'DM Sans', sans-serif;
}
.cart-total b {
  font: 700 22px/1 'Bricolage Grotesque', 'DM Sans', sans-serif;
}
@media (max-width: 760px) {
  .phone-cart .cart-count {
    position: absolute;
    top: -7px;
    right: -9px;
    min-height: 20px;
    padding: 1px 6px;
    border-radius: 0;
    font-size: 12px;
    font-weight: 800;
  }
}

/* Market checkout (orders-ui.js; switched off until Bryan's go). Your purchases and Your sales are
   plain lists of orders on the site's tokens: what was bought, the files, the license, the total. */
.orders-page {
  max-width: 760px;
  padding-top: 10px;
}
.orders-head h1 {
  margin: 0 0 6px;
  color: var(--ink);
  font: 700 32px/1.1 'Bricolage Grotesque', 'DM Sans', sans-serif;
}
.orders-sub,
.orders-note {
  margin: 0 0 16px;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.5;
}
.orders-fine {
  margin: 16px 0 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}
.orders-thanks {
  margin: 0 0 16px;
  padding: 10px 12px;
  border: 1px solid var(--ink);
  border-radius: 8px;
  background: var(--soft);
  color: var(--ink);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.4;
}
.orders-list {
  display: grid;
  gap: 12px;
}
.order {
  display: grid;
  gap: 10px;
  min-width: 0;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--paper);
}
.order-top {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px 12px;
}
.order-top h2 {
  margin: 0;
  color: var(--ink);
  font: 700 17px/1.25 'Bricolage Grotesque', 'DM Sans', sans-serif;
  font-variant-numeric: tabular-nums;
}
.order-top span,
.order-line {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}
.order-line {
  margin: 0;
  overflow-wrap: anywhere;
}
.order-line b,
.order-line a {
  color: var(--ink);
  font-weight: 700;
}
.order-line a {
  text-decoration: underline;
  text-underline-offset: 3px;
}
.order-state {
  margin: 0;
  padding: 8px 12px;
  border: 1px dashed var(--line);
  border-radius: 8px;
  color: var(--ink);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
}
.order.is-off .order-item-name b {
  color: var(--muted);
}
.order-items,
.order-files,
.orders-rows {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.order-items > li {
  display: grid;
  gap: 8px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}
.order-item {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.order-item-name {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.order-item-name b {
  color: var(--ink);
  font: 600 15px/1.3 'DM Sans', sans-serif;
  overflow-wrap: anywhere;
}
.order-item-name span {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}
.order-files a {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 6px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--ink);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
  text-decoration: none;
  overflow-wrap: anywhere;
}
.order-files a:hover {
  border-color: var(--ink);
}
.order-files svg {
  flex: none;
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.order-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 12px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}
.order-total {
  margin-left: auto;
  color: var(--muted);
  font-size: 14px;
}
.order-total b {
  color: var(--ink);
  font: 700 18px/1 'Bricolage Grotesque', 'DM Sans', sans-serif;
}
/* The admin's list of every order, under their own sales. */
.orders-admin {
  margin-top: 28px;
}
.orders-admin h2 {
  margin: 0 0 12px;
  color: var(--ink);
  font: 700 20px/1.2 'Bricolage Grotesque', 'DM Sans', sans-serif;
}
.orders-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 12px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--paper);
}
.orders-row-main {
  display: grid;
  gap: 2px;
  min-width: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.4;
  overflow-wrap: anywhere;
}
.orders-row-main b {
  color: var(--ink);
  font-size: 14px;
}
/* The license to read, in the dialog. */
.license-read .license-part {
  display: grid;
  gap: 8px;
}
.license-read h3 {
  margin: 0;
  color: var(--ink);
  font: 700 16px/1.3 'Bricolage Grotesque', 'DM Sans', sans-serif;
}
.license-read ol {
  display: grid;
  gap: 8px;
  margin: 0;
  padding-left: 22px;
  color: var(--ink);
  font-size: 14px;
  line-height: 1.5;
}
/* A link that is a button: the license to read, from the cart and from payout setup. */
.cart-license {
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink);
  font: inherit;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.shop-payouts .cart-license {
  justify-self: start;
  min-height: 32px;
  font-size: 13px;
}
.dialog-copy.shop-dialog p.cart-mine {
  text-align: center;
}
.cart-dialog .cart-shop .shop-buy {
  margin-top: 2px;
}
.shop-payouts {
  gap: 8px;
}
.shop-payouts .gx-btn {
  justify-self: start;
}
/* The button's label is a span too: it keeps the button's own ink, not the status box's grey. */
.shop-payouts .gx-btn span {
  color: inherit;
  font-size: inherit;
  line-height: inherit;
}
.shop-status .shop-sales {
  justify-self: start;
  margin-top: 4px;
  font-size: 13px;
}
@media (max-width: 600px) {
  .orders-head h1 {
    font-size: 26px;
  }
  .order {
    padding: 14px 12px;
  }
  .shop-payouts .gx-btn {
    justify-self: stretch;
  }
}
/* stats.css */
/* A creator's own Stats page (stats-ui.js; Bryan's card, Nov 11). Flat cards on the site's tokens:
   the numbers first, then bars. A founding member sees every card; everyone else sees their profile
   views and one quiet card saying what's locked. */
.stats-page {
  max-width: 880px;
  padding-top: 10px;
}
.stats-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  margin: 0 0 4px;
}
.stats-head h1 {
  margin: 0;
  color: var(--ink);
  font: 700 32px/1.1 'Bricolage Grotesque', 'DM Sans', sans-serif;
}
.stats-chip {
  padding: 3px 10px;
  border: 1px solid var(--purple);
  border-radius: 999px;
  color: var(--purple);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}
.stats-sub {
  margin: 0 0 18px;
  color: var(--muted);
  font-size: 14px;
}
.stats-note {
  margin: 0 0 14px;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.5;
}
.stats-kpis {
  display: grid;
  grid-template-columns: minmax(0, 260px);
  gap: 12px;
  margin: 0 0 16px;
}
.stats-kpis.is-full {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.stats-kpi {
  display: grid;
  align-content: start;
  gap: 4px;
  min-width: 0;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--paper);
}
.stats-lab {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}
.stats-n {
  color: var(--ink);
  font: 700 30px/1 'Bricolage Grotesque', 'DM Sans', sans-serif;
  font-variant-numeric: tabular-nums;
}
.stats-fine {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}
.stats-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: 12px;
}
.stats-card {
  min-width: 0;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--paper);
}
.stats-card h2 {
  margin: 0 0 12px;
  color: var(--ink);
  font: 700 17px/1.25 'Bricolage Grotesque', 'DM Sans', sans-serif;
}
.stats-bars,
.stats-list {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.stats-bar {
  display: grid;
  grid-template-columns: minmax(0, 170px) minmax(0, 1fr) 44px;
  align-items: center;
  gap: 10px;
  color: var(--ink);
  font-size: 13px;
}
.stats-bar-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.stats-track {
  height: 10px;
  overflow: hidden;
  border-radius: 5px;
  background: var(--line);
}
.stats-fill {
  display: block;
  height: 100%;
  border-radius: 5px;
  background: var(--ink);
}
.stats-fill.is-lead {
  background: var(--purple);
}
.stats-bar-n {
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.stats-list {
  gap: 0;
}
.stats-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 0;
  border-top: 1px solid var(--line);
  color: var(--ink);
  font-size: 14px;
}
.stats-row:first-child {
  padding-top: 0;
  border-top: 0;
}
.stats-row span:last-child {
  color: var(--muted);
  text-align: right;
  white-space: nowrap;
}
.stats-lock {
  max-width: 560px;
  margin: 0 0 16px;
  background: var(--soft);
}
.stats-lock p {
  margin: 0 0 8px;
  color: var(--ink);
  font-size: 14px;
  line-height: 1.5;
}
.stats-lock p:last-child {
  margin: 0;
  color: var(--muted);
}
.stats-never {
  margin: 16px 0 0;
}
@media (max-width: 760px) {
  .stats-head h1 {
    font-size: 26px;
  }
  .stats-kpis.is-full {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .stats-kpis:not(.is-full) {
    grid-template-columns: minmax(0, 1fr);
  }
  .stats-cards {
    grid-template-columns: minmax(0, 1fr);
  }
  /* On a phone the name gets the whole line, its number beside it and the bar underneath. */
  .stats-bar {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 5px 10px;
  }
  .stats-bar-label {
    grid-area: 1 / 1;
  }
  .stats-bar-n {
    grid-area: 1 / 2;
  }
  .stats-track {
    grid-area: 2 / 1 / auto / -1;
  }
  .stats-bars {
    gap: 12px;
  }
}