/* JRNL Helpdesk — public site styles (written for this project). */

:root {
  --hd-accent: #1972f5;
  --hd-ink: #1c293b;
  --hd-ink-soft: #37516c;
  --hd-line: #e5e9ef;
  --hd-chip: #dfe5eb;
  --hd-paper: #fff;
  --hd-page: #f3f6fb;
  --hd-badge: #476da5;
  --hd-quote: #a8bacd;
}

/* ---------- Base ---------- */
body { margin: 0; background: var(--hd-paper) !important; color: var(--hd-ink); font: 16px/1 "KB Sans Regular", sans-serif; }
.hd-site, .hd-site * { margin: 0; padding: 0; font-weight: 400; }
.hd-site { line-height: 1; }
:where(.hd-site) :where(ul, ol) { list-style: none; }
:where(.hd-site) :where(a) { color: inherit; text-decoration: none; cursor: pointer; }
.hd-site header, .hd-site nav, .hd-site footer, .hd-site article, .hd-site aside, .hd-site section { display: block; }
.hd-site :is(a, button, input, textarea):focus-visible { outline: 2px solid var(--hd-accent); outline-offset: 3px; }
.hd-site :is(a, button, input, textarea):focus:not(:focus-visible) { outline: none; }
.hd-site ::selection { background: rgba(25, 114, 245, .2); }
.hd-site textarea { font-family: inherit; color: var(--hd-ink); letter-spacing: .25px; text-align: left; outline: none; }

/* ---------- Typography helpers ---------- */
.hd-font-sans-light { font-family: "KB Sans Light", sans-serif; font-weight: 100 !important; }
.hd-font-sans-regular { font-family: "KB Sans Regular", sans-serif; }
.hd-font-sans-medium { font-family: "KB Sans Medium", sans-serif; font-weight: 700 !important; }
.hd-font-sans-semibold { font-family: "KB Sans Semibold", sans-serif; font-weight: 800 !important; }
.hd-font-sans-bold { font-family: "KB Sans Bold", sans-serif; font-weight: 900 !important; }
.hd-text-wrap { hyphens: auto; overflow-wrap: break-word; }
.hd-text-ellipsis-multiline { display: -webkit-box; overflow: hidden; text-overflow: ellipsis; }
.hd-text-ellipsis-multiline-lines-2 { -webkit-line-clamp: 2; }
.hd-clear { display: block !important; clear: both !important; }

/* ---------- Layout ---------- */
.hd-wrapper { display: block; width: 940px; max-width: 940px; margin: 0 auto; }
.hd-wrapper-large { width: 1200px; max-width: 1200px; }
.hd-wrapper-full, .hd-wrapper-full.hd-wrapper-large { width: 100%; max-width: 100%; }
@media (max-width: 1240px) { .hd-wrapper-large:not(.hd-wrapper-full) { width: 940px; max-width: 940px; } }
@media (max-width: 980px) { .hd-wrapper:not(.hd-wrapper-full) { width: calc(100% - 40px); max-width: calc(100% - 40px); } }
@media (max-width: 480px) { .hd-wrapper:not(.hd-wrapper-full) { width: calc(100% - 18px); max-width: calc(100% - 18px); } }

