/* rows-8to6.css - MOCKUP for Phiz, Nov 11 2026 (CT). Shared list bill row only (article.lu-row): Bills, Orders, Tracks,
   Alerts, Dashboard, Day plan, Watch, Client, AI Track and the association portal all use it.
   - 9:39 AM "fit 6 bills where 8 used to fit": one factor --lu-row-k (1.25 at >= 1600px) scales the row's text and spacing.
   - 10:40 AM sponsors smaller (0.825rem); bill number +25% only at >= 1600px (11:26 AM "keep the same on mobile").
   - 11:26 AM tighter committee / sponsors / action-row gaps; 11:27 AM title +10%; 11:27 AM sponsors read as inline text;
     11:28 AM rows show 3 sponsors + "+N more" (templates/_bill_row.html, static/rows-sponsors-more.js).
   12:29 PM: grey status box under the bill number removed; Recent Action shows in full (wraps, same type).
   1:08 PM: icons sit in a compact horizontal strip, inline with the bill number; the title and
   everything else start on a new line at the row's full width from the left edge. No left column.
   1:10 PM: all row text 10% bigger than v5.2 at every width, except the bill number (unchanged).
   Title clamp stays as live. Loaded after cards.css / dark.css. */
article.lu-row { --lu-row-k: 1; --lu-text-boost: 1.1; }
/* Grow the row only where the list column is wide enough to take it without stacking
   (>= 1600 CSS px, which includes Phiz's 9:39 AM view). Narrower screens and phones keep k = 1. */
@media (min-width: 1600px) { article.lu-row { --lu-row-k: 1.25; } }

/* Sponsor names: smaller than live everywhere (phone too), secondary to the title.
   Phiz 11:27 AM CT "Still too much spaces taken up with sponsors": the list reads as inline text
   ("A. Collins, Springer"): no padding, margin, tap box or flex gaps; comma hugs the name; tight line-height. */
article.lu-row .lu-sponsors { line-height: 1.25; }
article.lu-row .lu-sponsors .sponsor-names { display: inline; gap: 0; }
article.lu-row .lu-sponsors a.sponsor-link,
article.lu-row .lu-sponsors .sponsor-plain {
  display: inline;
  font-size: calc(0.825rem * var(--lu-text-boost));
  line-height: 1.25;
  min-height: 0;
  min-width: 0;
  padding: 0;
  margin: 0;
  white-space: nowrap; /* QA bounce 1: never split a name across lines; breaks only fall after a comma */
}
article.lu-row .lu-sponsors .sponsor-gap { margin: 0; padding: 0; }
/* "+N more" (Phiz 11:28 AM CT): inline link-style button after the first 3 names, same size as the names. */
article.lu-row .lu-sponsors button.lu-sp-more {
  display: inline !important;
  width: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  height: auto !important;
  padding: 0 !important;
  margin: 0 0 0 0.25em !important;
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
  font: inherit;
  font-size: calc(0.825rem * var(--lu-text-boost)) !important;
  font-weight: 600;
  line-height: 1.25;
  color: inherit;
  text-decoration: underline;
  cursor: pointer;
}
/* Phiz 11:26 AM CT: tighten committee / sponsors / action-row gaps a little (not crammed). */
article.lu-row .lu-row-who { row-gap: calc(7px * var(--lu-row-k)); }
article.lu-row .lu-row-links { margin-top: calc(4px * var(--lu-row-k)); }
/* Phiz 11:27 AM CT: bill title 10% larger at every width. */
article.lu-row h3.lu-row-title { font-size: calc(0.85rem * 1.1 * var(--lu-text-boost) * var(--lu-row-k)); }

/* Bill number: 25% bigger than live (Phiz 10:40 AM CT "Enlarge the bill number by 25%"), on top of the row scale.
   --lu-bn-boost is the bill-number factor. Orders & Tags marks the same link .order-bill-id and live styles it with a more
   specific rule (freshen.css / cards.css), so it is matched here to keep the row identical on both pages. */
/* Variant bn19: bill number stays live 19px below 1600px; +25% only at >= 1600px. */
article.lu-row { --lu-bn-boost: 1; }
@media (min-width: 1600px) { article.lu-row { --lu-bn-boost: 1.25; } }
article.lu-row a.bill-id,
.orders-layout article.lu-row a.bill-id.order-bill-id,
html.brand-v2 .orders-layout article.lu-row a.bill-id.order-bill-id { font-size: calc(0.95rem * var(--lu-bn-boost) * var(--lu-row-k)); }

