/*
 * Lot list (Board design) - Lots.php + cvf/ajax/lots.php
 * Extracted 2026-09-14 from redesign-list/board.php (the chosen redesign), theme tokens
 * (--acc / --acc-rgb / --acc-ink) injected inline by lx_tokens_css().
 */

:root{
  /* The Familiar design's ground and its neutrals: a light, faintly warm
     off-white rather than the cool blue-grey this design started on, and the
     inks to go with it. --warn-* and --bad-* are that design's two alarm
     tones, which its chips are set in. */
  --bg:#F7F7F5; --card:#FFFFFF; --ink:#101317; --ink-2:#3D444E; --mut:#6A7078;
  --warn-bg:#FFF8E6; --warn-ink:#8A6100; --bad-bg:#FDF0EC; --bad-ink:#A8341C;
  --lift:0 1px 2px rgba(16,19,23,.04), 0 6px 18px -6px rgba(16,19,23,.10);
  --lift-2:0 1px 2px rgba(16,19,23,.05), 0 12px 32px -10px rgba(16,19,23,.16);
  /* The last two cool tokens, now the Familiar design's: the panel's border
     and the rules between its sections are set in them. */
  --line:#E7E7E3; --line-2:#F0F0EC; --wash:#F4F4F1; --shell:#12161C; --shell-2:#1D242E;
   
  
  --sans:"Inter",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --hdr:70px; --hdrgap:0px; --bar:58px;
}
body.override{background:var(--bg)}
body.override .bd{font-family:var(--sans);color:var(--ink);font-size:16px;line-height:1.65;-webkit-font-smoothing:antialiased}
:where(body.override .bd) b,:where(body.override .bd) strong{color:inherit}
body.override .bd :where(h1,h2,h3,h4,h5,h6){color:inherit!important;font-family:var(--sans);font-weight:inherit}
.bd,.bd *,.bd *::before,.bd *::after{box-sizing:border-box}
/* Specificity here is deliberately (0,1,0): the class carries the weight and
   :where() zeroes the element, so these beat the legacy bare-element rules but
   tie with any component rule, which then wins on document order because it is
   written later. Getting this wrong in either direction has caused real bugs -
   at (0,1,1) it outranks a design's own `.hero__bg{display:none}`; at (0,0,1)
   it stops beating legacy `a` colours and text turns white on white. */
.bd :where(img){max-width:100%;display:block}
.bd :where(a){color:inherit;text-decoration:none}
/* Bootstrap ships `a:focus,a:hover{color:#23527c;text-decoration:underline}` at
   (0,1,1), which outranks the (0,1,0) reset above - so the moment a link here
   was hovered it grew an underline AND turned Bootstrap's blue, the ones drawn
   as buttons included (a dark blue on the green bid button, which is how the
   site owner found it). Both are undone the same way the resting state is:
   inherit the colour, no underline. Anything that paints its own text on hover
   says so in its own rule further down, which is the same specificity and wins
   by coming later; the controls whose hover is only a background change say it
   in styles/lotx-shared.css, which loads last of all. The underline comes back
   inside the seller's own prose, the one place a plain underline is all a link
   has. */
.bd :where(a):hover,.bd :where(a):focus{color:inherit;text-decoration:none}
.bd-body a:hover,.bd-body a:focus,
.bd .acd-wrap a:hover,.bd .acd-wrap a:focus{text-decoration:underline}
.bd :where(input,button,select){font-family:var(--sans)}
.bd p,.bd h1,.bd h2,.bd h3,.bd h4,.bd ul,.bd ol,.bd dl{margin:0}
	.lx-hide{display:none!important}
/* `width:1em` is the second half of the icon-font fix, and it is about LAYOUT
   rather than about what you can see. While the font is still coming the span
   still holds its ligature text, and "arrow_back" in a fallback face is 108px
   wide where the glyph is 21. Measured on the catalog: 80 of the 103 icons sit
   in pills that size to their contents - every card's timer chip and photo
   count - so they were all bulging and then snapping back. Every glyph in this
   set is exactly 1em, verified across all 103, so this is the icon's own width
   and not a guess. No overflow:hidden with it: the glyph fills its em box, and
   clipping it would cost a row of pixels off every icon to tidy a case that
   only happens if the font never arrives at all. */
.msy{font-family:"Material Symbols Rounded";font-weight:400;font-style:normal;font-size:20px;
  line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;
  word-wrap:normal;direction:ltr;-webkit-font-feature-settings:"liga";-webkit-font-smoothing:antialiased;
  font-variation-settings:"FILL" 0,"wght" 400,"GRAD" 0,"opsz" 24;width:1em}

/* Modal, toast and sheet: incidental furniture, one treatment for all three designs. */
.lx-modal{position:fixed;inset:0;z-index:1200;display:flex;align-items:center;justify-content:center;padding:20px}
.lx-modal[hidden]{display:none}
.lx-modal__scrim{position:absolute;inset:0;background:rgba(12,15,20,.55);backdrop-filter:blur(2px)}
.lx-modal__box{position:relative;background:#fff;border-radius:14px;width:100%;max-width:720px;
  max-height:86vh;display:flex;flex-direction:column;box-shadow:0 24px 70px rgba(10,14,20,.35);overflow:hidden}
.lx-btn{border:1px solid #d7dbe0;background:#fff;color:#1a1d21;border-radius:9px;padding:10px 16px;
  font-size:14.5px;font-weight:600;cursor:pointer;font-family:inherit}
.lx-btn--go{background:var(--acc);border-color:var(--acc);color:var(--acc-ink)}
.lx-toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%);z-index:1300;
  background:#15181d;color:#fff;border-radius:11px;padding:12px 18px;font-size:14px;font-weight:500;
  box-shadow:0 12px 40px rgba(0,0,0,.3);max-width:min(92vw,460px);text-align:center}
.lx-toast[hidden]{display:none}

/* The private auction gate. */
.lx-gate{display:flex;justify-content:center;padding:56px 18px 90px}
.lx-gate__card{width:100%;max-width:420px;background:#fff;border:1px solid #e6e9ee;border-radius:16px;
  padding:34px 30px;text-align:center;box-shadow:0 12px 44px rgba(16,24,40,.08)}
.lx-gate__icon{width:62px;height:62px;margin:0 auto 16px;border-radius:50%;background:rgba(var(--acc-rgb),.12);
  display:flex;align-items:center;justify-content:center;color:var(--acc)}
