/* =====================================================================================================
   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: nowrap;
    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 narrowest phones (320 to 359px): the Side quest's prize plate and its button take a line each. */
@media (max-width: 359px) {
  #roles-content .bounty-ledger .bounty-jam > .bounty-qrow {
    flex-wrap: wrap;
  }
}

/* ---------- 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;
  }
}