/* stepper.css — the Upload -> Edit -> Download workflow strip. THIS APP'S OWN UI
 * (no Battle Brothers source), like the Retinue tab: a Blood & Gold-styled
 * affordance, not a BB element, so the "cite BB" rule (BB-port CSS only) does not
 * apply — these values are bespoke.
 *
 * PLACEMENT (measured against scaffold.css + resources.css):
 *   .character-screen-container top is parchment y = 12.5rem.
 *   The resources bar (.edit-bar) is lifted to container top: -3.9rem, so it
 *   occupies parchment y = 8.6rem .. 12.0rem (height 3.4rem).
 *   => the free band is everything ABOVE the resources line: parchment 0 .. 8.6rem
 *      (screen top .. resources top), height 8.6rem.
 * The resources moved to the right margin (2026-06-17), freeing the whole top
 * strip — the (bigger) box is centered in it. The middle "Edit your…" line is the
 * page <h1>:  height 9rem, top -10.75rem => parchment 1.75 .. 10.75rem. */

.bng-stepper {
  position: absolute;
  top: -10.75rem;
  left: 0;
  right: 0;
  height: 9rem;
  z-index: 6;

  display: flex;
  align-items: stretch;             /* cols fill the height so their button-rows align at
                                       the top and their link-rows align at the bottom —
                                       the box reads as a 2-row table (user 2026-06-19) */
  justify-content: space-between;   /* spread Upload | Edit | Download across the width */
  gap: 1.5rem;
  padding: 0.6rem 2.6rem;
  box-sizing: border-box;

  /* one box around the whole flow */
  border: 0.15rem solid #6b5836;
  border-radius: 0.6rem;
  background: rgba(18, 16, 12, 0.78);
}

/* Each step is a column: the button/title on top, its small help link just beneath
   (small 0.3rem gap — user 2026-06-19, the link was too far below). The whole pair is
   vertically centred; columns share equal-height top rows so the links line up on one
   level across the columns. */
.bng-step-col { display: inline-flex; flex-direction: column; align-items: center;
                justify-content: center; gap: 0.3rem; }
/* Arrows sit BETWEEN the columns — vertically centred, not stretched. */
.bng-step-arrow { align-self: center; }

