/* HC board skin. Uses the --hc-* tokens defined by layouts/hc. */
.hc-board { color: var(--hc-text); font-size: 14px; min-width: 0; }
.hc-board a { color: inherit; text-decoration: none; }
.hc-board a:hover { color: var(--hc-accent); }
.hc-board input[type="text"], .hc-board input[type="search"], .hc-board input[type="password"], .hc-board select, .hc-board textarea {
	height: 34px; padding: 0 8px; border: 1px solid var(--hc-border); border-radius: var(--hc-radius);
	background: var(--hc-surface); color: var(--hc-text); font: inherit; max-width: 100%;
}
.hc-board textarea { height: auto; padding: 8px; }
.hc-board input:focus, .hc-board select:focus, .hc-board textarea:focus { border-color: var(--hc-accent); outline: none; }

.hc-board__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.hc-board__title { margin: 0; font-size: 24px; font-weight: 800; line-height: 40px; letter-spacing: -0.02em; }
.hc-board__title a { color: var(--hc-accent) !important; }
.hc-board__text { margin: 8px 0; }

.hc-btn { display: inline-flex; align-items: center; justify-content: center; height: 32px; padding: 0 12px; border: 1px solid var(--hc-border); border-radius: var(--hc-radius); background: var(--hc-surface); color: var(--hc-text) !important; font: inherit; font-size: 13px; line-height: 1; white-space: nowrap; cursor: pointer; }
.hc-btn:hover { border-color: var(--hc-text-3); }
.hc-btn--primary { border-color: var(--hc-accent); background: var(--hc-accent); color: var(--hc-accent-contrast) !important; font-weight: 600; }
.hc-btn--danger { border-color: var(--hc-danger); color: var(--hc-danger) !important; }
.hc-badge { flex: none; display: inline-block; padding: 0 7px; border-radius: 4px; background: var(--hc-accent); color: var(--hc-accent-contrast); font-size: 11px; font-style: normal; font-weight: 700; line-height: 20px; }

