/* Wave 2: tables become cards on a phone, and the components the money,
   team, profile and reporting pages needed and used to improvise.

   Propshaft loads every stylesheet in this folder alphabetically, so this
   file lands after hub.css and wins at equal specificity. Everything here
   reads from the tokens in hub.css; nothing invents a colour or a curve. */

/* ---------------------------------------------------------------------
   Tables as cards.

   Under 760px a table with the action in column seven hides that action
   off the right edge, and the sticky first column keeps the one half of the
   row nobody needed. A table that opts in with .table-cards keeps its
   <table> markup for a laptop and, on a phone, lays each row out as a card:
   every cell becomes a labelled line (the label comes from data-label on
   the cell), the title cell leads, and the actions cell is a full-width
   row at the bottom with buttons tall enough for a thumb.
   --------------------------------------------------------------------- */

/* A plain td around a div.actions-row, never a flexed td. A td set to
   display:flex stops being a table cell, so its bottom border no longer
   tracks the row and leaves a stray hairline under the buttons. */
.hub-table td.row-actions {
  text-align: right;
}

.hub-table td.row-actions .actions-row {
  justify-content: flex-end;
}

/* A whole row that opens something: the pointer says so on a laptop, the
   chevron says so on a phone. The rowlink controller follows the link in
   the row unless the tap landed on a control. */
.hub-table tr.row-link {
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out);
}

.hub-table tr.row-link:hover td {
  background: var(--surface-soft);
}

.card-plain .hub-table tr.row-link:hover td {
  background: var(--surface-solid);
}

.hub-table tr.row-link:focus-within td {
  background: var(--surface-soft);
}

/* The dot that says this person has never signed in. Amber because it is
   our move to chase them, not theirs. */
.dot-warn {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--warn);
  margin-right: 6px;
  vertical-align: 1px;
}

@media (max-width: 760px) {
  .hub-table.table-cards,
  .hub-table.table-cards tbody {
    display: block;
    overflow: visible;
    background: none;
  }

  /* The header row has no place in a card; each cell carries its own label. */
  .hub-table.table-cards thead {
    display: none;
  }

  .hub-table.table-cards tr {
    position: relative;
    display: grid;
    grid-template-columns: 1fr;
    gap: 6px;
    padding: 14px 0;
    border-bottom: 1px solid var(--line-soft);
  }

  .hub-table.table-cards tr:last-child {
    border-bottom: 0;
  }

  /* Every cell is "label · value" on one line. The sticky column rules in
     hub.css are undone here because nothing scrolls sideways any more. */
  .hub-table.table-cards td,
  .card-plain .hub-table.table-cards td {
    position: static;
    display: grid;
    grid-template-columns: 96px 1fr;
    gap: 10px;
    align-items: baseline;
    padding: 0;
    border: 0;
    background: transparent;
    text-align: left;
  }

  .hub-table.table-cards td[data-label]::before {
    content: attr(data-label);
    font-size: var(--fs-label);
    font-weight: 700;
    text-transform: uppercase;
    color: var(--ink-soft);
    line-height: var(--lh-body);
  }

  /* A cell with nothing to label spans the card: the title, a chip row,
     the actions. Block, not grid, so a name, a chip and a line under them
     flow as text instead of each becoming a stretched grid item. */
  .hub-table.table-cards td:not([data-label]),
  .hub-table.table-cards td[data-label=""] {
    display: block;
  }

  .hub-table.table-cards td.row-title {
    font-size: 15px;
    padding-right: 28px;
  }

  .hub-table.table-cards td.num {
    text-align: left;
  }

  /* Numbers keep their own column rule on a laptop; on a card they read
     after their label, so the alignment is the label's job. */
  .hub-table.table-cards td.num strong {
    font-size: 15px;
  }

  /* A cell that only holds a tick box: no label, the box up top. */
  .hub-table.table-cards td.th-check {
    width: auto;
    padding: 0;
  }

  .hub-table.table-cards td.th-check:empty {
    display: none;
  }

  .hub-table.table-cards td.th-check input {
    width: 22px;
    height: 22px;
  }

  /* The actions cell is the bottom row of the card, and every button in it
     is full width and 44px tall: the thumb zone. */
  .hub-table.table-cards td.row-actions {
    display: block;
    margin-top: 6px;
  }

  .hub-table.table-cards td.row-actions .actions-row {
    flex-direction: column;
    align-items: stretch;
    gap: var(--s2);
  }

  .hub-table.table-cards td.row-actions .actions-row > *,
  .hub-table.table-cards td.row-actions .actions-row form.button_to {
    width: 100%;
  }

  .hub-table.table-cards td.row-actions .btn,
  .hub-table.table-cards td.row-actions .table-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: var(--tap);
    text-align: center;
  }

  .hub-table.table-cards td.row-actions > span,
  .hub-table.table-cards td.row-actions > span > .btn {
    display: block;
    width: 100%;
  }

  .hub-table.table-cards td.row-actions:empty {
    display: none;
  }

  /* The chevron on a row that opens a page. Drawn, not typed into the
     markup, so a screen reader hears the link and not a stray character. */
  .hub-table.table-cards tr.row-link::after {
    content: "\203A";
    position: absolute;
    right: 4px;
    top: 12px;
    font-size: 22px;
    line-height: 1;
    color: var(--ink-mute);
  }

  /* A placeholder for the poster frame the video library does not have yet
     (wave 4 generates it). The slot keeps the card shape stable so the
     real frame lands without a layout shift. */
  .poster-slot {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 54px;
    aspect-ratio: 9 / 16;
    border-radius: var(--r-xs);
    background: var(--surface-soft);
    border: 1px solid var(--line-soft);
    font-family: "Quicksand", sans-serif;
    font-weight: 700;
    font-size: 18px;
    color: var(--ink-mute);
    flex: none;
  }

  .hub-table.table-cards td.row-title.has-poster {
    display: flex;
    gap: 10px;
    align-items: flex-start;
  }
}