/* --- Upload + Download look like BUTTONS (clearly clickable) --------------- */
.bng-step-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  padding: 1.15rem 2.6rem;
  border-radius: 0.4rem;
  font-family: inherit;
  font-size: 2.2rem;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  text-decoration: none;
  border: 0.15rem solid #8a6f3c;
  background: #382d17;
  color: #e6d4a6;
  box-shadow: 0 0.2rem 0 #1c160b;          /* raised = reads as a button */
  transition: background 0.12s, border-color 0.12s, opacity 0.12s, transform 0.05s, box-shadow 0.05s;
}
.bng-step-btn:hover { background: #4a3b1e; border-color: #c9a24a; color: #fff4d6; }
.bng-step-btn:active { transform: translateY(0.2rem); box-shadow: none; }

/* PRIMARY = the current call-to-action (Upload when empty; Download once a save
   is loaded): bright gold with a glow so it reads as the obvious next step. */
.bng-step-btn.is-primary {
  border-color: #e0b75a;
  background: #5a4520;
  color: #ffe9b0;
  box-shadow: 0 0.2rem 0 #1c160b, 0 0 0.9rem rgba(224, 183, 90, 0.45);
}
.bng-step-btn.is-primary:hover { background: #6d5526; }

/* SECONDARY = still available but no longer the call-to-action (Upload after a
   save is loaded): grayed back, still clearly clickable. */
.bng-step-btn.is-secondary { opacity: 0.5; }
.bng-step-btn.is-secondary:hover { opacity: 0.85; }

/* DISABLED = inert (Download on the empty landing). */
.bng-step-btn.is-disabled {
  opacity: 0.3;
  cursor: not-allowed;
  pointer-events: none;
  box-shadow: none;
}

/* --- the middle step's line ("Edit your…") — a plain div, same size as the
   buttons (the page <h1> is the title above the stepper). -------------------- */
.bng-step-title {
  margin: 0;
  padding: 0;
  min-height: 4.8rem;                       /* same height as a button, so the three
                                              links below line up on one row */
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  /* Wrap onto two lines (was white-space:nowrap on one line) so the third column —
     now two full-size CTAs, Download + Share — has room (user 2026-06-19). */
  max-width: 24rem;
  cursor: default;
  color: #c6c6c6;
  font-size: 2.2rem;                       /* match the Upload / Download button text */
  font-weight: normal;
  line-height: 2.4rem;
  white-space: normal;
  text-shadow: 1px 1px 1px #000;
}

.bng-step-arrow {
  font-size: 3.4rem;
  color: #8a7a55;
  user-select: none;
}

.bng-step-icon { font-size: 2.2rem; line-height: 1; }
.bng-step-text { font-size: inherit; }

/* --- "working…" loading modal (shown while upload parses / download builds) ---
 * Reuses the BB popup_dialog chrome (.popup-dialog.confirm-popup); the spinner
 * itself is bespoke (no BB source). */
.bng-loading-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.4rem;
}
.bng-spinner {
  width: 3.2rem;
  height: 3.2rem;
  border: 0.4rem solid rgba(224, 183, 90, 0.25);
  border-top-color: #e0b75a;
  border-radius: 50%;
  animation: bng-spin 0.8s linear infinite;
}
@keyframes bng-spin { to { transform: rotate(360deg); } }

/* --- the small help LINKS under each step (where? / more info / what changed?) --
   Plain text, ALWAYS gold. The `.character-screen` prefix raises specificity above
   the head reset `.character-screen a { color: inherit }` (0,1,1) that was making
   it inherit black. Hover ONLY adds the underline — colour stays gold. */
.bng-upload-form { margin: 0; display: inline-flex; }
.character-screen .bng-help-link {
  font-size: 1.2rem;
  color: #e0b75a;
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
}
.character-screen .bng-help-link:hover { text-decoration: underline; }

/* The "where is my save?" explainer popup — BB popup_dialog chrome, taller, with
   left-aligned text and a monospace path block.
   LAYOUT ONLY: never set font-size/line-height/color here — the text uses the ONE
   standard popup/tooltip class .confirm-content (1.6rem). One size for all dialog
   and tooltip text; do not override it per popup. */
.character-screen .ui-control.popup-dialog.bng-where-popup { height: 54rem; }
.character-screen .ui-control.popup-dialog.bng-where-popup > .content.confirm-content {
  height: 42rem;          /* popup 54rem − header 6 − footer 6, so all three OS blocks + OK fit */
  display: block;
  text-align: left;
  padding: 0.4rem 3.6rem;
  overflow-y: auto;
}
.bng-where-text p { margin: 0 0 0.85rem; }
/* Gold per-OS section header — matches the injuries / add-item dialog headers
   (.skills-section-title #dda21f); sized by the BB text-font-normal class. */
.bng-where-text .bng-where-head {
  color: #dda21f;
  text-shadow: 1px 1px rgba(0, 0, 0, 0.5);
  margin: 1.2rem 0 0.3rem;
}
.bng-where-text .bng-where-head:first-child { margin-top: 0; }
.bng-where-path {
  font-family: monospace;
  background: rgba(0, 0, 0, 0.35);
  padding: 0.55rem 0.75rem;
  border-radius: 0.3rem;
  color: #ffe9b0;
  word-break: break-all;
}
.bng-where-inline { font-family: monospace; color: #ffe9b0; }

/* The empty-landing "what changed?" placeholder — reserves the link row so all
   three columns stay the same height (no real what-changed without a save). */
.bng-help-link.bng-placeholder { visibility: hidden; }

/* The "what changed?" grouped-summary popup. LAYOUT ONLY — text uses the standard
   .confirm-content size (1.6rem); never override the popup font size. */
.character-screen .ui-control.popup-dialog.bng-changes-popup { height: 30rem; }
.character-screen .ui-control.popup-dialog.bng-changes-popup > .content.confirm-content {
  height: 18rem;          /* popup 30rem − header 6 − footer 6 */
  display: block;
  text-align: left;
  padding: 0.6rem 3.6rem;
  overflow-y: auto;
}
.bng-changes-text p { margin: 0 0 0.9rem; }
.bng-changes-text ul { margin: 0; padding-left: 1.9rem; }
.bng-changes-text li { margin: 0 0 0.7rem; }
.bng-changes-none { text-align: center; color: #8a7f68; font-style: italic; margin: 0.6rem 0 0; }

/* The "more info" popup — taller (community / legal text). LAYOUT ONLY; text keeps
   the standard .confirm-content size. */
.character-screen .ui-control.popup-dialog.bng-info-popup { height: 40rem; }
.character-screen .ui-control.popup-dialog.bng-info-popup > .content.confirm-content {
  height: 28rem;          /* popup 40rem − header 6 − footer 6 */
  display: block;
  text-align: left;
  padding: 0.6rem 3.6rem;
  overflow-y: auto;
}

/* Legal links — bottom of the right margin (left:100% of the right column, like
   the old download box), absolute so they move nothing. The .character-screen-
   container prefix beats the head `.character-screen a { color: inherit }` reset. */
.character-screen-container .bng-legal {
  position: absolute;
  right: -16rem;            /* completely to the right — far edge of the parchment, detached */
  bottom: 0.6rem;
  width: 11rem;
  z-index: 11;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.character-screen-container .bng-legal a {
  font-size: 1.2rem;
  color: #8a7f68;
  text-decoration: none;
  white-space: nowrap;
}
.character-screen-container .bng-legal a:hover { color: #e0b75a; text-decoration: underline; }

/* --- Share-link button (sits next to Download) + read-only shared banner ----
 * THIS APP'S OWN UI (no BB source), like the rest of the stepper. */
/* Download + Share as a SEGMENTED pair that TOUCHES (user 2026-06-19): zero gap, the
   inner corners squared and Share pulled 0.15rem left so their borders merge into one
   pill. align-items:stretch keeps both buttons the exact same height. Sitting them
   together frees horizontal room for the (two-line) title. */
.bng-dl-row { display: flex; align-items: flex-start; gap: 0; }
/* Download + its "what changed?" link stacked, so the link centres under the Download
   button itself, NOT under the Download+Share pair — "what changed?" belongs to
   Download (user 2026-06-19). Share sits beside this column, top-aligned with Download. */
.bng-dl-main { display: flex; flex-direction: column; align-items: center; gap: 0.3rem; }
.bng-dl-row .is-download { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.bng-dl-row .is-share { border-top-left-radius: 0; border-bottom-left-radius: 0; margin-left: -0.15rem; }
/* Share is a full second CTA beside Download but a touch GRAYER (user 2026-06-19): a
   cooler desaturated tone so Download stays the warmer gold primary while both read as
   clearly clickable. Overrides the gold .is-primary skin. */
.bng-step-btn.is-share.is-primary {
  background: #43423a;
  border-color: #8f8a76;
  color: #e9e4d3;
  box-shadow: 0 0.2rem 0 #1c160b;
}
.bng-step-btn.is-share.is-primary:hover { background: #565347; border-color: #c9a24a; color: #fff4d6; }

/* The /s/<token> read-only view swaps the stepper for one centered banner.
   align-items:center OVERRIDES the stepper's stretch (user 2026-06-19) so the
   "Open the editor" button keeps its NATURAL height — same as the Download/Upload
   buttons — instead of stretching to the full box height; text + button are
   vertically centred in the box. */
.bng-readonly-banner { align-items: center; justify-content: center; gap: 2.4rem; }
.character-screen .bng-ro-text {
  color: #e6d4a6;
  font-size: 2rem;
  white-space: nowrap;
  text-shadow: 1px 1px 1px #000;
}

/* The share-link popup (BB popup_dialog chrome). LAYOUT ONLY — text uses the
   standard .confirm-content size (1.6rem); never override the popup font size. */
.character-screen .ui-control.popup-dialog.bng-share-popup { height: 26rem; }
.character-screen .ui-control.popup-dialog.bng-share-popup > .content.confirm-content {
  height: 14rem;
  display: block;
  text-align: left;
  padding: 0.8rem 3.6rem;
}
.bng-share-row { display: flex; gap: 0.8rem; margin-top: 1.1rem; }
.bng-share-url {
  flex: 1;
  font-family: monospace;
  background: rgba(0, 0, 0, 0.35);
  border: 0.1rem solid #6b5836;
  border-radius: 0.3rem;
  color: #ffe9b0;
  padding: 0.6rem 0.8rem;
}