#body { padding: 56px 0 114px; }
#body.hd-body-full { padding: 0; }
@media (max-width: 780px) { #body:not(.hd-body-full) { padding: 36px 0 80px; } }

.hd-theme-background-color-default { background-color: var(--hd-accent); }
.hd-theme-background-color-light { background-color: var(--hd-page); }

/* ---------- Icons (masks so they take the text colour) ---------- */
.hd-site {
  --i-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='2 2 20 20'%3E%3Cpath d='M10 2a8 8 0 0 1 6.32 12.9l5.39 5.4-1.41 1.41-5.4-5.39A8 8 0 1 1 10 2zm0 2.6a5.4 5.4 0 1 0 0 10.8 5.4 5.4 0 0 0 0-10.8z'/%3E%3C/svg%3E");
  --i-chat: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 3h18a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1h-9.5L6 21.5V17H3a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1z'/%3E%3C/svg%3E");
  --i-mail: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2 5h17v5.2l-2 2V8.2l-6.5 4.6L4 8.2V17h7l-.6 2H2zm2.9 2 5.6 4 5.6-4zM20.6 11.6l1.8 1.8-7 7H13.6v-1.8z'/%3E%3C/svg%3E");
  --i-book: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 17'%3E%3Cpath d='M1 1h5a3 3 0 0 1 3 3v11.5H1zm18 0h-5a3 3 0 0 0-3 3v11.5h8z'/%3E%3C/svg%3E");
}
.hd-mask { display: inline-block; background-color: currentColor; -webkit-mask: var(--m) center / contain no-repeat; mask: var(--m) center / contain no-repeat; }

/* ---------- Buttons ---------- */
.hd-button {
  display: inline-block; box-sizing: border-box; height: 44px; padding: 0 25px;
  border: 1px solid rgba(0, 0, 0, .1); border-radius: 8px; overflow: hidden; cursor: pointer;
  font-size: 13.05px; line-height: 41px; letter-spacing: .15px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .08);
  transition: border-color .15s linear, box-shadow .15s linear, transform .15s linear;
}
.hd-button:hover { border-color: rgba(0, 0, 0, .25); }
.hd-button:active { transform: translateY(1px); box-shadow: 0 1px 2px rgba(0, 0, 0, .125); }
.hd-button-small { height: 36px; padding: 0 18px; line-height: 33px; }
.hd-button-accent { background-color: var(--hd-accent); color: #fff; }
.hd-button-grey { background-color: var(--hd-chip); color: var(--hd-ink); }
.hd-button-has-left-icon { padding-left: 20px; }
.hd-button-has-left-icon::before {
  content: ""; display: inline-block; width: 20px; height: 20px; margin: -2px 16px 0 0; vertical-align: middle;
  background-color: currentColor; -webkit-mask: var(--m) center / contain no-repeat; mask: var(--m) center / contain no-repeat;
}
.hd-button-icon-chat { --m: var(--i-chat); }
.hd-button-icon-email { --m: var(--i-mail); }
@media (max-width: 480px) {
  .hd-button { padding: 0 21px; }
  .hd-button-has-left-icon { padding: 0 17px 0 16px; }
}

/* ---------- Cards, badges, misc ---------- */
.hd-box { display: inline-block; background: var(--hd-paper); border-radius: 5px; box-shadow: 0 2px 4px rgba(0, 0, 0, .04); }
.hd-box-link { color: var(--hd-ink-soft); transition: box-shadow .15s linear, transform .15s linear; }
.hd-box-link:hover { box-shadow: 0 2px 8px rgba(0, 0, 0, .065); }
.hd-box-link:active { transform: translateY(1px); box-shadow: 0 1px 2px rgba(0, 0, 0, .065); }

.hd-category-badge {
  display: inline-block; height: 32px; max-width: 160px; padding: 0 14px; border-radius: 2px;
  background-color: var(--hd-badge); color: #fff; font-size: 14.4px; line-height: 31px; letter-spacing: .25px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.hd-category-badge[data-has-category="false"] { background-color: #506d8c; }

.hd-popularity { display: inline-block; }
.hd-popularity-bar { display: inline-block; width: 8px; height: 8px; margin: 0 1px 0 2px; border-radius: 8px; line-height: 0; }
.hd-popularity-bar:not(.hd-theme-background-color-default) { background-color: var(--hd-chip); }
.hd-popularity-bar:first-of-type { margin-left: 0; }
.hd-popularity-bar:last-of-type { margin-right: 0; }

/* Side menus */
.hd-aside { padding: 10px 20px 16px 0; }
.hd-aside-title { padding: 0 1px; font-size: 14.85px; }
.hd-aside ul { margin-top: 18px; }
.hd-aside li a { display: block; margin: 2px 0; padding: 8px 18px; border-radius: 5px; color: var(--hd-ink); font-size: 13.5px; line-height: 18px; }
.hd-aside li:first-child a { margin-top: 0; }
.hd-aside li a:hover { background-color: #e8ecf1; }
.hd-aside li a:active { background-color: #e5eaef; }
.hd-aside li a[data-active="true"] { background-color: var(--hd-chip); }
.hd-aside li a.hd-aside-single-line { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hd-aside li a.hd-aside-spaced { margin: 0; padding: 9px 0; background: none; }
.hd-aside li a.hd-aside-spaced:hover { text-decoration: underline; }

/* ---------- Header ---------- */
.hd-site header { position: relative; padding: 18px 0 30px; }
.hd-site header::after { content: ""; position: absolute; top: 100%; left: 0; right: 0; height: 5px; background: linear-gradient(to top, transparent, rgba(0, 0, 0, .08)); }
.hd-site header > .hd-wrapper { position: relative; z-index: 1; }

.hd-header-main { position: relative; z-index: 20; min-height: 38px; margin-bottom: 26px; }
.hd-header-main-logo { float: left; }
.hd-header-main-logo img { display: block; height: 28px; margin-top: 5px; }
.hd-header-main-actions { float: right; }
.hd-header-main-actions-website {
  display: inline-block; height: 38px; padding: 0 22px; border-radius: 6px; vertical-align: middle;
  background: rgba(255, 255, 255, .2); color: #fff; font-size: 13.5px; line-height: 37px; letter-spacing: .25px;
  transition: background .1s linear, box-shadow .1s linear, transform .1s linear;
}
.hd-header-main-actions-website:hover { background: rgba(255, 255, 255, .25); box-shadow: 0 2px 8px rgba(0, 0, 0, .025); }
.hd-header-main-actions-website:active { transform: translateY(1px); box-shadow: 0 1px 4px rgba(0, 0, 0, .05); }

.hd-header-title { display: block; margin-bottom: 24px; color: #fff; text-align: center; font-size: 23.4px; line-height: 25px; letter-spacing: .1px; }

/* Search */
.hd-header-search { position: relative; display: block; width: 600px; margin: 0 auto; border-radius: 4px; }
.hd-header-search::before {
  content: ""; position: absolute; z-index: 1; left: 36px; top: 50%; transform: translateY(-50%);
  width: 17px; height: 17px; background-color: #fff;
  -webkit-mask: var(--i-search) center / contain no-repeat; mask: var(--i-search) center / contain no-repeat;
}
.hd-header-search:is([data-has-emphasis="true"], [data-has-focus="true"], [data-expanded="true"])::before { background-color: var(--hd-ink); }
.hd-header-search[data-expanded="true"]::before { opacity: .5; }
.hd-header-search-field { position: relative; display: block; border: 1px solid rgba(0, 0, 0, .04); border-radius: 8px; }
.hd-header-search-field input {
  box-sizing: content-box; display: block; width: 100%; height: 62px; padding: 0 64px; margin: 0;
  border: 0; border-radius: 8px; appearance: none; outline: none;
  background: rgba(255, 255, 255, .25); color: var(--hd-ink);
  font-size: 15.75px; line-height: 62px; letter-spacing: -.1px; text-align: center; white-space: pre;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .08); transition: background-color .1s linear, box-shadow .1s linear;
}
.hd-header-search-field input { width: calc(100% - 128px); }
.hd-header-search-field input::placeholder { color: #fff; opacity: 1; }
.hd-header-search-field input::-webkit-search-cancel-button,
.hd-header-search-field input::-webkit-search-decoration { appearance: none; }
.hd-header-search-field input:hover { box-shadow: 0 3px 6px rgba(0, 0, 0, .1); }
.hd-header-search-field input:focus { box-shadow: 0 4px 10px rgba(0, 0, 0, .2); }
.hd-header-search[data-has-emphasis="false"][data-has-focus="false"][data-expanded="false"] .hd-header-search-field input:hover { background: rgba(255, 255, 255, .3); }
.hd-header-search:is([data-has-emphasis="true"], [data-has-focus="true"], [data-expanded="true"]) .hd-header-search-field input { background: #fff; }
.hd-header-search:is([data-has-emphasis="true"], [data-has-focus="true"], [data-expanded="true"]) .hd-header-search-field input::placeholder { color: var(--hd-ink); }
.hd-header-search-field-autocomplete { display: none; }
.hd-header-search-field-ruler { position: absolute; top: 0; left: 0; right: 0; font-size: 15.75px; visibility: hidden; height: 62px; padding: 0 64px; text-align: center; white-space: pre; }
.hd-header-search-field-ruler-text { display: inline-block; }

.hd-header-search-results {
  display: none; position: absolute; z-index: 10; top: 100%; left: 0; right: 0; margin-top: 9px;
  border: 1px solid rgba(0, 0, 0, .04); border-radius: 8px; box-shadow: 0 14px 36px rgba(0, 0, 0, .06);
}
.hd-header-search[data-expanded="true"] .hd-header-search-results { display: block; }
.hd-include-search { max-height: 480px; overflow: auto; padding: 8px 0; background: #fff; border: 1px solid rgba(0, 0, 0, .05); border-radius: 8px; }
.hd-include-search-result { display: flex; flex-direction: column; padding: 14px 24px 16px; }
.hd-include-search-result[data-active="true"] { background-color: var(--hd-chip); }
.hd-include-search-result[data-active="true"]:active { background-color: #d9e0e7; }
.hd-include-search-result-title { flex: 1; margin-top: -2px; color: #000; font-size: 15.3px; line-height: 20px; }
.hd-include-search-result-description { flex: 0 0 auto; max-height: 34px; margin-top: 7px; color: var(--hd-ink-soft); font-size: 12.15px; line-height: 17px; }

/* Header backdrop */
.hd-header-background, .hd-header-background::before, .hd-header-background::after, .hd-header-background-banner { position: absolute; inset: 0; }
.hd-header-background { z-index: 0; }
.hd-header-background::before { content: ""; z-index: 1; background: linear-gradient(rgba(0, 0, 0, .25), #000 99%); opacity: .08; }
.hd-header-background[data-has-banner="true"]::before { opacity: .3; }
.hd-header-background-banner { z-index: 0; background: center bottom / cover no-repeat; }

@media (max-width: 780px) {
  .hd-header-main-logo { margin-left: 2px; }
  .hd-header-main-actions { margin-right: 2px; }
}
@media (max-width: 640px) { .hd-header-search { width: 100%; } }
@media (max-width: 480px) {
  .hd-site header { padding: 12px 0 20px; }
  .hd-header-main { margin-bottom: 12px; }
  .hd-header-main-actions-website { padding: 0 12px; }
  .hd-header-main-actions-website::before {
    content: ""; display: inline-block; width: 20px; height: 20px; margin-top: -3px; vertical-align: middle; opacity: .8;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M12 3 2 11.5h3V21h5.5v-6h3v6H19v-9.5h3z'/%3E%3C/svg%3E") center / contain no-repeat;
  }
  .hd-header-main-actions-website-itself { display: none; }
  .hd-header-title { margin-bottom: 10px; padding-top: 8px; font-size: 18px; }
  .hd-header-search::before { left: 24px; width: 16px; height: 16px; }
  .hd-header-search-field input { height: 52px; line-height: 52px; padding: 0 10px 0 40px; width: calc(100% - 50px); }
  .hd-header-search-field-ruler { height: 52px; padding: 0 10px 0 40px; }
}
@media (max-width: 360px) { .hd-header-main-actions-website { display: none; } }

/* ---------- Navigation bar (category / article top bar) ---------- */
.hd-site nav { height: 76px; overflow: hidden; background: #fff; border-bottom: 1px solid var(--hd-line); line-height: 76px; }
.hd-site nav .hd-wrapper, .hd-navigation-wrap { height: 100%; }
.hd-navigation-wrap { display: flex; }
.hd-site nav .hd-navigation-back, .hd-site nav .hd-navigation-pad { flex: .1; }
.hd-site nav .hd-navigation-back-item { flex: .2; }
.hd-site nav .hd-navigation-back, .hd-site nav .hd-navigation-title { margin-top: -2px; }
.hd-site nav .hd-navigation-title { flex: .8; padding: 0 12px; text-align: center; }
.hd-navigation-title-list-wrap { display: flex; justify-content: center; margin: 0 auto; padding: 0 20px; }
.hd-navigation-title-list-wrap > * { display: inline-block; vertical-align: middle; }
.hd-navigation-title-list-subject { text-align: right; font-size: 14.85px; }
.hd-navigation-title-list-subject-label { color: var(--hd-ink); }
.hd-navigation-title-list-subject .hd-category-badge { margin: -2px 0 0 12px; vertical-align: middle; }
.hd-navigation-title-list-separator-wrap { margin: 0 22px 0 26px; }
.hd-navigation-title-list-separator { display: inline-block; width: 1px; height: 32px; margin-top: -2px; vertical-align: middle; background-color: var(--hd-line); }
.hd-navigation-title-list-description-wrap { text-align: left; }
.hd-navigation-title-list-description { display: inline-block; max-width: 300px; max-height: 40px; overflow: hidden; vertical-align: middle; color: var(--hd-ink-soft); font-size: 13.5px; line-height: 20px; }

.hd-navigation-back { color: var(--hd-ink); font-size: 15.3px; letter-spacing: .25px; }
.hd-navigation-back::before {
  content: ""; display: inline-block; width: 14px; height: 11px; margin: -2px 7px 0 0; vertical-align: middle; transition: transform .1s linear;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 11' fill='none' stroke='%231c293b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13 5.5H1.5M5.5 1.2 1.2 5.5l4.3 4.3'/%3E%3C/svg%3E") center / contain no-repeat;
}
.hd-navigation-back:hover::before { transform: translateX(-2px); }
.hd-navigation-back-item::before { margin: 0 7px -1px 0; }
.hd-navigation-back-item .hd-category-badge { max-width: 100px; margin-left: 1px; vertical-align: middle; text-transform: none; }

@media (max-width: 940px) {
  .hd-site nav .hd-navigation-back, .hd-site nav .hd-navigation-pad { flex: .2; }
  .hd-site nav .hd-navigation-back-item { flex: .1; }
  .hd-site nav .hd-navigation-back-item .hd-category-badge { display: none; }
  .hd-site nav .hd-navigation-title { flex: .6; }
  .hd-navigation-title-list-wrap { display: block; padding: 0 8px; }
  .hd-navigation-title-list-description-wrap, .hd-navigation-title-list-separator-wrap { display: none !important; }
}
@media (max-width: 600px) {
  .hd-site nav .hd-navigation-back-item { display: none; }
  .hd-navigation-title-list-subject-label { display: none; }
  .hd-navigation-title-list-subject .hd-category-badge { margin-left: 0; }
}
@media (max-width: 480px) {
  .hd-site nav .hd-navigation-back, .hd-site nav .hd-navigation-pad { display: none; }
  .hd-site nav .hd-navigation-title { flex: 1; }
  .hd-navigation-title-list-wrap { padding: 0; }
}

/* ---------- Home ---------- */
.hd-home-title { text-align: left; font-size: 21.6px; letter-spacing: 0; }
.hd-home section[data-type="frequently_read"] .hd-home-title::before {
  content: ""; display: inline-block; width: 22px; height: 22px; margin: -5px 10px 0 0; vertical-align: middle;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23a8bacd' d='M12 1.5l3.1 6.6 7.2.9-5.3 5 1.4 7.1L12 17.6l-6.4 3.5L7 14l-5.3-5 7.2-.9z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.hd-home-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px 24px; margin-top: 30px; font-size: 0; }
.hd-home-list li a { display: block; padding: 10px 22px 12px 24px; color: var(--hd-ink); font-size: 13.95px; line-height: 19px; letter-spacing: 0; }
.hd-home-list-large li a { padding: 12px 24px; }
.hd-home-list-aside { overflow: hidden; }
.hd-home-list-wrap { position: relative; display: block; height: 38px; }
.hd-home-list-label { max-height: 38px; overflow: hidden; }
.hd-home-list-image { display: block; width: 100px; height: 100px; overflow: hidden; border-radius: 10px; background: center / contain no-repeat; }
.hd-home-list-category { display: block; margin: 2px 0 13px; line-height: 0; }
.hd-home-list-category .hd-category-badge { max-width: 220px; }
.hd-home section[data-type="frequently_read"] .hd-home-list li a { font-size: 14.4px; }
.hd-home section[data-type="frequently_read"] .hd-home-list-wrap { display: flex; align-items: center; }
.hd-home section[data-type="frequently_read"] .hd-home-list-label { flex: 1; }
.hd-home section[data-type="frequently_read"] .hd-home-list-wrap::after {
  content: ""; flex: 0 0 auto; width: 6px; height: 9px; margin-left: 6px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 12' fill='none' stroke='%231c293b' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1.5 1.5 6 6l-4.5 4.5'/%3E%3C/svg%3E") center / contain no-repeat;
}
.hd-home section[data-type="categories"] .hd-home-list li { min-width: 0; }
.hd-home section[data-type="categories"] .hd-home-list li a { display: flex; align-items: center; }
.hd-home section[data-type="categories"] .hd-home-list-image { flex: 0 0 auto; margin-right: 38px; }
.hd-home section[data-type="categories"] .hd-home-list-text { flex: 1; }
.hd-home-separator { display: block; margin-top: 62px; }
@media (max-width: 940px) { .hd-home-list-category .hd-category-badge { max-width: 150px; } }
@media (max-width: 780px) {
  .hd-home-title { text-align: center; }
  .hd-home-list { grid-template-columns: 1fr; }
  .hd-home-list-category .hd-category-badge { max-width: 100%; }
  .hd-home-separator { margin-top: 52px; }
}
@media (max-width: 480px) {
  .hd-home section[data-type="frequently_read"] { display: none; }
  .hd-home section[data-type="categories"] .hd-home-list-image { margin-right: 28px; }
  .hd-home-separator { display: none; }
}

/* ---------- Category page ---------- */
.hd-category { display: flex; }
.hd-category > aside { flex: 0 0 auto; width: 200px; margin-right: 30px; }
.hd-category > aside .hd-aside { padding-bottom: 80px; }
.hd-category > section { flex: 1; padding-bottom: 16px; }
.hd-category-section { margin-bottom: 46px; padding-bottom: 38px; border-bottom: 1px solid var(--hd-line); }
.hd-category-section:last-of-type { margin-bottom: 0; padding-bottom: 0; border-bottom: 0; }
.hd-category-section-list { padding: 4px 0; }
.hd-category-item { margin-top: 26px; }
.hd-category-item:first-of-type { margin-top: 0; }
.hd-category-item[data-collapsed="true"] { display: none; }
.hd-category-section[data-expanded="true"] .hd-category-item[data-collapsed="true"] { display: block; }
.hd-category-item > a { display: block; padding: 19px 40px 20px; }
.hd-category-item-title { min-height: 22px; max-height: 44px; color: var(--hd-ink); font-size: 17.1px; line-height: 22px; }
.hd-category-item-title-icon {
  display: inline-block; width: 18px; height: 15px; margin: 0 11px -2px 0; background-color: var(--hd-accent);
  -webkit-mask: var(--i-book) center / contain no-repeat; mask: var(--i-book) center / contain no-repeat;
}
.hd-category-item-meta { display: flex; margin-top: 15px; }
.hd-category-item-meta-description { flex: .8; height: 40px; overflow: hidden; color: var(--hd-ink-soft); font-size: 13.5px; line-height: 20px; }
.hd-category-item-meta-separator { width: 1px; height: 40px; margin: 0 24px; background-color: var(--hd-line); }
.hd-category-item-meta-popularity { flex: .2; margin-top: -1px; }
.hd-category-item-meta-popularity-label { color: var(--hd-ink); font-size: 13.05px; line-height: 16px; }
.hd-category-item-meta-popularity .hd-popularity { display: block; margin-top: 5px; }
@media (max-width: 940px) { .hd-category > aside { width: 160px; margin-right: 24px; } }
@media (max-width: 780px) { .hd-category { display: block; } .hd-category > aside { display: none; } }
@media (max-width: 600px) {
  .hd-category-item > a { padding: 18px 20px; }
  .hd-category-item-title { text-align: center; }
  .hd-category-item-meta { display: block; }
  .hd-category-item-meta-description { display: block; text-align: center; }
  .hd-category-item-meta-separator, .hd-category-item-meta-popularity { display: none; }
}
@media (max-width: 480px) { .hd-category-item { margin-top: 16px; } }

/* ---------- Article page ---------- */
.hd-article { display: flex; }
.hd-article > aside, .hd-article-content { padding-top: 24px; padding-bottom: 80px; }
.hd-article > aside { flex: 0 0 auto; width: 200px; margin-right: 8px; padding-left: 46px; }
.hd-article > aside .hd-aside { padding-top: 0; }
.hd-article > aside .hd-aside ul { margin-top: 12px; }
.hd-article-category { margin-bottom: 38px; }
.hd-article-content { flex: 1; overflow: hidden; background-color: #fff; }
.hd-article-content-split { border-left: 1px solid var(--hd-line); }
.hd-article-content-wrap { width: 100%; max-width: 1323px; margin: 0 auto; }
.hd-article-content article { display: block; padding: 0 60px; }
.hd-article-content-header { padding-bottom: 33px; border-bottom: 1px solid var(--hd-line); }
.hd-article-content-header-metas { margin-bottom: 25px; color: var(--hd-ink-soft); font-size: 14.4px; line-height: 18px; letter-spacing: .1px; }
.hd-article-content-header-metas-category { display: inline; vertical-align: middle; }
.hd-article-content-header-metas-category a:hover { text-decoration: underline; }
.hd-article-content-header h1 { color: var(--hd-ink); font-size: 25.2px; line-height: 32px; }
.hd-article-content article a { color: var(--hd-accent); }
.hd-article-content-text { font-size: 14.4px; line-height: 23px; }
.hd-article-content-text-large { padding-top: 38px; }
.hd-article-content-text a { text-decoration: underline; }
.hd-article-content-updated { margin-top: 22px; color: var(--hd-ink-soft); text-align: center; font-size: 13.5px; line-height: 20px; }
.hd-article-content-updated::before {
  content: ""; display: inline-block; width: 15px; height: 17px; margin: -4px 10px 0 0; vertical-align: middle;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2337516c' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='13' r='9'/%3E%3Cpath d='M12 8.5V13l3 2M9 2h6'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Article body (generated from the editor) */
.hd-markdown-title { display: block; }
.hd-markdown-title:hover { text-decoration: underline; text-decoration-color: var(--hd-chip); cursor: pointer; }
.hd-markdown-title-h1, .hd-markdown-title-h2 { font-family: "KB Sans Semibold", sans-serif; }
.hd-markdown-title-h1 { margin: 16px 0 4px; padding: 0 0 1px 12px; border-left: 4px solid var(--hd-accent); font-size: 27px; line-height: 29px; }
.hd-markdown-title-h2 { margin: 12px 0 2px; color: var(--hd-ink-soft); font-size: 25.2px; line-height: 28px; }
.hd-markdown-title-h3 { margin: 8px 0 2px; font-size: 23.4px; line-height: 26px; }
.hd-markdown-title-h4 { margin: 6px 0 0; font-size: 22.5px; line-height: 25px; }
.hd-markdown-title-h5 { margin: 4px 0 0; font-size: 21.6px; line-height: 24px; }
.hd-markdown-title-h6 { margin: 2px 0 0; font-size: 19.8px; line-height: 22px; }
.hd-markdown-bold { font-family: "KB Sans Medium", sans-serif; }
.hd-markdown-link-text { text-decoration: underline; }
.hd-markdown-line { display: block; width: calc(100% - 2px); min-width: 8px; height: 1px; margin: 23px auto 2px; border: 0; background: var(--hd-line); }
.hd-markdown-image, .hd-markdown-image img { display: block; max-width: 100%; }
.hd-markdown-image img { margin: 0 auto; border: 0; }
.hd-markdown-video, .hd-markdown-video-wrap { display: block; }
.hd-markdown-video-wrap { position: relative; height: 0; padding: 25px 0 56.25%; }
.hd-markdown-video-wrap iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
:is(.hd-markdown-image, .hd-markdown-video)[data-label]::after {
  content: attr(data-label); display: block; margin-top: 14px; padding: 0 12px;
  color: var(--hd-ink-soft); text-align: center; font: 14.4px/20px "KB Sans Medium", sans-serif;
}
.hd-markdown-code { margin: 0 1px; font-size: 12.15px; }
.hd-markdown-code-inline { display: inline; padding: 2px 6px; border: 1px solid rgba(25, 114, 245, .2); border-radius: 3px; background: rgba(25, 114, 245, .075); color: var(--hd-accent); }
.hd-markdown-blockquote {
  display: block; margin: 2px 0; padding: 13px 26px 15px 22px; border-left: 5px solid var(--hd-quote); border-radius: 5px;
  background: #f7f9fc; color: #262626; font-size: 14.4px; line-height: 20px; letter-spacing: -.2px; text-align: justify;
}
.hd-markdown-blockquote::before {
  content: ""; display: inline-block; width: 24px; height: 20px; margin-bottom: 13px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 20'%3E%3Cpath fill='%23a8bacd' d='M0 20V11C0 5 3 1.4 9 0l1 2.4C7 3.5 5.6 5.5 5.4 8.6H10V20zm14 0V11c0-6 3-9.6 9-11l1 2.4c-3 1.1-4.4 3.1-4.6 6.2H24V20z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.hd-markdown-emphasis { display: block; padding: 14px 10px 15px 22px; border-left: 5px solid; border-radius: 5px; line-height: 22px; }
.hd-markdown-emphasis[data-type="|"] { background: #e2ffdd; border-color: #52d53a; }
.hd-markdown-emphasis[data-type="||"] { background: #fffcd9; border-color: #fbe900; }
.hd-markdown-emphasis[data-type="|||"] { background: #fff4e1; border-color: #ffa40d; }
.hd-markdown-list { position: relative; display: block; margin: 0 1px; }
.hd-markdown-list-item { position: relative; margin: 3px 0; padding-left: 32px; }
.hd-markdown-list-item::before {
  content: attr(value); position: absolute; top: 0; left: 0; display: inline-block; height: 22px; min-width: 18px; margin: 1px 0 0 1px; padding: 0 2px;
  border-radius: 22px; background: var(--hd-accent); color: #fff; text-align: center; font: 11.7px/21px "KB Sans Medium", sans-serif;
}
.hd-markdown-list-unordered .hd-markdown-list-item { margin: 2px 0; padding-left: 25px; }
.hd-markdown-list-unordered .hd-markdown-list-item::before { content: ""; width: 9px; min-width: 0; height: 9px; margin: 8px 0 0 8px; padding: 0; line-height: 10px; }

.hd-article-content-separate-top.hd-markdown-line { margin-top: 84px; }
.hd-article-content-separate-bottom.hd-markdown-line { margin-top: 23px; }

/* Rating */
.hd-article-rate { margin-top: 28px; padding: 0 12px; text-align: center; }
.hd-article-rate-ask, .hd-article-rate-thanks { display: none; }
.hd-article-rate[data-has-answer="false"] .hd-article-rate-ask, .hd-article-rate[data-has-answer="true"] .hd-article-rate-thanks { display: block; }
.hd-article-rate-title, .hd-article-rate-ask ul { display: inline-block; margin-top: 12px; vertical-align: middle; }
.hd-article-rate-title { margin: 12px 8px 0; color: var(--hd-ink-soft); font-size: 14.4px; }
.hd-article-rate-ask ul { margin: 12px 10px 0; }
.hd-article-rate-ask li { display: inline-block; margin: 0 4px; }
.hd-article-rate-thanks { margin: -4px 0 -14px; animation: hd-pop .3s both; }
.hd-article-rate-thanks-title { color: var(--hd-ink-soft); font-size: 14.4px; }
.hd-article-rate-thanks-smiley { display: none; margin-top: 9px; }
.hd-article-rate-thanks[data-is-satisfied="true"] .hd-article-rate-thanks-smiley-satisfied,
.hd-article-rate-thanks[data-is-satisfied="false"] .hd-article-rate-thanks-smiley-dissatisfied { display: block; }
.hd-article-rate-thanks-smiley .hd-smiley { margin: 0 auto; animation: hd-wiggle 1.2s .25s both; }

.hd-smiley { display: inline-block; width: 16px; height: 16px; margin: 0 2px -3px; background: center / contain no-repeat; }
.hd-smiley[data-size="large"] { display: block; width: 32px; height: 32px; margin-bottom: 0; }
.hd-smiley[data-name="blushing"] { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Ccircle cx='16' cy='16' r='16' fill='%23ffd34e'/%3E%3Ccircle cx='7' cy='19' r='3.5' fill='%23ff8a8a' opacity='.7'/%3E%3Ccircle cx='25' cy='19' r='3.5' fill='%23ff8a8a' opacity='.7'/%3E%3Cpath d='M8 13q3-3 6 0M18 13q3-3 6 0M10 20q6 6 12 0' fill='none' stroke='%235b4320' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E"); }
.hd-smiley[data-name="thumbs-up"] { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath fill='%23ffd34e' d='M3 14h6v15H3zM11 28V14l6-11c2.5 0 3.5 2 3 4l-1.5 6H27a3 3 0 0 1 3 3.4l-1.6 9.6A3 3 0 0 1 25.5 30H13a2 2 0 0 1-2-2z'/%3E%3C/svg%3E"); }

/* Feedback dialog */
.hd-article-rate-feedback-wrap { display: none; position: fixed; inset: 0; z-index: 100; background-color: rgba(28, 41, 59, .3); animation: hd-fade .2s both; }
.hd-article-rate-feedback-wrap[data-is-open="true"] { display: block; }
.hd-article-rate-feedback-container { position: absolute; inset: 0; }
.hd-article-rate-feedback {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 520px; padding: 24px 26px 27px; border-radius: 8px; background: #fff; box-shadow: 0 14px 36px rgba(0, 0, 0, .08);
}
.hd-article-rate-feedback[data-is-locked="true"] :is(.hd-article-rate-feedback-actions, .hd-article-rate-feedback-field) { pointer-events: none; opacity: .65; }
.hd-article-rate-feedback-title { margin: 0 0 26px; color: var(--hd-ink); text-align: left; font-size: 18px; line-height: 22px; }
.hd-article-rate-feedback-title::before {
  content: ""; display: inline-block; width: 22px; height: 20px; margin: -5px 13px 0 4px; vertical-align: middle;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 22'%3E%3Cpath fill='%23a8bacd' d='M2 0h20a2 2 0 0 1 2 2v13a2 2 0 0 1-2 2H11l-6 5v-5H2a2 2 0 0 1-2-2V2a2 2 0 0 1 2-2z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.hd-article-rate-feedback-field {
  box-sizing: content-box; display: block; width: calc(100% - 42px); height: 100px; padding: 16px 20px; resize: none;
  border: 1px solid var(--hd-chip); border-radius: 7px; background-color: #f7f9fc; font-size: 13.95px; line-height: 20px;
}
.hd-article-rate-feedback-field:focus { border-color: #c9d3dd; }
.hd-article-rate-feedback-field::placeholder { color: var(--hd-ink-soft); opacity: 1; }
.hd-article-rate-feedback-actions { display: flex; margin-top: 26px; }
.hd-article-rate-feedback-actions .hd-button:first-child { margin-right: 6px; }
.hd-article-rate-feedback-actions .hd-button:last-child { margin-left: 6px; }
.hd-article-rate-feedback-actions .hd-button[data-action="send"] { flex: .7; }
.hd-article-rate-feedback-actions .hd-button[data-action="cancel"] { flex: .3; text-align: center; }

@keyframes hd-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes hd-pop { from { opacity: 0; transform: scale(.4); } 60% { opacity: 1; } to { transform: none; } }
@keyframes hd-wiggle { 0%, 100% { transform: none; } 20% { transform: scale(.9) rotate(-4deg); } 40%, 80% { transform: scale(1.1) rotate(4deg); } 60% { transform: scale(1.1) rotate(-4deg); } }

@media (max-width: 1200px) { .hd-article-content article { padding: 0 40px; } }
@media (max-width: 980px) {
  .hd-article { display: block; }
  .hd-article > aside { display: none; }
  .hd-article-content article { padding: 0 20px; }
}
@media (max-width: 780px) {
  .hd-article-content-wrap { max-width: 780px; }
  .hd-article-content-header { padding-bottom: 26px; }
  .hd-article-content-text-large { padding-top: 28px; }
  .hd-article-rate-feedback { width: 400px; }
}
@media (max-width: 480px) {
  .hd-article-content-wrap { max-width: 480px; }
  .hd-article-content article { padding: 0 9px; border-radius: 0; }
  .hd-article-content-header { padding-bottom: 20px; }
  .hd-article-content-text-large { padding-top: 24px; }
  .hd-article-content-separate-top.hd-markdown-line { margin-top: 66px; }
  .hd-article-content-separate-bottom.hd-markdown-line { margin-top: 16px; }
  .hd-article-content-updated { margin-top: 16px; }
  .hd-markdown-title-h1 { margin: 8px 0 0; font-size: 21.6px; line-height: 23px; }
  .hd-markdown-title-h2 { margin: 4px 0 0; font-size: 19.8px; line-height: 22px; }
  .hd-markdown-title-h3 { margin: 2px 0 0; font-size: 18px; line-height: 20px; }
  .hd-markdown-title-h4 { margin: 2px 0 0; font-size: 17.1px; line-height: 19px; }
  .hd-markdown-title-h5 { margin: 0; font-size: 16.2px; line-height: 18px; }
  .hd-markdown-title-h6 { margin: 0; font-size: 14.4px; line-height: 16px; }
  .hd-article-rate-feedback { top: 24px; left: -20px; right: -20px; width: auto; padding: 24px 40px 27px; transform: none; }
}

/* ---------- Footer ---------- */
.hd-site footer { text-align: center; }
.hd-footer-ask { padding: 58px 0; border-top: 1px solid var(--hd-line); }
.hd-footer-ask > .hd-wrapper { display: flex; }
.hd-footer-ask-text { flex: 1; display: flex; flex-direction: column; justify-content: center; margin-top: -3px; text-align: left; }
.hd-footer-ask-text-title { color: var(--hd-ink); font-size: 19.8px; line-height: 24px; letter-spacing: .2px; }
.hd-footer-ask-text-label { margin-top: 14px; color: var(--hd-ink-soft); font-size: 14.85px; letter-spacing: .1px; }
.hd-footer-ask-buttons { flex: 0 0 auto; display: flex; align-items: center; }
.hd-footer-ask-buttons li { display: inline-block; }
.hd-footer-ask-buttons .hd-button { margin: 0 7px; }
.hd-footer-ask-buttons li:last-child .hd-button { margin-right: 0; }
.hd-footer-ask-buttons .hd-button::before { margin: -3px 13px 0 0; }
.hd-footer-copyright { color: var(--hd-ink-soft); }
.hd-footer-copyright .hd-wrapper { display: flex; align-items: center; padding: 22px 0; border-top: 1px solid var(--hd-line); color: var(--hd-ink-soft); font-size: 13.05px; }
.hd-footer-copyright-brand { flex: 0 0 auto; margin-left: 8px; text-align: left; }
.hd-footer-copyright-brand img { display: inline-block; height: 18px; margin: 0 0 2px 10px; vertical-align: middle; }
@media (max-width: 780px) {
  .hd-footer-ask > .hd-wrapper { flex-direction: column; }
  .hd-footer-ask-text { margin-top: 0; text-align: center; }
  .hd-footer-ask-buttons { justify-content: center; margin-top: 28px; }
  .hd-footer-ask-buttons li .hd-button, .hd-footer-ask-buttons li:last-child .hd-button { margin: 0 5px; }
}
@media (max-width: 480px) {
  .hd-footer-copyright .hd-wrapper { flex-direction: column; }
  .hd-footer-copyright-brand { margin: 12px 0 0; text-align: center; }
}
@media (max-width: 360px) {
  .hd-footer-ask-buttons { flex-direction: column; }
  .hd-footer-ask-buttons .hd-button { margin-top: 6px; }
  .hd-footer-ask-buttons li:first-child .hd-button { margin-top: 0; }
}