/* On a laptop the poster slot does not exist. The library row is a row. */
@media (min-width: 761px) {
  .poster-slot {
    display: none;
  }
}

/* ---------------------------------------------------------------------
   Stat component. One shape at one size for every lead number: label,
   value in the display face with the currency as a small prefix, one line
   of sub text. Three of these in a row used to come in three type sizes.
   --------------------------------------------------------------------- */
.stat-card.kpi {
  display: grid;
  gap: 4px;
  align-content: start;
  align-items: start;
  min-width: 0;
}

.kpi-value {
  display: block;
  font-family: "Indarung", "Quicksand", sans-serif;
  font-size: 34px;
  line-height: 1.05;
  font-variant-numeric: tabular-nums lining-nums;
  overflow-wrap: anywhere;
}

/* Words in the value keep the body face at weight: the display face sets
   wide caps that two creator names have to be decoded from. The line
   height matches the digits so the three cards still sit level. */
.kpi-value.stat-value-words {
  font-family: "Quicksand", sans-serif;
  font-weight: 700;
  font-size: 24px;
  line-height: 36px;
}

.kpi-prefix {
  font-family: "Quicksand", sans-serif;
  font-weight: 700;
  font-size: 14px;
  margin-right: 4px;
  vertical-align: 0.45em;
  color: var(--ink-soft);
}

.kpi-sub {
  font-size: 13px;
  color: var(--ink-soft);
  line-height: 1.4;
}

