/* ─── Survivability readout (results area) ───────────────────────────────────
   Swaps with the attack table in the damage section. All text #fff, >=1rem per
   project style rules; colour is used only on non-text accents. */

/* Desktop: lay the damage section out as [vertical tab rail | view], with the
   rail flush against the left edge (no section left padding). */
@media (min-width: 769px) {
  .damage-section { flex-direction: row; align-items: stretch; column-gap: 14px; padding-left: 0; }
  #attack-section-body,
  #combo-section-body,
  #survivability-section-body { flex: 1 1 auto; min-width: 0; }
}

/* View toggle: vertical side-rail tabs, text upright (top-to-bottom). */
.damage-view-toggle {
  display: flex;
  flex-direction: column;
  flex: 0 0 auto;
  align-self: flex-start;
  border: 1px solid var(--border);
  border-left: none;
  border-radius: 0;
  overflow: hidden;
  margin: 0;
}
.damage-view-toggle button {
  background: var(--surface2);
  color: #fff;
  border: none;
  border-top: 1px solid var(--border);
  padding: 16px 12px;
  font-size: 1rem;
  font-family: inherit;
  font-weight: 600;
  letter-spacing: 1px;
  cursor: pointer;
  /* vertical-rl sizes the cell tall+narrow; rotate(180deg) flips the glyphs so the
     baseline (bottom of text) sits on the RIGHT -> read with a slight right head-tilt */
  writing-mode: vertical-rl;
  transform: rotate(180deg);
}
.damage-view-toggle button:first-child { border-top: none; }
.damage-view-toggle button.on { background: var(--gold-dim); color: #fff; }
.damage-view-toggle button:hover:not(.on) { background: var(--surface3); }

#survivability-section-body {
  flex: 1;
  min-height: 0;
  overflow: auto;
}

#survivability-readout {
  background: var(--surface);
  padding: 14px 16px 0;
  color: #fff;
  font-size: 1rem;
  line-height: 1.35;
  height: 100%;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}
