/*
  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: .68rem;
  font-weight: 900;
  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: .85rem;
}

/* ==========================================================
   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);
  padding: var(--s3) 0 0;
}
.frules-p {
  margin: 0;
  color: var(--ink);
  font-size: .84rem;
  line-height: 1.55;
}
.frules-p b { color: var(--ink); font-weight: 850; }

.frules-list {
  margin: 0;
  padding-left: 20px;
  display: grid;
  gap: 2px;
  color: var(--ink);
  font-size: .84rem;
  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: .68rem;
  font-weight: 900;
  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: .78rem;
}
.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: .68rem;
  font-weight: 900;
  letter-spacing: .05em;
  text-transform: uppercase;
  white-space: nowrap;
}
.frules-table td:first-child { font-weight: 750; 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: .7rem;
  font-weight: 750;
}

.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: .7rem;
  font-weight: 900;
  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: .72rem; font-weight: 900; 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: 800; 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: .82rem;
  line-height: 1.45;
}
.omech-readout b { font-weight: 850; }
.omech-good { color: var(--lagoon-deep); font-weight: 800; }
.omech-bad { color: var(--ink-soft); font-weight: 750; }

/* ==========================================================
   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: .8rem; }
.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: .6rem;
  font-weight: 850;
  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%; }