.site-top-account-actions {
  display: flex;
  align-items: stretch;
  margin-left: auto;
}

/* The Admin Panel button is the same treatment as the other top-bar buttons -
   no plate, no glow, just the animated conic border on hover - only larger and
   in gold. It is taken out of flow with position:absolute so it centres on the
   bar regardless of how wide the nav or the signed-in name gets, which also
   collapses .site-top-account-actions down to the auth button alone.
   .site-top-bar is fixed, so it is the containing block.

   Height comes from top/bottom rather than min-height, so the button fills the
   bar instead of hovering inside it. The 2px inset leaves the bar's own edge
   treatment visible top and bottom. */
.site-top-admin-button {
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 5px;
  z-index: 3;
  transform: translateX(-50%);
  appearance: none;
  border: 0;
  width: clamp(190px, 16vw, 280px);
  padding: 0 26px;
  display: grid;
  place-items: center;
  background: transparent;
  color: #e8c169;
  font-family: 'Redemption', Georgia, serif;
  font-size: 22px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  cursor: pointer;
  text-shadow: 0 2px 3px rgba(0, 0, 0, .9);
  transition: color 140ms ease;
}

/* site_auth.js hides this by setting the `hidden` attribute, but a class rule
   setting display beats the UA stylesheet's [hidden] { display: none }, so the
   button stayed on the bar for signed-out visitors. The panel behind it was
   never reachable - every route is gated server side against live Discord
   roles - but advertising a staff door to everyone is its own problem. */
.site-top-admin-button[hidden] {
  display: none;
}

/* Copied stop for stop from .site-top-link::before in styles.css so the border
   flows in step with the rest of the bar. */
.site-top-admin-button::before {
  content: '';
  position: absolute;
  inset: 1px;
  z-index: 2;
  padding: 2px;
  pointer-events: none;
  background:
    conic-gradient(
      from var(--browse-angle),
      var(--browse-primary) 0deg,
      var(--browse-primary) 82deg,
      var(--browse-deep) 128deg,
      var(--browse-highlight) 158deg,
      var(--browse-primary) 198deg,
      var(--browse-accent) 250deg,
      var(--browse-primary) 306deg,
      var(--browse-primary) 360deg
    );
  animation: menu-border-flow var(--browse-duration) linear infinite;
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  mask-composite: exclude;
  opacity: 0;
  transition: opacity 140ms ease;
}

/* Redemption sits low in its own box, so the label is nudged back to centre. */
.site-top-admin-label {
  position: relative;
  z-index: 1;
}

/* Hover plate. Without something behind it the animated border reads as an
   empty rectangle floating on the bar; this fills it with a dark, slightly lit
   face so it looks like a key you can press. It sits under the label (z-index
   1) and under the border (z-index 2). */
.site-top-admin-button::after {
  content: '';
  position: absolute;
  inset: 1px;
  z-index: 0;
  pointer-events: none;
  background:
    linear-gradient(
      180deg,
      rgba(34, 10, 7, .66) 0%,
      rgba(12, 4, 3, .82) 100%
    );
  box-shadow:
    inset 0 1px 0 rgba(255, 214, 140, .16),
    inset 0 -10px 18px rgba(0, 0, 0, .5);
  opacity: 0;
  transition: opacity 140ms ease;
}

.site-top-admin-button:is(:hover, :focus-visible, .is-focused)::after {
  opacity: 1;
}

/* A single pixel of travel is enough to feel like a press. */
.site-top-admin-button:active {
  transform: translateX(-50%) translateY(1px);
}

.site-top-admin-button:is(:hover, :focus-visible, .is-focused) {
  outline: none;
  color: #ffe6a6;
  background: transparent;
  text-decoration: none;
}

.site-top-admin-button:is(:hover, :focus-visible, .is-focused)::before {
  opacity: .96;
}

.site-top-account-actions .site-top-auth-button { margin-left: 0; }

.ticket-admin-view {
  padding: 72px clamp(22px, 3vw, 58px) 42px;
  overflow: auto;
  background:
    /* edge vignette, painted normally */
    radial-gradient(
      132% 104% at 50% 42%,
      rgba(0, 0, 0, 0) 54%,
      rgba(10, 3, 3, .30) 78%,
      rgba(8, 2, 2, .60) 100%
    ) center / cover fixed no-repeat,
    /* red glow, screened so it lifts the forest instead of veiling it */
    radial-gradient(
      120% 90% at 50% 0%,
      rgba(196, 26, 12, .52),
      rgba(96, 10, 5, .26) 60%,
      rgba(0, 0, 0, 0) 100%
    ) center / cover fixed no-repeat,
    url('../../assets/backgrounds/red_forest.png') center bottom / cover fixed no-repeat;
  background-blend-mode: normal, screen, normal;
}

@media (min-width: 821px) {
  body.has-site-top-bar:has(.ticket-admin-view.is-active) #app {
    --app-content-height: calc(100vh - 58px - 3.2vh);
    padding-top: 0;
    padding-inline: 0;
  }
}

#app.is-subroute > .stage > .ticket-admin-view { top: 0; }

/* The tint and the vignette live on .ticket-admin-view's own background now.
   As absolutely positioned overlays they were clipped to one viewport height
   inside the scroller and left a visible cutoff partway down the page. */

.ticket-admin-app {
  position: relative;
  z-index: 1;
  isolation: isolate;
  max-width: 1760px;
  margin: 0 auto;
  padding: clamp(20px, 2vw, 34px);
  border: 1px solid rgba(225, 215, 193, .08);
  box-shadow: 0 18px 34px rgba(0, 0, 0, .42);
}

/* The heading sits at the top of the panel, straight on the brightest part of
   the backdrop. This darkens the panel under it - heaviest at the top, gone by
   the time it reaches the queue - so the title and the eyebrow keep their
   contrast without dulling the rest of the page down again. */
.ticket-admin-app::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(
      180deg,
      rgba(6, 3, 3, .68) 0,
      rgba(6, 3, 3, .52) 190px,
      rgba(6, 3, 3, .30) 380px,
      rgba(6, 3, 3, .22) 100%
    );
}

.ta-command-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 30px;
  padding: 0 4px 23px;
  border: 0;
  background: url('../../assets/ui/divider_line.png') center bottom / 100% 4px no-repeat;
}

.ta-command-title > span,
.ta-eyebrow,
.ta-rail-label {
  display: block;
  color: #c94736;
  font: 11px 'RDRLino', Georgia, serif;
  letter-spacing: 2px;
  text-transform: uppercase;
}

