/* Hand talk (BILMS-495): questions and write-ups about hands */
.bi-ht-list { list-style: none; margin: 0; padding: 0; }
.bi-ht-list > li { padding: 14px 0; border-top: 1px solid #e3eef9; }
.bi-ht-list > li:first-child { border-top: 0; padding-top: 0; }
.bi-ht-list h3 { font-size: 1.05rem; margin: 2px 0 4px; }
.bi-ht-list h3 a { text-decoration: none; }
.bi-ht-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; color: #6b7782; font-size: .88rem; }
.bi-ht-kind { display: inline-block; padding: 1px 9px; border-radius: 999px; font-size: .75rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; background: #e8f1fb; color: #12305a; }
.bi-ht-kind.is-writeup { background: #eaf6ee; color: #1f6b45; }
.bi-ht-pro { display: inline-block; padding: 0 7px; border-radius: 6px; font-size: .72rem; font-weight: 700; background: #12305a; color: #fff; vertical-align: 1px; }
.bi-ht-club { display: inline-flex; align-items: center; gap: 4px; }
.bi-ht-held { padding: 10px 14px; border-radius: 10px; background: #fff7d6; color: #6b5300; margin-bottom: 14px; }
.bi-ht-flash { padding: 10px 14px; border-radius: 10px; background: #eaf6ee; color: #1f6b45; margin-bottom: 14px; }
.bi-ht-errors { padding: 10px 14px; border-radius: 10px; background: #fdecea; color: #8a1f1f; margin-bottom: 14px; }
.bi-ht-body { font-size: 1.02rem; line-height: 1.6; }
.bi-ht-body p:last-child { margin-bottom: 0; }
.bi-ht-auction { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; margin: 10px 0 0; }
.bi-ht-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-top: 14px; }
.bi-ht-actions form { margin: 0; }
.bi-ht-link { background: none; border: 0; padding: 0; color: #12305a; text-decoration: underline; font-size: .9rem; cursor: pointer; }
.bi-ht-link.is-danger { color: #b3261e; }
.bi-ht-report summary { color: #6b7782; font-size: .88rem; cursor: pointer; }
.bi-ht-report form { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.bi-ht-start { display: flex; flex-wrap: wrap; gap: 8px; }
.bi-ht-form label.bi-ht-choice { display: flex; gap: 8px; align-items: flex-start; padding: 10px 12px; border: 1px solid #d6e2ee; border-radius: 10px; cursor: pointer; margin: 0; }
.bi-ht-form label.bi-ht-choice small { display: block; color: #6b7782; }
.bi-ht-choices { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 8px; }
.bi-ht-form .form-label { font-weight: 600; margin-top: 14px; }
.bi-ht-second { display: inline-flex; align-items: center; justify-content: center; min-height: 38px; padding: 7px 18px; border: 1px solid #c9d8e8; border-radius: 5px; background: #fff; color: #07467e; font-size: 15px; font-weight: 700; text-decoration: none; }
.bi-ht-second:hover, .bi-ht-second:focus { border-color: #07467e; color: #07467e; }

/* replies, as the comments on lessons and articles (styleNew.css .lc-*), with BI's colours */
#replies.lesson-comments { --site-tint: #f3f7fb; --site-tint-strong: #e3eef9; --tenant-main-color: #12305a; --tenant-accent-color: #0861a9;
    --text-on-bg-main-color: #fff; --site-muted: #6b7782; --site-line: #e2e7ec; --site-ink: #1f2a37; --site-radius: 12px; max-width: none; }
.lesson-comments { --lc-avatar: 40px; }
.lc-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1rem; margin-bottom: 1rem; }
.lc-title { margin: 0; font-size: 1.5rem; }
.lc-count:not(:empty) { margin-left: .25rem; font-size: .65em; font-weight: 700; vertical-align: middle; padding: .1em .55em; border-radius: 1em; background: var(--site-tint-strong); color: var(--tenant-main-color); }
.lc-follow { margin: 0; font-size: .9rem; color: var(--site-muted); }
.lc-follow .form-check-input { cursor: pointer; }
.lc-follow .form-check-input:checked { background-color: var(--tenant-main-color); border-color: var(--tenant-main-color); }

.lc-avatar {
    flex: 0 0 var(--lc-avatar); width: var(--lc-avatar); height: var(--lc-avatar); border-radius: 50%; overflow: hidden;
    display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: .85rem; letter-spacing: .02em;
    background: var(--site-tint-strong); color: var(--tenant-main-color);
}
.lc-avatar { position: relative; }
.lc-avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: #fff; }
.lc-avatar--team { background: var(--tenant-main-color); color: var(--text-on-bg-main-color, #fff); box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--tenant-accent-color, var(--tenant-main-color)); }

.lc-composer { display: flex; gap: .85rem; align-items: flex-start; background: #fff; border: 1px solid var(--site-line); border-radius: var(--site-radius); padding: 1rem; margin-bottom: 1.5rem; }
.lc-composer-main { flex: 1; min-width: 0; }
.lc-textarea { resize: none; border-radius: 10px; border-color: var(--site-line); min-height: 2.75rem; line-height: 1.5; }
.lc-textarea:focus { border-color: color-mix(in srgb, var(--tenant-main-color), #fff 40%); box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--tenant-main-color), transparent 85%); }
.lc-composer-foot { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .75rem; margin-top: .5rem; }
.lc-composer-foot .btn-primary { margin-left: auto; padding-left: 1rem; padding-right: 1rem; }
.lc-about { display: inline-flex; align-items: center; gap: .4rem; max-width: 100%; margin: 0; padding: .2rem .6rem .2rem .45rem; border-radius: 1rem; background: var(--site-tint); color: var(--site-ink); font-size: .82rem; cursor: pointer; }
.lc-about .form-check-input { margin: 0; flex: 0 0 auto; }
.lc-about .form-check-input:checked { background-color: var(--tenant-main-color); border-color: var(--tenant-main-color); }
.lc-about span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lc-about i { color: var(--tenant-main-color); }
.lc-hint { font-size: .78rem; color: var(--site-muted); }
.lc-error { margin-top: .5rem; font-size: .88rem; color: #b42318; }
.suit-red { color: #d0021b; }

.lc-gate { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1rem; background: var(--site-tint); border: 1px solid var(--site-line); border-radius: var(--site-radius); padding: 1rem 1.2rem; margin-bottom: 1.5rem; }
.lc-gate > i { font-size: 1.6rem; color: var(--tenant-main-color); }
.lc-gate > div { flex: 1; min-width: 220px; }
.lc-gate p { margin: .15rem 0 0; color: var(--site-muted); font-size: .92rem; }

.lc-loading, .lc-empty { padding: 2rem 1rem; text-align: center; color: var(--site-muted); }
.lc-empty i { display: block; font-size: 1.8rem; color: var(--site-line); margin-bottom: .35rem; color: color-mix(in srgb, var(--tenant-main-color), #fff 55%); }

.lc-thread { padding: 1rem 0; border-bottom: 1px solid var(--site-line); }
.lc-thread:last-child { border-bottom: 0; }
.lc-item { display: flex; gap: .85rem; align-items: flex-start; position: relative; border-radius: 12px; transition: background-color .6s ease, box-shadow .6s ease; }
.lc-item.is-flash { background: color-mix(in srgb, var(--tenant-accent-color, var(--tenant-main-color)), #fff 88%); box-shadow: 0 0 0 .5rem color-mix(in srgb, var(--tenant-accent-color, var(--tenant-main-color)), #fff 88%); }
.lc-main { flex: 1; min-width: 0; }
.lc-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .1rem .4rem; font-size: .85rem; color: var(--site-muted); line-height: 1.4; }
.lc-name { font-weight: 700; color: var(--site-ink); font-size: .95rem; }
.lc-badge { font-size: .68rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding: .12rem .5rem; border-radius: 1rem; background: var(--tenant-main-color); color: var(--text-on-bg-main-color, #fff); }
.lc-badge--team { background: var(--site-tint-strong); color: var(--tenant-main-color); }
.lc-dot { opacity: .6; }
.lc-edited { font-style: italic; }
.lc-about-chip { border: 0; background: var(--site-tint); color: var(--tenant-main-color); border-radius: 1rem; padding: .05rem .55rem; font-size: .78rem; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lc-about-chip:hover { background: var(--site-tint-strong); }
.lc-body { margin-top: .3rem; color: var(--site-ink); line-height: 1.6; overflow-wrap: anywhere; }
.lc-body a { color: var(--tenant-main-color); text-decoration: underline; background-image: none !important; }
.lc-mention { font-weight: 600; color: var(--tenant-main-color); margin-right: .15rem; }

.lc-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .15rem; margin: .35rem 0 0 -.45rem; }
.lc-act { display: inline-flex; align-items: center; gap: .3rem; border: 0; background: none; padding: .25rem .5rem; border-radius: 8px; font-size: .83rem; font-weight: 600; color: var(--site-muted); }
button.lc-act:hover { background: var(--site-tint); color: var(--tenant-main-color); }
.lc-like.is-on, .lc-like.is-on:hover { color: #e0245e; }
.lc-likes { cursor: default; }
.lc-likes i { color: #e0245e; }
.lc-like:active i { transform: scale(1.25); }
.lc-like i { transition: transform .15s ease; }
.lc-confirm { display: inline-flex; align-items: center; gap: .1rem; margin-left: .35rem; font-size: .83rem; color: var(--site-ink); }
.lc-more-actions .dropdown-item { font-size: .9rem; }

.lc-flag { display: inline-flex; align-items: center; gap: .35rem; font-size: .75rem; font-weight: 600; margin-bottom: .2rem; }
.lc-flag--pin { color: var(--tenant-main-color); }
.lc-flag--hidden { color: #9a6700; }
.lc-item.is-pinned { background: var(--site-tint); padding: .75rem; margin: 0 -.75rem; }
.lc-item.is-hidden > .lc-avatar, .lc-item.is-hidden .lc-body { opacity: .55; }
.lc-item.is-hidden .lc-body { text-decoration: line-through; text-decoration-color: rgba(0, 0, 0, .25); }
.lc-deleted { padding: .4rem 0; font-size: .9rem; font-style: italic; color: var(--site-muted); }

.lc-replies { margin: .75rem 0 0 calc(var(--lc-avatar) / 2 - 1px); padding-left: calc(var(--lc-avatar) / 2 + .85rem - 1px); border-left: 2px solid var(--site-line); display: flex; flex-direction: column; gap: .9rem; }
.lc-replies.is-empty { display: none; }
.lc-item--reply { --lc-avatar: 32px; }
.lc-item--reply .lc-avatar { font-size: .75rem; }
.lc-reply-form, .lc-edit-form { margin-top: .25rem; }
.lc-edit-form { margin-top: .4rem; }
.lc-replying { font-size: .8rem; color: var(--site-muted); margin-bottom: .3rem; }
.lc-reply-form .lc-composer-foot .btn-link, .lc-edit-form .lc-composer-foot .btn-link { margin-left: auto; color: var(--site-muted); text-decoration: none; }
.lc-reply-form .lc-composer-foot .btn-primary, .lc-edit-form .lc-composer-foot .btn-primary { margin-left: 0; }
.lc-edit-form .lc-composer-foot .btn-link { margin-left: auto; }
.lc-more { margin-top: .75rem; border-radius: 2rem; padding-left: 1.2rem; padding-right: 1.2rem; }

@media (max-width: 575.98px) {
    .lesson-comments { --lc-avatar: 34px; }
    .lc-composer { padding: .75rem; gap: .6rem; }
    .lc-composer > .lc-avatar { display: none; }
    .lc-hint { display: none; }
}
#replies .lc-name { text-decoration: none; }
#replies a.lc-avatar { text-decoration: none; }
.lc-note { margin-top: .5rem; font-size: .88rem; color: #9a6700; }
.lc-report-form { display: flex; flex-direction: column; gap: 6px; max-width: 460px; margin-top: .5rem; padding: .75rem; border: 1px solid var(--site-line); border-radius: 10px; background: var(--site-tint); }