/* ================================================================ 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);
}
.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 four tiles, two by two. */
  .lb-phone .lb-quick {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }
  .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;
}