@media (min-width: 1600px) {
  article.lu-row.bill-card {
    grid-template-columns: max-content minmax(0, 1fr);
    grid-template-areas:
      "icons num"
      "main main";
    column-gap: calc(8px * var(--lu-row-k));
    padding: calc(6px * var(--lu-row-k)) calc(8px * var(--lu-row-k)) !important;
    margin: 0 0 calc(6px * var(--lu-row-k));
  }
  article.lu-row.bill-card:not(:has(.lu-row-controls)) {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "num"
      "main";
  }
  article.lu-row .lu-row-controls { gap: calc(3px * var(--lu-row-k)); width: auto; flex-direction: row; }
  article.lu-row .lu-row-controls form { width: auto; }
  /* The forms' line box comes from the inherited body text; scale it with the row too. */
  article.lu-row .lu-row-controls form,
  article.lu-row .lu-row-links form { font-size: calc(1em * var(--lu-row-k)); }
  article.lu-row button.lu-sq {
    width: calc(22px * var(--lu-row-k)) !important;
    height: calc(22px * var(--lu-row-k)) !important;
    max-width: calc(22px * var(--lu-row-k)) !important;
    font-size: calc(12px * var(--lu-row-k)) !important;
  }
  article.lu-row .lu-row-num { min-width: 0; max-width: none; }
  article.lu-row .lu-order-label { font-size: calc(0.65rem * var(--lu-text-boost) * var(--lu-row-k)); }
  article.lu-row p { margin: calc(1px * var(--lu-row-k)) 0 0; }
  article.lu-row .lu-row-action { font-size: calc(0.72rem * var(--lu-text-boost) * var(--lu-row-k)); }
  article.lu-row .lu-row-who { column-gap: calc(12px * var(--lu-row-k)); font-size: calc(0.78rem * var(--lu-text-boost) * var(--lu-row-k)); }
  article.lu-row .lu-row-links { gap: calc(4px * var(--lu-row-k)) calc(12px * var(--lu-row-k)); }
  article.lu-row .lu-row-links a,
  article.lu-row .lu-row-links button.linkish { gap: calc(4px * var(--lu-row-k)); font-size: calc(0.75rem * var(--lu-text-boost) * var(--lu-row-k)) !important; }
  article.lu-row .lu-tag { font-size: calc(0.68rem * var(--lu-text-boost) * var(--lu-row-k)); padding: 0 calc(6px * var(--lu-row-k)); }
  article.lu-row .lu-row-qnote { gap: calc(6px * var(--lu-row-k)); margin-top: calc(2px * var(--lu-row-k)); }
  article.lu-row .lu-row-qnote input[type="text"] { height: calc(1.35rem * var(--lu-row-k)); font-size: calc(0.75rem * var(--lu-text-boost) * var(--lu-row-k)); }
  article.lu-row .lu-row-qnote button.linkish { font-size: calc(0.75rem * var(--lu-text-boost) * var(--lu-row-k)) !important; }
  article.lu-row .lu-row-match { font-size: calc(0.75rem * var(--lu-text-boost) * var(--lu-row-k)); }
}

/* Phiz 12:29 PM CT: "give the entire recent action ... let it go to two rows or more if needed".
   Same font, size, color and weight; only the one-line ellipsis is lifted. */
article.lu-row p.lu-row-action.lu-row-recent { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: break-word; }

/* "+N more" before first paint (QA v5.1 slow-load flash): with JS on, html.lu-js is set in <head>, so names 4+
   are display:none and the button shows from the first frame. With JS off the button keeps [hidden]. */
article.lu-row .lu-sponsors button.lu-sp-more[hidden] { display: none !important; }
html.lu-js article.lu-row .lu-sp-list[data-more]:not([data-sp-open]) .lu-sp-rest { display: none; }
html.lu-js article.lu-row .lu-sp-list[data-more]:not([data-sp-open]) button.lu-sp-more[hidden] { display: inline !important; }


/* v5.3 (Phiz 1:10 PM CT): "Make all text 10% bigger except the bill number".
   --lu-text-boost is 1.1 at every width. The bill number rule above does not use it.
   Pass/kill/watch icon size is unchanged. */
article.lu-row .lu-order-label { font-size: calc(0.65rem * var(--lu-text-boost) * var(--lu-row-k)); }
article.lu-row .lu-row-action { font-size: calc(0.72rem * var(--lu-text-boost) * var(--lu-row-k)); }
article.lu-row .lu-row-who { font-size: calc(0.78rem * var(--lu-text-boost) * var(--lu-row-k)); }
article.lu-row .lu-row-links a,
article.lu-row .lu-row-links button.linkish { font-size: calc(0.75rem * var(--lu-text-boost) * var(--lu-row-k)) !important; }
article.lu-row .lu-tag { font-size: calc(0.68rem * var(--lu-text-boost) * var(--lu-row-k)); }
article.lu-row .lu-row-qnote input[type="text"] { font-size: calc(0.75rem * var(--lu-text-boost) * var(--lu-row-k)); }
article.lu-row .lu-row-qnote button.linkish { font-size: calc(0.75rem * var(--lu-text-boost) * var(--lu-row-k)) !important; }
article.lu-row .lu-row-match { font-size: calc(0.75rem * var(--lu-text-boost) * var(--lu-row-k)); }
article.lu-row .act-pill { font-size: calc(11px * var(--lu-text-boost)); }

