/* ---------------------------------------------------------------------------
   BRK Ticket System - console

   Two columns. Left keeps the site's own BRK menu shell, carrying nothing but
   the ticket categories. Right is BRK Chat: inkroller panel ground, channel
   tabs across the top, and the chat input bar (dark translucent slab plus an
   animated conic border) for every field.
   --------------------------------------------------------------------------- */

@property --brk-ticket-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

@keyframes brk-ticket-border-flow {
  to { --brk-ticket-angle: 360deg; }
}

.ticket-view {
  width: 100%;
}

.ticket-app {
  --tk-red: rgba(177, 8, 8, .98);
  --tk-deep: rgba(105, 20, 28, .96);
  --tk-highlight: rgba(255, 255, 255, .92);

  /* Input rings borrow the BRK menu button palette straight from styles.css
     so the chat bars and the buttons flow through the same red/gold. The old
     ring put a white stop at 158deg, which is what read as a pale border.
     --tk-highlight stays white, but only for link hovers now. */
  --tk-ring-base: var(--browse-primary, rgba(95, 1, 1, .98));
  --tk-ring-red: var(--browse-deep, rgba(177, 8, 8, .98));
  --tk-ring-hot: var(--browse-highlight, rgba(197, 32, 7, .96));
  --tk-ring-gold: var(--browse-accent, rgba(193, 137, 34, .98));
  --tk-gold: rgba(207, 157, 62, .98);
  --tk-text: rgba(255, 255, 255, .96);
  --tk-name: rgba(204, 213, 216, .96);
  --tk-dim: rgba(204, 213, 216, .58);
  --tk-faint: rgba(204, 213, 216, .38);
  --tk-slab: rgba(5, 5, 5, .46);
  --tk-flow: var(--browse-duration, 5250ms);

  /* Flush left inside the stage. Centring this block pushed the menu into the
     middle of the page and squeezed the work area next to it. */
  width: 100%;
  max-width: 1600px;
  margin: 0;
  font-family: 'RDRLedger', Georgia, serif;
}

/* --- layout --------------------------------------------------------------- */

.tk-layout {
  display: grid;
  grid-template-columns: 540px minmax(0, 1fr);
  gap: 26px;
  align-items: start;
  justify-content: start;
}

.tk-menu,
.tk-main {
  min-width: 0;
}

/* --- left BRK menu -------------------------------------------------------- */

.tk-menu {
  position: relative;
}

/* selection_box_bg_1d.png is translucent. Elsewhere on the site these menus
   sit on the shell's dark ground; on a view they sat straight on the red
   branch backdrop, which bled through every row and washed the labels out.
   This puts the dark ground back under the rows, starting below the header
   art so the ornate frame still reads. */
.tk-menu::before {
  content: '';
  position: absolute;
  inset: 120px -10px -6px;
  background: linear-gradient(180deg, rgba(8, 5, 5, .55), rgba(5, 3, 3, .88));
  box-shadow: 0 0 40px 20px rgba(5, 3, 3, .6);
  pointer-events: none;
}

.tk-menu > * {
  position: relative;
}

/* The site's menu shell is a fixed 540x790 slab. As a category list it only
   needs to be as tall as its rows. */
.review-menu-shell.tk-menu-shell {
  width: 540px;
  height: auto;
  /* Tall enough to read as a proper menu panel rather than a couple of rows
     floating under the header art. */
  min-height: min(620px, 74vh);
  padding: 0 54px 26px;
}

/* Dropdown lists have to escape the menu's dark ground and sit above the
   rows below them. */
.tk-dropdown {
  z-index: 40;
}

.tk-dropdown.is-open {
  z-index: 60;
}

.review-menu-dropdown-option.is-selected {
  color: var(--tk-gold);
}

/* A menu dropdown the chosen reason does not ask for. */
.tk-dropdown.is-hidden {
  display: none;
}

/* --- tabs ----------------------------------------------------------------- */

.tk-tabs {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 5px;
  padding: 0 2px;
}

.tk-tab {
  --tab-color: var(--tk-gold);

  display: flex;
  align-items: baseline;
  gap: 7px;
  max-width: 260px;
  padding: 8px 12px 4px;
  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: 16px;
  line-height: 1;
  letter-spacing: .3px;
  text-transform: uppercase;
  cursor: pointer;
  opacity: .78;
}

