/*
  07-bastion-ux.css — v41.0 Bastion experience layer

  Presentation for the redesigned facility picker, facility detail sheet, group
  turn wizard, construction projects and the Bastion Events reference. Loaded after
  06-bastions.css so it wins where the two overlap.

  Design rule running through all of it: the ORDER VERB is the loudest thing on
  screen. At the table the question is always "what can we do this week", so the
  order type is a solid colour block and everything else is quieter than it.
*/

/* ---------- order colour system ---------- */
.ob {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  padding: 3px 9px;
  border-radius: 999px;
  color: #fff;
  font-size: .66rem;
  font-weight: 900;
  letter-spacing: .05em;
  text-transform: uppercase;
  white-space: nowrap;
}
.ob-craft    { background: #b3801f; }
.ob-trade    { background: #3f7a4a; }
.ob-recruit  { background: #2e6f8f; }
.ob-research { background: #6f4b8e; }
.ob-harvest  { background: #6d7f43; }
.ob-empower  { background: #a8455f; }
.ob-maintain { background: #6b5a44; }
.ob-basic    { background: #728769; }

/* ================= Facility picker ================= */
.bfac-picker { display: grid; gap: var(--s3); }

.bfac-slotbar {
  position: sticky;
  top: 0;
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 10px 12px;
  border: 1px solid color-mix(in srgb, var(--lagoon) 40%, var(--line));
  border-radius: var(--r-m);
  background: color-mix(in srgb, var(--chart) 96%, var(--lagoon));
  box-shadow: var(--e1);
}
.bfac-pips { display: flex; flex-wrap: wrap; gap: 5px; }
.bfac-pip {
  width: 15px;
  height: 15px;
  border: 1.5px solid var(--lagoon-deep);
  border-radius: 4px;
  transform: rotate(45deg);
  transition: background .15s ease;
}
.bfac-pip.is-full { background: var(--brass); border-color: #8e6417; }
.bfac-slottext {
  min-width: 0;
  flex: 1;
  color: var(--lagoon-deep);
  font-size: .8rem;
  font-weight: 850;
}
.bfac-slottext small {
  display: block;
  color: var(--muted);
  font-size: .7rem;
  font-weight: 600;
}
.bfac-slotbar.is-over {
  border-color: color-mix(in srgb, var(--danger) 55%, var(--line));
  background: var(--danger-bg);
}
.bfac-slotbar.is-over .bfac-pip.is-full { background: var(--danger); border-color: #8d2418; }
.bfac-slotbar.is-over .bfac-slottext { color: var(--danger); }

.bfac-controls { display: grid; gap: var(--s2); }
.bfac-filters {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding-bottom: 4px;
  scrollbar-width: thin;
}
.bfac-fchip {
  flex: 0 0 auto;
  min-height: 32px;
  padding: 5px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255, 255, 255, .4);
  color: var(--ink-soft);
  font: inherit;
  font-size: .75rem;
  font-weight: 800;
  cursor: pointer;
}
.bfac-fchip.is-on { background: var(--ink); border-color: var(--ink); color: var(--chart); }
.bfac-fchip[data-order-filter="Craft"].is-on    { background: #b3801f; border-color: #b3801f; color: #fff; }
.bfac-fchip[data-order-filter="Trade"].is-on    { background: #3f7a4a; border-color: #3f7a4a; color: #fff; }
.bfac-fchip[data-order-filter="Recruit"].is-on  { background: #2e6f8f; border-color: #2e6f8f; color: #fff; }
.bfac-fchip[data-order-filter="Research"].is-on { background: #6f4b8e; border-color: #6f4b8e; color: #fff; }
.bfac-fchip[data-order-filter="Harvest"].is-on  { background: #6d7f43; border-color: #6d7f43; color: #fff; }
.bfac-fchip[data-order-filter="Empower"].is-on  { background: #a8455f; border-color: #a8455f; color: #fff; }
.bfac-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--ink-soft);
  font-size: .79rem;
  font-weight: 800;
  cursor: pointer;
}
.bfac-toggle input { width: 17px; height: 17px; accent-color: var(--lagoon); }

.bfac-tier { margin-bottom: var(--s4); }
.bfac-tier[hidden] { display: none !important; }
.bfac-tier-head { display: flex; align-items: center; gap: 9px; margin: 0 2px var(--s2); }
.bfac-tier-head h3 {
  margin: 0;
  color: var(--muted);
  font-size: .8rem;
  font-weight: 900;
  letter-spacing: .05em;
  text-transform: uppercase;
}
.bfac-rule { flex: 1; height: 1px; background: var(--line); }
.bfac-grid { display: grid; gap: 9px; }

.bfac-tile {
  position: relative;
  display: grid;
  gap: 7px;
  min-width: 0;
  padding: 11px 12px;
  border: 1px solid var(--line);
  border-radius: var(--r-m);
  background: var(--chart);
  box-shadow: var(--e1);
  cursor: pointer;
  transition: border-color .14s ease, transform .14s ease;
}
.bfac-tile[hidden] { display: none !important; }
.bfac-tile:hover { border-color: color-mix(in srgb, var(--brass) 60%, var(--line)); }
.bfac-tile.is-selected {
  border-color: #9c6f21;
  background: linear-gradient(150deg, color-mix(in srgb, var(--brass) 20%, var(--chart)), var(--chart) 74%);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--brass) 28%, transparent), var(--e1);
}
.bfac-tile.is-locked { opacity: .58; border-style: dashed; cursor: not-allowed; }
.bfac-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding-right: 30px; }
.bfac-name { min-width: 0; flex: 1; font-size: .96rem; font-weight: 800; }
.bfac-does { color: var(--ink-soft); font-size: .8rem; line-height: 1.4; }
.bfac-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  color: var(--muted);
  font-size: .7rem;
  font-weight: 700;
}
.bfac-meta .is-lock { color: var(--warn); font-weight: 850; }
.bfac-prereq {
  padding: 5px 9px;
  border: 1px solid color-mix(in srgb, var(--warn) 42%, var(--line));
  border-radius: 7px;
  background: var(--warn-bg);
  color: #7b4208;
  font-size: .72rem;
  font-weight: 750;
}
.bfac-tick,
.bfac-info {
  position: absolute;
  top: 9px;
  right: 9px;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  font-size: .78rem;
  font-weight: 900;
}
.bfac-tick { background: var(--brass); color: #1d1408; }
.bfac-info {
  border: 1px solid var(--line-strong);
  background: rgba(255, 255, 255, .5);
  color: var(--muted);
  font-family: inherit;
  cursor: pointer;
}
.bfac-info:hover { background: var(--chart-2); color: var(--ink); }
.bfac-stepper {
  display: flex;
  width: fit-content;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  overflow: hidden;
  background: rgba(255, 255, 255, .45);
}
.bfac-stepper button {
  width: 34px;
  min-height: 32px;
  border: 0;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 1.05rem;
  font-weight: 900;
  cursor: pointer;
}
.bfac-stepper button:hover { background: color-mix(in srgb, var(--brass) 22%, transparent); }
.bfac-stepper span {
  min-width: 32px;
  border-inline: 1px solid var(--line);
  font-size: .86rem;
  font-weight: 900;
  line-height: 32px;
  text-align: center;
}
.bfac-empty { padding: 22px; color: var(--muted); text-align: center; }

/* ================= Facility detail ================= */
.bfd { display: grid; gap: var(--s3); }
.bfd.is-locked { opacity: .85; }
.bfd-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.bfd-head > div { min-width: 0; display: grid; gap: 5px; justify-items: start; }
.bfd-head h3 { margin: 0; font-size: var(--t3); line-height: 1.2; }
.bfd-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.bfd-lead { margin: 0; color: var(--ink-soft); line-height: 1.5; }
.bfd-prereq {
  padding: 8px 11px;
  border: 1px solid color-mix(in srgb, var(--warn) 42%, var(--line));
  border-radius: var(--r-s);
  background: var(--warn-bg);
  color: #7b4208;
  font-size: .78rem;
  font-weight: 750;
}
.bfd-sect { display: grid; gap: 7px; }
.bfd-sect h4 {
  margin: 0;
  color: var(--muted);
  font-size: .72rem;
  font-weight: 900;
  letter-spacing: .07em;
  text-transform: uppercase;
}
.bfd-option,
.bfd-option-static {
  display: flex;
  align-items: center;
  gap: 11px;
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--r-s);
  background: var(--chart-2);
}
.bfd-option.is-locked { opacity: .6; border-style: dashed; }
.bfd-option-main { min-width: 0; flex: 1; display: grid; gap: 2px; }
.bfd-option-main b { font-size: .89rem; }
.bfd-option-main span { color: var(--muted); font-size: .77rem; line-height: 1.4; }
.bfd-option-main em {
  color: var(--lagoon-deep);
  font-size: .74rem;
  font-style: normal;
  font-weight: 800;
}
.bfd-option-cost {
  flex: 0 0 auto;
  color: var(--ink-soft);
  font-size: .72rem;
  font-weight: 800;
  text-align: right;
  white-space: nowrap;
}
.bfd-option-cost b { display: block; color: var(--ink); font-size: .83rem; }
.bfd-passive,
.bfd-config {
  display: grid;
  gap: 3px;
  padding: 10px 12px;
  border: 1px solid color-mix(in srgb, var(--lagoon) 32%, var(--line));
  border-radius: var(--r-s);
  background: color-mix(in srgb, var(--lagoon) 7%, var(--chart));
}
.bfd-passive b, .bfd-config b { font-size: .86rem; }
.bfd-passive span, .bfd-config span { color: var(--ink-soft); font-size: .78rem; line-height: 1.45; }
.bfd-config em { color: var(--muted); font-size: .74rem; font-style: normal; }
.bfd-rules { border: 1px solid var(--line); border-radius: var(--r-s); background: var(--chart-2); }
.bfd-rules summary {
  padding: 10px 12px;
  color: var(--muted);
  font-size: .8rem;
  font-weight: 800;
  cursor: pointer;
}
.bfd-rules-body { padding: 0 12px 12px; color: var(--ink-soft); font-size: .79rem; line-height: 1.55; }

/* ================= Turn wizard ================= */
.btw { display: grid; gap: var(--s3); }
.btw-steps { display: flex; gap: 6px; }
.btw-step {
  flex: 1;
  padding: 8px 4px;
  border: 1px solid var(--line);
  border-radius: var(--r-s);
  background: var(--chart-2);
  color: var(--muted);
  font-size: .72rem;
  font-weight: 850;
  text-align: center;
}
.btw-step.is-on { background: var(--lagoon); border-color: var(--lagoon-deep); color: #fff; }
.btw-step.is-done {
  background: color-mix(in srgb, var(--lagoon) 16%, var(--chart));
  border-color: color-mix(in srgb, var(--lagoon) 45%, var(--line));
  color: var(--lagoon-deep);
}
.btw-who-list { display: grid; gap: 8px; }
.btw-who {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--r-m);
  background: var(--chart);
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.btw-who.is-on {
  border-color: var(--lagoon-deep);
  background: color-mix(in srgb, var(--lagoon) 10%, var(--chart));
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--lagoon) 20%, transparent);
}
.btw-who-k { min-width: 0; flex: 1; display: grid; gap: 2px; }
.btw-who-k b { font-size: .9rem; }
.btw-who-k small { color: var(--muted); font-size: .75rem; }
.btw-av,
.btw-who .secret-person-avatar,
.btw-who img {
  flex: 0 0 40px;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: linear-gradient(140deg, var(--brass), #8e6417);
  color: #fff;
  font-size: 1rem;
  font-weight: 900;
  object-fit: cover;
}
.btw-bastion {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--r-m);
  background: rgba(255, 255, 255, .26);
}
.btw-bastion h3 { margin: 0; font-size: var(--t2); }
.btw-seg { display: flex; border: 1px solid var(--line-strong); border-radius: 9px; overflow: hidden; }
.btw-seg button {
  flex: 1;
  min-height: 38px;
  padding: 8px 6px;
  border: 0;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: .8rem;
  font-weight: 850;
  cursor: pointer;
}
.btw-seg button.is-on { background: var(--ink); color: var(--chart); }
.btw-seg button.is-on.is-maintain { background: #6b5a44; }
.btw-maintain-note {
  padding: 10px 12px;
  border: 1px solid color-mix(in srgb, var(--brass) 42%, var(--line));
  border-radius: var(--r-s);
  background: color-mix(in srgb, var(--brass) 8%, var(--chart));
  color: var(--ink-soft);
  font-size: .78rem;
  line-height: 1.45;
}
.btw-facs { display: grid; gap: 8px; }
.btw-fac { border: 1px solid var(--line); border-radius: var(--r-s); background: var(--chart); overflow: hidden; }
.btw-fac.is-chosen { border-color: #9c6f21; background: linear-gradient(150deg, color-mix(in srgb, var(--brass) 16%, var(--chart)), var(--chart) 78%); }
.btw-fac-head {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 11px 12px;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.btw-fac-k { min-width: 0; flex: 1; display: grid; gap: 2px; }
.btw-fac-k b { font-size: .89rem; }
.btw-fac-k small { color: var(--muted); font-size: .75rem; }
.btw-fac-k em {
  color: var(--lagoon-deep);
  font-size: .76rem;
  font-style: normal;
  font-weight: 850;
}
.btw-opts { display: grid; gap: 7px; padding: 0 12px 12px; }
.btw-opt {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 11px;
  border: 1px solid var(--line);
  border-radius: var(--r-s);
  background: var(--chart-2);
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.btw-opt:hover { border-color: color-mix(in srgb, var(--brass) 55%, var(--line)); }
.btw-opt.is-on {
  border-color: #9c6f21;
  background: color-mix(in srgb, var(--brass) 16%, var(--chart));
}
.btw-opt-k { min-width: 0; flex: 1; display: grid; gap: 2px; }
.btw-opt-k b { font-size: .86rem; }
.btw-opt-k small { color: var(--muted); font-size: .75rem; line-height: 1.35; }
.btw-opt-cost {
  flex: 0 0 auto;
  max-width: 46%;
  color: var(--ink-soft);
  font-size: .71rem;
  font-weight: 800;
  line-height: 1.35;
  text-align: right;
}
.btw-opt-cost b { white-space: nowrap; }
.btw-opt-cost b { display: block; color: var(--ink); font-size: .8rem; }
.btw-target { width: 100%; }
.btw-clear {
  justify-self: start;
  padding: 4px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: .73rem;
  font-weight: 800;
  cursor: pointer;
}
.btw-review {
  padding: 13px;
  border: 1px solid color-mix(in srgb, var(--brass) 48%, var(--line));
  border-radius: var(--r-m);
  background: color-mix(in srgb, var(--brass) 10%, var(--chart));
}
.btw-totals { display: flex; flex-wrap: wrap; gap: 16px; margin-bottom: 10px; }
.btw-totals > div { min-width: 0; }
.btw-totals span {
  display: block;
  color: var(--muted);
  font-size: .66rem;
  font-weight: 900;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.btw-totals b { font-size: var(--t2); }
.btw-rline {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 0;
  border-top: 1px solid var(--line);
  font-size: .81rem;
}
.btw-rline-k { min-width: 0; flex: 1; }
.btw-rline-d { flex: 0 0 auto; color: var(--muted); font-size: .74rem; white-space: nowrap; }

/* ================= Construction projects ================= */
.bproj-list { display: grid; gap: 7px; }
.bproj {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 11px;
  border: 1px solid var(--line);
  border-radius: var(--r-s);
  background: color-mix(in srgb, var(--chart-2) 54%, var(--chart));
}
.bproj.is-done { opacity: .72; }
.bproj-k { min-width: 0; flex: 1; display: grid; gap: 3px; }
.bproj-k b { font-size: .87rem; }
.bproj-k small { color: var(--muted); font-size: .74rem; }
.bproj-bar {
  display: block;
  height: 6px;
  margin-top: 2px;
  border-radius: 99px;
  background: rgba(0, 0, 0, .1);
  overflow: hidden;
}
.bproj-bar i { display: block; height: 100%; border-radius: 99px; background: var(--lagoon); }
.bproj-quote {
  display: flex;
  align-items: baseline;
  gap: 9px;
  padding: 10px 12px;
  border: 1px solid color-mix(in srgb, var(--lagoon) 34%, var(--line));
  border-radius: var(--r-s);
  background: color-mix(in srgb, var(--lagoon) 7%, var(--chart));
}
.bproj-quote b { font-size: var(--t2); }
.bproj-quote span { color: var(--ink-soft); font-size: .79rem; }

/* ================= Responsive ================= */
@media (min-width: 640px) {
  .bfac-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
  .btw-totals { gap: 12px; }
  .bfac-slotbar { flex-wrap: wrap; gap: 8px; }
}

/* ================= v41.13 — Bastion armaments in Ship Loadout =================
   The owned-weapon card is a two-column flex row whose right column is sized to
   the ×N chip. Adding "Mount at Bastion" beside Edit pushed the button past the
   card and off the screen on a phone, so the buttons move to their own row that
   spans the card and wraps. Unlayered, so it wins over @layer legacy without
   needing !important. */
.owned-weapon-card { flex-wrap: wrap; }
.owned-weapon-card > * { min-width: 0; }
.owned-weapon-actions {
  flex: 1 0 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}
/* At three-across grid width a card is ~150px, which is narrower than "Mount at
   Bastion" on one line. The label wraps rather than forcing an overflow, and
   each button is free to take the whole row when it needs to. */
.owned-weapon-actions .button {
  flex: 1 1 auto;
  min-width: 0;
  white-space: normal;
  text-align: center;
  line-height: 1.2;
}

/* Mounted-at-Bastions summary on the Loadout screen. */
/* .lrow-sub is a single ellipsised line by default; this one is a wrapping
   chip list, so the clamp is lifted here only. */
.bmount-items {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 6px;
  margin-top: 3px;
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
}
.bmount-item {
  padding: 2px 7px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255, 255, 255, .45);
  font-size: .74rem;
  font-weight: 700;
  line-height: 1.4;
}
.bmount-item.is-idle {
  border-style: dashed;
  color: var(--muted);
  font-weight: 600;
}

/* ================= Bastion Events reference (v41.14) =================
   The app no longer rolls or resolves events — it only says one is due. What
   remains is the d100 table as a lookup, so the DM can roll at the table
   without reaching for the book. Read-only: no controls, no state. */
.bevt { display: grid; gap: 12px; }
.bevt-table {
  display: grid;
  border: 1px solid var(--line);
  border-radius: var(--r-m);
  background: var(--chart);
  overflow: hidden;
}
.bevt-row {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 9px 13px;
}
.bevt-row + .bevt-row { border-top: 1px solid var(--line); }
.bevt-row:nth-child(odd) { background: rgba(0, 0, 0, .025); }
.bevt-range {
  flex: 0 0 62px;
  font-variant-numeric: tabular-nums;
  font-weight: 900;
  font-size: .82rem;
  color: var(--muted);
}
.bevt-name { min-width: 0; font-weight: 800; font-size: .92rem; line-height: 1.3; }
.bevt-foot { color: var(--muted); font-size: .78rem; line-height: 1.5; }