/* support.css — public Support page, on the plenum ecosystem palette.
   Colours from hub/css/plenum.css; spacing/focus from css/tokens.css. Light + dark. */

/* Top bar */
.top-bar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 26px; height: 58px; position: sticky; top: 0; z-index: 100;
  background: color-mix(in srgb, var(--paper) 82%, transparent);
  -webkit-backdrop-filter: blur(14px) saturate(1.4); backdrop-filter: blur(14px) saturate(1.4);
  border-bottom: 1px solid var(--hair);
}
.top-bar-logo { font-size: var(--t-md); font-weight: 700; color: var(--ink); text-decoration: none; letter-spacing: var(--track-snug); }
.top-bar-logo span { color: var(--accent); }
.top-bar-right { display: flex; align-items: center; gap: var(--sp-3); }
.top-bar-user { font-size: var(--t-sm); color: var(--ink-3); }

/* Page content */
.page { max-width: 820px; margin: 0 auto; padding: var(--sp-10) var(--sp-6) 80px; }
.page-title { font-size: var(--t-2xl); font-weight: 600; letter-spacing: var(--track-tight); margin-bottom: var(--sp-1_5); }
.page-subtitle { font-size: var(--t-base); color: var(--ink-2); margin-bottom: var(--sp-7); }

/* Tab bar */
.tab-bar { display: flex; gap: var(--sp-1); border-bottom: 1px solid var(--hair); margin-bottom: var(--sp-7); }
.tab-btn {
  padding: var(--sp-2_5) var(--sp-5); font-size: var(--t-base); font-weight: 500; color: var(--ink-3);
  background: none; border: none; border-bottom: 2px solid transparent; cursor: pointer; font-family: inherit;
  display: inline-flex; align-items: center; gap: var(--sp-1_5); transition: color var(--dur), border-color var(--dur);
}
.tab-btn:hover { color: var(--ink); }
.tab-btn.active { color: var(--ink); border-bottom-color: var(--accent); }

/* Buttons */
.btn { display: inline-flex; align-items: center; gap: var(--sp-1_5); padding: 0 var(--sp-4); height: 35px; font-size: var(--t-sm); font-weight: 600; border-radius: 9px; border: 1px solid transparent; cursor: pointer; font-family: inherit; text-decoration: none; transition: background var(--dur), border-color var(--dur), box-shadow var(--dur); }
.btn-primary { background: var(--accent); color: #fff; box-shadow: var(--sh-1); }
.btn-primary:hover { background: var(--accent-2); box-shadow: var(--sh-2); }
.btn-secondary { background: var(--panel); color: var(--ink-2); border-color: var(--hair-2); box-shadow: var(--sh-1); }
.btn-secondary:hover { color: var(--ink); border-color: var(--ink-3); }
.btn:focus-visible, .tab-btn:focus-visible, .pill:focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-offset); }

/* Forms */
.form-group { margin-bottom: var(--sp-3_5); }
.form-group label { display: block; font-size: var(--t-xs); font-weight: 600; color: var(--ink-2); margin-bottom: 6px; }
.form-group input, .form-group select, .form-group textarea {
  width: 100%; padding: 10px var(--sp-3); background: var(--panel); border: 1px solid var(--hair-2);
  border-radius: 10px; color: var(--ink); font-size: var(--t-base); font-family: inherit; transition: border-color var(--dur), box-shadow var(--dur);
}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring); }
.form-group textarea { resize: vertical; }

/* Search */
.search-wrap { position: relative; margin-bottom: 18px; }
.search-wrap i { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--ink-3); font-size: 16px; }
.search-wrap input { width: 100%; padding: 10px var(--sp-3) 10px 36px; background: var(--panel); border: 1px solid var(--hair-2); border-radius: 10px; color: var(--ink); font-size: var(--t-base); font-family: inherit; }
.search-wrap input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring); }

/* Category pills */
.pill-row { display: flex; gap: var(--sp-1_5); flex-wrap: wrap; margin-bottom: 18px; }
.pill { padding: 5px var(--sp-3_5); font-size: var(--t-sm); font-weight: 600; border-radius: 20px; border: 1px solid var(--hair-2); background: var(--panel); color: var(--ink-2); cursor: pointer; transition: color var(--dur), border-color var(--dur), background var(--dur); }
.pill:hover { color: var(--ink); border-color: var(--ink-3); }
.pill.active { background: var(--accent-wash); color: var(--accent-2); border-color: color-mix(in srgb, var(--accent) 30%, var(--panel)); }