.kpi-delta {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.kpi-delta.is-up {
  color: var(--ok-ink);
}

.kpi-delta.is-down {
  color: var(--bad-ink);
}

/* A lead stat that stands alone in a page head. */
.kpi-lead {
  display: grid;
  gap: 2px;
  align-content: start;
  min-width: 0;
}

@media (max-width: 640px) {
  .stat-row.kpi-row {
    grid-template-columns: 1fr;
  }

  .kpi-lead {
    width: 100%;
  }
}

/* The disabled primary with a reason under it. A hidden button is a dead
   end; a disabled one with a sentence says what to fix. */
.btn-reason {
  margin: 6px 0 0;
  font-size: var(--fs-sm);
  color: var(--ink-soft);
  text-align: right;
}

@media (max-width: 760px) {
  .btn-reason {
    text-align: left;
  }
}

/* ---------------------------------------------------------------------
   Due column: the date, then the lateness. Colour sits on the lateness
   only, so the date stays readable and the chip stops hiding it.
   --------------------------------------------------------------------- */
.due-cell {
  white-space: nowrap;
}

.due-late {
  color: var(--bad-ink);
  font-weight: 700;
}

.due-soon {
  color: var(--warn-ink);
  font-weight: 700;
}

/* A quiet download affordance after an invoice number. */
.pdf-link {
  font-weight: 700;
  text-decoration: none;
  color: var(--ink-soft);
}

.pdf-link:hover {
  text-decoration: underline;
}

/* ---------------------------------------------------------------------
   Bank details as a popover. The "On file" chip gets a caret so it reads
   as a disclosure; opening it floats holder, grouped IBAN and Copy over the
   table instead of pushing the row open. On a phone it sits in flow, as the
   card has room.
   --------------------------------------------------------------------- */
.bank-details {
  position: relative;
}

.bank-details summary .chip::after {
  content: "\2304";
  font-size: 10px;
  margin-left: 2px;
  transition: transform var(--dur-base) var(--ease-out);
}

.bank-details[open] summary .chip::after {
  transform: rotate(180deg);
}

@media (min-width: 761px) {
  .bank-details > .reveal {
    position: absolute;
    z-index: var(--z-menu);
    top: calc(100% + 6px);
    left: 0;
    min-width: 260px;
    padding: 12px 14px;
    border-radius: var(--r-sm);
    background: var(--surface-raised);
    box-shadow: var(--shadow-menu);
  }

  .bank-details:not([open]) > .reveal {
    padding: 0;
  }
}

/* ---------------------------------------------------------------------
   Pay run sheet: the review list of who gets what. Name left, amount right,
   account ending under the name. Rows without an account are explained
   rather than dropped.
   --------------------------------------------------------------------- */
.pay-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--line-soft);
}

.pay-list li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--line-soft);
}

.pay-list .pay-amount {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  white-space: nowrap;
}

.pay-list .pay-meta {
  display: block;
  font-size: var(--fs-sm);
  color: var(--ink-soft);
}

.pay-total {
  display: flex;
  justify-content: space-between;
  padding: 10px 0 0;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* The bulk bar as the hub's elevated surface: white, a hairline ring and
   the menu shadow, like every other thing that lifts off the page. On a
   phone it docks to the bottom and slides up, where the thumb is. */
.bulk-bar {
  background: var(--surface-raised);
  border: 0;
  box-shadow: var(--shadow-menu);
  border-radius: var(--r-pill);
  padding: 10px 10px 10px 16px;
}

@media (max-width: 760px) {
  .bulk-bar {
    position: fixed;
    left: var(--s4);
    right: var(--s4);
    bottom: calc(var(--s4) + var(--safe-b));
    z-index: var(--z-sticky);
    margin: 0;
    justify-content: space-between;
  }

  @media (prefers-reduced-motion: no-preference) {
    .bulk-bar:not([hidden]) {
      animation: bulk-rise var(--dur-enter) var(--ease-sheet);
    }
  }

  @keyframes bulk-rise {
    from {
      opacity: 0;
      transform: translateY(12px);
    }
  }
}

/* ---------------------------------------------------------------------
   Paid recently, grouped by month. The month line carries its own total so
   "what did we spend on creators this month" is read, not summed.
   --------------------------------------------------------------------- */
.month-row td {
  padding-top: 18px;
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--ink-soft);
  text-transform: uppercase;
  background: transparent;
}

.month-row td .month-total {
  float: right;
  text-transform: none;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 760px) {
  .hub-table.table-cards tr.month-row {
    display: block;
    padding: 18px 0 6px;
    border-bottom: 0;
  }

  .hub-table.table-cards tr.month-row td {
    display: flex;
    justify-content: space-between;
  }

  .hub-table.table-cards tr.month-row td .month-total {
    float: none;
  }
}

/* ---------------------------------------------------------------------
   Two-step inline confirm. The first tap turns the button into a question
   with Confirm and Cancel in the same row. No native dialog, and the row
   never leaves the page.
   --------------------------------------------------------------------- */
.twostep-ask {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: var(--fs-sm);
  font-weight: 700;
}

.twostep-ask[hidden] {
  display: none;
}

@media (prefers-reduced-motion: no-preference) {
  .twostep-ask:not([hidden]) {
    animation: twostep-in var(--dur-base) var(--ease-out);
  }

  @keyframes twostep-in {
    from {
      opacity: 0;
      transform: translateX(6px);
    }
  }
}

