/* Support: staff queue, staff ticket view and support admin. Everything is scoped under .st.
   Built on brand/tokens.css and style.css; light only, 1.5px borders, pill buttons. */

.st { min-width: 0; }
.st h3 { font-size: 1.1rem; line-height: 1.25; letter-spacing: -.02em; }
.st h4 { margin: 0 0 var(--s-3); font: 600 .9375rem/1.3 var(--font-body); }
.st-head { align-items: flex-end; margin-bottom: 0; }
.st-head h1 { margin-bottom: var(--s-4); }
.st-req { font-weight: 400; color: var(--muted); }
.st-break { overflow-wrap: anywhere; word-break: break-word; }
.st-warn-text { color: var(--danger); font-weight: 500; }

/* ---------- form controls style.css does not cover ---------- */
.st textarea {
  width: 100%; min-height: 6.5em; padding: .82em 1em; font: inherit; font-size: 1rem; line-height: 1.5; color: var(--ink);
  border: 1.5px solid var(--line-strong); border-radius: var(--r-field); background: #fff; resize: vertical;
  transition: border-color .2s, box-shadow .2s;
}
.st textarea:hover { border-color: var(--muted); }
.st textarea:focus { outline: none; border-color: var(--violet-600); box-shadow: var(--ring-focus); }
.st input[type=radio] { width: 18px; height: 18px; padding: 0; margin: 0; flex: none; accent-color: var(--violet-600); box-shadow: none; cursor: pointer; }
.st input[type=checkbox] { accent-color: var(--violet-600); }
.st input[type=radio]:focus-visible, .st input[type=checkbox]:focus-visible { outline: 2px solid var(--violet-600); outline-offset: 2px; }
.st .notice[tabindex="-1"]:focus, .st .error[tabindex="-1"]:focus { outline: 2px solid var(--violet-600); outline-offset: 2px; }
.st input[type=file] { padding: .6em .8em; font-size: .9375rem; background: var(--paper); cursor: pointer; }
.st input[type=file]::file-selector-button {
  margin-right: var(--s-3); padding: .5em 1em; border: 1.5px solid var(--line-strong); border-radius: var(--r-pill);
  background: var(--paper); font: 600 .875rem/1.1 var(--font-body); color: var(--ink); cursor: pointer;
}
.st input[type=file]::file-selector-button:hover { border-color: var(--ink); }
.st input:user-invalid, .st textarea:user-invalid, .st select:user-invalid { border-color: var(--danger); }
.st fieldset { margin: 0 0 var(--s-4); padding: 0; border: 0; min-width: 0; }
.st legend { padding: 0; margin-bottom: var(--s-3); font-size: .875rem; font-weight: 500; }
.st .btn:disabled { opacity: .55; cursor: not-allowed; }
.st [hidden] { display: none !important; }

/* ---------- extra chips (always paired with a word) ---------- */
.chip.st-quiet { background: var(--mist); color: var(--ink-2); box-shadow: inset 0 0 0 1.5px var(--line); }
.chip.st-line { background: var(--paper); color: var(--violet-700); box-shadow: inset 0 0 0 1.5px var(--violet-600); }