.tk-tab:hover,
.tk-tab.is-focused {
  opacity: 1;
}

.tk-tab.is-active {
  position: relative;
  border-color: var(--tab-color);
  background: rgba(8, 8, 8, .88);
  color: var(--tab-color);
  opacity: 1;
}

.tk-tab.is-active::after {
  content: '';
  position: absolute;
  right: 5px;
  bottom: -1px;
  left: 5px;
  height: 1px;
  background: var(--tab-color);
  box-shadow: 0 0 5px rgba(0, 0, 0, .72);
}

.tk-tab.is-closed {
  --tab-color: rgba(154, 154, 152, .96);
  opacity: .5;
}

.tk-tab.is-new {
  --tab-color: var(--tk-red);
}

.tk-tab-hint {
  color: var(--tk-faint);
  font-family: 'RDRLedger', Georgia, serif;
  font-size: 10.5px;
  letter-spacing: 0;
}

.tk-tab-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* --- panel ---------------------------------------------------------------- */

.tk-panel {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 460px;
  padding: 22px 24px 20px;
  isolation: isolate;
  filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .5));
}

.tk-panel::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -2;
  background: url('../../assets/ui/inkroller_1a.png') bottom left / 100% 100% no-repeat;
  opacity: .42;
  pointer-events: none;
}

.tk-panel > * {
  position: relative;
  z-index: 1;
}

/* --- headings ------------------------------------------------------------- */

.tk-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(204, 213, 216, .14);
}

.tk-head h2 {
  margin: 0;
  color: var(--tk-text);
  font-family: 'Redemption', Georgia, serif;
  font-size: 26px;
  letter-spacing: .5px;
}

.tk-head-meta {
  color: var(--tk-dim);
  font-size: 13px;
}

.tk-head-meta strong {
  color: var(--tk-gold);
  font-weight: 400;
}

.tk-handler-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin: 0 0 12px;
  padding: 10px 13px;
  border-left: 2px solid #b10808;
  background: linear-gradient(90deg, rgba(177, 8, 8, .18), rgba(0, 0, 0, .12));
  color: rgba(224, 212, 191, .65);
  font-size: 12px;
  letter-spacing: .4px;
}

.tk-handler-banner strong {
  color: #eadfc8;
  font-family: 'RDRLino', Georgia, serif;
  font-size: 13px;
  letter-spacing: .65px;
}

.tk-participant-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin: -5px 0 12px;
  padding: 8px 13px;
  border-left: 2px solid rgba(218, 196, 151, .35);
  background: rgba(0, 0, 0, .22);
  color: rgba(224, 212, 191, .5);
  font-size: 11px;
}

.tk-participant-banner strong {
  color: rgba(234, 223, 200, .78);
  font-weight: normal;
}
.tk-participant-banner strong > span { display: inline-flex; align-items: center; gap: 5px; margin-left: 8px; }
.tk-participant-banner button { padding: 2px 7px; border: 0; background: rgba(82, 8, 4, .7); color: #d5c7ac; font: 9px 'RDRLino', serif; text-transform: uppercase; cursor: pointer; }
.tk-participant-banner button:is(:hover, :focus-visible) { background: rgba(142, 13, 6, .9); color: #fff1d5; outline: 1px solid rgba(235, 64, 34, .55); }

/* --- fields --------------------------------------------------------------- */

.tk-fields {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.tk-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.tk-field-label {
  display: flex;
  align-items: baseline;
  gap: 8px;
  color: var(--tk-name);
  font-size: 13px;
  letter-spacing: .5px;
  text-transform: uppercase;
}

.tk-field-label em {
  color: var(--tk-faint);
  font-size: 11px;
  font-style: normal;
  text-transform: none;
}

.tk-field-help {
  margin: 0;
  color: var(--tk-faint);
  font-size: 12px;
}

/* The BRK Chat input bar: translucent slab, animated ring, no chrome. */
.tk-bar {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 38px;
  padding: 8px 14px;
  isolation: isolate;
}

.tk-bar::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -2;
  border-radius: 2px;
  background: var(--tk-slab);
}

.tk-bar::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  padding: 1px;
  border-radius: 2px;
  background: conic-gradient(
    from var(--brk-ticket-angle),
    var(--tk-ring-base) 0deg,
    var(--tk-ring-base) 82deg,
    var(--tk-ring-red) 128deg,
    var(--tk-ring-hot) 158deg,
    var(--tk-ring-base) 198deg,
    var(--tk-ring-gold) 250deg,
    var(--tk-ring-base) 306deg,
    var(--tk-ring-base) 360deg
  );
  animation: brk-ticket-border-flow var(--tk-flow) linear infinite;
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  /* Same glow the focused menu buttons carry. It rides the element opacity,
     so it is barely there at rest and blooms as the bar lights up. */
  filter:
    drop-shadow(0 0 3px var(--tk-ring-hot))
    drop-shadow(0 0 1px rgba(0, 0, 0, .85));
  opacity: .34;
  pointer-events: none;
  transition: opacity 160ms ease;
}

.tk-bar:hover::after,
.tk-bar:focus-within::after {
  opacity: var(--browse-opacity, .94);
}

.tk-bar.is-multiline {
  align-items: stretch;
}

.tk-input {
  flex: 1;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  outline: none;
  resize: none;
  color: var(--tk-text);
  caret-color: var(--tk-gold);
  font-family: 'RDRLedger', Georgia, serif;
  font-size: 16px;
  line-height: 1.45;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .98);
}

