/* -- Hero card -- */
/* The hero as a tabletop character card: the picture, the numbers, what they
   look like now and what they are carrying, on one screen. It opens from the
   sidebar as a dialog over a lazy frame, the same way the map and the journal
   do, so every measurement here has to hold at the 34rem a reference screen
   gets inside the dialog as well as on the screen's own page. */
.hero-card {
  position: relative;
  border: 1px solid var(--border-color);
  background: var(--panel-bg);
  padding: 0.9rem;
}
/* A second rule just inside the first is what makes this read as a card rather
   than one more sidebar panel. Decoration only, so it takes no mouse events. */
.hero-card::before {
  content: "";
  position: absolute;
  inset: 4px;
  border: 1px solid color-mix(in srgb, var(--border-color) 45%, transparent);
  pointer-events: none;
}
.hero-card > * { position: relative; }

.hero-card-head { border-bottom: 1px solid var(--border-color); padding-bottom: 0.5rem; margin-bottom: 0.75rem; }
.hero-card-name { font-family: 'Cinzel', serif; font-size: 1.05rem; letter-spacing: 0.06em; color: var(--text-bright); }
.hero-card-title { font-family: 'Lora', Georgia, serif; font-size: 0.7rem; font-style: italic; color: var(--text-muted); margin-top: 0.15rem; }

.hero-card-body { display: flex; gap: 0.9rem; align-items: flex-start; }
.hero-card-figure { flex: 0 0 38%; }
/* The portrait rules size the sidebar and details copies; in the card the
   figure column is the constraint, so the centring and the cap come off. */
.hero-card-figure .hero-portrait { max-width: none; margin: 0; }
.hero-card-numbers { flex: 1; min-width: 0; }

/* The picture's own action, directly under it. What it does, what is left of
   the month's portraits and whether one is being drawn are all on hover --
   the bubble itself is defined once, in panels.css. */
.hero-card-portrait-actions { margin-top: 0.5rem; }
.hero-card-portrait-actions form { margin: 0; }
.hero-card-portrait-actions .panel-action-btn:disabled { opacity: 0.5; cursor: default; }

/* Level and experience (ApplicationHelper#hero_progress). It sits under the
   attributes, at the foot of the numbers column, with a hairline to keep it
   from reading as one more attribute. */
.hero-card-progress { margin-top: 0.7rem; border-top: 1px solid var(--border-subtle); padding-top: 0.5rem; }
.hero-card-xp-outer { height: 4px; background: var(--border-color); border-radius: 2px; margin-top: 0.35rem; }
.hero-card-xp-inner { height: 4px; background: var(--theme-accent); border-radius: 2px; }

.hero-card-attrs { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0.35rem; margin-top: 0.4rem; }
.hero-card-attr { border: 1px solid var(--border-subtle); padding: 0.3rem 0.1rem; text-align: center; }
.hero-card-attr-name { display: block; font-family: 'Cinzel', serif; font-size: 0.55rem; letter-spacing: 0.1em; color: var(--text-dim); }
.hero-card-attr-value { display: block; font-variant-numeric: tabular-nums; font-size: 0.95rem; color: var(--text-mid); }
.hero-card-attr-value.positive { color: var(--theme-accent); }
.hero-card-attr-value.negative { color: var(--color-failure-text); }
.hero-card-attr-value.zero { opacity: 0.55; }

/* The + that spends a point, only while one is waiting. Inside the box, under
   the value, so five of them fit the same grid at the dialog's narrowest. One
   at the cap stays in place, dimmed, rather than leaving a gap in the row. */
.hero-card-attr-form { margin: 0.2rem 0 0; }
.hero-card-attr-raise { display: block; width: 100%; background: transparent; border: 1px solid var(--theme-accent); color: var(--theme-accent); font-size: 0.8rem; line-height: 1; padding: 0.15rem 0; cursor: pointer; }
.hero-card-attr-raise:hover { background: color-mix(in srgb, var(--theme-accent) 18%, transparent); }
.hero-card-attr-raise:disabled { border-color: var(--border-subtle); color: var(--text-dim); opacity: 0.5; cursor: default; }
.hero-card-attr-raise:disabled:hover { background: transparent; }
.hero-card-points { font-family: 'Lora', Georgia, serif; font-size: 0.68rem; font-style: italic; color: var(--theme-accent); margin: 0.35rem 0 0; }

.hero-card-section { margin-top: 0.9rem; }
.hero-card-label { font-family: 'Cinzel', serif; font-size: 0.6rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--theme-accent); opacity: 0.8; }
.hero-card-text { font-family: 'Lora', Georgia, serif; font-size: 0.75rem; line-height: 1.55; color: var(--text-mid); margin: 0.3rem 0 0; }
.hero-card-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 0.9rem; margin-top: 0.9rem; }
.hero-card-list { list-style: none; margin: 0.3rem 0 0; padding: 0; font-size: 0.75rem; }
.hero-card-list li { padding: 0.18rem 0; color: var(--text-bright); }
.hero-card-list .hero-card-item-note { color: var(--text-dim); font-size: 0.68rem; }
.hero-card-empty { font-family: 'Lora', Georgia, serif; font-size: 0.72rem; font-style: italic; color: var(--text-dim); margin: 0.3rem 0 0; }

.hero-card-foot { display: flex; gap: 0.6rem; justify-content: space-between; border-top: 1px solid var(--border-color); margin-top: 0.9rem; padding-top: 0.5rem; font-family: 'Cinzel', serif; font-size: 0.58rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-dim); }

/* One column below the width where a 38% picture leaves the numbers unreadable
   -- roughly a phone in the dialog. */
@media (max-width: 30rem) {
  .hero-card-body { flex-direction: column; }
  .hero-card-figure { flex: none; width: 60%; max-width: 200px; margin: 0 auto; }
  /* The body's align-items: flex-start would otherwise size the column to its
     longest line, so the bars shrank or grew with the points line under the
     attributes as points were spent. */
  .hero-card-numbers { align-self: stretch; }
  .hero-card-columns { grid-template-columns: 1fr; }
}