/* Touch controls and browser-local report drafts in support screens. */
[data-utility-page] {
  --utility-rule: #ded9d0;
  --utility-wash: #f7f5f0;
}

.page > main button:is([data-x^="tp:"], [data-x^="fb:"], [data-x^="fk:"]) {
  min-height: 40px;
  border: 0 !important;
  border-block-end: 2px solid transparent !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--scena-ink) !important;
  line-height: 1.25;
  transform: none !important;
}

.page > main button:is([data-x^="tp:"], [data-x^="fb:"], [data-x^="fk:"])[aria-pressed="true"] {
  border-block-end-color: var(--scena-action) !important;
  background: var(--utility-wash, #f7f5f0) !important;
  color: var(--scena-action) !important;
  font-weight: 720 !important;
}

.page > main button:is([data-x^="tp:"], [data-x^="fb:"], [data-x^="fk:"]):hover {
  background: var(--utility-wash, #f7f5f0) !important;
}

.page > main button:is([data-x^="tp:"], [data-x^="fb:"], [data-x^="fk:"]) > .mono:last-child {
  background: transparent !important;
  color: var(--scena-muted) !important;
}

.page > main button[data-x="fb:0"][aria-pressed="true"] > span:first-child {
  background: currentColor !important;
}

.page > main [data-user-ticket] :is(.user-bug-title, .user-bug-what) {
  overflow-wrap: anywhere;
}

.page > main .support-channels > .card {
  padding-inline: 0 !important;
  border: 0 !important;
  border-block-start: 1px solid var(--utility-rule) !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.page > main .support-channels > .card > span:first-child > [aria-hidden="true"] {
  border-radius: 4px !important;
  box-shadow: none !important;
}

.page > main .support-channels > .card > span:first-child > .mono {
  padding: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--scena-muted) !important;
  text-align: end;
}

.page > main .support-channels > .card > a[target="_blank"]:not(.mono) {
  min-height: 44px !important;
  padding-inline: 0 !important;
  border-block-start: 1px solid var(--utility-rule) !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--scena-ink) !important;
  transform: none !important;
}

.page > main .support-channels > .card > a[target="_blank"]:not(.mono):is(:hover, :focus-visible) {
  color: var(--scena-action) !important;
  text-decoration: underline;
  text-underline-offset: .2em;
}

[data-utility-page] .page > main .card {
  border-radius: 4px !important;
  box-shadow: none !important;
}

[data-utility-page="changelog"] .page > main .pulse { animation: none; }

[data-utility-page="404"] .page > main .editorial-error-slate {
  display: grid;
  gap: clamp(4px, 2vw, 20px);
  min-width: 0;
  padding: clamp(14px, 3vw, 36px);
  border-block: 1px solid var(--utility-rule);
  background: var(--utility-wash);
}

.editorial-error-slate > .mono {
  color: var(--scena-muted);
  font-size: .6875rem;
  letter-spacing: .055em;
}

.editorial-error-slate > strong {
  color: var(--scena-ink);
  font: 760 clamp(3.5rem, 12vw, 10rem)/.88 var(--scena-type);
  letter-spacing: -.06em;
}

.editorial-error-slate > .mono:last-child {
  padding-block-start: 9px;
  border-block-start: 1px solid var(--utility-rule);
  color: var(--scena-action);
}

@media (pointer: coarse), (max-width: 599px) {
  .page > main button:is([data-x^="tp:"], [data-x^="fb:"], [data-x^="fk:"]) {
    min-height: 44px !important;
    padding-block: 5px !important;
  }
}

@media (max-width: 599px) {
  .page > main :is(div, span):has(> button:is([data-x="tp:0"], [data-x="fb:0"], [data-x="fk:0"])) {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px !important;
    inline-size: 100%;
  }

  .page > main button:is([data-x^="tp:"], [data-x^="fb:"], [data-x^="fk:"]) {
    min-width: 0;
    padding-inline: 6px !important;
    text-align: start;
    white-space: normal !important;
    overflow-wrap: anywhere;
  }

  .page > main button:is([data-x^="tp:"], [data-x^="fb:"], [data-x^="fk:"]) > .mono:last-child {
    margin-inline-start: auto;
  }

  .page > main [data-user-ticket] {
    grid-template-columns: minmax(0, 1fr) !important;
    overflow: hidden;
  }

  .page > main [data-user-ticket] > div:last-child {
    border-left: 0 !important;
    border-top: 1px solid var(--scena-line, #dedfe6);
  }
}