.tk-input::placeholder {
  color: rgba(204, 213, 216, .3);
}

select.tk-input {
  appearance: none;
  cursor: pointer;
}

select.tk-input option {
  background: #0b0605;
  color: #eadfca;
}

/* --- buttons -------------------------------------------------------------- */

.tk-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 20px;
}

.tk-button {
  padding: 9px 20px 7px;
  border: 1px solid var(--tk-red);
  background: rgba(10, 4, 4, .72);
  color: var(--tk-text);
  font-family: 'Redemption', Georgia, serif;
  font-size: 17px;
  letter-spacing: .5px;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 140ms ease, border-color 140ms ease, color 140ms ease;
}

.tk-button:hover:not(:disabled),
.tk-button.is-focused:not(:disabled) {
  border-color: var(--tk-gold);
  background: rgba(30, 8, 8, .86);
  color: var(--tk-gold);
}

.tk-button:disabled {
  border-color: rgba(110, 110, 110, .34);
  color: var(--tk-faint);
  cursor: default;
}

.tk-button.is-quiet {
  border-color: rgba(110, 110, 110, .42);
  background: rgba(4, 4, 4, .5);
  color: var(--tk-dim);
}

.tk-button.is-quiet:hover {
  border-color: rgba(154, 154, 152, .8);
  color: var(--tk-name);
}

/* --- status --------------------------------------------------------------- */

.tk-status {
  margin: 14px 0 0;
  padding: 9px 13px;
  border-left: 2px solid var(--tk-dim);
  background: rgba(4, 4, 4, .44);
  color: var(--tk-name);
  font-size: 13.5px;
  line-height: 1.5;
}

.tk-status.is-error {
  border-left-color: var(--tk-red);
  color: rgba(233, 160, 148, .96);
}

.tk-status.is-warn {
  border-left-color: var(--tk-gold);
  color: rgba(219, 183, 116, .96);
}

.tk-note {
  margin: 0;
  color: var(--tk-dim);
  font-size: 14px;
  line-height: 1.6;
}

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

.tk-feed {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 3px;
  margin: 0;
  padding: 4px 6px 12px 0;
  min-height: 260px;
  max-height: min(52vh, 480px);
  list-style: none;
  overflow-y: auto;
}

.tk-msg {
  position: relative;
  padding: 5px 6px 5px 12px;
  color: var(--tk-text);
  font-size: 15.5px;
  line-height: 1.4;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 1);
  overflow-wrap: anywhere;
}

.tk-msg::before {
  content: '';
  position: absolute;
  top: .3em;
  bottom: .25em;
  left: 0;
  width: 2px;
  background: rgba(204, 213, 216, .3);
}

.tk-msg.is-discord::before {
  background: rgba(120, 140, 200, .7);
}

.tk-msg.is-staff::before {
  background: var(--tk-gold);
}

.tk-msg.is-system {
  padding-left: 6px;
  color: var(--tk-faint);
  font-size: 12.5px;
  font-style: italic;
  text-align: center;
}