/* Category tabs: plain text with an underline for the current one. */
.hc-cats { display: flex; gap: 2px; margin: 0 0 4px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.hc-cats::-webkit-scrollbar { display: none; }
.hc-cats__item { flex: none; height: 38px; padding: 0 12px; border-bottom: 2px solid transparent; color: var(--hc-text-3) !important; font-size: 14px; line-height: 36px; white-space: nowrap; }
.hc-cats__item:hover { color: var(--hc-text) !important; }
.hc-cats__item.is-active { border-bottom-color: var(--hc-accent); color: var(--hc-accent) !important; font-weight: 700; }

/* List: one flat row per post. Thumbnail (when present), title line, meta line. */
.hc-list { border-top: 1px solid var(--hc-border); }
.hc-list__rows { margin: 0; padding: 0; list-style: none; }
.hc-list__row { display: flex; align-items: center; gap: 10px; min-height: 61px; padding: 4px 6px; border-bottom: 1px solid var(--hc-border-soft); }
.hc-list__row:hover { background: var(--hc-surface-2); }
.hc-list__row.is-notice { min-height: 44px; background: var(--hc-surface-2); }
.hc-list__row.is-current { background: var(--hc-accent-soft); }
.hc-list__row.is-current .hc-list__title, .hc-list__row.is-current .hc-i--arrow { color: var(--hc-accent); }
.hc-list__thumb { flex: none; display: flex; align-items: center; justify-content: center; width: 60px; height: 52px; color: var(--hc-border) !important; font-size: 34px; }
.hc-list__thumb img { display: block; width: 60px; height: 52px; border-radius: 4px; object-fit: cover; background: var(--hc-surface-2); }
.hc-list__body { flex: 1 1 auto; min-width: 0; }
.hc-list__main { display: flex; align-items: center; gap: 6px; min-width: 0; }
.hc-list__cat { flex: none; color: var(--hc-text-3) !important; font-size: 12px; }
.hc-list__cat::after { content: "\00b7"; margin-left: 6px; color: var(--hc-border); }
.hc-list__title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--hc-text); font-size: 15px; line-height: 24px; }
.hc-list__title:visited { color: var(--hc-text-3); }
.hc-list__row.is-notice .hc-list__title { font-weight: 700; }
.hc-list__cmt { flex: none; color: var(--hc-accent) !important; font-size: 11px; }
.hc-list__meta { display: flex; align-items: center; gap: 12px; margin-top: 2px; min-width: 0; color: var(--hc-text-3); font-size: 11px; line-height: 18px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.hc-list__vote { color: var(--hc-accent); }
.hc-list__author { margin-left: auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; color: var(--hc-text); font-size: 13px; }
.hc-list__check { flex: none; }
.hc-list__empty { margin: 0; padding: 48px 12px; color: var(--hc-text-3); text-align: center; }
.hc-badge--notice { background: var(--hc-badge); color: #ffffff; }

.hc-listfoot { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: center; margin-top: 10px; }
.hc-pages { grid-column: 1 / -1; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px; padding: 8px 0; }
.hc-pages__group { display: inline-flex; flex-wrap: wrap; justify-content: center; border-radius: 20px; background: var(--hc-surface-2); }
.hc-pages a, .hc-pages strong { min-width: 36px; height: 36px; padding: 0 10px; border-radius: 18px; color: var(--hc-text-2); font-size: 14px; font-weight: 400; line-height: 36px; text-align: center; }
.hc-pages a:hover { background: var(--hc-border-soft); }
.hc-pages .hc-pages__cur { background: var(--hc-ink); color: var(--hc-ink-text); }
.hc-pages__edge { color: var(--hc-text-3) !important; font-size: 13px !important; }
.hc-bsearch { display: flex; gap: 4px; min-width: 0; }
.hc-bsearch input[type="search"] { flex: 0 1 220px; min-width: 0; }
.hc-listfoot__btns { display: flex; gap: 4px; justify-content: flex-end; }

/* Read */
/* Reading column (D-062): while a post is open or being written, the whole board (title bar, post,
   comments, write form and the list under the post) sits in one centred column of --hc-read-width,
   so that every edge lines up. A board that only shows its list keeps the full width. */
.hc-board:has(> .hc-read), .hc-board:has(> .hc-write), .hc-board:has(> .hc-cmt) { max-width: var(--hc-read-width); margin-left: auto; margin-right: auto; }
/* Browsers without :has() narrow at least the post, the comments and the form. */
.hc-read, .hc-cmt, .hc-write { max-width: var(--hc-read-width); margin-left: auto; margin-right: auto; }
.hc-read { margin-bottom: 28px; }
.hc-read__head { margin-bottom: 8px; }
.hc-read__title { margin: 14px 0 12px; font-size: 22px; font-weight: 800; line-height: 1.35; letter-spacing: -0.02em; overflow-wrap: anywhere; }
.hc-read__cat { margin-right: 6px; color: var(--hc-text-3) !important; font-size: 14px; font-weight: 400; letter-spacing: 0; }
.hc-read__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 14px; min-height: 40px; padding: 6px 10px; border-top: 2px solid var(--hc-ink); background: var(--hc-surface-2); color: var(--hc-text-3); font-size: 13px; }
.hc-read__author { color: var(--hc-text); font-size: 14px; }
.hc-read__more { margin-left: auto; padding: 4px; color: var(--hc-text-3) !important; font-size: 18px; line-height: 1; }
.hc-read__link { display: flex; align-items: center; gap: 6px; margin: 8px 2px 0; color: var(--hc-text-3); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hc-read__link a { color: var(--hc-text-3) !important; overflow: hidden; text-overflow: ellipsis; }
.hc-read__extra { padding: 10px 2px; border-bottom: 1px solid var(--hc-border-soft); }
.hc-read__extra dl { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; margin: 0; }
.hc-read__extra dt { color: var(--hc-text-3); }
.hc-read__extra dd { margin: 0; overflow-wrap: anywhere; }
.hc-read__body { padding: 28px 0 32px; font-size: 15px; line-height: 1.7; overflow-wrap: anywhere; }
.hc-read__body .rhymix_content, .hc-read__body .xe_content { color: var(--hc-text); font-size: 15px; line-height: 1.7; }
.hc-read__body img { max-width: 100%; height: auto !important; cursor: zoom-in; }
.hc-read__body iframe, .hc-read__body video { max-width: 100%; }
/* A tall (phone) video stays inside the screen. */
.hc-read__body video { height: auto; max-height: 80vh; }
.hc-read__body iframe[src*="youtube"], .hc-read__body iframe[src*="youtu.be"], .hc-read__body iframe[src*="streamable.com"] { width: 100%; max-width: 720px; height: auto; aspect-ratio: 16 / 9; }
/* An upright video (a Short) is marked by its numbers: 360 wide, 640 high. */
.hc-read__body iframe[src*="youtube"][width="360"][height="640"] { max-width: 360px; aspect-ratio: 9 / 16; }
.hc-read__body a { color: var(--hc-accent); text-decoration: underline; }
.hc-tweet { max-width: 550px; margin: 12px 0; }
.hc-insta { max-width: 400px; margin: 12px 0; }
.hc-insta .instagram-media { margin: 0 !important; min-width: 0 !important; width: 100% !important; }
.hc-tweet:empty { display: none; }
.hc-fold { position: relative; max-height: 900px; overflow: hidden; }
.hc-fold::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 120px; background: linear-gradient(to bottom, transparent, var(--hc-surface)); pointer-events: none; }
.hc-fold.is-open { max-height: none; }
.hc-fold.is-open::after { display: none; }
.hc-fold__btn { display: block; width: 100%; margin: 4px 0 12px; }
.hc-read__tags { display: flex; flex-wrap: wrap; gap: 4px 10px; margin: 0 0 16px; color: var(--hc-text-3); font-size: 13px; }

/* Pill buttons: votes and comment submit. */
.hc-pill { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 36px; padding: 0 18px; border: 0; border-radius: 18px; background: var(--hc-ink); color: var(--hc-ink-text) !important; font: inherit; font-size: 14px; white-space: nowrap; cursor: pointer; }
.hc-pill:hover { filter: brightness(1.25); }
.hc-pill b { font-variant-numeric: tabular-nums; }
.hc-pill--up b { color: #9be28f; }
.hc-pill--down b { color: #ff9d8a; }
.hc-pill--accent { background: var(--hc-accent); color: var(--hc-accent-contrast) !important; font-weight: 700; }
.hc-pill--ghost { background: transparent; box-shadow: inset 0 0 0 1px var(--hc-border); color: var(--hc-text-2) !important; }
.hc-pill.is-on { box-shadow: 0 0 0 2px var(--hc-accent-strong); }
.hc-read__votes { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; padding: 4px 0 20px; }
/* Post votes are quiet outlined pills; only a vote you have cast is tinted. */
.hc-read__votes .hc-pill { height: 38px; background: var(--hc-surface); box-shadow: inset 0 0 0 1px var(--hc-border); color: var(--hc-text-2) !important; }
.hc-read__votes .hc-pill:hover { filter: none; box-shadow: inset 0 0 0 1px var(--hc-text-3); }
.hc-read__votes .hc-pill--up b { color: var(--hc-accent); }
.hc-read__votes .hc-pill--down b { color: var(--hc-text-3); }
.hc-read__votes .hc-pill.is-on { background: var(--hc-accent-soft); box-shadow: inset 0 0 0 1px var(--hc-accent); color: var(--hc-accent) !important; font-weight: 700; }
.hc-read__votes .hc-pill.is-on b { color: var(--hc-accent); }

.hc-read__files { margin: 0 0 12px; color: var(--hc-text-3); font-size: 13px; text-align: right; }
.hc-read__files summary { display: inline-flex; align-items: center; gap: 4px; cursor: pointer; list-style: none; }
.hc-read__files summary::-webkit-details-marker { display: none; }
.hc-read__files ul { margin: 6px 0 0; padding: 8px 10px; border: 1px solid var(--hc-border-soft); border-radius: var(--hc-radius); list-style: none; text-align: left; }
.hc-read__files span { color: var(--hc-text-3); font-size: 12px; }

.hc-read__foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 6px; padding: 6px 0 10px; border-bottom: 1px solid var(--hc-border); }
.hc-read__nav, .hc-read__owner { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; }
.hc-tool { display: inline-flex; align-items: center; gap: 4px; height: 34px; padding: 0 8px; border: 0; border-radius: var(--hc-radius); background: transparent; color: var(--hc-text-3) !important; font: inherit; font-size: 13px; cursor: pointer; }
.hc-tool:hover { background: var(--hc-surface-2); color: var(--hc-text) !important; }
.hc-tool .hc-i { font-size: 20px; }

/* Comments: a tinted name bar, the text, then right-aligned actions. */
.hc-cmt { margin-bottom: 40px; }
/* Folded comments: everything under the heading and the button stays away until opened. */
.hc-cmt[data-hc-fold]:not(.is-open) > :not(.hc-cmt__title):not(.hc-cmt__toggle) { display: none; }
.hc-cmt[data-hc-fold] > .hc-cmt__title { display: inline-flex; margin-right: 10px; vertical-align: middle; }
.hc-cmt__toggle { vertical-align: middle; margin-bottom: 12px; }
.hc-cmt__title { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; font-size: 20px; font-weight: 400; }
.hc-cmt__list { margin: 0; padding: 0; list-style: none; }
.hc-cmt__item { margin-left: calc(var(--hc-depth, 0) * 24px); padding-bottom: 4px; }
.hc-cmt__bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 32px; padding: 4px 10px; border-radius: var(--hc-radius); background: var(--hc-bar); }
.hc-cmt__author { display: flex; align-items: center; gap: 6px; min-width: 0; color: var(--hc-text); font-size: 13px; }
.hc-cmt__op { padding: 0 6px; border-radius: 3px; background: var(--hc-accent); color: var(--hc-accent-contrast); font-size: 11px; font-style: normal; line-height: 18px; }
.hc-cmt__bar time { flex: none; color: var(--hc-text-3); font-size: 12px; }
.hc-cmt__body { padding: 8px 10px 2px; font-size: 14px; line-height: 1.6; overflow-wrap: anywhere; }
.hc-cmt__body .rhymix_content, .hc-cmt__body .xe_content { color: var(--hc-text); font-size: 14px; }
.hc-cmt__body p { margin: 0; }
.hc-cmt__body img { max-width: 100%; height: auto !important; }
.hc-cmt__body.is-deleted { color: var(--hc-text-3); }
.hc-cmt__files { padding: 0 10px; font-size: 12px; }
.hc-cmt__files ul { margin: 0; padding: 0; list-style: none; }
.hc-cmt__actions { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 2px 12px; margin: 0; padding: 0 4px; color: var(--hc-text-3); font-size: 13px; }
.hc-cmt__actions a { display: inline-flex; align-items: center; gap: 4px; min-height: 28px; color: var(--hc-text-3); }
.hc-cmt__actions a .hc-i { font-size: 16px; }
.hc-cmt__actions a.is-on { color: var(--hc-accent); font-weight: 700; }
.hc-cmt__sep { width: 0; height: 16px; border-left: 1px dotted var(--hc-text-3); }
.hc-cmt__login { margin: 0; padding: 14px; color: var(--hc-text-3); text-align: center; }
.hc-cmt__login a { color: var(--hc-accent); font-weight: 700; }
.hc-cmtform { margin-top: 12px; }
.hc-cmtform__editor { border: 1px solid var(--hc-border); border-radius: var(--hc-radius); background: var(--hc-surface); }
.hc-cmtform__editor .rx_simpleeditor { min-height: 64px; padding: 10px 12px; border: 0 !important; border-radius: 0; box-shadow: none !important; background: transparent !important; color: var(--hc-text) !important; outline: none; }
.hc-cmtform__editor .rx_simpleeditor_wrapper { margin: 0; }
/* Comments take text and site emoticons only; the file box is hidden (server-side limits come in Stage 2). */
.hc-cmtform__editor .xefu-container { display: none !important; }
.hc-cmtform__editor:focus-within { border-color: var(--hc-accent); }
.hc-cmtform__foot { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 8px; margin-top: 10px; }
.hc-cmtform__guest { display: flex; gap: 4px; margin-right: auto; }
.hc-quote { margin-bottom: 10px; padding: 10px 14px; border-left: 3px solid var(--hc-accent); border-radius: var(--hc-radius); background: var(--hc-surface-2); overflow-wrap: anywhere; }

/* Floating shortcuts on the read page. */
.hc-float { position: fixed; right: max(12px, calc((100vw - var(--hc-width)) / 2 - 64px)); bottom: calc(24px + var(--hc-tabbar-h, 0px)); z-index: 40; display: flex; flex-direction: column; gap: 4px; }
.hc-float a { display: flex; align-items: center; justify-content: center; width: 40px; height: 36px; border-radius: var(--hc-radius); background: var(--hc-surface); color: var(--hc-text-3) !important; font-size: 20px; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12); }
.hc-float a:hover { color: var(--hc-text) !important; }

