/* help.anonylabs.com — "My tickets" (owner 2026-10-17). Only what the ticket pages add to site.css + help.css; every
   value is one of site.css's tokens, every control one of its own (.cform__submit, .ctl, .field, .meta). */

/* "Sign in with AnonyID": anonylabs.com's form button with the AnonyID glyph instead of its square, always centred
   (owner 2026-10-17, as on the support desk's sign-in page) */
.tk-signin {
  display: flex;
  justify-content: center;
  margin-top: clamp(18px, 3vh, 30px);
}

.cform__submit.tk-signin__btn {
  padding: 12px 18px 12px 14px;
  text-decoration: none;
}

.cform__submit.tk-signin__btn::before {
  display: none;
}

.tk-signin__glyph {
  display: block;
  width: 20px;
  height: 20px;
  flex: none;
}

.tk-gate {
  display: grid;
  justify-items: center;
  text-align: center;
  align-content: start;
}

.tk-gate__lead {
  margin-top: 0;
}

.tk-gate__alt {
  margin-top: clamp(18px, 3vh, 30px);
  font-size: 14px;
  line-height: 1.5;
  color: var(--fg-3);
}

.tk-alert:empty {
  display: none;
}

.tk-note,
.tk-notice {
  font-size: clamp(14px, 0.22vw + 11px, 16px);
  line-height: 1.55;
  color: var(--fg-2);
}

.tk-notice {
  margin-bottom: clamp(14px, 2.4vh, 24px);
  padding: 10px 12px;
  border: 1px solid var(--mark);
  color: var(--fg);
}

.tk-contact-signin {
  margin-top: clamp(18px, 3vh, 28px);
  padding-top: clamp(14px, 2.4vh, 22px);
  border-top: 1px solid var(--rule);
}

.tk-form {
  margin-top: clamp(14px, 2.4vh, 22px);
}

/* the list */
/* "Hi <name>" above the lead (owner 2026-10-18), the lead tucked under it */
.tk-hi {
  color: var(--fg);
  overflow-wrap: anywhere;
}

.help-lead.tk-hi-lead {
  margin-top: 2px;
}

.tk-actions {
  margin-top: clamp(18px, 3vh, 30px);
}

.cform__submit.tk-new {
  text-decoration: none;
}

.tk-signout {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 36px; /* .ctl's optical negative margins eat into the gap */
  margin-top: clamp(16px, 2.6vh, 26px);
}


.tk-signout .tk-signout__btn {
  margin: 0; /* .ctl's optical negative margins are for the header's edge, not here */
}

.tk-signout__btn {
  font: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

.tk-item__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 14px;
}

.tk-item__meta .meta {
  color: var(--fg-3);
}

.tk-status {
  display: inline-block;
  padding: 3px 7px 2px;
  font: 400 11px/1.2 var(--mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border: 1px solid var(--mark);
  color: var(--fg-2);
}

.tk-status--answered {
  border-color: var(--fg-2);
  color: var(--fg);
}

.tk-status--resolved {
  border-color: var(--rule);
  color: var(--fg-3);
}

:is(:lang(ar), :lang(hi), :lang(ja), :lang(ko), :lang(zh-Hans)) .tk-status {
  letter-spacing: 0;
}

/* a thread */
.tk-head-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 14px;
  margin-top: clamp(12px, 2vh, 20px);
}

.tk-head-meta .meta {
  color: var(--fg-3);
}

.tk-back {
  margin-top: clamp(14px, 2.4vh, 24px);
  font-size: 14px;
}

.page .tk-back a {
  color: var(--fg-2);
}

.tk-msgs {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: clamp(14px, 2.4vh, 22px);
}

.tk-msg {
  padding: 12px 14px 14px;
  border: 1px solid var(--rule);
  background: var(--field);
}

.tk-msg--support {
  border-color: var(--mark);
  background: none;
}

.tk-msg__who {
  color: var(--fg-3);
}

.tk-msg--support .tk-msg__who span {
  color: var(--fg);
}

.tk-msg__text {
  margin-top: 8px;
  font-size: clamp(15px, 0.3vw + 10.5px, 18px);
  line-height: 1.6;
  color: var(--fg);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.tk-msg__att {
  margin-top: 8px;
  color: var(--fg-3);
}

.tk-reply {
  margin-top: clamp(24px, 4vh, 40px);
  padding-top: clamp(18px, 3vh, 28px);
  border-top: 1px solid var(--rule);
}

/* the phone layout: one column (site.css stacks .about at 900px) */
@media (max-width: 900px) {
  .tk-gate {
    margin-top: clamp(18px, 3vh, 28px);
  }

  .tk-thread {
    margin-top: clamp(18px, 3vh, 28px);
  }
}

/* the privacy note's definition lists, in the article body's text styles */
.tk-privacy .defs dt {
  margin-top: 1.1em;
  font-weight: 600;
  color: var(--fg);
}

.tk-privacy .defs dd {
  margin: 0.3em 0 0;
  font-size: clamp(15px, 0.3vw + 10.5px, 19px);
  line-height: 1.6;
  color: var(--fg-2);
}

/* an answer not opened yet (Chatwoot's contact_last_seen_at), after the title */
.tk-unread {
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-inline-start: 10px;
  vertical-align: 0.15em;
  border-radius: 50%;
  background: var(--fg);
}

/* the home page's "awaiting your answer" list under "Still need help?" */
.help-still .tk-still-list {
  margin-top: clamp(14px, 2.4vh, 22px);
}

.tk-still-more {
  margin-top: 12px;
}