/*
  17-facility.css — v41.26 Bastion facility sheets

  Two fixes.

  1. Long order costs wrecked the row
  -----------------------------------
  .bfd-option-cost was `flex: 0 0 auto` with `white-space: nowrap`, so it
  could neither shrink nor wrap. Any cost string past roughly 28 characters
  therefore took the width it wanted, squeezed .bfd-option-main (which has
  `min-width: 0`) down to min-content — hence titles breaking one word per
  line — and then overflowed across the description. `align-items: center`
  put that overflow through the vertical middle of the text, which is what it
  looked like on a phone.

  Nine of the twelve costText strings in 24-bastion-ux.js are long enough to
  trigger it, so this was never just the Armory and the Storehouse:
    51  100 GP + 100 GP per defender (halved with a Smithy)
    50  Up to 500 GP (2,000 at level 9, 5,000 at level 13)
    42  Free, or 100 GP per extra 1d8 (max 500 GP)
    41  Free, or 50/100 GP to enhance one or both
    34  50 to 3,500 GP by Challenge Rating
    33  1 GP per soldier per day, ongoing
    31  Market price of anything bought
    30  1,000 GP, or a blood sacrifice
    29  150 / 600 / 6,000 / 60,000 GP
  The fix is length-independent, so anything added later is covered too.

  2. The tick hid the info button
  -------------------------------
  The picker tile rendered the tick OR the (i), never both, and both were
  absolutely positioned in the same corner. Once a facility existed — or a
  repeatable reached 1 of 2, like a Barrack — there was no way left to read
  its rules. The tick is now an inline chip in the tile header and the corner
  belongs to (i) alone.

  Unlayered, loaded after styles.css. No !important.
*/

/* ==========================================================
   1. Order rows
   ========================================================== */
.bfd-option,
.bfd-option-static {
  /* A tall description next to a short cost should align at the top, not
     float the cost through the middle of the text. */
  align-items: flex-start;
  flex-wrap: wrap;
}

.bfd-option-cost {
  flex: 0 1 auto;
  min-width: 0;
  max-width: 46%;
  white-space: normal;
  overflow-wrap: anywhere;
}
/* The duration is short and reads badly broken across lines. */
.bfd-option-cost b { white-space: nowrap; }

/* On a phone there isn't room for two columns once the cost is a sentence.
   Drop it to its own line under the description, left aligned so it reads as
   a continuation rather than a stray right-hand fragment. */
@media (max-width: 460px) {
  .bfd-option-cost {
    flex: 1 0 100%;
    max-width: none;
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px dashed var(--line);
    text-align: left;
  }
  .bfd-option-cost b { display: inline; margin-right: 6px; }
}

/* ==========================================================
   2. Picker tile: tick and (i) coexist
   ========================================================== */
.bfac-head { padding-right: 40px; }

/* Static, inline, in the header — no longer competing for the corner. */
.bfac-tick {
  position: static;
  flex: 0 0 auto;
  width: auto;
  height: 20px;
  padding: 0 7px;
  border-radius: 999px;
  background: var(--brass);
  color: #1d1408;
  font-size: var(--ui-meta);
  font-weight: var(--fw-display);
  letter-spacing: .04em;
  white-space: nowrap;
}

/* 24px was under any reasonable touch target, and it is now the only control
   in the corner, so it can afford the room. */
.bfac-info {
  width: 32px;
  height: 32px;
  top: 8px;
  right: 8px;
  font-size: var(--ui-meta);
}

/* ==========================================================
   3. Full rules body
   ==========================================================
   The panel used to hold a single 93-character line, so it had no typography
   of its own. It now holds real rules text — 41,603 characters across the 37
   facilities — with bolded rule labels and eight reconstructed tables. */
.frules-body {
  display: grid;
  gap: var(--s3);
  /* The old one-line panel was .bfd-rules-body, which carried `padding: 0 12px
     12px`. v41.27 swapped in this element and only set a top padding, so every
     paragraph, table and citation sat flush against the panel border — 1px of
     gap on all four sides. Match the summary's 12px so the text lines up under
     the "Full rules" label rather than starting further left than it. */
  padding: var(--s2) 12px 12px;
}
.frules-p {
  margin: 0;
  color: var(--ink);
  font-size: var(--ui-meta);
  line-height: 1.55;
}
.frules-p b { color: var(--ink); font-weight: var(--fw-display); }

.frules-list {
  margin: 0;
  padding-left: 20px;
  display: grid;
  gap: 2px;
  color: var(--ink);
  font-size: var(--ui-meta);
  line-height: 1.5;
}

/* Tables can be wider than a phone — let them scroll sideways on their own
   rather than stretching the sheet. */
.frules-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-s);
  background: var(--chart);
}
.frules-table-title {
  padding: 7px 10px;
  border-bottom: 1px solid var(--line-strong);
  background: var(--chart-2);
  font-size: var(--ui-meta);
  font-weight: var(--fw-display);
  letter-spacing: .07em;
  text-transform: uppercase;
  /* --muted measured 4.34 on --chart-2; the header sits on the darker tint. */
  color: var(--ink-soft);
}
.frules-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--ui-meta);
}
/* Without a floor on the text column, `width: 100%` squeezes a three-column
   table like Sample Guilds down to about one word per line on a phone —
   technically inside the box, unreadable in practice. Giving the cells a
   minimum makes the table exceed its wrapper, which is exactly what the
   wrapper's horizontal scroll is for. */
