/* Support: the /support pages, the member Support tab and Studio > Support. */
.sp-search { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 18px; max-width: 640px; }
.sp-search input { flex: 1 1 260px; min-height: 48px; padding: 0 1em; border-radius: 999px; border: 1px solid var(--line, #e4dccd); background: var(--card, #fff); font: inherit; color: inherit; }
.sp-body { padding-block: clamp(24px, 4vw, 48px); display: grid; gap: 16px; max-width: 860px; }
.sp-list { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 12px; }
.sp-list li span { color: var(--ink-soft, #6b6457); font-size: .92rem; }
.sp-faq details { border-bottom: 1px solid var(--line, #e4dccd); padding: 10px 0; }
.sp-faq summary { cursor: pointer; font-weight: 600; }
.sp-products { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.sp-product { display: grid; gap: 4px; padding: 16px 18px; border-radius: var(--radius-lg, 16px); border: 1px solid var(--line, #e4dccd); background: var(--card, #fff); text-decoration: none; color: inherit; min-height: 44px; }
.sp-product:hover { border-color: var(--sage-800, #3d4f3a); }
.sp-product span, .sp-note { color: var(--ink-soft, #6b6457); font-size: .92rem; }
.sp-suggest { margin-bottom: 18px; padding: 16px 18px; border-radius: var(--radius-lg, 16px); background: var(--sage-50, #f1f4ee); border: 1px solid var(--sage-200, #cfd8c8); }
.sp-suggest[hidden] { display: none; }
.sp-thread { list-style: none; margin: 0 0 24px; padding: 0; display: grid; gap: 14px; }
.sp-msg { padding: 14px 16px; border-radius: var(--radius-lg, 16px); border: 1px solid var(--line, #e4dccd); background: var(--card, #fff); }
.sp-msg--you { background: var(--cream-200, #f4efe6); }
.sp-msg__who { margin: 0 0 6px; display: flex; gap: 10px; flex-wrap: wrap; justify-content: space-between; font-size: .9rem; }
.sp-msg__body { overflow-wrap: anywhere; }
.sp-files { list-style: none; margin: 8px 0 0; padding: 0; font-size: .9rem; }
.sp-status { display: inline-block; padding: .15em .7em; border-radius: 999px; font-size: .78rem; font-weight: 600; background: var(--sage-50, #f1f4ee); border: 1px solid var(--sage-200, #cfd8c8); color: var(--sage-800, #3d4f3a); }
.sp-status--new, .sp-status--open { background: #fbeee9; border-color: #e5b9aa; color: #6b2a17; }
.sp-status--closed { background: var(--cream-200, #f4efe6); border-color: var(--line, #e4dccd); color: var(--ink-soft, #6b6457); }
.sp-tickets { display: grid; gap: 12px; margin-top: 12px; }
.sp-ticket { text-decoration: none; color: inherit; }
.sp-ticket:hover { border-color: var(--sage-800, #3d4f3a); }
/* Studio */
.sp-studio { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 16px; align-items: start; }
.sp-m--customer { border-left: 3px solid #9b5038; }
.sp-m--staff { border-left: 3px solid #3d4f3a; }
.sp-m--note { background: #fff8e6; border-left: 3px solid #c9a227; }
@media (max-width: 860px) { .sp-studio { grid-template-columns: 1fr; } }