/* Survival needs: words in the story heading, "How you are" in the Pack tab, and the story lines
   told when a need gets worse. Words only; never numbers or bars. */

.story-head .here-needs {
  display: flex; gap: 0.4rem; flex-wrap: wrap; justify-content: flex-end;
  margin-left: auto; min-width: 0;
}
.story-head .here-needs:empty { display: none; }
.story-head .here-time { margin-left: 0.2rem; }
.need-chip {
  padding: 0.08rem 0.45rem; border: 1px solid rgba(199, 154, 91, 0.45); border-radius: var(--radius);
  color: var(--warn); letter-spacing: 0.14em; white-space: nowrap; cursor: help;
}
.need-chip.is-severe { border-color: rgba(192, 100, 90, 0.6); color: var(--danger); }
/* Light in dark places (js/core/light.js): shown only in or beside a dark place. */
.need-chip.need-light { border-color: var(--line); color: var(--accent-strong); letter-spacing: 0.06em; }
.need-chip.need-light.is-severe { border-color: rgba(192, 100, 90, 0.6); color: var(--danger); }

/* Companions walking with you (js/core/companions.js). */
.need-chip.need-companion { border-color: var(--line); color: var(--text); letter-spacing: 0.06em; }

/* A wait the protagonist knows the length of (js/core/countdowns.js): "The Wen: 3 days". */
.need-chip.need-countdown { border-color: var(--line); color: var(--accent-strong); letter-spacing: 0.06em; }

/* A choice's picture (js/core/travel.js `icon`, drawn by sprites.js choiceIconHTML() at 2x a 16 px
   grid): the food you would eat, the waterskin, what a search might find, crossed swords for a fight.
   A fixed-width slot keeps the labels lined up whatever the picture's width. */
.choice .choice-icon {
  flex: 0 0 auto; min-width: 32px; align-self: center; display: flex; justify-content: center;
  margin: -0.2rem 0;
}
.choice:disabled .choice-icon { opacity: 0.45; }
/* The crossed swords beside the first line of a passage where strangers are met, or a meeting turns
   hostile (the engine's `badge: 'danger'`). */
.entry.has-badge .log-badge { float: left; margin: 0.1rem 0.75rem 0.2rem 0; line-height: 0; }
.entry.has-badge::after { content: ''; display: block; clear: both; }

/* Tags on a choice (what is left, how fresh): pills like the need chips, green for plenty through
   to red for little or going off. */
.choice-tags { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 0.35rem; }
.choice-tag {
  font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase; line-height: 1.5;
  padding: 0.05rem 0.45rem; border: 1px solid; border-radius: var(--radius); white-space: nowrap;
}
.choice-tag.tone-good { color: #8cc084; border-color: rgba(140, 192, 132, 0.5); }
.choice-tag.tone-ok { color: #b8c46e; border-color: rgba(184, 196, 110, 0.5); }
.choice-tag.tone-mid { color: var(--warn); border-color: rgba(199, 154, 91, 0.5); }
.choice-tag.tone-low { color: var(--danger); border-color: rgba(192, 100, 90, 0.6); }

/* A choice that needs a second thought (the last light, too little light for the dark ahead). */
.choice-confirm .confirm-text { margin: 0.2rem 0 0.4rem; color: var(--text); }
.choice-confirm .confirm-ask { margin: 0 0 0.6rem; color: var(--warn); font-style: italic; }

.log-need { font-style: italic; color: var(--warn); }

/* Sticky (Jake, 2026-09-28): "How you are" stays pinned at the top of the pack pane while the rest of
   it scrolls beneath, inside the pack's own scroll container (.side-page[data-page="pack"]). top
   matches that container's inline padding so it sits flush against the top edge with no gap, the same
   trick .journal-tools uses; an opaque background stops scrolled content showing through, and a
   hairline edge marks it off from what scrolls under it. Works the same in one column and two, in the
   stacked side panel, one-view-at-a-time tabs, and the phone pack tab, since all of those scroll the
   same element. */
.pack-state {
  position: sticky; top: -1rem; z-index: 2;
  margin: 0 0 1rem; padding: 0 0 0.6rem;
  background: var(--bg-raised);
  border-bottom: 1px solid var(--line);
}
.pack-state h2 { margin-top: 0; }
.need-list { list-style: none; margin: 0; padding: 0; }
.need-list li {
  display: flex; gap: 0.75rem; align-items: baseline; flex-wrap: wrap;
  padding: 0.35rem 0; border-bottom: 1px solid var(--line);
}
.need-list .need-word {
  font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--warn); min-width: 6.5rem;
}
.need-list .is-severe .need-word { color: var(--danger); }
.need-list .need-line { flex: 1; min-width: 10rem; color: var(--text); }
.pack-detail .draughts { margin: 0.3rem 0; color: var(--accent-strong); }
.pack-detail .contents { margin: 0.3rem 0; color: var(--muted); }

/* Food that has gone bad: still carried, still weighed. */
.pack-spoiled .cname { color: var(--muted); }
.pack-item.is-spoiled { opacity: 0.55; filter: sepia(0.6); }

@media (max-width: 640px) {
  .story-head { flex-wrap: wrap; row-gap: 0.3rem; }
  .story-head .here-needs { order: 3; flex-basis: 100%; justify-content: flex-start; }
}