/* tool_happiness.css: the NPC happiness planner (/tools/happiness). Tokens and atoms from theme.css and
   base.css only (.card, .btn, .chip, .chips, .ent, .empty, .explain); no colour literals. The face is the
   game's shop happiness sprite (Images/UI/NPCHappiness, 4 frames of 24 px, Main.cs:42509). */
.hp-bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-4); }
.hp-bar .hp-summary { flex: 1 1 100%; margin: 0; }
.hp-actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.hp-field { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); }
.hp-field select { max-width: 100%; min-height: var(--tap); }
.hp-check { display: inline-flex; align-items: center; gap: var(--sp-2); min-height: var(--tap); }
.hp-status { color: var(--c-ink-soft); font-size: var(--fs-s); }
.hp-groups { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-3); }
.hp-ghead { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-2); }
.hp-ghead h2 { margin: 0; }
.hp-zone { margin: var(--sp-2) 0 var(--sp-3); }
.hp-zone .chips { margin: var(--sp-2) 0; }
.hp-now { margin: 0 0 var(--sp-2); }
.hp-npcs { list-style: none; margin: 0 0 var(--sp-3); padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-2); }
.hp-npc { padding: var(--sp-2) var(--sp-3); border-bottom: 1px solid var(--c-line); min-width: 0; }
.hp-npc[draggable="true"] { cursor: grab; }
.hp-npc-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-2); }
.hp-ctl { display: inline-flex; flex-wrap: wrap; gap: var(--sp-2); }
.hp-ctl select { min-height: var(--tap); max-width: 100%; }
.hp-score { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); margin: var(--sp-2) 0; }
.hp-face { display: inline-block; width: 24px; height: 24px; flex: 0 0 24px; background-image: var(--hp-faces);
  background-repeat: no-repeat; image-rendering: pixelated; }
.hp-face[data-f="0"] { background-position: 0 0; }
.hp-face[data-f="1"] { background-position: -24px 0; }
.hp-face[data-f="2"] { background-position: -48px 0; }
.hp-face[data-f="3"] { background-position: -72px 0; }
.hp-fac { font-size: var(--fs-2); font-variant-numeric: tabular-nums; }
.hp-raw, .hp-note, .hp-mult { color: var(--c-ink-soft); font-size: var(--fs-s); }
.hp-ll { color: var(--c-accent); font-size: var(--fs-s); }
.hp-lines { margin: 0 0 var(--sp-2); padding-left: var(--sp-4); }
.hp-lines li { margin: 0 0 var(--sp-1); overflow-wrap: anywhere; }
.hp-lines q { quotes: "\201C" "\201D"; }
.hp-sub { margin: var(--sp-1) 0 0; padding-left: var(--sp-4); }
.hp-note { margin: 0; }
.hp-add { margin: 0 0 var(--sp-2); }
.hp-pylon { margin: 0; overflow-wrap: anywhere; }
.hp-plan .hp-planlist { padding-left: var(--sp-4); }
.hp-plan .hp-planlist li { margin: 0 0 var(--sp-2); overflow-wrap: anywhere; }
.hp-suggest:empty { display: none; }
.hp-explain ol, .hp-explain ul { padding-left: var(--sp-4); }
.hp-explain li { margin: 0 0 var(--sp-2); }