.tk-msg.is-system::before {
  display: none;
}

.tk-msg-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 2px;
}

.tk-msg-author {
  color: var(--tk-name);
  font-size: 14px;
}

.tk-msg.is-staff .tk-msg-author {
  color: var(--tk-gold);
}

.tk-msg-tag,
.tk-msg-where,
.tk-msg-time {
  color: var(--tk-faint);
  font-size: 10.5px;
  letter-spacing: .5px;
  text-transform: uppercase;
}

.tk-msg-tag {
  padding: 1px 5px;
  border: 1px solid rgba(207, 157, 62, .5);
  color: var(--tk-gold);
}

.tk-msg-tag.is-pending {
  border-color: rgba(205, 49, 30, .6);
  color: #d97961;
}

/* Ticket confirmations use the established Under Construction popup shell. */
.tk-confirm-panel {
  width: min(680px, 94%);
  min-height: min(390px, 62vh);
  padding: 68px 58px 54px;
  background:
    linear-gradient(rgba(9, 2, 1, .48), rgba(0, 0, 0, .72)),
    url('../../assets/ui/hud_location_bg2.png') center / 100% 100% no-repeat;
}

.tk-confirm .brk-uc-title { font-size: clamp(38px, 5vw, 60px); }
.tk-confirm .brk-uc-subtitle { max-width: 520px; margin-inline: auto; line-height: 1.55; }
.tk-confirm-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  width: min(480px, 100%);
  margin: 34px auto 0;
}
.tk-confirm-actions .menu-row {
  flex: 1 1 180px;
  max-width: 240px;
  min-height: 48px;
}
.tk-confirm-primary { color: #f0dfbd; }

@media (max-width: 620px) {
  .tk-confirm-panel { min-height: 360px; padding: 64px 28px 42px; }
  .tk-confirm-actions { flex-direction: column; }
  .tk-confirm-actions .menu-row { max-width: none; }
}

.tk-msg-time {
  margin-left: auto;
}

.tk-msg-text {
  display: block;
  white-space: pre-wrap;
}

.tk-msg-files {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 6px;
}

.tk-file {
  padding: 2px 8px;
  border: 1px solid rgba(204, 213, 216, .28);
  color: var(--tk-gold);
  font-size: 12px;
  text-decoration: none;
}

.tk-file:hover {
  border-color: var(--tk-gold);
}

/* --- composer ------------------------------------------------------------- */

.tk-composer {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  margin-top: 12px;
  padding-top: 14px;
  border-top: 1px solid rgba(204, 213, 216, .14);
}

.tk-composer .tk-bar {
  flex: 1;
  flex-direction: column;
  align-items: stretch;
}

.tk-composer-attachments.tk-chips {
  width: 100%;
  margin: 0 0 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(204, 213, 216, .12);
}

.tk-composer-attachments .tk-chip {
  align-self: flex-start;
  background: rgba(0, 0, 0, .72);
}

.tk-composer-hint {
  margin: 8px 0 0;
  color: var(--tk-faint);
  font-size: 11.5px;
  letter-spacing: .3px;
  text-transform: uppercase;
}

/* --- empty / sign in ------------------------------------------------------ */

.tk-center {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 40px 20px;
  text-align: center;
}

.tk-center .tk-note {
  max-width: 460px;
}

/* --- narrow --------------------------------------------------------------- */

@media (max-width: 1080px) {
  .tk-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .review-menu-shell.tk-menu-shell {
    width: 100%;
    max-width: 540px;
    margin: 0;
  }
}

@media (max-width: 720px) {
  .tk-panel {
    padding: 18px 14px 16px;
  }

  .tk-composer {
    flex-wrap: wrap;
  }

  .tk-composer .tk-bar {
    flex: 1 1 100%;
  }
}

/* ---------------------------------------------------------------------------
   Support chooser

   A smaller Select Your Destination, centred in the stage. BRK and IRP support
   are answered by different people about different things, so the desk is
   picked before the form is ever shown. Uses the transparent brand marks
   directly - no paper plate behind them.
   --------------------------------------------------------------------------- */

/* .view.is-active is display:block. Same specificity, later in the cascade. */
.support-gate-view.is-active {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

/* The stage divider is drawn to the width of its heading. Full width made it
   a giant arrow across the page; the chooser only needs it over the title. */
.support-gate-view .stage-heading {
  width: min(560px, 92%);
}

.support-gate-lead {
  margin: 0 0 clamp(20px, 3vh, 40px);
  color: rgba(204, 213, 216, .72);
  font-family: 'RDRLedger', Georgia, serif;
  font-size: clamp(15px, 1.5vw, 19px);
}

/* styles.css stacks .branch-options below 980px, which is right for the full
   gate but far too eager for these two smaller cards. */
.branch-options.support-gate-options {
  width: min(1180px, 100%);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(18px, 3vw, 40px);
  margin: 0 auto;
}

.support-gate-card.branch-option {
  min-height: min(430px, 48vh);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(14px, 2vh, 26px);
  padding: clamp(20px, 2.4vw, 34px);
}

.support-gate-art {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: min(290px, 34vh);
}

/* Two marks stacked: the plain one, and the framed one that takes over on
   hover or keyboard focus. Both files share a canvas size and put the mark at
   the same spot, so the logo does not move or resize - the frame simply
   appears around it. */
.support-gate-mark {
  position: absolute;
  inset: 0;
  margin: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .72));
  transition: opacity .2s ease, transform .22s ease, filter .22s ease;
}