/* ---------------------------------------------------------------------
   Settings groups, the way iOS lays out an account: a titled group of rows,
   each row a label, a value and at most one quiet control at the end.
   --------------------------------------------------------------------- */
.settings-group {
  padding: 4px 0;
}

.settings-title {
  margin: 0 0 6px;
  padding: 0 4px;
  font-size: var(--fs-label);
  font-weight: 700;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.settings-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.settings-row {
  display: grid;
  grid-template-columns: 120px 1fr auto;
  align-items: center;
  gap: 12px;
  min-height: 52px;
  padding: 8px 4px;
  border-bottom: 1px solid var(--line-soft);
}

.settings-row:last-child {
  border-bottom: 0;
}

.settings-key {
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--ink-soft);
}

.settings-val {
  min-width: 0;
  overflow-wrap: anywhere;
}

.settings-end {
  justify-self: end;
}

.settings-row.is-danger .settings-val {
  grid-column: 1 / -1;
}

/* The identity row: initials, then the editable name beside them. */
.avatar-initials {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--ink);
  color: #fff;
  font-weight: 700;
  font-size: 15px;
  flex: none;
}

.identity-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 4px 14px;
  border-bottom: 1px solid var(--line-soft);
}

.identity-row .identity-name {
  font-size: 17px;
  font-weight: 700;
}

/* A device: what it is, where it was last, whether it is this one. */
.device-row .settings-val {
  display: grid;
  gap: 2px;
}

.device-meta {
  font-size: var(--fs-sm);
  color: var(--ink-soft);
}

/* On a phone a row stacks: the key on top, the value, then the control at
   full width where the thumb is. Three columns in 390px squeezed the
   two-step question into a word a line. */
@media (max-width: 640px) {
  .settings-row {
    grid-template-columns: 1fr;
    gap: 4px;
    padding: 12px 4px;
  }

  .settings-end {
    justify-self: stretch;
    margin-top: 4px;
  }

  .settings-end:empty {
    display: none;
  }

  .settings-end > span[data-controller="twostep"] {
    display: block;
  }

  .settings-end .btn,
  .twostep-ask .btn {
    min-height: var(--tap);
  }

  .twostep-ask {
    display: flex;
    width: 100%;
    justify-content: space-between;
  }
}

/* A dangerous move as a quiet text row at the bottom, never a red pill
   that sits next to Save all day. */
.danger-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 28px;
  padding-top: 16px;
  border-top: 1px solid var(--line-soft);
  font-size: var(--fs-sm);
  color: var(--ink-soft);
}

button.danger-link {
  background: none;
  border: 0;
  padding: 8px 0;
  min-height: var(--tap);
  font: inherit;
  font-weight: 700;
  color: var(--bad-ink);
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease-out);
}

button.danger-link:active {
  transform: scale(.98);
}

/* ---------------------------------------------------------------------
   Inline edit: a value that becomes a field on tap, with Save and Cancel
   beside it, and Esc to back out. Used for your name and for a category.
   --------------------------------------------------------------------- */
button.inline-edit-label {
  background: none;
  border: 0;
  padding: 2px 0;
  font: inherit;
  font-weight: 700;
  color: var(--ink);
  cursor: pointer;
  text-align: left;
  border-bottom: 1px dashed transparent;
  transition: border-color var(--dur-fast) var(--ease-out);
}

button.inline-edit-label:hover {
  border-bottom-color: var(--line-strong);
}