.frules-table.is-wide td { min-width: 78px; }
.frules-table.is-wide td:last-child,
.frules-table.is-wide th:last-child { min-width: 232px; }
.frules-table th,
.frules-table td {
  padding: 7px 10px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
  line-height: 1.45;
}
.frules-table th {
  color: var(--muted);
  font-size: var(--ui-meta);
  font-weight: var(--fw-display);
  letter-spacing: .05em;
  text-transform: uppercase;
  white-space: nowrap;
}
.frules-table td:first-child { font-weight: var(--fw-head); white-space: nowrap; }
.frules-table tr:last-child td { border-bottom: 0; }

.frules-cite {
  /* Same 4.34 on the sheet's parchment. */
  color: var(--ink-soft);
  font-size: var(--ui-meta);
  font-weight: var(--fw-head);
}

.bfd-rules summary .chip { margin-left: 8px; }

/* ==========================================================
   4. Facility Reference
   ========================================================== */
.fref { display: grid; gap: var(--s3); }
.fref-search { width: 100%; }
.fref-grid { display: grid; gap: var(--s4); }
.fref .bfac-tier-head {
  margin: 0 0 7px;
  font-size: var(--ui-meta);
  font-weight: var(--fw-display);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
}
/* Reference tiles are not selectable, so they never take the selected state
   or the stepper — just a tap target that opens the rules. */
.bfac-tile.is-reference { cursor: pointer; }

.bastion-level-actions { display: flex; flex-wrap: wrap; gap: var(--s2); }
@media (max-width: 460px) {
  .bastion-level-actions { width: 100%; }
  .bastion-level-actions .button { flex: 1 1 auto; }
}

/* ==========================================================
   5. Order mechanics (v41.28)
   ========================================================== */
.omech-wrap { display: grid; gap: var(--s3); }
.omech { display: grid; gap: 6px; }
.omech > label { font-size: var(--ui-meta); font-weight: var(--fw-display); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }

/* The number and the convenience roller sit together; the input keeps its own
   width so a two-digit result doesn't look like a text field. */
.omech-roll { display: flex; gap: 8px; align-items: stretch; }
.omech-roll input { flex: 0 1 110px; text-align: center; font-weight: var(--fw-display); font-size: 1.05rem; }
.omech-roll .button { flex: 1 1 auto; white-space: nowrap; }

.omech-readout {
  padding: 9px 11px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-s);
  background: var(--chart-2);
  color: var(--ink);
  font-size: var(--ui-meta);
  line-height: 1.45;
}
.omech-readout b { font-weight: var(--fw-display); }
.omech-good { color: var(--lagoon-deep); font-weight: var(--fw-display); }
.omech-bad { color: var(--ink-soft); font-weight: var(--fw-head); }

/* ==========================================================
   6. Army upkeep board
   ========================================================== */
.army-board {
  display: grid;
  gap: var(--s2);
  margin: var(--s3) 0;
  padding: var(--s3);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-m);
  background: var(--chart);
}
.army-board.is-warn { border-color: color-mix(in srgb, var(--warn) 48%, var(--line-strong)); background: color-mix(in srgb, var(--warn) 10%, var(--chart)); }
.army-board.is-danger { border-color: color-mix(in srgb, var(--danger) 46%, var(--line-strong)); background: color-mix(in srgb, var(--danger) 10%, var(--chart)); }

.army-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.army-head b { font-size: .95rem; }
.army-rows { display: grid; gap: 3px; }
.army-rows > div { display: flex; justify-content: space-between; gap: 10px; font-size: var(--ui-meta); }
.army-rows span { color: var(--ink-soft); }
.army-rows b { font-variant-numeric: tabular-nums; }

/* ==========================================================
   7. Turn wizard: which options will ask you something (v41.29)
   ========================================================== */
.btw-mech {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 7px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--lagoon) 18%, var(--chart-2));
  border: 1px solid color-mix(in srgb, var(--lagoon) 42%, var(--line-strong));
  /* --lagoon-deep measured 4.19 on the tinted pill; the pill's own background
     lightens the effective contrast, so the text takes the ink tone instead. */
  color: #0d4a52;
  font-size: var(--ui-meta);
  font-weight: var(--fw-display);
  letter-spacing: .03em;
  text-transform: uppercase;
  white-space: nowrap;
  vertical-align: middle;
}

/* A picker and a text box in the same slot should read the same. */
select.btw-target { width: 100%; }

/* ==========================================================
   8. Installed facilities (v41.33)
   ==========================================================
   The Bastion card said "2/2 special" and nothing about WHICH two. */
.bfac-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 7px;
}
.bfac-strip.is-empty {
  display: block;
  color: var(--muted);
  font-size: var(--ui-meta);
  font-style: italic;
}
.bfac-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: var(--chart-2);
  color: var(--ink);
  font-size: var(--ui-meta);
  font-weight: var(--fw-head);
  white-space: nowrap;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bfac-chip.is-more { color: var(--ink-soft); font-weight: var(--fw-head); font-style: italic; }
/* The order colour repeats the badge used everywhere else, but the chip's
   text always names the facility, so the dot is never the only signal. */
.bfac-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--muted); flex: 0 0 auto; }

.bfac-installed-wrap { margin: var(--s3) 0; }
.bfac-installed { cursor: pointer; }
.bfac-installed.is-locked { opacity: .62; }
.bfac-free {
  align-self: center;
  color: var(--muted);
  font-size: var(--ui-meta);
  font-weight: var(--fw-head);
}

/* v41.34 — the mount a marker is linked to */
.marker-mount-line {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; margin: var(--s2) 0;
  padding: 8px 11px; border: 1px solid var(--line-strong);
  border-radius: var(--r-s); background: var(--chart-2);
  font-size: var(--ui-meta);
}
.marker-mount-line span { color: var(--ink-soft); }