/* The Expedition Report (app/run-report.mjs): the window after a map. The kit's ornate window, tabs and stat rows;
   bars use the kit's own strips. */
.run-report { pointer-events: auto; position: absolute; inset: 0; z-index: 46; display: grid; place-items: center; background: #050403b0; padding: 18px; }
.run-report[hidden] { display: none; }
.run-report > .wnd { width: min(1240px, calc((100vw - 36px) / var(--ui-scale, 1))); max-height: calc((100dvh - 36px) / var(--ui-scale, 1)); display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto; gap: 14px; min-width: 0; }
.run-report .rr-body { overflow-y: auto; overscroll-behavior: contain; display: grid; gap: 14px; align-content: start; padding: 2px 4px 2px 0; min-height: 0; }
.run-report .rr-headrow { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px 18px; align-items: center; padding-top: 6px; }
.rr-portrait { position: relative; width: 64px; height: 64px; display: grid; place-items: center; border: 12px solid transparent; border-image: url('/activity/assets/kit/d/slots/slotd2.png') 6 fill / 12px stretch; image-rendering: pixelated; }
.rr-portrait .rr-class { width: 40px; height: 40px; }
.rr-portrait .rr-hero { width: 40px; height: 50px; object-fit: contain; }
.rr-portrait .rr-class-badge { position: absolute; width: 20px; height: 20px; right: -6px; bottom: -6px; }
.rr-title .rr-state { font: 400 13px/1 var(--f-title); letter-spacing: .16em; text-transform: uppercase; color: var(--good); }
.rr-title.fallen .rr-state { color: var(--bad); }
.rr-title h2 { margin: 6px 0 3px; font: 400 32px/1 var(--f-title); color: var(--gold-hi); text-shadow: 0 3px 0 #000; }
.rr-title p { margin: 0; color: var(--parch-dim); }
.rr-chips { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.rr-chip { display: grid; gap: 2px; padding: 6px 10px; min-width: 76px; }
.rr-chip small { font: 400 11px/1 var(--f-ui); font-variant: small-caps; letter-spacing: .1em; color: var(--parch-faint); }
.rr-chip b { font: 400 15px/1.1 var(--f-ui); color: #fff; font-variant-numeric: tabular-nums; }
.rr-chip.good b { color: var(--good); } .rr-chip.bad b { color: var(--bad); }
.run-report .rr-tabs { justify-content: flex-start; flex-wrap: wrap; }
.rr-foot { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; border-top: 1px solid #2c241a; padding-top: 10px; }
.rr-foot .rr-hint { color: var(--parch-faint); font-size: 13.5px; }

.rr-grid { display: grid; gap: 14px; min-width: 0; align-content: start; }
.rr-g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.rr-g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.rr-gmain { grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); }
.rr-summary { grid-template-columns: minmax(0, 3fr) minmax(240px, 1fr); }
.rr-card { padding: 12px 14px 14px; display: grid; gap: 10px; align-content: start; min-width: 0; }
.rr-card[data-rr-go] { cursor: pointer; }
.rr-card[data-rr-go]:hover { border-color: var(--gold-lo); }
.rr-card .rule { margin: 0; }
.rr-card .rule small { font-variant: normal; letter-spacing: 0; color: var(--parch-faint); font-size: 13px; }
.rr-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 4px 10px; }
.rr-stats .stat + .stat { margin-top: 0; }
.run-report .stat b.up { color: var(--good); } .run-report .stat b.down { color: var(--bad); }
.rr-note { margin: 0; color: var(--parch-faint); font-size: 13.5px; }
.rr-empty { margin: 0; color: var(--parch-dim); font-style: italic; }
.rr-saved { color: var(--good); }

.rr-rows { display: grid; gap: 8px; }
.rr-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 3px 10px; align-items: center; }
.rr-row.noicon { grid-template-columns: minmax(0, 1fr) auto; }
.rr-row .rr-meter { grid-column: 2 / -1; }
.rr-row.noicon .rr-meter { grid-column: 1 / -1; }
.rr-lbl { min-width: 0; overflow-wrap: anywhere; line-height: 1.25; color: var(--parch); }
.rr-lbl small, .rr-v small, .rr-who small { display: block; color: var(--parch-faint); font-size: 12.5px; }
.rr-v { text-align: right; white-space: nowrap; color: #fff; font-variant-numeric: tabular-nums; }
.rr-v.up { color: var(--good); }
.rr-ico { width: 26px; height: 26px; image-rendering: pixelated; flex: none; }
.rr-ico.sm { width: 20px; height: 20px; }
.rr-noart { display: inline-block; width: 26px; height: 26px; }
.rr-portrait-sm { width: 34px; height: 34px; display: grid; place-items: end center; overflow: hidden; flex: none; }
.rr-portrait-sm img { max-width: 34px; max-height: 34px; image-rendering: pixelated; }
.rr-meter { display: block; height: 8px; position: relative; background: #050403; box-shadow: inset 0 0 0 1px #000; border: 1px solid #2c241a; min-width: 40px; }
.rr-meter > span { position: absolute; inset: 0 auto 0 0; background: url('/activity/assets/kit/d/bars/goldbar.png') 0 0 / 100% 100%; image-rendering: pixelated; }
.rr-meter.red > span { background-image: url('/activity/assets/kit/d/bars/redbar.png'); }
.rr-meter.green > span { background-image: url('/activity/assets/kit/d/bars/greenbar.png'); }
.rr-meter.blue > span { background-image: url('/activity/assets/kit/d/bars/bluebar.png'); }
.rr-meter.el > span { background: var(--el, var(--gold)); }
.rr-meter.physical { --el: #cbb895; } .rr-meter.fire { --el: #ff7a52; } .rr-meter.cold { --el: #6fb6ff; } .rr-meter.lightning { --el: #ffe06b; } .rr-meter.entropy { --el: #b57bff; }

.rr-scroll { overflow-x: auto; }
.rr-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.rr-table th { text-align: right; font: 400 12px/1.2 var(--f-ui); font-variant: small-caps; letter-spacing: .1em; color: var(--parch-faint); padding: 6px 10px; border-bottom: 1px solid #3a2f22; white-space: nowrap; }
.rr-table td { text-align: right; padding: 6px 10px; border-bottom: 1px solid rgba(58, 47, 34, .55); white-space: nowrap; color: #fff; font-variant-numeric: tabular-nums; }
.rr-table th:first-child, .rr-table td:first-child { text-align: left; white-space: normal; min-width: 200px; }
.rr-table tr.parent { cursor: pointer; }
.rr-table tr.parent:hover td { background: rgba(210, 169, 93, .05); }
.rr-table tr.child td { color: var(--parch-dim); font-size: 13.5px; background: rgba(0, 0, 0, .3); }
.rr-table tr.child td:first-child { padding-left: 46px; }
.rr-table tr.total td { color: var(--gold-hi); border-top: 1px solid var(--gold-lo); }
.rr-who { display: flex; align-items: center; gap: 8px; }
.rr-caret { display: inline-block; width: 12px; color: var(--gold-lo); transition: transform .15s; }
tr.open .rr-caret { transform: rotate(90deg); }
.rr-share { display: inline-grid; grid-template-columns: 70px 46px; gap: 8px; align-items: center; }
.rr-tag { display: inline-block; font: 400 10.5px/1.5 var(--f-ui); letter-spacing: .08em; text-transform: uppercase; padding: 0 5px; border: 1px solid currentColor; vertical-align: 1px; color: var(--parch-dim); }
.rr-tag.rune { color: var(--magic); } .rr-tag.item { color: var(--r-unique); } .rr-tag.ailment { color: #b57bff; }
.run-report .rr-seg { justify-content: flex-start; }

.rr-drops { display: grid; gap: 6px; }
.rr-drop { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: center; color: var(--rc); font-variant: small-caps; }
.rr-drop .icon { width: 32px; height: 32px; }
.rr-drop span small { display: block; font-variant: normal; color: var(--parch-faint); font-size: 12px; }
.rr-drop > small { color: var(--parch-faint); font-variant: normal; white-space: nowrap; }
.rr-drop > small.warn { color: var(--warn, #e3a14a); } .rr-drop > small.bad { color: var(--bad); }

.rr-chart svg { display: block; width: 100%; height: 210px; }
.rr-chart text { font: 12px var(--f-ui); fill: var(--parch-faint); }
.rr-chart text.life { fill: #c8443a; }
.rr-chart .grid { stroke: #2c241a; stroke-width: 1; }
.rr-chart rect.dealt { fill: rgba(210, 169, 93, .55); }
.rr-chart rect.taken { fill: rgba(184, 53, 46, .6); }
.rr-chart polyline.life { fill: none; stroke: #c8443a; stroke-width: 2.2; vector-effect: non-scaling-stroke; }
.rr-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 13px; color: var(--parch-dim); }
.rr-legend i { display: inline-block; width: 10px; height: 10px; margin-right: 6px; vertical-align: -1px; }
.rr-legend i.dealt { background: rgba(210, 169, 93, .7); } .rr-legend i.taken { background: rgba(184, 53, 46, .8); } .rr-legend i.life { height: 2px; vertical-align: 3px; background: #c8443a; }
.rr-legend i.green { background: var(--good); border-radius: 50%; }
.rr-chart .marker { fill: var(--good); }
.rr-chart .marker.elite { fill: var(--gold-hi); }
.rr-chart .marker.close { fill: #e3a14a; }
.rr-chart .marker.death { fill: var(--bad); }
.rr-finds, .rr-checks { display: grid; gap: 8px; }
.rr-find, .rr-check { --c: var(--magic); border-left: 3px solid var(--c); }
.rr-find.bad, .rr-check.bad { --c: var(--bad); }
.rr-find.warn, .rr-check.warn { --c: #e3a14a; }
.rr-find { display: grid; grid-template-columns: auto minmax(0,1fr) auto; gap: 12px; align-items: center; padding: 10px 12px; }
.rr-find p { margin: 0; color: var(--parch-dim); }
.rr-find b { color: #fff; font-weight: 400; }
.rr-sev { font: 400 11px/1 var(--f-title); letter-spacing: .12em; text-transform: uppercase; color: var(--c); min-width: 62px; }
.rr-check { display: grid; grid-template-columns: auto minmax(0,1fr); gap: 14px; padding: 14px; }
.rr-check-n { font: 400 22px/1 var(--f-title); color: var(--c); }
.rr-check h4, .rr-potion h4, .rr-skill h4, .rr-gear-item h4 { margin: 0 0 4px; font: 400 17px/1.25 var(--f-ui); color: #fff; }
.rr-check p { margin: 0; color: var(--parch-dim); }
.rr-evidence { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 8px; font-size: 13px; color: var(--parch-faint); }
.rr-impact { display: inline-block; margin-top: 8px; color: var(--c); }
.rr-acts { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.rr-check .rr-acts { margin-top: 10px; }
.rr-potion { padding: 12px; }
.rr-loadout { display: grid; grid-template-columns: repeat(auto-fit,minmax(250px,1fr)); gap: 12px; }
.rr-skill, .rr-gear-item { display: grid; grid-template-columns: auto minmax(0,1fr); gap: 12px; padding: 12px; align-items: start; }
.rr-skill > .rr-ico { width: 48px; height: 48px; }
.rr-row > .rr-ico, .rr-skill > .rr-ico { border: 4px solid transparent; border-image: url('/activity/assets/kit/d/slots/slotd2.png') 6 fill / 4px stretch; padding: 3px; object-fit: contain; }
.rr-gear { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
.rr-skill small, .rr-gear-item small { color: var(--parch-faint); }
.rr-killbox { display: flex; align-items: center; gap: 16px; padding: 14px; border: 1px solid #7d302b; background: #35181466; }
.rr-killbox b { color: var(--bad); font-size: 18px; font-weight: 400; }
.rr-killbox p { margin: 4px 0 0; color: var(--parch-dim); }
.rr-table tr.heal td { color: var(--good); }
.rr-table tr.kill td { color: var(--bad); background: #35181466; }
.rr-table td small { display: block; color: var(--parch-faint); }
.rr-recap-chart svg { height: 160px; }
.rr-history svg { height: 140px; }
#report-reopen { position: absolute; top: 20px; left: 50%; transform: translateX(-50%); z-index: 48; pointer-events: auto; }
.run-report :focus-visible { outline: 2px solid var(--gold-hi); outline-offset: 2px; }
.run-report .rr-tabs { gap: 4px; }
.run-report .rr-tabs .tab { padding-inline: 12px; }
.rr-effect-list { display: grid; gap: 9px; }
.rr-effect { min-width: 0; padding: 10px 12px; }
.rr-effect > summary { cursor: pointer; display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 5px 16px; list-style: none; align-items: center; }
.rr-effect > summary::-webkit-details-marker { display: none; }
.rr-effect > summary .rr-who::before { content: '▸'; color: var(--gold-lo); width: 12px; flex: none; }
.rr-effect[open] > summary .rr-who::before { content: '▾'; }
.rr-effect > summary .rr-meter { grid-column: 1 / -1; }
.rr-effect.idle { opacity: .75; }
.rr-effect-body { display: grid; gap: 10px; border-top: 1px solid #3a2f22; margin-top: 10px; padding-top: 12px; }
.rr-effect-body h4, .rr-source-evidence h4, .rr-attribute h4, .rr-socket h4, .rr-set-bonuses h4 { margin: 0 0 6px; color: var(--gold-hi); font-size: 15px; font-weight: 400; }
.rr-effect .rr-who > span { min-width: 0; overflow-wrap: anywhere; }
.rr-tag.measured { color: var(--good); }
.rr-tag.est { color: #d2b780; }
.rr-tag.passive, .rr-tag.set { color: var(--r-set); }
.rr-source-evidence { display: grid; gap: 8px; margin-top: 9px; }
.rr-source-evidence > div { padding: 8px 0 2px; border-top: 1px solid #2c241a; }
.rr-source-evidence .rr-tag { margin-bottom: 5px; }
.rr-rune { display: grid; grid-template-columns: auto minmax(0,1fr); gap: 9px; padding-top: 10px; margin-top: 9px; border-top: 1px solid #3a2f22; }
.rr-rune h5, .rr-power h5 { font: 400 15px/1.3 var(--f-ui); color: var(--magic); margin: 0 0 5px; }
.rr-rune > .rr-ico { width: 34px; height: 34px; }
.rr-passive { display: grid; grid-template-columns: auto minmax(0,1fr); gap: 10px; padding: 10px 0; border-bottom: 1px solid #3a2f22; }
.rr-passive h4 { margin: 0 0 5px; color: #fff; font-size: 16px; font-weight: 400; }
.rr-passive > span .rr-ico { width: 34px; height: 34px; }
.rr-skill-parts, .rr-affixes { padding-top: 10px; margin-top: 10px; border-top: 1px solid #2c241a; }
.rr-skill-parts summary, .rr-affixes summary { cursor: pointer; color: var(--gold-hi); font-size: 13px; }
.rr-skill-parts .rr-rows, .rr-affixes .rr-note { margin-top: 8px; }
.rr-power { margin-top: 9px; }
.rr-attribute, .rr-socket, .rr-set-bonuses > section { padding: 10px 0; border-bottom: 1px solid #3a2f22; }
.rr-set-bonuses > .active h4 { color: var(--r-set); }
.rr-set-bonuses > .inactive { opacity: .6; }
.rr-note.up, .rr-table td.up { color: var(--good); }

@media (max-width: 900px) {
  .rr-summary, .rr-g3, .rr-g2, .rr-gmain, .rr-gear { grid-template-columns: minmax(0, 1fr); }
  .run-report .rr-headrow { grid-template-columns: auto minmax(0, 1fr); }
  .rr-chips { grid-column: 1 / -1; justify-content: flex-start; }
}
@media (max-width: 600px) {
  .run-report { padding: 8px; }
  .run-report > .wnd { width: 100%; max-height: calc((100dvh - 16px) / var(--ui-scale, 1)); border-width: 24px; border-image-width: 24px; gap: 8px; }
  .rr-find { grid-template-columns: minmax(0,1fr) auto; }
  .rr-sev { grid-column: 1 / -1; }
  .rr-foot .rr-acts { justify-content: center; width: 100%; }
  .rr-foot .btn { font-size: 12px; }
  .rr-foot .btn.gold { border-width: 0 24px; border-image-width: 0 24px; }
  .rr-title h2 { font-size: 26px; }
}
@media (prefers-reduced-motion: reduce) { .rr-caret { transition: none; } }