.lx-gate__icon .msy{font-size:28px}
.lx-gate h2{font-size:22px;font-weight:650!important;margin:0 0 8px!important}
.lx-gate p{color:#6b727b;font-size:15px;margin:0 0 18px!important}
.lx-gate a{color:var(--acc);font-weight:600}
.lx-gate input{width:100%;height:48px;border:1px solid #d7dbe0;border-radius:10px;padding:0 16px;
  font-size:15px;text-align:center;margin-bottom:10px;font-family:inherit}
.lx-gate button{width:100%;height:48px;border:0;border-radius:10px;background:var(--acc);color:var(--acc-ink);
  font-size:15px;font-weight:650;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:inherit}
.lx-gate__note{font-size:12.5px!important;color:#98a0a9!important;margin:14px 0 0!important}

/* Prose the seller wrote (the pop-up notice), left as they wrote it. */
.lx-prose ul,.lx-prose ol{margin:0 0 12px 20px!important;padding-left:14px}
.lx-prose li{margin-bottom:6px}
.lx-prose p{margin:0 0 12px!important}
.lx-prose a{color:var(--acc);text-decoration:underline}

/* The lot preview pane, shared by the four split layouts. */
.lx-pane{position:relative;background:var(--card,#fff);border-left:1px solid var(--line);min-width:0}
/* Neutral greys, no design token: this one panel has to sit as comfortably on
   Nocturne's near black as on Familiar's warm paper. */
.lx-pane__ph{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:13px;padding:26px;text-align:center;color:#9aa1aa}
.lx-pane__shot{width:min(70%,300px);aspect-ratio:4/3;border-radius:10px;display:flex;
  align-items:center;justify-content:center;background:rgba(128,136,148,.1);
  border:1px dashed rgba(128,136,148,.36)}
.lx-pane__shot .msy{font-size:40px;opacity:.5}
.lx-pane__bar{width:min(56%,236px);height:12px;border-radius:6px;background:rgba(128,136,148,.15)}
.lx-pane__bar--wide{width:min(70%,300px);height:17px}
.lx-pane__btn{width:min(70%,300px);height:38px;border-radius:8px;background:rgba(128,136,148,.12)}
.lx-pane__ph p{max-width:330px;font-size:12.5px;line-height:1.55;margin:5px 0 0;opacity:.9}

/* The slot the clocks drop into on a phone. It only takes part in the layout
   when it is holding something.
   The space under the tiles is theirs, not the list's (owner, 2026-09-29: "add
   space below the timers"). With only the tiles' own 2px under them the lot
   count sat hard against them and read as part of the clock. 18px in all now,
   more than the 13px between the count and the cards, so the count goes with
   the lots it counts. A phone has 12, set in its own block with its other
   tighter spacing. */
.lx-clocks-phone:empty{display:none}
.lx-clocks-phone{padding:12px 0 16px}
.lx-now{font-style:normal}

/* The shared timer chip. Colours come from the ACL rules: blue while there is
   time, amber inside the last half hour, red inside the last two minutes. */
/* Pro mode is a desktop instrument. The live site decides that by user agent
   while the page is being built, so a desktop browser dragged down to phone
   width keeps whatever the server sent - which in a preview, where the width
   is the thing being judged, reads as a bug. Below the width where these
   designs seat the panel beside the lots, the maximum bid row stands down,
   leaving the plain bid button a bidder without pro mode sees.
   (The "1 click" badge that used to stand down with it was removed outright
   on 2026-09-25 at the owner's request, so nothing is left to hide.) */
@media (max-width:1000px){
  .lx-bid__max{display:none}
}
.lx-chip{display:inline-flex;align-items:center;gap:5px;border-radius:999px;padding:3px 9px;
  font-size:11.5px;font-weight:650;letter-spacing:.01em;white-space:nowrap;line-height:1.5}
.lx-chip.is-win{background:#e6f6ec;color:#12703a}
.lx-chip.is-lose{background:#fdecec;color:#b32020}
.lx-chip.is-reserve{background:#fff4de;color:#8a5a00}
.lx-chip.bg-blue{background:#e8f0fe;color:#12459e}
.lx-chip.bg-yellow{background:#fff2cd;color:#8a5a00}
.lx-chip.bg-red{background:#fdecec;color:#b32020}
.lx-chip.is-closed,.lx-timer.is-closed b{background:#5b6068;color:#fff;border-radius:999px;
  padding:3px 9px;font-size:11.5px;font-weight:650;display:inline-block}

/* Two columns on a phone leave the max-bid row around 130px, which will not
   hold a currency mark, a nine character amount and a word on a button side by
   side. There the button drops to its own line and takes the whole width, and
   the hairline that divided them moves from its left edge to its top.

   Dense used to do the same, and does not any more (site owner, 2026-09-16:
   "make the submit button similar to how it displays in the Grid view, where
   the input field and the submit button appear in just 1 line"). It was true
   when Dense ran four, five and six cards to a row; now that it stops at three,
   its narrowest card is 204px at 1180px, which leaves the row 178px: 69px of
   input beside a 69px button, on one line. Measured at that width, the input
   holds a placeholder up to "999,999.00" and clips a seven figure one; every
   width above it is roomier (140px of input at 1440). Grid's own behaviour is
   simply the base rule, so Dense gets it by having no rule at all.
   Shared, so the control behaves the same in all eight designs. */
@media (max-width:760px){
  [data-lx-root].is-cols-2 .lx-bid__row{flex-wrap:wrap}
  [data-lx-root].is-cols-2 .lx-bid__in{flex:1 1 0%;min-width:0;width:auto}
  [data-lx-root].is-cols-2 .lx-bid__submit{flex:1 0 100%;border-left:0;
    border-top:1px solid var(--line);padding:8px 10px}
}
	
/* --rail is the Familiar design's panel width, and the sheet it becomes on a
   phone is that design's sheet. */
/* --pad and the gaps below are the Familiar design's: a wider margin down the
   sides, a wider gutter beside the rail, and more air between the cards. */
.bd{--pad:28px;--rail:288px;min-height:60vh;padding-bottom:60px;
  margin-top:calc(var(--hdrgap,0px) * -1)}
@media (max-width:1100px){.bd{--pad:20px}}
.bd :where(button,input,select){font:inherit}
body.override.lx-locked{overflow:hidden}

/* ---------------------------------------------------------------- the bar */
.bd-bar{position:sticky;top:var(--hdr);z-index:60;background:var(--shell);color:#fff;
  border-bottom:1px solid rgba(255,255,255,.08)}
.bd-bar__in{max-width:1720px;margin:0 auto;padding:0 var(--pad);min-height:var(--bar);
  display:flex;align-items:center;gap:14px;flex-wrap:nowrap}
.bd-bar__id{display:flex;align-items:center;gap:11px;min-width:0;flex:0 1 auto}
/* --barbtn is the ONE height every control in the bar is built to: the back
   arrow, the pager, the view switch and the Filters button. They sat at 30, 34
   and 40 and the mismatch showed (owner, 2026-09-17). A phone gets a bigger
   one - these are thumb targets, and 40 was awkward to hit. */
.bd-bar{--barbtn:40px}
@media(max-width:700px){ .bd-bar{--barbtn:44px} }
/* .bd-bar__back and its two glyphs lived here. The catalog bar's back arrow was
   removed on 2026-09-23; see the note in Lots.php. --barbtn still sizes the pager,
   the view switch and the Filters button. */
.bd-bar__name{min-width:0}
.bd-bar__name span{display:block;font-size:11.5px;color:#8E99A8;line-height:1.4}
/* .bd-bar__clear lived here, beside "Searching for ..." in the bar. Both moved
   to the strip over the grid on 2026-09-21, and from there into the Filters
   Applied panel on 2026-10-01; see .bd-on. */

/* The controls run from the LEFT, and the pager alone sits at the right (owner,
   2026-09-29: "move everything else to left side of the screen except for the
   pagination. Pagination must be on the right"). They were one cluster pushed
   right by .bd-bar__id taking the slack.

   The same arrangement the phone has had since 2026-09-25 - see the phone
   block below - and done the same way: the tools span the bar, the pager is
   ordered last and pushed off by margin-left:auto, and the DOM keeps its
   sequence (My list, pager, view, columns, Filters), so a keyboard and a
   screen reader walk it as before. .bd-bar__id is printed only when it has
   something to say (Lots.php), because an empty flex item still costs the
   bar's gap and put My list 14px in from the edge everything below starts
   on. */
.bd-bar__tools{display:flex;align-items:center;gap:9px;flex:1 1 auto;min-width:0}
.bd-bar__tools .bd-pgm{order:9;margin-left:auto}

/* ------------------------------------------- the bar's compact pager
 * Page back, where you are, a dot, where it ends, page forward. It lives in
 * the dark bar, so it is drawn in the bar's own palette rather than the card
 * one: a barely-there well, white for the page you are on, muted for the rest.
 *
 * The separator is a DOT, not a slash or a dash - at 13px a slash reads as
 * part of a number and "1/11" scans as a fraction. A dot is a pause.
 *
 * Built to the same metrics as .lx-views beside it (3px well, 9px radius, one
 * hairline border) so the cluster reads as one set of controls rather than
 * three sizes. The arrows and the total fill --barbtn less the well.
 *
 * tabular-nums so the row does not shuffle sideways as the digits change. */
.bd-pgm{display:flex;align-items:center;flex:0 0 auto;height:var(--barbtn);
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.10);
  border-radius:9px;padding:3px;box-sizing:border-box}
.bd-pgm[hidden]{display:none}
.bd-pgm__a{width:calc(var(--barbtn) - 8px);height:calc(var(--barbtn) - 8px);flex:0 0 auto;
  border:0;border-radius:7px;background:none;color:#C2CCD9;
  display:flex;align-items:center;justify-content:center;padding:0;cursor:pointer;
  transition:background .15s,color .15s,opacity .15s}
.bd-pgm__a:hover:not(:disabled){background:rgba(255,255,255,.15);color:#fff}
.bd-pgm__a:disabled{opacity:.28;cursor:default}
.bd-pgm__a .msy{font-size:22px;line-height:1}
.bd-pgm__n{display:flex;align-items:center;gap:6px;padding:0 4px;font-size:13.5px;
  line-height:1;color:#94A0AE;font-variant-numeric:tabular-nums;white-space:nowrap}
/* "Page" and "of" carry the bar's muted colour so the number between them is
   the only white thing in the group. Reading it as a sentence is most of what
   makes the field obvious (owner, 2026-09-28); the well below is the rest.
   "Page" goes below 700px, where four controls are already competing for the
   row - see the note in Lots.php. */
.bd-pgm__k,.bd-pgm__of{flex:0 0 auto;font-weight:500}
/* The page you are on is a FIELD: tap it, type, press Enter.

   It used to be drawn as the plain bold number it replaced, with no border or
   background until you touched it. Nothing said it could be typed into, so
   nobody typed into it (owner, 2026-09-28). It is now a field at rest.

   It is RECESSED - darker than the group it sits in, with a light hairline -
   and that is the whole trick. The bar is full of little raised wells that are
   buttons (.bd-pgm__a, .bd-pgm__last, .lx-views), so a lighter well here would
   have said "control", not "text box". Dark and sunken is the one treatment in
   the bar's vocabulary that is not already spoken for.

   `font:inherit` keeps it on the bar's type rather than the browser's form
   default, and tabular-nums stops the digits dancing. Its width is set from the
   page count by lx_bar_pager(), so typing does not shuffle the row. */
.bd-pgm__cur{border:0;background:rgba(0,0,0,.34);color:#fff;font:inherit;font-weight:700;
  height:calc(var(--barbtn) - 8px);padding:0 6px;border-radius:7px;text-align:center;
  font-variant-numeric:tabular-nums;cursor:text;min-width:calc(3ch + 14px);
  box-shadow:0 0 0 1px rgba(255,255,255,.22) inset;
  transition:background .15s,box-shadow .15s}
.bd-pgm__cur::-webkit-outer-spin-button,.bd-pgm__cur::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.bd-pgm__cur:hover{background:rgba(0,0,0,.46);box-shadow:0 0 0 1px rgba(255,255,255,.42) inset}
.bd-pgm__cur:focus{outline:0;background:rgba(0,0,0,.52);
  box-shadow:0 0 0 2px var(--acc) inset;color:#fff}
.bd-pgm__cur::selection{background:rgba(255,255,255,.3)}
/* The total is a button: it jumps to the end. Sized as a real target rather
   than bare text, and dead once you are already there. */
.bd-pgm__last{border:0;background:none;color:#94A0AE;font:inherit;cursor:pointer;
  min-width:calc(var(--barbtn) - 14px);height:calc(var(--barbtn) - 8px);padding:0 6px;
  border-radius:7px;display:flex;align-items:center;justify-content:center;
  font-variant-numeric:tabular-nums;transition:background .15s,color .15s,opacity .15s}
.bd-pgm__last:hover:not(:disabled){background:rgba(255,255,255,.15);color:#fff}
.bd-pgm__last:disabled{opacity:.45;cursor:default}
.bd-pgm__a:focus-visible,.bd-pgm__last:focus-visible{outline:2px solid #fff;outline-offset:-2px}
@media(max-width:700px){
  .bd-pgm__n{padding:0 3px;font-size:14px;gap:6px}
  /* The word goes, the field's own treatment and "of" stay: below 700 the bar
     is already dropping controls to fit (see the 360px note further down). */
  .bd-pgm__k{display:none}
  .bd-pgm__a .msy{font-size:24px}
  /* a wider target for the jump to the end - 30px was a thin thing to hit */
  .bd-pgm__last{min-width:38px;padding:0 8px}
}

.bd-ghost{display:inline-flex;align-items:center;gap:7px;height:36px;padding:0 13px;border-radius:9px;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.10);color:#DCE3EB;
  font-size:13.5px;font-weight:550;cursor:pointer;white-space:nowrap;transition:.15s}
.bd-ghost:hover{background:rgba(255,255,255,.16);color:#fff}
.bd-ghost.is-on{background:var(--acc);border-color:var(--acc);color:var(--acc-ink)}
.bd-ghost .msy{font-size:18px}
/* The count of filters applied, on the Filters button (lx_bar_filters() in
   Lots.php). White on the bar's dark and on the accent the button takes while
   the rail is showing, so it reads on both. */
.bd-ghost__n{display:inline-flex;align-items:center;justify-content:center;min-width:19px;height:19px;
  padding:0 5px;margin:0 -3px 0 1px;border-radius:999px;background:#fff;color:var(--ink);
  font-size:11.5px;font-weight:800;line-height:1;font-variant-numeric:tabular-nums}
.bd-ghost__n[hidden]{display:none}
/* The same control, on the pale strip above the lots rather than the dark bar. */
.bd-ghost--light{background:#fff;border-color:var(--line);color:var(--ink-2)}
.bd-ghost--light:hover{background:#fff;border-color:var(--ink);color:var(--ink)}
/* Shown at every width and in every view (owner, 2026-09-23). It used to be
   hidden above 1000px except in Dense and Split, because everywhere else the
   rail was a column that was always there. It can now close that column too -
   see .is-rail-off in the desktop block below - so the button always has
   something to do. */

/* Filters is LIT while the rail is showing - the accent, the same on-state
   My list wears - and left as it was while it is not (owner, 2026-09-29:
   "make the filters button go green when sidebar is shown ... Apply to all
   views"). The accent and not a fixed green, so a white label seller's bar
   lights in their own colour, as My list and the Bid button already do.

   "Showing" is two different tests, the same two the rail's own rules make:
   - where the rail is a COLUMN (Grid, List and Feature above 1000px) it is
     showing unless .is-rail-off has closed it in place;
   - where it is a SHEET (every view at 1000px and under, and Dense and Split
     at any width) it is showing while .is-open has it pulled in.
   CSS rather than a class set from script, so the first paint is already
   right at any width, and a resize or a view switch needs nothing to keep it
   in step. The sheet test is held to the sheet layouts on purpose: .is-open
   stays on the rail if a sheet is left open and the window is widened into a
   column layout, where it means nothing. If the rail's rules ever change
   which views are a sheet, these two blocks change with them. */
@media (min-width:1001px){
  .bd:not(.is-rail-off):not(.is-view-list3):not(.is-view-list4) #bd-filters,
  .bd.is-view-list3:has(#bd-rail.is-open) #bd-filters,
  .bd.is-view-list4:has(#bd-rail.is-open) #bd-filters{background:var(--acc);border-color:var(--acc);
    color:var(--acc-ink)}
}
@media (max-width:1000px){
  .bd:has(#bd-rail.is-open) #bd-filters{background:var(--acc);border-color:var(--acc);color:var(--acc-ink)}
}

/* the layout switch */
.lx-views{display:flex;gap:2px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.10);
  border-radius:9px;padding:3px}
.lx-view-btn{border:0;background:none;color:#93A0B0;width:36px;height:32px;border-radius:7px;
  display:flex;align-items:center;justify-content:center;cursor:pointer;transition:.13s}
.lx-view-btn:hover{background:rgba(255,255,255,.12);color:#fff}
.lx-view-btn.is-on{background:var(--acc);color:var(--acc-ink)}
.lx-view-btn__t{display:none}
.lx-view-btn .msy{font-size:21px}
/* ---------------------------------------------- My List, in the bar
 * A scope toggle, not a sort: it answers "am I looking at everything, or only
 * my own lots?" - so it has to be readable at a glance from across the bar,
 * not just different on close inspection.
 *
 * Off, it is a ghost button like Filters beside it. On, it takes the accent
 * fill AND the star fills in (the "FILL" axis of the variable icon font), so
 * the state reads from the colour at distance and from the shape up close.
 * Two signals rather than one, because a green pill on a dark bar is easy to
 * miss if you are not looking for it. */
.bd-bar__tools .bd-mylist.is-on{background:var(--acc);border-color:var(--acc);color:var(--acc-ink);
  font-weight:650}
.bd-bar__tools .bd-mylist.is-on:hover{filter:brightness(1.06)}

/* the rest of the cluster squares up on --barbtn */
.bd-bar__tools .bd-ghost{height:var(--barbtn)}
.bd-bar__tools .bd-ghost .msy{font-size:19px}
.bd-bar__tools .lx-col-btn{height:32px}
.bd-bar__tools .lx-col-btn .msy{font-size:18px}

/* one column or two, phones only */
.lx-cols{display:none;gap:2px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.10);
  border-radius:9px;padding:3px}
.lx-col-btn{border:0;background:none;color:#93A0B0;height:30px;padding:0 9px;border-radius:6px;
  display:flex;align-items:center;gap:4px;cursor:pointer;font-size:12.5px;font-weight:650}
.lx-col-btn.is-on{background:var(--acc);color:var(--acc-ink)}
.lx-col-btn .msy{font-size:17px}

/* -------------------------------------------------------------- the shell */
.bd-shell{max-width:1720px;margin:0 auto;padding:0 var(--pad);
  display:grid;grid-template-columns:var(--rail) minmax(0,1fr);gap:28px;align-items:start}
.bd .lx-pane{display:none;border-radius:14px;border:1px solid var(--line);overflow:hidden;
  position:sticky;top:calc(var(--hdr) + var(--bar) + 16px);height:calc(100vh - var(--hdr) - var(--bar) - 32px);
  margin-top:16px;background:#fff}

/* ------------------------------------------------------------- the filters */
/* The Familiar design's panel: lifted rather than outlined, with its sections
   parted by the lighter of the two rules. It sits under this design's bar, so
   the sticky offset is the only thing that differs. */
.bd-rail{position:sticky;top:calc(var(--hdr) + var(--bar) + 16px);
  max-height:calc(100vh - var(--hdr) - var(--bar) - 32px);overflow:auto;margin-top:16px;
  background:var(--card);border:1px solid var(--line-2);border-radius:14px;box-shadow:var(--lift-2)}
.bd-rail__x{display:none}
.bd-sec{border-bottom:1px solid var(--line-2)}
.bd-sec:last-child{border-bottom:0}
/* The head is a <button> now, so the button's own chrome has to go before the
   section looks like it did: a browser gives it a background, a border, its own
   font and a centred label. Everything after `cursor` is the original rule. */
.bd-sec__h{display:flex;align-items:center;justify-content:space-between;gap:10px;
  width:100%;background:none;border:0;text-align:left;cursor:pointer;
  padding:17px 17px 0;font-size:11px;letter-spacing:.15em;
  text-transform:uppercase;color:var(--mut);font-weight:600}
/* Closed, the body's own bottom padding has gone with it, so the head has to
   carry it or the section collapses to a line with no room around the label. */
.bd-sec.is-closed .bd-sec__h{padding-bottom:17px}
.bd-sec__h:hover{color:var(--ink)}
.bd-sec__h:focus:not(:focus-visible){outline:none}
/* The chevron points down when the section is open, at the body below it, and
   turns to point at the label when there is nothing under it to point at. */
.bd-sec__x{font-size:20px;transition:transform .18s ease;margin-right:-4px}
.bd-sec.is-closed .bd-sec__x{transform:rotate(-90deg)}
@media(prefers-reduced-motion:reduce){.bd-sec__x{transition:none}}
.bd-sec.is-closed .bd-sec__b{display:none}
.bd-sec__b{padding:0 17px 17px}
.bd-field{margin-top:11px}
.bd-field>label{display:block;font-size:13.5px;color:var(--mut);margin-bottom:5px;font-weight:400}
.bd-field select,.bd-field input{width:100%;height:42px;border:1px solid var(--line);border-radius:10px;
  background:var(--card);padding:0 12px;font-size:14.5px;color:var(--ink);outline:none;transition:.15s}
.bd-field select:focus,.bd-field input:focus{border-color:var(--acc);box-shadow:0 0 0 3px rgba(var(--acc-rgb),.14)}
.bd-lotfind{display:flex;gap:7px}
.bd-lotfind input{flex:1 1 auto;min-width:0}
.bd-lotfind button{flex:0 0 auto;width:42px;height:42px;border-radius:10px;border:1px solid var(--line);
  background:var(--card);color:var(--ink-2);cursor:pointer;display:flex;align-items:center;justify-content:center}
.bd-lotfind button:hover{border-color:var(--ink);color:var(--ink)}

/* One row treatment for both lists, the Familiar design's. */
.bd-cats,.bd-links{display:flex;flex-direction:column;gap:1px;margin-top:10px}
.bd-cats a,.bd-links a{display:flex;align-items:center;gap:9px;padding:9px 10px;border-radius:9px;
  font-size:14px;color:var(--ink-2);transition:.14s}
.bd-cats a{justify-content:space-between}
.bd-cats a:hover,.bd-links a:hover{background:var(--wash);color:var(--ink)}
.bd-cats a.is-on{background:rgba(var(--acc-rgb),.1);color:var(--ink);font-weight:600}
.bd-cats span{font-size:12.5px;color:var(--mut);font-variant-numeric:tabular-nums}
.bd-links .msy{font-size:19px;color:var(--mut);width:19px;text-align:center}

/* The two clocks at the head of the rail: two tinted tiles (owner,
   2026-09-29: "add some color to the two timers - they blend in too much").
   They were grey type on white and on a grey wash, the only clocks on the site
   drawn without colour.

   Each takes the colour its kind of clock already has here. The auction's
   countdown is BLUE, the band every lot countdown sits on - card, lot panel,
   bid dialog - with the same #EEF1FB ground, #D3DBF4 edge, #1B33A3 figure and
   the same timer glyph in front of it. The lot-closing check is AMBER, the
   wash the lot page's own "this lot can close before the auction does" note
   has always been on: it is the same idea, and the reader has met the colour.

   The glyph is ::before, not markup: the countdown rewrites .bd-when__c's
   innerHTML every second, and anything inside it would be gone a second
   later - the same rule as the lot panel's band. */
.bd-when{padding:14px 14px 15px;border:0;background:none;border-radius:0;color:var(--ink-2)}
[data-lx-clocks-side] .bd-when{margin:0}
/* One eyebrow treatment for both clocks, so the pair reads as one thing - in
   each tile's own ink. */
.bd-when__l,.bd-when__n > b{display:block;font-size:11px;letter-spacing:.15em;
  text-transform:uppercase;font-weight:600;line-height:1.5}
/* The auction's own clock, on the blue tile. */
.bd-when__a{background:#EEF1FB;border:1px solid #D3DBF4;border-radius:10px;padding:11px 13px 12px}
.bd-when__l{color:#4A5A96}
.bd-when__c{font-size:18px;line-height:1.25;font-weight:700;color:#1B33A3;
  margin:5px 0 0;font-variant-numeric:tabular-nums}
/* Drawn as a ::before, so the loading screen's icon guard (lx_boot_html())
   names it: no class reaches a pseudo-element. Any other icon drawn this way
   goes into that rule too, or it paints its name while the font loads. */
.bd-when__c::before{content:"timer";display:inline-block;vertical-align:-3px;margin-right:6px;
  font-family:"Material Symbols Rounded";font-weight:400;font-style:normal;font-size:19px;line-height:1;
  letter-spacing:normal;text-transform:none;-webkit-font-feature-settings:"liga";font-feature-settings:"liga";
  font-variation-settings:"FILL" 0,"wght" 500,"GRAD" 0,"opsz" 24}
/* "Closing now" and "Paused" are states, not a countdown: no timer in front. */
.bd-when__c.is-live{color:var(--acc)}
.bd-when__c.is-live::before{content:none}
.bd-when__c u{text-decoration:none;display:inline-block}
.bd-when__c i{font-style:normal;color:#4A5A96;font-size:.7em;font-weight:700;margin-left:1px}
.bd-when__c .dd{margin-right:3px}
.bd-when__v{font-size:13px;font-weight:500;color:#4A5A96;line-height:1.45;margin-top:4px}
/* The lot-closing check, on the amber tile under it. */
.bd-when__n{margin:10px 0 0;padding:11px 13px 12px;background:var(--warn-bg);
  border:1px solid var(--warn-line);border-radius:10px}
.bd-when__n > b{color:#86611A}
.bd-when__nl{display:block}
.bd-when__t{display:block;font-size:15px;font-weight:700;color:var(--warn-ink);line-height:1.25;
  font-variant-numeric:tabular-nums;margin-top:5px}
.bd-when__t.is-ticking{font-size:17px}
/* The check wears the same timer as the auction's countdown above it (owner,
   2026-10-01: "Make sure both has the timer icon"). A ::before for the same
   reason as .bd-when__c's: Lots.php's lx_alc_countdown() rewrites this
   element's contents every second, so a glyph inside it would not survive a
   tick. Sized in em, so it follows the value from the date (15px) to the
   ticking countdown (17px) and down to the phone's sizes. Not in front of
   "Checking now", which is a state, as .bd-when__c drops it for "Closing now".
   It is named in the loading screen's icon guard (lx_boot_html()) with the
   other one. */
.bd-when__t::before{content:"timer";display:inline-block;vertical-align:-.17em;margin-right:6px;
  font-family:"Material Symbols Rounded";font-weight:400;font-style:normal;font-size:1.06em;line-height:1;
  letter-spacing:normal;text-transform:none;-webkit-font-feature-settings:"liga";font-feature-settings:"liga";
  font-variation-settings:"FILL" 0,"wght" 500,"GRAD" 0,"opsz" 24}
.bd-when__t:has(> .rls-now)::before{content:none}
.bd-when__t u{text-decoration:none;display:inline-block}
.bd-when__t i{font-style:normal;color:#86611A;font-size:.7em;font-weight:700;margin-left:1px}
.bd-when__t .dd{margin-right:3px}

/* "Learn more about the timers" (owner, 2026-10-01), under the two tiles,
   opening the same popup as the lot panel's "Learn More". Quiet on purpose:
   it is a footnote to the clocks, so it takes their blue rather than the
   accent, at the size of the date under the countdown, behind an info glyph,
   with an underline that is only a hint until the pointer is on it. A button,
   not a link: it opens a dialog, it does not go anywhere.
   .bd-when__help is the row the three layouts place, so the target is only
   ever as wide as its words. The glyph is sized through the button because
   lotx-shared.css, which loads after this file, sets every .msy to 20px. */
.bd-when__help{margin-top:11px}
.bd-when__more{display:inline-flex;align-items:center;gap:6px;margin:0 0 0 -2px;padding:3px 6px 3px 2px;
  border:0;border-radius:7px;background:none;cursor:pointer;font:inherit;font-size:13px;font-weight:600;
  line-height:1.35;color:#1B33A3;text-align:left;transition:color .15s,background-color .15s}
.bd-when__more .msy{font-size:17px;color:#4A5A96;transition:color .15s}
.bd-when__more-t{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;
  text-decoration-color:rgba(27,51,163,.3);transition:text-decoration-color .15s}
.bd-when__more:hover{color:#132683;background:rgba(27,51,163,.06)}
.bd-when__more:hover .msy{color:#1B33A3}
.bd-when__more:hover .bd-when__more-t{text-decoration-color:currentColor}
.bd-when__more:focus-visible{outline:2px solid #1B33A3;outline-offset:1px}
/* A thumb's worth of target on a touch screen, 38px instead of 24, without
   moving a thing: the padding grows and the margins hand it back. */
@media (pointer:coarse){
  .bd-when__more{padding-top:10px;padding-bottom:10px;margin-top:-7px;margin-bottom:-7px}
}

/* Above the lots - Dense and Split on a desktop, and any view on a tablet -
   the same two tiles stand side by side. The column is wide there, and the
   stack would spend 130px of it on two facts with empty space to their
   right. Each tile is its name over its value, with the date beside the
   countdown, so the pair is about 60px tall and 646px wide. The label is one
   line here.

   Where the column is narrower than that - Dense or Split on a window up to
   about 1250px, which takes in an iPad on its side - the date drops under the
   countdown and the pair stays one row, about 85px tall. The test is the
   slot's own width, as a container query, so it cannot disagree with the
   grid that sets it. Before, the pair was one card on a grid, and at those
   widths the grid squeezed the check into a column narrower than its label,
   which broke it after "Next" - the break the owner pointed at in the rail.
   Two other ways were tried and measured: letting the tiles wrap cost 135px
   there, and letting the date wrap on its own left the clock tile at
   whatever width the row handed it, with up to 160px of empty blue. */
.lx-clocks-phone{container-type:inline-size}
.lx-clocks-phone .bd-when{display:inline-flex;align-items:stretch;gap:10px;
  max-width:100%;padding:0;margin-bottom:2px}
.lx-clocks-phone .bd-when__a,
.lx-clocks-phone .bd-when__n{flex:none;margin:0;padding:10px 16px 11px}
.lx-clocks-phone .bd-when__a{display:grid;grid-template-columns:auto auto;justify-content:start;
  align-items:baseline;align-content:start;column-gap:12px}
.lx-clocks-phone .bd-when__l,
.lx-clocks-phone .bd-when__n > b{font-size:10.5px;letter-spacing:.12em}
.lx-clocks-phone .bd-when__l{grid-column:1/-1}
.lx-clocks-phone .bd-when__c{font-size:17px;margin:3px 0 0}
.lx-clocks-phone .bd-when__v{font-size:12.5px;margin:0}
/* 680 and not 646: some headroom for a fallback font that sets wider. The
   phone block further down sets its own grid and wins where they overlap. */
@container (max-width:679px){
  .lx-clocks-phone .bd-when__a{grid-template-columns:auto}
  .lx-clocks-phone .bd-when__v{margin-top:2px}
}
.lx-clocks-phone .bd-when__nl{display:inline}
/* The check's date sits on the countdown's baseline across the gap (the extra
   3px make up the difference in size). Inside its last day it is a countdown
   too, and then it is the same size as the auction's and needs no help. */
.lx-clocks-phone .bd-when__t{font-size:14px;margin-top:6px}
.lx-clocks-phone .bd-when__t.is-ticking{font-size:17px;margin-top:3px}
/* "Learn more about the timers" on a line of its own under the pair: the row
   takes the whole width, so it always wraps below the tiles, and the tiles
   themselves are as they were - one line, unless they could not fit one,
   where they used to run past the slot instead. */
.lx-clocks-phone .bd-when{flex-wrap:wrap}
.lx-clocks-phone .bd-when__help{flex:0 0 100%;margin-top:-2px}

/* ---------------------------------------------------------------- the list */
.bd-main{min-width:0;padding:18px 0 0}
/* flex-START plus an auto margin on the right-hand block rather than
   space-between, from when the strip had a third child (the search chip, now
   in the Filters Applied panel below). With two children the two are
   identical. */
.bd-strip{display:flex;align-items:center;justify-content:flex-start;gap:14px;flex-wrap:wrap;
  margin-bottom:13px}
.bd-strip__l{font-size:13.5px;color:var(--mut)}
.bd-strip__l b{color:var(--ink);font-weight:650;font-variant-numeric:tabular-nums}
.bd-strip__r{display:flex;align-items:center;gap:8px;margin-left:auto}
.bd-mobtools{display:none;align-items:center;gap:8px}

/* ---- Filters Applied ----
   What is narrowing the list, at the top of the list column whenever anything
   is (owner, 2026-10-01: "show clearly what filters are applied at the top of
   the page and in a very obvious way"). Drawn by cvf/ajax/lots.php (.bd-on),
   dropped into #lx-applied by Lots.php; empty, the slot takes no room.

   A panel rather than a line of grey text, because the whole point is that it
   is not overlooked: the accent's tint over white with an accent edge and a
   solid accent badge, so it reads as the page talking to you rather than as
   more chrome. The head says how many filters and what they cost ("Showing 42
   of 2,600 lots"), each filter is a white chip that takes itself off, and one
   dark button takes them all off. The accent and not the warning amber: the
   lot-closing clock right under it on a phone is amber, and two amber blocks
   in a row read as one message.

   It sizes itself to the column it is in (a container query, not a window
   one), because the column is narrow in the split views at any width: under
   560px the button takes its own full-width row. */
.bd-on-slot{container-type:inline-size;container-name:bdon}
.bd-on-slot:empty{display:none}
.bd-on{display:flex;align-items:center;gap:14px 16px;margin:0 0 16px;padding:14px 14px 14px 16px;
  border-radius:14px;border:1px solid rgba(var(--acc-rgb),.42);
  background:linear-gradient(rgba(var(--acc-rgb),.07),rgba(var(--acc-rgb),.07)),var(--card);
  box-shadow:0 1px 2px rgba(16,19,23,.04),0 8px 22px -14px rgba(var(--acc-rgb),.5)}
.bd-on__i{flex:0 0 auto;width:40px;height:40px;border-radius:50%;background:var(--acc);color:var(--acc-ink);
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 0 0 4px rgba(var(--acc-rgb),.14)}
.bd-on__i .msy{font-size:22px}
.bd-on__b{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:9px}
.bd-on__h{display:flex;align-items:baseline;flex-wrap:wrap;gap:2px 12px;line-height:1.35}
.bd-on__t{font-size:15.5px;font-weight:700;color:var(--ink);letter-spacing:-.005em}
.bd-on__n{font-size:14px;color:var(--ink-2);font-variant-numeric:tabular-nums}
.bd-on__n b{color:var(--ink);font-weight:700}
/* Each half of the count keeps its number with its word: wrapped, "2,600"
   and "hidden" land on the same line. */
.bd-on__m,.bd-on__hd{white-space:nowrap}
/* The dot between "lots match" and "hidden". */
.bd-on__dot{display:inline-block;width:3px;height:3px;margin:0 8px;border-radius:50%;
  background:currentColor;opacity:.6;vertical-align:middle;position:relative;top:-1px}
.bd-on__cs{display:flex;flex-wrap:wrap;gap:8px}
/* The chip IS the remove button - the whole of it, not just the cross - so
   it is a target a thumb cannot miss. */
.bd-on__c{display:inline-flex;align-items:center;gap:5px;max-width:100%;height:34px;margin:0;
  padding:0 5px 0 13px;border-radius:999px;border:1px solid rgba(var(--acc-rgb),.5);background:#fff;
  color:var(--ink);font:inherit;font-size:13.5px;line-height:1;white-space:nowrap;cursor:pointer;
  text-decoration:none;transition:border-color .14s,box-shadow .14s}
.bd-on__c:hover,.bd-on__c:focus-visible{border-color:var(--acc);box-shadow:0 0 0 3px rgba(var(--acc-rgb),.16);
  color:var(--ink);text-decoration:none;outline:none}
.bd-on__k{color:var(--mut);flex:0 0 auto}
/* A long category name or search shortens the VALUE; the cross stays. */
.bd-on__v{font-weight:700;color:var(--ink);min-width:0;overflow:hidden;text-overflow:ellipsis}
.bd-on__x{flex:0 0 auto;width:24px;height:24px;margin-left:3px;border-radius:50%;display:flex;
  align-items:center;justify-content:center;background:rgba(var(--acc-rgb),.12);color:var(--acc);
  transition:background .14s,color .14s}
.bd-on__x .msy{font-size:16px}
.bd-on__c:hover .bd-on__x,.bd-on__c:focus-visible .bd-on__x{background:var(--acc);color:var(--acc-ink)}
.bd-on__all{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;gap:7px;height:42px;
  margin:0;padding:0 18px;border:0;border-radius:10px;background:var(--ink);color:#fff;font:inherit;
  font-size:14px;font-weight:700;white-space:nowrap;cursor:pointer;transition:background .14s,box-shadow .14s}
.bd-on__all:hover,.bd-on__all:focus-visible{background:#262D37;color:#fff;outline:none;
  box-shadow:0 8px 18px -10px rgba(16,19,23,.6)}
.bd-on__all .msy{font-size:19px}
/* A phone, or the narrow column of a split view: one compact card (owner,
   2026-10-01, of the first version: "doesn't look very nice, and consumes too
   much space"). That one was the desktop panel wrapped - the chips in a narrow
   column beside a 40px badge, so each took a row of its own, and the button
   a full-width black bar under them, about 470px for three filters. Now the
   badge, the heading with its count under it, and a compact Clear All share the
   top row, and the chips run the FULL width beneath (.bd-on__b steps aside
   with display:contents so its two children can be placed on the panel's own
   grid). Measured at 375: one row of chips is about 100px all told, three
   filters about 140. */
@container bdon (max-width:560px){
  .bd-on{display:grid;grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"i h a" "c c c";
    align-items:center;gap:10px;margin-bottom:14px;padding:10px 10px 11px 11px;border-radius:12px}
  .bd-on__b{display:contents}
  .bd-on__i{grid-area:i;width:30px;height:30px;box-shadow:0 0 0 3px rgba(var(--acc-rgb),.14)}
  .bd-on__i .msy{font-size:17px}
  .bd-on__h{grid-area:h;flex-direction:column;align-items:flex-start;gap:1px;line-height:1.25}
  .bd-on__t{font-size:14.5px}
  .bd-on__n{font-size:12.5px}
  .bd-on__dot{margin:0 6px}
  .bd-on__cs{grid-area:c;gap:6px}
  .bd-on__c{height:32px;gap:4px;padding:0 4px 0 11px;font-size:13px}
  .bd-on__x{width:24px;height:24px;margin-left:2px}
  .bd-on__x .msy{font-size:15px}
  .bd-on__all{grid-area:a;height:34px;padding:0 13px;border-radius:9px;font-size:13px}
  .bd-on__all .msy{display:none}
}
/* The smallest phones (320): the round badge goes, so the heading and its
   count keep one line each beside Clear All rather than breaking the count. */
@container bdon (max-width:330px){
  .bd-on{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"h a" "c c"}
  .bd-on__i{display:none}
}

.bd-lots{display:grid;gap:20px;grid-template-columns:repeat(4,minmax(0,1fr))}

/* ---------------------------------------------------------------- the card */
.bd-card{background:var(--card);border:1px solid var(--line);border-radius:14px;overflow:hidden;
  display:flex;flex-direction:column;min-width:0;transition:box-shadow .16s,border-color .16s,transform .16s}
.bd-card:hover{border-color:#C7CFD9;box-shadow:0 10px 28px rgba(18,22,28,.09)}
/* The lot that is open in the pane, or the one just come back from. It is one
   card in a page of forty and it has to be findable without hunting, so it is
   a SOLID ring (owner, 2026-09-28): 3px of accent outside the 1px accent
   border, which reads as 4px of green edge, over a faint tint and a coloured
   lift so the card comes forward off the page. It was a 1px border and a 2px
   28%-opacity halo, which at a glance was a pale outline and not a mark.

   The ring is a box-shadow, so it takes no space and cannot push the grid
   around; 3px sits comfortably inside the 20px gap between cards.

   :hover has to be restated. .bd-card:hover and .bd-card.is-active are both
   (0,2,0), so source order alone decides them, and an active card under the
   pointer would otherwise flicker between the two on any reorder of this
   file. (0,3,0) settles it on purpose. */
.bd-card.is-active{border-color:var(--acc);background:rgba(var(--acc-rgb),.035);
  box-shadow:0 0 0 3px var(--acc),0 10px 26px rgba(var(--acc-rgb),.22)}
.bd-card.is-active:hover{border-color:var(--acc);
  box-shadow:0 0 0 3px var(--acc),0 12px 30px rgba(var(--acc-rgb),.3)}
.bd-card.is-bumped{animation:bdbump 1.3s ease}
@keyframes bdbump{0%{box-shadow:0 0 0 3px rgba(255,196,0,.7)}100%{box-shadow:0 0 0 0 rgba(255,196,0,0)}}
.bd-card.is-lot-closed{opacity:.72}

/* The photograph is never cropped and never zoomed: the box has a fixed shape so
   the cards line up, and the picture sits inside it whole, at its own aspect
   ratio, on a soft ground. object-fit:contain, deliberately, not cover. */
/* The Familiar design's treatment of the space beside a photograph that does
   not fill its frame: the same file again underneath, blurred and enlarged to
   cover, with a veil between the two so a busy photograph never fights its own
   backdrop. The frame reads as full and the photograph itself is untouched.
   One file, requested twice, so the second comes from cache. */
.bd-shot{position:relative;background:var(--wash);border-bottom:1px solid var(--line-2);flex:0 0 auto}
/* 3:2 - ONE shape for a lot photograph in every view and at every width
   (owner, 2026-10-02: "decide which should we use universally"). Chosen from
   the photographs themselves: in a live auction (#1984, 145 lots) 46% are 3:2
   landscape, 48% portrait (mostly 2:3) and 6% 4:3, and across the newest 200,000
   pictures in the database two thirds are 3:2 - it is the camera's own shape.
   The photograph is `contain` over a blurred copy of itself, never cropped, so
   the frame decides only how big it is drawn and how much backdrop shows: 3:2
   gives the most photograph for each pixel of card height of every shape tried
   (1:1, 5:4, 4:3, 3:2, 16:10, 2:1), fills its frame best (73% on #1984, 68% at
   16:10), shows a 3:2 picture edge to edge, and draws a portrait 14% larger than
   16:10 did. It costs 6.7% of height over 16:10 - about 15px a card at grid
   width - and stays well short of the 4:3 found "a little bit too big in height"
   on 2026-09-16. It was 16:10 here, 2:1 in Feature and Split, 1:1 for two columns
   on a phone and 3:2 for one; those overrides are gone. List's side-by-side card
   is the one exception, and not a ratio: its photograph is a column as tall as
   the card. */
.bd-shot__a{display:block;aspect-ratio:3/2;position:relative;overflow:hidden}
.bd-shot__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  filter:blur(22px) saturate(.8);transform:scale(1.2);opacity:.5}
.bd-shot__a::after{content:"";position:absolute;inset:0;background:rgba(255,255,255,.4)}
.bd-shot__img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:center;
  background:none;z-index:1}
/* Nothing of the bidder's standing is on the photograph any more. Top bidder /
   Outbid / Reserve not met sat at its top left as a pill (.bd-shot__status)
   from the rebuild until 2026-10-05, when it became the status zone over the
   price and the button - see .bd-price__s below. The photograph is the lot's
   alone again: the watch star and the picture count are all that sit on it.
   The countdown left it earlier still, for the lot's own line (2026-09-23).

   The container stays although no query reads it now. It was the pill's
   (narrow photographs took a smaller pill), and taking container-type away
   would change the containment the star and the picture count have been laid
   out inside since then, for no gain. */
.bd-shot{container-type:inline-size;container-name:bdshot}
/* The countdown, off the photograph and onto the lot's own line (owner,
   2026-09-23). It shared a height and a corner with the lot plate until
   2026-09-28, when both stopped being boxes: they are the two ends of one
   band now and --band-fs is what they share.

   margin-left:auto puts it at the FAR right of the line (owner, same day - it
   sat immediately after the plate at first). An auto margin and not
   justify-content:space-between on the line: the line can hold one child or
   two, and space-between does nothing useful with one, whereas an auto margin
   on the thing being pushed is right either way. The plate keeps the left.

   The shadow it wore on the photograph is gone: it was lifting the pill off a
   picture, and on the card's white body it only looked smudged. */
.bd-lotline__t{display:flex;align-items:center;gap:5px;min-width:0;margin-left:auto}
/* Empty until realtime gives it something - a lot with no closing time yet, and
   every lot on a non-ALC auction. A zero width flex child still takes a gap off
   the line either side of it, so it has to leave the flow entirely. */
.bd-lotline__t:empty{display:none}
/* The countdown is TYPE inside the band now, not a pill of its own: no fill,
   no box, no height. .bg-blue has to be named here, hover included, for the
   reason the note below has always given - override.css paints that legacy
   class site-wide and beats a two-class rule - except that what has to be
   beaten now is its background rather than only its colour. */
.bd-lotline__t .lx-chip,
.bd-lotline__t .lx-chip.bg-blue,
.bd-lotline__t .lx-chip.bg-blue:hover{display:inline-flex;align-items:center;gap:5px;
  height:auto;padding:0;border:0;border-radius:0;background:none;color:#1B33A3;
  font-size:var(--band-fs);font-weight:700;letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;white-space:nowrap}
/* The resting timer colour, #1B33A3 (owner, 2026-09-25, supplied as a swatch
   and sampled from it rather than eyeballed).

   The chip carries the legacy `bg-blue` class because the shared ACL timer
   module in scripts/global.js keys its urgency colours off those class names.
   styles/override.css paints that class site-wide - #1635E4 at rest and a
   DIFFERENT #1134A9 on hover - and it beats the plain `.bd-lotline__t .lx-chip`
   rule below on source order, which is why the timer was that brighter blue
   and why it shifted colour as the pointer crossed it. Both states are pinned
   here; `:hover` needs naming explicitly or override.css's hover still wins.

   Scoped to .bd-lotline__t - the catalog card's timer only (owner: "that is
   for the lot list only"). `bg-blue` is a site-wide legacy class and nothing
   else wearing it moves.

   Only the RESTING colour changes. bg-yellow (under 30 min) and bg-red (under
   2 min) still mean what they meant; they carry no hover in override.css, so
   they were never shifting in the first place. */
/* URGENCY MOVED TO THE BAND, and :has() is how a parent hears about it.
   scripts/global.js writes bg-blue / bg-yellow / bg-red onto the countdown
   itself, which is a child; the only alternative to reading it from the
   parent would be a second class written by a second piece of code onto the
   line, and the two would come apart the first time either changed. */
.bd-lotline__t .lx-chip .msy{font-size:1.07em}
.bd-lotline:has(.lx-chip.bg-yellow){background:var(--warn-bg);border-color:#F0DFB0}
.bd-lotline:has(.lx-chip.bg-yellow) .lx-chip{color:var(--warn-ink)}
.bd-lotline:has(.lx-chip.bg-red){background:var(--bad-bg);border-color:#F3D9CF}
.bd-lotline:has(.lx-chip.bg-red) .lx-chip{color:var(--bad-ink)}
/* Closed: the design's red throughout - the lot number and the word in
   --bad-ink, the edge in --bad-ink at about a third (the Cancel button's own
   red edge), and the light red --bad-bg fill (owner, 2026-09-30, in two
   steps: "Instead of grey color, let's use red for text and band border",
   then "instead of grey background, use a light red"). The last two minutes
   take the same fill (.bg-red above) with a paler edge; what keeps the two
   apart is the stronger edge and the word "Closed" where a countdown would
   be. The lot page's closed band (.fm-clock--shut in lotx-lot.css) is the
   same three colours. */
.bd-lotline:has(.lx-timer.is-closed){background:var(--bad-bg);border-color:rgba(168,52,28,.34)}
.bd-lotline:has(.lx-timer.is-closed) .bd-plate{color:var(--bad-ink)}
.bd-lotline__t .lx-timer.is-closed b{display:inline-flex;align-items:center;
  height:auto;padding:0;border-radius:0;background:none;color:var(--bad-ink);
  font-size:var(--band-fs);font-weight:700;letter-spacing:-.02em}
/* Big enough to hit with a thumb, and the gold goes on the star rather than the
   disc: a solid amber circle drew the eye harder than the price did. */
.bd-star{position:absolute;right:10px;top:10px;z-index:4;width:44px;height:44px;border-radius:50%;
  border:0;background:rgba(16,19,23,.45);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  color:#fff;cursor:pointer;padding:0;display:flex;align-items:center;justify-content:center;
  box-shadow:0 2px 10px rgba(16,19,23,.28);transition:.16s}
.bd-star:hover{background:rgba(16,19,23,.74);transform:scale(1.06)}
.bd-star:focus-visible{outline:2px solid #fff;outline-offset:2px}
.bd-star.is-on{background:rgba(16,19,23,.58);color:#FFC94D}
.bd-star.is-on:hover{background:rgba(16,19,23,.78)}
.bd-star .msy{font-size:21px}
.bd-shot__n{position:absolute;right:10px;bottom:10px;z-index:3;background:rgba(16,19,23,.62);color:#fff;
  border-radius:20px;padding:3px 10px;font-size:12px;font-weight:600;display:flex;align-items:center;gap:5px}
.bd-shot__n .msy{font-size:14px}

/* The lot number is what a bidder navigates by, so it is a plate at the head
   of the card rather than a line of grey type above the name. */
/* Room to match: these are the Familiar design's card measures, which read
   a size larger without changing a single type size. */
.bd-body{padding:15px 16px 0;flex:1 1 auto;min-width:0}
/* ONE BAND, not two slabs (owner, 2026-09-28, choosing this from six drawn
   directions). The lot number and the countdown were two filled pills, one
   near-black and one blue, pushed to opposite ends of the line. They shouted
   at the same volume so neither won, and they were the only two saturated
   fills on an otherwise light card. They are one object now: a tinted band
   across the head of the card, lot number in ink at the left, countdown in
   the timer blue at the right.

   --band-h and --band-fs replace --plate-h / --plate-fs, and the rename is
   the point: they are the BAND's height and the COUNTDOWN's type size now,
   not a shared pill height. The same two names are declared on .fm-clock and
   .fm-modal__lotline for the same reason they always were - three surfaces,
   one pair, no drift.

   The lot number takes half a pixel less than the countdown. At equal size a
   word reads heavier than tabular figures beside it, which is the whole of
   why this is not one number. */
.bd-lotline{--band-h:34px;--band-fs:14px;
  display:flex;align-items:center;justify-content:space-between;gap:10px;min-width:0;
  height:var(--band-h);padding:0 11px;margin-bottom:10px;
  border-radius:9px;background:#EEF1FB;border:1px solid #D3DBF4}
.bd-plate{flex:0 0 auto;background:none;color:var(--ink);
  font-size:calc(var(--band-fs) - .5px);font-weight:700;letter-spacing:-.01em;
  font-variant-numeric:tabular-nums;white-space:nowrap}
.bd-bids{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--mut);
  font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Set on the same scale as the Familiar design's cards: 16px name, 22px
   figure, and the same step down for each of the tighter arrangements. */
.bd-name{font-size:16px;line-height:1.42;color:var(--ink);font-weight:500;
  display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  min-height:2.84em}
.bd-name:hover{color:var(--ink)}

/* The money on one line: the eyebrow over it, the quantity tucked in beside it
   on the same baseline. It was taking three. */
.bd-price{padding:14px 16px 0;display:flex;align-items:baseline;flex-wrap:wrap;gap:0 9px}
.bd-price__l{flex:1 1 100%;font-size:11px;letter-spacing:.15em;text-transform:uppercase;
  color:var(--mut);font-weight:600}
.bd-price__v{font-size:22px;font-weight:700;color:var(--ink);letter-spacing:-.025em;
  font-variant-numeric:tabular-nums;line-height:1.15}
/* Caps now that it reads "QNTY 3" (owner, 2026-09-23), so it takes the caps
   treatment its own sibling label uses two lines up - 11px at .15em - rather
   than the sentence-case sizing "each, 3 available" was written for. Untracked
   caps at this size read as a squashed word, and it sits right beside CURRENT
   BID, which would have made the mismatch obvious. */
/* align-self:center, against the row's align-items:baseline (owner, 2026-09-23:
   "make sure it is vertically centered to the price"). Sharing a baseline with a
   22px figure put this 11px one 3.9px below the figure's optical centre - both
   boxes ended on the same line, which is what baseline means and is not what the
   eye wants beside a number this much bigger. The label above keeps the baseline
   row; only this one steps out of it. */
.bd-price__q{align-self:center;font-size:11px;letter-spacing:.15em;text-transform:uppercase;
  font-weight:600;color:var(--mut);white-space:nowrap;font-variant-numeric:tabular-nums}

.bd-foot{padding:14px 16px 16px}
/* A card with nothing to offer yet - a lot whose auction has not opened, whose
   "Bidding has not opened yet" box was taken out (owner, 2026-10-02) - keeps its
   foot for the bottom padding alone, so the card ends under its starting bid
   with the same spacing as any other. Every view sets its own .bd-foot padding
   at three classes; this beats them all and touches only the top. */
.bd .bd-card .bd-foot:empty{padding-top:0}

/* THE STATUS ZONE (owner, 2026-10-05: "Let's try C. Status Zone", chosen from
   three ideas drawn against the pill it replaces). When this bidder has a
   standing on the lot - Top bidder, Outbid, or leading short of the reserve -
   the price and the Bid button sit on a tint of it, under a 3px rule in it
   across the card, and the status words stand where "Current Bid" was. It takes no height: the price and the foot
   were already there, edge to edge, and the words replace a label of the same
   size. A lot this bidder has no stake in is unchanged.

   [data-lx-status] (.bd-price__s) is the container every realtime writer
   fills, so writing a chip into it, or emptying it, is the whole of what
   colours the zone or clears it: these rules read the chip through :has().
   The three tones and the words' look are in lotx-shared.css, shared with the
   lot page's own zone. The figure needs no label beside the words: there is
   only ever a standing on a lot this bidder has bid on, so it is the current
   bid. The label stays in the markup, under the words, because realtime keeps
   writing it (Starting Bid to Current Bid on a first bid).

   Every view keeps its own price and foot padding; only colour, the rule and
   the gap above it are set here. 10px under the name keeps the rule off a
   two-line name, which the body's 0 bottom padding would otherwise have it
   touching. Pro mode's maximum box is the one white thing in a zone, as a
   field should be. */
.bd-price__s{flex:1 1 100%;min-width:0}
.bd-price__s:empty{display:none}
.bd-price:has(> .bd-price__s .lx-chip) > .bd-price__l{display:none}
.bd-card:has(.bd-price__s .lx-chip) .bd-price,
.bd-card:has(.bd-price__s .lx-chip) .bd-foot{background:var(--zone-bg)}
.bd-card:has(.bd-price__s .lx-chip) .bd-price{box-shadow:inset 0 3px 0 var(--zone-rule)}
.bd-card:has(.bd-price__s .lx-chip) .bd-body{padding-bottom:10px}
.bd-card:has(.bd-price__s .lx-chip) .bd-foot .lx-bid:has(.lx-bid__max){background:#fff}
/* "Reserve not met", the longest of the three, is 140px at the zone's
   tracking and a 320px phone two across gives it 137 (measured; 360 gives
   157). Tighter tracking there takes it to about 131. Narrower still, it ends
   in dots, which the owner chose for this label on 2026-09-29. */
@media (max-width:359px){
  .bd.is-cols-2 .bd-price__s .lx-chip{letter-spacing:.05em}
}

/* ------------------------------------------------------------ bid controls */
.lx-bid{display:flex;flex-direction:column;gap:10px}
.lx-bid__go{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;
  /* A set height, not a floor: a lot with a total under its figure has two
     lines where its neighbour has one, and the buttons down a row have to
     finish level either way. */
  height:52px;padding:0 18px;border-radius:10px;border:1px solid var(--acc);
  background:var(--acc);color:var(--acc-ink);font-size:16px;font-weight:700;cursor:pointer;
  text-align:center;line-height:1.25;transition:.14s;position:relative}
.lx-bid__go:hover{filter:brightness(.94)}
.lx-bid__go.is-quiet{background:#fff;color:var(--ink);border-color:var(--line)}
.lx-bid__go.is-quiet:hover{border-color:var(--ink);filter:none}
.lx-bid__go.is-off,.lx-bid__go:disabled{background:var(--wash);border-color:var(--line);color:var(--mut);cursor:default}
.lx-bid__go.is-off:hover{filter:none}
.lx-bid__go .msy{font-size:18px}
.lx-bid__go-t{display:flex;flex-direction:column;align-items:center;gap:1px;min-width:0;flex:1 1 auto;
  overflow:hidden}
.lx-bid__go-t>span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* The total under the figure wraps rather than losing its end: a card two to a
   row on a small phone is not wide enough for it on one line, and half a money
   amount is worse than two lines. */
.lx-bid__x{font-style:normal;font-size:12px;font-weight:500;opacity:.82;white-space:normal;
  line-height:1.3;max-width:100%}
/* Pro mode's Bid button, which places the bid the moment it is pressed.

   It is DARK (owner, 2026-10-01: "appear in black background - choose a dark
   color that works for our design"): the black bar's own near-black
   (--lx-shell, lotx-shared.css), a step lighter under the pointer
   (--lx-shell-2). The one-click button is the only dark one on the page, so
   pro mode can be told at a glance, and it is the colour the bar at the top
   of the catalog already is.

   "1-Click" shows ONLY while the pointer is on the button (owner, same day:
   "only show the '1 click' on-hover of the bid button") - at rest the amount
   has the whole button to itself, centred. The pill is folded away at the
   right (no width, no padding, no margin, transparent) and opens out on
   hover, in the accent, so it is the one spot of colour on the black; the
   amount is centred in everything left of it and glides over as it opens.
   A keyboard focus opens it too. It stays folded while the bid is in flight
   (the button is disabled then) and on a touch screen, which has no hover
   and would otherwise leave it stuck open after a tap.

   Why it glides rather than sitting on top of the amount: centred, the
   amount leaves too little room on its right at the smaller sizes below
   ("Bid $100,000.00" on a 239px button would be touching it), and a grid
   that makes room for the pill cannot collide with anything. Measured when
   it was always showing: Grid 216px, Dense 228, List 311, Split 349, Feature
   376 at 1440; "Bid $1,000.00" is 113px and the pill 60. The steps below buy
   the amount room first - padding and a pixel off the label at 239px, a
   smaller pill and gap under 206px - and under 150px (Grid at 1024) the pill
   never opens, because beside it the amount would be cut to "Bid $".

   The first column is for the spinner the click handler prepends while the
   bid is in flight, and is nothing the rest of the time. The pill is the
   button's own child, not part of the label, so the label markup is the one
   every other card button has. */
.lx-bid__1c{flex:none;display:inline-flex;align-items:center;padding:2px 7px;border-radius:999px;
  background:rgba(255,255,255,.2);font-size:10.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  line-height:1.3;white-space:nowrap}
.lx-bid__go.is-pro{--oc-gap:14px;--oc-pad:8px;
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:0;padding-left:14px;padding-right:14px;
  background:var(--lx-shell,#12161C);border-color:var(--lx-shell,#12161C);color:#fff;
  box-shadow:0 1px 2px rgba(16,19,23,.14)}
.lx-bid__go.is-pro:hover{filter:none;background:var(--lx-shell-2,#1D242E);border-color:var(--lx-shell-2,#1D242E);
  color:#fff;box-shadow:0 10px 22px -10px rgba(16,19,23,.6)}
.lx-bid__go.is-pro:active{background:var(--lx-shell,#12161C);box-shadow:0 1px 2px rgba(16,19,23,.14)}
/* In flight: still the pro button, only quieter, rather than the grey wash a
   disabled card button takes - that grey is for "you cannot bid here". */
.lx-bid__go.is-pro:disabled{background:var(--lx-shell,#12161C);border-color:var(--lx-shell,#12161C);
  color:#fff;opacity:.78;cursor:progress;box-shadow:none}
.lx-bid__go.is-pro>.lx-bid__go-t{grid-area:1/2}
.lx-bid__go.is-pro>.fa-spin{grid-area:1/1;margin-right:8px}
.lx-bid__go.is-pro>.lx-bid__1c{grid-area:1/3;max-width:0;margin-left:0;padding-left:0;padding-right:0;
  overflow:hidden;opacity:0;background:var(--acc);color:var(--acc-ink);
  transition:max-width .22s ease .04s,margin-left .22s ease .04s,padding .22s ease .04s,opacity .12s ease}
@media (hover:hover){
  .lx-bid__go.is-pro:not(:disabled):hover>.lx-bid__1c{max-width:88px;margin-left:var(--oc-gap);
    padding-left:var(--oc-pad);padding-right:var(--oc-pad);opacity:1;
    transition:max-width .28s cubic-bezier(.2,.8,.2,1),margin-left .28s cubic-bezier(.2,.8,.2,1),
      padding .28s cubic-bezier(.2,.8,.2,1),opacity .2s ease .08s}
}
.lx-bid__go.is-pro:not(:disabled):focus-visible>.lx-bid__1c{max-width:88px;margin-left:var(--oc-gap);
  padding-left:var(--oc-pad);padding-right:var(--oc-pad);opacity:1}
@media (prefers-reduced-motion:reduce){
  .lx-bid__go.is-pro>.lx-bid__1c,
  .lx-bid__go.is-pro:not(:disabled):hover>.lx-bid__1c{transition:none}
}
.lx-bid{container-type:inline-size;container-name:lxbid}
@container lxbid (max-width:239px){
  .lx-bid__go.is-pro{padding-left:10px;padding-right:10px;--oc-gap:12px}
  .lx-bid__go.is-pro [data-lx-nextlabel]{font-size:min(15px,1em)}
}
@container lxbid (max-width:205px){
  .lx-bid__go.is-pro{padding-left:6px;padding-right:6px;--oc-gap:8px;--oc-pad:5px}
  .lx-bid__go.is-pro [data-lx-nextlabel]{font-size:min(14px,1em)}
  .lx-bid__go.is-pro>.lx-bid__1c{font-size:9px;padding-top:1px;padding-bottom:1px;letter-spacing:.04em}
}
@container lxbid (max-width:149px){
  .lx-bid__go.is-pro>.lx-bid__1c{display:none}
}
.lx-bid__link{text-align:center;font-size:13.5px;color:var(--mut)}
.lx-bid__link:hover{color:var(--acc)}
.lx-bid__max>label{display:flex;align-items:baseline;justify-content:space-between;gap:8px;
  font-size:13px;color:var(--mut);margin-bottom:6px;white-space:nowrap;min-width:0}
.lx-bid__max>label>span,.lx-bid__max>label>b{overflow:hidden;text-overflow:ellipsis}
.lx-bid__max>label b{color:var(--ink-2);font-weight:700;font-variant-numeric:tabular-nums}
.lx-bid__max>label span{font-size:12px}
.lx-bid__row{display:flex;align-items:stretch;border:1px solid var(--line);border-radius:9px;
  background:#fff;overflow:hidden;transition:.14s}
.lx-bid__row:focus-within{border-color:var(--acc);box-shadow:0 0 0 3px rgba(var(--acc-rgb),.14)}
.lx-bid__cur{display:flex;align-items:center;padding:0 2px 0 12px;color:var(--mut);font-size:14.5px;font-weight:600}
.lx-bid__in{flex:1 1 auto;min-width:0;border:0;outline:none;height:42px;padding:0 8px;font-size:14.5px;
  color:var(--ink);font-variant-numeric:tabular-nums;background:none}
.lx-bid__submit{flex:0 0 auto;border:0;border-left:1px solid var(--line);background:var(--wash);
  color:var(--ink);font-size:13.5px;font-weight:600;padding:0 15px;cursor:pointer}
.lx-bid__submit:hover{background:var(--acc);color:var(--acc-ink);border-color:var(--acc)}

/* Only where both halves exist. A lot that is closed, a visitor who has not
   signed in, or any width where pro mode stands down, gets a single control
   and should not be given a frame around nothing. */
@media (min-width:1001px){
.bd-foot .lx-bid:has(.lx-bid__max){gap:0;border:1px solid var(--line);border-radius:12px;
  background:#fff;overflow:hidden}
.bd-foot .lx-bid:has(.lx-bid__max) .lx-bid__go{border-radius:0;border:0;height:52px}
/* The pro button is the top half of this frame, so it casts no shadow: under
   the pointer one would only fall across the maximum row beneath it. */
.bd-foot .lx-bid:has(.lx-bid__max) .lx-bid__go.is-pro,
.bd-foot .lx-bid:has(.lx-bid__max) .lx-bid__go.is-pro:hover{box-shadow:none}
.bd-foot .lx-bid:has(.lx-bid__max) .lx-bid__max{border-top:1px solid var(--line)}
.bd-foot .lx-bid:has(.lx-bid__max) .lx-bid__max>label{margin:0;padding:9px 12px 0;gap:8px}
.bd-foot .lx-bid:has(.lx-bid__max) .lx-bid__max>label span{font-size:11.5px}
.bd-foot .lx-bid:has(.lx-bid__max) .lx-bid__row{border:0;border-radius:0;background:none}
.bd-foot .lx-bid:has(.lx-bid__max) .lx-bid__row:focus-within{box-shadow:none}
.bd-foot .lx-bid:has(.lx-bid__max) .lx-bid__row:focus-within .lx-bid__in{color:var(--ink)}
.bd-foot .lx-bid:has(.lx-bid__max) .lx-bid__submit{border-left:1px solid var(--line);
  background:none;border-radius:0}
.bd-foot .lx-bid:has(.lx-bid__max) .lx-bid__submit:hover{background:var(--acc);color:var(--acc-ink)}
}

/* ------------------------------------------------------------- the pager */
.bd-pager{display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap;margin-top:26px}
.bd-pages{display:flex;align-items:center;gap:4px}
.bd-pages a,.bd-pages span,.bd-pages b{min-width:38px;height:38px;border-radius:9px;display:flex;
  align-items:center;justify-content:center;font-size:14px;color:var(--ink-2);background:#fff;
  border:1px solid var(--line);font-variant-numeric:tabular-nums;padding:0 10px}
.bd-pages a:hover{border-color:var(--ink);color:var(--ink)}
.bd-pages b{background:var(--ink);border-color:var(--ink);color:#fff;font-weight:650}
.bd-pages span{border:0;background:none;color:var(--mut);min-width:20px}
.bd-jump{display:flex;align-items:center;gap:7px;font-size:13px;color:var(--mut)}
.bd-jump input{width:66px;height:38px;border:1px solid var(--line);border-radius:9px;text-align:center;
  font-size:14px;outline:none;background:#fff}
.bd-jump input:focus{border-color:var(--acc)}
/* Back to the top of the list: the arrow alone, in a square.

   It is the lot page's .fm-up said in this row's colours (owner,
   2026-09-28). .fm-up is a 50px accent-tinted square with an accent edge,
   which is right at the foot of a lot page and wrong here: this row is a
   line of neutral 38px tiles, and a green 50px one in it would read as a
   different kind of control that had wandered in. So the SHAPE is borrowed
   and the colour is not, and it takes the tiles' own height and radius so
   its edges line up with theirs.

   Square, so the width is the height - no padding, and no gap to close up
   once the label went.

   Every value a site-wide <button> rule could reach is set here on purpose:
   this row already needed .bd-jump rescuing from Bootstrap and the site's
   form styles (see the notes in lotx-shared.css). */
.bd-top{display:inline-flex;align-items:center;justify-content:center;
  width:38px;height:38px;padding:0;border:1px solid var(--line);border-radius:9px;
  background:#fff;color:var(--ink-2);line-height:1;cursor:pointer;-webkit-appearance:none;
  appearance:none;margin:0;transition:border-color .15s,color .15s,background .15s}
.bd-top:hover{border-color:var(--ink);color:var(--ink);background:var(--wash)}
.bd-top .msy{font-size:20px;line-height:1}
.bd-top:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
/* On a one-page list there is no <nav> to sit in, only this. */
.bd-pager--solo{margin-top:22px}

.bd-scrim{position:fixed;inset:0;background:rgba(12,15,20,.5);z-index:1240;display:none}
/* The sheet is not only a phone thing any more, so neither is what sits
   behind it. */
.bd-scrim.is-open{display:block}
.bd-empty{background:#fff;border:1px solid var(--line);border-radius:14px;padding:52px 24px;text-align:center}
.bd-empty .msy{font-size:38px;color:#C3CBD5}
.bd-empty h3{font-size:18px;font-weight:650!important;margin:12px 0 6px!important;color:var(--ink)}
.bd-empty p{color:var(--mut);font-size:14.5px}
.bd-empty a{color:var(--acc);font-weight:600}

/* =====================================================================
 * The five desktop arrangements. The markup never changes; these do.
 * ================================================================== */
@media (min-width:1001px){
  /* GRID IS ALWAYS FOUR ACROSS on a desktop (owner, 2026-09-23: "make it show
     4 per row no matter how big the screen is it should always show 4"). It
     used to climb two, three, four, five, six across 1001 / 1180 / 1520 / 1900
     / 2400, which meant the same list answered a different shape on every
     machine. One number is easier to design around and easier to recognise.

     What that costs, measured with four across rather than guessed at: the rail
     takes 288px off every one of these widths, so a card comes out 171px at a
     1100px window, 212px at 1280 and 252px at 1440, against the ~270px this
     design reckons a card wants. Nothing truncates at any of them - the only
     box that overflows is .bd-shot__a, which is the photograph's own crop and
     scales with the card - so these are small cards, not broken ones. Below
     1001px none of this applies: the phone and tablet run off their own
     one-or-two column switch (.bd-is-cols-*) further down. */
  .bd.is-view-grid  .bd-lots{grid-template-columns:repeat(4,minmax(0,1fr))}
  .bd.is-view-list3 .bd-lots{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  /* SPLIT IS ALWAYS TWO ACROSS on a desktop (owner, 2026-09-23), the same
     request and the same reasoning as Grid above. It used to go to three at
     1900 and four at 2400; this is the only rule now. Its own hint in
     lx_views() has always said "Two cards across beside the preview", which
     is finally true at every width. */
  .bd.is-view-list4 .bd-lots{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
  .bd.is-view-list  .bd-lots,
  .bd.is-view-list2 .bd-lots{grid-template-columns:minmax(0,1fr);gap:14px}

  /* the four split layouts put the lot itself beside the list */
  /* List and Feature keep the rail as a column, so the lots and the lot share
     what is left. 42/58 left the card 259px on a 1000px window - a 170px
     photograph and 87px for everything else, with the bid button spilling out
     of the card - so the split is closer to even. */
  .bd.is-view-list  .bd-shell,
  .bd.is-view-list2 .bd-shell{grid-template-columns:var(--rail) minmax(0,52fr) minmax(0,48fr)}
  /* The same two splits with the rail closed. It sits HERE, beside the rule it
     mirrors, and not with the other .is-rail-off rules further down: both are
     (0,4,1), so whichever comes last wins, and further down it beat Feature's
     wider 40/60 inside the 1280 block and collapsed it to 52/48. Measured that
     way round before it was moved. */
  .bd.is-rail-off.is-view-list  .bd-shell,
  .bd.is-rail-off.is-view-list2 .bd-shell{grid-template-columns:minmax(0,52fr) minmax(0,48fr)}

  /* Feature only, and only when the window can afford it. The lot detail is the
     whole point of this layout, so above 1280px it takes 60% of what the rail
     leaves and the list takes 40% (site owner, 2026-09-16: "make the lot-detail
     wider, making the list of lots narrower"). Below 1280 the 52/48 above
     stands: the same 40/60 leaves the card 280px at 1100 and 250px at 1024,
     which is the squeeze the comment above was written about. Measured at
     1440px - the lot goes 499px to 624, the card 541 to 416. */
  @media (min-width:1280px){
    .bd.is-view-list2 .bd-shell{grid-template-columns:var(--rail) minmax(0,40fr) minmax(0,60fr)}
    .bd.is-rail-off.is-view-list2 .bd-shell{grid-template-columns:minmax(0,40fr) minmax(0,60fr)}
  }
  .bd.is-view-list3 .bd-shell,
  .bd.is-view-list4 .bd-shell{grid-template-columns:minmax(0,58fr) minmax(0,42fr)}
  .bd:not(.is-view-grid) .lx-pane{display:block}

  /* ---- the rail closing IN PLACE (owner, 2026-09-23) ----------------------
     Two different disappearances, and which one happens is decided by the
     view, not by this class. Dense and Split are excluded below because their
     rail is a fixed sheet that floats over the page and their shell never had
     a rail column to give back - closing it there is the sheet sliding off,
     which the rules further down already do.
     Everywhere else the rail IS a column, so closing it means dropping that
     column from the shell and taking the rail out of the flow. The lots widen
     into the space because the grid recomputes, and opening it again puts the
     column back and pushes them right. There is nothing to animate and nothing
     overlapping: it is the same layout with one fewer track. */
  .bd.is-rail-off:not(.is-view-list3):not(.is-view-list4) .bd-rail{display:none}
  .bd.is-rail-off.is-view-grid  .bd-shell{grid-template-columns:minmax(0,1fr)}

  /* Dense and Split are the tight ones - four or two cards beside a full
     lot preview - so there the rail gives its column back to the lots and
     becomes a sheet, and the Filters button appears to pull it in. */
  .bd.is-view-list3 .bd-rail,
  .bd.is-view-list4 .bd-rail{position:fixed;inset:0 auto 0 0;width:min(92vw,394px);
    max-height:none;height:100%;margin:0;border-radius:0;border:0;
    border-right:1px solid var(--line);z-index:1250;transform:translateX(-100%);
    transition:transform .22s ease;overflow:auto;touch-action:pan-y}
  .bd.is-view-list3 .bd-rail.is-open,
  .bd.is-view-list4 .bd-rail.is-open{transform:none;box-shadow:0 0 60px rgba(16,22,30,.22)}
  .bd.is-view-list3 .bd-rail__x,
  .bd.is-view-list4 .bd-rail__x{display:flex;align-items:center;justify-content:space-between;
    padding:14px 15px;border-bottom:1px solid var(--line-2);position:sticky;top:0;
    background:#fff;z-index:2}

  /* List: the card lies down. The list column beside a full lot preview is
     only ever about five hundred pixels wide, so the photograph takes one
     column and everything else stacks in the other - a third column for the
     bid button would leave the name about ninety pixels to live in. */
  /* A grid item is min-width:auto, which is its min-content width: the bid
     button's own text was making the second column wider than the card and
     spilling out of it. These three may be as narrow as the column is. */
  .bd.is-view-list .bd-body,
  .bd.is-view-list .bd-price,
  .bd.is-view-list .bd-foot{min-width:0}
  .bd.is-view-list .bd-lots{container-type:inline-size;container-name:bdlist}
  /* One card to a row here, and not by luck. The rule below lays this card
     DOWN - photograph in one column, everything else in the other - and the
     @container query further down is what stands it back up when the column
     gets too narrow to hold both. That query measures .bd-lots, the whole GRID.
     So the moment anything gives this grid a second column, the query goes on
     reading the full grid width, the card stays lying down on half of it, and
     the right hand column collapses into an unreadable strip: a clipped name,
     a clipped price, and bid text printed outside its own button (reported
     2026-09-16, "the list appears unusable").
     Pinning the column count makes the grid width and the card width the same
     number, which is exactly what the query below assumes. It is !important
     because it is an invariant that rule depends on, not a preference - and it
     lives in this block so that if the breakpoint for lying the card down ever
     moves, the guarantee moves with it. */
    .bd.is-view-list .bd-lots{grid-template-columns:minmax(0,1fr)!important}
  .bd.is-view-list .bd-card{display:grid;grid-template-columns:minmax(170px,36%) minmax(0,1fr);
    grid-template-rows:auto auto auto;
    grid-template-areas:"shot body" "shot price" "shot foot";align-items:stretch}
  .bd.is-view-list .bd-shot{grid-area:shot;border-bottom:0;border-right:1px solid var(--line-2)}
  .bd.is-view-list .bd-shot__a{height:100%;aspect-ratio:auto;min-height:158px}
  .bd.is-view-list .bd-body{grid-area:body;padding:14px 16px 0}
  .bd.is-view-list .bd-name{-webkit-line-clamp:2;line-clamp:2;min-height:0}
  .bd.is-view-list .bd-price{grid-area:price;padding:10px 16px 0;
    display:flex;align-items:baseline;gap:9px;flex-wrap:wrap}
  .bd.is-view-list .bd-price__v{font-size:21px}
  .bd.is-view-list .bd-price__l{align-self:center}
  .bd.is-view-list .bd-foot{grid-area:foot;padding:12px 16px 15px}
  /* Below this the photograph and the reading cannot sit side by side without
     one of them being unreadable, so the card stands up - the same card, the
     same order, the photograph across the top. A column query, not a window
     one: what matters is the width this card actually got. */
  @container bdlist (max-width:400px){
    .bd.is-view-list .bd-card{grid-template-columns:minmax(0,1fr);
      grid-template-areas:"shot" "body" "price" "foot"}
    .bd.is-view-list .bd-shot{border-right:0;border-bottom:1px solid var(--line-2)}
    .bd.is-view-list .bd-shot__a{height:auto;min-height:0;aspect-ratio:3/2}
    .bd.is-view-list .bd-name{-webkit-line-clamp:2;line-clamp:2}
  }

  /* Feature: the card stands up and the photograph takes the whole width of
     the column, whole and uncropped, with the name, the price and the bid
     underneath it. One lot at a time, shown properly. */
  /* Feature and Split had a 2:1 photograph of their own (site owner,
     2026-09-16: the card beside a full lot detail is a way IN to a lot, and its
     photograph was the tallest part of it). Gone with the one-shape rule of
     2026-10-02 (.bd-shot__a): at 2:1 a portrait lot - half of a real auction -
     was a third of the card wide. They take the catalog's 3:2 like every view. */
  .bd.is-view-list2 .bd-body{padding:17px 18px 0}
  .bd.is-view-list2 .bd-name{font-size:18px;-webkit-line-clamp:2;line-clamp:2}
  .bd.is-view-list2 .bd-price{padding:15px 18px 0}
  .bd.is-view-list2 .bd-price__v{font-size:27px}
  .bd.is-view-list2 .bd-foot{padding:15px 18px 17px}

  /* Dense: everything one notch smaller, so three fit beside the lot with room
     for a two line name and a whole bid button. It used to be four, which the
     site owner asked to drop to three (2026-09-16). The page margin is not part
     of the notch down - it stays the width every other view uses. */
  .bd.is-view-list3 .bd-card{border-radius:11px}
  .bd.is-view-list3 .bd-body{padding:10px 11px 0}
  /* The plate carries the word "Lot" since 2026-09-25, which is about 30px
     wider, and in these narrow cards a four digit number beside a full
     d/h/m/s countdown no longer fits: measured at 375 in two columns, a
     165px line was being asked to hold 69 + 7 + 113, and the countdown was
     clipped mid-digit at the card edge. Wrapping costs a line only when it
     is actually needed - "Lot 7" beside the same chip still sits on one. */
  /* The band absorbs what the two pills used to cost here. Two pills meant
     two sets of side padding on one line; one band has one, so the wrap
     these rules were fighting is not in reach any more and flex-wrap goes
     with it. */
  .bd.is-view-list3 .bd-lotline{--band-h:30px;--band-fs:12.5px;padding:0 9px;margin-bottom:8px}
  .bd.is-view-list3 .bd-name{font-size:13.5px;-webkit-line-clamp:2;line-clamp:2;min-height:2.7em}
  .bd.is-view-list3 .bd-price{padding:9px 11px 0}
  .bd.is-view-list3 .bd-price__v{font-size:17px}
  .bd.is-view-list3 .bd-foot{padding:9px 11px 11px}
  .bd.is-view-list3 .lx-bid{gap:7px}
  .bd.is-view-list3 .lx-bid__go{height:42px;font-size:13.5px;padding:0 8px}
  /* The one notch down that keeps Submit on the line beside the input at
     Dense's narrowest card (204px at 1180px): 15px of padding either side left
     the input 78px, two short of a "1,250,000.00" placeholder. */
  .bd.is-view-list3 .lx-bid__submit{padding:0 11px}
  .bd.is-view-list3 .lx-bid__max>label span{display:none}
  .bd.is-view-list3 .bd-star{width:36px;height:36px;right:7px;top:7px}
  .bd.is-view-list3 .bd-star .msy{font-size:17px}
  .bd.is-view-list4 .bd-price__v{font-size:21px}
}

/* The Familiar design's ladder, step for step, so the two show the same number
   of lots at the same width: a card wants about 270px to hold a two line name,
   a figure and an untruncated bid button without squeezing, and after the rail
   and the gutters these are the widths where that lands.

   GRID NO LONGER CLIMBS IT - it is pinned at four from 1001px up, see the note
   there. The steps below are what is left of the ladder, and they belong to
   Dense (list3) and Split (list4) only. */
@media (min-width:1180px){
  .bd.is-view-list3 .bd-lots{grid-template-columns:repeat(3,minmax(0,1fr))}
  /* Dense stops at three. It used to climb to four, five and six with Grid -
     the site owner asked for three across at every width above this one
     (2026-09-16), so there is deliberately no list3 step in the blocks below
     this point. Grid and Split keep their own ladders. */
}
@media (min-width:1900px){
  .bd{--pad:36px}
  /* List stays one to a row at every width: two of these side by side is a
     332px card, which is the squash above. */
}

/* ------------------------------------------------------- tablet and phone */
@media (max-width:1000px){
  .bd{--pad:20px;--bar:52px}
  .bd-shell{grid-template-columns:minmax(0,1fr);gap:0}
  .bd .lx-pane{display:none!important}
  .bd-bar__in{gap:9px}
  .bd-bar__tools .lx-views{display:none}
  .lx-cols{display:flex}
  .bd-mobtools{display:none}                /* one column switch, in the bar */
  .bd-main{padding-top:14px}

  /* The filters become a sheet from the side rather than a column. */
  /* `touch-action:pan-y` is what makes the swipe-to-close reliable rather
     than occasional: it hands the browser the vertical scrolling this sheet
     really does need and keeps the horizontal axis for the page, so a
     sideways drag is never claimed as a scroll before the handler in
     Lots.php has seen 12px of it and can preventDefault. Only on the two
     rules that make the rail a SHEET - as a plain column it has no gesture. */
  .bd-rail{position:fixed;inset:0 auto 0 0;width:min(92vw,394px);max-height:none;height:100%;
    margin:0;border-radius:0;border:0;border-right:1px solid var(--line);z-index:1250;
    transform:translateX(-100%);transition:transform .22s ease;overflow:auto;touch-action:pan-y}
  .bd-rail.is-open{transform:none;box-shadow:0 0 60px rgba(0,0,0,.3)}
  .bd-rail__x{display:flex;align-items:center;justify-content:space-between;padding:14px 15px;
    border-bottom:1px solid var(--line-2);position:sticky;top:0;background:#fff;z-index:2}
  .bd-rail__x b{font-size:15px;font-weight:650}
  .bd-rail__x button{border:0;background:var(--wash);width:32px;height:32px;border-radius:8px;cursor:pointer;
    display:flex;align-items:center;justify-content:center;color:var(--ink-2)}

  /* One column or two, the reader's choice. */
  .bd.is-cols-1 .bd-lots{grid-template-columns:minmax(0,1fr)!important;gap:14px}
  .bd.is-cols-2 .bd-lots{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px}

  .bd.is-cols-2 .bd-body{padding:10px 11px 0}
  /* THE PAIR STAYS ON ONE LINE HERE (owner, 2026-09-25). The plate gained the
     word "Lot" earlier the same day and a four digit number beside a full
     d/h/m/s countdown stopped fitting: measured at 375 in two columns, a 165px
     line was being asked to hold 69 + 7 + 113, a deficit of 24px. It wrapped
     to two lines, which is what this now buys back.

     28px reclaimed, against 24 needed, WITHOUT touching the type size or
     shortening the countdown:
       17  the chip's clock glyph and the 4px gap beside it. A display:none
           child leaves the flex line entirely, so the gap goes with it.
        3  the gap between plate and chip, 7 -> 4
        4  the chip's side padding, 8 -> 6
        4  the plate's side padding, 8 -> 6

     The glyph is the one thing here that carries no information: the chip is
     already the only coloured box on the card and the plate beside it says
     "Lot", so nothing is ambiguous without it. The seconds are kept, which
     is the alternative 24px and a question for the owner, not for this rule.

     flex-wrap stays as a LAST RESORT rather than as the layout. Four digits
     is the longest lot number in the data these were measured against; a
     longer one drops to a second line instead of being clipped at the card
     edge, which is the failure this replaced. */
  /* Same here, and the glyph comes BACK. It was hidden on 2026-09-28 to buy
     17px for a line that was 24px short; the band gives that back and more
     by charging one set of side padding instead of two, so the clock face
     can have its clock again. */
  .bd.is-cols-2 .bd-lotline{--band-h:30px;--band-fs:12.5px;padding:0 8px;margin-bottom:8px;gap:6px}
  .bd.is-cols-2 .bd-name{font-size:14px;min-height:2.8em}
  .bd.is-cols-2 .bd-price{padding:9px 11px 0}
  .bd.is-cols-2 .bd-price__v{font-size:18px}
  .bd.is-cols-2 .bd-foot{padding:9px 11px 11px}
  .bd.is-cols-2 .lx-bid__go{height:46px;font-size:14px;padding:0 8px}
  /* The total stays two to a row now that it reads "x 2 = $23,000.00" rather
     than a sentence: 92px at this size, inside 105px of button even on the
     narrowest phone. */
  .bd.is-cols-2 .lx-bid__x{font-size:11px}
  /* Both column counts take the catalog's 3:2 (.bd-shot__a, 2026-10-02): two
     columns had a square, one column already had 3:2. */
  .bd.is-cols-1 .bd-price{display:flex;align-items:flex-end;justify-content:space-between;gap:12px}
  .bd.is-cols-1 .bd-price__v{font-size:24px}
}
@media (max-width:700px){.bd{--pad:12px}}

/* Two columns between 601 and 1000px had their own 16:10 here, to keep the phone's
   square from growing into a 454px photograph at 950px. With no square any more
   (.bd-shot__a, 2026-10-02) the band takes the catalog's 3:2 like everywhere else. */


/* A phone cannot fit the auction name, the clock and the controls on one line
   without shaving the name down to three letters, so the bar takes two. */
/* The narrowest phones, two to a row: about 98px of button, which the figure
   needs every pixel of. */
@media (max-width:360px){
  .bd.is-cols-2 .lx-bid__go{font-size:13.5px;padding:0 6px}
}
@media (max-width:640px){
  /* One line, not two. The bar keeps the auction and the way out of it; the
     column switch moves down to the strip, which is a row this page already
     draws and which had room to spare on its right. The lot count leaves the
     bar too - that same strip says which lots these are. */
  .bd-bar__in{flex-wrap:nowrap;padding-top:8px;padding-bottom:8px;gap:8px}
  .bd-bar__id{flex:1 1 auto;min-width:0;gap:9px}
  /* NOT a smaller back arrow here any more. It was 28 while the pager and
     Filters beside it were 44, which is the mismatch the owner saw, and 28 is
     under any sane thumb target. --barbtn covers it. */
  .bd-bar__tools{flex:0 0 auto;gap:6px}
  .bd-bar__name span{display:none}
  .bd-bar__tools .lx-cols{display:none}
  .bd-mobtools{display:flex}
  /* Only the bar's button goes iconic - it has a row to share with the auction
     name. The strip has room, so My list keeps its words. */
  .bd-bar__tools .bd-ghost__t{display:none}
  /* ...but My List keeps its name (owner, 2026-09-17). The whole job of that
     button is answering "am I in my list or not", and a lone star answers it
     only if you already know what the star means. Filters stays an icon: its
     panel says what it is the moment it opens.

     From 360px up. Measured at 375: back 44 + tools 301 + 24 of padding = 369
     in a 375 window, so it fits with room to spare - the gap inside
     .bd-bar__id collapses because the auction name beside the arrow is hidden
     here. Below 360 there genuinely is not room, and a cramped bar is worse
     than a star, so it falls back to the icon. */
  /* Room for the word comes from the spacing, not from the targets: the arrows
     and the 44px controls are left alone, and the bar reclaims it from its own
     side padding, the gaps between the controls and the pager's middle. At 360
     that is the difference between the tools overlapping the back arrow by 3px
     and a 10px breathing space. */
  /* The tighter spacing applies to EVERY phone, not just the ones showing the
     word: at 320 it takes the gap between the back arrow and the controls from
     4px to a usable 14. */
  .bd-bar__in{padding-left:8px;padding-right:8px}
  .bd-bar__tools{gap:5px}
  /* Phone order: My list at the far left, Filters beside it, the pager pushed
     to the far right (owner, 2026-09-25).

     Done with `order`, so the DOM keeps its desktop sequence - My list, pager,
     view, columns, Filters. That is the order the wide bar wants and the order
     a keyboard or a screen reader should walk; only the phone ROW is re-laid.

     For "far left" and "far right" to mean the BAR's edges rather than the
     tools box's, the tools have to be the thing that spans it. .bd-bar__id
     carries only the auction name, which is already hidden at this width, so
     it stops taking the slack here and the tools take it instead. Without
     that, margin-left:auto would push the pager to the right edge of a box
     that is itself only as wide as its contents, and nothing would move. */
  .bd-bar__id{flex:0 1 auto}
  .bd-bar__tools{flex:1 1 auto;min-width:0}
  .bd-bar__tools .bd-mylist{order:1}
  .bd-bar__tools #bd-filters{order:2}
  .bd-bar__tools .bd-pgm{order:3;margin-left:auto}
  /* My List is text ONLY now (the star came off on request, 2026-09-17), so its
     label can never be hidden the way the other ghost labels are - there would
     be nothing left. Losing the icon also makes it about 25px narrower, which
     is what pays for showing the word at every width instead of from 360 up. */
  .bd-bar__tools .bd-mylist .bd-ghost__t{display:inline}
  .bd-bar__tools .bd-mylist{padding:0 11px}
  .bd-pgm__n{gap:5px;padding:0 2px}
  /* Below 360 the four controls genuinely do not fit: measured, they run into
     the back arrow by 24px at 320 and still by 3px at 341, and only at 360 is
     there a real gap (16px). Something has to go, and the choice is between
     shrinking the targets - the opposite of what was asked for - and dropping
     the least essential control. My List goes, and it is still one tap away
     under Filters > Sort by > My list; the pager and Filters cannot be reached
     any other way, so they keep their full size. */
  @media (max-width:359px){ .bd-bar__tools .bd-mylist{display:none} }
  .bd-ghost{padding:0 11px}
  .bd-pager{gap:10px}
  .bd-strip{margin-bottom:9px;row-gap:10px}
}

/* ---- the clock card, on a phone ----
   Above the lots it is the last thing between a reader and what they came
   for, so the two clocks stop being two stacked blocks and become rows:
   each a label on the left and its value on the right. */
@media (max-width:760px){
  /* Two to a row leaves the photograph about 165px wide, and the countdown and
     the photo count were running into each other along its bottom edge. The
     count is the one you can do without at this size. */
  .bd.is-cols-2 .bd-shot__n{display:none}
  /* On a phone the two tiles stack, as they do in the rail, and the blue one
     is a row shorter: its name on the left, the countdown on the right, the
     date under both. Measured at 375px the pair is about the height of the
     single white card it replaced, whose check band sat on a grey wash (116px,
     and 122 before that card was tightened). The countdown is 19px, the one
     number worth finding at a glance.

     The check tile STAYS STACKED, and that is a measurement not a preference.
     Inside a 351px tile there are 323px to play with; the label
     "ACCELERATED LOT CLOSING NEXT CHECK" is 236px of that on its own and the
     date beside it another 186. Putting the two in columns - which was tried -
     squeezes the label to 122px and wraps it onto THREE lines, taller than
     what it replaced. Stacked, the label fits on one line with 87px to spare,
     and still fits at 320px. If the band is ever wanted as a single row, the
     label has to get shorter first; no amount of layout will do it. */
  .lx-clocks-phone{padding-bottom:10px}
  .lx-clocks-phone .bd-when{display:flex;flex-direction:column;gap:6px}
  /* In the stack the row is just the next item, 6px under the check tile
     like the tiles under each other (the button's own 3px of padding sits
     inside that, above the words). */
  .lx-clocks-phone .bd-when__help{flex:none;margin-top:0}
  .lx-clocks-phone .bd-when__a{display:grid;grid-template-columns:minmax(0,1fr) auto;
    align-items:baseline;column-gap:12px;padding:9px 13px 10px}
  .lx-clocks-phone .bd-when__n{padding:8px 13px 9px}
  .lx-clocks-phone .bd-when__l,
  .lx-clocks-phone .bd-when__n > b{font-size:10px;letter-spacing:.08em;line-height:1.4}
  .lx-clocks-phone .bd-when__l{grid-area:1/1/2/2;align-self:baseline}
  /* Tabular figures come from .bd-when__c, which is what stops the countdown
     shivering as the seconds roll. */
  .lx-clocks-phone .bd-when__c{grid-area:1/2/2/3;align-self:baseline;text-align:right;
    font-size:19px;margin:0}
  .lx-clocks-phone .bd-when__v{grid-area:2/1/3/3;font-size:11px;margin:2px 0 0}
  .lx-clocks-phone .bd-when__t{font-size:13.5px;margin-top:2px}
  .lx-clocks-phone .bd-when__t.is-ticking{font-size:16px;margin-top:2px}
}
/* Below about 323px the countdown's timer glyph (25px of it) pushes
   "Dynamic Closing" onto a second line, which costs the tile 12px. The glyph
   is the one thing in it you can do without. */
@media (max-width:340px){
  .lx-clocks-phone .bd-when__c::before,
  .lx-clocks-phone .bd-when__t::before{content:none}
}

/* One to a row on a phone keeps the full 52px button - it is the last thing in
   the card and the width of it. Two to a row takes the shorter one, set with
   the rest of that arrangement above. */