/* =====================================================================================================
   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).
   ===================================================================================================== */
#studio-view .role-sheets {
  --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;
  display: grid;
  gap: 28px;
  margin: 0 0 36px;
  padding: 0 6px 6px 0;
  border: 0;
  box-shadow: none;
  background: none;
}
:root[data-theme='dark'] #studio-view .role-sheets {
  --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;
}
#studio-view .role-sheets .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;
}
#studio-view .role-sheets .bounty-facts .gx-chip .gx-ico {
  color: currentColor;
}
#studio-view .role-sheets .bounty-facts .gx-k-gold {
  --rs-f: var(--rs-rev);
  --rs-i: var(--rs-rev-ink);
}
#studio-view .role-sheets .bounty-facts .gx-k-time {
  --rs-f: var(--rs-time);
  --rs-i: var(--rs-time-ink);
}
#studio-view .role-sheets .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). */
#studio-view .role-sheets .bounty-facts .pay-open {
  --rs-f: var(--rs-discuss);
  --rs-i: var(--rs-discuss-ink);
}
#studio-view .role-sheets .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;
}