.inline-edit-form {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.inline-edit-form[hidden] {
  display: none;
}

.inline-edit-form .input {
  width: auto;
  flex: 1 1 160px;
}

/* ---------------------------------------------------------------------
   Role picker: four radio cards instead of the one native select left in
   the hub. The checked card takes the ink.
   --------------------------------------------------------------------- */
.role-cards {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.role-card {
  display: grid;
  gap: 2px;
  padding: 12px 14px;
  border-radius: var(--r-sm);
  border: 1px solid var(--line);
  background: var(--surface-solid);
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}

.role-card:hover {
  border-color: var(--line-strong);
}

.role-card:active {
  transform: scale(.98);
}

.role-card:has(input:checked) {
  border-color: var(--ink);
  background: var(--ink);
  color: #fff;
}

.role-card:has(input:focus-visible) {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}

.role-card strong {
  font-size: var(--fs-body);
}

.role-card span {
  font-size: var(--fs-sm);
  color: var(--ink-soft);
}

.role-card:has(input:checked) span {
  color: rgba(255, 255, 255, .8);
}

/* ---------------------------------------------------------------------
   Fold summaries with a chevron that turns, so a closed fold looks closed.
   --------------------------------------------------------------------- */
.fold-chevron {
  display: inline-block;
  width: 18px;
  margin-right: 2px;
  color: var(--ink-mute);
  transition: transform var(--dur-base) var(--ease-out);
}

details[open] > summary .fold-chevron {
  transform: rotate(90deg);
}

/* ---------------------------------------------------------------------
   Filters without native selects: the segmented control for the range and
   chip toggles for the two cuts. A chip toggle is a chip that is a link.
   --------------------------------------------------------------------- */
.filter-bar .segments {
  flex: none;
}

a.chip-toggle {
  cursor: pointer;
  text-decoration: none;
  min-height: 32px;
  transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}

a.chip-toggle:hover {
  border-color: var(--line-strong);
}

a.chip-toggle:active {
  transform: scale(.98);
}

.filter-group {
  display: inline-flex;
  gap: 6px;
  flex-wrap: wrap;
}

/* ---------------------------------------------------------------------
   Reports: the week picker, the money fields and the live ROAS.
   --------------------------------------------------------------------- */
.week-chips {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

.money-field {
  display: flex;
  align-items: center;
  border-radius: var(--r-sm);
  border: 1px solid var(--control-line);
  background: var(--control-bg);
  overflow: hidden;
}

.money-field:focus-within {
  border-color: var(--control-line-focus);
  background: var(--control-bg-focus);
  box-shadow: var(--focus-ring);
}

.money-prefix {
  padding: 0 0 0 12px;
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--ink-soft);
  flex: none;
}

.money-field .input {
  border: 0;
  background: transparent;
  box-shadow: none;
}

.money-field .input:focus {
  box-shadow: none;
  outline: none;
}

.roas-readout {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.roas-readout small {
  font-weight: 500;
  color: var(--ink-soft);
}

/* A winner chip that is a button. Hollow until the row wins. */
button.chip-win {
  cursor: pointer;
  font-family: inherit;
  background: transparent;
  border: 1px dashed var(--line-strong);
  color: var(--ink-soft);
  min-height: 32px;
}

button.chip-win:hover {
  border-style: solid;
  color: var(--ink);
}

button.chip-win.is-won {
  background: var(--ink);
  border: 1px solid var(--ink);
  color: var(--lime);
}

/* ---------------------------------------------------------------------
   Contracts: the draft promoted to a card, and the sticky bar on the
   preview that carries the one action the page exists for.
   --------------------------------------------------------------------- */
.draft-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: var(--s6);
}

.draft-card .actions-row {
  flex: none;
}

@media (max-width: 640px) {
  .draft-card .actions-row {
    width: 100%;
    flex-direction: column;
    align-items: stretch;
  }

  .draft-card .actions-row .btn {
    width: 100%;
    min-height: var(--tap);
    text-align: center;
  }
}

.sticky-bar {
  position: sticky;
  bottom: calc(12px + var(--safe-b));
  z-index: var(--z-sticky);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 16px;
  padding: 10px 10px 10px 18px;
  border-radius: var(--r-pill);
  background: var(--ink);
  color: #fff;
  font-weight: 700;
  font-size: 14px;
  box-shadow: var(--shadow-menu);
}

.sticky-bar .page-sub {
  color: rgba(255, 255, 255, .75);
  margin: 0;
}

/* The consequence list in an activation or retirement sheet: numbers
   first, then the sentence. */
.consequences {
  list-style: none;
  margin: 0 0 14px;
  padding: 0;
}

.consequences li {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--line-soft);
  font-size: var(--fs-body);
}

.consequences li:last-child {
  border-bottom: 0;
}

.consequences .count {
  font-family: "Indarung", "Quicksand", sans-serif;
  font-size: 20px;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

.change-note {
  display: block;
  margin-top: 2px;
  font-size: var(--fs-sm);
  color: var(--ink-soft);
}

/* ---------------------------------------------------------------------
   Categories as a list. One row per category: the name, the counts under
   it, Remove revealed on hover or focus. A table of one column and two
   numbers was a table for no reason.
   --------------------------------------------------------------------- */
.cat-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.cat-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 56px;
  padding: 10px 4px;
  border-bottom: 1px solid var(--line-soft);
}

.cat-row:last-child {
  border-bottom: 0;
}

.cat-main {
  display: grid;
  gap: 2px;
  min-width: 0;
  flex: 1;
}

.cat-counts {
  font-size: var(--fs-sm);
  color: var(--ink-soft);
}

.cat-remove {
  opacity: 0;
  transition: opacity var(--dur-fast) var(--ease-out);
}

.cat-row:hover .cat-remove,
.cat-row:focus-within .cat-remove {
  opacity: 1;
}

/* No hover on a phone, so the quiet link is always there. */
@media (hover: none) {
  .cat-remove {
    opacity: 1;
  }
}

.cat-row button.table-link {
  min-height: var(--tap);
  color: var(--ink-soft);
  font-weight: 600;
}

.crumb {
  display: inline-block;
  margin-bottom: 8px;
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--ink-soft);
  text-decoration: none;
}

