/* ── In-panel help: the right-edge tab and the drawer it opens ───────────────
   Loaded after app.css; uses its tokens (--blue, --header-h, --card-shadow).
   The tab sits above the page (z 150) but under modals (z 4000+); the drawer
   sits above the sidebar and the sticky topbar (z 3000) so it can be opened from
   any view without the layout underneath moving. */

.help-tab {
    position: fixed;
    right: 0;
    top: 50%;
    transform: translateY(-50%) rotate(180deg);
    writing-mode: vertical-rl;
    z-index: 150;
    background: var(--blue);
    color: #fff;
    border: none;
    border-radius: 0 8px 8px 0;
    padding: 14px 8px;
    font-size: .85rem;
    font-weight: 600;
    letter-spacing: .4px;
    cursor: pointer;
    box-shadow: -2px 0 10px rgba(0,0,0,.18);
    display: flex;
    align-items: center;
    gap: 8px;
    transition: background .15s, padding-right .15s;
}
.help-tab:hover { background: var(--blue-dark); padding-right: 12px; }
.help-tab i { transform: rotate(90deg); }
.help-tab.is-open { opacity: 0; pointer-events: none; }

.help-overlay {
    position: fixed; inset: 0;
    background: rgba(0,0,0,.35);
    z-index: 2999;
}

.help-drawer {
    position: fixed;
    top: 0; right: 0; bottom: 0;
    width: 440px;
    max-width: 100vw;
    background: #fff;
    z-index: 3000;
    display: flex;
    flex-direction: column;
    box-shadow: -6px 0 24px rgba(0,0,0,.22);
    transform: translateX(100%);
    transition: transform .22s ease;
}
.help-drawer.is-open { transform: translateX(0); }

.help-head {
    display: flex;
    align-items: center;
    gap: 10px;
    height: var(--header-h);
    padding: 0 14px 0 18px;
    border-bottom: 1px solid rgba(0,0,0,.08);
    background: linear-gradient(195deg, #42424a 0%, #191919 100%);
    color: #fff;
    flex: none;
}
.help-head h2 { font-size: 1rem; font-weight: 600; margin: 0; flex: 1; }
.help-head button {
    background: none; border: none; color: rgba(255,255,255,.85);
    font-size: 1.1rem; cursor: pointer; padding: 6px 8px; border-radius: 6px;
}
.help-head button:hover { background: rgba(255,255,255,.12); color: #fff; }

/* Device the tree is cut for. Hidden when the account has one sensor. */
.help-scope {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    padding: 10px 18px;
    border-bottom: 1px solid rgba(0,0,0,.06);
    background: #f7f9fc;
    font-size: .82rem; color: #555;
    flex: none;
}
.help-scope select {
    flex: 1; min-width: 160px;
    font-size: .85rem; padding: 4px 8px;
    border: 1px solid #d0d5dd; border-radius: 6px; background: #fff; color: #344767;
}
.help-badge {
    font-size: .7rem; font-weight: 600; letter-spacing: .3px;
    padding: 2px 7px; border-radius: 10px;
    background: #e8edf3; color: #4a5568; white-space: nowrap;
}
.help-badge--premium { background: #fff3cd; color: #8a6100; }

.help-search {
    padding: 10px 18px 0;
    flex: none;
}
.help-search input {
    width: 100%; font-size: .9rem; padding: 7px 10px 7px 32px;
    border: 1px solid #d0d5dd; border-radius: 8px;
    background: #fff url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2'><circle cx='11' cy='11' r='7'/><path d='m20 20-3.5-3.5'/></svg>") 10px center no-repeat;
}

.help-body {
    flex: 1;
    overflow-y: auto;
    padding: 14px 18px 24px;
    -webkit-overflow-scrolling: touch;
}

.help-crumbs {
    display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
    font-size: .78rem; color: #777; margin-bottom: 12px;
}
.help-crumbs button {
    background: none; border: none; padding: 0; color: var(--blue);
    cursor: pointer; font-size: inherit;
}
.help-crumbs button:hover { text-decoration: underline; }
.help-crumbs i { font-size: .65rem; color: #bbb; }

.help-intro { font-size: .88rem; color: #666; margin: 0 0 12px; }

.help-question { font-size: 1rem; font-weight: 600; color: #344767; margin: 0 0 10px; }
.help-explain  { font-size: .88rem; color: #555; margin: 0 0 12px; }

/* Topics on the first screen and answers under a question share one look. */
.help-list { display: flex; flex-direction: column; gap: 8px; }
.help-item {
    display: flex; align-items: center; gap: 12px;
    width: 100%; text-align: left;
    padding: 11px 12px;
    background: #fff; border: 1px solid #e3e7ee; border-radius: 10px;
    color: #344767; font-size: .92rem; line-height: 1.3;
    cursor: pointer;
    transition: border-color .12s, box-shadow .12s, transform .08s;
}
.help-item:hover { border-color: var(--blue); box-shadow: 0 2px 10px rgba(26,115,232,.14); }
.help-item:active { transform: translateY(1px); }
.help-item i.help-item-icon {
    width: 28px; height: 28px; border-radius: 8px;
    display: inline-flex; align-items: center; justify-content: center;
    background: #eaf2fd; color: var(--blue); font-size: .85rem; flex: none;
}
.help-item .help-item-text { flex: 1; }
.help-item .fa-chevron-right { color: #c0c6cf; font-size: .7rem; }
.help-item--solution i.help-item-icon { background: #e8f5e9; color: #2e7d32; }

.help-solution h3 { font-size: 1.02rem; font-weight: 600; color: #344767; margin: 0 0 10px; }
.help-solution-body { font-size: .9rem; line-height: 1.5; color: #333; }
.help-solution-body p  { margin: 0 0 10px; }
.help-solution-body ul { margin: 0 0 10px; padding-left: 20px; }
.help-solution-body li { margin: 3px 0; }
.help-solution-body a  { color: var(--blue); }
.help-solution-body strong { font-weight: 600; }

.help-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 6px; }
.help-actions .btn { font-size: .85rem; }

.help-feedback {
    margin-top: 18px; padding-top: 14px;
    border-top: 1px dashed #e0e4ea;
    font-size: .85rem; color: #555;
}
.help-feedback-q { margin: 0 0 8px; font-weight: 600; color: #344767; }
.help-feedback-btns { display: flex; gap: 8px; flex-wrap: wrap; }
.help-feedback-btns .btn { font-size: .82rem; padding: 5px 12px; }
.help-feedback-thanks { color: #2e7d32; font-weight: 600; }
.help-contact-hint { font-size: .78rem; color: #777; margin: 6px 0 0; }

.help-state { padding: 24px 0; text-align: center; color: #777; font-size: .9rem; }
.help-state .btn { margin-top: 10px; }

.help-foot {
    flex: none;
    padding: 10px 18px;
    border-top: 1px solid rgba(0,0,0,.08);
    font-size: .78rem; color: #777;
    display: flex; gap: 14px; flex-wrap: wrap;
}
.help-foot a { color: var(--blue); text-decoration: none; }
.help-foot a:hover { text-decoration: underline; }

@media (max-width: 768px) {
    .help-drawer { width: 100vw; }
    .help-tab { padding: 10px 6px; font-size: .78rem; }
}