/* Write */
.hc-write { padding: 12px 0; border-top: 1px solid var(--hc-text); }
.hc-write__head { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.hc-write__title { flex: 1 1 240px; min-width: 0; }
.hc-write__extra { margin-bottom: 8px; }
.hc-write__field { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 8px; align-items: center; padding: 4px 0; }
.hc-write__field em { color: var(--hc-danger); font-style: normal; }
.hc-write__editor { min-width: 0; }
.hc-write__foot { display: grid; gap: 8px; margin-top: 10px; }
.hc-write__opts { display: flex; flex-wrap: wrap; gap: 4px 14px; color: var(--hc-text-2); font-size: 13px; }
.hc-write__guest { display: flex; gap: 4px; }
.hc-write__tags { width: 100%; }
.hc-write__btns { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px; }

/* Attachment box under the post editor (Rhymix upload widget) in the site's colors. */
.hc-write .xefu-container { margin-top: 8px; border: 1px solid var(--hc-border); border-radius: var(--hc-radius); background: var(--hc-surface); color: var(--hc-text); }
.hc-write .xefu-dropzone { padding: 10px 12px; border: 0; border-bottom: 1px solid var(--hc-border-soft); background: var(--hc-surface-2); color: var(--hc-text-2); font-size: 13px; }
.hc-write .xefu-btn, .hc-write .xefu-container button, .hc-write .xefu-container .btn { display: inline-flex; align-items: center; height: 32px; padding: 0 12px; border: 1px solid var(--hc-border); border-radius: 16px; background: var(--hc-surface); background-image: none; box-shadow: none; text-shadow: none; color: var(--hc-text) !important; font-size: 13px; cursor: pointer; }
.hc-write .xefu-container p, .hc-write .xefu-container span, .hc-write .xefu-container li { color: var(--hc-text-2); font-size: 13px; }

/* Message boxes */
.hc-msgbox { padding: 28px 16px; background: var(--hc-surface); border: 1px solid var(--hc-border); border-radius: var(--hc-radius); text-align: center; }
.hc-msgbox h2 { margin: 0 0 14px; font-size: 16px; font-weight: 600; }
.hc-msgbox__target { margin: 0 0 8px; color: var(--hc-text-3); overflow-wrap: anywhere; }
.hc-msgbox__btns { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px; }
.hc-tags { display: flex; flex-wrap: wrap; gap: 6px 12px; margin-bottom: 12px; padding: 14px; background: var(--hc-surface); border: 1px solid var(--hc-border); border-radius: var(--hc-radius); }
.hc-tags span { color: var(--hc-text-3); font-size: 12px; }
.hc-toast { position: fixed; left: 50%; bottom: calc(24px + var(--hc-tabbar-h, 0px)); max-width: calc(100vw - 24px); z-index: 100; transform: translateX(-50%); padding: 8px 14px; border-radius: var(--hc-radius); background: var(--hc-text); color: var(--hc-surface); font-size: 13px; }

/* Stage 2: member badges, best comments, folded and blocked comments, emoticons. */
.hc-userbadge { flex: none; display: inline-block; padding: 0 6px; border: 1px solid var(--hc-border); border-radius: 9px; background: var(--hc-surface); color: var(--hc-text-2); font-size: 11px; font-style: normal; font-weight: 400; line-height: 16px; white-space: nowrap; vertical-align: 1px; }
img.hc-userbadge--img { width: auto; max-height: 18px; padding: 0; border: 0; border-radius: 0; background: none; vertical-align: middle; }
.hc-linkbtn { display: inline; padding: 0; border: 0; background: none; color: var(--hc-accent); font: inherit; font-weight: 600; text-decoration: underline; cursor: pointer; }

.hc-best { margin: 0 0 14px; padding: 10px 12px 6px; border: 1px solid var(--hc-border-soft); border-radius: var(--hc-radius); background: var(--hc-surface-2); }
.hc-best__title { margin: 0 0 6px; color: var(--hc-accent); font-size: 14px; font-weight: 700; }
.hc-best__mark { padding: 0 5px; border-radius: 3px; background: var(--hc-accent-soft); color: var(--hc-accent); font-size: 10px; font-style: normal; font-weight: 800; line-height: 16px; letter-spacing: 0.04em; }
.hc-best .hc-cmt__item { margin-left: 0; }
.hc-best .hc-cmt__item + .hc-cmt__item { border-top: 1px dashed var(--hc-border); }
.hc-best .hc-cmt__bar { min-height: 28px; padding-left: 0; padding-right: 0; background: transparent; }
.hc-best .hc-cmt__body { padding-left: 0; padding-right: 0; }
.hc-best__votes { display: inline-flex; align-items: center; gap: 4px; color: var(--hc-accent); font-weight: 700; }
.hc-best__votes .hc-i { font-size: 16px; }

.hc-cmt__fold { padding: 8px 10px 2px; }
.hc-cmt__fold > summary { color: var(--hc-text-3); list-style: none; cursor: pointer; }
.hc-cmt__fold > summary::-webkit-details-marker { display: none; }
.hc-cmt__fold[open] > summary .hc-linkbtn { display: none; }
.hc-cmt__fold .hc-cmt__body, .hc-cmt__fold .hc-cmt__files { padding-left: 0; padding-right: 0; }
.hc-cmt__item.is-target > .hc-cmt__bar { box-shadow: inset 0 0 0 2px var(--hc-accent-strong); }

.hc-emo { position: relative; margin-right: auto; }
.hc-emo__btn { gap: 4px; }
.hc-emo__btn .hc-i { font-size: 16px; }
.hc-emo__panel { position: absolute; left: 0; top: calc(100% + 6px); z-index: 30; display: grid; grid-template-columns: repeat(8, 36px); gap: 2px; width: max-content; max-width: calc(100vw - 32px); max-height: 232px; padding: 8px; overflow-y: auto; border: 1px solid var(--hc-border); border-radius: 8px; background: var(--hc-surface); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18); }
.hc-emo__panel[hidden] { display: none; }
.hc-emo__item { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 6px; background: transparent; cursor: pointer; }
.hc-emo__item:hover, .hc-emo__item:focus-visible { background: var(--hc-bar); }
.hc-emo__item img { width: 26px; height: 26px; }
.hc-emo__empty { grid-column: 1 / -1; margin: 0; color: var(--hc-text-3); }
.hc-cmt__body img[src*="/emoticon/tpl/images/"], .hc-quote img[src*="/emoticon/tpl/images/"], .hc-cmtform__editor .rx_simpleeditor img[src*="/emoticon/tpl/images/"] { width: 26px; height: 26px !important; margin: 0 1px; vertical-align: -6px; pointer-events: none; }