.ta-command-title h1 {
  margin: 5px 0 4px;
  color: #f0e7d5;
  font: clamp(38px, 4vw, 66px) 'Redemption', 'RDRLino', Georgia, serif;
  letter-spacing: 1px;
  text-transform: uppercase;
  text-shadow: 3px 4px 0 #120000, 0 0 18px rgba(177, 8, 8, .45);
}

.ta-command-title p { margin: 0; max-width: 780px; color: rgba(223, 213, 194, .74); font: 17px/1.5 'RDRChalk', 'RDRLedger', Georgia, serif; letter-spacing: .2px; }

.ta-command-status {
  min-width: 154px;
  padding: 8px 2px 6px 20px;
  border: 0;
  background: transparent;
  text-align: right;
}

.ta-command-status i { display: inline-block; width: 7px; height: 7px; margin-right: 7px; border-radius: 50%; background: #d6b36a; box-shadow: 0 0 8px #d6b36a; }
.ta-command-status span { color: #d9cdb8; font: 11px 'RDRLino', serif; letter-spacing: 1px; text-transform: uppercase; }
.ta-command-status strong { display: block; margin-top: 6px; color: #f0e7d5; font: 24px 'RDRLino', serif; text-shadow: 0 2px 3px #000; }

/* Read state at a glance: bone white when the queue holds nothing new, deep
   red the moment a ticket arrives or somebody writes in one. Lit rather than
   flat, because a dark red on this ground would read as switched off. */
.ta-command-status strong.has-unread {
  color: var(--browse-deep, rgba(177, 8, 8, .98));
  text-shadow: 0 0 16px rgba(177, 8, 8, .45);
}

/* Three tracks so the desk switch sits dead centre of the panel no matter
   how wide the refresh button is: empty gutter, switch, refresh. */
.ta-desk-tabs {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 8px;
  padding: 16px 0 18px;
}
/* The switch rides the panel's top edge like a real tab strip: lifted out of
   the row so it straddles the border, half above and half below.
   .ticket-admin-app is position:relative, so it is the containing block. */
.ta-desk-switch {
  position: absolute;
  left: 0;
  /* bottom:100% puts the strip fully above the panel's top edge, resting on
     the border rather than sitting across it. */
  bottom: 100%;
  z-index: 4;
  transform: none;
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  gap: 6px;
}
.ta-desk-back {
  position: absolute;
  right: 0;
  bottom: 100%;
  z-index: 4;
  display: flex;
  align-items: flex-end;
}
.ta-desk-tabs button,
.ta-staff-controls button,
.ta-reply button {
  appearance: none;
  border: 0;
  padding: 10px 14px;
  background: url('../../assets/ui/selection_box_bg_1d.png') center / 100% 100% no-repeat;
  color: rgba(230, 219, 198, .72);
  font: 12px 'RDRLino', Georgia, serif;
  letter-spacing: .7px;
  text-transform: uppercase;
  cursor: pointer;
}
.ta-desk-tabs button:is(:hover, :focus-visible, .is-active),
.ta-staff-controls button:is(:hover, :focus-visible),
.ta-reply button:is(:hover, :focus-visible) {
  color: #fff3da;
  border-color: transparent;
  background-image: url('../../assets/ui/selected.png');
  box-shadow: none;
}
/* Round, iconic and unlabelled: it acts on the queue rather than naming a
   place, so it should not read as another tab. Same slab palette as the desk
   tabs so it still belongs to the strip. */
/* .ta-command-status is text-align:right; a flex row keeps the round token on
   that same edge instead of leaving it to inline alignment. */
.ta-queue-refresh {
  display: flex;
  justify-content: flex-end;
  margin-top: 12px;
}

.ta-queue-refresh button {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  margin-bottom: 4px;
  padding: 0;
  border: 1px solid rgba(110, 110, 110, .34);
  border-radius: 50%;
  background: rgba(4, 4, 4, .58);
  color: rgba(202, 202, 202, .72);
  cursor: pointer;
  transition: color 140ms ease, border-color 140ms ease, background 140ms ease;
}

.ta-queue-refresh svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 420ms cubic-bezier(.4, 0, .2, 1);
}

.ta-queue-refresh button:is(:hover, :focus-visible) {
  border-color: var(--browse-primary, rgba(95, 1, 1, .98));
  background: rgba(8, 8, 8, .88);
  color: rgba(193, 137, 34, .98);
  outline: none;
}

/* A half turn on hover says what the control does without a word of label. */
.ta-queue-refresh button:is(:hover, :focus-visible) svg { transform: rotate(180deg); }

.ta-queue-refresh button:active svg { transform: rotate(360deg); }
/* Chat-style tabs. The ticket console draws its open tickets as .tk-tab, so
   the desk switch borrows the same treatment and the two staff surfaces read
   as one system: a dark slab with a hairline box, dim until picked, then gold
   with the seam under it lit. */
.ta-desk-tabs button:is([data-admin-brand], [data-admin-close]) {
  /* The label is gold, the frame under and around it stays the site's dull
     red - the same split the rest of the BRK chrome uses. */
  --tab-color: rgba(193, 137, 34, .98);
  --tab-frame: var(--browse-primary, rgba(95, 1, 1, .98));

  position: relative;
  display: flex;
  align-items: baseline;
  gap: 7px;
  padding: 13px 30px 10px;
  border: 1px solid rgba(110, 110, 110, .34);
  border-bottom-color: rgba(110, 110, 110, .58);
  background: rgba(4, 4, 4, .58);
  color: rgba(202, 202, 202, .72);
  font-family: 'Redemption', Georgia, serif;
  font-size: 22px;
  line-height: 1;
  letter-spacing: .5px;
  text-transform: uppercase;
  opacity: .78;
  filter: none;
  transition: opacity 140ms ease, color 140ms ease;
}
.ta-desk-tabs button:is([data-admin-brand], [data-admin-close]):is(:hover, :focus-visible) {
  background: rgba(4, 4, 4, .58);
  color: rgba(226, 219, 203, .92);
  filter: none;
  opacity: 1;
  outline: none;
}
.ta-desk-tabs button[data-admin-brand].is-active {
  border-color: var(--tab-frame);
  background: rgba(8, 8, 8, .88);
  color: var(--tab-color);
  filter: none;
  opacity: 1;
  text-shadow: none;
}
/* Bridges the tab into whatever sits under it, the way the console tabs do. */
.ta-desk-tabs button[data-admin-brand].is-active::after {
  content: '';
  position: absolute;
  right: 5px;
  bottom: -1px;
  left: 5px;
  height: 1px;
  background: var(--tab-frame);
  box-shadow: 0 0 5px rgba(0, 0, 0, .72);
}

.ta-command-grid { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 18px; min-height: 560px; }

.ta-department-rail {
  padding: 18px 13px;
  border: 0;
  background: transparent;
  box-shadow: none;
}
.ta-rail-label { margin: 0 9px 17px; color: rgba(222, 210, 188, .5); }
.ta-dept { display: flex; justify-content: space-between; align-items: center; width: 100%; min-height: 64px; margin: 5px 0; padding: 17px 16px; border: 0; background: url('../../assets/ui/selection_box_bg_1d.png') center / 100% 100% no-repeat; color: rgba(222, 210, 188, .66); font: 15px 'RDRLino', serif; text-align: left; cursor: pointer; }
.ta-dept b { min-width: 24px; color: #b44132; text-align: right; }
.ta-dept:is(:hover, :focus-visible, .is-active) { color: #fff0d5; background-image: url('../../assets/ui/selection_box_bg_1d.png'); box-shadow: none; filter: brightness(1.22) drop-shadow(0 0 5px rgba(194, 18, 10, .58)); outline: none; }
.ta-dept.is-active { padding-left: 19px; }

.ta-queue-board { display: grid; grid-template-columns: repeat(2, minmax(280px, 1fr)); gap: 15px; }
.ta-queue-column { position: relative; isolation: isolate; min-width: 0; border: 0; background: transparent; box-shadow: none; }
.ta-queue-column::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(rgba(116, 15, 10, .7), rgba(50, 6, 5, .76)), url('../../assets/backgrounds/red_forest.png') center / cover no-repeat; opacity: .72; -webkit-mask: url('../../assets/ui/inkroller_1a.png') center / 100% 100% no-repeat; mask: url('../../assets/ui/inkroller_1a.png') center / 100% 100% no-repeat; }
.ta-queue-column > * { position: relative; z-index: 1; }
.ta-queue-column > header { display: flex; align-items: center; justify-content: space-between; margin: 0 14px; padding: 20px 9px 18px; border: 0; background: url('../../assets/ui/divider_line.png') center bottom / 100% 3px no-repeat; }
.ta-queue-column h2 { margin: 3px 0 0; color: #e9deca; font: 26px 'Redemption', Georgia, serif; letter-spacing: 1px; text-transform: uppercase; }
.ta-queue-column > header b { color: rgba(232, 219, 194, .85); font: 28px 'RDRLino', serif; }
.ta-stack-shell { position: relative; }
.ta-ticket-stack { display: grid; gap: 8px; align-content: start; padding: 10px 18px 10px 10px; max-height: calc(100vh - 280px); min-height: 465px; overflow: auto; }

.ta-ticket.brk-link-card { --brk-link-card-height: auto; --brk-link-card-padding: 15px 16px; display: grid; gap: 6px; width: 100%; min-height: 116px; color: #ddd0b9; text-align: left; cursor: pointer; }
.ta-ticket.brk-link-card::before {
  background: url('../../assets/ui/hud_location_bg2.png') center / 100% 100% no-repeat;
  opacity: .96;
  -webkit-mask: none;
  mask: none;
}
.ta-ticket.brk-link-card::after {
  display: block;
  inset: -3px;
  z-index: -2;
  background: rgba(207, 25, 15, .82);
  opacity: 0;
  filter: blur(8px);
  -webkit-mask: url('../../assets/ui/hud_location_bg2.png') center / 100% 100% no-repeat;
  mask: url('../../assets/ui/hud_location_bg2.png') center / 100% 100% no-repeat;
}
.ta-ticket.brk-link-card:is(:hover, :focus-visible, .is-selected) { box-shadow: none; filter: brightness(1.12); transform: translateX(3px); }
.ta-ticket.brk-link-card:is(:hover, :focus-visible, .is-selected)::after { opacity: .9; }
.ta-ticket-topline, .ta-ticket-meta { display: flex; justify-content: space-between; gap: 12px; }
.ta-ticket-topline strong { color: #ca4233; font: 12px 'RDRLino', serif; letter-spacing: 1px; }
.ta-ticket-topline small, .ta-ticket-meta { color: rgba(218, 206, 183, .46); font: 11px Georgia, serif; }
.ta-ticket-type { color: #f0e4ce; font: 16px 'RDRLino', serif; }
.ta-ticket-subject { overflow: hidden; color: rgba(223, 211, 188, .68); font: 13px/1.35 Georgia, serif; text-overflow: ellipsis; white-space: nowrap; }
.ta-ticket-meta { padding-top: 6px; border-top: 1px solid rgba(220, 208, 186, .08); }
.ta-ticket-meta em { color: #b99c65; font-style: normal; }
.ta-empty { display: grid; place-content: center; min-height: 180px; color: rgba(220, 208, 186, .3); text-align: center; }
.ta-empty strong { font: 30px 'Redemption', Georgia, serif; letter-spacing: 1px; text-transform: uppercase; }
.ta-empty span { margin-top: 4px; font: 15px 'RDRChalk', 'RDRLedger', Georgia, serif; letter-spacing: .2px; }

.ta-scroll-controls {
  position: absolute;
  z-index: 5;
  top: 50%;
  right: -11px;
  display: grid;
  gap: 7px;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-50%);
  transition: opacity 140ms ease;
}

.ta-stack-shell.has-overflow .ta-scroll-controls {
  opacity: 1;
  pointer-events: auto;
}

.ta-scroll-arrow {
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  background-color: transparent;
  background-position: center;
  background-size: 23px 23px;
  background-repeat: no-repeat;
  cursor: pointer;
  filter: drop-shadow(0 2px 3px #000);
}

.ta-scroll-arrow.is-up { background-image: url('../../assets/ui/button_0_img.png'); }
.ta-scroll-arrow.is-down { background-image: url('../../assets/ui/button_1_img.png'); }
.ta-scroll-arrow:disabled { opacity: .24; cursor: default; }
.ta-scroll-arrow:not(:disabled):is(:hover, :focus-visible) { filter: brightness(1.45) drop-shadow(0 0 5px rgba(255, 241, 211, .52)); }

.ta-detail-scrim { position: fixed; z-index: 320; inset: 54px 0 0; background: rgba(0, 0, 0, .66); backdrop-filter: blur(2px); }
.ta-detail { position: fixed; z-index: 321; top: 54px; right: 0; bottom: 0; display: flex; flex-direction: column; width: min(680px, 94vw); padding: 34px 30px; border: 0; background: url('../../assets/ui/interaction_frame_square.png') center / 100% 100% no-repeat; box-shadow: -18px 0 50px rgba(0, 0, 0, .72); }
.ta-detail-header { display: flex; align-items: center; justify-content: space-between; padding-bottom: 18px; border: 0; background: url('../../assets/ui/divider_line.png') center bottom / 100% 3px no-repeat; }
.ta-detail-header span { color: #c44738; font: 11px 'RDRLino', serif; letter-spacing: 1px; text-transform: uppercase; }
.ta-detail-header h2 { margin: 3px 0 0; color: #f3e7ce; font: 36px 'Redemption', Georgia, serif; letter-spacing: .6px; }
.ta-detail-header button { border: 0; padding: 8px 13px; background: url('../../assets/ui/selection_box_bg_1d.png') center / 100% 100% no-repeat; color: #d7cbb5; font: 12px 'RDRLino', serif; cursor: pointer; }
.ta-detail-header button:is(:hover, :focus-visible) { background-image: url('../../assets/ui/selected.png'); }
.ta-detail-summary { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; margin: 14px 0; background: transparent; }
.ta-detail-summary span { min-width: 0; padding: 13px; background: url('../../assets/ui/hud_location_bg2.png') center / 100% 100% no-repeat; }
.ta-detail-summary small { display: block; margin-bottom: 4px; color: #9f392e; font: 9px 'RDRLino', serif; letter-spacing: .7px; text-transform: uppercase; }
.ta-detail-summary strong { display: block; overflow: hidden; color: #e2d6c0; font: 12px Georgia, serif; text-overflow: ellipsis; white-space: nowrap; }
.ta-detail-subject { margin: 0 0 12px; color: #eadfcb; font: 17px/1.35 Georgia, serif; }
.ta-staff-controls { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding: 17px; border: 0; background: url('../../assets/ui/hud_location_bg2.png') center / 100% 100% no-repeat; }
.ta-staff-controls label { display: grid; gap: 4px; color: rgba(222, 210, 188, .55); font: 10px 'RDRLino', serif; text-transform: uppercase; }
.ta-staff-controls select { width: 100%; min-width: 0; padding: 9px; border: 0; background: url('../../assets/ui/selection_box_bg_1d.png') center / 100% 100% no-repeat; color: #e5d9c2; font: 12px Georgia, serif; }
.ta-collaborators { display: flex; justify-content: space-between; gap: 12px; padding: 10px 2px; color: rgba(222, 210, 188, .46); font: 11px Georgia, serif; }
.ta-collaborators strong { color: #bfae8c; font-weight: normal; }
.ta-collaborators strong > span { display: inline-flex; align-items: center; gap: 5px; margin-left: 8px; }
.ta-collaborators [data-admin-remove-player] { padding: 2px 7px; border: 0; background: rgba(82, 8, 4, .7); color: #d5c7ac; font: 9px 'RDRLino', serif; text-transform: uppercase; cursor: pointer; }
.ta-collaborators [data-admin-remove-player]:is(:hover, :focus-visible) { color: #fff1d5; background: rgba(142, 13, 6, .9); outline: 1px solid rgba(235, 64, 34, .55); }
/* The transcript and the reply box are the ticket console's own .tk-feed and
   .tk-composer, so a staff member reads the same conversation in the same
   shape the player sees. brk-tickets.css carries the look; the only thing
   needed here is making the feed the panel's flexible middle. */
.ta-detail .tk-feed.ta-transcript {
  flex: 1 1 auto;
  min-height: 180px;
  margin: 4px 0 0;
  padding: 10px 2px;
  overflow-y: auto;
}

.ta-detail .tk-composer.ta-composer {
  flex: 0 0 auto;
  margin-top: 12px;
  padding-top: 14px;
  border-top: 1px solid rgba(220, 208, 186, .18);
}

/* The panel styles bare buttons with a plate; the Send button is a real BRK
   menu row and brings its own. */
.ta-detail .tk-composer .tk-menu-btn {
  background-image: url('../../assets/ui/selection_box_bg_1d.png');
  font: inherit;
  letter-spacing: normal;
  text-transform: none;
  padding: 0;
}

.ta-detail .tk-composer-hint {
  flex: 0 0 auto;
  margin: 8px 0 0;
}
.ta-error { margin: 0 0 12px; padding: 14px 17px; border: 0; background: url('../../assets/ui/inkroller_1a.png') center / 100% 100% no-repeat; color: #e5b9ac; font: 13px Georgia, serif; }
/* Scrim over the panel while a refresh is in flight. .ticket-admin-app is
   position:relative, so inset:0 covers the panel body - the desk tabs sit
   above its top edge and deliberately stay reachable. */
.ta-busy {
  position: absolute;
  inset: 0;
  z-index: 6;
  display: grid;
  place-items: center;
  background: rgba(6, 3, 3, .55);
  animation: ta-access-fade 180ms ease both;
}

/* Its own opaque plate, so the wording never has the queue showing through it. */
.ta-busy span {
  padding: 15px 34px 13px;
  border: 1px solid var(--browse-primary, rgba(95, 1, 1, .98));
  background: rgba(9, 6, 6, .97);
  color: #f0e7d5;
  font: 30px 'Redemption', Georgia, serif;
  letter-spacing: 1px;
  text-transform: uppercase;
  box-shadow: 0 10px 34px rgba(0, 0, 0, .6);
}

/* Fading in rather than cutting takes the last of the harshness off the swap,
   and costs nothing on the states that sit there permanently. */
@keyframes ta-access-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.ta-access-state { animation: ta-access-fade 220ms ease both; }

.ta-access-state { display: grid; place-content: center; min-height: 70vh; text-align: center; }
.ta-access-state span { color: #b74638; font: 11px 'RDRLino', serif; letter-spacing: 2px; text-transform: uppercase; }
.ta-access-state h1 { margin: 8px 0; color: #eee2cc; font: clamp(34px, 5vw, 64px) 'Redemption', Georgia, serif; letter-spacing: 1px; text-transform: uppercase; }
.ta-access-state p { color: rgba(222, 210, 188, .7); font: 17px 'RDRChalk', 'RDRLedger', Georgia, serif; }

@media (max-width: 900px) {
  /* Narrow bars have no room for a centred overlay - it lands on top of the
     nav links. Drop it back into the flow instead: it is already the first
     child of .site-top-account-actions, which sits straight after the nav, so
     static positioning puts it right after Support and before Log On. */
  .site-top-admin-button {
    position: static;
    transform: none;
    width: auto;
    min-width: 0;
    flex: 0 0 auto;
    align-self: stretch;
    padding: 0 14px;
    font-size: 15px;
    letter-spacing: .8px;
  }

  /* The greeting button is min-width:136px and flex:0 0 auto, so on a narrow
     bar it pushes past the right edge and gets clipped. Let it shrink and
     ellipsis instead - it already has overflow hidden. */
  .site-top-account-actions .site-top-auth-button {
    flex: 0 1 auto;
    min-width: 0;
    max-width: 38vw;
  }

  .site-top-admin-button:active {
    transform: translateY(1px);
  }
  .ticket-admin-view { padding-inline: 12px; }
  .ta-command-header { align-items: flex-start; }
  .ta-command-status { display: none; }
  .ta-command-grid { grid-template-columns: 1fr; }
  .ta-department-rail { display: flex; overflow-x: auto; padding: 8px; }
  .ta-rail-label { display: none; }
  .ta-dept { flex: 0 0 auto; width: auto; gap: 15px; }
  .ta-queue-board { grid-template-columns: 1fr; }
  .ta-ticket-stack { min-height: 0; max-height: 46vh; }
  .ta-scroll-controls { right: 0; }
}

@media (max-width: 820px) {
  /* On a phone this view used to be pinned to the viewport height with the
     stage set to overflow:hidden, so the panel became a second scroller
     nested inside a clipped box - and anything past the first screenful was
     simply unreachable. Let the page itself scroll instead: one scroller,
     nothing clipped, content as tall as it needs to be. */
  body.has-site-top-bar:has(.ticket-admin-view.is-active) #app {
    --app-content-height: auto;
    height: auto;
    min-height: 0;
    padding: 0;
  }

  body.has-site-top-bar:has(.ticket-admin-view.is-active) #app > .stage {
    width: 100%;
    height: auto;
    min-height: 0;
    overflow: visible;
  }

  #app.is-subroute > .stage > .ticket-admin-view {
    position: relative;
    top: 0;
    height: auto;
    min-height: 0;
    margin-top: 0;
    padding: 68px 12px 32px;
    width: auto;
    max-width: 100%;
    overflow: visible;
    /* .view.is-active runs the view-in keyframes with fill-mode both, and on
       this view it settles holding the opening translateX(12px) instead of
       the finished "transform: none", which pushes the panel off the right
       edge on a phone. A filled animation outranks a normal declaration, so
       the slide has to be switched off rather than overridden. */
    animation: none;
  }

  /* Inner scrollers fight the page scroll on touch - let them run full height
     and be scrolled as part of the page. */
  .ta-ticket-stack {
    max-height: none;
    min-height: 0;
    overflow: visible;
  }

  .ta-transcript { max-height: none; overflow: visible; }
  .ta-stack-shell .ta-scroll-controls { display: none; }

  .ta-command-grid { min-height: 0; gap: 12px; }
  .ta-desk-tabs { flex-wrap: wrap; }
  /* The ragged hud panel is drawn on .ticket-admin-view's background, so the app
     inside it needs real side padding or the headings, tabs and the refresh
     button sit on the torn edge. 10px was not clearing the artwork. */
  .ticket-admin-app { padding: 16px 22px 22px; }

  /* Stacked, the header no longer needs the wide desktop gutter, and the
     refresh control gets its own row instead of being squeezed to the edge. */
  .ta-command-header { gap: 12px; padding: 0 0 18px; }
  .ta-desk-tabs { gap: 6px; padding: 14px 0 16px; }
  .ta-department-rail { padding: 8px 0; }
}

@media (max-width: 600px) {
  .ta-command-title p { display: none; }
  .ta-command-title h1 { font-size: 39px; }
  /* No room to ride the border this narrow - put the switch back in the row. */
  .ta-desk-switch { position: static; transform: none; }
  .ta-desk-back { position: static; }
  .ta-desk-tabs { grid-template-columns: 1fr; justify-items: center; }
  .ta-desk-spacer { display: none; }
  .ta-desk-tabs button { padding-inline: 9px; font-size: 9px; }
  .ta-detail { padding: 15px; }
  .ta-detail-summary { grid-template-columns: 1fr; }
  .ta-staff-controls { grid-template-columns: 1fr; }
  .ta-reply { grid-template-columns: 1fr; }
}


/* --- staff guide ----------------------------------------------------------
   Documentation inside the admin panel, so it inherits the staff gate rather
   than needing a route and permission check of its own. The menu is a real BRK
   menu shell; the article is plain prose on the same panel ground. */

/* No slab, no frame: the section you are in is said in the same small caps as
   the kicker above it, lit gold, with the other offered dim beside it. The
   desk tabs stay the only tab-shaped thing on the panel. */
.ta-mode-links {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 13px;
}

.ta-mode-links button {
  appearance: none;
  border: 0;
  padding: 2px 0;
  background: none;
  color: rgba(214, 203, 182, .46);
  font: 11px 'RDRLino', Georgia, serif;
  letter-spacing: 2.1px;
  text-transform: uppercase;
  cursor: pointer;
  transition: color 140ms ease;
}

.ta-mode-links button:is(:hover, :focus-visible) {
  color: rgba(240, 231, 213, .92);
  outline: none;
}

.ta-mode-links button.is-active {
  color: rgba(193, 137, 34, .98);
  text-shadow: 0 0 14px rgba(193, 137, 34, .34);
}

/* Sits between the two, so it takes the dim colour rather than either link. */
.ta-mode-links .ta-sep { color: rgba(214, 203, 182, .46); }

.ta-guide-grid {
  display: grid;
  grid-template-columns: 320px minmax(0, 1fr);
  gap: 20px;
  margin-top: 18px;
}

.review-menu-shell.ta-guide-shell {
  width: 100%;
  height: auto;
  min-height: 0;
  padding: 0 0 18px;
}

/* The review menu header is built for a 540px shell: a fixed 472px ornate
   frame centred with a negative translate. Dropped into this 320px column it
   overflowed off both sides of the page. Here it becomes a plain in-flow
   banner that scales with whatever width the column has. */
.ta-guide-shell .review-menu-header {
  flex: 0 0 auto;
  min-height: 0;
  margin-bottom: 12px;
}

.ta-guide-shell .review-menu-title {
  position: static;
  width: 100%;
  height: auto;
  /* Keep the frame art at its native 472x164 proportion so it does not squash. */
  aspect-ratio: 472 / 164;
  padding: 10px 32px 12px;
  transform: none;
  font-size: 25px;
  line-height: 1;
}

.ta-guide-menu .review-menu-row.menu-row {
  width: 100%;
  height: 52px;
}

/* Labels have to survive a narrow column without turning into an ellipsis. */
.ta-guide-menu .review-menu-row .row-label {
  font-size: 17px;
}

.ta-guide-menu .review-menu-row .row-right {
  font-size: 13px;
  padding-left: 8px;
}

.ta-guide-body {
  max-width: 860px;
  padding: 4px 6px 20px;
}

.ta-guide-head span {
  display: block;
  color: #c94736;
  font: 11px 'RDRLino', Georgia, serif;
  letter-spacing: 2px;
  text-transform: uppercase;
}

.ta-guide-head h1 {
  margin: 6px 0 8px;
  color: #f0e7d5;
  font: clamp(28px, 3vw, 44px) 'Redemption', 'RDRLino', Georgia, serif;
  letter-spacing: 1px;
  text-transform: uppercase;
  text-shadow: 3px 4px 0 #120000, 0 0 18px rgba(177, 8, 8, .45);
}

.ta-guide-head p {
  margin: 0 0 6px;
  color: rgba(223, 213, 194, .76);
  font: 17px/1.55 'RDRChalk', 'RDRLedger', Georgia, serif;
  letter-spacing: .2px;
}

.ta-guide-block {
  margin-top: 26px;
  padding-top: 16px;
  border-top: 1px solid rgba(220, 208, 186, .16);
}

.ta-guide-block h2 {
  margin: 0 0 10px;
  color: #e5d9c2;
  font: 15px 'RDRLino', Georgia, serif;
  letter-spacing: 1.4px;
  text-transform: uppercase;
}

.ta-guide-block p,
.ta-guide-block li {
  color: rgba(226, 216, 197, .86);
  font: 16px/1.68 'RDRLino', Georgia, serif;
  letter-spacing: .2px;
}

.ta-guide-block p { margin: 0 0 10px; }
.ta-guide-block ul { margin: 0; padding-left: 20px; }
.ta-guide-block li { margin-bottom: 7px; }

/* Command and control reference rows. */
.ta-guide-table {
  display: grid;
  gap: 10px;
  margin: 0;
}

.ta-guide-table > div {
  display: grid;
  grid-template-columns: minmax(150px, 260px) minmax(0, 1fr);
  gap: 4px 18px;
  padding-bottom: 9px;
  border-bottom: 1px solid rgba(220, 208, 186, .1);
}

.ta-guide-table dt {
  color: #e0b870;
  font: 13px 'RDRLino', Georgia, serif;
  letter-spacing: .6px;
  overflow-wrap: anywhere;
}

.ta-guide-table dd {
  margin: 0;
  color: rgba(226, 216, 197, .84);
  font: 15.5px/1.6 'RDRLino', Georgia, serif;
  letter-spacing: .2px;
}

@media (max-width: 900px) {
  .ta-guide-grid { grid-template-columns: 1fr; gap: 14px; }
  .ta-guide-table > div { grid-template-columns: 1fr; gap: 2px; }
  .ta-guide-body { padding-inline: 0; }
}

/* --- ticket console (staff) -----------------------------------------------
   Managing a ticket is the player's ticket page with staff powers, so it is
   built from the same parts: the page heading, the BRK menu shell on the left
   carrying every action, and the intake, conversation and reply box on the
   right. What separates the two is the heading and the accent - staff work in
   gold, players in red - so it is obvious at a glance which side you are on. */

.ta-console {
  /* Gold instead of red across every .tk-* part inside this panel, which is
     the one visual difference between the staff view and the player view. */
  --tk-ring-base: rgba(96, 63, 6, .98);
  --tk-ring-red: rgba(163, 112, 16, .98);
  --tk-ring-hot: rgba(214, 158, 38, .96);
  --tk-ring-gold: rgba(240, 199, 96, .98);
  --browse-primary: rgba(96, 63, 6, .98);
  --browse-deep: rgba(163, 112, 16, .98);
  --browse-highlight: rgba(214, 158, 38, .96);
  --browse-accent: rgba(240, 199, 96, .98);

  /* A page, not a dialog. It replaces the queue rather than floating over it,
     so it sits in the flow of the panel it already lives in and inherits its
     ground and its scrolling. */
  display: block;
  padding: 4px 0 40px;
  /* The tk classes are written for the ticket view's own typography; the admin
     panel sets fonts on its containers, so they are restated here rather than
     inherited (the separators were landing in a font without them). */
  font-family: 'RDRLino', Georgia, serif;
}

/* .tk-panel brings its own inkroller sheet, which is the ground the player's
   ticket page stands on. Here it lands inside a panel that already has one and
   reads as a stray splotch, so it is switched off - the classes are kept for
   the spacing and the column flow they carry with them. */
.ta-console.tk-panel {
  min-height: 0;
  padding: 4px 0 40px;
  filter: none;
}

.ta-console.tk-panel::before {
  content: none;
}

/* Left aligned, like every other screen with a BRK menu on it. */
.ta-console-head {
  margin: 0 0 20px;
  padding-left: 4px;
  text-align: left;
}

.ta-console-head .stage-divider {
  margin-left: 0;
}

.ta-console-head h1 {
  margin: 4px 0 0;
  color: #e8c169;
  font: clamp(38px, 4.4vw, 68px) 'Redemption', Georgia, serif;
  font-weight: 400;
  line-height: .95;
  letter-spacing: 1px;
  text-transform: uppercase;
  text-shadow: 0 3px 3px rgba(0, 0, 0, .95), 0 0 26px rgba(193, 137, 34, .28);
}

.ta-console-head .stage-kicker {
  color: rgba(214, 179, 106, .62);
}

/* The plain torn rule rather than the arrow ornament - the arrows read as a
   player-facing flourish, and this is a work screen. */
.ta-console-head .stage-divider {
  width: min(720px, 100%);
  height: 6px;
  margin: 12px 0 0;
  background: url('../../assets/ui/divider_line.png') left center / 100% 100% no-repeat;
  filter: none;
  opacity: .9;
}

/* The menu shell stays on the left and the conversation takes the rest of the
   width. Nothing is centred, and nothing is capped in the middle of a wide
   screen - the queue behind it is not either. */
/* Drawn, not typed. The middot was landing in a font without the glyph and
   rendering as an empty box between every word. */
.ta-sep {
  display: inline-block;
  width: 3px;
  height: 3px;
  margin: 0 7px;
  border-radius: 50%;
  background: currentColor;
  opacity: .5;
  vertical-align: middle;
}

.ta-console .tk-layout {
  max-width: none;
  margin: 0;
  justify-content: stretch;
}

/* --- staff actions in the menu shell -------------------------------------- */

/* Selects inside the shell read as rows, not form fields, so the label sits
   above and the control below is the full width of the menu. */
.ta-menu-field {
  display: block;
  margin: 10px 0 2px;
}

.ta-menu-field-label {
  display: block;
  margin: 0 2px 5px;
  color: rgba(222, 210, 188, .5);
  font: 10px 'RDRLino', Georgia, serif;
  letter-spacing: 1.4px;
  text-transform: uppercase;
}

.ta-menu-field .brk-select .brk-select-button {
  min-height: 46px;
  padding: 0 14px 0 16px;
  border: 0;
  background:
    url('../../assets/ui/selection_box_bg_1d.png') center / 100% 100% no-repeat;
  color: rgba(228, 219, 200, .82);
  font-family: 'RDRLedger', Georgia, serif;
  font-size: 17px;
}

.ta-menu-field .brk-select .brk-select-button:hover,
.ta-menu-field .brk-select.is-open .brk-select-button {
  color: #fff6e2;
}

/* --- conversation ---------------------------------------------------------- */

.ta-console .tk-feed.ta-transcript {
  min-height: 120px;
  max-height: min(52vh, 620px);
  overflow-y: auto;
}

.ta-console .tk-composer.ta-composer {
  margin-top: 14px;
}

/* The panel styles bare buttons with a plate; Send is a real BRK menu row and
   brings its own. */
.ta-console .tk-composer .tk-menu-btn {
  font: inherit;
  letter-spacing: normal;
  text-transform: none;
  padding: 0;
}

@media (max-width: 1100px) {
  .ta-console .tk-layout { grid-template-columns: 1fr; }
  .ta-console .review-menu-shell.tk-menu-shell { width: 100%; }
}

@media (max-width: 820px) {
  .ta-console { padding: 4px 0 28px; }
  .ta-console-head h1 { font-size: 34px; }
}

/* --- the pick-one popup ---------------------------------------------------- */

/* Same shell as the confirm, with a short list of menu rows in the middle. */
.brk-choose .brk-uc-panel {
  max-width: 520px;
}

.brk-choose-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: min(44vh, 400px);
  margin: 16px 0 4px;
  padding-right: 8px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(124, 24, 17, .78) rgba(0, 0, 0, .24);
}

.brk-choose-list::-webkit-scrollbar { width: 8px; }
.brk-choose-list::-webkit-scrollbar-track { background: rgba(0, 0, 0, .28); }
.brk-choose-list::-webkit-scrollbar-thumb { background: rgba(124, 24, 17, .78); }

.brk-choose-list .menu-row {
  flex: 0 0 46px;
  width: 100%;
  height: 46px;
}

/* --- staff attachments ----------------------------------------------------- */

/* .tk-composer is a flex row; Attach and Send both sit after the bar and keep
   their own width. */
.ta-console .tk-composer .tk-chips {
  margin-bottom: 8px;
}

.ta-console .tk-composer [data-admin-pick] {
  flex: 0 0 auto;
}

/* --- the menu's drop zone -------------------------------------------------- */

/* Same square the player console uses, sitting under the action rows rather
   than under the intake form. It lives outside .review-menu-rows so the menu's
   own keyboard walk is not interrupted by it. */
.ta-console .ta-drop {
  width: 100%;
  margin-top: 16px;
}

.ta-console .ta-drop-chips {
  margin-top: 10px;
}

/* --- avatars and the profile popup ----------------------------------------- */

/* Every avatar is a button that opens the person's profile. */
.ta-avatar {
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  padding: 0;
  border: 1px solid rgba(214, 179, 106, .28);
  border-radius: 50%;
  background: rgba(6, 4, 4, .7);
  overflow: hidden;
  cursor: pointer;
  transition: border-color 130ms ease, transform 130ms ease;
}

.ta-avatar img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ta-avatar:is(:hover, :focus-visible) {
  outline: none;
  border-color: var(--tk-ring-gold, #e8c169);
  transform: scale(1.06);
}

.ta-console .tk-msg-meta {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Everyone on the ticket, in one block: opener, handler, supporting staff and
   anyone added. Its own layout rather than the one-line participant banner,
   which had nowhere for a wrapping row of faces to go. */
.ta-people {
  margin: 0 0 14px;
  padding: 12px 14px 13px;
  border-left: 2px solid rgba(214, 179, 106, .34);
  background: rgba(0, 0, 0, .26);
}

.ta-people-label {
  margin: 0 0 10px;
  color: rgba(214, 179, 106, .6);
  font: 10px 'RDRLino', Georgia, serif;
  font-weight: 400;
  letter-spacing: 1.6px;
  text-transform: uppercase;
}

.ta-people-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
}

.ta-person {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
}

/* Name over role, so a long name cannot shove the role into the next person. */
.ta-person-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.ta-person-name {
  color: rgba(233, 223, 203, .9);
  font: 14px 'RDRLedger', Georgia, serif;
  line-height: 1.15;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ta-person-role {
  color: rgba(214, 179, 106, .52);
  font: 9px 'RDRLino', Georgia, serif;
  letter-spacing: 1.2px;
  line-height: 1.2;
  text-transform: uppercase;
}

.ta-people .ta-avatar {
  width: 30px;
  height: 30px;
}

/* --- the profile popup ----------------------------------------------------- */

.ta-profile .brk-uc-panel {
  max-width: 520px;
}

.ta-profile-head {
  display: flex;
  align-items: center;
  gap: 16px;
  text-align: left;
}

.ta-profile-avatar {
  flex: 0 0 auto;
  width: 72px;
  height: 72px;
  border: 1px solid rgba(214, 179, 106, .32);
  border-radius: 50%;
  object-fit: cover;
}

.ta-profile-handle {
  margin: 2px 0 0;
  color: rgba(226, 216, 197, .66);
  font: 13px 'RDRLedger', Georgia, serif;
}

.ta-profile-id {
  margin: 3px 0 0;
  color: rgba(204, 213, 216, .38);
  font: 11px Consolas, 'Courier New', monospace;
}

.ta-profile-joined {
  margin: 14px 0 0;
  color: rgba(222, 210, 188, .58);
  font: 12px 'RDRLino', Georgia, serif;
  letter-spacing: .6px;
  text-transform: uppercase;
}

.ta-profile-roles {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 14px 0 4px;
}

/* Each role wears its own Discord colour, with a fallback for the ones that
   have none set. */
.ta-role {
  display: inline-flex;
  align-items: center;
  padding: 4px 11px 5px;
  border: 1px solid var(--role-color, rgba(204, 213, 216, .3));
  background: rgba(8, 5, 5, .6);
  color: var(--role-color, rgba(226, 216, 197, .82));
  font: 12px 'RDRLedger', Georgia, serif;
  letter-spacing: .2px;
}

.ta-profile-none,
.ta-profile-note {
  margin: 14px 0 0;
  color: rgba(204, 213, 216, .5);
  font: 12px Georgia, serif;
  font-style: italic;
}

/* Banning is the one destructive control in the panel, so it does not look
   like the rest of the menu rows. A real red rather than the washed-out pink
   that a low-saturation tint turns into on the grey plate. */
.ta-ban .row-label {
  color: #e03a22;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .9);
}

.ta-ban:is(:hover, :focus-visible) .row-label {
  color: #ff5334;
}

/* --- role picker ----------------------------------------------------------- */

.ta-roles .brk-uc-panel {
  max-width: 520px;
}

.ta-role-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: min(46vh, 420px);
  margin: 18px 0 4px;
  /* Room for the scrollbar so it never sits on top of a row. */
  padding-right: 8px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(124, 24, 17, .78) rgba(0, 0, 0, .24);
}

/* A flex column shrinks its children to fit before it agrees to scroll, which
   is what crushed thirty roles into a squashed stack. flex-shrink: 0 makes the
   rows keep their height and the list scroll instead. */
.ta-role-list .menu-row {
  flex: 0 0 46px;
  width: 100%;
  height: 46px;
}

/* Chromium needs its own scrollbar rules; the site's dropdowns use the same
   dull red on a dark track. */
.ta-role-list::-webkit-scrollbar {
  width: 8px;
}

.ta-role-list::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, .28);
}

.ta-role-list::-webkit-scrollbar-thumb {
  background: rgba(124, 24, 17, .78);
  border-radius: 0;
}

.ta-role-list::-webkit-scrollbar-thumb:hover {
  background: rgba(168, 34, 22, .9);
}

/* A role the player already has reads as something to take away. */
.ta-role-row .row-right {
  color: rgba(214, 179, 106, .6);
  font-size: 11px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
}

.ta-role-row.is-held .row-right {
  color: rgba(224, 58, 34, .8);
}

.ta-role-row.is-busy {
  opacity: .5;
  pointer-events: none;
}

.ta-role-status:empty {
  display: none;
}

.ta-role-status {
  margin: 10px 0 0;
  color: #e8a99c;
  font: 12px Georgia, serif;
}

/* --- profile at a glance --------------------------------------------------- */

.ta-profile-names {
  min-width: 0;
}

/* A server nickname and a global display name are two different things, and a
   report often names one while the ticket shows the other. */
.ta-profile-alias {
  margin: 3px 0 0;
  color: rgba(226, 216, 197, .52);
  font: 12px 'RDRChalk', 'RDRLedger', Georgia, serif;
}

.ta-profile-facts {
  display: grid;
  gap: 1px;
  margin: 16px 0 4px;
  text-align: left;
}

.ta-profile-facts > div {
  display: grid;
  grid-template-columns: minmax(120px, 150px) minmax(0, 1fr);
  gap: 14px;
  padding: 7px 10px;
  background: rgba(0, 0, 0, .24);
}

.ta-profile-facts dt {
  color: rgba(214, 179, 106, .58);
  font: 10px 'RDRLino', Georgia, serif;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  align-self: center;
}

.ta-profile-facts dd {
  margin: 0;
  color: rgba(230, 220, 201, .86);
  font: 13px 'RDRLedger', Georgia, serif;
  overflow-wrap: anywhere;
}

/* A days-old account, a live timeout, an existing ban - the things that should
   catch the eye before a decision gets made. */
.ta-profile-facts > div.is-flagged {
  background: rgba(96, 12, 6, .38);
  box-shadow: inset 2px 0 0 #e03a22;
}

.ta-profile-facts > div.is-flagged dd {
  color: #f0c8bd;
}

/* --- add player ------------------------------------------------------------ */

.ta-addplayer .brk-uc-panel {
  max-width: 520px;
}

/* The search field is the ticket console's own input bar, so it carries the
   same ring and focus behaviour as the reply box. */
.ta-add-bar {
  display: block;
  margin: 18px 0 12px;
}

.ta-add-bar .tk-input {
  width: 100%;
  min-height: 40px;
}

.ta-add-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 60px;
  max-height: min(38vh, 340px);
  padding-right: 8px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(124, 24, 17, .78) rgba(0, 0, 0, .24);
}

.ta-add-list::-webkit-scrollbar { width: 8px; }
.ta-add-list::-webkit-scrollbar-track { background: rgba(0, 0, 0, .28); }
.ta-add-list::-webkit-scrollbar-thumb { background: rgba(124, 24, 17, .78); }

.ta-add-list .menu-row {
  flex: 0 0 46px;
  width: 100%;
  height: 46px;
}

.ta-add-row .row-right {
  color: rgba(204, 213, 216, .45);
  font: 12px 'RDRLedger', Georgia, serif;
}

.ta-add-row.is-busy {
  opacity: .5;
  pointer-events: none;
}

/* A match that cannot be added: shown, dimmed, with the reason where the
   handle would be. Not a button - there is nothing to press. */
.ta-add-row.is-blocked {
  opacity: .42;
  cursor: default;
  pointer-events: none;
}

.ta-add-row.is-blocked .row-right {
  color: rgba(214, 179, 106, .7);
  font: 10px 'RDRLino', Georgia, serif;
  letter-spacing: 1.2px;
  text-transform: uppercase;
}