.surv-empty { color: #fff; font-size: 1.05rem; padding: 8px 2px; }

/* Read-only difficulty (pulled from the Difficulty tab) */
.surv-diff-readout {
  font-size: 1.05rem;
  font-weight: 700;
  color: #fff;
  padding: 6px 0;
}

/* Control bar: difficulty + incoming type + HP slider, one row */
.surv-controlbar {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  align-items: flex-end;
  margin-bottom: 14px;
}
.surv-ctrl {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.surv-ctrl-hp { flex: 1 1 240px; min-width: 200px; }

/* Three-column dashboard row (pools / EHP / DR) */
.surv-cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 16px;
  margin-bottom: 12px;
}
.surv-cols-2 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.surv-cols-2:empty { display: none; }
.surv-col { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.surv-col-label {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  font-size: 1rem;
  font-weight: 700;
  color: #fff;
  padding-bottom: 5px;
  border-bottom: 1px solid var(--border);
}
.surv-ctrl-label {
  font-size: 1rem;
  color: #fff;
  font-weight: 600;
}
.surv-select {
  background: var(--surface2);
  color: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 7px 10px;
  font-size: 1rem;
  font-family: inherit;
  cursor: pointer;
  min-width: 150px;
}
.surv-select:focus { outline: none; border-color: var(--gold); }

/* Segmented toggle (incoming damage type) */
.surv-seg {
  display: inline-flex;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
.surv-seg button {
  background: var(--surface2);
  color: #fff;
  border: none;
  padding: 7px 14px;
  font-size: 1rem;
  font-family: inherit;
  font-weight: 600;
  cursor: pointer;
}
.surv-seg button + button { border-left: 1px solid var(--border); }
.surv-seg button.on { background: var(--blue-dim); color: #fff; }

/* HP slider */
.surv-hp-ctrl {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 14px;
}
.surv-hp-val { color: #fff; font-weight: 800; }

/* In-game-style health bar slider (replaces the plain gradient range).
   Layer order back->front: red/white fill -> black bulb -> red rune -> frame -> marker -> input.
   Geometry is the locked spec; aspect-ratio is fixed so the 56.5° tip taper is a constant clip. */
.surv-hpbar {
  position: relative;
  width: 100%;
  max-width: 416px;          /* native frame width; never upscales (stays crisp) */
  aspect-ratio: 416 / 72;
  margin: 0 auto;
}
.surv-hpbar > * { position: absolute; }
.surv-hp-fill {
  z-index: 1;
  left: 15.1%; right: 1.9%; top: 41%; bottom: 41%;
  clip-path: polygon(0 0, 97.16% 0, 100% 50%, 97.16% 100%, 0 100%);  /* 56.5° tip */
}
.surv-hp-bulb {
  z-index: 1;
  height: 87%; aspect-ratio: 1;
  left: 8.5%; top: 50%;
  transform: translate(-50%, -50%);
  background: #0a0a0a;       /* shows through the rune's glyph cutout = black glyph */
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}
.surv-hp-rune {
  z-index: 2;
  height: 76.5%; aspect-ratio: 1;
  left: 8.7%; top: 50.2%;
  transform: translate(-50%, -50%);
  background: #d8392b;       /* red body via mask; transparent glyph reveals the black bulb */
  -webkit-mask: url(../assets/health-rune.png) center / contain no-repeat;
  mask: url(../assets/health-rune.png) center / contain no-repeat;
}
.surv-hp-frame {
  inset: 0; width: 100%; height: 100%;
  z-index: 3; pointer-events: none;
}
.surv-hp-marker {
  z-index: 7;
  width: 0; height: 0;
  border-left: 11px solid transparent;
  border-right: 11px solid transparent;
  border-top: 17px solid #fff;           /* points DOWN; sizes set responsively in JS */
  filter: drop-shadow(0 -1px 1px #000);
  transform: translateX(-50%);
  pointer-events: auto; cursor: pointer; /* the knob is its own grab target (overhang included) */
}
/* transparent track hit-area over the channel — the click/drag + cursor target for the custom slider */
.surv-hp-hit { left: 15.1%; right: 1.9%; top: 0; bottom: 0; z-index: 6; cursor: pointer; }
.surv-hp-input {
  -webkit-appearance: none; appearance: none;
  position: absolute;
  left: 15.1%; right: 1.9%; top: 0; bottom: 0;
  width: auto; height: auto;
  margin: 0; padding: 0; border: 0; background: transparent;
  opacity: 0; z-index: 5;
  pointer-events: none;                  /* keyboard-only; pointer handled by the custom slider */
}
/* zero-width invisible thumb -> value maps across the entire track, edge to edge */
.surv-hp-input::-webkit-slider-runnable-track { height: 100%; }
.surv-hp-input::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 1px; height: 100%; background: transparent; border: 0; }
.surv-hp-input::-moz-range-track { height: 100%; }
.surv-hp-input::-moz-range-thumb { width: 1px; height: 100%; background: transparent; border: 0; }

/* Health + armour pools */
.surv-pools {
  display: flex;
  flex-direction: column;
  gap: 9px;
  margin-bottom: 12px;
}
.surv-pool {
  display: flex;
  align-items: center;
  gap: 10px;
}
.surv-pool-label {
  font-size: 1rem;
  font-weight: 600;
  color: #fff;
  min-width: 64px;
}
.surv-pool-val { font-size: 1.05rem; font-weight: 700; color: #fff; }
.surv-hp-badge {
  font-size: .95rem;
  font-weight: 700;
  color: #fff;
  background: var(--green);
  border-radius: 4px;
  padding: 1px 7px;
}
.surv-armor-bars { display: inline-flex; gap: 3px; vertical-align: middle; }
.surv-armor-seg { width: 22px; height: 13px; border-radius: 2px; box-sizing: border-box; }
.surv-armor-seg.seg-white       { background: #fff; border: 1px solid #fff; }
.surv-armor-seg.seg-silver      { background: #c2c2cc; border: 1px solid #c2c2cc; }
.surv-armor-seg.seg-blue        { background: var(--blue); border: 1px solid var(--blue); }
.surv-armor-seg.seg-ghost-white { background: transparent; border: 1px dashed rgba(255,255,255,0.55); }
.surv-armor-seg.seg-ghost-silver{ background: transparent; border: 1px dashed rgba(194,194,204,0.6); }
.surv-armor-seg.seg-ghost-blue  { background: transparent; border: 1px dashed var(--blue-dim); }
/* Smaller bars inside the Health & armour table, inline next to "Armour" */
.surv-eh-armorbars { margin-left: 7px; }
.surv-eh-armorbars .surv-armor-seg { width: 15px; height: 9px; }
.surv-bonus-toggle {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 1rem;
  color: #fff;
  cursor: pointer;
  margin-top: 2px;
}
.surv-bonus-toggle { background: none; border: none; padding: 0; font-family: inherit; text-align: left; }
/* Icon recoloured via mask: white = disabled, blue = enabled. */
.surv-boost-icon {
  display: inline-block; width: 24px; height: 24px;
  background-color: #fff;
  -webkit-mask: url(../assets/armor-boost.png) center / contain no-repeat;
  mask: url(../assets/armor-boost.png) center / contain no-repeat;
  transition: background-color 0.12s;
}
.surv-bonus-toggle.on .surv-boost-icon { background-color: var(--blue); }

/* EHP breakdown */
.surv-ehp {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 10px 12px;
  margin-bottom: 12px;
}
.surv-ehp-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 1rem;
  color: #fff;
  padding: 3px 0;
}
.surv-ehp-row span { color: #fff; font-weight: 600; }
.surv-ehp-row b { color: #fff; font-weight: 700; font-size: 1.05rem; }
.surv-ehp-total {
  border-top: 1px solid var(--border);
  margin-top: 4px;
  padding-top: 7px;
}
.surv-ehp-total span { font-weight: 700; }
.surv-ehp-total b { font-size: 1.25rem; font-weight: 800; color: #fff; }

/* Combined Health & armour table: name | pool | effective */
.surv-eh {
  display: grid;
  grid-template-columns: 1fr 88px 88px;
  column-gap: 14px;
  row-gap: 7px;
  align-items: center;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 10px 13px;
}
.surv-eh-row { display: contents; }
/* Uniform text: same size, no bolding or size emphasis anywhere in the table. */
.surv-eh-head > span { font-size: 1.2rem; font-weight: 400; color: #fff; }
.surv-eh-head > span:nth-child(2),
.surv-eh-head > span:nth-child(3) { text-align: right; }
.surv-eh-name { font-size: 1.2rem; font-weight: 400; color: #fff; }
.surv-eh-pool { font-size: 1.2rem; font-weight: 400; color: #fff; text-align: right; }
.surv-eh-eff { font-size: 1.2rem; font-weight: 400; color: #fff; text-align: right; }
.surv-eh-total > * { border-top: 1px solid var(--border); padding-top: 7px; margin-top: 1px; }
.surv-eh-total .surv-eh-pool { font-weight: 400; }
.surv-eh-total .surv-eh-eff { font-size: 1.2rem; font-weight: 400; }

/* Blocks (DR curve, scenarios, applied perks) */
.surv-block { margin-bottom: 12px; }
.surv-block-label {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  font-size: 1rem;
  font-weight: 600;
  color: #fff;
  margin-bottom: 6px;
}
.surv-dr-now { font-weight: 400; color: #fff; }

.surv-curve-wrap {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 4px 6px;
  height: 42px;
}
.surv-curve { width: 100%; height: 100%; display: block; }
.surv-curve-line { fill: none; stroke: var(--gold); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.surv-curve-grid { stroke: var(--border); stroke-width: 1; vector-effect: non-scaling-stroke; }
.surv-curve-marker { stroke: #fff; stroke-width: 1; vector-effect: non-scaling-stroke; opacity: .7; }
.surv-curve-dot { fill: #fff; }
.surv-dr-note { font-size: 1rem; color: #fff; margin-top: 5px; }

/* Situational reduction toggles */
.surv-scenarios { display: flex; flex-wrap: wrap; gap: 7px; }
.surv-scenario {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: #fff;
  font-size: 1rem;
  font-family: inherit;
  padding: 6px 11px;
  cursor: pointer;
}
.surv-scenario-dot {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  border: 2px solid #fff;
  background: transparent;
}
.surv-scenario.on { border-color: var(--gold); background: var(--surface3); }
.surv-scenario.on .surv-scenario-dot { border-color: var(--gold); background: var(--gold); }

/* Recognised perks list */
.surv-applied { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 5px; }
.surv-applied li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  font-size: 1rem;
  color: #fff;
  padding-left: 9px;
  border-left: 3px solid var(--border);
}
.surv-applied-name { font-weight: 700; color: #fff; }
.surv-applied-eff { color: #fff; text-align: right; }
.surv-applied-active { border-left-color: var(--gold); }
.surv-applied-idle { border-left-color: var(--border); }

.surv-foot {
  font-size: 1rem;
  color: #fff;
  border-top: 1px solid var(--border);
  padding-top: 9px;
  margin-top: 2px;
}

/* Class-tab base stats (beside the class re-selector dropdown), side by side */
#class-panel-body { display: flex; gap: 32px; align-items: flex-start; flex-wrap: wrap; }
#class-panel-body > .config-group { flex: 0 0 auto; }
#class-base-stats { display: flex; flex-direction: row; gap: 34px; align-items: flex-start; flex-wrap: wrap; }
#class-base-stats:empty { display: none; }
.cb-item { display: flex; flex-direction: column; gap: 5px; }
.cb-label { font-size: 1rem; font-weight: 600; color: #fff; }
.cb-info { display: inline-flex; align-items: center; vertical-align: middle; margin-left: 5px; color: #fff; cursor: help; }
.cb-info svg { display: block; }
.cb-val { font-size: 1.25rem; font-weight: 700; color: #fff; display: inline-flex; align-items: center; gap: 7px; }
.cb-badge { font-size: 1rem; font-weight: 700; color: #fff; background: var(--green); border-radius: 4px; padding: 1px 7px; }
.cb-eff { color: #fff; font-weight: 700; }
.cb-charges { color: #fff; font-size: 1rem; font-weight: 600; }
.cb-restores { flex-basis: 100%; }
.cb-restore-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 24px; }
.cb-restore-list li { font-size: 1rem; color: #fff; }

/* ── "Coming Soon" placeholder for gated (free) users ──────────────────────── */
.surv-comingsoon {
  display: flex; align-items: center; justify-content: center;
  height: 100%; min-height: 200px;
  color: #fff; font-size: 1.5rem; font-weight: 700; letter-spacing: 0.04em;
}
.cb-armour { display: inline-flex; align-items: center; gap: 9px; }

/* Health view body: table on the left, one big chart filling the rest + bottom */
.surv-main { display: flex; gap: 20px; align-items: stretch; flex-wrap: wrap; flex: 1; min-height: 0; padding-bottom: 8px; }
.surv-eh-col { flex: 0 0 340px; max-width: 360px; align-self: flex-start; }
.surv-chart-col { flex: 1 1 360px; min-width: 300px; display: flex; flex-direction: column; gap: 8px; min-height: 0; }
.surv-chart-big { position: relative; flex: 1; min-height: 180px; width: 100%; }
/* Y-axis lock — pinned at the top of the right (Effective HP) axis, over the chart. */
.surv-ylock {
  position: absolute; top: 50px; right: -16px; z-index: 5;
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; padding: 0;
  background: rgba(11,11,18,0.6); border: 1px solid var(--border); color: #fff;
  border-radius: var(--radius); cursor: pointer;
}
.surv-ylock svg { width: auto; height: 22px; display: block; }
.surv-ylock:hover { border-color: #fff; }
.surv-ylock.on { border-color: var(--blue); background: rgba(74,144,217,0.30); }

/* ── Free-form Health-tab layout (positioned assets) ──────────────────────
   Geometry (% of the 1240×600 design canvas) comes from the layout playground.
   The container is aspect-locked so the %s reproduce the arrangement at any width.
   To re-tune the layout, edit only the left/top/width/height values below. */
.surv-layout { position: relative; width: 100%; height: 100%; min-height: 340px;
  user-select: none; -webkit-user-select: none; }   /* stop slider/asset drags from highlighting the bar + labels */
.surv-pos { position: absolute; box-sizing: border-box; }
/* Final locked layout. Stacking (top -> bottom): boost > ylock > callout > toggle > bar > table > chart */
.surv-pos-chart   { left: 36.9%;  top: 2.7%;  width: 62.6%;  height: 95.0%; z-index: 1; }
.surv-pos-table   { left: 6.2%;   top: 41.2%; width: 26.4%;  height: 43.6%; z-index: 2; }
.surv-pos-boost   { left: 20.5%;  top: 16.7%; width: 17.5%;  height: 7%;    z-index: 7; display: flex; align-items: center; }
.surv-pos-bar     { left: 0%;     top: 0%;    width: 38%;    height: 23.7%; z-index: 3; }
.surv-pos-toggle  { left: 14.0%;  top: 34.2%; width: 10.8%;  height: 7%;    z-index: 4; display: flex; align-items: center; }
.surv-pos-callout { left: 5.6%;   top: 16.7%; width: 14.9%;  height: 7%;    z-index: 5; display: flex; align-items: center; }
.surv-pos-ylock   { left: 92.5%;  top: 0%;    width: 3.0%;   height: 10.6%; z-index: 6; display: flex; align-items: center; justify-content: center; }

.surv-pos-bar .surv-hpbar { max-width: none; width: 100%; margin: 0; }
.surv-pos-ylock .surv-ylock { position: static; top: auto; right: auto; width: 100%; height: 100%; }

/* Fill the Health-tab area edge-to-edge so dragged assets can reach the true edges.
   Scoped with :has() so the empty / "Coming Soon" states keep their normal padding. */
#survivability-readout:has(.surv-layout) { padding: 0; }
/* Negate the damage-section's flex gap (14px left/right) + padding (20 right, 16 bottom)
   so the positioned layout reaches the real edges of the results panel. flex:1 grows
   into the negative margins. Surv-view only (section is display:none for the attack view). */
#survivability-section-body:has(.surv-layout) { margin: 0 -34px -16px -14px; }

/* ── In-place layout editor (dev-only) ────────────────────────────────────
   "Edit layout" turns each positioned asset into a drag/resize box.            */
.surv-edit-toggle {
  position: absolute; top: 2px; right: 4px; z-index: 40;
  background: rgba(11,11,18,0.75); color: #fff; border: 1px solid var(--border);
  border-radius: var(--radius); padding: 4px 9px; font: inherit; font-size: 12px; cursor: pointer;
}
.surv-edit-toggle:hover { border-color: #fff; }
.surv-layout.surv-editing .surv-edit-toggle { background: var(--blue-dim); border-color: var(--blue); }

.surv-edit-ov { display: none; position: absolute; inset: 0; z-index: 30; cursor: grab; }
.surv-layout.surv-editing .surv-pos { outline: 1px dashed rgba(120,170,255,.55); }
.surv-layout.surv-editing .surv-edit-ov { display: block; background: rgba(74,144,217,.06); }
.surv-edit-ov:active { cursor: grabbing; }
.surv-edit-lbl {
  position: absolute; top: 0; left: 0; background: rgba(40,60,110,.9); color: #cfe2ff;
  font-size: 10px; line-height: 1; padding: 2px 4px; border-radius: 0 0 4px 0; pointer-events: none;
}
.surv-edit-rz {
  position: absolute; right: 0; bottom: 0; width: 16px; height: 16px; cursor: nwse-resize;
  background: linear-gradient(135deg, transparent 50%, rgba(120,170,255,.95) 50%);
}
.surv-pos-bar .surv-edit-rz { cursor: ew-resize; }

.surv-edit-readout {
  display: none; position: fixed; right: 12px; top: 78px; z-index: 60; max-width: 380px;
  background: #070709; border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px;
  font-family: ui-monospace, Menlo, monospace; font-size: 12px; color: #7fdca0; white-space: pre;
  user-select: text;
}
.surv-edit-readout.show { display: block; }
.surv-edit-readout button {
  margin-top: 8px; background: #1c1c2e; color: #fff; border: 1px solid #33334a;
  border-radius: 6px; padding: 4px 10px; font: inherit; font-size: 12px; cursor: pointer;
}

/* Chart hover tooltip (external HTML — survChartTooltip): default-right, edge-flip, gapped. */
.surv-chart-tip {
  position: absolute; z-index: 9999; pointer-events: none;
  opacity: 0; transition: opacity 0.12s ease;
  background: rgba(17,17,24,0.97); border: 1px solid rgba(255,255,255,0.20);
  border-radius: 7px; padding: 10px 12px; color: #fff; white-space: nowrap;
  font-size: 13px; line-height: 1.4; box-shadow: 0 6px 24px rgba(0,0,0,0.5);
}
.surv-tip-title { font-weight: 700; font-size: 13px; margin-bottom: 7px; }
.surv-tip-row { display: flex; align-items: center; gap: 8px; }
.surv-tip-row + .surv-tip-row { margin-top: 4px; }
.surv-tip-dot { width: 11px; height: 11px; border-radius: 50%; border: 2px solid #fff; box-sizing: border-box; background: transparent; flex: 0 0 auto; }

/* Charts (taller, with gridlines) */
.surv-chart-wrap {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 5px 7px;
  height: 124px;
}
.surv-grid-h { stroke: var(--border); stroke-width: 1; vector-effect: non-scaling-stroke; }

/* Conditional-modifier Attacks/Health filter — icon + dropdown (matches the
   attack-table column filter: gold funnel that fills in when a filter is active) */
.cond-mod-header { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.cond-filter-btn { background: none; border: none; cursor: pointer; padding: 2px 4px; line-height: 0; }
.cond-filter-btn .filter-icon { color: #f5c518; vertical-align: middle; }
.cond-filter-btn.has-filter .filter-icon { fill: #f5c518; }
#cond-filter-flyout {
  position: fixed;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 8px;
  z-index: 500;
  box-shadow: 0 4px 20px rgba(0,0,0,0.5);
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 150px;
}
#cond-filter-flyout[hidden] { display: none; }
.modifier-row.cond-filtered-out { display: none !important; }

/* Center the current-health label over the slider */
.surv-ctrl-hp .surv-ctrl-label { text-align: center; }

/* Desktop-only feature: hide the view toggle on mobile (attack table stays). */
@media (max-width: 768px) {
  .damage-view-toggle { display: none !important; }
  #survivability-section-body { display: none !important; }
}