/* ============================================================
   PASSAGE — Firm settings, laid out.

   The tabs (settingstabs.css) fixed "everything is on one 4,011px page".
   They did not fix what was inside each tab, which was the real complaint:
   Billing & fees was still 2,381px of full-width rows on a 1,150px-wide
   column, with the rate card buried as the bottom two-thirds of a panel
   about payment terms.

   This file owns the LAYOUT — which block sits beside which, and how the
   columns collapse. The components inside the billing panels are styled by
   the <style> block fees.js injects at runtime; see the note further down
   before adding a rule for one of them here.

   Nothing here hides or removes a control. Put the things that are edited
   together within sight of each other, give a short field a short box, and
   let a wide screen be wide.
   ============================================================ */

/* ------------------------------------------------------------------
   BILLING & FEES
   ------------------------------------------------------------------ */

/* Terms and rate card as peers. Stacked by default (phone-first); side by
   side once there is room for two readable columns. The rate card gets the
   slightly wider track because its rows carry a label AND a price. */
.bill-cols {
  display: grid;
  gap: 16px;
  align-items: start;
}
@media (min-width: 1080px) {
  .bill-cols { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); }
}

/* The six numbers are 2-4 characters each. They were sitting in two rows of
   three full-width columns, 131px tall apiece. */
.bt-nums {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(155px, 1fr));
  gap: 12px 14px;
  margin: 10px 0 16px;
}
/* Some labels wrap to two lines ("Card surcharge — outside Canada") and some
   don't. Each field is a grid whose label cell absorbs the slack, so every
   input in a row lands on the same baseline without reserving a fixed two
   lines everywhere — which left a visible gap under the short labels. */
.bt-nums .fld {
  min-width: 0;
  display: grid;
  grid-template-rows: 1fr auto;
}
.bt-nums .fld label {
  align-self: start;
  display: block;
  font-size: 11.5px;
  letter-spacing: .03em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--ink-soft);
  margin-bottom: 5px;
  line-height: 1.35;
}

.bill-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 14px;
}

/* The rate card, the inline number inputs and the tax checkboxes are styled
   by the <style> block fees.js injects at runtime — it already owned them,
   and it wins on order because it is appended to <head> after this file. A
   second copy here silently lost every argument, which is exactly how a rule
   ends up written twice with two different meanings. Edit them in fees.js.  */

/* ---- Fee schedules (packages) ---- */
/* Four client types, each a short list. One per row left two-thirds of the
   screen empty; two-up halves the scroll and lets you compare employer and
   worker pricing without moving. */
@media (min-width: 1080px) {
  .fee-settings-panel.fee-pkgs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 26px;
    align-items: start;
  }
  .fee-settings-panel.fee-pkgs > .panel-title { grid-column: 1 / -1; }
  .fee-settings-panel.fee-pkgs > .fee-pkg-group { margin-top: 14px; }
}

/* ------------------------------------------------------------------
   INTEGRATIONS + TEMPLATES (the settings-hub cards)
   ------------------------------------------------------------------ */

/* The cards were 4-up at 230px, which orphaned the fifth on its own row and
   squeezed each blurb into six ragged lines. Three across reads properly and
   divides evenly for both groups. */
.sh-grid { grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); }

/* A card is a button now, so it needs the button reset the house .btn never
   gave it, and equal heights come from the grid rather than from luck. */
.sh-card {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  width: 100%;
  height: 100%;
  text-align: left;
  font: inherit;
  color: inherit;
  padding: 15px;
}
.sh-card:disabled { cursor: default; }
.sh-card:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

.sh-card-body {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

/* Title, then state, then explanation. The state used to sit above the title,
   right-aligned in small caps — you read "WORKING — OFFICE@BRIJRATHI.COM"
   before you knew what was working. */
.sh-card-title { margin-bottom: 4px; }

.sh-state {
  align-self: flex-start;
  text-align: left;
  max-width: 100%;
  margin-bottom: 7px;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--bone);
  font-size: 10.5px;
}
.sh-state-green {
  background: rgba(30, 58, 51, .09);
  opacity: 1;
}
.sh-state-gold {
  background: rgba(169, 130, 76, .14);
  opacity: 1;
}

.sh-card-blurb { margin-top: auto; }
.sh-card-note { display: block; }

/* ------------------------------------------------------------------
   PHONE
   ------------------------------------------------------------------ */
@media (max-width: 640px) {
  .bill-cols { gap: 14px; }

  /* Two number fields per row still fits 390px; one per row would make the
     terms panel scroll for no reason. */
  .bt-nums {
    grid-template-columns: 1fr 1fr;
    gap: 10px 10px;
  }
  .bt-nums .fld label { font-size: 11px; }

  .bill-actions .btn { width: 100%; }
}