/* v5.3 (Phiz 1:08 PM CT): "Just create a new line and put the bill title and everything else
   directly below the bill number so there is no wasted space and you take full advantage of the box."
   Top line: pass / kill / watch icons in a compact horizontal strip (existing order and size),
   then the bill number. The order label and ACT pill sit in the main area
   under the number, with the title and everything else (v5.4).
   Under that, at the row's full width from the left edge: title, Recent Action, committee,
   sponsors and action links. No left column. Applies at every width, including the phone
   breakpoint in cards.css and the scaled >=1600 rules above. */
article.lu-row.bill-card {
  grid-template-columns: max-content minmax(0, 1fr);
  grid-template-areas:
    "icons num"
    "main main";
}
article.lu-row.bill-card:not(:has(.lu-row-controls)) {
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas:
    "num"
    "main";
}
article.lu-row .lu-row-controls {
  grid-area: icons;
  flex-direction: row;
  width: auto;
  align-items: center;
}
article.lu-row .lu-row-controls form { width: auto; }
article.lu-row .lu-row-num {
  grid-area: num;
  min-width: 0;
  max-width: none;
}
article.lu-row .lu-row-main {
  grid-area: main;
  grid-column: 1 / -1;
}

/* Same layout on phones, beating cards.css @media (max-width: 899px) 30px left-column rules. */
@media (max-width: 899px) {
  article.lu-row.bill-card {
    grid-template-columns: max-content minmax(0, 1fr);
    grid-template-areas:
      "icons num"
      "main main";
  }
  article.lu-row.bill-card:not(:has(.lu-row-controls)) {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "num"
      "main";
  }
  article.lu-row .lu-row-controls { flex-direction: row; width: auto; }
  article.lu-row .lu-row-controls form { width: auto; }
  article.lu-row .lu-row-num { grid-area: num; grid-column: auto; min-width: 0; max-width: none; }
  article.lu-row .lu-row-main { grid-area: main; grid-column: 1 / -1; }
}

/* v5.5 (QA bounce 2 on v5.4; bAIb 1:47 PM CT final try):
   The WATCH/PASS/KILL label and the ACT pill sit inline (display:inline /
   inline-block, no flex column) at the start of the Recent Action text,
   so wrapped Recent Action lines run back to the row's left edge. The
   v5.4 flex-wrap rule is removed. Type sizes, the 1:08 grid and all
   v5.2/v5.3 items stay the same. */
article.lu-row .lu-row-recent > .lu-order-label,
article.lu-row .lu-row-main > .lu-order-label {
  display: inline;
  margin-right: 0.5em;
}
article.lu-row .lu-row-recent > .act-pill,
article.lu-row .lu-row-main > .act-pill {
  display: inline-block;
  margin-top: 0;
  margin-left: 0;
  margin-right: 0.5em;
  vertical-align: middle;
}

/* v5.6 (Phiz 2:16 PM CT, clarified 2:17): Pass/Watch/Kill buttons
   (up/star/down) scaled 1.10× as a whole: the icon glyph, any label
   text on the button, and the tap box. Nothing else changes. */
article.lu-row button.lu-sq {
  width: calc(22px * 1.1 * var(--lu-row-k)) !important;
  height: calc(22px * 1.1 * var(--lu-row-k)) !important;
  max-width: calc(22px * 1.1 * var(--lu-row-k)) !important;
  font-size: calc(12px * 1.1 * var(--lu-row-k)) !important;
}

/* v5.7 (Phiz 2:55 PM CT; bAIb 3:08 PM CT, final try): Pass/Watch/Kill
   1.10× v5.6, bill-number font 1.18× v5.6, and only the bill number's
   line-height is tightened to explicit px so its box stays the v5.6
   height (22.8px below 1600px, 35.6px at the Phiz view). */
article.lu-row a.bill-id,
.orders-layout article.lu-row a.bill-id.order-bill-id,
html.brand-v2 .orders-layout article.lu-row a.bill-id.order-bill-id {
  font-size: calc(0.95rem * 1.18 * var(--lu-bn-boost) * var(--lu-row-k));
  line-height: 22.8px;
}
@media (min-width: 1600px) {
  article.lu-row a.bill-id,
  .orders-layout article.lu-row a.bill-id.order-bill-id,
  html.brand-v2 .orders-layout article.lu-row a.bill-id.order-bill-id {
    line-height: 35.6px;
  }
}
article.lu-row button.lu-sq {
  width: calc(22px * 1.1 * 1.1 * var(--lu-row-k)) !important;
  height: calc(22px * 1.1 * 1.1 * var(--lu-row-k)) !important;
  max-width: calc(22px * 1.1 * 1.1 * var(--lu-row-k)) !important;
  font-size: calc(12px * 1.1 * 1.1 * var(--lu-row-k)) !important;
}