/* FAQ cards */
.faq-card { background: var(--panel); border: 1px solid var(--hair); border-radius: var(--r); padding: var(--sp-4) 18px; margin-bottom: var(--sp-2); cursor: pointer; box-shadow: var(--sh-1); transition: border-color var(--dur), box-shadow var(--dur); }
.faq-card:hover { border-color: var(--hair-2); box-shadow: var(--sh-2); }
.faq-card-title { font-size: var(--t-base); font-weight: 600; display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); }
.faq-card-body { font-size: var(--t-sm); color: var(--ink-2); display: none; margin-top: var(--sp-3); line-height: 1.7; }
.faq-card-body p { margin-bottom: var(--sp-2); }
.faq-card-body ul, .faq-card-body ol { margin: var(--sp-2) 0 var(--sp-2) var(--sp-5); }
.faq-card.open .faq-card-body { display: block; }
.faq-card .ti-chevron-down { transition: transform 0.2s ease; color: var(--ink-3); }
.faq-card.open .ti-chevron-down { transform: rotate(180deg); }

/* Ticket cards */
.ticket-status { display: inline-flex; align-items: center; font-size: 10px; font-weight: 700; padding: var(--sp-0_5) 7px; border-radius: 10px; border: 1px solid; }
.ticket-status.open        { background: var(--accent-wash); color: var(--accent-2); border-color: color-mix(in srgb, var(--accent) 25%, var(--panel)); }
.ticket-status.in-progress { background: color-mix(in srgb, #f59e0b 12%, var(--panel)); color: #b45309; border-color: color-mix(in srgb, #f59e0b 28%, var(--panel)); }
.ticket-status.resolved    { background: color-mix(in srgb, var(--pos) 12%, var(--panel)); color: var(--accent-2); border-color: color-mix(in srgb, var(--pos) 24%, var(--panel)); }
.ticket-card { background: var(--panel); border: 1px solid var(--hair); border-radius: var(--r); padding: var(--sp-3_5) var(--sp-4); margin-bottom: var(--sp-2); box-shadow: var(--sh-1); }
.ticket-card-title { font-size: var(--t-base); font-weight: 600; margin-bottom: var(--sp-1_5); }
.ticket-card-meta { display: flex; gap: var(--sp-2); align-items: center; flex-wrap: wrap; color: var(--ink-3); font-size: var(--t-xs); }

/* Auth gate overlay */
.auth-gate { background: var(--panel); border: 1px solid var(--hair); border-radius: var(--r-lg); padding: var(--sp-12) var(--sp-8); text-align: center; margin-top: var(--sp-6); box-shadow: var(--sh-1); }
.auth-gate i { font-size: 36px; color: var(--ink-3); margin-bottom: var(--sp-4); display: block; }
.auth-gate p { font-size: var(--t-base); color: var(--ink-2); margin-bottom: var(--sp-5); }

/* Empty state */
.empty-state { text-align: center; padding: var(--sp-12) var(--sp-8); color: var(--ink-3); }
.empty-state i { font-size: 36px; display: block; margin-bottom: var(--sp-3); }
.empty-state p { font-size: var(--t-sm); }

/* Toast */
#toastContainer { position: fixed; bottom: 24px; right: 24px; z-index: 9999; display: flex; flex-direction: column; gap: var(--sp-2); }
.toast { padding: var(--sp-2_5) var(--sp-4); border-radius: 10px; font-size: var(--t-sm); font-weight: 500; max-width: 320px; box-shadow: var(--sh-pop); animation: fadeIn 0.2s ease; }
.toast.success { background: color-mix(in srgb, var(--pos) 12%, var(--panel)); color: var(--accent-2); border: 1px solid color-mix(in srgb, var(--pos) 26%, var(--panel)); }
.toast.error   { background: color-mix(in srgb, var(--neg) 12%, var(--panel)); color: var(--neg); border: 1px solid color-mix(in srgb, var(--neg) 26%, var(--panel)); }
.toast.info    { background: var(--panel); color: var(--ink); border: 1px solid var(--hair-2); }
@keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes spin { to { transform: rotate(360deg); } }
.spin, .ti-spin { display: inline-block; animation: spin 0.8s linear infinite; }

/* Responsive */
@media (max-width: 768px) {
  .top-bar { padding: 0 var(--sp-4); }
  .page { padding: var(--sp-7) var(--sp-4) var(--sp-16); }
  .page-title { font-size: var(--t-xl); }
  .tab-bar { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; gap: var(--sp-0_5); }
  .tab-btn { padding: var(--sp-3) var(--sp-3_5); white-space: nowrap; flex-shrink: 0; min-height: 44px; }
  .pill { padding: 9px var(--sp-3_5); }
  #newTicketForm > div[style*="grid"] { grid-template-columns: 1fr !important; }
  input, select, textarea,
  .form-group input, .form-group select, .form-group textarea,
  .search-wrap input { font-size: 16px; }
}