.support-gate-mark.is-hover {
  opacity: 0;
}

.support-gate-card:hover .support-gate-mark,
.support-gate-card.is-focused .support-gate-mark {
  opacity: 0;
}

.support-gate-card:hover .support-gate-mark.is-hover,
.support-gate-card.is-focused .support-gate-mark.is-hover {
  opacity: 1;
  filter:
    drop-shadow(0 6px 12px rgba(0, 0, 0, .8))
    drop-shadow(0 0 16px rgba(177, 8, 8, .42));
}

.support-gate-card .branch-subcaption {
  position: relative;
  z-index: 2;
}

@media (max-width: 720px) {
  .branch-options.support-gate-options {
    grid-template-columns: minmax(0, 1fr);
  }

  .support-gate-card.branch-option {
    min-height: 190px;
  }

  .support-gate-art {
    height: 110px;
  }
}

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

/* The entire square is the control: click it to open the picker, drop files
   onto it, or tab to it. It is a real .brk-link-card, so hovering gives the
   site's own treatment - panel art, selected-artwork wash, lift - across the
   whole zone rather than on a small button inside it. */
.brk-link-card.tk-drop {
  --brk-link-card-height: 168px;
  --brk-link-card-padding: 25px 24px;
  position: relative;
  /* Same footprint as the config syntax checker's drop zone, sized to the
     menu's row width so it lines up under them. */
  width: 432px;
  max-width: 100%;
  margin-top: 16px;
  align-items: center;
  justify-content: center;
  gap: 0;
  overflow: hidden;
  color: rgba(225, 216, 198, .84);
  text-align: center;
  cursor: pointer;
}

.tk-drop.is-busy {
  cursor: progress;
  opacity: .72;
}

/* Status messages sit in a permanent slot (see tickets.js) so they can be
   swapped without re-rendering the form. An empty slot must not take space. */
.tk-status-slot:empty {
  display: none;
}

/* The animated ring is its own layer because ::before and ::after on the card
   are already spoken for by the panel art and the hover wash. It lights on
   hover, on keyboard focus, and while a file is actually over the zone. */
.tk-drop-ring {
  position: absolute;
  inset: 0;
  z-index: 8;
  padding: 2px;
  pointer-events: none;
  background: conic-gradient(
    from var(--brk-ticket-angle),
    var(--tk-ring-base) 0deg,
    var(--tk-ring-base) 82deg,
    var(--tk-ring-red) 128deg,
    var(--tk-ring-hot) 158deg,
    var(--tk-ring-base) 198deg,
    var(--tk-ring-gold) 250deg,
    var(--tk-ring-base) 306deg,
    var(--tk-ring-base) 360deg
  );
  animation: brk-ticket-border-flow var(--tk-flow) linear infinite;
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  filter:
    drop-shadow(0 0 3px var(--tk-ring-hot))
    drop-shadow(0 0 1px rgba(0, 0, 0, .85));
  opacity: 0;
  transition: opacity 160ms ease;
}

