/* Provisions belong to the traveller's folio: brass rules, warm paper, quiet ink. */
.provisions-hud { position: absolute; bottom: calc(100% + 9px); left: 13px; right: 13px; pointer-events: auto; display: grid; gap: 6px; text-shadow: none; }
.provision-receipt, .provision-timing, .active-effect, .provision-tooltip { color: var(--ink); background: var(--folio); border: 3px double #92794f88; box-shadow: 0 4px 14px #37281624; }
.provisions-hud [hidden], .provision-tooltip[hidden] { display: none; }
.provision-receipt { display: flex; align-items: center; gap: 10px; padding: 9px 12px; font-size: 13px; }
.provision-receipt .icon { width: 36px; height: 36px; }
.provision-receipt strong, .provision-receipt span { display: block; }
.provision-receipt strong { font-size: 15px; margin-bottom: 3px; }
.provision-receipt span { color: #476245; font-size: 12px; line-height: 1.45; }
.provision-receipt.is-error { border-left-color: #9a5140; color: #803c31; }
.active-effects { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; }
.desert-heat { display: grid; grid-template-columns: minmax(0, 1fr); margin-bottom: 5px; }
.active-effect { position: relative; display: flex; gap: 5px; align-items: center; padding: 8px 6px 11px; border-top: 2px solid var(--effect-color); min-width: 0; }
.active-effect > .icon { width: 32px; height: 36px; filter: drop-shadow(0 2px 1px #49301930); }
.active-effect > div { flex: 1; min-width: 0; }
.active-effect span { display: flex; justify-content: space-between; gap: 3px; font-size: 12px; }
.active-effect span b { color: var(--effect-color); }
.active-effect small { display: block; font: 10px/1.8 ui-sans-serif, sans-serif; color: #625440; font-variant-numeric: tabular-nums; }
.active-effect > i { position: absolute; bottom: 3px; left: 4px; right: 4px; height: 3px; background: #74583120; }
.active-effect i b { display: block; height: 100%; background: var(--effect-color); }
.active-effect.expiring small { color: #903e30; }
.active-effect:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.provision-timing { display: flex; align-items: center; gap: 12px; padding: 4px 10px; font: 10px/1.5 ui-sans-serif, sans-serif; letter-spacing: .5px; }
.provision-timing > i { flex: 1; height: 3px; background: #80623a30; }
.provision-timing i b { display: block; height: 100%; background: #977148; }
#hud .inventory-slot[data-consumable] { position: relative; border-bottom: 2px solid #7d8b5666; }
#hud .inventory-slot[data-consumable='drink'] { border-bottom-color: #577f8766; }
#hud .inventory-slot.consumable-cooling::after { content: attr(data-cooldown) 's'; position: absolute; inset: 0; display: grid; place-content: center; color: #f7ecd7; background: #4038278a; font: bold 15px Georgia, serif; border-radius: 2px; pointer-events: none; }
.provision-tooltip { position: fixed; z-index: 65; width: min(270px, calc(100vw - 24px)); padding: 14px; pointer-events: none; }
.provision-tooltip header { display: flex; gap: 10px; align-items: center; }
.provision-tooltip header .icon { width: 48px; height: 48px; }
.provision-tooltip header strong, .provision-tooltip header small { display: block; }
.provision-tooltip header strong { font-size: 18px; margin-top: 3px; }
.provision-tooltip header small { font: 9px ui-sans-serif, sans-serif; letter-spacing: 1.3px; color: #806b43; }
.provision-tooltip p { font-size: 12px; line-height: 1.5; color: #5c5140; margin: 10px 0; }
.provision-benefits { display: grid; gap: 6px; border-block: 1px solid #806b4340; padding: 9px 0; }
.provision-benefits b { display: flex; justify-content: space-between; color: #476245; font-size: 13px; }
.provision-benefits small { font-size: 11px; font-weight: normal; color: #625440; }
.provision-tooltip footer { font-size: 11px; color: #803c31; }
.damage-popup.healing strong { color: #d4ffb4; text-shadow: 0 2px 3px #193a1a, 0 0 12px #456e37; }
@media (max-width: 1000px) {
  #hud .chat, #hud .chronicle-tab { bottom: calc(160px + var(--provisions-height, 0px)); }
  #hud:not(.in-combat) .chat-lines, #hud:not(.in-combat) .journal-content { height: max(52px, calc(148px - var(--provisions-height, 0px))); }
}
@media (max-width: 820px) {
  .active-effect { gap: 2px; padding-inline: 4px; }
  .active-effect > .icon { width: 22px; height: 28px; }
  .active-effect span { font-size: 11px; }
  .active-effect small { font-size: 9px; }
}
@media (max-width: 600px) {
  #hud .inventory-grid { bottom: calc(156px + var(--provisions-height, 0px)); max-height: calc(100dvh - 300px - var(--provisions-height, 0px)); }
}