/* hearthMenu (renderer/hearth-menu.js) — the DOM twin of the shell's page menu
   (shell/ctxmenu/menu.css). Same tokens, same painted icons, hm- prefixed so it
   can live inside the app's own stylesheet namespace. */
.hm-root {
  --hm-surface:  #161924;
  --hm-surface-3:#242a3d;
  --hm-border:   #262b3c;
  --hm-border-2: #3a4159;
  --hm-text:     #e7ecf3;
  --hm-dim:      #9aa3b8;
  --hm-mute:     #5d6678;
  --hm-ember:    #f59e0b;
  --hm-wash:     rgba(245, 158, 11, .13);
  --hm-line:     rgba(245, 158, 11, .45);
  position: fixed; inset: 0; z-index: 100000;
  background: transparent;
}
.hm-panel {
  position: fixed;
  width: 288px;
  padding: 6px;
  border-radius: 12px;
  border: 1px solid var(--hm-border-2);
  background:
    radial-gradient(240px 110px at 0% 0%, rgba(245, 158, 11, .07), transparent 70%),
    linear-gradient(180deg, #1a1e2b 0%, var(--hm-surface) 100%);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .04) inset, 0 2px 6px rgba(0, 0, 0, .45), 0 18px 48px rgba(0, 0, 0, .55);
  color: var(--hm-text);
  font: 13px/1.35 -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Inter', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  user-select: none;
  transform-origin: var(--ox, 0) var(--oy, 0);
}
.hm-panel.hm-in { animation: hm-pop .11s cubic-bezier(.2, .9, .3, 1.15); }
@keyframes hm-pop { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: none; } }
.hm-panel.hm-scrolls { overflow-y: auto; overscroll-behavior: contain; }
.hm-sep { height: 1px; margin: 5px 6px; background: var(--hm-border); }
.hm-title { padding: 5px 8px 4px 9px; }
.hm-tt { font-weight: 650; font-size: 12.5px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.hm-ts { font-size: 11px; color: var(--hm-mute); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; margin-top: 1px; }
.hm-item {
  width: 100%; min-height: 32px;
  display: grid; grid-template-columns: 22px 1fr auto; align-items: center; column-gap: 10px;
  padding: 4px 8px 4px 7px;
  border: 0; border-radius: 8px;
  background: transparent; color: var(--hm-text);
  font: inherit; text-align: left; outline: none; cursor: default;
}
.hm-ico { width: 22px; height: 22px; object-fit: contain; filter: drop-shadow(0 1px 1px rgba(0,0,0,.5)); }
.hm-lbl { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.hm-lbl small { color: var(--hm-mute); font-size: 11.5px; margin-left: 6px; }
.hm-hint { color: var(--hm-mute); font-size: 11.5px; }
.hm-item:hover:not([disabled]), .hm-item.hm-kbd, .hm-group.open > .hm-item { background: var(--hm-wash); }
.hm-item.hm-kbd { box-shadow: 0 0 0 1.5px var(--hm-line) inset; }
.hm-item[disabled] { color: var(--hm-mute); }
.hm-item[disabled] .hm-ico { opacity: .4; filter: grayscale(.8); }
.hm-item.hm-lead .hm-lbl { font-weight: 600; }
.hm-item.hm-danger:hover:not([disabled]), .hm-item.hm-danger.hm-kbd { background: rgba(239, 68, 68, .14); color: #fecaca; }
.hm-item.hm-danger.hm-kbd { box-shadow: 0 0 0 1.5px rgba(239, 68, 68, .5) inset; }
.hm-chev {
  width: 7px; height: 7px; margin-right: 4px;
  border-right: 1.6px solid var(--hm-dim); border-top: 1.6px solid var(--hm-dim);
  transform: rotate(45deg); transition: transform .12s ease;
}
.hm-group.open .hm-chev { transform: rotate(135deg) translate(-2px, 1px); }
.hm-group-body { margin: 2px 0 4px 18px; padding-left: 10px; border-left: 1px solid var(--hm-line); }
.hm-group-body .hm-item { grid-template-columns: 0 1fr auto; column-gap: 0; padding-left: 10px; }
.hm-switch {
  width: 30px; height: 17px; border-radius: 999px; position: relative;
  background: var(--hm-surface-3); border: 1px solid var(--hm-border-2);
}
.hm-switch::after {
  content: ''; position: absolute; top: 2px; left: 2px; width: 11px; height: 11px; border-radius: 3px;
  background: var(--hm-dim);
}
.hm-item[aria-checked="true"] .hm-switch { background: rgba(245, 158, 11, .28); border-color: var(--hm-line); }
.hm-item[aria-checked="true"] .hm-switch::after { transform: translateX(13px); background: var(--hm-ember); }
@media (prefers-reduced-motion: reduce) {
  .hm-panel.hm-in { animation: none; }
  .hm-chev { transition: none; }
}
/* Touch: a long-press opens this menu on a phone (Steam tiles, media tiles), and
   a finger needs ~44px rows — 32px is a mouse measurement. The panel widens with
   them so a label still fits on one line. */
@media (pointer: coarse) {
  .hm-panel { width: 302px; }
  .hm-item { min-height: 44px; font-size: 14px; }
  .hm-title { padding: 8px 9px 6px; }
  .hm-tt { font-size: 13.5px; }
}