/* SUPPORT ON THE PUBLIC PAGES — Clay's own furniture, on Clay's own pages.
   Dark, the orange accent, Inter. It sits on marketing pages and the homepage, never on a
   customer's site: their visitors are theirs, and our support button on their page would be ours
   asking for their traffic. */
#sup-btn {
  position: fixed; right: 16px; bottom: 16px; z-index: 90;
  padding: 11px 18px; border-radius: 999px; border: 1px solid rgba(255,255,255,0.14);
  background: #17161A; color: #F1EDEA; cursor: pointer;
  font: inherit; font-size: 14px; font-weight: 600; letter-spacing: -0.01em;
  box-shadow: 0 10px 30px rgba(0,0,0,0.45);
}
#sup-btn:hover { background: #201E24; }
#sup-btn:focus-visible { outline: 2px solid #C87F5E; outline-offset: 3px; }

#sup-ov {
  position: fixed; inset: 0; z-index: 91; background: rgba(0,0,0,0.6);
  display: flex; align-items: flex-end; justify-content: center; padding: 16px;
}
@media (min-width: 700px) { #sup-ov { align-items: center; } }

.sup-card {
  position: relative; width: min(440px, 100%);
  background: #141317; border: 1px solid rgba(255,255,255,0.12); border-radius: 18px;
  padding: 20px; display: grid; gap: 10px; color: #F1EDEA;
  box-shadow: 0 24px 60px rgba(0,0,0,0.5);
}
.sup-card h3 { margin: 0; font-size: 18px; font-weight: 650; letter-spacing: -0.02em; }
.sup-card p { margin: 0; font-size: 13px; line-height: 1.55; color: rgba(255,255,255,0.55); }
.sup-card textarea, .sup-card input {
  width: 100%; box-sizing: border-box; background: rgba(0,0,0,0.3);
  border: 1px solid rgba(255,255,255,0.12); border-radius: 12px;
  padding: 11px 13px; color: #F1EDEA; font: inherit; font-size: 14px; resize: vertical;
}
.sup-card textarea:focus, .sup-card input:focus { outline: none; border-color: rgba(200,127,94,0.7); }
.sup-card textarea::placeholder, .sup-card input::placeholder { color: rgba(255,255,255,0.35); }
.sup-go {
  justify-self: start; margin-top: 2px; padding: 11px 20px; border: 0; border-radius: 999px;
  background: #C87F5E; color: #fff; font: inherit; font-size: 14px; font-weight: 650; cursor: pointer;
}
.sup-go[disabled] { opacity: .5; cursor: default; }
.sup-x {
  position: absolute; top: 12px; right: 12px; width: 30px; height: 30px; line-height: 1;
  border-radius: 50%; border: 1px solid rgba(255,255,255,0.12); background: transparent;
  color: rgba(255,255,255,0.6); font-size: 19px; cursor: pointer;
}
.sup-err { color: #F0A6A0 !important; }

/* ── THE CONFIRMATION ────────────────────────────────────────────────────────────────────────
   It was one sentence and a close button in a card built to hold a form: a fifth of the content
   in the same box, floating mid-screen with no weight, reading like an error toast rather than
   like the end of something. Three things fix that, and each answers what somebody is actually
   wondering — it arrived, here is where the answer goes, and there is nothing more to do. */
.sup-done { text-align: center; justify-items: center; padding: 26px 20px 22px; gap: 8px; }
.sup-done h3 { font-size: 19px; }
.sup-done p { max-width: 30ch; }
.sup-done p b { color: #F1EDEA; font-weight: 600; }
.sup-done .sup-go { justify-self: center; margin-top: 8px; min-width: 120px; }
/* the tick: understood before any word is read, in any language */
.sup-tick {
  display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%;
  background: rgba(200,127,94,0.16); color: #C87F5E; margin-bottom: 2px;
}
.sup-tick svg { width: 24px; height: 24px; }
@media (prefers-reduced-motion: no-preference) {
  .sup-tick svg path { stroke-dasharray: 26; stroke-dashoffset: 26; animation: sup-tick .34s .06s cubic-bezier(.65,0,.35,1) forwards; }
  @keyframes sup-tick { to { stroke-dashoffset: 0 } }
}
/* THE HONEYPOT IS OFF-SCREEN, NOT `display:none`. A robot skips what is not rendered and fills
   what is; a person never reaches it, because it is out of the tab order too. */
#sup-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
@media (prefers-reduced-motion: no-preference) {
  .sup-card { animation: sup-in .18s cubic-bezier(.32,.72,0,1); }
  @keyframes sup-in { from { transform: translateY(10px); opacity: 0 } to { transform: none; opacity: 1 } }
}

/* ── THE ADMIN'S OWN FORM ─────────────────────────────────────────────────────────────────────
   Same card, same button, one branch — see the long note in support.js. What it adds visually is
   the KINDS, because a card filed under the wrong one is a card routed to the wrong file, and that
   choice has to be made before the sentence is written rather than remembered afterwards.

   It is deliberately WIDER than the visitor's: six chips at 440 wrap to four rows and read as a
   list of options rather than a row of choices. */
.sup-admin { width: min(560px, 100%); }
.sup-kinds { display: flex; flex-wrap: wrap; gap: 6px; margin: 2px 0 4px; }
.sup-kind {
  font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer;
  background: transparent; color: rgba(255,255,255,0.6);
  border: 1px solid rgba(255,255,255,0.14); border-radius: 999px; padding: 6px 12px;
  transition: .14s;
}
.sup-kind:hover { color: #fff; border-color: rgba(255,255,255,0.32); }
.sup-kind.on { background: #C87F5E; border-color: #C87F5E; color: #fff; }
/* what is already attached, stated rather than shown: the picture is OF the screen behind this
   card, so a thumbnail of it inside the card is a picture of the thing you are looking at */
.sup-shot { font-size: 12.5px !important; color: rgba(255,255,255,0.42) !important; min-height: 1em; }
/* ours is a tool, not an invitation — it does not need to look like a call to action */
#sup-btn.sup-btn-admin { background: #C87F5E; border-color: #C87F5E; color: #fff; }
#sup-btn.sup-btn-admin:hover { background: #B4704F; }
#sup-btn[disabled] { opacity: .6; cursor: progress; }