/* ============================================================================
   consentiq-help.css — shared Help & feedback panel styles.
   ----------------------------------------------------------------------------
   The inner content of the help panel (tabs, FAQ accordion, feedback form):
   used by both the app-shell sidebar sub-view and the dashboard dropdown.
   The CONTAINER (sidebar slide, dashboard dropdown box) is styled by each
   caller; this owns the shared internals. Link AFTER tokens.css.
   app-shell.css @imports this; the dashboard links it directly.
   ========================================================================== */

/* tabs */
.cq-help__tabs{display:flex;gap:4px;margin:12px 4px 0}
.cq-help__tab{flex:1;padding:7px 0;border:none;border-radius:var(--r-sm);background:var(--bg);cursor:pointer;
  font-family:var(--font-sans);font-size:12.5px;font-weight:600;color:var(--ink-light);transition:background .12s,color .12s}
.cq-help__tab:hover{color:var(--ink-mid)}
.cq-help__tab.is-active{background:var(--teal-light);color:var(--teal)}

/* body + panes */
.cq-help__body{flex:1;overflow-y:auto;padding:12px;scrollbar-width:thin}
.cq-help__pane{display:none}
.cq-help__pane.is-active{display:block}
.cq-help__intro{font-size:12.5px;color:var(--ink-mid);line-height:1.5;margin-bottom:12px}

/* FAQ accordion */
.cq-faq{display:flex;flex-direction:column;gap:6px}
.cq-faq__item{border:1px solid var(--rule);border-radius:var(--r-sm);overflow:hidden}
.cq-faq__q{width:100%;text-align:left;background:var(--bg);border:none;cursor:pointer;padding:9px 10px;
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  font-family:var(--font-sans);font-size:12.5px;font-weight:600;color:var(--ink);transition:background .12s}
.cq-faq__q:hover{background:var(--teal-light)}
.cq-faq__q .chev{flex-shrink:0;color:var(--teal);transition:transform .18s}
.cq-faq__q.is-open .chev{transform:rotate(180deg)}
.cq-faq__a{max-height:0;overflow:hidden;padding:0 10px;font-size:12.5px;color:var(--ink-mid);line-height:1.55;
  transition:max-height .22s ease,padding .22s ease}
.cq-faq__a.is-open{max-height:360px;padding:8px 10px 10px}
.cq-help__cta{margin-top:14px;padding:10px 12px;background:var(--teal-tint);border:1px solid var(--teal-light);
  border-radius:var(--r-sm);font-size:12px;color:var(--teal-dim);line-height:1.5}
.cq-help__cta a{color:var(--teal);font-weight:600;text-decoration:none}
.cq-help__cta a:hover{text-decoration:underline}

/* feedback form */
.cq-help__form{display:flex;flex-direction:column;gap:12px}
.cq-help__field{display:flex;flex-direction:column;gap:5px}
.cq-help__label{font-size:11px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-light)}
.cq-help__input,.cq-help__select,.cq-help__textarea{width:100%;border:1px solid var(--rule);border-radius:var(--r-sm);
  padding:8px 10px;font-family:var(--font-sans);font-size:12.5px;color:var(--ink);background:var(--bg);outline:none;
  transition:border-color .15s,background .15s}
.cq-help__input:focus,.cq-help__select:focus,.cq-help__textarea:focus{border-color:var(--teal-mid);background:var(--surface)}
.cq-help__select{appearance:none;cursor:pointer}
.cq-help__textarea{resize:vertical;min-height:88px;line-height:1.5}
.cq-help__submit{width:100%;padding:9px;border:none;border-radius:var(--r-sm);background:var(--teal);color:#fff;cursor:pointer;
  font-family:var(--font-sans);font-size:13px;font-weight:600;transition:background .15s}
.cq-help__submit:hover{background:var(--teal-mid)}
.cq-help__submit:disabled{opacity:.6;cursor:not-allowed}
.cq-help__status{display:none;padding:9px 11px;border-radius:var(--r-sm);font-size:12px;line-height:1.4}
.cq-help__status.ok{display:block;background:var(--teal-tint);border:1px solid var(--teal-light);color:var(--teal-dim)}
.cq-help__status.err{display:block;background:var(--red-light);border:1px solid #f5c6c2;color:var(--red)}