.tk-drop:hover .tk-drop-ring,
.tk-drop:focus-visible .tk-drop-ring,
.tk-drop.is-focused .tk-drop-ring,
.tk-drop.is-dragging .tk-drop-ring {
  opacity: var(--browse-opacity, .94);
}
.tk-drop-prompt {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.tk-drop-title {
  font-family: 'Redemption', Georgia, serif;
  font-size: 22px;
  letter-spacing: .4px;
  text-transform: uppercase;
}

.tk-drop-limit {
  color: var(--tk-faint);
  font-size: 10.5px;
  letter-spacing: .7px;
  text-transform: uppercase;
}

.tk-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  width: 432px;
  max-width: 100%;
  margin-top: 10px;
}

.tk-chips[hidden] {
  display: none;
}

.tk-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 6px 4px 11px;
  border: 1px solid rgba(207, 157, 62, .42);
  background: rgba(4, 4, 4, .5);
  font-size: 12.5px;
}

.tk-chip-name {
  color: var(--tk-name);
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tk-chip-size {
  color: var(--tk-faint);
  font-size: 11px;
}

.tk-chip-drop {
  padding: 0 5px;
  border: 0;
  background: none;
  color: var(--tk-faint);
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
}

.tk-chip-drop:hover {
  color: var(--tk-red);
}

/* --- media in the feed ---------------------------------------------------- */

.tk-media {
  display: block;
  max-width: min(420px, 100%);
  max-height: 300px;
  margin-top: 8px;
  border: 1px solid rgba(204, 213, 216, .18);
  background: rgba(0, 0, 0, .5);
}

:is(a, button).tk-media img {
  display: block;
  max-width: 100%;
  max-height: 300px;
  object-fit: contain;
}

video.tk-media {
  width: min(420px, 100%);
}

.tk-link {
  color: var(--tk-gold);
  text-decoration: underline;
  text-underline-offset: 2px;
  overflow-wrap: anywhere;
}

.tk-link:hover {
  color: var(--tk-highlight);
}

.tk-file.is-gone {
  border-style: dashed;
  border-color: rgba(204, 213, 216, .22);
  color: var(--tk-faint);
  cursor: default;
}


/* --- sign-in call to action ----------------------------------------------
   The sign-in button is a real BRK .menu-row, not a bespoke .tk-button, so it
   inherits the grey selection_box slice art and - once app.js puts .is-focused
   on it - the animated conic border carried by .row-border-flow. Nothing here
   restyles the row; it only fits it into the centred sign-in panel. */
.tk-signin-row.menu-row {
  max-width: 100%;
  margin-top: 8px;
}

.tk-center .tk-signin-row.menu-row {
  justify-self: center;
}

/* --- intake card ----------------------------------------------------------
   The website twin of the intake embed the bot posts in the Discord channel:
   same title, same field order, same footer. The coloured left bar is the
   embed's accent stripe, drawn in BRK red rather than Discord's blurple. */

.tk-intake {
  position: relative;
  margin: 14px 0 0;
  padding: 14px 16px 12px 18px;
  background: rgba(5, 5, 5, .46);
}

.tk-intake::before {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: var(--tk-ring-red);
  box-shadow: 0 0 6px var(--tk-ring-hot);
}

.tk-intake-title {
  margin: 0 0 10px;
  color: var(--tk-text);
  font-family: 'Redemption', Georgia, serif;
  font-size: 19px;
  font-weight: 400;
  letter-spacing: .4px;
}

.tk-intake-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 22px;
  margin: 0;
}

/* Long answers and free-text boxes take the full width, matching how the
   embed drops inline:false fields onto their own row. */
.tk-intake-field.is-wide {
  grid-column: 1 / -1;
}

.tk-intake-field dt {
  margin: 0 0 2px;
  color: var(--tk-gold);
  font-size: 12px;
  letter-spacing: .6px;
  text-transform: uppercase;
}