/* ---------- queue ---------- */
.st-stats { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
.st-stats .stat.st-stat-bad { background: #fdeeec; }
.st-stats .stat.st-stat-bad b, .st-stats .stat.st-stat-bad span { color: var(--danger); }
.st-filters { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 0 var(--s-4); align-items: end; padding: var(--s-5); }
.st-filters .st-grow { grid-column: span 2; }
.st-filters label { margin-bottom: var(--s-4); }
.st-filters .st-check { min-height: 3.1em; }
.st-filter-actions { grid-column: 1 / -1; margin: 0; align-items: center; }
.st-queue td.st-subject { min-width: 200px; max-width: 360px; overflow-wrap: anywhere; }
.st-queue tr.st-late td:first-child { box-shadow: inset 3px 0 0 var(--danger); }
.st-empty { text-align: left; }
.st-empty p:last-child { margin-bottom: 0; }

/* ---------- ticket ---------- */
.st h1 { overflow-wrap: anywhere; }
.st-flags { margin-bottom: var(--s-5); }
.st-triage { background: #fdeeec; }
.st-triage h2 { color: var(--danger); }
.st-triage p:last-child { margin-bottom: 0; }
.st-layout { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: var(--s-5); align-items: start; }
.st-main, .st-side { min-width: 0; }
@media (max-width: 980px) { .st-layout { grid-template-columns: minmax(0, 1fr); } }
.st-body { white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.6; }
.st-files { list-style: none; padding: 0; margin: var(--s-3) 0 0; }
.st-files li { padding: var(--s-2) 0; border-top: 1.5px solid var(--line); overflow-wrap: anywhere; }
.st-files li:first-child { border-top: 0; }
.st-files a::before { content: "\2197\00a0"; color: var(--muted); }

.st-timeline { list-style: none; padding: 0; margin: 0 0 var(--s-6); position: relative; }
.st-timeline::before { content: ""; position: absolute; left: 11px; top: 6px; bottom: 6px; width: 1.5px; background: var(--line); }
.st-event { position: relative; margin: 0 0 var(--s-3); padding: var(--s-4) var(--s-4) var(--s-4) calc(var(--s-4) + 26px); border: 1.5px solid var(--line); border-radius: var(--r-lg); background: var(--paper); }
.st-event::before { content: ""; position: absolute; left: 6px; top: 22px; width: 12px; height: 12px; border-radius: 50%; background: var(--violet-600); box-shadow: 0 0 0 3px var(--paper); }
.st-event.st-internal { background: var(--mist); border-style: dashed; border-color: var(--line-strong); }
.st-event.st-internal::before { background: var(--paper); box-shadow: 0 0 0 3px var(--mist), inset 0 0 0 2px var(--muted); }
.st-event.st-warn { border-color: #f1c8c4; }
.st-event.st-warn::before { background: var(--danger); box-shadow: 0 0 0 3px var(--mist); }
.st-event-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-3); margin-bottom: var(--s-2); }
.st-event-head .muted { flex: 1 1 auto; text-align: right; }
.st-event .st-body { font-size: .9375rem; }
@media (max-width: 560px) { .st-event-head .muted { text-align: left; flex-basis: 100%; } }

.st-radios label.check { margin-bottom: var(--s-2); }
.st-dl { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: var(--s-2) var(--s-4); margin: 0 0 var(--s-4); font-size: .9375rem; }
.st-dl dt { color: var(--muted); font-size: .8125rem; font-weight: 600; padding-top: 2px; }
.st-dl dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.st-action { padding-top: var(--s-4); margin-top: var(--s-4); border-top: 1.5px solid var(--line); }
.st-action:first-of-type { padding-top: 0; margin-top: 0; border-top: 0; }
.st-action p.small { margin: var(--s-2) 0 0; }
.st-side .card h2 { margin-bottom: var(--s-4); }

/* ---------- support admin ---------- */
.st-subnav { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-4); margin: calc(-1 * var(--s-3)) 0 var(--s-6); font-size: .9375rem; }
.st-section { scroll-margin-top: 90px; margin-bottom: var(--s-7); }
.st-section > h2 { margin-top: 0; }
.st-dept-head { margin-bottom: var(--s-3); align-items: baseline; }
.st-dept-head h3 { margin: 0; }
.st-dept .cols { margin-top: var(--s-4); }
.st-dept-form, .st-members { min-width: 0; }
.st-member-list { list-style: none; padding: 0; margin: 0 0 var(--s-5); }
.st-member-list li { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: var(--s-2) var(--s-4); padding: var(--s-3) 0; border-bottom: 1.5px solid var(--line); }
.st-member-list li > div:first-child { min-width: 0; flex: 1 1 200px; }
.st-member-actions { margin: 0; font-size: .875rem; }
.st-add-member { padding: var(--s-4); border: 1.5px solid var(--line); border-radius: var(--r-lg); background: var(--paper); }
.st-grid-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0 var(--s-4); align-items: start; }
.st-new { margin-top: var(--s-5); }
.st-new h3 { margin-bottom: var(--s-4); }
.st-dir { list-style: none; padding: 0; margin: 0 0 var(--s-5); }
.st-dir li { padding: var(--s-3) 0; border-bottom: 1.5px solid var(--line); }
.st-dir-row { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 2fr) auto auto auto; gap: var(--s-2) var(--s-4); align-items: end; }
.st-dir-row label { margin-bottom: 0; }
.st-dir-row label.check { padding-bottom: .8em; }
.st-dir-row .chip { margin-bottom: .9em; }
.st .card > h3 { margin-bottom: var(--s-3); }
@media (max-width: 760px) {
  .st-dir-row { grid-template-columns: minmax(0, 1fr); align-items: start; }
  .st-dir-row label.check { padding-bottom: 0; }
  .st-dir-row .chip { margin-bottom: 0; justify-self: start; }
  .st-dir-row .btn { justify-self: start; }
}
.st-fieldset { padding-bottom: var(--s-4) !important; margin-bottom: var(--s-5) !important; border-bottom: 1.5px solid var(--line) !important; }
.st-fieldset legend { font: 500 1.05rem/1.3 var(--font-display); letter-spacing: -.01em; }
.st-help { max-width: 46em; margin-bottom: var(--s-4); }
.st-help ul { margin: 0 0 var(--s-3); padding-left: 1.2em; }
.st-help li { margin-bottom: var(--s-1); }
.st-stats-table td, .st-stats-table th { text-align: right; white-space: nowrap; }
.st-stats-table th:first-child, .st-stats-table td:first-child { text-align: left; }
.st-stats-table tfoot th, .st-stats-table tfoot td { border-top: 1.5px solid var(--line-strong); }

/* ---------- narrow phones (360px) ---------- */
@media (max-width: 480px) {
  .st-filters { grid-template-columns: minmax(0, 1fr); padding: var(--s-4); }
  .st-filters .st-grow { grid-column: auto; }
  .st-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3); }
  .st-stats .stat { padding: var(--s-4); }
  .st-stats .stat b { font-size: 2rem; }
  .st-dl { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .st-dl dt { margin-top: var(--s-3); }
  .st-grid-form { grid-template-columns: minmax(0, 1fr); }
  .st .btn { white-space: normal; }
  .st .mono, .st-queue td, .st-member-list, .st-dl dd { overflow-wrap: anywhere; word-break: break-word; }
  .st-queue td.nowrap:first-child { white-space: normal; }
}