/* Checkout report order page + Cancel tickets page (admin redesign phase 5
   step 4, plan §11 #133–#137; core/_checkout_order_body.html,
   core/_checkout_cancel_body.html). Role tokens only. */

/* Label / value facts: label column on wide screens, stacked on phones. */
.lg-ord__facts { margin: 0; display: grid; gap: var(--space-2); }
.lg-ord__fact { display: grid; grid-template-columns: minmax(0, 9rem) minmax(0, 1fr); gap: var(--space-3); }
.lg-ord__fact dt { color: var(--text-muted); font-size: var(--size-label); }
.lg-ord__fact dd { margin: 0; min-inline-size: 0; overflow-wrap: anywhere; }
.lg-ord__sub { display: block; color: var(--text-muted); font-size: var(--size-caption); font-family: var(--font-sans); font-weight: 400; }
/* Ticket Holder / Price: value medium, like view-page facts (decision 364); "No name given" grey, regular. */
.lg-ord__facts--ticket .lg-ord__fact dd { font-weight: 500; }
.lg-ord__facts--ticket .lg-ord__fact dd.lg-ord__none { color: var(--text-muted); font-weight: 400; }
.lg-ord__count { color: var(--text-muted); font-weight: 400; }

/* Tickets: one block each, a rule between them. */
.lg-ord__tickets { list-style: none; margin: 0; padding: 0; }
.lg-ord__ticket { display: grid; gap: var(--space-3); padding-block: var(--space-4); border-top: 1px solid var(--border); }
.lg-ord__ticket:first-child { padding-top: 0; border-top: 0; }
/* The ticket the page was opened for (Attendees row, "Open order"): selected-row tint. */
.lg-ord__ticket--focus {
  margin-inline: calc(var(--space-3) * -1);
  padding: var(--space-3);
  border-radius: var(--radius-control);
  background: var(--row-selected);
  border-top-color: transparent;
}
.lg-ord__ticket--focus + .lg-ord__ticket { border-top-color: transparent; }
.lg-ord__thead { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); }
.lg-ord__tmain { min-inline-size: 0; }
.lg-ord__tnum { margin: 0; font-weight: 600; }
.lg-ord__tsub { margin: 0; color: var(--text-muted); font-size: var(--size-caption); }
/* Answers, collapsed per ticket: same look as a chart's "Show as table". */
.lg-ord__toggle {
  inline-size: fit-content;
  padding-block: var(--space-1);
  color: var(--primary);
  font-size: var(--size-label);
  line-height: var(--leading-label);
  cursor: pointer;
}
.lg-ord__toggle:hover { text-decoration: underline; text-underline-offset: 0.2em; }
.lg-ord__toggle:focus-visible { outline: var(--focus-ring) solid var(--focus); outline-offset: 2px; border-radius: var(--radius-pill); }
.lg-ord__answers[open] > .lg-ord__toggle { margin-bottom: var(--space-2); }

/* Cancel tickets page: the Ledger 2 form sheet sets its width (form-sheet.css). */
.lg-ord__total { margin: 0; }
.lg-ord__total strong { white-space: nowrap; }

/* Orders to fix, Money section (Ledger 2 view page): what the buyer paid and the
   organiser payout side by side in a wide sheet, stacked in a narrow one. */
.lg-fix__money { display: grid; gap: var(--space-5); grid-template-columns: minmax(0, 1fr); }
@container (min-width: 40rem) { .lg-fix__money { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-8); } }
.lg-rev__row--head dt { color: var(--text); font-weight: 600; }

/* Orders to fix: masked raw gateway data, super admin only (decision 216). */
.lg-fix__payload > summary { cursor: pointer; min-block-size: var(--touch-target); display: flex; align-items: center; }
.lg-fix__pre {
  margin: 0; max-block-size: 24rem; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere;
  font-size: var(--size-caption); background: var(--neutral-tint); padding: var(--space-3); border-radius: var(--radius-control);
}

@media (min-width: 64em) {
  .lg-ord__facts--ticket { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-6); }
}
@media (max-width: 39.99em) {
  .lg-ord__fact { grid-template-columns: 1fr; gap: 0; }
  /* Phones (2026-10-09, owner: too bulky): Holder and Price side by side, label
     above value; less space between tickets. */
  .lg-ord__facts--ticket { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-4); }
  .lg-ord__fact dd { margin-block-start: calc(var(--space-1) / 2); }
  .lg-ord__ticket { gap: var(--space-2); padding-block: var(--space-3); }
  .lg-ord__toggle { display: flex; align-items: center; min-block-size: var(--touch-target); }
}