/* Contact (templates/drobo/pages/contact_v2.html), one of the three Support pages (Help center · Tickets · Contact).
   Loaded after css/drobo-ui.css and css/drobo-ui-support-tabs.css. Every colour is one of the kit's tokens (--ui-*, and
   the tone colour its data-tone sets), so light and dark follow the theme.
   The page shows our support channels off, so it may be colourful: one tone per channel, the kit's spotlight on the
   cards, a border beam on the ticket card only (the main way in for a signed-in seller).
   Type, a step above the dashboard's and the same as the Help center's (css/drobo-ui-help.css): header 2.15-2.9rem,
   section titles 1.25rem, card titles 1.0625rem (the ticket 1.25rem), body .9375rem, captions .875rem.
   Motion: sections blur in as they arrive (.ui-fade), the ticket's steps follow one by one; hovers take .2-.25s on
   var(--ui-ease), and a card that is a link lifts 2px. Hover moves use `translate`, not `transform`, so they never wait
   on the entrance's own transition (css/drobo-ui.css, .ui-fade.is-in). */

.acct-flashes { display: none; }   /* flash messages show as toasts (js/drobo-toast.js) */

/* ── Hero: the Support pages' header, sized as on the Help center and Tickets; the tabs sit on its bottom rule ── */
.ct-hero .ui-hero__inner { padding-top: 3.25rem; padding-bottom: 2.25rem; }
.ct-hero .ui-hero__text { gap: .85rem; }
.ct-hero .ui-h1 { font-size: clamp(2.15rem, 3.4vw, 2.9rem); letter-spacing: -.035em; line-height: 1.08; }
.ct-hero .ui-lead { font-size: 1rem; line-height: 1.6; }

/* ── Layout ── */
.ct { display: grid; gap: 2.75rem; padding-top: .5rem; container: ct / inline-size; }
.ct-block { display: grid; gap: 1.1rem; min-width: 0; }
body.ui-app .ct-head { margin: 0; }
.ct-head h2 { font-size: 1.25rem; }
.ct-head p { font-size: .875rem; }
.ct-reach { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 1.25rem; }
.ct-side { display: grid; grid-auto-rows: 1fr; gap: 1.25rem; min-width: 0; }   /* the channels share the ticket card's height */
.ct-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }

/* Entrance (.ui-fade, css/drobo-ui.css) and hover share the transition list: the entrance keeps its pace and order,
   the hover answers at once. */
.ui-js .ct .ui-fade.is-in {
  transition: opacity .7s var(--ui-ease) calc(var(--d, 0) * 80ms), filter .7s var(--ui-ease) calc(var(--d, 0) * 80ms),
              transform .7s var(--ui-ease) calc(var(--d, 0) * 80ms),
              translate .25s var(--ui-ease), box-shadow .25s var(--ui-ease), border-color .2s var(--ui-ease);
}

/* ── Pieces ── */
.ct-icon { width: 2.75rem; height: 2.75rem; font-size: 1.35rem; border-radius: 12px; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tone) 22%, transparent); transition: scale .3s var(--ui-ease); }
.ct-title { margin: 0; font-size: 1.0625rem; font-weight: 650; letter-spacing: -.015em; line-height: 1.3; color: var(--ui-fg); }
.ct-title--lg { font-size: 1.25rem; letter-spacing: -.02em; }
.ct-text { margin: 0; max-width: 60ch; font-size: .9375rem; line-height: 1.6; color: var(--ui-muted); }
.ct-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1rem; }
body.ui-app .ct-btn { transition-duration: .2s; transition-timing-function: var(--ui-ease); }   /* the kit's button size (--ui-h) */
.ct-btn .ti { font-size: 1.05rem; }
.ct-aside { font-size: .875rem; line-height: 1.5; color: var(--ui-muted); }

