#skill-window .body {
  display: block;
  overflow-y: auto;
  padding: 4px 8px;
}

.outer-skill-wrapper {
  width: 100%;
  padding: 1px 0;
}

.bar-wrapper {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto auto;
  grid-gap: 1px;
}

.skill-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  white-space: nowrap;
  font-size: 11px;
  line-height: 1.4;
  /* Hard floor between label and value — without it a long label
     ("Shielding") rendered flush against its value ("Shielding42") on
     layouts where no width tier applied (tablet report 2026-06-11). */
  gap: 8px;
}

.skill-wrapper > .skill {
  flex-shrink: 0;
}

.skill-wrapper > .skill {
  text-align: right;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.skill-wrapper > .skill .skill-bonus {
  color: #2ecc40;
  margin-left: 4px;
  font-weight: bold;
}

/* Negative skill deltas (strengthening-potion shielding penalty) */
.skill-wrapper > .skill .skill-bonus.skill-bonus-negative {
  color: #e74c3c;
}

.bar-wrapper > .bar > .value {
  background: #2ecc40;
  box-shadow: 0 0 4px rgba(46, 204, 64, 0.5);
  width: 20%;
  height: 4px;
  position: relative;
}

.bar-wrapper > .bar {
  border: 1px solid black;
  background-image: url("/png/bg2.png");
  width: 100%;
  height: 4px;
  position: relative;
  cursor: pointer;
}

.skill-tabs {
  display: flex;
  background: #2a2a2a;
  border-bottom: 1px solid #444;
  padding: 0;
}

.skill-tab {
  flex: 1;
  padding: 4px 8px;
  border: none;
  background: #2a2a2a;
  color: #888;
  font-size: 11px;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: color 0.15s, border-color 0.15s;
}

.skill-tab:hover {
  color: #ccc;
}

.skill-tab.active {
  color: #fff;
  border-bottom-color: #4a9;
}

.skill-tab-content {
  display: none;
}

.skill-tab-content.active {
  display: block;
}

/* Desktop (non-mobile-tab-panel) view: only show two tabs — Skills and
   Professions. The Info tab button is hidden and its content is merged into
   the Skills view so a sidebar sees character info + combat skills together
   like the old 2-tab layout. Professions keeps its own tab and is mutually
   exclusive with the Skills view. */
#skill-window:not(.mobile-tab-panel) .skill-tab[data-tab="info"] {
  display: none;
}

#skill-window:not(.mobile-tab-panel):has(.skill-tab[data-tab="skills"].active) .skill-tab-content[data-tab="info"] {
  display: block;
}

/* Inline progress percentage next to a training skill's value (e.g. "50 73%").
 * MOBILE ONLY — desktop users get the existing hover tooltip ("You need X%
 * to advance.") which is enough, and the inline percentage just adds noise
 * on a roomy sidebar. Mobile lacks hover, so we surface the % inline there.
 * Tiny + dim styling so it reads as supplementary info when shown.
 */
/*
 * .skill-percent is rendered inline next to every skill value but hidden by
 * default. On desktop the existing title="" hover surfaces the percentage on
 * mouseover; on mobile / tablet the click-to-show popup (window-skill.js)
 * surfaces it on tap. The inline DOM stays so refreshSkillBonuses can
 * re-read the last percentage from dataset.lastPercentage on equipment swap.
 */
.skill-percent {
  display: none;
}

/*
 * Floating tooltip popup spawned by window-skill.js on tap. Anchored
 * relative to the tapped skill row; auto-dismisses after ~2s.
 */
.skill-tap-tooltip {
  position: fixed;
  /* Must sit above #condition-bubble (z-index 10002 in mobile.css)
     so wrapped multi-line tooltips don't get covered by the bubble's
     background — was 9999 → wrapped temple blessing description got
     clipped behind the icon row. */
  z-index: 10003;
  background: rgba(0, 0, 0, 0.9);
  color: #fff;
  font-size: 12px;
  padding: 4px 8px;
  border-radius: 4px;
  pointer-events: none;
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.2);
}
/* Condition/blessing icons reuse the tap-tooltip shape but their
   description text can run 100+ chars (full-pilgrimage and temple
   blessing descriptions) — wrap instead of nowrap, cap the width,
   and shrink the font so long descriptions stay readable on small
   phones without sprawling 4-5 lines tall. */
.skill-tap-tooltip.condition-tap-tooltip {
  white-space: normal;
  max-width: 220px;
  font-size: 10.5px;
  text-align: center;
  line-height: 1.3;
}
/* Skill value cell — don't clip the appended percentage on mobile. */
@media (max-width: 768px), (max-height: 500px) {
  .outer-skill-wrapper .skill {
    white-space: nowrap;
    overflow: visible;
  }
}
body.force-mobile .outer-skill-wrapper .skill,
body.force-tablet .outer-skill-wrapper .skill {
  white-space: nowrap;
  overflow: visible;
}

/* ── Hunt Analyzer sidebar window ─────────────────────────────────── */
/* The window family's .body defaults to a centered wrapping flex ROW —
   every rule here is explicit so the rows stack as a clean column. */
/* The sidebar window body AND the mobile Stats-tab pane host the same
   rendered rows — the layout must be declared for both or the pane
   inherits the window family's centered wrapping ROW (the garbled-layout
   trap from the sidebar build, owner screenshot 2026-08-17). */
#hunt-window .body,
.skill-tab-content.hunt-panel.active {
  display: flex;
  flex-direction: column;
  /* MUST reset the family's flex-wrap:wrap. A wrapping COLUMN whose height
     is constrained — which is exactly what a resize drag does, it sets an
     inline height — spills the overflow into a SECOND COLUMN to the right
     instead of scrolling. Reported by awton 2026-08-18: "resize the window
     and it moves the text elements that are supposed to be below to the
     right side". Only this window lays its body out as a column, so only
     this window could hit it. */
  flex-wrap: nowrap;
  align-items: stretch;
  text-align: left;
  padding: 5px 7px;
  font-size: 11px;
  gap: 0;
}
.hunt-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  padding: 2px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.hunt-row-label {
  opacity: 0.6;
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  white-space: nowrap;
}
.hunt-row-value {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  text-align: right;
}
.hunt-active .hunt-row-value { color: #9fe08a; font-weight: bold; }
.hunt-paused .hunt-row-value { color: #e0c06c; font-weight: bold; }
.hunt-negative .hunt-row-value { color: #e06c6c; font-weight: bold; }
.hunt-empty { text-align: center; opacity: 0.7; padding: 10px 0; width: 100%; }
.hunt-buttons {
  display: flex;
  gap: 4px;
  width: 100%;
  margin: 7px 0 2px;
}
.hunt-btn {
  flex: 1 1 0;
  padding: 3px 0;
  font-size: 10px;
  cursor: pointer;
}
.hunt-loot-head {
  margin-top: 6px;
  font-weight: bold;
  opacity: 0.55;
  text-transform: uppercase;
  font-size: 9px;
  letter-spacing: 0.05em;
}
.hunt-loot-line {
  font-size: 10px;
  opacity: 0.85;
  padding: 1px 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.hunt-full-report { flex: none; width: 100%; margin-top: 6px; }