/* Master Security — the public Get Support page (/support) and the ticket a
   sender follows from their emailed link. Everything structural (.card, .field,
   .chip, .btn, .alert) comes from theme.css; this file only adds the few pieces
   that page needs and nothing else has. */

.sup-wrap {
    max-width: 700px;
    margin: 0 auto;
    padding: 0 20px;
}

.sup-head {
    text-align: center;
    margin-bottom: 22px;
}
.sup-head h1 { margin-bottom: 6px; }
.sup-head p { margin: 0; }

/* Honeypot. Off-screen rather than display:none, because some bots skip hidden
   fields but happily fill anything still in the DOM. Never shown, never tabbed to. */
.sup-hp {
    position: absolute;
    left: -9999px;
    top: -9999px;
    width: 0;
    height: 0;
    overflow: hidden;
}

/* ---------------------------------------------------------------- sent confirmation */
.sup-done { text-align: center; }
.sup-done h2 { margin: 10px 0 4px; }
.sup-done .sup-tick {
    width: 42px;
    height: 42px;
    color: var(--ms-green-600);
}
.sup-tno {
    font-size: 22px;
    font-weight: 800;
    letter-spacing: .04em;
    color: var(--ms-navy-900);
    margin-bottom: 10px;
}

/* ---------------------------------------------------------------- ticket thread */
.sup-thread {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 4px 0 16px;
}
.sup-msg {
    border: 1px solid var(--ms-line);
    border-left: 3px solid var(--ms-navy-700);
    border-radius: var(--msec-radius-sm);
    padding: 12px 14px;
    background: var(--ms-bg);
}
.sup-msg p { margin: 6px 0 0; }
.sup-msg-us {
    border-left-color: var(--ms-green-600);
    background: var(--ms-green-50);
}

.sup-alt { margin-top: 4px; }
.sup-alt p { margin: 6px 0 0; }

/* ---------------------------------------------------------------- the form */
/* A native select paints its own chevron over the right-hand padding, so on a
   360 px phone a long label runs into it. Reserve room for the chevron and cut
   the label with an ellipsis rather than under it. The labels themselves are kept
   short in ticket_categories(); this is the belt to that pair of braces. */
.sup-wrap .field select {
    padding-right: 32px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}
/* The narrowest phones still in use (320 px) lose another 40 px of width. */
@media (max-width: 380px) {
    .sup-wrap .field select { font-size: 14px; }
}

/* Validation: theme.css marks an invalid input; the support form also has a
   select and a textarea, and each error is written under its own field. */
.sup-wrap .field select[aria-invalid=true],
.sup-wrap .field textarea[aria-invalid=true] { border-color: var(--ms-danger); }
.sup-wrap .field.has-error label { color: var(--ms-danger); }
.sup-wrap .field-err {
    display: block;
    font-size: 13px;
    font-weight: 700;
    color: var(--ms-danger);
    margin-top: 6px;
    line-height: 1.45;
}
.sup-when { text-align: center; margin-top: 12px; }