/* Support tickets (2026-10-04) -- see lib/support.js, and the "Can't sign in?"
   form in login.html. Skin variables only, like help.css. */

.sheet.supc {
  width: 560px; max-height: 100%; display: flex; flex-direction: column;
  padding: var(--s5) var(--s4) var(--s3);
}
.supc .shead { display: flex; align-items: center; flex: none; }
.supc .shead h2 { flex: 1; margin: 0; }
.supc .sclose {
  display: block; background: none; border: 0; color: var(--dim);
  font-size: 16px; cursor: pointer; padding: 0 var(--s1);
}
.supc .sclose:hover { color: var(--hot); }
.supc .sbody { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: var(--s3) 2px var(--s1) 0; }

.supc .slede { color: var(--dim); font-size: var(--t-sm); margin: 0 0 var(--s3); line-height: 1.5; }
.supc .snone { color: var(--dim); font-size: var(--t-sm); margin: var(--s3) 0; }
.supc .serr, .gate .serr { color: var(--alarm); font-size: var(--t-sm); margin: var(--s2) 0; }
.supc .snote, .gate .snote { color: var(--dusk); font-size: var(--t-xs); line-height: 1.5; margin: var(--s2) 0 var(--s3); }
.supc .sacts { display: flex; justify-content: flex-end; gap: var(--s2); margin: var(--s2) 0; }
.supc .sacts .go, .supc .sacts .ghost { padding: 7px var(--s4); }

.supc .slist { display: flex; flex-direction: column; margin-top: var(--s3); border-top: 1px solid var(--rule); }
.supc .srow {
  display: flex; flex-direction: column; align-items: stretch; gap: 2px; width: 100%;
  background: none; border: 0; border-bottom: 1px solid var(--rule); text-align: left;
  font: inherit; color: var(--fore); padding: 9px var(--s1); cursor: pointer;
}
.supc .srow:hover .ssubj { color: var(--hot); }
.supc .srow.shut .ssubj { color: var(--dim); }
.supc .ssubj { font-size: var(--t-md); display: flex; align-items: center; gap: var(--s2); }
.supc .smeta { font-size: var(--t-xs); color: var(--dusk); }
.supc .srow.unread .smeta { color: var(--amber); }
.supc .sdot, .helpc .sdot { width: 7px; height: 7px; border-radius: 50%; background: var(--amber); flex: none; }

/* Forms: the same field look as the vault sheets and the sign-in gate. */
.supc .sform label:not(.check) { display: block; margin-bottom: var(--s3); }
.supc .sform .stamp { display: block; margin-bottom: var(--s1); }
.supc .sform input:not([type=checkbox]), .supc .sform select, .supc .sform textarea,
.gate .sform select, .gate .sform textarea {
  width: 100%; background: var(--sunk); border: 1px solid var(--rule);
  padding: var(--s2) var(--s3); color: var(--hot); font: inherit;
}
.supc .sform :is(input, select, textarea) { font-size: var(--t-md); }
.supc .sform textarea, .gate .sform textarea { resize: vertical; line-height: 1.5; min-height: 4.5em; }
.supc .sform :is(input, select, textarea):focus,
.gate .sform :is(select, textarea):focus { outline: none; border-color: var(--fore); }
.supc .sform textarea::placeholder, .gate .sform textarea::placeholder { color: var(--dusk); }

/* One ticket. */
.supc .shead2 { display: flex; align-items: center; gap: var(--s2); }
.supc .sback { background: none; border: 0; color: var(--dim); font: inherit; font-size: var(--t-sm); cursor: pointer; padding: 0; }
.supc .sback:hover { color: var(--hot); }
.supc .shead2 .sst { margin-left: auto; }
.supc .sst { font-size: var(--t-2xs); border: 1px solid var(--rule); padding: 1px var(--s2); color: var(--dim); white-space: nowrap; }
.supc .sst.answered { color: var(--amber); border-color: var(--amber); }
.supc .stitle { font-weight: 400; font-size: var(--t-md); color: var(--fore); margin: var(--s3) 0 var(--s2); }
.supc .stitle span { color: var(--dusk); font-size: var(--t-xs); }
.supc .sthread { display: flex; flex-direction: column; gap: var(--s2); margin-bottom: var(--s3); }
.supc .smsg { border: 1px solid var(--rule); padding: var(--s2) var(--s3); max-width: 92%; }
.supc .smsg.me { align-self: flex-end; }
.supc .smsg.staff { align-self: flex-start; border-color: var(--dim); }
.supc .swho { font-size: var(--t-2xs); color: var(--dusk); margin-bottom: 2px; }
.supc .smsg.staff .swho { color: var(--amber); }
.supc .stxt { font-size: var(--t-sm); line-height: 1.55; white-space: pre-wrap; word-break: break-word; color: var(--fore); }

/* The help-center footer that leads here. */
.helpc .hsupport { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); padding: var(--s1) 0 var(--s2); }
.helpc .hsupport span { flex: 1; color: var(--dim); font-size: var(--t-sm); min-width: 12em; }
.helpc .hsupport .go, .helpc .hsupport .ghost { padding: 5px var(--s3); }
.helpc .hreply {
  display: flex; align-items: center; gap: var(--s2); width: 100%; margin: var(--s2) 0 var(--s3);
  background: none; border: 1px solid var(--amber); color: var(--amber);
  font: inherit; font-size: var(--t-sm); padding: var(--s2) var(--s3); cursor: pointer; text-align: left;
}
.helpc .hreply:hover { color: var(--hot); border-color: var(--hot); }

/* Sign-in page: "Can't sign in?" swaps the sign-in form for this one. */
.gate .sform label { display: block; margin-bottom: var(--s3); }
.gate .sform .lede { color: var(--dim); font-size: var(--t-xs); line-height: 1.5; margin: 0 0 var(--s4); }
.gate .sform .sdone { color: var(--fore); font-size: var(--t-sm); line-height: 1.6; margin: var(--s3) 0; }

@media (max-width: 560px) {
  .sheet.supc { padding: var(--s4) var(--s3) var(--s2); }
  .supc .sform :is(input:not([type=checkbox]), select, textarea), .gate .sform :is(input, select, textarea) { font-size: 16px; }
}

html[data-skin^="classic"] .sheet.supc { border-radius: 12px; }
html[data-skin^="classic"] .supc :is(.smsg, .sform input, .sform select, .sform textarea, .sst),
html[data-skin^="classic"] .gate .sform :is(input, select, textarea),
html[data-skin^="classic"] .helpc .hreply { border-radius: 8px; }