/* Scoped to the reader; blog colors and fonts come from the Chirpy theme. */
#hanja-reader {
  --hr-text: var(--text-color, #34343c);
  --hr-muted: var(--text-muted-color, #757575);
  --hr-bg: var(--main-bg, #fff);
  --hr-border: var(--tb-border-color, #eaeaea);
  --hr-accent: var(--link-color, #448360);
  --hr-surface: var(--highlight-bg-color, #f6f8fa);
  color: var(--hr-text);
  font: inherit;
}
#hanja-reader *, #hanja-reader *::before, #hanja-reader *::after { box-sizing: border-box; }
#hanja-reader [hidden] { display: none !important; }
#hanja-reader .hr-intro { margin: 0 0 1.8rem; color: var(--hr-muted); font-size: .95rem; line-height: 1.8; }
#hanja-reader .hr-section { margin: 0 0 1.8rem; }
#hanja-reader .hr-heading { display: flex; align-items: center; justify-content: space-between; gap: .75rem; min-height: 2rem; margin-bottom: .6rem; }
#hanja-reader .hr-heading label, #hanja-reader #reading-title { margin: 0; padding: 0; font: inherit; font-size: 1rem; font-weight: 600; line-height: 1.5; color: var(--heading-color, #2a2a2a); }
#hanja-reader .hr-heading h2::before, #hanja-reader .hr-heading h2::after { content: none; }
#hanja-reader .hr-actions { display: flex; gap: .9rem; }
#hanja-reader button { appearance: none; background: none; border: 0; padding: .2rem 0; color: var(--hr-muted); font: inherit; font-size: .82rem; cursor: pointer; box-shadow: none; border-radius: 0; }
#hanja-reader button:hover { color: var(--hr-accent); }
#hanja-reader #source { display: block; width: 100%; height: 110px; min-height: 110px; resize: vertical; padding: 1rem; border: 1px solid var(--hr-border); border-radius: 6px; background: var(--hr-bg); color: var(--hr-text); font: inherit; font-size: 1rem; line-height: 1.9; tab-size: 4; }
#hanja-reader #source::placeholder { color: var(--hr-muted); opacity: .8; }
#hanja-reader #source:focus { outline: 2px solid var(--hr-accent); outline-offset: 2px; }
#hanja-reader .hr-hint { margin: .5rem 0 0; color: var(--hr-muted); font-size: .78rem; line-height: 1.8; }
#hanja-reader .hr-count { color: var(--hr-muted); font-size: .78rem; white-space: nowrap; }
#hanja-reader .hr-output { min-height: 160px; border: 1px solid var(--hr-border); border-radius: 6px; background: var(--hr-bg); padding: 1rem; }
#hanja-reader #reading { white-space: pre-wrap; overflow-wrap: anywhere; font: inherit; font-size: 1rem; line-height: 2; tab-size: 4; }
#hanja-reader #empty { margin: 0; color: var(--hr-muted); font-size: 1rem; line-height: 2; }
#hanja-reader .hr-hanja { border: 0; border-radius: 2px; color: var(--hr-accent); text-decoration: underline; text-decoration-color: var(--hr-accent); text-decoration-thickness: 1px; text-underline-offset: 4px; cursor: pointer; }
#hanja-reader .hr-hanja:hover, #hanja-reader .hr-hanja:focus-visible, #hanja-reader .hr-hanja.active { background: var(--hr-surface); color: var(--hr-accent); outline: 1px solid var(--hr-accent); outline-offset: 2px; }
#hanja-reader .hr-hanja.unknown { color: var(--hr-muted); text-decoration-style: dotted; cursor: pointer; }
#hanja-reader .hr-data { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem 1rem; padding-top: 1rem; border-top: 1px solid var(--hr-border); color: var(--hr-muted); font-size: .75rem; line-height: 1.8; }
#hanja-reader .hr-data-actions { display: flex; gap: 1rem; }
#hanja-reader .hr-data a { color: var(--hr-muted); border: 0; text-decoration: none; cursor: pointer; }
#hanja-reader .hr-data a:hover { color: var(--hr-accent); text-decoration: underline; }
#hanja-reader button:focus-visible { outline: 2px solid var(--hr-accent); outline-offset: 4px; }
#hanja-reader .hr-help { margin-top: 1rem; font-size: .8rem; line-height: 1.8; color: var(--hr-muted); }
#hanja-reader .hr-help summary { width: fit-content; cursor: pointer; }
#hanja-reader .hr-help p { margin: .7rem 0 0; }
#hanja-reader .hr-tooltip { position: fixed; z-index: 1050; width: max-content; max-width: min(320px, calc(100vw - 24px)); max-height: calc(100vh - 24px); overflow: auto; padding: .85rem 1rem; border: 1px solid var(--hr-border); border-radius: 6px; background: var(--hr-bg); color: var(--hr-text); box-shadow: 0 4px 16px #00000012; font: inherit; font-size: .9rem; line-height: 1.8; }
#hanja-reader .hr-tooltip .character { color: var(--heading-color, #2a2a2a); font-size: 1.5rem; margin-bottom: .25rem; }
#hanja-reader .hr-tooltip .tip-footer { color: var(--hr-muted); font-size: .72rem; border-top: 1px solid var(--hr-border); margin-top: .6rem; padding-top: .5rem; }
#hanja-reader .hr-tooltip a.tip-footer {
  display: flex;
  align-items: center;
  min-height: 44px;
  color: var(--hr-accent);
  text-decoration: underline;
}
#hanja-reader .hr-touch-hint { display: none; }
@media (hover: none) and (pointer: coarse) {
  #hanja-reader .hr-mouse-hint { display: none; }
  #hanja-reader .hr-touch-hint { display: inline; }
}
@media (max-width: 575px) {
  #hanja-reader .hr-intro { font-size: .9rem; }
  #hanja-reader #source { font-size: .9rem; }
  #hanja-reader #reading { font-size: .9rem; }
  #hanja-reader .hr-data { flex-direction: column; }
}