/* borrow-requests.css - fetch-1574: the borrow order scheduled for a pick-up date - the one request form (a native dialog, full
 * Full note: docs/m3-comment-archive/borrow-requests-css.json #000bfc99f540efd6
 */
dialog.brq-dialog { width: min(44rem, 100vw); max-width: 100vw; max-height: 100dvh; margin: auto; padding: 0; border: 0; border-radius: var(--r-l); background: var(--bg, var(--wash)); color: var(--ink); box-shadow: 0 24px 60px rgba(20, 33, 61, .3); }
dialog.brq-dialog:not([open]) { display: none; }
dialog.brq-dialog::backdrop { background: color-mix(in srgb, var(--ink) 32%, transparent); }
.brq-in { display: flex; flex-direction: column; max-height: 100dvh; }
.brq-head { display: flex; align-items: flex-start; gap: var(--s-3); padding: var(--s-4) var(--s-3) 0 var(--s-5); }
.brq-title { flex: 1 1 auto; min-width: 0; margin: 0; font-size: var(--t-section); font-weight: 700; line-height: 1.3; color: var(--text-heading, var(--navy-dark)); overflow-wrap: anywhere; }
.brq-title small { display: block; margin-top: 2px; font-size: var(--t-sub); font-weight: 500; color: var(--muted); }
.brq-head .btn.icon-btn { flex: 0 0 auto; }
.brq-body { min-height: 0; overflow: auto; overscroll-behavior: contain; padding: var(--s-3) var(--s-5) var(--s-5); }
.brq-fields { margin: 0; padding: 0; border: 0; min-width: 0; } /* the browser's fieldset box is not a card */
.brq-body .field { margin: 0; min-width: 0; }
.brq-body .brq-notes { margin-top: var(--s-4); }
.brq-body .field label, .brq-lines legend { display: block; padding: 0; font-size: var(--t-sub); font-weight: 600; color: var(--navy-dark); margin-bottom: var(--s-2); }
.brq-body input:not([type="hidden"]), .brq-body textarea { display: block; width: 100%; box-sizing: border-box; min-height: var(--control-height-touch); font: inherit; font-size: var(--t-body); padding: var(--s-2) var(--s-3); border: 1px solid var(--line); border-radius: var(--r-s); background: var(--paper); color: var(--ink); }
.brq-body textarea { min-height: calc(var(--control-height-touch) * 1.5); line-height: 1.5; resize: vertical; }
.brq-event-line { margin: 0 0 var(--s-4); font-size: var(--t-body); color: var(--ink); line-height: 1.5; }
.brq-event-line .vchip { font-size: var(--t-sub); }
.brq-ev-list { display: grid; margin-top: var(--s-1); border: 1px solid var(--line); border-radius: var(--r-s); background: var(--paper); overflow: hidden; }
.brq-ev-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--s-2); width: 100%; min-height: var(--control-height-touch); padding: var(--s-2) var(--s-3); border: 0; border-top: 1px solid var(--hair); background: transparent; text-align: left; font: inherit; font-size: var(--t-body); color: var(--ink); cursor: pointer; }
.brq-ev-row:first-child { border-top: 0; }
.brq-ev-row:hover, .brq-ev-row:focus-visible { background: var(--wash); }
.brq-ev-row small { color: var(--muted); font-size: var(--t-sub); }
.brq-ev-none { margin: var(--s-1) 0 0; font-size: var(--t-sub); color: var(--muted); }
.brq-ev-chosen { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-2); font-size: var(--t-body); }
.brq-ev-chosen .vchip { font-size: var(--t-sub); }
.brq-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3) var(--s-4); margin-top: var(--s-4); }
.brq-vpick { flex: none; width: 100%; }
.brq-vpick :is(.pgh-picker-trigger, .pgh-picker-list .pgh-chip) { min-height: var(--control-height-touch); font-size: var(--t-body); box-sizing: border-box; }
.brq-vpick .pgh-picker-list { width: 100%; max-width: 100%; }
.brq-lines { margin: var(--s-4) 0 0; padding: 0; border: 0; min-width: 0; }
.brq-line { display: grid; grid-template-columns: minmax(0, 1fr) 7rem auto; gap: var(--s-2) var(--s-3); align-items: start; padding: var(--s-2) 0; border-top: 1px solid var(--hair); }
.brq-line:first-of-type { border-top: 0; padding-top: 0; }
.brq-line .btn.icon-btn { margin-top: calc(var(--t-sub) * 1.5 + var(--s-2)); } /* level with the inputs, under their labels */
.brq-match { display: block; margin-top: var(--s-1); font-size: var(--t-sub); color: var(--muted); min-height: 1.2em; }
.brq-match--none { color: var(--warn-fg); }
.brq-field-err { display: block; margin-top: var(--s-1); font-size: var(--t-sub); color: var(--bad-fg); }
.brq-lines > .btn { margin-top: var(--s-2); }
.brq-acts { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-3); margin-top: var(--s-4); }
.brq-err { flex: 1 1 12rem; font-size: var(--t-sub); color: var(--bad-fg); }
/* the Loans tab: To be picked up from <venue> */
.brq-section .brq-lede { margin: var(--s-3) 0 0; font-size: var(--t-label); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.brq-section .brq-lede .vchip { font-size: var(--t-sub); letter-spacing: 0; text-transform: none; }
.brq-row-main { min-width: 0; flex: 1 1 auto; }
.brq-row-main strong { overflow-wrap: anywhere; }
.brq-row-main .loan-help { margin: 2px 0 0; }
.brq-row-main .vchip { font-size: var(--t-sub); }
.brq-msg { display: block; margin: 0 0 var(--s-2); font-size: var(--t-sub); color: var(--ok-fg); }
.brq-msg--err { color: var(--bad-fg); }
/* the pull sheet's strip: a placed request beside the venue (event-delivery.js draws it) */
.brq-req { display: inline-flex; align-items: center; gap: var(--s-2); font-size: var(--t-sub); color: var(--ink); font-variant-numeric: tabular-nums; }
@media (max-width: 640px) {
  dialog.brq-dialog { width: 100vw; height: 100dvh; max-height: 100dvh; border-radius: 0; }
  .brq-head { padding: var(--s-3) var(--s-3) 0 var(--s-3); }
  .brq-body { padding: var(--s-3); }
  .brq-grid { grid-template-columns: 1fr; }
  .brq-line { grid-template-columns: minmax(0, 1fr) 6rem auto; }
  .brq-line .btn.icon-btn, .brq-head .btn.icon-btn, .brq-ev-chosen .btn.icon-btn { width: var(--control-height-touch); min-width: var(--control-height-touch); height: var(--control-height-touch); min-height: var(--control-height-touch); }
  .brq-acts .btn, .brq-lines > .btn, .brq-section .btn { min-height: var(--control-height-touch); }
  .brq-req { width: 100%; }
}