/* Help & Safety Center (brief 18). Builds on workafy-ui.css tokens; hc-* prefix
   (company help_support.blade.php already uses hs-*). */

.hc { --hc-gap: 18px; color: var(--wf-text, #374151); }
.hc--public { padding: 28px 0 56px; }
.hc--dashboard { padding-bottom: 32px; }
.hc a { text-decoration: none; }
.hc h1, .hc h2, .hc h3 { color: var(--wf-ink, #111827); }

/* Cards / layout */
.hc-card { background: #fff; border: 1px solid var(--wf-line, #e5e7eb); border-radius: var(--wf-radius, 14px); padding: 22px; margin-bottom: var(--hc-gap); }
.hc-card--flush { padding: 0; overflow: hidden; }
.hc-card--alert { border-color: #fecaca; background: #fffafa; }
.hc-stack { display: flex; flex-direction: column; gap: 12px; }
.hc-stack > .hc-card { margin-bottom: 0; }
.hc-grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--hc-gap); }
.hc-section { margin-bottom: 24px; }
.hc-section__title { font-size: 17px; font-weight: 800; margin: 0 0 12px; display: flex; align-items: center; gap: 8px; }
.hc-section__title i { color: var(--wf-green, #07993f); }
.hc-card--alert .hc-section__title i { color: var(--wf-danger, #dc2626); }
.hc-meta { color: var(--wf-muted, #6b7280); font-size: 13px; margin: -6px 0 16px; }
.hc-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 14px; }
.hc-actions--top { margin: 0 0 12px; }
.hc-actions--center { justify-content: center; }

/* Page head */
.hc-head { margin-bottom: 20px; }
.hc-head .wf-breadcrumb { margin-bottom: 8px; }
.hc-head__title { font-size: 28px; font-weight: 800; letter-spacing: -.01em; margin: 0 0 6px; line-height: 1.2; }
.hc-head__lead { margin: 0; color: var(--wf-muted, #6b7280); font-size: 15px; max-width: 680px; }

/* Landing hero + search */
.hc-hero { background: radial-gradient(circle at 85% 0%, rgba(7, 153, 63, .10), transparent 45%), linear-gradient(180deg, var(--wf-green-softer, #f5fcf7), #fff); border: 1px solid var(--wf-green-line, #ccefd8); border-radius: var(--wf-radius-lg, 18px); padding: 30px; margin-bottom: var(--hc-gap); }
.hc-hero__title { font-size: 32px; font-weight: 800; margin: 4px 0 6px; letter-spacing: -.01em; }
.hc-hero__lead { margin: 0 0 18px; color: var(--wf-muted, #6b7280); font-size: 15px; max-width: 640px; }
.hc-search { display: flex; align-items: center; gap: 10px; max-width: 640px; min-height: 52px; padding: 6px 6px 6px 16px; background: #fff; border: 1px solid var(--wf-input-line, #dfe5ec); border-radius: 12px; color: var(--wf-muted, #6b7280); margin-bottom: 4px; }
.hc-search:focus-within { border-color: var(--wf-green, #07993f); box-shadow: 0 0 0 3px rgba(7, 153, 63, .12); }
.hc-search input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; font-size: 15px; color: var(--wf-ink, #111827); }
.hc-search--sm { min-height: 42px; max-width: 360px; margin: 0; }
.hc-search--sm input { font-size: 14px; }

/* Safety line: never split a word ("ap ply"), wrap only between words. */
.hc-safety { display: flex; gap: 14px; align-items: flex-start; padding: 16px 18px; margin-bottom: var(--hc-gap); border: 1px solid #fde68a; background: var(--wf-warning-soft, #fff8df); border-radius: var(--wf-radius, 14px); }
.hc-safety__icon { flex: 0 0 40px; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: #fff; color: #b45309; font-size: 18px; }
.hc-safety__body { flex: 1; min-width: 0; }
.hc-safety__line { margin: 0; font-size: 15px; font-weight: 700; line-height: 1.55; color: #78350f; word-break: normal; overflow-wrap: normal; hyphens: none; -webkit-hyphens: none; }
.hc-safety--hero { padding: 22px; }
.hc-safety--hero .hc-safety__line { font-size: 17px; }
.hc-safety--compact { margin: 22px 0 0; padding: 12px 14px; }
.hc-safety--compact .hc-safety__line { font-size: 14px; font-weight: 600; }

/* Tiles */
.hc-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.hc-tile { display: flex; flex-direction: column; gap: 4px; padding: 18px; background: #fff; border: 1px solid var(--wf-line, #e5e7eb); border-radius: var(--wf-radius, 14px); color: var(--wf-text, #374151); transition: border-color .15s ease, box-shadow .15s ease; }
a.hc-tile:hover, a.hc-tile:focus-visible { border-color: var(--wf-green-line, #ccefd8); box-shadow: 0 8px 22px rgba(7, 20, 33, .06); color: var(--wf-text, #374151); }
a.hc-tile:focus-visible { outline: 2px solid var(--wf-green, #07993f); outline-offset: 2px; }
.hc-tile.is-muted { background: #fafbfc; }
.hc-tile__icon { width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; background: var(--wf-green-soft, #eaf8ef); color: var(--wf-green, #07993f); margin-bottom: 6px; }
.hc-tile__title { font-weight: 800; color: var(--wf-ink, #111827); font-size: 15px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.hc-tile__text { font-size: 13px; color: var(--wf-muted, #6b7280); line-height: 1.5; }

/* Article lists */
.hc-list { list-style: none; margin: 0; padding: 0; }
.hc-list li { display: flex; align-items: center; gap: 12px; border-top: 1px solid var(--wf-line-soft, #edf1f5); }
.hc-list li:first-child { border-top: 0; }
.hc-list a { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; padding: 12px 0; }
.hc-card > .hc-list a { padding: 12px 0; }
.hc-list__title { font-weight: 700; color: var(--wf-ink, #111827); }
.hc-list a:hover .hc-list__title { color: var(--wf-green-dark, #057a33); }
.hc-list__meta { font-size: 13px; color: var(--wf-muted, #6b7280); }
.hc-list i { color: var(--wf-muted, #6b7280); font-size: 12px; }

/* Article */
.hc-article-layout, .hc-form-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: var(--hc-gap); align-items: start; }
.hc-article { font-size: 15px; line-height: 1.7; }
.hc-article h2 { font-size: 18px; font-weight: 800; margin: 22px 0 8px; }
.hc-article p { margin: 0 0 12px; }
.hc-article__summary { font-size: 16px; color: var(--wf-muted, #6b7280); }
.hc-bullets { margin: 0 0 12px; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; }
.hc-steps { margin: 0 0 12px; padding-left: 22px; display: flex; flex-direction: column; gap: 8px; }
.hc-feedback { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--wf-line-soft, #edf1f5); }
.hc-feedback__q { font-weight: 700; color: var(--wf-ink, #111827); }
.hc-feedback__btns { display: flex; gap: 8px; }
.hc-feedback__thanks { margin: 0; width: 100%; color: var(--wf-green-dark, #057a33); font-weight: 600; }
.hc-note p { color: var(--wf-text, #374151); }

/* Forms */
.hc-form .wf-form-actions { border-top: 1px solid var(--wf-line-soft, #edf1f5); padding-top: 16px; margin-top: 4px; }
.hc-linked { margin: 0; min-height: 46px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 10px 14px; border-radius: var(--wf-radius-sm, 9px); background: var(--wf-surface, #f6f8fa); color: var(--wf-ink, #111827); font-weight: 600; word-break: break-all; }
.hc-linked i { color: var(--wf-green, #07993f); }
.hc-check--alert { padding: 12px 14px; border-radius: var(--wf-radius-sm, 9px); background: #fffafa; border: 1px solid #fecaca; }
.hc-file { padding: 9px 12px; }
.hc-hp { position: absolute !important; left: -10000px !important; width: 1px; height: 1px; overflow: hidden; }
.hc .wf-field.is-invalid .wf-input, .hc .wf-field.is-invalid .wf-select, .hc .wf-field.is-invalid .wf-textarea { border-color: var(--wf-danger, #dc2626); }
.hc .wf-error[hidden] { display: none; }

/* Submitted */
.hc-done { text-align: center; max-width: 720px; margin: 0 auto var(--hc-gap); padding: 32px; }
.hc-done__icon { display: inline-grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: var(--wf-green-soft, #eaf8ef); color: var(--wf-green, #07993f); font-size: 30px; margin-bottom: 10px; }
.hc-done__lead { font-size: 16px; margin: 0 auto 18px; max-width: 560px; }
.hc-facts { margin: 0 0 14px; text-align: left; border: 1px solid var(--wf-line-soft, #edf1f5); border-radius: 12px; }
.hc-facts > div { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: 12px; padding: 10px 14px; border-top: 1px solid var(--wf-line-soft, #edf1f5); }
.hc-facts > div:first-child { border-top: 0; }
.hc-facts dt { font-weight: 600; color: var(--wf-muted, #6b7280); font-size: 13px; }
.hc-facts dd { margin: 0; color: var(--wf-ink, #111827); font-size: 14px; }
.hc-facts--stacked > div { grid-template-columns: 1fr; gap: 2px; }
.hc-ref { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: .02em; }

/* My Support Requests */
.hc-toolbar { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; align-items: center; margin-bottom: 14px; }
.hc-tabs { display: flex; flex-wrap: wrap; gap: 6px; }
.hc-tab { padding: 7px 12px; border-radius: 999px; border: 1px solid var(--wf-line, #e5e7eb); background: #fff; font-size: 13px; font-weight: 600; color: var(--wf-text, #374151); }
.hc-tab:hover { border-color: var(--wf-green-line, #ccefd8); color: var(--wf-green-dark, #057a33); }
.hc-tab.is-active { background: var(--wf-green, #07993f); border-color: var(--wf-green, #07993f); color: #fff; }
.hc-tickets { list-style: none; margin: 0; padding: 0; }
.hc-tickets li + li { border-top: 1px solid var(--wf-line-soft, #edf1f5); }
.hc-ticket { display: flex; justify-content: space-between; gap: 16px; padding: 16px 20px; color: var(--wf-text, #374151); }
.hc-ticket:hover { background: var(--wf-green-softer, #f5fcf7); color: var(--wf-text, #374151); }
.hc-ticket__main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.hc-ticket__ref { font: 600 12px/1.4 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: var(--wf-muted, #6b7280); }
.hc-ticket__subject { font-weight: 700; color: var(--wf-ink, #111827); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hc-ticket__meta { font-size: 12.5px; color: var(--wf-muted, #6b7280); }
.hc-ticket__side { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; flex-shrink: 0; }
.hc-ticket__cta { font-size: 13px; font-weight: 700; color: var(--wf-green, #07993f); }
.hc-pager { margin-top: 12px; }
.hc-msg--support { border-color: var(--wf-green-line, #ccefd8); background: var(--wf-green-softer, #f5fcf7); }
.hc-msg__head { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 8px; font-size: 13px; }
.hc-msg__head time { color: var(--wf-muted, #6b7280); }
.hc-msg__body { margin: 0; line-height: 1.6; overflow-wrap: anywhere; }
.hc-files { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 4px; font-size: 13px; }
.hc-files a { color: var(--wf-green-dark, #057a33); font-weight: 600; }

@media (max-width: 991px) {
  .hc-article-layout, .hc-form-layout { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .hc-grid-2 { grid-template-columns: 1fr; }
  .hc-hero { padding: 22px 18px; }
  .hc-hero__title { font-size: 26px; }
  .hc-head__title { font-size: 24px; }
  .hc-card { padding: 18px; }
  .hc-search { flex-wrap: wrap; padding: 8px 12px; }
  .hc-search .wf-btn { width: 100%; }
  .hc-search--sm { max-width: none; width: 100%; }
  .hc-facts > div { grid-template-columns: 1fr; gap: 2px; }
  .hc-ticket { flex-direction: column; }
  .hc-ticket__side { align-items: flex-start; flex-direction: row; }
  .hc-actions .wf-btn { flex: 1 1 auto; }
}