/* ── A support ticket: what happens, in three steps ── */
.ct-ticket { display: flex; flex-direction: column; gap: 1.35rem; padding: 1.75rem; }
.ct-ticket__top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem; }
.ct-tag { gap: .4rem; padding: .3rem .7rem; font-size: .8125rem; }
.ct-tag .ti { font-size: .95rem; }
.ct-ticket__copy { display: grid; gap: .5rem; }
.ct-ticket .ct-actions { margin-top: auto; padding-top: .25rem; }
.ct-steps { display: grid; margin: 0; padding: 0; list-style: none; }
.ct-steps li { position: relative; display: flex; gap: 1rem; padding: .65rem 0; }
.ct-steps li:not(:last-child)::before {   /* the line joining one step to the next */
  content: ""; position: absolute; top: 2.9rem; bottom: -.4rem; left: calc(1rem - 1px); width: 2px; border-radius: 2px;
  background: linear-gradient(color-mix(in srgb, var(--ui-primary) 50%, transparent), color-mix(in srgb, var(--ui-violet) 50%, transparent));
}
.ct-steps__n {
  position: relative; z-index: 1; display: grid; place-items: center; flex: 0 0 auto; width: 2rem; height: 2rem;
  font-size: .875rem; font-weight: 700; color: var(--ui-primary-fg); background: linear-gradient(135deg, var(--ui-primary), var(--ui-violet)); border-radius: 50%;
  box-shadow: 0 0 0 4px var(--ui-card), 0 6px 16px -6px color-mix(in srgb, var(--ui-primary) 70%, transparent);
}
.ct-steps li > div { display: grid; gap: .15rem; min-width: 0; padding-top: .2rem; }
.ct-steps strong { font-size: 1rem; font-weight: 600; color: var(--ui-fg); }
.ct-steps small { font-size: .875rem; line-height: 1.5; color: var(--ui-muted); }
/* The steps follow the card in, one after another, each line drawn down to the next. */
.ui-js .ct-ticket.is-in .ct-steps li { animation: ct-step-in .6s var(--ui-ease) both; animation-delay: calc(var(--n, 0) * 120ms + 280ms); }
.ui-js .ct-ticket.is-in .ct-steps li:not(:last-child)::before { transform-origin: top; animation: ct-grow .5s var(--ui-ease) both; animation-delay: calc(var(--n, 0) * 120ms + 500ms); }
@keyframes ct-step-in { from { opacity: 0; filter: blur(4px); transform: translateY(8px); } }
@keyframes ct-grow { from { transform: scaleY(0); } }

/* ── Discord, email, a call, and the guides: a whole card is the link ── */
.ct-channel, .ct-tile { color: inherit; text-decoration: none; transition: translate .25s var(--ui-ease), box-shadow .25s var(--ui-ease), border-color .2s var(--ui-ease); }
.ct-channel:hover, .ct-tile:hover { translate: 0 -2px; box-shadow: var(--ui-shadow-lg); border-color: var(--ui-border-strong); }
.ct-channel:hover .ct-icon, .ct-tile:hover .ct-icon { scale: 1.06; }
.ct-channel { display: flex; align-items: center; gap: 1rem; padding: 1.35rem 1.5rem; }
.ct-channel__body { display: grid; flex: 1 1 auto; gap: .3rem; min-width: 0; }
.ct-channel__head { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .65rem; }
.ct-channel__head strong, .ct-tile strong { font-size: 1.0625rem; font-weight: 650; letter-spacing: -.015em; color: var(--ui-fg); }
.ct-channel__value { font-size: .9375rem; font-weight: 600; color: var(--ui-fg-2); overflow-wrap: anywhere; }
.ct-channel small, .ct-tile small { font-size: .875rem; line-height: 1.55; color: var(--ui-muted); }
.ct-channel__go { flex: 0 0 auto; font-size: 1.15rem; color: var(--ui-faint); transition: translate .25s var(--ui-ease), color .2s var(--ui-ease); }
.ct-channel:hover .ct-channel__go, .ct-tile:hover .ct-channel__go { color: var(--ui-fg); translate: 2px -2px; }

/* ── Or find it yourself: three guides, then the forum ── */
.ct-tile { display: flex; flex-direction: column; gap: .3rem; padding: 1.35rem 1.5rem 1.4rem; }
.ct-tile__top { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: .75rem; }
.ct-forum { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.25rem; padding: 1.35rem 1.5rem; }
.ct-forum__copy { display: grid; flex: 1 1 22rem; gap: .3rem; min-width: 0; }
.ct-forum .ct-actions { flex: 0 0 auto; margin-left: auto; }
body.ui-app .ct-more { gap: .3rem; font-size: .875rem; }
.ct-more .ti { transition: translate .25s var(--ui-ease); }
.ct-more:hover .ti { translate: 3px 0; }

/* ── Narrower: fewer columns (the page's own width, so a collapsed sidebar counts too) ── */
@container ct (max-width: 50rem) {
  .ct-reach { grid-template-columns: minmax(0, 1fr); }
  .ct-side { grid-auto-rows: auto; }
}
@container ct (max-width: 40rem) {
  .ct-tiles { grid-template-columns: minmax(0, 1fr); gap: 1rem; }
  .ct-tile { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; column-gap: 1rem; row-gap: .2rem; align-items: center; }
  .ct-tile__top { display: contents; }
  .ct-tile__top .ct-icon { grid-row: span 2; }
  .ct-tile__top .ct-channel__go { grid-column: 3; grid-row: 1 / span 2; }
  .ct-tile strong { align-self: end; }
  .ct-tile small { grid-column: 2; align-self: start; }
}
@media (max-width: 640px) {
  .ct-hero .ui-hero__inner { padding-top: 2rem; padding-bottom: 1.5rem; }
  .ct-hero .ui-lead { font-size: .9375rem; }
  .ct { gap: 2rem; }
  .ct-ticket { gap: 1.15rem; padding: 1.25rem; }
  .ct-channel, .ct-tile, .ct-forum { padding: 1.15rem 1.2rem; }
  .ct-channel { gap: .85rem; }
  .ct-icon { width: 2.5rem; height: 2.5rem; font-size: 1.2rem; }
  .ct-actions { width: 100%; }
  .ct-actions .ct-btn { flex: 1 1 auto; }
}