.crumb:hover {
  text-decoration: underline;
}

/* ---------------------------------------------------------------------
   The switch: one control for one bit. Forest when on, 180ms on the house
   curve, 98% under the finger.
   --------------------------------------------------------------------- */
.switch {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--ink-soft);
  min-height: var(--tap);
}

.switch input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.switch-track {
  position: relative;
  width: 44px;
  height: 26px;
  border-radius: 13px;
  background: var(--line-strong);
  transition: background 180ms var(--ease-out), transform var(--dur-fast) var(--ease-out);
  flex: none;
}

.switch-track::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
  transition: transform 180ms var(--ease-out);
}

.switch input:checked + .switch-track {
  background: var(--ink);
}

.switch input:checked + .switch-track::after {
  transform: translateX(18px);
}

.switch input:focus-visible + .switch-track {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}

.switch:active .switch-track {
  transform: scale(.98);
}

.switch input:checked ~ .switch-label {
  color: var(--ink);
}

/* ---------------------------------------------------------------------
   Empty state that shows what good looks like: three ghosted rows named
   after the three documents every creator reads.
   --------------------------------------------------------------------- */
.ghost-rows {
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
  text-align: left;
}

.ghost-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 4px;
  border-bottom: 1px dashed var(--line);
  color: var(--ink-faint);
}

.ghost-row:last-child {
  border-bottom: 0;
}

.ghost-row strong {
  color: var(--ink-soft);
}

.ghost-tiles {
  display: flex;
  gap: 10px;
  justify-content: center;
  margin-bottom: 14px;
}

.ghost-tile {
  width: 54px;
  aspect-ratio: 9 / 16;
  border-radius: var(--r-xs);
  border: 1px dashed var(--line);
  background: var(--surface-soft);
}

/* The code a creator shares, as a button that copies it. */
button.code-copy {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 13px;
  text-transform: none;
}

/* ---------------------------------------------------------------------
   Help as a reference: a sticky index beside the sections on a laptop, a
   chip row of jump links on a phone.
   --------------------------------------------------------------------- */
.help-layout {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: var(--s6);
  align-items: start;
}

.help-index {
  position: sticky;
  top: 16px;
}

.help-index ol {
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
  display: grid;
  gap: 2px;
}

.help-index a {
  display: block;
  padding: 7px 10px;
  border-radius: var(--r-xs);
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--ink-soft);
  text-decoration: none;
  transition: background var(--dur-fast) var(--ease-out);
}

.help-index a:hover {
  background: var(--surface-soft);
  color: var(--ink);
}

.help-section {
  scroll-margin-top: 16px;
}

.help-jump {
  display: none;
}

@media (max-width: 840px) {
  .help-layout {
    grid-template-columns: 1fr;
  }

  .help-index {
    display: none;
  }

  .help-jump {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 6px;
    margin-bottom: 14px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .help-jump::-webkit-scrollbar {
    display: none;
  }

  .help-jump .chip {
    flex: none;
  }
}

.help-for {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  font-size: var(--fs-sm);
  color: var(--ink-soft);
}

/* Anything the stylesheet hides for one role is hidden with the attribute,
   so the same markup serves both filters. */
.help-section[hidden] {
  display: none;
}