/* STARK Client Support - readability update 2026-10-10.
   Loaded only by support.html. The shared portal styles, staff dashboard,
   JavaScript, validation and server-side complaint workflow are unchanged. */

.support-workspace {
  --support-text: 1.0625rem;
  --support-label: 1rem;
  --support-help: .875rem;
}

.support-workspace .panel-heading p {
  font-size: var(--support-label);
  line-height: 1.65;
  max-width: 100%;
}

.support-workspace .panel-heading .eyebrow,
.support-workspace .receipt > .eyebrow,
.support-workspace .ticket-heading .eyebrow {
  font-size: .75rem;
  letter-spacing: .12em;
}

.support-workspace .switcher button {
  font-size: var(--support-label);
  line-height: 1.5;
  gap: 12px;
  min-width: 0;
}

.support-workspace .switcher button span,
.support-workspace legend span {
  font-size: .8125rem;
}

.support-workspace fieldset {
  margin-bottom: 34px;
}

.support-workspace legend {
  font-size: 1.125rem;
  line-height: 1.5;
  font-weight: 600;
  padding-bottom: 16px;
  margin-bottom: 22px;
}

.support-workspace .field-grid {
  column-gap: 20px;
  row-gap: 24px;
}

.support-workspace label {
  font-size: var(--support-label);
  line-height: 1.5;
  font-weight: 500;
}

.support-workspace input:not([type="checkbox"]),
.support-workspace select,
.support-workspace textarea {
  font-size: var(--support-text);
  line-height: 1.5;
  min-height: 52px;
  padding: 12px 13px;
  margin-top: 9px;
  max-width: 100%;
}

.support-workspace select {
  padding-right: 26px;
}

.support-workspace textarea {
  min-height: 96px;
}

.support-workspace small,
.support-workspace .field-hint,
.support-workspace .submit-note,
.support-workspace .privacy-details,
.support-workspace .refresh-note {
  font-size: var(--support-help);
  line-height: 1.65;
}

.support-workspace small {
  margin-top: 8px;
}

.support-workspace .field-hint {
  margin-top: -4px;
}

.support-workspace .check-label {
  font-size: .9375rem;
  line-height: 1.65;
  gap: 12px;
}

.support-workspace .check-label input {
  width: 20px;
  height: 20px;
  margin-top: 3px;
}

.support-workspace .check-label > span {
  min-width: 0;
}

.support-workspace .privacy-details summary,
.support-workspace .recovery-details summary {
  font-size: .9375rem;
  padding-block: 7px;
}

.support-workspace .privacy-details p,
.support-workspace .recovery-details > p {
  font-size: var(--support-help);
  line-height: 1.7;
}

.support-workspace .upload-title {
  font-size: var(--support-label);
}

.support-workspace .upload-box input[type="file"] {
  padding: 8px 0;
  font-size: var(--support-label);
}

.support-workspace .upload-box input::file-selector-button {
  font-family: inherit;
  font-size: var(--support-help);
  line-height: 1.5;
  padding: 10px 12px;
  min-height: 44px;
  margin-right: 8px;
}

.support-workspace .button {
  font-size: var(--support-label);
  line-height: 1.5;
  min-height: 50px;
  white-space: normal;
}

.support-workspace .button-row {
  align-items: stretch;
}

.support-workspace .text-button,
.support-workspace .attachment-link {
  font-size: .9375rem;
  line-height: 1.5;
  min-height: 44px;
}

.support-workspace .notice,
.support-workspace .error-summary {
  font-size: .9375rem;
  line-height: 1.65;
  overflow-wrap: anywhere;
}

.support-workspace .receipt > p,
.support-workspace .detail-grid dd,
.support-workspace .timeline p,
.support-workspace #customer-site,
.support-workspace #customer-action-status {
  font-size: var(--support-label);
  line-height: 1.65;
}

.support-workspace dt {
  font-size: var(--support-help);
}

.support-workspace .receipt-data dd {
  font-size: var(--support-label);
  line-height: 1.6;
}

.support-workspace .receipt > label input {
  font-size: var(--support-text);
}

.support-workspace .timeline-heading h3,
.support-workspace .ticket-heading h3 {
  font-size: 1.125rem;
  line-height: 1.5;
}

.support-workspace .timeline .event-meta {
  font-size: .8125rem;
  line-height: 1.65;
  overflow-wrap: anywhere;
}

.support-workspace .badge {
  font-size: .8125rem;
  line-height: 1.5;
  white-space: normal;
}

.support-workspace .ticket-steps span {
  font-size: .8125rem;
  line-height: 1.5;
  flex: 1 1 76px;
  white-space: normal;
}

/* A narrow side-by-side tablet layout needs full-width form fields. */
@media (min-width: 821px) and (max-width: 1100px) {
  .support-workspace .field-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .support-workspace .field-grid .full {
    grid-column: 1 / -1;
  }
  .support-workspace .switcher button {
    padding-inline: 16px;
  }
}

/* Keep labels and controls readable on phones rather than shrinking the font. */
@media (max-width: 600px) {
  .support-workspace .field-grid,
  .support-workspace .detail-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .support-workspace .field-grid .full,
  .support-workspace .detail-grid .full {
    grid-column: 1 / -1;
  }
  .support-workspace .switcher button {
    padding: 16px 12px;
  }
  .support-workspace .switcher button span {
    display: none;
  }
  .support-workspace .button-row .button {
    flex: 1 1 100%;
  }
  .support-workspace .ticket-heading {
    flex-direction: column;
  }
  .support-workspace .upload-box {
    padding: 15px;
  }
}