.handbook-icon { width:24px; height:24px; flex:0 0 24px; object-fit:contain; vertical-align:middle; }
#journalOverlay .journal-mode-tab { display:inline-flex; align-items:center; justify-content:center; gap:8px; }
#journalOverlay .journal-mode-tab .handbook-icon { width:25px; height:25px; flex-basis:25px; }
#journalOverlay .journal-mode-tab:disabled { color:#b9ab8b; border-color:rgba(190,156,91,.16); background:rgba(0,0,0,.12); opacity:.68; cursor:default; }
.handbook-unread-dot { display:inline-block; width:7px; height:7px; flex:0 0 7px; border-radius:50%; background:#d5b368; box-shadow:0 0 5px rgba(213,179,104,.45); }
#journalOverlay {
  --handbook-nav-surface: linear-gradient(color-mix(in srgb,var(--mg-graphite) var(--mg-journal-material-tint),transparent),color-mix(in srgb,var(--mg-graphite) var(--mg-journal-material-tint),transparent)), var(--mg-image-graphite) repeat var(--mg-graphite);
  --handbook-nav-text: var(--mg-text-main, #ded0ac);
  --handbook-nav-muted: var(--mg-text-muted, #b3a387);
  --handbook-nav-accent: var(--mg-amber, #d5b368);
}
/* Every handbook category uses the Journal's graphite material and selection rule. */
#journalOverlay :is(.journal-nav,.handbook-quest-categories,.handbook-achievement-nav) {
  box-sizing:border-box;
  background:var(--handbook-nav-surface);
  border:1px solid var(--mg-border-muted, rgba(190,156,91,.2));
  border-radius:.35rem;
  padding:10px 8px;
  scrollbar-gutter:stable;
}
#journalOverlay :is(.journal-section-tab,.journal-chapter-tab,.handbook-quest-categories button,.handbook-category-button) {
  appearance:none;
  position:relative;
  box-sizing:border-box;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:9px;
  width:100%;
  min-width:0;
  min-height:44px;
  padding:10px 11px;
  border:0;
  border-image:none;
  border-radius:0;
  background:transparent;
  box-shadow:none;
  text-shadow:none;
  filter:none;
  color:var(--handbook-nav-text);
  font-family:var(--font-readable);
  font-size:14px;
  font-weight:500;
  line-height:1.4;
  text-align:left;
  text-decoration:none;
  white-space:normal;
  cursor:pointer;
}
#journalOverlay :is(.journal-section-tab,.journal-chapter-tab,.handbook-quest-categories button,.handbook-category-button) > span {
  min-width:0;
  flex:1;
  overflow:visible;
  text-overflow:clip;
  white-space:normal;
  overflow-wrap:normal;
  word-break:normal;
}
#journalOverlay :is(.journal-section-tab,.journal-chapter-tab,.handbook-category-button) > strong {
  flex:0 0 auto;
  color:var(--handbook-nav-muted);
  font-size:.65rem;
  font-weight:500;
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
}
#journalOverlay .journal-section-tab { font-weight:650; }
#journalOverlay .journal-chapter-tab { min-height:36px; font-size:12px; padding:8px 10px; color:var(--handbook-nav-muted); }
#journalOverlay :is(.journal-section-tab,.journal-chapter-tab,.handbook-quest-categories button,.handbook-category-button):is(:hover,:focus-visible,.is-active) {
  background:transparent;
  color:var(--handbook-nav-accent);
  border:0;
  box-shadow:none;
  filter:none;
  transform:none;
}
#journalOverlay :is(.journal-section-tab,.journal-chapter-tab,.handbook-quest-categories button,.handbook-category-button)::after {
  content:'';
  position:absolute;
  left:.5rem;
  right:.5rem;
  bottom:0;
  height:2px;
  pointer-events:none;
  background:var(--mg-image-selection-hover) center / 100% 100% no-repeat, linear-gradient(90deg,transparent,var(--handbook-nav-accent),transparent);
  opacity:0;
  transform:scaleX(0);
  transform-origin:center;
  transition:transform 120ms ease-out, opacity 120ms ease-out;
}
#journalOverlay :is(.journal-section-tab,.journal-chapter-tab,.handbook-quest-categories button,.handbook-category-button):is(:hover,:focus-visible,.is-active)::after { opacity:1; transform:scaleX(1); }
#journalOverlay :is(.journal-section-tab,.journal-chapter-tab,.handbook-quest-categories button,.handbook-category-button).is-active::after {
  background:var(--mg-image-selection-selected) center / 100% 100% no-repeat, linear-gradient(90deg,transparent,var(--handbook-nav-accent),transparent);
}
#journalOverlay :is(.journal-section-tab,.journal-chapter-tab,.handbook-quest-categories button,.handbook-category-button):focus-visible { outline:2px solid var(--handbook-nav-accent); outline-offset:-2px; }
#journalOverlay :is(.journal-section-tab,.journal-chapter-tab,.handbook-quest-categories button,.handbook-category-button):is(:disabled,[aria-disabled=true]) { opacity:.45; color:var(--handbook-nav-muted); cursor:default; }
#journalOverlay :is(.journal-section-tab,.journal-chapter-tab,.handbook-quest-categories button,.handbook-category-button):is(:disabled,[aria-disabled=true])::after { opacity:0; transform:scaleX(0); transition:none; }
@media (prefers-reduced-motion:reduce) {
  #journalOverlay :is(.journal-section-tab,.journal-chapter-tab,.handbook-quest-categories button,.handbook-category-button)::after { transition:none; }
}
/* Searches and filters use the same compact graphite controls in both browsers. */
#journalOverlay :is(.journal-toolbar,.quest-toolbar) :is(input,select) {
  box-sizing:border-box;
  height:34px;
  min-height:34px;
  padding:0 10px;
  border:1px solid var(--mg-border-muted, rgba(190,156,91,.24));
  border-radius:.3rem;
  background:var(--mg-graphite-deep, #191919);
  color:var(--handbook-nav-text);
  box-shadow:none;
  font-family:var(--font-readable);
  font-size:13px;
  line-height:1.3;
}
#journalOverlay :is(.journal-toolbar,.quest-toolbar) input::placeholder { color:var(--handbook-nav-muted); opacity:1; }
#journalOverlay :is(.journal-toolbar,.quest-toolbar) :is(input,select):focus-visible { outline:2px solid var(--handbook-nav-accent); outline-offset:1px; }
#journalOverlay .handbook-achievements { display:flex; flex-direction:column; overflow:hidden; min-height:0; }
#journalOverlay .handbook-achievements .achievement-overview { flex:0 0 auto; flex-wrap:wrap; }
#journalOverlay .handbook-achievements .achievement-overview > div { min-width:140px; flex:1; }
#journalOverlay .handbook-achievements .achievement-overview span { overflow-wrap:anywhere; }
.handbook-achievement-layout { display:grid; grid-template-columns:minmax(190px,230px) minmax(0,1fr); gap:16px; min-height:0; flex:1; overflow:hidden; }
.handbook-achievement-nav { display:flex; flex-direction:column; gap:6px; min-height:0; overflow:auto; padding:2px 7px 8px 2px; scrollbar-gutter:stable; }
.handbook-achievement-content { min-width:0; min-height:0; overflow:auto; padding:0 8px 16px 0; scrollbar-gutter:stable; }
.handbook-achievement-heading { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:6px 12px; border-bottom:1px solid rgba(190,156,91,.24); padding:4px 0 12px; margin-bottom:12px; }
.handbook-achievement-heading h3 { margin:0; color:#e9ce92; }
.handbook-achievement-heading > span { color:#bbae92; font-size:12px; }
.handbook-achievements .achievement-card { min-width:0; align-content:start; }
.handbook-achievements .achievement-card h4 { padding-right:34px; overflow-wrap:anywhere; }
.handbook-achievements .achievement-card.is-legacy h4 { padding-right:70px; }
.handbook-empty { color:#bbae92; padding:16px; }
.handbook-locked { padding:24px; color:#d6c59f; }
@media (max-width:1050px) {
  .handbook-achievement-layout { grid-template-columns:minmax(165px,200px) minmax(0,1fr); gap:12px; }
  .handbook-achievements .achievement-grid { grid-template-columns:minmax(0,1fr); }
}
@media (max-width:700px) {
  #journalOverlay .journal-mode-tabs { flex-wrap:wrap; }
  #journalOverlay .journal-mode-tab { flex:1 1 calc(50% - 6px); min-width:0; }
  .handbook-achievement-layout { display:flex; flex-direction:column; gap:10px; }
  .handbook-achievement-nav { flex:0 0 auto; flex-direction:row; overflow-x:auto; overflow-y:hidden; padding:2px 2px 8px; max-height:none; scrollbar-gutter:auto; }
  #journalOverlay .handbook-achievement-nav .handbook-category-button { width:auto; flex:0 0 auto; max-width:250px; padding:8px 10px; }
  #journalOverlay .handbook-achievement-nav .handbook-category-button > span { white-space:nowrap; overflow-wrap:normal; }
  .handbook-achievement-content { flex:1 1 auto; padding-right:2px; }
  #journalOverlay .handbook-achievements .achievement-overview { gap:6px; }
  #journalOverlay .handbook-achievements .achievement-overview > div { min-width:0; padding:9px; }
  #journalOverlay .handbook-achievements .achievement-overview strong { font-size:16px; }
}