.tk-intake-field dd {
  margin: 0;
  color: var(--tk-name);
  font-size: 14.5px;
  line-height: 1.5;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.tk-intake-foot {
  margin: 12px 0 0;
  padding-top: 9px;
  border-top: 1px solid rgba(204, 213, 216, .12);
  color: var(--tk-faint);
  font-size: 11.5px;
  letter-spacing: .4px;
}

.tk-intake-foot strong {
  color: var(--tk-dim);
  font-weight: 400;
}

@media (max-width: 720px) {
  .tk-intake-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* --- BRK action buttons --------------------------------------------------
   Send, Open Ticket, Clear, Back To Ticket - every action control in the
   ticket console is a real BRK .menu-row, so it carries the grey slice art
   and the animated border like every other button on the site. Only the
   proportions change here; a stock row is a fixed 432px. */

.menu-row.tk-menu-btn {
  width: auto;
  min-width: 138px;
  height: 46px;
  flex: 0 0 auto;
  grid-template-columns: minmax(0, 1fr);
  padding: 0 18px;
}

.menu-row.tk-menu-btn .row-label {
  font-size: 17px;
  text-align: center;
}

/* --- open ticket: left panel ---------------------------------------------
   The intake dropdowns and the ticket panel share one menu shell and swap on
   the hidden flag. .review-menu-rows sets display:flex, which would otherwise
   beat the UA rule for [hidden]. */

.review-menu-rows[hidden] {
  display: none;
}

/* --- ticket files ---------------------------------------------------------
   Feed screenshots are buttons now, not links: clicking one opens the site's
   showcase lightbox instead of dumping the raw file in a new tab. All of the
   carousel and lightbox styling itself lives in styles.css already - this is
   only the button reset and the clip strip. */

button.tk-media {
  padding: 0;
  font: inherit;
  cursor: pointer;
}

button.tk-media-shot {
  transition: filter 160ms ease, border-color 160ms ease;
}

button.tk-media-shot:hover,
button.tk-media-shot:focus-visible,
button.tk-media-shot.is-focused {
  border-color: var(--tk-ring-hot);
  outline: none;
  filter:
    brightness(1.12)
    drop-shadow(0 0 6px rgba(197, 32, 7, .45));
}

.tk-files-clips {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 18px;
}

/* --- avatars in the feed --------------------------------------------------- */

/* A face beside every message, and a button that says who that person is. */
.tk-avatar {
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 1px solid rgba(204, 213, 216, .2);
  border-radius: 50%;
  background: rgba(6, 4, 4, .7);
  overflow: hidden;
  cursor: pointer;
  transition: border-color 130ms ease, transform 130ms ease;
}

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

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

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


/* --- ticket menu dropdowns -------------------------------------------------
   The same treatment as .brk-select, which these had never picked up: one
   sheet of inkroller with the options drawn straight onto it, instead of a
   stack of grey selection plates. A row grows chrome only when it is the one
   you are on, and that chrome is the site's real selected artwork.
   ------------------------------------------------------------------------- */

/* A reason that does not ask for this field hides it outright. */
.tk-dropdown.hidden { display: none; }

.tk-dropdown .review-menu-dropdown-list {
  padding: 8px;
  border: 0;
  background:
    linear-gradient(rgba(8, 4, 4, .50), rgba(8, 4, 4, .68)),
    url('../../assets/ui/inkroller_1a.png') top center / 100% auto repeat-y;
  box-shadow: 0 18px 34px rgba(0, 0, 0, .66);
}

.tk-dropdown .review-menu-dropdown-option {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 40px;
  margin: 0;
  padding: 9px 16px 10px;
  appearance: none;
  border: 0;
  border-radius: 0;
  /* The menu shell paints a plate behind bare buttons - this is the rule that
     gets rid of it. */
  background: none;
  box-shadow: none;
  filter: none;
  color: rgba(226, 216, 197, .78);
  font-family: 'RDRLedger', Georgia, serif;
  font-size: 17px;
  line-height: 1.1;
  letter-spacing: .15px;
  text-align: left;
  text-transform: none;
  cursor: pointer;
  transition: color 130ms ease;
}

.tk-dropdown .review-menu-dropdown-option-label {
  position: relative;
  z-index: 4;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* The value already chosen reads gold even when you are not on it. */
.tk-dropdown .review-menu-dropdown-option.is-selected { color: #e8c169; }

.tk-dropdown .review-menu-dropdown-option:is(:hover, :focus-visible, .is-active) {
  outline: none;
  background: none;
  color: rgba(255, 250, 238, .99);
}

/* Same wash the menu rows use under their selected frame. */
.tk-dropdown .review-menu-dropdown-option:is(:hover, :focus-visible, .is-active)::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    linear-gradient(rgba(0, 0, 0, .08), rgba(0, 0, 0, .08)),
    url('../../assets/ui/brk_selected_bg.jpg') center 50% / 100% auto no-repeat;
}

.tk-dropdown .review-menu-dropdown-option:is(:hover, :focus-visible, .is-active)::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  box-shadow: inset 0 0 18px rgba(0, 0, 0, .44);
}

.tk-dropdown .review-menu-dropdown-option > .row-border-flow { display: none; }

/* selected.png sliced rather than stretched, so a 40px row and a 52px row get
   the same frame thickness instead of it thinning out with the row. */
.tk-dropdown .review-menu-dropdown-option:is(:hover, :focus-visible, .is-active) > .row-border-flow {
  display: block;
  position: absolute;
  inset: 0;
  z-index: 8;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  border-style: solid;
  border-width: 6px 5px 8px 4px;
  border-image-source: url('../../assets/ui/selected.png');
  border-image-slice: 6 5 8 4 fill;
  border-image-width: 6px 5px 8px 4px;
  border-image-repeat: stretch;
  opacity: 1;
  filter:
    drop-shadow(0 0 3px var(--browse-highlight))
    drop-shadow(0 0 1px rgba(0, 0, 0, .85));
  -webkit-mask: none;
  mask: none;
  animation: none;
  pointer-events: none;
}

/* The animated ring rides on top, exactly as on a focused menu row. */
.tk-dropdown .review-menu-dropdown-option:is(:hover, :focus-visible, .is-active) > .row-border-flow::after {
  content: '';
  position: absolute;
  inset: -6px -5px -8px -4px;
  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: var(--browse-opacity);
}


/* --- read-only notice popup ------------------------------------------------
   The confirm shell with nothing to answer. Wider and taller than a yes/no,
   because it holds a page of reading rather than one sentence, and the body
   scrolls inside the panel so the frame never grows past the viewport.
   ------------------------------------------------------------------------- */

.brk-notice .tk-confirm-panel {
  max-width: 640px;
  width: min(640px, calc(100vw - 40px));
  text-align: left;
}

.brk-notice .brk-uc-title {
  text-align: left;
}

.brk-notice-body {
  max-height: min(58vh, 520px);
  margin-top: 14px;
  padding-right: 10px;
  overflow-y: auto;
  text-align: left;
}

.brk-notice-heading {
  margin: 22px 0 8px;
  font-family: 'Redemption', Georgia, serif;
  font-size: 21px;
  font-weight: 400;
  letter-spacing: .6px;
  text-transform: uppercase;
  color: var(--browse-accent, rgba(193, 137, 34, .98));
}

.brk-notice-heading:first-child { margin-top: 0; }

.brk-notice-text {
  margin: 0 0 10px;
  font-family: 'RDRLedger', Georgia, serif;
  font-size: 15px;
  line-height: 1.55;
  color: rgba(226, 216, 197, .86);
}

.brk-notice-list {
  margin: 0 0 10px;
  padding-left: 20px;
  list-style: none;
}

.brk-notice-list li {
  position: relative;
  margin-bottom: 9px;
  font-family: 'RDRLedger', Georgia, serif;
  font-size: 15px;
  line-height: 1.5;
  color: rgba(226, 216, 197, .86);
}

/* Drawn, not typed - the loaded faces have no bullet glyph, same trap the
   middot fell into. */
.brk-notice-list li::before {
  content: '';
  position: absolute;
  top: .62em;
  left: -14px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--browse-accent, rgba(193, 137, 34, .98));
  opacity: .8;
}

/* Reads as a way out to more, not as an action to take. */
.brk-notice-link {
  display: inline-block;
  margin-top: 18px;
  padding: 2px 0;
  border-bottom: 1px solid rgba(193, 137, 34, .38);
  font-family: 'RDRLino', Georgia, serif;
  font-size: 12px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--browse-accent, rgba(193, 137, 34, .98));
  transition: color 140ms ease, border-color 140ms ease;
}

.brk-notice-link:is(:hover, :focus-visible) {
  outline: none;
  color: #f4ead6;
  border-bottom-color: rgba(244, 234, 214, .7);
}

/* The row on the ticket menu that opens it. */
.tk-info-row.hidden { display: none; }