/* Stage 3: hot deals. */
.hc-badge--ended { background: var(--hc-badge); color: #ffffff; }
.hc-badge--live { background: var(--hc-accent-soft); color: var(--hc-accent); }
.hc-list__row.is-deal { min-height: 76px; }
.hc-list__row.is-deal .hc-list__thumb, .hc-list__row.is-deal .hc-list__thumb img { width: 64px; height: 64px; }
.hc-list__deal { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; margin-top: 1px; color: var(--hc-text-3); font-size: 13px; }
.hc-list__deal b { color: var(--hc-text); font-weight: 600; }
.hc-list__deal b.hc-list__price { color: var(--hc-accent); font-weight: 700; }
.hc-list__row.is-ended .hc-list__title { color: var(--hc-text-3); text-decoration: line-through; }
.hc-list__row.is-ended .hc-list__deal b, .hc-list__row.is-ended .hc-list__deal b.hc-list__price { color: var(--hc-text-3); }
.hc-list__row.is-ended .hc-list__thumb img { opacity: 0.55; filter: grayscale(1); }

/* Deal post: an information table above the body (link, shop, price, shipping, ...). */
.hc-read__shop, .hc-read__price { color: var(--hc-text-2); font-weight: 400; }
.hc-deal { margin: 0 0 20px; }
.hc-deal__info { display: grid; grid-template-columns: 88px minmax(0, 1fr); margin: 0; border-top: 1px solid var(--hc-border); font-size: 14px; }
.hc-deal__info dt { padding: 9px 10px; border-bottom: 1px solid var(--hc-border-soft); background: var(--hc-surface-2); color: var(--hc-text-2); font-weight: 700; }
.hc-deal__info dd { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; min-width: 0; margin: 0; padding: 9px 12px; border-bottom: 1px solid var(--hc-border-soft); overflow-wrap: anywhere; }
.hc-deal__url { min-width: 0; color: var(--hc-accent) !important; overflow-wrap: anywhere; }
.hc-deal__url:hover { text-decoration: underline; }
.hc-deal__price { color: var(--hc-accent); font-size: 16px; font-weight: 800; }
.hc-deal__btns { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; }
.hc-deal__reports, .hc-deal__reported { color: var(--hc-text-3); font-size: 13px; }
.hc-deal__aff { padding: 0 6px; border: 1px solid var(--hc-border); border-radius: 3px; color: var(--hc-text-3); font-size: 11px; font-style: normal; line-height: 18px; white-space: nowrap; }
.hc-list__row.is-popular { min-height: 40px; background: var(--hc-accent-soft); }
.hc-list__row.is-popular .hc-list__title { font-weight: 600; }
.hc-list__popvote { margin-left: auto; color: var(--hc-accent); font-weight: 700; }
.hc-notice-box { margin: 0 0 10px; padding: 10px 12px; border: 1px solid var(--hc-danger); border-radius: var(--hc-radius); color: var(--hc-danger); font-size: 14px; }
.hc-similar { margin: 24px 0 8px; border-top: 1px solid var(--hc-border); }
.hc-similar__title { margin: 0; padding: 8px 10px; background: var(--hc-surface-2); font-size: 14px; font-weight: 700; }
.hc-similar__title span { margin-left: 8px; color: var(--hc-text-3); font-size: 12px; font-weight: 400; }
.hc-similar ul { margin: 0; padding: 0; list-style: none; }
.hc-similar li { padding: 8px 10px; border-bottom: 1px solid var(--hc-border-soft); }
.hc-similar li > a { font-weight: 600; overflow-wrap: anywhere; }
.hc-similar li > p { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 12px; margin: 2px 0 0; color: var(--hc-text-3); font-size: 13px; }
.hc-similar li > p b { color: var(--hc-accent); }
.hc-similar__good { color: var(--hc-accent); font-weight: 700; }
.hc-similar__bad { color: var(--hc-text-2); }
.hc-deal.is-ended .hc-deal__price { color: var(--hc-text-3); text-decoration: line-through; }
.hc-deal.is-ended .hc-pill--accent { background: var(--hc-ink); color: var(--hc-ink-text) !important; }

.hc-dealform { padding: 10px 12px; border: 1px solid var(--hc-border-soft); border-radius: var(--hc-radius); background: var(--hc-surface-2); }
.hc-dealform__note { margin: 0 0 6px; color: var(--hc-text-3); font-size: 13px; }
.hc-dealform__note em { color: var(--hc-danger); font-style: normal; }
.hc-dealform input[type="text"], .hc-dealform input[type="url"], .hc-dealform input[type="datetime-local"] { width: 260px; max-width: 100%; height: 34px; padding: 0 8px; border: 1px solid var(--hc-border); border-radius: var(--hc-radius); background: var(--hc-surface); color: var(--hc-text); font: inherit; }
.hc-dealform input.hc-dealform__wide { width: 100%; }
.hc-dealform__ship { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; }
.hc-dealform__choice { display: inline-flex; align-items: center; gap: 5px; min-height: 34px; color: var(--hc-text); cursor: pointer; }
.hc-dealform__ship input[type="text"][hidden] { display: none; }
.hc-dealform__hint { display: block; margin-top: 3px; color: var(--hc-text-3); font-size: 12px; }

/* Narrow screens: two-line rows, no number column. */
@media (max-width: 767px) {
	.hc-listfoot { grid-template-columns: 1fr; }
	.hc-listfoot__btns { justify-content: flex-start; flex-wrap: wrap; }
	.hc-read__title { font-size: 19px; }
	.hc-cmt__item { margin-left: calc(var(--hc-depth, 0) * 14px); }
	.hc-float { right: 8px; bottom: calc(12px + var(--hc-tabbar-h, 0px)); opacity: 0.92; }
	.hc-float a:not(:first-child) { display: none; }
	.hc-board__title { font-size: 20px; }
	.hc-write__field { grid-template-columns: 1fr; gap: 2px; }
}

/* Icons: CSS masks, so they take the current text color. */
.hc-i { display: inline-block; width: 1em; height: 1em; flex: none; background: currentColor; -webkit-mask: var(--hc-icon) center / contain no-repeat; mask: var(--hc-icon) center / contain no-repeat; vertical-align: -0.125em; }
.hc-i--up, .hc-i--down { --hc-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2 21h4V9H2v12zM22 10a2 2 0 0 0-2-2h-6.3l1-4.6V3a1.5 1.5 0 0 0-.5-1L13 1 6.6 7.6A2 2 0 0 0 6 9v10a2 2 0 0 0 2 2h9a2 2 0 0 0 1.8-1.2l3-7c.1-.3.2-.5.2-.8v-2zm-2 2-3 7H8V9l4.3-4.3L11.2 10H20v2z'/%3E%3C/svg%3E"); }
.hc-i--clock { --hc-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm0 18a8 8 0 1 1 0-16 8 8 0 0 1 0 16zm.5-13H11v6l5.2 3.2.8-1.3-4.5-2.7V7z'/%3E%3C/svg%3E"); }
.hc-i--more { --hc-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='5' cy='12' r='2'/%3E%3Ccircle cx='12' cy='12' r='2'/%3E%3Ccircle cx='19' cy='12' r='2'/%3E%3C/svg%3E"); }
.hc-i--share { --hc-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M18 16a3 3 0 0 0-2.2 1L8.9 13a3 3 0 0 0 0-2l6.9-4a3 3 0 1 0-.9-1.7L8 9.3a3 3 0 1 0 0 5.4l6.9 4A3 3 0 1 0 18 16z'/%3E%3C/svg%3E"); }
.hc-i--bookmark { --hc-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17 3H7a2 2 0 0 0-2 2v16l7-3 7 3V5a2 2 0 0 0-2-2zm0 15-5-2.2L7 18V5h10v13z'/%3E%3C/svg%3E"); }
.hc-i--list { --hc-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 5h18v14H3V5zm2 2v2h2V7H5zm4 0v2h10V7H9zm-4 4v2h2v-2H5zm4 0v2h10v-2H9zm-4 4v2h2v-2H5zm4 0v2h10v-2H9z'/%3E%3C/svg%3E"); }
.hc-i--comment { --hc-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 4h16a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-8l-5 4v-4H4a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2z'/%3E%3C/svg%3E"); }
.hc-i--smile { --hc-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm0 18a8 8 0 1 1 0-16 8 8 0 0 1 0 16zM8.5 11a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3zm7 0a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3zM12 17.5c2.3 0 4.3-1.5 5.1-3.5H6.9c.8 2 2.8 3.5 5.1 3.5z'/%3E%3C/svg%3E"); }
.hc-i--top { --hc-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 7.5 4.5 15l1.9 1.9L12 11.3l5.6 5.6 1.9-1.9z'/%3E%3C/svg%3E"); }
.hc-i--doc { --hc-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8l-6-6zm-1 7V3.5L18.5 9H13zM8 13h8v1.6H8V13zm0 3.2h8v1.6H8v-1.6z'/%3E%3C/svg%3E"); }
.hc-i--link { --hc-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10.6 13.4a4 4 0 0 0 5.7 0l3.5-3.5a4 4 0 0 0-5.7-5.7l-1.2 1.2 1.4 1.4 1.2-1.2a2 2 0 0 1 2.9 2.9l-3.5 3.5a2 2 0 0 1-2.9 0l-1.4 1.4zm2.8-2.8a4 4 0 0 0-5.7 0l-3.5 3.5a4 4 0 0 0 5.7 5.7l1.2-1.2-1.4-1.4-1.2 1.2a2 2 0 0 1-2.9-2.9l3.5-3.5a2 2 0 0 1 2.9 0l1.4-1.4z'/%3E%3C/svg%3E"); }
.hc-i--clip { --hc-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M16.5 6v11.5a4 4 0 0 1-8 0V5a2.5 2.5 0 0 1 5 0v10.5a1 1 0 0 1-2 0V6H10v9.5a2.5 2.5 0 0 0 5 0V5a4 4 0 0 0-8 0v12.5a5.5 5.5 0 0 0 11 0V6h-1.5z'/%3E%3C/svg%3E"); }
.hc-i--arrow { --hc-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M13.3 5.3 12 6.7l4.3 4.3H4v2h12.3L12 17.3l1.3 1.4L20 12z'/%3E%3C/svg%3E"); }
.hc-i--down { transform: rotate(180deg); }